Around the Frontend World, vol. 18

Changing the
color format in DevTools

Another useful feature in DevTools is changing the color format. For example, we often need to find the hex code for a color shown in rgb. Shift-click on the color swatch to get a context menu with the value in other formats. No more color pickers or screenshots. 🙂

Stimulus Outlets API

No, we're not talking about second-hand shops or clothing outlets. This is a new way for controllers to communicate starting in Stimulus.js 3.2.0. Using new data attributes, you can reach an instance of another controller. In JavaScript, you can then access properties or functions using a syntax similar to the one used for targets or values.

To connect two controllers, we specify the outlet on the data-controller like this:

Format: data-[identifier]-[outlet]-outlet="[selector]"

<div data-controller="search" data-search-result-outlet="#result">…</div>
<div id="result" data-controller="result">…</div>

In JavaScript, we then define and use the outlet similarly to targets or values:

export default class extends Controller {
 static outlets = [ "result" ]
 connect () {
   this.resultOutlet.method();
 }
}

We can also use this.resultOutlets, which returns all instances matching the given outlet selector, or this.hasResultOutlet with a Boolean return type.

light-dark()

The light-dark() function lets you easily set two different colors for a CSS property, which automatically adapt to the user's preference for light or dark mode. This lets you avoid needlessly wrapping your code in prefers-color-scheme.

If the user has light mode set, or no preference at all, the function returns the first value given. For light-dark() to work correctly, you need to set the color-scheme value to light dark in CSS, most often on the pseudo-class :root.

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

PDF accessibility
checker

Do you code PDFs? We definitely do! Our accessibility specialist, Kristýna Marková, found a great tool that helps you check whether your PDF is truly accessible. Unless, of course, you're coding plane tickets to the Greek island of Lesbos that you'll just print out, in which case you don't need to worry about accessibility.

This program, called PAC, is free, but unfortunately only for Windows. Luckily, there's also an online version at check.axes4.com. After you upload a PDF file, the tool gives you a detailed report and precisely flags any errors that don't comply with the PDF/UA and WCAG standards. The program also comes with a built-in screen reader.

Dummy JSON
and HTML response

The following three tools will help you cut down on the endless wait for your backend colleagues. With them, you can easily generate a URL for testing that returns either dummy HTML (html-mock.fly.dev) or data in JSON format in exactly the structure you need (jsonplaceholder.typicode.com or mocki.io). This way, you can plan out in advance how you'll work with the data, and once the backend is ready, all you have to do is swap the URL. No more waiting around on your colleagues or work dependencies!

Highlight
repainted areas

As you browse a webpage, or when parts of it change (for example, on hover over elements), the browser engine has to repaint those parts. That can be demanding on performance, especially if the repainted areas are large or it happens frequently.

If you suspect your website is slow because of frequent, large repaints, you can use the Paint Flashing tool in the Rendering tab in Chrome DevTools. This tool highlights the areas the browser is repainting, letting you visually spot the problem areas.

Warning: The Paint Flashing feature is not suitable for people prone to photosensitive epilepsy!

News from WWDC24:
WebKit in Safari 18 beta

Last but not least, we can't skip over Apple's WWDC24 conference, which also introduced the new OS Sequoia. This update also brings a new version of the Safari browser, meaning the implementation of the latest web technologies. There's a ton of news, and you can find more details in a dedicated article from WebKit. The new features will be available with the official OS launch in the second half of this year, but if you want to try some of them out already, you can download and install the Safari 18 beta.

The main WebKit news:

• WebXR Input transient-pointer : Support for interactions like pinch or drag.
• CSS View Transitions: Defining animated transitions.
• Style Queries: New options for conditional styles.
• Modifying colors using calc() in Relative Color Syntax: For example, darkening a color on hover that's stored in a CSS3 variable.
• Animating the display property: The ability to animate visibility changes.
• A new state for Vision Pro: A state for when the user is looking at an element (similar to :hover, :active, :visited)
• justify-content: safe center : A new option for safe content centering.
• Support for content-visibility : Optimizing the rendering of invisible parts of the page (which helps the INP metric).
• The .requestFullscreen() function for displaying Spatial Media photos.
• Writing Suggestions: Suggestions while typing text.
• New input types: switch, date-time, time, date.
• Safari Viewer: A new video player that automatically switches to picture-in-picture mode when you change tabs, cover, or close the window.
• Passkeys improvements: The ability to sign in to password-based web accounts via Apple ID or Touch ID.

More highlights from WWDC24:

We also can't skip over the fact that Apple Intelligence is becoming a big draw for owners of MacBooks and iPads with the M1 chip or newer, as well as for the iPhone 15 Pro and 15 Pro Max. This innovation is once again pushing boundaries and bringing new capabilities that raise the bar against the competition.

So this fall, along with the release of OS Sequoia and the new iPhone 16 (who's buying one? 🙋), we have plenty to look forward to.