Koala App: A Cross-platform App for Modern Web Development

By . Filed in Web Design

In the days of Netscape and Internet Explorer 6, most web developers only wrote web documents in plain HTML, CSS, and JavaScript. Today, we have plenty of utility tools to write those 3 web languages more efficiently, with LESS, Sass, CoffeeScript and Jade, just to name a few.

We can write codes in these new languages, then compile them in the standard form. The compiler takes place in Terminal, and is done through command lines. Alas, not everyone is comfortable working with command lines. It could be a hassle. Let’s check out Koala App, the application that lets us compile them via a nice GUI.

Getting Started

Koala is a free cross-platform application. So you can use it regardless of your Operating System (OS). It’s available for Windows, OS X, Ubuntu, and other Linux distributions. Download the installer package accordingly; .exe for Windows, .dmg for OSX, .deb for Ubuntu, and .tar.gz for Linux. Follow the installation instructions as per your OS, and launch the application.

Troubleshooting

However, if you are using Ubuntu 13.04 or 13.10, you will probably encounter a problem where the application cannot be launched and run; it just suddenly closes.

To solve the issue, you can do the following:

1. Download Udev library from this page; libudev0_i386 for Ubuntu with 32bit architecture or libudev0_amd64, if you are using Ubuntu 64bit.

2. Launch the .deb package that you have just downloaded. It will open the .deb in Ubuntu Software Center. Click the Install button.

Launch Terminal, and type navigate to /usr/lib directory with this command line:

cd /usr/lib

For Ubuntu 64bit, type the following command instead:

cd /usr/lib64

Lastly, type this command.

sudo ln -s libudev.so.1 libudev.so.0

You should now be able to run Koala App.

Using Koala

At the time of the writing, Koala App supports these languages: LESS, Sass, Compass, and CoffeeScipt. Assuming that you have created a folder containing project files that includs one of the mentioned languages, you can drag and drop the folder into the window application to add it as a “Koala Project”. It will list the supported files as follows:

Project Settings

In the Project Settings, we can customize the file output. Click on the gear icon at the sidebar of the application window. This opens an overlay dialog box, as shown. At the left hand side of the box, you can see a number of menus or panels to customize the application as well as the menu for each language that it supports.

For an example, let’s navigate to the LESS panel. In it, there are a number of options, as follows:

Source Map: Select this option to enable Source Map for easy debugging. When we inspect elements in the Browser, it refers to the generated CSS instead of the original source file. With the Source Map enabled, the Browser will be able to refer to the CSS-Preprocessor file – .sass or .less – as well as the actual line where the CSS is generated.

Line comments: Select it to print the CSS Comments in the output, showing the source line of the generated CSS.

Debug info: Enable this to show errors that occur.

Strict math: If it is enabled, every mathematical operation in LESS must be contained in parentheses to ensure accuracy in the operation output.

Strict units: When this option is enabled, every unit in mathematical operation should be equal. (10em/2px), for example, will return as an error.

Output style: There are two options for the output style: Normal and Compress. During development, it is better to set it to Normal for easier debugging. If you are about to launch the website, set it to Compress to make the output file size smaller.

Per-Project Settings

The previous Settings applies to all registered projects. We can also customize the Settings for per-project basis this way:

Right-click the project folder. Navigate to Project Settings > New Settings.

There are a number of options. Selecting “Default”, “for LESS”, and “for CoffeeScript” creates a project config file, koala-config.json whereas selecting "for Sass" or "for Compass" will create config.rb, the Sass and Compass config file.

These files are saved in the project root directory, and we need to edit them in a code editor to customize the Project Setting. Here is an example if you want to change the LESS output folder.

"mappings": [
	{	
		"src": "build/less",
		"dest": "assets/css"
	}
],

config.rb is a Ruby file to customize Sass and Compass. We’ve already discussed them as well as the configuration in our previous post series: Using Compass In Sass. You can read it to find out aboutconfig.rb in detail.

Final Thought

Koala App is packed with essential features. With it, you don’t need to bother with the hurdles in installing and configuring CSS-Preprocessors and CoffeeScript through command lines. I hope the developer will include more compilers for other languages such as Haml, Jade, and Stylus, and also create GUI for Per-project Setting. But, for those who only work with LESS, Sass and CoffeScript, Koala App is a decent and efficient application.

Author:

Thoriq has been dabbling in Web Design for 5 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.

Advertisement

Comments are closed. Contact Us.