My Web Developer Toolbox

I realized today that I am very dependent on a few really nifty tools to get my work done. As a developer I am inherently lazy so I need tools that let me get things done quickly and efficiently. I assume many of you are also developers and lazy so today I’m going to open up my web developer’s toolbox and show you what’s inside in hopes that I can inspire you to reach your full laze potential.

Firefox

If you’re not developing your web sites in Firefox, you should be.

Firefox AddOns That Rock My SocksAddons

Everyone has their list of “best Firefox addons ever”. I’m no different from them except I’m way cooler. So here is my list:

  • Web Developer Toolbar – The swiss-army knife of toolbars. It does everything including page validation, real-time CSS editing, form pre-population, DOM inspection etc etc etc. Trust me, you need this.
  • Firebug – Ever tried to debug JavaScript without it? Are you a sadist? Seriously go download this right now if you don’t have it already. When you’re back go read this and this.
  • QuickProxy – There are a few sites that I work on routinely that are only accessible through an SSH SOCKS proxy. I use QuickProxy to easily switch the Proxy on/off. Fewer clicks = more lazy (this is a good thing).
  • GreaseMonkey – Ever since I wrote my first only GM script I’ve been hooked on phonics GreaseMonkey. For those of you who have been living under a rock for the past several years, GreaseMonkey lets you inject your own JavaScript code into any webpage so you can customize your user experience. Check out all the cool scripts at Userscripts.org.
  • Adblock Plus + Filterset.G Updater – I seriously cannot remember the last time I saw an Advertisement on a webpage. I know there are a lot of people who don’t like ADP because they make their livelyhoods from web advertising. I am not one of those people.
  • FavIconize Tab – Real estate on my tab bar is a precious commodity so I use FavIconize Tab to only display the favicon of sites I visit frequently. Cool.

screenie_10-2007-05-11.gif

XAMPP

Need a complete WAMP solution without all the hassle of multiple packages, configuration woes and perhaps even *horror* compiling stuff? Look no further than XAMPP from Apache Friends. Their package contains the latest and greatest Apache, MySQL and PHP (both v4 and v5 support) all in an easy-to-use installable package. They also throw in some other goodies like an FTP server and PHPMyAdmin. Ever since I discovered XAMPP I do all of my testing and development locally before deploying to a staging server.

A Desktop Shortcut to Edit Your HOSTS File

What do you mean you don’t have one of these yet? Any good web developer needs to edit his/her HOSTS file frequently. Why are you still doing it the hard way: Explorer > C:/ > C:/WINDOWS > C:/WINDOWS/SYSTEM32 > C:/WINDOWS/SYSTEM32/drivers > C:/WINDOWS/SYSTEM32/drivers/etc > Right-click hosts > Open With > Notepad. Whew! Instead try something like this:

screenie_08-2007-05-11.gif

Double click that baby and your off and editing! BTW I use gvim instead of notepad because it makes me feel good. If you’re confused about what you’re seeing above, do this: Go to your Desktop. Right click > New > Shortcut. Enter “notepad c:/windows/system32/drivers/etc/hosts” as the location then click Next. Give it a name and you’re done! Double-click when you need to edit your HOSTS file.

A Good IDE

I use Zend Studio but I wouldn’t hold it against anyone for using Eclipse. The point is you need a good IDE to develop quickly! There are probably some purists out there that will extol the virtues of “Notepad coding” — or typing everything by hand. This is complete crap. Get an editor that does auto-completion, tag insight, tag highlighting and sports a full debugger.

ColorpicColorpic

Simple but awesome. How often do you need to find out what color that was on that site you just visited. Enter Colorpic. (Not on my list but also cool is Screen Calipers from the maker of Colorpic)

ScreenHunter

You need screenshots! You need them in your documentation, you need them to attach to emails, you need them to post on your blog, you need them to corroborate your stories. ScreenHunter is an unobtrusive screen capture utility that sports full-screen capture, area capture, timed capture, JPG, GIF and BMP support amidst a whole slew of other features. Did I mention it’s free?

Launchy

Nevermind…I’ve decided I don’t like Launchy all that well.

So there you have it. My toolbox opened for the world to see. I hope this post spawns an army of eager web developers ready to code the next killer web two-point-oh site.

Jon Gale is currently employed by nextSTAT and spends his days looking for tools and tricks that will let him express his inner slackitude. He enjoys rousing games of badmitton and has had a goatee for over 10 years.


Don't be stingy...share with your friends!

9 thoughts on “My Web Developer Toolbox

  1. Jon…… You should really be using linux for development. I can’t even imagine trying to do development on a non linux machine. I can hook you up with a fully supported RHEL 5 license if you want.

  2. @gshipley
    As a force of habit I’ve started coding all of my apps so they’ll work in Windoze or *nix environments. I doubt I’ll ever deploy to a production Win environment…but you never know.

    Stuff like this works fine no matter where you put it:

    define(‘APP_INCLUDE’,getcwd().DIRECTORY_SEPARATOR.’inc’);
    ini_set(‘include_path’,ini_get(‘include_path’).PATH_SEPARATOR.APP_INCLUDE);

    But…I see your point. If it weren’t for one or two Win-only apps** that I couldn’t live without I’d probably be running Ubuntu on my desktop.

    ** Photoshop – no…the GIMP is NOT as good as Photoshop
    ** Dreamweaver – no…Aptana is NOT as good as Dreamweaver
    ** iTunes – no…I haven’t researched *nix alternatives 😉

  3. Why not do it my way and have both? CentOS and XP (what’s Vista?) with Synergy to make them play nice on my 2 19″ LCDs; no more Num-Lock, Num-Lock. Now all I need is a MacBook Pro and my inability to master any one environment will be complete.

  4. @Atticus I’ve got the dual-head monitor thing happening but alas, I only have one computer. I left a partition available for a future dual-boot install, but having to reboot to switch environments will be too painful. Remember in the old days when we used to do that… “Switching to Windows for maximum productivity!”

  5. Yes, but oh how my memory stings at the thought! A reboot means I have to shut down all my handy apps and restart them again when I come back (not to mention ruin my uptime count). That’s just wrong.

    But since we’re on the subject, have you got any tips for managing the absurd memory leaks in Firefox on Windows? Everything I’ve tried so far has failed (other than restarting it every day which is just ridiculous 😉 ).

  6. @Atticus
    The only Firefox memory tweaks that have worked for me are:

    add a new boolean: config.trim_on_minimize set to true
    and browser.cache.disk.capacity lowered to around 25000

    The first one tells FF to free its memory on minimize…the second limits the amount of memory FF can use (I know it says cache.disk). With those setting FF still uses ~100MB on my system but it used to use upwards of 350 MB!

    As for the Jazz…watch for incoming blog post!

Leave a Reply

Your email address will not be published. Required fields are marked *