Hey there, my name is Sam, and I'm here today to talk about ensuring your users are on the right path, the futures of Modals, and focus management. The web has come a long way, and for the first time this year, all the evergreens are supporting these amazing new features that we can use as either primitives or as part of some greater library. So firstly, what is focus management, and why do you care? Now, I feel like this is the quintessential reason of why it's important. The things I want to talk about today are dialog and a note. These are the two new concepts that are actually available on browsers this year, and they're both quite cool. Before we go any further, who is this guy, why am I talking to you? I'm a former Googler, I was there for over 10 years, it was obviously really fun, I was on the developer relations team, and so part of my job was to do this kind of outreach. Our technology is still on the web, and so we want to use these features even in our SaaS product to make our user experiences better. And my general vibe of why I'm coming here and talking about these concepts in general, and why I want this in my browser, I want this in my web app, is that to me, these new features are letting us throw away tons of old code that did weird hacks and horrible things to browsers that really they weren't designed to do. So having new primitives in 2022 is really lovely, I can get rid of all this code and get on with the more interesting parts of my job. The first component I'm gonna talk about today is called the dialogue element. Now, dialogue can do a whole bunch of stuff, the spec is pretty wide. But the reason why we most care about it as web developers is I can create this element on my page, wherever I like, and then call showModal in JavaScript. What this does is then creates that dialogue in what's called a top layer. Now the top layer is special, it does two things for us. One is that I can't tap behind it, this focus problem has been solved, while it's visible, I can't interact with anything below it including other dialogues that I previously opened. The second thing that's really cool here is that it actually exists outside the browser's kind of normal rendering layer. It's in a thing called the top layer, and what that means is even if you're inside some weird stacking context or your Z indexes are all bizarre, then actually the dialogue will always be on top. I actually like to demonstrate this by, if you can see here, I've got this weird element that's transformed in bizarre ways. If I click this button, the dialogue is actually inside this transformed element, but the browser's just gonna ignore all of that and hoist it to the top. So in that way, it's quite cool. It's scoped and encapsulated in a way that you can use it in a component or some library and it will still appear right at the top, ready for the user to interact with it.
♪♪ ♪♪ ♪♪ ♪♪ Hey there, my name is Sam, and I'm here today to talk about ensuring your users are on the right path, the futures of Modals, and focus management. Now, that's a handful, and I submitted this talk to JSNation a while ago, and since then, I think what it should be called is basically focus management in 2022.
Now, the web has come a long way, and actually, for the first time this year, all the evergreens are supporting these amazing new features that we can use as either primitives or as part of some greater library.
So firstly, what is focus management, and why do you care? Now, I feel like this is the quintessential reason of why it's important. Now, we've got dialog here. I can click around, I can hit submit, but what I can actually do while this is out operating is press Tab a bunch of times and get behind this UI. I can still click some buttons that are on the page here. Now, this is a demo, but lots of sites have this problem if you look around, and the challenge is that it's just really hard, and for the longest time, we've got libraries and polyfills that try to really maintain this, to try to solve this problem for you, but either they're not used correctly, they just can't do what you want them to do, or people just forget, and they just use a really basic mechanism and hope that users will never get there, and this example is obviously pretty tricky, not everyone knows how to tab behind UI elements, but this kind of problem will leak out in other ways, causing users some weird behavior, and some examples here.
To be very precise, the things I want to talk about today are dialog and a note. Now, these are the two new concepts that are actually available on browsers this year, and they're both quite cool. They're actually quite old in terms of specs, they were written a long time ago, but as I've mentioned, it's the first time that you can use them in pretty much all evergreens with no hassle.
So, before we go any further, who is this guy, why am I talking to you? I'm a former Googler, I was there for over 10 years, it was obviously really fun, I was on the developer relations team, and so part of my job was to do this kind of outreach. I've actually recently left Google and gone to a small early stage startup in the green energy space called Gridcog, it's a lot of fun, I would highly recommend working in climate, it's an important thing, and I'm always happy to talk to people about that, orthogonally to the content of this talk.
Having said that, our technology is still on the web, and so we want to use these features even in our SaaS product to make our user experiences better. And my general vibe of why I'm coming here and talking about these concepts in general, and why I want this in my browser, I want this in my web app, is that to me, these new features are letting us throw away tons of old code that did weird hacks and horrible things to browsers that really they weren't designed to do. So having new primitives in 2022 is really lovely, I can get rid of all this code and get on with the more interesting parts of my job. Not dealing with focus management, but actually writing applications that do interesting things.
The first component I'm gonna talk about today is called the dialogue element. Now, dialogue can do a whole bunch of stuff, the spec is pretty wide. But the reason why we most care about it as web developers is I can create this element on my page, wherever I like, and then call showModal in JavaScript. What this does is then creates that dialogue in what's called a top layer. Now the top layer is special, it does two things for us. One is that I can't tap behind it, this focus problem has been solved, while it's visible, I can't interact with anything below it including other dialogues that I previously opened. The second thing that's really cool here is that it actually exists outside the browser's kind of normal rendering layer. It's in a thing called the top layer, and what that means is even if you're inside some weird stacking context or your Z indexes are all bizarre, then actually the dialogue will always be on top. I actually like to demonstrate this by, if you can see here, I've got this weird element that's transformed in bizarre ways. If I click this button, the dialogue is actually inside this transformed element, but the browser's just gonna ignore all of that and hoist it to the top. So in that way, it's quite cool. It's scoped and encapsulated in a way that you can use it in a component or some library and it will still appear right at the top, ready for the user to interact with it.
Now, that's the most interesting part of the dialogue for me, but there's a few other things I wanna cover before we go on.
Comments