Skip to content
Simple browsers-editor css synchronization
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
README.org
config.js.sample
css-reload.js
css-sync-client.js
css-sync.js
package.json

README.md

Why

We want to shorten the feedback loop as much as possible.

Changes in edited css files are reflected immediately in browsers, without having to refresh them. The advantages are:

  • No refresh needed. On pages where multiple steps must be performed to get to the state we are interested in styling, refresh is a huge waste of time.
  • Debug styles in multiple browsers at once. This also allows more collaboration.

Setup

  • Install npm.
  • Install socket.io under css-sync/.
    npm install socket.io

Usage

  • Edit config.js to tell the server which url should map to which file on disk. For example:
    function urlToFileName(url) {
      return {
        "/css/foo.css": "/home/ubolonton/my-project/css/foo.css"
      }[url];
    }
  • Run the watching server
    node css-sync
  • Include css-reload.js, or copy its content to the page that needs to reload its css files on change, optionally specifying which css link elements should be watched (default to all those with relative URL). For example:
    c.links = $("link[href^='/css/foo.css']");
  • Load the page. Anytime a css file is saved the browser will reload the associated css link without refreshing.

TODO Features to be considered

  • Sync changes from browser css editors back to server (they have niceties, after all)?
You can’t perform that action at this time.