It’s a web development pattern so ingrained we barely notice it: hit ⌘-S to save an HTML or CSS file, ⌘-TAB to switch to a browser window, ⌘-R to refresh it, then back to the editor for more changes, repeated dozens of times a day.
Anything that cuts down this series of steps reduces fatigue while forging a closer link between code and design: rather than playing a guessing game (“does this work?” (save / refresh) “maybe this?” (save / refresh)) developers can watch the browser adapt to their code changes in close to real time. There are several tools that accomplish this today, with installation just a click away:
LiveReload
Probably the best-known of the browser refresh applications, LiveReload ($10 at the Mac App store, with a beta currently free for Windows users) works by installing the free LiveReload browser extension (Firefox, Chrome, and Safari are currently supported). For Mobile Safari, a small, temporary JavaScript snippet can be added to pages.
Once installed, simply point the LiveReload application at the folder containing your site. LiveReload monitors the save state of web files, including HTML, CSS, JavaScript and images; it can also compile pre-processed code such as Sass and CoffeeScript. Hit ⌘-S and any changes are immediately reflected in the browser. Between Coda’s keyword-based Snippet completion, Emmet’s macro shortcuts and LiveReload, page creation can be extremely accelerated, and far more fluid than traditional workflows:
Alternatives
LiveReload is hardly the only player in this space. Alternatives include:
In addition, web development workflow suites such as Codekit, Prepos and Yeoman roll in live update features.
While the idea of in-browser development goes all the way back to Netscape Composer in 1997, credit for the popularization of live code editing probably rests with the Firebug browser extension. While Firebug and modern browser’s integrated developer tools remain extremely useful, right now I regard them as testing services, rather than development options. Similarly, most online sandboxes, such as Dabblet and CodePen, have similar update features as those we’ve discussed, but they are primarily testing and demonstration tools, rather than site development applications.
Setup
Applications like LiveReload work best when you have enough screenspace to display both your editor and an open browser window. A large monitor, or a dual-monitor setup, is pretty much a prerequisite.
Laptop users should be aware that there are several different techniques reloaders use to determine the change state of files. Reloadr and Live.js, mentioned above, use polling techniques, checking the file status repeatedly if there are no changes to the file. This can drain batteries faster than more subtle and integrated solutions such as LiveReload.
Conclusion
From a long-term perspective, LiveReload and similar tools take a significant step towards true in-browser design, and should be a part of any modern web development workflow. With Chrome Workspaces, Emmet’s upcoming LiveStyle and a general increase in the use of source maps, innovation promises to bring ever-greater integration between code and browser.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
