How does stuff get added to CSS? Adam Argyle answers!

Welcome to Syntax.

Today, we have a you you know it's the podcast with Thesis twelve development. Truth, I don't need to say that. Today, we have Adam Argyle on the show to talk to us about how does stuff get added to CSS. You say you might be sitting there and you might be saying, CSS needs a zebra stripe property. How how would you go about get again, that added to to CSS? So Adam's here today to explain all of that. We'll we'll talk about him and introduce him in just a second. But first, we are sponsored by LogRocket, which is browser session replay, and FreshBooks, which is cloud accounting.

With me,

as always, is mister Scott Tolinski. How are you doing today, Scott? Hey. Doing good. Doing very good. Just hanging out, you know, Drinking some coffee. The the rig.

I got a course coming out today, so, you know, I'm on my, normal go go go mode. Oh, yeah.

Good. Congrats.

So welcome, Adam. How are you doing today? Oh, I'm happy.

Stoked to be here. It's weird seeing your mouths move with the sound because normally all I hear is it.

Yeah. We, only once have we ever put out that video of us recording because it's

not that interesting, but maybe maybe one of you. Find it. People ask for it all the time, though. It's not like Yeah. Yeah. It's like a curiosity that I have to I have to scratch the itch. I'm just like, what do they look like? You know?

Yeah. Not very good.

Aw.

So, why don't you introduce Vercel,

who you are, where you work, what you do, things like that? Sure. My name JS Adam Argyle. I'm a 34 year old dude from Seattle. I've been writing code and apps for professionally over 10 years. I currently work at Google. I'm on the Chrome team, and I, love CSS. So it's like this crazy fiery passion. I really just love making, like, good, smooth, tangible, gorgeous, buttery, silky interfaces. But, you know, I do that at Google, and I and I teach, and I talk about it. That's kind of me in a nutshell, I guess.

Man, I'm into gorgeous, buttery smooth interfaces. I'll tell you that. Yeah. You are. Yeah. You do a great job with that. Hey. Thank you.

UX engineers, we gotta sweat those details. Right? Yeah. Yep. Yep. Yep. Details.

We we shouted out your your Twitter account, I don't know, a couple months ago just because, like, you've been pumping out really good CSS content and and, like, you see, you see a lot of JavaScript content on Twitter, but some of the, like, nitty gritty, what's new in CSS, things like that doesn't always get surfaced. So I think your Twitter account is one to follow for that type of stuff. Thanks. I really hope to be a hub for old and new sort of info.

But I, yeah, I love the new stuff. If there's something new and shiny, I'm there, and I'm trying it out, and I'll tell you what's good about it. Yeah.

That Twitter account so you can follow is Argyle Inc, a rgyle I n k.

And is the ink because your wife is a tattoo artist or because you love tattoos? No. It's actually

really old. Oh, man. I think I made it in 2002 or something like that. It's almost as old as, like, your aim handle. You know? Mhmm. Mhmm. Yeah. Argyle Inc Wes I think I just thought it sounded cool. It sounded like a business Node, like Argyle Inc, I n c. And so now all I have to do is correct everyone. It's I n k. I just thought I was creative. Like, have you ever seen Argyle Inc? What would it look like if you could paint with it? If you could paint with Argyle ink, would it would it would it leave a pattern behind? You know? Like, is it a mask into a pattern? Like, anyway, so I just like just provocative.

There was a a a video game, Mario Paint, where you could paint with argyle patterns. So that was

That might need to be my new website video that plays JS Mario or me. Maybe I'll show up in paint Argyle paint on the screen. That sounds awesome. That would actually be a pretty cool project if you think about it because you could just, like, do it, like, with a mask and have some art gallery beneath it. And when you have the yeah. To be a good background for a website. Totally. This okay. Challenge accepted. You could even do it with pixels, so that it it had, like, a soft edge to it and was like Oh, yeah.

Like real paintbrush. Anyway

So let's talk about CSS for the entire episode. So if there's something that should be added to CSS, Node might think that the process of getting something added to CSS is go on Twitter and complain about it. Holler at your boy. Right? Yeah. Holler at your boy. Hopefully, the browser vendors see it and then implement it. But there's there's obviously there's an entire standards body behind CSS, and there's proposals, things that people think should be added. There's, like, years years, like, Flexbox and Grid went through, I don't know, something like 6 or 8 years of of development before we finally got it. So there's this whole process of back work that happens before it actually hits the browser and before we can actually start using it. So, that's what I wanna sort of understand today is, like, how does something like, CSS variables or color functions or border radius even get added to it? So I asked if you would come on, and he made the entire outline for the show, which JS awesome.

So, do you wanna sort of take it from here and and start with start with what you got? Yeah. I just wanna, like, introduce it too, like in that design systems are a really hot topic right Node, and you could almost think about the web and CSS as a part of the the design system of the platform of the web. Right? And it's been around 15, 20 years. It now has a governance model, and there's folks representing pieces of it just like your design system.

And Sanity kinda makes sense to think of it that way because the scale of what we're about to go over is kinda large. Like, some things go kind of quickly through the process and some things take ages, right, because they're huge and they're big refractors, they have all these implications.

So I just thought that maybe, hopefully, sets up the scale of what we're talking about as being reasonable. Right? It it got here slowly. There was even at one point, CSS itself was a proposal, and that's just kind of where you think about yeah. There were comp there was competition.

Node of them was JSS.

I remember the word. JavaScript style. Oh, yeah. Okay. And it was a proposal. I think it was very similar to JavaScript, style sheets where you'd have something a little bit more imperative and less declarative and blah blah blah. So there were, proposals, and folks met to to hash out which one was gonna be right and why. So, anyway, we could follow a couple of things through the process, or we could just go over the process. Do you guys mind, or do you wanna follow something along or or just go through the process? You have a preference? Let's go through the process and, like, give, like, maybe a couple examples of of things here or there that would make sense. Sure. Okay. So I, like, I have a couple of proposals out that can help set up things to think about in terms of proposals. And, yeah, step 1 is is essentially yeah. You have to say what it is you want. Right? And kind of the easiest place to go say that right now ESLint a GitHub issue. So if you have a cool idea, which people do all the time, just go to GitHub and articulate the problem and, your use case and maybe a solution. You don't even have to have a solution for a proposal. You can basically be like, this is a really common thing I build on the web, and, man, there JS nothing easy to help me out. If this one little thing was here, I could cut out this whole chunk of code.

What's the repo that you would have? Repo is

CSS working group drafts. Let me yeah. W three c slash CSS working group drafts.

And, yeah, it's as it's as raw as open up a new issue and start typing. They'll help you guide it into getting proper tags. And just like if you were in some major repository trying to contribute to a framework or something. Right? They're gonna have sort of processes that they'll help guide you into and stuff like that. But I like that the process starts with this, like, innocent conjuring of a of a concept.

And you don't really know if it's good or bad until people start talking about it on that. So that's how, you can start to gauge your proposal or your ideas, success, or whatever JS how many people started to comment on it the 1st day. Because sometimes a proposal will go out, and it sounds awesome. Like, I have one for motion blur. And I was like, yeah. Motion blur. Who doesn't want motion blur on the web? Right? Scott. Scott. Wink. Wink. Scott. I'm in. I'm in. I'm in.

And so I like I'm like, I'm dropping fire on the proposal, and then, like, it gets some love. But then you have other things to get proposed, and all of a sudden, the comments are Scott.

And they could be hot in a bad way or a good way. They could be hot in a bad good way. Right? Anyway so that's, like, a good gauge of interest from the community or interest in the spec authors themselves JS, like, how provocative is it? How much does it have to offer? How much is it anyway, so it's kind of a fun thing.

It's it's amazing that it's so I don't know. You think of this JS CSS as being this this not an unchangeable thing because it grows over time, but this thing that you have no control over. And it's amazing that that it's that easy to just pop in there and throw in an issue if you have an idea or read through other issues or express your opinion on them. I mean, it's just amazing that it's, in 2020, it's out this open. You know?

I agree. And GitHub has been a awesome spot for that conversation to be facilitated out in the open. And and, yeah, open source is it's sick. Right? I mean, we're in a really, really fun time for all this.

I'm just looking up something that I asked, I don't know, maybe 4 years ago, I asked Rachel Andrew. She had the, like, CSS she had, like, an entire repo of just asking me questions about CSS Grid because she was one of the few people that that understood the entire thing. And I said, like, how do you select rows in CSS Grid, or can you select rows in CSS Grid? Like, I wanna select every other row unwrapped elements, and that's not possible, in Flexbox or Grid right now. And I'm just looking that up. And 28 days ago, somebody proposed pseudo selectors for selecting elements based on which row they are in, which is kinda cool. That would be

sick. Absolutely. And, yeah, sometimes things can sit dormant for a while. Right? You can have, like, a real rad idea just chilling, and it's, like, incubating. And it sometimes, they're waiting for timing. Okay.

Succinct.

GitHub can straw man a solution. Be like, wouldn't it be sweet if I could succinct. You can straw man a solution. Be like, wouldn't it be sweet if I could do this? And so if you go to, like, my motion blur one, you can see me, like, trying out fun motion blur syntax. I'm just being creative and trying to think about something that fits within the spec and is reasonable. And you can even make a JavaScript demo. So if you really wanna go far with the proposal, you'd be like, here's the CSS I wanna write. Here's JavaScript showing you the interactions that I or the result that I wanna get, but I prefer to do this declaratively.

So, right, you can kinda go polyfill yourself, which is super rad. And then step 2. So after there's a proposal and it kinda gets into this, like, public facing document, it time time needs to happen. And this is where you might have someone else make a proposal against your proposal, a counterproposal, or they could fork and contribute to your proposal.

Comments are gonna happen. People are either gonna like it or dislike it. They're gonna tell you where it's broken, and there's gonna be a lot of back and forth and maybe even some bike shedding. Do you think any bike shedding happens? Never. Absolutely. Never. No.

For our audience, bike shedding is when people talk about what color they should paint the shed instead of actually building the shed. Is that that a fair explanation? Literally, yeah. It's like the shed's not even

done yet, and you guys are over bickering with your beers over what color it should be. You know? It's like Yep.

And sometimes bike shedding's good. Right? Like, look. Look. It's color of your shed and the color of your house. This is important, but maybe we should have the house done. So, anyway, bike shedding happens. And at that point, it can be kind of nice or bad because it can hold something back. Like, we have logical properties. Y'all did an episode on logical props. Right? Yes. Or we at least talked about them. Yeah. You talked okay. And I remember you represented him really good. I was, like, real proud. I was like, wow. Nice job. But, like, logical properties have a shorthand that currently is being it's had so much bike shedding. It can't move anywhere yet. So when you have logical properties, you can say margin block and do just the top and bottom margins in a shorthand. You can say margin in line and do just the left and right. But you can't say margin Node over how to do that. Like, people are gonna wanna use logical properties on all sides in one shorthand.

What's the word? And so there's, like, l margin or, margin, colon, whatever, and then you put not logical at the end. And there's all this spike shitting about, like, how would someone say they wanna use margin shorthand, but get logical properties out of it. Oh, yeah. Mhmm. I actually used logical properties in a

course lately. And when people were taking the course, they were like, this is the 1st time I'd ever seen this.

Why can't I do that? Like, specifically, that use case that you outlined, and it was just like, oh, yeah. You're right. Yeah.

I didn't yeah. It's funny that you you mentioned that exactly.

That one particularly haunts me because I want it so bad. Like, I am so in love with, like, logical properties right now, and then I'm like, oh, but, oh, that's weird. I'm like, there's just one side of this I can't do yet. Yeah. Right. Yeah. So I went into that proposal just the other day because, right, it's in this moment of time. It's churning in time. It's not an editor's draft yet. So I went and I bumped it.

I went and I just went to the proposal. I'm like, this is meaningful.

Let me go I and here was I actually tried to say something that I thought would be provocative because I was like, let's spin people up. So, anyway, you can go in there. Let's spin people up. I did. And we've already been bike shed it so much. I'm like, let's bike shed it this way. It'll be fine. And it was because I I think I mentioned, like, leaky scopes or something, and I was like, oh, people love talking about scope leakage.

Anyway, right? Our industry JS fun. I love our terms. Okay. So, anyway, things happen with time. Right? Multiple proposals back and forth. And if something kinda gets hardened and it gets enough of a proposal that kinda feels solid, it can move into an editor's draft. So okay. Let's pause for a quick question time, and then we'll bounce between this, like, asynchronous and synchronous stuff that starts to happen in this time zone.

So I don't know. Any questions while we're while we're here?

What do you propose? Like, what do you think about what you should do for for logical properties if you wanna do them all in one go? So, I guess, we should explain to the audience. The the problem is that you can do block, which is top and bottom, but if you're in Japanese, then it's left and right.

But if you just do just margin, it's always top right, bottom left.

And it doesn't switch if you are switching your your document orientation.

Yep. So my preference is I've kinda gone back and forth.

And I and I think I like the syntax. It's margin colon, you know, 1 REM space 1 REM space 1 REM space 2 REM or whatever space logical.

And so you just sort of flag it a little bit like and here's the reasons I like it JS because it is, contextual to just that Node instance of declaration.

So just that margin shorthand that I wrote is articulated as wanting the logical property, orientation versus some of the other proposals have been like, well, I wanna go into my style sheet and just be, like, at page flow relative or flow logical. So then you set the whole document to pretty much exclusively use logical properties, and physical properties become the the one you have to opt into. And so, yeah, I like the one where it's sort of, like, only have me modify the little pieces that I need to modify at one time instead of doing something sweepingly that might cover the whole page. But

Oh, yeah. Yeah. That's that's kind of like background sized cover. I, like, once in my career, have remembered the syntax

to use background sized cover on the background shorthand. There's, like, a slash in front of it or something weird like that. Yeah. There's a lot of fun slash shorthands in CSS. I like tweeting those too because they're they're, like, tricky fun little separators.

But was that slash added because they they had to modify shorthand in after after it had already been created?

The slash is like a I don't know when the first one showed up. I I feel like it's 5 or 10 years ago, but it's a separator in a special way where it's like a space JS a type of separator, and we have parentheses as containers for parameters.

And the slash is it's some sort of, like, explicit separator. I can't remember why, but the CSS working group has a very, very explicit reason that they like to use those. And you see it showed up in the new color syntax too. So instead of HSLA, it's HSL value value value, slash opacity.

Oh, you're right.

Yeah. There's there's new functional color notation is what it's called. I think I've even heard of that. Oh, it's awesome. Node to have an entire episode of of of these little nuggets, like Wes things that are maybe are coming to CSS or something like that. Yeah. So interesting. There's, there's so much too. Just little tweaks too. They're constantly revising this in a really, really healthy way. I just the more I get into the working group and I hear these calls and and I'd see these meetings, these folks are really, really considerate. It's the type of people you would want managing your design system type of thing. Mhmm. You trust them.

I'm I'm just, like, searching all over this repo now. I just find things that I want. Because, like, another thing I want is Go vote. Yeah. A decimal opacity added to a hex color. Like, right now, if f r a a, and you have to remember what the hex values are for, like, 0 through a 100% opacity.

Yeah. And I would love to be able to do just hex

forward slash 0.5 or something like that. Or it would even be better. It would be like a transparency function. Right? You could just have the actions that

right now? Because I'm sure our audience would love to hear that. I'm writing I'm that is the first thing I'm an editor on, so I wasn't gonna boast or anything. But that you brought it up, so it wasn't me. Yeah.

I want that. I want that. Also want to be able to use CSS variables in media queries.

Oh, dude.

That that one hurts. I want that really bad too.

That post CSS will do it for you as a build step. But, yeah, sometimes that's not good enough. Right? You want it, like, in there for real. Gotta have it. Yep. We're almost at the I mean, we're sidetracking a little bit here. Right? But we're almost at the time where, like, our build tools are gone. Right? It's just like, oh, you're like, I use Babble just for, like, that one thing, and then it's like, I use post CSS just for that one thing. Like, how long until, oh, they're gone? I don't know. Mhmm. Interesting.

Unless, as a Canadian, don't you feel upset that you can't use the correct spelling of color, by your yeah. So you you have to use post CSS for that. We have both grays. You have both grays. Yeah.

Something in my brain totally clicks, and I never spell it the wrong way. Wes, I always put a u in it when I'm typing it, and I never put a u in it when I'm writing.

So not a big deal. Nice. Nice. Skills. Oh, though, I was gonna say that the color functions, one of them has an implementer. Oh, snap. That actually rolls us really nice into into the kind of the next settings here. So let's follow color functions a little bit.

Okay. So what we said, we have an issue.

Time has gone on. People have talked about it. Now let's talk about two two ways that time is being impacted there is by Sanity like Scott and Wes who are visiting these issues, and they're upvoting them. And they're commenting. And they're saying, yes. I have use cases for that. And the the working group goes, look. We have interested users of a feature that's important to them to know that people want to use it. The other side that is implementers. And then another role is people who are authors, so these are the ones authoring the spec itself.

So you need interested users like developers. You need interested implementers. These are people that work on the browser. And then you need a spec person in the middle to sort of articulate and write up something that can meld these 2 folks together into a harmonious feature in CSS. So we have the, an editor's draft right now for color functions. It's really it's color level 5. So color level 4 anyway, you there you can go look at what came in color level 4 and what will be coming, that's still there. Not everything JS out from color level 4. Color color level 5 builds upon color level 4.

And so much it brings in these color functions. Node of the color functions has an implementer. So that's essentially the exciting thing I was gonna get to JS, someone at Microsoft working on Chromium now. Right? We have 2 different big companies working on the same ESLint.

Ultimately, these things are they're moving. And I think it's really exciting that if we could have that in our CSS, it would make make theming and all these other things. It's for design systems. Right? You get to articulate your brand values in one spot and then just build off of that strong foundational root a whole system into your app. So that's coming. We're that's just gonna be all managed in CSS. No build steps, super optimized, editable in dev tools, the whole Node.

So we have the editor's draft. It's being written right now by just people. So that's right now, it's me, Node, Leah, and Chris.

And so we're each writing different parts of this editor's draft. We communicate and contribute together on GitHub. It's very public and in the open. So this spec that's getting written is for developers and for implementers, and we're trying to do it in a space where everyone can talk about it, contribute with us.

And what you need after a draft is to get implementer interests. So you need to convince a browser developer to start prototyping with it. And at which point they begin prototyping with it, you'll start to see tweets that go out like, intent to prototype, I two p. You'll see these. And that means a browser is putting a new feature behind a flag, and you can open up Sanity and turn on and try a new CSS or a new JavaScript feature because there's an implementer that's implementing something against a draft spec. So this is why it's declared as intent to prototype and not intent to ship. Intent to ship comes later in this process once there's been some hardening. So I'm gonna take a little pause and breather, and then we'll reconvene. I don't know.

That's why they have they got rid of vendor prefixes. Right? Is that people were vendor prefixes were initially meant for, testing stuff and and just sort of putting it out there. But then everyone just started to go ahead and use it as soon as it it snuck its way into 1 browser. And then we'd be like, ah, it's only in Chrome. Every other browser sucks, and that's why vendor prefixes

are pretty much not a thing anymore. Is that correct? That is correct. They're gone. They also, just didn't encourage like, we want people to use things unprefixed, because then you're not sort of championing 1 browser over another. So we're then you're not playing any favorites. And so it's kinda nice you get rid of them. And then do you guys know origin trials? It's like the next more hardcore version of experiments.

So so we had prefixes. That's like the old Scott, really easy way to get started with an experiment. We have experiments, which you can go into Chrome settings and turn these on. It's about flags, so chrome colon /flags.

And you can go turn on a bunch fun experiments. And then there's origin trials, and this is something where you can work with Chrome itself and enable your domain. That's why it's called an origin trial. Like, your website would get special treatment from Chrome, and it would automatically turn on a bunch of cool flags for every visitor.

Oh, cool. Your visitors will attend your site and get a flag that you want and so that you can prototype with this. It's like a canary sort of, like, scenario.

Kinda cool.

Yeah. Very cool.

Awesome for experimenting. And if you wanna experiment with your site, make sure, that you use an, an a service to make sure that your users can, give you good feedback about whether or not your site is actually working. I'm talking about LogRocket. Now the cool thing about LogRocket is that your users don't have to explicitly give you that feedback. You just get it because LogRocket takes a session replay of your site whenever anything goes wrong. So let's say you heard us talk about something Sanity CSS wise. You just threw it into your site without even thinking, and, well, that thing doesn't work. It just doesn't flat out ESLint, so your site's broken and ugly.

And maybe you threw in some bad JavaScript in there too, and the user clicked on something. And you actually get to see visually that not only does your thing not work, but it's also broken and ugly. So you can see this all with session replay via logrocket.com.

You also get access to your Redux store, network activity, console logs, and errors, all that more, and it even works with everything that you know and love. So check it out, log rocket.comforward/syntax, and you will get 14 days for free. So check it out.

So what's next after the implementer?

Okay. So we've got the editor's draft, and the next phase is called the working draft. And the working draft essentially means it's not a draft anymore. It's hardened. It's been reviewed enough times. It's gone through oh, so here. Let's even talk about the conference calls and face to faces that happen sort of as everybody's in GitHub and doing all this typing and all this commenting.

Wes have conference calls there once a week. And there's usually about 10 items to be talked about on there, and those will be issues and proposals from GitHub that we talk about as a group. And so that can be sometimes it's emergency items. Like, things get injected to the top of the list, and sometimes things get kicked to the next.

So, like, there's some really, you know, niche edges of the web that don't always get the attention of the group.

And then there's also, a face to face. So 4 times a year well, it was 4 times a year. I don't know what we're doing anymore. Well, we're doing virtual face to faces. But this is where we would meet face to face and talk about these things. People will present their proposals. They'll present items of their draft and get consensus and feedback immediately. And so the goal there is, like, crush issues, that close issues. And so the conference calls and the face to faces are all about resolution now, synchronous resolution, and then we go back to the in asynchronous sort of time workflow where things happen in GitHub. Okay.

Like, where do those happen? Is it, like, in different like, do you guys go to Hawaii or something on on big CSS's Bos or something like that? Big CSS.

I mean, I'm lucky I'm on Google's buck, but, yeah, they are around the world. The one that was in the middle of COVID was supposed to be in Ireland. I was supposed to go to Ireland. I wanted I still wanna go to Ireland. Ireland, can I go to you still? I don't know.

I'm gonna be a little sad, but, yeah, they are around the world. They try to move the time zones to be, courteous and considerate of all the members who are international, and we you know? So sometimes it's a really big bummer for my timeline, but other times, it's great for my time zone. So

That's cool. And is there any, like I I remember once I was at, like, a a jQuery conference, and we were in an elevator with, like, half the core team. And someone's like, this should this should not be happening. If if something goes if this elevator were to plummet, like, like, half of the, juice behind jQuery would be gone. So is there, like, some rules where you you can't all eat the same food or something like that?

Nope. In fact, now that I think about it, there was a time we were all on a roof, and, yeah, that could've that could've been catastrophic.

Just 1 gust of wind, and we all fly over. All on a roof.

It's it's kinda morbid.

Yeah. But yeah. Wait. Yeah. You're taking this down to yourselves. Okay? What about this this show? If you guys were gone, this show would be a bummer.

Even more morbid? Sorry. Let's keep this let's keep this conversation going. Thank you. Alright. Back to CSS.

Well, here here's a fun thing to think about. We've thought about these proposals, and then we've talked about an editor's draft. We have a working draft. The next stage is a candidate recommendation, and then the 4th thing JS it becomes a standard. And I wanna just briefly talk about how those are kind of aligned to stages like we have in JavaScript. I find the stages in JavaScript really meaningful and helpful. So this is things like stage 0, stage 1, stage 2, stage 3, stage 4. These are in Babel where you're sort of articulating how risky of a cool feature do you wanna play with.

And those can be kind of, similar to what you see here in CSS JS an editor's draft is like stage 0 or stage 1. I mean, it's pretty risky for you to go work, and and assume that that CSS JS it is in that spec is going to live in the standard.

But you can go play with it anyway. So, like, post CSS has a lot of that stuff for you. Then there's stage 2, which is more equivalent to a working draft. And a working draft essentially becomes a working draft when the working group decides it. So they say, hey. We wanna promote this. We we think it's hard enough. We've gone through it, all these things. It also starts to get tests written. Did you guys know there's unit tests for the web?

No. Yeah. There there is that the smiley thing is? The smiley thing is called an acid test.

Yes. And, like, basically, it just, like it says, like, border right Node p x green, and then it it checks that that actually

renders out, like, a Node p x green. Right? It's the same as visual regression testing, yeah, where you're you're comparing a golden screenshot with something else. And so the way that you do that in HTML so they're called Wes platform test, WPTs.

And you do. You go write a little HTML file that makes an assertion. It draws something. And you have a control and an experiment. And they get, rendered automatically through CICD and GitHub. I think they're all actions now.

And, you can know if you broke the web in in one of your features.

And it's a good way to get what you want done is to go write those. Like, for Flexcap, for example, I've been I pushed for Flexcap for so long, and everyone's like, go away. And then I was like, okay. You know what I'm gonna do? I'm gonna I'm gonna go write the web platform tests so that red starts to show up on all those developers' consoles. And you know what a developer hates? Right. Failing tests. They don't wanna see no red. And so Node. I felt like it was like a subliminal way that I was trying to encourage a feature was to just go just inject some red into their console and annoy them.

I don't know if it worked. It seems seems good.

Amazing. Very amazing. What what's acid test then? Acid test was like, that was some early browser days where you would have it was like a cork exposure. You It's somewhere along those lines. Like, it had good intentions as a beginning and then just slowly sort of turned into because it was a face. Right? So you'd be like, hey. Browser's under this face, and you'd go to, like, Netscape, and it just looked like this distorted Picasso. And you're like, yeah. I don't think the CSS is rendering very good here.

That's funny.

I never knew that. Wow. You're like a CSS historian. Yeah.

Who would've thought?

Okay. Wait. So we got web platform tests, which are totally like unit tests. I think they're really cool too because they're, very bite sized, and all the browsers run those against their own browser. So you can go see how Safari and Firefox and Chromium are comparing in their web platform tests.

This is very much internally the way that the browser implementers know how well they're doing.

So right? So that we had those roles. We had, like, implementers, the ones building it in the browser, us, who is just like the community, and then we have the community working group that sort of sits in the middle. And it's nice to know that those web platform tests ensure that this feature goes out and will be hardened for the future. I went and wrote a bunch for FlexGap, and I found bugs in Firefox.

And they were happy. They were like, thank you. Yeah. That's amazing. That's a

I don't know. The whole process is so fascinating for me, especially because I I'm coming in. Like, I I know, like, very high level of how things happen. And now I'm getting to see how the the sausage is made a little bit, and, I'm excited about it.

I'm glad this is interesting.

So what about if something gets to stage 3, that's when the browsers start to implement it. Right?

Sometimes too. Sometimes editors draft. So that, color function we were following, that's in an editor's draft state. I can send you a link to it, and there's an interested implementer.

Now it's only 1 interested implementer. Let's talk about what you need in order for something to graduate as a as a proposal JS you need 2 implementers.

This is crucial to the life of the Wes, and this is why if we lost our 3rd primary engine, it would be very detrimental. But kind of right now, we're in an interesting majority scenario. Does it make sense what I just said right there? Because I'm, like, comparing engines, Chromium, WebKit, and Firefox. Right? And so, you know, like, Chromium can't just just go make standards.

Chromium can't deploy a new feature, release it in the browser Scott behind a flag, and call that anything of a standard. That it has to be in 2 implement implemented in 2 browsers that both pass the tests for it to become the basic start of a standard. It really needs to be implemented in all of them before it gets the superficial stamp. But yeah.

Yeah. That's what I was gonna ask is, like, what happens when Safari just says no? Because, like, we've seen that Oh, it happened yesterday. Where they they drag their heels. What happened what happened yesterday? Oh, no. You haven't seen this big one? Oh, okay. So and I'll explain it in the perspective of them because they're coming from a a meaningful place. But they literally just said they're not gonna build, like, 10 things. So, anyway, the the reality is what they won't do is due to fingerprinting. So what they've identified is that by tracking something like your preference on your phone let's say it's a data saver preference or it's a, prefers reduced motion preference or it's it's some sort of preference. Right? This is a thing that you have identified and is unique kinda to you. And what they'll do is they'll take all of those, and they'll track them around the web. And they have these scripts and these different examples that show how, from JavaScript or from wherever people, you know, even on a Vercel, just sniffing your your headers, what they can get from you and how they can start to track you. And so Apple has said, here's a huge list of features that are spec'd that we won't do until they figure out how to fix the security issues on them.

Yeah. So one of them was, like, midi midi stuff. That would that's the one thing that caught my eye, but I I didn't see the entire list. Yeah. There's yeah, it's bummer. But I remember, like, the first one of those that came out was

you cannot get the color of visited link in JavaScript because it that's a security issue. Like, somebody put out this website where they just styled all visited links block and and all unvisited link display none.

And then they just came up with a list of websites you had been to, and then they pulled that list via JavaScript, and they were able to just basically scrape your browser history on that. And that was a huge security issue. So, I could see where they're they're coming from like that. And the browser ended up fixing that by just saying, like, you you cannot use get computed style in JavaScript to get the color of a link when it's based on its visited property. Or I think I think you can only get the color property, not anything else about it.

Yep. That's literally the exact same scenario type of thing that they're going for. And and so it's amicable, I think. Well, I mean, it's I think we want that. We want privacy on the web. So the interesting thing is it's not like it's not like Chromium has these features and they're unsecure.

I think it's just they want more security.

So it's kind of interesting. But yeah.

So we went through the stages. We went through web platform tests. We went through the kind of ways that you can get to these features, whether they're behind a flag. We talked about intent to prototype, and then we can talk about intent to ship. So you'll see I two s.

There's even, like, a Twitter account you can go follow. And that's where they say that's where a browser has to okay. So as a implementer, even to do an initial implementation, you have to create this intent to prototype. This is a public facing declaration where you say, here's the spec. Here's an explainer of what I'm going to do.

And you package up this intent to prototype, and then you you share it to the world. And so this is all the different working groups. And the different W3 teams can see that you, as a browser, are officially prototyping this spec that's in draft mode or it's in this mode. And then after your draft after your intent to prototype has gotten really well and maybe it's in another browser, you can then file for an intent to ship. So this JS, again, like you filing with the the the government that you want to become a bigger, better business or whatever, and you and you have to show proof.

And if that goes well, your intent to ship is Wes and it lands in a major browser. So FlexGap had its intent to ship like last month. It's in Chrome's stable 85, I think, And it's all done. It's pretty much good to go. So that one had to go through the same thing, intent to prototype, prototyped behind a flag, then had an intent to ship, at which point everything stabilized. All the web platform tests were passing. This is very it sound should sound really similar to, like, when you make a PR to a repo or your unit test passing or your integration test passing. Mhmm. Have you filed the SLA? Right? There's, like, a process, and, you have to follow it because it is meaningful. And, that's where the CSS has, like, the same thing. So you'll make all these same decorations and things move through, and I now I'm just rambling. So

and, that's pretty much all we do. So ESLint. Yeah. Just come on. Just just Wes and, that's pretty much all we do. So yeah. Just come on. Just just push the button and get get us the the flex gap, please.

I'm happy to receive all those, requests too, by the way. And, anyway, listeners listeners, follow me if any yeah. Just holler at me. I'll do the formalizing of the proposal or whatever, and I'll let you know, you know, very nicely whether or not it's gonna be something. I don't know. Yeah. I'll I'd love to help you guys out, so ping me.

Yeah. I think that that's that's what like, you're you're in developer relations. Is that right? Yeah. Yeah. That's that's what, developer relations should should do. Right? Like, you should be able to, like, to talk to somebody who can actually make a difference in this rather than, like, I'm I'm probably not gonna go through all of these steps or something like that, but I will voice to people like, hey. It would be really cool if we could style specific rows or have have the same have flex gap on it or standardized gap, things like that.

Did it end up being just the gap property, or is it flexdashgap?

It's just a gap. Yeah. So depending on long and grueling because it it is. So, I mean, that's not like it's not the reality. It is a big process, so it is kind of daunting. But there are, like, superpower moments where things can move through really quick. And so I don't know if you guys follow h j chen on Twitter. Just a phenomenal individual to follow about CSS.

And they went on to the GitHub issues and proposed, hey. You know, there's this data saver mode that I really like to browse the Internet with.

JavaScript has access to it in the headers, you know, through client hints and these other things. How come I can't do that in CSS? Can CSS has a way to know what my preference is about data's data preferences and maybe load SVG instead of a big, you know, JPEG or maybe a PNG instead of a JPEG? Like, how many megabytes I might I could probably save a lot of megabytes in my CSS.

If I had a media query, they'll let me know. And this came way after prefers reduced motion and prefers, you know, color scheme and some of these other, like, OS level preferences. And so it was almost like everyone went and looked at the pros proposal like, oh, duh. Why why do why don't we have this? This seems like a easy shoe in, and all of a sudden this thing went from proposal into a draft into the candidate recommendation in, like, this really fast time. So just, like, joined its friends and has this really fast path. So it can happen. Things get missed. You know? We need your input. It can be really, really valuable.

Yeah.

It's amazing to hear, and it and it's probably a testament to just how the system how well the system works if you're able to, you know, sort of rush the system in a way that is not rushed and it's secure and whatever, that just says that the system itself is working. Right?

I think so. Yep. And that particular one showed up with the rest with the privacy issues on Safari. But, yeah.

Oh, interesting.

Is there any example of something that maybe went too fast or didn't get thought Vercel you saw, oh, that that's a mistake, in CSS, and now we have to live with it? Oh, yeah. They have a document for that.

Really? Yeah. Let me see if I can find it. Yeah. I tweeted it at one point because it's really fun to go read every once in a while, but it's like CSS mistakes. Yeah. Yeah. You know how that really sweet, JavaScript well, it's the Node Scott did a video on 10 reasons or 10 things I'd change about node. Have you seen that video? Yeah. Ryan Dahl. Ryan Dahl's. It's a great video. Right? Dude, CSS had a blog post just like that before his. They did it 1st. CSS did it 1st. You heard it. Oh, I'm curious what's what's on there.

Yeah. Okay. So it's wiki.CSSwg.org / ideas/ mistakes.

I'm just gonna I'm gonna retweet this right now. I'll just shoot that back up to the timeline.

And, yeah, there's a lot of really good stuff in there.

It's very honest, and they're still backtracking some of it. So some of it can't be backtracked, but some of it can. Like, let's think about color functional notation.

Like, we have new syntax for HSL and HSLA. Like, why? Wes, it's because we made a lot of mistakes with HSLA. There's too many commas, and it's kind of annoying that you can't put percentage in there. You have to use, like, a a decimal value or whatever. There were, like, these weird edge cases, and they were like so the CSS working group has a couple of wars right now. One of them is a war on commas.

And I like wars on things like semicolons and commas. So but, yeah, they wanna they wanna get rid of them. They're like less commas. There's I'm cool with that. Oh, there's certainly no way to do it. Thing. Box sizing should be border box by default. That's a simple one. Yeah. Bang important. But wouldn't that break the entire like, wouldn't that break a lot of the CSS, like It would be. If you say that. Yeah. Yeah. That will never be able to be changed. But other things like, current color should be current dash color because it's I think that's, like, the only thing in CSS that's camel case.

That's funny. Yeah. Important should

important has a bang in front of it, which to most developers reads as not important. Not important. Yep. I love that. It's like a charm of CSS at this point, though. Right?

Yeah. Right. Yeah.

Like, sometimes pseudo selectors have 2 co 2 Tolinski, and sometimes they have 1. But it's a little sad. Difference between a pseudo class and a pseudo element.

It used it kinda got garbled up in the beginning, and they backtracked and said that a pseudo class is 1 and a pseudo element is 2, I think.

I don't think I've ever used 2. So now that that's just visual delineation. I think you you you can't screw it up. The the selectors will always land, but yeah. Okay.

Yeah. It was funny. For a while, it was like, okay. Well, the the pseudo elements exist, but, oh, yeah, nobody the support for them anyways. You know, Node almost like a meaningless change.

Yep. I could definitely see that. What are some other good snippets in there, Wes? This cool. Man, the there's a whole there's a whole show in here, I think, Scott. We could do a hasty on little CSS mistakes. These are really interesting. That's a good idea. Z Yeah. That's a good idea. Should be z order. So true. You need your son to do the ad transition.

Yeah. Landon, do you wanna say hi? Say hello. You've never been on an episode. Say hello.

Node? That's what my son does too. He clamps up. He freezes. He's like, hi.

Landon, what's your favorite book? Nothing? No? Okay.

Still a good transition. You know?

It was a good transition taking in daddy's footsteps here.

Training them young. Training them young.

Yeah. FreshBooks. Feel the magic of cloud accounting. Oh, yeah. So FreshBooks is cloud accounting for your small business. If you are a freelancer or you have a couple employees or you're just doing a couple side jobs, they're moonlighting and and Wes need to keep track of a couple expenses or tons of expenses.

FreshBooks is what you need. So I use it myself to do all of my invoicing, all of my expenses, all of my tax reports.

It's awesome because I know that it's all in FreshBooks, and at the end of the year, I can just export all that stuff. It sends up late payment reminders for you, so you have to be the bag the bad guy sending emails, being like, hey. Could I get paid? It's awesome. Check it out. Freshbooks.comforward/syntax, and use syntax in the how did you hear about us section, and that'll get you a 30 day unrestricted free trial. Thanks so much to FreshBooks for sponsoring.

Sick.

Sick.

Sick.

Well, I there's, like the only thing we didn't get to is rolls, and I'm not talking about the rolls you eat. Talking about the roles you beat. Oh, yeah.

And so, yeah, we have spec author. So these are folks that they're nominated, and they so to become a spec author, you need to be officially labeled as 1. So the whole working group, you know, kind of knights you with a sword, and they say, yes. You shall edit to spec, sir sir Argyle.

They didn't do that. That was just my dream I had, when it happened. That's cool, though. Okay.

You could be a community member. So in the working group, you can be a specialist or a generalist, which is pretty normal. And some of the specialists, it's really nice to have them in the group. Right? They are specializing in print, and they're making sure that the web and everything that we add to it can always be printed onto paper, which I think is a fantastic power of the web. I go so side Node you ever visit people and they print out web pages and put them in drawers? No.

No. Absolutely not. Last time I did that was when I printed MapQuest, Adam.

Yes. Yes. MapQuest, Bowman.

Deep cut.

Did you have, like, community members that specialize in color, international ization, box models, accessibility, JavaScript APIs. Like, there's people in the CSS working group making sure that the things that JavaScript is getting or the things that CSS is getting have a JS API so we can access it imperatively.

Renderer specialist, layout specialist, Then you have implementers, and these are the folks that go write the code in a browser.

And, that's sort of it. So you have the spec author, community member, and implementers. And those that trifecta And the way that they work together happens asynchronously in GitHub and then works synchronously in the calls until we roll this thing over and over and over until it turns into a Perl.

And we get our feature at the end of the thing. So I think that recaps everything pretty well. We went through the kind of mock stages. So CSS doesn't have official stages, but you can simulate them if you think about editors drafts and working drafts and kind of being along that same line. And then just like Babble can enable, you know, UTU's latest syntax but output something usable in older browsers. You can do that with post CSS preset EMV. So I wanted to pitch that really quick as a way to use these features today, and it's really slick. And I love it. Anyway, I'm a big fan. That's great. I I got a question about the implementers. So let's say,

we wanna implement border radius or a new box shadow or CSS color functions? Like like, what language is that written in? That's, like, dependent on the browser. Is that right? That's dependent on the browser. In Chromium, it is

I think it's c sharp. Oh, c plus plus. Okay. C. Oh, I should've known that. It's not c sharp. I'm not in Node. Okay. Which isn't that crazy kind of fun little side Node. I am an implementer also.

I I actually didn't realize it until I was preparing for this episode that I'm a member and an implementer, and I'm not sure what the rules are around that. And the thing I implemented was I implemented the prefers reduced data media query. I had help, obviously. It's not like I'm a a Chromium engineer, but I got Chromium building on my machines.

I edited source code, and I made a CL that got merged into Chromium.

I have coded Chromium, and it's behind a flag. You can That's so cool. Play around with the prefers reduced data media query.

And, yeah, I'm kinda hungry for more. I'm like, what else can I do? That was cool.

Do you ever tell people that are just, like, your, like, regular friends that aren't developers? Like, they're, like, using a an app on their phone? You'd be like, you know I wrote part of that app.

I I do.

It's hard to tell them what you do sometimes. Right? It's like, hey. I got code in Chromium, and they're like, what's Chromium? And I'm like, oh, man.

Who cares?

Yeah. I know. It's funny. It's weird because I always say, like, I I teach web development, like and they're like, oh, what's web development? And I'll be like, okay. Well, you know, like, Netflix, it's kinda like Netflix, but computer programming. That's what I do. Okay.

Wes.

Vercel is funny too. DevRel? What is DevRel? Dev DevRel. Yeah. I talked to the developers. I'm a people person. Yeah. Wes.

Yes. I don't I don't know if Wes will get that that reference.

Wes doesn't get movie references.

Yeah. He doesn't like movies.

Office Space. Office Space. Oh, I've seen that a 100 times. Office Space is awesome. Yeah. I'm a people person. Yeah. I work with the people. Yeah. What would you say you do here at Initech? Is it Initech? Yeah. I work with the people. Oh, man. I forgot that.

That is great.

I also wanna ask about Houdini. This is I'm just I'm taking advantage of you here. What's the status on that? And, like,

are we gonna get it? Is it Thank you. Thank you for bringing that up. Yes. Yes. Yes. And yes. And I had it in here as, as, like, a side note because, yeah, it's part of the CSS work working group. Face to face happens all the time about Houdini, whether it be, like, a little side SWAT team that goes and talks about Houdini.

And, yeah, just to recap on a previous episode, you said if anyone wanted to really, like, establish a moment in their career to stab and grab the reins on something, Houdini is still a very good thing to do that. So that was a hot tip that I'm just gonna retweet for on your podcast here. Can you verbally retweet this out? Yeah.

So Houdini. Okay. So where is Houdini at? You can go to the website, is Houdini ready yet? And there's some good news JS that the ESLint API, for example, has really great support, And new Safari is leaning into Houdini, which means Oh.

We Yarn progressing forward. Every browser is interested. Every and the paint worklet can both be played with. I think the layout worklet and the paint worklet can both be played with. I think the layout worklet can also be played with, but it is here's the interesting part about the layout worklet. We did 2 massive refractors in the Chromium code Bos of about layout. Because if you remember, this is another history moment, I guess, is Chromium is a fork of WebKit.

So it's almost like Chrome is a child of Safari's browser. So that comes with you know, the apple doesn't fall far from the tree. And so as we've grown, we have deviated more and more, and parts of that old tree became hard for us to manage. And so we did these big, huge refactors on layout specifically, which is like the touchiest code in all of the code Bos. And with that refactor, it was basically with the intent of maximum empowerment of Houdini.

And so that layout was not only performance boosting for international languages. It was an enablement

for the APIs So Houdini needs to give y'all the true power to really grab the reins and make, like, a masonry layout that's animated off the main thread type of stuff. Like so Yeah. Houdini's still alive. Kick a butt. Well, this Houdini website is, really kinda blowing my mind just how many things have already shipped with, for Houdini that I didn't realize any of it has shipped. So, this is this is this is very exciting for me, specifically. I didn't realize there Wes so many parts to Houdini. There's the layout API, the paint API, the parser API,

the property value API, the animation worklet,

the typed o m. Scott sure what that is. Typed o m is sick. Let's make sure we cover that before we're done. It's so good. Alright. What is it? Type 2 m. Okay. So when you work with CSS and JavaScript and you're like, okay. JavaScript, go transform that by 50%, The way that you tell that node to do that in is with a string, and it is a bummer. You're sort of just like building this string and assigning it as a style. And then if you want to get that style back, it comes back as a string.

And this is annoying because you're exploding and joining arrays over and over again or, you know, using template literals and trying to get the job done. But ultimately, what's really hard is to get a unitless value off of an element. Like, what is your transform? What is your margin right? And with the typed OM, you can ask for those values, and you get it back in a rich object that's split out for you. It says here's the unit type, and here's the value. And so it can be this really, really powerful way for you to use JavaScript to interact with elements because you're getting an API that's not string based. It's object based. Oh, cool. And that's a that's important. So it's a typed object model. What they're doing is they're typing all the values. So you're not just getting 15 p x as a string. You're getting 15 as a number and p x as a string.

And that Type 2 m comes with the ability to convert. It comes with the ability to manipulate values just like you do in CSS and have it do the conversion. You can calc. So it's a it's a typed interface into the CSS object model. It's really handy. And that unlocks Houdini to be passed a rich object of values so that it can do a calculation and return it. So now Houdini isn't, you know, stringifying and unstringifying, in its worklet. It's doing less work because you're getting, rich values.

Man, we gotta do West, you and I both have to sit down and do some serious homework on Houdini and come back and do an all timer explainer episode because this stuff is so deep, and I'm I'm so into it. That's gonna be so cool.

It's cool. The so just a couple of warnings is, you know, dev tools. So you'll animate something with the the animation worklet, and then you go to inspect your animation, and it's visible.

And it's because well, how's dev? Dev tools isn't ready to show you the rich interactions. Right? So there are some rough edges, but it's fun to be on the edge. Right? You get to Yeah. You know it. Yeah.

It's where I live my life. Yeah.

That's good. Been to the edge and back. Isn't that in the pizza? Yeah? Yeah.

Oh, man. Well, the is there anything else that we we didn't cover today? There's, like, so much information here. It's amazing. There's so much stuff I didn't know. I thought I had a pretty good grasp on how this stuff happens, but, clearly, I didn't.

There's definitely shows on well, honestly, a Wes that is one of the best ways for you to contribute back to the platform. If you love this platform and you're like, oh, I wonder how I can contribute or whatever, and I'm sure that's not how you sound. That's just how I make myself sound in my brain. A web platform test is a really good way to do it, and just making Node is really valuable.

And so that I don't know. That could be a cool show, but there's definitely shows on nested moments that happen in the working draft here or even just, like, following a certain spec and seeing where it's at and looking at its history. But I don't know. Maybe that stuff's not as fun as your other Tolinski don't know.

Always fun. Always fun. Alright. Well, let's let's end it there, and, we'll probably have you back at some point to talk about some more stuff because there's clearly a lot Yeah. I'd love it. Here. Yeah. That'd be sick. Let's move into some sick picks now. I know that, you came prepared with a sick pick. This is, like, the first time we didn't have to spring it on Node of our guests. Yeah. Normally, normally, we're just like, by the way, you have to come up with something right now.

What's on my desk? What's on my desk? Oh, I got this cool Ardu Bos. Here, this is a sick pick. Oh, yeah. Oh. Oh, yeah. Little Game Boy in the palm of your hand. That was not my sick pick, but that would be my frantic pick. I I would take it.

My sick pick is a a wok, and I know that Wes is a is a barbecuer or a griller. And, man, my wok, I seriously, I'll go in the back. I got this hot open flame. I feel like this super rad chef that's in this heat.

And in 5 minutes, I get to sizzle these raw vegetables with a tablespoon of oil and a tablespoon of sauce, and it's the bombest, seriously, the most amazing vegetables repeatedly ever, and it just blows me my wife's mind. We'll eat a pile, the biggest bowl of vegetables you'll ever see in your life, and it's just because that wok, it's magic. So that's my sick pick. I'm into this. We recently retired our wok and then just bought, you know, basic basic,

basic walk from, Costco.

And, I need new I need some better walk life. You know? Oh, man. I seasoned mine, and it is gorgeous. It's this black iron

oh, it's so cool. Yeah. That's like the proper one where you you properly season it. It's like a cast iron pan where I'm like Yep. I've been thinking about getting Node because, like, I've got the big green pnpm. Yeah. And that thing gets hot as hell. You can get it up to 800, 900 degrees. I've seen videos of people just, like, going at it. It seems a little stressful. But it is stressful, but it's also really fun. Yeah. Yeah. There's an attachment for the big green egg that you can put it on, and it just gives you this little ring, and then you can kinda go to town on it. Sick, dude. Do it. Yeah. Yeah. Ready to walk on the outside. Yeah. The intensity is part of why it's fun. It's like this thrilling

you know? I don't know. Love it. So so what is your walk? What what what is the walk?

Oh, right. You guys need a link. I could give you a link to my Amazon walk. I think it Wes, like, a 35 dollar walk, and it was just all about how I season it, I think. Yeah. That's all I gotta get that. Gotta get that. And I did I did eventually get the outdoor propane scenario. So, like, I was cooking inside. So here's my tip is is don't season your wok indoors. It stinks, and it's it's really smoky.

And so I bought a propane propane burner for outside. And that way, I can really crank the heat up, and that's super nice. So and seasoning it that way too only took, like, 45 minutes or so. Or when I seasoned my first one inside, it took a long time. So, yeah, let me get a link to that. You guys can put it in the show notes.

The propane burner is key too because you can you can do deep frying outside.

Something about deep frying indoors always scares me. Yeah. Oh, we've got the air fryer. We've been we've been air frying inside. That was almost my other sick pick.

There. You you let it sneak out. That's great.

I'm going to sick pick, something that I think all devs that are hackers should have, and that is a set of security bits. So if you like are like me and you like taking taking stuff apart, There's nothing worse than running into a screw or bolt on something that you can't undo because there's a security bit in it. And, I recently just bought a 100 piece set of, security bits just to have on hand so that when you run into not even just like the the standard torques and pentalobe that you find on Apple stuff, but there's some really weird ones that that come on. Like, there's, like, torques bits that have a circle in them if you wanna be able to open that. So Yeah. Those are annoying. Yeah. And it's like, I don't know, 10, $15 for, like, a 100 set of security bits. Like, this is one of those tools that you wanna just, like, buy and have on hand. Because when you're trying to fix something, you don't have the 2 days to wait for it to to come deliver it. So doesn't matter which Node you get, but just some sort of nice security bits that I'll link what up in the show notes that I got.

Nice security bits. Cool. What about you, Scott?

I am going to sick pick something kinda funny. I do a lot of, you know, stretching and stuff. I'm big in I'm a big stretching person, and I've always, like, done a lot of, like, lunge stretches, my knees on the ground. And ESLint fact, actually, I lower my standing desk down to the point where I can, like, kneel or do, like, a a lunge while I'm coding JS low as it goes so I can, do some stretching while I code. And my knees have really taken a beating, so I ordered one of these giant thick foam pads that you see at, like, the PT's office.

It's fantastic. It's this giant thick piece of foam that will save your knees if you're doing any sort of, mobility, stretching, anything like that. So it's turds kind of an off the board pick, but, it's something that I am getting a lot of use out of, and it's saving my butt. So, I'm really into this balance ESLint a balance pad, I guess they're they're calling it even though it's like a foam pad.

Rad, I got bad knees, so I'm I'm down with that tip. That's good.

Yeah. Balance pad. That's cool.

Hey.

Totally unrelated, but there's a a Rogue a guy that works for Rogue that listens to the podcast. And, No way. Yeah. He he DM'd me on Instagram, and he Wes, like, during the coronavirus,

he was, like, just, like, working in the warehouse because, like, everybody wanted equipment. So they're, like, all hands on deck working in the warehouse. Just pause all projects and everything. I thought that was so cool. Well, shout out shout out to Rogue Fitness. Unfortunately, I buy a lot of rep fitness things, which is, like, their direct competitor. But they are local local to Denver, and they have a warehouse. So I get, like, super warehouse deals by going to be able to pick it up, you know, drive by and pick this up. Yeah. So nothing personal rogue. I'm in I'm in I'm into your products.

Cool.

Shameless plugs. I'm gonna shamelessly plug all of my courses. Westboss.comforward/courses.

Grab yourself a course. Use coupon code syntax for $10 off. Hey. I'm gonna shamelessly plug all of my courses. I actually have a a course on CSS design systems using CSS variables, that's coming out today as we're recording this. Scott. Yeah. It's really, really super cool. We talk about writing absolutely minimal CSS to create some really amazing, full themes with, like, just the the goal of the course is to write as little CSS as possible while having, like, as full featured of a system as you can. So, it's very, very cool. Check it out, level up tutorials.com.

Oh, man. You Yarn speaking my language there. Write as little as possible. That's my whole mantra. I was like, I love code, but I love you so much. I want to not write as much of you. I wanna write JS little as

possible. Yeah. I know. We, we, like, rewrote the like, we we had level of tutorials has existed for a while, right, with its current, React setup, and we actually just stripped the CSS entirely while keeping all of the JavaScript in in layouts and just rewrote the CSS from scratch last year, and it was, like, the best exercise in, like, really pruning things up and figuring out what can be systematized

and all that stuff. I love refactoring. I'm just gonna say that right now. It's just like sometimes people code with this intent to never refactor. They're like, no. I will code once now, and it will live until the end of time. And I'm like, Ira, I'm like, that's hard to do. I just assume my code is gonna break somewhere, and someone write as little as possible. That's how I prevent bugs. I try to just not write code. Yeah. Right. Yeah. Exactly. That was a great tip. My shameless plug is I I have a podcast also with Yuna. Now it's it's called the CSS podcast, and we go over in about 15 minutes or less. Sometimes it goes over.

Pretty intense CSS topics, and we talk about them like they're kinda computer science because it is computer science.

And I would put us akin to the Bos CSS podcast, but we are about CSS and its computer science and abilities as opposed JavaScript and graphs and stuff. So check it out, the CSS podcast.

Do it.

I like it. Wow. If you Google the CSS podcast, it gives you a list of podcasts that have CSS in them, and then yours is the first one. So It is? That's cool. I'm gonna say Huzzah. Yeah. Good job.

Alright. I think that's it for today. Thank you so much for coming on. That was excellent. And, also, thank you for clearing up that your last name is Argyle

and not Argyle. I'm still gonna call you Argyle. I don't pronounce things right. Argyle is what it's like, hey. Is mister and missus Argyle there? Sorry. There's no one here by that name. I'll see you later. Yep. Yep.

Yep. Awesome. Cool. Well, thanks again, and we will catch you on Monday.

Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.