688: Modern CSS Round-Out Tabs, OpenUI, and Why Websites?
Episode
55 min
Read time
2 min
Topics
Design & UX
AI-Generated Summary
Key Takeaways
- ✓CSS Shape Primitive: The new `shape()` function replaces `path()` with CSS-native syntax supporting pixels, rems, calc, and variables—enabling flexible tab designs where curves adjust automatically to content width and height using mixed static and calculated coordinates.
- ✓Single-Direction Overflow Control: CSS now supports `overflow-inline: auto` combined with `overflow-block: clip` to enable horizontal scrolling while preventing vertical overflow, solving previously impossible layout scenarios where elements extend beyond containers in only one direction.
- ✓QuietUI Component Strategy: Corey LaViska's web component library includes novel "gimmick" components like flip-cards, joysticks, QR codes, and typewriter effects alongside standard UI elements, plus a restyle sheet that themes native HTML to match custom components using shared tokens.
- ✓Source-Available Licensing Model: QuietUI uses Polyform non-commercial license requiring payment for commercial use, Discord access, and priority bug fixes while allowing free non-commercial modification—distinguishing "source available" from true open source to monetize spare-time development.
What It Covers
Chris Coyier demonstrates modern CSS shape primitives for creating rounded-out tabs without images, explores QuietUI web component library's unique features, and debates website viability beyond pure commerce applications.
Key Questions Answered
- •CSS Shape Primitive: The new `shape()` function replaces `path()` with CSS-native syntax supporting pixels, rems, calc, and variables—enabling flexible tab designs where curves adjust automatically to content width and height using mixed static and calculated coordinates.
- •Single-Direction Overflow Control: CSS now supports `overflow-inline: auto` combined with `overflow-block: clip` to enable horizontal scrolling while preventing vertical overflow, solving previously impossible layout scenarios where elements extend beyond containers in only one direction.
- •QuietUI Component Strategy: Corey LaViska's web component library includes novel "gimmick" components like flip-cards, joysticks, QR codes, and typewriter effects alongside standard UI elements, plus a restyle sheet that themes native HTML to match custom components using shared tokens.
- •Source-Available Licensing Model: QuietUI uses Polyform non-commercial license requiring payment for commercial use, Discord access, and priority bug fixes while allowing free non-commercial modification—distinguishing "source available" from true open source to monetize spare-time development.
Notable Moment
Coyier reveals he maintains a tagged Notion database of unwritten topics, deliberately connecting multiple items per article as a brain exercise, producing weekly content for CodePen while guest posting elsewhere to manage his unstoppable writing compulsion.
Episode Transcript
Hey there. Shop with me next year. Listen to another episode of the Shop Talk Show podcast all about web design development. I'm David Berg, and with me is Chris Quire. Hey, Chris. How are you doing today? So Good. How do I look? Pretty good. Are you it's you got it matted down. Is the hair did the hair just get so heavy that it just fell over? It's starting to. I washed my hands too, and I put my the water in my hair instead of on a towel. So, you know, that's also Oh. And it's, it's behaving a little bit. But, no, it's starting to Don't let my daughter see that. We're trying to teach her, you know, like it's she's I feel like just still getting a little old for the wiping your hands on your clothes thing. And I just No. I'm team Ruby. Sorry. Rubes. K. Good. Rubes, hold it together. Rubes. Kids are funny, though. Kids I do the check this morning because there's there's, like, dots all over her shirt. You know? And and, like, water stay like, Yeah. Like a little wet spot looks a lot like last night's pizza grease on there too, but one of them is gonna fade away from the other one's not. Yeah. One one is not a problem when you get to school, and the other one is, Ruby Ruby the, booger eater. You know? Like, there's, like, a like yeah. Yeah. It's a it's a pretty wide gap, so you gotta you gotta check. You gotta check. Yeah. It's, alright. Well, what what's what's going on, man? You've been blogging. I've been blogging. You've been blogging too, You got you got the, lot of stuff over on the, front end masters blog I I wanted to ask you about. But, Guest posting over there. I have a lot of energy for Yeah. For writing about the web that just cannot be stopped. You know? So I write I still save articles. I re RSS constantly. Is it is it, like, an an addiction for you? Can we can we get real? Is it, like I think so. Like cigarettes? You're like, I got I got I got there's a new season. I got a blog. You know? Is that, like, how it is? Myself incentive too because there is, like, a little bit of money behind it. So that's nice. But, also, like, it's more like just a steamroller of you can't just stop. You know? Your brain just gets all full, and then you just, like, have to let it out. So, like, you might as well put myself in a situation where it's advantageous for everybody that I do so. I do it for CodePen every single solitary week. I write Chris' corner. It's one of my favorite things that I do. And because what I my style there is that I have, like, the ultimate archive of of things that …
Get the full transcript (10,369 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 52-minute episode.
Get Shop Talk Show summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Shop Talk Show
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
Sep 7 · 58 min
Modern Wisdom
How TikTok Hijacked The Future Of Music - Nik Nocturnal - #1095
May 9
More from Shop Talk Show
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
Aug 31 · 60 min
Hard Fork
Moltbook Mania Explained
Feb 4
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
“Coyier reveals he maintains a tagged Notion database of unwritten topics, deliberately connecting multiple items per article as a brain exercise, producing weekly content for CodePen while guest posting elsewhere.”
by Corey LaViska
“Corey LaViska's web component library includes novel "gimmick" components like flip-cards, joysticks, QR codes, and typewriter effects alongside standard UI elements, plus a restyle sheet that themes native HTML to match custom components using shared tokens.”
company
“Coyier reveals he maintains a tagged Notion database of unwritten topics, deliberately connecting multiple items per article as a brain exercise, producing weekly content for CodePen while guest posting elsewhere to manage his unstoppable writing compulsion.”
More from Shop Talk Show
We summarize every new episode. Want them in your inbox?
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
729: After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly
728: BIMI, Good Favicon Practice, and CSS @Layer Exploration
727: Front-End Complexity, AI Co-Authorship, and New CSS Navigation Patterns
Similar Episodes
Related episodes from other podcasts
Modern Wisdom
May 9
How TikTok Hijacked The Future Of Music - Nik Nocturnal - #1095
Hard Fork
Feb 4
Moltbook Mania Explained
ZOE Science & Nutrition
Dec 4
Healthier holiday eating with smart food swaps | Dr Federica Amati
The Peter Attia Drive
Dec 1
#374 - The evolutionary biology of testosterone: how it shapes male development and sex-based behavioral differences, | Carole Hooven, Ph.D.
Making Sense
Apr 7
#406 — The Legacy of Christianity
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
You're clearly into Shop Talk Show.
Every Monday, we deliver AI summaries of the latest episodes from Shop Talk Show and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime