Oct. 15, 2012 Update: Since originally writing this post, a few of the tools I used changed. I’ve updated them below.

As a web designer/developer, my computer is my most important tool (surprise). But even more important is how my computer is set up; what applications I have, their configuration, and the physical arrangement of the computer itself. The past six months have brought major changes in how I work on my computer, and I thought I’d write a quick post to share my methods and practices with the world.

The physical setup

My computer is a 15” MacBook Pro (mid-2009). When I’m at home, I typically have it plugged in to a second monitor, a 21.5 inch 1080p model from Acer (I’m not sure the exact model number) which I keep on a monitor arm at eye-level. The MacBook Pro itself is also raised at eye level (with a very technical plastic box). After noticing lots of back and neck strain, this seemed like a great way to relieve some of that tension and it’s proved to be one of the best moves I’ve made in a long time.

At desk/arm-level I have an Apple wireless Bluetooth keyboard and a Logitech MX Revolution mouse (the rare Bluetooth edition, worth every penny). I take the mouse with me everywhere. For the type of precision graphic design I do, my MacBook Pro’s trackpad just doesn’t cut it. Even when I’m just casually browsing the web, I feel far more comfortable with a scroll-wheel than with two finger scroll gestures.

Design Software

When it comes to actually designing sites, my go-to app is Adobe Photoshop. I actually have the whole Creative Suite (Design Standard) and in the past six months I’ve jumped from CS4 to CS5.5 to CS6. CS6 is an absolute joy to use compared to the previous two incarnations, although it’s not perfect yet (the application chrome has a weird border, and I’ve had a number of crashes with the blur tool, oddly enough). Still, if you have the opportunity, jump to CS6.

Although I use Save For Web to save all my web-bound images, I almost always recompress them through the essential ImageOptim, a great tool that optimizes images of all types. It’s shaved as much as 70% off images for me in the past; an incredible savings. I also use its sister app, ImageAlpha, which allows me to generate 8-bit alpha transparent PNGs (bet you didn’t know that was possible, eh?). Having the capabilities of alpha transparency in the 8-bit color space is an incredible boon for speed without sacrificing design. Totally worth the extra time and finessing.

For managing fonts, I go with Extensis’ Suitcase Fusion 4 (another recent upgrade, from version 3). The application is ugly and occasionally buggy, but the auto-activation is the best of any font manager on the market. It also bundles Google Web Fonts, so you can easily incorporate them into mockups and graphics, without needing to download them manually. Unfortunately, Photoshop CS6 has a known bug that breaks Extensis’ auto-activation plugin, so the two apps are temporarily incompatible. Update: The Photoshop CS6 auto-activation plugin is now in full operation!

The tiny and simple Pipette helps me grab colors from my screen. There are many like it, but Pipette is straight forward, no-nonsense, and damn fast. Update: For reasons beyond my understanding, Pipette and OS X Mountain Lion don’t get along. I’m currently looking for a replacement that is as no-nonsense as Pipette was.

Development Software

One of the first applications I start up every day is Terminal iTerm2. I use zsh instead of Bash, with a few oh-my-zsh plugins (you can see which ones at my dotfiles repo on Github). I use Terminal iTerm for navigating through folders, checking DNS on remote domains, getting dictionary information, working with Git, deploying websites, and much, much more.

One thing I don’t use it for is text editing. While I’ve been pretty frequently hounded to look into Vim, my basic text-editing needs on the command line are well-covered by nano. When I need to do serious text-editing, I look no further than Sublime Text 2. It’s the best text editor I’ve ever used. The plugin architecture, theme capabilities, and command-line integration make it a no brainer. I haven’t registered yet, but intend to very soon. It will be worth every penny.

Update: I do in fact use Vim now. I run MacVim in the terminal (mvim -fv aliased to vim and my EDITOR) with a number of plugins and tweaks. I’m hardly a Vim wizard, and still would probably work faster in Sublime Text 2 or another editor, but using Vim means I can have a consistent work environment on any Unix-based computer I use (such as our Van Patten Media servers or my home server).

When I need to do a bit more intense folder navigation (mainly when I need to move files around or see directory structures in a way ls can’t show them) I turn to Finder, and specifically the Total Finder application. Total Finder brings tabs, dual-pane browsing, and many more useful features to Finder. It’s a must-have.

Although I’ve started moving away from SFTP as a deployment mechanism, I keep Cyberduck around for occasions where an SFTP client becomes necessary. It’s also useful for browsing remote S3 buckets, so it is very useful in that regard. I also love ExpanDrive for adding S3 buckets as pseudo-local drives.

In the browser

Finally, I have a few tools I use for in-browser work. First and foremost are Chrome’s excellent Developer Tools. They can’t be beat (although admittedly Firefox is gaining ground with their own native set). For debugging, speed profiling, and so much more, you don’t need to look anywhere else.

I’ve just become addicted to LiveReload. I would rather have this type of feature handled in the command line, but [guard-livereload](https://github.com/guard/guard-livereload) seems to be designed primarily for Ruby-based apps. I'm working mostly in PHP, and although we have a Ruby-based deployment architecture it just doesn't fit into our setup. The app is flawless though, and although I wish it could be invoked from the command line it does exactly what it says on the tin with no complaints. guard-livereload support is baked into wpframe so I no longer use the app.

For mobile browser work, Adobe Shadow is excellent. It’s basically a nice wrapper around weinre, but the wrapper makes it easy and fast. The bundled weinre Web Inspector isn’t always perfect: CSS values don’t always reflect reality, and changing values almost always breaks thing. Still, it’s excellent for a side-by-side look at the state of your site. Update: Adobe Shadow has become (a rather overpriced) paid service called “Adobe Edge Inspect” and has been removed from my workflow as a consequence.

There’s more

There’s a whole lot more that I didn’t cover, my browser of choice, music app, markdown editor, password manager, etc. I could go on all day if I tried! Still, this is a good introduction to some great tools that are making my day-to-day easy and (often times) fun.