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 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.
  2. 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();
  3. ResizeObserver allows you to be notified when an element’s content

    rectangle has changed its size, and react accordingly.
  4. 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);
  5. •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; }
  6. AbortController and AbortSignal Generic API const controller = new AbortController();

    const signal = controller.signal; controller.abort(); signal.addEventListener('abort', () !=> { !// Logs true: console.log(signal.aborted); });
  7. 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
  8. document.execCommand ? • It’s synchronous. • Can only read and

    write to DOM. • Permissions model are lossely defined and vary across browsers
  9. 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/
  10. • It’s asynchronous. • Can read and write from the

    clipboard. • Need permission to read from clipboard.
  11. 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;
  12. 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');
  13. !// 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.
  14. • run scripts in background threads. • No access to

    DOM. • Communication via postMessage API
  15. !// 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); }
  16. 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.
  17. 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
  18. if (navigator.requestMIDIAccess) { console.log('This browser supports WebMIDI!'); } else {

    console.log('WebMIDI is not supported in this browser.'); }
  19. 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
  20. 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