Charlie
Building DevHero
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; }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;
}