Subscribe
Share
Share
Embed
In this episode, Andrew and Julie are joined by their frequent collaborator Stefan Bauer, a Vienna-based web designer with deep roots in front-end development, to dig into a topic that's easy to overlook: how much you can accomplish with modern HTML and CSS before you ever reach for JavaScript. Stefan walks through the origins of the H2O open source design system, a pure HTML/CSS implementation of Microsoft Fluent UI built on atomic design principles, and explains why designing directly in the browser, rather than through tools like Figma, produces a more accurate and accessible result. Along the way, the conversation covers CSS typed custom properties, container queries, native form validation with the :valid and :invalid pseudo-classes, the details and summary elements as a zero-JavaScript accordion and lazy-loading pattern, and the real-world performance tradeoffs between box-shadow and CSS filter: drop-shadow().
The episode also gets into the collaborative workflow that Stefan and Julie have developed around Pattern Lab, atomic design, and SharePoint Framework (SPFx), showing how a clean separation of concerns between the design system and the application layer lets each specialist work in their swim lane without stepping on the other. Stefan shares how he and Julie use handlebars templates and JSON data in Pattern Lab to prototype fully interactive UIs with real data before a single line of framework code is written, and how that style guide drops in as a Git submodule directly into an SPFx workspace. The hosts also announce a summer hiatus through September before wrapping with picks, including an interactive map of Microsoft's Copilot naming sprawl, a Scott Galloway interview on AI and jobs, and results from a recent AI developer sentiment survey.
π LINKS
=================================================
From the episode intro & banter:
π Andrej Karpathy's LLM Wiki
π Andrej Karpathy Just 10x'd Everyone's Claude Code
News / Feature:
π Atomic Design by Brad Frost
π Create atomic design systems with Pattern Lab
π Approachable Open Source
π Fluent UI
π hTWOo by N8D
π Performance-Optimized Video Embeds with Zero JavaScript
π Box Shadow vs. Filter: drop-shadow()
π MDN: Client-side form validation
π Why input type=βnumberβ is Broken for Decimals
Stefan's Picks:
π How To Design For Trust and Confidence In AI Products
π How many products does Microsoft have named 'Copilot'? I mapped every one
π CHAPTERS
=================================================
- (06:20) - Meet Stefan Bauer
- (10:49) - DESIGN, HTML & CSS - BRIDGING THE GAP BETWEEN DESIGN AND DEVELOPMENT
- (16:13) - H2O and the Atomic Design Philosophy
- (19:20) - Responsive Design and CSS Container Queries
- (24:27) - Modern CSS - Types, Custom Properties, and No-JavaScript Tricks
- (35:09) - Native HTML Accessibility with details and summary
- (40:17) - CSS Form Validation Without JavaScript
- (46:01) - The Design-to-Development Workflow with Pattern Lab
- (57:37) - AC'S, JULIE'S & STEFAN'S PICKS
=================================================
SPONSORS
Sympraxis (by Julie Turner) π Ask Sympraxis π YouTube
Voitanos (by Andrew Connell) π LinkedIn π Bluesky
Music Credit: Ken Bagley
Creators and Guests
What is Code. Deploy. Go Live.?
Welcome to the Code. Deploy. Go Live. podcast! By Microsoft MVPs Andrew Connell and Julie Turner, our mission is to deliver prescriptive guidance on Microsoft 365 and Azure for Full-Stack Developers. Get the latest news, discussions, and interviews on topics ranging from Microsoft 365, Microsoft Azure, and related topics. For developers, by developers!