My Development Environment

Web Development Tools and Techniques

Like most development tasks, programming for the web is much more fun and productive when you’ve got yourself set up with the right tools. All you really need is a text editor and a web browser, but I use a couple of free tools that really make things easier.

The Editor

To write code you need a text editor. You might be used to using Microsoft Word to write up documents, but you’ll want to put that away when it comes time to build a website. As we saw in our previous post on HTTP, the elements of a website come down the wire as plain text. The beauty of Word is how it takes the plain text that you input and tranforms it in to complex and visually appealing documents. We are doing something similar here, but we want the web browser to do that transformation. As such we want the text we save in our HTML, CSS and Javascript files to be clean and as we wrote it when it gets sent to the browser. Word and other advanced text editors add lots of crazy stuff on top of your text to make the document display they way you want it, this is not what we want.

To keep our text clean we’ll take a step back and opt for a simpler text editor that is more focused on programming than creating reports.  On the Mac I use a free editor called TextWrangler, under Windows I recommend another free editor called Notepad++.  I like both of these editors because they are simple but offer some nice features like Syntax Highlighting.

The Browser

In most cases our goal is to make our web sites look and act the same in all web browsers, or at least in a certain set.  But the one I use more than any other when i’m building a site is Mozilla Firefox.  While i believe Firefox is superior to other browsers in a number of areas, I’ll focus today on why it’s the best development platform which really boils down to one thing: extensions.

Firefox extensions allow independent developers to extend the functionality of the browser. There are thousands of extensions that do many different things and i’ll mention a couple that are very useful for web developers.

Firefox Developer Toolbar

The developer toolbar gives you access to more information about the site you are currently viewing than you ever knew existed. Tools in the toolbar will let you measure DOM objects, manipulate images, enable and disable CSS and Javascript, and many other things. Install it and then play around with it, it will teach you a great deal about how websites work.

Firebug

This one is truly the holy grail. I simply do not remember how web devs functioned in the days before firebug. Firebug provides a multitude of tools to inspect and manipulate the DOM.  Additionally it allows you to log Javscript outputs and interact with the browsers javascript engine directly from a command line.  This is a very, very powerful tool.

There you have it, those are the barebones tools that I absolutely could not live without. Do you have any that aren’t on this list?

MT @ June 23, 2008