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...
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
lydiahallie profile image
Lydia Hallie Author

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 😄

toby profile image
toby • Edited on

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

udayvunnam profile image
Uday Vunnam

Nice visualizations! What do you use to create them?

flatrick profile image

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

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

Lol! Her profile description has the asnwer. :P

Thread Thread
murroughfoley profile image
Murrough Foley

Thanks for clearing that up

ginomempin profile image
Gino Mempin • Edited on

Great visualizations :)

It might be worth noting that git reset does not delete untracked files, even with --hard. It only affects those that are already tracked.

So, for example, some recent commits causes your app to generate some files, then you later reset those commits, it will leave those files as untracked.

For that, you need git clean.

mansoor_aman profile image

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.

fmeyertoens profile image

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

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.

vaibhavkhulbe profile image
Vaibhav Khulbe

Wow! Never knew about something like Reflog! Thanks for your efforts 🤗

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.

thamaraiselvam profile image
Thamaraiselvam • Edited on

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

chiragshahklc profile image
Chirag Shah

Thank you so much for the answer. Very Helpful!

borekb profile image
Borek Bernard

Beautifully done! Seeing rebase --onto visualized would be great too 😄.

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!

nikulabs profile image

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.

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

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!

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!

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!

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.

sergeikuznetsov profile image
Sergey Kuznetsov

I agree. Here, the article is misleading.

isajal07 profile image
Sajal Shrestha

TheAvocoder back with another masterpiece. 👊🏼

lydiahallie profile image
Lydia Hallie Author

thank uu 🥑😎

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!

vagoel profile image

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

pestrinmarco profile image
Marco Pestrin

wooow! amazing :) very good job

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.

alexaegis profile image

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

codingsafari profile image
Nico Braun

Amazing post, like every inch of it.

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 :)

adarshshrivastava001 profile image

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?

artoodeeto profile image

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

thisisthien profile image
Thien Nguyen

Very useful!

josephj11 profile image

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

comscience profile image
kapeel kokane

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

ityy profile image
Yang Yang

you are superstar!

chidioguejiofor profile image
Chidiebere Ogujeiofor

This is very cool. Really love the visualisation.

What tool did you use to make those visualisation?

Great job!

viciojha profile image
Vivek Ojha

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

akashpreet profile image
Akash Preet

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

rosered11 profile image

I like it.

mridubhatnagar profile image
Mridu Bhatnagar

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

allanj profile image
Allan Jie

How to make the figures? It’s really impressive

tothricsaj profile image
Richard Toth

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

rad_hombre profile image
Matthew Orndoff

These visualizations are 🔥🔥🔥
Great post!

utkarsh profile image
Utkarsh Talwar

Quite the informative piece, Lydia! I shared it in our Telegram newsletter/channel for devs. 👉🏼 Link

johncerpa98 profile image

Great post

mrcricket profile image

..reset moves HEAD to the specified commit..

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

andreyginger profile image
⚡ Andrey Ginger

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

vaporyhumo profile image
Andrés Vilina • Edited on

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

adilshehzad786 profile image
Adil Shehzad

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.

markandersonnc profile image

Git is my home :)

daydaylee1227 profile image

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

julesparra profile image
Jules Parra

omg this is so useful thank you

arthur40056743 profile image

oh wow

pandaquests profile image

How did you created the animation?

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.

linychuo profile image

nice article

aaronmbos profile image
Aaron Bos

Really great explanations!

devin profile image
Devin Picciolini • Edited on

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!

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!

xiaoliz profile image

What tools do the Git interactive operation use?

kpulkit29 profile image
Pulkit Kashyap

Amazing stuff Lydia Hallie. Your blogs are really helpful. Keep up the good work. 👍👍

iwangbowen profile image
Bowen Wang

Awesome article. Thank you so much

kzvonov profile image
Kirill Zvonov

Thanks for the visualizations!

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

hama05 profile image

Very good !!!

antonylineesh1 profile image

Very helpful

neoroma profile image
Роман Ш


yogendra0sharma profile image
Yogendra Sharma

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

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!

aghem profile image
meghat • Edited on

Awesome tutorial and great visualisations!
Thanks Lydia!

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

maurycyszmurlo profile image
Maurycy Szmurlo

Great post with so nice and clear visualizations. Thanks

bruceeewong profile image
Bruski Wong

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

robinxdroid profile image

Cool, this is very useful😄

tony133 profile image

Fantastic post!

elisabethdiang profile image

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

jdunham2 profile image

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

opus1217 profile image

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!

ber79 profile image
Bernardo Raskovsky

The best explanation I have ever seen. Congratulations!

varianwrynn profile image

WOW!!! So Amazing, thank you so much

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.

christianguevara profile image
Christian Guevara • Edited on

Good Job, pretty clear and handy!

dguhl profile image
D. Guhl

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

paras594 profile image
Paras 🧙‍♂️

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

thamaraiselvam profile image

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

phantas0s profile image
Matthieu Cneude

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

hanseullee profile image
Hanseul Lee

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

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!

chrisdetmering profile image
Chris Detmering

What tools do you use to make these visualizations?

jonghunbok profile image

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