frontend

Canonical, hreflang, metadataBase, and JSON-LD LocalBusiness: the three layers that made sixteen bilingual Next.js routes pass an SEO audit.

TL;DR: Sixteen bilingual Next.js routes passed a full SEO audit thanks to one metadata commit. Three layers did the work: a shared helper generating canonical and hreflang tags, metadataBase in the root layout, and JSON-LD marking up the business and website. Centralizing everything keeps URLs consistent, so new routes stay audit-proof instead of relying on Google to guess.

Build a Next.js App Router locale switcher that preserves the current path with usePathname and a regex swap, plus an accessible active state.

TL;DR: A naive locale switcher sent users to the locale homepage instead of the same page. The fix: a small client component that swaps the /en or /id prefix while preserving the rest of the pathname, plus aria-current for the active state. Stick with this for simple sites; adopt next-intl once routing grows complex.

The /en page kept showing Indonesian content while the build stayed green: synchronous page components that ignore params. The fix is obvious once you see it.

TL;DR: The /en pages rendered Indonesian because four page components were synchronous and returned hardcoded locale content, so they never touched params at all. The fix: make each page async, await params, map locales to content, and guard unknown locales with hasLocale plus a 404. Green builds only prove components render, not that locale content is correct.

Fiord made the map dark but flat. I mutate the style JSON at runtime: a road brightness ladder, bright haloed labels, and a guard against fast-toggle flashes.

TL;DR: The author built a dark mode for Fiord by fetching its JSON and overriding paint across 28 layers with brightness steps, since CSS filters broke markers and the built-in dark style lacked contrast. The map renders the base style instantly then upgrades when the mutated style resolves, with guards against stale toggles. This treats style JSON as mutable data, not a fixed product.

CARTO basemaps suddenly require an API key and my map filled with watermarks. The story of migrating three Leaflet components to MapLibre GL on OpenFreeMap tiles.

TL;DR: CARTO basemaps now require an API key, leaving a watermark across my map and a 5-million-tiles non-commercial quota. Instead of managing someone's meter, I moved three Leaflet components to MapLibre GL with free unlimited OpenFreeMap; props and test IDs stayed intact, so all E2E tests passed untouched. Dark mode now swaps styles through setStyle instead of a CSS invert hack.

A position sticky sidebar that scrolled away with the page, and the three CSS preconditions I now check before trusting sticky again.

TL;DR: A sticky sidebar in a flex layout failed silently because it broke all three preconditions. Flexbox's default stretch left the aside no scroll room, fixed with items-start, while a fixed header demanded a custom top offset. The author now avoids overflow-clipping ancestors, removed redundant height caps, and made this layout a standard pattern.

The AI entry in my navbar changed color after a menu reorder. A lesson in modulo index color assignment and fixing it with data identity.

TL;DR: Styling nav entries with a modulo index ties colors to render position, so reordering the menu silently reshuffles accents. Pinning the special "Ask AI" entry to its href identity keeps its color stable. Adding an idle pill also satisfies WCAG 1.4.1, since shape reinforces hue for users who can't distinguish colors.

Removing the WhatsApp consultation pill and promoting Ask AI into the segmented nav: placement contracts for external CTAs versus internal features.

TL;DR: The WhatsApp consultation button was removed from the header, not just restyled. Ask AI moved into the main nav as a permanent entry, with the mobile consultation slot reassigned to it. The takeaway: features belong in navigation, while one-shot external actions like WhatsApp links belong on pages where they matter.

Shrinking the desktop chat input field and buttons with four responsive Tailwind classes, no separate component and no JavaScript required.

TL;DR: The chunky mobile-sized chat composer was wasting desktop space, but a separate component felt like overkill. Four responsive Tailwind classes fixed it: base sizes stay touch-friendly for phones, sm: variants tighten padding and shrink buttons on desktop. Trade-off is width-based, not pointer-based, so wide touchscreen laptops get small buttons too.