Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The current state of web

The current state of web

A set of new features available on the web.

Ritesh Kumar

August 30, 2018
Tweet

More Decks by Ritesh Kumar

Other Decks in Programming

Transcript

  1. The Current state of web
    @ritz078

    View full-size slide

  2. The web is getting better.

    View full-size slide

  3. IntersectionObserver

    View full-size slide

  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.

    View full-size slide

  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();

    View full-size slide

  6. https://codepen.io/ritz078/pen/GdxbKJ
    Demo
    Polyfill
    https://github.com/w3c/IntersectionObserver/tree/master/polyfill

    View full-size slide

  7. ResizeObserver

    View full-size slide

  8. ResizeObserver allows you to be notified when an element’s
    content rectangle has changed its size, and react
    accordingly.

    View full-size slide

  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);

    View full-size slide

  10. •Observes the content box.
    •Reports dimension and
    padding.
    •Polyfills aren’t performant as
    they rely on polling.

    View full-size slide

  11. Variable Fonts

    View full-size slide

  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;
    }

    View full-size slide

  13. https://variable-font-experiments.glitch.me/

    View full-size slide

  14. Abortable Fetch

    View full-size slide

  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);
    });

    View full-size slide

  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

    View full-size slide

  17. A single signal can be used to abort many fetches at once

    View full-size slide

  18. Async ClipBoard API

    View full-size slide

  19. document.execCommand ?
    • It’s synchronous.
    • Can only read and write to DOM.
    • Permissions model are lossely defined and vary
    across browsers

    View full-size slide

  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/

    View full-size slide

  21. • It’s asynchronous.
    • Can read and write from the clipboard.
    • Need permission to read from clipboard.

    View full-size slide

  22. CSS Typed Object Model

    View full-size slide

  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;

    View full-size slide

  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');

    View full-size slide

  25. el.attributeStyleMap is a ES6 Map

    View full-size slide

  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.

    View full-size slide

  27. I know, it’s old

    View full-size slide

  28. • run scripts in background threads.
    • No access to DOM.
    • Communication via postMessage API

    View full-size slide

  29. !// 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);
    }

    View full-size slide

  30. 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.

    View full-size slide

  31. Immersive Web

    View full-size slide

  32. 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

    View full-size slide

  33. WebXR Device API does not provide image rendering features.
    Drawing is done using WebGL APIs

    View full-size slide

  34. Web MIDI API

    View full-size slide

  35. MIDI lets you connect controllers, synthesizers and
    more to your computer.

    View full-size slide

  36. if (navigator.requestMIDIAccess) {
    console.log('This browser supports WebMIDI!');
    } else {
    console.log('WebMIDI is not supported in this browser.');
    }

    View full-size slide

  37. 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

    View full-size slide

  38. 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

    View full-size slide

  39. There’s more
    •CSS Paint API
    •Houdini
    •CSS Grids
    •Network Quality

    View full-size slide

  40. References
    https://developers.google.com/web/

    View full-size slide

  41. Thank You
    @ritz078

    View full-size slide