Git Gud at git
Tags: git, beginners, showdev, opensource
Published: 2019-02-21 03:18:12

---
title: Git Gud at git
published: true
description: Shameless plug for a git instructional tool I built last weekend
tags: git,beginners,showdev,opensource
---

Show of hands, everyone, who knows git?

Not just the standard `git pull` / `git commit` / `git push` arcanery that you go through to magically make your changes public, who actually _understands_ git? Who here understands its internal tree model, the thing that makes it work so well?

If your hand is still up, you can feel free to skip this post, or pop over to [the source](https://github.com/nic-hartley/git-gud) and help implement more features. You may want to hold off for a little while before you contribute, though; I'm porting it from WASM to JavaScript.

If you _don't_ know how it works, though, can I recommend something I made? It's called [Git Gud](https://nic-hartley.github.io/git-gud/).
 
# What is it?

Git Gud is a web-based Git simulator. It shows you the git tree visually, and you can run commands to show you what they do to the tree. You start out with an initial commit:

![initial state](https://i.imgur.com/op6Yn3B.png)

You'll notice it's labeled "c0". That's the commit ID. Because we don't have any actual files to track -- that's for a much later version -- we don't have anything to hash, and on our initial build, we just ordered commits sequentially. The first, automatically generated commit is "c0", the second is "c1", and so on. Speaking of the second commit, click in the bottom area and try typing:

```
commit
```

You'll see another commit get added:

![first commit](https://i.imgur.com/Qb7ZDrd.png)

Just like in Git, you can checkout individual commits:

```
checkout c0
```

![checked out](https://i.imgur.com/ZsQVEp1.png)

You can also make a new branch with `branch`, check it out with `checkout b1`, commit on it, `merge` it back in, etc. For example, enter this sequence of commands:

```
commit
checkout c0
branch
checkout b1
commit
checkout b0
merge
```

and you'll get this:

![done](https://i.imgur.com/dsVV63n.png)

If you want to reset, well, there's no git command for that, but we've repurposed `init`:

![initted](https://i.imgur.com/F56RC9v.png)

# Why?

If you look at the commit history for Git Gud, you'll notice a massive spike in development over the course of a weekend. That weekend was [BrickHack](https://brickhack.io/), RIT's annual hackathon. It was an interesting experience, and a great way to get a prototype up and running.

It did introduce some issues, though. The code isn't too great, since we didn't have a chance to really think through issues in just 24 hours. We wrote it in WebAssembly rather than the pure JavaScript that would have been less effort to develop and debug, because one of the team members only knew C++ and wasn't sure he could learn JavaScript in the few days well enough in the few days before the hackathon<sup>1</sup>.

<small>1: As it turns out, he was able to learn it in an hour or so during the hackathon, at least well enough to edit some drawing code. Oops. Probably could have done that better, then.

# Next steps

Right now, Git Gud pretty barebones, as you'll **definitely** notice if you try it. There are quite a few features we want to implement, most of which boil down to working more like the real git. For example:

* If you type `git` at the beginning of the line (say, out of habit from using real git), delete it from the input rather than breaking
* Informative (aka *any*, in some cases) error messages when you do something wrong
* Rebasing
* Commit messages
* Branches with names
* Parsing flags like `-b` on `checkout`
* File changes, rather than just abstract 'commits'
* More themes. Amber on black is pretty, but it'd be nice (and not too hard, really) to offer multiple colors.

Got any other ideas? Anything you want me to know as I develop it more? Either [raise an issue](https://github.com/nic-hartley/git-gud/issues), or comment on this post.