CSSrefresh - Automatically Refresh CSS files | Hacker News Reader

CSSrefresh - Automatically Refresh CSS files

cssrefresh.frebsite.nl

74 pointsjenhsun25 comments

LiveReload (http://livereload.com/) had already solved this.

I'm wondering if there's something that refreshes the browser when you make changes to the CSS files _before_ saving? Like CSSEdit (which I've used religiously for the past 2 years), but applies to all sort of files (HTML/HAML, SASS/SCSS/LESS).

First thing I thought when I saw this was livereload, which is fantastic. I have been using it for months and it's never failed me, especially with 2 screens for front end dev

It is a real shame that CSSEdit has been rolled into Espresso with no real benefit or gain to the user. CSSEdit is one of my most favourite tools to use while developing websites and I am going to hold onto it as long as I possibly can.

I used to absolutely love both Espresso and CSSEdit too but I've now switched to a more minimal editor. I started using LESS so CSSEdit wasn't cutting it anymore. Instead I use either Less.app or CodeKit which monitors your working directory, automatically compiles LESS to CSS on save, and refreshes the browser tab of the site you're working on.

I do agree that rolling CSSEdt into Espresso isn't the same. I don't know why but I liked CSSEdit better when it was a standalone app. Anyway, as an alternative to CSSEdit or the other desktop apps that give you the instant refresh, you could always write a shell script that watches your working directory and executes the LESS (or SASS/SCSS) compiler then refreshes your browser. I actually used that once but lost it while formatting the laptop it was on. The part that watches the folder and executes the compiler is easy but I had someone else help me with the browser refreshing part.

It's great that there are other services out there that do something similar, but I really don't like the use of the phrase "already solved this." Everything can be improved. Any one product is never the one fix all forever.

Alternatively, LiveJS[1] which follows the same concept.

[1]: http://livejs.com/

It would be nice to have some information about the inner workings of the script on the site.

The actual script on the site is unminified and quite easy to grasp: Since it's only a client-side solution it has to resort to polling every stylesheet every second(!) and check the file's Last-Modified header from the ajax request.

This is hardly an optimal solution, since you end up making a lot of requests even though no changes are being made. In addition to the performance standpoint, you end up cluttering any ajax monitoring views (e.g. Chrome dev tools).

LiveReload (http://livereload.com/) seems to be a good alternative (Mac only). Any suggestions for similar solutions for other OSes?

EDIT: Just tried the experimental v0.0.2 Windows release of LiveReload. Installation was really easy, and I got it working with the Firefox extension right away. More info: http://help.livereload.com/kb/roadmap/latest-development-bui...

I don't see an issue with the polling. You're only ever going to use this in dev, I don't care that it polls my localhost frequently. If I'm optimizing my own JavaScript I won't have it enabled. The bookmarklet seems the way to go. Enable it while you're working on CSS, otherwise you don't need it.

I agree with your points. Polling is not the right approach IMO. A much simpler approach would be to use the following script as a bookmark, and hit the bookmark when you want to see the changes:

javascript:(function(){var%20s,i,x;x=document.getElementsByTagName('link');for(i=0;i<x.length;i++){x[i].href=x[i].href+'?'+new%20Date().getTime();}})();

A very different approach, but Fog Creek's WebPutty helps solve this as well: http://www.webputty.net/ (HN thread: http://news.ycombinator.com/item?id=2786893)

Check my django-cssreload app https://github.com/andreyfedoseev/django-cssreload

It does similar thing but with less AJAX requests. Works only with Django though.

"When you're coding a website, nothing can be more frustrating than having to switch from the texteditor to the browser over and over again, just for small changes to occur."

And then:

"With CSSrefresh installed, all the included stylesheets are automatically refreshed directly after you save them."

So you still have to switch between your browser and your editor, right?

side-by-side windows

or multiple monitors.

I use this bookmarklet : http://david.dojotoolkit.org/recss.html

https://addons.mozilla.org/en-US/firefox/addon/auto-reload/ is a Firefox addon which reloads a page when it (and any linked files) changes. Works great for me. It also works with file:/// URLs.

Using guard-livereload on linux, you can make the browser refresh on any change in the filesystem. https://github.com/guard/guard-livereload This is an awesome tool...

I use firebug to do this

Very cool. I still prefer editing via the Chrome developer tools resources tab.

github/sourceforge/googlecode/etc link would be lovely!

Awesome!!!

sass -watch yourstyles.scss:yourstyles.css is what you should be doing instead of writing css.

I agree. Sass has really made doing front end work quite pleasant.

Sorry, different issue. Automatic precompilation in SASS is nice, but it doesn't refresh the browser for you.

As mentioned in other comments, LiveReload does this for CSS or SASS (Mac only, unfortunately).

LiveReload hasn't been that consistent for me. I do wish that not to be the case.

Reply on news.ycombinator.com