ai

Split a card list into two rows; row 2 breaks out of the container with w-screen and a calc margin, with no horizontal scrollbar.

TL;DR: w-screen breaks layouts because 100vw ignores the scrollbar, leaving your element a few pixels too wide. Fix it with the full-bleed combo w-screen, max-w-[100vw], ml-[calc(50%-50vw)], and padding, then scope overflow-hidden to just that section. Use overflow-clip instead if a sticky header breaks, and an IIFE renderCard to split rows without duplicating markup.

Dark navy header felt heavy in light mode. The fix: bake 92% alpha into the --color-header token so backdrop-blur works everywhere without per-component overrides.

TL;DR: Slapping bg-white/60 on a navbar breaks fast, since child elements inherit transparency and fixes scatter across files. The fix is baking alpha into a --color-header token (about 92 percent opacity), which cascades to every consumer and pairs cleanly with backdrop-blur-md. Trade-off: the header decouples from the global background token, but one line brings it back if needed.

A missing globals.css import after moving the root layout into app/[locale] stripped every page of styling — while the build stayed green.

TL;DR: An i18n refactor moved the Next.js root layout into app/[locale]/layout.tsx and accidentally dropped the globals.css import. Without that file Tailwind v4 never loaded, so the site rendered as unstyled HTML while the build stayed green. The fix was re-adding the import, a reminder to visually check pages and grep for globals.css after layout changes.

An article's source does not determine its type, the brief's content does. Detect the mode from content, keep one canonical guide, never duplicate enforcement.

TL;DR: The author nearly split their writing guide into two prompt files, one technical and one reflective, before realizing an article's type comes from the brief's content, not its source. A commit can spark a reflection; a dossier can spark a troubleshooting piece. One adaptive guide with two detected modes beats two files that drift.

A 70/0/0 acceptance run made me think my agent pipeline was deterministic. It was the runner that deserved the credit; temperature 0 was no guarantee.

TL;DR: A flawless 70/0/0 acceptance run looked like proof of a deterministic agent pipeline, but it really validated the harness, not the model. Temperature zero doesn't guarantee reproducibility either; batch invariance and LLM-as-judge studies show outputs and verdicts still flip. Trustworthy results come from test isolation plus byte-level diffs against golden files, never from an agent grading its own work.

A position sticky sidebar that scrolled away with the page, and the three CSS preconditions I now check before trusting sticky again.

TL;DR: A sticky sidebar in a flex layout failed silently because it broke all three preconditions. Flexbox's default stretch left the aside no scroll room, fixed with items-start, while a fixed header demanded a custom top offset. The author now avoids overflow-clipping ancestors, removed redundant height caps, and made this layout a standard pattern.

The AI entry in my navbar changed color after a menu reorder. A lesson in modulo index color assignment and fixing it with data identity.

TL;DR: Styling nav entries with a modulo index ties colors to render position, so reordering the menu silently reshuffles accents. Pinning the special "Ask AI" entry to its href identity keeps its color stable. Adding an idle pill also satisfies WCAG 1.4.1, since shape reinforces hue for users who can't distinguish colors.

Shrinking the desktop chat input field and buttons with four responsive Tailwind classes, no separate component and no JavaScript required.

TL;DR: The chunky mobile-sized chat composer was wasting desktop space, but a separate component felt like overkill. Four responsive Tailwind classes fixed it: base sizes stay touch-friendly for phones, sm: variants tighten padding and shrink buttons on desktop. Trade-off is width-based, not pointer-based, so wide touchscreen laptops get small buttons too.

Last week, my blog article pipeline failed completely. I thought pasting a 100KB skill containing hundreds of style rules into the prompt would solve the...