Olivier Lacan

Utility Belt Show All

This little guide will hopefully give you some good tools to get started or improve your existing Mac workflow. Since I'm a web developer, this is mostly centered around that. Send me a toodle if you think I'm missing a wonderful app or service in here.

Editors

Sublime Text 2

After a bumpy transitioning period away from TextMate and Espresso, I tried Vim with the extremely helpful Janus bundle created by Yehuda Katz & Carl Lerche. But as a user interface designer, Vim still rubbed me the wrong way, it’s a powerful beast when used with keyboard controls only, but a much clumsier one when some mousing is required.

So I found my way on Sublime, which now has a Vintage mode like Vim, but also a command line utility, TextMate bundle compatibility, and relatively simple preference settings.

CSS Edit

A thoroughly indispensable CSS debugging, hacking & experimenting tool (soon to be included in the new Espresso) build by the fine folks at MacRabbit

Byword & iA Writer

Two fantastic focused writing apps. Byword, especially since I’m using it right now, is what WriteRoom should have become had it embraced Markdown and the evolution of the sector. iA Writer gets a bad wrap for being overly simple, but I love how it displays Markdown syntax in a right-aligned gutter.

(Web) Development

Google Chrome

The best browser in the world, using the engine of the second best browser in the world. Firefox on Mac still doesn’t compare. And if you haven’t played with Web Inspector in recent years. Hit that Command + Option + i right now, fool.

Git & Tower

I suffered learning Git through command line, GitX and later SmartGit in 2010. Despite being much more comfortable with git in Terminal now, Tower is the best GUI out there. And it’s constantly improving.

If you want to learn how to use Git, there is nothing better to start with than GitHub’s excellent Help. The guys at GitHub offer an online hosting service for Git repositories and they understand that their interest lies in making Git easier to understand for anyone.

In that spirit, they recently released GitHub for Mac, and excellent and simple graphical user interface to Git that removes much of the confusion for beginners.

I highly recommend it if you have no concept of how to use Git and you don’t want to commit the time to learn it with the command line. It’s a tedious yet ultimately rewarding task that not everyone can afford.

If you want to learn Git inside and out, Scott Chacon’s book Pro Git is the place to start. It’s free, and Scott’s not the GitHub CIO because he buys everyone drinks. Alright, maybe that’s why, but he’s also damn knowledgeable about Git and its inner workings.

GitHub

Hosting Git repositories remotely is crucial whether collaborating on projects with friends, anyone in the open-source community, or co-workers. GitHub makes this so easy I could cry, and GitHub Issues is how I've always wanted to handle bug tracking.

Pivotal Tracker

There's a lot of mess around the definition of Agile development, this is how you get rid of all that. Any feature required in a project I will write down as a story in Tracker.

CloudApp

An elegant and essential tool for instantly sharing screencaps, links, text, syntax highlighted code and have short customizable URL automatically copied to your clipboard. Probably the app I use the most.

I love this app more than almost any other I use every day. And it’s probably the simplest. All it does is catch screenshots and automatically upload them to the web. When the upload of a screenshot is done, it can notify you with an audio ping, growl, or simply with an elegant and minimalist Menu Bar icon feedback.

But that’s not all, CloudApp will also copy the URL (which can be secure) into your paste bin (i.e. clipboard) so all you have to do to share it is to hit command + v. It doesn’t just link to the file mind you, it will resize images to a reasonable size and center them beautifully on the screen for a better viewing experience.

And as if that wasn’t enough, CloudApp can handle basically anything you throw at it: videos, text, you name it. Using Raindrops (plugins) it can receive files and data from any application you’re currently using and upload them for sharing in a similar fashion.

I highly recommend a pro account which will allow you to set a custom domain name to your CloudApp URLs. I like to let people know I didn’t just pass on some random shortened URL to them so my links always start with http://link.olivierlacan.com/<randomcharacters>.

Dropbox

If you don’t use Dropbox, start today. It will allow you to seamlessly synchronize files across any computer or device (Mac, PC, iPad, iPhone, etc). It creates a sort of hot folder where you can drop anything and see it appear on another device in minutes if not seconds depending on the size of the files.

Better yet, Dropbox acts as a cloud backup solution since all the files you sync are saved, even if you delete them from all of your devices accidentally.

I use Dropbox to share wireframes and comps with other designers, share photos with my family, share article draft text files with myself so I can edit them on my iPhone with Elements and as a way to bridge many services from my Mac to my iPhone in a similar way.

Since my 1Password database was stored on there, I would have been stuck without 1Password for iPhone. It simply took me a while to type the complex password as I was reading it from the iPhone manually, instead of relying on 1Password to copy & paste it.

Fontcase

The best font management tool in the world. Barely exagerating. It has a very useful type tester which I use every time I need to decide what font to use for a wordmark.

HTTP Client

As a web developer, if you ever had to work with a web API (JSON, XML, etc.), this a tool you should have known about. I rarely use it, but when I need to, I'm really glad I have it.

Screeny & Screenflow

The former is a nifty simple screen recording tool by Drew Wilson to create screencasts in seconds. The latter is a great app for both recording and editing high quality screencasts with several audio tracks, and transition effects. It puts any video editing tool to shame.

Project & Self Management

TimeTrack Pro

Yes, this is a paid app but it’s well worth the $10 if you’re a professional developer or someone that uses his computer professionally. The free version does allows you to track your usage of all the applications on your Mac, but the Pro edition can track individual documents within these apps. That includes individual websites you visit in your browser.

Why is that useful? Because I can’t really justify charging 8 hours of work to a client if I’ve spent 3 of those surfing on Reddit. Mind you, you could, but that’s between you and your conscience.

Regardless, TimeTrack Pro is the best time tracking tool because it’s passive. You don’t have to remember to turn it on when you’re actually working, and turn it off when you stop.

What does it do when I’m idling you say? This is where the only option that isn’t a default comes in. Go to the “LogTime” tab in the Preferences for the app and select “Suspend logging when user is inactive more than 30 seconds”. I found that 30 seconds is a good rule of thumb, it allows you to think about something for a little bit without having that time discounted from your results.

The app presents the logging results in a very interesting way, you can see a total usage time for all the apps of your computer, for single days or for an entire month. It gives you an incredibly detailed perspective on how you work, not just how you think you work.

The Hit List

It replaced Things as my go-to app for jotting down lists of stuff. It has a fantastic UI, and very intuitive keyboard controls which are explained elegantly inside the application with an example list. It’s one of the best in-app usage demo I’ve ever seen. The app syncs to a passable iPhone app but only if you subscribe to a paid sync service, which sadly isn’t worth it considering the shortcomings of the iOS app.

(Passive) Communication

Propane

A good native Campfire client (no need to leave the browser open anymore). Campfire is the best passive communication tool for teams. In a similar fashion to IRC it allows everyone to join chat rooms, but its superiority comes from the fact that all discussions and files uploaded to the rooms are logged and searchable.

As an ex-IRC power user, I can guarantee you the two don’t compare. For one Campfire is a monthly paid service, and Propane itself is a $20 (worth it, support indie developers) expense that only professionals will be able to justify. More importantly, no more worries about server splits (although Campfire isn’t perfect), bot attacks on public servers or maintaining your own server, teaching people how to use IRC commands.

Campfire can display links to images inline which is perfect for posting pictures from Reddit, but also to discuss designs and wireframes.

And if you allow your team to communicate in a more asynchronous manner, you might be surprised when the amount of trivial emails is reduced and you don’t feel like you need meetings to catch up.

For that I will refer you to Sir Holman of GitHub’s tremendous post on working asynchronously.

Sparrow

Sparrow is the Email app rethought for the Twitter age. Simple, elegant, powerful only when you need it to be. It makes it hard to complain about using email. And most importantly, it’s highly maintained by a great development team.

I know Mail.app has improved drastically (at least visually) for OS X Lion, but appart from some slightly irritating user interface sluggishness when scrolling long list, I have no plans to switch from Sparrow.

(Friendly) Security

1Password

1Password is an amazing app (also available on Windows) which stores complex passwords for all your accounts under one main master password, allowing you to create virtually unbreakable password for every single one of your accounts.

And if a website’s secure database is breached (sure has happened a lot in recent months), you could care less. 1Password generates unique passwords, which means a third-party obtaining your Twitter password doesn’t put any other one of your accounts at risk.

Since you don’t want to open 1Password every time you need to use a password to sign in to a service, it comes with extensions for all major browsers that not only automatically fill the sign in form of any website for you (after prompting you for your master password), but also allows you to generate and save new credentials while remaining in your favorite browser.

Yet this is a chicken/egg conundrum. I store my 1Password database on Dropbox to sync it with the iPhone & iPad versions of the app, which means I can only access my database after having installed Dropbox.

So either make sure you know you Dropbox password by heart, or have another way to remember, like 1Password for iPhone. So you don’t get stuck like this guy.

Operating System Tools

Alfred

Fast as hell, beautiful, enough for me — I never used the crazy advanced features of Quicksilver or Launchbar. If you don’t use Spotlight or one of these apps, you don’t know what a Mac is. I’m not exagerating.

Growl

Growl is something of an industry standard among Mac apps, it’s a very elegant notification system that simply flashes a message in the top right (by default) corner of your screen, and promptly disappears.

Favor Growl over bouncing app icons and other distractions.

Divvy

A fast keyboard-triggered tool to resize application windows on a predefined grid with shortcuts. An absolute must for HTML/CSS design with browser testing and programming with documentation & research.

TinkerTool

A great free app which will allow you to customize a few important parts of your Mac OS X installation like which folder the system should save screenshots and in what format, chose whether or not to display hidden files (useful for developers), etc.

There is a reset button in case you screw up something. If you’re an old Windows user like me, think of it as the wonder that was TweakUI many years ago.

Caffeine

OS X has very good battery preservation features, but sometimes you don’t want that screen to automatically dim after just few seconds when you’re not typing anything or moving the cursor.

Caffeine solves that very simple problem, with one click. And it makes you wonder how so many years later, Apple still hasn’t made that a stock feature.

High Signal-to-Noise Information

Reeder

They say RSS is dying, yet it's still my favorite way — along with Twitter & Hacker News — to stay on top of industry news. Reeder sports and fantastic interface and functionality. No more screen tanning on Google Reader.

JavaScript

Lettering.JS

A fantastic library if you want to excercized minute control over web typography in a very friendly way.

Raphaël

Vector graphics generation through JavaScript to create charts or image crop & resize tools.

DoTimeout

A smart wrapper around JavaScript’s setTimeout, chainable like any good jQuery plugin and which gives you much more granular control over delayed code execution.

DropKick

Visually elegant and cross-browser dropdown <select> elements are a major pain and DropKick takes almost all of it away with a clean API and swappable themes.

FancyBox

Years after its release, FancyBox is still by far the best implementation of the JavaScript “lightbox” out there. Version 1.3.4 is the last version available without a paid license and it’s more than sufficient for most uses.

What seals the deal for me is the beautifully intuitive “elastic” animation which clearly helps users understand the interaction as the full size image seems to expand from the size of the original thumbnail on click. It also offers a very simple way to create galleries out of several thumbnail links by simply adding an identicalrel property. Galleries are then browsable by hitting the left and right arrow keys, a scrollwheel or trackpad or links displayed while hovering on the left or right side of the full size image.

jQuery File Upload

Without a doubt the single best cross-browser uploader available today. And guess what? It doesn’t use Flash at all. Its creator, Sebastian Tschan, has created a fantastic API for the plugin which allows you to control pretty much anything after initializing the plugin. It offers plenty of callbacks for all necessary events (file selection, successful or failed upload, etc.).

On modern browser the plugin also has a few extensions like Load Image which offers thumbnails of selected files prior to upload or a UI version which displays all successfully uploaded files in a table allowing users to delete erroneous uploads before submitting a form.

In case you’re wondering, the plugin uses Iframe transport as a fallback for all versions of IE which don’t support XMLHttpRequest (AJAX).

FlexSlider

If you’re building a responsive website (and you should be), FlexSlider by Tyler Smith is a pre-packaged solution to offer a slider that will adapt to all possible proportions of your website.

It doesn’t cover every possible situation (you can’t make a full-width slider for instance) but it offers a very neat API with plenty of customizable options for a modern slider.

FormatCurrency

Yes, project hosted on Google Code are scary but this seems reasonably well maintained although considering how good it is, it’s a shame it’s not availablle to the mass of contributors on GitHub.

Basically, if you ever need to handle currency within a form, you want to be using this plugin. It will allow you to check and format any user input into proper floating point numbers with the right amoung of decimals. It can format as the user types to avoid mapping problems, for instance it will automatically prepend a dollar sign before an amount if you want to be explicit.

It will also automatically separate groupings (“thousands, hundreds, etc”) with your chosen separator, drop unwanted decimals, round numbers to the nearest decimal place, etc.

qTip2

Speaking of powerful APIs. There a dozens of projects attempting to solve the problem of tooltips around the Web. Some are neat, many are not supported anymore and two of the best ones are now under commercial licenses, making them hard to justify on non-commercial projects.

qTip2 has an extremely extensive and powerful API. I can’t say it’s the most intuitive API but it’s well maintained enough that you can ask its developer – Craig Thompson – for help on GitHub issues and expect a prompt answer.

I don’t think I’ve managed to find one thing qTip2 couldn’t do in 2 months of using it on a project which required a lot of tooltips. But I have to admit I wish it implemented the “hover intent” pattern (as presented masterfully by Doug Neiner) by default.

When you decide to give it a try, remember that tooltips are positioned absolutely and that if the elements triggering the tooltips are floated, you want to be using overflow: hidden on their parent element in order to trigger hasLayout. Otherwise you will wonder why tooltips seem to be shifted up or downward like I originally did.

selectivizr

CSS3 came with a set of extremely useful selectors that made it much easier to target a specific children of an element for instance. It liberated us from having to define a .first and .last class on lists. Except many of those fabulous selectors like nth-child, first-child, or nth-of-type are not supported at all by this sad excuse for a browser we call IE.

Yet, if jQuery can allow us to use these selectors on any browser, why couldn’t we sprinkle some JavaScript magic to do the same with our stylesheets?

Well that’s exactly what selectivizr does. And while it has differing levels of support depending on the JavaScript library you’re using (jQuery, MooTools, dojo, prototype, etc.), it makes the most crucial ones available everywhere.

Ruby

CarrierWave

In my the absolute best library to deal with file uploading in Rails. Better yet, it integrates seamlessly with Fog which allows you to directly upload files to an Amazon S3 bucket.

Bourbon

Since Compass is having serious compiling time issues with Rails 3.1.x at the moment I went with this much lighter gem. It doesn’t provide some of the most crucially useful features of Compass (automatic sprites generation for instance) but it does offer a wide array of cross-browser CSS3 mixins which will make your life a lot easier.