Last time we told you about 10 essential resources for designers. Today we shift our attention to developers to give you a few extra tools that will improve your efficiency and productivity. Here are 10 of our favorite developer resources that we use on a daily basis at ZURB.
Firebug & YSlow
Firebug has been in our arsenal for about two years now, and it is one of the best Firefox plugins a front end coder can have. At it's core, it helps to debug your HTML, CSS, and JavaScript.
In fact, it can tell you what CSS styles are being applied to any given HTML element, pointing you to the exact line in the file that contains that declaration. Firebug lets you be quick and dirty with your coding by allowing you to manipulate and preview styles on the fly, without saving and refreshing over and over again.
YSlow is a plugin for Firebug that gives you extra tools for improving the speed and load times of your web pages. YSlow will run a series of tests on your page, displaying results that show you exactly what you can change to improve page load time and performance.
Versions & Beanstalk
It took us several months to find a decent Mac application for Subversion, and although we've all learned to use Subversion entirely from command line by now, we recently discovered Versions and have been very impressed with the simple interface that it provides. The price tag, after the trial runs out, is about $50, but it's easier to justify a purchase for a tool that is used often and increases our productivity.
On top of that, the Versions team has turned us on to a very useful and free subversion repository called Beanstalk. It integrates well with Versions, and has an excellent web interface for browsing recent activity in each repository, which is very handy when working with a team of designers and developers.
VMware Fusion
VMware Fusion is a Mac virtual machine, an emulator for running several operating systems on the same computer. We typically use it to run Windows XP and Internet Explorer—and it works great. You can try it free for 30 days, but make sure you have the original disc and license key for the operating system you're installing.
GotAPI
Let's face it, sifting through programming APIs can be a time consuming and often visually strenuous task. This tool combines just about any API you can imagine into a clean interface with a simple search auto-complete to help speed up your searches. And when you're really in a bind, you can search through several APIs at the same time.
Prototype
Yeah, JavaScript can be a pain to write, but one of the best ways of alleviating that pain is by using a framework like Prototype. Prototype works especially well for application development, and will save you a lot of time and effort. We found that when we used this framework to its fullest, we spent less time making cross-browser fixes.
jQuery
Though JavaScript framework jQuery is fairly new in comparison to it's competitors, it has proved itself to be an extremely valuable tool. With its built-in effects library, we've found jQuery to cut down on JavaScript even more than Prototype. We've used it in many of our projects already and you can expect to see us use it in many more to come.
Pastie
Sometimes sending code over email and IM doesn't work as well as planned. Josh Goebel spent his free time writing a sweet little web app called Pastie that lets you easily paste in a code snippet and send it as a link to your friend or coworker. No hassle and no messy formatting—all you see is your code. That's all there is too it.
Web Inspector & X-Ray
Don't worry all you Safari lovers, we didn't forget about you. We have a couple of handy tools like Firebug that work with Safari, too. The first one is Web Inspector, Safari's built in debugging tool that works pretty well for JavaScript and HTTP request times. The second tool is called X-Ray, a JavaScript bookmarklet that highlights any HTML element that you click on and it will show you the CSS being applied to it. Our hope is that future versions of the Safari's Web Inspector will work a lot more like Firebug.
960 Grid System
If you're familiar with grid systems, you're probably also familiar with how hard it can be to code for them too. Well here's a great little template system that will give you a head start on your CSS layouts. You can start with a 12 or 16 column grid, and use one of the prepackaged design templates for Photoshop and Illustrator. We use our own grid system here, but if you're looking for a starting point, the 960px layout is a great place to start.
HTML Validator
Here's a Firefox plugin that keeps you honest about your HTML code. At a single glance you'll be able to tell if the page you're viewing has valid html or not. Not only is this a valuable tool for debugging HTML, it also makes for a great learning tool by constantly giving you tips on how to fix each line that doesn't validate.
If you're a Mac user, you'll have to grab it here »
Did we miss one?
That's 10 of our favorite developer resources. Drop us a comment if you've got a couple more to add to the list. We're always open to hearing about new tools of the trade that improve our efficiency and make our lives easier.
Also, make sure to keep your eyes peeled for more posts in this series, we've haven't given away all our secrets just yet ;)