Sidenote: LiveReload For Better Workflow

Advertisement

Welcome to the first entry in a new series on Smashing Coding called Sidenotes. Sidenotes are shorter than traditional Smashing Magazine articles and are designed to give you a quick introduction to useful tools and services. Over the next few weeks, we’ll be looking at productivity aids, useful apps, essential plugins and code examples that we think will help you in your daily coding work. If there is a tool, product or service that you think would be great to review, please do get in touch and let us know.

First up is LiveReload21, a utility that eliminates the need to refresh the browser when you want to see HTML, CSS and JavaScript changes.

Overview

  • Tool: LiveReload21
  • Description: Monitors changes in your files and automatically refreshes the browser
  • Category: Developer workflow
  • Price: Free
  • Time to implement: 5 minutes
  • OS: Mac OS X

What Does It Do?

LiveReload eliminates the need to refresh your browser every time you make a change to a file in your project. It’s pretty enticing: make a change to the CSS, and see your browser instantly refresh. The same goes for HTML, images and JavaScript. No more Alt + Tab and then hard-refresh; updates are now instant.

But it really comes into its own when used in combination with things like CoffeeScript3, SASS4, LESS5, HAML6 or Jade7. LiveReload monitors for any changes in your files, compiles them for you and then refreshes the browser. You can also specify the destination folder for compiled files. If this isn’t your thing or you have another way of handling compilation, you can simply turn it off.

Installation

  1. Download LiveReload from the website, and install it.
  2. After launching the application, you will be asked to add the relevant browser extensions.
  3. Click on the LiveReload icon in the menu bar, and specify your “folders to watch.” I usually pick the project’s root folder, but you can be more specific if you wish.
  4. Highlight your folder to watch and click “Settings.” From here, you can enable things such as Sass compilation.
  5. Activate LiveReload in your browser. (In Safari, right-click and then select “Enable Live Reload.” In Chrome, click the LiveReload toolbar button.)
  6. Change a file and watch the browser automatically refresh.

LiveReload for Rails

The installation process for Rails8 is a little different. The team at EnvyLabs has also created a four-minute screencast9 showing LiveReload in action.

Resources

(al)

↑ Back to topShare on Twitter

  1. 1

    it’s a pity that http://xrefresh.binaryage.com is no longer developed.. LiveReload is not so good yet, and it’s just for OS X. I wish someone could make such a tool for windows

    0
  2. 2

    Hi Keir Whitaker,

    Thank you a lot for a very Instructive tutorial. LiveReload is a awesome tool I know but I have a question, Is it working with firefox 5 ?

    Thank you

    0

↑ Back to top