
739: How to Build a Great Puzzle Game with Josh CollinsworthShow Description Triple (or maybe even quadruple?) threat Josh Collinsworth is back on the show to talk about his new game, Tupo. They cover how the puzzles are generated and kept fair, why the usual Sudoku pencil marks don't help, and what Josh's player data shows about hints and checks. They also get into the tech stack, why Josh skipped the app stores, and how daily puzzle games took off after Wordle. Listen on Website Watch on YouTube Guests Josh Collinsworth Guest's Main URL • Guest's Social A frontend developer and graphic designer who works across engineering, design, and messaging. Links * Josh Collinsworth * Tupo · A daily sudoku-style logic puzzle with a twist * Clues By Sam * Balatro: Deck-Building Roguelite * Wordle — The New York Times * Cracking The Cryptic - YouTube * Svelte • Web development for the rest of us * Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. * Push your ideas to the web | Netlify * PocketBase - Open Source backend in 1 file * Quina - Menu * Hondo - a word game in 100 words or less Sponsors AI and Design Systems AI 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.
738: The Trouble with Tests and Bugs, Interop Voting, and AI SkillsShow Description Dave’s got a great concert story to kick off the episode before talking AI-assisted tests, a practical use for HTML markers and templates, Interop voting, browser features like margin-trim, and how to stream content into a page without first building a recursive tree. Listen on Website Watch on YouTube Links * Tupo · A daily sudoku-style logic puzzle with a twist * Clues By Sam * How Many Dudes? | Download and Play! * 445: CodePen AI is Here – CodePen * Microsoft-Decision-1: Our model for fast decision-making * Magic Words - daverupert.com * AI Skills for Real Engineers * 2027 Web Platform Feature Ranking * Recursion is DEAD and HTML killed it - daverupert.com * The WebM Project | Welcome to the WebM Project Sponsors AI and Design Systems AI 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.
737: CSS alpha(), SVG with linked-parameters, and Arguing with HumansShow 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 Sponsors AI and Design Systems AI 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.
736: Building Design Systems Using AI with TJ PitreShow 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 Guests TJ 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 Sponsors AI & Design Systems AI 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.
735: Design System Docs, CodePen’s API, and Bucket Filling ConversationsShow 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 Sponsors AI and Design Systems AI 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.
734: Web Performance with Ben SchwarzShow 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 Guests Ben 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
733: Treadmills, Bass Guitars, and Testing Web ComponentsShow 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 Sponsors SlopTalk Show Get 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.
732: Thomas Steiner on New Cross-Origin Storage APIsShow 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 Guests Thomas 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
731: Terminal UX, Running Multiple Services, Don’t Settle for an AppShow 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 \<Reveal> | 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
730: A/B Testing with Charts, Music Recommendations, & Web PermissionsShow 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!
729: After Dark Edition! Microlighter, Tri-state Drama, and Editing Video QuicklyShow 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
728: BIMI, Good Favicon Practice, and CSS @Layer ExplorationShow 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
727: Front-End Complexity, AI Co-Authorship, and New CSS Navigation PatternsShow Description We tackle a listener question about why junior front-end devs are expected to know so much beyond HTML and CSS, then get into Dave's real-world fix swapping old WebKit line-clamp hacks for the new CSS line-clamp property and the subtle bugs that kind of truncation work can cause. They also debate whether AI tools like Claude or Copilot deserve co-author credit on commits, gripe about agent-only coding workflows that skip linting and hide what's actually happening, and wrap up looking at new platform features like the navigation API and a proposed CSS-based routing approach using @route and @view-transition. Listen on Website Watch on YouTube Sponsors Notion Write custom tools for Notion Agents that generate assets, query live data, and hit any API. Listen for incoming webhooks from any app, then run workflows with Notion Agents, pages, databases, and external APIs. All of this, on a hosted runtime. Workers are isolated sandboxes managed by Notion, so the code behind your syncs, tools, and workflows runs on our infra instead of your servers.
726: Be More Weird, Sameness is Ok, and People Noticing the Effort You Put InShow Description We're checking on quarter 3 KPIs, using AI for admin dashboards is kind of fun, being a weirdo is something we should aspire to, there's a reason things sometimes all look the same and that's ok, people see the effort you put in to your creativity on the web, and thoughts on generating a random post on a static site generator. Listen on Website Watch on YouTube Links * Lunch Money – Delightfully Simple Personal Finance & Budgeting * Pyramid Inu (YouTube) * Application Holotypes: A Guide to Architecture Decisions * marcel.io * perfect-freehand * Cranking View Transitions Up to 11 – Bram.us * Chris Coyier – Web Craftsman, Blogger, Author, Speaker * Randomness, Serendipity, and an "I Wouldn't Recommend This" Algorithm – Jim Nielsen's Blog
725: CodePen 2.0, Templates on the Web, The Year of HTML?Show Description CodePen 2.0 is out now and we're talking about the launch, the idea of templating on the web, and how HTML could look very interesting in the future. Listen on Website Watch on YouTube Links * Yarn * Announcing TypeScript 7.0 * CodePen 2.0 announcement blog post Sponsors Notion Write custom tools for Notion Agents that generate assets, query live data, and hit any API. Listen for incoming webhooks from any app, then run workflows with Notion Agents, pages, databases, and external APIs. All of this, on a hosted runtime. Workers are isolated sandboxes managed by Notion, so the code behind your syncs, tools, and workflows runs on our infra instead of your servers.