Put your hand up if you think you can visualize what the last web page you built would look like with the text color lightened two shades... Entering visual representations of recently-changed elements into version control makes review of past changes easier & speeds acclimation to a new web project. Surprisingly, methods for doing so aren’t standardized and are rarely used outside of large companies, and the rest of us are left checking out every major commit and viewing changes locally! Join me for a dive into methods currently in use and discuss the benefits and drawbacks of each.

1. Imagining Colors is Hard:
Representing Visual
Changes in Version
Control
@veronica_hanus
#67ff46 #8fff9a #a0ffd3

2. @veronica_hanus

3. Screenshots in Git
The Hacks
Color preview in-editor
Eg. Sublime’s Color Highlighter (view), Atom’s Pigments
(view) & Color Picker (select/add)
@veronica_hanus

4. Learn from other methods
A few tools:
➔ Puppeteer-screenshot-tester
➔ Resemble.js
➔ Wraith
@veronica_hanus
One examplet: “Automated visual diffing with Puppeteer” (2018),
Monica Dinculescue’s blog https://bit.ly/2C3z25t
https://online
-image-comp
arison.com/
Screenshot diffing

5. Learn from tools for other visual creators
@veronica_hanusOur examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin
Source: https://twitter.com/zeplin/status/790945731339182080
Source: https://www.goabstract.com/blog/compare-mode/

6. What will you use?
@veronica_hanus
Resources Thanks to…
The #Hacktoberfest organizers for the
great time. Kasey Wang, Deborah
Hanus, Diego Berrocal, & Anna
Ossowski for help investigating this
topic & especially to my devoted talk
“practice partner”
➔ Puppeteer/Selenium/WebDriver for
screenshots taken at every change
➔ Abstract/Zeplin/Sketch for
scroll-through visuals to be used
alongside your version control
➔ Hand-created screenshots checked
into version control
➔ Editor plugins that help you
visualize the colors on your site
➔ Your knowledge of your process &
workflow for deciding what is right for
you