Blog
Technical notes on web development, DevOps, and AI integration.
134 articles
- 23:30frontend
This Blog's Header and Footer Stopped Being Pills and Became Bars
Refactoring the navbar and footer from a max-w-6xl pill into full-bleed bars: max-width moves up one level while content stays mx-auto max-w-6xl.
TL;DR: The blog's pill-shaped header and footer became full-bleed bars with semi-transparent backgrounds and backdrop blur. The trick: the outer element spans the whole viewport while inner content stays wrapped in mx-auto max-w-6xl for readability. A permanent border slot that transitions from border-transparent to visible on scroll prevents any layout shift.
#css#frontend#tailwind - 13:28frontend
Gradient Text Turned Into a Color Box: the Shorthand That Resets
A theme override using the background shorthand silently reset background-clip:text from the base rule, so gradient text rendered as a solid color box.
TL;DR: A CSS background shorthand silently reset background-clip:text, turning gradient text into a solid color box. Swapping to the background-image longhand fixed it, since the base rule's clipping stayed intact. Lesson: the background shorthand resets what you don't set, so per-theme visual checks are now mandatory before pushing.
#css#frontend#tailwind - 12:58frontend
The Footer Icons That Vanished When the Card Turned White
Hardcoded white GitHub and Next.js icons disappeared the moment the light-mode footer card turned solid white. The fix: var(--foreground).
TL;DR: Fixing the footer card to solid white made hardcoded white icons vanish on white. Swapping every #ffffff in Footer.tsx for var(--foreground) lets icons adapt automatically across themes. Same for the neon gradient: added a denser light-mode variant so it stays visible on white.
#css#frontend#tailwind - 12:39frontend
The Transparent Card That Vanished in Light Mode
Cards styled bg-card/20 through /90 nearly vanished in light mode because Tailwind v4's opacity modifier compiles to color-mix with a token variable.
TL;DR: Tailwind's opacity modifier compiles bg-card/50 into a color-mix() blend against the --card CSS variable, so the same class renders differently per theme. Dark mode contrast hid the issue; light mode made white blends at 20–90% opacity melt into the background. The fix: a light-mode CSS override forcing solid card colors, with shadows for depth instead of alpha.
#css#tailwind#frontend - 11:28frontend
I Replaced My Blog Carousel With a Boring List
The five latest posts were trapped in a swipe-one-by-one carousel. For navigation content, a plain vertical list is the honest pattern.
TL;DR: The author shipped a carousel for their latest blog posts, then found it tedious to use themselves. The realization: carousels suit fixed showcases like services, but blog lists are navigation, which needs everything scannable at once. They swapped it for a plain vertical list of five titles with dates, no JS or gestures.
#ux#mobile#frontend - 11:16frontend
I Rejected Carousels. Then I Built One.
Five service cards stacked on a phone became an endless scroll. A script-free carousel with CSS scroll snap turned out to be the honest middle ground.
TL;DR: The author turned five stacked mobile service cards into a pure CSS carousel using scroll snap, no JavaScript needed. Unlike typical carousels, it skips auto-rotation and shows an 80vw peek of the next card, so users know there's more. Desktop keeps the grid layout via a media query.
#css#ux#mobile - 11:10ai
OpenHands in 2026: From CLI to the Agent Canvas Platform
The OpenHands CLI is officially deprecated in 2026. Meet Agent Canvas, learn the right way to use it, and see how it pairs with Hermes Agent.
TL;DR: OpenHands dropped its pip CLI and pivoted to Agent Canvas, a canvas-based platform installable via npm or a safer Docker sandbox scoped by PROJECTS_PATH. The SDK adds security risk levels, LiteLLM provider flexibility, and named LLM configs for cost tiering. Pair it with Hermes Agent as an orchestrator that verifies diffs before anything gets merged.
#openhands#agent-canvas#hermes - 10:49frontend
Five Cards and the Copy Problem
My portfolio had a bare list of projects. I added five capability cards: the CSS grid was solved in twenty minutes. The copy took three rewrites.
TL;DR: The CSS grid for his portfolio's service cards was the easy part, done in 20 minutes with MDN's auto-fill recipe. The hard part was the copy, which took three rewrites to compress into short, blunt descriptions that never truncate. His take: layout is a solved problem, so spend the effort on content, equal heights, and a consistent shadow.
#css#ux#frontend - 12:32backend
I Almost Deleted My Cache One Key at a Time
Mass-deleting Redis keys felt right until I read the docs. Versioned keys with INCR bumps make stale chat answers unreachable instead.
TL;DR: Editing an article left the Redis-cached AI answers stale, and the author's first fix—scanning and deleting every ask: key—turned out to solve the wrong problem. SCAN is non-blocking; the real pain is tracking key families across workers forever. Versioned keys fix it: bake versions into key names, bump with INCR on edits, and let TTL clean up.
#redis#caching#cache-invalidation