From 043f6a8999215ba292ef469cd4869b22329d4359 Mon Sep 17 00:00:00 2001
From: Vadim Makeev <hi@pepelsbey.dev>
Date: Wed, 17 Jan 2024 12:18:06 +0100
Subject: [PATCH 01/21] Add Shadow DOM examples (#245)

---
 shadow-dom/README.md                   |  4 +++
 shadow-dom/shadowrootmode/scoping.html | 46 ++++++++++++++++++++++++++
 shadow-dom/shadowrootmode/simple.html  | 19 +++++++++++
 3 files changed, 69 insertions(+)
 create mode 100644 shadow-dom/README.md
 create mode 100644 shadow-dom/shadowrootmode/scoping.html
 create mode 100644 shadow-dom/shadowrootmode/simple.html
diff --git a/shadow-dom/README.md b/shadow-dom/README.md
new file mode 100644
index 00000000..3aa7dd99
--- /dev/null
+++ b/shadow-dom/README.md
@@ -0,0 +1,4 @@
+# Shadow DOM
+
+- [Simple `<template shadowrootmode="open">` example](https://mdn.github.io/dom-examples/shadow-dom/shadowrootmode/simple.html)
+- [CSS scoping with `<template shadowrootmode="open">`](https://mdn.github.io/dom-examples/shadow-dom/shadowrootmode/scoping.html)
diff --git a/shadow-dom/shadowrootmode/scoping.html b/shadow-dom/shadowrootmode/scoping.html
new file mode 100644
index 00000000..64be1183
--- /dev/null
+++ b/shadow-dom/shadowrootmode/scoping.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>CSS scoping in declarative shadow DOM</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <p hidden>⛔ Your browser doesn't support <code>shadowrootmode</code> attribute yet.</p>
+    <article>
+      <style>
+        p {
+          padding: 8px;
+          background-color: wheat;
+        }
+      </style>
+      <p>I'm in the DOM.</p>
+    </article>
+    <article>
+      <template shadowrootmode="open">
+        <style>
+          p {
+            padding: 8px;
+            background-color: plum;
+          }
+        </style>
+        <p>I'm in the Shadow DOM.</p>
+      </template>
+    </article>
+
+    <script>
+      const isShadowRootModeSupported = HTMLTemplateElement.prototype.hasOwnProperty('shadowRootMode');
+
+      document.querySelector('p[hidden]').toggleAttribute('hidden', isShadowRootModeSupported);
+    </script>
+    <!--
+      Used in:
+      - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
+    -->
+  </body>
+</html>
diff --git a/shadow-dom/shadowrootmode/simple.html b/shadow-dom/shadowrootmode/simple.html
new file mode 100644
index 00000000..37ceca16
--- /dev/null
+++ b/shadow-dom/shadowrootmode/simple.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Declarative shadow DOM</title>
+  </head>
+  <body>
+    <div id="host">
+      <template shadowrootmode="open">
+        <span>I'm in the shadow DOM</span>
+      </template>
+    </div>
+    <!--
+      Used in:
+      - https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM
+    -->
+  </body>
+</html>

From 40cb0f10d859384a6160861ccbbf78f337fed6a0 Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrickbrosset@gmail.com>
Date: Wed, 31 Jan 2024 16:51:04 +0100
Subject: [PATCH 02/21] New EditContext API demo (#248)

---
 edit-context/README.md                |   9 +
 edit-context/html-editor/index.html   | 501 ++++++++++++++++++++++++++
 edit-context/html-editor/tokenizer.js | 194 ++++++++++
 3 files changed, 704 insertions(+)
 create mode 100644 edit-context/README.md
 create mode 100644 edit-context/html-editor/index.html
 create mode 100644 edit-context/html-editor/tokenizer.js

diff --git a/edit-context/README.md b/edit-context/README.md
new file mode 100644
index 00000000..c0ed2008
--- /dev/null
+++ b/edit-context/README.md
@@ -0,0 +1,9 @@
+# EditContext API demos
+
+This folder contains demos for the [EditContext API](https://developer.mozilla.org/docs/Web/API/EditContext_API).
+
+## Demos
+
+* **HTML Editor**: [Source code](https://github.com/mdn/dom-examples/tree/main/edit-context/html-editor) | [Live demo](https://mdn.github.io/dom-examples/edit-context/html-editor)
+
+  This demo shows how to use the EditContext API to create a simple HTML editor. It's used in [Using the EditContext API](https://developer.mozilla.org/en-US/docs/Web/API/EditContext_API/Guide) tutorial.
diff --git a/edit-context/html-editor/index.html b/edit-context/html-editor/index.html
new file mode 100644
index 00000000..2c6fb6a5
--- /dev/null
+++ b/edit-context/html-editor/index.html
@@ -0,0 +1,501 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Edit Context API: HTML editor demo</title>
+
+  <style>
+    html,
+    body {
+      font-size: .9rem;
+      font-family: consolas, monospace;
+      margin: 0;
+      height: 100%;
+      box-sizing: border-box;
+    }
+
+    body {
+      padding: 1rem;
+      display: grid;
+      grid-template-rows: 1fr min-content;
+      gap: 1rem;
+      place-items: center;
+    }
+
+    #html-editor {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      border-radius: .5rem;
+      padding: 1rem;
+      overflow: auto;
+      white-space: pre;
+      tab-size: 2;
+      caret-color: red;
+      background: #000;
+      line-height: 1.6;
+      transition: line-height .2s;
+      color: red;
+    }
+
+    #html-editor.debug {
+      line-height: 2.4;
+    }
+
+    #html-editor::selection {
+      color: white;
+      background: red;
+    }
+
+    #html-editor.is-composing {
+      box-shadow: 0 0 0 .25rem red;
+    }
+
+    [data-token-pos] {
+      margin: 0;
+      transition: margin .2s;
+    }
+
+    .debug [data-token-pos] {
+      position: relative;
+      margin: 0 .2rem;
+    }
+
+    .debug [data-token-pos]::before {
+      position: absolute;
+      content: attr(data-token-pos);
+      color: #ddd;
+      font-size: .5rem;
+      top: -1rem;
+      left: 0;
+      line-height: 1;
+      padding: .1rem .1rem 1rem .1rem;
+      background-image:
+        linear-gradient(to bottom, #999 0 1px, transparent 1px .7rem, #999 .7rem calc(.7rem + 1px), transparent 0),
+        linear-gradient(to right, #999 0 1px, transparent 1px calc(100% - 1px), #999 0),
+        linear-gradient(to bottom, #333 0 .7rem, transparent 0),
+        linear-gradient(to right, #999 0 1px, transparent 0);
+      background-size: 100% 100%, 100% .7rem, 100% 100%, 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    .token-openTagStart,
+    .token-openTagEnd,
+    .token-closeTagStart,
+    .token-closeTagEnd,
+    .token-selfClose {
+      background: rgb(7 53 92);
+      margin: 0 2px;
+      color: white;
+      border-radius: .25rem;
+    }
+
+    .token-equal {
+      color: white;
+    }
+
+    .token-tagName {
+      font-weight: bold;
+      color: rgb(117, 186, 242);
+    }
+
+    .token-attributeName {
+      color: rgb(207, 81, 198);
+    }
+
+    .token-attributeValue {
+      font-style: italic;
+      color: rgb(127 230 127);
+      border: 1px dashed #8c8c8c;
+      border-width: 1px 0 1px 0;
+    }
+
+    .token-quoteStart,
+    .token-quoteEnd {
+      font-weight: bold;
+      color: rgb(127 230 127);
+      border: 1px solid #8c8c8c;
+      border-width: 1px 0 1px 1px;
+      border-radius: .25rem 0 0 .25rem;
+    }
+
+    .token-quoteEnd {
+      border-width: 1px 1px 1px 0;
+      border-radius: 0 .25rem .25rem 0;
+    }
+
+    .token-text {
+      color: #6a6a6a;
+      padding: 0 .25rem;
+    }
+
+
+    ::highlight(ime-solid-thin) {
+      text-decoration: underline 1px;
+    }
+
+    ::highlight(ime-solid-thick) {
+      text-decoration: underline 2px;
+    }
+
+    ::highlight(ime-double-thin) {
+      text-decoration: underline double 1px;
+    }
+
+    ::highlight(ime-double-thick) {
+      text-decoration: underline double 2px;
+    }
+
+    ::highlight(ime-dotted-thin) {
+      text-decoration: underline dotted 1px;
+    }
+
+    ::highlight(ime-dotted-thick) {
+      text-decoration: underline dotted 2px;
+    }
+
+    ::highlight(ime-dashed-thin) {
+      text-decoration: underline dashed 1px;
+    }
+
+    ::highlight(ime-dashed-thick) {
+      text-decoration: underline dashed 2px;
+    }
+
+    ::highlight(ime-wavy-thin) {
+      text-decoration: underline wavy 1px;
+    }
+
+    ::highlight(ime-wavy-thick) {
+      text-decoration: underline wavy 2px;
+    }
+
+    ::highlight(ime-squiggle-thin) {
+      text-decoration: underline wavy 1px;
+    }
+
+    ::highlight(ime-squiggle-thick) {
+      text-decoration: underline wavy 2px;
+    }
+
+    .controls label {
+      display: flex;
+      align-items: center;
+    }
+
+    .debug .debug-overlay {
+      position: absolute;
+      background: rgba(255, 0, 0, .2);
+      border: 1px solid red;
+    }
+  </style>
+</head>
+
+<body>
+
+  <!-- The editor element -->
+  <div id="html-editor" spellcheck="false"></div>
+
+  <!-- Some debug controls -->
+  <div class="controls">
+    <label><input type="checkbox" id="debug">Debug</label>
+  </div>
+
+  <script type="module">
+    import { tokenizeHTML } from "./tokenizer.js";
+
+    const IS_EDIT_CONTEXT_SUPPORTED = 'EditContext' in window;
+    const IS_CUSTOM_HIGHLIGHT_SUPPORTED = 'Highlight' in window;
+
+    // The editor element.
+    const editorEl = document.getElementById("html-editor");
+
+    // The current tokens from the html text.
+    let currentTokens = [];
+
+    let isDebug = false;
+    const debugCheckbox = document.querySelector(".controls #debug");
+    debugCheckbox.addEventListener("change", e => {
+      editorEl.classList.toggle("debug", e.target.checked);
+      isDebug = e.target.checked;
+      render();
+    });
+
+    // Instances of CSS custom Highlight objects, used to render
+    // the IME composition text formats.
+    const imeHighlights = {
+      "solid-thin": null,
+      "solid-thick": null,
+      "double-thin": null,
+      "double-thick": null,
+      "dotted-thin": null,
+      "dotted-thick": null,
+      "dashed-thin": null,
+      "dashed-thick": null,
+      "wavy-thin": null,
+      "wavy-thick": null,
+      "squiggle-thin": null,
+      "squiggle-thick": null
+    };
+    if (IS_CUSTOM_HIGHLIGHT_SUPPORTED) {
+      for (const [key, value] of Object.entries(imeHighlights)) {
+        imeHighlights[key] = new Highlight();
+        CSS.highlights.set(`ime-${key}`, imeHighlights[key]);
+      }
+    } else {
+      console.warn("Custom highlights are not supported in this browser. IME formats will not be rendered.");
+    }
+
+    (function () {
+      if (!IS_EDIT_CONTEXT_SUPPORTED) {
+        editorEl.textContent = "Sorry, your browser doesn't support the EditContext API. This demo will not work.";
+        return;
+      }
+
+      // Instantiate the EditContext object.
+      const editContext = new EditContext({
+        text: "<html>\n  <body id=foo>\n    <h1 id='header'>Cool Title</h1>\n    <p class=\"wow\">hello<br/>How are you? test</p>\n  </body>\n</html>"
+      });
+
+      // Attach the EditContext object to the editor element.
+      // This makes the element focusable and able to receive text input.
+      editorEl.editContext = editContext;
+
+      // Update the control bounds (i.e. where the editor is on the screen)
+      // now, and when the window is resized.
+      // This helps the OS position the IME composition window correctly.
+      function updateControlBounds() {
+        const editorBounds = editorEl.getBoundingClientRect();
+        editContext.updateControlBounds(editorBounds);
+      }
+      updateControlBounds();
+      window.addEventListener("resize", updateControlBounds);
+
+      // Update the selection and selection bounds in the EditContext object.
+      // This helps the OS position the IME composition window correctly.
+      function updateSelection(start, end) {
+        editContext.updateSelection(start, end);
+        // Get the bounds of the selection.
+        editContext.updateSelectionBounds(document.getSelection().getRangeAt(0).getBoundingClientRect());
+      }
+
+      // The render function is used to update the view of the editor.
+      // The EditContext object is our "model", and the editorEl is our "view".
+      // The render function's job is to update the view when the model changes.
+      function render(text = editContext.text, selectionStart = editContext.selectionStart, selectionEnd = editContext.selectionEnd) {
+        // Empty the editor. We're re-rendering everything.
+        editorEl.innerHTML = "";
+
+        // Tokenize the text.
+        currentTokens = tokenizeHTML(text);
+
+        // Render each token.
+        for (const token of currentTokens) {
+          const span = document.createElement("span");
+          span.classList.add(`token-${token.type}`);
+          span.textContent = token.value;
+          span.dataset.tokenPos = token.pos;
+          editorEl.appendChild(span);
+
+          // Store the node in the token so we can find it later.
+          token.node = span;
+        }
+
+        // Move the selection to the correct location.
+        // It was lost when we updated the DOM.
+        // The EditContext API gives us the selection as text offsets.
+        // Convert it into a DOM selection.
+        const { anchorNode, anchorOffset, extentNode, extentOffset } = convertFromOffsetsToSelection(selectionStart, selectionEnd);
+        document.getSelection().setBaseAndExtent(anchorNode, anchorOffset, extentNode, extentOffset);
+
+        // Render the character bounds in debug mode.
+        if (isDebug) {
+          const bounds = editContext.characterBounds();
+          for (const bound of bounds) {
+            const overlay = document.createElement("div");
+            overlay.classList.add("debug-overlay");
+            overlay.style.top = `${bound.top}px`;
+            overlay.style.left = `${bound.left}px`;
+            overlay.style.width = `${bound.width}px`;
+            overlay.style.height = `${bound.height}px`;
+            editorEl.appendChild(overlay);
+          }
+        }
+      }
+
+      // Listen to the EditContext's textupdate event.
+      // This tells us when text input happens. We use it to re-render the view.
+      editContext.addEventListener("textupdate", e => {
+        render(editContext.text, e.selectionStart, e.selectionEnd);
+      });
+
+      // Visually show when we're composing text, like when using an IME,
+      // or voice dictation.
+      editContext.addEventListener("compositionstart", e => {
+        editorEl.classList.add("is-composing");
+      });
+      editContext.addEventListener("compositionend", e => {
+        editorEl.classList.remove("is-composing");
+      });
+
+      // Update the character bounds when the EditContext needs it.
+      editContext.addEventListener("characterboundsupdate", e => {
+        const tokenNodes = convertFromOffsetsToListOfRenderedTokenNodes(e.rangeStart, e.rangeEnd);
+
+        const charBounds = tokenNodes.map(({ node, nodeOffset, charOffset }) => {
+          const range = document.createRange();
+          range.setStart(node.firstChild, charOffset - nodeOffset);
+          range.setEnd(node.firstChild, charOffset - nodeOffset + 1);
+          return range.getBoundingClientRect();
+        });
+
+        editContext.updateCharacterBounds(e.rangeStart, charBounds);
+      });
+
+      // Draw IME composition text formats if needed.
+      editContext.addEventListener("textformatupdate", e => {
+        const formats = e.getTextFormats();
+
+        for (const format of formats) {
+          const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
+
+          // Find the nodes in the view that are in the range.
+          const { anchorNode, anchorOffset, extentNode, extentOffset } = convertFromOffsetsToSelection(rangeStart, rangeEnd);
+          const highlight = imeHighlights[`${format.underlineStyle.toLowerCase()}-${format.underlineThickness.toLowerCase()}`];
+          if (highlight) {
+            const range = document.createRange();
+            range.setStart(anchorNode, anchorOffset);
+            range.setEnd(extentNode, extentOffset);
+            highlight.add(range);
+          }
+        }
+      });
+
+      // Handle key presses that are not already handled by the EditContext.
+      editorEl.addEventListener("keydown", e => {
+        if (e.key === "Tab") {
+          e.preventDefault();
+          editContext.updateText(
+            editContext.selectionStart,
+            editContext.selectionEnd,
+            "\t"
+          );
+          updateSelection(editContext.selectionStart + 1, editContext.selectionStart + 1);
+          render();
+        } else if (e.key === "Enter") {
+          editContext.updateText(
+            editContext.selectionStart,
+            editContext.selectionEnd,
+            "\n"
+          );
+          updateSelection(editContext.selectionStart + 1, editContext.selectionStart + 1);
+          render();
+        }
+      });
+
+      // Listen to selectionchange events to let the EditContext know where it is.
+      document.addEventListener("selectionchange", () => {
+        const selection = document.getSelection();
+        const offsets = convertFromSelectionToOffsets(selection);
+        if (offsets) {
+          updateSelection(offsets.start, offsets.end);
+        }
+      });
+
+      // Find the tokens in currentTokens that are in the given range and return
+      // the corresponding nodes.
+      function convertFromOffsetsToListOfRenderedTokenNodes(start, end) {
+        const tokenNodes = [];
+
+        for (let offset = start; offset < end; offset++) {
+          const token = currentTokens.find(token => token.pos <= offset && token.pos + token.value.length > offset);
+          if (token) {
+            tokenNodes.push({ node: token.node, nodeOffset: token.pos, charOffset: offset });
+          }
+        }
+
+        return tokenNodes;
+      }
+
+      // The EditContext object only knows about a plain text string and about
+      // character offsets. However, our editor view renders the text by using
+      // DOM nodes. So we sometimes need to convert between the two.
+      // The two utility functions below convert between selection objects and
+      // text offsets.
+      function convertFromSelectionToOffsets(selection) {
+        const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
+
+        let anchorNodeFound = false;
+        let extentNodeFound = false;
+        let anchorOffset = 0;
+        let extentOffset = 0;
+
+        while (treeWalker.nextNode()) {
+          const node = treeWalker.currentNode;
+          if (node === selection.anchorNode) {
+            anchorNodeFound = true;
+            anchorOffset += selection.anchorOffset;
+          }
+
+          if (node === selection.extentNode) {
+            extentNodeFound = true;
+            extentOffset += selection.extentOffset;
+          }
+
+          if (!anchorNodeFound) {
+            anchorOffset += node.textContent.length;
+          }
+          if (!extentNodeFound) {
+            extentOffset += node.textContent.length;
+          }
+        }
+
+        if (!anchorNodeFound || !extentNodeFound) {
+          return null;
+        }
+
+        if (anchorOffset > extentOffset) {
+          [anchorOffset, extentOffset] = [extentOffset, anchorOffset];
+        }
+
+        return { start: anchorOffset, end: extentOffset };
+      }
+
+      function convertFromOffsetsToSelection(start, end) {
+        const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
+
+        let offset = 0;
+        let anchorNode = null;
+        let anchorOffset = 0;
+        let extentNode = null;
+        let extentOffset = 0;
+
+        while (treeWalker.nextNode()) {
+          const node = treeWalker.currentNode;
+
+          if (!anchorNode && offset + node.textContent.length >= start) {
+            anchorNode = node;
+            anchorOffset = start - offset;
+          }
+
+          if (offset + node.textContent.length >= end) {
+            extentNode = node;
+            extentOffset = end - offset;
+            break;
+          }
+
+          offset += node.textContent.length;
+        }
+
+        return { anchorNode, anchorOffset, extentNode, extentOffset };
+      }
+
+      // Render the initial view.
+      render();
+    })();
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/edit-context/html-editor/tokenizer.js b/edit-context/html-editor/tokenizer.js
new file mode 100644
index 00000000..2f9fd1ff
--- /dev/null
+++ b/edit-context/html-editor/tokenizer.js
@@ -0,0 +1,194 @@
+const WHITESPACE = [" ", "\n", "\t"];
+
+function getOpenTagName(htmlString, pos) {
+  let tagName = "";
+  let char = htmlString.charAt(pos);
+
+  while (char !== ">" && char !== " " && char !== "/" && char !== "") {
+    tagName += char;
+    char = htmlString.charAt(++pos);
+  }
+
+  return tagName;
+}
+
+function getCloseTagName(htmlString, pos) {
+  let tagName = "";
+  let char = htmlString.charAt(pos);
+
+  while (char !== ">" && char !== "") {
+    tagName += char;
+    char = htmlString.charAt(++pos);
+  }
+
+  return tagName;
+}
+
+function getWhiteSpace(htmlString, pos) {
+  let whitespace = "";
+  let char = htmlString.charAt(pos);
+
+  while (WHITESPACE.includes(char) && char !== "") {
+    whitespace += char;
+    char = htmlString.charAt(++pos);
+  }
+
+  return whitespace;
+}
+
+function getAttributeName(htmlString, pos) {
+  let attributeName = "";
+  let char = htmlString.charAt(pos);
+
+  while (char !== "=" && char !== " " && char !== ">" && char !== "") {
+    attributeName += char;
+    char = htmlString.charAt(++pos);
+  }
+
+  return attributeName;
+}
+
+function getAttributeValue(htmlString, pos, quote) {
+  let attributeValue = "";
+  let char = htmlString.charAt(pos);
+
+  const isAtEnd = (c) => {
+    if (quote) {
+      return c === quote || c === "";
+    }
+    return c === " " || c === ">" || c === "/" || c === "";
+  };
+
+  while (!isAtEnd(char)) {
+    attributeValue += char;
+    char = htmlString.charAt(++pos);
+  }
+
+  return attributeValue;
+}
+
+function getText(htmlString, pos) {
+  let text = "";
+  let char = htmlString.charAt(pos);
+
+  while (char !== "<" && char !== "") {
+    text += char;
+    char = htmlString.charAt(++pos);
+  }
+
+  return text;
+}
+
+export function tokenizeHTML(htmlString) {
+  let pos = 0;
+  let isInTag = false;
+  let isInAttribute = false;
+  let isAfterAttributeEqual = false;
+
+  const tokens = [];
+
+  while (pos < htmlString.length) {
+    const char = htmlString.charAt(pos);
+    const nextChar = htmlString.charAt(pos + 1);
+
+    if (char === "<" && nextChar !== "/" && !isInTag && !isInAttribute) {
+      isInTag = true;
+      tokens.push({ type: "openTagStart", value: "<", pos });
+      pos++;
+      const tagName = getOpenTagName(htmlString, pos);
+      tokens.push({ type: "tagName", value: tagName, pos });
+      pos += tagName.length;
+      continue;
+    }
+
+    if (WHITESPACE.includes(char) && isInTag) {
+      const whitespace = getWhiteSpace(htmlString, pos);
+      tokens.push({ type: "whitespace", value: whitespace, pos });
+      pos += whitespace.length;
+      isInAttribute = false;
+      continue;
+    }
+
+    if (char === ">" && isInTag && !isInAttribute) {
+      isInTag = false;
+      tokens.push({ type: "openTagEnd", value: ">", pos });
+      pos++;
+      continue;
+    }
+
+    if (isInTag && !isInAttribute && char === "/" && nextChar === ">") {
+      isInTag = false;
+      tokens.push({ type: "selfClose", value: "/>", pos });
+      pos += 2;
+      continue;
+    }
+
+    if (isInTag && !isInAttribute) {
+      isInAttribute = true;
+      const attributeName = getAttributeName(htmlString, pos);
+      tokens.push({ type: "attributeName", value: attributeName, pos });
+      pos += attributeName.length;
+
+      if (htmlString.charAt(pos) !== "=" && htmlString.charAt(pos) !== "'" && htmlString.charAt(pos) !== '"') {
+        isInAttribute = false;
+      }
+
+      continue;
+    }
+
+    if (char === "=" && isInAttribute && isInTag) {
+      isAfterAttributeEqual = true;
+      tokens.push({ type: "equal", value: "=", pos });
+      pos++;
+      continue;
+    }
+
+    if (isAfterAttributeEqual && isInAttribute && isInTag) {
+      const hasQuote = char === "'" || char === '"';
+      const quote = hasQuote ? char : "";
+
+      if (hasQuote) {
+        tokens.push({ type: "quoteStart", value: quote, pos });
+        pos++;
+      }
+
+      const attributeValue = getAttributeValue(htmlString, pos, quote);
+      tokens.push({ type: "attributeValue", value: attributeValue, pos });
+      pos += attributeValue.length;
+
+      if (hasQuote && htmlString.charAt(pos) === quote) {
+        tokens.push({ type: "quoteEnd", value: quote, pos });
+        pos++;
+      }
+
+      isInAttribute = false;
+      isAfterAttributeEqual = false;
+      continue;
+    }
+
+    if (!isInTag && char === "<" && nextChar === "/") {
+      tokens.push({ type: "closeTagStart", value: "</", pos });
+      pos += 2;
+
+      const tagName = getCloseTagName(htmlString, pos);
+      tokens.push({ type: "tagName", value: tagName, pos });
+      pos += tagName.length;
+
+      if (htmlString.charAt(pos) === ">") {
+        tokens.push({ type: "closeTagEnd", value: ">", pos });
+        pos++;
+      }
+
+      continue;
+    }
+
+    if (!isInTag) {
+      const text = getText(htmlString, pos);
+      tokens.push({ type: "text", value: text, pos });
+      pos += text.length;
+      continue;
+    }
+  }
+
+  return tokens;
+}

From d6a2a23df40ab4efa15a2754af9bbf00ea54c97c Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrick.brosset@microsoft.com>
Date: Thu, 1 Feb 2024 13:05:00 +0100
Subject: [PATCH 03/21] EditContext: Handle backward selections and remove
 double underline (#249)

Handle backward selections and remove double underline
---
 edit-context/html-editor/index.html | 53 ++++++++++++-----------------
 1 file changed, 22 insertions(+), 31 deletions(-)

diff --git a/edit-context/html-editor/index.html b/edit-context/html-editor/index.html
index 2c6fb6a5..6c6388d8 100644
--- a/edit-context/html-editor/index.html
+++ b/edit-context/html-editor/index.html
@@ -140,14 +140,6 @@
       text-decoration: underline 2px;
     }
 
-    ::highlight(ime-double-thin) {
-      text-decoration: underline double 1px;
-    }
-
-    ::highlight(ime-double-thick) {
-      text-decoration: underline double 2px;
-    }
-
     ::highlight(ime-dotted-thin) {
       text-decoration: underline dotted 1px;
     }
@@ -228,8 +220,6 @@
     const imeHighlights = {
       "solid-thin": null,
       "solid-thick": null,
-      "double-thin": null,
-      "double-thick": null,
       "dotted-thin": null,
       "dotted-thick": null,
       "dashed-thin": null,
@@ -375,22 +365,17 @@
 
       // Handle key presses that are not already handled by the EditContext.
       editorEl.addEventListener("keydown", e => {
+        const start = Math.min(editContext.selectionStart, editContext.selectionEnd);
+        const end = Math.max(editContext.selectionStart, editContext.selectionEnd);
+
         if (e.key === "Tab") {
           e.preventDefault();
-          editContext.updateText(
-            editContext.selectionStart,
-            editContext.selectionEnd,
-            "\t"
-          );
-          updateSelection(editContext.selectionStart + 1, editContext.selectionStart + 1);
+          editContext.updateText(start, end, "\t");
+          updateSelection(start + 1, start + 1);
           render();
         } else if (e.key === "Enter") {
-          editContext.updateText(
-            editContext.selectionStart,
-            editContext.selectionEnd,
-            "\n"
-          );
-          updateSelection(editContext.selectionStart + 1, editContext.selectionStart + 1);
+          editContext.updateText(start, end, "\n");
+          updateSelection(start + 1, start + 1);
           render();
         }
       });
@@ -456,14 +441,14 @@
           return null;
         }
 
-        if (anchorOffset > extentOffset) {
-          [anchorOffset, extentOffset] = [extentOffset, anchorOffset];
-        }
-
         return { start: anchorOffset, end: extentOffset };
       }
 
       function convertFromOffsetsToSelection(start, end) {
+        const isBackwards = start > end;
+        const orderedStart = isBackwards ? end : start;
+        const orderedEnd = isBackwards ? start : end;
+
         const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
 
         let offset = 0;
@@ -475,25 +460,31 @@
         while (treeWalker.nextNode()) {
           const node = treeWalker.currentNode;
 
-          if (!anchorNode && offset + node.textContent.length >= start) {
+          if (!anchorNode && offset + node.textContent.length >= orderedStart) {
             anchorNode = node;
-            anchorOffset = start - offset;
+            anchorOffset = orderedStart - offset;
           }
 
-          if (offset + node.textContent.length >= end) {
+          if (offset + node.textContent.length >= orderedEnd) {
             extentNode = node;
-            extentOffset = end - offset;
+            extentOffset = orderedEnd - offset;
             break;
           }
 
           offset += node.textContent.length;
         }
 
-        return { anchorNode, anchorOffset, extentNode, extentOffset };
+        return {
+          anchorNode: isBackwards ? extentNode : anchorNode,
+          anchorOffset: isBackwards ? extentOffset : anchorOffset,
+          extentNode: isBackwards ? anchorNode : extentNode,
+          extentOffset: isBackwards ? anchorOffset : extentOffset
+        };
       }
 
       // Render the initial view.
       render();
+      setInterval(render, 1000);
     })();
   </script>
 </body>

From bafc33658e9b9d0c33e3d4f149e1adf58f7b0712 Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrick.brosset@microsoft.com>
Date: Thu, 1 Feb 2024 20:05:29 +0100
Subject: [PATCH 04/21] Add the new edit-context demo to the root-level
 README.md file (#251)

Add the edit-context demo to the main README file
---
 README.md | 68 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index a72e16bc..3aa0747d 100644
--- a/README.md
+++ b/README.md
@@ -4,74 +4,76 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "abort-api" directory contains an example of how to use the "Abort API" (aka [AbortSignal](https://dom.spec.whatwg.org/#interface-AbortSignal) and [AbortController](https://dom.spec.whatwg.org/#interface-abortcontroller)). [Run the example live](https://mdn.github.io/dom-examples/abort-api/).
 
-- The "audiocontext-setsinkid" directory contains an example of how to use the [`AudioContext.setSinkId()`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId) method and related features. [Run the example live](https://mdn.github.io/dom-examples/audiocontext-setsinkid/).
+- The "audiocontext-setsinkid" directory contains an example of how to use the [`AudioContext.setSinkId()`](https://developer.mozilla.org/docs/Web/API/AudioContext/setSinkId) method and related features. [Run the example live](https://mdn.github.io/dom-examples/audiocontext-setsinkid/).
 
-- The "auxclick" directory contains a basic example demonstrating the new <code>auxclick</code> event type. See [GlobalEventHandlers.auxclick](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick) for more details, or [run the example live](https://mdn.github.io/dom-examples/auxclick/).
+- The "auxclick" directory contains a basic example demonstrating the new <code>auxclick</code> event type. See [GlobalEventHandlers.auxclick](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onauxclick) for more details, or [run the example live](https://mdn.github.io/dom-examples/auxclick/).
 
-- The "canvas" directory contains an example "chroma-keying" demonstrating how to use the Canvas API to manipulate videos: see [Manipulating video using canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas) or [run the example live](https://mdn.github.io/dom-examples/canvas/chroma-keying/).
+- The "canvas" directory contains an example "chroma-keying" demonstrating how to use the Canvas API to manipulate videos: see [Manipulating video using canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Manipulating_video_using_canvas) or [run the example live](https://mdn.github.io/dom-examples/canvas/chroma-keying/).
 
-- The "channel-messaging-basic" directory contains a basic example demonstrating the basics of channel messaging; see [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) or [run the example live](https://mdn.github.io/dom-examples/channel-messaging-basic/).
+- The "channel-messaging-basic" directory contains a basic example demonstrating the basics of channel messaging; see [Channel Messaging API](https://developer.mozilla.org/docs/Web/API/Channel_Messaging_API) or [run the example live](https://mdn.github.io/dom-examples/channel-messaging-basic/).
 
-- The "channel-messaging-multimessage" directory contains another channel messaging demo, showing how multiple messages can be sent between browsing contexts. See [Channel Messaging API](https://developer.mozilla.org/en-US/docs/Web/API/Channel_Messaging_API) for more details. [Run the demo live](https://mdn.github.io/dom-examples/channel-messaging-multimessage/).
+- The "channel-messaging-multimessage" directory contains another channel messaging demo, showing how multiple messages can be sent between browsing contexts. See [Channel Messaging API](https://developer.mozilla.org/docs/Web/API/Channel_Messaging_API) for more details. [Run the demo live](https://mdn.github.io/dom-examples/channel-messaging-multimessage/).
 
-- The "css-painting" directory contains examples demonstrating the [CSS Painting API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API). See the [examples live](https://mdn.github.io/dom-examples/css-painting).
+- The "css-painting" directory contains examples demonstrating the [CSS Painting API](https://developer.mozilla.org/docs/Web/API/CSS_Painting_API). See the [examples live](https://mdn.github.io/dom-examples/css-painting).
 
-- The "drag-and-drop" directory is for examples and demos of the [HTML Drag and Drop](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) standard.
+- The "drag-and-drop" directory is for examples and demos of the [HTML Drag and Drop](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) standard.
 
-- The "document-picture-in-picture" directory contains an example showing usage of the [Document Picture-in-Picture API](http://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API/). [See the example live](https://mdn.github.io/dom-examples/document-picture-in-picture/).
+- The "document-picture-in-picture" directory contains an example showing usage of the [Document Picture-in-Picture API](http://developer.mozilla.org/docs/Web/API/Document_Picture-in-Picture_API/). [See the example live](https://mdn.github.io/dom-examples/document-picture-in-picture/).
 
-- The "fullscreen-api" directory is for examples and demos of the [Fullscreen API](https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). Run the [example live](https://mdn.github.io/dom-examples/fullscreen-api/).
+- The "edit-context" directory contains examples demonstrating the [EditContext API](https://developer.mozilla.org/docs/Web/API/EditContext_API). See the [list of examples](https://github.com/mdn/dom-examples/tree/main/edit-context/).
 
-- The "history-api" directory contains an example that demonstrates the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). [View the demo live](https://mdn.github.io/dom-examples/history-api/).
+- The "fullscreen-api" directory is for examples and demos of the [Fullscreen API](https://wiki.developer.mozilla.org/docs/Web/API/Fullscreen_API). Run the [example live](https://mdn.github.io/dom-examples/fullscreen-api/).
+
+- The "history-api" directory contains an example that demonstrates the [History API](https://developer.mozilla.org/docs/Web/API/History_API). [View the demo live](https://mdn.github.io/dom-examples/history-api/).
 
 - The "indexeddb-api" directory contains a demo for the [IndexedDB API](https://mdn.github.io/dom-examples/indexeddb-api/index.html).
 
 - The "insert-adjacent" directory contains basic demos for [insertAdjacentElement](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) and [insertAdjacentText](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html).
 
-- The "matchmedia" directory contains a basic demo to test matchMedia functionality. See [Window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) for more details. [Run the demo live](https://mdn.github.io/dom-examples/matchmedia/).
+- The "matchmedia" directory contains a basic demo to test matchMedia functionality. See [Window.matchMedia](https://developer.mozilla.org/docs/Web/API/Window/matchMedia) for more details. [Run the demo live](https://mdn.github.io/dom-examples/matchmedia/).
 
-- The "mediaquerylist" directory contains a basic demo to test more advanced matchMedia/mediaquerylist functionality. See [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) for more details. [Run the demo live](https://mdn.github.io/dom-examples/mediaquerylist/index.html).
+- The "mediaquerylist" directory contains a basic demo to test more advanced matchMedia/mediaquerylist functionality. See [MediaQueryList](https://developer.mozilla.org/docs/Web/API/MediaQueryList) for more details. [Run the demo live](https://mdn.github.io/dom-examples/mediaquerylist/index.html).
 
-- The "media" directory contains examples and demos showing how to use HTML and DOM [media elements and APIs](https://developer.mozilla.org/en-US/docs/Web/Media).
+- The "media" directory contains examples and demos showing how to use HTML and DOM [media elements and APIs](https://developer.mozilla.org/docs/Web/Media).
 
-- The "payment-request" directory contains examples of the [Payment Request API](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API).
+- The "payment-request" directory contains examples of the [Payment Request API](https://developer.mozilla.org/docs/Web/API/Payment_Request_API).
 
-- The "pointerevents" directory is for examples and demos of the [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) standard.
+- The "pointerevents" directory is for examples and demos of the [Pointer Events](https://developer.mozilla.org/docs/Web/API/Pointer_events) standard.
 
-- The "pointer-lock" directory contains a basic demo to show usage of the Pointer Lock API. You can find more explanation of how the demo works at the main MDN [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) page. [Run the demo live](https://mdn.github.io/dom-examples/pointer-lock/).
+- The "pointer-lock" directory contains a basic demo to show usage of the Pointer Lock API. You can find more explanation of how the demo works at the main MDN [Pointer Lock API](https://developer.mozilla.org/docs/Web/API/Pointer_Lock_API) page. [Run the demo live](https://mdn.github.io/dom-examples/pointer-lock/).
 
-- The "popover-api" directory is for examples and demos of the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) standard. Go to the [Popover API demo index](popover-api/) to see what's available.
+- The "popover-api" directory is for examples and demos of the [Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API) standard. Go to the [Popover API demo index](popover-api/) to see what's available.
 
-- The "reporting-api" directory contains a couple of basic demos to show usage of the Reprting API. You can find more explanation of how the API works in the main MDN [Reporting API](https://developer.mozilla.org/en-US/docs/Web/API/Reporting_API) docs. [Run the deprecation report demo live](https://mdn.github.io/dom-examples/reporting-api/deprecation_report.html).
+- The "reporting-api" directory contains a couple of basic demos to show usage of the Reprting API. You can find more explanation of how the API works in the main MDN [Reporting API](https://developer.mozilla.org/docs/Web/API/Reporting_API) docs. [Run the deprecation report demo live](https://mdn.github.io/dom-examples/reporting-api/deprecation_report.html).
 
-- The "resize-event" directory contains a basic demo to show how you can use the [resize event](https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event). Resize the browser window either by height or width to see the size of your current window. [Run the demo live](https://mdn.github.io/dom-examples/resize-event).
+- The "resize-event" directory contains a basic demo to show how you can use the [resize event](https://developer.mozilla.org/docs/Web/API/Window/resize_event). Resize the browser window either by height or width to see the size of your current window. [Run the demo live](https://mdn.github.io/dom-examples/resize-event).
 
-- The "screenleft-screentop" directory contains a demo to show how you could use the [Window.screenLeft](https://developer.mozilla.org/en-US/docs/Web/API/Window/screenLeft) and [Window.screenTop](https://developer.mozilla.org/en-US/docs/Web/API/Window/screenTop) properties to draw a circle on a canvas that always stays in the same physical place on the screen when you move your browser window. [Run the demo live](https://mdn.github.io/dom-examples/screenleft-screentop/).
+- The "screenleft-screentop" directory contains a demo to show how you could use the [Window.screenLeft](https://developer.mozilla.org/docs/Web/API/Window/screenLeft) and [Window.screenTop](https://developer.mozilla.org/docs/Web/API/Window/screenTop) properties to draw a circle on a canvas that always stays in the same physical place on the screen when you move your browser window. [Run the demo live](https://mdn.github.io/dom-examples/screenleft-screentop/).
 
-- The "scrolltooptions" directory contains a demo to show how you could use the [ScrollToOptions](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) dictionary along with the [Window.ScrollTo()](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo) method to programmatically scroll a web page. [Run the demo live](https://mdn.github.io/dom-examples/scrolltooptions/).
+- The "scrolltooptions" directory contains a demo to show how you could use the [ScrollToOptions](https://developer.mozilla.org/docs/Web/API/ScrollToOptions) dictionary along with the [Window.ScrollTo()](https://developer.mozilla.org/docs/Web/API/Window/scrollTo) method to programmatically scroll a web page. [Run the demo live](https://mdn.github.io/dom-examples/scrolltooptions/).
 
-- The "server-sent-events" directory contains a very basic SSE demo that uses PHP to create the server. You can find more information in our [Using server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events) article. To run the demo you'll need to serve the files from a server that supports PHP; [MAMP](https://www.mamp.info/en/) is a good PHP test server environment.
+- The "server-sent-events" directory contains a very basic SSE demo that uses PHP to create the server. You can find more information in our [Using server-sent events](https://developer.mozilla.org/docs/Web/API/Server-sent_events/Using_server-sent_events) article. To run the demo you'll need to serve the files from a server that supports PHP; [MAMP](https://www.mamp.info/en/) is a good PHP test server environment.
 
-- The "sourcebuffer" directory contains a basic demo to show usage of the [`SourceBuffer`](https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer) interface. [Run the demo live](https://mdn.github.io/dom-examples/sourcebuffer/).
+- The "sourcebuffer" directory contains a basic demo to show usage of the [`SourceBuffer`](https://developer.mozilla.org/docs/Web/API/SourceBuffer) interface. [Run the demo live](https://mdn.github.io/dom-examples/sourcebuffer/).
 
 - The "streams" directory contains demos of the Streams API for using low-level I/O processing.
 
-- The "touchevents" directory is for examples and demos of the [Touch Events](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events) standard.
+- The "touchevents" directory is for examples and demos of the [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) standard.
 
-- The "web-animations-api" directory contains [Web Animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) demos. See the [web animations README](web-animations-api/README.md) for more information.
+- The "web-animations-api" directory contains [Web Animation API](https://developer.mozilla.org/docs/Web/API/Web_Animations_API) demos. See the [web animations README](web-animations-api/README.md) for more information.
 
-- The "web-storage" directory contains a basic demo to show usage of the Web Storage API. For more detail on how it works, read [Using the Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). [View the demo live](https://mdn.github.io/dom-examples/web-storage/).
+- The "web-storage" directory contains a basic demo to show usage of the Web Storage API. For more detail on how it works, read [Using the Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). [View the demo live](https://mdn.github.io/dom-examples/web-storage/).
 
-- The "view-transitions" directory contains a basic demo to show usage of the [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API). [View the demo live](https://mdn.github.io/dom-examples/view-transitions/).
+- The "view-transitions" directory contains a basic demo to show usage of the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API). [View the demo live](https://mdn.github.io/dom-examples/view-transitions/).
 
-- The "web-share" directory contains a basic demo to show usage of the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share). [View the demo live](https://mdn.github.io/dom-examples/web-share/).
+- The "web-share" directory contains a basic demo to show usage of the [Web Share API](https://developer.mozilla.org/docs/Web/API/Navigator/share). [View the demo live](https://mdn.github.io/dom-examples/web-share/).
 
-- The "web-workers" directory contains a basic web worker to demonstrate how [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) work. [View the demo live](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/).
+- The "web-workers" directory contains a basic web worker to demonstrate how [Web Workers](https://developer.mozilla.org/docs/Web/API/Web_Workers_API) work. [View the demo live](https://mdn.github.io/dom-examples/web-workers/simple-web-worker/).
 
-- The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.
+- The ["webgl-examples"](webgl-examples/README.md) directory contains a number of WebGL examples that demonstrate the [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), which is used for 2D and 3D graphics on the web.
 
-- The "webgpu-compute-demo" directory contains an example that demonstrates basic usage of the [WebGPU API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) compute pipeline, which is used for performing general computation on the GPU. [View the demo live](https://mdn.github.io/dom-examples/webgpu-compute-demo/).
+- The "webgpu-compute-demo" directory contains an example that demonstrates basic usage of the [WebGPU API](https://developer.mozilla.org/docs/Web/API/WebGPU_API) compute pipeline, which is used for performing general computation on the GPU. [View the demo live](https://mdn.github.io/dom-examples/webgpu-compute-demo/).
 
-- The "webgpu-render-demo" directory contains an example that demonstrates basic usage of the [WebGPU API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) render pipeline, which is used for rendering high-performance graphics via the GPU. [View the demo live](https://mdn.github.io/dom-examples/webgpu-render-demo/).
+- The "webgpu-render-demo" directory contains an example that demonstrates basic usage of the [WebGPU API](https://developer.mozilla.org/docs/Web/API/WebGPU_API) render pipeline, which is used for rendering high-performance graphics via the GPU. [View the demo live](https://mdn.github.io/dom-examples/webgpu-render-demo/).
 
-- The "window-management-api" directory contains a basic demo to show usage of the [Window Management API](https://developer.mozilla.org/en-US/docs/Web/API/Window_Management_API). [View the demo live](https://mdn.github.io/dom-examples/window-management-api/).
+- The "window-management-api" directory contains a basic demo to show usage of the [Window Management API](https://developer.mozilla.org/docs/Web/API/Window_Management_API). [View the demo live](https://mdn.github.io/dom-examples/window-management-api/).

From f45152c5096019defb181a1872100fa68523ac6b Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrick.brosset@microsoft.com>
Date: Thu, 15 Feb 2024 19:58:33 +0100
Subject: [PATCH 05/21] Simplify the backwards selection code in the
 EditContext demo (#252)

Simplified backwards selection in EditContext demo
---
 edit-context/html-editor/index.html | 22 ++++++++--------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/edit-context/html-editor/index.html b/edit-context/html-editor/index.html
index 6c6388d8..ad54f6c4 100644
--- a/edit-context/html-editor/index.html
+++ b/edit-context/html-editor/index.html
@@ -445,10 +445,6 @@
       }
 
       function convertFromOffsetsToSelection(start, end) {
-        const isBackwards = start > end;
-        const orderedStart = isBackwards ? end : start;
-        const orderedEnd = isBackwards ? start : end;
-
         const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
 
         let offset = 0;
@@ -460,26 +456,24 @@
         while (treeWalker.nextNode()) {
           const node = treeWalker.currentNode;
 
-          if (!anchorNode && offset + node.textContent.length >= orderedStart) {
+          if (!anchorNode && offset + node.textContent.length >= start) {
             anchorNode = node;
-            anchorOffset = orderedStart - offset;
+            anchorOffset = start - offset;
           }
 
-          if (offset + node.textContent.length >= orderedEnd) {
+          if (!extentNode && offset + node.textContent.length >= end) {
             extentNode = node;
-            extentOffset = orderedEnd - offset;
+            extentOffset = end - offset;
+          }
+
+          if (anchorNode && extentNode) {
             break;
           }
 
           offset += node.textContent.length;
         }
 
-        return {
-          anchorNode: isBackwards ? extentNode : anchorNode,
-          anchorOffset: isBackwards ? extentOffset : anchorOffset,
-          extentNode: isBackwards ? anchorNode : extentNode,
-          extentOffset: isBackwards ? anchorOffset : extentOffset
-        };
+        return { anchorNode, anchorOffset, extentNode, extentOffset };
       }
 
       // Render the initial view.

From 14797c3b920c8620794e5b623ab2f661484cf3ec Mon Sep 17 00:00:00 2001
From: Sideways S <sideways@sidewayss.com>
Date: Thu, 22 Feb 2024 07:12:38 -0600
Subject: [PATCH 06/21] Add simple-service-worker example to readme.md (#255)

Co-authored-by: Sideways S <sidewayss@users.noreply.github.com>
Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 3aa0747d..63c91f10 100644
--- a/README.md
+++ b/README.md
@@ -54,6 +54,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "server-sent-events" directory contains a very basic SSE demo that uses PHP to create the server. You can find more information in our [Using server-sent events](https://developer.mozilla.org/docs/Web/API/Server-sent_events/Using_server-sent_events) article. To run the demo you'll need to serve the files from a server that supports PHP; [MAMP](https://www.mamp.info/en/) is a good PHP test server environment.
 
+- The "service-worker/simple-service-worker" directory contains a simple demo showing how to use the [`Service Worker API`](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) to manage your page's cache. [Run the demo live](https://mdn.github.io/dom-examples/service-worker/simple-service-worker/).
+
 - The "sourcebuffer" directory contains a basic demo to show usage of the [`SourceBuffer`](https://developer.mozilla.org/docs/Web/API/SourceBuffer) interface. [Run the demo live](https://mdn.github.io/dom-examples/sourcebuffer/).
 
 - The "streams" directory contains demos of the Streams API for using low-level I/O processing.

From 6c14a63e786ff56e59a64b7a5432c528dc0d44ce Mon Sep 17 00:00:00 2001
From: Sideways S <sideways@sidewayss.com>
Date: Thu, 22 Feb 2024 07:13:49 -0600
Subject: [PATCH 07/21] service-worker: Added comment about Chrome
 preloadResponse bug (#253)

Added comment about Chrome preloadResponse bug

Co-authored-by: Sideways S <sidewayss@users.noreply.github.com>
---
 service-worker/simple-service-worker/sw.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/service-worker/simple-service-worker/sw.js b/service-worker/simple-service-worker/sw.js
index 0d4fae58..7f9cd0b5 100644
--- a/service-worker/simple-service-worker/sw.js
+++ b/service-worker/simple-service-worker/sw.js
@@ -16,6 +16,11 @@ const cacheFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
   }
 
   // Next try to use the preloaded response, if it's there
+  // NOTE: Chrome throws errors regarding preloadResponse, see:
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1420515
+  // https://github.com/mdn/dom-examples/issues/145
+  // To avoid those errors, remove or comment out this block of preloadResponse
+  // code along with enableNavigationPreload() and the "activate" listener.
   const preloadResponse = await preloadResponsePromise;
   if (preloadResponse) {
     console.info('using preload response', preloadResponse);

From d52927125bba75ed42b00770c58672ecc2f89966 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Tue, 27 Feb 2024 13:58:45 +0100
Subject: [PATCH 08/21] chore: Improve contrib docs, add template workflows
 (#260)

* chore: Improve contrib docs, add template workflows

* Update CONTRIBUTING.md

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

---------

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>
---
 .github/CODEOWNERS                       |  9 ++++
 .github/ISSUE_TEMPLATE/bug.yml           | 36 ++++++++++++++++
 .github/ISSUE_TEMPLATE/config.yml        |  8 ++++
 .github/workflows/codeql.yml             | 41 ++++++++++++++++++
 .github/workflows/pr-merge-conflicts.yml | 14 ++++++
 CONTRIBUTING.md                          | 55 ++++++++++++++++++++++++
 README.md                                | 23 +++++++++-
 7 files changed, 185 insertions(+), 1 deletion(-)
 create mode 100644 .github/CODEOWNERS
 create mode 100644 .github/ISSUE_TEMPLATE/bug.yml
 create mode 100644 .github/ISSUE_TEMPLATE/config.yml
 create mode 100644 .github/workflows/codeql.yml
 create mode 100644 .github/workflows/pr-merge-conflicts.yml
 create mode 100644 CONTRIBUTING.md

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 00000000..f1b0b948
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,9 @@
+# This file is used to request PR reviews from the appropriate team.
+#
+# Order is important; the last matching pattern takes precedence.
+# Each rule is more specific than the previous rules.
+# For more information, see:
+# https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners
+
+# Default
+* @mdn/core-yari-content
diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
new file mode 100644
index 00000000..091d81b2
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug.yml
@@ -0,0 +1,36 @@
+name: "Issue report"
+description: Report an unexpected problem or unintended behavior.
+labels: ["needs triage"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ### Before you start
+
+        **Want to fix the problem yourself?** This project is open source and we welcome fixes and improvements from the community!
+
+        ↩ Check the project [CONTRIBUTING.md](../blob/main/CONTRIBUTING.md) guide to see how to get started.
+
+        ---
+  - type: textarea
+    id: problem
+    attributes:
+      label: What information was incorrect, unhelpful, or incomplete?
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: What did you expect to see?
+    validations:
+      required: true
+  - type: textarea
+    id: references
+    attributes:
+      label: Do you have any supporting links, references, or citations?
+      description: Link to information that helps us confirm your issue.
+  - type: textarea
+    id: more-info
+    attributes:
+      label: Do you have anything more you want to share?
+      description: For example, steps to reproduce, screenshots, screen recordings, or sample code.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 00000000..739d3cce
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Content or feature request
+    url: https://github.com/mdn/mdn/issues/new/choose
+    about: Propose new content for MDN Web Docs or submit a feature request using this link.
+  - name: MDN GitHub Discussions
+    url: https://github.com/orgs/mdn/discussions
+    about: Does your topic involve a lot of pages, or are you not sure how it can be split into actionable tasks? Consider starting a discussion first.
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 00000000..e8ca5997
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,41 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [main]
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    if: github.repository == 'mdn/dom-examples'
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ["javascript"]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v3
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
diff --git a/.github/workflows/pr-merge-conflicts.yml b/.github/workflows/pr-merge-conflicts.yml
new file mode 100644
index 00000000..bb59a8b2
--- /dev/null
+++ b/.github/workflows/pr-merge-conflicts.yml
@@ -0,0 +1,14 @@
+name: "Label PRs with conflicts"
+
+on:
+  push:
+  pull_request_target:
+    types: [synchronize]
+
+jobs:
+  label-merge-conflicts:
+    uses: mdn/workflows/.github/workflows/pr-rebase-needed.yml@main
+    with:
+      target-repo: "mdn/dom-examples"
+    secrets:
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 00000000..ef7ed6b2
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,55 @@
+# Contribution guide
+
+The "dom-examples" repository accompany various MDN DOM and Web API documentation pages on [MDN Web Docs](https://developer.mozilla.org).
+This document will help you get started with contributions!
+
+## Types of contribution
+
+> [!NOTE]
+> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks.
+> These methods are simpler to maintain as the code lives beside the rest of the content.
+> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.
+
+There are many ways you can help improve this repository! For example:
+
+- **Write a new example.** If you would like to add a new example, make sure this feature is supported by a stable version of modern browsers.
+- **Improve an existing example.** You could make improvements or add some other changes which would make example more helpful to the users.
+- **Fix a bug:** we have a list of [issues](https://github.com/mdn/dom-examples/issues), or maybe you found your own.
+
+## Getting started
+
+You will need to have Git and GitHub set up to be able to contribute.
+
+### Set up Git and GitHub
+
+For more information on setting up Git on your machine, [read this article](https://help.github.com/articles/set-up-git/).
+With the above dependencies satisfied, [create your new account on GitHub](https://github.com/join).
+
+Next up, you need to fork and clone the repo to be able to contribute to it.
+You can [learn about forking on GitHub](https://help.github.com/articles/fork-a-repo).
+Once you have your own fork, [clone it to your local machine](https://help.github.com/articles/cloning-a-repository/).
+
+### Serving
+
+You should serve your example locally to see the results before submitting your changes.
+There are a few different ways to do this depending on your preferred tooling methods.
+See [Running a simple local HTTP server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#running_a_simple_local_http_server) for information on setting up a server.
+
+```bash
+cd my-cool-example
+python3 -m http.server
+```
+
+### Open a pull request
+
+Once you're satisfied, the final step is to [submit your pull request](https://help.github.com/articles/creating-a-pull-request/).
+You can find more information about submitting pull requests in our [Community guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) docs.
+
+### Including your example on MDN
+
+After your pull request is reviewed and merged, you can publish your example on MDN Web Docs.
+
+## Thank you
+
+Thanks a lot for your contribution!
+If you'd like to ask questions or get in touch, feel free to drop by in [Discord](https://developer.mozilla.org/discord) or say hello in one of [our communication channels](https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels).
diff --git a/README.md b/README.md
index 63c91f10..184c2693 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,13 @@
 
 Code examples that accompany various MDN DOM and Web API documentation pages.
 
+> [!NOTE]
+> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks.
+> These methods are simpler to maintain as the code lives beside the rest of the content.
+> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons.
+
+## Repository contents
+
 - The "abort-api" directory contains an example of how to use the "Abort API" (aka [AbortSignal](https://dom.spec.whatwg.org/#interface-AbortSignal) and [AbortController](https://dom.spec.whatwg.org/#interface-abortcontroller)). [Run the example live](https://mdn.github.io/dom-examples/abort-api/).
 
 - The "audiocontext-setsinkid" directory contains an example of how to use the [`AudioContext.setSinkId()`](https://developer.mozilla.org/docs/Web/API/AudioContext/setSinkId) method and related features. [Run the example live](https://mdn.github.io/dom-examples/audiocontext-setsinkid/).
@@ -44,7 +51,7 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 
 - The "popover-api" directory is for examples and demos of the [Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API) standard. Go to the [Popover API demo index](popover-api/) to see what's available.
 
-- The "reporting-api" directory contains a couple of basic demos to show usage of the Reprting API. You can find more explanation of how the API works in the main MDN [Reporting API](https://developer.mozilla.org/docs/Web/API/Reporting_API) docs. [Run the deprecation report demo live](https://mdn.github.io/dom-examples/reporting-api/deprecation_report.html).
+- The "reporting-api" directory contains a couple of basic demos to show usage of the Reporting API. You can find more explanation of how the API works in the main MDN [Reporting API](https://developer.mozilla.org/docs/Web/API/Reporting_API) docs. [Run the deprecation report demo live](https://mdn.github.io/dom-examples/reporting-api/deprecation_report.html).
 
 - The "resize-event" directory contains a basic demo to show how you can use the [resize event](https://developer.mozilla.org/docs/Web/API/Window/resize_event). Resize the browser window either by height or width to see the size of your current window. [Run the demo live](https://mdn.github.io/dom-examples/resize-event).
 
@@ -79,3 +86,17 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
 - The "webgpu-render-demo" directory contains an example that demonstrates basic usage of the [WebGPU API](https://developer.mozilla.org/docs/Web/API/WebGPU_API) render pipeline, which is used for rendering high-performance graphics via the GPU. [View the demo live](https://mdn.github.io/dom-examples/webgpu-render-demo/).
 
 - The "window-management-api" directory contains a basic demo to show usage of the [Window Management API](https://developer.mozilla.org/docs/Web/API/Window_Management_API). [View the demo live](https://mdn.github.io/dom-examples/window-management-api/).
+
+## Contribute to MDN Web Docs
+
+You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work.
+The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community.
+
+To find out how to get started, see the [CONTRIBUTING.md](CONTRIBUTING.md) document in this repository.
+By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our [Code of Conduct](CODE_OF_CONDUCT.md).
+
+## Get in touch
+
+You can communicate with the MDN Web Docs team and community using the [communication channels][].
+
+[communication channels]: https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels

From 9189afb69754937ab14e28ba2f019cdbccff3870 Mon Sep 17 00:00:00 2001
From: guest271314 <guest271314@gmail.com>
Date: Tue, 27 Feb 2024 05:05:23 -0800
Subject: [PATCH 09/21] Add Ed25519 sign-verify example (#247)

* Add Ed25519 sign-verify example

* Create ed25519.js

* Link to Chromium and Chrome command-line switch to enable the feature

* Close </a>

* Apply suggestions from code review

Co-authored-by: Daniel Huigens <d.huigens@protonmail.com>

* docs(web-crypto): add link to browser compat for ed25519, formatting

* Update web-crypto/sign-verify/index.html

Co-authored-by: Daniel Huigens <d.huigens@protonmail.com>

---------

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
Co-authored-by: Daniel Huigens <d.huigens@protonmail.com>
---
 web-crypto/sign-verify/ed25519.js |  74 +++++++++++++++
 web-crypto/sign-verify/index.html | 149 ++++++++++++++++++++++++------
 web-crypto/sign-verify/style.css  | 107 +++++++++++----------
 3 files changed, 254 insertions(+), 76 deletions(-)
 create mode 100644 web-crypto/sign-verify/ed25519.js

diff --git a/web-crypto/sign-verify/ed25519.js b/web-crypto/sign-verify/ed25519.js
new file mode 100644
index 00000000..d1c13474
--- /dev/null
+++ b/web-crypto/sign-verify/ed25519.js
@@ -0,0 +1,74 @@
+(() => {
+  /*
+  Store the calculated signature here, so we can verify it later.
+  */
+  let signature;
+
+  /*
+  Fetch the contents of the "message" textbox, and encode it
+  in a form we can use for sign operation.
+  */
+  function getMessageEncoding() {
+    const messageBox = document.querySelector("#ed25519-message");
+    let message = messageBox.value;
+    let enc = new TextEncoder();
+    return enc.encode(message);
+  }
+
+  /*
+  Get the encoded message-to-sign, sign it and display a representation
+  of the first part of it in the "signature" element.
+  */
+  async function signMessage(privateKey) {
+    const signatureValue = document.querySelector(".ed25519 .signature-value");
+    signatureValue.classList.remove("valid", "invalid");
+
+    let encoded = getMessageEncoding();
+    signature = await window.crypto.subtle.sign("Ed25519", privateKey, encoded);
+
+    signatureValue.classList.add("fade-in");
+    signatureValue.addEventListener("animationend", () => {
+      signatureValue.classList.remove("fade-in");
+    });
+    let buffer = new Uint8Array(signature, 0, 5);
+    signatureValue.textContent = `${buffer}...[${signature.byteLength} bytes total]`;
+  }
+
+  /*
+  Fetch the encoded message-to-sign and verify it against the stored signature.
+  * If it checks out, set the "valid" class on the signature.
+  * Otherwise set the "invalid" class.
+  */
+  async function verifyMessage(publicKey) {
+    const signatureValue = document.querySelector(".ed25519 .signature-value");
+    signatureValue.classList.remove("valid", "invalid");
+
+    let encoded = getMessageEncoding();
+    let result = await window.crypto.subtle.verify(
+      "Ed25519",
+      publicKey,
+      signature,
+      encoded
+    );
+
+    signatureValue.classList.add(result ? "valid" : "invalid");
+  }
+
+  /*
+  Generate a sign/verify key, then set up event listeners
+  on the "Sign" and "Verify" buttons.
+  */
+  window.crypto.subtle
+    .generateKey("Ed25519", true, ["sign", "verify"])
+    .then((keyPair) => {
+      const signButton = document.querySelector(".ed25519 .sign-button");
+      signButton.addEventListener("click", () => {
+        signMessage(keyPair.privateKey);
+      });
+
+      const verifyButton = document.querySelector(".ed25519 .verify-button");
+      verifyButton.addEventListener("click", () => {
+        verifyMessage(keyPair.publicKey);
+      });
+    });
+})();
diff --git a/web-crypto/sign-verify/index.html b/web-crypto/sign-verify/index.html
index de592ff5..a184a484 100644
--- a/web-crypto/sign-verify/index.html
+++ b/web-crypto/sign-verify/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Web Crypto API example</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>
@@ -11,20 +11,62 @@
       <h1>Web Crypto: sign/verify</h1>
 
       <section class="description">
-        <p>This page shows the use of the <code>sign()</code> and <code>verify()</code> functions of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a>. It contains four separate examples, one for each signing algorithm supported:</p>
-        <ul>
+        <p>
+          This page shows how to use the <code>sign()</code> and
+          <code>verify()</code> functions of the
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API"
+            >Web Crypto API</a
+          >. It contains examples for the following signing algorithms:
+        </p>
+        <ol>
           <li>"RSASSA-PKCS1-v1_5"</li>
           <li>"RSA-PSS"</li>
           <li>"ECDSA"</li>
           <li>"HMAC"</li>
-        </ul>
-        <hr/>
+          <li>
+            "Ed25519"
+            <ul>
+              <li class="caution-list-item">
+                <span class="caution">Caution: </span>For information about
+                Ed25519 support, see
+                <a
+                  href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto#browser_compatibility"
+                  >SubtleCrypto: Browser compatibility</a
+                >
+                and
+                <a
+                  href="https://blogs.igalia.com/jfernandez/2023/06/20/secure-curves-in-the-web-cryptography-api/"
+                  >Secure Curves in the Web Cryptography API</a
+                >. Chrome requires the
+                <code>enable-experimental-web-platform-features</code>
+                preference to be set via
+                <a
+                  href="https://peter.sh/experiments/chromium-command-line-switches/#enable-experimental-web-platform-features"
+                  >command-line switch</a
+                >
+                or via
+                <code
+                  >chrome://flags/#enable-experimental-web-platform-features</code
+                >.
+              </li>
+            </ul>
+          </li>
+        </ol>
+        <hr />
         <p>Each example has four components:</p>
         <ul>
           <li>A text box containing a message to sign.</li>
           <li>A representation of the signature.</li>
-          <li>A "Sign" button: this signs the text box contents, displays part of the signature, and stores the complete signature.</li>
-          <li>A "Verify" button: this verifies the text box contents against the stored signature, and styles the displayed signature according to the result.</li>
+          <li>
+            A "Sign" button: this signs the text box contents, displays part of
+            the signature, and stores the complete signature.
+          </li>
+          <li>
+            A "Verify" button: this verifies the text box contents against the
+            stored signature, and styles the displayed signature according to
+            the result.
+          </li>
         </ul>
         <p>Try it:</p>
         <ul>
@@ -41,12 +83,19 @@ <h2 class="sign-verify-heading">RSASSA-PKCS1-v1_5</h2>
           <section class="sign-verify-controls">
             <div class="message-control">
               <label for="rsassa-pkcs1-message">Enter a message to sign:</label>
-              <input type="text" id="rsassa-pkcs1-message" name="message" size="25"
-                     value="The owl hoots at midnight">
+              <input
+                type="text"
+                id="rsassa-pkcs1-message"
+                name="message"
+                size="25"
+                value="The owl hoots at midnight"
+              />
             </div>
-            <div class="signature">Signature:<span class="signature-value"></span></div>
-            <input class="sign-button" type="button" value="Sign">
-            <input class="verify-button" type="button" value="Verify">
+            <div class="signature">
+              Signature:<span class="signature-value"></span>
+            </div>
+            <input class="sign-button" type="button" value="Sign" />
+            <input class="verify-button" type="button" value="Verify" />
           </section>
         </section>
 
@@ -55,12 +104,19 @@ <h2 class="sign-verify-heading">RSA-PSS</h2>
           <section class="sign-verify-controls">
             <div class="message-control">
               <label for="rsa-pss-message">Enter a message to sign:</label>
-              <input type="text" id="rsa-pss-message" name="message" size="25"
-                     value="The tiger prowls at dawn">
+              <input
+                type="text"
+                id="rsa-pss-message"
+                name="message"
+                size="25"
+                value="The tiger prowls at dawn"
+              />
+            </div>
+            <div class="signature">
+              Signature:<span class="signature-value"></span>
             </div>
-            <div class="signature">Signature:<span class="signature-value"></span></div>
-            <input class="sign-button" type="button" value="Sign">
-            <input class="verify-button" type="button" value="Verify">
+            <input class="sign-button" type="button" value="Sign" />
+            <input class="verify-button" type="button" value="Verify" />
           </section>
         </section>
 
@@ -69,12 +125,19 @@ <h2 class="sign-verify-heading">ECDSA</h2>
           <section class="sign-verify-controls">
             <div class="message-control">
               <label for="ecdsa-message">Enter a message to sign:</label>
-              <input type="text" id="ecdsa-message" name="message" size="25"
-                     value="The eagle flies at twilight">
+              <input
+                type="text"
+                id="ecdsa-message"
+                name="message"
+                size="25"
+                value="The eagle flies at twilight"
+              />
             </div>
-            <div class="signature">Signature:<span class="signature-value"></span></div>
-            <input class="sign-button" type="button" value="Sign">
-            <input class="verify-button" type="button" value="Verify">
+            <div class="signature">
+              Signature:<span class="signature-value"></span>
+            </div>
+            <input class="sign-button" type="button" value="Sign" />
+            <input class="verify-button" type="button" value="Verify" />
           </section>
         </section>
 
@@ -83,20 +146,48 @@ <h2 class="sign-verify-heading">HMAC</h2>
           <section class="sign-verify-controls">
             <div class="message-control">
               <label for="hmac-message">Enter a message to sign:</label>
-              <input type="text" id="hmac-message" name="message" size="25"
-                     value="The bunny hops at teatime">
+              <input
+                type="text"
+                id="hmac-message"
+                name="message"
+                size="25"
+                value="The bunny hops at teatime"
+              />
+            </div>
+            <div class="signature">
+              Signature:<span class="signature-value"></span>
+            </div>
+            <input class="sign-button" type="button" value="Sign" />
+            <input class="verify-button" type="button" value="Verify" />
+          </section>
+        </section>
+
+        <section class="sign-verify ed25519">
+          <h2 class="sign-verify-heading">Ed25519</h2>
+          <section class="sign-verify-controls">
+            <div class="message-control">
+              <label for="ed25519-message">Enter a message to sign:</label>
+              <input
+                type="text"
+                id="ed25519-message"
+                name="message"
+                size="25"
+                value="The lion roars near dawn"
+              />
+            </div>
+            <div class="signature">
+              Signature:<span class="signature-value"></span>
             </div>
-            <div class="signature">Signature:<span class="signature-value"></span></div>
-            <input class="sign-button" type="button" value="Sign">
-            <input class="verify-button" type="button" value="Verify">
+            <input class="sign-button" type="button" value="Sign" />
+            <input class="verify-button" type="button" value="Verify" />
           </section>
         </section>
       </section>
     </main>
-
   </body>
   <script src="rsassa-pkcs1.js"></script>
   <script src="rsa-pss.js"></script>
   <script src="ecdsa.js"></script>
   <script src="hmac.js"></script>
+  <script src="ed25519.js"></script>
 </html>
diff --git a/web-crypto/sign-verify/style.css b/web-crypto/sign-verify/style.css
index 16c9160d..d502f4f6 100644
--- a/web-crypto/sign-verify/style.css
+++ b/web-crypto/sign-verify/style.css
@@ -1,124 +1,137 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .sign-verify {
-    margin: 0 .5rem;
+.description,
+.sign-verify {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .sign-verify {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .sign-verify-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 input[type="button"] {
-    width: 5rem;
+  width: 5rem;
 }
 
 .signature-value {
-    padding-left: .5rem;
-    font-family: monospace;
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
 /* Validity CSS */
 .valid {
-    color: green;
+  color: green;
 }
 
 .invalid {
-    color: red;
+  color: red;
 }
 
 .invalid::after {
-    content: ' ✖';
+  content: " ✖";
 }
 
 .valid::after {
-    content: ' ✓';
+  content: " ✓";
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 32rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 32rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* sign-verify controls grid */
 .sign-verify-controls {
-    display: grid;
-    grid-template-columns: 1fr 5rem;
-    grid-template-rows: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 5rem;
+  grid-template-rows: 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
 .signature {
-    grid-column-start: 1;
-    grid-row-start: 2;
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .sign-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
 .verify-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
+}
+
+.caution {
+  font-weight: bold;
+}
+
+.caution-list-item {
+  padding: 1em;
+  background-color: rgba(255, 42, 81, 0.1);
+  list-style-type: none;
+  border: 1px solid grey;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

From 4082219525a0446de2a6128f428846e229bc250d Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Mar 2024 14:46:36 +0100
Subject: [PATCH 10/21] fix(css): Make example a little more accessible (#261)

---
 web-workers/simple-shared-worker/style.css | 22 ++-----------
 web-workers/simple-web-worker/style.css    | 38 +++++++---------------
 2 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/web-workers/simple-shared-worker/style.css b/web-workers/simple-shared-worker/style.css
index 343ad8aa..b7d5d5f3 100644
--- a/web-workers/simple-shared-worker/style.css
+++ b/web-workers/simple-shared-worker/style.css
@@ -1,17 +1,8 @@
 html {
-  background-color: #7d2663;
+  background-color: rgb(230, 230, 230);
   font-family: sans-serif;
 }
 
-h1 {
-  margin: 0;
-  font-size: 15vw;
-  letter-spacing: -0.2rem;
-  position: absolute;
-  top: 0;
-  z-index: -1;
-}
-
 p {
   margin: 0 0 1rem 0;
 }
@@ -20,15 +11,8 @@ p {
   padding: 4vw;
   width: 75%;
   margin: 3vw auto;
-  background-color: rgba(255, 255, 255, 0.7);
-  border: 5px solid black;
-  opacity: 0.3;
-  transition: 1s all;
-}
-
-.controls:hover,
-.controls:focus {
-  opacity: 1;
+  border: 2px solid;
+  border-radius: 6px;
 }
 
 .controls label,
diff --git a/web-workers/simple-web-worker/style.css b/web-workers/simple-web-worker/style.css
index 1e522576..b7d5d5f3 100644
--- a/web-workers/simple-web-worker/style.css
+++ b/web-workers/simple-web-worker/style.css
@@ -1,40 +1,26 @@
 html {
-	background-color: #7D2663;
-	font-family: sans-serif;
-}
-
-h1 {
-	margin: 0;
-	font-size: 20vmin;
-	letter-spacing: -0.2rem;
-	position: absolute;
-	top: 0;
-	z-index: -1;
+  background-color: rgb(230, 230, 230);
+  font-family: sans-serif;
 }
 
 p {
-	margin: 0;
+  margin: 0 0 1rem 0;
 }
 
 .controls {
-	padding: 4vw;
-	width: 75%;
-	margin: 10vw auto;
-	background-color: rgba(255,255,255,0.7);
-	border: 5px solid black;
-	opacity: 0.3;
-	transition: 1s all;
+  padding: 4vw;
+  width: 75%;
+  margin: 3vw auto;
+  border: 2px solid;
+  border-radius: 6px;
 }
 
-.controls:hover, .controls:focus {
-  opacity: 1;
-}
-
-.controls label, .controls p, .controls input {
-	font-size: 3vw;
+.controls label,
+.controls p,
+.controls input {
+  font-size: 3vw;
 }
 
 .controls div {
   padding-bottom: 1rem;
 }
-

From 50234c815ba1bd98c88ece28145fc5b3042fd71f Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 7 Mar 2024 16:26:59 +0100
Subject: [PATCH 11/21] chore: remove unused tutorial files (#262)

---
 .../tutorial/tetrahedron/index.html           |  15 -
 .../tutorial/tetrahedron/webgl-demo.js        | 440 ------------------
 2 files changed, 455 deletions(-)
 delete mode 100644 webgl-examples/tutorial/tetrahedron/index.html
 delete mode 100644 webgl-examples/tutorial/tetrahedron/webgl-demo.js

diff --git a/webgl-examples/tutorial/tetrahedron/index.html b/webgl-examples/tutorial/tetrahedron/index.html
deleted file mode 100644
index 6074a84f..00000000
--- a/webgl-examples/tutorial/tetrahedron/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>WebGL Demo</title>
-    <link rel="stylesheet" href="../webgl.css" type="text/css" />
-  </head>
-
-  <body>
-    <canvas id="glcanvas" width="640" height="480"></canvas>
-  </body>
-
-  <script src="../gl-matrix.js"></script>
-  <script src="webgl-demo.js"></script>
-</html>
diff --git a/webgl-examples/tutorial/tetrahedron/webgl-demo.js b/webgl-examples/tutorial/tetrahedron/webgl-demo.js
deleted file mode 100644
index c07f4543..00000000
--- a/webgl-examples/tutorial/tetrahedron/webgl-demo.js
+++ /dev/null
@@ -1,440 +0,0 @@
-var tetrahedronRotation = 0.0;
-
-main();
-
-//
-// Start here
-//
-function main() {
-  const canvas = document.querySelector("#glcanvas");
-  const gl =
-    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-
-  // If we don't have a GL context, give up now
-
-  if (!gl) {
-    alert(
-      "Unable to initialize WebGL. Your browser or machine may not support it."
-    );
-    return;
-  }
-
-  // Vertex shader program
-
-  const vsSource = `
-    attribute vec4 aVertexPosition;
-    attribute vec4 aVertexColor;
-
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    varying lowp vec4 vColor;
-
-    void main(void) {
-      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-      vColor = aVertexColor;
-    }
-  `;
-
-  // Fragment shader program
-
-  const fsSource = `
-    varying lowp vec4 vColor;
-
-    void main(void) {
-      gl_FragColor = vColor;
-    }
-  `;
-
-  // Initialize a shader program; this is where all the lighting
-  // for the vertices and so forth is established.
-  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
-
-  // Collect all the info needed to use the shader program.
-  // Look up which attributes our shader program is using
-  // for aVertexPosition, aVevrtexColor and also
-  // look up uniform locations.
-  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
-      vertexColor: gl.getAttribLocation(shaderProgram, "aVertexColor"),
-    },
-    uniformLocations: {
-      projectionMatrix: gl.getUniformLocation(
-        shaderProgram,
-        "uProjectionMatrix"
-      ),
-      modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
-    },
-  };
-
-  // Here's where we call the routine that builds all the
-  // objects we'll be drawing.
-  const buffers = initBuffers(gl);
-
-  var then = 0;
-
-  // Draw the scene repeatedly
-  function render(now) {
-    now *= 0.001; // convert to seconds
-    const deltaTime = now - then;
-    then = now;
-
-    drawScene(gl, programInfo, buffers, deltaTime);
-
-    requestAnimationFrame(render);
-  }
-
-  requestAnimationFrame(render);
-}
-
-//
-// initBuffers
-//
-// Initialize the buffers we'll need. For this demo, we just
-// have one object -- a simple three-dimensional tetrahedron.
-//
-function initBuffers(gl) {
-  // Create a buffer for the tetrahedron's vertex positions.
-
-  const positionBuffer = gl.createBuffer();
-
-  // Select the positionBuffer as the one to apply buffer
-  // operations to from here out.
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
-  // Now create an array of positions for the tetrahedron.
-  // A equilateral triangle is needed ( well 4 of them )
-  // Point `O` is where the height is projected
-  // The tetrahedron is rotated around point `M`
-  // Height from vertex `A` to the edge `BC` is `H`
-  // The edge of the tetrahedron is 2 units long
-  // |AH| = 1.7320508075688772935274463415059
-  // The median and a height AH divides itself by
-  // the other medians into 1x and 2x ( one part and two parts )
-  // |AH|/3 = 0.57735026918962576450914878050197
-  // Find the tetrahedron height by argument sine (<OAD)
-  // <OAD = 54.735610317245345684622999669982
-  // |DO|  = 1.6329931618554520654648560498039
-  // |DO|/3 = 0.5443310539518173551549520166013
-  // 2 * (|DO|/3) = 1.0886621079036347103099040332026
-  const positions = [
-    -1.0,
-    -0.5773,
-    -0.54433, // A
-    1.0,
-    -0.5773,
-    -0.54433, // B
-    0.0,
-    1.1547,
-    -0.54433, // C
-
-    -1.0,
-    -0.5773,
-    -0.54433, // A
-    1.0,
-    -0.5773,
-    -0.54433, // B
-    0.0,
-    0.0,
-    1.08866, // D
-
-    1.0,
-    -0.5773,
-    -0.54433, // B
-    0.0,
-    1.1547,
-    -0.54433, // C
-    0.0,
-    0.0,
-    1.08866, // D
-
-    -1.0,
-    -0.5773,
-    -0.54433, // A
-    0.0,
-    1.1547,
-    -0.54433, // C
-    0.0,
-    0.0,
-    1.08866, // D
-  ];
-
-  // Now pass the list of positions into WebGL to build the
-  // shape. We do this by creating a Float32Array from the
-  // JavaScript array, then use it to fill the current buffer.
-
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
-
-  // Now set up the colors for the faces. We'll use solid colors
-  // for each face.
-
-  const faceColors = [
-    [1.0, 1.0, 1.0, 1.0], // Front face: white
-    [1.0, 0.0, 0.0, 1.0], // Back face: red
-    [0.0, 1.0, 0.0, 1.0], // Top face: green
-    [0.0, 0.0, 1.0, 1.0], // Bottom face: blue
-  ];
-
-  // Convert the array of colors into a table for all the vertices.
-
-  var colors = [];
-
-  for (var j = 0; j < faceColors.length; ++j) {
-    const c = faceColors[j];
-
-    // Repeat each color four times for the four vertices of the face
-    colors = colors.concat(c, c, c);
-  }
-
-  const colorBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-
-  // Build the element array buffer; this specifies the indices
-  // into the vertex arrays for each face's vertices.
-
-  const indexBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-
-  // This array defines each face as two triangles, using the
-  // indices into the vertex array to specify each triangle's
-  // position.
-
-  const indices = [
-    0,
-    1,
-    2,
-    0,
-    1,
-    2, // ABC
-    3,
-    4,
-    5,
-    3,
-    4,
-    5, // ABD
-    6,
-    7,
-    8,
-    6,
-    7,
-    8, // BCD
-    9,
-    10,
-    11,
-    9,
-    10,
-    11, // ACD
-    0,
-    0,
-    0,
-    0,
-    0,
-    0, // Dummy1
-    0,
-    0,
-    0,
-    0,
-    0,
-    0, // Dummy2
-  ];
-
-  // Now send the element array to GL
-
-  gl.bufferData(
-    gl.ELEMENT_ARRAY_BUFFER,
-    new Uint16Array(indices),
-    gl.STATIC_DRAW
-  );
-
-  return {
-    position: positionBuffer,
-    color: colorBuffer,
-    indices: indexBuffer,
-  };
-}
-
-//
-// Draw the scene.
-//
-function drawScene(gl, programInfo, buffers, deltaTime) {
-  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
-  gl.clearDepth(1.0); // Clear everything
-  gl.enable(gl.DEPTH_TEST); // Enable depth testing
-  gl.depthFunc(gl.LEQUAL); // Near things obscure far things
-
-  // Clear the canvas before we start drawing on it.
-
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-  // Create a perspective matrix, a special matrix that is
-  // used to simulate the distortion of perspective in a camera.
-  // Our field of view is 45 degrees, with a width/height
-  // ratio that matches the display size of the canvas
-  // and we only want to see objects between 0.1 units
-  // and 100 units away from the camera.
-
-  const fieldOfView = (45 * Math.PI) / 180; // in radians
-  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
-  const zNear = 0.1;
-  const zFar = 100.0;
-  const projectionMatrix = mat4.create();
-
-  // note: glmatrix.js always has the first argument
-  // as the destination to receive the result.
-  mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
-
-  // Set the drawing position to the "identity" point, which is
-  // the center of the scene.
-  const modelViewMatrix = mat4.create();
-
-  // Now move the drawing position a bit to where we want to
-  // start drawing the square.
-
-  mat4.translate(
-    modelViewMatrix, // destination matrix
-    modelViewMatrix, // matrix to translate
-    [-0.0, 0.0, -6.0]
-  ); // amount to translate
-  mat4.rotate(
-    modelViewMatrix, // destination matrix
-    modelViewMatrix, // matrix to rotate
-    tetrahedronRotation, // amount to rotate in radians
-    [0, 0, 1]
-  ); // axis to rotate around (Z)
-  mat4.rotate(
-    modelViewMatrix, // destination matrix
-    modelViewMatrix, // matrix to rotate
-    tetrahedronRotation * 0.7, // amount to rotate in radians
-    [0, 1, 0]
-  ); // axis to rotate around (X)
-
-  // Tell WebGL how to pull out the positions from the position
-  // buffer into the vertexPosition attribute
-  {
-    const numComponents = 3;
-    const type = gl.FLOAT;
-    const normalize = false;
-    const stride = 0;
-    const offset = 0;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
-    gl.vertexAttribPointer(
-      programInfo.attribLocations.vertexPosition,
-      numComponents,
-      type,
-      normalize,
-      stride,
-      offset
-    );
-    gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
-  }
-
-  // Tell WebGL how to pull out the colors from the color buffer
-  // into the vertexColor attribute.
-  {
-    const numComponents = 4;
-    const type = gl.FLOAT;
-    const normalize = false;
-    const stride = 0;
-    const offset = 0;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
-    gl.vertexAttribPointer(
-      programInfo.attribLocations.vertexColor,
-      numComponents,
-      type,
-      normalize,
-      stride,
-      offset
-    );
-    gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
-  }
-
-  // Tell WebGL which indices to use to index the vertices
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
-
-  // Tell WebGL to use our program when drawing
-
-  gl.useProgram(programInfo.program);
-
-  // Set the shader uniforms
-
-  gl.uniformMatrix4fv(
-    programInfo.uniformLocations.projectionMatrix,
-    false,
-    projectionMatrix
-  );
-  gl.uniformMatrix4fv(
-    programInfo.uniformLocations.modelViewMatrix,
-    false,
-    modelViewMatrix
-  );
-
-  {
-    const vertexCount = 36;
-    const type = gl.UNSIGNED_SHORT;
-    const offset = 0;
-    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
-  }
-
-  // Update the rotation for the next draw
-
-  tetrahedronRotation += deltaTime;
-}
-
-//
-// Initialize a shader program, so WebGL knows how to draw our data
-//
-function initShaderProgram(gl, vsSource, fsSource) {
-  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
-  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
-
-  // Create the shader program
-
-  const shaderProgram = gl.createProgram();
-  gl.attachShader(shaderProgram, vertexShader);
-  gl.attachShader(shaderProgram, fragmentShader);
-  gl.linkProgram(shaderProgram);
-
-  // If creating the shader program failed, alert
-
-  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-    alert(
-      "Unable to initialize the shader program: " +
-        gl.getProgramInfoLog(shaderProgram)
-    );
-    return null;
-  }
-
-  return shaderProgram;
-}
-
-//
-// creates a shader of the given type, uploads the source and
-// compiles it.
-//
-function loadShader(gl, type, source) {
-  const shader = gl.createShader(type);
-
-  // Send the source to the shader object
-
-  gl.shaderSource(shader, source);
-
-  // Compile the shader program
-
-  gl.compileShader(shader);
-
-  // See if it compiled successfully
-
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    alert(
-      "An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader)
-    );
-    gl.deleteShader(shader);
-    return null;
-  }
-
-  return shader;
-}

From 9edd9627054b78f64cabd005cffca5a0808281c9 Mon Sep 17 00:00:00 2001
From: Maksym Kobieliev <maksym.kobieliev@gmail.com>
Date: Thu, 7 Mar 2024 18:37:30 +0200
Subject: [PATCH 12/21] fix(simple-service-worker): avoid HTML to appear as
 text (#234)

* Fix #191

Fixes https://github.com/mdn/dom-examples/issues/191

* Update service-worker/simple-service-worker/app.js

Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>

---------

Co-authored-by: Claas Augner <495429+caugner@users.noreply.github.com>
Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
---
 service-worker/simple-service-worker/app.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/service-worker/simple-service-worker/app.js b/service-worker/simple-service-worker/app.js
index 72472bf5..e5f4f308 100644
--- a/service-worker/simple-service-worker/app.js
+++ b/service-worker/simple-service-worker/app.js
@@ -42,7 +42,11 @@ const createGalleryFigure = async (galleryImage) => {
     const myImage = document.createElement('img');
     const myCaption = document.createElement('caption');
     const myFigure = document.createElement('figure');
-    myCaption.textContent = `${galleryImage.name}: Taken by ${galleryImage.credit}`;
+    const myName = document.createElement('span');
+    myName.textContent = `${galleryImage.name}: `;
+    const myCredit = document.createElement('span');
+    myCredit.innerHTML = `Taken by ${galleryImage.credit}`;
+    myCaption.append(myName, myCredit);
     myImage.src = window.URL.createObjectURL(imageBlob);
     myImage.setAttribute('alt', galleryImage.alt);
     myFigure.append(myImage, myCaption);

From 69c077feb651ff465bee3ca3f822197f53ca81a7 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Mon, 11 Mar 2024 17:32:26 +0000
Subject: [PATCH 13/21] add display-mode: picture-in-picture example and fix
 sizing issue (#263)

* add display-mode: picture-in-picture example and fix sizing issue

* Update document-picture-in-picture/main.css

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

---------

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>
---
 document-picture-in-picture/main.css | 16 ++++++++++++++++
 document-picture-in-picture/main.js  |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/document-picture-in-picture/main.css b/document-picture-in-picture/main.css
index 06f31119..2920b44a 100644
--- a/document-picture-in-picture/main.css
+++ b/document-picture-in-picture/main.css
@@ -11,3 +11,19 @@
 #in-pip-message {
 	display: none;
 }
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
+	body {
+		background: antiquewhite;
+	}
+}
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
+	body {
+		background: #333;
+	}
+
+	a {
+		color: antiquewhite;
+	}
+}
diff --git a/document-picture-in-picture/main.js b/document-picture-in-picture/main.js
index 512e958a..d0b8635a 100644
--- a/document-picture-in-picture/main.js
+++ b/document-picture-in-picture/main.js
@@ -22,7 +22,7 @@ async function togglePictureInPicture() {
 		// Open a Picture-in-Picture window.
 		const pipWindow = await window.documentPictureInPicture.requestWindow({
 			width: videoPlayer.clientWidth,
-			height: videoPlayer.clientHeight,
+			height: videoPlayer.clientHeight + 50,
 		});
 
 		// Add pagehide listener to handle the case of the pip window being closed using the browser X button

From 929e39675d42b6642e96ede0b7cf4aa25eb822f5 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Tue, 12 Mar 2024 09:39:45 +0100
Subject: [PATCH 14/21] chore: Format CSS (#259)

---
 .prettierignore                               |   2 +
 .prettierrc.json                              |   3 +
 audiocontext-setsinkid/style.css              |  99 +++++-----
 channel-messaging-multimessage/style.css      |  18 +-
 .../half-highlight-fixed-size/style.css       |   5 +-
 document-picture-in-picture/main.css          |  14 +-
 fullscreen-api/main.css                       |  10 +-
 indexeddb-examples/idbindex/style/style.css   |   9 +-
 media-session/moz.css                         | 122 +++++++-----
 media/mediaerror/main.css                     |  20 +-
 media/web-dictaphone/styles/app.css           |  25 +--
 picture-in-picture/main.css                   |  14 +-
 pointer-lock/style.css                        |  31 +--
 screen-wake-lock-api/moz.css                  | 122 +++++++-----
 to-do-notifications/style/style.css           |   3 +-
 view-transitions/style.css                    |  18 +-
 web-crypto/derive-bits/style.css              |  78 ++++----
 web-crypto/derive-key/style.css               |  95 +++++-----
 web-crypto/encrypt-decrypt/style.css          |  95 +++++-----
 web-crypto/export-key/style.css               |  62 +++---
 web-crypto/import-key/style.css               | 104 +++++-----
 web-crypto/unwrap-key/style.css               | 104 +++++-----
 web-crypto/wrap-key/style.css                 |  62 +++---
 web-speech-api/phrase-matcher/style.css       |  10 +-
 web-speech-api/speak-easy-synthesis/style.css |  21 +-
 web-speech-api/speech-color-changer/style.css |  10 +-
 web-storage/style.css                         | 179 +++++++++---------
 27 files changed, 736 insertions(+), 599 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc.json

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..889bcbe1
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+**/*.html
+**/*.md
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..9c1044f6
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "bracketSameLine": true
+}
diff --git a/audiocontext-setsinkid/style.css b/audiocontext-setsinkid/style.css
index c370c14a..0a6b7073 100644
--- a/audiocontext-setsinkid/style.css
+++ b/audiocontext-setsinkid/style.css
@@ -1,46 +1,53 @@
-button, select, label {
-	font-weight: 400;
-	line-height: 1.5;
-	font-size: 1rem;
-	font-family: sans-serif;
-  }
-  
-  button, select {
-	padding: 6px 12px;
-	text-align: center;
-	background-color: transparent;
-	border-radius: .25rem;
-  }
-  
-  button {
-	color: #0d6efd;
-	border: 1px solid transparent;
-	border-color: #0d6efd;
-	cursor: pointer;
-	outline: 0;
-	display: inline-block;
-	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-	margin-bottom: 20px;
-  }
-  
-  button:hover {
-	color: #fff;
-	background-color: #0d6efd;
-	border-color: #0d6efd;
-  }
-  
-  button:disabled {
-	color: #999;
-	border-color: #999;
-	background: white;
-	cursor: not-allowed;
-  }
-  
-  label {
-	padding-right: 24px;
-  }
-  
-  .select-container p {
-	color: red;
-	margin-bottom: 36px;
-  }
\ No newline at end of file
+button,
+select,
+label {
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: 1rem;
+  font-family: sans-serif;
+}
+
+button,
+select {
+  padding: 6px 12px;
+  text-align: center;
+  background-color: transparent;
+  border-radius: 0.25rem;
+}
+
+button {
+  color: #0d6efd;
+  border: 1px solid transparent;
+  border-color: #0d6efd;
+  cursor: pointer;
+  outline: 0;
+  display: inline-block;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  margin-bottom: 20px;
+}
+
+button:hover {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+
+button:disabled {
+  color: #999;
+  border-color: #999;
+  background: white;
+  cursor: not-allowed;
+}
+
+label {
+  padding-right: 24px;
+}
+
+.select-container p {
+  color: red;
+  margin-bottom: 36px;
+}
diff --git a/channel-messaging-multimessage/style.css b/channel-messaging-multimessage/style.css
index 0c10a11d..ea128420 100644
--- a/channel-messaging-multimessage/style.css
+++ b/channel-messaging-multimessage/style.css
@@ -1,6 +1,7 @@
-html,body {
-	margin: 0;
-	font-family: 'Open Sans Condensed', sans-serif;
+html,
+body {
+  margin: 0;
+  font-family: "Open Sans Condensed", sans-serif;
 }
 
 body {
@@ -15,7 +16,7 @@ form {
 }
 
 form input {
-	width: 55%;
+  width: 55%;
 }
 
 form label {
@@ -24,7 +25,7 @@ form label {
 }
 
 form button {
-	width: 60%;
+  width: 60%;
   display: block;
   margin: 10px auto 0;
 }
@@ -33,14 +34,15 @@ p {
   margin: 10px 0;
 }
 
-h1, p {
+h1,
+p {
   text-align: center;
 }
 
 h1 {
-  font-family: 'Lobster Two', cursive;
+  font-family: "Lobster Two", cursive;
 }
 
 ul {
   width: 90%;
-}
\ No newline at end of file
+}
diff --git a/css-painting/half-highlight-fixed-size/style.css b/css-painting/half-highlight-fixed-size/style.css
index 9697b809..26f56448 100644
--- a/css-painting/half-highlight-fixed-size/style.css
+++ b/css-painting/half-highlight-fixed-size/style.css
@@ -1,4 +1,3 @@
 .fancy {
-    background-image: paint(headerHighlight);
-  }
-  
\ No newline at end of file
+  background-image: paint(headerHighlight);
+}
diff --git a/document-picture-in-picture/main.css b/document-picture-in-picture/main.css
index 2920b44a..ea4ed45c 100644
--- a/document-picture-in-picture/main.css
+++ b/document-picture-in-picture/main.css
@@ -1,15 +1,19 @@
 #contents {
-	width: 600px;
-	font: 14px "Open Sans", sans-serif;
+  width: 600px;
+  font:
+    14px "Open Sans",
+    sans-serif;
 }
 
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 10px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 10px "Open Sans",
+    sans-serif;
 }
 
 #in-pip-message {
-	display: none;
+  display: none;
 }
 
 @media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
diff --git a/fullscreen-api/main.css b/fullscreen-api/main.css
index c613fe9a..a8b267da 100644
--- a/fullscreen-api/main.css
+++ b/fullscreen-api/main.css
@@ -1,8 +1,10 @@
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 12px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 12px "Open Sans",
+    sans-serif;
 }
 
 #video {
-	max-width: 100%;
-}
\ No newline at end of file
+  max-width: 100%;
+}
diff --git a/indexeddb-examples/idbindex/style/style.css b/indexeddb-examples/idbindex/style/style.css
index 5627d6f6..a96799a3 100644
--- a/indexeddb-examples/idbindex/style/style.css
+++ b/indexeddb-examples/idbindex/style/style.css
@@ -10,8 +10,13 @@ h1 {
   font-family: "Bevan", cursive;
   font-size: 4rem;
   letter-spacing: 0.2rem;
-  text-shadow: 1px 1px 1px #eee4fe, 2px 2px 1px #eee4fe, 3px 3px 1px #7b62ae,
-    4px 4px 1px #7b62ae, 5px 5px 1px #261758, 6px 6px 1px #261758;
+  text-shadow:
+    1px 1px 1px #eee4fe,
+    2px 2px 1px #eee4fe,
+    3px 3px 1px #7b62ae,
+    4px 4px 1px #7b62ae,
+    5px 5px 1px #261758,
+    6px 6px 1px #261758;
 }
 
 table {
diff --git a/media-session/moz.css b/media-session/moz.css
index e50f740a..5f1a303a 100644
--- a/media-session/moz.css
+++ b/media-session/moz.css
@@ -1,85 +1,113 @@
 @font-face {
-  font-family: 'zillaslab';
-  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2') format('woff2');
+  font-family: "zillaslab";
+  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2")
+    format("woff2");
 }
 
 :root {
-	--black: hsl(0, 0%, 16%);
-	--white: hsl(0,0%,97%);
-	--blue: hsl(198, 100%, 66%);
-	--teal: hsl(198, 43%, 42%);
-	--lightYellow: hsl(43, 100%, 92%);
-	--grey: hsl(0, 0%, 80%);
-	--unit: 1.2rem;
+  --black: hsl(0, 0%, 16%);
+  --white: hsl(0, 0%, 97%);
+  --blue: hsl(198, 100%, 66%);
+  --teal: hsl(198, 43%, 42%);
+  --lightYellow: hsl(43, 100%, 92%);
+  --grey: hsl(0, 0%, 80%);
+  --unit: 1.2rem;
 }
 
 body {
-	padding: var(--unit);
-	background-color: var(--white);
-	font-family: 'Arial', sans-serif; font-size: 100%;
-	color: var(--black); line-height: 1.3;
+  padding: var(--unit);
+  background-color: var(--white);
+  font-family: "Arial", sans-serif;
+  font-size: 100%;
+  color: var(--black);
+  line-height: 1.3;
 }
 
 /* page partials */
 footer {
-	padding: var(--unit);
-	margin-top: calc(var(--unit)*2);
-	border-top: 1px solid var(--grey);
+  padding: var(--unit);
+  margin-top: calc(var(--unit) * 2);
+  border-top: 1px solid var(--grey);
 }
 footer p {
-	margin: 0px; text-align: center;
+  margin: 0px;
+  text-align: center;
 }
 
 /* base styles */
-h1, h2 {
-	font-family: "zillaslab", serif;
+h1,
+h2 {
+  font-family: "zillaslab", serif;
 }
 
 h2 {
-	padding: calc(var(--unit)/2);
-	background-color: var(--black);
-	color: var(--white); font-weight: normal;
+  padding: calc(var(--unit) / 2);
+  background-color: var(--black);
+  color: var(--white);
+  font-weight: normal;
 }
 
-p {}
+p {
+}
 
 a {
-	border: 1px solid var(--teal);
-	border-width: 0px 0px 1px 0px;
-	color: var(--teal);
-	text-decoration: none;
+  border: 1px solid var(--teal);
+  border-width: 0px 0px 1px 0px;
+  color: var(--teal);
+  text-decoration: none;
 }
 a:hover {
-	border-width: 1px 0px 0px 0px;
+  border-width: 1px 0px 0px 0px;
 }
 
 nav ul {
-	display: flex; justify-content: space-between;
-	margin: 0px; padding: 0px;
-	list-style: none;
+  display: flex;
+  justify-content: space-between;
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+nav li {
+  margin: 0px;
+  padding: 0px;
 }
-nav li {margin: 0px; padding: 0px;}
 
-dl {display: flex; flex-wrap: wrap;}
-dt, dd {padding: 2%; box-sizing: border-box;}
-dt {width: 30%; font-weight: bold; text-align: right;}
-dd {width: 66%; margin: 0px;}
+dl {
+  display: flex;
+  flex-wrap: wrap;
+}
+dt,
+dd {
+  padding: 2%;
+  box-sizing: border-box;
+}
+dt {
+  width: 30%;
+  font-weight: bold;
+  text-align: right;
+}
+dd {
+  width: 66%;
+  margin: 0px;
+}
 
 code {
-	background-color: var(--lightYellow);
-	font-family:monospace; font-size:110%;
-	letter-spacing:0.5px;
+  background-color: var(--lightYellow);
+  font-family: monospace;
+  font-size: 110%;
+  letter-spacing: 0.5px;
 }
 
 pre {
-	padding: var(--unit);
-	background-color: var(--grey);
-	border-left: 4px solid var(--teal);
-	white-space: pre-wrap;
-	overflow-wrap: break-word;
-	tab-size: 4; font-size: 86%;
+  padding: var(--unit);
+  background-color: var(--grey);
+  border-left: 4px solid var(--teal);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  tab-size: 4;
+  font-size: 86%;
 }
 
 pre code {
-	background: none;
-}
\ No newline at end of file
+  background: none;
+}
diff --git a/media/mediaerror/main.css b/media/mediaerror/main.css
index a1686056..473de5d0 100644
--- a/media/mediaerror/main.css
+++ b/media/mediaerror/main.css
@@ -1,18 +1,22 @@
 #contents {
-	width: 600px;
-	font: 14px "Open Sans", sans-serif;
+  width: 600px;
+  font:
+    14px "Open Sans",
+    sans-serif;
 }
 
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 10px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 10px "Open Sans",
+    sans-serif;
 }
 
 #controls {
-	border: 1px solid black;
+  border: 1px solid black;
 }
 
 #log {
-	font: 14px monospace;
-	padding: 6px 0;
-}
\ No newline at end of file
+  font: 14px monospace;
+  padding: 6px 0;
+}
diff --git a/media/web-dictaphone/styles/app.css b/media/web-dictaphone/styles/app.css
index ae6f1b6c..01feb166 100644
--- a/media/web-dictaphone/styles/app.css
+++ b/media/web-dictaphone/styles/app.css
@@ -4,12 +4,13 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
 body {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.8rem;
 }
 
@@ -19,7 +20,8 @@ body {
   flex-direction: column;
 }
 
-h1, h2 {
+h1,
+h2 {
   font-size: 2rem;
   text-align: center;
   font-weight: normal;
@@ -57,17 +59,17 @@ button {
   padding: 0.5rem;
 }
 
-button:hover, button:focus {
+button:hover,
+button:focus {
   box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1);
   background: #0ae;
 }
 
 button:active {
-  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5);
+  box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
   transform: translateY(2px);
 }
 
-
 /* Make the clips use as much space as possible, and
  * also show a scrollbar when there are too many clips to show
  * in the available space */
@@ -76,7 +78,8 @@ button:active {
   overflow: auto;
 }
 
-section, article {
+section,
+article {
   display: block;
 }
 
@@ -119,9 +122,9 @@ label {
   border-radius: 10px;
 }
 
-input[type=checkbox] {
-   position: absolute;
-   top: -100px;
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
 }
 
 aside {
@@ -146,7 +149,7 @@ aside a {
 }
 
 /* Toggled State of information box */
-input[type=checkbox]:checked ~ aside {
+input[type="checkbox"]:checked ~ aside {
   transform: translateX(0);
 }
 
diff --git a/picture-in-picture/main.css b/picture-in-picture/main.css
index 577a3182..c97680b6 100644
--- a/picture-in-picture/main.css
+++ b/picture-in-picture/main.css
@@ -1,13 +1,17 @@
 #contents {
-	width: 600px;
-	font: 14px "Open Sans", sans-serif;
+  width: 600px;
+  font:
+    14px "Open Sans",
+    sans-serif;
 }
 
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 10px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 10px "Open Sans",
+    sans-serif;
 }
 
 :picture-in-picture {
-	box-shadow: 0 0 0 5px red;
+  box-shadow: 0 0 0 5px red;
 }
diff --git a/pointer-lock/style.css b/pointer-lock/style.css
index 84d4c112..7a1edaf3 100644
--- a/pointer-lock/style.css
+++ b/pointer-lock/style.css
@@ -1,30 +1,31 @@
-html, body {
-	margin: 0;
-	padding: 0;
+html,
+body {
+  margin: 0;
+  padding: 0;
 }
 
 html {
-	font-family: sans-serif;
+  font-family: sans-serif;
 }
 
 canvas {
-	display: block;
-	margin: 0 auto;
-	border: 1px solid black;
+  display: block;
+  margin: 0 auto;
+  border: 1px solid black;
 }
 
 .information {
-	width: 640px;
-	margin: 0 auto 50px;
+  width: 640px;
+  margin: 0 auto 50px;
 }
 
 #tracker {
-	position: absolute;
-	top: 0;
-	right: 10px;
-	background-color: white;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  background-color: white;
 }
 
 h1 {
-	font-size: 200%;
-}
\ No newline at end of file
+  font-size: 200%;
+}
diff --git a/screen-wake-lock-api/moz.css b/screen-wake-lock-api/moz.css
index e50f740a..5f1a303a 100644
--- a/screen-wake-lock-api/moz.css
+++ b/screen-wake-lock-api/moz.css
@@ -1,85 +1,113 @@
 @font-face {
-  font-family: 'zillaslab';
-  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2') format('woff2');
+  font-family: "zillaslab";
+  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2")
+    format("woff2");
 }
 
 :root {
-	--black: hsl(0, 0%, 16%);
-	--white: hsl(0,0%,97%);
-	--blue: hsl(198, 100%, 66%);
-	--teal: hsl(198, 43%, 42%);
-	--lightYellow: hsl(43, 100%, 92%);
-	--grey: hsl(0, 0%, 80%);
-	--unit: 1.2rem;
+  --black: hsl(0, 0%, 16%);
+  --white: hsl(0, 0%, 97%);
+  --blue: hsl(198, 100%, 66%);
+  --teal: hsl(198, 43%, 42%);
+  --lightYellow: hsl(43, 100%, 92%);
+  --grey: hsl(0, 0%, 80%);
+  --unit: 1.2rem;
 }
 
 body {
-	padding: var(--unit);
-	background-color: var(--white);
-	font-family: 'Arial', sans-serif; font-size: 100%;
-	color: var(--black); line-height: 1.3;
+  padding: var(--unit);
+  background-color: var(--white);
+  font-family: "Arial", sans-serif;
+  font-size: 100%;
+  color: var(--black);
+  line-height: 1.3;
 }
 
 /* page partials */
 footer {
-	padding: var(--unit);
-	margin-top: calc(var(--unit)*2);
-	border-top: 1px solid var(--grey);
+  padding: var(--unit);
+  margin-top: calc(var(--unit) * 2);
+  border-top: 1px solid var(--grey);
 }
 footer p {
-	margin: 0px; text-align: center;
+  margin: 0px;
+  text-align: center;
 }
 
 /* base styles */
-h1, h2 {
-	font-family: "zillaslab", serif;
+h1,
+h2 {
+  font-family: "zillaslab", serif;
 }
 
 h2 {
-	padding: calc(var(--unit)/2);
-	background-color: var(--black);
-	color: var(--white); font-weight: normal;
+  padding: calc(var(--unit) / 2);
+  background-color: var(--black);
+  color: var(--white);
+  font-weight: normal;
 }
 
-p {}
+p {
+}
 
 a {
-	border: 1px solid var(--teal);
-	border-width: 0px 0px 1px 0px;
-	color: var(--teal);
-	text-decoration: none;
+  border: 1px solid var(--teal);
+  border-width: 0px 0px 1px 0px;
+  color: var(--teal);
+  text-decoration: none;
 }
 a:hover {
-	border-width: 1px 0px 0px 0px;
+  border-width: 1px 0px 0px 0px;
 }
 
 nav ul {
-	display: flex; justify-content: space-between;
-	margin: 0px; padding: 0px;
-	list-style: none;
+  display: flex;
+  justify-content: space-between;
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+nav li {
+  margin: 0px;
+  padding: 0px;
 }
-nav li {margin: 0px; padding: 0px;}
 
-dl {display: flex; flex-wrap: wrap;}
-dt, dd {padding: 2%; box-sizing: border-box;}
-dt {width: 30%; font-weight: bold; text-align: right;}
-dd {width: 66%; margin: 0px;}
+dl {
+  display: flex;
+  flex-wrap: wrap;
+}
+dt,
+dd {
+  padding: 2%;
+  box-sizing: border-box;
+}
+dt {
+  width: 30%;
+  font-weight: bold;
+  text-align: right;
+}
+dd {
+  width: 66%;
+  margin: 0px;
+}
 
 code {
-	background-color: var(--lightYellow);
-	font-family:monospace; font-size:110%;
-	letter-spacing:0.5px;
+  background-color: var(--lightYellow);
+  font-family: monospace;
+  font-size: 110%;
+  letter-spacing: 0.5px;
 }
 
 pre {
-	padding: var(--unit);
-	background-color: var(--grey);
-	border-left: 4px solid var(--teal);
-	white-space: pre-wrap;
-	overflow-wrap: break-word;
-	tab-size: 4; font-size: 86%;
+  padding: var(--unit);
+  background-color: var(--grey);
+  border-left: 4px solid var(--teal);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  tab-size: 4;
+  font-size: 86%;
 }
 
 pre code {
-	background: none;
-}
\ No newline at end of file
+  background: none;
+}
diff --git a/to-do-notifications/style/style.css b/to-do-notifications/style/style.css
index ffaca88b..ec9ed54b 100644
--- a/to-do-notifications/style/style.css
+++ b/to-do-notifications/style/style.css
@@ -59,7 +59,8 @@ input[type="submit"] {
   color: black;
   text-shadow: 1px 1px 1px black;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0px 5px 3px rgba(255, 255, 255, 0.2),
+  box-shadow:
+    inset 0px 5px 3px rgba(255, 255, 255, 0.2),
     inset 0px -5px 3px rgba(0, 0, 0, 0.2);
 }
 
diff --git a/view-transitions/style.css b/view-transitions/style.css
index 1a8a3ff6..412b44ad 100644
--- a/view-transitions/style.css
+++ b/view-transitions/style.css
@@ -1,7 +1,7 @@
 /* resets */
 
 figure {
-  margin: 0
+  margin: 0;
 }
 
 /* layout */
@@ -32,7 +32,8 @@ a {
   outline: 0;
 }
 
-.thumbs a:hover img, .thumbs a:focus img {
+.thumbs a:hover img,
+.thumbs a:focus img {
   opacity: 1;
 }
 
@@ -46,10 +47,11 @@ a {
   border-radius: 7px;
 }
 
-footer, figcaption {
+footer,
+figcaption {
   position: absolute;
   padding: 5px 10px;
-  background-color: rgba(255,255,255,0.5);
+  background-color: rgba(255, 255, 255, 0.5);
 }
 
 footer {
@@ -70,8 +72,10 @@ figcaption {
 
 /* text */
 
-h1, figcaption, a {
-  font-family: 'Roboto Slab', serif;
+h1,
+figcaption,
+a {
+  font-family: "Roboto Slab", serif;
 }
 
 h1 {
@@ -150,4 +154,4 @@ figcaption {
 
 ::view-transition-new(figure-caption) {
   animation: 0.25s 0.25s linear both grow-x;
-} */
\ No newline at end of file
+} */
diff --git a/web-crypto/derive-bits/style.css b/web-crypto/derive-bits/style.css
index d5ceac2b..703427db 100644
--- a/web-crypto/derive-bits/style.css
+++ b/web-crypto/derive-bits/style.css
@@ -1,93 +1,95 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .derive-bits {
-    margin: 0 .5rem;
+.description,
+.derive-bits {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .derive-bits {
-    box-shadow: -1px 2px 5px gray;
-    padding: .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.5rem;
+  margin-bottom: 2rem;
 }
 
 input[type="button"] {
-    width: 5rem;
+  width: 5rem;
 }
 
 .derived-bits-value {
-    padding-left: .5rem;
-    font-family: monospace;
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 40rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 40rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* derive-bits controls grid */
 .derive-bits-controls {
-    display: grid;
-    grid-template-columns: 1fr 5rem;
-    grid-template-rows: 1fr;
+  display: grid;
+  grid-template-columns: 1fr 5rem;
+  grid-template-rows: 1fr;
 }
 
 .derived-bits {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
 .derive-bits-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/derive-key/style.css b/web-crypto/derive-key/style.css
index c97e99e3..a73bf319 100644
--- a/web-crypto/derive-key/style.css
+++ b/web-crypto/derive-key/style.css
@@ -1,46 +1,49 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .derive-key {
-    margin: 0 .5rem;
+.description,
+.derive-key {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .derive-key {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .derive-key-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 input[type="button"] {
-    width: 5rem;
+  width: 5rem;
 }
 
-.ciphertext-value, .decrypted-value {
-    padding-left: .5rem;
-    font-family: monospace;
+.ciphertext-value,
+.decrypted-value {
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
 .error {
@@ -49,68 +52,68 @@ input[type="button"] {
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 32rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 32rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* derive-key controls grid */
 .derive-key-controls {
-    display: grid;
-    grid-template-columns: 1fr 5rem;
-    grid-template-rows: 1fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 5rem;
+  grid-template-rows: 1fr 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
 .ciphertext {
-    grid-column-start: 1;
-    grid-row-start: 2;
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .decrypted {
-    grid-column-start: 1;
-    grid-row-start: 3;
+  grid-column-start: 1;
+  grid-row-start: 3;
 }
 
 .encrypt-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
 .decrypt-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/encrypt-decrypt/style.css b/web-crypto/encrypt-decrypt/style.css
index 8627f88a..14fcc420 100644
--- a/web-crypto/encrypt-decrypt/style.css
+++ b/web-crypto/encrypt-decrypt/style.css
@@ -1,112 +1,115 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .encrypt-decrypt {
-    margin: 0 .5rem;
+.description,
+.encrypt-decrypt {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .encrypt-decrypt {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .encrypt-decrypt-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 input[type="button"] {
-    width: 5rem;
+  width: 5rem;
 }
 
-.ciphertext-value, .decrypted-value {
-    padding-left: .5rem;
-    font-family: monospace;
+.ciphertext-value,
+.decrypted-value {
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 32rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 32rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* encrypt-decrypt controls grid */
 .encrypt-decrypt-controls {
-    display: grid;
-    grid-template-columns: 1fr 5rem;
-    grid-template-rows: 1fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 5rem;
+  grid-template-rows: 1fr 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
 .ciphertext {
-    grid-column-start: 1;
-    grid-row-start: 2;
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .decrypted {
-    grid-column-start: 1;
-    grid-row-start: 3;
+  grid-column-start: 1;
+  grid-row-start: 3;
 }
 
 .encrypt-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
 .decrypt-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/export-key/style.css b/web-crypto/export-key/style.css
index 2d62b92c..d4bd28ad 100644
--- a/web-crypto/export-key/style.css
+++ b/web-crypto/export-key/style.css
@@ -1,72 +1,74 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .examples {
-    margin: 0 .5rem;
+.description,
+.examples {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .output {
-    box-shadow: inset 0 0 3px 1px black;
-    height: 100%;
+  box-shadow: inset 0 0 3px 1px black;
+  height: 100%;
 }
 
 .exported-key {
-    padding: 1em;
-    white-space: pre-wrap;
-    word-break: break-all;
+  padding: 1em;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 48rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 48rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/import-key/style.css b/web-crypto/import-key/style.css
index 7034d177..2611a356 100644
--- a/web-crypto/import-key/style.css
+++ b/web-crypto/import-key/style.css
@@ -1,112 +1,118 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .import-key {
-    margin: 0 .5rem;
+.description,
+.import-key {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .import-key {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .import-key-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
-.ciphertext-value, .signature-value {
-    padding-left: .5rem;
-    font-family: monospace;
+.ciphertext-value,
+.signature-value {
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
-.sign-button, .encrypt-button {
-    background-color: green;
-    color: white;
+.sign-button,
+.encrypt-button {
+  background-color: green;
+  color: white;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 36rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 36rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* encrypt-decrypt controls grid */
 .import-key-controls {
-    display: grid;
-    grid-template-columns: 1fr 8rem;
-    grid-template-rows: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 8rem;
+  grid-template-rows: 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
-.ciphertext, .signature {
-    grid-column-start: 1;
-    grid-row-start: 2;
+.ciphertext,
+.signature {
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .import-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
-.encrypt-button, .sign-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+.encrypt-button,
+.sign-button {
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/unwrap-key/style.css b/web-crypto/unwrap-key/style.css
index 0871e6f1..a451057e 100644
--- a/web-crypto/unwrap-key/style.css
+++ b/web-crypto/unwrap-key/style.css
@@ -1,112 +1,118 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .unwrap-key {
-    margin: 0 .5rem;
+.description,
+.unwrap-key {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .unwrap-key {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .unwrap-key-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
-.ciphertext-value, .signature-value {
-    padding-left: .5rem;
-    font-family: monospace;
+.ciphertext-value,
+.signature-value {
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
-.sign-button, .encrypt-button {
-    background-color: green;
-    color: white;
+.sign-button,
+.encrypt-button {
+  background-color: green;
+  color: white;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 36rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 36rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* encrypt-decrypt controls grid */
 .unwrap-key-controls {
-    display: grid;
-    grid-template-columns: 1fr 8rem;
-    grid-template-rows: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 8rem;
+  grid-template-rows: 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
-.ciphertext, .signature {
-    grid-column-start: 1;
-    grid-row-start: 2;
+.ciphertext,
+.signature {
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .unwrap-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
-.encrypt-button, .sign-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+.encrypt-button,
+.sign-button {
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/wrap-key/style.css b/web-crypto/wrap-key/style.css
index 5c3b4410..0dda8b40 100644
--- a/web-crypto/wrap-key/style.css
+++ b/web-crypto/wrap-key/style.css
@@ -1,72 +1,74 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .examples {
-    margin: 0 .5rem;
+.description,
+.examples {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .output {
-    box-shadow: inset 0 0 3px 1px black;
-    height: 100%;
+  box-shadow: inset 0 0 3px 1px black;
+  height: 100%;
 }
 
 .wrapped-key {
-    padding: 1em;
-    white-space: pre-wrap;
-    word-break: break-all;
+  padding: 1em;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 48rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 48rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-speech-api/phrase-matcher/style.css b/web-speech-api/phrase-matcher/style.css
index 85d842ca..5dab06ad 100644
--- a/web-speech-api/phrase-matcher/style.css
+++ b/web-speech-api/phrase-matcher/style.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   margin: 0;
 }
 
@@ -12,14 +13,15 @@ body {
   overflow: hidden;
 }
 
-h1, p {
+h1,
+p {
   font-family: sans-serif;
   text-align: center;
 }
 
 div p {
   padding: 20px;
-  background-color: rgba(0,0,0,0.2);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 div {
@@ -51,4 +53,4 @@ button {
 
 .output {
   font-style: italic;
-}
\ No newline at end of file
+}
diff --git a/web-speech-api/speak-easy-synthesis/style.css b/web-speech-api/speak-easy-synthesis/style.css
index 60b6b878..48ce6339 100644
--- a/web-speech-api/speak-easy-synthesis/style.css
+++ b/web-speech-api/speak-easy-synthesis/style.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   margin: 0;
 }
 
@@ -12,13 +13,16 @@ body {
   margin: 0 auto;
 }
 
-h1, p {
+h1,
+p {
   font-family: sans-serif;
   text-align: center;
   padding: 20px;
 }
 
-.txt, select, form > div {
+.txt,
+select,
+form > div {
   display: block;
   margin: 0 auto;
   font-family: sans-serif;
@@ -38,7 +42,8 @@ form > div {
   width: 81%;
 }
 
-.txt, form > div {
+.txt,
+form > div {
   margin-bottom: 10px;
   overflow: auto;
 }
@@ -53,13 +58,15 @@ label {
   line-height: 1.5;
 }
 
-.rate-value, .pitch-value {
+.rate-value,
+.pitch-value {
   float: right;
   width: 5%;
   line-height: 1.5;
 }
 
-#rate, #pitch {
+#rate,
+#pitch {
   float: right;
   width: 81%;
 }
@@ -71,4 +78,4 @@ label {
 
 .controls button {
   padding: 10px;
-}
\ No newline at end of file
+}
diff --git a/web-speech-api/speech-color-changer/style.css b/web-speech-api/speech-color-changer/style.css
index f6f12cce..1c735605 100644
--- a/web-speech-api/speech-color-changer/style.css
+++ b/web-speech-api/speech-color-changer/style.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   margin: 0;
 }
 
@@ -13,7 +14,8 @@ body {
   margin: 0 auto;
 }
 
-h1, p {
+h1,
+p {
   font-family: sans-serif;
   text-align: center;
   padding: 20px;
@@ -26,7 +28,7 @@ div {
   bottom: 0px;
   right: 0;
   left: 0;
-  background-color: rgba(255,255,255,0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 ul {
@@ -34,5 +36,5 @@ ul {
 }
 
 .hints span {
-  text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
+  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7);
 }
diff --git a/web-storage/style.css b/web-storage/style.css
index 1b5d0d5d..837e2d15 100644
--- a/web-storage/style.css
+++ b/web-storage/style.css
@@ -1,83 +1,87 @@
 /* General setup */
 
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-	margin: 0;
+html,
+body {
+  margin: 0;
 }
 
 html {
-	font-size: 10px;
-	font-family: sans-serif;
+  font-size: 10px;
+  font-family: sans-serif;
 }
 
 /* Typography */
 
 h1 {
-	font-size: 6rem;
+  font-size: 6rem;
 }
 
-p,form,li {
-	font-size: 1.6rem;
-	line-height: 1.5;
-	font-family: sans-serif;
+p,
+form,
+li {
+  font-size: 1.6rem;
+  line-height: 1.5;
+  font-family: sans-serif;
 }
 
 /* Layout and styles */
 
 html {
-	background-color: #FF0000;
-	height: 100%;
+  background-color: #ff0000;
+  height: 100%;
 }
 
 body {
-	display: -webkit-box;
-	display: -moz-box;
-	display: box;
-	display: flex;
-    
-    -webkit-box-align: center;
-	-moz-box-align: center;
-	box-align: center;
-	justify-content: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+  display: flex;
+
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  box-align: center;
+  justify-content: center;
 
-    -webkit-box-pack: center;
-	-moz-box-pack: center;
-	box-pack: center;
-    align-items: center;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  box-pack: center;
+  align-items: center;
 
-    height: inherit;
+  height: inherit;
 }
 
 body > .wrapper {
-    width: 90%;
-	max-width: 800px;
-	background-color: rgb(250,250,250);
-	padding: 2rem;
-	position: relative;
-	border: 5px solid black;
+  width: 90%;
+  max-width: 800px;
+  background-color: rgb(250, 250, 250);
+  padding: 2rem;
+  position: relative;
+  border: 5px solid black;
 }
 
 body > div > div {
-	width: 300px;
+  width: 300px;
 }
 
 h1 {
-	margin: 0;
-	padding: 0;
-	font-family: sans-serif;
-	position: absolute;
-	left: 2rem;
-	top: -4.6rem;
-	text-transform: uppercase;
-	color: rgb(250,250,250);
-	text-shadow: 0px -1px 1px black,
-	             0px -2px 1px black,
-	             0px -3px 1px black,
-	             0px -4px 1px black,
-	             0px -5px 1px black;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  position: absolute;
+  left: 2rem;
+  top: -4.6rem;
+  text-transform: uppercase;
+  color: rgb(250, 250, 250);
+  text-shadow:
+    0px -1px 1px black,
+    0px -2px 1px black,
+    0px -3px 1px black,
+    0px -4px 1px black,
+    0px -5px 1px black;
 }
 
 form div label {
@@ -86,69 +90,70 @@ form div label {
   text-align: right;
 }
 
-form div input, form div select {
-	float: right;
+form div input,
+form div select {
+  float: right;
 }
 
 form div input {
-	width: 49%;
-	line-height: 1.5;
+  width: 49%;
+  line-height: 1.5;
 }
 
 form div select {
-	width: 50%;
+  width: 50%;
 }
 
 form div option {
-		height: 2rem;
+  height: 2rem;
 }
 
 form div {
-	clear: both;
-	margin: 0 auto;
-	width: 70%;
-	padding-bottom: 4rem;
+  clear: both;
+  margin: 0 auto;
+  width: 70%;
+  padding-bottom: 4rem;
 }
 
 footer {
-	clear: both;
+  clear: both;
 }
 
 img {
-	position: absolute;
-	bottom: 1rem;
-	left: 1rem;
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
 }
 
 @media (max-width: 800px) {
-	body > div {
-	  width: 100%;
-	}
+  body > div {
+    width: 100%;
+  }
 }
 
 @media (max-width: 600px) {
-    h1 {
-      font-size: 3rem;
-      top: -2.2rem;
-    }
-
-	form div label {
-      float: none;
-      width: 100%;
-      text-align: left;
-    }
-
-    form div input, form div select {
-	  float: none;
-	  width: 100%;
-    }
-
-    form div {
-	  padding-bottom: 1.5rem;
-    }
-
-    img {
-	  bottom: -4rem;
-    }
-
+  h1 {
+    font-size: 3rem;
+    top: -2.2rem;
+  }
+
+  form div label {
+    float: none;
+    width: 100%;
+    text-align: left;
+  }
+
+  form div input,
+  form div select {
+    float: none;
+    width: 100%;
+  }
+
+  form div {
+    padding-bottom: 1.5rem;
+  }
+
+  img {
+    bottom: -4rem;
+  }
 }

From 909895913cedda7fe513481bc324b95870ac1824 Mon Sep 17 00:00:00 2001
From: Patrick Brosset <patrick.brosset@microsoft.com>
Date: Mon, 18 Mar 2024 18:52:29 +0100
Subject: [PATCH 15/21] Make EditContext demo match the MDN tutorial (remove
 useless `setInterval`, debug mode, reorganize in files, clean up code) (#266)

* Removing useless setInterval render

* Remove the debug mode

* Not needed debug mode visual transition

* Split into multiple files

* Final changes
---
 edit-context/html-editor/converter.js |  96 ++++++
 edit-context/html-editor/editor.js    | 222 ++++++++++++
 edit-context/html-editor/index.html   | 473 +-------------------------
 edit-context/html-editor/styles.css   | 126 +++++++
 4 files changed, 448 insertions(+), 469 deletions(-)
 create mode 100644 edit-context/html-editor/converter.js
 create mode 100644 edit-context/html-editor/editor.js
 create mode 100644 edit-context/html-editor/styles.css

diff --git a/edit-context/html-editor/converter.js b/edit-context/html-editor/converter.js
new file mode 100644
index 00000000..4c0b844b
--- /dev/null
+++ b/edit-context/html-editor/converter.js
@@ -0,0 +1,96 @@
+// The EditContext object only knows about a plain text string and about
+// character offsets. However, our editor view renders the text by using
+// DOM nodes. So we sometimes need to convert between the two.
+// This function converts from a DOM selection object to character offsets.
+export function fromSelectionToOffsets(selection, editorEl) {
+  const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
+
+  let anchorNodeFound = false;
+  let extentNodeFound = false;
+  let anchorOffset = 0;
+  let extentOffset = 0;
+
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+    if (node === selection.anchorNode) {
+      anchorNodeFound = true;
+      anchorOffset += selection.anchorOffset;
+    }
+
+    if (node === selection.extentNode) {
+      extentNodeFound = true;
+      extentOffset += selection.extentOffset;
+    }
+
+    if (!anchorNodeFound) {
+      anchorOffset += node.textContent.length;
+    }
+    if (!extentNodeFound) {
+      extentOffset += node.textContent.length;
+    }
+  }
+
+  if (!anchorNodeFound || !extentNodeFound) {
+    return null;
+  }
+
+  return { start: anchorOffset, end: extentOffset };
+}
+
+// The EditContext object only knows about a plain text string and about
+// character offsets. However, our editor view renders the text by using
+// DOM nodes. So we sometimes need to convert between the two.
+// This function converts character offsets to a DOM selection object.
+export function fromOffsetsToSelection(start, end, editorEl) {
+  const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
+
+  let offset = 0;
+  let anchorNode = null;
+  let anchorOffset = 0;
+  let extentNode = null;
+  let extentOffset = 0;
+
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+
+    if (!anchorNode && offset + node.textContent.length >= start) {
+      anchorNode = node;
+      anchorOffset = start - offset;
+    }
+
+    if (!extentNode && offset + node.textContent.length >= end) {
+      extentNode = node;
+      extentOffset = end - offset;
+    }
+
+    if (anchorNode && extentNode) {
+      break;
+    }
+
+    offset += node.textContent.length;
+  }
+
+  return { anchorNode, anchorOffset, extentNode, extentOffset };
+}
+
+// The EditContext object only knows about character offsets. But out editor
+// view renders HTML tokens as DOM nodes. This function finds DOM node tokens
+// that are in the provided EditContext offset range.
+export function fromOffsetsToRenderedTokenNodes(renderedTokens, start, end) {
+  const tokenNodes = [];
+
+  for (let offset = start; offset < end; offset++) {
+    const token = renderedTokens.find(
+      (token) => token.pos <= offset && token.pos + token.value.length > offset
+    );
+    if (token) {
+      tokenNodes.push({
+        node: token.node,
+        nodeOffset: token.pos,
+        charOffset: offset,
+      });
+    }
+  }
+
+  return tokenNodes;
+}
diff --git a/edit-context/html-editor/editor.js b/edit-context/html-editor/editor.js
new file mode 100644
index 00000000..728b89ef
--- /dev/null
+++ b/edit-context/html-editor/editor.js
@@ -0,0 +1,222 @@
+import { tokenizeHTML } from "./tokenizer.js";
+import {
+  fromOffsetsToRenderedTokenNodes,
+  fromSelectionToOffsets,
+  fromOffsetsToSelection,
+} from "./converter.js";
+
+const IS_EDIT_CONTEXT_SUPPORTED = "EditContext" in window;
+const IS_CUSTOM_HIGHLIGHT_SUPPORTED = "Highlight" in window;
+
+// The editor element.
+const editorEl = document.getElementById("html-editor");
+
+// The current tokens from the html text.
+let currentTokens = [];
+
+// Instances of CSS custom Highlight objects, used to render
+// the IME composition text formats.
+const imeHighlights = {
+  "solid-thin": null,
+  "solid-thick": null,
+  "dotted-thin": null,
+  "dotted-thick": null,
+  "dashed-thin": null,
+  "dashed-thick": null,
+  "wavy-thin": null,
+  "wavy-thick": null,
+  "squiggle-thin": null,
+  "squiggle-thick": null,
+};
+if (IS_CUSTOM_HIGHLIGHT_SUPPORTED) {
+  for (const [key, value] of Object.entries(imeHighlights)) {
+    imeHighlights[key] = new Highlight();
+    CSS.highlights.set(`ime-${key}`, imeHighlights[key]);
+  }
+} else {
+  console.warn(
+    "Custom highlights are not supported in this browser. IME formats will not be rendered."
+  );
+}
+
+(function () {
+  if (!IS_EDIT_CONTEXT_SUPPORTED) {
+    editorEl.textContent =
+      "Sorry, your browser doesn't support the EditContext API. This demo will not work.";
+    return;
+  }
+
+  // Instantiate the EditContext object.
+  const editContext = new EditContext({
+    text: "<html>\n  <body id=foo>\n    <h1 id='header'>Cool Title</h1>\n    <p class=\"wow\">hello<br/>How are you? test</p>\n  </body>\n</html>",
+  });
+
+  // Attach the EditContext object to the editor element.
+  // This makes the element focusable and able to receive text input.
+  editorEl.editContext = editContext;
+
+  // Update the control bounds (i.e. where the editor is on the screen)
+  // now, and when the window is resized.
+  // This helps the OS position the IME composition window correctly.
+  function updateControlBounds() {
+    const editorBounds = editorEl.getBoundingClientRect();
+    editContext.updateControlBounds(editorBounds);
+  }
+  updateControlBounds();
+  window.addEventListener("resize", updateControlBounds);
+
+  // Update the selection and selection bounds in the EditContext object.
+  // This helps the OS position the IME composition window correctly.
+  function updateSelection(start, end) {
+    editContext.updateSelection(start, end);
+    // Get the bounds of the selection.
+    editContext.updateSelectionBounds(
+      document.getSelection().getRangeAt(0).getBoundingClientRect()
+    );
+  }
+
+  // The render function is used to update the view of the editor.
+  // The EditContext object is our "model", and the editorEl is our "view".
+  // The render function's job is to update the view when the model changes.
+  function render(text, selectionStart, selectionEnd) {
+    // Empty the editor. We're re-rendering everything.
+    editorEl.innerHTML = "";
+
+    // Tokenize the text.
+    currentTokens = tokenizeHTML(text);
+
+    // Render each token as a DOM node.
+    for (const token of currentTokens) {
+      const span = document.createElement("span");
+      span.classList.add(`token-${token.type}`);
+      span.textContent = token.value;
+      editorEl.appendChild(span);
+
+      // Store the new DOM node as a property of the token
+      // in the currentTokens array. We will need it again
+      // later in fromOffsetsToRenderedTokenNodes.
+      token.node = span;
+    }
+
+    // Move the selection to the correct location.
+    // It was lost when we updated the DOM.
+    // The EditContext API gives us the selection as text offsets.
+    // Convert it into a DOM selection.
+    const { anchorNode, anchorOffset, extentNode, extentOffset } =
+      fromOffsetsToSelection(selectionStart, selectionEnd, editorEl);
+    document
+      .getSelection()
+      .setBaseAndExtent(anchorNode, anchorOffset, extentNode, extentOffset);
+  }
+
+  // Listen to the EditContext's textupdate event.
+  // This tells us when text input happens. We use it to re-render the view.
+  editContext.addEventListener("textupdate", (e) => {
+    render(editContext.text, e.selectionStart, e.selectionEnd);
+  });
+
+  // Visually show when we're composing text, like when using an IME,
+  // or voice dictation.
+  editContext.addEventListener("compositionstart", (e) => {
+    editorEl.classList.add("is-composing");
+  });
+  editContext.addEventListener("compositionend", (e) => {
+    editorEl.classList.remove("is-composing");
+  });
+
+  // Update the character bounds when the EditContext needs it.
+  editContext.addEventListener("characterboundsupdate", (e) => {
+    const tokenNodes = fromOffsetsToRenderedTokenNodes(
+      currentTokens,
+      e.rangeStart,
+      e.rangeEnd
+    );
+
+    const charBounds = tokenNodes.map(({ node, nodeOffset, charOffset }) => {
+      const range = document.createRange();
+      range.setStart(node.firstChild, charOffset - nodeOffset);
+      range.setEnd(node.firstChild, charOffset - nodeOffset + 1);
+      return range.getBoundingClientRect();
+    });
+
+    editContext.updateCharacterBounds(e.rangeStart, charBounds);
+  });
+
+  // Draw IME composition text formats if needed.
+  editContext.addEventListener("textformatupdate", (e) => {
+    const formats = e.getTextFormats();
+
+    for (const format of formats) {
+      // Find the DOM selection that corresponds to the format's range.
+      const selection = fromOffsetsToSelection(
+        format.rangeStart,
+        format.rangeEnd,
+        editorEl
+      );
+
+      // Highlight the selection with the right style and thickness.
+      addHighlight(selection, format.underlineStyle, format.underlineThickness);
+    }
+  });
+
+  function addHighlight(selection, underlineStyle, underlineThickness) {
+    // Get the right CSS custom Highlight object depending on the
+    // underline style and thickness.
+    const highlight =
+      imeHighlights[
+        `${underlineStyle.toLowerCase()}-${underlineThickness.toLowerCase()}`
+      ];
+
+    if (highlight) {
+      // Add a range to the Highlight object.
+      const range = document.createRange();
+      range.setStart(selection.anchorNode, selection.anchorOffset);
+      range.setEnd(selection.extentNode, selection.extentOffset);
+      highlight.add(range);
+    }
+  }
+
+  // Handle key presses that are not already handled by the EditContext.
+  editorEl.addEventListener("keydown", (e) => {
+    const start = Math.min(
+      editContext.selectionStart,
+      editContext.selectionEnd
+    );
+    const end = Math.max(editContext.selectionStart, editContext.selectionEnd);
+
+    if (e.key === "Tab") {
+      e.preventDefault();
+      editContext.updateText(start, end, "\t");
+      updateSelection(start + 1, start + 1);
+      render(
+        editContext.text,
+        editContext.selectionStart,
+        editContext.selectionEnd
+      );
+    } else if (e.key === "Enter") {
+      editContext.updateText(start, end, "\n");
+      updateSelection(start + 1, start + 1);
+      render(
+        editContext.text,
+        editContext.selectionStart,
+        editContext.selectionEnd
+      );
+    }
+  });
+
+  // Listen to selectionchange events to let the EditContext know where it is.
+  document.addEventListener("selectionchange", () => {
+    const selection = document.getSelection();
+    const offsets = fromSelectionToOffsets(selection, editorEl);
+    if (offsets) {
+      updateSelection(offsets.start, offsets.end);
+    }
+  });
+
+  // Render the initial view.
+  render(
+    editContext.text,
+    editContext.selectionStart,
+    editContext.selectionEnd
+  );
+})();
diff --git a/edit-context/html-editor/index.html b/edit-context/html-editor/index.html
index ad54f6c4..9fc192a7 100644
--- a/edit-context/html-editor/index.html
+++ b/edit-context/html-editor/index.html
@@ -6,481 +6,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Edit Context API: HTML editor demo</title>
 
-  <style>
-    html,
-    body {
-      font-size: .9rem;
-      font-family: consolas, monospace;
-      margin: 0;
-      height: 100%;
-      box-sizing: border-box;
-    }
-
-    body {
-      padding: 1rem;
-      display: grid;
-      grid-template-rows: 1fr min-content;
-      gap: 1rem;
-      place-items: center;
-    }
-
-    #html-editor {
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      border-radius: .5rem;
-      padding: 1rem;
-      overflow: auto;
-      white-space: pre;
-      tab-size: 2;
-      caret-color: red;
-      background: #000;
-      line-height: 1.6;
-      transition: line-height .2s;
-      color: red;
-    }
-
-    #html-editor.debug {
-      line-height: 2.4;
-    }
-
-    #html-editor::selection {
-      color: white;
-      background: red;
-    }
-
-    #html-editor.is-composing {
-      box-shadow: 0 0 0 .25rem red;
-    }
-
-    [data-token-pos] {
-      margin: 0;
-      transition: margin .2s;
-    }
-
-    .debug [data-token-pos] {
-      position: relative;
-      margin: 0 .2rem;
-    }
-
-    .debug [data-token-pos]::before {
-      position: absolute;
-      content: attr(data-token-pos);
-      color: #ddd;
-      font-size: .5rem;
-      top: -1rem;
-      left: 0;
-      line-height: 1;
-      padding: .1rem .1rem 1rem .1rem;
-      background-image:
-        linear-gradient(to bottom, #999 0 1px, transparent 1px .7rem, #999 .7rem calc(.7rem + 1px), transparent 0),
-        linear-gradient(to right, #999 0 1px, transparent 1px calc(100% - 1px), #999 0),
-        linear-gradient(to bottom, #333 0 .7rem, transparent 0),
-        linear-gradient(to right, #999 0 1px, transparent 0);
-      background-size: 100% 100%, 100% .7rem, 100% 100%, 100% 100%;
-      background-repeat: no-repeat;
-    }
-
-    .token-openTagStart,
-    .token-openTagEnd,
-    .token-closeTagStart,
-    .token-closeTagEnd,
-    .token-selfClose {
-      background: rgb(7 53 92);
-      margin: 0 2px;
-      color: white;
-      border-radius: .25rem;
-    }
-
-    .token-equal {
-      color: white;
-    }
-
-    .token-tagName {
-      font-weight: bold;
-      color: rgb(117, 186, 242);
-    }
-
-    .token-attributeName {
-      color: rgb(207, 81, 198);
-    }
-
-    .token-attributeValue {
-      font-style: italic;
-      color: rgb(127 230 127);
-      border: 1px dashed #8c8c8c;
-      border-width: 1px 0 1px 0;
-    }
-
-    .token-quoteStart,
-    .token-quoteEnd {
-      font-weight: bold;
-      color: rgb(127 230 127);
-      border: 1px solid #8c8c8c;
-      border-width: 1px 0 1px 1px;
-      border-radius: .25rem 0 0 .25rem;
-    }
-
-    .token-quoteEnd {
-      border-width: 1px 1px 1px 0;
-      border-radius: 0 .25rem .25rem 0;
-    }
-
-    .token-text {
-      color: #6a6a6a;
-      padding: 0 .25rem;
-    }
-
-
-    ::highlight(ime-solid-thin) {
-      text-decoration: underline 1px;
-    }
-
-    ::highlight(ime-solid-thick) {
-      text-decoration: underline 2px;
-    }
-
-    ::highlight(ime-dotted-thin) {
-      text-decoration: underline dotted 1px;
-    }
-
-    ::highlight(ime-dotted-thick) {
-      text-decoration: underline dotted 2px;
-    }
-
-    ::highlight(ime-dashed-thin) {
-      text-decoration: underline dashed 1px;
-    }
-
-    ::highlight(ime-dashed-thick) {
-      text-decoration: underline dashed 2px;
-    }
-
-    ::highlight(ime-wavy-thin) {
-      text-decoration: underline wavy 1px;
-    }
-
-    ::highlight(ime-wavy-thick) {
-      text-decoration: underline wavy 2px;
-    }
-
-    ::highlight(ime-squiggle-thin) {
-      text-decoration: underline wavy 1px;
-    }
-
-    ::highlight(ime-squiggle-thick) {
-      text-decoration: underline wavy 2px;
-    }
-
-    .controls label {
-      display: flex;
-      align-items: center;
-    }
-
-    .debug .debug-overlay {
-      position: absolute;
-      background: rgba(255, 0, 0, .2);
-      border: 1px solid red;
-    }
-  </style>
+  <!-- The demo CSS styles -->
+  <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
-
   <!-- The editor element -->
   <div id="html-editor" spellcheck="false"></div>
 
-  <!-- Some debug controls -->
-  <div class="controls">
-    <label><input type="checkbox" id="debug">Debug</label>
-  </div>
-
-  <script type="module">
-    import { tokenizeHTML } from "./tokenizer.js";
-
-    const IS_EDIT_CONTEXT_SUPPORTED = 'EditContext' in window;
-    const IS_CUSTOM_HIGHLIGHT_SUPPORTED = 'Highlight' in window;
-
-    // The editor element.
-    const editorEl = document.getElementById("html-editor");
-
-    // The current tokens from the html text.
-    let currentTokens = [];
-
-    let isDebug = false;
-    const debugCheckbox = document.querySelector(".controls #debug");
-    debugCheckbox.addEventListener("change", e => {
-      editorEl.classList.toggle("debug", e.target.checked);
-      isDebug = e.target.checked;
-      render();
-    });
-
-    // Instances of CSS custom Highlight objects, used to render
-    // the IME composition text formats.
-    const imeHighlights = {
-      "solid-thin": null,
-      "solid-thick": null,
-      "dotted-thin": null,
-      "dotted-thick": null,
-      "dashed-thin": null,
-      "dashed-thick": null,
-      "wavy-thin": null,
-      "wavy-thick": null,
-      "squiggle-thin": null,
-      "squiggle-thick": null
-    };
-    if (IS_CUSTOM_HIGHLIGHT_SUPPORTED) {
-      for (const [key, value] of Object.entries(imeHighlights)) {
-        imeHighlights[key] = new Highlight();
-        CSS.highlights.set(`ime-${key}`, imeHighlights[key]);
-      }
-    } else {
-      console.warn("Custom highlights are not supported in this browser. IME formats will not be rendered.");
-    }
-
-    (function () {
-      if (!IS_EDIT_CONTEXT_SUPPORTED) {
-        editorEl.textContent = "Sorry, your browser doesn't support the EditContext API. This demo will not work.";
-        return;
-      }
-
-      // Instantiate the EditContext object.
-      const editContext = new EditContext({
-        text: "<html>\n  <body id=foo>\n    <h1 id='header'>Cool Title</h1>\n    <p class=\"wow\">hello<br/>How are you? test</p>\n  </body>\n</html>"
-      });
-
-      // Attach the EditContext object to the editor element.
-      // This makes the element focusable and able to receive text input.
-      editorEl.editContext = editContext;
-
-      // Update the control bounds (i.e. where the editor is on the screen)
-      // now, and when the window is resized.
-      // This helps the OS position the IME composition window correctly.
-      function updateControlBounds() {
-        const editorBounds = editorEl.getBoundingClientRect();
-        editContext.updateControlBounds(editorBounds);
-      }
-      updateControlBounds();
-      window.addEventListener("resize", updateControlBounds);
-
-      // Update the selection and selection bounds in the EditContext object.
-      // This helps the OS position the IME composition window correctly.
-      function updateSelection(start, end) {
-        editContext.updateSelection(start, end);
-        // Get the bounds of the selection.
-        editContext.updateSelectionBounds(document.getSelection().getRangeAt(0).getBoundingClientRect());
-      }
-
-      // The render function is used to update the view of the editor.
-      // The EditContext object is our "model", and the editorEl is our "view".
-      // The render function's job is to update the view when the model changes.
-      function render(text = editContext.text, selectionStart = editContext.selectionStart, selectionEnd = editContext.selectionEnd) {
-        // Empty the editor. We're re-rendering everything.
-        editorEl.innerHTML = "";
-
-        // Tokenize the text.
-        currentTokens = tokenizeHTML(text);
-
-        // Render each token.
-        for (const token of currentTokens) {
-          const span = document.createElement("span");
-          span.classList.add(`token-${token.type}`);
-          span.textContent = token.value;
-          span.dataset.tokenPos = token.pos;
-          editorEl.appendChild(span);
-
-          // Store the node in the token so we can find it later.
-          token.node = span;
-        }
-
-        // Move the selection to the correct location.
-        // It was lost when we updated the DOM.
-        // The EditContext API gives us the selection as text offsets.
-        // Convert it into a DOM selection.
-        const { anchorNode, anchorOffset, extentNode, extentOffset } = convertFromOffsetsToSelection(selectionStart, selectionEnd);
-        document.getSelection().setBaseAndExtent(anchorNode, anchorOffset, extentNode, extentOffset);
-
-        // Render the character bounds in debug mode.
-        if (isDebug) {
-          const bounds = editContext.characterBounds();
-          for (const bound of bounds) {
-            const overlay = document.createElement("div");
-            overlay.classList.add("debug-overlay");
-            overlay.style.top = `${bound.top}px`;
-            overlay.style.left = `${bound.left}px`;
-            overlay.style.width = `${bound.width}px`;
-            overlay.style.height = `${bound.height}px`;
-            editorEl.appendChild(overlay);
-          }
-        }
-      }
-
-      // Listen to the EditContext's textupdate event.
-      // This tells us when text input happens. We use it to re-render the view.
-      editContext.addEventListener("textupdate", e => {
-        render(editContext.text, e.selectionStart, e.selectionEnd);
-      });
-
-      // Visually show when we're composing text, like when using an IME,
-      // or voice dictation.
-      editContext.addEventListener("compositionstart", e => {
-        editorEl.classList.add("is-composing");
-      });
-      editContext.addEventListener("compositionend", e => {
-        editorEl.classList.remove("is-composing");
-      });
-
-      // Update the character bounds when the EditContext needs it.
-      editContext.addEventListener("characterboundsupdate", e => {
-        const tokenNodes = convertFromOffsetsToListOfRenderedTokenNodes(e.rangeStart, e.rangeEnd);
-
-        const charBounds = tokenNodes.map(({ node, nodeOffset, charOffset }) => {
-          const range = document.createRange();
-          range.setStart(node.firstChild, charOffset - nodeOffset);
-          range.setEnd(node.firstChild, charOffset - nodeOffset + 1);
-          return range.getBoundingClientRect();
-        });
-
-        editContext.updateCharacterBounds(e.rangeStart, charBounds);
-      });
-
-      // Draw IME composition text formats if needed.
-      editContext.addEventListener("textformatupdate", e => {
-        const formats = e.getTextFormats();
-
-        for (const format of formats) {
-          const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
-
-          // Find the nodes in the view that are in the range.
-          const { anchorNode, anchorOffset, extentNode, extentOffset } = convertFromOffsetsToSelection(rangeStart, rangeEnd);
-          const highlight = imeHighlights[`${format.underlineStyle.toLowerCase()}-${format.underlineThickness.toLowerCase()}`];
-          if (highlight) {
-            const range = document.createRange();
-            range.setStart(anchorNode, anchorOffset);
-            range.setEnd(extentNode, extentOffset);
-            highlight.add(range);
-          }
-        }
-      });
-
-      // Handle key presses that are not already handled by the EditContext.
-      editorEl.addEventListener("keydown", e => {
-        const start = Math.min(editContext.selectionStart, editContext.selectionEnd);
-        const end = Math.max(editContext.selectionStart, editContext.selectionEnd);
-
-        if (e.key === "Tab") {
-          e.preventDefault();
-          editContext.updateText(start, end, "\t");
-          updateSelection(start + 1, start + 1);
-          render();
-        } else if (e.key === "Enter") {
-          editContext.updateText(start, end, "\n");
-          updateSelection(start + 1, start + 1);
-          render();
-        }
-      });
-
-      // Listen to selectionchange events to let the EditContext know where it is.
-      document.addEventListener("selectionchange", () => {
-        const selection = document.getSelection();
-        const offsets = convertFromSelectionToOffsets(selection);
-        if (offsets) {
-          updateSelection(offsets.start, offsets.end);
-        }
-      });
-
-      // Find the tokens in currentTokens that are in the given range and return
-      // the corresponding nodes.
-      function convertFromOffsetsToListOfRenderedTokenNodes(start, end) {
-        const tokenNodes = [];
-
-        for (let offset = start; offset < end; offset++) {
-          const token = currentTokens.find(token => token.pos <= offset && token.pos + token.value.length > offset);
-          if (token) {
-            tokenNodes.push({ node: token.node, nodeOffset: token.pos, charOffset: offset });
-          }
-        }
-
-        return tokenNodes;
-      }
-
-      // The EditContext object only knows about a plain text string and about
-      // character offsets. However, our editor view renders the text by using
-      // DOM nodes. So we sometimes need to convert between the two.
-      // The two utility functions below convert between selection objects and
-      // text offsets.
-      function convertFromSelectionToOffsets(selection) {
-        const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
-
-        let anchorNodeFound = false;
-        let extentNodeFound = false;
-        let anchorOffset = 0;
-        let extentOffset = 0;
-
-        while (treeWalker.nextNode()) {
-          const node = treeWalker.currentNode;
-          if (node === selection.anchorNode) {
-            anchorNodeFound = true;
-            anchorOffset += selection.anchorOffset;
-          }
-
-          if (node === selection.extentNode) {
-            extentNodeFound = true;
-            extentOffset += selection.extentOffset;
-          }
-
-          if (!anchorNodeFound) {
-            anchorOffset += node.textContent.length;
-          }
-          if (!extentNodeFound) {
-            extentOffset += node.textContent.length;
-          }
-        }
-
-        if (!anchorNodeFound || !extentNodeFound) {
-          return null;
-        }
-
-        return { start: anchorOffset, end: extentOffset };
-      }
-
-      function convertFromOffsetsToSelection(start, end) {
-        const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
-
-        let offset = 0;
-        let anchorNode = null;
-        let anchorOffset = 0;
-        let extentNode = null;
-        let extentOffset = 0;
-
-        while (treeWalker.nextNode()) {
-          const node = treeWalker.currentNode;
-
-          if (!anchorNode && offset + node.textContent.length >= start) {
-            anchorNode = node;
-            anchorOffset = start - offset;
-          }
-
-          if (!extentNode && offset + node.textContent.length >= end) {
-            extentNode = node;
-            extentOffset = end - offset;
-          }
-
-          if (anchorNode && extentNode) {
-            break;
-          }
-
-          offset += node.textContent.length;
-        }
-
-        return { anchorNode, anchorOffset, extentNode, extentOffset };
-      }
-
-      // Render the initial view.
-      render();
-      setInterval(render, 1000);
-    })();
-  </script>
+  <!-- The demo JavaScript code -->
+  <script type="module" src="editor.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/edit-context/html-editor/styles.css b/edit-context/html-editor/styles.css
new file mode 100644
index 00000000..b37ac938
--- /dev/null
+++ b/edit-context/html-editor/styles.css
@@ -0,0 +1,126 @@
+html,
+body {
+  font-size: 0.9rem;
+  font-family: consolas, monospace;
+  margin: 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  padding: 1rem;
+}
+
+#html-editor {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow: auto;
+  white-space: pre;
+  tab-size: 2;
+  caret-color: red;
+  background: #000;
+  line-height: 1.6;
+  color: red;
+}
+
+#html-editor::selection {
+  color: white;
+  background: red;
+}
+
+#html-editor.is-composing {
+  box-shadow: 0 0 0 0.25rem red;
+}
+
+.token-openTagStart,
+.token-openTagEnd,
+.token-closeTagStart,
+.token-closeTagEnd,
+.token-selfClose {
+  background: rgb(7 53 92);
+  margin: 0 2px;
+  color: white;
+  border-radius: 0.25rem;
+}
+
+.token-equal {
+  color: white;
+}
+
+.token-tagName {
+  font-weight: bold;
+  color: rgb(117, 186, 242);
+}
+
+.token-attributeName {
+  color: rgb(207, 81, 198);
+}
+
+.token-attributeValue {
+  font-style: italic;
+  color: rgb(127 230 127);
+  border: 1px dashed #8c8c8c;
+  border-width: 1px 0 1px 0;
+}
+
+.token-quoteStart,
+.token-quoteEnd {
+  font-weight: bold;
+  color: rgb(127 230 127);
+  border: 1px solid #8c8c8c;
+  border-width: 1px 0 1px 1px;
+  border-radius: 0.25rem 0 0 0.25rem;
+}
+
+.token-quoteEnd {
+  border-width: 1px 1px 1px 0;
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.token-text {
+  color: #6a6a6a;
+  padding: 0 0.25rem;
+}
+
+::highlight(ime-solid-thin) {
+  text-decoration: underline 1px;
+}
+
+::highlight(ime-solid-thick) {
+  text-decoration: underline 2px;
+}
+
+::highlight(ime-dotted-thin) {
+  text-decoration: underline dotted 1px;
+}
+
+::highlight(ime-dotted-thick) {
+  text-decoration: underline dotted 2px;
+}
+
+::highlight(ime-dashed-thin) {
+  text-decoration: underline dashed 1px;
+}
+
+::highlight(ime-dashed-thick) {
+  text-decoration: underline dashed 2px;
+}
+
+::highlight(ime-wavy-thin) {
+  text-decoration: underline wavy 1px;
+}
+
+::highlight(ime-wavy-thick) {
+  text-decoration: underline wavy 2px;
+}
+
+::highlight(ime-squiggle-thin) {
+  text-decoration: underline wavy 1px;
+}
+
+::highlight(ime-squiggle-thick) {
+  text-decoration: underline wavy 2px;
+}

From 6d7115ef281a5576d5cc53532380e845eb1adc07 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Fri, 22 Mar 2024 17:07:11 +0100
Subject: [PATCH 16/21] fix(html): Make script elements children of head or
 body elements (#268)

* fix(html): Make script elements children of head or body elements

* Apply suggestions from code review

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

* fix(html): Remove .htmlvalidate.json config

---------

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>
---
 abort-api/index.html                          |   4 +-
 audiocontext-setsinkid/index.html             |  32 +-
 drag-and-drop/DnD-support.html                | 313 ++++++++-------
 fetch/basic-fetch/index.html                  |  41 +-
 fetch/fetch-array-buffer/index.html           |  95 ++---
 fetch/fetch-json/index.html                   |  69 ++--
 fetch/fetch-request-with-init/index.html      |  63 +--
 fetch/fetch-request/index.html                |  43 +-
 fetch/fetch-response-clone/index.html         |  55 +--
 fetch/fetch-response/index.html               |  63 +--
 fetch/fetch-text/index.html                   |  59 +--
 fetch/fetch-with-init-then-request/index.html |   3 +-
 fetch/object-fit-gallery-fetch/index.html     |   3 +-
 indexeddb-examples/idbcursor/index.html       |   4 +-
 indexeddb-examples/idbindex/index.html        |   6 +-
 indexeddb-examples/idbkeyrange/index.html     |   3 +-
 insert-adjacent/insertAdjacentElement.html    | 195 ++++-----
 insert-adjacent/insertAdjacentText.html       | 110 +++--
 matchmedia/index.html                         | 117 +++---
 mediaquerylist/index.html                     | 118 +++---
 pointerevents/Multi-touch_interaction.html    | 346 ++++++++--------
 pointerevents/Pinch_zoom_gestures.html        | 297 +++++++-------
 touchevents/Multi-touch_interaction.html      | 378 +++++++++---------
 web-crypto/derive-bits/index.html             |   3 +-
 web-crypto/derive-key/index.html              |   3 +-
 web-crypto/encrypt-decrypt/index.html         | 125 ++++--
 web-crypto/export-key/index.html              |   3 +-
 web-crypto/import-key/index.html              | 119 ++++--
 web-crypto/sign-verify/index.html             |  26 +-
 web-crypto/unwrap-key/index.html              |   3 +-
 web-crypto/wrap-key/index.html                |   3 +-
 web-storage/event.html                        |  34 +-
 web-storage/index.html                        |  81 ++--
 33 files changed, 1498 insertions(+), 1319 deletions(-)

diff --git a/abort-api/index.html b/abort-api/index.html
index fcbde298..42bb80d0 100644
--- a/abort-api/index.html
+++ b/abort-api/index.html
@@ -36,7 +36,7 @@ <h1>Simple offline video player</h1>
       <p>Sintel © copyright Blender Foundation | <a href="http://www.sintel.org/">www.sintel.org</a>.</p>
     </div>
   </div>
-</body>
+
 <script>
   const url = 'sintel.mp4';
 
@@ -104,5 +104,5 @@ <h1>Simple offline video player</h1>
   }
 
 </script>
-
+</body>
 </html>
diff --git a/audiocontext-setsinkid/index.html b/audiocontext-setsinkid/index.html
index 9ab6e04b..ebc4817a 100644
--- a/audiocontext-setsinkid/index.html
+++ b/audiocontext-setsinkid/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
@@ -14,27 +13,22 @@
     <script src="app.js" defer></script>
   </head>
   <body>
-    <h1>
-      SetSinkId test example
-    </h1>
-    
-    <button class="media-devices">
-      Get media devices
-    </button>
-    
-    <div class="select-container">
-      
-    </div>
-    
-    <button class="play">
-      Play audio
-    </button>
-    
+    <h1>SetSinkId test example</h1>
+
+    <button class="media-devices">Get media devices</button>
+
+    <div class="select-container"></div>
+
+    <button class="play">Play audio</button>
+
     <footer>
       <p>
-        Check out the <a href="https://github.com/mdn/dom-examples/tree/main/audiocontext-setsinkid">source code</a>.
+        Check out the
+        <a
+          href="https://github.com/mdn/dom-examples/tree/main/audiocontext-setsinkid"
+          >source code</a
+        >.
       </p>
     </footer>
-    
   </body>
 </html>
diff --git a/drag-and-drop/DnD-support.html b/drag-and-drop/DnD-support.html
index e4165416..c0db00d8 100644
--- a/drag-and-drop/DnD-support.html
+++ b/drag-and-drop/DnD-support.html
@@ -1,152 +1,177 @@
 <!DOCTYPE html>
-<html lang=en>
-<title>Feature tests for DnD interfaces</title>
-<meta name="viewport" content="width=device-width">
-<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  #source {
-    color: blue;
-    border: 1px solid black;
-  }
-  #target {
-    border: 1px solid black;
-  }
-</style>
-<script>
-function check_DragEvents() {
-  // Check for support of the Drag event types
-  var events = ["ondrag",
-    "ondragstart",
-    "ondragend",
-    "ondragover",
-    "ondragenter",
-    "ondragleave",
-    "ondragexit",
-    "ondrop"];
+<html lang="en">
+  <head>
+    <title>Feature tests for DnD interfaces</title>
+    <meta name="viewport" content="width=device-width" />
+    <style>
+      div {
+        margin: 0em;
+        padding: 2em;
+      }
+      #source {
+        color: blue;
+        border: 1px solid black;
+      }
+      #target {
+        border: 1px solid black;
+      }
+    </style>
+    <script>
+      function check_DragEvents() {
+        // Check for support of the Drag event types
+        var events = [
+          "ondrag",
+          "ondragstart",
+          "ondragend",
+          "ondragover",
+          "ondragenter",
+          "ondragleave",
+          "ondragexit",
+          "ondrop",
+        ];
 
-  console.log("Drag Event Types...");
-  
-  for (var i=0; i < events.length; i++) {
-    var supported = events[i] in window;
-    console.log("... " + events[i] + " = " + (supported ? "Yes" : "No"));
-  }
-}
-function check_DataTransfer(dt) {
-  // Check the DataTransfer object's methods and properties
-  var properties = ["dropEffect",
-    "effectAllowed",
-    "types",
-    "files",
-    "items"];
-  var methods = ["setDragImage",
-    "getData",
-    "setData",
-    "clearData"];
+        console.log("Drag Event Types...");
 
-  console.log("DataTransfer ... " + dt);
-  
-  for (var i=0; i < properties.length; i++) {
-    var supported = properties[i] in dt;
-    console.log("... dataTransfer." + properties[i] + " = " + (supported ? "Yes" : "No"));
-  }
-  for (var i=0; i < methods.length; i++) {
-    var supported = typeof dt[methods[i]] == "function";
-    console.log("... dataTransfer." + methods[i] + "() = " + (supported ? "Yes" : "No"));
-  }
-}
-function check_DataTransferItem(dti) {
-  // Check the DataTransferItem object's methods and properties
-  var properties = ["kind",
-    "type"];
-  var methods = ["getAsFile",
-    "getAsString"];
+        for (var i = 0; i < events.length; i++) {
+          var supported = events[i] in window;
+          console.log("... " + events[i] + " = " + (supported ? "Yes" : "No"));
+        }
+      }
+      function check_DataTransfer(dt) {
+        // Check the DataTransfer object's methods and properties
+        var properties = [
+          "dropEffect",
+          "effectAllowed",
+          "types",
+          "files",
+          "items",
+        ];
+        var methods = ["setDragImage", "getData", "setData", "clearData"];
 
-  console.log("DataTransferItem ... " + dti);
+        console.log("DataTransfer ... " + dt);
 
-  for (var i=0; i < properties.length; i++) {
-    if (dti === undefined) {
-      console.log("... items." + properties[i] + " = undefined");
-    } else {
-      var supported = properties[i] in dti;
-      console.log("... items." + properties[i] + " = " + (supported ? "Yes" : "No"));
-    }
-  }
-  for (var i=0; i < methods.length; i++) {
-    if (dti === undefined) {
-      console.log("... items." + methods[i] + "() = undefined");
-    } else {
-      var supported = typeof dti[methods[i]] == "function";
-      console.log("... items." + methods[i] + "() = " + (supported ? "Yes" : "No"));
-    }
-  }
-}
-function check_DataTransferItemList(dtil) {
-  // Check the DataTransferItemList object's methods and properties
-  var properties = ["length"];
-  var methods = ["add",
-    "remove",
-    "clear"];
+        for (var i = 0; i < properties.length; i++) {
+          var supported = properties[i] in dt;
+          console.log(
+            "... dataTransfer." +
+              properties[i] +
+              " = " +
+              (supported ? "Yes" : "No")
+          );
+        }
+        for (var i = 0; i < methods.length; i++) {
+          var supported = typeof dt[methods[i]] == "function";
+          console.log(
+            "... dataTransfer." +
+              methods[i] +
+              "() = " +
+              (supported ? "Yes" : "No")
+          );
+        }
+      }
+      function check_DataTransferItem(dti) {
+        // Check the DataTransferItem object's methods and properties
+        var properties = ["kind", "type"];
+        var methods = ["getAsFile", "getAsString"];
 
-  console.log("DataTransferItemList ... " + dtil);
+        console.log("DataTransferItem ... " + dti);
 
-  for (var i=0; i < properties.length; i++) {
-    if (dtil === undefined) {
-      console.log("... items." + properties[i] + " = undefined");
-    } else {
-      var supported = properties[i] in dtil;
-      console.log("... items." + properties[i] + " = " + (supported ? "Yes" : "No"));
-    }
-  }
-  for (var i=0; i < methods.length; i++) {
-    if (dtil === undefined) {
-      console.log("... items." + methods[i] + "() = undefined");
-    } else {
-      var supported = typeof dtil[methods[i]] == "function";
-      console.log("... items." + methods[i] + "() = " + (supported ? "Yes" : "No"));
-    }
-  }
-}
-function dragstart_handler(ev) {
-  ev.dataTransfer.dropEffect = "move";
-  check_DragEvents();
-  var dt = ev.dataTransfer;
-  if (dt === undefined) {
-    console.log("DataTransfer is NOT supported."); 
-  } else {
-    // Make sure there is at least one item
-    dt.setData("text/plain", "Move this.");
-    check_DataTransfer(dt);
-  }
-}
-function dragover_handler(ev) {
-  ev.dataTransfer.dropEffect = "move";
-  ev.preventDefault();
-}
-function drop_handler(ev) {
-  if (ev.dataTransfer === undefined) {
-    console.log("DataTransferItem NOT supported."); 
-    console.log("DataTransferItemList NOT supported."); 
-  } else {
-    var dti = ev.dataTransfer.items;
-    if (dti === undefined) {
-      console.log("DataTransferItem NOT supported."); 
-      console.log("DataTransferItemList NOT supported."); 
-    } else {
-      check_DataTransferItem(dti[0]);
-      check_DataTransferItemList(dti);
-    }
-  }
-}
-</script>
-<body>
-<h1>Log support of DnD objects' methods and properties</h1>
- <div>
-   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
-     Select this element, drag it to the Drop Zone and then release the mouse. The console log will contain data about the DnD interfaces supported.</p>
- </div>
- <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
-</body>
+        for (var i = 0; i < properties.length; i++) {
+          if (dti === undefined) {
+            console.log("... items." + properties[i] + " = undefined");
+          } else {
+            var supported = properties[i] in dti;
+            console.log(
+              "... items." + properties[i] + " = " + (supported ? "Yes" : "No")
+            );
+          }
+        }
+        for (var i = 0; i < methods.length; i++) {
+          if (dti === undefined) {
+            console.log("... items." + methods[i] + "() = undefined");
+          } else {
+            var supported = typeof dti[methods[i]] == "function";
+            console.log(
+              "... items." + methods[i] + "() = " + (supported ? "Yes" : "No")
+            );
+          }
+        }
+      }
+      function check_DataTransferItemList(dtil) {
+        // Check the DataTransferItemList object's methods and properties
+        var properties = ["length"];
+        var methods = ["add", "remove", "clear"];
+
+        console.log("DataTransferItemList ... " + dtil);
+
+        for (var i = 0; i < properties.length; i++) {
+          if (dtil === undefined) {
+            console.log("... items." + properties[i] + " = undefined");
+          } else {
+            var supported = properties[i] in dtil;
+            console.log(
+              "... items." + properties[i] + " = " + (supported ? "Yes" : "No")
+            );
+          }
+        }
+        for (var i = 0; i < methods.length; i++) {
+          if (dtil === undefined) {
+            console.log("... items." + methods[i] + "() = undefined");
+          } else {
+            var supported = typeof dtil[methods[i]] == "function";
+            console.log(
+              "... items." + methods[i] + "() = " + (supported ? "Yes" : "No")
+            );
+          }
+        }
+      }
+      function dragstart_handler(ev) {
+        ev.dataTransfer.dropEffect = "move";
+        check_DragEvents();
+        var dt = ev.dataTransfer;
+        if (dt === undefined) {
+          console.log("DataTransfer is NOT supported.");
+        } else {
+          // Make sure there is at least one item
+          dt.setData("text/plain", "Move this.");
+          check_DataTransfer(dt);
+        }
+      }
+      function dragover_handler(ev) {
+        ev.dataTransfer.dropEffect = "move";
+        ev.preventDefault();
+      }
+      function drop_handler(ev) {
+        if (ev.dataTransfer === undefined) {
+          console.log("DataTransferItem NOT supported.");
+          console.log("DataTransferItemList NOT supported.");
+        } else {
+          var dti = ev.dataTransfer.items;
+          if (dti === undefined) {
+            console.log("DataTransferItem NOT supported.");
+            console.log("DataTransferItemList NOT supported.");
+          } else {
+            check_DataTransferItem(dti[0]);
+            check_DataTransferItemList(dti);
+          }
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <h1>Log support of DnD objects' methods and properties</h1>
+    <div>
+      <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+        Select this element, drag it to the Drop Zone and then release the
+        mouse. The console log will contain data about the DnD interfaces
+        supported.
+      </p>
+    </div>
+    <div
+      id="target"
+      ondrop="drop_handler(event);"
+      ondragover="dragover_handler(event);">
+      Drop Zone
+    </div>
+  </body>
 </html>
diff --git a/fetch/basic-fetch/index.html b/fetch/basic-fetch/index.html
index 034973a1..ac630920 100644
--- a/fetch/basic-fetch/index.html
+++ b/fetch/basic-fetch/index.html
@@ -14,25 +14,26 @@
     <h1>Fetch basic example</h1>
 
     <img src="" class="my-image" />
-  </body>
-  <script>
-    const myImage = document.querySelector(".my-image");
 
-    fetch("flowers.jpg")
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error, status = ${response.status}`);
-        }
-        return response.blob();
-      })
-      .then((myBlob) => {
-        const objectURL = URL.createObjectURL(myBlob);
-        myImage.src = objectURL;
-      })
-      .catch((error) => {
-        const p = document.createElement("p");
-        p.appendChild(document.createTextNode(`Error: ${error.message}`));
-        document.body.insertBefore(p, myImage);
-      });
-  </script>
+    <script>
+      const myImage = document.querySelector(".my-image");
+
+      fetch("flowers.jpg")
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error, status = ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then((myBlob) => {
+          const objectURL = URL.createObjectURL(myBlob);
+          myImage.src = objectURL;
+        })
+        .catch((error) => {
+          const p = document.createElement("p");
+          p.appendChild(document.createTextNode(`Error: ${error.message}`));
+          document.body.insertBefore(p, myImage);
+        });
+    </script>
+  </body>
 </html>
diff --git a/fetch/fetch-array-buffer/index.html b/fetch/fetch-array-buffer/index.html
index 6403df07..34663179 100644
--- a/fetch/fetch-array-buffer/index.html
+++ b/fetch/fetch-array-buffer/index.html
@@ -18,55 +18,58 @@ <h1>Fetch arrayBuffer example</h1>
     <span class="error"></span>
 
     <pre></pre>
-  </body>
-  <script>
-    const pre = document.querySelector("pre");
-    const myScript = document.querySelector("script");
-    const play = document.querySelector(".play");
-    const stop = document.querySelector(".stop");
-    const errorDisplay = document.querySelector(".error");
 
-    // use fetch to load an audio track, and
-    // decodeAudioData to decode it and stick it in a buffer.
-    // Then we put the buffer into the source
-    function getData() {
-      const audioCtx = new AudioContext();
+    <script>
+      const pre = document.querySelector("pre");
+      const myScript = document.querySelector("script");
+      const play = document.querySelector(".play");
+      const stop = document.querySelector(".stop");
+      const errorDisplay = document.querySelector(".error");
+
+      // use fetch to load an audio track, and
+      // decodeAudioData to decode it and stick it in a buffer.
+      // Then we put the buffer into the source
+      function getData() {
+        const audioCtx = new AudioContext();
 
-      return fetch("viper.ogg")
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error(`HTTP error, status = ${response.status}`);
-          }
-          return response.arrayBuffer();
-        })
-        .then((buffer) => audioCtx.decodeAudioData(buffer))
-        .then((decodedData) => {
-          const source = new AudioBufferSourceNode(audioCtx);
-          source.buffer = decodedData;
-          source.connect(audioCtx.destination);
-          return source;
-        });
-    }
+        return fetch("viper.ogg")
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error(`HTTP error, status = ${response.status}`);
+            }
+            return response.arrayBuffer();
+          })
+          .then((buffer) => audioCtx.decodeAudioData(buffer))
+          .then((decodedData) => {
+            const source = new AudioBufferSourceNode(audioCtx);
+            source.buffer = decodedData;
+            source.connect(audioCtx.destination);
+            return source;
+          });
+      }
 
-    // wire up buttons to stop and play audio
-    play.onclick = () => {
-      getData()
-        .then((source) => {
-          errorDisplay.innerHTML = "";
-          source.start(0);
-          play.disabled = true;
-        })
-        .catch((error) => {
-          errorDisplay.appendChild(document.createTextNode(`Error: ${error.message}`));
-        });
-    };
+      // wire up buttons to stop and play audio
+      play.onclick = () => {
+        getData()
+          .then((source) => {
+            errorDisplay.innerHTML = "";
+            source.start(0);
+            play.disabled = true;
+          })
+          .catch((error) => {
+            errorDisplay.appendChild(
+              document.createTextNode(`Error: ${error.message}`)
+            );
+          });
+      };
 
-    stop.onclick = () => {
-      source.stop(0);
-      play.disabled = false;
-    };
+      stop.onclick = () => {
+        source.stop(0);
+        play.disabled = false;
+      };
 
-    // dump script to pre element
-    pre.innerHTML = myScript.innerHTML;
-  </script>
+      // dump script to pre element
+      pre.innerHTML = myScript.innerHTML;
+    </script>
+  </body>
 </html>
diff --git a/fetch/fetch-json/index.html b/fetch/fetch-json/index.html
index 801d9df0..87cc1371 100644
--- a/fetch/fetch-json/index.html
+++ b/fetch/fetch-json/index.html
@@ -13,39 +13,40 @@
   <body>
     <h1>Fetch json example</h1>
     <ul></ul>
+
+    <script>
+      const myList = document.querySelector("ul");
+
+      fetch("products.json")
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error, status = ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((data) => {
+          for (const product of data.products) {
+            const listItem = document.createElement("li");
+
+            const nameElement = document.createElement("strong");
+            nameElement.textContent = product.Name;
+
+            const priceElement = document.createElement("strong");
+            priceElement.textContent = `£${product.Price}`;
+
+            listItem.append(
+              nameElement,
+              ` can be found in ${product.Location}. Cost: `,
+              priceElement
+            );
+            myList.appendChild(listItem);
+          }
+        })
+        .catch((error) => {
+          const p = document.createElement("p");
+          p.appendChild(document.createTextNode(`Error: ${error.message}`));
+          document.body.insertBefore(p, myList);
+        });
+    </script>
   </body>
-  <script>
-    const myList = document.querySelector("ul");
-
-    fetch("products.json")
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error, status = ${response.status}`);
-        }
-        return response.json();
-      })
-      .then((data) => {
-        for (const product of data.products) {
-          const listItem = document.createElement("li");
-          
-          const nameElement = document.createElement("strong");
-          nameElement.textContent = product.Name;
-          
-          const priceElement = document.createElement("strong");
-          priceElement.textContent = `£${product.Price}`;
-
-          listItem.append(
-            nameElement,
-            ` can be found in ${product.Location}. Cost: `,
-            priceElement,
-          );
-          myList.appendChild(listItem);
-        }
-      })
-      .catch((error) => {
-        const p = document.createElement("p");
-        p.appendChild(document.createTextNode(`Error: ${error.message}`));
-        document.body.insertBefore(p, myList);
-      });
-  </script>
 </html>
diff --git a/fetch/fetch-request-with-init/index.html b/fetch/fetch-request-with-init/index.html
index fc03bf82..3074db60 100644
--- a/fetch/fetch-request-with-init/index.html
+++ b/fetch/fetch-request-with-init/index.html
@@ -13,36 +13,37 @@
   <body>
     <h1>Fetch Request with init example</h1>
     <img src="" />
+
+    <script>
+      const myImage = document.querySelector("img");
+
+      const myHeaders = new Headers();
+
+      const myOptions = {
+        method: "GET",
+        headers: myHeaders,
+        mode: "cors",
+        cache: "default",
+      };
+
+      const myRequest = new Request("flowers.jpg", myOptions);
+
+      fetch(myRequest)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error, status = ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then((blob) => {
+          const objectURL = URL.createObjectURL(blob);
+          myImage.src = objectURL;
+        })
+        .catch((error) => {
+          const p = document.createElement("p");
+          p.appendChild(document.createTextNode(`Error: ${error.message}`));
+          document.body.insertBefore(p, myImage);
+        });
+    </script>
   </body>
-  <script>
-    const myImage = document.querySelector("img");
-
-    const myHeaders = new Headers();
-
-    const myOptions = {
-      method: "GET",
-      headers: myHeaders,
-      mode: "cors",
-      cache: "default",
-    };
-
-    const myRequest = new Request("flowers.jpg", myOptions);
-
-    fetch(myRequest)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error, status = ${response.status}`);
-        }
-        return response.blob();
-      })
-      .then((blob) => {
-        const objectURL = URL.createObjectURL(blob);
-        myImage.src = objectURL;
-      })
-      .catch((error) => {
-        const p = document.createElement("p");
-        p.appendChild(document.createTextNode(`Error: ${error.message}`));
-        document.body.insertBefore(p, myImage);
-      });
-  </script>
 </html>
diff --git a/fetch/fetch-request/index.html b/fetch/fetch-request/index.html
index ab63d5db..40b62f3b 100644
--- a/fetch/fetch-request/index.html
+++ b/fetch/fetch-request/index.html
@@ -11,26 +11,27 @@
   <body>
     <h1>Fetch Request example</h1>
     <img src="" />
-  </body>
-  <script>
-    const myImage = document.querySelector("img");
-    const myRequest = new Request("flowers.jpg");
 
-    fetch(myRequest)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error, status = ${response.status}`);
-        }
-        return response.blob();
-      })
-      .then((myBlob) => {
-        const objectURL = URL.createObjectURL(myBlob);
-        myImage.src = objectURL;
-      })
-      .catch((error) => {
-        const p = document.createElement("p");
-        p.appendChild(document.createTextNode(`Error: ${error.message}`));
-        document.body.insertBefore(p, myImage);
-      });
-  </script>
+    <script>
+      const myImage = document.querySelector("img");
+      const myRequest = new Request("flowers.jpg");
+
+      fetch(myRequest)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error, status = ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then((myBlob) => {
+          const objectURL = URL.createObjectURL(myBlob);
+          myImage.src = objectURL;
+        })
+        .catch((error) => {
+          const p = document.createElement("p");
+          p.appendChild(document.createTextNode(`Error: ${error.message}`));
+          document.body.insertBefore(p, myImage);
+        });
+    </script>
+  </body>
 </html>
diff --git a/fetch/fetch-response-clone/index.html b/fetch/fetch-response-clone/index.html
index 0d1eeded..fd2ee226 100644
--- a/fetch/fetch-response-clone/index.html
+++ b/fetch/fetch-response-clone/index.html
@@ -21,33 +21,34 @@
     <h1>Fetch response clone example</h1>
     <img src="" class="img1" />
     <img src="" class="img2" />
-  </body>
-  <script>
-    const image1 = document.querySelector(".img1");
-    const image2 = document.querySelector(".img2");
 
-    fetch("flowers.jpg").then((response1) => {
-      if (!response1.ok) {
-        showError(image1, `HTTP error, status = ${response1.status}`);
-      } else {
-        const response2 = response1.clone();
-        useResponse(response1, image1);
-        useResponse(response2, image2);
-      }
-    });
+    <script>
+      const image1 = document.querySelector(".img1");
+      const image2 = document.querySelector(".img2");
+
+      fetch("flowers.jpg").then((response1) => {
+        if (!response1.ok) {
+          showError(image1, `HTTP error, status = ${response1.status}`);
+        } else {
+          const response2 = response1.clone();
+          useResponse(response1, image1);
+          useResponse(response2, image2);
+        }
+      });
 
-    function useResponse(response, image) {
-      response
-        .blob()
-        .then((myBlob) => {
-          const objectURL = URL.createObjectURL(myBlob);
-          image.src = objectURL;
-        })
-        .catch((error) => {
-          const p = document.createElement("p");
-          p.appendChild(document.createTextNode(`Error: ${error}`));
-          document.body.insertBefore(p, image);
-        });
-    }
-  </script>
+      function useResponse(response, image) {
+        response
+          .blob()
+          .then((myBlob) => {
+            const objectURL = URL.createObjectURL(myBlob);
+            image.src = objectURL;
+          })
+          .catch((error) => {
+            const p = document.createElement("p");
+            p.appendChild(document.createTextNode(`Error: ${error}`));
+            document.body.insertBefore(p, image);
+          });
+      }
+    </script>
+  </body>
 </html>
diff --git a/fetch/fetch-response/index.html b/fetch/fetch-response/index.html
index b8ed3615..4a88e281 100644
--- a/fetch/fetch-response/index.html
+++ b/fetch/fetch-response/index.html
@@ -13,38 +13,39 @@
   <body>
     <h1>Fetch basic response example</h1>
     <img src="" />
-  </body>
-  <script>
-    const myImage = document.querySelector("img");
 
-    const myRequest = new Request("flowers.jpg");
+    <script>
+      const myImage = document.querySelector("img");
+
+      const myRequest = new Request("flowers.jpg");
 
-    fetch(myRequest)
-      .then((response) => {
-        console.log('response.type =', response.type);
-        console.log('response.url =', response.url);
-        console.log('response.userFinalURL =', response.useFinalURL);
-        console.log('response.status =', response.status);
-        console.log('response.ok =', response.ok);
-        console.log('response.statusText =', response.statusText);
-        console.log('response.headers =', response.headers);
-        if (!response.ok) {
-          throw new Error(`HTTP error, status = ${response.status}`);
-        }
-        return response.blob();
-      })
-      .then((myBlob) => {
-        const objectURL = URL.createObjectURL(myBlob);
-        myImage.src = objectURL;
-      })
-      .catch((error) => {
-        const p = document.createElement("p");
-        p.appendChild(document.createTextNode(`Error: ${error.message}`));
-        document.body.insertBefore(p, myImage);
-      });
+      fetch(myRequest)
+        .then((response) => {
+          console.log("response.type =", response.type);
+          console.log("response.url =", response.url);
+          console.log("response.userFinalURL =", response.useFinalURL);
+          console.log("response.status =", response.status);
+          console.log("response.ok =", response.ok);
+          console.log("response.statusText =", response.statusText);
+          console.log("response.headers =", response.headers);
+          if (!response.ok) {
+            throw new Error(`HTTP error, status = ${response.status}`);
+          }
+          return response.blob();
+        })
+        .then((myBlob) => {
+          const objectURL = URL.createObjectURL(myBlob);
+          myImage.src = objectURL;
+        })
+        .catch((error) => {
+          const p = document.createElement("p");
+          p.appendChild(document.createTextNode(`Error: ${error.message}`));
+          document.body.insertBefore(p, myImage);
+        });
 
-    const myBlob = new Blob();
-    const options = { status: 200, statusText: "SuperSmashingGreat!" };
-    const myResponse = new Response(myBlob, options);
-  </script>
+      const myBlob = new Blob();
+      const options = { status: 200, statusText: "SuperSmashingGreat!" };
+      const myResponse = new Response(myBlob, options);
+    </script>
+  </body>
 </html>
diff --git a/fetch/fetch-text/index.html b/fetch/fetch-text/index.html
index df062045..82868c05 100644
--- a/fetch/fetch-text/index.html
+++ b/fetch/fetch-text/index.html
@@ -18,35 +18,36 @@ <h1>Fetch text example</h1>
       <li><a data-page="page3">Page 3</a></li>
     </ul>
     <article></article>
-  </body>
-  <script>
-    const myArticle = document.querySelector("article");
-    const myLinks = document.querySelectorAll("ul a");
-    for (const link of myLinks) {
-      link.onclick = (e) => {
-        e.preventDefault();
-        const linkData = e.target.getAttribute("data-page");
-        getData(linkData);
-      };
-    }
 
-    function getData(pageId) {
-      console.log(pageId);
-      const myRequest = new Request(`${pageId}.txt`);
+    <script>
+      const myArticle = document.querySelector("article");
+      const myLinks = document.querySelectorAll("ul a");
+      for (const link of myLinks) {
+        link.onclick = (e) => {
+          e.preventDefault();
+          const linkData = e.target.getAttribute("data-page");
+          getData(linkData);
+        };
+      }
+
+      function getData(pageId) {
+        console.log(pageId);
+        const myRequest = new Request(`${pageId}.txt`);
 
-      fetch(myRequest)
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error(`HTTP error, status = ${response.status}`);
-          }
-          return response.text();
-        })
-        .then((text) => {
-          myArticle.innerText = text;
-        })
-        .catch((error) => {
-          myArticle.innerText = `Error: ${error.message}`;
-        });
-    }
-  </script>
+        fetch(myRequest)
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error(`HTTP error, status = ${response.status}`);
+            }
+            return response.text();
+          })
+          .then((text) => {
+            myArticle.innerText = text;
+          })
+          .catch((error) => {
+            myArticle.innerText = `Error: ${error.message}`;
+          });
+      }
+    </script>
+  </body>
 </html>
diff --git a/fetch/fetch-with-init-then-request/index.html b/fetch/fetch-with-init-then-request/index.html
index 56c7e324..43bdbbee 100644
--- a/fetch/fetch-with-init-then-request/index.html
+++ b/fetch/fetch-with-init-then-request/index.html
@@ -13,7 +13,7 @@
   <body>
     <h1>Fetch with init then Request example</h1>
     <img src="" />
-  </body>
+
   <script>
     const myImage = document.querySelector("img");
 
@@ -46,4 +46,5 @@ <h1>Fetch with init then Request example</h1>
         document.body.insertBefore(p, myImage);
       });
   </script>
+  </body>
 </html>
diff --git a/fetch/object-fit-gallery-fetch/index.html b/fetch/object-fit-gallery-fetch/index.html
index eaf23fda..7561f80a 100644
--- a/fetch/object-fit-gallery-fetch/index.html
+++ b/fetch/object-fit-gallery-fetch/index.html
@@ -36,6 +36,7 @@
       <img class="thumb" />
     </div>
     <img class="main" />
+
+    <script src="main.js"></script>
   </body>
-  <script src="main.js"></script>
 </html>
diff --git a/indexeddb-examples/idbcursor/index.html b/indexeddb-examples/idbcursor/index.html
index d8fa6c6e..e8ef4fa1 100644
--- a/indexeddb-examples/idbcursor/index.html
+++ b/indexeddb-examples/idbcursor/index.html
@@ -18,7 +18,7 @@ <h1>Basic IDBCursor example — Rush studio albums 74-85</h1>
     </button>
     <button class="update">Update "A farewell.." year</button>
     <button class="direction">Display albums upsidedown</button>
-  </body>
 
-  <script src="scripts/main.js"></script>
+    <script src="scripts/main.js"></script>
+  </body>
 </html>
diff --git a/indexeddb-examples/idbindex/index.html b/indexeddb-examples/idbindex/index.html
index 99fdaef4..51f59d1c 100644
--- a/indexeddb-examples/idbindex/index.html
+++ b/indexeddb-examples/idbindex/index.html
@@ -6,8 +6,7 @@
     <link
       href="http://fonts.googleapis.com/css?family=Arvo|Bevan"
       rel="stylesheet"
-      type="text/css"
-    />
+      type="text/css" />
     <link href="style/style.css" type="text/css" rel="stylesheet" />
   </head>
   <body>
@@ -32,7 +31,6 @@ <h1>Basic IDBIndex example — contacts directory</h1>
     <p>
       Click/focus each table column heading to sort the data by that column.
     </p>
+    <script src="scripts/main.js"></script>
   </body>
-
-  <script src="scripts/main.js"></script>
 </html>
diff --git a/indexeddb-examples/idbkeyrange/index.html b/indexeddb-examples/idbkeyrange/index.html
index 8ad516f9..7a901d32 100644
--- a/indexeddb-examples/idbkeyrange/index.html
+++ b/indexeddb-examples/idbkeyrange/index.html
@@ -88,7 +88,8 @@ <h1>
 
       <button class="run">Run query</button>
     </form>
-  </body>
+
 
   <script src="scripts/main.js"></script>
+  </body>
 </html>
diff --git a/insert-adjacent/insertAdjacentElement.html b/insert-adjacent/insertAdjacentElement.html
index 511908f1..45e30958 100644
--- a/insert-adjacent/insertAdjacentElement.html
+++ b/insert-adjacent/insertAdjacentElement.html
@@ -1,99 +1,102 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <title>insertAdjacentElement() demo</title>
-  <style>
-    div {
-      width: 50px;
-      height: 50px;
-      margin: 3px;
-      border: 3px solid black;
-      display: inline-block;
-      background-color: red;
-    }
-  </style>
-</head>
-<body>
-
-<p>Click colored box to select it, then use the first two buttons below to insert elements before and after your selection.</p>
-
-<section>
-  <div></div><div></div><div></div><div></div>
-</section>
-
-<button class="before">Insert before</button>
-<button class="after">Insert after</button>
-<button class="reset">Reset demo</button>
-
-</body>
-
-<script>
-const beforeBtn = document.querySelector('.before');
-const afterBtn = document.querySelector('.after');
-const resetBtn = document.querySelector('.reset');
-
-const container = document.querySelector('section');
-
-let activeElem;
-
-resetBtn.addEventListener('click', () => {
-  while (container.firstChild) {
-      container.removeChild(container.firstChild);
-  }
-
-  for (let i = 0; i <=3; i++) {
-    let tempDiv = document.createElement('div');
-    container.appendChild(tempDiv);
-    setListener(tempDiv);
-  }
-});
-
-beforeBtn.addEventListener('click', function() {
-  let tempDiv = document.createElement('div');
-  tempDiv.style.backgroundColor = randomColor();
-  if (activeElem) {
-    activeElem.insertAdjacentElement('beforebegin',tempDiv);
-  }
-  setListener(tempDiv);
-});
-
-afterBtn.addEventListener('click', function() {
-  let tempDiv = document.createElement('div');
-  tempDiv.style.backgroundColor = randomColor();
-  if (activeElem) {
-    activeElem.insertAdjacentElement('afterend',tempDiv);
-  }
-  setListener(tempDiv);
-});
-
-function setListener(elem) {
-  elem.addEventListener('click', function() {
-    const allElems = document.querySelectorAll('section div');
-      for (let i = 0; i < allElems.length; i++) {
-          allElems[i].style.border = '3px solid black';
-      } 
-    elem.style.border = '3px solid aqua';
-    activeElem = elem;
-  })
-};
-
-function randomColor() {
-  function random() {
-    const result = Math.floor(Math.random() * 255);
-    return result;
-  }
-
-  return 'rgb(' + random() + ',' + random() + ',' + random() + ')';
-}
-
-function init() {
-  const initElems = document.querySelectorAll('section div');
-  for (let i = 0; i < initElems.length; i++) {
-    setListener(initElems[i]);
-  }
-};
-
-init();
-</script>
-
+  <head>
+    <title>insertAdjacentElement() demo</title>
+    <style>
+      div {
+        width: 50px;
+        height: 50px;
+        margin: 3px;
+        border: 3px solid black;
+        display: inline-block;
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      Click colored box to select it, then use the first two buttons below to
+      insert elements before and after your selection.
+    </p>
+
+    <section>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </section>
+
+    <button class="before">Insert before</button>
+    <button class="after">Insert after</button>
+    <button class="reset">Reset demo</button>
+
+    <script>
+      const beforeBtn = document.querySelector(".before");
+      const afterBtn = document.querySelector(".after");
+      const resetBtn = document.querySelector(".reset");
+
+      const container = document.querySelector("section");
+
+      let activeElem;
+
+      resetBtn.addEventListener("click", () => {
+        while (container.firstChild) {
+          container.removeChild(container.firstChild);
+        }
+
+        for (let i = 0; i <= 3; i++) {
+          let tempDiv = document.createElement("div");
+          container.appendChild(tempDiv);
+          setListener(tempDiv);
+        }
+      });
+
+      beforeBtn.addEventListener("click", function () {
+        let tempDiv = document.createElement("div");
+        tempDiv.style.backgroundColor = randomColor();
+        if (activeElem) {
+          activeElem.insertAdjacentElement("beforebegin", tempDiv);
+        }
+        setListener(tempDiv);
+      });
+
+      afterBtn.addEventListener("click", function () {
+        let tempDiv = document.createElement("div");
+        tempDiv.style.backgroundColor = randomColor();
+        if (activeElem) {
+          activeElem.insertAdjacentElement("afterend", tempDiv);
+        }
+        setListener(tempDiv);
+      });
+
+      function setListener(elem) {
+        elem.addEventListener("click", function () {
+          const allElems = document.querySelectorAll("section div");
+          for (let i = 0; i < allElems.length; i++) {
+            allElems[i].style.border = "3px solid black";
+          }
+          elem.style.border = "3px solid aqua";
+          activeElem = elem;
+        });
+      }
+
+      function randomColor() {
+        function random() {
+          const result = Math.floor(Math.random() * 255);
+          return result;
+        }
+
+        return "rgb(" + random() + "," + random() + "," + random() + ")";
+      }
+
+      function init() {
+        const initElems = document.querySelectorAll("section div");
+        for (let i = 0; i < initElems.length; i++) {
+          setListener(initElems[i]);
+        }
+      }
+
+      init();
+    </script>
+  </body>
 </html>
diff --git a/insert-adjacent/insertAdjacentText.html b/insert-adjacent/insertAdjacentText.html
index 86aa5abc..c86aad6f 100644
--- a/insert-adjacent/insertAdjacentText.html
+++ b/insert-adjacent/insertAdjacentText.html
@@ -1,57 +1,55 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <title>insertAdjacentText() demo</title>
-  <style>
-    section p {
-      font-size: 1.1rem;
-      color: blue;
-    }
-
-    input {
-      margin-bottom: 0.5rem;
-    }
-  </style>
-</head>
-<body>
-
-<p>Enter some text to add, then use the first two buttons below to insert your text after the existing text.</p>
-
-<section>
-  <p>This is my text</p>
-</section>
-
-<input type="text"><br>
-<button class="before">Insert before</button>
-<button class="after">Insert after</button>
-<button class="reset">Reset demo</button>
-
-</body>
-
-<script>
-
-  var beforeBtn = document.querySelector('.before');
-  var afterBtn = document.querySelector('.after');
-  var resetBtn = document.querySelector('.reset');
-
-  var para = document.querySelector('section p');
-  var initContent = para.textContent;
-
-  var textInput = document.querySelector('input');
-
-  resetBtn.addEventListener('click', function() {
-    para.textContent = initContent;
-    textInput.value = '';
-  });
-
-  beforeBtn.addEventListener('click', function() {
-    para.insertAdjacentText('afterbegin',textInput.value);
-  });
-
-  afterBtn.addEventListener('click', function() {
-    para.insertAdjacentText('beforeend',textInput.value);
-  });
-
-</script>
-
-</html>
\ No newline at end of file
+  <head>
+    <title>insertAdjacentText() demo</title>
+    <style>
+      section p {
+        font-size: 1.1rem;
+        color: blue;
+      }
+
+      input {
+        margin-bottom: 0.5rem;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      Enter some text to add, then use the first two buttons below to insert
+      your text after the existing text.
+    </p>
+
+    <section>
+      <p>This is my text</p>
+    </section>
+
+    <input type="text" /><br />
+    <button class="before">Insert before</button>
+    <button class="after">Insert after</button>
+    <button class="reset">Reset demo</button>
+
+    <script>
+      var beforeBtn = document.querySelector(".before");
+      var afterBtn = document.querySelector(".after");
+      var resetBtn = document.querySelector(".reset");
+
+      var para = document.querySelector("section p");
+      var initContent = para.textContent;
+
+      var textInput = document.querySelector("input");
+
+      resetBtn.addEventListener("click", function () {
+        para.textContent = initContent;
+        textInput.value = "";
+      });
+
+      beforeBtn.addEventListener("click", function () {
+        para.insertAdjacentText("afterbegin", textInput.value);
+      });
+
+      afterBtn.addEventListener("click", function () {
+        para.insertAdjacentText("beforeend", textInput.value);
+      });
+    </script>
+  </body>
+</html>
diff --git a/matchmedia/index.html b/matchmedia/index.html
index fd6c93cb..e6dcb19d 100644
--- a/matchmedia/index.html
+++ b/matchmedia/index.html
@@ -1,60 +1,59 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <title>matchMedia test file</title>
-  <style>
-
-    html {
-      font-family: sans-serif;
-      background-color: white;
-    }
-
-    body {
-      padding: 20px;
-      margin: 10px;
-      background-color: blue;
-      border: 10px solid black;
-    }
-
-    h1, p {
-      text-align: center;
-    }
-
-    p {
-      font-size: 1.3rem;
-    }
-
-  </style>
-</head>
-<body>
-  <h1>matchMedia test</h1>
-
-  <p></p>
-    
-
-</body>
-
-<script>
-  var para = document.querySelector('p');
-  function screenTest() {
-    if (window.matchMedia('(max-width: 600px)').matches) {
-      /* the viewport is 600 pixels wide or less */
-      para.textContent = 'This is a narrow screen; ' + window.innerWidth + "px wide.";
-      document.body.style.backgroundColor = 'red';
-    } else if(window.matchMedia('(min-width: 1400px)').matches) {
-      /* the viewport is more than than 1400 pixels wide */
-      para.textContent = 'This is a REALLY wide screen; ' + window.innerWidth + "px wide.";
-      document.body.style.backgroundColor = 'green';
-    } else {
-      /* the viewport is more than than 400 pixels wide */
-      para.textContent = 'This is a wide screen; ' + window.innerWidth + "px wide.";
-      document.body.style.backgroundColor = 'blue';
-    }
-  }
-
-  screenTest();
-
-  document.body.onresize = screenTest;
-</script>
-
-</html>
\ No newline at end of file
+  <head>
+    <title>matchMedia test file</title>
+    <style>
+      html {
+        font-family: sans-serif;
+        background-color: white;
+      }
+
+      body {
+        padding: 20px;
+        margin: 10px;
+        background-color: blue;
+        border: 10px solid black;
+      }
+
+      h1,
+      p {
+        text-align: center;
+      }
+
+      p {
+        font-size: 1.3rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>matchMedia test</h1>
+
+    <p></p>
+
+    <script>
+      var para = document.querySelector("p");
+      function screenTest() {
+        if (window.matchMedia("(max-width: 600px)").matches) {
+          /* the viewport is 600 pixels wide or less */
+          para.textContent =
+            "This is a narrow screen; " + window.innerWidth + "px wide.";
+          document.body.style.backgroundColor = "red";
+        } else if (window.matchMedia("(min-width: 1400px)").matches) {
+          /* the viewport is more than than 1400 pixels wide */
+          para.textContent =
+            "This is a REALLY wide screen; " + window.innerWidth + "px wide.";
+          document.body.style.backgroundColor = "green";
+        } else {
+          /* the viewport is more than than 400 pixels wide */
+          para.textContent =
+            "This is a wide screen; " + window.innerWidth + "px wide.";
+          document.body.style.backgroundColor = "blue";
+        }
+      }
+
+      screenTest();
+
+      document.body.onresize = screenTest;
+    </script>
+  </body>
+</html>
diff --git a/mediaquerylist/index.html b/mediaquerylist/index.html
index 0412d239..de4c654b 100644
--- a/mediaquerylist/index.html
+++ b/mediaquerylist/index.html
@@ -1,64 +1,60 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>MediaQueryList example</title>
-  <style>
-
-    html {
-      font-family: sans-serif;
-      background-color: white;
-    }
-
-    body {
-      padding: 20px;
-      margin: 10px;
-      background-color: blue;
-      border: 10px solid black;
-    }
-
-    h1, p {
-      text-align: center;
-    }
-
-    p {
-      font-size: 1.3rem;
-    }
-
-  </style>
-</head>
-<body>
-  <h1>matchMedia test</h1>
-
-  <p></p>
-
-
-</body>
-
-<script>
-  var para = document.querySelector('p');
-
-  var mql = window.matchMedia('(max-width: 600px)');
-
-  function screenTest(e) {
-    if (e.matches) {
-      /* the viewport is 600 pixels wide or less */
-      para.textContent = 'This is a narrow screen — less than 600px wide.';
-      document.body.style.backgroundColor = 'red';
-    } else {
-      /* the viewport is more than 600 pixels wide */
-      para.textContent = 'This is a wide screen — more than 600px wide.';
-      document.body.style.backgroundColor = 'blue';
-    }
-  }
-
-  screenTest(mql);
-  mql.addEventListener('change', screenTest, false);
-
-  mql.onchange = function() {
-    console.log(mql);
-  }
-</script>
-
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>MediaQueryList example</title>
+    <style>
+      html {
+        font-family: sans-serif;
+        background-color: white;
+      }
+
+      body {
+        padding: 20px;
+        margin: 10px;
+        background-color: blue;
+        border: 10px solid black;
+      }
+
+      h1,
+      p {
+        text-align: center;
+      }
+
+      p {
+        font-size: 1.3rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>matchMedia test</h1>
+
+    <p></p>
+
+    <script>
+      var para = document.querySelector("p");
+
+      var mql = window.matchMedia("(max-width: 600px)");
+
+      function screenTest(e) {
+        if (e.matches) {
+          /* the viewport is 600 pixels wide or less */
+          para.textContent = "This is a narrow screen — less than 600px wide.";
+          document.body.style.backgroundColor = "red";
+        } else {
+          /* the viewport is more than 600 pixels wide */
+          para.textContent = "This is a wide screen — more than 600px wide.";
+          document.body.style.backgroundColor = "blue";
+        }
+      }
+
+      screenTest(mql);
+      mql.addEventListener("change", screenTest, false);
+
+      mql.onchange = function () {
+        console.log(mql);
+      };
+    </script>
+  </body>
 </html>
diff --git a/pointerevents/Multi-touch_interaction.html b/pointerevents/Multi-touch_interaction.html
index bf5fc535..c62d8a1a 100644
--- a/pointerevents/Multi-touch_interaction.html
+++ b/pointerevents/Multi-touch_interaction.html
@@ -1,176 +1,186 @@
 <!DOCTYPE html>
-<html lang=en>
-<!--
+<html lang="en">
+  <!--
   This app demonstrates using Pointer Events (pointerdown, pointerup, 
   pointermove, pointercancel, etc.) for the following interactions:
    1. Single touch
    2. Two (simultaneous) touches
    3. More than two simultaneous touches
 -->
-<head>
-<title>Pointer Events multi-touch interaction</title>
-<meta name="viewport" content="width=device-width">
-<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  #target1 {
-    background: white;
-    border: 1px solid black;
-  }
-  #target2 {
-    background: white;
-    border: 1px solid black;
-  }
-  #target3 {
-    background: white;
-    border: 1px solid black;
-  }
-</style>
-</head>
-
-<script>
-// Log events flag
-var logEvents = false;
-
-// Event caches, one per touch target
-var evCache1 = new Array();
-var evCache2 = new Array();
-var evCache3 = new Array();
-
-function enableLog(ev) {
-  logEvents = logEvents ? false : true;
-}
-
-function log(name, ev) {
-  var o = document.getElementsByTagName('output')[0];
-  var s = name + ": pointerID = " + ev.pointerId +
-                " ; pointerType = " + ev.pointerType +
-                " ; isPrimary = " + ev.isPrimary;
-  o.innerHTML += s + " <br>";
-} 
-
-function clearLog(event) {
- var o = document.getElementsByTagName('output')[0];
- o.innerHTML = "";
-}
-
-function update_background(ev) {
- // Change background color based on the number simultaneous touches/pointers
- // currently down:
- //   white - target element has no touch points i.e. no pointers down
- //   yellow - one pointer down
- //   pink - two pointers down
- //   lightblue - three or more pointers down
- var evCache = get_cache(ev);
- switch (evCache.length) {
-   case 0:
-     // Target element has no touch points
-     ev.target.style.background = "white";
-     break;
-   case 1:
-     // Single touch point
-     ev.target.style.background = "yellow";
-     break;
-   case 2:
-     // Two simultaneous touch points
-     ev.target.style.background = "pink";
-     break;
-   default:
-     // Three or more simultaneous touches
-     ev.target.style.background = "lightblue";
- }
-}
-
-function pointerdown_handler(ev) {
- // The pointerdown event signals the start of a touch interaction.
- // Save this event for later processing (this could be part of a
- // multi-touch interaction) and update the background color
- push_event(ev);
- if (logEvents) log("pointerDown: name = " + ev.target.id, ev);
- update_background(ev);
-}
-
-function pointermove_handler(ev) {
- // Note: if the user makes more than one "simultaneous" touch, most browsers 
- // fire at least one pointermove event and some will fire several pointermoves.
- //
- // This function sets the target element's border to "dashed" to visually
- // indicate the target received a move event.
- if (logEvents) log("pointerMove", ev);
- update_background(ev);
- ev.target.style.border = "dashed";
-}
-
-function pointerup_handler(ev) {
-  if (logEvents) log(ev.type, ev);
-  // Remove this touch point from the cache and reset the target's
-  // background and border
-  remove_event(ev);
-  update_background(ev);
-  ev.target.style.border = "1px solid black";
-}
-
-function get_cache(ev) {
- // Return the cache for this event's target element
- switch(ev.target.id) {
-   case "target1": return evCache1;
-   case "target2": return evCache2;
-   case "target3": return evCache3;
-   default: log("Error with cache handling",ev);
- }
-}
-
-function push_event(ev) {
- // Save this event in the target's cache
- var cache = get_cache(ev);
- cache.push(ev);
-}
-
-function remove_event(ev) {
- // Remove this event from the target's cache
- var cache = get_cache(ev);
- for (var i = 0; i < cache.length; i++) {
-   if (cache[i].pointerId == ev.pointerId) {
-     cache.splice(i, 1);
-     break;
-   }
- }
-}
-
-function set_handlers(name) {
- // Install event handlers for the given element
- var el=document.getElementById(name);
- el.onpointerdown = pointerdown_handler;
- el.onpointermove = pointermove_handler;
-
- // Use same handler for pointer{up,cancel,out,leave} events since
- // the semantics for these events - in this app - are the same.
- el.onpointerup = pointerup_handler;
- el.onpointercancel = pointerup_handler;
- el.onpointerout = pointerup_handler;
- el.onpointerleave = pointerup_handler;
-}
-
-function init() {
- set_handlers("target1");
- set_handlers("target2");
- set_handlers("target3");
-}
-
-</script>
-<body onload="init();" style="touch-action:none">
-<h1>Multi-touch interaction</h1>
- <!-- Create some boxes to test various gestures. -->
- <div id="target1">Tap, Hold or Swipe me 1</div>
- <div id="target2">Tap, Hold or Swipe me 2</div>
- <div id="target3">Tap, Hold or Swipe me 3</div>
-
- <!-- UI for logging/bebugging -->
- <button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
- <button id="clearlog" onclick="clearLog(event);">Clear the log</button>
- <p></p>
- <output></output>
-</body>
+  <head>
+    <title>Pointer Events multi-touch interaction</title>
+    <meta name="viewport" content="width=device-width" />
+    <style>
+      div {
+        margin: 0em;
+        padding: 2em;
+      }
+      #target1 {
+        background: white;
+        border: 1px solid black;
+      }
+      #target2 {
+        background: white;
+        border: 1px solid black;
+      }
+      #target3 {
+        background: white;
+        border: 1px solid black;
+      }
+    </style>
+
+    <script>
+      // Log events flag
+      var logEvents = false;
+
+      // Event caches, one per touch target
+      var evCache1 = new Array();
+      var evCache2 = new Array();
+      var evCache3 = new Array();
+
+      function enableLog(ev) {
+        logEvents = logEvents ? false : true;
+      }
+
+      function log(name, ev) {
+        var o = document.getElementsByTagName("output")[0];
+        var s =
+          name +
+          ": pointerID = " +
+          ev.pointerId +
+          " ; pointerType = " +
+          ev.pointerType +
+          " ; isPrimary = " +
+          ev.isPrimary;
+        o.innerHTML += s + " <br>";
+      }
+
+      function clearLog(event) {
+        var o = document.getElementsByTagName("output")[0];
+        o.innerHTML = "";
+      }
+
+      function update_background(ev) {
+        // Change background color based on the number simultaneous touches/pointers
+        // currently down:
+        //   white - target element has no touch points i.e. no pointers down
+        //   yellow - one pointer down
+        //   pink - two pointers down
+        //   lightblue - three or more pointers down
+        var evCache = get_cache(ev);
+        switch (evCache.length) {
+          case 0:
+            // Target element has no touch points
+            ev.target.style.background = "white";
+            break;
+          case 1:
+            // Single touch point
+            ev.target.style.background = "yellow";
+            break;
+          case 2:
+            // Two simultaneous touch points
+            ev.target.style.background = "pink";
+            break;
+          default:
+            // Three or more simultaneous touches
+            ev.target.style.background = "lightblue";
+        }
+      }
+
+      function pointerdown_handler(ev) {
+        // The pointerdown event signals the start of a touch interaction.
+        // Save this event for later processing (this could be part of a
+        // multi-touch interaction) and update the background color
+        push_event(ev);
+        if (logEvents) log("pointerDown: name = " + ev.target.id, ev);
+        update_background(ev);
+      }
+
+      function pointermove_handler(ev) {
+        // Note: if the user makes more than one "simultaneous" touch, most browsers
+        // fire at least one pointermove event and some will fire several pointermoves.
+        //
+        // This function sets the target element's border to "dashed" to visually
+        // indicate the target received a move event.
+        if (logEvents) log("pointerMove", ev);
+        update_background(ev);
+        ev.target.style.border = "dashed";
+      }
+
+      function pointerup_handler(ev) {
+        if (logEvents) log(ev.type, ev);
+        // Remove this touch point from the cache and reset the target's
+        // background and border
+        remove_event(ev);
+        update_background(ev);
+        ev.target.style.border = "1px solid black";
+      }
+
+      function get_cache(ev) {
+        // Return the cache for this event's target element
+        switch (ev.target.id) {
+          case "target1":
+            return evCache1;
+          case "target2":
+            return evCache2;
+          case "target3":
+            return evCache3;
+          default:
+            log("Error with cache handling", ev);
+        }
+      }
+
+      function push_event(ev) {
+        // Save this event in the target's cache
+        var cache = get_cache(ev);
+        cache.push(ev);
+      }
+
+      function remove_event(ev) {
+        // Remove this event from the target's cache
+        var cache = get_cache(ev);
+        for (var i = 0; i < cache.length; i++) {
+          if (cache[i].pointerId == ev.pointerId) {
+            cache.splice(i, 1);
+            break;
+          }
+        }
+      }
+
+      function set_handlers(name) {
+        // Install event handlers for the given element
+        var el = document.getElementById(name);
+        el.onpointerdown = pointerdown_handler;
+        el.onpointermove = pointermove_handler;
+
+        // Use same handler for pointer{up,cancel,out,leave} events since
+        // the semantics for these events - in this app - are the same.
+        el.onpointerup = pointerup_handler;
+        el.onpointercancel = pointerup_handler;
+        el.onpointerout = pointerup_handler;
+        el.onpointerleave = pointerup_handler;
+      }
+
+      function init() {
+        set_handlers("target1");
+        set_handlers("target2");
+        set_handlers("target3");
+      }
+    </script>
+  </head>
+  <body onload="init();" style="touch-action: none">
+    <h1>Multi-touch interaction</h1>
+    <!-- Create some boxes to test various gestures. -->
+    <div id="target1">Tap, Hold or Swipe me 1</div>
+    <div id="target2">Tap, Hold or Swipe me 2</div>
+    <div id="target3">Tap, Hold or Swipe me 3</div>
+
+    <!-- UI for logging/bebugging -->
+    <button id="log" onclick="enableLog(event);">
+      Start/Stop event logging
+    </button>
+    <button id="clearlog" onclick="clearLog(event);">Clear the log</button>
+    <p></p>
+    <output></output>
+  </body>
 </html>
diff --git a/pointerevents/Pinch_zoom_gestures.html b/pointerevents/Pinch_zoom_gestures.html
index 635be623..6d4bcce6 100644
--- a/pointerevents/Pinch_zoom_gestures.html
+++ b/pointerevents/Pinch_zoom_gestures.html
@@ -1,148 +1,159 @@
 <!DOCTYPE html>
-<html lang=en>
-<!--
+<html lang="en">
+  <!--
   This application demonstrates using Pointer Events for simple 2-pointer
   pinch/zoom gesture recognition.
 -->
-<head>
-<title>Pointer Events pinch/zoom example</title>
-<meta name="viewport" content="width=device-width">
-<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  #target {
-    background: white;
-    border: 1px solid black;
-  }
-</style>
-</head>
-
-<script>
-// Log events flag
-var logEvents = false;
-
-// Global vars to cache event state
-var evCache = new Array();
-var prevDiff = -1;
-
-// Logging/debugging functions
-function enableLog(ev) {
-  logEvents = logEvents ? false : true;
-}
-
-function log(prefix, ev) {
-  if (!logEvents) return;
-  var o = document.getElementsByTagName('output')[0];
-  var s = prefix + ": pointerID = " + ev.pointerId +
-                " ; pointerType = " + ev.pointerType +
-                " ; isPrimary = " + ev.isPrimary;
-  o.innerHTML += s + " <br>";
-} 
-
-function clearLog(event) {
- var o = document.getElementsByTagName('output')[0];
- o.innerHTML = "";
-}
-
-function pointerdown_handler(ev) {
- // The pointerdown event signals the start of a touch interaction.
- // This event is cached to support 2-finger gestures
- evCache.push(ev);
- log("pointerDown", ev);
-}
-
-function pointermove_handler(ev) {
- // This function implements a 2-pointer horizontal pinch/zoom gesture. 
- //
- // If the distance between the two pointers has increased (zoom in), 
- // the taget element's background is changed to "pink" and if the 
- // distance is decreasing (zoom out), the color is changed to "lightblue".
- //
- // This function sets the target element's border to "dashed" to visually
- // indicate the pointer's target received a move event.
- log("pointerMove", ev);
- ev.target.style.border = "dashed";
-
- // Find this event in the cache and update its record with this event
- for (var i = 0; i < evCache.length; i++) {
-   if (ev.pointerId == evCache[i].pointerId) {
-      evCache[i] = ev;
-   break;
-   }
- }
-
- // If two pointers are down, check for pinch gestures
- if (evCache.length == 2) {
-   // Calculate the distance between the two pointers
-   var curDiff = Math.sqrt(Math.pow(evCache[1].clientX - evCache[0].clientX, 2) + Math.pow(evCache[1].clientY - evCache[0].clientY, 2));
-
-   if (prevDiff > 0) {
-     if (curDiff > prevDiff) {
-       // The distance between the two pointers has increased
-       log("Pinch moving OUT -> Zoom in", ev);
-       ev.target.style.background = "pink";
-     }
-     if (curDiff < prevDiff) {
-       // The distance between the two pointers has decreased
-       log("Pinch moving IN -> Zoom out",ev);
-       ev.target.style.background = "lightblue";
-     }
-   }
-
-   // Cache the distance for the next move event 
-   prevDiff = curDiff;
- }
-}
-
-function pointerup_handler(ev) {
-  log(ev.type, ev);
-  // Remove this pointer from the cache and reset the target's
-  // background and border
-  remove_event(ev);
-  ev.target.style.background = "white";
-  ev.target.style.border = "1px solid black";
- 
-  // If the number of pointers down is less than two then reset diff tracker
-  if (evCache.length < 2) prevDiff = -1;
-}
-
-function remove_event(ev) {
- // Remove this event from the target's cache
- for (var i = 0; i < evCache.length; i++) {
-   if (evCache[i].pointerId == ev.pointerId) {
-     evCache.splice(i, 1);
-     break;
-   }
- }
-}
-
-function init() {
- // Install event handlers for the pointer target
- var el=document.getElementById("target");
- el.onpointerdown = pointerdown_handler;
- el.onpointermove = pointermove_handler;
-
- // Use same handler for pointer{up,cancel,out,leave} events since
- // the semantics for these events - in this app - are the same.
- el.onpointerup = pointerup_handler;
- el.onpointercancel = pointerup_handler;
- el.onpointerout = pointerup_handler;
- el.onpointerleave = pointerup_handler;
-}
-
-</script>
-<body onload="init();" style="touch-action:none">
-<h1>Pointer Event pinch/zoom gesture</h1>
- <!-- Create element for pointer gestures. -->
- <div id="target">Touch and Hold with 2 pointers, then pinch in or out.<br/>
-    The background color will change to pink if the pinch is opening (Zoom In) 
-    or changes to lightblue if the pinch is closing (Zoom out).</div>
- <!-- UI for logging/debugging -->
- <button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
- <button id="clearlog" onclick="clearLog(event);">Clear the log</button>
- <p></p>
- <output></output>
-</body>
+  <head>
+    <title>Pointer Events pinch/zoom example</title>
+    <meta name="viewport" content="width=device-width" />
+    <style>
+      div {
+        margin: 0em;
+        padding: 2em;
+      }
+      #target {
+        background: white;
+        border: 1px solid black;
+      }
+    </style>
+
+    <script>
+      // Log events flag
+      var logEvents = false;
+
+      // Global vars to cache event state
+      var evCache = new Array();
+      var prevDiff = -1;
+
+      // Logging/debugging functions
+      function enableLog(ev) {
+        logEvents = logEvents ? false : true;
+      }
+
+      function log(prefix, ev) {
+        if (!logEvents) return;
+        var o = document.getElementsByTagName("output")[0];
+        var s =
+          prefix +
+          ": pointerID = " +
+          ev.pointerId +
+          " ; pointerType = " +
+          ev.pointerType +
+          " ; isPrimary = " +
+          ev.isPrimary;
+        o.innerHTML += s + " <br>";
+      }
+
+      function clearLog(event) {
+        var o = document.getElementsByTagName("output")[0];
+        o.innerHTML = "";
+      }
+
+      function pointerdown_handler(ev) {
+        // The pointerdown event signals the start of a touch interaction.
+        // This event is cached to support 2-finger gestures
+        evCache.push(ev);
+        log("pointerDown", ev);
+      }
+
+      function pointermove_handler(ev) {
+        // This function implements a 2-pointer horizontal pinch/zoom gesture.
+        //
+        // If the distance between the two pointers has increased (zoom in),
+        // the taget element's background is changed to "pink" and if the
+        // distance is decreasing (zoom out), the color is changed to "lightblue".
+        //
+        // This function sets the target element's border to "dashed" to visually
+        // indicate the pointer's target received a move event.
+        log("pointerMove", ev);
+        ev.target.style.border = "dashed";
+
+        // Find this event in the cache and update its record with this event
+        for (var i = 0; i < evCache.length; i++) {
+          if (ev.pointerId == evCache[i].pointerId) {
+            evCache[i] = ev;
+            break;
+          }
+        }
+
+        // If two pointers are down, check for pinch gestures
+        if (evCache.length == 2) {
+          // Calculate the distance between the two pointers
+          var curDiff = Math.sqrt(
+            Math.pow(evCache[1].clientX - evCache[0].clientX, 2) +
+              Math.pow(evCache[1].clientY - evCache[0].clientY, 2)
+          );
+
+          if (prevDiff > 0) {
+            if (curDiff > prevDiff) {
+              // The distance between the two pointers has increased
+              log("Pinch moving OUT -> Zoom in", ev);
+              ev.target.style.background = "pink";
+            }
+            if (curDiff < prevDiff) {
+              // The distance between the two pointers has decreased
+              log("Pinch moving IN -> Zoom out", ev);
+              ev.target.style.background = "lightblue";
+            }
+          }
+
+          // Cache the distance for the next move event
+          prevDiff = curDiff;
+        }
+      }
+
+      function pointerup_handler(ev) {
+        log(ev.type, ev);
+        // Remove this pointer from the cache and reset the target's
+        // background and border
+        remove_event(ev);
+        ev.target.style.background = "white";
+        ev.target.style.border = "1px solid black";
+
+        // If the number of pointers down is less than two then reset diff tracker
+        if (evCache.length < 2) prevDiff = -1;
+      }
+
+      function remove_event(ev) {
+        // Remove this event from the target's cache
+        for (var i = 0; i < evCache.length; i++) {
+          if (evCache[i].pointerId == ev.pointerId) {
+            evCache.splice(i, 1);
+            break;
+          }
+        }
+      }
+
+      function init() {
+        // Install event handlers for the pointer target
+        var el = document.getElementById("target");
+        el.onpointerdown = pointerdown_handler;
+        el.onpointermove = pointermove_handler;
+
+        // Use same handler for pointer{up,cancel,out,leave} events since
+        // the semantics for these events - in this app - are the same.
+        el.onpointerup = pointerup_handler;
+        el.onpointercancel = pointerup_handler;
+        el.onpointerout = pointerup_handler;
+        el.onpointerleave = pointerup_handler;
+      }
+    </script>
+  </head>
+  <body onload="init();" style="touch-action: none">
+    <h1>Pointer Event pinch/zoom gesture</h1>
+    <!-- Create element for pointer gestures. -->
+    <div id="target">
+      Touch and Hold with 2 pointers, then pinch in or out.<br />
+      The background color will change to pink if the pinch is opening (Zoom In)
+      or changes to lightblue if the pinch is closing (Zoom out).
+    </div>
+    <!-- UI for logging/debugging -->
+    <button id="log" onclick="enableLog(event);">
+      Start/Stop event logging
+    </button>
+    <button id="clearlog" onclick="clearLog(event);">Clear the log</button>
+    <p></p>
+    <output></output>
+  </body>
 </html>
diff --git a/touchevents/Multi-touch_interaction.html b/touchevents/Multi-touch_interaction.html
index 5fd6c6ec..1541a352 100644
--- a/touchevents/Multi-touch_interaction.html
+++ b/touchevents/Multi-touch_interaction.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-<html lang=en>
-<!--
+<html lang="en">
+  <!--
   This app demonstrates using the Touch Events touch event types (touchstart,
   touchmove, touchcancel and touchend) for the following interaction:
    1. Single touch
@@ -9,184 +9,198 @@
    4. 1-finger swipe
    5. 2-finger move/pinch/swipe
 -->
-<head>
-<title>Touch Events tutorial</title>
-<meta name="viewport" content="width=device-width">
-<style>
-  div {
-    margin: 0em;
-    padding: 2em;
-  }
-  
-  #target1, #target2, #target3, #target4  {
-    background: white;
-    border: 1px solid black;
-  }
-</style>
-</head>
-
-<script>
-// Log events flag
-var logEvents = false;
-
-// Touch Point cache
-var tpCache = new Array();
-
-function enableLog(ev) {
-  logEvents = logEvents ? false : true;
-}
-
-function log(name, ev, printTargetIds) {
-  var o = document.getElementsByTagName('output')[0];
-  var s = name + ": touches = " + ev.touches.length +
-                " ; targetTouches = " + ev.targetTouches.length +
-                " ; changedTouches = " + ev.changedTouches.length;
-  o.innerHTML += s + " <br>";
-
-  if (printTargetIds) {
-    s = "";
-    for (var i=0; i < ev.targetTouches.length; i++) {
-      s += "... id = " + ev.targetTouches[i].identifier + " <br>";
-    }
-    o.innerHTML += s;
-  }
-}
-
-function clearLog(event) {
- var o = document.getElementsByTagName('output')[0];
- o.innerHTML = "";
-}
-
-function update_background(ev) {
- // Change background color based on the number simultaneous touches
- // in the event's targetTouches list:
- //   yellow - one tap (or hold)
- //   pink - two taps
- //   lightblue - more than two taps
- switch (ev.targetTouches.length) {
-   case 1:
-     // Single tap`
-     ev.target.style.background = "yellow";
-     break;
-   case 2:
-     // Two simultaneous touches
-     ev.target.style.background = "pink";
-     break;
-   default:
-     // More than two simultaneous touches
-     ev.target.style.background = "lightblue";
- }
-}
-
-// This is a very basic 2-touch move/pinch/zoom handler that does not include
-// error handling, only handles horizontal moves, etc.
-function handle_pinch_zoom(ev) {
-
- if (ev.targetTouches.length == 2 && ev.changedTouches.length == 2) {
-   // Check if the two target touches are the same ones that started
-   // the 2-touch
-   var point1=-1, point2=-1;
-   for (var i=0; i < tpCache.length; i++) {
-     if (tpCache[i].identifier == ev.targetTouches[0].identifier) point1 = i;
-     if (tpCache[i].identifier == ev.targetTouches[1].identifier) point2 = i;
-   }
-   if (point1 >=0 && point2 >= 0) {
-     // Calculate the difference between the start and move coordinates
-     var diff1 = Math.abs(tpCache[point1].clientX - ev.targetTouches[0].clientX);
-     var diff2 = Math.abs(tpCache[point2].clientX - ev.targetTouches[1].clientX);
-
-     // This threshold is device dependent as well as application specific
-     var PINCH_THRESHHOLD = ev.target.clientWidth / 10;
-     if (diff1 >= PINCH_THRESHHOLD && diff2 >= PINCH_THRESHHOLD)
-         ev.target.style.background = "green";
-   }
-   else {
-     // empty tpCache
-     tpCache = new Array();
-   }
- }
-}
-
-function start_handler(ev) {
- // If the user makes simultaneious touches, the browser will fire a
- // separate touchstart event for each touch point. Thus if there are
- // three simultaneous touches, the first touchstart event will have
- // targetTouches length of one, the second event will have a length
- // of two, and so on.
- ev.preventDefault();
- // Cache the touch points for later processing of 2-touch pinch/zoom
- if (ev.targetTouches.length == 2) {
-   for (var i=0; i < ev.targetTouches.length; i++) {
-     tpCache.push(ev.targetTouches[i]);
-   }
- }
- if (logEvents) log("touchStart", ev, true);
- update_background(ev);
-}
-
-function move_handler(ev) {
- // Note: if the user makes more than one "simultaneous" touches, most browsers
- // fire at least one touchmove event and some will fire several touchmoves.
- // Consequently, an application might want to "ignore" some touchmoves.
- //
- // This function sets the target element's outline to "dashed" to visualy
- // indicate the target received a move event.
- //
- ev.preventDefault();
- if (logEvents) log("touchMove", ev, false);
- // To avoid too much color flashing many touchmove events are started,
- // don't update the background if two touch points are active
- if (!(ev.touches.length == 2 && ev.targetTouches.length == 2))
-   update_background(ev);
-
- // Set the target element's outline to dashed to give a clear visual
- // indication the element received a move event.
- ev.target.style.outline = "dashed";
-
- // Check this event for 2-touch Move/Pinch/Zoom gesture
- handle_pinch_zoom(ev);
-}
-
-function end_handler(ev) {
-  ev.preventDefault();
-  if (logEvents) log(ev.type, ev, false);
-  if (ev.targetTouches.length == 0) {
-    // Restore background and outline to original values
-    ev.target.style.background = "white";
-    ev.target.style.outline = "1px solid black";
-  }
-}
-
-function set_handlers(name) {
- // Install event handlers for the given element
- var el=document.getElementById(name);
- el.ontouchstart = start_handler;
- el.ontouchmove = move_handler;
- // Use same handler for touchcancel and touchend
- el.ontouchcancel = end_handler;
- el.ontouchend = end_handler;
-}
-
-function init() {
- set_handlers("target1");
- set_handlers("target2");
- set_handlers("target3");
- set_handlers("target4");
-}
-
-</script>
-<body onload="init();">
-<h1>Multi-touch interaction</h1>
- <!-- Create some boxes to test various gestures. -->
- <div id="target1"> Tap, Hold or Swipe me 1</div>
- <div id="target2"> Tap, Hold or Swipe me 2</div>
- <div id="target3"> Tap, Hold or Swipe me 3</div>
- <div id="target4"> Tap, Hold or Swipe me 4</div>
-
- <!-- UI for logging/debugging -->
- <button id="log" onclick="enableLog(event);">Start/Stop event logging</button>
- <button id="clearlog" onclick="clearLog(event);">Clear the log</button>
- <p></p>
- <output></output>
-</body>
+  <head>
+    <title>Touch Events tutorial</title>
+    <meta name="viewport" content="width=device-width" />
+    <style>
+      div {
+        margin: 0em;
+        padding: 2em;
+      }
+
+      #target1,
+      #target2,
+      #target3,
+      #target4 {
+        background: white;
+        border: 1px solid black;
+      }
+    </style>
+
+    <script>
+      // Log events flag
+      var logEvents = false;
+
+      // Touch Point cache
+      var tpCache = new Array();
+
+      function enableLog(ev) {
+        logEvents = logEvents ? false : true;
+      }
+
+      function log(name, ev, printTargetIds) {
+        var o = document.getElementsByTagName("output")[0];
+        var s =
+          name +
+          ": touches = " +
+          ev.touches.length +
+          " ; targetTouches = " +
+          ev.targetTouches.length +
+          " ; changedTouches = " +
+          ev.changedTouches.length;
+        o.innerHTML += s + " <br>";
+
+        if (printTargetIds) {
+          s = "";
+          for (var i = 0; i < ev.targetTouches.length; i++) {
+            s += "... id = " + ev.targetTouches[i].identifier + " <br>";
+          }
+          o.innerHTML += s;
+        }
+      }
+
+      function clearLog(event) {
+        var o = document.getElementsByTagName("output")[0];
+        o.innerHTML = "";
+      }
+
+      function update_background(ev) {
+        // Change background color based on the number simultaneous touches
+        // in the event's targetTouches list:
+        //   yellow - one tap (or hold)
+        //   pink - two taps
+        //   lightblue - more than two taps
+        switch (ev.targetTouches.length) {
+          case 1:
+            // Single tap`
+            ev.target.style.background = "yellow";
+            break;
+          case 2:
+            // Two simultaneous touches
+            ev.target.style.background = "pink";
+            break;
+          default:
+            // More than two simultaneous touches
+            ev.target.style.background = "lightblue";
+        }
+      }
+
+      // This is a very basic 2-touch move/pinch/zoom handler that does not include
+      // error handling, only handles horizontal moves, etc.
+      function handle_pinch_zoom(ev) {
+        if (ev.targetTouches.length == 2 && ev.changedTouches.length == 2) {
+          // Check if the two target touches are the same ones that started
+          // the 2-touch
+          var point1 = -1,
+            point2 = -1;
+          for (var i = 0; i < tpCache.length; i++) {
+            if (tpCache[i].identifier == ev.targetTouches[0].identifier)
+              point1 = i;
+            if (tpCache[i].identifier == ev.targetTouches[1].identifier)
+              point2 = i;
+          }
+          if (point1 >= 0 && point2 >= 0) {
+            // Calculate the difference between the start and move coordinates
+            var diff1 = Math.abs(
+              tpCache[point1].clientX - ev.targetTouches[0].clientX
+            );
+            var diff2 = Math.abs(
+              tpCache[point2].clientX - ev.targetTouches[1].clientX
+            );
+
+            // This threshold is device dependent as well as application specific
+            var PINCH_THRESHHOLD = ev.target.clientWidth / 10;
+            if (diff1 >= PINCH_THRESHHOLD && diff2 >= PINCH_THRESHHOLD)
+              ev.target.style.background = "green";
+          } else {
+            // empty tpCache
+            tpCache = new Array();
+          }
+        }
+      }
+
+      function start_handler(ev) {
+        // If the user makes simultaneious touches, the browser will fire a
+        // separate touchstart event for each touch point. Thus if there are
+        // three simultaneous touches, the first touchstart event will have
+        // targetTouches length of one, the second event will have a length
+        // of two, and so on.
+        ev.preventDefault();
+        // Cache the touch points for later processing of 2-touch pinch/zoom
+        if (ev.targetTouches.length == 2) {
+          for (var i = 0; i < ev.targetTouches.length; i++) {
+            tpCache.push(ev.targetTouches[i]);
+          }
+        }
+        if (logEvents) log("touchStart", ev, true);
+        update_background(ev);
+      }
+
+      function move_handler(ev) {
+        // Note: if the user makes more than one "simultaneous" touches, most browsers
+        // fire at least one touchmove event and some will fire several touchmoves.
+        // Consequently, an application might want to "ignore" some touchmoves.
+        //
+        // This function sets the target element's outline to "dashed" to visualy
+        // indicate the target received a move event.
+        //
+        ev.preventDefault();
+        if (logEvents) log("touchMove", ev, false);
+        // To avoid too much color flashing many touchmove events are started,
+        // don't update the background if two touch points are active
+        if (!(ev.touches.length == 2 && ev.targetTouches.length == 2))
+          update_background(ev);
+
+        // Set the target element's outline to dashed to give a clear visual
+        // indication the element received a move event.
+        ev.target.style.outline = "dashed";
+
+        // Check this event for 2-touch Move/Pinch/Zoom gesture
+        handle_pinch_zoom(ev);
+      }
+
+      function end_handler(ev) {
+        ev.preventDefault();
+        if (logEvents) log(ev.type, ev, false);
+        if (ev.targetTouches.length == 0) {
+          // Restore background and outline to original values
+          ev.target.style.background = "white";
+          ev.target.style.outline = "1px solid black";
+        }
+      }
+
+      function set_handlers(name) {
+        // Install event handlers for the given element
+        var el = document.getElementById(name);
+        el.ontouchstart = start_handler;
+        el.ontouchmove = move_handler;
+        // Use same handler for touchcancel and touchend
+        el.ontouchcancel = end_handler;
+        el.ontouchend = end_handler;
+      }
+
+      function init() {
+        set_handlers("target1");
+        set_handlers("target2");
+        set_handlers("target3");
+        set_handlers("target4");
+      }
+    </script>
+  </head>
+  <body onload="init();">
+    <h1>Multi-touch interaction</h1>
+    <!-- Create some boxes to test various gestures. -->
+    <div id="target1">Tap, Hold or Swipe me 1</div>
+    <div id="target2">Tap, Hold or Swipe me 2</div>
+    <div id="target3">Tap, Hold or Swipe me 3</div>
+    <div id="target4">Tap, Hold or Swipe me 4</div>
+
+    <!-- UI for logging/debugging -->
+    <button id="log" onclick="enableLog(event);">
+      Start/Stop event logging
+    </button>
+    <button id="clearlog" onclick="clearLog(event);">Clear the log</button>
+    <p></p>
+    <output></output>
+  </body>
 </html>
diff --git a/web-crypto/derive-bits/index.html b/web-crypto/derive-bits/index.html
index 74fa62e9..f7ac07de 100644
--- a/web-crypto/derive-bits/index.html
+++ b/web-crypto/derive-bits/index.html
@@ -49,7 +49,8 @@ <h2>ECDH</h2>
       </section>
     </main>
 
-  </body>
+
   <script src="pbkdf2.js"></script>
   <script src="ecdh.js"></script>
+</body>
 </html>
diff --git a/web-crypto/derive-key/index.html b/web-crypto/derive-key/index.html
index 23770a08..ca19acb3 100644
--- a/web-crypto/derive-key/index.html
+++ b/web-crypto/derive-key/index.html
@@ -179,8 +179,9 @@ <h2>HKDF</h2>
         </section>
       </section>
     </main>
-  </body>
+
   <script src="ecdh.js"></script>
   <script src="pbkdf2.js"></script>
   <script src="hkdf.js"></script>
+</body>
 </html>
diff --git a/web-crypto/encrypt-decrypt/index.html b/web-crypto/encrypt-decrypt/index.html
index 25b2a0c8..8d8ccc93 100644
--- a/web-crypto/encrypt-decrypt/index.html
+++ b/web-crypto/encrypt-decrypt/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Web Crypto API example</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>
@@ -11,29 +11,49 @@
       <h1>Web Crypto: encrypt/decrypt</h1>
 
       <section class="description">
-        <p>This page shows the use of the <code>encrypt()</code> and <code>decrypt()</code> functions of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a>. It contains four separate examples, one for each encryption algorithm supported:</p>
+        <p>
+          This page shows the use of the <code>encrypt()</code> and
+          <code>decrypt()</code> functions of the
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API"
+            >Web Crypto API</a
+          >. It contains four separate examples, one for each encryption
+          algorithm supported:
+        </p>
         <ul>
           <li>"RSA-OAEP"</li>
           <li>"AES-CTR"</li>
           <li>"AES-CBC"</li>
           <li>"AES-GCM"</li>
         </ul>
-        <hr/>
+        <hr />
         <p>Each example has five components:</p>
         <ul>
           <li>A text box containing a message to encrypt.</li>
           <li>A representation of the ciphertext.</li>
           <li>A box that will contain the decrypted ciphertext.</li>
-          <li>An "Encrypt" button: this encrypts the text box contents, displays part of the ciphertext, and stores the complete ciphertext.</li>
-          <li>A "Decrypt" button: this decrypts the ciphertext and writes the result into the "Decrypted" box.</li>
+          <li>
+            An "Encrypt" button: this encrypts the text box contents, displays
+            part of the ciphertext, and stores the complete ciphertext.
+          </li>
+          <li>
+            A "Decrypt" button: this decrypts the ciphertext and writes the
+            result into the "Decrypted" box.
+          </li>
         </ul>
         <p>Try it:</p>
         <ul>
           <li>Press "Encrypt". The ciphertext should appear.</li>
-          <li>Press "Decrypt". The decrypted text should appear, and match the original message.</li>
+          <li>
+            Press "Decrypt". The decrypted text should appear, and match the
+            original message.
+          </li>
           <li>Edit the text box contents.</li>
           <li>Press "Encrypt" again. A different ciphertext should appear.</li>
-          <li>Press "Decrypt" again. The new text box contents should appear next to "Decrypted:".</li>
+          <li>
+            Press "Decrypt" again. The new text box contents should appear next
+            to "Decrypted:".
+          </li>
         </ul>
       </section>
 
@@ -43,13 +63,21 @@ <h2 class="encrypt-decrypt-heading">RSA-OAEP</h2>
           <section class="encrypt-decrypt-controls">
             <div class="message-control">
               <label for="rsa-oaep-message">Enter a message to encrypt:</label>
-              <input type="text" id="rsa-oaep-message" name="message" size="25"
-                     value="The owl hoots at midnight">
+              <input
+                type="text"
+                id="rsa-oaep-message"
+                name="message"
+                size="25"
+                value="The owl hoots at midnight" />
             </div>
-            <div class="ciphertext">Ciphertext:<span class="ciphertext-value"></span></div>
-            <div class="decrypted">Decrypted:<span class="decrypted-value"></span></div>
-            <input class="encrypt-button" type="button" value="Encrypt">
-            <input class="decrypt-button" type="button" value="Decrypt">
+            <div class="ciphertext">
+              Ciphertext:<span class="ciphertext-value"></span>
+            </div>
+            <div class="decrypted">
+              Decrypted:<span class="decrypted-value"></span>
+            </div>
+            <input class="encrypt-button" type="button" value="Encrypt" />
+            <input class="decrypt-button" type="button" value="Decrypt" />
           </section>
         </section>
 
@@ -58,13 +86,21 @@ <h2 class="encrypt-decrypt-heading">AES-CTR</h2>
           <section class="encrypt-decrypt-controls">
             <div class="message-control">
               <label for="aes-ctr-message">Enter a message to encrypt:</label>
-              <input type="text" id="aes-ctr-message" name="message" size="25"
-                     value="The tiger prowls at dawn">
+              <input
+                type="text"
+                id="aes-ctr-message"
+                name="message"
+                size="25"
+                value="The tiger prowls at dawn" />
+            </div>
+            <div class="ciphertext">
+              Ciphertext:<span class="ciphertext-value"></span>
             </div>
-            <div class="ciphertext">Ciphertext:<span class="ciphertext-value"></span></div>
-            <div class="decrypted">Decrypted:<span class="decrypted-value"></span></div>
-            <input class="encrypt-button" type="button" value="Encrypt">
-            <input class="decrypt-button" type="button" value="Decrypt">
+            <div class="decrypted">
+              Decrypted:<span class="decrypted-value"></span>
+            </div>
+            <input class="encrypt-button" type="button" value="Encrypt" />
+            <input class="decrypt-button" type="button" value="Decrypt" />
           </section>
         </section>
 
@@ -73,13 +109,21 @@ <h2 class="encrypt-decrypt-heading">AES-CBC</h2>
           <section class="encrypt-decrypt-controls">
             <div class="message-control">
               <label for="aes-cbc-message">Enter a message to encrypt:</label>
-              <input type="text" id="aes-cbc-message" name="message" size="25"
-                     value="The eagle flies at twilight">
+              <input
+                type="text"
+                id="aes-cbc-message"
+                name="message"
+                size="25"
+                value="The eagle flies at twilight" />
+            </div>
+            <div class="ciphertext">
+              Ciphertext:<span class="ciphertext-value"></span>
             </div>
-            <div class="ciphertext">Ciphertext:<span class="ciphertext-value"></span></div>
-            <div class="decrypted">Decrypted:<span class="decrypted-value"></span></div>
-            <input class="encrypt-button" type="button" value="Encrypt">
-            <input class="decrypt-button" type="button" value="Decrypt">
+            <div class="decrypted">
+              Decrypted:<span class="decrypted-value"></span>
+            </div>
+            <input class="encrypt-button" type="button" value="Encrypt" />
+            <input class="decrypt-button" type="button" value="Decrypt" />
           </section>
         </section>
 
@@ -88,22 +132,29 @@ <h2 class="encrypt-decrypt-heading">AES-GCM</h2>
           <section class="encrypt-decrypt-controls">
             <div class="message-control">
               <label for="aes-gcm-message">Enter a message to encrypt:</label>
-              <input type="text" id="aes-gcm-message" name="message" size="25"
-                     value="The bunny hops at teatime">
+              <input
+                type="text"
+                id="aes-gcm-message"
+                name="message"
+                size="25"
+                value="The bunny hops at teatime" />
+            </div>
+            <div class="ciphertext">
+              Ciphertext:<span class="ciphertext-value"></span>
             </div>
-            <div class="ciphertext">Ciphertext:<span class="ciphertext-value"></span></div>
-            <div class="decrypted">Decrypted:<span class="decrypted-value"></span></div>
-            <input class="encrypt-button" type="button" value="Encrypt">
-            <input class="decrypt-button" type="button" value="Decrypt">
+            <div class="decrypted">
+              Decrypted:<span class="decrypted-value"></span>
+            </div>
+            <input class="encrypt-button" type="button" value="Encrypt" />
+            <input class="decrypt-button" type="button" value="Decrypt" />
           </section>
         </section>
-
       </section>
     </main>
 
+    <script src="rsa-oaep.js"></script>
+    <script src="aes-cbc.js"></script>
+    <script src="aes-ctr.js"></script>
+    <script src="aes-gcm.js"></script>
   </body>
-  <script src="rsa-oaep.js"></script>
-  <script src="aes-cbc.js"></script>
-  <script src="aes-ctr.js"></script>
-  <script src="aes-gcm.js"></script>
 </html>
diff --git a/web-crypto/export-key/index.html b/web-crypto/export-key/index.html
index 21d0fa88..9d0b65af 100644
--- a/web-crypto/export-key/index.html
+++ b/web-crypto/export-key/index.html
@@ -43,9 +43,10 @@ <h1>Web Crypto: exportKey</h1>
 
     </main>
 
-  </body>
+
   <script src="raw.js"></script>
   <script src="pkcs8.js"></script>
   <script src="spki.js"></script>
   <script src="jwk.js"></script>
+</body>
 </html>
diff --git a/web-crypto/import-key/index.html b/web-crypto/import-key/index.html
index 209d39e7..b71f0e06 100644
--- a/web-crypto/import-key/index.html
+++ b/web-crypto/import-key/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Web Crypto API example</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>
@@ -11,37 +11,63 @@
       <h1>Web Crypto: importKey</h1>
 
       <section class="description">
-        <p>This page shows the use of the <code>importKey()</code> function of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a>. It contains four separate examples, one for each import format supported:</p>
+        <p>
+          This page shows the use of the <code>importKey()</code> function of
+          the
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API"
+            >Web Crypto API</a
+          >. It contains four separate examples, one for each import format
+          supported:
+        </p>
         <ul>
           <li>Raw</li>
           <li>PKCS #8</li>
           <li>SubjectPublicKeyInfo</li>
           <li>JSON Web Key</li>
         </ul>
-        <p>Each example has the same structure: you get a message a button labeled "Import Key".</p>
-        <p>If you click "Import Key" then the example imports a particular key:</p>
+        <p>
+          Each example has the same structure: you get a message a button
+          labeled "Import Key".
+        </p>
+        <p>
+          If you click "Import Key" then the example imports a particular key:
+        </p>
         <ul>
           <li>For "Raw", an AES encryption key.</li>
           <li>For "PKCS #8", an RSA private signing key.</li>
           <li>For "SubjectPublicKeyInfo", an RSA public encryption key.</li>
           <li>For "JSON Web Key", an EC private signing key.</li>
         </ul>
-        <p>A new button is then displayed, labeled "Sign" or "Encrypt", depending on the key that was imported. You can click it to use the imported key to perform the appropriate operation and display the result.</p>
+        <p>
+          A new button is then displayed, labeled "Sign" or "Encrypt", depending
+          on the key that was imported. You can click it to use the imported key
+          to perform the appropriate operation and display the result.
+        </p>
       </section>
 
       <section class="examples">
-
         <section class="import-key raw">
           <h2 class="import-key-heading">Raw</h2>
           <section class="import-key-controls">
             <div class="message-control">
               <label for="raw-message">Enter a message to encrypt:</label>
-              <input type="text" id="raw-message" name="message" size="25"
-                     value="The owl hoots at midnight">
+              <input
+                type="text"
+                id="raw-message"
+                name="message"
+                size="25"
+                value="The owl hoots at midnight" />
+            </div>
+            <div class="ciphertext">
+              Ciphertext:<span class="ciphertext-value"></span>
             </div>
-            <div class="ciphertext">Ciphertext:<span class="ciphertext-value"></span></div>
-            <input class="import-key-button" type="button" value="Import Key">
-            <input class="encrypt-button hidden" type="button" value="Encrypt" disabled>
+            <input class="import-key-button" type="button" value="Import Key" />
+            <input
+              class="encrypt-button hidden"
+              type="button"
+              value="Encrypt"
+              disabled />
           </section>
         </section>
 
@@ -50,12 +76,22 @@ <h2 class="import-key-heading">PKCS #8</h2>
           <section class="import-key-controls">
             <div class="message-control">
               <label for="pkcs8-message">Enter a message to sign:</label>
-              <input type="text" id="pkcs8-message" name="message" size="25"
-                     value="The tiger prowls at dawn">
+              <input
+                type="text"
+                id="pkcs8-message"
+                name="message"
+                size="25"
+                value="The tiger prowls at dawn" />
+            </div>
+            <div class="signature">
+              Signature:<span class="signature-value"></span>
             </div>
-            <div class="signature">Signature:<span class="signature-value"></span></div>
-            <input class="import-key-button" type="button" value="Import Key">
-            <input class="sign-button hidden" type="button" value="Sign" disabled>
+            <input class="import-key-button" type="button" value="Import Key" />
+            <input
+              class="sign-button hidden"
+              type="button"
+              value="Sign"
+              disabled />
           </section>
         </section>
 
@@ -64,12 +100,22 @@ <h2 class="import-key-heading">SubjectPublicKeyInfo</h2>
           <section class="import-key-controls">
             <div class="message-control">
               <label for="spki-message">Enter a message to encrypt:</label>
-              <input type="text" id="spki-message" name="message" size="25"
-                     value="The eagle flies at twilight">
+              <input
+                type="text"
+                id="spki-message"
+                name="message"
+                size="25"
+                value="The eagle flies at twilight" />
             </div>
-            <div class="ciphertext">Ciphertext:<span class="ciphertext-value"></span></div>
-            <input class="import-key-button" type="button" value="Import Key">
-            <input class="encrypt-button hidden" type="button" value="Encrypt" disabled>
+            <div class="ciphertext">
+              Ciphertext:<span class="ciphertext-value"></span>
+            </div>
+            <input class="import-key-button" type="button" value="Import Key" />
+            <input
+              class="encrypt-button hidden"
+              type="button"
+              value="Encrypt"
+              disabled />
           </section>
         </section>
 
@@ -78,21 +124,30 @@ <h2 class="import-key-heading">JSON Web Key</h2>
           <section class="import-key-controls">
             <div class="message-control">
               <label for="jwk-message">Enter a message to sign:</label>
-              <input type="text" id="jwk-message" name="message" size="25"
-                     value="The bunny hops at teatime">
+              <input
+                type="text"
+                id="jwk-message"
+                name="message"
+                size="25"
+                value="The bunny hops at teatime" />
+            </div>
+            <div class="signature">
+              Signature:<span class="signature-value"></span>
             </div>
-            <div class="signature">Signature:<span class="signature-value"></span></div>
-            <input class="import-key-button" type="button" value="Import Key">
-            <input class="sign-button hidden" type="button" value="Sign" disabled>
+            <input class="import-key-button" type="button" value="Import Key" />
+            <input
+              class="sign-button hidden"
+              type="button"
+              value="Sign"
+              disabled />
           </section>
         </section>
-
       </section>
     </main>
 
+    <script src="raw.js"></script>
+    <script src="pkcs8.js"></script>
+    <script src="spki.js"></script>
+    <script src="jwk.js"></script>
   </body>
-  <script src="raw.js"></script>
-  <script src="pkcs8.js"></script>
-  <script src="spki.js"></script>
-  <script src="jwk.js"></script>
 </html>
diff --git a/web-crypto/sign-verify/index.html b/web-crypto/sign-verify/index.html
index a184a484..5df26c5e 100644
--- a/web-crypto/sign-verify/index.html
+++ b/web-crypto/sign-verify/index.html
@@ -88,8 +88,7 @@ <h2 class="sign-verify-heading">RSASSA-PKCS1-v1_5</h2>
                 id="rsassa-pkcs1-message"
                 name="message"
                 size="25"
-                value="The owl hoots at midnight"
-              />
+                value="The owl hoots at midnight" />
             </div>
             <div class="signature">
               Signature:<span class="signature-value"></span>
@@ -109,8 +108,7 @@ <h2 class="sign-verify-heading">RSA-PSS</h2>
                 id="rsa-pss-message"
                 name="message"
                 size="25"
-                value="The tiger prowls at dawn"
-              />
+                value="The tiger prowls at dawn" />
             </div>
             <div class="signature">
               Signature:<span class="signature-value"></span>
@@ -130,8 +128,7 @@ <h2 class="sign-verify-heading">ECDSA</h2>
                 id="ecdsa-message"
                 name="message"
                 size="25"
-                value="The eagle flies at twilight"
-              />
+                value="The eagle flies at twilight" />
             </div>
             <div class="signature">
               Signature:<span class="signature-value"></span>
@@ -151,8 +148,7 @@ <h2 class="sign-verify-heading">HMAC</h2>
                 id="hmac-message"
                 name="message"
                 size="25"
-                value="The bunny hops at teatime"
-              />
+                value="The bunny hops at teatime" />
             </div>
             <div class="signature">
               Signature:<span class="signature-value"></span>
@@ -172,8 +168,7 @@ <h2 class="sign-verify-heading">Ed25519</h2>
                 id="ed25519-message"
                 name="message"
                 size="25"
-                value="The lion roars near dawn"
-              />
+                value="The lion roars near dawn" />
             </div>
             <div class="signature">
               Signature:<span class="signature-value"></span>
@@ -184,10 +179,11 @@ <h2 class="sign-verify-heading">Ed25519</h2>
         </section>
       </section>
     </main>
+
+    <script src="rsassa-pkcs1.js"></script>
+    <script src="rsa-pss.js"></script>
+    <script src="ecdsa.js"></script>
+    <script src="hmac.js"></script>
+    <script src="ed25519.js"></script>
   </body>
-  <script src="rsassa-pkcs1.js"></script>
-  <script src="rsa-pss.js"></script>
-  <script src="ecdsa.js"></script>
-  <script src="hmac.js"></script>
-  <script src="ed25519.js"></script>
 </html>
diff --git a/web-crypto/unwrap-key/index.html b/web-crypto/unwrap-key/index.html
index 4bbbe9ba..28bfe6d0 100644
--- a/web-crypto/unwrap-key/index.html
+++ b/web-crypto/unwrap-key/index.html
@@ -54,7 +54,8 @@ <h2 class="unwrap-key-heading">PKCS #8/RSA-PSS/AES-GCM</h2>
       </section>
     </main>
 
-  </body>
+
   <script src="raw.js"></script>
   <script src="pkcs8.js"></script>
+</body>
 </html>
diff --git a/web-crypto/wrap-key/index.html b/web-crypto/wrap-key/index.html
index f16d25a2..b84fb8a5 100644
--- a/web-crypto/wrap-key/index.html
+++ b/web-crypto/wrap-key/index.html
@@ -44,9 +44,10 @@ <h1>Web Crypto: wrapKey</h1>
 
     </main>
 
-  </body>
+
   <script src="raw.js"></script>
   <script src="pkcs8.js"></script>
   <script src="spki.js"></script>
   <script src="jwk.js"></script>
+</body>
 </html>
diff --git a/web-storage/event.html b/web-storage/event.html
index 253bf586..24eb7e8c 100644
--- a/web-storage/event.html
+++ b/web-storage/event.html
@@ -1,31 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
 
     <title>Web Storage API storage event output</title>
 
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>
-  <div class="wrapper">
-    <h1>Event output</h1>
+    <div class="wrapper">
+      <h1>Event output</h1>
 
-    <ul>
-      <li>Key: <span class="my-key"></span></li>
-      <li>Old value: <span class="my-old"></span></li>
-      <li>New value: <span class="my-new"></span></li>
-      <li>URL: <span class="my-url"></span></li>
-      <li>Storage area: <span class="my-storage"></span></li>
-    </ul>
+      <ul>
+        <li>Key: <span class="my-key"></span></li>
+        <li>Old value: <span class="my-old"></span></li>
+        <li>New value: <span class="my-new"></span></li>
+        <li>URL: <span class="my-url"></span></li>
+        <li>Storage area: <span class="my-storage"></span></li>
+      </ul>
 
-    <p>Go back to the <a href="index.html">main example page</a>.</p>
-
-
-  </div>
+      <p>Go back to the <a href="index.html">main example page</a>.</p>
+    </div>
+    <script src="event.js"></script>
   </body>
-  <script src="event.js"></script>
 </html>
diff --git a/web-storage/index.html b/web-storage/index.html
index 9733dbfb..005da490 100644
--- a/web-storage/index.html
+++ b/web-storage/index.html
@@ -1,48 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width" />
 
     <title>Web Storage API example</title>
 
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>
-  <div class="wrapper">
-    <h1>Web storage</h1>
+    <div class="wrapper">
+      <h1>Web storage</h1>
 
-    <p>This example is designed to demonstrate usage of the <a href="https://html.spec.whatwg.org/multipage/webstorage.html#webstorage">W3C Web Storage API</a>. It should work as far back as IE8. Choose custom background colours, logos and fonts from the below drop down menus, then try closing and reopening the page — you will find that your choices are remembered, as they are stored using Web Storage. You can also visit the <a href="event.html" target="_blank">storage event output</a> (opens in new tab). Open this, change some values in the index page, then look at the events page — you'll see the storage changes reported.</p>
+      <p>
+        This example is designed to demonstrate usage of the
+        <a
+          href="https://html.spec.whatwg.org/multipage/webstorage.html#webstorage"
+          >W3C Web Storage API</a
+        >. It should work as far back as IE8. Choose custom background colours,
+        logos and fonts from the below drop down menus, then try closing and
+        reopening the page — you will find that your choices are remembered, as
+        they are stored using Web Storage. You can also visit the
+        <a href="event.html" target="_blank">storage event output</a> (opens in
+        new tab). Open this, change some values in the index page, then look at
+        the events page — you'll see the storage changes reported.
+      </p>
 
-    <form>
-      <div>
-        <label for="bgcolor">Choose background color:</label>
-	    <input class="color" id="bgcolor" value="FF0000">
-      </div>
-      <div>
-        <label for="font">Choose font style:</label>
-        <select id="font">
-        	<option value="sans-serif" selected>Sans-serif</option>
-        	<option value="serif">Serif</option>
-        	<option value="monospace">Monospace</option>
-        </select>
-      </div>
-      <div>
-        <label for="image">Choose image:</label>
-        <select id="image">
-        	<option value="images/firefoxos.png" selected>Firefox</option>
-        	<option value="images/crocodile.png">Crocodile</option>
-        	<option value="images/tortoise.png">Tortoise</option>
-        </select>
-      </div>
-    </form>
+      <form>
+        <div>
+          <label for="bgcolor">Choose background color:</label>
+          <input class="color" id="bgcolor" value="FF0000" />
+        </div>
+        <div>
+          <label for="font">Choose font style:</label>
+          <select id="font">
+            <option value="sans-serif" selected>Sans-serif</option>
+            <option value="serif">Serif</option>
+            <option value="monospace">Monospace</option>
+          </select>
+        </div>
+        <div>
+          <label for="image">Choose image:</label>
+          <select id="image">
+            <option value="images/firefoxos.png" selected>Firefox</option>
+            <option value="images/crocodile.png">Crocodile</option>
+            <option value="images/tortoise.png">Tortoise</option>
+          </select>
+        </div>
+      </form>
 
-    <footer></footer>
-    <img src="images/firefoxos.png">
-  </div>
+      <footer></footer>
+      <img src="images/firefoxos.png" />
+    </div>
+
+    <script src="jscolor/jscolor.js"></script>
+    <script src="main.js"></script>
   </body>
-  <script src="jscolor/jscolor.js"></script>
-  <script src="main.js"></script>
 </html>

From 37db15b46d1b14da43a563d09a70b2301fa9d93f Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Tue, 16 Apr 2024 16:42:48 +0200
Subject: [PATCH 17/21] fix: tidy up fetch init with request example (#270)

---
 fetch/fetch-request-with-init/index.html | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/fetch/fetch-request-with-init/index.html b/fetch/fetch-request-with-init/index.html
index 3074db60..85e1ac69 100644
--- a/fetch/fetch-request-with-init/index.html
+++ b/fetch/fetch-request-with-init/index.html
@@ -17,18 +17,19 @@ <h1>Fetch Request with init example</h1>
     <script>
       const myImage = document.querySelector("img");
 
-      const myHeaders = new Headers();
+      const reqHeaders = new Headers();
 
-      const myOptions = {
-        method: "GET",
-        headers: myHeaders,
-        mode: "cors",
-        cache: "default",
+      // a cached response is okay unless it's more than a week old
+      reqHeaders.set("Cache-Control", "max-age=604800");
+
+      const options = {
+        headers: reqHeaders,
       };
 
-      const myRequest = new Request("flowers.jpg", myOptions);
+      // pass init as an "options" object with our headers
+      const req = new Request("flowers.jpg", options);
 
-      fetch(myRequest)
+      fetch(req)
         .then((response) => {
           if (!response.ok) {
             throw new Error(`HTTP error, status = ${response.status}`);

From 21320eaacc5f902906f3dc8e3d8d7a75fc1a59aa Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Tue, 23 Apr 2024 16:14:13 +0200
Subject: [PATCH 18/21] chore: remove example with no content references (#271)

* chore: remove example with no content references

* chore: remove example with no content references
---
 fetch/README.md                               |   1 -
 .../fetch-with-init-then-request/flowers.jpg  | Bin 60615 -> 0 bytes
 fetch/fetch-with-init-then-request/index.html |  50 ------------------
 3 files changed, 51 deletions(-)
 delete mode 100644 fetch/fetch-with-init-then-request/flowers.jpg
 delete mode 100644 fetch/fetch-with-init-then-request/index.html

diff --git a/fetch/README.md b/fetch/README.md
index 041b8de9..6aad3a0f 100644
--- a/fetch/README.md
+++ b/fetch/README.md
@@ -12,5 +12,4 @@ See below for links to the live versions of each example:
 - [Basic Fetch example with returned Response properties](https://mdn.github.io/dom-examples/fetch/fetch-response/)
 - [Fetch cloned Response example](https://mdn.github.io/dom-examples/fetch/fetch-response-clone/)
 - [Fetch text example](https://mdn.github.io/dom-examples/fetch/fetch-text/)
-- [Fetch example with Request object and Init object](https://mdn.github.io/dom-examples/fetch/fetch-with-init-then-request/)
 - [object-fit gallery with fetched images](https://mdn.github.io/dom-examples/fetch/object-fit-gallery-fetch/)
diff --git a/fetch/fetch-with-init-then-request/flowers.jpg b/fetch/fetch-with-init-then-request/flowers.jpg
deleted file mode 100644
index 17b99732d958ce79adc5a6078290464ec2b4972f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 60615
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
W)c2jy>gwX(=5=}M1AMS{=Kld|$QtSZ

diff --git a/fetch/fetch-with-init-then-request/index.html b/fetch/fetch-with-init-then-request/index.html
deleted file mode 100644
index 43bdbbee..00000000
--- a/fetch/fetch-with-init-then-request/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width" />
-
-    <title>Fetch with init then Request example</title>
-
-    <link rel="stylesheet" href="" />
-  </head>
-
-  <body>
-    <h1>Fetch with init then Request example</h1>
-    <img src="" />
-
-  <script>
-    const myImage = document.querySelector("img");
-
-    const myHeaders = new Headers();
-    myHeaders.append("Content-Type", "image/jpeg");
-
-    const myOptions = {
-      method: "GET",
-      headers: myHeaders,
-      mode: "cors",
-      cache: "default",
-    };
-
-    const myRequest = new Request("flowers.jpg");
-
-    fetch(myRequest, myOptions)
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error, status = ${response.status}`);
-        }
-        return response.blob();
-      })
-      .then((blob) => {
-        const objectURL = URL.createObjectURL(blob);
-        myImage.src = objectURL;
-      })
-      .catch((error) => {
-        var p = document.createElement("p");
-        p.appendChild(document.createTextNode(`Error: ${error.message}`));
-        document.body.insertBefore(p, myImage);
-      });
-  </script>
-  </body>
-</html>

From 8a80165b9f76a17302f891bfe90695c1bdfeb769 Mon Sep 17 00:00:00 2001
From: Josh Farrant <joshfarrant@github.com>
Date: Wed, 8 May 2024 11:52:02 +0100
Subject: [PATCH 19/21] Add early return to document picture-in-picture example
 to match docs (#274)

* format file

* add early return to match docs
---
 document-picture-in-picture/main.js | 138 ++++++++++++++--------------
 1 file changed, 69 insertions(+), 69 deletions(-)

diff --git a/document-picture-in-picture/main.js b/document-picture-in-picture/main.js
index d0b8635a..29527dff 100644
--- a/document-picture-in-picture/main.js
+++ b/document-picture-in-picture/main.js
@@ -1,84 +1,84 @@
-
 const videoPlayer = document.getElementById("player");
 const playerContainer = document.getElementById("container");
 
 const inPipMessage = document.getElementById("in-pip-message");
 
 if ("documentPictureInPicture" in window) {
+  document.querySelector(".no-picture-in-picture").remove();
 
-	document.querySelector(".no-picture-in-picture").remove();
-
-	const togglePipButton = document.createElement("button");
-	togglePipButton.textContent = "Toggle Picture-in-Picture";
-	togglePipButton.addEventListener("click", togglePictureInPicture, false);
+  const togglePipButton = document.createElement("button");
+  togglePipButton.textContent = "Toggle Picture-in-Picture";
+  togglePipButton.addEventListener("click", togglePictureInPicture, false);
 
-	document.getElementById("controlbar").appendChild(togglePipButton);
+  document.getElementById("controlbar").appendChild(togglePipButton);
 }
 
 async function togglePictureInPicture() {
-	// Returns null if no pip window is currently open
-	if (!window.documentPictureInPicture.window) {
-
-		// Open a Picture-in-Picture window.
-		const pipWindow = await window.documentPictureInPicture.requestWindow({
-			width: videoPlayer.clientWidth,
-			height: videoPlayer.clientHeight + 50,
-		});
-
-		// Add pagehide listener to handle the case of the pip window being closed using the browser X button
-		pipWindow.addEventListener("pagehide", (event) => {
-			inPipMessage.style.display = "none";
-			playerContainer.append(videoPlayer);
-		});
-
-		// Copy style sheets over from the initial document
-		// so that the player looks the same.
-		[...document.styleSheets].forEach((styleSheet) => {
-			try {
-				const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');
-				const style = document.createElement('style');
-
-				style.textContent = cssRules;
-				pipWindow.document.head.appendChild(style);
-			} catch (e) {
-				const link = document.createElement('link');
-
-				link.rel = 'stylesheet';
-				link.type = styleSheet.type;
-				link.media = styleSheet.media;
-				link.href = styleSheet.href;
-				pipWindow.document.head.appendChild(link);
-			}
-		})
-
-		// Move the player to the Picture-in-Picture window.
-		pipWindow.document.body.append(videoPlayer);
-
-		// Display a message to say it has been moved
-		inPipMessage.style.display = "block";
-	} else {
-		inPipMessage.style.display = "none";
-		playerContainer.append(videoPlayer);
-		window.documentPictureInPicture.window.close();
-	}
+  // Early return if there's already a Picture-in-Picture window open
+  if (window.documentPictureInPicture.window) {
+    inPipMessage.style.display = "none";
+    playerContainer.append(videoPlayer);
+    window.documentPictureInPicture.window.close();
+    return;
+  }
+
+  // Open a Picture-in-Picture window.
+  const pipWindow = await window.documentPictureInPicture.requestWindow({
+    width: videoPlayer.clientWidth,
+    height: videoPlayer.clientHeight + 50,
+  });
+
+  // Add pagehide listener to handle the case of the pip window being closed using the browser X button
+  pipWindow.addEventListener("pagehide", (event) => {
+    inPipMessage.style.display = "none";
+    playerContainer.append(videoPlayer);
+  });
+
+  // Copy style sheets over from the initial document
+  // so that the player looks the same.
+  [...document.styleSheets].forEach((styleSheet) => {
+    try {
+      const cssRules = [...styleSheet.cssRules]
+        .map((rule) => rule.cssText)
+        .join("");
+      const style = document.createElement("style");
+
+      style.textContent = cssRules;
+      pipWindow.document.head.appendChild(style);
+    } catch (e) {
+      const link = document.createElement("link");
+
+      link.rel = "stylesheet";
+      link.type = styleSheet.type;
+      link.media = styleSheet.media;
+      link.href = styleSheet.href;
+      pipWindow.document.head.appendChild(link);
+    }
+  });
+
+  // Move the player to the Picture-in-Picture window.
+  pipWindow.document.body.append(videoPlayer);
+
+  // Display a message to say it has been moved
+  inPipMessage.style.display = "block";
 }
 
 documentPictureInPicture.addEventListener("enter", (event) => {
-	const pipWindow = event.window;
-	console.log("Video player has entered the pip window");
-
-	const pipMuteButton = pipWindow.document.createElement("button");
-	pipMuteButton.textContent = "Mute";
-	pipMuteButton.addEventListener("click", () => {
-		const pipVideo = pipWindow.document.querySelector("#video");
-		if (!pipVideo.muted) {
-			pipVideo.muted = true;
-			pipMuteButton.textContent = "Unmute";
-		} else {
-			pipVideo.muted = false;
-			pipMuteButton.textContent = "Mute";
-		}
-	});
-
-	pipWindow.document.body.append(pipMuteButton);
+  const pipWindow = event.window;
+  console.log("Video player has entered the pip window");
+
+  const pipMuteButton = pipWindow.document.createElement("button");
+  pipMuteButton.textContent = "Mute";
+  pipMuteButton.addEventListener("click", () => {
+    const pipVideo = pipWindow.document.querySelector("#video");
+    if (!pipVideo.muted) {
+      pipVideo.muted = true;
+      pipMuteButton.textContent = "Unmute";
+    } else {
+      pipVideo.muted = false;
+      pipMuteButton.textContent = "Mute";
+    }
+  });
+
+  pipWindow.document.body.append(pipMuteButton);
 });

From 25ee749bdc123566c8df18b1c2cd0c2d6de439d7 Mon Sep 17 00:00:00 2001
From: polikm5 <864423284@qq.com>
Date: Thu, 9 May 2024 01:02:39 +0800
Subject: [PATCH 20/21] MessageChannel-postMessage-error-handle (#269)

---
 channel-messaging-multimessage/page2.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/channel-messaging-multimessage/page2.html b/channel-messaging-multimessage/page2.html
index fdd61e15..5ed9a6f9 100644
--- a/channel-messaging-multimessage/page2.html
+++ b/channel-messaging-multimessage/page2.html
@@ -24,8 +24,10 @@
 
       // Setup the transfered port
       function initPort(e) {
-        port2 = e.ports[0];
-        port2.onmessage = onMessage;
+        if (e.ports[0]) {
+          port2 = e.ports[0];
+          port2.onmessage = onMessage;
+        }
       }
 
       // Handle messages received on port2

From 36eba9f807f24dab86745e7b1634c97865ec2594 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Wed, 8 May 2024 19:25:21 +0200
Subject: [PATCH 21/21] fix: set innerText instead of innerHTML (#264)

---
 channel-messaging-basic/index.html | 23 +++++++++++++++--------
 channel-messaging-basic/page2.html | 16 +++++++++++-----
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/channel-messaging-basic/index.html b/channel-messaging-basic/index.html
index 691f13d1..70d6e29e 100644
--- a/channel-messaging-basic/index.html
+++ b/channel-messaging-basic/index.html
@@ -5,15 +5,20 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width" />
     <title>Channel messaging demo</title>
+    <style>
+      iframe {
+        border-radius: 1em;
+      }
+    </style>
   </head>
   <body>
     <h1>Channel messaging demo</h1>
-    <p class="output">My body</p>
+    <p class="output">Index.html para (I will be overwritten)</p>
     <iframe src="page2.html" width="480" height="320"></iframe>
     <script>
-     const channel = new MessageChannel();
-     const output = document.querySelector('.output');
-     const iframe = document.querySelector('iframe');
+      const channel = new MessageChannel();
+      const output = document.querySelector(".output");
+      const iframe = document.querySelector("iframe");
 
       // Wait for the iframe to load
       iframe.addEventListener("load", onLoad);
@@ -22,14 +27,16 @@ <h1>Channel messaging demo</h1>
         // Listen for messages on port1
         channel.port1.onmessage = onMessage;
         // Transfer port2 to the iframe
-        iframe.contentWindow.postMessage("Hello from the main page!", "*", [
-          channel.port2,
-        ]);
+        iframe.contentWindow.postMessage(
+          "A message from the index.html page!",
+          "*",
+          [channel.port2]
+        );
       }
 
       // Handle messages received on port1
       function onMessage(e) {
-        output.innerHTML = e.data;
+        output.innerText = e.data;
       }
     </script>
   </body>
diff --git a/channel-messaging-basic/page2.html b/channel-messaging-basic/page2.html
index 3929fec5..85c85690 100644
--- a/channel-messaging-basic/page2.html
+++ b/channel-messaging-basic/page2.html
@@ -4,19 +4,25 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width" />
-    <title>My page title</title>
+    <title>Page 2</title>
+    <style>
+      body {
+        background-color: aliceblue;
+        font-family: monospace;
+      }
+    </style>
   </head>
   <body>
-    <p class="output">iFrame body</p>
+    <p class="output">page2.html (iframe body)</p>
     <script>
       const output = document.querySelector(".output");
 
       window.addEventListener("message", onMessage);
 
       function onMessage(e) {
-        output.innerHTML = e.data;
-        // Use the transfered port to post a message back to the main frame
-        e.ports[0].postMessage("Message back from the IFrame");
+        output.innerText = e.data;
+        // Use the transferred port to post a message to the main frame
+        e.ports[0].postMessage("A message from the iframe in page2.html");
       }
     </script>
   </body>
