Close

About Unboxing

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.

Vogue

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:

- Node.js

- socket.io

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

Node.js

Node provides an easy way to build scalable network programs, through a server-side JavaScript environment that uses an asynchronous event-driven model. I’m using Ubuntu 11.04 for this unboxing, so let’s get started with the installation.

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:

./configure
make
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');
sys.puts('Hello World');

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

cd
curl http://npmjs.org/install.sh | sudo sh

socket.io

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).

Installing Vogue:

$ npm install vogue -g

After installing Vogue and all of its dependencies you’re now ready to add the following snippet of JavaScript to the site which is served by Vogue itself. This hooks up your site to the Vogue client:

<script src="http://localhost:8001/vogue-client.js"
        type="text/javascript">
</script>

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.

Want to find out more?

https://github.com/andrewdavey

http://nodejs.org/

http://npmjs.org/

http://aboutcode.net/vogue/

http://socket.io/

About the author

Luke Quinnell

Luke Quinnell

Luke Quinnell is a Principal Developer at Box UK, working primarily with the Amaxus Content Management System developing core features and custom functionality. His main interests are PHP web development, User Experience and Information Architecture.

Add Your Comment

Related content

We're hiring. Let's talk. View available roles