I Fixed Netflix's Trailer Problem with One React Component

🚀 I Fixed Netflix’s Annoying Trailer Restarts with 3 Lines of React 19’s <Activity> component. It is a game-changer!

React 19.2’s <Activity> component lets you hide UI without destroying state—think of it as putting components into hibernation while preserving their memory. I tested it on a Netflix-style trailer problem, and here’s what actually happened.

Sponsor - Preparing for JavaScript Interviews? Practice REAL React Interview questions on Great Front End

This is how I prepared and cleared frontend interviews at Big Tech, ultimately landing a job at Slack.

Practice Interview Questions Now

---

1️⃣ Deep Dive: I used React 19.2’s <Activity> Component to Fix Netflix’s Trailers. Here’s how it went

React 19.2 introduces the Activity component, which solves a critical challenge: hiding UI elements without destroying their state. Think of it as putting components to sleep while preserving their memory.

So I tried using React’s new <Activity /> component to fix it. The idea: keep each trailer alive in the background instead of re-rendering it every time the user switches. Basically, no more restarts of the trailer.

Here’s what I did:

Before:

{isHovered && <video autoPlay muted loop src={movie.trailerUrl} />}

After:

<Activity mode={isHovered ? ‘visible’ : ‘hidden’}>
  <video autoPlay muted loop src={movie.trailerUrl} />
</Activity>

Added a ViewTransition for smooth in/out animation:

<ViewTransition>
  <Activity mode={isHovered ? ‘visible’ : ‘hidden’}>
    <video autoPlay muted loop src={movie.trailerUrl} />
  </Activity>
</ViewTransition>

Result: trailers now play smoothly, stop when you move to another movie, and remember where you left off.

Activity is genuinely useful for preserving expensive component state, but it’s not magic. You still need to manage how many components you’re keeping alive.

Full breakdown here:

---

⚡ Quick Hits

2️⃣ 25 CSS cool tricks you didn’t know

This fast-paced CascadiaJS talk covers 25+ new CSS features in under 30 minutes. Adam Argyle demonstrates practical use cases, from page transitions and container queries to color schemes and scroll-driven animations. Learn advanced techniques with syntax examples and browser support details.

Range Syntax for Media Queries (finally readable):

/* Old way */
@media (min-width: 400px) and (max-width: 800px) { }

/* New way */
@media (400px <= width <= 800px) { }

Scroll-Driven Animations (no JavaScript needed):

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fade-in linear;
  animation-timeline: view();
}

Also covered: Page Transitions / View Transitions, Range Syntax for Media Queries, Container Queries, Scroll-Driven Animations, Animating to Height Auto

Watch the full video here

---

3️⃣ How the Web Works: A Deep Dive into Rendering Pipelines

Sarah Drasner’s visual breakdown of what actually happens when you load a page:

• How rendering pipelines differ across platforms

• The event loop and concurrency models (with diagrams that actually make sense)

• WebAssembly performance characteristics and when to use it

Best for: Senior devs who want to understand the “why” behind performance optimizations.

Watch the full video here

---

4️⃣ Taylor Swift (Grafana’s Version): How to track and visualize data related to pop’s biggest superstar

The Grafana team built a themed dashboard using Spotify API + Kaggle datasets + BigQuery. The Taylor Swift angle is fun, but the real value is the pattern:

Public data + APIs → Visual dashboard

You could apply the same approach to:

• Your favorite sports team’s stats

• Stock market trends

• Weather patterns in your city

• Any hobby with available data

Read the full blog here

---

5️⃣ Using AI Tools for Creating Spooky Halloween Videos

A really cool application of using AI tools like Midjourney, Runway, Google’s Veo, and ElevenLabs to generate a Halloween-themed spooky video.

• Midjourney for initial images

• Runway / Google Veo for video generation

• ElevenLabs for voice/audio

The Halloween theme is secondary, but what’s useful is seeing how these tools connect in a real workflow.

Read the full post here

---

👋 FROM MY DESK

Have you been affected by layoffs? Need help with Resume reviews? I am here to help!

Taylor Desseyn is joining me next week to review your resumes. Come and join me, and bring your resumes. Get direct feedback.

---

😆 Mundane poll

---

❤️ Enjoyed this newsletter?

• Subscribe on YouTube for video deep dives

• Book a 1:1

---