9 ms·

LiveReload: Reflect CSS Changes Instantly, with No Browser Reload

46 points by Bartlet 15y ago

lean 15y ago
Look cool, let me know when there's a PC version.
- benatkin 15y ago
  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-livereload https://github.com/guard/guard https://github.com/guard/guard (has windows instructions)
- andreyvit 15y ago
  Sure, will let you know! (Some time early next year, I guess.) Meanwhile, as other point out, you can use guard-livereload on PC if you don't mind installing Ruby.
- andreyvit 15y ago
  On the other hand, there does not seem to be a way to contact a HN user unless you specify your email in your profile. Let's just hope “LR on Windows” will make it to HN home page some day too.
glenbo 15y ago
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 15y ago
  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 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/ http://css-tricks.com/8618-show-and-edit-style-element/
- andreyvit 15y ago
  Everyone who does web development benefits from this, starting with myself. Have your browser side-by-side with your editor, save your CSS, boom.
benatkin 15y ago
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 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 https://github.com/guard/guard-livereload is easier to install, and the browser extensions are available under the MIT license.
- andreyvit 15y ago
  I will have a prominent link to guard. The site is very much alpha and has been built overnight. My plan is to deprecate the old livereload gem and point people who want a free/command-line version to guard-livereload.
- jessor 15y ago
  +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.
newhouseb 15y ago
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/ 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 15y ago
  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 15y ago
    > Live.js uses polling. It sends XHR HEAD request every second. The horror!
    - hnwh 15y ago
      It is horror when you forget about it, and push it up to production
      - benatkin 15y ago
        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.
- andreyvit 15y ago
hejdadig 15y ago
Another alternative is https://github.com/mape/node-hotcode 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.
sixcorners 15y ago
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 15y ago
  You have to reload the page then. Also, copy the changes from this file to your stylesheet.
dhx 15y ago
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.
andreyvit 15y ago
Hey! Woke up this morning to find LiveReload on HN home page. Ask me anything, I guess. :)
- peng 15y ago
  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 15y ago
    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.
uses 15y ago
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 15y ago
  https://github.com/NV/chrome-devtools-autosave https://github.com/NV/chrome-devtools-autosave You might find this useful.
ComputerGuru 15y ago
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!
- bryanh 15y ago
  One use case is a browser in another display. Nice to CTRL-S and just glance.
- andreyvit 15y ago
  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.

46 points by Bartlet 15y ago

lean 15y ago

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

benatkin 15y ago
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-livereload https://github.com/guard/guard https://github.com/guard/guard (has windows instructions)
andreyvit 15y ago
Sure, will let you know! (Some time early next year, I guess.) Meanwhile, as other point out, you can use guard-livereload on PC if you don't mind installing Ruby.
andreyvit 15y ago
On the other hand, there does not seem to be a way to contact a HN user unless you specify your email in your profile. Let's just hope “LR on Windows” will make it to HN home page some day too.

glenbo 15y ago

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 15y ago
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 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/ http://css-tricks.com/8618-show-and-edit-style-element/
andreyvit 15y ago
Everyone who does web development benefits from this, starting with myself. Have your browser side-by-side with your editor, save your CSS, boom.

benatkin 15y ago

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 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 https://github.com/guard/guard-livereload is easier to install, and the browser extensions are available under the MIT license.

andreyvit 15y ago
I will have a prominent link to guard. The site is very much alpha and has been built overnight. My plan is to deprecate the old livereload gem and point people who want a free/command-line version to guard-livereload.
jessor 15y ago
+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.

newhouseb 15y ago

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/ 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 15y ago
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 15y ago
  > Live.js uses polling. It sends XHR HEAD request every second. The horror!
  - hnwh 15y ago
    It is horror when you forget about it, and push it up to production
    - benatkin 15y ago
      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.
andreyvit 15y ago

hejdadig 15y ago

Another alternative is https://github.com/mape/node-hotcode 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.

sixcorners 15y ago

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 15y ago
You have to reload the page then. Also, copy the changes from this file to your stylesheet.

dhx 15y ago

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.

andreyvit 15y ago

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

peng 15y ago
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 15y ago
  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.

uses 15y ago

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 15y ago
https://github.com/NV/chrome-devtools-autosave https://github.com/NV/chrome-devtools-autosave You might find this useful.

ComputerGuru 15y ago

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!

bryanh 15y ago
One use case is a browser in another display. Nice to CTRL-S and just glance.
andreyvit 15y ago
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.