Coffeescript rocks!

I’ve been absent a few weeks from the blog. Life got taken over by work – been deep in the Javascript jungles and Coffeescript has been a lifesaver.

Based on my earlier peek at Coffeescript, we went ahead full on with Coffeescript and I have to say it has been a pleasant ride for the team with over 4.7KLoc of Javascript (with Coffeescript source weighing in around 3.7KLoc including comments etc) that now I can confidently recommend it for any sort of Javascript heavy development.

I’m going to list down benefits we saw with Coffeescript and hopefully someone else trying to evaluate it might find this useful:

1. Developers who haven’t dove deep into Javascript’s prototype based model find it easier to get up to speed sooner. Yes – once in a while they do get tripped up and then have to look again into what’s going under the covers – but this is normal. The key point is that its much much more productive and enjoyable to use Coffeescript.
2. The conciseness of the Coffeescript definitely goes a long way in improving readability. One of the algorithms implemented was applying a bunch of time overlap rules. We also used Underscore.js – and between Coffeescript and Underscore.js, the whole routine was within 20 lines, mostly bug free and very easy for new folks to pick upand maintain over time. Correspondingly, the generated JS was much more complicated (though Underscore helped hide some of loop iteration noise) – and it wouldn’t have been too different had we written the JS directly.
3. Integrating with external frameworks – jquery, jquery ui etc was again painless and simple.
4. Another benefit was that the easy class structure syntactic sugar helped quickly prototype new ideas and then refine them to production quality. With developers who’re still shaky on JS, I doubt the same approach would have worked since they’d have spent cycles trying to get their heads wrapped around JS’s prototype based model.
5. Coffeescript also allows you to split the code to multiple source files and merge all of them before compiling to JS – this allowed us to keep each source file separate and reduce merges required during commits.
6. Finally, performance is a non issue – you do have to be a little careful otherwise you might find yourself allocating function objects and returning them back when you don’t mean to but this is easily caught in reviews.

One latent doubt I had going into this was the number of times we’d have to jump in to the JS level to debug issues. With a larger Coffeescript codebase spread across multiple files, this is a real concern since the error line numbers wouldn’t match with source and if we have to jump through hoops to fix issues. Luckily, this wasn’t a problem at all – over time, in cases of either an error in JS or just inspecting code in the browser, its easy to map to the Coffeescript class/function – so you just fix it there and regenerate the JS. Secondly, the generated JS is quite readable – so even when investigating issues, it’s quite trivial to drop breakpoints in Chrome and know what’s going on.

The one minor irritation was if there was a Coffeescript compile issue, then when joining the file, the line number reporting.fails and then you have to compile each file independently to figure out the error. Easily automated with a script – so that’s just being nitpicky.

Anyway, if you got here looking for advice on using Coffeescript, then you’ve reached the right place and maybe this post’s helped you make up your mind!

Coffeescript looks promising

I’ve just ran across Coffeescript… can’t believe what sort of a hole I’ve been living in.

It’s a source to source compiler (ie when you ‘compile’ a coffeescript script, you get javascript source.)

So why would you want a source to source compiler for Javascript?
Well, as apps become more and more ‘front-end’ heavy with DHTML/Ajax bling bling, the javascript that holds all that together also becomes more and more complex. Yeah, sure you used Jquery (or ‘insert your favourite js framework’) – but that’s not even scratching the surface. You’re still writing tons of js code, and dealing with its idiosyncracies and tearing your hair apart.

Enter Coffeescript – clean syntax with elements of style borrowed from ruby and python, this is super clean and efficient. You write your code in coffeescript which is neat, clean and concise. What it generates is very idiomatic and clean javascript.

Let’s try something – take a guess at what the following does:

    var Animal, Mammal, animal, farm, _i, _len,
      __hasProp = Object.prototype.hasOwnProperty,
      __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
    Animal = (function() {
      function Animal(name) {
        this.name = name;
      }
      Animal.prototype.speak = function() {
        return console.log("I am a " + this.name);
      };
      return Animal;
    })();

    Mammal = (function(_super) {
      __extends(Mammal, _super);
      function Mammal() {
        Mammal.__super__.constructor.apply(this, arguments);
      }
      Mammal.prototype.speak = function() {
        Mammal.__super__.speak.apply(this, arguments);
        return console.log("and I'm a mammal");
      };
      return Mammal;
    })(Animal);

    farm = [new Animal("fish"), new Mammal("dog")];

    for (_i = 0, _len = farm.length; _i < _len; _i++) {
      animal = farm[_i];
      animal.speak();
    }

And now – see if you like this better:

    class Animal
       constructor: (@name)->
       speak: ->
          console.log "I am a #{@name}"

    class Mammal extends Animal
       speak:->
          super
          console.log ("and I'm a mammal")

    farm=[ (new Animal "fish"), (new Mammal "dog")]

    animal.speak() for animal in farm

The javascript version is the generated from the coffeescript version above . Head over to coffeescript.org page – they have an online interpreter where you can try out coffeescript code and it generates equivalent javascript source.

If you’re wow’ed with that (I am) – and just in case you’re saying good bye to javascript, here’s the nub.. since its a source to source compiler, unless you understand what’s going on under the covers, you’ll hit a problem soonish when you have to debug something.

So, Javascript isn’t optional – but if you have that bit covered, there’s no reason to have to ‘live’ with the iffy side of javascript. Take a look something like coffeescript and have a little fun along the way.

Blogging with Vim

So now I’m in Vim land and this is the first time I’ve gotten far enough to feel a bit comfy. Decided to dust off my blog and start at it again – what better to do it in than in VIM.

So – TA-DA – here’s the first post – courtsey VIM on ubuntu. However, as usual, it was rougher than it’s supposed to be. IN any case, I’ll forget how I got this far the next time so the next few posts will be around recording how to get VIM to post to WP.com blogs.

But before that – the first thing to to is to get the VimRepress plugin. Better if you have pathogen installed, in which case you can do

    cd .vim
    git submodule add https://github.com/raghur/VimRepress bundle/VimRepress.git

That’s my fork on Github of https://github.com/connermcd/VimRepress.git which fixes a few things:

• Makes VimRepress work properly through a proxy
• Changes the attachment filename to a ‘.odt’ since WordPress.com doesn’t allow a text file attachment.

I still dont have a clue if doing this will break the plugin – but nevertheless, basic case of posting to my blog works and at this stage that seems good enough for me.

PS as you can see from this post – I’ve not yet got a hang of markdown syntax

Dec 29th – PPS a couple of posts and one more tip for WordPress.com. WP.com does <br/> for hardbreaks in the markdown text. Obviously, this doesnt leave the post looking very good. I have the following in my .vimrc to get around this

        augroup Markdown
            autocmd FileType markdown set wrap 
                                    \ linebreak
        augroup END

PPS
You will also need to have python markdown installed once you have VimRepress running.

    easy_install markdown

Enjoy symlinks and hardlinks on NTFS

Can’t believe I didnt come across this before – if you’ve gotten used taming your hdd by creating links to folders and have been annoyed with the lack of symlinks and hardlinks on NTFS, then despair no more. I’ve been using Mark Russinovich’s (of sysinternals fame) tool – junction.exe all this while and though it works great, have always wanted something that would integrate with Explorer too. For an in-depth discussion – read http://shell-shocked.org/article.php?id=284 Anyways, I’m extremely happy with NTFS Link – this will surely go into my list of “Must have tools – install immediately on a new machine” list

Drip…

Drip..

IMG_3370_crop, originally uploaded by Raghu Rajagopalan.

Drip….

Water droplets – dipping a toe in macro photography

he he – so I have a canon S3 IS – got it last year since it allows enough manual control while also having family friendly thingies like video . Also, with the chdk hack, the S3 IS is good enough for me to experiment.

So, one of these long time itches has been to take a water droplet splash – you know, the immensely close up snaps where you see a single drop splashing…

Here’s the snaps after two evenings of trial and error (mostly errors though) – feeling quite smug myself

Piclens – full screen slideshows with flickr (and others)

discovered Piclens

Its a great addin for firefox – and integrates with Flickr to give you full screen slideshows a’la Picasa slideshows on your machine!! Its a bit tricky to figure out how to get it to work – Just hover any picture on any page  and click on the blue bubbly overlay button that appears

Imaging the tenth dimension

Amazing flash movie!

Great flash movie explaining dimensions 4 (time), 5, 6 all the way uptil 10. And why they stop after 10!

I’ve never come across a clearer explanation ever and the great visualization does the trick.