1// JS Tip of the Day
2// Use signal to abort a Promise
3
4const controller = new AbortController();
5const { signal } = controller;
6
7fetch("https://jsonplaceholder.typicode.com/todos/", { signal })
8  .then(res => {
9    console.log(res);
10  })
11  .catch(err => {
12    console.error(err);
13});
14
15// Abort request
16controller.abort(); // The user aborted a request.

1// JS Tip of the Day
2// Write an error message based on an assertion 
3
4let isHero = false;
5console.assert(isHero, 'No, you aren\'t a hero!');
6// No, you aren't a hero!
7
8isHero = true;
9console.assert(isHero, 'No, you aren\'t a hero!'); // nothing to log
10

1// JS Tip of the Day
2// How to check if the document becomes visible or hidden
3
4document.addEventListener("visibilitychange", function() {
5  console.log(document.visibilityState);
6  /* 
7  	You can stop or activate the UI updates or any tasks that the user doesn't want to
8    have running in the background. 
9  */
10})

1// JS Tip of the Day
2// How to check DOM mutations
3
4// <p id="hero" class="old-hero">I'm Batman!</p>
5
6const callback = mutation => console.log(mutation);
7
8const observer = new MutationObserver(callback);
9const node = document.getElementById('hero');
10const config = {
11  attributes: true,
12  attributeFilter: ['class'],
13  attributeOldValue: true 
14};
15
16observer.observe(node, config);
17
18setTimeout(() => node.className = 'new-hero', 3000);
19/*
20[
21  {
22    ...
23	attributeName: "class",
24	...
25	oldValue: 'old-hero',
26	target: p#hero.new-hero { ... }
27	type: "attributes",
28	...
29  }
30]
31*/

1// JS Tip of the Day
2// How to detect online/offline status
3
4window.addEventListener('online',  checkNetworkStatus);
5window.addEventListener('offline', checkNetworkStatus);
6
7function checkNetworkStatus(e) {
8  return navigator.onLine ? "online" : "offline";
9}