Codekit, slayer of dragons?

Introduction

Reviews are a funny thing when it comes to full production utilities for coding, they aren’t common and usually exist in the blogosphere. There’s plenty of reasons why, knowledge, scope-of-testing, time and so forth. So to contribute my part, I’ve written a review of Codekit, which I’ve been using as part of my work flow for two+ weeks.

With the rapid development of LESS/SCSS and Front End Developers, User-Interface Designers/User-Interface Engineers, Web Designers, the like are suddenly have yet-another-technology-to-master. LESS and SASS for the uninitiated are pre-processing languages for CSS. Simply put, these are languages that extend the functionality of CSS with variables, mixins, imports, inheritance, operators and other goodies. I’m not here to profess all the features of these languages, but if you’re new to these, I suggest you take a look as for large projects, it can bring sanity. That said, both LESS and SASS need to be compiled to CSS before it can be interpreted by a browser. LESS has the ability to use a JS plugin to compile LESS into CSS in a browser which has alleviated but it isn’t a sure-fire fix. SASS requires compiling through a utility.

Javascript can become even more heady, even the chore of minification can be a headache, let alone uglification and other space saving techniques. To help with some of the issues, JSHint and JSlint have worked wonders to find that one bad comma or random char. It becomes a struggle to do all these while developing.

So without doing chores manually, we’ve seen the the evolution of utilities like Grunt.Js. Grunt.js uses Node.js (which starts to get out-of-scope) to create rules for combining multiple types of actions: preprocessor compiling, minification, JShint/JsLint and all the aforementioned. Grunt can even watch files and recompile when it detects a file change. That said, it requires setting up, which can be sometimes cumbersome and its inefficient. Compiling can take more than just mere seconds on large projects. While working on a telecom-mega-corp’s website, I found myself waiting roughly 20-30 seconds to to compile (On Core i7 2012 Retina MacBook Pro), to make matters worse, it’d routinely error out which then meant having to command line grunt every time I wanted to recompile to see my SCSS changes as CSS.

You probably guessed it by now: The savior

For those familiar with Grunt.js, it does most everything grunt.js does, and then some, for the rest of you, it does everything I just wrote about, but faster and without a command terminal but that isn’t even the best part. Codekit will reload your active tab in Google Chrome or Safari if it detects a change to an HTML/PHP/whatever in your active directory, much akin to LiveReload. That is isn’t even the best part. CSS/SASS changes are injected live, there’s no wait for a page reload, and the changes are animated.

Also as a bonus, Codekit does lossless image optimization, much akin to ImageOptim. However its image optimization, while fast, doesn’t seem to be nearly as effective as ImageOptim. Worse while working on large banking website, I ran the image optimization. None of the assets appeared to have changed as Tower (my Git GUI) didn’t detect the changes. When I ran the Image Optim, one-by-one Tower detected the modified files.

I’ll be interested to see if this is a reoccurring issue with the utility.

Codekit actively monitors multiple projects

The GUI allows you to ignore files, and set destinations of files, install Compass or Bourbon. The GUI is straightforward, and doesn’t have a lot of depth, that said it doesn’t need it. Most of the time when using Codekit, you’ll be running it in the background. In fact, most of the time, you won’t even be looking at Codekit. Occasionally on a bad compile, Codekit will leap to the front of the screen.

Codekit leaps to the front on bad complies with error messaging

I’ve used it for several projects ranging from a Wordpress site with a theme styled with LESS, a groundwork SCSS built site with PHP to illustrate behavior of user interface, to currently, building out a style guide for a soon to be phonegap built Android app. I’ve used it with both Coda and Sublime Text.

With a little finanggling, I’ve gotten to CodeKit to work with most projects. Codekit is quicker than grunt.js and more reliable, and best of all works with Grunt.js projects.

I can’t say too much negative, I was able to get Codekit to work with a stubborn compass SCSS project, despite it compiling fine with grunt. I’ve hit the brick wall limit of watched files, which is an OS X limitation. Strange, unchecking watched projects doesn’t truly stop watching, meaning I have to manually remove the project from CodeKit.