Web APIs 2019

Web APIs 2019

Presentation explaining and showing demos of 4 Web APIs I would like to use more this year. You can find the code here https://github.com/orlando/web-apis-talk

A0574e5093df6afd68f1c109c5a9bf22?s=128

Orlando Del Aguila

March 26, 2019
Tweet

Transcript

  1. Web APIs I ❤

  2. Web APIs I "

  3. Orlando Del Aguila

  4. @orlando @eatcodetravel @eatcodetravel orlandodelaguila.com

  5. Photo by Ludde Lorentz on Unsplash Intersection Observer

  6. Intersection Observer Observe intersection changes between an element and its

    ancestors
  7. Intersection Observer obs = new IntersectionObserver(callback, options); obs.observe(targetElement);

  8. Intersection Observer new IntersectionObserver(callback, options);

  9. Intersection Observer options = { root: document.getElementById('#ancestor'), rootMargin: "0px", threshold:

    0 };
  10. Intersection Observer options = { root: document.getElementById('#ancestor'), rootMargin: "0px", threshold:

    0 }; Can be an element or null null == viewport
  11. Intersection Observer options = { root: document.getElementById('#ancestor'), rootMargin: "0px", threshold:

    0 }; To adjust the root element bounding rectangle Behaves like CSS’ margin property
  12. Intersection Observer options = { root: document.getElementById('#ancestor'), rootMargin: "0px", threshold:

    0 }; Points where you want to get notified
 (callback to be called)
  13. Intersection Observer options = { root: document.getElementById('#ancestor'), rootMargin: "0px", threshold:

    0 }; 0 == when every pixel is intersected
  14. Intersection Observer options = { root: document.getElementById('#ancestor'), rootMargin: "0px", threshold:

    [0, 0.25, 0.5, 0.75, 1] }; Also accepts an Array Here we will be called 5 times at 25% intervals
  15. Intersection Observer new IntersectionObserver(callback, options);

  16. Intersection Observer observeCallback = (entries, observer) => { entries.forEach(entry =>

    { // use entry read only attributes }); };
  17. Intersection Observer observeCallback = (entries, observer) => { entries.forEach(entry =>

    { this.setState({ visible: entry.isIntersecting }); }); }; entry has multiple properties https://mzl.la/2Yv0P7F In the demo we only use: intersectionRatio => int isIntersecting => boolean
  18. Intersection Observer obs.observe(targetElement); Observe an element against its rootElement A

    single observer can ‘observe’ multiple elements
  19. Intersection Observer obs.disconnect(); Stop observing all elements

  20. Intersection Observer Demo

  21. Photo by Davide Cantelli on Unsplash requestIdleCallback

  22. requestIdleCallback Queues a function to be called during a browser's

    idle periods
  23. requestIdleCallback

  24. requestIdleCallback requestIdleCallback(callback, options);

  25. requestIdleCallback requestIdleCallback(callback, options);

  26. requestIdleCallback options = { timeout: 1000 } Only accepts timeout

    as milliseconds If callback has not been called when timeout ends, callback will be called in the next idle period
  27. requestIdleCallback requestIdleCallback(callback, options);

  28. requestIdleCallback (deadline) => { deadline.timeRemaining() -> int deadline.didTimeout -> bool

    };
  29. requestIdleCallback Demo

  30. Photo by Jonathan Saavedra on Unsplash Payment Request

  31. Payment Request Provide a consistent UX for users and merchants

  32. Payment Request It doesn’t take care of payments. Only provides

    a faster way for users to provide their payment information.
  33. Payment Request

  34. Payment Request new PaymentRequest( supportedMethods, cartDetails, options )

  35. Payment Request new PaymentRequest( supportedMethods, cartDetails, options )

  36. Payment Request { supportedMethods: "basic-card", data: { supportedNetworks: [ "visa",

    "mastercard", "amex", "jcb", "diners", "discover", "mir", "unionpay" ], supportedTypes: ["debit", "credit"] } }
  37. Payment Request new PaymentRequest( supportedMethods, cartDetails, options )

  38. Payment Request { id: 'order-123', displayItems: [ { label: 'Example

    item', amount: {currency: 'USD', value: '1.00'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '1.00'} } };
  39. Payment Request new PaymentRequest( supportedMethods, cartDetails, options )

  40. Payment Request { requestPayerEmail: true, requestPayerName: false, requestPayerPhone: true, requestShipping:

    false };
  41. Payment Request request .show() .then((paymentResponse) => { // Here we

    would process the payment // with Stripe for example })
  42. Payment Request request .show() .then((paymentResponse) => { // Here we

    would process the payment // with Stripe for example })
  43. Payment Request paymentResponse.requestId paymentResponse.methodName paymentResponse.details paymentResponse.shippingAddress paymentResponse.shippingOption paymentResponse.payerName paymentResponse.payerEmail paymentResponse.payerPhone

    paymentResponse.complete(status = "unknown") paymentResponse.retry()
  44. Payment Request paymentResponse.complete("success").then(() => { window.alert("Thanks for giving us your

    money"); }); “success" can also be “error" or “unknown” (default value)
  45. Payment Request Demo

  46. Photo by Joel Filipe on Unsplash Web Bluetooth

  47. Web Bluetooth Provides the ability to connect and interact with

    Bluetooth Low Energy peripherals.
  48. Web Bluetooth Bluetooth Low Energy (BLE) is different than good

    ol’ Bluetooth. BLE broadcasts the services it provides and you can filter only the devices you need before pairing.
  49. Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{ services: ["battery_service"]}] });

  50. Web Bluetooth navigator.bluetooth.requestDevice({ filters: [{ services: ["battery_service"]}] }).then((device) => {

    use device }; battery_service is just one of the many you can use here Here’s a list http://bit.ly/2HLqvHQ
  51. Web Bluetooth Each type of service has a different way

    of doing things We will look the code in the demo navigator.bluetooth.requestDevice({ filters: [{ services: ["battery_service"]}] }).then((device) => { use device };
  52. Web Bluetooth Demo

  53. Photo by Wyron A on Unsplash