frontend

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.

A CSS max-width clamp ships, but the vw sizes hint keeps promising a bigger slot. Make the contract honest with pixel values so srcset picks right.

TL;DR: Clamping an oversized hero image with CSS max-width looks fixed visually, but the browser still downloads a huge file. The culprit was a stale sizes attribute promising 40vw, so the browser picked a 576px srcset candidate for a 330px box. Honest pixel values in sizes, matched to the breakpoint clamp, keep downloads lean.

Two stacked attribution lines on a tiny map turned out to be my own duplicate; the provider's TileJSON had been shipping attribution all along.

TL;DR: A duplicated map attribution wasn't a typo in the component; MapLibre pulls the string automatically from the provider's TileJSON. The fix was dropping the hand-typed customAttribution and setting compact: false so the credit stays visible. License strings belong in tile data, never retyped in app code.

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.

Swapped a static map for MapLibre in Next.js 16. The frame rendered, zero tiles loaded, zero errors. The worker never started.

TL;DR: A MapLibre map rendered markers but gray tiles under Next.js 16's Turbopack, which fails to emit the worker's companion file, so zero tile requests fired and the console stayed clean. The fix: load MapLibre 4.7.1 from a CDN, where the worker inlines as a blob URL. Version 6+ instead recommends copying worker files to public and setting workerUrl.

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.

Glowing office dots and flowing lines on a static map with one SVG overlay: viewBox 0-100, preserveAspectRatio none, reduced-motion-safe CSS animation.

TL;DR: Instead of Mapbox or hardcoded pixels, the author stacked an SVG with viewBox="0 0 100 100" over a static image, so office positions in percentage coordinates stretch perfectly with the viewport. Flowing dashed lines come from animating stroke-dashoffset, layered with pulsing dots, all pure CSS. The overlay stays accessible via pointer-events-none and aria-hidden, wrapped in prefers-reduced-motion.

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.

Split a card list into two rows; row 2 breaks out of the container with w-screen and a calc margin, with no horizontal scrollbar.

TL;DR: w-screen breaks layouts because 100vw ignores the scrollbar, leaving your element a few pixels too wide. Fix it with the full-bleed combo w-screen, max-w-[100vw], ml-[calc(50%-50vw)], and padding, then scope overflow-hidden to just that section. Use overflow-clip instead if a sticky header breaks, and an IIFE renderCard to split rows without duplicating markup.