self.conference 2019 "Git Hook[ed]" on images and up your documentation game_
Can you remember the difference between two hex color values? Me neither! Entering visual representations of recently-changed elements into version control makes review of past changes easier & speeds acclimation to a new web project, especially for visual learners. Surprisingly, methods for including images in your version control 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 review of methods currently in use and discuss the benefits and drawbacks of each. The audience will learn from a survey of tools used by both designers and web developers, what methods are most appropriate for individual projects, & how these methods differ from those used at some of the largest companies (Google, eBay, etc.). Finding a method to track changes in your visual elements will save our future contributors (and future selves!) the pain of having to distinguish #2dc651 (lime green) from #34a34e (darker(!) lime green) and ultimately make our commit histories cleaner and our repos easier to navigate in ways that many of us have never imagined!
This talk was given at self.conference 2019 in Detroit.
Event link: https://selfconference.org/sessions#session_997
About Veronica Hanus
Before Veronica was a programmer, she was a researcher (she helped pick the Mars Curiosity Rover’s landing site!) with an eye for process improvement. As she’s taught herself web development, she’s brought her research approach from her time at NASA-JPL & MIT into whatever she was learning. She loves exploring the web and teaching, and recently co-taught a PyCon tutorial on using web-scraping and modeling to predict Oscar winners. When she isn’t learning how the web can be better for developers, she enjoys blogging, nerding out about documentation, and snuggling as many cats as possible.
Push ASAP Commit
Make changes to
Learning to use
A more thorough daily ﬂow:
- Pull other’s changes
- Create branch /
- Local changes
- Push when element is
- Check status
- Continue local
- (eventually) Merge
You may also:
- Undo commits
- Squash commits
- Undo push
Challenges of Git’s “time travel” w/ commits
“Picture perfect” commitsComment fatigue
- Summarize in subject (“what”),
expand in body (“why”)
- Avoid abbreviations
- Use metadata (Issue IDs, etc.)
- The test: “If applied, this
commit will *subject line*”
- Make Git log useful!
- “Remove lighter
green font & add
underline to nav
What commit message should we make?
So many greens!
Long and still hard
What would you do?
Better commit messages? Find tools giving cues? Other ways?
Your idea here
What does a design process look like?
Iteration w/o design wastes time!
Design has methods!
- Team “interview”
- Translate business objectives to new state
- ID what you don’t know
- Review existing market product
- Listing user tasks
- Focus group
- Card sorting
- Usability test
- Concept testing
- Guerrilla testing
- Field studies
- Eye movement tracking
- Accessibility audit
- A/B testing
- (finally) Iteration @veronica_hanus #SelfConf
Screenshots in a local folder
Adding visuals any way I can!
Screenshots in saved in Git
Moving toward a solution
What pain points does my
How do I address these?
Screenshots for testing… and tracking?
Many tools: Cypress-match-screenshot, Puppeteer-screenshot-tester, Resemble.js, Wraith...
A “Git” for design!
Our examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin @veronica_hanus #SelfConf
Ready to dive in
shot to automate
Git hooks “hook” one
action to others
Terminal prompt for you
to save by hand
Time to take
Remembering to take
Adding image link to
your commit message
Your commit to Git
Git hook calls Pyppeteer
Pyppeteer takes screenshot
Push ASAP Commit
Make changes to
➔ 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
👇Your company recruiting a
DevRel or Dev Advocate?👇
Each of you for coming(!),
self.conference for a wonderful event, the
many, many devs & designers I
badgered when I was investigating this
problem, my crew Deborah, Diego, &
Anna for help making this talk happen
I tweet at @veronica_hanus
Video & Slides 🔜
🙌 Go build the tools you need!
Let’s talk about in-code comments!
(3-5 min survey)
- Git instructions for beginners:
- Daily Git commands: https://gist.github.com/jedmao/5053440
- Commit XKCD: https://xkcd.com/1296/
- Good commit messages: https://chris.beams.io/posts/git-commit/
- Color preview in-editor: Sublime’s Color Highlighter (view), Atom’s Pigments (view) &
Color Picker (select/add)
- Source for screenshot diffing images: https://online-image-comparison.com/
- “Automated visual diffing with Puppeteer” (2018), Monica Dinculescue’s blog
- Grumpy cat says “no new friends” https://makeameme.org/meme/no-new-friends-0lalol
Steps to roll back to a commit:
- Select the commit
- Find the ID for the commit
- Enter command to “checkout” the
commit with that ID
- Open the code & HTML file
- Is it what we want?
- Create new branch (section of
timeline) before making changes
Rolling back individual commits