What’s New In Codekit 2

Codekit 2 was released a few weeks ago, and as expected, there are some big changes in this new version. For those of you who’ve just heard of it, Codekit is an application that puts together a number of modern web development tools including Sass, LESS, Jade, Kit, JavaScript mangler (Uglify.js), and JavaScript linters (JSLint and JSHint).

With the refreshing new user interface design and new icon, Codekit 2 also brings a bunch of new features under the hood. We’ve got our hands on it, and will show you how Codekit 2 can benefit your web development process, making it more efficient. Let’s check it out.

Built-in Server

Codekit is able to automatically reload the page on the browser; so as soon as you make a change within your project files, you will immediately see the result, giving you the experience of live editing.

But there is one problem in Codekit 1 that I had always encountered. If you do not configure the settings properly, you could end up making Codekit refresh the page, including other pages that are not part of your project.

This disrupts other activities you have running on other pages, because Codekit refreshed all opened pages.

In version 2, Codekit solves this by introducing a built-in server. When you launch it, you will notice a green light at the top right of the application window, showing that the server is “on”. Click on it, and you will see the server information such as: the Port number, and the address to access your project through the server.

You can use the address to access your project on any device within the same network. There are two given address formats; one with a nice name, and one with your network IP address format, which you can use in devices (most likely Android) that do not support Bonjour.

So, you now have to serve your pages within the browser through this address, like so.

Tip: Change the Address

The nice-name-address format is derived from your computer name. So, if your computer name is “John Doe’s Macbook”, you will likely get a long address in return, something like http://john-doe-macbook.local:5757. To change it, go to OSX System Preference > Sharing, then change the Computer Name to something shorter.

Bower Components

The second feature that we’re going to take a look at is the Bower Component. Bower is a package manager for web development — it is similar to Homebrew for OSX package manager. There are a bunch of packages that you can find through the Bower registry including Bootstrap, jQuery, and Normalize.css.

In Codekit 2, you can now install Bower packages directly through it. Go to the Assets menu (positioned at the left side of Server menu). The Codekit author has listed a few selected packages under the Favorites tab.

The complete list can be found under the Components tab, and all installed components will go in the Installed Tab.

This would be very useful to start off a new project. If you need Normalize.css for example, you can install it through Codekit, then import it using the @import rule from your stylesheets, like so.

@import (inline) "bower_components/normalize-css/normalize.css";

If a new version is available for it, you can simply update it through Codekit too, like so.

Zurb Foundation Project

Foundation is one of the more popular responsive frameworks, making it sort of a contender for Bootstrap. In Codekit 1, you can easily setup a Compass project with a few clicks, but setting up a Foundation project could be a bit of hassle, as it uses customized Sass/Compass binary.

In version 2, it is simplified. You can just go to File > New Zurb Foundation Project and you are all set.

Final Thought

These new features make Codekit 2 a superior application for web development, and Codekit 1 now seems outdated by comparison. Note that Codekit is an OSX-only app.

If you are running on a Windows machine, you can try Prepros, which also offers similar functionalities (minus the Kit language support, I think). Alternatively, you can also try GruntJS, Prepros or Koala so long as they get the job done.