CSS masonry layout has been a long-awaited feature for web developers, and in this episode, Lucas and Luna explain why it's now a reality. They break down how the new masonry layout module in CSS Grid simplifies complex, Pinterest-style layouts without JavaScript libraries. The hosts walk through a concrete example: building a responsive gallery with just a few lines of CSS, and discuss the trade-offs compared to JavaScript-based solutions like Masonry.js. They also touch on browser support as of August 2026, the collaborative process behind the spec, and what this means for performance and accessibility. Whether you're a frontend developer tired of hacky grid hacks or a curious designer wanting cleaner code, this episode gives you a clear picture of why native masonry is a game-changer.

#CSSMasonry #MasonryLayout #CSSGrid #WebDevelopment #Frontend #CSSFeatures #ResponsiveDesign #WebPerformance #JavaScript #NoLibrary #BrowserSupport #WebStandards #CSSSpec #Accessibility #Technology #FexingoBusiness #BusinessPodcast #WebDev

Keep every episode free: buymeacoffee.com/fexingo

In this episode, Lucas and Luna dive into the CSS Color 4 specification, focusing on the new color functions like oklch(), oklab(), and color-mix(). They explain how these modern functions replace the guesswork of hex and rgb with intuitive perceptually uniform color spaces, making it easier to create accessible, consistent design systems. The discussion covers real-world examples, such as using oklch() to define a brand palette that scales harmoniously and leveraging color-mix() to generate hover states and theme variants without preprocessor hacks. They also touch on browser support as of August 2026, noting that all major browsers now ship these features. By the end, listeners will understand why CSS Color 4 is a game-changer for web developers and how to start using these functions today. The episode is packed with practical tips, like how to convert existing hex values to oklch() using dev tools, and concludes with a look at the future of color in CSS, including relative color syntax. Whether you're a frontend developer or a design system enthusiast, this episode offers concrete tools to modernize your styling workflow.

#CSSColor4 #Oklch #ColorMix #DesignTokens #WebDevelopment #Frontend #CSSFunctions #PerceptualUniformity #Accessibility #DesignSystems #BrowserSupport #ModernCSS #DevTools #ColorSpaces #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 Typed Object Model—the modern API that finally lets developers manipulate styles as typed values instead of string-hacking el.style.left. They walk through a concrete example: animating an element's transform from 'translateX(50px)' in JavaScript, showing how CSSTransformValue and CSS.px(50) remove the gymnastics of parseFloat and regex. They compare it to the old string approach, explain how it unlocks performant animations by avoiding style recalculations, and touch on browser support as of August 2026. Lucas brings the specifics—CSSStyleValue, CSSUnitValue, and the .attributeStyleMap property—while Luna challenges him on real-world adoption and when to bother migrating legacy code. The episode closes with a practical note on progressive enhancement: use the API where supported, fall back to the old way elsewhere. If you've ever fought with computed styles or built a slider and cursed the string parsing, this one's for you.

#CssTypedObjectModel #WebDevelopment #JavaScript #CssInJs #BrowserApi #Frontend #WebPerformance #CssStyleValue #CssTransform #Animation #WebStandards #CssUnitValue #AttributeStyleMap #ProgressiveEnhancement #WebDevPodcast #Technology #FexingoBusiness #BusinessPodcast

Keep every episode free: buymeacoffee.com/fexingo

Lucas and Luna explore CSS subgrid, the feature that finally lets nested grid items align with their parent grid. They walk through a real-world pricing-card layout where a subgrid card footer aligns with the tallest column, explain how subgrid differs from a regular grid inside a grid item, and cover browser support as of August 2026. They also touch on when to reach for subgrid versus simpler tools like flexbox, and share practical tips for avoiding common pitfalls. This episode is perfect for front-end developers tired of wrestling with nested grid alignment hacks.

#CSSSubgrid #CSSGrid #WebDevelopment #Frontend #CSSLayout #ResponsiveDesign #BrowserSupport #WebDev #FexingoBusiness #BusinessPodcast #TechPodcast #CSS #HTML #UX #WebPerformance #Coding #ModernWeb #Alignment

Keep every episode free: buymeacoffee.com/fexingo

In this episode of The Web Development Podcast, Lucas and Luna dive into the View Transitions API, a powerful tool that lets developers create smooth, cinematic page transitions without JavaScript. They explore how it works under the hood, why it's built for performance, and how you can start using it today. With practical examples and a look at browser support as of August 2026, they show how this API can replace the hacky animations that were once the norm. Plus, they share a simple way to support the show if you're finding these episodes useful.

#ViewTransitions #WebDevelopment #CSS #JavaScript #Frontend #BrowserAPI #PageTransitions #WebPerformance #UX #Animation #ModernWeb #TechPodcast #FexingoBusiness #BusinessPodcast #LucasAndLuna #WebDevTips #CSSAnimations #APIs

Keep every episode free: buymeacoffee.com/fexingo

In this episode of The Web Development Podcast, Lucas and Luna dive into the CSS Scoping specification — a native way to encapsulate styles without the baggage of Shadow DOM. They explore how @scope at-rules are changing the game for component styling, solving the age-old problem of style leakage. With real-world examples like styling a blog post's prose or a widget inside a legacy app, they show how scoped styles are more predictable and maintainable. They also discuss the trade-offs versus Shadow DOM and the current browser support as of August 2026. If you've ever cursed a global style that broke your component, this episode is for you. Tune in to learn how CSS scoping can simplify your codebase and why it might just replace your need for styled-components or CSS modules.

#CSSScoping #WebDevelopment #Frontend #CSS #ShadowDOM #ComponentStyling #StyleEncapsulation #WebStandards #BrowserAPIs #ModernWeb #TechPodcast #FexingoBusiness #BusinessPodcast #WebDev #CSSAtRule #StyleIsolation #NoMoreHacks #CleanCode

Keep every episode free: buymeacoffee.com/fexingo

In episode 144 of The Web Development Podcast, Lucas and Luna dive into the CSS @property rule, a feature that transforms custom properties from simple placeholders into typed, animatable, and inheritable building blocks. They explain how @property gives CSS variables superpowers by defining syntax, initial values, and inheritance, and why this matters for smooth animations and design systems. Through concrete examples—like animating a custom property from 0 to 360 degrees for a spinner or using a registered custom property to drive a progress bar—they show how @property eliminates the need for JavaScript hacks and enables richer, more performant UIs. They also discuss browser support as of August 2026, noting that Chrome, Edge, and Safari have embraced it while Firefox still has gaps, and share practical tips for progressive enhancement. Along the way, they touch on how @property can reduce layout thrashing and make animations smoother. The episode closes with a reflection on how such foundation-level CSS features quietly upgrade the entire web stack. Perfect for frontend developers looking to modernize their CSS toolkit and build more dynamic interfaces with less JavaScript.

#CSSProperty #CustomProperties #WebDevelopment #Frontend #CSS #Technology #CascadingStyleSheets #Animations #DesignSystems #BrowserSupport #ProgressiveEnhancement #JavaScript #Performance #WebPerformance #FexingoBusiness #BusinessPodcast #TechPodcast #WebDev

Keep every episode free: buymeacoffee.com/fexingo

In this episode, Lucas and Luna explore the File System Access API, a browser feature that lets web apps read and write files directly from the user's file system, bridging the gap between web and native desktop apps. They break down how it works with a concrete example — building a markdown editor that opens local files, edits them, and saves changes with Ctrl+S — and walk through the security model, including permission prompts and the difference between read and write access. They also cover practical use cases like photo editors, IDEs, and data import tools, plus current browser support and graceful fallbacks. By the end, you'll understand the API's power and its limitations, and why it's reshaping what's possible in the browser.

#FileSystemAccessAPI #WebDevelopment #JavaScript #BrowserAPIs #ProgressiveWebApps #FileHandling #WebStandards #Frontend #TechPodcast #FexingoBusiness #BusinessPodcast #WebDev #NativeWeb #FileIO #Chromium #Security #UserExperience #WebPlatform

Keep every episode free: buymeacoffee.com/fexingo

In this episode, Lucas and Luna dive into the new CSS View Transitions API and, more specifically, the linear() easing function that's transforming how developers animate elements entering and leaving the page. They explore a concrete example with a to-do list app, showing how linear() can create snappy, natural motion without the complexity of JavaScript libraries. The conversation touches on the performance benefits, the math behind the easing curve, and how this fits into the broader trend of CSS taking over animation duties from JavaScript. If you've ever struggled with clunky entrance animations or dreaded writing keyframe code, this episode shows how modern CSS makes it smoother and more declarative. Tune in for a practical look at a subtle but powerful shift in web animation.

#CSS #ViewTransitionsAPI #LinearEasing #WebAnimation #FrontendDevelopment #WebDevelopment #CSSAnimations #Keyframes #Performance #UXDesign #ModernWeb #Technology #FexingoBusiness #BusinessPodcast #LucasAndLuna #WebDevPodcast #Coding #DeveloperTools

Keep every episode free: buymeacoffee.com/fexingo

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