Nerding out about CSS with Adam Argyle

Key Takeaways

hello my friend and friends and welcome to my podcast General amings my name is Kevin and in this podcast I generally talk about whatever is front of mine for me in any given week usually in some way that's related to front-end development but this week is a little bit different because I've got a really fun conversation that I had with Adam Argyle that I'm going to be sharing with you uh during this conversation first of all we recorded a pre holiday season when I wasn't fighting a cold so my voice will sound a little bit better once we jump into the content itself but during it we talk about first of all Adam's favorite new new CSS features from 2024 and that sort of evolves into just a discussion about a lot of really cool things that have landed over time uh then we sort of move into more pain points and issues where Adam actually shares some of the things and problems he's been having with anchor positioning and just how there's first of all a lot like an insane amount of new stuff that is happening and there's actually a whole bunch now that might be out actually by the time this podcast lands cuz he was talking about early January for the next big thing in Chrome where there was a ton of new CSS things coming and how you know it was exciting and talk a little bit about that but then also about how browsers have changed a little bit with how they're shipping features and how that can actually cause some problems like some you know there sometimes a feature is now shipping and then it's changing even though it's considered like this is what it will be and then it's like oh look we've changed the syntax uh so we talk about a bit of the pain of that as well and why that happens uh and everything and that actually leads us into part of a bigger discussion into the type of work that Adam's doing with the Chrome devell team along with bramis and Yuna and there's a whole bunch of other stuff too it was a really really fun conversation that I had with him uh I will give you a very quick word of warning before we dive into it that if you're listening to this on a podcatcher and not watching on YouTube there is one bit where I'm actually opening up the browser as Adam talks about Carousel things and he does a really good job of explaining what he's talking about if you can't see it I really don't think it's going to impact anything but he might be like oh yeah and you can see that there or something like that so just so you know that will happen for a little bit but it's a very small bit of our conversation and I'll put links to everything that we're talking about in the show notes so if you want to check them out uh as we're going through it or afterwards uh that option is there and without way too long of an introduction out of the way let's dive into it where uh we're going to drive right in where I've brought up the CSS wrapped 2024 page that has a list of all the new features that Chrome added and we use that to help Inspire and kick off our discussion about all the new features that have landed in 2024 and if everyone I know you're one of the people who gets very excited by all the CSS stuff coming uh and there was a lot of really good stuff in here that 17 features uh if you were going to call out like your favorite ones that were that came out this year is there any that for you really were like yes that's like this changes the game or whe and this could be like this changes the game for everybody or this is just something I'm going to use all the time even if nobody else cares like it was really exciting for me oh I'm definitely a good person for this I mean you can see it just on my own website you know nerdy dodev where I've got view transition itions and scroll driven animations and they're progressively enhanced so if you come from a browser that those aren't there it's no big deal um so I find myself using a lot of the stuff right away there are certain features that were like less exciting than others um but okay so in terms of what it what of the 17 features are the best it's so hard to prioritize them but I mean scroll driven animations um i' I love them so much MH I use them all the time and they go really well with scroll snap so you know I'm a scroll snap connoisseur um and so now I love that I've got scroll driven animations that can sort of bring life into the interaction the scroll snap events even though that's JavaScript um those have been really handy and then view transitions I use those all the time too you get quick really nice looking animations for like demos and stuff with uh just wrapping a simple Dom modification with a function and all of a sudden you get these pseudos it's really cool stuff um for DX I mean is nesting some of the updates to nesting are in there so it took out some of the hard the light dark function I use the crap out of when I'm playing around these days um I love that one oh yeah so smooth so quick but I also like color scheme you know so it's like uh I'm I'm tied into that World um paint order seems to be resonating with a lot of people which is funny um I mean it looks good you definitely want the second version of of cuz the first one looks so broken yeah but yeah we've lived so long without it so it's like whatever I don't know yeah I think it's one of those things that people didn't use a lot of stroke on text anyway so the paint order never really came in but now maybe we'll see it more cuz we can fix it we'll see what happens I remember the first time see what happens I mean ages ago when the first time I did something for a stroke on text and it was just you know you could even see some of the characters the way like you know I don't can't say it was the r like part of the r was like completely discon ConEd like the leg on it or whatever had like a stroke around just the leg or like or something you're just like what's going on I don't understand how this font was created so um yeah I think I find it interesting with a few of them just cuz like when I was looking through the list I was like some of these are things that I think like obviously with scroll different animations like it's so easy to be like look at this it looks amazing and like it's so cool it's opening up um whereas obviously things like say at property like we've had it for a bit now but it's finally get you know across in in in the different browsers but like it's not fancy it doesn't change something immediately but it just opens up like oh we can do all these other things now that we couldn't do before and it ends up becoming useful but uh yeah so it's it's interesting and I'm always curious to see which ones actually like in the public gain the attention compared to the the the regular ones um cuz sometimes I think it's the ones we don't expect sometimes that people sort of start using dayto day that you're like oh that's the one that you ended up becoming well known okay cool yep happens all the time we're like oh you're going to go with that that's cool um yeah take it and run we're like glad you found a a part of this thing to be excited about yeah uh I know some aren't is exciting though like backdrop inheritance you're like ew uh that's the thing we got you gave that to me what did you even give me you're like well really I'm making it so that when you do set something you don't have to go anyway just don't worry about it this one's just just don't it's a fix yeah I I know for me anchor positioning is one of the ones I think is going to take off just because it's such a pain point for people so good yeah yeah although It's Tricky as hell I would okay I've been I've been an anchor in Carousel land for like a couple weeks and anchoring I do do love anchoring but I'm also frustrated more at anchoring than I ever have been with almost any CSS and before anchoring my hardest one to get a hold of was view timelines so scroll driven animations had not they did not click easily for me it took me I wrote multiple articles multiple demos and still uh sometimes it'll get me but anchoring is a little different um because they has the imcb the immediate uh initial uh the immediate containing block or whatever and which is invisible you can't see it it's totally there uh but nothing is good at telling you what it is and it can collapse on you just like when you put containment on a container all of a sudden it doesn't have any height and width anymore um and then you don't know why you also the centering keywords can get you into scenarios that you don't it is littered with complex edge cases but it's also so easy at first you're just like a couple of a couple of properties and you got yourself a beautiful positioned thing um so it's just classic CSS easy to get started impossible to master wildly capable uh but with numerous foot guns uh but yes anchor is amazing and yeah and I I do think it's going to be one of those um yeah cuz I I somebody brought me into a thread on Blue Sky I think where they were saying like how come it's not working with flexbox and so I was like oh I'm curious cuz maybe it doesn't and it it had nothing to do with flexbox it was is just the way they' organized it and they they were using a position relative somewhere and I think whatever it was I'm like oh you just need to do this instead and then it works and they're like oh okay that like and because we've been so trained with positioning up until now like there's habits to break and different ways that it's working so it depends if you're using anchoring or not using anchoring how these things are related to one another and yeah it it's going to be there's going to be some articles written where people are upset the thing isn't working I think oh the but the amount the bugs that people are going to report is crazy um I so like one thing with anchor positioning that caught me off guard the other day and lit I'm like literally every day something catches me wildly off guard with anchoring but this one was I thought I could be done with position relative I was like oh I don't need relative anymore I just anchor stuff to the things and I had a bug where I had a scroll it was a carousel scroller where there's like a little um a watched check mark actually you want to go to the demo do you have Canary want to see anything fancy yeah okay uh so if you scroll to the left a little bit back towards season 1 or even just click season one yeah so see in the top right each of those boxes there's a little check mark oh yep to indicate that they've been watched by you uh those are all anchored there and I was like cool I'll just anchor those into the corner so obviously check mark is a child of that card and um since it's a horizontal scroller and those things are anchored I was getting all this horizontal overflow on the page and I was like where did all this overflow come from and it turns out all the little anchored things when they scrolled offc screen were still like demanding space from something and so I had to go put position relative on the card to contain the anchored elements wild bounds that it was building this is really yeah that's weird that someone was just asking me something about something where they were getting I'm like they didn't mention they were using anchoring but they were getting like extra space overflow from something I'm like it doesn't make any sense so every one of those was creating is it because they were living in the grid and so it was making extra it wasn't making columns more like yeah it was like they were unbounded it was like they were unfettered anchored elements inside a scroller and it was just they're they're containing boxes that they needed to do this and were building up some sort of space and dimensions that then caused a bunch of shenanigans and I was like here I'm just thinking I'm going to innocently oh there's key words for anchoring to the top right yeah I sure enough I anchored it there right away but it took me forever do anything else uh this demo is uh really fun though so those season titles are generated by CSS they don't have an HTML element also if you use the arrow keys they operate like uh arrows because they are a marker uh created for the first item in a series uh for each chapter so it's like each chapters 10 10 episodes the first one gets a class on it and then I generate markers for this scroller based on those classes uh and the browser says okay well then here's those elements and then I can anchor them to the top left I can style them however I want I can put content inside of those markers anyway it's really cool stuff how does the keyboard interaction work they are so they're gen yeah so they're generated by the browser and they emulate a radio group um and here click the any of the other demos on the left there they'll have dots instead of titles so that one kind of is acting like tabs here's one okay big old hero slider I don't think this one has dots in it so that one's just marker buttons so also those buttons generated by the browser those buttons generated by the browser and then that one instead of dots I did squares because people like to do that MH um so there's also scroll State animations there so they're scroll triggered when that element becomes snapped it trigger through a CSS uh scroll State query which then triggers a staggered reveal of all the items inside the Hub that's so yeah no JavaScript on this entire site not not a lick anywhere and you'll see some pretty cool interactions um yeah I'm going to have to poke around in here a little bit well good luck because Dev tools does not really represent those since they're generated they're very funky and so the tip is if you do go looking scroll to so select the Carousel and Dev tools scroll down to the very bottom of the Styles pane where you'll see the pseudo elements and there you can dink around with the Styles okay yes right yeah yeah that's interesting it's a little tricky yeah huh but yeah I'm building this site out to kind of showcase that these new so it's like basically three CSS features um including anchoring and then including scroll State queries but it's three care cell features that are going to allow me to build any care cell that I ever see accessibly um and it's just just CSS it's kind of fun just got to know how to use scroll snap it looks like you have a lot of ideas that haven't been built yet I have a lot of ideas that haven't been built yeah I have a quite a backlog um I think I just added the 3D one like last night I was like oh I can just add a view timeline oh it's the first one where I did a view timeline in one of the car cells because the other ones had been scroll triggered this one's scroll linked um and yeah so yeah manages that there it is Scrolls uh again the Scrolls triggered animations just kind of like a cover flowy type effect and it's only a few lines of styles that's a bug right there where the pagination isn't smoothly going there yeah I think it's something I did with the 3D that's making it nuts oh here okay here's the most wild one go to the paged example maybe it says Pages or paged Pages yes okay this one the browser since it's generating dots it generates dots so grab the resize handle on the bottom right M and watch the dots change just does it on its own so I'm using CSS columns that's not a grid layout it's a columns layout and for each column that gets made I can Target it and make it a scroll snap Target and each column can get a marker generated for it so that's why we see Dots made for the dynamic resizable amount of items that could fit in there per page this is like wildly powerful um and yeah just just CSS that's really cool nice so impressed yeah that's a that's a cool that's a cool one uh Carousel stuff is great that's really awesome of course people ask do we need more carousels yeah they keep saying that and then I went on Netflix the other day and with that was the only widget it was three different types of carousels and I was like this entire experience is carel so people can whine about them all day and then they'll sit down on their couch and interact with them without even thinking I think it's different when you're on like if it's say an quote unquote app experience versus like a website where all of a sudden you have like I think when people think Carousel they think of the the hero carousel on some like put Mar right yeah um and not necessarily the other one so like if you're on your TV or you're on your phone especially with touch like side scrolling is so normal um yeah where you know so I think yeah I think part of it about the the name Carousel gets a little bit of a stigma to it when it's the the way the person the way the interactions actually happening isn't always that traditional thing or we're not necessarily you know hiding the content somewhere we're just it depends on what the content is and it's why is the person interacting with it and everything else that comes with it yep I think yeah we got a bad taste in our mouth from those autop playing humongous sliders so we're at the top of web pages for a while yeah yeah um since you're really good at coming up with cool use cases for things I need to know what the use case is for field sizing oh there's multiple okay so um one of the main ones for me is the traditional select element it was always the width of the widest element and even with JavaScript you couldn't accurately make it fit okay oh the use case for me in that scenario is let's say you have a paragraph and the paragraph has a couple of interactive words in it like a a genre of movies says you're like I would like to see horror movies and when it where it says horror was in a select element and that select element I wanted it to appear so I'd get rid of the borders and everything so it fit right in it's like a normal word in the sentence but until field sizing I couldn't shrink the width of that to the width of what was selected and so it always created this obnoxious space when it's in line um and so that's one really handy thing and then the other one is the text area being able to autog grow to whatever you're typing in it without any JavaScript is also really awesome so that would be yeah so the yeah the WID grows and the height grows and the height Grows Right yeah yeah so yeah on GitHub you know that was like a they had a whole JavaScript uh complicated JavaScript setup to handle that in the comments area and they got to rip it out and replace it with one CSS property which is pretty common these days people ripping out chunks of JS for a little bit of CSS it's it's becoming more common yeah um is there anything else in here that I wanted to specifically talk about cu the the field sizing one yeah I was looking at it at first and I was like but I do especially with with the selects and I keep I kept seeing that as like an option I'm like but why would I want it to fit the text inside but what you said makes a lot of sense so yeah it can it's also like when you have a really long option in there that's next to short ones that it gets also really obnoxious um oh even on my website nerdy dodev in Mobile in the top left I have a drop- down menu and that's to so where you had like blog and notes these filters those turn into a select element in the mobile menu and that select element uh I need it to fit in the nav and look pretty there you go I want the arrow to sit to the right of the word right simple enough right no not if not without field sizing without field sizing I have to guesstimate how many characters and it's always wrong which means either the word is cut off and the arrows sitting there or the arrows really far away but with field sizing the arrows always perfectly sat next to the word yeah that's a good example cool um the oh the other thing too about the snav there it's using um interplate size oh not this uh not on N.D but on the CSS W one yep y that expando collapso so that's dog fooding all sorts of stuff so not not only is there scroll driven animations highlighting them it's using interpolate size so that way you can animate open and close that's why you see it yeah because that's just a summary details M um and then it's it's also using starting style it's also using the new details content pseudo element and so it's like a lot of those first few things in that list are being used on the page you're on in a progressively enhancing way um which is kind of cool yeah it is the yeah the stylable details and people have been and the exclusive accordion that's why only one is open at a time yeah and that's such an like when when that got added it was like oh that's that was easy it was there's nothing you for those people for anyone who doesn't know you just give them all the same you the details give them all the same name and then only one of them will be open at a time so it's yeah well yeah um actually I also wanted to ask how you decided to um n like components made sense the for the ones that are in developer experience I was surprised that the popover API was in here I guess it's something that doesn't directly you know impact the user it's more about how we develop that thing um but like or like I guess like I was just like oh I'm surprised the pop over and the starting style weren't throwing in interaction not that it's a big deal but I was just curious if you had any insights yeah uh I I have some so a lot of those groupings were done by me um and they were different groupings to begin with and as we kept building the site I kept changing them we also ripped out by the way like seven features that didn't get added um because they're going to they didn't make it in 2024 they're going to make it in January 1 of 2025 oh no which which by the way 2025 January is expect like a one of the biggest drops of CSS stuff in a while so yeah do we have any you excited for that yeah the select element custom customizable select is dropping the carousel work is dropping textbox trim is dropping yes um and I think there's one more um maybe Advanced attribute you know you could right now you can't uh take a data attribute and concatenate it with something else in CSS soon you'll be able to um so yeah January is going to be pretty hot cool yeah that speaking of things that like will probably sort of go under the radar but end up getting wide use I think the the textbox trim stuff is going to just be like part of the normal we use that all the time without thinking about it too much yeah it's a such a quality of life like oh I can just fix all of these alignment issues that I've been suffering in seriously all my buttons all my tags there's so many different use cases that are really nice just yeah magic numbering the different padding top and bottom on a button be history yeah I can't wait till that's history people be like why' you do two remem one REM and you're like back in my day um but to answer the question I think developer experiences ended up being kind of a catchall um and it was just like if it wasn't user facing like a user doesn't know if it's a popover or not like they don't they don't really care um so that that was kind of the the reasoning there it's like this is more for developers it's easier for us to put things there we now have a space for these overlay experiences it's just like it's easier on developers um users will get things like accessibility out of it and there's lots of great gains for users in it too but users aren't asking for popovers would you add a popover in this they might say like um add an animation to this uh you know component or whatever but yeah yeah yeah and since uh we're on the developer experience one actually with the the changes to nesting that were made so if people don't know it was so when nesting first came out are the and okay I'll ask cuz I remember any at rules were hoisted or reverse this I the other way around any normal rules would go up above any nesting yeah any nesting so if you had any at rules in there you're even if it was like a media query in the middle the rule underneath it would end up no the rule in the media query would win because it would get put down at the bottom right order yeah the order from appearance and so Yak if you were if you were counting on the fact that it it I wrote it after the media query uh it should be this yeah that wouldn't that wouldn't be true um but be true and it is now was was it originally done the other way for technical reasons and then it's just the was a solution that came up or was it a decision that was made that then got you know people were like this isn't how we actually write CSS so we want you to change it this was like re this was a really early um idea in the nesting syntax uh talking with tab about it I'm pretty sure tab just did what SAS did um and also uh one of the technical limitations was the CSS on and that's why this is called cssom nested declarations is all of the nesting has to get represented in a a tree or on object and um to have these sort of ephemeral nested groupings that like if you think about it right you had some Styles then some nesting and then some not nesting it's just like how are they going to represent that in an object um and so essentially what they do is they wrap it in an and that's the hot key and so um once they just were like well we'll just do this on behalf of users that way their visual order can make sense it's kind of like when you write a nested at media query and then you don't specify what's your nesting again it just sort of inherits with the ant in there you're just doing the same thing there it was um requested at the beginning that it should work the way that it does now but the limitation was there they were like basically it got brushed aside early on because people don't do that people don't do that it's not there but but people don't do that and then all of a sudden like even Alan Sterns who's like one of the main folks on the CSS working group goes and scrubs the Adobe SAS style sheets and he's like oh oh people do that it's like he's like it's not even in there just a couple times like it's all over this um and they wanted to correct it and so uh it's nice that they corrected I like they've been doing more changes too like another one has been uh the inability previously to Nest pseudo elements with pseudo States yes uh that's also fixed so those will be able to work as you expected yeah oh that's good yeah and that coming out that one came out because Carousel and select both needed it where you've got these pseudo elements that are new and special with lots of new pseudo States and people are nesting they're like I'm going to Nest my way and then all of a sudden they're like hey this doesn't work uh it's it was dumb that it didn't work and not it'll work oh that's awesome that's good cuz that was just that like yeah that one thing we were like why isn't it was frustrating when that wouldn't work yeah and it's interesting when you you were saying like comparing the nesting in the native CSS to how it worked in SAS and I think it there's like the mental shift there a little bit cuz in SAS you know it's compiled to something else so it makes sense that they pull it out and then have to build something and I never questioned it when it was there but when it and I used SAS for a decade or you know a long time now anyway and it was never a thing that I thought about it was just like that's how it works and then as soon as it was a native CSS I'm like this is stupid why is it working this way so yeah that's that's interesting that um that it changed a little bit or whatever they matched Now sort of or how this is working they updated it to more how people expect it to be working yeah yep it's taking out all those little splinters and making it easy mhm it is one of those thing I I guess I don't really hear about it the main thing I hear about is when I talk about something that doesn't have perfect browser support people are like I can't use that thing because a browser support or whatever but you probably hear it more when it comes to like we're seeing now things like nesting and scroll driven animations and these other things that are making it into the browser past like the initial thing right cuz at first it's behind a flag in Canary and then eventually it's just in Canary and people are playing with it and then eventually it finally everyone agrees on the specs done it makes it into the browsers and then there's tweaks happening still like with that and it seemed to be like yeah it that seems to be happening a lot and do you hear people getting annoyed with that or is it more like it's good that we're going through these iterations now you know is it good that it's still a little bit fluid even once it's shipped just because then we can make sure we're like oh it's really early days we can fix these problems and then they'll be good going forward like what do you yeah what do you hear from people this is definitely a topic um and the devoll team has been requesting we ship less fast and because uh like I'm I'm a I'm the one hammering on this a lot where I'm like I don't think it's cool that we're acting like a JavaScript framework we're not uh and people can wait they should be getting something stable and good we shouldn't be experimenting on them uh in these iterations that's that's not cool especially because we can't deprecate things like there's a lot of reasons to not U move so fast um and there's like push back that's like incremental updates they're like these are just incremental updates um you know and we'll we'll incrementally update things later until we have the like select elements a good one they're like we'll ship select without select multiple support out the gate I'm like that's not cool you should have a solution for mult because you can't once you've sat down and and seen the complexities of what multiple is going to do that you're going to have wished that you made some different decisions on previous things but you're not going to be able to nudge them because they're in stone in the browser forever so um there's a lot of us that are calling for a Slowdown um though I don't think it'll really happen I think they're being more conscious about it like the whole anchor stuff getting needing renamed and we're like and chrome 128 to 130 whatever you have to not do that and then afterwards you can just do this new thing aren't you aren't you happy and it's like no no one is happy with that we do not want to rename we don't want early adopters are feeling more pain now than they ever had before and that's not cool I don't like that at all um so is that just more of a question of leaving it behind a flag for longer and because I think part of the reason it gets changed is feedback from people probably like I know the new anchoring things to me make a lot like all the names I'm like oh this makes more sense than the old ones because just the consistency behind them and is it just that there's not an like if it's behind a flag the whole point there is let's try this out use it it hasn't shipped yet nothing's official but then there's just not enough people playing with it so you're not getting the feedback that's required yep yeah there's too much to get learned once it ships the naming of the um anchor ones that was brought up by Apple folks that wasn't from usage well it sort of was it's like people are going to Center on the top a lot and it was like cool so you do anchor bottom minus 50% of the Anchor's width or whatever and they were like yeah we know that you made it so it was possible but shouldn't it be easier and so that I was like oh yeah this just add some names for these common patterns that people are going to do that was an easy one to change but changing from inset area to position area you're like people shouldn't have to deal with that that noise should just that should have been history like I don't think that was a good rame should have just been inset area who cares um but then we had yeah so we cause a lot of churn with people which decreases adoption it makes people more timid to get into something because hey maybe it it's in one or two browsers but they've changed things before uh I want to wait to to get into it um and then the rate of new things that are happening is a lot so so it's like some people are feeling overwhelmed that they can't keep up simultaneously we're shipping so fast people can't keep up and we're making them rework things because but conversely if we were shipping too slow people complain that it's too slow and that shipping too fast actually creates this perception of like a really healthy platform even though it's annoying to you you're like well at least it's not dead or dying you know it's alive and kicking you're like crap I can't even K up keep up it's Sprint faster than me it this is uh so there's a lot of tensions that pull uh this stuff in different directions from uh leadership teams and and then Engineers wanting to ship things to people that are don't have Green Field projects so they can't there's a lot of people that are like I'm in a fiveyear uh code base we don't adopt anything we just don't uh it's a beast no one wants to touch it we do everything we can to like not touch anything we're not going to refactor our dialogue to use the dialogue Element no do you know how many dialogues are in an app it's like we're not going to do it um so yeah it's this is a very tough and uh conversation topic that's very Forefront of our minds is we wanted to reduce how much noise we put in there like we didn't want to put experimental features in CSS wrapped actually we wanted to but we felt that it would do a disservice to folks who are already feeling overwhelmed to feel more overwhelmed um and we didn't also I didn't want to go right about customizable select or or css uh Carell things when stuff is getting changed the name all the time and I'm like I don't like leaving a wake of old names of things behind at least not on web. I'll tweet about them all day I'm like this stuff's coming here's his current name that's temporary but yeah it's a good question though dude I ran into that problem with the anchor positioning article on I don't know if it was web.dev or the Chrome for developers blog one of the two of them that's also confusing isn't it do you know what the difference is no I don't yeah no does except the authors who manage those those Publications bramis has been trying to unite them he's like people don't know they don't care but they know that when one shows up on here it's anyway so get back to your story sorry yeah no it was I think it was uh one of yuna's early articles on on it and it was using the older syntax and I was trying something and it wasn't working I'm just like what I know I'm doing this right I was so frustrated then I find I'm like oh okay all even now vs code still autocompletes to the old syntax too fix tools at some point was it yeah seriously that's what I mean it's like we pump it out too early and um it creates noise for a long time so it's like yeah uh we don't have to move that fast it is yeah it is and it's one of those things definitely that I think depending on who like you're saying like you're hearing some Sid saying you need to ship faster or more like let's keep it going we need to show what's you know that it is there's progress being made um I see the other side what you're saying people are just like I can't keep up with everything that's going on like it's it's insane and sort of you know finding that balance and then also like for a lot of people that are just working all day long like even if they sort of keep their a pulse on things it's like okay that's cool but I know I can't use it right away because I need to wait for browser support to be better and then so even if you're just using like the Baseline uh the wide support what is it wide widely available widely available that's it like the amount of time you have to wait before that happens you've forgotten about it like you don't know that like so it's you know not only keeping up with things but then keeping up with browser support of those things and and everything else it is a lot of people expressed to me of like how do you keep up with it I'm like I I try my best it's it's hard uh and then even I was when I was I talked to bramis week ago two weeks ago and I don't remember what the topic was that we mentioned but he's just like oh I've been so into uh the view Transitions and this other thing like I don't even know how that works like this is what I've been focused on and I'm like yeah that's I think an important thing to remember is that even the people that are in really involved in it have their focus areas and know some parts of it better than others 100% oh man you you just described so many different things that I tell my managers or people around me too that your adoption story that you summarized that's almost like word for word for what I say I'm like cuz people cuz my managers are people you know at the Chrome leadership team were like hey why isn't um subgrid more adopted or whatever um and I basically tell them a story just like you I'm like well they heard about it and then they looked at the browser support and said sweet can't use it then they maybe heard about it again later and they're like sweet still can't use it and then they're like oh is it widely available now has it been out in browsers for 2 years I don't even have a project that I need that on right now so the timing's not good and then magically this one moment comes together it's like it's like I'm Ready the features ready we're ready oh we could finally Implement somewhere and usually it's a green field project cuz people don't tend to refactor Old work and so yeah adoption is tough because uh there's a lot of factors and some of them are even social um like you don't get time to explore your job some people don't get the opportunity to Tinker so there's no room for that um anyway yes very hot topic and yeah even the people that are supposed to know the stuff all the time we miss it um constantly I ask for help on stuff what do you most focus on what you were saying obviously you're doing a lot with the carousel stuff um you were super involved with scroll driven animations scroll snap stuff I guess now is there anything that you're sort of top of the list going on for you or is it still mostly in those things yeah my focus area so like the Chrome deal team is Yuna bramis and I bramis focuses on view Transitions and scroll driven animations um more of a performan tuned um animation side of things where he'll dig into the browser um implementation details and just sort of like work those things out I'm generally the typography color and scroll uh scroll snap or scroll interaction person and Yuna is kind of like our team lead she does a lot of like planning organizing uh she's previously led a lot of the select uh work as well as the CSS next working group so but I mean she's been gone for a while she's going to come back and be like what is everything I don't there's so much new and we're like yeah there is sorry about that um like select so much of the stuff in the select work that she was focused on has got renamed again for like the sixth time that one has gone through so much thrashing it's driving me nuts I'm like please in January don't release something that we have to rename pieces of I just really don't want to do that to people um so yeah those been my FOC but next year my focus is going to be Carousel almost the whole year um as well as as supporting select I think that's like with select we still I still no one has made a select element in that uses all these new features that is mobile and tablet and desktop ready with animations and all the whizbangs and I've got one that's like really full featured on desktop and it's already like it almost 200 lines of code uh and some complex requirements in the markup and I'm just like the the things that people are going to be building with this is going to be wild and it's going to take a lot of code but it will be all CSS and it it's going to be really neat at the end but get ready you're it's going to be a long video you put out Kevin that talks about the select element the Carell stuff should be should be pretty quick you be like hey let's add buttons to a scroller five lines of CSS leader we've got buttons now let's style them here's the fun part but select is like it's heavy it's heavy stuff I guess there was a reason that we haven't had a proper one for so long because it's not a not such an easy nut to crack but it's also it's good that it's feature Rich and we're not getting like this half-baked little thing that's like oh I can do something with it but I still have other use cases outside of this you know it's that's not what we need right now yeah awesome well I appreciate your time in chatting with me we've been talking for a while now so I don't want to take up your entire afternoon no worries this is this is the fun part this was very en yeah thanks I I really enjoyed it yeah thank you for for nerding it with CSS and for all of the the work that you put into stuff like CSS wrapped and letting everybody else know about all the cool stuff and all the demos and everything else that you're constantly building that are super inspirational and there we have it once again a huge thank you to Adam for his time in having this conversation with me really enjoyed it and if there was anything we talked about along the way or just all of you want to follow Adam and the stuff he's up to and all the cool demos and other things that he's constantly sharing links to everything once again are in the show notes down below to everything he's doing and all the different things we talked about along the way here and thank you very much for listening as well and of course until next time don't forget to make your corner of the internet just a little bit more awesome