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, as a resource for beginners.

(Update 2009-02-16: This is an update to an old article, I can’t have old stuff polluting the site)

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.
  • IE Tester helps to test your site in Internet Explorer. It is the browser that is used by most people over the world (because it ships with Windows, not because it’s the best one). The good thing with IE Tester is that it lets you run multiple versions of IE at the same time. No need for virtual machines. Consider hard if you need support for IE6.
  • Safari / Chrome are two good browsers based on the webkit rendering engine. Webkit’s greatest merit is that it was one of the first browsers to complete the Acid2 test. Safari is also very popular on the Mac, so you probably you make sure it works.
  • 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.

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):

  • Firebug is the best thing that has happened to front-end development. It lets you click elements in the browser, and shows what HTML and CSS is needed to render the element you clicked. Excellent! Makes everything so much easier. Allows manipulation that is updated in realtime
  • 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.
  • HTML Validatior is the third must-have extension. It validates pages you visit on the fly, and shows a small red cross in the statusbar if you don’t validate. Great way to quickly discover errors in your HTML.
  • ColorZilla is extremely useful for finding out HTML color codes from images, something you will do a lot when coding graphic intensive pages.

Other programs you might need

You’re not only going to be surfing to your site, you’re also going to need a program to write your code in, a graphics editor, and a FTP program to send your files off to the server with.

  • I’ve always had problems finding a text editor that I liked. They either don’t allow me to use the windows shortcuts I’ve learned to love, don’t allow proper color coding of the languages I care about, don’t handle setting up project in an easy enough manner, or handle character encoding badly. So I’ve just resorted to using whatever editor that fits best with the environment I’m currently working in. Netbeans for Java, Visual Studio (non-free) for .NET, and Komodo Edit for Python and PHP.
  • Fireworks (non-free) 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 design mock-ups quickly. There’s no free program worth its name.
  • FileZilla is a good open-source FTP program I keep coming back to. I fire it up and it just works every time. It’s fairly feature-rich 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.

18 responses to “Web Development Pack

  1. This looks like a pretty complete list to me. Firefox’s Web Development toolbar is INDISPENSABLE.The only other tools I’d suggest are FileZilla for FTP, Notepad++ for quick edits, and 7-Zip for file compression (especially when web host control panels let you download your site as a g-zipped tar file). All of these tools are excellent and free on SourceForge.net.

  2. Pingback: CRiSPyToWN -=- Blog of useless info»Blog Archive » Web Development Pack
  3. Great list. I’m gonna have to install OperaView and SearchStatus now..

    I’d also suggest Fiddler, a HTTP debugging proxy, which regularly comes in handy — especially if you’re coding a server-based web app, debugging UTF-8 problems, or doing any XMLHttpRequest stuff.

  4. Having had the same problem I got myself a 1Gb USB memory stick where I installed portable versions of quite a few bits and bobs. This means I don’t have to go and find all my Firefox extensions etc, my Thunderbird will have all settings for my mail regardless of computer, and my Filezilla (which now has replaced my FlashFXP) has all my server settings. I also have the IE standalone versions on it, as well as a full portable install of Eclipse development environment. Just synching it up with whatever computer I’m on (so I run it from the hd, not the stick) and I’m ready to go. :)

  5. HapEdit is very good for writing directly in code and if you’ve got an local testserver up and running, which you should, it won’t be too big of a hazzle to see what it looks like.
    It’s especially good for writing PHP or ASP as it allows you to compile and check the code “on the fly”.

  6. a link checker! xenu link is free and pretty good

    I like Textpad if I’m stuck without a html editor it as its color coded html.

    infraview for searching and sorting graphics

  7. Useful list, especially the Firefox extensions. I can heartily recommend PSPad for HTML and general text/code editing.

  8. I’d heartily recomment HTML-Kit for a code editor. It works well for HTML, CSS, JS, PHP, ASP & others, and is free for personal use.

  9. Yeap… webdeveloper toolbar and IETab are great when designing cross-browser (or cross-platform) and i’ve heard that dreamweaver 8 actually renders and generates css content more accurately.

    Greets from México..

  10. I would just change dreamweaver for nvu + crimson editor (to correct and have your syntax colored) fireworks for inkscape and flashfxp for filezilla (notice a pattern here? this are all free). I would also toss either xampp or easyphp or uniserver just to avoid having to install apache, php and mysql (they all include them and on the plus side, uniserver is portable, you do not install anything)…

  11. Very useful site for a newbie to CSS. Thanks for your work!

    I want to learn to use one good, solid web authoring system initially and have found Nvu, an Open Source application.

    Do you have any opinions on it as a starting point (I’m not able to buy Dreamweaver just yet!)

  12. @Michael: I’ve never used Nvu, so I can’t tell you any opinions about it. I tend to use something simple when I can choose myself. There’s a opensource project called notepad++ that I currently like, it’s simple and has color-coding for most languages.

Comments are closed.