657: David Darnes on Web Components and Design Systems

ShopTalk

33:19

What’s the secret to lasting friendships? How does queer community show up through the ebbs and flows of life? And what’s the REAL story behind the “YMCA” song? In the first episode of Silver Linings, The Old Gays dive into an essential part of queer life: chosen family. They discuss the vital love, support, and sense of belonging that community provides, especially during life's toughest moments. They open up about what “queer” means to them, how chosen family has impacted their lives, and how to maintain close bonds over time–including their love for each other! “We’ve come a long way, baby.” Family isn’t just what you’re born with; it’s the people who show up, shape you, and stick around. See omnystudio.com/listener for privacy information.…

about a year ago 1:04:51

MP3•Episode home

Show Description

David Darnes joins us to talk about his work on the Nord design system, writing web components, working with embeds and web components, thoughts on building a progress bar or notification component, keeping design systems and design tools in sync, and tricks for components and variables.

Listen on Website →

Guests

David Darnes

Guest's Main URL • Guest's Social

Designer, Front-end Developer & Writer.

657: David Darnes on Web Components and Design Systems

ShopTalk

794 subscribers

published about a year ago

MP3•Episode home

Show Description

Listen on Website →

Guests

David Darnes

Guest's Main URL • Guest's Social

Designer, Front-end Developer & Writer.

All episodes

ShopTalk

1
666: What Are the Evils of the Web Platform? 1:02:12

1 day ago1:02:12

1:02:12

Show Description How it all comes back to the why column, dark patterns, privacy and tracking, getting emails forever from one purchase, how to be bold with communication while still being respectful, HTMHell, CSS mistakes, are we anti-JSON, and the state of FitVid in 2025. Listen on Website → Links Markup from hell - HTMHell Incomplete List of Mistakes in the Design of CSS [CSS Working Group Wiki] JSON Editing Douglas Crockford on JSON Fluid Video Plugin Sponsors…

ShopTalk

1
665: JavaScript Educator and Twitch Streamer Mat Marquis 1:01:18

9 days ago1:01:18

1:01:18

Show Description Fresh off his Megaman Streamathon, Mat Marquis joins us to talk about becoming a professional Twitch streamer, creating a JavaScript course, his thoughts on the design and content of said course, a brief moment on Linux in 2025, and attempts to make the web weird and fun again. Listen on Website → Guests Mat Marquis Guest's Main URL • Guest's Social My goal is to ensure that your content can reach any user, in any browsing context—regardless of the size of their screen, the speed of their internet connection, the age of their device, or the combination of browsers and assistive technologies they use to experience the web. Links I’m Mat. I make websites. Wilto (Mat Marquis) · GitHub Mat “Wilto” Marquis (@Wilto@front-end.social) - Front-End Social Mat “Wilto” Marquis (@wil.to) — Bluesky WiltoStreams - Live Streaming JavaScript for Web Designers Learn JavaScript CodeMirror Text Editor JavaScript Playground JavaScript for Everyone Premium Courses Paul Irish Profile Robin Sloan Framework Laptop 16 DIY Johnny Mnemonic Johnny Mnemonic Trailer #1 Sponsors…

ShopTalk

1
664: Figma Sites, CSS Carousels, and Internship Prep 1:05:29

16 days ago1:05:29

1:05:29

Show Description How much would you pay for new users, initial thoughts on Figma's announcements, CSS carousel follow up, favicon easter eggs, how do you prepare for an internship, and why aren't more developers using logical properties? Listen on Website → Links Windsurf (formerly Codeium) - The most powerful AI Code Editor Figma Sites Figma Make Figjam Are CSS Carousels Accessible? Windsurf (formerly Codeium) - The most powerful AI Code Editor Figma Sites: Design, Prototype & Publish Your Next Website Creative Design Tools Collaborative Whiteboard Presentation Creation AI-Powered Design Tools Learn to Code Faster Introducing Web Awesome Prioritization Advocacy axe Accessibility Tools Todoist Task Management Sponsors…

ShopTalk

1
663: HBD Dave, Silly Web Fun, Color-Mix Tips 1:00:32

23 days ago1:00:32

1:00:32

Show Description Do we sound drunk on Shorts? What speed do you listen to your podcasts at? Happy Birthday to Dave, Roblox scams, having silly fun on the web, Crashlands 2 released, a Balatro moment, non-standard browser use testing, and color-mix follow up. Listen on Website → Links The Adventure Zone | Maximum Fun Don't let your voice be flattened by the über theme - daverupert.com Crashlands 2 Adam Coster: Crashlands 2 Balatro University jQuery Reunion Sponsors Webflow x GSAP Community Challenge GSAP and ALL the plugins are now FREE for everyone thanks to Webflow (even for commercial projects)! The SplitText plugin has had a complete rewrite (half the size, accessible, and smarter text splitting). To celebrate: a community challenge all through May. Make something fun and win merch! One prompt each week featuring a different (previously paid) plugin.…

ShopTalk

1
662: Alternative Browsers, Discord vs Circle, and AI in the Browser 1:03:00

30 days ago1:03:00

1:03:00

Show Description We're talking browsers and discussing alternative options like Vivaldi and Brave, the implications of Chrome's potential sale to OpenAI, the impact of AI on browser functionality, Discord vs Circle, and building with Hotwire. Listen on Website → Links Newfangled Browser Alternatives – Frontend Masters Blog Zen Browser Horse Browser Vivaldi Browser | Powerful, Personal and Private web browser Opera GX | Gaming Browser | Opera Thorium Browser Mullvad Browser Fast and Private Web Browser DuckDuckGo Microsoft Edge Download OpenAI Chrome Acquisition Mozilla on U.S. v. Google HTML5 CSS3 Support Opera Air | Mindful Browser Opera Mini Download Hotwire Drawer Component CodePen Circle Discord Zulip Netlify Support Forums Retro Photo app Media Diet – Chris Coyier Sponsors…

ShopTalk

1
661: Working Vacations, Ripping Out JavaScript, and Non-US Cloud Service Options 58:56

5 weeks ago58:56

58:56

Show Description What are the non-US cloud services options, falling off the blogging train and trying to get back on, working on vacation, Chris recaps the Alaskan Folk Festival experience, how often do you go back and clean out JavaScript, and the idea of gilding just one lily on a new project. Listen on Website → Links European Alternatives A lack of frequency increases the pressure to deliver quality Trap (2024) Reviews Polyfilling Concepts ex-Googler · April 10, 2025 Gild Just One Lily Blog Questions Challenge CodePen Development CSS clip-path maker Sponsors…

ShopTalk

1
660: Teaching CSS, Conferences, and Masonry Updates 58:48

6 weeks ago58:48

58:48

Show Description Follow up on thoughts about teaching CSS from scratch, questions about conferences to attend as well as a way to kickstart a conference idea, some Balatro thoughts, and our thoughts on the recent Grid vs Masonry debate. Listen on Website → Links The Homebrewery - NaturalCrit SmashingConf in-person Conferences 2025 — Friendly, inclusive & fun events for web designers and developers. - SmashingConf New York, Freiburg, Antwerp and Online Web Design Event State of the Browser 13 Bring live to life Sponsors…

ShopTalk

1
659: CSS Carousel Configurator Demos with Adam Argyle 1:10:29

7 weeks ago1:10:29

1:10:29

Show Description Adam Argyle joins us to chat about new CSS features that are demo'd in a carousel configurator - a builder-like experience to help visualize the capabilities of a CSS only Carousel: buttons, markers, paging and inertness. Listen on Website → Guests Adam Argyle Guest's Main URL • Guest's Social CSS at Google. Links Chrome Canary Features Demo Space CSS Carousel Configurator Black Emperor Sponsors…

ShopTalk

1
658: Andy Bell on Working with Clients, Writing, and Building Courses for Web Builders 1:02:22

8 weeks ago1:02:22

1:02:22

Show Description We're joined by Andy Bell, the founder of Set Studio. They discuss the evolution of web design, the importance of client relationships, and the innovative approaches taken at Set Studio and Piccalilli. The conversation covers the shift from traditional design methods to a more browser-centric approach, the challenges of client work, and the significance of documentation in maintaining project integrity. Andy shares insights on creating customizable design systems and the necessity of having a decision-making framework in client interactions. Listen on Website → Guests Andy Bell Guest's Main URL • Guest's Social Designer, front-end developer and the founder of Set Studio and Piccalilli. Links Pen.new mdn.io Set.Studio Front-End Development Skills Obsidian Thinking Connected Workspace The Telepathy Tapes Complete CSS If it works, it's right - Piccalilli Carousels with CSS Sponsors…

ShopTalk

1
657: David Darnes on Web Components and Design Systems 1:04:51

9 weeks ago1:04:51

1:04:51

Show Description David Darnes joins us to talk about his work on the Nord design system, writing web components, working with embeds and web components, thoughts on building a progress bar or notification component, keeping design systems and design tools in sync, and tricks for components and variables. Listen on Website → Guests David Darnes Guest's Main URL • Guest's Social Designer, Front-end Developer & Writer. Links Nord Health Ariel Salminen Design Systems WTF Awesome Standalones DesignSystems.wtf Sponsors Jelly Keeping up with customer emails shouldn’t feel like flying a 747. Jelly’s team email inbox makes it easy and affordable: one flat price per team, not per user. No surprise bills—just a simple shared inbox that helps your team respond faster, stay organized, and keep customer conversations flowing smoothly. Try Jelly now for free and get 15% off!…

ShopTalk

1
656: Onboarding Woes, Coloring Links, and AI Slop Theories 55:21

10 weeks ago55:21

55:21

Show Description Onboarding users is a lot more difficult than you might think it is, how should links be coloured or styled, keeping web software up to date, why does some AI slop get created in the first place, getting context for why things happened or decisions were made, and our first bullet point dev career story (Steve's version). Listen on Website → Links Subscribe to us on YouTube! Riverside: HD Podcast & Video Software | Free Recording & Editing Automate without limits CodePen PRO Link Color Idea Ludacris Freestyle Front Tag, You're It Watch the video version of this episode Sponsors…

ShopTalk

1
655: Conspiracy Theory Theories, View Transitions vs CSS Animations, and Autocomplete 45:50

11 weeks ago45:50

45:50

Show Description It's a speed run meeting edition episode and we're talking conspiracy theories, getting hypnotized, disinformation on TikTok vs the news, view transitions vs CSS animations vs the web animation API, follow ups on font-weight and attire, and classic autocomplete vs AI autocomplete. Listen on Website → Links SubwayTakes (@subwaytakes) | TikTok Motion - A modern animation library for JavaScript and React font-weight: 300 considered harmful | CSS-Tricks Sponsors…

ShopTalk

1
654: UI + State, AI Missing Context But Adds Browsers, and Scalability on the Web 56:34

12 weeks ago56:34

56:34

Show Description UI and state struggles, AI missing important sand context, should we look forward to AI browsers, how bad is the mobile web in 2025, what does scalability with websites actually mean, and is there a role for someone as a project manager with tech insight? Listen on Website → Links Dribbble - Discover the World’s Top Designers & Creative Professionals UI = f(statesⁿ) - daverupert.com Welcome to Steam Thoughts on embedding alternative text metadata into images – Eric Bailey The Browser Company | Building Arc Dia from The Browser Company Perplexity teases a web browser called Comet | TechCrunch Introducing Operator | OpenAI Daring Fireball: One Bit of Anecdata That the Web Is Languishing Vis-à-Vis Native Mobile Apps Sill | Top news shared by the people you trust Sponsors…

ShopTalk

1
653: Interop 2025, Attributes, and Black Boxes of AI 58:34

13 weeks ago58:34

58:34

Show Description We're looking at the Interop 2025 announcements, Dave is hating on (and talking about) attributes, debating better ways to handle color inputs, following up on the implications of AI that is shaped by politics, and Dave mouthblogs the secret black boxes of AI. Listen on Website → Links interop/2025/README CSS Day 2025, 5th & 6th of June, Amsterdam Interop 2025 | Igalia Miriam’s post Robin Sloan’s post Michelle Barker’s reply Baldur’s post Robin’s reply Baldur’s reply Jeremy Keith’s reply TechCrunch article OpenAI Model Spec Vale post Search Engine podcast GitHub link Sponsors…

ShopTalk

1
652: Talking to Bots, Building Browser Games, and Political LLMs 1:02:53

14 weeks ago1:02:53