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.

Exploring the Intersection of Code & Design

Explore how you can customize a system to integrate screenshots into your version control and support new contributors.
As a coder, can you remember the difference between two hex color values? Neither can we! Tracking screenshots of changes to visual projects in version control (Git) makes review of past changes easier, speeds acclimation to a new web project, and increases understanding of tools used for automated testing. Join us for a review of integrated screenshot methods currently in use (ie. Python’s Pyppeteer) and explore how you can customize a system to integrate screenshots into your version control, lower your cognitive load, and support new contributors.
Event link:

  • Login to see the comments

  • Be the first to like this

Exploring the Intersection of Code & Design

  1. 1. Exploring the Intersection of Code & Design @veronica_hanus @FlatironSchool
  2. 2. Code // Design @veronica_hanus
  3. 3. What is version control? @veronica_hanus Trello Google Docs
  4. 4. How does Git work? Local & remote versions Labeling each version Avoid this
  5. 5. How does Git work? @veronica_hanus Local & remote versions Labeling each version Avoid this
  6. 6. A timeline of a Very Visual Veronica My mantra: “Documentation Lowers Cognitive Load” @veronica_hanus Geology Web Workflows for ML ?
  7. 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. 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. 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. 10. What would you do? @veronica_hanus Better commit messages? Find tools giving cues? Other ways? Your idea here
  11. 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. 12. Screenshots in saved in Git Solving some problems What pain points does my solution have? @veronica_hanus How do I address these?
  13. 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 Screenshot diffing
  14. 14. A “Git” for design! @veronica_hanusOur examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin
  15. 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. 16. What can you bring? @veronica_hanus Geology Web Workflows for ML
  17. 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