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

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.

  • Login to see the comments

  • 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://online -image-comp 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: Source:
  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