LiveReload; tightening the loop of web development

A lovely little discovery for me recently is LiveReload. It’s an file watcher app, and associated browser plugins, that will look over your HTML, CSS, and JavaScript files. When they change, the page you are developing reloads. 

What that means is that in a two-monitor system,  you can have your text editor in one window, and the browser in the other, and a simple save in the text editor reloads the page in the browser;

Image

This helps development, especially things like developing layouts or d3 visualizations because as soon as you save, you see the effects of your change. This means you don’t need to grab the mouse, select the browser, and refresh the page; you just keep on typing.

This also works really nicely when you’re looking at a jasmine spec runner; you can hack on your JavaScript without having to go to the browser at all; the browser now becomes a kind of status monitor, constantly telling you about the health of your code. 

Basic operation;

1. Install the chrome plugin;

Image

2. Install LiveReload. It looks like this;

Image

3) Use the ‘+ add’ button to start monitoring a folder

4) Copy the code snippet in the box marked ‘2’ above into the <head> tag of your web page.

5) Load the page in chrome, and click the LiveReload button that now sits at the right-hand-side of the addressbar.

That’s it! LiveReload will now refresh your pages for you as you save.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s