Jun 13, 2013
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.
@quartzmo, and I'll see if I can help!
May 28, 2013
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.
Mar 5, 2013
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.
Feb 25, 2013
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.
Feb 8, 2013
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.
Dec 5, 2012
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:
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.
Oct 23, 2012
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.