Git for Humans - NFHN Reader

don’t have? ”

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

@alicebartlett Git helps you manage work done on projects.

@alicebartlett GIT IS UNFRIENDLY

@alicebartlett There are other applications you can use to use

Git.

@alicebartlett UNDERNEATH ALL THIS, GIT IS QUITE SIMPLE

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

THING 4 5. THING 5

GIT LETS YOU TELL THE STORY OF YOUR PROJECT THING

You use Git to take snapshots of all the files

in a folder. This folder is called a repository or repo. @alicebartlett

When you want to take a snapshot of a file

or files, you create a commit @alicebartlett

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

@alicebartlett By saving copies By making commits

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

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

logo-2.svg commit

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

logo.svg logo-2.svg logo-3-monica-feedback.svg commit

@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

@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

@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

When you commit a file or files, some information is

saved along with the changes to the file @alicebartlett

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

in a commit message @alicebartlett

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:

@alicebartlett logo-3-FINAL-1.svg

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

@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

@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

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

repository - your project folder commit - save a snapshot

@alicebartlett

GIT LETS YOU TIME TRAVEL THING 2:

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

them @alicebartlett

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

Each of these commits has an id called a hash

@alicebartlett 439301fe69e8f875c049ad0718386516b4878e22 377dfcd00dd057542b112cf13be6cf1380b292ad 456722223e9f9e0ee0a92917ba80163028d89251

@alicebartlett I can tell Git what commit I want to

check out using the commit hash d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb 20-05-2016: deleted play icon

Getting the files from a commit in the past is

known as doing a check out @alicebartlett

@alicebartlett I can tell Git what commit I want to

check out using the commit hash d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb 20-05-2016: deleted play icon

@alicebartlett I can tell Git what commit I want to

check out using the commit hash d5b87865bc2cd9d38ba8284c2eaa0d0241d800bb 20-05-2016: deleted play icon

@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

hash - a computer generated id checkout - time travel

to a specific commit @alicebartlett

GIT HELPS YOU EXPERIMENT THING 3:

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

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

make easily discardable experiments @alicebartlett

The way you do this in Git is with branches

@alicebartlett

A branch is a moveable label attached to a commit

@alicebartlett

@alicebartlett master The default branch name in Git is master

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

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

on a branch master

@alicebartlett add-new-styles wild-experiment master

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

At the FT most dev work is done in branches,

the master branch is considered special @alicebartlett

It’s common for the master branch to be the version

of the code or files that are live on the site @alicebartlett

Whereas other branches can contain work in progress @alicebartlett

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

to get it back into master @alicebartlett

@alicebartlett add-new-styles To get changes from one branch into another,

you merge them master

@alicebartlett add-new-styles master So this commit, is a combination of

all of the commits from both branches

branch - a moveable label that points to a commit

merge - the combination of two or more branches @alicebartlett

GIT HELPS YOU BACK UP YOUR WORK THING 4:

Everyone knows that you should back up your work regularly

@alicebartlett

Ideally to somewhere that is geographically distinct from your computer

@alicebartlett

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

- Safer - Access from different places - Shared access

@alicebartlett

In Git this place is called a remote @alicebartlett

A very popular remote is Github @alicebartlett

To get some work from a remote for the first

time you clone it @alicebartlett

@alicebartlett Remote

@alicebartlett Remote clone

Remote @alicebartlett clone

Remote @alicebartlett Now everyone has the repo on their computer

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.

Remote @alicebartlett

@alicebartlett Remote Lucy can send her changes to remote

@alicebartlett push! Remote

Remote @alicebartlett This is known as a push

@alicebartlett Now Martin is behind Remote

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

them Remote

@alicebartlett pull! Remote

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

GIT HELPS YOU COLLABORATE THING 5:

@alicebartlett Committing helps you tell other people the story of

your project

@alicebartlett Remotes mean other people can access your project

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

@alicebartlett Git allows lots of people to work on the

same project, which is why people suffer through the terrible UX of it.

@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

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