react

Two of the four ISO badges in our hero pointed at superseded editions. The edition year is data to audit, not static text.

TL;DR: Hardcoded certification years in frontend content rot silently because ISO standards get revised periodically. Two of four badges were already outdated, and even checking statuses has traps like misattributed IAF documents. Fix: keep one source-of-truth array, verify against the ISO site yearly, or drop edition years if unmaintained.

React card clicks don't move an imperative map by themselves. Three small bridges: a ref registry, a synthetic click, and flyTo.

TL;DR: Maplibre markers only toggle popups via clicks that bubble from their element to the map, so force-calling popup.addTo is unreliable. The fix bridges the gap with a ref-based registry that stashes focus requests until map load fires. A synthetic bubbling click plus flyTo moves the camera, and a seq counter lets repeat clicks on the same card retrigger.

The group-network section got split out of about-teaser, then went portable: rebuilt as a shadow-DOM custom element any page can drop in.

TL;DR: Refactoring a React section into a standalone file raised a portability problem: non-React teams couldn't reuse it without shipping a framework bundle. Copy-pasting rendered HTML failed because utility styles depended on the build pipeline and manual hover handling was brittle. Rebuilding it as an autonomous web component with shadow DOM and a template made it lightweight and portable.

Unverified metadata is gone; what remains is name, sector, description, plus three technical details that keep cards accessible.

TL;DR: The author stripped unverified metadata from company cards, keeping only name, sector, and description to protect content integrity. CSS pseudo-elements create dividers without DOM bloat, while aria-hidden icons and motion-reduce utilities keep the component accessible. Explicit array slicing handles grid rows predictably, avoiding awkward orphaned cards.

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.

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.

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.

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.