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

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

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

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

forward. Every browser is interested. Every

vendor prefixes were initially meant for, for the entire episode. So if there's something that

to the point where I can, like, kneel or do, like, a a lunge while I'm coding

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.

There's nothing worse than running into

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,

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.

yeah.

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? 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, Just 1 gust of wind, and we all fly over. All on a roof.

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.

Cool.

Kinda cool.

Wes have conference calls there once a week. And there's usually

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.

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

Nothing?

all of these steps or something like that, but I will voice

It's where I live my life. Yeah.

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

in my CSS.

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.

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

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 then they pulled that list via JavaScript, and they were able to just basically scrape your browser history

because it that's a security issue. Like, somebody put out this website where they just

how,

the property value API, the animation worklet,

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

that just says that the system itself is working. Right?

the like, we we had level of tutorials has existed for a while, right, with its current, React setup,

every once in a while, but it's like CSS mistakes. Yeah. Yeah. You know how that really sweet, JavaScript and Firefox. Right? And so, you know, like, Chromium can't just just go make standards.

Did you have, like, community members that specialize in color, international ization, box models, accessibility, UX engineers, we gotta sweat those details. Right? Yeah. Yep. Yep. Yep. Details.

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?

seriously, like, And this is annoying because you're exploding and joining arrays over and over again or, you know, using 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.

Netflix, it's kinda like Netflix, but computer programming. That's what I do. Okay.

so I ordered one of these giant thick foam pads that you see at, like, the PT's office.

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.

possible. Yeah. I know. We, we, like, rewrote JS low as it goes so I can, do some stretching while I code. And my knees have really taken a beating,

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

wiki.CSSwg.org sometimes it's emergency items. Like, things get injected to the top of the list, and sometimes things get kicked to the next.

and I'm not talking about the rolls you eat. Talking about the roles you beat. Oh, yeah.

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

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, Who would've thought? 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.

mistakes.

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, 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.

Sick.

sir sir Argyle.

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,

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,

I don't know. The whole process is so fascinating for me, especially because I I'm coming in. Like, I I know, like, and, that's pretty much all we do. So ESLint. Yeah. Just come on. Just just Wes

and they're unsecure.

Oh, man. Well, the is there anything else that we we didn't cover today? There's, like, so much

building

design systems using CSS variables,

/ ideas/

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

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,

Yes. Yes. MapQuest, Bowman.

is leaning into Houdini,

use get computed style

I think it's c

That's funny.

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, CSS topics, and we talk about them like they're kinda computer science because it is computer science.

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 be something. I don't know. Yeah. I'll I'd love to help you guys out, so ping me.

It's it's kinda morbid.

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.

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'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,

I'm going to sick pick,

long and grueling because it it is. So, I mean, that's not like it's not 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.

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.

No?

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

syntax in the how did you hear about us section, and that'll get you

Still a good transition. You know?

anyways. You know, Node almost like a meaningless change.

of the proposal or whatever, and I'll let you know, you know, very nicely whether or not it's gonna And what you need after a draft 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.

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 I'm gonna be a little sad, but, yeah, And, yeah, I'm kinda hungry for more. I'm like, what else can I do? That was cool.

podcasts

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.

Yeah. I know. It's funny. It's weird because I always say, like, I I teach web development, Yeah. Right. Yeah.

even to do an initial implementation, Houdini So I don't know. Any questions while we're while we're here? open flame. I feel like this super rad chef that's in this heat.

And they were happy. They were like, thank you. Yeah. That's amazing. That's a 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.

This is very much internally the way that the browser implementers

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,

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.

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.

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,

Head on over to syntax.fm

the implementer?

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

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.

or a griller. And, man, my wok, I seriously, I'll go in the back. I got this hot 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, 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.

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

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.

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.

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 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.

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.

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 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 It's somewhere along those lines. Like, it had good intentions as a beginning 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 I'm just gonna I'm gonna retweet this right now. I'll just shoot that back up to the timeline.

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

do you guys know origin trials? It's like the next more hardcore version of experiments.

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

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

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

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.

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

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, 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, The propane burner is key too because you can you can do deep frying outside.

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.

it gives you a list of

how risky

nothing personal rogue. I'm in I'm in I'm into your products.

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, 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

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.

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.

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.

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.

Training them young. Training them young.

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.

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,

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

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

Node? That's what my son does too. He clamps up. He freezes. He's like, and that's just kind of where you think about yeah. There were comp there was competition.

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.

styled all visited links block and and all unvisited link display none.

Yeah. Balance pad. That's cool.

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.

and use

we want people to use things unprefixed, orientation

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.

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 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 And those can be kind of, 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? 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, 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, slash opacity.

on that. And that was a huge security issue. So, There. You you let it sneak out. That's great.

something that I think all devs

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.

Wes.

It's fantastic. It's this giant

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

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

that we won't do until they figure out how to fix the security issues on them.

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,

Sick.

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.

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,

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?

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

I recently just bought a 100 piece

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.

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.

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,

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

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.

and you will get 14 days for free. So check it out.

And the way that they work together happens asynchronously in GitHub 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.

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

Wes doesn't get movie references.

a a wok, and I know that Wes is a is a barbecuer

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

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 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,

give you good feedback about whether or not your site is actually working. I'm talking about LogRocket. Now

Sometimes too. Sometimes editors draft. So that,

Do you ever tell people that are just, like, your, like, regular friends that aren't developers?

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 And, as opposed JavaScript

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,

That's funny. Yeah. Important should

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.

Yeah. He doesn't like movies.

we wanna implement

Yeah. Okay. So it's

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

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 to get implementer interests. So you need to convince a browser

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.

are pretty much not a thing anymore. Is that correct? That is correct. They're gone. They also, just didn't encourage

get the color of visited link in JavaScript

but some of it can. Like, let's think about color functional notation.

Yeah.

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 But if you just do just margin, it's always top right, bottom left.

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 I'm glad this is interesting.

And so that layout was not only performance boosting for international languages. It was an enablement 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 There's definitely shows on well, honestly, a Wes done yet, and you guys are over bickering with your beers over what color it should be. You know? It's like Yep.

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, 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 logical.

I think it's just they want more security.

in its worklet. It's doing less work because you're getting, rich values.

So it's kind of interesting. But yeah.

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.

Bos or something like that? Big CSS.

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 know how well they're doing.

Yep. That's literally 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.

a 30 day unrestricted free trial. Thanks so much to FreshBooks for sponsoring.

Landon, what's your favorite book?

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

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.

Hey.

and graphs and stuff. So check it out, the CSS podcast.

commenting.

can,

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,

developer relations should

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 I edited source code, and I made a CL that got merged into Chromium.

And then they just came up with a list of websites you had been to,

and then we go back to the in asynchronous sort of time workflow where things happen in GitHub. Okay.

had its intent to ship like last month. It's in Chrome's stable 85, I think,

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.

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 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.

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

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 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.

Awesome for experimenting. And if you wanna experiment with your site, function. Right? You could just have the actions that

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

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

I I do.

Oh, interesting.

security bits just to have on hand so that when you run into

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

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.

Deep cut.

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

you cannot

of a cool feature do you wanna play with.

I might I could probably save a lot of megabytes

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.

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

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

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

Pretty intense

to get the color of a link

Okay.

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

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?

That is great.

like and they're like, oh, what's web development? And I'll be like, okay. Well, you know, like,

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

Sick.

pruning things up and figuring out what can be systematized

Yeah. Very cool.

Is it, like, in different like, do you guys go to Hawaii or something on on big CSS's

My sick pick is 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.

Well, I there's, like the only thing we didn't get to is rolls,

in JavaScript

Okay. So we've got the editor's draft, and the next phase is called the working draft. And the working draft essentially means

And, that's sort of it. So you have the spec author, community member, and implementers. And those that trifecta scenario. Does it make sense what I just said right there? Because I'm, like, comparing engines, Chromium, WebKit,

that's why vendor prefixes

which means Oh.

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

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

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.

propane burner for outside. And that way, I can really crank the heat up, and that's super nice. So

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.

Type 2 m. Okay. So when you work with CSS and JavaScript and you're like, okay. JavaScript, go transform that by 50%, 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 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.

like, like, half of the,

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

really handy. And that unlocks 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, I'm there, and I'm trying it out, and I'll tell you what's good about it. Yeah.

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 versus some of the other proposals have been like, well, I wanna go into my style sheet and just be, like, at page 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,

current color should be current dash color because it's I think that's, like, the only thing in CSS that's camel case.

I like it. Wow. If you Google the CSS podcast,

Like, they're, like, using a an app on their phone? You'd be like, you know I wrote part of that app.

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

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.

Yeah.

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

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.

fun as your other Tolinski don't know.

and seasoning it that way too only took,

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, 3, that's when the browsers start to implement it. Right?

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 If I had a media query, they'll let me know. And this came way after prefers reduced motion and prefers,

Do it.

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.

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 in CSS, and now we have to live with it? Oh, yeah. They have a document for that.

Peace. Peace.

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.

and then works synchronously in the calls until we roll this thing over and over and over until it turns into a Perl.

make sure,

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.

So what's next after

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

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, 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.

set of,

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

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, They didn't do that. That was just my dream I had, when it happened. That's cool, though. Okay.

that you use an, an a service to make sure that your users

a screw or bolt on something that you can't undo because there's a security bit in it. And,

via logrocket.com.

basic walk from, Costco.

CSS content and and, like, you see, you see a lot of JavaScript content on Twitter, but

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

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,

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, We Yarn progressing

Like real paintbrush. Anyway

Good. Congrats.

why don't you introduce Vercel, 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, Something in my brain totally clicks, and I never spell it

And is the ink because your wife is a tattoo artist

how does stuff get added to CSS. You say you might be sitting there and you might be saying, CSS

or because you love tattoos? No. It's actually

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,

But I, yeah, I love the new stuff. If there's something new and shiny, 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 Yep. So my preference is I've kinda gone back and forth.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos.

Yeah. We, only once have we ever put out that video of us recording because it's So what about if something gets to stage 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.

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.

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

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 And if that goes well, your intent to ship is Wes and it lands in a major browser. So FlexGap I

I n k.

So let's talk about CSS

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?

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

is browser session replay,

which for selecting elements based on which row they are in, which is kinda cool. That would be

Yeah. Not very good.

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.

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.

and FreshBooks, which is cloud accounting.

so I just like just provocative.

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

With me, 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.

Welcome to Syntax.

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

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

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.

should be added to CSS,

So,

That Twitter account so you can follow is Argyle Inc, a rgyle

love CSS. So it's like this crazy fiery passion. I really just love making, like, good, smooth, tangible, 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's just a gap. Yeah. So depending on 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.

Today, we have

Aw.

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.

was, like, real proud. I was like, wow. Nice job. But, like, logical properties have a shorthand And I would put us akin to the Bos CSS podcast, but we are about CSS and its computer science and abilities

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.

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.

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

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

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.

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 Oh, dude.

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

or they could fork and contribute to your proposal.

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.

it time time needs to happen. And this is where you might have someone else make a proposal against your proposal, a counterproposal, over how to do that. Like, people are gonna wanna use logical properties on all sides in one shorthand.

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

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

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 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.

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.

Node What's the word? And so there's, like, l margin or, It's very honest, and they're still backtracking some of it. So some of it can't be backtracked, and and assume that that CSS JS it is in that spec is going to live in the standard.

when people

For our audience, bike shedding is

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

course lately. And

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

Oh, you're right.

that might cover the whole page. But

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

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,

Unless, as a Canadian, don't you feel upset that you can't use the correct spelling of color,

you know, 1 REM space 1 REM space 1 REM space 2 REM or whatever space

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, 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.

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

really, really considerate. It's the type of people you would want managing your design system type of thing. Mhmm. You trust them.

But was that slash added because they

That's why they have they got rid of vendor prefixes. Right? Is that people were Oh, yeah. Yeah. That's that's kind of like

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

And the slash is

developer to start prototyping with it. And at which point they begin prototyping with it, And so I bought a propane

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.

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 can 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.

block, which is top and bottom, but if you're in Japanese, then it's left and right.

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 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.

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.

and then we'll reconvene. I don't know.

after it had already been created?

in a special way where it's like a space JS a type of separator, and we have parentheses as containers for parameters.

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

they had to modify shorthand in after

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

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.

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 And so I like I'm like, I'm dropping fire on the proposal, and then, like, it gets some

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.

forward slash 0.5 or something like that. Or it would even be better. It would be like a transparency

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

is articulated as wanting the logical property, Who cares? 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.

is

you'll start to see tweets that go out like,

f r a a, and you have to remember what the hex values are for, like, 0 through a 100% opacity.

value value value, 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, this string and assigning it as a style. And then if you want to get that style back, it comes back as a string.

by your yeah. So you you have to use post CSS for that. We have both grays. You have both grays. Yeah.

So just that margin shorthand that I wrote

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.

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.

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.

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

background sized cover. I, like, once in my career, have remembered the syntax Always fun. Always fun. Alright. Well, let's let's end it there, and,

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

Ultimately,

pieces of it just like your design system.

Node of them was JSS.

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.

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? And I and I think I like the syntax. It's margin colon, hi.

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,

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 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.

What's the repo

remember the word. JavaScript style. Oh, yeah. Okay. And it was a proposal. I think it was very similar to JavaScript, oh, they're gone? I don't know. Mhmm. Interesting.

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.

pseudo selectors

somebody proposed Like, where do those happen?

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.

love. But then you have other things to get proposed, and all of a sudden, the comments are Scott.

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

Succinct.

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.

that you would have? Repo is

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,

rows in CSS Grid, or can you select rows in CSS Grid? Like, I wanna select every other row

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

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

and that's not possible, in Flexbox or Grid right now. And I'm just looking that up. And 28 days ago,

unwrapped elements,

GitHub 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,

that understood the entire thing. And I said, like, how do you select

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?