Merge branch 'main' into patch-3

mdn · May 5, 2024 · c4f3492 · c4f3492
2 parents 6d374cf + 1a26583
commit c4f3492
Show file tree

Hide file tree

Showing 51 changed files with 159 additions and 77 deletions.
diff --git a/...chniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md b/...chniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md
@@ -82,7 +82,9 @@ To make way for more shapes, move the box to the left to make some room for the
 
 Adding other shapes involves a very similar process to adding the box. Click on the Root folder in the hierarchy panel (to make sure that the new shape appears in the root, and not as a child of the Box) then Click on the big _Add Entity_ (plus) button and select cylinder from the dropdown list — it will add a new cylinder shape to the scene.
 
-![PlayCanvas Editor - Cylinder](playcanvas-editor-cylinder.png)Now follow the same steps as we did before when coloring the cube:
+![PlayCanvas Editor - Cylinder](playcanvas-editor-cylinder.png)
+
+Now follow the same steps as we did before when coloring the cube:
 
 - Create a new material using the _Add Asset_ (plus) button.
 - Make sure the New Material in the Assets panel is selected, to bring up the entity inspector.

diff --git a/files/en-us/glossary/cipher/index.md b/files/en-us/glossary/cipher/index.md
@@ -26,7 +26,6 @@ They also are classified according to how their {{glossary("key", "keys")}} are
 - [MDN Web Docs Glossary](/en-US/docs/Glossary)
 
   - {{Glossary("Block cipher mode of operation")}}
-  - {{Glossary("Cipher")}}
   - {{Glossary("Ciphertext")}}
   - {{Glossary("Cipher suite")}}
   - {{Glossary("Cryptanalysis")}}

diff --git a/files/en-us/glossary/code_splitting/index.md b/files/en-us/glossary/code_splitting/index.md
@@ -14,7 +14,6 @@ Code splitting is a feature supported by bundlers like [Webpack](https://webpack
 
 ## See also
 
-- Bundling
 - [Lazy loading](/en-US/docs/Web/Performance/Lazy_loading)
 - [HTTP/2](/en-US/docs/Glossary/HTTP_2)
 - [Tree shaking](/en-US/docs/Glossary/Tree_shaking)
diff --git a/files/en-us/glossary/color_wheel/color_wheel_macos.png b/files/en-us/glossary/color_wheel/color_wheel_macos.png
diff --git a/files/en-us/glossary/color_wheel/index.md b/files/en-us/glossary/color_wheel/index.md
@@ -15,12 +15,13 @@ In such cases, _complementary colors_ are often found opposite on the same diame
 Color wheels are used in real life when we want to choose between different hues. For example, when selecting wall paint or the color for a piece of furniture.
 
 In the digital world, color wheels are used in _color pickers_, like the default one on macOS:
-[![The default color picker on macOS Monterey](color_wheel_macos.png)](/en-US/docs/Glossary/Color_wheel/color_wheel_macos.png)
+
+[![The default color picker on macOS](color_wheel_macos.png)](/en-US/docs/Glossary/Color_wheel/color_wheel_macos.png)
 
 ## See also
 
-- {{glossary("color space")}}
-- [`<color>`](/en-US/docs/Web/CSS/color_value) CSS data type
-- [_Color theory and the color wheel_](https://www.canva.com/colors/color-wheel/)
-- [_How to Use the Color Wheel to Pick Your Perfect Color Palette_](https://www.bhg.com/decorating/color/basics/color-wheel-color-chart/) in _Better Homes & Gardens_
-- [_Color wheel_](https://en.wikipedia.org/wiki/Color_wheel) in _Wikipedia_
+- {{glossary("color_space", "Color space")}}
+- [`<color>`](/en-US/docs/Web/CSS/color_value) the CSS data type
+- [Color theory and the color wheel](https://www.canva.com/colors/color-wheel/)
+- [How to Use the Color Wheel to Pick Your Perfect Color Palette](https://www.bhg.com/decorating/color/basics/color-wheel-color-chart/) on Better Homes & Gardens
+- [Color wheel](https://en.wikipedia.org/wiki/Color_wheel) on Wikipedia
diff --git a/files/en-us/glossary/index.md b/files/en-us/glossary/index.md
@@ -1,6 +1,6 @@
 ---
 title: "MDN Web Docs Glossary: Definitions of Web-related terms"
-short-title: MDN Web Docs Glossary
+short-title: Glossary
 slug: Glossary
 page-type: landing-page
 ---

diff --git a/files/en-us/learn/getting_started_with_the_web/css_basics/index.md b/files/en-us/learn/getting_started_with_the_web/css_basics/index.md
@@ -30,7 +30,9 @@ To make the code work, we still need to apply this CSS (above) to your HTML docu
 
 2. Save `index.html` and load it in your browser. You should see something like this:
 
-![A Mozilla logo and some paragraphs. The paragraph text has been styled red by our css.](website-screenshot-styled.png)If your paragraph text is red, congratulations! Your CSS is working.
+![A Mozilla logo and some paragraphs. The paragraph text has been styled red by our css.](website-screenshot-styled.png)
+
+If your paragraph text is red, congratulations! Your CSS is working.
 
 ### Anatomy of a CSS ruleset
 

diff --git a/files/en-us/learn/html/introduction_to_html/debugging_html/index.md b/files/en-us/learn/html/introduction_to_html/debugging_html/index.md
@@ -40,7 +40,9 @@ Writing HTML is fine, but what if something goes wrong, and you can't work out w
 
 When writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. For example, the following shows an error reported when trying to {{glossary("compile")}} a simple program written in the [Rust](https://www.rust-lang.org/) language.
 
-![A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.](error-message.png)Here, the error message is relatively easy to understand — "unterminated double quote string". If you look at the listing, you can probably see how `println!(Hello, world!");` might logically be missing a double quote. However, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about Rust.
+![A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.](error-message.png)
+
+Here, the error message is relatively easy to understand — "unterminated double quote string". If you look at the listing, you can probably see how `println!(Hello, world!");` might logically be missing a double quote. However, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about Rust.
 
 Debugging doesn't have to be scary though — the key to being comfortable with writing and debugging any programming language or code is familiarity with both the language and the tools.
 

diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md
@@ -518,7 +518,9 @@ If you want to experiment with writing some HTML on your local computer, you can
 
 You can now open this file in a web browser to see what the rendered code looks like. Edit the code and refresh the browser to see what the result is. Initially, the page looks like this:
 
-![A simple HTML page that says This is my page](template-screenshot.png)In this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case). Sharpen your skills by implementing the following tasks:
+![A simple HTML page that says This is my page](template-screenshot.png)
+
+In this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample window below (the editable sample window represents just the contents of the {{htmlelement("body")}} element, in this case). Sharpen your skills by implementing the following tasks:
 
 - Just below the opening tag of the {{htmlelement("body")}} element, add a main title for the document. This should be wrapped inside an `<h1>` opening tag and `</h1>` closing tag.
 - Edit the paragraph content to include text about a topic that you find interesting.

diff --git a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -99,9 +99,11 @@ In the example we saw above, this line was included:
 
 This element specifies the document's character encoding — the character set that the document is permitted to use. `utf-8` is a universal character set that includes pretty much any character from any human language. This means that your web page will be able to handle displaying any language; it's therefore a good idea to set this on every web page you create! For example, your page could handle English and Japanese just fine:
 
-![a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,](correct-encoding.png)If you set your character encoding to `ISO-8859-1`, for example (the character set for the Latin alphabet), your page rendering may appear all messed up:
+![A web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine.](correct-encoding.png)
 
-![a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly](bad-encoding.png)
+If you set your character encoding to `ISO-8859-1`, for example (the character set for the Latin alphabet), your page rendering may appear all messed up:
+
+![A web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly.](bad-encoding.png)
 
 > **Note:** Some browsers (like Chrome) automatically fix incorrect encodings, so depending on what browser you use, you may not see this problem. You should still set an encoding of `utf-8` on your page anyway to avoid any potential problems in other browsers.
 

diff --git a/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -136,7 +136,9 @@ If you're supporting multiple display resolutions, but everyone sees your image
   alt="Elva dressed as a fairy" />
 ```
 
-![A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image](resolution-example.png)In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):
+![A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image](resolution-example.png)
+
+In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):
 
 ```css
 img {

diff --git a/files/en-us/mozilla/add-ons/contact_us/index.md b/files/en-us/mozilla/add-ons/contact_us/index.md
@@ -27,7 +27,7 @@ The **dev-addons mailing list** was retired on December 1, 2020. You can view th
 
 #### Security vulnerabilities
 
-If you discover an add-on security vulnerability, even if the add-on is not hosted on a Mozilla site, please notify us. We will work with the developer to correct the issue. Please report security vulnerabilities [confidentially](https://www.mozilla.org/en-US/about/governance/policies/security-group/bugs/) in [Bugzilla](https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&component=Add-on%20Security&maketemplate=Add-on%20Security%20Bug&bit-23=1&rep_platform=All&op_sys=All)or by emailing <[email protected]>.
+If you discover an add-on security vulnerability, even if the add-on is not hosted on a Mozilla site, please notify us. We will work with the developer to correct the issue. Please report security vulnerabilities [confidentially](https://www.mozilla.org/en-US/about/governance/policies/security-group/bugs/) in [Bugzilla](https://bugzilla.mozilla.org/enter_bug.cgi?product=addons.mozilla.org&component=Add-on%20Security&maketemplate=Add-on%20Security%20Bug&bit-23=1&rep_platform=All&op_sys=All) or by emailing <[email protected]>.
 
 #### Bugs on addons.mozilla.org (AMO)
 

diff --git a/files/en-us/mozilla/add-ons/webextensions/api/contextualidentities/index.md b/files/en-us/mozilla/add-ons/webextensions/api/contextualidentities/index.md
@@ -13,7 +13,9 @@ Work with contextual identities: list, create, remove, and update contextual ide
 
 With the contextual identities feature, each contextual identity has a name, a color, and an icon. New tabs can be assigned to an identity, and the name, icon, and color appears in the address bar. Internally, each identity gets a cookie store that is not shared with other tabs. This cookie store is identified by the `cookieStoreId` in this and other APIs.
 
-![A context menu with "open in new container tab" submenu highlighted. The submenu shows personal, work, banking, and shopping contextual identities.](containers.png)Contextual identities are an experimental feature in Firefox and are only enabled by default in Firefox Nightly. To enable them in other versions of Firefox, set the `privacy.userContext.enabled` preference to `true`. Note that although contextual identities are available in Firefox for Android, there's no UI to work with them in this version of the browser.
+![A context menu with "open in new container tab" submenu highlighted. The submenu shows personal, work, banking, and shopping contextual identities.](containers.png)
+
+Contextual identities are an experimental feature in Firefox and are only enabled by default in Firefox Nightly. To enable them in other versions of Firefox, set the `privacy.userContext.enabled` preference to `true`. Note that although contextual identities are available in Firefox for Android, there's no UI to work with them in this version of the browser.
 
 Before Firefox 57, the `contextualIdentities` API is only available if the contextual identities feature is itself enabled. If an extension tried to use the `contextualIdentities` API without the feature being enabled, then method calls would resolve their promises with `false`.
 

diff --git a/files/en-us/mozilla/firefox/releases/44/index.md b/files/en-us/mozilla/firefox/releases/44/index.md
@@ -6,7 +6,8 @@ page-type: firefox-release-notes
 
 {{FirefoxSidebar}}
 
-[To test the latest developer features of Firefox, install Firefox Developer Edition](https://www.mozilla.org/firefox/developer/)Firefox 44 was released on January 26, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+[To test the latest developer features of Firefox, install Firefox Developer Edition](https://www.mozilla.org/firefox/developer/).
+Firefox 44 was released on January 26, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
 
 ## Changes for Web developers
 

diff --git a/files/en-us/mozilla/firefox/releases/46/index.md b/files/en-us/mozilla/firefox/releases/46/index.md
@@ -6,7 +6,8 @@ page-type: firefox-release-notes
 
 {{FirefoxSidebar}}
 
-[To test the latest developer features of Firefox, install Firefox Developer Edition](https://www.mozilla.org/firefox/developer/)Firefox 46 was released on April 26, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+[To test the latest developer features of Firefox, install Firefox Developer Edition](https://www.mozilla.org/firefox/developer/).
+Firefox 46 was released on April 26, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
 
 ## Changes for Web developers
 

diff --git a/files/en-us/mozilla/firefox/releases/50/index.md b/files/en-us/mozilla/firefox/releases/50/index.md
@@ -6,7 +6,8 @@ page-type: firefox-release-notes
 
 {{FirefoxSidebar}}
 
-[To test the latest developer features of Firefox, install Firefox Developer Edition](https://www.mozilla.org/firefox/developer/)Firefox 50 was released on November 15, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+[To test the latest developer features of Firefox, install Firefox Developer Edition](https://www.mozilla.org/firefox/developer/).
+Firefox 50 was released on November 15, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
 
 ## Changes for Web developers
 

diff --git a/files/en-us/mozilla/firefox/releases/51/index.md b/files/en-us/mozilla/firefox/releases/51/index.md
@@ -6,7 +6,8 @@ page-type: firefox-release-notes
 
 {{FirefoxSidebar}}
 
-[To test the latest developer features of Firefox, install Firefox Developer Edition](https://www.mozilla.org/firefox/developer/)Firefox 51 was released on January 24, 2017. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
+[To test the latest developer features of Firefox, install Firefox Developer Edition](https://www.mozilla.org/firefox/developer/).
+Firefox 51 was released on January 24, 2017. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.
 
 ## Changes for Web developers
 

diff --git a/files/en-us/web/api/canvas_api/tutorial/using_images/index.md b/files/en-us/web/api/canvas_api/tutorial/using_images/index.md
@@ -203,11 +203,11 @@ The resulting canvas looks like this:
 The third and last variant of the `drawImage()` method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.
 
 - {{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
-  - : Given an `image`, this function takes the area of the source image specified by the rectangle whose top-left corner is (`sx`, `sy`) and whose width and height are `sWidth` and `sHeight` and draws it into the canvas, placing it on the canvas at (`dx`, `dy`) and scaling it to the size specified by `dWidth` and `dHeight`.
+  - : Given an `image`, this function takes the area of the source image specified by the rectangle whose top-left corner is (`sx`, `sy`) and whose width and height are `sWidth` and `sHeight` and draws it into the canvas, placing it on the canvas at (`dx`, `dy`) and scaling it to the size specified by `dWidth` and `dHeight`, maintaining its {{glossary("aspect ratio")}}.
 
 To really understand what this does, it may help to look at this image:
 
-![The rectangular source image top left coordinates are sx and sy with a width and height of sWidth and sHeight respectively. The source image is translated to the destination canvas where the top-left corner coordinates are dx and dy, maintaining its aspect ratio, with a width and height of dWidth and dHeight respectively.](canvas_drawimage.jpg)
+![The rectangular source image top left coordinates are sx and sy with a width and height of sWidth and sHeight respectively. The source image is translated to the destination canvas where the top-left corner coordinates are dx and dy, with a width and height of dWidth and dHeight respectively.](canvas_drawimage.jpg)
 
 The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.
 

diff --git a/files/en-us/web/api/clipboard/write/index.md b/files/en-us/web/api/clipboard/write/index.md
@@ -73,23 +73,76 @@ A `try..catch` block could be used to catch any errors writing the data.
 
 ### Write canvas contents to the clipboard
 
-This example writes the canvas to a blob, using the default MIME type of `image/png`, and then writes the blob to the clipboard.
+This example draws a blue rectangle to the canvas and writes the canvas to a blob in the clipboard when you click the canvas.
+An event listener is triggered on [`paste` events](/en-US/docs/Web/API/Element/paste_event) in an element where we want to display the clipboard contents as an image.
+
+The [FileReader API](/en-US/docs/Web/API/FileReader) allows us to read the blob using the [`readAsDataUrl`](/en-US/docs/Web/API/FileReader/readAsDataURL) method and create an `<img>` element with the canvas contents:
 
 ```js
-// Get canvas can add an event handler for the click event.
+const target = document.getElementById("target");
 const canvas = document.getElementById("canvas");
+
+// Set up canvas
+const ctx = canvas.getContext("2d");
+ctx.fillStyle = "cornflowerblue";
+ctx.fillRect(0, 0, 100, 100);
+
 canvas.addEventListener("click", copyCanvasContentsToClipboard);
 
-async function copyCanvasContentsToClipboard() {
-  // Copy canvas to blob
-  const blob = await canvas.toBlob();
-  // Create ClipboardItem with blob and it's type, and add to an array
-  const data = [new ClipboardItem({ [blob.type]: blob })];
-  // Write the data to the clipboard
-  await navigator.clipboard.write(data);
+function copyCanvasContentsToClipboard() {
+  return new Promise((resolve, reject) => {
+    // Copy canvas to blob
+    canvas.toBlob(async (blob) => {
+      try {
+        // Create ClipboardItem with blob and its type, and add to an array
+        const data = [new ClipboardItem({ [blob.type]: blob })];
+        // Write the data to the clipboard
+        await navigator.clipboard.write(data);
+        resolve();
+      } catch (e) {
+        reject(e);
+      }
+    });
+  });
+}
+
+target.addEventListener("paste", (event) => {
+  const items = (event.clipboardData || window.clipboardData).items;
+  const blob = items[0].getAsFile();
+  const reader = new FileReader();
+
+  reader.addEventListener("load", (event) => {
+    const img = new Image();
+    img.src = event.target.result;
+    target.appendChild(img);
+  });
+
+  reader.readAsDataURL(blob);
+});
+```
+
+```css hidden
+body {
+  font-family: sans-serif;
+}
+#target {
+  border: 2px solid;
+  padding: 1rem;
+  height: 150px;
+}
+img {
+  margin: 0.5rem;
 }
 ```
 
+```html
+<canvas id="canvas" width="100" height="100"></canvas>
+
+<div id="target">Paste here.</div>
+```
+
+{{embedlivesample("write_canvas_contents_to_the_clipboard", "", "300")}}
+
 ## Specifications
 
 {{Specifications}}