Hi There CoffeeScript

Just like in real life, mustaches (in code) tend to make me feel a bit nauseous.

This is why I started having eyes for clean-shaven server side languages like Ruby and Python. If JavaScript’s syntax could be similarly smooth looking, I have a feeling that my attraction to it could increase tremendously.

CoffeeScript seems to understand the appeal of white space and terseness. We started hanging out - and I don’t want to jinx anything - but the attraction is undeniable. Here is how our courtship began, and how you could start a similar new relationship with CoffeeScript on your Mac that uses TextMate.

I met him through his friend, Node.js

Install Node.js and npm (node package manager)

If you don’t already know these dudes, follow the gist instructions in the first section entitled “node-and-npm-in-30-seconds.sh” which uses cURL. I’m sure that you will get along great.

Our First Date.

I normally don’t go for pick up lines, but there is an exception to every rule.

Install CoffeeScript in the shell via npm.

1
npm install coffee-script

Second Date.

Bundling up together.

Always a gentleman, CoffeeScript offered me his jacket on a chilly night.

This jacket didn’t just make CoffeeScript syntax look nice – it could do stuff. (It didn’t have quite as many magical powers as this jacket, but few jackets do.)

Install the TextMate bundle for CoffeeScript so that you can use syntax highlighting and use commands to let you run and compile things in TextMate.

Update the $PATH variable in TextMate

You want to include the ~/User/yourName/local/ directory in the $PATH variable in TextMate so you will be able to run “coffee” shell commands.

Do this by opening TextMate’s Preferences, Advanced, and then the Shell Variables section. Edit the PATH variable, and add the path to your “coffee” directory (which is “/Users/yourName/local/”) to the front of the :-separated list.

After I added it, my new PATH looks like this.

1
/Users/yourName/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

(More about this step and why it’s necessary here)

Third Date.

Making moves.

Create a new demo.coffee file. Write some CoffeeScript in this new file. For example, here is a function that will test for Zac Efron’s presence in a movie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# An array of movies with Zac Efron.
zacMovies = [
  '17 Again'
  'Hairspray'
  'High School Musical'
  'High School Musical 2'
  'High School Musical 3: Senior Year'
  'Charlie St. Cloud'
  'The Replacements'
  ]

# Check if Zac Efron is in a movie.
zacEfron = (myMovie) -> if myMovie in zacMovies
  response = "Yes, Zac Efron is in " + myMovie + "."
else
  response = "No, Zac Efron is not in " + myMovie + "."


console.log zacEfron('17 Again')

Run Control-R to Run the script and open a dialog box for the console log. It should display what we already know.

Fourth Date.

I can change him.

Convert the .coffee file to raw .js. You can do this a couple of ways. If you have the CoffeeScript Bundle for Textmate installed, Command-B will Compile and Display JS in a new dialog box.

Here’s what will pop up.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var zacEfron, zacMovies;
var __indexOf = Array.prototype.indexOf || function(item) {
  for (var i = 0, l = this.length; i < l; i++) {
    if (this[i] === item) return i;
  }
  return -1;
};
zacMovies = ['17 Again', 'Hairspray', 'High School Musical', 'High School Musical 2', 'High School Musical 3: Senior Year', 'Charlie St. Cloud', 'The Replacements'];
zacEfron = function(myMovie) {
  var response;
  if (__indexOf.call(zacMovies, myMovie) >= 0) {
    return response = "Yes, Zac Efron is in " + myMovie + ".";
  } else {
    return response = "No, Zac Efron is not in " + myMovie + ".";
  }
};
console.log(zacEfron('17 Again'));

Alternatively, from the command line, run the compile command.

1
coffee -c demo.coffee

Then, peep the demo.js file that is created in the same directory as your .coffee file.

Fifth Date.

Lets go to the movies!

PeepCode has a fantastic film for you.

Also, the CoffeeScript page has a ton of über-cute examples.