Git Basics

Tony Cui & Abby Chou

How do we collaborate on code?
 ode
c

co
de

e
cod
The issue with Code-Sharing
The issue with Code-Sharing

Something
Home page homepage
needs
The issue with Code-Sharing

Something
Home page homepage
needs
The issue with Code-Sharing

Bro what
happened?

Something
Home page homepage
needs
The issue with Code-Sharing

Bro what ✨ upgrading ✨

happened?

Something
Home page homepage
needs
The issue with Code-Sharing

Can u like
not?

Something
Home page homepage
needs
The issue with Code-Sharing

Can u like
Can u like
✨deal with it✨
not?

Something
Home page homepage
needs
We need independent copies of the code! (so
people can work without disrupting each
other)
Something
Who homepage
broke xyz needs
i need it
rn >:(
…but that creates so many problems 😖
Hey I know you made changes in like 50 places
in that file but can you copy the changes over
one by one
Remove lines 250-280
Add 24 new lines
An hour later...
WAIT!!!!!!!!!
I NEEDED
LINES 250-280
ROLLBACK ROLLBACK

WHERE WHERE
????
The Problems
● Need independent local copies of the codebase
● Need to be able to merge different people’s changes together
● Need to keep track of versions
● Need to know which version is the most up-to-date
How do we solve these issues?
Introducing…
What does Git do?
Git tracks changes.
(How? ✨math✨)
mydoc.txt

I’m writing a story. I’m writing a story.

It’s really good! It’s really good!

And about cats! And about cats!

Like corgis :D

version1 version2
mydoc.txt
I’m writing a story. I’m writing a story. I’m writing a story.

It’s really good! It’s really good! It’s really good!

And about cats! And about cats! And about cats!

Like corgis :D Like corgis :D

version version version

1 2 3
mydoc.txt
I’m writing a story. I’m writing a story. I’m writing a story.

It’s really good! It’s really good! It’s really good!

And about cats! And about cats! And about cats!

Like corgis :D Like corgis :D

version version version

1 2 3

+ Like corgis :D - And about cats!

The “Math”: @ Line 4 @ Line 3
 example
Getting set up with git :D
Demonstration

Try the following: Reference

1. Make a new directory cd [directory] change directory

2. Cd into that directory ls list the contents of current directory

3. Turn your directory into a git mkdir [folder_name] make directory

repo! git init turns current directory into git

repo!
Special Characters:
. current directory
.. parent directory
Your turn!

Try the following: Reference

1. Make a new directory cd [directory] change directory

2. Cd into that directory ls list the contents of current directory

3. Turn your directory into a git mkdir [folder_name] make directory

repo! git init turns current directory into git

repo!
Special Characters:
. current directory
.. parent directory
Staging & Committing

- I like cats :D
cats.py line 4

+ I like corgis :D
woof.py line 37
Doing
stuff
tim
+ I like huskies :D
e
woof.py line 27
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24

d
Starte
stuff

Working copy Staging Area Commit History

Staging & Committing

Working copy
Staging & Committing

- I like cats :D
cats.py line 4

+ I like corgis :D
woof.py line 37
Staging & Committing

- I like cats :D
cats.py line 4

+ I like corgis :D
woof.py line 37

+ I like huskies :D
woof.py line 27
Staging & Committing

- I like cats :D
cats.py line 4

+ I like corgis :D
woof.py line 37

+ I like huskies :D
woof.py line 27

+ I like Andrew :D
tonythoughts.js line 24
Staging & Committing

- I like cats :D
cats.py line 4

+ I like corgis :D
woof.py line 37
Doing
stuff
tim
+ I like huskies :D
e
woof.py line 27
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24

d
Starte
stuff

Working copy Commit History

Staging & Committing

- I like cats :D
cats.py line 4

+ I like corgis :D
woof.py line 37
Doing
stuff
tim
+ I like huskies :D
e
woof.py line 27
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24

d
Starte
stuff

Working copy Staging Area Commit History

Staging & Committing

- I like cats :D
cats.py line 4

+ I of.p
wo

27 :D
lik y li
e c ne

in ies
Doing

yl k
or
stuff
tim

.p us
e
gis 37

of e h
e

:D

wo I lik
+
d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24

d
Starte
stuff

Working copy Staging Area Commit History

Staging & Committing

- I like cats :D
cats.py line 4

dogs

Doing
stuff
tim
e

d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24

d
Starte
stuff

Working copy Staging Area Commit History

Staging & Committing

- I like cats :D
cats.py line 4

dogs

Doing
stuff
tim
e

d
A dde
stuff
+ I like Andrew :D
tonythoughts.js line 24

d
Starte
stuff

Working copy Staging Area Commit History

Demo Staging & Commits
Demonstration
1. Make some changes git diff
a. Git status git status
2. Stage some changes git add
a. Git status git commit -m
3. Make a commit
a. Git status
4. Git log
a. Git status
Your turn!
In your new repo… Commands Ref
1. Make some code changes git add stage changes for
2. Stage changes with git add commit
3. Commit the changes git commit -m “[msg]”
4. Check your commit log git status <- use this often!
5. (Optional) Repeat! (Try deleting stuff too) git log show commit history
a. After you make changes (before you git diff show the diff
stage them), git diff to see your changes! (changes) between working
copy and staged/committed
copy
Object Graph
18e3
dogs

dogs
Commit id:
33cc
18e3
e

Doing
Message:
tim

stuff

“dogs”

d 8e33
A dde
stuff

d
Starte
stuff ca53
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”

andrew: “can u help me fix this bug on the home page uwu”

👉👈
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”

andrew: “can u help me fix this bug on the home page uwu”

tony: “anything for u bb 😍”

👉👈 👉👈
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”

andrew: “can u help me fix this bug on the home page”

tony: “anything for u bb 😍”

boss abby (who got dumped recently 😒) : “tony we need a

weblab-tinder feature TOMORROW and u hav to do it”

😅 😅
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”

andrew: “can u help me fix this bug on the home page”

tony: “anything for u bb 😍”

boss abby (who got dumped recently 😒) : “tony we need a

weblab-tinder feature TOMORROW and u hav to do it”
Uh oh, my boss is madge
tony: “vibing working on my new and improved home page ”

andrew: “can u help me fix this bug on the home page”

tony: “anything for u bb 😍”

boss abby (who got dumped recently 😒) : “tony we need a

weblab-tinder feature TOMORROW and u hav to do it”
tony: “bruh” save me

How do we work on multiple features at once?

 home
Branching page
remodel

Tony
weblab Andrew
home
tinder bug fix
page

Last
home
page

Other
stuff
Demo Branches
Demonstration
1. Creating a new branch
2. Switching between branches
Your turn! Handy commands
git branch see branches
In your new directory… git checkout [branch-name]
1. Create a new branch switch to existing branch
2. Add a couple of commits to your git checkout -b [branch-name]
branch, check the log create and checkout new branch
3. Checkout back to main, check the log
4. Add a couple of commits to main, Previous Commands
check the log git status
5. Try and draw and/or explain to your git add
partner what you think the object git commit -m
graph looks like! git log
What is happening in the object graph :0?

webtinder

main
What is happening in the object graph :0?

webtinder

main
How do we put them back together?

webtinder

main
example
merging
Follow Along
Follow along!
1. Checkout into main branch
2. Git merge [new branch name]
How do we put them back together?

webtinder

main
How do we put them back together?
.
rt of .
So

webtinder webtinder

main
main
How do we put them back together?
.
rt of .
So

webtinder webtinder

main
main
Preview

🐳, how does collaboration

work then?
 webtinder

main
webtinder

main

Remote Server (github)

 git
clo
n e

webtinder

webtinder
main
webtinder main

main

Remote Server (github)

 git
com
mit

webtinder
webtinder
main
webtinder main

main

Remote Server (github)

 git
p ush

webtinder
webtinder
main
webtinder main

main

Remote Server (github)

 Git fetch

webtinder
webtinder
main
webtinder main

main

Remote Server (github)

 Git fetch

webtinder
webtinder
main
webtinder main

main

Remote Server (github)

 Git fetch

webtinder
webtinder
main
webtinder main

main

Remote Server (github)

 Git fetch

webtinder
webtinder
main
webtinder main

main

Remote Server (github)

 webtinder
webtinder
main
webtinder main

main

Remote Server (github)

👍
 l l
pu
gi t

webtinder webtinder
webtinder
main main
main

Remote Server (github)

 e d !
t u
+ Like cats :D
@ Line 4
n
St ay
Added
lots of
corgis to + Like corgis :D
corgis.py
@ Line 4

+ Like corgis :D
@ Line 4

git reset –hard

Staging area