Join Kent for a live workshop in Goa, India 🇮🇳

Advanced React APIs
Time's up. The sale is over
Back to overview

Exploring the Power of CSS Custom Properties with Adam Argyle

Get to know Adam Argyle and the amazing things you can do with CSS custom properties.

In this insightful conversation with Kent, Chrome team's CSS and UI expert Adam Argyle delves into the transformative power of CSS custom properties in web development. Likening them to a basil leaf that elevates a meal, Adam teases his upcoming talk at Epic WebConf, promising to elaborate further on the subject. He spotlights current innovations in Chrome and CSS that include color variants, automated designer interactions, and dynamic features such as view transitions and scroll-driven animations. These developments not only enrich web design but also advocate for progressive enhancement to ensure a captivating and interactive user experience. Adam's expertise offers a valuable resource for staying abreast of the evolving landscape of CSS and web design.

Watch this episode.

Meet Adam at Epic Web Conf.

Guests

Adam Argyle
Adam Argyle

Transcript

Kent: Hey, what is up Adam? I am super excited that you're coming to Epic WebConf. I'd love for the attendees to get to know you a little bit. So why don't you introduce yourself to us?

Adam: I can't do that. My name is Adam Argyle. I work at Chrome. I'm in the DevRel team and I focus on CSS and UI, making sure that you all have the elements that you need, the styles that you need to get and make beautiful interfaces for your users. We want things to be seamless. We want things to be smooth. We want things to be easy for you. We want you to feel like the platform gives you the stuff that you need to be effective and feel good about what you do. I'm really happy to do that. I'm also on the CSS working group. I'm a skateboarder, punk nerd. You know, I'm just like artsy as I'll get out, love crafting and just love the web. So I'm super happy to be speaking at Epic Web.

Kent: Oh dude, that's awesome. I love all of those things that you said. You didn't mention the one wheel, but that's a part of the skater stuff too, I guess. Ha ha ha.

Adam: Definitely, that thing has been so amazing since COVID. So many miles logged, so many trails shredded, a couple of biffs, and it's all good. I love it. Ha ha.

Kent: Yeah, fantastic. Yeah, also super grateful to you and everything that you're doing with the Chrome team, getting the web platform up to snuff, especially around the elements that we need and CSS stuff as well. I know that there's been a lot of excitement about the stuff coming to the web platform and stuff. And your coworker, your manager, Una, is going to be talking about that a little bit as well. Why don't you give us a quick idea, rundown of what you have planned for your talk at Epic Webcom.

Adam: Yes, the web of web. Well,

Kent: Yeah.

Adam: I don't know. It just could be very easily turned into just a bunch of wall walls. Okay, so I'm going to be talking about custom properties, which might not be too surprising to a lot of people. It's a five minute lightning talk, and I'm going to show you the power of what these custom properties can contain and how to type them. And then just show you based on these couple of features that they have, which are pretty loose features, a bunch of amazing things that they can pack in a little bit of a punch. So it's going to be like, a little grain of spice that you're like, oh, surely that basil leaf won't change this dish. And oh yeah, that basil leaf is definitely gonna dominate. And so yeah, it should be enlightening and quick. Ooh, enlightening. I don't know.

Kent: Uh, uh. Oh. Ha ha ha. And we'll all be hoping that we're the one with the basil leaf in our bowl of soup. Ha

Adam: Hehehehe

Kent: ha ha. I got it. I got the basil leaf. I know my kids are excited when they are the ones that get the basil leaf. But I think that is awesome and exciting. Custom properties have been around for a couple of years and I think that people still are just figuring out what we can do with those. So. I think that giving people some exposure to what you've been able to do with custom properties will be pretty awesome. So also, Adam, we do got a second more. What are some of the things that you're most excited about with stuff that you've been working on recently in Chrome and CSS?

Adam: I gotta love, I'll just shout out, there's a few things to shout out. Color has been awesome. The relative color syntax is like this dreamy moment where you've always wanted to create a variant of a color. You're like, I just need a transparent version. I just

Kent: Yes.

Adam: need a slightly altered color for a hover effect. I didn't get it from the designer and that gets

Kent: Yeah.

Adam: supplied for you, really cool. View transitions, I just see them now. I'll see an interaction that like a designer makes and I'm like, oh, it's a view transition. I could totally automate that. And I love the view transitions. You're just like, here's state one, here's state two. They can be completely different doms. And the browser's like, oh, I'll find the shared elements and just morph them beautifully between. And it's so cool. And then the last one is scroll-driven animations. I'm just seeing those everywhere now too. Just had an article go out on it. They're all over my website. Just some cool interaction animation and color features have hit the browsers. It's just so cool.

Kent: That is awesome, I love it all. I guess you'd say those are safe things for people to come and talk with you about at the conference.

Adam: Absolutely, and they're also really neat features because you can progressively enhance into the scroll-driven animations and view transitions. And so it's not like you either have it or you don't. There's like a have your cake and eat it too scenario, and I'm super happy to walk you all through it. Yeah, come say hi.

Kent: Yeah, awesome, awesome. Adam is a very nice person. I think actually, if I, I'm trying to remember, I don't think we've actually met in person before. This'll

Adam: We have

Kent: probably

Adam: not. You

Kent: be the

Adam: met

Kent: first

Adam: my

Kent: time for

Adam: younger

Kent: us.

Adam: brother. Yeah.

Kent: Yeah, that's right. So I'm really looking forward to meeting you in person and I do hope that you bring your one wheel. I'll bring all of mine and we can go for a ride. That'll be sweet.

Adam: Do you fly with yours? Do I just take my GT apart and fly with it? Or what,

Kent: Yeah,

Adam: yeah, what's

Kent: so

Adam: the flow?

Kent: I have a flying one wheel. It's the pint. So that one is allowed in the cabin. I put it in my bag. It's like basically everything I've got. And then I've got clothes around and stuff. But

Adam: Yeah.

Kent: yeah, so I check that or I carry on with that. I have heard people have success just disconnecting the battery from the motor. and then

Adam: Yeah.

Kent: you can check that, I guess. Probably look that up first, because that would be pretty awful if the TSA was like, nope, sorry.

Adam: Yeah,

Kent: But.

Adam: I modified my pint, so I've made it unflammable. I put a double sized Chinese battery in it and

Kent: Oh.

Adam: now I can't, I'm worried that if they open it up, they're gonna be like, hey, this says it has this much juice in it. I'm like, it does. And they're like, well,

Kent: Yeah.

Adam: that's above the juice limit. And I'm like, well, I know.

Kent: Oh, that's too bad. Oh, well, that's okay. I'll bring an extra for you to ride and we're gonna have a really good time up in Park City.

Adam: Sweet, I'm excited. There's also that site friend with a, maybe I'll go there and see if I can rent

Kent: Oh

Adam: one

Kent: yeah,

Adam: for 40

Kent: yeah.

Adam: bucks or whatever, yeah.

Kent: Totally, totally. Well, dude, thank you so much for chatting with me real quick and giving the opportunity for people to get to know you a little bit. And yeah, we'll look forward to seeing you in Park City on April 11th at Epic Web Dev.

Adam: be there.

Sweet episode right?

You will love this one too.

See all episodes

Featured episode

Tailwind CSS in Modern Web Development with Simon Vrachliotis

Season 5 Episode 23 — 12:26
Simon Vrachliotis