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.
Version control for visual
learners
@veronica_hanus #gitmerge
@veronica_hanus #gitmerge
View changes
remotely, feel
amazing and...
Push ASAP Commit
Make changes to code
locally
My firs...
A timeline of a Very Visual Veronica
Always: “Documentation Lowers Cognitive Load”
@veronica_hanus #gitmerge
Geology Web W...
@veronica_hanus #gitmerge
Iteration is not design!
look like?
- Team “interview”
- Translate business
objectives to new
st...
Challenges of Git’s “time travel” w/ commits
“Picture perfect” commitsComment fatigue
- Summarize in subject (“what”),
exp...
- “Remove lighter
green font & add
underline to nav
bar”
- “Remove
lighter/brighter
font &...”
should we make?
So many gre...
What would you do?
Better commit messages? Find tools giving cues? Other ways?
Your idea here
@veronica_hanus #gitmerge
Steps to roll back to a commit:
- Select the commit
- Find the ID for the commit
- Enter command to “checkout” the
commit ...
Screenshots in a local folder
One problem at a time
Color preview in-editor
@veronica_hanus #gitmerge
Screenshots in saved in Git
Moving toward a solution
What pain points does my solution
have?
How do I address these?
@vero...
Screenshots for testing… and tracking?
A few tools:
➔ Puppeteer-screenshot-tester
➔ Resemble.js
➔ Wraith
Screenshot diffin...
@veronica_hanus #gitmerge
A “Git” for design!
Our examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin @veronica_hanus #gi...
Ready to dive in
Puppeteer or
Pyppeteer automate
screenshots
Git hooks “hook” one
action to others
Terminal prompt for
you...
Bring yourself
Geology Web Workflows for ML
@veronica_hanus #gitmerge
?
(what next?)
Keep in touch!
@veronica_hanus #gitmerge
Resources Thanks to…
Each of you for coming(!), the Git
Merge organizers for a wo...
@veronica_hanus #gitmerge
Credits
- Git instructions for beginners:
https://docs.google.com/document/d/1YZInGNW_YZQvTTsiOA...
Upcoming SlideShare
Loading in …5
×

Version control for visual learners

18 views

Published on

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.
This talk was given at Git Merge 2019 in Belgium. It was Veronica's first time speaking at a conference and her first international conference.
Event link: https://git-merge.com/#veronica-hanus

Published in: Software
  • Be the first to comment

  • Be the first to like this

Version control for visual learners

  1. 1. Version control for visual learners @veronica_hanus #gitmerge
  2. 2. @veronica_hanus #gitmerge View changes remotely, feel amazing and... Push ASAP Commit Make changes to code locally My first year learning to use Git Veronica’s early Git workflow 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
  3. 3. A timeline of a Very Visual Veronica Always: “Documentation Lowers Cognitive Load” @veronica_hanus #gitmerge Geology Web Workflows for ML ? (what next?)
  4. 4. @veronica_hanus #gitmerge Iteration is not design! 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!
  5. 5. 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 #gitmerge
  6. 6. - “Remove lighter green font & add underline to nav bar” - “Remove lighter/brighter font &...” should we make? So many greens! Long and still hard to understand! @veronica_hanus #gitmerge
  7. 7. What would you do? Better commit messages? Find tools giving cues? Other ways? Your idea here @veronica_hanus #gitmerge
  8. 8. 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 commits @veronica_hanus #gitmerge
  9. 9. Screenshots in a local folder One problem at a time Color preview in-editor @veronica_hanus #gitmerge
  10. 10. Screenshots in saved in Git Moving toward a solution What pain points does my solution have? How do I address these? @veronica_hanus #gitmerge
  11. 11. Screenshots for testing… and tracking? A few tools: ➔ Puppeteer-screenshot-tester ➔ Resemble.js ➔ Wraith Screenshot diffing @veronica_hanus #gitmerge
  12. 12. @veronica_hanus #gitmerge
  13. 13. A “Git” for design! Our examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin @veronica_hanus #gitmerge
  14. 14. Ready to dive in 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 @veronica_hanus #gitmerge
  15. 15. Bring yourself Geology Web Workflows for ML @veronica_hanus #gitmerge ? (what next?)
  16. 16. Keep in touch! @veronica_hanus #gitmerge Resources Thanks to… Each of you for coming(!), the Git Merge organizers for a wonderful event, 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 Let’s talk about in-code comments! (3-5 min survey) http://bit.ly/comment-use
  17. 17. @veronica_hanus #gitmerge 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

×