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;
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;
2. Install LiveReload. It looks like this;
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.
Steve-Driven Development 