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

Lucas and Luna dive into the Screen Wake Lock API — a browser feature that prevents mobile devices from dimming or locking while your web app is active. They explore real-world use cases like recipe apps, QR-code scanners, and live dashboards, and explain how to request and release the wake lock responsibly. They also discuss battery impact, fallbacks for unsupported browsers, and a surprising gotcha: if the user switches tabs, the lock is released automatically. By the end of this episode, you'll know exactly when to use Wake Lock and when to let the phone sleep.

#ScreenWakeLockAPI #WebAPI #MobileWeb #ProgressiveWebApp #PWA #BatteryLife #UserExperience #JavaScriptAPI #WebDevelopment #Frontend #BrowserAPI #CodingTips #WebStandards #FexingoBusiness #TechnologyPodcast #WebDevPodcast #Fexingo #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

Episode 110 of The Web Development Podcast with Fexingo dives into the Compression Streams API — a browser-native way to compress data client-side before uploading. Lucas walks through a real-world example: a photo-sharing app that reduced upload times by 40% using Gzip compression in JavaScript. Luna pushes back on when it's worth the overhead versus server-side compression. They discuss browser support (Chrome and Firefox now, Safari and Edge behind), performance benchmarks from a 2025 case study, and why this API matters for users on slow networks. If you've ever fought with large file uploads, this episode gives you a concrete tool to test today.

#CompressionStreams #WebPerformance #ClientSideCompression #JavaScript #Gzip #UploadOptimization #BrowserAPI #Technology #FexingoBusiness #BusinessPodcast #WebDev #Frontend #Backend #ModernWebStack #LucasAndLuna #SlowNetwork #FileUpload #PerformanceBenchmark

Keep every episode free: buymeacoffee.com/fexingo

Episode 109 of The Web Development Podcast dives into CSS trigonometric functions — sin, cos, tan — which shipped in all major browsers in 2024. Lucas and Luna explore a concrete case: building a circular progress indicator without JavaScript, using CSS custom properties and trigonometry to calculate positions. They discuss why this matters for responsive design, how it simplifies animations, and why developers should start using it now. No hot takes, just practical code and real-world trade-offs.

#CSS #CSSMathFunctions #Trigonometry #WebDevelopment #Frontend #NoJavaScript #CircularProgress #CSSsin #CSScos #CSStan #CustomProperties #ResponsiveDesign #CSSAnimations #BrowserFeatures #Technology #WebDevPodcast #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

Lucas and Luna dig into the hidden math behind Google Lighthouse — the scoring algorithm that assigns a 0–100 performance grade to your web app. They break down the five weighted metrics, reveal why a 92 can feel identical to an 88, and explain how the weighting model, last updated in May 2023, rewards some optimizations more than others. Using a concrete example — a React dashboard that lost 15 points after a view-transition animation — they show why a single high-weight metric like Cumulative Layout Shift can tank your score even when everything else is green. They also discuss how the same scoring model powers PageSpeed Insights and the Chrome DevTools Performance panel, and why chasing a perfect 100 may misalign with real user experience. No code walkthrough, just the conceptual model every developer should understand before they Lighthouse-optimize.

#Lighthouse #PerformanceScoring #WebPerformance #GoogleLighthouse #CoreWebVitals #CumulativeLayoutShift #LargestContentfulPaint #FirstInputDelay #InteractionToNextPaint #TimeToInteractive #SpeedIndex #PageSpeedInsights #ChromeDevTools #ReactDashboard #ViewTransitionAPI #WebVitalMetrics #FexingoBusiness #TechnologyPodcast

Keep every episode free: buymeacoffee.com/fexingo

Episode 107 of The Web Development Podcast with Fexingo dives into a subtle but critical CSS issue: how scroll snap interacts with overflow values. Lucas and Luna explore a real-world case where a seemingly minor detail — using 'overflow: clip' instead of 'overflow: hidden' — prevents scroll snap from working on WebKit browsers. They walk through the spec, the bug, and the fix, anchored to a specific example from a production dashboard that stumped an entire frontend team. Listeners learn one concrete debugging technique they can apply immediately, plus a deeper understanding of how overflow containment affects scrolling behavior. No fluff, just the kind of gotcha that makes you appreciate the browser's layout engine.

#CSSScrollSnap #OverflowClip #WebKitBug #FrontendDebugging #CSSContainment #ScrollBehavior #LayoutEngine #BrowserQuirks #CSSSpec #OverflowHidden #ScrollContainer #WebDev #Technology #FexingoBusiness #BusinessPodcast #WebDevelopment #CSS #Frontend

Keep every episode free: buymeacoffee.com/fexingo

Lucas and Luna dive into the CSS Anchor Positioning API, a new browser feature that lets developers attach tooltips, popovers, and menus to elements without JavaScript position calculations. Using a concrete example of a hovercard in a table layout, they walk through the `anchor()` function and `inset-area` property, compare it to current hacks involving ResizeObserver and getBoundingClientRect, and discuss browser support as of July 2026. The episode explains why this API simplifies responsive positioning across scroll, zoom, and dynamic content, and touches on practical gotchas like overflow behavior and composite layers. A must-listen for frontend developers tired of fighting CSS positioning with JS.

#CSS #AnchorPositioning #Frontend #WebDevelopment #CSSAnchorAPI #Tooltip #Popover #NoJS #BrowserAPIs #Chrome #Firefox #Safari #ResponsiveDesign #Layout #WebStandards #FexingoTech #TechPodcast #FexingoBusiness

Keep every episode free: buymeacoffee.com/fexingo

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