Merge branch 'main' into patch-1

files/en-us/learn_web_development/core/scripting/functions/index.md

@@ -356,7 +356,9 @@ function greeting() {
 }
 ```
 
-Both functions you want to call are called `greeting()`, but you can only ever access the `first.js` file's `greeting()` function (the second one is ignored). In addition, an error results when attempting (in the `second.js` file) to assign a new value to the `name` variable — because it was already declared with `const`, and so can't be reassigned.
+You will see that the second script does not load and run at all, and an error is printed in the console: `Uncaught SyntaxError: Identifier 'name' has already been declared`. This is because the `name` constant is already declared in `first.js`, and you can't declare the same constant twice in the same scope. Because the second script did not load, the `greeting()` function from `second.js` is not available to be called. Therefore, you will see an alert box displaying `Hello Chris: welcome to our company.`.
+
+Try removing the second `const name = "Zaptec";` line from `second.js` and reloading the page. Now both scripts execute, and the alert box says `Our company is called Chris.`. Functions are allowed to be redeclared, and the last declaration gets used. The previous declarations are effectively overwritten.
 
 > [!NOTE]
 > You can see this example [running live on GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (see also the [source code](https://github.com/mdn/learning-area/tree/main/javascript/building-blocks/functions)).

files/en-us/learn_web_development/core/scripting/index.md

@@ -12,7 +12,7 @@ JavaScript is a huge topic, with so many different features, styles, and techniq
 
 ## Prerequisites
 
-Before starting this module, you don't need any previous JavaScript knowledge, but you should have worked through the previous modules in the course. You should have at least know [HTML](/en-US/docs/Learn_web_development/Core/Structuring_content) and the [basic fundamentals of CSS](/en-US/docs/Learn_web_development/Core/Styling_basics).
+Before starting this module, you don't need any previous JavaScript knowledge, but you should have worked through the previous modules in the course. You should at least know [HTML](/en-US/docs/Learn_web_development/Core/Structuring_content) and the [basic fundamentals of CSS](/en-US/docs/Learn_web_development/Core/Styling_basics).
 
 > [!NOTE]
 > If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as [JSBin](https://jsbin.com/) or [Glitch](https://glitch.com/).

files/en-us/learn_web_development/core/scripting/what_went_wrong/index.md

@@ -34,7 +34,7 @@ When you built up the "Guess the number" game in the previous article, you may h
 
 Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:
 
-- **Syntax errors**: These are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean!
+- **Syntax errors**: These are spelling errors in your code that actually cause the program not to run at all, or stop working part way through — you will usually be provided with some error messages too. These are usually not too hard to fix, as long as you are familiar with the right tools and know what the error messages mean!
 - **Logic errors**: These are errors where the syntax is actually correct but the code is not what you intended it to be, meaning that program runs successfully but gives incorrect results. These are often harder to fix than syntax errors, as there usually isn't an error message to direct you to the source of the error.
 
 Okay, so it's not quite _that_ simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.

files/en-us/learn_web_development/extensions/server-side/django/development_environment/index.md

@@ -426,8 +426,7 @@ In addition to branches, it is possible to create `tags` on any branch and later
 
 ### Create an account and repository on GitHub
 
-First we will create a free account on GitHub.
-With a free account you can't create private repos, but you can create as many _public_ repositories ("repos") as you like.
+First we will create an account on GitHub (this is free).
 Then we create and configure a repository named "django_local_library" for storing the [Local library website](/en-US/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website) as we evolve it in the rest of this tutorial.
 
 The steps are:

files/en-us/learn_web_development/getting_started/environment_setup/browsing_the_web/index.md

@@ -144,7 +144,7 @@ When you access the web, quite a lot happens between your first interaction (for
    2. When that file is received by the browser, it will start to parse it, and will probably find instructions to make more requests. As discussed above, these might be for files to embed such as images, style information, scripts, and so on.
 4. When all of the resources have been requested, the web browser parses and renders them as required, before displaying the result to the user.
 
-This description of how the web works is heavily simplified, but it is all you really need to know at this point. You will find a more detailed account of how web pages and requested and rendered by a web browser in our [Web standards](/en-US/docs/Learn_web_development/Getting_started/Web_standards) module, slightly later on.
+This description of how the web works is heavily simplified, but it is all you really need to know at this point. You will find a more detailed account of how web pages are requested and rendered by a web browser in our [Web standards](/en-US/docs/Learn_web_development/Getting_started/Web_standards) module, slightly later on.
 
 For now, try opening a web browser and loading up a couple of your favorite sites, thinking about the above steps as you do so.
 
@@ -208,7 +208,7 @@ As a result, you need to be careful to check the answers they give you, and not
 
   - Typing in `"ant fish cheese"` (with the quotes) will only return results that contain that exact phrase.
   - `"ant cheese" -fish` will return results that contain `ant` and/or `cheese` but not `fish`.
-  - `and OR cheese` will only return results with one term or the other, not both. From our testing, this one only seemed to work effectively in Google.
+  - `ant OR cheese` will only return results with one term or the other, not both. From our testing, this one only seemed to work effectively in Google.
   - `intitle:cheese` will only return results that have "cheese" in the main title of the page.
 
   > [!NOTE]

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

@@ -26,6 +26,8 @@ The **`Animation`** interface of the [Web Animations API](/en-US/docs/Web/API/We
   - : Returns the current finished Promise for this animation.
 - {{domxref("Animation.id")}}
   - : Gets and sets the `String` used to identify the animation.
+- {{domxref("Animation.overallProgress")}} {{ReadOnlyInline}} {{experimental_inline}}
+  - : Returns a number between `0` and `1` indicating the animation's overall progress towards its finished state.
 - {{domxref("Animation.pending")}} {{ReadOnlyInline}}
   - : Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
 - {{domxref("Animation.playState")}} {{ReadOnlyInline}}

files/en-us/web/api/animation/overallprogress/index.md

@@ -0,0 +1,149 @@
+---
+title: "Animation: overallProgress property"
+short-title: overallProgress
+slug: Web/API/Animation/overallProgress
+page-type: web-api-instance-property
+status:
+  - experimental
+browser-compat: api.Animation.overallProgress
+---
+
+{{APIRef("Web Animations")}}{{seecompattable}}
+
+The **`overallProgress`** read-only property of the {{domxref("Animation")}} interface returns a number between `0` and `1` indicating the animation's overall progress towards its finished state. This is the overall progress across all of the animation's iterations, not each individual iteration.
+
+`overallProgress` works consistently across all animations, regardless of the type of {{domxref("AnimationTimeline", "timeline")}}.
+
+## Value
+
+A number between `0` and `1`, or `null` if the animation lacks a timeline, is inactive or hasn't been played yet, or if its {{domxref("Animation/currentTime", "currentTime")}} is set to a non-time value.
+
+If the animation's [`iterations`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#iterations) property is set to `Infinity`, or if its {{domxref("Animation/currentTime", "currentTime")}} is set to a negative value, `overallProgress` will return `0`.
+
+If the animation's [`duration`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#duration) is set to `0`, `overallProgress` will return `1`.
+
+## Examples
+
+### Displaying a percentage progress
+
+This demo uses `overallProgress` to create a "percentage progress" readout, which is displayed to the screen while an animation runs.
+
+### HTML
+
+The HTML contains a {{htmlelement("button")}} to press to start the animation, a {{htmlelement("p")}} element in which to display the percentage progress, and a {{htmlelement("div")}} that will be animated.
+
+```html
+<button>Run animation</button>
+<p class="progress">Progress: 0%</p>
+<div class="box"></div>
+```
+
+The demo's CSS provides some rudimentary styling, which is not important for understanding how the JavaScript works, therefore we have hidden it for brevity.
+
+```css hidden
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+  margin: 0;
+  width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.progress {
+  font-weight: bold;
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border-radius: 40px 20px;
+  border: 10px solid black;
+  background: lightseagreen;
+  margin: 0 auto;
+}
+```
+
+### JavaScript
+
+In the JavaScript, we start off by grabbing references to the {{htmlelement("button")}}, {{htmlelement("p")}}, and {{htmlelement("div")}} elements.
+
+We then create:
+
+- an `animation` variable which will reference the animation, once we've created it
+- a [keyframes](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) array
+- an options object containing timing properties.
+
+```js
+const btn = document.querySelector("button");
+const progress = document.querySelector(".progress");
+const box = document.querySelector(".box");
+
+let animation;
+
+const keyframes = [{ rotate: "0deg" }, { rotate: "360deg" }];
+
+const timingProps = {
+  duration: 3000,
+  iterations: 1,
+};
+```
+
+Next we add a `"click"` event listener to the `<button>` via [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) so that, when pressed, it:
+
+1. Starts the animation running using {{domxref("Element.animate()")}}, passing it the keyframes and options defined earlier and assigning the returned {{domxref("Animation")}} instance to the `animation` variable.
+2. Runs a function called `updateProgress()` via the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} method, which handles updating the percentage process display.
+
+```js
+btn.addEventListener("click", () => {
+  // Animate the box
+  animation = box.animate(keyframes, timingProps);
+  // Start updating the progress percentage via rAF()
+  requestAnimationFrame(updateProgress);
+});
+```
+
+Now let's define the `updateProgress()` function. This queries {{domxref("Animation.playState")}} to see if the animation is not finished. If it isn't finished, we grab the current value of `overallProgress`, multiplying it by 100 and rounding the result down to convert it to a whole percentage number, then update the `<p>` element's {{domxref("Node.textContent", "textContent")}} value with it. We then call `requestAnimationFrame(updateProgress)` again to re-run the progress percentage update.
+
+If the animation is finished, we replace the percentage progress with a "Finished!" message, and don't call `requestAnimationFrame(updateProgress)`, so the progress percentage updates stop.
+
+```js
+function updateProgress() {
+  // Check if the animation is finished
+  if (animation.playState !== "finished") {
+    // Convert overallProgress to a whole number percentage
+    const progressPercentage = Math.floor(animation.overallProgress * 100);
+    // Update the progress paragraph with the percentage
+    progress.textContent = `Progress: ${progressPercentage}%`;
+    // Only request the next frame if the animation is not finished
+    requestAnimationFrame(updateProgress);
+  } else {
+    progress.textContent = "Finished!";
+  }
+}
+```
+
+### Result
+
+The output looks like this. Try pressing the button to see the animation and associated progress indicator run.
+
+{{ EmbedLiveSample("Displaying a percentage progress", "100%", 250) }}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Animation")}} for other methods and properties you can use to control web page animation.
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)

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

@@ -30,7 +30,7 @@ The only sequence which is not allowed within a CDATA section is the closing seq
 of a CDATA section itself, `]]>`.
 
 > [!NOTE]
-> CDATA sections should not be used within HTML they are considered as comments and not displayed.
+> CDATA sections should not be used within HTML. They are considered comments and are not displayed.
 
 {{InheritanceDiagram}}
 

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

@@ -26,6 +26,9 @@ The statistics can be obtained by iterating the {{domxref("RTCStatsReport")}} re
 - {{domxref("RTCInboundRtpStreamStats.lastPacketReceivedTimestamp", "lastPacketReceivedTimestamp")}}
   - : A {{domxref("DOMHighResTimeStamp")}} indicating the time at which the last packet was received for this source.
     The [`timestamp`](#timestamp) property, on the other hand, indicates the time at which the statistics object was generated.
+- {{domxref("RTCInboundRtpStreamStats.mid", "mid")}}
+  - : A string that uniquely identifies the pairing of source and destination of the transceiver's stream.
+    This is the value of the corresponding {{domxref("RTCRtpTransceiver.mid")}} unless that is null, in which case the statistic property is not present.
 - {{domxref("RTCInboundRtpStreamStats.nackCount", "nackCount")}}
   - : An integer value indicating the total number of Negative ACKnowledgement (NACK) packets this receiver has sent.
 - {{domxref("RTCInboundRtpStreamStats.packetsDuplicated", "packetsDuplicated")}}

files/en-us/web/api/rtcinboundrtpstreamstats/mid/index.md

@@ -0,0 +1,24 @@
+---
+title: "RTCInboundRtpStreamStats: mid property"
+short-title: mid
+slug: Web/API/RTCInboundRtpStreamStats/mid
+page-type: web-api-instance-property
+browser-compat: api.RTCStatsReport.type_inbound-rtp.mid
+---
+
+{{APIRef("WebRTC")}}
+
+The **`mid`** property of the {{domxref("RTCInboundRtpStreamStats")}} dictionary is a string that contains the media id negotiated between the local and remote peers.
+This uniquely identifies the pairing of source and destination for the transceiver's stream.
+
+## Value
+
+The value of the corresponding {{domxref("RTCRtpTransceiver.mid")}}, unless that value is null, in which case this statistic property is not present.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}