diff --git a/.vscode/dictionaries/code-entities.txt b/.vscode/dictionaries/code-entities.txt index 5f34fa968a66638..cff9fda4403202d 100644 --- a/.vscode/dictionaries/code-entities.txt +++ b/.vscode/dictionaries/code-entities.txt @@ -139,6 +139,7 @@ congres connectionavailable contentaccessible contentdelete +contentoccluded contentvisibilityautostatechange controlslist cookiechange @@ -575,6 +576,7 @@ ontextformatupdate ontextupdate onuncapturederror onvalidationstatuschange +onvisibilitymaskchange onwebkitmouseforcewillbegin onzoomlevelchange opendocument @@ -790,6 +792,7 @@ testingbot-api texlive texlive-fontsextra textformatupdate +TEXTPATH_SIDETYPE textupdate TEXTUREI thickmathspace @@ -837,6 +840,7 @@ urlsidebar urpmi usedtx useinbandfec +useraction usercontext-content userhash userproximity @@ -860,6 +864,7 @@ viewsource.css VIRTUALENVWRAPPER virtualkeyboardpolicy virtuals +visibilitymaskchange VK_CRSEL VK_EREOF VK_EXSEL diff --git a/.vscode/dictionaries/proper-names.txt b/.vscode/dictionaries/proper-names.txt index 21583cd70213289..6254ecee072fb41 100644 --- a/.vscode/dictionaries/proper-names.txt +++ b/.vscode/dictionaries/proper-names.txt @@ -233,6 +233,7 @@ Giorgio Golightly Googlebot Gordo +Gorman Grahl Grande-Dixence Graywolf9 @@ -620,6 +621,7 @@ Tonisha Transcribear Transfonter Transformiix +Treanor Trekhleb Trint Trish diff --git a/files/en-us/glossary/browser/index.md b/files/en-us/glossary/browser/index.md index ad93f4d9b33f1bd..9a93df36ffa889b 100644 --- a/files/en-us/glossary/browser/index.md +++ b/files/en-us/glossary/browser/index.md @@ -22,7 +22,7 @@ Common browsers include: - Browser download links: - [Apple Safari](https://www.apple.com/safari/) (Safari is not a downloadable browser) - [Google Chrome](https://www.google.com/chrome/) - - [Microsoft Edge](https://www.microsoft.com/en-us/edge) + - [Microsoft Edge](https://explore.microsoft.com/en-us/edge) - [Mozilla Firefox](https://www.firefox.com/en-US/) - [Opera Browser](https://www.opera.com/) - Related glossary terms: diff --git a/files/en-us/glossary/imap/index.md b/files/en-us/glossary/imap/index.md index 15912f1ac6dff77..6f8aa82bc08d3a7 100644 --- a/files/en-us/glossary/imap/index.md +++ b/files/en-us/glossary/imap/index.md @@ -9,7 +9,7 @@ IMAP (Internet Message Access Protocol) is a {{Glossary("protocol")}} used to re Unlike POP3, IMAP allows multiple simultaneous connections to one mailbox. Clients accessing a mailbox can receive information about state changes made from other clients. IMAP also provides a mode for clients to stay connected and receive information on demand. -Mark Crispin initially developed IMAP in 1986 as _Interim Mail Access Protocol_. IMAP4 revision 1 is the current version, defined by [RFC 3501](https://www.rfc-editor.org/info/rfc3501). +Mark Crispin initially developed IMAP in 1986 as _Interim Mail Access Protocol_. IMAP4 revision 1 is the current version, defined by [RFC 3501](https://www.rfc-editor.org/info/rfc3501/). ## See also diff --git a/files/en-us/glossary/microsoft_edge/index.md b/files/en-us/glossary/microsoft_edge/index.md index d60195a045ea00a..167d0bd86ae7494 100644 --- a/files/en-us/glossary/microsoft_edge/index.md +++ b/files/en-us/glossary/microsoft_edge/index.md @@ -14,7 +14,7 @@ Edge used EdgeHTML as its {{Glossary("Engine/Rendering", "rendering engine")}} u ## See also - [Microsoft Edge](https://en.wikipedia.org/wiki/Microsoft_Edge) on Wikipedia -- [Microsoft Edge](https://www.microsoft.com/en-us/edge) on microsoft.com +- [Microsoft Edge](https://explore.microsoft.com/en-us/edge) on microsoft.com - Related glossary terms: - {{Glossary("Browser")}} - {{Glossary("Engine/Rendering", "Rendering engine")}} diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md index 6f50b266ef29eee..89e144a132f1c65 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md @@ -150,7 +150,7 @@ This generates a production-ready application development environment that inclu ## Getting ready to build our Ember project -You'll need a code editor before continuing to interact with your brand new project. If you don't have one configured already, [The Ember Atlas](https://www.notion.so/Editors-Tooling-5da96f0b2baf4ce1bf3fd58e3b60c7f6) has some guides on how to set up various editors. +You'll need a code editor before continuing to interact with your brand new project. If you don't have one configured already, [The Ember Atlas](https://app.notion.com/p/Editors-Tooling-5da96f0b2baf4ce1bf3fd58e3b60c7f6) has some guides on how to set up various editors. ### Installing the shared assets for TodoMVC projects diff --git a/files/en-us/learn_web_development/extensions/server-side/apache_configuration_htaccess/index.md b/files/en-us/learn_web_development/extensions/server-side/apache_configuration_htaccess/index.md index f37cd0f6f1ef25f..c2884c5d8eb6d9d 100644 --- a/files/en-us/learn_web_development/extensions/server-side/apache_configuration_htaccess/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/apache_configuration_htaccess/index.md @@ -94,7 +94,7 @@ To mitigate the possibility of these attacks, you should use the `crossorigin` a ``` -Google Chrome's [Google Fonts troubleshooting guide](https://developers.google.com/fonts/docs/troubleshooting) tells us that, while Google Fonts may send the CORS header with every response, some proxy servers may strip it before the browser can use it to render the font. +Google Chrome's [Google Fonts troubleshooting guide](https://fonts.google.com/faq#troubleshooting) tells us that, while Google Fonts may send the CORS header with every response, some proxy servers may strip it before the browser can use it to render the font. ```apacheconf @@ -288,7 +288,7 @@ The required steps are: ### Forcing HTTPS -These Rewrite rules will redirect from the `http://` insecure version to the `https://` secure version of the URL as described in the [Apache HTTPD wiki](https://cwiki.apache.org/confluence/display/httpd/RewriteHTTPToHTTPS). +These Rewrite rules will redirect from the `http://` insecure version to the `https://` secure version of the URL as described in the [Apache HTTPD wiki](https://cwiki.apache.org/confluence/spaces/HTTPD/pages/115522478/RewriteHTTPToHTTPS). ```apacheconf diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md index 39488d1ee5ede9d..b48760a23bf2d60 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/deployment/index.md @@ -103,7 +103,7 @@ At the bare minimum, you will want to modify the database configuration so that In the following subsections, we outline the most important changes that you should make to your app. > [!NOTE] -> There are other useful tips in the Express docs — see [Production best practices: performance and reliability](https://expressjs.com/en/advanced/best-practice-performance.html) and [Production Best Practices: Security](https://expressjs.com/en/advanced/best-practice-security.html). +> There are other useful tips in the Express docs — see [Production best practices: performance and reliability](https://expressjs.com/en/advanced/best-practice-performance/) and [Production Best Practices: Security](https://expressjs.com/en/advanced/best-practice-security/). ### Database configuration @@ -184,7 +184,7 @@ export DEBUG="author,book" > [!NOTE] > Calls to `debug` can replace logging you might previously have done using `console.log()` or `console.error()`. Replace any `console.log()` calls in your code with logging via the [debug](https://www.npmjs.com/package/debug) module. Turn the logging on and off in your development environment by setting the DEBUG variable and observe the impact this has on logging. -If you need to log website activity you can use a logging library like _Winston_ or _Bunyan_. For more information on this topic see: [Production best practices: performance and reliability](https://expressjs.com/en/advanced/best-practice-performance.html). +If you need to log website activity you can use a logging library like _Winston_ or _Bunyan_. For more information on this topic see: [Production best practices: performance and reliability](https://expressjs.com/en/advanced/best-practice-performance/). ### Use gzip/deflate compression for responses @@ -223,7 +223,7 @@ app.use("/catalog", catalogRouter); // Add catalog routes to middleware chain. ### Use Helmet to protect against well known vulnerabilities -[Helmet](https://www.npmjs.com/package/helmet) is a middleware package. It can set appropriate HTTP headers that help protect your app from well-known web vulnerabilities (see the [docs](https://helmetjs.github.io/) for more information on what headers it sets and vulnerabilities it protects against). +[Helmet](https://www.npmjs.com/package/helmet) is a middleware package. It can set appropriate HTTP headers that help protect your app from well-known web vulnerabilities (see the [docs](https://helmet.js.org/) for more information on what headers it sets and vulnerabilities it protects against). Install this at the root of your project by running the following command: @@ -633,8 +633,8 @@ That's the end of this tutorial on setting up Express apps in production, and al ## See also -- [Production best practices: performance and reliability](https://expressjs.com/en/advanced/best-practice-performance.html) (Express docs) -- [Production Best Practices: Security](https://expressjs.com/en/advanced/best-practice-security.html) (Express docs) +- [Production best practices: performance and reliability](https://expressjs.com/en/advanced/best-practice-performance/) (Express docs) +- [Production Best Practices: Security](https://expressjs.com/en/advanced/best-practice-security/) (Express docs) - Railway Docs - [CLI](https://docs.railway.com/cli) diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md index 8a081d7731e3cad..a26581587ce2a04 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/development_environment/index.md @@ -342,7 +342,7 @@ This example may not look any shorter than the original command, but you can inc ## Installing the Express Application Generator -The [Express Application Generator](https://expressjs.com/en/starter/generator.html) tool generates an Express application "skeleton". Install the generator using npm as shown: +The [Express Application Generator](https://expressjs.com/en/starter/generator/) tool generates an Express application "skeleton". Install the generator using npm as shown: ```bash npm install express-generator -g @@ -443,8 +443,8 @@ In the next article we start working through a tutorial to build a complete web ## See also - [Downloads](https://nodejs.org/en/download) page (nodejs.org) -- [Installing Express](https://expressjs.com/en/starter/installing.html) (expressjs.com) -- [Express Application Generator](https://expressjs.com/en/starter/generator.html) (expressjs.com) +- [Installing Express](https://expressjs.com/en/starter/installing/) (expressjs.com) +- [Express Application Generator](https://expressjs.com/en/starter/generator/) (expressjs.com) - [Using Node.js with Windows subsystem for Linux](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/) (docs.microsoft.com) {{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction", "Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}} diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/home_page/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/home_page/index.md index 76946fe2528067d..6d38a0e56bdf726 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/home_page/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/home_page/index.md @@ -92,7 +92,7 @@ Because the queries for document counts are independent of each other we use [`P The method returns a new promise that we [`await`](/en-US/docs/Web/JavaScript/Reference/Operators/await) for completion (execution pauses within _this function_ at `await`). When all the queries complete, the promise returned by `all()` fulfills, continuing execution of the route handler function, and populating the array with the results of the database queries. -We then call [`res.render()`](https://expressjs.com/en/5x/api.html#res.render), specifying a view (template) named '**index**' and objects mapping the results of the database queries to the view template. +We then call [`res.render()`](https://expressjs.com/en/5x/api/#res.render), specifying a view (template) named '**index**' and objects mapping the results of the database queries to the view template. The data is supplied as key-value pairs, and can be accessed in the template using the key. > [!NOTE] diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/index.md index a3f4de7edb76803..1818393ccd43c90 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/index.md @@ -62,7 +62,7 @@ In our next article, we'll build on our knowledge, creating HTML forms and form ## See also -- [Using Template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs) +- [Using Template engines with Express](https://expressjs.com/en/guide/using-template-engines/) (Express docs) - [Pug](https://pugjs.org/api/getting-started.html) (Pug docs) - [Luxon](https://moment.github.io/luxon/#/) (Luxon docs) diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/template_primer/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/template_primer/index.md index bc39881b71b7040..f140900cd5bde16 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/template_primer/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/displaying_data/template_primer/index.md @@ -9,7 +9,7 @@ A template is a text file defining the _structure_ or layout of an output file, ## Express template choices -Express can be used with many different [template rendering engines](https://expressjs.com/en/guide/using-template-engines.html). In this tutorial we use [Pug](https://pugjs.org/api/getting-started.html) (formerly known as _Jade_) for our templates. This is the most popular Node template language, and describes itself as a "clean, whitespace-sensitive syntax for writing HTML, heavily influenced by [Haml](https://haml.info/)". +Express can be used with many different [template rendering engines](https://expressjs.com/en/guide/using-template-engines/). In this tutorial we use [Pug](https://pugjs.org/api/getting-started.html) (formerly known as _Jade_) for our templates. This is the most popular Node template language, and describes itself as a "clean, whitespace-sensitive syntax for writing HTML, heavily influenced by [Haml](https://haml.info/)". Different template languages use different approaches for defining layout and marking placeholders for data—some use HTML to define the layout while others use different markup formats that can be transpiled to HTML. Pug is of the second type; it uses a _representation_ of HTML where the first word in any line usually represents an HTML element, and indentation on subsequent lines is used to represent nesting. The result is a page definition that translates directly to HTML, but is more concise and arguably easier to read. diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md index 9bc0cc4f1456070..da73e07ec9421b9 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/introduction/index.md @@ -102,7 +102,7 @@ Other common web-development tasks are not directly supported by Node itself. If - Set common web application settings like the port to use for connecting, and the location of templates that are used for rendering the response. - Add additional request processing "middleware" at any point within the request handling pipeline. -While _Express_ itself is fairly minimalist, developers have created compatible middleware packages to address almost any web development problem. There are libraries to work with cookies, sessions, user logins, URL parameters, `POST` data, security headers, and _many_ more. You can find a list of middleware packages maintained by the Express team at [Express Middleware](https://expressjs.com/en/resources/middleware.html) (along with a list of some popular 3rd party packages). +While _Express_ itself is fairly minimalist, developers have created compatible middleware packages to address almost any web development problem. There are libraries to work with cookies, sessions, user logins, URL parameters, `POST` data, security headers, and _many_ more. You can find a list of middleware packages maintained by the Express team at [Express Middleware](https://expressjs.com/en/resources/middleware/) (along with a list of some popular 3rd party packages). > [!NOTE] > This flexibility is a double edged sword. There are middleware packages to address almost any problem or requirement, but working out the right packages to use can sometimes be a challenge. There is also no "right way" to structure an application, and many examples you might find on the Internet are not optimal, or only show a small part of what you need to do in order to develop a web application. @@ -141,7 +141,7 @@ The following sections explain some of the common things you'll see when working ### Helloworld Express -First lets consider the standard Express [Hello World](https://expressjs.com/en/starter/hello-world.html) example (we discuss each part of this below, and in the following sections). +First lets consider the standard Express [Hello World](https://expressjs.com/en/starter/hello-world/) example (we discuss each part of this below, and in the following sections). > [!NOTE] > If you have Node and Express already installed (or if you install them as shown in the [next article](/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment)), you can save this code in a text file called **app.js** and run it in a bash command prompt by calling: @@ -163,9 +163,9 @@ app.listen(port, () => { }); ``` -The first two lines `require()` (import) the express module and create an [Express application](https://expressjs.com/en/5x/api.html#app). This object, which is traditionally named `app`, has methods for routing HTTP requests, configuring middleware, rendering HTML views, registering a template engine, and modifying [application settings](https://expressjs.com/en/5x/api.html#app.settings.table) that control how the application behaves (e.g., the environment mode, whether route definitions are case sensitive, etc.) +The first two lines `require()` (import) the express module and create an [Express application](https://expressjs.com/en/5x/api/#app). This object, which is traditionally named `app`, has methods for routing HTTP requests, configuring middleware, rendering HTML views, registering a template engine, and modifying [application settings](https://expressjs.com/en/5x/api/#app.settings.table) that control how the application behaves (e.g., the environment mode, whether route definitions are case sensitive, etc.) -The middle part of the code (the three lines starting with `app.get`) shows a _route definition_. The `app.get()` method specifies a callback function that will be invoked whenever there is an HTTP `GET` request with a path (`'/'`) relative to the site root. The callback function takes a request and a response object as arguments, and calls [`send()`](https://expressjs.com/en/5x/api.html#res.send) on the response to return the string "Hello World!" +The middle part of the code (the three lines starting with `app.get`) shows a _route definition_. The `app.get()` method specifies a callback function that will be invoked whenever there is an HTTP `GET` request with a path (`'/'`) relative to the site root. The callback function takes a request and a response object as arguments, and calls [`send()`](https://expressjs.com/en/5x/api/#res.send) on the response to return the string "Hello World!" The final block starts up the server on a specified port ('3000') and prints a log comment to the console. With the server running, you could go to `localhost:3000` in your browser to see the example response returned. @@ -173,7 +173,7 @@ The final block starts up the server on a specified port ('3000') and prints a l A module is a JavaScript library/file that you can import into other code using Node's `require()` function. _Express_ itself is a module, as are the middleware and database libraries that we use in our _Express_ applications. -The code below shows how we import a module by name, using the _Express_ framework as an example. First we invoke the `require()` function, specifying the name of the module as a string (`'express'`), and calling the returned object to create an [Express application](https://expressjs.com/en/5x/api.html#app). We can then access the properties and functions of the application object. +The code below shows how we import a module by name, using the _Express_ framework as an example. First we invoke the `require()` function, specifying the name of the module as a string (`'express'`), and calling the returned object to create an [Express application](https://expressjs.com/en/5x/api/#app). We can then access the properties and functions of the application object. ```js const express = require("express"); @@ -268,7 +268,7 @@ app.get("/", (req, res) => { }); ``` -The callback function takes a request and a response object as arguments. In this case, the method calls [`send()`](https://expressjs.com/en/5x/api.html#res.send) on the response to return the string "Hello World!" There are a [number of other response methods](https://expressjs.com/en/guide/routing.html#response-methods) for ending the request/response cycle, for example, you could call [`res.json()`](https://expressjs.com/en/5x/api.html#res.json) to send a JSON response or [`res.sendFile()`](https://expressjs.com/en/5x/api.html#res.sendFile) to send a file. +The callback function takes a request and a response object as arguments. In this case, the method calls [`send()`](https://expressjs.com/en/5x/api/#res.send) on the response to return the string "Hello World!" There are a [number of other response methods](https://expressjs.com/en/guide/routing/#response-methods) for ending the request/response cycle, for example, you could call [`res.json()`](https://expressjs.com/en/5x/api/#res.json) to send a JSON response or [`res.sendFile()`](https://expressjs.com/en/5x/api/#res.sendFile) to send a file. > [!NOTE] > You can use any argument names you like in the callback functions; when the callback is invoked the first argument will always be the request and the second will always be the response. It makes sense to name them such that you can identify the object you're working with in the body of the callback. @@ -288,7 +288,7 @@ app.all("/secret", (req, res, next) => { Routes allow you to match particular patterns of characters in a URL, and extract some values from the URL and pass them as parameters to the route handler (as attributes of the request object passed as a parameter). -Often it is useful to group route handlers for a particular part of a site together and access them using a common route-prefix (e.g., a site with a Wiki might have all wiki-related routes in one file and have them accessed with a route prefix of _/wiki/_). In _Express_ this is achieved by using the [`express.Router`](https://expressjs.com/en/guide/routing.html#express-router) object. For example, we can create our wiki route in a module named **wiki.js**, and then export the `Router` object, as shown below: +Often it is useful to group route handlers for a particular part of a site together and access them using a common route-prefix (e.g., a site with a Wiki might have all wiki-related routes in one file and have them accessed with a route prefix of _/wiki/_). In _Express_ this is achieved by using the [`express.Router`](https://expressjs.com/en/guide/routing/#express-router) object. For example, we can create our wiki route in a module named **wiki.js**, and then export the `Router` object, as shown below: ```js // wiki.js - Wiki route module @@ -331,10 +331,10 @@ Middleware is used extensively in Express apps, for tasks from serving static fi > [!NOTE] > The middleware can perform any operation, execute any code, make changes to the request and response object, and it can _also end the request-response cycle_. If it does not end the cycle then it must call `next()` to pass control to the next middleware function (or the request will be left hanging). -Most apps will use _third-party_ middleware in order to simplify common web development tasks like working with cookies, sessions, user authentication, accessing request `POST` and JSON data, logging, etc. You can find a [list of middleware packages maintained by the Express team](https://expressjs.com/en/resources/middleware.html) (which also includes other popular 3rd party packages). Other Express packages are available on the npm package manager. +Most apps will use _third-party_ middleware in order to simplify common web development tasks like working with cookies, sessions, user authentication, accessing request `POST` and JSON data, logging, etc. You can find a [list of middleware packages maintained by the Express team](https://expressjs.com/en/resources/middleware/) (which also includes other popular 3rd party packages). Other Express packages are available on the npm package manager. To use third party middleware you first need to install it into your app using npm. -For example, to install the [morgan](https://expressjs.com/en/resources/middleware/morgan.html) HTTP request logger middleware, you'd do this: +For example, to install the [morgan](https://expressjs.com/en/resources/middleware/morgan/) HTTP request logger middleware, you'd do this: ```bash npm install morgan @@ -386,11 +386,11 @@ app.listen(3000); > [!NOTE] > Above we declare the middleware function separately and then set it as the callback. In our previous route handler function we declared the callback function when it was used. In JavaScript, either approach is valid. -The Express documentation has a lot more excellent documentation about [using](https://expressjs.com/en/guide/using-middleware.html) and [writing](https://expressjs.com/en/guide/writing-middleware.html) Express middleware. +The Express documentation has a lot more excellent documentation about [using](https://expressjs.com/en/guide/using-middleware/) and [writing](https://expressjs.com/en/guide/writing-middleware/) Express middleware. ### Serving static files -You can use the [express.static](https://expressjs.com/en/5x/api.html#express.static) middleware to serve static files, including your images, CSS and JavaScript (`static()` is the only middleware function that is actually **part** of _Express_). For example, you would use the line below to serve images, CSS files, and JavaScript files from a directory named '**public'** at the same level as where you call node: +You can use the [express.static](https://expressjs.com/en/5x/api/#express.static) middleware to serve static files, including your images, CSS and JavaScript (`static()` is the only middleware function that is actually **part** of _Express_). For example, you would use the line below to serve images, CSS files, and JavaScript files from a directory named '**public'** at the same level as where you call node: ```js app.use(express.static("public")); @@ -412,7 +412,7 @@ app.use(express.static("public")); app.use(express.static("media")); ``` -You can also create a virtual prefix for your static URLs, rather than having the files added to the base URL. For example, here we [specify a mount path](https://expressjs.com/en/5x/api.html#app.use) so that the files are loaded with the prefix "/media": +You can also create a virtual prefix for your static URLs, rather than having the files added to the base URL. For example, here we [specify a mount path](https://expressjs.com/en/5x/api/#app.use) so that the files are loaded with the prefix "/media": ```js app.use("/media", express.static("public")); @@ -427,7 +427,7 @@ http://localhost:3000/media/cry.mp3 ``` > [!NOTE] -> See also [Serving static files in Express](https://expressjs.com/en/starter/static-files.html). +> See also [Serving static files in Express](https://expressjs.com/en/starter/static-files/). ### Handling errors @@ -448,9 +448,9 @@ Express comes with a built-in error handler, which takes care of any remaining e > The stack trace is not included in the production environment. To run it in production mode you need to set the environment variable `NODE_ENV` to `"production"`. > [!NOTE] -> HTTP404 and other "error" status codes are not treated as errors. If you want to handle these, you can add a middleware function to do so. For more information see the [FAQ](https://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses). +> HTTP404 and other "error" status codes are not treated as errors. If you want to handle these, you can add a middleware function to do so. For more information see the [FAQ](https://expressjs.com/en/starter/faq/#how-do-i-handle-404-responses). -For more information see [Error handling](https://expressjs.com/en/guide/error-handling.html) (Express docs). +For more information see [Error handling](https://expressjs.com/en/guide/error-handling/) (Express docs). ### Using databases @@ -487,7 +487,7 @@ run().catch(console.error); Another popular approach is to access your database indirectly, via an Object Relational Mapper ("ORM"). In this approach you define your data as "objects" or "models" and the ORM maps these through to the underlying database format. This approach has the benefit that as a developer you can continue to think in terms of JavaScript objects rather than database semantics, and that there is an obvious place to perform validation and checking of incoming data. We'll talk more about databases in a later article. -For more information see [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs). +For more information see [Database integration](https://expressjs.com/en/guide/database-integration/) (Express docs). ### Rendering data (views) @@ -511,7 +511,7 @@ app.set("views", path.join(__dirname, "views")); app.set("view engine", "some_template_engine_name"); ``` -The appearance of the template will depend on what engine you use. Assuming that you have a template file named "index.\" that contains placeholders for data variables named 'title' and "message", you would call [`Response.render()`](https://expressjs.com/en/5x/api.html#res.render) in a route handler function to create and send the HTML response: +The appearance of the template will depend on what engine you use. Assuming that you have a template file named "index.\" that contains placeholders for data variables named 'title' and "message", you would call [`Response.render()`](https://expressjs.com/en/5x/api/#res.render) in a route handler function to create and send the HTML response: ```js app.get("/", (req, res) => { @@ -519,7 +519,7 @@ app.get("/", (req, res) => { }); ``` -For more information see [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs). +For more information see [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines/) (Express docs). ### File structure @@ -539,13 +539,13 @@ Of course Express is deliberately a very lightweight web application framework, - [Learn Express.js](https://scrimba.com/learn-expressjs-c062las154?via=mdn) from Scrimba [_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) builds on top of the previous link, showing how to start using the Express framework to build server-side websites. - [Modules](https://nodejs.org/api/modules.html#modules_modules) (Node API docs) - [Express](https://expressjs.com/) (home page) -- [Basic routing](https://expressjs.com/en/starter/basic-routing.html) (Express docs) -- [Routing guide](https://expressjs.com/en/guide/routing.html) (Express docs) -- [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs) -- [Using middleware](https://expressjs.com/en/guide/using-middleware.html) (Express docs) -- [Writing middleware for use in Express apps](https://expressjs.com/en/guide/writing-middleware.html) (Express docs) -- [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs) -- [Serving static files in Express](https://expressjs.com/en/starter/static-files.html) (Express docs) -- [Error handling](https://expressjs.com/en/guide/error-handling.html) (Express docs) +- [Basic routing](https://expressjs.com/en/starter/basic-routing/) (Express docs) +- [Routing guide](https://expressjs.com/en/guide/routing/) (Express docs) +- [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines/) (Express docs) +- [Using middleware](https://expressjs.com/en/guide/using-middleware/) (Express docs) +- [Writing middleware for use in Express apps](https://expressjs.com/en/guide/writing-middleware/) (Express docs) +- [Database integration](https://expressjs.com/en/guide/database-integration/) (Express docs) +- [Serving static files in Express](https://expressjs.com/en/starter/static-files/) (Express docs) +- [Error handling](https://expressjs.com/en/guide/error-handling/) (Express docs) {{NextMenu("Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}} diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md index 48e7f6254fe3128..e507d50f0251ee1 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/mongoose/index.md @@ -33,11 +33,11 @@ Express apps can use many different databases, and there are several approaches ### What databases can I use? -_Express_ apps can use any database supported by _Node_ (_Express_ itself doesn't define any specific additional behavior/requirements for database management). There are [many popular options](https://expressjs.com/en/guide/database-integration.html), including PostgreSQL, MySQL, Redis, SQLite, and MongoDB. +_Express_ apps can use any database supported by _Node_ (_Express_ itself doesn't define any specific additional behavior/requirements for database management). There are [many popular options](https://expressjs.com/en/guide/database-integration/), including PostgreSQL, MySQL, Redis, SQLite, and MongoDB. When choosing a database, you should consider things like time-to-productivity/learning curve, performance, ease of replication/backup, cost, community support, etc. While there is no single "best" database, almost any of the popular solutions should be more than acceptable for a small-to-medium-sized site like our Local Library. -For more information on the options see [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs). +For more information on the options see [Database integration](https://expressjs.com/en/guide/database-integration/) (Express docs). ### What is the best way to interact with a database? @@ -889,7 +889,7 @@ Last of all, we tested our models by creating a number of instances (using a sta ## See also -- [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs) +- [Database integration](https://expressjs.com/en/guide/database-integration/) (Express docs) - [Mongoose website](https://mongoosejs.com/) (Mongoose docs) - [Mongoose Guide](https://mongoosejs.com/docs/guide.html) (Mongoose docs) - [Validation](https://mongoosejs.com/docs/validation.html) (Mongoose docs) diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/routes/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/routes/index.md index 1faca60557cb476..c69aeeaf62c3d0d 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/routes/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/routes/index.md @@ -45,13 +45,13 @@ As we've already created the models, the main things we'll need to create are: Ultimately we might have pages to show lists and detail information for books, genres, authors and bookinstances, along with pages to create, update, and delete records. That's a lot to document in one article. Therefore most of this article will concentrate on setting up our routes and controllers to return "dummy" content. We'll extend the controller methods in our subsequent articles to work with model data. -The first section below provides a brief "primer" on how to use the Express [Router](https://expressjs.com/en/5x/api.html#router) middleware. We'll then use that knowledge in the following sections when we set up the LocalLibrary routes. +The first section below provides a brief "primer" on how to use the Express [Router](https://expressjs.com/en/5x/api/#router) middleware. We'll then use that knowledge in the following sections when we set up the LocalLibrary routes. ## Routes primer A route is a section of Express code that associates an [HTTP verb](/en-US/docs/Web/HTTP/Reference/Methods) (`GET`, `POST`, `PUT`, `DELETE`, etc.), a URL path/pattern, and a function that is called to handle that pattern. -There are several ways to create routes. For this tutorial we're going to use the [`express.Router`](https://expressjs.com/en/guide/routing.html#express-router) middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately. +There are several ways to create routes. For this tutorial we're going to use the [`express.Router`](https://expressjs.com/en/guide/routing/#express-router) middleware as it allows us to group the route handlers for a particular part of a site together and access them using a common route-prefix. We'll keep all our library-related routes in a "catalog" module, and, if we add routes for handling user accounts or other functions, we can keep them grouped separately. > [!NOTE] > We discussed Express application routes briefly in our [Express Introduction > Creating route handlers](/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction#creating_route_handlers). Other than providing better support for modularization (as discussed in the first subsection below), using _Router_ is very similar to defining routes directly on the _Express application object_. @@ -115,7 +115,7 @@ The callback takes three arguments (usually named as shown: `req`, `res`, `next` > > The router function above takes a single callback, but you can specify as many callback arguments as you want, or an array of callback functions. Each function is part of the middleware chain, and will be called in the order it is added to the chain (unless a preceding function completes the request). -The callback function here calls [`send()`](https://expressjs.com/en/5x/api.html#res.send) on the response to return the string "About this wiki" when we receive a GET request with the path (`/about`). There are a [number of other response methods](https://expressjs.com/en/guide/routing.html#response-methods) for ending the request/response cycle. For example, you could call [`res.json()`](https://expressjs.com/en/5x/api.html#res.json) to send a JSON response or [`res.sendFile()`](https://expressjs.com/en/5x/api.html#res.sendFile) to send a file. The response method that we'll be using most often as we build up the library is [`render()`](https://expressjs.com/en/5x/api.html#res.render), which creates and returns HTML files using templates and data—we'll talk a lot more about that in a later article! +The callback function here calls [`send()`](https://expressjs.com/en/5x/api/#res.send) on the response to return the string "About this wiki" when we receive a GET request with the path (`/about`). There are a [number of other response methods](https://expressjs.com/en/guide/routing/#response-methods) for ending the request/response cycle. For example, you could call [`res.json()`](https://expressjs.com/en/5x/api/#res.json) to send a JSON response or [`res.sendFile()`](https://expressjs.com/en/5x/api/#res.sendFile) to send a file. The response method that we'll be using most often as we build up the library is [`render()`](https://expressjs.com/en/5x/api/#res.render), which creates and returns HTML files using templates and data—we'll talk a lot more about that in a later article! ### HTTP verbs @@ -214,7 +214,7 @@ If you want to use them, you must escape them with a backslash (`\`). You also can't use the pipe character (`|`) in a regular expression. That's all you need to get started with routes. -If needed, you can find more information in the Express docs: [Basic routing](https://expressjs.com/en/starter/basic-routing.html) and [Routing guide](https://expressjs.com/en/guide/routing.html). The following sections show how we'll set up our routes and controllers for the LocalLibrary. +If needed, you can find more information in the Express docs: [Basic routing](https://expressjs.com/en/starter/basic-routing/) and [Routing guide](https://expressjs.com/en/guide/routing/). The following sections show how we'll set up our routes and controllers for the LocalLibrary. ### Handling errors and exceptions in the route functions @@ -296,7 +296,7 @@ router.get("/about", (req, res, next) => { }); ``` -For more information see [Error handling](https://expressjs.com/en/guide/error-handling.html). +For more information see [Error handling](https://expressjs.com/en/guide/error-handling/). ## Routes needed for the LocalLibrary @@ -715,7 +715,7 @@ router.get("/", (req, res) => { ``` > [!NOTE] -> This is our first use of the [redirect()](https://expressjs.com/en/5x/api.html#res.redirect) response method. This redirects to the specified page, by default sending HTTP status code "302 Found". You can change the status code returned if needed, and supply either absolute or relative paths. +> This is our first use of the [redirect()](https://expressjs.com/en/5x/api/#res.redirect) response method. This redirects to the specified page, by default sending HTTP status code "302 Found". You can change the status code returned if needed, and supply either absolute or relative paths. ### Update app.js @@ -782,7 +782,7 @@ In our next article we'll create a proper welcome page for the site, using views ## See also -- [Basic routing](https://expressjs.com/en/starter/basic-routing.html) (Express docs) -- [Routing guide](https://expressjs.com/en/guide/routing.html) (Express docs) +- [Basic routing](https://expressjs.com/en/starter/basic-routing/) (Express docs) +- [Routing guide](https://expressjs.com/en/guide/routing/) (Express docs) {{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose", "Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}} diff --git a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md index 7a8cde5845372e5..400897ee235cf9b 100644 --- a/files/en-us/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/express_nodejs/skeleton_website/index.md @@ -30,13 +30,13 @@ This second article in our [Express Tutorial](/en-US/docs/Learn_web_development/ ## Overview -This article shows how you can create a "skeleton" website using the [Express Application Generator](https://expressjs.com/en/starter/generator.html) tool, which you can then populate with site-specific routes, views/templates, and database calls. In this case, we'll use the tool to create the framework for our [Local Library website](/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website), to which we'll later add all the other code needed by the site. The process is extremely simple, requiring only that you invoke the generator on the command line with a new project name, optionally also specifying the site's template engine and CSS generator. +This article shows how you can create a "skeleton" website using the [Express Application Generator](https://expressjs.com/en/starter/generator/) tool, which you can then populate with site-specific routes, views/templates, and database calls. In this case, we'll use the tool to create the framework for our [Local Library website](/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website), to which we'll later add all the other code needed by the site. The process is extremely simple, requiring only that you invoke the generator on the command line with a new project name, optionally also specifying the site's template engine and CSS generator. The following sections show you how to call the application generator, and provides a little explanation about the different view/CSS options. We'll also explain how the skeleton website is structured. At the end, we'll show how you can run the website to verify that it works. > [!NOTE] > -> - The _Express Application Generator_ is not the only generator for Express applications, and the generated project is not the only viable way to structure your files and directories. The generated site does however have a modular structure that is easy to extend and understand. For information about a _minimal_ Express application, see [Hello world example](https://expressjs.com/en/starter/hello-world.html) (Express docs). +> - The _Express Application Generator_ is not the only generator for Express applications, and the generated project is not the only viable way to structure your files and directories. The generated site does however have a modular structure that is easy to extend and understand. For information about a _minimal_ Express application, see [Hello world example](https://expressjs.com/en/starter/hello-world/) (Express docs). > - The _Express Application Generator_ declares most variables using `var`. > We have changed most of these to [`const`](/en-US/docs/Web/JavaScript/Reference/Statements/const) (and a few to [`let`](/en-US/docs/Web/JavaScript/Reference/Statements/let)) in the tutorial, because we want to demonstrate modern JavaScript practice. > - This tutorial uses the version of _Express_ and other dependencies that are defined in the **package.json** created by the _Express Application Generator_. @@ -88,7 +88,7 @@ You can also choose a view (template) engine using `--view` and/or a CSS generat The _Express Application Generator_ allows you to configure a number of popular view/templating engines, including [EJS](https://www.npmjs.com/package/ejs), [Hbs](https://github.com/pillarjs/hbs), [Pug](https://pugjs.org/api/getting-started.html) (Jade), [Twig](https://www.npmjs.com/package/twig), and [Vash](https://www.npmjs.com/package/vash), although it chooses Jade by default if you don't specify a view option. Express itself can also support a large number of other templating languages [out of the box](https://github.com/expressjs/express/wiki#template-engines). > [!NOTE] -> If you want to use a template engine that isn't supported by the generator then see [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs) and the documentation for your target view engine. +> If you want to use a template engine that isn't supported by the generator then see [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines/) (Express docs) and the documentation for your target view engine. Generally speaking, you should select a templating engine that delivers all the functionality you need and allows you to be productive sooner — or in other words, in the same way that you choose any other component! Some of the things to consider when comparing template engines: @@ -121,7 +121,7 @@ As with templating engines, you should use the stylesheet engine that will allow ### What database should I use? -The generated code doesn't use/include any databases. _Express_ apps can use any [database mechanism](https://expressjs.com/en/guide/database-integration.html) supported by _Node_ (_Express_ itself doesn't define any specific additional behavior/requirements for database management). +The generated code doesn't use/include any databases. _Express_ apps can use any [database mechanism](https://expressjs.com/en/guide/database-integration/) supported by _Node_ (_Express_ itself doesn't define any specific additional behavior/requirements for database management). We'll discuss how to integrate with a database in a later article. @@ -415,7 +415,7 @@ npm install ### www file -The file **/bin/www** is the application entry point! The very first thing this does is `require()` the "real" application entry point (**app.js**, in the project root) that sets up and returns the [`express()`](https://expressjs.com/en/api.html) application object. +The file **/bin/www** is the application entry point! The very first thing this does is `require()` the "real" application entry point (**app.js**, in the project root) that sets up and returns the [`express()`](https://expressjs.com/en/api/) application object. `require()` is the [CommonJS way](https://nodejs.org/api/modules.html) to import JavaScript code, JSON, and other files into the current file. Here we specify **app.js** module using a relative path and omit the optional (.**js**) file extension. @@ -432,7 +432,7 @@ const app = require("../app"); > [!NOTE] > Node.js 14 and later support ES6 `import` statements for importing JavaScript (ECMAScript) modules. > To use this feature you have to add `"type": "module"` to your Express **package.json** file, all the modules in your application have to use `import` rather than `require()`, and for _relative imports_ you must include the file extension (for more information see the [Node documentation](https://nodejs.org/api/esm.html#introduction)). -> While there are benefits to using `import`, this tutorial uses `require()` in order to match [the Express documentation](https://expressjs.com/en/starter/hello-world.html). +> While there are benefits to using `import`, this tutorial uses `require()` in order to match [the Express documentation](https://expressjs.com/en/starter/hello-world/). The remainder of the code in this file sets up a node HTTP server with `app` set to a specific port (defined in an environment variable or 3000 if the variable isn't defined), and starts listening and reporting server errors and connections. For now you don't really need to know anything else about the code (everything in this file is "boilerplate"), but feel free to review it if you're interested. @@ -481,7 +481,7 @@ app.set("view engine", "pug"); ``` The next set of functions call `app.use()` to add the _middleware_ libraries that we imported above into the request handling chain. -For example, `express.json()` and `express.urlencoded()` are needed to populate [`req.body`](https://expressjs.com/en/api.html#req.body) with the form fields. +For example, `express.json()` and `express.urlencoded()` are needed to populate [`req.body`](https://expressjs.com/en/api/#req.body) with the form fields. After these libraries we also use the `express.static` middleware, which makes _Express_ serve all the static files in the **/public** directory in the project root. ```js @@ -558,7 +558,7 @@ One thing of interest above is that the callback function has the third argument ### Views (templates) -The views (templates) are stored in the **/views** directory (as specified in **app.js**) and are given the file extension **.pug**. The method [`Response.render()`](https://expressjs.com/en/5x/api.html#res.render) is used to render a specified template along with the values of named variables passed in an object, and then send the result as a response. In the code below from **/routes/index.js** you can see how that route renders a response using the template "index" passing the template variable "title". +The views (templates) are stored in the **/views** directory (as specified in **app.js**) and are given the file extension **.pug**. The method [`Response.render()`](https://expressjs.com/en/5x/api/#res.render) is used to render a specified template along with the values of named variables passed in an object, and then send the result as a response. In the code below from **/routes/index.js** you can see how that route renders a response using the template "index" passing the template variable "title". ```js /* GET home page. */ @@ -589,7 +589,7 @@ Next, we'll start modifying the skeleton so that it works as a library website. ## See also -- [Express application generator](https://expressjs.com/en/starter/generator.html) (Express docs) -- [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) (Express docs) +- [Express application generator](https://expressjs.com/en/starter/generator/) (Express docs) +- [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines/) (Express docs) {{PreviousMenuNext("Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose", "Learn_web_development/Extensions/Server-side/Express_Nodejs")}} diff --git a/files/en-us/learn_web_development/extensions/testing/introduction/index.md b/files/en-us/learn_web_development/extensions/testing/introduction/index.md index bba0fb368b460af..3230fce08cd24e7 100644 --- a/files/en-us/learn_web_development/extensions/testing/introduction/index.md +++ b/files/en-us/learn_web_development/extensions/testing/introduction/index.md @@ -137,7 +137,7 @@ If you wish to invest money in testing, there are also commercial tools that can It is often a good idea to test on prerelease versions of browsers; see the following links: - [Firefox Developer Edition](https://www.firefox.com/en-US/channel/desktop/developer/) -- [Microsoft Edge Insider](https://www.microsoft.com/en-us/edge/download/insider) +- [Microsoft Edge Insider](https://explore.microsoft.com/en-us/edge/download/insider) - [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/) - [Chrome Canary](https://www.google.com/chrome/canary/) - [Opera Developer](https://www.opera.com/opera/developer) diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/index.md index cfd5bf00dcbfe68..76400f6f93812fe 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/index.md @@ -19,7 +19,7 @@ This module assumes no prior technical knowledge, beyond basic computer usage. Y If you need to refresh yourself on such basics, we'd recommend the following resources depending on what operating system you are using: -- [Windows help and learning](https://support.microsoft.com/en-us/windows), Microsoft (2024) +- [Windows help and learning](https://support.microsoft.com/en-us/windows/), Microsoft (2024) - [macOS User Guide](https://support.apple.com/guide/mac-help/welcome/mac), Apple (2024) - [Official Ubuntu documentation](https://help.ubuntu.com/), ubuntu.com (2024) diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md index ee987e33ccc5751..a5673790f2e6d80 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/installing_software/index.md @@ -44,11 +44,11 @@ Having modern web browsers available to you is essential for web development so The most common browsers you'll come across are as follows: - Desktop browsers: - - [Chromium]()-based: [Google Chrome](https://www.google.com/chrome/), [Opera](https://www.opera.com/opera), [Brave](https://brave.com/download/), [Microsoft Edge](https://www.microsoft.com/en-us/edge), [Vivaldi](https://vivaldi.com/). + - [Chromium]()-based: [Google Chrome](https://www.google.com/chrome/), [Opera](https://www.opera.com/opera), [Brave](https://brave.com/download/), [Microsoft Edge](https://explore.microsoft.com/en-us/edge), [Vivaldi](https://vivaldi.com/). - [Gecko]()-based: [Mozilla Firefox](https://www.firefox.com/en-US/). - [WebKit](https://en.wikipedia.org/wiki/WebKit)-based: [Apple Safari](https://www.apple.com/safari/). - Mobile/alternative device browsers: - - Chromium-based (Android): [Google Chrome](https://www.google.com/chrome/go-mobile/), [Opera](https://www.opera.com/opera), [Brave](https://brave.com/download/), [Microsoft Edge](https://www.microsoft.com/en-us/edge/mobile), [Samsung Internet](https://www.samsung.com/us/support/owners/app/samsung-internet), [Vivaldi](https://vivaldi.com/android/). + - Chromium-based (Android): [Google Chrome](https://www.google.com/chrome/go-mobile/), [Opera](https://www.opera.com/opera), [Brave](https://brave.com/download/), [Microsoft Edge](https://explore.microsoft.com/en-us/edge/mobile), [Samsung Internet](https://www.samsung.com/us/support/owners/app/samsung-internet), [Vivaldi](https://vivaldi.com/android/). - Gecko-based (Android): [Mozilla Firefox](https://www.firefox.com/en-US/download/android/). - WebKit-based (iOS): [Apple Safari](https://www.apple.com/safari/). > [!NOTE] @@ -96,12 +96,12 @@ We would recommend that you don't install a graphics editor until you need it la There are many free software tools and online services that will probably be good enough for now, for example: - macOS comes with a tool called [Preview](https://support.apple.com/en-gb/guide/preview/welcome/mac). This is mainly used for viewing images and PDFs, but it also has some really useful features for editing images, including resizing, rotating, cropping, annotating, and converting between different file types. -- The built-in Windows [Photos app](https://support.microsoft.com/en-gb/windows/manage-photos-and-videos-with-microsoft-photos-app-c0c6422f-d4cb-2e3d-eb65-7069071b2f9b) comes with many similar features. +- The built-in Windows [Photos app](https://support.microsoft.com/en-us/windows/apps/photos/manage-photos-and-videos-with-microsoft-photos-app) comes with many similar features. - The [tinypng](https://tinypng.com/) website, provides a free service allowing you to compress PNGs, JPEGs, and more. This is a very common task you'll have to do when preparing assets for use on a website. In terms of commercial offerings, [Adobe Photoshop](https://www.adobe.com/products/photoshop.html) has long been the industry standard especially for photo editing, while programs like [Sketch](https://www.sketch.com/) are better suited to icon and UI work. There are also popular newcomers such as [Figma](https://www.figma.com/), [The Affinity Suite](https://www.affinity.studio/), and [Canva](https://www.canva.com/). -Most of the above apps have trials or free modes there are worth exploring. There are also some well-regarded free apps available such as [GIMP](https://www.gimp.org/), [Adobe Express](https://www.adobe.com/express/), and [Paint.NET](https://www.getpaint.net/). +Most of the above apps have trials or free modes there are worth exploring. There are also some well-regarded free apps available such as [GIMP](https://www.gimp.org/), [Adobe Express](https://www.adobe.com/express/), and [Paint.NET](https://paint.net/). ## Version control tools diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md index 7c2b3478ecac027..95877cf54283a82 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/available_text_editors/index.md @@ -408,7 +408,7 @@ Installing a text editor is usually quite straightforward. The method varies bas When you install a new text editor, your OS will probably continue to open text files with its default editor until you change the _[file association](https://en.wikipedia.org/wiki/File_association)._ These instructions will help you specify that your OS should open files in your preferred editor when you double-click them: -- [Windows](https://support.microsoft.com/en-us/windows) +- [Windows](https://support.microsoft.com/en-us/windows/) - [macOS](https://support.apple.com/guide/mac-help/choose-an-app-to-open-a-file-on-mac-mh35597/mac) diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md index c39566779dcc60b..b46d541326bcda4 100644 --- a/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md +++ b/files/en-us/learn_web_development/howto/tools_and_setup/how_much_does_it_cost/index.md @@ -55,7 +55,7 @@ Price does not reliably reflect a text editor's quality or usefulness. You have Your system likely includes an image editor, or viewer: Paint on Windows, Eye of GNOME on Ubuntu, Preview on Mac. Those programs are relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping. -Editors can be free ([GIMP](https://www.gimp.org/), [Paint.NET](https://www.getpaint.net/)), moderately expensive ([PaintShop Pro](https://www.paintshoppro.com/), less than $100), or several hundred dollars ([Adobe Photoshop](https://www.adobe.com/products/photoshop.html)). +Editors can be free ([GIMP](https://www.gimp.org/), [Paint.NET](https://paint.net/)), moderately expensive ([PaintShop Pro](https://www.paintshoppro.com/), less than $100), or several hundred dollars ([Adobe Photoshop](https://www.adobe.com/products/photoshop.html)). You can use any of them, as they will have similar functionality, though some are so comprehensive you'll never use every feature. If at some point you need to exchange projects with other designers, you should find out what tools they're using. Editors can all export finished projects to standard file formats, but each editor saves ongoing projects in its own specialized format. Most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it. Sites like [Pixabay](https://pixabay.com/) provide images under CC0 license, so you can use, edit and publish them even with modification for commercial use. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/publicsuffix/getdomain/index.md b/files/en-us/mozilla/add-ons/webextensions/api/publicsuffix/getdomain/index.md index 0128ff51d178bc6..f407d228a29ce91 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/publicsuffix/getdomain/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/publicsuffix/getdomain/index.md @@ -79,8 +79,8 @@ browser.publicSuffix.getDomain("co.uk", { allowPlainSuffix: true }); Using `allowUnknownSuffix` to handle private or local domains: ```js -browser.publicSuffix.getDomain("mydevice.local", { allowUnknownSuffix: true }); -// "mydevice.local" +browser.publicSuffix.getDomain("my-device.local", { allowUnknownSuffix: true }); +// "my-device.local" browser.publicSuffix.getDomain("host.intranet", { allowUnknownSuffix: true }); // "host.intranet" diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md index 65b4c2adee1333f..d0a25b8f0897ba8 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md @@ -122,7 +122,7 @@ Events have three functions: > `webRequest.onAuthRequired` is only called for HTTP and HTTPS/TLS proxy servers requiring authentication, not for SOCKS proxy servers requiring authentication. - `method` - : `string`. Standard HTTP method (For example, `"GET"` or `"POST"`). -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame that sent the request. Set to `-1` if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforeredirect/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforeredirect/index.md index fdb3e7064355aae..8dc470e76c39d69 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforeredirect/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforeredirect/index.md @@ -75,7 +75,7 @@ Events have three functions: The `originUrl` is often but not always the same as the `documentUrl`. For example, if a page contains an iframe, and the iframe contains a link that loads a new document into the iframe, then the `documentUrl` for the resulting request will be the iframe's parent document, but the `originUrl` will be the URL of the document in the iframe that contained the link. -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md index 0bfd8053d5a4fb3..2f17c39547359c1 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md @@ -92,7 +92,7 @@ Events have three functions: The `originUrl` is often but not always the same as the `documentUrl`. For example, if a page contains an iframe, and the iframe contains a link that loads a new document into the iframe, then the `documentUrl` for the resulting request will be the iframe's parent document, but the `originUrl` will be the URL of the document in the iframe that contained the link. -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforesendheaders/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforesendheaders/index.md index 6aac22651bf6c0c..770114dc036e46e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforesendheaders/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onbeforesendheaders/index.md @@ -102,7 +102,7 @@ Events have three functions: The `originUrl` is often but not always the same as the `documentUrl`. For example, if a page contains an iframe, and the iframe contains a link that loads a new document into the iframe, then the `documentUrl` for the resulting request will be the iframe's parent document, but the `originUrl` will be the URL of the document in the iframe that contained the link. -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/oncompleted/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/oncompleted/index.md index 4476d2afbbf3388..44261ef5b76586d 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/oncompleted/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/oncompleted/index.md @@ -75,7 +75,7 @@ Events have three functions: The `originUrl` is often but not always the same as the `documentUrl`. For example, if a page contains an iframe, and the iframe contains a link that loads a new document into the iframe, then the `documentUrl` for the resulting request will be the iframe's parent document, but the `originUrl` will be the URL of the document in the iframe that contained the link. -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onerroroccurred/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onerroroccurred/index.md index e1d1ba0abd533bd..08fdd2a8f88fdb7 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onerroroccurred/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onerroroccurred/index.md @@ -77,7 +77,7 @@ Events have three functions: The `originUrl` is often but not always the same as the `documentUrl`. For example, if a page contains an iframe, and the iframe contains a link that loads a new document into the iframe, then the `documentUrl` for the resulting request will be the iframe's parent document, but the `originUrl` will be the URL of the document in the iframe that contained the link. -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onheadersreceived/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onheadersreceived/index.md index 9a6c5b9db3395d8..fd1052c6509eb7a 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onheadersreceived/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onheadersreceived/index.md @@ -93,7 +93,7 @@ Events have three functions: The `originUrl` is often but not always the same as the `documentUrl`. For example, if a page contains an iframe, and the iframe contains a link that loads a new document into the iframe, then the `documentUrl` for the resulting request is the iframe's parent document, but the `originUrl` is the URL of the document in the iframe that contained the link. -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame that sent the request. Set to -1 if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onresponsestarted/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onresponsestarted/index.md index 4192c6d88378859..58ebb9321f9fd2e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onresponsestarted/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onresponsestarted/index.md @@ -75,7 +75,7 @@ Events have three functions: The `originUrl` is often but not always the same as the `documentUrl`. For example, if a page contains an iframe, and the iframe contains a link that loads a new document into the iframe, then the `documentUrl` for the resulting request will be the iframe's parent document, but the `originUrl` will be the URL of the document in the iframe that contained the link. -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onsendheaders/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onsendheaders/index.md index de5d984a9d9debf..88510e483c31d60 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onsendheaders/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/onsendheaders/index.md @@ -71,7 +71,7 @@ Events have three functions: The `originUrl` is often but not always the same as the `documentUrl`. For example, if a page contains an iframe, and the iframe contains a link that loads a new document into the iframe, then the `documentUrl` for the resulting request will be the iframe's parent document, but the `originUrl` will be the URL of the document in the iframe that contained the link. -- `parentDocumentId`{{optional_inline}} +- `parentDocumentId` {{optional_inline}} - : `string`. A UUID of the parent document owning the frame. Not set if there is no parent. See the [Work with documentId](/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_documentId) article for more information. - `parentFrameId` - : `integer`. ID of the frame that contains the frame which sent the request. Set to -1 if no parent frame exists. diff --git a/files/en-us/mozilla/add-ons/webextensions/use_the_web_authn_api/index.md b/files/en-us/mozilla/add-ons/webextensions/use_the_web_authn_api/index.md index bf97cfe3ef68509..d338406ce519f71 100644 --- a/files/en-us/mozilla/add-ons/webextensions/use_the_web_authn_api/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/use_the_web_authn_api/index.md @@ -76,8 +76,8 @@ In your extension's `manifest.json` file, declare `host_permissions` for the dom Add a mechanism to enter the registration JSON. In this case, a pop-up; you could also use an extension page. This example uses a simple `popup.html` with a `textarea` for the JSON input and two buttons: one for registration and one for authentication. ```html - - + + WebAuthn Extension diff --git a/files/en-us/web/api/client/url/index.md b/files/en-us/web/api/client/url/index.md index 72ba1dddfe56f46..bd378cb5f6bb3c8 100644 --- a/files/en-us/web/api/client/url/index.md +++ b/files/en-us/web/api/client/url/index.md @@ -10,7 +10,7 @@ browser-compat: api.Client.url The **`url`** read-only property of the {{domxref("Client")}} interface returns the URL of the current service worker client. -Note that the {{domxref("Client.url")}} property is not updated unless a new page is actually loaded. This means that it will not be updated if the user navigates within the same page using a URL fragment, or if a {{glossary("SPA", "single-page app (SPA)")}} intercepts a navigation event (for example, using the [Navigation API](/en-US/docs/Web/API/Navigation_API)) and updates the page content using client-side code. +Note that the `url` property is not updated unless a new page is actually loaded. This means that it will not be updated if the user navigates within the same page using a URL fragment, or if a {{glossary("SPA", "single-page app (SPA)")}} intercepts a navigation event (for example, using the [Navigation API](/en-US/docs/Web/API/Navigation_API)) and updates the page content using client-side code. ## Value diff --git a/files/en-us/web/api/element/attachshadow/index.md b/files/en-us/web/api/element/attachshadow/index.md index eb570a6f3c85e9b..59d676f965516eb 100644 --- a/files/en-us/web/api/element/attachshadow/index.md +++ b/files/en-us/web/api/element/attachshadow/index.md @@ -225,7 +225,7 @@ class MyArticle extends HTMLElement { constructor() { super(); // Attach the shadow root - this.attachShadow({ mode: "open" /*, slotAssignment: "named"*/ }); + this.attachShadow({ mode: "open" /* , slotAssignment: "named" */ }); } connectedCallback() { diff --git a/files/en-us/web/api/element/scroll/index.md b/files/en-us/web/api/element/scroll/index.md index 103058522041cd2..65a9c14fe015fb7 100644 --- a/files/en-us/web/api/element/scroll/index.md +++ b/files/en-us/web/api/element/scroll/index.md @@ -74,9 +74,9 @@ Our HTML includes a {{htmlelement("section")}} element containing several paragr ```html
- - - + + +
...
@@ -152,7 +152,7 @@ function isInterrupted(interrupted) { } ``` -When the button is clicked, we immediately apply the `fade-out` class to the toolbar, causing it to fade out. We then run `scroll(0, 1000)` on the `
` to scroll its content down 1000 pixels, `await`ing its promise resolution as we do so and storing the `result` in a constant. When the promise has resolved, we call `isInterrupted()` to report that the scroll operation has finished and whether it was interrupted. Finally, we apply the `fade-in` class to the toolbar, causing it to fade back in again. +When the button is clicked, we immediately apply the `fade-out` class to the toolbar, causing it to fade out. We then run `scroll(0, 1000)` on the `
` to scroll its content down 1000 pixels, awaiting its promise resolution as we do so and storing the `result` in a constant. When the promise has resolved, we call `isInterrupted()` to report that the scroll operation has finished and whether it was interrupted. Finally, we apply the `fade-in` class to the toolbar, causing it to fade back in again. ```js scrollBtn.addEventListener("click", async () => { diff --git a/files/en-us/web/api/element/scrollby/index.md b/files/en-us/web/api/element/scrollby/index.md index 5f63823eecef814..cd77f6ac0f7d673 100644 --- a/files/en-us/web/api/element/scrollby/index.md +++ b/files/en-us/web/api/element/scrollby/index.md @@ -74,9 +74,9 @@ Our HTML includes a {{htmlelement("section")}} element containing several paragr ```html
- - - + + +
...
@@ -136,7 +136,7 @@ The rest of the CSS is not shown, for brevity. We start by grabbing references to the ` - - - + + +
@@ -229,7 +220,7 @@ The rest of the CSS is not shown, for brevity. We start by grabbing references to the ` - - - + + +
...
@@ -137,7 +137,7 @@ The rest of the CSS is not shown, for brevity. We start by grabbing references to the `

- Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore - bespoke. + Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et + mollis dolor.

``` diff --git a/files/en-us/web/api/navigator/getinstalledrelatedapps/index.md b/files/en-us/web/api/navigator/getinstalledrelatedapps/index.md index 34e6d11780e35ff..8ff59d6bcce27a9 100644 --- a/files/en-us/web/api/navigator/getinstalledrelatedapps/index.md +++ b/files/en-us/web/api/navigator/getinstalledrelatedapps/index.md @@ -59,7 +59,7 @@ A {{JSxRef("Promise")}} that fulfills with an array of objects representing any - `"play"`: A [Google Play Store](https://play.google.com/store/games) app. - `"chromeos_play"`: A [ChromeOS Play](https://support.google.com/googleplay/answer/7021273) app. - `"webapp"`: A [Progressive Web App](/en-US/docs/Web/Progressive_web_apps). - - `"windows"`: A [Windows Store](https://apps.microsoft.com/?rtc=1&hl=en-us&gl=us) app. + - `"windows"`: A [Windows Store](https://apps.microsoft.com/?rtc=1&hl=en-US&gl=US) app. - `"f-droid"`: An [F-Droid](https://f-droid.org/) app. - `"amazon"`: An [Amazon App Store](https://www.amazon.com/gp/browse.html?node=2350149011) app. - `url` {{optional_inline}} diff --git a/files/en-us/web/api/request/isreloadnavigation/index.md b/files/en-us/web/api/request/isreloadnavigation/index.md index 3f9d210e204c3a1..84eb2e4e9a06686 100644 --- a/files/en-us/web/api/request/isreloadnavigation/index.md +++ b/files/en-us/web/api/request/isreloadnavigation/index.md @@ -12,7 +12,7 @@ browser-compat: api.Request.isReloadNavigation The **`isReloadNavigation`** read-only property of the {{domxref("Request")}} interface is a boolean indicating whether the request is a user-triggered reload. -A user-triggered reload can be triggered via a browser control, such as pressing Cmd/Ctrl + R or clicking the browser's reload button, or programmaically (for example, by calling {{domxref("Location.reload()")}}, {{domxref("History.go()", "History.go(0)")}}, or {{domxref("Navigation.reload()")}}). +A user-triggered reload can be triggered via a browser control, such as pressing Cmd/Ctrl + R or clicking the browser's reload button, or programmatically (for example, by calling {{domxref("Location.reload()")}}, {{domxref("History.go()", "History.go(0)")}}, or {{domxref("Navigation.reload()")}}). This property is primarily used within service worker {{domxref("ServiceWorkerGlobalScope.fetch_event", "fetch")}} event handlers to respond appropriately to reload requests versus non-reload requests. For example, a reload request indicates that the user expects current data, so it should prefer content from the server over that from a cache. @@ -35,17 +35,13 @@ If the navigation is not a reload navigation, we try retrieving the page from th self.addEventListener("fetch", (event) => { if (event.request.mode === "navigate" && event.request.isReloadNavigation) { event.respondWith( - fetch(event.request) - .then((response) => { - return response; - }) - .catch(() => caches.match(event.request)), + fetch(event.request).catch(() => caches.match(event.request)), ); } else { event.respondWith( - caches.match(event.request).then((cached) => { - return cached || fetch(event.request); - }), + caches + .match(event.request) + .then((cached) => cached || fetch(event.request)), ); } }); diff --git a/files/en-us/web/api/svganimatedenumeration/index.md b/files/en-us/web/api/svganimatedenumeration/index.md index b5eec5c8c924bf2..a29b360b215b065 100644 --- a/files/en-us/web/api/svganimatedenumeration/index.md +++ b/files/en-us/web/api/svganimatedenumeration/index.md @@ -17,7 +17,7 @@ The allowed values of its properties depend on the associated attribute. - {{domxref("SVGAnimatedEnumeration.baseVal", "baseVal")}} - : An integer that is the base value of the given attribute before applying any animations. - {{domxref("SVGAnimatedEnumeration.animVal", "animVal")}} {{ReadOnlyInline}} - - : This is the same as [`baseVal`](#baseval) in SVG 2. + - : This is the same as [`baseVal`](/en-US/docs/Web/API/SVGAnimatedEnumeration/baseVal) in SVG 2. ## Instance methods diff --git a/files/en-us/web/api/svgtextpathelement/side/index.md b/files/en-us/web/api/svgtextpathelement/side/index.md index f5aa37d10a3f935..16bfc3b4d981590 100644 --- a/files/en-us/web/api/svgtextpathelement/side/index.md +++ b/files/en-us/web/api/svgtextpathelement/side/index.md @@ -178,5 +178,4 @@ Toggle the button to move the text from one side to the other. ## See also -- {{domxref("SVGTextPathElement.side")}} - [`SVGTextPathElement` method types](/en-US/docs/Web/API/SVGTextPathElement#static_properties) diff --git a/files/en-us/web/api/view_transition_api/using_element-scoped/index.md b/files/en-us/web/api/view_transition_api/using_element-scoped/index.md index d2967998a6d7e02..a1c3578bbaab94f 100644 --- a/files/en-us/web/api/view_transition_api/using_element-scoped/index.md +++ b/files/en-us/web/api/view_transition_api/using_element-scoped/index.md @@ -41,8 +41,8 @@ The markup includes a {{htmlelement("ul")}} list of links between two {{htmlelem ```html live-sample___basic-element-scoped

- I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea narwhal - asymmetrical. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. + Set sit amet ipsum mauris.

    @@ -53,8 +53,8 @@ The markup includes a {{htmlelement("ul")}} list of links between two {{htmlelem

- Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore - bespoke. + Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et + mollis dolor.

``` @@ -196,7 +196,7 @@ function handleClick(e) { {{embedlivesample("basic-element-scoped", "100%", "520")}} -Click/activate the links to see the view tranasition on each one. +Click/activate the links to see the view transition on each one. Each `` element has its own view transition, scoped just to that element. The rest of the page stays interactive while a view transition is ongoing, so you can run multiple view transitions at the same time. In addition, the transitioning elements stay below the overlapping generated content positioned above them. @@ -244,25 +244,25 @@ The HTML is similar to the previous example, except that the central element is ```html live-sample___element-scoped-clipping

- I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea narwhal - asymmetrical. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. + Set sit amet ipsum mauris.

- I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea - narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park. - Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free - poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level - jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor - lumber before they sold out dreamcatcher single-origin coffee. + Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec + et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae + augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec + ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit + amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis + felis, pulvinar a semper sed, adipiscing id dolor.

- Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore - bespoke. + Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et + mollis dolor.

``` @@ -340,8 +340,8 @@ The script defines a `content` array containing two different strings to swap th ```js hidden live-sample___element-scoped-clipping const content = [ - "I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon eanarwhal asymmetrical. Af health goth shaman in slow-carb godard echopark. Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor lumber before they sold out dreamcatcher single-origin coffee.", - "Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon. Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie artisan. Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic photo booth occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh occaecat umami four loko adaptogen taiyaki truffaut hexagon neutral milk hotel.", + "Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.", + "Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum.", ]; const section = document.querySelector("section"); @@ -350,7 +350,7 @@ const btn = document.querySelector("button"); ``` ```js -const content = ["I'm baby xOXO ...", "Kombucha laborum ..."]; +const content = ["Maecenas congue ligula ...", "Nam vulputate diam ..."]; const section = document.querySelector("section"); const para = document.querySelector("section p"); @@ -398,8 +398,8 @@ The HTML is the same as for the [first example](#basic_element-scoped_example), ```html hidden live-sample___element-scoped-nested

- I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea narwhal - asymmetrical. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. + Set sit amet ipsum mauris.

    @@ -417,8 +417,8 @@ The HTML is the same as for the [first example](#basic_element-scoped_example),

- Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore - bespoke. + Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et + mollis dolor.

``` diff --git a/files/en-us/web/api/websockets_api/index.md b/files/en-us/web/api/websockets_api/index.md index c59b4ca03417366..66321f72426c7e5 100644 --- a/files/en-us/web/api/websockets_api/index.md +++ b/files/en-us/web/api/websockets_api/index.md @@ -78,7 +78,7 @@ The HTTP headers are used in the [WebSocket handshake](/en-US/docs/Web/API/WebSo - [WebSocket King](https://websocketking.com/): A client tool to help develop, test and work with WebSocket servers. - [PHP WebSocket Server](https://github.com/napengam/phpWebSocketServer): Server written in PHP to handle connections via websockets `wss://` or `ws://` and normal sockets over `ssl://`, `tcp://` - [Django Channels](https://channels.readthedocs.io/en/stable/index.html): Django library that adds support for WebSockets (and other protocols that require long running asynchronous connections). -- [(Phoenix) Channels](https://hexdocs.pm/phoenix/channels.html): Scalable real-time communication using WebSocket in Elixir Phoenix framework. +- [(Phoenix) Channels](https://phoenix.hexdocs.pm/channels.html): Scalable real-time communication using WebSocket in Elixir Phoenix framework. - [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view): Real-time interactive web experiences through WebSocket in Elixir Phoenix framework. - [Flask-SocketIO](https://flask-socketio.readthedocs.io/en/latest/): gives Flask applications access to low latency bi-directional communications between the clients and the server. - [Gorilla WebSocket](https://pkg.go.dev/github.com/gorilla/websocket): Gorilla WebSocket is a [Go](https://go.dev/) implementation of the WebSocket protocol. diff --git a/files/en-us/web/api/window/scroll/index.md b/files/en-us/web/api/window/scroll/index.md index 3de31be4045d5e2..577c91def628f11 100644 --- a/files/en-us/web/api/window/scroll/index.md +++ b/files/en-us/web/api/window/scroll/index.md @@ -74,8 +74,8 @@ Our HTML includes several paragraphs of content and a {{htmlelement("div")}} ele ```html
- - + +

...

@@ -149,7 +149,7 @@ function isInterrupted(interrupted) { } ``` -When the button is clicked, we immediately apply the `fade-out` class to the toolbar, causing it to fade out. We then run `scroll(0, 1000)` on the window to scroll its content down 1000 pixels, `await`ing its promise resolution as we do so and storing the `result` in a constant. When the promise has resolved, we call `isInterrupted()` to report that the scroll operation has finished and whether it was interrupted. Finally, we apply the `fade-in` class to the toolbar, causing it to fade back in again. +When the button is clicked, we immediately apply the `fade-out` class to the toolbar, causing it to fade out. We then run `scroll(0, 1000)` on the window to scroll its content down 1000 pixels, awaiting its promise resolution as we do so and storing the `result` in a constant. When the promise has resolved, we call `isInterrupted()` to report that the scroll operation has finished and whether it was interrupted. Finally, we apply the `fade-in` class to the toolbar, causing it to fade back in again. ```js scrollBtn.addEventListener("click", async () => { diff --git a/files/en-us/web/api/window/scrollby/index.md b/files/en-us/web/api/window/scrollby/index.md index ed900ce8702b203..ec4ed8fd1575e5c 100644 --- a/files/en-us/web/api/window/scrollby/index.md +++ b/files/en-us/web/api/window/scrollby/index.md @@ -81,8 +81,8 @@ Our HTML includes several paragraphs of content and a {{htmlelement("div")}} ele ```html
- - + +

...

@@ -141,7 +141,7 @@ The rest of the CSS is not shown, for brevity. We start by grabbing references to the ` - - + +

...

@@ -133,7 +133,7 @@ The rest of the CSS is not shown, for brevity. We start by grabbing references to the `
``` diff --git a/files/en-us/web/css/reference/properties/container-name/index.md b/files/en-us/web/css/reference/properties/container-name/index.md index f9bfa0dcd773c6b..f337b3ce2c53402 100644 --- a/files/en-us/web/css/reference/properties/container-name/index.md +++ b/files/en-us/web/css/reference/properties/container-name/index.md @@ -58,7 +58,7 @@ With no name specified, a container query will apply styles to elements based on When a containment context is given a name, it can be specifically targeted by setting that name on a {{Cssxref("@container")}} at-rule. -It is possible to create a query container by assigning a {{cssxref("container-name")}} to an element, and then query only the existence of that name in the associated `@container` at-rule, with no query expression specified. These so-called [**name-only container queries**](/en-US/docs/Web/CSS/Guides/Containment/Container_queries#name-only_container_queries) enable selectively applying styles to elements based only on whether they have an ancestor with a specific `container-name` set. +It is possible to create a query container by assigning a `container-name` to an element, and then query only the existence of that name in the associated `@container` at-rule, with no query expression specified. These so-called [**name-only container queries**](/en-US/docs/Web/CSS/Guides/Containment/Container_queries#name-only_container_queries) enable selectively applying styles to elements based only on whether they have an ancestor with a specific `container-name` set. ## Examples diff --git a/files/en-us/web/css/reference/properties/display/index.md b/files/en-us/web/css/reference/properties/display/index.md index cfb2ed2c84a5e12..8e29eceeb7a7a9c 100644 --- a/files/en-us/web/css/reference/properties/display/index.md +++ b/files/en-us/web/css/reference/properties/display/index.md @@ -352,7 +352,7 @@ Current implementations in some browsers will remove from the [accessibility tre In some browsers, changing the `display` value of a {{HTMLElement("table")}} element to `block`, `grid`, or `flex` will alter its representation in the [accessibility tree](/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis). This will cause the table to no longer be announced properly by screen reading technology. -- [Hidden content for better a11y | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/) +- [Hidden content for better a11y | Go Make Things](https://gomakethings.com/articles/hidden-content-for-better-a11y/) - [MDN Understanding WCAG, Guideline 1.3 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways) - [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) diff --git a/files/en-us/web/css/reference/properties/font/index.md b/files/en-us/web/css/reference/properties/font/index.md index 90761bb68a5544f..b1e45b0396bb879 100644 --- a/files/en-us/web/css/reference/properties/font/index.md +++ b/files/en-us/web/css/reference/properties/font/index.md @@ -39,7 +39,7 @@ font: caption;
Prejudices, it is well known, are most difficult to eradicate from the heart - whose soil has never been loosened or fertilised by education: they grow + whose soil has never been loosened or fertilized by education: they grow there, firm as weeds among stones.
@@ -290,7 +290,7 @@ As the URL in our HTML link is not good practice, we include a script that preve ```js const aElem = document.querySelector("a"); -aElem.addEventListener("click", function (e) { +aElem.addEventListener("click", (e) => { e.preventDefault(); return false; }); diff --git a/files/en-us/web/css/reference/properties/gap/index.md b/files/en-us/web/css/reference/properties/gap/index.md index f8a92aa69762b68..b57e45dcd8ce863 100644 --- a/files/en-us/web/css/reference/properties/gap/index.md +++ b/files/en-us/web/css/reference/properties/gap/index.md @@ -101,7 +101,7 @@ gap: unset; ### Values - `normal` - - A value of `1em` on multi-column containers and `0` in all other contexts. + - : A value of `1em` on multi-column containers and `0` in all other contexts. - {{CSSxRef("<length>")}} - : The size of the gap as a non-negative {{CSSxRef("<length>")}} value. - {{CSSxRef("<percentage>")}} diff --git a/files/en-us/web/css/reference/properties/row-rule-visibility-items/index.md b/files/en-us/web/css/reference/properties/row-rule-visibility-items/index.md index 3f9c890a429270a..230df16ba3b6385 100644 --- a/files/en-us/web/css/reference/properties/row-rule-visibility-items/index.md +++ b/files/en-us/web/css/reference/properties/row-rule-visibility-items/index.md @@ -38,7 +38,7 @@ row-rule-visibility-items: normal;

Two fish

Red fish

Blue fish

- -- Dr. Seuss + -- Dr. Seuss
``` @@ -92,7 +92,7 @@ row-rule-visibility-items: unset; The `row-rule-visibility-items` property defines whether, in [multi-column](/en-US/docs/Web/CSS/Guides/Multicol_layout) and [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) containers with more than one row, row rule segments are painted in the gaps between two adjacent areas if one or both of the areas are empty. -The `row-rule-visibility-items` and {{cssxref("row-rule-visibility-items")}} properties can both be set to the same values using the {{cssxref("rule-visibility-items")}} shorthand. +The `row-rule-visibility-items` and {{cssxref("column-rule-visibility-items")}} properties can both be set to the same values using the {{cssxref("rule-visibility-items")}} shorthand. ## Formal definition diff --git a/files/en-us/web/css/reference/properties/rule-visibility-items/index.md b/files/en-us/web/css/reference/properties/rule-visibility-items/index.md index 006850723bd17c1..684fc73d600f0ae 100644 --- a/files/en-us/web/css/reference/properties/rule-visibility-items/index.md +++ b/files/en-us/web/css/reference/properties/rule-visibility-items/index.md @@ -45,7 +45,7 @@ rule-visibility-items: normal;

Two fish

Red fish

Blue fish

- -- Dr. Seuss + -- Dr. Seuss ``` diff --git a/files/en-us/web/css/reference/properties/view-transition-scope/index.md b/files/en-us/web/css/reference/properties/view-transition-scope/index.md index 82b06bf4101d01f..9e27a84f091e14a 100644 --- a/files/en-us/web/css/reference/properties/view-transition-scope/index.md +++ b/files/en-us/web/css/reference/properties/view-transition-scope/index.md @@ -162,7 +162,7 @@ function handleClick(e) { Click the "Update DOM" button to see the view transition. Now try the following: 1. Inspect one of the `
` elements. -2. In the Styles panel in your browser's developer tools, uncheck the `view-transition-scope: all;` declaration to unapply it. +2. In the Styles panel in your browser's developer tools, uncheck the `view-transition-scope: all;` declaration to disable it. 3. Now switch to the JavaScript Console. 4. Click the "Update DOM" button again. diff --git a/files/en-us/web/css/reference/selectors/_colon_empty/index.md b/files/en-us/web/css/reference/selectors/_colon_empty/index.md index f11065976f509bf..db15fe62cb4daa7 100644 --- a/files/en-us/web/css/reference/selectors/_colon_empty/index.md +++ b/files/en-us/web/css/reference/selectors/_colon_empty/index.md @@ -44,10 +44,10 @@ div:empty { Assistive technology such as screen readers cannot parse interactive content that is empty. All interactive content must have an accessible name, which is created by providing a text value for the interactive control's parent element ([anchors](/en-US/docs/Web/HTML/Reference/Elements/a), [buttons](/en-US/docs/Web/HTML/Reference/Elements/button), etc.). Accessible names expose the interactive control to the [accessibility tree](/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility#accessibility_apis), an API that communicates information useful for assistive technologies. -The text that provides the interactive control's accessible name can be hidden using [a combination of properties](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) that remove it visually from the screen but keep it parsable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose. +The text that provides the interactive control's accessible name can be hidden using [a combination of properties](https://gomakethings.com/articles/hidden-content-for-better-a11y/#hiding-the-link) that remove it visually from the screen but keep it parsable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose. - [What is an accessible name? | Vispero](https://vispero.com/resources/what-is-an-accessible-name/) -- [Hidden content for better a11y | Go Make Things](https://gomakethings.com/hidden-content-for-better-a11y/) +- [Hidden content for better a11y | Go Make Things](https://gomakethings.com/articles/hidden-content-for-better-a11y/) - [MDN Understanding WCAG, Guideline 2.4 explanations](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are) - [Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html) diff --git a/files/en-us/web/css/reference/values/color_value/alpha/index.md b/files/en-us/web/css/reference/values/color_value/alpha/index.md index ea3d914fa9f42be..e056a9fc85b45ac 100644 --- a/files/en-us/web/css/reference/values/color_value/alpha/index.md +++ b/files/en-us/web/css/reference/values/color_value/alpha/index.md @@ -14,10 +14,10 @@ The **`alpha()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/Refe ```css /* Replace alpha with a fixed value */ alpha(from red / 50%) -alpha(from var(--mycolor) / 80%) +alpha(from var(--my-color) / 80%) /* Derive alpha relative to the origin color's alpha */ -alpha(from var(--mycolor) / calc(alpha * 0.5)) +alpha(from var(--my-color) / calc(alpha * 0.5)) ``` ### Parameters @@ -55,18 +55,18 @@ In this example, we specify two colors. The second color is defined by passing t ```css live-sample___replace-alpha :root { - --mycolor: oklch(60% 0.25 315 / 0.3); + --my-color: oklch(60% 0.25 315 / 0.3); /* Same color, but with alpha set to 80% */ - --mycolor-80: alpha(from var(--mycolor) / 80%); + --my-color-80: alpha(from var(--my-color) / 80%); } .box1 { - background-color: var(--mycolor); + background-color: var(--my-color); } .box2 { - background-color: var(--mycolor-80); + background-color: var(--my-color-80); } ``` @@ -100,18 +100,18 @@ This example is very similar to the previous one, except that this time the alph ```css live-sample___derive-alpha :root { - --mycolor: oklch(60% 0.25 315 / 0.8); + --my-color: oklch(60% 0.25 315 / 0.8); - /* Half the opacity of --mycolor */ - --mycolor-half-opacity: alpha(from var(--mycolor) / calc(alpha * 0.5)); + /* Half the opacity of --my-color */ + --my-color-half-opacity: alpha(from var(--my-color) / calc(alpha * 0.5)); } .box1 { - background-color: var(--mycolor); + background-color: var(--my-color); } .box2 { - background-color: var(--mycolor-half-opacity); + background-color: var(--my-color-half-opacity); } ``` diff --git a/files/en-us/web/html/reference/elements/meta/name/text-scale/index.md b/files/en-us/web/html/reference/elements/meta/name/text-scale/index.md index 450107d177d03f3..2d0813b69c2db42 100644 --- a/files/en-us/web/html/reference/elements/meta/name/text-scale/index.md +++ b/files/en-us/web/html/reference/elements/meta/name/text-scale/index.md @@ -153,7 +153,7 @@ Like the previous example, our markup again includes the ` diff --git a/files/en-us/web/http/reference/headers/x-frame-options/index.md b/files/en-us/web/http/reference/headers/x-frame-options/index.md index d54c4b838725f8b..6d0d0df2209cb52 100644 --- a/files/en-us/web/http/reference/headers/x-frame-options/index.md +++ b/files/en-us/web/http/reference/headers/x-frame-options/index.md @@ -106,7 +106,7 @@ http-response set-header X-Frame-Options SAMEORIGIN ### Configuring Express -To set `X-Frame-Options` to `SAMEORIGIN` using [Helmet](https://helmetjs.github.io/) add the following to your server configuration: +To set `X-Frame-Options` to `SAMEORIGIN` using [Helmet](https://helmet.js.org/) add the following to your server configuration: ```js import helmet from "helmet"; diff --git a/files/en-us/web/javascript/guide/introduction/index.md b/files/en-us/web/javascript/guide/introduction/index.md index 6807eaf4ad44bf5..82be30d52d93daf 100644 --- a/files/en-us/web/javascript/guide/introduction/index.md +++ b/files/en-us/web/javascript/guide/introduction/index.md @@ -72,7 +72,7 @@ The JavaScript documentation describes aspects of the language that are appropri ## Getting started with JavaScript -To get started with JavaScript, all you need is a modern web browser. Recent versions of [Firefox](https://www.firefox.com/en-US/), [Chrome](https://www.google.com/chrome/index.html), [Microsoft Edge](https://www.microsoft.com/en-us/edge), and [Safari](https://www.apple.com/safari/) all support the features discussed in this guide. +To get started with JavaScript, all you need is a modern web browser. Recent versions of [Firefox](https://www.firefox.com/en-US/), [Chrome](https://www.google.com/chrome/index.html), [Microsoft Edge](https://explore.microsoft.com/en-us/edge), and [Safari](https://www.apple.com/safari/) all support the features discussed in this guide. A very useful tool for exploring JavaScript is the JavaScript Console (sometimes called the Web Console, or just the console): this is a tool which enables you to enter JavaScript and run it in the current page. diff --git a/files/en-us/web/javascript/reference/global_objects/promise/index.md b/files/en-us/web/javascript/reference/global_objects/promise/index.md index 4eaacb49093ffdc..0b335ae6fbec9ba 100644 --- a/files/en-us/web/javascript/reference/global_objects/promise/index.md +++ b/files/en-us/web/javascript/reference/global_objects/promise/index.md @@ -154,7 +154,7 @@ const thenable = { Promise.resolve(thenable); // A promise fulfilled with 42 ``` -The `then()` method is responsible for scheduling the execution of the provided `onFulfilled` and `onRejected` callbacks. Its semantics, including error handling and asynchronicity, are precisely defined in the [Promises/A+ specification](https://promisesaplus.com/), and we shall not repeat them here. It's very rare that you need to implement a thenable yourself; even if you are not using native promises, you would probably be using a Promise library such as [Bluebird](http://bluebirdjs.com/). +The `then()` method is responsible for scheduling the execution of the provided `onFulfilled` and `onRejected` callbacks. Its semantics, including error handling and asynchronicity, are precisely defined in the [Promises/A+ specification](https://promisesaplus.com/), and we shall not repeat them here. It's very rare that you need to implement a thenable yourself; even if you are not using native promises, you would probably be using a Promise library such as [Bluebird](https://www.npmjs.com/package/bluebird). ### Promise concurrency diff --git a/files/en-us/web/javascript/reference/operators/import.meta/resolve/index.md b/files/en-us/web/javascript/reference/operators/import.meta/resolve/index.md index 01b853f930747ab..8bd6617471bb658 100644 --- a/files/en-us/web/javascript/reference/operators/import.meta/resolve/index.md +++ b/files/en-us/web/javascript/reference/operators/import.meta/resolve/index.md @@ -93,7 +93,7 @@ Some tools recognize `new URL("./lib/helper.js", import.meta.url).href` as a dep This means that `import.meta.resolve()` is not required to be implemented by all conformant JavaScript implementations. However, `import.meta.resolve()` may also be available in non-browser environments: -- Deno implements [compatibility with browser behavior](https://docs.deno.com/api/node/module/~/ImportMeta.resolve). +- Deno implements [compatibility with browser behavior](https://docs.deno.com/api/node/module/#ImportMeta.methods). - Node.js also implements [the `import.meta.resolve()` function](https://nodejs.org/docs/latest/api/esm.html#importmetaresolvespecifier), but adds an additional `parent` parameter if you use the `--experimental-import-meta-resolve` flag. ## Examples diff --git a/files/en-us/web/security/attacks/supply_chain_attacks/index.md b/files/en-us/web/security/attacks/supply_chain_attacks/index.md index b45ff457b16b661..ce0fd2b301e3cad 100644 --- a/files/en-us/web/security/attacks/supply_chain_attacks/index.md +++ b/files/en-us/web/security/attacks/supply_chain_attacks/index.md @@ -39,7 +39,7 @@ Attackers can compromise your project by exploiting weaknesses in these dependen - [Updating existing dependencies](/en-US/docs/Web/Security/Defenses/Operational_security#updating_dependencies) - [Maintaining a _Software Bill of Materials_ (SBOM)](/en-US/docs/Web/Security/Defenses/Operational_security#maintaining_a_software_bill_of_materials) -Additionally, projects should [use Subresource Integrity](/en-US/docs/Web/Security/Attacks/Supply_chain_attacks#using_subresource_integrity) for scripts and stylesheets that are hosted by a third-party site. +Additionally, projects should [use Subresource Integrity](#using_subresource_integrity) for scripts and stylesheets that are hosted by a third-party site. ### Using Subresource Integrity diff --git a/files/en-us/web/security/defenses/local_network_access/index.md b/files/en-us/web/security/defenses/local_network_access/index.md index c5a194fe07fb976..b7feed2e4acee94 100644 --- a/files/en-us/web/security/defenses/local_network_access/index.md +++ b/files/en-us/web/security/defenses/local_network_access/index.md @@ -25,7 +25,7 @@ Local network access mitigates these risks, controlling local network access via ## Address spaces -Local network access defines three different **address spaces**, which all network addresses are categorised under: +Local network access defines three different **address spaces**, which all network addresses are categorized under: - Local - : A local address is only accessible on the local network; its target will differ on different networks. For example, `192.168.0.1`. @@ -34,7 +34,7 @@ Local network access defines three different **address spaces**, which all netwo - Public - : A public address is available from anywhere on the internet; its target is the same for all devices globally. For example, `104.18.27.120` (the IP address of `example.com`). -Depending on which address space a request URL is categorised in, the browser will handle its permissions differently. +Depending on which address space a request URL is categorized in, the browser will handle its permissions differently. ## What request types are affected? @@ -138,8 +138,9 @@ However, the `local-network-access` permission continues to be supported for bac When querying the permission status of `local-network-access`, for example: ```js -navigator.permissions.query({ name: "local-network-access" }) -.then((result) => { ... }); +navigator.permissions.query({ name: "local-network-access" }).then((result) => { + // ... +}); ``` The returned result is a combination of the state of the two more recent permissions. If only one of `local-network` or `loopback-network` has a non-`prompt` state, that value will be returned. If either permission was previously `denied`, then the `local-network-access` permission will also return `denied`. The following table summarizes all possible permission results: diff --git a/files/en-us/web/security/defenses/operational_security/index.md b/files/en-us/web/security/defenses/operational_security/index.md index 945627a1de542f3..a70a156eccd5c43 100644 --- a/files/en-us/web/security/defenses/operational_security/index.md +++ b/files/en-us/web/security/defenses/operational_security/index.md @@ -88,7 +88,7 @@ The [Concise Guide for Evaluating Open Source Software](https://best.openssf.org ### Updating dependencies -Once you have added a dependency to your project, the dependency's supplier will typically release new versions with new features, bug fixes, and security fixes. You will usually want to take advantage of these updates, by implementing a mechanism to keep the dependency up to date. Tools such as GitHub's [dependabot](https://docs.github.com/en/code-security/tutorials/secure-your-dependencies/dependabot-quickstart-guide) can help with this, by detecting new versions of dependencies and automatically opening pull requests to update your project. +Once you have added a dependency to your project, the dependency's supplier will typically release new versions with new features, bug fixes, and security fixes. You will usually want to take advantage of these updates, by implementing a mechanism to keep the dependency up to date. Tools such as GitHub's [dependabot](https://docs.github.com/en/code-security/tutorials/secure-your-dependencies/dependabot-quickstart) can help with this, by detecting new versions of dependencies and automatically opening pull requests to update your project. However, updating dependencies too eagerly comes with its own risks. For example, suppose you add a dependency on a trustworthy third-party package. An attacker then gets control of the package developer's account, and publishes a malicious update. If you immediately accept the update, your project is compromised. diff --git a/files/en-us/web/security/index.md b/files/en-us/web/security/index.md index bd52a1300293820..2830f8f6f584845 100644 --- a/files/en-us/web/security/index.md +++ b/files/en-us/web/security/index.md @@ -86,7 +86,7 @@ In this section we document the following defenses: - [Transport Layer Security (TLS)](/en-US/docs/Web/Security/Defenses/Transport_Layer_Security) - [User activation](/en-US/docs/Web/Security/Defenses/User_activation) -Note that not all defenses are described in this section: some, such as [CSP](2/en-US/docs/Web/HTTP/Guides/CSP) or [trusted types](/en-US/docs/Web/API/Trusted_Types_API), are described inside the technology area of which they are a part. +Note that not all defenses are described in this section: some, such as [CSP](/en-US/docs/Web/HTTP/Guides/CSP) or [trusted types](/en-US/docs/Web/API/Trusted_Types_API), are described inside the technology area of which they are a part. ## Threat modeling diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index a78adff1422c095..6d0e373d503d127 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -412,7 +412,7 @@ Most presentation attributes inherit when used as CSS properties (for example, { #### Geometry properties Geometry properties describe the position and dimensions of SVG shapes. -In [SVG 2](https://www.w3.org/TR/SVG2/#GeometryProperties), they are a defined subset of presentation attributes whose CSS counterparts do not inherit. +In [SVG 2](https://svgwg.org/svg2-draft/geometry.html), they are a defined subset of presentation attributes whose CSS counterparts do not inherit. Each geometry property applies as a presentation attribute only on certain elements. For example, {{SVGAttr("r")}} defines the radius of a {{SVGElement("circle")}}, but has no effect on elements such as {{SVGElement("rect")}}. diff --git a/files/en-us/webassembly/reference/exception_handling/try_table/catch_all/index.md b/files/en-us/webassembly/reference/exception_handling/try_table/catch_all/index.md index 08a4e5dc5e65cd4..d7860be696acbae 100644 --- a/files/en-us/webassembly/reference/exception_handling/try_table/catch_all/index.md +++ b/files/en-us/webassembly/reference/exception_handling/try_table/catch_all/index.md @@ -54,7 +54,7 @@ const myErrorTag = new WebAssembly.Tag({ parameters: ["i32"] }); // Import the tag and the log function into the module const env = { my_error: myErrorTag, - log: () => { + log() { console.log("An error was caught!"); }, }; diff --git a/files/en-us/webassembly/reference/exception_handling/try_table/catch_all_ref/index.md b/files/en-us/webassembly/reference/exception_handling/try_table/catch_all_ref/index.md index 06ef96e19291197..0ce861d19abb1f0 100644 --- a/files/en-us/webassembly/reference/exception_handling/try_table/catch_all_ref/index.md +++ b/files/en-us/webassembly/reference/exception_handling/try_table/catch_all_ref/index.md @@ -61,7 +61,7 @@ const myErrorTag = new WebAssembly.Tag({ parameters: ["i32"] }); // Import the tag and the log function into the module const env = { my_error: myErrorTag, - log: () => { + log() { console.log("An error was caught!"); }, }; diff --git a/files/en-us/webassembly/reference/javascript_interface/exception/exception/index.md b/files/en-us/webassembly/reference/javascript_interface/exception/exception/index.md index 5b4b832d0f816f9..d3d9147a83aff33 100644 --- a/files/en-us/webassembly/reference/javascript_interface/exception/exception/index.md +++ b/files/en-us/webassembly/reference/javascript_interface/exception/exception/index.md @@ -36,7 +36,7 @@ new Exception(tag, payload, options) ## Description -The [`Exception()`](/en-US/docs/WebAssembly/Reference/JavaScript_interface/Exception/Exception) constructor accepts a [`WebAssembly.Tag`](/en-US/docs/WebAssembly/Reference/JavaScript_interface/Tag), an array of values, and an `options` object as arguments. +The `Exception()` constructor accepts a [`WebAssembly.Tag`](/en-US/docs/WebAssembly/Reference/JavaScript_interface/Tag), an array of values, and an `options` object as arguments. The tag uniquely defines the _type_ of an exception, including the order of its arguments and their data types. The same tag that was used to create the `Exception` is required to access the arguments of a thrown exception (using [`Exception.prototype.getArg()`](/en-US/docs/WebAssembly/Reference/JavaScript_interface/Exception/getArg)). diff --git a/files/en-us/webassembly/reference/javascript_interface/exception/index.md b/files/en-us/webassembly/reference/javascript_interface/exception/index.md index 3dadbb8cb343a83..1d2c727becc6e59 100644 --- a/files/en-us/webassembly/reference/javascript_interface/exception/index.md +++ b/files/en-us/webassembly/reference/javascript_interface/exception/index.md @@ -45,10 +45,10 @@ const env = { my_error: myErrorTag, }; -WebAssembly.instantiateStreaming(fetch("module.wasm"), { env }).then( ... ) +WebAssembly.instantiateStreaming(fetch("module.wasm"), { env }).then(/* ... */); ``` -You could then try running an exported Wasm function in a [`try...catch`](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) statement. If the function throws, the error propagated to the `catch` block will be a [`WebAssembly.Exception`](/en-US/docs/WebAssembly/Reference/JavaScript_interface/Exception) object instance. +You could then try running an exported Wasm function in a [`try...catch`](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) statement. If the function throws, the error propagated to the `catch` block will be a `WebAssembly.Exception` object instance. ```js WebAssembly.instantiateStreaming(fetch("module.wasm"), { env }).then( diff --git a/files/en-us/webassembly/reference/javascript_interface/jstag_static/index.md b/files/en-us/webassembly/reference/javascript_interface/jstag_static/index.md index 9b4034de29d3d88..6b96e4b043825cf 100644 --- a/files/en-us/webassembly/reference/javascript_interface/jstag_static/index.md +++ b/files/en-us/webassembly/reference/javascript_interface/jstag_static/index.md @@ -41,10 +41,10 @@ async function run() { env: { js_tag: WebAssembly.JSTag, // This JS function throws, which Wasm will catch via JSTag - do_work: () => { + do_work() { throw new Error("An exception was thrown in JS"); }, - log: (error) => { + log(error) { // errRef is the JS Error object passed back as an externref console.log(error.message); }, diff --git a/files/en-us/webassembly/reference/javascript_interface/tag/index.md b/files/en-us/webassembly/reference/javascript_interface/tag/index.md index d4c1266bd59cea5..aa256085669fa4f 100644 --- a/files/en-us/webassembly/reference/javascript_interface/tag/index.md +++ b/files/en-us/webassembly/reference/javascript_interface/tag/index.md @@ -39,7 +39,7 @@ const env = { my_error: myErrorTag, }; -WebAssembly.instantiateStreaming(fetch("module.wasm"), { env }).then( ... ) +WebAssembly.instantiateStreaming(fetch("module.wasm"), { env }).then(/* ... */); ``` Inside the Wasm module, you'd import the error tag and throw an exception of that type somewhere in your code: diff --git a/files/en-us/webassembly/reference/javascript_interface/tag/type/index.md b/files/en-us/webassembly/reference/javascript_interface/tag/type/index.md index 91f586bd6bd8bfc..a0784dc050bd592 100644 --- a/files/en-us/webassembly/reference/javascript_interface/tag/type/index.md +++ b/files/en-us/webassembly/reference/javascript_interface/tag/type/index.md @@ -35,9 +35,9 @@ console.log(tag.type()); The object logged to the console will look like so: -```js +```json { - parameters: ["i32", "i64"]; + "parameters": ["i32", "i64"] } ```