FITC Mobile 2010 Presentation: HTML5, CSS3, and other fancy buzzwords

My presentation at FITC Mobile 2010 went better than I expected! The slides are embedded below and can be downloaded here.

Note: the animations in the slideshare version don’t work.

Also, check out some really dumbed down demos I made.

jQuery Plugin: HTML5 Inline Data

HTML5 Data Attributes are sexy.

What’s sexier is an easy way to work with these data attributes using jQuery.

Sure, you could do something like:


But who wants to type the “data-“ prefix over and over again?

So, here’s a quick little plugin I whipped up. It’s probably terrible when it comes to jQuery plugin standards (I do WordPress plugins, not jQuery), but it works. It works as a getter and setter.

Bonus: If you’re using jQuery 1.4.1+, the plugin supports well-formed JSON objects as data attribute values.

* Inline Data - get and set HTML5 data attributes! Yay!
* Copyright (c) 2010 Mohammad Jangda (, Vortex Mobile (
* Licensed under the MIT license:

(function($) {
    $.fn.inlinedata = function(name, value) {
        var prefix = 'data-';
        var attr = prefix + name;
        var values = []
        this.each(function(i) {
            var attrValue;
            // Setting values
            if(value) {
                // If an array is passed, the array index should correspond to the collection index
                if($.isArray(value)) {
                    // Check, check, check the index. Because out of bounds exceptions are the devil!
                    if(typeof(value[i]) !== 'undefined')
                        attrValue = value[i];
                        attrValue = '';
                } else {
                    // Not an array, so we're just giving all the elements the same value
                    attrValue = value;
                this.setAttribute(attr, attrValue);
            } else {
                // Getting values
                attrValue = this.getAttribute(attr);
                try {
                    // try parsing as JSON
                    attrValue = jQuery.parseJSON(attrValue);
                } catch(e) { }
            attrValue = (attrValue) ? attrValue : '';
        if(values.length == 1)
            return values[0]
        return values;

Usage is simple: