{"type":"rich","version":"1.0","provider_name":"Transistor","provider_url":"https://transistor.fm","author_name":"Code. Deploy. Go Live.","title":"033 | Design meets Development: Bridge the Gap with Stefan Bauer","html":"","width":"100%","height":180,"duration":4016,"description":"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 CodeNews / Feature:πŸ”— Atomic Design by Brad FrostπŸ”—...","thumbnail_url":"https://img.transistorcdn.com/_XuaphDXfaKgmRaK2-ers1gJ-VZEFmPPdn19bLk1Zwg/rs:fill:0:0:1/w:400/h:400/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS85Y2Zh/NmFlMzliYzY5NGFl/YTA5YmNiMTUwNzdi/ZDBkNS5wbmc.webp","thumbnail_width":300,"thumbnail_height":300}