Lint: camelCase JavaScript identifiers (mdn#41775)

* Lint: camelCase JavaScript identifiers

* Revert

* Fix more

Author: Josh-Cena

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

@@ -486,8 +486,8 @@ As you can see, our store is just an object containing `subscribe()`, `set()`, a
 Just for reference, here's a basic working store implemented from scratch:
 
 ```js
-export const writable = (initial_value = 0) => {
-  let value = initial_value; // content of the store
+export const writable = (initialValue = 0) => {
+  let value = initialValue; // content of the store
   let subs = []; // subscriber's handlers
 
   const subscribe = (handler) => {
@@ -496,13 +496,13 @@ export const writable = (initial_value = 0) => {
     return () => (subs = subs.filter((sub) => sub !== handler)); // return unsubscribe function
   };
 
-  const set = (new_value) => {
-    if (value === new_value) return; // same value, exit
-    value = new_value; // update value
+  const set = (newValue) => {
+    if (value === newValue) return; // same value, exit
+    value = newValue; // update value
     subs.forEach((sub) => sub(value)); // update subscribers
   };
 
-  const update = (update_fn) => set(update_fn(value)); // update function
+  const update = (updateFn) => set(updateFn(value)); // update function
 
   return { subscribe, set, update }; // store contract
 };

files/en-us/learn_web_development/extensions/testing/feature_detection/index.md

@@ -149,11 +149,11 @@ Common patterns for detectable features include:
     This example shows a way of detecting [Canvas API](/en-US/docs/Web/API/Canvas_API) support:
 
     ```js
-    function supports_canvas() {
+    function supportsCanvas() {
       return !!document.createElement("canvas").getContext;
     }
 
-    if (supports_canvas()) {
+    if (supportsCanvas()) {
       // Create and draw on canvas elements
     }
     ```

files/en-us/learn_web_development/extensions/testing/your_own_automation_environment/index.md

@@ -137,8 +137,8 @@ There is also nothing to stop you running the test on multiple browsers simultan
    ```js
    const { Builder, Browser, By, Key } = require("selenium-webdriver");
 
-   const driver_fx = new Builder().forBrowser(Browser.FIREFOX).build();
-   const driver_chr = new Builder().forBrowser(Browser.CHROME).build();
+   const driverFx = new Builder().forBrowser(Browser.FIREFOX).build();
+   const driverChr = new Builder().forBrowser(Browser.CHROME).build();
 
    async function searchTest(driver) {
      try {
@@ -156,8 +156,8 @@ There is also nothing to stop you running the test on multiple browsers simultan
      }
    }
 
-   searchTest(driver_fx);
-   searchTest(driver_chr);
+   searchTest(driverFx);
+   searchTest(driverChr);
    ```
 
 3. In terminal, make sure you are inside your project folder, then enter the following command:

files/en-us/web/api/baseaudiocontext/createwaveshaper/index.md

@@ -49,12 +49,12 @@ const distortion = audioCtx.createWaveShaper();
 
 function makeDistortionCurve(amount) {
   const k = typeof amount === "number" ? amount : 50;
-  const n_samples = 44100;
-  const curve = new Float32Array(n_samples);
+  const numSamples = 44100;
+  const curve = new Float32Array(numSamples);
   const deg = Math.PI / 180;
 
-  for (let i = 0; i < n_samples; i++) {
-    const x = (i * 2) / n_samples - 1;
+  for (let i = 0; i < numSamples; i++) {
+    const x = (i * 2) / numSamples - 1;
     curve[i] = ((3 + k) * x * 20 * deg) / (Math.PI + k * Math.abs(x));
   }
   return curve;

files/en-us/web/api/canvasrenderingcontext2d/arcto/index.md

@@ -371,18 +371,18 @@ function findConstruction([P0, P1, P2], r, canvasSize, errorTolCenter) {
   const dir2Mag = Math2D.L2(dir2);
 
   /* Make direction vectors unit length */
-  const dir1_unit = Math2D.vector(dir1.x / dir1Mag, dir1.y / dir1Mag);
-  const dir2_unit = Math2D.vector(dir2.x / dir2Mag, dir2.y / dir2Mag);
+  const dir1Unit = Math2D.vector(dir1.x / dir1Mag, dir1.y / dir1Mag);
+  const dir2Unit = Math2D.vector(dir2.x / dir2Mag, dir2.y / dir2Mag);
 
   /* Angle between lines -- cos angle = a.b/(|a||b|)
    * Using unit vectors, so |a| = |b| = 1 */
-  const dp = Math2D.dot(dir1_unit, dir2_unit);
+  const dp = Math2D.dot(dir1Unit, dir2Unit);
   /* Test for collinearity */
   if (Math.abs(dp) > 0.999999) {
     /* Angle 0 or 180 degrees, or nearly so */
     return [false];
   }
-  const angle = Math.acos(Math2D.dot(dir1_unit, dir2_unit));
+  const angle = Math.acos(Math2D.dot(dir1Unit, dir2Unit));
 
   /* Distance to tangent points from P1 --
    * (T1, P1, C) form a right triangle (T2, P1, C) same triangle.
@@ -391,16 +391,16 @@ function findConstruction([P0, P1, P2], r, canvasSize, errorTolCenter) {
   const distToTangent = r / Math.tan(0.5 * angle);
 
   /* Locate tangent points */
-  const T1 = Math2D.linePointAt(P1, distToTangent, dir1_unit);
-  const T2 = Math2D.linePointAt(P1, distToTangent, dir2_unit);
+  const T1 = Math2D.linePointAt(P1, distToTangent, dir1Unit);
+  const T2 = Math2D.linePointAt(P1, distToTangent, dir2Unit);
 
   /* Center is along normal to tangent at tangent point at
    * a distance equal to the radius of the circle.
    * Locate center two ways. Should be equal */
-  const dirT2_T1 = Math2D.vector(T2.x - T1.x, T2.y - T1.y);
-  const dirT1_T2 = Math2D.vector(-dirT2_T1.x, -dirT2_T1.y);
-  const C1 = findCenter(T1, dir1_unit, r, dirT2_T1);
-  const C2 = findCenter(T2, dir2_unit, r, dirT1_T2);
+  const dirT2T1 = Math2D.vector(T2.x - T1.x, T2.y - T1.y);
+  const dirT1T2 = Math2D.vector(-dirT2T1.x, -dirT2T1.y);
+  const C1 = findCenter(T1, dir1Unit, r, dirT2T1);
+  const C2 = findCenter(T2, dir2Unit, r, dirT1T2);
 
   /* Error in center calculations */
   const deltaC = Math2D.vector(C2.x - C1.x, C2.y - C1.y);
@@ -423,8 +423,8 @@ function findConstruction([P0, P1, P2], r, canvasSize, errorTolCenter) {
    * is assured to be sufficiently far away and has the advantage of
    * being easily found. */
   const distToInf = canvasSize.x + canvasSize.y;
-  const L1inf = Math2D.linePointAt(P1, distToInf, dir1_unit);
-  const L2inf = Math2D.linePointAt(P1, distToInf, dir2_unit);
+  const L1inf = Math2D.linePointAt(P1, distToInf, dir1Unit);
+  const L2inf = Math2D.linePointAt(P1, distToInf, dir2Unit);
 
   return [true, L1inf, L2inf, T1, T2, C];
 } /* end of function findConstruction */

files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md

@@ -401,7 +401,7 @@ function createInterlace(size, color1, color2) {
   return pattern;
 }
 
-const op_8x8 = createInterlace(8, "white", "#eeeeee");
+const op8x8 = createInterlace(8, "white", "#eeeeee");
 ```
 
 #### Start running
@@ -411,7 +411,7 @@ Finally, we call the functions to set everything in motion.
 ```js
 lightMix();
 colorSphere();
-runComposite(op_8x8);
+runComposite(op8x8);
 ```
 
 #### Result

files/en-us/web/api/canvasrenderingcontext2d/lang/index.md

@@ -159,7 +159,7 @@ const canvasElem = document.querySelector("canvas");
 const ctx = canvasElem.getContext("bitmaprenderer");
 
 const offscreen = new OffscreenCanvas(canvasElem.width, canvasElem.height);
-const offscreen_ctx = offscreen.getContext("2d");
+const offscreenCtx = offscreen.getContext("2d");
 
 const selectElem = document.querySelector("select");
 
@@ -176,11 +176,11 @@ latoMediumFontFace.load().then((font) => {
 
 function init() {
   function drawText() {
-    offscreen_ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
-    offscreen_ctx.lang = selectElem.value;
-    offscreen_ctx.font = "30px Lato-Medium";
-    offscreen_ctx.color = "black";
-    offscreen_ctx.fillText("finish crafting", 50, 100);
+    offscreenCtx.clearRect(0, 0, canvasElem.width, canvasElem.height);
+    offscreenCtx.lang = selectElem.value;
+    offscreenCtx.font = "30px Lato-Medium";
+    offscreenCtx.color = "black";
+    offscreenCtx.fillText("finish crafting", 50, 100);
 
     const bitmap = offscreen.transferToImageBitmap();
     ctx.transferFromImageBitmap(bitmap);

files/en-us/web/api/cookiechangeevent/changed/index.md

@@ -49,11 +49,11 @@ cookieStore.addEventListener("change", (event) => {
   console.log(event.changed[0]);
 });
 
-const one_day = 24 * 60 * 60 * 1000;
+const oneDay = 24 * 60 * 60 * 1000;
 cookieStore.set({
   name: "cookie1",
   value: "cookie1-value",
-  expires: Date.now() + one_day,
+  expires: Date.now() + oneDay,
   domain: "example.com",
 });
 ```

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

@@ -41,11 +41,11 @@ cookieStore.addEventListener("change", (event) => {
   console.log(event);
 });
 
-const one_day = 24 * 60 * 60 * 1000;
+const oneDay = 24 * 60 * 60 * 1000;
 cookieStore.set({
   name: "cookie1",
   value: "cookie1-value",
-  expires: Date.now() + one_day,
+  expires: Date.now() + oneDay,
   domain: "example.com",
 });
 ```

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

@@ -103,41 +103,41 @@ Using the dot notation with a camel case property is the easiest way to access a
 
 ```js
 // Get style using dot notation
-const elem_borderTop = elementStyle.borderTop;
-const comp_borderTop = computedStyle.borderTop;
+const elemBorderTop = elementStyle.borderTop;
+const compBorderTop = computedStyle.borderTop;
 
 log('Format: Style = "Element" / "Computed"');
-log(`"borderTop" = "${elem_borderTop}" / "${comp_borderTop}"'`);
+log(`"borderTop" = "${elemBorderTop}" / "${compBorderTop}"'`);
 ```
 
 We can also get the same property using the {{DOMxRef("CSSStyleDeclaration/getPropertyPriority", "getPropertyValue()")}} method or bracket notation.
 
 ```js
 // Get style using dashed-name property value
-const elem_border_top = elementStyle.getPropertyValue("border-top");
-const comp_border_top = computedStyle.getPropertyValue("border-top");
-log(`"border-top" = "${elem_border_top}" / "${elem_border_top}"'`);
+const elemBorderTop = elementStyle.getPropertyValue("border-top");
+const compBorderTop = computedStyle.getPropertyValue("border-top");
+log(`"border-top" = "${elemBorderTop}" / "${compBorderTop}"'`);
 ```
 
 The following code gets each of the longhand properties that correspond to the shorthand property `border-top`, using the dot notation for simplicity.
 
 ```js
 // Get shorthand properties using dot notation
-const elem_borderTopWidth = elementStyle.borderTopWidth;
-const comp_borderTopWidth = computedStyle.borderTopWidth;
-log(`"borderTopWidth" = "${elem_borderTopWidth}" / "${comp_borderTopWidth}"'`);
+const elemBorderTopWidth = elementStyle.borderTopWidth;
+const compBorderTopWidth = computedStyle.borderTopWidth;
+log(`"borderTopWidth" = "${elemBorderTopWidth}" / "${compBorderTopWidth}"'`);
 
-const elem_borderTopColor = elementStyle.borderTopColor;
-const comp_borderTopColor = computedStyle.borderTopColor;
-log(`"borderTopColor" = "${elem_borderTopColor}" / "${comp_borderTopColor}"'`);
+const elemBorderTopColor = elementStyle.borderTopColor;
+const compBorderTopColor = computedStyle.borderTopColor;
+log(`"borderTopColor" = "${elemBorderTopColor}" / "${compBorderTopColor}"'`);
 
-const elem_borderTopStyle = elementStyle.borderTopStyle;
-const comp_borderTopStyle = computedStyle.borderTopStyle;
-log(`"borderTopStyle" = "${elem_borderTopStyle}" / "${comp_borderTopStyle}"'`);
+const elemBorderTopStyle = elementStyle.borderTopStyle;
+const compBorderTopStyle = computedStyle.borderTopStyle;
+log(`"borderTopStyle" = "${elemBorderTopStyle}" / "${compBorderTopStyle}"'`);
 
-const elem_fontWeight = elementStyle.fontWeight;
-const comp_fontWeight = computedStyle.fontWeight;
-log(`"fontWeight" = "${elem_fontWeight}" / "${comp_fontWeight}"'`);
+const elemFontWeight = elementStyle.fontWeight;
+const compFontWeight = computedStyle.fontWeight;
+log(`"fontWeight" = "${elemFontWeight}" / "${compFontWeight}"'`);
 ```
 
 Lastly we demonstrate how you can use the dot notation to set a property value.