Remove all line number references to inline code examples (#34459)

files/en-us/learn/javascript/first_steps/a_first_splash/index.md

@@ -334,7 +334,7 @@ This is a lot of code — phew! Let's go through each section and explain what i
   - Now we've chained another test onto the end of the last one using an `else if (){ }` structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.
   - The final block chained onto the end of this code (the `else { }`) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.
 
-- The last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. We add 1 to the `guessCount` variable so the player uses up their turn (`++` is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.
+- The last three lines in the function get us ready for the next guess to be submitted. We add 1 to the `guessCount` variable so the player uses up their turn (`++` is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.
 
 ### Events
 

files/en-us/learn/javascript/first_steps/strings/index.md

@@ -252,7 +252,7 @@ If you have a numeric variable that you want to convert to a string or a string
   // string
   ```
 
-These constructs can be really useful in some situations. For example, if a user enters a number into a form's text field, it's a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through `Number()` to handle this. We did exactly this in our [Number Guessing Game, in line 59](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L59).
+These constructs can be really useful in some situations. For example, if a user enters a number into a form's text field, it's a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through `Number()` to handle this. We did exactly this in our [Number Guessing Game](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html), in the `checkGuess` function.
 
 ## Conclusion
 

files/en-us/learn/javascript/first_steps/what_is_javascript/index.md

@@ -159,7 +159,7 @@ function updateName() {
 }
 ```
 
-Here we are selecting a button (line 1), then attaching an event listener to it (line 3) so that when the button is clicked, the `updateName()` code block (lines 5–8) is run. The `updateName()` code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the button text to update the display.
+Here we first select a button using `document.querySelector`, then attaching an event listener to it using `addEventListener` so that when the button is clicked, the `updateName()` code block (lines 5–8) is run. The `updateName()` code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the button text to update the display.
 
 If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the [browser developer console](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) — `Uncaught ReferenceError: Cannot access 'button' before initialization`.
 This means that the `button` object has not been initialized yet, so we can't add an event listener to it.

files/en-us/learn/performance/javascript/index.md

@@ -310,7 +310,7 @@ There are several general best practices that will make your code run more effic
     }
     ```
 
-  - Do work that is only needed once outside the loop. This may sound a bit obvious, but it is easy to overlook. Take the following snippet, which fetches a JSON object containing data to be processed in some way. In this case the {{domxref("fetch()")}} operation is being done on every iteration of the loop, which is a waste of computing power. Lines 3 and 4 could be moved outside the loop, so the network fetch is only being done once.
+  - Do work that is only needed once outside the loop. This may sound a bit obvious, but it is easy to overlook. Take the following snippet, which fetches a JSON object containing data to be processed in some way. In this case the {{domxref("fetch()")}} operation is being done on every iteration of the loop, which is a waste of computing power. The fetching, which does not depend on `i`, could be moved outside the loop, so it is only done once.
 
     ```js
     async function returnResults(number) {

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

@@ -295,7 +295,7 @@ When compiling the app, Svelte changes our `h1` styles definition to `h1.svelte-
 ## Making a couple of changes
 
 Now that we have a general idea of how it all fits together, we can start making a few changes.
-At this point you can try updating your `App.svelte` component — for example change the `<h1>` element on line 6 of `App.svelte` so that it reads like this:
+At this point you can try updating your `App.svelte` component — for example change the `<h1>` element in `App.svelte` so that it reads like this:
 
 ```html
 <h1>Hello {name} from MDN!</h1>
@@ -357,7 +357,7 @@ const app = new App({
 export default app;
 ```
 
-`main.js` starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:
+`main.js` starts by importing the Svelte component that we are going to use. Then it gets instantiated with `new App`, passing an option object with the following properties:
 
 - `target`: The DOM element inside which we want the component to be rendered, in this case the `<body>` element.
 - `props`: the values to assign to each prop of the `App` component.

files/en-us/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md

@@ -107,8 +107,6 @@ When content visibility is changed (i.e., an element is hidden or shown), develo
 
 Here is an example of a tooltip that uses **`aria-hidden`** to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields.
 
-In this example, the HTML for the tooltip has the form shown. Line 9 sets the **`aria-hidden`** state to `true`.
-
 ```html
 <div class="text">
   <label id="tp1-label" for="first">First Name:</label>
@@ -126,15 +124,15 @@ In this example, the HTML for the tooltip has the form shown. Line 9 sets the **
 </div>
 ```
 
-The CSS for this markup is shown in the following code. Note that there is no custom classname used, only the status of the **`aria-hidden`** attribute on line 1.
+The CSS for this markup is shown in the following code. Note that there is no custom classname used, only the status of the **`aria-hidden`** attribute.
 
 ```css
 div.tooltip[aria-hidden="true"] {
   display: none;
 }
 ```
 
-The JavaScript to update the **`aria-hidden`** property has the form shown in the following code. Note that the script only updates the **`aria-hidden`** attribute (line 2); it does not need to also add or remove a custom classname.
+The JavaScript to update the **`aria-hidden`** property has the form shown in the following code. Note that the script only updates the **`aria-hidden`** attribute; it does not need to also add or remove a custom classname.
 
 ```js
 function showTip(el) {

files/en-us/web/api/canvas_api/manipulating_video_using_canvas/index.md

@@ -146,15 +146,15 @@ When this routine is called, the video element is displaying the most recent fra
 
 ![A single frame of the video element. There is a person wearing a black t-shirt. The background-color is yellow.](video.png)
 
-In line 2, that frame of video is copied into the graphics context `ctx1` of the first canvas, specifying as the height and width the values we previously saved to draw the frame at half size. Note that you can pass the video element into the context's `drawImage()` method to draw the current video frame into the context. The result is:
+That frame of video is copied into the graphics context `ctx1` of the first canvas, specifying as the height and width the values we previously saved to draw the frame at half size. Note that you can pass the video element into the context's `drawImage()` method to draw the current video frame into the context. The result is:
 
 ![A single frame of the video element. There is a person wearing a black t-shirt. The background-color is yellow. This is a smaller version of the picture above.](sourcectx.png)
 
-Line 3 fetches a copy of the raw graphics data for the current frame of video by calling the `getImageData()` method on the first context. This provides raw 32-bit pixel image data we can then manipulate. Line 4 computes the number of pixels in the image by dividing the total size of the frame's image data by four.
+Calling the `getImageData()` method on the first context fetches a copy of the raw graphics data for the current frame of video. This provides raw 32-bit pixel image data we can then manipulate. We then compute the number of pixels in the image by dividing the total size of the frame's image data by four.
 
-The `for` loop that begins on line 6 scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from `foo.png`.
+The `for` loop scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from `foo.png`.
 
-Every pixel in the frame's image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is entirely transparent. As a result, the final image has the entire green screen area 100% transparent, so that when it's drawn into the destination context in line 13, the result is an overlay onto the static backdrop.
+Every pixel in the frame's image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is entirely transparent. As a result, the final image has the entire green screen area 100% transparent, so that when it's drawn into the destination context using `ctx2.putImageData`, the result is an overlay onto the static backdrop.
 
 The resulting image looks like this:
 

files/en-us/web/api/css_typed_om_api/guide/index.md

@@ -67,7 +67,7 @@ In [browsers that support `computedStyleMap()`](/en-US/docs/Web/API/Element/comp
 
 {{EmbedLiveSample("Getting_all_the_properties_and_values", 120, 300)}}
 
-Did you realize how many default CSS properties a link had? Update the JavaScript on line 2 to select the {{htmlelement("p")}} rather than the {{htmlelement("a")}}. You'll notice a difference in the [`margin-top`](/en-US/docs/Web/CSS/margin-top) and [`margin-bottom`](/en-US/docs/Web/CSS/margin-bottom) default computed values.
+Did you realize how many default CSS properties a link had? Update the first `document.querySelector` call to select the {{htmlelement("p")}} rather than the {{htmlelement("a")}}. You'll notice a difference in the [`margin-top`](/en-US/docs/Web/CSS/margin-top) and [`margin-bottom`](/en-US/docs/Web/CSS/margin-bottom) default computed values.
 
 ### .get() method / custom properties
 

files/en-us/web/api/domimplementation/createhtmldocument/index.md

@@ -70,15 +70,15 @@ function makeDocument() {
 }
 ```
 
-The code in lines 4–12 handle creating the new HTML document and inserting some content
-into it. Line 4 uses `createHTMLDocument()` to construct a new HTML document
-whose {{ HTMLElement("title") }} is `"New Document"`. Lines 5 and 6 create a
-new paragraph element with some simple content, and then lines 8–12 handle inserting the
-new paragraph into the new document.
+The code handles creating the new HTML document and inserting some content
+into it. `createHTMLDocument()` constructs a new HTML document
+whose {{ HTMLElement("title") }} is `"New Document"`. Then we create a
+new paragraph element with some simple content, and then the new paragraph gets inserted
+into the new document.
 
-Line 16 pulls the `contentDocument` of the frame; this is the document into
+`destDocument` stores the `contentDocument` of the frame; this is the document into
 which we'll be injecting the new content. The next two lines handle importing the
-contents of our new document into the new document's context. Finally, line 20 actually
+contents of our new document into the new document's context. Finally, `destDocument.replaceChild` actually
 replaces the contents of the frame with the new document's contents.
 
 [View Live Examples](https://mdn.dev/archives/media/samples/domref/createHTMLDocument.html)

files/en-us/web/api/file_api/using_files_from_web_applications/index.md

@@ -400,7 +400,7 @@ function sendFiles() {
 }
 ```
 
-Line 2 fetches a {{DOMxRef("NodeList")}}, called `imgs`, of all the elements in the document with the CSS class `obj`. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new `FileUpload` instance for each. Each of these handles uploading the corresponding file.
+`document.querySelectorAll` fetches a {{DOMxRef("NodeList")}} of all the elements in the document with the CSS class `obj`. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new `FileUpload` instance for each. Each of these handles uploading the corresponding file.
 
 ### Handling the upload process for a file
 

files/en-us/web/api/htmltableelement/rows/index.md

@@ -32,8 +32,8 @@ firstRow = mytable.rows[0];
 lastRow = mytable.rows.item(mytable.rows.length - 1);
 ```
 
-This demonstrates how you can use both array syntax (line 2) and the
-{{domxref("HTMLCollection.item()")}} method (line 3) to obtain individual rows in the
+This demonstrates how you can use both indexed access and the
+{{domxref("HTMLCollection.item()")}} method to obtain individual rows in the
 table.
 
 ## Specifications

files/en-us/web/api/mediarecorder/mimetype/index.md

@@ -55,11 +55,7 @@ if (navigator.mediaDevices) {
 }
 ```
 
-Changing line 14 to the following causes `MediaRecorder` to try to use AVC Constrained Baseline Profile Level 4 for video and AAC-LC (Low Complexity) for audio, which is good for mobile and other possible resource-constrained situations.
-
-```js
-mimeType: 'video/mp4; codecs="avc1.424028, mp4a.40.2"';
-```
+Changing the `mimeType` in `options` to `'video/mp4; codecs="avc1.424028, mp4a.40.2"'` causes `MediaRecorder` to try to use AVC Constrained Baseline Profile Level 4 for video and AAC-LC (Low Complexity) for audio, which is good for mobile and other possible resource-constrained situations.
 
 Assuming this configuration is acceptable to the user agent, the value returned later
 by `m.mimeType` would then be