Ngobrolin Fitur Terbaru CSS bersama @AdamArgyleInk dan Bramus @ChromeDevs

4:06kickstarted with with the actually building stuff with it so yeah oh I also have a website just like Adam Adam is nerdy.dev and I am Bram.us but I'm not from us I'm from Belgium

4:18okay

4:30okay

4:32that's a perfect TLD for your name

4:35yeah

4:36yeah

4:37yeah this dates back from from the days where everybody had like

4:40yep

4:40main hacks where it was like if you had something clever with your domain and you could use the suffix or TLD as part of it and it turned out it worked for me

4:49it's also is brand nice brand dot us exactly perfect nice does Amsterdam have a TLD could I be add.am you know

5:01or would Amsterdam be three experts you know would it be anyway it's very cool okay okay yeah we're bigger sorry

5:13no worries no worries okay so um yeah you uh you are both um uh devrail right can you tell us about how uh what did you do uh

5:29every day looks like what is a devrail because some of our audience probably doesn't know much about what is devrail

5:39go first promise let's see Adam is pointing at me

5:42yes please

5:43yes so um as daryl we um try to on the one hand like spread the word on new features on new web features

5:52so whenever something lands in uh chrome in this case then we like try and make sure that we have a blog post that announces the feature

5:59um give you some demos write an article maybe update mdn to make sure that the info there is up to date

6:06um that's like one part of the job but then the other part of the job is also listening to your feedback

6:12and then making sure that that feedback so that feedback that real web developers have that feedback

6:18then makes it back to engineering or the css working group for example um so that way that we can make sure

6:24that instead of shipping the thing in a browser that we are shipping the right thing the thing that actually

6:29solves your problem um so so like this we were like this this bridge builder between standards bodies engineering

6:36and and web developers um and to do that as part of our day-to-day job we often get to play with features

6:42first like as it getting prototyped in chrome we we get our hands dirty we try and break it um we try and point out the flaws

6:50and to make sure that we can ship you like this nice polished feature in the end that then it's part of the

6:57web standard of course and then hopefully soon sooner or later it will be in all browsers so that you can use it

7:02yeah sounds very complicated to me because you have a lot of stakeholders like engineering and then the the audience

7:10us you take a lot of feedback and you take from the other and um a lot of people to please

7:17yeah and sometimes it's a bit difficult right but sometimes we we see like okay this is like a real pain point for developers

7:24we need to get it prioritized but then engineering is like yeah but we have all these other things that we're already working on

7:29like we can't just squeeze it in there somewhere

7:32yeah so we have to try and find this balance um where where we can like try and influence the priorities

7:45and sometimes with success but sometimes we just have to wait as well and we are just waiting on the buck until

7:50the email comes that somebody got assigned to it and they were like yes somebody's working on it great

7:54and it's when it's yes it's only for one browser you still need a yes for another two browsers

7:59oh yeah that's awesome that's why i said it's complicated

8:06or if something lands in another like we'll definitely be talking about view transitions today

8:12if that landed and when that landed in safari like i tried out all my demos in safari to make sure that

8:19the thing that we have is interoperable with the thing that safari has and sometimes it surfaces a bug in chrome

8:25but it will also be a bug in safari and then like we file the bug make sure it's followed up

8:28make sure it's followed up and and write the test for web platform

8:35maybe adam can add some more details to everything

8:39i mean a little bit but yeah y'all can ask some questions i have a quote i'm gonna find

8:43because i just the other day was like oh this is a really good thing we do with dev rel

8:47it was like quippy in short i'm gonna find it while you uh ask brands more questions

8:54i think i heard web platform tests i'm not sure while i was talking or

9:01wpt i heard that too yeah wpt yeah yeah when you were talking about the bugs like uh you know in browser

9:08a it has uh this web but in browser b it has uh uh that but and uh you are also in charge of uh uh

9:17uh well we we we don't typically um do that like it's more for engineering like like if if chrome

9:23and something then they'll also make some wpt's they make sure it's upstreamed and all the other

9:28browsers also get those wpt's and then their implementation and they start doing it like hopefully

9:33they also get all greens um so we don't necessarily are involved in like creating a wpt's um we are more

9:41involved with the practical implementation because the wpt's are great like they test some basic things

9:47but one if if the test is is flawed like it tests the wrong thing or something is not tested then you

9:54can still have all greens right like like if you if you implement a feature and only have one test that

9:58says can you parse the property you will have a score of 100 on all those tests but it doesn't mean

10:04that the feature is actually usable so that's where our practical approach comes in like we actually build

10:10build something and then we find out most often i go okay we have this one feature and we try and combine

10:16it with another feature and then suddenly things get a bit weird and yeah that's the practical approach

10:23um say we're very very hands-on with it with everything okay

10:29i see adam you did an awesome job no that was really really great uh covered so many things it's like uh like

10:39like the last part there's like sometimes we do weird stuff you know so it's like hey we've got this

10:43feature it scrolls like this and you're like oh yeah what happens when i scroll drive it and make it

10:47rotate and they're like i don't know and you're like well that's why we're here we're here to do weird

10:53stuff um yeah the the quote that i was looking at those like i was looking at like i was trying to think

10:58about what's our value like it's easy to tell you what we do you know hey we listen to people and we

11:02make sure that those features get put into browsers in a good healthy way and then we

11:06go build with them to make sure that actually solve the problem so it's like we can tell you what we do

11:10but the value i was saying uh at a high level like something i would tell my mom uh would be like

11:16things should be conceptually easy like it should be easy to uh have an animation between two pages

11:22okay conceptually that's easy but in practice is it easy no no it was quite difficult until we listened

11:30enough we tried enough we found a way forward to solve this problem in a really elegant way so what

11:36what i'm pitching is is that devrel makes the conceptually easy concept a reality and we do that by

11:45listening to people trying out these things early on saying where they're wrong and um and yeah i thought

11:51that was kind of cool so we make we make the easy concept actually easy for you uh because otherwise

11:56it's just too easy to say things are easy just like how many times i've said easy right now

12:02easy peasy um easy peasy um but i can i can relate to that easy things a reality that's that's nice and

12:09catchy yeah thank you i thought so i can relate to that story for both of uh you uh your adam and

12:16brothers as well like um when we start this podcast it's actually started when when we were in bali uh

12:23we have uh this gde and gdg summit in bali and so it's asia um so me and i mean eka at the time just

12:36talking two years ago we just talking about container query is now landed uh as us uh to firefox and to

12:46chrome at the time 22 years ago i remember that so we talked about it uh during this uh when we

12:53face uh meet to face to face hey yay content query is now landed and stable we can use it yay like um

13:01and then we realized we don't have a platform to talk about this kind of thing that's why this

13:09that's why this podcast is like born but come back to yours uh to your point is like we read somewhere

13:18like from the web.dev and from the any twitter or your blog post that now this container query has

13:27landed with all the example and then now we can implement it on our um day-to-day life

13:34which is perfect and i still remember that i uh one of the talks that i gave like still related to

13:44web performance but when i say like you don't have to use a for that scroll you don't have to use like

13:50uh like sorry for responsiveness and you can use container query rather than use your fancy javascript to

13:57to control your boxes and do hacky stuff and now you can have your container query save a lot of time save

14:05performance so thank you that's i can relate so conceptually easy and now it can it could the

14:13implementation could be so many things and from my perspective anything that is uh a new technology

14:22uh new api uh release i i relate that how can i save or make the site more performance that's always

14:32uh my basic stuff uh to go when i see this css web um how can i make the site lighter that's it

14:41awesome so yeah you're looking for performance advantages in all the new features like ah

14:47what can this do to make it easier on the browser and when it's doing a loop how can i make this

14:52easier on a browser when it first lays out the page and yeah there's a lot of yeah a lot of thinking

14:57we do about the machine uh to make the machine happy um and we do a little less of that bramus does a

15:04good amount of machine um making it happy but i like to let the engineers do that and then i'll just

15:10like do something weird and if it didn't work out very well i'm like that's not my problem i'm uh

15:15just trying to make something work here but yeah i could try to make people happy trying to be pms

15:19happy happy happy that's a challenge like better than making the machines happy and making the all

15:26different groups of people happy and uh you know i think the tricky part with css and ui like uh you

15:33mentioned about conceptually easy things like what's conceptually easy for humans is uh really different

15:39from what's conceptual what's easy for machine like uh for humans humans uh like on on the surface level

15:47we tend to think visually so if we want to make things uh go here to here we just slide it that's easy

15:55and sometimes it carries over to a web or digital ui as well and there's a perfect example about this i think

16:03like uh when i first learned css uh like animating uh height height to auto i think easy peasy yeah

16:12you can animate easily from uh whatever two two rams to 10 rams it animates perfectly and then so uh you

16:21can animate from two rams to whatever the the the block block height is but it turns out not that easy

16:28and it just recently shipped now in 2024 i think yeah that's an image to hike auto yeah yeah so that's uh

16:39i think that's a perfect example of um conceptually easy thing that is actually not easy

16:45yeah another example for it is a the parent selector that you always wanted like oh yeah

16:53the parent element i want to select the element that has the other thing contained inside of it

16:56we've been struggling on that one for for 20 years before browser engineers figured another way like okay

17:02this is how we can people keep requesting that but uh the the browser programmers uh say well it doesn't

17:09work like that that their program runs from top to bottom all right you can't but the cool thing is

17:15that um the original request was i want a parent selector and the thing that we eventually got the has

17:22selector is way more than that um because you can select siblings you can you can go up down in all

17:29directions in the dot tree um so that's that's also cool where we often hear like a request

17:34and then then we think about it together with our team of engineers to get over the css working room

17:39and then the solution that we come up with like solves your problem but also solves way more than

17:45the original problem um another another example for it is for example um uh variables we all we all

17:52wanted variables in css yeah but the answer to variables in css are not variables no they are custom

17:58properties custom properties the way that we have variables in css is by having custom properties

18:04and the cool thing is because they are properties they inherit you can change them as they inherit

18:08onto siblings and combine it with all the selectors that we have you could say well if this thing has

18:13five children then the dash dash gap is going to be two rams instead of one ram or whatever and it's

18:19yeah it's it's so cool the the simple problem but then we have the solution which took a lot of time

18:26but the solution like opens the gates to all kinds of craziness that you can do with it

18:31yeah now css have functions right yeah it's something that's currently being prototyped

18:40and container queries gave away to scroll state queries and gave away to style queries and yeah so

18:47people just wanted to query the container they're like how hard could it be i want to quit and then we're

18:50like let's give you that plus a whole bunch of other good and like miriam suzanne likes to say containers

18:57they know stuff and now we can ask them what they know yeah okay okay now maybe let's talk about css rap

19:09maybe uh adam you you want to do a rap about css rap i mean what is it said yo the web's evolving ain't

19:17no time to snooze css rap 2024 drop on major news components stacked high precision in the game feel

19:24size and flex and putting pixels to the shame hide out of flow and no more rigid lines exclusive layers

19:29building intricate designs style highlights making text pop and clean anchor position in living the

19:34developer's dream

19:35oh we're talking about like performance things there's some like really cool performance things

19:53we had to overcome in this page there's even some that we couldn't fix uh and then one of the things

19:58uh that i think is uh was really highly desirable by people is a scroll spy so that's like as you scroll

20:05down the page and the the dinosaurs following along on the uh yeah yeah the map on the right and it

20:10auto expands the the details we see animations that are very still stateful yeah normally this would

20:16have taken us a whole bunch of javascript and that one's all css really i didn't realize that it's

20:22i know that i know the dino but i don't know that it is it is it is just css i think there was one change we had to

20:34do so that because we wanted to trigger the open and close of the summary details and we had to use

20:39javascript to do that why it's not yeah yeah why is your chrome dino not moving i don't know what

20:45what browser is this what process is this uh uh maybe prefer prefer reduce motion enabled maybe no that

20:51would have stopped some of the other ones i don't know he's skateboarding in my copy updating right now

20:58oh and you're you're even in canary and it's like having issues yeah i'm in canary hi what regressed

21:05that's a new bug we found a new bug hey he's skateboarding in mine

21:12it's also skateboarding in mine you can share your your uh can you share your let me let me check what

21:18the chrome is doing oh yeah it's skateboarding in mine so it's cannot it's not working uh it's working

21:26in canary for me so here we're browsers fun right yes it's rotated and then translated it looks like the

21:35scroll driven animations just not kicking in on it at all yeah what happened maybe i don't know do you

21:43have like battery safe safe or uh like power mode safe oh yeah something that's like reducing

21:50maybe this is your battery you know stuff that you talked about earlier adam please please someone

21:59share your screen i can i can i want to see i want to see but the cool thing about the the dino

22:07breaking is that like it was a little extra effect that we added using scroll driven animations but it

22:13wasn't supposed to be skateboarding across the uh viewport as well not just in the table of content uh go to

22:23scroll to top scroll the top this way yeah there's another guy over there yeah oh yeah particles at the

22:33very top yeah from left to right very top yeah yeah let me share screen oh i think you have reduced

22:42okay yeah that's right which is pretty cool right because it's a feature people that say that hey

22:52we're not fine with all these things flying around yeah in css we can respond to that it's it's a media

22:57query okay gotta build for the people too gotta what do what do the people need what's the machine need

23:04what do i need it doesn't matter okay let's talk about the the css wrap itself uh

23:11what what's your motivation uh to do this every year what's the goal well we uh a lot of times

23:22different people have different moments at which they can go research and ramp up on all the latest

23:26stuff so a lot of people aren't watching all the features as they come out you know so we we might

23:31announce it um and we know our job isn't done as devrel if we just say hey there's new features in chrome

23:36135 uh go check it out we know that our job is totally not done we need to go give talks

23:41uh we need to follow up with developers as they use it find bugs and then continue we call it like

23:47ringing the gong or continue to share something with people because you never know what moment

23:52during the year someone's going to have time to go look this stuff up so css wrapped is we're assuming

23:58people are on vacation they're kind of chilling at home maybe they would like a digest something that

24:02summarizes the year's css growth into one place to go experience it and so we roll that up into this

24:09yearly thing um which is good because all the demos all the learnings we can kind of repackage it up

24:16and it's fun and cute last year's was like a book uh this year's uh was much more like an article oh

24:22wait no two years ago was a book last year was a blog post and this year was like a interactive long

24:28scroll uh scrolly telling yeah we did scrolly telling this year yeah yeah yeah yeah this is 2023

24:38and this is like 2024 so this is this is what you miss it's skateboarding and then there's another one

24:49here another one here yeah yeah yeah yeah it's skateboarding so oh yeah this year's theme is like

24:5880s uh pixel game retro game right kind of it was supposed to be uh like each section

25:07was like a different biome like you can see one's like arctic another one is like a desert

25:11um and we had a designer we were working with and um yeah it's like as we as we evolved as we

25:18continued building so like i built a prototype and then the designer designed and then they did stuff

25:22and i did stuff and bramis did stuff and as we just kept going it just kept we let it be very organic

25:28uh the concept of it ending up being so retro and 8-bit is kind of an accident um that's also

25:35because i like retro stuff so it was easy to be like ah let's make it dirty um so yeah that was the

25:43motivation there yeah and there was a bunch of stuff we didn't put on there because we didn't want

25:48to put on this yeah yeah do you use intersection observer for this like to detect this section and

25:57so the the section there on the left can announce its view timeline it can name it and be like i'm

26:07the scroll driven animations view timeline uh and that really just takes its whole div and kind of

26:14its intersection with the scroll port becomes a timeline uh that other things can say i want my

26:19animations to be powered by that scroll driven animation timeline over there and that makes

26:24the little snake grow for that item because it's observing the scroll position of the other document

26:31content as it goes through the page including this active line like this yeah that active line is also

26:37dss yep the only javascript in that is to open the uh accordion in the right moment so if you scroll up

26:43up past scroll uh it'll automatically open the one that you're inside of and that's that's the only js

26:49oh industry yeah that's a really popular component is a scroll spy uh they're also going to be made

27:02easier with carousel uh so we have css carousel coming out in chrome 135 and we'll be able to

27:08link up a a little side element with the actual content uh really easily uh through there as well

27:15so i'll have multiple options for these really cool interactive connected experiences

27:20so why dino is it dino right is it the dino and why for um you chose the story of forest mountain and the

27:34see this time because this is so different concept from last year 2023 2023 yeah this is all about

27:42color and typography if i remember like yeah as you can see last year we had uh this group

27:48architectural foundations typography color and so on and so on and then this year we also tried to to

27:55group them and then we we quickly landed on this idea where we have like different worlds to explore

28:01different scenes to explore um and like we we did a big detour because then suddenly we were inspired by

28:08um a racing game i think we wanted like to have this 80s retro yeah rad racer yeah yeah or like you

28:16you know the classic mario uh

28:28stage one is uh on on on land the original mario bros yeah yeah and then the third i see like there are

28:39different worlds yeah and so eventually we i think we quickly settled on the pixel style art like to

28:47create different types of worlds we want to like to have to have a car race i think but that turned

28:53out to be too difficult right because when you're brainstorming you're like all out oh we wanted this

28:57we wanted that we wanted that one and then we we toned it down again and and of course we had to

29:03drag in the chrome dino because it is pixelated right so yeah we could not not have it so

29:08is there any easter egg here that we don't know

29:13did you plan any easter egg uh well if you

29:17we didn't plan one but i think the most fun one is you can make

29:21um the dinosaur kind of dance if you just scroll up and down back and forth

29:26he'll sit there and dance you know it's like oh so you can make him shake his butt uh you can

29:32also do yeah i don't know if that's the easter egg uh there's plenty of like oh there's another

29:38easter egg when you go to the mobile view the menu icon is a hamburger that's kind of like a

29:43you know it's like oh it's a hamburger menu yeah oh yeah yeah we we noticed that

29:50in our past episode which i saw leah verus site yesterday has a hamburger on it i was like oh

29:55i wonder if leo was inspired by our hamburger to turn hers into a hamburger

29:58well now about what time some restaurant make a hamburger that

30:05actually looks like hamburger menu menu

30:09let's see if i can find our prototype too oh yeah here we go here's the 2024

30:15wrapped prototype so i was prototyping in a code pen while the designer was going

30:20yeah like bramis was saying one of the original ideas was like you're going on a road trip and so

30:26your first part of your trip might be through the desert area and you've got these stops to make

30:29and so you would stop along the way at these sites to see in the desert area and then you would move

30:33on to the next area um so we were trying to create this feeling of traveling across all of

30:40these territories or all these biomes and you'll see in this one uh oh here look you still don't have

30:45scrolls uh you probably have yeah prefers reduced animation on there's a bunch of scroll driven

30:50animations you're not seeing there oh okay let me

30:53um so yeah you'll see a different variant of the of the dinosaur going to where it's much longer

31:01like he goes across the whole page as opposed to right now it kind of goes through sections and

31:05stops anyway it's funny oh but he might not do proper type oh see yeah and then there's the car

31:15it's supposed to be moving this is the car yeah yeah so he should be twisted and driving along the

31:19thing but it looks like uh i see yeah i don't know where to change that settings

31:31anyway how you you um decide what what css feature do you want to uh do in css wrap or every every every

31:45every new css feature you uh categorize in that uh like uh like this like for uh component and and

31:54and for uh interaction developer experience yeah we we had to limit ourselves right because if we

32:02wanted we could have like doubled the amount of content which would also would have meant that we

32:06had we had extra work to do and time is always tight right so yeah um so i um i think if in the

32:14end we went to uh to having the cutoff point like okay we shipped this in chrome this year that was a

32:20cutoff point and we made some exceptions for some features that um were uh baseline uh this year they

32:27were like okay these features now available in all browsers and it's i think it's definitely worth

32:31mentioning so we're gonna include it um i think the the one exception on that is um scroll driven

32:37animations that we covered on the website because we had it in chrome in 2023 but we did feature in 2024 on

32:45our css wrapped but that's because uh i published a video course uh with 10 episodes where you can like

32:52learn all about scroller animations and we thought it was worth like uh put some extra attention to

32:57that by including it on css wrapped but yeah we we did have to make a like a cut somewhere um because

33:05there's so much cool stuff there's so much going on in csland yeah it's like a theme right uh last year

33:13uh in 2023 uh css wrap in 2023 there is um like color uh typography and now uh

33:22it's yeah it's it's it's more than more i feel like an impression component but the the highlight

33:31is scroll different animation for me i like the scroll different animation that's the most i know it's like

33:38view transitions are pretty cool too don't go all in on it for you transition yeah

33:44yeah there's a lot of interactions thing related to scrolling and so it's it's really cool what you can

33:52you can do and like a common type of feedback that we get from people like especially when talking about

33:57scroller animations it's like yeah but i have this javascript library that i can use like why should i even

34:02bother with css or the new feature in javascript it's like well yeah now you have a built-in thing

34:11in the browser and it's but it's like it's true power is gained by the fact that scroll driven animations

34:18are powered by regular css animations or the web animations api and that technology already knows when to

34:26hardware accelerate a certain property like if you do an opacity animation a translate a scale whatever

34:32that all runs on the compositor so it's crawl driven animations being built into the web platform you can

34:38have harder accelerated animations driven by scroll that run off the main thread and it's like so cool

34:46because then your main thread can do all other stuff because your main track can only do one thing at

34:50the time right so yeah it's really exciting uh that one you have like this visual thing that you were

34:57already able to build but now you can have it in a very performant way um yeah that's why um with this

35:06like bunch of week like in the future like upcoming after this is uh become a baseline so the store

35:14different i mean it's like baseline perhaps next year that means i can ask uh my team let's get it out

35:24all this javascript that you don't need to just make this animation anymore get it out why wait till

35:31baseline i mean if it's uh i guess it just depends like some teams are like the the scroll animation is

35:36required and you're like what about users with prefers reduced motion are you going to make them get

35:40scroll no no we won't force scrolling them okay what about users with javascript disabled how are

35:45you going to give them scroll animation oh they don't get scroll animation either so then how come

35:50it's so weird for me to say that like scroll animation is nice to have you just told me two

35:55different groups of people that you think it's okay not to have why not a normal person and then we can

36:00get rid of the whole huge library and over time it won't be an issue and users without javascript

36:06enabled start to get scroll animations so that's huge um anyway

36:11and i think there's a polyfill right for scroll driven animation so i'll just dynamically look

36:22the polyfill if if if it's really really necessary there is a polyfill but it comes up with a few

36:28asterisks like um it doesn't support all of the syntax and you need to you need to put your css in a

36:34specific location because only then the polyfill can like find your code um but the biggest asterisk

36:42quid is is that that yes you are um not having the benefits of the the composite animations in that

36:49case because all the javascript that is required to pull fill it runs on the main thread so back to

36:54your main thread animations and that is a trade-off that you have to make as a team right like are we okay

37:00with not shipping the animations at all to browsers with no support or or users that that would want

37:06it um or are we okay with actually then loading up the polyfill in those older browsers um which

37:13general result in a perf hit so it's it's like yeah it's straight of it yeah yeah sure like everything

37:20i can i can i can assume that some people really want the animations to work on all on all browsers

37:26yeah you you can opt into having the polyfill and but do note that it comes with a with a cost

37:32well if if you uh if you use external javascript library it's it's gonna run on the main thread anyway

37:39yeah exactly that's also one of the things that you need like there's always like yes but and then

37:45there's another yes button respond to another yes but it's like the golden answer it depends

37:51that's the only honest answer on the web it depends yeah it depends okay okay

38:00is there any uh like um success story or uh impact from uh css rep uh website that you receive maybe like

38:12testimonial or something i mean there's a lot of appreciation i think a lot of people didn't know

38:21certain things could happen and uh it's it's nice this is why listicles you know like the popular like

38:27five things that are new this month in css whatever number three is gonna blow your mind number five is

38:34really ugly and gross you should don't smell number five you know um and everyone's like what i have to

38:39smell this now and you're like i just told you not to smell it you weirdo okay um but people like

38:44these because uh it can be hard to hear about these one by one but if you get to see them in a digest and

38:50see them all summarized demos with with the browser support right there on there um that can be really

38:55nice for people especially as we kick out to deeper learning um so i think we got compliments that way

39:01the side nav um you know being a scroll observer a scroll spy and being mostly css driven has been very

39:07inspiring for a lot of people because that's a very common component to put on a blog for example

39:11right you're like i wrote a blog post and now i have a table of contents and i'd like that to be

39:15linked up with the content you're like oh here comes a javascript library uh not necessarily

39:20there's some features which really surprised people too like they had no idea like field sizing like

39:25one of the first ones on there oh yeah um people are like i have a whole javascript library that does

39:30this so that when i type into text inputs it grows and i'm like cool get rid of it now here's a one

39:35line of css that does it now yeah we didn't know about it actually so we had an episode about css wrapped

39:41and we try it we tried live on air like we were like we we just typed and uh hit line break multiple

39:51times you know what i really like during the early material design i think but we used to

39:57have to use uh you know javascript what i really like about this feature is that like it's not one

40:03of those big fancy features where it's like view transitions scroll driven animations but it's like

40:08this one little thing that got added to the web platform but it has a huge impact because you can throw

40:14away thousands of lines of code that did it or 500 lines of code or whatever like embrace the platform

40:21use the declaration boom you have it then same response i always get also with uh smooth scrolling

40:27where you set the scroll behavior smooth and then you click a link in the page and it scrolls down

40:32and if you if you mention that at a mainly javascript focused audience they all go like

40:39what what what just happened one line of code one line of code okay very nice have you remember that

40:49the days like in 2000 perhaps 2015 2014 where the web is like love to use sliders like they call it

41:01slider revolution where these animations that that that make the sliders so fancy and

41:09text flying in there that's very very heavy no no no this is what we call like in wordpress what

41:17is called a plugin called slider revolution where the slider can just like like 3d animation it's

41:25got webgl all sorts of textures and layers animating yeah yeah and it's so heavy but people love it at the

41:35it's got the time and now nowadays like in fact no yes something like products effects also after uh

41:43that time um but yeah those um those are very very very heavy javascript and just to load that

41:51uh if i see a website that still use it is just load the site like only for the javascript to load that

41:57that requires at least 1.5 1.6 megabyte the javascript file only not to mention the the image itself so

42:12um yeah like i'm right now like preaching to get rid of all those javascript just move to what the

42:21platform gave you and yeah css just share the link in our chat here maybe you can present it on screen

42:30but like the parallax effect that you mentioned this is possible with scroll driven animations

42:36where you say like okay if this thing is entering this one you have to scroll horizontally but if you

42:42look like the images move a bit inside so yeah if you scroll it slowly yeah the images oh yeah

42:48and if you hit a little css yeah it's just a little eye icon there at the bottom right

42:56you can see the code that was used for it

43:00and it says the images yeah blah blah blah and it's like that that's an animation that's all you need

43:07for a parallax effect oh wow it's cool right very cool

43:14wow that's one of the things that i really love about the web is that um if you if you look at it

43:25like for for over a longer period the web platform always catches up we always had these things that

43:31were first built in user land like we used to have flash to play video or to do animations on the web

43:36now we have video element we have streaming video and we have css animations we have weapon amazing

43:41we have transitions like all the stuff catches up um the oh i'm drawing blank here adam help me out

43:49what are some other examples oh are things catching up i mean stuff from jquery that wasn't going to

43:55say like like all the whole selector engine uh that jquery of like first landed well we have that now

44:01in in javascript document of queries for all features yeah they're in the native language yeah

44:07functions mix-ins uh variables like yeah the platform always catches up and admittedly sometimes

44:15it takes a bit of time because we have to think hard about it um but in the end

44:21yeah that's six years or something like that um yeah right now it's like pop over like the model

44:28pop over and also um more web component uh landed as well like um but it's it's still getting

44:36improved like we we have pop over now but now we have dialogue anchor positioning yeah anchor positioning

44:44and then now we have pop over hints that landed recently we're gonna have like a tooltipping behavior

44:49where one pop over doesn't close the other one and then we're gonna have interest invokers something

44:55that's coming in the future where we can trigger the pop over by just hovering the link or the button

45:00it's like it's coming to a full circle there it's like cool you have all these little things and then

45:06together they form like this really exciting thing

45:11and native css nested you need to mention it native css is huge

45:16yeah we have really enjoyed that one for that on lock like he was one of the driving forces behind

45:22that one i was i was like uh i just kept poking thank you thank you for that that's really really huge

45:31huge improvement i think so too and we're still making it better so bramas has made posts you know

45:37just in the past few months i think one of them is in uh css wrapped actually one of them is

45:41developing experience css on nested declaration yeah that's the one there yeah and we have more

45:46improvements coming too where you can put an at starting style inside of a pseudo uh element so you

45:51can have like dash dash before or colon colon before and you could do it at starting style inside of

45:56of there uh we're making more manually adding and removing class name css class name because uh we

46:03already have starting style right yeah that one's really helpful for a use case like that yep so yeah

46:09we're still making it better and there's even more improvements coming i was just talking with uh

46:13folks yesterday who were like i ran into a bug with nesting and we're like yes that is uh it won't be a

46:19bug eventually so we're kind of as we as we find more and more it's more like uh we started simple

46:25and now we're teaching nesting how to get more complex and handle all of the edge cases and

46:29it's cool it's fun work okay cool

46:33so much stuff uh

46:39what is your favorite from

46:432024 the your most favorite just one and just one just like which one is your maybe we should guess i

46:54i think adam is going for the scroll snap events

46:57i would like to say that one because of how involved i was with it and how many use cases i

47:04have for it but if i'm being honest about the one that i use the most that just continues to creep

47:10into all my little prototypes it's scroll driven animations and i would have thought it was view

47:14transitions uh which i still i love those a ton but i genuinely think scroll driven animations is

47:23freakishly capable and unlocks so many use cases like we don't even know about like we've already seen

47:29new hacks that come out where you can watch the thumbnail go across an input type range and use

47:33that with a scroll driven animation to power something else um there's just we are still barely scratching

47:40the surface what scroll driven animations can do um yeah it's it's the gift that keeps on giving like

47:44kizu has some very nice hacks with it where he where he managed to create um text that automatically

47:51sizes to the available width of the containers if you shrink the container the text automatically like

47:56shrinks its font size and it's powered by scroll driven animations like

47:59what oh okay yeah it's it's a very clever hack like every time i look at him like

48:07what how does it work and then like okay so clever yep

48:12so bramus what's yours mine's scroll driven animation well if you pick that one then i'm gonna pick the

48:19other one with just view transitions yeah i think view transitions is um a really exciting one because

48:29people have always wanted to do more things and the way you used to do it before is that you you cloned

48:35the element and then you animated it that's but like accessibility wise and you had like two copies of

48:42the thing in your dom which is like uh weird and like it relied on all sorts of hacks and now we have

48:47it built in um and it's like already this point where it's like okay cool i can do some things with it

48:53but i think the the real power that we're going to see with it is going to come this year um where we

48:59are going to to experiment well our engineering team is experimenting with it right now and we're going

49:06to unlock um scoped transitions where instead of doing document of start review transition to to like

49:12start the view transition for the whole document you can select a certain element and then say

49:17element dot start view transition and the view traditional only run on that specific little dom

49:23sub tree which is pretty cool because then you can ship it like like something like a chat

49:28component widget whatever with view transitions without interfering with all the rest of of the page

49:35or like client-side router so it's going to behave just like client-side router you know you you have

49:43the shell intact and just uh replace the content or whatever yeah um speaking of by the way um clients at

49:53router um people always want to use react and the react team they have an active br

49:58in the works where they are experimenting with view transitions and we are supporting them

50:03in their effort which is also pretty cool uh and then also the thing that that lennon and chrome last

50:08year and is also available in safari as of 17.2 if i'm not mistaken are across document navigations

50:14where you can have a view transition between two pages by simply clicking a link or submitting a form from

50:21the one page to the other and it uses the same building blocks and the same type of logic

50:27as the same document view transitions the only difference is the trigger in the same document

50:33version you call document.start view transition but in the cross document version you just click the link

50:39it's like oh that has been really great for the for the past 30 years so it's like embrace the platform

50:45cross the cross document yeah yeah we have this it's just like and now uh firefox is left out at the

51:00moment they just the regular page navigations yep uh but newer browsers will animate yeah at worst you get

51:09the status quo experience which is you click the link and then the new page loads and it swaps out

51:14and if your bravo speaks view transitions well then you get like the nice moving thing and of course you

51:20can then wrap it again and add first reduced motion media queries to respect that and all sorts of stuff

51:26so it's it's it's really cool um that this is powered by css on order hood yeah you can go to my

51:33website nerdy.dev i've got scroll driven animations view transitions dialogue elements

51:39i mix and match a whole bunch of this stuff in there and so you can visit my site from firefox

51:44and see what happens but if you click that card you'll get a view transition there that'll make

51:49the card morph into the next page using uh crosstalk review transitions so no javascript involved there

51:56and then if you keep scrolling down you'll see i'm using scroll driven animations to bring in people's

52:00comments if you go down to the very bottom there's even so anyway uh i think about a lot of these

52:05things like what's my site my site has posts and like some content on it um but i can enhance that

52:14from just a basic document with all these different things i can do and i like thinking about it in

52:19those layers i like thinking about uh helping people in those layers too i'm like here's the base

52:24experience um if people are cool with animations i add the animation so i always do it very additive

52:28some people are like i remove animations if you don't like animations and i'm like no i don't do that

52:33i add them only if you're cool with them uh and it's fun it's fun to have my own site to do so but

52:39yeah those animations there's you navigate between stuff is all css no javascript wow very nice

52:49i cannot make yeah you keep mentioning baseline and i'm like baseline is cool like if that's how

52:54your team is working and you all are agreeing that way but it's also not difficult and very acceptable

53:00to upgrade it for the browser that can do it you know so just like use my site as an example if you

53:05want to where you can even browse it with javascript disabled and you still get the animations and stuff

53:10right so it's like not only are you uh minimally giving these experiences and conditionally applying

53:17them you're actually bringing in more people to the experience too by removing the javascript and

53:21just kind of so many things to think about right yeah i think one of the points where people um

53:26possibly misinterpret baseline is when a feature is not baseline that does not mean that you can't use

53:33it when the feature is not baseline it means you should look at the feature itself and then make an

53:41educated guess on whether you want to use it or not and things like text wrap balance and whatever it's

53:48it's not baseline or maybe it is baseline newly available but you can use it at worst case the

53:54declaration won't be parsed and it won't have a visual effect but at best case if the browser supports

54:00it great they'll get the nicer version um so yeah if something is not baseline you you have options you can

54:08polyfill it you can treat it as a progressive enhancement and say like maybe after all we're

54:14not going to use it because it's a lot of work to implement and that's fine as well then but yeah

54:19if something is not baseline you can use it but you'll have to assess that yourself uh together with your

54:25team yeah yeah nice okay well i want to know which is your favorite from css wrapped each of you

54:35uh you have to call me your favorite one

54:37ifan what's your favorite well i did say like uh in in this uh in this css wrap uh 2024

54:48that gets my eyes scroll different animations um that's that's one thing um from 2023 i learned it's i

55:01i haven't used that much but i learned so much about the color level four the color that what uh like

55:09oh k lch okay lab as i i don't even know what it is before and i just thought you can't do it right

55:18now with that kind of thing yeah um it's confusing uh about this color mix um haven't used it to be honest but

55:27but i know that it is there right now um and learned so much about this color mix but yeah

55:34and also from from 3023 like those new color spaces display p3 color that's like wow so cool

55:42like i always thought that hot hot pink was a hot pink turns out there's a hotter hot pink out there

55:47yeah those wider gamut it's like cool yeah yeah uh for me and maybe maybe ekka uh absolutely it's uh

56:01uh view transition because uh yeah uh i know i can do like server render or uh traditional request response

56:11website to uh to behave or to experience like single place application right so yeah that's that's a win

56:21win-win solution for me are you using them on any of your projects right now

56:29um not yet but uh but uh i uh i try to use that in in uh for for the demo uh uh for the demo for

56:43speak or talk uh in in some uh event yeah gotcha cool

56:53so that's a that's another one i feel like view transitions is another one that's pretty easy to

56:57progressively enhance because you're like all right i'm gonna take the thing you clicked and i'm gonna

57:01put it over there with javascript uh and you're like cool i i put it over there with javascript and

57:06i'm done well you're like actually if all i do is wrap this and say if the browser can do a view transition

57:11then do it if not so i'm still putting the element over there no matter what just one of them gets

57:16wrapped in a function and one of them doesn't and so if the browser has it they see motion if there

57:21isn't it's just the same as it always was just like uh bramos was talking about with like page

57:25navigation the status quo is still there we still swapped the elements it's just in one scenario it

57:31had uh motion and the other one it didn't so it's kind of fun to again yeah progressively enhance if

57:37that's something you and your team are are equipped and ready to do yeah uh i have planned to to implement

57:45that in our um video podcast uh website so uh it's still a server render and when uh people click

57:53user click uh the the episodes uh they go to another page and it should uh animate

58:05yeah yeah it should transition and for first for slide because i love animation in my slide so now i can

58:15do it with uh like uh tools like uh slide.dev or yeah or or any kind of website that have um transition

58:27animation yeah yeah or use morfol here i'm sharing this this is a uh astro site that you can build it's for

58:34making slides and you don't have to name anything it's got names for things already and if you just

58:40go build your slides and then you click between your slides it will morph your code snippets it'll

58:44morph your titles um i think you can try it out there it's smashing transitions.netlify.app

58:50is that one still going oh yeah wait was that still running yes are they no are they view transitions

58:59no i don't think so something old in there

59:09this is motion oh there you go oh there you go oh there you go okay between the rocket and clapping and

59:17the table yeah exactly sorry if i click there is no transition but if i um push the arrow button yeah

59:27keyboard it's transition why why is that one book book another one might be like cash or something yeah

59:38maybe cash yeah maybe cash oh

59:42because i think i have pre-render in there with like speculation rules and a bunch of other stuff so i'm

59:49curious what's failing maybe i need to add that uh that check that looks for an element at the top

59:56yeah because look i'm pre-fetching the next page

1:00:00i don't have the meta tag anymore so i've definitely upgraded it since then

1:00:03do i have the app rule oh the app rules not at the top maybe is that the deal

1:00:12sorry at view transition the the at full gets hosted that returns navigation although that one gets

1:00:20gets hosted to the top okay oh because it's currently almost at the bottom of my style sheet i wonder if

1:00:25if that's why oh so it's space of this seems to be some kind of race condition i just tried it

1:00:35myself and even when i click the arrow sometimes it animates sometimes sometimes it doesn't yeah

1:00:43let's try more re-render settings

1:00:50here try this version for new books to think about

1:00:54let's see is that one animating better that one's animating a little bit better it's still

1:01:03still needs it's like you have to wait if you wait on the page before you hit the next page

1:01:09it behaves better it's almost like i give it some time to pre-render

1:01:15and when i'm talking on stage it's a little better right because uh uh-huh i i have the

1:01:20time it's gonna take a while yeah there you go you saw those morphs so yeah each of these slides is

1:01:26its own web page you build them in astro as individual slides and then it does all the work

1:01:30with view transitions to make the animations morph so that's free and open source if you all want to

1:01:36use it yeah and the cool thing is that that you built their atom is that like it automatically

1:01:41works so so it figures out what is the title on the previous slide and then we're gonna morph that

1:01:45one to the title on the next slide and then if there's a code block i'm gonna move the one code

1:01:49block to the other one it's like yes and it i think you've done it with with the with some css

1:01:55is it scroll snap events uh between like between one uh code block and the other that one's scroll

1:02:01state queries yeah so that's how it knows which one is snapped yep and that's also progressive

1:02:05enhancement so if you're on a browser that doesn't have those it just doesn't do the little focus

1:02:10thing okay oh but yeah bremus is mentioning i used the nth of syntax to get that one done

1:02:15so that i could select the unique uh h1 and then uh if there's multiple code snippets i make sure i

1:02:22grab uh just two or three of them and yeah the end of syntax was clutch for that okay yeah view

1:02:30transitions very cool but yeah that one's all css view transitions no javascript on that either

1:02:35yeah yeah it's very cool how you navigate this uh like horizontal uh scrolling when you present

1:02:43cross snap cross snap events oh when presenting no i mean like presenting next between slides put one

1:02:50pages between the the yeah quote snippet like this so you're asking how do i navigate between them

1:02:56while i'm presenting yeah yeah just yeah we'll stand on stage oh i'll stand in front of the computer yeah

1:03:03i'm usually in front because uh those those little red dots that are on there too those are all demos

1:03:08so if you hover over red dot i use i would open those in a tab i see and then i would go through the

1:03:13demo on stage and yeah open up those or something yeah this is the slide and the demo both of them yeah

1:03:21yeah very cool very cool maybe i can steal this yeah i want you to that's why i'm like hey steal it this

1:03:30is really it's i find it to be a very quick way to make really nice looking slides um but it does seem

1:03:36like i'll have to backport some of my enhancements from my talk in france a few months ago i made a few

1:03:42changes and they could be upstreamed into the open source hmm yeah i'm curious why you guys uh you choose

1:03:52uh astro for the css rep website any particular reason we uh that page would have been really

1:04:02really long html file to edit if it was just one file it's a