Fix content issues (#41351)

Author: Josh-Cena

.vscode/dictionaries/terms-abbreviations.txt

@@ -242,6 +242,7 @@ foveation
 fragmentainer
 fragmentainers
 framebuffers
+framebusting
 frontmost
 Fullband
 fullscreened

files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md

@@ -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())}`;
 }

files/en-us/learn_web_development/core/frameworks_libraries/react_interactivity_events_state/index.md

@@ -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}

files/en-us/learn_web_development/core/scripting/image_gallery/index.md

@@ -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;

files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md

@@ -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)
 

files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md

@@ -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(

files/en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md

@@ -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");

files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md

@@ -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>

files/en-us/learn_web_development/extensions/server-side/first_steps/web_frameworks/index.md

@@ -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.
 

files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md

@@ -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)}}