into the browser.

The EyeDropper API provides a built-in tool

for selecting colors.

There's a new origin trial that allows you

to opt-in to receiving the reduced user-agent string now.

And there's plenty more.

I'm Pete LePage.

Let's dive in and see what's new for developers in Chrome 95.

[MUSIC PLAYING]

Nearly all web apps depend on routing in some way,

whether it's code that runs on the server that

maps a path to files on disk, or logic in a single-page app

that updates the DOM when the URL changes.

URLPattern is a new web platform API

that standardizes routing-pattern syntax.

It builds on the foundation of existing frameworks,

making it easier to perform common routing tasks--

for example, matching against full URLs or URL path names

and returning information about the token and group matches.

If you're already familiar with the routing syntax used

in Express, or Ruby on Rails, or path-to-regexp,

this is going to look familiar.

To use it, create a new URL pattern

and provide the details that you want to pattern match against.

Patterns can contain wildcards, named

token groups, regular expression groups, and group modifiers.

For example, let's take a look at the URL pattern that

might be used by Google Docs.

We'll specify the kind of file, the file ID, and what mode

we want it to open in.

Then, to use the pattern, we can call either test() or exec().

URLPattern is enabled by default in Chrome and Edge

version 95 and above.

And for browsers or environments like Node

that don't support it yet, you can

use the URLPattern polyfill library.

Check out Jeff's article on web.dev for complete details.

Almost every design app I've ever used

has an eyedropper tool, making it easy to figure out

what color something is.

Some browsers will show an eyedropper

with input type = color, but it's not ideal,

and it's not consistent.

The EyeDropper API implemented by the folks at Microsoft

bring a proper eyedropper tool to the web.

To use it, create a new EyeDropper() instance,

then call open() on it.

Like many modern web APIs, the open() call is asynchronous

so it doesn't block the main thread.

When the user clicks on the color they want,

open() will resolve with the color that they clicked on.

I've linked to a quick little demo

in the notes for this video.

Did you catch the PWA Summit earlier this month?

It was great to see so many folks talking about PWAs

and sharing their experiences.

If you missed it, all the videos are up,

so be sure to check them out at PWASummit.org.

User-agent reduction is an effort

to reduce passive fingerprinting surfaces

by reducing the information in the user-agent string to only

the browser's brand and significant version,

its desktop or mobile distinction,

and the platform it's running on.

Starting in Chrome 95, there's a new origin trial

that allows you to opt-in to receiving the reduced

user-agent string now.

You can use this to discover and fix problems

before the reduced user agent becomes

the default behavior in Chrome.

The changes will be applied incrementally

over a number of releases, but everything

you need to prepare and test is ready right now.

All the details and timeline are in the post

on developers.chrome.com.

Of course, there's plenty more.

If you've been following the File System Access and Storage

Foundation API work, there's a new origin trial

for access handles.

WebAssembly now provides exception-handling support,

which allows code to break the control flow when

an exception is thrown.

And Chrome 100 is coming up.

It's time to make sure that any code that

checks the browser version can handle three digits.

All the details, including links, docs, and specs,

are in the updates post on developer.chrome.com

and linked in the description.

Hit the Subscribe button so that you

don't miss any of our great content,

like ways that you can improve your dev skills

and what's new in DevTools.

SPEAKER: You can now hide specific issues in the Issues

tab to focus only on those issues that matter to you.

PETE LEPAGE: Or Jake and Surma diving

deep into some fun content for HTTP 203.

JAKE ARCHIBALD: Is the layout being defined by the CSS,

or is it being defined by the CSS

plus the content plus the HTML?

And when you're saying [? 1FR, ?]

[? 1FR, ?] 1FR, it's the CSS saying,

there is going to be three columns here.

Whereas with the auto version, it's like, I don't know.

Let's see what's in there.

PETE LEPAGE: I'm Pete LePage.

And as soon as Chrome 96 is released,

I'll be right here to tell you what's new in Chrome.

[MUSIC PLAYING]