mdn · Josh-Cena · Oct 1, 2025 · Sep 30, 2025
@@ -242,6 +242,7 @@ foveation
 fragmentainer
 fragmentainers
 framebuffers
+framebusting
 frontmost
 Fullband
 fullscreened

@@ -133,6 +133,12 @@ function buildDeleteButtonEl(id) {
 
 The interesting part to note is that every time we update the state, we need to manually call `renderTodoList` so our state gets synced to the screen. The code that will render our items on the page might read something like this:
 
+```js hidden
+const todoFormEl = document.querySelector("#todo-form");
+const todoInputEl = document.querySelector("#todo-input");
+const todoListEl = document.querySelector("#todo-list");
+```
+
 ```js
 function renderTodoList() {
   const frag = document.createDocumentFragment();
@@ -216,10 +222,6 @@ label + input[type="text"] {
 ```
 
 ```js hidden
-const todoFormEl = document.querySelector("#todo-form");
-const todoInputEl = document.querySelector("#todo-input");
-const todoListEl = document.querySelector("#todo-list");
-
 function generateUniqueId(prefix = "prefix") {
   return `${prefix}-${Math.floor(Math.random() * Date.now())}`;
 }

@@ -597,6 +597,8 @@ import Form from "./components/Form";
 import FilterButton from "./components/FilterButton";
 
 function App(props) {
+  const [tasks, setTasks] = useState(props.tasks);
+
   function addTask(name) {
     const newTask = { id: `todo-${nanoid()}`, name, completed: false };
     setTasks([...tasks, newTask]);
@@ -619,8 +621,6 @@ function App(props) {
     const remainingTasks = tasks.filter((task) => id !== task.id);
     setTasks(remainingTasks);
   }
-
-  const [tasks, setTasks] = useState(props.tasks);
   const taskList = tasks?.map((task) => (
     <Todo
       id={task.id}

@@ -79,9 +79,8 @@ h1 {
 }
 
 button {
-  border: 0;
   background: rgb(150 150 150 / 0.6);
-  border: 1px solid #999;
+  border: 1px solid #999999;
   position: absolute;
   cursor: pointer;
   top: 2px;

@@ -41,7 +41,7 @@ Writing HTML is fine, but what if something goes wrong, and you can't work out w
 
 ## Debugging isn't scary
 
-When writing code of some kind, everything is fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. For example, the following shows an error reported when trying to {{glossary("compile")}} a simple program written in the [Rust](https://www.rust-lang.org/) language.
+When writing code of some kind, everything is fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. For example, the following shows an error reported when trying to {{glossary("compile")}} a simple program written in the [Rust](https://rust-lang.org/) language.
 
 ![A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.](error-message.png)
 

@@ -95,6 +95,8 @@ function randomRGB() {
   return `rgb(${random(0, 255)} ${random(0, 255)} ${random(0, 255)})`;
 }
 
+const balls = [];
+
 class Ball {
   constructor(x, y, velX, velY, color, size) {
     this.x = x;
@@ -148,8 +150,6 @@ class Ball {
   }
 }
 
-const balls = [];
-
 while (balls.length < 25) {
   const size = random(10, 20);
   const ball = new Ball(

@@ -271,6 +271,9 @@ rwd.addEventListener("click", mediaBackward);
 fwd.addEventListener("click", mediaForward);
 media.addEventListener("timeupdate", setTime);
 
+let intervalFwd;
+let intervalRwd;
+
 function playPauseMedia() {
   rwd.classList.remove("active");
   fwd.classList.remove("active");
@@ -295,9 +298,6 @@ function stopMedia() {
   play.setAttribute("data-icon", "P");
 }
 
-let intervalFwd;
-let intervalRwd;
-
 function mediaBackward() {
   clearInterval(intervalFwd);
   fwd.classList.remove("active");

@@ -157,12 +157,16 @@ Take the following example:
         <input type="checkbox" id="cabbage" name="cabbage" value="cabbage" />
       </li>
       <li>
-        <label for="cauli">Cauliflower</label>
-        <input type="checkbox" id="cauli" name="cauli" value="cauli" />
+        <label for="cauliflower">Cauliflower</label>
+        <input
+          type="checkbox"
+          id="cauliflower"
+          name="cauliflower"
+          value="cauliflower" />
       </li>
       <li>
-        <label for="broc">Broccoli</label>
-        <input type="checkbox" id="broc" name="broc" value="broc" />
+        <label for="broccoli">Broccoli</label>
+        <input type="checkbox" id="broccoli" name="broccoli" value="broccoli" />
       </li>
     </ul>
   </fieldset>

@@ -243,7 +243,7 @@ A lot of high profile companies use Express, including: Uber, Accenture, IBM, et
 
 ### Deno (JavaScript)
 
-[Deno](https://deno.com/) is a simple, modern, and secure [JavaScript](/en-US/docs/Web/JavaScript)/TypeScript runtime and framework built on top of Chrome V8 and [Rust](https://www.rust-lang.org/).
+[Deno](https://deno.com/) is a simple, modern, and secure [JavaScript](/en-US/docs/Web/JavaScript)/TypeScript runtime and framework built on top of Chrome V8 and [Rust](https://rust-lang.org/).
 
 Deno is powered by [Tokio](https://tokio.rs/) — a Rust-based asynchronous runtime which lets it serve web pages faster. It also has internal support for [WebAssembly](/en-US/docs/WebAssembly), which enables the compilation of binary code for use on the client-side. Deno aims to fill in some of the loop-holes in [Node.js](/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework) by providing a mechanism that naturally maintains better security.
 

@@ -319,7 +319,7 @@ img.onload = () => {
   draw(img);
 };
 
-const draw = (image) => {
+function draw(image) {
   const canvas = document.getElementById("canvas");
   const ctx = canvas.getContext("2d");
   ctx.drawImage(image, 0, 0);
@@ -350,7 +350,7 @@ const draw = (image) => {
     zoom(smoothCtx, x, y);
     zoom(pixelatedCtx, x, y);
   });
-};
+}
 ```
 
 {{embedlivesample("zooming_and_anti-aliasing", , 300)}}

@@ -91,6 +91,10 @@ The `drawDashedLine()` function created below makes the drawing of multiple
 dashed lines simple. It receives a pattern array as its only parameter.
 
 ```js
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+let y = 15;
+
 function drawDashedLine(pattern) {
   ctx.beginPath();
   ctx.setLineDash(pattern);
@@ -100,10 +104,6 @@ function drawDashedLine(pattern) {
   y += 20;
 }
 
-const canvas = document.getElementById("canvas");
-const ctx = canvas.getContext("2d");
-let y = 15;
-
 drawDashedLine([]);
 drawDashedLine([1, 1]);
 drawDashedLine([10, 10]);

@@ -46,7 +46,7 @@ The **`ariaNotify()`** method can be used to programmatically trigger a screen r
 
 Developers often work around the limitations of live regions using hidden DOM nodes with live regions set on them, which have their contents updated with the content to be announced. This is inefficient and error-prone, and `ariaNotify()` provides a way to avoid such issues.
 
-Some screen readers will read out multiple `ariaNotify()` announcments in order, but this cannot be guaranteed across all screen readers and platforms. Normally, only the most recent announcement is spoken. It is more reliable to combine multiple announcements into one.
+Some screen readers will read out multiple `ariaNotify()` announcements in order, but this cannot be guaranteed across all screen readers and platforms. Normally, only the most recent announcement is spoken. It is more reliable to combine multiple announcements into one.
 
 For example, the following calls:
 
@@ -76,7 +76,7 @@ However, `aria-live` announcements will take priority over `ariaNotify()` announ
 
 ### Language selection
 
-Screen readers choose an appropriate voice with which to read `ariaNotify()` announcements (in terms of accent, pronounciation, etc.) based on the language specified in the {{htmlelement("html")}} element's [`lang`](/en-US/docs/Web/HTML/Reference/Global_attributes/lang) attribute, or the user agent's default language if no `lang` attribute is set.
+Screen readers choose an appropriate voice with which to read `ariaNotify()` announcements (in terms of accent, pronunciation, etc.) based on the language specified in the {{htmlelement("html")}} element's [`lang`](/en-US/docs/Web/HTML/Reference/Global_attributes/lang) attribute, or the user agent's default language if no `lang` attribute is set.
 
 ### Permissions policy integration
 

@@ -46,7 +46,7 @@ The **`ariaNotify()`** method can be used to programmatically trigger a screen r
 
 Developers often work around the limitations of live regions using hidden DOM nodes with live regions set on them, which have their contents updated with the content to be announced. This is inefficient and error-prone, and `ariaNotify()` provides a way to avoid such issues.
 
-Some screen readers will read out multiple `ariaNotify()` announcments in order, but this cannot be guaranteed across all screen readers and platforms. Normally, only the most recent announcement is spoken. It is more reliable to combine multiple announcements into one.
+Some screen readers will read out multiple `ariaNotify()` announcements in order, but this cannot be guaranteed across all screen readers and platforms. Normally, only the most recent announcement is spoken. It is more reliable to combine multiple announcements into one.
 
 For example, the following calls:
 
@@ -113,7 +113,7 @@ body {
 
 ```js live-sample___basic-arianotify
 document.querySelector("button").addEventListener("click", () => {
-  document.querySelector("button").ariaNotify("You 'aint seen me, right?");
+  document.querySelector("button").ariaNotify("You ain't seen me, right?");
 });
 ```
 
@@ -123,7 +123,7 @@ The output is as follows:
 
 {{EmbedLiveSample("basic-arianotify", "100%", 60, , , , "aria-notify")}}
 
-Try activating a screen reader and then pressing the button. You should hear "You 'aint seen me, right?" spoken by the screen reader.
+Try activating a screen reader and then pressing the button. You should hear "You ain't seen me, right?" spoken by the screen reader.
 
 ## Specifications
 

@@ -40,7 +40,7 @@ When set to the `null` value, that `null` value is converted to the empty string
 `innerHTML` gets a serialization of the nested child DOM elements within the element, or sets HTML or XML that should be parsed to replace the DOM tree within the element.
 
 Note that some browsers serialize the `<` and `>` characters as `&lt;` and `&gt;` when they appear in attribute values (see [Browser compatibility](#browser_compatibility)).
-This is to prevent a potential security vulnerability ([mutation XSS](https://research.securitum.com/dompurify-bypass-using-mxss/)) in which an attacker can craft input that bypasses a [sanitization function](/en-US/docs/Web/Security/Attacks/XSS#sanitization), enabling a cross-site scripting (XSS) attack.
+This is to prevent a potential security vulnerability ([mutation XSS](https://www.securitum.com/mutation-xss-via-mathml-mutation-dompurify-2-0-17-bypass.html)) in which an attacker can craft input that bypasses a [sanitization function](/en-US/docs/Web/Security/Attacks/XSS#sanitization), enabling a cross-site scripting (XSS) attack.
 
 ### Shadow DOM considerations
 

@@ -61,6 +61,8 @@ div {
 ### JavaScript
 
 ```js
+const slider = document.getElementById("slider");
+
 function beginSliding(e) {
   slider.onpointermove = slide;
   slider.setPointerCapture(e.pointerId);
@@ -75,8 +77,6 @@ function slide(e) {
   slider.style.transform = `translate(${e.clientX - 70}px)`;
 }
 
-const slider = document.getElementById("slider");
-
 slider.onpointerdown = beginSliding;
 slider.onpointerup = stopSliding;
 ```

@@ -67,6 +67,8 @@ div {
 ### JavaScript
 
 ```js
+const slider = document.getElementById("slider");
+
 function beginSliding(e) {
   slider.onpointermove = slide;
   slider.setPointerCapture(e.pointerId);
@@ -81,8 +83,6 @@ function slide(e) {
   slider.style.transform = `translate(${e.clientX - 70}px)`;
 }
 
-const slider = document.getElementById("slider");
-
 slider.onpointerdown = beginSliding;
 slider.onpointerup = stopSliding;
 ```

@@ -92,6 +92,9 @@ div {
 ```
 
 ```js
+let scale = 1;
+const el = document.querySelector("div");
+
 function zoom(event) {
   event.preventDefault();
 
@@ -104,8 +107,6 @@ function zoom(event) {
   el.style.transform = `scale(${scale})`;
 }
 
-let scale = 1;
-const el = document.querySelector("div");
 el.onwheel = zoom;
 ```
 

@@ -755,6 +755,8 @@ The code adds a listener to the container's {{domxref("Element/wheel_event", "wh
 
 ```js
 const passive = document.querySelector("#passive");
+const container = document.querySelector("#container");
+
 passive.addEventListener("change", (event) => {
   container.removeEventListener("wheel", wheelHandler);
   container.addEventListener("wheel", wheelHandler, {
@@ -763,7 +765,6 @@ passive.addEventListener("change", (event) => {
   });
 });
 
-const container = document.querySelector("#container");
 container.addEventListener("wheel", wheelHandler, {
   passive: true,
   once: true,

@@ -95,16 +95,16 @@ exampleButton.addEventListener("click", (e) => {
   output.innerHTML = `validation message: ${exampleButton.validationMessage} <br/> custom error: ${exampleButton.validationMessage}`;
 });
 
-const breakOrFixButton = () => {
+function breakOrFixButton() {
   const state = toggleButton();
   if (state === "error") {
     exampleButton.setCustomValidity("This is a custom error message");
   } else {
     exampleButton.setCustomValidity("");
   }
-};
+}
 
-const toggleButton = () => {
+function toggleButton() {
   if (exampleButton.value === "error") {
     exampleButton.value = "fixed";
     exampleButton.innerHTML = "No error";
@@ -113,7 +113,7 @@ const toggleButton = () => {
     exampleButton.innerHTML = "Custom error";
   }
   return exampleButton.value;
-};
+}
 ```
 
 #### Results

@@ -42,12 +42,13 @@ This example uses {{domxref("EventTarget.addEventListener()")}} to listen for fo
 ### JavaScript
 
 ```js
+const form = document.getElementById("form");
+const log = document.getElementById("log");
+
 function logReset(event) {
   log.textContent = `Form reset! Timestamp: ${event.timeStamp}`;
 }
 
-const form = document.getElementById("form");
-const log = document.getElementById("log");
 form.addEventListener("reset", logReset);
 ```
 

@@ -64,13 +64,14 @@ This example uses {{domxref("EventTarget.addEventListener()")}} to listen for fo
 ### JavaScript
 
 ```js
+const form = document.getElementById("form");
+const log = document.getElementById("log");
+
 function logSubmit(event) {
   log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;
   event.preventDefault();
 }
 
-const form = document.getElementById("form");
-const log = document.getElementById("log");
 form.addEventListener("submit", logSubmit);
 ```
 

@@ -123,19 +123,19 @@ reportButton.addEventListener("click", () => {
   }
 });
 
-const validateAge = () => {
-  const validityState_object = ageInput.validity;
-  if (validityState_object.valueMissing) {
+function validateAge() {
+  const validityState = ageInput.validity;
+  if (validityState.valueMissing) {
     ageInput.setCustomValidity("Please set an age (required)");
-  } else if (ageInput.rangeUnderflow) {
+  } else if (validityState.rangeUnderflow) {
     ageInput.setCustomValidity("Your value is too low");
-  } else if (ageInput.rangeOverflow) {
+  } else if (validityState.rangeOverflow) {
     ageInput.setCustomValidity("Your value is too high");
   } else if (enableValidation) {
     // sets to empty string if valid AND enableValidation has been set to true
     ageInput.setCustomValidity("");
   }
-};
+}
 ```
 
 #### Results