“the largest open source CoffeeScript project and a fantastic way to get into open source and game development” #

As of this past weekend, CodeCombat…

a programming game for learning to code; a multiplayer coding challenge arena for sharpening your skills; a Y-Combinator-funded startup;

…became the largest open source CoffeeScript project and a fantastic way to get into open source and game development.

This multiplayer programming game for learning how to code is hosted on GitHub so you can fork it, learn, and play. Happy gaming.

Dashing creates gorgeous dashboards #

Dashing is a framework from Shopify for building gorgeous dashboards that can be displayed on large TVs throughout your office.

It ships with pre-made widgets, is completely customizable, and can be deployed to Heroku in a breeze. See Dashing in action here and here.

Share your Instagram Feed with Instafeed #

Instafeed is a CoffeeScript library aimed at making Instagram feeds easy to share on your website. It was developed by Steven Schobert with simplicity in mind:

<script type="text/javascript">
  var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'YOUR_CLIENT_ID',
    template: '<a href="{{link}}"><img src="{{image}}" /></a>'
  });
  feed.run();
</script>

Instafeed supports many features: templating, sorting, tags and locations (among others). You can view a list of the standard options on their website. You can also view the source on GitHub.

Wintersmith – Static site generator powered by CoffeeScript, Jade, Underscore, and Node.js #

We’ve covered a few static site generators, not to mention a whole episode. Wintersmith from Johan Nordberg is the first to be powered Node.js. Feature highlights include:

  • Jade templates
  • Page metadata
  • Integrated Underscore provides the _ function in your templates
  • Markdown support
  • Command line interface
  • Built-in server

Perhaps the most powerful feature is Wintersmith’s CoffeeScript-based plugin system:

module.exports = (wintersmith, callback) ->

  class TextPlugin extends wintersmith.ContentPlugin

    constructor: (@_filename, @_text) ->

    getFilename: ->
      @_filename

    render: (locals, contents, templates, callback) ->
      # do something with the text!
      callback null, @_text

  TextPlugin.fromFile = (filename, base, callback) ->
    fs.readFile path.join(base, filename), (error, buffer) ->
      if error
        callback error
      else
        callback null, new TextPlugin filename, buffer.toString()

  wintersmith.registerContentPlugin 'texts', '**/*.txt', TextPlugin
  callback()

Check out the project web site or source on GitHub for more.

hoardd – Node.js daemon for collecting server metrics to send to Graphite #

José de Paula E. Júnior has released Hoardd, a Node.js-based daemon for collecting server data to send to Graphite. With a pluggable scripts architecture similar to Hubot, scripts are written in CoffeeScript or JavaScript to collect and publish data on an interval, such as this load average example:

Fs = require 'fs'
Path = require 'path'

module.exports = (server) ->
  run = () ->
    metricPrefix = "#{server.fqdn}.load_average"
    server.cli.debug "Running load average script"

    # Read from /proc
    procfile = '/proc/loadavg'
    if Path.existsSync procfile
      data = Fs.readFileSync(procfile, 'utf-8')
      [one, five, fifteen] = data.split(' ', 3)
      server.push_metric "#{metricPrefix}.short", one
      server.push_metric "#{metricPrefix}.medium", five
      server.push_metric "#{metricPrefix}.long", fifteen

Be sure and check out Graphiti to view your Graphite data. Also head over to the hoardd repo to install or contribute a script.

LiveReload – CoffeeScript, Sass, LESS and others just work #

LiveReload Screenshot

If you haven’t heard, LiveReload from Andrey Tarantsov is now 2.0 and is in the Mac App Store for $9.99!

Hey, LiveReload isn’t open source!

What’s that you say? Isn’t The Changelog about what’s fresh and new in open source?

While LiveReload may not be a true open source project, Andrey did opt to release the full source code of LiveReload 2 as well as livereload-plugins, livereload-js and livereload-extensions on GitHub.

Why did Andrey opt to open the code?

Because curiosity is the most basic and important quality of good developers.
I believe that everyone benefits from being able to study and tinker with other people’s software. – Andrey Tarantsov

So there’s no formal license attached to the code, but you are able to fork, hack and share your results on GitHub. Andrey’s only request? Don’t distribute binaries publicly without his permission and pay for a license of you use it.

If you would like to reuse parts of the code, Andrey did say in the newsletter that went out today that if you find a nice generic class or a piece of code you’d like to reuse, he will probably be happy to release it under MIT.

Congrats on the new son!

Andrey is expecting a new son any day now! So, if you’re on the fence about buying the app – that’s a good reason to support him and get a licensed copy.

Source on GitHubHomepage

SpacePen – Markaby-inspired CoffeeScript view framework for jQuery #

SpacePen from Nathan Sobo is a Markaby-inspired, CoffeeScript-powered DSL and view framework for jQuery. SpacePen combines view and controller into a single class:

class Spacecraft extends View
  @content: ->
    @div =>
      @h1 "Spacecraft"
      @ol =>
        @li "Apollo"
        @li "Soyuz"
        @li "Space Shuttle"


...

view = new Spacecraft
view.find('ol').append('<li>Star Destroyer</li>')

view.on 'click', 'li', ->
  alert "They clicked on #{$(this).text()}"

Check out the source on GitHub for more.

#71: Spine, and client-side MVC with Alex MacCaw

Wynn caught up with Alex MacCaw to talk about Spine, CoffeeScript, writing books, and working at Twitter. Items mentioned in the show: Alex MacCaw, O’Reilly writer and open source developer now working on the front-end for Twitter. Spine Lightweight MVC library for building JavaScript applications, inspired by Backbone. Spine is written in CoffeeScript Eco is […]

Cassette – Web asset manager for .NET with support for Less and CoffeeScript #

Asset packaging is a hot topic these days. Andrew Davey brings the fun to .NET with Cassette, an asset bundler for .NET web apps. Much like Jammit or Sprockets for Ruby apps, Cassette concatenates, minifies, and manages dependencies between scripts:

@{
  Bundles.Reference("Scripts/app/page.js");
}
<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  @Bundles.RenderScripts()
</head>
<body>
  ...
</body>
</html>

… which yields individual scripts in debug mode:

<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  <script src="/Scripts/lib/jquery.js?a4babad4b" type="text/javascript"></script>
  <script src="/Scripts/lib/jquery-ui.js?53dd39212" type="text/javascript"></script>
  <script src="/Scripts/app/tools.js?4d03ae0b" type="text/javascript"></script>
  <script src="/Scripts/app/widgets.js?cf319fe0b" type="text/javascript"></script>
  <script src="/Scripts/app/page.js?485f05e21" type="text/javascript"></script>
</head>
<body>
  ...
</body>
</html>

… and concatenated, minified assets in production mode:

<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  <script src="/_assets/scripts/Scripts/lib_4bad47afb" type="text/javascript"></script>
  <script src="/_assets/scripts/Scripts/app_b7c29fecc" type="text/javascript"></script>
</head>
<body>
  ...
</body>
</html>

Cassette even supports Less and CoffeeScript. Please, someone fork this and bless the community with the pure goodness that is Sass.

Ghostbuster: Easier headless testing with PhantomJS (and CoffeeScript) #

Ghostbuster from Joshua Hull from the Padrino team aims to make it even easier to get started with PhantomJS. Just by installing the gem, Ghostbuster will download and configure Phantom JS so you can write beautiful tests in CoffeeScript.

phantom.test.root = "http://127.0.0.1:4567" # you must specify your root.

phantom.test.add "Simple index", ->         # this adds a test
  @get '/', ->                              # this will get your a path relative to your root
    @body.assertFirst 'p', (p) ->           # this asserts the first paragraph's inner text
      p.innerHTML == 'This is my paragraph' # is 'This is my paragraph'
    @body.assertAll 'ul li', (li, idx) ->
      li.innerHTML == "List item #{idx + 1}"
    @succeed()                              # all tests must succeed

I love the simple test output. UTF-8 entities FTW:

GhostBuster
For /Users/joshbuddy/Development/ghostbuster/ghost/test_ghost.coffee
  ✓ Simple index
  ✓ Form input
  ✓ Link traversal
  ✗ Bad link traversal
    Assert location failed: Excepted http://127.0.0.1:4567/not-correct, got http://127.0.0.1:4567/
  ✗ Form input not equal
    Assert first for selector #out did not meet expectations

For /Users/joshbuddy/Development/ghostbuster/ghost/test_ghostmore.coffee
  ✓ Simple form
  • Form should do more things

See the GitHub repo for usage.

Batman: Fighting crime and kicking apps #

Batman.js from Shopify is an extremely slick looking framework for building single page apps in Node.js.

Batman lets you define observable events on your objects via the @event macro.

class Gadget extends Batman.Object
  constructor: -> @usesLeft = 5
  use: @event (times) ->
    return false unless (@usesLeft - times) >= 0
    @usesLeft -= times

You can then observe changes to properties in this way.

gadget.observe 'name', (newVal, oldVal) ->
  console.log "name changed from #{oldVal} to #{newVal}!"
gadget.set 'name', 'Batarang'
# console output: "name changed from undefined to Batarang!"

Custom accessors also make working with object properties a lot nicer:

class Person extends Batman.Object
  constructor: (name) -> @set 'name', name
  @accessor 'name',
    get: (key) -> [@get('firstName'), @get('lastName')].join(' ')
    set: (key, val) ->
      [first, last] = val.split(' ')
      @set 'firstName', first
      @set 'lastName', last
    unset: (key) ->
      @unset 'firstName'
      @unset 'lastName'

Be sure and check out the well done project site and source code for details.

js2coffee: JavaScript to CoffeeScript written in CoffeeScript #

js2coffee

A few weeks back we talked with Sam Stephenson on episode 0.6.4 about JavaScript and CoffeeScript as well as many other things such as Pow, the Rails 3.1 asset pipeline and 37signals’ (yet to be released) Cinco.

During the call, I had mentioned that I’ve been learning more JavaScript but was wondering if someone should just bypass JavaScript and learn CoffeeScript or if he could share any tips or resources to learning the two in parallel.

Well, js2coffee, a project of Rico Sta. Cruz, can help you do that. js2coffee compiles JavaScript code into CoffeeScript so you can write some code as you learn and compile it to CoffeeScript to see both codes side by side. Of course you can also migrate your JavaScript code over to CoffeeScript using js2coffee. It’s got a fantastically simple web interface and is also available as a Node.JS module.

Installation

npm install js2coffee

Check out the source on GitHub and the website to try it out for yourself.

#64: Pow, Rails 3.1 Asset Pipeline, Cinco, CoffeeScript, and more with Sam Stephenson

Adam and Wynn caught up with Sam Stephenson from 37Signals to talk about his his many open source projects and developing Basecamp Mobile. Items mentioned in the show: Nathan Smith, friend of the show, creator of 960.gs, Adapt, Formalize, and featured in Episode 0.3.2 Sam Stephenson, programmer at 37signals, creator of massive amounts of open […]

rel: Arel-inspired SQL query builder for Node.js #

Arguably, Arel was one of the biggest
new features introduced in Rails 3. Arel simplifies building complex SQL
statements using idiomatic Ruby.

With Rel, Carl Woodward brings the power of Arel to Node.js. Written in
CoffeeScript, Rel makes quick work of building SQL statements for a variety of relational databases.

Installation

Rel can be installed via npm:

npm install rel

We can then begin building a query:

users = new Rel.Table 'users'

If we want all users in our CMS we could use the star method:

users.project(Rel.star()).toSql()

Rel really shines, however, when using several chained operators,
including joins:

users.join(photos).on(users.column('id').eq(photos.column('user_id')))
# => SELECT * FROM users INNER JOIN photos ON users.id = photos.user_id

For a complete list of features, check out the very readable
Vows-based
specs in the repo on GitHub.

[Source on GitHub]

capt: Command line tool for creating Backbone.js apps #

If you set out to use Backbone.js for a client-centric application, one thing you might miss coming from a server-side MVC framework is some basic file structure, dependency managment, and generator support. To solve this problem Ben Nolan has created Capt.

Capt is aimed at developers building single page, stand alone applications as well as server-backed applications using Node.js, bundling the following projects and languages:

Languages

  • Coffeescript
  • JavaScript
  • SCSS
  • LESS

Testing frameworks

  • Qunit
  • Jasmine [planned]

Libraries

  • jQuery
  • Backbone.js
  • Underscore.js
  • json2.js

Installation

You can grab Capt from npm

npm install capt

To check your installation and see usage help, just run capt in your
terminal:

Usage:

capt new projectname 
  - create a new project

capt server
  - serve the current project on port 3000

capt watch
  - watch the current project and recompile as needed

There’s also generators to create Backbone models and controllers:

capt generate model <model name>

capt generate controller <controller name>

Capt is still in alpha but is under active development. Got ideas? Why
not contribute?

[Source on GitHub] [Web
site
]

zappa: Coffee Script DSL on top of Express, Node.js, and Socket.IO #

We gave a nod to CoffeeKup, Maurice Machado’s CoffeeScript ode to Markaby last month. Maurice is back with a new CoffeeScript ditty.

Zappa is a highly opinionated DSL for writing Node.js apps on top of Express – using CoffeeScript. Be sure and check out Episode 0.2.9 on CoffeeScript and Episode 0.3.1 on Websockets and Socket.IO for a little background if you missed them.

To get started, assuming you’ve got Node and Express installed, install Zappa via npm:

npm install zappa

You then can fire up your Zappa app from the command line:

$ zappa cuppa.coffee
=> App "default" listening on port 5678...

So what does a Zappa application look like?

Just like Sinatra, routes are mapped to handlers using the four HTTP verbs:

get '/:foo': ->
  @foo += '!'
  render 'index'

You can declare that index view in the same file with the view function:

view index: ->
  h1 'You said:'
  p @foo

Layouts? You bet:

layout ->
  html ->
    head -> title "You said: #{@foo}"
    body -> @content

Currently views and layouts support Coffeekup only, but that might change.

Async and Websockets

You can’t really talk about Node without discussing its inherent asynchronous nature. Zappa makes async style programming straightforward as well:

def sleep: (secs, cb) ->
  setTimeout cb, secs * 1000

get
  '/': -> redirect '/bar'

  '/:foo': ->
    @foo += '?'
    sleep 5, =>
      @foo += '!'

      @title = 'Async'
      render 'default'

view ->
  h1 @title
  p @foo

Zappa also has support for Socket.IO out of the box, so Websockets programming is a snap.

get '/': -> render 'default'

get '/counter': -> "# of messages so far: #{app.counter}"

at connection: ->
  app.counter ?= 0
  puts "Connected: #{id}"
  broadcast 'connected', id: id

at disconnection: ->
  puts "Disconnected: #{id}"

msg said: ->
  puts "#{id} said: #{@text}"
  app.counter++
  send 'said', id: id, text: @text
  broadcast 'said', id: id, text: @text

client ->
  $(document).ready ->
    socket = new io.Socket()

    socket.on 'connect', -> $('#log').append '<p>Connected</p>'
    socket.on 'disconnect', -> $('#log').append '<p>Disconnected</p>'
    socket.on 'message', (raw_msg) ->
      msg = JSON.parse raw_msg
      if msg.connected then $('#log').append "<p>#{msg.connected.id} Connected</p>"
      else if msg.said then $('#log').append "<p>#{msg.said.id}: #{msg.said.text}</p>"

    $('form').submit ->
      socket.send JSON.stringify said: {text: $('#box').val()}
      $('#box').val('').focus()
      false

    socket.connect()
    $('#box').focus()

view ->
  @title = 'Nano Chat'
  @scripts = ['http://code.jquery.com/jquery-1.4.3.min', '/socket.io/socket.io', '/default']

  h1 @title
  div id: 'log'
  form ->
    input id: 'box'
    button id: 'say', -> 'Say'

As a fan of CoffeeScript, I’ll be kicking the tires on this for my next Node app.

[Source on GitHub]

coffee-resque: Coffeescript/Node.js port of Resque #

It seems that constraints, among other things, helped Rick Olson (aka technoweenie) get this Coffeescript/Node.js port of Resque ready for the initial release he open sourced yesterday (Monday – October 25, 2010).

First, you’ll want to queue some jobs in your app:

var resque = require('resque').connect({
  host: redisHost, port: redisPort});
resque.enqueue('math', 'add', [1,2])

Next, you’ll want to setup a worker to handle these jobs.

// implement your job functions
var myJobs = {
  add: function(a, b) { a + b }
}

// setup a worker
var worker = require('resque').worker('*', {
  host: redisHost, port: redisPort,
  callbacks: myJobs})

// some global event listeners
//
// Triggered every time the Worker polls.
worker.on('poll', function(worker, queue) {})

// Triggered before a Job is attempted.
worker.on('job', function(worker, queue, job) {})

// Triggered every time a Job errors.
worker.on('error', function(err, worker, queue, job) {})

// Triggered on every successful Job run.
worker.on('success', function(worker, queue, job) {})

worker.start()

Rick also notes that generic failure handling and better polling are on his todo list.

Check out the codes

[Source on GitHub] [Documentation]

WatchWednesday for 20101013

Another Wednesday, another set of projects you might want to watch. mauricemach / coffeekup Released as a celebration of whyday, CoffeeKup brings the Markaby concept to CoffeeScript (featured in Episode 0.2.9). body -> header -> h1 (@title or ‘No Title’) nav -> ul -> (li -> a href: ‘/’, -> ‘Home’) unless @path is ‘/’ […]

Episode 0.2.9 – CoffeeScript with Jeremy Ashkenas

Wynn and special guest host Micheil Smith sat down with Jeremy Ashkenas from DocumentCloud to chat about CoffeeScript, a cool language that compiles to JavaScript. Items mentioned in the show: CoffeeScript – a cool language that compiles to JavaScript. DocumentCloud – an index of primary source documents and a tool for annotating, organizing and publishing […]