In episode 105 of The Web Development Podcast, Lucas and Luna dive into CSS Nesting — the native feature that landed in browsers in 2023 and is finally ready for production. They walk through a concrete before-and-after example: refactoring a media-card component from 40 lines of repetitive Sass-style nesting to 22 lines of native CSS that works everywhere. Along the way they explain the gotchas — why you can't nest selectors that start with a letter without an ampersand, how nesting interacts with the cascade, and why this isn't just syntactic sugar but a genuine readability and maintainability win. They also compare CSS Nesting to preprocessor nesting from Sass and Less and discuss when you might still want a preprocessor. A practical episode for any developer writing CSS today.

#CSSNesting #WebDevelopment #Frontend #CSS #Sass #CodingTips #WebPerformance #DeveloperTools #StyleSheets #CSSSelectors #BrowserFeatures #Refactoring #Maintainability #Technology #FexingoBusiness #BusinessPodcast #LucasAndLuna #WebDevPodcast

Keep every episode free: buymeacoffee.com/fexingo

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 takes five lines of CSS instead of a library. They also discuss browser support in mid-2026, polyfill strategies, and when you still need JS for complex scroll interactions. No hot takes, just practical web-dev knowledge you can use today.

#CSSScrollDrivenAnimations #CSS #ScrollAnimations #Frontend #WebDevelopment #AnimationTimeline #NoJavaScript #Performance #ReadingProgressBar #IntersectionObserver #ProgressiveEnhancement #BrowserSupport #Chrome #WebDevTips #CSSAPI #FexingoBusiness #BusinessPodcast #Technology

Keep every episode free: buymeacoffee.com/fexingo

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 (FOIT) and the flash of unstyled text (FOUT). The episode references real-world examples from Google's web.dev case studies and outlines a production-ready pattern that improves both performance and user experience. Listeners learn why `font-display: swap` alone isn't enough and how to combine async loading with a fallback font system to eliminate layout shifts entirely.

#CSSFontLoading #AsyncFonts #LayoutShift #CLS #WebPerformance #FontFaceObserver #FOIT #FOUT #FontLoadingAPI #documentFonts #webdev #Frontend #Technology #FexingoBusiness #BusinessPodcast #WebDevPodcast #PerformanceOptimization #CSS

Keep every episode free: buymeacoffee.com/fexingo

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: compositor thread vs. main thread, the cost of will-change: transform, why layout thrashing ruins smooth scrolling, and how a single synchronous reflow can add 40 milliseconds to frame time. They also touch on the new Scroll-Driven Animations API and whether it changes the performance equation. No theory without numbers: specific frame budgets, specific DOM sizes, specific debugging tools. Plus a low-key reminder that this show stays ad-free because listeners support it at buy me a coffee dot com slash fexingo. If you write frontend code that scrolls, this episode will save your users from jank — and save your revenue from churn.

#WebPerformance #ScrollJank #RenderingPipeline #CSSPerformance #FrontendDevelopment #ChromeDevTools #CompositorThread #LayoutThrashing #WillChangeTransform #ScrollDrivenAnimations #FrameBudget #HighFPSScrolling #WebDevPodcast #Technology #FexingoBusiness #BusinessPodcast #WebDevelopment #PerformanceOptimization

Keep every episode free: buymeacoffee.com/fexingo

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