Unboxing is our regular feature where someone at Box UK spends a few hours playing with a new framework, library, tool or technique and blogs about his or her experience.
Recently, my colleague @CraigMarvelley was talking about Vogue on our local IRC channel. I was intrigued so decided to investigate and try it out for myself.
What is it?
Vogue is a node.js-based solution that eradicates the need for reloading your browser every time you make a change to your CSS. It is intended to save time as you don’t have to always go back to your browser and do a hard refresh each time; instead, Vogue does this on the fly. It uses the following technologies to achieve this:
These technologies open up a whole different paradigm in the web development world by allowing asynchronous, long-lived connections between client and server. This post shows a simple yet fantastic example of how they come together.
Getting to grips
Firstly, let’s make sure our package index is up to date
sudo apt-get update
Now we can install Git:
sudo apt-get install git-core curl build-essential openssl libssl-dev
Let’s get Node.js:
git clone https://github.com/joyent/node.git
Now for installing Node.js:
sudo make install
You can see if Node.js installed successfully By creating the following file you can see if Node.js has installed successfully:
var sys = require('sys');
Save the file as helloworld.js.
Then we can run the code as follows:
$ node helloworld.js
Node Package Manager
Node Package Manager (NPM) is a package manager for Node. You can use it to install and publish your Node programs.
To install NPM
curl http://npmjs.org/install.sh | sudo sh
socket.io (a dependency of Vogue) is an HTTP Socket implementation that runs on top of Node.js. It can use any number of transportation methods (WebSockets, Flash Sockets, AJAX long polling and more).
$ npm install vogue -g
The Vogue HTTP server can be started by running:
$ vogue path/to/website
You are now ready to test Vogue out. To do this, open your website in a web browser, then open its CSS file in your IDE and make any change you like. This change should now immediately be reflected in the browser without having the need to manually refresh.
I did experience a few issues with regards to certain versions of socket.io and its compatibility with the current version of Node.js, but the developer (Andrew Davey) was great, answering my emails and making changes to fix these. This is a great piece of kit, particularly if you are frequently making changes to the CSS, and I would recommend you give it a try.