 Hi, I'm Mariko, developer relations engineer on clone. Did you know that you can build a model for your website using just HTML elements? Did you know that you have a simpler way to control CSS transform? Or did you know that there are new viewport units that adapt to mobile user interface? Depending on your interest or which part of web development you focus on, you might already know these features or you might have missed announcement and that's OK. The web is always evolving and browsers are updating their engines constantly to give developers tools to innovate on the platform. Things that have required helper libraries before might now be natively supported on all browsers or there might be a shorter or easier way to code design elements. That's the great thing about the web. It's always evolving as a platform and adapting how we use the web. The confusing side of this constant development is that it is so hard to navigate all these updates. We always have questions like, when will all browser engines support new features? When can I actually start using those features in my production code? Or how long should we support all the browsers? The true answer is it depends. Depends on your user base. Depends on your tech stack. Depends on your team structure. Depends on your supported devices. But one thing we all agree is that the current landscape of the web is very confusing to make those decisions. And because it's confusing, it's also really hard to keep up with what's going on. So our team has been collaborating with other browser engines and the web community to bring more quality. For more about what we've been working on, you should check out lateral session partnering for the stable web. Today, I want to highlight some features that became available to all major browser engines in the past two versions. As I mentioned, the web platform is always evolving, but we feel like supporting two latest versions of the browser is a good baseline to start when you need to think about whether you can use a new web platform feature in production or not. Now, I can't show all of them in these sessions. In particular, we had an explosion of CSS updates in the past few years. So make sure to check out other sessions and blog posts from our team to keep up with what's new. Let's start with my favorite dialogue element. This is a new HTML element to create dialogue prompts such as pop-ups and models. You can define the model element simply like this and open the dialogue by calling show model method on the dialogue element. Now, you might be wondering, this is nothing new. You have UI component and JavaScript framework I use, but the advantage of using native HTML element like this is that it comes with all the browser magic, such as focus management, tab tracking, keeping stack in context. You can even have a dialogue element open another dialogue element and the browser will take care of which one should be displayed on top. So let's call to write and let's call to manage. Another one that simplifies our code is individual transform properties. Using CSS transform is a great and performant way to add a movement to your site. You might be familiar with writing CSS transform like this. With individual transform properties, you can now specify transform properties individually. This comes in handy when you are writing complex keyframe animation. Let's say you are planning on animation that translate an element from zero to 100%, rotate the element midway and also scale at different keyframe points. In the past, you had to manually calculate values for all three properties at different keyframe points to write the code like this. But now, you don't have to calculate in between points and simply write values for each individual property. Much easier to write and manage the code. New viewport units has been added and this is crucial on mobile websites. On mobile, viewport size is influenced by the presence or absence of dynamic toolbars. Sometimes you have URL bar and navigation toolbar visible, but sometimes those toolbars are completely detracted. New viewport units like small view height and large view height give web developers final control when designing for the mobile. It's not just these two units. There are dynamic as well as minimum and max units. Perhaps being able to deep copy in JavaScript makes it easier to maintain your code. In the past, if you want to create a deep copy of an object with no reference to the original object, the popular hack was JSON stringify and JSON parse. You take an original JavaScript object, create a string out of it by JSON stringify and parse them back to JavaScript object by JSON parse. This was such a common hack that V8's Chrome JavaScript engine aggressively improved the performance of this trick. But you don't need this hack anymore with structured clone. You can simply pass the original object to structured clone function and create a deep copied object. Small but really useful update, especially to help accessibility was focus visible pseudo class. We all are familiar with that focus thing that shows up when you are navigating a page with a keyboard or clicking on an input element. It is a necessary feature for accessibility, but sometimes it gets in the way of design decisions for different diff users. Focus visible is a CSS pseudo class to check if the browser holistically thinks that the focus should be visible. So when focus is visible, such as the user is navigating the page with a keyboard, you can apply appropriate design as an outline. If focus is on an element, but not focus visible, such as user navigation with mouse, you can remove the outline if that fits your overall design. Transform stream is available to all major browsers. This makes it possible to pipe streams into one another. For example, you can stream data from one place, complex the data, then stream to another location as the data gets passed. When you create a new transform stream with no arguments, it creates an identity stream, which is a readable writeable pair that takes anything that's passed to its writeable end and send it to the readable end. You can make a request to URL1 to get data, pass the response from the fetch request to a compression stream to Gzip. Then pipe to the transform stream we created. Since writeable and readable here are identity stream, anything that's piped to writeable is getting sent to the readable side. So you use that as a body for posting Gzip data to URL2. One last thing I'm excited to share is import maps. ES modules are a modern way to include and reuse JavaScript code in web applications. Script type equal import map allows you to define a mapping of external module names to their corresponding URLs. This makes it easier to include and use external modules in your code. You can use the import statement to import modules you specified in the import maps, just like this. Of course, you can load separate JavaScript files this way too. Just make sure you need to set the type to module so you can use the import statement. I hope this session gave you a glimpse of web platform features that you can use now as the baseline for your web apps. But as I said in the beginning, new features are landing on browsers constantly. Some browsers are updating every few weeks. So what is now available across a major browser is constantly changing. But we are putting a lot of effort into bringing clarity. If you want to stay up to date, our team is publishing articles when a feature becomes interoperable, meaning supported by all major browsers. We also publish monthly updates on what's going on on the web platform from experimental features to newly interoperable. And we have a new landing page. Please see this link to learn more about what we've been working on. All the links will be in descriptions below. We always want to hear from you. We are always curious if what we are doing helps you or if you need different kind of support. So please leave your feedback and suggestions in the comments.