Productivity Tip #2: Use LiveReload For Faster Web Development

A huge timesaver in my development cycle is LiveReload, a tool which enables instant refreshing of your browser content upon file save for SASS, CSS, HTML, Javascript, or other configured file types like PHP.

There are Mac and Windows apps for LiveReload. Since I alternate between Linux and Mac machines, I use a setup that works on either — Grunt with the grunt-contrib-watch plugin to watch my files for changes and trigger a page reload. Before moving to Grunt, I used Guard with the guard-livereload gem with which also worked perfectly.

You’ll also want to install the LiveReload browser extension for your browser of choice. To enable LiveReload for your site, just click on the LiveReload toolbar button. If it’s not able to connect to the LiveReload server (either the standalone Mac or Windows app, or Grunt’s watch server in my case), it will let you know.

Alternatively, instead of installing the browser plugin, you can add a small Javascript snippet to your page to enable LiveReload, but I think the browser extension is easier. The snippet has to be added to each page for which you want LiveReload to be enabled.

Long live LiveReload!