ai
Technical notes on web development, DevOps, and AI integration.
80 articles
- 02:58frontend
My Chat Panel Got Clipped by the Fixed Navbar
A fixed navbar takes no space in the document flow, so a 100dvh chat panel still ran short. The fix pairs xl:mt-14 with a 100dvh subtraction.
TL;DR: A fixed navbar floats above the document flow, so it occupies no space and the panel's top slid underneath it despite having the correct height. The fix pairs xl:mt-14 with xl:h-[calc(100dvh-3.5rem)], since h-dvh only answers how tall, not where content starts. Visually, padding and gaps were dropped for one border divider, creating an edge-to-edge three-column surface.
#css#tailwind#layout - 23:40frontend
Aligning Container Gutters With the Navbar Edges
Cards that refuse to line up with the navbar logo come down to gutters: every container moved from px-4 sm:px-6 lg:px-8 to px-3 sm:px-4.
TL;DR: A misaligned card row turned out to be a Tailwind gutter mismatch: the main section used px-4 sm:px-6 lg:px-8 while the navbar used px-3 sm:px-4, leaving a 16-pixel difference at large screens. The fix normalized every max-w-6xl and max-w-7xl container to px-3 sm:px-4, giving one source of truth. Lesson: straight-line misalignment usually means two padding systems assumed identical.
#css#frontend#tailwind - 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: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 - 21:57ai
Query Rewriting: The Small Brain Before Agent Search
Told to search for "nano banana", an agent without query rewriting gets two worlds of meaning. Here are the 5 rewrite patterns I installed.
TL;DR: The author's fix for ambiguous agent searches: expand every query into five variants—literal, contextual, English, industry synonym, full question—before searching. All five run and merge, so "nano banana" resolves correctly as Google's image model rather than a fruit. The approach costs almost nothing—no extra API calls—though the author honestly admits no benchmark data exists yet.
#query-rewriting#ai-agent#rag - 19:31ai
My AI Found an Angle, Then Made Up a Stat
The chat surfaced a valid new angle and one unverifiable statistic. Finding angles and proving claims are different jobs; only one of them belongs to the chat.
TL;DR: An AI chat surfaced a genuinely new research angle, but then invented a stat attributed to Stanford HAI that couldn't be verified anywhere. The lesson: finding angles and proving claims are separate jobs, so the pipeline now asks AI for angles, then opens every primary source manually. Citations offer traceability, not truth; walking the trail is your job.
#ai-agents#llm#automation