TURN - MDN Web Docs Glossary: Definitions of Web-related terms

TURN
====

**TURN** (Traversal Using Relays around NAT) is a protocol enabling a computer to receive and send data from behind a Network Address Translator (NAT) or firewall. TURN is used by WebRTC to allow any two devices on the Internet to enter a peer-to-peer connection.

See also
--------

* TURN on Wikipedia
* WebRTC protocols
* Specification
* Specification update for IPv6


Simple response header - MDN Web Docs Glossary: Definitions of Web-related terms

Simple response header
======================

Old term for CORS-safelisted response header.


Engine - MDN Web Docs Glossary: Definitions of Web-related terms

Engine
======

The JavaScript engine is an interpreter that parses and executes a JavaScript program.

See also
--------

* JavaScript engine on Wikipedia


Lossy compression - MDN Web Docs Glossary: Definitions of Web-related terms

Lossy compression
=================

**Lossy compression**, or irreversible compression, is a data-compression method that uses inexact approximations and partial-data discarding to represent content. In simpler terms: lossy compression causes data from the initial file to be lost, possibly causing degradation in quality. The process of such compression is irreversible; once lossy compression of the content has been performed, the content cannot be restored to its original state. Therefore, content that has undergone lossy compression should generally not be further edited.

Lossy compression is widely used in image formats.

![Lossy compression image](/en-US/docs/Glossary/Lossy_compression/2019-11-18.png)

Although there is no obvious difference quality between the two images above, the size of the second image has been significantly reduced, using lossy compression.

See also
--------

* Lossless compression


Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms

Vendor Prefix
=============

Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers' code during the standardization process.

Web developers included prefixed features on production websites, despite their experimental nature. This made it more difficult for browser vendors to ensure compatibility while working on new features. Including prefixed features also harmed smaller browser vendors who ended up having to add other browsers' prefixes in order to render popular websites.

Now, experimental features in browsers are "put behind a flag". This allows developers to change browser configurations to test upcoming features. Browsers now add experimental features behind user-controlled flags or preferences. Flags can be added for smaller specifications enabling reaching a stable state much more quickly.

CSS prefixes
------------

The most common browser CSS prefixes you will see in older code bases include:

* `-webkit-` (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers including Firefox for iOS; basically, any WebKit or Chromium-based browser)
* `-moz-` (Firefox)
* `-o-` (old pre-WebKit versions of Opera)
* `-ms-` (Internet Explorer and Microsoft Edge, before Chromium)

Sample usage:

```css
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
```

If you encounter the above code in a code base, you can safely remove all but the last line. All browsers support transitions without vendor prefixes:

```css
transition: all 4s ease;
```

API prefixes
------------

Historically, browser vendors have also used prefixes for experimental APIs. If an entire interface was experimental, then the interface's name was prefixed (but not the properties or methods within). If an experimental property or method was added to a standardized interface, then the individual method or property was prefixed.

### Interface prefixes

Prefixes for interface names are upper-cased:

* `WebKit` (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers (including Firefox for iOS); basically, any WebKit and Chromium-based browser)
* `Moz` (Firefox)
* `O` (Older, pre-WebKit, versions of Opera)
* `MS` (Internet Explorer and Microsoft Edge, before Chromium)
### Property and method prefixes

The prefixes for properties and methods are lower-case:

* `webkit` (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers (including Firefox for iOS); basically, any WebKit and Chromium-based browser)
* `moz` (Firefox)
* `o` (Old, pre-WebKit, versions of Opera)
* `ms` (Internet Explorer and Microsoft Edge, before Chromium)

Sample usage:

```js
window.requestAnimationFrame =
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame;
```

If you encounter the above code in a code base, you can safely remove all but the first line. All browsers support `requestAnimationFrame` without vendor prefixes, and without `window`:

```js
requestAnimationFrame(callback);
```

See also
--------

* `-moz-` vendor-prefixed CSS extensions
* `-webkit-` vendor-prefixed CSS extensions
* Browser prefixes on Wikipedia


ARPA - MDN Web Docs Glossary: Definitions of Web-related terms

ARPA
====

**.arpa** (address and routing parameter area) is a top-level domain in the Domain Name System (DNS) used for Internet infrastructure purposes, especially reverse DNS lookup (i.e., find the domain name for a given IP address).

The name comes from **ARPA**, currently known as DARPA, the Defense Advanced Research Projects Agency. DARPA is credited with developing precursors to the Internet (ARPANET), GPS, artificial intelligence, and virtual reality.

TLD was designed at DARPA during a time when it was called ARPA, hence the `.arpa` domain name.

The most prominent `.arpa` domains include `addr.arpa` and `ip6.arpa`, which provide namespaces for reverse DNS lookup of IPv4 and IPv6 addresses respectively.

See also
--------

* ARPANET
* Official website
* .arpa on Wikipedia


WebKit - MDN Web Docs Glossary: Definitions of Web-related terms

WebKit
======

*WebKit* is a framework that displays properly-formatted webpages based on their markup. Apple Safari depends on WebKit, and so do many mobile browsers (since WebKit is highly portable and customizable).

WebKit began life as a fork of KDE's KHTML and KJS libraries, but many individuals and companies have since contributed (including KDE, Apple, Google, and Nokia).

WebKit is an Apple trademark, and the framework is distributed under a BSD-form license. However, two important components fall under the LGPL: the **WebCore** rendering library and the **JavaScriptCore** engine.

See also
--------

* WebKit on Wikipedia
* WebKit CSS extensions


LGPL - MDN Web Docs Glossary: Definitions of Web-related terms

LGPL
====

LGPL (GNU Lesser General Public License) is a free software license published by the Free Software Foundation. The LGPL provides a more permissive alternative for the strictly copyleft GPL. While any derivative work using a GPL-licensed program must be released under the same terms (free to use, share, study, and modify), the LGPL only requires the LGPL-licensed component of the derivative program to continue using the LGPL, not the whole program. LGPL is usually used to license shared components such as libraries (`.dll`, `.so`, `.jar`, etc.).

See also
--------

* GNU LGPL on Wikipedia
* LGPL License text on gnu.org


RSS - MDN Web Docs Glossary: Definitions of Web-related terms

RSS
===

**RSS** (Really Simple Syndication) refers to several XML document formats designed for publishing site updates. When you subscribe to a website's RSS feed, the website sends information and updates to your RSS reader in an RSS document called a *feed*, so you don't need to check all your favorite websites manually.

See also
--------

* RSS on Wikipedia
* Latest specification


Main thread - MDN Web Docs Glossary: Definitions of Web-related terms

Main thread
===========

The **main thread** is where a browser processes user events and paints. By default, the browser uses a single thread to run all the JavaScript in your page, as well as to perform layout, reflows, and garbage collection. This means that long-running JavaScript functions can block the thread, leading to an unresponsive page and a bad user experience.

Unless intentionally using a web worker, such as a service worker, JavaScript runs on the main thread, so it's easy for a script to cause delays in event processing or painting. The less work required of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user.

See also
--------

* Asynchronous JavaScript
* Web worker API
* Service worker API
* Glossary
    + Thread


Unicode - MDN Web Docs Glossary: Definitions of Web-related terms

Unicode
=======

Unicode is a standard character set that numbers and defines characters from the world's different languages, writing systems, and symbols.

By assigning each character a number, programmers can create character encodings, to let computers store, process, and transmit any combination of languages in the same file or program.

Before Unicode, it was difficult and error-prone to mix languages in the same data. For example, one character set would store Japanese characters, and another would store the Arabic alphabet. If it was not clearly marked which parts of the data were in which character set, other programs and computers would display the text incorrectly, or damage it during processing. If you've ever seen text where characters like curly quotes (“”) were replaced with gibberish like `Ã‚Â£`, then you've seen this problem, known as Mojibake.

The most common Unicode character encoding on the Web is UTF-8. Other encodings exist, like UTF-16 or the obsolete UCS-2, but UTF-8 is recommended.

See also
--------

* Unicode on Wikipedia
* The Unicode Standard: A Technical Introduction


Binding - MDN Web Docs Glossary: Definitions of Web-related terms

Binding
=======

In programming, a **binding** is an association of an identifier with a value. Not all bindings are variables — for example, function parameters and the binding created by the `catch (e)` block are not "variables" in the strict sense. In addition, some bindings are implicitly created by the language — for example, `this` and `new.target` in JavaScript.

A binding is mutable if it can be re-assigned, and immutable otherwise; this does *not* mean that the value it holds is immutable.

A binding is often associated with a scope. Some languages allow re-creating bindings (also called redeclaring) within the same scope, while others don't; in JavaScript, whether bindings can be redeclared depends on the construct used to create the binding.

See also
--------

* `var`
* `let`
* `const`
* `function`
* `class`


Submit button - MDN Web Docs Glossary: Definitions of Web-related terms

Submit button
=============

A **submit button** is an element in HTML that can be used to submit a `<form>`. The native submit button elements are:

* `<button>` (its default `type` is `"submit"`)
* `<input type="submit">`
* `<input type="image">`

In addition to submitting a form, a submit button can affect the form's behavior and what data is sent.

Overriding the form's behavior
------------------------------

Submit buttons can override the form's submission behavior through various attributes:

* `formaction`: Override the `action` attribute of the form.
* `formenctype`: Override the `enctype` attribute of the form.
* `formmethod`: Override the `method` attribute of the form.
* `formnovalidate`: Override the `novalidate` attribute of the form.
* `formtarget`: Override the `target` attribute of the form.
Form data entries
-----------------

If the submit button is a `<button>` or `<input type="submit">` and has a `name` attribute, the form data set will include an entry for its `name` and `value`.

If the submit button is an `<input type="image">`, the form data set will include entries for the X and Y coordinates that the user clicked on (e.g. `x=100&y=200` or `buttonName.x=123&buttonName.y=234`).

See also
--------

* Basic native form controls
* Sending form data


Raster image - MDN Web Docs Glossary: Definitions of Web-related terms

Raster image
============

A ***raster image*** is an image file defined as a grid of pixels. They're also referred to as *bitmaps*. Common raster image formats on the Web are JPEG, PNG, GIF, and ICO.

Raster image files usually contain one set of dimensions, but the ICO and CUR formats, used for favicons and CSS cursor images, can contain multiple sizes.

See also
--------

* Vector images


Proxy server - MDN Web Docs Glossary: Definitions of Web-related terms

Proxy server
============

A **proxy server** is an intermediate program or computer used when navigating through different networks of the Internet. They facilitate access to content on the World Wide Web. A proxy intercepts requests and serves back responses; it may forward the requests, or not (for example in the case of a cache), and it may modify it (for example changing its headers, at the boundary between two networks).

A proxy can be on the user's local computer, or anywhere between the user's computer and a destination server on the Internet. In general there are two main types of proxy servers:

* A **forward proxy** that handles requests from and to anywhere on the Internet.
* A **reverse proxy** taking requests from the Internet and forwarding them to servers in an internal network.
See also
--------

* Proxy servers and tunneling
* Proxy server on Wikipedia


RTCP (RTP Control Protocol) - MDN Web Docs Glossary: Definitions of Web-related terms

RTCP (RTP Control Protocol)
===========================

The **RTP Control Protocol** (**RTCP**) is a partner to the RTP protocol. RTCP is used to provide control and statistical information about an RTP media streaming session.

This lets control and statistics packets be separated logically and functionally from the media streaming while using the underlying packet delivery layer to transmit the RTCP signals as well as the RTP and media contents.

RTCP periodically transmits control packets to all of an RTP session's participants, using the same mechanism that is being used to transmit the data packets. That underlying protocol handles the multiplexing of the data and control packets and may use separate network ports for each type of packet.

See also
--------

* Introduction to the Real-time Transport Protocol
* RTP Control Protocol
* RFC 3550, section 6: RFC 3550 Section 6


Polymorphism - MDN Web Docs Glossary: Definitions of Web-related terms

Polymorphism
============

Polymorphism is the presentation of one interface for multiple data types.

For example, integers, floats, and doubles are implicitly polymorphic: regardless of their different types, they can all be added, subtracted, multiplied, and so on.

In the case of OOP, by making the class responsible for its code as well as its own data, polymorphism can be achieved in that each class has its own function that (once called) behaves properly for any object.

See also
--------

* Polymorphism on Wikipedia


XSLT - MDN Web Docs Glossary: Definitions of Web-related terms

XSLT
====

*eXtensible Stylesheet Language Transformations* (**XSLT**) is a declarative language used to convert XML documents into other XML documents, HTML, PDF, plain text, and so on.

XSLT has its own processor that accepts XML input, or any format convertible to an XQuery and XPath Data Model. The XSLT processor produces a new document based on the XML document and an XSLT stylesheet, making no changes to the original files in the process.

See also
--------

* XSLT on Wikipedia
* XSLT documentation on MDN


Object - MDN Web Docs Glossary: Definitions of Web-related terms

Object
======

In JavaScript, objects can be seen as a collection of properties. With the object literal syntax, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using *key* values. A *key* value is either a String value or a Symbol value.

There are two types of object properties: The *data* property and the *accessor* property.

**Note:** It's important to recognize it's accessor *property* — not accessor *method*. We can give a JavaScript object class-*like* accessors by using a function as a value — but that doesn't make the object a class.

See also
--------

* Detailed explanation of JavaScript objects in the JavaScript data types and data structures article
* `Object` in the JavaScript reference


ATAG - MDN Web Docs Glossary: Definitions of Web-related terms

ATAG
====

ATAG (Authoring Tool Accessibility Guidelines) is a W3C recommendation for building accessible-authoring tools that produce accessible contents.

See also
--------

* ATAG as part of the Web Accessibility Initiative on WikiPedia
* Authoring Tool Accessibility Guidelines (ATAG) Overview
* The ATAG 2.0 recommendation


Event - MDN Web Docs Glossary: Definitions of Web-related terms

Event
=====

Events are assets generated by DOM elements, which can be manipulated by a JavaScript code.

See also
--------

* Event documentation on MDN
* Official website
* DOM Events on Wikipedia


Tree shaking - MDN Web Docs Glossary: Definitions of Web-related terms

Tree shaking
============

**Tree shaking** is a term commonly used within a JavaScript context to describe the removal of dead code.

It relies on the import and export statements to detect if code modules are exported and imported for use between JavaScript files.

In modern JavaScript applications, we use module bundlers (e.g., webpack or Rollup) to automatically remove dead code when bundling multiple JavaScript files into single files. This is important for preparing code that is production ready, for example with clean structures and minimal file size.

See also
--------

* "Benefits of dead code elimination during bundling" in Axel Rauschmayer's book: "Exploring JS: Modules"
* Tree shaking implementation with webpack


SISD - MDN Web Docs Glossary: Definitions of Web-related terms

SISD
====

SISD is short for **Single Instruction/Single Data** which is one classification of computer architectures. In SISD architecture, a single processor executes a single instruction and operates on a single data point in memory.

See also SIMD for a parallel architecture that allows one same operation to be performed on multiple data points.

See also
--------

* SISD on Wikipedia


Dominator - MDN Web Docs Glossary: Definitions of Web-related terms

Dominator
=========

In graph theory, node A dominates node B if every path from the root node to B passes through A.

This concept is important for garbage collection because it means that B is only reachable through A. So if the garbage collector found A to be unreachable and eligible for reclaiming, than B would also be unreachable and eligible for reclaiming. So objects that A dominates contribute to the retained size of A: that is, the total amount of memory that could be freed if A itself were freed.

See also
--------

* Dominator on Wikipedia
* Dominators
* Garbage collection


Script-supporting element - MDN Web Docs Glossary: Definitions of Web-related terms

Script-supporting element
=========================

In an HTML document, **script-supporting elements** are those elements that don't directly contribute to the appearance or layout of the page; instead, they're either scripts or contain information that's only used by scripts.

These elements may be important, but do not affect the displayed page unless the page's scripts explicitly cause them to do so.

There are only two script-supporting elements: `<script>` and `<template>`.

See also
--------

Script-supporting elements


Largest contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms

Largest contentful paint
========================

The **Largest Contentful Paint** (LCP) performance metric provides the render time of the largest image or text block visible within the viewport, recorded from when the page first begins to load.

The following elements are considered when determining the LCP:

* `<img>` elements.
* `<image>` elements inside an SVG.
* The poster images of `<video>` elements.
* Elements with a `background-image`.
* Groups of text nodes, such as `<p>`.
See also
--------

* `LargestContentfulPaint`
* First contentful paint
* First paint


Repaint - MDN Web Docs Glossary: Definitions of Web-related terms

Repaint
=======

**Repaint** happens when a browser redraws a web page to show the visual updates resulting from a UI change, such as after an update on an interactive site. This usually follows reflowing, which is when the browser recalculates the position and geometry of certain parts of a web page.

See also
--------

* Reflow
* Understanding Reflow and Repaint in the browser on dev.to (2020)


Gecko - MDN Web Docs Glossary: Definitions of Web-related terms

Gecko
=====

**Gecko** is the layout engine developed by the Mozilla Project and used in many apps/devices, including Firefox and Firefox OS.

Web browsers need software called a layout engine to interpret HTML, CSS, JavaScript, and embedded content (like images) and draw everything to your screen. Besides this, Gecko makes sure associated APIs work well on every operating system Gecko supports, and that appropriate APIs are exposed only to relevant support targets. This means that Gecko includes, among other things, a networking stack, graphics stack, layout engine, a JavaScript virtual machine, and porting layers.

Since all Firefox OS apps are Web apps, Firefox OS uses Gecko as its app runtime as well.

See also
--------

* Gecko on Wikipedia


Descriptor (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms

Descriptor (CSS)
================

A **CSS descriptor** defines the characteristics of an at-rule. At-rules may have one or multiple descriptors. Each descriptor has:

* A name
* A value, which holds the component values
* An "!important" flag, which in its default state is unset


Shim - MDN Web Docs Glossary: Definitions of Web-related terms

Shim
====

A **shim** is a piece of code used to correct the behavior of code that already exists, usually by adding new API that works around the problem. This differs from a polyfill, which implements a new API that is not supported by the stock browser as shipped.

See also
--------

* Shim on Wikipedia


Null - MDN Web Docs Glossary: Definitions of Web-related terms

Null
====

In computer science, a **`null`** value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address. The meaning of a null reference varies among language implementations.

In JavaScript, `null` is marked as one of the primitive values, because its behavior is seemingly primitive. However, when using the `typeof` operator, it returns `"object"`.

```js
console.log(typeof null); // "object"
```

This is considered a bug, but one which cannot be fixed because it will break too many scripts.

See also
--------

* JavaScript data types
* The JavaScript global object: `null`
* Null pointer on Wikipedia
* **Glossary**
    + JavaScript
    + string
    + number
    + bigint
    + boolean
    + null
    + undefined
    + symbol


Cryptanalysis - MDN Web Docs Glossary: Definitions of Web-related terms

Cryptanalysis
=============

**Cryptanalysis** is the branch of cryptography that studies how to break codes and cryptosystems. Cryptanalysis creates techniques to break ciphers, in particular by methods more efficient than a brute-force search. In addition to traditional methods like frequency analysis and index of coincidence, cryptanalysis includes more recent methods, like linear cryptanalysis or differential cryptanalysis, that can break more advanced ciphers.

See also
--------

* Cryptanalysis on Wikipedia


Python - MDN Web Docs Glossary: Definitions of Web-related terms

Python
======

**Python** is a high level general-purpose programming language. It uses a multi-paradigm approach, meaning it supports procedural, object-oriented, and some functional programming constructs.

It was created by Guido van Rossum as a successor to another language (called ABC) between 1985 and 1990, and is currently used on a large array of domains like web development, desktop applications, data science, DevOps, and automation/productivity.

Python is developed under an OSI-approved open source license, making it freely usable and distributable, even for commercial use. Python's license is administered by the Python Software Foundation.

See also
--------

* Python on Wikipedia
* Official Python docs tutorials
* Tutorials Point Python tutorial
* AlphaCodingSkills Python Tutorial
* Django Web Framework (Python) on MDN
* Glossary
    + Java
    + JavaScript
    + PHP
    + Python
    + Ruby


Pseudocode - MDN Web Docs Glossary: Definitions of Web-related terms

Pseudocode
==========

Pseudocode refers to code-like syntax that is generally used to indicate to humans how some code syntax works, or illustrate the design of an item of code architecture. It **won't** work if you try to run it as code.

See also
--------

* Pseudocode on Wikipedia.


JSON - MDN Web Docs Glossary: Definitions of Web-related terms

JSON
====

*JavaScript Object Notation* (**JSON**) is a data-interchange format. Although not a strict subset, JSON closely resembles a subset of JavaScript syntax. Though many programming languages support JSON, it is especially useful for JavaScript-based apps, including websites and browser extensions.

JSON can represent numbers, booleans, strings, `null`, arrays (ordered sequences of values), and objects (string-value mappings) made up of these values (or of other arrays and objects). JSON does not natively represent more complex data types like functions, regular expressions, dates, and so on. (Date objects by default serialize to a string containing the date in ISO format, so the information isn't completely lost.) If you need JSON to represent additional data types, transform values as they are serialized or before they are deserialized.

See also
--------

* JSON on Wikipedia
* JSON on MDN


MathML - MDN Web Docs Glossary: Definitions of Web-related terms

MathML
======

**MathML** (an XML application) is an open standard for representing mathematical expressions in webpages. In 1998 the W3C first recommended MathML for representing mathematical expressions in the browser. MathML has other applications also including scientific content and voice synthesis.

See also
--------

* MathML on Wikipedia
* MathML
* Authoring MathML
* What is MathML


Safe - MDN Web Docs Glossary: Definitions of Web-related terms

Safe
====

The term **safe** can have several meanings depending on the context. It may refer to:

Safe (HTTP Methods)
An HTTP method is **safe** if it doesn't alter the state of the server. In other words, a method is safe if it leads to a read-only operation. Several common HTTP methods are safe: `GET`, `HEAD`, or `OPTIONS`. All safe methods are also idempotent, but not all idempotent methods are safe. For example, `PUT` and `DELETE` are both idempotent but unsafe.


Closure - MDN Web Docs Glossary: Definitions of Web-related terms

Closure
=======

The binding which defines the **scope** of execution. In JavaScript, **functions** create a closure context.

See also
--------

* Closure on Wikipedia
* Closure on MDN


Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms

Progressive Enhancement
=======================

**Progressive enhancement** is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.

The word *progressive* in *progressive enhancement* means creating a design that achieves a simpler-but-still-usable experience for users of older browsers and devices with limited capabilities, while at the same time being a design that **progresses the user experience up** to a more-compelling, fully-featured experience for users of newer browsers and devices with richer capabilities.

Feature detection is generally used to determine whether browsers can handle more modern functionality, while polyfills are often used to add missing features with JavaScript.

Special notice should be taken of accessibility. Acceptable alternatives should be provided where possible.

Progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents. Graceful degradation is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement. In reality both approaches are valid and can often complement one another.

See also
--------

* Progressive enhancement at Wikipedia
* What is Progressive Enhancement, and why it matters at freeCodeCamp (2018)
* Progressive Enhancement at QuirksMode (2021)
* The Power of Progressive Enhancement at Piccalilli (2018)


Scope - MDN Web Docs Glossary: Definitions of Web-related terms

Scope
=====

The **scope** is the current context of execution in which values and expressions are "visible" or can be referenced. If a variable or expression is not in the current scope, it will not be available for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.

JavaScript has the following kinds of scopes:

* Global scope: The default scope for all code running in script mode.
* Module scope: The scope for code running in module mode.
* Function scope: The scope created with a function.

In addition, variables declared with `let` or `const` can belong to an additional scope:

* Block scope: The scope created with a pair of curly braces (a block).

A function creates a scope, so that (for example) a variable defined exclusively within the function cannot be accessed from outside the function or within other functions. For instance, the following is invalid:

```js
function exampleFunction() {
  const x = "declared inside function"; // x can only be used in exampleFunction
  console.log("Inside function");
  console.log(x);
}

console.log(x); // Causes error
```

However, the following code is valid due to the variable being declared outside the function, making it global:

```js
const x = "declared outside function";

exampleFunction();

function exampleFunction() {
  console.log("Inside function");
  console.log(x);
}

console.log("Outside function");
console.log(x);
```

Blocks only scope `let` and `const` declarations, but not `var` declarations.

```js
{
  var x = 1;
}
console.log(x); // 1
```

```js
{
  const x = 1;
}
console.log(x); // ReferenceError: x is not defined
```

See also
--------

* Scope (computer science) on Wikipedia


HTTPS RR - MDN Web Docs Glossary: Definitions of Web-related terms

HTTPS RR
========

**HTTPS RR** (***HTTPS Resource Records***) are a type of DNS record that delivers configuration information and parameters for how to access a service via HTTPS.

 An *HTTPS RR* can be used to optimize the process of connecting to a service using HTTPS.
 Further, the presence of an *HTTPS RR* signals that all useful HTTP resources on the origin are reachable over HTTPS, which in turn means that a browser can safely upgrade connections to the domain from HTTP to HTTPS.

### See also

* Service binding and parameter specification via the DNS (DNS SVCB and HTTPS RRs) (Draft IETF specification: draft-ietf-dnsop-svcb-https-00)
* Strict Transport Security vs. HTTPS Resource Records: the showdown (Emily M. Stark blog)
* TLS


MitM - MDN Web Docs Glossary: Definitions of Web-related terms

MitM
====

A **manipulator-in-the-middle attack** (MitM) intercepts a communication between two systems. For example, a Wi-Fi router can be compromised.

Comparing this to physical mail: If you're writing letters to each other, the mail carrier can intercept each letter you mail. They open it, read it, eventually modify it, and then repackage the letter and only then send it to whom you intended to sent the letter for. The original recipient would then mail you a letter back, and the mail carrier would again open the letter, read it, eventually modify it, repackage it, and give it to you. You wouldn't know there's a manipulator in the middle in your communication channel – the mail carrier is invisible to you and to your recipient.

In physical mail and in online communication, MITM attacks are tough to defend. A few tips:

* Don't just ignore certificate warnings. You could be connecting to a phishing server or an imposter server.
* Sensitive sites without HTTPS encryption on public Wi-Fi networks aren't trustworthy.
* Check for HTTPS in your address bar and ensure encryption is in-place before logging in.
See also
--------

* OWASP: Manipulator-in-the-middle attack
* PortSwigger: Latest manipulator-in-the-middle attacks news
* Wikipedia: Man-in-the-middle attack


NAT - MDN Web Docs Glossary: Definitions of Web-related terms

NAT
===

**NAT** (Network Address Translation) is a technique for letting multiple computers share an IP address. NAT assigns unique addresses to each computer on the local network and adjusts incoming/outgoing network traffic to send data to the right place.

See also
--------

* WebRTC protocols
* Network address translation on Wikipedia


WebVTT - MDN Web Docs Glossary: Definitions of Web-related terms

WebVTT
======

WebVTT (Web Video Text Tracks) is a W3C specification for a file format marking up text track resources in combination with the HTML `<track>` element.

WebVTT files provide metadata that is time-aligned with audio or video content like captions or subtitles for video content, text video descriptions, chapters for content navigation, and more.

See also
--------

* WebVTT on Wikipedia
* WebVTT on MDN
* Specification


Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms

Cacheable
=========

A **cacheable** response is an HTTP response that can be cached, that is stored to be retrieved and used later, saving a new request to the server. Not all HTTP responses can be cached; these are the constraints for an HTTP response to be cacheable:

* The method used in the request is *cacheable*, that is either a `GET` or a `HEAD` method. A response to a `POST` or `PATCH` request can also be cached if freshness is indicated and the `Content-Location` header is set, but this is rarely implemented. For example, Firefox does not support it (Firefox bug 109553). Other methods, like `PUT` or `DELETE` are not cacheable and their result cannot be cached.
* The status code of the response is *known* by the application caching, and is *cacheable*. The following status codes are cacheable: `200`, `203`, `204`, `206`, `300`, `301`, `404`, `405`, `410`, `414`, and `501`.
* There are no specific headers in the response, like `Cache-Control`, with values that would prohibit caching.

Note that some requests with non-cacheable responses to a specific URI may invalidate previously cached responses from the same URI. For example, a `PUT` to `/pageX.html` will invalidate all cached responses to `GET` or `HEAD` requests to `/pageX.html`.

When both the method of the request and the status of the response are cacheable, the response to the request can be cached:

```http
GET /pageX.html HTTP/1.1
(…)

200 OK
(…)
```

The response to a `PUT` request cannot be cached. Moreover, it invalidates cached data for requests to the same URI using `HEAD` or `GET` methods:

```http
PUT /pageX.html HTTP/1.1
(…)

200 OK
(…)
```

The presence of the `Cache-Control` header with a particular value in the response can prevent caching:

```http
GET /pageX.html HTTP/1.1
(…)

200 OK
Cache-Control: no-cache
(…)
```

See also
--------

* Details about methods and caching are provided in the HTTP specification.
* Description of common cacheable methods: `GET`, `HEAD`
* Description of common non-cacheable methods: `PUT`, `DELETE`, often `POST`


Secure Sockets Layer (SSL) - MDN Web Docs Glossary: Definitions of Web-related terms

Secure Sockets Layer (SSL)
==========================

Secure Sockets Layer, or SSL, was the old standard security technology for creating an encrypted network link between a server and client, ensuring all data passed is private and secure. The current version of SSL is version 3.0, released by Netscape in 1996, and has been superseded by the Transport Layer Security (TLS) protocol.

See also
--------

* Transport Layer Security (Wikipedia)
* Transport Layer Security (TLS) protocol
* Glossary
    + HTTPS
    + TLS


WHATWG - MDN Web Docs Glossary: Definitions of Web-related terms

WHATWG
======

The WHATWG (*Web Hypertext Application Technology Working Group*) is a community that maintains and develops web standards, including DOM, Fetch, and HTML. Employees of Apple, Mozilla, and Opera established WHATWG in 2004.

See also
--------

* WHATWG website
* WHATWG on Wikipedia


Symbol - MDN Web Docs Glossary: Definitions of Web-related terms

Symbol
======

A **symbol** is a data type that represents unique, unforgeable identifiers. They are sometimes called *atoms*.

Because a symbol is unique and unforgeable, you can only read a property value associated with a symbol if you have a reference to the original identifier.

In JavaScript, `symbol` is one of the primitive types and can be created using the `Symbol()` factory method that returns a different symbol each time. They can be used as keys for objects which can never accidentally collide with other properties.

JavaScript also defines two other categories of symbols: well-known symbols and registered symbols. Read the `Symbol` reference for more information.

See also
--------

* Data types on Wikipedia
* Symbol on Wikipedia
* The JavaScript global object `Symbol`


IPv4 - MDN Web Docs Glossary: Definitions of Web-related terms

IPv4
====

IPv4 is the fourth version of the communication protocol underlying the Internet and the first version to be widely deployed.

First formalized in 1981, IPv4 traces its roots to the initial development work for ARPAnet. IPv4 is a connectionless protocol to be used on packet-switched Link layer networks (ethernet). IPv6 is gradually replacing IPv4 owing to IPv4's security problems and the limitations of its address field. (Version number 5 was assigned in 1979 to the experimental Internet Stream Protocol, which however has never been called IPv5.)

See also
--------

* IPv4 on Wikipedia


Flex - MDN Web Docs Glossary: Definitions of Web-related terms

Flex
====

`flex` is a new value added to the CSS `display` property. Along with `inline-flex` it causes the element that it applies to in order to become a flex container, and the element's children to each become a flex item. The items then participate in flex layout, and all of the properties defined in the CSS Flexible Box Layout Module may be applied.

The `flex` property is a shorthand for the flexbox properties `flex-grow`, `flex-shrink` and `flex-basis`.

In addition `<flex>` can refer to a flexible length in CSS Grid Layout.

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


Attribute - MDN Web Docs Glossary: Definitions of Web-related terms

Attribute
=========

An **attribute** extends an HTML or XML element, changing its behavior or providing metadata.

An attribute always has the form `name="value"` (the attribute's identifier followed by its associated value).

You may see attributes without the equals sign or a value. That is a shorthand for providing the empty string in HTML, or the attribute's name in XML.

```html
<input required />
<!-- is the same as… -->
<input required="" />
<!-- or -->
<input required="required" />
```

Reflection of an attribute
--------------------------

 Attributes may be *reflected* into a particular property of the specific interface.
 It means that the value of the attribute can be read by accessing the property,
 and can be modified by setting the property to a different value.

For example, the `placeholder` below is reflected into `HTMLInputElement.placeholder`.

Considering the following HTML:

```html
<input placeholder="Original placeholder" />
```

We can check the reflection between `HTMLInputElement.placeholder` and the attribute using:

```js
const input = document.querySelector("input");
const attr = input.getAttributeNode("placeholder");
console.log(attr.value);
console.log(input.placeholder); // Prints the same value as `attr.value`

// Changing placeholder value will also change the value of the reflected attribute.
input.placeholder = "Modified placeholder";
console.log(attr.value); // Prints `Modified placeholder`
```

See also
--------

* HTML attribute reference
* Information about HTML's global attributes


Copyleft - MDN Web Docs Glossary: Definitions of Web-related terms

Copyleft
========

Copyleft is a term, usually referring to a license, used to indicate that such license requires that redistribution of said work is subject to the same license as the original. Examples of copyleft licenses are the GNU GPL (for software) and the Creative Commons SA (Share Alike) licenses (for works of art).

See also
--------

* Copyleft on Wikipedia


Bitwise flags - MDN Web Docs Glossary: Definitions of Web-related terms

Bitwise flags
=============

**Bitwise flags** are sets of variables, usually simple number values, which can be used to enable or disable specific usages or features of a method or other code structure. They can do this quickly and efficiently because they operate at the bit level. Related flags in the same group are generally given complementary values representing different bit positions in a single value (e.g. hexadecimal), so that multiple flag settings can be represented by a single value.

For example, in the WebGPU API, a `GPUBuffer` object instance is created using the `GPUDevice.createBuffer()` method. When invoking this method, you define a `usage` property in the descriptor containing one or more flags that enable different allowed usages of that buffer.

```js
usage: GPUBufferUsage.COPY\_SRC | GPUBufferUsage.MAP\_WRITE;
```

These values are defined inside the same namespace, and each one has a hexadecimal value:

| Usage flag | Hexadecimal representation | Decimal equivalent |
| --- | --- | --- |
| `GPUBufferUsage.MAP_READ` | 0x0001 | 1 |
| `GPUBufferUsage.MAP_WRITE` | 0x0002 | 2 |
| `GPUBufferUsage.COPY_SRC` | 0x0004 | 4 |
| `GPUBufferUsage.COPY_DST` | 0x0008 | 8 |
| `GPUBufferUsage.INDEX` | 0x0010 | 16 |
| `GPUBufferUsage.VERTEX` | 0x0020 | 32 |
| `GPUBufferUsage.UNIFORM` | 0x0040 | 64 |
| `GPUBufferUsage.STORAGE` | 0x0080 | 128 |
| `GPUBufferUsage.INDIRECT` | 0x0100 | 256 |
| `GPUBufferUsage.QUERY_RESOLVE` | 0x0200 | 512 |

When you query the `GPUBuffer.usage` property, you get a single decimal number returned, which is the sum of the different decimal values for the different usage flags. Returning to the above example, querying `GPUBuffer.usage` for the `GPUBuffer` created with the usage specified earlier would return the following:

* `GPUBufferUsage.COPY_SRC`'s decimal equivalent, 4
* Add `GPUBufferUsage.MAP_WRITE`'s decimal equivalent, 2
* Equals 6.

Because of the values chosen for the different flags, each combination of values is unique, so the program can tell at a glance which flags are set from a single value. In addition, you can easily test which flags are set in the combined value using the bitwise and operator:

```js
if (buffer.usage & GPUBufferUsage.MAP\_WRITE) {
  // Buffer has MAP\_WRITE usage
}
```

See also
--------

* Bitwise Flags are Beautiful, and Here's Why
* Bitwise operation on Wikipedia


SGML - MDN Web Docs Glossary: Definitions of Web-related terms

SGML
====

The *Standard Generalized Markup Language* (**SGML**) is an ISO specification for defining declarative markup languages.

On the web, HTML 4, XHTML, and XML are popular SGML-based languages. It is worth noting that since its fifth edition, HTML is no longer SGML-based and has its own parsing rules.

See also
--------

* SGML on Wikipedia
* Introduction to SGML


Kebab case - MDN Web Docs Glossary: Definitions of Web-related terms

Kebab case
==========

**Kebab case** is a way of writing phrases without spaces, where spaces are replaced with hyphens `-`, and the words are typically all lower case. The name comes from the similarity of the words to meat on a kebab skewer. It's often stylized as "kebab-case" to remind the reader of its appearance.

Kebab casing is often used as a variable naming convention. However, in many languages, hyphens represent subtraction, so kebab casing is not an option. CSS properties such as `background-color` and `font-family` are in kebab case, and so are HTML attributes such as `aria-label` and `data-*`.

Kebab-cased words are often simply referred to as *hyphenated*.

See also
--------

* Camel case
* Snake case
* typescript-eslint rule: `naming-convention`


Digital certificate - MDN Web Docs Glossary: Definitions of Web-related terms

Digital certificate
===================

A digital certificate is a data file that binds a publicly known cryptographic key to an organization.

A digital certificate contains information about an organization, such as the common name (e.g., mozilla.org), the organization unit (e.g., Mozilla Corporation), and the location (e.g., Mountain View). Digital certificates are most commonly signed by a certificate authority, attesting to the certificate's authenticity.

See also
--------

* Digital certificate on Wikipedia


Global variable - MDN Web Docs Glossary: Definitions of Web-related terms

Global variable
===============

A global variable is a variable that is declared in the global scope in other words, a variable that is visible from all other scopes.

In JavaScript it is a property of the global object.

See also
--------

* Global variable on Wikipedia


Search engine - MDN Web Docs Glossary: Definitions of Web-related terms

Search engine
=============

A search engine is a software system that collects information from the World Wide Web and presents it to users who are looking for specific information.

A search engine conducts the following processes:

* **Web crawling:** Searching websites by navigating Hyperlinks on web pages, both within a site, and from one site to another. A website owner can exclude areas of the site from being accessed by a search engine's *web crawler* (or *spider*), by defining "robot exclusion" information in a file named `robots.txt`.
* **Indexing:** Associating keywords and other information with specific web pages that have been crawled. This enables users to find relevant pages as quickly as possible.
* **Searching:** Looking for relevant web pages based on queries consisting of key words and other commands to the search engine. The search engine finds the URLs of pages that match the query, and ranks them based on their relevance. It then presents results to the user in order of the ranking.

The most popular search engine is Google. Other top search engines include Yahoo!, Bing, Baidu, and AOL.

See also
--------

* Web search engine on Wikipedia
* Search engine on Webopedia
* How Internet search engines work on How Stuff Works


CRUD - MDN Web Docs Glossary: Definitions of Web-related terms

CRUD
====

**CRUD** (Create, Read, Update, Delete) is an acronym for ways one can operate on stored data. It is a mnemonic for the four basic functions of persistent storage. CRUD typically refers to operations performed in a database or datastore, but it can also apply to higher level functions of an application such as soft deletes where data is not actually deleted but marked as deleted via a status.

See also
--------

* CRUD on Wikipedia


Favicon - MDN Web Docs Glossary: Definitions of Web-related terms

Favicon
=======

A favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.

Note, however, that most modern browsers replaced the favicon from the address bar by an image indicating whether or not the website is using HTTPS.

Usually, a favicon is 16 x 16 pixels in size and stored in the GIF, PNG, or ICO file format.

They are used to improve user experience and enforce brand consistency. When a familiar icon is seen in the browser's address bar, for example, it helps users know they are in the right place.

See also
--------

* Favicon on Wikipedia
* The link rel="icon" element documentation, used to add a favicon to a page.
* Tools
    + Free favicon generator
    + Favicon.ico and & app icon generator


POP3 - MDN Web Docs Glossary: Definitions of Web-related terms

POP3
====

**POP3** (Post Office Protocol) is a very common protocol for getting emails from a mail server over a TCP connection. POP3 does not support folders, unlike the more recent IMAP, which is harder to implement because of its more complex structure.

Clients usually retrieve all messages and then delete them from the server, but POP3 does allow retaining a copy on the server. Nearly all email servers and clients currently support POP3.

See also
--------

* POP on Wikipedia
* RFC 1734 (Specification of POP3 authentication mechanism)
* RFC 1939 (Specification of POP3)
* RFC 2449 (Specification of POP3 extension mechanism)
* MDN Web Docs Glossary:
    + IMAP


WebDAV - MDN Web Docs Glossary: Definitions of Web-related terms

WebDAV
======

**WebDAV** (*Web Distributed Authoring and Versioning*) is an HTTP Extension that lets web developers update their content remotely from a client.

WebDAV is rarely used alone, but two extensions are very common: CalDAV (remote-access calendar) and CardDAV (remote-access address book).

WebDAV allows clients to

* add, delete, and retrieve webpage metadata (e.g. author or creation date)
* link pages of any media type to related pages
* create sets of documents and retrieve hierarchical list
* copy and move webpages
* lock a document from being edited by more than one person at a time
See also
--------

* WebDAV on Wikipedia
* Specifications:
    + RFC 2518
    + RFC 3253
    + RFC 3744


JPEG - MDN Web Docs Glossary: Definitions of Web-related terms

JPEG
====

**JPEG** (Joint Photographic Experts Group) is a commonly used method of lossy compression for digital images.

JPEG compression is composed of three compression techniques applied in successive layers, including chrominance subsampling, discrete cosine transformation and quantization, and run-length Delta & Huffman encoding. Chroma subsampling involves implementing less resolution for chroma information than for luma information, taking advantage of the human visual system's lower acuity for color differences than for luminance. A discrete cosine transform expresses a finite sequence of data points in terms of a sum of cosine functions oscillating at different frequencies.

See also
--------

* JPEG on Wikipedia


Polyfill - MDN Web Docs Glossary: Definitions of Web-related terms

Polyfill
========

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

For example, a polyfill could be used to mimic the functionality of a `text-shadow` in IE7 using proprietary IE filters, or mimic rem units or media queries by using JavaScript to dynamically adjust the styling as appropriate, or whatever else you require.

The reason why polyfills are not used exclusively is for better functionality and better performance. Native implementations of APIs can do more and are faster than polyfills. For example, the Object.create polyfill only contains the functionalities that are possible in a non-native implementation of Object.create.

Other times, polyfills are used to address issues where browsers implement the same features in different ways. The polyfill uses non-standard features in a certain browser to give JavaScript a standards-compliant way to access the feature. Although this reason for polyfilling is very rare today, it was especially prevalent back in the days of IE6 and Netscape where each browser implemented JavaScript very differently. The 1st version of jQuery was an early example of a polyfill. It was essentially a compilation of browser-specific workarounds to provide JavaScript developers with a single common API that worked in all browsers. At the time, JavaScript developers were having major problems trying to get their website to work across all devices because there was such a discrepancy between browsers that the website might have to be programmed radically differently and have a much different user interface based upon the user's browser. Thus, the JavaScript developer had access to only a very tiny handful of JavaScript APIs that worked more-or-less consistently across all browsers. Using a polyfill to handle browser-specific implementations is less common today because modern browsers mostly implement a broad set of APIs according to standard semantics.

See also
--------

* What is a polyfill? (article by Remy Sharp, the originator of the term)


State machine - MDN Web Docs Glossary: Definitions of Web-related terms

State machine
=============

A state machine is a mathematical abstraction used to design algorithms. A state machine reads a set of inputs and changes to a different state based on those inputs.

A state is a description of the status of a system waiting to execute a transition. A transition is a set of actions to execute when a condition is fulfilled or an event received. In a state diagram, circles represent each possible state and arrows represent transitions between states.

Looking at the final state, you can discern something about the series of inputs leading to that state.

There are two types of basic state machines:

deterministic finite state machine

This kind allows only one possible transition for any allowed input. This is like the "if" statement in that `if x then doThis else doThat` is not possible. The computer must perform *one* of the two options.

non-deterministic finite state machine

Given some state, an input can lead to more than one different state.

*Figure 1: Deterministic Finite State Machine.*

![The machine transitions from state 1 to state 2 for input X and from state 1 to state 3 for input Y](/en-US/docs/Glossary/State_machine/statemachine1.png)

In *Figure 1*, the state begins in State 1; the state changes to State 2 given input 'X', or to State 3 given input 'Y'.

*Figure 2: Non-Deterministic Finite State Machine.*

![The machine may remain in state 1, transitioning to itself, or may transition from state 1 to state 2 for input X](/en-US/docs/Glossary/State_machine/statemachine2.png)

In *Figure 2*, given input 'X', the state can persist or change to State 2.

Note that any regular expression can be represented by a state machine.

See also
--------

* Finite-state machine on Wikipedia
* UML state machine on Wikipedia
* Moore machine on Wikipedia
* Mealy machine on Wikipedia


Alignment subject - MDN Web Docs Glossary: Definitions of Web-related terms

Alignment subject
=================

In CSS box alignment the **alignment subject** is the thing (or things) being aligned by the property.

For `justify-self` and `align-self`, the alignment subject is the margin box of the box the property is set on, using the writing mode of that box. For `justify-content` and `align-content`, the writing mode of the box is also used.

The definition of the alignment subject depends on the layout mode being used.

Block containers (including table cells)

The entire content of the block as a single unit.

Multicol containers

The column boxes, with any spacing inserted between column boxes added to the relevant column gaps.

Flex containers

For `justify-content`, the flex items in each flex line. For `align-content`, the flex lines. Note, this only has an effect on multi-line flex containers.

Grid containers

The grid tracks in the appropriate axis, with any spacing inserted between tracks added to the relevant gutters. Collapsed gutters are treated as a single opportunity for space insertion.

See also
--------

* CSS box alignment module


Constructor - MDN Web Docs Glossary: Definitions of Web-related terms

Constructor
===========

A **constructor** belongs to a particular class object that is instantiated. The constructor initializes this object and can provide access to its private information. The concept of a constructor can be applied to most object-oriented programming languages. Essentially, a constructor in JavaScript is usually declared at the instance of a class.

Syntax
------

```js
// This is a generic default constructor class Default
function Default() {}

// This is an overloaded constructor class Overloaded
// with parameter arguments
function Overloaded(arg1, arg2, /\* …, \*/ argN) {}
```

To call the constructor of the class in JavaScript, use a `new` operator to assign a new object reference to a variable.

```js
function Default() {}

// A new reference of a Default object assigned to a
// local variable defaultReference
const defaultReference = new Default();
```

See also
--------

* Constructor on Wikipedia
* The constructor in object oriented programming for JavaScript on MDN
* New operator in JavaScript on MDN


Static typing - MDN Web Docs Glossary: Definitions of Web-related terms

Static typing
=============

A **statically-typed** language is a language (such as Java, C, or C++) where variable types are known at compile time. In most of these languages, types must be expressly indicated by the programmer; in other cases (such as OCaml), type inference allows the programmer to not indicate their variable types.

See also
--------

* Type system on Wikipedia


Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms

Navigation directive
====================

**CSP navigation directives** are used in a `Content-Security-Policy` header and govern to which location a user can navigate to or submit a form to, for example.

Navigation directives don't fall back to the `default-src` directive.

See Navigation directives for a complete list.

See also
--------

* https://www.w3.org/TR/CSP/#directives-navigation
* Other kinds of directives:
    + Fetch directive
    + Document directive
    + Reporting directive
    + `block-all-mixed-content`
    + `upgrade-insecure-requests`
    + `trusted-types`
* `Content-Security-Policy`


MIME - MDN Web Docs Glossary: Definitions of Web-related terms

MIME
====

**MIME** (Multipurpose Internet Mail Extensions) is a standard to describe documents in other forms besides ASCII text, for example, audio, video, and images.
 Initially used for email attachments, it has become the de facto standard to define types of documents anywhere.

See also
--------

* MIME-Type
* MIME on Wikipedia


Prerender - MDN Web Docs Glossary: Definitions of Web-related terms

Prerender
=========

Prerendering refers to the practice of speculatively prefetching and *rendering* pages that the user is likely to navigate to in the near future (the browser renders the page in the background in what is effectively an invisible separate tab). Prerendering includes downloading a document's subresources and running associated JavaScript.

If the user then chooses to navigate to the page, display of its content can be near instant.

Prerendering might be used, for example, to fetch the page resources linked by a "Next" button, or a link popup that a user hovers over, or the likely page target of the URL being entered into the address bar. The following speculation rules could be included in the head of a document to hint to the browser that it should prerender `next.html` and `next2.html`, as either might reasonably be a target of the next navigation:

```html
<script type="speculationrules">
 {
 "prerender": [
 {
 "source": "list",
 "urls": ["next.html", "next2.html"]
 }
 ]
 }
</script>
```

Prerendering results in faster display time than prefetching and hence a better user experience, at the cost of more resources being consumed.

See also
--------

* Speculative loading
* prefetch
* Prerender pages in Chrome for instant page navigations on developer.chrome.com (2023)
* Speculation Rules API


ISP - MDN Web Docs Glossary: Definitions of Web-related terms

ISP
===

An ISP (Internet Service Provider) sells Internet access, and sometimes email, web hosting, and voice over IP, either by a dial-up connection over a phone line (formerly more common), or through a broadband connection such as a cable modem or DSL service.

See also
--------

* How the Internet works (explanation for beginners)
* Internet service provider on Wikipedia


Bandwidth - MDN Web Docs Glossary: Definitions of Web-related terms

Bandwidth
=========

Bandwidth is the measure of how much information can pass through a data connection in a given amount of time. It is usually measured in multiples of bits-per-second (bps), for example megabits-per-second (Mbps) or gigabits-per-second (Gbps).

See also
--------

* Bandwidth on Wikipedia


NNTP - MDN Web Docs Glossary: Definitions of Web-related terms

NNTP
====

**NNTP** (Network News Transfer Protocol) is a protocol used to transfer Usenet messages from client to server or between servers.

See also
--------

* NNTP at Wikipedia
* From the IETF: RFC 3977 about NNTP (2006)


Fork - MDN Web Docs Glossary: Definitions of Web-related terms

Fork
====

A fork is a copy of an existing software project at some point to add someone's own modifications to the project.

Basically, if the license of the original software allows, you can copy the code to develop your own version of it, with your own additions, which will be a "fork".

Forks are often seen in free and open source software development. This is now a more popular term thanks to contribution model using Git (and/or the GitHub platform).

See also
--------

* Fork on Wikipedia
* How to fork a GitHub repo (fork as in a Git context)
* Fork (Glossary)
* Various "well-known" forks
    + Linux distributions
    + Node.js and io.js (which have been merged together back)
    + LibreOffice, a fork of OpenOffice


Application Context - MDN Web Docs Glossary: Definitions of Web-related terms

Application Context
===================

An **application context** is a top-level browsing context that has a manifest applied to it.

If an application context is created as a result of the user agent being asked to navigate to a deep link, the user agent must immediately navigate to the deep link with replacement enabled. Otherwise, when the application context is created, the user agent must immediately navigate to the start URL with replacement enabled.

Please note that the start URL is not necessarily the value of the start\_url member: the user or user agent could have changed it when the application was added to home-screen or otherwise bookmarked.

See also
--------

* Progressive web apps (PWA)
* `scope`


Payload header - MDN Web Docs Glossary: Definitions of Web-related terms

Payload header
==============

A **payload header** is an HTTP header that describes the payload information related to safe transport and reconstruction of the original resource representation, from one or more messages. This includes information like the length of the message payload, which part of the resource is carried in this payload (for a multi-part message), any encoding applied for transport, message integrity checks, etc.

Payload headers may be present in both HTTP request and response messages (i.e. in any message that is carrying payload data).

The payload headers include: `Content-Length`, `Content-Range`, `Trailer`, and `Transfer-Encoding`.

See also
--------

* List of all HTTP headers
    + `Content-Length`
    + `Content-Range`
    + `Trailer`
    + `Transfer-Encoding`
    + Representation header
* RFC 7231, section 3.3: Payload semantics


Domain - MDN Web Docs Glossary: Definitions of Web-related terms

Domain
======

A domain is an authority within the internet that controls its own resources. Its "domain name" is a way to address this authority as part of the hierarchy in a URL - usually the most memorable part of it, for instance a brand name.

A fully qualified domain name (FQDN) contains all necessary parts to look up this authority by name unambiguously using the DNS system of the internet.

For example, in "developer.mozilla.org":

1. "org" is called a top-level domain. They are registered as an internet standard by the IANA. Here, "org" means "organization" which is defined in a top-level *domain registry*.
2. "mozilla" is the domain. If you like to own a domain you have to register it with one of the many registrars who are allowed to do so with a top-level domain registry.
3. "developer" is a "sub-domain", something you as the owner of a domain may define yourself. Many owners choose to have a subdomain "www" to point to their World\_Wide\_Web resource, but that's not required (and has even fallen somewhat out of favor).
See also
--------

* Domain Name on Wikipedia


Representation header - MDN Web Docs Glossary: Definitions of Web-related terms

Representation header
=====================

A **representation header** is an HTTP header that describes the particular *representation* of the resource sent in an HTTP message body.

 Representations are different forms of a particular resource.
 For example, the same data might be formatted as a particular media type such as XML or JSON, localized to a particular written language or geographical region, and/or compressed or otherwise encoded for transmission.
 The underlying resource is the same in each case, but its representation is different.

Clients specify the formats that they prefer to be sent during content negotiation (using `Accept-*` headers), and the representation headers tell the client the format of the *selected representation* they actually received.

 Representation headers may be present in both HTTP request and response messages.
 If sent as a response to a `HEAD` request, they describe the body content that *would* be selected if the resource was actually requested.

Representation headers include: `Content-Type`, `Content-Encoding`, `Content-Language`, and `Content-Location`.

See also
--------

* RFC 9110, section 3.2: Representations
* List of all HTTP headers
* Payload header
* Entity header
* `Digest`/ `Want-Digest`


Flex Item - MDN Web Docs Glossary: Definitions of Web-related terms

Flex Item
=========

The direct children of a Flex Container (elements with `display: flex` or `display: inline-flex` set on them) become **flex items**.

Continuous runs of text inside flex containers will also become flex items.

See also
--------

### Property reference

* `align-self`
* `flex-basis`
* `flex-grow`
* `flex-shrink`
* `order`
### Further reading

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Ordering flex items*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis*


Cryptography - MDN Web Docs Glossary: Definitions of Web-related terms

Cryptography
============

**Cryptography**, or cryptology, is the science that studies how to encode and transmit messages securely. Cryptography designs and studies algorithms used to encode and decode messages in an insecure environment, and their applications.

More than just **data confidentiality**, cryptography also tackles **identification**, **authentication**, **non-repudiation**, and **data integrity**. Therefore it also studies usage of cryptographic methods in context, **cryptosystems**.

See also
--------

* Cryptography on Wikipedia
* MDN Web Docs Glossary
    + Block cipher mode of operation
    + Cipher
    + Ciphertext
    + Cipher suite
    + Cryptanalysis
    + Decryption
    + Encryption
    + Key
    + Plaintext
    + Public-key cryptography
    + Symmetric-key cryptography


Self-Executing Anonymous Function - MDN Web Docs Glossary: Definitions of Web-related terms

Self-Executing Anonymous Function
=================================

A JavaScript function that runs as soon as it is defined. Also known as an IIFE (Immediately Invoked Function Expression).

See the IIFE glossary page linked above for more information.


UDP (User Datagram Protocol) - MDN Web Docs Glossary: Definitions of Web-related terms

UDP (User Datagram Protocol)
============================

**UDP** (User Datagram Protocol) is a long standing protocol used together with IP for sending data when transmission speed and efficiency matter more than security and reliability.

UDP uses a simple connectionless communication model with a minimum of protocol mechanism. UDP provides checksums for data integrity, and port numbers for addressing different functions at the source and destination of the datagram. It has no handshaking dialogues, and thus exposes the user's program to any unreliability of the underlying network; There is no guarantee of delivery, ordering, or duplicate protection. If error-correction facilities are needed at the network interface level, an application may use the Transmission Control Protocol (TCP) or Stream Control Transmission Protocol (SCTP) which are designed for this purpose.

UDP is suitable for purposes where error checking and correction are either not necessary or are performed in the application; UDP avoids the overhead of such processing in the protocol stack. Time-sensitive applications often use UDP because dropping packets is preferable to waiting for packets delayed due to retransmission, which may not be an option in a real-time system.

See also
--------

* User Datagram Protocol on Wikipedia
* Specification


First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms

First contentful paint
======================

**First Contentful Paint** (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. The question "Is it happening?" is "yes" when the first contentful paint completes.

*The First Contentful Paint* timestamp is when the browser first rendered any text, image (including background images), video, canvas that had been drawn into, or non-empty SVG. This excludes any content of iframes, but includes text with pending webfonts. This is the first time users could start consuming page content.

See also
--------

* First paint
* `PerformancePaintTiming`
* Largest Contentful Paint
* First meaningful paint
* First Contentful Paint at web.dev


Validator - MDN Web Docs Glossary: Definitions of Web-related terms

Validator
=========

A validator is a program that checks for syntax errors in code. Validators can be created for any format or language, but in our context we speak of tools that check HTML, CSS, and XML.

See also
--------

* Validator on Wikipedia
* Short list of validators


Mozilla Firefox - MDN Web Docs Glossary: Definitions of Web-related terms

Mozilla Firefox
===============

**Mozilla Firefox** is a free open-source browser whose development is overseen by the Mozilla Corporation. Firefox runs on Windows, OS X, Linux, and Android.

First released in November 2004, Firefox is completely customizable with themes, plug-ins, and add-ons. Firefox uses Gecko to render webpages, and implements both current and upcoming Web standards.

See also
--------

* Mozilla Firefox official website
* Firefox developer documentations on MDN


Cipher - MDN Web Docs Glossary: Definitions of Web-related terms

Cipher
======

In cryptography, a **cipher** is an algorithm that can encode Plaintext to make it unreadable, and to decode it back.

Ciphers were common long before the information age (e.g., substitution ciphers, transposition ciphers, and permutation ciphers), but none of them were cryptographically secure except for the one-time pad.

Modern ciphers are designed to withstand attacks discovered by a cryptanalyst. There is no guarantee that all attack methods have been discovered, but each algorithm is judged against known classes of attacks.

Ciphers operate two ways, either as block ciphers on successive blocks, or buffers, of data, or as stream ciphers on a continuous data flow (often of sound or video).

They also are classified according to how their keys are handled:

* symmetric key algorithms use the same key to encode and decode a message. The key also must be sent securely if the message is to stay confidential.
* asymmetric key algorithms use a different key for encryption and decryption.
See also
--------

* Cipher on Wikipedia
* Encryption and Decryption
* MDN Web Docs Glossary
    + Block cipher mode of operation
    + Cipher
    + Ciphertext
    + Cipher suite
    + Cryptanalysis
    + Cryptography
    + Decryption
    + Encryption
    + Key
    + Plaintext
    + Public-key cryptography
    + Symmetric-key cryptography


Accent - MDN Web Docs Glossary: Definitions of Web-related terms

Accent
======

An **accent** is a typically bright color that contrasts with the more utilitarian background and foreground colors within a color scheme. These are present in the visual style of many platforms (though not all).

On the web, an accent is sometimes used in `<input>` elements for the active portion of the control, for instance, the background of a checked checkbox.

See also
--------

### CSS related to the accent

You can set the color of the accent for a given element by setting the element's CSS `accent-color` property to the appropriate `<color>` value.


Internationalization (i18n) - MDN Web Docs Glossary: Definitions of Web-related terms

Internationalization (i18n)
===========================

**Internationalization**, often shortened to "i18n", is the practice of designing a system in such a way that it can easily be adapted for different target audiences, that may vary in region, language, or culture.

The complementary process of adapting a system for a specific target audience is called Localization.

Among other things, internationalization covers adapting to differences in:

* writing systems
* units of measure (currency, °C/°F, km/miles, etc.)
* time and date formats
* keyboard layouts

The work of the Unicode Consortium is a fundamental part of internationalization. Unicode supports not only variations among the world's writing systems but also cultural variations such as currencies and time/date formats.

See also
--------

* Localization
* W3C Internationalization Activity
* Unicode Consortium
* JavaScript Internationalization API


Modem - MDN Web Docs Glossary: Definitions of Web-related terms

Modem
=====

A modem ("**modulator-demodulator**") is a device that converts digital information to analog signals and vice versa, for sending data through networks.

Different kinds are used for different networks: DSL modems for telephone wires, Wi-Fi modems for short-range wireless radio signals, 3G modems for cellular data towers, and so on.

Modems are different from routers, but many companies sell modems combined with routers.

See also
--------

* Modem on Wikipedia


MIME type - MDN Web Docs Glossary: Definitions of Web-related terms

MIME type
=========

A **MIME type** (now properly called "media type", but also sometimes "content type") is a string sent along with a file indicating the type of the file (describing the content format, for example, a sound file might be labeled `audio/ogg`, or an image file `image/png`).

 It serves the same purpose as filename extensions traditionally do on Windows.
 The name originates from the MIME standard originally used in email.

See also
--------

* Internet media type on Wikipedia
* List of MIME types
* Properly Configuring Server MIME Types
* Details information about the usage of MIME Types in a Web context.
* Incomplete list of MIME types
* MediaRecorder.mimeType


Port - MDN Web Docs Glossary: Definitions of Web-related terms

Port
====

For a computer connected to a network with an IP address, a **port** is a communication endpoint. Ports are designated by numbers, and below 1024 each port is associated by default with a specific protocol.

For example, the default port for the HTTP protocol is 80 and the default port for the HTTPS protocol is 443, so a HTTP server waits for requests on those ports. Each Internet protocol is associated with a default port: SMTP (25), POP (110), IMAP (143), IRC (194), and so on.

See also
--------

* Port on Wikipedia


TLD - MDN Web Docs Glossary: Definitions of Web-related terms

TLD
===

A TLD (*top-level domain*) is the most generic domain in the Internet's hierarchical DNS (domain name system). A TLD is the final component of a domain name, for example, "org" in `developer.mozilla.org`.

ICANN (Internet Corporation for Assigned Names and Numbers) designates organizations to manage each TLD. Depending on how strict an administrating organization might be, TLD often serves as a clue to the purpose, ownership, or nationality of a website.

 Consider an example Internet address: `https://developer.mozilla.org`
 Here org is the TLD; mozilla.org is the second-level domain name; and developer is a subdomain name. All together, these constitute a fully-qualified domain name; the addition of https:// makes this a complete URL.

IANA today distinguishes the following groups of top-level domains:

country-code top-level domains (ccTLD)

Two-character domains established for countries or territories. Example: *.us* for United States.

internationalized country code top-level domains (IDN ccTLD)

ccTLDs in non-Latin character sets (e.g., Arabic or Chinese).

generic top-level domains (gTLD)

Top-level domains with three or more characters.

unsponsored top-level domains

Domains that operate directly under policies established by ICANN processes for the global Internet community, for example "com" and "edu".

sponsored top-level domains (sTLD)

These domains are proposed and sponsored by private organizations that decide whether an applicant is eligible to use the TLD, based on community theme concepts.

infrastructure top-level domain

This group consists of one domain, the Address and Routing Parameter Area (ARPA).

See also
--------

* TLD on Wikipedia
* List of top-level domains


Head - MDN Web Docs Glossary: Definitions of Web-related terms

Head
====

The **Head** is the part of an HTML document that contains metadata about that document, such as author, description, and links to CSS or JavaScript files that should be applied to the HTML.

See also
--------

* `<head>` element reference on MDN
* The HTML <head> on the MDN Learning Area


Void element - MDN Web Docs Glossary: Definitions of Web-related terms

Void element
============

A **void element** is an element in HTML that **cannot** have any child nodes (i.e., nested elements or text nodes). Void elements only have a start tag; end tags must not be specified for void elements.

In HTML, a void element must not have an end tag. For example, `<input type="text"></input>` is invalid HTML. In contrast, SVG or MathML elements that cannot have any child nodes may use an end tag instead of XML self-closing-tag syntax in their start tag.

The HTML, SVG, and MathML specifications define very precisely what each element can contain. So, some combinations of tags have no semantic meaning.

Although there is no way to mark up a void element as having any children, child nodes can be added programmatically to the element in the DOM using JavaScript. But that is not a good practice, as the outcome will not be reliable.

The void elements in HTML are as follows:

* `<area>`
* `<base>`
* `<br>`
* `<col>`
* `<embed>`
* `<hr>`
* `<img>`
* `<input>`
* `<link>`
* `<meta>`
* `<param>`
Deprecated
* `<source>`
* `<track>`
* `<wbr>`
Self-closing tags
-----------------

*Self-closing tags (`<tag />`) do not exist in HTML.*

If a trailing `/` (slash) character is present in the start tag of an HTML element, HTML parsers ignore that slash character. This is important to remember when an element such as `<script>` or `<ul>` does require a closing tag. In this case, adding a trailing slash in the start tag does not close the element.

However, some code formatters add the trailing slash character to the start tags of void elements to make them XHTML-compatible and more readable. For example, some code formatters will convert `<input type="text">` to `<input type="text" />`.

Self-closing tags are required in void elements in XML, XHTML, and SVG (e.g., `<circle cx="50" cy="50" r="50" />`).

In SVG and MathML, elements that cannot have any child nodes are allowed to be marked as self-closing. In such cases, if an element's start tag is marked as self-closing, the element must not have an end tag.

**Note:** If a trailing `/` (slash) character in a start tag is directly preceded by an unquoted attribute value — with no space between — the slash becomes a part of the attribute value rather than being discarded by the parser. For example, the markup `<img src=http://www.example.com/logo.svg/>` results in the `src` attribute having the value `http://www.example.com/logo.svg/` — which makes the URL wrong.

See also
--------

* Replaced elements


SVN - MDN Web Docs Glossary: Definitions of Web-related terms

SVN
===

Apache Subversion (**SVN**) is a free source control management (SCM) system. It allows developers to keep a history of text and code modifications. Although SVN can also handle binary files, we do not recommend that you use it for such files.

See also
--------

* Apache Subversion on Wikipedia
* Official website


Regular expression - MDN Web Docs Glossary: Definitions of Web-related terms

Regular expression
==================

**Regular expressions** (or *regex*) are rules that govern which sequences of characters come up in a search.

Regular expressions are implemented in various languages, but the best-known implementation is the Perl Implementation, which has given rise to its own ecosystem of implementations called PCRE (*Perl Compatible Regular Expression*). On the Web, JavaScript provides another regex implementation through the `RegExp` object.

See also
--------

* Regular expressions on Wikipedia
* Interactive tutorial
* Visualized Regular Expression
* Writing regular expressions in JavaScript


Time to interactive - MDN Web Docs Glossary: Definitions of Web-related terms

Time to interactive
===================

**Time to Interactive** (TTI) is a non-standardized web performance 'progress' metric defined as the point in time when the last Long Task finished and was followed by 5 seconds of network and main thread inactivity.

TTI, proposed by the Web Incubator Community Group in 2018, is intended to provide a metric that describes when a page or application contains useful content and the main thread is idle and free to respond to user interactions, including having event handlers registered.

#### Caveat

TTI is derived by leveraging information from the Long Task API. Although available in some performance monitoring tools, TTI is not a part of any official web specification at the time of writing.

See also
--------

* Definition of TTI from Web Incubator Community Group
* Time to Interactive — focusing on human-centric metrics by Radimir Bitsov
* Tracking TTI


HTML5 - MDN Web Docs Glossary: Definitions of Web-related terms

HTML5
=====

The term HTML5 is essentially a buzzword that refers to a set of modern web technologies. This includes the HTML Living Standard, along with JavaScript APIs to enhance storage, multimedia, and hardware access.

You may sometimes hear about "new HTML5 elements", or find HTML5 described as a new version of HTML. HTML5 was the successor to previous HTML versions and introduced new elements and capabilities to the language on top of the previous version, HTML 4.01, as well as improving or removing some existing functionality. However, as a Living Standard HTML now has no version. The up-to-date specification can be found at html.spec.whatwg.org/.

Any modern site should use the HTML doctype — this will ensure that you are using the latest version of HTML.

**Note:** Until 2019, the W3C published a competing HTML5 standard with version numbers. Since 28 May 2019, the WHATWG Living Standard was announced by the W3C as the sole version of HTML.

See also
--------

* our HTML documentation
* HTML beginner's learning guides
* Web APIs


Mixin - MDN Web Docs Glossary: Definitions of Web-related terms

Mixin
=====

A *mixin* is a class (interface, in WebAPI spec terms) in which some or all of its methods and/or properties are unimplemented, requiring that another class or interface provide the missing implementations.

The new class or interface then includes both the properties and methods from the mixin as well as those it defines itself. All of the methods and properties are used exactly the same regardless of whether they're implemented in the mixin or the interface or class that implements the mixin.

The advantage of mixins is that they can be used to simplify the design of APIs in which multiple interfaces need to include the same methods and properties.

For example, the `WindowOrWorkerGlobalScope` mixin is used to provide methods and properties that need to be available on both the `Window` and `WorkerGlobalScope` interfaces. The mixin is implemented by both of those interfaces.

See also
--------

* Mixin on Wikipedia


Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms

Preflight request
=================

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.

It is an `OPTIONS` request, using two or three HTTP request headers: `Access-Control-Request-Method`, `Origin`, and optionally `Access-Control-Request-Headers`.

A preflight request is automatically issued by a browser and in normal cases, front-end developers don't need to craft such requests themselves. It appears when request is qualified as "to be preflighted" and omitted for simple requests.

For example, a client might be asking a server if it would allow a `DELETE` request, before sending a `DELETE` request, by using a preflight request:

```http
OPTIONS /resource/foo
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org
```

If the server allows it, then it will respond to the preflight request with an `Access-Control-Allow-Methods` response header, which lists `DELETE`:

```http
HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400
```

The preflight response can be optionally cached for the requests created in the same URL using `Access-Control-Max-Age` header like in the above example. To cache preflight responses, the browser uses a specific cache that is separate from the general HTTP cache that the browser manages. Preflight responses are never cached in the browser's general HTTP cache.

See also
--------

* CORS
* `OPTIONS`


Second-level Domain - MDN Web Docs Glossary: Definitions of Web-related terms

Second-level Domain
===================

A Second Level Domain (SLD) is the part of the domain name that is located right before a Top Level Domain (TLD).

For example, in `mozilla.org` the SLD is `mozilla` and the TLD is `org`.

A domain name is not limited to a TLD and an SLD. Additional subdomains can be created in order to provide additional information about various functions of a server or to delimit areas under the same domain. For example, `www` is a commonly used subdomain to indicate the domain points to a web server.

As another example, in `developer.mozilla.org`, the `developer` subdomain is used to specify that the subdomain contains the developer section of the Mozilla website.

See also
--------

* SLD (Wikipedia)
* Glossary
    + DNS
    + Domain
    + Domain name
    + TLD


MVC - MDN Web Docs Glossary: Definitions of Web-related terms

MVC
===

**MVC** (Model-View-Controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. It emphasizes a separation between the software's business logic and display. This "separation of concerns" provides for a better division of labor and improved maintenance. Some other design patterns are based on MVC, such as MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), and MVW (Model-View-Whatever).

The three parts of the MVC software-design pattern can be described as follows:

1. Model: Manages data and business logic.
2. View: Handles layout and display.
3. Controller: Routes commands to the model and view parts.
Model View Controller example
-----------------------------

Imagine a simple shopping list app. All we want is a list of the name, quantity and price of each item we need to buy this week. Below we'll describe how we could implement some of this functionality using MVC.

![Diagram to show the different parts of the mvc architecture.](/en-US/docs/Glossary/MVC/model-view-controller-light-blue.png)

### The Model

The model defines what data the app should contain. If the state of this data changes, then the model will usually notify the view (so the display can change as needed) and sometimes the controller (if different logic is needed to control the updated view).

Going back to our shopping list app, the model would specify what data the list items should contain — item, price, etc. — and what list items are already present.

### The View

The view defines how the app's data should be displayed.

In our shopping list app, the view would define how the list is presented to the user, and receive the data to display from the model.

### The Controller

The controller contains logic that updates the model and/or view in response to input from the users of the app.

So for example, our shopping list could have input forms and buttons that allow us to add or delete items. These actions require the model to be updated, so the input is sent to the controller, which then manipulates the model as appropriate, which then sends updated data to the view.

You might however also want to just update the view to display the data in a different format, e.g., change the item order to alphabetical, or lowest to highest price. In this case the controller could handle this directly without needing to update the model.

MVC on the web
--------------

As a web developer, this pattern will probably be quite familiar even if you've never consciously used it before. Your data model is probably contained in some kind of database (be it a traditional server-side database like MySQL, or a client-side solution such as IndexedDB [en-US].) Your app's controlling code is probably written in HTML/JavaScript, and your user interface is probably written using HTML/CSS/whatever else you like. This sounds very much like MVC, but MVC makes these components follow a more rigid pattern.

In the early days of the Web, MVC architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views back to display in the browser. However, these days, more of the logic is pushed to the client with the advent of client-side data stores, and the Fetch API enabling partial page updates as required.

Web frameworks such as AngularJS and Ember.js all implement an MVC architecture, albeit in slightly different ways.

See also
--------

* Model–view–controller on Wikipedia


Ruby - MDN Web Docs Glossary: Definitions of Web-related terms

Ruby
====

**Ruby** is an open-source programming language. In a Web context, Ruby is often used server-side with the *Ruby On Rails* (ROR) framework to produce websites/apps.

Ruby is also a method for annotating east Asian text in HTML documents to provide pronunciation information; see the `<ruby>` element.

See also
--------

* Ruby on Wikipedia
* Ruby's official website
* Ruby On Rails' official website


Speed index - MDN Web Docs Glossary: Definitions of Web-related terms

Speed index
===========

**Speed Index** (SI) is a page load performance metric measuring how quickly the contents of a page are visibly populated. Speed Index is dependent on size of the viewport and expressed in milliseconds: the lower amount of time the better the score.

Speed Index was introduced to address issues with other milestones and metrics and provide a gauge of real user experience. Speed Index has been implemented in several common audits including WebPageTest and Lighthouse.

Speed Index is calculated by what percent of the page is visually complete at every 100ms interval until the page is visually complete. The overall score is a sum of the individual 10 times per second intervals of the percent of the screen that is not visually complete.

*Diagram showing how above the fold content can load before the page load event and is measured by Speed Index*:

 ![Calculation of SpeedIndex](/en-US/docs/Glossary/Speed_index/speedindex.png)

See also
--------

* Learn web performance


Presto - MDN Web Docs Glossary: Definitions of Web-related terms

Presto
======

Presto was the proprietary browser layout engine used to power the Opera browser until version 15. Since then, the Opera browser is based on Chromium, which uses the Blink layout engine.

See also
--------

* Presto layout engine on Wikipedia


Lossless compression - MDN Web Docs Glossary: Definitions of Web-related terms

Lossless compression
====================

**Lossless compression** is a class of data compression algorithms that allows the original data to be perfectly reconstructed from the compressed data. Lossless compression methods are reversible. Examples of lossless compression include GZIP, Brotli, WebP, and PNG,

Lossy compression, on the other hand, uses inexact approximations by discarding some data from the original file, making it an irreversible compression method.

See also
--------

* Glossary
    + GZIP
    + Brotli
    + PNG
    + Lossy compression


Shallow copy - MDN Web Docs Glossary: Definitions of Web-related terms

Shallow copy
============

A **shallow copy** of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made. As a result, when you change either the source or the copy, you may also cause the other object to change too. That behavior contrasts with the behavior of a deep copy, in which the source and copy are completely independent.

More formally, two objects `o1` and `o2` are shallow copies if:

1. They are not the same object (`o1 !== o2`).
2. The properties of `o1` and `o2` have the same names in the same order.
3. The values of their properties are equal.
4. Their prototype chains are equal.

See also the definition of *structural equivalence*.

The copy of an object whose properties all have primitive values fits the definition of both a deep copy and a shallow copy. It is somewhat useless to talk about the depth of such a copy, though, because it has no nested properties and we usually talk about deep copying in the context of mutating nested properties.

For shallow copies, only the top-level properties are copied, not the values of nested objects. Therefore:

* Re-assigning top-level properties of the copy does not affect the source object.
* Re-assigning nested object properties of the copy does affect the source object.

In JavaScript, all standard built-in object-copy operations (spread syntax, `Array.prototype.concat()`, `Array.prototype.slice()`, `Array.from()`, `Object.assign()`, and `Object.create()`) create shallow copies rather than deep copies.

Consider the following example, in which an `ingredientsList` array object is created, and then an `ingredientsListCopy` object is created by copying that `ingredientsList` object.

```js
const ingredientsList = ["noodles", { list: ["eggs", "flour", "water"] }];

const ingredientsListCopy = Array.from(ingredientsList);
console.log(ingredientsListCopy);
// ["noodles",{"list":["eggs","flour","water"]}]
```

Re-assigning the value of a nested property will be visible in both objects.

```js
ingredientsListCopy[1].list = ["rice flour", "water"];
console.log(ingredientsList[1].list);
// Array [ "rice flour", "water" ]
```

Re-assigning the value of a top-level property (the `0` index in this case) will only be visible in the changed object.

```js
ingredientsListCopy[0] = "rice noodles";
console.log(ingredientsList[0]); // noodles
console.log(JSON.stringify(ingredientsListCopy));
// ["rice noodles",{"list":["rice flour","water"]}]
console.log(JSON.stringify(ingredientsList));
// ["noodles",{"list":["rice flour","water"]}]
```

See also
--------

* Deep copy


Network throttling - MDN Web Docs Glossary: Definitions of Web-related terms

Network throttling
==================

**Network throttling** is an intentional slowing down of internet speed. In web performance, network throttling, or network condition emulation, it is used to emulate low bandwidth conditions experienced by likely a large segment of a site's target user base.

It's important not to overlook network conditions users experience on mobile. The internet speeds for developers creating web applications in a corporate office building on a powerful computer are generally very fast. As a developer, tech writer, or designer, this is likely your experience. The network speeds of a mobile user accessing that web application, possibly while traveling or in a remote area with poor data plan coverage, will likely be very slow, if they are able to get online at all. Network throttling enables a developer to emulate an experience of a user. Most browser developer tools, such as the browser inspector, provide a function to emulate different network conditions. By emulating your user's experience via network throttling, you can more readily identify and fix load time issues.

Browser developer tools generally have network throttling options, to allow you to test your app under slow network conditions. Firefox's developer tools for example have a drop-down menu available in both the Network Monitor and Responsive Design Mode containing network speed options (e.g. Wi-Fi, good 3G, 2G)

See also
--------

* Synthetic monitoring