New jQuery Plugin: Unique Element IDs

tl;dr I released a jQuery plugin for unique element ID generation. Get it at GitHub.

As anyone following me on Twitter will notice, I've been working with a lot of JavaScript recently and honestly, it's been a refreshing break, even if it has been straining at times.

Writing application UI code has its own set of unique challenges. The most important of these involves making sure the interface is usable and smooth. In JavaScript, this involves extensive use of element animation, and ensuring the effect doesn't hinder the user's experience, but enhance it.

I was writing a set of timers to execute at various intervals on a load of HTML elements. An obvious use of setTimeout() brought me to a semi-working implementation, but I started having issues when I needed the timeouts to cancel when certain events happened.

My solution was to put each timer into an array and pull out the correct timer reference when I needed it. However, to do this, I needed each element to have a unique ID. Since HTML IDs are unique, I could use in-page IDs, but I figured, "I can do this lazily and generate a new ID should I need one".

So, I came up with this little jQuery plugin that generates a unique ID for an element if and when you need it. Usage is like this:

$('.some_element_without_an_id').uid();

And it's that simple!

Get the code over at GitHub.

JavaScript Iterators

Whenever I’m using any other programming language I really miss PHP’s foreach loop. It seems like a brilliantly elegant solution to the problem of looping through an array of elements and pulling out the key and value.

One of the things I’ve always hated in JavaScript is exactly that; looping through an array of elements and doing something.

Let’s say we have this array of data:

var codeigniters = [
    'Jamie Rumbelow', 'Jeremy Gimbel', 'Phil Sturgeon', 'Elliot Haughin'
];

I used to use the native JavaScript for in loop, which looks like this:

for (var index in codeigniters) {
    $("#codeigniter_masters").append(
        "<li>" + codeigniters[index] + "</li>"
    );
}

This works fine, but it’s horribly verbose. I also despise the fact that it assigns the iterating variable to the index of the current array element. It’s stupid. I will generally never want just the index. Give me the element itself, for goodness sake.

I’m embarrassed, but I’ve only just discovered there’s a much better way of doing this. Arguably, JavaScript’s most powerful feature is the anonymous function, and it comes to our rescue here in the form of jQuery.each();

$.each(codeigniters, function(index, codeigniter){
    $("#codeigniter_masters").append("<li>" + codeigniter + "</li>");
});

That is much, much nicer. It is cleaner, easier to read and makes more sense. And after all, the first of Rumbelow’s rules of good code is every line should make sense.