The next one I came across was a Hillary Clinton card. With the words “President Hillary Clinton” across the top. The inside said something along the lines of: see there are things scarier than getting old. This one did stray a bit off the usual anti-Bush fodder, but she was once a first lady, so I guess it still makes sense. Believe it or not John McCain was next. This one did strike me as a bit more odd than the others; however, this is an election year so I guess you’re bound to see cards poking fun at all of the candidates… Not quite.

The final group of cards were the Barack Obama cards. I figured that they would again take some shots at the prospective presidential candidate. That’s where I was wrong, way wrong. These cards portrayed Obama as some sort of superstar, sex symbol. Not a single negative or even neutral point was made about him. You could have replaced his pictures on the cards with pictures of Marilyn Monroe and left all of the prose in place! Needless to say, I was flabbergasted! It’s basically like the greeting card company is campaigning for Obama through their cards (and FedExKinkos is indirectly doing the same by carrying the whole collection). I guess it’s their company and they can do what they want, I’m just taken aback by how blatantly biased they are. Oh well, I guess you can just chalk it up to more free publicity for Obama.

ModelForms combine the features of the two previously mentioned functions into a single ModelForm class. Let’s say that we have a Student model in our Django application and we want to create a form for it in our view. We would create a subclass of ModelForm as follows.

from django.newforms import ModelForm

class StudentForm(ModelForm):
    class Meta:
        model = Student

If you were to create an instance of StudentForm in a view method and run the as_table method, you would get an HTML form that contained all of the fields in the model. A sample view method is shown below that creates a new user if there isn’t posted data, or saves the student information if there was posted data.

def studentEditor(request):
    # Save the newly created student using posted data
    if request.method == 'POST':
        form = StudentForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/students/')

    # Create a new Student with no data
    else:
        form = StudentForm()

    return render_to_response('studentEditor.html', {'form':form})

This is great, and does basically the same thing as the old form_for_model function, but it still leaves the editing portion to be done. Before ModelForms came out, you had to use the form_for_instance function to convert an existing instance to a form instance, then render the HTML form to edit the data. Now it is much easier. You simply add an ‘instance’ keyword option to the ModelForm constructor that speficies the instance to read the initial data from. Below is the same view as above with a new argument that is the primary key of a student in the database. This primary key is used to get a student instance to pass to the StudentForm constructor.

def studentEditor(request, id=None):
    instance = None
    if id is not None:
        instance = Student.objects.get(id=id)

    # Save the created or edited student using posted data
    if request.method == 'POST':
        form = StudentForm(request.POST, instance=instance)
        if form.is_valid():
            form.save()
            return HttpResponseRedirect('/students/')

    # Create/edit a Student with database values
    else:
        form = StudentForm(instance=instance)

    return render_to_response('studentEditor.html', {'form':form})

This is pretty nice, but there is still a redundancy in creating the StudentForm instance. You have to do it in two different places for the create and edit cases. However, with a couple of little Python tricks using ‘and’ and ‘or’, you can simplify the above code to this:

def studentEditor(request, id=None):
    form = StudentForm(request.POST or None,
                       instance=id and Student.objects.get(id=id))

    # Save new/edited student
    if request.method == 'POST' and form.is_valid():
        form.save()
        return HttpResponseRedirect('/students/')

    return render_to_response('studentEditor.html', {'form':form})

Now that’s an idiom that would make a mother proud.

Design is not just what it looks like and feels like. Design is how it works.

So how could this possible lead to “danger?” I’m glad you asked. I’ve been dealing with safety devices in the home lately. Safety has taken on a new meaning to me since I moved to Tornado Alley last year. The weather in this area pretty much mandates that you have a weather alert radio to notify your of impending danger (especially at night). The other badly designed device I’ve dealt with recently is a smoke alarm. Let’s start with the smoke alarm since most people are familiar with them.

There is a smoke alarm installed in my kitchen that was there when I moved in. It works well. Too well. Any hint of smoke in the air from cooking sets it off. What happens when it starts going off for that reason? I get annoyed and remove the battery. This isn’t necessarily dangerous while I’m cooking, but I have to remember to put it back in when I’m done. That doesn’t always happen. To try to remedy this situation, I bought a new smoke alarm made for kitchens that has a “hush” button. This is a button that you press when you get “false alarms” due to cooking. Great idea! Except that it was badly designed.

I was cooking today and created a pretty good amount of smoke (no, I’m not a bad cook, some things just create smoke when you cook them). The new smoke alarm went off, and rightfully so. I pressed the hush button, and it stopped! YEAH!! Then it started to annoy me. Every minute or so, the smoke alarm let out a small chirp (basically like the chirp most smoke alarms let out when the battery is low). After a few chirps, this annoyed me enough to take the battery out. So I’m right back where I started!

If fire isn’t bad enough, weather in Tornado Alley can be even more dangerous. I purchased a weather alert radio to alert us (mainly at night) about severe weather. The first one I purchased in a very simple model and pretty well designed. It has three lights on it to indicate different levels of alert and a screen that displays what type of alert it is. It can be plugged in or can run on batteries. So what’s wrong with it? It’s too dang loud! It has the option to alert you in three different ways: light up the display, voice alert, or siren. Obviously, the light won’t do much at night; it’s not that bright. The siren is absolutely obnoxious and is loud enough to induce a heart attack in the middle of the night, so voice alert was my choice. The problem is that “voice alert” only means “partial voice alert.” Before the voice alert comes, you get about five seconds of the horrendous siren first. I’m a light enough sleeper that the voice is plenty to wake me up. I think the danger of having a heart attack by having the siren go off in the middle of the night is a bigger danger than facing whatever it is that the radio is alerting me to. Here comes weather radio number 2.

The new weather radio was much more technologically advanced. It has base station and a hand-held portion. I liked this feature because it made it handy to take into the storm shelter during an alert. Both the base station and the hand-held portion have a clock on them. Since the hand-held radio is battery operated, it isn’t affected by power outages. However, the base station doesn’t have battery backup, so when the power goes out, the time goes back to 12:00. This wouldn’t be such a big deal if it just took the word of the hand-held portion (which still has the correct time since it’s running on batteries), but the opposite occurs. The hand-held radio takes the bad time from the base station so that they are both wrong! Now I should explain that the base station is supposed to sync with the atomic click in Colorado, so it should always have the right time. But that is only true if it can actually connect to the atomic clock which brings up another design flaw.

The sensor for the atomic clock must be placed outside so that it has a clear shot at Colorado. There are conditions though. It can’t be in direct sunlight, it can’t be subject to direct moisture, it can’t solid objects between it and the atomic clock in Colorado. So it must be installed under something that gives it protection from sun and rain, but that would block the signal to the atomic clock. I give up…

I’ll definitely be sticking with the second weather radio because it has a much more sane alert than the first radio (although it does automatically turn itself to maximum volume when an alert occurs), but it is far from perfect. I haven’t even gone into the other issues that I have with it. The point is that each one of these devices annoys me enough that I consider not using them at all, which puts me in the path of danger whether it is fire, severe thunderstorms, or tornados just because of bad design. While bad aesthetics probably will never cause any real danger except to my sense of taste, design of safety devices that cause you to quit using them is dangerous.

I did finally find Vernor’s in North Carolina, but it was very expensive (probably twice what it cost in Michigan). My parent’s would also bring some with them whenever they made a visit to see me, which made it a little expensive as well since Michigan has a 10 cent deposit on all pop cans and bottles. I did come across some other ginger ales in the Whole Foods store in Raleigh by Reed’s. While Reed’s is better than the weak stuff you get in regular grocery stores, it goes a bit overboard. The herbs and spices are too strong for my taste.

I found inexpensive Vernor’s again while living in Colorado, but alas, I was only there for a few months. Now that I’m in Oklahoma, it’s difficult to find again. However, when I discovered Pops on Route 66, I was introduced to a much better selection of ginger ales than I had ever seen before. In my first visit, I selected Dr. Tima’s Honey Ginger Ale as my first ginger ale experiment.

I didn’t hold a lot of hope for Dr. Tima’s Honey Ginger Ale due to my previous experiences with other ginger ales, but I didn’t hold that opinion for long. Dr. Tima’s Ginger Ale not only has honey in it, but that is the only sweetener in it. There are no refined sugars or corn syrups. The first taste was very pleasant. It didn’t have quite the bite that Vernor’s does, but it had a great ginger flavor. The honey introduced a warmness to offset the tang of the ginger. Overall, it’s a great ginger ale and I enjoyed every sip more than the previous one. I’ll have to sample a few more bottles of it (and the other 20 or so brands of ginger ale at Pops) to see how the taste wears on me, but at the moment, it reigns my top choice of ginger ales.

The construction of Pops started in 2006. It is a store like nothing I’ve ever seen before. We actually drove by it a couple of times not even realizing what it was, but decided to go back and take a closer look. Boy am I glad we did. Pops is a Route 66 attraction that is basically a gas station and restaurant, but the real feature is pop (that’s coke for the Southerners). They have nearly 500 kinds pops and bottled waters. They don’t stock everything all the time, so you have to come back more than one time to see them all. The entire front of the building is covered in glass and has glass shelves lined with thousands of bottles of pop, just for decoration. Every bottle in the store is glass. If you aren’t a pop connoisseur, this is the only way that pop should be enjoyed. For me, this was a dream come true. They had pops there that I have wanted to try for years, and lots that I had never even heard of. They even had more than one kind of strawberry rhubarb pop! If you are looking for a reason to come to Oklahoma, this is it. But you’ll probably want to stop by and see the banjos too…

The table I was testing with had 429 rows of 16 columns. This is a total of 6864 cells. I was taking advantage of MooTools’ getElementBySelector in many places because I needed to find th and td cells within the tbody, thead, and tfoot elements separately. This created some problems when the page unloaded. On Firefox, it was taking over 7 seconds just to leave the page. This obviously was unacceptable.

I was having trouble figuring out what the exact problem was. I’m having done a lot of Javascript debugging, and have done even less performance profiling. Luckily, the Firebug plugin to Firefox was a huge help. In fact, I don’t know how I would have figured out the problem if I hadn’t had it. I turned on profiling then refreshed my page. Firebug told me that the ‘remove’ method of the MooTools Array object was taking up all of the time. I wasn’t using the remove method, so I figured there must be some sort of garbage collecting going on in MooTools. After posting to the MooTools forum, I got the answer. Apparently, whenever you use any of the MooTools that returns a DOM node, it extends those nodes with the special MooTools methods. This means that if you use $, $$, getElementsByClassName, or getElementsBySelector, every node that is returned is extended by MooTools and must be garbage collected.

In my table, I had thousands of cells that I was accessing to implement various features. Every one of those cells was being extended and had to be garbage collected. By the time my script was finished, I had over 7,000 objects to be garbage collected when the page unloaded (as seen in the Garbage.elements object under the DOM tab in Firebug).

While the getElementsBySelector method is very handy, it wasn’t going to work for me because of the extreme number of cells in my table. I ended up rewriting much of my code to use the standard getElementsByTagName method to get around the issue. This made the code quite a bit uglier, but I guess most optimizations do. The lesson today is to be careful when using methods that extend nodes in MooTools. While MooTools is really nice, there can be too much of a good thing. I’ve heard that MooTools 1.2 does memory management in a very different way, so hopefully the severity of this type of situation will be reduced in the future.

$$('.myelem').each(function(item) {
    myfunction(item);
});

This idiom is actually the way that you deal with arrays in general. Another highlight of MooTools is the Class object. This object lets you program classes in Javascript much like in other class-based languages like Java or Python. I couldn’t possibly do a better job of demonstrating classes than this tutorial on //clientside. When I originally started using MooTools, I didn’t think I was going to use the Class object much, but it has ended up being one of my favorite things.

Last but not least in the world of MooTools is the effects library. You can get a good feel for the quality of the MooTools effets simply by going to their web site. It’s hard to ignore the slick animation effects that MooTools gives you access to. The only trouble with effects is that it can be pretty easy to go overboard and start to make some really tacky web sites; however, in moderation, visual effects can really make your work stand out.

There are lots of other cool things about MooTools such as custom events and introspection of style attributes. If you use MooTools, I’d like to hear what your favorites idioms and features are.

Prototype was definitely the most popular, partially because of the script.aculo.us user interface library. Prototype is definitely extensive and fairly well-documented. On the other hand, it plays a lot of dirty tricks under the covers to do it’s work. I wouldn’t count it out just for that reason, because it is very popular and well-tested in the real world. I do find the script.aculo.us web site to have absolutely horrible navigation, which is very odd since it is claiming to be the premier user interface library.

The other problem I have with Prototype is that is is fairly large (~100k). I want to make my web application usable by people with dial-up access, so file sizes are very important. Through compression and other techniques, you can minimize the download time, but it is not something that can be ignored.

jQuery was the next candidate. jQuery seems to have a somewhat different focus than Prototype. Prototype is more of an application building framework, whereas jQuery seems to be more of a quick-and-dirty query-and-modify toolkit. I really liked the idea of jQuery and can see why it has a large following. Being able to use CSS selectors to locate elements and chain functions is very powerful. So powerful that I almost chose jQuery as the toolkit to use for my projects. What stopped me was the somewhat ugly API. The method names and arguments seemed to be somewhat inconsistent and overloaded to excess. It felt more like an accident than a design.

While deliberating over whether to choose Prototype or jQuery, I came across a forum of Ajax developers where MooTools was mentioned. I didn’t really want to research any more tools especially ones that didn’t have that big of a following. After seeing the MooTools web site though, I thought I’d give it a shot.

I really like the look of the MooTools web site. This may sound superficial, but I figure that if they have a good aesthetic for their web site, they probably care about what their code looks like too. Looking at their API confirms this. The API is very consistent and powerful. In addition, it is also modular so that you can simply include the pieces you need rather than having a monolithic library.

MooTools seems to be a happy medium between Prototype and jQuery. It has enough application building tools and extensions of native Javascript objects without getting too invasive or outrageously large. It also has the power of jQuery’s CSS selector method of locating document nodes.

If you haven’t figured it out yet, I’ve decided to use MooTools for my applications. I’ve been playing around with it for the past couple of days and am quite happy with the results. The API is very easy to work with and extremely powerful. It’s not all a love-fest though. I have had some major problems with getting the correct keys for key-based events, but I think that has more to do with the inconsistencies between browsers than anything else. Hopefully, they’ll come up with a fix for these problems soon. Until then, I’ll continue to learn more MooTools tricks and idioms and let you know how it goes.

The window that pops up calls it the Password Assistant. It allows you to select from different types of passwords such as “Memorable”, “Letters & Numbers”, “Numbers Only”, “Random”, and “FIPS-181 compliant.” This is really cool, because some accounts limit the types of characters that you can use. The Password Assistant also lets you select the length of the password. It does this all while showing you a nice little gauge of how strong the password really is. Ok, maybe I’m getting a little carried away just for a freebie password utility, but I have to say that it has made coming up with new passwords much more enjoyable.