Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Imagining Colors is Hard:
Representing Visual
Changes in Version
Control
@veronica_hanus
#67ff46 #8fff9a #a0ffd3
@veronica_hanus
Screenshots in Git
The Hacks
Color preview in-editor
Eg. Sublime’s Color Highlighter (view), Atom’s Pigments
(view) & Colo...
Learn from other methods
A few tools:
➔ Puppeteer-screenshot-tester
➔ Resemble.js
➔ Wraith
@veronica_hanus
One examplet: “...
Learn from tools for other visual creators
@veronica_hanusOur examples: Abstract’s Compare Mode, Sketch’s Pages & Artboard...
What will you use?
@veronica_hanus
Resources Thanks to…
The #Hacktoberfest organizers for the
great time. Kasey Wang, Debo...
Upcoming SlideShare
Loading in …5
×

Imagining colors is hard: Representing visual changes in version control

68 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Imagining colors is hard: Representing visual changes in version control

  1. 1. Imagining Colors is Hard: Representing Visual Changes in Version Control @veronica_hanus #67ff46 #8fff9a #a0ffd3
  2. 2. @veronica_hanus
  3. 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. 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. 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. 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

×