Top 3 CoffeeScript Tools to Assist a Web Developer

CoffeeScript is an increasingly popular language amongst web development circles. I use the language every day in my development project and I know other web developers do the same.

Today, for our web developer readers, I am going to share three very useful CoffeeScript tools:


1. Coffee Chrome Extension for Google Chrome

As amazing as CoffeeScript is, browsers currently do not support it. This is why you will need a few tools handy that let you quickly convert your CoffeeScript code into JavaScript. For Google Chrome users, a browser extension called “Coffee” does this job well.

Top 3 CoffeeScript Tools to Assist a Web Developer 1

Coffee is an excellent browser extension for the Google Chrome web browser. The function of this tool is to provide users with a quick CoffeeScript to JavaScript code conversion tool. Once you install the extension, its shortcut is added to Chrome’s new tab page. Clicking on the icon opens up Coffee’s interface. The interfaces comprises of two panels – the left panel is for CoffeeScript and the right panel is for JavaScript. You can type in (or paste in) your CoffeeScript code in the left panel and see it converted to JavaScript in the right panel in real time.

But code conversion is not where Coffee’s features end – the tool lets you execute the code as well. You can use the JavaScript console to view the output of your code (if there is any console output). This helps you quickly debug your CoffeeScript.

For developers whose default browser is Chrome, Coffee will be a nice little addition to their browser extensions collection.

RELATED: A Cloud Based Clipboard Quickly Syncs Between Different Devices

You can get Coffee from over here.


2. JS2Coffee

While Coffee is a handy tool, there are certain features that one wishes it had. For starters, I would love for Coffee to be able to support a two way conversion i.e. CoffeeScript to JavaScript and the other way around. But for such two way conversion, I have to head on over to JS2Coffee.

Top 3 CoffeeScript Tools to Assist a Web Developer 2

JS2Coffee is a free to use web application that I regularly use. The application offers two sections in different tabs. The first tab is for JavaScript to CoffeeScript code conversion whereas the second tab converts the CoffeeScript code to JavaScript. Two panels are offered here as well. The left panel is where your code goes and the right panel is where the real time generated code appears. To use the code, simply copy it and paste it into your projects.

The one advantage that Coffee has over JS2Coffee however, is the app’s ability to directly execute the CoffeeScript you type. With JS2Coffee, the process involves two additional steps: you have to copy the generated JavaScript code and then paste it manually into the JavaScript console.

Nonetheless, nothing beats the two way conversion that JS2Coffee offers.

To start using JS2Coffee, click here.


3. CoffeeReplConsole

CoffeeReplConsole is the second Chrome tool on this list. What it offers is something all CoffeeScript programmers have been wishing for – support for CoffeeScript in the web browser’s JavaScript console. The app comes as a browser extension for Chrome. After its installation, you will find a new tab under the Chrome’s Developer Tools. This tab is labeled ‘CoffeeRepl’.

RELATED:  How to Run Google Chrome on Windows 7 64 bit Version

Top 3 CoffeeScript Tools to Assist a Web Developer 3

When you click on the tab, you can begin typing your CoffeeScript code and having its executed. The tab has full access to the webpage elements. You can easily type in whatever CoffeeScript code you need to execute and have it processed right away.

In addition to this very useful features set, the app supports “tab completion” i.e. pressing the Tab key in the middle of typing something automatically completes what you are typing. For instance, pressing the Tab key after typing “Str” will complete it to “String”.

You can get CoffeeReplConsole from over here.

And there you have it! Three CoffeeScript tools that will ease the life of a web developer!



Share this post

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.