If you are a web developer, you have most likely thought to yourself occasionally, “I really wish I didn’t have to hit refresh a million times a day to see my changes take effect…”. Well, finally there is an answer: LiveReload comes to the rescue with a tool which automatically refreshes the browser whenever some of the files used by it are changed.

The 2.0 version is a nice Mac App, which I am using at home, but I also tried out version 1.x which is distributed as a RubyGem, and it worked fine on Ubuntu… and it apparently works fine on Windows too (after you have installed Ruby… see instructions on the GitHub readme).

After you have installed the app or gem, you can either embed a JavaScript on your page, or install browser plugins . I opted for the plugin route, which adds a button to your browser chrome allowing you to enable LiveReload for the current URL. Note that it is necessary to restart the browser completely for it to work. This means on Firefox you will need to restart twice: once to install the plugin, and again to get it working. Another issue I saw with Firefox was that the button didn’t show up on the addons toolbar, so I had to ‘customize’ my toolbars and add the ‘LR’ button which was now available as an option.

The other thing you need to do is tell LiveReload which folders to watch for changes. On the Mac App, you can use the Finder to select the folders, while with the RubyGem you need to give the folders as command line arguments.. or just type ‘livereload’ in the folder you want to watch, if there is only one.

Another benefit of LiveReload is that you can hitch multiple browsers up at once, to verify that your code behaves consistently across browsers. Great for cross-browser testing while you work.

Furthermore, when you are writing specs or unit tests for your code, you can have the tests running in another browser, and watch as they pass or fail, all without leaving your editor.

Finally, the version 2 has options to auto-compile SASS, Less, CoffeeScript and similar meta-languages which compile into HTML, CSS, or JavaScript. While the Mac App is initially free to use (it is still beta, but I did not experience any problems), I see that the update to the final 2.0 version will require some payment. However, if you just want auto-refreshing on changes, without pre-compilation, then you can continue to use the 1.0 version (or presumably the Beta App ?).

In case you are wondering how LiveReload works, I took a gander at the Javascript which the plugin embeds, and it uses WebSockets to receive notifications from the livereload app, which starts up a socket server

I think LiveReload is going to make my experience as a web developer much less annoying and more Zen-like :)

ps. I am not being paid by LiveReload to say any of this.. If you know of any other solutions to this perennial problem, I would certainly be interested to hear of them!

Using Vim for JavaScript Development

Here is how I do it …

Plugin management

I recommend using pathogen to manage plugins, as then you can simply clone the plugin repos into your .vim/bundle directory and you’re done. (and run ‘:Helptags’ to install help).

While this is not bad, I personally prefer another Javascript syntax definition file, which provides a more complete set of keywords (eg. browser events such as ‘onmouseover’), and thus highlights them differently. To use it, download and copy it to

~/.vim/syntax/javascript.vim

Now when viewing the same .js file, you will notice a few differences:

Folding

Another feature which this syntax file adds is the ability to fold functions. You can fold a function by positioning the cursor within it and typing ‘zc’. Then it will collapse to a single blue line with the function definition highlighted in it, and the number of lines contained within the fold. This can be a handy way to defocus attention from functions you are not interested in. It works in nested functions as well.

Whitespace settings

I generally want Javascript to have spaces instead of tabs, with 4 spaces for each indent level. This can be achieved by adding the following content as the file .vim/after/ftplugin/javascript.vim

" set whitespace for javascript to always use 4 spaces instead of tabs
setlocal expandtab
setlocal shiftwidth=4
setlocal shiftround
setlocal tabstop=4

Indentation

Vim’s default indent file for javascript merely sets the indentation to cindent… this is not very effective. For best results, go get the web-indent plugin.

Then you can use the builtin indent commands (essentially ‘=’ in command mode, combined with a motion, eg. ‘gg=G’ for the whole file, or just select some text in visual mode and hit ‘=’).

I just managed to submit my JS10K entry in time, having spent a lot of time implementing compression hacks like converting the code and data into images using node-canvas. Turns out I may not have needed to worry about that as the competition now lets you submit a .zip file, and only considers the size of the .zip file, not the files within it. Somehow I missed that. Oh well.

Here is a link to one of my favorite lifeforms, the Frothing Puffer:

In order to meet the size restriction of the competition, I had to leave out some functionality that I developed earlier, such as thumbnails of the lifeforms. So here is the uncut version, with thumbnails, and all of the lifeforms in it.

Actually, there are a couple of features in the competition version which are not in this version: The ability to link to a pattern using the URL, and also the ability to edit the seed pattern (albeit in text form). I have thoughts of making a version with a more visual editor, which would let you turn on cells by clicking on them, and perhaps save and share them with others. But I’m not sure if I’ll get around to it… life is short :P

I must give credit to the David Silver’s LIFE Lexicon, where I obtained the seed patterns. As always, Da Code is available on GitHub. Note that the competition version is in the JS10K branch.

Just wanted to take note of how I did this, in case it helps anyone, or if I forget :)

HomeBrew

First I installed Homebrew, as I’m kind of sick of MacPorts and Fink (specifically how slow and out of date they tend to be). This was a matter of clicking on the ‘install homebrew today’ button, which linked me to their github page… where I found the following instructions.

/usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"

So as it turns out this did not work, and instead I got an error message about ca certs. Fortunately it did mention that I should add the -k option to turn to turn off strict cert checking. so I did this instead:

/usr/bin/ruby -e "$(curl -fsSLk https://raw.github.com/gist/323731)"

And it worked.

MongoDB

So I went over to the MongoDB site and specifically their Quickstart OS X page. Since I have homebrew now I did,

    brew update
    brew install mongodb

note that I did not need to use ‘sudo’ before either of these commands, which is nice. After installing, it instucted me to issue the following commands:

    mkdir -p ~/Library/LaunchAgents
    cp /usr/local/Cellar/mongodb/2.0.0-x86_64/org.mongodb.mongod.plist ~/Library/LaunchAgents/
    launchctl load -w ~/Library/LaunchAgents/org.mongodb.mongod.plist

Which I dutifully did. Note that the ‘launchctl load …’ command actually starts the ‘mongod’ database daemon, so there’s no need to start it manually. Simply typing ‘mongo’ starts the mongodb shell

    >: mongo
    MongoDB shell version: 2.0.0
    connecting to: test

Note that >: is my prompt, in case you’ve seen Lost you may get the joke :) Now I can create a ‘collection’ by saving an item to one, like so:

    > db.foo.save({a:1})

And I can query all the items of ‘foo’ like so:

    > db.foo.find()
    { "_id" : ObjectId("4e6ffd8928d02c8f55a09dbb"), "a" : 1 }

I’ve just got started with MongoDB, but I have to say it looks like it will be really nice to work with on personal projects. No more fussing around with database schemas! Yay!

Oh, yeah, to quit mongo, you just type:

 > quit()

I just found out that the videos from both the JSConf 2011 and NodeConf conferences held earlier this year, are available online.

First off, the conference has an Oregon Trail theme, which I did not understand until I saw this video by author Sloane Crosley, which explains the game’s appeal delightfully. (Skip to about the 2 minute mark for the actual reading)

Here are the ones I have checked out so far:

Bytes and Blobs (David Flanagan)

A really good explanation of the new Binary APIs for Javascript. Nice to see the author of the great Rhino book in person (at least virtually.) Kind of amusing to hear all the talk of BLOBs (Binary Large OBjects). This opens up a number of interesting possibilities, such as getting access to files from the user’s filesystem (with their permission, after they have selected it) without uploading them. Also image processing, and even audio processing and generation. However, browser support is still incomplete… Let’s hope IE supports these APIs in it’s next version.

The Future of Javascript (Rebecca Murphey)

This is a call to action to ensure that Javascript evolves properly, to prevent some of the quagmires we currently experience as developers. In a nutshell, we need to agree on common standards and protocols to prevent duplication of effort. Some of this work is underway, eg CommonJS, promisesA. Also some interesting facts about the history of the automobile and the road system which we take for granted.

The Future of JS and You (Alex Russel and Peter Hallman)

A look behind the scenes of the Traceur Javascript compiler, which lets you write futuristic Harmony flavored Javascript, and generates present-day Javascript. This reminds me a bit of CoffeeScript, though here you’re still writing Javascript, albeit a version which does not yet exist. The suggestion is that you can invent your own Javascript.next features and hack the compiler to support them. If you’re interested in writing a compiler in Javascript, this would be a good place to start.

‘Freestyle RPC for Node’ (James Halliday) An entertaining presentation on James’s dnode node module which allows seamless remoting between client and server code. perhaps not the most elucidating presentation (there is about 10min of random rapping towards the end) but DNode does indeed look awesome.

It seems like every single session from these conferences is available here. The only confusing thing is that the videos do not always have the same titles as the sessions at the conferences, so you may need to cross-reference with the jsconf programme

Ah, I am so nostalgic for the old NodeJS logo :/