Illustrated Notes on Fixing Git Mistakes
Tags: git, javascript, fundamentals
Published: 2020-11-17 17:39:55

---
title: Illustrated Notes on Fixing Git Mistakes
published: true
description: Illustrated notes on how to fix common Git mistakes
tags: git, javascript, fundamentals
//cover_image: https://direct_url_to_image.jpg
---

![FixGitMistakes_4_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/tsbsimsb1nxz134m5yo0.png)

These are illustrated notes I made while working through [Chris Achard](https://chrisachard.com/)'s [Fix Common Git Mistakes](http://bit.ly/gitfix) course on egghead.

The course is a great refresher on the fundamental structure of git, adding and removing commits, and (critically) undoing mistakes of all kinds.

![fix-common-git-mistakes title](https://dev-to-uploads.s3.amazonaws.com/i/le6fafirpbq05vyv6xtb.png)

---

## The Basic Structure of Git

Chris covers all the various 'levels' your Git files can be at. I personally needed to think of it as a spatial stack to understand how files move between them.

Every time I push commits to Github I see something like this in my head:
 
![FixGitMistakes_3_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/2wkf22g4qncsurrpypzd.png)

I also found it helpful to think of the 'stash' as a side drawer you tuck files away in, and then can 'pop' them back out later.

---

## Branches are Pointers

This framing of git branches as "pointers" you can move around changed the way I think about them a lot.

We can move the pointers to different commits, which are just different versions of our project at a specific point in time.

![FixGitMistakes_1_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/adrtw3t9ima7vimsbay6.png)

---

## Git Log
`git log` is a handy feature that shows you all your previous commits and their details. It's quite verbose though.

`git log --oneline` is much easier to read since it only shows you the commit hashes and messages

`git log --graph` draws a tiny graph in the terminal showing branches and merges
![Artboard 2_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/j3syvt51em8xuuoc4cvu.png)

---

## Undoing Mistakes

![Artboard 4_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/btf0y16b5hzjcx1k4bmu.png)

### Git Commit Ammend
`git commit --ammend` lets us add or change files in our last commit, as well as the commit message

![Artboard 3_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/cke5jpmnb823wl6o6x2a.png)

### Git Reset
`git reset` will move a file backwards. If you're committed a file to either staging or the local repo, we can bring it back to our working directory.

![Artboard 5_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/x32i3x8nu8ki07rsgljt.png)
Git gives us three levels of "intensity" for resetting - `git reset --hard`, `git reset --soft`, and mixed.

If you don't specify one, mixed is the default which just moves it from the local repo back to your working files.

![Artboard 6_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/7245xfgzdsvtxhjob2ed.png)

---

## Git Diff
`git diff` is a handy utility for seeing what's changed between two commits or two files

You can compare two commits using their branch names or commit hashes: `git diff main new-feature`

You can also compare two files by passing in both file names: `git diff path/to/file/ComponentA.js path/to/file/ComponentB.js`

![FixGitMistakes_2_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/ze24zgrcd8vf0ctsp960.png) 

---

## Detached Head

A detached head is less morbid than it sounds. It just means we've checked out a commit using it's specific hash name, such as `git checkout 49da32`
That commit is now the "head" because it's the most recent version of our project.

![Artboard 4 copy1_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/y6uv9hczkfjb3egspf2e.png)

It's "detached" because we've navigated there directly and aren't on our usual branch structure. We have to "reattach" the commit back to our branch with `git checkout -b my-new-branch-name`
![Artboard 4 copy2_DevTo](https://dev-to-uploads.s3.amazonaws.com/i/kevqu8alek5itygbiih2.png)

<br/>

---

It feels good to be less lost in the git forest now.
I hope some of these techniques make your git log less sad too :)

There's plenty more in [Chris' course](http://bit.ly/gitfix) that I left out here.

---
  

👁‍🗨 If these are hard to read, you can download a free high-res PDF version [on the course itself](http://bit.ly/gitfix).
Dev.to limits image sizes a lot and it's hard to make it readable on here. Apologies!