diff --git a/files/en-us/games/techniques/2d_collision_detection/index.md b/files/en-us/games/techniques/2d_collision_detection/index.md index bbee16914b85745..929099bf7e4b29f 100644 --- a/files/en-us/games/techniques/2d_collision_detection/index.md +++ b/files/en-us/games/techniques/2d_collision_detection/index.md @@ -100,7 +100,7 @@ Crafty.c("Circle", { this.y + this.radius, this.radius, 0, - Math.PI * 2 + Math.PI * 2, ); ctx.closePath(); ctx.fill(); diff --git a/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md b/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md index d315ee75a843caf..57595b6dadf0301 100644 --- a/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md +++ b/files/en-us/games/techniques/3d_collision_detection/bounding_volume_collision_detection_with_three.js/index.md @@ -19,13 +19,13 @@ To create a **`Box3` instance**, we need to provide the **lower and upper bounda ```js const knot = new THREE.Mesh( new THREE.TorusKnotGeometry(0.5, 0.1), - new MeshNormalMaterial({}) + new MeshNormalMaterial({}), ); knot.geometry.computeBoundingBox(); const knotBBox = new Box3( knot.geometry.boundingBox.min, - knot.geometry.boundingBox.max + knot.geometry.boundingBox.max, ); ``` @@ -36,7 +36,7 @@ A more simple alternative that fixes the previous issue is to set those boundari ```js const knot = new THREE.Mesh( new THREE.TorusKnotGeometry(0.5, 0.1), - new MeshNormalMaterial({}) + new MeshNormalMaterial({}), ); const knotBBox = new Box3(new THREE.Vector3(), new THREE.Vector3()); @@ -50,12 +50,12 @@ Instantiating **`Sphere` objects** is similar. We need to provide the sphere's c ```js const knot = new THREE.Mesh( new THREE.TorusKnotGeometry(0.5, 0.1), - new MeshNormalMaterial({}) + new MeshNormalMaterial({}), ); const knotBSphere = new Sphere( knot.position, - knot.geometry.boundingSphere.radius + knot.geometry.boundingSphere.radius, ); ``` @@ -144,7 +144,7 @@ To use it, we need to create a new `BoxHelper` instance and supply the geometry ```js const knot = new THREE.Mesh( new THREE.TorusKnotGeometry(0.5, 0.1), - new THREE.MeshNormalMaterial({}) + new THREE.MeshNormalMaterial({}), ); const knotBoxHelper = new THREE.BoxHelper(knot, 0x00ff00); scene.add(knotBoxHelper); diff --git a/files/en-us/games/techniques/3d_collision_detection/index.md b/files/en-us/games/techniques/3d_collision_detection/index.md index 22c585425be4423..7dc20922f620f7b 100644 --- a/files/en-us/games/techniques/3d_collision_detection/index.md +++ b/files/en-us/games/techniques/3d_collision_detection/index.md @@ -91,7 +91,7 @@ function isPointInsideSphere(point, sphere) { const distance = Math.sqrt( (point.x - sphere.x) * (point.x - sphere.x) + (point.y - sphere.y) * (point.y - sphere.y) + - (point.z - sphere.z) * (point.z - sphere.z) + (point.z - sphere.z) * (point.z - sphere.z), ); return distance < sphere.radius; } @@ -118,7 +118,7 @@ function intersect(sphere, other) { const distance = Math.sqrt( (sphere.x - other.x) * (sphere.x - other.x) + (sphere.y - other.y) * (sphere.y - other.y) + - (sphere.z - other.z) * (sphere.z - other.z) + (sphere.z - other.z) * (sphere.z - other.z), ); return distance < sphere.radius + other.radius; } @@ -143,7 +143,7 @@ function intersect(sphere, box) { const distance = Math.sqrt( (x - sphere.x) * (x - sphere.x) + (y - sphere.y) * (y - sphere.y) + - (z - sphere.z) * (z - sphere.z) + (z - sphere.z) * (z - sphere.z), ); return distance < sphere.radius; diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md index cac3b1808d3b4c9..fcd7bb48728d3db 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_a-frame/index.md @@ -29,7 +29,7 @@ Let's start by setting up an environment to create something with A-Frame. We'll The first step is to create an HTML document — inside your project directory, create a new `index.html` file, and save the follow HTML inside it: ```html - + diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md index 13d923fa76b1076..19850fcae6ba371 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_babylon.js/index.md @@ -24,7 +24,7 @@ To start developing with Babylon.js, you don't need much. You should start off b Here's the HTML structure we will use: ```html - + @@ -98,7 +98,7 @@ Now the setup code is in place we need to think about implementing the standard const camera = new BABYLON.FreeCamera( "camera", new BABYLON.Vector3(0, 0, -10), - scene + scene, ); ``` @@ -114,7 +114,7 @@ There are various [light sources](https://doc.babylonjs.com/divingDeeper/lights/ const light = new BABYLON.PointLight( "light", new BABYLON.Vector3(10, 10, 0), - scene + scene, ); ``` diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md index 2c296cf29d576a3..aba296219a646b5 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/engine/index.md @@ -28,7 +28,7 @@ To start developing with PlayCanvas, you don't need much. You should start off b Here's the HTML structure we will use. ```html - + diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index 7cf98858a2f354b..7b1e20495140d7b 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -24,7 +24,7 @@ To start developing with Three.js, you don't need much. You should: Here's the HTML structure we will use: ```html - + diff --git a/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md b/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md index 90f601ca7c741a2..d161e7d27e306cf 100644 --- a/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/glsl_shaders/index.md @@ -47,7 +47,7 @@ To start with the WebGL shaders you don't need much. You should: Here's the HTML structure we will use. ```html - + 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 0298e27f923e5c2..47eae0abfe90249 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 @@ -177,7 +177,7 @@ for (const button of buttons) { stopTime = button.getAttribute("data-stop"); myAudio.play(); }, - false + false, ); } @@ -188,7 +188,7 @@ myAudio.addEventListener( myAudio.pause(); } }, - false + false, ); ``` diff --git a/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md b/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md index 3facd3484ebbe55..d91fb6b9fc23463 100644 --- a/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md +++ b/files/en-us/games/techniques/control_mechanisms/desktop_with_mouse_and_keyboard/index.md @@ -105,7 +105,7 @@ const buttonEnclave = this.add.button( 10, "logo-enclave", this.clickEnclave, - this + this, ); ``` @@ -117,7 +117,7 @@ this.buttonShoot = this.add.button( 0, "button-alpha", null, - this + this, ); this.buttonShoot.onInputDown.add(this.shootingPressed, this); this.buttonShoot.onInputUp.add(this.shootingReleased, this); diff --git a/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md b/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md index 68bb7dfef0f4f1f..ff0d1a06fe94f6e 100644 --- a/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md +++ b/files/en-us/games/techniques/control_mechanisms/mobile_touch/index.md @@ -115,7 +115,7 @@ const buttonEnclave = this.add.button( 10, "logo-enclave", this.clickEnclave, - this + this, ); ``` @@ -129,7 +129,7 @@ this.buttonShoot = this.add.button( 0, "button-alpha", null, - this + this, ); this.buttonShoot.onInputDown.add(this.goShootPressed, this); this.buttonShoot.onInputUp.add(this.goShootReleased, this); 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 b7a3dfef182bc08..0ee9c8512fbb553 100644 --- a/files/en-us/games/techniques/control_mechanisms/other/index.md +++ b/files/en-us/games/techniques/control_mechanisms/other/index.md @@ -36,7 +36,7 @@ window.addEventListener( (event) => { console.log(event.keyCode); }, - true + true, ); ``` @@ -62,7 +62,7 @@ window.addEventListener( // … } }, - true + true, ); ``` diff --git a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md index 6036ae0f5268526..354f1f1e426ea96 100644 --- a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md +++ b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__scrolling_maps/index.md @@ -64,7 +64,7 @@ for (let c = startCol; c <= endCol; c++) { Math.round(x), // target x Math.round(y), // target y map.tsize, // target width - map.tsize // target height + map.tsize, // target height ); } } diff --git a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md index 3d5e6af5f79f3c2..a7265bd0c054b53 100644 --- a/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md +++ b/files/en-us/games/techniques/tilemaps/square_tilemaps_implementation_colon__static_maps/index.md @@ -84,7 +84,7 @@ for (let c = 0; c < map.cols; c++) { c * map.tsize, // target x r * map.tsize, // target y map.tsize, // target width - map.tsize // target height + map.tsize, // target height ); } } diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md index 71c12265efcc453..4be0bf3dc939ef3 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md @@ -46,7 +46,7 @@ startButton = game.add.button( this, 1, 0, - 2 + 2, ); startButton.anchor.set(0.5); ``` diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md index 2b9f2804e68a741..9b0cd87f907c358 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md @@ -38,7 +38,7 @@ lifeLostText = game.add.text( game.world.width * 0.5, game.world.height * 0.5, "Life lost, click to continue", - { font: "18px Arial", fill: "#0095DD" } + { font: "18px Arial", fill: "#0095DD" }, ); lifeLostText.anchor.set(0.5); lifeLostText.visible = false; @@ -64,14 +64,14 @@ livesText = game.add.text( game.world.width - 5, 5, `Lives: ${lives}`, - textStyle + textStyle, ); livesText.anchor.set(1, 0); lifeLostText = game.add.text( game.world.width * 0.5, game.world.height * 0.5, "Life lost, click to continue", - textStyle + textStyle, ); lifeLostText.anchor.set(0.5); lifeLostText.visible = false; diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md index 79a2dd5eab71f2b..5c5d5706bdf6f18 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.md @@ -17,7 +17,7 @@ Before we can start writing the game's functionality, we need to create a basic The HTML document structure is quite simple, as the game will be rendered entirely on the {{htmlelement("canvas")}} element generated by the framework. Using your favorite text editor, create a new HTML document, save it as `index.html`, in a sensible location, and add the following code to it: ```html - + diff --git a/files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md b/files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md index bc3577b18fcbf90..3748fed46689024 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md @@ -46,7 +46,7 @@ Next up, we will initialize our paddle by adding the following `add.sprite()` ca paddle = game.add.sprite( game.world.width * 0.5, game.world.height - 5, - "paddle" + "paddle", ); ``` diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index f7dce00989b01f0..bffb99ff63ef1a1 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -17,7 +17,7 @@ Before we can start writing the game's functionality, we need to create a basic The HTML document structure is quite simple, as the game will be rendered entirely on the {{htmlelement("canvas")}} element. Using your favorite text editor, create a new HTML document, save it as `index.html`, in a sensible location, and add the following code to it: ```html - + 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 c6f342e0cf66eb8..179230d20c06dcc 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 @@ -35,7 +35,7 @@ You can open the index file in your favorite browser to launch the game and try 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 - + @@ -135,12 +135,12 @@ Ball.Preloader.prototype = { this.preloadBg = this.add.sprite( (Ball._WIDTH - 297) * 0.5, (Ball._HEIGHT - 145) * 0.5, - "preloaderBg" + "preloaderBg", ); this.preloadBar = this.add.sprite( (Ball._WIDTH - 158) * 0.5, (Ball._HEIGHT - 50) * 0.5, - "preloaderBar" + "preloaderBar", ); this.load.setPreloadSprite(this.preloadBar); @@ -181,7 +181,7 @@ Ball.MainMenu.prototype = { this, 2, 0, - 1 + 1, ); this.startButton.anchor.set(0.5, 0); this.startButton.input.useHandCursor = true; @@ -218,7 +218,7 @@ Ball.Howto.prototype = { 0, "screen-howtoplay", this.startGame, - this + this, ); }, startGame() { @@ -400,14 +400,14 @@ this.physics.arcade.collide( this.borderGroup, this.wallCollision, null, - this + this, ); this.physics.arcade.collide( this.ball, this.levels[this.level - 1], this.wallCollision, null, - this + this, ); ``` @@ -463,13 +463,13 @@ this.timerText = this.game.add.text( 15, 15, `Time: ${this.timer}`, - this.fontBig + this.fontBig, ); this.totalTimeText = this.game.add.text( 120, 30, `Total time: ${this.totalTimer}`, - this.fontSmall + this.fontSmall, ); ``` diff --git a/files/en-us/glossary/css_selector/index.md b/files/en-us/glossary/css_selector/index.md index 2942938c64b3ed7..055467b9d840c81 100644 --- a/files/en-us/glossary/css_selector/index.md +++ b/files/en-us/glossary/css_selector/index.md @@ -26,7 +26,11 @@ div.warning { } #customized { - font: 16px Lucida Grande, Arial, Helvetica, sans-serif; + font: + 16px Lucida Grande, + Arial, + Helvetica, + sans-serif; } ``` diff --git a/files/en-us/glossary/entity/index.md b/files/en-us/glossary/entity/index.md index 2cf00d94323f0a1..54590f91d06cb22 100644 --- a/files/en-us/glossary/entity/index.md +++ b/files/en-us/glossary/entity/index.md @@ -25,9 +25,9 @@ To display these characters as text, replace them with their corresponding chara | | ` ` | Interpreted as the non breaking space. | | – | `–` | Interpreted as the en dash (half the width of an em unit). | | — | `—` | Interpreted as the em dash (equal to width of an "m" character). | -| © | `©` | Interpreted as the copyright sign. | -| ® | `®` | Interpreted as the registered sign. | -| ™ | `™` | Interpreted as the trademark sign. | +| © | `©` | Interpreted as the copyright sign. | +| ® | `®` | Interpreted as the registered sign. | +| ™ | `™` | Interpreted as the trademark sign. | | ≈ | `≈` | Interpreted as almost equal to sign. | | ≠ | `≠` | Interpreted as not equal to sign. | | £ | `£` | Interpreted as the pound symbol. | diff --git a/files/en-us/glossary/xhtml/index.md b/files/en-us/glossary/xhtml/index.md index 15df0bc3583e8b3..daabf8b845f8bdb 100644 --- a/files/en-us/glossary/xhtml/index.md +++ b/files/en-us/glossary/xhtml/index.md @@ -15,7 +15,7 @@ The following example shows an HTML document and corresponding "XHTML" document, ```html - + diff --git a/files/en-us/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md b/files/en-us/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md index e8866f647976f9c..878ebac3dc8bf79 100644 --- a/files/en-us/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md +++ b/files/en-us/learn/common_questions/design_and_accessibility/design_for_all_types_of_users/index.md @@ -90,7 +90,7 @@ Suppose we wanted a base font size of 16px and an h1 (main heading) at the equiv Here is the HTML we're using: ```html - + @@ -182,7 +182,7 @@ Of course the problem doesn't go away when we switch to the Web. The reader's ey To achieve this, you can specify a size for your text's container. Let's consider this HTML: ```html - + diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index ea610fd55e098b4..3e3fcd3a5a4b527 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -175,7 +175,7 @@ document.querySelector("html").style.backgroundColor = "purple"; const loginImage = document.createElement("img"); loginImage.setAttribute( "src", - "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" + "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png", ); document.querySelector("h1").appendChild(loginImage); ``` @@ -194,7 +194,7 @@ document.cheeseSelector("html").style.backgroundColor = "purple"; const loginImage = document.createElement("img"); banana.setAttribute( "src", - "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" + "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png", ); document.querySelector("h1").appendChild(loginImage); ``` diff --git a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md index aaf03c4e7438f40..ba8464831f70e7e 100644 --- a/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md +++ b/files/en-us/learn/css/building_blocks/advanced_styling_effects/index.md @@ -148,7 +148,9 @@ button { border-radius: 10px; border: none; background-image: linear-gradient(to bottom right, #777, #ddd); - box-shadow: 1px 1px 1px black, inset 2px 3px 5px rgba(0, 0, 0, 0.3), + box-shadow: + 1px 1px 1px black, + inset 2px 3px 5px rgba(0, 0, 0, 0.3), inset -2px -3px 5px rgba(255, 255, 255, 0.5); } @@ -158,7 +160,9 @@ button:hover { } button:active { - box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0, 0, 0, 0.3), + box-shadow: + inset 2px 2px 1px black, + inset 2px 3px 5px rgba(0, 0, 0, 0.3), inset -2px -3px 5px rgba(255, 255, 255, 0.5); } ``` 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 c53a937f66ca040..9fbccac44ec96f6 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 @@ -41,12 +41,14 @@ The CSS {{cssxref("background")}} property is a shorthand for a number of backgr ```css .box { - background: linear-gradient( + background: + linear-gradient( 105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96% - ) center center / 400px 200px no-repeat, url(big-star.png) center - no-repeat, rebeccapurple; + ) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, + rebeccapurple; } ``` @@ -182,7 +184,9 @@ The other `background-*` properties can also have comma-separated values in the background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png); background-repeat: no-repeat, repeat-x, repeat; -background-position: 10px 20px, top right; +background-position: + 10px 20px, + top right; ``` Each value of the different properties will match up to the values in the same position in the other properties. Above, for example, `image1`'s `background-repeat` value will be `no-repeat`. However, what happens when different properties have different numbers of values? The answer is that the smaller numbers of values will cycle — in the above example there are four background images but only two `background-position` values. The first two position values will be applied to the first two images, then they will cycle back around again — `image3` will be given the first position value, and `image4` will be given the second position value. diff --git a/files/en-us/learn/css/css_layout/floats/index.md b/files/en-us/learn/css/css_layout/floats/index.md index 71dde961fb498bc..32b9e6305892bea 100644 --- a/files/en-us/learn/css/css_layout/floats/index.md +++ b/files/en-us/learn/css/css_layout/floats/index.md @@ -85,7 +85,10 @@ body { width: 90%; max-width: 900px; margin: 0 auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .box { @@ -208,7 +211,10 @@ body { width: 90%; max-width: 900px; margin: 0 auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .box { @@ -281,7 +287,10 @@ body { width: 90%; max-width: 900px; margin: 0 auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .box { @@ -381,7 +390,10 @@ body { width: 90%; max-width: 900px; margin: 0 auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .wrapper { @@ -456,7 +468,10 @@ body { width: 90%; max-width: 900px; margin: 0 auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .wrapper { 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 72b8d79c14164a4..607872cce5a1bda 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -77,7 +77,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .container > div { @@ -131,7 +134,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .container > div { @@ -181,7 +187,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .container > div { @@ -248,7 +257,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .container > div { @@ -310,7 +322,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .container > div { @@ -395,7 +410,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .container { @@ -500,7 +518,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } header, @@ -599,7 +620,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .container { diff --git a/files/en-us/learn/css/css_layout/media_queries/index.md b/files/en-us/learn/css/css_layout/media_queries/index.md index db031143d3d983c..93fec6ea8b22d1e 100644 --- a/files/en-us/learn/css/css_layout/media_queries/index.md +++ b/files/en-us/learn/css/css_layout/media_queries/index.md @@ -220,7 +220,10 @@ Our starting point is an HTML document with some CSS applied to add background c body { width: 90%; margin: 2em auto; - font: 1em/1.3 Arial, Helvetica, sans-serif; + font: + 1em/1.3 Arial, + Helvetica, + sans-serif; } a:link, diff --git a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md index b9f5a228f39bd8d..5b7a4b47b8c6b9e 100644 --- a/files/en-us/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/en-us/learn/css/css_layout/multiple-column_layout/index.md @@ -53,7 +53,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } ``` @@ -105,7 +108,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } ``` @@ -166,7 +172,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } ``` @@ -214,7 +223,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } .container { column-count: 3; @@ -263,7 +275,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } ``` @@ -384,7 +399,10 @@ body { width: 90%; max-width: 900px; margin: 2em auto; - font: 0.9em/1.2 Arial, Helvetica, sans-serif; + font: + 0.9em/1.2 Arial, + Helvetica, + sans-serif; } ``` diff --git a/files/en-us/learn/css/first_steps/getting_started/index.md b/files/en-us/learn/css/first_steps/getting_started/index.md index a73d0e720e08fcf..df7b16f60caee11 100644 --- a/files/en-us/learn/css/first_steps/getting_started/index.md +++ b/files/en-us/learn/css/first_steps/getting_started/index.md @@ -42,7 +42,7 @@ In this article, we will take a simple HTML document and apply CSS to it, learni Our starting point is an HTML document. You can copy the code from below if you want to work on your own computer. Save the code below as `index.html` in a folder on your machine. ```html - + 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 f7f395799f09123..d8665379c4ebcf7 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 @@ -48,7 +48,7 @@ An external stylesheet contains CSS in a separate file with a `.css` extension. You reference an external CSS stylesheet from an HTML `` element: ```html - + @@ -96,7 +96,7 @@ An internal stylesheet resides within an HTML document. To create an internal st The HTML for an internal stylesheet might look like this: ```html - + @@ -129,7 +129,7 @@ But for sites with more than one page, an internal stylesheet becomes a less eff Inline styles are CSS declarations that affect a single HTML element, contained within a `style` attribute. The implementation of an inline style in an HTML document might look like this: ```html - + @@ -155,7 +155,7 @@ For the exercise that follows, create a folder on your computer. You can name th **index.html:** ```html - + @@ -425,7 +425,10 @@ CSS comments begin with `/*` and end with `*/`. In the example below, comments m /* Handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { - font: 1em/150% Helvetica, Arial, sans-serif; + font: + 1em/150% Helvetica, + Arial, + sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; @@ -482,7 +485,10 @@ In the example below, each declaration (and rule start/end) has its own line. Th ```css body { - font: 1em/150% Helvetica, Arial, sans-serif; + font: + 1em/150% Helvetica, + Arial, + sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; diff --git a/files/en-us/learn/css/howto/create_fancy_boxes/index.md b/files/en-us/learn/css/howto/create_fancy_boxes/index.md index 117d4e7df572c92..dc4a1a77db1ffb7 100644 --- a/files/en-us/learn/css/howto/create_fancy_boxes/index.md +++ b/files/en-us/learn/css/howto/create_fancy_boxes/index.md @@ -239,7 +239,11 @@ blockquote::before, blockquote::after { position: absolute; height: 3rem; - font: 6rem/100% Georgia, "Times New Roman", Times, serif; + font: + 6rem/100% Georgia, + "Times New Roman", + Times, + serif; } blockquote::before { diff --git a/files/en-us/learn/css/howto/css_faq/index.md b/files/en-us/learn/css/howto/css_faq/index.md index 11b29e2f4715894..fbc3b58f484fea7 100644 --- a/files/en-us/learn/css/howto/css_faq/index.md +++ b/files/en-us/learn/css/howto/css_faq/index.md @@ -22,7 +22,7 @@ Gecko-based browsers, have a third _[Almost Standards Mode](/en-US/docs/Mozilla/ The standard `DOCTYPE` declaration that will trigger standards mode is: ```html - + ``` When at all possible, you should just use the above doctype. There are other valid legacy doctypes that will trigger Standards or Almost Standards mode: 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 3ef860cfcdc9cd2..48ce1c2ceb4f7df 100644 --- a/files/en-us/learn/css/styling_text/fundamentals/index.md +++ b/files/en-us/learn/css/styling_text/fundamentals/index.md @@ -432,7 +432,9 @@ You can apply multiple shadows to the same text by including multiple shadow val ```css h1 { - text-shadow: 1px 1px 1px red, 2px 2px 1px red; + text-shadow: + 1px 1px 1px red, + 2px 2px 1px red; } ``` @@ -514,7 +516,9 @@ html { h1 { font-size: 5rem; text-transform: capitalize; - text-shadow: 1px 1px 1px red, 2px 2px 1px red; + text-shadow: + 1px 1px 1px red, + 2px 2px 1px red; text-align: center; } @@ -565,7 +569,9 @@ html { h1 { font-size: 5rem; text-transform: capitalize; - text-shadow: 1px 1px 1px red, 2px 2px 1px red; + text-shadow: + 1px 1px 1px red, + 2px 2px 1px red; text-align: center; } @@ -620,7 +626,9 @@ html { h1 { font-size: 5rem; text-transform: capitalize; - text-shadow: 1px 1px 1px red, 2px 2px 1px red; + text-shadow: + 1px 1px 1px red, + 2px 2px 1px red; text-align: center; letter-spacing: 2px; } @@ -685,7 +693,10 @@ A forward slash has to be put in between the {{cssxref("font-size")}} and {{cssx A full example would look like this: ```css -font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif; +font: + italic normal bold normal 3em/1.5 Helvetica, + Arial, + sans-serif; ``` ## Active learning: Playing with styling text 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 cb38c3a2ea03601..647892654666103 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 @@ -139,8 +139,9 @@ To implement these fonts in your demo, follow these steps: ```css @font-face { font-family: "zantrokeregular"; - src: url("fonts/zantroke-webfont.woff2") format("woff2"), url("fonts/zantroke-webfont.woff") - format("woff"); + src: + url("fonts/zantroke-webfont.woff2") format("woff2"), + url("fonts/zantroke-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } @@ -178,8 +179,9 @@ Let's explore that `@font-face` syntax generated for you by Fontsquirrel. This i ```css @font-face { font-family: "zantrokeregular"; - src: url("zantroke-webfont.woff2") format("woff2"), url("zantroke-webfont.woff") - format("woff"); + src: + url("zantroke-webfont.woff2") format("woff2"), + url("zantroke-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } diff --git a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md index 8c6cb7a7e8d7a51..0fbe1b1aeaeb766 100644 --- a/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md +++ b/files/en-us/learn/forms/how_to_build_custom_form_controls/example_3/index.md @@ -223,7 +223,7 @@ window.addEventListener("load", () => { (event) => { toggleOptList(select); }, - false + false, ); select.addEventListener("focus", (event) => { diff --git a/files/en-us/learn/forms/sending_forms_through_javascript/index.md b/files/en-us/learn/forms/sending_forms_through_javascript/index.md index 9d51ab934c6d4ad..3783ed814adb74e 100644 --- a/files/en-us/learn/forms/sending_forms_through_javascript/index.md +++ b/files/en-us/learn/forms/sending_forms_through_javascript/index.md @@ -67,7 +67,7 @@ function sendData(data) { // Turn the data object into an array of URL-encoded key/value pairs. for (const [name, value] of Object.entries(data)) { urlEncodedDataPairs.push( - `${encodeURIComponent(name)}=${encodeURIComponent(value)}` + `${encodeURIComponent(name)}=${encodeURIComponent(value)}`, ); } @@ -351,7 +351,7 @@ window.addEventListener("load", () => { // Add the required HTTP header to handle a multipart form data POST request XHR.setRequestHeader( "Content-Type", - `multipart/form-data; boundary=${boundary}` + `multipart/form-data; boundary=${boundary}`, ); // Send the data diff --git a/files/en-us/learn/forms/styling_web_forms/index.md b/files/en-us/learn/forms/styling_web_forms/index.md index 0dfee44d0de30b2..4ac15d3ebe34aa2 100644 --- a/files/en-us/learn/forms/styling_web_forms/index.md +++ b/files/en-us/learn/forms/styling_web_forms/index.md @@ -215,16 +215,18 @@ First, we prepare by defining our {{cssxref("@font-face")}} rules, and all the b ```css @font-face { font-family: "handwriting"; - src: url("fonts/journal-webfont.woff2") format("woff2"), url("fonts/journal-webfont.woff") - format("woff"); + src: + url("fonts/journal-webfont.woff2") format("woff2"), + url("fonts/journal-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "typewriter"; - src: url("fonts/momot___-webfont.woff2") format("woff2"), url("fonts/momot___-webfont.woff") - format("woff"); + src: + url("fonts/momot___-webfont.woff2") format("woff2"), + url("fonts/momot___-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } @@ -257,7 +259,9 @@ Notice that we've used some [CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) and ```css h1 { - font: 1em "typewriter", monospace; + font: + 1em "typewriter", + monospace; align-self: end; } @@ -277,7 +281,9 @@ Now we can start working on the form elements themselves. First, let's ensure th ```css label { - font: 0.8em "typewriter", sans-serif; + font: + 0.8em "typewriter", + sans-serif; } ``` @@ -286,7 +292,10 @@ The text fields require some common rules. In other words, we remove their {{css ```css input, textarea { - font: 1.4em/1.5em "handwriting", cursive, sans-serif; + font: + 1.4em/1.5em "handwriting", + cursive, + sans-serif; border: none; padding: 0 10px; margin: 0; diff --git a/files/en-us/learn/forms/ui_pseudo-classes/index.md b/files/en-us/learn/forms/ui_pseudo-classes/index.md index 98e931395030fce..7427a7776508a8e 100644 --- a/files/en-us/learn/forms/ui_pseudo-classes/index.md +++ b/files/en-us/learn/forms/ui_pseudo-classes/index.md @@ -408,7 +408,7 @@ document.addEventListener( .getElementById("billing-checkbox") .addEventListener("change", toggleBilling); }, - false + false, ); function toggleBilling() { 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 c92cd939adf26a9..3bb3fd541be742b 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 @@ -43,7 +43,7 @@ To make files talk to one another, you have to provide a file path between them 2. Open up your `index.html` file, and insert the following code into the file exactly as shown. Don't worry about what it all means for now — we'll look at the structures in more detail later in the series. ```html - + diff --git a/files/en-us/learn/getting_started_with_the_web/html_basics/index.md b/files/en-us/learn/getting_started_with_the_web/html_basics/index.md index b6727547a9beca4..683fc95313cd9b0 100644 --- a/files/en-us/learn/getting_started_with_the_web/html_basics/index.md +++ b/files/en-us/learn/getting_started_with_the_web/html_basics/index.md @@ -81,7 +81,7 @@ This contains two attributes, but there is no closing `` tag and no inner That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll look at how individual elements are combined to form an entire HTML page. Let's revisit the code we put into our `index.html` example (which we first met in the [Dealing with files](/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files) article): ```html - + diff --git a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md index 2a66cfa64dfd8f7..59f8ac626e3ce96 100644 --- a/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/en-us/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -213,7 +213,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -444,7 +444,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -603,7 +603,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; diff --git a/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md index d49c971d636965f..56721819743b53c 100644 --- a/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -83,7 +83,7 @@ To implement such semantic mark up, HTML provides dedicated tags that you can us Our example seen above is represented by the following code (you can also [find the example in our GitHub repository](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/document_and_website_structure/index.html)). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. ```html - + diff --git a/files/en-us/learn/html/introduction_to_html/getting_started/index.md b/files/en-us/learn/html/introduction_to_html/getting_started/index.md index d002d9cf3f23c3d..ad11e1f16eb2d46 100644 --- a/files/en-us/learn/html/introduction_to_html/getting_started/index.md +++ b/files/en-us/learn/html/introduction_to_html/getting_started/index.md @@ -168,7 +168,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -365,7 +365,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -475,7 +475,7 @@ Instead, you need to do this: Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page: ```html - + @@ -635,7 +635,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; 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 17d0e065032baa5..77f2f7110f28e5e 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 @@ -215,7 +215,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -408,7 +408,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -567,7 +567,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -729,7 +729,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -948,7 +948,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; diff --git a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md index 98a110d5a7f9a8b..380853043e14e37 100644 --- a/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +++ b/files/en-us/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -34,7 +34,7 @@ The {{glossary("Head", "head")}} of an HTML document is the part that is not dis Let's revisit the simple [HTML document we covered in the previous article](/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document): ```html - + diff --git a/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index 0132d441473e092..d60c51b736f600b 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -294,7 +294,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; diff --git a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md index a8fe844513c79c3..728d745029d26ab 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -280,7 +280,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; @@ -525,7 +525,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; 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 ed31a4e2a1a6305..7dc3d84c1e22df2 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 @@ -169,7 +169,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; diff --git a/files/en-us/learn/html/tables/advanced/index.md b/files/en-us/learn/html/tables/advanced/index.md index f05e2659c2d8022..d0fe7eb5a475e58 100644 --- a/files/en-us/learn/html/tables/advanced/index.md +++ b/files/en-us/learn/html/tables/advanced/index.md @@ -101,7 +101,7 @@ Let's put these new elements into action. Your finished table should look something like the following: ```html hidden - + diff --git a/files/en-us/learn/javascript/asynchronous/introducing/index.md b/files/en-us/learn/javascript/asynchronous/introducing/index.md index fe87252fa1e16a0..b82f94e2af3867c 100644 --- a/files/en-us/learn/javascript/asynchronous/introducing/index.md +++ b/files/en-us/learn/javascript/asynchronous/introducing/index.md @@ -243,7 +243,7 @@ document.querySelector("#xhr").addEventListener("click", () => { xhr.open( "GET", - "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json" + "https://raw.githubusercontent.com/mdn/content/main/files/en-us/_wikihistory.json", ); xhr.send(); log.textContent = `${log.textContent}Started XHR request\n`; diff --git a/files/en-us/learn/javascript/asynchronous/introducing_workers/index.md b/files/en-us/learn/javascript/asynchronous/introducing_workers/index.md index 4ffc471135d7324..cfb91a772e4d53e 100644 --- a/files/en-us/learn/javascript/asynchronous/introducing_workers/index.md +++ b/files/en-us/learn/javascript/asynchronous/introducing_workers/index.md @@ -76,7 +76,7 @@ document.querySelector("#generate").addEventListener("click", () => { const quota = document.querySelector("#quota").value; const primes = generatePrimes(quota); document.querySelector( - "#output" + "#output", ).textContent = `Finished generating ${quota} primes!`; }); @@ -101,7 +101,7 @@ For this example, start by making a local copy of the files at + @@ -160,7 +160,7 @@ document.querySelector("#generate").addEventListener("click", () => { // primes that were generated, taken from the message data. worker.addEventListener("message", (message) => { document.querySelector( - "#output" + "#output", ).textContent = `Finished generating ${message.data} primes!`; }); diff --git a/files/en-us/learn/javascript/asynchronous/promises/index.md b/files/en-us/learn/javascript/asynchronous/promises/index.md index cffd4af4126b568..71ac55f95e0ba50 100644 --- a/files/en-us/learn/javascript/asynchronous/promises/index.md +++ b/files/en-us/learn/javascript/asynchronous/promises/index.md @@ -44,7 +44,7 @@ Copy this into your browser's JavaScript console: ```js const fetchPromise = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); console.log(fetchPromise); @@ -83,7 +83,7 @@ Try this: ```js const fetchPromise = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); fetchPromise.then((response) => { @@ -104,7 +104,7 @@ It is, of course. But the elegant feature of promises is that _`then()` itself r ```js const fetchPromise = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); fetchPromise @@ -120,7 +120,7 @@ Before we move on to the next step, there's one more piece to add. We need to ch ```js const fetchPromise = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); fetchPromise @@ -149,7 +149,7 @@ Try this version of our `fetch()` code. We've added an error handler using `catc ```js const fetchPromise = fetch( - "bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "bad-scheme://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); fetchPromise @@ -202,13 +202,13 @@ For example: ```js const fetchPromise1 = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); const fetchPromise2 = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found", ); const fetchPromise3 = fetch( - "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json" + "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json", ); Promise.all([fetchPromise1, fetchPromise2, fetchPromise3]) @@ -236,13 +236,13 @@ If we try the same code with a badly formed URL, like this: ```js const fetchPromise1 = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); const fetchPromise2 = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found", ); const fetchPromise3 = fetch( - "bad-scheme://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json" + "bad-scheme://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json", ); Promise.all([fetchPromise1, fetchPromise2, fetchPromise3]) @@ -266,13 +266,13 @@ Sometimes, you might need any one of a set of promises to be fulfilled, and don' ```js const fetchPromise1 = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); const fetchPromise2 = fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found", ); const fetchPromise3 = fetch( - "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json" + "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json", ); Promise.any([fetchPromise1, fetchPromise2, fetchPromise3]) @@ -308,7 +308,7 @@ async function fetchProducts() { // after this line, our function will wait for the `fetch()` call to be settled // the `fetch()` call will either return a Response or throw an error const response = await fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); @@ -335,7 +335,7 @@ Note though that async functions always return a promise, so you can't do someth async function fetchProducts() { try { const response = await fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); @@ -357,7 +357,7 @@ Instead, you'd need to do something like: async function fetchProducts() { try { const response = await fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); @@ -379,7 +379,7 @@ Also, note that you can only use `await` inside an `async` function, unless your try { // using await outside an async function is only allowed in a module const response = await fetch( - "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json" + "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json", ); if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); diff --git a/files/en-us/learn/javascript/building_blocks/build_your_own_function/index.md b/files/en-us/learn/javascript/building_blocks/build_your_own_function/index.md index 3ed7bbca8c1d210..847b634ad33c056 100644 --- a/files/en-us/learn/javascript/building_blocks/build_your_own_function/index.md +++ b/files/en-us/learn/javascript/building_blocks/build_your_own_function/index.md @@ -81,7 +81,7 @@ To begin with, let's put together a basic function. panel.appendChild(closeBtn); closeBtn.addEventListener("click", () => - panel.parentNode.removeChild(panel) + panel.parentNode.removeChild(panel), ); ``` @@ -221,7 +221,7 @@ As it stands, the function is still not very useful — we don't want to just sh ```js btn.addEventListener("click", () => - displayMessage("Woo, this is a different message!") + displayMessage("Woo, this is a different message!"), ); ``` diff --git a/files/en-us/learn/javascript/building_blocks/conditionals/index.md b/files/en-us/learn/javascript/building_blocks/conditionals/index.md index 0f8c7faddbd342d..daab3fe1c5b2275 100644 --- a/files/en-us/learn/javascript/building_blocks/conditionals/index.md +++ b/files/en-us/learn/javascript/building_blocks/conditionals/index.md @@ -401,7 +401,9 @@ function update(bgColor, textColor) { } select.addEventListener("change", () => - select.value === "black" ? update("black", "white") : update("white", "black") + select.value === "black" + ? update("black", "white") + : update("white", "black"), ); ``` @@ -619,7 +621,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; @@ -806,7 +808,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; diff --git a/files/en-us/learn/javascript/building_blocks/functions/index.md b/files/en-us/learn/javascript/building_blocks/functions/index.md index 83f4f3324e27765..141236eb555bb17 100644 --- a/files/en-us/learn/javascript/building_blocks/functions/index.md +++ b/files/en-us/learn/javascript/building_blocks/functions/index.md @@ -267,7 +267,7 @@ You can use the same concise syntax to rewrite the `addEventListener` example. ```js textBox.addEventListener("keydown", (event) => - console.log(`You pressed "${event.key}".`) + console.log(`You pressed "${event.key}".`), ); ``` diff --git a/files/en-us/learn/javascript/building_blocks/looping_code/index.md b/files/en-us/learn/javascript/building_blocks/looping_code/index.md index 491e257528466e7..b5cbe66517ce374 100644 --- a/files/en-us/learn/javascript/building_blocks/looping_code/index.md +++ b/files/en-us/learn/javascript/building_blocks/looping_code/index.md @@ -88,7 +88,7 @@ function draw() { random(canvas.height), random(50), 0, - 2 * Math.PI + 2 * Math.PI, ); ctx.fill(); } @@ -110,7 +110,7 @@ for (let i = 0; i < 100; i++) { random(canvas.height), random(50), 0, - 2 * Math.PI + 2 * Math.PI, ); ctx.fill(); } @@ -132,7 +132,7 @@ ctx.arc( random(canvas.height), random(50), 0, - 2 * Math.PI + 2 * Math.PI, ); ctx.fill(); ``` @@ -726,7 +726,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; @@ -907,7 +907,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; diff --git a/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md index 61bb18df611d027..4637d0a9007dba4 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -294,7 +294,7 @@ Now let's look at what we have to do in the first place, to actually set up a da ```js // error handler signifies that the database didn't open successfully openRequest.addEventListener("error", () => - console.error("Database failed to open") + console.error("Database failed to open"), ); // success handler signifies that the database opened successfully @@ -398,7 +398,7 @@ function addData(e) { }); transaction.addEventListener("error", () => - console.log("Transaction not opened due to error") + console.log("Transaction not opened due to error"), ); } ``` @@ -569,7 +569,7 @@ Let's walk through the most interesting parts of the example. We won't look at i displayVideo( request.result.mp4, request.result.webm, - request.result.name + request.result.name, ); } else { // Fetch the videos from the network @@ -590,10 +590,10 @@ Let's walk through the most interesting parts of the example. We won't look at i // Fetch the MP4 and WebM versions of the video using the fetch() function, // then expose their response bodies as blobs const mp4Blob = fetch(`videos/${video.name}.mp4`).then((response) => - response.blob() + response.blob(), ); const webmBlob = fetch(`videos/${video.name}.webm`).then((response) => - response.blob() + response.blob(), ); // Only run the next code when both promises have fulfilled @@ -619,7 +619,7 @@ Let's walk through the most interesting parts of the example. We won't look at i const request = objectStore.add({ mp4, webm, name }); request.addEventListener("success", () => - console.log("Record addition attempt finished") + console.log("Record addition attempt finished"), ); request.addEventListener("error", () => console.error(request.error)); } @@ -685,7 +685,7 @@ The first thing to note is that there's an extra bit of code placed in the main if ("serviceWorker" in navigator) { navigator.serviceWorker .register( - "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js" + "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js", ) .then(() => console.log("Service Worker Registered")); } @@ -714,8 +714,8 @@ self.addEventListener("install", (e) => { "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html", "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js", "/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css", - ]) - ) + ]), + ), ); }); ``` @@ -738,7 +738,7 @@ If a match is found, we return it as the custom response. If not, we [fetch()](/ self.addEventListener("fetch", (e) => { console.log(e.request.url); e.respondWith( - caches.match(e.request).then((response) => response || fetch(e.request)) + caches.match(e.request).then((response) => response || fetch(e.request)), ); }); ``` diff --git a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md index 45b4b0918bdf107..d620802af12ffb3 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md @@ -676,7 +676,7 @@ function draw() { sizePicker.value, degToRad(0), degToRad(360), - false + false, ); ctx.fill(); } @@ -723,7 +723,7 @@ Let's look at a simple example of how to create something with a WebGL library. 75, window.innerWidth / window.innerHeight, 0.1, - 1000 + 1000, ); camera.position.z = 5; ``` diff --git a/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md index edfcc649eb04726..3e028c41519bf5f 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/manipulating_documents/index.md @@ -48,7 +48,7 @@ The document currently loaded in each one of your browser tabs is represented by We have created a simple example page at [dom-example.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/document-manipulation/dom-example.html) ([see it live also](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html)). Try opening this up in your browser — it is a very simple page containing a {{htmlelement("section")}} element inside which you can find an image, and a paragraph with a link inside. The HTML source code looks like this: ```html - + @@ -146,7 +146,7 @@ The above has given you a little taste of what you can do, but let's go further ```js const text = document.createTextNode( - " — the premier source for web development knowledge." + " — the premier source for web development knowledge.", ); ``` diff --git a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md index 01ed3bc6a4b0951..8d3c3e2ea95980c 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md @@ -143,7 +143,8 @@ Next, let's look at our button icons: @font-face { font-family: "HeydingsControlsRegular"; src: url("fonts/heydings_controls-webfont.eot"); - src: url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"), + src: + url("fonts/heydings_controls-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/heydings_controls-webfont.woff") format("woff"), url("fonts/heydings_controls-webfont.ttf") format("truetype"); font-weight: normal; diff --git a/files/en-us/learn/javascript/first_steps/arrays/index.md b/files/en-us/learn/javascript/first_steps/arrays/index.md index a96168fff67d9f6..f8a63defadfe189 100644 --- a/files/en-us/learn/javascript/first_steps/arrays/index.md +++ b/files/en-us/learn/javascript/first_steps/arrays/index.md @@ -411,7 +411,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; @@ -645,7 +645,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; diff --git a/files/en-us/learn/javascript/first_steps/useful_string_methods/index.md b/files/en-us/learn/javascript/first_steps/useful_string_methods/index.md index 254145d6bd5af1d..0a6c830ce46b3f9 100644 --- a/files/en-us/learn/javascript/first_steps/useful_string_methods/index.md +++ b/files/en-us/learn/javascript/first_steps/useful_string_methods/index.md @@ -358,7 +358,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; @@ -522,7 +522,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; @@ -705,7 +705,7 @@ function insertAtCaret(text) { const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, - textarea.value.length + textarea.value.length, ); textarea.value = front + text + back; diff --git a/files/en-us/learn/javascript/objects/classes_in_javascript/index.md b/files/en-us/learn/javascript/objects/classes_in_javascript/index.md index be6a04e76f39c73..7052952654e8919 100644 --- a/files/en-us/learn/javascript/objects/classes_in_javascript/index.md +++ b/files/en-us/learn/javascript/objects/classes_in_javascript/index.md @@ -113,7 +113,7 @@ class Professor extends Person { introduceSelf() { console.log( - `My name is ${this.name}, and I will be your ${this.teaches} professor.` + `My name is ${this.name}, and I will be your ${this.teaches} professor.`, ); } diff --git a/files/en-us/learn/javascript/objects/object_building_practice/index.md b/files/en-us/learn/javascript/objects/object_building_practice/index.md index 4a704c52519633c..630cd3511b31d04 100644 --- a/files/en-us/learn/javascript/objects/object_building_practice/index.md +++ b/files/en-us/learn/javascript/objects/object_building_practice/index.md @@ -213,7 +213,7 @@ while (balls.length < 25) { random(-7, 7), random(-7, 7), randomRGB(), - size + size, ); balls.push(ball); diff --git a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md index 374f852357ee14d..97ea05719444328 100644 --- a/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md +++ b/files/en-us/learn/mathml/first_steps/fractions_and_roots/index.md @@ -175,7 +175,9 @@ Here is a simple exercise to verify whether you understood the relation between ```css hidden math { - font-family: Latin Modern Math, STIX Two Math; + font-family: + Latin Modern Math, + STIX Two Math; font-size: 200%; } math .highlight { @@ -213,7 +215,7 @@ function verifyOption(checkbox) { } } const finished = checkboxes.every( - (checkbox) => !!checkbox.checked === !!checkbox.dataset.highlight + (checkbox) => !!checkbox.checked === !!checkbox.dataset.highlight, ); status.textContent = finished ? "Congratulations, you checked all the correct answers!" diff --git a/files/en-us/learn/mathml/first_steps/getting_started/index.md b/files/en-us/learn/mathml/first_steps/getting_started/index.md index cfad32e3f1fbb65..f961d0dc8cb9464 100644 --- a/files/en-us/learn/mathml/first_steps/getting_started/index.md +++ b/files/en-us/learn/mathml/first_steps/getting_started/index.md @@ -42,7 +42,7 @@ In this article, we will take a simple HTML document and see how to add MathML f MathML uses the same syntax as HTML to represent a tree of elements and attributes. In particular, each mathematical formula is represented by an element `` which can be placed inside an HTML page. In the following document, it is inside a paragraph of text: ```html - + My first math page @@ -73,7 +73,7 @@ The `` element specifies a fraction with a numerator (its first child) an Note that in the previous example, the formula is on the same line as the text of the paragraph. However, it is quite common to instead render large mathematical formulas centered on their own line as shown below. To achieve that, you need to attach a `display="block"` attribute on the `` element. ```html hidden - + My first math page diff --git a/files/en-us/learn/mathml/first_steps/scripts/index.md b/files/en-us/learn/mathml/first_steps/scripts/index.md index cb49fb28e6e17c6..f43c0e57df06df2 100644 --- a/files/en-us/learn/mathml/first_steps/scripts/index.md +++ b/files/en-us/learn/mathml/first_steps/scripts/index.md @@ -151,7 +151,7 @@ document.getElementById("showSolution").addEventListener("click", () => { The following MathML formula contains a more complex expression, nesting fractions, roots and scripts. Try to guess the elements laid out with scripted elements ``, ``, ``, ``, ``, ``. Each time you click such an element, it is highlighted and a confirmation message is displayed. Finally, read the MathML source to verify whether that corresponds to your expectation. ```html hidden - + @@ -230,7 +230,7 @@ math { ```js hidden const scriptedElements = Array.from( - document.querySelectorAll("msub, msup, msubsup, munder, mover, munderover") + document.querySelectorAll("msub, msup, msubsup, munder, mover, munderover"), ); const outputDiv = document.getElementById("output"); function clearHighlight() { @@ -244,7 +244,7 @@ scriptedElements.forEach((scripted) => { scripted.classList.add("highlight"); outputDiv.insertAdjacentHTML( "beforeend", - `

You clicked an <${scripted.tagName}> element.

` + `

You clicked an <${scripted.tagName}> element.

`, ); }); }); @@ -265,7 +265,7 @@ We have previously seen some [properties of the `` element](/en-US/docs/Lear Let's first perform the substitutions β ≔ z 1 + z 2 and α ≔ v 1 + v 2 : ```html hidden - + @@ -371,7 +371,7 @@ We now realize that the bottom bracket "⎵" and the rightward arrow "→" stret So far our example has actually been rendered with the [`display="block"`](/en-US/docs/Learn/MathML/First_steps/Getting_started#the_display_attribute) attribute. Let's look at the same example, as rendered without that attribute: ```html hidden - + diff --git a/files/en-us/learn/mathml/first_steps/tables/index.md b/files/en-us/learn/mathml/first_steps/tables/index.md index 36600ee98cddba3..7a26364e1209e81 100644 --- a/files/en-us/learn/mathml/first_steps/tables/index.md +++ b/files/en-us/learn/mathml/first_steps/tables/index.md @@ -131,7 +131,7 @@ Tables are typically used for matrix-like expressions (including vectors). Here This is again similar to [HTML tables](/en-US/docs/Learn/HTML/Tables/Basics#allowing_cells_to_span_multiple_rows_and_columns). The `` element accepts the `columnspan` and `rowspan` attributes to indicate that the cell spans multiples rows and columns. Below the inner matrix spans two columns of the outer matrix: ```html hidden - + @@ -222,7 +222,7 @@ This is again similar to [HTML tables](/en-US/docs/Learn/HTML/Tables/Basics#allo Besides representing matrix-like objects, MathML tables are sometimes used for advanced layout inside mathematical formulas, for example in [Wikipedia's definition of Legendre symbol](https://en.wikipedia.org/wiki/Legendre_symbol). Here, the different cases are written on three different rows while the values and conditions are placed on two different columns. ```html hidden - + diff --git a/files/en-us/learn/mathml/first_steps/text_containers/index.md b/files/en-us/learn/mathml/first_steps/text_containers/index.md index c2bb53bd91b79d0..8b666c357bde51c 100644 --- a/files/en-us/learn/mathml/first_steps/text_containers/index.md +++ b/files/en-us/learn/mathml/first_steps/text_containers/index.md @@ -45,7 +45,7 @@ Mathematical formulas involve many special characters, for example greek letters Since most of these characters are not part of Basic Latin Unicode block, it is recommended to specify your [document's character encoding](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding) and to serve it with appropriate [web fonts](/en-US/docs/Learn/CSS/Styling_text/Web_fonts). Here is a basic template to use UTF-8 encoding and the [Latin Modern Math](/en-US/docs/Web/MathML/Fonts#fonts_with_a_math_table) font: ```html - + @@ -76,7 +76,7 @@ We noticed in the [getting started with MathML](/en-US/docs/Learn/MathML/First_s Below is a more complex example, which says that the absolute value of a real number is equal to that number if and only if it is nonnegative. Spot the different token elements and what they are used for. Each time you click the corresponding text, it is highlighted and a confirmation message is displayed. ```html hidden - + @@ -120,7 +120,7 @@ math { ```js hidden const tokenElements = Array.from( - document.querySelectorAll("mi, mo, mn, mtext") + document.querySelectorAll("mi, mo, mn, mtext"), ); const outputDiv = document.getElementById("output"); function clearHighlight() { @@ -134,7 +134,7 @@ tokenElements.forEach((token) => { token.classList.add("highlight"); outputDiv.insertAdjacentHTML( "beforeend", - `

You clicked an <${token.tagName}> element.

` + `

You clicked an <${token.tagName}> element.

`, ); }); }); @@ -242,7 +242,7 @@ Operators have many other properties that we will see in more details later. For Now that you are a bit familiar with special features of `` and ``, let's rewrite the `

` element in the [example at the top of the page](#unicode_characters_for_mathematics) with some actual MathML. Compare the visual rendering in your browser and explain the differences with the text-only version. ```html - + @@ -302,10 +302,10 @@ document.getElementById("showSolution").addEventListener( `

  • The <mi> elements containing the "A" and "n" variables are rendered in italic. However, the <mi> elements with multiple characters "𝔰𝔩" or whose character is "𝔽" are still rendered upright.
  • Spacing is automatically added around the <mo> elements whose text is "∀", "∊", "=" or a comma. However, some of them have no spacing added before while the parentheses still have no spacing around them.
    • -
` + `, ); }, - { once: true } + { once: true }, ); ``` @@ -318,7 +318,7 @@ document.getElementById("showSolution").addEventListener( The operator dictionary defines a default _stretchy_ property as well as corresponding _stretch axis_ for some operators. For example, an operator can stretch vertically by default to cover the maximum height of non-stretchy siblings within its `` container. By tweaking a bit the [previous exercise](#active_learning_recognize_token_elements), one can make operators stretch vertically. Can you find them? ```html hidden - + @@ -377,10 +377,10 @@ math { ```js hidden const tokenElements = Array.from( - document.querySelectorAll("mi, mo, mn, mtext") + document.querySelectorAll("mi, mo, mn, mtext"), ); const stretchyMoElements = Array.from( - document.getElementsByTagName("mo") + document.getElementsByTagName("mo"), ).slice(0, 2); const outputDiv = document.getElementById("output"); function clearHighlight() { @@ -401,7 +401,7 @@ tokenElements.forEach((token) => { message = `Correct, this ${tagName} element is indeed stretched to the height of its <mfrac> sibling.`; outputDiv.insertAdjacentHTML( "beforeend", - `

${message}

` + `

${message}

`, ); }); }); diff --git a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md index 996583f04438b60..64a9a802f8e1831 100644 --- a/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md +++ b/files/en-us/learn/mathml/first_steps/three_famous_mathematical_formulas/index.md @@ -92,7 +92,7 @@ using the following expression: To get this assessment started, you can rely on our usual HTML template. By default it uses UTF-8 encoding, special Web fonts for the `` and `` tags (with similar look & feel as the LaTeX output). The goal is to replace the question marks `???` with actual MathML content. ```html - + diff --git a/files/en-us/learn/server-side/express_nodejs/deployment/index.md b/files/en-us/learn/server-side/express_nodejs/deployment/index.md index 6fd03916972b9f4..618c9be1b5b5ecb 100644 --- a/files/en-us/learn/server-side/express_nodejs/deployment/index.md +++ b/files/en-us/learn/server-side/express_nodejs/deployment/index.md @@ -236,7 +236,7 @@ app.use( directives: { "script-src": ["'self'", "code.jquery.com", "cdn.jsdelivr.net"], }, - }) + }), ); // … 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 dbb40870daca5ea..0765c5eabb45420 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 @@ -405,7 +405,7 @@ const Athlete = mongoose.model("Athlete", yourSchema); // find all athletes who play tennis, selecting the 'name' and 'age' fields const tennisPlayers = await Athlete.find( { sport: "Tennis" }, - "name age" + "name age", ).exec(); ``` diff --git a/files/en-us/learn/server-side/express_nodejs/routes/index.md b/files/en-us/learn/server-side/express_nodejs/routes/index.md index 6754e7b7c08bf82..fecf3f84c2b8231 100644 --- a/files/en-us/learn/server-side/express_nodejs/routes/index.md +++ b/files/en-us/learn/server-side/express_nodejs/routes/index.md @@ -224,7 +224,7 @@ exports.get( asyncHandler(async (req, res, next) => { const successfulResult = await About.find({}).exec(); res.render("about_view", { title: "About", list: successfulResult }); - }) + }), ); ``` @@ -593,37 +593,37 @@ router.get("/genres", genre_controller.genre_list); // GET request for creating a BookInstance. NOTE This must come before route that displays BookInstance (uses id). router.get( "/bookinstance/create", - book_instance_controller.bookinstance_create_get + book_instance_controller.bookinstance_create_get, ); // POST request for creating BookInstance. router.post( "/bookinstance/create", - book_instance_controller.bookinstance_create_post + book_instance_controller.bookinstance_create_post, ); // GET request to delete BookInstance. router.get( "/bookinstance/:id/delete", - book_instance_controller.bookinstance_delete_get + book_instance_controller.bookinstance_delete_get, ); // POST request to delete BookInstance. router.post( "/bookinstance/:id/delete", - book_instance_controller.bookinstance_delete_post + book_instance_controller.bookinstance_delete_post, ); // GET request to update BookInstance. router.get( "/bookinstance/:id/update", - book_instance_controller.bookinstance_update_get + book_instance_controller.bookinstance_update_get, ); // POST request to update BookInstance. router.post( "/bookinstance/:id/update", - book_instance_controller.bookinstance_update_post + book_instance_controller.bookinstance_update_post, ); // GET request for one BookInstance. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md index 38d2ab545e77afb..24d5b3aeb99cf27 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/angular_styling/index.md @@ -114,7 +114,9 @@ In `app.component.css`, add the following styles: margin: 2rem auto; padding: 1rem; text-align: center; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); + box-shadow: + 0 2px 4px 0 rgba(0, 0, 0, 0.2), + 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 600px) { diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md index 9a528565c2a6bc4..27b8ce007cb1511 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md @@ -57,7 +57,7 @@ const subject = "World"; const header = React.createElement( "header", null, - React.createElement("h1", null, "Hello, ", subject, "!") + React.createElement("h1", null, "Hello, ", subject, "!"), ); ``` diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md index fa4fac71e69bbd2..749676e7f8353a9 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_components/index.md @@ -247,7 +247,7 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + , ); ``` diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md index b9cd5380bb2d9b8..6cabca520e96be6 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -97,7 +97,7 @@ Of course, your browser can't read JSX without help. When compiled (using a tool const header = React.createElement( "header", null, - React.createElement("h1", null, "Mozilla Developer Network") + React.createElement("h1", null, "Mozilla Developer Network"), ); ``` @@ -310,7 +310,7 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + , ); // If you want to start measuring performance in your app, pass a function @@ -347,7 +347,7 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + , ); ``` diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md index e00157ca366c707..b2dfe750daee3e4 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md @@ -313,7 +313,9 @@ body { width: 100%; max-width: 68rem; margin: 0 auto; - font: 1.6rem/1.25 Arial, sans-serif; + font: + 1.6rem/1.25 Arial, + sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @@ -406,7 +408,9 @@ body { margin: 2rem 0 4rem 0; padding: 1rem; position: relative; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); + box-shadow: + 0 2px 4px 0 rgba(0, 0, 0, 0.2), + 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md index a5a84f13abc0d7d..893b4290da859f8 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.md @@ -376,7 +376,7 @@ It also compiles the markup and `
- - -