Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .vscode/dictionaries/code-entities.txt
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ associationlistitemvalue
attributionsrc
audiocontext
authorid
autolocate
autospace
backdrag
backgroundfetchabort
Expand Down Expand Up @@ -125,6 +126,8 @@ color-colrv0
color-colrv1
color-sbix
colorMaskiOES
com.apple.quicktime.mdta
com.apple.quicktime.udta
commandfor
congres
connectionavailable
Expand Down Expand Up @@ -523,6 +526,7 @@ onao
onbeforematch
oncanmakepayment
oncharacterboundsupdate
onclipboardchange
oncontentvisibilityautostatechange
oncurrententrychange
oncurrentscreenchange
Expand All @@ -532,6 +536,7 @@ ondownloadprogress
onefive
ongesturestart
oninterest
onlocation
onloseinterest
onnavigate
onnavigateerror
Expand All @@ -541,6 +546,8 @@ onpageswap
onpaymentrequest
onpointerrawupdate
onprerenderingchange
onpromptaction
onpromptdismiss
onrtctransform
onsamplebufferfull
onscreenschange
Expand Down Expand Up @@ -619,6 +626,8 @@ privacy.clearsitedata
privacy.globalprivacycontrol
privacy.restrict3rdpartystorage
privatebrowsingmode
promptaction
promptdismiss
propfind
prophoto-rgb
proportional-nums
Expand Down Expand Up @@ -809,6 +818,7 @@ utterleft
uuencode
uvec
vaii
validationstatuschange
validlink
vcard
vcdiff
Expand Down
1 change: 1 addition & 0 deletions .vscode/dictionaries/cultural-words.txt
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ Hijri
Hinckley
Hiroko
Huangdi
háček
Jeonja
Kayah
Khema
Expand Down
2 changes: 2 additions & 0 deletions .vscode/dictionaries/terms-abbreviations.txt
Original file line number Diff line number Diff line change
Expand Up @@ -771,6 +771,8 @@ superpowered
superscaling
supersets
SVCB
swashy
swooshy
syncbase
tablists
tabstrip
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,6 @@ Now you've gotten used to using a screen reader, we'd like you to use it to do s
- Look at [good-links.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html), and note how they make sense when viewed out of context, for example in the VoiceOver Rotor. This is not the case with [bad-links.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html) — they are all just "click here".
- Look at [good-form.html](https://mdn.github.io/learning-area/accessibility/html/good-form.html), and note how the form inputs are described using their labels because we've added appropriate {{htmlelement("label")}} elements. In [bad-form.html](https://mdn.github.io/learning-area/accessibility/html/bad-form.html), they get an unhelpful label along the lines of "blank".
- Look at our [punk-bands-complete.html](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html) example, and see how the screen reader is able to associate columns and rows of content and read them out all together because we've defined the table headers properly. In [bad-table.html](https://mdn.github.io/learning-area/accessibility/html/bad-table.html), none of the cells can be associated at all. Note that NVDA seems to behave slightly strangely when you've only got a single table on a page; you could try [WebAIM's table test page](https://webaim.org/articles/nvda/tables.htm) instead.
- Have a look at [WAI-ARIA live regions example](https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm), and note how the screen reader will keep reading out the constantly updating section as it updates.

## Other tooling

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -878,7 +878,7 @@ In the next article, we'll give you some tests that you can use to check how wel

- [CSS grid layout](/en-US/docs/Web/CSS/Guides/Grid_layout)
- : The main CSS grid layout module page, containing lots of further resources.
- [CSS grid layout guide](https://css-tricks.com/css-grid-layout-guide/)
- [CSS grid layout guide](https://css-tricks.com/complete-guide-css-grid-layout/)
- : A visual guide on CSS-Tricks (2021).
- [Grid Garden](https://cssgridgarden.com/)
- : An educational game to learn and better understand the basics of grid on cssgridgarden.com.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -696,7 +696,7 @@ Railway is an attractive hosting option for several reasons:

- Railway takes care of most of the infrastructure so you don't have to.
Not having to worry about servers, load balancers, reverse proxies, and so on, makes it much easier to get started.
- Railway has a [focus on developer experience for development and deployment](https://docs.railway.com/maturity/compare-to-heroku), which leads to a faster and softer learning curve than many other alternatives.
- Railway has a [focus on developer experience for development and deployment](https://docs.railway.com/platform/compare-to-heroku), which leads to a faster and softer learning curve than many other alternatives.
- The skills and concepts you will learn when using Railway are transferrable.
While Railway has some excellent new features, other popular hosting services use many of the same ideas and approaches.
- [Railway documentation](https://docs.railway.com/) is clear and complete.
Expand All @@ -716,11 +716,11 @@ For Django apps we provide this information in a number of text files:
For Django this will usually be the Gunicorn web application server (with a `.wsgi` script).
- **wsgi.py**: [WSGI](https://wsgi.readthedocs.io/en/latest/what.html) configuration to call our Django application in the Railway environment.

Once the application is running it can configure itself using information provided in [environment variables](https://docs.railway.com/guides/variables).
Once the application is running it can configure itself using information provided in [environment variables](https://docs.railway.com/variables).
For example, an application that uses a database can get the address using the variable `DATABASE_URL`.
The database service itself may be hosted by Railway or some other provider.

Developers interact with Railway through the Railway site, and using a special [Command Line Interface (CLI)](https://docs.railway.com/guides/cli) tool.
Developers interact with Railway through the Railway site, and using a special [Command Line Interface (CLI)](https://docs.railway.com/cli) tool.
The CLI allows you to associate a local GitHub repository with a railway project, upload the repository from the local branch to the live site, inspect the logs of the running process, set and get configuration variables and much more.
One of the most useful features is that you can use the CLI to run your local project with the same environment variables as the live project.

Expand Down Expand Up @@ -903,11 +903,11 @@ Note that you could also have opened the Postgres database, then its variable ta

If you open the project now it should display just as it did locally.
Note however that there is no way to populate the library with data yet, because we have not yet created a superuser account.
We'll do that using the [CLI](https://docs.railway.com/guides/cli) tool on our local computer.
We'll do that using the [CLI](https://docs.railway.com/cli) tool on our local computer.

### Install the client

Download and install the Railway client for your local operating system by following the [instructions here](https://docs.railway.com/guides/cli).
Download and install the Railway client for your local operating system by following the [instructions here](https://docs.railway.com/cli).

After the client is installed you will be able to run commands.
Some of the more important operations include deploying the current directory of your computer to an associated Railway project (without having to upload to GitHub), and running your Django project locally using the same settings as you have on the production server.
Expand Down Expand Up @@ -1005,7 +1005,7 @@ The next step is to read our last few articles, and then complete the assessment
- [How to use Django with Gunicorn](https://docs.djangoproject.com/en/5.0/howto/deployment/wsgi/gunicorn/) (Django docs)

- Railway Docs
- [CLI](https://docs.railway.com/guides/cli)
- [CLI](https://docs.railway.com/cli)

- DigitalOcean
- [How To Serve Django Applications with uWSGI and Nginx on Ubuntu 16.04](https://www.digitalocean.com/community/tutorials/how-to-serve-django-applications-with-uwsgi-and-nginx-on-ubuntu-16-04)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -464,7 +464,7 @@ Railway is an attractive hosting option for several reasons:

- Railway takes care of most of the infrastructure so you don't have to.
Not having to worry about servers, load balancers, reverse proxies, and so on, makes it much easier to get started.
- Railway has a [focus on developer experience for development and deployment](https://docs.railway.com/maturity/compare-to-heroku), which leads to a faster and softer learning curve than many other alternatives.
- Railway has a [focus on developer experience for development and deployment](https://docs.railway.com/platform/compare-to-heroku), which leads to a faster and softer learning curve than many other alternatives.
- The skills and concepts you will learn when using Railway are transferrable.
While Railway has some excellent new features, other popular hosting services use many of the same ideas and approaches.
- [Railway documentation](https://docs.railway.com/) is clear and complete.
Expand All @@ -487,11 +487,11 @@ Having installed all the dependencies, Railway will look for scripts named "buil
> Railway uses [Nixpacks](https://nixpacks.com/docs) to recognize various web application frameworks written in different programming languages.
> You don't need to know anything else for this tutorial, but you can find out more about options for deploying node applications in [Nixpacks Node](https://nixpacks.com/docs/providers/node).

Once the application is running it can configure itself using information provided in [environment variables](https://docs.railway.com/guides/variables).
Once the application is running it can configure itself using information provided in [environment variables](https://docs.railway.com/variables).
For example, an application that uses a database must get the address using a variable.
The database service itself may be hosted by Railway or some other provider.

Developers interact with Railway through the Railway site, and using a special [Command Line Interface (CLI)](https://docs.railway.com/guides/cli) tool.
Developers interact with Railway through the Railway site, and using a special [Command Line Interface (CLI)](https://docs.railway.com/cli) tool.
The CLI allows you to associate a local GitHub repository with a railway project, upload the repository from the local branch to the live site, inspect the logs of the running process, set and get configuration variables and much more.
One of the most useful features is that you can use the CLI to run your local project with the same environment variables as the live project.

Expand Down Expand Up @@ -608,7 +608,7 @@ You can add data through the website interface and it should work in the same wa

### Install the client

Download and install the Railway client for your local operating system by following the [instructions here](https://docs.railway.com/guides/cli).
Download and install the Railway client for your local operating system by following the [instructions here](https://docs.railway.com/cli).

After the client is installed you will be able run commands.
Some of the more important operations include deploying the current directory of your computer to an associated Railway project (without having to upload to GitHub), and running your project locally using the same settings as you have on the production server.
Expand Down Expand Up @@ -636,7 +636,7 @@ That's the end of this tutorial on setting up Express apps in production, and al
- [Production best practices: performance and reliability](https://expressjs.com/en/advanced/best-practice-performance.html) (Express docs)
- [Production Best Practices: Security](https://expressjs.com/en/advanced/best-practice-security.html) (Express docs)
- Railway Docs
- [CLI](https://docs.railway.com/guides/cli)
- [CLI](https://docs.railway.com/cli)

- DigitalOcean
- [Express](https://www.digitalocean.com/community/tutorials?q=express) tutorials
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,7 @@ const modelInstances = await SomeModel.find().exec();

Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the _LocalLibrary_ website. The very first thing we want to do is set up a MongoDB database that we can use to store our library data.

For this tutorial, we're going to use the [MongoDB Atlas](https://www.mongodb.com/products/platform/atlas-database) cloud-hosted sandbox database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because MongoDB Atlas is a popular _database as a service_ vendor that you might reasonably choose for your production database (other popular choices at the time of writing include [ScaleGrid](https://scalegrid.io/) and [ObjectRocket](https://www.objectrocket.com/)).
For this tutorial, we're going to use the [MongoDB Atlas](https://www.mongodb.com/products/platform/atlas-database) cloud-hosted sandbox database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because MongoDB Atlas is a popular _database as a service_ vendor that you might reasonably choose for your production database (other popular choices at the time of writing include [ScaleGrid](https://scalegrid.io/) and [Rackspace](https://www.rackspace.com/data/rackspace-dbaas)).

> [!NOTE]
> If you prefer, you can set up a MongoDB database locally by downloading and installing the [appropriate binaries for your system](https://www.mongodb.com/try/download/community-edition/releases). The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,6 @@ Tools to integrate into your build process, programmatically adding accessibilit

{{glossary("Continuous integration")}} tools to find accessibility issues in your GitHub pull requests:

- [AccessLint](https://accesslint.com/)
- [AccessLint](https://www.accesslint.com/)

While best to test your web applications with real users, you can simulate color blindness, low vision, low and contrast, and zooming. You should always test your site with out a mouse and touch to test keyboard navigation. You may also want to try your site using voice commands. Try disabling your mouse and using browser extensions like [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ body {
margin: 0 5px;
}
#output {
font-family: Arial, Helvetica, sans-serif;
font-family: "Helvetica", "Arial";
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
Expand Down
6 changes: 3 additions & 3 deletions files/en-us/web/api/cssfontfeaturevaluesmap/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ The **`CSSFontFeatureValuesMap`** interface of the [CSS Object Model (CSSOM)](/e

An `CSSFontFeatureValuesMap` instance is a read-only [Map-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#map-like_browser_apis), in which each key is the user-defined name used to reference a font feature, and the corresponding value is the index for the font feature within the font.

## Instance property
## Instance properties

- {{domxref('CSSFontFeatureValuesMap.size')}}
- : Returns a positive integer containing the size of the `CSSFontFeatureValuesMap` object.

## Instance Method
## Instance methods

- {{domxref('CSSFontFeatureValuesMap.clear()')}}
- : Removes all declarations in the `CSSFontFeatureValuesMap`.
Expand Down Expand Up @@ -51,7 +51,7 @@ First we declare a {{cssxref("@font-feature-values")}} for the _Font One_ font f
This includes the declaration of the names "nice-style" and "odd-style" that can be used to represent the `styleset` alternate glyphs for _Font One_ and specify the index values for those alternates.
It also includes the declaration of the name "swishy" that can be used to represent the `swash` alternate glyphs for _Font One_ and specify the index for that alternate.

The "nice-style" alternate glpyhs are then applied for any `.nice-look` class, using {{CSSXRef("font-variant-alternates")}} property and passing the name to the [`styleset()`](/en-US/docs/Web/CSS/Reference/Properties/font-variant-alternates#styleset) function.
The "nice-style" alternate glyphs are then applied for any `.nice-look` class, using {{CSSXRef("font-variant-alternates")}} property and passing the name to the [`styleset()`](/en-US/docs/Web/CSS/Reference/Properties/font-variant-alternates#styleset) function.
The same is done for the name "swishy" for the `swash` alternate glyphs, which is then passed to the [`swash()`](/en-US/docs/Web/CSS/Reference/Properties/font-variant-alternates#swash) function.
The "odd-style" glyphs are not used (they are just added to demonstrate that multiple values may be defined in the map.)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ browser-compat: api.CSSFontFeatureValuesRule.characterVariant

{{ APIRef("CSSOM") }}

The read-only **characterVariant** property of the {{domXRef("CSSFontFeatureValuesRule")}} interface contains a {{domXRef("CSSFontFeatureValuesMap")}} object representing the [user-defined-ident](/en-US/docs/Web/CSS/Reference/Values/custom-ident) and [feature index](/en-US/docs/Web/CSS/Reference/Properties/font-feature-settings#optional_value) for a variable font which supports {{CSSXRef("font-variant-alternates", "characterVariant()", "#characterVariant")}}.
The read-only **characterVariant** property of the {{domXRef("CSSFontFeatureValuesRule")}} interface contains a {{domXRef("CSSFontFeatureValuesMap")}} object representing the [user-defined-ident](/en-US/docs/Web/CSS/Reference/Values/custom-ident) and [feature index](/en-US/docs/Web/CSS/Reference/Properties/font-feature-settings#optional_value) for a variable font which supports {{CSSXRef("font-variant-alternates", "character-variant()", "#character-variant")}}.

## Value

Expand All @@ -24,8 +24,8 @@ Although the `characterVariant` property itself is read-only in the sense that y

```css
@font-feature-values "MonteCarlo" {
@charactervariant {
my-charactervariant: 1;
@character-variant {
my-character-variant: 1;
}
}
```
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/cssfontfeaturevaluesrule/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ browser-compat: api.CSSFontFeatureValuesRule

{{APIRef("CSSOM")}}

The **`CSSFontFeatureValuesRule`** interface represents an {{cssxref("@font-feature-values")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules). The values of its instance properties can be accessed with the [`CSSFontFeatureValuesMap`](/en-US/docs/Web/API/CSSFontFeatureValuesMap)interface.
The **`CSSFontFeatureValuesRule`** interface represents an {{cssxref("@font-feature-values")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules). The values of its instance properties can be accessed with the [`CSSFontFeatureValuesMap`](/en-US/docs/Web/API/CSSFontFeatureValuesMap) interface.

`@font-feature-values` allows developers to associate, for a given font face, a human-readable name with a numeric index that controls a particular [OpenType font feature](/en-US/docs/Web/CSS/Guides/Fonts/OpenType_fonts).
For features that select alternative glyphs (stylistic, styleset, character-variant, swash, ornament or annotation), the {{cssxref("font-variant-alternates")}} property can then reference the human-readable name in order to apply the associated feature.
Expand Down Expand Up @@ -44,7 +44,7 @@ _Inherits methods from its ancestor {{domxref("CSSRule")}}._

In this example, we declare two {{cssxref("@font-feature-values")}} one for the _Font One_ font family, and the other for _Font Two_.
In both declarations we define that the name "nice-style" can be used to represent the styleset alternate glyphs for both of the fonts, specifying the index for that alternate in each font family.
The alternate glpyhs are then applied for any `.nice-look` class, using {{cssxref("font-variant-alternates")}} and passing the name to the [`styleset()`](/en-US/docs/Web/CSS/Reference/Properties/font-variant-alternates#styleset) function.
The alternate glyphs are then applied for any `.nice-look` class, using {{cssxref("font-variant-alternates")}} and passing the name to the [`styleset()`](/en-US/docs/Web/CSS/Reference/Properties/font-variant-alternates#styleset) function.

We then use the CSSOM to read these declaration as `CSSFontFeatureValuesRule` instances, displaying them into the log.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Although the `styleset` property itself is read-only in the sense that you can't
```css
@font-feature-values "MonteCarlo" {
@styleset {
my-stylesets: 1;
my-styleset: 1;
}
}
```
Expand Down
Loading