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.

PyConAU 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 PyCon Australia 2019 in Sydney, AUS.
Event link:
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.

  • Login to see the comments

  • Be the first to like this

PyConAU 2019 "'Git Hook[ed]' on images and up your documentation game"

  1. 1. “Git Hook[ed]” on images & up your documentation game @veronica_hanus #pyconau
  2. 2. @veronica_hanus #PyConAUMake your own!
  3. 3. @veronica_hanus #PyConAU
  4. 4. Doing things “the wrong way” is part of learning @veronica_hanus #PyConAU
  5. 5. Focusing on “the right way” freezes @veronica_hanus #PyConAU
  6. 6. @veronica_hanus #PyConAU, modified
  7. 7. @veronica_hanus #PyConAU
  8. 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. 9. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham
  10. 10. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham
  11. 11. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham
  12. 12. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham
  13. 13. @veronica_hanus #PyConAU
  14. 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. 15. @veronica_hanus #PyConAU
  16. 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. 17. What would you do? Better commit messages? Find tools giving cues? Other ways? Your idea here @veronica_hanus #PyConAU
  18. 18. What does a design process look like? Iteration w/o design wastes time! @veronica_hanus #PyConAU
  19. 19. @veronica_hanus #PyConAU
  20. 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. 21. @veronica_hanus #PyConAUArt wonderfully made by @QEDunham
  22. 22. Screenshots in a local folder Adding visuals any way I can! @veronica_hanus #PyConAU
  23. 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. 24. @veronica_hanus #PyConAU “Oh, we have that!”
  25. 25. Screenshots for testing… and tracking? Many tools: Cypress-match-screenshot, Puppeteer-screenshot-tester, Resemble.js, Wraith... @veronica_hanus #PyConAU
  26. 26. @veronica_hanus #PyConAU
  27. 27. @veronica_hanus #PyConAU “Oh, we have that!”
  28. 28. A “Git” for design! Our examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin @veronica_hanus #PyConAU
  29. 29. @veronica_hanus #PyConAU
  30. 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. 31. Bring yourself Geology Web � @veronica_hanus #PyConAU
  32. 32. @veronica_hanus #PyConAU Your super-powers work here
  33. 33. View changes remotely, feel amazing and... Push ASAP Commit Make changes to code locally 🤦 ☁☁☁ @veronica_hanus #PyConAU
  34. 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. 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 👋 Video & Slides 🔜 🙌 Go build the tools you need! Let’s talk about in-code comments! (3-5 min survey)
  36. 36. Credits - Git instructions for beginners: UK0/edit?usp=sharing - Git XKCD: - Daily Git commands: - Commit XKCD: - Good commit messages: - Mismatched puzzle Pieces: - Color preview in-editor: Sublime’s Color Highlighter (view), Atom’s Pigments (view) & Color Picker (select/add) - Source for screenshot diffing images: - “Automated visual diffing with Puppeteer” (2018), Monica Dinculescue’s blog - Grumpy cat says “no new friends” - Question party ful-answers/ @veronica_hanus