Sublime Text Editor and CoffeeScript

If you use Sublime Text Editor, there are a couple of nice plugins that will help you along your journey.
sublime-better-coffeescript is a fork of the original Sublime CoffeeScript plugin. It provides you “syntax highlighting and checking, commands, shortcuts, snippets, watched compilation and more.”

sublime coffeescript

Watched compilation
Most of the features, you take for granted, but the interesting feature for me is the watched compilation. This means that if you save a CoffeeScript file, it will automatically compile it to JavaScript for you. This has been pretty handy when you start learning CoffeeScript.

Just write some CoffeeScript, save it, and check out what JavaScript is compiled. It sheds some insight on the syntax when you are just starting to learn CoffeeScript.

CoffeeScript, day 2

Day 2 of learning CoffeeScript. It’s a short day today, but I learned a couple of things.

The Good

Same name key-value pairs in defining JSON

When you are defining JSON, there is some shorthand available to you when the name of the key is the same name as the variable for the value of the key.

name = 'koda'
dog = {name}

1 2	name = 'koda' dog = {name}

is the equivalent to:

name = 'koda'
dog = {name: name}

1 2	name = 'koda' dog = {name: name}

The Bad

Soaks

My initial reaction to soaks is…ugh. Syntactic sugar is one thing, this just feels like it can be easily abused or make the code harder to read. So what is a soak?

A soak is a special case of the existential operator.
For example:

a = b ? c

a = b ? c

This code means, set a equal to b (if b exists), else set it to c.

A soak is a chainable existential operator where as far as i can tell whitespace also matters. Suppose you want to set a equal to the name property of b if it exists, else set it to c. In JavaScript, something like that would look like:

var a;
if (typeof(b) !== 'undefined' && b.hasOwnProperty('name')) {
    a = b.name;
} else {
    a = c;
}

var a;

if (typeof(b) !== 'undefined' && b.hasOwnProperty('name')) {

a = b.name;

} else {

a = c;

}

but if you use soaks, you can shorten it to:

a = b?.name ? c

1	a = b?.name ? c

CoffeeScript, day 1

Day 1 of learning CoffeeScript.

I won’t lie. After I’ve spent about 30 minutes so far reading up on the documentation for CoffeeScript and my head is starting to spin.

I’m trying to decode some of the syntactic sugar that CoffeeScript provides, but even one liners are tripping me up right now:

setName = (name) -> @name = name

1	setName = (name) -> @name = name

really means:

var setName;

setName = function(name) {
  return this.name = name;
};

var setName;

setName = function(name) {

return this.name = name;

};

and what’s more confusing is that there is even shorthand for this where somehow:

setName = (@name) ->

1	setName = (@name) ->

means this:

var setName;

setName = function(name) {
  this.name = name;
};

var setName;

setName = function(name) {

this.name = name;

};

I know that there’s going to be a lot of getting used to, but so far this is just making my head dizzy.

What I like:

String interpolation

The way I think about string interpolation is string concatenation done easier (or maybe done right? does syntactic sugar mean that it’s more right?). I suspect as I learn CoffeeScript more, there are going to be more of these “that’s cool” moments.

string = 'world'
console.log "Hello #{string}!"

1 2	string = 'world' console.log "Hello #{string}!"

whose JavaScript equivalent is:

var string = 'world';
console.log("Hello " + string + "!");

1 2	var string = 'world'; console.log("Hello " + string + "!");

Splats

Wow…that’s neat. When used as an argument in a function it basically is an array of values. What makes it cool is that you can surround it with variables and it’ll just slurp up all the other arguments and put it into an array.

story = (beginning, middle..., end) ->
    console.log beginning
    console.log middle.join(' ')
    console.log end
story 'one', 'two', 'three', 'four', 'five'

story = (beginning, middle..., end) ->

console.log beginning

console.log middle.join(' ')

console.log end

story 'one', 'two', 'three', 'four', 'five'

Output:
one two three four five

It’s like it splats together variables into an array.

biting the bullet: learning coffeescript

I have been fighting this for as long as I can. I have never understood why so many people are raving about CoffeeScript, but there are so many companies that have made the leap, rave about it, and never look back. That’s great and all but the idea of writing in a scripting language that compiles to JavaScript seems ludicrous. Why not just write your JavaScript cleanly? Why abstract JavaScript with some other scripting language?

The problem is with more and more companies releasing open source frameworks written in CoffeeScript, it makes it hard to use their work, stay current with their updates, and possibly contribute back to them without using it. So, after months and months of denial, I’ve decided that I have to suck it up and learn CoffeeScript. I am skeptical about the whole thing, but I’m going to commit to the project fully and write a node app with CoffeeScript.

S	M	T	W	T	F	S
« Nov
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

code for now

Category Archives: coffeescript