Comment out ellipsis in code blocks, part 4

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_filtering_conditional_rendering/index.md

@@ -89,7 +89,7 @@ In order to allow users to edit a task, we have to provide a user interface for
 import React, { useState } from "react";
 ```
 
-We'll now use this to set an `isEditing` state, the default state of which should be `false`. Add the following line just inside the top of your `Todo(props) { … }` component definition:
+We'll now use this to set an `isEditing` state, the default state of which should be `false`. Add the following line just inside the top of your `Todo(props) { }` component definition:
 
 ```js
 const [isEditing, setEditing] = useState(false);

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_components/index.md

@@ -448,7 +448,7 @@ The editing UI (the upper half) will contain an `<input>` field and two buttons
 [...]
 ```
 
-When the user presses the _Edit_ button, the `editing` variable will be set to `true`, and Svelte will remove the markup in the `{:else}` part of the DOM and replace it with the markup in the `{#if...}` section.
+When the user presses the _Edit_ button, the `editing` variable will be set to `true`, and Svelte will remove the markup in the `{:else}` part of the DOM and replace it with the markup in the `{#if}` section.
 
 The `<input>`'s `value` property will be bound to the `name` variable, and the buttons to cancel and save the changes call `onCancel()` and `onSave()` respectively (we added those functions earlier):
 

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_deployment_next/index.md

@@ -118,7 +118,7 @@ If we have a look at the `rollup.config.js` file, we can see that the Svelte com
 
 ```js
 import svelte from 'rollup-plugin-svelte';
-[...]
+// …
 import { terser } from 'rollup-plugin-terser';
 
 const production = !process.env.ROLLUP_WATCH;

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md

@@ -249,7 +249,7 @@ In the markup section you can insert any HTML you like, and in addition you can
 </main>
 ```
 
-Svelte also supports tags like `{#if...}`, `{#each...}`, and `{#await...}` — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.
+Svelte also supports tags like `{#if}`, `{#each}`, and `{#await}` — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.
 
 ### The `<style>` section
 
@@ -289,7 +289,7 @@ You can see this in action by opening `localhost:5042` in a new browser tab, rig
 
 When compiling the app, Svelte changes our `h1` styles definition to `h1.svelte-1tky8bj`, and then modifies every `<h1>` element in our component to `<h1 class="svelte-1tky8bj">`, so that it picks up the styles as required.
 
-> **Note:** You can override this behavior and apply styles to a selector globally using the `:global(...)` modifier (see the [Svelte `<style>` docs](https://svelte.dev/docs#style) for more information).
+> **Note:** You can override this behavior and apply styles to a selector globally using the `:global()` modifier (see the [Svelte `<style>` docs](https://svelte.dev/docs#style) for more information).
 
 ## Making a couple of changes
 

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md

@@ -236,7 +236,7 @@ const checkAllTodos = (completed) => {
 
 In this case we are using the [`map()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method, which returns a new array with the results of executing the provided function for each item. The function returns a copy of each to-do using [spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and overwrites the property of the completed value accordingly. This solution has the added benefit of returning a new array with new objects, completely avoiding mutating the original `todos` array.
 
-> **Note:** Svelte allows us to specify different options that affect how the compiler works. The `<svelte:options immutable={true}/>` option tells the compiler that you promise not to mutate any objects. This allows it to be less conservative about checking whether values have changed and generate simpler and more performant code. For more information on `<svelte:options...>`, check the [Svelte options documentation](https://svelte.dev/docs#svelte_options).
+> **Note:** Svelte allows us to specify different options that affect how the compiler works. The `<svelte:options immutable={true}/>` option tells the compiler that you promise not to mutate any objects. This allows it to be less conservative about checking whether values have changed and generate simpler and more performant code. For more information on `<svelte:options>`, check the [Svelte options documentation](https://svelte.dev/docs#svelte_options).
 
 All of these solutions involve an assignment in which the updated variable is on the left side of the equation. Any of this techniques will allow Svelte to notice that our `todos` array has been modified.
 
@@ -662,7 +662,7 @@ In the previous section, while working with the `Todo` components, we had to dea
 2. And then in our markup we just need to add another `use:` directive:
 
     ```html
-    <input bind:value={name} use:selectOnFocus use:focusOnInit ...
+    <input bind:value={name} use:selectOnFocus use:focusOnInit>
     ```
 
 3. Our `onEdit()` function can now be much simpler:
@@ -749,7 +749,7 @@ First we'll extract the status heading to its own component.
     <TodosStatus {todos} />
     ```
 
-5. You can also do a bit of cleanup, removing the `totalTodos` and `completedTodos` variables from `Todos.svelte`. Just remove the `$: totalTodos = ...` and the `$: completedTodos = ...` lines, and also remove the reference to `totalTodos` when we calculate `newTodoId` and use `todos.length` instead. To do this, replace the block that begins with `let newTodoId` with this:
+5. You can also do a bit of cleanup, removing the `totalTodos` and `completedTodos` variables from `Todos.svelte`. Just remove the `$: totalTodos = …` and the `$: completedTodos = …` lines, and also remove the reference to `totalTodos` when we calculate `newTodoId` and use `todos.length` instead. To do this, replace the block that begins with `let newTodoId` with this:
 
     ```js
     $: newTodoId = todos.length ? Math.max(...todos.map(t => t.id)) + 1 : 1
@@ -763,7 +763,7 @@ So far we saw how to send information to a component via props, and how a compon
 
 So we need the `TodosStatus` component to expose a method that its parent can call to give focus to it. It's a very common scenario that a component needs to expose some behavior or information to the consumer; let's see how to achieve it with Svelte.
 
-We've already seen that Svelte uses `export let var = ...` to [declare props](https://svelte.dev/docs#1_export_creates_a_component_prop). But if instead of using `let` you export a `const`, `class`, or `function`, it is read-only outside the component. Function expressions are valid props, however. In the following example, the first three declarations are props, and the rest are exported values:
+We've already seen that Svelte uses `export let var = …` to [declare props](https://svelte.dev/docs#1_export_creates_a_component_prop). But if instead of using `let` you export a `const`, `class`, or `function`, it is read-only outside the component. Function expressions are valid props, however. In the following example, the first three declarations are props, and the rest are exported values:
 
 ```js
 <script>

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_stores/index.md

@@ -254,7 +254,7 @@ And `$myStore` will be fully reactive. This also applies to your own custom stor
 
 2. Check your app again and you'll see that this works just like before. That's much better!
 
-Behind the scenes Svelte has generated the code to declare the local variable `$alert`, subscribe to the `alert` store, update `$alert` whenever the store's content is modified, and unsubscribe when the component is unmounted. It will also generate the `alert.set(...)` statements whenever we assign a value to `$alert`.
+Behind the scenes Svelte has generated the code to declare the local variable `$alert`, subscribe to the `alert` store, update `$alert` whenever the store's content is modified, and unsubscribe when the component is unmounted. It will also generate the `alert.set()` statements whenever we assign a value to `$alert`.
 
 The end result of this nifty trick is that you can access global stores just as easily as using reactive local variables.
 
@@ -325,7 +325,7 @@ Writing to our store is just a matter of importing it and executing `$store = 'n
 
 7. So basically, we've imported the store and updated it on every event, which causes a new alert to show each time. Have a look at your app again, and try adding/deleting/updating a few to-dos!
 
-As soon as we execute `$alert = ...`, Svelte will run `alert.set(...)`. Our `Alert` component — like every subscriber to the alert store — will be notified when it receives a new value, and thanks to Svelte reactivity its markup will be updated.
+As soon as we execute `$alert = …`, Svelte will run `alert.set()`. Our `Alert` component — like every subscriber to the alert store — will be notified when it receives a new value, and thanks to Svelte reactivity its markup will be updated.
 
 We could do the same within any component or `.js` file.
 

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.md

@@ -377,7 +377,7 @@ plugins: [
     }
   }),
 
-  ...
+  // …
 ]
 ```
 

files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_variables_props/index.md

@@ -116,7 +116,7 @@ The state of our component will be represented by these three top-level variable
 
 At the moment, our displayed to-do items are all static. We want to iterate over each item in our `todos` array and render the markup for each task, so let's do that now.
 
-HTML doesn't have a way of expressing logic — like conditionals and loops. Svelte does. In this case we use the [`{#each...}`](https://svelte.dev/docs#each) directive to iterate over the `todos` array. The second parameter, if provided, will contain the index of the current item. Also, a key expression can be provided, which will uniquely identify each item. Svelte will use it to diff the list when data changes, rather than adding or removing items at the end, and it's a good practice to always specify one. Finally, an `:else` block can be provided, which will be rendered when the list is empty.
+HTML doesn't have a way of expressing logic — like conditionals and loops. Svelte does. In this case we use the [`{#each}`](https://svelte.dev/docs#each) directive to iterate over the `todos` array. The second parameter, if provided, will contain the index of the current item. Also, a key expression can be provided, which will uniquely identify each item. Svelte will use it to diff the list when data changes, rather than adding or removing items at the end, and it's a good practice to always specify one. Finally, an `:else` block can be provided, which will be rendered when the list is empty.
 
 Let's give it a try.
 
@@ -176,7 +176,7 @@ We've turned our static markup into a dynamic template ready to display the task
 
 With a hardcoded list of to-dos, our `Todos` component is not very useful. To turn our component into a general purpose to-do editor, we should allow the parent of this component to pass in the list of to-dos to edit. This would allow us to save them to a web service or local storage and later retrieve them for update. So let's turn the array into a `prop`.
 
-1. In `Todos.svelte`, replace the existing `let todos = ...` block with `export let todos = []`.
+1. In `Todos.svelte`, replace the existing `let todos = …` block with `export let todos = []`.
 
     ```js
     export let todos = []
@@ -436,15 +436,15 @@ Finally for this article, let's implement the ability to filter our to-dos by st
 3. Now we just need to use the helper function in the `{#each}` loop; update it like this:
 
     ```html
-    ...
+    …
       <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading">
       {#each filterTodos(filter, todos) as todo (todo.id)}
-    ...
+    …
     ```
 
     After analyzing our code, Svelte detects that our `filterTodos()` function depends on the variables `filter` and `todos`. And, just like with any other dynamic expression embedded in the markup, whenever any of these dependencies changes, the DOM will be updated accordingly. So whenever `filter` or `todos` changes, the `filterTodos()` function will be re-evaluated and the items inside the loop will be updated.
 
-> **Note:** Reactivity can be tricky sometimes. Svelte recognizes `filter` as a dependency because we are referencing it in the `filterTodos(filter, todo)` expression. `filter` is a top-level variable, so we might be tempted to remove it from the helper function params, and just call it like this: `filterTodos(todo)`. This would work, but now Svelte has no way to find out that `{#each filterTodos(todos)... }` depends on `filter`, and the list of filtered to-dos won't be updated when the filter changes. Always remember that Svelte analyzes our code to find out dependencies, so it's better to be explicit about it and not rely on the visibility of top-level variables. Besides, it's a good practice to make our code clear and explicit about what information it is using.
+> **Note:** Reactivity can be tricky sometimes. Svelte recognizes `filter` as a dependency because we are referencing it in the `filterTodos(filter, todo)` expression. `filter` is a top-level variable, so we might be tempted to remove it from the helper function params, and just call it like this: `filterTodos(todo)`. This would work, but now Svelte has no way to find out that `{#each filterTodos(todos) }` depends on `filter`, and the list of filtered to-dos won't be updated when the filter changes. Always remember that Svelte analyzes our code to find out dependencies, so it's better to be explicit about it and not rely on the visibility of top-level variables. Besides, it's a good practice to make our code clear and explicit about what information it is using.
 
 ## The code so far
 

files/en-us/learn/tools_and_testing/cross_browser_testing/automated_testing/index.md

@@ -597,7 +597,7 @@ function getBuilds(){
         hashed_id: <string>
       }
     },
-    ...
+    // …
   ]
   */
 };
@@ -653,7 +653,7 @@ function getSessionsInBuild(build){
         har_logs_url: <string>
       }
     },
-    ...
+    // …
   ]
   */
 }

files/en-us/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md

@@ -168,7 +168,7 @@ We already saw an example of a JavaScript feature detection test earlier on. Gen
         parent Object.
       </td>
       <td>
-        <p><code>if("geolocation" in navigator) { … }</code></p>
+        <p><code>if("geolocation" in navigator) { }</code></p>
       </td>
     </tr>
     <tr>
@@ -183,7 +183,7 @@ We already saw an example of a JavaScript feature detection test earlier on. Gen
         <code
           >function supports_canvas() {<br />return
           !!document.createElement('canvas').getContext;<br />}<br /><br />if(supports_canvas())
-          { … }</code
+          { }</code
         >
       </td>
     </tr>
@@ -289,7 +289,7 @@ At this point, try loading your page, and you'll get an idea of how Modernizr wo
 
 ```html
 <html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor
-blob-constructor cookies cors ...AND LOADS MORE VALUES!">
+blob-constructor cookies cors (and loads of more values)">
 ```
 
 It now contains a large number of classes that indicate the support status of different technology features. As an example, if the browser didn't support flexbox at all, `<html>` would be given a class name of `no-flexbox`. If it did support modern flexbox, it would get a class name of `flexbox`. If you search through the class list, you'll also see others relating to flexbox, like:

files/en-us/learn/tools_and_testing/cross_browser_testing/javascript/index.md

@@ -129,7 +129,11 @@ function showHeroes(jsonObj) {
   let heroes = jsonObj['members'];
 
   for(i = 0; i < heroes.length; i++) {
-  ...
+    // …
+   }
+
+   // …
+ }
 ```
 
 So the code falls over as soon as we try to access a property of `jsonObj` (which as you might expect, is supposed to be a [JSON object](/en-US/docs/Learn/JavaScript/Objects/JSON)). This is supposed to be fetched from an external `.json` file using the following XMLHttpRequest call:
@@ -403,13 +407,13 @@ Another option that is becoming popular for people that want to use modern JavaS
 So for example, we talked about arrow functions (see [arrow-function.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html) live, and see the [source code](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/arrow-function.html)) earlier in the article, which only work in the newest browsers:
 
 ```js
-() => { ... }
+() => { }
 ```
 
 We could transpile this across to a traditional old-fashioned anonymous function, so it would work in older browsers:
 
 ```js
-function() { ... }
+function() { /* … */ }
 ```
 
 The recommended tool for JavaScript transpiling is currently [Babel](https://babeljs.io/). This offers transpilation capabilities for language features that are appropriate for transpilation. For features that can't just be easily transpiled into an older equivalent, Babel also offers polyfills to provide support.

files/en-us/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md

@@ -625,7 +625,7 @@ Let's update our `bstack_google_test.js` demo, to show how these features work:
     'project' : 'Google test 2'
     ```
 
-3. Next we need to access the `sessionId` of the current session, so we know where to send the request (the ID is included in the request URL, as you'll see later). Include the following lines just below the block that creates the `driver` object (`let driver ...`) :
+3. Next we need to access the `sessionId` of the current session, so we know where to send the request (the ID is included in the request URL, as you'll see later). Include the following lines just below the block that creates the `driver` object (`let driver …`) :
 
     ```js
     let sessionId;
@@ -807,7 +807,7 @@ If you don't want to use a service like Sauce Labs or BrowserStack, you can alwa
 Now we've got the server running, let's create a demo test that will run on the remote selenium server.
 
 1. Create a copy of your `google_test.js` file, and call it `google_test_remote.js`; put it in your project directory.
-2. Update the second code block (which starts with `let driver = ...`) like so
+2. Update the second code block (which starts with `let driver = …`) like so
 
     ```js
     let driver = new webdriver.Builder()

files/en-us/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md

@@ -77,9 +77,9 @@ We're going to add the build command to our `package.json` file as an npm script
 1. Open the `package.json` file in your project's root directory, and find the `scripts` property.
 2. We'll add a `build` command that we can run to build our code. Add the following line to your project now:
 
-    ```bash
+    ```json
     "scripts": {
-      ...
+      // …
       "build": "parcel build src/index.html"
     }
     ```

files/en-us/mdn/contribute/howto/write_an_api_reference/information_contained_in_a_webidl_file/index.md

@@ -565,18 +565,18 @@ There can also be several unnamed constructors, differing by their parameter lis
     interface HTMLImageElement : HTMLElement {…
 ```
 
-A named constructor is a constructor that has a different name than that of its interface. For example `new Image(…)` creates a new `HTMLImageElement` object. They are defined in the WebIDL using the `NamedConstructor` annotation on the interface, followed by the name of the constructor after the equality sign (`'='`) and the parameter inside the parenthesis, in the same format as you'll see for methods.
+A named constructor is a constructor that has a different name than that of its interface. For example `new Image()` creates a new `HTMLImageElement` object. They are defined in the WebIDL using the `NamedConstructor` annotation on the interface, followed by the name of the constructor after the equality sign (`'='`) and the parameter inside the parenthesis, in the same format as you'll see for methods.
 
 There can be several named constructors for a specific interface, but this is extremely rare; in such a case we include one sub-page per name.
 
 ### New constructor syntax
 
 As of September 2019, WebIDL constructor syntax was updated. Constructor syntax no longer involves an extended attribute on the interface:
 
-```js
+```webidl
 [Constructor(DOMString str)]
     interface MyInterface {
-      ...
+     // …
 };
 ```
 

files/en-us/mdn/guidelines/code_guidelines/css/index.md

@@ -233,15 +233,15 @@ Good:
 
 ```css example-good
 .editorial-summary {
-  ...
+  /* … */
 }
 ```
 
 Bad:
 
 ```css example-bad
 #editorial-summary {
-  ...
+  /* … */
 }
 ```