Merge branch 'main' into pwa-main-page

.github/workflows/markdown-lint.yml

@@ -7,6 +7,7 @@ on:
     paths:
       - .markdownlint-cli2.jsonc
       - .nvmrc
+      - .prettier*
       - package.json
       - yarn.lock
       - .github/workflows/markdown-lint.yml

.github/workflows/pr-check_markdownlint.yml

@@ -45,3 +45,8 @@ jobs:
           yarn markdownlint-cli2 ${files_to_lint}
           echo "Linting front-matter"
           node scripts/front-matter_linter.js ${files_to_lint}
+
+      - name: Prettier markdown files
+        run: |
+          files_to_lint="${{ env.DIFF_DOCUMENTS }}"
+          yarn prettier -c ${files_to_lint}

.prettierignore

@@ -10,4 +10,3 @@ build/
 /files/en-us/mozilla/add-ons/**/*.md
 /files/en-us/web/html/**/*.md
 /files/en-us/web/javascript/**/*.md
-/files/en-us/web/web_components/**/*.md

files/en-us/_redirects.txt

@@ -3667,7 +3667,6 @@
 /en-US/docs/HTML/Element/acronym-redirect-1	/en-US/docs/Web/HTML/Element/acronym
 /en-US/docs/HTML/Element/acronym2	/en-US/docs/Web/HTML/Element/acronym
 /en-US/docs/HTML/Element/address	/en-US/docs/Web/HTML/Element/address
-/en-US/docs/HTML/Element/applet	/en-US/docs/Web/HTML/Element/applet
 /en-US/docs/HTML/Element/area	/en-US/docs/Web/HTML/Element/area
 /en-US/docs/HTML/Element/area-redirect-1	/en-US/docs/Web/HTML/Element/area
 /en-US/docs/HTML/Element/article	/en-US/docs/Web/HTML/Element/article
@@ -3939,7 +3938,6 @@
 /en-US/docs/HTML:Element:abbr	/en-US/docs/Web/HTML/Element/abbr
 /en-US/docs/HTML:Element:acronym	/en-US/docs/Web/HTML/Element/acronym
 /en-US/docs/HTML:Element:address	/en-US/docs/Web/HTML/Element/address
-/en-US/docs/HTML:Element:applet	/en-US/docs/Web/HTML/Element/applet
 /en-US/docs/HTML:Element:area	/en-US/docs/Web/HTML/Element/area
 /en-US/docs/HTML:Element:b	/en-US/docs/Web/HTML/Element/b
 /en-US/docs/HTML:Element:base	/en-US/docs/Web/HTML/Element/base
@@ -11854,6 +11852,7 @@
 /en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events	/en-US/docs/Web/Events/Creating_and_triggering_events
 /en-US/docs/Web/Guide/API/DOM/Events/Event_dispatching_example	/en-US/docs/Web/Events/Creating_and_triggering_events
 /en-US/docs/Web/Guide/API/DOM/Events/Event_handlers	/en-US/docs/Web/Events/Event_handlers
+/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events	/en-US/docs/Web/API/MutationEvent
 /en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained	/en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained
 /en-US/docs/Web/Guide/API/DOM/Events/Touch_events	/en-US/docs/Web/API/Touch_events
 /en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)	/en-US/docs/Web/API/Touch_events
@@ -12073,6 +12072,7 @@
 /en-US/docs/Web/HTML/Forms_in_HTML	/en-US/docs/Learn/Forms
 /en-US/docs/Web/HTML/Index	/en-US/docs/Web/HTML
 /en-US/docs/Web/HTML/Inline_elemente	/en-US/docs/Glossary/Inline-level_content
+/en-US/docs/Web/HTML/Inline_elements	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/Web/HTML/Inline_elmements	/en-US/docs/Glossary/Inline-level_content
 /en-US/docs/Web/HTML/Introduction	/en-US/docs/Learn/HTML/Introduction_to_HTML
 /en-US/docs/Web/HTML/Kinds_of_HTML_content	/en-US/docs/Web/HTML/Content_categories

files/en-us/_wikihistory.json

@@ -94100,34 +94100,6 @@
       "alecananian"
     ]
   },
-  "Web/HTML/Element/applet": {
-    "modified": "2020-10-15T21:12:10.376Z",
-    "contributors": [
-      "alattalatta",
-      "sideshowbarker",
-      "ddbeck",
-      "mfuji09",
-      "ExE-Boss",
-      "Sheppy",
-      "teoli",
-      "mfluehr",
-      "chrisdavidmills",
-      "erikadoyle",
-      "brunoais",
-      "kscarfone",
-      "ethertank",
-      "tregagnon",
-      "avsaro",
-      "cers",
-      "fscholz",
-      "osdm",
-      "Taken",
-      "Ptak82",
-      "Um4Sm1",
-      "Witia",
-      "PablO"
-    ]
-  },
   "Web/HTML/Element/area": {
     "modified": "2020-11-09T11:29:48.831Z",
     "contributors": [
@@ -126782,10 +126754,6 @@
       "Manuel_Strehl"
     ]
   },
-  "Web/SVG/Element/discard": {
-    "modified": "2020-10-15T21:49:16.314Z",
-    "contributors": ["Tigt", "fscholz", "Sebastianz"]
-  },
   "Web/SVG/Element/ellipse": {
     "modified": "2020-10-15T21:11:04.607Z",
     "contributors": [

files/en-us/glossary/block-level_content/index.md

@@ -9,7 +9,7 @@ In CSS, content that participates in block layout is called **block-level conten
 In a block layout, boxes are laid out one after the other, vertically, beginning at the top of a containing block. Each box's left outer edge touches the left edge of the containing block.\
 A block-level element always starts on a new line. In horizontal writing modes, like English or Arabic, it occupies the entire horizontal space of its parent element (container) and vertical space equal to the height of its contents, thereby creating a "block".
 
-> **Note:** The above behaviour of block layout changes if the containing block's [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) is set to value other than [the default value](/en-US/docs/Web/CSS/writing-mode#formal_definition).
+> **Note:** The above behavior of block layout changes if the containing block's [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) is set to value other than [the default value](/en-US/docs/Web/CSS/writing-mode#formal_definition).
 
 > **Note:** HTML (_HyperText Markup Language_) elements historically were categorized as either "block-level" elements or "inline" elements. As a presentational characteristic, this is now specified by CSS.
 

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

@@ -14,7 +14,7 @@ Examples with the number `0x12345678` (i.e. 305 419 896 in decimal):
 
 - _little-endian_: `0x78 0x56 0x34 0x12`
 - _big-endian_: `0x12 0x34 0x56 0x78`
-- _mixed-endian_ (historic and very rare): `0x34 0x12 0x78 0x56`<-
+- _mixed-endian_ (historic and very rare): `0x34 0x12 0x78 0x56`
 
 ## See also
 

files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md

@@ -60,10 +60,15 @@ Note that most images on the web, including in Google Images, are copyrighted. T
 
 ### Font
 
-To choose a font:
+As with images, many fonts are protected by licenses, meaning you cannot freely use them in your site. [Google Fonts](https://developers.google.com/fonts) is a web service owned by Google that provides access to many fonts.
 
-1. Go to [Google Fonts](https://fonts.google.com/) and find one you like.
-2. Copy the lines of code Google gives you into your text editor to save for later.
-3. For more details about using Google Fonts, see [this page](https://developers.google.com/fonts/docs/getting_started)
+Once you have found a font, there are two main ways of using it:
+
+1. Add a reference in your code to load the font from Google's servers.
+2. Download the font file to your own system, host the font yourself, and use your hosted copy in your website's code.
+
+> **Note:** Serving fonts hosted on Google Fonts may be incompatible with the European Union's data privacy regulation [GDPR](https://gdpr.eu/what-is-gdpr/) as the font service exposes the user's IP address. If this is a potential problem for you, choose the second option.
+
+Alternatively you can use [safe web fonts](https://web.mit.edu/jmorzins/www/fonts.html) such as Arial, Times New Roman, or Courier New.
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

files/en-us/learn/html/tables/basics/index.md

@@ -203,7 +203,7 @@ td {
 }
 ```
 
-{{EmbedLiveSample("How_does_a_table_work", 100, 460)}}
+{{EmbedLiveSample("How_does_a_table_work", 100, 560)}}
 
 When implemented correctly, HTML tables are handled well by accessibility tools such as screen readers, so a successful HTML table should enhance the experience of sighted and visually impaired users alike.
 
@@ -526,7 +526,7 @@ Now it's time to have a go yourself.
 
 Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.
 
-{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}
+{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 350)}}
 
 Recreate the table by following the steps below.
 

files/en-us/learn/javascript/building_blocks/functions/index.md

@@ -234,23 +234,15 @@ textBox.addEventListener("keydown", (event) => {
 });
 ```
 
-If the function only has one line in the curly brackets, you omit the curly brackets:
+If the function only takes one parameter, you can omit the brackets around the parameter:
 
-```js
-textBox.addEventListener("keydown", (event) =>
-  console.log(`You pressed "${event.key}".`)
-);
-```
-
-If the function only takes one parameter, you can also omit the brackets around the parameter:
-
-```js
-textBox.addEventListener("keydown", (event) =>
-  console.log(`You pressed "${event.key}".`)
-);
+```js-nolint
+textBox.addEventListener("keydown", event => {
+  console.log(`You pressed "${event.key}".`);
+});
 ```
 
-Finally, if your function needs to return a value, and contains only one line, you can also omit the `return` statement. In the following example we're using the {{jsxref("Array.prototype.map()","map()")}} method of `Array` to double every value in the original array:
+Finally, if your function contains only one line that's a `return` statement, you can also omit the braces and the `return` keyword, and implicitly return the expression. In the following example we're using the {{jsxref("Array.prototype.map()","map()")}} method of `Array` to double every value in the original array:
 
 ```js
 const originals = [1, 2, 3];
@@ -270,6 +262,16 @@ function doubleItem(item) {
 }
 ```
 
+You can use the same concise syntax to rewrite the `addEventListener` example.
+
+```js
+textBox.addEventListener("keydown", (event) =>
+  console.log(`You pressed "${event.key}".`)
+);
+```
+
+In this case, the value of `console.log()`, which is `undefined`, is implicitly returned from the callback function.
+
 We recommend that you use arrow functions, as they can make your code shorter and more readable. To learn more, see the [section on arrow functions in the JavaScript guide](/en-US/docs/Web/JavaScript/Guide/Functions#arrow_functions), and our [reference page on arrow functions](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).
 
 > **Note:** There are some subtle differences between arrow functions and normal functions. They're outside the scope of this introductory guide, and are unlikely to make a difference in the cases we've discussed here. To learn more, see the [arrow function reference documentation](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions).

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

@@ -106,7 +106,7 @@ const bigmouth = 'I\'ve got no right to take my place…';
 console.log(bigmouth);
 ```
 
-This works fine. You can escape other characters in the same way, e.g. `\"`, and there are some special codes besides. See [Escape sequences](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_sequences) for more details.
+This works fine. You can escape other characters in the same way, e.g. `\"`, and there are some special codes besides. See [Escape sequences](/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#escape_sequences) for more details.
 
 ## Concatenating strings