mdn · wbamberg · Oct 1, 2022 · Oct 1, 2022 · Oct 1, 2022 · Oct 1, 2022
@@ -304,11 +304,11 @@ HTMLTableSectionElement.prototype.sort = function (cb) {
   Array.from(this.rows)
     .sort(cb)
     .forEach((e) => this.appendChild(this.removeChild(e)));
-}
+};
 
-document.querySelector('table').tBodies[0].sort(
-  (a, b) => a.textContent.localeCompare(b.textContent),
-);
+document
+  .querySelector("table")
+  .tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
 ```
 
 ##### Result
@@ -351,7 +351,7 @@ The following example adds an event handler to every `<th>` element of every `<t
 ##### JavaScript
 
 ```js
-const allTables = document.querySelectorAll('table');
+const allTables = document.querySelectorAll("table");
 
 for (const table of allTables) {
   const tBody = table.tBodies[0];
@@ -361,7 +361,7 @@ for (const table of allTables) {
   for (const th of headerCells) {
     const cellIndex = th.cellIndex;
 
-    th.addEventListener('click', () => {
+    th.addEventListener("click", () => {
       rows.sort((tr1, tr2) => {
         const tr1Text = tr1.cells[cellIndex].textContent;
         const tr2Text = tr2.cells[cellIndex].textContent;

@@ -28,12 +28,11 @@ class WordCount extends HTMLParagraphElement {
 
     // Constructor contents omitted for brevity
     // …
-
   }
 }
 
 // Define the new element
-customElements.define('word-count', WordCount, { extends: 'p' });
+customElements.define("word-count", WordCount, { extends: "p" });
 ```
 
 ```html

@@ -35,8 +35,8 @@ From your web server, generate a random base64-encoded string of at least 128 bi
 random number generator. Nonces should be generated differently each time the page loads (nonce only once!). For example, in nodejs:
 
 ```js
-const crypto = require('crypto');
-crypto.randomBytes(16).toString('base64');
+const crypto = require("crypto");
+crypto.randomBytes(16).toString("base64");
 // '8IBTHwOdqNKAWeKl7plt8g=='
 ```
 
@@ -46,7 +46,7 @@ The nonce generated on your backend code should now be used for the inline scrip
 
 ```html
 <script nonce="8IBTHwOdqNKAWeKl7plt8g==">
- // …
+  // …
 </script>
 ```
 
@@ -65,7 +65,7 @@ Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='
 For security reasons, the `nonce` content attribute is hidden (an empty string will be returned).
 
 ```js example-bad
-script.getAttribute('nonce'); // returns empty string
+script.getAttribute("nonce"); // returns empty string
 ```
 
 The [`nonce`](/en-US/docs/Web/API/HTMLElement/nonce) property is the only way to access nonces:

@@ -181,7 +181,7 @@ addEventListener(
   () => {
     orientationChanged = true;
   },
-  PASSIVE_LISTENER_OPTION,
+  PASSIVE_LISTENER_OPTION
 );
 
 addEventListener("resize", () =>

@@ -97,9 +97,9 @@ For example, suppose web content at `https://foo.example` wishes to invoke conte
 
 ```js
 const xhr = new XMLHttpRequest();
-const url = 'https://bar.other/resources/public-data/';
+const url = "https://bar.other/resources/public-data/";
 
-xhr.open('GET', url);
+xhr.open("GET", url);
 xhr.onreadystatechange = someHandler;
 xhr.send();
 ```
@@ -160,11 +160,11 @@ The following is an example of a request that will be preflighted:
 
 ```js
 const xhr = new XMLHttpRequest();
-xhr.open('POST', 'https://bar.other/resources/post-here/');
-xhr.setRequestHeader('X-PINGOTHER', 'pingpong');
-xhr.setRequestHeader('Content-Type', 'text/xml');
+xhr.open("POST", "https://bar.other/resources/post-here/");
+xhr.setRequestHeader("X-PINGOTHER", "pingpong");
+xhr.setRequestHeader("Content-Type", "text/xml");
 xhr.onreadystatechange = handler;
-xhr.send('<person><name>Arun</name></person>');
+xhr.send("<person><name>Arun</name></person>");
 ```
 
 The example above creates an XML body to send with the `POST` request. Also, a non-standard HTTP `X-PINGOTHER` request header is set. Such headers are not part of HTTP/1.1, but are generally useful to web applications. Since the request uses a `Content-Type` of `text/xml`, and since a custom header is set, this request is preflighted.
@@ -288,11 +288,11 @@ In this example, content originally loaded from `https://foo.example` makes a si
 
 ```js
 const invocation = new XMLHttpRequest();
-const url = 'https://bar.other/resources/credentialed-content/';
+const url = "https://bar.other/resources/credentialed-content/";
 
 function callOtherDomain() {
   if (invocation) {
-    invocation.open('GET', url, true);
+    invocation.open("GET", url, true);
     invocation.withCredentials = true;
     invocation.onreadystatechange = handler;
     invocation.send();

@@ -63,7 +63,7 @@ A share target can be registered using the following `share_target` manifest mem
     "params": {
       "title": "name",
       "text": "description",
-      "url": "link",
+      "url": "link"
     }
   }
 }
@@ -74,9 +74,9 @@ When a user selects your app in the system's share dialog, your PWA is launched,
 The [URLSearchParams](/en-US/docs/Web/API/URLSearchParams) interface can be useful to handle the shared data in your application and do something with it.
 
 ```js
-const sharedName = url.searchParams.get('name');
-const sharedDescription = url.searchParams.get('description');
-const sharedLink = url.searchParams.get('link');
+const sharedName = url.searchParams.get("name");
+const sharedDescription = url.searchParams.get("description");
+const sharedLink = url.searchParams.get("link");
 ```
 
 ### Receiving share data using POST
@@ -90,7 +90,7 @@ If the share request includes one or multiple files or causes a side effect in y
     "method": "POST",
     "enctype": "multipart/form-data",
     "params": {
-      "url": "link",
+      "url": "link"
     }
   }
 }
@@ -99,23 +99,25 @@ If the share request includes one or multiple files or causes a side effect in y
 You can either handle `POST` share data using server-side code, or, to provide a better experience for offline users, a `fetch` event listener can be used to intercept the HTTP request which allows to access the data in a [service worker](/en-US/docs/Web/API/Service_Worker_API).
 
 ```js
-self.addEventListener('fetch', event => {
+self.addEventListener("fetch", (event) => {
   // Regular requests not related to Web Share Target.
-  if (event.request.method !== 'POST') {
+  if (event.request.method !== "POST") {
     event.respondWith(fetch(event.request));
     return;
   }
 
-    // Requests related to Web Share Target.
-    event.respondWith((async () => {
-    const formData = await event.request.formData();
-    const link = formData.get('link') || '';
-    // Instead of the original URL `/save-bookmark/`, redirect
-    // the user to a URL returned by the `saveBookmark()`
-    // function, for example, `/`.
-    const responseUrl = await saveBookmark(link);
-    return Response.redirect(responseUrl, 303);
-  })());
+  // Requests related to Web Share Target.
+  event.respondWith(
+    (async () => {
+      const formData = await event.request.formData();
+      const link = formData.get("link") || "";
+      // Instead of the original URL `/save-bookmark/`, redirect
+      // the user to a URL returned by the `saveBookmark()`
+      // function, for example, `/`.
+      const responseUrl = await saveBookmark(link);
+      return Response.redirect(responseUrl, 303);
+    })()
+  );
 });
 ```
 

@@ -147,16 +147,18 @@ You might use code like this to accomplish the job:
 let startPlayPromise = videoElem.play();
 
 if (startPlayPromise !== undefined) {
-  startPlayPromise.then(() => {
-    // Start whatever you need to do only after playback
-    // has begun.
-  }).catch((error) => {
-    if (error.name === "NotAllowedError") {
-      showPlayButton(videoElem);
-    } else {
-      // Handle a load or playback error
-    }
-  });
+  startPlayPromise
+    .then(() => {
+      // Start whatever you need to do only after playback
+      // has begun.
+    })
+    .catch((error) => {
+      if (error.name === "NotAllowedError") {
+        showPlayButton(videoElem);
+      } else {
+        // Handle a load or playback error
+      }
+    });
 }
 ```
 
@@ -172,12 +174,13 @@ If you want to start playing the video after the first interaction with the page
 
 ```js
 let playAttempt = setInterval(() => {
-  videoElem.play()
+  videoElem
+    .play()
     .then(() => {
       clearInterval(playAttempt);
     })
     .catch((error) => {
-      console.log('Unable to play the video, User has not interacted yet.');
+      console.log("Unable to play the video, User has not interacted yet.");
     });
 }, 3000);
 ```

@@ -16,7 +16,6 @@ tags:
   - sound
 ---
 
-
 One of the realities of working with audio and video presentation and manipulation on the web is that there are a number of media formats available, of varying degrees of popularity and with a variety of capabilities. The availability of choices is good for the user, in that they can choose the format that suits their needs best. There is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web browser developer is left to its own devices when deciding which media file types and codecs to support.
 
 This places a small, but reasonably easily overcome, burden on the web developer: to properly handle the situation when the user's browser can't handle a particular type of media. This guide covers techniques you can use to develop web content that meets your media needs while providing the most broadly compatible experience possible. Topics we will examine fallbacks, baseline media formats, and error handling practices that will let your content work in as many situations as possible.

@@ -2036,11 +2036,11 @@ Given the constraints on how close to lossless you can get, you might consider u
 
 ```js
 const kbps = 1024;
-const Mbps = kbps*kbps;
+const Mbps = kbps * kbps;
 
 const options = {
   mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"',
-  bitsPerSecond: 800*Mbps,
+  bitsPerSecond: 800 * Mbps,
 };
 
 let recorder = new MediaRecorder(sourceStream, options);

@@ -16,7 +16,6 @@ tags:
   - personal
 ---
 
-
 As users use the web for more and more of their daily tasks, more of their private or personally-identifying information they share, ideally only with sites they trust. Cooperation among web content, the web browser, and the web server is needed to achieve as much privacy and information security as possible. In this article, we examine how to create web content that minimizes the risk of users' personal information or imagery being obtained unexpectedly by third parties.
 
 ## Security and privacy defined

@@ -73,7 +73,9 @@ Different log levels can be set via the `privacy.purge_trackers.logging.level` p
 For debugging purposes, it's easiest to trigger storage clearing by triggering the service directly via the [Browser Console command line](https://firefox-source-docs.mozilla.org/devtools-user/browser_console/index.html#browser-console-command-line). Note that this is different from the normal [Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html) you might use to debug a website, and requires the `devtools.chrome.enabled` pref to be set to `true` to use it interactively. Once you've enabled the Browser Console you can trigger storage clearing by running the following command:
 
 ```js
-await Components.classes["@mozilla.org/purge-tracker-service;1"].getService(Components.interfaces.nsIPurgeTrackerService).purgeTrackingCookieJars()
+await Components.classes["@mozilla.org/purge-tracker-service;1"]
+  .getService(Components.interfaces.nsIPurgeTrackerService)
+  .purgeTrackingCookieJars();
 ```
 
 The time until user interaction permissions expire can be set to a lower amount using the `privacy.userInteraction.expiration` pref. Note that you will have to set this pref before visiting the sites you want to test — it will not apply retroactively.

@@ -156,35 +156,35 @@ At the bottom of our [`index.js` file](https://github.com/mdn/pwa-examples/blob/
 
 ```js
 let deferredPrompt;
-const addBtn = document.querySelector('.add-button');
-addBtn.style.display = 'none';
+const addBtn = document.querySelector(".add-button");
+addBtn.style.display = "none";
 ```
 
 We hide the button initially because the PWA will not be available for install until it follows the A2HS criteria. When this happens, supporting browsers will fire a `beforeinstallprompt` event. We can then use a handler like the one below to handle the installation:
 
 ```js
-window.addEventListener('beforeinstallprompt', (e) => {
+window.addEventListener("beforeinstallprompt", (e) => {
   // Prevent Chrome 67 and earlier from automatically showing the prompt
   e.preventDefault();
   // Stash the event so it can be triggered later.
   deferredPrompt = e;
   // Update UI to notify the user they can add to home screen
-  addBtn.style.display = 'block';
+  addBtn.style.display = "block";
 
-  addBtn.addEventListener('click', (e) => {
+  addBtn.addEventListener("click", (e) => {
     // hide our user interface that shows our A2HS button
-    addBtn.style.display = 'none';
+    addBtn.style.display = "none";
     // Show the prompt
     deferredPrompt.prompt();
     // Wait for the user to respond to the prompt
     deferredPrompt.userChoice.then((choiceResult) => {
-        if (choiceResult.outcome === 'accepted') {
-          console.log('User accepted the A2HS prompt');
-        } else {
-          console.log('User dismissed the A2HS prompt');
-        }
-        deferredPrompt = null;
-      });
+      if (choiceResult.outcome === "accepted") {
+        console.log("User accepted the A2HS prompt");
+      } else {
+        console.log("User dismissed the A2HS prompt");
+      }
+      deferredPrompt = null;
+    });
   });
 });
 ```

@@ -20,7 +20,6 @@ tags:
   - Web
 ---
 
-
 Web application installation is a feature available in modern browsers that allows users to choose to easily and conveniently "install" a web application on their device so they can access it in the same way they would any other installed app. Depending on the device and features of the operating system and browser, this can result in what is essentially a fully featured application (for example, using [WebAPK](https://web.dev/webapks/) on Android) or as a shortcut added to their device's screen. This guide explains how installation is performed, what it means, and what you need to do as a developer to let your users take advantage of it.
 
 ## Why installation?

@@ -82,11 +82,11 @@ Those images will be loaded via JavaScript _after_ the site finishes building th
 The `app.js` file processes the `data-src` attributes like so:
 
 ```js
-let imagesToLoad = document.querySelectorAll('img[data-src]');
+let imagesToLoad = document.querySelectorAll("img[data-src]");
 const loadImages = (image) => {
-  image.setAttribute('src', image.getAttribute('data-src'));
+  image.setAttribute("src", image.getAttribute("data-src"));
   image.onload = () => {
-    image.removeAttribute('data-src');
+    image.removeAttribute("data-src");
   };
 };
 ```
@@ -145,7 +145,7 @@ This is a progressive enhancement to the previously working example — [Interse
 Here's what the relevant code looks like:
 
 ```js
-if ('IntersectionObserver' in window) {
+if ("IntersectionObserver" in window) {
   const observer = new IntersectionObserver((items, observer) => {
     items.forEach((item) => {
       if (item.isIntersecting) {

@@ -250,16 +250,16 @@ I put Modernizr inside my `js/lib` directory, then included it by putting the fo
 With Modernizr in place, we can now use the following JS block to test whether media queries are supported, and if not, to load in [respond.js](https://github.com/scottjehl/Respond), Scott Jehl's `matchMedia` and media query polyfill.
 
 ```js
-if (!Modernizr.mq('only all')) {
-  require('respond');
+if (!Modernizr.mq("only all")) {
+  require("respond");
 }
 ```
 
 `matchMedia` is also very useful in many other ways. Imagine you wanted to include some kind of WebGL chart in the desktop version of the site requiring a WebGL library like Three but didn't want it included in the mobile version? You could create a block to only load the library in the case of narrow screen devices:
 
 ```js
 if (window.matchMedia("(min-width: 481px)").matches) {
-  require('three');
+  require("three");
 }
 ```
 
@@ -269,7 +269,7 @@ We can, therefore, save the bandwidth for browsers that don't need it.
 
 Back to Modernizr! The reason why it is so useful is that it provides a mechanism to selectively serve both CSS and JavaScript. Modernizr stores the results of all its feature tests as classes on the HTML element. For example, the Modernizr in our example app is testing for multiple background image and rgba support. When they are not supported, the `<html>` tag looks like this:
 
-```html
+```html-nolint
 <html class="js no-rgba no-multiplebgs">
 ```