CoffeeScript Cafe

Coffee Taster: an easy CoffeeScript playground

2012-02-15T21:18:00-05:00

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.

Coffee Taster is a small project to serve as an easy to install, easy to use CoffeeScript playground. You just clone the project, bundle install, open index.html in a browser, rake watch, and then code CoffeeScript.

It’s great because it means that I’ll be able to code my CoffeeScript tutorials and examples against a known environment we can all use.

Feedback would be awesome, let me know how it works for you.

Freshly Brewed CoffeeScript Issue #4

2012-01-25T12:39:17-05:00

News

The CoffeeScript Daily Keep up with the very latest in CoffeeScript news via this great link aggregator.

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

Better JS with CoffeeScript - Sam Stephenson (37signals) Sam Stephenson relates how CoffeeScript results in faster, cleaner JavaScript. He gets into the why of CoffeeScript, benefits of the language, list comprehensions, classes and inheritance, bound functions, command line usage, and more.
Shreyank Gupta’s notes from a CoffeeScript presentation Gupta’s notes are a nice, quick summary of a lot of CoffeeScript niceties.

Tutorials

Introduction to CoffeeScript (+Useful Tutorials) A nice collection of CoffeeScript tutorials.

Freshly Brewed CoffeeScript Issue #3

2012-01-17T09:00:06-05:00

Articles

Understanding CoffeeScript Comprehensions If you have a ruby background and are coming to CoffeeScript then comprehensions are probably pretty foreign looking bits of syntax. Karl Seguin takes us through the basics.

Presentations

CoffeeScript, the Rise of “Build Your Own JavaScript” Jeremy Ashkenas (the developer of CoffeeScript) introduces CoffeeScript, the reasoning behind its development, and takes us through some of the language features. The presentation is for a general audience and would be a great link if you need to introduce someone to CoffeeScript.

Tutorials

Blog Rolling with MongoDB, Node.js and Coffeescript James Carr takes us through a step-by-step tutorial to build a blog using some of our favorite technologies. James also includes BDD using mocha. Nice!
Writing jQuery plugins using CoffeeScript A quick tutorial that shows us how easy it is to write a jQuery plugin using CoffeeScript.

Resources

Interactive Smooth CoffeeScript It’s the book Smooth CoffeeScript but with all the code sections as interactive widgets! If you are learning CoffeeScript this is well worth reading/playing. Here’s the chapter on functions. See that yellow box with the function example code in it? Yeah, you can edit that and see the results live. Super cool.
CoffeeScriptLineMatcher youtube demonstration Steve Howell show us how to use CoffeeScriptLineMatcher (see below).
Tutorials and snippets to get started with CoffeeScript Jean-Baptiste Jung has collected a bunch of handy CoffeeScript tutorials into this post. If you want to branch our your CoffeeScript then head here and pick something cool.

Code

CoffeeScriptLineMatcher A really great tool by Steve Howell that matches up CoffeeScript lines with those of the generated JavaScript. Really handy for debugging or just for learning more about how CoffeeScript transpiles. Be sure to check out Steve’s youtube demonstration if you want a quick introduction.
coffee-script-pure A CoffeeScript compiler in pure Ruby.

One More Thing

An amazing pull request rewriting Node.js in CoffeeScript Which may, in fact, be entirely too much awesome.

Freshly Brewed CoffeeScript Issue #2

2012-01-04T13:55:36-05:00

Weekly News

No CoffeeScript news over the holidays I guess.

Articles

Separating Concerns in CoffeeScript using Aspect-Oriented Programming - How to implement aspect oriented programming in CoffeeScript to get DRY code by Reg Braithwaite.
The Problem with Implicit Scoping in CoffeeScript - An article by Armin Ronacher describing a fundamental problem he sees with global variable scoping in CoffeeScript.

Presentations

Parleys.com - HTML5 with Play/Scala, CoffeeScript and Jade - A presentation on using HTML5, the Play Framework, Scala, CoffeeScript, and Jade to build web applications by Matt Raible.

Tutorials

Implementing Minecraft in WebGL (and CoffeeScript) - An article on how to implement basic features of Minecraft using WebGL and CoffeeScript by Daniel Ribeiro. Very cool!
Coffeescript for Python programmers - Shabda Raaj takes us through some simple CoffeeScript/Python syntax examples. It’s great to see just how little changes between the two languages.

Code and Resources

CoffeeScript Cookbook - A CoffeeScript community sourced book by a bunch of CoffeeScript developers. From the basics of strings and arrays to jQuery, databases, and metaprogramming: the CoffeeScript Cookbook has plenty to offer and is a great resource.
Tame - A huge pull-request into CoffeeScript on GitHub by Maxwell Krohn to add “await” and “defer” statements into CoffeeScript. Good-Bye callback hell?
Collated CoffeeScript examples from Rosetta Code - CoffeeScript examples from RosettaCode formatted into a single page by Steve Howell. A great resource for digging through lots of examples.
times - A ruby-like times operator for CoffeeScript by Veselin Todorov.

Freshly Brewed CoffeeScript Issue #1

2011-12-21T09:00:08-05:00

Weekly News

CoffeeScript 1.2.0 released - That link shows all the git commits from 1.1.3 to 1.2.0 (oldest first). You can also checkout the official CoffeeScript changelog.

Articles

Making Macros in CoffeeScript - An interesting experiment by David Padbury testing if it’s possible to easily alter CoffeeScript code before it’s compiled.
CoffeeScript is for Closers - Brandon Satrom gives us a great presentation on the why of CoffeeScript and how to get started using it.

Tutorials

Creating an iOS-like Home Screen with CoffeeScript - A nice and complete tutorial detailing how to replicate an iOS “home screen” using CoffeeScript, jQuery, and the Touchable jQuery plugin.

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

2011-12-16T12:54:48-05:00

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

2011-12-14T20:01:58-05:00

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

2011-12-06T12:39:38-05:00

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.

$ brew install node

Step 3: Install npm

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

Step 4: Install coffee-script

$ 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:

$ 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.

$ 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

Open TextMate
TextMate > Preferences
Click the “Advanced” tab
Click “Shell Variables”
Find the “PATH” variable and double click its value
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

2011-11-28T21:52:03-05:00

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!