Add storyboard handout for split-loop-with-lambda mechanics

Step-by-step refactoring instructions as a single markdown handout with
one diagram per step (legend + steps 0-3, overload inset, pure test,
debrief slides for the dead call and the drift anti-pattern). Derived
from the pattern draft, the learning hour plan, and the rehearsal
findings; slide-ready for later.
This commit is contained in:
Your Name
2026-09-27 18:04:33 +00:00
parent b993f25c53
commit 231f6aa72f
10 changed files with 779 additions and 0 deletions
@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 470" font-family="Helvetica, Arial, sans-serif">
<defs>
<marker id="arrR" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0,0 L10,5 L0,10 z" fill="#dc2626"/>
</marker>
<marker id="arrP" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0,0 L10,5 L0,10 z" fill="#9333ea"/>
</marker>
<marker id="arrG" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<path d="M0,0 L10,5 L0,10 z" fill="#475569"/>
</marker>
</defs>
<rect width="760" height="470" fill="#ffffff"/>
<text x="24" y="34" font-size="20" font-weight="bold" fill="#0f172a">How to read the diagrams</text>
<rect x="50" y="58" width="110" height="32" rx="8" fill="#f8fafc" stroke="#64748b" stroke-width="1.5"/>
<text x="180" y="79" font-size="13" fill="#334155">composed method / class under test</text>
<rect x="50" y="106" width="110" height="32" rx="8" fill="#eef2ff" stroke="#818cf8" stroke-width="1.5"/>
<text x="180" y="127" font-size="13" fill="#334155">loop — the thing we split / extract</text>
<rect x="50" y="154" width="110" height="32" rx="8" fill="#fef2f2" stroke="#dc2626" stroke-width="1.5"/>
<text x="180" y="175" font-size="13" fill="#334155">unwanted dependency — Scorer ≈ weather service</text>
<line x1="50" y1="216" x2="160" y2="216" stroke="#dc2626" stroke-width="1.5" stroke-dasharray="5 4" marker-end="url(#arrR)"/>
<text x="180" y="221" font-size="13" fill="#334155">dependency call — the thing that wants to disappear</text>
<rect x="50" y="250" width="110" height="32" rx="8" fill="#faf5ff" stroke="#9333ea" stroke-width="1.5"/>
<text x="180" y="271" font-size="13" fill="#334155">λ — a function value</text>
<rect x="50" y="298" width="110" height="32" rx="8" fill="#f0fdf4" stroke="#16a34a" stroke-width="1.5"/>
<text x="180" y="319" font-size="13" fill="#334155">pure / test</text>
<line x1="50" y1="360" x2="160" y2="360" stroke="#9333ea" stroke-width="1.5" stroke-dasharray="5 4" marker-end="url(#arrP)"/>
<text x="180" y="365" font-size="13" fill="#334155">slide — definition moves, invocation stays</text>
<line x1="50" y1="408" x2="160" y2="408" stroke="#475569" stroke-width="1.5" stroke-dasharray="5 4" marker-end="url(#arrG)"/>
<text x="180" y="413" font-size="13" fill="#334155">extraction / other motion</text>
<text x="24" y="452" font-size="12" fill="#64748b">Code lines inside boxes are monospace. Red = the unwanted dependency; purple = the lambda and everything it makes possible.</text>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB