Obligatory Twitter Feed

The Good Lab




Tools of the Trade

Friday, January 27th 2012

I’ve always enjoyed reading articles written by other designers and developers where they highlight useful tools and products they use to speed up their workflow and in general, just work better. I’ve obviously got a few of my own, so I figure it would be a good thing to share them, in the event others are looking for a few more tools to add to their arsenal.


MacBook Air


This past year I made a major upgrade to my setup and purchased a Thunderbolt equipped Macbook Air. Going into the purchase I had some hesitations: was the screen going to be too small? Was the hard drive going to fill up too quickly? Would the (non-upgradeable) RAM not be enough? And would I be ok without the faster i7 processor. Well, to answer all these questions, the Air is by far the best computer I have ever owned. It’s small, light, portable - fast, boots up in 12 seconds - has ample room to work on the screen without an external monitor, which is even more fantastic when plugged into the Thunderbolt monitor I felt obligated to buy.

Apple Keyboard (with number-pad)

I’ve heard mixed reviews of the apple keyboards, but I love them. I hate typing on bulky keys, and the short chick-let keys on the apple keyboards are small and quiet, and easy to navigate around. My two complaints are that it is not wireless, as apple does not make a wireless version of the keyboard with a number-pad, and also that the keys get pretty dirty; however it does motivate me to keep my hands clean.

Wireless Mouse (Razer Orochi)


At an old job I was given a wired version of this gaming mouse (maybe it was a different model, same brand though) and was immediately drawn to its’ precision . After a few days working with it, going back to a normal mouse felt like I was dragging my arm through a pit of mud, just to get across the screen. The precision is great for slicing photoshop documents, and the speedy movement rate speeds up your workflow as it takes you less effort/time to get around the screen. The wireless capabilities are also nice, as eliminating cords is always a good thing in my book.

Pro-tip - Pair this wireless mouse with a set of Apple rechargeable batteries to setup an amazing partnership.


Sublime Text 2

Another milestone change in my setup this year was changing my code-editor of choice. Good-bye Textmate, hello Sublime Text 2. Wow, it’s like a breath of fresh air you didn’t think you needed. I was immediately a fan because of the sexy default syntax highlighting, but then the quick project switching, side-by-side code editing, text-mate snippet compatibility, and the Apple+P magic menu sealed the deal. Unlike the every other year updates we were getting from TM, ST2 gets updated nearly daily, with new features being added all the time.

A couple must-have ST2 plugins:

Spaces + HyperDock + Divvy

I’m pretty anal about segregating various tasks into their own separate Spaces in OS X

  1. Browser + Code Editor
  2. Photoshop
  3. Finder Windows
  4. Miscellaneous helper applications
  5. iChat, Skype, Twitter
  6. iTunes, MAMP, CodeKit

With each of these Spaces I am constantly re-sizing and readjusting window sizes to be more suitable to what I am currently doing, and HyperDock and Divvy really help me quickly handle the resizing. While HyperDock offers more than the features I am describing, the main thing I use HyperDock for is the keyboard shortcuts to move a window to the left, right, top, or bottom of the screen. For example, if I’m editing code full-screen, but then want to have my code on the left and browser on the right, I press option+command left arrow, and the code window resizes to half of the screen width and aligns it self on the left. Same thing happens for all other direction combinations.

Divvy does something similar, but instead of only doing the four edges of a screen, it lets you divide up the screen how you see fit, by providing a grid overlay on the screen and allowing you to select the resize shape and size you want to use. Sorry, it’s difficult to explain, but hopefully this screen shot helps.



Alfred is another app I probably don’t use to its full potential, but nonetheless has really helped my workflow. If you don’t already know Alfred is an app launcher. Instead of using spotlight or navigating to apps via your Application Folder, you can use Alfred to launch applications with a few keystrokes. On top of the app launching, I also use it to quickly search online documentation and handle some simple maths.



Fantastical doesn’t do much, but it handles calendar related tasks extremely well. Before iCal added a way to add events quickly using native language, Fantastical was doing basically the same thing, but arguably much better. Fantastical adds an icon to your menu bar, and when clicked on shows you a monthly calendar, letting you quickly create new events and view upcoming events. Like I mentioned before, iCal now has a feature to do this, I believe, but I don’t use iCal, and Fantastical looks amazing.

Little Snapper

Little Snapper has been out for a quite a while now, but if you don’t already know, it’s an application letting you take screen shots of webpages and lets you categorize and organize these snaps into folders, buckets, tags, etc. Since using LS, I’ve tried to move the task of collecting design inspiration into web-based tools, like Gimmebar, but LS just handles it better. My thoughts are that handling large images like that is something hard to do via the web and much easier to do on a local machine. LS has tools to take screenshots, annotate items, and makes organization a breeze.

Honorable Mentions

  • Codekit: I just stated using this and so far so good. I’ve started using SASS much more, and the easy code minification and concatenation is great, as I always forget to do it before launch.
  • Chrome: It’s fast, it has great developer tools, and it’s webkit. Not much else to say.
  • Gmail: I am always looking for a sexier email client (read: Sparrow), but I always keep coming back to Gmail. I’m a wizard with Gmail keyboard shortcuts and I have my label management perfectly organized. I don’t’ think I’ll ever actually be able to make the move.

Other Gear



I love being able to take my office with me wherever I go, and having a nice sturdy backpack is key for this. I recently replaced my old Incase backpack (which I loved) with a new pack from Mission Workshop. The new bag doesn’t have as many pockets as the old Incase, but its much more compact and a little more durable. Both bags have treated me well and I would recommend either.



Like I mentioned above, my new backpack has fewer pockets than my old Incase backpack, and because of this I was having a hard time organizing all the small crap I need to carry with me (cords, pens, business cards, etc). Grid-it is a big pad that has elastic cords which hold things in place, and lets me meticulously organize all the stuff I feel necessary to carry on my person.


I also have an iPad, but wow, the Kindle is amazing. After using the Kindle I fully realized the e-reader is in a product category of its own. It’s so light, and being able to read a book and turn pages all while holding it in one hand is great. I’ll often tell people who are thinking about purchasing an iPad that its not something you necessarily need, but after you get one, you won’t be able to let it go. The same principle applies to the Kindle. It also doesn’t hurt that you can get one for under $80.


Single Monitor

Sometime in the past 2 years I downsized from having two widescreen monitors to using just one. It happened because I quit my job and had to return one of the monitors, but after using one monitor for a while, I found that it keeps me much more focused. I will say that having a 27” monitor is still almost like having two screens, but I often will work at the Kitchen table on my Air to get even more focused.

Eliminate Alerts

It’s hard for me to completely remove all alerts, I check gmail all the time, but I have found that turning off the dock in OS X to only appear when you move your mouse over it really helps with distractions. Before I would constantly see dock icons jumping up and down and getting red alerts on the top of them, but moving them under the screen psedo-hides some of these distractions but still lets you check quickly if you can’t completely detach like me.


When its crunch time and there are a bunch of things going on, its often times hard to figure out what to work on and in which order. Pomodoro is a technique where you work uninterrupted for a set number of minutes, then take a short break where you re-gather yourself and get ready to start another sprint a few minutes later. Think of it like agile development process on a daily schedule. There is also a nice free App for tracking your time and measuring your results.


No one has posted a comment yet, be the first!

Commenting is not available in this channel entry.

Article Categories

Article Tags