Git for Humans - Speaker Deck

Git for Humans

by Alice Bartlett

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

HELLO @alicebartlett

Slide 3

Slide 3 text

@alicebartlett GDS

Slide 4

Slide 4 text

Things are just better when designers are involved @alicebartlett

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Git @alicebartlett

Slide 7

Slide 7 text

WHAT IS GIT

Slide 8

Slide 8 text

“ 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 ”

Slide 9

Slide 9 text

WHAT DOES IT DO?

Slide 10

Slide 10 text

@alicebartlett Git helps you manage work done on projects.

Slide 11

Slide 11 text

@alicebartlett GIT IS UNFRIENDLY

Slide 12

Slide 12 text

@alicebartlett

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

@alicebartlett JARGON

Slide 15

Slide 15 text

@alicebartlett GIT

Slide 16

Slide 16 text

@alicebartlett UNDERNEATH ALL THIS, GIT IS QUITE SIMPLE

Slide 17

Slide 17 text

WHY ARE YOU HERE

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@alicebartlett By saving copies By making commits

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

@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

Slide 29

Slide 29 text

@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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

1. Who 2. When @alicebartlett

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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:

Slide 34

Slide 34 text

@alicebartlett logo-3-FINAL-1.svg

Slide 35

Slide 35 text

@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.

Slide 36

Slide 36 text

@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

Slide 37

Slide 37 text

@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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

GIT LETS YOU TIME TRAVEL THING 2:

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

@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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

GIT HELPS YOU EXPERIMENT THING 3:

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

@alicebartlett master The default branch name in Git is master

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

@alicebartlett add-new-styles wild-experiment master

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Whereas other branches can contain work in progress @alicebartlett

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

GIT HELPS YOU BACK UP YOUR WORK THING 4:

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

In Git this place is called a remote @alicebartlett

Slide 73

Slide 73 text

A very popular remote is Github @alicebartlett

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

@alicebartlett Remote

Slide 76

Slide 76 text

@alicebartlett Remote clone

Slide 77

Slide 77 text

Remote @alicebartlett clone

Slide 78

Slide 78 text

Remote @alicebartlett Now everyone has the repo on their computer

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

Remote @alicebartlett

Slide 81

Slide 81 text

@alicebartlett Remote Lucy can send her changes to remote

Slide 82

Slide 82 text

@alicebartlett push! Remote

Slide 83

Slide 83 text

Remote @alicebartlett This is known as a push

Slide 84

Slide 84 text

@alicebartlett Now Martin is behind Remote

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

@alicebartlett pull! Remote

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

GIT HELPS YOU COLLABORATE THING 5:

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

@alicebartlett Remotes mean other people can access your project

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

@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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Alice Bartlett Senior Developer, Financial Times @alicebartlett Thank you