CoffeeScript in a Chrome DevTools Workspace

In case you didn't hear, Chrome DevTools Workspaces let you edit local CoffeeScript source files directly from your browser. For a thorough overview of the feature, watch Addy Osmani's video tour. Paul Irish showed it off as well a couple weeks ago in his fabulous FluentConf talk, "JavaScript Development Workflow of 2013". At this time, you need Chrome Canary to use Workspaces.

While Workspaces is handy for any front-end project, a truly CoffeeScript-friendly dev environment also includes Source Maps for debugging. Today I came across github.com/latentflip/browserify-grunt-workspaces-demo, a handy Grunt-based demo project by Philip Roberts that uses Browserify to build the necessary Source Maps metadata.

When you successfully run the default Grunt task in Philip's project, you should see some very important output, shown below. This is configuration that is essential for Source Maps to work correctly with your local CoffeeScript files.

Copy and paste the values from the build output into the Chrome DevTools Workspaces pane.

If you get things working correctly, you should be able to edit a local CoffeeScript file from within DevTools. For some Source Maps action, add an error as shown, then refresh the page and navigate back to the CoffeeScript source of the error.

Very cool stuff! If you have any trouble, ping me @quartzmo, and I'll see if I can help!

Static Site Generation with Node.js and CoffeeScript

As I discussed in "Interactive Static Sites With Jekyll, Backbone.js, and Firebase", static sites built using powerful Ruby-based tools such as Jekyll and Middleman are surging in popularity based on their benefits: low hosting costs, speed, stability, and security. Jekyll has powered the Obama campaign's $250 million fundraising platform as well as a new version of healthcare.gov. Several months ago GitHub Co-Founder and CEO Tom Preston-Werner renewed his commitment to Jekyll, writing, "Sorry for not keeping this thing moving faster. 2013 is gonna kick ass. Wake up, go to war."

So, this certainly sounds like good news for rubyists. But is there a tool for creating static sites using Node.js and CoffeeScript?

Say hello to DocPad.

DocPad embraces CoffeeScript in a big way.

For starters, let's take a look at a typical DocPad configuration file. Whoa! Not only is it in CoffeeScript, it even contains functions! Used judiciously, the ability to include short, readable CoffeeScript functions in your configuration is quite handy. For an interesting example, check out the instructions for using DocPad, GitHub and Prose as a Wiki. (Aside: After publishing this post, I will use Prose and GitHub as described to add a link to my post to the official DocPad showcase.)

The DocPad core and almost all of its community plugins are written in CoffeeScript, but that's not all. Although DocPad supports a long list of renderers that includes Handlebars and Jade in addition to PHP and Ruby, the project's skeletons have a strong preference for Eco (Embedded CoffeeScript) templates. For an example of a typical Eco template, check out getting-started.html.eco.

If you enjoy CoffeeScript and Eco (it also uses Backbone.js), I encourage you to jump in and give DocPad a try. I have posted my notes about porting blog.scriptybooks.com from Jekyll to DocPad, in case they might be of use.

Finally, no discussion of CoffeeScript and static site generators is complete without mentioning Jeremy Ashkenas' small but delightful Journo. In just a single file of code-within-documentation Literate CoffeeScript, Journo provides a everything you need for a minimalist tool, including deploys via rsync.

CoffeeScript 1.6 Source Maps

Almost a year after CoffeeScript Love's original post, CoffeeScript 1.6.1 now supports source maps via the --map compiler option!

Jeremy Ashkenas comments:

Please direct all thanks for this over to http://github.com/jwalton. He's been toiling away on these for a couple of months now, originally as a bit of a skunkworks. Managing to get them merged in cleanly to an oft-changing code generation codebase was no small feat.

Currently, the only browsers reported to support source maps are Chrome and the WebKit Nightly Builds. (Source maps in Node.js are covered in this recent post.) To enable Source Maps in Chrome, select View -> Developer -> Developer Tools, then click on the gear icon in the lower right corner to open Settings. In the Settings dialog, check "Enable source maps" as shown below.

 Happy debugging!

Literate CoffeeScript

CoffeeScript 1.5.0 was released today! Although CoffeeScript Love is still anxiously awaiting support for source maps, this release contains something really cool.

Version 1.5 introduces Literate CoffeeScript, an implementation of literate programming, which now enables you to generate plush, Markdown-based documentation from your CoffeeScript programming code. That CoffeeScript creator Jeremy Ashkenas enthusiastically pushed through this feature should come as no surprise. It is a natural extension of his earlier Docco project. Docco uses a side-by-side layout for commentary and code, whereas Literate CoffeeScript appears to be inline, but they both look fabulous. I really admire Jeremy's attention to aesthetics in these projects.

Just take a look at this initial example from the CoffeeScript compiler.

This is how the source for the same output looks in a text editor with syntax highlighting.

So, if you're writing a library in CoffeeScript, consider doing it literate-style. And if that isn't enough excitement for one day, for item in list by -1 now enables you to iterate backwards!

Update: Jeremy Ashkenas has written this blog post about Literate CoffeeScript and his own programming workflow.

CoffeeScript Debugger in RubyMine

CoffeeScript Love is so happy to see JetBrains including support for CoffeeScript debugging in the latest version of RubyMine, released yesterday. However, the setup instructions are not trivial, and involve source maps, CoffeeScriptRedux, and a JetBrains extension for Chrome. In order to help with the onerous setup, JetBrains has published an example project on GitHub, but it is a full Rails application, and probably not useful for developers who want a simple configuration for pure CoffeeScript projects.

Personally, although I use RubyMine, I won't be tackling this at the moment, as I haven't had any trouble so far debugging CoffeeScript using only the browser. However, as CoffeeScript continues to grow in popularity and the projects using it expand and mature, I can imagine IDE-based debugging may be very helpful while trying to come to grips with large-scale legacy projects.

Ember.js and CoffeeScript

Of all my favorite things about CoffeeScript, one of the less obvious is the way it has encouraged and inspired people to write their own AltJS languages. Naturally, many of these build upon CoffeeScript itself, in some cases extending it with just a feature or two. One well-known example is IcedCoffeeScript, but there are many others.

This week I came across one that I feel is worth a special mention: EmberScript, an extension of CoffeeScript created by Gordon Hempton, who blogs regularly about Ember.js.

I've been floating the idea of writing a book teaching Ember.js in CoffeeScript on the same interactive platform as my Backbone + CoffeeScript book. But it hadn't occurred to me to extend CoffeeScript for a better fit with Ember.js. I wrote Gordon to ask how he got the idea, and this was his reply:

As far as EmberScript is concerned, the idea started with an interest in Ember.js itself. Ember.js is divided into multiple modules, including what is essentially its own javascript-based object model and language runtime. I have also always been a big fan of CoffeeScript, but CoffeeScript has never been a perfect fit with Ember (e.g. CoffeeScript also has its notion of classes). EmberScript is an attempt to give Ember.js constructs first-class language support. Things like property bindings, observers, classes, and mixins are all supported directly within the language itself. Because EmberScript is also a compiled language, really cool things like property dependency inference are also possible! EmberScript is ember-infused CoffeeScript.

You can read more about how Gordon modified the CoffeeScript Redux compiler in his blog post.

Is this the first time a programming language has been forked to support the features of an application framework? Like everything else, I suspect it's been done before. Please leave a comment if you have an example.

CoffeeScript 1.4.0 Released, No Sign of Source Maps

CoffeeScript 1.4 has arrived! There is not a whole lot to get excited about unless you're using CoffeeScript with Node.js and are tired of deprecation warnings. You can compare the new version with 1.3.3 on this GitHub compare view.

After writing about source maps for CoffeeScript back in April 2012, I felt fairly sure that the 1.4 release would usher in a new era of easier debugging for CoffeeScript. It will certainly come.

Meanwhile, the change log for 1.4.0 on the official CoffeeScript site looks like this:

• The CoffeeScript compiler now strips Microsoft's UTF-8 BOM if it exists, allowing you to compile BOM-borked source files.
• Fix Node/compiler deprecation warnings by removing registerExtension, and moving from path.exists to fs.exists.
• Small tweaks to splat compilation, backticks, slicing, and the error for duplicate keys in object literals.