Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Git for Humans

Git for Humans

A presentation I gave at UXBri.
Audio + Slides here: https://www.youtube.com/watch?v=eWxxfttcMts

Alice Bartlett

November 04, 2016
Tweet

More Decks by Alice Bartlett

Other Decks in Technology

Transcript

  1. Alice Bartlett
    Senior Developer, Financial Times
    @alicebartlett
    Git for humans

    View Slide

  2. HELLO
    @alicebartlett

    View Slide

  3. @alicebartlett
    GDS

    View Slide

  4. Things are just better
    when designers are
    involved
    @alicebartlett

    View Slide

  5. @alicebartlett
    “ What tools could you not
    live without that
    designers don’t have? ”

    View Slide

  6. Git
    @alicebartlett

    View Slide

  7. WHAT IS GIT

    View Slide

  8. “ Git is an
    application that
    runs on your
    computer, like a
    web browser or a
    word processor ”
    Tom Stuart
    http://codon.com/
    “ Git is an
    application that
    runs on your
    computer, like a
    web browser or a
    word processor ”

    View Slide

  9. WHAT DOES IT DO?

    View Slide

  10. @alicebartlett
    Git helps you manage work
    done on projects.

    View Slide

  11. @alicebartlett
    GIT IS
    UNFRIENDLY

    View Slide

  12. @alicebartlett

    View Slide

  13. @alicebartlett
    There are other
    applications you can use to
    use Git.

    View Slide

  14. @alicebartlett
    JARGON

    View Slide

  15. @alicebartlett
    GIT

    View Slide

  16. @alicebartlett
    UNDERNEATH
    ALL THIS, GIT IS
    QUITE SIMPLE

    View Slide

  17. WHY
    ARE
    YOU
    HERE

    View Slide

  18. 1. THING 1
    2. THING 2
    3. THING 3
    4. THING 4
    5. THING 5

    View Slide

  19. GIT LETS YOU TELL
    THE STORY OF YOUR
    PROJECT
    THING 1:

    View Slide

  20. You use Git to take snapshots of
    all the files in a folder.
    This folder is called a repository
    or repo.
    @alicebartlett

    View Slide

  21. When you want to take a
    snapshot of a file or files, you
    create a commit
    @alicebartlett

    View Slide

  22. @alicebartlett
    logo.svg
    logo-2.svg
    logo-3-monica-feedback.svg
    logo-3-FINAL.svg
    logo-3-FINAL-1.svg

    View Slide

  23. @alicebartlett
    By saving copies By making commits

    View Slide

  24. @alicebartlett
    By saving copies By making commits
    logo.svg
    logo.svg

    View Slide

  25. @alicebartlett
    By saving copies By making commits
    logo.svg
    logo.svg
    logo.svg
    logo-2.svg
    commit

    View Slide

  26. @alicebartlett
    By saving copies By making commits
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo-2.svg
    logo-3-monica-feedback.svg
    commit

    View Slide

  27. @alicebartlett
    By saving copies By making commits
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo-2.svg
    logo-3-monica-feedback.svg
    logo-3-FINAL.svg
    commit

    View Slide

  28. @alicebartlett
    By saving copies By making commits
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo-2.svg
    logo-3-monica-feedback.svg
    logo-3-FINAL.svg
    logo-3-FINAL-1.svg
    commit

    View Slide

  29. @alicebartlett
    By saving copies By making commits
    logo.svg
    logo-2.svg
    logo-3-monica-feedback.svg
    logo-3-FINAL.svg
    logo-3-FINAL-1.svg
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo.svg

    View Slide

  30. When you commit a file or files,
    some information is saved along
    with the changes to the file
    @alicebartlett

    View Slide

  31. 1. Who
    2. When
    @alicebartlett

    View Slide

  32. You can add more information
    about the changes you’ve made
    in a commit message
    @alicebartlett

    View Slide

  33. Update link style
    User research showed that many people did not
    spot links in the copy. This commit updates the
    link style to the new underlined style which
    performed better.
    @alicebartlett
    A good commit message:

    View Slide

  34. @alicebartlett
    logo-3-FINAL-1.svg

    View Slide

  35. @alicebartlett
    By making commits
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    Alice Bartlett
    10:34am March 11th 2016
    Update link style
    User research showed that many people
    did not spot links in the copy. This
    commit updates the link style to the new
    underlined style which performed
    better.

    View Slide

  36. @alicebartlett
    By making commits
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    Alice Bartlett
    12:43pm May 5th 2016
    Add new colours
    New colours for US election campaign

    View Slide

  37. @alicebartlett
    By making commits
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    logo.svg
    Alice Bartlett
    12:43pm May 8th 2016
    Fix Orange
    The orange we used fails AAA
    accessibility contrast tests so beef it up
    to contrast properly

    View Slide

  38. Git stores the whole history
    of your project
    @alicebartlett
    20-09-2016: updated link style
    20-05-2016: added changes from monica
    20-06-2016: deleted save icon

    View Slide

  39. repository - your project folder
    commit - save a snapshot
    @alicebartlett

    View Slide

  40. GIT LETS YOU TIME
    TRAVEL
    THING 2:

    View Slide

  41. Once you’ve saved some
    snapshots, Git lets you move
    through them
    @alicebartlett

    View Slide

  42. Git stores the whole history
    of your project
    @alicebartlett
    20-09-2016: updated link style
    20-05-2016: added changes from monica
    20-06-2016: deleted save icon

    View Slide

  43. Each of these commits has an
    id called a hash
    @alicebartlett
    439301fe69e8f875c049ad0718386516b4878e22
    377dfcd00dd057542b112cf13be6cf1380b292ad
    456722223e9f9e0ee0a92917ba80163028d89251

    View Slide

  44. @alicebartlett
    I can tell Git what commit I want to check
    out using the commit hash
    d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb
    20-05-2016: deleted play icon

    View Slide

  45. Getting the files from a commit
    in the past is known as doing a
    check out
    @alicebartlett

    View Slide

  46. @alicebartlett
    I can tell Git what commit I want to check
    out using the commit hash
    d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb
    20-05-2016: deleted play icon

    View Slide

  47. @alicebartlett
    I can tell Git what commit I want to check
    out using the commit hash
    d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb
    20-05-2016: deleted play icon

    View Slide

  48. @alicebartlett
    My other commits still exist, but when I
    look in my repo, it’s as if they never
    happened
    d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb
    20-05-2016: deleted play icon

    View Slide

  49. hash - a computer generated id
    checkout - time travel to a specific commit
    @alicebartlett

    View Slide

  50. GIT HELPS YOU
    EXPERIMENT
    THING 3:

    View Slide

  51. So far, everything has been
    very linear and ordered.
    @alicebartlett

    View Slide

  52. This isn’t really how projects
    work, sometimes you want to
    make easily discardable
    experiments
    @alicebartlett

    View Slide

  53. The way you do this in Git is
    with branches
    @alicebartlett

    View Slide

  54. A branch is a moveable label
    attached to a commit
    @alicebartlett

    View Slide

  55. @alicebartlett
    master
    The default branch name in Git
    is master

    View Slide

  56. @alicebartlett
    add-new-styles
    You can add your own
    branches too
    master

    View Slide

  57. @alicebartlett
    add-new-styles
    A developer will often do lots
    of work on a branch
    master

    View Slide

  58. @alicebartlett
    add-new-styles
    wild-experiment
    master

    View Slide

  59. Branches are useful for trying
    out stuff, as they’re really easy
    to throw away if you decide you
    don’t like your changes
    @alicebartlett

    View Slide

  60. At the FT most dev work is
    done in branches, the master
    branch is considered special
    @alicebartlett

    View Slide

  61. It’s common for the master
    branch to be the version of the
    code or files that are live on the
    site
    @alicebartlett

    View Slide

  62. Whereas other branches can
    contain work in progress
    @alicebartlett

    View Slide

  63. Once you’re happy with some
    work, you need a way to get it
    back into master
    @alicebartlett

    View Slide

  64. @alicebartlett
    add-new-styles
    To get changes from one branch
    into another, you merge them
    master

    View Slide

  65. @alicebartlett
    add-new-styles
    master
    So this commit, is a
    combination of all
    of the commits
    from both branches

    View Slide

  66. branch - a moveable label that points to a commit
    merge - the combination of two or more branches
    @alicebartlett

    View Slide

  67. GIT HELPS YOU BACK
    UP YOUR WORK
    THING 4:

    View Slide

  68. Everyone knows that you should
    back up your work regularly
    @alicebartlett

    View Slide

  69. Ideally to somewhere that is
    geographically distinct from your
    computer
    @alicebartlett

    View Slide

  70. @alicebartlett
    logo.svg
    logo-2.svg
    logo-3-monica-feedback.svg
    logo-3-FINAL.svg
    logo-3-FINAL-1.svg

    View Slide

  71. - Safer
    - Access from different places
    - Shared access
    @alicebartlett

    View Slide

  72. In Git this place is called a remote
    @alicebartlett

    View Slide

  73. A very popular remote is Github
    @alicebartlett

    View Slide

  74. To get some work from a remote
    for the first time you clone it
    @alicebartlett

    View Slide

  75. @alicebartlett
    Remote

    View Slide

  76. @alicebartlett
    Remote
    clone

    View Slide

  77. Remote
    @alicebartlett
    clone

    View Slide

  78. Remote
    @alicebartlett
    Now everyone
    has the repo on
    their computer

    View Slide

  79. Remote
    @alicebartlett
    Lucy Kellaway
    10:34am November 4th 2016
    Fix broken icon tinting
    Icon tinting was case sensitive so #FFF
    worked but #fff didn’t. This commit
    removes this bug.

    View Slide

  80. Remote
    @alicebartlett

    View Slide

  81. @alicebartlett
    Remote
    Lucy can send
    her changes to
    remote

    View Slide

  82. @alicebartlett
    push!
    Remote

    View Slide

  83. Remote
    @alicebartlett
    This is known as
    a push

    View Slide

  84. @alicebartlett
    Now Martin is
    behind
    Remote

    View Slide

  85. @alicebartlett
    To get these
    changes, Martin will
    need to pull them
    Remote

    View Slide

  86. @alicebartlett
    pull!
    Remote

    View Slide

  87. remote - a computer with a repo on it
    clone - get the repo from the remote for the first time
    pull - get new commits to the repo from the remote
    push - send your new commits to the remote
    @alicebartlett

    View Slide

  88. GIT HELPS YOU
    COLLABORATE
    THING 5:

    View Slide

  89. @alicebartlett
    Committing helps you tell other
    people the story of your project

    View Slide

  90. @alicebartlett
    Remotes mean other people can
    access your project

    View Slide

  91. @alicebartlett
    Merges help manage combining
    your work with someone else’s

    View Slide

  92. @alicebartlett
    Git allows lots of people to work
    on the same project, which is why
    people suffer through the terrible
    UX of it.

    View Slide

  93. @alicebartlett
    repository
    commit
    hash
    checkout
    branch
    merge
    remote
    clone
    push
    pull
    Git terms we’ve covered
    your project folder
    a snapshot of your repo
    an id for a commit
    time travel to a specific commit
    a movable label that points to a commit
    combining two branches
    a computer with the repository on it
    get the repository from the remote for the first time
    send commits to a remote
    get commits from a remote

    View Slide

  94. 1. Tell the story of your project
    2. Travel back in time
    3. Experiment with changes
    4. Back up your work
    5. Collaborate on projects

    View Slide

  95. Alice Bartlett
    Senior Developer, Financial Times
    @alicebartlett
    Thank you

    View Slide