Current status: WIP. See design notes and current system structure in Hackpad.
When we write program, the code editor or IDE provides lots of hints like underlines and highlights that points out our mistakes. However, what do we have when we are tweaking complex graphical user interfaces, for example, a website?
Now, we have SeeSS.
SeeSS is a Chrome extension that helps you identify unintended visual changes by visualizing CSS change impact. It tells you what parts of website has visually changed everytime you hit save in the code editor, satisfying your desire to oversee the impact of every line you've edited. It is the missing tool in your front-end development flow, sitting right between your editor and the preview browser.
TODO A image of where SeeSS belongs in csste.st flow
Currently WIP. No prebuilt extension is provided now.
After cloning the repository, do the following in the terminal.
$ npm install -g gulp
$ npm install
$ gulp build
During development, type gulp to start watching the source directories.
The unpacked Google Chrome Extension will then be compiled to build/.
We use cr-reloader to reload the extension on file save. Please install both Cr Reloader and
Cr Reloader Backend. Before developing, please open Cr Reloader from your Chrome App Launcher. Also, don't forget to update EXTENSION_ID constant in gulpfile.ls.
$ npm test
The source code in src/ and build/ are MIT Licensed. Source code in vendor/ are distributed as their original license.
This Google Chrome extension is an open-source re-write of the original version in the paper SeeSS: Seeing What I Broke -- Visualizing Change Impact of Cascading Style Sheets (CSS) (raw version before peer-review), which was published in ACM UIST 2013.