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:
@@ -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 |
Reference in New Issue
Block a user