Webdirections unplugged 2011 summary

I spent the last 2 weekdays of this week at the Webdirections Unplugged 2011 conference in Seattle. My visit was sponsored by 2 sources: a free raffle ticket paid for by the Bay Area Mobile Meetup group and the trip expenses paid for by my company.
A brief overview of the conference and the sessions:

The conference was pretty small, about 200-250 people in all I’d say. The conference wifi was great as a result. So was the food and the after-party on Thursday.

The sponsor booths were not that great as compared to other places I’ve been to, but the Blackberry people were giving away lot of free stuff. However, its hard to get someone excited about Blackberry gear huh? I even won a free blackberry phone! 🙂

However, I was there to get some learning value out of the whole thing, so here’s a rundown of the sessions I attended:

Thursday morning:

1. Keynote address by Chris Wilson from Google called “The interconnectedness of all things”

2. Testing and debugging apps – by Ross Boucher – really useful talk with information on debugging. He highly recommended Web Inspector for debugging, so I’ll be using it a lot more
over the next few days to help debug code. He also mentioned that the other major takeaway from his talk was Charles proxy, which I have not heard of, so I’ll be spending some time with that as well. Great talk overall.
Slides here.

3. Nicholas Zakas – Web speed bumps – Slides here.
This talk had some really good suggestions on how to improve performance such as embedding images in CSS files using Data URIs, etc.

4. HTML5 for game building – by Robby Ingebretsen and Kevin Moore – They explained their development journey in building their very very cool HTML5 game called Agent 8 ball. I spent quite a bit of time the rest of the day playing their game.

5. Mobile Prototyping essentials – by Rachel Hinman – I sat through the talk but I found that it was not very relevant for what I work with.

Friday Morning:

1. Friday started off with a roundtable discussion where people could choose the topics they wanted to discuss.
I chatted with a fun group for an hour about HTML5 game building.

2. CSS3 animations and transitions – Stephanie Rewis – I liked this talk, also great material on her website in the resources section.

3. Offline web apps with HTML5 – Dave Orchard – mainly to do with offline storage, very insightful talk, but it was quite technical so I’m looking forward to the slides so that I can through them again to refresh my memory.

4. HTML5 Graphics, Canvas deep dive – Dave Balmer – Slides here. I liked this talk. I also had the pleasure of chatting with the speaker and lending him my macbook charger while we were outside waiting in the lobby. Turns out that apart from liking JavaScript, we both also like the Thai place called Sweet Basil in Foster City, CA :).
I later found out he’s done a lot more with JavaScript than I have. Respect. I now follow him on Twitter.

That was it, after this talk, there was a closing talk, where they announced winners for the Blackberry tablet and phones. They handed out 10 phones, of which I got one :).

I flew out the next day back to the Bay Area, after being subjected to a random security check at the Seattle airport. Wonderful. And it rained in San Francisco when I landed. Such is life :).


Common array operations in JavaScript

Programmers, no matter what language they work with always need to work with Arrays. I primarily work with JavaScript and its Dojo library. So here’s a few useful methods to do the common array operations using Dojo/JavaScript:

1. Add an element to the array.

var arr = ["gold", "silver"];
//prints ["gold", "silver", "platinum"]

2. Remove an element from the array.

//pops "platinum"

Adding and removing elements given an element’s index is best done using JavaScript’s splice() method. Look at the next 2 operations below, adding and removing an element.

3. Add an element from the array given its index.

var arr = ["gold", "silver"];
var removed = arr.splice(1, 0, "platinum");
//prints ["gold", "platinum", "silver"] because item "platinum" has been added at index 1.

4. Remove an element from the array given its index.

var arr = ["gold", "silver", "platinium"];

//remove item at index 1 (second argument is 1, which means remove)
var removed = arr.splice(1, 1); 
//prints ["gold", "platinum"] because item "silver" at index 1 has been removed.

Dojo provides some very cool array helper methods as well.

5. Perform an operation on every element of the array.

var arrSalary = [200, 300, 1500, 5, 4500];

// for every element in the array, increment by 10 %.

arrSalary = dojo.map(arrSalary, function(item) {
            return item + (item / 100) * 10;


//prints [220, 330, 1650, 5.5, 4950] 

6. Filter the contents of an array based on a certain condition

var arrSalary = [200, 300, 1500, 5, 4500];

//filter array elements greater than 300. 
arrSalary = dojo.filter(arrSalary, function(item) {
    return item >=300;


//prints [300, 1500, 4500] 

7. To iterate over an array, dojo provides a easy to use method called dojo.forEach.

dojo.forEach(arr, function(item, i) {
  //do something with each item.

8. Remove duplicates from an array.

var arr = [1,2,3,4,1,6,7,2,7,4];
var newarr = [];
dojo.forEach(arr, function(item, i) {
 if(dojo.indexOf(newarr, item)  == -1) {


These are functions I use on a very regular basis, so I thought I’d write them down and share.

Playing with Dates in Dojo

To convert a ISOString into a Date object, use dojo.date.stamp.fromISOString. For example:

var dateObj = dojo.date.stamp.fromISOString("2011-04-26T19:30:40+0000"))

To convert a Date object into a localized date format which you would like, 3 parameters I regularly tend to use are “selector” and “formatLength” and “datePattern”:

dojo.date.locale.format( dateObj, {selector:'date', formatLength:'full'} )
//returns  "Tuesday, April 26, 2011"

You can also specify different datePatterns like datePattern: “yyyyMMdd”, etc. More details here.

A useful link for confirming to regular cultural conventions here.