Blog: Tech

My toolbox: CodeKit

Published

CodeKit is such a handy inclusion in my toolbox. It's always running on my Mac, and seamlessly takes care of the little things. But with hundreds of working minutes in a day, lots of little things add up, so CodeKit is such an affordable timesaver.

And I think I'm only using a fraction of its power.

The most-used feature for me is the CSS and JS compilation.

For each project, CodeKit allows me to configure the files to watch for changes, and then run actions.

So for my LESS or SCSS files, on change, I have CodeKit compile them, minify them, as well as run the Autoprefixer for the vendor-specific prefixes.

But how does that help me?

Well, I edit the LESS/SCSS file, hit my Save keyboard shortcut, and CodeKit does its thing - I can switch to my browser and see the new CSS. CodeKit saves me having to manually hit a compile button - which is so handy when you're tweaking one line of code - Cmd+S, Cmd+Tab, Cmd+R and the change is there. Easy.

CodeKit even knows to listen for changes to any imported files. So I may have 1 SCSS file being watched, but if any of the files that SCSS file imports get changed, CodeKit will re-compile for me.

In the JS side of things, there are super helpful @codekit-prepend and @codekit-append includes that pull in other scripts. This allows me to create a single JS file for a site, and help reduce the number of HTTP requests a site might make. If I'm using a number of different JS elements, this can be really helpful at keeping logic in different files, but only having a single file put out on to production.

During compilation of either CSS or JS, CodeKit also alerts me of issues. Maybe I'm missing a variable declaration in SCSS - CodeKit tells me. Means less time searching for errors.

On the automation side, Hooks have been really handy too. My default CodeKit project settings have a Hook that looks for changes to .handlebars files - although not sure how much longer I will use handlebars for projects. We'll see.

For me, CodeKit just does its thing - does it reliably - and is backed by an attentive developer who knows his stuff, helps resolve issues, and, in my view, prides himself on making quality software.

If you want to find out more, check out the CodeKit site: https://codekitapp.com/

Blog

View all
JS

TinyMCE 5: Creating an Autocomplete Plugin

I had a great time last week hanging out with the Tiny team in Brisbane for their Product Week, seeing what the team are up to (and experimenting with during their...

Continue reading...

JS

Bulma, Vue and Webpack: oh my!

I’m working on a new project. Well, actually, no, it’s the rebuild of an old project. Written for PHP4/5 old. And yet, because I rock, still runs on PHP7. But…...

Continue reading...

Music

Why

While collating tracks for a 138 bpm mix, I found that not only was there so much great music out there, but I had enough for different "feels" of 138 bpm. This...

Continue reading...

JS

TinyMCE 5: Creating a custom Dialog Plugin (and with Custom Button Icons)

Edited: February 6, 2019. The included code also works with the TinyMCE 5 Stable release. I’ve been using TinyMCE for years – I think if I look back in my...

Continue reading...

I am the Development Director (and co-owner) at Mity Digital, a Melbourne-based digital agency specialising in responsive web design, custom web development and graphic design.
Mity Digital