Web APIs que você (provavelmente) não sabia que existiam

E190023b66e2b8aa73a842b106920c93?s=47 Zeno Rocha
August 06, 2016

Web APIs que você (provavelmente) não sabia que existiam

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

August 06, 2016
Tweet

Transcript

  1. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 7.
  7. 8.
  8. 9.
  9. 10.
  10. 11.
  11. 12.
  12. 13.
  13. 14.
  14. 15.
  15. 16.
  16. 19.

    Provê uma API que checa se a aba atual está

    visível ou não no navegador. page visibility
  17. 21.
  18. 22.

    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; } });
  19. 25.
  20. 26.
  21. 32.
  22. 34.
  23. 35.
  24. 37.

    // 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
  25. 41.
  26. 42.
  27. 46.

    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)`; });
  28. 47.
  29. 50.
  30. 53.
  31. 54.

    // 1. User interaction is required let button = document.querySelector('button');

    button.addEventListener('click', () => { select(); copy(); }); clipboard
  32. 55.

    // 2. Programmatically select an element function select() { let

    input = document.querySelector('input'); input.focus(); input.setSelectionRange(0, input.value.length); } clipboard
  33. 56.

    // 3. Copy selected element text function copy() { try

    { document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard
  34. 57.

    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
  35. 58.
  36. 59.
  37. 62.
  38. 63.
  39. 65.
  40. 67.
  41. 68.
  42. 69.

    let sensor = new AmbientLightSensor(); sensor.start(); sensor.onchange = (e) =>

    { console.log(e.reading.illuminance); }; sensor.stop(); ambient light sensor
  43. 72.
  44. 73.
  45. 79.
  46. 80.
  47. 84.

    WebAssembly, ou wasm, é um novo formato binário para desenvolvimento

    de aplicações de baixo nível. web assembly
  48. 86.
  49. 87.
  50. 88.

    Uma API experimental que trás o mundo de Realidade Virtual

    para web usando Oculus Rift ou Google Cardboard por exemplo. web VR
  51. 90.
  52. 91.
  53. 93.

    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
  54. 94.

    window.addEventListener('gamepadconnected', gameLoop); function gameLoop() { let gp = navigator.getGamepads()[0]; if

    (gp.buttons[0].pressed) { console.log('X'); } requestAnimationFrame(gameLoop); } game loop
  55. 95.
  56. 97.
  57. 98.
  58. 99.
  59. 100.
  60. 101.
  61. 102.
  62. 103.