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

2.
Creative documentation
@veronica_hanus #SelfConf

3.
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 #SelfConf

4.
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!
@veronica_hanus #SelfConf

5.
- “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 #SelfConf

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

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

8.
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 #SelfConf

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

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

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

12.
@veronica_hanus #SelfConf

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

14.
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 #SelfConf

15.
Bring yourself
Geology Web
�
@veronica_hanus #SelfConf

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

17.
Resources
➔ 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

18.
👇Your company recruiting a
DevRel or Dev Advocate?👇
🙌@veronica_hanus🙌
🙏Thanks to…
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
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

19.
Credits
- Git instructions for beginners:
https://docs.google.com/document/d/1YZInGNW_YZQvTTsiOA1BkboveFzlez0TdlCjKIk4
UK0/edit?usp=sharing
- 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
https://bit.ly/2C3z25t
- Grumpy cat says “no new friends” https://makeameme.org/meme/no-new-friends-0lalol
@veronica_hanus

20.
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
@veronica_hanus