Merge branch 'main' into mousePointerCrosslinks

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

@@ -101,6 +101,12 @@ jobs:
           echo "FM_LINT_FAILED=${FM_LINT_FAILED}" >> $GITHUB_ENV
 
           echo "Running Prettier"
+          PRETTIER_FAILED=false
+          PRETTIER_LOG=$(yarn prettier --check ${files_to_lint} 2>&1) || PRETTIER_FAILED=true
+          echo "PRETTIER_LOG<<${EOF}" >> $GITHUB_ENV
+          echo "${PRETTIER_LOG}" >> $GITHUB_ENV
+          echo "${EOF}" >> $GITHUB_ENV
+          echo "PRETTIER_FAILED=${PRETTIER_FAILED}" >> $GITHUB_ENV
           yarn prettier -w ${files_to_lint}
 
           if [[ -n $(git diff) ]]; then
@@ -110,16 +116,17 @@ jobs:
           # info for troubleshooting
           echo MD_LINT_FAILED=${MD_LINT_FAILED}
           echo FM_LINT_FAILED=${FM_LINT_FAILED}
+          echo PRETTIER_FAILED=${PRETTIER_FAILED}
           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: |
@@ -134,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: |
@@ -147,11 +154,31 @@ 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 }}
+          PRETTIER_FAILED: ${{ env.PRETTIER_FAILED }}
+          MD_LINT_LOG: ${{ env.MD_LINT_LOG }}
+          FM_LINT_LOG: ${{ env.FM_LINT_LOG }}
+          PRETTIER_LOG: ${{ env.PRETTIER_LOG }}
         run: |
-          echo -e "\nLogs from markdownlint:"
-          echo "${MD_LINT_LOG}"
-          echo -e "\nLogs from front-matter linter:"
-          echo "${FM_LINT_LOG}"
-          echo -e "\nPlease fix all the linting issues mentioned in above logs and in the review comments."
+          echo -e "\nPlease fix all the linting issues mentioned in the following logs and in the PR review comments."
+
+          if [[ ${MD_LINT_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from markdownlint:"
+            echo "${MD_LINT_LOG}"
+          fi
+
+          if [[ ${FM_LINT_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from front-matter linter:"
+            echo "${FM_LINT_LOG}"
+          fi
+
+          if [[ ${PRETTIER_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from Prettier formatter:"
+            echo "${PRETTIER_LOG}"
+            echo -e "\nYou can use Prettier playground to format the files online (configuration pre-filled): https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBiABABwIYGd7owAWc6CMAlgE6kBmFANqSTSADQgSaXS7KjYqVCAHcACoIR8U2BiOwBPPhwBGVbGADWcGAGVsAWzgAZClDjIYVAK5xV6rTt04wZgOaWbdkLjgGKnrYccAAemHBUFEawsgAqEVCCFHDStLK+HLjuTACK1hDwyGkMGSAAVrghutlweQUWSMWlAI758GLCmNIgeAC05nAAJkPsIFbYjO4AwhAGBtjIPQwMo1lQbkwAgjBWFCrW7RGm5kXp3kQwBgwA6kQU8LgucLpS9xQAbvcKi2C4yiDvWwASSgw1gujAkW4m1BuhgCiYpxK3kwwl813UmEWqJSEXeFg4Zl8VBgHWwbnmSNKOCoxMW8yomkGoigo1RZhg1wog2IyAAHAAGDg0VrUOBkikLRpnDgwbAqLk8ojIABMHGsvli8tSMpAfhUQ2Gg2M2HW1nJcAAYhAqPMdu5FtgDhAQABfV1AA \n"
+          fi
+
           exit 1

.vscode/dictionaries/terms-abbreviations.txt

@@ -21,6 +21,7 @@ ANMF
 anonymization
 antialiasing
 antitracking
+apideck
 APNG
 appcontent
 arcosh
@@ -529,6 +530,7 @@ quickmenu
 qvalues
 QWERTZ
 randomizer
+rari
 rasterizes
 RDBMS
 RDBMSes
@@ -562,6 +564,7 @@ retarget
 retargeted
 retargeting
 retargetings
+reviewdog
 RFCOMM
 RGTC
 roadmaps
@@ -879,6 +882,7 @@ xrayed
 Xrays
 XRCPU
 XSSI
+yari
 yearless
 Zalgo
 zoomable

files/en-us/_redirects.txt

@@ -11765,7 +11765,6 @@
 /en-US/docs/Web/CSS/::cue-region	/en-US/docs/Web/API/WebVTT_API
 /en-US/docs/Web/CSS/:@-moz-document	/en-US/docs/Web/CSS/@document
 /en-US/docs/Web/CSS/:any	/en-US/docs/Web/CSS/:is
-/en-US/docs/Web/CSS/:closed	/en-US/docs/Web/CSS/:popover-open
 /en-US/docs/Web/CSS/:dir()	/en-US/docs/Web/CSS/:dir
 /en-US/docs/Web/CSS/:host()	/en-US/docs/Web/CSS/:host_function
 /en-US/docs/Web/CSS/:lang()	/en-US/docs/Web/CSS/:lang
@@ -11778,7 +11777,6 @@
 /en-US/docs/Web/CSS/:nth-last-col	/en-US/docs/Web/CSS/:nth-last-of-type
 /en-US/docs/Web/CSS/:nth-last-of-type()	/en-US/docs/Web/CSS/:nth-last-of-type
 /en-US/docs/Web/CSS/:nth-of-type()	/en-US/docs/Web/CSS/:nth-of-type
-/en-US/docs/Web/CSS/:open	/en-US/docs/Web/CSS/:popover-open
 /en-US/docs/Web/CSS/@-moz-document	/en-US/docs/Web/CSS/@document
 /en-US/docs/Web/CSS/@font-face/font-variant	/en-US/docs/Web/CSS/@font-face
 /en-US/docs/Web/CSS/@media/update-frequency	/en-US/docs/Web/CSS/@media/update

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

@@ -10,7 +10,7 @@ page-type: glossary-definition
 
 Typically, a compiler transforms code written in a higher-level language such as [C++](https://en.wikipedia.org/wiki/C++), [Rust](<https://en.wikipedia.org/wiki/Rust_(programming_language)>), or [Java](<https://en.wikipedia.org/wiki/Java_(programming_language)>) into executable (runnable) code — so-called **binary code** or **machine code**. [WebAssembly](/en-US/docs/WebAssembly), for example, is a form of executable binary code that [can be compiled from code written in C++, Rust, C#, Go, Swift, and several other languages](https://webassembly.org/getting-started/developers-guide/) and run on any web page, with most features supported in modern browsers (see [browser compatibility table](/en-US/docs/WebAssembly#browser_compatibility)).
 
-Most compilers perform either ahead-of-time (AOT) compilation or just-in-time (JIT) compilation.
+Most compilers perform either ahead-of-time (AOT) compilation or {{glossary("Just In Time Compilation", "just-in-time (JIT)")}} compilation.
 
 The GNU `gcc` compiler is one well-known example of an AOT compiler. AOT compilers are typically invoked from the command line in a shell environment (from within a terminal or console) or within an {{Glossary("IDE")}}.
 
@@ -22,3 +22,5 @@ Compilers may also translate among higher-level languages — for example, from
 
 - [Compiler](https://en.wikipedia.org/wiki/Compiler) on Wikipedia
 - [WebAssembly](/en-US/docs/WebAssembly)
+- Related glossary terms:
+  - {{glossary("Just In Time Compilation", "Just-In-Time (JIT)")}}

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

@@ -0,0 +1,19 @@
+---
+title: Just-In-Time Compilation (JIT)
+slug: Glossary/Just_In_Time_Compilation
+page-type: glossary-definition
+---
+
+{{GlossarySidebar}}
+
+**JIT** (_Just-In-Time Compilation_) is a {{glossary("compile", "compilation")}} process in which code is translated from an intermediate representation or a higher-level language (e.g., {{glossary("JavaScript")}} or Java bytecode) into machine code _at runtime_, rather than prior to execution. This approach combines the benefits of both interpretation and ahead-of-time (AOT) compilation.
+
+JIT compilers typically continuously analyze the code as it is executed, identifying parts of the code that are executed frequently (hot spots). If the speedup gains outweigh the compilation overhead, then the JIT compilers will compile those parts into machine code. The compiled code is then executed directly by the processor, which can result in significant performance improvements.
+
+JIT is commonly used in modern {{glossary("browser", "web browsers")}} to optimize the performance of JavaScript code.
+
+## See also
+
+- [Just-In-Time Compilation](https://en.wikipedia.org/wiki/Just-in-time_compilation) on Wikipedia
+- Related glossary terms:
+  - {{glossary("compile")}}

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

@@ -16,5 +16,5 @@ Clients usually retrieve all messages and then delete them from the server, but
 - [RFC 1734](https://datatracker.ietf.org/doc/html/rfc1734) (Specification of POP3 authentication mechanism)
 - [RFC 1939](https://datatracker.ietf.org/doc/html/rfc1939) (Specification of POP3)
 - [RFC 2449](https://datatracker.ietf.org/doc/html/rfc2449) (Specification of POP3 extension mechanism)
-- Related glossary terms::
+- Related glossary terms:
   - {{Glossary("IMAP")}}

files/en-us/glossary/same-origin_policy/index.md

@@ -13,6 +13,6 @@ It helps isolate potentially malicious documents, reducing possible attack vecto
 ## See also
 
 - [Same-origin policy](/en-US/docs/Web/Security/Same-origin_policy)
-- Related glossary terms::
+- Related glossary terms:
   - {{Glossary("CORS")}}
   - {{Glossary("origin")}}

files/en-us/learn_web_development/core/css_layout/responsive_design/index.md

@@ -309,6 +309,7 @@ On mobile the heading is smaller, but on desktop, we see the larger heading size
 ```html live-sample___type-rwd
 <div class="wrapper">
   <div class="col1">
+    <h1>Watch my size!</h1>
     <p>
       This layout is responsive. See what happens if you make the browser window
       wider or narrow.

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

@@ -32,7 +32,7 @@ In particular, if you've never done any coding before, we'd recommend the [Your
   - : Access to web content such as public services, education, e-commerce sites, and entertainment is a human right. No one should be excluded based on disability, race, geography, or other human characteristics. This module discusses the best practices and techniques you should learn to make your websites as accessible as possible.
 - [Design for developers](/en-US/docs/Learn_web_development/Core/Design_for_developers)
   - : The idea of this module is to (re-)introduce developers to design thinking. They may not want to work as designers, but having some basic user experience and design theory is good for everyone involved in building websites, no matter what their role. At the very least, even the most technical, "non-designer" developer should understand design briefs, why things are designed as they are, and be able to get into the mindset of the user. And it'll help them make their portfolios look better.
-- [Version_control](/en-US/docs/Learn_web_development/Core/Version_control)
+- [Version control](/en-US/docs/Learn_web_development/Core/Version_control)
   - : Version control tools are an essential part of modern workflows, for backing up and collaborating on codebases. This module takes you through the essentials of version control using Git and GitHub.
 
 ## See also

files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md

@@ -25,8 +25,8 @@ In the previous article, we looked at one of the most important features for mak
       <th scope="row">Learning outcomes:</th>
       <td>
         <ul>
-          <li>An understanding of the accessibility issues associated with tables.<li>
-          <li>Adding captions to tables.<li>
+          <li>An understanding of the accessibility issues associated with tables.</li>
+          <li>Adding captions to tables.</li>
           <li>Better table structuring with head, body, and footer.</li>
           <li>Creating further association between headers and cells with the <code>scope</code>, <code>id</code>, and <code>headers</code> attributes.</li>
         </ul>

files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md

@@ -51,13 +51,12 @@ body {
 <details>
 <summary>Click here to show the solution</summary>
 
-You will need to increase the height and width of the second block, to add the size of the padding and border:
+You will need to increase the width of the second block, to add the size of the padding and border:
 
 ```css
 .alternate {
   box-sizing: border-box;
   width: 390px;
-  height: 240px;
 }
 ```
 

files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md

@@ -68,7 +68,9 @@ Then you need to remember there are special keyword values for all properties. I
 
 ## Task 2
 
-In this task, we want you to make your changes by leveraging the [order of cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#order_of_cascade_layers) section. Edit an existing declaration, without touching the lightgreen declaration, using the cascade layer order to make the links rebeccapurple.
+In this task, we want you to manipulate the cascade layer order to color the links `rebeccapurple`. No editing the `lightgreen` declaration!
+
+This task is a stretch goal — it requires knowledge of cascade layers, which we didn't cover in the [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) article. You can find the information you need to attempt this task at [Cascade layers > Determining the precedence based on the order of layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers).
 
 Your final result should look like the image below:
 

files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md

@@ -49,7 +49,7 @@ Let's start by taking a quick look at the key things we are dealing with, then w
 
 ### Cascade
 
-Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin, the cascade layer, and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used.
+Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here.
 
 In the below example, we have two rules that could apply to the `<h1>` element. The `<h1>` content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins.
 
@@ -479,18 +479,16 @@ Let's walk through this to see what's happening — try removing some of the pro
 4. The 2nd element _does_ get the red background color, but no border. Why? Because of the `!important` flag in the second rule. Adding the `!important` flag after `border: none` means that this declaration will win over the `border` value in the previous rule, even though the ID selector has higher specificity.
 
 > [!NOTE]
-> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity, or to include an important declaration in a prior cascade layer (we haven't covered cascade layers yet).
+> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity.
 
 One situation in which you may have to use the `!important` flag is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override an inline style or an important declaration that can't be overridden in any other way. But really, don't use it if you can avoid it.
 
 ## The effect of CSS location
 
-Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet and cascade layer it is specified in.
+Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet it is specified in.
 
 It is possible for users to set custom stylesheets to override the developer's styles. For example, a visually impaired user might want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.
 
-It is also possible to declare developer styles in cascade layers: you can make non-layered styles override styles declared in layers or you can make styles declared in later layers override styles from earlier declared layers. For example, as a developer you may not be able to edit a third-party stylesheet, but you can import the external stylesheet into a cascade layer so that all of your styles easily override the imported styles without worrying about third-party selector specificity.
-
 ### Order of overriding declarations
 
 Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:

files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md

@@ -43,7 +43,7 @@ In this lesson, we will take a look at some of the most frequently used value ty
 
 In CSS specifications and on the property pages here on MDN you will be able to spot value types as they will be surrounded by angle brackets (`<`, `>`), such as [`<color>`](/en-US/docs/Web/CSS/color_value) or {{cssxref("length")}}. When you see the value type `<color>` as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the [`<color>`](/en-US/docs/Web/CSS/color_value) reference page.
 
-Sometimes value types and properties can have the same, or similar names — For example, there is a {{cssxref("color")}} property and a [`<color>`](/en-US/docs/Web/CSS/color_value) data type. You can use the angle brackets to determine which one you are studying in each case. HTML elements also use angle brackets, but it should be clear from the context which one you are looking at. If yo are not sure, try searching for it on MDN.
+Sometimes value types and properties can have the same, or similar names — For example, there is a {{cssxref("color")}} property and a [`<color>`](/en-US/docs/Web/CSS/color_value) data type. You can use the angle brackets to determine which one you are studying in each case. HTML elements also use angle brackets, but it should be clear from the context which one you are looking at. If you are not sure, try searching for it on MDN.
 
 > [!NOTE]
 > You'll see CSS value types referred to as _data types_. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value type. The term _value_ refers to any particular expression supported by a value type that you choose to use.