benlowery

In the coming months, all of the major browser vendors are going to implement a new API called querySelectorAll, which allows us web developers to query a document for elements matching a CSS3 selector and quickly get back a list of matching nodes. This is really fantastic news and should help to speed up one of the more common things we do in web apps.

We have basic support for the API in the latest Firefox 3.1 nightlies, IE8 beta 2, and WebKit, and Dojo has basic support in trunk for using querySelectorAll to drive dojo.query if it’s available, so I thought I’d try it out and see what happens.

Well, things … mostly … work. The selection stuff is great, but Dojo does one rather nice thing with the dojo.query interface: it returns an Array object that’s been decorated with the JS 1.7 array methods if they’re not natively available, plus some other Dojo-specific things, like connect and style and so forth, to make running operations against the result set easy. For some reason, a number of these methods were broken.

I did some digging and it turns out that the breakage is happening because the querySelectorAll return is not an Array or a subclass of an Array, but a new thing called a StaticNodeList. It looks mostly like an array and works like an array, but it doesn’t have any of the new array methods (at least on Firefox 3.1 and IE8 beta 2) and as it’s not an array, it fails an instanceof check. This means code like this:

var spans = document.querySelectorAll("span");
var divs = document.querySelectorAll("div");
var both = spans.concat(divs); // fails, no concat method

just plain doesn’t work. JS devs already have this array-ish problem with the return from document.getElementsByTagName and the arguments object available inside functions. From looking at the spec for the StaticNodeList, I cannot for the life of me see why this isn’t just a plain array with the standard array methods on it. It’s a static collection, so treating it just like an array should be fine, no?

If anyone can shed light on why the returned value from querySelectorAll is not just a plain JS array, I’d love to hear it.

I’ve been spending the last few nights reading Michael Ruhlman’s The Making of a Chef. I’ve enjoyed it immensely; I’d always wondered what it was like inside that campus after driving past it so many times in our weekend adventures northward from Tarrytown. Mandy and I never got the chance to eat at any of their restaurants while we lived downstate, but now we’re hopefully planning a trip south to sample the cuisine. Ruhlman is a pleasure to read and does a fantastic job conveying the passion and pressure of going through the Culinary’s course load. If you’re into cooking at all or want to know more about what it’s like to be inside the Culinary Institute of America (our other CIA), I heartily recommend the book.

Last night, as I was nearing the end of the book, I came across a scene that I’ve been replaying in my head all day. When you’re cooking in a professional kitchen, things move very fast and you have to come into it prepared and once there you have to be incredibly efficient to stay on top of all the orders coming in. When you get behind or overwhelmed, it’s called being “in the weeds.” While working at American Bounty, the premier restaurant at the Culinary and the last stop for the students before graduation, Ruhlman is working the grill station and another student is lost in the weeds. He’s getting behind and his station is getting messier and messier, enough so that the head chef asks him repeatedly to clean up his station. After a few such reminders, the instructor finally stops the student and tells him how he likes to get out of the weeds.

He takes a moment. He wipes down his station, getting it perfectly clean. He arranges everything he needs back into order, and this little restoration of order helps him clean up his mind as well. When you’re in the weeds, it’s as much a mental problem as it is a physical one. To perform quickly and efficiently, you have to be focused. The mess clouds your focus and that lack of clarity shows up in the final result.

This reminded me a lot of programming under a tight deadline. In the rush to get everything done and out the door, you tend to get messy. You don’t write tests, you don’t verify that code changes work in all the browsers, you check code in without actually compiling it first, and eventually the whole thing disintegrates. In your effort to go faster, you get sloppy and you end up slowing down.

So, a reminder to myself. When things get hairy, take a moment and clean everything up. You’ll probably get done sooner as a result.

If you’re seeing this in a feed reader, come on by the site and check out the new look. I went for a simple, easy to maintain look with minimal graphics for a fairly speedy page load. I also pulled out a few things that were slowing down the site: a plugin that was inadvertently pulling in the YUI library, some supposedly fancy Amazon script that showed previews of products when you hovered over their links, and biggest of all, Google’s Adsense. I’m still pulling in Google Analytics, but it’s the last thing on the page and shouldn’t affect load times too much. I wanted something simple and clean and easy to read, and I think I’ve got that.

I also spent a fair bit of time trying to get the typography right. Fancy, no?. I really enjoy The Elements of Typographic Style Applied to the Web and I wanted to try my hand at working within their framework. For example, the asides follow the sidenotes section. Getting the vertical rhythm right was more challenging than I expected, especially with photos and other non-text elements that are inherently pixel-sized. I was trying to get everything working on a em-based grid at first, but eventually caved in and ended up with a 50 by 50 pixel grid on which to base the layout. There’s always more things to learn…

This was my first Wordpress theme from scratch and I was pleasantly surprised by how easy it was to develop. I’m tracking Wordpress’ SVN and the theme using Git. That too has been a fun learning experience; I’m getting much more comfortable with git, git-svn, and git-submodule as a result. If anyone is interested, I can write up a bit on how the whole development process fits together. In the meantime, here’s the code for the theme and my Wordpress mirror with that theme as a submodule.

Git really scratches an itch I’ve had for a while with SCM systems. I started out with zip files, then Visual Source Safe, then CVS and Perforce, then Subversion. I liked Perforce quite a bit, especially the branch and merge support, and Subversion works just fine, but the branching and merging support in Git is just phenomenal. I’ve built up a little library of reading material on Git if you’re interesting in learning more; I’d start with Git from the bottom up by John Wiegley.

Going forward, I’d like to extend the blog a bit and add some features using Dojo. It only seems appropriate. Maybe Ajaxy inline-comment loading? Real-time search? Fancy graphs? We’ll see.

As always, feedback is welcome and the comments are open.

Firefox 3

Point your browsers over to getfirefox.com and download the best version of the best cross-platform browser yet. I’ve been using the alphas and betas and release candidates for a while and I think this will be a great release. Between the performance and typographic rendering improvements, I just can’t stand using Firefox2 any more.

If you’re trying to install the lovely Firebug browser debugger, you’re probably finding that getfirebug.com is down. The team is moving to new hosting, but in the interim, there’s a supported build available at the official add-on site for Firefox.