Less Cruft, More Power: Leverage the Power of the Web Platform

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

FAQ

Using CSS for animations can reduce the amount of JavaScript needed, improve page performance, and make it easier to create accessible interfaces. CSS animations can also progressively enhance user experiences without affecting non-supported browsers.

Anchor positioning is a CSS API that allows developers to connect and position elements relative to each other without additional scripting. This technique simplifies creating complex UI components like menus and popovers by handling positioning logic within CSS.

CSS can reduce third-party dependencies by leveraging built-in browser features to accomplish tasks that would otherwise require external libraries or JavaScript. This reduces maintenance costs, improves performance, and simplifies codebases.

Examples of scroll-driven animations include text flying in from off-screen, images transitioning from grayscale to color, elements scaling and changing opacity, and creating scroll-to-top buttons without JavaScript.

Separating logic from styling is important because it improves code maintainability, readability, and performance. Styling should be handled by CSS, while logic and user interactions should be managed by JavaScript. This separation reduces complexity and makes it easier to manage large codebases.

New features in CSS that improve developer productivity include scroll-driven animations, the popover API, anchor positioning, and trigonometric functions. These features reduce the need for JavaScript, enhance performance, and simplify the creation of complex UI components.

The popover API handles accessibility by providing light-dismiss functionality, default focus management, keyboard accessibility, and semantic bindings between triggers and popovers. This ensures that popovers are easily navigable and usable by all users.

The popover API is an HTML attribute that allows developers to create layered UI components like dropdowns, tooltips, and menus with built-in accessibility features. It simplifies focus management, keyboard accessibility, and positioning without needing additional JavaScript or third-party libraries.

Upcoming CSS features to look forward to include wider browser support for anchor positioning, sibling index for staggered animations, and improved styling for form controls and dropdowns. These features aim to simplify web development and enhance the capabilities of the web platform.

Scroll-driven animations in CSS allow elements to animate based on the user's scroll position. By using CSS keyframes and properties like 'animation-timeline' and 'animation-range,' developers can create dynamic effects such as text appearing, images transitioning from grayscale to color, and elements moving into view.

Una Kravets
Una Kravets
30 min
15 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This talk focuses on the powerful features of CSS and HTML that can level up developer skills and enhance web UI. Scroll-driven animations, popover API, and anchor positioning are explored as ways to create dynamic effects, improve performance, and increase accessibility. The talk also emphasizes the benefits of building presentations with CSS and HTML, separating logic from styling, and leveraging core platform features. Wishlist features for the web platform and the challenges of pushing updates across browsers are discussed.

1. Introduction to CSS and HTML

Short description:

I'm here to talk about the web. I saw that a lot of you were React developers when you raised your hand earlier. So I'm here to talk to you about a few really powerful features that will level up your developer skills, and those are CSS and HTML. CSS is getting a lot more powerful and a lot more declarative. The best way to level up your developer skillset is to take advantage of modern UI capabilities. By the end of this talk, you will also be a true believer.

I'm here to talk about the web. I saw that a lot of you were React developers when you raised your hand earlier. Who else here is a web developer or designer? Raise your hand. All right, my people. You're in the right place. So I'm here to talk to you about a few really powerful features that will level up your developer skills, and those are CSS and HTML, which I truly believe are the underdogs of web technologies.

And because they're so underrated, I thought it would be fun to make a little trailer for the web platform and CSS. So enjoy my little trailer. Can I get some audio? I'm a master of the universe. I am Adam. Developer. And defender of the secrets of my code base. This is my app. My fearless friend. Fabulous secret powers were revealed to me the day I held aloft my magic CSS. By the power of the platform. I have come. My app became the mighty battle. My app. And I became He-Man. The most powerful developer in the universe. So my voiceover career is a work in progress. But this, too, can be you if you master the powers of CSS and HTML. And specifically, CSS is getting a lot more powerful and a lot more declarative. So I think that the best way to level up your developer skillset is to take advantage of modern UI capabilities. And I think that this is very much true, but hopefully, by the end of this talk, you will also be a true believer.

2. Leveraging Modern UI for Easier Development

Short description:

So why care about CSS? It lets you separate logic from styling and reduces third-party dependencies. It also reduces maintenance, cost, and complexity. Another important point is that it makes it easier to build accessible interfaces. Today, I'll cover scroll-driven animations, popover API, anchor positioning, and if time permits, select. Scroll-driven animations are a new feature that uses CSS keyframes to create dynamic effects as you scroll. You can achieve various effects with just a few lines of code, making your codebases easier to manage. For example, you can make elements pop in or fade in as you scroll. It's a powerful way to enhance your web UI.

So why care about CSS? The first reason is that it lets you separate your logic from your styling. You don't have to mix all of that styling capability in your scripting where it doesn't make sense for it to live. The second is to reduce third-party dependencies. So a lot of these features that I'm going to talk about, right now, we either have to hack around or it's so hard to hack around that we just have a third-party module that we have to pull in and then manage that. And if that breaks or moves forward, it's just more cruft. The third is reducing maintenance, cost, and complexity. Again, with your code, whether you wrote it yourself, or with the third-party dependencies, which make it easier, also, to just build stuff, make your life easier, build things faster. But number four, which I think is a really important point, is it makes it easier to build accessible interfaces which I know is a big challenge. It's really important to care about web UI for all these reasons.

So today, I'm going to cover three features that I think are awesome examples of how you can make your life easier and reduce complexity in your codebases by leveraging modern UI. And the first is scroll-driven animations. I'll also be talking about the popover API, anchor positioning, and I'll do a time check. If we have time, I'll talk about select. If not, come find me after. But there's a lot of cool stuff on the platform. So let's start with interactions. Scroll-driven animations are a really cool new feature that has landed in Chromium and is currently available behind a flag in Firefox. It is a little bit more of an experimental feature right now, but I think it's a great progressive enhancement. So, as an example, here's a little demo that I created which uses scroll-driven animations to create this kind of round display with a little bit of a on-snap animation as you scroll through. You can also do things like this, where as you're scrolling this text is just kind of popping in this little block quote right here. You can have images appear using a clip mask. You can have things unfade from maybe a grayscale into color. And there's a ton of things that you can do with just a few lines of code using scroll-driven animations. So take the example of this block quote here. What I'm doing is, instead of having additional dependency, writing JavaScript to do this, I'm writing a CSS keyframe. It's a keyframe called fly-in where I'm just updating the opacity and the translation from negative 100 pixels off to the left, back to the center here. So that's all that this is doing. We would write this like a CSS animation where you say animation, fly-in, you call it, you set the timing of it, and it's a linear duration, and then the differences start here where I set the animation timeline to the view, so where this element intersects with the scroll port, so in this case, it is the view port. And then I can also set an animation range. So I want this to start at zero and then go to 50%.

3. Enhancing Web UI with Scroll-Driven Animations

Short description:

You can create scroll-driven animations to make elements pop in or fade in as you scroll. It's a powerful way to enhance your web UI. In non-supported browsers, the animations won't appear, providing a graceful fallback experience. You can also customize animations based on user preferences, such as reducing motion. Another example is creating a scroll to top button without JavaScript, using CSS animations to animate the appearance of the button. This technique can be used for other effects as well, such as overflow and scroll detection. Check out my colleague Bramice's blog post for more examples.

And at the 50% point right there, it's finished. So that's all it takes to create this kind of interaction. And here's another example with just these little boxes kind of popping in. So this one is animating scale and opacity. Same thing, just a couple lines of code. And I'm doing this towards the bottom of the screen. So I see these all over the web, and this is a website that might be familiar here. I notice there's a lot of scroll triggered animations on this site. So right here is one example.

We also have these photos popping in, and right now they use scripting to do so, and there's a bunch of transforms that happen in the web page. But you can recreate this effect with this technique where I have these key frames that update opacity and transforms, and as I scroll down, you see all of these nicely popping in, all the little tags here, just towards the bottom of the screen. So we can do things like this really fluidly now by leveraging the power of the web platform. And I talk about progressive enhancement because in non-supported browsers, you'll just get the existing experience where things scroll into view without the extra animation. But with this, you could just add a little flare. And you can also wrap this in a user preference query for prefers reduced motion, so you're not adding a bunch of animation for people who don't want it. So that would look like this, where you have add supports, animation timelines, scroll, and then you could have all of your content.

So another example of some things you can do is this effect, where have you ever created this scroll to top button? So this uses a technique where I'm actually setting a timeline name. That's another thing that you can do. So on the HTML, scroll timeline name, a root scroller. Then I'm calling the animation timeline right here by the animation name, and I'm animating it using opacity and display. You can now animate things from display none to display block. That's pretty cool. There's nothing that exists here. Once the animation starts, it will start to appear up here. You see my cursor kind of changes here where it's going from display none to display block. So that appears, and it also updates the opacity, and we can do all these animations, have it actually existing on the page, and create this sort of scroll to top button, no JavaScript required, which I think is pretty cool. I love talking about using less JavaScript. Some other cool things that you can do are overflow and scroll detection. This is where you can use scroll-driven animations as a hack, and I've seen some really cool examples of this. My colleague Bramice has a blog post all about this.

4. Leveraging Scroll-Driven Animations

Short description:

Using key frames, you can create dynamic scroll-driven animations without JavaScript. This technique, known as space toggles, utilizes Boolean values in CSS for styling. It offers a performance boost compared to conventional JavaScript scroll events, reducing lines of code and CPU usage. Partners have observed up to 80% code reduction and a CPU usage decrease from 50% to 2% while scrolling.

Roma Komaro does some really cool demos all around using techniques like this too, so check those out. But essentially what we're doing here is we're using the key frames to create a Boolean value. And here we're basically saying that you want the initial can scroll value to be zero, and then if there is a scroll, if there is a scroll that will then trigger this animation, update can scroll to one. So the scroller is itself. You're setting this animation up to detect scroll, and you're updating the Boolean value from zero to one which you can then use in your styling.

So you can do things like this now where you have this can scroll variable, you've set it all up, and then you have this line of code that's styling the visibility of these little indicator arrows. So they appear or disappear depending on if there's scroll or not. And what's really cool is I can show you this is all dynamic. This is all just dynamic in the browser. And as I run out of space here and there's more space, those arrows will appear. So all of this can be done with no JavaScript whatsoever using this technique which we are calling space toggles generally in the community. These Boolean values that can now be used in CSS using some of these capabilities, no JavaScript needed. Super, super cool.

Another benefit of scroll-driven animations is that there is a performance boost if you're animating values that can be composited like opacities and transforms. So rather than using JavaScript to create some kind of scroll animation, using these new APIs, whether it's CSS or JavaScript, is a lot more performant. And we've seen this from partners that we've worked with. Some really big updates. We've managed to reduce up to 80% of our lines of code compared to using the conventional JavaScript scroll events and observed that the average CPU usage reduced from 50% to 2% while scrolling. This is a quote that comes from Tokopedia from a senior engineer, Andy, which is wild, like, the amount of up changes this has allowed by leveraging the power of CSS. Yeah, pretty cool, pretty cool.

5. Enhancing UI with Popover API

Short description:

Using new APIs instead of JavaScript for scroll animation provides a performance boost, reduces lines of code, and decreases CPU usage while scrolling. The popover API is now available cross-browser, offering built-in accessibility and other useful features like promotion to the top layer, light-dismiss functionality, default focus management, and keyboard accessibility.

So rather than using JavaScript to create some kind of scroll animation, using these new APIs, whether it's CSS or JavaScript, is a lot more performant. And we've seen this from partners that we've worked with. Some really big updates. We've managed to reduce up to 80% of our lines of code compared to using the conventional JavaScript scroll events and observed that the average CPU usage reduced from 50% to 2% while scrolling. This is a quote that comes from Tokopedia from a senior engineer, Andy, which is wild, like, the amount of up changes this has allowed by leveraging the power of CSS. Yeah, pretty cool, pretty cool.

So UI components is the next section that I want to talk about. And has anyone here heard of the popover API? Raise your hand. Okay. A couple of you have, which is awesome, because it is now available cross-browser. Every single modern browser engine now has implemented the popover API so it is pretty much available for us to use. This feature gives us a ton of awesome features like built-in accessibility, optionally like this, and I'm going to go over those in a second. So now we have popovers on the web. I'm kidding. But really, this is what we're trying to create. We see these everywhere. They're in every UI. I call this layered UI because it's a layer on top of the rest of your page. Just even styling drop-downs shouldn't be this hard.

But we see this everywhere. So with popover, this is an attribute that you can put on an element. You get something called promotion to the top layer, which is a separate layer above the rest of your page. It sits next to your body so you don't have to fuss around with the Z index any more, which is awesome. You get light-dismiss functionality if you're using popover equals auto, which gives you that click away to close functionality for popover, and it also returns focus. You get default focus management. So you can have your popover be a separate component in another part of your UI, and when you tab into it, the next tab stop will be in that popover. So that's super, super useful for accessibility just in terms of tab focus management, and as you're building components, you often might have it as a separate element that you're using to connect to a button or something like that. We have keyboard accessibility that's also built in. So hitting escape or double-toggling will close the popover and return focus. And, finally, default component bindings that connect a popover to its trigger semantically.

6. Building Popovers Easily

Short description:

And, yes, you get all of this with just one HTML attribute. So to build a popover, super, super easy. Essentially, you need a button. And then you have a popover with the popover attribute and an ID. And then you get this, the ability to click away, dismiss. You can tab in. It's really flexible, this API.

And, yes, you get all of this with just one HTML attribute. I love the web. So we no longer need React portals! Yay! So dialogue is another element that's really useful here. I'll also talk about that in a minute. But with dialogue and popover, we pretty much don't need to have another special effect that has the ability to trickle up your components to your DOM. Like, this is built into the browser.

So to build a popover, super, super easy. Essentially, you need a button. Then you set a popover target to the element that you're using to open that to the popover. And you have a popover with the popover attribute and an ID. So that's it, really. You just have something that you're using for the popover. You give it a popover. You give it an ID. And then you're connecting it with popover target. Very declarative. I love that syntax. And then you get this, the ability to click away, dismiss. You can tab in. I can hit spacebar. I can hit spacebar again to close it. And all of that is built in. You don't have to manage all of those states. It's a lot of management to do this yourself. There's also manual popovers where clicking away is not going to close it. There's a button that I click here. And that gets a popover target action, and a popover target. So you can do a lot of stuff with popover. It's really flexible, this API. And you might already be using popovers, because one of the most popular developer websites, GitHub, is already using them in production.

7. Animating Popovers with CSS

Short description:

Here's one example of it, which is in the new menu. We have popovers now. But animating popovers is a separate feature. Currently available in Chromium and Safari, but not yet in Firefox. This allows you to have animation states for popovers without JavaScript.

Here's one example of it, which is in the new menu. Also in the PR review, a little opening, a little dialogue, that's also a popover. And they're using it with the polyfills. So that's how they're leveraging this feature, but also targeting older browsers, by using the odd bird polyfills. So check that out if you're interested in using this API today and making it work for your browser support matrix.

So we have popovers now. But animating popovers is a separate feature. And there's a few capabilities that have landed to support this. With varied browser support. Currently they're available in Chromium for a while, since last summer. They just landed in Safari, most of these features, like last week, in the latest version. And they're not yet available in Firefox. But this allows you to do things like have these animation states in and out for popovers. Which also wasn't possible before, because essentially you have to teach the browser what the styles are before they come into the page.

So it looks a little complicated. I think the best way to think about this is, OK, you need this before open state. So that happens when the popover is open. You're styling on popover open. But you have to have the starting style. So your starting style is, in this case, coming in from the bottom up. So it's going to be translated 20 pixels and going up. And the opacity is zero. Then you have your open state, which is sort of the resting, or default, state. And the exit state, which is going to be on this popover, which is going upwards, negative 50 pixels. So you write all of this. And then you use this allow discrete keyword, which lets you animate display. That was one of those things that was also new for this, animating the display to and from display none. So you use this keyword to enter this new animation mode and create this capability. You can do things like this now without any JavaScript at all, which is the menu navigation that we see very often, which you can also tab into, hit escape to exit. And this is all done also by just using a translation.

8. Enhancing Popovers with Anchor Positioning

Short description:

Popover works well with anchor positioning. Anchor positioning lets you connect elements without scripting. Use semantic roles for popover to be a menu. For focus trapping, use the dialogue element. Anchor positioning is an experimental API, recently landed in Chrome, and coming to Safari and Firefox. Set up an anchor name and connect it to your popover or another element. Position it with bottom and right. You can layer anchors for more functionality.

We're translating this layer on top of the rest of the page. This is a popover menu. You can tab through it. One thing to note is that popover won't trap focus. So that's just something to keep in mind. This will cycle back into the rest of the page and then go over into the next element.

So there's a couple of things that are nuances for popover. Popover also works really well with anchor positioning. Anchor positioning is an API that lets you connect two elements together. And that's a super, super powerful feature. Before I get into anchor positioning, though, I will say with popover too, it's important to add semantics yourself. So in this case, you want to make sure that you're adding semantic roles for it to be a menu. You want to make sure that you understand what is happening in terms of how it's connecting to your user and managing focus.

It's not focus trapping. If you want to focus trap, it's best to use a dialogue, which will inert the rest of the page, make it so that users can't interact with the rest of the page and force interaction with that dialogue first. With popover, this is great for things like non-disruptive content, drop-downs, tool tips, menu navigation, things like that, but there's also the dialogue element, which is great for anything that you want to trap that focus into. So, anchor positioning is a little bit more of an experimental API, but it recently landed in Chrome and I'm really excited to see commits from Safari and Firefox happening in the browser. I'm eagerly watching those commit logs. This is such a useful feature, and it allows for you to essentially tether these elements to each other without any additional scripting. So if you use popper.js or other APIs, you no longer will require that additional dependency to do this really complicated math to essentially create these effects.

So the way to create anchors is to set up an anchor name. So you set up an anchor name on this button, and then you use position anchor to connect it to your popover or to another element that you want to anchor. It does not have to be a popover. Then you can position it with positioning like bottom and right. So here we're setting the bottom of that anchored element to the top of the button, and then the right of it is lying to the right of the button. So you could do it like that. And you can do a lot more with it too. So one cool thing is you can layer these. Have you built menus? Who here has built a menu? Raise your hand. Okay, that's a lot of us.

9. Advanced Navigation with Anchor Positioning

Short description:

Create menus and submenu navigation using anchor positioning. Use position try to reposition based on viewport and available space. Adjust margin and order options with position try. Anchor to multiple elements. Use inset area for powerful positioning. Use English or logical properties. Utilize inset modified containing block.

I'm sorry. I have also. It's really easy to create these menus and submenu navigation too like this by using anchor positioning. And this is one way that you can really show the power of this feature because, so, say I have a submenu. I have it anchored to this menu. I can now use something called position try to reposition it based on the viewport and available space. So if I resize this, without any JavaScript, I'm actually having viewport detection built in here where I've essentially said that I want to initially position this to the left and at the top of that popover, and then I want to use position try options. If there's not enough space in that direction, then I want to change this to be at the bottom, so I'm essentially moving the top of it to the bottom of that popover. I can change the margin.

Here I'm adjusting some of the margin. And all of this can be done in CSS, no JavaScript needed, with anchor positioning APIs. So cool to see. So there's a few other features here where you can use position try options like I showed. There's a feature called position try order where you can tell the browser how to order these options, but there's also a few keywords that you don't even have to set up yourself to. Another neat thing with anchors is multiple anchors. So you can actually anchor to multiple elements. So in this case, I'm using the anchor function to anchor the top left to the bottom right of the anchor of this element, element number one, or anchor number one, which is right here, and then the bottom right to the second one, so anchor number two here at the bottom right. So all of this is like another way to use anchors. I've seen people create SVG effects to create little diagrams, dialogues, and tree views using anchored elements. So just one example here of a non-popover anchor.

But with popover, it's so great because you're in the top layer, so trying to get back to it is a pain. And there's a new layout feature that landed with anchor 2, which is called inset area. Inset area is super, super powerful. You can essentially just use English to say, I want to position this at the top and then span left. So I created this tool called AnchorTool.com that shows you how to use inset area, and I plan to expand upon this. You can also do this with logical properties if you wanted to use different languages and show how this works across different reading modes, too. So all of that can be shown. You can just copy and paste this for inset area positioning. And I also am showing here the inset modified containing block. I'm not going to go into too much detail here, but essentially, when you're working with anchors and inset area, you're using something called the inset modified containing block to position these things.

10. Exploring Advanced Anchor Positioning

Short description:

Visualize anchor positioning with different options. Use inset area for straightforward positioning. Combine features like trigonometric functions, transitions, and CSS to create unique menus. Explore the future of UIs with organic styles. Discuss upcoming features: invokeTarget and InterestTarget.

You can visualize it here with this tool. So you can see how there's a difference here from this block, start center, or from top center to top, which is also top span all. So it makes positioning really, really, really straightforward. And in this case, instead of using those bottoms and the margins and the calcs, you can just say inset area, top span left and have all of this work really clearly.

I mentioned those autoflip keywords. Position try options is something that you can either write yourself, so using the position try at rule, or you can use these defaults of flip inline, flip block, flip block, flip inline. So to create a fully functional responsive to the page popover, oh, I think my demo broke here, this is all the code you need. You just position it at the anchor. So you can just position anchor top at the bottom. And then you have position try options, flip block. And you can just justify it and have all of that logic work and the anchor sort of work and resize and flip. And then you can combine these with other features.

So in this case, I'm using trigonometric functions, I'm using transitions, I'm using all of these cool features that CSS provides us to create this sort of menu that trickles open. And it looks like this right here, where I'm anchoring it to these elements. And essentially, I'm able to now style things on a radial plane instead of a linear plane in the web. And this was really hard to do before. But with trigonometric functions, with the ability to calculate things using math in a way that we never had before, like this is a Pinterest menu that I wanted to create, and it's totally possible with just a couple lines of code, thinking about things outside of just linear math.

Like this is the way that I see the future of UIs, thinking more organically, in a way that sort of excites users for the first time in a long time. I'm kind of tired of seeing the flat design stuff, but we have the tools now to make it accessible, to make it usable, to make it interesting, to bring back some organic styles to the web platform. So what's next for popovers and dialogues? One is invokeTarget. This is a way to create declarative invokers. So as you saw with popover, you can just say popover target equals and then connect those two values. You can't do this for other elements like dialogues yet, or things like inputs for color, but that is a feature that is being discussed and worked on to just give that sort of declarative functionality across the web. InterestTarget is another one. If you've ever used GitHub or Twitter, you know that there's this cool effect where you hover over like an icon and it shows you a preview of the profile or other things. This is something that's really, really hard to do accessibly, really hard to implement, so we want to make it easier for web authors is sort of showing interest on hover or focus to open something like that. Like Wikipedia, they do this on links. You currently have to use a button for a popover, but with InterestTarget you would be able to use links as well.

11. Expanding Popover Functionality

Short description:

Explore expanding use cases and styling options for popovers. Discuss ongoing work to improve positioning and anchoring.

Like Wikipedia, they do this on links. You currently have to use a button for a popover, but with InterestTarget you would be able to use links as well. And there's more things that we've been talking about. We know that this solves a lot of use cases, but not everything, so we want to make it easy for you to style that little arrow connector. We want to make it easy to sort of slide into the page, breaking out of the inset modified containing block. There's a lot of work to still be done for anchoring, but I'm really excited with where this is going.

QnA

Building Presentations with CSS and HTML

Short description:

Highlight the benefits of building presentations with CSS and HTML without JavaScript. Discuss the versatility of CSS and HTML across frameworks and the importance of leveraging core platform features. Emphasize reducing complexity and improving developer velocity by utilizing the power of the browser. Mention web.dev and developer.chrome.com as resources for staying updated on platform features.

So I definitely don't have time to get into select, but come and talk to me about it later. Styling selects is a huge need for the platform, so I'd love to talk to you about it.

But another cool thing that I want to highlight is that this entire presentation was built with just CSS and HTML, no JavaScript in this entire framework for the whole deck. And this is fully possible. I'm using just content editable styles here, so I can change the background to hot pink if I wanted to of this page.

I can go through, and this is literally just a content editable code block. I can change all the code to font family, fantasy, and then all of that automatically updates, and you can see it trickle throughout the entire presentation. You can see scroll snap here is now in fantasy font. My favorite programming font. I'm using scroll snapping and scroll behavior to just make this effect look nice. Essentially just a really long scroller, and there's a lot of cool stuff I'm doing, too.

So access key is just some HTML that I can use with control option, you know, one, two, to kind of go to different parts of my page. This is all built into the browser. These are things that I think people just aren't aware of, and they're super, super useful when you're building UIs to get creative. And another cool thing is that CSS and HTML work in every framework, so you don't have to worry about making decisions that are relevant today versus tomorrow. This is always going to be relevant, always going to be backwards compatible, and even if your company uses multiple frameworks or you're thinking about weighing one or two, you can always use these core platform features no matter how you're building. Without any dependencies, that's always a plus one. One less dependency, and it really makes it easier to build on the web.

So I say leverage the power of the browser. That'll help you reduce complexity and improve your developer velocity, improve your creativity. And if you want to stay in the know about all of these things as they land, check out these two publications. It's where our team writes about new platform features, web.dev and developer.chrome.com. Thank you so much for your time. You can find me on the internet here. I appreciate you. I can't wait to see what you build. Thank you. I have a question, because I really enjoy the fact that when you use CSS, when you use some of these things which are just in the browser already, you can just decrease the amount of JavaScript you need to write, and you can actually do some things without necessarily affecting performance. Yes. But my question is, how do you decide which things should be handled by JavaScript, which things should be handled by CSS? Is there a way to make that choice? I think that's a really good question.

Presentational vs Content-related Elements

Short description:

Clarify the distinction between presentational and content-related elements. Separate logic from styling in web development.

For me, my question that I will ask is, is this presentational, or is it something that is content-related? So if you're doing any kind of destructive action, editing on the page, any kind of user action, that feels like it should be in scripting, because it's logic. If it's simply presentational, like a way to make something appear or scroll or style a color or a button, that should be in your styles. Separating logic from styling I think is a big goal of all of this initiative in pushing the web forward.

No, for sure. And this is really, really cool, because I think you practice what you preach when it comes to your slides. Your slides actually use the tools you're talking about. So really, really cool.

Wishlist Features and Pushing Web Platform Updates

Short description:

Discuss wishlist features for the web platform, including wider browser support for anchoring and styling form controls. Explore the challenges of pushing new web platform features across browsers, considering complexity and implementation difficulties.

All right, questions have come in. So the top-rated question is, what are some of the wishlist features you'd love to see land on the web platform? That's a good question. First of all, I would love wider browser support for anchoring. That's a big one. We just saw Firefox land at properties, so we now have semantic custom property values across browser, which is awesome. Another one I would like to see that I've recently been talking about is sibling index, so the ability to know what child you are within a list and be able to style things based on that. You could do staggered animations, staggered color themes, things like that. That one would be really cool. But there's a lot of features I could talk for days, but really, styling form controls is a big one. Styling drop-downs. We need that.

Well, I mean, this just bounces off of that features question really nicely. Because you work in Google, so you kind of have an insider's view, and since you do this, this was Hazem's question, thank you. How hard or easy is it to push new web platform features across browsers? So I think there's kind of two parts. How hard is it to get the new ones into Chrome and then get other browsers to adopt them as well? Wow. It depends. It depends on the feature. Very heavily. It really depends on how complex the feature. So with anchoring, that one is really complex because you have to think about how does this interact with scrollers? What about sub-scrollers? If you have a sub-scroller within the page, how do you manage presentational view? With HTML, you also have to think about user-agent styling. So what is the default style? Do you spec it? Do different user agents like Safari and Firefox have different presentational views? So there's a lot of complexity with some of these features. Container queries is another one that has a lot of complexity to implement. You can't have cyclical dependencies. That's something that you run into often. But really, it depends on the feature. Some of them are easier to implement than others. Sometimes, we have syntactic sugar. Like the HasSelector seems very complex. It's a very powerful selector, but it's essentially a syntactic sugar over is and where with the IsSelector. So some things are harder than others.

Copying Slides and Repository on GitHub

Short description:

Discussion about copying slides and finding the repository for the slides on GitHub. The speaker directs the audience to the Q&A chat to ask for more information.

For sure. There's no great answer. I understand. All right.

We are out of time, but people really want to be able to copy your slides. I'm amazed. Where can we find a repo for them? On GitHub, I do have a repo of these slides. Awesome. If you come find her at the Q&A chat, you can ask her.

Give her a massive round of applause, ladies and gentlemen. Thank you, everyone. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Using useEffect Effectively
React Advanced 2022React Advanced 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced 2021React Advanced 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Managing React State: 10 Years of Lessons Learned
React Day Berlin 2023React Day Berlin 2023
16 min
Managing React State: 10 Years of Lessons Learned
Top Content
Watch video: Managing React State: 10 Years of Lessons Learned
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
TypeScript and React: Secrets of a Happy Marriage
React Advanced 2022React Advanced 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up