CodeKit 2: My Front-end BFF

I was late to the preprocessor party, but now that I’m a daily Sass user I’m slowly exploring a myriad of other front-end development tools. In many ways adopting a preprocessor workflow proved a game-changer for me, but like most things there’s always room for improved efficiency, and for me that came in the form of an app named CodeKit.

Its Reason for Being

Essentially CodeKit provides a unified interface from which you “watch” projects that may use any of a dizzying array of development frameworks and languages such as Sass, Compass, Bourbon, Haml, Kit, Stylus, LESS and many, many more. It automates the compiling of numerous languages and installation of hundreds of frameworks, all of which allow you to work more efficiently with CSS, HTML and javascript, and frees you from having to use the Terminal which is often why people don’t try these tools in the first place. Hell, it even optimizes images. In short, once set-up to watch a project it will do all the heavy-lifting for you each time you save a file. It just doesn’t get any simpler, people.

Noteworthy Features

• Multi-lingual compiler e.g. Sass, LESS etc.
• Optimize/minify/compress
• Check syntax/validate
• Concatenate
• Autoprefixer
• Generate source maps
• Install 3rd Party components via Bower
• Built-in automatic browser-refreshing (for previewing)

…and a lot more.

A Few Rough Spots

Depending how you setup your project some features may not be available, though to be fair most of this comes down to incompatibilities beyond the scope of CodeKit. One example is libsass, a screaming fast alternative Sass compiler which at the time of writing was not compatible with the Compass framework, though I believe that has changed. There are a few of these small nits and while annoying none are deal-breakers.

One area I have had issues with is the Bower component installer. I frequently have installation problems and even Brian, CodeKit’s developer, has said it’s been a pain to get it working smoothly (apparently he considered ditching it completely). The most recent update seems to have addressed some of the problems but I suspect there’s a lot more work to be done.

An Essential Tool

CodeKit is as close to a no-brainer recommendation I have found for anyone who works with front-end code. If you’ve been dragging your feet because you don’t want the hassle of the command-line then you're out of excuses. CodeKit performs so many performance-enhancing functions with minimal effort on your part, you can’t help but be more efficient. It truly is set and forget. It's easily my current favorite app for web development simply because it automates so much without ever feeling bloated. This thing is a treasure trove of usefulness. Of course there are other similar tools, Prepros probably being the next best, but none offer the refinement of CodeKit. For the moment it's in a class by itself.

Make developer Bryan Jones happy and just buy the damn thing already. And tell him I sent you.