Today I found a new competitor for livereload, it's called BrowserSync. BrowserSync is also capable of live reloading your website, but it's not constrained to one browser or even one device!
In the demonstration video below, I'm changing the background color of one of our websites. You can't really see me typing because of the video quality, but you'll just have to take my word for it. The devices you see below are a Macbook (with external screen) an iPad 2 and a Motorola Moto G.
But BrowserSync does a lot more than just reloading. The coolest thing it does is synchronising between multiple browsers (and platforms). In the video below I'm scrolling through the website on my Macbook. You can see that the iPad and Smartphone scroll with me, even though the website is displayed differently because it's responsive.
(make sure you have node installed)
First install BrowserSync by executing :
$ npm install -g browser-sync
We will try it out on this website. Start BrowserSync by executing:
$ browser-sync start --proxy blog.avisi.nl
It should give you something like this:
<code>[BS] Proxy running. Use this URL: http://172.31.1.32:3006</code>
Now make sure you have mobile device or a tablet in the same network and open this url in your browser and on your mobile. If you start scrolling on your desktop the other device wil also scroll. You can click around in the blog if you open a post and go to the comments section and start filing in a comment the devices will sync.