033.2 | Design meets Development: Bridge the Gap with Stefan Bauer
Listen to episode
About this episode
NOTE: This replaces episode 33, which had volume issues with our guest, Stefan Bauer.
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 >
🔗 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
🔗 State of CSS 2026 Survey
🎁 Picks
=================================================
Andrew's Pick(s)
🔗 Scott Galloway: AI Wasn't Built For You. The Rich Don't Need You Anymore!
Julie's Pick(s):
🔗 State of AI 2026
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
=================================================
🎙️ PODCAST
🔗 https://codedeploygo.live, LinkedIn, Bluesky
🎙️ HOSTS
Julie Turner
Andrew Connell: LinkedIn, YouTube, Bluesky, Newsletter
🎙️ GUEST
Stefan Bauer: LinkedIn, GitHub, Bluesky
SPONSORS
Sympraxis (by Julie Turner) 🔗 Ask Sympraxis 🔗 YouTube
Voitanos (by Andrew Connell) 🔗 LinkedIn 🔗 Bluesky
Music Credit: Ken Bagley
More AI podcast episodes
Browse all →Want to find AI jobs?
Join thousands of AI professionals finding their next opportunity