recursal/MDN huggingface dataset:
FetchEvent
==========

This is the event type for `fetch` events dispatched on the service worker global scope. It contains information about the fetch, including the request and how the receiver will treat the response. It provides the `event.respondWith()` method, which allows us to provide a response to this fetch.

Event

ExtendableEvent

FetchEventConstructor
-----------

`FetchEvent()`

Creates a new `FetchEvent` object. This constructor is not typically used. The browser creates these objects and provides them to `fetch` event callbacks.

Instance properties
-------------------

*Inherits properties from its ancestor, `Event`*.

`FetchEvent.clientId` Read only 

The `id` of the same-origin `client` that initiated the fetch.

`FetchEvent.handled` Read only 

A promise that is pending while the event has not been handled, and fulfilled once it has.

`FetchEvent.preloadResponse` Read only 

A `Promise` for a `Response`, or `undefined` if this fetch is not a navigation, or navigation preload is not enabled.

`FetchEvent.replacesClientId` Read only 

The `id` of the `client` that is being replaced during a page navigation.

`FetchEvent.resultingClientId` Read only 

The `id` of the `client` that replaces the previous client during a page navigation.

`FetchEvent.request` Read only 

The `Request` the browser intends to make.

Instance methods
----------------

*Inherits methods from its parent, `ExtendableEvent`*.

`FetchEvent.respondWith()`

Prevent the browser's default fetch handling, and provide (a promise for) a response yourself.

`ExtendableEvent.waitUntil()`

Extends the lifetime of the event. Used to notify the browser of tasks that extend beyond the returning of a response, such as streaming and caching.

Examples
--------

 This fetch event uses the browser default for non-GET requests.
 For GET requests it tries to return a match in the cache, and falls back to the network. If it finds a match in the cache, it asynchronously updates the cache for next time.


```js
self.addEventListener("fetch", (event) => {
  // Let the browser do its default thing
  // for non-GET requests.
  if (event.request.method !== "GET") return;

  // Prevent the default, and handle the request ourselves.
  event.respondWith(
    (async () => {
      // Try to get the response from a cache.
      const cache = await caches.open("dynamic-v1");
      const cachedResponse = await cache.match(event.request);

      if (cachedResponse) {
        // If we found a match in the cache, return it, but also
        // update the entry in the cache in the background.
        event.waitUntil(cache.add(event.request));
        return cachedResponse;
      }

      // If we didn't find a match in the cache, use the network.
      return fetch(event.request);
    })(),
  );
});
```

Specifications
--------------

| Specification |
| --- |
| Service Workers # fetchevent-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `fetch` event
* `Promise`
* Fetch API
Scheduling
==========

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`Scheduling`** object provides methods and properties to control scheduling tasks within the current document.

Instance methods
----------------

`isInputPending()` 
Experimental

Returns a boolean that indicates whether there are pending input events in the event queue, meaning that the user is attempting to interact with the page.

Example
-------

See the `Scheduling.isInputPending()` page for a full example.

Specifications
--------------

| Specification |
| --- |
| Early detection of input events # the-scheduling-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Faster input events with Facebook's first browser API contribution on engineering.fb.com (2019)
* Better JS scheduling with isInputPending() on developer.chrome.com (2020)
* Optimizing long tasks on web.dev (2022)
TransitionEvent
===============

The **`TransitionEvent`** interface represents events providing information related to transitions.

Event

TransitionEventConstructor
-----------

`TransitionEvent()`

Creates a `TransitionEvent` event with the given parameters.

Instance properties
-------------------

*Also inherits properties from its parent `Event`*.

`TransitionEvent.propertyName` Read only 

A string containing the name CSS property associated with the transition.

`TransitionEvent.elapsedTime` Read only 

A `float` giving the amount of time the transition has been running, in seconds, when this event fired. This value is not affected by the `transition-delay` property.

`TransitionEvent.pseudoElement` Read only 

A string, starting with `::`, containing the name of the pseudo-element the animation runs on. If the transition doesn't run on a pseudo-element but on the element, an empty string: `''`.

Types of `TransitionEvent`
--------------------------

`transitioncancel`

An `Event` fired when a CSS transition has been cancelled.

`transitionend`

An `Event` fired when a CSS transition has finished playing.

`transitionrun`

An `Event` fired when a CSS transition is created (i.e., when it is added to a set of running transitions), though not necessarily started.

`transitionstart`

An `Event` fired when a CSS transition has started transitioning.

Instance methods
----------------

*Also inherits methods from its parent `Event`*.

Specifications
--------------

| Specification |
| --- |
| CSS Transitions # interface-transitionevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS transitions
* CSS properties: `transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
* CSS at-rules: `@starting-style`
LayoutShiftAttribution
======================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The `LayoutShiftAttribution` interface provides debugging information about elements which have shifted.

Instances of `LayoutShiftAttribution` are returned in an array by calling `LayoutShift.sources`.

Instance properties
-------------------

`LayoutShiftAttribution.node` Read only  
Experimental

Returns the element that has shifted (null if it has been removed).

`LayoutShiftAttribution.previousRect` Read only  
Experimental

Returns a `DOMRectReadOnly` object representing the position of the element before the shift.

`LayoutShiftAttribution.currentRect` Read only  
Experimental

Returns a `DOMRectReadOnly` object representing the position of the element after the shift.

Instance methods
----------------

`LayoutShiftAttribution.toJSON()` 
Experimental

Returns a JSON representation of the `LayoutShiftAttribution` object.

Examples
--------

The following example finds the element with the highest layout shift score, and returns the element in that entry with the largest size prior to the shift (`previousRect`). For more detail on this see Debug Web Vitals in the field.


```js
function getCLSDebugTarget(entries) {
  const largestEntry = entries.reduce((a, b) =>
    a && a.value > b.value ? a : b,
  );
  if (largestEntry?.sources?.length) {
    const largestSource = largestEntry.sources.reduce((a, b) => {
      const area = (el) => el.previousRect.width \* el.previousRect.height;
      return a.node && area(a) > area(b) ? a : b;
    });
    if (largestSource) {
      return largestSource.node;
    }
  }
}
```

Specifications
--------------

| Specification |
| --- |
| Layout Instability # sec-layout-shift-attribution |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Debug layout shifts
* Debug Web Vitals in the field
Keyboard
========

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`Keyboard`** interface of the Keyboard API provides functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.

A list of valid code values is found in the UI Events KeyboardEvent code Values spec.

EventTarget

KeyboardInstance properties
-------------------

*Also inherits properties from its parent interface, `EventTarget`.*

Instance methods
----------------

*Also inherits methods from its parent interface, `EventTarget`.*

`Keyboard.getLayoutMap()` 
Experimental

Returns a `Promise` that resolves with an instance of `KeyboardLayoutMap` which is a map-like object with functions for retrieving the strings associated with specific physical keys.

`Keyboard.lock()` 
Experimental

Returns a `Promise` after enabling the capture of keypresses for any or all of the keys on the physical keyboard.

`Keyboard.unlock()` 
Experimental

Unlocks all keys captured by the `lock()` method and returns synchronously.

Example
-------

### Keyboard mapping

The following example demonstrates how to get the location- or layout-specific string associated with the key that corresponds to the 'W' key on an English QWERTY keyboard.


```js
if (navigator.keyboard) {
  const keyboard = navigator.keyboard;
  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
    const upKey = keyboardLayoutMap.get("KeyW");
    window.alert(`Press ${upKey} to move up.`);
  });
} else {
  // Do something else.
}
```

### Keyboard locking

The following example captures the `W`, `A`, `S`, and `D` keys, call `lock()` with a list that contains the key code attribute value for each of these keys:


```js
navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
```


This captures these keys regardless of which modifiers are used with the key press. Assuming a standard United States QWERTY layout, registering `KeyW` ensures that `W`, `Shift+W`, `Control+W`, `Control+Shift+W`, and all other key modifier combinations with `W` are sent to the app. The same applies to for `KeyA`, `KeyS`, and `KeyD`.

Specifications
--------------

| Specification |
| --- |
| Keyboard Map # keyboard-interface |
| Keyboard Lock # keyboard-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSAnimation
============

The **`CSSAnimation`** interface of the Web Animations API represents an `Animation` object.

EventTarget

Animation

CSSAnimationInstance properties
-------------------

*This interface inherits properties from its parent, `Animation`.*

`CSSAnimation.animationName` Read only 

Returns the animation name as a string.

Instance methods
----------------

*This interface inherits methods from its parent, `Animation`.*

Examples
--------

### Inspecting the returned CSSAnimation

The animation in the following example is defined in CSS with the name `slide-in`. Calling `Element.getAnimations()` returns an array of all `Animation` objects. In our case this returns a `CSSAnimation` object, representing the animation created in CSS.


```css
.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}
```



```js
let animations = document.querySelector(".animate").getAnimations();
console.log(animations[0]);
```

Specifications
--------------

| Specification |
| --- |
| CSS Animations Level 2 # the-CSSAnimation-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
SpeechSynthesisErrorEvent
=========================

The **`SpeechSynthesisErrorEvent`** interface of the Web Speech API contains information about any errors that occur while processing `SpeechSynthesisUtterance` objects in the speech service.

Event

SpeechSynthesisEvent

SpeechSynthesisErrorEventConstructor
-----------

`SpeechSynthesisErrorEvent()`

Creates a new `SpeechSynthesisErrorEvent`.

Instance properties
-------------------

*`SpeechSynthesisErrorEvent` extends the `SpeechSynthesisEvent` interface, which inherits properties from its parent interface, `Event`.*

`SpeechSynthesisErrorEvent.error` Read only 

Returns an error code indicating what has gone wrong with a speech synthesis attempt.

Instance methods
----------------

*`SpeechSynthesisErrorEvent` extends the `SpeechSynthesisEvent` interface, which inherits methods from its parent interface, `Event`.*

Examples
--------


```js
const synth = window.speechSynthesis;

const inputForm = document.querySelector("form");
const inputTxt = document.querySelector("input");
const voiceSelect = document.querySelector("select");

const voices = synth.getVoices();

// ...

inputForm.onsubmit = (event) => {
  event.preventDefault();

  const utterThis = new SpeechSynthesisUtterance(inputTxt.value);
  const selectedOption =
    voiceSelect.selectedOptions[0].getAttribute("data-name");
  for (let i = 0; i < voices.length; i++) {
    if (voices[i].name === selectedOption) {
      utterThis.voice = voices[i];
    }
  }

  synth.speak(utterThis);

  utterThis.onerror = (event) => {
    console.log(
      `An error has occurred with the speech synthesis: ${event.error}`,
    );
  };

  inputTxt.blur();
};
```

Specifications
--------------

| Specification |
| --- |
| Web Speech API # speechsynthesiserrorevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Web Speech API
PeriodicSyncEvent
=================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`PeriodicSyncEvent`** interface of the Web Periodic Background Synchronization API provides a way to run tasks in the service worker with network connectivity.

An instance of this event is passed to the `periodicsync` handler. This happens periodically, at an interval greater than or equal to that set in the `PeriodicSyncManager.register()` method. Other implementation-specific factors such as the user's engagement with the site decide the actual interval.

Event

ExtendableEvent

PeriodicSyncEventConstructor
-----------

`PeriodicSyncEvent()` 
Experimental

Creates a new `PeriodicSyncEvent` object. This constructor is not typically used. The browser creates these objects itself and provides them to `onperiodicsync` callback.

Instance properties
-------------------

*Inherits properties from its parent, `ExtendableEvent`.*

`PeriodicSyncEvent.tag` Read only  
Experimental

Returns the developer-defined identifier for this `PeriodicSyncEvent`. Multiple tags can be used by the web app to run different periodic tasks at different frequencies.

Instance methods
----------------

*Inherits methods from its parent, `ExtendableEvent`.*

Examples
--------

The following example shows how to respond to a periodic sync event in the service worker.


```js
self.addEventListener("periodicsync", (event) => {
  if (event.tag === "get-latest-news") {
    event.waitUntil(fetchAndCacheLatestNews());
  }
});
```


`fetchAndCacheLatestNews` is a developer defined function.

Specifications
--------------

| Specification |
| --- |
| Web Periodic Background Synchronization # periodicsync-event |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Richer offline experiences with the Periodic Background Sync API
* A Periodic Background Sync demo app
HTMLTimeElement
===============

The **`HTMLTimeElement`** interface provides special properties (beyond the regular `HTMLElement` interface it also has available to it by inheritance) for manipulating `<time>` elements.

EventTarget

Node

Element

HTMLElement

HTMLTimeElementInstance properties
-------------------

*Inherits properties from its parent, `HTMLElement`.*

`HTMLTimeElement.dateTime`

A string that reflects the `datetime` HTML attribute, containing a machine-readable form of the element's date and time value.

Instance methods
----------------

*No specific method; inherits methods from its parent, `HTMLElement`.*

Specifications
--------------

| Specification |
| --- |
| HTML Standard # htmltimeelement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The HTML element implementing this interface: `<time>`.
SVGAnimatedEnumeration
======================

The **`SVGAnimatedEnumeration`** interface describes attribute values which are constants from a particular enumeration and which can be animated.

Instance properties
-------------------

`baseVal`

An integer that is the base value of the given attribute before applying any animations.

`animVal`

If the given attribute or property is being animated, it contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, it contains the same value as `baseVal`.

Instance methods
----------------

The `SVGAnimatedEnumeration` interface do not provide any specific methods.

Examples
--------

Considering this snippet with a `<clipPath>` element: Its `clipPathUnits` is associated with a `SVGAnimatedEnumeration` object.


```html
<svg viewBox="0 0 100 100" width="200" height="200">
  <clipPath id="clip1" clipPathUnits="userSpaceOnUse">
    <circle cx="50" cy="50" r="35" />
  </clipPath>

  <!-- Some reference rect to materialized to clip path -->
  <rect id="r1" x="0" y="0" width="45" height="45" />
</svg>
```


This snippet gets the element, and logs the `baseVal` and `animVal`of the `SVGClipPathElement.clipPathUnits` property. As no animation is happening, they have the same value.


```js
const clipPathElt = document.getElementById("clip1");
console.log(clipPathElt.clipPathUnits.baseVal); // Logs 1 that correspond to userSpaceOnUse
console.log(clipPathElt.clipPathUnits.animVal); // Logs 1 that correspond to userSpaceOnUse
```

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGAnimatedEnumeration |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
WebGLProgram
============

The **`WebGLProgram`** is part of the WebGL API and is a combination of two compiled `WebGLShader`s consisting of a vertex shader and a fragment shader (both written in GLSL).

WebGLObject

WebGLProgram
To create a `WebGLProgram`, call the GL context's `createProgram()` function. After attaching the shader programs using `attachShader()`, you link them into a usable program. This is shown in the code below.


```js
const program = gl.createProgram();

// Attach pre-existing shaders
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  const info = gl.getProgramInfoLog(program);
  throw `Could not compile WebGL program. \n\n${info}`;
}
```


See `WebGLShader` for information on creating the `vertexShader` and `fragmentShader` in the above example.

Examples
--------

### Using the program

The steps to actually do some work with the program involve telling the GPU to use the program, bind the appropriate data and configuration options, and finally draw something to the screen.


```js
// Use the program
gl.useProgram(program);

// Bind existing attribute data
gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// Draw a single triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
```

### Deleting the program

If there is an error linking the program or you wish to delete an existing program, then it is as simple as running `WebGLRenderingContext.deleteProgram()`. This frees the memory of the linked program.


```js
gl.deleteProgram(program);
```

Specifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.6 |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `WebGLShader`
* `WebGLRenderingContext.attachShader()`
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()`
* `WebGLRenderingContext.createShader()`
* `WebGLRenderingContext.deleteProgram()`
* `WebGLRenderingContext.deleteShader()`
* `WebGLRenderingContext.detachShader()`
* `WebGLRenderingContext.getAttachedShaders()`
* `WebGLRenderingContext.getProgramParameter()`
* `WebGLRenderingContext.getProgramInfoLog()`
* `WebGLRenderingContext.getShaderParameter()`
* `WebGLRenderingContext.getShaderPrecisionFormat()`
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()`
* `WebGLRenderingContext.isProgram()`
* `WebGLRenderingContext.isShader()`
* `WebGLRenderingContext.linkProgram()`
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()`
* `WebGLRenderingContext.validateProgram()`
AmbientLightSensor
==================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`AmbientLightSensor`** interface of the Sensor APIs returns the current light level or illuminance of the ambient light around the hosting device.

To use this sensor, the user must grant permission to the `'ambient-light-sensor'` device sensor through the Permissions API.

This feature may be blocked by a Permissions Policy set on your server.

EventTarget

Sensor

AmbientLightSensorConstructor
-----------

`AmbientLightSensor()` 
Experimental

Creates a new `AmbientLightSensor` object.

Instance properties
-------------------

`AmbientLightSensor.illuminance` 
Experimental

Returns the current light level in lux of the ambient light level around the hosting device.

Instance methods
----------------

*`AmbientLightSensor` doesn't have own methods. However, it inherits methods from its parent interfaces, `Sensor` and `EventTarget`.*

Events
------

*`AmbientLightSensor` doesn't have own events. However, it inherits events from its parent interface, `Sensor`.*

Example
-------


```js
if ("AmbientLightSensor" in window) {
  const sensor = new AmbientLightSensor();
  sensor.addEventListener("reading", (event) => {
    console.log("Current light level:", sensor.illuminance);
  });
  sensor.addEventListener("error", (event) => {
    console.log(event.error.name, event.error.message);
  });
  sensor.start();
}
```

Specifications
--------------

| Specification |
| --- |
| Ambient Light Sensor # ambient-light-sensor-interface |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.