A Typical (tedious) Web Design Workflow

If you’re a front end web developer, your daily workflows probably look something like this:

1. Put your files on a web server (either remotely or on your local computer)
2. Load the page in a browser
3. Check, and see that it isn’t quite right
4. Make a change (e.g., a CSS tweak or an image edit)
5. Save
6. Switch back to the browser
7. Reload the page
8. Repeat steps 4 – 7 about 100 times

As you add a device to your workflow, the problem gets compounded because you now have to touch the device each time you make a change. Add more than one device, and you are sure to develop some wrist problem due to repetitive stress injuries.

Of course Shadow helps you with its synchronous browsing feature, but what if Shadow devices were also automatically refreshed as soon as you Save after a change? We want to make sure you know about a pretty cool tool that works well with Shadow – it’s called LiveReload, and it can further improve your workflows.

LiveReload

LiveReload, as you’ve probably guessed, reloads the page for you as soon as you Save. When you make a change to a CSS file or an image, the browser is updated instantly without having to switch to the browser to reload the page. It does this by watching your filesystem for changes in your project files.

Using Shadow and LiveReload together

1. Launch LiveReload
2. Click the + button at the bottom, and add the site folder you want LiveReload to monitor
3. Paste this code into the HEAD tag of your html – replace the 192.168.1.104 IP address with your machine’s current IP address (see Things To Be Aware Of section below)

<!-- inject LiveReload script -->
<script src="http://192.168.1.104:35729/livereload.js?snipver=1"></script>

4. Browse to the URL of your page in the Chrome browser on your desktop (e.g., http://localhost/meridien/index.html)
5. Connected Shadow devices will follow along using Shadow’s synchronized browsing feature
6. Make a small CSS tweak in a .css file in the site folder you asked LiveReload to monitor in step #2, and Save the change
7. Watch your Shadow devices (iPod, iPhone, iPad), and see the changes appear automagically
8. If you load that same URL in other browsers, they will also benefit form LiveReload.

Things To Be Aware Of

• For step 3 only, using ‘localhost’ won’t work – LiveReload requires using your machine’s current IP address. The current IP address is conveniently displayed at the bottom of the window in the Shadow Chrome Extension.
• Also regarding step 3, it is necessary to use the LiveReload script in your files if you want to see updates on your Shadow devices. LiveReload has optional browser plug-ins, but those can’t be used with devices.
• LiveReload uses “WebSockets” to propogate changes. As of now, the Android WebView does not support Web Sockets so this currently only works for connected Shadow iOS devices. You can check When Can I Use to verify this.
• Keep an eye on the roadmap for LiveReload to see what they’re planning next.

Amit Kishnani
Sr. Software Engineer
Adobe Shadow team