Tad Thorley

Formatting Coffeescript For Tumblr

I’ve been trying to figure out a good way to format my code examples. There are plenty of options for Ruby, but nothing good for Coffeescript, especially if you’re using a hosted blog system like tumblr.

I’ve settled on using github’s gist embedding:

It isn’t as convenient as having the code inline, but it works well.

SpineJS With Rails Screencast Transcribed

I transcribed the “Spine and Rails” screencast by Alex MacCaw and put it together with the source code on github.

When Textmate Can’t Find Coffeescript

When you try to use the textmate coffeescript bundle you may get the error: coffee: command not found. As the coffeescript bundle’s README points out, textmate doesn’t inherit your regular PATH. You need to go into textmate’s preferences (Preferences > Advanced tab > PATH variable) and add the path to coffeescript.

You need to figure out where coffeescript is with the command-line command which coffee (which was /user/local/bin/coffee for me) and make sure is it part of textmate’s PATH variable (which, for me, meant adding :/user/local/bin to the end).

Simple SpineJS and Ruby on Rails Integration

I’ve recently been learning an MVC javascript framework called Spine. It is similar to backbone (hence the name), but I’ve found it to be a bit more rails friendly and closer to what I’m familiar with. The source is also written in coffeescript, which I think has a better syntax.

What’s the first step when learning something new? “Hello World!” of course! I’ll take you step by step through a simple application using Rails and Spine. The source code is on github.

First, create your rails (3.1) application:

rails new hello-spine

Next you’ll want to download spine.js and copy the lib directory into vendor/assets/javascripts/spine of your new rails application (the directories won’t exist, you’ll have to create them).

Now you’ll need to configure Rails to use Spine. Edit the application.js file in app/assets/javascripts to include a line to require spine (spine.js in the spine directory). I love coffeescript, so I renamed the file to application.js.coffee and this is what it should look like:

#= require jquery
#= require jquery_ujs
#= require spine/spine
#= require_tree .

Rails needs to supply the basic HTML that Spine hooks into, so you’ll need to generate a controller for it

rails generate controller Hello index

and set it as the root route. Your config/routes.rb file should look like this:

HelloSpine::Application.routes.draw do
  get "hello/index"
  root :to => "hello#index"
end

Now for the Spine part. Because this is so simple, there are no views or templates; there is no routing logic. The only logic you’ll need is a Spine.Controller that you can put straight in to your application.js.coffee file (for more complex applications you’d want to separate controllers, models, and views into separate directories and include them from there). The first step is to create your new class and expose it by assigning it to the javascript “window” object. Your file should look like this:

#= require jquery
#= require jquery_ujs
#= require spine/spine
#= require_self
#= require_tree .

class App extends Spine.Controller
  constructor: ->
    super


window.App = App

Note also the “require_self” line right after requiring spine.

Next edit views/hello/index.html.erb to provide a div for your Spine app to work with. Followed by some javascript to create your Spine app and pass it the div as it’s base DOM element. Your file could look something like this:

<div id="hello"></div>

<script type="text/javascript" charset="utf-8">
  jQuery(function() { 
    new App({el: $("#hello")});
  });
</script>

The last step is to have your controller append the greeting to it’s base element. The addition of one more line to application.js.coffee should do it:

...

class App extends Spine.Controller
  constructor: ->
    super
    @append("<p>Hello from Spine!</p>")

...

Start up your rails app to see the message:

rails server

So what’s the next step? Alex MacCaw, the author of Spine has done a great series of screencasts and the spine gem for rails makes it easy to use spine with rails.