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

Lucas and Luna explore the new CSS starting-style rule, which finally makes it possible to animate elements from their initial state when they first appear in the DOM. Prior workarounds involved JavaScript hacks or forced reflows. Starting-style lets you define a separate beginning style for the very first transition, enabling clean entry animations for modals, toggles, and dynamic content. The hosts walk through a real example: animating a cart icon in an SPA without flicker. They discuss browser support, gotchas like display none elements, and how this interacts with existing CSS transitions. A practical deep dive for front-end developers tired of battling the browser's default behaviour.

#CSS #StartingStyle #WebDevelopment #Frontend #CSSAnimations #EntryAnimations #Transition #WebPerformance #BrowserInterop #ModernCSS #FexingoWebDev #Technology #CSSAtRules #LucasAndLuna #FexingoBusiness #BusinessPodcast #WebStandards #CSSToday

Keep every episode free: buymeacoffee.com/fexingo

Lucas and Luna dive into CSS cascade layers (@layer), a feature that lets developers control style order without specificity hacks. They contrast the old approach of !important and convoluted selectors against a cleaner layered system. Using a real-world example of styling a third-party date picker, they show how @layer can isolate component styles, reset rules, and framework overrides. They discuss browser support (stable since 2022), the four implicit layers (user-agent, user, author layers, and layered vs. unlayered styles), and how to define layers with @layer and the layer() function. The episode explains why ordering matters: later layers override earlier ones, but within a layer, specificity still applies. They also cover anonymous layers, nesting layers, and the revert-layer keyword. By the end, listeners understand how @layer makes large codebases more maintainable and reduces CSS fragility.

#CSS #CascadeLayers #WebDevelopment #Frontend #CSSLayers #Specificity #@layer #RevertLayer #CSSReset #StyleOverrides #WebDesign #CodeOrganization #MaintainableCSS #CSS2022 #BrowserSupport #Technology #FexingoBusiness #WebDevelopmentPodcast

Keep every episode free: buymeacoffee.com/fexingo

The View Transitions API lets web developers create smooth, animated transitions between pages or views with just a few lines of CSS. In this episode, Lucas explains how the API works under the hood — from the document-ready promise to the pseudo-element tree — and walks through a real example: transitioning from a product listing to a detail page without the standard white flash. Luna asks about browser support, performance costs, and how to handle users who prefer reduced motion. They also discuss the cross-document version coming to multi-page apps. By the end, you'll have a clear mental model for when and how to use this API to improve perceived performance and user experience.

#ViewTransitionsAPI #WebDevelopment #CSS #JavaScript #Animation #Frontend #Performance #WebDev #Fexingo #Technology #WebAPI #BrowserAPIs #SPA #UX #Accessibility #ReducedMotion #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

Web pages with lots of content can feel sluggish to load because the browser renders everything at once, even parts not visible on screen. Enter CSS content-visibility – a property that tells the browser to skip rendering off-screen elements until they're needed. In this episode, Lucas and Luna break down how content-visibility works, how to pair it with contain-intrinsic-size to prevent layout shifts, and share a real-world example (a busy product listing page) where it cut initial render time by over 40 percent. They also discuss browser support, common pitfalls like overscrolling, and why you should add it only to sections with predictable dimensions. If you want your next long-scrolling page to feel instant, this is the property to know.

#CSS #content-visibility #WebPerformance #Frontend #Rendering #LayoutShift #contain-intrinsic-size #BrowserOptimization #WebDevelopment #PerformanceBudget #LazyRendering #IntersectionObserver #FexingoTechnology #WebDevPodcast #Tech #FexingoBusiness #BusinessPodcast #Coding

Keep every episode free: buymeacoffee.com/fexingo

Episode 137 of The Web Development Podcast dives into CSS Container Queries, a feature that lets components respond to their parent container's size rather than the viewport. Lucas and Luna walk through a real dashboard example with reusable chart and table widgets, explaining the `container-type` and `container-name` properties, the `@container` rule, and how this shifts responsive design from page-level to component-level thinking. They also touch on browser support, caveats like scroll containers and containment, and why container queries might reduce reliance on JavaScript-based resize observers in many layouts.

#CSS Container Queries #ComponentBasedDesign #ResponsiveDesign #WebDevelopment #Frontend #CSS #Dashboard #Widgets #ContainerType #ContainerName #AtContainer #CSSContainment #BrowserSupport #ProgressiveEnhancement #NoJavaScript #FexingoBusiness #TechnologyPodcast #WebDevPodcast

Keep every episode free: buymeacoffee.com/fexingo

In this episode of The Web Development Podcast with Fexingo, Lucas and Luna dive deep into the CSS Anchor Positioning API—a game-changing feature that lets you position elements relative to other elements entirely in CSS, without a single line of JavaScript. They walk through a concrete tooltip example using the anchor() function and @position-try rule, explain how it compares to libraries like Popper.js, and discuss browser support as of July 2026 (Chromium stable, Firefox flagged, Safari pending). You'll learn how to set up an anchor with the anchor-name property, handle viewport overflow with fallback positions, and even combine anchor positioning with the Popover API for full-featured dropdowns. They also cover the latest spec updates, including the ability to use anchor() in transforms for animated position changes. If you're tired of maintaining JS event listeners for repositioning, this episode will show you a cleaner, more performant path forward—and how to start using it today with a polyfill.

#CSS #AnchorPositioning #WebDevelopment #CSSAPI #Tooltips #PopoverAPI #NoJavaScript #Performance #CSSPositioning #Frontend #BrowserSupport #Chromium #Firefox #Safari #Polyfill #WebStack #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

Episode 135 explores the CSS individual transform properties: translate, rotate, and scale. These allow you to animate each transform independently, eliminating the need to manage the entire transform string and enabling smoother, more flexible animations. Lucas and Luna discuss concrete use cases like hover effects and load animations, compare browser support (now above 94%), and share performance tips. They also explain why this approach is easier to read and maintain than the traditional transform property. If you've ever struggled with overriding transforms in CSS animations, this episode shows a cleaner path.

#CSS #WebDevelopment #Frontend #Animations #Transform #Translate #Rotate #Scale #CSSProperties #WebDev #FexingoWebDev #TechnologyPodcast #Fexingo #CSSSyntax #BrowserSupport #Performance #HoverEffects #CodingTips

Keep every episode free: buymeacoffee.com/fexingo

In this episode, Lucas and Luna explore the new CSS trigonometric functions — sin(), cos(), and tan() — that shipped in all major browsers by early 2026. They walk through concrete examples: creating circular motion without JavaScript, building a waving flag effect with cos(), and animating a clock hand entirely in CSS. They discuss performance implications, the required @property rule, and how these functions blur the line between CSS and JavaScript. Perfect for front-end developers looking to write fewer JS animation libraries and leverage pure CSS for complex, performant motion.

#CSS #CSSAnimations #TrigonometricFunctions #SinCosTan #WebDevelopment #Frontend #CSS@property #NoJavaScript #CircularMotionCSS #CSSMathFunctions #Performance #Animation #BrowserSupport #Chrome #Firefox #Safari #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

CSS Scroll Snap lets you build silky-smooth horizontal galleries with just two properties and zero JavaScript. In this episode, Lucas and Luna break down scroll-snap-type, scroll-snap-align, scroll-snap-stop, and scroll-padding—the CSS features that retire brittle carousel scripts. They walk through a real product gallery example, discuss browser support (all modern browsers since 2019), and highlight accessibility wins. Perfect for frontend developers tired of hacking scroll listeners. Plus, a practical tip for using proximity vs mandatory snapping. No frameworks, no libraries—just native CSS.

#CSSScrollSnap #WebDevelopment #Frontend #Carousel #JavaScript #WebPerformance #CSSTips #BrowserAPIs #WebStandards #Accessibility #NoJavaScript #CSSProperties #ScrollSnapType #ScrollSnapAlign #TechnologyPodcast #FexingoBusiness #WebDevPodcast #CSSLayout

Keep every episode free: buymeacoffee.com/fexingo

On this episode of The Web Development Podcast, Lucas and Luna dive into the ResizeObserver API and why it's a game-changer for responsive component design. They compare it to the old window-resize event pattern, walk through a concrete example using a dashboard widget that adapts to its container's width, and discuss performance gains and caveats. No more polling or hacky debounce—ResizeObserver gives you pixel-perfect callbacks when an element's size changes. Perfect for frontend developers building modular, adaptive UIs. Also: how listener support keeps the show ad-free.

#ResizeObserver #WebAPI #JavaScript #Frontend #ResponsiveDesign #Performance #BrowserAPI #WebDevelopment #CSS #Layout #WidgetDesign #ComponentBased #DeveloperTools #ModernWeb #Fexingo #FexingoTech #TechPodcast #WebDevPodcast

Keep every episode free: buymeacoffee.com/fexingo