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.
CodeKit supports a variety of languages and pre-compilers that are all designed to streamline your workflow.
There’s Compass, SASS, LESS and CoffeeScript compilers, image compressor, Javascript minifiers and more. CodeKit supports a vast number of popular development languages when it comes to markup or styling. The app does all the compiling and processing itself, providing an all-in-one utility without having to keep Terminal windows open and commands running to watch folders for changes.
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.
Projects
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.
Should you need some specific project settings, CodeKit allows you to override default app settings on a per-project basis.
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.
A full log output of any changes detected, including errors, is provided.
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
Even if you’re not taking advantage of any pre-compilers, CodeKit still offers a whole range of other tools. Javascript files can often be the largest files that a website serves, so CodeKit provides a number of ways to compress the files and reduce the file size as much as possible.
Full support for Javascript compression and syntax checking, as well as combining into single Javascript files, is included within CodeKit.
One of the best practices when it comes to web development is keeping the number of stylesheets and script files to as small a number as possible, though the downside of this is that you often find all of your code gets rather overwhelming. CodeKit lets you continue working with separate files but includes the option to import Javascript files into one another, providing an outputted file that becomes the sum of all the files you’ve chosen. From a development point of view, you can continue working with all of your various scripts that organised separately, but CodeKit will always output a unified, compressed Javascript file that your project can refer to.
It isn’t immediately obvious how to do this, however, as you need to select a Javascript file first and CodeKit will then display an option to import another file, which you then select and drag. While it isn’t totally unintuitive, it does take some getting used to since you can’t just drag files on top of each other.
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.
Image Compression
Image compression works wonderfully, though there are no options to control this.
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.
Wrapping Up
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.
     |