After my last post, we have a nice, clean starting point for our website. Which is great, but in order to take it to the next level, we should probably get a nice development environment up and running.

First, we’ll start with the client side. At my employer, we develop entirely on Windows. In my spare time, I have a Gentoo (soon to be Ubuntu) Linux box at home. Because of these factors, my tools of choice tend to be cross platform. As far as browsers go, I develop strictly in Firefox due to its ease of debugging with tons of useful plug-ins (Firebug, Web Developer Toolbar, DOM Inspector) and cross-platform availability. I of course have IE at work; where I’ve switched totally to IE 7, and I run the free IE 6 <acronym title=”Virtual Machine VM</acronym> provided by Microsoft for testing in IE 6. I also have access to a Mac running Safari, a variety of Windows Mobile smart phones, and a few versions of Opera, including the Wii Beta version. Do I cover all of my bases? Probably not, but I’m at least over 95% of the user base.

What I really want to talk about are the Firefox plug-ins I mentioned earlier; if these tools are used correctly, a properly coded site that works in Firefox works just about everywhere else as well. To start off, make sure that when you first install Firefox, the DOM Inspector is installed. To do this, on the “Setup Type” screen, choose Custom, and on the “Choose Optional Components” screen, make sure the “DOM Inspector” check box is checked:


Choose Optional Components…


Install DOM Inspector…

Ok, now we’re ready for plugins! My current must haves are as follows:

  • Web Developer Toolbar – Tons of useful little tools that no web developer should be without. Just install it and play with it. Trust me.
  • Firebug – Amazing debugging and profiling tools, plus the Inspect button which lets you see which CSS rules apply to any element in your doc, and a fancy colored overlay showing element, margin and padding.
  • MeasureIt – Great tool for pixel-perfect measuring!
  • ColorZilla – Quickly grab colors without viewing page source.
  • HTML Validator – W3C Validation on the fly, and in your view-source window.
  • View Source Chart – Great for dealing with tag-soup or server generated code that’s not nicely tabbed or spaced.
  • Operator – A must have for developing with (and using) Microformats.
  • Tails – Another must have for developing with (and using) Microformats.

If you’re still stuck in IE land, there’s still hope, Microsoft has released a half-decent copycat Web Developer Toolbar, and there’s hope for their (Java)Script debugger. If you have a Genuine Advantage copy of Windows it won’t hurt to try them out.

That’s it! Get those installed, play with them, and tune in next time for part 2, where we setup Eclipse and Apache as a test web server on Windows.