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

1. TEACHING A DESIGNER
to use
WordCamp Philly 2014
@jpry Ÿ @liamdempsey
+
GitHub

2. ABOUT US
Jeremy Pry
@JPry
WP Engine
jeremypry.com
@jpry Ÿ @liamdempsey
WordCamp Philly 2014
Liam Dempsey
@liamdempsey
LBDesign
liamdempsey.com
DEVELOPER DESIGNER

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. 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. 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. WHYVERSION CONTROL?
@jpry Ÿ @liamdempsey
WordCamp Philly 2014
• Safety
• Safety
• Safety
• Functionality

7. @jpry Ÿ @liamdempsey
WordCamp Philly 2014

8. @jpry Ÿ @liamdempsey
WordCamp Philly 2014

9. @jpry Ÿ @liamdempsey
WordCamp Philly 2014

10. @jpry Ÿ @liamdempsey
WordCamp Philly 2014

11. VERSION CONTROL TOOLS
@jpry Ÿ @liamdempsey
WordCamp Philly 2014
GitHub!
app!
Terminal!

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. THE FLOW OF CODE
@jpry Ÿ @liamdempsey
WordCamp Philly 2014
• Add Repository to GitHub.com
• Pull Repository to Local Machine
• Edit with Text Editor
• Push to GitHub
• Push to Dev Server
• Push to Web Host

14. But, what’s the work flow?
Um…Okay.

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. 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. THINKING ABOUT TREES
@jpry Ÿ @liamdempsey
WordCamp Philly 2014
• Single Branch
• Multi Branch:
master +
development

18. SINGLE USER TREE
@jpry Ÿ @liamdempsey
WordCamp Philly 2014
MASTER!
Branch"
DEV!
Branch"
Commits"

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. GETTING STARTED
@jpry Ÿ @liamdempsey
WordCamp Philly 2014
• Create a GitHub account
• Add a repository
• Clone it your computer
• Code on!

21. @jpry Ÿ @liamdempsey
WordCamp Philly 2014
QUESTIONS?

22. @jpry Ÿ @liamdempsey
WordCamp Philly 2014
RESOURCES
Git Succinctly eBook: http://www.syncfusion.com/resources/techportal/ebooks/git?utm_medium=BizDev-Nettutsplus0613
Git Succinctly series of articles: http://code.tutsplus.com/series/git-succinctly--net-33581
Understanding the GitHub Flow: https://guides.github.com/introduction/flow/index.html
Distributed Git - Distributed Workflows: http://git-scm.com/book/en/Distributed-Git-Distributed-Workflows
Intro to Git for Web Designers: http://www.webdesignerdepot.com/2009/03/intro-to-git-for-web-designers/
TheThing About Git: http://tomayko.com/writings/the-thing-about-git
Understanding the Git Workflow: https://sandofsky.com/blog/git-workflow.html
Team Collaboration with GitHub: http://code.tutsplus.com/articles/team-collaboration-with-github--net-29876
Lots of other articles: http://code.tutsplus.com/categories/git
A Successful Git Branching Model: http://nvie.com/posts/a-successful-git-branching-model/
GitHub Help: https://help.github.com/
Aha! Moments When Learning Git: http://betterexplained.com/articles/aha-moments-when-learning-git/