More Syntax - Tasty Web Development Treats episodes
Published 15 Apr 2026
Duration: 00:31:29
Recent CSS/HTML advancements include the CSS Masonry API for dynamic layouts, HTML in Canvas for enhanced accessibility, named container queries for modularity, experimental APIs like CSS Random Number, and challenges in browser support alongside niche design applications.
Wes and Scott talk about the latest CSS and browser features, including the Grid Lines API for masonry layouts, HTML in Canvas, name-only container qu...
The podcast discusses recent updates and experimental features in CSS and HTML that aim to enhance web design flexibility and interactivity. Key highlights include the CSS Masonry API (Grid Lanes), which enables dynamic, Pinterest-style layouts by allowing elements to fill gaps in grids, though its availability remains limited to Safari and experimental in Chrome/Firefox. The HTML in Canvas API introduces the ability to embed HTML elements within <canvas>, preserving accessibility while enabling effects like pixelation or distortion, though it requires manual JavaScript rendering. Additionally, named container queries in CSS allow developers to scope styles to specific elements using container names, offering a more modular alternative to class-based scoping, though browser support is still emerging. These updates reflect a shift toward more integrated, accessible solutions for complex layouts and animations.
The discussion also covers broader implications of these features, such as challenges in browser adoption and documentation for experimental APIs like named container queries. Innovations like the CSS Random Number API, which generates random values for dynamic styling, and pseudo-selectors for search highlights (::search-text, ::current) show potential for creative UI interactions. Furthermore, canvas-based interactivity with DOM elements, akin to Houdinis capabilities, allows pixel-level manipulation while maintaining accessibility. However, limitations in fallback behavior and the need for explicit JavaScript rendering complicate implementation. The podcast emphasizes the importance of long-term, evergreen techniques, such as native CSS scoping and canvas interactivity, over time-bound trends.
Additional topics include sticky positioning improvements in Chrome 148 for both horizontal and vertical directions, multi-column layout fixes with properties like column-wrap, and border-shape APIs for creating custom shapes without SVGs or masks. The Element-Scoped View Transitions API allows granular control over animations for individual components, improving dynamic UI interactions. Challenges persist in areas like lazy loading and search result rehighlighting, where browsers lack native support for maintaining state after content updates. Overall, the session underscores a growing focus on progressive enhancement through modern CSS and JavaScript APIs, alongside the need for developers to explore and adapt to these evolving tools.
13 Apr 2026 995: Next.js Vendor Lock-in No More
Next.js Adapters Platform enables scalable, cross-provider hosting via standardized APIs, leverages TurboPack for faster builds, optimizes performance with caching and rendering techniques, and aims to reduce vendor lock-in through open adapters and improved compatibility.
8 Apr 2026 994: AI Sucks At CSS
AI in web development faces challenges like generating inefficient CSS, struggling with modern design systems, and producing homogenized or aesthetically poor outputs, requiring human oversight for nuanced creativity, debugging, and balancing AI tools with technical expertise to address performance, security, and design quality gaps.
6 Apr 2026 993: Its Been A Hell Of Week
Security vulnerabilities in AI and software infrastructure include exposed source maps, malicious npm packages, permission flaws, caching issues, and debates over AI model exposure, alongside recommendations for secure practices and performance optimization.
1 Apr 2026 992: Migrating Legacy Code Just Got Easier
Migrating a monolithic course platform from Express.js to a modern framework involves overcoming challenges like maintaining feature parity, rewriting routes, and replacing legacy components with JSX/TSX, while employing strategies such as incremental changes, async storage, custom middleware, and rigorous testing, alongside exploring AI tools and discussing related topics like Java Spring migrations and display management.
30 Mar 2026 991: Vites bet on Cloudflare (VOID Framework)
Void is a full-stack JavaScript framework integrated with Cloudflare, offering databases, authentication, and frontend flexibility with React/Svelte/Solid, but faces vendor lock-in concerns, database portability challenges, and trade-offs between Cloudflare ecosystem convenience and platform flexibility.