1.
Exploring the Intersection
of Code & Design
@veronica_hanus @FlatironSchool

2.
Code // Design
@veronica_hanus

3.
What is version control?
@veronica_hanus
Trello
Google Docs

4.
How does Git work?
Local & remote versions
Labeling each version
Avoid this

5.
How does Git work?
@veronica_hanus
Local & remote versions
Labeling each version
Avoid this

6.
A timeline of a Very Visual Veronica
My mantra: “Documentation Lowers Cognitive Load”
@veronica_hanus
Geology Web Workflows for ML
?

7.
@veronica_hanus
Iteration is not design!
What does design process look like?
- 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
Design has methods
& tools!

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

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

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

11.
Screenshots in a local folder
First attempts
Color preview in-editor
Eg. Sublime’s Color Highlighter (view), Atom’s Pigments
(view) & Color Picker (select/add)
@veronica_hanus

12.
Screenshots in saved in Git
Solving some problems
What pain points does my solution
have?
@veronica_hanus
How do I address these?

13.
Screenshots for testing… and tracking?
A few tools:
➔ Puppeteer-screenshot-tester
➔ Resemble.js
➔ Wraith
@veronica_hanus
One example: “Automated visual diffing with Puppeteer” (2018),
Monica Dinculescue’s blog https://bit.ly/2C3z25t
Screenshot diffing

14.
A “Git” for design!
@veronica_hanusOur examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin

15.
Ready to dive in
@veronica_hanus
Puppeteer or
Pyppeteer 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

16.
What can you bring?
@veronica_hanus
Geology Web Workflows for ML

17.
Keep in touch!
@veronica_hanus @FlatironSchool
Resources
Thanks to…
Each of you for coming(!), the Flatiron
School for a wonderful eventing, my
crew Kasey Wang, Deborah Hanus,
Diego Berrocal, & Anna Ossowski for
help investigating this topic
➔ 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