Fix typos and pseudo-typos 13 (#36254)

files/en-us/web/api/ui_events/keyboard_event_key_values/index.md

@@ -1361,6 +1361,8 @@ Some keys are common across multiple languages, while others exist only on keybo
 
 \[1] On the _X Window System_, the <kbd>Compose</kbd> key is called the <kbd>Multi</kbd> key.
 
+<!-- cSpell:ignore Nonconvert -->
+
 \[2] The <kbd>NonConvert</kbd> key is reported as `"Nonconvert"` instead of the correct `"NonConvert"` by Firefox versions 36 and earlier.
 
 \[3] The <kbd>Process</kbd> key currently returns `"Unidentified"` in Firefox. Google Chrome returns the value of the key as if IME were not in use.
@@ -1577,7 +1579,7 @@ These keys are only available on Japanese keyboards.
       <td></td>
     </tr>
     <tr>
-      <td><code>"ZenkakuHanaku"</code> [6]</td>
+      <td><code>"ZenkakuHankaku"</code> [6]</td>
       <td>
         The <kbd>Zenkaku/Hankaku</kbd> (full width/half width) toggle key.
       </td>
@@ -3414,7 +3416,7 @@ The values below are derived in part from a number of consumer electronics techn
     </tr>
     <tr>
       <td><code>"Lock"</code></td>
-      <td>Locks or unlocks the currently selected content or pgoram.</td>
+      <td>Locks or unlocks the currently selected content or program.</td>
       <td><code>VK_LOCK</code></td>
       <td></td>
       <td></td>

files/en-us/web/api/url_api/index.md

@@ -33,19 +33,19 @@ The snippet above creates a `URL` object for the article you're reading right no
 Most of the properties of `URL` are settable; you can write new values to them to alter the URL represented by the object. For example, to create a URL and set its username:
 
 ```js
-let myUsername = "someguy";
+let myUsername = "some-guy";
 let addr = new URL("https://example.com/login");
 addr.username = myUsername;
 ```
 
-Setting the value of {{domxref("URL.username", "username")}} not only sets that property's value, but it updates the overall URL. After executing the code snippet above, the value returned by {{domxref("URL.href", "href")}} is `https://someguy@example.com/login`. This is true for any of the writable properties.
+Setting the value of {{domxref("URL.username", "username")}} not only sets that property's value, but it updates the overall URL. After executing the code snippet above, the value returned by {{domxref("URL.href", "href")}} is `https://some-guy@example.com/login`. This is true for any of the writable properties.
 
 ### Queries
 
-The {{domxref("URL.search", "search")}} property on a `URL` contains the query string portion of the URL. For example, if the URL is `https://example.com/login?user=someguy&page=news`, then the value of the `search` property is `?user=someguy&page=news`. You can also look up the values of individual parameters with the {{domxref("URLSearchParams")}} object's {{domxref("URLSearchParams.get", "get()")}} method:
+The {{domxref("URL.search", "search")}} property on a `URL` contains the query string portion of the URL. For example, if the URL is `https://example.com/login?user=some-guy&page=news`, then the value of the `search` property is `?user=some-guy&page=news`. You can also look up the values of individual parameters with the {{domxref("URLSearchParams")}} object's {{domxref("URLSearchParams.get", "get()")}} method:
 
 ```js
-let addr = new URL("https://example.com/login?user=someguy&page=news");
+let addr = new URL("https://example.com/login?user=some-guy&page=news");
 try {
   loginUser(addr.searchParams.get("user"));
   gotoPage(addr.searchParams.get("page"));

files/en-us/web/api/usbdevice/deviceclass/index.md

@@ -13,7 +13,7 @@ browser-compat: api.USBDevice.deviceClass
 The **`deviceClass`** read only property of the
 {{domxref("USBDevice")}} interface one of three properties that identify USB devices for
 the purpose of loading a USB driver that will work with that device. The other two
-properties are USBDevice.deviceSubclass and USBDevice.deviceprotocol.
+properties are `USBDevice.deviceSubclass` and `USBDevice.deviceProtocol`.
 
 ## Value
 

files/en-us/web/api/visualviewport/index.md

@@ -60,7 +60,7 @@ Listen to these events using {{domxref("EventTarget.addEventListener", "addEvent
 This example, taken from the [Visual Viewport README](https://github.com/WICG/visual-viewport), shows how to write a simple bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. This is a nice way to improve the user experience when zooming in on pages. A [live sample](https://wicg.github.io/visual-viewport/examples/hide-on-zoom.html) is also available.
 
 ```js
-const bottomBar = document.getElementById("bottombar");
+const bottomBar = document.getElementById("bottom-bar");
 const viewport = window.visualViewport;
 
 function resizeHandler() {
@@ -75,7 +75,7 @@ window.visualViewport.addEventListener("resize", resizeHandler);
 This example, also taken from the [Visual Viewport README](https://github.com/WICG/visual-viewport), shows how to use this API to simulate `position: device-fixed`, which fixes elements to the visual viewport. A [live sample](https://wicg.github.io/visual-viewport/examples/fixed-to-viewport.html) is also available.
 
 ```js
-const bottomBar = document.getElementById("bottombar");
+const bottomBar = document.getElementById("bottom-bar");
 const viewport = window.visualViewport;
 function viewportHandler() {
   const layoutViewport = document.getElementById("layoutViewport");

files/en-us/web/api/vrframedata/timestamp/index.md

@@ -51,7 +51,7 @@ function drawVRScene() {
 
   // grab the current timestamp on each run of the rendering loop
   // and do something with it
-  framedata.timestamp;
+  frameData.timestamp;
 
   // …
 

files/en-us/web/api/web_audio_api/index.md

@@ -190,7 +190,7 @@ It is possible to process/render an audio graph very quickly in the background 
 
 ## Examples
 
-You can find a number of examples at our [webaudio-example repo](https://github.com/mdn/webaudio-examples/) on GitHub.
+You can find a number of examples at our [webaudio-examples repo](https://github.com/mdn/webaudio-examples/) on GitHub.
 
 ## Specifications
 

files/en-us/web/api/web_audio_api/using_iir_filters/index.md

@@ -30,7 +30,7 @@ A [biquad filter](https://www.mathworks.com/help/dsphdl/ref/biquadfilter.html) i
 
 When you are using an {{domxref("IIRFilterNode")}} instead of a {{domxref("BiquadFilterNode")}} you are creating the filter yourself, rather than just choosing a pre-programmed type. So you can create a highpass filter, or a lowpass filter, or a more bespoke one. And this is where the IIR filter node is useful — you can create your own if none of the already available settings is right for what you want. As well as this, if your audio graph needed a highpass and a bandpass filter within it, you could just use one IIR filter node in place of the two biquad filter nodes you would otherwise need for this.
 
-With the IIRFIlter node it's up to you to set what `feedforward` and `feedback` values the filter needs — this determines the characteristics of the filter. The downside is that this involves some complex maths.
+With the IIR filter node it's up to you to set what `feedforward` and `feedback` values the filter needs — this determines the characteristics of the filter. The downside is that this involves some complex maths.
 
 If you are looking to learn more there's some [information about the maths behind IIR filters here](https://ece.uccs.edu/~mwickert/ece2610/lecture_notes/ece2610_chap8.pdf). This enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you.
 
@@ -126,7 +126,7 @@ filterButton.addEventListener(
   () => {
     if (filterButton.dataset.filteron === "false") {
       srcNode.disconnect(audioCtx.destination);
-      srcNode.connect(iirfilter).connect(audioCtx.destination);
+      srcNode.connect(iirFilter).connect(audioCtx.destination);
       // …
     }
   },

files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md

@@ -33,7 +33,7 @@ See the [3D spatialization demo live](https://mdn.github.io/webaudio-examples/sp
 
 The boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls.
 When we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc.
-This is done by setting the different properties of the `PannerNode` object instance in relation to that movement, to emulate spacialization.
+This is done by setting the different properties of the `PannerNode` object instance in relation to that movement, to emulate spatialization.
 
 > [!NOTE]
 > The experience is much better if you use headphones, or have some kind of surround sound system to plug your computer into.
@@ -79,7 +79,7 @@ These two together can nicely set the direction.
 Let's create our {{domxref("PannerNode")}}. This has a whole bunch of properties associated with it. Let's take a look at each of them:
 
 To start we can set the [`panningModel`](/en-US/docs/Web/API/PannerNode/panningModel).
-This is the spacialization algorithm that's used to position the audio in 3D space. We can set this to:
+This is the spatialization algorithm that's used to position the audio in 3D space. We can set this to:
 
 `equalpower` — The default and the general way panning is figured out
 

files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md

@@ -15,7 +15,7 @@ When an authenticator registers a new key pair with a service, the authenticator
 The attestation is returned through the WebAuthn API as the [AuthenticatorAttestationResponse](/en-US/docs/Web/API/AuthenticatorAttestationResponse). The attestation format contains two basic {{jsxref("ArrayBuffer")}} objects:
 
 - **clientDataJSON** - An ArrayBuffer that contains a JSON representation of what the browser saw when being asked to authenticate.
-- [attestationObject](/en-US/docs/Web/API/AuthenticatorAttestationResponse/attestationObject) - Cryptographic attestation that a newly generated keypair was created by that authenticator. This contains:
+- [attestationObject](/en-US/docs/Web/API/AuthenticatorAttestationResponse/attestationObject) - Cryptographic attestation that a newly generated key pair was created by that authenticator. This contains:
   - [Authenticator data](/en-US/docs/Web/API/Web_Authentication_API/Authenticator_data) containing an `attestedCredentialData` field, which in turn contains the `credentialId` and `credentialPublicKey`. The `attestedCredentialData` is an optional field used in attestation. It is not included when used in the AuthenticatorAssertionResponse.
   - An attestation statement, which is optionally present depending on whether the relying party requests attestation. In general, relying parties aren't encouraged to request attestation, so it's more likely that this statement won't be present.
 

files/en-us/web/api/web_components/using_custom_elements/index.md

@@ -472,15 +472,15 @@ class ExpandingList extends HTMLUListElement {
         // Add click handler to this span
         newSpan.addEventListener("click", (e) => {
           // next sibling to the span should be the ul
-          const nextul = e.target.nextElementSibling;
+          const nextUl = e.target.nextElementSibling;
 
           // Toggle visible state and update class attribute on ul
-          if (nextul.style.display == "block") {
-            nextul.style.display = "none";
-            nextul.parentNode.setAttribute("class", "closed");
+          if (nextUl.style.display == "block") {
+            nextUl.style.display = "none";
+            nextUl.parentNode.setAttribute("class", "closed");
           } else {
-            nextul.style.display = "block";
-            nextul.parentNode.setAttribute("class", "open");
+            nextUl.style.display = "block";
+            nextUl.parentNode.setAttribute("class", "open");
           }
         });
         // Add the span and remove the bare text node from the li

files/en-us/web/api/webgl2renderingcontext/drawbuffers/index.md

@@ -10,7 +10,7 @@ browser-compat: api.WebGL2RenderingContext.drawBuffers
 
 The **`WebGL2RenderingContext.drawBuffers()`** method of the [WebGL 2 API](/en-US/docs/Web/API/WebGL_API) defines draw buffers to which
 fragment colors are written into. The draw buffer settings are part of the state of the
-currently bound framebuffer or the drawingbuffer if no framebuffer is bound.
+currently bound framebuffer or the drawing buffer if no framebuffer is bound.
 
 ## Syntax
 

files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md

@@ -69,7 +69,7 @@ This starts by specifying the precision of the `float` type, as required. Then w
 The HTML consists solely of the {{HTMLElement("canvas")}} that we'll obtain a WebGL context on.
 
 ```html
-<canvas id="glcanvas" width="600" height="460">
+<canvas id="gl-canvas" width="600" height="460">
   Oh no! Your browser doesn't support canvas!
 </canvas>
 ```
@@ -118,7 +118,7 @@ Initializing the program is handled through a {{domxref("Window/load_event", "lo
 window.addEventListener("load", startup, false);
 
 function startup() {
-  glCanvas = document.getElementById("glcanvas");
+  glCanvas = document.getElementById("gl-canvas");
   gl = glCanvas.getContext("webgl");
 
   const shaderSet = [

files/en-us/web/api/webgl_api/by_example/color_masking/index.md

@@ -83,17 +83,17 @@ window.addEventListener(
     const timer = setInterval(drawAnimation, 1000);
 
     const mask = [true, true, true];
-    const redtoggle = document.querySelector("#red-toggle");
-    const greentoggle = document.querySelector("#green-toggle");
-    const bluetoggle = document.querySelector("#blue-toggle");
-    redtoggle.addEventListener("click", setColorMask, false);
-    greentoggle.addEventListener("click", setColorMask, false);
-    bluetoggle.addEventListener("click", setColorMask, false);
+    const redToggle = document.querySelector("#red-toggle");
+    const greenToggle = document.querySelector("#green-toggle");
+    const blueToggle = document.querySelector("#blue-toggle");
+    redToggle.addEventListener("click", setColorMask, false);
+    greenToggle.addEventListener("click", setColorMask, false);
+    blueToggle.addEventListener("click", setColorMask, false);
 
     function setColorMask(evt) {
       const index =
-        (evt.target === greentoggle && 1) ||
-        (evt.target === bluetoggle && 2) ||
+        (evt.target === greenToggle && 1) ||
+        (evt.target === blueToggle && 2) ||
         0;
       mask[index] = !mask[index];
       evt.target.textContent = mask[index] ? "On" : "Off";

files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md

@@ -63,10 +63,10 @@ button {
   void main() {
     vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
     float distance = length(fragmentPosition);
-    float distanceSqrd = distance * distance;
+    float distanceSq = distance * distance;
     gl_FragColor = vec4(
-      0.2/distanceSqrd,
-      0.1/distanceSqrd,
+      0.2/distanceSq,
+      0.1/distanceSq,
       0.0, 1.0 );
   }
 </script>

files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md

@@ -33,7 +33,7 @@ This project uses the [glMatrix](https://glmatrix.net/) library to perform its m
   </head>
 
   <body>
-    <canvas id="glcanvas" width="640" height="480"></canvas>
+    <canvas id="gl-canvas" width="640" height="480"></canvas>
   </body>
 </html>
 ```
@@ -274,7 +274,7 @@ function drawScene(gl, programInfo, buffers) {
   const zFar = 100.0;
   const projectionMatrix = mat4.create();
 
-  // note: glmatrix.js always has the first argument
+  // note: glMatrix always has the first argument
   // as the destination to receive the result.
   mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
 

files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md

@@ -35,7 +35,7 @@ The "index.html" file should contain the following:
   </head>
 
   <body>
-    <canvas id="glcanvas" width="640" height="480"></canvas>
+    <canvas id="gl-canvas" width="640" height="480"></canvas>
   </body>
 </html>
 ```
@@ -53,7 +53,7 @@ main();
 // start here
 //
 function main() {
-  const canvas = document.querySelector("#glcanvas");
+  const canvas = document.querySelector("#gl-canvas");
   // Initialize the GL context
   const gl = canvas.getContext("webgl");
 

files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md

@@ -14,12 +14,11 @@ Alright, so you've got the microphone permissions set up. The next step is to ma
 
    ```js
    peer.on("open", () => {
-     window.caststatus.textContent = `Your device ID is: ${peer.id}`;
+     document.getElementById("cast-status").textContent =
+       `Your device ID is: ${peer.id}`;
    });
    ```
 
-   Here you're replacing the text in the HTML element with the ID `caststatus`.
-
 2. Try reloading the app in your browser. Instead of `connecting...`, you should see `Your device ID is: <peer ID>`.
 
    ![A cream background with the words 'phone a friend' in bold, dark green font as the heading. 'Your device ID is: 3b77' is immediately below that and 'please use headphones!' below that. Following on, a big dark green button with 'Call' written in the same cream color of the background.](app_showing_device_id.png)
@@ -31,14 +30,15 @@ Alright, so you've got the microphone permissions set up. The next step is to ma
 
    // Displays the call button and peer ID
    function showCallContent() {
-     window.caststatus.textContent = `Your device ID is: ${peer.id}`;
+     document.getElementById("cast-status").textContent =
+       `Your device ID is: ${peer.id}`;
      callBtn.hidden = false;
      audioContainer.hidden = true;
    }
 
    // Displays the audio controls and correct copy
    function showConnectedContent() {
-     window.caststatus.textContent = "You're connected";
+     document.getElementById("cast-status").textContent = "You're connected";
      callBtn.hidden = true;
      audioContainer.hidden = false;
    }

files/en-us/web/api/webrtc_api/index.md

@@ -86,9 +86,9 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W
 - {{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}}
   - : An {{domxref("RTCPeerConnectionIceErrorEvent")}} indicating that an error has occurred while gathering ICE candidates.
 - {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}}
-  - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE connection's state—found in the {{domxref("RTCPeerConnection.iceconnectionstate", "iceconnectionstate")}} property—changes.
+  - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE connection's state—found in the {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}} property—changes.
 - {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}}
-  - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE gathering state—found in the {{domxref("RTCPeerConnection.icegatheringstate", "icegatheringstate")}} property—changes.
+  - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE gathering state—found in the {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} property—changes.
 - {{domxref("RTCDataChannel.message_event", "message")}}
   - : A message has been received on the data channel. The event is of type {{domxref("MessageEvent")}}.
 - {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}}
@@ -98,9 +98,9 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W
 - {{domxref("RTCIceTransport.selectedcandidatepairchange_event", "selectedcandidatepairchange")}}
   - : The currently-selected pair of ICE candidates has changed for the `RTCIceTransport` on which the event is fired.
 - {{domxref("RTCPeerConnection.track_event", "track")}}
-  - : The `track` event, of type {{domxref("RTCTrackevent")}} is sent to an {{domxref("RTCPeerConnection")}} when a new track is added to the connection following the successful negotiation of the media's streaming.
+  - : The `track` event, of type {{domxref("RTCTrackEvent")}} is sent to an {{domxref("RTCPeerConnection")}} when a new track is added to the connection following the successful negotiation of the media's streaming.
 - {{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}}
-  - : Sent to the peer connection when its {{domxref("RTCPeerConnection.signalingstate", "signalingstate")}} has changed. This happens as a result of a call to either {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} or {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}.
+  - : Sent to the peer connection when its {{domxref("RTCPeerConnection.signalingState", "signalingState")}} has changed. This happens as a result of a call to either {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} or {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}.
 - {{domxref("RTCDtlsTransport.statechange_event", "statechange")}}
   - : The state of the `RTCDtlsTransport` has changed.
 - {{domxref("RTCIceTransport.statechange_event", "statechange")}}