Save 37% off PRO during our Black Friday Sale! »

The current state of web

The current state of web

A set of new features available on the web.

55c3671e959e903a7880eaf0cf61f3e4?s=128

Ritesh Kumar

August 30, 2018
Tweet

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