Tools of the trade

Web design is a somewhat idiosyncratic task, one that tends to involve quite a bit of iteration, tweaking, and for that matter swearing - at least if you're really trying for good design, accessibility and cross-browser support. However, having the right tools can make it all a lot easier.

The browser of choice for any serious developer has to be Firefox (or Mozilla). Even if you don't think it's the one that provides the best user experience (and I do), it's by far the best for developers.

But why?

Firstly, because it's the most reliable, stable, and standards compliant browser out there. All browsers are edging towards compliance (some faster than others) and so Firefox is the best indication of how *all* browsers will behave in the near future. Plus the fact that it's easier to "do things right" and then tweak them for less capable browsers, than to do things wrong one way and then adapt that into doing things wrong the way the other browsers assume. And a rocketing market share (10-20% in Europe) doesn't hurt either.

Then there's the built-in tools - the DOM inspector and the Javascript console. The DOM inspector is invaluable for analysing the structure of your document, but it's also extremely powerful for working out how your CSS is behaving - viewing the CSS properties of each node will let you know which rules are being applied and why, and point you to the CSS file or inline style rule that's causing this. With inheritance (and specificity in particular) often being a tricky issue, this can really save on the hair-tearing.

The Javascript console is a lot simpler, but still vital for tracking down bugs - although IE, of course, can choke on code that Firefox happily parses. Whichever browser you use to develop, you'll always need to cross-test.

In addition to the internal tools, there are a number of external ones you'll need. The first of these are the W3C HTML and CSS validators. After all, there's no point trying to debug your page in multiple browsers if it doesn't validate - you'll never get defined behaviour if you're missing markup!

These validators are easy enough to use, but there are firefox extensions that make it even easier - and provide a wealth of other tools too. First among these - and something I just wouldn't develop without - is Chris Pederick's Web Developer Extension. This lets you do pretty much anything to your page - poke it, prod it, turn off CSS and Javascript, strip images, analyse the structure... there's a few dozen features in there, all of which can (and will) come in useful - see the documentation on Chris' site for details.

A great partner to Chris' extension is the Colorzilla colour picker - which does much more that the name suggests. Not only will it give you the RGB/hex values of anything you point it at (even images), but it can also measure distances in your page and provide a visual indication of element structure and nesting as your mouse travels over the page - without shifting the page layout by adding CSS borders. Interestingly enough it also lets you see the classes (etc) of all elements of the Firefox interface.

Firefox has dozens of extensions - these are just my favourites for development - and it's well worth taking the time to look through these.

Besides the browser, of course, you'll need a text editor - preferably one with versatile syntax highlighting. This is down to personal choice to a far greater extent than your primary development browser, and can lead to some heated debate! My advice is always to try a few, and choose the one that suits you best. For me, that's vim - powerful, available on almost any platform you can think of (and often already installed on most *nix systems), and scriptable. Unfortunately it's not the simplest to use when you first start, but its help includes a good quick-start tutorial which can give you the basic concepts in just a few minutes.

And then you'll also need some sort of graphics editing tool. As with text editors, there are more choices here than I can really cover - but I'd advise you to take a look at the Gimp for a powerful, free, multiplatform option. Again, not the easiest tool out there, but if you know The Rule Of The Gimp ("right-click the image to do anything with it") you'll find it a lot easier.

Posted by parsingphase, 2005-04-05 13:36

Anonymous user




I'm currently available for contract work in London as a Senior PHP Developer. Contact me for a CV, rates, or a chat.

Twitter @parsingphase
Github parsingphase
LinkedIn Richard George
Flickr parsingphase