diff --git a/files/en-us/learn/css/css_layout/positioning/index.md b/files/en-us/learn/css/css_layout/positioning/index.md index b17bcca3d8e1e59..0b139977e581968 100644 --- a/files/en-us/learn/css/css_layout/positioning/index.md +++ b/files/en-us/learn/css/css_layout/positioning/index.md @@ -188,7 +188,7 @@ span { {{ EmbedLiveSample('Setting_position_absolute', '100%', 450) }} -First of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed together like it no longer exists! Well, in a way, this is true. An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else. This is very useful: it means that we can create isolated UI features that don't interfere with the layout of other elements on the page. For example, popup information boxes, control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on. +First of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed together like it no longer exists! Well, in a way, this is true. An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else. This is very useful: it means that we can create isolated UI features that don't interfere with the layout of other elements on the page. For example, popup information boxes, control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on. Second, notice that the position of the element has changed. This is because {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} behave in a different way with absolute positioning. Rather than positioning the element based on its relative position within the normal document flow, they specify the distance the element should be from each of the containing element's sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element" and 30px from the left. (In this case, the "containing element" is the **initial containing block**. See the section below for more information) diff --git a/files/en-us/learn/css/first_steps/what_is_css/index.md b/files/en-us/learn/css/first_steps/what_is_css/index.md index 8c5a261b9d6e77a..4bc3b20e163d152 100644 --- a/files/en-us/learn/css/first_steps/what_is_css/index.md +++ b/files/en-us/learn/css/first_steps/what_is_css/index.md @@ -75,7 +75,7 @@ h1 { } ``` -- In the above example, the CSS rule opens with a {{Glossary("CSS Selector", "selector")}} . This _selects_ the HTML element that we are going to style. In this case, we are styling level one headings ({{htmlelement("h1")}}). +- In the above example, the CSS rule opens with a {{Glossary("CSS Selector", "selector")}}. This _selects_ the HTML element that we are going to style. In this case, we are styling level one headings ({{htmlelement("h1")}}). - We then have a set of curly braces `{ }`. - Inside the braces will be one or more **declarations**, which take the form of **property** and **value** pairs. We specify the property (`color` in the above example) before the colon, and we specify the value of the property after the colon (`red` in this example). - This example contains two declarations, one for `color` and the other for `font-size`. Each pair specifies a property of the element(s) we are selecting ({{htmlelement("h1")}} in this case), then a value that we'd like to give the property. diff --git a/files/en-us/learn/css/howto/create_fancy_boxes/index.md b/files/en-us/learn/css/howto/create_fancy_boxes/index.md index 3e3aef0b064f11d..778d38063075ce1 100644 --- a/files/en-us/learn/css/howto/create_fancy_boxes/index.md +++ b/files/en-us/learn/css/howto/create_fancy_boxes/index.md @@ -279,7 +279,7 @@ So it's possible to create a wonderful effect when we mix all of this together.
Hi! I want to be fancy.
``` -Let's create some partial drop shadow effect. The {{cssxref("box-shadow")}} property allow us to create inner light and a flat drop shadow effect, but with some little extra work it becomes possible to create a more natural geometry by using pseudo-element and the {{cssxref("transform")}} property. +Let's create some partial drop shadow effect. The {{cssxref("box-shadow")}} property allow us to create inner light and a flat drop shadow effect, but with some little extra work it becomes possible to create a more natural geometry by using pseudo-element and the {{cssxref("transform")}} property. ```css .fancy { diff --git a/files/en-us/learn/forms/basic_native_form_controls/index.md b/files/en-us/learn/forms/basic_native_form_controls/index.md index 1918247b1c75292..8ac708dae48529a 100644 --- a/files/en-us/learn/forms/basic_native_form_controls/index.md +++ b/files/en-us/learn/forms/basic_native_form_controls/index.md @@ -114,7 +114,7 @@ It's worth noting that these widgets do not behave exactly like other form widge > **Note:** You can find the examples from this section on GitHub as [checkable-items.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/checkable-items.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)). -For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list. Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). The associated {{htmlelement('label')}} is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the {{htmlelement("legend")}}. See the examples linked above for structural examples. +For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list. Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). The associated {{htmlelement('label')}} is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the {{htmlelement("legend")}}. See the examples linked above for structural examples. ### Check box diff --git a/files/en-us/learn/front-end_web_developer/index.md b/files/en-us/learn/front-end_web_developer/index.md index e57171e391ec76c..69fd390ca03fa22 100644 --- a/files/en-us/learn/front-end_web_developer/index.md +++ b/files/en-us/learn/front-end_web_developer/index.md @@ -92,7 +92,7 @@ It is recommended that you have basic HTML knowledge before starting to learn CS #### How will I know I'm ready to move on? -The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module. +The assessments in each module are designed to test your knowledge of the subject matter. Completing the assessments confirms that you are ready to move on to the next module. #### Modules diff --git a/files/en-us/learn/javascript/asynchronous/promises/index.md b/files/en-us/learn/javascript/asynchronous/promises/index.md index de456fb7ba5539f..884f2aeca84002e 100644 --- a/files/en-us/learn/javascript/asynchronous/promises/index.md +++ b/files/en-us/learn/javascript/asynchronous/promises/index.md @@ -58,7 +58,7 @@ console.log("Started request…"); Here we are: 1. calling the `fetch()` API, and assigning the return value to the `fetchPromise` variable -2. immediately after, logging the `fetchPromise` variable. This should output something like: `Promise { : "pending" }`, telling us that we have a `Promise` object, and it has a `state` whose value is `"pending"`. The `"pending"` state means that the fetch operation is still going on. +2. immediately after, logging the `fetchPromise` variable. This should output something like: `Promise { : "pending" }`, telling us that we have a `Promise` object, and it has a `state` whose value is `"pending"`. The `"pending"` state means that the fetch operation is still going on. 3. passing a handler function into the Promise's **`then()`** method. When (and if) the fetch operation succeeds, the promise will call our handler, passing in a {{domxref("Response")}} object, which contains the server's response. 4. logging a message that we have started the request. diff --git a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md index 1f83a4f787ce2ef..29b41718dee1051 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md @@ -144,7 +144,7 @@ OK, our template is done and it's time to move on. As we said above, all drawing operations are done by manipulating a {{domxref("CanvasRenderingContext2D")}} object (in our case, `ctx`). Many operations need to be given coordinates to pinpoint exactly where to draw something — the top left of the canvas is point (0, 0), the horizontal (x) axis runs from left to right, and the vertical (y) axis runs from top to bottom. -![Gridded graph paper with small squares covering its area with a steelblue square in the middle. The top left corner of the canvas is point (0, 0) of the canvas x-axis and y-axis. . The horizontal (x) axis runs from left to right denoting the width, and the vertical (y) axis runs from top to bottom denotes the height. The top left corner of the blue square is labeled as being a distance of x units from the y-axis and y units from the x-axis.](canvas_default_grid.png) +![Gridded graph paper with small squares covering its area with a steelblue square in the middle. The top left corner of the canvas is point (0, 0) of the canvas x-axis and y-axis. The horizontal (x) axis runs from left to right denoting the width, and the vertical (y) axis runs from top to bottom denotes the height. The top left corner of the blue square is labeled as being a distance of x units from the y-axis and y units from the x-axis.](canvas_default_grid.png) Drawing shapes tends to be done using the rectangle shape primitive, or by tracing a line along a certain path and then filling in the shape. Below we'll show how to do both. @@ -267,7 +267,7 @@ Let's draw an equilateral triangle on the canvas. - The side next to the 60 degree angle is called the **adjacent** — which we know is 50 pixels, as it is half of the line we just drew. - The side opposite the 60 degree angle is called the **opposite**, which is the height of the triangle we want to calculate. - ![A equilateral triangle pointing downwards with labeled angles and sides. The horizontal line at the top is labeled 'adjacent'. A perpendicular dotted line, from the middle of the adjacent line, labeled 'opposite', splits the triangle creating two equal right triangles. The right side of the triangle is labeled the hypotenuse, as it is the hypotenuse of the right triangle formed by the line labeled 'opposite'. while all three-sided of the triangle are of equal length, the hypotenuse is the longest side of the right triangle.](trigonometry.png) + ![A equilateral triangle pointing downwards with labeled angles and sides. The horizontal line at the top is labeled 'adjacent'. A perpendicular dotted line, from the middle of the adjacent line, labeled 'opposite', splits the triangle creating two equal right triangles. The right side of the triangle is labeled the hypotenuse, as it is the hypotenuse of the right triangle formed by the line labeled 'opposite'. while all three-sided of the triangle are of equal length, the hypotenuse is the longest side of the right triangle.](trigonometry.png) One of the basic trigonometric formulae states that the length of the adjacent multiplied by the tangent of the angle is equal to the opposite, hence we come up with `50 * Math.tan(degToRad(60))`. We use our `degToRad()` function to convert 60 degrees to radians, as {{jsxref("Math.tan()")}} expects an input value in radians. diff --git a/files/en-us/learn/javascript/client-side_web_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/index.md index 0a55bc8fa774a82..39b1d91eed81751 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/index.md @@ -44,7 +44,7 @@ Basic knowledge of [HTML](/en-US/docs/Learn/HTML) and [CSS](/en-US/docs/Learn/CS - [Manipulating documents](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents) - : When writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the {{domxref("Document")}} object. In this article, we'll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways. - [Fetching data from the server](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) - - : Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page. This seemingly small detail has had a huge impact on the performance and behavior of sites. In this article, we'll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the [Fetch API](/en-US/docs/Web/API/Fetch_API). + - : Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page. This seemingly small detail has had a huge impact on the performance and behavior of sites. In this article, we'll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the [Fetch API](/en-US/docs/Web/API/Fetch_API). - [Third party APIs](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs) - : The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs and shows some typical uses of the latter. - [Drawing graphics](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) diff --git a/files/en-us/learn/performance/measuring_performance/index.md b/files/en-us/learn/performance/measuring_performance/index.md index 3af796d8e0d5876..2e3dd4ebbc640a5 100644 --- a/files/en-us/learn/performance/measuring_performance/index.md +++ b/files/en-us/learn/performance/measuring_performance/index.md @@ -12,7 +12,7 @@ tags: Measuring performance provides an important metric to help you asses the success of your app, site, or web service. -For example, you can use performance metrics to determine how your app performs in comparison to a competitor or you can compare your app's performance across releases. The metrics you choose to measure should be relevant to your users, site, and business goals. They should be collected and measured in a consistent manner and analyzed in a format that can be consumed and understood by non-technical stakeholders. +For example, you can use performance metrics to determine how your app performs in comparison to a competitor or you can compare your app's performance across releases. The metrics you choose to measure should be relevant to your users, site, and business goals. They should be collected and measured in a consistent manner and analyzed in a format that can be consumed and understood by non-technical stakeholders. This article introduces web performance metrics that you can use to measure and optimize your site's performance. diff --git a/files/en-us/learn/performance/why_web_performance/index.md b/files/en-us/learn/performance/why_web_performance/index.md index edf5177d544339f..2f0e17fc12d2f2d 100644 --- a/files/en-us/learn/performance/why_web_performance/index.md +++ b/files/en-us/learn/performance/why_web_performance/index.md @@ -53,7 +53,7 @@ As an example, consider the loading experience of CNN.com, which at the time of A 22.6 MB site could take up to 83 seconds to load on a 3G network, with [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) (meaning the site's base HTML structure) at 31.86 seconds. -And it isn't just the time taken to download that is a major problem. A lot of countries still have internet connections that bill per megabyte. Our example 22.6 MB CNN.com experience would cost about 11% of the average Indian's daily wage to download. From a mobile device in Northwest Africa, it might cost two days of an average salary. And if this site were loaded on a US carrier's international roaming plan? The costs would make anyone cry. (See [how much your site costs to download](https://whatdoesmysitecost.com/).) +And it isn't just the time taken to download that is a major problem. A lot of countries still have internet connections that bill per megabyte. Our example 22.6 MB CNN.com experience would cost about 11% of the average Indian's daily wage to download. From a mobile device in Northwest Africa, it might cost two days of an average salary. And if this site were loaded on a US carrier's international roaming plan? The costs would make anyone cry. (See [how much your site costs to download](https://whatdoesmysitecost.com/).) ### Improve conversion rates diff --git a/files/en-us/learn/server-side/django/development_environment/index.md b/files/en-us/learn/server-side/django/development_environment/index.md index ac3cbd7f1ad4311..0253e7b3f2d74f7 100644 --- a/files/en-us/learn/server-side/django/development_environment/index.md +++ b/files/en-us/learn/server-side/django/development_environment/index.md @@ -359,7 +359,7 @@ py -3 -m django --version > > In Windows _Python 3_ scripts are launched by prefixing the command with `py -3`, although this can vary depending on your specific installation. Try omitting the `-3` modifier if you encounter any problems with commands. In Linux/macOS, the command is `python3.` -> **Warning:** The rest of this **module** uses the _Linux_ command for invoking Python 3 (`python3`) . If you're working on _Windows_ replace this prefix with: `py -3` +> **Warning:** The rest of this **module** uses the _Linux_ command for invoking Python 3 (`python3`). If you're working on _Windows_ replace this prefix with: `py -3` ## Other Python tools diff --git a/files/en-us/learn/server-side/django/introduction/index.md b/files/en-us/learn/server-side/django/introduction/index.md index 72113f4c4eecb73..28b3699b5b43794 100644 --- a/files/en-us/learn/server-side/django/introduction/index.md +++ b/files/en-us/learn/server-side/django/introduction/index.md @@ -149,7 +149,7 @@ def index(request): > **Note:** A little bit of Python: > -> - [Python modules](https://docs.python.org/3/tutorial/modules.html) are "libraries" of functions, stored in separate files, that we might want to use in our code. Here we import just the `HttpResponse` object from the `django.http` module so that we can use it in our view: `from django.http import HttpResponse` . There are other ways of importing some or all objects from a module. +> - [Python modules](https://docs.python.org/3/tutorial/modules.html) are "libraries" of functions, stored in separate files, that we might want to use in our code. Here we import just the `HttpResponse` object from the `django.http` module so that we can use it in our view: `from django.http import HttpResponse`. There are other ways of importing some or all objects from a module. > - Functions are declared using the `def` keyword as shown above, with named parameters listed in brackets after the name of the function; the whole line ends in a colon. Note how the next lines are all **indented**. The indentation is important, as it specifies that the lines of code are inside that particular block (mandatory indentation is a key feature of Python, and is one reason that Python code is so easy to read). Views are usually stored in a file called **views.py**. diff --git a/files/en-us/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md b/files/en-us/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md index 536f15c06ccf79f..cd8da3a79ccab55 100644 --- a/files/en-us/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md +++ b/files/en-us/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md @@ -159,7 +159,7 @@ The view structure and behavior is almost the same as for the **book_form.pug** Run the application and open your browser to `http://localhost:3000/`. Then select the _Create new book instance (copy)_ link. If everything is set up correctly, your site should look something like the following screenshot. After you submit a valid `BookInstance`, it should be saved and you'll be taken to the detail page. -![Create BookInstance of the Local library application screenshot from localhost:3000. The page is divided into two columns. The narrow left column has a vertical navigation bar with 10 links separated into two sections by a light-colored horizontal line. The top section link to already created data. The bottom links go to create new data forms. The wide right column has the create book instance form with a 'Create BookInstance' heading and four input fields labeled 'Book', 'Imprint', 'Date when book available' and 'Status'. The form is filled. There is a 'Submit' button at the bottom of the form.](locallibary_express_bookinstance_create_empty.png) +![Create BookInstance of the Local library application screenshot from localhost:3000. The page is divided into two columns. The narrow left column has a vertical navigation bar with 10 links separated into two sections by a light-colored horizontal line. The top section link to already created data. The bottom links go to create new data forms. The wide right column has the create book instance form with a 'Create BookInstance' heading and four input fields labeled 'Book', 'Imprint', 'Date when book available' and 'Status'. The form is filled. There is a 'Submit' button at the bottom of the form.](locallibary_express_bookinstance_create_empty.png) ## Next steps diff --git a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md index 19bcd2556b1ceb5..f10bf678d454a84 100644 --- a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md +++ b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md @@ -376,7 +376,7 @@ Above we've defined the query conditions in the `find()` method. We can also do Athlete. find(). where('sport').equals('Tennis'). - where('age').gt(17).lt(50). //Additional where query + where('age').gt(17).lt(50). // Additional where query limit(5). sort({ age: -1 }). select('name age'). diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing/index.md index 1ed9f6ab19cef79..0170c28ccf67a4f 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/ember_routing/index.md @@ -82,7 +82,7 @@ Router.map(function() { The highlighted lines were added when the 2nd and 3rd commands above were run. -`router.js` behaves as a "sitemap" for developers to be able to quickly see how the entire app is structured. It also tells Ember how to interact with your route, such as when loading arbitrary data, handling errors while loading that data, or interpreting dynamic segments of the URL. Since our data is static, we won't get to any of those fancy features, but we'll still make sure that the route provides the minimally required data to view a page. +`router.js` behaves as a "sitemap" for developers to be able to quickly see how the entire app is structured. It also tells Ember how to interact with your route, such as when loading arbitrary data, handling errors while loading that data, or interpreting dynamic segments of the URL. Since our data is static, we won't get to any of those fancy features, but we'll still make sure that the route provides the minimally required data to view a page. Creating the "Index" route did not add a route definition line to `router.js`, because like with URL navigation and JavaScript module loading, "Index" is a special word that indicates the default route to render, load, etc. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md index 9864cf1dd5397d0..84479aa7248efdb 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md @@ -297,7 +297,7 @@ All applications benefit from test coverage that ensures your software continues Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike. -[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/). +[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/). Here's a quick test for our `CounterButton` written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times: diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md index f156ae7ac8390c9..a44ab219b251cf1 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md @@ -287,7 +287,7 @@ To fix this, we need to return a `` component from our `map()` function const taskList = props.tasks.map((task) => ); ``` -Look again at your app; now our tasks look more like they used to, but they're missing the names of the tasks themselves. Remember that each task we map over has the `id`, `name`, and `checked` properties we want to pass into our `` component. If we put that knowledge together, we get code like this: +Look again at your app; now our tasks look more like they used to, but they're missing the names of the tasks themselves. Remember that each task we map over has the `id`, `name`, and `checked` properties we want to pass into our `` component. If we put that knowledge together, we get code like this: ```js const taskList = props.tasks.map((task) => ( diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md index b853a0350bca6af..db655a00e7815da 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_interactivity_events_state/index.md @@ -457,7 +457,7 @@ function toggleTaskCompleted(id) { } ``` -Here, we define an `updatedTasks` constant that maps over the original `tasks` array. If the task's `id` property matches the `id` provided to the function, we use [object spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to create a new object, and toggle the `completed` property of that object before returning it. If it doesn't match, we return the original object. +Here, we define an `updatedTasks` constant that maps over the original `tasks` array. If the task's `id` property matches the `id` provided to the function, we use [object spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to create a new object, and toggle the `completed` property of that object before returning it. If it doesn't match, we return the original object. Then we call `setTasks()` with this new array in order to update our state. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources/index.md index 646d48493680337..a4b0484a5a9439e 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_resources/index.md @@ -57,7 +57,7 @@ You can [read more about component stylesheets in the create-react-app docs](htt We used `console.log()` to check on the state and props of our application in this tutorial, and you'll also have seen some of the useful warnings and error message that React gives you both in the CLI and your browser's JavaScript console. But there's more we can do here. -The React DevTools utility allows you to inspect the internals of your React application directly in the browser. It adds a new panel to your browser's developer tools, and with it you can inspect the state and props of various components, and even edit state and props to make immediate changes to your application. +The React DevTools utility allows you to inspect the internals of your React application directly in the browser. It adds a new panel to your browser's developer tools, and with it you can inspect the state and props of various components, and even edit state and props to make immediate changes to your application. This screenshot shows our finished application as it appears in React DevTools: diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_computed_properties/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_computed_properties/index.md index 0d26be7a12e4742..cc1bf65b26fd59c 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_computed_properties/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_computed_properties/index.md @@ -48,7 +48,7 @@ In this article we'll add a counter that displays the number of completed todo i ## Using computed properties -The aim here is to add a summary count of our to-do list. This can be useful for users, while also serving to label the list for assistive technology. If we have 2 of 5 items completed in our to-do list, our summary could read "2 items completed out of 5". While it might be tempting to do something like this: +The aim here is to add a summary count of our to-do list. This can be useful for users, while also serving to label the list for assistive technology. If we have 2 of 5 items completed in our to-do list, our summary could read "2 items completed out of 5". While it might be tempting to do something like this: ```html

\{{ToDoItems.filter(item => item.done).length}} out of \{{ToDoItems.length}} items completed

diff --git a/files/en-us/mdn/tools/kumascript/index.md b/files/en-us/mdn/tools/kumascript/index.md index 5324bbc328936bc..ed760c6ed2fc533 100644 --- a/files/en-us/mdn/tools/kumascript/index.md +++ b/files/en-us/mdn/tools/kumascript/index.md @@ -407,7 +407,7 @@ const text = mdn.localStringMap({ %> ``` -The `mdn.localString()` function will automatically load strings for the appropriate locale. If a string is missing for a locale, it will fall back to `en-US` for that string. For example: +The `mdn.localString()` function will automatically load strings for the appropriate locale. If a string is missing for a locale, it will fall back to `en-US` for that string. For example: ```js <% diff --git a/files/en-us/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md b/files/en-us/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md index eee3da063fd99d8..8e6e0e2c4b8828d 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/contextualidentities/contextualidentity/index.md @@ -36,7 +36,7 @@ Values of this type are objects. They contain the following properties: - "purple" - "toolbar" - The value "toolbar" represents a theme-dependent color. Identities with color "toolbar" will be displayed in the same color as text in the toolbar (corresponding to the [theme key](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme#colors) `"toolbar_field_text"`). + The value "toolbar" represents a theme-dependent color. Identities with color "toolbar" will be displayed in the same color as text in the toolbar (corresponding to the [theme key](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme#colors) `"toolbar_field_text"`). - `colorCode` - : `string`. A hex code representing the exact color used for the identity. For example: `"#37adff"`. In the special case of the "toolbar" color, `colorCode` is always `"#7c7c7d"`, regardless of the displayed color. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/cookies/remove/index.md b/files/en-us/mozilla/add-ons/webextensions/api/cookies/remove/index.md index 87bd025611b210e..022b6829316f9d6 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/cookies/remove/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/cookies/remove/index.md @@ -53,7 +53,7 @@ let removing = browser.cookies.remove( ### Return value -A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will be fulfilled with a {{WebExtAPIRef('cookies.Cookie')}} object containing details about the cookie that's been removed. If a cookie matching the `details` parameter could not be found, the promise is fulfilled with `null`. If the call fails for any reason, the promise will be rejected with an error message. +A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that will be fulfilled with a {{WebExtAPIRef('cookies.Cookie')}} object containing details about the cookie that's been removed. If a cookie matching the `details` parameter could not be found, the promise is fulfilled with `null`. If the call fails for any reason, the promise will be rejected with an error message. ## Browser compatibility diff --git a/files/en-us/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md b/files/en-us/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md index 1928b81b885ecb5..e769e15898f0352 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md @@ -34,7 +34,7 @@ Values of this type are objects. They contain the following properties: - `width`: The width of the rectangle. - `height`: The height of the rectangle. - This option was introduced in Firefox 82. If omitted, the currently visible viewport is captured. + This option was introduced in Firefox 82. If omitted, the currently visible viewport is captured. - `scale` {{optional_inline}} - : `number`. The scale to render at, defaults to [`devicePixelRatio`](/en-US/docs/Web/API/Window/devicePixelRatio). This option was introduced in Firefox 82. diff --git a/files/en-us/mozilla/add-ons/webextensions/api/identity/index.md b/files/en-us/mozilla/add-ons/webextensions/api/identity/index.md index a4297fd9017d050..be1b2056e5c8607 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/identity/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/identity/index.md @@ -33,13 +33,13 @@ There's some setup you must do before publishing your extension. The [redirect URL](https://www.oauth.com/oauth2-servers/redirect-uris/) represents the end point of {{WebExtAPIRef("identity.launchWebAuthFlow()")}}, in which the access token or authorization code is delivered to the extension. The browser extracts the result from the redirect URL without loading its response. -You get the redirect URL by calling {{WebExtAPIRef("identity.getRedirectURL()")}}. This function derives a redirect URL from the add-on's ID. To simplify testing, set your add-on's ID explicitly using the [`browser_specific_settings`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) key (otherwise, each time you [temporarily install the add-on](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/), you get a different redirect URL). +You get the redirect URL by calling {{WebExtAPIRef("identity.getRedirectURL()")}}. This function derives a redirect URL from the add-on's ID. To simplify testing, set your add-on's ID explicitly using the [`browser_specific_settings`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) key (otherwise, each time you [temporarily install the add-on](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/), you get a different redirect URL). {{WebExtAPIRef("identity.getRedirectURL()")}} returns a URL at a fixed domain name and a subdomain derived from the add-on's ID. Some OAuth servers (such as Google) only accept domains with a verified ownership as the redirect URL. As the dummy domain cannot be controlled by extension developers, the default domain cannot always be used. However, loopback addresses are an accepted alternative that do not require domain validation (based on [RFC 8252, section 7.3](https://datatracker.ietf.org/doc/html/rfc8252#section-7.3)). Starting from Firefox 86, a loopback address with the format `http://127.0.0.1/mozoauth2/[subdomain of URL returned by identity.getRedirectURL()]` is permitted as a value for the redirect URL. -> **Note:** Starting with Firefox 75, you must use the redirect URL returned by {{WebExtAPIRef("identity.getRedirectURL()")}}. Earlier versions allowed you to supply any redirect URL. +> **Note:** Starting with Firefox 75, you must use the redirect URL returned by {{WebExtAPIRef("identity.getRedirectURL()")}}. Earlier versions allowed you to supply any redirect URL. > > Starting with Firefox 86, the special loopback address described above can be used too.