CoffeeBeans

A CoffeeScript console. Here's the source.

The code editor is on the bottom left.

Eventually there will be a tutorial here for beginning programmers. For now, there are a few notes and code examples.

Get Pictures of Cats

Let's get some adorable pictures from Reddit:

json 'http://www.reddit.com/r/aww.json?jsonp=?', (data) ->
  puts pretty data
  window.aww = pluck(data['data']['children'], 'data')

When the data loads, it'll fill up the console. The part that we need, data about the links, will be saved to the global variable aww. Take a look at the first link:

pretty aww[0]

The thumbnail property probably has the highest density of cuteness, so let's make a function that turns aww[0] into an image:

thumbnail = (obj) ->
  html "<img src='#{obj.thumbnail}'/>"

Let's test it out:

thumbnail aww[0]

If a picture appeared, get ready for cuteness overload. Let's use each to see them all!

each aww, (obj) -> puts thumbnail obj

Basics

Arrays

five = [1,2,3,4,5]

Objects

fruit_colors =
  apple: 'red'
  banana: 'yellow'
  kiwi: 'green'

Functions

# define a function
square = (x) -> x*x

# call the function
square(5)

Comprehensions

three_squares = (x*x for x in [1,2,3])

Chained Comparisons

age = 14
teen = 12 < age < 20

type

Get the type of an object

type 2                  # number
type "juice"            # string
type {a:1}              # object
type ->                 # function

Underscore Functions

All these Underscore.js functions are available in the global namespace. So instead of:

_.each([1,2,3], puts)

The _. can be omitted. The parens can also be omitted- CoffeeScript will take care of them

each [1,2,3], puts

each

Create three alerts:

each ['here', 'we', 'go!'], alert

map

Convert radians to degrees

rad2deg = (x) -> x*180/pi
map [pi/4, 3*pi/8, pi/2], rad2deg

filter

Filter even numbers

even = (x) -> x % 2 == 0
filter [1,2,3,4,5], even

pluck

Extract names from a list of objects

stooges = [
  {name: 'moe', age: 40}
  {name : 'larry', age : 50}
  {name : 'curly', age : 60}
]

pluck stooges, 'name'

size

Return the number of values in the list

size {one : 1, two : 2, three : 3}

shuffle

Shuffle an array using Fisher-Yates

shuffle [1,2,3,4,5,6]

Backbone Events

A module which provides named events on an object.

First, make a button:

html "<button id='my-phone'>Call Me!</button>"

Now trigger an event when the button is clicked:

phone = {}

extend phone, Backbone.Events

# bind the phone's "ring" event to the button's "click"
$('#my-phone').on 'click', ->
  phone.trigger "ring"

# print a message when the phone rings
phone.on "ring", ->
  puts "someone's calling..."

Click the button!

Backbone Models

A Model is a container for interactive data. Let's make a model to play with this sidebar's color.

Sidebar = Backbone.Model.extend
  color: (new_color) ->
    @set {color: new_color}

sidebar = new Sidebar;

sidebar.on 'change:color', (model, color) ->
  $('#main').css {background: color}

Now pick a good color for the sidebar.

sidebar.color '#FFCC33'

Colored puts

Print out colored lines.

color_puts = (text, color) ->
  puts html "<pre style='color:#{color}'>#{text}</pre>"
  return   # no need to return anything

green_puts = (text) -> color_puts(text, '#00bd12')
red_puts   = (text) -> color_puts(text, '#bd1107')
pink_puts  = (text) -> color_puts(text, '#ff3366')

green_puts "eggs and ham"
red_puts "danger will robinson"
pink_puts "happy to be here"

SVG

Print an SVG shape.

html "<svg height=100><circle cx=50 cy=50 r=40 fill=violet></svg>"

Resources

• CoffeeScript
• Underscore.js
• Backbone.js
• CodeMirror
• Eloquent JavaScript