Writing Lessons

{{show: block-name}}
{{show: block-name slide 0.5s ease-out}}

{{focus: region-name}}
{{focus: none}}

{{clear}}
{{clear: slide}}
{{clear: fade 0.5s ease-in-out}}
{{clear: instant}}

{{annotate: region-name "Explanation text"}}

{{zoom: 1.2x}}
{{zoom: region-name 1.5x}}
{{zoom: 1x}}

{{split}}
{{show: code-block}}
{{show: data-view}}

{{unsplit}}

{{show: hash-fn slide 0.5s ease-out}}
         ^target ^effect ^dur  ^easing

0.15s    — 150ms (micro-interactions)
0.3s     — 300ms (default)
0.5s     — 500ms (deliberate)
1s       — 1000ms (slow reveal)
1.5s     — 1500ms (typewriter, moderate)
2s       — 2000ms (typewriter, slow)

```code:hash-fn lang=ts
function hash(key: string): number {
  let h = 0
  for (const ch of key) {
    h = (h * 31 + ch.charCodeAt(0)) | 0  // ! Bitwise clamp to 32-bit int
  }
  return h
}
---
signature: 1
init: 2
loop: 3-5
return-val: 7
```

single-line: 5
range: 3-8
multiple: 1, 4-6, 9

\`\`\`data:names type=array
["Alice", "Bob", "Dana", "Eve"]
^check=0
---
first: 0
found: 2
\`\`\`

\`\`\`data:chain type=linked-list
(head Alice) -> (n2 Bob) -> null
---
first: head
second: n2
\`\`\`

\`\`\`data:bst type=tree variant=bst
[10, 5, 15, 3, 7, null, 20]
---
root: 0
left-subtree: 1, 3, 4
\`\`\`

\`\`\`data:network type=graph layout=force
A -> B, C: 5
B -- D
C -> D: 3
---
entry: A
exits: C, D
\`\`\`

\`\`\`data:phonebook type=hash-map
0: (alice 555-1234) -> (bob 555-5678)
1:
2: (charlie 555-9012)
\`\`\`

```diagram:system
client [client]
gw [api-gateway]
api [service]
db [database]
cache [cache]
client --> gw
gw --> api
api --> db
api --reads--> cache
{Backend: gw, api, db, cache}
---
storage: db
fast-path: cache
```

```preview:button
<style>
  .btn { padding: 12px 24px; background: #3b82f6; color: white; }
</style>
<button class="btn">Click me</button>
```

```preview:counter template=react
function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Counter />);
```

```math:quadratic
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

y = mx + b
```

```chart:quarterly type=bar
Q1: 100
Q2: 150
Q3: 120
Q4: 200
---
growth: Q2, Q3
```

content here
---
region-name: target-spec
another-region: target-spec

Punch.                          (3-5 words)
Explain the thing.              (8-15 words)
Punch again.                    (3-5 words)
Now a longer sentence.          (15-25 words)

{{focus: multiplier}} Why 31? Because it's an odd prime. Multiplying by an even number loses information. An odd prime distributes hash values more uniformly.

This function uses a priority queue internally.
{{show: priority-queue}}
Here it is.

{{show: priority-queue slide 0.3s}} This function uses a priority queue. {{focus: enqueue}} Items go in sorted by distance.

{{show: hash-fn}} {{show: buckets}} Now let's think about what happens with more keys.

{{show: hash-fn}} Here's our hash function. {{focus: signature}} It takes a string and returns a number.

{{focus: init}} We create a variable to build up the result.

{{focus: sig}} {{zoom: 1.2x}} {{annotate: sig "The signature"}} This function takes a string and returns an integer.