recursal/MDN huggingface dataset:
TextEncoder
===========

The **`TextEncoder`** interface takes a stream of code points as input and emits a stream of UTF-8 bytes.

**Note:** This feature is available in Web Workers

Constructor
-----------

`TextEncoder()`

Returns a newly constructed `TextEncoder` that will generate a byte stream with UTF-8 encoding.

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

*The `TextEncoder` interface doesn't inherit any properties.*

`TextEncoder.encoding` Read only 

Always returns `utf-8`.

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

*The `TextEncoder` interface doesn't inherit any methods*.

`TextEncoder.encode()`

Takes a string as input, and returns a `Uint8Array` containing UTF-8 encoded text.

`TextEncoder.encodeInto()`

 Takes a string to encode and a destination `Uint8Array` to put resulting UTF-8 encoded text into, and returns an object indicating the progress of the encoding.
 This is potentially more performant than the older `encode()` method.


Examples
--------


```js
const encoder = new TextEncoder();
const view = encoder.encode("€");
console.log(view); // Uint8Array(3) [226, 130, 172]
```

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

| Specification |
| --- |
| Encoding Standard # interface-textencoder |

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

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

See also
--------

* The `TextDecoder` interface describing the inverse operation.
* Node.js supports global export from v11.0.0
HTMLHtmlElement
===============

The **`HTMLHtmlElement`** interface serves as the root node for a given HTML document. This object inherits the properties and methods described in the `HTMLElement` interface.

You can retrieve the `HTMLHtmlElement` object for a given document by reading the value of the `document.documentElement` property.

EventTarget

Node

Element

HTMLElement

HTMLHtmlElementInstance properties
-------------------

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

`HTMLHtmlElement.version` 
Deprecated

A string representing the version of the HTML Document Type Definition (DTD) that governs this document. This property should not be used any more as it is non-conforming. Omit it.

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

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

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

| Specification |
| --- |
| HTML Standard # htmlhtmlelement |

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

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

See also
--------

* HTML element implementing this interface: `<html>`.
Channel Messaging API
=====================

The **Channel Messaging API** allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, two documents via a `SharedWorker`, or two workers) to communicate directly, passing messages between one another through two-way channels (or pipes) with a port at each end.

**Note:** This feature is available in Web Workers

Concepts and usage
------------------

A message channel is created using the `MessageChannel()` constructor. Once created, the two ports of the channel can be accessed through the `MessageChannel.port1` and `MessageChannel.port2` properties (which both return `MessagePort` objects.) The app that created the channel uses `port1`, and the app at the other end of the port uses `port2` — you send a message to `port2`, and transfer the port over to the other browsing context using `window.postMessage` along with two arguments (the message to send, and the object to transfer ownership of, in this case the port itself.)

When these transferable objects are transferred, they are no longer usable on the context they previously belonged to. A port, after it is sent, can no longer be used by the original context.

The other browsing context can listen for the message using `onmessage`, and grab the contents of the message using the event's `data` attribute. You could then respond by sending a message back to the original document using `MessagePort.postMessage`.

When you want to stop sending messages down the channel, you can invoke `MessagePort.close` to close the ports.

Find out more about how to use this API in Using channel messaging.

Interfaces
----------

`MessageChannel`

Creates a new message channel to send messages across.

`MessagePort`

Controls the ports on the message channel, allowing sending of messages from one port and listening out for them arriving at the other.

Examples
--------

* We have published a channel messaging basic demo on GitHub (run it live too), which shows a really simple single message transfer between a page and an embedded `<iframe>`.
* You can also see a multimessaging demo (run this live), which shows a slightly more complex setup that can send multiple messages between main page and IFrame.
Specifications
--------------

| Specification |
| --- |
| HTML Standard # channel-messaging |

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

### api.MessageChannel

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

### api.MessagePort

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

See also
--------

* Using channel messaging
* Web Workers API
* Broadcast Channel API
EcKeyGenParams
==============

The **`EcKeyGenParams`** dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.generateKey()`, when generating any elliptic-curve-based key pair: that is, when the algorithm is identified as either of ECDSA or ECDH.

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

`name`

A string. This should be set to `ECDSA` or `ECDH`, depending on the algorithm you want to use.

`namedCurve`

A string representing the name of the elliptic curve to use. This may be any of the following names for NIST-approved curves:

* `P-256`
* `P-384`
* `P-521`

Examples
--------

See the examples for `SubtleCrypto.generateKey()`.

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

| Specification |
| --- |
| Web Cryptography API # dfn-EcKeyGenParams |

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

Browsers that support the "ECDH" or "ECDSA" algorithms for the `SubtleCrypto.generateKey()` method will support this type.

See also
--------

* `SubtleCrypto.generateKey()`.
DOMQuad
=======

A `DOMQuad` is a collection of four `DOMPoint`s defining the corners of an arbitrary quadrilateral. Returning `DOMQuad`s lets `getBoxQuads()` return accurate information even when arbitrary 2D or 3D transforms are present. It has a handy `bounds` attribute returning a `DOMRectReadOnly` for those cases where you just want an axis-aligned bounding rectangle.

Constructor
-----------

`DOMQuad()`

Creates a new `DOMQuad` object.

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

p1,p2,p3,p4 Read only 

are `DOMPoint` objects for each of the `DOMQuad` object's four corners.

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

`DOMQuad.fromRect()`

Returns a new `DOMQuad` object based on the passed set of coordinates.

`DOMQuad.fromQuad()`

Returns a new `DOMQuad` object based on the passed set of coordinates.

`DOMQuad.getBounds()`

Returns a `DOMRect` object with the coordinates and dimensions of the `DOMQuad` object.

`DOMQuad.toJSON()`

Returns a JSON representation of the `DOMQuad` object.

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # DOMQuad |

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

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

The **`VideoTrackList`** interface is used to represent a list of the video tracks contained within a `<video>` element, with each track represented by a separate `VideoTrack` object in the list.

Retrieve an instance of this object with `HTMLMediaElement.videoTracks`. The individual tracks can be accessed using array syntax or functions such as `forEach()` for example.

EventTarget

VideoTrackListInstance properties
-------------------

*This interface also inherits properties from its parent interface, `EventTarget`.*

`length` Read only 

The number of tracks in the list.

`selectedIndex` Read only 

The index of the currently selected track, if any, or `−1` otherwise.

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

*This interface also inherits methods from its parent interface, `EventTarget`.*

`getTrackById()`

Returns the `VideoTrack` found within the `VideoTrackList` whose `id` matches the specified string. If no match is found, `null` is returned.

Events
------

`addtrack`

 Fired when a new video track has been added to the media element.
 Also available via the `onaddtrack` property.


`change`

 Fired when a video track has been made active or inactive.
 Also available via the `onchange` property.


`removetrack`

 Fired when a new video track has been removed from the media element.
 Also available via the `onremovetrack` property.


Usage notes
-----------

In addition to being able to obtain direct access to the video tracks present on a media element, `VideoTrackList` lets you set event handlers on the `addtrack` and `removetrack` events, so that you can detect when tracks are added to or removed from the media element's stream.

Examples
--------

### Getting a media element's video track list

To get a media element's `VideoTrackList`, use its `videoTracks` property.


```js
const videoTracks = document.querySelector("video").videoTracks;
```

### Monitoring track count changes

In this example, we have an app that displays information about the number of channels available. To keep it up to date, handlers for the `addtrack` and `removetrack` events are set up.


```js
videoTracks.onaddtrack = updateTrackCount;
videoTracks.onremovetrack = updateTrackCount;

function updateTrackCount(event) {
  trackCount = videoTracks.length;
  drawTrackCountIndicator(trackCount);
}
```

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

| Specification |
| --- |
| HTML Standard # audiotracklist-and-videotracklist-objects |

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

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

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

The **`MerchantValidationEvent`** interface of the Payment Request API enables a merchant to verify themselves as allowed to use a particular payment handler.

Learn more about merchant validation.

Constructor
-----------

`MerchantValidationEvent()` 
Deprecated

Creates a new `MerchantValidationEvent` object describing a `merchantvalidation` event that will be sent to the payment handler to request that it validate the merchant.

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

`MerchantValidationEvent.methodName` 
Deprecated

A string providing a unique payment method identifier for the payment handler that's requiring validation. This may be either one of the standard payment method identifier strings or a URL that both identifies and handles requests for the payment handler, such as `https://apple.com/apple-pay`.

`MerchantValidationEvent.validationURL` 
Deprecated

A string specifying a URL from which the site or app can fetch payment handler specific validation information. Once this data is retrieved, the data (or a promise resolving to the validation data) should be passed into `complete()` to validate that the payment request is coming from an authorized merchant.

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

`MerchantValidationEvent.complete()` 
Deprecated

Pass the data retrieved from the URL specified by `validationURL` into `complete()` to complete the validation process for the `PaymentRequest`.

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

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

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

The **`ContentIndexEvent`** interface of the content index defines the object used to represent the `contentdelete` event.

This event is sent to the global scope of a `ServiceWorker`. It contains the id of the indexed content to be removed.

The `contentdelete` event is only fired when the deletion happens due to interaction with the browser's built-in user interface. It is not fired when the `ContentIndex.delete` method is called.

Event

ExtendableEvent

ContentIndexEventConstructor
-----------

`ContentIndexEvent()` 
Experimental

Creates and returns a new `ContentIndexEvent` object whose type and other options are configured as specified.

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

*In addition to the properties listed below, this interface inherits the properties of its parent interface, `ExtendableEvent`.*

`id` Read only  
Experimental

A `String` which identifies the deleted content index via it's `id`.

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

*While `ContentIndexEvent` offers no methods of its own, it inherits any specified by its parent interface, `ExtendableEvent`.*

Examples
--------

This example shows the service worker script listening for the `contentdelete` event and logs the removed content index id.


```js
self.addEventListener("contentdelete", (event) => {
  console.log(event.id);

  // logs content index id, which can then be used to determine what content to delete from your cache
});
```

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

| Specification |
| --- |
| Content Index # content-index-event |

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

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

See also
--------

* An introductory article on the Content Index API
* An app which uses the Content Index API to list and remove 'save for later' content
* Service Worker API, along with information about Cache and CacheStorage
XRSessionEvent
==============

The WebXR Device API's **`XRSessionEvent`** interface describes an event which indicates the change of the state of an `XRSession`. These events occur, for example, when the session ends or the visibility of its context changes.

Event

XRSessionEventConstructor
-----------

`XRSessionEvent()`

Creates and returns a new `XRSessionEvent` object.

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

*In addition to properties inherited from its parent interface, `Event`, `XRSessionEvent` provides the following:*

`session` Read only 

The `XRSession` to which the event refers.

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

*While `XRSessionEvent` defines no methods, it inherits methods from its parent interface, `Event`.*

Session event types
-------------------

*The following events are represented using the `XRSessionEvent` interface, and are permitted values for its `type` property.*

`end`

Fired at the session when it has ended, after being terminated by the application or the user agent.

`visibilitychange`

Fired at the session whenever its visibility state changes.

Examples
--------

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) {
    case "visible":
    case "visible-blurred":
      mySessionVisible(true);
      break;
    case "hidden":
      mySessionVisible(false);
      break;
  }
});
```

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

| Specification |
| --- |
| WebXR Device API # xrsessionevent-interface |

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

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

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

 The **`Lock`** interface of the Web Locks API provides the name and mode of a lock.
 This may be a newly requested lock that is received in the callback to `LockManager.request()`, or a record of an active or queued lock returned by `LockManager.query()`.

**Note:** This feature is available in Web Workers

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

`Lock.mode` Read only 

 Returns the access mode passed to `LockManager.request()` when the lock was requested.
 The mode is either `"exclusive"` (the default) or `"shared"`.


`Lock.name` Read only 

Returns the name passed to `LockManager.request()` when the lock was requested.

Examples
--------

 The following examples show how the mode and name properties are passed in the call to `LockManager.request()`.
 `LockManager` is the object returned by `navigator.locks`.


```js
navigator.locks.request("net\_db\_sync", show_lock_properties);
navigator.locks.request(
  "another\_lock",
  { mode: "shared" },
  show_lock_properties,
);

function show\_lock\_properties(lock) {
  console.log(`The lock name is: ${lock.name}`);
  console.log(`The lock mode is: ${lock.mode}`);
}
```

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

| Specification |
| --- |
| Web Locks API # api-lock |

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

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

Most modern mobile devices include vibration hardware, which lets software code provide physical feedback to the user by causing the device to shake. The **Vibration API** offers Web apps the ability to access this hardware, if it exists, and does nothing if the device doesn't support it.

Describing vibrations
---------------------

Vibration is described as a pattern of on-off pulses, which may be of varying lengths. The pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a pattern of vibrations and pauses. Vibration is controlled with a single method: `Navigator.vibrate()`.

### A single vibration

You may pulse the vibration hardware one time by specifying either a single value or an array consisting of only one value:


```js
navigator.vibrate(200);
navigator.vibrate([200]);
```


Both of these examples vibrate the device for 200 ms.

### Vibration patterns

An array of values describes alternating periods in which the device is vibrating and not vibrating. Each value in the array is converted to an integer, then interpreted alternately as the number of milliseconds the device should vibrate and the number of milliseconds it should not be vibrating. For example:


```js
navigator.vibrate([200, 100, 200]);
```


This vibrates the device for 200 ms, then pauses for 100 ms before vibrating the device again for another 200 ms.

You may specify as many vibration/pause pairs as you like, and you may provide either an even or odd number of entries; it's worth noting that you don't have to provide a pause as your last entry since the vibration automatically stops at the end of each vibration period.

### Canceling existing vibrations

Calling `Navigator.vibrate()` with a value of `0`, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern.

### Continued vibrations

Some basic `setInterval` and `clearInterval` action will allow you to create persistent vibration:


```js
let vibrateInterval;

// Starts vibration at passed in level
function startVibrate(duration) {
  navigator.vibrate(duration);
}

// Stops vibration
function stopVibrate() {
  // Clear interval and stop persistent vibrating
  if (vibrateInterval) clearInterval(vibrateInterval);
  navigator.vibrate(0);
}

// Start persistent vibration at given duration and interval
// Assumes a number value is given
function startPersistentVibrate(duration, interval) {
  vibrateInterval = setInterval(() => {
    startVibrate(duration);
  }, interval);
}
```


Of course, the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).

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

| Specification |
| --- |
| Vibration API (Second Edition) # dom-navigator-vibrate |

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

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

See also
--------

* `Navigator.vibrate()`
HmacImportParams
================

The **`HmacImportParams`** dictionary of the Web Crypto API represents the object that should be passed as the `algorithm` parameter into `SubtleCrypto.importKey()` or `SubtleCrypto.unwrapKey()`, when generating a key for the HMAC algorithm.

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

`name`

A string. This should be set to `HMAC`.

`hash`

A string representing the name of the digest function to use. The can take a value of `SHA-256`, `SHA-384`, or `SHA-512`.

**Warning:** Although you can technically pass `SHA-1` here, this is strongly discouraged as it is considered vulnerable.

`length` Optional

A `Number` representing the length in bits of the key. If this is omitted the length of the key is equal to the length of the digest generated by the digest function you have chosen. Unless you have a good reason to use a different length, omit this property and use the default.

Examples
--------

See the examples for `SubtleCrypto.importKey()`.

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

| Specification |
| --- |
| Web Cryptography API # dfn-HmacImportParams |

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

Browsers that support the "HMAC" algorithm for the `SubtleCrypto.importKey()`, `SubtleCrypto.unwrapKey()` methods will support this type.

See also
--------

* `SubtleCrypto.importKey()`.
* `SubtleCrypto.unwrapKey()`.