The current state of 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

33. None

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