find me over at alanhietala.tumblr.com

It can be argued that hiding these complexities is a good thing, javascript gives you more than enough rope to hang yourself and shortening that rope will increase developer productivity, reduce errors and lead to an overall better development experience. Unfortunately it seems there is such a reliance on frameworks these days that many of the basics of javascript never actually are understood by many developers.

One of these basics is closures within a loop. This often comes up in event binding when you iterate over a list of items and attach an event to each item.

// vanilla javascript way
var dataItems = ['a','b']
var i = dataItems.length;
while(i) // using descending while loop for efficiency
{
   var ele = createElement('div');
   ele.onclick  = function(dataItem){
           return function(event)
           {
               // do something with dataItem
               alert(dataItem);
           }
   }(dataItems[i-1]);
    i--;
}

This is a standard way of creating a scope containing the variable you want to have available in the event handler that isn’t tied to the loop iteration variable. If we didn’t wrap the function to bind to the click event in another closure every alert would come up as ‘b’.

jQuery for a long period of time required you to do something similar when using their own event binding model.

// jquery < 1.4.3 way
var dataItems = ['a','b']
var i = dataItems.length;
while(i) // using descending while loop for efficiency
{
   var ele = $(createElement('div'));
   ele.bind(function(dataItem){
           return function(event)
           {
               // do something with dataItem
               alert(dataItem);
           }
       }(dataItems[i-1])
   );
    i--;
}

In the above example you still have to understand closures in order to make your code work. Developers still learn the lesson of why their closure is pointing to the last element in the array and still get that “a ha” moment.

In jQuery 1.4.3 they added the ability to pass data arguments in the bind function alleviating the need to create an additional closure to pass the correct arguments. This is a great feature in a framework it cleans up code significantly.

// jquery >= 1.4.3 way 
var dataItems = ['a','b']
var i = dataItems.length;
while(i) // using descending while loop for efficiency
{
   var ele = $(createElement('div'));
   var dataItem = dataItems[i-1];
   ele.bind({'dataItem':dataItem},function(event){
               // do something with dataItem
               alert(event.data.dataItem);
           } 
   );
    i--;
}

The downside is this method completely hides a fundamental language feature from the user. This has the potential to lead to a group of new developers that really don’t understand javascript, only jQuery. This is a bit worrying since jQuery, while being a good framework, isn’t going to be the best tool for the job everywhere.

The recent ecobee android application is good example. It is written as a html5 application and I quickly realized the performance impact of jQuery on a mobile device is enough to degrade the experience significantly on underpowered devices (the sort of android device that you get for free with a 2 year contract).

Javascript isn’t going anywhere and is becoming more important in the land of cross platform mobile applications. This doesn’t mean that developers shouldn’t understand how the language they are using works under the fancy framework they’ve chosen. Maybe it doesn’t matter in 99% of cases and I’m just being pedantic but understanding closures seems like a fundamental concept in javascript and it is worrying that so many don’t understand why their event assigning loop is “broken”.

Things I like

The system is much snappier. The first thing I noticed when scrolling the home screen was how it was finally smooth. I didn’t feel like the glass was resisting what I was trying to do and as a result found that i was using a lot less pressure than before on the screen.

This is important since our natural reaction to something “resisting” your movement is to apply more force. This might be an interesting metric to be able to analyse how much a user thinks the UI is fighting their actions.

The second thing I like are the UI changes adding dedicated phone and browser buttons that appear on every pane. The browser button is especially appreciated as I jump into the browser all the time.

Javascript performance is greatly increased. This is fantastic news as I am on the HTML5 mobile web app bandwagon and this represents a big step forward. This is one of the best changes from a platform perspective as it empowers developers to take their HTML5 apps to the next level.

Folders are another great addition to help keep everything organized. I dropped all my games into one folder, my food apps into another and my system admin apps in a third. This cut down on the number of icons on the home screens and freed up room for more widgets.

Widgets are one of the features that set android apart from iOS4 so anything that frees up home screen space is a good thing.

Things I Don’t Like

Froyo isn’t without its warts though. The general UX inconsistencies are still there and unsurprisingly made their way into the new folder feature.

The expected behaviour of all android phones is that hitting the home button on your phone brings you to the center pane of the phone with your app closed.

For some inexplicable reason Froyo threw this convention out the window when they were designing folders. When you hit the home button nothing happens. No tactile feedback, no going to the home screen. The phone just sits there until you decide to hit the back button. Why on earth they decided to disable the home button functionality in folders is beyond me and could have been found by a database guy who knows nothing about UX design.

This is my biggest gripe about android. The UX is still horribly inconsistent and until they get it together they will be a distant third compared to iOS4 and webOS. Lets hope that Matias Duarte (recently hired away from palm) can beat some sense into the UX team over there because it’s still pure amateur hour.

In Closing

Despite the problems with android’s UX I think the Froyo 2.2 update brings many great things to the table. This release was more about getting a rock solid system out in terms of speed and smoothness. In that capacity it achieves top marks.

I can only hope the next pass at android fixes the horrible UX inconsistencies that still exist in the system. Android’s next giant leap forward lies solely in the hands of Matias.

I decided to create a handy admin interface that lets Infinity Pool be updated without the need for a programming / SQL background. This takes a lot of the pressure off of me as there are a group of people that are able to do updates now. This is very similar to the approach I took when I was the head of Horde to the Core. Delegate and train those around you to take on tasks when they ask for more responsibility so you don’t end up burning out.

A big thank you to CserZ and Atis52 for doing a lot of the leg work and doing a lot of testing and suggesting some fantastic features to help save them time.

What does Directions with Google Maps do? It is an extremely simple plugin that takes any text you highlight and passes it to google maps to do a search. The search results open in a new tab.

If you find your self highlighting a business address, copying it, opening a new tab, going to maps.google.com and then pasting the address in as a search then this plugin is for you.

It streamlines this process to one click, a major time saver.

As happens with many table top games the rules are about to undergo a huge overhaul. This means much of the codebase will need to change. This will be an interesting challenge as I will need to maintain all of the current users data while adding in all of the new features that are coming due to the new armies and rules.

This should be pretty fun and some good experience. All I can say is I’m grateful I built out a full suite of tests for my code as having them will be essential to ensuring that things don’t break while the site is under heavy reconstruction.

What does City news do? Force you watch 30 seconds of a Dove commercial first. This is just disgusting as a 30 second ad will drive away many people that came to watch the video in order to try and help.

Stay Classy CityNews.