ShopTalk

By Chris Coyier & Dave RupertTechnology

ShopTalk episodes

October 19737: CSS alpha(), SVG with linked-parameters, and Arguing with Humans
Show Description
On this episode we're chatting about how to make modern tooling more collaborative and human-friendly, CSS alpha() and color-mix() features, Chris quizzes Dave on SVG features, voting for interop, CodePen + AI tools, and how to detect when elements overlap with CSS.
Listen on Website
Links
Glove80 Keyboards — MoErgo
Mat Marquis
Do we really need alpha()?
Detect When Elements Overlap with CSS
2027 Web Platform Feature Ranking
Introducing Delta — Zed
Agent Collaboration Environment (ACE) for Multiplayer AI Coding — GitHub Issue #123
Matt Pocock’s Skills for Real Engineers
SponsorsAI and Design SystemsAI delivers speed, but can make a huge mess. Design systems encode your org's standards of quality, but can be difficult to wield. Together, AI & Design Systems are a powerful combination to deliver quality, speed, and scale.
Join industry experts TJ Pitre (Product Architect for AI & Design Systems at Figma), Brad Frost (creator of Atomic Design), and Ian Frost (veteran design systems developer) to learn AI & Design Systems core concepts, practical techniques to help your team deliver great digital products at scale.
1 hr 5 min
October 12736: Building Design Systems Using AI with TJ Pitre
Show Description
TJ Pitre joins us to talk AI in design systems, building and maintaining component libraries, the evolution of modular CSS and component workflows, connecting Figma and code, keeping components in sync across tools and teams, human review in AI-assisted workflows, Storybook, MCP tools, evals, and decision models like Jev for choosing components.
Listen on Website
Watch on YouTube
GuestsTJ Pitre
Guest's Main URL • Guest's Social
Product Architect for AI and Design Systems at Figma.
Founder of Southleft.
Links
AI & Design Systems Course with Brad Frost, TJ Pitre, and Ian Frost
TJ Pitre on GitHub
TJ Pitre on LinkedIn
AI + Design Systems — Southleft
SponsorsAI & Design SystemsAI delivers speed, but can make a huge mess. Design systems encode your org's standards of quality, but can be difficult to wield. Together, AI & Design Systems are a powerful combination to deliver quality, speed, and scale.
Join industry experts TJ Pitre (Product Architect for AI & Design Systems at Figma), Brad Frost (creator of Atomic Design), and Ian Frost (veteran design systems developer) to learn AI & Design Systems core concepts, practical techniques to help your team deliver great digital products at scale.
1 hr 10 min
October 05735: Design System Docs, CodePen’s API, and Bucket Filling Conversations
Show Description
Dave and Chris explore the evolving landscape of design systems, CodePen's new API features, what happens when an app moves your cheese and how to respond, and Regretful API's.
Listen on Website
Watch on YouTube
Links
Bear — Markdown Notes
Design System Doc Spec 0.21.2
437: The Cheese. It Has Been Moved. — CodePen
CodePen PRO
TypeSafe AI
Tupo — A daily sudoku-style logic puzzle with a twist
SponsorsAI and Design SystemsAI delivers speed, but can make a huge mess. Design systems encode your org's standards of quality, but can be difficult to wield. Together, AI & Design Systems are a powerful combination to deliver quality, speed, and scale.
Join industry experts TJ Pitre (Product Architect for AI & Design Systems at Figma), Brad Frost (creator of Atomic Design), and Ian Frost (veteran design systems developer) to learn AI & Design Systems core concepts, practical techniques to help your team deliver great digital products at scale.
57 min
September 28734: Web Performance with Ben Schwarz
Show Description
Ben Schwarz stops by to discuss the state of web performance, using his research on airline websites as a case study for practical insights on improving website speed and user experience.
Listen on Website
GuestsBen Schwarz
Guest's Main URL • Guest's Social
CEO at Calibre Analytics
Links
ShopTalk Archives 2013
068: With Ben Schwarz – ShopTalk
Ben Schwarz — Founder & CEO at Calibre
Calibre: Web Performance Monitoring for Every Team
It's official: Airline websites are slow, but they don't have to be | Calibre
World Airline and Airport Ratings
58 min
September 21733: Treadmills, Bass Guitars, and Testing Web Components
Show Description
We're talking treadmill and musical gear, software maintenance, dependency management, technical debt, testing web components, and CSS-Tricks hot drama.
Listen on Website
Links
Underdesk Treadmill – Chris Coyier
Sarah Drasner's Site
Maggie Appleton
Acoustic Bass Guitars - 4 string & 6 string | Taylor Guitars
CSS-Tricks - Learning for front-end designers and developers
Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend | Master.dev
@web/test-runner - npm
Node.js Test Runner
Fast and reliable end-to-end testing for modern web apps | Playwright
SponsorsSlopTalk ShowGet your AI sloptalk at 50% off your first purchase of 5,000 tokens.
Use coupon code DAVID BUSHELL'S GOLD FISH for your first order and tell 'em Chris and Dave sent ya.
59 min
September 14732: Thomas Steiner on New Cross-Origin Storage APIs
Show Description
We're joined by Thomas Steiner from Google to discuss his proposal for cross-origin storage, a new web API designed to bring back safe, cross-site resource sharing. We explore why the old shared-CDN caching model collapsed due to privacy and fingerprinting risks, and how this could solve those issues while avoiding those same pitfalls.
Listen on Website
Watch on YouTube
GuestsThomas Steiner
Guest's Main URL • Guest's Social
Developer Relations Engineer at Google, focused on the Web and Project Fugu.
Links
David Bushell
daverupert.com
633: Thomas Steiner on AI in Chrome and the Web
Pervasive Resources
Intent to ship: Cache sharing for extremely-pervasive resources
1 hr 7 min
September 07731: Terminal UX, Running Multiple Services, Don’t Settle for an App
Show Description
We want your positive tech support stories! Topics this week include wrangling DNS/DKIM/DMARC for a friend's newsletter, comparing terminal tools like TMUX and Herdr, and juggling Rails, Node, and AI agent processes, and figuring out which tooling you like best.
Listen on Website
Watch on YouTube
Links
JeffBridges.com
tmux — The Terminal Multiplexer for Developers | tmux.app
Herdr: the runtime coding agents run on
GitHub Copilot app
Solid 2.0 RC: The Big \ | SolidJS
Nobody Argued For Your Stack - DEV Community
cmux - The terminal built for multitasking
bencodezen
i-have-adhd skill
Ghostty
Coda is now Nova
Zed
Introducing Delta — Zed's Blog
Delta | A Multiplayer Environment for Coding with Agents
Helix
59 min
August 31730: A/B Testing with Charts, Music Recommendations, & Web Permissions
Show Description
The realities of A/B testing, the future of specialized hosting in the AI era, microphone and camera permissions on the web, tricks for working with HTML email, and hyping Midnight Vinyl Club and How Many Dudes?
Listen on Website
Watch on YouTube
Links
8 New CSS, JS and HTML Features You Should Know - Syntax #1033
Mermaid | Diagramming and charting tool
What Is AI Coding Doing To Us? - YouTube
Midnight Vinyl Club
MJML - The Responsive Email Framework
AT Protocol
How Many Dudes? | Download and Play!
1 hr 1 min
August 24729: After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly
Show Description
Dave and Chris try to get their LUTS in a row, figure out which app to use to edit and publish video quickly, Dave's new syntax highlighter microlighter, could web MCP be a good thing to help agents use CodePen better, and saying no is as important as what you do ship.
Listen on Website
Watch on YouTube
Links
Introducing Microlighter - daverupert.com
MicroLighter - A zero-dep syntax highlighter
TextMate: Text editor for macOS
Dark mode toggles: two states are enough • Lea Verou
The Case for Tri-State Dark Mode Toggles – Bram.us
59 min
August 17728: BIMI, Good Favicon Practice, and CSS @Layer Exploration
Show Description
Having type two fun, email branding with BIMI, accessibility details in icons and favicons, using AI as a coding and maintenance partner, CSS @layer property, design systems, and the economics of fast AI hardware.
Listen on Website
Watch on YouTube
Links
How and Why to Implement BIMI Selectors - BIMI Group
You kinda want an orange favicon. – Chris Coyier
Thinking Horizontally in CSS @layer
AMD snaps up Toronto chip startup Taalas | Financial Post
1 hr 2 min