April 2022 Frontend Updates: The Dialog Element, Priority Hints and Latest Releases

This month we cover:

• The Dialog Element
• Priority Hints
• Release time!

The Dialog Element

Creating web dialogs has always been a matter of using JS libraries or hacking with z-index, pointer-events and JS to show the element on top and block the other mouse or keyboard events if needed.

There was a native element though, but it was not widely supported, and thus, it was still pretty experimental… Until right now, that it just landed in Safari 15.4 across all Apple devices, as well as Firefox 98.

It’s not just a semantic element, it has an API for opening and closing and special CSS features, like the ::backdrop pseudo-element. You’ll still need to write JS to open it, but it already handles a lot of things for you, like always being on top of everything no matter the z-index and focusing into the modal when it gets opened.

Now that it is supported in every evergreen browser, it is a good time to take a look at it:

• Introducing the Dialog Element: Comprehensive documentation of the feature by the WebKit team, probably the best resource to learn about it.
• Fun with the Dialog Element: An interesting post about it by Mark Otto, the creator of Bootstrap.
• ​​Thinking on ways to solve Dialog: The last YouTube video in the GUI Challenge series by Adam Argyle from Google Chrome Devs channel. Highly recommended!

Priority Hints

When a browser parses HTML, it discovers resources like images, styles and scripts and starts downloading them to render the full version of the page. The order in which the assets are downloaded is determined by the browser itself, taking into account resource type, position in the document, etc. Browsers are usually pretty good at determining download priorities, but they may not always be optimal.

That’s where Priority Hints come into play. Through the fetchpriority attribute, priority hints allow you to tell the browser the relative priority of a resource, like in the carousel example below, where you may want to prioritise the visible or above the fold image:

<div class="carousel">
  <img class="slide-1" fetchpriority="high" ... />
  <img class="slide-2" fetchpriority="low" ... />
  <img class="slide-3" fetchpriority="low" ... />
</div>

You can also prioritise iframes, scripts, links and fetch requests, the latter using Request.priority.

There is a great article in web.dev where they discuss fetchpriority along with other resource hints (like preload or async/defer) to optimise resource fetching. Check it out if you want to know more!

Release time!

There were a couple of significant releases this month:

• React 18 is finally out! It includes out-of-the-box improvements like automatic batching, new APIs like startTransition, and streaming server-side rendering with support for Suspense. We spoke about those in previous Frontend Updates. Check the official release post and the guide to update too!
• Last month Chrome celebrated their 100th release, and they are already releasing the 101th. Check out the What’s New in DevTools series in the Chrome Developers blog to keep up to date with the latest new DevTools features!

Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!