Over the past few years designing and developing I’ve come to rely on a number of tools. Most of these are obvious like Photoshop and Firebug, however I’ve come to realize that a few tools I use aren’t as well known.

ReCSS – Reload your CSS without reloading the browser

If you’ve ever styled a large web application you have surely run into the scenario where you have to modify the CSS for an element which you can only get to by running through several steps first. Each time you make a minor CSS change to that element you must clear your cache, reload the browser and run through those same 5 or 10 steps just to see the changes you made, then rinse and repeat for each browser until it looks just right. There are several ways to edit CSS in the browser using tools such as the Web Developer Toolbar’s Edit CSS sidebar or modifying CSS rules in Firebug, but nothing beats editing CSS directly in your favorite editor, hitting save and seeing the changes in the browser. Enter ReCSS, created a couple of years ago by our friend and co-creator of the Dojo Toolkit, David Schontzler. When you click the ReCSS bookmarklet it runs a piece of JavaScript which reloads all .css files that were loaded via a link tag. I’m actually surprised this isn’t part of the Web Developer Toolbar already and that more people don’t know about this. Once when asked what my most visited bookmark was I joked it was ReCSS; two years later I think that is actually accurate.

MAMP – Server side for the design guy

Say you wanted to get a full LAMP stack up and running on your Mac but found that the versions of PHP or MySQL that ship with your version of OS X are out of date. After hours of trying to install your own versions of these programs you now have so many conflicts that your web server won’t even start! Enter MAMP. It’s free, lives in your /Applications directory and it’s all self contained…meaning it won’t interfere with the server software already installed by OS X. While I wouldn’t host a public facing website with this of course, it’s probably the fastest way to get a LAMP stack running on your mac. For bonus fun, install the Hosts Dashboard Widget.

If you’re not on OS X you can check out XAMPP which is (from what I understand) a similar package that runs on many platforms.

PNGCrush – Get rid of the color shift

Now that IE7 provides full transparent PNG support and IE6 has a new more useful hack, people are finally starting to use PNGs in their webapps and websites. The first thing most people find out after exporting a nice brightly colored PNG from Photoshop is that the color shifts when they put it into their web page. There is a full write up on this, the gist of which is that some browsers don’t read the gamma information correctly (or at all in some cases). One great workaround is to install PNGCrush, which can strip the gamma info from the PNG. PNGCrush also has a nice way of compressing PNGs, often reducing file size by 20% or more.

Once you’ve installed PNGCrush just drop to the command line, navigate to the directory full of images and run this command 

pngcrush -rem gAMA -d crushedPngs *.png

This will compress every PNG in the directory and put them into a directory called crushedPngs. A simple copy and paste of the crushed PNGs and you’re done: smaller files with generally better color accuracy.

There are some GUIs for Windows and OS X which claim to do the same, however I’ve not had much luck on the OS X side so your mileage may vary.

Paparazzi! – Snap full length pics of your pages

Ever created a page that just scrolls and scrolls and then get asked to make a screenshot of it for someone? While you could take a screenshot and then scroll and then take another screenshot and so on and then splice them all together in Photoshop, Paparazzi! simply loads a URL, waits the amount of time you tell it to and snaps a full picture of the entire page regardless of length or width.