Web Development Pack

When I move to a new computer, I keep installing the same tools again and again. I always have problems finding them because they are spread out all over the net. This article is an attempt to gather the links to the important web development tools in one place.

Browsers you need

For modern web development today it’s important to test in more than one browser. The current best practice is to first test in one that has good support for standards and then move on to the older ones and fix your site for them.

  • Mozilla Firefox is a great browser and a serious challenger to Internet Explorer. The best web development feature of Firefox is all its extensions that are available. I have made a special section about good extensions to use below.
  • Opera is another good browser with a little fewer users. The Opera team has put great effort to make any standards compliant site work in Opera so there’s no reason why your site shouldn’t work. There’s a few quirks though and it can therefore be worthwhile to test in it.
  • Safari is a good Mac browser everyone should know about. One of its great merits is that it was one of the first browsers to complete the Acid2 test. If you are a Mac user this one is a must have.
  • Internet Explorer (IE) is the browser that is used by most people over the world (because it ships with Windows, not because it’s the best one). Whether you like it or not you do need to test with it so make sure you have a computer available with it installed. I have linked to Windows Update above, just click the link above and select all updates that have to do with Internet Explorer.

I am not going to give you links to older and newer versions of IE. The older versions are used by far too few people and Microsoft has officially dropped support for them. IE7 on the other hand still has too many bugs and is hard to keep alongside with IE6. I will wait a while before starting to test with IE7.

Firefox extensions

Firefox extension system has made it possible for thousands of developers to make little snippets of code that add useful features to Firefox. There are a lot of extensions out there and so I’m sure I’m missing many but here’s the list that I just can’t live without (related to web development):

  • Web development toolbar is an extension for Firefox that enables all kinds of useful features. It can give you borders around all your elements, it allows you to edit CSS in a sidebar and see the changes instantly, it allows you to remove images just to name a few. I can’t work at all without this one.
  • IEView and OperaView are two simple extensions that let you open the current page in Internet Explorer or Opera with a simple right-click. Saves you for copying the address manually.
  • SearchStatus is another simple extension that I find useful for search engine work. It adds PageRank and Alexa traffic meter to the toolbar and has a useful features such as showing which pages are indexed, amount of links to a certain page and so on. Having the PageRank enabled (not only in this tool) means you are sending all URLs you visit to Google, so an important feature in an extension like this is a way to easily turn it on and off. SearchStatus does this well.

Commercial programs might need

I would like to recommend one code editor, one graphics editor and one FTP program that where free to you but I can’t. I have simply not found any tool as good as those below. If you know of a free tool that matches any of the above categories, let me know by using the comments, I’d gladly add them to the list.

  • Dreamweaver is a code editor with many features for web developers. I want to be able to work in both UTF-8 and Latin-1 encoded documents. I want to have color coding of HTML, CSS and PHP and I want the HTML highlighting to color different kinds of tags in different colors. I want code completion. Dreamweaver has understood the importance of those features and implements them well. Watch out for Design View, there is no WYSIWYG editor that produces good CSS and Dreamweaver is no exception.
  • Fireworks is a graphics editor that lets me work with both vector and bitmap files. It allows filters that can be easily removed and tweaked without breaking the original. It also has a nice slice feature that let’s me export parts of my mock-ups quickly.
  • FlashFXP is the FTP program I keep coming back to. I fire it up and it just works every time. It’s a fairly big program but you don’t need to know all of it to get it going. If you do want to play with advanced stuff it’s there. Easy to use, fast, many features.

That’s it. All that is left is for you to either agree or disagree.

April 24th, 2006 by Emil Stenström
Posted in CSS, HTML

Friendly Bit is a blog by Emil Stenström, an interface developer and Web 2.0 promoter that blogs about the modern web and how to make best use of it.