Reading this slides?

There is a documentation for that!

Go read it on Github!

INTRO LECTEUR

The Web is on 🔥 F.I.R.E. 🔥

Conference

DevFest Nantes 2019

@noel_mace

On ... F.I.R.E.? 🤨

pwa
PWA

F.I.R.E.

F.

I.

R.

E.

How the Web evolves

w3c logo
WHATWG logo
WICG logo
TC39 logo

Integrators

What's hot?

An integrated Web

The mini-infobar

interim experience

becomes annoying

Prevent mini-infobar

Prevent mini-infobar

Omnibox Button

Firefox Mobile

App Patterns

Inline Patterns

Special Patterns

Closing the App Gapp

Capabilities in flight

Badging API

Contact Picker API

Get Installed Related Apps API

Native File System API

Shape Detection API

Wake Lock API

Launched capabilities

Async Clipboard API (images)

Web Share Target

An adaptive Web

darkness

prefers-color-scheme

Conditionally either load the light or the dark stylesheet. The matching file will be downloaded with `highest`, the non-matching file with `lowest` priority. If the browser doesn't support `prefers-color-scheme`, the media query is unknown and the files are downloaded with `lowest` priority (but above I already force `highest` priority for my default light experience).

prefers-color-scheme - variables

prefers-color-scheme - load

Can I Use prefers-color-scheme? Data on support for the prefers-color-scheme feature across the major browsers from caniuse.com.

Wrong: enabled in Chrome for Android 76

prefers-color-scheme - fallback

If `prefers-color-scheme` is not supported, fall back to light mode. In this case, light.css will be downloaded with `highest` priority.

color-scheme

Left: glaring and without transformations. Right: the easier-on-the-eyes UA default

prefers-reduced-motion - CSS

prefers-reduced-motion - JS

prefers-reduced-motion

Can I Use prefers-reduced-motion? Data on support for the prefers-reduced-motion feature across the major browsers from caniuse.com.

other media queries

prefers-reduced-transparency

prefers-contrast

prefers-color-scheme

scripting

light-level

forced-colors

A Modular Web

ES Modules

Can I Use es6-module? Data on support for the es6-module feature across the major browsers from caniuse.com.

Bare specifiers

This restriction is in place so that in the future we can allow custom module loaders to give special meaning to "bare" import specifiers, like import "jquery" or import "web/crypto". For now any such imports will fail, instead of being treated as relative URLs.

Import Maps

Chrome Status

KV Storage

import storage, {StorageArea} from 'std:kv-storage';

faster than localStorage API...

easier than IndexDB

closer to Map & Chromium storage API

using built-in modules for new HTML elements

DECIDE

Virtual Scroller

The <virtual-scroller> will manage the rendering of its children. It will prioritize rendering things that are in the viewport and not render children that are far away, such that we are only paying as little rendering cost as possible while still allowing them to work with find-in-page, accessibility features, focus navigation, fragment URL navigation, etc.
You can add, remove, modify children of the <virtual-scroller> as you would a regular element, using DOM APIs. When the set of actually-rendered children is about to change, the <virtual-scroller> will fire a "rangechange" event with the new range of rendered children.

Switch

Toast

show toast

Let's "wrap" this up

resources

Noël Macé

Noël Macé

Independent Dev Advocado 🥑 for the Web Platform

@noel_mace
in/noelmace

@noel_mace

Github

dev.to/noelmace

Noël Macé's DEV Profile

noelmace/slides-wof-conf

Slides