From f8b67306ba7b6d0cae7c40fbc9fe8f13e620531a Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Wed, 26 Jun 2024 10:02:05 +1000 Subject: [PATCH 01/58] Add section on how to handle Glitch node limits (#32695) * Add section on how to handle Glitch node limits * Apply suggestions from code review * fix: remove comment from JSON --------- Co-authored-by: Brian Thomas Smith --- .../express_nodejs/deployment/index.md | 32 +++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/files/en-us/learn/server-side/express_nodejs/deployment/index.md b/files/en-us/learn/server-side/express_nodejs/deployment/index.md index 53c8337d31e4897..65e067ddfe9be89 100644 --- a/files/en-us/learn/server-side/express_nodejs/deployment/index.md +++ b/files/en-us/learn/server-side/express_nodejs/deployment/index.md @@ -307,17 +307,12 @@ You can find the version of node that was used for development by entering the c v16.17.1 ``` -Open **package.json**, and add this information as an **engines > node** section as shown (using the version number for your system). +Open **package.json**, and add this information as an **engines > node** as shown (using the version number for your system). ```json -{ - "name": "express-locallibrary-tutorial", - "version": "0.0.0", "engines": { "node": ">=16.17.1" }, - "private": true, - // … ``` The hosting service might not support the specific indicated version of node, but this change should ensure that it attempts to use a version with the same major version number, or a more recent version. @@ -497,6 +492,31 @@ To start using Glitch you will first need to create an account: - Select GitHub in the popup to sign up using your GitHub credentials. - You'll then be logged in to the Glitch dashboard: . +### Troubleshooting Node.js version + +Hosting providers commonly support some major version of recent Node.js releases. +If the exact "minor" version you have specified in your `package.json` file is not supported they will usually fall back to the closest version they support (and often this will just work). + +Unfortunately, at time of writing, the highest supported version on Glitch is Node.js 16. +If you have been developing with Node.js 17 or later, you should reduce the version used in your `package.json` file as shown. +You will also need to retest: + +```json + "engines": { + "node": ">=v16" + }, +``` + +Glitch [plans to update node and keep it better updated in future](https://blog.glitch.com/post/rebuilding-glitch) — and it may be that by the time you read this the version limit no longer exists. +Instead of downgrading the `node` version, you could upload your project to see if it builds. +If there are errors and your application doesn't load, you should try setting the `node` version to `>=v16` in your `package.json` in the Glitch editor. + +> **Note:** You can also check the supported versions by entering the following command into the terminal of any Glitch project: +> +> ```sh +> ls -l /opt/nvm/versions/node | grep '^d' | awk '{ print $9 }' +> ``` + ### Deploy on Glitch from GitHub Next we'll import the Library project from GitHub. From 42bc771b1f3503bb4b3aecd8155c9617f7769513 Mon Sep 17 00:00:00 2001 From: Gagan Bhullar Date: Tue, 25 Jun 2024 22:01:45 -0600 Subject: [PATCH 02/58] Availability of _execute_page_action (#34367) page action is available for firefox only --- .../add-ons/webextensions/manifest.json/commands/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/commands/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/commands/index.md index 77193a211752ed8..3bbd5bb322cad83 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/commands/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/commands/index.md @@ -169,7 +169,7 @@ The availability of these special shortcuts varies between manifest versions and _execute_page_action Yes - Not available in Chromium-based browsers + Firefox only _execute_sidebar_action From ea740757d4a3675326a3cb543a935febe76d16e6 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 26 Jun 2024 00:06:31 -0400 Subject: [PATCH 03/58] Mention complex selectors in :not (#34405) * Mention complex selectors in :not * Apply suggestions from code review Co-authored-by: Estelle Weyl --------- Co-authored-by: Estelle Weyl --- files/en-us/web/css/_colon_is/index.md | 18 +++++++++--------- files/en-us/web/css/_colon_not/index.md | 4 ++-- files/en-us/web/css/_colon_where/index.md | 18 ++++++++++-------- 3 files changed, 21 insertions(+), 19 deletions(-) diff --git a/files/en-us/web/css/_colon_is/index.md b/files/en-us/web/css/_colon_is/index.md index 23a9c5944c7852d..b3708f958865901 100644 --- a/files/en-us/web/css/_colon_is/index.md +++ b/files/en-us/web/css/_colon_is/index.md @@ -13,7 +13,15 @@ The **`:is()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Ps {{EmbedInteractiveExample("pages/tabbed/pseudo-class-is.html", "tabbed-shorter")}} -Pseudo-elements are not valid in the selector list for `:is()`. +## Syntax + +The `:is()` pseudo-class requires a [selector list](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#selector_list), a comma-separated list of one or more selectors as its argument. The list must not contain a [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements), but any other simple, compound, and complex selectors are allowed. + +```css-nolint +:is() { + /* ... */ +} +``` ### Difference between :is() and :where() @@ -206,14 +214,6 @@ some-element::after { } ``` -## Syntax - -```css-nolint -:is() { - /* ... */ -} -``` - ## Specifications {{Specifications}} diff --git a/files/en-us/web/css/_colon_not/index.md b/files/en-us/web/css/_colon_not/index.md index 327cc334cbc16d1..aa756b47eb834f9 100644 --- a/files/en-us/web/css/_colon_not/index.md +++ b/files/en-us/web/css/_colon_not/index.md @@ -15,7 +15,7 @@ The `:not()` pseudo-class has a number of [quirks, tricks, and unexpected result ## Syntax -The `:not()` pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements). +The `:not()` pseudo-class requires a [selector list](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#selector_list), a comma-separated list of one or more selectors, as its argument. The list must not contain another negation selector or a [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements), but any other simple, compound, and complex selectors are allowed. ```css-nolint :not() { @@ -31,7 +31,7 @@ There are several unusual effects and outcomes when using `:not()` that you shou - This pseudo-class can increase the [specificity](/en-US/docs/Web/CSS/Specificity) of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has the higher specificity of two `id` selectors. - The specificity of the `:not()` pseudo-class is replaced by the specificity of the most specific selector in its comma-separated argument of selectors; providing the same specificity as if it had been written [`:not(:is(argument))`](/en-US/docs/Web/CSS/:is). - `:not(.foo)` will match anything that isn't `.foo`, _including {{HTMLElement("html")}} and {{HTMLElement("body")}}._ -- This selector will match everything that is "not an X". This may be surprising when used with [descendant combinators](/en-US/docs/Web/CSS/Descendant_combinator), since there are multiple paths to select a target element. For instance, `body :not(table) a` will still apply to links inside a {{HTMLElement("table")}}, since {{HTMLElement("tr")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("td")}}, {{HTMLElement("caption")}}, etc. can all match the `:not(table)` part of the selector. +- This selector will match everything that is "not an X". This may be surprising when used with [descendant combinators](/en-US/docs/Web/CSS/Descendant_combinator), since there are multiple paths to select a target element. For instance, `body :not(table) a` will still apply to links inside a {{HTMLElement("table")}}, since {{HTMLElement("tr")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("td")}}, {{HTMLElement("caption")}}, etc. can all match the `:not(table)` part of the selector. To avoid this, you can use `body a:not(table a)` instead, which will only apply to links that are not descendants of a table. - You can negate several selectors at the same time. Example: `:not(.foo, .bar)` is equivalent to `:not(.foo):not(.bar)`. - If any selector passed to the `:not()` pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated. The effective way to overcome this behavior is to use [`:is()`](/en-US/docs/Web/CSS/:is) pseudo-class, which accepts a forgiving selector list. For example `:not(.foo, :invalid-pseudo-class)` will invalidate a whole rule, but `:not(:is(.foo, :invalid-pseudo-class))` will match any (_including {{HTMLElement("html")}} and {{HTMLElement("body")}}_) element that isn't `.foo`. diff --git a/files/en-us/web/css/_colon_where/index.md b/files/en-us/web/css/_colon_where/index.md index 218cbfee5594c31..1089dbc55f629ea 100644 --- a/files/en-us/web/css/_colon_where/index.md +++ b/files/en-us/web/css/_colon_where/index.md @@ -13,6 +13,16 @@ The difference between `:where()` and {{CSSxRef(":is", ":is()")}} is that `:wher {{EmbedInteractiveExample("pages/tabbed/pseudo-class-where.html", "tabbed-shorter")}} +## Syntax + +The `:where()` pseudo-class requires a [selector list](/en-US/docs/Web/CSS/CSS_selectors/Selector_structure#selector_list), a comma-separated list of one or more selectors, as its argument. The list must not contain a [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements), but any other simple, compound, and complex selectors are allowed. + +```css-nolint +:where() { + /* ... */ +} +``` + ### Forgiving Selector Parsing The specification defines `:is()` and `:where()` as accepting a [forgiving selector list](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list). @@ -129,14 +139,6 @@ However, selectors inside `:where()` have specificity 0, so the orange footer li {{EmbedLiveSample('Examples', '100%', 600)}} -## Syntax - -```css-nolint -:where() { - /* ... */ -} -``` - ## Specifications {{Specifications}} From d8af236abe78a93a4d45d255237af2dbe779f111 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 26 Jun 2024 00:07:25 -0400 Subject: [PATCH 04/58] Update keyboard event target (#34403) * Update keyboard event target * Apply suggestions from code review Co-authored-by: Estelle Weyl --------- Co-authored-by: Estelle Weyl --- files/en-us/web/api/element/keydown_event/index.md | 4 +++- files/en-us/web/api/element/keyup_event/index.md | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/element/keydown_event/index.md b/files/en-us/web/api/element/keydown_event/index.md index 317802e49977671..8590668df340c4f 100644 --- a/files/en-us/web/api/element/keydown_event/index.md +++ b/files/en-us/web/api/element/keydown_event/index.md @@ -14,7 +14,9 @@ Unlike the deprecated {{domxref("Element/keypress_event", "keypress")}} event, t The `keydown` and [`keyup`](/en-US/docs/Web/API/Element/keyup_event) events provide a code indicating which key is pressed, while `keypress` indicates which character was entered. For example, a lowercase "a" will be reported as 65 by `keydown` and `keyup`, but as 97 by `keypress`. An uppercase "A" is reported as 65 by all events. -Keyboard events are only generated by ``, `