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
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.