Ask almost any web developer: a strong suite of development apps and plugins is central to our productivity. However, finding the right apps can be a frustrating experience because of the app selection has grown dramatically over the past year thanks to the Mac App Store, as well as the spread of GitHub and app news resources like Hacker News, Dribbble and Twitter.
To cut through the clutter, I thought it would be helpful to go over the most important tools to my daily web development workflow. Note that app usage stems from personal, idiosyncratic decisions; what works for me may not work for everyone else. Yet this is a solid toolbox and if you’re at all considering trying something new, consider an option from the list below.
A good text editor is arguably the most important app in a web developer’s toolkit; you’re only as good as your code, and you code in a text editor. I was a die hard TextMate fan for years, but TextMate’s development has reached a dead end. I had to look at alternative options, and while I toyed around with Espresso and BBEdit, Sublime Text 2 emerged as a clear choice. I love the editor’s speed, even with huge directories open, the TextMate-like Cmd+P fuzzy file search and the multiple selection mode. It also has full compatibility with TextMate bundles and themes which made the transition away from TextMate seamless.
Emmet – version 2.0 of the popular web developer plugin Zen Coding – is a revelation. I was admittedly bearish on the initial Zen Coding plugins; something about the syntax never clicked with me. But Emmet is different. It’s faster and far more refined than older Zen Coding tools. With the plugin’s HTML snippets and slick CSS resolver, I can code most HTML and CSS much faster. Even if you’ve been dissuaded by some Zen Coding quirks in the past, give Emmet a try over the course of a coding day; most developers should see a difference after just a few hours of use.
Any web developer who also designs or works off design comps has to frequently deal with alignment and size issues among images and HTML elements. I’ve seen coworkers try ad hoc measurements by using the top edge of an app window to measure alignment, or taking an actual ruler against the screen to compare the relative size of two elements. Don’t do this; there are far more accurate and faster dedicated measurement apps out there.
The most popular pixel measurement tool is inarguably IconFactory’s xScope. It’s an excellent app, but its separate mini tools never meshed well with my personal workflow. Instead I prefer Snap Ruler, an app that only focuses on tools I use heavily: a loupe and an on screen ruler. You can size elements and export CSS code in three clicks. It’s fast, lightweight and has solid keyboard shortcut support.
I bought ScreenFloat on a lark. It was on sale for $2 and I needed something simple to float a web page. Little did I know at the time how awesome this app is for web development. I use ScreenFloat almost exclusively for floating Photoshop comps and wireframes on top of the web browser as I write code. ScreenFloat’s secret weapon is its adjustable transparency; I combine mouse wheel movement to adjust comp transparency along with a global keyboard command to hide or show the comp entirely. These quick shortcuts allow me to focus on just the code instead of fiddling with the comp itself. Overall, the app greatly increases my development speed and accuracy, especially with high precision “pixel perfect” comps.
If you work with CSS, you need accurate, consistent hex colors in code to match your ideas and graphical comps. It’s true that you can generate hex colors via screenshots and the Photoshop eyedropper. Yet this workflow requires a lot of unnecessary clicks and Photoshop is a heavy app to keep open for just this purpose. Instead, get a dedicated hex color picker; there are many good ones on the App Store, but I like ColorSnapper the most. It couldn’t be easier to use: I click on an onscreen color with the app and a corresponding hex color gets pasted to my clipboard. It’s also retina display friendly and I can easily switch the code color format from hex to other popular options (e.g. rgb).
If you do any sort of file comparisons you owe it to yourself to try out Kaleidoscope. The app was originally developed by (the now Facebook owned) Sofa but is updated and maintained by Black Pixel. These are two crack design and development shops and the pedigree shows. There are many other file comparison apps out there, but I find none have the level of polish that Kaleidoscope has. I use it every day as a simple Git diff tool before my code checkins or rebases.
http://www.kaleidoscopeapp.com
Over the course of a full day of coding, the Refresh button on a web browser can turn into an annoying time sink. You’re constantly saving work, switching over to the web browser and tapping refresh to get your web content up to date. LiveReload takes that action out of your hands: HTML changes auto-reload the page when you save while CSS changes take their effect instantly, no reload necessary. It also can auto-compile pre-processor code like SASS and LESS automatically in the background. Note CodeKit tends to be the more popular auto-refresh app choice with its cleaner UI and extra customization options, but I found LiveReload to be a slightly faster experience overall.
Alfred is a bit of a cheat falling on this list given it isn’t really a web targeted app. Yet it’s such a productivity booster that I can’t imagine my Mac without it. Alfred is a keyboard ‘launcher’ app: hit a keyboard shortcut and a text box pops up where you can quickly launch applications, run shortcuts, search the web and much more. The Verge ran a great introduction to the app last month if you want more of a primer before diving in.