Code Icon

Koala Is Pretty Awesome

Published on

The world of front-end development has changed quite a bit over the past couple years. I mean, when I was in college, I didn’t use a compiler. I didn’t write in my CSS in a pre-processing language like SASS or LESS. Heck, I didn’t even know JavaScript frameworks existed.

Fast forward two years, and I can’t live without a compiler. Writing in plain CSS is almost painful since I’m so used to the luxury of SASS. I would probably smack myself if I didn’t compile and minify my JavaScript. To do both of these things, I need a compiler.

There are a lot of compilers out there; some are command line, some have a GUI. Personally, command line programs can be a little annoying to me. If I can have a GUI program for something, I’ll take it. It’s more visual and almost feels safer. Though…I do feel cool typing in a command prompt with my bright orange text on a black background like some super cool movie hacker.

A screenshot of the Koala website homepage

So what compiler do I use? Enter Koala.

Koala is a great compiler with a GUI that can do quite a bit of stuff for you. Do you want to write in SASS or LESS? Done. Compile and minify your JavaScript? Done. Write in CoffeeScript or Compass? Done. The great thing about the program is that it’s easy and fast.

A screenshot of the Koala program with a SASS file selected

SASS

I like to set up my SASS files with one file called base that houses the variables and mixins, then imports all of the other SASS files. This is pretty standard, I feel like, as this pulls all the files into one. As you can see from the screenshot (top right checkbox), this file will auto compile whenever saved. Not only that, it’ll also compile whenever any of the dependent files are saved. So if I save global.scss, it’ll automatically compile base.scss, which is nice.

Below the auto compile checkbox we have quite a few options: compass mode, source map, line comments, debug info, unix new lines, and autoprefix. The two important ones out of this list are source map and autoprefix. Here I don’t have source maps enabled, but it is a useful feature to help you debug your compiled CSS. Autoprefix is the lifesaver. Instead of having to write that same line of code three times, you can write it once, and let Koala prefix it for you! Awesome!

Lastly, we have a dropdown, which is the output style. If you’re compiling CSS, there is no reason you shouldn’t minify it. That is what the compressed output style does. The outputted CSS file will be completely stripped of comments and white space, saving you precious bandwidth with just a click of a dropdown.

Now this is SASS, I mentioned that Koala can also compile LESS. Pretty much with LESS, ditto on everything I said about SASS.

A screenshot of the Koala program with a JavaScript file selected

JavaScript

There aren’t that many options when you are compiling JavaScript, but that’s okay. When it comes to regular JavaScript, pretty much the only thing you need is for it to auto compile and minify, right? From the screenshot we can see two check-boxes that do just that for us: auto compile and compress. You’ll also notice two more options there. The first is preserving copyright comments, which is useful if you have a local copy of jQuery or a copyrighted plugin. The other says “Harmony (ES6+)”, which will allow you to write in ES6 syntax and have it compiled down, which is pretty cool.

I don’t write in ES6 just yet, so the only thing I need is it to compile and minify. But wait…there is only one JavaScript file, how does it pull in other files like SASS imports?

Well, Koala has a handy comment command that goes like:

“// @koala-prepend ‘some-js-file.js'”

or

“// @koala-append ‘some-js-file.js'”

This does just as it sounds. It tells Koala, when it’s compiling a JavaScript file, to either prepend or append the named file into the current file it is compiling. Due to this, I set up my JavaScript files just like my SASS files. I have a base.js file that pulls in other JavaScript files that then get compiled and compressed into a single file.

With the JavaScript compiler I have found a couple of drawbacks. For one, it is slower than the SASS/LESS compiler, usually compiling in a second or two. That’s not bad, but sometimes if you do a quick refresh, things can get weird. The other, is the compiler does not play nice with Angular. I’ve found myself writing more and more Angular, and because it’s picky about how it gets compiled, it breaks when ran through Koala. It’s kind of a bummer.

Compass/CoffeeScript

Now all that is left is Compass and CoffeeScript. I, personally, don’t write with either of these, but I feel like it’s pretty self explanatory. Compass is essentially a SASS framework that Koala plays nice with, and CoffeeScript is a script language that gets compiled down to good ol’ JavaScript.

In The End

…it doesn’t even matter (just kidding, if you get the reference, I like you).

I use Koala in any and all projects that I work on. Now, the only thing that I feel could give it a run for it’s money, in my production environment, is Gulp. Gulp is a lot more customizable…because you are literally writing JavaScript code to do stuff. However, it’s a bit of a pain to set up and it’s command line. Koala automatically detects new files, and with a couple of clicks you are up and running. Hard to beat that.

So now that you know about the wonders of Koala, go check it out. I’m certain you’ll like it.

One Last Thing

Funny thing…well, kind of a weird thing. Ever since I updated Koala it always pops up when I restart my computer…despite it not being in the startup folder on my computer.

At this point I’m just waiting for it to show a “Notice me, Senpai!” message.