ShopTalk

695: Happy Project Share Time (2025 Edition)

SHOW DESCRIPTION After a bit of gaming talk, Chris and Dave are sharing a bunch of cool projects that our Discord community members have been sharing over the past year including things like a web component based admin bar, shape CSS generators, new website portfolios, HTML-first web framework, email markup databases, miniature paintings, AI tools and ducks, and a lot more. ShopTalk will be taking a break after this episode until the new year. Happy holidays for 2025 and we look forward to a great year in 2026 sharing our love of all things HTML, CSS, and building websites. Listen on Website [https://shoptalkshow.com/695/] Watch on YouTube LINKS * BALL x PIT on Steam [https://store.steampowered.com/app/2062430/BALL_x_PIT/] * Overwatch 2 [https://overwatch.blizzard.com/en-us/] * Call of Duty® | Best-Selling Video Game Franchise [https://www.callofduty.com/ca/en] * THE FINALS on Steam [https://store.steampowered.com/app/2073850/THE_FINALS/] * Welcome to Steam [https://store.steampowered.com/] * Home | Vulkan | Cross platform 3D Graphics [https://www.vulkan.org/] * Dota 2 [https://www.dota2.com/home] * Counter-Strike 2 [https://www.counter-strike.net/] * Learn JavaScript, React, and TypeScript to Node.js, Fullstack, and Backend | Frontend Masters [https://frontendmasters.com/] * HTML for People [https://htmlforpeople.com/] * GitHub - StfBauer/markshell: Markshell allows you to convert Markdown to a beautiful output on the shell, Ideal for any custom built NodeJS CLI. [https://github.com/StfBauer/markshell] * Admin Bar Component | Will Browar [https://wbrowar.com/web-components/admin-bar-component] * ship-shape.win [https://ship-shape.win/] * Quina - Menu [https://quina.app/] * Crashlands 2 | Games | Butterscotch Shenanigans [https://www.bscotch.net/games/crashlands-2] * How Many Dudes? on Steam [https://store.steampowered.com/app/3934270/How_Many_Dudes/] * Unoffice Hours Webring [https://unofficehours.com/] * Unoffice Hours - Dave Smyth [https://davesmyth.com/unoffice-hours?ref=unoffice-hours-webring] * Dynamic Dummy Image Generator - DummyImage.com [https://dummyimage.com/] * Lynn Fisher [https://lynnandtonic.com/] * Nestflix [https://nestflix.fun/] * o(m)g:image | Question 1 [https://omgimg.jim-nielsen.com/] * Making o(m)g:image, Part III: The HTML - Jim Nielsen’s Blog [https://blog.jim-nielsen.com/2024/making-omgimg-pt-iii/] * Outlyne - AI Website Builder | Create Stunning Websites with AI [https://outlyne.com/] * Greenwood [https://greenwoodjs.dev/] * I Hid a Dozen Easter Eggs on This Website – Unapologetic [https://unapologetic.io/2025/09/a-dozen-eggs] * MacStories - Apple news, app reviews, and stories by Federico Viticci and friends. [https://www.macstories.net/] * SotB14 | State of the Browser 14 [https://2026.stateofthebrowser.com/] * The Email Markup Database [https://database.emailmarkup.org/] * (2) Post | LinkedIn [https://www.linkedin.com/posts/husseinalhammad_did-you-know-thousands-of-emails-already-activity-7402686947149811712-RHOJ/] * Storybook MCP sneak peek [https://storybook.js.org/blog/storybook-mcp-sneak-peek/] * Andy Ford - miniature painter [https://andyfordstudio.com/] * Rubber AI [https://rubber-ai.davidfitz.dev/] * Baseline Tennis - Ulimate Tennis ladder for competitive and casual players [https://www.bsln.app/] * Intersecting Us - Where we explore math stories together. [https://www.intersectingus.com/] * bitty - a web tool for interesting pages [https://bitty.alanwsmith.com/] * Dolphin Maker 2.0 [https://avatar-maker.sarahfrisk.com/] * Chris Enns [https://chrisenns.com] + Lemon Productions [https://www.lemonproductions.ca/blog/] SPONSORS STUDIOWORKS [https://join.studioworks.app/shoptalk/] Manage clients and contacts, send branded invoices, receive payments, access educational resources, and connect with a supportive community. We’re building the best business hub for freelancers who want a custom client experience that feels polished and professional — with much more in store.

694: Invoicing with Studioworks with Jessica and Chris

SHOW DESCRIPTION Chris and Jessica from Studioworks join us to talk about their new app, why they're uniquely qualified to run an invoicing app, what the long term vision is for Studioworks, pricing models of subscription apps, how invoicing isn't just for web nerds anymore, helping neurospicy people get paid for their work, and what it's like to transfer to a new invoicing app. Listen on Website [https://shoptalkshow.com/694/] Watch on YouTube GUESTS JESSICA HISCHE Guest's Main URL [https://jessicahische.is] • Guest's Social [https://www.threads.com/@jessicahische] Jessica Hische is a lettering artist and author with a tendency to overshare and a penchant for procrastiworking. CHRIS SHIFLETT Guest's Main URL [https://shiflett.org/blog] • Guest's Social [https://bsky.app/profile/shiflett.org] Chris Shiflett is a husband, father, entrepreneur, community leader, author, speaker, and amateur athlete. LINKS * Studioworks.app [https://join.studioworks.app/shoptalk/] * The web's grain by Frank Chimero [https://frankchimero.com/blog/2015/the-webs-grain/] SPONSORS TLDRAW [https://tldraw.dev/shoptalk/] Have you ever wanted to build an app that works kinda like Miro or Figma, that has a zoomable infinite canvas, that’s multiplayer, and really good, but you also want to build it in React with normal React components on the canvas? Good news! tldraw is the world’s first, best, and only SDK for building infinite canvas apps in React. tldraw takes care of all the canvas complexities — things like the camera, selection logic, and undo redo — so that you can focus on building the features that matter to your users. It’s easy to use with plenty of examples and starter kits, including a kit where you can use AI to create things on the canvas. Get started for free at tldraw.dev/shoptalk [https://tldraw.dev/shoptalk], or run npm create tldraw to spin up a starter kit.

693: Hobbies, Puzzle Game Circuit, and Web Monetization News

SHOW DESCRIPTION Why do we turkey when there's so many (better) options for meals, how many hobbies do we really need and why can't we do all of them, Clues by Sam difficulties and doing the puzzle game circuit, does Dave like D&D or does Dave like systems, the ongoing web monetization attempts, and Brecht on range group. Listen on Website [https://shoptalkshow.com/693/] LINKS * Alton Brown Cooks Food | Episode 1: The Big Bird [https://www.youtube.com/watch?v=hdUXDhIBxis] * Big Green Egg [https://biggreenegg.ca/?srsltid=AfmBOoqzmIlgWhig-T_PK-4YH_OqhSWmCZ6ttPLHp0gyAguFMvdiD8IA] * Tobi Workwear [https://store.japan-zone.com/collections/tobi-workwear?srsltid=AfmBOor77xlifLXfYD1QBpniIMj0PwXfULh7CvgEexYd3h7Hl4zvg4cs] * Clues By Sam [https://cluesbysam.com/] * Stars – Daily Puzzle | Inkwell Games [https://inkwellgames.com/games/stars?day=4] * Fields – Daily Puzzle | Inkwell Games [https://inkwellgames.com/games/fields?day=4] * Tiled Words [https://tiledwords.com/] * 646: Hard Code & Soft Skills – ShopTalk [https://shoptalkshow.com/646/] * Lasers & Feelings by John Harper [https://johnharper.itch.io/lasers-feelings] * Greetings, Scoundrel | Blades in the Dark RPG [https://bladesinthedark.com/greetings-scoundrel] * Monster of the Week – Evil Hat [https://evilhat.com/product/monster-of-the-week/] * Mothership RPG – Tuesday Knight Games [https://www.tuesdayknightgames.com/pages/mothership-rpg?srsltid=AfmBOorawetcI4QQTz0P1VZot2yg87jMcDbUWSbKIp-mFjs_j5qMucgT] * Pathfinder Roleplaying Game | Paizo [https://paizo.com/pathfinder] * Baldur's Gate 3 on Steam [https://store.steampowered.com/app/1086940/Baldurs_Gate_3/] * 633: Thomas Steiner on AI in Chrome and the Web – ShopTalk [https://shoptalkshow.com/633/] * Web Monetization is Still Inching Along – Frontend Masters Blog [https://frontendmasters.com/blog/web-monetization-is-still-inching-along-but-still-too-difficult/] * Open Letter [https://coil.com/] * Interledger Foundation [https://interledger.org/] * Web Monetization – Chrome Web Store [https://chromewebstore.google.com/detail/web-monetization/oiabcfomehhigdepbbclppomkhlknpii?pli=1] * GateHub [https://gatehub.net/] * Grid Paper [https://grid-paper.daverupert.com/] * utilitybend Blog [https://utilitybend.com/blog] SPONSORS TLDRAW [https://tldraw.dev/shoptalk/] Have you ever wanted to build an app that works kinda like Miro or Figma, that has a zoomable infinite canvas, that’s multiplayer, and really good, but you also want to build it in React with normal React components on the canvas? Good news! tldraw is the world’s first, best, and only SDK for building infinite canvas apps in React. tldraw takes care of all the canvas complexities — things like the camera, selection logic, and undo redo — so that you can focus on building the features that matter to your users. It’s easy to use with plenty of examples and starter kits, including a kit where you can use AI to create things on the canvas. Get started for free at tldraw.dev/shoptalk [https://tldraw.dev/shoptalk], or run npm create tldraw to spin up a starter kit.

692: Killer Feature of Web Components, Skills > MCP, and Streaming HTML?

SHOW DESCRIPTION Dave has famous people blindness, a cologne life hack is dropped, what is the killer feature of web components, MCPs are so done—focus on skills instead, should custom events exist, and thoughts about streaming HMTL. Listen on Website [https://shoptalkshow.com/692/] Watch on YouTube LINKS * Good Hang With Amy Poehler - The Ringer [https://www.theringer.com/podcasts/good-hang-with-amy-poehler] * Sebastian Maniscalco Has a Little More Pepper in His Hair These Days - The Ringer [https://www.theringer.com/podcasts/good-hang-with-amy-poehler/2025/11/07/sebastian-maniscalco-has-a-little-more-pepper-in-his-hair-these-days] * Guitar Center Austin Music Store [https://stores.guitarcenter.com/tx/austin/446] * normansrareguitars.com – Norman's Rare Guitars [https://normansrareguitars.com/] * The killer feature of Web Components - daverupert.com [https://daverupert.com/2025/10/custom-elements-manifest-killer-feature/] * figma/code-connect: A tool for connecting your design system components in code with your design system in Figma [https://github.com/figma/code-connect] * Chrome DevTools (MCP) for your AI agent | Blog | Chrome for Developers [https://developer.chrome.com/blog/chrome-devtools-mcp] * Stop Using CustomEvent [https://justinfagnani.com/2025/06/25/stop-using-custom-event/] SPONSORS TLDRAW [https://tldraw.dev/shoptalk/] Have you ever wanted to build an app that works kinda like Miro or Figma, that has a zoomable infinite canvas, that’s multiplayer, and really good, but you also want to build it in React with normal React components on the canvas? Good news! tldraw is the world’s first, best, and only SDK for building infinite canvas apps in React. tldraw takes care of all the canvas complexities — things like the camera, selection logic, and undo redo — so that you can focus on building the features that matter to your users. It’s easy to use with plenty of examples and starter kits, including a kit where you can use AI to create things on the canvas. Get started for free at tldraw.dev/shoptalk [https://tldraw.dev/shoptalk], or run npm create tldraw to spin up a starter kit.

691: Charts + Graphs, Vibe Coding an App, and Debating Affordances

SHOW DESCRIPTION What do Balatro streamers do when the game is over, Random in CSS is so hot right now, Dave has a better idea for charts and graphs that would change the world, Quiet UI follow up, Dave tries vibe coding a tennis app and doesn't completely John McEnroe his laptop, Chris wonders about better cursor UI on the web, and debating affordances vs conventions. Listen on Website [https://shoptalkshow.com/691/] Watch on YouTube LINKS * Jynxzi - Twitch [https://www.twitch.tv/jynxzi] * BALL x PIT on Steam [https://store.steampowered.com/app/2062430/BALL_x_PIT/] * Enhancing Web Components Safely with Self-Destructing CSS [https://scottjehl.com/posts/web-component-self-destruct-css/] by Scott Jehl * https://webawesome.com [https://webawesome.com/] * Podcast Awesome [https://www.podcastawesome.com/] * Quiet UI [https://quietui.org/] * A Beautiful Site [https://www.abeautifulsite.net/] * Eleventy is a simpler static site generator [https://www.11ty.dev/] * Don’t use custom CSS mouse cursors – Eric Bailey [https://ericwbailey.website/published/dont-use-custom-css-mouse-cursors/] * Home | Rach Smith's digital garden [https://rachsmith.com/] * The Two Button Problem – Frontend Masters Blog [https://frontendmasters.com/blog/the-two-button-problem/] SPONSORS TLDRAW [https://tldraw.dev/shoptalk/] Have you ever wanted to build an app that works kinda like Miro or Figma, that has a zoomable infinite canvas, that’s multiplayer, and really good, but you also want to build it in React with normal React components on the canvas? Good news! tldraw is the world’s first, best, and only SDK for building infinite canvas apps in React. tldraw takes care of all the canvas complexities — things like the camera, selection logic, and undo redo — so that you can focus on building the features that matter to your users. It’s easy to use with plenty of examples and starter kits, including a kit where you can use AI to create things on the canvas. Get started for free at tldraw.dev/shoptalk [https://tldraw.dev/shoptalk], or run npm create tldraw to spin up a starter kit.