ai
Technical notes on web development, DevOps, and AI integration.
80 articles
- 12:59frontend
One Color Stop, Two Contrast Values
The sed replaced 409 accent classes, yet the button fill stayed at stop 600. WCAG thresholds per role, not taste, explain the two anchors.
TL;DR: The sed swapping 409 emerald text classes wasn't busywork; it enforced a design contract mapping WCAG contrast roles to Tailwind stops. One blue stop can't serve both roles: text needs 4.5:1 (#0369a1 hits 5.93), button fill only needs 3:1 (#0080c9 hits 4.26). Verification paired a luminance script with a compiled-CSS census, plus two documented contrast exceptions.
#css#tailwind#accessibility - 14:54frontend
YouTube Embeds in a Hero: Why the Black Bars Appear and the Fixes
A 1440x420 hero with a YouTube iframe grows two thick black bars. The cause sits in the player; three fixes: grid backdrop, cover-crop, ratio.
TL;DR: YouTube videos in iframes maintain their 16:9 ratio. Black bars appear when the container ratio differs. Filling or cropping the space is necessary.
#css#youtube#tailwind-css - 01:05testing
Token AI Leaked from Browser Snapshots, Not from My Tests
I thought my tests were expensive. Every browser action was returning a fresh accessibility snapshot into the agent's context instead.
TL;DR: The agent was using too many tokens due to taking accessibility-tree snapshots on every action. This was fixed by changing how the agent watched tests run. The solution involved limiting the agent's access to test results.
#playwright#vitest#mcp - 03:01testing
Checksummed Evidence: Test Numbers Are Claims Until Verified
Raw verification output wrapped in a self-checksum makes agent numbers tamper-evident, while a fail-closed gate rejects slices without anchored review verdicts.
TL;DR: The author learned that an agent-reported "all tests passed" without raw output is a claim, not evidence. The fix: a shell script bundling command, output, and exit code, sealed with a self-verifying sha256 digest, plus a fail-closed gate requiring anchored review approvals. Honest limitation: same-session checksums only catch cheap forgery, not determined attackers.
#ai-agents#testing#qa - 03:00devops
Review Status Tokens: Making Review Debt Grepable
Four review:* tokens plus a board validator make agent review debt visible, countable, and batchable, while security surfaces never wait in a queue.
TL;DR: Reviewing every tiny slice cost 50-60k subagent tokens per round regardless of diff size, making review the largest session expense. The fix: every done row must carry a review token, enforced by a board validator, with non-security work batched until the queue hits three or the session closes. Security surfaces skip the queue, and tokens make review debt greppable.
#code-review#ai-agents#workflow - 00:55tooling
The index that was ordered to stay in sync
The board says Done, the commit index lacks the hash, and nothing protests. The fix removes the hand-copying.
TL;DR: The index was hand-maintained and drifted silently from reality, so Done cards referenced hashes it lacked. Fix: regenerate it mechanically from git log, lint that every Done card's hash exists in the index, and fail loudly on mismatches. Done is now a verified state rather than a trusted claim.
#git#linting#documentation - 15:43ai
Eleven Specialist Agent Files, One Squad: Contracts, Not Speeches
Opening eleven .claude/agents files showed me the real constraint is not persona prose: it is the tools, model, and hook fields in six lines of frontmatter.
TL;DR: Eleven subagent files are shaped more like contracts than personas: six lines of frontmatter decide tools, model, and permissions for each role. Scope tools tightly, enforce limits with hooks since rules aren't enforced, and keep every brief self-contained because agents share no context. Delegation costs tokens, so only hand off work worth splitting.
#ai-agents#claude-code#coding-agent - 18:07ai
A Prompt Is Not a Request, It Is a Work Specification
The same agent task produced different results every run. The prompt left decisions to the model; the fix is an explicit work specification.
TL;DR: Same prompt, different outputs usually means the prompt underdefined the work, not that the model is unstable. Treat prompts as work specifications: state objective, context, constraints, output shape, and a verification step. Clear specs make runs converge, checking objective, and cut the expensive corrective iterations, regardless of which model you use.
#prompt-engineering#ai-agents#workflow - 18:03ai
Superpowers for Coding Agents: Branching Makes Sense
Adopting the superpowers framework turns a branching naming convention into a real isolation requirement. One worktree per task, enforced by the workflow itself.
TL;DR: The superpowers framework chains coding agents through mandatory stages—brainstorming, git worktrees, planning, TDD, code review—enforced by skills. Worktrees give each task an isolated directory and branch, making the one-branch-per-task rule functional rather than ritual. The overhead pays off only in long autonomous runs; disable telemetry if your data policies are strict.
#claude-code#superpowers#git-worktree