The Web Development Podcast with Fexingo: Frontend, Backend, and Modern Web Stack

Lucas and Luna dive into CSS scroll-driven animations, a new API that lets developers tie animations directly to scroll position without a single line of JavaScript. They break down how it works using the animation-timeline property and scroll() function, compare it to traditional Intersection Observer and scroll event listeners, and walk through a concrete example: a reading progress bar that tak...

Lucas and Luna dive into the hidden cause of layout instability on the modern web: font loading. They explain how the browser's default behavior of swapping in web fonts causes layout shifts, hurting Cumulative Layout Shift (CLS) scores. Using the CSS Font Loading API with `document.fonts.ready`, they show a concrete approach to load fonts asynchronously while preventing the invisible text flash (...

Episode 102 of The Web Development Podcast breaks down exactly what determines scroll performance in modern web apps. Lucas traces the pipeline from user input to painted frame — the rendering bottleneck most devs overlook. Luna brings data from a real-world case: a Shopify store that lost 12% conversion after a single CSS property changed scroll jank. Together they walk through the critical path:...

Lazy loading images sounds like a guaranteed performance win, but Lucas and Luna dig into the surprising ways it can backfire. They explore the 'layout shift trap' — where lazy-loaded images without explicit dimensions cause cumulative layout shift scores to spike — and the 'loading lottery' that happens when the browser deprioritizes critical above-the-fold images. They walk through real-world da...

In Episode 100 of The Web Development Podcast, Lucas and Luna explore the Popover API — a native browser feature that eliminates the need for JavaScript-heavy custom modals, tooltips, and dropdowns. They walk through a concrete example: replacing a 200-line React modal with a 20-line HTML popover using the popover attribute and the element's popover integration. They discuss browser support, acces...

Episode 99 of The Web Development Podcast digs into the browser's Back Forward Cache (bfcache) — a performance feature designed to instantly restore pages from memory when users hit the back button. But bfcache can silently break your web app: old JavaScript state persists, WebSocket connections hang, and event listeners pile up. Lucas and Luna walk through how bfcache works under the hood, common...

WebSockets get all the attention for real-time web communication, but Server-Sent Events often do the job with less complexity and better browser support. Lucas and Luna break down when SSEs shine — and when they don't. They walk through a concrete example: building a live stock ticker that pushes price updates to a dashboard every 200 milliseconds, without the overhead of a bidirectional WebSocke...

Episode 97 of The Web Development Podcast with Fexingo. Lucas and Luna dive into the new Navigation API, a modern replacement for the brittle window.location and hash-based routing. They explain why single-page apps have struggled with browser navigation, how the API introduces a stateful, interceptable navigation model, and why it matters for frameworks like React and Vue. With real-code examples...

Episode 96 tackles a silent performance killer: HTTP headers that sabotage image loading. Lucas and Luna dig into how misconfigured Cache-Control, Vary, and Content-Disposition headers can double load times, waste bandwidth, and break CDN caching. They walk through a real example: a React dashboard that served user-uploaded avatars with per-request ETags and no cache directive, resulting in 400ms...

Lucas and Luna dive into the CSS View Transitions API, a new browser feature that lets developers create smooth, native-like page transitions without JavaScript libraries. They explain how it works under the hood—using pseudo-elements like ::view-transition-old and ::view-transition-new—and walk through a real example: animating a product list to a detail page. They discuss browser support, perfor...

Lucas and Luna dive into CSS Subgrid, a feature that finally fixes nested grid alignment without hacky workarounds. Using a real-world example of a product card with a sticky footer and an image gallery, they show how Subgrid lets child elements inherit parent grid tracks, eliminating calc-based width juggling and JavaScript layout calculations. Lucas explains the browser support landscape as of J...

In this episode, Lucas and Luna explore the practical impact of CSS Container Queries on modern responsive design. They discuss real-world examples, including how a component-based layout can adapt to its container instead of the viewport, reducing the need for media query overrides. The hosts break down the syntax, browser support as of mid-2026, and a concrete case: a card component that adjusts...

Foldable phones are no longer a novelty—they're a growing segment of the mobile market. But most web apps treat them like regular phones, missing a huge opportunity and often delivering a sluggish experience. In this episode, Lucas and Luna dive into why foldables pose unique challenges for web developers: from viewport resizing mid-session to CSS layout reflow and JavaScript performance pitfalls....

Episode 91 of The Web Development Podcast digs into CSS Container Queries, a feature that finally lets components respond to their parent container's size rather than the viewport. Lucas explains how this flips the old 'responsive design' model on its head, using a real dashboard card example. Luna questions browser support and practical adoption, and they discuss how frameworks like Tailwind and...

Episode 90 of The Web Development Podcast with Fexingo dives into CSS container queries — a feature that lets components respond to their parent container's size rather than the viewport. Lucas and Luna break down why this matters for reusable UI components, how it differs from traditional media queries, and a real-world example from a dashboard layout that turned a maintenance nightmare into clea...

Episode 89 of The Web Development Podcast dives into a silent user-experience killer: how web forms inadvertently reject or interfere with password managers. Lucas unpacks the specific HTML attributes and JavaScript patterns that cause autofill failures, focusing on the autocomplete attribute, form structure, and the dangers of dynamically generated fields. Luna brings real-world data on user aban...

Episode 88 of The Web Development Podcast dives into the overlooked CSS media feature `prefers-contrast`. Lucas and Luna explain how thousands of web apps fail users who need high or low contrast, using real-world examples like GitHub's custom themes and GOV.UK's forced-colors fallback. They walk through the spec, the difference from forced-colors, practical implementation tips, and common pitfall...

Episode 87 of The Web Development Podcast with Fexingo dives into the growing world of foldable and dual-screen devices. Lucas and Luna explore why most web apps break on foldable screens—from viewport resizing gotchas to CSS media queries that assume a single static screen. They walk through real-world examples like mismatched device-pixel ratios and window resizing during fold events, and share...

Ever notice your web app's text is either too small or too large for users, no matter how they set their browser's default font size? In this episode, Lucas and Luna dive into the overlooked CSS 'system-ui' and rem-based sizing, revealing how most developers accidentally hardcode pixel values that ignore user preferences. They explore real-world examples from sites like Wikipedia and GitHub that g...

Episode 85 of The Web Development Podcast digs into a surprising accessibility gap: most web apps ignore a user's operating system font size preference, defaulting to a fixed pixel-based cascade. Lucas and Luna break down why this happens — from CSS reset dogma to browser quirks like the rem vs px divide — and walk through concrete fixes: setting a fluid base font-size on the html element, using r...

Lucas and Luna dive into the CSS `prefers-reduced-motion` media query — a browser feature that 30% of users enable, yet most web apps ignore. They unpack real research from the Web Almanac showing that only 2.9% of sites respect this preference, and discuss how excessive animations can trigger vestibular disorders, distracting interactions, and battery drain. Using concrete examples like a Netflix...

Episode 83 dives into a common but often overlooked cause of memory leaks in single-page applications: abandoned event listeners. Lucas and Luna walk through a real debugging session on a React dashboard that had grown sluggish over weeks, only to find that setTimeout and addEventListener calls in unmounted components were still holding references. They explain how JavaScript closures keep those h...

Episode 82 of The Web Development Podcast with Fexingo dives into a subtle but common source of memory leaks in JavaScript: closures. Lucas and Luna break down how closures hold references to outer function scopes, preventing garbage collection and gradually bloating memory usage. They trace the problem through concrete examples—from event listeners in React components to data-binding patterns in...

Episode 81 of The Web Development Podcast tackles a subtle but performance-crippling bug: memory leaks from JavaScript closures. Lucas and Luna break down a real case from a popular React dashboard app that steadily consumed 200 MB per hour just from event handlers referencing stale variables. They explain how closure scope chains keep references alive, why modern single-page apps are especially v...

Episode 80 of The Web Development Podcast digs into the Accept-Language header and why most web apps ignore it. Lucas explains how the browser tells every server what language the user prefers, yet many apps serve English by default, forcing users to manually switch. Luna asks why this is so common and whether frameworks make it hard. Lucas walks through how to check the header in your server logs...