Nothing Insightful

I woke up on Saturday morning to find about 2,000 new visitors to my blog and 22 email notifications of new Twitter and Tumblr followers. It turns out Aristo made it to the front page of Hacker News for the second time in it’s short lifespan, and in turn was tweeted about by some popular Twitter users.

HN users had some great suggestions in the comments section, and most of those have been implemented and are now live on the GitHub repo and demo page. The list of changes include:

• Styled basic input and textarea fields.
• Button hover effects now fade with CSS3 transitions (Webkit, Firefox & Chrome).
• Put user-select:none; on buttons to give them a more native feel.
• Prevented empty button links from sending you to the top of a page (confusing when in a modal).
• Fixed auto-complete versus slider z-index bug by hard coding z-index. This may cause other problems, so be on the lookout.
• Fixed background bleed through bug for the progress bar.

I hope this keeps you satisfied for a while :)

Audi has officially released details on an A3 concept sedan following it’s earlier picture leak. Powered by a whopping 300kW, 5 cylinder engine and nearing A4 length, it poses some serious questions about model cannibalisation. If this goes into production, what will happen to both the A4 and the RS3? The silly sequence of A4 (add a few inches) A6 (add a few inches) A8 seems to become more ridiculous with the addition of an A3 sedan.

Regardless of Audi’s confused direction, I’m still very interested.

(Via AusMotive)

Alternative Title: The jQuery $.data() Function is Awesome

The Workflow creation tool I’ve been working on and blogging about (design & code pattern) would have been impossible without forcing myself to learn object oriented (OO) JavaScript. It was a pretty steep learning curve for a designer, and I soon came across the common pitfalls of writing OO code. The factory pattern structure I linked to above took care of most of the problems like: pushing pseudo-class objects to an array, easy find methods without the use of hash tables, and deleting objects non-destructively.

One thing that took me a while to wrap my head around: How do you form a relationship between the “back end” object instances and the HTML/DOM objects you output from these?

Say you have the classic Person object example:

var collection = [];

var Person = function(params) {
    this.name = null;
    this.age = null;
    $.extend(this, params);
    collection.push(this);
}

When I came across the problem of being able to link back to the object itself, the first (and laziest) solution that jumped to mind was searching using an instance’s unique ID. Creating the objects initially gives you the chance to ensure the HTML and back end instance shared the same ID. At a later point when you need to find the instance, you can loop through your objects with class manager shorthand findBy() function:

Manager.prototype.findBy = function(p, v) {
    for(var i = 0, len = this.objs.length; i < len; i++) { 
        if(this.objs[i][p] === v) {
            return this.objs[i];
        }
    }
};

MyManager.findBy(“id”, 999);

This made a lot of sense initially:

• HTML attributes can only be strings.
• Make the HTML element and the back end object share an ID
• Loop through and match the object when required

An Example

JSFiddle Example

In this example, we have to get the ID from the HTML element, convert it to an integer and then finally: loop through all the instances until it finds a match.

    // get the ID value
    var theID = parseInt($(this).attr(“objectID”), 10);

    // silly loop to find the object
    $(collection).each(function(i, item) {
        if (item.id === theID) {
            item.birthday();
        }
    });

But why bother looping? Maybe a hash table would be better suited to your scenario, but for me I wanted something more dynamic.

The Better Way

JSFiddle Example

The jQuery $.data() method is awesome. On face value it’s like the native $.attr() method but doesn’t restrict you to a string value. What this incredibly long-winded post boils down to is the realisation that you can bind your HTML elements directly to their back end objects via the use of the data attribute. No (visible) loops.

// set the data attribute originally
$(obj).data(“personObject”, self); 

// call birthday on the object directly
var theObject = $(this).data(“personObject”);
theObject.birthday();

You don’t even have to declare a reference to the object, you could just as easily chain up your calls. A word of warning though: this can get a bit confusing if you’re using a chaining library like jQuery, especially if your object prototype functions share names like “remove()”. ■