Code. Deploy. Go Live.

033.2 | Design meets Development: Bridge the Gap with Stefan Bauer


Listen Later

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 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

πŸ”— 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
    View all episodesView all episodes
    Download on the App Store

    Code. Deploy. Go Live.By Andrew Connell & Julie Turner

    • 5
    • 5
    • 5
    • 5
    • 5

    5

    7 ratings


    More shows like Code. Deploy. Go Live.

    View all
    Freakonomics Radio by Freakonomics Radio + Stitcher

    Freakonomics Radio

    32,110 Listeners

    Planet Money by NPR

    Planet Money

    30,736 Listeners

    Interesting Times with Ross Douthat by New York Times Opinion

    Interesting Times with Ross Douthat

    7,226 Listeners

    Hard Fork by The New York Times

    Hard Fork

    5,544 Listeners