A set of new features available on the web.

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