$30 off During Our Annual Pro Sale. View Details »

GitHub for Designers

GitHub for Designers

In this talk, Teehan+Lax developer Ash Furrow will guide designers through the basics of GitHub. He’ll discuss why GitHub is important and teach you the high-level concepts that will get you started with GitHub today.

Ash Furrow

October 03, 2013
Tweet

More Decks by Ash Furrow

Other Decks in Technology

Transcript

  1. GitHub for Designers
    Ash Furrow, Teehan+Lax
    @ashfurrow

    View Slide

  2. View Slide

  3. Learn the fundamentals of git and GitHub in
    order to better collaborate with teams.

    View Slide

  4. Agenda
    • Git & GitHub
    • Git is a Tool for Managing Files
    • The Fundamentals
    • Using Git doesn’t Mean Using the Command
    Line
    4

    View Slide

  5. Git & GitHub

    View Slide

  6. Git & GitHub
    • Git is a tool for managing files (more on that later)
    • GitHub is a website for using git
    6

    View Slide

  7. Git & GitHub
    • Git can be used independently of GitHub
    • Even offline!
    • This talk is about using Git & GitHub together
    7

    View Slide

  8. Git is a Tool for Managing Files

    View Slide

  9. Git is a Tool for Managing Files
    • Git manages simple files
    • Text and flat graphics, not PSDs
    • CSS, HTML, PNG
    • PSDs are too complex for git to manage
    • Use LayerVault, instead
    9

    View Slide

  10. Git is a Tool for Managing Files
    • What does “manage” mean?
    • History (who did what, and when?)
    • Conflicts (multiple people modifying the
    same file)
    10

    View Slide

  11. The Fundamentals
    (More like FUNdamentals, amirite?)

    View Slide

  12. Pulling Down from Remote
    12
    Your Branch
    master
    master
    remote
    local
    Your Branch
    Pull Request
    Push
    Pull Pull

    View Slide

  13. A Repose About Repos
    • A repository – or “repo” – is a home for git to
    put all its files
    • Repos can exist locally (on your computer) or
    remotely (on GitHub) – more on this later
    13

    View Slide

  14. Branches
    • Hard to define
    • Branches are used to isolate changes to files
    • Branches are cheap
    • Create lots of ‘em
    • Ideally one for each new feature/bug fix
    14

    View Slide

  15. Branching
    • Creating a new branch is called “branching”
    • Branch to create new features
    • Create new branches off of “master” branch
    • Master is the canonical branch
    • “Latest and Greatest”
    15

    View Slide

  16. Branching
    • File system metaphor
    16

    View Slide

  17. Branching
    17
    Your Branch
    master
    Creating a new branch

    View Slide

  18. Commits
    • When you’ve completed a feature or a fix,
    make a commit
    • Commits are snapshots of the staged
    changes you made
    • Not all changes need to be committed
    18

    View Slide

  19. Committing
    • Branches are just a series of commits
    • Committing enters that commit into the git log
    • You can see who changed what, and when
    19

    View Slide

  20. Committing
    • Commits include a “commit message”
    describing the changes
    20

    View Slide

  21. Committing
    1. Stage changes
    2. Commit staged changes
    21

    View Slide

  22. Committing
    22
    Your Branch
    master
    commit 1 commit 2

    View Slide

  23. Local vs. Remote
    • The master branch exists locally (on your
    computer) and remotely (on GitHub)
    • Your new branch exists only locally
    23

    View Slide

  24. Local vs. Remote
    • File server metaphor
    24

    View Slide

  25. Local vs. Remote
    • All work is done locally on local branches
    • When ready, you “push” a branch to the remote
    • More on pushing shortly
    25

    View Slide

  26. Local vs. Remote
    • Where did “master” come from?
    • The remote
    26

    View Slide

  27. Pulling & Pushing
    27
    Your Branch
    master
    master
    remote
    local
    Pull

    View Slide

  28. Pulling & Pushing
    • Transitive verbs
    • Pushing/pulling depends on context
    28

    View Slide

  29. Pulling & Pushing
    1. Pull master from GitHub
    2. Branch
    3. Make commits
    4. Push branch to GitHub
    29

    View Slide

  30. Pulling & Pushing
    30
    Your Branch
    master
    master
    remote
    local
    Your Branch
    Push
    Pull

    View Slide

  31. Pull Requests
    • Pull requests are requests to have changes
    “pulled” into another branch, usually master
    • Pull requests exist only on GitHub
    • “Request” because someone else is looking it
    over for mistakes
    • Not that you ever make those
    31

    View Slide

  32. Pull Requests
    • Designate someone on your team as a
    “Gatekeeper”
    32

    View Slide

  33. Pull Requests
    33
    Your Branch
    master
    master
    remote
    local
    Your Branch
    Pull Request
    Push
    Pull

    View Slide

  34. Pull Requests
    • Now all of your changes exist on master
    • Only the remote master
    • You need to “pull” master down again
    34

    View Slide

  35. Pulling Down from Remote
    35
    Your Branch
    master
    master
    remote
    local
    Your Branch
    Pull Request
    Push
    Pull Pull

    View Slide

  36. Cloning

    View Slide

  37. Cloning
    • Copies the remote repo to your local
    • Only done once per repo
    • “Initial Setup”
    37

    View Slide

  38. Pulling & Pushing
    1. Clone
    2. Pull master from GitHub
    3. Branch
    4. Make commits
    5. Push branch to GitHub
    6. Pull Request
    38

    View Slide

  39. Issues
    • GitHub has “Issues”
    • Issues are conversations about the code
    • Bugs, features, improvements, etc...
    • You can reference issues in commit messages
    39

    View Slide

  40. Issues
    40

    View Slide

  41. Conflicts

    View Slide

  42. Conflicts
    • Sometimes files conflict
    • Git will usually sort it out
    • Sometimes it can’t
    42

    View Slide

  43. Conflicts
    <<<<<<< HEAD
    Hello world
    =======
    Goodbye
    >>>>>>> some_other_branch_name
    43

    View Slide

  44. Using Git doesn’t Mean Using
    the Command Line

    View Slide

  45. Using Git doesn’t Mean Using the Command Line
    • There are powerful, GUI tools for using git
    • Git Tower
    • GitHub for Mac
    • SourceTree
    45

    View Slide

  46. Using Git doesn’t Mean Using the Command Line
    • Important: all these tools rely on the
    fundamentals we learnt earlier
    46

    View Slide

  47. Demo

    View Slide

  48. Recap
    • Git & GitHub
    • Git is a Tool for Managing Files
    • The Fundamentals
    • Using Git doesn’t Mean Using the Command
    Line
    48

    View Slide

  49. Ash Furrow
    October 3, 2013
    Thanks!

    View Slide