Merge branch 'main' into patch-3

.github/workflows/pr-check-lint_content.yml

@@ -39,14 +39,14 @@ jobs:
           echo "DIFF_DOCUMENTS=${DIFF_DOCUMENTS}" >> $GITHUB_ENV
 
       - name: Checkout HEAD
-        if: ${{ env.DIFF_DOCUMENTS }}
+        if: env.DIFF_DOCUMENTS
         uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha }}
           path: pr_head
 
       - name: Get changed content from HEAD
-        if: ${{ env.DIFF_DOCUMENTS }}
+        if: env.DIFF_DOCUMENTS
         run: |
           git config --global user.email "[email protected]"
           git config --global user.name "mdn-bot"
@@ -62,21 +62,21 @@ jobs:
           git commit -m "Code from PR head"
 
       - name: Setup Node.js environment
-        if: ${{ env.DIFF_DOCUMENTS }}
+        if: env.DIFF_DOCUMENTS
         uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
           cache: yarn
 
       - name: Install all yarn packages
-        if: ${{ env.DIFF_DOCUMENTS }}
+        if: env.DIFF_DOCUMENTS
         run: yarn --frozen-lockfile
         env:
           # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Lint and format markdown files
-        if: ${{ env.DIFF_DOCUMENTS }}
+        if: env.DIFF_DOCUMENTS
         run: |
           # Generate random delimiter
           # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings
@@ -120,13 +120,13 @@ jobs:
           git diff
 
       - name: Setup reviewdog
-        if: ${{ env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' }}
+        if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true'
         uses: reviewdog/action-setup@v1
         with:
           reviewdog_version: latest
 
       - name: Suggest changes using diff
-        if: ${{ env.FILES_MODIFIED == 'true' }}
+        if: env.FILES_MODIFIED == 'true'
         env:
           REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
@@ -141,7 +141,7 @@ jobs:
             -reporter=github-pr-review < "${TMPFILE}"
 
       - name: Add reviews for markdownlint errors
-        if: ${{ env.MD_LINT_FAILED == 'true' }}
+        if: env.MD_LINT_FAILED == 'true'
         env:
           REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
@@ -154,7 +154,7 @@ jobs:
             -reporter="github-pr-review"
 
       - name: Fail if any issues pending
-        if: ${{ env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' }}
+        if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true'
         env:
           MD_LINT_FAILED: ${{ env.MD_LINT_FAILED }}
           FM_LINT_FAILED: ${{ env.FM_LINT_FAILED }}

.github/workflows/pr-review-companion.yml

@@ -7,14 +7,14 @@ name: PR review companion
 
 on:
   workflow_run:
-    workflows: ["PR Test", "PR Test - new CI"]
+    workflows: ["PR Test", "PR Test Legacy"]
     types:
       - completed
 
 jobs:
   review:
     runs-on: ubuntu-latest
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    if: github.event.workflow_run.conclusion == 'success'
     steps:
       - name: "Download artifact"
         uses: actions/download-artifact@v4
@@ -26,26 +26,26 @@ jobs:
           run-id: ${{ github.event.workflow_run.id }}
 
       - name: Check for artifacts
-        if: ${{ hashFiles('build/') != '' }}
+        if: hashFiles('build/') != ''
         run: |
           echo "HAS_ARTIFACT=true" >> "$GITHUB_ENV"
 
       - uses: actions/checkout@v4
-        if: ${{ env.HAS_ARTIFACT }}
+        if: env.HAS_ARTIFACT
         with:
           repository: mdn/yari
           path: yari
 
       - name: Install Python
-        if: ${{ env.HAS_ARTIFACT }}
+        if: env.HAS_ARTIFACT
         id: setup-python
         uses: actions/setup-python@v5
         with:
           python-version: "3.10"
 
       # See https://www.peterbe.com/plog/install-python-poetry-github-actions-faster
       - name: Load cached ~/.local
-        if: ${{ env.HAS_ARTIFACT }}
+        if: env.HAS_ARTIFACT
         uses: actions/cache@v4
         with:
           path: ~/.local
@@ -54,14 +54,14 @@ jobs:
           key: dotlocal-${{ runner.os }}-${{ steps.setup-python.outputs.python-version }}-0
 
       - name: Install Python poetry
-        if: ${{ env.HAS_ARTIFACT }}
+        if: env.HAS_ARTIFACT
         uses: snok/[email protected]
         with:
           virtualenvs-create: true
           virtualenvs-in-project: true
 
       - name: Load cached venv
-        if: ${{ env.HAS_ARTIFACT }}
+        if: env.HAS_ARTIFACT
         id: cached-poetry-dependencies
         uses: actions/cache@v4
         with:
@@ -71,19 +71,19 @@ jobs:
           key: venv-${{ runner.os }}-${{ hashFiles('**/poetry.lock') }}-${{ steps.setup-python.outputs.python-version }}-0
 
       - name: Install poetry dependencies
-        if: ${{ env.HAS_ARTIFACT && steps.cached-poetry-dependencies.outputs.cache-hit != 'true' }}
+        if: env.HAS_ARTIFACT && steps.cached-poetry-dependencies.outputs.cache-hit != 'true'
         run: |
           cd yari/deployer
           poetry install --no-interaction --no-root
 
       - name: Install Deployer
-        if: ${{ env.HAS_ARTIFACT }}
+        if: env.HAS_ARTIFACT
         run: |
           cd yari/deployer
           poetry install --no-interaction
 
       - name: Deploy and analyze built content
-        if: ${{ env.HAS_ARTIFACT }}
+        if: env.HAS_ARTIFACT
         env:
           BUILD_OUT_ROOT: ${{ github.workspace }}/build
 

.github/workflows/pr-test-new-ci.yml → .github/workflows/pr-test-legacy.yml

@@ -4,7 +4,7 @@
 # This way, if the tests passed, you'll be able to review the built
 # pages on a public URL.
 
-name: PR Test - new CI
+name: PR Test Legacy
 
 on:
   pull_request:
@@ -13,7 +13,7 @@ on:
 
 jobs:
   tests:
-    if: github.repository == 'mdn/content' && startsWith(github.event.pull_request.title, '[new-ci]')
+    if: github.repository == 'mdn/content'
     runs-on: ubuntu-latest
     # Set the permissions to `read-all`, preventing the workflow from
     # any accidental write access to the repository.
@@ -48,22 +48,22 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Setup Node.js environment
-        if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }}
+        if: env.GIT_DIFF_CONTENT || env.GIT_DIFF_FILES
         uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
           cache: yarn
 
       - name: Install all yarn packages
-        if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }}
+        if: env.GIT_DIFF_CONTENT || env.GIT_DIFF_FILES
         run: yarn --frozen-lockfile
         env:
           # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build changed content
         id: build-content
-        if: ${{ env.GIT_DIFF_CONTENT }}
+        if: env.GIT_DIFF_CONTENT
         env:
           CONTENT_ROOT: ${{ github.workspace }}/files
 
@@ -92,19 +92,12 @@ jobs:
           # Playground
           REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev
 
-          # rari
-          LIVE_SAMPLES_BASE_URL: https://live.mdnyalp.dev
-          INTERACTIVE_EXAMPLES_BASE_URL: https://interactive-examples.mdn.allizom.net
-
         run: |
           # The reason this script isn't in `package.json` is because
           # you don't need that script as a writer. It's only used in CI
           # and it can't use the default CONTENT_ROOT that gets set in
           # package.json.
-          echo Y|yarn rari update
-          ARGS=$(echo $GIT_DIFF_CONTENT | sed -E -e "s#(^| )files#\1-f $PWD/files#g")
-          yarn rari build --no-basic --json-issues --data-issues $ARGS
-          yarn yari-render-html
+          yarn build $GIT_DIFF_CONTENT
 
           echo "Disk usage size of the build"
           du -sh $BUILD_OUT_ROOT
@@ -119,21 +112,21 @@ jobs:
           wget https://github.com/${{ github.repository }}/compare/${BASE_SHA}...${HEAD_SHA}.diff -O ${BUILD_OUT_ROOT}/DIFF
 
       - name: Merge static assets with built documents
-        if: ${{ env.GIT_DIFF_CONTENT }}
+        if: env.GIT_DIFF_CONTENT
         run: |
           # Exclude the .map files, as they're used for debugging JS and CSS.
           rsync -a --exclude "*.map" node_modules/@mdn/yari/client/build/ $BUILD_OUT_ROOT
           # Show the final disk usage size of the build.
           du -sh $BUILD_OUT_ROOT
 
       - uses: actions/upload-artifact@v4
-        if: ${{ env.GIT_DIFF_CONTENT }}
+        if: env.GIT_DIFF_CONTENT
         with:
           name: build
           path: ${{ env.BUILD_OUT_ROOT }}
 
       - name: Check changed files
-        if: ${{ env.GIT_DIFF_FILES }}
+        if: env.GIT_DIFF_FILES
         run: |
           echo $GIT_DIFF_FILES
 

.github/workflows/pr-test.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   tests:
-    if: github.repository == 'mdn/content' && !startsWith(github.event.pull_request.title, '[new-ci]')
+    if: github.repository == 'mdn/content'
     runs-on: ubuntu-latest
     # Set the permissions to `read-all`, preventing the workflow from
     # any accidental write access to the repository.
@@ -48,22 +48,22 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Setup Node.js environment
-        if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }}
+        if: env.GIT_DIFF_CONTENT || env.GIT_DIFF_FILES
         uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
           cache: yarn
 
       - name: Install all yarn packages
-        if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }}
+        if: env.GIT_DIFF_CONTENT || env.GIT_DIFF_FILES
         run: yarn --frozen-lockfile
         env:
           # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build changed content
         id: build-content
-        if: ${{ env.GIT_DIFF_CONTENT }}
+        if: env.GIT_DIFF_CONTENT
         env:
           CONTENT_ROOT: ${{ github.workspace }}/files
 
@@ -92,12 +92,19 @@ jobs:
           # Playground
           REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev
 
+          # rari
+          LIVE_SAMPLES_BASE_URL: https://live.mdnyalp.dev
+          INTERACTIVE_EXAMPLES_BASE_URL: https://interactive-examples.mdn.allizom.net
+
         run: |
           # The reason this script isn't in `package.json` is because
           # you don't need that script as a writer. It's only used in CI
           # and it can't use the default CONTENT_ROOT that gets set in
           # package.json.
-          yarn build $GIT_DIFF_CONTENT
+          echo Y|yarn rari update
+          ARGS=$(echo $GIT_DIFF_CONTENT | sed -E -e "s#(^| )files#\1-f $PWD/files#g")
+          yarn rari build --no-basic --json-issues --data-issues $ARGS
+          yarn yari-render-html
 
           echo "Disk usage size of the build"
           du -sh $BUILD_OUT_ROOT
@@ -112,21 +119,21 @@ jobs:
           wget https://github.com/${{ github.repository }}/compare/${BASE_SHA}...${HEAD_SHA}.diff -O ${BUILD_OUT_ROOT}/DIFF
 
       - name: Merge static assets with built documents
-        if: ${{ env.GIT_DIFF_CONTENT }}
+        if: env.GIT_DIFF_CONTENT
         run: |
           # Exclude the .map files, as they're used for debugging JS and CSS.
           rsync -a --exclude "*.map" node_modules/@mdn/yari/client/build/ $BUILD_OUT_ROOT
           # Show the final disk usage size of the build.
           du -sh $BUILD_OUT_ROOT
 
       - uses: actions/upload-artifact@v4
-        if: ${{ env.GIT_DIFF_CONTENT }}
+        if: env.GIT_DIFF_CONTENT
         with:
           name: build
           path: ${{ env.BUILD_OUT_ROOT }}
 
       - name: Check changed files
-        if: ${{ env.GIT_DIFF_FILES }}
+        if: env.GIT_DIFF_FILES
         run: |
           echo $GIT_DIFF_FILES
 

files/en-us/glossary/time_to_first_byte/index.md

@@ -8,14 +8,17 @@ page-type: glossary-definition
 
 **Time to First Byte** (TTFB) refers to the time between the browser requesting a page and when it receives the first byte of information from the server. This time includes {{Glossary("DNS")}} lookup and establishing the connection using a {{Glossary("TCP")}} handshake and {{Glossary("TLS")}} handshake if the request is made over {{Glossary("HTTPS")}}.
 
-TTFB is the time it takes between the start of the request and the start of the response, in milliseconds:
+TTFB is the time it takes between the start of the request and the start of the response, in milliseconds. This can be measured using the `{{domxref("PerformanceResourceTiming.requestStart", "requestStart")}}` attribute of {{domxref("PerformanceNavigationTiming")}}:
 
-```plain
-TTFB = responseStart - navigationStart
+```javascript
+const ttfb = performance.getEntriesByType("navigation")[0].responseStart;
 ```
 
+> [!NOTE]
+> For sites using {{HTTPStatus("103", "103 Early Hints")}}, TTFB is typically the _first bytes_ (after any redirects) — and so, the 103 interim response. Site owners wishing to measure the time until the final response should use `{{domxref("PerformanceResourceTiming.finalResponseHeadersStart", "finalResponseHeadersStart")}}`, where supported.
+
 ## See also
 
 - [A typical HTTP session](/en-US/docs/Web/HTTP/Session)
 - [PerformanceResourceTiming](/en-US/docs/Web/API/PerformanceResourceTiming)
-- [PerformanceTiming](/en-US/docs/Web/API/PerformanceTiming)
+- [PerformanceNavigationTiming](/en-US/docs/Web/API/PerformanceNavigationTiming)

files/en-us/learn_web_development/core/accessibility/html/index.md

@@ -497,9 +497,9 @@ This highlights the importance of not only using meaningful file names in case s
 
 Note that the contents of the `alt` attribute should always provide a direct representation of the image and what it conveys visually. The alt should be brief and concise and include all the information conveyed in the image that is not duplicated in the surrounding text.
 
-The content of the `alt` attribute for a single image differs based on the context. For example, if the photo of Fluffy is an avatar next to a review for Yuckymeat dog food, `alt="Fluffy"` is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as `alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth."` is appropriate. As the surrounding text likely has Fluffy's size and breed, that is not included in the `alt`. However, as the dog's biography likely doesn't include hair length, colors, or toy preferences, which the potential parent needs to know, it is included. Is the image outdoors, or does Fluffy have a red collar with a blue leash? Not important in terms of adopting the pet and therefore not included. All information image conveys that a sited user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful.
+The content of the `alt` attribute for a single image differs based on the context. For example, if the photo of Fluffy is an avatar next to a review for Yuckymeat dog food, `alt="Fluffy"` is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as `alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth."` is appropriate. As the surrounding text likely has Fluffy's size and breed, that is not included in the `alt`. However, as the dog's biography likely doesn't include hair length, colors, or toy preferences, which the potential parent needs to know, it is included. Is the image outdoors, or does Fluffy have a red collar with a blue leash? Not important in terms of adopting the pet and therefore not included. All information image conveys that a sighted user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful.
 
-Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not seen the image before. If the ball is Fluffy's favorite toy or if the sited user can't know that from the image, then don't include it.
+Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not seen the image before. If the ball is Fluffy's favorite toy or if a sighted user can't know that from the image, then don't include it.
 
 One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning. If they are decorative, it is better to write an empty text as a value for `alt` attribute (see [Empty alt attributes](#empty_alt_attributes)) or to just include them in the page as CSS background images.
 

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/).