There have been a number of tools and services to help make web development more efficient over the years, with CSS extensions such as Compass, LESS and SASS, that turn stylesheets into faux-programming languages, complete with variables. In addition to that, mobile is now the most popular way of accessing the internet, so it’s crucial to make website code and scripts as compact and efficient as possible.
CodeKit, by Incident 57, describes itself as “steroids for web developers” and, after using it for some time, I wholeheartedly agree.
What CodeKit Is For
CodeKit isn’t your run-of-the-mill web development app. It isn’t a code or text editor, instead it’s a companion app that serves as a background tool for projects you’re working on. It monitors projects that you’re working on, constantly checking to see if any code needs to be compiled.
Tools such as CSS pre-compilers are becoming ever more popular, especially when wanting to design pixel-perfect websites. If you’re unfamiliar with what these are, effectively it introduces features such as variables into CSS, something that the language was never designed to do. With a CSS pre-compiler, you simply specify a variable and assign it a value, such as a colour, then use the variable wherever you would have used it. Now, you only need to change just one line of code for the entire site’s colour scheme to change.
But since CSS was never designed to do this in the first place, we have to rely upon a specific tool to monitor our stylesheets and convert them into a format that can be understood — they need to be compiled, and this is where CodeKit comes in.
Work Smart, Not Hard
The app features a dizzying array of different functions, so much so that almost any web developer would find it useful. Don’t be fooled into thinking that using this app will somehow make you a better coder, CodeKit expects you to have at least some working knowledge of how its supported languages work. Without this knowledge, CodeKit is not an app you can learn.
Certain frameworks and projects might need to use their own compilers and CodeKit allows for the use of alternative ones, rather than its own, right from the settings.
Adding projects is easy and you can choose between either a folder or framework, or a Compass project. CodeKit will automatically detect the required Compass settings if you’re adding an existing project so that your project continues as normal.
CodeKit understands that not all projects are alike and, while there are app-wide settings, each project can be individually controlled with custom settings. Speaking of settings, CodeKit includes a heck of a lot of configuration options and settings for you to specify for each language it supports, as well as general app settings.
Even for a Compass novice such as myself, creating new Compass projects was easy and even adding existing ones took no time at all. CodeKit will automatically recompile your project as soon as a change is detected, or at a regular interval, even providing a Growl notification as soon as it is complete — as well as logging any changes.
Compress and Minify
On top of the compression features, CodeKit also offers full syntax checking for many languages to ensure the code you’re writing works right the way through development.
In keeping with the rest of the app, CodeKit includes a image compressor to reduce image size on images within your project. There aren’t any customisable settings for image compression like there is with apps such as ImageOptim, but you’ll find it more than adequate. As a staunch user of ImageOptim, I use it less and less for web development simply because I can just process the whole lot through CodeKit.
Since using CodeKit within my own web development workflow, it has become completely indispensable and is an app that I couldn’t do without. While some of its features are not as straightforward as I’d like, its support for a variety of different languages, ability to customise settings app-wide or project-specific, as well as various compression and syntax checking functions make it the ideal tool for any Mac web developer to own.