CodeKit, A Front End Development Timesaver

CodeKit - Front End Development Tool

We do a lot of HTML/CSS prototyping and front-end development on the UX team. We are always looking for ways to save time and simplify our process and a new tool, CodeKit, has been a great asset. CodeKit is a front end development tool that helps streamline your workflow and has the potential to be a huge time saver. It has a number of features which might seem insignificant or easily completed with other tools, but CodeKit brings everything together in a simple application. Just add your project and you are ready to go.

CodeKit Front End Development Tool

First, it is a compiler and can handle basically every language currently in use from css preprocessors (Less, Sass), to JavaScript (Jade, CoffeeScript), to markup (HAML). It compiles all of these on save and provides error reporting and other warnings to help with debugging.

Secondly, it makes it easy to optimize all of your files. It has a built in image optimizer that can reduce the file size of all of your images at the click of a button. It also can minify CSS and minify and combine JS files to ensure you are including the smallest number of files at the most compact size.

Finally, it has an auto-refresh feature for both Chrome and Safari. This refreshes your browser window on save so if you use two monitors or a split screen development environment, you can see your changes without the need to switch to the browser to refresh.

Before I started using CodeKit I was skeptical. I essentially had all of these features through a combination of other software and scripts. I didn’t think it was really worth the $25 pricetag to bring them all together. I was wrong. Now I don’t need to worry if I have the latest version of any particular software and only need to interact with one tool rather than several. The auto refresh feature alone has saved me a tremendous amount of time. Everything is dead simple and “just works” as the author claims- it’s really worth checking out.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>