diff --git a/files/en-us/games/techniques/efficient_animation_for_web_games/index.md b/files/en-us/games/techniques/efficient_animation_for_web_games/index.md index fc7b886345754c7..3b46dc7b18cf94a 100644 --- a/files/en-us/games/techniques/efficient_animation_for_web_games/index.md +++ b/files/en-us/games/techniques/efficient_animation_for_web_games/index.md @@ -10,15 +10,15 @@ tags: This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on [CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) and [CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}. -There are several techniques worth knowing that will improve the performance of your game or application whilst also using less battery life, especially on low-end devices. It is worth documenting some of these things, as there is evidence to suggest (in popular and widely-used UI libraries, for example) that they aren’t necessarily common knowledge. First off, let us discuss some basic ideas. +There are several techniques worth knowing that will improve the performance of your game or application whilst also using less battery life, especially on low-end devices. It is worth documenting some of these things, as there is evidence to suggest (in popular and widely-used UI libraries, for example) that they aren't necessarily common knowledge. First off, let us discuss some basic ideas. ## Help the browser help you -If you are using DOM for your UI, which I would certainly recommend, you really ought to use [CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) and/or [CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), rather than JavaScript-powered animations. Though JavaScript animations can be easier to express at times, unless you have a great need to synchronize UI animation state with game animation state, you’re unlikely to be able to do a better job than the browser. The reason for this is that CSS transitions/animations are much higher level than JavaScript, and express a very specific intent. Because of this, the browser can make some assumptions that it can’t easily make when you’re manually tweaking values in JavaScript. +If you are using DOM for your UI, which I would certainly recommend, you really ought to use [CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) and/or [CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), rather than JavaScript-powered animations. Though JavaScript animations can be easier to express at times, unless you have a great need to synchronize UI animation state with game animation state, you're unlikely to be able to do a better job than the browser. The reason for this is that CSS transitions/animations are much higher level than JavaScript, and express a very specific intent. Because of this, the browser can make some assumptions that it can't easily make when you're manually tweaking values in JavaScript. To take a concrete example, if you start a CSS transition to move something from off-screen so that it is fully visible on-screen, the browser knows that the related content will end up completely visible to the user and can then pre-render that content. When you animate position with JavaScript, the browser cannot easily make that same assumption, and so you might end up causing it to draw only the newly-exposed region of content, which may introduce slow-down. There are signals at the beginning and end of animations that allow you to attach JavaScript callbacks and form a rudimentary form of synchronization (though there are no guarantees on how promptly these callbacks will happen). -Speaking of the assumptions that the browser can make, you should avoid causing it to have to re-layout during animations. In this vein, it is worth trying to stick to animating only transform and opacity properties. Though some browsers make some effort for other properties to be animated quickly, these are pretty much the only ones semi-guaranteed to be fast across all browsers. Something to be careful of is that overflow may end up causing re-layout, or other expensive calculations. If you are setting a transform on something that would overlap its container’s bounds, you may want to set _overflow: hidden_ on that container for the duration of the animation. +Speaking of the assumptions that the browser can make, you should avoid causing it to have to re-layout during animations. In this vein, it is worth trying to stick to animating only transform and opacity properties. Though some browsers make some effort for other properties to be animated quickly, these are pretty much the only ones semi-guaranteed to be fast across all browsers. Something to be careful of is that overflow may end up causing re-layout, or other expensive calculations. If you are setting a transform on something that would overlap its container's bounds, you may want to set _overflow: hidden_ on that container for the duration of the animation. ## Use requestAnimationFrame @@ -50,7 +50,7 @@ requestAnimationFrame(doAnimation); You will note that we set `startTime` to `-1` at the beginning, when we could just as easily have set the time using the `Date()` object and avoided the extra code in the animation callback. We do this so that any setup or processes that happen between the start of the animation and the callback being processed do not affect the start of the animation, and so that all the animations we start before the frame is processed are synchronized. -To save battery life, it is best to only draw when there are things going on, so that would mean calling `requestAnimationFrame` (or your refresh function, which in turn calls that) in response to events happening in your game. Unfortunately, this makes it very easy to end up drawing things multiple times per frame. We would recommend keeping track of when `requestAnimationFrame` has been called and only having a single handler for it. There aren’t solid guarantees of what order things will be called in with _requestAnimationFrame_ (though, in our experience, it is in the order in which they were requested), so this also helps cut out any ambiguity. An easy way to do this is to declare your own refresh function that sets a flag when it calls `requestAnimationFrame`. When the callback is executed, you can unset that flag so that calls to that function will request a new frame again, like this: +To save battery life, it is best to only draw when there are things going on, so that would mean calling `requestAnimationFrame` (or your refresh function, which in turn calls that) in response to events happening in your game. Unfortunately, this makes it very easy to end up drawing things multiple times per frame. We would recommend keeping track of when `requestAnimationFrame` has been called and only having a single handler for it. There aren't solid guarantees of what order things will be called in with _requestAnimationFrame_ (though, in our experience, it is in the order in which they were requested), so this also helps cut out any ambiguity. An easy way to do this is to declare your own refresh function that sets a flag when it calls `requestAnimationFrame`. When the callback is executed, you can unset that flag so that calls to that function will request a new frame again, like this: ```js function redraw() { @@ -73,13 +73,13 @@ Remember that when you do drawing with `requestAnimationFrame` (and in general), ## Measure performance -There are some popular animation-related libraries and UI toolkits with animation functions that still do things like using `setTimeout` to drive their animations, drive all their animations completely individually, or other similar things that aren’t conducive to maintaining a high frame-rate. One of the goals for the [Puzzowl](http://teamgiraffe.co.uk/) game is for it to be a solid 60fps on reasonable hardware (for the record, it’s almost there on Galaxy Nexus-class hardware) while still being playable on low-end devices (such as a Firefox OS Geeksphone Keon). It would have been good to use as much third party software as possible, but most of what we tried was either too complicated for simple use-cases, or had performance issues on mobile. +There are some popular animation-related libraries and UI toolkits with animation functions that still do things like using `setTimeout` to drive their animations, drive all their animations completely individually, or other similar things that aren't conducive to maintaining a high frame-rate. One of the goals for the [Puzzowl](http://teamgiraffe.co.uk/) game is for it to be a solid 60fps on reasonable hardware (for the record, it's almost there on Galaxy Nexus-class hardware) while still being playable on low-end devices (such as a Firefox OS Geeksphone Keon). It would have been good to use as much third party software as possible, but most of what we tried was either too complicated for simple use-cases, or had performance issues on mobile. -How this conclusion was reached, however, is more important than the conclusion itself. To begin with, the priority was to write the code quickly to iterate on gameplay (and we’d certainly recommend doing this). We assumed that our own, naive code was making the game slower than we would like. To an extent, this was true: we found plenty to optimize in our own code, but it got to the point where we knew what we were doing ought to perform quite well, and it still wasn’t quite there. At this point, we turned to the Firefox [JavaScript profiler](/en-US/docs/Tools/Performance), and this told us almost exactly what low-hanging-fruit was left to address to improve performance. As it turned out, the code from some of the things mentioned above; the animation code had some corner cases where redraws were happening several times per frame, and some of the animations caused Firefox to need to redraw everything (they were fine in other browsers, as it happens — that particular issue is now fixed). Some of the third party code we were using was poorly optimized. +How this conclusion was reached, however, is more important than the conclusion itself. To begin with, the priority was to write the code quickly to iterate on gameplay (and we'd certainly recommend doing this). We assumed that our own, naive code was making the game slower than we would like. To an extent, this was true: we found plenty to optimize in our own code, but it got to the point where we knew what we were doing ought to perform quite well, and it still wasn't quite there. At this point, we turned to the Firefox [JavaScript profiler](/en-US/docs/Tools/Performance), and this told us almost exactly what low-hanging-fruit was left to address to improve performance. As it turned out, the code from some of the things mentioned above; the animation code had some corner cases where redraws were happening several times per frame, and some of the animations caused Firefox to need to redraw everything (they were fine in other browsers, as it happens — that particular issue is now fixed). Some of the third party code we were using was poorly optimized. ## A take-away -To help combat poor animation performance, Chris Lord wrote [Animator.js](https://gitlab.com/Cwiiis/animator-js/blob/master/Animator.js), a simple, easy-to-use animation library, heavily influenced by various parts of [Clutter](https://blogs.gnome.org/clutter/), but with a focus on avoiding scope-creep. It does one thing, and it does it well. Animator.js is a fire-and-forget style animation library, designed to be used with games, or other situations where you need many, synchronized, custom animations. It includes a handful of built-in tweening functions, the facility to add your own, and helper functions for animating object properties. Puzzowl uses it to drive all the drawing updates and transitions, by overriding its `requestAnimationFrame` function with a custom version that makes the request, and appending the game’s drawing function onto the end of the callback like so: +To help combat poor animation performance, Chris Lord wrote [Animator.js](https://gitlab.com/Cwiiis/animator-js/blob/master/Animator.js), a simple, easy-to-use animation library, heavily influenced by various parts of [Clutter](https://blogs.gnome.org/clutter/), but with a focus on avoiding scope-creep. It does one thing, and it does it well. Animator.js is a fire-and-forget style animation library, designed to be used with games, or other situations where you need many, synchronized, custom animations. It includes a handful of built-in tweening functions, the facility to add your own, and helper functions for animating object properties. Puzzowl uses it to drive all the drawing updates and transitions, by overriding its `requestAnimationFrame` function with a custom version that makes the request, and appending the game's drawing function onto the end of the callback like so: ```js animator.requestAnimationFrame = @@ -91,7 +91,7 @@ animator.requestAnimationFrame = }; ``` -The game’s _redraw_ function does all drawing, and the animation callbacks just update state. When you request a redraw outside of animations, the animator’s `activeAnimations` property is queried first to avoid mistakenly drawing multiple times in a single animation frame. This gives nice, synchronized animations at a very low cost. Puzzowl isn’t out yet, but here’s a little screencast of it running on a Nexus 5: +The game's _redraw_ function does all drawing, and the animation callbacks just update state. When you request a redraw outside of animations, the animator's `activeAnimations` property is queried first to avoid mistakenly drawing multiple times in a single animation frame. This gives nice, synchronized animations at a very low cost. Puzzowl isn't out yet, but here's a little screencast of it running on a Nexus 5: {{EmbedYouTube("hap4iQTMh70")}} diff --git a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md index 655e47281f7f288..42dca954c214851 100644 --- a/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md +++ b/files/en-us/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -11,7 +11,7 @@ tags: --- {{GamesSidebar}} -In this tutorial we’ll go through the process of building an HTML5 mobile game that uses the [Device Orientation](/en-US/docs/Web/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes) and [Vibration](/en-US/docs/Web/API/Vibration_API) **APIs** to enhance the gameplay and is built using the [Phaser](https://phaser.io/) framework. Basic JavaScript knowledge is recommended to get the most from this tutorial. +In this tutorial we'll go through the process of building an HTML5 mobile game that uses the [Device Orientation](/en-US/docs/Web/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes) and [Vibration](/en-US/docs/Web/API/Vibration_API) **APIs** to enhance the gameplay and is built using the [Phaser](https://phaser.io/) framework. Basic JavaScript knowledge is recommended to get the most from this tutorial. ## Example game @@ -21,7 +21,7 @@ By the end of the tutorial you will have a fully functional demo game: [Cyber Or ## Phaser framework -[Phaser](https://phaser.io/) is a framework for building desktop and mobile HTML5 games. It’s quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out [on GitHub](https://github.com/photonstorm/phaser) where it’s open sourced, read the [online documentation](https://phaser.io/docs/) and go through the big collection of [examples](https://examples.phaser.io/). The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself. +[Phaser](https://phaser.io/) is a framework for building desktop and mobile HTML5 games. It's quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out [on GitHub](https://github.com/photonstorm/phaser) where it's open sourced, read the [online documentation](https://phaser.io/docs/) and go through the big collection of [examples](https://examples.phaser.io/). The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself. ## Starting with the project @@ -37,7 +37,7 @@ You can open the index file in your favorite browser to launch the game and try ## Setting up the Canvas -We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let’s set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along: +We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let's set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along: ```html @@ -95,7 +95,7 @@ The first value is the name of the state and the second one is the object we wan ## Managing game states -The states in Phaser are separate parts of the game logic; in our case we’re loading them from independent JavaScript files for better maintainability. The basic states used in this game are: `Boot`, `Preloader`, `MainMenu`, `Howto` and `Game`. `Boot` will take care of initializing a few settings, `Preloader` will load all of the assets like graphics and audio, `MainMenu` is the menu with the start button, `Howto` shows the "how to play" instructions and the `Game` state lets you actually play the game. Let's quickly go though the content of those states. +The states in Phaser are separate parts of the game logic; in our case we're loading them from independent JavaScript files for better maintainability. The basic states used in this game are: `Boot`, `Preloader`, `MainMenu`, `Howto` and `Game`. `Boot` will take care of initializing a few settings, `Preloader` will load all of the assets like graphics and audio, `MainMenu` is the menu with the start button, `Howto` shows the "how to play" instructions and the `Game` state lets you actually play the game. Let's quickly go though the content of those states. ### Boot.js @@ -235,7 +235,7 @@ The `create` and `update` functions are framework-specific, while others will be #### Adding the ball and its motion mechanics -First, let’s go to the `create()` function, initialize the ball object itself and assign a few properties to it: +First, let's go to the `create()` function, initialize the ball object itself and assign a few properties to it: ```js this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball'); @@ -245,17 +245,17 @@ this.ball.body.setSize(18, 18); this.ball.body.bounce.set(0.3, 0.3); ``` -Here we’re adding a sprite at the given place on the screen and using the `'ball'` image from the loaded graphic assets. We’re also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The `bounce` property is used to set the bounciness of the ball when it hits the obstacles. +Here we're adding a sprite at the given place on the screen and using the `'ball'` image from the loaded graphic assets. We're also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The `bounce` property is used to set the bounciness of the ball when it hits the obstacles. #### Controlling the ball -It’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let’s focus on the keyboard first by adding the following to the `create()` function : +It's cool to have the ball ready to be thrown around in the play area, but it's also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let's focus on the keyboard first by adding the following to the `create()` function : ```js this.keys = this.game.input.keyboard.createCursorKeys(); ``` -As you can see there’s a special Phaser function called `createCursorKeys()`, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right. +As you can see there's a special Phaser function called `createCursorKeys()`, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right. Next we will add the following code to the `update()` function, so it will be fired on every frame. The `this.keys` object will be checked against player input, so the ball can react accordingly with the predefined force: @@ -278,13 +278,13 @@ That way we can check which key is pressed at the given frame and apply the defi #### Implementing the Device Orientation API -Probably the most interesting part of the game is its usage of the **Device Orientation API** for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here’s the code from the `create()` function responsible for this: +Probably the most interesting part of the game is its usage of the **Device Orientation API** for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here's the code from the `create()` function responsible for this: ```js window.addEventListener("deviceorientation", this.handleOrientation, true); ``` -We’re adding an event listener to the `"deviceorientation"` event and binding the `handleOrientation` function which looks like this: +We're adding an event listener to the `"deviceorientation"` event and binding the `handleOrientation` function which looks like this: ```js handleOrientation: function(e) { @@ -312,7 +312,7 @@ this.hole.anchor.set(0.5); this.hole.body.setSize(2, 2); ``` -The difference is that our hole’s body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article). +The difference is that our hole's body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article). #### Building the block labyrinth @@ -369,7 +369,7 @@ Thanks to that the game gives the player a challenge - now they have to roll the #### Collision detection -At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There’s a problem though — our game doesn’t have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let’s fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the `update()` function: +At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There's a problem though — our game doesn't have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let's fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the `update()` function: ```js this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this); @@ -414,7 +414,7 @@ If the `vibrate` method is supported by the browser and available in the `window #### Adding the elapsed time -To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let’s define the variables in the `create` function first: +To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let's define the variables in the `create` function first: ```js this.timer = 0; // time elapsed in the current level @@ -428,7 +428,7 @@ this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig); this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall); ``` -We’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second: +We're defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second: ```js this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this); @@ -444,11 +444,11 @@ updateCounter: function() { }, ``` -As you can see we’re incrementing the `this.timer` variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time. +As you can see we're incrementing the `this.timer` variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time. #### Finishing the level and the game -The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let’s set up the possibility to actually finish the level! The following line in the `update()` function adds a listener that fires when the ball gets to the hole. +The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let's set up the possibility to actually finish the level! The following line in the `update()` function adds a listener that fires when the ball gets to the hole. ```js this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this); @@ -486,7 +486,7 @@ If the current level is lower than 5, all the necessary variables are reset and ## Ideas for new features -This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There’s also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination. +This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There's also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination. ## Summary diff --git a/files/en-us/glossary/accessibility_tree/index.md b/files/en-us/glossary/accessibility_tree/index.md index df9b970bd9f2d5a..2d7873b1351528d 100644 --- a/files/en-us/glossary/accessibility_tree/index.md +++ b/files/en-us/glossary/accessibility_tree/index.md @@ -10,7 +10,7 @@ tags: --- The **accessibility tree** contains {{Glossary("accessibility")}}-related information for most HTML elements. -Browsers convert markup into an internal representation called the _[DOM tree](/en-US/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree)_. The DOM tree contains objects representing all the markup’s elements, attributes, and text nodes. Browsers then create an accessibility tree based on the DOM tree, which is used by platform-specific Accessibility APIs to provide a representation that can be understood by assistive technologies, such as screen readers. +Browsers convert markup into an internal representation called the _[DOM tree](/en-US/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree)_. The DOM tree contains objects representing all the markup's elements, attributes, and text nodes. Browsers then create an accessibility tree based on the DOM tree, which is used by platform-specific Accessibility APIs to provide a representation that can be understood by assistive technologies, such as screen readers. There are four things in an accessibility tree object: diff --git a/files/en-us/glossary/alignment_container/index.md b/files/en-us/glossary/alignment_container/index.md index afc76fa00d38d07..a9b6d2904b36ea4 100644 --- a/files/en-us/glossary/alignment_container/index.md +++ b/files/en-us/glossary/alignment_container/index.md @@ -7,7 +7,7 @@ tags: - Glossary - alignment --- -The **alignment container** is the rectangle that the [alignment subject](/en-US/docs/Glossary/Alignment_Subject) is aligned within. This is defined by the layout mode; it is usually the alignment subject’s containing block, and assumes the writing mode of the box establishing the containing block. +The **alignment container** is the rectangle that the [alignment subject](/en-US/docs/Glossary/Alignment_Subject) is aligned within. This is defined by the layout mode; it is usually the alignment subject's containing block, and assumes the writing mode of the box establishing the containing block. ## See also diff --git a/files/en-us/glossary/cookie/index.md b/files/en-us/glossary/cookie/index.md index 720a0ab0938a7d8..b02521d68179732 100644 --- a/files/en-us/glossary/cookie/index.md +++ b/files/en-us/glossary/cookie/index.md @@ -7,7 +7,7 @@ tags: --- A cookie is a small piece of information left on a visitor's computer by a website, via a web browser. -Cookies are used to personalize a user’s web experience with a website. It may contain the user’s preferences or inputs when accessing that website. A user can customize their web browser to accept, reject, or delete cookies. +Cookies are used to personalize a user's web experience with a website. It may contain the user's preferences or inputs when accessing that website. A user can customize their web browser to accept, reject, or delete cookies. Cookies can be set and modified at the server level using the `Set-Cookie` [HTTP header](/en-US/docs/Web/HTTP/Cookies), or with JavaScript using [`document.cookie`](/en-US/docs/Web/API/Document/cookie). diff --git a/files/en-us/glossary/cors-safelisted_request_header/index.md b/files/en-us/glossary/cors-safelisted_request_header/index.md index 5b569329e4b78aa..ecd8f8e1b7bbe16 100644 --- a/files/en-us/glossary/cors-safelisted_request_header/index.md +++ b/files/en-us/glossary/cors-safelisted_request_header/index.md @@ -23,7 +23,7 @@ CORS-safelisted headers must also fulfill the following requirements in order to - For {{HTTPHeader("Accept-Language")}} and {{HTTPHeader("Content-Language")}}: can only have values consisting of `0-9`, `A-Z`, `a-z`, space or `*,-.;=`. - For {{HTTPHeader("Accept")}} and {{HTTPHeader("Content-Type")}}: can't contain a _CORS-unsafe request header byte_: `0x00-0x1F` (except for `0x09 (HT)`, which is allowed), `"():<>?@[\]{}`, and `0x7F (DEL)`. - For {{HTTPHeader("Content-Type")}}: needs to have a MIME type of its parsed value (ignoring parameters) of either `application/x-www-form-urlencoded`, `multipart/form-data`, or `text/plain`. -- For any header: the value’s length can't be greater than 128. +- For any header: the value's length can't be greater than 128. ## See also diff --git a/files/en-us/glossary/cssom/index.md b/files/en-us/glossary/cssom/index.md index a3afdea969ce187..a924c6363516dbb 100644 --- a/files/en-us/glossary/cssom/index.md +++ b/files/en-us/glossary/cssom/index.md @@ -7,7 +7,7 @@ tags: - DOM - Glossary --- -The [**CSS Object Model (CSSOM)**](/en-US/docs/Web/API/CSS_Object_Model) is a set of APIs for reading and modifying a document’s style-related (CSS) information. In other words, similar to the way in which the [DOM](/en-US/docs/Web/API/Document_Object_Model) enables a document’s structure and content to be read and modified from JavaScript, the CSSOM allows the document’s styling to be read and modified from JavaScript. +The [**CSS Object Model (CSSOM)**](/en-US/docs/Web/API/CSS_Object_Model) is a set of APIs for reading and modifying a document's style-related (CSS) information. In other words, similar to the way in which the [DOM](/en-US/docs/Web/API/Document_Object_Model) enables a document's structure and content to be read and modified from JavaScript, the CSSOM allows the document's styling to be read and modified from JavaScript. ## See also diff --git a/files/en-us/glossary/deep_copy/index.md b/files/en-us/glossary/deep_copy/index.md index 81af6604ef5d50a..c7c8187f24b68de 100644 --- a/files/en-us/glossary/deep_copy/index.md +++ b/files/en-us/glossary/deep_copy/index.md @@ -7,7 +7,7 @@ tags: --- {{MDNSidebar}} -A **deep copy** of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you can be assured you’re not causing the other object to change too; that is, you won’t unintentionally be causing changes to the source or copy that you don’t expect. That behavior contrasts with the behavior of a [shallow copy](/en-US/docs/Glossary/Shallow_copy), in which changes to either the source or the copy may also cause the other object to change too (because the two objects share the same references). +A **deep copy** of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you can be assured you're not causing the other object to change too; that is, you won't unintentionally be causing changes to the source or copy that you don't expect. That behavior contrasts with the behavior of a [shallow copy](/en-US/docs/Glossary/Shallow_copy), in which changes to either the source or the copy may also cause the other object to change too (because the two objects share the same references). In JavaScript, standard built-in object-copy operations ([spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax), [`Array.prototype.concat()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat), [`Array.prototype.slice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice), [`Array.from()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from), [`Object.assign()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign), and [`Object.create()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create)) do not create deep copies (instead, they create shallow copies). @@ -26,9 +26,9 @@ console.log(ingredients_list[1].list); As can be seen from the code above, because a deep copy shares no references with its source object, any changes made to the deep copy do not affect the source object. -However, while the object in the code above is simple enough to be [serializable](/en-US/docs/Glossary/Serialization), many JavaScript objects are not serializable at all — for example, [functions](/en-US/docs/Web/JavaScript/Guide/Functions) (with closures), [Symbols](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), objects that represent HTML elements in the [HTML DOM API](/en-US/docs/Web/API/HTML_DOM_API), recursive data, any many other cases. Calling `JSON.stringify()` to serialize the objects in those cases will fail. So there’s no way to make deep copies of such objects. +However, while the object in the code above is simple enough to be [serializable](/en-US/docs/Glossary/Serialization), many JavaScript objects are not serializable at all — for example, [functions](/en-US/docs/Web/JavaScript/Guide/Functions) (with closures), [Symbols](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), objects that represent HTML elements in the [HTML DOM API](/en-US/docs/Web/API/HTML_DOM_API), recursive data, any many other cases. Calling `JSON.stringify()` to serialize the objects in those cases will fail. So there's no way to make deep copies of such objects. -For objects that _are_ serializable, you can alternatively use the [`structuredClone()`](/en-US/docs/Web/API/structuredClone) method to create deep copies. `structuredClone()` has the advantage of allowing {{Glossary("transferable objects")}} in the source to be _transferred_ to the new copy, rather than just cloned. But note that `structuredClone()` isn’t a feature of the JavaScript language itself — instead it’s a feature of browsers and any other JavaScript runtimes that implement a global object like [`window`](/en-US/docs/Web/API/Window). And calling `structuredClone()` to clone a non-serializable object will fail in the same way that calling `JSON.stringify()` to serialize it will fail. +For objects that _are_ serializable, you can alternatively use the [`structuredClone()`](/en-US/docs/Web/API/structuredClone) method to create deep copies. `structuredClone()` has the advantage of allowing {{Glossary("transferable objects")}} in the source to be _transferred_ to the new copy, rather than just cloned. But note that `structuredClone()` isn't a feature of the JavaScript language itself — instead it's a feature of browsers and any other JavaScript runtimes that implement a global object like [`window`](/en-US/docs/Web/API/Window). And calling `structuredClone()` to clone a non-serializable object will fail in the same way that calling `JSON.stringify()` to serialize it will fail. ## See also diff --git a/files/en-us/glossary/first_input_delay/index.md b/files/en-us/glossary/first_input_delay/index.md index 8a0b9fd8517d004..21a29e99df15c72 100644 --- a/files/en-us/glossary/first_input_delay/index.md +++ b/files/en-us/glossary/first_input_delay/index.md @@ -8,7 +8,7 @@ tags: --- **First input delay** (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction. -It is the length of time, in milliseconds, between the first user interaction on a web page and the browser’s response to that interaction. Scrolling and zooming are not included in this metric. +It is the length of time, in milliseconds, between the first user interaction on a web page and the browser's response to that interaction. Scrolling and zooming are not included in this metric. The time between when content is painted to the page and when all the functionality becomes responsive to human interaction often varies based on the size and complexity of the JavaScript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile devices). The longer the delay, the worse the user experience. Reducing site initialization time and eliminating [long tasks](/en-US/docs/Web/API/Long_Tasks_API) can help eliminate first input delays. diff --git a/files/en-us/glossary/function/index.md b/files/en-us/glossary/function/index.md index 5f7df9572a48619..ca35b113fdb685e 100644 --- a/files/en-us/glossary/function/index.md +++ b/files/en-us/glossary/function/index.md @@ -69,7 +69,7 @@ const loop = x => { }; ``` -An **Immediately Invoked Function Expressions** ({{glossary("IIFE")}}) is a function that is called directly after the function is loaded into the browser’s compiler. The way to identify an IIFE is by locating the extra left and right parenthesis at the end of the function’s definition. +An **Immediately Invoked Function Expressions** ({{glossary("IIFE")}}) is a function that is called directly after the function is loaded into the browser's compiler. The way to identify an IIFE is by locating the extra left and right parenthesis at the end of the function's definition. ```js // Declared functions can't be called immediately this way diff --git a/files/en-us/glossary/houdini/index.md b/files/en-us/glossary/houdini/index.md index cca3a3bce36fb3e..2fb9c2ea8d7021f 100644 --- a/files/en-us/glossary/houdini/index.md +++ b/files/en-us/glossary/houdini/index.md @@ -8,7 +8,7 @@ tags: - Houdini - Reference --- -Houdini is a set of low level APIs that give developers the power to extend CSS, providing the ability to hook into the styling and layout process of a browser’s rendering engine. Houdini gives developers access to the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model) ([CSSOM](/en-US/docs/Glossary/CSSOM)), enabling developers to write code the browser can parse as CSS. +Houdini is a set of low level APIs that give developers the power to extend CSS, providing the ability to hook into the styling and layout process of a browser's rendering engine. Houdini gives developers access to the [CSS Object Model](/en-US/docs/Web/API/CSS_Object_Model) ([CSSOM](/en-US/docs/Glossary/CSSOM)), enabling developers to write code the browser can parse as CSS. The benefit of Houdini is that developers can create CSS features without waiting for web standards specifications to define them and without waiting for every browser to fully implement the features. diff --git a/files/en-us/glossary/mvc/index.md b/files/en-us/glossary/mvc/index.md index f0110f61b44295b..3bd380ae600430b 100644 --- a/files/en-us/glossary/mvc/index.md +++ b/files/en-us/glossary/mvc/index.md @@ -8,7 +8,7 @@ tags: - MVC - Model View Controller --- -**MVC** (Model-View-Controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. It emphasizes a separation between the software’s business logic and display. This "separation of concerns" provides for a better division of labor and improved maintenance. Some other design patterns are based on MVC, such as MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), and MVW (Model-View-Whatever). +**MVC** (Model-View-Controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. It emphasizes a separation between the software's business logic and display. This "separation of concerns" provides for a better division of labor and improved maintenance. Some other design patterns are based on MVC, such as MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), and MVW (Model-View-Whatever). The three parts of the MVC software-design pattern can be described as follows: diff --git a/files/en-us/glossary/network_throttling/index.md b/files/en-us/glossary/network_throttling/index.md index 4c9b63789e2c6bd..681cde25ca9a3bd 100644 --- a/files/en-us/glossary/network_throttling/index.md +++ b/files/en-us/glossary/network_throttling/index.md @@ -10,7 +10,7 @@ tags: --- **Network throttling** is an intentional slowing down of internet speed. In web performance, network throttling, or network condition emulation, it is used to emulate low bandwidth conditions experienced by likely a large segment of a site's target user base. -It’s important not to overlook network conditions users experience on mobile. The internet speeds for developers creating web applications in a corporate office building on a powerful computer are generally very fast. As a developer, tech writer, or designer, this is likely your experience. The network speeds of a mobile user accessing that web application, possibly while traveling or in a remote area with poor data plan coverage, will likely be very slow, if they are able to get online at all. Network throttling enables a developer to emulate an experience of a user. Most browser developer tools, such as the browser inspector, provide a function to emulate different network conditions. By emulating your user's experience via network throttling, you can more readily identify and fix load time issues. +It's important not to overlook network conditions users experience on mobile. The internet speeds for developers creating web applications in a corporate office building on a powerful computer are generally very fast. As a developer, tech writer, or designer, this is likely your experience. The network speeds of a mobile user accessing that web application, possibly while traveling or in a remote area with poor data plan coverage, will likely be very slow, if they are able to get online at all. Network throttling enables a developer to emulate an experience of a user. Most browser developer tools, such as the browser inspector, provide a function to emulate different network conditions. By emulating your user's experience via network throttling, you can more readily identify and fix load time issues. Browser developer tools generally have network throttling options, to allow you to test your app under slow network conditions. Firefox's developer tools for example have a drop-down menu available in both the [Network Monitor](/en-US/docs/Tools/Network_Monitor) and [Responsive Design Mode](/en-US/docs/Tools/Responsive_Design_Mode) containing network speed options (e.g. wifi, good 3G, 2G...) diff --git a/files/en-us/glossary/object/index.md b/files/en-us/glossary/object/index.md index 83b54d552cd6630..c58b5991e8314d9 100644 --- a/files/en-us/glossary/object/index.md +++ b/files/en-us/glossary/object/index.md @@ -11,7 +11,7 @@ In JavaScript, objects can be seen as a collection of properties. With the [obje There are two types of object properties: The [_data_ property](/en-US/docs/Web/JavaScript/Data_structures#data_property) and the [_accessor_ property](/en-US/docs/Web/JavaScript/Data_structures#accessor_property). -> **Note:** It’s important to recognize it’s accessor _property_ — not accessor _method_. We can give a JavaScript object class-_like_ accessors by using a function as a value — but that doesn't make the object a class. +> **Note:** It's important to recognize it's accessor _property_ — not accessor _method_. We can give a JavaScript object class-_like_ accessors by using a function as a value — but that doesn't make the object a class. ## See also diff --git a/files/en-us/glossary/raster_image/index.md b/files/en-us/glossary/raster_image/index.md index 561095da17aa367..1aa2c16976c5191 100644 --- a/files/en-us/glossary/raster_image/index.md +++ b/files/en-us/glossary/raster_image/index.md @@ -11,7 +11,7 @@ tags: - gif - raster image --- -A **_raster image_** is an image file defined as a grid of pixels. They’re also referred to as _bitmaps_. Common raster image formats on the Web are [JPEG](/en-US/docs/Glossary/jpeg), [PNG](/en-US/docs/Glossary/PNG), [GIF](/en-US/docs/Glossary/gif), and [ICO](). +A **_raster image_** is an image file defined as a grid of pixels. They're also referred to as _bitmaps_. Common raster image formats on the Web are [JPEG](/en-US/docs/Glossary/jpeg), [PNG](/en-US/docs/Glossary/PNG), [GIF](/en-US/docs/Glossary/gif), and [ICO](). Raster image files usually contain one set of dimensions, but the ICO and CUR formats, used for favicons and [CSS cursor images](/en-US/docs/Web/CSS/cursor), can contain multiple sizes. diff --git a/files/en-us/glossary/real_user_monitoring/index.md b/files/en-us/glossary/real_user_monitoring/index.md index 655e33761c1fc00..16379f9da30d0cf 100644 --- a/files/en-us/glossary/real_user_monitoring/index.md +++ b/files/en-us/glossary/real_user_monitoring/index.md @@ -7,7 +7,7 @@ tags: - Reference - Web Performance --- -**Real User Monitoring** or RUM measures the performance of a page from real users' machines. Generally, a third party script injects a script on each page to measure and report page load data for every request made. This technique monitors an application’s actual user interactions. In RUM, the third party script collects performance metrics from the real users' browsers. RUM helps identify how an application is being used, including the geographic distribution of users and the impact of that distribution on the end user experience. +**Real User Monitoring** or RUM measures the performance of a page from real users' machines. Generally, a third party script injects a script on each page to measure and report page load data for every request made. This technique monitors an application's actual user interactions. In RUM, the third party script collects performance metrics from the real users' browsers. RUM helps identify how an application is being used, including the geographic distribution of users and the impact of that distribution on the end user experience. ## See also diff --git a/files/en-us/glossary/shallow_copy/index.md b/files/en-us/glossary/shallow_copy/index.md index 48a4f76831a6304..0e66fd886ed23fc 100644 --- a/files/en-us/glossary/shallow_copy/index.md +++ b/files/en-us/glossary/shallow_copy/index.md @@ -7,13 +7,13 @@ tags: --- {{MDNSidebar}} -A **shallow copy** of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too — and so, you may end up unintentionally causing changes to the source or copy that you don’t expect. That behavior contrasts with the behavior of a [deep copy](/en-US/docs/Glossary/Deep_copy), in which the source and copy are completely independent. +A **shallow copy** of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too — and so, you may end up unintentionally causing changes to the source or copy that you don't expect. That behavior contrasts with the behavior of a [deep copy](/en-US/docs/Glossary/Deep_copy), in which the source and copy are completely independent. -For shallow copies, it’s important to understand that selectively changing the value of a shared property of an existing element in an object is different from assigning a completely new value to an existing element. +For shallow copies, it's important to understand that selectively changing the value of a shared property of an existing element in an object is different from assigning a completely new value to an existing element. For example, if in a shallow copy named `copy` of an array object, the value of the `copy[0]` element is `{"list":["butter","flour"]}`, and you do `copy[0].list = ["oil","flour"]`, then the corresponding element in the source object will change, too — because you selectively changed a property of an object shared by both the source object and the shallow copy. -However, if instead you do `copy[0] = {"list":["oil","flour"]}`, then the corresponding element in the source object **will not change** — because in that case, you’re not just selectively changing a property of an existing array element that the shallow copy shares with the source object; instead you’re actually assigning a completely new value to that `copy[0]` array element, just in the shallow copy. +However, if instead you do `copy[0] = {"list":["oil","flour"]}`, then the corresponding element in the source object **will not change** — because in that case, you're not just selectively changing a property of an existing array element that the shallow copy shares with the source object; instead you're actually assigning a completely new value to that `copy[0]` array element, just in the shallow copy. In JavaScript, all standard built-in object-copy operations ([spread syntax](/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax), [`Array.prototype.concat()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat), [`Array.prototype.slice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice), [`Array.from()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from), [`Object.assign()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign), and [`Object.create()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create)) create shallow copies rather than deep copies. diff --git a/files/en-us/glossary/symbol/index.md b/files/en-us/glossary/symbol/index.md index 50d487e68cac278..d28e271bcb90493 100644 --- a/files/en-us/glossary/symbol/index.md +++ b/files/en-us/glossary/symbol/index.md @@ -28,7 +28,7 @@ console.log(Sym1 === Sym2) // returns "false" // they are different values. ``` -> **Note:** If you are familiar with Ruby (or another language) that also has a feature called _"symbols"_, please don’t be misled. JavaScript symbols are different. +> **Note:** If you are familiar with Ruby (or another language) that also has a feature called _"symbols"_, please don't be misled. JavaScript symbols are different. _Symbol_ type is a new feature in ECMAScript 2015. There is no ECMAScript 5 equivalent for Symbol. @@ -36,7 +36,7 @@ In some programming languages, the symbol data type is referred to as an "atom." ### Symbols don't "Auto-Convert" to strings -Most values in JavaScript support implicit conversion to a string. For instance, we can `alert` almost any value, and it will work. Symbols are special. They don’t auto-convert. +Most values in JavaScript support implicit conversion to a string. For instance, we can `alert` almost any value, and it will work. Symbols are special. They don't auto-convert. For example: @@ -45,7 +45,7 @@ let Sym = Symbol("Sym") alert(Sym) // TypeError: Cannot convert a Symbol value to a string ``` -That’s a "language guard" against messing up, because strings and symbols are fundamentally different, and should not occasionally convert one into another. +That's a "language guard" against messing up, because strings and symbols are fundamentally different, and should not occasionally convert one into another. If you really want to show a symbol, we need to call `.toString()` on it. diff --git a/files/en-us/glossary/texel/index.md b/files/en-us/glossary/texel/index.md index d1ea495ae18065b..a438c5db9fe5492 100644 --- a/files/en-us/glossary/texel/index.md +++ b/files/en-us/glossary/texel/index.md @@ -9,11 +9,11 @@ tags: - Texel - Texture --- -A **Texel** is a single-pixel within a texture map, which is an image that gets used (in whole or in part) as the image presented on a polygon's surface within a 3D rendered image. It is not to be confused with pixel which is the unit of screen space. This is one of the main differences between Texel’s and pixels, pixels are image data. Texel components are made up of subjective data, therefore they can be an image as well as a depth map. +A **Texel** is a single-pixel within a texture map, which is an image that gets used (in whole or in part) as the image presented on a polygon's surface within a 3D rendered image. It is not to be confused with pixel which is the unit of screen space. This is one of the main differences between Texel's and pixels, pixels are image data. Texel components are made up of subjective data, therefore they can be an image as well as a depth map. -The process of mapping the appropriate Texel’s to their corresponding points on a polygon is called **texture mapping**, which is a stage of the process of rendering a 3D image for display. Texture mapping is typically done prior to lighting the scene; however, in WebGL, lighting is performed as part of the texture mapping process. +The process of mapping the appropriate Texel's to their corresponding points on a polygon is called **texture mapping**, which is a stage of the process of rendering a 3D image for display. Texture mapping is typically done prior to lighting the scene; however, in WebGL, lighting is performed as part of the texture mapping process. -Textures are characterized by collections of Texel’s, as how images are characterized by collections of pixels. When texture mapping occurs the renderer maps Texel’s to the appropriate pixels. +Textures are characterized by collections of Texel's, as how images are characterized by collections of pixels. When texture mapping occurs the renderer maps Texel's to the appropriate pixels. ## See also diff --git a/files/en-us/learn/accessibility/what_is_accessibility/index.md b/files/en-us/learn/accessibility/what_is_accessibility/index.md index 0c5f9a238a15b06..534fb142b49255b 100644 --- a/files/en-us/learn/accessibility/what_is_accessibility/index.md +++ b/files/en-us/learn/accessibility/what_is_accessibility/index.md @@ -112,8 +112,8 @@ A good foundation of accessibility for people with cognitive impairments include ### Notes - Designing with [cognitive accessibility](/en-US/docs/Web/Accessibility/Cognitive_accessibility) will lead to good design practices. They will benefit everyone. -- Many people with cognitive impairments also have physical disabilities. Websites must conform with the W3C’s [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/), including [cognitive accessibility guidelines](/en-US/docs/Web/Accessibility/Cognitive_accessibility#guidelines). -- The W3C’s [Cognitive and Learning Disabilities Accessibility Task Force](https://www.w3.org/WAI/GL/task-forces/coga/) produces web accessibility guidelines for people with cognitive impairments. +- Many people with cognitive impairments also have physical disabilities. Websites must conform with the W3C's [Web Content Accessibility Guidelines](https://www.w3.org/WAI/standards-guidelines/wcag/), including [cognitive accessibility guidelines](/en-US/docs/Web/Accessibility/Cognitive_accessibility#guidelines). +- The W3C's [Cognitive and Learning Disabilities Accessibility Task Force](https://www.w3.org/WAI/GL/task-forces/coga/) produces web accessibility guidelines for people with cognitive impairments. - WebAIM has a [Cognitive page](https://webaim.org/articles/cognitive/) of relevant information and resources. - The United States Centers for Disease Control estimate that, as of 2018, 1 in 4 US citizens have a disability and, of them, [cognitive impairment is the most common for young people](https://www.cdc.gov/media/releases/2018/p0816-disability.html). - In the US, some intellectual disabilities have historically been referred to as "mental retardation." Many now consider this term disparaging, so its use should be avoided. diff --git a/files/en-us/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md b/files/en-us/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md index 7feee9d9f7c4632..e66a02fcfed27da 100644 --- a/files/en-us/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md +++ b/files/en-us/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md @@ -55,7 +55,7 @@ If you want to know whether your website works correctly, the first thing to do Let's look at our personal website, `http://demozilla.examplehostingprovider.net/`. It's not showing the image we expected! -![Oops, the ‘unicorn’ image is missing](image-missing.png) +![Oops, the 'unicorn' image is missing](image-missing.png) Open Firefox's Network tool (**Tools ➤ Web Developer ➤ Network**) and reload the page: @@ -92,7 +92,7 @@ So what went wrong? At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: `unicorn_pics.png` rather than `unicorn_pic.png`. So correct the typo in your code editor by changing the image's `src` attribute: -![Deleting the ‘s’](code-correct.png) +![Deleting the 's'](code-correct.png) Save, [push to the server](/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server), and reload the page in your browser: diff --git a/files/en-us/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md b/files/en-us/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md index a22801fa5bbfffc..1af3925717106fc 100644 --- a/files/en-us/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md +++ b/files/en-us/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md @@ -12,7 +12,7 @@ tags: - publish - website --- -[Google App Engine](https://cloud.google.com/appengine/) is a powerful platform that lets you build and run applications on Google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. Here's a step-by-step guide to hosting your website on Google App Engine. +[Google App Engine](https://cloud.google.com/appengine/) is a powerful platform that lets you build and run applications on Google's infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. Here's a step-by-step guide to hosting your website on Google App Engine. ## Creating a Google Cloud Platform project diff --git a/files/en-us/learn/common_questions/how_much_does_it_cost/index.md b/files/en-us/learn/common_questions/how_much_does_it_cost/index.md index 3a5744c7eabb2ea..a71df350b37732a 100644 --- a/files/en-us/learn/common_questions/how_much_does_it_cost/index.md +++ b/files/en-us/learn/common_questions/how_much_does_it_cost/index.md @@ -139,7 +139,7 @@ Here, costs depend on multiple factors, such as: - Is this a simple website with a few pages of text? Or a more complex, thousand-pages-long website? - Will you want to update it regularly? Or will it be a static website? -- Must the website connect to your company’s IT structure to gather content (say, internal data)? +- Must the website connect to your company's IT structure to gather content (say, internal data)? - Do you want some shiny new feature that is the rage of the moment? At the time of writing, clients are seeking single pages with complex parallax - Will you need the agency to think up user stories or solve complex {{Glossary("UX")}} problems? For example, creating a strategy to engage users, or A/B testing to choose a solution among several ideas diff --git a/files/en-us/learn/common_questions/html_features_for_accessibility/index.md b/files/en-us/learn/common_questions/html_features_for_accessibility/index.md index 48c9682cee087ce..2101fc23e91550e 100644 --- a/files/en-us/learn/common_questions/html_features_for_accessibility/index.md +++ b/files/en-us/learn/common_questions/html_features_for_accessibility/index.md @@ -28,7 +28,7 @@ In this example (which is used purely as a demonstration—do not do this), tabb ## Link Titles -If you have a link that isn’t self-descriptive, or the link destination could benefit from being explained in more detail, you can add information to a link using the `title` attribute. +If you have a link that isn't self-descriptive, or the link destination could benefit from being explained in more detail, you can add information to a link using the `title` attribute. ```html

I'm really bad at writing link text. Click here to find out more.

@@ -44,7 +44,7 @@ _Access keys_ provide easier navigation by assigning a _keyboard shortcut_ to a ## Skip Links -To aid tabbing, you can supply links that allow users to jump over chunks of your web page. You might want to allow someone to jump over a plethora of navigation links, for example, so they can just read a page’s main content rather than cycle through all of the links. +To aid tabbing, you can supply links that allow users to jump over chunks of your web page. You might want to allow someone to jump over a plethora of navigation links, for example, so they can just read a page's main content rather than cycle through all of the links. ```html
diff --git a/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md index c29f831adaec023..6e7e5ae29f40864 100644 --- a/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md +++ b/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md @@ -52,7 +52,7 @@ You will not need to edit the HTML in order to achieve this layout and the techn - Flexbox - CSS Grid Layout -There are a few ways in which you could achieve some of these tasks, and there often isn’t a single right or wrong way to do things. Try a few different approaches and see which works best. Make notes as you experiment. +There are a few ways in which you could achieve some of these tasks, and there often isn't a single right or wrong way to do things. Try a few different approaches and see which works best. Make notes as you experiment. ## Assessment or further help diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md index 90c2c8a20c357a8..6eae06ff38bc990 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -288,7 +288,7 @@ body { ### The minmax() function -Our 100-pixel tall tracks won’t be very useful if we add content into those tracks that is taller than 100 pixels, in which case it would cause an overflow. It might be better to have tracks that are _at least_ 100 pixels tall and can still expand if more content becomes added. A fairly basic fact about the web is that you never really know how tall something is going to be — additional content or larger font sizes can cause problems with designs that attempt to be pixel perfect in every dimension. +Our 100-pixel tall tracks won't be very useful if we add content into those tracks that is taller than 100 pixels, in which case it would cause an overflow. It might be better to have tracks that are _at least_ 100 pixels tall and can still expand if more content becomes added. A fairly basic fact about the web is that you never really know how tall something is going to be — additional content or larger font sizes can cause problems with designs that attempt to be pixel perfect in every dimension. The {{cssxref("minmax()")}} function lets us set a minimum and maximum size for a track, for example, `minmax(100px, auto)`. The minimum size is 100 pixels, but the maximum is `auto`, which will expand to accommodate more content. Try changing `grid-auto-rows` to use a minmax value: @@ -522,14 +522,14 @@ The rules for `grid-template-areas` are as follows: - You need to have every cell of the grid filled. - To span across two cells, repeat the name. - To leave a cell empty, use a `.` (period). -- Areas must be rectangular — for example, you can’t have an L-shaped area. +- Areas must be rectangular — for example, you can't have an L-shaped area. - Areas can't be repeated in different locations. You can play around with our layout, changing the footer to only sit underneath the article and the sidebar to span all the way down. This is a very nice way to describe a layout because it's clear just from looking at the CSS to know exactly what's happening. ## Grid frameworks in CSS Grid -Grid "frameworks" tend to be based around 12 or 16-column grids. With CSS Grid, you don’t need any third party tool to give you such a framework — it's already there in the spec. +Grid "frameworks" tend to be based around 12 or 16-column grids. With CSS Grid, you don't need any third party tool to give you such a framework — it's already there in the spec. [Download the starting point file](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html). This has a container with a 12-column grid defined and the same markup we used in the previous two examples. We can now use line-based placement to place our content on the 12-column grid. diff --git a/files/en-us/learn/css/css_layout/introduction/index.md b/files/en-us/learn/css/css_layout/introduction/index.md index c91deec3c3d063c..680a90fcc81da36 100644 --- a/files/en-us/learn/css/css_layout/introduction/index.md +++ b/files/en-us/learn/css/css_layout/introduction/index.md @@ -92,7 +92,7 @@ The methods that can change how elements are laid out in CSS are: ## The display property -The main methods for achieving page layout in CSS all involve specifying values for the `display` property. This property allows us to change the default way something displays. Everything in normal flow has a default value for `display`; i.e., a default way that elements are set to behave. For example, the fact that paragraphs in English display one below the other is because they are styled with `display: block`. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn’t break onto a new line. This is because the {{htmlelement("a")}} element is `display: inline` by default. +The main methods for achieving page layout in CSS all involve specifying values for the `display` property. This property allows us to change the default way something displays. Everything in normal flow has a default value for `display`; i.e., a default way that elements are set to behave. For example, the fact that paragraphs in English display one below the other is because they are styled with `display: block`. If you create a link around some text inside a paragraph, that link remains inline with the rest of the text, and doesn't break onto a new line. This is because the {{htmlelement("a")}} element is `display: inline` by default. You can change this default display behavior. For example, the {{htmlelement("li")}} element is `display: block` by default, meaning that list items display one below the other in our English document. If we were to change the display value to `inline` they would display next to each other, as words would do in a sentence. The fact that you can change the value of `display` for any element means that you can pick HTML elements for their semantic meaning without being concerned about how they will look. The way they look is something that you can change. @@ -178,7 +178,7 @@ While flexbox is designed for one-dimensional layout, Grid Layout is designed fo ### Setting display: grid -Similar to flexbox, we enable Grid Layout with its specific display value — `display: grid`. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using `display: grid`, we also define some row and column _tracks_ for the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns, each of `1fr`, as well as two rows of `100px`. We don’t need to put any rules on the child elements; they're automatically placed into the cells our grid's created. +Similar to flexbox, we enable Grid Layout with its specific display value — `display: grid`. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using `display: grid`, we also define some row and column _tracks_ for the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns, each of `1fr`, as well as two rows of `100px`. We don't need to put any rules on the child elements; they're automatically placed into the cells our grid's created. ```css hidden * { @@ -324,7 +324,7 @@ p { ## Positioning techniques -Positioning allows you to move an element from where it would otherwise be placed in normal flow over to another location. Positioning isn’t a method for creating the main layouts of a page; it's more about managing and fine-tuning the position of specific items on a page. +Positioning allows you to move an element from where it would otherwise be placed in normal flow over to another location. Positioning isn't a method for creating the main layouts of a page; it's more about managing and fine-tuning the position of specific items on a page. There are, however, useful techniques for obtaining specific layout patterns that rely on the {{cssxref("position")}} property. Understanding positioning also helps in understanding normal flow, and what it means to move an item out of the normal flow. diff --git a/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md b/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md index a4a13665fe64d4c..e6e96906091542d 100644 --- a/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md @@ -42,7 +42,7 @@ Grid systems are a very common feature used in CSS layouts, and before CSS Grid ## Layout and grid systems before CSS Grid Layout -It may seem surprising to anyone coming from a design background that CSS didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs. We now refer to these as "legacy" methods. +It may seem surprising to anyone coming from a design background that CSS didn't have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs. We now refer to these as "legacy" methods. For new projects, in most cases CSS Grid Layout will be used in combination with one or more other modern layout methods to form the basis for any layout. You will however encounter "grid systems" using these legacy methods from time to time. It is worth understanding how they work, and why they are different to CSS Grid Layout. @@ -183,7 +183,7 @@ Now use the row container that is wrapped around each row of the grid to clear o } ``` -Applying this clearing means that we don’t need to completely fill each row with elements making the full twelve columns. The rows will remain separated, and not interfere with each other. +Applying this clearing means that we don't need to completely fill each row with elements making the full twelve columns. The rows will remain separated, and not interfere with each other. The gutters between the columns are 20 pixels wide. We create these gutters as a margin on the left side of each column — including the first column, to balance out the 20 pixels of padding on the right hand side of the container. So we have 12 gutters in total — 12 x 20 = 240. @@ -414,7 +414,7 @@ Try loading and refreshing to see the difference, or check out our [fluid-grid-o ### Floated grid limitations -When using a system like this you do need to take care that your total widths add up correctly, and that you don’t include elements in a row that span more columns than the row can contain. Due to the way floats work, if the number of grid columns becomes too wide for the grid, the elements on the end will drop down to the next line, breaking the grid. +When using a system like this you do need to take care that your total widths add up correctly, and that you don't include elements in a row that span more columns than the row can contain. Due to the way floats work, if the number of grid columns becomes too wide for the grid, the elements on the end will drop down to the next line, breaking the grid. Also bear in mind that if the content of the elements gets wider than the rows they occupy, it will overflow and look a mess. @@ -422,7 +422,7 @@ The biggest limitation of this system is that it is essentially one dimensional. ## Flexbox grids? -If you read our previous article about [flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox), you might think that flexbox is the ideal solution for creating a grid system. There are many flexbox-based grid systems available and flexbox can solve many of the issues that we’ve already discovered when creating our grid above. +If you read our previous article about [flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox), you might think that flexbox is the ideal solution for creating a grid system. There are many flexbox-based grid systems available and flexbox can solve many of the issues that we've already discovered when creating our grid above. However, flexbox was never designed as a grid system and poses a new set of challenges when used as one. As a simple example of this, we can take the same example markup we used above and use the following CSS to style the `wrapper`, `row`, and `col` classes: @@ -462,11 +462,11 @@ On the top line we get twelve neat boxes on the grid and they grow and shrink eq To fix this we still need to include our `span` classes to provide a width that will replace the value used by `flex-basis` for that element. -They also don’t respect the grid used by the items above because they don’t know anything about it. +They also don't respect the grid used by the items above because they don't know anything about it. -Flexbox is **one-dimensional** by design. It deals with a single dimension, that of a row or a column. We can’t create a strict grid for columns and rows, meaning that if we are to use flexbox for our grid, we still need to calculate percentages as for the floated layout. +Flexbox is **one-dimensional** by design. It deals with a single dimension, that of a row or a column. We can't create a strict grid for columns and rows, meaning that if we are to use flexbox for our grid, we still need to calculate percentages as for the floated layout. -In your project you might still choose to use a flexbox ‘grid’ due to the additional alignment and space distribution capabilities flexbox provides over floats. You should, however, be aware that you are still using a tool for something other than what it was designed for. So you may feel like it is making you jump through additional hoops to get the end result you want. +In your project you might still choose to use a flexbox 'grid' due to the additional alignment and space distribution capabilities flexbox provides over floats. You should, however, be aware that you are still using a tool for something other than what it was designed for. So you may feel like it is making you jump through additional hoops to get the end result you want. ## Third party grid systems @@ -485,7 +485,7 @@ Include the skeleton and normalize CSS in the HTML page, by adding the following ``` -Skeleton includes more than a grid system — it also contains CSS for typography and other page elements that you can use as a starting point. We’ll leave these at the defaults for now, however — it’s the grid we are really interested in here. +Skeleton includes more than a grid system — it also contains CSS for typography and other page elements that you can use as a starting point. We'll leave these at the defaults for now, however — it's the grid we are really interested in here. > **Note:** [Normalize](https://necolas.github.io/normalize.css/) is a really useful little CSS library written by Nicolas Gallagher, which automatically does some useful basic layout fixes and makes default element styling more consistent across browsers. @@ -569,7 +569,7 @@ If you look in the skeleton.css file you can see how this works. For example, Sk .three.columns { width: 22%; } ``` -All Skeleton (or any other grid framework) is doing is setting up predefined classes that you can use by adding them to your markup. It’s exactly the same as if you did the work of calculating these percentages yourself. +All Skeleton (or any other grid framework) is doing is setting up predefined classes that you can use by adding them to your markup. It's exactly the same as if you did the work of calculating these percentages yourself. As you can see, we need to write very little CSS when using Skeleton. It deals with all of the floating for us when we add classes to our markup. It is this ability to hand responsibility for layout over to something else that made using a framework for a grid system a compelling choice! However these days, with CSS Grid Layout, many developers are moving away from these frameworks to use the inbuilt native grid that CSS provides. diff --git a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md index 82bcdb74a8364f6..c43334a14e9389c 100644 --- a/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md +++ b/files/en-us/learn/css/css_layout/supporting_older_browsers/index.md @@ -60,7 +60,7 @@ Understanding the technology your users have, and the support for things you mig ## Support doesn't mean "looks the same" -A website can’t possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen. Similarly, some of your users will have an old browser version, and others the latest browser. Some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it. Supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers. +A website can't possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen. Similarly, some of your users will have an old browser version, and others the latest browser. Some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it. Supporting everyone means serving a version of your content that is designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers. A basic level of support comes from structuring your content well so that the normal flow of your page makes sense. A user with a very limited feature phone might not get much of your CSS, but the content will flow in a way that makes reading easy. Therefore, a well-structured HTML document should always be your starting point. _If you remove your stylesheet, does your content make sense?_ @@ -68,7 +68,7 @@ One option is to leave this plain view of the site as the fallback for people us ## Creating fallbacks in CSS -CSS specifications contain information that explains what the browser does when two layout methods are applied to the same item. This means that there is a definition for what happens if a floated item, for example, is also a Grid Item using CSS Grid Layout. Couple this information with the knowledge that browsers ignore CSS that they don’t understand, and you have a way to create simple layouts using the [legacy techniques](/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) we have already covered, which are then overwritten by your Grid layout in modern browsers that understand it. +CSS specifications contain information that explains what the browser does when two layout methods are applied to the same item. This means that there is a definition for what happens if a floated item, for example, is also a Grid Item using CSS Grid Layout. Couple this information with the knowledge that browsers ignore CSS that they don't understand, and you have a way to create simple layouts using the [legacy techniques](/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) we have already covered, which are then overwritten by your Grid layout in modern browsers that understand it. ### Falling back from grid to float @@ -158,7 +158,7 @@ To deal with this issue we need to have a way to detect if Grid is supported and ## Feature queries -Feature queries allow you to test whether a browser supports any particular CSS feature. This means that you can write some CSS for browsers that don’t support a certain feature, then check to see if the browser has support and if so throw in your fancy layout. +Feature queries allow you to test whether a browser supports any particular CSS feature. This means that you can write some CSS for browsers that don't support a certain feature, then check to see if the browser has support and if so throw in your fancy layout. If we add a feature query to the above example, we can use it to set the widths of our items back to `auto` if we know that we have grid support. @@ -200,7 +200,7 @@ If we add a feature query to the above example, we can use it to set the widths Support for feature queries is very good across modern browsers. However, you should note that browsers that do not support CSS Grid also tend not to support feature queries. This means that an approach as detailed above will work for those browsers. What we are doing is writing our old CSS first, outside of any feature query. Browsers that do not support Grid, and do not support the feature query will use that layout information they can understand and completely ignore everything else. The browsers that support the feature query also support CSS Grid and so will run the grid code and the code inside the feature query. -The specification for feature queries also contains the ability to test if a browser does not support a feature — this is only helpful if the browser does support feature queries. In the future, an approach of checking for lack of support will work, as the browsers that don’t have feature query support go away. For now, however, use the approach of doing the older CSS, then overwriting it, for the best support. +The specification for feature queries also contains the ability to test if a browser does not support a feature — this is only helpful if the browser does support feature queries. In the future, an approach of checking for lack of support will work, as the browsers that don't have feature query support go away. For now, however, use the approach of doing the older CSS, then overwriting it, for the best support. ## Older versions of Flexbox diff --git a/files/en-us/learn/css/styling_text/fundamentals/index.md b/files/en-us/learn/css/styling_text/fundamentals/index.md index c397b41f155c0fb..92daec1651771ef 100644 --- a/files/en-us/learn/css/styling_text/fundamentals/index.md +++ b/files/en-us/learn/css/styling_text/fundamentals/index.md @@ -466,7 +466,7 @@ The four properties are as follows: 1. The horizontal offset of the shadow from the original text — this can take most available CSS [length and size units](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size), but you'll most commonly use `px`; positive values move the shadow right, and negative values left. This value has to be included. 2. The vertical offset of the shadow from the original text. This behaves similarly to the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included. 3. The blur radius: a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS [length and size units](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#length_and_size). -4. The base color of the shadow, which can take any [CSS color unit](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#colors). If not included, it defaults to [`currentColor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword), i.e. the shadow’s color is taken from the element’s [`color`](/en-US/docs/Web/CSS/color) property. +4. The base color of the shadow, which can take any [CSS color unit](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#colors). If not included, it defaults to [`currentColor`](/en-US/docs/Web/CSS/color_value#currentcolor_keyword), i.e. the shadow's color is taken from the element's [`color`](/en-US/docs/Web/CSS/color) property. #### Multiple shadows diff --git a/files/en-us/learn/css/styling_text/web_fonts/index.md b/files/en-us/learn/css/styling_text/web_fonts/index.md index 75c1529a115726b..83952d46b75a0de 100644 --- a/files/en-us/learn/css/styling_text/web_fonts/index.md +++ b/files/en-us/learn/css/styling_text/web_fonts/index.md @@ -85,7 +85,7 @@ Here are some important things to bear in mind about web fonts: 1. Fonts generally aren't free to use. You have to pay for them and/or follow other license conditions, such as crediting the font creator in your code (or on your site). You shouldn't steal fonts and use them without giving proper credit. 2. All major browsers support WOFF/WOFF2 (Web Open Font Format versions 1 and 2). Even older browsers such as IE9 (released in 2011) support the WOFF format. 3. WOFF2 supports the entirety of the TrueType and OpenType specifications, including variable fonts, chromatic fonts, and font collections. -4. The order in which you list font files is important. If you provide the browser with a list of multiple font files to download, the browser will choose the first font file it’s able to use. That's why the format you list first should be the preferred format — that is, WOFF2 — with the older formats listed after that. Browsers that don't understand one format will then fall back to the next format in the list. +4. The order in which you list font files is important. If you provide the browser with a list of multiple font files to download, the browser will choose the first font file it's able to use. That's why the format you list first should be the preferred format — that is, WOFF2 — with the older formats listed after that. Browsers that don't understand one format will then fall back to the next format in the list. 5. If you need to work with legacy browsers, you should provide EOT (Embedded Open Type), TTF (TrueType Font), and SVG web fonts for download. This article explains how to use the Fontsquirrel Webfont Generator to generate the required files. > **Note:** Web fonts as a technology have been supported in Internet Explorer since version 4! diff --git a/files/en-us/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/en-us/learn/getting_started_with_the_web/how_the_web_works/index.md index bd049519e87c242..aa3f070fc833f8d 100644 --- a/files/en-us/learn/getting_started_with_the_web/how_the_web_works/index.md +++ b/files/en-us/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -58,7 +58,7 @@ When you type a web address into your browser (for our analogy that's like walki ## Order in which component files are parsed -When browsers send requests to servers for HTML files, those HTML files often contain {{htmlelement("link")}} elements referencing external [CSS](/en-US/docs/Learn/CSS) stylesheets and {{htmlelement("script")}} elements referencing external [JavaScript](/en-US/docs/Learn/JavaScript) scripts. It’s important to know the order in which those files are [parsed by the browser](/en-US/docs/Web/Performance/How_browsers_work#parsing) as the browser loads the page: +When browsers send requests to servers for HTML files, those HTML files often contain {{htmlelement("link")}} elements referencing external [CSS](/en-US/docs/Learn/CSS) stylesheets and {{htmlelement("script")}} elements referencing external [JavaScript](/en-US/docs/Learn/JavaScript) scripts. It's important to know the order in which those files are [parsed by the browser](/en-US/docs/Web/Performance/How_browsers_work#parsing) as the browser loads the page: - The browser parses the HTML file first, and that leads to the browser recognizing any ``-element references to external CSS stylesheets and any ` ``` -However, this approach has some limitations. To build more complex apps, you’ll want to use the [Vue NPM package](https://www.npmjs.com/package/vue). This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need: +However, this approach has some limitations. To build more complex apps, you'll want to use the [Vue NPM package](https://www.npmjs.com/package/vue). This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need: 1. Node.js 8.11+ installed. 2. npm or yarn. @@ -96,7 +96,7 @@ yarn global add @vue/cli Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run `vue create `. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more. -We’ll look at using this below. +We'll look at using this below. ## Initializing a new project @@ -109,13 +109,13 @@ To explore various features of Vue, we will be building up a sample todo list ap to select the "Manually select features" option. -3. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press +3. The first menu you'll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press Enter to proceed. -4. Next, you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit +4. Next, you'll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit Enter @@ -145,7 +145,7 @@ To explore various features of Vue, we will be building up a sample todo list ap The CLI will now begin scaffolding out your project, and installing all of your dependencies. -If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag `--packageManager=`, when you run `vue create`. So if you wanted to create the `moz-todo-vue` project with npm and you'd previously chosen yarn, you’d run `vue create moz-todo-vue --packageManager=npm`. +If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag `--packageManager=`, when you run `vue create`. So if you wanted to create the `moz-todo-vue` project with npm and you'd previously chosen yarn, you'd run `vue create moz-todo-vue --packageManager=npm`. > **Note:** We've not gone over all of the options here, but you can [find more information on the CLI](https://cli.vuejs.org) in the Vue docs. @@ -184,7 +184,7 @@ Let's explore this now. ### App.vue -Open your `App.vue` file — you’ll see that it has three parts: `