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

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

Orlando Del Aguila

March 26, 2019
Tweet

More Decks by Orlando Del Aguila

Other Decks in Programming

Transcript

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

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

    0 }; Points where you want to get notified
 (callback to be called)
  3. 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
  4. 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
  5. 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
  6. Payment Request It doesn’t take care of payments. Only provides

    a faster way for users to provide their payment information.
  7. Payment Request { supportedMethods: "basic-card", data: { supportedNetworks: [ "visa",

    "mastercard", "amex", "jcb", "diners", "discover", "mir", "unionpay" ], supportedTypes: ["debit", "credit"] } }
  8. Payment Request { id: 'order-123', displayItems: [ { label: 'Example

    item', amount: {currency: 'USD', value: '1.00'} } ], total: { label: 'Total', amount: {currency: 'USD', value: '1.00'} } };
  9. Payment Request request .show() .then((paymentResponse) => { // Here we

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

    would process the payment // with Stripe for example })
  11. Payment Request paymentResponse.complete("success").then(() => { window.alert("Thanks for giving us your

    money"); }); “success" can also be “error" or “unknown” (default value)
  12. 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.
  13. 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
  14. 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 };