DevHero is show-and-tell for developers — code, live demos, and the story behind the ship. Hand-coding is the culture; AI is welcome when you disclose and lead.
The model spat out a holygrail layout with magic numbers and nested grids. Below is the simplified version that uses named areas.
.page {
display: grid;
grid-template:
"header header" auto
"nav main" 1fr
"footer footer" auto
/ 12rem 1fr;
min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }Started from an AI snippet for debounce. It leaked timers on unmount. Here's the fix: return a cancel function and clear on dispose.
export function debounce(fn, ms) {
let t;
const wrapped = (...args) => {
clearTimeout(t);
t = setTimeout(() => fn(...args), ms);
};
wrapped.cancel = () => clearTimeout(t);
return wrapped;
}I needed a tokenizer that always produces the same tokens for the same input. Instead of prompting a model, I wrote a small state machine. Why? Flaky tokens break snapshots and make diffs noisy. Determinism wins for too…
export function tokenize(input: string) {
const out = [];
let i = 0;
while (i < input.length) {
const ch = input[i]!;
if (/\s/.test(ch)) { i++; continue; }
if (/[a-zA-Z_]/.test(ch)) {
let j = i + 1;
while (j < input.length && /[\w]/.test(input[j]!)) j++;
out.push({ kind: "ident", value: input.slice(i, j) });
i = j; continue;
}
out.push({ kind: "op", value: ch }); i++;
}
return out;
}