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 PyCon Australia 2019 in Sydney, AUS. Event link: https://2019.pycon-au.org/talks/git-hooked-on-images-up-your-documentation-game 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.

1. “Git Hook[ed]” on
images & up your
documentation game
@veronica_hanus #pyconau

2. @veronica_hanus #PyConAUMake your own! https://www.ascii-art-generator.org/

3. @veronica_hanus #PyConAU

4. Doing things
“the wrong way”
is part of learning
@veronica_hanus #PyConAU

5. Focusing on
“the right way”
freezes
@veronica_hanus #PyConAU

6. @veronica_hanus #PyConAUhttps://imgs.xkcd.com/comics/git.png, modified

7. @veronica_hanus #PyConAU

8. View changes
remotely, feel
amazing and...
Push ASAP Commit
Make changes to
code locally
Learning to use
Git
A more thorough daily flow:
- Pull other’s changes
- Create branch /
checkout branch
- Local changes
- Commit
- Push when element is
done
- Check status
- Continue local
changes
- (eventually) Merge
branch
You may also:
- Undo commits
- Squash commits
- Undo push
- Fetch
- Rebase
@veronica_hanus #PyConAU

9. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham

10. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham

11. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham

12. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham

13. @veronica_hanus #PyConAU
https://xkcd.com/1296/

14. Rules of commit “time travel”
- Summarize in subject (“what”), expand in body
(“why”)
- Avoid abbreviations
- Use metadata (Issue IDs, etc.)
- The test: “If applied, this commit will *subject line*”
- The goal: Make Git log useful!
@veronica_hanus #PyConAU

15. @veronica_hanus #PyConAU
https://xkcd.com/1296/

16. - “Remove lighter
green font & add
underline to nav
bar”
- “Remove
lighter/brighter
font &...”
What commit message should we make?
So many greens!
Long and still hard
to understand!
@veronica_hanus #PyConAU

17. What would you do?
Better commit messages? Find tools giving cues? Other ways?
Your idea here
@veronica_hanus #PyConAU

18. What does a design process look like?
Iteration w/o design wastes time!
@veronica_hanus #PyConAU

19. @veronica_hanus #PyConAU

20. Design has methods!
- Team “interview”
- Translate business objectives to new state
- ID what you don’t know
- Review existing market product
- Brainstorming
- Listing user tasks
- Roadmap
- Focus group
- Card sorting
- Usability test
- Concept testing
- Guerrilla testing
- Field studies
- Eye movement tracking
- Accessibility audit
- A/B testing
- (finally) Iteration @veronica_hanus #PyConAU

21. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham

22. Screenshots in a local folder
Adding visuals any way I can!
@veronica_hanus #PyConAU

23. Screenshots in saved in Git
Moving toward a solution
What pain points does my
solution have?
How do I address these?
@veronica_hanus #PyConAU

24. @veronica_hanus #PyConAU
“Oh, we have that!”

25. Screenshots for testing… and tracking?
Many tools: Cypress-match-screenshot, Puppeteer-screenshot-tester, Resemble.js, Wraith...
@veronica_hanus #PyConAU

26. @veronica_hanus #PyConAU

27. @veronica_hanus #PyConAU
“Oh, we have that!”

28. A “Git” for design!
Our examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin @veronica_hanus #PyConAU

29. @veronica_hanus #PyConAU

30. Ready to dive in
Puppeteer or
Cypress-match-screen
shot to automate
screenshots
Git hooks “hook” one
action to others
Terminal prompt for you
to save by hand
Time to take
screenshots
Remembering to take
screenshots
Adding image link to
your commit message
Pain Investigate
Your commit to Git
Git hook calls Pyppeteer
Pyppeteer takes screenshot
Terminal
prompts you
to save
@veronica_hanus #PyConAU

31. Bring yourself
Geology Web
�
@veronica_hanus #PyConAU

32. @veronica_hanus #PyConAU
Your super-powers
work here

33. View changes
remotely, feel
amazing and...
Push ASAP Commit
Make changes to
code locally
🤦
☁☁☁
@veronica_hanus #PyConAU

34. Make your own!
➔ Puppeteer/Selenium/WebDriver for
screenshots taken at every change
➔ Hand-created screenshots checked
into version control
➔ Git Large File Storage or store files
outside Git to accommodate file
accumulation
Existing tools
➔ Percy for visual testing
➔ Editor plugins that help you
visualize the colors on your site
➔ Abstract/Zeplin/Sketch for
scroll-through visuals alongside your
version control
➔ Git-difftool shows changes from
common diffing tools
➔ Git image view modes swipe &
compare--your own personal, modern
Blink comparator
Your knowledge of your
process to decide what is
right for you

35. 👇Your company recruiting a
DevRel or Dev Advocate?👇
🙌Pick me!🙌
🙏Thanks to…
Each of you for coming(!), the PyCon AU
organizers 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
Non-tweeters 👋me@veronicahanus.com
Video & Slides 🔜
http://veronicahanus.com/talks
🙌 Go build the tools you need!
Let’s talk about in-code comments!
(3-5 min survey)
http://bit.ly/comment-use

36. Credits
- Git instructions for beginners:
https://docs.google.com/document/d/1YZInGNW_YZQvTTsiOA1BkboveFzlez0TdlCjKIk4
UK0/edit?usp=sharing
- Git XKCD: https://imgs.xkcd.com/comics/git.png
- 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/
- Mismatched puzzle Pieces:
https://whiletangerinedreams.typepad.com/.a/6a00d8341d093553ef0168e5c3bc61970c-pi
- 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
https://bit.ly/2C3z25t
- Grumpy cat says “no new friends” https://makeameme.org/meme/no-new-friends-0lalol
- Question party
https://www.workinsports.com/blog/how-to-ask-questions-that-will-always-inspire-thought
ful-answers/
@veronica_hanus