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.

Teaching a Designer to Use GitHub


Published on

A presentation by Jeremy Pry (@JPry) and Liam Dempsey (@liamdempsey) at WordCamp Philly 2014

Published in: Design, Technology
  • Be the first to comment

Teaching a Designer to Use GitHub

  1. 1. TEACHING A DESIGNER to use WordCamp Philly 2014 @jpry Ÿ @liamdempsey + GitHub
  2. 2. ABOUT US Jeremy Pry @JPry WP Engine @jpry Ÿ @liamdempsey WordCamp Philly 2014 Liam Dempsey @liamdempsey LBDesign DEVELOPER DESIGNER
  3. 3. KEY TAKEAWAYS •  Version control is NOT an option •  Making version control work for you isn’t impossible; it is manageable •  Organization + workflow: How version control fits into your workflow @jpry Ÿ @liamdempsey WordCamp Philly 2014
  4. 4. SOME INITIAL THOUGHTS •  Using Git and GitHub via the app is NOT that difficult •  Even version control as a concept is pretty straightforward •  It’s understanding the workflow that can prove daunting @jpry Ÿ @liamdempsey WordCamp Philly 2014
  5. 5. A FEW CAVEATS •  You will not leave this talk as Git or GitHub expert •  We’ll share resources on how to use the GitHub app @jpry Ÿ @liamdempsey WordCamp Philly 2014
  6. 6. WHYVERSION CONTROL? @jpry Ÿ @liamdempsey WordCamp Philly 2014 • Safety • Safety • Safety • Functionality
  7. 7. @jpry Ÿ @liamdempsey WordCamp Philly 2014
  8. 8. @jpry Ÿ @liamdempsey WordCamp Philly 2014
  9. 9. @jpry Ÿ @liamdempsey WordCamp Philly 2014
  10. 10. @jpry Ÿ @liamdempsey WordCamp Philly 2014
  11. 11. VERSION CONTROL TOOLS @jpry Ÿ @liamdempsey WordCamp Philly 2014 GitHub! app! Terminal!
  12. 12. YOUR DESIGN + DEV TEAM @jpry Ÿ @liamdempsey WordCamp Philly 2014 •  Single Designer •  Small Team (5 people or less) •  Large Team (6 people or more)
  13. 13. THE FLOW OF CODE @jpry Ÿ @liamdempsey WordCamp Philly 2014 •  Add Repository to •  Pull Repository to Local Machine •  Edit with Text Editor •  Push to GitHub •  Push to Dev Server •  Push to Web Host
  14. 14. But, what’s the work flow? Um…Okay.
  15. 15. FLOW OF CODE: SINGLE USER @jpry Ÿ @liamdempsey WordCamp Philly 2014 Production" Server" Development" Server" Clone repository via Git" Your Computer"Push commits via Git"
  16. 16. FLOW OF CODE: SMALL TEAM @jpry Ÿ @liamdempsey WordCamp Philly 2014 Production" Server" Development" Server" Clone repository + pull updates" Push commits" Your Computer" Teammate’s" Computer" Teammate’s" Computer" Push updated code via SFTP"
  17. 17. THINKING ABOUT TREES @jpry Ÿ @liamdempsey WordCamp Philly 2014 • Single Branch • Multi Branch: master + development
  18. 18. SINGLE USER TREE @jpry Ÿ @liamdempsey WordCamp Philly 2014 MASTER! Branch" DEV! Branch" Commits"
  19. 19. MULTI BRANCH TREE @jpry Ÿ @liamdempsey WordCamp Philly 2014 MASTER! Branch" DEV! Branch" FEATURE 1! Branch" FEATURE 2! Branch" Merge dev into master" Merge dev into master" Merge feature into dev"
  20. 20. GETTING STARTED @jpry Ÿ @liamdempsey WordCamp Philly 2014 •  Create a GitHub account •  Add a repository •  Clone it your computer •  Code on!
  21. 21. @jpry Ÿ @liamdempsey WordCamp Philly 2014 QUESTIONS?
  22. 22. @jpry Ÿ @liamdempsey WordCamp Philly 2014 RESOURCES Git Succinctly eBook: Git Succinctly series of articles: Understanding the GitHub Flow: Distributed Git - Distributed Workflows: Intro to Git for Web Designers: TheThing About Git: Understanding the Git Workflow: Team Collaboration with GitHub: Lots of other articles: A Successful Git Branching Model: GitHub Help: Aha! Moments When Learning Git: