I got a new machine at work yesterday and in the process of building the thing out and getting it ready to actually work with, I came up with a list of the tools and utilities I use on a regular basis. Not the big stuff (Dreamweaver, Fireworks, Photoshop, etc.) The stuff that fills in the cracks that the big tools don’t cover. Thinking such a list might be useful for other folks, I added a couple of online services that I can’t live without and am now sharing the highlights of the list with the world.
Firebug
What it does: Firebug allows you to monitor, inspect, edit, debug, and measure CSS, HTML, and JavaScript live, in the browser.
Why I can’t live without it: Firebug is the king of web development tools for me. Basically whenever I’m working in HMTL/CSS/JavaScript I’m in Firebug.
I don’t know how I used to get anything done without it. Actually, strike that. I do remember. It was bad. Very bad.
Firebug is better than sliced bread.
yslow
What it does: yslow measures front end performance based on Yahoo!’s list of performance best practices.
Why I can’t live without it: Who wants a yslow A? I want a yslow A. The best practices are obviously the real star of the show, but I don’t think we can discount the power of the grading scale. I can tell you from experience, getting As feels good.
Web Developer Toolbar
What it does: The Web Developer Toolbar allows you to inspect, edit, tweak and measure a wide variety of page attributes and properties.
Why I can’t live without it: While I no longer use the editing capabilities, I still use many features of this precursor to Firebug. I’m painfully addicted to a few of the keyboard shortcuts- ctrl+shift+f, ctrl+shift+s being two notable examples.
hammerhead
What it does: Hammerhead automates testing the load time of web pages.
Why I can’t live without it: Steve Sounders’ tool is incredible for testing the effect of performance tweaks.
Want to know if one JS/CSS syntax is faster than another? Hammer it 100 times and check the results.
Within the past month I’ve tested Modernizr’s overhead and looked in detail at the performance difference between the new keyword and object literals in JavaScript.
fiddler
What it does: "Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet."
Why I can’t live without it: It’s incredibly powerful. For my day to day it’s most vital for debugging issues with analytics in browsers other than Firefox.
pingdom
What it does: Pingdom is a pay service that monitors your site for uptime and load time from servers around the world. It can email/text you when there’s more than x amount of downtime.
Why I can’t live without it: Pingdom is a key, automatic way to measure site performance. For example I track my CloudFront assets to make sure they’re as speedy as they should be around the world.
CloudBerry S3 Explorer
What it does: Cloudberry is a powerful, free application used to manage Amazon s3 and CloudFront assets.
Why I can’t live without it: I love Cloudfront and S3. Cloudberry is a great, full-featured interface to both services. Most importantly, from my performance obsessed perspective at least, it’s got support for custom header support baked right in.
YUI Compressor
What it does: YUI Compressor crunches whitespace out of JavaScript and CSS files. We’ve baked it right into our deployment process for pushbutton excitement.
Why I can’t live without it: The file savings are significant, especially when you consider the fact that I’m trying to write better commented code myself and am pressing the folks that work with me to do the same. YUI wins the JS compression battle with me because it supports conditional compilation, ties into Ant AND handles CSS files.
Subweaver
What it does: Subweaver is a plugin for Dreamweaver that integrates Subversion right into the main Dreamweaver interface..
Why I can’t live without it: We use Subversion at work and I use it for my source code at home. I used to go nuts without Subweaver juggling Windows Explorer windows and the main Dreamweaver site files. No longer.
AOL Page Test
What it does: Page Test allows for automated testing of page load times in Internet Explorer.
Why I can’t live without it: IE dominates most the sites I build at work, so knowing about performance in that still dominant browser is vital.
WinMerge
What it does: WinMerge is a great, free, diff/merge tool for Windows.
Why I can’t live without it: It’s just a nice piece of software and it ties nicely into Tortoise SVN.
Inline Styler
What it does: Inline styler takes your HTML Email templates and converts all the CSS classes and IDs to inline styles.
Why I can’t live without it: I’m seriously burnt out on doing HTML emails. This tool does a respectable job of the tedious task of adding style declarations to every <p> on the page..
Page Speed
What it does: Page Speed is Google’s answer to yslow.
Why I can’t live without it: It’s great because it offers a second opinion using different metrics and standards to gauge your site’s performance. Every little bit helps.
So, that’s my list. I may add one or two others as I continue to build out my machine, but those are the ones that went on the new box on the first day.