Merge branch 'main' into mv-webassembly

.github/CODEOWNERS

@@ -9,7 +9,7 @@
 # ----------------------------------------------------------------------------
 # DEFAULT OWNERS
 # ----------------------------------------------------------------------------
-*    @mdn/core-dev
+*    @mdn/core-yari-content
 
 # ----------------------------------------------------------------------------
 # DEFAULT ENGLISH CONTENT OWNER(S)
@@ -71,7 +71,7 @@
 # ----------------------------------------------------------------------------
 /.github/     @mdn/core-dev
 /*            @mdn/core-dev
-/*.md         @mdn/core-dev @mdn/core-yari-content
+/*.md         @mdn/core-yari-content
 # These are @schalkneethling because the auto-merge GHA workflow uses my PAT and will assign me.
 # If we add another reviewer, the auto-merge will cease to be automatic.
 /package.json @schalkneethling

.github/ISSUE_TEMPLATE/ff-project-issue.md

@@ -2,7 +2,7 @@
 name: Firefox Release Issue
 about: "Use this template to create an issue for a Firefox Release Project"
 labels: ""
-assignees: 
+assignees:
 title: ""
 ---
 
@@ -17,11 +17,12 @@ title: ""
 
 - [ ] Set bugs to `dev-doc-complete`
 - [ ] Add entry to Firefox release notes if feature is enabled in release
-or
 - [ ] Add entry to Firefox experimental features page if feature is not yet enabled in release
 
 ## Features to document
 
 ## Related Gecko bugs
 
 ## Other
+
+- [ ] Check content open issues to see if any pertain to the subject matter. If there are any that can be closed because of the work, do so. If there are any that can be fixed relatively quickly because of the knowledge from completing this issue and you have time, feel free to go ahead and fix them.

.github/ISSUE_TEMPLATE/new-content-suggestion.md

@@ -7,9 +7,11 @@ title: "Content suggestion: <TITLE OF SUGGESTION>"
 ---
 
 ## What is the new suggestion?
+
 <!-- include a short description of the content work suggestion  -->
 
 ## Why is it important or useful?
+
 <!-- Tell us why the idea is important or useful. Include any information you
 can think of that would be useful, for example:
 

REVIEWING.md

@@ -54,7 +54,7 @@ inappropriate, than it is to follow every guideline to the letter.
      submitter has not explained why they are making this change.
    - You have the right to close a pull request if it is too complex and/or
      contains multiple unrelated changes and ask the submitter to submit their
-    changes in smaller atomic chunks.
+     changes in smaller atomic chunks.
 4. When reviewing a pull request, use the [GitHub review tools](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/reviewing-changes-in-pull-requests/about-pull-request-reviews).
    Use "Request changes" when submitting a review that will require the
    submitter to do some more work, or "Approve" if the submission is ready to

files/en-us/glossary/signature/function/index.md

@@ -44,7 +44,7 @@ public static void main(String[] args)
 - The `static` keyword indicates that this method is a class method as opposed to being an instance method.
 - The `void` keyword indicates that this method has no return value.
 - The name of the method is `main`.
-- The method accepts one parameter of type String Array. It is named `args.`
+- The method accepts one parameter of type String Array. It is named `args`.
 
 ## See also
 

files/en-us/learn/performance/video/index.md

@@ -74,7 +74,7 @@ See [CanIUse.com](https://caniuse.com/#search=video) for current browser support
 
 ### Video autoplay
 
-To ensure that a looping background video autoplays, you must add several attributes to the video tag: `autoplay`, `muted`, and `playsinline.`
+To ensure that a looping background video autoplays, you must add several attributes to the video tag: `autoplay`, `muted`, and `playsinline`.
 
 ```html
 <video autoplay="" loop="" muted="true" playsinline="" src="backgroundvideo.mp4">

files/en-us/learn/server-side/django/home_page/index.md

@@ -384,7 +384,7 @@ Here are a couple of tasks to test your familiarity with model queries, views, a
 
    > **Note:** The section [Extending templates](#extending_templates) explains how to create blocks and extend a block in another template.
 
-2. Modify the [view](<#view_(function-based)>) to generate counts for _genres_ and _books_ that contain a particular word (case insensitive), and pass the results to the `context.` You accomplish this in a similar way to creating and using `num_books` and `num_instances_available`. Then update the [index template](#the_index_template) to include these variables.
+2. Modify the [view](<#view_(function-based)>) to generate counts for _genres_ and _books_ that contain a particular word (case insensitive), and pass the results to the `context`. You accomplish this in a similar way to creating and using `num_books` and `num_instances_available`. Then update the [index template](#the_index_template) to include these variables.
 
 ## Summary
 

files/en-us/learn/server-side/express_nodejs/mongoose/index.md

@@ -132,17 +132,17 @@ Installing _Mongoose_ adds all its dependencies, including the MongoDB database
 _Mongoose_ requires a connection to a MongoDB database. You can `require()` and connect to a locally hosted database with `mongoose.connect()`, as shown below.
 
 ```js
-//Import the mongoose module
+// Import the mongoose module
 const mongoose = require('mongoose');
 
-//Set up default mongoose connection
+// Set up default mongoose connection
 const mongoDB = 'mongodb://127.0.0.1/my_database';
 mongoose.connect(mongoDB, {useNewUrlParser: true, useUnifiedTopology: true});
 
-//Get the default connection
+// Get the default connection
 const db = mongoose.connection;
 
-//Bind connection to error event (to get notification of connection errors)
+// Bind connection to error event (to get notification of connection errors)
 db.on('error', console.error.bind(console, 'MongoDB connection error:'));
 ```
 
@@ -163,10 +163,10 @@ Schemas are then "compiled" into models using the `mongoose.model()` method. Onc
 The code fragment below shows how you might define a simple schema. First you `require()` mongoose, then use the Schema constructor to create a new schema instance, defining the various fields inside it in the constructor's object parameter.
 
 ```js
-//Require Mongoose
+// Require Mongoose
 const mongoose = require('mongoose');
 
-//Define a schema
+// Define a schema
 const Schema = mongoose.Schema;
 
 const SomeModelSchema = new Schema({
@@ -374,14 +374,14 @@ query.exec((err, athletes) => {
 Above we've defined the query conditions in the `find()` method. We can also do this using a `where()` function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.
 
 ```js
-Athlete.
-  find().
-  where('sport').equals('Tennis').
-  where('age').gt(17).lt(50). // Additional where query
-  limit(5).
-  sort({ age: -1 }).
-  select('name age').
-  exec(callback); // where callback is the name of our callback function.
+Athlete
+  .find()
+  .where('sport').equals('Tennis')
+  .where('age').gt(17).lt(50) // Additional where query
+  .limit(5)
+  .sort({ age: -1 })
+  .select('name age')
+  .exec(callback); // where callback is the name of our callback function.
 ```
 
 The [find()](https://mongoosejs.com/docs/api.html#query_Query-find) method gets all matching records, but often you just want to get one match. The following methods query for a single record:
@@ -431,7 +431,7 @@ const bob = new Author({ name: 'Bob Smith' });
 bob.save((err) => {
   if (err) return handleError(err);
 
-  //Bob now exists, so lets create a story
+  // Bob now exists, so lets create a story
   const story = new Story({
     title: "Bob goes sledding",
     author: bob._id    // assign the _id from our author Bob. This ID is created by default!
@@ -449,7 +449,7 @@ Our story document now has an author referenced by the author document's ID. In
 ```js
 Story
   .findOne({ title: 'Bob goes sledding' })
-  .populate('author') //This populates the author id with actual author information!
+  .populate('author') // This populates the author id with actual author information!
   .exec((err, story) => {
     if (err) return handleError(err);
     console.log('The author is %s', story.author.name);
@@ -611,7 +611,7 @@ We will define a separate module for each model, as [discussed above](#one_schem
 Start by creating a folder for our models in the project root (**/models**) and then create separate files for each of the models:
 
 ```plain
-/express-locallibrary-tutorial  //the project root
+/express-locallibrary-tutorial  // the project root
   /models
     author.js
     book.js
@@ -661,7 +661,7 @@ AuthorSchema
     return `/catalog/author/${this._id}`;
   });
 
-//Export model
+// Export model
 module.exports = mongoose.model('Author', AuthorSchema);
 ```
 
@@ -700,7 +700,7 @@ BookSchema
     return '/catalog/book/' + this._id;
   });
 
-//Export model
+// Export model
 module.exports = mongoose.model('Book', BookSchema);
 ```
 
@@ -721,7 +721,7 @@ const Schema = mongoose.Schema;
 
 const BookInstanceSchema = new Schema(
   {
-    book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book
+    book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, // reference to the associated book
     imprint: { type: String, required: true },
     status: { type: String, required: true, enum: ['Available', 'Maintenance', 'Loaned', 'Reserved'], default: 'Maintenance' },
     due_back: { type: Date, default: Date.now }
@@ -735,7 +735,7 @@ BookInstanceSchema
     return `/catalog/bookinstance/${this._id}`;
   });
 
-//Export model
+// Export model
 module.exports = mongoose.model('BookInstance', BookInstanceSchema);
 ```
 

files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md

@@ -13,6 +13,16 @@ The following guidelines cover how to write HTML example code for MDN Web Docs.
 
 ## General guidelines for HTML code examples
 
+### Choosing a format
+
+Opinions on correct indentation, whitespace, and line lengths have always been controversial. Discussions on these topics are a distraction from creating and maintaining content.
+
+On MDN Web Docs, we use [Prettier](https://prettier.io/) as a code formatter to keep the code style consistent (and to avoid off-topic discussions). You can consult our [configuration file](https://github.com/mdn/content/blob/main/.prettierrc.json) to learn about the current rules, and read the [Prettier documentation](https://prettier.io/docs/en/index.html).
+
+Prettier formats all the code and keeps the style consistent. Nevertheless, there are a few additional rules that you need to follow.
+
+## Complete HTML document
+
 > **Note:** The guidelines in this section apply only when you need to show a complete HTML document. A snippet is usually enough to demonstrate a feature. When using the [EmbedLiveSample macro](/en-US/docs/MDN/Writing_guidelines/Page_structures/Code_examples#traditional_live_samples), just include the HTML snippet; it will automatically be inserted into a full HTML document when displayed.
 
 ### Doctype
@@ -147,17 +157,3 @@ There are some rules for writing about HTML elements on MDN Web Docs. Adhering t
   Additionally, put them in **`bold face`** when the attribute is mentioned in association with an explanation of what it does or when it is used for the first time on the page.
 - **Attribute definitions**: Use the [`htmlattrdef`](https://github.com/mdn/yari/blob/main/kumascript/macros/htmlattrdef.ejs) macro (e.g., `\{{htmlattrdef("type")}})` for the definition term. This allows the term definition to be linked from other pages easily by using the [`htmlattrxref`](https://github.com/mdn/yari/blob/main/kumascript/macros/htmlattrxref.ejs) macro (e.g., `\{{htmlattrxref("type","element")}}`).
 - **Attribute values**: Use the "Inline Code" style to apply `<code>` to attribute values, and don't use quotation marks around string values, unless needed by the syntax of a code sample. For example, "When the `type` attribute of an `<input>` element is set to `email` or `tel` ...".
-
-## Trailing slashes <!--Is this still a valid section to keep?-->
-
-Don't include XHTML-style trailing slashes for empty elements because they're unnecessary and slow things down. They can also break old browsers if you're not careful (although from what we can recall, this hasn't been a problem since Netscape 4). For example:
-
-```html example-good
-<input type="text">
-<hr>
-```
-
-```html example-bad
-<input type="text" />
-<hr />
-```

files/en-us/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md

@@ -43,12 +43,12 @@ Values of this type are objects. They contain the following properties:
   - : `number`. Failover timeout in seconds. If the connection fails to connect the proxy server after this number of seconds, the next proxy server in the array returned from the `proxy.onRequest` listener will be used.
 - `proxyAuthorizationHeader`
 
-  - : `string.` This string, if set to non-empty, is passed directly as a value to the {{httpheader("Proxy-Authorization")}} request header sent to HTTPS proxies as part of HTTPS and CONNECT requests. In other words, this can be used to directly authenticate to HTTPS proxies that allow (non-challenging) authentication.
+  - : `string`. This string, if set to non-empty, is passed directly as a value to the {{httpheader("Proxy-Authorization")}} request header sent to HTTPS proxies as part of HTTPS and CONNECT requests. In other words, this can be used to directly authenticate to HTTPS proxies that allow (non-challenging) authentication.
 
     For instance, if you want to send "username" and "password" for "basic" authentication, you can set the `proxyAuthorizationHeader` property to `Basic dXNlcm5hbWU6cGFzc3dvcmQ=`
 
 - `connectionIsolationKey` {{optional_inline}}
-  - : `string.` An optional key used for additional isolation of this proxy connection. Applies to HTTPS proxies only.
+  - : `string`. An optional key used for additional isolation of this proxy connection. Applies to HTTPS proxies only.
 
 ## Browser compatibility
 

files/en-us/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md

@@ -35,7 +35,7 @@ browser.tabs.moveInSuccession([1, 3, 5, 7, 2, 9], 4, {insert:true})
 - `tabIds`
   - : `array` of `integer`. An array of tab `ID`s. The order of the elements in the array defines the relationship of the tabs. Any invalid tab `ID`s, or tab `ID`s corresponding to tabs not in the same window as `tabId` (or the first tab in the array, if `tabId` is omitted), will be ignored—they will keep their current successors and predecessors.
 - `tabId` {{optional_inline}}
-  - : `integer.` The `ID` of the tab that will be the successor of the last tab in the `tabIds` array. If this `ID` is invalid or {{WebExtAPIRef('tabs.TAB_ID_NONE')}}, the last tab will not have a successor. Defaults to {{WebExtAPIRef('tabs.TAB_ID_NONE')}}.
+  - : `integer`. The `ID` of the tab that will be the successor of the last tab in the `tabIds` array. If this `ID` is invalid or {{WebExtAPIRef('tabs.TAB_ID_NONE')}}, the last tab will not have a successor. Defaults to {{WebExtAPIRef('tabs.TAB_ID_NONE')}}.
 - `options` {{optional_inline}}
 
   - : `object`.

files/en-us/mozilla/firefox/releases/27/index.md

@@ -29,7 +29,7 @@ More details in [this post](https://hacks.mozilla.org/2013/11/firefox-developer-
 - The `-moz-grab` and `-moz-grabbing` keywords on the CSS {{cssxref("cursor")}} property have been unprefixed to `grab` and `grabbing` ({{bug("880672")}}).
 - Support for the `-moz-hsla()` and `-moz-rgba()` functional notations has been dropped. Only the unprefixed versions, `hsla()` and `rgba()` are supported from now on ({{bug("893319")}}).
 - The "`true`" value for {{cssxref("text-align")}} has been added ({{bug(929991)}}).
-- Experimental support of `position:sticky` is now active by default on non-release builds ({{bug("902992")}}). For releases builds, the `layout.css.sticky.enabled` preference still needs to be set to `true.`
+- Experimental support of `position:sticky` is now active by default on non-release builds ({{bug("902992")}}). For releases builds, the `layout.css.sticky.enabled` preference still needs to be set to `true`.
 - The {{cssxref("all")}} shorthand property has been added ({{bug(842329)}}).
 - The {{cssxref("unset")}} global value has been added; it allows to reset any CSS property ({{bug(921731)}}).
 - Curly brackets are no longer allowed in HTML `style` attributes: doing `<div style="{ display: none }">` was working in quirks mode, but won't anymore {{bug(915053)}}.

files/en-us/related/imsc/basics/index.md

@@ -148,7 +148,7 @@ This includes the following new features:
 - `<head></head>` — As in HTML, the `<head>` element acts as a container for all the stuff you want to include in an IMSC document that isn't subtitle content, most commonly metadata about the content or document. You'll use it mostly to store positioning and styling information.
 - `<layout></layout>` — This element acts as a wrapper for positioning information. It has `<region>` elements as its children.
 - `<region></region>` — this element can be used to define `region`s, rectangular areas you can place on top of your video. They have a defined position, width, and height, plus an `id` to uniquely identify them. You can think of it as being similar to a `<div>` element in HTML that is given an absolute position, width, and height via CSS. If subtitle content is "linked" to a region (by specifying the region's `id` in its `region` attribute), it will be shown inside the area generated by that region.
-- `xml:id` - the `xml:id` attribute. The value of the `xml:id` attribute is a string that can be used to link subtitle content to a `region.`
+- `xml:id` - the `xml:id` attribute. The value of the `xml:id` attribute is a string that can be used to link subtitle content to a `region`.
 - `tts:origin` — This attribute defines the position of the top-left corner of the region. It uses the % (percentage) metric. The first value defines how far the top left corner of the region is pushed to the right — in this case the value `10%` places the region 10% of the video's width to the right. The second value defines how far the top left corner of the region is placed towards the bottom of the video — in this case the value `80%` pushes the top left corner of the region 80% of the video's height towards the bottom of the video.
 - `tts:extent` — This attribute defines the width and height of the region. In this case `80%` sets the width to 80% of the video's width, and `20%` sets the height of the region to 20% of the video's height.
 - `region` — setting this on some subtitle content and then giving it a region's `xml:id` as its value causes it to _reference_ that region, meaning that at the specified time, it will appear in the area defined by that region. So here, the value `bottom` places the subtitle content represented by this `<p>` element in the region with an `xml:id` of `bottom`.

files/en-us/web/api/audiocontext/getoutputtimestamp/index.md

@@ -63,30 +63,33 @@ outputs the `contextTime` and `performanceTime`.
 You can see full code of this [example at output-timestamp](https://github.com/mdn/webaudio-examples/blob/master/output-timestamp/index.html) ([see it live also](https://mdn.github.io/webaudio-examples/output-timestamp/)).
 
 ```js
-play.addEventListener('click', () => {
+// Press the play button
+playBtn.addEventListener("click", () => {
+  // We can create the audioCtx as there has been some user action
   if (!audioCtx) {
-    audioCtx = new window.AudioContext();
+    audioCtx = new AudioContext();
   }
-
+  source = new AudioBufferSourceNode(audioCtx);
   getData();
   source.start(0);
-  play.setAttribute('disabled', 'disabled');
-
+  playBtn.disabled = true;
+  stopBtn.disabled = false;
   rAF = requestAnimationFrame(outputTimestamps);
 });
 
-stop.addEventListener('click', () => {
+// Press the stop button
+stopBtn.addEventListener("click", () => {
   source.stop(0);
-  play.removeAttribute('disabled');
+  playBtn.disabled = false;
+  stopBtn.disabled = true;
   cancelAnimationFrame(rAF);
 });
 
-// function to output timestamps
-
+// Helper function to output timestamps
 function outputTimestamps() {
-  let ts = audioCtx.getOutputTimestamp()
-  console.log(`Context time: ${ts.contextTime} | Performance time: ${ts.performanceTime}`);
-  rAF = requestAnimationFrame(outputTimestamps);
+  const ts = audioCtx.getOutputTimestamp();
+  output.textContent = `Context time: ${ts.contextTime} | Performance time: ${ts.performanceTime}`;
+  rAF = requestAnimationFrame(outputTimestamps); // Reregister itself
 }
 ```