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

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