javascript

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.

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.

A server monitoring dashboard becomes noise when attention items pile up with no organization. Three complementary fixes transform a flat grid into a usable workflow.

TL;DR: Dashboard Guy Eighteen flat grid of alerts made it impossible to find critical issues across nine servers. Backend search with debounce, severity filter buttons, and collapsible server groups solved the noise problem by pushing all filtering logic server-side. Three tools together let you triage from hundreds of items in two taps or three words.

Scraping an AI chat answer from the DOM gets you half of it. The full text lives behind the Copy button, plus a strict output contract.

TL;DR: Chat UIs use virtualization, so most of the AI's answer never exists in the DOM and scrolling won't load it. The fix layers a Copy-button click to read the clipboard, an accessibility tree snapshot, and innerText as fallbacks. The real win: define an output contract upfront — code block plus sentinel marker — so scraping becomes deterministic.

A double code block bug on the blog: a module-level /g regex's lastIndex gets clobbered across parallel async calls. The fix is eight lines.