CoffeeScript Cafe

CoffeeScript tutorials, examples, and news

Coffee Taster: An Easy CoffeeScript Playground

I’ve been meaning to write a series of CoffeeScript examples and tutorials for this blog, but I always get hung up on explaining how to setup a consistent and easy CoffeeScript tutorial environment. So I wrote my own.

Freshly Brewed CoffeeScript Issue #4

News

Articles

  • The Trello Tech Stack Brett Kiefer summarizes Trello’s current tech stack: CoffeeScript, Backbone, HTML5 pushState, Mustache, socket.io and websockets, node.js, HAProxy, Redis, MongoDB.

Presentations

Tutorials

Freshly Brewed CoffeeScript Issue #3

Articles

Presentations

Tutorials

Resources

Code

One More Thing

Freshly Brewed CoffeeScript Issue #2

Weekly News

No CoffeeScript news over the holidays I guess.

Articles

Presentations

Tutorials

Code and Resources

Freshly Brewed CoffeeScript Issue #1

Weekly News

Articles

Tutorials

Code and Resources

  • coffeelint - Sure CoffeeScript brews into lint-checked JavaScript; but have you ever wanted to make sure that your CoffeeScript itself is as clean and well-formed as it could be? CoffeeLint by Matt Perpick could be just what you’re looking for.

  • Rosetta Code CoffeeScript Examples - A great list of example CoffeeScript code for a wide range of programming topics. If you feel like contributing or just want a pointer for a small problem to practice CoffeeScript with, check out their Tasks not implemented in CoffeeScript list and code them up.

  • CoffeeScript Love - A fan blog dedicated to the “little language that compiles into JavaScript”. Another (ahem) good resource for keeping up-to-date with CoffeeScript.

  • Code School - CoffeeScript - Expanding on their excellent JavaScript, jQuery, Rails, HTML, and Ruby tutorials: Code School has added CoffeeScript. I’ve been quite impressed with the presentation and quality of their courses and this looks like no exception.

Op/Ed

  • Writing Eloquent JavaScript Without CoffeeScript - Oscar Godson makes a case for getting some of the syntax benefits of CoffeeScript by being clever about JavaScript syntax.

  • A Case Against Using CoffeeScript - Ryan Florence argues that CoffeeScript isn’t a good idea because it separates the programmed code from the executed code thus increasing the difficulties debugging and maintaining the codebase. A lot of his points depend on subjective arguments, but it and its discussion on Hacker News are well worth a read.

  • Should You Learn CoffeeScript? - An amazing panel discussion by a good group of programmers ranging from CoffeeScript promoters to naysayers. Seriously, both the above Ryan Florence and Oscar Godson are included as well as Jeremy Ashkenas, Brendan Eich, and Trever Burnham. If you are at all interested in CoffeeScript (and I’m betting you are) this is an amazing read.

Freshly Brewed CoffeeScript Issue #0

Hey, Peter Cooper is a smart guy and JavaScript Weekly is exceedingly awesome. Let’s see if CoffeeScript has enough traffic to merit a weekly post of news and links.

Issue #0?

I’ve got a backlog of CoffeeScript links to get out. This issue covers my links older than a week, Issue #1 will be following shortly with the latest in CoffeeScript news, articles, and resources.

Code and Resources

  • CoffeeScript, Meet Backbone.js: A Tutorial - A five part Backbone.js and CoffeeScript tutorial by Adam Spooner. It starts at “Hello, Backbone!” and builds to greater complexity. Its designed to be cloned (or forked) from Github and followed locally, not just read from the site.

  • Do I Have To Use CoffeeScript In Rails? - A joke by Jason Seifer :-)

  • Smooth CoffeeScript - A very, very nice introductory book on CoffeeScript by E. Hoigaard. The book is completely open source and freely available. The site nicely provides a set of links for readability integration. Smooth CoffeeScript attempts to be an evolution of Eloquent JavaScript by Marijn Haverbeke; as such it’s a great introduction to JavaScript/CoffeeScript in general.

  • The Little Book on CoffeeScript - Another completely open source CoffeeScript book by Alex MacCaw. It’s also a great introduction to the basics of the language and a good go-to reference. The “Bad Parts” section is a good overview of CoffeeScript pitfalls to watch out for.

  • CoffeeTags - A simple tool for generating Ctags compatible CoffeeScript tags so you can easily explore CoffeeScript projects in vim.

jQuery Event Binding in CoffeeScript

Let’s say you want to write a small bit of CoffeeScript to do something simple like show an ajax spinner image when the user submits a given form. The powers of jQuery and CoffeeScript combine to give us:

CoffeeScript

Compiled JavaScript

Not too fancy right?

Key things to notice in this example

  • -> starts a new function
  • whitespace delineates the functions
  • no semicolons

View this jQuery binding example on coffeescript.org.

Update: Improved CoffeeScript example from Nihad Abbasov

Nihad Abbasov (Narkoz) shared an improved version of the CoffeeScript binding. The code structure can be chained into a clean line of CoffeeScript and @ can replace this. Very nice!

Setting Up Your Mac OS X CoffeeScript Development Environment

If you want to independently write CoffeeScript (i.e. outside of Rails or another framework that automatically supports CoffeeScript) you’ll need to install a CoffeeScript compiler.

The standard compiler used by the community is the Node.js package “coffee-script”. You can use it to launch an interactive CoffeeScript session or compile CoffeeScript source files to JavaScript. It also provides tools allowing you to dig in and analyze the source code.

Here are the steps to get that up and running on Mac OS X. Sorry Windows and Linux folks, I don’t have tutorials written for those platforms yet. But your steps will essentially be: 1) install Node.js, 2) use npm to install coffee-script.

Step 1: Install Homebrew

Homebrew makes installing compiled from source software super easy on the Mac. Use it.

These official Homebrew installation instructions will get you setup in no time.

Step 2: Install Node.js

This one is super easy, just run the following command after you’ve installed Homebrew.

1

$ brew install node

Step 3: Install npm

1

$ curl http://npmjs.org/install.sh | sh

Step 4: Install coffee-script

1

$ npm -g install coffee-script

The -g flag says to install the package globally. The coffee-script package installs some executable scripts so installing it globally will make running them easier.

After that last command you should now have coffee available as a command. You can test that by running coffee -v:

1
2

$ coffee -v
CoffeeScript version 1.1.3

At this point the official CoffeeScript documentation is well worth a perusal if you haven’t seen it already.

Step 5: Install the TextMate Bundle

You do use TextMate, right? Ok good. Open the terminal and run the following commands.

1
2
3
4

$ mkdir -p ~/Library/Application\ Support/TextMate/Bundles
$ cd ~/Library/Application\ Support/TextMate/Bundles
$ git clone git://github.com/jashkenas/coffee-script-tmbundle CoffeeScript.tmbundle
$ osascript -e 'tell app "TextMate" to reload bundles'

If you get the error coffee: command not found when trying to compile CoffeeScript in TextMate you just need to add “/usr/local/bin” to the TextMate path. Like this:

Step 6: Fix “coffee: command not found” TextMate Bundle error

  1. Open TextMate
  2. TextMate > Preferences
  3. Click the “Advanced” tab
  4. Click “Shell Variables”
  5. Find the “PATH” variable and double click its value
  6. Append :/usr/local/bin

At that point your CoffeeScript bundle should behave. No need for a restart.

Next Time

Alright! You’ve got a local CoffeeScript environment to play with. Go you!

Next post we’ll actually do something with CoffeeScript, and I’ll show you a technique for quickly incorporating CoffeeScript into a development project.

Opening the CoffeeScript Cafe

Hi there and welcome to my new blog on CoffeeScript! My name is Stephen Ball. This blog will be focusing on CoffeeScript and a variety of topics such as:

  • CoffeeScript Basics

  • Transitioning from JavaScript to CoffeeScript

  • CoffeeScript and jQuery

  • CoffeeScript and APIs (e.g. Google Maps)

I want this blog to have something for folks new to CoffeeScript, new to JavaScript, and even new to programming. To do this I’ll be mixing in step-by-step tutorials, clear examples, and best practice essays.

I’m still getting everything setup here, so it might be a couple days before the first (actual) post. Things for dropping in!

Web Analytics