client
LB
svr-0
svr-1
svr-2
svr-3
a small field guide
Development concepts for system design.
A small library of short animations exploring concepts I’ve encountered across the stack - from load balancers and observables to signals, race conditions, optimistic UI, and more.
success · hit · synced
miss · pending · stale
error · blocked · failed
data · event · write
pub
orders
·topic·
·topic·
sub a
sub b
sub c
polling
repeat requests - most return nothing
req
res
websocket
one connection - server pushes when ready
conn
push
retry · no key
✗ charged 2×
c
POST $10
retry $10
balance · $100balance · $90balance · $80
retry · with key
✓ dedup’d
c
POST $10 · k:abc
retry · k:abc
(cached)
balance · $100balance · $90
headereyJhbGc…
.
payloadeyJzdWI…
.
signature- - -a3f5d2c…
HMAC-SHA256+secret
scan O(n)
index O(log n)
cold
each subscribe = its own run
sub a
1
2
3
sub b
1
2
3
hot
shared stream - late subs miss earlier values
stream
1
2
3
4
sub a
1
2
3
4
sub b
subscribes
3
4
stream
1
2
3
4
.map(×2)
2
4
6
8
.filter(>4)
×
×
6
8
sub
6
8
count0
doubled0
isEventrue
<View x={0}/>
<Tag on={Y}/>
container
state = { count: 0 }
props={ count: 0 }
view · pure
Count: 0
search"appl""apple"
req A
req B
…apple-pie · app storeapple · apricot
stale ⚠sequential
total · 3.0s
fetch A
fetch B
fetch C
parallel · Promise.all
total · 1.0s
fetch A
fetch B
fetch C
happy path
1213
syncing…saved ✓
rollback
1213
syncing…failed · revert
Ada Lovelace
Shipped the caching layer - p95 dropped from 220 ms to 38 ms.
nametabindex="0"
emailtabindex="0"
messagetabindex="0"
send →tabindex="0"
Tab ↹