DEV Community

Cover image for πŸŒ³πŸš€ CS Visualized: Useful Git Commands

πŸŒ³πŸš€ CS Visualized: Useful Git Commands

Lydia Hallie on April 01, 2020

Although Git is a very powerful tool, I think most people would agree when I say it can also be... a total nightmare 😐 I've always found it very us...
Collapse
 
codypearce profile image
Cody Pearce

Awesome visualizations as usual!

It's interesting there's a few different syntaxes for selecting a previous commit:

HEAD~2          // previous two commits fro head
HEAD~~         // previous two commits from head
HEAD@{2}     // reflog order
18fe5              // previous commit hash
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lydiahallie profile image
Lydia Hallie

Good idea to add that! I'm thinking of generally creating a "cheatsheet" format that also covers all that stuff :) Will do in the next one or when I update the format πŸ˜„

Collapse
 
toby profile image
toby • Edited

Came here to comment specifically along these lines - I can never ever remember what the difference between HEAD~2 and HEAD^2 is !

Had completely forgotten about HEAD@{n} syntax :D

Collapse
 
udayvunnam profile image
Uday Vunnam

Nice visualizations! What do you use to create them?

Collapse
 
flatrick profile image
Patrik

I'd love to know the answer to that too! :)

Collapse
 
dguhl profile image
D. Guhl

Lydia answered in another post of hers, which I recommend myself, that she used Keynote (the presentation software by Apple) to make the animations and then screen-recorded the slides.

The Post is "JavaScript Visualized: the JavaScript Engine"

Thread Thread
 
thiagolottici profile image
ThiagoBL

Lol! Her profile description has the asnwer. :P

Thread Thread
 
murroughfoley profile image
Murrough Foley

Thanks for clearing that up

Collapse
 
mansoor_aman profile image
Mansoor

Awesome animations. It is great to see a diagrammatic representation of these git commands.

For "git pull", is the animation correct? I would have expected it to fetch the commits and then do a ff merge.

For clarity, it would also help to distinguish between the remote repository and the local remote branches in the animations.

Collapse
 
fmeyertoens profile image
Fabian

I also expected the ff merge. But now she already has an animation for git pull --no-ff if ever she needs one. πŸ˜‰

Collapse
 
damsalem profile image
Dani Amsalem

Amazing article Lydia!

I prefer to use Git in terminal as opposed to a GUI like the others on my team so I can face my Git fears. However, most of the documentation I read online is very complicated. Yours is the first long-form article I got to the bottom of and didn't have 2X the confusions as when I started!

Please write more Git visualized articles. I'll devour them, I swear.

Collapse
 
yangc22 profile image
Chason Young

Thanks so much for this awesome post. I have one question is that for this paragraph
"""
This example shows rebasing on the master branch. In bigger projects, however, you usually don't want to do that. A git rebase changes the history of the project as new hashes are created for the copied commits!
"""
You rebase the dev branch over the master branch. But you said in bigger projects you don't want to do that. I'm a little confused here. So in a bigger project, what do we do? Do we rebase the master over other branches? Thanks!

Collapse
 
nikulabs profile image
nikulabs

When you rebase your branch from a different commit on master, you rewrite the history of your branch. This requires a force push. If there are multiple developers working on that branch, this may cause issues if they have work based on the old history of the branch. Rather than doing a rebase, merging master into the branch may make more sense.

Collapse
 
yangc22 profile image
Chason Young

thanks so much for the reply. You mean a force push, do you mean the newer stuff on my branch will be pushed to the mater branch? I'm pretty new so sorry for the dumb questions. Thanks!

Thread Thread
 
nikulabs profile image
nikulabs

TL;DR: Master is unchanged in the process of this rebase example, only the branch is changed.

In the given example, the branch is being based off a different commit than it originally was. In other words, the commits made on master since the branch was originally made will now appear at the start of the branch's history. You will often see this referred to as "replaying commits". The branch commits will have a different hash (you can see this in the example if you look closely), but will have the same contents in them.
git rebase can also be used to "replay" the commits from the dev branch back onto master, but I'm not as familiar with that work flow, so I won't try to give advice on it.

Thread Thread
 
yangc22 profile image
Chason Young

Thanks so much for the awesome reply! Now I understand the flaw of doing this and a better understanding between 'rebase' and 'merge'. I really appreciate it!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Wow! Never knew about something like Reflog! Thanks for your efforts πŸ€—

Collapse
 
borekb profile image
Borek Bernard

Beautifully done! Seeing rebase --onto visualized would be great too πŸ˜„.

Collapse
 
chiragshahklc profile image
Chirag Shah

I have one question.
For example, I am working on the dev branch. Meanwhile, my colleague has pushed 2 more commits.
What should I do? Should I pull first then commit or should I commit first and then pull?
I am always confused over here.

Collapse
 
thamaraiselvam profile image
Thamaraiselvam • Edited

You cannot pull before commit because git does not know what do with changes in local.

This is what we do.

  • commit local changes
  • git pull --rebase (This will copy commits to top. without rebase commits be will merged)
  • git push

if you dont want to commit ur changes and still you want to pull data you do stash

stash will push changes to stack and you can get it from it later or you can auto stash

git pull --rebase --auto-stash

Collapse
 
chiragshahklc profile image
Chirag Shah

Thank you so much for the answer. Very Helpful!

Collapse
 
vagoel profile image
Varun

Amazing work Lydia....Extremely helpful for all dev peeps.

Collapse
 
peteruithoven profile image
Peter Uithoven

Very clarifying, the visualizations I wish where there when I first learned Git.
2 tiny text issues:

  1. "we can cherry-pick that command!" should probably be "we can cherry-pick that commit!".
  2. "We don't want the entire we just" should probably be "We don't want the entire branch we just"

Keep up the good work!

Collapse
 
dhughesxumak profile image
Dave Hughes

Great post, @lydiahallie ! I'll definitely be using this to help team members in the future.

A few thoughts:

  • The soft reset example may have been clearer if the animation showed the files which were changed in the two commits being "removed" (9e78i and 035cc)
  • You kind of touched on the reset --mixed (default), but an animation would have been great
  • A couple more rebase examples, such as rebase --onto, would have been really informative

Thanks again for the awesome resource!

Collapse
 
petr7555 profile image
Petr Janik

I can read about these basic commands many times a year and each time learn something new and refresh what I have forgotten. Thanks for the great article!

Collapse
 
msk61 profile image
Mohammed El-Afifi

Nice read. One note though about rebasing is that we can still run into conflicts just as we do with merges.

Collapse
 
sergeikuznetsov profile image
Sergey Kuznetsov

I agree. Here, the article is misleading.

Collapse
 
isajal07 profile image
Sajal Shrestha

TheAvocoder back with another masterpiece. πŸ‘ŠπŸΌ

Collapse
 
lydiahallie profile image
Lydia Hallie

thank uu πŸ₯‘πŸ˜Ž

Collapse
 
pestrinmarco profile image
Marco Pestrin

wooow! amazing :) very good job

Collapse
 
artoodeeto profile image
aRtoo

You really are the lost supergirl. Thank you super champ. :(

Collapse
 
donghoon759 profile image
Donghoon Song

Such a nice visualization!!! Thanks a lot. It helped me a lot to better understand git commands. Would you mind if I translate it in Korean and repost on my blog? I will leave the original link of course :)

Collapse
 
adarshshrivastava001 profile image
Adarsh-Shrivastava-001

Is it true that we can't get merge conflicts while rebasing? Because I am positive I faced some merge conflicts while rebasing. It would be great if someone could explain when and why would that happen?

Collapse
 
malej_pan profile image
Bedrich Horak

Really awesome!! Thank you.
Do you think you could make an animation of git pull --rebaseπŸ™? I would like to show it in comparison to git pull.

Collapse
 
alexaegis profile image
AlexAegis

pull is fetch + merge
pull --rebase is fetch + rebase

Collapse
 
thisisthien profile image
Thien Nguyen

Very useful!

Collapse
 
rosered11 profile image
Rosered

I like it.

Collapse
 
samuelfaure profile image
Samuel-Zacharie FAURE

Very good post!

Can you please add git merge [branch] --strategy-option ours / them

and git rebase [branch] --strategy-option ours / them

Thanks!

Collapse
 
ityy profile image
Yang Yang

you are superstar!

Collapse
 
viciojha profile image
Vivek Ojha

Awesome. I wish we could see this visualization on our actual git repository.
Is there any way ?

Collapse
 
akashpreet profile image
Akash P

This is interesting, Thanks for this post :-)
Added in my reading list

Collapse
 
chidioguejiofor profile image
Chidiebere Ogujeiofor

This is very cool. Really love the visualisation.

What tool did you use to make those visualisation?

Great job!

Collapse
 
kokaneka profile image
kapeel kokane

In the animation for Pulling, shouldn't the 2 commits (7e456 and efi81) get copied over to the left side?

Collapse
 
josephj11 profile image
Joe

Thanks for the explanations. I really need to start using Git, but I keep putting it off.

Collapse
 
kpulkit29 profile image
Pulkit Kashyap

Amazing stuff Lydia Hallie. Your blogs are really helpful. Keep up the good work. πŸ‘πŸ‘

Collapse
 
jml9904 profile image
Jerome Levy

Been using git for a very, very long time. This is absolutely the most helpful thing I've seen so far!

Collapse
 
xiaoliz profile image
VoLee

What tools do the Git interactive operation use?

Collapse
 
aghem profile image
meghat • Edited

Awesome tutorial and great visualisations!
Thanks Lydia!

How do you make these cool animations? ( If its not a trade secret Would love to learn πŸ˜„ )

Collapse
 
reythedev profile image
Rey van den Berg

This was great! I've ploughed through git tutorials and so on before but this visualization thing makes it seem all-so-simple! I dig it, thank you!

Collapse
 
maurycyszmurlo profile image
Maurycy Szmurlo

Great post with so nice and clear visualizations. Thanks

Collapse
 
devin profile image
Devin Picciolini • Edited

Hi! What program do you use to make the images/gifs for these posts? It's awesome! Been searching around and can't find any info on it, I would really appreciate it. Thanks!

Collapse
 
bruceeewong profile image
Bruski Wong

Photos & animations are always vivid to understand! Very impressive~

Collapse
 
robinxdroid profile image
Robin

Cool, this is very usefulπŸ˜„

Collapse
 
aaronmbos profile image
Aaron Bos

Really great explanations!

Collapse
 
linychuo profile image
LiYongchao

nice article

Collapse
 
tony133 profile image
Antonio Tripodi

Fantastic post!

Collapse
 
acupoftee profile image
Tee

Thank you for the visuals and explanations. This is exactly what needs to be covered in a computer science curriculum. Great work as always!

Collapse
 
antonylineesh1 profile image
lin

Very helpful

Collapse
 
kzvonov profile image
Kirill Zvonov

Thanks for the visualizations!

Used this cheatsheet ohshitgit.com/ for some situations with git, but it's always better to understand

Collapse
 
iwangbowen profile image
Bowen Wang

Awesome article. Thank you so much

Collapse
 
neoroma profile image
Π ΠΎΠΌΠ°Π½ Π¨

Thanks!

Collapse
 
yogendra0sharma profile image
Yogendra Sharma

Hi Lydia
Awesome post.
Which tool or service you use to create visuals?

Collapse
 
jessekphillips profile image
Jesse Phillips

I really like what you did with squash where files were brought into the same commit. This would be cool to do with most all of them. Like reset and reset hard.

Collapse
 
jdunham2 profile image
jdunham2

I created an account just to tell you how much I appreciate this post.
Visualizing these commands is super helpful.
Bookmarking this page :)

Collapse
 
vaporyhumo profile image
AndrΓ©s Vilina • Edited

This is a really good guide, awesome work, thanks!!

Collapse
 
opus1217 profile image
opus1217

I'm one of the many(?) who only learns more about git when something goes wrong. Your animated post was great! I may actually know more ahead of my next problem!

Collapse
 
ber79 profile image
Bernardo Raskovsky

The best explanation I have ever seen. Congratulations!

Collapse
 
varianwrynn profile image
Lee.Wang

WOW!!! So Amazing, thank you so much

Collapse
 
brouer profile image
Kim Brouer

Really nice illustrations.
Definitely going to use this when bringing newcomers up to speed on Git.

Only niggle is that rebasing will give you exactly the same conflicts as a merge would have.

Collapse
 
christianguevara profile image
Christian Guevara • Edited

Good Job, pretty clear and handy!

Collapse
 
dguhl profile image
D. Guhl

Awesome piece! How did you create the visualizations? I'd love to create my own for software documentation.

Collapse
 
pandaquests profile image
Panda Quests

How did you created the animation?

Collapse
 
arthur40056743 profile image
Arthur

oh wow

Collapse
 
julesparra profile image
Jules Parra

omg this is so useful thank you

Collapse
 
daydaylee1227 profile image
daydaylee1227

Hello, I would like to republish this article of yours for my blog, there is no business use value.

Collapse
 
paras594 profile image
Paras πŸ§™β€β™‚οΈ

amazing post !!!...it made many things clear .. thanks!

Collapse
 
thamaraiselvam profile image
Thamaraiselvam

thanks for the great article. I always have confusion and now I AM CLEAR.

Collapse
 
markandersonnc profile image
MarkAndersonNC

Git is my home :)

Collapse
 
phantas0s profile image
Matthieu Cneude

Really, really nice work. It's one of the best git tutorial/cheatsheet I've seen!

Collapse
 
mridubhatnagar profile image
Mridu Bhatnagar

Thanks for an amazing article Lydia.
Which tool do you use for coming up with these amazing visualizations though?

Collapse
 
allanj profile image
Allan Jie

How to make the figures? It’s really impressive

Collapse
 
tothricsaj profile image
Richard Toth

No doubt, the best tool is vi to resolve conflicts. πŸ˜„ Your animations are excellent again, thanks a lot

Collapse
 
rad_hombre profile image
Matthew Orndoff

These visualizations are πŸ”₯πŸ”₯πŸ”₯
Great post!

Collapse
 
adilshehzad786 profile image
Adil Shahzad

A Great Blog.

I have a very quick question, how can I design such cool animation . can you recommend to me any software or website that would be great. thanks.

Collapse
 
haha profile image
HaHa

Very good !!!

Collapse
 
utkarsh profile image
Utkarsh Talwar

Quite the informative piece, Lydia! I shared it in our Telegram newsletter/channel for devs. πŸ‘‰πŸΌ Link

Collapse
 
johncerpa98 profile image
John

Great post

Collapse
 
mrcricket profile image
MrCricket

..reset moves HEAD to the specified commit..

I think it should be reset moves the branch that HEAD is pointing to

Collapse
 
andreyginger profile image
⚑ Andrey Ginger

I wonder what changes in the tasks of the project corresponds to all this hell?

Collapse
 
geekpowerfelixsun profile image
Felix Sun

The writing is very good, especially the animation effect. May I ask, what is this dynamic picture made of? Can you recommend it? Thank you very much!

Collapse
 
chrisdetmering profile image
Chris Detmering

What tools do you use to make these visualizations?

Collapse
 
karuppiah7890 profile image
Karuppiah

@lydiahallie Awesome visualizations 😁 I'm always curious as to how to create visualizations (especially for CS concepts) like animations etc with ease. How do you do it? Any tools you would recommend?

Collapse
 
hanseullee profile image
Hanseul Lee

Can I translate this post to Koran at my blog? It's really awesome and usefull!

Collapse
 
jonghunbok profile image
λ°•μ’…ν›ˆ

This article is amazing. I'll share it to my mates. Thank you for bringing all these together! Well Done!!