As a developer, I (unsurprisingly) spend a lot of my time in the browser. Up until last year, I did the bulk of my development work in Mozilla Firefox, thanks to the invaluable debugging tools Firebug provided. These days I use Google Chrome Canary because I find their Web Developer Tools much more comprehensive and better suited to my development style (although Mozilla are working on some interesting developer tools for Firefox).

I’ve always considered myself a better developer than a designer, but I’m learning more about design (not just the visual aspects) all the time. For the remainder of this post, when I say design, I’m referring to visual design. The current crop of browser-based development tools allow me to inspect and modify my page’s CSS; some go further and overlay page with boxes that highlight the space that elements take up, as well as their margins, padding, etc. These tools help me to quickly assess the visual balance of the page, and allow me to make quick adjustments in order to improve that balance. As an aid to design, that’s about as much as we can get out of our browser-based tools. But I’m greedy. I want more…

Earlier today, I read Stop paying your jQuery tax, an excellent article by Sam Saffron which explains why it’s a great idea to move all of your external JavaScripts to the bottom of the HTML document (just before the closing body tag). Near the end of the article, he proposes a method which allows you to continue to use jQuery’s DOM ready method anywhere in your document, even though you’ve moved jQuery itself to the bottom. His method is essentially this:

1. In the head, include a script that:
   • Defines an array
   • Creates a fake $ function that pushes its argument to the array
2. In the body, just after you include jQuery, include a script that:
   • Uses jQuery to loop over the array’s contents
   • …and calls the real $ function, passing in the argument.

I decided to have a play around with the code examples Sam gave and I realised that it only caters for one of jQuery’s possible ways of binding to DOM ready:

1

$(handler) // Where `handler` is the function to bind

There are a few developers out there such as Christian Heilmann and Paul Irish who are constantly making outstanding contributions to our community. What I love about these guys is that they make you feel like you too are capable of hacking together great things, and that someone else out there is grateful you didn’t keep your little creations to yourself. They’re helping evolve the web by developing tools and libraries that make our work a lot easier, creating richer experiences and showing us how we can harness web standards to bring these experiences to as many people as possible. Yesterday, a website launched to let us know that we’re invited to the party too…

Move the Web Forward is a new resource designed to help the rest of us give back to the web platform, and its surrounding ecosystem. It gathers together many excellent resources, describing how to contribute to the HTML/CSS specs, how to use and help refine the latest browser developments, and explains why you should be sharing your discoveries with everyone else.