Tutorials and snippets to get started with CoffeeScript [by CatsWhoCode]
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