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

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 data from a case study on a news media site that saw its Largest Contentful Paint jump from 2.1 seconds to 4.7 seconds after implementing native lazy loading. The hosts explain when to use `loading='lazy'`, when to stick with eager loading, and how tools like the JavaScript Intersection Observer can give you more control. They also cover the often-overlooked interaction between lazy loading and server-side rendering, plus the impact on image CDN caching. By the end, you'll know exactly how to audit your own image loading strategy without guessing.

#WebPerformance #LazyLoading #CoreWebVitals #LCP #CLS #ImageOptimization #FrontendDev #WebDev #JavaScript #IntersectionObserver #SSR #CDN #PerformanceAudit #Technology #FexingoBusiness #BusinessPodcast #DevTips #WebDevelopment

Keep every episode free: buymeacoffee.com/fexingo

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

#PopoverAPI #WebDevelopment #HTMLAPI #Frontend #Modal #Tooltip #Accessibility #BrowserAPIs #Chrome #Firefox #Safari #React #JavaScript #CSS #WebStandards #Technology #FexingoBusiness #WebDevPodcast

Keep every episode free: buymeacoffee.com/fexingo

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 pitfalls like stale React state and unclosed IndexedDB connections, and how to use the new 'PageRevealEvent' and 'pageswap' APIs to handle restores gracefully. They also cover debugging via Chrome DevTools bfcache inspection and why your single-page app might actually need to opt out of bfcache for sensitive forms. By the end, you'll know exactly why users see ghost data or frozen animations after navigating back. The episode wraps with a short listener-support mention tied to the practical value of today's advice.

#BackForwardCache #bfcache #WebPerformance #JavaScript #React #SPA #PageRevealEvent #pageswap #ChromeDevTools #WebDevelopment #Frontend #UserExperience #BrowserCaching #WebAPI #SessionHistory #TechPodcast #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

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 WebSocket connection. The hosts compare event-stream protocols, discuss automatic reconnection, and explain why many developers reach for WebSockets when a simpler solution works. They also address SSE's limitations — no binary data, no client-to-server streaming — and suggest a hybrid approach for apps that need both push updates and user input. By the end, you'll know exactly when to use SSEs and when to grab a heavier tool.

#ServerSentEvents #SSE #WebSockets #RealTimeWeb #HTTPStreaming #EventSourceAPI #WebPerformance #JavaScript #Frontend #Backend #StreamingData #LiveUpdates #StockTicker #BrowserAPIs #TechPodcast #WebDev #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

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 of intercepting navigations, managing a history stack, and handling back/forward buttons, this episode gives web developers a concrete upgrade path. No fluff—just a focused look at one emerging browser API that changes how we think about web routing.

#NavigationAPI #WebDevelopment #Frontend #SPA #BrowserHistory #Routing #HTMLSpec #WebAPI #JavaScript #React #Vue #ServiceWorker #ProgressiveEnhancement #DeveloperTools #Chrome #Firefox #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

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 round trips for every 12KB PNG. We explain the fix: Cache-Control: public, max-age=31536000, immutable for static images, plus Content-Disposition: inline to force browser rendering. Also: how the Vary header can unintentionally split your cache across user agents, and why Accept header negotiation for WebP images needs careful Vary handling. If you've ever puzzled over Lighthouse audits flagging 'Serve images in next-gen formats' or 'Enable text compression' without obvious cause, this episode reveals the header layer you're probably ignoring.

#HTTPHeaders #WebPerformance #ImageOptimization #CacheControl #CDNCaching #LighthouseAudits #WebDevelopment #Frontend #Backend #Technology #React #ETag #ContentDisposition #VaryHeader #WebP #FexingoBusiness #BusinessPodcast #TheWebDevelopmentPodcast

Keep every episode free: buymeacoffee.com/fexingo

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, performance considerations, and why this API could change how we think about multi-page apps versus single-page apps. The episode also touches on the trade-offs with frameworks like React Router and the future of cross-document transitions. No fluff, just practical insight for frontend developers.

#CSSViewTransitions #FrontendDevelopment #WebDevelopment #CSSAPI #PageAnimations #BrowserFeatures #Chrome #Performance #SPA #MPA #ReactRouter #JavaScript #TechnologyPodcast #Technology #FexingoBusiness #BusinessPodcast #WebDev #DeveloperTools

Keep every episode free: buymeacoffee.com/fexingo

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 July 2026, noting that Firefox has supported Subgrid since 2019, Chrome since 2022, and Safari since 2023, making it safe for production in most contexts. They also discuss performance gains from reducing DOM dependencies and layout thrashing, and touch on fallback strategies using feature queries. Perfect for developers tired of fighting with nested flexboxes to align content across dynamic layouts.

#CSS #Subgrid #CSSGrid #WebDevelopment #Frontend #Layout #ResponsiveDesign #BrowserSupport #Firefox #Chrome #Safari #WebPerformance #Coding #Technology #FexingoBusiness #BusinessPodcast #Podcast #WebDev

Keep every episode free: buymeacoffee.com/fexingo

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 its layout fluidly within different grid contexts. They also touch on performance considerations and how container queries simplify code for design systems. If you're a front-end developer looking to write more maintainable styles, this is your deep dive.

#CSS #ContainerQueries #ResponsiveDesign #Frontend #WebDev #CSSGrid #DesignSystems #ComponentBased #Coding #WebDevelopment #CSSFeatures #ModernCSS #Layout #UI #Performance #DeveloperTools #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

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. They walk through a real-world case study of a news site that saw a 40% increase in layout shift when users unfolded their devices, and how a combination of container queries, content-visibility, and debounced resize handlers fixed it. If you're building for the modern web, you need to understand these quirks before your users fold you out.

#FoldableDevices #WebPerformance #ResponsiveDesign #CSSContainerQueries #JavaScriptOptimization #ViewportResize #LayoutShift #MobileWeb #TechPodcast #WebDevelopment #Frontend #Backend #ModernWebStack #FexingoWebDev #FexingoBusiness #BusinessPodcast #Technology #WebDevTips

Keep every episode free: buymeacoffee.com/fexingo