Archive for ‘New Programmer’

December 20, 2011

Interesting Article: The Rise and Rise of JavaScript

imageI’m a big fan of computer history, and especially the history of the Web. Anybody remember LiveScript? Well, folks, that’s what Netscape – remember them? – called JavaScript before they licensed the name from Sun. If you’re only starting to get into JavaScript development, you’re lucky – the beginnings of it were horrible, plagued with incompatibility and lots and lots of swearing.

I came across a great article about JavaScript and its beginnings and where it is now. It’s always good to know the past, which will prevent problems in the future, or so we hope. Enjoy the read.

http://dannorth.net/2011/12/19/the-rise-and-rise-of-javascript/

-Auri

December 9, 2011

CSS Specificity: What It Is, and Knowing the Rules

by Nicholas Bannister Andrews, UX Engineer, The Auri Group

imageCSS specificity is not actually difficult to calculate once you know the rules. And knowing the rules can make it easier for you to construct efficient CSS selectors to target exactly what you want without making the selector convoluted and overly complex. This can lead to properties either matching more or less than what you want them to match.

I learn best by doing so I created a small webapp to calculate the specificity of the CSS styles it is given.

It does not parse or validate CSS, so you should probably use the W3C CSS validator to make sure everything is copacetic. I also made the source code available on github.com for those who like code.

Specificity Rules

I used the rules published at http://reference.sitepoint.com/css/specificity as they seemed the most straight forward and easiest to follow.

The first rule on inline styles I ignore, as my webapp processes stylesheets rather than entire webpages. I personally stay away from inline styles as they can make debugging much more difficult down the road and make style upkeep difficult by multipling the number of places you have to search.

1. If one declaration is from a style attribute, rather than a rule with a selector (an inline style), it has the highest specificity. If none of the declarations are inline, proceed to step two.

2. Count the ID selectors. The declaration with the highest count has the highest specificity. If two or more have the same number of ID selectors, or they all have zero ID selectors, proceed to step three.

3. Count the class selectors (for example, ".test"), attribute selectors (for example, "[type="submit"]"), and pseudo-classes (for example, ":hover"). The declaration with the highest total has the highest specificity. If two or more have the same total, or they all have totals of zero, proceed to step four.

4. Count the element type selectors (for example "div") and pseudo-elements (for example, "::first-letter"). The declaration with the highest total has the highest specificity.

Examples

Now for an example. Say we are comparing two similar style rules that are targeting first-child list elements. The first is: "ul#special-list.inline-list li:first-child" and the second rule is: "div#main-content ul.inline-list li:first-child"

Let’s count the selectors!

IDs

  • Rule 1: one (1) ID; #special-list
  • Rule 2: one (1) ID; #main-content

Classes/Pseudo-classes/Attributes

  • Rule 1: one (1) class; .inline-list and one (1) pseudo-class, :first-child
  • Rule 2: one (1) class; .inline-list and one (1) pseudo-class, :first-child

Elements/Pseudo-elements

  • Rule 1: two (2) elements; ul and li
  • Rule 2: three (3) elements; div, ul, and li

This gives us the specificity matrix of [0,1,2,2] and [0,1,2,3]. Again, the "0" in the first column is for inline styles.

So, Rule 2 is more specific because it has one more element selector than Rule 1 does, while the other columns, for Inline Styles, IDs, and Classes, are all equal.

Now, let’s consider the following rules on level 1 headings: – Rule 1: "#main-content h1" – Rule 2: "body div article section h1"

The first has an ID of "#main-content" and a single element of "h1". The second consists of only five (5) element selectors: "body", "div", "article", "section", and "h1".

Since the first rule has an ID and the second does not, the first rule wins the specificity contest. A higher number in a same or preceding column will always trump any number in following column.

But what happens if they are equal on all columns? Well, that’s easy. The rule that comes last overrides the rules that came before.

Hopefully now, you’re beginning to understand the way specificity works. If not, fear not! Check out the resources below.

References

1. http://reference.sitepoint.com/css/specificity

2. http://www.w3.org/TR/CSS2/cascade.html#specificity

October 27, 2011

Underappreciated Numerical Aspects in Computing

by Brett Riester, Senior Engineer, The Auri Group

Personally, I wanted to write about this on November 11, because it then it would be "binary" day, 11/11/11. Of course, there were other binary days in the 21st century so far (in the year 2011, as well as 2010, 2001, and 2000); e.g. on 01/01, 01/10, 01/11, 10/01, 10/10, 10/11, and on 11/01 and 11/10 (coming soon to a theater near you!). But 11/11/11 is the real symmetrical one!!

[BTW, 10/28/11 can also kind of/sort of be thought of 11/11 because 1+0+2+8 /11= 11/11, but that’s another story.]

Numbers have long been a cornerstone of computing, and thus hold a special significance in the discipline of computing technology and, specifically, in software development. Whether rigorous or not, in one form or another, they have played both central and supporting roles in the context of the whole gamut of this ever-growing field, from transportation, housing, business, industry, government, healthcare, and commerce-type software to digital/interactive games/entertainment, web- and mobile- based "apps" to, nowadays, software running through your kitchen refrigerator or even toaster (-oven)!

My personal interest in numbers mainly focuses on how we represent and manipulate them in computers via software, however, my educational background was supplemented with a math degree, so I am interested in them from a purely mathematical perspective, as well.

Wikipedia describes some number formats used in computing at http://bit.ly/rAyzRh. There, they describe numbers represented as "bits and bytes" (as well as "nibbles"), number systems such as binary, octal, and hexadecimal, in addition to decimal/fractional formats e.g. floating-point numbers.

Wikipedia (as well as many other places both online and off), can give you the "mechanics" of numbers/systems/formats, but I’m going to try to relate a bit more of their "philosophical" aspect, and/or some of the "bigger-picture" of their role in (modern, digital) computing (and perhaps society). First, in order to begin to realize just how important are these little things that we call numbers, try to imagine a world without them. Such a world is difficult to really imagine at all (at least for me). For, if you think about it, numbers form the basis of so many, many ways that people relate to one another, in terms of quantifying/valuing things (not just money) and differentiating/distinguishing all sorts of things from size (how big is that bread-box, anyway?) to area (how much land does my neighbor have on the other side of the fence?) to volume, weight, rates-and-conversions, etc., etc. – even time itself! (at least how it is measured) And would scientific/engineering disciplines even exist without numbers? Without numbers, we would still be in the Dark Ages (actually, really the Stone Age!!)

That’s society, though; let’s try to focus more on computing, specifically how numbers are used in the modern, digital age. Most people would probably agree that we are certainly living in a (very fast-paced) Technological (or "Digital") Age. So "digits" (i.e. numbers) are really the basis of this Age. Without numbers, we wouldn’t have any of our precious "modern-day-miracle" devices, gadgets, or "toys"; desktop/laptop computers, (smart) cell phones, (personal) electronics, game-consoles, even smart-cars and smart-houses! (the list goes on and on)

I think that we all know, at one level or another, the importance of numbers in our modern lives. But what about digital-computing, and software development? Without these, would we be programming on the abacus or something like that??

Numbers (in the context of digital-information and its processing/storage) is an extremely valuable tool in how we humans communicate and relate to each other in so many aspects. However, before continuing, I would like to say that its at least very interesting to note that the human-brain, so far as we understand it, is not digital at all. It is analog and is relatively very, very slow as compared to modern-day digital computing devices!

But, as tools, technological/computing devices (and thus effectively their digital-aspects/basis) are a cornerstone of many modern lifestyles of people from around the world.

So numbers are important; they matter. But how are they used, specifically in software engineering/development, that make them so "powerful"? Particularly, the Binary System, upon which most (if not all), "mainstream" (non-research-only) software is based. Well, nowadays, most modern software developers only infrequently need to think about binary numbers, and be concerned with how to manipulate them in programs that they write. That is in-large-part thanks to modern "3/4/5GL" computer languages (and, of course, their supporting operating systems).

However, Binary still actually underlies all that "modern" software that they build. Computing, particularly in regards to software, is very-much like an onion, in that it has layers on top of layers on top of layers. Such that, even if you only work with it at a relatively "high-level", the "lower" layers get more-and-more Binary. After all, the lowest-level, the "raw metal" so-to-speak, is all just 0’s and 1’s!

Binary is so important (and powerful), that it’s hard for me to imagine computer/software really based on any other number-system. (even though it easier for us people to work with hexadecimal, or octal, or even decimal; BTW, Douglas Adams’ supercomputer named Deep Thought came up with the answer to the Ultimate Question of Life, the Universe, and Everything as 42 = 6 times 9, in base 13, that is!! http://bit.ly/sF5d9k)

Perhaps one reason is because I know that the (hardware) circuit-gates are either open-or-closed ("on" or "off", 1 or 0; i.e. Binary). But it is the (innovative) combination of these little 0 and 1 bits that make them so powerful. It’s a little like the old saying, "two heads are better than one", albeit billions of times over!

People in today’s society have been so pre-conditioned to just expect extreme speed and such high precision/accuracy from modern computing devices (at least, most of the time, barring inconvenient, albeit usually infrequent, malfunctions, not to mention the all-too-common PICNIC phenomenon, "Problem In Chair, Not In Computer"). But how many of us take a step-back and stop-and-think to realize the "true" basis of all these modern-day "dream-machines", which really is numbers.

So, the next time that your life is impacted by modern technology, pause for a "binary" second and gain a little bit of perspective of and deeper appreciation for numbers, upon which all this computing and digital "stuff" is really based!!

March 11, 2011

ASP.NET Membership Provider Part 1

ASP.NET has a membership provider built-in that can be used to authenticate and manage the users who will be visiting your website. These features can be used to determine if a user viewing the website is authenticated or anonymous and to display content according to who is viewing the page. There are also controls for creating new users, changing passwords, and logging in.

Creating The Database

In order to use the ASP.NET membership provider you will need to create a database. The membership tables can either be part of the application’s database or it can be its own database.

Integrating the membership tables with your application’s database has a few benefits such as being able to create foreign keys between the membership tables and your own. However, creating the membership tables in their own database will allow multiple website to use the same database for authentication.

To crate the tables and store procedures navigate to Start –> All Programs –> Microsoft Visual Studio XXXX –> Visual Studio Tools –> Visual Studio Command Prompt.

Enter the command aspnet_reqsql to start the ASP.NET SQL Server Setup Wizard

Figure 1

Figure 1: Visual Studio Command Prompt

After the wizard has started click next.

Figure 2

Figure 2: ASP.NET SQL Server Setup Wizard

Select “Configure SQL Server for application services.”

Figure 3

Figure 3: ASP.NET SQL Server Setup Wizard

Enter the server’s name and credentials if necessary. Also select the database where the ASP.NET membership tables and stored procedures should be created.

Figure 4

Figure 4: ASP.NET SQL Server Setup Wizard

Verify the entered information is correct and click next. Then click finish.

Figure 5

Figure 5: ASP.NET SQL Server Setup Wizard

The tables and stored procedures for ASP.NET Membership have now been added to the selected database.

Configuring The Application

The next step is to configure the application’s web.config file.

First setup your connection string to the database. If you created the ASP.NET Membership tables in a separate database you will need to create two connection strings.

Figure 6

Figure 6: Connection String Settings

Now we need to change the authentication mode to forms and set the login URL for the web site.

Figure 7

Figure 7: Authentication Settings

Next we need to setup the membership settings.

Note: The application name setting is used when multiple websites use the same database for authentication.

Figure 8

Figure 8: Membership Settings

Moving Forward

Your database and website are now configured to use the built in ASP.NET membership provider. In part 2 I will discuss the controls(login, register, validation) built into ASP.NET to take advantage of the membership provider.

March 10, 2011

New Programmer: User Groups Are Your Friend

One of the issues I’ve noticed with student developers is their lack of practice in their art. This is understandable, considering you always have to start somewhere and build a foundation, and that can be very scary. Just as musicians must listen to and learn from other musicians (say, guitarists eyeing the Eagles’ Joe Walsh), developers need to listen and learn to other developers. Local user groups are a great way to do this, and usually without costing a dime.

What User Groups Offer

User Groups offer you the ability to chill out with people with the same interests and exchange ideas, ask and answer questions, and be surrounded by those who are like you. If you’re trying to learn how to code in Java, hanging out at McDonald’s isn’t going to do it. Going to a Java User Group, usually called a JUG, is where you’re going to learn to hone your craft. User Group meetings usually have some sort of topical presentation, then breakout sessions for specific topics, such as Web development, mobile development, and database solutions.

Finding User Groups

There are many resources out there to help you find a user group. Bing and Google are your friends, especially since there aren’t usually more than a handful of groups per topic per capita. So, starting with search engines is a good place to begin. It should be as easy as entering your nearest major city and the topic plus the term user group. Additionally, many of the developer user groups are part of a larger user group movement across the world, so I would look for <City Name> + <User Group Type You’re Looking For>, such as:

  • Indianapolis .NET User Group
  • Bay Area SQL Users Group
  • Boston PHP User Group

Some of these groups have particular nomenclature for themselves, such as Java User Groups being named JUGs. So, the following chart may help as well when crawling through search results:

  • Indiana + Windows User Group = I + WUG = IWUG
  • Indiana + Linux User Group = L + WUG = LWUG
  • Indiana .NET Developer Association = Indy + NDA = IndyNDA
  • Indiana Java User Group = Indy + JUG = Indy JUG
  • Indy + SQL Association = Indy PASS
  • Indy + Alternative to .NET-Only User Groups = Indy ALT.NET

A number of industry organizations have formed and make available lists of user group meeting locations. Some of these organizations include INETA, SQL PASS, GITCA, Java User Group (JUG) Community, image

You may also want to check out APCUG, the Association of Personal User Groups. While I’m not sure they’re as popular as they were in the 80s and 90s, they may still be able to help.

Still other ways to find user groups include platform Web sites, such as Microsoft’s Web site, the Java Web site and others… they usually have a support and/or resources section for finding gathering grounds for like minds.

Find Friends in Your Field (a.k.a. “Networking”)

Another opportunity presented by user groups is the ability to network, which is the act of finding people who can help achieve your mutual goals. If you’re a student looking for an internship, you’re much more likely to find people willing to bring you on if you’re regularly attending user groups than if you just outright search for internships.

Perception is reality – if you’re attending groups with people who know their stuff, other people in those groups will start to believe you know your stuff as well. It sure is easier to land an internship or a job if you’re a known quantity.

Moving Forward

It’s easy to get disheartened when starting in software development. There are a lot of people who know more than you. But all those people started where you are today. Those same people are willing to help you get better, possibly better than them! It’s always best to surround yourself with and learn from people who know more than you. It keeps things real, and makes you a better developer.

Additional Resources

Obviously Bing and Google are your friends when it comes to finding info on the Web. Some of the links below may also help you quickly find a user group resource:

February 21, 2011

A Good Start with Google App Engine (for Python)

I started playing with Google App Engine more than a year ago as a way to get my feet wet with Python. However, over time, I’ve noticed that when I want to play around with an idea I have for a web application, I find I spend too much time setting things up before I get to the fun stuff.

Looking over my playground, I’ve noticed a few items that are fairly consistent over all the project carcasses lying around:.

  • Nearly all use the Tornado framework
  • All use a template system (a couple different ones; I’m covering Jinja2)
  • Several had simple comment or forum systems and used reStructuredText (rst) or Markdown as the markup language, which was then converted into HTML for display on the web.
  • Several had support for code syntax coloring using Pygments.

When you have an idea, you want to get it out and work with it as fast as possible to see if it’s worth putting more effort into. If you follow this article, you can use it to keep a starter application around in your back pocket.

Prerequisites

Google App Engine

If you want to work through this article, you’ll want to go to the Google App Engine homepage, download the SDK for your platform, and read up on it a bit if you haven’t already. You don’t need to get an account until you are actually ready to deploy a project.

Python 2.5

A requirement of the Google App Engine SDK is Python 2.5. Because Python 2.5 is a little on the old side (2.7.x is the current version), you’ll need to check the installed version if you’re on a Unix/Linux-type system (including Mac OS X) as Python is usually a part of most default installations. Mac OS X Snow Leopard comes with Python 2.6, so you’ll have to install 2.5 yourself if that’s going to be your development system. At the end of the article, I included a Resources section for links and extra stuff. I have also included a subsection titled, Installing Python 2.5 for Mac OS X 10.6.

I myself haven’t had any issues using Python 2.6…yet. (I sometimes forget to change the Python version I’m using). But you shouldn’t count on it not throwing a weird error your way.

Tornado – Request/Response Framework

Tornado is an open-source non-blocking webserver, written in Python. It was created by and is used to power FriendFeed (bought by Facebook in 2009). You can’t use all of its features on App Engine but I’ve grown to like its request/response framework and a couple of the extras it comes with that are nice (XSRF/CSRF attack prevention for one). Tornado is always the first thing I add to my projects. If you’d prefer not to use Tornado, I’ve linked to a page with a list of several other frameworks at the end of this article in the Other Frameworks section.

Adding and using Tornado in your projects

  • Download Tornado
  • Unarchive
  • Copy the “tornado” directory from “tornado-n.n.n” (where n is a number; I downloaded 1.1.1) to the root of your App Engine Project. The root of the project is the directory where app.yaml, index.yaml, and main.py reside after you create a project using Google App Engine Launcher.

The next step is to edit main.py. We’re just going to stick with the “Hello, World!” app that the App Engine SDK initially creates but modify it to use Tornado instead of webapp. So go ahead and open main.py.

The first two lines of code import webapp and webapp.util, which we no longer need.

from google.appengine.ext import webapp
from google.appengine.ext.webapp.util

Go ahead and delete them and then, add the following three lines:

import tornado.web
import tornado.wsgi
import wsgiref.handlers

This gives us access to the Tornado web framework request handler (tornado.web.RequestHandler), which we’ll be using to replace the handlers from webapp (webapp.RequestHandler), the Tornado WSGI (Web Server Gateway Interface) implementation, and the Python WSGI reference handlers to run the Tornado WSGI application you create (in a few minutes).

Since the point of this article is to give you a decent starting point for creating your App Engine projects, let’s define a base handler, which we will use as a foundation for all our projects’ handlers. It will extend tornado.web.RequestHandler so we get all the goodies from there, but also any methods we define under our base handler will also be accessible from any handlers that extend our base handler. This keeps things organized, simple, and keeps us from defining the same functionality over and over and over again. Who wants to keep reinventing the wheel? That doesn’t move you forward.

The code for the base handler at this point is really simple and is as follows:

class BaseHandler(tornado.web.RequestHandler):
    """BaseHandler
        [document this class here; what are it's properties? what are it's methods? What are it's hopes and dreams?]
    """

Insert the BaseHandler class above the MainHandler class.

Now modify the MainHandler class to inherit from BaseHandler instead of webapp.RequestHandler. I also will change the output so I know it has truly changed and is not just a cached version. So, instead of “Hello, World!” I have it say, “Hello, Tornado!”.

class MainHandler(BaseHandler):
    """The MainHandler for the application. Just says "Hello, Tornado!""""
    self.write('Hello, Tornado!')

Last and definitely not least, is to modify the main() function. Currently, it creates and runs a webapp application:

...
application = webapp.WSGIApplication([('/', MainHandler)], debug=True)
util.run_wsgi_app(application)

However, that’s not what we need. We’re no longer using webapp so we need to use these instead:

settings {
    "xsrf_cookies": False, # If True, forces you to include tokens for POSTs
}
application = tornado.wsgi.WSGIApplication([(r"/", MainHandler),],**settings)
wsgiref.handlers.CGIHandler().run(application)

Now, test that puppy out! If you ran the dev_appserver.py from the command line, the URL should be in the last line of the output when you start the server.

dev_appserver.py app-name
...
INFO     2011-02-12 16:32:01,522 dev_appserver_main.py:507] Running application app-name on port 8080: http://localhost:8080

If you’re using the App Engine Launcher, select the appropriate app from the list, click the green Run button and once the icon next to the project is green, click the browse button (the browse button doesn’t always show that it is clickable and sometimes I just have to click it a couple of times).

All should be well and good and you’re now using Tornado instead of webapp! Read up on the framework or read the code (the code is very well documented–another plus).

Jinja2 – Templates

A good template system helps keep things organized. It’s bad form to output HTML directly from your code. It’s cleaner and easier to maintain if you use a template system. It also makes it easier for a designer or front end developer to work but not have to monkey around in code. Jinja2 is based off of Django templates and I find it fits me quite well.

Adding and using Jinja2 in your projects

There are simple instructions for getting Jinja2 to work on App Engine. But wait! Before you go off and do that, you need to install Jinja2! I installed Jinja2 as a Python Egg. Then in step 2, I copied the “jinja2” directory from the Python egg into my project’s root and followed the rest of the instructions.

I also used a couple of suggestion from the comments (comment [5] by “bneijt”) who put the template code in its own class (class TemplateRendering) that your handlers inherit from. I changed it up a bit to suit my needs. I have it return the result instead of writing it to the response (as the name of the method indicated). I did this so I could render a small template like a menu or breadcrumbs and pass the rendered result to another template. I also renamed the method “render_template” from “render_to_response” as it doesn’t write to the response anymore. My code is below but you should check out the original too.

class TemplateRendering:
    """TemplateRendering
       A simple class to hold methods for rendering templates.
    """
    def render_template(self, template_name, variables):
        """render_template
            Returns the result of template.render to be used elsewhere. I think this will be useful to render templates to be passed into other templates.

            Gets the template directory from app settings dictionary with a fall back to "templates" as a default.

            Probably could use a default output if a template isn't found instead of throwing an exception.
        """
        template_dirs = []
        if self.settings["templates"] and self.settings["templates"] != '':
            template_dirs.append(os.path.join(os.path.dirname(__file__),
            self.settings["templates"]))
        template_dirs.append(os.path.join(os.path.dirname(__file__), 'templates')) # added a default for fail over.

        env = Environment(loader = FileSystemLoader(template_dirs))

        try:
            template = env.get_template(template_name)
        except TemplateNotFound:
            raise TemplateNotFound(template_name)
        content = template.render(variables)
        return content

Of course, if you’re using Tornado you’ll need to adjust accordingly if you haven’t already.

I changed the body of the MainHandler get() method to:

class MainHandler(BaseHandler, TemplateRendering):
    ...
    def get(self, *args):
        ...
        # a bunch of variables to pass into the template
        variables = {'message':'Hello, Tornado!', 'page_title': self.settings["page_title"], 'page_description': '', 'page_author': 'The author of the page.', }
        content = self.render_template('index.html', variables) # remember, I changed the name of the method from "render_to_response"
        self.write(content)

If you’ve noticed “self.settings[“page_title”]” in the code samples above and thought I’d missed telling you something, you have a good eye. This is how you access entries from the settings dictionary. The only problem here is that I haven’t told you to add any entries yet so let’s go ahead and do that.

settings {
    "page_title" : "It's a Tornado, Toto!",
    "templates" : "views",
    "xsrf_cookies": False,
}

Since this project is to set up a starting point for development, let’s use the HTML5 Boilerplate as a base for the templates. Create a “views” or “templates” folder in the root of your project (make sure the name matches the “templates” entry in your settings dictionary) and copy the index.html file there. We’ll deal with styles, JavaScript, and all that jazz in the next section.

If we ran the project now, “Hello, Tornado!” would not be displayed as we haven’t defined where in index.html to output the message variable. So, open index.html and, wherever you want the output to show up, add the following template code:

{{ message }}

If you want you can wrap it in an HTML element:

<div class="message">{{ message }}</div>

Now try it out and you should see your message!

CSS, JS, and Other Static Content

Now that we have the templates in place, I think this is a good time to bring up static content such as CSS, Javascript, and Images and how to map or link to them in your templates. If you’re still using the default app.yaml created by App Engine, all requests to the server are routed to main.py. You could set up routes in your application to accommodate these files but I think it’s simpler if we just use use app.yaml and leave the application stuff to main.py. Google has some great documentation on app.yaml in their documentation: Python Application Configuration. To get you started, below is what I usually include:

- url: /static/
  static_dir: static

- url: /robots\.txt
  static_files: static/robots.txt
  upload: static/robots.txt

- url: /favicon\.png
  static_files: static/images/favicon.png
  upload: static/images/favicon.png

- url: /apple-touch-icon\.png
  static_files: static/images/apple-touch-icon.png
  upload: static/images/apple-touch-icon.png

  # JavaScript
- url: /js/(.*\.js)
  static_files: static/js/\1
  upload: static/js/(.*\.js)

  # StyleSheets
- url: /css/(.*\.css)
  static_files: static/css/\1
  upload: static/css/(.*\.css)

  # Images
- url: /(.*\.(gif|png|jpg|jpeg))
  static_files: static/images/\1
  upload: static/images/(.*\.(gif|png|jpg|jpeg))

This is all above the entry for main.py. Anything that doesn’t match the special entries above get routed to your application where webapp, Tornado, or whatever framework you’re choosing to use can deal with it appropriately (e.g., a 404 or what have you).

- url: .*
  script: main.py

These new entries in app.yaml allow you to organize all your static files in a directory structure like so:

/static/css
/static/images
/static/js

I prefer to keep the root directory as clean as possible so I like organizing all the static files in a “static” directory in the root of the project but I think the URLs are cleaner if they don’t have static in them so the these new entries in app.yaml allow for that.

If you want to link to your css in ~/static/css/, use:

<link rel="stylesheet" href="/css/style.css">

To link to your javascript files in ~/static/js/, use:

<script src="/js/scripts.js"></script>

I’ll let you guess the rest.

The “/” in the front is necessary with how it’s setup. If you used the code from the HTML5 Boilerplate, make sure the leading “/” is present.

Now, you can copy all the CSS and Javascript from the Boilerplate to the static folder in your project and test it out. For the example application, I also used the 1140 grid from cssgrid.net. Pretty cool.

Markup Languages – reStructuredText/Markdown

reStructuredText

Syntax: http://docutils.sourceforge.net/docs/user/rst/quickref.html

The reStructuredText (or rst for short) markup language is used to standardize the documentation strings (docstrings; the triple-quoted strings) to document code in Python but has also been used to write technical books and can be converted to practically any format you’d want (e.g., XML, HTML, LaTeX, ODF, etc.).

Adding and using reStructuredText/Docutils to your project

I got the instructions for how to incorporate docutils into App Engine from Andi Albrecht’s blog: http://andialbrecht.wordpress.com/2008/08/14/using-restructuredtext-on-app-engine/ but I have detailed the instructions below since he just lists the command-line commands he uses and may throw some people off.

Download the docutils-snapshot.tgz and uncompress it resulting in a docutils folder. From inside that folder is another docutils folder. This is the one you want to copy to the root of your project. You will also want roman.py from the extras folder. You also place this in the root of your project.

To use docutils (or at least the part we need) you need to import publish_parts from docutils.core.

from docutils.core import publish_parts

To make things a little cleaner, I put most of the rst stuff in it’s own method in the BaseHandler class. If you remember why we created the BaseHandler, this will allow any of the handlers that extend BaseHandler to call this new method like so: self.render_rst(rst_to_process).

def render_rst(self, rst):
    parts = publish_parts(source=rst, writer_name='html4css1',
                   settings_overrides={'_disable_config': True})
    return parts['html_body'] # was 'fragment'
Note: When was was testing this, I noticed that 'fragment' doesn't return any headings unless they are the only thing you input. This is probably what you want for most applications where the title will also be in a textbox input, but for demonstration purposes, I output all the html. If you want to see all the possibilities (including css), just loop through the *parts* dictionary and output the key names.

Pygments – Syntax Highlighting Code Blocks

If you’re hoping to create your own simple blog or plan on having coding samples displayed, a syntax highlighter will make your life much easier and save time and sanity. Enter Pygments.

To get working with Pygments is pretty easy.

Download Pygments from https://bitbucket.org/birkenfeld/pygments-main/src. Then on the right side of the page, there’s a “get source” menu next to a red heart with a little green plus sign. From the “get source” menu you can select what kind of archive you want to download.

The reStructuredText directive comes with the distribution (see http://pygments.org/docs/rstdirective/). It’s in external and called rst-directive.py. You just need to copy it to /docutils/parsers/rst/directives directory in your project. I also renamed rst-directive.py to sourcecode.py since the directive is called “sourcecode”.

Now add the import at the top of main.py.

import docutils.parsers.rst.directives.sourcecode

This registers the new sourcecode directive with docutils so now if you do something like this:

.. sourcecode:: python

    def a_function(self):
        """a_function is the simplest function ever! it does nothing!"""
        pass

…it’ll get processed with Pygments and spit out properly.

Markdown and Pygments

Syntax: http://daringfireball.net/projects/markdown/syntax

Markdown is another markup language similar to reStructuredText. It is probably simpler to learn as it uses formatting you may already be familiar with as it derives heavily from the formatting of text in text-only email that’s developed naturally over the years. reStructuredText on the otherhand was created to be simple and powerful and has been used to write books. Use the one that best fits the bill.

To integrate Markdown and Pygments into the project, there are very nice instructions in part two of an article by Joey Bratton at http://www.joeyb.org/blog/2009/06/03/django-based-blog-on-google-app-engine-tutorial-part-2 under the heading: “Markdown and Pygments”.

If you have already integrated Pygments into your project (from the previous section) you should only need to read the first paragraph on Markdown from Joey Bratton’s article.

As the article deals mostly with Django and is not necessary for what I’m talking about (though you may want to look into it later) I’ve extracted from the article the few lines of code you do need.

Of course, you’ll need to import Markdown:

import markdown

And then, below, is the code to use it. I have mirrored what I did with rst and created a function to keep the code in the handlers light. I have also added an HTML wrapper around the output to keep the HTML structure similar to that of the docutils rst output. This is of course to make it easier to style.

def render_md(self, md):
    """render_md(self, md)
        self - BaseHandler
        md - raw markdown text
    """
    markdown_processor = markdown.Markdown(extensions=['codehilite'])
    html = markdown_processor.convert(md)
    html = '<div class="document">'+html+'</div>'
    return html

Putting it all together.

If you’ve been following along, you should now have the code in place for using the Tornado framework, Jinja2 templates, the ability to process both reStructuredText and the Markdown markup languages into HTML, and use Pygments to markup code examples for easy styling using either markup language. Only Pygments relies on other software (either Docutils for reStructuredText or Markdown for Python for…Markdown), so if you don’t like Tornado and would prefer to use a different framework or are already comfortable with say the Cheetah template system, use what you’re comfortable with.

To use all the pieces in this article, I created an application where someone can select a markdown language (rst or Markdown) and in a textarea, type in the markup language they’ve chosen. When they submit, it spits out the HTML result back out on the page. Nothing fancy, but I used it to convert this document from Markdown to HTML.

I hope this helps you create applications more efficiently or at least gives you a taste of Python and App Engine.

Resources

Here is a list of resources used linked throughout this document:

Example Application and Code:

XSRF/CSRF (Cross-site Request Forgeries)

Since XSRF/CSRF attacks can be pretty easy to implement (bad) but also, especially with Tornado, easy to defend against (good) I figured it would be a good idea to link to an article about preventing XSRF/CSRF attacks. Tornadoweb.org has all the documentation for defending against XSRF/CSRF attacks you’ll need (as long as you’re using Tornado). If you’re planning on not using Tornado, look through the documentation or for an implementation you can use for your particular framework.

Profiling, Appstats, and FirePython/FireLogger

Here are several articles on Profiling, Appstats and using FirePython. Profiling is about collecting data about your application as it runs; the function calls, the memory usage, the time it takes for things to execute. It can be very helpful when you are tracking reasons why your application is slow, unresponsive, or crashing.

Other Frameworks

The Tipfy (a framework written specifically for Google App Engine) wiki has a list of frameworks that work (modified or are created specifically for use) on Google’s App Engine: Tipfy wiki – App Engine Frameworks

Installing Python 2.5 for Mac OS X 10.6

Mac OS X Snow Leopard comes with Python 2.6 installed by default. Google App Engine uses 2.5 and to prevent the differences between the two versions from befuddling you and getting in the way of the fun of programming, you should install Python 2.5.x.

Unfortunately, it has been a while so I don’t recall exactly how I did it, but I believe I used MacPorts http://www.macports.org/install.php, which should make it super easy. You do need to have Apple’s Xcode Developer Tools installed, which is a rather large download, so start now. If you still have the disks that came with your Mac, you can get recent enough versions from the extras disk.

Then, after you’re finished installing Python 2.5, you can switch the version you’re using so you’re not stuck using the old version for other software.

If you’re using the GUI Google App Engine Launcher, go to preferences and tell it to use python in /usr/bin/python2.5 (or wherever you’ve installed it). You can also use the other option below if you do it before starting Google App Engine Launcher (or if you restart Google App Engine Launcher afterwords).

If you use the dev_appserver.py command from Terminal, you can switch the version by issuing this command in Terminal:

defaults write com.apple.versioner.python Version 2.5

Got that from StackOverflow: http://stackoverflow.com/questions/1380281/set-snow-leopard-to-use-python-2-5-rather-than-2-6

Notes

Code Styles

I apologize about the code styles not coming out colored correctly. WordPress.com doesn’t let you include inline styles or include custom styles without paying more, which I didn’t anticipate.

Pre Styles

One thing I did notice once I got Pygments working was that in the setup I created (with the html5boilerplate), the styles for the pre element used for code output made the text extend outside of the designated area instead of wrapping as I’d have liked (and as the styles tried to indicate).

Around line 55 of styles.css (for the HTML5 Boilerplate) you’ll see a style like-a-this-a:

pre {
    padding: 15px;
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    word-wrap: break-word;
}

There may be a reason for defining “white-space” three times but it doesn’t seem to work in Chrome, Safari, and Firefox. Or they are in the wrong order? Looking at the comments for the html5boilerplate Github page, https://github.com/paulirish/html5-boilerplate/issues/#issue/294 it looks like there may very well be a problem. So I have changed it below to “fix” it but haven’t had an opportunity to test it thoroughly.

pre {
    padding: 15px;
    word-wrap: break-word;
    white-space: pre-wrap;
}
February 14, 2011

New Programmer Skill: Option Strict

When first learning how to program it is important to concentrate on the basics and learn the correct way to avoid falling into bad habits that will be hard to break down the road. Since you are new to programming you will most likely not know all the correct ways to write code, so it’s nice to have something like Option Strict there to teach (or remind) you what is correct.

Why Use Option Strict?

When Option Strict is set to on, it will not allow the implicit narrowing conversions without the use of an explicit cast.

In this example, vb.net allows me to set a double equal to an integer. If we were to run this example, dblCost would have a value of 39.95, but intCost would only have a value of 39. This occurs because the data type double can handle decimal places, while the integer data type cannot. The compiler tries the conversion, but the result is the wrong result.

After enabling option strict in the same example you would receive an error like:

By changing Dim intCost As Integer = dblCost to Dim intCost As Integer = Convert.ToInt32(dblCost), we have fixed the error message given by the VB.NET compiler. While this fixes the compiler error message it doesn’t fix the incorrect logic because after converting 39.95 to an integer explicitly the value will still be 39.

Since we enabled Option Strict we would see this error as a compiler error. If Option Strict were not on this error would most likely not have been caught until an angry customer noticed they are not receiving the correct values and hours could be wasted debugging the program to find the error.

Enabling Option Strict

By default Option Strict is set to off to allow conversions from Visual Basic 6 to VB.NET. So it will have to be enabled manually and this can be accomplished in one of three ways.

Option 1: Enabling in code.

You can add the following line of code to each of your code behind pages.

Option 2: Enable Option Strict for entire project.

To enable option strict for the entire project, simply right-click on the project in question -> click properties -> select Compile and change Option Strict to on.

Option 3: Set Option Strict as default for all project.

To enable option strict as the default for all projects, click tools -> click options -> select VB Defaults under Project and Solutions and turn Option Strict On.

Moving Forward

Using Option Strict is a great way to improve your programming skills and know how. If you plan on moving to another language like C# it is a good idea to use Option Strict while developing in VB.NET because you will not have the option in C#. So do yourself a favor and use Option Strict while you can because it won’t always be there.

February 9, 2011

Why Spend or Steal? Get your programming tools for free!

Many beginning developers believe it’s too expensive to get involved in development. The fact is, it’s hard to find tools you have to pay for when you’re starting out! The majority of tools, from the IDE (Integrated Development Environment) to the database software, and even the Web server to run on your machine are all free. In this article I’ll go over the tools you should get to do development on some likely platforms.

Microsoft .NET Development

  • Primary Web site for all Microsoft development resources: www.msdn.com – The Microsoft Developer Network
  • Application Development: Visual Basic 2010 Express Edition and Visual C# Express Edition
  • Mobile (Windows Phone 7) & Silverlight Development: Microsoft Mobile Developer 2010 Express Edition (includes Expression Blend for quick user interface design as well!)
  • Web Development: Visual Web Developer 2010 Express
  • Database Development: Microsoft SQL Server 2008 Express

All of the solutions above should be available using the super slick Microsoft Web Platform Installer, available at http://www.microsoft.com/web/downloads/platform.aspx.

Microsoft also has an awesome beginning programming site with tutorials, walkthroughs and more. You can check it out here.

Microsoft has three primary developer conferences each year, all with student discounts. Microsoft MIX is usually held in Las Vegas around March and is geared towards Web developers. Microsoft TechEd is often held in May and is geared towards learning Microsoft’s current technologies. Microsoft PDC (Professional Developers Conference) is often held around October/November and is geared towards those who want to learn about Microsoft’s current and upcoming cutting-edge technologies. You can learn more about these events at microsoft.com/events.

Apple iOS (iPhone, iPad, and iPod)

  • Primary Web Site for all Apple development resources: developer.apple.com
  • All application development is done in XCode, which is available on the Mac OS X install disc, or available via their Web site. You should download the latest version from their Web site to make sure you’re using the most up-to-date tools.
  • Selling Apps in the App Store: iTunes Connect, itunesconnect.apple.com

Apple’s primary developer conference, the WWDC (Worldwide Developer Conference) is held in the May/June timeframe in Northern California, usually San Jose or San Francisco. They usually have student discounts.

Java + Java Web Development

Android Mobile Platform Development

  • Primary Web site for Android platform development resources: android.com/developer
  • Primary tool for development: Eclipse, available free at http://eclipse.org/downloads/
  • There are full instructions for setting up the Android development environment at the Android developer primary Web site – the setup process is insanely simple for Windows users, and a bit more involved for Mac and Linux.

PHP Development

  • Primary Web site for PHP platform development: www.php.net
  • Development IDE: Eclipse is probably the most popular
  • All Inclusive PHP Web Server + Database:

    Do I need a phone or iPad when I’m doing mobile development?

    The short answer is No, isn’t that great? All of the development environments listed above come with emulators that run on your computer and take care of your ability to test most functions of your application. Of course, this means texting and phone calls can’t be fully tested if you don’t have an actual device. The platform manufacturers, Apple, Microsoft, Google, and others, all want you writing software for their platform at the lowest cost of entry possible.

    IMPORTANT: Before you release any mobile application, you should test it on as many real devices as possible. Emulators are exactly that – fake versions of real devices – and as such they may act differently than the real McCoy. So, always always ALWAYS test on the real deal before you release your app!

    Where can I find affordable Web site hosting?

    The only item that tends to cost money is your hosting provider. Usually Web hosting can be had for dirt cheap, though… look below for affordable solutions:

    • PHP: DreamHost.com and a billion others
    • ASP.NET: Server Intellect and another billion others
    • If your Web site has a database, make sure you choose a plan that supports the database platform you’ve chosen, such as MySQL or Microsoft SQL Server. The version number of these databases is also very important!

    What about the tools that cost money?

    Yes, some tools cost money. Abobe’s products aren’t free, but are often greatly discounted for students, to the tune of 80% or more in many cases. Microsoft also makes the majority of its software available to college and high school students through their DreamSpark program – https://www.dreamspark.com/.

    image

    Moving Forward

    Getting into software development sure is cheap, isn’t it? With all the free educational resources on the Web and the free tools, there’s really no excuse not to get involved with such a great field. If you have any additional questions or suggestions, please feel free to leave them in the comments.

    January 27, 2011

    New Programmer Skill: Why Debugging Is So Important

    by Auri Rahimzadeh, President, The Auri Group

    When things go wrong with code, you need to be able to find the bug quickly. The process for hunting down and killing bugs is called “debugging.” These days it’s incredibly easy to debug, making your job as a programmer much easier. I will spare you the history lesson on how debugging was done when I was growing up 🙂

    read more »