diff --git a/.lintstagedrc.js b/.lintstagedrc.js new file mode 100644 index 000000000000000..d6af9e30a33b931 --- /dev/null +++ b/.lintstagedrc.js @@ -0,0 +1,6 @@ +export default { + "files/en-us/_redirects.txt": (filenames) => [ + `yarn content fix-redirects en-US`, + `yarn content validate-redirects en-us --strict`, + ], +}; diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index c20167a37284a8a..842666b0a971383 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -3608,6 +3608,8 @@ /en-US/docs/Glossary/SSL_Glossary /en-US/docs/Glossary/SSL /en-US/docs/Glossary/Scrollport /en-US/docs/Glossary/Scroll_container /en-US/docs/Glossary/Serialize /en-US/docs/Glossary/Serialization +/en-US/docs/Glossary/Simple_header /en-US/docs/Glossary/CORS-safelisted_request_header +/en-US/docs/Glossary/Simple_response_header /en-US/docs/Glossary/CORS-safelisted_response_header /en-US/docs/Glossary/Spartan /en-US/docs/Glossary/Microsoft_Edge /en-US/docs/Glossary/Static_property /en-US/docs/Glossary/property/JavaScript /en-US/docs/Glossary/Transferable_objects /en-US/docs/Web/API/Web_Workers_API/Transferable_objects diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index a55243c284a93cb..182d34563e0f812 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -4627,23 +4627,6 @@ "modified": "2020-08-04T14:54:17.574Z", "contributors": ["jswisher", "hbloomer", "marumari", "fscholz"] }, - "Glossary/Simple_header": { - "modified": "2019-07-06T03:48:05.558Z", - "contributors": [ - "Annevk", - "teoli", - "fscholz", - "hbloomer", - "Andrew_Pfeiffer", - "klez", - "kscarfone", - "chrisdavidmills" - ] - }, - "Glossary/Simple_response_header": { - "modified": "2019-08-07T09:47:15.609Z", - "contributors": ["fscholz", "SrihariThalla", "Sheppy", "teoli"] - }, "Glossary/Site": { "modified": "2020-03-27T15:47:42.365Z", "contributors": ["RafeyIqbalRahman", "lol768"] diff --git a/files/en-us/glossary/cors-safelisted_request_header/index.md b/files/en-us/glossary/cors-safelisted_request_header/index.md index d8b85d6ec56c94d..5e356d6c76191b4 100644 --- a/files/en-us/glossary/cors-safelisted_request_header/index.md +++ b/files/en-us/glossary/cors-safelisted_request_header/index.md @@ -6,13 +6,13 @@ page-type: glossary-definition {{GlossarySidebar}} -A [**CORS-safelisted request header**](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) is one of the following [HTTP headers](/en-US/docs/Web/HTTP/Headers): +A [**CORS-safelisted request header**](https://fetch.spec.whatwg.org/#cors-safelisted-request-header) (also known as "simple header") is one of the following [HTTP headers](/en-US/docs/Web/HTTP/Headers): -- {{HTTPHeader("Accept")}}, -- {{HTTPHeader("Accept-Language")}}, -- {{HTTPHeader("Content-Language")}}, -- {{HTTPHeader("Content-Type")}}, -- {{HTTPHeader("Range")}}. +- {{HTTPHeader("Accept")}} +- {{HTTPHeader("Accept-Language")}} +- {{HTTPHeader("Content-Language")}} +- {{HTTPHeader("Content-Type")}} +- {{HTTPHeader("Range")}} When containing only these headers (and values that meet the additional requirements laid out below), a request doesn't need to send a {{glossary("preflight request")}} in the context of [CORS](/en-US/docs/Glossary/CORS). diff --git a/files/en-us/glossary/cors-safelisted_response_header/index.md b/files/en-us/glossary/cors-safelisted_response_header/index.md index b17455583ca907d..5a4255a47efcc49 100644 --- a/files/en-us/glossary/cors-safelisted_response_header/index.md +++ b/files/en-us/glossary/cors-safelisted_response_header/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -A **CORS-safelisted response header** is an [HTTP header](/en-US/docs/Web/HTTP/Headers) in a [CORS](/en-US/docs/Web/HTTP/CORS) response that it is considered _safe_ to expose to client scripts. Only safelisted response headers are made available to web pages. +A **CORS-safelisted response header** (also known as "simple response header") is an [HTTP header](/en-US/docs/Web/HTTP/Headers) in a [CORS](/en-US/docs/Web/HTTP/CORS) response that it is considered _safe_ to expose to client scripts. Only safelisted response headers are made available to web pages. By default, the safelist includes the following response headers: diff --git a/files/en-us/glossary/decryption/index.md b/files/en-us/glossary/decryption/index.md index 626b976957ca076..1ef06f2d1d97328 100644 --- a/files/en-us/glossary/decryption/index.md +++ b/files/en-us/glossary/decryption/index.md @@ -6,17 +6,16 @@ page-type: glossary-definition {{GlossarySidebar}} -In {{glossary("cryptography")}}, **decryption** is the conversion of {{glossary("ciphertext")}} into {{glossary("Plaintext")}}. +In {{glossary("cryptography")}}, **decryption** is the conversion of {{glossary("ciphertext")}} into {{glossary("plaintext")}}. -Decryption is a cryptographic primitive: it transforms a ciphertext message into plaintext using a cryptographic algorithm called a {{glossary("cipher")}}. Like encryption, decryption in modern ciphers is performed using a specific algorithm and a secret, called the {{glossary("key")}}. Since the algorithm is often public, the key must stay secret if the encryption stays secure. +Decryption is an operation which transforms a ciphertext message into plaintext using a cryptographic algorithm called a {{glossary("cipher")}}. Like encryption, decryption in modern ciphers is performed by using a specific algorithm and a secret, called the {{glossary("key")}}. ![The decryption primitive.](decryption.png) -Decryption is the reverse of {{glossary("encryption")}} and if the key stays secret, decryption without knowing the specific secret, decryption is mathematically hard to perform. How hard depends on the security of the cryptographic algorithm chosen and evolves with the progress of {{glossary("cryptanalysis")}}. +Decryption is the reverse process of {{glossary("encryption")}} and if the key stays secret, is mathematically hard to perform. How hard it is depends on how secure the cryptographic algorithm is, and that in itself is subject to change as the study of {{glossary("cryptanalysis")}} advances. ## See also -- [Encryption and Decryption](/en-US/docs/Encryption_and_Decryption) - {{glossary("Encryption")}} - {{glossary("Cipher")}} - {{glossary("Cryptography")}} diff --git a/files/en-us/glossary/simple_header/index.md b/files/en-us/glossary/simple_header/index.md deleted file mode 100644 index 7a2e530310d9e24..000000000000000 --- a/files/en-us/glossary/simple_header/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Simple header -slug: Glossary/Simple_header -page-type: glossary-definition ---- - -{{GlossarySidebar}} - -Old term for {{Glossary("CORS-safelisted request header")}}. diff --git a/files/en-us/glossary/simple_response_header/index.md b/files/en-us/glossary/simple_response_header/index.md deleted file mode 100644 index fb19870aa54bc8b..000000000000000 --- a/files/en-us/glossary/simple_response_header/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Simple response header -slug: Glossary/Simple_response_header -page-type: glossary-definition ---- - -{{GlossarySidebar}} - -Old term for {{Glossary("CORS-safelisted response header")}}. diff --git a/files/en-us/learn/javascript/asynchronous/promises/index.md b/files/en-us/learn/javascript/asynchronous/promises/index.md index 29bf2993cda0601..c00506438386f51 100644 --- a/files/en-us/learn/javascript/asynchronous/promises/index.md +++ b/files/en-us/learn/javascript/asynchronous/promises/index.md @@ -355,24 +355,28 @@ Instead, you'd need to do something like: ```js async function fetchProducts() { - try { - const response = await fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", - ); - if (!response.ok) { - throw new Error(`HTTP error: ${response.status}`); - } - const data = await response.json(); - return data; - } catch (error) { - console.error(`Could not get products: ${error}`); + const response = await fetch( + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", + ); + if (!response.ok) { + throw new Error(`HTTP error: ${response.status}`); } + const data = await response.json(); + return data; } const promise = fetchProducts(); -promise.then((data) => console.log(data[0].name)); +promise + .then((data) => { + console.log(data[0].name); + }) + .catch(() => { + console.error(`Could not get products: ${error}`); + }); ``` +Here, we moved the `try...catch` back to the `catch` handler on the returned promise. This means our `then` handler doesn't have to deal with the case where an error got caught inside the `fetchProducts` function, causing `data` to be `undefined`. Handle errors as the last step of your promise chain. + Also, note that you can only use `await` inside an `async` function, unless your code is in a [JavaScript module](/en-US/docs/Web/JavaScript/Guide/Modules). That means you can't do this in a normal script: ```js @@ -388,6 +392,7 @@ try { console.log(data[0].name); } catch (error) { console.error(`Could not get products: ${error}`); + throw error; } ``` diff --git a/files/en-us/learn/performance/multimedia/index.md b/files/en-us/learn/performance/multimedia/index.md index ae469df7dc519ba..5ada1b7df742f83 100644 --- a/files/en-us/learn/performance/multimedia/index.md +++ b/files/en-us/learn/performance/multimedia/index.md @@ -126,6 +126,8 @@ Browsers begin rendering content as HTML is parsed, often before all assets, inc Without the `width` and `height` attributes, no placeholder space is created, creating a noticeable {{glossary('jank')}}, or layout shift, in the page when the image loads after the page is rendered. Page reflow and repaints are performance and usability issues. +The [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls) metric measures jank on page load, or how much visible content shifts in the viewport and by how much. The main culprits of bad CLS are replaced elements without declared dimensions that reflow when the asset loads, including images, ad, embeds, and iframes without an size or {{cssxref("aspect-ratio")}} and web fonts. + In responsive designs, when a container is narrower than an image, the following CSS is generally used to keep images from breaking out of their containers: ```css @@ -135,13 +137,13 @@ img { } ``` -While useful for responsive layouts, this causes jank when width and height information are not included, as if no height information is present when the `` element is parsed but before the image has loaded, this CSS effectively has set the height to 0. When the image loads after the page has been initially rendered to the screen, the page reflows and repaints creating a layout shift as it creates space for the newly determined height. +While useful for responsive layouts, this causes jank and poor CLS when width and height information are not included, as if no height information is present when the `` element is parsed but before the image has loaded, this CSS effectively has set the height to 0. When the image loads after the page has been initially rendered to the screen, the page reflows and repaints creating a layout shift as it creates space for the newly determined height. Browsers have a mechanism for sizing images before the actual image is loaded. When an ``, `