Thursday, July 21, 2011

Keep Moving Your Hands

There were several reasons I didn't want to post anything yet.

The theme wasn't right.

I want code samples syntax highlighted.

There's no proper "About" page.

Never mind that I originally registered this blog because I wanted to write, I have to have everything perfect for me to publish something.

Waaaaah.

I did anyway.

Hopefully I'll get things sorted out and squared away, but right now I want to write and share, and that's just what I'll do. Excuses be damned.

The Right Tools

Throughout my most recently ended project, I wrote a lot of jQuery. A lot of jQuery. In doing this I found myself frequently testing for the presence of an element in the DOM. In the beginning this looked like:

if( jQuery('#foo') ) { ... }

Which I soon found to be problematic. Which is to say entirely flawed. Which is to say it always returned true. This is now embarrassingly obvious to me, knowing that jQuery will always return a jQuery object (a truthey value), regardless of whether any elements exist for a given CSS selector.

Next, I tried the following:

if( jQuery('#foo').length ) { ... }

This would generally work, but I was still having issues with it in a few cases, so I finally resorted to this lovely looking piece of code:

if( jQuery('#foo').length > 0 ) { ... }

Now that's all well and good (and more importantly: it always works), but it bothers me on several levels.

For one, the "> 0" steals attention away from something that should be more implicitly clear and gives it instead to something that is almost completely semantically extraneous. It's not even difficult to read or to divine the meaning, it just seems like it's trying too hard.

On another level, it's wasteful, though negligibly so. Either way, definitively not DRY.

And, finally, it's no fun. Every time I wrote it, it felt like a hack. It wasn't really, but I felt that there should be a better way to do it. I finally realized that there wasn't really a better way to perform this simple task, but it could be dropped into its very own function.

So for my next project, I decided to define my own jQuery functions to perform this check, which, by the way, is trivial in the superlative:

jQuery.fn.exist = jQuery.fn.exists = function () {
   return !!jQuery(this).length;
}

This allows me to perform the same check in a much more sensible manner:

if( jQuery('#foo').exists() && jQuery('.bars').exist() ) { ... }
// plurality holds no syntactical purpose

This conditional, I think, reads much nicer and is more enjoyable to write.



Now, the above has been a marginally informative tutorial on adding a function to jQuery, as well as an insight into an arguably obsessive/compulsive mind, but if you boil it all down the gist is this:

Choose the right tool, however small the task, and choose the right tool consistently.

In programming, we work in relatively malleable mediums. I'm not about to go out and write my own language or even a JavaScript interpreter for that matter, but it will only take me ten seconds to extend jQuery to include a function that increases the legibility of my code and makes me enjoy writing it just a little bit more.

It turns work into craft, and logic elegant. It's conscientious. It adds polish.



It seems absurd to be so thrilled with a function that's merely a one line return (of an elicited boolean, no less) but, truly, I am thrilled.

And if you can't be thrilled in the minutiae or your daily work, then why even bother?

blog.init()

Hey there, World.