found drama

Number 6 on my goal sheet for ’07 was to put myself into a position where I felt comfortable describing myself as possessing CSS mastery. I acknowledge that this is the most difficult to quantify. And even then, it isn’t really about CSS (which is easy enough on it’s own, I suppose) but how CSS fits in with DOM and JavaScript &c.

At any rate, as I pursue this particular area of expertise, making up little projects for myself as I go, I seem only to reinforce the “CSS as adjective” aspect. CSS for special effects is useless without some JavaScript mechanism to bring it in and play with it, eh? (Tell me something I don’t know?) But again, the “CSS mastery” project is just an excuse to get my way around all of the other ancillary garbage; to put all those pieces together. ¹

Now: how does jQuery fit into all this?

Well, in two ways.

My first “CSS project” of the year was to take my Flickr badge (above, just below the header) and convert it from the stock “horizontal table” version into the free-form CSS version.

Easy enough.

But I have some other ideas for it. Nothing CRAZY, nothing that’s going to violate my terms-of-service or anything like that — but just a thing or two that might liven it up a bit. Again: nothing crazy but nothing that can be accomplished strictly with CSS.

Now, I’d heard about jQuery through work. Sounded like an elegant, effective, and lightweight way to address a lot the JavaScript “problems” that I typically see. And in the other corner? The Prototype library — which I’d come across through my WordPress adventures (and seen referenced in a few other places).

Before we go any further: I sense that “jQuery vs. Prototype” is quickly becoming the “Mac vs. Windows” or the “Linux vs. everything else” of the JavaScript world. I do not wish to ignite that here. However ²:

This evening I sat down (on a lark) with the most recent copies of both the jQuery and Prototype libraries. I had a particular effect in mind; a little bit of trickery that I wanted to effect in the above-mentioned Flickr badge. I started with Prototype because (full disclosure) it’s already deployed here because K2 uses it. Now… I had an idea of how to do this particular manipulation with straight-up DOM code. But that wasn’t the point. The point was to do a little compare/contrast. And after an hour of trying to comb through the Prototype API docs (because the tutorials and “tips” that I found were … well, lacking), I gave up.

Ten minutes later, I had the effect working perfectly through jQuery. Perfectly. And 7 of the 10 minutes were spent tweaking the CSS and not the jQuery calls (which did exactly what I expected them to do).

And considering the size differences (20kb vs. 72kb), I believe the winner here may be clear. (For me at least.)

Unfortunately, this means that now I need to considering going back to the drawing board with the F_D site again…

1. I feel like this is the part where I need to insert the disclaimer about how so much of my recent work at work is less technical and it’s (not) funny how quick some of the knowledge tries to slip away from you when you’re not using it every day.[↩]
2. …and perhaps that’s a loaded transition…[↩]

About Rob Friesel