diff --git a/.nvmrc b/.nvmrc index edf176c679f3d46..3f430af82b3dfa7 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.17 +v18 diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 65e6d096673a6f0..edd3179cdf1697f 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -3584,6 +3584,7 @@ /en-US/docs/Glossary/GZip /en-US/docs/Glossary/gzip_compression /en-US/docs/Glossary/Global_attribute /en-US/docs/Web/HTML/Global_attributes /en-US/docs/Glossary/Grid_Rows /en-US/docs/Glossary/Grid_Row +/en-US/docs/Glossary/Guard /en-US/docs/Web/API/Fetch_API/Using_Fetch /en-US/docs/Glossary/Hash_function /en-US/docs/Glossary/Cryptographic_hash_function /en-US/docs/Glossary/Header /en-US/docs/Glossary/HTTP_header /en-US/docs/Glossary/I18N /en-US/docs/Glossary/Internationalization @@ -3601,6 +3602,7 @@ /en-US/docs/Glossary/Property_(CSS) /en-US/docs/Glossary/property/CSS /en-US/docs/Glossary/Random_Number_Generator /en-US/docs/Glossary/RNG /en-US/docs/Glossary/Reference /en-US/docs/Glossary/Object_reference +/en-US/docs/Glossary/Rendering_engine /en-US/docs/Glossary/Engine/Rendering /en-US/docs/Glossary/Responsive_design /en-US/docs/Glossary/Responsive_web_design /en-US/docs/Glossary/Round_Trip_Time_(RTT) /en-US/docs/Glossary/Round_Trip_Time /en-US/docs/Glossary/SRTP /en-US/docs/Glossary/RTP @@ -6502,7 +6504,6 @@ /en-US/docs/SVG/Attribute/color /en-US/docs/Web/SVG/Attribute/color /en-US/docs/SVG/Attribute/color-interpolation /en-US/docs/Web/SVG/Attribute/color-interpolation /en-US/docs/SVG/Attribute/color-interpolation-filters /en-US/docs/Web/SVG/Attribute/color-interpolation-filters -/en-US/docs/SVG/Attribute/color-profile /en-US/docs/Web/SVG/Attribute/color-profile /en-US/docs/SVG/Attribute/cursor /en-US/docs/Web/SVG/Attribute/cursor /en-US/docs/SVG/Attribute/cx /en-US/docs/Web/SVG/Attribute/cx /en-US/docs/SVG/Attribute/cy /en-US/docs/Web/SVG/Attribute/cy @@ -6544,7 +6545,7 @@ /en-US/docs/SVG/Attribute/k4 /en-US/docs/Web/SVG/Attribute/k4 /en-US/docs/SVG/Attribute/kernelMatrix /en-US/docs/Web/SVG/Attribute/kernelMatrix /en-US/docs/SVG/Attribute/kernelUnitLength /en-US/docs/Web/SVG/Attribute/kernelUnitLength -/en-US/docs/SVG/Attribute/kerning /en-US/docs/Web/SVG/Attribute/kerning +/en-US/docs/SVG/Attribute/kerning /en-US/docs/Web/CSS/font-kerning /en-US/docs/SVG/Attribute/keySplines /en-US/docs/Web/SVG/Attribute/keySplines /en-US/docs/SVG/Attribute/keyTimes /en-US/docs/Web/SVG/Attribute/keyTimes /en-US/docs/SVG/Attribute/letter-spacing /en-US/docs/Web/SVG/Attribute/letter-spacing @@ -8171,6 +8172,7 @@ /en-US/docs/Web/API/FetchSignal /en-US/docs/Web/API/AbortSignal /en-US/docs/Web/API/FetchSignal/aborted /en-US/docs/Web/API/AbortSignal/aborted /en-US/docs/Web/API/FetchSignal/onabort /en-US/docs/Web/API/AbortSignal/abort_event +/en-US/docs/Web/API/Fetch_API/Basic_concepts /en-US/docs/Web/API/Fetch_API/Using_Fetch /en-US/docs/Web/API/File.lastModifiedDate /en-US/docs/Web/API/File/lastModifiedDate /en-US/docs/Web/API/File.name /en-US/docs/Web/API/File/name /en-US/docs/Web/API/File.size /en-US/docs/Web/API/Blob/size @@ -11568,6 +11570,7 @@ /en-US/docs/Web/CSS/box_edges /en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model /en-US/docs/Web/CSS/box_model /en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model /en-US/docs/Web/CSS/calc() /en-US/docs/Web/CSS/calc +/en-US/docs/Web/CSS/calc-constant /en-US/docs/Web/CSS/calc-keyword /en-US/docs/Web/CSS/clamp() /en-US/docs/Web/CSS/clamp /en-US/docs/Web/CSS/color-adjust /en-US/docs/Web/CSS/print-color-adjust /en-US/docs/Web/CSS/color-interpolation-filters /en-US/docs/Web/SVG/Attribute/color-interpolation-filters @@ -12979,6 +12982,7 @@ /en-US/docs/Web/SVG/Attribute/Presentation /en-US/docs/Web/SVG/Attribute /en-US/docs/Web/SVG/Attribute/Styling /en-US/docs/Web/SVG/Attribute /en-US/docs/Web/SVG/Attribute/dataset /en-US/docs/Web/API/SVGElement/dataset +/en-US/docs/Web/SVG/Attribute/kerning /en-US/docs/Web/CSS/font-kerning /en-US/docs/Web/SVG/Compatibility_sources /en-US/docs/Web/SVG /en-US/docs/Web/SVG/Element/animateColor /en-US/docs/Web/SVG/Element/animate /en-US/docs/Web/SVG/Index /en-US/docs/Web/SVG diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 1160b3187a32599..f7c275a85ce6e27 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -2159,7 +2159,7 @@ "fscholz" ] }, - "Glossary/Engine": { + "Glossary/Engine/JavaScript": { "modified": "2019-05-09T03:04:25.699Z", "contributors": [ "SphinxKnight", @@ -2172,6 +2172,18 @@ "panaggio" ] }, + "Glossary/Engine/Rendering": { + "modified": "2020-09-28T13:38:28.076Z", + "contributors": [ + "myakura", + "ramsunvtech", + "hbloomer", + "Andrew_Pfeiffer", + "klez", + "kscarfone", + "ChrisL" + ] + }, "Glossary/Entity": { "modified": "2019-09-05T01:20:53.488Z", "contributors": [ @@ -2625,10 +2637,6 @@ "modified": "2020-03-26T14:30:59.270Z", "contributors": ["mfuji09", "j9t", "teoli", "rachelandrew"] }, - "Glossary/Guard": { - "modified": "2019-01-16T20:19:28.335Z", - "contributors": ["chrisdavidmills", "klez", "Andrew_Pfeiffer", "kscarfone"] - }, "Glossary/Gutters": { "modified": "2019-03-23T22:16:42.903Z", "contributors": ["Verger", "teoli", "rachelandrew"] @@ -4213,18 +4221,6 @@ "teainthegarden" ] }, - "Glossary/Rendering_engine": { - "modified": "2020-09-28T13:38:28.076Z", - "contributors": [ - "myakura", - "ramsunvtech", - "hbloomer", - "Andrew_Pfeiffer", - "klez", - "kscarfone", - "ChrisL" - ] - }, "Glossary/Repo": { "modified": "2019-03-23T23:09:46.809Z", "contributors": [ @@ -34969,21 +34965,6 @@ "kscarfone" ] }, - "Web/API/Fetch_API/Basic_concepts": { - "modified": "2020-02-18T19:55:22.051Z", - "contributors": [ - "jswisher", - "Sheppy", - "sideshowbarker", - "LurN", - "parambirs", - "chrisdavidmills", - "gapple", - "lawrencekgrant", - "gbharatwaj", - "smarvin" - ] - }, "Web/API/Fetch_API/Cross-global_fetch_usage": { "modified": "2020-10-06T03:40:09.140Z", "contributors": ["ralflang", "mfluehr", "piotrekwitek", "chrisdavidmills"] @@ -123760,10 +123741,6 @@ "ratcliffe_mike" ] }, - "Web/SVG/Attribute/color-profile": { - "modified": "2020-10-15T21:04:59.286Z", - "contributors": ["Sebastianz", "connorshea", "Jeremie"] - }, "Web/SVG/Attribute/cursor": { "modified": "2020-10-15T21:18:37.523Z", "contributors": [ @@ -123913,10 +123890,6 @@ "modified": "2020-10-15T21:20:22.181Z", "contributors": ["Sebastianz", "Jeremie"] }, - "Web/SVG/Attribute/enable-background": { - "modified": "2020-10-15T22:21:13.409Z", - "contributors": ["Sebastianz"] - }, "Web/SVG/Attribute/end": { "modified": "2020-03-17T14:16:54.678Z", "contributors": ["mfuji09", "VictorJanin", "Sebastianz", "Jeremie"] @@ -124177,10 +124150,6 @@ "modified": "2019-06-30T15:02:41.242Z", "contributors": ["Sebastianz", "Jeremie"] }, - "Web/SVG/Attribute/kerning": { - "modified": "2020-10-15T21:06:36.596Z", - "contributors": ["Sebastianz", "connorshea", "Jeremie"] - }, "Web/SVG/Attribute/keyPoints": { "modified": "2020-10-15T22:20:10.730Z", "contributors": ["Sebastianz"] diff --git a/files/en-us/games/techniques/controls_gamepad_api/index.md b/files/en-us/games/techniques/controls_gamepad_api/index.md index e1839d42b587d84..6afcdc38c82f81a 100644 --- a/files/en-us/games/techniques/controls_gamepad_api/index.md +++ b/files/en-us/games/techniques/controls_gamepad_api/index.md @@ -12,10 +12,6 @@ This article looks at implementing an effective, cross-browser control system fo Historically playing games on a console connected to your TV was always a totally different experience to gaming on the PC, mostly because of the unique controls. Eventually, extra drivers and plugins allowed us to use console gamepads with desktop games — either native games or those running in the browser. Now we have the [Gamepad API](/en-US/docs/Web/API/Gamepad_API), which gives us the ability to play browser-based games using gamepad controllers without any plugins. The Gamepad API achieves this by providing an interface exposing button presses and axis changes that can be used inside JavaScript code to handle the input. These are good times for browser gaming. -## API status and browser support - -The [Gamepad API](https://www.w3.org/TR/gamepad/) is still at the Working Draft stage in the W3C process, which means its implementation might still change, but saying that the [browser support](https://caniuse.com/gamepad) is already quite good. Firefox 29+ and Chrome 35+ support it out of the box. Opera supports the API in version 22+ (not surprising given that they now use Chrome's Blink engine.) And Microsoft implemented support for the API in Edge recently, which means four main browsers now supporting the Gamepad API. - ## Which gamepads are best? The most popular gamepads right now are those from the Xbox 360, Xbox One, PS3 and PS4 — they have been heavily tested and work well with the Gamepad API implementation in browsers across Windows and macOS. diff --git a/files/en-us/glossary/accessibility/index.md b/files/en-us/glossary/accessibility/index.md index decf193e54ed8a2..35a178dd1ac62da 100644 --- a/files/en-us/glossary/accessibility/index.md +++ b/files/en-us/glossary/accessibility/index.md @@ -6,14 +6,25 @@ page-type: glossary-definition {{GlossarySidebar}} -**Accessibility** (**A11Y**) refers to best practices for keeping a website usable despite physical and technical restrictions. Web accessibility is formally defined and discussed at the {{Glossary("W3C")}} through the {{Glossary("WAI","Web Accessibility Initiative")}} (WAI). +**Accessibility** (**A11y**) means enabling as many people as possible to use websites, including those with limited abilities. The most common way to achieve this is by ensuring that assistive technologies work properly to access the content. These technologies include {{glossary("screen reader", "screen readers")}}, screen magnifiers, speech recognition tools, and alternative input devices. + +You can measure the accessibility of your website by using tools like [Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/scoring) and the [Firefox Accessibility Inspector](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html). + +Web accessibility is formally defined and discussed at the {{Glossary("W3C")}} through the {{Glossary("WAI", "Web Accessibility Initiative (WAI)")}}. ## See also -- [Accessibility resources](/en-US/docs/Web/Accessibility) +- [Accessibility](/en-US/docs/Web/Accessibility) - [Learn accessibility](/en-US/docs/Learn/Accessibility) -- [ARIA documentation](/en-US/docs/Web/Accessibility/ARIA) +- [ARIA](/en-US/docs/Web/Accessibility/ARIA) - [Web accessibility](https://en.wikipedia.org/wiki/Web_accessibility) on Wikipedia -- [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/) -- [The W3C Web Accessibility Initiative](https://www.w3.org/WAI/) +- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) on W3C +- [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/) specification - [Web Accessibility In Mind](https://webaim.org/) +- [Glossary](/en-US/docs/Glossary) + + - {{Glossary("ARIA")}} + - {{Glossary("Screen reader")}} + - {{Glossary("Accessibility tree")}} + - {{Glossary("Accessible description")}} + - {{Glossary("Accessible name")}} diff --git a/files/en-us/glossary/accessibility_tree/index.md b/files/en-us/glossary/accessibility_tree/index.md index bdeb24402a68a4b..9a0164a4697f0eb 100644 --- a/files/en-us/glossary/accessibility_tree/index.md +++ b/files/en-us/glossary/accessibility_tree/index.md @@ -18,7 +18,7 @@ There are four properties in an accessibility tree object: - : How do we describe this thing, if we want to provide more description beyond the name? The description of a table could explain what kind of information the table contains. - [**role**](/en-US/docs/Web/Accessibility/ARIA/Roles) - : What kind of thing is it? For example, is it a button, a nav bar, or a list of items? -- **state** +- [**state**](/en-US/docs/Web/Accessibility/ARIA/Attributes) - : Does it have a state? Examples include checked or unchecked checkbox states and collapsed or expanded states for the [``](/en-US/docs/Web/HTML/Element/summary) element. Additionally, the accessibility tree often contains information on what can be done with an element: a link can be _followed_, a text input can be _typed into_, etc. @@ -27,7 +27,16 @@ While still in draft form within the Web Incubator Community Group as of April 2 ## See also +- [Accessibility](/en-US/docs/Web/Accessibility) +- [Learn accessibility](/en-US/docs/Learn/Accessibility) +- [Web accessibility](https://en.wikipedia.org/wiki/Web_accessibility) on Wikipedia +- [Web Accessibility In Mind](https://webaim.org/) +- [ARIA](/en-US/docs/Web/Accessibility/ARIA) +- [The W3C Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) +- [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/) - [Glossary](/en-US/docs/Glossary) - {{Glossary("Accessibility")}} + - {{Glossary("Accessible description")}} + - {{Glossary("Accessible name")}} - {{Glossary("ARIA")}} diff --git a/files/en-us/glossary/accessible_name/index.md b/files/en-us/glossary/accessible_name/index.md index 554671ccc3a8dd2..2475a4d8128fa0c 100644 --- a/files/en-us/glossary/accessible_name/index.md +++ b/files/en-us/glossary/accessible_name/index.md @@ -22,11 +22,23 @@ To create an association between visible content and an element or multiple text Many elements, such as sections of textual content, don't need an accessible name. All controls should have an accessible name. All images that convey information and aren't purely presentational do too. -Assistive technologies will provide the user with the accessibility name property, which is the accessible name along with the element's role. While many elements don't need an accessible name, some content [roles](/en-US/docs/Web/Accessibility/ARIA/Roles) can benefit from having an accessible name. For example, a [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) is a section of content that appears after a user activates the associated element with a [`tab`](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) role. This role can be set on an element with no needed name, like the {{HTMLElement("div")}} element. The `tab` is the control and must have an accessible name. The `tabpanel` is the child (content section) of the `tab`. Adding `aria-labelledby` to the `tabpanel` is a best practice. +Assistive technologies provide users with the accessibility name property, which includes the accessible name along with the element's role. While many elements don't need an accessible name, it's necessary to provide an accessible name to override or supplement the content of elements with specified [roles](/en-US/docs/Web/Accessibility/ARIA/Roles). For example, a [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) is a section of content that appears after a user activates the associated element with a [`tab`](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) role. This role can be set on an element with no needed name, like the {{HTMLElement("div")}} element. The `tab` is the control and must have an accessible name. The `tabpanel` is the child (content section) of the `tab`. Adding `aria-labelledby` to the `tabpanel` is a best practice. ## See also - [ARIA roles](/en-US/docs/Web/Accessibility/ARIA/Roles) - [ARIA attribute](/en-US/docs/Web/Accessibility/ARIA/Attributes) +- [Accessible Name and Description Computation 1.2 (accname)](https://w3c.github.io/accname/#mapping_additional_nd_description) - [Accessibility](/en-US/docs/Web/Accessibility) - [Learn accessibility](/en-US/docs/Learn/Accessibility) +- [Web accessibility](https://en.wikipedia.org/wiki/Web_accessibility) on Wikipedia +- [Web Accessibility In Mind](https://webaim.org/) +- [ARIA](/en-US/docs/Web/Accessibility/ARIA) +- [The W3C Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) +- [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/) +- [Glossary](/en-US/docs/Glossary) + + - {{Glossary("Accessibility")}} + - {{Glossary("Accessibility tree")}} + - {{Glossary("Accessible description")}} + - {{Glossary("ARIA")}} diff --git a/files/en-us/glossary/blink/index.md b/files/en-us/glossary/blink/index.md index 8afe3cbb3de486c..2777aa9db2b702c 100644 --- a/files/en-us/glossary/blink/index.md +++ b/files/en-us/glossary/blink/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -**Blink** is an open-source browser rendering engine developed by Google as part of Chromium (and therefore part of {{glossary("Google Chrome", "Chrome")}} as well). Specifically, Blink began as a fork of the WebCore library in {{glossary("WebKit")}}, which handles layout, rendering, and {{glossary("DOM")}}, but now stands on its own as a separate {{glossary("rendering engine")}}. +**Blink** is an open-source browser rendering engine developed by Google as part of Chromium (and therefore part of {{glossary("Google Chrome", "Chrome")}} as well). Specifically, Blink began as a fork of the WebCore library in {{glossary("WebKit")}}, which handles layout, rendering, and {{glossary("DOM")}}, but now stands on its own as a separate {{Glossary("Engine/Rendering", "rendering engine")}}. ## See also @@ -18,4 +18,4 @@ page-type: glossary-definition - {{glossary("Gecko")}} - {{glossary("Trident")}} - {{glossary("WebKit")}} - - {{glossary("Rendering engine")}} + - {{Glossary("Engine/Rendering", "Rendering engine")}} diff --git a/files/en-us/glossary/browser/index.md b/files/en-us/glossary/browser/index.md index 735a91fcfb6ba33..fca4f7ec25a2c76 100644 --- a/files/en-us/glossary/browser/index.md +++ b/files/en-us/glossary/browser/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -A **Web browser** or **browser** is a program that retrieves and displays pages from the {{Glossary("World Wide Web", "Web")}}, and lets users access further pages through {{Glossary("hyperlink", "hyperlinks")}}. A browser is the most familiar type of {{Glossary("user agent")}}. It uses a {{Glossary("rendering engine")}} to display web pages. +A **Web browser** or **browser** is a program that retrieves and displays pages from the {{Glossary("World Wide Web", "Web")}}, and lets users access further pages through {{Glossary("hyperlink", "hyperlinks")}}. A browser is the most familiar type of {{Glossary("user agent")}}. It uses a {{Glossary("Engine/Rendering", "rendering engine")}} to display web pages. Common browsers include: @@ -26,5 +26,5 @@ Common browsers include: - [Microsoft Edge](https://www.microsoft.com/en-us/edge) - [Opera Browser](https://www.opera.com/) - Glossary - - {{Glossary("Rendering engine")}} + - {{Glossary("Engine/Rendering", "Rendering engine")}} - {{Glossary("User agent")}} diff --git a/files/en-us/glossary/engine/index.md b/files/en-us/glossary/engine/index.md index ef8c9c8bf9b26c0..c7ee512abf95950 100644 --- a/files/en-us/glossary/engine/index.md +++ b/files/en-us/glossary/engine/index.md @@ -6,8 +6,6 @@ page-type: glossary-definition {{GlossarySidebar}} -The {{glossary("JavaScript")}} engine is an interpreter that parses and executes a JavaScript program. +The term **engine** can have several meanings depending on the context. It may refer to: -## See also - -- [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) on Wikipedia +{{GlossaryDisambiguation}} diff --git a/files/en-us/glossary/engine/javascript/index.md b/files/en-us/glossary/engine/javascript/index.md new file mode 100644 index 000000000000000..086fec7c618fda3 --- /dev/null +++ b/files/en-us/glossary/engine/javascript/index.md @@ -0,0 +1,23 @@ +--- +title: JavaScript engine +slug: Glossary/Engine/JavaScript +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**JavaScript engines** are interpreters that parse and execute {{glossary("JavaScript")}} code. Modern JavaScript engines use just-in-time (JIT) compilation to convert JavaScript code into machine code that can be executed by a computer's processor. A JavaScript engine is typically developed and used in web {{glossary("browser", "browsers")}} to run client-side code but can also be used in server-side environments like {{glossary("Node.js")}}. + +In a browser, the JavaScript engine operates together with the rendering engine via the {{glossary("DOM", "Document Object Model")}} and {{glossary("WebIDL", "Web IDL")}} bindings. Some JavaScript engines also execute {{glossary("WebAssembly")}} code in the same sandbox as regular JavaScript code. + +Do not confuse JavaScript engines with {{glossary("engine/rendering", "rendering engines")}}, which are also crucial parts of browsers. + +## See also + +- [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) on Wikipedia +- Glossary + - {{glossary("Engine")}} + - {{glossary("JavaScript")}} + - {{glossary("WebAssembly")}} + - {{glossary("Browser")}} + - {{glossary("Node.js")}} diff --git a/files/en-us/glossary/engine/rendering/index.md b/files/en-us/glossary/engine/rendering/index.md new file mode 100644 index 000000000000000..d41e56ff27aee21 --- /dev/null +++ b/files/en-us/glossary/engine/rendering/index.md @@ -0,0 +1,23 @@ +--- +title: Rendering engine +slug: Glossary/Engine/Rendering +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Rendering engines** (also known as layout engines or browser engines) are part of a {{glossary("Browser", "web browser")}} that transforms {{glossary("HTML")}}, {{glossary("CSS")}}, and other resources of a web page into a visual representation on a screen. + +Common rendering engines include: + +- {{glossary("Blink")}} +- {{glossary("Gecko")}} +- {{glossary("WebKit")}} +- {{glossary("Trident")}} + +## See also + +- [Browser engine](https://en.wikipedia.org/wiki/Browser_engine) on Wikipedia +- Glossary + - {{Glossary("Engine")}} + - {{Glossary("Browser")}} diff --git a/files/en-us/glossary/fetch_metadata_request_header/index.md b/files/en-us/glossary/fetch_metadata_request_header/index.md index 20085e4166ccd3e..b51314ff0844802 100644 --- a/files/en-us/glossary/fetch_metadata_request_header/index.md +++ b/files/en-us/glossary/fetch_metadata_request_header/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition A **fetch metadata request header** is an {{Glossary("Request header", "HTTP request header")}} that provides additional information about the context from which the request originated. This allows the server to make decisions about whether a request should be allowed based on where the request came from and how the resource will be used. -With this information a server can implement a {{Glossary("resource isolation policy")}}, allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as {{Glossary("CSRF")}}, Cross-site Script Inclusion('XSSI'), timing attacks, and cross-origin information leaks. +With this information a server can implement a resource isolation policy, allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as {{Glossary("CSRF")}}, Cross-site Script Inclusion('XSSI'), timing attacks, and cross-origin information leaks. These headers are prefixed with `Sec-`, and hence have {{Glossary("Forbidden header name", "forbidden header names")}}. As such, they cannot be modified from JavaScript. diff --git a/files/en-us/glossary/global_object/index.md b/files/en-us/glossary/global_object/index.md index 26919e7b8e0278b..2de69ec0a2347b9 100644 --- a/files/en-us/glossary/global_object/index.md +++ b/files/en-us/glossary/global_object/index.md @@ -6,9 +6,11 @@ page-type: glossary-definition {{GlossarySidebar}} -A global object is an {{glossary("object")}} that always exists in the {{glossary("global scope")}}. +The **global object** in JavaScript is an {{glossary("object")}} which represents the {{glossary("global scope")}}. -In JavaScript, there's always a global object defined. In a web browser, when scripts create global variables defined with the [`var`](/en-US/docs/Web/JavaScript/Reference/Statements/var) keyword, they're created as members of the global object. (In {{Glossary("Node.js")}} this is not the case.) The global object's {{Glossary("interface")}} depends on the execution context in which the script is running. For example: +> **Note:** _Globally available objects_, which are objects in the {{glossary("global scope")}}, are sometimes also referred to as global objects, but strictly speaking, there is only one global object per environment. + +In each JavaScript environment, there's always a global object defined. The global object's {{Glossary("interface")}} depends on the execution context in which the script is running. For example: - In a web browser, any code which the script doesn't specifically start up as a background task has a {{domxref("Window")}} as its global object. This is the vast majority of JavaScript code on the Web. - Code running in a {{domxref("Worker")}} has a {{domxref("WorkerGlobalScope")}} object as its global object. @@ -16,7 +18,7 @@ In JavaScript, there's always a global object defined. In a web browser, when sc The [`globalThis`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) global property allows one to access the global object regardless of the current environment. -[`var`](/en-US/docs/Web/JavaScript/Reference/Statements/var) statements and [function declarations](/en-US/docs/Web/JavaScript/Reference/Statements/function) at the top level create properties of the global object. On the other hand, {{jsxref("Statements/let", "let")}} and {{jsxref("Statements/const", "const")}} declarations never create properties of the global object. +[`var`](/en-US/docs/Web/JavaScript/Reference/Statements/var) statements and [function declarations](/en-US/docs/Web/JavaScript/Reference/Statements/function) at the top level of a script create properties of the global object. On the other hand, {{jsxref("Statements/let", "let")}} and {{jsxref("Statements/const", "const")}} declarations never create properties of the global object. The properties of the global object are automatically added to the {{glossary("global scope")}}. @@ -37,6 +39,11 @@ console.log(global === global.global); // true (in Node.js) - {{glossary("global scope")}} - {{glossary("object")}} +- {{jsxref("globalThis")}} - {{domxref("Window")}} - {{domxref("WorkerGlobalScope")}} +- {{domxref("Window.window")}} +- {{domxref("Window.self")}} +- {{domxref("Window.frames")}} +- {{domxref("WorkerGlobalScope.self")}} - [`global`](https://nodejs.org/api/globals.html#globals_global) diff --git a/files/en-us/glossary/guard/index.md b/files/en-us/glossary/guard/index.md deleted file mode 100644 index 6d9d5f38d4bfb35..000000000000000 --- a/files/en-us/glossary/guard/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Guard -slug: Glossary/Guard -page-type: glossary-definition ---- - -{{GlossarySidebar}} - -Guard is a feature of {{domxref("Headers")}} objects (as defined in the {{domxref("Fetch_API","Fetch spec")}}, which affects whether methods such as {{domxref("Headers.set","set()")}} and {{domxref("Headers.append","append()")}} can change the header's contents. For example, `immutable` guard means that headers can't be changed. For more information, read [Fetch basic concepts: guard](/en-US/docs/Web/API/Fetch_API/Basic_concepts#guard). diff --git a/files/en-us/glossary/media/css/index.md b/files/en-us/glossary/media/css/index.md index 69b939879ce5d98..0f0f7677e871de8 100644 --- a/files/en-us/glossary/media/css/index.md +++ b/files/en-us/glossary/media/css/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -In the context of {{Glossary("CSS")}} (Cascading Style Sheets), the term **_media_** refers to the destination to which the document is to be drawn by the {{Glossary("rendering engine")}}. +In the context of {{Glossary("CSS")}} (Cascading Style Sheets), the term **_media_** refers to the destination to which the document is to be drawn by the {{Glossary("Engine/Rendering", "rendering engine")}}. Typically, this is a screen—but it may also be a printer, Braille display, or another type of device. diff --git a/files/en-us/glossary/microsoft_edge/index.md b/files/en-us/glossary/microsoft_edge/index.md index cd6c0eb0ea55ab5..95ae57c0cb2df78 100644 --- a/files/en-us/glossary/microsoft_edge/index.md +++ b/files/en-us/glossary/microsoft_edge/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition **Microsoft Edge** is a proprietary cross-platform {{glossary("World Wide Web", "Web")}} {{Glossary("browser")}} developed by Microsoft since 2014. Initially known as Spartan, Edge replaced the longstanding browser {{glossary("Microsoft Internet Explorer", "Internet Explorer")}}. -Edge is included with Windows 10 and Windows 11, and is also available for macOS, iOS/iPadOS, Android and Linux. Edge used EdgeHTML as its {{glossary("rendering engine")}} until 2019, when it was replaced by {{glossary("Blink")}}, the rendering engine used by {{Glossary("Google Chrome")}}. On iOS/iPadOS, Edge instead uses {{glossary("WebKit")}} as its rendering engine. Edge supports 'IE mode' for backwards compatibility that uses the {{glossary("Trident")}} engine to render pages requiring legacy Internet Explorer features. +Edge is included with Windows 10 and Windows 11, and is also available for macOS, iOS/iPadOS, Android and Linux. Edge used EdgeHTML as its {{Glossary("Engine/Rendering", "rendering engine")}} until 2019, when it was replaced by {{glossary("Blink")}}, the rendering engine used by {{Glossary("Google Chrome")}}. On iOS/iPadOS, Edge instead uses {{glossary("WebKit")}} as its rendering engine. Edge supports 'IE mode' for backwards compatibility that uses the {{glossary("Trident")}} engine to render pages requiring legacy Internet Explorer features. ## See also @@ -17,7 +17,7 @@ Edge is included with Windows 10 and Windows 11, and is also available for macOS - [MDN Web Docs Glossary](/en-US/docs/Glossary) - Glossary - {{Glossary("Browser")}} - - {{Glossary("Rendering engine")}} + - {{Glossary("Engine/Rendering", "Rendering engine")}} - {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} - {{Glossary("Blink")}} - {{Glossary("Trident")}} diff --git a/files/en-us/glossary/rendering_engine/index.md b/files/en-us/glossary/rendering_engine/index.md deleted file mode 100644 index 778bf5b38e8a914..000000000000000 --- a/files/en-us/glossary/rendering_engine/index.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Rendering engine -slug: Glossary/Rendering_engine -page-type: glossary-definition ---- - -{{GlossarySidebar}} - -A **rendering engine** is software that draws text and images on the screen. The engine draws structured text from a document (often {{glossary("HTML")}}), and formats it properly based on the given style declarations (often given in {{glossary("CSS")}}). Examples of layout engines: {{glossary("Blink")}}, {{glossary("Gecko")}}, EdgeHTML, {{glossary("WebKit")}}. - -## See also - -- [Web browser engine](https://en.wikipedia.org/wiki/Web_browser_engine) on Wikipedia -- [Venkatraman.R - Behind Browsers (Part 1, Basics)](https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6) diff --git a/files/en-us/glossary/response_header/index.md b/files/en-us/glossary/response_header/index.md index 731f5ac727913a5..2b5ebc053c58097 100644 --- a/files/en-us/glossary/response_header/index.md +++ b/files/en-us/glossary/response_header/index.md @@ -40,5 +40,4 @@ x-frame-options: DENY - {{Glossary("Representation header")}} - {{Glossary("HTTP header")}} - {{Glossary("Response header")}} - - {{Glossary("Fetch metadata response header")}} - {{Glossary("Request header")}} diff --git a/files/en-us/glossary/rtsp/index.md b/files/en-us/glossary/rtsp/index.md index 5e5e488bf69c6f3..629d382291937c7 100644 --- a/files/en-us/glossary/rtsp/index.md +++ b/files/en-us/glossary/rtsp/index.md @@ -6,12 +6,9 @@ page-type: glossary-definition {{GlossarySidebar}} -Real-time streaming protocol (RTSP) is a network protocol that controls how the streaming of a media should occur between a {{glossary("server")}} and a {{glossary("client")}}. Basically, RTSP is the protocol that describes what happens when you click "Pause"/"Play" when streaming a video. If your computer were a remote control and the streaming server a television, RTSP would describe how the instruction of the remote control affects the TV. +Real-time streaming protocol (RTSP) is a network protocol that controls how the streaming of a media should occur between a {{glossary("server")}} and a client. Basically, RTSP is the protocol that describes what happens when you click "Pause"/"Play" when streaming a video. If your computer were a remote control and the streaming server a television, RTSP would describe how the instruction of the remote control affects the TV. ## See also - [RTSP](https://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol) on Wikipedia - [RFC 7826](https://datatracker.ietf.org/doc/html/rfc7826) (one of the documents that specifies precisely how the protocol works) -- [Glossary](/en-US/docs/Glossary) - - - {{Glossary("RTSP")}} diff --git a/files/en-us/glossary/simd/index.md b/files/en-us/glossary/simd/index.md index f6a009c8d8906d0..76a2e037f9f97e4 100644 --- a/files/en-us/glossary/simd/index.md +++ b/files/en-us/glossary/simd/index.md @@ -14,6 +14,4 @@ See also {{Glossary("SISD")}} for a sequential architecture with no parallelism - [SIMD](https://en.wikipedia.org/wiki/SIMD) on Wikipedia - [Glossary](/en-US/docs/Glossary) - - - {{Glossary("SIMD")}} - {{Glossary("SISD")}} diff --git a/files/en-us/glossary/trident/index.md b/files/en-us/glossary/trident/index.md index 5494ef662455e23..6c0e42b8e208b83 100644 --- a/files/en-us/glossary/trident/index.md +++ b/files/en-us/glossary/trident/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -**Trident** (or _MSHTML_) was the proprietary {{glossary("rendering engine")}} that powered {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}}. A {{Glossary("fork")}} called _EdgeHTML_ replaced Trident in Internet Explorer's successor, {{Glossary("Microsoft Edge", "Edge")}} (later referred to as "Microsoft Edge Legacy"). +**Trident** (or _MSHTML_) was the proprietary {{Glossary("Engine/Rendering", "rendering engine")}} that powered {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}}. A {{Glossary("fork")}} called _EdgeHTML_ replaced Trident in Internet Explorer's successor, {{Glossary("Microsoft Edge", "Edge")}} (later referred to as "Microsoft Edge Legacy"). Trident is used in Microsoft Edge when 'IE mode' is on, a feature that allows Edge to render web pages using Trident for compatibility with legacy websites. Trident will only receive security updates until 2029 to support usage in IE mode. @@ -16,4 +16,4 @@ Trident is used in Microsoft Edge when 'IE mode' is on, a feature that allows Ed - Glossary - {{Glossary("Microsoft Internet Explorer")}} - {{Glossary("Microsoft Edge")}} - - {{Glossary("Rendering engine")}} + - {{Glossary("Engine/Rendering", "Rendering engine")}} diff --git a/files/en-us/learn/forms/form_validation/index.md b/files/en-us/learn/forms/form_validation/index.md index 0980e7d9f970b62..1c3a55336f027b8 100644 --- a/files/en-us/learn/forms/form_validation/index.md +++ b/files/en-us/learn/forms/form_validation/index.md @@ -244,6 +244,8 @@ A field is invalid if it has a value and that value has fewer characters than th Browsers often don't let the user type a longer value than expected into text fields. A better user experience than just using `maxlength` is to also provide character count feedback in an accessible manner and let them edit their content down to size. An example of this is the character limit when posting on social media. JavaScript, including [solutions using `maxlength`](https://github.com/mimo84/bootstrap-maxlength), can be used to provide this. +> **Note:** Length constraints are never reported if the value is set programmatically. They are only reported for user-provided input. + ### Constraining the values of your entries For number fields (i.e. [``](/en-US/docs/Web/HTML/Element/input/number)), the [`min`](/en-US/docs/Web/HTML/Attributes/min) and [`max`](/en-US/docs/Web/HTML/Attributes/max) attributes can be used to provide a range of valid values. 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 index 4b6fcfeb29d1d04..e04e321eccee7f0 100644 --- 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 @@ -13,21 +13,13 @@ In this article, we cover the absolute basics of HTML. To get you started, this Prerequisites: - Basic software installed, and basic knowledge of - working with files. + Basic software installed, and basic knowledge of working with files. Objective: - To gain basic familiarity with HTML, and practice writing a few HTML - elements. + To gain basic familiarity with HTML, and practice writing a few HTML elements. @@ -460,7 +452,8 @@ However, if you use one type of quote, you can include the other type of quote _ ``` -To use quote marks inside other quote marks of the same type (single quote or double quote), use [HTML entities](#entity_references_including_special_characters_in_html). For example, this will break: +To use quote marks inside other quote marks of the same type (single quote or double quote), use {{glossary("character reference", "character references")}}. +For example, this will break: ```html-nolint example-bad A link to my example. @@ -700,11 +693,11 @@ console.log(whitespace); // silly." ``` -## Entity references: Including special characters in HTML +## Character references: including special characters in HTML In HTML, the characters `<`, `>`,`"`,`'`, and `&` are special characters. They are parts of the HTML syntax itself. So how do you include one of these special characters in your text? For example, if you want to use an ampersand or less-than sign, and not have it interpreted as code. -You do this with character references. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&), and ends with a semicolon (;). +You do this with {{glossary("character reference", "character references")}}. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&), and ends with a semicolon (;). | Literal character | Character reference equivalent | | ----------------- | ------------------------------ | diff --git a/files/en-us/learn/javascript/first_steps/a_first_splash/index.md b/files/en-us/learn/javascript/first_steps/a_first_splash/index.md index 30dea7c9bbe1387..3b5c2348c193a54 100644 --- a/files/en-us/learn/javascript/first_steps/a_first_splash/index.md +++ b/files/en-us/learn/javascript/first_steps/a_first_splash/index.md @@ -334,7 +334,7 @@ This is a lot of code — phew! Let's go through each section and explain what i - Now we've chained another test onto the end of the last one using an `else if (){ }` structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message. - The final block chained onto the end of this code (the `else { }`) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower. -- The last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. We add 1 to the `guessCount` variable so the player uses up their turn (`++` is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered. +- The last three lines in the function get us ready for the next guess to be submitted. We add 1 to the `guessCount` variable so the player uses up their turn (`++` is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered. ### Events diff --git a/files/en-us/learn/javascript/first_steps/strings/index.md b/files/en-us/learn/javascript/first_steps/strings/index.md index f614362ef47307d..db7914bd16c3396 100644 --- a/files/en-us/learn/javascript/first_steps/strings/index.md +++ b/files/en-us/learn/javascript/first_steps/strings/index.md @@ -252,7 +252,7 @@ If you have a numeric variable that you want to convert to a string or a string // string ``` -These constructs can be really useful in some situations. For example, if a user enters a number into a form's text field, it's a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through `Number()` to handle this. We did exactly this in our [Number Guessing Game, in line 59](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L59). +These constructs can be really useful in some situations. For example, if a user enters a number into a form's text field, it's a string. However, if you want to add this number to something, you'll need it to be a number, so you could pass it through `Number()` to handle this. We did exactly this in our [Number Guessing Game](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/first-splash/number-guessing-game.html), in the `checkGuess` function. ## Conclusion diff --git a/files/en-us/learn/javascript/first_steps/variables/index.md b/files/en-us/learn/javascript/first_steps/variables/index.md index 1ee0d2bd369d2b7..0e4d9a0f84e2fc6 100644 --- a/files/en-us/learn/javascript/first_steps/variables/index.md +++ b/files/en-us/learn/javascript/first_steps/variables/index.md @@ -34,7 +34,7 @@ A variable is a container for a value, like a number we might use in a sum, or a ### Variable example -Let's look at a simple example: +Let's look at an example: ```html @@ -45,16 +45,18 @@ Let's look at a simple example: const buttonA = document.querySelector("#button_A"); const headingA = document.querySelector("#heading_A"); +let count = 1; + buttonA.onclick = () => { - const name = prompt("What is your name?"); - alert(`Hello ${name}, nice to see you!`); - headingA.textContent = `Welcome ${name}`; + buttonA.textContent = "Try again!"; + headingA.textContent = `${count} clicks so far`; + count += 1; }; ``` {{ EmbedLiveSample('Variable_example', '100%', 120) }} -In this example pressing the button runs some code. The first line pops a box up on the screen that asks the reader to enter their name, and then stores the value in a variable. The second line displays a welcome message that includes their name, taken from the variable value and the third line displays that name on the page. +In this example pressing the button runs some code. First, it changes the text on the button itself. Second, it shows a message of the number of times the button has been pressed. The number is stored in a variable. Each time the user presses the button, the number in the variable will increment by one. ### Without a variable @@ -70,14 +72,14 @@ const buttonB = document.querySelector("#button_B"); const headingB = document.querySelector("#heading_B"); buttonB.onclick = () => { - alert(`Hello ${prompt("What is your name?")}, nice to see you!`); - headingB.textContent = `Welcome ${prompt("What is your name?")}`; + buttonB.textContent = "Try again!"; + headingB.textContent = "1 click so far"; }; ``` {{ EmbedLiveSample('Without_a_variable', '100%', 120) }} -You may not fully understand the syntax we are using (yet!), but you should be able to get the idea. If we didn't have variables available, we'd have to ask the reader for their name every time we needed to use it! +You may not fully understand the syntax we are using (yet!), but you should be able to get the idea. Without a variable, we don't have a way of knowing how many times the button have been clicked. The message to the user will quickly be irrelevant when no information can be remembered. Variables just make sense, and as you learn more about JavaScript they will start to become second nature. diff --git a/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md b/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md index deae838993d528d..abb0d618d4a3fc3 100644 --- a/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md +++ b/files/en-us/learn/javascript/first_steps/what_is_javascript/index.md @@ -159,7 +159,7 @@ function updateName() { } ``` -Here we are selecting a button (line 1), then attaching an event listener to it (line 3) so that when the button is clicked, the `updateName()` code block (lines 5–8) is run. The `updateName()` code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the button text to update the display. +Here we first select a button using `document.querySelector`, then attaching an event listener to it using `addEventListener` so that when the button is clicked, the `updateName()` code block (lines 5–8) is run. The `updateName()` code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the button text to update the display. If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the [browser developer console](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) — `Uncaught ReferenceError: Cannot access 'button' before initialization`. This means that the `button` object has not been initialized yet, so we can't add an event listener to it. diff --git a/files/en-us/learn/performance/javascript/index.md b/files/en-us/learn/performance/javascript/index.md index 3e4f46b908b8f97..19151e4d53763fa 100644 --- a/files/en-us/learn/performance/javascript/index.md +++ b/files/en-us/learn/performance/javascript/index.md @@ -310,7 +310,7 @@ There are several general best practices that will make your code run more effic } ``` - - Do work that is only needed once outside the loop. This may sound a bit obvious, but it is easy to overlook. Take the following snippet, which fetches a JSON object containing data to be processed in some way. In this case the {{domxref("fetch()")}} operation is being done on every iteration of the loop, which is a waste of computing power. Lines 3 and 4 could be moved outside the loop, so the network fetch is only being done once. + - Do work that is only needed once outside the loop. This may sound a bit obvious, but it is easy to overlook. Take the following snippet, which fetches a JSON object containing data to be processed in some way. In this case the {{domxref("fetch()")}} operation is being done on every iteration of the loop, which is a waste of computing power. The fetching, which does not depend on `i`, could be moved outside the loop, so it is only done once. ```js async function returnResults(number) { 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. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md index 35afd6f5200f38d..f50a769bba6a4b8 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md @@ -295,7 +295,7 @@ When compiling the app, Svelte changes our `h1` styles definition to `h1.svelte- ## Making a couple of changes Now that we have a general idea of how it all fits together, we can start making a few changes. -At this point you can try updating your `App.svelte` component — for example change the `

` element on line 6 of `App.svelte` so that it reads like this: +At this point you can try updating your `App.svelte` component — for example change the `

` element in `App.svelte` so that it reads like this: ```html

Hello {name} from MDN!

@@ -357,7 +357,7 @@ const app = new App({ export default app; ``` -`main.js` starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties: +`main.js` starts by importing the Svelte component that we are going to use. Then it gets instantiated with `new App`, passing an option object with the following properties: - `target`: The DOM element inside which we want the component to be rendered, in this case the `` element. - `props`: the values to assign to each prop of the `App` component. diff --git a/files/en-us/mdn/writing_guidelines/page_structures/live_samples/index.md b/files/en-us/mdn/writing_guidelines/page_structures/live_samples/index.md index e513ff2a9bf5df5..9e236aee0774eaf 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/live_samples/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/live_samples/index.md @@ -264,12 +264,16 @@ The CSS code styles the box as well as the text inside it. #### JavaScript -This code is very simple. All it does is attach an event handler to the "Hello world!" text that makes an alert appear when it is clicked. +In the JavaScript example, we attach an event handler to the "Hello world!" text that toggles it when it is clicked. ```js const el = document.getElementById("item"); +let toggleClick = false; el.onclick = function () { - alert("Owww, stop poking me!"); + this.textContent = toggleClick + ? "Hello world! Welcome to MDN" + : "Owww, stop poking me!"; + toggleClick = !toggleClick; }; ``` @@ -312,12 +316,16 @@ The CSS code styles the box as well as the text inside it. The `live-sample___he } ``` -This JavaScript code attaches an event handler to the "Hello world!" text that makes an alert appear when it is clicked. The `live-sample___hello-world` string has been added to the `js` language identifier for this code block as well. +This JavaScript code attaches an event handler to the "Hello world!" text that toggles it when it is clicked. The `live-sample___hello-world` string has been added to the `js` language identifier for this code block as well. ```js live-sample___hello-world const el = document.getElementById("item"); +let toggleClick = false; el.onclick = function () { - alert("Owww, stop poking me!"); + this.textContent = toggleClick + ? "Hello world! Welcome to MDN" + : "Owww, stop poking me!"; + toggleClick = !toggleClick; }; ``` diff --git a/files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md b/files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md index ccb61ed428ec495..2d7b6d972ec0cba 100644 --- a/files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md +++ b/files/en-us/mdn/writing_guidelines/writing_style_guide/code_style_guide/html/index.md @@ -114,9 +114,9 @@ Use semantic class/ID names, and separate multiple words with hyphens ({{Glossar

Blah blah blah

``` -## Entity references +## Character references -Don't use entity references unnecessarily — use the literal character wherever possible (you'll still need to escape characters like angle brackets and quote marks). +Don't use {{glossary("character reference", "character references")}} unnecessarily — use the literal character wherever possible (you'll still need to escape characters like angle brackets and quote marks). As an example, you could just write: 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..913e46d720aa411 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 @@ -179,6 +179,8 @@ The availability of these special shortcuts varies between manifest versions and +> **Note:** If the user changes the shortcut of the `_execute_browser_action` command, it is automatically carried over to the `_execute_action` command when the extension migrates from Manifest V2 to V3. This was implemented in Chrome 111 and Firefox 127. + For example, this JSON defines a key combination that clicks the extension's browser action: ```json diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/host_permissions/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/host_permissions/index.md index b221c11811cd764..3055fe8b158e3b4 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/host_permissions/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/host_permissions/index.md @@ -39,9 +39,13 @@ Use the `host_permissions` key to request access for the APIs in your extension ### Requested permissions and user prompts -Most browsers treat `host_permissions` as optional. If you request permissions using this key, users _may_ get prompted to grant those permissions during installation. As of June 2023, Safari, Firefox, and some Chromium-based browsers don't prompt the user during installation. +Users can [grant or revoke host permissions](https://support.mozilla.org/en-US/kb/extensions-button#w_website-permissions) on an ad hoc basis. Therefore., most browsers treat `host_permissions` as optional. -Users can also grant or revoke host permissions on an ad hoc basis. For example, in Firefox, users can do this using the [extensions panel](https://blog.mozilla.org/addons/2022/11/17/unified-extensions-button-and-how-to-handle-permissions-in-manifest-v3/). +On installation, when you request permissions using this key: + +- Until Firefox 126, a Manifest V3 extension's requested host permissions weren't displayed in the install prompt. From Firefox 127, host permissions listed in `host_permissions` and `content_scripts` are displayed in the install prompt. However, if an extension update requests new host permissions, these are not shown to the user. See ([Firefox bug 1893232](https://bugzil.la/1893232)). +- Chrome displays the permissions in the install prompt. +- Safari doesn't display requested host permissions in the install prompt. Your extension can check whether it has all the required permissions immediately after installation using {{WebExtAPIRef("permissions.contains")}}. If it doesn't have the necessary permissions, it can request them using {{WebExtAPIRef("permissions.request")}}. Providing an onboarding step to explain why some permissions are necessary before requesting them might also be helpful. diff --git a/files/en-us/mozilla/add-ons/webextensions/native_messaging/index.md b/files/en-us/mozilla/add-ons/webextensions/native_messaging/index.md index fa9dcc2324c6b2b..6942fa420bed945 100644 --- a/files/en-us/mozilla/add-ons/webextensions/native_messaging/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/native_messaging/index.md @@ -127,15 +127,12 @@ python -u "c:\\path\\to\\native-messaging\\app\\ping_pong.py" The browser finds the extension based on registry keys which are located in a specific location. You need to add them either programmatically with your final application or manually if you are using the example from GitHub. For more details, refer to [Manifest location](/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests#manifest_location). -Following with the `ping_pong` example, if using Firefox (see [this page for Chrome](https://developer.chrome.com/docs/apps/nativeMessaging/#native-messaging-host-location)), two registry entries should be created for the messaging to work: +Following with the `ping_pong` example, if using Firefox (see [this page for Chrome](https://developer.chrome.com/docs/apps/nativeMessaging/#native-messaging-host-location)), one of the two registry entries should be created for the messaging to work: - `HKEY_CURRENT_USER\Software\Mozilla\NativeMessagingHosts\ping_pong` - - - The default value for this key should be the path to the _application_ manifest: ex. `C:\Users\\webextensions-examples\native-messaging\app\ping_pong.json` - - `HKEY_LOCAL_MACHINE\Software\Mozilla\NativeMessagingHosts\ping_pong` - - Idem, the default value for this key should be the path to the application manifest. +The default value for the key should be the path to the _application_ manifest: ex. `C:\Users\\webextensions-examples\native-messaging\app\ping_pong.json`. > **Note:** If you base your work on the example located on GitHub, please read [this part of the readme](https://github.com/SphinxKnight/webextensions-examples/tree/master/native-messaging#windows-setup) and check the output of `check_config_win.py` before installing the WebExtension on your browser. diff --git a/files/en-us/mozilla/firefox/releases/108/index.md b/files/en-us/mozilla/firefox/releases/108/index.md index 5dbf2af5405b514..37e3be6fe6479d5 100644 --- a/files/en-us/mozilla/firefox/releases/108/index.md +++ b/files/en-us/mozilla/firefox/releases/108/index.md @@ -19,7 +19,7 @@ This article provides information about the changes in Firefox 108 that will aff - [Trigonometric functions](/en-US/docs/Web/CSS/CSS_Functions#trigonometric_functions) are now enabled with the `layout.css.trig.enabled` preference set to `true` by default. This allows the use of `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()` functions ([Firefox bug 1774589](https://bugzil.la/1774589), [Firefox bug 1787070](https://bugzil.la/1787070)). -- CSS [``](/en-US/docs/Web/CSS/calc-constant) type is implemented to allow for well-known constants such as `pi` and `e` within [math functions](/en-US/docs/Web/CSS/CSS_Functions#math_functions) ([Firefox bug 1682444](https://bugzil.la/1682444), [Firefox bug 1787070](https://bugzil.la/1787070)). +- CSS [``](/en-US/docs/Web/CSS/calc-keyword) type is implemented to allow for well-known constants such as `pi` and `e` within [math functions](/en-US/docs/Web/CSS/CSS_Functions#math_functions) ([Firefox bug 1682444](https://bugzil.la/1682444), [Firefox bug 1787070](https://bugzil.la/1787070)). - Container query length units are now supported via the `layout.css.container-queries.enabled` preference, which is set to `false` by default. Setting this preference to `true` allows the use of `cqw`, `cqh`, `cqi`, `cqb`, `cqmin`, and `cqmax` units of length which are relative to the size of a query container. For more information on these units, see the [CSS Container Queries](/en-US/docs/Web/CSS/CSS_containment/Container_queries#container_query_length_units) documentation ([Firefox bug 1744231](https://bugzil.la/1744231)). diff --git a/files/en-us/mozilla/firefox/releases/127/index.md b/files/en-us/mozilla/firefox/releases/127/index.md index aac227d968ab16f..17bc5f896e6011b 100644 --- a/files/en-us/mozilla/firefox/releases/127/index.md +++ b/files/en-us/mozilla/firefox/releases/127/index.md @@ -71,7 +71,9 @@ This article provides information about the changes in Firefox 127 that affect d - Firefox now installs extensions that specify the `"split"` value of the manifest.json [`"incognito"`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/incognito) key. However, as Firefox doesn't support split mode and to preserve the integrity of incognito browsing `"split"` is treated as an alias of the `"not_allowed"` value ([Firefox bug 1876924](https://bugzil.la/1876924)). - {{WebExtAPIRef("management.ExtensionInfo")}} now returns the `install_type` of `"admin"` when an add-on is installed using an enterprise policy ([Firefox bug 1895341](https://bugzil.la/1895341)). - Addition of a `filter` parameter to {{WebExtAPIRef("declarativeNetRequest.getDynamicRules")}} and {{WebExtAPIRef("declarativeNetRequest.getSessionRules")}}, which enables the list of returned rules to be filtered by ID ([Firefox bug 1820870](https://bugzil.la/1820870)). +- [`host_permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/host_permissions) for Manifest V3 extensions are now displayed to users during installation ([Firefox bug 1889402](https://bugzil.la/1889402)). However, if an extension update requests new host permissions, these are not shown to the user. See ([Firefox bug 1893232](https://bugzil.la/1893232)). - Addition of the {{WebExtAPIRef("runtime.getContexts")}} function that returns information about the contexts associated with the extension ([Firefox bug 1875480](https://bugzil.la/1875480)). +- For Manifest V3 extensions, adds fall back to the user-defined shortcuts for the special [`_execute_browser_action`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/commands#special_shortcuts) command if there are no user-defined shortcuts for `_execute_action`. This enables extensions migrating from Manifest V2 to V3 to preserve any user-defined shortcuts for the browser action ([Firefox bug 1797811](https://bugzil.la/1797811)). ## Experimental web features diff --git a/files/en-us/mozilla/firefox/releases/128/index.md b/files/en-us/mozilla/firefox/releases/128/index.md index cb8adbf64aad4b9..3fbb22117bb2fd2 100644 --- a/files/en-us/mozilla/firefox/releases/128/index.md +++ b/files/en-us/mozilla/firefox/releases/128/index.md @@ -75,6 +75,7 @@ This article provides information about the changes in Firefox 128 that affect d - Adds the ability to enable and disable rules in static declarative net request rulesets with {{WebExtAPIRef("declarativeNetRequest.updateStaticRules")}} and list disabled rules for a static ruleset with {{WebExtAPIRef("declarativeNetRequest.getDisabledRuleIds")}} ([Firefox bug 1810762](https://bugzil.la/1810762)) - The default value of {{WebExtAPIRef("proxy.settings")}} property `proxyDNS` is now `false` when using SOCKS4 and `true` when using SOCKS5. Previously, it defaulted to `false` for SOCKS4 and SOCKS5 ([Firefox bug 1741375](https://bugzil.la/1741375)). +- The non-standard Web API events `overflow` and `underflow` have been deprecated. Use of these events should be removed from extension documents before the release of Firefox 131 ([Firefox bug 1898445](https://bugzil.la/1898445)). ### Removals diff --git a/files/en-us/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/en-us/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md index d89e2fdeb8921bc..a9f82327b535141 100644 --- a/files/en-us/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md +++ b/files/en-us/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md @@ -107,8 +107,6 @@ When content visibility is changed (i.e., an element is hidden or shown), develo Here is an example of a tooltip that uses **`aria-hidden`** to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. -In this example, the HTML for the tooltip has the form shown. Line 9 sets the **`aria-hidden`** state to `true`. - ```html
@@ -126,7 +124,7 @@ In this example, the HTML for the tooltip has the form shown. Line 9 sets the **
``` -The CSS for this markup is shown in the following code. Note that there is no custom classname used, only the status of the **`aria-hidden`** attribute on line 1. +The CSS for this markup is shown in the following code. Note that there is no custom classname used, only the status of the **`aria-hidden`** attribute. ```css div.tooltip[aria-hidden="true"] { @@ -134,7 +132,7 @@ div.tooltip[aria-hidden="true"] { } ``` -The JavaScript to update the **`aria-hidden`** property has the form shown in the following code. Note that the script only updates the **`aria-hidden`** attribute (line 2); it does not need to also add or remove a custom classname. +The JavaScript to update the **`aria-hidden`** property has the form shown in the following code. Note that the script only updates the **`aria-hidden`** attribute; it does not need to also add or remove a custom classname. ```js function showTip(el) { diff --git a/files/en-us/web/accessibility/aria/roles/menuitemcheckbox_role/index.md b/files/en-us/web/accessibility/aria/roles/menuitemcheckbox_role/index.md index 40f46a96e2a1489..dd346a4e1b82718 100644 --- a/files/en-us/web/accessibility/aria/roles/menuitemcheckbox_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/menuitemcheckbox_role/index.md @@ -19,9 +19,9 @@ These three elements can only be contained in, or owned by, an element with role Menu items, including `menuitemcheckbox` elements, may be grouped within `group` elements or separated by elements with the [`separator`](/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role) role or other equivalent native role such as {{HTMLElement('fieldset')}} and {{HTMLElement('hr')}}. -Menu items containing the role of `menuitemcheckbox` must include the [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) attribute to expose the checkbox's state to assistive technology, unless using [``](/en-US/docs/Web/HTML/Element/input/checkbox), in which case the ['checked'](/en-US/docs/Web/HTML/Element/input/checkbox#checked) attribute should be used. +Menu items containing the role of `menuitemcheckbox` must include the [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) attribute to expose the checkbox's state to assistive technology, unless using [``](/en-US/docs/Web/HTML/Element/input/checkbox), in which case the [`checked`](/en-US/docs/Web/HTML/Element/input/checkbox#checked) attribute should be used. -Similar to the 'checked' attribute of {{HTMLElement('input')}}s of type `checkbox`, the `aria-checked` attribute of a `menuitemcheckbox` indicates whether the menu item is checked (`true`), unchecked (`false`), or represents a sub-level menu of other menu items that have a mixture of checked and unchecked values (`mixed`). The `mixed` value is similar to the checkbox's [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) attribute, which gives the appearance of a third, neither checked nor unchecked, state. If missing, the value defaults to `false`. +Similar to the `checked` attribute of {{HTMLElement('input')}}s of type `checkbox`, the `aria-checked` attribute of a `menuitemcheckbox` indicates whether the menu item is checked (`true`), unchecked (`false`), or represents a sub-level menu of other menu items that have a mixture of checked and unchecked values (`mixed`). The `mixed` value is similar to the checkbox's [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) attribute, which gives the appearance of a third, neither checked nor unchecked, state. An accessible name is required. Ideally, the accessible name should come from an associated {{htmlelement('label')}} element if using `` or visible, descendant content. Realize if the label or descendant content is not sufficient and, preferably, [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) is used referencing non-descendant content or [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) is used, these two ARIA properties will hide other descendant content from assistive technologies. diff --git a/files/en-us/web/accessibility/aria/roles/menuitemradio_role/index.md b/files/en-us/web/accessibility/aria/roles/menuitemradio_role/index.md index 1d8a30f8e27bbf7..4d4c8c61f4c9d72 100644 --- a/files/en-us/web/accessibility/aria/roles/menuitemradio_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/menuitemradio_role/index.md @@ -21,9 +21,9 @@ The three menu item elements can only be contained in, or owned by, an element w When all items in a submenu are members of the same radio group, the `group` is defined by the menu element; the `group` element is not necessary. -Menu items containing the role of `menuitemradio` must include the [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) attribute to expose the radio button's state to assistive technology, unless using [``](/en-US/docs/Web/HTML/Element/input/checkbox), in which case the ['checked'](/en-US/docs/Web/HTML/Element/input/checkbox#checked) attribute should be used. +Menu items containing the role of `menuitemradio` must include the [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) attribute to expose the radio button's state to assistive technology, unless using [``](/en-US/docs/Web/HTML/Element/input/checkbox), in which case the [`checked`](/en-US/docs/Web/HTML/Element/input/checkbox#checked) attribute should be used. -Similar to the 'checked' attribute of {{HTMLElement('input')}}s of type `radio`, the `aria-checked` attribute of a `menuitemradio` indicates whether the menu item is checked (`true`), unchecked (`false`). If missing, the value defaults to `false`. There is no `mixed` value like there is for `menuitemcheckbox`. +Similar to the `checked` attribute of {{HTMLElement('input')}}s of type `radio`, the `aria-checked` attribute of a `menuitemradio` indicates whether the menu item is checked (`true`), unchecked (`false`). There is no `mixed` value like there is for `menuitemcheckbox`. Only one `menuitemradio` in a group can be checked at the same time. When one item in the group is checked, the `aria-checked` attribute gets set to `true`, while the previously checked `menuitemradio` element in the same group, if there was one, becomes unchecked, by having the `aria-checked` attribute value switched to `false`. diff --git a/files/en-us/web/accessibility/aria/roles/switch_role/index.md b/files/en-us/web/accessibility/aria/roles/switch_role/index.md index b6a962bf00af92c..7f428f3f8b8109a 100644 --- a/files/en-us/web/accessibility/aria/roles/switch_role/index.md +++ b/files/en-us/web/accessibility/aria/roles/switch_role/index.md @@ -59,7 +59,7 @@ From the assistive technology user's perspective, the heading does not exist sin ### Associated ARIA roles, states, and properties - [`aria-checked`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) attribute - - : The `aria-checked` attribute is **required** when using the `switch` role, as it represents the current state of the widget that the `switch` role is applied to. A value of `true` represents the "on" state; `false` represents the "off" state; a value of `mixed` is not supported by the switch role, and is treated as `false`. The default value is `false`. + - : The `aria-checked` attribute is **required** when using the `switch` role, as it represents the current state of the widget that the `switch` role is applied to. A value of `true` represents the "on" state; `false` represents the "off" state; a value of `mixed` is not supported by the switch role, and is treated as `false`. - [`aria-readonly`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) attribute - : The `aria-readonly` attribute is supported by the `switch` role. It indicates whether the widget's state is editable by the user. A value of `false` means that the user _can_ change the widget's state; a value of `true` means that the user _cannot_ change the widget's state. The default value is `false`. diff --git a/files/en-us/web/api/blob/bytes/index.md b/files/en-us/web/api/blob/bytes/index.md index a5e88babec60964..5769fb640830227 100644 --- a/files/en-us/web/api/blob/bytes/index.md +++ b/files/en-us/web/api/blob/bytes/index.md @@ -3,10 +3,12 @@ title: "Blob: bytes() method" short-title: bytes() slug: Web/API/Blob/bytes page-type: web-api-instance-method +status: + - experimental browser-compat: api.Blob.bytes --- -{{APIRef("File API")}}{{AvailableInWorkers}} +{{APIRef("File API")}}{{AvailableInWorkers}}{{SeeCompatTable}} The **`bytes()`** method of the {{domxref("Blob")}} interface returns a {{jsxref("Promise")}} that resolves with a {{jsxref("Uint8Array")}} containing the contents of the blob as an array of bytes. diff --git a/files/en-us/web/api/blob/index.md b/files/en-us/web/api/blob/index.md index 96fab3aba343f21..06e3b681fe24ba3 100644 --- a/files/en-us/web/api/blob/index.md +++ b/files/en-us/web/api/blob/index.md @@ -33,7 +33,7 @@ The APIs accepting `Blob` objects are also listed in the {{DOMxRef("File")}} doc - {{DOMxRef("Blob.arrayBuffer()")}} - : Returns a promise that resolves with an {{jsxref("ArrayBuffer")}} containing the entire contents of the `Blob` as binary data. -- {{DOMxRef("Blob.bytes()")}} +- {{DOMxRef("Blob.bytes()")}} {{experimental_inline}} - : Returns a promise that resolves with an {{jsxref("Uint8Array")}} containing the contents of the `Blob`. - {{DOMxRef("Blob.slice()")}} - : Returns a new `Blob` object containing the data in the specified range of bytes of the blob on which it's called. diff --git a/files/en-us/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/en-us/web/api/canvas_api/manipulating_video_using_canvas/index.md index 84a8ac31d5b5107..a265235eb291d8e 100644 --- a/files/en-us/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/en-us/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -146,15 +146,15 @@ When this routine is called, the video element is displaying the most recent fra ![A single frame of the video element. There is a person wearing a black t-shirt. The background-color is yellow.](video.png) -In line 2, that frame of video is copied into the graphics context `ctx1` of the first canvas, specifying as the height and width the values we previously saved to draw the frame at half size. Note that you can pass the video element into the context's `drawImage()` method to draw the current video frame into the context. The result is: +That frame of video is copied into the graphics context `ctx1` of the first canvas, specifying as the height and width the values we previously saved to draw the frame at half size. Note that you can pass the video element into the context's `drawImage()` method to draw the current video frame into the context. The result is: ![A single frame of the video element. There is a person wearing a black t-shirt. The background-color is yellow. This is a smaller version of the picture above.](sourcectx.png) -Line 3 fetches a copy of the raw graphics data for the current frame of video by calling the `getImageData()` method on the first context. This provides raw 32-bit pixel image data we can then manipulate. Line 4 computes the number of pixels in the image by dividing the total size of the frame's image data by four. +Calling the `getImageData()` method on the first context fetches a copy of the raw graphics data for the current frame of video. This provides raw 32-bit pixel image data we can then manipulate. We then compute the number of pixels in the image by dividing the total size of the frame's image data by four. -The `for` loop that begins on line 6 scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from `foo.png`. +The `for` loop scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from `foo.png`. -Every pixel in the frame's image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is entirely transparent. As a result, the final image has the entire green screen area 100% transparent, so that when it's drawn into the destination context in line 13, the result is an overlay onto the static backdrop. +Every pixel in the frame's image data that is found that is within the parameters that are considered to be part of the green screen has its alpha value replaced with a zero, indicating that the pixel is entirely transparent. As a result, the final image has the entire green screen area 100% transparent, so that when it's drawn into the destination context using `ctx2.putImageData`, the result is an overlay onto the static backdrop. The resulting image looks like this: diff --git a/files/en-us/web/api/css_typed_om_api/guide/index.md b/files/en-us/web/api/css_typed_om_api/guide/index.md index d5f7a8505cef8ca..f05e0e721b092fb 100644 --- a/files/en-us/web/api/css_typed_om_api/guide/index.md +++ b/files/en-us/web/api/css_typed_om_api/guide/index.md @@ -67,7 +67,7 @@ In [browsers that support `computedStyleMap()`](/en-US/docs/Web/API/Element/comp {{EmbedLiveSample("Getting_all_the_properties_and_values", 120, 300)}} -Did you realize how many default CSS properties a link had? Update the JavaScript on line 2 to select the {{htmlelement("p")}} rather than the {{htmlelement("a")}}. You'll notice a difference in the [`margin-top`](/en-US/docs/Web/CSS/margin-top) and [`margin-bottom`](/en-US/docs/Web/CSS/margin-bottom) default computed values. +Did you realize how many default CSS properties a link had? Update the first `document.querySelector` call to select the {{htmlelement("p")}} rather than the {{htmlelement("a")}}. You'll notice a difference in the [`margin-top`](/en-US/docs/Web/CSS/margin-top) and [`margin-bottom`](/en-US/docs/Web/CSS/margin-bottom) default computed values. ### .get() method / custom properties diff --git a/files/en-us/web/api/domimplementation/createhtmldocument/index.md b/files/en-us/web/api/domimplementation/createhtmldocument/index.md index 9afb536989a5d7a..b2e4769f93373df 100644 --- a/files/en-us/web/api/domimplementation/createhtmldocument/index.md +++ b/files/en-us/web/api/domimplementation/createhtmldocument/index.md @@ -70,15 +70,15 @@ function makeDocument() { } ``` -The code in lines 4–12 handle creating the new HTML document and inserting some content -into it. Line 4 uses `createHTMLDocument()` to construct a new HTML document -whose {{ HTMLElement("title") }} is `"New Document"`. Lines 5 and 6 create a -new paragraph element with some simple content, and then lines 8–12 handle inserting the -new paragraph into the new document. +The code handles creating the new HTML document and inserting some content +into it. `createHTMLDocument()` constructs a new HTML document +whose {{ HTMLElement("title") }} is `"New Document"`. Then we create a +new paragraph element with some simple content, and then the new paragraph gets inserted +into the new document. -Line 16 pulls the `contentDocument` of the frame; this is the document into +`destDocument` stores the `contentDocument` of the frame; this is the document into which we'll be injecting the new content. The next two lines handle importing the -contents of our new document into the new document's context. Finally, line 20 actually +contents of our new document into the new document's context. Finally, `destDocument.replaceChild` actually replaces the contents of the frame with the new document's contents. [View Live Examples](https://mdn.dev/archives/media/samples/domref/createHTMLDocument.html) diff --git a/files/en-us/web/api/element/innerhtml/index.md b/files/en-us/web/api/element/innerhtml/index.md index 6c21690218d9de3..7a352ea69633eec 100644 --- a/files/en-us/web/api/element/innerhtml/index.md +++ b/files/en-us/web/api/element/innerhtml/index.md @@ -60,7 +60,7 @@ For example, you can erase the entire contents of a document by clearing the con document.body.innerHTML = ""; ``` -This example fetches the document's current HTML markup and replaces the `"<"` characters with the HTML entity `"<"`, thereby essentially converting the HTML into raw text. +This example fetches the document's current HTML markup and replaces the `"<"` characters with the {{glossary("character reference")}} `"<"`, thereby essentially converting the HTML into raw text. This is then wrapped in a {{HTMLElement("pre")}} element. Then the value of `innerHTML` is changed to this new string. As a result, the document contents are replaced with a display of the page's entire source code. 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 ``, `