DEV Community

loading...
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 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 😄

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
ginomempin profile image
Gino Mempin • Edited

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.

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
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
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
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
isajal07 profile image
Sajal Shrestha

TheAvocoder back with another masterpiece. 👊🏼

Collapse
lydiahallie profile image
Lydia Hallie Author

thank uu 🥑😎

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
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
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
vagoel profile image
Varun

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

Collapse
pestrinmarco profile image
Marco Pestrin

wooow! amazing :) very good job

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
codingsafari profile image
Nico Braun

Amazing post, like every inch of it.

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
artoodeeto profile image
aRtoo

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

Collapse
thisisthien profile image
Thien Nguyen

Very useful!

Collapse
viciojha profile image
Vivek Ojha

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

Collapse
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?

Collapse
akashpreet profile image
Akash Preet

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
rosered11 profile image
Rosered

I like it.

Collapse
josephj11 profile image
Joe

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

Collapse
ityy profile image
Yang Yang

you are superstar!

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
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
vaporyhumo profile image
Andrés Vilina • Edited

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

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
julesparra profile image
Jules Parra

omg this is so useful thank you

Collapse
arthur40056743 profile image
Arthur

oh wow

Collapse
pandaquests profile image
pandaquests

How did you created the animation?

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
linychuo profile image
LiYongchao

nice article

Collapse
aaronmbos profile image
Aaron Bos

Really great explanations!

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
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
xiaoliz profile image
VoLee

What tools do the Git interactive operation use?

Collapse
kpulkit29 profile image
Pulkit Kashyap

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

Collapse
iwangbowen profile image
Bowen Wang

Awesome article. Thank you so much

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
hama05 profile image
Hippo.op

Very good !!!

Collapse
antonylineesh1 profile image
lin

Very helpful

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
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
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
maurycyszmurlo profile image
Maurycy Szmurlo

Great post with so nice and clear visualizations. 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
tony133 profile image
Tony

Fantastic post!

Collapse
elisabethdiang profile image
Elisabeth Diang 🌻

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
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
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
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
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
markandersonnc profile image
MarkAndersonNC

Git is my home :)

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
jonghunbok profile image
박종훈

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

Collapse
chrisdetmering profile image
Chris Detmering

What tools do you use to make these visualizations?