frontend
Technical notes on web development, DevOps, and AI integration.
115 articles
- 00:38frontend
When I Fixed My Blog Sidebar Headings That Read Like a Whisper
Sidebar headings at 11px uppercase dim gray were the hardest text to read. Switching to 13px bold normal-case plus icons raised contrast and fixed asymmetry.
#tailwind#css#frontend - 22:34frontend
The 1px Sidebar Wobble That Ended My Chip Borders
Swapping a chip border for a background nudged the whole row by 1px. The fix: an inset ring, because box-shadow never affects layout.
#tailwind#css#frontend - 18:32frontend
MessageCircle Is Not WhatsApp, the Client Told Me So
A WhatsApp CTA with a generic lucide chat icon made visitors hesitate. The fix: an inline brand SVG, a real label, and better button contrast.
#react#frontend#seo - 18:18frontend
The Two-Column Mobile Grid I Took Back
Splitting a 4-column grid into 2 columns made cards cramped on phones. The fix: an embla carousel on mobile, a grid on desktop, a doubled DOM.
#nextjs#react#frontend - 16:29frontend
Switching to a Grid, a Show More Pattern, and One SEO Trade-off
Refactoring a long accordion column into a 3-column grid with Show More lists. The trade-off: sliced points never reach the initial DOM Google indexes.
#nextjs#react#frontend - 16:25frontend
A Certification Badge With No Image Took Down next/image
An optional image field met a runtime component that demands src. The About page went blank. Here is the ternary and fallback UI that fixed it.
#nextjs#typescript#frontend - 02:44frontend
TypeScript Types Never Reach Your JSON, So Write Contract Tests
One missing badge image broke typecheck. A story about type erasure, optional properties, and parametrized contract tests guarding per-locale JSON content.
#typescript#testing#frontend - 14:19frontend
Hardening the Article Embed Pipeline for Agent-Authored Content
The embed pipeline now renders tokens inside <pre>/<code> as literal code, degrades to a fallback on broken payloads, and re-highlights Quarto/Pandoc blocks.
#shiki#nextjs#frontend - 12:46frontend
Two Commits I Reverted: generateSitemaps vs Next 16
Next 16 rejects a sitemap.xml route folder that collides with the metadata convention. I reverted two commits; the old /sitemaps/ rewrite setup was enough.
#nextjs#seo