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 is hardly the only player in this space. Alternatives include:
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.
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.
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.