Tutorials and snippets to get started with CoffeeScript [by CatsWhoCode]

Tutorials and snippets to get started with CoffeeScript

Published on January 9th, 2012
by Jean-Baptiste Jung. 0 Comments -

JavaScript is definitely an important part of a website as it allow the developer to interact directly with the web browser. Since 2005, lots of new JavaScript techniques and tools such as Ajax and jQuery became extremely popular and made the web a better place. Today, I’m introducing to you CoffeeScript, a new language that make JavaScript better and simpler.

What is CoffeeScript?

To keep it simple, CoffeeScript is a little language that compiles into JavaScript. If you ever coded in languages such as Python or Ruby, you’ll probably love CoffeeScript a lot. Instead of awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart.

The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

Installing CoffeeScript

Installing CoffeeScript is not hard at all. The first thing to do is to make sure that you already installed a working copy of the latest stable version of Node.js as well as npm, the Node Package Manager.

Once done, you can install CoffeeScript by running the following command:

npm install -g coffee-script

CoffeeScript is now installed. Next step is to compile a
.coffee
file into a
.js
file. Use the following syntax to do so:

coffee --compile example.coffee

CoffeeScript.org is the official website of the CoffeeScript language. Don’t hesitate to visit it, it’s full of helpful ressources.

Tutorial: Basics of CoffeeScript

A great tutorial that demonstrate all you need to get started with CoffeeScript: installation, configuration and first lines of codes.
→ View tutorial

Tutorial: Rocking out with CoffeeScript

A very complete tutorial that will make you a real CoffeeScript coder: it will show you how to write your code, how to indent, how to use classes, conditionnal statements and more.
→ View tutorial

Tutorial: Creating an iOS-like Home Screen with CoffeeScript

Now, let’s code something concrete: this tutorial will show you how to create an iOS-like home screen, using CoffeeScript. A great way to learn by the example.
→ View tutorial

CoffeeScript snippet: Shorten url using Google’s Goo.gl service

Short urls are very useful, especially on social networking sites like Twitter. Want to be able to create your own short urls using Google goo;gl service? No problem, just use the following code. Please note that you’ll need your own Google API key for the code to work.

apikey = "YOUR GOOGLE API KEY GOES HERE"
shorten_url = (url, success_callback, error_callback) ->
xhr = Titanium.Network.createHTTPClient()
  xhr.open "POST", "https://www.googleapis.com/urlshortener/v1/url?key=" + apikey
  xhr.setRequestHeader "Content-type", "application/json"
  xhr.onload = () -> success_callback xhr.status, xhr.responseText
  xhr.onerror = () -> error_callback xhr.status, xhr.responseText
  content =  "{\"longUrl\": \"#{url}\"}"
  xhr.send content
→ Source: http://developer.appcelerator.com/question/125880/…

CoffeScript snippet: Read in a file

CoffeeScript make reading files very easy, as shown below:
fs.readFile 'data.txt', (err, data) -> fileText = data
→ Source: http://ricardo.cc/2011/06/02/10-CoffeeScript-One-Liners-to-Impress-Your-Friends.html

CoffeScript snippet: Fetch and Parse a XML web service

Fetching and parsing XML or .json files from web services is quite common when coding modern web applications. Here is how you can do it using CoffeeScript:
request.get { uri:'path/to/api.json', json: true }, (err, r, body) -> results = body
→ Source: http://ricardo.cc/2011/06/02/10-CoffeeScript-One-Liners-to-Impress-Your-Friends.html

CoffeeScript snippet: Finding substrings

Another very common task, made easier with CoffeeScript:
message = "This is a test string. This has a repeat or two. This might even have a third."
message.indexOf "This", 0
→ Source: http://coffeescriptcookbook.com/chapters/strings/finding-substrings