Archive for the ‘CoffeeScript’ Category

rubyann – for people too lazy to write Ruby

At last, I’ve written my own jQuery plugin.

My plugin tries to help lazy people (a noble cause) to write Ruby. It’s called rubyann which is short for ruby annotation.

But you have to understand something about Ruby… hardly anyone knows about it – it’s quite obscure.

Ruby is part of XHTML 1.1 – and now part of HTML 5. Ruby characters are small reading aids that are placed on top of characters. They can be useful for any language, but my interest comes from Japanese furigana – here’s what Ruby looks like:

The 1st example uses Ruby to explain a translation and the 2nd uses furigana
ruby example
And yes, that really is a translation – the word “kill” is not needed to say “kill 2 birds with 1 stone” – it’s obvious!

To get this seemingly simple annotation you must type XML into your HTML:

And that’s just for the 1st character! Multiply that XML by the number of ruby characters you want… and you’d better have an automated HTML ruby generator or rubyann

rubyann inserts the required ruby XML where it finds markup (I invented), so this:

With rubyann eg: $('.textWithFurigana').rubyann(); becomes this: I’ve written the jQuery plugin in coffeescript and it’s on GitHub – rubyann

Here’s what it looks like in my editor, RubyMine, with the coffeescript plugin


Running CoffeeScript In-Browser

One of the ways to run CoffeeScript (other than processing on the server or using the command line to pre-compile) is to run CoffeeScripts, directly, in-browser.
This simply means that you can write coffeescript inside the HTML document. It has the disadvantage of being near impossible to debug as the running code will be encased in a very large javascript eval statement.
Running CoffeeScript in-browser is therefore not encouraged by the Author of CoffeeScript (jashkenas) – to the extent that he preferred not to include my submission (or pull-request as it is known on GitHub) to improve the documentation for it. This may be reasonable, however I would like to put the documentation here.

To run your coffeescript inline:

  1. Tag your coffeescript with the type “text/coffeescript”
  2. Include coffee-script.js after all coffeescript on the page (this is the compiler that will evaluate and compile all coffeescript in order)
  • The text contents of remote scripts (those referenced via src=””) cannot be accessed from the browser unless they are hosted on the same domain, and are capable of being accessed via an XMLHTTPRequest (which is how the compiler loads it)

And the main improvement to the documentation I wanted to make, an example:

<title>In-Browser test</title>
<script type=”text/javascript” src=”;> </script>
<script type=”text/coffeescript”>
-> $(#header).css background-color, green
<script type=”text/javascript” src=”;> </script>
<h1 id=”header” style=”color:white”>CoffeeScript is alive!</h1>

And the corresponding output: