Merge branch 'Bug-1538451-add-commands.openShortcutSettings' of ssh:/…

…/github.com/rebloor/content into Bug-1538451-add-commands.openShortcutSettings

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

@@ -9,8 +9,8 @@ page-type: glossary-definition
 **Application context** refers to the top-level {{glossary("browsing context")}} of a [web application](/en-US/docs/Web/Progressive_web_apps).
 It determines how an app's browsing context, such as a tab or a window, is presented and behaves.
 
-Web developers define the application context in the [web app's manifest file](/en-US/docs/Web/Manifest).
-They use the [`scope`](/en-US/docs/Web/Manifest/Reference/scope) member in the manifest to specify the set of URLs that are considered part of the application context and to which the manifest applies.
+Web developers define the application context in the [web app's manifest file](/en-US/docs/Web/Progressive_web_apps/Manifest).
+They use the [`scope`](/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/scope) member in the manifest to specify the set of URLs that are considered part of the application context and to which the manifest applies.
 
 The manifest is applied after the application context is created but before navigation begins to either a start URL or a deep link.
 A **start URL** is the initial page of the web app.
@@ -21,10 +21,10 @@ When an application context is created, browsers must immediately navigate to a
 This navigation replaces the current entry in the browsing history.
 If the application context is created to navigate to a deep link, the browser navigates directly to that deep link; otherwise, it navigates to the start URL.
 
-Note that the start URL is not necessarily the value of the [`start_url`](/en-US/docs/Web/Manifest/Reference/start_url) member in the manifest. Browsers may ignore the specified `start_url` or may allow users to change its value when adding the web app to their device's home screen or bookmarking it.
+Note that the start URL is not necessarily the value of the [`start_url`](/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/start_url) member in the manifest. Browsers may ignore the specified `start_url` or may allow users to change its value when adding the web app to their device's home screen or bookmarking it.
 
 ## See also
 
-- [`scope`](/en-US/docs/Web/Manifest/Reference/scope)
-- [Web app manifests](/en-US/docs/Web/Manifest)
+- [`scope`](/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/scope)
+- [Web app manifests](/en-US/docs/Web/Progressive_web_apps/Manifest)
 - [Progressive web apps (PWA)](/en-US/docs/Web/Progressive_web_apps)

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

@@ -23,5 +23,5 @@ Furthermore, its syntax defines, that if a value for the {{cssxref("background-s
 
 ## See also
 
-- [CSS value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)
+- [CSS value definition syntax](/en-US/docs/Web/CSS/CSS_Values_and_Units/Value_definition_syntax)
 - [What does "canonical order" mean with respect to CSS properties?](https://stackoverflow.com/questions/28963536/what-does-canonical-order-mean-with-respect-to-css-properties) on Stack Overflow provides useful further discussion.

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

@@ -6,8 +6,9 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-The term **CSS pixel** is synonymous with the CSS unit of absolute length _px_ — which is [normatively defined](https://drafts.csswg.org/css-values/#absolute-lengths) as being exactly 1/96th of 1 CSS inch (_in_).
+The term **CSS pixel** is synonymous with the CSS unit of absolute length _px_ — which is [normatively defined](/en-US/docs/Web/CSS/CSS_Values_and_Units/Numeric_data_types#absolute_length_units) as being exactly 1/96th of 1 CSS inch (_in_).
 
 ## See also
 
-- [CSS Length Explained](https://hacks.mozilla.org/2013/09/css-length-explained/) on the MDN Hacks Blog
+- {{glossary("Device pixel")}}
+- [CSS length explained](https://hacks.mozilla.org/2013/09/css-length-explained/) via MDN Hacks Blog (2013)

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

@@ -0,0 +1,18 @@
+---
+title: Device pixel
+slug: Glossary/Device_pixel
+page-type: glossary-definition
+---
+
+{{GlossarySidebar}}
+
+A **device pixel** is the smallest physical display unit capable of displaying a full color independent of its neighbor. It is the smallest physical unit of a display (such as a monitor or mobile phone screen), also known as a _hardware pixel_ or _physical pixel_. Each device pixel is an individual dot that composes the output of the display. Device pixels are fixed and do not scale based on the viewport or CSS.
+
+A device pixel is density-dependent, varying based on the display resolution. The _device-pixel-ratio_ is the ratio of the resolution in physical device pixels to the resolution in CSS pixels for the display. It usually differs from a {{glossary("CSS pixel")}}, which is an absolute length defined as being exactly 1/96th of 1 CSS inch. Devices considered Hi-DPI have more than one device pixel per CSS pixel in the same physical area, while low-DPI devices have less than a 1-to-1 ratio.
+
+## See also
+
+- CSS {{cssxref("<resolution>")}} data type
+- CSS {{cssxref("@media/resolution", "resolution")}} @media feature
+- CSS {{cssxref("image-resolution")}} property
+- {{domxref("devicePixelRatio")}} API

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

@@ -124,7 +124,6 @@ The `console.log()` output shows that the return value of `fetch()` is not the J
 We can do this by putting the code that uses the response inside the {{jsxref("Promise.prototype.then()", "then()")}} method of the returned `Promise`, like this:
 
 ```js
-const response = fetch(requestURL);
 fetch(requestURL).then((response) => {
   populateHeader(response);
   showHeroes(response);

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

@@ -183,7 +183,7 @@ Inside this function we:
 - check that the server didn't return an error (such as [`404 Not Found`](/en-US/docs/Web/HTTP/Status/404)). If it did, we throw the error.
 - call {{domxref("Response.json","json()")}} on the response. This will retrieve the data as a [JSON object](/en-US/docs/Learn_web_development/Core/Scripting/JSON). We return the promise returned by `response.json()`.
 
-Next we pass a function into the `then()` method of that returned promise. This function will be passed an object containing the response data as JSON, which we pass into the `initialize()` function. This function which starts the process of displaying all the products in the user interface.
+Next we pass a function into the `then()` method of that returned promise. This function will be passed an object containing the response data as JSON, which we pass into the `initialize()` function. It is `initialize()` which starts the process of displaying all the products in the user interface.
 
 To handle errors, we chain a `.catch()` block onto the end of the chain. This runs if the promise fails for some reason. Inside it, we include a function that is passed as a parameter, an `err` object. This `err` object can be used to report the nature of the error that has occurred, in this case we do it with a simple `console.error()`.
 

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

@@ -121,12 +121,12 @@ Joining strings together like this is called _concatenation_.
 
 Let's have a look at concatenation being used in action:
 
-```html
+```html live-sample___string-concat
 <button>Press me</button>
 <div id="greeting"></div>
 ```
 
-```js
+```js live-sample___string-concat
 const button = document.querySelector("button");
 
 function greet() {
@@ -138,7 +138,7 @@ function greet() {
 button.addEventListener("click", greet);
 ```
 
-{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}
+{{EmbedLiveSample('string-concat', , '50', , , , , 'allow-modals')}}
 
 Here, we are using the {{domxref("window.prompt()", "window.prompt()")}} function, which prompts the user to answer a question via a popup dialog box and then stores the text they enter inside a given variable — in this case `name`. We then display a string that inserts the name into a generic greeting message.
 

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

@@ -44,15 +44,15 @@ It is the third layer of the layer cake of standard web technologies, two of whi
 
 The three layers build on top of one another nicely. Let's take a button as an example. We can mark it up using HTML to give it structure and purpose:
 
-```html
+```html live-sample___string-concat-name
 <button type="button">Player 1: Chris</button>
 ```
 
 ![Button showing Player 1: Chris with no styling](just-html.png)
 
 Then we can add some CSS into the mix to get it looking nice:
 
-```css
+```css live-sample___string-concat-name
 button {
   font-family: "helvetica neue", helvetica, sans-serif;
   letter-spacing: 1px;
@@ -71,7 +71,7 @@ button {
 
 And finally, we can add some JavaScript to implement dynamic behavior:
 
-```js
+```js live-sample___string-concat-name
 function updateName() {
   const name = prompt("Enter a new name");
   button.textContent = `Player 1: ${name}`;
@@ -82,9 +82,10 @@ const button = document.querySelector("button");
 button.addEventListener("click", updateName);
 ```
 
-{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}
+You can click "Play" to see and edit the example in the MDN Playground.
+Try clicking on the text label to see what happens.
 
-Try clicking on this last version of the text label to see what happens (note also that you can find this demo on GitHub — see the [source code](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/javascript-label.html), or [run it live](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html))!
+{{EmbedLiveSample('string-concat-name', , '80', , , , , 'allow-modals')}}
 
 JavaScript can do a lot more than that — let's explore what in more detail.
 

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

@@ -476,7 +476,7 @@ There are longhand properties for width, style, and color for each of the four s
 ```
 
 > [!NOTE]
-> These top, right, bottom, and left border properties also have mapped [_logical_ border properties](/en-US/docs/Web/CSS/CSS_logical_properties_and_values#properties) that relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers [handling different text directions](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_different_text_directions).
+> These top, right, bottom, and left border properties also have mapped [_logical_ border properties](/en-US/docs/Web/CSS/CSS_logical_properties_and_values#properties) that relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We will explore these in the lesson on [handling different text directions](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_different_text_directions).
 
 There are a variety of styles that you can use for borders. In the example below, we have used two different border styles for the box and two different border styles for the heading. Play with the border style, width, and color to see how borders work.
 

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

@@ -795,11 +795,11 @@ In programming, a function is a piece of code that does a specific task.
 Functions are useful because you can write code once, then reuse it many times instead of writing the same logic over and over.
 Most programming languages not only support functions but also come with convenient built-in functions for common tasks so you don't have to write them yourself from scratch.
 
-CSS also has [functions](/en-US/docs/Web/CSS/CSS_Functions), which work in a similar way to functions in other languages.
+CSS also has [functions](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions), which work in a similar way to functions in other languages.
 In fact, we've already seen CSS functions in the [Color](#color) section above with [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb) and [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl) functions.
 
 Aside from applying colors, you can use functions in CSS to do a lot of other things.
-For example [Transform functions](/en-US/docs/Web/CSS/CSS_Functions#transform_functions) are a common way to move, rotate, and scale elements on a page.
+For example [Transform functions](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#transform_functions) are a common way to move, rotate, and scale elements on a page.
 You might see [`translate()`](/en-US/docs/Web/CSS/transform-function/translate) for moving something horizontally or vertically, [`rotate()`](/en-US/docs/Web/CSS/transform-function/rotate) to rotate something, or [`scale()`](/en-US/docs/Web/CSS/transform-function/scale) to make something bigger or smaller.
 
 ### Math functions
@@ -808,7 +808,7 @@ When you are creating styles for a project, you will probably start off with num
 If you want to have these values change based on other values, you will need to do some math.
 You could calculate the percentage of a value or add a number to another number, then update your CSS with the result.
 
-CSS has support for [Math functions](/en-US/docs/Web/CSS/CSS_Functions#math_functions), which allow us to perform calculations instead of relying on static values or doing the math in JavaScript.
+CSS has support for [Math functions](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#math_functions), which allow us to perform calculations instead of relying on static values or doing the math in JavaScript.
 One of the most common math functions is [`calc()`](/en-US/docs/Web/CSS/calc) which lets you do operations like addition, subtraction, multiplication, and division.
 
 For example, let's say we want to set the width of an element to be 20% of its parent container plus 100px.
@@ -838,8 +838,8 @@ The 20% is based on the width of the parent container (`.wrapper`) and if that w
 {{EmbedLiveSample("calc")}}
 
 There are many other math functions that you can use in CSS, such as [`min()`](/en-US/docs/Web/CSS/min), [`max()`](/en-US/docs/Web/CSS/max), and [`clamp()`](/en-US/docs/Web/CSS/clamp); respectively these let you pick the smallest, largest, or middle value from a set of values.
-You can also use [Trigonometric functions](/en-US/docs/Web/CSS/CSS_Functions#trigonometric_functions) like [`sin()`](/en-US/docs/Web/CSS/sin), [`cos()`](/en-US/docs/Web/CSS/cos), and [`tan()`](/en-US/docs/Web/CSS/tan) to calculate angles for rotating elements around a point, or choose colors that take a [hue angle](/en-US/docs/Web/CSS/hue) as a parameter.
-[Exponential functions](/en-US/docs/Web/CSS/CSS_Functions#exponential_functions) might also be used for animations and transitions, when you require very specific control over how something moves and looks.
+You can also use [Trigonometric functions](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#trigonometric_functions) like [`sin()`](/en-US/docs/Web/CSS/sin), [`cos()`](/en-US/docs/Web/CSS/cos), and [`tan()`](/en-US/docs/Web/CSS/tan) to calculate angles for rotating elements around a point, or choose colors that take a [hue angle](/en-US/docs/Web/CSS/hue) as a parameter.
+[Exponential functions](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Value_Functions#exponential_functions) might also be used for animations and transitions, when you require very specific control over how something moves and looks.
 
 Knowing about CSS functions is useful so you recognize them when you see them. You should start experimenting with them in your projects — they will help you avoid writing custom or repetitive code to achieve results that you can get with regular CSS.
 
@@ -849,7 +849,7 @@ You've reached the end of this article, but can you remember the most important
 
 ## Summary
 
-This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the [CSS Values and units](/en-US/docs/Web/CSS/CSS_Values_and_Units) reference page — you will encounter many of these in use as you work through these lessons.
+This has been a quick run-through of the most common types of values and units you might encounter. You can have a look at all of the different types on the [CSS Values and units](/en-US/docs/Web/CSS/CSS_Values_and_Units) module page — you will encounter many of these in use as you work through these lessons.
 
 The key thing to remember is that each property has a defined list of allowed value types, and each value type has a definition explaining what the values are. You can then look up the specifics here on MDN. For example, understanding that [`<image>`](/en-US/docs/Web/CSS/image) also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!
 

files/en-us/learn_web_development/extensions/performance/html/index.md

@@ -83,7 +83,7 @@ This example provides different resolution images for different screen resolutio
   alt="Family portrait" />
 ```
 
-`1.5x`, `2x`, etc. are relative resolution indicators. If the image is styled to be 320px-wide (for example with `width: 320px` in CSS), the browser will load `320w.jpg` if the device is low resolution (one device pixel per CSS pixel), or `640x.jpg` if the device is high resolution (two device pixels per CSS pixel or more).
+`1.5x`, `2x`, etc. are relative resolution indicators. If the image is styled to be 320px-wide (for example with `width: 320px` in CSS), the browser will load `320w.jpg` if the device is low resolution (one {{glossary("device pixel")}} per CSS pixel), or `640x.jpg` if the device is high resolution (two device pixels per CSS pixel or more).
 
 In both cases, the `src` attribute provides a default image to load if the browser does not support `src`/`srcset`.
 

files/en-us/learn_web_development/getting_started/environment_setup/code_editors/index.md

@@ -55,7 +55,7 @@ In this section, we'll look at some of the most significant functionality that y
 > The sections below only scratch the surface of what a code editor can do. For a more complete feature list, see the [Visual Studio Code documentation](https://code.visualstudio.com/docs) (or search the web for your chosen code editor's documentation if you are using something different).
 
 > [!NOTE]
-> If you are a keyboard-only user, be aware that VS Code has a powerful set of keyboard shortcuts. See the VS Code [Keyboard Shortcuts Reference](https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference).
+> If you are a keyboard-only user, be aware that VS Code has a powerful set of keyboard shortcuts. See the VS Code [Default keyboard shortcuts reference](https://code.visualstudio.com/docs/reference/default-keybindings).
 
 ### Opening and editing files
 
@@ -154,7 +154,7 @@ VS Code has many powerful find and replace features — see [Find and replace](h
 
 Most code editors have an extension or plugin system to allow you to add functionality to the program that is not available to it by default. These can do a variety of tasks, such as:
 
-- Enable code competition, linting, or debugging functionality for languages not supported by default, or provide additional functionality for those that are.
+- Enable code completing, linting, or debugging functionality for languages not supported by default, or provide additional functionality for those that are.
 - Allow you to use the functionality of other tools from right inside the code editor, such as version control tools or local testing servers.
 - Provide additional user interface or code highlighting themes/color schemes.
 - Suggest code snippets to fulfill requirements. These can be generated from static templates, or via AI tools. Using AI to generate code snippets has many of the same advantages and caveats as using it to generate search results (see [Searching for information > Using AI](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web#using_ai) for more infomation).