supersonic feet

Just spotted (via Simon Willison’s blog) that Yahoo! has released an extension for Firebug, called YSlow.

The extension adds more performance data to Firebug, grading various speed issues A-F like a school exam. It seems rather cool on a brief test, though one bit did immediately stand out as potentially bad advice: YSlow suggests you should move as much Javascript as possible to the bottom of your document (to stop it slowing down your page load times).

This is good advice looking purely from the angle of increasing page load times, but goes against the web standards approach of trying to keep JS out of your body code (the whole unobtrusive Javascript thing).

It’s not a major thing to have JS include tags in the body of your document compared to actual inline JS, but it might have been nice to see a note somewhere providing the other angle to just speed.

The most useful developer tool for Firefox has just hit it’s first version 1.0 beta and has added some great new features.

Firebug gives you all kinds of javascript and CSS debugging tools that help you track down where errors are coming from. For example, you can inspect a single HTML element and see the CSS that’s being applied to it, as well as where that CSS is coming from (filename and line number). With 1.0 beta it even shows you any CSS that would have been applied, but is getting overridden by other style definitions.

If you develop websites, you need this plugin.

I spent part of my weekend doing a bit more work on my super-semi-secret Rails CMS, especially on part of the admin area that involved some nice AJAX effects that of course caused more trouble than is immediately worth it. One of the main problems is that it’s very awkward to debug AJAX code without writing in code to display errors, etc. in the interface which you might not want to do.

In trying to learn a bit more about Rails’ RJS templates for my AJAXing, I bought the O’Reilly PDF book on the subject (along with a couple of others on web services and SEO - 3 for 2 offers are sometimes hard to pass on). One of the most useful tips it contains is a link to FireBug, a JavaScript plugin for Firefox that among other things allows you to track AJAX requests. Just go to its console, options and enable XMLHTTPRequests tracking and you can see exactly what’s being sent via AJAX and what comes back.

I’ll separate my JavaScript woes into another post so you can just take this one as a recommendation to check out FireBug.