

LiveReload: Reflect CSS Changes Instantly, with No Browser Reload - Bartlet
http://livereload.com/

======
newhouseb
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.

~~~
ELV1S
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.

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

The horror!

~~~
hnwh
It is horror when you forget about it, and push it up to production

~~~
benatkin
Has nothing to do with Live.js then. Isn't really even about a developer's
forgetfulness when pushing to production. It would be about failure to set up
different production and development environments, which can cause problems
much worse than a wasteful AJAX call.

------
benatkin
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.

~~~
jessor
+1 for Guard. I recently switched to Mac and couldn't get stock livereload to
run with my rvm'd 1.9.2 system ruby. I'm happy to have found Guard, I'm
running it with livereload and compass and love the streamlining.

------
hejdadig
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.

------
ComputerGuru
I don't get it... how freaking hard can it be to hit F5?

I'm not trying to be snarky - I'm just genuinely surprised that no one has
posted that they consider the need for "live refresh" to be wholly
unnecessary.

I come from a background in C++ development where compile times range anywhere
from a minute to a day, so I'm truly thankful for "instant compilation" of CSS
and HTML via a single click of a keyboard button..... but I wouldn't ever
dream that my need to hit the F5 key was hindering my development ability!

~~~
andreyvit
Genuine answer is that you might want to try a tool like MacRabbit's CSSEdit
first, which applies your changes without even saving. You get used to seeing
the result instantly.

My motivation for building LiveReload has been to get the same instant
feeling, but with compiled languages like LESS.

------
glenbo
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.

~~~
Xavi
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/>

------
sixcorners
Could just use Google Chrome and test your changes with this file:

C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\User
StyleSheets\Custom.css

Every time it is saved the changes are reflected on all open webpages
instantly.

~~~
ELV1S
You have to reload the page then. Also, copy the changes from this file to
your stylesheet.

------
andreyvit
Hey! Woke up this morning to find LiveReload on HN home page. Ask me anything,
I guess. :)

~~~
peng
Hey Andrey, it's pretty awesome that you support Stylus. Do you think you can
make this work with VM-based development? I'm working in VirtualBox Ubuntu but
viewing my site locally in Chrome (OS X).

~~~
andreyvit
I'd love to add GUI support for that, but there are more important tasks that
would help many more people (like, polishing the Mac ver and making a Windows
one).

For remote server use cases, I recommend guard-livereload. It uses my browser
extensions and works really well on any platform.

------
dhx
Epiphany (web browser bundled with the Gnome desktop environment) has
supported a reduced version of this functionality for a number of years now.
It's fairly easy to implement with the dnotify functionality of the Linux
kernel.

------
uses
I have good luck with using Chrome's CSS editor, then right clicking and
hitting "Save As". You can keep working without reloading, and periodically
save your changes back.

~~~
ELV1S
<https://github.com/NV/chrome-devtools-autosave> You might find this useful.

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

~~~
benatkin
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)

