LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#1

Post by Bartlet » Sat, Oct 29, 2011, 8:24 PM UTC

LiveReload: Reflect CSS Changes Instantly, with No Browser Reload
livereload.com

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#2

Post by lean » Sat, Oct 29, 2011, 9:18 PM UTC

Look cool, let me know when there's a PC version.

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#3

Post by glenbo » Sat, Oct 29, 2011, 9:18 PM UTC

The technology that drives this is undoubtedly very interesting, but what does this truly offer? What would be the practical application of this?

Are there droves of people who could benefit from constantly changing css?

Perhaps I'm just missing something rather obvious. If so, please help me.

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#4

Post by benatkin » Sat, Oct 29, 2011, 9:24 PM UTC

I have a mac, but prefer to use just Guard and the browser extensions. Fortunately, that info is still available:

https://github.com/mockko/livereload

After all the time that's been put into the free version by others I wish livereload.com would have a prominent link to it. But I'm glad that the gem, which I don't use because https://github.com/guard/guard-livereload is easier to install, and the browser extensions are available under the MIT license.

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#5

Post by benatkin » Sat, Oct 29, 2011, 9:27 PM UTC

lean wrote: post #2

Look cool, let me know when there's a PC version.

There's an open source version that's in ruby and runs on the command line, and likely works on windows.

https://github.com/guard/guard-livereload

https://github.com/guard/guard (has windows instructions)

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#6

Post by Xavi » Sat, Oct 29, 2011, 9:37 PM UTC

glenbo wrote: post #3

The technology that drives this is undoubtedly very interesting, but what does this truly offer? What would be the practical application of this? Are there droves of people who could benefit from constantly changing css? Perhaps I'm just missing something rather obvious. If so, please help me.

Quickly switching of themes is one reason why you would want to make it easy to change css: http://xavi.co/articles/jquery-ui-css-themes-hosted-on-cdn

I can also be quite useful during development. One cool trick to achieve something similar is to add a contentEditable attribute to a style tag: http://css-tricks.com/8618-show-and-edit-style-element/

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#7

Post by newhouseb » Sat, Oct 29, 2011, 9:56 PM UTC

Sigh, these sorts of things always force you to change how you develop and don't really work for mobile web dev. This wheel seems to been re-invented far too often.

Alternatively:

  sudo pip install watchdog
  watchmedo shell-command -w -c "make" -i '*/.*' -R

Where "make" is either for a makefile or some other build script.

And then just put live.js (from http://livejs.com/) as a script inside your pages.

This works anywhere with basically any stack (i.e. if you had some strange alien CSS preprocessor as long as it can be processed with a command you can use this), integrates into your normal build system and requires no browser plugins or proprietary binaries.

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#8

Post by ELV1S » Sat, Oct 29, 2011, 10:26 PM UTC

newhouseb wrote: post #7

Sigh, these sorts of things always force you to change how you develop and don't really work for mobile web dev. This wheel seems to been re-invented far too often. Alternatively: sudo pip install watchdog watchmedo shell-command -w -c "make" -i '*/.*' -R Where "make" is either for a makefile or some other build script. And then just put live.js (from http://livejs.com/ ) as a script inside your pages. This works any…

LiveReload should works on every browser that supports WebSockets. It should work on modern WebKit-based mobile browsers.

Live.js uses polling. It sends XHR HEAD request every second.

LiveReload monitors file changes using FSEvents (on Mac OS X) and inotify (on Linux). When the file modified, it pushes its path to the browser and reloads immediately.

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#9

Post by hejdadig » Sat, Oct 29, 2011, 10:47 PM UTC

Another alternative is https://github.com/mape/node-hotcode

Has page reload and doesn't require any project specific settings.

It is open source and works (web app using an iframe + path to watch) without altering development habits.

Re: LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

#10

Post by benatkin » Sat, Oct 29, 2011, 11:27 PM UTC

ELV1S wrote: post #8

newhouseb wrote: post #7

Sigh, these sorts of things always force you to change how you develop and don't really work for mobile web dev. This wheel seems to been re-invented far too often. Alternatively: sudo pip install watchdog watchmedo shell-command -w -c "make" -i '*/.*' -R Where "make" is either for a makefile or some other build script. And then just put live.js (from http://livejs.com/ ) as a script inside your pages. This works any…

LiveReload should works on every browser that supports WebSockets. It should work on modern WebKit-based mobile browsers. Live.js uses polling. It sends XHR HEAD request every second. LiveReload monitors file changes using FSEvents (on Mac OS X) and inotify (on Linux). When the file modified, it pushes its path to the browser and reloads immediately.

> Live.js uses polling. It sends XHR HEAD request every second.

The horror!