diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md index f426366e52cf110..d44ce90accda428 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/editor/index.md @@ -77,7 +77,7 @@ Now click on the play arrow in the top right corner of the scene to launch and r This looks great! Let's add more shapes to the scene to make it look more interesting. -![PlayCanvas Editor - Boxrender](playcanvas-editor-boxrender.png) +![PlayCanvas Editor - Box render](playcanvas-editor-boxrender.png) ## Adding more shapes @@ -97,7 +97,7 @@ Now follow the same steps as we did before when coloring the cube: ![PlayCanvas Editor - Cylinder material](playcanvas-editor-cylindermaterial.png) -Follow the same approach again to add a cone to the scene, giving it a grayish color (we used EAEFF2.) You should now have three shapes on your scene, something like the below screenshot. +Follow the same approach again to add a cone to the scene, giving it a grayish color (we used `#EAEFF2`.) You should now have three shapes on your scene, something like the below screenshot. ![PlayCanvas Editor - Cone](playcanvas-editor-cone.png) diff --git a/files/en-us/games/techniques/audio_for_web_games/index.md b/files/en-us/games/techniques/audio_for_web_games/index.md index a21425554bb5e9d..d2593d6b52808bd 100644 --- a/files/en-us/games/techniques/audio_for_web_games/index.md +++ b/files/en-us/games/techniques/audio_for_web_games/index.md @@ -143,7 +143,7 @@ The advantage is that we can prime one piece of audio and have our sprites ready ```js const myAudio = document.createElement("audio"); -myAudio.src = "mysprite.mp3"; +myAudio.src = "my-sprite.mp3"; myAudio.play(); myAudio.pause(); ``` diff --git a/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md b/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md index da104d7f69b9791..f75e1fb5aa5bdf8 100644 --- a/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md +++ b/files/en-us/games/techniques/control_mechanisms/desktop_with_gamepad/index.md @@ -346,9 +346,9 @@ if (gamepadAPI.buttonPressed("B")) { } ``` -## The paused and gameover states +## The paused and game-over states -We already learned how to control the whole lifecycle of the game: pausing the gameplay, restarting it, or getting back to the main menu. It works smooth on mobile and desktop, and adding gamepad controls is just as straightforward — in the `update()` function, we check to see if the current state status is `paused` — if so, the relevant actions are enabled: +We already learned how to control the whole lifecycle of the game: pausing the gameplay, restarting it, or getting back to the main menu. It works smooth on mobile and desktop, and adding gamepad controls is just as straightforward — in the `update()` function, we check to see if the current state status is "paused" — if so, the relevant actions are enabled: ```js if (GamepadAPI.buttons.pressed("Start")) { @@ -360,7 +360,7 @@ if (GamepadAPI.buttons.pressed("Back")) { } ``` -Similarly, when the `gameover` state status is active, then we can allow the user to restart the game instead of continuing it: +Similarly, when the "game-over" state status is active, then we can allow the user to restart the game instead of continuing it: ```js if (GamepadAPI.buttons.pressed("Start")) { diff --git a/files/en-us/games/techniques/control_mechanisms/other/index.md b/files/en-us/games/techniques/control_mechanisms/other/index.md index abbc4f722173692..463c0375a3bbde1 100644 --- a/files/en-us/games/techniques/control_mechanisms/other/index.md +++ b/files/en-us/games/techniques/control_mechanisms/other/index.md @@ -72,7 +72,7 @@ You can see it in action by watching [this video](https://www.youtube.com/watch? Have you ever thought about controlling a game only with your hands? It's possible with [Leap Motion](https://www.ultraleap.com/), an immersive controller for games and apps. -Leapmotion is becoming more and more popular due to very good integration with VR headsets — demoing [Rainbow Membrane](https://mozilla.github.io/rainbow/) on an Oculus Rift with Leap Motion attached to it was voted one of the best WebVR experiences by JavaScript developers visiting demo booths at conferences around the world. +Leap Motion is becoming more and more popular due to very good integration with VR headsets — demoing [Rainbow Membrane](https://mozilla.github.io/rainbow/) on an Oculus Rift with Leap Motion attached to it was voted one of the best WebVR experiences by JavaScript developers visiting demo booths at conferences around the world. As well as being great for virtual interfaces, it can also be used for a casual 2D gaming experiences. It would be very difficult to do everything with only your hands, but it's totally doable for the simple Captain Roger's gameplay — steering the ship and shooting the bullets. @@ -158,15 +158,15 @@ The `diff` would be the difference between the initial position of the hand and This approach won't give us the full flexibility of using a Gamepad, or even Leap Motion, but it's definitely an interesting, unconventional alternative. You can use it to scroll a page hands-free, or play theremin, but it should also be enough to move the ship up and down the screen if implemented correctly. -## MaKey MaKey +## Makey Makey -If you want to go completely bananas you can use [MaKey MaKey](https://makeymakey.com/), a board that can turn anything into a controller — it's all about connecting real-world, conductive objects to a computer and using them as touch interfaces. +If you want to go completely bananas you can use [Makey Makey](https://makeymakey.com/), a board that can turn anything into a controller — it's all about connecting real-world, conductive objects to a computer and using them as touch interfaces. ![Controlling a banana piano using Makey Makey.](controls-banana.png) Check out the [banana piano video](https://www.youtube.com/watch?v=_DWQ6ce2Ags), and be sure to visit the [quick start guide](https://learn.sparkfun.com/tutorials/makey-makey-quickstart-guide) for all the needed info. -There's even a [Cylon.js-supported Makey Button functionality](https://cylonjs.com/documentation/drivers/makey-button/) inspired by the MaKey MaKey board, so you can use the popular Cylon robotics framework for your experiments with Arduino or Raspberry Pi. Connecting the boards and using them may look like this: +There's even a [Cylon.js-supported Makey Button functionality](https://cylonjs.com/documentation/drivers/makey-button/) inspired by the Makey Makey board, so you can use the popular Cylon robotics framework for your experiments with Arduino or Raspberry Pi. Connecting the boards and using them may look like this: ```js const Cylon = require("cylon"); diff --git a/files/en-us/games/techniques/tilemaps/index.md b/files/en-us/games/techniques/tilemaps/index.md index d96511c9995b60c..456185408c7f465 100644 --- a/files/en-us/games/techniques/tilemaps/index.md +++ b/files/en-us/games/techniques/tilemaps/index.md @@ -133,4 +133,4 @@ In fast games that might still not be enough. An alternative method would be to - [Demos and source code](https://mozdevs.github.io/gamedev-js-tiles/) - [Grid parts and relationships](https://www.redblobgames.com/grids/parts/) by Amit Patel (May 2021) - - [Isometric graphics in videogames](https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art) (Wikipedia) + - [Isometric graphics in video games](https://en.wikipedia.org/wiki/Isometric_graphics_in_video_games_and_pixel_art) (Wikipedia) diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md index 1dff3c1ff633907..c1fc64c70c6581f 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/index.md @@ -28,7 +28,7 @@ All the lessons — and the different versions of the [MDN Breakout game](https: 6. [Bounce off the walls](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls) 7. [Player paddle and controls](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls) 8. [Game over](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over) -9. [Build the brickfield](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field) +9. [Build the brick field](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field) 10. [Collision detection](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection) 11. [The score](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score) 12. [Win the game](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Win_the_game) diff --git a/files/en-us/glossary/accessible_name/index.md b/files/en-us/glossary/accessible_name/index.md index d573dcb58d1eb39..7e5cbe6cdb81c7a 100644 --- a/files/en-us/glossary/accessible_name/index.md +++ b/files/en-us/glossary/accessible_name/index.md @@ -18,7 +18,7 @@ Other elements get their accessible name from the content of associated elements For some elements, the accessible name comes from the element's attributes; for example, the `alt` attribute in the case of {{HTMLElement("img")}}. Given `banana`, the image's accessible name is "banana." -To create an association between visible content and an element or multiple text nodes and an element, the [`aria-labeledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute can be used. If there is no visible text to associate with a UI element needing an accessible name, the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute can be used. Names should not be added to elements marking up inline text, like {{HTMLElement("code")}}, {{HTMLElement("del")}}, and {{HTMLElement("mark")}}. +To create an association between visible content and an element or multiple text nodes and an element, the [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) attribute can be used. If there is no visible text to associate with a UI element needing an accessible name, the [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute can be used. Names should not be added to elements marking up inline text, like {{HTMLElement("code")}}, {{HTMLElement("del")}}, and {{HTMLElement("mark")}}. Many elements, such as sections of textual content, don't need an accessible name. All controls should have an accessible name. All images that convey information and aren't purely presentational do too. diff --git a/files/en-us/glossary/entity_header/index.md b/files/en-us/glossary/entity_header/index.md index dc5698d0773e74c..d8d80d70fd26478 100644 --- a/files/en-us/glossary/entity_header/index.md +++ b/files/en-us/glossary/entity_header/index.md @@ -14,7 +14,7 @@ An entity header is an {{glossary("HTTP_header", "HTTP header")}} that describes In the following example, {{HTTPHeader("Content-Length")}} is an entity header, while {{HTTPHeader("Host")}} and {{HTTPHeader("User-Agent")}} are requests headers: ```http -POST /myform.html HTTP/1.1 +POST /my-form.html HTTP/1.1 Host: developer.mozilla.org User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 Content-Length: 128 diff --git a/files/en-us/glossary/falsy/index.md b/files/en-us/glossary/falsy/index.md index 220cbfd7449fdee..f8c80f3ed761ebb 100644 --- a/files/en-us/glossary/falsy/index.md +++ b/files/en-us/glossary/falsy/index.md @@ -6,6 +6,8 @@ page-type: glossary-definition {{GlossarySidebar}} + + A **falsy** (sometimes written **falsey**) value is a value that is considered false when encountered in a {{Glossary("Boolean")}} context. {{Glossary("JavaScript")}} uses {{Glossary("Type_Conversion", "type conversion")}} to coerce any value to a Boolean in contexts that require it, such as {{Glossary("Conditional", "conditionals")}} and {{Glossary("Loop", "loops")}}. diff --git a/files/en-us/glossary/fetch_metadata_request_header/index.md b/files/en-us/glossary/fetch_metadata_request_header/index.md index 916af11fa2b5dc5..a0790b55248a064 100644 --- a/files/en-us/glossary/fetch_metadata_request_header/index.md +++ b/files/en-us/glossary/fetch_metadata_request_header/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition A **fetch metadata request header** is an {{Glossary("Request header", "HTTP request header")}} that provides additional information about the context from which the request originated. This allows the server to make decisions about whether a request should be allowed based on where the request came from and how the resource will be used. -With this information a server can implement a resource isolation policy, allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as {{Glossary("CSRF")}}, Cross-site Script Inclusion('XSSI'), timing attacks, and cross-origin information leaks. +With this information a server can implement a resource isolation policy, allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as {{Glossary("CSRF")}}, Cross-site Script Inclusion (XSSI), timing attacks, and cross-origin information leaks. These headers are prefixed with `Sec-`, and hence have {{Glossary("Forbidden header name", "forbidden header names")}}. As such, they cannot be modified from JavaScript. diff --git a/files/en-us/glossary/page_load_time/index.md b/files/en-us/glossary/page_load_time/index.md index 7a56ad16b4b2b03..9ae8ce6cd31ab18 100644 --- a/files/en-us/glossary/page_load_time/index.md +++ b/files/en-us/glossary/page_load_time/index.md @@ -11,7 +11,7 @@ page-type: glossary-definition ```js let time = performance.timing; -let pageloadtime = time.loadEventStart - time.navigationStart; +let pageloadTime = time.loadEventStart - time.navigationStart; ``` While page load time 'sounds' like the perfect web performance metric, it isn't. Load times can vary greatly between users depending on device capabilities, network conditions, and, to a lesser extent, distance from the server. The development environment, where page load time is measured, is likely an optimal experience, not reflective of your users' reality. In addition, web performance isn't just about when the load event happens. It's also about {{Glossary("perceived performance")}}, responsiveness, {{Glossary("jank")}} and jitter. diff --git a/files/en-us/glossary/php/index.md b/files/en-us/glossary/php/index.md index 9aadb7a83e2c0db..9e8317259dfc554 100644 --- a/files/en-us/glossary/php/index.md +++ b/files/en-us/glossary/php/index.md @@ -33,15 +33,15 @@ PHP (a recursive initialism for PHP: Hypertext Preprocessor) is an open-source s ```php ``` diff --git a/files/en-us/glossary/response_header/index.md b/files/en-us/glossary/response_header/index.md index a7d68b21ee05377..7a272a0910d653a 100644 --- a/files/en-us/glossary/response_header/index.md +++ b/files/en-us/glossary/response_header/index.md @@ -23,7 +23,7 @@ Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a" Keep-Alive: timeout=5, max=997 Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT Server: Apache -Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure +Set-Cookie: my-key=my value; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure Transfer-Encoding: chunked Vary: Cookie, Accept-Encoding X-Backend-Server: developer2.webapp.scl3.mozilla.com diff --git a/files/en-us/learn/accessibility/multimedia/index.md b/files/en-us/learn/accessibility/multimedia/index.md index 5346fe1120e2d0d..5f5129e9b3c7490 100644 --- a/files/en-us/learn/accessibility/multimedia/index.md +++ b/files/en-us/learn/accessibility/multimedia/index.md @@ -118,7 +118,7 @@ First of all, let's look at the HTML for the video player, in the HTML:
- + @@ -134,7 +134,7 @@ We've inserted some simple control buttons below our video. These controls of co We will first need to store references to each of the controls — add the following to the top of your JavaScript file: ```js -const playPauseBtn = document.querySelector(".playpause"); +const playPauseBtn = document.querySelector(".play-pause"); const stopBtn = document.querySelector(".stop"); const rwdBtn = document.querySelector(".rwd"); const fwdBtn = document.querySelector(".fwd"); @@ -250,7 +250,7 @@ It is not OK to publish an audio resource but promise to publish the transcript If you use an automated service, then you'll probably have to use the user interface that the tool provides. For example, take a look at our [Wait, ARIA Roles Have Categories?](https://www.youtube.com/watch?v=mwF-PpJOjMs) video and choose the three-dot menu (. . .) _> Show Transcript_. You'll see the transcript come up in a separate panel. -If you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hideable panel; see our [audio-transcript-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) example (also see the [source code](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/audio-transcript-ui)). +If you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hidable panel; see our [audio-transcript-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) example (also see the [source code](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/audio-transcript-ui)). ### Audio descriptions diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index 687278818773c96..5906ae497e7a4e9 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -343,18 +343,18 @@ which is hidden from view using absolute positioning. When this is checked/unche ```js function toggleMusician(bool) { - const instruItem = formItems[formItems.length - 1]; + const instrument = formItems[formItems.length - 1]; if (bool) { - instruItem.input.disabled = false; - instruItem.label.style.color = "#000"; - instruItem.input.setAttribute("aria-disabled", "false"); + instrument.input.disabled = false; + instrument.label.style.color = "#000"; + instrument.input.setAttribute("aria-disabled", "false"); hiddenAlert.textContent = "Instruments played field now enabled; use it to tell us what you play."; } else { - instruItem.input.disabled = true; - instruItem.label.style.color = "#999"; - instruItem.input.setAttribute("aria-disabled", "true"); - instruItem.input.removeAttribute("aria-label"); + instrument.input.disabled = true; + instrument.label.style.color = "#999"; + instrument.input.setAttribute("aria-disabled", "true"); + instrument.input.removeAttribute("aria-label"); hiddenAlert.textContent = "Instruments played field now disabled."; } } diff --git a/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md index f16d6caa5f29015..079b3802ef54df6 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md @@ -54,7 +54,7 @@ There are several SFTP clients out there. Our demo covers [FileZilla](https://fi Open the FileZilla application; you should see something like this: -![Screenshot of the user interface of Filezilla FTP application. Host input has focus.](filezilla-ui.png) +![Screenshot of the user interface of FileZilla FTP application. Host input has focus.](filezilla-ui.png) ### Logging in diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md index 5fcaf7b4fc5cb57..37a5fa7bd2e1be1 100644 --- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -260,7 +260,7 @@ The individual properties include the {{cssxref("border-width")}}, {{cssxref("bo } ``` -There are longhand properities for width, style, and color for each of the four sides: +There are longhand properties for width, style, and color for each of the four sides: ```css .box { diff --git a/files/en-us/learn/css/building_blocks/cascade_layers/index.md b/files/en-us/learn/css/building_blocks/cascade_layers/index.md index 6ce5a06656373ca..a30e6cd800f4a7e 100644 --- a/files/en-us/learn/css/building_blocks/cascade_layers/index.md +++ b/files/en-us/learn/css/building_blocks/cascade_layers/index.md @@ -285,12 +285,12 @@ Let's look at the following example: ```css @import url("components-lib.css") layer(components); -@import url("narrowtheme.css") layer(components.narrow); +@import url("narrow-theme.css") layer(components.narrow); ``` In the first line, we import `components-lib.css` into the `components` layer. If that file contains any layers, named or not, those layers become nested layers within the `components` layer. -The second line imports `narrowtheme.css` into the `narrow` layer, which is a sub-layer of `components`. The nested `components.narrow` gets created as the last layer within the `components` layer, unless `components-lib.css` already contains a `narrow` layer, in which case, the contents of `narrowtheme.css` would be appended to the `components.narrow` nested layer. Additional nested named layers can be added to the `components` layer using the pattern `components.`. As mentioned before, unnamed layers can be created but they cannot be accessed subsequently. +The second line imports `narrow-theme.css` into the `narrow` layer, which is a sub-layer of `components`. The nested `components.narrow` gets created as the last layer within the `components` layer, unless `components-lib.css` already contains a `narrow` layer, in which case, the contents of `narrow-theme.css` would be appended to the `components.narrow` nested layer. Additional nested named layers can be added to the `components` layer using the pattern `components.`. As mentioned before, unnamed layers can be created but they cannot be accessed subsequently. Let's look at another example, where we [import `layers1.css` into a named layer](#the_layer_block_at-rule_for_named_and_anonymous_layers) using the following statement: diff --git a/files/en-us/learn/css/building_blocks/images_tasks/index.md b/files/en-us/learn/css/building_blocks/images_tasks/index.md index 8419f0c11a2c30e..7b6ae4f9a36e15c 100644 --- a/files/en-us/learn/css/building_blocks/images_tasks/index.md +++ b/files/en-us/learn/css/building_blocks/images_tasks/index.md @@ -33,7 +33,7 @@ Try updating the live code below to recreate the finished example: In this task, you have a simple form. Your task is to make the following changes: -- Use attribute selectors to target the search field and button inside `.myform`. +- Use attribute selectors to target the search field and button inside `.my-form`. - Make the form field and button use the same text size as the rest of the form. - Give the form field and button 10 px of padding. - Give the button a background of `rebeccapurple`, white foreground, no border and rounded corners of 5px. diff --git a/files/en-us/learn/css/building_blocks/organizing/index.md b/files/en-us/learn/css/building_blocks/organizing/index.md index 0a33fddc876f462..46e65d7f178c17a 100644 --- a/files/en-us/learn/css/building_blocks/organizing/index.md +++ b/files/en-us/learn/css/building_blocks/organizing/index.md @@ -157,7 +157,7 @@ After this section, we could define a few utility classes, for example, a class ```css /* || UTILITIES */ -.nobullets { +.no-bullets { list-style: none; margin: 0; padding: 0; @@ -169,7 +169,7 @@ After this section, we could define a few utility classes, for example, a class Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on. ```css -/* || SITEWIDE */ +/* SITEWIDE */ .main-nav { /* … */ diff --git a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md index 8efff32c9d6d0ee..9e02b57b08b572e 100644 --- a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md @@ -184,8 +184,8 @@ Each CSS rule starts with a selector — or a list of selectors — in order to ```css h1 a:link -.manythings -#onething +.many-things +#one-thing * .box p .box p:first-child 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 3da26ecf79b015b..f190270ebf0f6a2 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 @@ -90,7 +90,7 @@ You should use the [web-font-start.html](https://github.com/mdn/learning-area/bl For this example, we'll use two web fonts: one for the headings and one for the body text. To start with, we need to find the font files that contain the fonts. Fonts are created by font foundries and are stored in different file formats. There are generally three types of sites where you can obtain fonts: -- A free font distributor: This is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). Examples include [Font Squirrel](https://www.fontsquirrel.com/), [dafont](https://www.dafont.com/), and [Everything Fonts](https://everythingfonts.com/). +- A free font distributor: This is a site that makes free fonts available for download (there may still be some license conditions, such as crediting the font creator). Examples include [Font Squirrel](https://www.fontsquirrel.com/), [DaFont](https://www.dafont.com/), and [Everything Fonts](https://everythingfonts.com/). - A paid font distributor: This is a site that makes fonts available for a charge, such as [fonts.com](https://www.fonts.com/) or [myfonts.com](https://www.myfonts.com/). You can also buy fonts directly from font foundries, for example [Linotype](https://www.linotype.com/), [Monotype](https://www.monotype.com/), or [Exljbris](https://www.exljbris.com/). - An online font service: This is a site that stores and serves the fonts for you, making the whole process easier. See the [Using an online font service](#using_an_online_font_service) section for more details. @@ -118,7 +118,7 @@ If you need to support legacy browsers, select the "Expert" mode in the Fontsqui Web services for font generation typically limit file sizes. In such a case, consider using tools such as: 1. [sfnt2woff-zopfli](https://github.com/bramstein/sfnt2woff-zopfli) for converting ttf to woff -2. [fontforge](https://fontforge.org/) for converting from ttf to svg +2. [FontForge](https://fontforge.org/) for converting from ttf to svg 3. [batik ttf2svg](https://xmlgraphics.apache.org/batik/tools/font-converter.html) for converting from ttf to svg 4. [woff2](https://github.com/google/woff2) for converting from ttf to woff2 diff --git a/files/en-us/learn/forms/basic_native_form_controls/index.md b/files/en-us/learn/forms/basic_native_form_controls/index.md index 5a6255a361fb0e4..628cb55ee614985 100644 --- a/files/en-us/learn/forms/basic_native_form_controls/index.md +++ b/files/en-us/learn/forms/basic_native_form_controls/index.md @@ -222,7 +222,7 @@ Then we also have the {{htmlelement("button")}} element itself. This can take a ``` ```html hidden -
+

Using <input>

@@ -243,8 +243,8 @@ button, input { display: none; } -.buttondemo button, -.buttondemo input { +.button-demo button, +.button-demo input { all: revert; } ``` diff --git a/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md b/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md index ea509ab353c9bd7..4fb9b79cd177dfb 100644 --- a/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md +++ b/files/en-us/learn/forms/how_to_structure_a_web_form/example/index.md @@ -56,7 +56,7 @@ This the example for a basic payment form for the article [How to structure an H Email: * - +

- +

- +

- +

- - + +
@@ -378,10 +378,10 @@ Let's have a look at an example that does just this. First of all, the HTML is a
-
diff --git a/files/en-us/learn/forms/your_first_form/index.md b/files/en-us/learn/forms/your_first_form/index.md index a961ef1f442e70b..fbffc9f67823a5b 100644 --- a/files/en-us/learn/forms/your_first_form/index.md +++ b/files/en-us/learn/forms/your_first_form/index.md @@ -214,7 +214,7 @@ label { input, textarea { /* To make sure that all text fields have the same font settings - By default, textareas have a monospace font */ + By default, text areas have a monospace font */ font: 1em sans-serif; /* Uniform text field size */ width: 300px; diff --git a/files/en-us/learn/getting_started_with_the_web/css_basics/index.md b/files/en-us/learn/getting_started_with_the_web/css_basics/index.md index 9ee6d422b58681e..30d546a8c54837c 100644 --- a/files/en-us/learn/getting_started_with_the_web/css_basics/index.md +++ b/files/en-us/learn/getting_started_with_the_web/css_basics/index.md @@ -125,7 +125,7 @@ There are many different types of selectors. The examples above use **element se The element(s) on the page with the specified attribute. img[src]
selects - <img src="myimage.png"> but not + <img src="my-image.png"> but not <img> diff --git a/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md index 73ba249874039fe..f621dde2388c892 100644 --- a/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/en-us/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -19,7 +19,7 @@ When you are working on a website locally on your computer, you should keep all You'll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces. This is because: -1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/MyImage.jpg` and then in a different file you try to invoke the image as `test-site/myimage.jpg`, it may not work. +1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/My_Image.jpg` and then in a different file you try to invoke the image as `test-site/my_image.jpg`, it may not work. 2. There are many ways in which using spaces in file names create issues: - When you invoke commands in the terminal, you have to put quotes around file names with spaces in them, or the path will be interpreted as two separate items. - Some programming languages (e.g. Python) do not work well with spaces in file names if these files are modules to be imported. 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 299c541f377698f..894eb3b8988d651 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 @@ -74,6 +74,6 @@ Earlier we used the term "packets" to describe the format in which the data is t ## Credit -Street photo: [Street composing](https://www.pinterest.com/pin/400538960580676851/), by [kevin digga](https://www.pinterest.com/kevindigga/). +Street photo: [Street composing](https://www.pinterest.com/pin/400538960580676851/), by [Kevin Digga](https://www.pinterest.com/kevindigga/). {{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}} diff --git a/files/en-us/learn/html/cheatsheet/index.md b/files/en-us/learn/html/cheatsheet/index.md index dd1adb460417b58..b4191cf605fbcc0 100644 --- a/files/en-us/learn/html/cheatsheet/index.md +++ b/files/en-us/learn/html/cheatsheet/index.md @@ -188,7 +188,7 @@ see <cite>The Monster Book of Monsters</cite>. 
 Used to format the date. For example:
-<time datetime="2020-05-24" pubdate>
+<time datetime="2020-05-24">
 published on 23-05-2020</time>.
{{EmbedLiveSample("time-example", 100, 60)}} diff --git a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md index 185e81b2e334bda..098010eb8b8aef4 100644 --- a/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/en-us/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -993,6 +993,8 @@ Always keep an accessibility mindset. The concept of italics isn't very helpful > [!NOTE] > People strongly associate underlining with hyperlinks. Therefore, on the web, it's best to only underline links. Use the `` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the web. The example below illustrates how it can be done. + + ```html

diff --git a/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md index 15db567f93636fc..6a6163ceb0dd1a8 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -52,7 +52,7 @@ Using your favorite image editor, create 400px wide and 120px wide versions of: - `firefox-addons.jpg` - `mozilla-dinosaur-head.png` -Call them something sensible, e.g. `firefoxlogo400.png` and `firefoxlogo120.png`. +Call them something sensible, e.g. `firefox-logo400.png` and `firefox-logo120.png`. Along with `mdn.svg`, these images will be your icons to link to further resources, inside the `further-info` area. You'll also link to the Firefox logo in the site header. Save copies of all these inside the same directory as `index.html`. diff --git a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index 42ad829f9990ff6..e749e333252b673 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -356,10 +356,10 @@ If you find yourself needing to embed plugin content, this is the kind of inform Let's look at an `` example that embeds a PDF into a page (see the [live example](https://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) and the [source code](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)): ```html - +

You don't have a PDF plugin, but you can - download the PDF file. + download the PDF file.

``` diff --git a/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md b/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md index d9188631f11a823..7a18f7533968803 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/video_and_audio_content/test_your_skills_colon__multimedia_and_embedding/index.md @@ -54,7 +54,7 @@ Try updating the live code below to recreate the finished example: In this task, we want you to: -- Embed a PDF into the page. The PDF is called `mypdf.pdf`, and is contained in the `media` folder. +- Embed a PDF into the page. The PDF is called `my-pdf.pdf`, and is contained in the `media` folder. - Go to a sharing site like YouTube or Google Maps, and embed a video or other media item into the page. Try updating the live code below to recreate the finished example: diff --git a/files/en-us/learn/html/tables/structuring_planet_data/index.md b/files/en-us/learn/html/tables/structuring_planet_data/index.md index 22606cfac8662d7..3b22fb6d07cef93 100644 --- a/files/en-us/learn/html/tables/structuring_planet_data/index.md +++ b/files/en-us/learn/html/tables/structuring_planet_data/index.md @@ -46,7 +46,7 @@ The following steps describe what you need to do to complete the table example. 3. Add a row to the table header containing all the column headers. 4. Create all the content rows inside the table body, remembering to make all the row headings into headings semantically. 5. Ensure all the content is placed into the right cells — in the raw data, each row of planet data is shown next to its associated planet. -6. Add attributes to make the row and column headers unambiguously associated with the rows, columns, or rowgroups that they act as headings for. +6. Add attributes to make the row and column headers unambiguously associated with the rows, columns, or row groups that they act as headings for. 7. Add a black [border](/en-US/docs/Web/CSS/border) just around the column that contains all the planet name row headers. ## Hints and tips diff --git a/files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md index 9b48f4321a2fe2f..20512c17024707f 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/fetching_data/index.md @@ -197,6 +197,8 @@ However, a complete website would handle this error more gracefully by displayin You can test the failure case yourself: + + 1. Make a local copy of the example files. 2. Run the code through a web server (as described above, in [Serving your example from a server](#serving_your_example_from_a_server)). 3. Modify the path to the file being fetched, to something like 'produc.json' (make sure it is misspelled). diff --git a/files/en-us/learn/javascript/first_steps/a_first_splash/index.md b/files/en-us/learn/javascript/first_steps/a_first_splash/index.md index 570aa44761d8671..b9ae1f7e65b813c 100644 --- a/files/en-us/learn/javascript/first_steps/a_first_splash/index.md +++ b/files/en-us/learn/javascript/first_steps/a_first_splash/index.md @@ -337,7 +337,7 @@ This is a lot of code — phew! Let's go through each section and explain what i - Now we've chained another test onto the end of the last one using an `else if (){ }` structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message. - The final block chained onto the end of this code (the `else { }`) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower. -- The last three lines in the function get us ready for the next guess to be submitted. We add 1 to the `guessCount` variable so the player uses up their turn (`++` is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered. +- The last three lines in the function get us ready for the next guess to be submitted. We add 1 to the `guessCount` variable so the player uses up their turn (`++` is an increment operation — increase by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered. ### Events diff --git a/files/en-us/learn/learning_and_getting_help/index.md b/files/en-us/learn/learning_and_getting_help/index.md index 277a2224e4cb9d7..fa2c99cab79b8be 100644 --- a/files/en-us/learn/learning_and_getting_help/index.md +++ b/files/en-us/learn/learning_and_getting_help/index.md @@ -277,5 +277,5 @@ You could also try attending full-fledged web conferences. While these can be ex ## See also - [Coursera: Learning to learn](https://www.coursera.org/learn/learning-how-to-learn) -- [Freecodecamp](https://www.freecodecamp.org/) +- [freeCodeCamp](https://www.freecodecamp.org/) - [Codecademy](https://www.codecademy.com/) diff --git a/files/en-us/learn/performance/multimedia/index.md b/files/en-us/learn/performance/multimedia/index.md index f07298bfbf6d54a..a0eadfc040f55a4 100644 --- a/files/en-us/learn/performance/multimedia/index.md +++ b/files/en-us/learn/performance/multimedia/index.md @@ -49,7 +49,7 @@ Despite being the largest consumer of bandwidth, the impact of image downloading ### Loading strategy -One of the biggest improvements to most websites is [lazy-loading](/en-US/docs/Web/Performance/Lazy_loading) images beneath the fold, rather than downloading them all on initial page load regardless of whether a visitor scrolls to see them or not. Many JavaScript libraries can implement this for you, such as [lazysizes](https://github.com/aFarkas/lazysizes), and browser vendors are working on a native `lazyload` attribute that is currently in the experimental phase. +One of the biggest improvements to most websites is [lazy-loading](/en-US/docs/Web/Performance/Lazy_loading) images beneath the fold, rather than downloading them all on initial page load regardless of whether a visitor scrolls to see them or not. Browsers provide this natively via the [`loading="lazy"`](/en-US/docs/Web/HTML/Element/img#loading) attribute on the `` element, and there are also many client-side JavaScript libraries that can do this. Beyond loading a subset of images, you should look into the format of the images themselves: diff --git a/files/en-us/learn/server-side/django/deployment/index.md b/files/en-us/learn/server-side/django/deployment/index.md index a3f17c3a4d35273..eba77af15af5707 100644 --- a/files/en-us/learn/server-side/django/deployment/index.md +++ b/files/en-us/learn/server-side/django/deployment/index.md @@ -473,15 +473,15 @@ We'll also configure the default database and collect static files so that they PythonAnywhere expects you to install applications in a folder named after your site URL. > [!NOTE] - > Because we're using the free account you can only name your account `.pythonanywhere.com` (for example, if your username is "Odtsetseg" you will have to put the local library source into a folder named `odtsetseg.pythonanywhere.com`). + > Because we're using the free account you can only name your account `.pythonanywhere.com` (for example, if your username is "Odtsetseg" you will have to put the local library source into a folder named `odtsetseg.pythonanywhere.com`). Enter the following command to clone your library sources into an appropriately named folder (you will need to replace the username values with your own name): ```bash - git clone https://github.com//django-locallibrary-tutorial.git .pythonanywhere.com + git clone https://github.com//django-locallibrary-tutorial.git .pythonanywhere.com # Navigate into the new folder - cd .pythonanywhere.com + cd .pythonanywhere.com ``` 5. Install the library dependencies using the `requirements.txt` file: @@ -659,7 +659,7 @@ We're already set up for that, so all we need to do is create the file. The steps are: -1. Open a PythonAware Bash prompt. +1. Open a PythonAnywhere Bash prompt. 2. Navigate to your application directory (replacing `` with your own account): ```bash diff --git a/files/en-us/learn/server-side/django/forms/index.md b/files/en-us/learn/server-side/django/forms/index.md index 494663b0d904187..0ae555372fcf4fc 100644 --- a/files/en-us/learn/server-side/django/forms/index.md +++ b/files/en-us/learn/server-side/django/forms/index.md @@ -181,7 +181,7 @@ The arguments that are common to most fields are listed below (these have sensib #### Validation -Django provides numerous places where you can validate your data. The easiest way to validate a single field is to override the method `clean_()` for the field you want to check. So for example, we can validate that entered `renewal_date` values are between now and 4 weeks by implementing `clean_renewal_date()` as shown below. +Django provides numerous places where you can validate your data. The easiest way to validate a single field is to override the method `clean_()` for the field you want to check. So for example, we can validate that entered `renewal_date` values are between now and 4 weeks by implementing `clean_renewal_date()` as shown below. Update your forms.py file so it looks like this: diff --git a/files/en-us/learn/server-side/django/generic_views/index.md b/files/en-us/learn/server-side/django/generic_views/index.md index 27bc98fc233d221..e881dea18c36287 100644 --- a/files/en-us/learn/server-side/django/generic_views/index.md +++ b/files/en-us/learn/server-side/django/generic_views/index.md @@ -410,10 +410,10 @@ You can capture multiple patterns in the one match, and hence encode lots of dif One feature that we haven't used here, but which you may find valuable, is that you can pass a [dictionary containing additional options](https://docs.djangoproject.com/en/5.0/topics/http/urls/#views-extra-options) to the view (using the third un-named argument to the `path()` function). This approach can be useful if you want to use the same view for multiple resources, and pass data to configure its behavior in each case. -For example, given the path shown below, for a request to `/myurl/halibut/` Django will call `views.my_view(request, fish='halibut', my_template_name='some_path')`. +For example, given the path shown below, for a request to `/my-url/halibut/` Django will call `views.my_view(request, fish='halibut', my_template_name='some_path')`. ```python -path('myurl/', views.my_view, {'my_template_name': 'some_path'}, name='aurl'), +path('my-url/', views.my_view, {'my_template_name': 'some_path'}, name='aurl'), ``` > [!NOTE] diff --git a/files/en-us/learn/server-side/django/models/index.md b/files/en-us/learn/server-side/django/models/index.md index 7d2d049b2c56920..86084d4cecab127 100644 --- a/files/en-us/learn/server-side/django/models/index.md +++ b/files/en-us/learn/server-side/django/models/index.md @@ -170,7 +170,7 @@ One of the most useful features of this metadata is to control the _default orde So as an example, if we chose to sort books like this by default: ```python -ordering = ['title', '-pubdate'] +ordering = ['title', '-publish_date'] ``` the books would be sorted alphabetically by title, from A-Z, and then by publication date inside each title, from newest to oldest. @@ -207,7 +207,7 @@ def get_absolute_url(self): ``` > [!NOTE] -> Assuming you will use URLs like `/myapplication/mymodelname/2` to display individual records for your model (where "2" is the `id` for a particular record), you will need to create a URL mapper to pass the response and id to a "model detail view" (which will do the work required to display the record). The `reverse()` function above is able to "reverse" your URL mapper (in the above case named _'model-detail-view'_) in order to create a URL of the right format. +> Assuming you will use URLs like `/my-application/my-model-name/2` to display individual records for your model (where "2" is the `id` for a particular record), you will need to create a URL mapper to pass the response and id to a "model detail view" (which will do the work required to display the record). The `reverse()` function above is able to "reverse" your URL mapper (in the above case named _'model-detail-view'_) in order to create a URL of the right format. > > Of course to make this work you still have to write the URL mapping, view, and template! @@ -468,7 +468,7 @@ class Author(models.Model): return f'{self.last_name}, {self.first_name}' ``` -All of the fields/methods should now be familiar. The model defines an author as having a first name, last name, and dates of birth and death (both optional). It specifies that by default the `__str__()` returns the name in _last name_, _firstname_ order. The `get_absolute_url()` method reverses the `author-detail` URL mapping to get the URL for displaying an individual author. +All of the fields/methods should now be familiar. The model defines an author as having a first name, last name, and dates of birth and death (both optional). It specifies that by default the `__str__()` returns the name in _last name_, _first name_ order. The `get_absolute_url()` method reverses the `author-detail` URL mapping to get the URL for displaying an individual author. ## Re-run the database migrations diff --git a/files/en-us/learn/server-side/django/testing/index.md b/files/en-us/learn/server-side/django/testing/index.md index 2b5cc340d15fb3e..ca9f57d1d0590f6 100644 --- a/files/en-us/learn/server-side/django/testing/index.md +++ b/files/en-us/learn/server-side/django/testing/index.md @@ -696,9 +696,9 @@ The rest of the tests verify that our view only returns books that are on loan t self.assertTrue('bookinstance_list' in response.context) # Confirm all books belong to testuser1 and are on loan - for bookitem in response.context['bookinstance_list']: - self.assertEqual(response.context['user'], bookitem.borrower) - self.assertEqual(bookitem.status, 'o') + for book_item in response.context['bookinstance_list']: + self.assertEqual(response.context['user'], book_item.borrower) + self.assertEqual(book_item.status, 'o') def test_pages_ordered_by_due_date(self): # Change all books to be on loan diff --git a/files/en-us/learn/server-side/express_nodejs/development_environment/index.md b/files/en-us/learn/server-side/express_nodejs/development_environment/index.md index 6bf91b0e9d73198..8878c8898f47a65 100644 --- a/files/en-us/learn/server-side/express_nodejs/development_environment/index.md +++ b/files/en-us/learn/server-side/express_nodejs/development_environment/index.md @@ -414,7 +414,7 @@ The DEBUG command creates useful logging, resulting in an output like the follow ```bash >SET DEBUG=helloworld:* & npm start -> helloworld@0.0.0 start D:\GitHub\expresstests\helloworld +> helloworld@0.0.0 start D:\GitHub\express-tests\helloworld > node ./bin/www helloworld:server Listening on port 3000 +0ms diff --git a/files/en-us/learn/server-side/express_nodejs/introduction/index.md b/files/en-us/learn/server-side/express_nodejs/introduction/index.md index c64cce05f780a99..e0c6041aaff8a2f 100644 --- a/files/en-us/learn/server-side/express_nodejs/introduction/index.md +++ b/files/en-us/learn/server-side/express_nodejs/introduction/index.md @@ -361,7 +361,7 @@ const a_middleware_function = function (req, res, next) { app.use(a_middleware_function); // Function added with use() for a specific route -app.use("/someroute", a_middleware_function); +app.use("/some-route", a_middleware_function); // A middleware function added for a specific HTTP verb and route app.get("/", a_middleware_function); diff --git a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md index 0900182cfcff69e..197cfbc2f97fb1f 100644 --- a/files/en-us/learn/server-side/express_nodejs/mongoose/index.md +++ b/files/en-us/learn/server-side/express_nodejs/mongoose/index.md @@ -547,7 +547,7 @@ While you can create schemas and models using any file structure you like, we hi This is shown below: ```js -// File: ./models/somemodel.js +// File: ./models/some-model.js // Require Mongoose const mongoose = require("mongoose"); @@ -568,7 +568,7 @@ You can then require and use the model immediately in other files. Below we show ```js // Create a SomeModel model just by requiring the module -const SomeModel = require("../models/somemodel"); +const SomeModel = require("../models/some-model"); // Use the SomeModel object (model) to find all SomeModel records const modelInstances = await SomeModel.find().exec(); diff --git a/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md b/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md index 53c9d67918ef94e..890ae97d744e346 100644 --- a/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md +++ b/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md @@ -284,7 +284,7 @@ We can now start the server in almost exactly the same way as previously, but us > [!NOTE] > Now if you edit any file in the project the server will restart (or you can restart it by typing `rs` on the command prompt at any time). You will still need to reload the browser to refresh the page. > -> We now have to call `npm run ` rather than just `npm start`, because "start" is actually an npm command that is mapped to the named script. We could have replaced the command in the _start_ script but we only want to use _nodemon_ during development, so it makes sense to create a new script command. +> We now have to call `npm run ` rather than just `npm start`, because "start" is actually an npm command that is mapped to the named script. We could have replaced the command in the _start_ script but we only want to use _nodemon_ during development, so it makes sense to create a new script command. > > The `serverstart` command added to the scripts in the **package.json** above is a very good example. Using this approach means you no longer have to type a long command to start the server. Note that the particular command added to the script works for macOS or Linux only. diff --git a/files/en-us/learn/server-side/first_steps/client-server_overview/index.md b/files/en-us/learn/server-side/first_steps/client-server_overview/index.md index 2730657d1a18fbd..ff64b66948617a0 100644 --- a/files/en-us/learn/server-side/first_steps/client-server_overview/index.md +++ b/files/en-us/learn/server-side/first_steps/client-server_overview/index.md @@ -129,7 +129,7 @@ X-Cache-Info: caching Content-Length: 41823 - + @@ -194,7 +194,7 @@ Content-Length: 0 ## Static sites -A _static site_ is one that returns the same hard coded content from the server whenever a particular resource is requested. So for example if you have a page about a product at `/static/myproduct1.html`, this same page will be returned to every user. If you add another similar product to your site you will need to add another page (e.g. `myproduct2.html`) and so on. This can start to get really inefficient — what happens when you get to thousands of product pages? You would repeat a lot of code across each page (the basic page template, structure, etc.), and if you wanted to change anything about the page structure — like add a new "related products" section for example — then you'd have to change every page individually. +A _static site_ is one that returns the same hard coded content from the server whenever a particular resource is requested. So for example if you have a page about a product at `/static/my-product1.html`, this same page will be returned to every user. If you add another similar product to your site you will need to add another page (e.g. `my-product2.html`) and so on. This can start to get really inefficient — what happens when you get to thousands of product pages? You would repeat a lot of code across each page (the basic page template, structure, etc.), and if you wanted to change anything about the page structure — like add a new "related products" section for example — then you'd have to change every page individually. > [!NOTE] > Static sites are excellent when you have a small number of pages and you want to send the same content to every user. However they can have a significant cost to maintain as the number of pages becomes larger. diff --git a/files/en-us/learn/server-side/first_steps/web_frameworks/index.md b/files/en-us/learn/server-side/first_steps/web_frameworks/index.md index 57cd117c86d8b65..aa8417d6aff0385 100644 --- a/files/en-us/learn/server-side/first_steps/web_frameworks/index.md +++ b/files/en-us/learn/server-side/first_steps/web_frameworks/index.md @@ -79,8 +79,8 @@ While Django expects developers to define a list of URL mappings between a URL p ```python urlpatterns = [ url(r'^$', views.index), - # example: /best/myteamname/5/ - url(r'^best/(?P\w.+?)/(?P[0-9]+)/$', views.best), + # example: /best/my_team_name/5/ + url(r'^best/(?P\w+?)/(?P[0-9]+)/$', views.best), ] ``` diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md index 6833485317ec46a..644edb8c893a895 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_typescript/index.md @@ -199,6 +199,8 @@ We can also see that the `setupTypeScript.js` file made a couple of changes to o ![VS Code screenshot showing that when hovering on a component, it gives you hints](03-vscode-hints-in-main-ts.png) + + We also get type checking for free. If we pass an unknown property in the options parameter of the `App` constructor (for example a typo like `traget` instead of `target`), TypeScript will complain: ![Type checking in VS Code - App object has been given an unknown property traget](04-vscode-type-checking-in-main-ts.png) @@ -690,7 +692,7 @@ Next we'll take care of the `actions.js` file. Now we have to migrate the `stores.js` and `localStore.js` files to TypeScript. -Tip: the script `npm run check`, which uses the [`svelte-check`](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check) tool, will only check our application's `.svelte` files. If you want to also check the `.ts` files, you can run `npm run check && npx tsc --noemit`, which tells the TypeScript compiler to check for errors without generating the `.js` output files. You could even add a script to your `package.json` file that runs that command. +Tip: the script `npm run check`, which uses the [`svelte-check`](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check) tool, will only check our application's `.svelte` files. If you want to also check the `.ts` files, you can run `npm run check && npx tsc --noEmit`, which tells the TypeScript compiler to check for errors without generating the `.js` output files. You could even add a script to your `package.json` file that runs that command. We'll start with `stores.js`. diff --git a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/overview/index.md b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/overview/index.md index aec08b4ff0f6a77..d3f00c82f22fccc 100644 --- a/files/en-us/learn/tools_and_testing/understanding_client-side_tools/overview/index.md +++ b/files/en-us/learn/tools_and_testing/understanding_client-side_tools/overview/index.md @@ -143,7 +143,7 @@ Deployment systems allow you to get your website published, are available for bo #### Others -There are several other tool types available to use in the post-development stage, including [Code Climate](https://codeclimate.com/) for gathering code quality metrics, the [webhint browser extension](https://webhint.io/docs/user-guide/extensions/extension-browser/) for performing runtime analysis of cross-browser compatibility and other checks, [GitHub bots](https://probot.github.io/) for providing more powerful GitHub functionality, [Updown](https://updown.io/) for providing app uptime monitoring, and so many more! +There are several other tool types available to use in the post-development stage, including [Code Climate](https://codeclimate.com/) for gathering code quality metrics, the [Webhint browser extension](https://webhint.io/docs/user-guide/extensions/extension-browser/) for performing runtime analysis of cross-browser compatibility and other checks, [GitHub bots](https://probot.github.io/) for providing more powerful GitHub functionality, [Updown](https://updown.io/) for providing app uptime monitoring, and so many more! ### Some thoughts about tooling types