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
On ... F.I.R.E.? 🤨
PWA
F.I.R.E.
F.
I.
R.
E.
How the Web evolves
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
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
other media queries
prefers-reduced-transparency
prefers-contrast
prefers-color-scheme
scripting
light-level
forced-colors
A Modular Web
ES Modules
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
Let's "wrap" this up
resources
Noël Macé
Noël Macé
Independent Dev Advocado 🥑 for the Web Platform
@noel_mace
dev.to/noelmace
noelmace/slides-wof-conf
