here is how to write BETTER frontend code

Overview

The video is about writing “better” frontend code by replacing common patterns with modern browser/JS/CSS built-ins. This reduces complexity and improves performance.

Key “built-in tricks” (5)

1. requestIdleCallback (main-thread performance)

   • Problem addressed: Doing heavy background work (logging, preloading, analytics) in loops—even when made “async” with setTimeout—can still block the single JS thread that must keep the UI responsive.
   • Why it matters: Long work (e.g., ~2 seconds) causes the page to freeze, making animations jerky and buttons unresponsive.
   • Solution: requestIdleCallback schedules work during the browser’s free idle time, using a deadline so processing can stop before the next frame boundary.
   • Claimed result: Breaking work into frame-friendly chunks keeps a loading indicator from stuttering (“no twitch”).

2. CSS :has() selector (style based on child state)

   • Problem addressed: Styling a parent element based on invalid state in a child input often requires JS event listeners and manual class toggling.
   • Solution: :has() lets CSS select a parent when it contains something matching a condition (e.g., an input group that “has an invalid input”).
   • Claimed benefits: Removes the need for JS listeners/class switching, and avoids future refactor bugs where logic can be forgotten.

3. structuredClone (true deep cloning)

   • Problem addressed: Cloning objects with JSON.stringify / JSON.parse breaks data types, for example:
     • Date becomes a string
     • Map is effectively lost/converted
   • Solution: structuredClone is a built-in deep clone algorithm that preserves types (dates remain dates; maps remain maps).
   • Additional note: It uses the same conceptual approach the browser employs for transferring data (e.g., between tabs).

4. IntersectionObserver (efficient viewport visibility detection)

   • Problem addressed: Lazy-loading and infinite scroll were often implemented with scroll handlers using getBoundingClientRect. Scroll events can fire many times per second, causing frequent expensive layout/position checks.
   • Solution: Register elements once; the browser notifies you when elements enter the viewport (or when thresholds are met).
   • Claimed performance result: In the same scrolling test (2 seconds), the old approach triggers 100+ calls, while IntersectionObserver barely increments the counter—less work for the main thread.

5. CSS Container Queries (component-aware responsiveness)

   • Problem addressed: Media queries only know viewport width, not how much space an individual component/container has. This breaks reusable components in different layouts (e.g., main column vs sidebar).
   • Solution: Container queries let a component adapt to its own container size.
   • Example technique mentioned:
     • container-type: inline-size
     • Use min-width: 350px (inside the container query rules)
   • Claimed result: The same card behaves correctly in a narrow container where media-query-only behavior fails.

Sponsorship / related tool

• The video mentions Scrimba sponsor and a new text-to-video explanation tool called Explain:
  • Ask a question, paste code, upload a document, or share a link
  • It generates video explanations with a narrator plus visual charts/graphs/animations in seconds
  • Available via integrations like a ChatGPT plugin, MCP for Claude, Codex, and a Chrome extension.

Main speakers/sources (from the subtitles)

• The video creator/host (“I” narrator describing the five techniques)
• Scrimba / Explain (sponsor mentioned at the end)