Increase your productivity when developing for the web - get to know CodeKit

Increase your productivity when developing for the web – get to know CodeKit

per Anderson Pereira

As the saying goes, time is money (time money). This is one of those tips that worth gold! Seeking a solution of refresh Automatic between my favorite HTML editor Sublime Text and all the browsers installed on my machine, I discovered a tool that is a real hand on the wheel.

Created by Incident 57 developer Bryan Jones (@bdkjones), CodeKit it increases your productivity incredibly when creating pages / applications for the web. It is a powerful file manager that monitors files that make up your web project (HTML, CSS, PHP, JavaScript, images, etc.) and manages them intelligently.


It just works

Abusing the simplicity and intuitiveness of OS X, to create a project in CodeKit just drag the folder of your web project into the main window of the app and ready!

Without touching any file in your project, CodeKit automatically creates a virtual server that can be accessed through a web address (eg: http: // localhost) and makes it available across your Wi-Fi network, via Bonjour.

To the devices not compatible with Bonjour (smartphones with Android, Windows Phone, Linux, etc.), CodeKit generates an IP address so that your entire project is within reach of any device including that old micro, with Windows XP, which is only used for test sites in Internet Explorer (whoever develops for the web knows what I'm talking about).


Through this virtual server it is possible to view any changes made to your files in real time. incredible! You can use any HTML editor, including the Text Editor (TextEdit) native to OS X. Write or update your code, save it, and then see your project updated on all your devices. the real end of the shortcut Command + R.

Much more than that

In addition to refresh automatic, CodeKit incorporates essential tools for web development. Imagine the possibility of optimizing the size of all images in your project, including Retina graphics, with a simple click? Well, CodeKit does that too.

CodeKit also has integrated compilers for codes written in Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown and checks the syntax of programming in JavaScript files, suggesting changes when your code has errors.


The app also manages dependencies, such as Bootstrap, jQuery, Modernizr, WordPress and another 6,000 packages available in its base. In a single click it is possible to search, update, install and uninstall these dependencies.

Developers who use applications to compress the source code (remove tabs, line breaks and spaces) can also rely on CodeKit. The app keeps the original file intact, generating two versions of it (one compressed and one original). It is even possible to merge several JavaScript files in one, reducing the time and number of HTTP requests.


Learning how to use CodeKit is easy. As the product website itself says: Video tutorials for people who don't like to read. Everything is very easy in this incredible application.

A Mac App for Cool People

A Mac app for fun people! Based on this principle, the official CodeKit page makes a joke with fictional testimonials about your app involving Apple / ex-Apple employees and well-known figures in the world of Apple:


Final considerations

CodeKit is a paid application exclusively for Macs, which can be tested for free on its version trial for a period of ten days. The app weighs 46.3MB and costs only $ 30, and is marketed on its own website.

We leave below a video explaining the basic functionality of how CodeKit works:

Good productivity to all of the MacMagazine and see you next time!