[pull] main from mdn:main

.vscode/dictionaries/proper-names.txt

@@ -627,6 +627,7 @@ wisedog
 Wolenetz
 Wrox
 XAMPP
+Xandar
 Xavi
 Xiluodu
 Xiowan

.vscode/dictionaries/terms-abbreviations.txt

@@ -304,6 +304,7 @@ ICANN
 ICNS
 iconset
 idents
+IDOR
 IERS
 IMSC
 Indo-Pacific

files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md

@@ -5,7 +5,7 @@ page-type: guide
 sidebar: games
 ---
 
-Shaders use GLSL (OpenGL Shading Language), a special OpenGL Shading Language with syntax similar to C. GLSL is executed directly by the graphics pipeline. There are [several kinds of shaders](https://www.khronos.org/opengl/wiki/Shader), but two are commonly used to create graphics on the web: Vertex Shaders and Fragment (Pixel) Shaders. Vertex Shaders transform shape positions into 3D drawing coordinates. Fragment Shaders compute the renderings of a shape's colors and other attributes.
+Shaders use GLSL (OpenGL Shading Language), a special OpenGL Shading Language with syntax similar to C. GLSL is executed directly by the graphics pipeline. There are [several kinds of shaders](https://wikis.khronos.org/opengl/Shader), but two are commonly used to create graphics on the web: Vertex Shaders and Fragment (Pixel) Shaders. Vertex Shaders transform shape positions into 3D drawing coordinates. Fragment Shaders compute the renderings of a shape's colors and other attributes.
 
 GLSL is not as intuitive as JavaScript. GLSL is strongly typed and there is a lot of math involving vectors and matrices. It can get very complicated — very quickly. In this article we will make a simple code example that renders a cube. To speed up the background code we will be using the Three.js API.
 

files/en-us/learn_web_development/core/accessibility/html/index.md

@@ -21,7 +21,7 @@ A great deal of web content can be made accessible just by making sure the corre
       <td>
         <ul>
           <li>Use semantic HTML, aka "The right element for the right job", because the browser provides so many built-in accessibility hooks.</li>
-          <li>Accessible best practices such as alt text, good link best, form labels, and table row and column headings and scoping.</li>
+          <li>Accessible best practices such as alt text, good link text, form labels, and table row and column headings and scoping.</li>
           <li>Using simple plain language, steering clear of slang and abbreviations where possible, and providing definitions where it is not possible.</li>
           <li>The concept and practice of keyboard accessibility.</li>
           <li>The importance of source order.</li>

files/en-us/learn_web_development/core/css_layout/fundamental_layout_comprehension/index.md

@@ -45,61 +45,62 @@ We are going to get you to solve this challenge in your local development enviro
            <h1>An Exciting Blog Post</h1>
            <img src="images/square6.jpg" alt="placeholder" class="feature" />
            <p>
-             Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
-             welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
-             garlic.
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non
+             justo at erat egestas porttitor vel nec tortor. Mauris in molestie
+             ipsum. Vivamus diam elit, ornare ornare nisi vitae, ullamcorper
+             pharetra ligula. In vel lacus quis nulla sollicitudin pellentesque.
            </p>
 
            <p>
-             Turnip greens yarrow ricebean rutabaga endive cauliflower sea
-             lettuce kohlrabi amaranth water spinach avocado daikon napa
-             asparagus winter purslane kale. Celery potato scallion desert
-             raisin horseradish spinach carrot soko. Lotus root water spinach
-             fennel kombu maize bamboo shoot green bean swiss chard seakale
-             pumpkin onion chickpea gram corn pea. Brussels sprout coriander
-             water chestnut gourd swiss chard wakame kohlrabi beetroot carrot
-             watercress. Corn amaranth salsify bunya nuts nori azuki bean
-             chickweed potato bell pepper artichoke.
+             Nunc vitae eleifend odio, eget tincidunt sem. Cras et varius justo.
+             Nulla sollicitudin quis urna vitae efficitur. Pellentesque
+             hendrerit molestie arcu sit amet lacinia. Vivamus vulputate sed
+             purus at eleifend. Phasellus malesuada sem vel libero hendrerit,
+             sed finibus massa porta. Vestibulum luctus scelerisque libero, sit
+             amet sagittis eros sollicitudin ac. Class aptent taciti sociosqu ad
+             litora torquent per conubia nostra, per inceptos himenaeos.
            </p>
 
            <p>
-             Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
-             courgette tatsoi pea sprouts fava bean collard greens dandelion
-             okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
-             zucchini.
+             Phasellus tincidunt eros iaculis, feugiat mi at, eleifend mauris.
+             Quisque porttitor lacus eu massa condimentum, eu tincidunt nisl
+             consequat. Nunc egestas lacus dolor, id scelerisque ante tincidunt
+             ac. In risus massa, sodales ac enim eu, iaculis eleifend lorem.
            </p>
 
            <p>
-             Nori grape silver beet broccoli kombu beet greens fava bean potato
-             quandong celery. Bunya nuts black-eyed pea prairie turnip leek
-             lentil turnip greens parsnip. Sea lettuce lettuce water chestnut
-             eggplant winter purslane fennel azuki bean earthnut pea sierra
-             leone bologi leek soko chicory celtuce parsley jícama salsify.
+             Maecenas euismod condimentum enim, non rhoncus neque tempor ut.
+             Vestibulum eget nisi ornare, vehicula felis id, aliquet nibh. Donec
+             in mauris in diam aliquam commodo nec ac nunc. Aliquam nisl risus,
+             eleifend a iaculis id, tempor vel tortor. Nam ullamcorper dictum
+             tellus id rhoncus. Sed quis nulla in mi aliquam euismod nec eu
+             metus.
            </p>
 
            <p>
-             Celery quandong swiss chard chicory earthnut pea potato. Salsify
-             taro catsear garlic gram celery bitterleaf wattle seed collard
-             greens nori. Grape wattle seed kombu beetroot horseradish carrot
-             squash brussels sprout chard.
+             Nam orci nulla, convallis aliquet ante ut, lobortis hendrerit
+             risus. Nulla malesuada porta turpis in consequat. Duis suscipit
+             nulla a mauris pellentesque vehicula. Fusce euismod, mi malesuada
+             venenatis vestibulum, metus erat faucibus dui, vel rutrum turpis
+             nibh ut diam.
            </p>
 
            <p>
-             Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
-             welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
-             garlic.
+             Nam ornare et mauris eget tincidunt. Nam ornare et mauris eget
+             tincidunt. Donec et ipsum a orci elementum commodo et ut ex.
+             Vivamus porttitor sem in purus maximus, eu imperdiet felis
+             lobortis.
            </p>
 
            <p>
-             Turnip greens yarrow ricebean rutabaga endive cauliflower sea
-             lettuce kohlrabi amaranth water spinach avocado daikon napa
-             asparagus winter purslane kale. Celery potato scallion desert
-             raisin horseradish spinach carrot soko. Lotus root water spinach
-             fennel kombu maize bamboo shoot green bean swiss chard seakale
-             pumpkin onion chickpea gram corn pea. Brussels sprout coriander
-             water chestnut gourd swiss chard wakame kohlrabi beetroot carrot
-             watercress. Corn amaranth salsify bunya nuts nori azuki bean
-             chickweed potato bell pepper artichoke.
+             Pellentesque ullamcorper dolor ut ullamcorper convallis. Duis a
+             orci aliquet, pretium neque ut, auctor purus. Proin viverra
+             tincidunt nisi id fringilla. Maecenas interdum risus in ultricies
+             finibus. Vestibulum volutpat tincidunt libero, a feugiat leo
+             suscipit in. Sed eget lacus rutrum, semper ligula a, vestibulum
+             ipsum. Mauris in odio fringilla, accumsan eros blandit, mattis
+             odio. Ut viverra mollis augue, vitae ullamcorper velit hendrerit
+             eu. Curabitur mi lacus, condimentum in auctor sed, ornare sed leo.
            </p>
          </article>
 
@@ -126,8 +127,8 @@ We are going to get you to solve this challenge in your local development enviro
    }
 
    body {
-     background-color: #fff;
-     color: #333;
+     background-color: white;
+     color: #333333;
      margin: 0;
      font: 1.2em / 1.6 sans-serif;
    }
@@ -151,7 +152,7 @@ We are going to get you to solve this challenge in your local development enviro
    }
 
    nav {
-     background-color: #000;
+     background-color: black;
      padding: 0.5em;
    }
 
@@ -162,7 +163,7 @@ We are going to get you to solve this challenge in your local development enviro
    }
 
    nav a {
-     color: #fff;
+     color: white;
      text-decoration: none;
      padding: 0.5em 1em;
    }
@@ -223,8 +224,8 @@ The finished CSS looks like so:
 }
 
 body {
-  background-color: #fff;
-  color: #333;
+  background-color: white;
+  color: #333333;
   margin: 0;
   font: 1.2em / 1.6 sans-serif;
 }
@@ -252,7 +253,7 @@ img {
 }
 
 nav {
-  background-color: #000;
+  background-color: black;
   padding: 0.5em;
   /* 2. Make navigation bar stick to top of viewport */
   top: 0;
@@ -270,7 +271,7 @@ nav ul {
 }
 
 nav a {
-  color: #fff;
+  color: white;
   text-decoration: none;
   padding: 0.5em 1em;
 }

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

@@ -267,22 +267,23 @@ In the next section we will look at a more practical use of DOM APIs.
 
 ## Creating a dynamic shopping list
 
-In this exercise we want you to build a dynamic shopping list that allows you to add items using a form input and button. When you add an item and press the button:
+In this exercise, we want you to build a dynamic shopping list that allows you to add items using a form input and a button. After you type an item in the input field and click the button or press the <kbd>Enter</kbd> key, the following should happen:
 
 - The item should appear in the list.
 - Each item should be given a button that can be pressed to delete that item off the list.
-- The input should be emptied and focused, ready for you to enter another item.
+- Each item should have a button next to it that removes the item from the list when clicked.
+- The input fields should be cleared and focused, ready for the next item entry.
 
 The finished demo will look something like the following — try it out before you build it!
 
 ```html hidden live-sample___dynamic-shopping-list
 <h1>My shopping list</h1>
 
-<div>
+<form>
   <label for="item">Enter a new item:</label>
   <input type="text" name="item" id="item" />
   <button>Add item</button>
-</div>
+</form>
 
 <ul></ul>
 ```
@@ -303,7 +304,9 @@ const list = document.querySelector("ul");
 const input = document.querySelector("input");
 const button = document.querySelector("button");
 
-button.addEventListener("click", () => {
+button.addEventListener("click", (event) => {
+  event.preventDefault();
+
   const myItem = input.value;
   input.value = "";
 
@@ -329,17 +332,18 @@ button.addEventListener("click", () => {
 
 To complete the exercise, follow the steps below, and make sure that the list behaves as described above.
 
-1. To start with, download a copy of our [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a div with a label, input, and button, and an empty list and {{htmlelement("script")}} element. You'll be making all your additions inside the script.
+1. To begin, download a copy of our [shopping-list.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/shopping-list.html) starting file and make a copy of it somewhere. You'll see that it has some minimal CSS, a form with a label, input, and button, an empty list, and a {{htmlelement("script")}} element. You'll be making all your additions inside the script.
 2. Create three variables that hold references to the list ({{htmlelement("ul")}}), {{htmlelement("input")}}, and {{htmlelement("button")}} elements.
 3. Create a [function](/en-US/docs/Learn_web_development/Core/Scripting/Functions) that will run in response to the button being clicked.
-4. Inside the function body, start off by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input element in a variable.
-5. Next, empty the input element by setting its value to an empty string — `""`.
-6. Create three new elements — a list item ({{htmlelement('li')}}), {{htmlelement('span')}}, and {{htmlelement('button')}}, and store them in variables.
-7. Append the span and the button as children of the list item.
-8. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.
-9. Append the list item as a child of the list.
-10. Attach an event handler to the delete button so that, when clicked, it will delete the entire list item (`<li>...</li>`).
-11. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element ready for entering the next shopping list item.
+4. Inside the function body, start by calling [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). Since the input is wrapped in a form element, pressing the <kbd>Enter</kbd> key will trigger the form to submit. The call to `preventDefault()` will prevent the form from refreshing the page so a new item can be added to the list instead.
+5. Continue by storing the current [value](/en-US/docs/Web/API/HTMLInputElement/value) of the input in a variable.
+6. Next, clear the input element by setting its value to an empty string (`""`).
+7. Create three new elements — a list item ({{htmlelement('li')}}), a {{htmlelement('span')}}, and a {{htmlelement('button')}} — and store them in variables.
+8. Append the span and button as children of the list item.
+9. Set the text content of the span to the input value you saved earlier, and set the text content of the button to `Delete`.
+10. Append the list item to the list.
+11. Attach an event handler to the **Delete** button so that, when clicked, it removes the entire list item (`<li>...</li>`).
+12. Finally, use the [`focus()`](/en-US/docs/Web/API/HTMLElement/focus) method to focus the input element, so it's ready for entering the next shopping list item.
 
 ## Summary
 

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

@@ -126,7 +126,7 @@ The images you need to embed in the example and their required `alt` text are as
 - [`pic1.jpg`](https://mdn.github.io/shared-assets/images/examples/learn/gallery/pic1.jpg): "Closeup of a human eye".
 - [`pic2.jpg`](https://mdn.github.io/shared-assets/images/examples/learn/gallery/pic2.jpg): "Rock that looks like a wave".
 - [`pic3.jpg`](https://mdn.github.io/shared-assets/images/examples/learn/gallery/pic3.jpg): "Purple and white pansies".
-- [`pic4.jpg`](https://mdn.github.io/shared-assets/images/examples/learn/gallery/pic4.jpg): "Section of wall from a pharoah's tomb".
+- [`pic4.jpg`](https://mdn.github.io/shared-assets/images/examples/learn/gallery/pic4.jpg): "Section of wall from a pharaoh's tomb".
 - [`pic5.jpg`](https://mdn.github.io/shared-assets/images/examples/learn/gallery/pic5.jpg): "Large moth on a leaf".
 
 ### Create a data object
@@ -216,9 +216,9 @@ for (const image of images) {
   newImage.tabIndex = "0";
   // 2f. Append the image as a child of the thumbBar
   thumbBar.appendChild(newImage);
-  // 2g. Update the display to show the image fullsize when a thumb is clicked
+  // 2g. Update the display to show the image full size when a thumb is clicked
   newImage.addEventListener("click", updateDisplayedImage);
-  // 2h. Update the display to show the image fullsize when the "Enter" key
+  // 2h. Update the display to show the image full size when the "Enter" key
   // is pressed after it has been focused
   newImage.addEventListener("keydown", (e) => {
     if (e.code === "Enter") {

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

@@ -116,27 +116,17 @@ The {{cssxref('appearance')}} property can be used to display an element using p
 
 You can use JavaScript to detect whether a particular input type is supported. This is based on the fact we mentioned before — that every input type falls back to `<input type="text">` in non-supporting browsers.
 
-1. Define a test function. The first line of the function body should create a test `<input>` element:
+Define a test function. The first line of the function body should create a test `<input>` element. Next, set its `type` attribute to the type you want to test. Finally, test the `type` attribute value. In browsers that don't support that input type, the last line will have no effect and the `type` will be returned as `text`. In the below line we are inverting the return value using the negation operator (`!`) because if the `type` isn't `text`, then the type is supported, so we want to return `true`. The complete function looks like this:
 
-   ```js
-   function testDatetimeLocalSupport() {
-     const testInput = document.createElement("input");
-   ```
-
-2. Next, set its `type` attribute to the type you want to test:
-
-   ```js-nolint
-     testInput.setAttribute("type", "datetime-local");
-   ```
-
-3. Now test the `type` attribute value. In browsers that don't support that input type, the last line will have no effect and the `type` will be returned as `text`. In the below line we are inverting the return value using the negation operator (`!`) because if the `type` isn't `text`, then the type is supported, so we want to return `true`:
-
-   ```js
-     return testInput.type !== "text";
-   }
-   ```
+```js
+function testDatetimeLocalSupport() {
+  const testInput = document.createElement("input");
+  testInput.setAttribute("type", "datetime-local");
+  return testInput.type !== "text";
+}
+```
 
-The above example shows the basic idea behind such tests. Instead of reinventing the wheel, however, you should use a feature detection library such as [Modernizr](https://modernizr.com/) to handle such tests.
+The above example shows the basic idea behind such tests. Instead of reinventing the wheel, however, you should use a feature detection library to handle such tests.
 
 Based on the results of that test, you could then for example choose to use JavaScript to build a custom replacement for the non-supported type, or not apply a stylesheet that styles the non-supported type because you want to provide simple default styles to legacy browsers.