Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The current state of web

290 views

Published on

A set of new features available on the web.

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

The current state of web

  1. 1. The Current state of web @ritz078
  2. 2. The web is getting better.
  3. 3. IntersectionObserver
  4. 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. 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. 6. https://codepen.io/ritz078/pen/GdxbKJ Demo Polyfill https://github.com/w3c/IntersectionObserver/tree/master/polyfill
  7. 7. ResizeObserver
  8. 8. ResizeObserver allows you to be notified when an element’s content rectangle has changed its size, and react accordingly.
  9. 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. 10. •Observes the content box. •Reports dimension and padding. •Polyfills aren’t performant as they rely on polling.
  11. 11. Variable Fonts
  12. 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. 13. https://variable-font-experiments.glitch.me/
  14. 14. Abortable Fetch
  15. 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. 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. 17. A single signal can be used to abort many fetches at once
  18. 18. Async ClipBoard API
  19. 19. document.execCommand ? • It’s synchronous. • Can only read and write to DOM. • Permissions model are lossely defined and vary across browsers
  20. 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. 21. • It’s asynchronous. • Can read and write from the clipboard. • Need permission to read from clipboard.
  22. 22. CSS Typed Object Model
  23. 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. 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. 25. el.attributeStyleMap is a ES6 Map
  26. 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. 27. Web Workers
  28. 28. I know, it’s old
  29. 29. • run scripts in background threads. • No access to DOM. • Communication via postMessage API
  30. 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. 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. 32. Immersive Web
  33. 33. 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
  34. 34. WebXR Device API does not provide image rendering features. Drawing is done using WebGL APIs
  35. 35. Web MIDI API
  36. 36. MIDI lets you connect controllers, synthesizers and more to your computer.
  37. 37. if (navigator.requestMIDIAccess) { console.log('This browser supports WebMIDI!'); } else { console.log('WebMIDI is not supported in this browser.'); }
  38. 38. 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
  39. 39. 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
  40. 40. There’s more •CSS Paint API •Houdini •CSS Grids •Network Quality
  41. 41. References https://developers.google.com/web/
  42. 42. Thank You @ritz078

×