frontend

The hero photo needed an 85-90 percent overlay just to stay legible. One token-driven CSS motif replaced both, drift included, reduced-motion safe.

TL;DR: Replacing a hero photo with a tiled CSS gradient exposed a simple truth: the old JPEG was drowned under an 85-90 percent overlay, so the overlay color was doing the real branding work. The new pattern uses color-mix, a design token, and a transform-only drift animation gated by prefers-reduced-motion. Result: one asset deleted, zero downloads, better accessibility.

Company cards changed shape three times in a week, but the typed content contract held: optional fields plus truthiness guards make empty data hide itself.

TL;DR: Building a bilingual Next.js company profile, I kept adding card fields and filling gaps with placeholder strings. Turns out optional TypeScript properties plus truthiness guards meant absent data simply never rendered, no helper logic needed. Typed content files beat a headless CMS at this scale, surviving three redesigns with zero component changes.

A 113-logo client grid pushed everything below the fold. I rebuilt it as a pure CSS two-row marquee with an exact -50 percent loop.

TL;DR: A 113-logo static grid buried the homepage content, so I replaced it with a pure CSS marquee instead of pulling in a JS library. Two duplicated tracks animate translate3d from 0 to -50%, with flex gap folded into padding so the loop seams perfectly. Transform-only animation, edge fades via mask-image, aria-hidden tiles, and prefers-reduced-motion keep it fast and accessible.

How I cut one client-logo wall raster into 113 uniform tiles: whitespace segmentation, a 220x130 canvas, and a stable next/image grid.

TL;DR: A single giant client-logo raster gets split deterministically using whitespace projection and connected components, no machine learning needed. Each crop is normalized onto a 220x130 white canvas so the grid stays tidy without stretching. The frontend uses next/image with explicit dimensions, lazy loading, and slot-based naming to prevent layout shift and keep pruning safe.

React 19 flags every script tag inside a component, including the next-themes anti-FOUC script that actually runs. Here is how I silence it in dev only.

TL;DR: next-themes renders an inline script to prevent theme flash, but React 19 warns about every script tag in components, producing a harmless false positive on Next.js 16. Since the open issue won't get fixed soon, I shipped a dev-only console.error filter that silences that exact message. Production stays untouched, and dark mode keeps working without FOUC.

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.

Adding llms.txt route handlers to a bilingual Next.js App Router site and generating the file from the same content modules the pages render.

TL;DR: The author initially assumed llms.txt was a sitemap for LLMs, but it's actually a small curated markdown overview agents fetch on demand, with no SEO payoff today. They added two Next.js route handlers serving it as static plain text with caching. The key takeaway: generate it from the same content modules as your pages to prevent drift.

Moving the root layout into the [locale] segment makes html lang server-rendered, deletes the client-side language bootstrap, and passes the structural audit.

TL;DR: We replaced a client-side script that guessed the reader's language with Next.js's recommended pattern: nesting the root layout under a dynamic locale segment so the lang attribute renders correctly on the server. This brought free 404s for unknown locales, static prerendering, and correct screen-reader pronunciation, even on 404 pages. Detection now lives in an Accept-Language redirect instead.