The current state of web

A set of new features available on the web.

Transcript

1. The Current state of web @ritz078
2. The web is getting better.
3. IntersectionObserver
4. The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
5. var io = new IntersectionObserver( entries !=> { console.log(entries); } ); !// Start observing an element io.observe(element); !// Stop observing an element !// io.unobserve(element); !// Disable IntersectionObserver !// io.disconnect();
6. https://codepen.io/ritz078/pen/GdxbKJ Demo Polyfill https://github.com/w3c/IntersectionObserver/tree/master/polyfill
7. ResizeObserver
8. ResizeObserver allows you to be notified when an element’s content rectangle has changed its size, and react accordingly.
9. API var ro = new ResizeObserver( entries !=> { for (let entry of entries) { const cr = entry.contentRect; console.log('Element:', entry.target); console.log(`Element size: ${cr.width}px x ${cr.height}px`); console.log(`Element padding: ${cr.top}px ; ${cr.left}px`); } }); !// Observe one or multiple elements ro.observe(someElement);
10. •Observes the content box. •Reports dimension and padding. •Polyfills aren’t performant as they rely on polling.
11. Variable Fonts
12. •Single file for all variations of a font. •5 pre-defined axes that can be changed. •Custom variable axes can be defined by the designer. •Animation is possible. •Use fallback font by changing format. @font-face { font-family: "source sans"; src: url(SourceSansVariable.woff2) format("woff2-variations"), url(SourceSans.woff2) format("woff2"); !/* for older browsers !*/ font-weight: normal; font-style: normal; }
13. https://variable-font-experiments.glitch.me/
14. Abortable Fetch
15. AbortController and AbortSignal Generic API const controller = new AbortController(); const signal = controller.signal; controller.abort(); signal.addEventListener('abort', () !=> { !// Logs true: console.log(signal.aborted); });
16. const controller = new AbortController(); const signal = controller.signal; setTimeout(() !=> controller.abort(), 5000); fetch(url, { signal }) .then(response !=> response.text()) .then(console.log) .catch(err !=> { if (err.name !!=== "AbortError") { console.log("Fetch aborted"); } else { console.error("Uh oh, an error!", err); } }); Timeout fetch using AbortSignal
17. A single signal can be used to abort many fetches at once
18. Async ClipBoard API
19. document.execCommand ? • It’s synchronous. • Can only read and write to DOM. • Permissions model are lossely defined and vary across browsers
20. navigator.clipboard.writeText('Text to be copied') .then(() !=> { console.log('Text copied to clipboard'); }) .catch(err !=> { !// This can happen if the user denies clipboard permissions console.error('Could not copy text: ', err); }); API https://jsfiddle.net/r2jurqq7/
21. • It’s asynchronous. • Can read and write from the clipboard. • Need permission to read from clipboard.
22. CSS Typed Object Model
23. Old CSSOM !// Element styles. el.style.opacity = 0.3; typeof el.style.opacity !!=== 'string' !// Ugh. A string!? !// Stylesheet rules. document.styleSheets[0].cssRules[0].style.opacity = 0.3;
24. New CSS Typed OM !// Element styles. el.attributeStyleMap.set('opacity', 0.3); typeof el.attributeStyleMap.get('opacity').value !!=== 'number' !// Yay, a number! !// Stylesheet rules. const stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].styleMap.set('background', 'blue');
25. el.attributeStyleMap is a ES6 Map
26. !// All 3 of these are equivalent: el.attributeStyleMap.set('opacity', 0.3); el.attributeStyleMap.set('opacity', '0.3'); el.attributeStyleMap.set('opacity', CSS.number(0.3)); !// el.attributeStyleMap.get('opacity').value !!=== 0.3 !// StylePropertyMaps are iterable. for (const [prop, val] of el.attributeStyleMap) { console.log(prop, val.value); } !// → opacity, 0.3 el.attributeStyleMap.has('opacity') !// true el.attributeStyleMap.delete('opacity') !// remove opacity. el.attributeStyleMap.clear(); !// remove all styles.
27. Web Workers
28. I know, it’s old
29. • run scripts in background threads. • No access to DOM. • Communication via postMessage API
30. !// main.js const myWorker = new Worker('worker.js'); first.onchange = function() { myWorker.postMessage([first.value,second.value]); console.log('Message posted to worker'); } !// worker.js onmessage = function(e) { console.log('Message received from main script'); var workerResult = 'Result: ' + (e.data[0] * e.data[1]); console.log('Posting message back to main script'); postMessage(workerResult); }
31. https://transform.now.sh • Prettier is in worker. • Transformations that don’t depend on the DOM are in worker. • Used the package greenlet to move async functions to the separate thread.
32. Immersive Web
34. if (navigator.xr) { navigator.xr.requestDevice() .then(xrDevice !=> { !// Advertise the AR/VR functionality to get a user gesture. }) .catch(err !=> { if (err.name !!=== 'NotFoundError') { !// No XRDevices available. console.error('No XR devices available:', err); } else { !// An error occurred while requesting an XRDevice. console.error('Requesting XR device failed:', err); } }) } else{ console.log("This browser does not support the WebXR API."); } WebXR Device API
35. WebXR Device API does not provide image rendering features. Drawing is done using WebGL APIs
36. Web MIDI API
37. MIDI lets you connect controllers, synthesizers and more to your computer.
38. if (navigator.requestMIDIAccess) { console.log('This browser supports WebMIDI!'); } else { console.log('WebMIDI is not supported in this browser.'); }
39. navigator.requestMIDIAccess() .then(onMIDISuccess, onMIDIFailure); function onMIDISuccess(midiAccess) { console.log(midiAccess); var inputs = midiAccess.inputs; var outputs = midiAccess.outputs; } function onMIDIFailure() { console.log('Could not access your MIDI devices.'); } API
40. function onMIDISuccess(midiAccess) { for (var input of midiAccess.inputs.values()) input.onmidimessage = getMIDIMessage; } } function getMIDIMessage(midiMessage) { console.log(midiMessage); } Listening to input messages Polyfill: https://github.com/cwilso/WebMIDIAPIShim
41. There’s more •CSS Paint API •Houdini •CSS Grids •Network Quality
42. References https://developers.google.com/web/
43. Thank You @ritz078