This example positions a "highlight" rectangle behind the contents of a range. The range's content starts here and continues on until it ends here. The bounding client rectangle contains everything selected in the range.
``` ```css #highlight { background: yellow; position: absolute; z-index: -1; } p { width: 200px; } ``` ```javascript const range = document.createRange(); range.setStartBefore(document.getElementsByTagName("em").item(0)); range.setEndAfter(document.getElementsByTagName("em").item(1)); const clientRect = range.getBoundingClientRect(); const highlight = document.getElementById("highlight"); highlight.style.left = `${clientRect.x}px`; highlight.style.top = `${clientRect.y}px`; highlight.style.width = `${clientRect.width}px`; highlight.style.height = `${clientRect.height}px`; ``` -------------------------------- ### Clone Svelte GitHub Repository Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_deployment_next Clone the Svelte GitHub repository to get started with the project code. Ensure you have Git installed. ```bash git clone https://github.com/sveltejs/svelte.git ``` -------------------------------- ### Getting XRHitTestResult objects within the frame loop Source: https://developer.mozilla.org/en-US/docs/Web/API/XRHitTestResult This example demonstrates how to get XRHitTestResult objects within a frame loop. Ensure 'hit-test' is specified in requiredFeatures during session setup and use XRSession.requestHitTestSource() to obtain a XRHitTestSource. ```javascript const frame = xrSession.requestAnimationFrame(renderer.render.bind(renderer)); const results = frame.getHitTestResults(hitTestSource); for (const result of results) { const pose = result.getPose(xrFrame.referenceSpace); // ... use pose ... } ``` -------------------------------- ### Accessing seekable ranges Source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable This example demonstrates how to access the `seekable` property of an HTMLMediaElement and iterate through the returned TimeRanges object to get the start and end times of each seekable range. ```APIDOC ## Property: seekable ### Description Returns a new static normalized `TimeRanges` object that represents the ranges of the media resource, if any, that the user agent is able to seek to at the time `seekable` property is accessed. ### Value A `TimeRanges` object. ### Example ```javascript const video = document.querySelector("video"); const timeRangesObject = video.seekable; const timeRanges = []; // Go through the object and output an array for (let count = 0; count < timeRangesObject.length; count++) { timeRanges.push([timeRangesObject.start(count), timeRangesObject.end(count)]); } console.log(timeRanges); ``` ``` -------------------------------- ### Navigate to App Directory and Install Dependencies Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started After cloning the repository, navigate to the app directory and install the necessary dependencies. Then, start the development server. ```bash cd svelte npm install && npm run dev ``` -------------------------------- ### Basic MutationObserver.observe() Usage Source: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe This example demonstrates the basic setup and usage of `MutationObserver.observe()`. It initializes an observer, defines a callback function to handle mutations, and then starts observing a target element for changes. ```javascript const targetNode = document.getElementById('some-id'); // Options for the observer (what to listen for) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = (mutationList, observer) => { // Use traditional for loops for efficiency for (const mutation of mutationList) { if (mutation.type === 'childList') { console.log('A child node has been added or removed.'); } else if (mutation.type === 'attributes') { console.log(`The ${mutation.attributeName} attribute was modified.`); } } }; // Create an observer instance linked to the callback function const observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); ``` -------------------------------- ### Get Element Tag Name in Python Source: https://developer.mozilla.org/en-US/docs/Web/WebDriver/Reference/Classic/Commands/GetElementTagName This example demonstrates how to retrieve the tag name of an element using Selenium WebDriver in Python. Ensure you have Selenium installed and a WebDriver executable available. ```python from selenium import webdriver session = webdriver.Firefox() session.get("https://google.com/?hl=en") search_box = driver.find_element_by_id("q") print(search_box.tag_name) ``` -------------------------------- ### Getting MediaStreamTrack Capabilities Source: https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/getCapabilities This example demonstrates how to get the capabilities of a MediaStreamTrack. You first need to get a track from a MediaStream, for example, from getUserMedia(). ```javascript async function getTrackCapabilities(trackKind) { const stream = await navigator.mediaDevices.getUserMedia({ audio: trackKind === 'audio', video: trackKind === 'video' }); const track = stream.getTracks()[0]; const capabilities = track.getCapabilities(); console.log(capabilities); track.stop(); return capabilities; } getTrackCapabilities('video'); ``` -------------------------------- ### Build and serve the web application Source: https://developer.mozilla.org/en-US/docs/WebAssembly/Guides/Rust_to_Wasm Starts a local development server and opens the application in your browser. This command uses the `serve` script defined in `package.json`. ```bash npm run serve ``` -------------------------------- ### Install Dependencies and Run Development Server Source: https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Vue_getting_started Commands to navigate into the project directory, install dependencies, format code, and start the development server. ```bash cd todo-vue npm install npm run format npm run dev ``` -------------------------------- ### Example GET request Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods/GET This is an example of a GET request to retrieve the resource at /contact on example.com. ```http GET /contact HTTP/1.1 Host: example.com User-Agent: curl/8.6.0 Accept: */* ``` -------------------------------- ### Setting up Audio Sample with Promise Pattern Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques Combines audio loading and decoding into a setup function that returns a promise. This allows for chaining further actions once the audio is ready. ```javascript async function setupSample(url) { const audioBuffer = await fetchAndDecodeAudio(url); // Further setup can happen here return audioBuffer; } ``` -------------------------------- ### Take Photo and Grab Frame with ImageCapture Source: https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture This example demonstrates how to use ImageCapture to take a photo and grab a frame from a MediaStreamTrack. It shows the setup required to get a track and apply the captured image data to a canvas. ```javascript const track = await navigator.mediaDevices.getUserMedia({ video: true }).then(stream => stream.getVideoTracks()[0]); const imageCapture = new ImageCapture(track); // Take a photo imageCapture.takePhoto() .then(blob => createImageBitmap(blob)) .then(imageBitmap => { const canvas = document.querySelector('canvas'); canvas.width = imageBitmap.width; canvas.height = imageBitmap.height; canvas.getContext('2d').drawImage(imageBitmap, 0, 0); }) .catch(error => console.error('takePhoto() failed:', error)); // Grab a frame imageCapture.grabFrame() .then(imageBitmap => { const canvas = document.querySelector('canvas'); canvas.width = imageBitmap.width; canvas.height = imageBitmap.height; canvas.getContext('2d').drawImage(imageBitmap, 0, 0); }) .catch(error => console.error('grabFrame() failed:', error)); ``` -------------------------------- ### Example Usage Source: https://developer.mozilla.org/en-US/docs/Web/API/Screen/availHeight This example demonstrates how to use `availHeight` to open a new window that occupies the entire available vertical space. ```APIDOC ## Example: Opening a Full-Height Window ### Description This example shows how to open a new window and size it to fill the available vertical screen space, excluding elements like the taskbar or dock. ### Code ```javascript // In the main window: const newWindow = window.open('panels.html', 'Panels', `width=400,height=${window.screen.availHeight}`); // In panels.html (executed when the window is created): // The window will automatically resize to fill available vertical space. window.resizeTo(400, window.screen.availHeight); ``` ### Result The new window will occupy all available vertical space on the screen, leaving room for system UI elements. ``` -------------------------------- ### Comparison of line caps Source: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap This example draws three lines with different `lineCap` values ('butt', 'round', 'square') to visually compare their endpoint shapes. Guides are included to show the exact start and end points. ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const y = 50; const width = 100; const height = 100; // Draw guides ctx.beginPath(); ctx.moveTo(50, y); ctx.lineTo(50 + width, y); ctx.moveTo(50, y + height); ctx.lineTo(50 + width, y + height); ctx.strokeStyle = 'lightgray'; ctx.stroke(); // Draw lines with different line caps ctx.lineWidth = 10; ctx.strokeStyle = 'black'; // Butt (default) ctx.beginPath(); ctx.moveTo(50, y + height / 2); ctx.lineTo(50 + width, y + height / 2); ctx.stroke(); // Round ctx.lineCap = 'round'; ctx.beginPath(); ctx.moveTo(50, y + height); ctx.lineTo(50 + width, y + height); ctx.stroke(); // Square ctx.lineCap = 'square'; ctx.beginPath(); ctx.moveTo(50, y); ctx.lineTo(50 + width, y); ctx.stroke(); ``` -------------------------------- ### Complete server.js Example Source: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Build_a_phone_with_peerjs/Build_the_server This is the complete server.js file, including necessary dependencies, serving the index.html, and integrating the peer server. ```javascript const express = require('express'); const app = express(); const http = require('http'); const server = http.createServer(app); const io = require('socket.io')(server); const ExpressPeerServer = require('peer').ExpressPeerServer; app.use(express.static(__dirname + '/public')); const peerServer = ExpressPeerServer(server, { debug: true, }); app.use('/peerjs', peerServer); io.on('connection', (socket) => { console.log('a user connected'); }); server.listen(8000, () => { console.log('listening on *:8000'); }); ``` -------------------------------- ### HTTP Request Method Syntax Example (GET) Source: https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Syntax_sections This example demonstrates the basic syntax structure for the GET HTTP request method. ```http GET /index.html ``` -------------------------------- ### Set up Audio Sample Source: https://developer.mozilla.org/en-US/docs/Games/Techniques/Audio_for_Web_Games Combines fetching, decoding, and buffering of an audio file. This async function ensures audio is ready before proceeding. ```javascript async function setupSample(url) { const response = await fetch(url); const audioData = response.arrayBuffer(); const audioBuffer = await decodeAudioData(audioData); return audioBuffer; } ``` -------------------------------- ### onInstalled Event Listener Source: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onInstalled This example demonstrates how to listen for the onInstalled event. When the event fires, it logs the installation reason to the console and opens a specific URL in a new tab. This is useful for onboarding users or providing initial information upon installation or update. ```APIDOC ## runtime.onInstalled ### Description Fired when the extension is first installed, when the extension is updated to a new version, or when the browser is updated to a new version. ### Event Listener Example ```javascript function handleInstalled(details) { console.log(details.reason); browser.tabs.create({ url: "https://example.com", }); } browser.runtime.onInstalled.addListener(handleInstalled); ``` ### Details - **details.reason**: A string specifying the reason for the event. Possible values are: - `"install"`: The extension was installed. - ``update`": The extension was updated to a new version. - `"browser_update"`: The browser was updated to a new version. - `"shared_module_update"`: A shared module that the extension depends on was updated. ### Browser Compatibility This API is based on Chromium's `chrome.runtime` API. The `onInstalled` event is supported across most modern browsers that support the WebExtensions API. ``` -------------------------------- ### Example successful GET response Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Methods/GET This is an example of a successful HTTP response (200 OK) to a GET request, including headers and content length. ```http HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Date: Fri, 21 Jun 2024 14:18:33 GMT Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT Content-Length: 1234 ``` -------------------------------- ### Main WebGL Application Setup Source: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context Sets up the WebGL context, initializes shaders and buffers, and calls the draw function. This is the entry point for the WebGL application. ```javascript function main() { const canvas = document.querySelector('#glcanvas'); const gl = canvas.getContext('webgl'); if (!gl) { alert('Unable to initialize WebGL. Your browser or machine may not support it.'); return; } const vsSource = ` attribute vec4 aVertexPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; } `; const fsSource = ` void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } `; const shaderProgram = initShaderProgram(gl, vsSource, fsSource); const programInfo = { program: shaderProgram, attribLocations: { vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'), }, uniformLocations: { projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'), modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'), }, }; const buffers = initBuffers(gl); drawScene(gl, programInfo, buffers); } window.onload = main; ``` -------------------------------- ### Get Screen Details and Open Windows Source: https://developer.mozilla.org/en-US/docs/Web/API/ScreenDetails This example demonstrates how to get screen details and open a full-size window on each available display. It requires user permission for window management. ```javascript async function openWindowsOnAllScreens() { const screenDetails = await window.getScreenDetails(); for (const screen of screenDetails.screens) { const newWindow = window.open( "/", "_blank", `width=${screen.width},height=${screen.height},left=${screen.left},top=${screen.top}` ); if (newWindow) { newWindow.focus(); } } } ``` -------------------------------- ### Temporal fragment examples (start to end of media) Source: https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment/Media_fragments These examples demonstrate specifying a media fragment that starts at a specific time and plays until the end of the media. ```url #t=2 ``` ```url #t=0:00:02 ``` -------------------------------- ### Setting up action handlers for a music player Source: https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API This example demonstrates feature detection for the Media Session API, instantiating a `MediaMetadata` object, and adding action handlers for common media control actions. ```APIDOC ## Setting up action handlers for a music player ### Description This example shows how to detect if the Media Session API is supported, create metadata for the media session, and define handlers for user-initiated actions like play, pause, and skip. ### Example ```javascript if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: 'Unforgettable', artist: 'Nat King Cole', album: 'The Best of Nat King Cole', artwork: [ { src: 'https://example.com/artwork-96x96', sizes: '96x96', type: 'image/png' }, { src: 'https://example.com/artwork-128x128', sizes: '128x128', type: 'image/png' }, { src: 'https://example.com/artwork-256x256', sizes: '256x256', type: 'image/png' } ] }); navigator.mediaSession.setActionHandler('play', () => { // Play media console.log('Playing media...'); }); navigator.mediaSession.setActionHandler('pause', () => { // Pause media console.log('Pausing media...'); }); navigator.mediaSession.setActionHandler('previoustrack', () => { // Seek to previous track console.log('Seeking to previous track...'); }); navigator.mediaSession.setActionHandler('nexttrack', () => { // Seek to next track console.log('Seeking to next track...'); }); } ``` ``` -------------------------------- ### Temporal fragment examples (specific start and end) Source: https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment/Media_fragments These examples show how to play a media fragment between a specific start and end time, allowing for fractional seconds. ```url #t=2,3.5 ``` ```url #t=0:00:02,3.5 ``` ```url #t=0:00:02,00:03.5 ``` -------------------------------- ### JavaScript Example Source: https://developer.mozilla.org/en-US/docs/Web/API/MathMLElement An example demonstrating how to get the constructor name of a MathMLElement. ```javascript document.querySelector("msqrt").constructor.name; // MathMLElement ``` -------------------------------- ### prompt() Source: https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent/prompt Shows the install prompt at a time of the developer's choosing. This method must be called in the event handler for a user action and may only be called once on a given BeforeInstallPromptEvent instance. ```APIDOC ## prompt() ### Description Allows a developer to show the install prompt at a time of their own choosing. Typically this will be called in the event handler for the app's custom install UI. This method must be called in the event handler for a user action (such as a button click) and may only be called once on a given `BeforeInstallPromptEvent` instance. ### Method `prompt()` ### Parameters None. ### Return value A `Promise` resolving to an object containing the following properties: `outcome` (string) - A string indicating whether the user chose to install the app or not. It must be one of the following values: `"accepted"` or `"dismissed"`. `platform` (string) - If the user chose to install the app, this is a string naming the selected platform. If the user chose not to install the app, this is an empty string. ``` -------------------------------- ### Accepting any audio file Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept This example demonstrates how to accept any type of audio file using the `audio/*` wildcard. ```html ``` -------------------------------- ### Getting default styles using computedStyleMap() Source: https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap This example demonstrates how to retrieve all CSS property values for an element using computedStyleMap(). It requires basic HTML and CSS setup. The output will list CSS properties and their computed values in browsers supporting the method. ```javascript const link = document.querySelector("a"); const styleMap = link.computedStyleMap(); const dl = document.createElement("dl"); styleMap.forEach((value, propertyName) => { const dt = document.createElement("dt"); const dd = document.createElement("dd"); dt.textContent = propertyName; dd.textContent = value; dl.appendChild(dt); dl.appendChild(dd); }); document.body.appendChild(dl); ``` -------------------------------- ### Initialize Extension on Installation Source: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Background_scripts Use the `runtime.onInstalled` event to initialize an extension, such as setting a state or creating context menus. ```javascript chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ "id": "myContextMenu", "title": "My Context Menu", "contexts": ["page", "selection", "image", "link"] }); }); ``` -------------------------------- ### runtime.onStartup Source: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime Fired when a profile that has this extension installed first starts up. This event is not fired when an incognito profile is started. ```APIDOC ## runtime.onStartup ### Description Fired when a profile that has this extension installed first starts up. This event is not fired when an incognito profile is started. ### Event runtime.onStartup ``` -------------------------------- ### Example Usage Source: https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent An example demonstrating how to listen for the 'devicemotion' event and log acceleration data. ```APIDOC ## Example ```js window.addEventListener("devicemotion", (event) => { console.log(`${event.acceleration.x} m/s2`); }); ``` ``` -------------------------------- ### Get the current UTC year Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear This example demonstrates how to get the current year in UTC using getUTCFullYear(). ```javascript const today = new Date(); const year = today.getUTCFullYear(); ``` -------------------------------- ### Basic createComputePipelineAsync() example Source: https://developer.mozilla.org/en-US/docs/Web/API/GPUDevice/createComputePipelineAsync This example demonstrates creating a bind group layout, a pipeline layout, and then using them to create a GPUComputePipeline asynchronously. It's a fundamental pattern for setting up compute shaders. ```javascript const bindGroupLayout = device.createBindGroupLayout({ entries: [ { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } } ] }); const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }); const shaderModule = device.createShaderModule({ code: ` @compute @workgroup_size(64, 1, 1) fn main(@binding(0) global_data: ptr