recursal/MDN huggingface dataset:
Synthetic monitoring
====================

**Synthetic monitoring** involves monitoring the performance of a page in a 'laboratory' environment, typically with automation tooling in an environment that is as consistent as possible.

With a consistent baseline, synthetic monitoring is good for measuring the effects of code changes on performance. However, it doesn't necessarily reflect what users are experiencing.

Synthetic Monitoring involves deploying scripts to simulate the path an end-user might take through a web application, reporting back the performance of the simulator experiences. Examples of popular synthetic monitoring tools include WebPageTest and Lighthouse. The traffic measured is not of your actual users, but rather synthetically generated traffic collecting data on page performance.

Unlike RUM, synthetic monitoring provides a narrow view of performance that doesn't account for user differences, making it useful in getting basic data about an application's performance and spot-checking performance in development environments. Combined with other tools, such as network throttling, can provide excellent insight into potential problem areas.

See also
--------

* Real User Monitoring (RUM)
* Real User Monitoring (RUM) versus Synthetic Monitoring
* Beacon
CSS preprocessor
================

A **CSS preprocessor** is a program that lets you generate CSS from the preprocessor's own unique syntax.

There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

To use a CSS preprocessor, you must install a CSS compiler on your web server; Or use the CSS preprocessor to compile on the development environment, and then upload compiled CSS file to the web server.

See also
--------

* A few of most popular CSS preprocessors:
    + Sass
    + LESS
    + Stylus
    + PostCSS
* MDN Web Docs Glossary
    + CSS
First paint
===========

**First Paint** is the time between navigation and when the browser first renders pixels to the screen, rendering anything that is visually different from the default background color of the body. It is the first key moment in page load and will answer the question "Has the browser started to render the page?"

See also
--------

* First contentful paint
* `PerformancePaintTiming`
* Largest Contentful Paint
* First meaningful paint
Syntax error
============

An exception caused by the incorrect use of a pre-defined syntax. Syntax errors are detected while compiling or parsing source code.

For example, if you leave off a closing brace (`}`) when defining a JavaScript function, you trigger a syntax error. Browser development tools display JavaScript and CSS syntax errors in the console.

See also
--------

* Syntax error on Wikipedia
* `SyntaxError` JavaScript object
Inheritance
===========

Inheritance is a major feature of object-oriented programming. Data abstraction can be carried up several levels, that is, classes can have superclasses and subclasses.

As an app developer, you can choose which of the superclass's attributes and methods to keep and add your own, making class definition very flexible. Some languages let a class inherit from more than one parent (multiple inheritance).

See also
--------

* Inheritance and the prototype chain
Reporting directive
===================

**CSP reporting directives** are used in a `Content-Security-Policy` header and control the reporting process of CSP violations.

See Reporting directives for a complete list.

See also
--------

* Glossary
    + CSP
    + Fetch directive
    + Document directive
    + Navigation directive
* Reference
    + https://www.w3.org/TR/CSP/#directives-reporting
    + `upgrade-insecure-requests`
    + `block-all-mixed-content`
    + `Content-Security-Policy`
Quaternion
==========

A **quaternion** is the quotient of two 3D vectors and is used in 3D graphics and in accelerometer-based sensors to represent orientation or rotational data.

While mathematical quaternions are more involved than this, the **unit quaternions** (or **rotational quaternions**) used to represent rotation while using WebGL or WebXR, for example, are represented using the same syntax as a 3D point. As such, the type `DOMPoint` (or `DOMPointReadOnly`) is used to store quaternions.

See also
--------

* Quaternions and spatial rotation on Wikipedia
* Quaternion on Wikipedia
* `XRRigidTransform.orientation` in the WebXR Device API reference
Transient activation
====================

**Transient activation** (or "transient user activation") is a window state that indicates a user has recently pressed a button, moved a mouse, used a menu, or performed some other user interaction.

 This state is sometimes used as a mechanism for ensuring that a web API can only function if triggered by user interaction.
 For example, scripts cannot arbitrarily launch a popup that requires *transient activation* ⁠—it must be triggered from a UI element's event handler.

See Features gated by user activation for examples of APIs that require *transient activation*.

See the `UserActivation.isActive` property to programmatically access the current window's transient activation state.

**Note:** Transient activation expires after a timeout (if not renewed by further interaction), and may also be "consumed" by some APIs. See Sticky activation for a user activation that doesn't reset after it has been set initially.

See also
--------

* HTML Living Standard > Transient activation
* Sticky activation
* `UserActivation.isActive`
HTML
====

**HTML** (HyperText Markup Language) is a descriptive language that specifies webpage structure.

Brief history
-------------

In 1990, as part of his vision of the Web, Tim Berners-Lee defined the concept of hypertext, which Berners-Lee formalized the following year through a markup mainly based on SGML. The IETF began formally specifying HTML in 1993, and after several drafts released version 2.0 in 1995. In 1994 Berners-Lee founded the W3C to develop the Web. In 1996, the W3C took over the HTML work and published the HTML 3.2 recommendation a year later. HTML 4.0 was released in 1999 and became an ISO standard in 2000.

At that time, the W3C nearly abandoned HTML in favor of XHTML, prompting the founding of an independent group called WHATWG in 2004. Thanks to WHATWG, work on HTML continued: the two organizations released the first draft of HTML5 in 2008 and an official standard in 2014. The term "HTML5" is just a buzzword referring to modern web technologies which are part of the HTML Living Standard.

Concept and syntax
------------------

An HTML document is a plaintext document structured with elements. Elements are surrounded by matching opening and closing tags. Each tag begins and ends with angle brackets (`<>`). There are a few empty or *void* elements that cannot enclose any text, for instance `<img>`.

You can extend HTML tags with attributes, which provide additional information affecting how the browser interprets the element:

![Detail of the structure of an HTML element](/en-US/docs/Glossary/HTML/anatomy-of-an-html-element.png)

An HTML file is normally saved with an `.htm` or `.html` extension, served by a web server, and can be rendered by any Web browser.

See also
--------

* HTML on Wikipedia
* Our HTML tutorial
* The web course on codecademy.com
* The HTML documentation on MDN
* The HTML specification
UX
==

**UX** is an acronym that stands for User eXperience. It is the study of the interaction between users and a system. Its goal is to make a system easy to interact with from the user's point of view.

The system can be any kind of product or application that an end user is meant to interact with. UX studies undertaken on a web page for example can demonstrate whether it is easy for users to understand the page, navigate to different areas, and complete common tasks, and where such processes could have less friction.

See also
--------

* User experience on Wikipedia
Encapsulation
=============

Encapsulation is the packing of data and functions into one component (for example, a class) and then controlling access to that component to make a "blackbox" out of the object. Because of this, a user of that class only needs to know its interface (that is, the data and functions exposed outside the class), not the hidden implementation.

See also
--------

* Encapsulation on Wikipedia
Callback function
=================

A **callback function** is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

The consumer of a callback-based API writes a function that is passed into the API. The provider of the API (called the *caller*) takes the function and calls back (or executes) the function at some point inside the caller's body. The caller is responsible for passing the right parameters into the callback function. The caller may also expect a particular return value from the callback function, which is used to instruct further behavior of the caller.

There are two ways in which the callback may be called: *synchronous* and *asynchronous*. Synchronous callbacks are called immediately after the invocation of the outer function, with no intervening asynchronous tasks, while asynchronous callbacks are called at some point later, after an asynchronous operation has completed.

Understanding whether the callback is synchronously or asynchronously called is particularly important when analyzing side effects. Consider the following example:


```js
let value = 1;

doSomething(() => {
  value = 2;
});

console.log(value);
```


If `doSomething` calls the callback synchronously, then the last statement would log `2` because `value = 2` is synchronously executed; otherwise, if the callback is asynchronous, the last statement would log `1` because `value = 2` is only executed after the `console.log` statement.

Examples of synchronous callbacks include the callbacks passed to `Array.prototype.map()`, `Array.prototype.forEach()`, etc. Examples of asynchronous callbacks include the callbacks passed to `setTimeout()` and `Promise.prototype.then()`.

The Using promises guide has more information on the timing of asynchronous callbacks.

See also
--------

* Callback on Wikipedia
Parse
=====

Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the JavaScript engine inside browsers.

The browser parses HTML into a DOM tree. HTML parsing involves tokenization and tree construction. HTML tokens include start and end tags, as well as attribute names and values. If the document is well-formed, parsing it is straightforward and faster. The parser parses tokenized input into the document, building up the document tree.

When the HTML parser finds non-blocking resources, such as an image, the browser will request those resources and continue parsing. Parsing can continue when a CSS file is encountered, but `<script>` tags—particularly those without an `async` or `defer` attribute—blocks rendering, and pauses parsing of HTML.

When the browser encounters CSS styles, it parses the text into the CSS Object Model (or CSSOM), a data structure it then uses for styling layouts and painting. The browser then creates a render tree from both these structures to be able to paint the content to the screen. JavaScript is also downloaded, parsed, and then executed.

JavaScript parsing is done during compile time or whenever the parser is invoked, such as during a call to a method.

See also
--------

* Parse on Wikipedia
UTF-8
=====

UTF-8 (UCS Transformation Format 8) is the World Wide Web's most common character encoding. Each character is represented by one to four bytes. UTF-8 is backward-compatible with ASCII and can represent any standard Unicode character.

The first 128 UTF-8 characters precisely match the first 128 ASCII characters (numbered 0-127), meaning that existing ASCII text is already valid UTF-8. All other characters use two to four bytes. Each byte has some bits reserved for encoding purposes. Since non-ASCII characters require more than one byte for storage, they run the risk of being corrupted if the bytes are separated and not recombined.

See also
--------

* UTF-8 on Wikipedia
* FAQ about UTF-8 on Unicode website
CSRF
====

**CSRF** (Cross-Site Request Forgery) is an attack that impersonates a trusted user and sends a website unwanted commands.

This can be done, for example, by including malicious parameters in a URL behind a link that purports to go somewhere else:


```html
<img src="https://www.example.com/index.php?action=delete&id=123" />
```


For users who have modification permissions on `https://www.example.com`, the `<img>` element executes action on `https://www.example.com` without their noticing, even if the element is not at `https://www.example.com`.

There are many ways to prevent CSRF, such as implementing RESTful API, adding secure tokens, etc.

See also
--------

* Cross-site request forgery on Wikipedia
* Prevention measures
Statement
=========

In a computer programming language, a **statement** is a line of code commanding a task. Every program consists of a sequence of statements.

See also
--------

* Statement (computer science) on Wikipedia
* JavaScript statements and declarations
Web server
==========

A web server is a piece of software that often runs on a hardware server offering service to a user, usually referred to as the client. A server, on the other hand, is a piece of hardware that lives in a room full of computers, commonly known as a data center.

See also
--------

* Introduction to servers
* Server (computing) on Wikipedia
Quality values
==============

**Quality values**, or *q-values* and *q-factors*, are used to describe the order of priority of values in a comma-separated list. It is a special syntax allowed in some HTTP headers and in HTML.

The importance of a value is marked by the suffix `';q='` immediately followed by a value between `0` and `1` included, with up to three decimal digits, the highest value denoting the highest priority. When not present, the default value is `1`.

Examples
--------

The following syntax


```http
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
```


indicates the order of priority:

| Value | Priority |
| --- | --- |
| `text/html` and `application/xhtml+xml` | `1.0` |
| `application/xml` | `0.9` |
| `*/*` | `0.8` |

If there is no priority defined for the first two values, the order in the list is irrelevant. Nevertheless, with the same quality, more specific values have priority over less specific ones:


```http
text/html;q=0.8,text/*;q=0.8,*/*;q=0.8
```


| Value | Priority |
| --- | --- |
| `text/html` | `0.8` (but totally specified) |
| `text/*` | `0.8` (partially specified) |
| `*/*` | `0.8` (not specified) |

Some syntax, like the one of `Accept`, allow additional specifiers like `text/html;level=1`. These increase the specificity of the value. Their use is extremely rare.

More information
----------------

* HTTP headers using q-values in their syntax: `Accept`, `Accept-Encoding`, `Accept-Language`, `TE`, `Want-Digest`.
* Header field definitions.
Progressive web apps
====================

Progressive web applications (PWA) are applications that are built using web platform technologies, but that provide a user experience like that of a platform-specific app.

These kinds of apps enjoy all the best parts of the Web — such as discoverability via search engines, being linkable via URLs, and working across multiple form factors, but are progressively enhanced with modern APIs (such as Service Workers and Push).

These features include being installable, working offline, and being easy to sync with and re-engage the user from the server.

See also
--------

* Progressive web apps on MDN
* Progressive web apps on web.dev
SEO
===

**SEO** (Search Engine Optimization) is the process of making a website more visible in search results, also termed improving search rankings.

Search engines crawl the web, following links from page to page, and index the content found. When you search, the search engine displays the indexed content. Crawlers follow rules. If you follow those rules closely when doing SEO for a website, you give the site the best chances of showing up among the first results, increasing traffic and possibly revenue (for e-commerce and ads).

Search engines give some guidelines for SEO, but big search engines keep result ranking as a trade secret. SEO combines official search engine guidelines, empirical knowledge, and theoretical knowledge from science papers or patents.

SEO methods fall into three broad classes:

Technical

Tag the content using semantic HTML. When exploring the website, crawlers should only find the content you want indexed.

Copywriting

Write content using your visitors' vocabulary. Use text as well as images so that crawlers can understand the subject.

Popularity

You get most traffic when other established sites link to your site.

See also
--------

* SEO on Wikipedia
* Google Search Central
JSON type representation
========================

JSON is a convenient and widely used format for serializing objects, arrays, numbers, strings, booleans, and null.
 JSON does not support all data types allowed by JavaScript, which means that JavaScript objects that use these incompatible types cannot be directly serialized to JSON.

 The *JSON type representation* of a JSON-incompatible object is an equivalent JavaScript object with properties encoded such that the information *can* be serialized to JSON.
 This typically has the same properties as the original object for compatible data types, while incompatible properties are converted/serialized to compatible types.
 For example, buffer properties in the original object might be base64url-encoded to strings in the JSON-type representation.

 An object that cannot automatically be serialized to JSON using the `JSON.stringify()` method can define an instance method named `toJSON()` that returns the *JSON-type representation* of the original object.
 `JSON.stringify()` will then use `toJSON()` to get the object to stringify, instead of the original object.
 `PublicKeyCredential.toJSON()` and `Performance.toJSON()` are examples of this approach.

 A JSON string serialized in this way can be deserialized back to the *JSON-type representation* object using `JSON.parse()`.
 It is common to provide a converter method, such as `PublicKeyCredential.parseCreationOptionsFromJSON()`, to convert the *JSON-type representation* back to the original object.
Flexbox
=======

Flexbox is the commonly-used name for the CSS Flexible Box Layout Module, a layout model for displaying items in a single dimension — as a row or as a column.

In the specification, Flexbox is described as a layout model for user interface design. The key feature of Flexbox is the fact that items in a flex layout can grow and shrink. Space can be assigned to the items themselves, or distributed between or around the items.

Flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items.

See also
--------

### Property reference

* `align-content`
* `align-items`
* `align-self`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `justify-content`
* `order`
### Further reading

* *CSS Flexible Box Layout Module Level 1 Specification*
* CSS Flexbox Guide:
    + Basic Concepts of Flexbox
    + Relationship of flexbox to other layout methods
    + Aligning items in a flex container
    + Ordering flex items
    + Controlling Ratios of flex items along the main axis
    + Mastering wrapping of flex items
    + Typical use cases of flexbox
XQuery
======

**XQuery** is a computer language for updating, retrieving, and calculating data in XML databases.

See also
--------

* Official website
* XQuery on Wikipedia
Perceived performance
=====================

**Perceived performance** is a measure of how fast, responsive, and reliable a website *feels* to its users. The perception of how well a site is performing can have more impact on the user experience than the actual load and response times.

See also
--------

* Perceived performance
Gamut
=====

A color **gamut** is a subset of colors, usually representing the colors that a display or a printing device can represent.

No display or printer can represent the whole range of colors that a human eye can perceive. The device *gamut* represents the set that it supports.

Traditionally, in web development, the only gamut used was *sRGB* (Standard Red-Green-Blue), where each color is described using three bytes, one for each primary color. However, "wide-color" monitors and professional printers support a wider range of colors, that can't be represented using this gamut.

Since 2021, browsers have started to provide functionality for other gamuts, like *P3*, widely used in the movie industry, and *rec2020*.

Developers can define different sets of colors for devices supporting larger gamuts using the `color-gamut` media feature. They can describe colors outside the RGB gamut using specific CSS functions like `lch()` for the LCH cylindrical coordinate system, or `lab()` for the Lab coordinate system.

See also
--------

* *Gamut* on *Wikipedia*.
ASCII
=====

**ASCII** (*American Standard Code for Information Interchange*) is a character encoding standard of 128 7-bit used by computers for converting letters, numbers, punctuation, and control codes into digital form.

The first 33 ASCII code points are non-printing control codes including the carriage return, line feed, tab, and several obsolete non-printable codes stemming from its origin of representing telegraph codes. The other 95 are printable characters, including digits (0-9), lowercase (a-z) and uppercase (A-Z) letters, and punctuation symbols.

Many computer systems instead use Unicode, which has millions of code points, but the first 128 of these are the same as the ASCII set. UTF-8 superseded ASCII on the Web in 2007.

See also
--------

* ASCII on Wikipedia
XMLHttpRequest (XHR)
====================

`XMLHttpRequest` (XHR) is a JavaScript API to create HTTP requests. Its methods provide the ability to send network requests between the browser and a server.

The Fetch API is the modern replacement for XMLHttpRequest.

See also
--------

* The XMLHttpRequest API documentation.
Web standards
=============

Web standards are rules established by international standards bodies and defining how the Web works (and sometimes controlling the Internet as well).

Several standards bodies are responsible for defining different aspects of the Web, and all the standards must coordinate to keep the Web maximally usable and accessible. Web standards also must evolve to improve the current status and adapt to new circumstances.

This non-exhaustive list gives you an idea of which standards websites and network systems must conform to:

* **IETF** (Internet Engineering Task Force): Internet standards (STD), which among other things govern set-up and use of URIs, HTTP, and MIME
* **W3C**: specifications for markup language (e.g., HTML), style definitions (i.e., CSS), DOM, accessibility
* **IANA** (Internet Assigned Numbers Authority): name and number registries
* **Ecma Intl.:** scripting standards, most prominently for JavaScript
* **ISO** (International Organization for Standardization): standards governing a diverse array of aspects, including character encodings, website management, and user-interface design
See also
--------

* Web standards on Wikipedia