Blog
Technical notes on web development, DevOps, and AI integration.
136 articles
- 12:39frontend
Fallback Icons Wobbled My Sidebar: Image Dimensions and CLS
Adding fallback icons for categories without one made the sidebar jump. Explicit width/height on images, and og:image dimensions, keep CLS under control.
#nextjs#cls#og-image - 09:25frontend
A TOC Spine That Fades Like a Notes-App Timeline
Tired of the stiff left border on my blog TOC, I swapped it for a Tailwind gradient spine that fades downward. Pure CSS utility, plus a note on the bg-gradient-to-* rename in v4.
#tailwind#css - 04:46backend
Naive MariaDB DATETIME Made My API Times Wrong
Commit db470da adds _utc_aware at the repository so article timestamps from a naive MariaDB DATETIME are sent by Pydantic with a Z (UTC), not zoneless.
#mariadb#fastapi#python - 04:29frontend
Related Articles Without a Waterfall
What commit 70a43a9 taught me about related articles, parallel fetching, a CSS timeline, and a file-tree TOC in a Next.js blog.
#nextjs#react#frontend - 02:39frontend
Why My Blog List Renders Stack Icons on the Server
Runtime Iconify requests made my blog list icons appear late. I replaced them with server-rendered SVG and fallback icon sets.
#nextjs#react#frontend - 01:49ai
Building an Article Research Stack with AI Agent Skills
How to build an article research workflow on AI agent skills: three core capabilities, editorial patterns to adopt, and a 2026 security audit.
#seo#automation#security - 01:00frontend
My Accent Color Looked Great in Dark Mode, Then Died in Light
Orange looked great in dark mode but washed out in light. A split accent, emerald-600 in light and mint in dark, clears the WCAG contrast bar in both.
#tailwind#css#frontend - 00:57seo
Wiring the avoid-ai-writing Skill into the Article Pipeline
How to wire the avoid-ai-writing skill into an article pipeline as a detect-only gate, plus a lesson from the Stanford study on AI-detector bias.
#seo#automation - 00:48frontend
Flat Gray Tag Chips Never Invited a Click
Flat gray tag chips all carry equal weight. A 10% primary tint plus a hairline inset ring makes them feel alive and clickable again.
#tailwind#css#frontend