[pull] main from mdn:main

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

@@ -43,15 +43,32 @@ It is the third layer of the layer cake of standard web technologies, two of whi
 
 The three layers build on top of one another nicely. Let's take a button as an example. We can mark it up using HTML to give it structure and purpose:
 
-```html live-sample___string-concat-name
-<button type="button">Player 1: Chris</button>
+```css hidden live-sample___string-concat-name-html live-sample___string-concat-name-css live-sample___string-concat-name-js
+html {
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button {
+  font-size: 1.4em;
+}
+```
+
+```html live-sample___string-concat-name-html live-sample___string-concat-name-css live-sample___string-concat-name-js
+<button>Player 1: Chris</button>
 ```
 
-![Button showing Player 1: Chris with no styling](just-html.png)
+{{EmbedLiveSample('string-concat-name-html', , '80')}}
 
 Then we can add some CSS into the mix to get it looking nice:
 
-```css live-sample___string-concat-name
+```css live-sample___string-concat-name-css live-sample___string-concat-name-js
 button {
   font-family: "Helvetica Neue", "Helvetica", sans-serif;
   letter-spacing: 1px;
@@ -66,11 +83,11 @@ button {
 }
 ```
 
-![Button showing Player 1: Chris with styling](html-and-css.png)
+{{EmbedLiveSample('string-concat-name-css', , '80')}}
 
 And finally, we can add some JavaScript to implement dynamic behavior:
 
-```js live-sample___string-concat-name
+```js live-sample___string-concat-name-js
 function updateName() {
   const name = prompt("Enter a new name");
   button.textContent = `Player 1: ${name}`;
@@ -81,10 +98,9 @@ const button = document.querySelector("button");
 button.addEventListener("click", updateName);
 ```
 
-You can click "Play" to see and edit the example in the MDN Playground.
-Try clicking on the text label to see what happens.
+Try clicking on the text label, entering a name into the dialog box that opens, and pressing the OK button.
 
-{{EmbedLiveSample('string-concat-name', , '80', , , , , 'allow-modals')}}
+{{EmbedLiveSample('string-concat-name-js', , '80', , , , , 'allow-modals')}}
 
 JavaScript can do a lot more than that — let's explore what in more detail.
 

files/en-us/learn_web_development/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md

@@ -27,17 +27,17 @@ To complete the task:
    https://mdn.github.io/shared-assets/images/examples/balloons.jpg
    ```
 
-Your final result should look like the image below:
+Your final result should look like the following rendering:
 
-![Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background.](backgrounds-task1.png)
+{{EmbedLiveSample("backgrounds1-finish", "", "200px")}}
 
-```html live-sample___backgrounds1
+```html live-sample___backgrounds1-start live-sample___backgrounds1-finish
 <div class="box">
   <h2>Backgrounds & Borders</h2>
 </div>
 ```
 
-```css live-sample___backgrounds1
+```css live-sample___backgrounds1-start live-sample___backgrounds1-finish
 body {
   padding: 1em;
   font: 1.2em / 1.5 sans-serif;
@@ -60,14 +60,16 @@ h2 {
 }
 ```
 
-{{EmbedLiveSample("backgrounds1", "", "200px")}}
+This is the starting state of the task:
+
+{{EmbedLiveSample("backgrounds1-start", "", "200px")}}
 
 <details>
 <summary>Click here to show the solution</summary>
 
 You should use `border`, `border-radius`, `background-image`, and `background-size` and understand how to use RGB colors to make a background color partly transparent:
 
-```css
+```css live-sample___backgrounds1-finish
 .box {
   border: 5px solid black;
   border-radius: 10px;
@@ -99,17 +101,17 @@ To complete the task:
 
 3. Make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this.
 
-Your final result should look like the image below:
+Your final result should look like the following rendering:
 
-![Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.](backgrounds-task2.png)
+{{EmbedLiveSample("backgrounds2-finish", "", "220px")}}
 
-```html live-sample___backgrounds2
+```html live-sample___backgrounds2-start live-sample___backgrounds2-finish
 <div class="box">
   <h2>Backgrounds & Borders</h2>
 </div>
 ```
 
-```css live-sample___backgrounds2
+```css live-sample___backgrounds2-start live-sample___backgrounds2-finish
 body {
   padding: 1em;
   font: 1.2em / 1.5 sans-serif;
@@ -131,15 +133,17 @@ h2 {
 }
 ```
 
-{{EmbedLiveSample("backgrounds2", "", "220px")}}
+This is the starting state of the task:
+
+{{EmbedLiveSample("backgrounds2-start", "", "220px")}}
 
 <details>
 <summary>Click here to show the solution</summary>
 
 You need to add padding to the heading so that it doesn't overlay the star image - this links back to learning from the earlier [Box Model lesson](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model).
 The text should be aligned with the `text-align` property:
 
-```css
+```css live-sample___backgrounds2-finish
 .box {
   border: 5px solid lightblue;
   border-top-left-radius: 20px;

files/en-us/web/api/fetch_api/using_deferred_fetch/index.md

@@ -63,7 +63,7 @@ The top-level origin can give selected cross-origin subframes an increased quota
 
 The top-level origin can also restrict the 128KiB shared quota to named cross-origin subframes by listing those origins in the {{HTTPHeader("Permissions-Policy/deferred-fetch-minimal", "deferred-fetch-minimal")}} Permissions Policy. It can also revoke the entire 128KiB default subframe quota and instead keep the full 640KiB quota for itself and any named `deferred-fetch` cross-origins by setting the {{HTTPHeader("Permissions-Policy/deferred-fetch-minimal", "deferred-fetch-minimal")}} Permissions Policy to `()`.
 
-### Delegating quotes to subframes of subframes
+### Delegating quotas to subframes of subframes
 
 By default, subframes of subframes are not allocated a quota and so cannot use `fetchLater()`. Subframes allocated the increased 64KiB quota can delegate the full 64KiB quota to further subframes and allow them to use `fetchLater()` by setting their own `deferred-fetch` Permissions Policy. They can only delegate their full quota to further subframes, not parts of it, and cannot specify new quotas. Subframes using the minimal 8KiB quota cannot delegate quotas to subframes. To be delegated quota, sub-subframes must be included in both the top-level and the subframe `deferred-fetch` {{httpheader('Permissions-Policy')}} directives.
 

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

@@ -103,7 +103,7 @@ const callback = (entries, observer) => {
 };
 ```
 
-The list of entries received by the callback includes one {{domxref("IntersectionObserverEntry")}} object for each threshold-crossing event — multiple entries can be received at a time, either from multiple targets or from a single target crossing multiple thresholds in a short amount of time. The entries are dispatched using a queue, so they should be ordered by the time they were generated, but you should preferably use {{domxref("IntersectionObserverEntry.time")}} to correctly order them. Each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, etc. The entry only contains information about that particular instant — if you want information that requires tracking over time, such as the scroll direction and speed, you may need to compute that yourself by memorizing previously received entries.
+The list of entries received by the callback includes one {{domxref("IntersectionObserverEntry")}} object for each threshold-crossing event — multiple entries can be received at a time, either from multiple targets or from a single target crossing multiple thresholds in a short amount of time. The entries are dispatched using a queue, so they should be ordered by the time they were generated, but you should preferably use {{domxref("IntersectionObserverEntry.time")}} to correctly order them. Each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, etc. The entry only contains information about that particular instant — if you want information that requires tracking over time, such as the scroll direction and speed, you may need to compute that yourself by memoizing previously received entries.
 
 Be aware that your callback is executed on the main thread. It should operate as quickly as possible; if anything time-consuming needs to be done, use {{domxref("Window.requestIdleCallback()")}}.
 

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

@@ -17,7 +17,7 @@ There also is the {{domxref("Range.Range()", "Range()")}} constructor available.
 
 ## Instance properties
 
-_There are no inherited properties._
+_The properties below are inherited from its parent interface, {{domxref("AbstractRange")}}._
 
 - {{domxref("Range.collapsed")}} {{ReadOnlyInline}}
   - : Returns a boolean value indicating whether the range's start and end points are at the same position.