From bff3a6a2e6b3c13dd8bb0c80a1eb9da08cce5dc6 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Sun, 27 Oct 2024 19:53:01 -0400
Subject: [PATCH] Fix typos and pseudo-typos 10 (#36251)

* Fix typos and pseudo-typos 10

* Use underscore
---
 .../using_the_gamepad_api/index.md            | 14 ++---
 .../web/api/gpuadapter/requestdevice/index.md |  2 +-
 .../en-us/web/api/gpubindgroup/label/index.md |  8 +--
 .../web/api/gpubindgrouplayout/label/index.md |  8 +--
 files/en-us/web/api/gpubuffer/label/index.md  |  8 +--
 .../web/api/gpucommandbuffer/label/index.md   |  8 +--
 .../insertdebugmarker/index.md                |  2 +-
 .../web/api/gpucommandencoder/label/index.md  |  8 +--
 .../gpucommandencoder/popdebuggroup/index.md  |  2 +-
 .../gpucommandencoder/pushdebuggroup/index.md |  2 +-
 .../insertdebugmarker/index.md                |  2 +-
 .../api/gpucomputepassencoder/label/index.md  |  8 +--
 .../popdebuggroup/index.md                    |  2 +-
 .../pushdebuggroup/index.md                   |  2 +-
 .../web/api/gpucomputepipeline/label/index.md |  8 +--
 files/en-us/web/api/gpudevice/label/index.md  |  2 +-
 .../web/api/gpuexternaltexture/label/index.md |  8 +--
 files/en-us/web/api/gpupipelineerror/index.md |  2 +
 .../web/api/gpupipelinelayout/label/index.md  |  8 +--
 .../en-us/web/api/gpuqueryset/label/index.md  |  8 +--
 files/en-us/web/api/gpuqueue/label/index.md   |  6 +-
 .../web/api/gpurenderbundle/label/index.md    |  8 +--
 .../insertdebugmarker/index.md                |  2 +-
 .../api/gpurenderbundleencoder/label/index.md |  8 +--
 .../popdebuggroup/index.md                    |  2 +-
 .../pushdebuggroup/index.md                   |  2 +-
 .../insertdebugmarker/index.md                |  2 +-
 .../api/gpurenderpassencoder/label/index.md   |  8 +--
 .../popdebuggroup/index.md                    |  2 +-
 .../pushdebuggroup/index.md                   |  2 +-
 .../web/api/gpurenderpipeline/label/index.md  |  8 +--
 files/en-us/web/api/gpusampler/label/index.md |  8 +--
 .../web/api/gpushadermodule/label/index.md    |  8 +--
 files/en-us/web/api/gputexture/label/index.md |  8 +--
 .../web/api/gputextureview/label/index.md     |  8 +--
 files/en-us/web/api/hashchangeevent/index.md  |  4 +-
 files/en-us/web/api/houdini_apis/index.md     |  4 +-
 .../microtask_guide/in_depth/index.md         |  2 +-
 .../recommended_drag_types/index.md           |  4 +-
 .../web/api/idbobjectstore/getkey/index.md    |  2 +-
 .../indexeddb_api/using_indexeddb/index.md    |  2 +-
 .../constraints/index.md                      | 18 +++---
 .../taking_still_photos/index.md              | 56 +++++++++----------
 files/en-us/web/api/mediastream/index.md      |  2 +-
 .../api/mediastream_recording_api/index.md    |  2 +-
 .../api/metadata/modificationtime/index.md    |  6 +-
 files/en-us/web/api/midiport/index.md         |  2 +-
 .../web/api/mutationobserver/observe/index.md |  2 +-
 48 files changed, 151 insertions(+), 149 deletions(-)

diff --git a/files/en-us/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/en-us/web/api/gamepad_api/using_the_gamepad_api/index.md
index d06cfc30fa74745..4c015780908e6d9 100644
--- a/files/en-us/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/en-us/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -193,16 +193,16 @@ function gameLoop() {
 This example shows how to use the {{domxref("Gamepad")}} object, as well as the {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} and {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} events to display the state of all gamepads connected to the system. The example is based on a [Gamepad demo](https://luser.github.io/gamepadtest/), which has the [source code available on GitHub](https://github.com/luser/gamepadtest).
 
 ```js
-let loopstarted = false;
+let loopStarted = false;
 
 window.addEventListener("gamepadconnected", (evt) => {
-  addgamepad(evt.gamepad);
+  addGamepad(evt.gamepad);
 });
 window.addEventListener("gamepaddisconnected", (evt) => {
-  removegamepad(evt.gamepad);
+  removeGamepad(evt.gamepad);
 });
 
-function addgamepad(gamepad) {
+function addGamepad(gamepad) {
   const d = document.createElement("div");
   d.setAttribute("id", `controller${gamepad.index}`);
 
@@ -242,13 +242,13 @@ function addgamepad(gamepad) {
   }
 
   document.body.append(d);
-  if (!loopstarted) {
+  if (!loopStarted) {
     requestAnimationFrame(updateStatus);
-    loopstarted = true;
+    loopStarted = true;
   }
 }
 
-function removegamepad(gamepad) {
+function removeGamepad(gamepad) {
   document.querySelector(`#controller${gamepad.index}`).remove();
 }
 
diff --git a/files/en-us/web/api/gpuadapter/requestdevice/index.md b/files/en-us/web/api/gpuadapter/requestdevice/index.md
index 827d397688bcdc2..1a79479abf786d6 100644
--- a/files/en-us/web/api/gpuadapter/requestdevice/index.md
+++ b/files/en-us/web/api/gpuadapter/requestdevice/index.md
@@ -104,7 +104,7 @@ async function init() {
 
   const device = await adapter.requestDevice({
     defaultQueue: {
-      label: "myqueue",
+      label: "my_queue",
     },
     requiredFeatures,
     requiredLimits,
diff --git a/files/en-us/web/api/gpubindgroup/label/index.md b/files/en-us/web/api/gpubindgroup/label/index.md
index 105292c99c95cfb..337e371c73ccbf6 100644
--- a/files/en-us/web/api/gpubindgroup/label/index.md
+++ b/files/en-us/web/api/gpubindgroup/label/index.md
@@ -38,9 +38,9 @@ const bindGroup = device.createBindGroup({
   ],
 });
 
-bindGroup.label = "mybindgroup";
+bindGroup.label = "my_bind_group";
 
-console.log(bindGroup.label); // "mybindgroup";
+console.log(bindGroup.label); // "my_bind_group"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createBindGroup()")}} call, and then getting it via `GPUBindGroup.label`:
@@ -58,10 +58,10 @@ const bindGroup = device.createBindGroup({
       },
     },
   ],
-  label: "mybindgroup",
+  label: "my_bind_group",
 });
 
-console.log(bindGroup.label); // "mybindgroup";
+console.log(bindGroup.label); // "my_bind_group"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpubindgrouplayout/label/index.md b/files/en-us/web/api/gpubindgrouplayout/label/index.md
index fb32c1c886be80b..5b750554aa0c085 100644
--- a/files/en-us/web/api/gpubindgrouplayout/label/index.md
+++ b/files/en-us/web/api/gpubindgrouplayout/label/index.md
@@ -38,9 +38,9 @@ const bindGroupLayout = device.createBindGroupLayout({
   ],
 });
 
-bindGroupLayout.label = "mybindgrouplayout";
+bindGroupLayout.label = "my_bind_group_layout";
 
-console.log(bindGroupLayout.label); // "mybindgrouplayout";
+console.log(bindGroupLayout.label); // "my_bind_group_layout"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createBindGroupLayout()")}} call, and then getting it via `GPUBindGroupLayout.label`:
@@ -58,10 +58,10 @@ const bindGroupLayout = device.createBindGroupLayout({
       },
     },
   ],
-  label: "mybindgrouplayout",
+  label: "my_bind_group_layout",
 });
 
-console.log(bindGroupLayout.label); // "mybindgrouplayout";
+console.log(bindGroupLayout.label); // "my_bind_group_layout"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpubuffer/label/index.md b/files/en-us/web/api/gpubuffer/label/index.md
index ce4ea3893cc7233..94fac19203083ef 100644
--- a/files/en-us/web/api/gpubuffer/label/index.md
+++ b/files/en-us/web/api/gpubuffer/label/index.md
@@ -29,9 +29,9 @@ const output = device.createBuffer({
   usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
 });
 
-output.label = "mybuffer";
+output.label = "my_buffer";
 
-console.log(output.label); // "mybuffer"
+console.log(output.label); // "my_buffer"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createBuffer()")}} call, and then getting it via `GPUBuffer.label`:
@@ -40,10 +40,10 @@ Setting a label via the originating {{domxref("GPUDevice.createBuffer()")}} call
 const output = device.createBuffer({
   size: BUFFER_SIZE,
   usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
-  label: "mybuffer",
+  label: "my_buffer",
 });
 
-console.log(output.label); // "mybuffer"
+console.log(output.label); // "my_buffer"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpucommandbuffer/label/index.md b/files/en-us/web/api/gpucommandbuffer/label/index.md
index 79bb5be27da9d1a..222aac08eb76f92 100644
--- a/files/en-us/web/api/gpucommandbuffer/label/index.md
+++ b/files/en-us/web/api/gpucommandbuffer/label/index.md
@@ -25,18 +25,18 @@ Setting and getting a label via `GPUCommandBuffer.label`:
 
 ```js
 const commandBuffer = commandEncoder.finish();
-commandBuffer.label = "mycommandbuffer";
-console.log(commandBuffer.label); // "mycommandbuffer";
+commandBuffer.label = "my_command_buffer";
+console.log(commandBuffer.label); // "my_command_buffer"
 ```
 
 Setting a label via the originating {{domxref("GPUCommandEncoder.finish()")}} call, and then getting it via `GPUCommandBuffer.label`:
 
 ```js
 const commandBuffer = commandEncoder.finish({
-  label: "mycommandbuffer",
+  label: "my_command_buffer",
 });
 
-console.log(commandBuffer.label); // "mycommandbuffer";
+console.log(commandBuffer.label); // "my_command_buffer"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpucommandencoder/insertdebugmarker/index.md b/files/en-us/web/api/gpucommandencoder/insertdebugmarker/index.md
index 70825c0f4846e5a..836011ad318d254 100644
--- a/files/en-us/web/api/gpucommandencoder/insertdebugmarker/index.md
+++ b/files/en-us/web/api/gpucommandencoder/insertdebugmarker/index.md
@@ -35,7 +35,7 @@ None ({{jsxref("Undefined")}}).
 ```js
 // ...
 
-commandEncoder.insertDebugMarker("mymarker");
+commandEncoder.insertDebugMarker("my_marker");
 
 // ...
 ```
diff --git a/files/en-us/web/api/gpucommandencoder/label/index.md b/files/en-us/web/api/gpucommandencoder/label/index.md
index 8cf04a002ee7602..139e4c6eaec0c90 100644
--- a/files/en-us/web/api/gpucommandencoder/label/index.md
+++ b/files/en-us/web/api/gpucommandencoder/label/index.md
@@ -25,18 +25,18 @@ Setting and getting a label via `GPUCommandEncoder.label`:
 
 ```js
 const commandEncoder = device.createCommandEncoder();
-commandEncoder.label = "mycommandencoder";
-console.log(commandEncoder.label); // "mycommandencoder";
+commandEncoder.label = "my_command_encoder";
+console.log(commandEncoder.label); // "my_command_encoder"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createCommandEncoder()")}} call, and then getting it via `GPUCommandEncoder.label`:
 
 ```js
 const commandEncoder = device.createCommandEncoder({
-  label: "mycommandencoder",
+  label: "my_command_encoder",
 });
 
-console.log(commandEncoder.label); // "mycommandencoder";
+console.log(commandEncoder.label); // "my_command_encoder"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpucommandencoder/popdebuggroup/index.md b/files/en-us/web/api/gpucommandencoder/popdebuggroup/index.md
index 5dbfa284cc12280..e7234c778922041 100644
--- a/files/en-us/web/api/gpucommandencoder/popdebuggroup/index.md
+++ b/files/en-us/web/api/gpucommandencoder/popdebuggroup/index.md
@@ -40,7 +40,7 @@ The following criteria must be met when calling **`popDebugGroup()`**, otherwise
 ```js
 // ...
 
-commandEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group
+commandEncoder.pushDebugGroup("my_group_marker"); // Start labeled debug group
 
 const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
 
diff --git a/files/en-us/web/api/gpucommandencoder/pushdebuggroup/index.md b/files/en-us/web/api/gpucommandencoder/pushdebuggroup/index.md
index 8ce2d60411f92f4..505803b6dcf1bf4 100644
--- a/files/en-us/web/api/gpucommandencoder/pushdebuggroup/index.md
+++ b/files/en-us/web/api/gpucommandencoder/pushdebuggroup/index.md
@@ -35,7 +35,7 @@ None ({{jsxref("Undefined")}}).
 ```js
 // ...
 
-commandEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group
+commandEncoder.pushDebugGroup("my_group_marker"); // Start labeled debug group
 
 const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
 
diff --git a/files/en-us/web/api/gpucomputepassencoder/insertdebugmarker/index.md b/files/en-us/web/api/gpucomputepassencoder/insertdebugmarker/index.md
index 0a5ed23c086a61f..ae5af7b70e65f9d 100644
--- a/files/en-us/web/api/gpucomputepassencoder/insertdebugmarker/index.md
+++ b/files/en-us/web/api/gpucomputepassencoder/insertdebugmarker/index.md
@@ -35,7 +35,7 @@ None ({{jsxref("Undefined")}}).
 ```js
 // ...
 
-passEncoder.insertDebugMarker("mymarker");
+passEncoder.insertDebugMarker("my_marker");
 
 // ...
 ```
diff --git a/files/en-us/web/api/gpucomputepassencoder/label/index.md b/files/en-us/web/api/gpucomputepassencoder/label/index.md
index 03f0c29771bb3e2..2b6805b3ee38427 100644
--- a/files/en-us/web/api/gpucomputepassencoder/label/index.md
+++ b/files/en-us/web/api/gpucomputepassencoder/label/index.md
@@ -27,8 +27,8 @@ Setting and getting a label via `GPUComputePassEncoder.label`:
 const commandEncoder = device.createCommandEncoder();
 const passEncoder = commandEncoder.beginComputePass();
 
-passEncoder.label = "mycomputepassencoder";
-console.log(passEncoder.label); // "mycomputepassencoder"
+passEncoder.label = "my_compute_pass_encoder";
+console.log(passEncoder.label); // "my_compute_pass_encoder"
 ```
 
 Setting a label via the originating {{domxref("GPUCommandEncoder.beginComputePass()")}} call, and then getting it via `GPUComputePassEncoder.label`:
@@ -36,10 +36,10 @@ Setting a label via the originating {{domxref("GPUCommandEncoder.beginComputePas
 ```js
 const commandEncoder = device.createCommandEncoder();
 const passEncoder = commandEncoder.beginComputePass({
-  label: "mycomputepassencoder",
+  label: "my_compute_pass_encoder",
 });
 
-console.log(passEncoder.label); // "mycomputepassencoder"
+console.log(passEncoder.label); // "my_compute_pass_encoder"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpucomputepassencoder/popdebuggroup/index.md b/files/en-us/web/api/gpucomputepassencoder/popdebuggroup/index.md
index 64788b16e510343..3a5a9513e40da09 100644
--- a/files/en-us/web/api/gpucomputepassencoder/popdebuggroup/index.md
+++ b/files/en-us/web/api/gpucomputepassencoder/popdebuggroup/index.md
@@ -42,7 +42,7 @@ The following criteria must be met when calling **`popDebugGroup()`**, otherwise
 
 const passEncoder = commandEncoder.beginComputePass();
 
-passEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group
+passEncoder.pushDebugGroup("my_group_marker"); // Start labeled debug group
 
 passEncoder.setPipeline(computePipeline);
 passEncoder.setBindGroup(0, bindGroup);
diff --git a/files/en-us/web/api/gpucomputepassencoder/pushdebuggroup/index.md b/files/en-us/web/api/gpucomputepassencoder/pushdebuggroup/index.md
index 43f5a1afab22758..557315770690e8c 100644
--- a/files/en-us/web/api/gpucomputepassencoder/pushdebuggroup/index.md
+++ b/files/en-us/web/api/gpucomputepassencoder/pushdebuggroup/index.md
@@ -37,7 +37,7 @@ None ({{jsxref("Undefined")}}).
 
 const passEncoder = commandEncoder.beginComputePass();
 
-passEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group
+passEncoder.pushDebugGroup("my_group_marker"); // Start labeled debug group
 
 passEncoder.setPipeline(computePipeline);
 passEncoder.setBindGroup(0, bindGroup);
diff --git a/files/en-us/web/api/gpucomputepipeline/label/index.md b/files/en-us/web/api/gpucomputepipeline/label/index.md
index 89796f17364f625..023641c1020be72 100644
--- a/files/en-us/web/api/gpucomputepipeline/label/index.md
+++ b/files/en-us/web/api/gpucomputepipeline/label/index.md
@@ -36,9 +36,9 @@ const computePipeline = device.createComputePipeline({
   },
 });
 
-computePipeline.label = "mycomputepipeline";
+computePipeline.label = "my_compute_pipeline";
 
-console.log(computePipeline.label); // "mycomputepipeline"
+console.log(computePipeline.label); // "my_compute_pipeline"
 ```
 
 Setting a label via a {{domxref("GPUDevice.createComputePipeline()")}} call, and then getting it via `GPUComputePipeline.label`:
@@ -54,10 +54,10 @@ const computePipeline = device.createComputePipeline({
     module: shaderModule,
     entryPoint: "main",
   },
-  label: "mycomputepipeline",
+  label: "my_compute_pipeline",
 });
 
-console.log(computePipeline.label); // "mycomputepipeline"
+console.log(computePipeline.label); // "my_compute_pipeline"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpudevice/label/index.md b/files/en-us/web/api/gpudevice/label/index.md
index b9fc5eb3c4a27a4..521e14002a883f3 100644
--- a/files/en-us/web/api/gpudevice/label/index.md
+++ b/files/en-us/web/api/gpudevice/label/index.md
@@ -34,7 +34,7 @@ async function init() {
   const device = await adapter.requestDevice();
 
   // Set a label
-  device.label = "mylabel";
+  device.label = "my_label";
 
   // Get a label
   console.log(device.label);
diff --git a/files/en-us/web/api/gpuexternaltexture/label/index.md b/files/en-us/web/api/gpuexternaltexture/label/index.md
index 49379197ded19ed..43b24daa801e929 100644
--- a/files/en-us/web/api/gpuexternaltexture/label/index.md
+++ b/files/en-us/web/api/gpuexternaltexture/label/index.md
@@ -30,9 +30,9 @@ const externalTexture = device.importExternalTexture({
   source: video,
 });
 
-externalTexture.label = "myExtTexture";
+externalTexture.label = "my_ext_texture";
 
-console.log(externalTexture.label); // "myExtTexture"
+console.log(externalTexture.label); // "my_ext_texture"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.importExternalTexture()")}} call, and then getting it via `GPUExternalTexture.label`:
@@ -42,10 +42,10 @@ Setting a label via the originating {{domxref("GPUDevice.importExternalTexture()
 
 const externalTexture = device.importExternalTexture({
   source: video,
-  label: "myExtTexture",
+  label: "my_ext_texture",
 });
 
-console.log(externalTexture.label); //  "myExtTexture"
+console.log(externalTexture.label); //  "my_ext_texture"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpupipelineerror/index.md b/files/en-us/web/api/gpupipelineerror/index.md
index 092e9664ae3082c..434ff18d5c3b544 100644
--- a/files/en-us/web/api/gpupipelineerror/index.md
+++ b/files/en-us/web/api/gpupipelineerror/index.md
@@ -27,6 +27,8 @@ _Inherits properties from its parent, {{domxref("DOMException")}}._
 
 ## Examples
 
+<!-- cSpell:ignore maijn -->
+
 In the following snippet we are attempting to create a {{domxref("GPUComputePipeline")}} using {{domxref("GPUDevice.createComputePipelineAsync()")}}. However, we have misspelt our compute pipeline `entryPoint` as `"maijn"` (it should be `"main"`), therefore pipeline creation fails, and our `catch` block prints the resulting reason and error message to the console.
 
 ```js
diff --git a/files/en-us/web/api/gpupipelinelayout/label/index.md b/files/en-us/web/api/gpupipelinelayout/label/index.md
index 6b395cc0b02eb83..2d00a17024acbb4 100644
--- a/files/en-us/web/api/gpupipelinelayout/label/index.md
+++ b/files/en-us/web/api/gpupipelinelayout/label/index.md
@@ -30,9 +30,9 @@ const pipelineLayout = device.createPipelineLayout({
   bindGroupLayouts: [bindGroupLayout],
 });
 
-pipelineLayout.label = "mypipelinelayout";
+pipelineLayout.label = "my_pipeline_layout";
 
-console.log(pipelineLayout.label); // "mypipelinelayout";
+console.log(pipelineLayout.label); // "my_pipeline_layout"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createPipelineLayout()")}} call, and then getting it via `GPUPipelineLayout.label`:
@@ -42,10 +42,10 @@ Setting a label via the originating {{domxref("GPUDevice.createPipelineLayout()"
 
 const pipelineLayout = device.createPipelineLayout({
   bindGroupLayouts: [bindGroupLayout],
-  label: "mypipelinelayout",
+  label: "my_pipeline_layout",
 });
 
-console.log(pipelineLayout.label); // "mypipelinelayout";
+console.log(pipelineLayout.label); // "my_pipeline_layout"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpuqueryset/label/index.md b/files/en-us/web/api/gpuqueryset/label/index.md
index c0890461b52047d..f56ad6be6054202 100644
--- a/files/en-us/web/api/gpuqueryset/label/index.md
+++ b/files/en-us/web/api/gpuqueryset/label/index.md
@@ -29,9 +29,9 @@ const querySet = device.createQuerySet({
   count: 32,
 });
 
-querySet.label = "myqueryset";
+querySet.label = "my_query_set";
 
-console.log(querySet.label); // "myqueryset"
+console.log(querySet.label); // "my_query_set"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createQuerySet()")}} call, and then getting it via `GPUQuerySet.label`:
@@ -40,10 +40,10 @@ Setting a label via the originating {{domxref("GPUDevice.createQuerySet()")}} ca
 const querySet = device.createQuerySet({
   type: "occlusion",
   count: 32,
-  label: "myqueryset",
+  label: "my_query_set",
 });
 
-console.log(querySet.label); // "myqueryset"
+console.log(querySet.label); // "my_query_set"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpuqueue/label/index.md b/files/en-us/web/api/gpuqueue/label/index.md
index 2bb050233f5fe7c..af44a2ab27da0e0 100644
--- a/files/en-us/web/api/gpuqueue/label/index.md
+++ b/files/en-us/web/api/gpuqueue/label/index.md
@@ -24,15 +24,15 @@ A string. If no label value has previously been set, getting the label returns a
 Setting and getting a label via `GPUQueue.label`:
 
 ```js
-device.queue.label = "myqueue";
-console.log(device.queue.label); // "myqueue"
+device.queue.label = "my_queue";
+console.log(device.queue.label); // "my_queue"
 ```
 
 You can also set the queue's label at the time you request the device, like this:
 
 ```js
 const device = adapter.requestDevice({
-  defaultQueue: { label: "myqueue" },
+  defaultQueue: { label: "my_queue" },
 });
 ```
 
diff --git a/files/en-us/web/api/gpurenderbundle/label/index.md b/files/en-us/web/api/gpurenderbundle/label/index.md
index 5f59ee1201bc13e..652872a54b042e3 100644
--- a/files/en-us/web/api/gpurenderbundle/label/index.md
+++ b/files/en-us/web/api/gpurenderbundle/label/index.md
@@ -26,18 +26,18 @@ Setting and getting a label via `GPURenderBundle.label`:
 ```js
 const renderBundle = renderBundleEncoder.finish();
 
-renderBundle.label = "myrenderbundle";
-console.log(renderBundle.label); // "myrenderbundle"
+renderBundle.label = "my_render_bundle";
+console.log(renderBundle.label); // "my_render_bundle"
 ```
 
 Setting a label via the originating {{domxref("GPURenderBundleEncoder.finish()")}} call, and then getting it via `GPURenderBundle.label`:
 
 ```js
 const renderBundle = renderBundleEncoder.finish({
-  label: "myrenderbundle",
+  label: "my_render_bundle",
 });
 
-console.log(renderBundle.label); // "myrenderbundle"
+console.log(renderBundle.label); // "my_render_bundle"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpurenderbundleencoder/insertdebugmarker/index.md b/files/en-us/web/api/gpurenderbundleencoder/insertdebugmarker/index.md
index 2e3bfa65dc4dbf5..586c8efa514c677 100644
--- a/files/en-us/web/api/gpurenderbundleencoder/insertdebugmarker/index.md
+++ b/files/en-us/web/api/gpurenderbundleencoder/insertdebugmarker/index.md
@@ -38,7 +38,7 @@ None ({{jsxref("Undefined")}}).
 ```js
 // ...
 
-bundleEncoder.insertDebugMarker("mymarker");
+bundleEncoder.insertDebugMarker("my_marker");
 
 // ...
 ```
diff --git a/files/en-us/web/api/gpurenderbundleencoder/label/index.md b/files/en-us/web/api/gpurenderbundleencoder/label/index.md
index fec0aa23cf4a143..33edd4be1af7c45 100644
--- a/files/en-us/web/api/gpurenderbundleencoder/label/index.md
+++ b/files/en-us/web/api/gpurenderbundleencoder/label/index.md
@@ -31,8 +31,8 @@ const renderBundleEncoder = device.createRenderBundleEncoder({
   colorFormats: [presentationFormat],
 });
 
-renderBundleEncoder.label = "myrenderbundleencoder";
-console.log(renderBundleEncoder.label); // "myrenderbundleencoder"
+renderBundleEncoder.label = "my_render_bundle_encoder";
+console.log(renderBundleEncoder.label); // "my_render_bundle_encoder"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createRenderBundleEncoder()")}} call, and then getting it via `GPURenderBundleEncoder.label`:
@@ -40,10 +40,10 @@ Setting a label via the originating {{domxref("GPUDevice.createRenderBundleEncod
 ```js
 const renderBundleEncoder = device.createRenderBundleEncoder({
   colorFormats: [presentationFormat],
-  label: "myrenderbundleencoder",
+  label: "my_render_bundle_encoder",
 });
 
-console.log(renderBundleEncoder.label); // "myrenderbundleencoder"
+console.log(renderBundleEncoder.label); // "my_render_bundle_encoder"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpurenderbundleencoder/popdebuggroup/index.md b/files/en-us/web/api/gpurenderbundleencoder/popdebuggroup/index.md
index 4a6d174eaa55121..0eaffc24fa62588 100644
--- a/files/en-us/web/api/gpurenderbundleencoder/popdebuggroup/index.md
+++ b/files/en-us/web/api/gpurenderbundleencoder/popdebuggroup/index.md
@@ -45,7 +45,7 @@ The following criteria must be met when calling **`popDebugGroup()`**, otherwise
 
 const bundleEncoder = device.createRenderBundleEncoder(renderBundleDescriptor);
 
-bundleEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group
+bundleEncoder.pushDebugGroup("my_group_marker"); // Start labeled debug group
 
 bundleEncoder.setPipeline(renderPipeline);
 bundleEncoder.setVertexBuffer(0, vertexBuffer);
diff --git a/files/en-us/web/api/gpurenderbundleencoder/pushdebuggroup/index.md b/files/en-us/web/api/gpurenderbundleencoder/pushdebuggroup/index.md
index 6108bbf03d785fe..cb1aa3c73a6f12a 100644
--- a/files/en-us/web/api/gpurenderbundleencoder/pushdebuggroup/index.md
+++ b/files/en-us/web/api/gpurenderbundleencoder/pushdebuggroup/index.md
@@ -40,7 +40,7 @@ None ({{jsxref("Undefined")}}).
 
 const bundleEncoder = device.createRenderBundleEncoder(renderBundleDescriptor);
 
-bundleEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group
+bundleEncoder.pushDebugGroup("my_group_marker"); // Start labeled debug group
 
 bundleEncoder.setPipeline(renderPipeline);
 bundleEncoder.setVertexBuffer(0, vertexBuffer);
diff --git a/files/en-us/web/api/gpurenderpassencoder/insertdebugmarker/index.md b/files/en-us/web/api/gpurenderpassencoder/insertdebugmarker/index.md
index 4f5945a4b3b236a..a1ba127e3294c98 100644
--- a/files/en-us/web/api/gpurenderpassencoder/insertdebugmarker/index.md
+++ b/files/en-us/web/api/gpurenderpassencoder/insertdebugmarker/index.md
@@ -35,7 +35,7 @@ None ({{jsxref("Undefined")}}).
 ```js
 // ...
 
-passEncoder.insertDebugMarker("mymarker");
+passEncoder.insertDebugMarker("my_marker");
 
 // ...
 ```
diff --git a/files/en-us/web/api/gpurenderpassencoder/label/index.md b/files/en-us/web/api/gpurenderpassencoder/label/index.md
index 2dd3c0e5c3768a0..4951e88adcd800c 100644
--- a/files/en-us/web/api/gpurenderpassencoder/label/index.md
+++ b/files/en-us/web/api/gpurenderpassencoder/label/index.md
@@ -38,9 +38,9 @@ const renderPassDescriptor = {
 };
 
 const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-passEncoder.label = "myrenderpassencoder";
+passEncoder.label = "my_render_pass_encoder";
 
-console.log(passEncoder.label); // "myrenderpassencoder"
+console.log(passEncoder.label); // "my_render_pass_encoder"
 ```
 
 Setting a label via the originating {{domxref("GPUCommandEncoder.beginRenderPass()")}} call, and then getting it via `GPURenderPassEncoder.label`:
@@ -57,12 +57,12 @@ const renderPassDescriptor = {
       view: context.getCurrentTexture().createView(),
     },
   ],
-  label: "myrenderpassencoder",
+  label: "my_render_pass_encoder",
 };
 
 const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
 
-console.log(passEncoder.label); // "myrenderpassencoder"
+console.log(passEncoder.label); // "my_render_pass_encoder"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpurenderpassencoder/popdebuggroup/index.md b/files/en-us/web/api/gpurenderpassencoder/popdebuggroup/index.md
index 3215a5d7dab9d4c..1b23f42148a581b 100644
--- a/files/en-us/web/api/gpurenderpassencoder/popdebuggroup/index.md
+++ b/files/en-us/web/api/gpurenderpassencoder/popdebuggroup/index.md
@@ -42,7 +42,7 @@ The following criteria must be met when calling **`popDebugGroup()`**, otherwise
 
 const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
 
-passEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group
+passEncoder.pushDebugGroup("my_group_marker"); // Start labeled debug group
 
 passEncoder.setPipeline(renderPipeline);
 passEncoder.setVertexBuffer(0, vertexBuffer);
diff --git a/files/en-us/web/api/gpurenderpassencoder/pushdebuggroup/index.md b/files/en-us/web/api/gpurenderpassencoder/pushdebuggroup/index.md
index 75b7606d9ef680b..adebd62755f7a59 100644
--- a/files/en-us/web/api/gpurenderpassencoder/pushdebuggroup/index.md
+++ b/files/en-us/web/api/gpurenderpassencoder/pushdebuggroup/index.md
@@ -37,7 +37,7 @@ None ({{jsxref("Undefined")}}).
 
 const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
 
-passEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group
+passEncoder.pushDebugGroup("my_group_marker"); // Start labeled debug group
 
 passEncoder.setPipeline(renderPipeline);
 passEncoder.setVertexBuffer(0, vertexBuffer);
diff --git a/files/en-us/web/api/gpurenderpipeline/label/index.md b/files/en-us/web/api/gpurenderpipeline/label/index.md
index 5a3da24873b9aac..201cc27aabfde6d 100644
--- a/files/en-us/web/api/gpurenderpipeline/label/index.md
+++ b/files/en-us/web/api/gpurenderpipeline/label/index.md
@@ -49,9 +49,9 @@ const pipelineDescriptor = {
 
 const renderPipeline = device.createRenderPipeline(pipelineDescriptor);
 
-renderPipeline.label = "myrenderpipeline";
+renderPipeline.label = "my_render_pipeline";
 
-console.log(renderPipeline.label); // "myrenderpipeline"
+console.log(renderPipeline.label); // "my_render_pipeline"
 ```
 
 Setting a label via a {{domxref("GPUDevice.createRenderPipeline()")}} call, and then getting it via `GPURenderPipeline.label`:
@@ -78,12 +78,12 @@ const pipelineDescriptor = {
     topology: "triangle-list",
   },
   layout: "auto",
-  label: "myrenderpipeline",
+  label: "my_render_pipeline",
 };
 
 const renderPipeline = device.createRenderPipeline(pipelineDescriptor);
 
-console.log(renderPipeline.label); // "myrenderpipeline"
+console.log(renderPipeline.label); // "my_render_pipeline"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpusampler/label/index.md b/files/en-us/web/api/gpusampler/label/index.md
index 19f9e8fd7235408..a39ad0ea08dc675 100644
--- a/files/en-us/web/api/gpusampler/label/index.md
+++ b/files/en-us/web/api/gpusampler/label/index.md
@@ -30,9 +30,9 @@ const sampler = device.createSampler({
   compare: "less",
 });
 
-sampler.label = "mysampler";
+sampler.label = "my_sampler";
 
-console.log(sampler.label); // "mysampler"
+console.log(sampler.label); // "my_sampler"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createSampler()")}} call, and then getting it via `GPUSampler.label`:
@@ -42,10 +42,10 @@ Setting a label via the originating {{domxref("GPUDevice.createSampler()")}} cal
 
 const sampler = device.createSampler({
   compare: "less",
-  label: "mysampler",
+  label: "my_sampler",
 });
 
-console.log(sampler.label); // "mysampler"
+console.log(sampler.label); // "my_sampler"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gpushadermodule/label/index.md b/files/en-us/web/api/gpushadermodule/label/index.md
index 92c9a1b7d1e2054..a31a6c8dae66320 100644
--- a/files/en-us/web/api/gpushadermodule/label/index.md
+++ b/files/en-us/web/api/gpushadermodule/label/index.md
@@ -30,9 +30,9 @@ const shaderModule = device.createShaderModule({
   code: shaders,
 });
 
-shaderModule.label = "myshader";
+shaderModule.label = "my_shader";
 
-console.log(shaderModule.label); // "myshader"
+console.log(shaderModule.label); // "my_shader"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createShaderModule()")}} call, and then getting it via `GPUShaderModule.label`:
@@ -42,10 +42,10 @@ Setting a label via the originating {{domxref("GPUDevice.createShaderModule()")}
 
 const shaderModule = device.createShaderModule({
   code: shaders,
-  label: "myshader",
+  label: "my_shader",
 });
 
-console.log(shaderModule.label); // "myshader"
+console.log(shaderModule.label); // "my_shader"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gputexture/label/index.md b/files/en-us/web/api/gputexture/label/index.md
index f53e0048c4a9809..eb6c3ca72082c11 100644
--- a/files/en-us/web/api/gputexture/label/index.md
+++ b/files/en-us/web/api/gputexture/label/index.md
@@ -32,9 +32,9 @@ const depthTexture = device.createTexture({
   usage: GPUTextureUsage.RENDER_ATTACHMENT,
 });
 
-depthTexture.label = "mytexture";
+depthTexture.label = "my_texture";
 
-console.log(depthTexture.label); // "mytexture"
+console.log(depthTexture.label); // "my_texture"
 ```
 
 Setting a label via the originating {{domxref("GPUDevice.createTexture()")}} call, and then getting it via `GPUTexture.label`:
@@ -46,10 +46,10 @@ const depthTexture = device.createTexture({
   size: [canvas.width, canvas.height],
   format: "depth24plus",
   usage: GPUTextureUsage.RENDER_ATTACHMENT,
-  label: "mytexture",
+  label: "my_texture",
 });
 
-console.log(depthTexture.label); // "mytexture"
+console.log(depthTexture.label); // "my_texture"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/gputextureview/label/index.md b/files/en-us/web/api/gputextureview/label/index.md
index 828226debaba5f9..925ec088bf2871a 100644
--- a/files/en-us/web/api/gputextureview/label/index.md
+++ b/files/en-us/web/api/gputextureview/label/index.md
@@ -34,9 +34,9 @@ const depthTexture = device.createTexture({
 
 const view = depthTexture.createView();
 
-view.label = "myview";
+view.label = "my_view";
 
-console.log(view.label); // "myview"
+console.log(view.label); // "my_view"
 ```
 
 Setting a label via the originating {{domxref("GPUTexture.createView()")}} call, and then getting it via `GPUTextureView.label`:
@@ -51,10 +51,10 @@ const depthTexture = device.createTexture({
 });
 
 const view = depthTexture.createView({
-  label: "myview",
+  label: "my_view",
 });
 
-console.log(view.label); // "myview"
+console.log(view.label); // "my_view"
 ```
 
 ## Specifications
diff --git a/files/en-us/web/api/hashchangeevent/index.md b/files/en-us/web/api/hashchangeevent/index.md
index 37ae5132f627151..28f5d7c02c1f541 100644
--- a/files/en-us/web/api/hashchangeevent/index.md
+++ b/files/en-us/web/api/hashchangeevent/index.md
@@ -37,8 +37,8 @@ _This interface has no methods of its own, but inherits the methods of its paren
 
 ```js
 function locationHashChanged() {
-  if (location.hash === "#somecoolfeature") {
-    somecoolfeature();
+  if (location.hash === "#some-cool-feature") {
+    someCoolFeature();
   }
 }
 
diff --git a/files/en-us/web/api/houdini_apis/index.md b/files/en-us/web/api/houdini_apis/index.md
index 6aaf495a619f23b..647e1af9eff2ad9 100644
--- a/files/en-us/web/api/houdini_apis/index.md
+++ b/files/en-us/web/api/houdini_apis/index.md
@@ -33,7 +33,7 @@ requiring a single line of JavaScript to import configurable components:
 no pre-processors, post-processors or JavaScript frameworks needed.
 
 ```js
-CSS.paintWorklet.addModule("csscomponent.js");
+CSS.paintWorklet.addModule("css-component.js");
 ```
 
 This added module contains {{domxref("PaintWorkletGlobalScope.registerPaint")}} functions,
@@ -56,7 +56,7 @@ In the following example the `paint()` function is passed a worklet called `myCo
 li {
   background-image: paint(myComponent, stroke, 10px);
   --highlights: blue;
-  --lowlights: green;
+  --theme: green;
 }
 ```
 
diff --git a/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md b/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md
index ed307a7e35d624e..33b8eea0bca745f 100644
--- a/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md
+++ b/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md
@@ -140,7 +140,7 @@ This is further alleviated by using [asynchronous JavaScript](/en-US/docs/Learn/
 
 Microtasks are another solution to this problem, providing a finer degree of access by making it possible to schedule code to run before the next iteration of the event loop begins, instead of having to wait until the next one.
 
-The microtask queue has been around for a while, but it's historically been used only internally in order to drive things like promises. The addition of {{domxref("Window.queueMicrotask()", "queueMicrotask()")}}, exposing it to web developers, creates a unified queue for microtasks which is used wherever it's necessary to have the ability to schedule code to run safely when there are no execution contexts left on the JavaScript execution context stack. Across multiple instances and across all browsers and JavaScript runtimes, a standardized microqueue mechanism means these microtasks will operate reliably in the same order, thus avoiding potentially difficult to find bugs.
+The microtask queue has been around for a while, but it's historically been used only internally in order to drive things like promises. The addition of {{domxref("Window.queueMicrotask()", "queueMicrotask()")}}, exposing it to web developers, creates a unified queue for microtasks which is used wherever it's necessary to have the ability to schedule code to run safely when there are no execution contexts left on the JavaScript execution context stack. Across multiple instances and across all browsers and JavaScript runtimes, a standardized queue mechanism means these microtasks will operate reliably in the same order, thus avoiding potentially difficult to find bugs.
 
 ## See also
 
diff --git a/files/en-us/web/api/html_drag_and_drop_api/recommended_drag_types/index.md b/files/en-us/web/api/html_drag_and_drop_api/recommended_drag_types/index.md
index a07342450031558..0447db4a7adb680 100644
--- a/files/en-us/web/api/html_drag_and_drop_api/recommended_drag_types/index.md
+++ b/files/en-us/web/api/html_drag_and_drop_api/recommended_drag_types/index.md
@@ -109,8 +109,8 @@ It is important to set the data in the right order, from most-specific to least-
 
 ```js
 const dt = event.dataTransfer;
-dt.setData("text/uri-list", imageurl);
-dt.setData("text/plain", imageurl);
+dt.setData("text/uri-list", imageURL);
+dt.setData("text/plain", imageURL);
 ```
 
 ## Dragging Nodes
diff --git a/files/en-us/web/api/idbobjectstore/getkey/index.md b/files/en-us/web/api/idbobjectstore/getkey/index.md
index f9ec4a7a6f0f25e..0d0a375e36eb56e 100644
--- a/files/en-us/web/api/idbobjectstore/getkey/index.md
+++ b/files/en-us/web/api/idbobjectstore/getkey/index.md
@@ -50,7 +50,7 @@ This method may raise a {{domxref("DOMException")}} of one of the following type
 let openRequest = indexedDB.open("telemetry");
 openRequest.onsuccess = (event) => {
   let db = event.target.result;
-  let store = db.transaction("netlogs").objectStore("netlogs");
+  let store = db.transaction("net-logs").objectStore("net-logs");
 
   let today = new Date();
   let yesterday = new Date(today);
diff --git a/files/en-us/web/api/indexeddb_api/using_indexeddb/index.md b/files/en-us/web/api/indexeddb_api/using_indexeddb/index.md
index ea6c5af669d6332..89bca133149f1c4 100644
--- a/files/en-us/web/api/indexeddb_api/using_indexeddb/index.md
+++ b/files/en-us/web/api/indexeddb_api/using_indexeddb/index.md
@@ -658,6 +658,6 @@ Further reading for you to find out more information if desired.
 - [MiniMongo](https://github.com/mWater/minimongo): A client-side in-memory MongoDB backed by localstorage with server sync over http. MiniMongo is used by MeteorJS.
 - [PouchDB](https://pouchdb.com/): A client-side implementation of CouchDB in the browser using IndexedDB
 - [IDB](https://github.com/jakearchibald/idb): A tiny library that mostly mirrors the IndexedDB API but with small usability improvements.
-- [idb-keyval](https://www.npmjs.com/package/idb-keyval): A super-simple-small (\~600B) promise-based keyval store implemented with IndexedDB
+- [idb-keyval](https://www.npmjs.com/package/idb-keyval): A super-simple-small (\~600B) promise-based key-value store implemented with IndexedDB
 - [$mol_db](https://github.com/hyoo-ru/mam_mol/tree/master/db): Tiny (\~1.3kB) TypeScript facade with promise-based API and automatic migrations.
 - [RxDB](https://rxdb.info/): A NoSQL client side database that can be used on top of IndexedDB. Supports indexes, compression and replication. Also adds cross tab functionality and observability to IndexedDB.
diff --git a/files/en-us/web/api/media_capture_and_streams_api/constraints/index.md b/files/en-us/web/api/media_capture_and_streams_api/constraints/index.md
index baafea52ef55999..72b821caf12032d 100644
--- a/files/en-us/web/api/media_capture_and_streams_api/constraints/index.md
+++ b/files/en-us/web/api/media_capture_and_streams_api/constraints/index.md
@@ -236,22 +236,22 @@ The HTML and CSS for this example are pretty simple, and aren't shown here. You
 <ul id="supportedConstraints"></ul>
 <div id="startButton" class="button">Start</div>
 <div class="wrapper">
-  <div class="trackrow">
-    <div class="leftside">
+  <div class="track-row">
+    <div class="left-side">
       <h3>Requested video constraints:</h3>
       <textarea id="videoConstraintEditor" cols="32" rows="8"></textarea>
     </div>
-    <div class="rightside">
+    <div class="right-side">
       <h3>Actual video settings:</h3>
       <textarea id="videoSettingsText" cols="32" rows="8" disabled></textarea>
     </div>
   </div>
-  <div class="trackrow">
-    <div class="leftside">
+  <div class="track-row">
+    <div class="left-side">
       <h3>Requested audio constraints:</h3>
       <textarea id="audioConstraintEditor" cols="32" rows="8"></textarea>
     </div>
-    <div class="rightside">
+    <div class="right-side">
       <h3>Actual audio settings:</h3>
       <textarea id="audioSettingsText" cols="32" rows="8" disabled></textarea>
     </div>
@@ -296,16 +296,16 @@ video {
   width: 600px;
 }
 
-.trackrow {
+.track-row {
   height: 200px;
 }
 
-.leftside {
+.left-side {
   float: left;
   width: calc(calc(100% / 2) - 10px);
 }
 
-.rightside {
+.right-side {
   float: right;
   width: calc(calc(100% / 2) - 10px);
 }
diff --git a/files/en-us/web/api/media_capture_and_streams_api/taking_still_photos/index.md b/files/en-us/web/api/media_capture_and_streams_api/taking_still_photos/index.md
index 7c606a91a03a297..2241067d2ff02d3 100644
--- a/files/en-us/web/api/media_capture_and_streams_api/taking_still_photos/index.md
+++ b/files/en-us/web/api/media_capture_and_streams_api/taking_still_photos/index.md
@@ -21,7 +21,7 @@ The first panel on the left contains two components: a {{HTMLElement("video")}}
 ```html
 <div class="camera">
   <video id="video">Video stream not available.</video>
-  <button id="startbutton">Take photo</button>
+  <button id="start-button">Take photo</button>
 </div>
 ```
 
@@ -58,7 +58,7 @@ We start by wrapping the whole script in an anonymous function to avoid global v
   let video = null;
   let canvas = null;
   let photo = null;
-  let startbutton = null;
+  let startButton = null;
 ```
 
 Those variables are:
@@ -75,7 +75,7 @@ Those variables are:
   - : This will be a reference to the {{HTMLElement("canvas")}} element after the page is done loading.
 - `photo`
   - : This will be a reference to the {{HTMLElement("img")}} element after the page is done loading.
-- `startbutton`
+- `startButton`
   - : This will be a reference to the {{HTMLElement("button")}} element that's used to trigger capture. We'll get that after the page is done loading.
 
 ### The startup() function
@@ -91,7 +91,7 @@ First, we grab references to the major elements we need to be able to access.
     video = document.getElementById('video');
     canvas = document.getElementById('canvas');
     photo = document.getElementById('photo');
-    startbutton = document.getElementById('startbutton');
+    startButton = document.getElementById('start-button');
 ```
 
 #### Get the media stream
@@ -148,38 +148,38 @@ Finally, the `width` and `height` of both the video and the canvas are set to ma
 
 #### Handle clicks on the button
 
-To capture a still photo each time the user clicks the `startbutton`, we need to add an event listener to the button, to be called when the {{domxref("Element/click_event", "click")}} event is issued:
+To capture a still photo each time the user clicks the `startButton`, we need to add an event listener to the button, to be called when the {{domxref("Element/click_event", "click")}} event is issued:
 
 ```js
-startbutton.addEventListener(
+startButton.addEventListener(
   "click",
   (ev) => {
-    takepicture();
+    takePicture();
     ev.preventDefault();
   },
   false,
 );
 ```
 
-This method is simple enough: it just calls our `takepicture()` function, defined below in the section [Capturing a frame from the stream](#capturing_a_frame_from_the_stream), then calls {{domxref("Event.preventDefault()")}} on the received event to prevent the click from being handled more than once.
+This method is simple enough: it just calls our `takePicture()` function, defined below in the section [Capturing a frame from the stream](#capturing_a_frame_from_the_stream), then calls {{domxref("Event.preventDefault()")}} on the received event to prevent the click from being handled more than once.
 
 #### Wrapping up the startup() method
 
 There are only two more lines of code in the `startup()` method:
 
 ```js
-    clearphoto();
+    clearPhoto();
   }
 ```
 
-This is where we call the `clearphoto()` method we'll describe below in the section [Clearing the photo box](#clearing_the_photo_box).
+This is where we call the `clearPhoto()` method we'll describe below in the section [Clearing the photo box](#clearing_the_photo_box).
 
 ### Clearing the photo box
 
 Clearing the photo box involves creating an image, then converting it into a format usable by the {{HTMLElement("img")}} element that displays the most recently captured frame. That code looks like this:
 
 ```js
-function clearphoto() {
+function clearPhoto() {
   const context = canvas.getContext("2d");
   context.fillStyle = "#AAA";
   context.fillRect(0, 0, canvas.width, canvas.height);
@@ -195,10 +195,10 @@ Last in this function, we convert the canvas into a PNG image and call {{domxref
 
 ### Capturing a frame from the stream
 
-There's one last function to define, and it's the point to the entire exercise: the `takepicture()` function, whose job it is to capture the currently displayed video frame, convert it into a PNG file, and display it in the captured frame box. The code looks like this:
+There's one last function to define, and it's the point to the entire exercise: the `takePicture()` function, whose job it is to capture the currently displayed video frame, convert it into a PNG file, and display it in the captured frame box. The code looks like this:
 
 ```js
-function takepicture() {
+function takePicture() {
   const context = canvas.getContext("2d");
   if (width && height) {
     canvas.width = width;
@@ -208,7 +208,7 @@ function takepicture() {
     const data = canvas.toDataURL("image/png");
     photo.setAttribute("src", data);
   } else {
-    clearphoto();
+    clearPhoto();
   }
 }
 ```
@@ -222,14 +222,14 @@ Then, if the width and height are both non-zero (meaning that there's at least p
 
 Once the canvas contains the captured image, we convert it to PNG format by calling {{domxref("HTMLCanvasElement.toDataURL()")}} on it; finally, we call {{domxref("Element.setAttribute", "photo.setAttribute()")}} to make our captured still box display the image.
 
-If there isn't a valid image available (that is, the `width` and `height` are both 0), we clear the contents of the captured frame box by calling `clearphoto()`.
+If there isn't a valid image available (that is, the `width` and `height` are both 0), we clear the contents of the captured frame box by calling `clearPhoto()`.
 
 ## Demo
 
 ### HTML
 
 ```html
-<div class="contentarea">
+<div class="content-area">
   <h1>MDN - navigator.mediaDevices.getUserMedia(): Still photo capture demo</h1>
   <p>
     This example demonstrates how to set up a media stream using your built-in
@@ -237,7 +237,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
   </p>
   <div class="camera">
     <video id="video">Video stream not available.</video>
-    <button id="startbutton">Take photo</button>
+    <button id="start-button">Take photo</button>
   </div>
   <canvas id="canvas"> </canvas>
   <div class="output">
@@ -286,7 +286,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
   vertical-align: top;
 }
 
-#startbutton {
+#start-button {
   display: block;
   position: relative;
   margin-left: auto;
@@ -300,7 +300,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
   color: rgb(255 255 255 / 100%);
 }
 
-.contentarea {
+.content-area {
   font-size: 16px;
   font-family: "Lucida Grande", "Arial", sans-serif;
   width: 760px;
@@ -329,14 +329,14 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
   let video = null;
   let canvas = null;
   let photo = null;
-  let startbutton = null;
+  let startButton = null;
 
   function showViewLiveResultButton() {
     if (window.self !== window.top) {
       // Ensure that if our document is in a frame, we get the user
       // to first open it in its own tab or window. Otherwise, it
       // won't be able to request permission for camera access.
-      document.querySelector(".contentarea").remove();
+      document.querySelector(".content-area").remove();
       const button = document.createElement("button");
       button.textContent = "View live result of the example code above";
       document.body.append(button);
@@ -353,7 +353,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
     video = document.getElementById("video");
     canvas = document.getElementById("canvas");
     photo = document.getElementById("photo");
-    startbutton = document.getElementById("startbutton");
+    startButton = document.getElementById("start-button");
 
     navigator.mediaDevices
       .getUserMedia({ video: true, audio: false })
@@ -388,22 +388,22 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
       false,
     );
 
-    startbutton.addEventListener(
+    startButton.addEventListener(
       "click",
       (ev) => {
-        takepicture();
+        takePicture();
         ev.preventDefault();
       },
       false,
     );
 
-    clearphoto();
+    clearPhoto();
   }
 
   // Fill the photo with an indication that none has been
   // captured.
 
-  function clearphoto() {
+  function clearPhoto() {
     const context = canvas.getContext("2d");
     context.fillStyle = "#AAA";
     context.fillRect(0, 0, canvas.width, canvas.height);
@@ -418,7 +418,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
   // drawing that to the screen, we can change its size and/or apply
   // other changes before drawing it.
 
-  function takepicture() {
+  function takePicture() {
     const context = canvas.getContext("2d");
     if (width && height) {
       canvas.width = width;
@@ -428,7 +428,7 @@ If there isn't a valid image available (that is, the `width` and `height` are bo
       const data = canvas.toDataURL("image/png");
       photo.setAttribute("src", data);
     } else {
-      clearphoto();
+      clearPhoto();
     }
   }
 
diff --git a/files/en-us/web/api/mediastream/index.md b/files/en-us/web/api/mediastream/index.md
index fb62a3d3a41b13b..86f8a29e5658cfd 100644
--- a/files/en-us/web/api/mediastream/index.md
+++ b/files/en-us/web/api/mediastream/index.md
@@ -38,7 +38,7 @@ _This interface inherits methods from its parent, {{domxref("EventTarget")}}._
 - {{domxref("MediaStream.getAudioTracks()")}}
   - : Returns a list of the {{domxref("MediaStreamTrack")}} objects stored in the `MediaStream` object that have their `kind` attribute set to `audio`. The order is not defined, and may not only vary from one browser to another, but also from one call to another.
 - {{domxref("MediaStream.getTrackById()")}}
-  - : Returns the track whose ID corresponds to the one given in parameters, `trackid`. If no parameter is given, or if no track with that ID does exist, it returns `null`. If several tracks have the same ID, it returns the first one.
+  - : Returns the track whose ID corresponds to the one given in parameters, `trackId`. If no parameter is given, or if no track with that ID does exist, it returns `null`. If several tracks have the same ID, it returns the first one.
 - {{domxref("MediaStream.getTracks()")}}
   - : Returns a list of all {{domxref("MediaStreamTrack")}} objects stored in the `MediaStream` object, regardless of the value of the `kind` attribute. The order is not defined, and may not only vary from one browser to another, but also from one call to another.
 - {{domxref("MediaStream.getVideoTracks()")}}
diff --git a/files/en-us/web/api/mediastream_recording_api/index.md b/files/en-us/web/api/mediastream_recording_api/index.md
index 4608c8bd8ef0d17..5e31c524636377a 100644
--- a/files/en-us/web/api/mediastream_recording_api/index.md
+++ b/files/en-us/web/api/mediastream_recording_api/index.md
@@ -93,7 +93,7 @@ In this code snippet, `enumerateDevices()` is used to examine the available inpu
 ```js
 navigator.mediaDevices.enumerateDevices().then((devices) => {
   devices.forEach((device) => {
-    const menu = document.getElementById("inputdevices");
+    const menu = document.getElementById("input-devices");
     if (device.kind === "audioinput") {
       const item = document.createElement("option");
       item.textContent = device.label;
diff --git a/files/en-us/web/api/metadata/modificationtime/index.md b/files/en-us/web/api/metadata/modificationtime/index.md
index d4423afecfec79d..7164846e2eb1b06 100644
--- a/files/en-us/web/api/metadata/modificationtime/index.md
+++ b/files/en-us/web/api/metadata/modificationtime/index.md
@@ -25,14 +25,14 @@ A {{jsxref("Date")}} timestamp indicating when the file system entry was last ch
 
 ## Examples
 
-This example tries to get a particular working file at `tmp/workfile.json`.
+This example tries to get a particular working file at `tmp/work-file.json`.
 Once that file has been found, its metadata is obtained and the file's modification
 timestamp year is compared to the current year. If it was last modified in a year at
 least five prior to the current year, the file is removed and a new one is created.
 
 ```js
 workingDirectory.getFile(
-  "tmp/workfile.json",
+  "tmp/work-file.json",
   { create: true },
   (fileEntry) => {
     fileEntry.getMetadata((metadata) => {
@@ -42,7 +42,7 @@ workingDirectory.getFile(
       ) {
         fileEntry.remove(() => {
           workingDirectory.getFile(
-            "tmp/workfile.json",
+            "tmp/work-file.json",
             { create: true },
             (newEntry) => {
               fileEntry = newEntry;
diff --git a/files/en-us/web/api/midiport/index.md b/files/en-us/web/api/midiport/index.md
index 8a4747e7595b239..1a83df07d4a045f 100644
--- a/files/en-us/web/api/midiport/index.md
+++ b/files/en-us/web/api/midiport/index.md
@@ -98,7 +98,7 @@ The following example takes the list of input ports and adds them to a select li
 inputs.forEach((port, key) => {
   const opt = document.createElement("option");
   opt.text = port.name;
-  document.getElementById("inputportselector").add(opt);
+  document.getElementById("port-selector").add(opt);
 });
 ```
 
diff --git a/files/en-us/web/api/mutationobserver/observe/index.md b/files/en-us/web/api/mutationobserver/observe/index.md
index 82cded86221f972..cfcf82064f8d8f7 100644
--- a/files/en-us/web/api/mutationobserver/observe/index.md
+++ b/files/en-us/web/api/mutationobserver/observe/index.md
@@ -166,7 +166,7 @@ function callback(mutationList) {
   });
 }
 
-const userListElement = document.querySelector("#userlist");
+const userListElement = document.querySelector("#user-list");
 
 const observer = new MutationObserver(callback);
 observer.observe(userListElement, {