diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png deleted file mode 100644 index 8a1cb2b691431de..000000000000000 Binary files a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png and /dev/null differ 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 b797dc1c3c4030c..cf6123656d0f54b 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 @@ -27,10 +27,14 @@ How do you pull it up? Three ways: - **_Menu bar:_** - - **Firefox:** Menu ![Firefox hamburger menu icon that has more options to customize and control Firefox.](2014-01-10-13-08-08-f52b8c.png) _➤ More tools ➤ Web Developer Tools_ + - **Firefox:** _Menu (☰) ➤ More tools ➤ Web Developer Tools_ - **Chrome:** _More tools ➤ Developer tools_ - - **Safari:** _Develop ➤ Show Web Inspector._ If you can't see the _Develop_ menu, go to _Safari ➤ Preferences ➤ Advanced_, and check the _Show Develop menu in menu bar_ checkbox. - **Opera**: _Developer ➤ Developer tools_ + - **Safari:** _Develop ➤ Show Web Inspector._ + + > [!NOTE] + > The Safari developer tools are not enabled by default. + > To enable them, go to _Safari ➤ Preferences ➤ Advanced_, and check the _Show Develop menu in menu bar_ or _Enable features for web developers_ checkbox. - **_Context menu:_** Press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac), and choose _Inspect Element_ from the context menu that appears. (_An added bonus:_ this method straight-away highlights the code of the element you right-clicked.) @@ -44,9 +48,8 @@ The developer tools usually open by default to the inspector, which looks someth If you _don't_ see the inspector, -- Tap/click the _Inspector_ tab. -- In Chrome, Microsoft Edge, or Opera, tap/click Elements. -- In Safari, the controls are not so clearly presented, but you should see the HTML if you haven't selected something else to appear in the window. Press the _Style_ button to see the CSS. +- **Firefox:** Select the **Inspector** tab. +- **Other browsers:** Select the **Elements** tab. ### Exploring the DOM inspector @@ -80,20 +83,23 @@ These features are especially handy: You'll notice a number of clickable tabs at the top of the CSS Viewer: - _Computed_: This shows the computed styles for the currently selected element (the final, normalized values that the browser applies). -- _Layout_: In Firefox, this area includes two sections: +- _Layout_: This shows the details for CSS [grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) layout modes if the element you are inspecting uses them. +- _Fonts_: In Firefox and Safari, the _Fonts_ tab shows the fonts applied to the current element. + +The _box model_ view visually represents the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is. In Firefox, this is located in the _Layout_ tab, and in other browsers it is in the _Computed_ tab. - - _Box Model_: represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is. - - _Grid_: If the page you are inspecting uses CSS grid, this section allows you to view the grid details. +In some browsers, the JavaScript details of the selected element can also be viewed in this panel. In Safari, these are unified under the _Node_ tab, but are in separate tabs in Chrome, Opera, and Edge. -- _Fonts_: In Firefox, the _Fonts_ tab shows the fonts applied to the current element. +- _Properties_: The {{Glossary("Property (JavaScript)", "properties")}} of the element object. +- _Event Listeners_: The [events](/en-US/docs/Web/API/Event) associated with the element. ### Find out more Find out more about the Inspector in different browsers: - [Firefox Page inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html) -- [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/dom/) (Opera's inspector works the same as this) -- [Safari DOM inspector and style explorer](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1) +- [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/dom/) (Opera and Edge's inspector is the same) +- [Safari Elements tab](https://webkit.org/web-inspector/elements-tab/) ## The JavaScript debugger @@ -103,15 +109,12 @@ The JavaScript debugger allows you to watch the value of variables and set break To get to the debugger: -**Firefox**: Select ![Firefox menu icon that has more options to customize and control Firefox.](2014-01-10-13-08-08-f52b8c.png) ➤ _Web Developer_ ➤ _Debugger_ or press Ctrl + Shift + S to open the JavaScript Debugger. If the tools are already displayed, click on the **Debugger** tab. - -**Chrome**: Open the Developer tools and then select the **Sources** tab. (Opera works the same way.) - -**Safari**: Open the Developer Tools and then select the Debugger tab. +**Firefox**: Open the Developer tools and select the **Debugger** tab. +**Other browsers**: Open the Developer tools and select the **Sources** tab. ### Exploring the debugger -There are three panes in the JavaScript Debugger on Firefox. +Each browser's JavaScript debugger is divided into three panes. The layout of these is somewhat different depending on the browser you are using; this guide uses Firefox as a reference. #### File list @@ -146,19 +149,14 @@ The final section, **Scopes**, shows what values are visible from various points Find out more about the JavaScript debugger in different browsers: - [Firefox JavaScript Debugger](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)) -- [Microsoft Edge Debugger](https://learn.microsoft.com/en-us/archive/microsoft-edge/legacy/developer/devtools-guide/debugger) -- [Chrome Debugger](https://developer.chrome.com/docs/devtools/javascript/) -- [Safari Debugger](https://developer.apple.com/safari/tools/) +- [Chrome Debugger](https://developer.chrome.com/docs/devtools/javascript/) (Opera and Edge's debugger is the same) +- [Safari Sources tab](https://webkit.org/web-inspector/sources-tab/) ## The JavaScript console -The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser: - -If the developer tools are already open, click or press the Console tab. - -If not, Firefox allows you to open the console directly using Ctrl + Shift + K or using the menu command: Menu ![Firefox menu](2014-01-10-13-08-08-f52b8c.png) _➤ Web Developer ➤ Web Console,_ or _Tools ➤_ _Web Developer ➤ Web Console._ On other browsers, open the developer tools and then click the Console tab. +The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. -This will give you a window like the following: +To access the console in any browser, open the developer tools and select the **Console** tab. This will give you a window like the following: ![The Console tab of the browser developer tools. Two JavaScript functions have been executed in the console. The user entered functions, and the console displayed the return values.](console_only.png) @@ -207,8 +205,8 @@ You'll start to see the kind of errors that the browser returns. Often these err Find out more about the JavaScript console in different browsers: - [Firefox Web Console](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html) -- [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/console/) (Opera's inspector works the same as this) -- [Safari Console](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1) +- [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/console/) (Opera and Edge's console is the same) +- [Safari Console Object API](https://webkit.org/web-inspector/console-object-api/) and [Console Command Line API](https://webkit.org/web-inspector/console-command-line-api/) ## See also 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 a30e6cd800f4a7e..50517255e3f1d40 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 @@ -258,9 +258,9 @@ You can import more than one CSS file into a single layer. The following declara You can import styles and create layers based on specific conditions using [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) and [feature queries](/en-US/docs/Web/CSS/CSS_conditional_rules/Using_feature_queries). The following imports a style sheet into an `international` layer only if the browser supports `display: ruby`, and the file being imported is dependent on the width of the screen. ```css -@import url("ruby-narrow.css") layer(international) supports(display: ruby) and +@import url("ruby-narrow.css") layer(international) supports(display: ruby) (width < 32rem); -@import url("ruby-wide.css") layer(international) supports(display: ruby) and +@import url("ruby-wide.css") layer(international) supports(display: ruby) (width >= 32rem); ``` diff --git a/files/en-us/learn/forms/sending_and_retrieving_form_data/index.md b/files/en-us/learn/forms/sending_and_retrieving_form_data/index.md index f7e27d083a2c5bd..d0eb96517113b2d 100644 --- a/files/en-us/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/en-us/learn/forms/sending_and_retrieving_form_data/index.md @@ -213,7 +213,7 @@ This example displays a page with the data we sent. You can see this in action i ![Otherwise blank web page with "hi mom", the data received in response after submitting form data to a php file with POST method](php-result.png) > [!NOTE] -> This example won't work when you load it into a browser locally — browsers cannot interpret PHP code, so when the form is submitted the browser will just offer to download the PHP file for you. To get it to work, you need to run the example through a PHP server of some kind. Good options for local PHP testing are [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) and [AMPPS](https://ampps.com/downloads/) (Mac, Windows, Linux). +> This example won't work when you load it into a browser locally — browsers cannot interpret PHP code, so when the form is submitted the browser will just offer to download the PHP file for you. To get it to work, you need to run the example through a PHP server of some kind. Good options for local PHP testing are [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) and [XAMPP](https://www.apachefriends.org/download.html) (Mac, Windows, Linux). > > Note also that if you are using MAMP but don't have MAMP Pro installed (or if the MAMP Pro demo time trial has expired), you might have trouble getting it working. To get it working again, we have found that you can load up the MAMP app, then choose the menu options _MAMP_ > _Preferences_ > _PHP_, and set "Standard Version:" to "7.2.x" (x will differ depending on what version you have installed). diff --git a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md index 74613ab9cfe98bd..3223f203a739260 100644 --- a/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md +++ b/files/en-us/learn/javascript/building_blocks/test_your_skills_colon__conditionals/index.md @@ -53,6 +53,7 @@ Inside the first `if...else`, you need to nest another `if...else` that puts app - Score of 90 to 100 — "What an amazing score! Did you cheat? Are you for real?" Try updating the live code below to recreate the finished example. After you've entered your code, try changing `machineActive` to `true`, to see if it works. +Please note that, for the scope of this exercise, the `Your score is __` statement will remain on the screen regardless of the `machineActive`'s value. {{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/conditionals/conditionals2.html", '100%', 400)}} diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md index a39360888f515f0..b0ab4c97dfff637 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/vue_methods_events_models/index.md @@ -78,7 +78,7 @@ We now have an app that displays a list of to-do items. However, we can't update 4. Let's load this component into our app. Go back to `App.vue` and add the following `import` statement just below the previous one, inside your ` diff --git a/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index 58be911d44091df..77fa2e4240a0ddf 100644 --- a/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -33,7 +33,7 @@ This project uses the [glMatrix](https://glmatrix.net/) library to perform its m - + ``` @@ -274,7 +274,7 @@ function drawScene(gl, programInfo, buffers) { const zFar = 100.0; const projectionMatrix = mat4.create(); - // note: glmatrix.js always has the first argument + // note: glMatrix always has the first argument // as the destination to receive the result. mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar); diff --git a/files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index 915ff71782201a5..531ec361597907f 100644 --- a/files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -35,7 +35,7 @@ The "index.html" file should contain the following: - + ``` @@ -53,7 +53,7 @@ main(); // start here // function main() { - const canvas = document.querySelector("#glcanvas"); + const canvas = document.querySelector("#gl-canvas"); // Initialize the GL context const gl = canvas.getContext("webgl"); diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md index 13bba72cbcee5e1..31ed1ca130b0cdf 100644 --- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md +++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md @@ -14,12 +14,11 @@ Alright, so you've got the microphone permissions set up. The next step is to ma ```js peer.on("open", () => { - window.caststatus.textContent = `Your device ID is: ${peer.id}`; + document.getElementById("cast-status").textContent = + `Your device ID is: ${peer.id}`; }); ``` - Here you're replacing the text in the HTML element with the ID `caststatus`. - 2. Try reloading the app in your browser. Instead of `connecting...`, you should see `Your device ID is: `. ![A cream background with the words 'phone a friend' in bold, dark green font as the heading. 'Your device ID is: 3b77' is immediately below that and 'please use headphones!' below that. Following on, a big dark green button with 'Call' written in the same cream color of the background.](app_showing_device_id.png) @@ -31,14 +30,15 @@ Alright, so you've got the microphone permissions set up. The next step is to ma // Displays the call button and peer ID function showCallContent() { - window.caststatus.textContent = `Your device ID is: ${peer.id}`; + document.getElementById("cast-status").textContent = + `Your device ID is: ${peer.id}`; callBtn.hidden = false; audioContainer.hidden = true; } // Displays the audio controls and correct copy function showConnectedContent() { - window.caststatus.textContent = "You're connected"; + document.getElementById("cast-status").textContent = "You're connected"; callBtn.hidden = true; audioContainer.hidden = false; } diff --git a/files/en-us/web/api/webrtc_api/index.md b/files/en-us/web/api/webrtc_api/index.md index 25b4d23ce4e144b..7f492b1f4a65639 100644 --- a/files/en-us/web/api/webrtc_api/index.md +++ b/files/en-us/web/api/webrtc_api/index.md @@ -86,9 +86,9 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W - {{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}} - : An {{domxref("RTCPeerConnectionIceErrorEvent")}} indicating that an error has occurred while gathering ICE candidates. - {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}} - - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE connection's state—found in the {{domxref("RTCPeerConnection.iceconnectionstate", "iceconnectionstate")}} property—changes. + - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE connection's state—found in the {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}} property—changes. - {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} - - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE gathering state—found in the {{domxref("RTCPeerConnection.icegatheringstate", "icegatheringstate")}} property—changes. + - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE gathering state—found in the {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} property—changes. - {{domxref("RTCDataChannel.message_event", "message")}} - : A message has been received on the data channel. The event is of type {{domxref("MessageEvent")}}. - {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} @@ -98,9 +98,9 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W - {{domxref("RTCIceTransport.selectedcandidatepairchange_event", "selectedcandidatepairchange")}} - : The currently-selected pair of ICE candidates has changed for the `RTCIceTransport` on which the event is fired. - {{domxref("RTCPeerConnection.track_event", "track")}} - - : The `track` event, of type {{domxref("RTCTrackevent")}} is sent to an {{domxref("RTCPeerConnection")}} when a new track is added to the connection following the successful negotiation of the media's streaming. + - : The `track` event, of type {{domxref("RTCTrackEvent")}} is sent to an {{domxref("RTCPeerConnection")}} when a new track is added to the connection following the successful negotiation of the media's streaming. - {{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}} - - : Sent to the peer connection when its {{domxref("RTCPeerConnection.signalingstate", "signalingstate")}} has changed. This happens as a result of a call to either {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} or {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}. + - : Sent to the peer connection when its {{domxref("RTCPeerConnection.signalingState", "signalingState")}} has changed. This happens as a result of a call to either {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} or {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}. - {{domxref("RTCDtlsTransport.statechange_event", "statechange")}} - : The state of the `RTCDtlsTransport` has changed. - {{domxref("RTCIceTransport.statechange_event", "statechange")}} diff --git a/files/en-us/web/api/webrtc_api/perfect_negotiation/index.md b/files/en-us/web/api/webrtc_api/perfect_negotiation/index.md index 694752d534e56d5..ded8afc8241f1f2 100644 --- a/files/en-us/web/api/webrtc_api/perfect_negotiation/index.md +++ b/files/en-us/web/api/webrtc_api/perfect_negotiation/index.md @@ -37,25 +37,25 @@ Note that this code is identical for both peers involved in the connection. ### Create the signaling and peer connections -First, the signaling channel needs to be opened and the {{domxref("RTCPeerConnection")}} needs to be created. The {{Glossary("STUN")}} server listed here is obviously not a real one; you'll need to replace `stun.myserver.tld` with the address of a real STUN server. +First, the signaling channel needs to be opened and the {{domxref("RTCPeerConnection")}} needs to be created. The {{Glossary("STUN")}} server listed here is obviously not a real one; you'll need to replace `stun.my-server.tld` with the address of a real STUN server. ```js const config = { - iceServers: [{ urls: "stun:stun.mystunserver.tld" }], + iceServers: [{ urls: "stun:stun.my-stun-server.tld" }], }; const signaler = new SignalingChannel(); const pc = new RTCPeerConnection(config); ``` -This code also gets the {{HTMLElement("video")}} elements using the classes "selfview" and "remoteview"; these will contain, respectively, the local user's self-view and the view of the incoming stream from the remote peer. +This code also gets the {{HTMLElement("video")}} elements using the classes "self-view" and "remote-view"; these will contain, respectively, the local user's self-view and the view of the incoming stream from the remote peer. ### Connecting to a remote peer ```js const constraints = { audio: true, video: true }; -const selfVideo = document.querySelector("video.selfview"); -const remoteVideo = document.querySelector("video.remoteview"); +const selfVideo = document.querySelector("video.self-view"); +const remoteVideo = document.querySelector("video.remote-view"); async function start() { try { diff --git a/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md index 19481c2352b0f3a..fb95766cfce1803 100644 --- a/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md +++ b/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md @@ -188,11 +188,11 @@ The message object passed into this function is converted into a JSON string by #### UI to start a call -The code which handles the `"userlist"` message calls `handleUserlistMsg()`. Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose `users` property is an array of strings specifying the user names of every connected user. +The code which handles the `"user-list"` message calls `handleUserListMsg()`. Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose `users` property is an array of strings specifying the user names of every connected user. ```js -function handleUserlistMsg(msg) { - const listElem = document.querySelector(".userlistbox"); +function handleUserListMsg(msg) { + const listElem = document.querySelector(".user-list-box"); while (listElem.firstChild) { listElem.removeChild(listElem.firstChild); diff --git a/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md b/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md index 3edf3853b93adf4..2e0da345a6c398c 100644 --- a/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md +++ b/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md @@ -52,7 +52,7 @@ Then there's a box which contains the text input box into which the user can typ Finally, there's the little box into which we'll insert the messages. This {{HTMLElement("div")}} block will be the second peer. ```html -
+

Messages received:

``` @@ -83,7 +83,7 @@ function startup() { disconnectButton = document.getElementById("disconnectButton"); sendButton = document.getElementById("sendButton"); messageInputBox = document.getElementById("message"); - receiveBox = document.getElementById("receivebox"); + receiveBox = document.getElementById("receive-box"); // Set event listeners for user interface widgets @@ -283,9 +283,9 @@ When a "message" event occurs on the remote channel, our `handleReceiveMessage() ```js function handleReceiveMessage(event) { const el = document.createElement("p"); - const txtNode = document.createTextNode(event.data); + const textNode = document.createTextNode(event.data); - el.appendChild(txtNode); + el.appendChild(textNode); receiveBox.appendChild(el); } ``` diff --git a/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md b/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md index d23f634bb5b8254..85f44bef139f7d0 100644 --- a/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md +++ b/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md @@ -259,8 +259,8 @@ event.transformer.options.port.onmessage = (event) => { // key is used by the transformer to encrypt frames (not shown) // Get codec to generate a new key frame using the rid - // Here 'rcevent' is the rtctransform event. - rcevent.transformer.generateKeyFrame(rid); + // Here 'rcEvent' is the rtctransform event. + rcEvent.transformer.generateKeyFrame(rid); }; ``` diff --git a/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md index b8462bb0ccac804..83d3cbd8c655ca7 100644 --- a/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md +++ b/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -137,7 +137,7 @@ The code that interprets these incoming messages might look like this: ```js exampleSocket.onmessage = (event) => { - const f = document.getElementById("chatbox").contentDocument; + const f = document.getElementById("chat-box").contentDocument; let text = ""; const msg = JSON.parse(event.data); const time = new Date(msg.date); @@ -154,17 +154,17 @@ exampleSocket.onmessage = (event) => { case "message": text = `(${timeStr}) ${msg.name} : ${msg.text}
`; break; - case "rejectusername": + case "reject-username": text = `Your username has been set to ${msg.name} because the name you chose is in use.
`; break; - case "userlist": - document.getElementById("userlistbox").innerText = msg.users.join("\n"); + case "user-list": + document.getElementById("user-list-box").innerText = msg.users.join("\n"); break; } if (text.length) { f.write(text); - document.getElementById("chatbox").contentWindow.scrollByPages(1); + document.getElementById("chat-box").contentWindow.scrollByPages(1); } }; ``` diff --git a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md index 4a0708051c7b856..5e1c6cfb1876005 100644 --- a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md +++ b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md @@ -22,10 +22,10 @@ WebSockets communicate over a [TCP (Transmission Control Protocol)](https://en.w Constructor: ```cs -TcpListener(System.Net.IPAddress localaddr, int port) +TcpListener(System.Net.IPAddress localAddr, int port) ``` -`localaddr` specifies the IP of the listener, and `port` specifies the port. +`localAddr` specifies the IP of the listener, and `port` specifies the port. > [!NOTE] > To create an `IPAddress` object from a `string`, use the `Parse` static method of `IPAddress`. @@ -221,12 +221,12 @@ for (int i = 0; i < encoded.Length; i++) { ## Put together -### wsserver.cs +### ws-server.cs ```cs // -// csc wsserver.cs -// wsserver.exe +// csc ws-server.cs +// ws-server.exe using System; using System.Net; @@ -265,16 +265,16 @@ class Server { // 3. Compute SHA-1 and Base64 hash of the new value // 4. Write the hash back as the value of "Sec-WebSocket-Accept" response header in an HTTP response string swk = Regex.Match(s, "Sec-WebSocket-Key: (.*)").Groups[1].Value.Trim(); - string swka = swk + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"; - byte[] swkaSha1 = System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(swka)); - string swkaSha1Base64 = Convert.ToBase64String(swkaSha1); + string swkAndSalt = swk + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"; + byte[] swkAndSaltSha1 = System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(swkAndSalt)); + string swkAndSaltSha1Base64 = Convert.ToBase64String(swkAndSaltSha1); // HTTP/1.1 defines the sequence CR LF as the end-of-line marker byte[] response = Encoding.UTF8.GetBytes( "HTTP/1.1 101 Switching Protocols\r\n" + "Connection: Upgrade\r\n" + "Upgrade: websocket\r\n" + - "Sec-WebSocket-Accept: " + swkaSha1Base64 + "\r\n\r\n"); + "Sec-WebSocket-Accept: " + swkAndSaltSha1Base64 + "\r\n\r\n"); stream.Write(response, 0, response.Length); } else { diff --git a/files/en-us/web/api/webtransporterror/index.md b/files/en-us/web/api/webtransporterror/index.md index 646676376859d81..dae6eea9a653800 100644 --- a/files/en-us/web/api/webtransporterror/index.md +++ b/files/en-us/web/api/webtransporterror/index.md @@ -28,7 +28,7 @@ _Inherits properties from its parent, {{DOMxRef("DOMException")}}._ ## Examples ```js -const url = "notaurl"; +const url = "not-a-url"; async function initTransport(url) { try { diff --git a/files/en-us/web/api/webtransporterror/source/index.md b/files/en-us/web/api/webtransporterror/source/index.md index d35950d38ff671b..d1232c0748deb35 100644 --- a/files/en-us/web/api/webtransporterror/source/index.md +++ b/files/en-us/web/api/webtransporterror/source/index.md @@ -17,7 +17,7 @@ An enumerated value; can be either `stream` or `session`. ## Examples ```js -const url = "notaurl"; +const url = "not-a-url"; async function initTransport(url) { try { diff --git a/files/en-us/web/api/webtransporterror/streamerrorcode/index.md b/files/en-us/web/api/webtransporterror/streamerrorcode/index.md index 8cfede3fbad688b..5dbe1eea58fd29f 100644 --- a/files/en-us/web/api/webtransporterror/streamerrorcode/index.md +++ b/files/en-us/web/api/webtransporterror/streamerrorcode/index.md @@ -17,7 +17,7 @@ A number, or `null`. ## Examples ```js -const url = "notaurl"; +const url = "not-a-url"; async function initTransport(url) { try { diff --git a/files/en-us/web/api/webtransporterror/webtransporterror/index.md b/files/en-us/web/api/webtransporterror/webtransporterror/index.md index 9d9618695f48ef9..e560e2e23e64f5d 100644 --- a/files/en-us/web/api/webtransporterror/webtransporterror/index.md +++ b/files/en-us/web/api/webtransporterror/webtransporterror/index.md @@ -30,7 +30,7 @@ new WebTransportError(init) A developer would not use this constructor manually. A new `WebTransportError` object is constructed when an error related to WebTransport occurs, for example a server error or network connection problem. ```js -const url = "notaurl"; +const url = "not-a-url"; async function initTransport(url) { try { diff --git a/files/en-us/web/api/webvr_api/index.md b/files/en-us/web/api/webvr_api/index.md index c4099e51c7f92a7..60dab549b8cf0b2 100644 --- a/files/en-us/web/api/webvr_api/index.md +++ b/files/en-us/web/api/webvr_api/index.md @@ -93,7 +93,7 @@ The WebVR API extends the following APIs, adding the listed features. #### Navigator - {{DOMxRef("Navigator.activeVRDisplays")}} {{ReadOnlyInline}} - - : Returns an array containing every {{DOMxRef("VRDisplay")}} object that is currently presenting ({{DOMxRef("VRDisplay.ispresenting")}} is `true`). + - : Returns an array containing every {{DOMxRef("VRDisplay")}} object that is currently presenting ({{DOMxRef("VRDisplay.isPresenting")}} is `true`). - {{DOMxRef("Navigator.getVRDisplays()")}} - : Returns a promise that resolves to an array of {{DOMxRef("VRDisplay")}} objects representing any available VR displays connected to the computer. diff --git a/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md b/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md index 946250db610b4f9..7cb03f864df1d80 100644 --- a/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md +++ b/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md @@ -114,7 +114,7 @@ To begin with, `start()` retrieves a WebGL context to use to render 3D graphics ```js function start() { - canvas = document.getElementById("glcanvas"); + canvas = document.getElementById("gl-canvas"); initWebGL(canvas); // Initialize the GL context diff --git a/files/en-us/web/api/webvtt_api/index.md b/files/en-us/web/api/webvtt_api/index.md index 130d3d8ead1c310..d3d53251b9a4e60 100644 --- a/files/en-us/web/api/webvtt_api/index.md +++ b/files/en-us/web/api/webvtt_api/index.md @@ -282,7 +282,7 @@ video::cue { } ``` -Then we style each of the tags above with a different colour. +Then we style each of the tags above with a different color. ```css video::cue(u) { @@ -298,7 +298,7 @@ video::cue(i) { } video::cue(c) { - color: lightpurple; + color: lavender; } ``` diff --git a/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md b/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md index ebe9dd9e8e6db9b..515f9ad0b9ede3b 100644 --- a/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md +++ b/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md @@ -378,7 +378,7 @@ Text marked up with these tags can be formatted in [`STYLE` blocks](#style_block - : Used to highlight text that has been marked up as belonging to a particular language or language variant using the format defined in {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}}. ```xml - Engish text as spoken in Great Britain! + English text as spoken in Great Britain! ``` ## NOTE blocks @@ -619,13 +619,13 @@ Note that escape sequences are used in WebVTT CSS in the same way as HTML pages. WEBVTT STYLE -::cue(#crédit\ de\ transcription) { +::cue(#transcription\ credits) { color: red; } -crédit de transcription +transcription credits 00:04.000 --> 00:05.000 -Transcrit par Célestes™ +Transcribed by Célestes™ ``` ## Specifications diff --git a/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md b/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md index c8ccea85abd1abe..5ba1c6f06d462ed 100644 --- a/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md +++ b/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md @@ -277,7 +277,7 @@ After storing the newly-created {{domxref("XRSession")}} object into `xrSession` Then we get a reference to the {{HTMLElement("canvas")}} found in our HTML—as well as its WebGL rendering context—which will be used as the drawing surface for the scene. The `xrCompatible` property is requested when calling {{domxref("HTMLCanvasElement.getContext", "getContext()")}} on the element to gain access to the WebGL rendering context for the canvas. This ensures that the context is configured for use as a source for WebXR rendering. -Next, we add event handlers for the {{domxref("Element.mousemove_event", "mousemove")}} and {{domxref("Element.contextmenu_event","contextmenu")}}, but only if the `allowMouseRotation` constant is `true`. The `mousemove` handler will deal with the pitching and yawing of the view based upon the movement of the mouse. Since the "mouselook" feature functions only while the right mouse button is held down, and clicking using the right mouse button triggers the context menu, we add a handler for the `contextmenu` event to the canvas to prevent the context menu from appearing when the user initially begins their drag of the mouse. +Next, we add event handlers for the {{domxref("Element.mousemove_event", "mousemove")}} and {{domxref("Element.contextmenu_event","contextmenu")}}, but only if the `allowMouseRotation` constant is `true`. The `mousemove` handler will deal with the pitching and yawing of the view based upon the movement of the mouse. Since the "" feature functions only while the right mouse button is held down, and clicking using the right mouse button triggers the context menu, we add a handler for the `contextmenu` event to the canvas to prevent the context menu from appearing when the user initially begins their drag of the mouse. Next, we compile the shader programs; get references to its variables; initialize the buffers that store the array of each position; the indexes into the position table for each vertex; the vertex normals; and the texture coordinates for each vertex. This is all taken directly from the WebGL sample code, so refer to [Lighting in WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL) and its preceding articles [Creating 3D objects using WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL) and [Using textures in WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). Then our `loadTexture()` function is called to load the texture file. diff --git a/files/en-us/web/api/webxr_device_api/rendering/index.md b/files/en-us/web/api/webxr_device_api/rendering/index.md index f055004375b03ef..cfe891ff6d95668 100644 --- a/files/en-us/web/api/webxr_device_api/rendering/index.md +++ b/files/en-us/web/api/webxr_device_api/rendering/index.md @@ -201,7 +201,7 @@ We then get the {{domxref("XRViewerPose")}} object that describes the viewer's p With the viewer's pose in hand, we can then begin to render the frame. The first step is to obtain access to the framebuffer into which the WebXR device wants the frame drawn; this is done by getting the target WebGL layer from the session's {{domxref("XRSession.renderState", "renderState")}} object's {{domxref("XRRenderState.baseLayer", "baseLayer")}} property, then getting the {{domxref("XRWebGLLayer.framebuffer", "framebuffer")}} from that {{domxref("XRWebGLLayer")}} object. We then call [`gl.bindFrameBuffer()`](/en-US/docs/Web/API/WebGLRenderingContext/bindFramebuffer) to bind that framebuffer as the target for all upcoming drawing commands. -The next step is to erase the framebuffer. While you can in theory skip this step—_if and only if your rendering code is guaranteed to write every single pixel in the framebuffer_—it's generally safest to just go ahead and clear it before you begin to draw, unless you need to eke out every ounce of performance you can and know you're touching all the pixels anyway. The background color is set to fully opaque black using [`gl.clearColor()`](/en-US/docs/Web/API/WebGLRenderingContext/clearColor); the clear depth is set to 1.0 by calling [`gl.cleardepth()`](/en-US/docs/Web/API/WebGLRenderingContext/clearDepth), in order to clear all pixels regardless of how far away the object they're part of is; and finally, the frame's pixel and depth buffers are both erased by calling [`gl.clear()`](/en-US/docs/Web/API/WebGLRenderingContext/clear), passing in a bit mask in which both `COLOR_BUFFER_BIT` and `DEPTH_BUFFER_BIT` are set. +The next step is to erase the framebuffer. While you can in theory skip this step—_if and only if your rendering code is guaranteed to write every single pixel in the framebuffer_—it's generally safest to just go ahead and clear it before you begin to draw, unless you need to eke out every ounce of performance you can and know you're touching all the pixels anyway. The background color is set to fully opaque black using [`gl.clearColor()`](/en-US/docs/Web/API/WebGLRenderingContext/clearColor); the clear depth is set to 1.0 by calling [`gl.clearDepth()`](/en-US/docs/Web/API/WebGLRenderingContext/clearDepth), in order to clear all pixels regardless of how far away the object they're part of is; and finally, the frame's pixel and depth buffers are both erased by calling [`gl.clear()`](/en-US/docs/Web/API/WebGLRenderingContext/clear), passing in a bit mask in which both `COLOR_BUFFER_BIT` and `DEPTH_BUFFER_BIT` are set. Since WebXR uses a single framebuffer for every view, with viewports upon the view being used to separate each eye's viewpoint within the framebuffer, we only need to clear a single framebuffer rather than cleaning it for each eye (or other viewpoints, if any) individually. diff --git a/files/en-us/web/api/webxr_device_api/startup_and_shutdown/index.md b/files/en-us/web/api/webxr_device_api/startup_and_shutdown/index.md index cba75fa162396ae..07b73e0c979c526 100644 --- a/files/en-us/web/api/webxr_device_api/startup_and_shutdown/index.md +++ b/files/en-us/web/api/webxr_device_api/startup_and_shutdown/index.md @@ -210,7 +210,7 @@ async function runSession(session) { // Set up WebGL data and such - const worldData = loadGLPrograms(session, "worlddata.xml"); + const worldData = loadGLPrograms(session, "world-data.xml"); if (!worldData) { return null; } diff --git a/files/en-us/web/api/window/close/index.md b/files/en-us/web/api/window/close/index.md index 2a50df62f270db2..05f643641ec8c52 100644 --- a/files/en-us/web/api/window/close/index.md +++ b/files/en-us/web/api/window/close/index.md @@ -47,7 +47,7 @@ opened by calling {{domxref("window.open()")}}. let openedWindow; function openWindow() { - openedWindow = window.open("moreinfo.htm"); + openedWindow = window.open("more-info.htm"); } function closeOpenedWindow() { diff --git a/files/en-us/web/api/window/fetch/index.md b/files/en-us/web/api/window/fetch/index.md index 84ca194d7240db3..aff6f77e2ba8e98 100644 --- a/files/en-us/web/api/window/fetch/index.md +++ b/files/en-us/web/api/window/fetch/index.md @@ -70,6 +70,7 @@ A {{jsxref("Promise")}} that resolves to a {{domxref("Response")}} object. Invalid header name. + 
 // space in "C ontent-Type"
 const headers = {
diff --git a/files/en-us/web/api/window/frames/index.md b/files/en-us/web/api/window/frames/index.md
index 8060911a81e8a26..9170909fe5c0f82 100644
--- a/files/en-us/web/api/window/frames/index.md
+++ b/files/en-us/web/api/window/frames/index.md
@@ -17,7 +17,7 @@ A list of frame objects. It is similar to an
 array in that it has a `length` property and its items can be accessed
 using the `[i]` notation.
 
-- `frameList === window` evaluates to true.
+- `frames === window` evaluates to true.
 - Each item in the `window.frames` pseudo-array represents the {{domxref("Window")}}
   object corresponding to the given {{HTMLElement("frame")}}'s or
   {{HTMLElement("iframe")}}'s content, not the `frame` or `iframe` DOM element (i.e.,
diff --git a/files/en-us/web/api/workernavigator/hardwareconcurrency/index.md b/files/en-us/web/api/workernavigator/hardwareconcurrency/index.md
index e3bf6c9a963460f..48d0dc416a46c0a 100644
--- a/files/en-us/web/api/workernavigator/hardwareconcurrency/index.md
+++ b/files/en-us/web/api/workernavigator/hardwareconcurrency/index.md
@@ -42,7 +42,7 @@ let workerList = [];
 
 for (let i = 0; i < navigator.hardwareConcurrency; i++) {
   let newWorker = {
-    worker: new Worker("cpuworker.js"),
+    worker: new Worker("cpu-worker.js"),
     inUse: false,
   };
   workerList.push(newWorker);
diff --git a/files/en-us/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md b/files/en-us/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
index 84936689e4a18b9..94f5c00231e926d 100644
--- a/files/en-us/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
+++ b/files/en-us/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
@@ -62,11 +62,11 @@ function loadBinaryResource(url) {
 The magic happens in the `overrideMimeType` function, which forces the browser to treat it as plain text, using a user-defined character set. This tells the browser not to parse it, and to let the bytes pass through unprocessed.
 
 ```js
-const filestream = loadBinaryResource(url);
-const abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
+const fileStream = loadBinaryResource(url);
+const lowestByte = fileStream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
 ```
 
-The example above fetches the byte at offset `x` within the loaded binary data. The valid range for `x` is from 0 to `filestream.length-1`.
+The example above fetches the byte at offset `x` within the loaded binary data. The valid range for `x` is from 0 to `fileStream.length-1`.
 
 See [downloading binary streams with XMLHttpRequest](https://web.archive.org/web/20071103070418/http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html) for a detailed explanation.
 
diff --git a/files/en-us/web/api/xmlhttprequest_api/using_formdata_objects/index.md b/files/en-us/web/api/xmlhttprequest_api/using_formdata_objects/index.md
index f84078f2c09e71c..d099ddb4bde09b5 100644
--- a/files/en-us/web/api/xmlhttprequest_api/using_formdata_objects/index.md
+++ b/files/en-us/web/api/xmlhttprequest_api/using_formdata_objects/index.md
@@ -18,7 +18,7 @@ const send = document.querySelector("#send");
 send.addEventListener("click", async () => {
   const formData = new FormData();
   formData.append("username", "Groucho");
-  formData.append("accountnum", 123456);
+  formData.append("accountNum", 123456);
 
   // A file  element
   const avatar = document.querySelector("#avatar");
@@ -27,7 +27,7 @@ send.addEventListener("click", async () => {
   // JavaScript file-like object
   const content = 'hey!';
   const blob = new Blob([content], { type: "text/xml" });
-  formData.append("webmasterfile", blob);
+  formData.append("webmasterFile", blob);
 
   const response = await fetch("http://example.org/post", {
     method: "POST",
@@ -38,9 +38,9 @@ send.addEventListener("click", async () => {
 ```
 
 > [!NOTE]
-> The fields `"avatar"` and `"webmasterfile"` both contain a file. The number assigned to the field `"accountnum"` is immediately converted into a string by the [`FormData.append()`](/en-US/docs/Web/API/FormData/append) method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string. If the value is neither a `Blob` nor a `File`, the value is converted to a string).
+> The fields `"avatar"` and `"webmasterFile"` both contain a file. The number assigned to the field `"accountNum"` is immediately converted into a string by the [`FormData.append()`](/en-US/docs/Web/API/FormData/append) method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string. If the value is neither a `Blob` nor a `File`, the value is converted to a string).
 
-This example builds a `FormData` instance containing values for fields named `"username"`, `"accountnum"`, `"avatar"` and `"webmasterfile"`, then uses {{domxref("Window/fetch", "fetch()")}} to send the form's data. The field `"webmasterfile"` is a {{domxref("Blob")}}. A `Blob` object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{ domxref("File") }} interface is based on `Blob`, inheriting blob functionality and expanding it to support files on the user's system. In order to build a `Blob` you can invoke [the `Blob()` constructor](/en-US/docs/Web/API/Blob/Blob).
+This example builds a `FormData` instance containing values for fields named `"username"`, `"accountNum"`, `"avatar"` and `"webmasterFile"`, then uses {{domxref("Window/fetch", "fetch()")}} to send the form's data. The field `"webmasterFile"` is a {{domxref("Blob")}}. A `Blob` object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{ domxref("File") }} interface is based on `Blob`, inheriting blob functionality and expanding it to support files on the user's system. In order to build a `Blob` you can invoke [the `Blob()` constructor](/en-US/docs/Web/API/Blob/Blob).
 
 ## Retrieving a `FormData` object from an HTML form
 
@@ -112,7 +112,7 @@ You can also send files using `FormData`. Include an {{ HTMLElement("input") }}
   

     
   

   

diff --git a/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
index 1755eac75ef8489..b5aa407f728a75d 100644
--- a/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
+++ b/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
@@ -187,7 +187,7 @@ function getHeaderTime() {
 const req = new XMLHttpRequest();
 req.open(
   "HEAD", // use HEAD when you only need the headers
-  "yourpage.html",
+  "your-page.html",
 );
 req.onload = getHeaderTime;
 req.send();
@@ -223,8 +223,8 @@ function ifHasChanged(URL, callback) {
 And to test:
 
 ```js
-// Let's test the file "yourpage.html"
-ifHasChanged("yourpage.html", function (modified, visit) {
+// Let's test the file "your-page.html"
+ifHasChanged("your-page.html", function (modified, visit) {
   console.log(
     `The page '${this.filepath}' has been changed on ${new Date(
       nModified,
diff --git a/files/en-us/web/api/xrsessionevent/index.md b/files/en-us/web/api/xrsessionevent/index.md
index b1f80c7f6d3b978..413634db777a2a2 100644
--- a/files/en-us/web/api/xrsessionevent/index.md
+++ b/files/en-us/web/api/xrsessionevent/index.md
@@ -41,8 +41,8 @@ _The following events are represented using the `XRSessionEvent` interface, and
 This example creates a listener that watches for the visibility state of the session to change. It reacts by calling a function `mySessionVisible()` with a Boolean indicating whether or not the session is visible; this function might, for instance, spin up or reconfigure a worker that handles rendering the scene.
 
 ```js
-xrSession.addEventListener("visibilitystate", (e) => {
-  switch (e.session.visibilitystate) {
+xrSession.addEventListener("visibilitychange", (e) => {
+  switch (e.session.visibilityState) {
     case "visible":
     case "visible-blurred":
       mySessionVisible(true);
diff --git a/files/en-us/web/api/xrwebgllayer/framebuffer/index.md b/files/en-us/web/api/xrwebgllayer/framebuffer/index.md
index 1eb1b59c7fa0f60..a97411907633722 100644
--- a/files/en-us/web/api/xrwebgllayer/framebuffer/index.md
+++ b/files/en-us/web/api/xrwebgllayer/framebuffer/index.md
@@ -75,7 +75,7 @@ This example gets the `XRWebGLLayer` for a session and then passes its
 framebuffer into the WebGL context's {{domxref("WebGLRenderingContext.bindFramebuffer", "bindFramebuffer()")}} function.
 
 ```js
-let glLayer = xrSession.renderState.baselayer;
+let glLayer = xrSession.renderState.baseLayer;
 gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
 ```
 
diff --git a/files/en-us/web/api/xrwebgllayer/index.md b/files/en-us/web/api/xrwebgllayer/index.md
index 8022f9a5465375c..9d89983527bf6fb 100644
--- a/files/en-us/web/api/xrwebgllayer/index.md
+++ b/files/en-us/web/api/xrwebgllayer/index.md
@@ -67,7 +67,7 @@ let pose = xrFrame.getViewerPose(xrReferenceSpace);
 
 if (pose) {
   const glLayer = xrSession.renderState.baseLayer;
-  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.Framebffer);
+  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
 
   for (const view of pose.views) {
     const viewport = glLayer.getViewport(view);
diff --git a/files/en-us/web/api/xsltprocessor/index.md b/files/en-us/web/api/xsltprocessor/index.md
index e86d245a9e251bc..d3a7ef6a42a33ff 100644
--- a/files/en-us/web/api/xsltprocessor/index.md
+++ b/files/en-us/web/api/xsltprocessor/index.md
@@ -220,7 +220,7 @@ init();
 
 ### Advanced example
 
-This advanced example sorts several divs based on their content. The example allows sorting the content multiple times, alternating between ascending and descending order. The JavaScript loads the .xsl file only on the first sort and sets the `xslloaded` variable to true once it has finished loading the file. Using the {{domxref("XSLTProcessor.getParameter()")}} method, the code can figure whether to sort in ascending or descending order. It defaults to ascending if the parameter is empty (the first time the sorting happens, as there is no value for it in the XSLT file). The sorting value is set using {{domxref("XSLTProcessor.setParameter()")}}.
+This advanced example sorts several divs based on their content. The example allows sorting the content multiple times, alternating between ascending and descending order. The JavaScript loads the .xsl file only on the first sort and sets the `xslLoaded` variable to true once it has finished loading the file. Using the {{domxref("XSLTProcessor.getParameter()")}} method, the code can figure whether to sort in ascending or descending order. It defaults to ascending if the parameter is empty (the first time the sorting happens, as there is no value for it in the XSLT file). The sorting value is set using {{domxref("XSLTProcessor.setParameter()")}}.
 
 The XSLT file has a parameter called `myOrder` that JavaScript sets to change the sorting method. The `xsl:sort` element's order attribute can access the value of the parameter using `$myOrder`. However, the value needs to be an XPATH expression and not a string, so `{$myOrder}` is used. Using {} evaluates the content as an XPath expression.
 
@@ -247,7 +247,7 @@ Once the transformation is complete, the result is appended to the document, as
 
 ```js
 let xslRef;
-let xslloaded = false;
+let xslLoaded = false;
 const parser = new DOMParser();
 const xsltProcessor = new XSLTProcessor();
 let myDOM;
@@ -255,12 +255,12 @@ let myDOM;
 let xmlRef = document.implementation.createDocument("", "", null);
 
 async function sort() {
-  if (!xslloaded) {
+  if (!xslLoaded) {
     const response = await fetch("example2.xsl");
     const xslText = await response.text();
     xslRef = parser.parseFromString(xslText, "application/xml");
     xsltProcessor.importStylesheet(xslRef);
-    xslloaded = true;
+    xslLoaded = true;
   }
 
   // Create a new XML document in memory
diff --git a/files/en-us/web/html/element/audio/index.md b/files/en-us/web/html/element/audio/index.md
index 8317bcb483fcc08..2c2fc71cd144150 100644
--- a/files/en-us/web/html/element/audio/index.md
+++ b/files/en-us/web/html/element/audio/index.md
@@ -253,13 +253,30 @@ Browsers don't all support the same [file types](/en-US/docs/Web/Media/Formats/C
 
 ```
 
+The audio source can be set to any valid [URL](/en-US/docs/Web/URI), including HTTP(S) URLs and [Data URLs](/en-US/docs/Web/URI/Schemes/data). When using HTTP(S) URLs, be aware that the browser's caching behavior will affect how often the file is requested from the server. Data URLs embed the audio data directly in the HTML, which can be useful for small audio files but isn't recommended for larger files as it increases the HTML file size.
+
+You can also use the [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) to directly generate and manipulate audio streams from JavaScript code rather than streaming pre-existing audio files. You can set the [`srcObject`](/en-US/docs/Web/API/HTMLMediaElement/srcObject) in JavaScript to a {{jsxref("MediaStream")}} object. This is commonly used for live audio streams or real-time audio processing.
+
+```js
+const audioElement = document.querySelector("audio");
+navigator.mediaDevices
+  .getUserMedia({ audio: true })
+  .then((stream) => {
+    audioElement.srcObject = stream;
+  })
+  .catch((error) => {
+    console.error("Error accessing the microphone", error);
+  });
+```
+
+Note that `MediaStream` sources have limitations: they are not seekable and only support a limited set of codecs.
+
 We offer a substantive and thorough [guide to media file types](/en-US/docs/Web/Media/Formats) and the [audio codecs that can be used within them](/en-US/docs/Web/Media/Formats/Audio_codecs). Also available is [a guide to the codecs supported for video](/en-US/docs/Web/Media/Formats/Video_codecs).
 
 Other usage notes:
 
 - If you don't specify the `controls` attribute, the audio player won't include the browser's default controls. You can, however, create your own custom controls using JavaScript and the {{domxref("HTMLMediaElement")}} API.
 - To allow precise control over your audio content, `HTMLMediaElement`s fire many different [events](/en-US/docs/Web/API/HTMLMediaElement#events). This also provides a way to monitor the audio's fetching process so you can watch for errors or detect when enough is available to begin to play or manipulate it.
-- You can also use the [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) to directly generate and manipulate audio streams from JavaScript code rather than streaming pre-existing audio files.
 - `
Hello world
 
+    `;
+}
+
+app.get("/", (req, res) => {
+  const nonce = crypto.randomUUID();
+  res.setHeader("Content-Security-Policy", `script-src 'nonce-${nonce}'`);
+  res.send(content(nonce));
+});
+```
+
+On every request, the server generates a new nonce, inserts it into the CSP and into the {{htmlelement("script")}} tags in the returned document. Note that the server:
+
+- generates a new nonce for every request
+- can use nonces with both external and inline scripts
+- uses the same nonce for all `
+  
+    
Hello world
 
+    `;
+
+app.get("/", (req, res) => {
+  res.setHeader("Content-Security-Policy", csp);
+  res.send(content);
+});
+```
+
+Note that:
+
+- We have a separate hash for every script in the document.
+- For the external script "main.js", we also include the `integrity` attribute, and give it the same value.
+- Unlike the example using nonces, both the CSP and the content can be static, because the hashes stay the same. This makes hash-based policies more suitable for static pages or websites that rely on client-side rendering.
+
+#### Scheme-based policies
+
+Fetch directives can list a scheme, like `https:`, to allow resources that are served using that scheme. This, for example, allows a policy to require HTTPS for all resource loads:
 
 ```http
-Content-Security-Policy: default-src 'self'
+Content-Security-Policy: default-src https:
 ```
 
-### Example 2
+#### Location-based policies
+
+Fetch directives can control resource loads based on where the resource is located.
 
-A website administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the CSP is set on.)
+The keyword `'self'` allows resources which are same-origin with the document itself:
 
 ```http
-Content-Security-Policy: default-src 'self' example.com *.example.com
+Content-Security-Policy: img-src 'self'
 ```
 
-### Example 3
+You can also specify one or more hostnames, potentially including wildcards, and only resources served from those hosts will be allowed. This might be used, for example, to allow content to be served from a trusted CDN.
+
+```http
+Content-Security-Policy: img-src *.example.org
+```
 
-A website administrator wants to allow users of a web application to include images from any origin in their own content,
-but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code.
+You can specify multiple locations. The following directive allows only images that are same-origin with the current document, or are served from a subdomain of "example.org", or are served from "example.com":
 
 ```http
-Content-Security-Policy: default-src 'self'; img-src *; media-src example.org example.net; script-src userscript.example.com
+Content-Security-Policy: img-src 'self' *.example.org  example.com
 ```
 
-Here, by default, content is only permitted from the document's origin, with the following exceptions:
+#### Inline JavaScript
 
-- Images may load from anywhere (note the "\*" wildcard).
-- Media is only allowed from example.org and example.net (and not from subdomains of those sites).
-- Executable script is only allowed from userscript.example.com.
+If a CSP contains either a `default-src` or a `script-src` directive, then inline JavaScript will not be allowed to execute unless extra measures are taken to enable it. This includes:
 
-### Example 4
+- JavaScript included inside a `
+  ```
+
+- JavaScript in an inline event handler attribute:
+
+  ```html
+  
+  ```
+
+- JavaScript in a `javascript:` URL:
+
+  ```html
+  
+  ```
+
+The `unsafe-inline` keyword can be used to override this restriction. For example, the following directive requires all resources to be same-origin, but allows inline JavaScript:
+
+```http example-bad
+Content-Security-Policy: default-src 'self' 'unsafe-inline'
+```
+
+> [!WARNING]
+> Developers should avoid `'unsafe-inline'`, because it defeats much of the purpose of having a CSP. Inline JavaScript is one of the most common XSS vectors, and one of the most basic goals of a CSP is to prevent its uncontrolled use.
 
-A website administrator for an online banking site wants to ensure that all its content is loaded using TLS, in order to prevent attackers from eavesdropping on requests.
+Inline `
+  
+  
+    
Example page!

+  
+
+```
+
+It includes a script "main.js", which creates and adds another script, "main2.js":
+
+```js
+console.log("hello");
+
+const scriptElement = document.createElement("script");
+scriptElement.src = `main2.js`;
+
+document.head.appendChild(scriptElement);
+```
+
+We serve our document with a CSP like this:
+
+```http
+Content-Security-Policy:
+  script-src 'sha256-gEh1+8U9S1vkEuQSmmUMTZjyNSu5tIoECP4UXIEjMTk='
+```
+
+The "main.js" script will be allowed to load, because its hash matches the value in the CSP. But its attempt to load "main2.js" will fail.
+
+If we add `'strict-dynamic'` to the CSP, then "main.js" will be allowed to load "main2.js":
 
 ```http
-Content-Security-Policy: default-src https://onlinebanking.example.com
+Content-Security-Policy:
+  script-src 'sha256-gEh1+8U9S1vkEuQSmmUMTZjyNSu5tIoECP4UXIEjMTk='
+  strict-dynamic
+```
+
+The `'strict-dynamic'` keyword makes it much easier to create and maintain nonce- or hash-based CSPs, especially when a website uses third-party scripts. It does make your CSP less secure, though, because if the scripts you include create `
+```
+
+## Clickjacking protection
+
+The [`frame-ancestors`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive can be used to control which documents, if any, are allowed to embed this document in a nested browsing context such as an {{htmlelement("iframe")}}. This is an effective protection against clickjacking attacks, because these attacks depend on embedding the target site in a site controlled by the attacker.
+
+The syntax of `frame-ancestors` is a subset of the fetch directive syntax: you can provide the single keyword value `'none'` or one or more source expressions. However, the only source expressions you can use are schemes, hostnames, or the `'self'` keyword value.
+
+Unless you need your site to be embeddable, you should set `frame-ancestors` to `'none'`:
+
+```http
+Content-Security-Policy: frame-ancestors 'none'
+```
+
+This directive is a more flexible replacement for the {{httpheader("X-Frame-Options")}} header.
+
+## Upgrading insecure requests
+
+Web developers are strongly encouraged to serve all their content over HTTPS. In the process of upgrading a site to HTTPS, a site sometimes serves the main document over HTTPS but serves its resources over HTTP, for example, using markup like this:
+
+```html
+
 ```
 
-The server permits access only to documents being loaded specifically over HTTPS through the single origin onlinebanking.example.com.
+This is called _mixed content_, and the presence of insecure resources greatly weakens the protection afforded by HTTPS. Under the [mixed content algorithm](/en-US/docs/Web/Security/Mixed_content) that browsers implement, if a document is served over HTTPS, insecure resources are categorized into "upgradable content" and "blockable content". Upgradable content is upgraded to HTTPS, and blockable content is blocked, potentially breaking the page.
 
-### Example 5
+The ultimate solution to mixed content is for developers to load all resources over HTTPS. However, even if a site is actually able to serve all content over HTTPS, it can still be very difficult (or even effectively impossible, where archived content is concerned) for a developer to rewrite all the URLs the site uses to load resources.
 
-A website administrator of a web mail site wants to allow HTML in email, as well as images loaded from anywhere, but JavaScript or other potentially dangerous content can only come from the same origin as the mail server.
+The [`upgrade-insecure-requests`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests) directive is intended to solve this problem. This directive doesn't have any value: to set it, just include the directive name:
 
 ```http
-Content-Security-Policy: default-src 'self' *.example.com; img-src *
+Content-Security-Policy: upgrade-insecure-requests
 ```
 
-Note that this example doesn't specify a {{CSP("script-src")}}, so the {{CSP("default-src")}} directive will be used for JavaScript sources as a fallback.
+If this directive is set on a document, then the browser will automatically upgrade to HTTPS any HTTP URLs in the following cases:
+
+- requests to load resources (such as images, scripts, or fonts)
+- navigation requests (such as link targets) which are same-origin with the document
+- navigation requests in nested browsing contexts, such as iframes
+- form submissions
+
+However, top-level navigation requests whose target is a different origin will not be upgraded.
+
+For example, suppose the document at `https://example.org` is served with a CSP containing the `upgrade-insecure-requests` directive, and the document contains markup like this:
+
+```html
+
+
+```
+
+The browser will automatically upgrade both of these requests to HTTPS.
+
+Suppose the document also contains this:
+
+```html
+See some more cats!
+More cats, on another site!
+```
+
+The browser will upgrade the first link to HTTPS, but not the second, as it is navigating to a different origin.
+
+This directive is not a substitute for the {{httpheader("Strict-Transport-Security")}} header (also known as HSTS), because it does not upgrade external links to a site. Sites should include this directive and the `Strict-Transport-Security` header.
 
 ## Testing your policy
 
 To ease deployment, CSP can be deployed in report-only mode.
-The policy is not enforced, but any violations are reported to a provided URI.
-Additionally, a report-only header can be used to test a future revision to a policy without actually deploying it.
+The policy is not enforced, but any violations are sent to the reporting endpoint specified in the policy. Additionally, a report-only header can be used to test a future revision to a policy without actually deploying it.
 
 You can use the {{HTTPHeader("Content-Security-Policy-Report-Only")}} HTTP header to specify your policy, like this:
 
@@ -145,7 +514,9 @@ Content-Security-Policy-Report-Only: policy
 If both a {{HTTPHeader("Content-Security-Policy-Report-Only")}} header and a {{HTTPHeader("Content-Security-Policy")}} header are present in the same response, both policies are honored.
 The policy specified in `Content-Security-Policy` headers is enforced while the `Content-Security-Policy-Report-Only` policy generates reports but is not enforced.
 
-## Violation reporting
+Note that unlike a normal content security policy, a report-only policy cannot be delivered in a `` element.
+
+### Violation reporting
 
 The recommended method for reporting CSP violations is to use the [Reporting API](/en-US/docs/Web/API/Reporting_API), declaring endpoints in {{HTTPHeader("Reporting-Endpoints")}} and specifying one of them as the CSP reporting target using the `Content-Security-Policy` header's {{CSP("report-to")}} directive.
 
@@ -208,24 +579,9 @@ A typical object might look like this:
 You need to set up a server to receive reports with the given JSON format and content type.
 The server handling these requests can then store or process the incoming reports in a way that best suits your needs.
 
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-### Compatibility notes
-
-A specific incompatibility exists in some versions of the Safari web browser, whereby if a Content Security Policy header is set, but not a Same Origin header,
-the browser will block self-hosted content and off-site content, and incorrectly report that this is due to the Content Security Policy not allowing the content.
-
 ## See also
 
-- {{HTTPHeader("Content-Security-Policy")}} HTTP Header
-- {{HTTPHeader("Content-Security-Policy-Report-Only")}} HTTP Header
-- [Content Security in WebExtensions](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy)
-- [CSP in Web Workers](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#csp_in_workers)
-- [Privacy, permissions, and information security](/en-US/docs/Web/Privacy)
-- [CSP Evaluator](https://github.com/google/csp-evaluator) - Evaluate your Content Security Policy
+- [Mitigate cross-site scripting with a strict Content Security Policy](https://web.dev/strict-csp) on web.dev (2024)
+- [Content Security Policy: A successful mess between hardening and mitigation](https://infocondb.org/con/locomocosec/locomocosec-2019/content-security-policy-a-successful-mess-between-hardening-and-mitigation)
+- [Content Security Policy Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html) on owasp.org
+- [CSP Evaluator](https://csp-evaluator.withgoogle.com/)
diff --git a/files/en-us/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/en-us/web/javascript/enumerability_and_ownership_of_properties/index.md
index 1928d92a2805f45..737f990dd41708f 100644
--- a/files/en-us/web/javascript/enumerability_and_ownership_of_properties/index.md
+++ b/files/en-us/web/javascript/enumerability_and_ownership_of_properties/index.md
@@ -55,14 +55,14 @@ Note that this is not the most efficient algorithm for all cases, but useful for
 
 ```js
 const SimplePropertyRetriever = {
-  getOwnEnumerables(obj) {
+  getOwnEnumProps(obj) {
     return this._getPropertyNames(obj, true, false, this._enumerable);
     // Or could use for...in filtered with Object.hasOwn or just this: return Object.keys(obj);
   },
-  getOwnNonenumerables(obj) {
+  getOwnNonEnumProps(obj) {
     return this._getPropertyNames(obj, true, false, this._notEnumerable);
   },
-  getOwnEnumerablesAndNonenumerables(obj) {
+  getOwnProps(obj) {
     return this._getPropertyNames(
       obj,
       true,
@@ -71,13 +71,13 @@ const SimplePropertyRetriever = {
     );
     // Or just use: return Object.getOwnPropertyNames(obj);
   },
-  getPrototypeEnumerables(obj) {
+  getPrototypeEnumProps(obj) {
     return this._getPropertyNames(obj, false, true, this._enumerable);
   },
-  getPrototypeNonenumerables(obj) {
+  getPrototypeNonEnumProps(obj) {
     return this._getPropertyNames(obj, false, true, this._notEnumerable);
   },
-  getPrototypeEnumerablesAndNonenumerables(obj) {
+  getPrototypeProps(obj) {
     return this._getPropertyNames(
       obj,
       false,
@@ -85,14 +85,14 @@ const SimplePropertyRetriever = {
       this._enumerableAndNotEnumerable,
     );
   },
-  getOwnAndPrototypeEnumerables(obj) {
+  getOwnAndPrototypeEnumProps(obj) {
     return this._getPropertyNames(obj, true, true, this._enumerable);
     // Or could use unfiltered for...in
   },
-  getOwnAndPrototypeNonenumerables(obj) {
+  getOwnAndPrototypeNonEnumProps(obj) {
     return this._getPropertyNames(obj, true, true, this._notEnumerable);
   },
-  getOwnAndPrototypeEnumerablesAndNonenumerables(obj) {
+  getOwnAndPrototypeEnumAndNonEnumProps(obj) {
     return this._getPropertyNames(
       obj,
       true,
diff --git a/files/en-us/web/javascript/guide/expressions_and_operators/index.md b/files/en-us/web/javascript/guide/expressions_and_operators/index.md
index 2167bd6aad3ff79..d30eaf61df658da 100644
--- a/files/en-us/web/javascript/guide/expressions_and_operators/index.md
+++ b/files/en-us/web/javascript/guide/expressions_and_operators/index.md
@@ -831,8 +831,8 @@ The shorthand assignment operator `+=` can also be used to concatenate strings.
 For example,
 
 ```js
-let mystring = "alpha";
-mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.
+let myString = "alpha";
+myString += "bet"; // evaluates to "alphabet" and assigns this value to myString.
 ```
 
 ## Conditional (ternary) operator
@@ -1024,9 +1024,9 @@ const myString = new String("coral");
 "length" in myString; // returns true
 
 // Custom objects
-const mycar = { make: "Honda", model: "Accord", year: 1998 };
-"make" in mycar; // returns true
-"model" in mycar; // returns true
+const myCar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in myCar; // returns true
+"model" in myCar; // returns true
 ```
 
 ### instanceof
@@ -1070,8 +1070,8 @@ this.propertyName;
 Suppose a function called `validate` validates an object's `value` property, given the object and the high and low values:
 
 ```js
-function validate(obj, lowval, hival) {
-  if (obj.value < lowval || obj.value > hival) {
+function validate(obj, lowVal, highVal) {
+  if (obj.value < lowVal || obj.value > highVal) {
     console.log("Invalid Value!");
   }
 }
diff --git a/files/en-us/web/javascript/guide/functions/index.md b/files/en-us/web/javascript/guide/functions/index.md
index 31bc7fc153dfd8b..b7d4cccec97adc2 100644
--- a/files/en-us/web/javascript/guide/functions/index.md
+++ b/files/en-us/web/javascript/guide/functions/index.md
@@ -39,15 +39,15 @@ function myFunc(theObject) {
   theObject.make = "Toyota";
 }
 
-const mycar = {
+const myCar = {
   make: "Honda",
   model: "Accord",
   year: 1998,
 };
 
-console.log(mycar.make); // "Honda"
-myFunc(mycar);
-console.log(mycar.make); // "Toyota"
+console.log(myCar.make); // "Honda"
+myFunc(myCar);
+console.log(myCar.make); // "Toyota"
 ```
 
 When you pass an array as a parameter, if the function changes any of the array's values, that change is visible outside the function, as shown in the following example:
diff --git a/files/en-us/web/javascript/guide/loops_and_iteration/index.md b/files/en-us/web/javascript/guide/loops_and_iteration/index.md
index e561e0db2d7839c..c272dfc5827b5eb 100644
--- a/files/en-us/web/javascript/guide/loops_and_iteration/index.md
+++ b/files/en-us/web/javascript/guide/loops_and_iteration/index.md
@@ -331,30 +331,30 @@ If you comment out the `continue;`, the loop would run till the end and you woul
 
 ### Example 2
 
-A statement labeled `checkiandj` contains a statement labeled
-`checkj`. If `continue` is encountered, the program
-terminates the current iteration of `checkj` and begins the next
-iteration. Each time `continue` is encountered, `checkj`
+A statement labeled `checkIandJ` contains a statement labeled
+`checkJ`. If `continue` is encountered, the program
+terminates the current iteration of `checkJ` and begins the next
+iteration. Each time `continue` is encountered, `checkJ`
 reiterates until its condition returns `false`. When `false` is
-returned, the remainder of the `checkiandj` statement is completed,
-and `checkiandj` reiterates until its condition returns
+returned, the remainder of the `checkIandJ` statement is completed,
+and `checkIandJ` reiterates until its condition returns
 `false`. When `false` is returned, the program continues at the
-statement following `checkiandj`.
+statement following `checkIandJ`.
 
-If `continue` had a label of `checkiandj`, the program
-would continue at the top of the `checkiandj` statement.
+If `continue` had a label of `checkIandJ`, the program
+would continue at the top of the `checkIandJ` statement.
 
 ```js
 let i = 0;
 let j = 10;
-checkiandj: while (i < 4) {
+checkIandJ: while (i < 4) {
   console.log(i);
   i += 1;
-  checkj: while (j > 4) {
+  checkJ: while (j > 4) {
     console.log(j);
     j -= 1;
     if (j % 2 === 0) {
-      continue checkj;
+      continue checkJ;
     }
     console.log(j, "is odd.");
   }
diff --git a/files/en-us/web/javascript/guide/modules/index.md b/files/en-us/web/javascript/guide/modules/index.md
index 151bff173a11201..d287bf0bc1b71b1 100644
--- a/files/en-us/web/javascript/guide/modules/index.md
+++ b/files/en-us/web/javascript/guide/modules/index.md
@@ -312,18 +312,18 @@ The example below demonstrates this.
 ```json
 {
   "imports": {
-    "coolmodule": "/node_modules/coolmodule/index.js"
+    "cool-module": "/node_modules/cool-module/index.js"
   },
   "scopes": {
     "/node_modules/dependency/": {
-      "coolmodule": "/node_modules/some/other/location/coolmodule/index.js"
+      "cool-module": "/node_modules/some/other/location/cool-module/index.js"
     }
   }
 }
 ```
 
-With this mapping, if a script with an URL that contains `/node_modules/dependency/` imports `coolmodule`, the version in `/node_modules/some/other/location/coolmodule/index.js` will be used.
-The map in `imports` is used as a fallback if there is no matching scope in the scoped map, or the matching scopes don't contain a matching specifier. For example, if `coolmodule` is imported from a script with a non-matching scope path, then the module specifier map in `imports` will be used instead, mapping to the version in `/node_modules/coolmodule/index.js`.
+With this mapping, if a script with an URL that contains `/node_modules/dependency/` imports `cool-module`, the version in `/node_modules/some/other/location/cool-module/index.js` will be used.
+The map in `imports` is used as a fallback if there is no matching scope in the scoped map, or the matching scopes don't contain a matching specifier. For example, if `cool-module` is imported from a script with a non-matching scope path, then the module specifier map in `imports` will be used instead, mapping to the version in `/node_modules/cool-module/index.js`.
 
 Note that the path used to select a scope does not affect how the address is resolved.
 The value in the mapped path does not have to match the scopes path, and relative paths are still resolved to the base URL of the script that contains the import map.
@@ -405,7 +405,7 @@ You can only use `import` and `export` statements inside modules, not regular sc
 You should generally define all your modules in separate files. Modules declared inline in HTML can only import other modules, but anything they export will not be accessible by other modules (because they don't have a URL).
 
 > [!NOTE]
-> Modules and their dependencies can be preloaded by specifying them in [``](/en-US/docs/Web/HTML/Element/link) elements with [`rel="modulepreloaded"`](/en-US/docs/Web/HTML/Attributes/rel/modulepreload).
+> Modules and their dependencies can be preloaded by specifying them in [``](/en-US/docs/Web/HTML/Element/link) elements with [`rel="modulepreload"`](/en-US/docs/Web/HTML/Attributes/rel/modulepreload).
 > This can significantly reduce load time when the modules are used.
 
 ## Other differences between modules and classic scripts
diff --git a/files/en-us/web/javascript/guide/regular_expressions/assertions/index.md b/files/en-us/web/javascript/guide/regular_expressions/assertions/index.md
index b60a5a42ff3365e..f0f8df1b1ce6f09 100644
--- a/files/en-us/web/javascript/guide/regular_expressions/assertions/index.md
+++ b/files/en-us/web/javascript/guide/regular_expressions/assertions/index.md
@@ -189,6 +189,8 @@ Assertions include boundaries, which indicate the beginnings and endings of line
 
 ### General boundary-type overview example
 
+
+
 ```js
 // Using Regex boundaries to fix buggy string.
 buggyMultiline = `tey, ihe light-greon apple
diff --git a/files/en-us/web/javascript/guide/regular_expressions/cheatsheet/index.md b/files/en-us/web/javascript/guide/regular_expressions/cheatsheet/index.md
index 719f65cdc35c305..7b9817111a87af3 100644
--- a/files/en-us/web/javascript/guide/regular_expressions/cheatsheet/index.md
+++ b/files/en-us/web/javascript/guide/regular_expressions/cheatsheet/index.md
@@ -707,6 +707,7 @@ This page provides an overall cheat sheet of all the capabilities of `RegExp` sy
         x{n,m}
       
       
+        
         

           Where "n" and "m" are non-negative integers and m >= n,
           matches at least "n" and at most "m" occurrences of the preceding
diff --git a/files/en-us/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md b/files/en-us/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
index 00dfbd3feae0800..56061d32440640c 100644
--- a/files/en-us/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
+++ b/files/en-us/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
@@ -169,9 +169,9 @@ const personList = `First_Name: John, Last_Name: Doe
 First_Name: Jane, Last_Name: Smith`;
 
 const regexpNames =
-  /First_Name: (?\w+), Last_Name: (?\w+)/g;
+  /First_Name: (?\w+), Last_Name: (?\w+)/g;
 for (const match of personList.matchAll(regexpNames)) {
-  console.log(`Hello ${match.groups.firstname} ${match.groups.lastname}`);
+  console.log(`Hello ${match.groups.firstName} ${match.groups.lastName}`);
 }
 ```
 
diff --git a/files/en-us/web/javascript/guide/regular_expressions/quantifiers/index.md b/files/en-us/web/javascript/guide/regular_expressions/quantifiers/index.md
index d0c9d4182b322df..cecee4357826ffb 100644
--- a/files/en-us/web/javascript/guide/regular_expressions/quantifiers/index.md
+++ b/files/en-us/web/javascript/guide/regular_expressions/quantifiers/index.md
@@ -97,6 +97,7 @@ Quantifiers indicate numbers of characters or expressions to match.
         x{n,m}
       
       
+        
         

           Where "n" and "m" are non-negative integers and m >= n,
           matches at least "n" and at most "m" occurrences of the preceding
diff --git a/files/en-us/web/javascript/guide/working_with_objects/index.md b/files/en-us/web/javascript/guide/working_with_objects/index.md
index 39e8849ca9338f9..f5028f1a2b5df91 100644
--- a/files/en-us/web/javascript/guide/working_with_objects/index.md
+++ b/files/en-us/web/javascript/guide/working_with_objects/index.md
@@ -87,8 +87,8 @@ This statement creates `myCar` and assigns it the specified values for its prope
 You can create any number of `Car` objects by calls to `new`. For example,
 
 ```js
-const kenscar = new Car("Nissan", "300ZX", 1992);
-const vpgscar = new Car("Mazda", "Miata", 1990);
+const randCar = new Car("Nissan", "300ZX", 1992);
+const kenCar = new Car("Mazda", "Miata", 1990);
 ```
 
 An object can have a property that is itself another object. For example, suppose you define an object called `Person` as follows:
@@ -328,14 +328,14 @@ For more information, see [Enumerability and ownership of properties](/en-US/doc
 You can remove a non-inherited property using the [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete) operator. The following code shows how to remove a property.
 
 ```js
-// Creates a new object, myobj, with two properties, a and b.
-const myobj = new Object();
-myobj.a = 5;
-myobj.b = 12;
+// Creates a new object, myObj, with two properties, a and b.
+const myObj = new Object();
+myObj.a = 5;
+myObj.b = 12;
 
-// Removes the a property, leaving myobj with only the b property.
-delete myobj.a;
-console.log("a" in myobj); // false
+// Removes the a property, leaving myObj with only the b property.
+delete myObj.a;
+console.log("a" in myObj); // false
 ```
 
 ## Inheritance
@@ -489,23 +489,23 @@ In JavaScript, objects are a reference type. Two distinct objects are never equa
 ```js
 // Two variables, two distinct objects with the same properties
 const fruit = { name: "apple" };
-const fruitbear = { name: "apple" };
+const anotherFruit = { name: "apple" };
 
-fruit == fruitbear; // return false
-fruit === fruitbear; // return false
+fruit == anotherFruit; // return false
+fruit === anotherFruit; // return false
 ```
 
 ```js
 // Two variables, a single object
 const fruit = { name: "apple" };
-const fruitbear = fruit; // Assign fruit object reference to fruitbear
+const anotherFruit = fruit; // Assign fruit object reference to anotherFruit
 
-// Here fruit and fruitbear are pointing to same object
-fruit == fruitbear; // return true
-fruit === fruitbear; // return true
+// Here fruit and anotherFruit are pointing to same object
+fruit == anotherFruit; // return true
+fruit === anotherFruit; // return true
 
 fruit.name = "grape";
-console.log(fruitbear); // { name: "grape" }; not { name: "apple" }
+console.log(anotherFruit); // { name: "grape" }; not { name: "apple" }
 ```
 
 For more information about comparison operators, see [equality operators](/en-US/docs/Web/JavaScript/Reference/Operators#equality_operators).
diff --git a/files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.md
index 8277402c5bf62e6..092aeaa0f4baca5 100644
--- a/files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -463,7 +463,7 @@ const o = { a: 1 };
 // Object.prototype has null as its [[Prototype]].
 // o ---> Object.prototype ---> null
 
-const b = ["yo", "whadup", "?"];
+const b = ["yo", "sup", "?"];
 // Arrays inherit from Array.prototype
 // (which has methods indexOf, forEach, etc.)
 // The prototype chain looks like:
diff --git a/files/en-us/web/javascript/memory_management/index.md b/files/en-us/web/javascript/memory_management/index.md
index a06fe41732bbff6..764d5fc474f41db 100644
--- a/files/en-us/web/javascript/memory_management/index.md
+++ b/files/en-us/web/javascript/memory_management/index.md
@@ -26,7 +26,7 @@ In order to not bother the programmer with allocations, JavaScript will automati
 
 ```js
 const n = 123; // allocates memory for a number
-const s = "azerty"; // allocates memory for a string
+const s = "string"; // allocates memory for a string
 
 const o = {
   a: 1,
@@ -35,7 +35,7 @@ const o = {
 
 // (like object) allocates memory for the array and
 // contained values
-const a = [1, null, "abra"];
+const a = [1, null, "str2"];
 
 function f(a) {
   return a + 2;
@@ -64,14 +64,14 @@ const e = document.createElement("div"); // allocates a DOM element
 Some methods allocate new values or objects:
 
 ```js
-const s = "azerty";
+const s = "string";
 const s2 = s.substr(0, 3); // s2 is a new string
 // Since strings are immutable values,
 // JavaScript may decide to not allocate memory,
 // but just store the [0, 3] range.
 
-const a = ["ouais ouais", "nan nan"];
-const a2 = ["generation", "nan nan"];
+const a = ["yeah yeah", "no no"];
+const a2 = ["generation", "no no"];
 const a3 = a.concat(a2);
 // new array with 4 elements being
 // the concatenation of a and a2 elements.
diff --git a/files/en-us/web/javascript/reference/errors/is_not_iterable/index.md b/files/en-us/web/javascript/reference/errors/is_not_iterable/index.md
index 31fc901991aae63..ae6935e00ee9b4a 100644
--- a/files/en-us/web/javascript/reference/errors/is_not_iterable/index.md
+++ b/files/en-us/web/javascript/reference/errors/is_not_iterable/index.md
@@ -58,12 +58,12 @@ const [] = nonIterable1;
 ### Array destructuring a non-iterable
 
 ```js example-bad
-const myobj = { arrayOrObjProp1: {}, arrayOrObjProp2: [42] };
+const myObj = { arrayOrObjProp1: {}, arrayOrObjProp2: [42] };
 
 const {
   arrayOrObjProp1: [value1],
   arrayOrObjProp2: [value2],
-} = myobj; // TypeError: object is not iterable
+} = myObj; // TypeError: object is not iterable
 
 console.log(value1, value2);
 ```
diff --git a/files/en-us/web/javascript/reference/errors/not_a_constructor/index.md b/files/en-us/web/javascript/reference/errors/not_a_constructor/index.md
index a4e00121bed2e67..393b934899ec9d8 100644
--- a/files/en-us/web/javascript/reference/errors/not_a_constructor/index.md
+++ b/files/en-us/web/javascript/reference/errors/not_a_constructor/index.md
@@ -69,10 +69,10 @@ function Car(make, model, year) {
 }
 ```
 
-Now you can create an object called `mycar` as follows:
+Now you can create an object called `myCar` as follows:
 
 ```js
-const mycar = new Car("Eagle", "Talon TSi", 1993);
+const myCar = new Car("Eagle", "Talon TSi", 1993);
 ```
 
 ### In Promises
diff --git a/files/en-us/web/javascript/reference/global_objects/array/some/index.md b/files/en-us/web/javascript/reference/global_objects/array/some/index.md
index e16ec7876eeea21..a1774a6167596b7 100644
--- a/files/en-us/web/javascript/reference/global_objects/array/some/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/array/some/index.md
@@ -92,7 +92,7 @@ function checkAvailability(arr, val) {
   return arr.some((arrVal) => val === arrVal);
 }
 
-checkAvailability(fruits, "kela"); // false
+checkAvailability(fruits, "grapefruit"); // false
 checkAvailability(fruits, "banana"); // true
 ```
 
diff --git a/files/en-us/web/javascript/reference/global_objects/bigint/index.md b/files/en-us/web/javascript/reference/global_objects/bigint/index.md
index 4da82e27974d5e0..726a8345d7bbabd 100644
--- a/files/en-us/web/javascript/reference/global_objects/bigint/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/bigint/index.md
@@ -79,9 +79,9 @@ Special cases:
 const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER); // 9007199254740991n
 const maxPlusOne = previousMaxSafe + 1n; // 9007199254740992n
 const theFuture = previousMaxSafe + 2n; // 9007199254740993n, this works now!
-const multi = previousMaxSafe * 2n; // 18014398509481982n
-const subtr = multi - 10n; // 18014398509481972n
-const mod = multi % 10n; // 2n
+const prod = previousMaxSafe * 2n; // 18014398509481982n
+const diff = prod - 10n; // 18014398509481972n
+const mod = prod % 10n; // 2n
 const bigN = 2n ** 54n; // 18014398509481984n
 bigN * -1n; // -18014398509481984n
 const expected = 4n / 2n; // 2n
diff --git a/files/en-us/web/javascript/reference/global_objects/error/index.md b/files/en-us/web/javascript/reference/global_objects/error/index.md
index b7c0abfed6a9c07..38bf90230205a56 100644
--- a/files/en-us/web/javascript/reference/global_objects/error/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/error/index.md
@@ -48,7 +48,7 @@ Besides the generic `Error` constructor, there are other core error constructors
 - `Error.stackTraceLimit` {{non-standard_inline}}
   - : A non-standard V8 numerical property that limits how many stack frames to include in an error stacktrace.
 - `Error.prepareStackTrace()` {{non-standard_inline}} {{optional_inline}}
-  - : A non-standard V8 function that, if provided by usercode, is called by the V8 JavaScript engine for thrown exceptions, allowing the user to provide custom formatting for stacktraces.
+  - : A non-standard V8 function that, if provided by user code, is called by the V8 JavaScript engine for thrown exceptions, allowing the user to provide custom formatting for stacktraces.
 
 ## Instance properties
 
diff --git a/files/en-us/web/javascript/reference/global_objects/error/stack/index.md b/files/en-us/web/javascript/reference/global_objects/error/stack/index.md
index 337e6f681253277..e73f0e83abd82b4 100644
--- a/files/en-us/web/javascript/reference/global_objects/error/stack/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/error/stack/index.md
@@ -143,7 +143,7 @@ function a() {
   b(3, 4, "\n\n", undefined, {});
 }
 try {
-  a("first call, firstarg");
+  a("first call, first arg");
 } catch (e) {
   document.getElementById("output").textContent = e.stack;
 }
diff --git a/files/en-us/web/javascript/reference/global_objects/eval/index.md b/files/en-us/web/javascript/reference/global_objects/eval/index.md
index e4592f415b5633f..d05bc71853619fb 100644
--- a/files/en-us/web/javascript/reference/global_objects/eval/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/eval/index.md
@@ -76,8 +76,8 @@ eval("x + y");
 eval?.("x + y");
 
 // Indirect call using a variable to store and return eval
-const geval = eval;
-geval("x + y");
+const myEval = eval;
+myEval("x + y");
 
 // Indirect call through member access
 const obj = { eval };
diff --git a/files/en-us/web/javascript/reference/global_objects/finalizationregistry/register/index.md b/files/en-us/web/javascript/reference/global_objects/finalizationregistry/register/index.md
index 5bc260417bb9744..9925cf6afff09bb 100644
--- a/files/en-us/web/javascript/reference/global_objects/finalizationregistry/register/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/finalizationregistry/register/index.md
@@ -34,7 +34,7 @@ None ({{jsxref("undefined")}}).
 - {{jsxref("TypeError")}}
   - : Thrown in one of the following cases:
     - `target` is not an object or a [non-registered symbol](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#shared_symbols_in_the_global_symbol_registry) (object as opposed to primitives; functions are objects as well)
-    - `target` is the same as `heldvalue` (`target === heldValue`)
+    - `target` is the same as `heldValue` (`target === heldValue`)
     - `unregisterToken` is not an object or a [non-registered symbol](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#shared_symbols_in_the_global_symbol_registry)
 
 ## Description
diff --git a/files/en-us/web/javascript/reference/global_objects/function/apply/index.md b/files/en-us/web/javascript/reference/global_objects/function/apply/index.md
index 7a5de92d4108a8e..dc858e7b8b6287b 100644
--- a/files/en-us/web/javascript/reference/global_objects/function/apply/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/function/apply/index.md
@@ -124,11 +124,11 @@ function minOfArray(arr) {
   const QUANTUM = 32768;
 
   for (let i = 0; i < arr.length; i += QUANTUM) {
-    const submin = Math.min.apply(
+    const subMin = Math.min.apply(
       null,
       arr.slice(i, Math.min(i + QUANTUM, arr.length)),
     );
-    min = Math.min(submin, min);
+    min = Math.min(subMin, min);
   }
 
   return min;
diff --git a/files/en-us/web/javascript/reference/global_objects/map/index.md b/files/en-us/web/javascript/reference/global_objects/map/index.md
index b1e1e4a00bb7f05..8717fd196ccaa8c 100644
--- a/files/en-us/web/javascript/reference/global_objects/map/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/map/index.md
@@ -513,9 +513,9 @@ const second = new Map([
 ]);
 
 // Merge maps with an array. The last repeated key wins.
-const merged = new Map([...first, ...second, [1, "eins"]]);
+const merged = new Map([...first, ...second, [1, "un"]]);
 
-console.log(merged.get(1)); // eins
+console.log(merged.get(1)); // un
 console.log(merged.get(2)); // dos
 console.log(merged.get(3)); // three
 ```
diff --git a/files/en-us/web/javascript/reference/global_objects/object/defineproperty/index.md b/files/en-us/web/javascript/reference/global_objects/object/defineproperty/index.md
index 4bc890f2a0b252a..165b01d42c9780a 100644
--- a/files/en-us/web/javascript/reference/global_objects/object/defineproperty/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/object/defineproperty/index.md
@@ -412,20 +412,20 @@ const pattern = {
     return "I always return this string, whatever you have assigned";
   },
   set() {
-    this.myname = "this is my name string";
+    this.myName = "this is my name string";
   },
 };
 
 function TestDefineSetAndGet() {
-  Object.defineProperty(this, "myproperty", pattern);
+  Object.defineProperty(this, "myProperty", pattern);
 }
 
 const instance = new TestDefineSetAndGet();
-instance.myproperty = "test";
-console.log(instance.myproperty);
+instance.myProperty = "test";
+console.log(instance.myProperty);
 // I always return this string, whatever you have assigned
 
-console.log(instance.myname); // this is my name string
+console.log(instance.myName); // this is my name string
 ```
 
 ### Inheritance of properties
diff --git a/files/en-us/web/javascript/reference/global_objects/object/getownpropertynames/index.md b/files/en-us/web/javascript/reference/global_objects/object/getownpropertynames/index.md
index 517e5cccf9000dc..a8d3db8f9002f2b 100644
--- a/files/en-us/web/javascript/reference/global_objects/object/getownpropertynames/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/object/getownpropertynames/index.md
@@ -103,11 +103,11 @@ This uses the {{jsxref("Array.prototype.filter()")}} function to remove the enum
 
 ```js
 const target = myObject;
-const enumAndNonenum = Object.getOwnPropertyNames(target);
+const enumAndNonEnum = Object.getOwnPropertyNames(target);
 const enumOnly = new Set(Object.keys(target));
-const nonenumOnly = enumAndNonenum.filter((key) => !enumOnly.has(key));
+const nonEnumOnly = enumAndNonEnum.filter((key) => !enumOnly.has(key));
 
-console.log(nonenumOnly);
+console.log(nonEnumOnly);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/javascript/reference/global_objects/proxy/index.md b/files/en-us/web/javascript/reference/global_objects/proxy/index.md
index 4e39028014842be..c6e9c09c6cba084 100644
--- a/files/en-us/web/javascript/reference/global_objects/proxy/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/proxy/index.md
@@ -308,20 +308,20 @@ const view = new Proxy(
     selected: null,
   },
   {
-    set(obj, prop, newval) {
-      const oldval = obj[prop];
+    set(obj, prop, newVal) {
+      const oldVal = obj[prop];
 
       if (prop === "selected") {
-        if (oldval) {
-          oldval.setAttribute("aria-selected", "false");
+        if (oldVal) {
+          oldVal.setAttribute("aria-selected", "false");
         }
-        if (newval) {
-          newval.setAttribute("aria-selected", "true");
+        if (newVal) {
+          newVal.setAttribute("aria-selected", "true");
         }
       }
 
       // The default behavior to store the value
-      obj[prop] = newval;
+      obj[prop] = newVal;
 
       // Indicate success
       return true;
diff --git a/files/en-us/web/javascript/reference/global_objects/regexp/test/index.md b/files/en-us/web/javascript/reference/global_objects/regexp/test/index.md
index 4a4e0e5c7231267..5da19d9ef9363e0 100644
--- a/files/en-us/web/javascript/reference/global_objects/regexp/test/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/regexp/test/index.md
@@ -67,8 +67,8 @@ The following example logs a message which depends on the success of the test:
 
 ```js
 function testInput(re, str) {
-  const midstring = re.test(str) ? "contains" : "does not contain";
-  console.log(`${str} ${midstring} ${re.source}`);
+  const midString = re.test(str) ? "contains" : "does not contain";
+  console.log(`${str} ${midString} ${re.source}`);
 }
 ```
 
diff --git a/files/en-us/web/javascript/reference/global_objects/string/at/index.md b/files/en-us/web/javascript/reference/global_objects/string/at/index.md
index fa707af452698cf..cbe29814c788535 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/at/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/at/index.md
@@ -38,11 +38,11 @@ function returnLast(str) {
   return str.at(-1);
 }
 
-let invoiceRef = "myinvoice01";
+let invoiceRef = "my-invoice01";
 
 console.log(returnLast(invoiceRef)); // '1'
 
-invoiceRef = "myinvoice02";
+invoiceRef = "my-invoice02";
 
 console.log(returnLast(invoiceRef)); // '2'
 ```
diff --git a/files/en-us/web/javascript/reference/global_objects/string/indexof/index.md b/files/en-us/web/javascript/reference/global_objects/string/indexof/index.md
index a16076f3b9e361d..84213db55760b18 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/indexof/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/indexof/index.md
@@ -65,7 +65,7 @@ Strings are zero-indexed: The index of a string's first character is `0`, and th
 
 ```js
 "Blue Whale".indexOf("Blue"); // returns  0
-"Blue Whale".indexOf("Blute"); // returns -1
+"Blue Whale".indexOf("Wale"); // returns -1
 "Blue Whale".indexOf("Whale", 0); // returns  5
 "Blue Whale".indexOf("Whale", 5); // returns  5
 "Blue Whale".indexOf("Whale", 7); // returns -1
@@ -88,7 +88,7 @@ When checking if a specific substring occurs within a string, the correct way to
 
 ```js
 "Blue Whale".indexOf("Blue") !== -1; // true; found 'Blue' in 'Blue Whale'
-"Blue Whale".indexOf("Bloe") !== -1; // false; no 'Bloe' in 'Blue Whale'
+"Blue Whale".indexOf("Wale") !== -1; // false; no 'Wale' in 'Blue Whale'
 ```
 
 ## Examples
diff --git a/files/en-us/web/javascript/reference/global_objects/string/substr/index.md b/files/en-us/web/javascript/reference/global_objects/string/substr/index.md
index e39fc83e0ea7402..3f11a9a5fceca86 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/substr/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/substr/index.md
@@ -50,6 +50,8 @@ Although you are encouraged to avoid using `substr()`, there is no trivial way t
 
 ### Using substr()
 
+
+
 ```js
 const aString = "Mozilla";
 
diff --git a/files/en-us/web/javascript/reference/global_objects/string/substring/index.md b/files/en-us/web/javascript/reference/global_objects/string/substring/index.md
index 40af957c1a4f9d0..bdaa9e8e7ce10e5 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/substring/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/substring/index.md
@@ -48,6 +48,8 @@ Any argument value that is {{jsxref("NaN")}} is treated as if it were `0`.
 The following example uses `substring()` to display characters from the
 string `"Mozilla"`:
 
+
+
 ```js
 const anyString = "Mozilla";
 
@@ -71,6 +73,8 @@ The following example uses the `substring()` method and
 particular string. This method may be easier to remember, given that you don't need to
 know the starting and ending indices as you would in the above examples.
 
+
+
 ```js
 const text = "Mozilla";
 
diff --git a/files/en-us/web/javascript/reference/global_objects/symbol/replace/index.md b/files/en-us/web/javascript/reference/global_objects/symbol/replace/index.md
index 141ccd0cbda6688..9193d6e39426aac 100644
--- a/files/en-us/web/javascript/reference/global_objects/symbol/replace/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/symbol/replace/index.md
@@ -23,6 +23,8 @@ The well-known symbol `Symbol.replace`.
 
 ### Using Symbol.replace
 
+
+
 ```js
 class CustomReplacer {
   constructor(value) {
diff --git a/files/en-us/web/javascript/reference/global_objects/typedarray/of/index.md b/files/en-us/web/javascript/reference/global_objects/typedarray/of/index.md
index 5018b7138d8b646..c1be363be8c511f 100644
--- a/files/en-us/web/javascript/reference/global_objects/typedarray/of/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/typedarray/of/index.md
@@ -51,7 +51,7 @@ A new {{jsxref("TypedArray")}} instance.
 See {{jsxref("Array.of()")}} for more details. There are some subtle distinctions between {{jsxref("Array.of()")}} and
 `TypedArray.of()`:
 
-- If the `this` value passed to `TypedArray.of()` is not a constructor, `TypedArray.from()` will throw a {{jsxref("TypeError")}}, while `Array.of()` defaults to creating a new {{jsxref("Array")}}.
+- If the `this` value passed to `TypedArray.of()` is not a constructor, `TypedArray.of()` will throw a {{jsxref("TypeError")}}, while `Array.of()` defaults to creating a new {{jsxref("Array")}}.
 - `TypedArray.of()` uses `[[Set]]` while `Array.of()` uses `[[DefineOwnProperty]]`. Hence, when working with {{jsxref("Proxy")}} objects, it calls [`handler.set()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set) to create new elements rather than [`handler.defineProperty()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty).
 
 ## Examples
diff --git a/files/en-us/web/javascript/reference/operators/destructuring_assignment/index.md b/files/en-us/web/javascript/reference/operators/destructuring_assignment/index.md
index a12d4958a5494b2..8d7118aad009b3a 100644
--- a/files/en-us/web/javascript/reference/operators/destructuring_assignment/index.md
+++ b/files/en-us/web/javascript/reference/operators/destructuring_assignment/index.md
@@ -310,7 +310,7 @@ function parseProtocol(url) {
   // ["https://developer.mozilla.org/en-US/docs/Web/JavaScript",
   // "https", "developer.mozilla.org", "en-US/docs/Web/JavaScript"]
 
-  const [, protocol, fullhost, fullpath] = parsedURL;
+  const [, protocol, fullHost, fullPath] = parsedURL;
   return protocol;
 }
 
diff --git a/files/en-us/web/javascript/reference/operators/function/index.md b/files/en-us/web/javascript/reference/operators/function/index.md
index 017b63bdfb403d7..6028561416b771e 100644
--- a/files/en-us/web/javascript/reference/operators/function/index.md
+++ b/files/en-us/web/javascript/reference/operators/function/index.md
@@ -74,7 +74,7 @@ If you want to refer to the current function inside the function body, you need
 
 ```js
 const math = {
-  factit: function factorial(n) {
+  factorial: function factorial(n) {
     console.log(n);
     if (n <= 1) {
       return 1;
@@ -83,7 +83,7 @@ const math = {
   },
 };
 
-math.factit(3); //3;2;1;
+math.factorial(3); //3;2;1;
 ```
 
 If a function expression is named, the [`name`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) property of the function is set to that name, instead of the implicit name inferred from syntax (such as the variable the function is assigned to).
diff --git a/files/en-us/web/javascript/reference/operators/in/index.md b/files/en-us/web/javascript/reference/operators/in/index.md
index daa52846a525e35..c6c92a078d03c2f 100644
--- a/files/en-us/web/javascript/reference/operators/in/index.md
+++ b/files/en-us/web/javascript/reference/operators/in/index.md
@@ -103,9 +103,9 @@ Symbol.iterator in trees; // returns true
 "PI" in Math; // returns true
 
 // Custom objects
-const mycar = { make: "Honda", model: "Accord", year: 1998 };
-"make" in mycar; // returns true
-"model" in mycar; // returns true
+const myCar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in myCar; // returns true
+"model" in myCar; // returns true
 ```
 
 You must specify an object on the right side of the `in` operator. For example, you can specify a string created with the `String` constructor, but you cannot specify a string literal.
@@ -124,9 +124,9 @@ const color2 = "coral";
 If you delete a property with the [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete) operator, the `in` operator returns `false` for that property.
 
 ```js
-const mycar = { make: "Honda", model: "Accord", year: 1998 };
-delete mycar.make;
-"make" in mycar; // returns false
+const myCar = { make: "Honda", model: "Accord", year: 1998 };
+delete myCar.make;
+"make" in myCar; // returns false
 
 const trees = ["redwood", "bay", "cedar", "oak", "maple"];
 delete trees[3];
@@ -136,9 +136,9 @@ delete trees[3];
 If you set a property to {{jsxref("undefined")}} but do not delete it, the `in` operator returns true for that property.
 
 ```js
-const mycar = { make: "Honda", model: "Accord", year: 1998 };
-mycar.make = undefined;
-"make" in mycar; // returns true
+const myCar = { make: "Honda", model: "Accord", year: 1998 };
+myCar.make = undefined;
+"make" in myCar; // returns true
 ```
 
 ```js
diff --git a/files/en-us/web/javascript/reference/operators/instanceof/index.md b/files/en-us/web/javascript/reference/operators/instanceof/index.md
index 625f41c6ee3dbde..90c9a4a6cb7222b 100644
--- a/files/en-us/web/javascript/reference/operators/instanceof/index.md
+++ b/files/en-us/web/javascript/reference/operators/instanceof/index.md
@@ -186,9 +186,9 @@ literalObject instanceof Object; // true, every object literal has Object.protot
 nullObject instanceof Object; // false, prototype is end of prototype chain (null)
 ```
 
-### Demonstrating that mycar is of type Car and type Object
+### Demonstrating that myCar is of type Car and type Object
 
-The following code creates an object type `Car` and an instance of that object type, `mycar`. The `instanceof` operator demonstrates that the `mycar` object is of type `Car` and of type `Object`.
+The following code creates an object type `Car` and an instance of that object type, `myCar`. The `instanceof` operator demonstrates that the `myCar` object is of type `Car` and of type `Object`.
 
 ```js
 function Car(make, model, year) {
@@ -196,9 +196,9 @@ function Car(make, model, year) {
   this.model = model;
   this.year = year;
 }
-const mycar = new Car("Honda", "Accord", 1998);
-const a = mycar instanceof Car; // returns true
-const b = mycar instanceof Object; // returns true
+const myCar = new Car("Honda", "Accord", 1998);
+const a = myCar instanceof Car; // returns true
+const b = myCar instanceof Object; // returns true
 ```
 
 ### Not an instanceof
@@ -206,21 +206,21 @@ const b = mycar instanceof Object; // returns true
 To test if an object is not an `instanceof` a specific constructor, you can do:
 
 ```js
-if (!(mycar instanceof Car)) {
+if (!(myCar instanceof Car)) {
   // Do something, like:
-  // mycar = new Car(mycar)
+  // myCar = new Car(myCar)
 }
 ```
 
 This is really different from:
 
 ```js-nolint example-bad
-if (!mycar instanceof Car) {
+if (!myCar instanceof Car) {
   // unreachable code
 }
 ```
 
-This will always be `false`. (`!mycar` will be evaluated before `instanceof`, so you always try to know if a boolean is an instance of `Car`).
+This will always be `false`. (`!myCar` will be evaluated before `instanceof`, so you always try to know if a boolean is an instance of `Car`).
 
 ### Overriding the behavior of instanceof
 
diff --git a/files/en-us/web/javascript/reference/operators/logical_not/index.md b/files/en-us/web/javascript/reference/operators/logical_not/index.md
index 17310e93b972427..06ea224928aa4c0 100644
--- a/files/en-us/web/javascript/reference/operators/logical_not/index.md
+++ b/files/en-us/web/javascript/reference/operators/logical_not/index.md
@@ -56,7 +56,7 @@ The following code shows examples of the `!` (logical NOT) operator.
 
 It is possible to use a couple of NOT operators in series to explicitly force the
 conversion of any value to the corresponding [boolean primitive](/en-US/docs/Web/JavaScript/Data_structures#boolean_type).
-The conversion is based on the "truthyness" or "falsyness" of the value (see
+The conversion is based on the "truthiness" or "falsiness" of the value (see
 {{Glossary("truthy")}} and {{Glossary("falsy")}}).
 
 The same conversion can be done through the {{jsxref("Boolean/Boolean", "Boolean()")}} function.
diff --git a/files/en-us/web/javascript/reference/operators/optional_chaining/index.md b/files/en-us/web/javascript/reference/operators/optional_chaining/index.md
index 3923d7e03f9c07f..b8442fc1afdde6e 100644
--- a/files/en-us/web/javascript/reference/operators/optional_chaining/index.md
+++ b/files/en-us/web/javascript/reference/operators/optional_chaining/index.md
@@ -192,14 +192,14 @@ Except the `temp` variable isn't created.
 ### Basic example
 
 This example looks for the value of the `name` property for the member
-`bar` in a map when there is no such member. The result is therefore
+`CSS` in a map when there is no such member. The result is therefore
 `undefined`.
 
 ```js
 const myMap = new Map();
-myMap.set("foo", { name: "baz", desc: "inga" });
+myMap.set("JS", { name: "Josh", desc: "I maintain things" });
 
-const nameBar = myMap.get("bar")?.name;
+const nameBar = myMap.get("CSS")?.name;
 ```
 
 ### Dealing with optional callbacks or event handlers
diff --git a/files/en-us/web/javascript/reference/statements/continue/index.md b/files/en-us/web/javascript/reference/statements/continue/index.md
index dfb856fb0f6384a..68d2936a6199d85 100644
--- a/files/en-us/web/javascript/reference/statements/continue/index.md
+++ b/files/en-us/web/javascript/reference/statements/continue/index.md
@@ -85,14 +85,14 @@ Output:
 ```plain
 i: 0
 
-// start checkj
+// start checkJ
 j: 8
 7 is odd.
 j: 7
 j: 6
 5 is odd.
 j: 5
-// end checkj
+// end checkJ
 
 i = 1
 j = 4
diff --git a/files/en-us/web/javascript/reference/statements/try...catch/index.md b/files/en-us/web/javascript/reference/statements/try...catch/index.md
index 7b96153eba13a4b..8177b9de493f019 100644
--- a/files/en-us/web/javascript/reference/statements/try...catch/index.md
+++ b/files/en-us/web/javascript/reference/statements/try...catch/index.md
@@ -168,7 +168,7 @@ You can create "Conditional `catch` blocks" by combining `try...catch` blocks wi
 
 ```js
 try {
-  myroutine(); // may throw three types of exceptions
+  myRoutine(); // may throw three types of exceptions
 } catch (e) {
   if (e instanceof TypeError) {
     // statements to handle TypeError exceptions
diff --git a/files/en-us/web/javascript/reference/strict_mode/index.md b/files/en-us/web/javascript/reference/strict_mode/index.md
index 839cc67e013e310..7dca7b4a634d0cb 100644
--- a/files/en-us/web/javascript/reference/strict_mode/index.md
+++ b/files/en-us/web/javascript/reference/strict_mode/index.md
@@ -110,6 +110,8 @@ Strict mode changes some previously-accepted mistakes into errors. JavaScript wa
 
 Strict mode makes it impossible to accidentally create global variables. In sloppy mode, mistyping a variable in an assignment creates a new property on the global object and continues to "work". Assignments which would accidentally create global variables throw an error in strict mode:
 
+
+
 ```js
 "use strict";
 let mistypeVariable;
diff --git a/files/en-us/web/security/user_activation/index.md b/files/en-us/web/security/user_activation/index.md
index 8588b3cbdc19143..2dee15d20852c93 100644
--- a/files/en-us/web/security/user_activation/index.md
+++ b/files/en-us/web/security/user_activation/index.md
@@ -39,7 +39,6 @@ APIs that require transient activation (list is not exhaustive):
 - {{domxref("Element.requestFullScreen()")}}
 - {{domxref("Element.requestPointerLock()")}}
 - {{domxref("EyeDropper.open()")}}
-- {{domxref("GPUAdapter.requestAdapterInfo()")}}
 - {{domxref("HID.requestDevice()")}}
 - {{domxref("HTMLInputElement.showPicker()")}}
 - {{domxref("HTMLSelectElement.showPicker()")}}