Add clean history slide GH-47

pintergreg · pintergreg · commit 5d66d28db5a0 · 2025-11-18T18:05:43.000+01:00
diff --git a/lectures/14_code_review.md b/lectures/14_code_review.md
@@ -524,6 +524,16 @@ based on: [Code Review Guidelines for Humans](https://phauer.com/2018/code-revie
 source: [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/) [@beams2014how]
 :::
 
+## keeping clean history
+
+![](figures/user_statistics/branching.svg){width=850}
+
+::: {.text-smaller .fragment}
+- features are often developed on separate feature branches
+- after a feature is completed, the branch is merged
+- as a feature branch may contain too much commits (detail)
+    - commits on a feature branch often squashed into one commit
+:::
 
 # review in numbers
 
diff --git a/lectures/figures/user_statistics/branching.mermaid b/lectures/figures/user_statistics/branching.mermaid
@@ -0,0 +1,11 @@
+gitGraph
+    commit id: "Display avatar #17"
+    commit id: "Display username #18"
+    commit id: "Add progress bar #19"
+    branch "feature: activity"
+    checkout "feature: activity"
+    commit id: "Add activity matrix #20"
+    commit id: "Set color map to Greens #20"
+    commit id: "Display labels #20"
+    checkout main
+    merge "feature: activity"
diff --git a/lectures/figures/user_statistics/branching.svg b/lectures/figures/user_statistics/branching.svg
@@ -0,0 +1 @@
+<svg id="my-svg" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 526.609px; background-color: white;" viewBox="-168.609375 -18 526.609375 229.46829223632812" role="graphics-document document" aria-roledescription="gitGraph"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#my-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#my-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:1px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg p{margin:0;}#my-svg .commit-id,#my-svg .commit-msg,#my-svg .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms',verdana,arial,sans-serif;font-family:var(--mermaid-font-family);}#my-svg .branch-label0{fill:#ffffff;}#my-svg .commit0{stroke:hsl(240, 100%, 46.2745098039%);fill:hsl(240, 100%, 46.2745098039%);}#my-svg .commit-highlight0{stroke:hsl(60, 100%, 3.7254901961%);fill:hsl(60, 100%, 3.7254901961%);}#my-svg .label0{fill:hsl(240, 100%, 46.2745098039%);}#my-svg .arrow0{stroke:hsl(240, 100%, 46.2745098039%);}#my-svg .branch-label1{fill:black;}#my-svg .commit1{stroke:hsl(60, 100%, 43.5294117647%);fill:hsl(60, 100%, 43.5294117647%);}#my-svg .commit-highlight1{stroke:rgb(0, 0, 160.5);fill:rgb(0, 0, 160.5);}#my-svg .label1{fill:hsl(60, 100%, 43.5294117647%);}#my-svg .arrow1{stroke:hsl(60, 100%, 43.5294117647%);}#my-svg .branch-label2{fill:black;}#my-svg .commit2{stroke:hsl(80, 100%, 46.2745098039%);fill:hsl(80, 100%, 46.2745098039%);}#my-svg .commit-highlight2{stroke:rgb(48.8333333334, 0, 146.5000000001);fill:rgb(48.8333333334, 0, 146.5000000001);}#my-svg .label2{fill:hsl(80, 100%, 46.2745098039%);}#my-svg .arrow2{stroke:hsl(80, 100%, 46.2745098039%);}#my-svg .branch-label3{fill:#ffffff;}#my-svg .commit3{stroke:hsl(210, 100%, 46.2745098039%);fill:hsl(210, 100%, 46.2745098039%);}#my-svg .commit-highlight3{stroke:rgb(146.5000000001, 73.2500000001, 0);fill:rgb(146.5000000001, 73.2500000001, 0);}#my-svg .label3{fill:hsl(210, 100%, 46.2745098039%);}#my-svg .arrow3{stroke:hsl(210, 100%, 46.2745098039%);}#my-svg .branch-label4{fill:black;}#my-svg .commit4{stroke:hsl(180, 100%, 46.2745098039%);fill:hsl(180, 100%, 46.2745098039%);}#my-svg .commit-highlight4{stroke:rgb(146.5000000001, 0, 0);fill:rgb(146.5000000001, 0, 0);}#my-svg .label4{fill:hsl(180, 100%, 46.2745098039%);}#my-svg .arrow4{stroke:hsl(180, 100%, 46.2745098039%);}#my-svg .branch-label5{fill:black;}#my-svg .commit5{stroke:hsl(150, 100%, 46.2745098039%);fill:hsl(150, 100%, 46.2745098039%);}#my-svg .commit-highlight5{stroke:rgb(146.5000000001, 0, 73.2500000001);fill:rgb(146.5000000001, 0, 73.2500000001);}#my-svg .label5{fill:hsl(150, 100%, 46.2745098039%);}#my-svg .arrow5{stroke:hsl(150, 100%, 46.2745098039%);}#my-svg .branch-label6{fill:black;}#my-svg .commit6{stroke:hsl(300, 100%, 46.2745098039%);fill:hsl(300, 100%, 46.2745098039%);}#my-svg .commit-highlight6{stroke:rgb(0, 146.5000000001, 0);fill:rgb(0, 146.5000000001, 0);}#my-svg .label6{fill:hsl(300, 100%, 46.2745098039%);}#my-svg .arrow6{stroke:hsl(300, 100%, 46.2745098039%);}#my-svg .branch-label7{fill:black;}#my-svg .commit7{stroke:hsl(0, 100%, 46.2745098039%);fill:hsl(0, 100%, 46.2745098039%);}#my-svg .commit-highlight7{stroke:rgb(0, 146.5000000001, 146.5000000001);fill:rgb(0, 146.5000000001, 146.5000000001);}#my-svg .label7{fill:hsl(0, 100%, 46.2745098039%);}#my-svg .arrow7{stroke:hsl(0, 100%, 46.2745098039%);}#my-svg .branch{stroke-width:1;stroke:#333333;stroke-dasharray:2;}#my-svg .commit-label{font-size:10px;fill:#000021;}#my-svg .commit-label-bkg{font-size:10px;fill:#ffffde;opacity:0.5;}#my-svg .tag-label{font-size:10px;fill:#131300;}#my-svg .tag-label-bkg{fill:#ECECFF;stroke:hsl(240, 60%, 86.2745098039%);}#my-svg .tag-hole{fill:#333;}#my-svg .commit-merge{stroke:#ECECFF;fill:#ECECFF;}#my-svg .commit-reverse{stroke:#ECECFF;fill:#ECECFF;stroke-width:3;}#my-svg .commit-highlight-inner{stroke:#ECECFF;fill:#ECECFF;}#my-svg .arrow{stroke-width:8;stroke-linecap:round;fill:none;}#my-svg .gitTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g/><g class="commit-bullets"/><g class="commit-labels"/><g><line x1="0" y1="0" x2="350" y2="0" class="branch branch0"/><rect class="branchLabelBkg label0" rx="4" ry="4" x="-68.6875" y="-0.5" width="52.6875" height="21" transform="translate(-19, -8.5)"/><g class="branchLabel"><g class="label branch-label0" transform="translate(-78.6875, -9.5)"><text><tspan xml:space="preserve" dy="1em" x="0" class="row">main</tspan></text></g></g><line x1="0" y1="90" x2="350" y2="90" class="branch branch1"/><rect class="branchLabelBkg label1" rx="4" ry="4" x="-141.609375" y="-0.5" width="125.609375" height="21" transform="translate(-19, 81.5)"/><g class="branchLabel"><g class="label branch-label1" transform="translate(-151.609375, 80.5)"><text><tspan xml:space="preserve" dy="1em" x="0" class="row">feature: activity</tspan></text></g></g></g><g class="commit-arrows"><path d="M 10 0 L 60 0" class="arrow arrow0"/><path d="M 60 0 L 110 0" class="arrow arrow0"/><path d="M 110 0 L 110 70 A 20 20, 0, 0, 0, 130 90 L 160 90" class="arrow arrow1"/><path d="M 160 90 L 210 90" class="arrow arrow1"/><path d="M 210 90 L 260 90" class="arrow arrow1"/><path d="M 110 0 L 310 0" class="arrow arrow0"/><path d="M 260 90 L 290 90 A 20 20, 0, 0, 0, 310 70 L 310 0" class="arrow arrow1"/></g><g class="commit-bullets"><circle cx="10" cy="0" r="10" class="commit Display avatar #17 commit0"/><circle cx="60" cy="0" r="10" class="commit Display username #18 commit0"/><circle cx="110" cy="0" r="10" class="commit Add progress bar #19 commit0"/><circle cx="160" cy="90" r="10" class="commit Add activity matrix #20 commit1"/><circle cx="210" cy="90" r="10" class="commit Set color map to Greens #20 commit1"/><circle cx="260" cy="90" r="10" class="commit Display labels #20 commit1"/><circle cx="310" cy="0" r="9" class="commit 6-25539a3 commit0"/><circle cx="310" cy="0" r="6" class="commit commit-merge 6-25539a3 commit0"/></g><g class="commit-labels"><g transform="translate(-42.93908203125, 38.30865234375) rotate(-45, 0, 0)"><rect class="commit-label-bkg" x="-33.63037109375" y="13.5" width="87.2607421875" height="15"/><text x="-31.63037109375" y="25" class="commit-label">Display avatar #17</text></g><g transform="translate(-49.2755078125, 43.9780859375) rotate(-45, 50, 0)"><rect class="commit-label-bkg" x="8.0322265625" y="13.5" width="103.935546875" height="15"/><text x="10.0322265625" y="25" class="commit-label">Display username #18</text></g><g transform="translate(-48.01193359375, 42.84751953125) rotate(-45, 100, 0)"><rect class="commit-label-bkg" x="59.69482421875" y="13.5" width="100.6103515625" height="15"/><text x="61.69482421875" y="25" class="commit-label">Add progress bar #19</text></g><g transform="translate(-49.69298828125, 44.35162109375) rotate(-45, 150, 90)"><rect class="commit-label-bkg" x="107.48291015625" y="103.5" width="105.0341796875" height="15"/><text x="109.48291015625" y="115" class="commit-label">Add activity matrix #20</text></g><g transform="translate(-60.048359375, 53.616953125) rotate(-45, 200, 90)"><rect class="commit-label-bkg" x="143.857421875" y="103.5" width="132.28515625" height="15"/><text x="145.857421875" y="115" class="commit-label">Set color map to Greens #20</text></g><g transform="translate(-42.3063671875, 37.7425390625) rotate(-45, 250, 90)"><rect class="commit-label-bkg" x="217.2021484375" y="103.5" width="85.595703125" height="15"/><text x="219.2021484375" y="115" class="commit-label">Display labels #20</text></g></g></svg>
