Git for Humans

Git for Humans

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

Df057cdadda4cd7a2a2db52576de1bf2?s=128

Alice Bartlett

November 04, 2016
Tweet

Transcript

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

  2. HELLO @alicebartlett

  3. @alicebartlett GDS

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

  5. @alicebartlett “ What tools could you not live without that designers

    don’t have? ”
  6. Git @alicebartlett

  7. WHAT IS GIT

  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 ”
  9. WHAT DOES IT DO?

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

  11. @alicebartlett GIT IS UNFRIENDLY

  12. @alicebartlett

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

    Git.
  14. @alicebartlett JARGON

  15. @alicebartlett GIT

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

  17. WHY ARE YOU HERE

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

    THING 4 5. THING 5
  19. GIT LETS YOU TELL THE STORY OF YOUR PROJECT THING

    1:
  20. You use Git to take snapshots of all the files

    in a folder. This folder is called a repository or repo. @alicebartlett
  21. When you want to take a snapshot of a file

    or files, you create a commit @alicebartlett
  22. @alicebartlett logo.svg logo-2.svg logo-3-monica-feedback.svg logo-3-FINAL.svg logo-3-FINAL-1.svg

  23. @alicebartlett By saving copies By making commits

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

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

    logo-2.svg commit
  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
  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
  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
  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
  30. When you commit a file or files, some information is

    saved along with the changes to the file @alicebartlett
  31. 1. Who 2. When @alicebartlett

  32. You can add more information about the changes you’ve made

    in a commit message @alicebartlett
  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:
  34. @alicebartlett logo-3-FINAL-1.svg

  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.
  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
  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
  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
  39. repository - your project folder commit - save a snapshot

    @alicebartlett
  40. GIT LETS YOU TIME TRAVEL THING 2:

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

    them @alicebartlett
  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
  43. Each of these commits has an id called a hash

    @alicebartlett 439301fe69e8f875c049ad0718386516b4878e22 377dfcd00dd057542b112cf13be6cf1380b292ad 456722223e9f9e0ee0a92917ba80163028d89251
  44. @alicebartlett I can tell Git what commit I want to

    check out using the commit hash d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb 20-05-2016: deleted play icon
  45. Getting the files from a commit in the past is

    known as doing a check out @alicebartlett
  46. @alicebartlett I can tell Git what commit I want to

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

    check out using the commit hash d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb 20-05-2016: deleted play icon
  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
  49. hash - a computer generated id checkout - time travel

    to a specific commit @alicebartlett
  50. GIT HELPS YOU EXPERIMENT THING 3:

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

  52. This isn’t really how projects work, sometimes you want to

    make easily discardable experiments @alicebartlett
  53. The way you do this in Git is with branches

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

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

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

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

    on a branch master
  58. @alicebartlett add-new-styles wild-experiment master

  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
  60. At the FT most dev work is done in branches,

    the master branch is considered special @alicebartlett
  61. It’s common for the master branch to be the version

    of the code or files that are live on the site @alicebartlett
  62. Whereas other branches can contain work in progress @alicebartlett

  63. Once you’re happy with some work, you need a way

    to get it back into master @alicebartlett
  64. @alicebartlett add-new-styles To get changes from one branch into another,

    you merge them master
  65. @alicebartlett add-new-styles master So this commit, is a combination of

    all of the commits from both branches
  66. branch - a moveable label that points to a commit

    merge - the combination of two or more branches @alicebartlett
  67. GIT HELPS YOU BACK UP YOUR WORK THING 4:

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

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

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

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

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

  73. A very popular remote is Github @alicebartlett

  74. To get some work from a remote for the first

    time you clone it @alicebartlett
  75. @alicebartlett Remote

  76. @alicebartlett Remote clone

  77. Remote @alicebartlett clone

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

  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.
  80. Remote @alicebartlett

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

  82. @alicebartlett push! Remote

  83. Remote @alicebartlett This is known as a push

  84. @alicebartlett Now Martin is behind Remote

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

    them Remote
  86. @alicebartlett pull! Remote

  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
  88. GIT HELPS YOU COLLABORATE THING 5:

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

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

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

  92. @alicebartlett Git allows lots of people to work on the

    same project, which is why people suffer through the terrible UX of it.
  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
  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
  95. Alice Bartlett Senior Developer, Financial Times @alicebartlett Thank you