I recently purchased a new computer and was faced with the task of setting up a fresh installation of Windows Vista with all of the web development goodies I’ve come to know and love.

Here’s a walkthrough for what I did to get set up, starting from square one. This is literally everything I did and installed from when I was first able to access the desktop after a fresh install.

Web Browsers

1. Install Firefox. Seriously, do I even have to mention this?
2. Install Chrome. I use Chrome for using CMS’s since I feel it’s a bit faster than Firefox. Administrating Joomla sites, for instance.
3. Install Safari. Safari Win has a somewhat different set of rendering bugs than it’s neighbor on the Mac, but there is enough of an overlap that I use it to spot-check.
4. Install Opera. It isn’t that widely used but I like to check out my sites in it.

Development Tools and Useful Apps

1. Install SciTE with extensions. It’s a kick-ass text editor with code coloring for a support for a multitude of languages.
2. Install Aptana Studio. One of the best full-featured development environments around. Based on Eclipse so it can be a resource hog, and prone to some unusual behavior, but it’s still on a level beyond costly web dev IDEs like Dreamweaver.
3. Install XAMPP. This is a bundle that includes the Apache web server, MySQL database and support for PHP and Perl. It comes with lots of goodies like a web interface with quick links to all of the administrative areas, e.g. pre-installed phpMyAdmin for administrating the MySQL database. Note: make sure you install this to a folder without spaces, e.g. c:\xampp. For more information, read our article on setting up XAMPP.
4. Install TortoiseSVN.
5. Install 7-Zip.
6. Install DAMN NFO Viewer.
7. Install the MagicISO Virtual Drive.

Customizing Firefox

I like the clean up Firefox and streamline it a bit. Here are some of the things I do after a fresh install.

1. Delete the links in the bookmark toolbar (“Recent Headlines” and “Getting Started”) by right-clicking the bookmark and hitting ‘D’ on the keyboard. You can keep “Most Visited” if you like since it is actually useful.
2. Right-click on the navigation buttons and choose ‘Customize’ to streamline the icons. If you plan on using navigation icons, check the ‘Use small icons’ box so they are at least small. Remove the ‘Home’ link by dragging it away from the navbar.
3. Drag and the search box and the addressbar to the top area. Also, you can optionally drag the back/forward and stop/refresh buttons to the top, on the left of the addressbar. I personally remove the navigation in favor of keycommands. Instead of clicking back and forward buttons I just use the Alt+Left and Alt+Right keyboard shortcuts, respectively. I also remove the loading spinner on the top right of the page to save space. No need for a stop button when you can hit Esc, and why click the refresh button when you can hit CTRL+R? Obviously this is personal preference, but that’s how I roll!
4. Once you’re finished customizing it, hit ‘Done’ and then right-click on the navigation again and click on ‘Navigation Toolbar’ to hide it. We’ve just provided that much more screen real estate for what’s important, the web sites.

Firefox Extensions

1. Firebug
2. ColorZilla
3. MeasureIt
4. Web Developer
5. FireFTP
6. Delicious Bookmarks
7. ScribeFire
8. Flash Plugin
9. DivX Plugin

After installing the extensions and restarting, I add a few small icons to the top (on the left side of the addressbar). I add the icons for “Inspect Element” (Firebug), toggle the Web Developer Toolbar on and off, and tagging pages in Delicious.

Firefox Search Engines

You can install Firefox search engine plugins by visiting the MyCroft Project homepage. There are some nifty ones like Google Code Search. Also, you can install the MyCroft Project search plugin which actually searches available search plugins. How meta!

That’s it for now. I’m sure I left out a lot of great apps so I’ll have to write a follow-up. But, this is a pretty good start to getting up and running with a development environment.