16 ms·

Git in one image

173 points by guptarohit 5y ago

VeninVidiaVicii 5y ago
I use Github but every time I do something it feels like I’m going to break the whole project. Looking at this map, I realize I basically know nothing. Where did all you guys learn how to use GitHub?
- kqr 5y ago
  Step one is to learn the difference between git and GitHub. ;) Jokes aside, there is a wealth of literature on how to understand git from the ground up. I strongly recommend reading through one of those. I can't recommend anything in particular, but I'm sure someone else will chime in with their favourite.
  - raju 5y ago
    [shameless plug] Since you asked, I just published Head First Git. I did a "Show HN" that didn't get much traction, but rather than repeating what I said there, I'll just post the link—https://news.ycombinator.com/item?id=30072348 https://news.ycombinator.com/item?id=30072348 [end shameless plug] And to the point many others made, there are a _lot_ of resources out there, but if you are looking to start back at the basics, I feel my book (which is designed for beginners) might be a good start. Of course there is the canonical Pro Git (https://git-scm.com/book/en/v2 https://git-scm.com/book/en/v2) book. And once you understand the _Directed Acyclic Graph_ I feel https://github.com/git-school/visualizing-git https://github.com/git-school/visualizing-git is a great project to see what happens when you run certain operations in Git. Perhaps you've concluded that I love Git, and I love teaching it—I am @looselytyped on Twitter (DMs are open) if you want to reach out and we can carry out a conversation elsewhere—always willing to talk Git. Edit—I replied to the wrong comment. My apologies kqr. This was meant for VeninVidiaVicii.
- JimDabell 5y ago
  This is a diagram illustrating Git, not GitHub. Git is a version control system. GitHub is a hosting platform for Git repositories that adds a web interface and social features. I learnt how to use Git by picking up the basics, then whenever I needed to do anything new or whenever something didn’t make sense, I read about how that part of Git worked. Also, I read the Pro Git book, which is free and linked to from the Git homepage. If all you ever do is look for a quick fix or use a cheat sheet when something doesn’t make sense, you’re the “One year of experience ten times” developer, so try not to do that. Learning how GitHub works after you understand Git is easy.
- coldpie 5y ago
  I'm a big fan of git's tutorial manpages: gittutorial, gittutorial-2, and especially gitcore-tutorial which digs into the actual on-disk representation to let you understand what the upper layers are actually doing. Understanding the underlying model helps you reason about how to accomplish what you want to do. Manpages available on your local system, or they're online here: https://git-scm.com/docs/gittutorial https://git-scm.com/docs/gittutorial https://git-scm.com/docs/gittutorial-2 https://git-scm.com/docs/gittutorial-2 https://git-scm.com/docs/gitcore-tutorial https://git-scm.com/docs/gitcore-tutorial
- macintux 5y ago
  If you like video content, Jessica Kerr has a very nice talk on git. https://youtu.be/yCh6TSLIQBQ https://youtu.be/yCh6TSLIQBQ
- enb 5y ago
  As others have mentioned, make sure you understand the difference between git an github. The way I built an understanding of git was to create a local git repo, and start working with some plain text files. I tried the various commands - add, commit, branch, merge, and observed what happened to each file. Take this a step further and start working with a remote - you can use github. This is how I built a mental model of what git and its commands do.
usrbinbash 5y ago
Probably the best way I have seen so far to explain git. Whoever made this: Good work!
- nirui 5y ago
  I'd say the creator of the graph is probably the owner of the repository, based on the commit records here: https://github.com/JannikArndt/git-in-one-image/commits/master https://github.com/JannikArndt/git-in-one-image/commits/mast...
leathersoft 5y ago
Wow, good job!
deleted 5y ago
[deleted]
stblack 5y ago
Then there’s NDPSoftware’s Git Cheatsheet which is interactive. Click or tap the backgrounds or the arrows. https://ndpsoftware.com/git-cheatsheet.html#loc=local_repo https://ndpsoftware.com/git-cheatsheet.html#loc=local_repo;
drewmol 5y ago
Ah, no wonder I’m so confused by git.
- rco8786 5y ago
  I am fully convinced that there’s a “better” way out there waiting to be discovered. I think it could even be built on top of existing git internals. But the user story of actually interesting with git is very bad.
jacknews 5y ago
Looks great! My 12-year old questioned why a 'pull request' is named the way it is. Obviously it's after the command 'git pull' which fetches the latest changes, then merges them, but it's confusing according to him, and should be called a 'merge request' instead. I don't disagree.
- chousuke 5y ago
  "git pull" doesn't merge the "latest changes"; A pull is fetch+merge, and you can fetch from any repository, so a pull request is saying "please fetch commits from my repository and merge them". I think git made a mistake in making pull the default (fetch+explicit merge is better) but "pull request" is correct terminology.
  - pletnes 5y ago
    Is pull the default? What does that even mean? I certainly tend to fetch, checkout origin/master, create a feature branch, push, then merge in github’s web interface. I «never» pull and I don’t have to change any settings.
    - chousuke 5y ago
      pull is "default" in that everyone gets taught to use it and you have to unlearn that once you realize it's not what you want most of the time.
      - onetom 5y ago
        this statement surpises me, because `git pull --rebase` is practically my most frequently used operation, besides commit, push and changing branches. intellij even comes with the concept of update, which is either a `pull` or a `pull --rebase` it asks u once which of those should be the default behaviour, then all i do is cmd-t to updaTe (aka git pull --rebase) my current branch, then push my commits, after a potential 3-way merge, which intellij has the easiest-to-learn interface for, imho.
dijit 5y ago
Coincidentally there was a pretty good Computerphile video released today about how git is working under the hood: https://www.youtube.com/watch?v=bSA91XTzeuA https://www.youtube.com/watch?v=bSA91XTzeuA
W0lf 5y ago
The most recent computerphile YT video [1] is talking about the inner workings of git (Inside the hidden git folder) which I found quite interesting. Anybody reading this that came across some previous article about how git works and couldn‘t be bothered (just like me) may find this interesting. [1] https://youtu.be/bSA91XTzeuA https://youtu.be/bSA91XTzeuA
rochak 5y ago
Good job!
bregma 5y ago
ublaze 5y ago
Does anyone know which tool can be used to make such visualizations?
- nanomonkey 5y ago
  Graphviz (dot diagram notation) or Mermaid diagram editor. Emacs has good support for rendering dot notation.
- dahart 5y ago
  Inkscape (free, Linux mainly), Gravit Designer (cloud app, happy user), LucidChart (cloud app, great IMO but disclosure: ex employee), Visio (Windows), OmniGraffle (Mac), Illustrator ($$ but excellent).
xbar 5y ago
Well done. Do +X/-X represent exactly what is present in "changes"? If so, consistency in terminology would help.
deleted 5y ago
[deleted]
pkdpic 5y ago
I wonder if torvalds had something like this on a whiteboard at some point. Or just in that big juicy brain of his maybe.
bufordtwain 5y ago
OK but it shouldn't be necessary to know what's going on under the covers of your source code control system.
- csswizardry 5y ago
  A lot of things aren’t necessary.
- j4hdufd8 5y ago
  This is barely "under the covers". It really just pictures the core ideas behind decentralized version control systems such as git. You can't reason about decentralized version control without many of these core ideas.
- dahart 5y ago
  It isn’t necessary to know what’s going on under the covers of git. This map isn’t showing under the covers either; it’s just diagramming the shape of a repo. It is, however, necessary to have a mental model of what your source control system actually does above the covers, and how to use it. It is important to know that you have a staging area and a local repo and a remote/upstream repo. It is important to know that each commit has a parent commit (or occasionally two or more parents). It’s important to know where your commits go, how to put them there, and how to get them back later.
Skunkleton 5y ago
Lots of confused beginners in this thread. IMO diagrams, and tutorials, that take this approach to teaching git are the reason people have such a hard time. After learning the very basic commands, the next step is to learn the internal data structure of git at a conceptual level. This may seem like a bad design to some, and that is a reasonable thing to debate. It doesn’t change the reality that knowing basic git internals makes git much easier to use.
- temac 5y ago
  I disagree that you need to know the internals. You need to understand an abstract model, that may have been influenced by internals of early versions, and part of such internals may have been preserved into current versions. But unless you want to modify git, you should not have to know anything about the internals. The abstract model is enough. I consider to know virtually nothing of git internals, yet I consider to be proficient in understanding its abstract model and using it.
  - zamber 5y ago
    Or so you may think. Working with diffs / merge conflicts already exposes you to internals. Knowing that committing big binary blobs is a bad idea also could be categorized as "knowing internals". Knowing why LF/CRLF leads to conflicts (without setting .gitattributes) also is knowing git internals.
- saagarjha 5y ago
  It really doesn't, because you can know HEADs and the working index and the Merkle tree works, and even know the how you want the internal state to be transformed, but still run into "ok what is the command for doing what I want? Is it git-stamp-log or git-execute-detached-head?"
  - u801e 5y ago
    The approach I take when I'm not sure of which subcommand to use is to read through the git man page and skim through the commands listed. If one looks like a candidate, I'll open up the man page for that command and see if it's what I need.
dahart 5y ago
Interesting idea, I’d love to have more context; to hear who this is aimed at, and what it’s for or how it’s meant to be used. Is this helpful for either git newbies, or git experts? I feel like if you don’t already know git, this map doesn’t actually explain what rebase or stash or clone or any commands really do without a very long side-explanation attached. The image doesn’t clarify what the wide arrows (e.g. reset) do differently than the solid lines or the dashed lines. It’s cool to see the local & remote repos sort-of mapped out if you know git, but it seems like the explanatory power of this might be lower than talking about it, or maybe mixing many images, even for experts? Sorry I don’t mean to be overly critical, just curious what the goal is.
cuteboy19 5y ago
This only explains one particular git flow. A simpler explanation is possible especially when you don't treat the named branches in a special manner
sylware 5y ago
Hey, can we get a rendered png somewhere? plz? (with a reasonable resolution for full HD screens)
gdulli 5y ago
Same energy as: https://ptrthomas.files.wordpress.com/2006/06/jtrac-callstack1.png?w=349&zoom=2 https://ptrthomas.files.wordpress.com/2006/06/jtrac-callstac... In that the image works equally well as elegance for some, and criticism for others.
- dash2 5y ago
  I was thinking, same energy as https://www.theguardian.com/news/datablog/2010/apr/29/mcchrystal-afghanistan-powerpoint-slide https://www.theguardian.com/news/datablog/2010/apr/29/mcchry...
hassancf 5y ago
I personally find this to be the best video on git by far: https://www.youtube.com/watch?v=2sjqTHE0zok https://www.youtube.com/watch?v=2sjqTHE0zok (MIT OpenCourseWare, Missing Semester). 1h25mn well spent

173 points by guptarohit 5y ago

I use Github but every time I do something it feels like I’m going to break the whole project. Looking at this map, I realize I basically know nothing. Where did all you guys learn how to use GitHub?

kqr 5y ago
Step one is to learn the difference between git and GitHub. ;) Jokes aside, there is a wealth of literature on how to understand git from the ground up. I strongly recommend reading through one of those. I can't recommend anything in particular, but I'm sure someone else will chime in with their favourite.
- raju 5y ago
  [shameless plug] Since you asked, I just published Head First Git. I did a "Show HN" that didn't get much traction, but rather than repeating what I said there, I'll just post the link—https://news.ycombinator.com/item?id=30072348 https://news.ycombinator.com/item?id=30072348 [end shameless plug] And to the point many others made, there are a _lot_ of resources out there, but if you are looking to start back at the basics, I feel my book (which is designed for beginners) might be a good start. Of course there is the canonical Pro Git (https://git-scm.com/book/en/v2 https://git-scm.com/book/en/v2) book. And once you understand the _Directed Acyclic Graph_ I feel https://github.com/git-school/visualizing-git https://github.com/git-school/visualizing-git is a great project to see what happens when you run certain operations in Git. Perhaps you've concluded that I love Git, and I love teaching it—I am @looselytyped on Twitter (DMs are open) if you want to reach out and we can carry out a conversation elsewhere—always willing to talk Git. Edit—I replied to the wrong comment. My apologies kqr. This was meant for VeninVidiaVicii.
JimDabell 5y ago
This is a diagram illustrating Git, not GitHub. Git is a version control system. GitHub is a hosting platform for Git repositories that adds a web interface and social features. I learnt how to use Git by picking up the basics, then whenever I needed to do anything new or whenever something didn’t make sense, I read about how that part of Git worked. Also, I read the Pro Git book, which is free and linked to from the Git homepage. If all you ever do is look for a quick fix or use a cheat sheet when something doesn’t make sense, you’re the “One year of experience ten times” developer, so try not to do that. Learning how GitHub works after you understand Git is easy.
coldpie 5y ago
I'm a big fan of git's tutorial manpages: gittutorial, gittutorial-2, and especially gitcore-tutorial which digs into the actual on-disk representation to let you understand what the upper layers are actually doing. Understanding the underlying model helps you reason about how to accomplish what you want to do. Manpages available on your local system, or they're online here: https://git-scm.com/docs/gittutorial https://git-scm.com/docs/gittutorial https://git-scm.com/docs/gittutorial-2 https://git-scm.com/docs/gittutorial-2 https://git-scm.com/docs/gitcore-tutorial https://git-scm.com/docs/gitcore-tutorial
macintux 5y ago
If you like video content, Jessica Kerr has a very nice talk on git. https://youtu.be/yCh6TSLIQBQ https://youtu.be/yCh6TSLIQBQ
enb 5y ago
As others have mentioned, make sure you understand the difference between git an github. The way I built an understanding of git was to create a local git repo, and start working with some plain text files. I tried the various commands - add, commit, branch, merge, and observed what happened to each file. Take this a step further and start working with a remote - you can use github. This is how I built a mental model of what git and its commands do.

usrbinbash 5y ago

Probably the best way I have seen so far to explain git. Whoever made this: Good work!

nirui 5y ago
I'd say the creator of the graph is probably the owner of the repository, based on the commit records here: https://github.com/JannikArndt/git-in-one-image/commits/master https://github.com/JannikArndt/git-in-one-image/commits/mast...

leathersoft 5y ago

Wow, good job!

deleted 5y ago

[deleted]

stblack 5y ago

Then there’s NDPSoftware’s Git Cheatsheet which is interactive. Click or tap the backgrounds or the arrows. https://ndpsoftware.com/git-cheatsheet.html#loc=local_repo https://ndpsoftware.com/git-cheatsheet.html#loc=local_repo;

drewmol 5y ago

Ah, no wonder I’m so confused by git.

rco8786 5y ago
I am fully convinced that there’s a “better” way out there waiting to be discovered. I think it could even be built on top of existing git internals. But the user story of actually interesting with git is very bad.

jacknews 5y ago

Looks great! My 12-year old questioned why a 'pull request' is named the way it is. Obviously it's after the command 'git pull' which fetches the latest changes, then merges them, but it's confusing according to him, and should be called a 'merge request' instead. I don't disagree.

chousuke 5y ago
"git pull" doesn't merge the "latest changes"; A pull is fetch+merge, and you can fetch from any repository, so a pull request is saying "please fetch commits from my repository and merge them". I think git made a mistake in making pull the default (fetch+explicit merge is better) but "pull request" is correct terminology.
- pletnes 5y ago
  Is pull the default? What does that even mean? I certainly tend to fetch, checkout origin/master, create a feature branch, push, then merge in github’s web interface. I «never» pull and I don’t have to change any settings.
  - chousuke 5y ago
    pull is "default" in that everyone gets taught to use it and you have to unlearn that once you realize it's not what you want most of the time.
    - onetom 5y ago
      this statement surpises me, because `git pull --rebase` is practically my most frequently used operation, besides commit, push and changing branches. intellij even comes with the concept of update, which is either a `pull` or a `pull --rebase` it asks u once which of those should be the default behaviour, then all i do is cmd-t to updaTe (aka git pull --rebase) my current branch, then push my commits, after a potential 3-way merge, which intellij has the easiest-to-learn interface for, imho.

dijit 5y ago

Coincidentally there was a pretty good Computerphile video released today about how git is working under the hood: https://www.youtube.com/watch?v=bSA91XTzeuA https://www.youtube.com/watch?v=bSA91XTzeuA

W0lf 5y ago

The most recent computerphile YT video [1] is talking about the inner workings of git (Inside the hidden git folder) which I found quite interesting. Anybody reading this that came across some previous article about how git works and couldn‘t be bothered (just like me) may find this interesting. [1] https://youtu.be/bSA91XTzeuA https://youtu.be/bSA91XTzeuA

rochak 5y ago

Good job!

bregma 5y ago

ublaze 5y ago

Does anyone know which tool can be used to make such visualizations?

nanomonkey 5y ago
Graphviz (dot diagram notation) or Mermaid diagram editor. Emacs has good support for rendering dot notation.
dahart 5y ago
Inkscape (free, Linux mainly), Gravit Designer (cloud app, happy user), LucidChart (cloud app, great IMO but disclosure: ex employee), Visio (Windows), OmniGraffle (Mac), Illustrator ($$ but excellent).

xbar 5y ago

Well done. Do +X/-X represent exactly what is present in "changes"? If so, consistency in terminology would help.

deleted 5y ago

[deleted]

pkdpic 5y ago

I wonder if torvalds had something like this on a whiteboard at some point. Or just in that big juicy brain of his maybe.

bufordtwain 5y ago

OK but it shouldn't be necessary to know what's going on under the covers of your source code control system.

csswizardry 5y ago
A lot of things aren’t necessary.
j4hdufd8 5y ago
This is barely "under the covers". It really just pictures the core ideas behind decentralized version control systems such as git. You can't reason about decentralized version control without many of these core ideas.
dahart 5y ago
It isn’t necessary to know what’s going on under the covers of git. This map isn’t showing under the covers either; it’s just diagramming the shape of a repo. It is, however, necessary to have a mental model of what your source control system actually does above the covers, and how to use it. It is important to know that you have a staging area and a local repo and a remote/upstream repo. It is important to know that each commit has a parent commit (or occasionally two or more parents). It’s important to know where your commits go, how to put them there, and how to get them back later.

Skunkleton 5y ago

Lots of confused beginners in this thread. IMO diagrams, and tutorials, that take this approach to teaching git are the reason people have such a hard time. After learning the very basic commands, the next step is to learn the internal data structure of git at a conceptual level. This may seem like a bad design to some, and that is a reasonable thing to debate. It doesn’t change the reality that knowing basic git internals makes git much easier to use.

temac 5y ago
I disagree that you need to know the internals. You need to understand an abstract model, that may have been influenced by internals of early versions, and part of such internals may have been preserved into current versions. But unless you want to modify git, you should not have to know anything about the internals. The abstract model is enough. I consider to know virtually nothing of git internals, yet I consider to be proficient in understanding its abstract model and using it.
- zamber 5y ago
  Or so you may think. Working with diffs / merge conflicts already exposes you to internals. Knowing that committing big binary blobs is a bad idea also could be categorized as "knowing internals". Knowing why LF/CRLF leads to conflicts (without setting .gitattributes) also is knowing git internals.
saagarjha 5y ago
It really doesn't, because you can know HEADs and the working index and the Merkle tree works, and even know the how you want the internal state to be transformed, but still run into "ok what is the command for doing what I want? Is it git-stamp-log or git-execute-detached-head?"
- u801e 5y ago
  The approach I take when I'm not sure of which subcommand to use is to read through the git man page and skim through the commands listed. If one looks like a candidate, I'll open up the man page for that command and see if it's what I need.

dahart 5y ago

Interesting idea, I’d love to have more context; to hear who this is aimed at, and what it’s for or how it’s meant to be used. Is this helpful for either git newbies, or git experts? I feel like if you don’t already know git, this map doesn’t actually explain what rebase or stash or clone or any commands really do without a very long side-explanation attached. The image doesn’t clarify what the wide arrows (e.g. reset) do differently than the solid lines or the dashed lines. It’s cool to see the local & remote repos sort-of mapped out if you know git, but it seems like the explanatory power of this might be lower than talking about it, or maybe mixing many images, even for experts? Sorry I don’t mean to be overly critical, just curious what the goal is.

cuteboy19 5y ago

This only explains one particular git flow. A simpler explanation is possible especially when you don't treat the named branches in a special manner

sylware 5y ago

Hey, can we get a rendered png somewhere? plz? (with a reasonable resolution for full HD screens)

gdulli 5y ago

Same energy as: https://ptrthomas.files.wordpress.com/2006/06/jtrac-callstack1.png?w=349&zoom=2 https://ptrthomas.files.wordpress.com/2006/06/jtrac-callstac... In that the image works equally well as elegance for some, and criticism for others.

dash2 5y ago
I was thinking, same energy as https://www.theguardian.com/news/datablog/2010/apr/29/mcchrystal-afghanistan-powerpoint-slide https://www.theguardian.com/news/datablog/2010/apr/29/mcchry...

hassancf 5y ago

I personally find this to be the best video on git by far: https://www.youtube.com/watch?v=2sjqTHE0zok https://www.youtube.com/watch?v=2sjqTHE0zok (MIT OpenCourseWare, Missing Semester). 1h25mn well spent