Get Ready for Google Apps Engine - Learn Python and Django

I've recently began learning Python and the Django Web Framework for a project I am working on. And with Google's recent App Engine announcement it seemed like other developers might be interested in learning these technologies too.

My first bit of advice is keeping an open mind. If you have never written Python code before, but have a background in other languages like Java or PHP, you are in for a bit of a shock (or at least I was). Python's syntax is minimalistic (and not very flexible) with the goal of making Python scripts look very similar from programmer to programmer and thus understandable by all. After fighting syntax errors and swearing at gedit for auto-inserting spaces instead of tabs I've actually come to like Python a lot.

I have no experience with Ruby on Rails but hear rumors that Django has much in common. Regardless, Django is a lightweight framework that provides the developer with a lot of shortcuts and conveniences. Less configuration hassles and more code (the Python kind that is succinct and readable).

So with an open mind, here are some resources that should help you on your way:

• Dive Into a Python - a freely available website that provides a good introduction to Python. As an added bonus you can download a PDF or HTML version of the book to read while (gasp) offline;
• Python Tutorial - An indispensable reference;
• Django - download the Django Framework and follow the 4 simple tutorials.
• Django Book - I must admit, I just found out about this free resource and haven't had a chance to look through it yet;
  
• DjangoSnippets - User contributed code snippets. Sometimes looking at someone else's code can be invaluable and save a lot of time;
• Django Screencasts - I prefer reading through well-written documentation, but if you like fancy screencasts, these should help.
  

This short list contains all that you need to get going. Grab your favourite editor and marvel at how easy web development can be. You'll be mocking your J2EE-toiling friends in no time.

... and if you really want more to read, check out this Top 30 Django Tutorials List.

Open Web Vancouver

Open Web Vancouver is coming April 14 & 15 to Vancouver Convention & Exhibition Centre. I'll be attending this year and I'm quite excited as I haven't had the opportunity to attend many web conferences in the past.

The sessions look great and I am particularly looking forward to:

• Google Gears
• Open Street Map
• Open Social
• Reusable Components in Django
• RIA with Open Standards
• Social Camp 1, 2, and 3
  

Cloud Samurai: New look for Atomeo

If you are reading this post from an RSS Reader, head on over to Atomeo to see the new "Cloud Samurai" theme. With previous blogging attempts I got wrapped up in the development and maintenance of the blogging platform (yes, I'm talking about you WordPress) and hardly posted to my blog. With my latest attempt at blogging I decided to use Blogger and focus on the content. So far this has been working out so I figured it was high-time I gave it a better skin.

I learned a lot about image creation from this project since the Samurai Kite image was created from scratch (hand sketched, scanned, GIMPed and Inkscaped). Knowing what I know now I think I could create a better image (I should have used Inkscape from the start) but I have run out of steam and want to move on.

Let me know what you think.

Douglas Crockford's Proposal for HTML5

I was reading through a blog post and found a link to Douglas Crockford's Proposal for HTML 5. It's a quick read and very high level but interesting nonetheless. Overall, the theme is small tweaks to HTML that will have a big impact on making web application easier to develop and safer to use.

If you have a passing interest in understanding how this portion of the web might evolve, I'd recommend the read.

Update: Minutes after publishing this post, the W3C made the HTML5 proposal an official recommendation. Check out the differences between HTML4 and HTML5 for an even better indication of how the web might evolve.

Semi-Transparent (Dithered) GIF Slows IE

I recently had an odd page performance problem in IE6 & 7. The page redraw was quite slow on window resize and the page would react very slowly to mouse hover events. I spent hours investigating JavaScript bugs and possible mark-up issues with no success. In the end, removing a dithered GIF from the style sheet did the trick.

Once again, I was baffled by IE's shortcomings (did I mention all other browser's performed normally?) but had to move on and find a solution. I'm posting this article to take a break from ranting about IE to my co-workers and in the hopes that other frustrated developers might stumble upon this when trying to understand why a simple web page is performing so poorly in IE.

First, you might be wondering what I mean by a dithered GIF. It's a checker-board-like image that alternates between solid colour and full transparency. Below is an example of what this GIF "looks" like.

The grey squares represent fully transparent pixels (like only a GIF can do) and the white squares represent opaque pixels. The idea is that this image can be used as a tiling background image and allow images underneath it (from parent elements - think body background) to show through. This can create a nice effect and might sometimes be used to mimic alpha-transparency in PNGs when IE6 support is important. Or so I thought. Turns out the performance hit that IE 6 & 7 users take don't really make this a viable option.

I'm not sure why IE performs so poorly when using the dithered GIF as a background image but a pretty good solution was to replace the GIF with a white PNG that had its opacity set to 50%. This solved the IE performance problems and the real alpha-transparency looked better in IE 7. The only problem was that IE 6 rendered the PNG as solid grey. To fix this the star hack came in handy to set the background colour to solid white. The slight alteration to the page's design was far outweighed by the performance boost so this made the solution quite acceptable.

Alternative Solutions that Didn't Work

• Reproducing the dithered GIF in the PNG format (keeping the binary transparency) does not improve performance
• Adding full PNG support to IE 6 through the HTC file does not work on background images
• Although it is possible to set a background colour for a PNG (I believe for the purpose of degrading when alpha-transparency is not supported), IE 6 ignores the setting and just defaults to grey

And there you have it. Hopefully this was helpful or at least interesting. If you have any insight into why IE performance is negatively impacted by the dithered GIF, please share.

How to install a GoDaddy Wildcard SSL Certificate on JBoss

I write this post mainly so that I retain the knowledge of stumbling through this frustrating and poorly documented process and in the hopes that it will be of use to another poor soul on the Internet. Specifically, this how-to will be useful if you:

• Have purchased a Wildcard SSL Certificate through GoDaddy
• Need to enable SSL on JBoss (should apply to Tomcat too) because the Apache web server is not being used to pass requests to JBoss
• Are running Ubuntu (or any Linux/Unix OS) on your server
• Are running Sun Java 1.5
  

To summarize the steps, you need to follow the GoDaddy instructions for installing the certificate on Tomcat but add an additional step of extracting your private key from "tomcat.keystore" (a file you will create). However, for the purpose of this how-to, I'll cover all the steps.

Step 1

SSH into one of your production servers and create the directory "ssl-files" to work in as you will be creating and downloading several files. CD into "ssl-files" Then run the command:

keytool -genkey -alias tomcat -keyalg RSA -keystore tomcat.keystore

This will run a command line wizard that prompts you to enter data. Whoever wrote this tool could have spent more time on the clarifying the instructions.

Enter keystore password:
[Pick something clever and write it down]
What is your first and last name?
[Don't take this literally. It turns out that "*.yourdomain.com" is the best answer]
What is the name of your organizational unit?
[Anything, this isn't really important but should be the same as a previous certificate if you are renewing]
What is the name of your organization?
[Same as above]
What is the name of your City or Locality?
[Same as above]
What is the name of your State or Province?
[Same as above]
What is the two-letter country code for this unit?
[Same as above]

Once you finished the wizard you should now have the file "tomcat.keystore" in your current directory.

Step 2

From the "ssl-files" directory, run another command to create a certificate request (.csr) file:

keytool -certreq -keyalg RSA -alias tomcat -file <your-file-name-here>.csr -keystore tomcat.keystore

Now open the newly created file:

cat your-file-name-here.csr

Copy the contents of the file so you can paste it into the CSR field of the Certificate Request form on GoDaddy's website. I'm assuming you found the correct form on the website, but if you haven't, don't feel bad as the GoDaddy site has a deplorable UI.

Step 3 (Not found in GoDaddy's instructions - nor many other places on the net)

You now need to extract a private key from the tomcat.keystore binary. This is where any official documentation leaves you hanging. Not only are you unaware of this step but there is no easy way to do using the keytool. Luckily, someone at the University of Texas has a nice write-up on this. Scroll down to the "Additional esoteric Java keytool operations" section to the 3rd step. Copy the code, and paste it into a new file (in the "ssl-files" directory) names, "GetKeys.java". Delete the first line in the file that is specifying the package as "MyPackage" and replace the three values as indicated at the University of Texas website.

Compile GetKeys: javac GetKeys.java

Run the class: java GetKeys

If all goes well you should see some text that begins with "-----BEGIN PRIVATE KEY-----". If not, you will have to go back to GetKeys.java and debug. Once you get it working, copy all the output (including the begin and end private key lines) and paste it into a new file you create named "<your-file-name-here>.key".

Step 4

Download the .zip archive provided by GoDaddy to your server (you will likely have to download it to your desktop and then scp or ftp it to your server). Now run the unzip command (note: unzip is not installed by default on Ubuntu, but a quick sudo apt-get install unzip will fix that):

unzip <big-long-random-string.zip>

This will extract 4 .crt files into your current directory, hopefully you are still in "ssl-files". Now create your "keystore.tomcat" file (not to be confused with the existing "tomcat.keystore" file) that you can copy to the correct location on your servers:

openssl pkcs12 -export -chain -CAfile gd_bundle.crt -in <_.yourdomain.com> .crt -inkey <your-file-name-here>.key -out keystore.tomcat -name tomcat -passout pass:<your-password>

Now you should have the file "keystore.tomcat" in your current directory.

Step 5

At this point you can head back to the GoDaddy instructions in order enable/modify SSL support in server.xml. The "keystore.tomcat" file can be safely used in a clustered environment and re-used on the remaining servers.

Hopefully you found this helpful. If you find any errors or simpler alternatives, please post a comment.

Resources for Web Developers on Ubuntu

Below are some links to software and web sites that I use on a regular basis. I post these as a resource for myself (when I inevitably have to rebuild a box) and in the hopes that it is useful to others.

Applications

Firefox: the majority of readers will already be users, or at least aware of this excellent browser, but I mention it to give context to the add-ons below (and because it is so good).

Add-ons (a.k.a. Extensions)

• Firebug: The ability to debug and step through JavaScript code is amazing. I have never used Microsoft’s products for web development (which I understand also provide this ability) so this is practically revolutionary for me.
• Web Developer: A collection of very handy tools for Web Developers. You have the option to use it as a toolbar, or keep it out of sight, and access its tools through the context menu.
• Live HTTP Headers: A simple tool that allows you to see the request and response HTTP headers. Although, the Firebug add-on contains header information as well, I keep coming back to Live HTTP Headers as it is simpler to use.
• Google Browser Sync: I never found bookmarks useful until I found this add-on. With this tool you can synchronize bookmarks between multiple Firefox installations. As an added bonus, it serves as a backup when you need to unexpectedly scrub your box.

Eclipse: As an Ubuntu user, that needs a full featured Java IDE, Eclipse is a pretty solid choice. Installation is a snap (apt-get, done) and the plugins can make it very powerful.

Plugins

• Aptana: IDEs or Eclipse Plugins to assist in AJAX development are few at this point. Aptana seems to be a pretty good choice so far and works with many of the major JavaScript libraries out-of-the-box. It has excellent documentation and is open source to boot.
• Subversive: I just started using this plugin. Until recently I was using Subclipse but found it a bit buggy and awkward to use. So far, Subversive has been a pretty solid replacement. I’ll need more time to fully vet it though.
• Veloeclipse: A plugin that will aid in developing velocity templates. It provides some much needed syntax highlighting and other features. What is Velocity? Velocity is an awesome Apache replacement for JSP.
• QuickREx: An indispensable tool for writing/testing your regular expressions. Includes a very handy method of converting your RegEx into Java syntax (you know, extra escape characters to make the RegEx less readable)

Useful Sites

• Regular-Expressions.info: A very handy reference site for looking up some of the more obscure aspects of Regular Expressions or trying to write a Regex in a new language.

A Box of Google Gears

Google Gears is a plugin that has been a long time coming and addresses some the of the ideas I discussed in my earlier post, "Offline Web Applications". My only exposure to it has been as a Google Reader user and to be honest I was a bit disappointed. My main gripe is that it requires the browser to remain open after going offline. It works fine if you go offline, then disconnect from the Internet and keep your browser open. But shutting down the browser, then restarting without an Internet connection does not work at all. Also, reloading Google Reader while in offline mode (without an Internet connection) does not yield pleasant results.

I don't suspect many users will find this acceptable. But since this a Google backed plugin I have hope that it will improve soon. In fact, I would not be surprised if Google rushed the plugin out the door in reaction to the spat of RIA Frameworks being announced.

Even though the plugin needs some refining, the potential is there for Web Applications to become viable alternatives to Desktop Applications. Fast-forward a few years and Google Gears is probably more stable and sophisticated. In fact, the API it exposes is likely included by default in most browsers (i.e. Firefox 3). More importantly, Web Application Developers have figured out how to incorporate offline mode seemlessly into the user experience.

But how do Web Applications gain greater acceptance in the enterprise? Perhaps by bringing the server closer to the user. This could come in the form of a box that plugs into a network and services requests for certain URLs itself (i.e. intercepts requests for Google Docs or GMail), runs code locally against a local database, and responds back to the browser. Then, depending on how the box is configured, synchronizes data back to an origin server. With the box in place, data is stored in-house (with optional offsite storage) and application response rates are much faster. Devices like the Asus Eee PC or OLPC could replace the desktop for most needs and would have the added benefit of continuing to work as normal outside of the enterprise network since requests for Web Applications would go directly to the origin server.

This box could be equally useful in a home setting (likely even more accepted) as a combo unit that acts as a wifi access point, router, and file server in addition to its application server role. Imagine using an App like Flickr served from a Gears box (leap of faith: assume box is open). Upload rates would be super fast as would editing and organizing your media. So fast in fact, there would be no need to use a Desktop App to first organize and upload your media (Goodbye F-Spot). What does Google have to do with this box? Nothing, other than they seem to be a company that wants to push the usefulness of Web Applications and become a dominant application provider.

But that's enough baseless speculation over the future of computing. At this point I am merely hopeful that in a few years Web Applications will have the option to be delivered this way.