688: Modern CSS Round-Out Tabs, OpenUI, and Why Websites?  ## Metadata - Author: [[ShopTalk]] - Full Title: 688: Modern CSS Round-Out Tabs, OpenUI, and Why Websites? - Category: #podcasts - URL: https://share.snipd.com/episode/57cc152b-495c-4b93-9b60-7dae2a7118e0 ## Document Notes ## Highlights - **Make Writing A Habit With A Tagged Archive** - Write regularly and keep an idea archive to turn build-up thoughts into publishable posts. - Use platforms (like Frontend Masters or CodePen) to give structure and incentive to your writing practice. Transcript: Chris Coyier You've been blogging. I've been blogging. You've been blogging too, huh? Dave Rupert You got, you got the, uh, a lot of stuff over on the front end masters blog I wanted to ask you about. I still am guest posting over there. Chris Coyier I have a lot of energy for writing about the web that just cannot be stopped. So I write. I still save articles. I RSS constantly. Dave Rupert Is it like an addiction for you? Can we get real? Is it like cigarettes? You're like, there's a new season. I got a blog. You know, is that like how it is? Chris Coyier Yeah. But I try to give 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's Corner. It's one of my favorite things that I do. And because my style there is that I have like the ultimate archive of things that I haven't written about yet. And it's all tagged. It's like a big Notion database and it's all tagged up with all the full content and stuff. And then I try to draw a connection between multiple things, just almost like as a brain exercise. Like how can I pull together a thread? And sometimes I'm more successful than other times, but at least I attempt to do that. And I just think it's very fun. ([Time 0:01:36](https://share.snipd.com/snip/0512b459-184b-4373-bf3f-92c9f559cb26)) - **There Are Many Legitimate Reasons To Build A Site** - There are many valid reasons to create a website beyond e-commerce and apps. - Looking through specific examples reveals diverse motivations and use cases for sites. Transcript: Chris Coyier And I just think it's very fun. Yeah. And so, and then, you know, other things are like, if I have like a tutorial or something along those lines, in fact, the one I'm working on now, I'm sure it'll be long published by the time This comes out, because we're recording one ahead is a riff on your blog post about why would anybody start a website when would you talk about, you know, Nylee Patel and those interviews He did. And so he's got a little bit more research and thinking, but I, I have this concept where there's like a wide way of looking at this, which is what he's trying to do, which is that the web Dave Rupert Is for e-commerce and apps kind of, but the way the making money, you got to make money or some capitalism stuff. Right. Yeah. Chris Coyier Right. And that's a big deal because people get into this industry because there's money in it or like it's a career. And so it's, you know, even if you're not all about money, you like need some of it to live or whatever. So there's money is just infects all of this for better or worse, mostly better if you ask me. That. But then he talks to, you know, a lot of his perspective came from like interviewing, like the CEO of Squarespace and Wix and stuff. And those are those they think deeply about why people need websites because it's that's their job to do that. And I almost like their perspective more. It's like people do it for lots of reasons and they try to like show that to him. But I think he was very influenced by like The Verge and why you would start a website there. And he's like, well, we just did it at the time because that's just what people did, but it's a different world now and yada yada. Anyway, I'm not, he's got probably better thoughts than I do, but I liked your blog post, especially how it ended with like, there's lots of reasons to do this. We don't always have to be like purely capitalistic in all of our thinking here. The web is even bigger than that, believe it or not. So that kind of thing. Anyway, my post is like talking about the wide lens is important, but the narrow lens is important too. The narrow lens being like, what is one person need to do? And should they do that on the web or not? That's also interesting to me. Like the wide lens is interesting and the narrow lens is interesting. And the hollow types are interesting and all these things are interesting to me. So my blog post is like just pointing that out really briefly. But also just a fun list. And I did this over a month. If anything caught my eye of why, well, I could guess why somebody made this website that I'm looking at, I wrote it down. And now I have about 50. I wanted to do a hundred, but a hundred was daunting. And I have almost 50 now. And it's just like, why would you build a website? Kind of like your blog post was titled. Here's 50 reasons. Here's 50 reasons. ([Time 0:03:00](https://share.snipd.com/snip/0268c344-c00d-44b4-b51a-478d32352d9b)) - **APIs And RSS Are Still The Web** - URLs and simple data formats (RSS/XML) make podcasts and APIs effectively websites. - This reframes many services as part of the web ecosystem, not separate platforms. Transcript: Chris Coyier Like a podcast has an RSS feed and an RSS feed is an XML file and an XML file add a URL and that's a website. So like all podcasts are maybe a holotype, but that makes me think like, well, an XML file is kind of like an API. So like all APIs are URLs and thus websites. That's kind of a big deal, isn't it? And yeah, yeah, so many. There's like, what about the I don't know, I was on the Wisconsin State Historical Society's website the other day, and they like, tell stories about Wisconsin's history and archive Information and have, you know, historical photos and stuff on there. Like, what archetype is that? I guess it's just a content website? Or is it, is that something else or what? And like, what, why, why is that still like such a super mega valid reason to have a website? It's because it's a great thing for a historical society to have. Yeah. I don't know. ([Time 0:09:35](https://share.snipd.com/snip/fdb30351-7f3d-469e-805d-1c03a03cdacf)) - **Pick Platforms Based On Use Case** - Choose the platform that fits your needs: Instagram or YouTube can replace a site for certain businesses. - Don’t overgeneralize platform choice; weigh audience, update needs, and business fit. Transcript: Chris Coyier The alternative is, I have a YouTube, which does not work for a business. Really? I don't think like that's just too weird or whatever. It works for a restaurant. Yeah. Like the, I think like the new restaurant in New York city thing is legit. If you just want to have an Instagram and that's all you're going to do as a restaurant, and there's lots of good reasons for that because lots of people use Instagram. It has timely content on it, so you can publish menu or specials or pop-ups or interesting things that you're doing on it. It gives everybody power. You can share that login or whatever with your employees or have, and it's really easy to update or whatever. And you just don't have the bandwidth to make a website or the expertise. It makes sense to me that a new restaurant in New York city might only have an Instagram. Does that spell the demise of the web? It does not. ([Time 0:11:28](https://share.snipd.com/snip/7efc1686-f8dc-45c3-950a-6ed4a2a2a598)) - **CSS Shape Primitive Replaces Old Hacks** - New CSS shape primitives let us build complex, flexible shapes without hacky overlays. - The shape syntax mirrors SVG path concepts but integrates units, calc, and CSS variables. Transcript: Chris Coyier I was trying to do it without images, I guess. And this is, I don't even know. I was looking at the CSS Tricks article I originally did it on and it said 2021. And I'm like, no way. This is probably way before that when I was originally did that. I think it's just showing the last updated date on articles. So somebody probably touched it and it made it look like it was published on that date. That's a tricky thing as a, as a publication, you got to put dates on stuff. And it's, it was always tempting for me to like putting two dates feels like a little much like originally published on and updated on. It was just like, just, I don't know. It just has sometimes that feels like a little much. Yeah. Like, do you put it in a details or do you bury it in a title attribute or what? And I don't think I ever like satisfactorily solved it. So it's probably still my code. That's just like, I don't know, just put the last updated date there, you know. Dave Rupert Well, yeah. Living document style. That's kind of what you, you know, like this is the most up to date. Chris Coyier That's what matters. It's the last time somebody really looked at it and thought about it. So fine. But it didn't tell me what I wanted to know, which is like, when was, when did I first do this? Yeah. Yeah. Yeah. This is a long time ago. Dave Rupert I always thought it'd be cool to have like a freshness date or an expiration. Like this is good. This is fresh. Like this is still real. Like I went through and I verified everything here is still fresh. Like you just click a fresh button. Yeah. Chris Coyier Yeah, exactly. I always think of that in context of the, you're trying to save a page from some self-inflicted deterioration that you put on it. Remember we've talked about like putting a, like a distortion filter on pages that haven't been touched. Yeah. You have to like do a commit or a save on it to, uh, to bring AR the sepia. That one's fun too. Happens now i mean in the old one i was just doing pseudo elements which isn't like a million miles away from double doors or whatever we call that sliding doors um but it was a little more Modern because i think you know pseudo elements made it not necessary to do sliding doors but you needed four of them in my old technique so what if people can't picture this it's like A tab that you'd buy at office depot or something those folders that are kind of staggered. Yeah, tab folders. And the way that – then you can just see a little piece of the tab sticks out above the folder. And then you write on there like 2025 taxes or whatever. And the tab behind it is 2024 taxes or whatever. I'm talking about real life, physical folders. Those sticky, uppy, outy tabs don't hit the that they're on it at a 90-degree angle. They curve out. And you can't curve out with a border radius. That's not a thing. You know, you curve in with a border radius. So how do you get that curve out? Well, the idea with pseudo-elements is like place an extra element down there in the bottom left and bottom right of an individual tab. Well, fine. But again, border radius doesn't help you there either. Because how do you get that shape that you need? It's like a little, it's hard to describe, but it's like a skateboard ramp or something that you need there. Border radius doesn't really help you there. So my idea why you needed four elements, which is more than you have pseudo elements, you only get two. This is why I was always like, yeah, you should have infinite pseudo elements, was that you'd put a circle. You'd put a square down there and then you'd put a circle over top of it. And the circle kind of like by virtue of all I had to use here was background colors, which is not great, but that's all I had. Circle would like kind of look like it's clipping away the square into that skateboard ramp type shape. That was a tricky mouth blog, but I think we got there. That's just a lot to ask for and limits design. And it's weird how the elements overlap each other and stuff. So I thought I would do it in a modern way now that we have this brand new thing. I think it's Chrome only, unfortunately, but I think everybody's on board with it. It's called a shape primitive, I think, is what they call that in CSS. So we already have a number of them, like circle, like inset. Polygon is a big one. Polygon is useful because it takes kind of an infinite number of points and then it draws straight lines between the shape and you can draw a lot of stuff with it. In fact, its imprecision is like okay sometimes for stuff like shape outside and things. ([Time 0:15:11](https://share.snipd.com/snip/91515716-f25f-46aa-9ddb-74b85c1d5fdb)) - **Build Responsive Shapes With Calc First** - Prototype shapes with hard numbers first, then convert to variables to avoid "math soup." - Use calc (e.g., 100% - 10px) so shapes adapt to element size for resilient UI. Transcript: Chris Coyier Like you'll see, you know, like don't look at the variable version. I feel like the better way to think about these things is to like do it with hard numbers first and then later decide what you want to be variables. Because as soon as you make these numbers variables, it just turns into math soup again. And you can't think about it anymore. So you do it first with hard numbers on it. But even the hard numbers have some variable-ism to them. So you start cutting a tab, like we've described, these little round-out tabs, at the bottom left. You don't have to. You can start wherever you want. But bottom left seems to make sense to me. That's what I would do with construction paper, you know. And then you say the first point needs to curve upwards. But how do you describe that very first point it needs to go to? Well, it's 10 pixels exactly from the left. Okay. It's curved to 10 pixels. But where is the pixel? Where is it vertically? Vertically, it's 10 pixels away from the bottom. Okay. So you say calc 100% minus 10 pixels. That's how you describe 10 pixels away from the bottom. What's cool about that is now this tab can be as tall as it needs to be. It doesn't give a s*** how tall it is. It could be 200 pixels tall, a thousand pixels tall. It doesn't matter. It doesn't matter. That point will always be at the right spot. And then, okay, where's the next point? You just want to go straight up and down. Well, you just say V line to 10 pixels. Then you just, you just draw a straight line to 10 pixels away from the top of the thing. That can be a steady static coordinate. And you keep like that. But my favorite point on the whole thing is the first time you shoot over to the right, which is basically like, how wide is this tab need to be? Well, the way that you describe that is like with calc again, you just say that point is the horizontal coordinate of it is calc 100% minus, say, 20 pixels because that's just the nature Of the design of the thing 10 pixel curves or whatever yeah yeah yeah that you're you're accounting for there so it's double the 10 pixels um now that point is just as what now the tab can Be as wide as it needs to be as well as how tall it needs to be so if a tab says in it you know know, supercalifragilisticexpialidocious or whatever, it's happy to be that wide. But this curve, it just starts wherever it needs to. So these points that make up the roundout tab are a mixture of steady, static, hard numbers and flexible, fluid, calculated numbers. I just think that's so freaking cool. ([Time 0:25:15](https://share.snipd.com/snip/36f26110-1de7-4c84-b743-37e5181e8efd)) - **Fallback And Padding When Using Clip-Path** - Use clip-path with shape primitives to carve elements; add horizontal padding to avoid text clipping. - Provide fallback styles (like top rounding) for browsers without shape support. Transcript: Chris Coyier And then when it's finished up, what you apply this shape to is clip path. So you originally had this shape and now you've carved away from it. So like if you have to be careful about that, because like if you didn't have any padding in the inline direction or the horizontal direction of this tab, it could cut off some of the text Of that tab. So you have to be kind of mindful of like, make sure there's enough padding so that when I carve away parts of this element, that's okay. It's not going to carve into the text necessarily. Dave Rupert Might need to even like double the padding token or something, you know, like just that's probably a nice way to do it. Chris Coyier Support it. Right. Yeah. Well, right. Well, that, yeah, I did some stuff like that. So for example, let me just go to the actual pen here and I'll describe it for the audio people. There's a supports query you can use for shape. An interesting thing to know about that is that you can't just say supports clip path shape with empty parentheses. You have to put in some kind of shape syntax in there. But you kind of don't want to copy your whole thing because it's just obnoxious to look at. No, you make a baby one, right? Yeah, I just made like a baby one for the sports. But here you can see my inline padding is too random. But when it doesn't work, it's less because you just don't need as much. And then here, well, you're not getting the roundouts, but at least I can make the top rounded, you know? So I just round it there. So in Firefox that doesn't support this, you still get the top rounding, just not the roundout at the bottom, which is kind of fine, you know? Yeah. Awesome. A little bit of interesting stuff there. ([Time 0:30:46](https://share.snipd.com/snip/91bcc1ba-bde8-47a7-9907-90d1988f77f4)) - **Single-Directional Overflow Is Practical Now** - CSS now supports single-direction overflow via overflow-inline/block and 'clip'. - That eliminates old scrollbar problems when elements shift on hover or interaction. Transcript: Chris Coyier I found another interesting one was this, how overflow works. This is, there we go. So the tabs here are this horizontal flex box of tabs, right? But you could imagine a viewport that's narrower than the tabs are. And the tab design is such that like, I don't know that maybe that's not the best responsive design, but at least you need to scroll the overflow. You got to do something, you know, maybe a container query would be nice to flip them down into vertical tabs or something like that, but whatever. So I put this there, but then you see what my, um, my hover and active state are is that these, they go down a little bit. Well, when it goes down, it causes, it triggers some overflow to that element. And so in the blog post, I kind of point this out that, uh, you get this going on, there's a horizontal scrollbar and a vertical scrollbar. And I was like, well, that sucks. And in the past, that was such a disaster in CSS. You'd just be like, well, I'm screwed then. I just have to do something else because you don't have single directional overflow. I can't say keep the horizontal scrollbar, but kill the vertical scroll bar. You didn't used to be able to do that. You knew that, certainly, right? Yeah. Now you can. Yeah. Because we have this value of clip. So now you can say overflow inline is auto. So I get the horizontal scroll bar, but you can say overflow block clip, and that just kills the vertical one. Like, I don't care. Like, just go away. ([Time 0:32:33](https://share.snipd.com/snip/1f6b03fe-c043-4c3b-894f-1a1a50ef6590)) - **Exploring Quiet UI's Playful Component Library** - Dave and Chris explored Quiet UI, Corey’s modern web components system focused on playful, modern features. - They compared it to Shoelace/Web Awesome and highlighted its experimental, designer-friendly direction. Transcript: Chris Coyier Um, yeah, I know Corey's been thinking a lot about it i've been uh chatting with him on blue sky a little bit about it too uh what and you you were you're pretty hot on it huh i you know i i you Dave Rupert Know my thing is there's a lot to like about it um here maybe i pull it up is that okay on the screen here i'll pull it up um it's a big old library of web components, which is what Shoelace was, Chris Coyier Which has become Web Awesome, where Corey also works. So I definitely have some questions there, too. Dave Rupert But, you know. Right. Yeah, I hear you. I hear what you're saying. Chris Coyier But we don't have to get into that now. Quiet UI is just like his new one. And I think it has, for example, different browser targets, right? Like he's able to, he said so himself, like he can be more modern with this than they can be in Web Awesome because Web Awesome is probably to be as valuable as it is, you know, does the hard Work of working everywhere and all that. Dave Rupert Yeah, he kind of said in a blog post, like, you know, a lot of what's in web awesome, which was shoelace, but like, it's kind of set, right. Like until like redo the whole styling API is probably not going to happen because people are using it, right? Like once it's in production, it's harder to be like, I'm going to change it all, you know? So, and then even like, you support, right? To use something that's Safari only, switch over to that, or something that's Chrome only. Current users might be like, nah, man, that's not going to fly with us. We have Safari users or whatever. So in his description to me, I was chatting in with him too. This was just kind of like, I got these ideas. I want to get them out and play. And I think that comes through. I mean, he's got a freaking mascot, for God's sake. Bring back the mascot. That's incredible, right? We forgot about these guys, but a little mousy uh doing some stuff but yeah uh what i want to call attention to like so he's got all these components components components components Components i mean how many components we've seen here chris a hundred maybe 50 100 yeah i mean like there's there's tons right and i'll go to the docs site because it's um and i can like Get into it. ([Time 0:37:28](https://share.snipd.com/snip/522b8c18-e5eb-4dd1-bc08-b5a4a93d521c)) - **Gimmicks Make A Design System Sticky** - Design systems that include small, fun 'gimmick' components spark ideas and increase adoption. - Ready-made tricks (flip cards, joystick, QR, typewriter) reduce reinvention and accelerate prototypes. Transcript: Dave Rupert And then there's these text formatting components, which is kind of cool. And then these utility components, which are kind of cool. Utilities would be like our favorite HTML includes an infinite scroller. Right. You don't want to write your own like virtual list, right? So that's kind of cool. Although Todd Libby hates the infinite scroller, so you're going to have to fight with him. But like the intersection observer, I don't know if you've written them. I write them and then I don't use them for two years. And then I forget how to write it in the intersection observer. Chris Coyier And then I have to like... Not the most intuitive API I've ever used for sure. Dave Rupert Yeah. But same with mutations and, sorry, resize, right? So like you get like, you know, how are you going to update the DOM when you resize or whatever, you know. Chris Coyier So in those cases, what is it? What are they like? Does it abstract the API into attributes essentially? Yeah. Dave Rupert It's just a wrapper element wrapper. Chris Coyier And then you like get the details from it you don't get out basically uh how do you like write a I don't know let's not get all into it but I'm like yeah it's like how much do you get out of a wrapper You still have to write all the javascript that with the callbacks and stuff you're still gonna have to react to it That's on you to react to it. Dave Rupert But for me, it's like, okay, cool. I can set the threshold and the intersect class is visible. That stuff, I just never remember how to do that stuff. And so anyway, I think that's kind of cool. But what's also cool, what I think is maybe the coolest thing is what i call like gimmicks basically like i look at a lot of design systems and none of them have this browser frame in it i Know like i know zach leatherman has this browser frame i actually use it on my website quite a bit but like it's kind of like not a everyday component, but it's in here, you know? And then you kind of keep going, like you got card, right? Cards. Yeah. Okay. Boring cards, right? Everything's a baby website, but check it out. Flip card. You remember this little pattern where you're like, you like flip a card 3D, you know? Yeah. Like that's cool to me. Like we, we kind of like coding this yourself is not fun, right? Like, but it's not hard, but it's just not fun, right? To, like, have two divs and the translate or whatever. ([Time 0:40:00](https://share.snipd.com/snip/d4efaa10-e192-48ac-b9c5-b07cf7affbd3)) - **Make Components Modular And Themed** - Allow modular consumption: publish components via NPM and CDN so teams import only what they need. - Ship a stylesheet that restyles native elements to match components for consistent theming. Transcript: Dave Rupert I think it's maybe because of his license stuff, he has like a, oh, NPM. Chris Coyier Okay, you can grab just the thing. You just pull just the thing. That's cool. But can you import it that way? What is the NPM version in the tab? Import that. Yeah. Okay. That's cool. Oh, they're bare imports because it doesn't matter. It'll just run the code immediately then. You don't have to call anything. That's actually better, isn't it? I like that. Dave Rupert Yeah yeah it's just basically like the you know the design system becomes everything right and so then you just link in and import what you need basically um but you could also get it from The cdn if you need to do that but um but yeah i think like one place it might fall down is like you know the tokens inside of here to style it are probably different you know so you might have To like yeah but where like a standalone might be a little more configurable or a little more uh agnostic i guess to the parent system but either way like all of these like i'm now like okay I could maybe start to use this or like pepper this in or like if i'm building something like this one's way more exciting than carbon by IBM you know what I mean like because it's it's already Like oh I like I'm kind of feeling these are these are cool tools fun this feels fun so that was sort of my big takeaway there's other good things like it's got a you know token system uh oh The last thing i'd say is this quiet restyle uh he offers a style sheet right that themes your basic html to look like the components in the system so really so it's quite a starter set there Yeah it's like a CSS reset slash bootstrap kind of thing to like just style native elements. So if like your partner or consumers, whoever's using your code, they can just use this style sheet with the tokens. ([Time 0:46:02](https://share.snipd.com/snip/1b9f3040-4dc2-437a-a4d5-dfbf3fa8675a)) - **License Choice Signals Project Intent** - Open-source status signals intent and governance; 'source available' differs legally from open source. - Project goals should guide licensing: hobby, supported product, or community-driven library. Transcript: Chris Coyier Yeah. Carbon probably is, they're probably $100 million into developing Carbon. Yeah. But this one on, you know, Bacori's is just like, I don't know. It's just a little basic doc site and it says how to pull them from NPM and use them, you know, and Carbon, you're like, what is this about AI? I don't, what am I looking at here? Yeah. And the classic, my bug-a forever about these design systems, it doesn't say, is this for you or is this for me? Whereas you know with QuietUI, because it's just being published as this like, it's not, there's no company associated with it. It's just like, here's, this thing is obviously for you, for us, for us to use. Whereas Carbon and the Salesforce one is I feel the same way about like, this is just for Salesforce stuff, right? Like it's cool, we can look at it and maybe it's like, that's good for hiring or whatever, but it's not really for me to use. I don't think, but carbon is less clear because carbon has like, oh, here's the web components. You just, you put, it has information about how to pull them from, from it too. But you're like, but is it for me or not? Dave Rupert Yeah. Yeah. I don't know. Who's the intended audience of this system? Chris Coyier Right. Right. Do you want me to file an issue when I see it or not really because I'm using it for me and it's not an issue for people at IBM that are trying to use it for IBM things? Like, is it open source just because that seems like a thing you should do or something? Or is it open source because in a perfect world, people are using this to, you know, build the next Spotify or whatever? I don't know. Dave Rupert I'm going to say there's advantages to open source because not everyone in the company is on the company internal source, you know, the Azure. Chris Coyier Oh, I see. Like, it makes it more usable even at the company or whatever. Dave Rupert Yeah, like people don't have to ask for permission to view the repo or whatever, right? So it's like, so. Chris Coyier That's funny. It gets around red tape. Dave Rupert It jukes red tape big time. And then if anything fails, as the maintainer of the open source, you say it's open source, baby, commit, you know? ([Time 0:48:40](https://share.snipd.com/snip/404f7ace-ef46-438b-9a18-aae64b0e2e9c))