Speaker explains how built-in snap events have made previously invisible moments during scrolling visible. They have discovered ways to simplify backdrop inheritance. They also discovered a new function called light dark. Speaker needs to play with starting style for transitions, ways to pop into the top layer, improved Ruby alignment, backdrop inheritance and property joint. They are impressed with the new click-to-type-like effect.

Speaker has seen Ruby before, but they didn't know what it was. It made the whole page move. Speaker explains that Ruby annotations are line breakable and they can style Ruby text with the Ruby Alliance CSS property. They explain how to pronounce the symbol on top of the word in order to help with the pronunciation. Speaker is going to use this method on something. It's limited availability.

Speaker and their friends are happy to see each other. They tease them a lot because they got them on the spot. Speaker has 57 minutes left, but it's not 55 degrees Celsius. They might have to extend the time a little bit more or do another round. Speaker's printer doesn't work properly. They might have to wait another two hours for it to start working properly.

Speaker is learning how to work with CSS. It's their first time doing it. Speaker wants to take a look at RAPT from Chrome Dev. They are going to post a link to it in the chat next to the recording of a video. They are watching a video in Chrome. Deb uses cookies. They are watching a video. Speaker is impressed by the animations in the video.

They discuss the latest developments in CSS. They discuss cross-document view transitions, scroll-driven animations and height auto.

Speaker spent a lot more time on that than they thought. They like the last part with the paint order. They are going to use it on many projects. Speaker will take a look at their website when they come back from the break. They thanks Brax for hanging out. Speaker sends Brax a song from Anthony Cruz. They want to thank them for holding on when they brought it down.

Speaker is looking forward to messing with some of the new features that have become available this year. Css has taken another step forward this year. It's interoperable across major browsers thanks to the hard work by browser engineers and the community. Speaker likes the way the latest CSS was launched the web platform in 2024. They think it's smoother on their phone. Speaker is talking about the DX features on their phone. They like them a lot. Speaker is excited about the components they have just received. The components are scroll animations, the power to animate the auto height, and the ability to turn details into an accordion. Speaker is excited about a new feature on them that allows them to show text next to the button.

Speaker explains what is fixed and what does it mean to him. They don't grow. Speaker is looking for email input. It doesn't give them an error. It shifts like the whole page. It works for any font, any font size, and any language. Animate to high auto. Speaker is showing off their new device. It's limited, but it's cool.

Speaker explains to me how to create a reply on a page and how to style it. They like the idea of having only one model open at a time and putting a name attribute on all of them.

Speaker is impressed with the detail content saved in CSS and the fact that there is no JavaScript in it. They are showing off some of the cool things they are seen on the internet. Speaker is excited about the new features that are coming out of the project.

Speaker is excited about the multipage they talked about before. They want to learn more about Scroll-driven animation.

• degrees
• dope
• property popover
• chrome devrel team
• multipage view transitions
• complete solution

Welcome back.

Your dreams for your ticket out?

Welcome back.

To that same old place that you laughed about.

Well, the names have all changed since you hung around.

But those dreams have remained, and they've turned around.

You'd have thought they'd need you.

You'd have thought we'd just.

Yeah, where we need to.

Yeah, they tease him a lot, because we got him on the spot.

Welcome back.

Welcome back, welcome back.

Welcome back.

All right, give a stretch.

Okay, good.

Okay, cool.

So, uh, filament watch.

So I have 57 minutes left.

And the thing is, though, it didn't reach the because I think it needs to be like 55 degrees Celsius, right, for it to have the drawing.

So I don't know if it's 55 degrees Celsius for two hours.

Or it just needs to reach 55 degrees during those two hours.

I'm not sure.

So I might have to extend the time a little bit more or maybe do another round.

Because, again, the folks that created it says like eight hours.

So I'm thinking, and then at like 65 or something like that, which is super high.

Yeah, like 60.

And that's what I said on the box.

And it said like plus or minus five.

So 55 should be fine.

And it said like eight hours.

I'm thinking what I might do is another two hours maybe since it didn't reach 55 from the jump.

Because maybe I should have waited.

I don't know.

I thought it would start when it reached.

Because I set the thing, the type in there.

And then I hit the little rotate button, and it started going.

So I don't know.

We'll see.

It's fine.

We'll figure it out.

Again, I'm only printing like small things with it.

So if it doesn't come out right, then I can always stop it.

Just like little tools.

So it doesn't need to be perfect or anything.

So it's a learning experience.

So yeah, so that's going.

And I It has 360 on there, right?

So, like, I was thinking it would be, the spools would be spinning like this continuously, right?

It doesn't look like it.

It looks like it goes, what I mean?

I guess it is 360.

Like, it goes one way.

I think I haven't met, like, washed it all the way.

And then it goes back the other way.

It kind of just goes back and forth like I mean, hey, they made it, they must have tested it.

So it must be like the best thing, right?

So it's not continuously going in the circle.

It's kind of like alternating back and forth clockwise and counterclockwise.

So we'll see.

We'll see.

Again, learning experience.

My first time doing this.

All right.

But what I'm not first time experiencing is CSS.

And so what I want to talk about is this, it's like people who do like these unwrapped things, you know what I'm saying?

Like I think like Spotify does one.

I got one for like Google YouTube music, stuff like that.

So kind of like.

A year in review kind of thing.

My guess, RAPT is the new thing.

And so I want to take a look at from chrome.dev, which will post a link to it in the chat, not the chat.

I think of a radio show.

I'm going to add a link.

So it'll be next to the recording of this video, so you can check it out for yourself.

It's pretty cool website.

So I'll figure it talks about all like the newer things that happen in CSS, which is amazing.

Some of the stuff I didn't even know about and have like examples.

I'm like, makes me think about stuff.

Like it's inspiring.

So we Again, here is the CSS RAP 2024 from Chrome.dev.

All right, cool.

So let's go ahead and scroll through this.

Oh, Chrome.D.

Deb uses cookies, apparently.

So sure.

All right.

Oh, there's a video.

Okay, what's cool is, like when you scroll, you see how like the everything kind of like goes into it?

That's pretty dope.

That's kind of cool.

Before we watch the video, let me check out the rest of this thing here.

So Chrome and CSS, where does this go to?

Oh, nothing.

It's just, okay, that's cool.

In 2024, journeyed through the forest, over the mountains, and across the seas.

All right.

I'm sorry, I got distracted by the animations.

All right, let's check out this video.

Let's see what's in the video.

I'm going to be.

I'm going to be able to be.

I wonder if they made that whole video with CSS?

That'd be interesting because I know you can do like if you like record like, you know, send it to like an eye frame or something kind of not an eye frame, but a canvas or something and kind of like record the whole thing.

I don't know.

That'd be cool if they did.

All right.

Okay, so we saw this.

So 2024 has been another amazing year for CSS This is the font too, yeah, this is font.

Interesting, that's cool.

Cross-document view transitions.

So a lot of the stuff we kind of spoken about already throughout the year, but like the cross-document view transition, that's pretty dope.

And the scroll-driven animations led you add more interactivity to your applications with a few lines of CSS.

And we spoke about all that stuff before.

You can now animate height auto.

That's pretty dope.

Style scroll bar.

So if you ever like the little thing on that and size text inputs to their contents.

So you saw how like when they were typing in like the input box, it would grow.

That's pretty dope.

And then also with the like the button, like when you like hovered over it opened up.

So that stuff was pretty dope.

And so I'm looking forward to messing with that stuff there.

So many features have become baseline newly available this year with exclusive accordions.

And that's pretty dope too, where you can just put like, I think it's name.

On all the different like details, and you would only one could only be open at a time all you have to do is just put the name that's amazing at property popover and starting style I've not really gotten a chance to mess with these for pop over I'm a lot of times to use dialogue, so I've never really got to use that yet but yeah that's what there's pretty though all interoperable across major browsers Thanks to the hard work by browser engineers, shouts to browser engineers, shaltz the specification writers, shout to specification writers, and the input of the community, shouts, the community.

CSS has taken another great leap forward this year.

All right.

See, this is pretty cool.

Like, not only does a little dinosaur, like, go across the screen.

He jumps a lot, though.

I think it's smoother on my phone.

But, All right, so join the Chrome DevREL team and a skateboarding Chrome Dino on a journey through the latest CSS launched for Chrome and the web platform in 2024, highlighting 17 new features.

That's pretty dope.

All right.

Oh, whoa, this jumps.

Wow, that's pretty cool.

Ooh.

Oh, so the thing is, oh, I think it's because I'm sharing the screen.

I have this tab thing at the top.

So it's kind of taking up real estate.

So I can't really see below it.

So yes, there are the interactions.

And this is the DX features.

All right.

That's pretty dope.

Oh, and it stays with, oh, it's like it's revealing it.

Because it's not like pushing up this out of the way.

Like it's just going in its own container.

Oh, that's pretty dope.

That's pretty cool.

Okay.

All right.

Oh, and a little dinosaur skateboards along, too.

That's pretty dope.

And it changes the directions.

Oh, see, I didn't see all this on my phone right first side.

That's pretty dope.

Okay, but I'm pretty sure that's probably similar to what was scrating across the screen horizontally before.

That's pretty dope.

Okay, my bad.

Sorry, distracted.

Cool.

So then we got the components.

Ooh, and this, so this is another one that scroll animations.

So you see it, I use scroll.

That's pretty dope.

I'm pretty sure the dinosaur is also a scroll animation.

Or, hmm, because it like follows where the that's pretty cool.

All right, components.

We traveled over the mountains to bring exciting overlay U.X with anchor, the power to animate the auto height.

Easily turn details into an accordion.

Again, that is so cool.

Get more access to detail styling, all right?

And intrinsically size, form elements.

Again, with the thing opens up, like, to show, like, text next to the button or whatever.

It's just like an icon.

And that's pretty dope.

So field sizing.

So to see, this is limited availability.

So right now, it's only Chrome and Edge.

Oh, they have a video.

Okay.

Oh, wait, let me play the video.

So if it's fixed, okay, see, it gets bigger.

All right.

Okay.

That's interesting.

Okay.

What are I says, what is fixed mean?

I'm sure what that means.

Okay, that's dope.

All right, so then, yeah, here we go.

So without it.

So blah, blah, blah, blah, blah, This doesn't shrink to fit.

So if you say like high, see it all stay the same.

Now, this might be good depending on like how your forms are set up because sometimes if you click it here, and then you want to change, you got to go back over here, and you know, so all depends.

And if you have something next to it, that's going to shift also, probably.

So as with anything, it depends.

And so yeah, I don't grow.

Yeah.

I'm just looking for email.

Does it give me an error?

Doesn't give me an error.

And then numbers, all right?

So now with it though, so you kind of goes, keeps going.

But then see it shifts like the whole page, which is kind of, you know, I'm sure you could put like a width on this, maybe like a max width.

And so it'll go to that and then this thing, cool.

This looks like it stayed the same to me though.

I don't know.

I grow too.

So yeah, that's pretty cool.

Email input.

And here are the numbers.

So if you go up to like, whoa, okay, one trillion.

And then here's, oh, in the file chosen, see, I didn't check that out.

Okay, that's cool.

So this will work for any font, any font size, and any language, and any writing mode.

What used to be high effort would now be low effort.

Nice.

All right, cool.

Now, this is pretty cool.

Animate to high auto.

Again, it's limited.

Ah, okay.

So yeah, so you see like here's the button joints, like it just opens up.

That is pretty cool.

Like if you're hovering over it, so you can like, hey, what's this button do?

Oh, it's a reply.

Oh, reply all.

Oh, forward.

That's super good.

That's super dope.

And again, you can check it all the other stuff.

And then, yeah, so wait, to make that Huh.

So the whole page just interpolate, allow keywords.

That's all you need to do, really.

That's pretty dope.

Okay.

Sorry, again.

So here, this is what I've used before.

This is pretty dope.

I use it because it was baseline.

And so pretty much, oh, and they have all the styling stuff too.

That's pretty cute.

Sorry, distracted.

All right.

So then, yeah, so you see how this one's open, right?

Let's say I want only the box model.

That one is open.

So you can only have liked one open at a time.

And all you do is just put like a name attribute on all of them.

So as long as they're all the same, that's pretty dope.

And then I'm wondering because, yeah, so if you had And then you could have it to where on one thing you see it.

And then they go to the next thing, and then that would close that other piece.

So you could probably do a lot of pretty cool stuff with it.

You know what I'm saying?

So yeah.

Stilable detail.

So kind of like what they were doing here with this stuff.

Oh, see, it's limited.

Okay.

So the detail content.

So, wait, Like that's very nice.

Saving space.

That's pretty dope.

And all using CSS.

Like so there's no JavaScript in that.

That's pretty dope.

Like all the transitions and animation stuff.

That's pretty dope.

Oh, so they have this to check to see if the thing is there.

Yeah, this includes type embed.

Cool.

Yeah, I'm going to have to look more into this, but that's pretty cool.

So if you ever wanted that effect, you can do that.

Pretty dope.

All right.

Yeah.

And I think these are just details.

So these are basically like this, just, you know, style differently.

Yeah, details.

So they just display flex and they put it.

So instead of like it being like in a column, now it's in Pretty dope.

So yeah, so you can kind of see here is similar thing.

That's cool.

Okay, all right, anchor position.

This one's pretty cool too, but it's limited availability.

So you can like to place these things.

Okay, then they have this thing here, so you can kind of say where you want it to be positioned, like your little pop-up joint or whatever.

That's pretty cool.

Yeah, all right, dope.

Interactions through the forest, we found features for styling the scroll bar using multipage view transitions, which is super dope, by the way.

And to make it work, it is like two lines of CSS.

That is so dope.

Creating scroll animations, which I'm still trying to learn more about that.

And events for scroll snap.

It's pretty dope.

So yeah, so the scroll bar color, it's the limited availability.

So it might be cool to start to like look at it, but you know, it's still not really.

That's pretty cool.

You can just change the color like right from there.

That's pretty dope.

All right.

So yeah, so I mean, at least checking out the, uh, demos and looking at stuff.

So yeah, so the cross documentation, so it's almost there.

It's waiting for Firefox.

You know what I'm saying?

So this is pretty cool.

So this is that multipage that I've talked about before.

We looked at this a lot because it's so cool.

But yes, it's just basically this.

That's that.

And we can do more to like for custom animations, but so yeah, check Scroll-driven animation, still trying to, you know, learn more about that stuff there.

So you can kind of see.

What's cool is if you don't have it, like if you're browsing, it doesn't support it, it just shows the image.

So it's not like you're breaking the experience, you know, saying?

So.

Pretty dope.

And that's cool.

They have like resources and stuff.

You can check out more.

Scroll snap events.

I think, I don't think I've seen this one before.

So built-in snap events have previously, have made previously invisible moments during scrolling.

What else I mean?

I don't know.

Oh, visible at the right time and always correct.

Okay, okay.

There's a weirdly phrased sentence from me.

They are the missing piece of the puzzle that makes scroll snapping a complete solution.

So let's see.

They have an example here.

Take a look at this.

All right.

So they use it to hold it.

All right.

Okay.

So it's when they click it.

It shows it.

Okay.

Okay, interesting, that's cool.

So it's no scroll snaps changing.

Oh, so it does it automatically.

Oh, that's dope.

That's pretty cool.

So when it's like in focus or in the center, it pops up, so you don't have to like to click it.

That's pretty cool.

Oh, so this is an example.

Like if you have a, oh, I guess what?

Oh.

So it'd be cool if I could drag this and it shows there.

That'd be pretty dope.

But yeah, that's cool.

Very cool.

Developer.

This is, ooh.

Ooh, that's not good.

Um..

So yeah, we discovered ways to simplify backdrop inheritance.

Oh, that's cool.

A magic color function, really, called light dark.

Oh, okay, called light dark.

I thought it was an actual, like, like, I don't know why I was thinking about magic color, fun.

But I thought it was like a function or something.

But light dark, that's pretty dope.

Safer and smarter variables with app property.

Again, I still need to play with that.

Starting style for transitions, I've not played with that too much.

Ways to pop into the top layer, improved Ruby alignment.

I'm not sure what that means.

So backdrop inheritance, so you can show a dialogue.

Oh, that's cool.

Oh, yeah, the backdrop.

Okay, that's very nice.

Cool.

Light, dark.

I spoke about that Uh, do-do-do-do-do.

Property joint, I think we spoke about that before.

Popover API, we spoke about that before, but it's like limited availability.

Again, that's why pretty much just use the dialogue because it fits my needs.

But yeah, so it's pretty dope.

I think it's like click anywhere.

Cool.

Entry effects with starting style.

Okay, limited.

I think we looked at this before Pretty cool.

Do-p-do-do here, dialogues.

It kind of, whoa, it made the whole page move.

What?

Whoa.

Okay, that's unexpected.

Line breakable Ruby.

Didn't see it.

So, okay, this thing, I've seen Ruby before, but I never really knew what it was.

So is it like Ruby code or something?

Ruby annotations are line breakable and if you and you can style Ruby text with the Ruby Alliance CSS property.

Oh no, you know what it is?

I think it's for certain like, yeah, that's what it was.

So like, languages like how to pronounce that symbol a lot of times they'll put it on top of the word so like in Japanese I see they do that a lot which I guess makes sense because it comes from Chinese but okay yeah, so you can see like think yeah it helps with the like how to say it yeah that's pretty dope oh that's cool Okay, pretty dope.

All right, dope.

And then paint order.

See, this is pretty cool.

I like, that's pretty dope here.

So you can do like this for paint order, fill, s****e.

Then, if you do s****e, fill.

So fill, s****e, s****e, fill.

So in the order in which it goes, So does the fill and does the s****e.

Or we can do the s****e and then the fill.

And those are, that's pretty dope.

I like that.

I'm going to use that on something.

That is pretty dope.

Is this available?

Oh, it's limited availability.

Okay.

Ooh, what's markers?

I don't know what that is.

I was looking to that.

Oh, yeah.

So you can see that's, that's super That is so cool.

I always like this effect.

You know what I'm saying?

Like in my, like when I was doing logos and stuff, I would always like, if I could, do something like that.

Now I can do it in the browser.

That's so cool.

That is so cool.

CSOM Nested Declarations.

Okay.

Okay.

You got the nested joints.

All right.

All right.

I like that.

And Yeah, that's pretty cool.

That's very cool.

All right.

So, yeah, I spent a lot more time on that than I thought I was.

But did you see anything that you liked?

Like, it seems pretty cool.

And especially that last part with the paint order, that is dope.

I am going to use that on, like, so many projects.

That's pretty dope.

You know, it's limited.

Availability right now, but still, that should be, well, I mean, it shows that it's like in all of them.

Yes, but it has the checkmarks on all of them, but it's probably like behind a flag maybe or something, but it's coming soon.

So I'm going to go and mess with that some more.

All right, let me get y'all back to work.

Again, thanks for hanging out.

It says it I may start, I may try to print something.

I don't know, we'll see, we'll see.

I might give it like another 30 minutes just to, now that it's at the actual temperature, I might, I think I could just increase like my time, like do like 830 more minutes, or just reset it, wait 30 minutes and then stop it, maybe.

Or maybe do the whole other two hours.

I don't know what I'll see you.

We'll take, when we come back, we'll take a look at our website.

Maybe watch some videos, maybe listen to some tracks.

Maybe you'll become a fan.

Until then, thanks for hanging out.

See you 15 minutes out of the hour.

Till then, I wish you much productivity.

Here's a track from Anthony Cruz, aka A.A.A.A.Brax, thank you.

Thanks for hanging When the brother was down in an eye, now I feel so strong.

And I want to say thank you for being there.

When the brother had no way to turn to you, you were there.

And I'm going to say, yeah.

And everybody said, yeah, oh.

We spread a love like, yeah.

I want to say thank you for holding on when I brought it down, and I feel so strong, and I want to say thank you.