213: Is CSS a Programming Language? w/ Kevin Powell

[00:00:00] Intro: Welcome to Syntax. Welcome to a brand new episode of the Front End Happy Hour podcast. Welcome to this week’s JS Party. Live from Ship Shape Studios, this is Whiskey Web and Whatnot. With your hosts, Robbie the Wagner, and me, Charles William Carpenter III. That’s right Charles. We drink whiskey and talk about web development.

[00:00:27] Intro: I mean, it’s all in the name. It’s not that deep. This is Whiskey Web and Whatnot. Do not adjust your set.

​[00:01:00]

[00:01:36] Robbie Wagner: Hey, what’s up everybody? Welcome to Whiskey Web and whatnot with your hosts, RobbieTheWagner, and Adam Thomas Argyle, The Nerd.

[00:01:47] Robbie Wagner: Yeah, we found one. Yeah, that’s kind of like Charles’s, uh, but you know, it’s, uh, a little more nerdy. I’m not a third, but Yeah. done.

[00:01:56] Adam Argyle: On the show today, we have Kevin Powell, twitcher, [00:02:00] tuber, teacher, hacker, speaker, writer, instructor, and influencer, most known for his YouTube channel. Host of the General Musings podcast instructor on front end Masters, a front end friend making his corner of the internet just a little bit more awesome and helping people fall in love with CSS Kevin Powell.

[00:02:15] Adam Argyle: Everyone, welcome to the Whiskey web and whatnot. Show.

[00:02:18] Kevin Powell: Oh, thank you so much. I’m blown away a little bit by that. I, it’s good. Yeah. Thank you.

[00:02:24] Kevin Powell: I

[00:02:24] Adam Argyle: You have a stack of compliments. It’s really fun to go

[00:02:27] Kevin Powell: Yeah,

[00:02:27] Kevin Powell: I feel like every time I have a guest on now I need to step up my game ‘cause I definitely that that was awesome. I.

[00:02:36] Adam Argyle: I like doing it. It’s from CSS day. You were there I think when I first started doing these. and they’re just so fun

[00:02:41] Robbie Wagner: yeah. It’s much more fun than I would just be like, Hey, it’s you. What do you do? Tell the people.

[00:02:46] Adam Argyle: and make it short. ‘cause I would like this whiskey

[00:02:48] Kevin Powell: Yeah.

[00:02:51] Robbie Wagner: Yeah. Speaking of which, let’s jump into

[00:02:54] Robbie Wagner: it. I’ve got Crown Royal Black In a little baggie as it always

[00:02:59] Adam Argyle: little baggy. [00:03:00]

[00:03:00] Robbie Wagner: These are all over my dad’s house ‘cause his favorite is Crown Royal and he has like every flavor and just keeps all the bags.

[00:03:06] Robbie Wagner: And I’m

[00:03:06] Robbie Wagner: like, what are you gonna use those for? It’s like,

[00:03:09] Robbie Wagner: I don’t know. but yeah, so this is, , 90 proof. It’s not age stated, and they don’t really tell you what it’s made of other

[00:03:15] Robbie Wagner: than it’s high rye Canadian whiskey. , And it’s supposedly matured in like darker charred barrels for longer or something, which makes it darker, which is why they call it black, I guess.

[00:03:27] Robbie Wagner: And I should have taken this plastic off. Wait, I can just twist it. Can I,

[00:03:31] Robbie Wagner: ah.

[00:03:33] Kevin Powell: Yeah, they really don’t put much information on the bottle.

[00:03:35] Robbie Wagner: go.

[00:03:36] Adam Argyle: But they did have to say something. They’re like, ‘cause you’re like, all right, why is it, why is it the black version? And they were like, we made it

[00:03:43] Robbie Wagner: It’s darker.

[00:03:44] Adam Argyle: It’s darker because we, put it in the thing long. It’s so vague. The sentence is just so succinct. It’s

[00:03:50] Robbie Wagner: What’s the O-K-L-C-H value?

[00:03:53] Robbie Wagner: Can someone tell

[00:03:53] Adam Argyle: Ooh. Yeah. Oh, it’s definitely got, . It’s got a higher chroma, but also [00:04:00] less lightness. You can tell ‘cause it’s, uh, down there towards the darker hue

[00:04:03] Robbie Wagner: Mm-hmm.

[00:04:04] Adam Argyle: or it’s just kind of like darker in nature. Ooh. Opacity is even less. It’s, it’s like it’s crowned black. Maybe it is a little darker.

[00:04:13] Adam Argyle: Ooh, the smell is sweet apples. I was eating blackberries earlier. Maybe that’s on my fingers too. It smells like, Hmm.

[00:04:20] Robbie Wagner: Definitely bright fruit

[00:04:22] Robbie Wagner: of some kind.

[00:04:23] Adam Argyle: Oh, a bright fruit. Not a dark fruit. Like not a dark cherry, but a light cherry.

[00:04:27] Robbie Wagner: Um, not, not really cherry, I’m just saying like, uh,

[00:04:31] Robbie Wagner: like citrusy, appley, ,

[00:04:33] Robbie Wagner: I don’t know, not like a blackberry pie per se.

[00:04:36] Adam Argyle: Ooh. There’s some of the blendedness. The initial punch was sweet. But it finished really spicy. Ooh,

[00:04:43] Kevin Powell: Oh yeah.

[00:04:44] Robbie Wagner: Wow. This is much different than normal Crown Royal. actually has some whiskey flavor, which the Crown Royal typically doesn’t. It’s just super sweet. It’s,

[00:04:51] Robbie Wagner: it’s yummy, but it’s like, doesn’t really taste like whiskey. ,

[00:04:54] Robbie Wagner: Interesting. this is not bad.

[00:04:55] Adam Argyle: is enhanced. This is better.

[00:04:57] Adam Argyle: What am I gonna do with this bag? I can’t let my kids [00:05:00] have it because, uh, I just, trauma from when I was in high school and all the different paraphernalia people had in their crown bags, it’s like all that was good for,

[00:05:08] Adam Argyle: I just remember they would stink so bad and be like, Hey, what’s in that bag? Dang, bro. Geez, my goodness. That is a gnarly bag.

[00:05:14] Robbie Wagner: Hmm. it doesn’t permeate the

[00:05:16] Adam Argyle: what’s going on.

[00:05:17] Robbie Wagner: I feel like it would,

[00:05:18] Adam Argyle: just didn’t know.

[00:05:20] Adam Argyle: Oh, I forgot to toast. Oh, I wrote a toast. Okay, so. , Before we take our first sip, everyone

[00:05:28] Adam Argyle: we toast at the precipice of a momentous occasion for our dear friend Kevin. His channel a testament to his wit and wisdom is on the verge of a 1 million subscribers and 100 million video view. May your creative spirit continue to burn Bright, Kevin. And may your journey to 1 million subscribers be but the first of many such triumphs.

[00:05:49] Adam Argyle: We also toast me as I embark on a new journey at Shopify. A toast for one, a milestone reached and another a path newly forged. Cheers my [00:06:00] friends.

[00:06:01] Robbie Wagner: Here. Here.

[00:06:04] Adam Argyle: That’s fun

[00:06:06] Kevin Powell: That was really

[00:06:07] Robbie Wagner: That is fun.

[00:06:08] Kevin Powell: once again and yeah.

[00:06:09] Robbie Wagner: Now, should we also forget a bunch of other things in the notes and like skip to something else real quick or,

[00:06:16] Adam Argyle: No, now’s now’s when we rate it right, so that we can get past the rating and

[00:06:20] Adam Argyle: get

[00:06:20] Robbie Wagner: I was gonna actually forget the rating.

[00:06:22] Adam Argyle: Oh.

[00:06:23] Robbie Wagner: Oh

[00:06:23] Robbie Wagner: yeah. Okay. So on this podcast, very stringent rating system, zero to eight tentacles, zero being the worst, eight being the best. Four or five or somewhere in there, being middle of the road. , Yeah, if you hate it. Wouldn’t even clean your toilet with it. Zero. If you would want to not drink anything else forever.

[00:06:41] Robbie Wagner: It’s an eight. What do you think, Adam?

[00:06:43] Adam Argyle: This is in the, the, this is good sixes. Maybe a high six, maybe like a six and three quarters, maybe even a seven. Like it’s very drinkable. , It has a good burn. So we’re at a good 45. It’s, , got a good whiskey flavor, like you’re saying, but the initial hit is kind of sweet. It’s quite [00:07:00] nice.

[00:07:00] Adam Argyle: So, oh, I need to say a specific number.

[00:07:02] Adam Argyle: I’m going to, let’s do seven. I think this is good. I would bring, I would whip this out for friends and be like, it’s a crown black night, y’all.

[00:07:08] Robbie Wagner: Nice. Kevin, what do you think?

[00:07:10] Kevin Powell: Yeah,

[00:07:10] Kevin Powell: I was pleasantly surprised by it. , I’m not a huge fan of the regular one. , Like you said, it too sweet for me. This one has a little bit more to it, but really drinkable. , So yeah, I, I was thinking six. Adam might be swaying me up to a seven, six and a half. Can I go with half grades or do you

[00:07:28] Robbie Wagner: you can.

[00:07:29] Kevin Powell: Yeah,

[00:07:29] Kevin Powell: I’d say like a six and a half for sure.

[00:07:31] Kevin Powell: Yeah, it’s, I really enjoyed it. I think it, it’s very drinkable. , Yeah, I, it’s a good one.

[00:07:37] Robbie Wagner: Nice. Yeah, I’m a little conflicted. I feel like in terms of Crown Royal, I would give it a seven in terms of all whiskey. I think six may be more appropriate. So I’m gonna say six.

[00:07:49] Adam Argyle: Nice. That’s a good comparison. Yeah, I was comparing it to previous ones. It’s good to put it in the grant

[00:07:53] Kevin Powell: Yeah.

[00:07:54] Robbie Wagner: Yeah.

[00:07:54] Robbie Wagner: All right. Should we do a few hot takes real quick?

[00:07:58] Adam Argyle: Yeah. Hot. Take [00:08:00] him, give it to him.

[00:08:00] Adam Argyle: Robbie.

[00:08:02] Robbie Wagner: CSSA programming language?

[00:08:04] Kevin Powell: Oh, geez. Yeah. I mean,

[00:08:05] Kevin Powell: I have to say yes ‘cause I think like my community would abandon me if I didn’t. But at the same time, like it’s not a hill I would die on. call it what you want to call it and. I enjoy it. I’m gonna keep writing it. Whether you want to, gatekeep on that or not, if that’s the hill you want to die on, then go for it.

[00:08:21] Kevin Powell: I have other things I’ll stress about more, but for me, I think it is, and I think there’s more and more arguments every day with all the new things and all the new features that we have with it these days, that it’s hard to just sort of say it’s not in a lot of ways.

[00:08:33] Robbie Wagner: Yeah, for sure. I usually ask people if HTML is a programming language and I usually get no, but then I follow up with is CSS one and they’re like, wait a minute, maybe because it

[00:08:43] Robbie Wagner: does have a lot of math and like, can wheeler’s like hey, that is definitely a programming language. I’ve seen what the kids do with that these days. Like yeah, I tend to agree. I think you can do a lot.

[00:08:53] Adam Argyle: It’s got a Ken endorsement. I love it.

[00:08:56] Kevin Powell: Yeah, it’s one of those things too now where like at one point you could say like, I, [00:09:00] I feel like most of the people that are like, no, it’s not, it’s just a declarative language. And I’m like, all you’re doing is the really simple stuff with it where like, yeah, you’re setting a background color, like that’s not very fancy, like of course.

[00:09:09] Kevin Powell: but. Yeah, I just think with everything you can do these days and like there’s all the CSS only stuff that’s out there, even then, like even if you just go to doing like background blue, like you did something pretty cool. Like I’ve had students, like that was my favorite thing when I was teaching in the classroom first day of like css.

[00:09:25] Kevin Powell: And they change the color of the text or a background color, and they’re so excited and they’re like, I did that on the computer with code. And I’m like,

[00:09:33] Kevin Powell: yeah,

[00:09:34] Adam Argyle: am God.

[00:09:35] Kevin Powell: yeah. And I’m like, you know, yeah, you’re programming. Go for it. Like, this is awesome. It’s, it’s the gateway drug into everything else. You know, for people that don’t come from the computer science backgrounds, I think.

[00:09:44] Robbie Wagner: Yeah, for

[00:09:45] Adam Argyle: Good answer. Good answer.

[00:09:47] Robbie Wagner: All right, Adam, you wanna do one? You want me to keep going?

[00:09:50] Adam Argyle: Yeah. Oh, there was a couple phone ones in here. Oh, I mean these all, let’s do the hot takes. Yeah.

[00:09:54] Adam Argyle: So was CSS in Js a mistake?

[00:09:56] Kevin Powell: I think so, but it wasn’t something I’ve [00:10:00] dealt with. Like I wouldn’t go into it as like, that’s the approach I would take to doing it and most of my experience with it. Was when I was doing some consulting work and it’d be like these complete disasters that where people were like asking me to come in and fix, where it was just like they’d leaned into it so hard that they’re just like, , it was just every single component would just have like declared everything.

[00:10:21] Kevin Powell: ‘cause it was like, oh, here’s my Figma files telling me I need these things on it, so I’m gonna clear the font family and the font size and the color and all this. And you’re just like, it’s a tool that can be used and can be effective. But it can also lead to lots of misuse.

[00:10:35] Kevin Powell: And I guess it served a bit of a purpose for a while, but I don’t, I don’t know. It wasn’t, it’s not my cup of tea. Let’s say that

[00:10:42] Adam Argyle: Kind of sounds like you’re saying it was a mistake and now it’s dead.

[00:10:45] Kevin Powell: What?

[00:10:46] Robbie Wagner: I heard. Yeah. Yeah, he is just too nice of a guy. He won’t say that.

[00:10:52] Adam Argyle: I love it.

[00:10:53] Adam Argyle: All right. You can only pick one Kevin Grid or Flexbox. Which one?

[00:10:58] Kevin Powell: it’s should be an easy answer for [00:11:00] Grid in a way. ‘cause I use it so much more than Flexbox. But there’s a few things with Flexbox that. I wouldn’t wanna lose and I’m like, I can hack the other stuff I do to try and get, like, to get close enough to the grid things I do. So, , I think if it was like for everybody out there and I was deciding that like everybody could only use one, I’d probably choose grid.

[00:11:19] Kevin Powell: ‘cause I think you can just simplify enough things and like just deal with the result. Otherwise, I think if it’s people that really know what they’re doing, you’re probably fine if you just have Flexbox. Which it feels bad ‘cause I’m like the biggest stand for grid and get very mad at people that are like, oh, you don’t need that for just use Flexbox.

[00:11:37] Kevin Powell: But yeah, I think I could, manage better without grid, which feels kind of weird to say.

[00:11:44] Robbie Wagner: I think, yeah, I think I feel the same way. We had Flex for so long, I feel like that, like we got used to working without grid and so while I do enjoy using it when it has a, you know, clear use case, I, I do reach for Flex sometimes. Like, I don’t know, I don’t think you’re ever gonna get rid of it.

[00:11:59] Kevin Powell: I think, [00:12:00] you know, we need it still. , they both do some stuff really well. , I find, again, I use Grid more than I use Flex on like a regular base or like, if I was to count the declarations, I’m sure, you know, CSS stats, whatever, I would have a lot more grid declarations and Flex Box on a regular project. , But just there’s like, you can muck around with Flexbox and do something. You can do it with Grid two though. I don’t know. I think. Uh, now, now I’m not sure. I’m talking myself around the other way.

[00:12:24] Robbie Wagner: Hmm. You can do anything with anything if you

[00:12:26] Robbie Wagner: try hard enough.

[00:12:27] Kevin Powell: Yeah, Just,

[00:12:28] Adam Argyle: It’s true. Just use

[00:12:30] Kevin Powell: yeah. Yeah.

[00:12:31] Robbie Wagner: Tailwind or vanilla? CSS.

[00:12:34] Kevin Powell: But for me, that’s an easy one. , Vanilla CSS all day long.

[00:12:37] Robbie Wagner: Okay.

[00:12:38] Robbie Wagner: Yeah,

[00:12:38] Robbie Wagner: I wasn’t gonna say was tailwind a mistake? I wanted to rephrase it to the same thing that we always ask,

[00:12:44] Kevin Powell: my token response for people asking me about Tailwind is that I get why people like it, but it’s not for me. Again, I see what it’s solving and why people like it., The big issue I have is a lot of people that I’m helping are beginners and they. Start doing all this stuff with [00:13:00] Tailwind that don’t really know it, trying to debug beginner CSS can be hard enough when they don’t really know what they’re doing. And then when it’s all just this wall of classes, I’m just like, oh my God. It can be a good tool for people who know what they’re doing with CSS already. , I get people like that. It has like, you know, you’re not worried about, is it 12 pixels or 13 or 14. You just have your tokens In a way that are, are done. So like, yeah, I can see how that can be useful, but yeah, it’s not my cup of tea.

[00:13:25] Robbie Wagner: Yeah, I hadn’t really considered. the beginner, like I’ve always been thinking about, you know, us as developers, what do we choose? But then it’s like, if you’re learning, that could be very confusing. I, I agree with that. , ‘Cause yeah, I, I think when I had a decent CSS foundation and then I jump into Tailwind, it actually increased my CSS knowledge.

[00:13:43] Robbie Wagner: ‘cause their docs are very good at teaching UCSS actually, which is kind of funny. Yeah, I, I think it would be very confusing if you’re like, oh, you just throw classes on stuff to style it, and you have no idea what the CSS is behind the scenes. That would be hard to grok.

[00:13:56] Kevin Powell: Yeah, definitely. And it’s, and I think like now [00:14:00] it’s, they’re starting to move more towards. CSS in some ways. But I’m curious how they’re gonna handle some of the newer features that are coming as well. Because there’s some stuff that I’m like, oh, you can’t really do that with a class. I don’t know what, you know, I I, I’ll be curious to see.

[00:14:13] Kevin Powell: ‘cause there’s smart people working on it, so I’m sure they’ll come up with something.

[00:14:17] Robbie Wagner: I, I’m sure they’ll make it work. Yeah.

[00:14:20] Adam Argyle: It’s funny, they both vanilla and tillen have a a copy paste issue. If you’re a beginner, you know, like, I like the way that looks. I want that over here. So you go copy paste it. But with tailwinds, there’s one added kind of difficulty in the debugging, which is you gotta, so you find the element right now.

[00:14:37] Adam Argyle: The element, instead of listing all those styles together in one little block, for you to easily go read, you need to know that you can twirl open the class, the CLS. What it’s, it doesn’t even say the word class or give you a hint that this is what it, the cl. So you gotta open up the CL and then once that’s open, uh, let’s hope you don’t have a whole bunch of classes on there.

[00:14:55] Adam Argyle: ‘cause if you do, then you’re just looking at a big flat list and you gotta know what empty and all [00:15:00] these different things mean. So now you’re in there toggling , is this how most people debug tailwind as they go, undo a bunch of classes and then slowly add them back in? Or do you try to guess at the subtractive debugging strategy?

[00:15:12] Adam Argyle: Like what’s the way to. if you’re new, how do you uncover what happened?

[00:15:16] Robbie Wagner: , it depends as in all things, but it’s actually tricky because. If your setup is tree shaking out the unused classes and you want to try another class like in your dev tools, it’s like, nope.

[00:15:31] Robbie Wagner: So yeah, it, it all depends on your setup, , it’s not always straightforward. I.

[00:15:35] Adam Argyle: Happens with my custom properties too. When I use, , the plugin I wrote for the, the post CSS gyp props, which will only put in the CSS properties that you used. It’s the same deal. You’re like, oh, I don’t like that blue. Lemme go try on blue number four instead of blue number three. And it’s like, we don’t know what blue four is.

[00:15:50] Adam Argyle: And I’m like, what? Oh yeah, I have to go back. I gotta do the full round trip just to add a blue color to my style sheet. That sucks.

[00:15:57] Robbie Wagner: Yeah. Complaining about these really nice tools we [00:16:00] have is, uh, funny.

[00:16:05] Adam Argyle: I wanna know, where’s your favorite place to write CSS? Do you want type ahead? Do you want popups and things to assist you? Do you wanna see values or do you just want like a text editor? Or do you want be in code pen? You got an IDE. Where is Kevin Powell in his happy place?

[00:16:19] Adam Argyle: Just smashing CSS out, just like.

[00:16:23] Kevin Powell: I am, I’m all over the place. I do go, if I’m thinking of something, CodePen would be the first place I go to. , I don’t like auto complete stuff in general, though. Every now and then you’re happy It’s there when you’re, like, when you, you forgetting a value name and you’re like,

[00:16:36] Kevin Powell: you want that list to like,

[00:16:37] Adam Argyle: size? Is it a, yeah, there’s all these weird ones now. Yeah.

[00:16:40] Kevin Powell: I have like five different profiles in in VS code. ‘cause I have like my recording one and then a clean recording one for shorts and then another recording. One for other things I’m doing you know, is formatting on or off. And. It’s just such a mess for me in, in terms of like, is auto complete on or off and is there the popups that are coming here and there, and then like, [00:17:00] so I’m just, yeah, I don’t know.

[00:17:01] Kevin Powell: I’m a bit of a mess, but I’m a bit of a purist. I think for me, I, I like having it as clean as possible with like, if I do need a little bit of help, I’d appreciate it. Sometimes from like a little list I can, I can choose from. but I have the advantage of living in that all the time, so I generally know what I want.

[00:17:18] Kevin Powell: And even I do get asked in my videos a lot why I don’t even use Emmett with CSS, which I don’t, and I’m like, I use it for HTML ‘cause that’s long to write. And

[00:17:26] Kevin Powell: I’m just

[00:17:27] Adam Argyle: I do the same

[00:17:28] Kevin Powell: I never bothered. And like, you know, I guess, , and I’m like, it’s not that long to write. Like there’s not that many, most declarations aren’t that long. so yeah, and I found, I’ve tried a few, like of the more like AI auto complete stuff that’s trying to read your mind and I just get frustrated with it. So I, I don’t. I just go old school.

[00:17:45] Adam Argyle: Nice. What’s the scariest CSS feature? Like if I came up to you and you didn’t see me and I was behind you and I just whispered something over your shoulder like a CSS property, what would send goosebumps just down your back?

[00:17:57] Kevin Powell: Geez, that’s a good question. [00:18:00] It’d be like

[00:18:01] Kevin Powell: any of the new

[00:18:01] Kevin Powell: stuff that I don’t know. ‘cause people always expect me to know everything with it. And then like anytime I’ll be doing a live stream and I’m like, okay, I’m gonna try something, like a new thing I haven’t really done before.

[00:18:12] Kevin Powell: And if it’s like, usually it’s not that hard, but like let’s get into view transitions and I’m just like, oh my God. Like this. I opened a can of worms on this one. This isn’t what I was expecting when I first go into it. But then, yeah, I’m trying to think. View transitions still sort of scare me a little bit in that I always feel like I’m missing something or like I was doing something the other day and then I found out about, I don’t remember what, it’s the gated ones I think, or guarded.

[00:18:35] Kevin Powell: Guarded view transitions. So you can have, like if you’re running one, it won’t run all of them on your page, which is the default. And then I’m like, okay, that solves the problem that I came up with a really hacky solution for. I’m glad that’s there, but it’s just like, there’s always another layer and I find, you know, it’s good to learn.

[00:18:50] Kevin Powell: It’s fun with that, but. , It’s intimidating sometimes too, and you’re just like, I’m trying to learn this, and it just seems like a never ending hole. I can’t imagine people that are not able to spend hours [00:19:00] building silly demos.

[00:19:01] Adam Argyle: Yeah. View transitions is a hole that you can fall into, , that is for sure. It starts out so easy. You’re like, oh, I gave you a name and then I changed the dom, and you morphed. I am awesome.

[00:19:11] Adam Argyle: And then

[00:19:12] Kevin Powell: Making the, like a filter and they just like, oh, I, I used my filter and the pieces just slide around. I didn’t have that, was it? Wow.

[00:19:19] Kevin Powell: Yeah.

[00:19:20] Robbie Wagner: Which was your first CSS pre-processor?

[00:19:24] Kevin Powell: Uh, sas. yeah, I use SaaS a lot. I, I

[00:19:27] Kevin Powell: never,

[00:19:28] Adam Argyle: SASS or SCSS.

[00:19:30] Robbie Wagner: oh,

[00:19:30] Kevin Powell: oh, so I, I definitely was the SASS to start with.

[00:19:34] Kevin Powell: Like, oh, this is cool. It’s clean, it, it’s awesome. , And I think the only reason I stopped was because I was recording videos. I actually, at the time I was teaching in the classroom too. And the amount of times I’d be doing demos like in front of my class and just forget a semicolon or not put like a curly brace.

[00:19:50] Kevin Powell: And then I was like, okay, I’m not sure this is working for me just ‘cause I’m building like the wrong muscle memory. And then the same, I would do videos using it at one point I was like, if I’m [00:20:00] recording a video, it makes more sense to use SCSS just because it’s more accessible for people who don’t know it. And I was like, okay, I’m gonna go down that route instead. , And then I sort of just got used to it and never went back. But I still, I have a fun spot for the, the clean syntax at SASS for sure.

[00:20:17] Robbie Wagner: did it not have curly braces?

[00:20:18] Adam Argyle: SASS did not.

[00:20:20] Robbie Wagner: Oh,

[00:20:21] Robbie Wagner: gross.

[00:20:21] Adam Argyle: No curlies. No semicolons, but it did have colons. And then you had stylus, which had none of that junk. It had no curlies, no, no colons. No

[00:20:30] Robbie Wagner: so I have to hit the space bar and like format stuff, like

[00:20:33] Robbie Wagner: there’s

[00:20:34] Robbie Wagner: no auto

[00:20:34] Adam Argyle: No. You can hit tab. Yeah, you could tab in or space. It was a,

[00:20:38] Robbie Wagner: Well, I have to

[00:20:38] Adam Argyle: wasn’t

[00:20:39] Robbie Wagner: like I can’t just type a gross string and go auto format

[00:20:42] Robbie Wagner: like, like you can in SCSS.

[00:20:46] Kevin Powell: Yeah. No, I was just saying I definitely lean on that more nowadays where I just sort of pound the keys and then format. Okay. There. That looks nicer. Yeah.

[00:20:55] Robbie Wagner: Yeah.

[00:20:55] Robbie Wagner: I

[00:20:55] Adam Argyle: it feels like a,

[00:20:56] Robbie Wagner: I.

[00:20:57] Adam Argyle: did TypeScript learn from sas. You [00:21:00] know, like stay close to the language. That’s how you gain adoption. Look at all the other failed ones that tried to superset and coffee script was more like SaaS and now you have TypeScript, which is more like SaaS. Oh, wait, that’s confusing to anyone that doesn’t know what I’m talking about, but it’s kind of interesting.

[00:21:14] Adam Argyle: A little comparison.

[00:21:15] Robbie Wagner: well I think coffee script really influenced, like all the modern JavaScript stuff they took

[00:21:20] Robbie Wagner: like.

[00:21:21] Adam Argyle: Hell yeah, it did.

[00:21:22] Robbie Wagner: A lot of the nice things and then none of the craft that no one wanted. And, uh, just put it right in JavaScript. So Thank you. Coffee script.

[00:21:31] Adam Argyle: I still miss the two arrow functions where you had the, the thick arrow and the thin arrow. I thought that was cool. And ES six only took one. They took the thin

[00:21:39] Robbie Wagner: What was, what was the, the other one?

[00:21:41] Adam Argyle: One was just a, anonymous function, and then the other one bound this to your function.

[00:21:48] Robbie Wagner: Okay. Yeah. So we have that, but we don’t have one that doesn’t bind

[00:21:51] Robbie Wagner: this.

[00:21:52] Adam Argyle: yeah, so we can’t arrow function just a, so we have to type function, or we do the, the thin arrow. I know it’s [00:22:00] garbage.

[00:22:01] Adam Argyle: I’m gonna pop one ‘cause this was, ‘cause I was listening to your podcast, uh, with you and Sarah Swann which was a great episode, by the way, also, Sarah. So cool. Sarah, you’re so cool. I don’t, I don’t, I doubt you’re listening to the Whiskey bro show, but you know what? You’re super cool. totally like, respect everything you do.

[00:22:17] Adam Argyle: Okay. , So y’all were talking though about like, some CSS features seem to ship really fast, you know, and Sarah’s like, I try to keep a thumb on the beat, you know, so do you, and then you’re all like, it’s here. , We don’t know how long it was in an experimental flag, you know, like I can’t keep a track of every flag and think about the dates and all that stuff.

[00:22:35] Adam Argyle: And so you’re all like, sometimes things ship faster than maybe you were ready for.

[00:22:40] Adam Argyle: So my question to you is. Which CSS features do you wish would just hurry the hell up because they’re taking way too long.

[00:22:48] Kevin Powell: well, I guess they’re sort of here with like the state querying with like the stuck and the stuff you and you were involved in there. , That’s super useful and I could use that and I haven’t dove too deep into [00:23:00] it, but definitely, . That’s one where I’ve been like, yeah, we, need that.

[00:23:03] Kevin Powell: Another one is, and I don’t remember the name of it, I don’t even know how CSS specific it related is, but, , I just, for coming on, I saw a post on Blue Sky from Una about it. It’s like the, the tool tip thing now where you can like, I don’t know what it’s called. You can like connect.

[00:23:19] Kevin Powell: Yes. That’s it.

[00:23:21] Kevin Powell: Yeah. that looks pretty cool. I’m trying to think what else. I don’t know if

[00:23:24] Robbie Wagner: Like different than anchor

[00:23:27] Adam Argyle: It’s the dingle on the anchor. Well, it’s the dingle on the kite. So

[00:23:31] Robbie Wagner: what? Explain in better words, please.

[00:23:40] Adam Argyle: it’s, it’s, anchor’s always been really confusing. ‘cause you’re like, , when you tell someone, , it’s a anchor feature but then you’re like, oh, it takes two pieces to, for this feature to work, something is anchoring to somewhere else. The word anchor starts to get overloaded really fast. And so, , what did we call it?

[00:23:55] Adam Argyle: It was the. We tried to create good verbiage. It was the, [00:24:00] so there’s the anchor, which is like the thing that doesn’t move, and then the thing that does want to attach to it, the positioned element. So you have an anchor that stays stationary and a positioned element that somehow moves and attaches itself to that item.

[00:24:12] Adam Argyle: So that positioned element commonly would like to have a little dingle that points to the thing it’s anchored to so that

[00:24:20] Robbie Wagner: I like the little

[00:24:20] Adam Argyle: floating. Yeah, like the little down arrow thing. And so before the tether dingle was in CSS, uh, you that was actually impossible. You didn’t know which one of your try options ‘cause a an anchored element can move around based on screen real estate.

[00:24:36] Adam Argyle: So maybe it would be under or over based on what’s there or on the left side of the right side. And you didn’t know which one it was, so you couldn’t put your dingle in the right spot.

[00:24:43] Kevin Powell: I’m really looking forward to having a, a dingle pseudo class now.

[00:24:50] Adam Argyle: It’s gonna be a good dingle berry joke. Somewhere in there. It’s like, oh, there you go. Just need to use the tether. Make it a berry. There’s your, okay. That’s a good, that’s a good

[00:24:58] Robbie Wagner: Yeah. We could call it an [00:25:00] arrow. That’s what, uh, most tool tips would call it.

[00:25:03] Adam Argyle: You could, or the swoopy, you know you got the little swoopy because it’s a speech bubble. Swoopy be

[00:25:08] Robbie Wagner: So it doesn’t tell you, I haven’t actually used the anchor positioning stuff at all. I just know it exists. it doesn’t tell you which one it’s on. When it’s there, like if it flips, it doesn’t tell you that I have flipped.

[00:25:18] Robbie Wagner: Ooh, that sucks.

[00:25:19] Adam Argyle: Yeah, it’s, um, magic. So you declared, Hey, pick top or bottom. And then it goes, I picked one. And you’re like, yeah, how do I query or know which one it is? And they’re like, I don’t know.

[00:25:30] Robbie Wagner: hmm. Cool. This episode is sponsored by floating dom or floating UI or whatever it is. The one with that does the tooltips and tells you which side it’s on.

[00:25:38] Adam Argyle: Seriously. And floating UI even unfortunately, has some superpowers that anchor positioning can’t do. So if you’re looking for like a straight trade, it’s not, , equivalent, which is frustrating.

[00:25:49] Adam Argyle: Yeah.

[00:25:49] Robbie Wagner: Cool. I’m glad I didn’t try that experiment then. So we use it in Shepherd and we have to know what side it’s on,

[00:25:54] Adam Argyle: . So, wait, , Kevin, I haven’t seen it. And last I saw Tether was a pseudo element, but how does it know, which corner did they come up [00:26:00] with a state query for? So it was gonna be a container query, just like a scroll container query that can scroll state, is it anchor state?

[00:26:07] Adam Argyle: Asking for which

[00:26:09] Adam Argyle: side it’s

[00:26:09] Kevin Powell: I wish I could tell you, I, this is one of those ones where I’m like, that’s cool. I’m gonna keep my eye on it. But I didn’t dive into how it’s working yet. Yeah. yeah, I’m trying to think of the other things that are like that, but

[00:26:20] Kevin Powell: all the, the margin trim, text box, trim stuff, I’ve been waiting for that for like seven years.

[00:26:25] Kevin Powell: I think probably. I remember like a super early blog post on Medium, a long time ago on one of those that now I’m like. It’s finally happening. Yeah. Yeah. The scissors. Exactly. Yeah.

[00:26:34] Kevin Powell: And I’m like, It’s finally happening. Yeah. which is gonna be awesome. Definitely one of those things that is gonna be used a lot that, like people don’t realize that it’s just gonna become one of those features that they’re throwing in all the time, just to like cut those extra margins off that they don’t need.

[00:26:49] CTA: This just in! Whiskey.fund is now open for all your merch needs. That’s right, Robbie. We’re hearing reports of hats, sweaters, and T-shirts, as well [00:27:00] as a link to join our Discord server. What’s a Discord server? Just read the prompter, man. Hit subscribe. Leave us a review on your favorite podcast app and tell your friends about our broadcast. It really does help us reach more people and keeps the show growing. All right, back to your regularly scheduled programming.

[00:27:22] Adam Argyle: robbie, do you know what he’s talking about or should we get a classic Kevin Powell explanation? Amazing CSS explanation

[00:27:29] Robbie Wagner: you, you can explain it if you want. I, I don’t know. I understood kind of from when you went like this, but, uh, yeah.

[00:27:36] Kevin Powell: there’s two different ones. There’s Textbox trim, which I have a harder time explaining, but I think I’ve, I’ve actually used that one. Then there’s margin trim, I think is the one that , more people are gonna use.

[00:27:44] Kevin Powell: , Well, no.

[00:27:46] Kevin Powell: No, maybe not, but, okay. Margin trim is if you have, okay, say you do a card and the first element has a margin top and the last element has a margin bottom.

[00:27:54] Kevin Powell: ‘cause , you know, text always has margins on it by default, and then it’s either collapsing margins or what. Anyway, [00:28:00] anytime that would happen, it would just trim that margin off the top of the first element in the bottom of the last element. By default

[00:28:07] Robbie Wagner: you don’t have to have special cases.

[00:28:08] Kevin Powell: Yeah, and you

[00:28:09] Kevin Powell: can specify what axis too.

[00:28:12] Kevin Powell: So you can say like,

[00:28:12] Kevin Powell: only on the block axis or only on the inline axis. And so like if you have elements, I think the inline axis is less common just ‘cause you use gap for so many things these days. But there probably are some cool situations where it would come in handy. text box trim is the one where I’m sure everybody’s done it, where they have a button. And they have, it’s like the uppercase text and they put padding on the top and bottom of their button and it’s different on the top and the bottom, the like visual spacing is different. And that’s because typography has extra space on the top and bottom of like how the characters are painted. ‘cause they need accent room for the accents and room for descender characters. And so you’ll actually be able to say like, no. Instead of having all this extra space on the top, you’re gonna trim to the top of the cap letters, and on the bottom you’re gonna trim to the baseline. So you just remove all that extra [00:29:00] space from the topography. So the padding on your button will actually be what you’ve declared instead of this weird extra space around the sides.

[00:29:07] Robbie Wagner: Oh, nice. Yeah, I remember having to do bespoke padding numbers on all sides

[00:29:12] Robbie Wagner: of buttons before, so that that will be nice to have.

[00:29:16] Robbie Wagner: I.

[00:29:17] Adam Argyle: That’s noise. I, I hate that thing. ‘cause that always would, would pop up. You’d sit down with the designer and they’d be like, , the button’s not in the, the text’s not in the center. And you’re like, what?

[00:29:27] Robbie Wagner: Yeah,

[00:29:28] Adam Argyle: You know, and then you go look at it and you’re like, oh,

[00:29:30] Robbie Wagner: yeah. You zoom way in, you’re like, oh, you’re right. It is

[00:29:33] Robbie Wagner: one pixel off.

[00:29:35] Adam Argyle: then someone, yeah, someone goes, okay, okay, well just put line height

[00:29:39] Kevin Powell: yes. Yeah.

[00:29:39] Kevin Powell: Yeah.

[00:29:40] Adam Argyle: they have the word that says Grab or whatever, or tasty. And then the Y at the bottom of the Y is cutoff. And they’re like, why is the bottom of the Y cutoff? And it’s like, you’re in a whack-a-mole game with CSS now, buddy.

[00:29:53] Kevin Powell: Another one just before we go that, I’m excited for it, but I’m also like, I think it’s gonna change how CS S is written, is [00:30:00] the A TTR function, being able to take like not only be used as content on pseudo elements, so where that’s where you can actually like. Pull in any value from a data attribute and use it any way you want in your CSS.

[00:30:13] Kevin Powell: so I think

[00:30:14] Robbie Wagner: Tell me it’s not a programming language now.

[00:30:18] Adam Argyle: Honestly, that one is what you would call typecasting in a scripting language. That’s the only way that this could work because it was, , otherwise could be an attack vector. You could be adopting some data attribute that actually makes a request for a background image that then exposes something about this user.

[00:30:33] Adam Argyle: So instead, it’s type required, like, I want this data attribute as a string. As a number, and if it fails that typecast, then the value doesn’t show up in the right way. And you know, you have some issues, but still, I thought that was a really clever guard because otherwise this could have been a wildly robust attack vector system would be stripping data attributes off of Arian on the page and posting them as parameters on the query [00:31:00] string of an image or something.

[00:31:01] Adam Argyle: It’s just nuts.

[00:31:02] Adam Argyle: That

[00:31:03] Robbie Wagner: there’s a way to attack stuff, people will find it like

[00:31:06] Robbie Wagner: the NFTs and, PDFs and different things that just execute code. When you open it, it’s like,

[00:31:12] Robbie Wagner: cool.

[00:31:13] Adam Argyle: Or MPM install that just starts executing code, as post script. Yeah.

[00:31:18] Robbie Wagner: Yeah. The NPM stuff today was, , pretty

[00:31:20] Robbie Wagner: rough. Did you guys see all that?

[00:31:22] Kevin Powell: I missed that?

[00:31:23] Adam Argyle: Yeah. Although I didn’t follow all of it, but I know that it’s like a, it’s almost like an aftershock from the first earthquake, right? Yeah. Tell me mores.

[00:31:29] Robbie Wagner: there were several tweets that I saw, and I don’t know the full extent, but it was like, the one that affected me was the, like, tiny color was like one of them that was compromised, I guess. So Swatch is gonna need, uh, some fixes for that, I guess.

[00:31:43] Adam Argyle: .

[00:31:43] Adam Argyle: Color js. It’s a superior JS library for color. Anyway, I used a tiny color for a while also.

[00:31:50] Robbie Wagner: Hey, you’re, you’re a, uh, owner of the repo if you would like to open that vr.

[00:31:54] Adam Argyle: Hey, let’s, let’s pair on that

[00:31:55] Robbie Wagner: Yeah.

[00:31:56] Robbie Wagner: but anyway, so yeah, it was like that one and like some like 40 packages or something. [00:32:00] And then they were like, oh, by the way, also everything CrowdStrike has ever published and like a bunch of ember stuff. ‘cause they do a lot of ember work too. And I was like, Ooh, this matters. Like I should probably, uh, look into that. So yeah, I think everyone was kind of floundering today trying to make sure everybody was good. I.

[00:32:16] Adam Argyle: Yikes. are you familiar with, , CS s’s, one of its first? hacks that you could do the Billion laughs attack. Are you familiar with this?

[00:32:24] Robbie Wagner: No.

[00:32:24] Kevin Powell: I

[00:32:25] Adam Argyle: Do you know this one,

[00:32:25] Kevin Powell: I don’t think so.

[00:32:26] Adam Argyle: This particular attack, , originated with XML, , CSS enabled it when we got CS custom properties. So imagine you get a custom property and the value of it is law.

[00:32:38] Adam Argyle: And then custom property two is the value of. Law and law. Or law and law. Anyway, by the time you can, you can create a stack of 10 CSS variables that by the time you get to the 10th one, it’s referencing all the previous ones and they expand so big so quickly. It busts the memory of a browser. And we’ll crash a page.

[00:32:58] Adam Argyle: So it’s called the Billion [00:33:00] Laughs attack. ‘cause you’re just like, look at me. 10 lines of CSS crashing a browser. Pretty funny. So they had to put guards in there where you can only nest, , custom properties a certain level deep to prevent the billion laughs attack,

[00:33:12] Kevin Powell: I had never heard of that one.

[00:33:14] Adam Argyle: Who’s laughing now?

[00:33:16] Adam Argyle: It’s a stupid joke.

[00:33:18] Robbie Wagner: Oh God.

[00:33:19] Robbie Wagner: , Yeah, so we’ve talked about a lot of, weird things, new things, CSS things. , Why can’t AI write CSS though?

[00:33:27] Kevin Powell: That’s a good question.

[00:33:31] Kevin Powell: I think the biggest problem it has is that CSS is sort of the opposite of what it’s good at. like you need a little like encapsulated JavaScript thing, that that’s all it does. Like it can do that whatever amount of lines of code that is. Whereas like with CSS, sort of going back to what I was saying earlier with the problems with the CSS and JS we’re like. People that are coming from JavaScript backup are trying to encapsulate things ‘cause they’re not comfortable with the global scope of CSS and the way everything works with everything else. [00:34:00] So like, yeah, you can get AI to write you a some CSS for that component, but even now, what I’ve seen of it where it should be aware of the entire code base, it just seems to like ignore half of it.

[00:34:12] Kevin Powell: Just ‘cause it doesn’t wanna look at it. . I’ve seen it, look at something, start using custom properties for some parts of it, and then just completely ignore it for other ones. it has the problem of over declaring like crazy, which is a problem that a lot of beginners like to do, where it’s just like, it’s just throwing with the a hundred percent on things and these other things that it wouldn’t look like it would cause an issue, but it actually does cause a problem in that scenario that it, it’s used it in and then I guess it just doesn’t have like the visual. testing or any, like, it’s throwing that code in there, assuming this is what’s right. And with like a JavaScript, you can test the JavaScript pretty easily to see if it runs and actually does something. Whereas the CSS doesn’t really fail and it doesn’t know that it doesn’t fail ‘cause there’s no error coming to tell it that there’s a problem with that. And so it just, oh, this must be fine. , But yeah, I think there’s a lot of layers. To ai [00:35:00] struggling with CSS compared to other languages that it still also struggles with. You know, it, it’s getting okay at some stuff, but it’s, it’s far from perfect everywhere I think.

[00:35:09] Robbie Wagner: Yeah, I mean, AI struggles a lot, I think.

[00:35:12] Adam Argyle: That was an awesome answer. I’m just like,

[00:35:13] Adam Argyle: horn, I’m just like, rock on. I was like, geez, Louise. That was an amazing answer. I was like, just, just creep my fingers up here. Just like we side of the horns. Yeah. I was like, I have nothing to say. That was amazing.

[00:35:24] Robbie Wagner: Yeah. Yeah. I think part of the problem is that, it depends on where you’re using the CSS too, like the JavaScript, code can be used and it’s kind of gonna execute the same regardless. But like, it really matters what scope you’re in with the CSS if you’re gonna break everything else or not, or like, I don’t think it, I mean, it can’t think, we’ve talked about this before.

[00:35:43] Robbie Wagner: It doesn’t think, it just like pulls some answer to like a query and goes blah. So like, it doesn’t understand anything about how that should work.

[00:35:52] Kevin Powell: Yeah, and I’ve always been curious and not, I don’t think it’s so much these days, but like I remember at one point when it, people were first getting very [00:36:00] excited about it I think I made some content around like just the problems it was causing, but like at one point it said something that was really just, I, I wish I could remember what it was, but it was this. Like writing a reset or something and like explaining why it was the right thing to do. And the source it gave was this like random GitHub repo that had like 20

[00:36:19] Kevin Powell: lines of CSS in it. And I was just like, it’s gotten better, I think at vetting information and where it’s pumping from, but like those early days are really bad.

[00:36:26] Robbie Wagner: Yeah. Good for that one. Repo though, I guess.

[00:36:29] Kevin Powell: Yeah.

[00:36:30] Adam Argyle: Yeah, it’s like a open props sneaks in there pretty good too. I’m like, Hey, it does pretty good with open props. It must have trained itself for free on a bunch of stuff.

[00:36:37] Robbie Wagner: Oh, Well done.

[00:36:38] Robbie Wagner: I wonder how that.

[00:36:40] Kevin Powell: Oops.

[00:36:40] Adam Argyle: It’s like Chris Coyer is like, I know it. Read all the CSS tricks, you know, like, hey, toss me a buck or two. You know, like, but

[00:36:47] Robbie Wagner: He, he made his CSS tricks money.

[00:36:51] Adam Argyle: He did. He did.

[00:36:52] Adam Argyle: Here’s a little bit of a what not. Question for you, Kevin. Do you wake and bake?

[00:36:56] Kevin Powell: Do I waken big?

[00:36:57] Adam Argyle: yeah. Do you, uh, wake up and make

[00:36:59] Kevin Powell: [00:37:00] Oh.

[00:37:02] Adam Argyle: Because I know you bake

[00:37:03] Kevin Powell: I do, but I don’t waken, uh, act well. I sometimes it’s been a while, but, if I’m doing sourdough, it would be early in the morning or when I get up and get the kids to school and then it goes in the oven. But I haven’t made any in a while. Now I’m a little bit worried about the state of my starter, to be honest.

[00:37:19] Adam Argyle: Oh, that’s the yeast you carry over

[00:37:21] Kevin Powell: Yeah.

[00:37:22] Robbie Wagner: Does it go bad if you leave it for a while or something?

[00:37:25] Kevin Powell: I think I can get it back to life. I’ve had it in the fridge. You can sort of like prep it to go dormant, I guess. , And then you, get it out and start feeding it. But it’s been a little while now, so we’ll see if I can revive it. It’s not

[00:37:37] Kevin Powell: that hard to start a new one, but yeah, it’s, it’s a bit of a pain in the butt if you’re not like actively baking constantly,

[00:37:44] Robbie Wagner: Yeah.

[00:37:44] Robbie Wagner: How did people figure that out? Like

[00:37:47] Adam Argyle: Seriously.

[00:37:49] Kevin Powell: Yeah,

[00:37:50] Robbie Wagner: things that are just, I mean, I’m sure the first one was an accident, but then like, how do you perfect that science? I don’t, I don’t know.

[00:37:55] Kevin Powell: Even like finding it as an accident, like anything to deal with [00:38:00] fermentation, I’m just like, the steps in fermentation that are going on and then you decide to try and consume it just seems really bizarre to me.

[00:38:07] Adam Argyle: Y. Yeah, curdling. Anything with time, you’re like, oh, you let that just be in the sun or out until it grew stuff. And then you got really hungry. I don’t know.

[00:38:16] Robbie Wagner: I’m assuming, like one of the original ones was wine. Like somebody put a bunch of grapes in a barrel and left it for too long and people were like, oh, juice and drank it. And they’re like, wait, I feel good. And they’re like, all right, we could do this with

[00:38:29] Robbie Wagner: more

[00:38:29] Adam Argyle: Why is grandpa dancing? He hasn’t danced in 20 years yet.

[00:38:34] Robbie Wagner: yeah. So yeah, I mean there were probably also a lot of people that ate stuff they shouldn’t have and, uh, didn’t make it so.

[00:38:41] Adam Argyle: That is true.

[00:38:42] Adam Argyle: What about brewing beer? , Are you doing that? Have you ever made whiskey? I don’t know. Tell us a little bit about some of the drinks you made. Oh, kombucha too. So you’re, you’re willing to watch things bubble and fester and, and then drink it

[00:38:52] Kevin Powell: Yeah. As I said, I wouldn’t,

[00:38:54] Kevin Powell: I wouldn’t have touched any of it if I never knew that was the process. But now that I know that it’s safe and I [00:39:00] can get something good out of it, I’m curious about like fermentation in general. I think it’s. , So I haven’t distilled anything where I used to live.

[00:39:07] Kevin Powell: Technically you weren’t allowed where I’m living now, you can, so maybe one day, I don’t know. But, , beer’s sort of my, my main focus and it takes enough time right now. I haven’t been able to for a while because we have a major water shortage. It’s rained like

[00:39:22] Kevin Powell: once in the past four months or

[00:39:24] Kevin Powell: something. yeah, so we’re, we’re underwater advisories and stuff, and it takes a fair bit of water so. I’m holding off for the time being. , But I try to, I generally try to brew once a month, usually,

[00:39:35] Adam Argyle: Whoa. What do you do with all that? Because when I was brewing beer, it was way more beer than I ever wanted to drink. , And then you had to wait so long that by the time I, I don’t know, it, it was, so maybe you’re bottling into little

[00:39:46] Kevin Powell: uh, a keg,

[00:39:47] Adam Argyle: or you’re doing half cakes. Oh,

[00:39:49] Adam Argyle: a

[00:39:49] Kevin Powell: well, five, five

[00:39:50] Kevin Powell: gallons.

[00:39:50] Adam Argyle: About five gallons.

[00:39:51] Adam Argyle: Okay, so it’s like a pony. Is that a pony?

[00:39:53] Kevin Powell: Yeah, something like that. Yeah.

[00:39:54] Kevin Powell: so five gallons. , Yeah, I’d probably drink more than I should, so it’s probably good that we’re having, we’ve had the whole [00:40:00] advisory, So, yeah, I, I mean, I’m, I try to share with other people too. I try not to

[00:40:05] Kevin Powell: like hold it for

[00:40:06] Kevin Powell: myself,

[00:40:06] Adam Argyle: yeah. You’re like, here’s a

[00:40:07] Kevin Powell: for, yeah, Yeah. Yeah. I used to bottle when I first started and then I stopped for a while just ‘cause bottling sort of sucks.

[00:40:15] Kevin Powell: I wasn’t a

[00:40:16] Adam Argyle: does suck. And having the caps around, like just you start to find caps in places you don’t want. You’re just like, eh, that

[00:40:21] Kevin Powell: Yeah.

[00:40:21] Kevin Powell: And washing the bottles and everything. So Kegging is, kegging definitely simplifies the process a lot. So that makes life easier.

[00:40:28] Robbie Wagner: I need to do cooler hobbies, I think,

[00:40:31] Adam Argyle: Well you power wash, man, that’s so popular. Power washing is a great hobby.

[00:40:35] Robbie Wagner: Yeah. I don’t, I

[00:40:37] Robbie Wagner: guess so , doesn’t take as much, , dedication to the craft as, as brewing beer, though.

[00:40:42] Adam Argyle: Sports too. You got more friends than me. ‘cause you, ‘cause you watch sports, you know, like we’re over here making beer and drinking it by ourselves maybe, or whatever. But you’re, you’re like cheering on with friends.

[00:40:52] Robbie Wagner: Yeah,

[00:40:52] Adam Argyle: it’s pretty tempting.

[00:40:53] Robbie Wagner: I do like to watch some football.

[00:40:55] Kevin Powell: yeah. Do you follow?

[00:40:57] Robbie Wagner: , Well, I’m talking American football

[00:40:59] Robbie Wagner: just in case we [00:41:00] weren’t on the same page.

[00:41:01] Robbie Wagner: , So I, I like college football the most. I went to Virginia Tech, so I like to see them do well, but they’re oh and three so far, so doing terrible. yeah, professional teams. I’ve been following, the Eagles a little bit just ‘cause I like Saquon Barkley. , I think he’s just an insane machine at everything, football. So he’s, he’s fun to watch. yeah, I’m not, I’m not that serious about it. I just will watch whoever’s on and it’s fun to watch.

[00:41:22] Adam Argyle: That’s how I like to do sports too. I’ll show up to any sport and I’ll enjoy it with you. ‘cause I like watching people kick butt. I’m like, dude, if you’re good at something, I’m rooting for you. If you suck at it, I’m gonna tell you. That’s the only funny, okay. So like, I’m quite supportive when I go watch sports with like someone’s house.

[00:41:36] Adam Argyle: But if someone’s sucking and I don’t, I don’t care. I don’t have any affiliation. So I’m like, if they’re sucking, I’m like, that was some high school garbage. You should quit. I can’t believe you’re a professional. That’s the same mistake I’ve watched my friend Gary do five times. ‘cause he sucked.

[00:41:49] Adam Argyle: So I don’t know how you’re getting paid. My friends are like, dude, and I’m like, Hey, as if he’s bad, he’s bad. You know,

[00:41:56] Robbie Wagner: Oh yeah. yeah. I think we picked the wrong careers

[00:41:58] Robbie Wagner: too because, , [00:42:00] Virginia Tech is firing their football coach for being bad and giving him $6 million, so he’ll leave. I’m like, Hmm. I would love

[00:42:07] Robbie Wagner: to like guys, I could, I could

[00:42:09] Robbie Wagner: coach some football. Like you might have to fire me soon, but

[00:42:14] Kevin Powell: the coaching salaries like, it’s, it’s different from the players just ‘cause like. I don’t know. I’m always confused on like how much influence they have and obviously they do ‘cause there’s coaches that clearly are good. But then it’s those times where they hire them for these obscene salaries and then fire them two years later.

[00:42:27] Kevin Powell: But they’re still under like a seven year contract and you’re just like, I dunno, there’s way too much money in sports. It’s insane.

[00:42:32] Robbie Wagner: yeah.

[00:42:33] Adam Argyle: There’s a lot of money in sports.

[00:42:35] Robbie Wagner: Yep.

[00:42:36] Robbie Wagner: A lot of money in everything except for the things that are paying me.

[00:42:44] Robbie Wagner: So, speaking of which though, if you were not in tech, what other career would you choose?

[00:42:49] Kevin Powell: I’ve taken the most roundabout way to even get to where I am now, so I, I don’t, I don’t have a good answer for that. Just ‘cause I was in science that I dropped out of, to go into film. I [00:43:00] have a degree in film. Then I had nothing to do with that, so I went, I got a BA in urban planning. Would’ve needed a master’s if I really wanted a job in that. And I didn’t really feel like I wanted to do that. So then I got a vocational degree in design, which led me to getting back into web. That was a hobby of mine that then got me hired as a teacher that then eventually led to the YouTube channel.

[00:43:24] Kevin Powell: \, So I’ve been all over the place. even, if I had a plan, I don’t think I would actually be doing the thing that I say I would be doing.

[00:43:31] Robbie Wagner: Mm.

[00:43:32] Robbie Wagner: Well, what about if you could just get a random skill, like something that has nothing to do with. Any of those things. , If you don’t have anything in mind, that’s fine, but like

[00:43:41] Robbie Wagner: if there’s something that just sounds really cool that you’re like, if I could just do that, like, what, what would it be?

[00:43:47] Kevin Powell: I mean, for me, the, the one thing I’ve always wanted to be was a race car driver since I was a little kid.

[00:43:51] Kevin Powell: I do like sim racing stuff now and like yeah, driving a car, like if I could, if I won like a hundred million and I could retire and I know I’d live [00:44:00] comfortably ‘cause it’s a rich man sport, but I’d be like into like , the touring cars or something like that.

[00:44:05] Kevin Powell: Just like the old man racing that they have going on that. Yeah.

[00:44:09] Robbie Wagner: Nice.

[00:44:10] Robbie Wagner: Yeah.

[00:44:11] Robbie Wagner: I don’t think I have the stamina for racing. ‘cause you gotta do like so much driving and like such fast speeds and like I think it sounds fun for like going straight on a track for like, you know, 10 seconds or whatever. , I, I’d do that, but.

[00:44:27] Kevin Powell: if you were asking me when I was like 12, I would’ve said Formula one. Now I’m like, there’s no way that I would even step in one of those. Oh, hello.

[00:44:34] Robbie Wagner: A while Jason has appeared.

[00:44:37] Adam Argyle: I have to translate ‘cause I have headphones on.

[00:44:41] Adam Argyle: Oh, we have so many more questions for you. I’m like, which one’s next? Oh, here, wait. What’s your favorite CSS typo?

[00:44:46] Adam Argyle: For me, it’s the, like there’s a couple, I used to post ‘em on Masto on, and Hayden is really good at picking up on them, but like one that I remember typing and feeling so embarrassed, it was even like gonna be in my typing history, was colon, fist dash [00:45:00] child function.

[00:45:01] Adam Argyle: And it’s like, it’s supposed to be first child, first child. I was like, I don’t want to, no. Do you have any typos that you’re just like, I’m gonna edit that out ‘cause that’s embarrassing.

[00:45:12] Kevin Powell: The most embarrassing one for me is a display absolute. yeah, I do that all the time. I know I do it and I still do it and I still can’t find the problem. I’m just like, why is this not working? the other one that I do a lot is if I’m just building like a demo that just has like a bunch of empty divs.

[00:45:29] Kevin Powell: So I wanna put a background color on them, but I just write color and that’s really annoying. ‘cause nothing shows, there’s no error in the dev tools. There’s nothing. It’s like the color’s there, why is it not working? And then I’m like. Oh, that’s the text color, right? yeah, that’s been, I’ve been doing that for a decade and I will, I will continue doing it for sure.

[00:45:47] Robbie Wagner: Yeah,

[00:45:47] Robbie Wagner: I do feel like that is kind of backwards, like it should have been. Color is the color of the box. And then you say text color

[00:45:55] Robbie Wagner: for

[00:45:55] Adam Argyle: Text

[00:45:56] Adam Argyle: color

[00:45:57] Adam Argyle: does make more sense.

[00:45:58] Adam Argyle: A, are there tailwind, typo, [00:46:00] blunders, like if you’re tailwind by hand and how, here’s this follow up question. How often do you tailwind from scratch by hand? You’re like, I’m gonna write every class in this. Class list by hand. And then what are your B blenders where you, you know, do you make any silly mistakes where you type butt instead of something?

[00:46:15] Adam Argyle: I don’t know.

[00:46:15] Robbie Wagner: , Yeah, I don’t, I don’t know, uh, off the top of my head a like, silly mistake. But yeah, I do hand roll tailwind stuff for sure. Like if I’m building something, I’ll write it all from scratch. I’m just like, you know, one class on, look at what it looks like at another class. At another class. Like, it’s very iterative. , And then I’ll also do like, just duplicate it all. , You don’t even need your JavaScript loop that like, loops through the items. Just put that. String of 20 classes on like eight items in a row, and then you can clean it up later. yeah, I mean, I think it’s all about like what makes you the fastest to get like the thing you want on the page, and then you can always abstract it out to be smaller and better and faster later.

[00:46:53] Adam Argyle: I just had a wild idea. What if there was a race between vanilla and tailwind? You had to build the same piece of UI and you [00:47:00] watched two people race it out, so the goal was to completion the fastest. Would a tailwind. Typer ‘cause they’re typing way less characters and they’re working directly in the markup, not between two files.

[00:47:12] Adam Argyle: Would they spank a vanilla CSS developer? What do you think?

[00:47:18] Robbie Wagner: I think in a sufficiently easy prompt. Yes. Like if you’re gonna throw in a bunch of new CSS stuff that’s maybe not supported or like, you don’t know what the syntax and tailwind would be ‘cause they have to do like gymnastics to make it work. that stuff, you’d probably be faster just, you know, if you’re a expert in CSS, you can just put it all in there.

[00:47:39] Robbie Wagner: But yeah, if it’s like, here’s these like 10 nested boxes and they need to have these padding and they’re these colors and like. You know, something simple, I think Tailwind could win, but it’s also about typing speed. There’s a lot of variables or is there some AI assist? Like, oh, I’m always doing this, so here’s like, blah, there’s a bunch of classes like,

[00:47:56] Robbie Wagner: I don’t

[00:47:57] Adam Argyle: I

[00:47:57] Adam Argyle: mean, you better hope there’s not a UL LI because you’re [00:48:00] gonna have to type all that across all those li, whereas Kevin’s over there going direct to send an li boom, boom, boom. And he’s like, done, you know?

[00:48:08] Robbie Wagner: Yeah. I mean, yes, but you can, so let’s not forget though. Well, I guess, what’s the rules like can you use CSS files or like anything normal CSS at all? Because you can define your own like tailwind classes and do some csse stuff

[00:48:22] Robbie Wagner: there, and then just throw those classes on. Like they’re just classes. It is just CSS.

[00:48:26] Robbie Wagner: It’s a crazy argument in the first place, but it’s like.

[00:48:31] Adam Argyle: What do you think, Kevin? Do you think you could beat a tailwind?

[00:48:34] Kevin Powell: Yeah, I think, I think it’s like you said, it would depend a lot on like the scale, I think.

[00:48:39] Kevin Powell: Writing just the CSS is beneficial. If there is like, as soon as it’s like I have one selector that can do a whole bunch of stuff and I don’t have to apply it to 10 different items, then the CSS starts like gaining an advantage. but if it was just like one box and you had 10 classes that had to go on it, tailwind’s gonna win. you know, assuming same typing speed, but now I, I have a content [00:49:00] idea for a video. Thank you Adam. I have to find someone who can, is really good at some a tailwind and see what we can do.

[00:49:06] Robbie Wagner: Yeah.

[00:49:07] Robbie Wagner: I

[00:49:07] Robbie Wagner: mean, I’m good at tailwind, but not at, not at typing though. That’s where I would feel.

[00:49:11] Adam Argyle: Uh.

[00:49:12] Robbie Wagner: I’m so slow at typing, man.

[00:49:14] Robbie Wagner: Like I.

[00:49:14] Adam Argyle: Although the type of head features in, that’s one thing Tailwind

[00:49:18] Robbie Wagner: That’s true. A lot of

[00:49:19] Adam Argyle: is that the type of head, a lot of the auto complete’s very tight. And so, yeah, you really only need the first character or two before you start to get options, and then you’re just picking it from a menu. , But still I do think that, that, that video would, it’s that spicy question that everyone’s wondering in their head.

[00:49:34] Adam Argyle: What would happen if you got the best tailwind person versus the best CSS person and they went head to head on a couple of tasks?

[00:49:41] Robbie Wagner: Yeah, I mean, I would nominate Adam Wain as the creator of Tailwind, as the tailwind person. ,

[00:49:46] Adam Argyle: Yeah, dude Wa verse Powell. That’d be an

[00:49:48] Adam Argyle: amazing Wow.

[00:49:51] Kevin Powell: Yeah, I’d just be worried that I get spanked on that. But

[00:49:54] Kevin Powell: anyway.

[00:49:54] Adam Argyle: I. I’d get spanked. I’m, I’m actually pretty slow. People are like, okay, come over here and help me do this [00:50:00] thing. You’re probably gonna nail it. First time. I’m like, Nope. But I’ll, I’m, I’m patient. I.

[00:50:08] Robbie Wagner: Yeah, we’re getting pretty close to time here. Before we end, what things

[00:50:13] Robbie Wagner: would you like to plug?

[00:50:14] Kevin Powell: if you go to my YouTube channel, you get anything you’d wanna find, , if you’re trying to learn any CSS stuff. So it’s just Kevin Powell on YouTube. You’ll find me, Kevin Powell with like CSS if, . For some reason my stuff doesn’t come up. if you are interested in newsletters and you don’t mind having more inbox clutter, , I think my newsletter’s pretty good.

[00:50:33] Kevin Powell: I enjoy writing it and people seem to like it. So, , you can find that at my website, Kevin powell.co. And that’s where basically everything else I, I’m up to is there too. and I’m on blue sky. If you’re on social media and looking for somebody to follow.

[00:50:46] Adam Argyle: You have courses on Front End Master

[00:50:47] Kevin Powell: I, I do, yeah.

[00:50:49] Adam Argyle: for you. Yep.

[00:50:50] Adam Argyle: Those look like a lot of work and

[00:50:51] Kevin Powell: I do. I, yeah. I have a, I have a course there. I have other courses. So if on my site, Kevin powell.co there’s links to , any course stuff if you’re looking [00:51:00] for, like, curated paths on, CSS stuff. ‘cause you, you wanna sort of dive more into the weeds instead of just learning about a feature at a time like you would on YouTube. , Yeah, I have uh, some, some content that can help out there too.

[00:51:10] Robbie Wagner: All right. Well thanks everyone for listening. If you liked it, please subscribe. Leave us some ratings and reviews. We appreciate it, and we will catch you next time.

[00:51:21] Outro: You’ve been watching Whiskey Web and Whatnot. Recorded in front of a live studio audience. What the fuck are you talking about, Chuck? Enjoyed the show? Subscribe. You know, people don’t pay attention to these, right? Head to whiskey.fund for merchant to join our Discord server. I’m serious, it’s like 2% of people who actually click these links. And don’t forget to leave us a five star review and tell your friends about the show. All right, dude, I’m outta here. Still got it.