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

The Popover API is a native browser feature that lets you create tooltips, dropdown menus, and modal overlays using only HTML attributes — no JavaScript required. In this episode, Lucas walks through the practical setup: the `popover` attribute, `popovertarget` linking, and the built-in `::backdrop` styling. He explains why the API automatically handles focus management, escape-key dismissal, and accessibility roles, saving developers from common custom-popover bugs. Luna asks about the difference between `popover` and the HTML `

#PopoverAPI #WebDevelopment #HTML #CSS #JavaScript #Frontend #Accessibility #BrowserAPI #Tooltips #Modals #NativeWebFeatures #WebStandards #FexingoBusiness #BusinessPodcast #WebDev #Technology #DeveloperTools #UX

Keep every episode free: buymeacoffee.com/fexingo

Lucas and Luna explore the Web Serial API, a browser technology that lets web apps communicate with serial port devices like Arduino boards, 3D printers, and barcode scanners. They walk through a real example: a developer building a browser-based firmware flashing tool for an ESP32 microcontroller in a smart greenhouse project. Lucas explains the security model—how the API requires a user gesture and device chooser dialog to prevent drive-by attacks—and compares it to older approaches like Chrome Apps or native software. Luna asks about the messy reality of USB-to-serial adapters and driver support across Windows, macOS, and Linux. The hosts also touch on the rough edges: limited browser support (Chromium-only as of mid-2026), the lack of a built-in terminal UI, and why the API doesn't support Bluetooth serial. They close by asking whether the Web Serial API will ever go cross-browser, or if it's destined to remain a Chrome superpower for hardware hackers.

#WebSerialAPI #BrowserAPIs #HardwareHacking #IoT #Arduino #ESP32 #SerialCommunication #FirmwareFlashing #ProgressiveWebApps #Chromium #WebDevelopment #JavaScript #USB #SmartGreenhouse #DeveloperTools #Technology #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

Episode 129 of The Web Development Podcast with Fexingo dives into the CSS scroll-driven animations API - a native browser feature shipping in Chrome 115 that lets you animate elements based on scroll position without a single line of JavaScript. Lucas walks through a real-world case: a landing page progress bar that fills as the user scrolls, using only CSS. Luna questions browser support and progressive enhancement. They compare the old way (scroll listeners + requestAnimationFrame) to the new declarative approach, discuss performance gains by moving work off the main thread, and share a practical code example using animation-timeline: scroll(). If you've ever built a parallax section, a reading progress bar, or a scroll-triggered reveal, this API could kill hundreds of lines of JavaScript in your next project. The episode also touches on the animation-range property and how to pair scroll-driven animations with @media (prefers-reduced-motion). No libraries, no polyfills - just the platform catching up to what developers have hacked together for a decade.

#CSS #ScrollDrivenAnimations #WebDevelopment #Frontend #AnimationTimeline #NoJavaScript #Chrome115 #Performance #ProgressiveEnhancement #CSSAnimations #Parallax #ReadingProgress #WebPlatform #BrowserFeature #Technology #FexingoBusiness #BusinessPodcast #WebDevPodcast

Keep every episode free: buymeacoffee.com/fexingo

Episode 128 of The Web Development Podcast dives into CSS animation-timeline, a spec that lets developers drive animations based on a scroll container's progress without a single line of JavaScript. Lucas and Luna walk through the practical case of a scroll-driven progress bar on a blog page — something that used to require Intersection Observer, a scroll listener, or a library like GSAP. They compare the old approach (roughly 30 lines of JS plus debouncing) against the new one: a single CSS property tied to the scroll-driven @keyframes. The conversation covers browser support (Chrome 115+ enabled it behind a flag; shipping in 2026), performance gains from offloading scroll work to the compositor thread, and real-world gotchas like scroll-timeline naming collisions and the difference between scroll and view timelines. By the end, listeners understand why this spec can eliminate thousands of lines of scroll-listener code across a typical web app. Filmed July 23, 2026.

#CSSAnimationTimeline #ScrollDrivenAnimations #WebDevelopment #Frontend #Performance #CSS #JavaScript #WebPerformance #Chrome #CompositorThread #ScrollListener #IntersectionObserver #GSAP #ViewTimeline #ScrollTimeline #ProgressiveEnhancement #FexingoTech #TechnologyPodcast

Keep every episode free: buymeacoffee.com/fexingo

In Episode 127 of The Web Development Podcast, Lucas and Luna dive into the CSS :has() selector, often called 'the parent selector.' They explain how it works with concrete examples: styling a form group when its input is invalid, adding a drop shadow to a card when it contains an image, and building a theme-switching toggle without JavaScript. The discussion highlights real-world use cases from the Airbnb design system and a GitHub PR that uses :has() to style list items containing a particular label. Lucas and Luna also address performance myths and browser support, showing that :has() is safe to use today with progressive enhancement. By the end, you'll understand why this CSS pseudo-class reduces the need for JavaScript state classes and simplifies component logic.

#CSS #HasSelector #ParentSelector #WebDevelopment #Frontend #StateDetection #CSSPseudoClass #ProgressiveEnhancement #BrowserSupport #AirbnbDesignSystem #ComponentLogic #JavaScript #Performance #Cascade #ModernCSS #Technology #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

Lucas and Luna dive into the Web Authentication API (WebAuthn) and how it's finally making passwordless login practical. They break down the difference between passkeys and passwords, walk through a real example of how Apple and Google have baked in support, and explain why the era of 'correct horse battery staple' is ending. This isn't theoretical — over 70 percent of FIDO2 registrations now happen on mobile devices, and major sites like GitHub and PayPal already let you log in with a fingerprint instead of a typed password. They also touch on the security model: how public-key cryptography means your biometric data never leaves your device. By the end, you'll understand why WebAuthn is arguably the most important browser API most developers haven't yet implemented.

#WebAuthn #Passkeys #WebAuthentication #FIDO2 #Passwordless #Cybersecurity #WebSecurity #APIs #Frontend #BrowserAPIs #PublicKeyCryptography #Apple #Google #GitHub #PayPal #Technology #FexingoTechnology #TechPodcast

Keep every episode free: buymeacoffee.com/fexingo

Race conditions are the silent killers of web app reliability, especially when multiple tabs or service workers access the same data. In this episode, Lucas and Luna dive into the Web Locks API, a browser-native mechanism that lets JavaScript coordinate access to shared resources without custom semaphores or fragile timeouts. Lucas explains the real-world problem using a travel booking site where double-bookings happen, then walks through how the lock request method works, the difference between exclusive and shared locks, and how it integrates with service workers for offline-first apps. Luna brings the counterpoint: this API is designed for cooperative code, not malicious actors, and you still need proper server-side validation. They discuss browser support (Chrome and Edge have it; Safari and Firefox are catching up) and show a concrete code example for a sync conflict that would be a nightmare to debug manually. By the end, you'll know when to use Web Locks instead of IndexedDB transaction hacks and when to keep your hands off. This is episode 125 of The Web Development Podcast with Fexingo.

#WebLocksAPI #JavaScript #RaceConditions #Concurrency #ServiceWorkers #IndexedDB #AsyncProgramming #WebAPIs #BrowserAPIs #Frontend #Backend #WebDev #Technology #FexingoBusiness #BusinessPodcast #WebDevelopmentPodcast #LucasAndLuna #Fexingo

Keep every episode free: buymeacoffee.com/fexingo

In this episode of The Web Development Podcast, Lucas and Luna dive into the AbortController API—a built-in browser feature that lets you cancel fetch requests, event listeners, and even async iterators. They explore a real case study: a news site that used AbortController to stop stale API calls when users rapidly filter articles, reducing server load by 40 percent. The hosts walk through the signal pattern, how it works with fetch and addEventListener, and why passing the same AbortSignal to multiple async operations prevents race conditions. They also touch on the newer AbortSignal.timeout() static method. If you've ever struggled with dangling requests or memory leaks from unremoved listeners, this episode gives you a clean, native solution. No libraries, no hacks—just the platform doing its job.

#AbortController #JavaScript #AsyncJavaScript #FetchAPI #WebPerformance #AbortSignal #CancelAsync #RaceConditions #MemoryLeaks #Frontend #Backend #WebDev #BrowserAPIs #WebDevelopmentPodcast #Technology #FexingoBusiness #BusinessPodcast #ModernWebStack

Keep every episode free: buymeacoffee.com/fexingo

Episode 123 of The Web Development Podcast dives into how CSS nesting changes real-world stylesheet architecture. Lucas and Luna break down a concrete before-and-after from a production dashboard at a mid-sized SaaS company, discussing file size reductions, selector readability gains, and why some teams are holding back. They also cover the gotchas: specificity changes, tooling gotchas, and when nesting makes things worse. No theory—just code you can apply today. Plus, a quick note on how listener support keeps the show ad-free.

#CSSNesting #WebDevelopment #Frontend #Stylesheets #SassMigration #CSSSyntax #DeveloperExperience #CodeQuality #SaaSDashboard #Refactoring #Specificity #Preprocessors #CSSWG #BrowserSupport #Podcast #Technology #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

In this episode of The Web Development Podcast, Lucas and Luna dive into the CSS color-mix() function, a native way to blend colors directly in the stylesheet. They explore how it simplifies theming, creates dynamic palettes without JavaScript, and reduces the need for pre-processor mixins like Sass's mix(). Through concrete examples like adjusting brand colors for dark mode and generating hover states, they show how color-mix() makes color manipulation more maintainable and performant. Lucas explains the interpolation color spaces—sRGB versus OKLCH—and why OKLCH often produces more natural gradients. Luna points out the accessibility benefit of using color-mix() for contrast adjustments. They also discuss browser support as of mid-2026 and how this function fits into the broader trend of moving design logic from JavaScript to CSS. Whether you're building a design system or just tired of hardcoding every shade, this episode gives you a practical tool for smarter color handling.

#CSS #color-mix #WebDevelopment #Frontend #DesignSystems #DarkMode #Theming #OKLCH #sRGB #Accessibility #NoJavaScript #CSSFunctions #ColorPalette #WebPerformance #BrowserSupport #Technology #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo