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

Web APIs you (probably) didn't know existed

Zeno Rocha
August 19, 2016

Web APIs you (probably) didn't know existed

Video: https://www.youtube.com/watch?v=NCGLPp778JY

You’ve probably heard about the amazing things that HTML5 can do. Maybe you already saved some data using Local Storage, fetched user coordinates using Geolocation, or even drew graphs and other objects using Canvas. But did you know there are many more new JavaScript APIs in the Web Platform? In this talk, we’ll see how to leverage the power of those APIs in order to create better experiences for your users.

Zeno Rocha

August 19, 2016
Tweet

More Decks by Zeno Rocha

Other Decks in Technology

Transcript

  1. web apis
    you
    didn’t know
    existed
    probably
    @zenorocha

    View full-size slide

  2. canvas
    svg
    geolocation
    local
    storage
    web
    sockets
    audio
    video
    drag &
    drop
    web rtc

    View full-size slide

  3. page
    visibility

    View full-size slide

  4. Provides an API to ask
    whether the current page
    is visible or not.
    page visibility

    View full-size slide

  5. window.addEventListener('visibilitychange', () => {
    if (document.hidden) {
    console.log('Tab is hidden');
    }
    else {
    console.log('Tab is focused');
    }
    });
    page visibility

    View full-size slide

  6. window.addEventListener('visibilitychange', () => {
    switch(document.visibilityState) {
    case 'prerender':
    console.log('Tab is pre-rendering');
    break;
    case 'hidden':
    console.log('Tab is hidden');
    break;
    case 'visible':
    console.log('Tab is focused');
    break;
    }
    });

    View full-size slide

  7. caniuse.com/#feat=pagevisibility
    BROWSER
    support

    View full-size slide

  8. where
    to use it?

    View full-size slide

  9. Exposes a network
    connection availability
    information to the web.
    online state

    View full-size slide

  10. console.log(navigator.onLine ? 'online' : 'offline')
    online state

    View full-size slide

  11. window.addEventListener('offline', networkStatus);
    window.addEventListener('online', networkStatus);
    function networkStatus(e) {
    console.log(e.type);
    }
    online state

    View full-size slide

  12. caniuse.com/#feat=online-status
    BROWSER
    support

    View full-size slide

  13. where
    to use it?

    View full-size slide

  14. Provides access to a
    form of tactile feedback.
    vibration

    View full-size slide

  15. // Vibrate for 1 second
    navigator.vibrate(1000);
    // Vibrate with a pattern
    navigator.vibrate([400, 300, 300, 200, 500]);
    // Turn off vibration
    navigator.vibrate(0);
    VIBRATION
    vibrate wait vibrate wait vibrate

    View full-size slide

  16. // Super Mario
    navigator.vibrate([125,75,125,275,200,275,125,75,125,27
    5,200,600,200,600]);
    // Star Wars
    navigator.vibrate([500,110,500,110,450,110,200,110,170,
    40,450,110,200,110,170,40,500]);
    // Go Go Power Rangers
    navigator.vibrate([150,150,150,150,75,75,150,150,150,15
    0,450]);
    VIBRATION
    https://goo.gl/bX4ZQv

    View full-size slide

  17. caniuse.com/#feat=vibration
    BROWSER
    support

    View full-size slide

  18. where
    to use it?

    View full-size slide

  19. DEVICE
    orientation

    View full-size slide

  20. Provides access to device's
    physical orientation.
    device orientation

    View full-size slide

  21. device orientation
    window.addEventListener('deviceorientation', (e) => {
    console.log(‘Gamma:’, e.gamma);
    console.log(‘Beta:’, e.beta);
    console.log(‘Alpha:’, e.alpha);
    });

    View full-size slide

  22. device orientation
    let logo = document.querySelector(‘img');
    window.addEventListener('deviceorientation', (e) => {
    let tiltLR = e.gamma;
    let tiltFB = e.beta;
    logo.style.transform = `rotate(${tiltLR}deg)
    rotate3d(1,0,0, ${tiltFB * -1}deg)`;
    });

    View full-size slide

  23. caniuse.com/#feat=deviceorientation
    BROWSER
    support

    View full-size slide

  24. where
    to use it?

    View full-size slide

  25. clipboard
    copy & paste

    View full-size slide

  26. Standard APIs for
    interacting with the
    clipboard (copy/cut/paste).
    clipboard

    View full-size slide

  27. // 1. User interaction is required
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
    select();
    copy();
    });
    clipboard

    View full-size slide

  28. // 2. Programmatically select an element
    function select() {
    let input = document.querySelector('input');
    input.focus();
    input.setSelectionRange(0, input.value.length);
    }
    clipboard

    View full-size slide

  29. // 3. Copy selected element text
    function copy() {
    try {
    document.execCommand('copy');
    }
    catch (err) {
    console.error(err);
    }
    }
    clipboard

    View full-size slide

  30. document.addEventListener('copy', (e) => {
    console.log(e.target.value);
    });
    document.addEventListener('cut', (e) => {
    console.log(e.target.value);
    });
    document.addEventListener('paste', (e) => {
    console.log(e.clipboardData.getData('text/plain'));
    });
    clipboard

    View full-size slide

  31. caniuse.com/#feat=clipboard
    BROWSER
    support

    View full-size slide

  32. where
    to use it?

    View full-size slide

  33. light
    ambient

    View full-size slide

  34. Exposes sensor data that
    captures the light intensity.
    ambient light

    View full-size slide

  35. window.addEventListener('devicelight', (e) => {
    console.log(`${e.value} lux`);
    });
    ambient light

    View full-size slide

  36. let sensor = new AmbientLightSensor();
    sensor.start();
    sensor.onchange = (e) => {
    console.log(e.reading.illuminance);
    };
    sensor.stop();
    ambient light sensor

    View full-size slide

  37. BROWSER
    caniuse.com/#feat=ambient-light
    support

    View full-size slide

  38. where
    to use it?

    View full-size slide

  39. STATUS
    battery

    View full-size slide

  40. Allows a web page to access
    battery information from
    desktop and mobile devices.
    battery status

    View full-size slide

  41. navigator.getBattery().then((battery) => {
    console.log(`${battery.level * 100}%`);
    battery.addEventListener('levelchange', () => {
    console.log(`${this.level * 100}%`);
    });
    });
    battery status

    View full-size slide

  42. caniuse.com/#feat=battery-status
    BROWSER
    support

    View full-size slide

  43. where
    to use it?

    View full-size slide

  44. web
    components
    templates
    custom elements
    shadow dom
    html imports

    View full-size slide

  45. progressive
    web apps
    service workers
    push notifications
    offline support
    app manifest
    background sync

    View full-size slide

  46. WebAssembly, or wasm,
    is a low-level programming
    language for the client-side.
    web assembly

    View full-size slide

  47. under developm
    ent
    BROWSER
    support

    View full-size slide

  48. Experimental API that
    provides access to Virtual
    Reality devices, such as the
    Oculus Rift or Google
    Cardboard.
    web VR

    View full-size slide

  49. BROWSER
    support
    chromestatus.com/features#webvr

    View full-size slide

  50. Gives access to a game
    controller via USB.
    gamepad

    View full-size slide

  51. window.addEventListener('gamepadconnected', () => {
    let gp = navigator.getGamepads()[0];
    console.log(‘ID:’, gp.id);
    console.log(‘Axes:’, gp.axes.length);
    console.log(‘Buttons:’, gp.buttons.length);
    });
    gamepad

    View full-size slide

  52. window.addEventListener('gamepadconnected', gameLoop);
    function gameLoop() {
    let gp = navigator.getGamepads()[0];
    if (gp.buttons[0].pressed) {
    console.log('X');
    }
    requestAnimationFrame(gameLoop);
    }
    game loop

    View full-size slide

  53. caniuse.com/#feat=gamepad
    BROWSER
    support

    View full-size slide

  54. thank you
    @zenorocha
    so much

    View full-size slide