671: Naming Consistency, HTML Includes, and Mixins  ## Metadata - Author: [[ShopTalk]] - Full Title: 671: Naming Consistency, HTML Includes, and Mixins - Category: #podcasts - URL: https://share.snipd.com/episode/1b3aa947-aaa0-4cf4-8792-dea3a98dc391 ## Document Notes ## Highlights - **Dave Rupert's Buzz Cut Story** - Dave Rupert shares a personal story about getting a buzz cut inspired by his son, hitting a midlife crisis milestone. - The buzz cut symbolizes a simple yet impactful lifestyle change reflecting personal and professional transitions. Transcript: Dave Rupert OK, idiots, go lay down. Hey there shopping maniacs you're listening to another episode of the shop talk show i'm dave buzz cut rupert with me is chris coyer hey chris yeah it looks amazing is it because it's Chris Coyier Hot as hell and and then it feels good or what was the super hot uh in texas like you know 90 with like 80 humidity kind of vibes you know just right. Dave Rupert Yes. But what else though? What triggered it was my son got a buzz cut. He's super into it. I don't know. I think it's a meme or something going around, but I saw him get a buzz cut and I was like, that looks. Related. Yeah. Okay. I got, I got really jealous of my son's buzz cut. And so now we both have buzz cuts. Chris Coyier And how fast does it grow, though? By Christmas, are you going to be Samurai Dave again or no? Dave Rupert Yeah, I might. It might grow back. I think that last, you know, I got a haircut for job interviews. So that would have been like about a year and a half or so with the old haircut. So, um, oh yeah. Chris Coyier So you grow, you grow pretty quick. Must take your vitamins or whatever. ([Time 0:00:00](https://share.snipd.com/snip/2f9bcb23-67a2-4987-bd07-952f938e8453)) - **Dash Dash Prefix Utility** - The dash dash prefix in CSS custom properties and idents indicates non-standard or custom extensions, nurturing language growth. - This system protects core platform functionality while allowing developers to innovate without conflicts. Transcript: Chris Coyier Bit about it at uh with brad frost with the frost brothers um how was css day oh it was tremendous i i feel like i took so many good notes while i was there and i'm only half through them at most You know because i think that's my that was my style at this conference so i'm not going to extrapolate too far from that but was to write down a person and they could be at a speaker it could Have been a side event it could have been a conversation in a hallway and then just write down like a tiny bit about what was interesting about that interaction or something they said Or something I want to chase down or something. I don't need elaborate notes, but I also don't want to forget like the highlights. So I'm kind of proud of my notes because I'm just like, oh, here's, you know, here's Breck's interesting thing. And I was like, okay, oh yeah. And all I need is like one line of text to like remember what was so interesting about that. Yeah, it was great, dude. Like, you know, a conference like that, that's like my number one professional thing and, and hanging out with other people who've made it their number one professional thing. The like nerd language that we speak and just how niche the conversations can be you know like walking up to a conversation they did the pac-man rule thing have you heard that where you Don't close the circle entirely oh yeah oh yeah and you leave the little gap yeah adam was trying to make it the conic gradient rule but it just wasn't didn't catch on yeah because it's Dave Rupert Like what kind of conic gradient you know everybody knows what pac-man looks like hsla so we have to line up in like uh skinned q-tones yeah around the circle um i would have worked at this Chris Coyier One conference yeah tremendous really fun you know walk up to a, have it be like about how you can, you know, pass certain keywords within the step function, which is a function that is Only relevant within animation timing function. You know, you're like, oh, my gosh, this is amazing. I want to talk about that for an hour, please. Dave Rupert Yeah, it's nice to find your people. I feel like I have those people on my little team at Microsoft, just people who you could be like, what do we think of custom idents? And like people have opinions or, you know, just as dumb as that little tiny feature is. Chris Coyier I know i would love to talk about that that's good stuff and now we're using them more and more because like you have to use them for certain things right like you have to use them for uh for An anchor name for example is one of the things where and you you you can't not have it be a custom mine it makes you wonder if like if they were around when like keyframes were invented you Know keyframe animation you can just name whatever you want. But these days, the things that you have to name whatever you want tend to require the double dash. And the double dash is confusing because it's like, isn't that what custom properties uses? Yes, but they are custom idents that contain a value. I don't know. Dave Rupert I wonder if we could retcon it and that becomes just the, the retro standard, just anything where you invented a name, you put dash, dash. I think about this a lot, like for languages, I, you know, there's a lot on, on the, a good design of a computer programming language, right? Yeah. I feel like one of CSS's coolest features was the dash dash web kit, right? Which is to say dash dash non-standard. This is made up. Chris Coyier And I was just one dash, I think. Dave Rupert Oh, wait, dash web kit. Yeah, sorry. Dash web kit. And then they took that and made it like dash dash my thing. I feel like that was like a great way to say, I'm extending the platform. I'm extending things. Then like if JavaScript had this and you were trying to be like. Chris Coyier Is Dave going on record as defending vendor prefixes? Dave Rupert I, well, I'm, I'm defending the idea of allowing language extensions in a way that doesn't block ([Time 0:02:37](https://share.snipd.com/snip/2ef6242c-b85f-49cc-9c7c-931ee7fc4bfd)) - **Superellipse as Shape Primitive** - The CSS superellipse function serves as a primitive shape, enabling the creation of complex shapes like squircles. - It provides a foundational approach making shape creation more customizable and powerful on the web. Transcript: Dave Rupert Yeah, scoop, bevel, super ellipse is kind of the big. Super ellipse is the primitive one. Chris Coyier That's the one where you can do all the other stuff with it. So it's like if squircle isn't doing it for you, you can use super ellipse to rock your own squircle, which is just so cool. ([Time 0:19:45](https://share.snipd.com/snip/49dbac4f-823c-4cb4-add6-1399c07c187e)) - **Composable Document Updates Concept** - The proposed composable document updates via view elements and template tags aim to enable dynamic re-rendering of HTML content. - This approach resembles SPA routing and could enhance HTML streaming and on-demand content loading in browsers. Transcript: Chris Coyier Out. Like, do they need to be complete documents? Do they not need that? Are they blocking? Are they not blocking? All that kind of stuff. This is like, it just feels a lot different. This was like, I don't know, I can do some of that stuff and not other stuff. But it feels like more of the main goal is kind of like the, I wish I digested this more. I'll have to stream it one of these days and read it. But it's about re-rendering some of that stuff too. Imagine your next js app has a main component or something and that tends to get like the details change and it needs to get re-rendered this is like that like this area of the site will Dave Rupert Be can be changed at some point yeah it's kind of like i think it the the core of it is this view element with the matches attribute that matches some URL pattern. Routing. What? Basically a router. You know, so you could imagine your homepage is, you know, view matches slash about view matches slash archives view matches slash contact. Speaking of VF, it's like VF with the URL. Yeah, I bet Evan, you is pissed they're making a VF. No, I'm just kidding. It's interesting. And then it pairs nicely. I'm the HTML sommelier. It pairs nicely with the template element. And so then you say template ID foo, and then there's a mode or something attribute that would replace, I think replace and prepend and append, which is where I lost it though. Chris Coyier I don't, I don't get it. It's like, sure, you can put the template later down in the document, but it still needs to be there. Dave Rupert So I don't understand what you what you buy for that i think it's the idea of like if it matches about then then that template replaces the content in that view element um so um they're sitting There right next to each other yeah why couldn't it be in there yeah But yeah, that's maybe weird. But maybe it was to achieve this loading state sort of thing. Well, and I think it's true. Chris Coyier I think I heard a birdie talk that Chrome's getting more serious about getting HTML streaming more robust or something. And then this might align with that incentive. Because if you take these templates and you for example smash them way down at the bottom of the of the document or something maybe that's like more efficient to loading or something Or just somehow jives with with streaming html better i don't know yeah that's very speculative this whole thing is speculative to be honest totally it's i think it's interesting i Dave Rupert I think you know it is kind of trying to pull this spa style thing into here um which i suppose is handy um i don't know i'm gonna maybe reserve judgment i just you know maybe or maybe sit with It for a bit because what i want i kind of want that cell style syntax from redwood where you like can be like this is the loading this is the error this is the you know uh and and i think they Have these they they kind of address that but you know i but i'd also like like that's sort of the stuff i'd want to swap um in a view based on the top heavy too like all these view elements Chris Coyier Like what if you have a pretty complicated set are we are we saying you're going to put a thousand of these view elements just in the first html document that loads why yeah i want more like On-demand loading you know if one of these views matches then go get the content but i mean i guess that's what javascript already does so i don't know i have not digested this whole thing Yet but it does seem uh relatively interesting and yeah i wonder it's like does the template tag have a href on it because if it does it no so yeah so it's not really what we're talking about Dave Rupert There is no includes no includes but in theory we could have the include element and then you pull that template in and now it's available yeah documented so it could hang out together With this um so then you're yeah so in in theory this could potentially work i think yeah i think there was a i saw justin finiani um and i wonder if it's shadow doms that issue well i saw him Saying template is not the tool for this just just because it needs it's its goal is to be a pre-parsed template result um okay so not not a good like reusing of an element yeah not a good Chris Coyier Like dynamic insertion sort of thing or i believe is i guess what was nice though is that it doesn't render naturally so that's probably why gnome went for it right but then it's and then The idea is if the view matches the guts of the template get plucked out and put up into the view which okay neat but then you're like well what does that do to css selectors and stuff like It can i use them sensibly or does it have to shadow dom it or what you know i i feel like that it is confusing when CSS gets involved then to me. Dave Rupert Yeah, I think too. I think it would actually work in like an SBA sort of style thing where like you, you know, you're basically drawing an island for content. And you're saying, if the link matches this, I'm going to fetch a template and put it on the page and then you render it browser. I'm not going to do the whole like, you know, select this, do a dom diff, pop this in. Like it just, just basically a really coarse, like, uh, addition. So I think that's sort of the intent there. Um, it's, it's based a lot on hot wired, um, or if you're, um, on Reddit HTMX. And, um, so ([Time 0:20:35](https://share.snipd.com/snip/13f83eaa-d7d4-44d9-abd0-4ff5ce69d6a2)) - **Benefits of CSS Native Mixins** - Use CSS native mixins to bundle reusable style blocks, potentially with parameters, for cleaner and dynamic CSS. - Native mixins can react to property changes and re-render styles in real-time, surpassing preprocessor capabilities. Transcript: Chris Coyier You're like, Mixins will be so great. I really, I think that's a super good feature for CSS to have. And some, you're like, you know, I'll feel like we'll just go to sleep and have it some morning, even though I know there's like a ton of work that has to happen between now and then but that's Just what it feels like you know css moves so quickly but mixins is an easy one to wrap your mind around because it's just you name a mix in maybe it maybe we'll force it to have a custom ident That'd be cool you know you name it dave's rounded corners or something and then a mixing can apply not just one thing, but a whole block of stuff and nested stuff and all this. And I think that can be really cool. The number one use case that was popping through my head while I was at CSS day is that Adam did a talk on carousel stuff and scrolling. And he's such a cool detail oriented dude that there was just like line of code after line of code after line of code like polishing up the look and experience of of a carousel look and by The end of it's like there's a lot there's a lot here styling the scroll bars styling the behavior snapping the scrolling applying all these buttons and pseudo elements and fancy stuff To the point where it's really nice and polished at the end but also not overly designed like there's not so much going on right but it's still like a lot of code and it's like that could Just be a mix-in somebody could pick that thing up and they could just have it be this generic mix-in that you could apply and mix-ins also take parameters like functions so you could Dave Rupert Say you know scroll buttons true one second i want to catch up on this i have dogs freaking out i'll be right back dogs are great dogs are wonderful sometimes they eat an entire blanket Chris Coyier And impact their bowels and you have to pay 1200 oh my gosh love dogs yeah totally i'm always always stories like that my buddy's dog has been porcupine like five times or something like That i don't think they're they're gonna make it anyway there's native mixins native mixins and so call it something dash dash something we're gonna we're just gonna assume that they're Idents even though something tells me they're not gonna ship with custom idents i don't know why but let's see let's see if they do css mixing css think there's barely even an explainer Yet. But I also feel like it's almost so obvious that maybe it doesn't need one. So you declare it with mixin, kind of like you're declaring a custom property or whatever. And then you use it with apply, so that's different. I think it was in clued in sas but now it's going to be apply i don't care that seems fine and then you may or may not pass stuff pass parameters to it but that could be like i want scroll button Scroll buttons true scroll dots false you know like if we're talking about this carousel mix in, that seems awesome to me to be able to pass these things in. And then I think like custom properties, they would re-render if stuff like that changes. I don't know. Like if a custom, if a property, a value that you're passing a mix in is a custom property and that custom property changes, then the mix in that got applied would also change in real time. That's the kind of neat stuff that CSS can do that SAS could never do. So like, you know, because I think Miriam was saying, and I think this is a little bit of a hallway conversation was sure we can do mix in but to sell it internally can we paint a picture that We should do it and not just leave it to sass because there is some pushback on stuff like that like if another tool can do it perfectly well or better why bother doing it so the picture needs To be painted that it can do things that only the browser can do. And then the re-rendering, my guess is, is the top thing. I think that's unique to what it could do. ([Time 0:29:50](https://share.snipd.com/snip/e4754111-62f4-4e4c-9e84-06f58cca4ef1)) - **Quirks of CSS Custom Properties** - CSS custom properties accept nearly all values as valid, even nontraditional ones, leading to subtle rendering quirks. - The browser defers validation to usage time, causing surprising visual results if invalid values are applied later. Transcript: Chris Coyier It's like URL or something. Dave Rupert Yeah. Yeah. I'm like, yeah. Right. Chris Coyier Or even if they're not invalid, they don't work how you'd think. Like URL just becomes a string that says that, which is useless. Yeah. There's a few twists, right? Right. So that in some circumstances can be very surprising. And this is too hard to mouth blog, so I'm just going to give you the gist of it, is that like some things like look invalid. So you'd think that the browser would like throw them away, but it doesn't. So this comes up if you set like the color or something to something that it clearly isn't a color. It doesn't matter. The browser is going to throw it away when it's used. But by the time it's done that with custom properties, it like, I don't know. It's I absolutely just need to write this up. I think some people kind of intuitively know this, but it leads to those littless quiz kind of things where you're like look these three selectors kevin powell ones that where i get zero Out of ten yeah yeah all apply a different color which color will it actually be and it's like it tends to be a unintuitive one and the reason it's unintuitive is because like the the custom Property is even though it looks invalid is is actually valid and blah blah and it never goes and like re-evaluates it later that's i know that's too hard to explain but i was so into how Dave Rupert Miriam explained it that i need to do it myself so i can somebody should make one of those quizzes where it's like you know what color is it red blue or green but then it's like but it's actually Hooked up to like an animation of a bomb with like wires and you have to clip the right wire like oh my god that would be great css is already stressful and you're just gonna crank up the notch Just give it like like css or die. We need graphic packages, Chris. That's interesting. Yeah, I was dealing with this. CSS tries to help you. It tries to figure out what you're doing. But then when it can't, it says later, I'm out, bye. Where HTML will partially render your garbage. CSS actually is the opposite. And it says like, I'll do, I'm just, I'm going to ignore this piece, bud. It looks like you got carried away. And that's frustrating because HTML is showing it. CSS is like bailing. And then JavaScript is like, I don't work at all. Like I'm just, dude, you had PX on a number. ([Time 0:37:05](https://share.snipd.com/snip/8e55b6df-9712-4f60-8b8f-3f34483a0376)) - **Inverse Text Sizing Technique** - Inverse text sizing based on character length can improve headings by shrinking long text but enlarging short text. - Using CSS clamp with numeric casting enables dynamic, legible font scaling responsive to text length. Transcript: Dave Rupert Hit publish on that one well i posted like a blue sky a toot um last i remember us talking about it in the discord yeah it was like a discord somebody mentioned it ginger maybe and and then Chris Coyier I was like hey wait i think we can do this i coughed up an old old php implementation of it that i used on my quotes on design site but it was i looked at the code and i was like oh my god i could I feel like five years old looking at that code it's like split string by characters if characters greater than 10 then font size equals 32 pixels or something i wrote some very magic Dave Rupert Number rific well i've done the same thing in javascript you know you're like, if numcars greater than 32, add class large, you know, that sort of thing. And it was cool, but it never felt right. You know, it never felt like. Chris Coyier The less characters, the bigger the text, the more characters, the smaller the text. That's what we're trying to do here, right? Dave Rupert Yeah. Yeah. Yeah. So, and that's the trick is inverse sizing. I, with fit text, I figured out linear scaling, you know, like how to make it scale with the parent width, you know, like you, you are scaling based on the space available. Right. Um, but oftentimes you, that's not what you want. What you want is if you have very long text, if you are like me and you write a small novel for your page titles, you want them. You actually want that to take up less space, but still have like hierarchy in the in the system. You want this long text to like shrink to an appropriate size based on how many characters are in there. You have to measure the text like there's no css text length or whatever so yeah or html yeah at some point you gotta count yeah so you have to do it server side though i do it in my template My my jekyll template and um you know but you can do it in a very quick javascript loop like query selector all h1 h1 data num cars or h1 data set oh dot length i guess if it's a string already Num cars equals tech content dot length yeah so pretty uh simple to do like from from getting that length but but the trick was that never worked until the adder upgrades because we talked About it, I think, last week on the show. Chris Coyier Sure, you could set data number cares equals 88, but 88 is a string and not useful in CSS. Dave Rupert Yeah, so it's going to try to like, if you try to put that in some math, it's going to be like 95 divided by string and it just craps out and CSS does nothing, kind of like what I was saying earlier Um so what's cool is now you can typecast it and say that's a number now so every time you pull when you pull this in it's a number and there's another trick like not all browsers have that So we actually just define the property and set an initial value and we tell it's a number two so like when it's doing its division um but the but the secret sauce is a ratio so you come up With the ratio like your ideal characters per line which is okay for a heading i'm going to just say it's 45 i feel like ratio is a fancy way of making a magic number okay yeah sort of it well It's it's ideal characters per line divided by the number of characters in your thing, the num cars that you actually have. Chris Coyier Yeah, yeah, yeah. And num characters per line is actually like a decision. Dave Rupert Yeah, it's a typographic like principle, I guess. It is, you know, 66 for like content is ideal. But you read blog posts, it's anywhere from 40 to 70 or something. Yeah. 45 to 70, but on mobile it's maybe 30 to 50 or something like that. So I picked 45, but you can do whatever you want. Um, I'm not your boss. So we take the, uh, yet I'm going to be boss of the internet soon. Um, you, so you take that, you make a. And what's critical about that is your ratio is now inverse. Small text will be like 45 divided by 20. And so that's going to be a number greater than one. So it's going to try to multiply it big, right? Or if it's long text, it's 45 divided by 200. So now that's a very small number. So it's going to, so when I say like, and now I put it in a clamp function, I have a min font size, 1M, a max font size, 4M. And then I'm going to times that max font size by that ratio, that inverse ratio. Right. And large text or small, short text, sorry. ([Time 0:50:20](https://share.snipd.com/snip/a33ba27b-e2d2-459c-beae-0a10b13d1d1a)) - **Inverse Text Sizing** - Implement inverse text sizing by decreasing font size as the character count increases, rather than scaling linearly with parent width. - Consider server-side or quick JavaScript loops to measure and adjust text size based on content length. Transcript: Chris Coyier Can do this i coughed up an old old php implementation of it that i used on my quotes on design site but it was i looked at the code and i was like oh my god i could i feel like five years old looking At that code it's like split string by characters if characters greater than 10 then font size equals 32 pixels or something i wrote some very magic number rific well i've done the same Dave Rupert Thing in javascript you know you're like, if numcars greater than 32, add class large, you know, that sort of thing. And it was cool, but it never felt right. You know, it never felt like. Chris Coyier The less characters, the bigger the text, the more characters, the smaller the text. That's what we're trying to do here, right? Dave Rupert Yeah. Yeah. Yeah. So, and that's the trick is inverse sizing. I, with fit text, I figured out linear scaling, you know, like how to make it scale with the parent width, you know, like you, you are scaling based on the space available. Right. Um, but oftentimes you, that's not what you want. What you want is if you have very long text, if you are like me and you write a small novel for your page titles, you want them. You actually want that to take up less space, but still have like hierarchy in the in the system. You want this long text to like shrink to an appropriate size based on how many characters are in there. You have to measure the text like there's ([Time 0:50:34](https://share.snipd.com/snip/22600302-a67e-4825-ac25-34b8d51946ec)) - **Viewport Units for Big Text** - Viewport units can sometimes replace complex fit-to-width text scaling for decorative massive texts. - Simple viewport-based sizing with calc and rem fallback offers an easy alternative for big display text. Transcript: Dave Rupert It's not exact like you'll see little half pixels. But optically, it looks correct. Absolutely. Chris Coyier So it's a pretty efficient tool for that like too so you can achieve that effect use keys this thing if you need it exact but you know this thing i was tempted to it was i was trying to do some Fit to width stuff when it's all it's almost decorative sometimes what you're trying to do with fit to width like it's it's a generally like a fairly small word that becomes enormous Like the home page of fit text or what and i was like you know you can do this with just a viewport unit you know like it's a magic number then so that's a bummer but and i know that you're supposed To put a little um calc in there and put in some rems or something so that it scales with the user's choice too but like almost not when it's it's a enormous already and two it's just a decoration Like it's barely a it's you know i don't know like it was like one of the rare cases where i'm like setting some text in a viewport unit is like almost okay if it's a one-off that's enormous Anyway yeah not yeah well and ([Time 0:58:16](https://share.snipd.com/snip/5c7110cb-d2b7-4215-9d34-a76e5db6944f))