What’s new in HTML and CSS in 2023?

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone, and welcome to another episode of Learn With Jason. Today on the show, we've got Una Kravets. Thank you so much for being here. How are you today?

UNA: I'm great. Thank you for having me. Well, I'm a little sick, but I'm here for you, Jason.

JASON: Very, very much appreciated. I'm so excited to have you on the show. I have been trying to come up with a good excuse to invite you forever. I think I finally have one. Before we talk about what that is, let's talk a little bit about you. For folks who are unfamiliar with you and your work, can you give us a bit of a background?

UNA: Yeah, so I work on the Google Chrome team. I lead the UI and DevRel team. Basically, we get to be the connectors between the developer ecosystem of web developers that build interfaces on the web platform and the Chrome team and the engineers that are implementing APIs on the platform. So it's a really cool job. I love to hear about the problems that people struggle with in terms of web development to try to hopefully solve for them and make the web platform a better place.

JASON: That's amazing. So you work on -- like, Google is such a big team. So there's a lot of names people recognize. Somebody in the chat is talking about Addy. Is Addy in a different area?

UNA: Currently a little bit of a different area where he's focusing on a lot of framework work and how to help the ecosystem with third party. We work on more web platform core APIs. So it's sort of the same umbrella but a little bit of a different angle.

JASON: Yeah, it's one of those things. Google does so many different things and so many amazing people work there. So the core APIs are fascinating to me because if you would have asked me ten years ago what can you do on the browser, I think my response would have been something to the effect of a little bit, right? Because it's always been powerful, but it's never been enough when you looked at it in the 2012, 2014 lens. I think that's one of the big reasons we saw this rise of jQuery where they were polyfilling things that we felt we couldn't do with the browser. But that's not true anymore. And this is why I was so excited to invite you on to the show. Because in today, in 2023, the browser is actually really capable. And we've seen a little bit of that on the show. We recently talked about Vue transitions. We had Adam Argyle and talked about CSS open props and CSS variables. But there's so much to it. You're right at the heart of this, and that's why I was so excited to invite you on to talk about this. So let me start with kind of a background question. What changed or what has kind of fundamentally driven this huge investment into core APIs in the browsers, and why are they so good now versus ten years ago?

UNA: I think it's a couple things. I think a big piece of this is there was an eight-year-long rewrite of -- at least in Chrome. That was happening while you were using Chrome. So it was actively kind of being worked on under the hood. That took a lot of developer resources, engineering resources from the Chromium team to restructure. But it's allowed for a lot of these new APIs like containment and container queries to be built a lot more easily into the browser's rendering engine. So that's one piece of it. During that time, a big investment from Chrome was we're going to allow for these low-level APIs for developers to hook into and build on top of to create sort of CSS libraries. But we found that developers prefer higher-level APIs that are more direct, can use in CSS, get results from a little more succinctly or declaratively. So I think it's a mix of engineering resource, an increase of awareness of developer needs around the UI community. And that's sort of been happening across browsers. The fact we have a team at Chrome that's looking out for front-end developers and specifically for building interfaces is a huge shift from what Chrome had been previously focusing on. And Apple has hired Jen Simmons, so there's more support in that space. And a lot of growth in the web standards community and sort of now we have this really great blend of engineering resources, the developer voice in the space being heard, and we're seeing the positive outcomes of landing some of these APIs that are enabling a new future for web UI, which is so exciting.

JASON: Yeah. We're seeing stuff that I would have never expected. Like, we saw -- and I don't know which ones you're planning on talking about. So I'm just going to run my mouth. Then you can direct after this. But I've seen things like there's now a native pop-up in HTML. I never expected to see that in the browser. We're seeing things like -- I used to use SaSS because of things like CSS and nesting. When I was talking to you a week or two ago, you were like, oh, yeah, nesting works in CSS now. What? What? So it feels like these things that we used to turn to frameworks and libraries for are starting to show up in a way that -- like, I've recently been building some sites and just kind of challenged myself. Well, before I reach for a framework, let's see if there's a browser API for that. And it's surprising to me how often the answer is yes. So I guess maybe what we can start with is just sort of some highlights. In your eyes, what do you find to be the most exciting new additions to the browser over the last few years?

UNA: So there's a couple categories of things. Because there is so much, honestly. For the past few years, there's been a sort of -- I call it this golden era for web UI. Somebody else said that on Twitter and I loved it so I've been using it. I guess we can start with responsive design. In the responsive UI space, I know you're going to have Miriam on here to talk about container queries, but that is a huge shift in how we think about building responsive UIs. Now instead of just having the view port and global page information to create styles, we can have truly component-based architectures that align with how we build frameworks and align our styles to that. So we can now have these, you know, cards and side bars and footers and headers and write all the logical styles inside of them because we can look at their containers, styling information, including size, including styles. In the future, we're working on state queries right now, so states they are in. Work in progress but getting work done. So that's a big one. There's also new selectors in that responsive space like the has selector, which I've been using a lot lately. You can check to see if a parent has a child, has a child in a specific state. You can check to -- you can apply styles to the parent or any of its children based on that sub-tree look down. It's essentially a parent selector, but it's a lot more than that. So that's a really exciting one, I think.

JASON: And I remember, that's something I have Googled many, many times. How do you style a parent selector. Like, I've put this inside of a div. How do I make sure that div does something? The answer for a long time was you can't. You had to add an extra class or something. That meant reaching for your band-end framework or front-end framework. Now CSS just does it. It's beautiful.

UNA: Going up the tree. But yeah, there are some limitations. You have to apply containment. For example, with container queries, getting that block size, if you have auto content sizing, that element isn't going to work. So there are things to look out for in that space. But with has, that works really well, to look for anything, especially for states. I use it a lot for that. You mentioned popover earlier. So you could check if a parent has a popover that's open. I've been playing with -- we're currently prototyping select list in the browser. So that's a styleable select menu. That's something I've been using to style the button inside of the select list based on if the select list is open with the popover that's open. But there's a lot to talk about. I feel like I need to focus this a little bit.

JASON: No, no. I mean, I think this is the moment to kind of spread out because there's just so much. We're talking about the styleable select list. I feel like if we look back over the history of CSS and HTML, that's got to be a top five request from, like, all the way back. That has been a consistent pain point for just about every web developer. Every single one of us, whenever we build a site, we are 100% going to be putting some sort of form in it. I've maybe built, in my entire career, less than five websites that didn't have some form of inputs on them. And a lot of those get complex enough that you need a multi-select list or something like that. So then you're like, okay, but I want to make it look like the style system. Then you can't, so you're building a custom one. Now you're into all this. You have accessibility problems. You have keyboard problems. It's like, oh, my god, okay. Maybe we just make it look native. (Laughter)

UNA: Exactly.

JASON: So the idea of being able to style these in a way that doesn't break accessibility, that doesn't break keyboard navigation and all the things I expect a form to do, oh, what a dream. Right?

UNA: It's not even styling. It's also, like, if you wanted to put a flag next to a country name to help visually improve the recognition of the item that the user is looking for. That, you can't do right now. Without completely rebuilding.

JASON: Right. Yeah. And as someone who has build a few custom select lists and still has the trauma to show for it, I'm very, very happy that someone else is doing that for me now. (Laughter)

UNA: Yeah, I feel you. And more components will come after. But it's hard to add HTML components. It's been a long process.

JASON: Well, yeah. And I think this is something that I've always found really interesting. This sort of push and pull between what we know we want and what we're 100% sure we'll use forever. That seems to be sort of the -- I think when it's done well, it's a very healthy symbiosis between Java frameworks and the browser. In JavaScript, we can build whatever we want, and it can break. It can be backwards and compatible. We can sort of iterate until we get to something we love. But the browser doesn't break. Things that we built -- I mean, we've broken two or three things ever in the browser. We took the blink tag out. Like, otherwise everything else just still works. So implementation has been wild. So if we go and implement, oh, what does React do today, well, it doesn't do anything like what it did ten years ago. So would that be healthy for the browser. I think the answer is no. So we've got to wait and see which things really, really stick around. And then they become browser primitives. I think jQuery is a great example. Query selector was an implementation of the general selector element because we just knew. We need that forever. That's such a good idea. Everybody is using it. That one doesn't go out of style. But you know, there are a lot of other things we love that maybe we don't use today. It would have been pretty wild to implement something that was in backbone that we're not using anymore. Nobody even remembers what it was. But now it's in the browser forever. (Laughter)

UNA: A few years ago, there was a form controls refresh that's relatively recent. It was a partnership across Microsoft and Google for Edge and Chrome. You couldn't misplace a single pixel in that redesign of the form controls of the native browser because then it would shift and cause visual diff issues across sites. So it's really hard to make changes once you've added something to the browser. And even that one, that's browser specific. Like, you couldn't change a single pixel. Yeah.

JASON: Oh, my goodness. Yeah, that is -- that's a lot. Okay. So we talked about style and container queries. We talked about the has selector. We've talked about a couple future APIs coming in. What about some of the stuff that is in HTML -- I mean, how far do we want to go back, too? One of the things I discovered over the last couple years was the template tag and how good that is for sort of eliminating your need for a bunch of custom JavaScript. Boy, I don't know. Now that I'm thinking about it, there's so much good stuff that's come out.

UNA: Template tag, that's like early, early.

JASON: It is early, early. But it was like a quiet victory for the platform. And that's actually something that I think is really interesting. We will see like a post from you, a post from Adam Argyle, a post from, you know, somebody who's really, really in tune with CSS, like Jay Tompkins does all the future CSS stuff. We see lots and lots of those types of, like, here's an example of something. But there's so much under the surface, like these quiet wins. You Google and you're like, when did this get added to the browser?

UNA: Yeah, I think it's easy to talk about new things because we're trying to tell people about them, inform them, especially as things are landing. Now we're trying to do a better job of highlighting inter-app launches, so when things become stable across all browsers. So highlighting when it lands in one browser, then across all browsers. Now there's a program called Baseline, focusing on a wider browser support and what is sort of safe to use based on research browser support. So that's definitely also a concern when we talk about these new features, like getting people excited about them. But also, many of them are still in prototype iteration phases. That's always an asterisk too.

JASON: Yeah, that's a good point. And the other thing --

UNA: And new transitions. It's an awesome API. It's not supported yet across all browsers. There's interest, so there's movement forward. But I'm excited for that to land across browsers.

JASON: I thought view transitions did hit cross browser. I guess it hit Firefox. It's not in Safari yet?

UNA: Not yet.

JASON: I can't wait. I'm so thrilled about all these things. And another one that came out that was like a quiet win was I didn't know about the form data API for a long time. I had done all these JavaScript gymnastics to grab the event out of the on submit event. Then I would do all this stuff to it to get the form values out. And I was doing this on stream one day. Then Suzanne came on. She was like, did you know you could do all of this with the form data API. So I immediately go and look it up and got to delete like 200 lines of code. (Laughter) I was just like, oh, where has this been all my life? Like, what a magical API. So, okay. I'm kind of waxing nostalgic about things that have been out for a while now. But for folks who haven't heard of that, if you haven't heard of that form data API, get on it. It's good, good. What else are you feeling like particularly excited about in this space?

UNA: To that idea or that point of being able to reduce a lot of code that we currently have to write custom or use a library for, there's the anchor positioning API that's getting worked on. You talk about popover, that's the first step, being able to create pop-ups and move things around the top layer. The second one is then hooking those into an anchor. So if you had a tool tip or a menu or anything you'd want to connect it to. Then that lets you set fallback positions also. As you resize the page, tell the browser where to reposition your popover so you can have it sort of try different positions, which is great because we get to eliminate a lot of JavaScript you have to do to resize observe, to element observe, to have all the keyboard hooks to escape your popover. All that's done now in natively with these browser APIs. So that's a cool one. There's also scroll-driven animations that you can now play with in the browser that let you create animations based on a scroller and not just a timeline. So it's a scroll timeline. Not a clock timeline. So that's another cool one.

JASON: As you scroll up and down, it scrubs back and forth on the animation?

UNA: Yes, exactly. And you can tell it when to start the range, when to stop it.

JASON: See, and that stuff is so cool. That's like before, you would have had to reach for GSAP. And I love GreenSock, but if I have one little animation, I always feel guilty bringing in the entirety of GreenSock for that one little thing. I'm like, that's another 40 kilobytes. So when I have these small use cases. I felt the same way with CSS animations. They just continue to get more powerful. Every time I'm like, oh, I want to do this animation. I don't want to bring in a big heavy animation library. But wait, I can do it with CSS. It's this surge of like, yes, I'm the best developer alive! (Laughter) I think that a lot of that is -- I think that's why I get so excited about this stuff. Every time the browser gives me a new tool, I have this new opportunity to do something I thought was hard before. Then I do it and it's fun and easy and I'm like, yes! (Laughter)

UNA: And I think a lot of these new APIs help you to separate your styling from your logic a lot more. Previously, they required JavaScript to do a lot of these things that are just style changes that aren't based on data. They're not based on logic of your application. So making these more declarative and accessible in your CSS just makes a lot of sense and helps you separate the application logic, which can stay in JavaScript. I'm not anti-JavaScript. I'm all for JavaScript where it makes sense. But in the past, you had to do a lot of JavaScript for styling, and that kind of broke that mental model of separation of style and logic a lot of the time.

JASON: Got it. Yeah, yeah, yeah. 100%. Okay. So I could just sit here and talk about things that I love in the browser all day, but I think it would be more fun to play with these. I'm going to switch us over into our pair programming mode, which will take me just a second as I move some windows around.

UNA: Cool. What do you want to start with? There's typography stuff too. There's text wrap stuff. Oh, also, are you in Canary? A lot of the stuff I'm talking about might be experimental.

JASON: Let me get it open. So here's Canary. I'm going to start with, first and foremost, this episode, like every episode is being live captioned. That was not the window I wanted to end up on. So that live captioning is being done by White Coat Captioning. We have Rachel on the call with us today. Thank you very much, Rachel, for being here. And hush, you. That is being made possible through our sponsors. We have Netlify and Vets Who Code, both kicking in to make this show more accessible to more people, which I very much appreciate. We're talking to Una, whose link is not -- oh, it's up here. There it is. You can find Una on Twitter. Where else? Where else should people be looking for --

UNA: You can go to my website. It's una.im. I have a blog post I write there.

JASON: Fantastically short.

UNA: That's me.

JASON: Whoa, whoa, whoa. What is happening? It's like copying the wrong things. Oh, I know why. I'm in Chrome and using shortcuts for a different browser. Okay. Here we go.

UNA: Nice.

JASON: There it is. That's the thing. Okay. Great. So I'm in Canary. I've done the housekeeping. We've talked about the sponsors. Now I want to play with some new browser APIs. What should I do first? You want to do these in CodePen, or should I open VSCode to get a little working site? What do you think?

UNA: CodePen might be easy because you can just type up some HTML. Or you can play around with my website, your website.

JASON: I'm just going to get logged in here. Do I not have -- oh. All right. So I've got a brand new pen. You were talking about typography stuff. Let's go with --

UNA: Yeah, let's make a paragraph or two. Or a heading. So you have a heading and a card. Give it a size and a responsive width, so if you resize, you can see it changing.

JASON: So you wanted to make it like a card.

UNA: Yeah, it's easy to show these with cards. Oh, it's hard to see the screen. I'll try to --

JASON: Oh, sorry. Let me make it a little bit bigger. I'll collapse down the JavaScript, make this a little bigger, give it one more. All right. So we've got a card. I'm just going to make the assumption we'll probably end up doing more than one of these. We'll close that up.

UNA: You can do like a sub-header or a description paragraph.

JASON: Okay. For that, we can do -- I've already got this open. Why don't we do this? We'll just play with the card of this thing.

UNA: You know what, you can even play with it on dev tools on that page to make it faster, if you want to see it live.

JASON: Oh, yeah. Okay. All right. Let's do it. So I will pull this over here. Now we're ready for some chaos.

UNA: So I actually think this might be more clear if we go to the homepage because you have a bunch of cards there. Right?

JASON: Okay. So I've got these ones, and I've also got this listing here, depending on which one you want.

UNA: So let's start with the list of cards. I see they have a description there, the paragraph. So on that description, here's where you can start to see text wrap. If you do text wrap as a property, if you add that to the description.

JASON: Okay.

UNA: You now have the option to do text wrap balance and text wrap pretty, which are two different algorithms that visually balance the text so you don't have sort of these standalone blocks. So, say a word. Text dash wrap. Do you see it?

JASON: So this is text wrap pretty.

UNA: So text wrap balance tries to do more of a -- it looks at the entire heading and tries to balance that to be at 50%. So it's sort of like a block of text. And text wrap pretty will look at the last few lines to make sure there's no sort of standalone characters. So it just kind of gives a better overall presentation of your typography.

JASON: Yeah, so this is with balance on. You can see that all of these are roughly the same width as the rest. Okay. So this is a single letter.

UNA: It's called a widow.

JASON: So if I make this into pretty, it forces one word down so we don't have a widow. If I make it balance, it shortens up the lines to visually align them. That's cool. That's very cool.

UNA: This is one of those other things that used to require JavaScript to be able to apply these styles. Now the browser can do it for you. It's a lot more performant to do that. And it's one of those nice progressive enhancements, where even if this isn't supported across browsers yet, it's a little addition and a little typography improvement for your users that have a browser that does support this feature.

JASON: Yeah, and it's great because, you know, what I've done in the past is completely ignore it. I'm not going to use JavaScript to parse every word on the page. That seems very -- it's just not worth it to me. But this is very -- this is great because this can just go in my reset.

UNA: Right. Yeah. So I feel like this one is really handy. I like text wrap pretty a little bit more because it just does the small thing that I want it to do, which is not have those standalone words. It only looks at the end of the list. And this is the best version.

JASON: Sorry, I was going to say it is a little disconcerting that when you put pretty in, it'll shorten these lines up so much -- or when you put balance in, I should say. Then you get this kind of raggedy thing here, which I can see a lot of reasons why I would want that. This is nice because it keeps my right side a little more even.

UNA: Yeah, I think that balance is a little better for headings, like headlines that are maybe two lines of text to three lines of text. Pretty is better for some longer text that you want to still balance out.

JASON: Got it. So we can do it like this. Is that right? Oh, I think it needs to be this. Text wrap pretty. So if we set headings to pretty, then we get that extra wrap that avoids, you know, something completely out of whack with a single word. Yeah, that's a little -- that is such a nice little subtle but great improvement to the look of things.

UNA: Yes, this is why I think it's a nice progressive enhancement. It's like those small things that you can do. And it's a way to have responsive typography without having to do much work. So that's pretty neat, I think.

JASON: Absolutely. There's a question about how this works behind the scenes. I don't know if you want to get into the -- we can skip over that if browser internals are not fun to talk about. But in case it is fun to talk about, there is a question.

UNA: There is an algorithm. The algorithm is actually not technically speced. So it's sort of browser dependent. I think it's loosely based off of -- I don't know if it's based off the text algorithm, but there's an algorithm the engineers use, and it makes -- it looks at the entire set for balance. Then for pretty, it looks at the last few lines. So that's why balance is maybe better for headings. And there used to be a limitation of four lines for balance, where if it was more than four lines, it was ignored. But that's been extended. For text wrap balance, I forget what the limitation is now. But for pretty, there isn't one because it only looks at the last few lines of text.

JASON: Got it. Okay. And I just realized I meant to use balance on the headings and crossed them up in my brain. But yeah, this looks great.

UNA: Yeah, I think it's a nice little typography addition.

JASON: Well, cool. Okay. So a one-liner typography freebie. That's always a nice level up. Anything else you want to show that this is a good page to dig into?

UNA: I'm wondering if we can show has here. Do you have any cards that have certain characteristics that others don't have?

JASON: No, but we could fake it.

UNA: I'm just thinking if you have maybe the schedule or something where some people have a Twitter and other people don't. You could just style things differently based on -- you could even style based on the number of children. That's a cool one to do.

JASON: Um, let's see. Do I have anything like that? So, what I have is some of my blog posts don't have images. So we could play with that. We can check if it contains an image or something.

UNA: Yeah, that could be a good one. So, okay. I see your blog site now. So one thing you can do is you can check to see if the blog has an image. You could even do blog not has image. Then maybe make the text bigger. Or maybe have it stand out in different ways. You could even have some background images you could send to populate in CSS if you want.

JASON: Okay. So --

UNA: But one thing you can do is a simple make the text bigger.

JASON: Okay. So let's try this. We're going to do a not has image.

UNA: Yep.

JASON: Then we can set that to be -- let's just make sure I'm writing -- immediately, this is incredible.

UNA: Instant feedback.

JASON: How, how would I have done this in the past? And the answer is I honestly don't know. I would have had some hack that checked as I'm building the page to see if there's an image set. If not, I've got to add an extra class. Like, just being able to -- and none of that stuff matters to the information on the page. The thing that I love about this is like you said earlier, this lets my styles be styles. Because the fact this doesn't have an image is only stylistically important to me. Because I don't like this is sitting wide like this. I would prefer for it to look different. Not enough to go and make an image for it obviously, but enough I would like to clean this up so it doesn't have this super long line length that's kind of hard to read. So now that we've got that, we can do something like you had said make the text bigger. Go ahead.

UNA: So you would have to add that to the selector. So I'm assuming those are H2s.

JASON: I think they are. Let me double check.

UNA: Or titles.

JASON: Yes, they are H2s. Okay.

UNA: So then you could add the font size to that H2. You might have to write a new selector. Oh, see, you're using has.

JASON: Apparently I am. Good. Look at me go.

UNA: If you're setting up your grid where you have an image and some meta content and a grid item that doesn't have an image, it's still going to try to fit it into the first grid column. So this is really effective for making exactly what you have here, which is having it span the entire two grid columns instead of one.

JASON: Right, yeah. Okay. Yeah, yeah, yeah. Now that I'm looking at this -- because I was having this weird issue where this would get smashed over here. So has let me just -- I was like, you know what, just ignore it if it doesn't have an image. Then it just kind of does its auto flow thing, but these get structured. Okay. Yeah, yeah. So I did use this. (Laughter)

UNA: Yeah, there you go.

JASON: So if I set this and I put the H2 and we do a font size -- I don't know -- we'll say 2rem. It blows out this one, but it kind of looks nice on these. So I'll go in and do the not has image. And there we go. This is really, like -- this is pleasant to work with.

UNA: It's so nice, right? It's one of my favorite APIs because it's very straightforward. You can read it very clearly, I think. So another cool thing I like to do with has is quantity queries, where you can check for the presence of a certain number of children. So say you had a guest that had, like, five links to their Twitter, their Mastodon, their Blue Sky, their website, but another one just had two. You could style it differently or have it wrapped on another line. You could do whatever you want. But quantity queries are another cool thing you can do with has by checking if a parent has an Nth child value. Like N plus a certain value. Then you could style it that way.

JASON: Oh. Okay. So we can test that here. So if it's gotten a image, it has two children. There's the image wrapper and the display details wrapper. And this one only has one child. So we can set one up that says -- sort of one of these. My delete key just popped off my keyboard. Okay. We'll say has -- or would it be -- yeah, has. Then Nth child.

UNA: And it would be N plus two. If it's two or more items. Or children. Then whatever you want to style in there. Maybe it's N plus one. Well, do you have two or more?

JASON: So this one here has the text. Do I need to do like a direct selector? Does it need to be --

UNA: Let's try that. But I don't think so.

JASON: I'm doing something wrong. Let's go back to two.

UNA: Yeah, the direct selector helped. It was looking for all the children.

JASON: Cool.

UNA: So another way to kind of get -- this is a great selection tool.

JASON: Yeah.

UNA: So those children could be anything. It could be links. You might want to have -- if you have a bunch of links, have it go into two columns versus one column on a page. I use this for a credits example. If you had a bunch of credits at the end of an article, it would be in line to sort of show them next to each other.

JASON: Oh. That's a -- yeah. Okay. I've never really considered this style of selector before, but now that I know that's there, I'm kind of playing back over a lot of situations where that would be super useful. One of the things I've noticed is a lot of times people will design the empty state and the complete state, but they don't design the starting state. You've got a new blog, but you only have one post on it so far. So you end up with this one blog post kind of stuck up in the top left. So for that one, we probably got to go over here. Let's do another div class card. We can say the card gets a display clock and background of dark gray. Give it a little padding.

UNA: Maybe some space.

JASON: Yeah, like -- I guess we can wrap the whole thing.

UNA: You can give it a margin bottom to spread them. Or margin top.

JASON: That would make sense.

UNA: Or that, yeah.

JASON: Oh, no. I've committed. This is the danger of me doing anything. I get so excited on stream about CSS that I just start doing. We'll get hours in, and everybody was like, are you going to do the thing you set out to do? I'm like, yes. (Laughter) We'll set up a gap of like one. And for this, we can set a max width of, like, 300 pixels. Okay. How about that? Then we've got our empty one here. So you're saying I can do -- is it empty the same way I would do has?

UNA: It's colon empty.

JASON: Oh, cool. Then you can just dump it. Like, get out of here if you don't have any data. Get off my lawn.

UNA: Exactly.

JASON: Well, and this is super helpful because if I'm working in something like WordPress, I might get a plugin that spits out empty paragraph tags, or if I'm using MarkDown, there might be too many empty spaces. Let's just hide that stuff. Then they have a workaround. They think put a non-breaking space. Otherwise, it just goes away. I love that. What a useful little tool.

UNA: And it's even if you had, say, like an inbox and you might have a parent This would be a container for inbox items. That inbox is empty. You could, in theory, style it differently if it's empty. Or if you're starting an account and you don't have any items. Things. I don't know, servers. Your cart is empty when you're shopping. You could feasibly use this to style.

JASON: And that suits well with stuff that -- like when you have Gmail, for example. When you finally archive that last message in your inbox and it goes to a nice photo or a little icon. I don't remember what Gmail does anymore. I use Superhuman. When you put that last message in and your inbox goes empty, it pulls up this beautiful photo. So you could just have that. Your empty state is whatever the photo of the day it as a background image, and it fills the whole page. There's just these nice little things you can do that this makes very easy.

UNA: Yeah, yeah. That's hopefully the idea, making things a little easier.

JASON: Actually, we could implement that really fast. That would be fun. Let's do that. So I'm going to take this oat. We've got this empty card. Instead, what we're going to do is let's go to Unsplash. We will grab -- what's your favorite type of inspiring photo? Do you like landscapes? Do you like cityscapes?

UNA: Let's do a beautiful landscape. Maybe a cliffside, maybe a sunset vibe, you know. Okay. I can work with this.

JASON: I'm into that. Let's take the image address and come back over here. We'll say we want the background image to be this one. Okay. Then we'll do background size. Actually, why don't we do -- there's one I remember. The cover.

UNA: Background size cover.

JASON: Background size cover. I love this. This one makes me so happy because it goes full width instead of squishing or leaving unoccupied space. This is so good. It's so good.

UNA: It centers it. I use this one a lot.

JASON: But look at this, y'all.

UNA: And for images, you could do object fit cover.

JASON: Mm-hmm. Oh, that one is so good. Yeah. Have y'all seen that one before? Are you aware of object fit? Should we do a little -- maybe we do a little object fit thing. Because I love this so much.

UNA: Now we're going to add images to our cards.

JASON: Yes. Let's do images to the cards. And I will drop them up at the top.

UNA: Look at our beautiful cards.

JASON: So now we've got this nice looking -- let's take our -- there we go. So now we've got this kind of grid of nice-looking cards. We want to add an image up at the top. So let's go over here and grab two different sizes of images, I think. So we can grab this one.

UNA: That's a cool one.

JASON: And we'll put that up at the top here.

UNA: Do you want to do like a vertical one next?

JASON: Yeah, I think so. Then let's grab a vertical one, which I think I can just filter for these.

UNA: Oh, that's cool.

JASON: Yeah.

UNA: I'm a sunset girl. I'm big on sunsets.

JASON: So now we've got these two images absolutely destroying our layout. There's a handful of things we could do. What I would typically do is I would do like a card image, and I would say width 100%, and that would give me that sort of thing. As we can see here, this is blowing out in a weird way. So I don't love that. So what I want instead is I want these to be probably like, I don't know, maybe I want to set the height to 90 pixels. So I like the way that lays out, but this looks terrible. They're squishy. So you said object fit will fix that?

UNA: Object fit cover will fix this. Or you could do contain if you want it to be contained within it. But then you'll see it with the vertical one. Yeah, so it contains it. What might be better is maybe something like aspect ratio, too, so you could have some aspect ratio you're preserving but keep it responsive. If you're doing any kind of responsive layout, it'll grow and shrink. So you could have the aspect ratio be 4:3 or 3:2. This is also good for reducing layout shift. It'll save the space of that image, if it has a set width. Then you can use the object fit however you want within there.

JASON: Yeah, and we can see here there's no image set, but it's reserved the space so it wouldn't do that pop thing, which is good. Now when you run the Lighthouse tools, they ding you for that.

UNA: Yeah. It's one of those things that's actually really annoying as a user of the web. If I'm reading something and the images load later, which happens, especially if they're bigger image, then you have layout shift and lose your place.

JASON: Okay. So this looks really good. Then we can take -- maybe we can take the image out of some of these cards just to see what happens.

UNA: Like that one that doesn't have an image.

JASON: So that one doesn't have an image. Then we can grab one more of these while we're in here. It's a nice little misty morning.

UNA: Misty cliff. I like it.

JASON: And there we go. Now we've got this nice-looking layout, and we were able to do so much of that with, like, this empty state here. And look, this is why cover is so cool. This is the same card, like the same empty state, but it's in two different sizes because this one here doesn't have an image. This one does have an image, so these are different heights. And it still looks good. It still brings in that image in a way that's visually satisfying. Love this. Like, I love this feature so much.

UNA: Yeah, it's a needed feature of the web platform for sizing media.

JASON: Yeah, that's so good. And now that we've got the aspect ratio, if I go and mess around with this and say it can be 400 pixels, it doesn't break our images.

UNA: You can see one of my favorite techniques for responsive grid. It's called the ram technique. Have you heard of that?

JASON: No.

UNA: It's basically -- what you do is you set up a grid, and then you do repeat and have the size you want it to be as the minimum size. So you do repeat and auto fit. Then you would have min/max, that size. So grid template columns repeat. Then auto fit.

JASON: Oh, auto fit.

UNA: Auto dash fit. Then comma. Then min max. Then inside of this, you'd have your baseline size. Say it's 200 pixels. Then comma 1fr, so it can stretch to fill the space. So now -- it should respect the gap too.

JASON: I've done something wrong.

UNA: Let's see what this looks like when it's maybe smaller. So I don't know what's going on with the gap here. We can maybe debug that. But within the card, these cards are now shifting size based on their minimum and maximum value.

JASON: I have a theory. I think I did the --

UNA: Oh, it's box sizing. Well, that too.

JASON: Huh, what did I do? That's strange. This is always my favorite problem. I always do something weird like this. Oh, I was forcing the width out here. That's why.

UNA: Oh, okay. It was broken. So now if you resize the view port, you can see that your cards are sort of using that baseline of 200 pixels, and they're flowing on to the next line when they get smaller than that. So if you wanted it bigger, like 300 pixels, you could do that. And the aspect ratio is getting retained, so the cover is continuing to sort of shrink in there, while you're still seeing it centered because the object position of this is centered in that space. For both foreground image and the background image you're using for your empty state. So I use this one all the time.

JASON: These are the sorts of things that I just remember the pain that it used to take if you wanted to do a layout like this that was responsive, that could do these min/max containers. There's no media query in this. Like, I used to have -- let's psi. I would have break points. There was a phone break point. There was a landscape phone break point. There was your iPad. Your landscape iPad. Your small computer. Your giant computer. So you'd end up with like 12 break points throughout the CSS to make something work. Then there was still always somebody who would send you a screenshot of their 16,000-pixel-wide monitor and be like, your site kind of looks weird. Well, of course it does. You're on a wide screen. What did you think was going to happen? But the fact this will just work, no matter what size, no matter what browser, any browser that supports these, I suppose, which is all of them at this point, right?

UNA: Yeah, all of them will support this for the grid template.

JASON: As long as yourself not one of the poor unfortunate souls.

UNA: All of this combined is really the future responsive design. We couldn't do this before. Now we can separate this parent layout. So this macro layout for all these cards from the micro layout, where we can look at does this card have an image. What is the actual size of this card? We can add container queries here. I know you'll do that in a future episode, so we'll hold off. But it's a whole new paradigm for responsive web design. It's really, really cool.

JASON: Yeah. I mean, it's so good. And we can do stuff, too, like in here. If we do a card not as image, then we could do -- like we could set up the content of this to be displayed block and have a width of, you know, 100% and an aspect ratio of 16x9. Then we can make it background color, I don't know, yellow. So now you've got this sort of placeholder. So we'd also have to do a not empty here. Look. Look at what we're able to do with these. It just works. That's incredible. We could go on and make that more interesting or rotate through different colors or whatever it is. I actually -- my wife Marisa just did this with her site, where she picked color palette. Whenever her blogs didn't have images, it rotates through her color palette, even though there aren't images on the blogs. Just extra stuff you can do like that, that adds the branding and keeps these from being squished with a lot of empty space. It's just really nice looking.

UNA: I like this one. And you can also add SVG if you had a little logo you wanted to put there. You could have a set of backgrounds that you could rotate through for these states also. You could do that. Like if you had the first not empty one that doesn't have an image, second one, third one. It's sort of like the world is your oyster.

JASON: I want to show that. I think that would be really fun to show. Let's show how you would do a rotation. So I have deleted two of my images. We want these to be interesting. So why don't we make these more obvious, like it's a missing image.

UNA: Like error state.

JASON: I was hoping there would be a little neon sign of a ghost that would work well. Let's do something like this. Too tough.

UNA: Don't do it this way. I just have a random image I pull from, I think, Unsplash that has the category of computer as my placement.

JASON: I love that.

UNA: But it does pull something on the fly.

JASON: Okay. So we could set it to pull something on the fly. I'm going to hard code, I think. Because that's where I'm at right now.

UNA: Just to show this.

JASON: Yeah, just to show this. So what I want is for these ones to have a background image depending on -- oh, wait. We can do nesting. Another wonderful feature. If we do Nth child, we'll go with 2n plus one, I think. Then that will let me set the background image to this one.

UNA: I think you might have to do the before after the Nth child.

JASON: Okay. Background size. So I think you have to do the pseudo element before, after the Nth child there. Oh, I got you.

UNA: This might not work well with -- oh, there you go.

JASON: I think this will work. Let's try. Learning together today.

UNA: I'm here to learn with Jason.

JASON: I always get these wrong. What if I just try to make it even first.

UNA: I think it's looking at the Nth child of all of them, not the ones that are empty. Yeah.

JASON: That's not going to work, is it?

UNA: What is the first selector? Okay. Card not empty if it doesn't have an image. But is it looking at the Nth of type of the card?

JASON: I think it's looking at the Nth of type of the card.

UNA: I think there's actually a new -- hold on. I must find this. I believe it's new. Complex Nth selection. More control over Nth child. So you could do -- I wonder if you could do two of. You can now do of inside of Nth child. Or even of not has image.

JASON: Did I get that syntax right?

UNA: I feel like this is now nested, so it's kind of funky. Let's unnest it and try to make it work.

JASON: Okay. So I'm going to take this out.

UNA: So we'll do dot card.

JASON: That is happening. Then I'm going to take this here. I'm melting my own brain with that selector.

UNA: Let's try dot card. Then Nth child, even of the not has image. Are we missing -- no, I think we have parentheses there.

JASON: Let's see. One, two, three. One, two, three.

UNA: Why isn't this working?

JASON: Um, can we -- should we simplify it and see if we can -- like maybe I'll take this part out and do like a background.

UNA: Red or something.

JASON: Okay. So that's doing the targeting, but it is getting all of them.

UNA: Okay. Maybe the selector here is wrong. Like even of, maybe dot card not has image. Maybe it's missing that?

JASON: Oh! Oh, look. It's also getting these ones. So it's working, but we just have to make it more specific.

UNA: Yes. That's it! That's it.

JASON: Okay. We did it. We did it. Now I can take my background image back in, and we'll swap it out for this computer image again. Copy image address. And we'll set it to the before.

UNA: And I think you have to have background size cover if you want, but that works.

JASON: So I think I set the background size cover up here. So then we can take this and set this one to be the even. And we'll change out our image to this one.

UNA: Nice. Look at this, on the fly.

JASON: Like, this is slick. That's not the best image for that, is it?

UNA: You can change the background position there too.

JASON: Oh, fair. Okay. Let's do it. Background position. I think with this one, we want it to be bottom.

UNA: Yeah, or you could try like 50%. Or 60%, 70%. I don't know. Just play around with it. That works.

JASON: Perfect.

UNA: Beautiful.

JASON: This is great. This stuff is really -- like, that's pretty magical.

UNA: It is cool you can do that. You can have like a list of background images. Accessibility wise, it's just for a visual placeholder. It doesn't have anything to do with the content. So it really is just decorative content anyway. So that works out.

JASON: Yeah, I love it. Like, this is such cool stuff. And it gives us like unlimited opportunities here. You could set up an SVG, like there is no image, kind of placeholder thing. You can rotate through a set of your default blog images. You could generate an image using something like Cloudinary that's got the text APIs. So many cool things you can do, and you can just throw that all right into here. Extremely, extremely cool stuff.

UNA: Something that I really want in the browser that we don't have yet is the ability to semantically pull data attributes and use those. So if you have a data attribute that was an image URL, you could maybe use that in CSS. Or color. But we don't have that yet. Although, you could use style queries to -- it's an experimental API, so we don't have it across all browsers yet. But you could get the value of a custom property of its parent. So you could maybe set like a custom property value of like card theme to red. Then pull that in.

JASON: Oh. Yeah. That's a really cool thing you could do. Yeah, because you could put categories, then the placeholder image could be on the category. There's so many amazing things that are possible here.

UNA: Yeah. Yeah, yeah. Exactly.

JASON: Okay. So we've got about 20 minutes left. Is there anything you definitely wanted to show off while we're in here?

UNA: Oh, there's so many things. Okay. I think one really cool thing is popover and anchor. Although, anchor is probably going to be changing. That API is going through a bit of a reconstruction right now. So I don't know how much we should dig into that. List box -- select list with list box, something I've been playing with recently, because it's very, very early stages. I'm kind of testing out the edges of that API and seeing how we can build things with it. But I could also talk about things that are also landed and more usable. So really, it could be anything. We could talk about -- I don't know. What do you want to get into?

JASON: I -- oh, let's see. There are -- I mean, what I've loved is we've been able to pull a lot of things in organically here. Can we do the scroll animation? Because I feel like that one is especially cool, and I want to show that.

UNA: Yeah. So that one, a great sample site is scroll-driven-animations.style. There's also a tool for scroll-driven animations. You should definitely follow Bramus. He's been putting out a lot of great content. He's been working on polyfills, all these great tools. Definitely check out Bramus as well. Next guest, maybe.

JASON: This here is CSS. This is not JavaScript.

UNA: Exactly. It's declarative. It's written in CSS. It's so cool. So you can also add these. This site has a lot of examples. You can click through any of them and see how they work. Maybe click on one of the polar bear ones.

JASON: The chat is fixing my links because I keep trying to use my Arc shortcuts and they're not working. Okay. Here's my polar bear. All right.

UNA: So this is showing that bar.

JASON: The read completion bar, which a lot of people, myself included, have installed the JavaScript library to implement.

UNA: I remember a while ago, I implemented this with CSS gradients. As you scroll, you had a fixed positional element, and the gradient went from a color to transparent. The gradient looked look this on the page.

JASON: That's clever.

UNA: I wouldn't say very performant.

JASON: No, but it's beautiful because you were hacking it with CSS, I was hacking it with JavaScript, and now it just works. We don't have to think about it anymore. We can just turn these on, and they happen. I think that is so dang cool. There's a carousel position indicator. Is this on a timer?

UNA: No, so this one -- I don't know if that's working or not. I believe those have images with them.

JASON: They do, and I don't know where the -- this one must not be --

UNA: Okay. Maybe we'll try another one.

JASON: Oh, this is cool.

UNA: Yeah, this is just a transition, so a scrolling. It's just so cool, this visual effect.

JASON: And the idea that something like this is done without any JavaScript is so, just pleasant. It's just wonderful to know these sorts of effects are on the table now.

UNA: This is just scrolling in opposite directions. That's what this one is.

JASON: But to do that in JavaScript -- yeah, it's like this whole pain in the butt. So I love this. Then this is an effect I've tried to do a million times. Every time I do it, it feels a little funky because I'm always doing something weird. It's always got some JavaScript to replace an element, move an element, do a thing. Then it always has this moment here, always jumps. This one does not do it.

UNA: Because it's connected to the scroller. And it makes sense. Before, we were able to animate things in CSS based on a timer. Now we can attach it to a scroller. You can attach it to a scroller within the page. You can attach it to the entire view port of the page. And there's a lot. This API has a lot of complexity. Honestly, I haven't -- I've used it a little bit, but there's still pieces to it I'm discovering. So this one kind of has a little effect at the top and bottom. It's a little bit of a sticky effect.

JASON: Yeah, that's nice. It's good. Oh, and there's you.

UNA: This is the DevRel team. I think one of my favorites also is the card stack, the stacking cards one. It shows this user experience where you're kind of in a visual experience. You're staying in it. Then once you finish it, it scrolls away.

JASON: That's super cool. And this is -- okay. This is one of the things that, like, I have built UIs like this where you do what you feel at the time is definitely scroll jacking. You're building things in that take over what the scroller is doing. Your JavaScript is kind of jumping around. It's so good on this high-performance browser. I've got my M1 Mac, I'm cruising along. This site feels great. Then you open it on your phone and it's like chug, chug, chug. (Laughter) So knowing it's built into the browser, I'm not layering a bunch of JavaScript and taxing the GPU or on a device that doesn't have GPU support or whatever. Just absolutely grinding it to a halt.

UNA: The thing about that, too, is it works off the main thread. So it is more performant to apply. You're not worrying about your other scripts, which helps you separate style and logic or things you have to do with your users' sort of interactions.

JASON: So cool. A horizontal scroll section. Another common scroll jacking thing that is terrible if you try to do it in a way that is not ideal. Again, this is so easy to make inaccessible. The fact this is baked into the browser means the behavior -- and I'm making an assumption here. You can affirm if I'm right. The behavior here, as far as the browser is concerned, is zero difference from if there was no scroll anchor set. So from the standpoint of a screen reader, you're just navigating the page. So this is style only. It's not behavior changing.

UNA: Yep.

JASON: So good. Like, this is a really -- this, to me, is one of those things that feels like a quiet change, but it's a game changer. How many kilobytes of JavaScript do we get to get rid of because this works now?

UNA: And you can have this be an entire-page experience, like a lot of these examples, or something more subtle. An example I really like that Adam Argyle shared -- and I can't find it -- but basically the bottom 15% of the view port, and the opacity would go from zero to one. So a little smooth animate in from the bottom of the view port. So you could have these subtle pieces. On my site, I have it in one small section, just to kind of test it out. It's a little progressive enhancement. But you can see how it adds a little more dynamic -- if you keep scrolling down, there's around the web.

JASON: There it is. Look at it go.

UNA: Just animating it from the left and the opacity kind of coming in.

JASON: It's so good.

UNA: So you can have it be more subtle too.

JASON: And somebody was asking if this is no JavaScript. So I'm going to disable JavaScript. We're going to come back in and do these again with JavaScript disabled.

UNA: Ooh. There is a JavaScript version too. It's using position sticky. I think it's not doing the animations where it's getting smaller and stacking.

JASON: But, like, look at this. Again, JavaScript is off.

UNA: It's so cool. I haven't actually turned off JavaScript when playing with this stuff. I love that you just show that here.

JASON: Like, I can't even imagine. I've spent the time building these sorts of things as experiments. I've never shipped them because there was always some edge case or weird behavior or some jank I hated. I was like, if I'm going to ship this, it needs to feel perfect and it never did. So I wouldn't ship these kinds of experiences. Now that this works, my brain is buzzing with things. I'm like, I can bring that Idea back. I can do that thing I wanted to do now because I don't have to fight with the fact that what I had built was all JavaScript and very inaccessible and all those other problems. I can just have this good idea. The browser is going to do it in the right way. Obviously, as developers and designers, we still have to have taste. We can't just throw all this at everything and expect it to be a good experience for people. But at least now we don't have to worry that, you know, our idea would be aesthetically pleasing and a usability nightmare.

UNA: Mm-hmm, yeah.

JASON: Very, very cool stuff. I'm going to turn JavaScript back on before I forget about that and later I'm like why is the whole internet broken. Whoa. Actual 3D models? All right.

UNA: Yeah, so this is kind of playing an image. So you can play frames of an image. That's how you kind of get this effect.

JASON: Oh, my god. That's so cool. Okay. I actually built one of these. I saw a thing that got shared around. So somewhere on my CodePen is one of these that I built. I was like, I got to see how this works. Where are my most recent ones? Here. This is like all scrolling. It's scrolling this one image. So there's no JavaScript, first and foremost. Then there's just this image tag. So how does this work? This feels like absolute magic. So in the CSS, I figures out, first of all, steps. I didn't know animations could have steps. This was a mind-blowing moment for me. Then it's a scroll thing. So you use the animation timeline of scroll. Then I basically just move this thing. Where's my scrolly? You move it to the end of its position, right. But because it's going in steps, it exactly moves the image one frame at a time, which is I'm assuming what you were talking about with the shoes. So if you look at this image --

UNA: Yeah. Yes, exactly. You sort of progress through the image.

JASON: It's incredible. Like, what an absolutely incredible -- this is just so clever. It's one image, a couple lines of CSS, and you get an actual framed animation. You could put anything you want in here. There's a giant truck pulling up behind my studio right now. I'm so sorry.

UNA: Congratulations on the studio, by the way. That's so cool. That's funny. Yeah, I can totally see it.

JASON: So this stuff just blows my mind.

UNA: This is one of the features that we are getting or now have in CSS to help us build things that are more visually interesting, that are better in terms of separation of style and logic, that help us to eliminate libraries that we used to rely on just to create some styling changes and to improve performance. So there are a lot of reasons for improving the web platform and adding these features. And these are common things that people build and sort of deal with. So I want people to play with this. I think that's the best way to kind of learn it and see where it's useful to you.

JASON: Yeah, there's so many possibilities that this unlocks that don't require you to fully learn, like, a complex animation library or to become a JavaScript architect of performant browser manipulation. You can just have an idea and use these APIs to put stuff together and play. You can build some really incredible stuff with all this. With that, I think we're roughly out of time. So I want to make sure that we've got a minute to do some shout outs to like where should people go. First of all, a lot of these APIs have been launched. If we follow you, if we follow Adam, if we follow Bramus, we see demos. Where should I go if I want to, like, have my finger on the pulse of what's shipping? What's the right place to go to keep up on this?

UNA: So a couple places. Web.dev is a great resource that focuses on stable APIs. For us, when things go stable, we write about them on web.dev. Then you'll know they're available across all modern browsers. So there's content around things new to the web platform, and that's things that are shipping across browsers. So CSS, JavaScript, all of these things. For more cutting-edge features, you could follow our writing on developer.chrome.com. These are things that are a little bit earlier or things that are landed in some browsers, maybe one or two, but not all of the browsers. We'll write about them there. Again, this is a variety of content. If you want, you can also follow us on Twitter, if you're still on it. I don't know what a good link for that is. Just look up the CSS podcast in whatever app you're using. But I also want to say with great power comes great responsibility. Even though we talked about scroll animations and a lot of these features, make sure you're thinking about your user and your users' preferences as you build. We also have a lot of hooks into user preferences. So maybe if they prefer reduced motion, you don't have all these crazy parallax effects. Maybe they prefer color schemas. Think about what your user wants. Contrast or reduced contrast. There's a lot of hooks you now have to customize your user experience. Also think about progressive enhancement with these features. So test across browsers. Test across mobile browsers too. Because those might have different support than the desktop browser you're on. And check your browser matrix support. That's an important one. Don't be afraid to experiment, but before you ship things, think about your users and what that experience looks like for them.

JASON: Yeah, and for browser matrix support, can I use can where I typically go. Is there another place that you recommend for checking that?

UNA: MDN is also a good one f you're looking things up. We use browser data. We have browser compatibility data, for most of them at least. We try to showcase that. And yeah, I guess just following along with the latest. I think it's always good to follow along early because you can explore things but also give feedback about it. We're always looking for feedback from the developer community. So if you have thoughts about naming or syntax or ergonomics, that's always great to get feedback on early. Then I guess the last one is if you want to follow me specifically, which I don't know why, but if you do, uni.im has all the speaking and blogging and podcast links and all that good stuff.

JASON: Yes. All right. So this was so much fun. I'm definitely going to reach out to Bramus about doing more scroll animation stuff. Because what a time to be alive. It is such a -- like, you said it earlier. It's a golden era for web dev. It really does feel that way. Like, we get so many new toys that are not complicated to use, expensive to implement. They don't feel fragile anymore. I feel like I spend a lot of time when I was first learning to code. You'd have an idea, put it in place, and it would look so good on your browser. You would open it on literally any other computer, and there would be something wrong. I feel like that's been happening less and less. The progressive enhancement story is getting better. With a lot of this stuff, you just use it. If it doesn't work, the browser continues working and nobody cares. But it's there. You get this moment of delight. It's magical. Una, thank you so much for taking some time to teach us today. This is so useful. This is immediately going to influence the way that I build. Any parting words before we send these fine folks off into the rest of their days?

UNA: I just want to say thank you for listening and thank you for the support. And thank you, Jason, for everything that you do also for the web community. I appreciate it. I wore my funky '80s shirt. I thought you would like it for this episode.

JASON: That's great.

UNA: Yeah, I guess just, the web is a really cool place to build stuff. I always love to see how people are exploring these new features in ways that we hadn't thought about before. And you also have things that you need from web platform, you could always reach out to anyone on our team. So if you want to reach out to me or Adam or Bramus or even Jen from Apple, we are here to hear you and to listen to you and to make sure that your voice is heard so that the platform can support you and the things you need on it. So I guess that's all. Like, we're available. That's what I want to say. And thanks for joining.

JASON: Awesome. Well, thank you so much. Chat, we're going to find somebody to raid, so stay tuned. We'll see you all next time.

UNA: Bye, y'all.