Skip to main content
Shop Talk Show

688: Modern CSS Round-Out Tabs, OpenUI, and Why Websites?

55 min episode · 2 min read
·
Chris Quire

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.

Know someone who'd find this useful?

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.

Browse all Shop Talk Show transcripts →

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 — Free

Keep Reading

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?

Similar Episodes

Related episodes from other podcasts

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 Digest

No credit card · Unsubscribe anytime