Highlights from Chrome Dev Summit 2019

I’ve been going to Chrome Dev Summit for a couple of years now (2016 & 2018) and I always like to do this roundup article, highlighting what I thought were the most interesting ideas and projects from the conference. So let’s get into it!

HTML is (finally) getting some 💕 #

It seems like the design and functionality of pretty much all control elements have stayed the same since the dawn of the browser. This is true even despite the fact that the way we use browsers have changed a lot, for example with the shift to mobile. Well, no more! In the talk, HTML isn’t done, Nicole and Greg discussed a few updates that will be introduced to Chrome soon.

Redesigned form elements #

Several form elements are finally getting a visual refresh! Not only are the elements being designed to look more modern, but they are being designed with accessibility and mobile in mind. The date picker, for example, will now allow for larger touch targets when selecting values.

Extensibility of form elements #

Form elements are also getting more flexible! An example of this is the <select> element. So many of us end up using custom select components because we want to do something as simple as adding an icon to an option, or something as complex as allowing users to search through options. In future versions of Chrome, this should all be possible with the native <select> element itself!

New elements? #

Although this is more an improvement for the further-away future, the Chrome team are looking to add elements to the web that don’t exist yet. Elements like a table view similar to a UITableView in iOS, or a toggle switch element are in the pipeline.

CSS is getting better too! #

CSS is also getting some much-needed refinements. In their packed talk on Next-generation web styling, Una and Adam talked about 12 new features coming to CSS. Although there were many shiny features like Houdini mentioned, what had me really excited were the refinements that will allow us to write CSS more simply and effectively.

The :is() selector #

The :is() selector allows us to group multiple alike selectors. This is better explained with an example.

Typically, if we want to apply the same style to multiple elements that share a part of their selector, we would still have to write out the entire selector each time.

body.theme--light button,
body.theme--light a,
body.theme--light p,
body.theme--light h1 {
    /* ... */
}

With :is(), we can group the parts of the selectors that are different together.

body.theme--light :is(button, a, p, h1) {
    /* ... */
}

Amazing, right?!

Logical properties #

Logical properties are a move from CSS that is biased to left-to-right languages like English, to a more agnostic approach. Instead of thinking of the block model as top, right, bottom, left, it’s changing to block-start, inline-end, block-end, inline-start.

Credit: Una Kravets

This can be a little difficult to wrap your head around the first time, but once you get the hang of it, you see why it makes more sense. A lot of times, when we want a margin or a padding to the left, what we actually want is a margin/padding to the start of the inline block. With these logical properties, we can apply those kinds of styles that will adapt based on the language of the user. For times when left really means left, the directional properties are still there.

The web is coming for native #

Through the new Project Fugu, the Chromium team is aggressively trying to bridge the gap between the capabilities of web and native applications. There were two talks at the conference that really dove into the new APIs that are coming to the web.

In What’s new in sign-up and sign-in, Eiji talked about the new SMS Receiver API, which will allow browsers to access text messages received on the device to help auto-fill during the authentication process.

He also talked about the Web Authentication API, which will allow browsers to access local credential mechanisms such as FaceID. Using what is definitely the longest ever method name, we can check if one of these credentialm mechanisms are available:

PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
    .then((available) => {
        // Proceed with authentication...
    });

In Bridging the native app gap, Sam discussed several other APIs coming to the web soon, including:

• Web Share API
• Web Share Target API
• Contact Picker API
• Native File System API

In the sandbox area, I also witnessed some amazing demos of APIs like WebXR, Web Bluetooth, and Web NFC.

WebAR demo at #ChromeDevSummit ! It's really amazing what can be done in the browser nowadays, the WebVR demo was so powerful too! pic.twitter.com/njrMyK0QeD — Ire Aderinokun (@ireaderinokun) November 11, 2019

Progressive enhancement through “adaptive loading” #

I’m always interested in the topic of progressive enhancement and how we can better serve appropriate experiences based on the user’s capabilities. Addy Osmani introduced a a concept he called “Adaptive Loading", which is the practice of adapting the experience for the user depending on their device/network/browser capabilities.

In order to create this adaptive experience, we can leverage several browser APIs that let us know what type of device/network/browser the user is currently on.

For example, with the Network Information API, we can determine if the user is on a 4g network, or if they have the data savings setting on.

const network = navigator.connection.effectiveType;
// => 4g

const isOnSaveData = navigator.connection.saveData;
// => true

It’s worth noting that the support for these features isn’t widely available yet. That said, they can still be used for extra information wherever available.

That's it for my roundup! All the videos from the conference are available to watch on YouTube on the Chrome Dev Summit 2019 playlist. What were your favourite talks?