Essential Web Developer Setup

Free Resources You Need For Successful Web Development

When I’m doing an orientation for a new web developer, I like to run down a list of free websites, Firefox extensions and tools that can help them do their job better and faster. Most of our developers are on Windows machines, so the resources below are targeted towards that environment.

3 Essential Websites

1. Netvibes

An RSS aggregator should be a developer’s first stop on the web each morning. My flavor of choice is Netvibes. From a handful of tabs, I can get headlines from all of the top blogs in the web industry.

How important is an RSS aggregator? Well, monitoring the top web development blogs is like a free education, but better. There are no tests, you learn at your own pace and what you learn about happened today, not months or years ago.

If you’ve tried Netvibes and aren’t a fan, Google has another popular RSS aggregator. If you do like Netvibes, you can watch the same blogs I’m watching by subscribing to my tabs here: Web Development, Web Design, Design Inspiration, Ruby on Rails and Marketing and Project Management.

2. Del.icio.us

I like to get all of my developers set up on the company’s Delicious account. When they stumble upon a good resource, they add it to our collective, company knowledge. It’s a great way to promote work related interaction and discussion among employees. Feel free to browse my personal Delicious bookmarks.

3. Dive Into Accessibility

Most developers on the market have some knowledge of accessibility, but this website is a great comprehensive resource. It’ll open their eyes to the responsibility of both developers and designers when building websites accessible to all users.

9 Essential Firefox Extensions

I recommend that all of our developers use Firefox as their default browser, not just for the browser’s rendering abilities, but also for the extremely helpful add-ons that have been created for the web development community. The plugins listed below have been used the most frequently in our company with the greatest benefit.

1. Web Developer Toolbar

The Web Developer Toolbar is the first Firefox plugin you should install as a developer. It has everything you’ll need from checking accessibility to measuring the size of elements. A must have!

2. ColorZilla

When you need to replicate a color exactly but don’t want to waste the time loading up Photoshop, this little tool certainly comes in handy. We’ve found that it’s most useful for developers who need to grab color values when they’re writing CSS.

3. Delicious Bookmarks

This plugin allows our developers to synch directly into the company’s Delicious account from their browser. Just click the big Delicious button anytime you want to save something and it'll automatically be added to the associated Delicious account.

4. YSlow

Another great Firefox extension from Yahoo. This handy plugin allows you to troubleshoot slow loading websites. The reports are based on of Yahoo's rules for high performance web sites. If you're developing web applications or websites with a lot of multimedia, this plugin is a must have.

5. Firebug

If your JavaScript or AJAX has gone south on you, Firebug is a must for getting the project back on track. This addon is enormously powerful and is an essential tool for troubleshooting your code.

6. IE Tab

This plugin allows you to switch from Mozilla's rendering engine to IE's from right within Firefox! Great tool for a quick QA.

7. Link Checker

Great tool for developers and Project Managers. Just click the "Check Links" button and the links on the page will light up green for valid URIs, red for broken links.

8. Send Link

As a Project Manager, I ask all of my developers to send links to me whenever they submit their work. This plugin generates an Email template for you with a link to the webpage already embedded in the message body. It's a simple, but frequently useful little tool.

9. Fire Shot

Fire Shot allows you to take screenshots of the current webpage. I like to use this plugin when we finish a project that is going to be added to our company's portfolio page. It’s much easier than taking a full screen shot and trying to edit out the browser.

4 Essential Development Tools

1. Instant Rails & Aptana

If you're just getting into Rails, Instant Rails is probably the easiest way to get up and running. It's a one click installer complete with Ruby, Rails, Mongrel, Apache and MySQL support.

Once you have Instant Rails installed, you'll need an IDE. I've tried a few of the top Rails IDE's, but for me Apatana has been the easiest to use. It comes complete with built in shortcuts (and the ability to add new ones), just like the popular TextMate for Macs. Aptana also comes with a GUI interface for all of the popular Rails generators, which is a great time saver. No more typing "ruby script/generate ...".

2. XAMPP

If you're not into Rails yet or still maintain some PHP sites, XAMPP is to PHP as Instant Rails is to Ruby on Rails. It's a great one click installer that's always worked well for me. There are a couple things that need to be configured, but there can all be accomplished through the XAMPP start page that you'll see once you're up and running.

3. Tortoise SVN / Subversion

Version control is a must even if you're working solo on a project. We’re currently using Tortoise SVN and Subversion to version control our project with good results. Installation and use of Subversion can be a little bit tricky the first time around, but the website has some useful documentation that you may want to take a look at to avoid hours of frustration.

4. PuTTY

Putty is a free Telnet / SSH Client. If you're into Rails, PuTTY is usually a must have.

3 Essential Accessibility Tools

1. Colour Contrast Analyzer

A W3C standard and a general best practice is a color contrast ratio of 5:1 (10:1 is ideal). The CCA can help you identify exactly where your background / foreground color combos stand. This tool is especially useful for designers that are accessibility conscious.

2. Lynx

You've just built a killer website, but does it degrade gracefully? Nothing will put your site to the test like a good old text based browser. Lynx is probably the most popular text browser and easiest to use.

3. JAWS

JAWS is typically the screen reader of choice for users of assistive technology. Trying to use JAWS to navigate your website could help identify some hard to find accessibility issues that may not be uncovered by other means of Accessibility QA. The demo is full featured, but will only run for 20 minutes in a single session. Once your computer is restarted, it will run again for a full 20 minutes.

5 Essential Web Browsers

We QA in Firefox, IE 6, IE 7, Opera and Safari. Since IE6 and IE7 can’t live on the same Windows machine, I’ll have the developer install IE6. In most cases, if the layout works in IE 6, it’ll work in IE 7 as well. As a backup, we have a QA station with IE 7 on it.

While some developers will need additional, specialized tools, getting them setup with the above is a great starting point that I've found success with.