Git Visuals

A tale of bubbles, arrows, post-its and stickers

Or, an illustration of key concepts in a daily workflow.

This is a companion notebook with code to follow the visuals of this presentation.

Initialization

%%bash
rm -rf git-visuals-tmp
mkdir -p git-visuals-tmp
cd git-visuals-tmp

git init

echo "first file" > file.md
git add file.md
git commit -m"a0: first commit"

echo
echo "Git Log:"
git slog2

Initialized empty Git repository in /Users/fperez/teach/stat159/2022sp/site/lectures/intro-git/git-visuals-tmp/.git/
[main (root-commit) cab4518] a0: first commit
 1 file changed, 1 insertion(+)
 create mode 100644 file.md

Git Log:
* cab4518 a0: first commit (0 seconds ago)  (HEAD -> main) [Fernando Perez]

Next commit

%%bash
cd git-visuals-tmp

echo "more work" >> file.md
git commit -am"b1: some new ideas"

echo
echo "Git Log:"
git slog2

[main 73d141a] b1: some new ideas
 1 file changed, 1 insertion(+)

Git Log:
* 73d141a b1: some new ideas (0 seconds ago)  (HEAD -> main) [Fernando Perez]
* cab4518 a0: first commit (1 second ago)  [Fernando Perez]

Introducing tags

%%bash
cd git-visuals-tmp

git tag -a ver0 -m"Release version 0"

echo
echo "Git Log:"
git slog2

Git Log:
* 73d141a b1: some new ideas (0 seconds ago)  (HEAD -> main, tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (1 second ago)  [Fernando Perez]

New branches

%%bash
cd git-visuals-tmp

git switch -c dev

echo
echo "Git Log:"
git slog2

Switched to a new branch 'dev'

Git Log:
* 73d141a b1: some new ideas (0 seconds ago)  (HEAD -> dev, tag: ver0, main) [Fernando Perez]
* cab4518 a0: first commit (1 second ago)  [Fernando Perez]

Parallel development in branches

%%bash
cd git-visuals-tmp

echo "new development work " > file2.md
git add file2.md
git commit -am"c2: a new line of development!"

echo
echo "Git Log:"
git slog2

[dev 6e0ee08] c2: a new line of development!
 1 file changed, 1 insertion(+)
 create mode 100644 file2.md

Git Log:
* 6e0ee08 c2: a new line of development! (0 seconds ago)  (HEAD -> dev) [Fernando Perez]
* 73d141a b1: some new ideas (0 seconds ago)  (tag: ver0, main) [Fernando Perez]
* cab4518 a0: first commit (1 second ago)  [Fernando Perez]

Back to the main branch

%%bash
cd git-visuals-tmp

git switch main

echo
echo "Git Log:"
git slog2 --all

Switched to branch 'main'

Git Log:
* 6e0ee08 c2: a new line of development! (0 seconds ago)  (dev) [Fernando Perez]
* 73d141a b1: some new ideas (0 seconds ago)  (HEAD -> main, tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (1 second ago)  [Fernando Perez]

Progress on the main branch

%%bash
cd git-visuals-tmp

echo "More work on main line" >> file.md
git commit -am"d3: ontinued main work"

echo
echo "Git Log:"
git slog2 --all

[main 5581513] d3: ontinued main work
 1 file changed, 1 insertion(+)

Git Log:
* 6e0ee08 c2: a new line of development! (0 seconds ago)  (dev) [Fernando Perez]
| * 5581513 d3: ontinued main work (0 seconds ago)  (HEAD -> main) [Fernando Perez]
|/  
* 73d141a b1: some new ideas (0 seconds ago)  (tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (1 second ago)  [Fernando Perez]

Continued work on the main branch

%%bash
cd git-visuals-tmp

echo "And yet more work on main line" >> file.md
git commit -am"e4: main work continues"

echo
echo "Git Log:"
git slog2 --all

[main 56cad78] e4: main work continues
 1 file changed, 1 insertion(+)

Git Log:
* 6e0ee08 c2: a new line of development! (0 seconds ago)  (dev) [Fernando Perez]
| * 56cad78 e4: main work continues (0 seconds ago)  (HEAD -> main) [Fernando Perez]
| * 5581513 d3: ontinued main work (0 seconds ago)  [Fernando Perez]
|/  
* 73d141a b1: some new ideas (0 seconds ago)  (tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (1 second ago)  [Fernando Perez]

Merging our two branches

%%bash
cd git-visuals-tmp

git merge dev -m"f5: merging great new developments"

echo
echo "Git Log:"
git slog2

Merge made by the 'ort' strategy.
 file2.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 file2.md

Git Log:
*   6ea0830 f5: merging great new developments (0 seconds ago)  (HEAD -> main) [Fernando Perez]
|\  
| * 6e0ee08 c2: a new line of development! (1 second ago)  (dev) [Fernando Perez]
* | 56cad78 e4: main work continues (1 second ago)  [Fernando Perez]
* | 5581513 d3: ontinued main work (1 second ago)  [Fernando Perez]
|/  
* 73d141a b1: some new ideas (1 second ago)  (tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (2 seconds ago)  [Fernando Perez]

Cleanup after merge: delete dev branch

%%bash
cd git-visuals-tmp

git branch --delete dev

echo
echo "Git Log:"
git slog2 --all

Deleted branch dev (was 6e0ee08).

Git Log:
*   6ea0830 f5: merging great new developments (0 seconds ago)  (HEAD -> main) [Fernando Perez]
|\  
| * 6e0ee08 c2: a new line of development! (1 second ago)  [Fernando Perez]
* | 56cad78 e4: main work continues (1 second ago)  [Fernando Perez]
* | 5581513 d3: ontinued main work (1 second ago)  [Fernando Perez]
|/  
* 73d141a b1: some new ideas (1 second ago)  (tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (2 seconds ago)  [Fernando Perez]

More tags

%%bash
cd git-visuals-tmp

git tag -a ver1 -m"Releasing version 1 to the world!"

echo
echo "Git Log:"
git slog2 --all

Git Log:
*   6ea0830 f5: merging great new developments (0 seconds ago)  (HEAD -> main, tag: ver1) [Fernando Perez]
|\  
| * 6e0ee08 c2: a new line of development! (1 second ago)  [Fernando Perez]
* | 56cad78 e4: main work continues (1 second ago)  [Fernando Perez]
* | 5581513 d3: ontinued main work (1 second ago)  [Fernando Perez]
|/  
* 73d141a b1: some new ideas (1 second ago)  (tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (2 seconds ago)  [Fernando Perez]

And the git life continues…

%%bash
cd git-visuals-tmp

echo "More and more work" >> file.md
git commit -am"a6: our work marches on..."

echo
echo "Git Log:"
git slog2 --all

[main f582848] a6: our work marches on...
 1 file changed, 1 insertion(+)

Git Log:
* f582848 a6: our work marches on... (0 seconds ago)  (HEAD -> main) [Fernando Perez]
*   6ea0830 f5: merging great new developments (1 second ago)  (tag: ver1) [Fernando Perez]
|\  
| * 6e0ee08 c2: a new line of development! (2 seconds ago)  [Fernando Perez]
* | 56cad78 e4: main work continues (2 seconds ago)  [Fernando Perez]
* | 5581513 d3: ontinued main work (2 seconds ago)  [Fernando Perez]
|/  
* 73d141a b1: some new ideas (2 seconds ago)  (tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (3 seconds ago)  [Fernando Perez]

A note on the order of the log above: by default, the above is ordered by the topology of the commits, not by the time they were made. We can ask git to show us the same information but sorted by the timestamps of the commits, which will match the way our diagrams were drawn. This is done by using the --author-date-order flag to git log:

%%bash
cd git-visuals-tmp

echo
echo "Git Log:"
git slog2 --all --author-date-order

Git Log:
* f582848 a6: our work marches on... (1 second ago)  (HEAD -> main) [Fernando Perez]
*   6ea0830 f5: merging great new developments (2 seconds ago)  (tag: ver1) [Fernando Perez]
|\  
* | 56cad78 e4: main work continues (3 seconds ago)  [Fernando Perez]
| * 6e0ee08 c2: a new line of development! (3 seconds ago)  [Fernando Perez]
* | 5581513 d3: ontinued main work (3 seconds ago)  [Fernando Perez]
|/  
* 73d141a b1: some new ideas (3 seconds ago)  (tag: ver0) [Fernando Perez]
* cab4518 a0: first commit (4 seconds ago)  [Fernando Perez]