Successfully reported this slideshow.
Your SlideShare is downloading. ×

Exploring the Intersection of Code & Design

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 17 Ad

Exploring the Intersection of Code & Design

Download to read offline

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: https://www.eventbrite.com/e/workshop-the-intersection-of-code-design-flatiron-school-nyc-tickets-53840658860#

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: https://www.eventbrite.com/e/workshop-the-intersection-of-code-design-flatiron-school-nyc-tickets-53840658860#

Advertisement
Advertisement

More Related Content

Advertisement

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 https://bit.ly/2C3z25t 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

Editor's Notes

  • Credit: https://www.slideshare.net/arnellebalane/git-38075617
  • Credit: https://www.slideshare.net/arnellebalane/git-38075617
  • Source: https://uxplanet.org/most-common-ux-design-methods-and-techniques-c9a9fdc25a1e
  • Source for screenshot diffing images: https://online-image-comparison.com/
    Additional resource: “Automated visual diffing with Puppeteer” (2018),
    Monica Dinculescue’s blog https://bit.ly/2C3z25t




  • Sources:
    Abstract image: https://www.goabstract.com/blog/compare-mode/
    Zeplin image: https://twitter.com/zeplin/status/790945731339182080


×