diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index a505197e579fac8..d9ee293eb809f54 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -101,6 +101,12 @@ jobs: echo "FM_LINT_FAILED=${FM_LINT_FAILED}" >> $GITHUB_ENV echo "Running Prettier" + PRETTIER_FAILED=false + PRETTIER_LOG=$(yarn prettier --check ${files_to_lint} 2>&1) || PRETTIER_FAILED=true + echo "PRETTIER_LOG<<${EOF}" >> $GITHUB_ENV + echo "${PRETTIER_LOG}" >> $GITHUB_ENV + echo "${EOF}" >> $GITHUB_ENV + echo "PRETTIER_FAILED=${PRETTIER_FAILED}" >> $GITHUB_ENV yarn prettier -w ${files_to_lint} if [[ -n $(git diff) ]]; then @@ -110,16 +116,17 @@ jobs: # info for troubleshooting echo MD_LINT_FAILED=${MD_LINT_FAILED} echo FM_LINT_FAILED=${FM_LINT_FAILED} + echo PRETTIER_FAILED=${PRETTIER_FAILED} git diff - name: Setup reviewdog - if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' + if: ${{ env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' }} uses: reviewdog/action-setup@v1 with: reviewdog_version: latest - name: Suggest changes using diff - if: env.FILES_MODIFIED == 'true' + if: ${{ env.FILES_MODIFIED == 'true' }} env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | @@ -134,7 +141,7 @@ jobs: -reporter=github-pr-review < "${TMPFILE}" - name: Add reviews for markdownlint errors - if: env.MD_LINT_FAILED == 'true' + if: ${{ env.MD_LINT_FAILED == 'true' }} env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | @@ -147,11 +154,31 @@ jobs: -reporter="github-pr-review" - name: Fail if any issues pending - if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' + if: ${{ env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' }} + env: + MD_LINT_FAILED: ${{ env.MD_LINT_FAILED }} + FM_LINT_FAILED: ${{ env.FM_LINT_FAILED }} + PRETTIER_FAILED: ${{ env.PRETTIER_FAILED }} + MD_LINT_LOG: ${{ env.MD_LINT_LOG }} + FM_LINT_LOG: ${{ env.FM_LINT_LOG }} + PRETTIER_LOG: ${{ env.PRETTIER_LOG }} run: | - echo -e "\nLogs from markdownlint:" - echo "${MD_LINT_LOG}" - echo -e "\nLogs from front-matter linter:" - echo "${FM_LINT_LOG}" - echo -e "\nPlease fix all the linting issues mentioned in above logs and in the review comments." + echo -e "\nPlease fix all the linting issues mentioned in the following logs and in the PR review comments." + + if [[ ${MD_LINT_FAILED} == 'true' ]]; then + echo -e "\n\n🪵 Logs from markdownlint:" + echo "${MD_LINT_LOG}" + fi + + if [[ ${FM_LINT_FAILED} == 'true' ]]; then + echo -e "\n\n🪵 Logs from front-matter linter:" + echo "${FM_LINT_LOG}" + fi + + if [[ ${PRETTIER_FAILED} == 'true' ]]; then + echo -e "\n\n🪵 Logs from Prettier formatter:" + echo "${PRETTIER_LOG}" + echo -e "\nYou can use Prettier playground to format the files online (configuration pre-filled): https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBiABABwIYGd7owAWc6CMAlgE6kBmFANqSTSADQgSaXS7KjYqVCAHcACoIR8U2BiOwBPPhwBGVbGADWcGAGVsAWzgAZClDjIYVAK5xV6rTt04wZgOaWbdkLjgGKnrYccAAemHBUFEawsgAqEVCCFHDStLK+HLjuTACK1hDwyGkMGSAAVrghutlweQUWSMWlAI758GLCmNIgeAC05nAAJkPsIFbYjO4AwhAGBtjIPQwMo1lQbkwAgjBWFCrW7RGm5kXp3kQwBgwA6kQU8LgucLpS9xQAbvcKi2C4yiDvWwASSgw1gujAkW4m1BuhgCiYpxK3kwwl813UmEWqJSEXeFg4Zl8VBgHWwbnmSNKOCoxMW8yomkGoigo1RZhg1wog2IyAAHAAGDg0VrUOBkikLRpnDgwbAqLk8ojIABMHGsvli8tSMpAfhUQ2Gg2M2HW1nJcAAYhAqPMdu5FtgDhAQABfV1AA \n" + fi + exit 1 diff --git a/.vscode/dictionaries/ignore-list.txt b/.vscode/dictionaries/ignore-list.txt index 1c8f1449d68890e..0e2e7108138242a 100644 --- a/.vscode/dictionaries/ignore-list.txt +++ b/.vscode/dictionaries/ignore-list.txt @@ -5,6 +5,7 @@ aaba aabaac aabbcc aabbccdd +AACA aacbbbcac abaac abbbbbc @@ -110,6 +111,7 @@ DSWbdfnrstvw dubby Duden dXNlcm5hbWU6cGFzc3dvcmQ +EACC eirmod elitr ERHGDFy @@ -144,6 +146,7 @@ futurelibrary.no gaesamplesite gims globalprivacycontrol.org +glossarysidebar.yaml GNF576746573fhdg4737dh4 gogerychwyrndrobwllllantysiliogogogoch Graece @@ -182,6 +185,7 @@ kitchensink lambdatest Latine latinmodern-math +learntocodewith.me leopardskin letmein libpkcs11testmodule @@ -198,6 +202,7 @@ magis Mand manis Markmarkimark +mdnsidebar.yaml megastore meinheld montecarlo diff --git a/.vscode/dictionaries/non-english.txt b/.vscode/dictionaries/non-english.txt index 34fc0df176ff51e..f50a6c36830398c 100644 --- a/.vscode/dictionaries/non-english.txt +++ b/.vscode/dictionaries/non-english.txt @@ -71,6 +71,7 @@ setembro shān studiorum tiene +Tipos traducido trimestre tslí diff --git a/.vscode/dictionaries/proper-names.txt b/.vscode/dictionaries/proper-names.txt index dce0d65f7a8d268..6afc1f106a836b9 100644 --- a/.vscode/dictionaries/proper-names.txt +++ b/.vscode/dictionaries/proper-names.txt @@ -3,6 +3,7 @@ a11ysupport Academind Acrosync Addy +Adham Adilah Akhgari alastairc @@ -14,6 +15,7 @@ Amorim AMPPS Amstelvar Anand +ANDI Andreessen Andrzej Anek @@ -56,6 +58,7 @@ Bloggs Bocoup Boonie bottosson +Boulton Brians Browserleaks Browsershots @@ -65,6 +68,7 @@ BugZilla Bundlesize Bunyakovsky Burson +Butterick Buzzcocks Bynens Bézier @@ -81,6 +85,7 @@ Caterina Chadha Chakra Chamakh +Chimero Chloé chrisdavidmills chrismills @@ -101,6 +106,7 @@ Colomb ColorZilla Conde Condei +COPPA Corber Cortana Coursera @@ -116,6 +122,7 @@ Célestes Dahlkemper Dailymotion Danilo +Dannaway Darmok Datumizer davbrito @@ -172,6 +179,7 @@ Esben ethertank Exljbris Fairchild +FDCP ffconf FileZilla Firefogg @@ -220,6 +228,7 @@ Hidde Highrise Hildy hmatrjp +Hobday Hobson hochan Hochberg @@ -471,6 +480,7 @@ Rekapi Remy Resig Rhiana +Riazhskikh Rigby Rocher Rohini diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt index a5ae1a6c676f117..511ee458ccbdf69 100644 --- a/.vscode/dictionaries/terms-abbreviations.txt +++ b/.vscode/dictionaries/terms-abbreviations.txt @@ -21,6 +21,7 @@ ANMF anonymization antialiasing antitracking +apideck APNG appcontent arcosh @@ -529,6 +530,7 @@ quickmenu qvalues QWERTZ randomizer +rari rasterizes RDBMS RDBMSes @@ -562,6 +564,7 @@ retarget retargeted retargeting retargetings +reviewdog RFCOMM RGTC roadmaps @@ -879,6 +882,7 @@ xrayed Xrays XRCPU XSSI +yari yearless Zalgo zoomable diff --git a/files/en-us/learn_web_development/core/accessibility/index.md b/files/en-us/learn_web_development/core/accessibility/index.md index 5191539d1f1f4c8..c0db4203a9ac584 100644 --- a/files/en-us/learn_web_development/core/accessibility/index.md +++ b/files/en-us/learn_web_development/core/accessibility/index.md @@ -21,7 +21,7 @@ You should be familiar with [HTML](/en-US/docs/Learn_web_development/Core/Struct - [What is accessibility?](/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility) - : This article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow. -- [Accessibility tooling and assitive technology](/en-US/docs/Learn_web_development/Core/Accessibility/Tooling) +- [Accessibility tooling and assistive technology](/en-US/docs/Learn_web_development/Core/Accessibility/Tooling) - : Next we turn our attention to accessibility tooling, providing information on the kinds of tools you can use to help solve accessibility issues, and the assistive technologies used by people with disabilities as they browse the web. You'll be using these tools throughout subsequent articles. - [HTML: A good basis for accessibility](/en-US/docs/Learn_web_development/Core/Accessibility/HTML) - : A great deal of web content can be made accessible just by making sure the correct HTML elements are always used for the correct purpose. This article looks in detail at how HTML can be used to ensure maximum accessibility. diff --git a/files/en-us/learn_web_development/core/accessibility/mobile/index.md b/files/en-us/learn_web_development/core/accessibility/mobile/index.md index 13e0558ba893543..7d200cad608a264 100644 --- a/files/en-us/learn_web_development/core/accessibility/mobile/index.md +++ b/files/en-us/learn_web_development/core/accessibility/mobile/index.md @@ -20,9 +20,9 @@ With web access on mobile devices being so popular and renowned platforms such a Learning outcomes: diff --git a/files/en-us/learn_web_development/core/accessibility/tooling/index.md b/files/en-us/learn_web_development/core/accessibility/tooling/index.md index d2988162768a4a0..feddfbf6b280013 100644 --- a/files/en-us/learn_web_development/core/accessibility/tooling/index.md +++ b/files/en-us/learn_web_development/core/accessibility/tooling/index.md @@ -35,7 +35,7 @@ Next we turn our attention to accessibility tooling, providing information on th ## Accessibility tools -Let's have a look at the tools can make use of when implementing accessibile websites and fixing accessibility issues. +Let's have a look at the tools can make use of when implementing accessible websites and fixing accessibility issues. ### Testing source order diff --git a/files/en-us/learn_web_development/core/css_layout/grid_skills/index.md b/files/en-us/learn_web_development/core/css_layout/grid_skills/index.md index 89f0004240c30e3..9c175eb2b82da2b 100644 --- a/files/en-us/learn_web_development/core/css_layout/grid_skills/index.md +++ b/files/en-us/learn_web_development/core/css_layout/grid_skills/index.md @@ -359,4 +359,4 @@ You may try to use flexbox on the container and restrict the cards with percenta ## See also -- [CSS stlying basics](/en-US/docs/Learn_web_development/Core/Styling_basics) +- [CSS styling basics](/en-US/docs/Learn_web_development/Core/Styling_basics) diff --git a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md index 013a6460520b05f..63fb1effba1c1e2 100644 --- a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md +++ b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md @@ -309,6 +309,7 @@ On mobile the heading is smaller, but on desktop, we see the larger heading size ```html live-sample___type-rwd
+

Watch my size!

This layout is responsive. See what happens if you make the browser window wider or narrow. @@ -480,7 +481,7 @@ Responsive design refers to a site or application design that responds to the en It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are using. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with. -Next, we will studey media queries in more detail and show how to use them to solve some common problems. +Next, we will study media queries in more detail and show how to use them to solve some common problems. ## See also diff --git a/files/en-us/learn_web_development/core/index.md b/files/en-us/learn_web_development/core/index.md index b23faf0deeff222..d1afa4efcf0f066 100644 --- a/files/en-us/learn_web_development/core/index.md +++ b/files/en-us/learn_web_development/core/index.md @@ -10,7 +10,7 @@ Our **Core modules** cover topics that we feel every web developer should have a ## Prerequisites -While there is no prequisite knowledge for starting this set of modules, we would recommend that you familiarize yourself with your computer, make sure you've got a basic set of required applications installed (such as web browsers and a code editor), and do some background reading on the web and web technologies, if you have no already done so. All these topics are covered in our [Getting started modules](/en-US/docs/Learn_web_development/Getting_started). +While there is no prerequisite knowledge for starting this set of modules, we would recommend that you familiarize yourself with your computer, make sure you've got a basic set of required applications installed (such as web browsers and a code editor), and do some background reading on the web and web technologies, if you have no already done so. All these topics are covered in our [Getting started modules](/en-US/docs/Learn_web_development/Getting_started). In particular, if you've never done any coding before, we'd recommend the [Your first website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) module, which introduces you web technologies very gently and takes you through the process of building a simple website. diff --git a/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md index 74f72a64983d6f4..d53c83e3f45a6d3 100644 --- a/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/creating_links/index.md @@ -36,7 +36,7 @@ This article shows the syntax required to make a link, and discusses link best p

  • Path syntax in detail — slashes, single dot, and double dot.
  • Link states and why they are important — :hover, :focus, :visited, and :active.
  • Inline and block-level links.
    • -
  • Understanding the benefits of writing good link text, such as better accessibility for screenreader users, and potential positive SEO effects.
    • +
  • Understanding the benefits of writing good link text, such as better accessibility for screen reader users, and potential positive SEO effects.
    • diff --git a/files/en-us/learn_web_development/core/structuring_content/lists/index.md b/files/en-us/learn_web_development/core/structuring_content/lists/index.md index b626dd1aa535142..b236954696a3cae 100644 --- a/files/en-us/learn_web_development/core/structuring_content/lists/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/lists/index.md @@ -769,7 +769,7 @@ textarea.onkeyup = () => { ## Test your skills! -You've reached the end of this set of three articles about basic HTML semantic elementss, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: HTML text basics](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_HTML_text_basics). +You've reached the end of this set of three articles about basic HTML semantic elements, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: HTML text basics](/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills:_HTML_text_basics). ## Summary diff --git a/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md b/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md index 3a4801bbb43ec32..67e5f223cb4d376 100644 --- a/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md +++ b/files/en-us/learn_web_development/core/structuring_content/table_accessibility/index.md @@ -25,8 +25,8 @@ In the previous article, we looked at one of the most important features for mak Learning outcomes: diff --git a/files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md b/files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md index 468cd9ca466e059..114d570c404f8c6 100644 --- a/files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/box_model_tasks/index.md @@ -51,13 +51,12 @@ body {
    Click here to show the solution -You will need to increase the height and width of the second block, to add the size of the padding and border: +You will need to increase the width of the second block, to add the size of the padding and border: ```css .alternate { box-sizing: border-box; width: 390px; - height: 240px; } ``` diff --git a/files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md b/files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md index bad02f26b80cbb6..95a0b07bc9c5c14 100644 --- a/files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md @@ -68,7 +68,9 @@ Then you need to remember there are special keyword values for all properties. I ## Task 2 -In this task, we want you to make your changes by leveraging the [order of cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#order_of_cascade_layers) section. Edit an existing declaration, without touching the lightgreen declaration, using the cascade layer order to make the links rebeccapurple. +In this task, we want you to manipulate the cascade layer order to color the links `rebeccapurple`. No editing the `lightgreen` declaration! + +This task is a stretch goal — it requires knowledge of cascade layers, which we didn't cover in the [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) article. You can find the information you need to attempt this task at [Cascade layers > Determining the precedence based on the order of layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers). Your final result should look like the image below: diff --git a/files/en-us/learn_web_development/core/styling_basics/combinators/index.md b/files/en-us/learn_web_development/core/styling_basics/combinators/index.md index 0f3e9e489ee01e1..e8f09a86a4e6f69 100644 --- a/files/en-us/learn_web_development/core/styling_basics/combinators/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/combinators/index.md @@ -243,7 +243,7 @@ It is often better to create a simple class and apply that to the element in que ## Test your skills! -You've reached the end of our set of lassons about selectors, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors/Selectors_Tasks). +You've reached the end of our set of lessons about selectors, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see [Test your skills: Selectors](/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors/Selectors_Tasks). ## Summary diff --git a/files/en-us/learn_web_development/core/styling_basics/debugging_css/index.md b/files/en-us/learn_web_development/core/styling_basics/debugging_css/index.md index 638d6c808c3ebd1..eb068c677db2742 100644 --- a/files/en-us/learn_web_development/core/styling_basics/debugging_css/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/debugging_css/index.md @@ -183,7 +183,7 @@ That's it for all the lessons in this module. To finish it off, we'll test your ## See also -- [Firefox > Examing and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html), Firefox Source Docs +- [Firefox > Examine and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html), Firefox Source Docs - [Chrome > View and change CSS](https://developer.chrome.com/docs/devtools/css/), developer.chrome.com {{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Tables", "Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension", "Learn_web_development/Core/Styling_basics")}} diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md index 2e5a4f65516d0fa..40b1474079e9a95 100644 --- a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md @@ -49,7 +49,7 @@ Let's start by taking a quick look at the key things we are dealing with, then w ### Cascade -Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin, the cascade layer, and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. +Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here. In the below example, we have two rules that could apply to the `

    ` element. The `

    ` content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins. @@ -479,18 +479,16 @@ Let's walk through this to see what's happening — try removing some of the pro 4. The 2nd element _does_ get the red background color, but no border. Why? Because of the `!important` flag in the second rule. Adding the `!important` flag after `border: none` means that this declaration will win over the `border` value in the previous rule, even though the ID selector has higher specificity. > [!NOTE] -> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity, or to include an important declaration in a prior cascade layer (we haven't covered cascade layers yet). +> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity. One situation in which you may have to use the `!important` flag is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override an inline style or an important declaration that can't be overridden in any other way. But really, don't use it if you can avoid it. ## The effect of CSS location -Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet and cascade layer it is specified in. +Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet it is specified in. It is possible for users to set custom stylesheets to override the developer's styles. For example, a visually impaired user might want to set the font size on all web pages they visit to be double the normal size to allow for easier reading. -It is also possible to declare developer styles in cascade layers: you can make non-layered styles override styles declared in layers or you can make styles declared in later layers override styles from earlier declared layers. For example, as a developer you may not be able to edit a third-party stylesheet, but you can import the external stylesheet into a cascade layer so that all of your styles easily override the imported styles without worrying about third-party selector specificity. - ### Order of overriding declarations Conflicting declarations will be applied in the following order, with later ones overriding earlier ones: diff --git a/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md b/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md index 2c4b3fb81afe275..3beb6dabebec850 100644 --- a/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/values_and_units/index.md @@ -43,7 +43,7 @@ In this lesson, we will take a look at some of the most frequently used value ty In CSS specifications and on the property pages here on MDN you will be able to spot value types as they will be surrounded by angle brackets (`<`, `>`), such as [``](/en-US/docs/Web/CSS/color_value) or {{cssxref("length")}}. When you see the value type `` as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the [``](/en-US/docs/Web/CSS/color_value) reference page. -Sometimes value types and properties can have the same, or similar names — For example, there is a {{cssxref("color")}} property and a [``](/en-US/docs/Web/CSS/color_value) data type. You can use the angle brackets to determine which one you are studying in each case. HTML elements also use angle brackets, but it should be clear from the context which one you are looking at. If yo are not sure, try searching for it on MDN. +Sometimes value types and properties can have the same, or similar names — For example, there is a {{cssxref("color")}} property and a [``](/en-US/docs/Web/CSS/color_value) data type. You can use the angle brackets to determine which one you are studying in each case. HTML elements also use angle brackets, but it should be clear from the context which one you are looking at. If you are not sure, try searching for it on MDN. > [!NOTE] > You'll see CSS value types referred to as _data types_. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value type. The term _value_ refers to any particular expression supported by a value type that you choose to use. diff --git a/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md b/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md index bd4f397045ed0bb..08012e78e44bae2 100644 --- a/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md +++ b/files/en-us/learn_web_development/extensions/async_js/implementing_a_promise-based_api/index.md @@ -15,7 +15,7 @@ In the last article we discussed how to use APIs that return promises. In this a Prerequisites: - A solid understanding of JavaScript fundamentals and asynchronous concepts, as covered in previous lesosns in this module. + A solid understanding of JavaScript fundamentals and asynchronous concepts, as covered in previous lessons in this module. diff --git a/files/en-us/learn_web_development/extensions/async_js/introducing/index.md b/files/en-us/learn_web_development/extensions/async_js/introducing/index.md index b7f31933aa82894..b656de456254339 100644 --- a/files/en-us/learn_web_development/extensions/async_js/introducing/index.md +++ b/files/en-us/learn_web_development/extensions/async_js/introducing/index.md @@ -25,7 +25,7 @@ In this article, we'll explain what asynchronous programming is, why we need it,
  • To gain familiarity with what asynchronous JavaScript is, how it differs from synchronous JavaScript, and why we need it.
  • What synchronous programming is, and why it can sometimes be problematic.
  • How asynchronous programming aims to solve these problems.
    • -
  • Event handlers and callback functions, and how they relate to asychronous programming.
    • +
  • Event handlers and callback functions, and how they relate to asynchronous programming.
    • diff --git a/files/en-us/learn_web_development/extensions/async_js/introducing_workers/index.md b/files/en-us/learn_web_development/extensions/async_js/introducing_workers/index.md index a853fffb6dd6aac..955ab7c7993913c 100644 --- a/files/en-us/learn_web_development/extensions/async_js/introducing_workers/index.md +++ b/files/en-us/learn_web_development/extensions/async_js/introducing_workers/index.md @@ -15,7 +15,7 @@ In this final article in our "Asynchronous JavaScript" module, we'll introduce _ Prerequisites: - A solid understanding of JavaScript fundamentals and asynchronous concepts, as covered in previous lesosns in this module. + A solid understanding of JavaScript fundamentals and asynchronous concepts, as covered in previous lessons in this module. diff --git a/files/en-us/learn_web_development/extensions/async_js/promises/index.md b/files/en-us/learn_web_development/extensions/async_js/promises/index.md index 3e2943caa3cafd7..0ff94d19d175466 100644 --- a/files/en-us/learn_web_development/extensions/async_js/promises/index.md +++ b/files/en-us/learn_web_development/extensions/async_js/promises/index.md @@ -15,7 +15,7 @@ page-type: learn-module-chapter Prerequisites: - A solid understanding of JavaScript fundamentals and asynchronous concepts, as covered in previous lesosns in this module. + A solid understanding of JavaScript fundamentals and asynchronous concepts, as covered in previous lessons in this module. diff --git a/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md b/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md index cd5b27db7814b69..d99a25a0c77d2c0 100644 --- a/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md +++ b/files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md @@ -118,7 +118,7 @@ In previous articles, we've seen the usage of [generated content](/en-US/docs/We The idea is that we can use the [`::before`](/en-US/docs/Web/CSS/::before) and [`::after`](/en-US/docs/Web/CSS/::after) pseudo-elements along with the [`content`](/en-US/docs/Web/CSS/content) property to make a chunk of content appear before or after the affected element. The chunk of content is not added to the DOM, so it may be invisible to some screen readers. Because it is a pseudo-element, it can be targeted with styles in the same way that any actual DOM node can. -This is really useful when you want to add a visual indicator to an element, such as a label or icon, when alternative indicators are also available to ensure accessibility for all users. For example, in our [custom radio buttons example](https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html), we use generated content to handle the placement and animation of the a custom radio button's inner circle when a radio button is selected: +This is really useful when you want to add a visual indicator to an element, such as a label or icon, when alternative indicators are also available to ensure accessibility for all users. For example, in our [custom radio buttons example](https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html), we use generated content to handle the placement and animation of the custom radio button's inner circle when a radio button is selected: ```css input[type="radio"]::before { diff --git a/files/en-us/learn_web_development/extensions/index.md b/files/en-us/learn_web_development/extensions/index.md index 21a13a1790b42ac..41da2b40be11cf2 100644 --- a/files/en-us/learn_web_development/extensions/index.md +++ b/files/en-us/learn_web_development/extensions/index.md @@ -10,7 +10,7 @@ Our **Extension modules** constitute useful additional skills to learn as web de ## Prerequisites -While there is no specific prequisite knowledge for starting any of these modules, it is advisable that you work through our [Core modules](/en-US/docs/Learn_web_development/Core) first, if you are a newcomer to web technologies. +While there is no specific prerequisite knowledge for starting any of these modules, it is advisable that you work through our [Core modules](/en-US/docs/Learn_web_development/Core) first, if you are a newcomer to web technologies. In particular, if you've never done any coding before, we'd recommend the [Your first website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website) module, which introduces you web technologies very gently and takes you through the process of building a simple website. diff --git a/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md index 5ac10c42ea78941..0b0fc92975f7207 100644 --- a/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md +++ b/files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md @@ -45,7 +45,7 @@ In general, you should: 1. Choose a place to store your projects. This is where all your website projects will live. 2. Inside this first folder, create other folders to store each project in. For example, you could call your first project `test-site` (or something more imaginative). -Choose a place now to store you projects. Inside your chosen place, create a new folder called `web-projects`. +Choose a place now to store your projects. Inside your chosen place, create a new folder called `web-projects`. ## An aside on casing and spacing @@ -53,7 +53,7 @@ You'll notice that throughout MDN, we ask you to name folders and files complete 1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/MyImage.jpg` and then in a different file you try to reference the image with `test-site/myimage.jpg`, it may not work. 2. There are many ways in which using spaces in file names creates issues: - - When you invoke commands in the commend line, you have to put quotes around file names with spaces in them, or the path will be interpreted as two separate items. + - When you invoke commands in the command line, you have to put quotes around file names with spaces in them, or the path will be interpreted as two separate items. - Some programming languages (for example, Python) do not work well with spaces in file names in certain circumstances (for example, if these files are modules to be imported). File names also map to URLs. For example, if you have a file called `my_file.html` at the root of your server-served directory, generally it will be accessible at `https://example.com/my_file.html` by most web servers' default behavior. Some servers will replace the spaces in your filenames with "%20" (the character code for spaces in URLs), which can create subtle bugs with some server-side logic if they assume that file names and URLs match perfectly. diff --git a/files/en-us/learn_web_development/getting_started/index.md b/files/en-us/learn_web_development/getting_started/index.md index 10bd92aa4864a7f..3a9759f48d62151 100644 --- a/files/en-us/learn_web_development/getting_started/index.md +++ b/files/en-us/learn_web_development/getting_started/index.md @@ -10,7 +10,7 @@ Welcome to **Getting started**! If you are a complete beginner (i.e. you've not ## Prerequisites -There is no prequisite knowledge for starting this course. Also note that we don't consider learning these topics as required before moving on to the [Core modules](/en-US/docs/Learn_web_development/Core), but we believe students will have an easier time if they spend some time on these topics first. +There is no prerequisite knowledge for starting this course. Also note that we don't consider learning these topics as required before moving on to the [Core modules](/en-US/docs/Learn_web_development/Core), but we believe students will have an easier time if they spend some time on these topics first. ## Modules diff --git a/files/en-us/learn_web_development/getting_started/soft_skills/collaboration_and_teamwork/index.md b/files/en-us/learn_web_development/getting_started/soft_skills/collaboration_and_teamwork/index.md index ef075535a835243..cdab8b1a4abda86 100644 --- a/files/en-us/learn_web_development/getting_started/soft_skills/collaboration_and_teamwork/index.md +++ b/files/en-us/learn_web_development/getting_started/soft_skills/collaboration_and_teamwork/index.md @@ -28,7 +28,7 @@ As a professional in the web industry, you are going to have to work with other
  • Effective techniques to practice collaboration with teammates, including sharing useful information.
  • Learn to ask useful questions and help one another.
  • Widen the net to meetup groups or open source projects to find people to help and collaborate with.
    • -
  • Learn to not fear failure, and instead embrace it as an effectve learning tool.
    • +
  • Learn to not fear failure, and instead embrace it as an effective learning tool.
    • diff --git a/files/en-us/learn_web_development/getting_started/soft_skills/job_interviews/index.md b/files/en-us/learn_web_development/getting_started/soft_skills/job_interviews/index.md index 7287e716b4b5f93..f2b7855d10ccd21 100644 --- a/files/en-us/learn_web_development/getting_started/soft_skills/job_interviews/index.md +++ b/files/en-us/learn_web_development/getting_started/soft_skills/job_interviews/index.md @@ -61,7 +61,7 @@ TODO ## Selling yourself to would-be employers - Create a portfolio. -- Build the perfect resumé. +- Build the perfect résumé. - Get experience — build real projects and contribute to open source. - Build your online persona. - Use sites like [LinkedIn](https://www.linkedin.com/) to help with the above. diff --git a/files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md b/files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md index 382042e1b1b4b19..18a7515962b12b7 100644 --- a/files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md +++ b/files/en-us/learn_web_development/getting_started/web_standards/the_web_standards_model/index.md @@ -193,7 +193,7 @@ Because you don't know exactly what your users will use, you need to design defe You'll come across the below concepts at some point in your studies. -- **Progressive enhancement** is the practice of creating a minimal experience that provides the essential functionality to all users, and layering on a better experience and other enhancments in browsers that can support them. Progressive enhancement is often seen as unimportant, because browsers tend to support new features more consistently these days, and people tend to have faster internet connections. However, you should think about examples relevant to the modern day — cutting down on decoration to make a mobile experience smoother and save on data, or providing a simpler, lower-bandwidth experience for users in developing countries who might still pay for home internet by the megabyte. +- **Progressive enhancement** is the practice of creating a minimal experience that provides the essential functionality to all users, and layering on a better experience and other enhancements in browsers that can support them. Progressive enhancement is often seen as unimportant, because browsers tend to support new features more consistently these days, and people tend to have faster internet connections. However, you should think about examples relevant to the modern day — cutting down on decoration to make a mobile experience smoother and save on data, or providing a simpler, lower-bandwidth experience for users in developing countries who might still pay for home internet by the megabyte. - **Cross-browser compatibility** is the practice of trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). It also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures. - **Responsive web design** is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens. - **Performance** means getting websites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else. diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md index 4b2de502e3045d2..4719341e5b98b80 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/adding_interactivity/index.md @@ -386,7 +386,7 @@ In this section, you will learn how to use JavaScript and DOM API features to al 1. Choose another image to feature on your example site. Ideally, the image will be the same size as the image you added previously, or as close as possible. 2. Save this image in your `images` folder. -3. Add the following JavaScript code to your `main.js` file, making sure to replace `firefox2.png` and both instances of `firefox-icon.png` with your second and first image names, respectvely. +3. Add the following JavaScript code to your `main.js` file, making sure to replace `firefox2.png` and both instances of `firefox-icon.png` with your second and first image names, respectively. ```js const myImage = document.querySelector("img"); diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md index 541f2ebb8b0dc95..2af7d144a658776 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/creating_the_content/index.md @@ -156,7 +156,7 @@ The keywords for alt text are "descriptive text". The alt text you write should Let's get your image displaying now. 1. Inside the `first-website` folder, Create a new folder called `images`, and put the image you chose in the previous example inside this folder. -2. Inside the `` tag's `alt` attribute value, enter the path to your image. It is inside a folder called `images`, which is inside the same directory as your `index.html` file, therefore the path will be `images/` plus the name of your image. For example, if your image was called `firefox-icon.png`, your `src` attribute would look like this: `src="images/firefox-icon.png"`. +2. Inside the `` tag's `src` attribute value, enter the path to your image. It is inside a folder called `images`, which is inside the same directory as your `index.html` file, therefore the path will be `images/` plus the name of your image. For example, if your image was called `firefox-icon.png`, your `src` attribute would look like this: `src="images/firefox-icon.png"`. 3. replace the `alt` attribute value — `My test image` — with some text that better describes your image. 4. Open your `index.html` file inside a web browser. You should see your image displayed. If not, check your `` element against our code above; make sure it is not missing any of the syntax, such as the quote marks. Make sure the image filename is correct. diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/index.md index 70efba8cf25f354..9ff7f2709895196 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/index.md @@ -36,7 +36,7 @@ If this is not the case, we'd suggest that you run through the [Environment setu - : JavaScript is a programming language that adds interactivity to websites. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms, with dynamic styling, with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible. -- [Publishing your webaite](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) +- [Publishing your website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) - : Once you finish writing the code and organizing the files that make up your website, you need to put it all online so people can find it. This article explains how to get your sample website online with little effort. diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md index dcf3c4d7653ac22..a213b0e69af9b09 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md @@ -315,10 +315,10 @@ Next, we center the image to make it look better. We could use the same `margin: The {{htmlelement("body")}} is a **block** element, meaning it takes up space on the page. The margin applied to a block element will be respected by other elements on the page. In contrast, images are **inline** elements; for the auto margin trick to work on this image, we must give it block-level behavior using `display: block;`. -Finally, we include `max-width: 100%;` to make sure that, if the image is larger than the `width` set on the body (600 pixels), it will be displayed at this width, and no biger. +Finally, we include `max-width: 100%;` to make sure that, if the image is larger than the `width` set on the body (600 pixels), it will be displayed at this width, and no bigger. > [!NOTE] -> Don't be too concerned if you don't completely understand `display: block;` and the differences between a block element and an inline element, or `max-width: 100%;`. They will make more sense as you continue your study of CSS. You can find more information about these propeties on MDN's {{cssxref("display")}} and {{cssxref("max-width")}} reference pages. +> Don't be too concerned if you don't completely understand `display: block;` and the differences between a block element and an inline element, or `max-width: 100%;`. They will make more sense as you continue your study of CSS. You can find more information about these properties on MDN's {{cssxref("display")}} and {{cssxref("max-width")}} reference pages. ## Conclusion diff --git a/files/en-us/mdn/writing_guidelines/page_structures/sidebars/index.md b/files/en-us/mdn/writing_guidelines/page_structures/sidebars/index.md index 7f5ed6f12fcf165..776d61864358d9e 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/sidebars/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/sidebars/index.md @@ -95,7 +95,7 @@ If you want to use custom link text, you need to include two keys inside the lis ```yaml sidebar: - - title: Our changlog + - title: Our changelog link: /MDN/Changelog ``` @@ -177,7 +177,7 @@ sidebar: This renders a sidebar with a section title that links back to the Glossary landing page, and a top-level list of links to all the glossary child pages. -If you wanted to render this as a parent list item with the subpages appearing as an expanding/collapsing child list, you would need to additionally include a `title` key specifying the text to display for the parent item litem, and a `details` key specifying the open/close behavior of the `
    `/`` structure. +If you wanted to render this as a parent list item with the subpages appearing as an expanding/collapsing child list, you would need to additionally include a `title` key specifying the text to display for the parent item, and a `details` key specifying the open/close behavior of the `
    `/`` structure. ```yaml sidebar: @@ -326,7 +326,7 @@ When the sidebar is rendered, the system replaces the `Input_types` text with it - https://developer.mozilla.org/fr/docs/Web/HTML - https://developer.mozilla.org/ja/docs/Web/HTML -If an MDN locale is accessed that does not have a value defined for a particular placeholder, it defaults to the `en-US` version. If an `en-US` version is not defined, the literal placegolder text is displayed (which would be `Input_types`, in the above case). +If an MDN locale is accessed that does not have a value defined for a particular placeholder, it defaults to the `en-US` version. If an `en-US` version is not defined, the literal placeholder text is displayed (which would be `Input_types`, in the above case). ## Non-standard sidebars diff --git a/files/en-us/mozilla/add-ons/webextensions/api/permissions/request/index.md b/files/en-us/mozilla/add-ons/webextensions/api/permissions/request/index.md index 3fa32dbd861a127..c1bfccb878cf054 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/permissions/request/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/permissions/request/index.md @@ -7,15 +7,17 @@ browser-compat: webextensions.api.permissions.request {{AddonSidebar}} -Ask for the set of permissions listed in the given {{WebExtAPIRef("permissions.Permissions")}} object. +Asks the user for the permissions listed in the {{WebExtAPIRef("permissions.Permissions")}} object. -The `Permissions` argument may contain either an `origins` property, which is an array of [host permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions), or a `permissions` property, which is an array of [API permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions), or both. Permissions must come from the set of permissions defined in the [`optional_permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions) manifest.json key. The `origins` property may include permissions that match a subset of the hosts matched by an optional permission: for example, if optional_permissions include "\*://mozilla.org/", then `permissions.origins` may include "https\://developer.mozilla.org/". +The `Permissions` argument can contain an `origins` property, an array of [host permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions), a `permissions` property, an array of [API permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions), or both. -The request can only be made inside the handler for a [user action](/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions). +Requested permissions must be defined in the [`optional_permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions) manifest.json key. The `origins` property can include permissions matching a subset of the hosts matched by an optional permission. For example, if `optional_permissions` include `"*://mozilla.org/"`, then `permissions.origins` can include `"https://developer.mozilla.org/"`. -Depending on a circumstances, the browser will probably handle the request by asking the user whether to grant the requested permissions. Only a single request is made for all requested permissions: thus either all permissions are granted or none of them are. +Requests for [optional-only permissions](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions#optional-only_permissions) can't include any other optional permissions. -Any permissions granted are retained by the extension, even over upgrade and disable/enable cycling. +The request can only be made inside the handler for a [user action](/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions). Unless all the permissions requested are ones granted silently, the browser asks the user whether to grant the requested permissions. One request is made for all requested permissions: either all permissions are granted or none are. + +The extension retains any permissions granted, even over upgrade and disable and enable cycling. This is an asynchronous function that returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). @@ -34,7 +36,7 @@ let requesting = browser.permissions.request( ### Return value -A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that is fulfilled with `true` if the extension is now granted all the permissions listed in the `permissions` argument, or `false` otherwise. +A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that is fulfilled with `true` if the extension is granted the permissions listed in the `permissions` argument, or `false` otherwise. ## Browser compatibility @@ -42,7 +44,7 @@ A [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) that ## Examples -This code adds a click handler that asks for various permissions, then logs the result of the request and the extension's permissions after the request completed. +This code adds a click handler that asks for various permissions, then logs the result of the request and the extension's permissions after the request completes. ```js const permissionsToRequest = { @@ -73,8 +75,5 @@ document {{WebExtExamples}} -> [!NOTE] -> Currently has a [bug with requesting origins](https://bugzil.la/1411873) and [requesting permissions on the about:addons page](https://bugzil.la/1382953). - > [!NOTE] > This API is based on Chromium's [`chrome.permissions`](https://developer.chrome.com/docs/extensions/reference/api/permissions) API. diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md index a1fa948f345c27c..1ecc507fd48d7ab 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md @@ -33,26 +33,26 @@ browser-compat: webextensions.manifest.optional_permissions -Use the `optional_permissions` key to list permissions that you want to ask for at runtime, after your extension has been installed. +Use the `optional_permissions` key to list permissions you want to ask for at runtime, after your extension has been installed. -The [`permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) key lists permissions that your extension needs before it can be installed. In contrast, `optional_permissions` lists permissions that your extension doesn't need at install time but it may ask for after it has been installed. To ask for a permission, use the {{webextapiref("permissions")}} API. Asking for a permission may present the user with a dialog requesting them to grant the permission to your extension. +The [`permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) key lists permissions that your extension needs before it can be installed. In contrast, `optional_permissions` lists permissions that your extension doesn't need at install time but can ask for after installation. To ask for a permission, use the {{webextapiref("permissions.request()")}} API. Asking for a permission presents the user with a dialog requesting them to grant the permission to your extension, unless all the permissions requested are granted silently. For advice on designing your request for runtime permissions, to maximize the likelihood that users grant them, see [Request permissions at runtime](https://extensionworkshop.com/documentation/develop/request-the-right-permissions/#request_permissions_at_runtime). -Starting with Firefox 84, users can manage optional permissions from the Firefox Add-ons Manager. Extensions that use optional permissions can listen for [browser.permissions.onAdded](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/permissions/onAdded) and [browser.permissions.onRemoved](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/permissions/onRemoved) API events to know when a user grants or revokes these permissions. +Starting with Firefox 84, users can manage optional permissions from the Firefox Add-ons Manager. Extensions that use optional permissions can check for the permissions granted by the user with {{webextapiref("permissions.getAll()")}} and listen for {{webextapiref("permissions.onAdded")}} and {{webextapiref("permissions.onRemoved")}} to know when a user grants or revokes permissions. -The key can contain two kinds of permissions: host permissions and API permissions. +The key can contain host permissions and API permissions. ## Host permissions These are the same as the host permissions you can specify in the [`permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#host_permissions) key. > [!NOTE] -> When using Manifest V3 or higher optional host permissions should be specified using the [`optional_host_permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_host_permissions) manifest key. Firefox introduced `optional_host_permissions` in release 128, see [bug 1766026](https://bugzil.la/1766026), and allows for the continued use of `optional_permissions` to specify optional hosts. Use of `optional_host_permissions` however is recommended. +> When using Manifest V3 or higher, optional host permissions should be specified using the [`optional_host_permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_host_permissions) manifest key. Firefox introduced `optional_host_permissions` in release 128, see [bug 1766026](https://bugzil.la/1766026), and allows the continued use of `optional_permissions` to specify optional hosts. Use of `optional_host_permissions`, however, is recommended. ## API permissions -You can include any of the following here, but not in all browsers: check the compatibility table for browser-specific details. +The optional API permissions are: - `activeTab` - `background` @@ -94,9 +94,9 @@ You can include any of the following here, but not in all browsers: check the co - `webRequestFilterResponse` - `webRequestFilterResponse.serviceWorkerScript` -Note that this is a subset of the API permissions allowed in [`permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions). +Check the compatibility table for browser-specific support details. -Of this set, the following permissions are granted silently, without a user prompt: +These optional permissions are granted silently, without a user prompt: - `activeTab` - `cookies` @@ -106,7 +106,14 @@ Of this set, the following permissions are granted silently, without a user prom - `webRequestFilterResponse` - `webRequestFilterResponse.serviceWorkerScript` -## Example +### Optional-only permissions + +Optional permissions are generally available for use in the [`permissions`](/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#api_permissions) key so they can be requested at install time. However, some browsers support the concept of optional-only permissions, permissions that can only be requested at runtime using the {{webextapiref("permissions.request()")}} API. In addition, optional-only permissions must be requested individually and alone through the {{webextapiref("permissions.request()")}} API. + +> [!NOTE] +> No optional-only permissions were generally available at the time of writing, December 2024. + +## Examples ```json "optional_permissions": ["*://developer.mozilla.org/*"] diff --git a/files/en-us/web/accessibility/aria/attributes/aria-valuenow/index.md b/files/en-us/web/accessibility/aria/attributes/aria-valuenow/index.md index aab9d21454c80dc..7c8469cf80ce081 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-valuenow/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-valuenow/index.md @@ -74,12 +74,8 @@ When the value to be announced, either the actual value or the value as a percen The first rule of ARIA use is "if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and **adding** an ARIA role, state or property to make it accessible, then do so." ```html -