Intersection Observer
options = {
root: document.getElementById('#ancestor'),
rootMargin: "0px",
threshold: 0
};
Can be an element or null
null == viewport
Slide 11
Slide 11 text
Intersection Observer
options = {
root: document.getElementById('#ancestor'),
rootMargin: "0px",
threshold: 0
};
To adjust the root element bounding rectangle
Behaves like CSS’ margin property
Slide 12
Slide 12 text
Intersection Observer
options = {
root: document.getElementById('#ancestor'),
rootMargin: "0px",
threshold: 0
};
Points where you want to get notified
(callback to be called)
Slide 13
Slide 13 text
Intersection Observer
options = {
root: document.getElementById('#ancestor'),
rootMargin: "0px",
threshold: 0
};
0 == when every pixel is intersected
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Intersection Observer
new IntersectionObserver(callback, options);
Slide 16
Slide 16 text
Intersection Observer
observeCallback = (entries, observer) => {
entries.forEach(entry => {
// use entry read only attributes
});
};
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Intersection Observer
obs.observe(targetElement);
Observe an element against its rootElement
A single observer can ‘observe’ multiple elements
Slide 19
Slide 19 text
Intersection Observer
obs.disconnect();
Stop observing all elements
Slide 20
Slide 20 text
Intersection Observer
Demo
Slide 21
Slide 21 text
Photo by Davide Cantelli on Unsplash
requestIdleCallback
Slide 22
Slide 22 text
requestIdleCallback
Queues a function to be called during a
browser's idle periods
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
Payment Request
paymentResponse.complete("success").then(() => {
window.alert("Thanks for giving us your money");
});
“success" can also be “error" or “unknown” (default value)
Slide 45
Slide 45 text
Payment Request
Demo
Slide 46
Slide 46 text
Photo by Joel Filipe on Unsplash
Web Bluetooth
Slide 47
Slide 47 text
Web Bluetooth
Provides the ability to connect and
interact with Bluetooth Low Energy
peripherals.
Slide 48
Slide 48 text
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.
Slide 49
Slide 49 text
Web Bluetooth
navigator.bluetooth.requestDevice({
filters: [{ services: ["battery_service"]}]
});
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
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 };