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

Compile
=======

**Compiling** is the process of transforming a computer program written in a given language into a set of instructions in another format or language. A **compiler** is a computer program to execute that task.

Typically, a compiler transforms code written in a higher-level language such as C++ or Rust or Java into executable (runnable) code — so-called **binary code** or **machine code**. WebAssembly, for example, is a form of executable binary code that can be compiled from code written in C++, Rust, C#, Go, Swift, and several other languages and that can then be run on any web page, in any browser.

Most compilers perform either ahead-of-time (AOT) compilation or just-in-time (JIT) compilation.

The GNU `gcc` compiler is one well-known example of an AOT compiler. AOT compilers are typically invoked from the command line in a shell environment (from within a terminal or console) or within an IDE.

JIT compilers are typically not invoked directly but are instead built into software runtimes internally, for the purpose of improving performance. For example, all major browsers now use JavaScript engines that have built-in JIT compilers.

Compilers may also translate among higher-level languages — for example, from TypeScript to JavaScript — in which case, they are often sometimes referred to as **transpilers**.

See also
--------

* Compiling from C/C++ to WebAssembly
* Compiling from Rust to WebAssembly
* Wikipedia: Compiler


Type conversion - MDN Web Docs Glossary: Definitions of Web-related terms

Type conversion
===============

Type conversion (or typecasting) means transfer of data from one data type to another. *Implicit conversion* happens when the compiler (for compiled languages) or runtime (for script languages like JavaScript) automatically converts data types. The source code can also *explicitly* require a conversion to take place.

For example, given the expression `"foo" + 1`, the Number `1` is implicitly converted into a String and the expression returns `"foo1"`. Given the instruction `Number("0x11")`, the string `"0x11"` is explicitly converted to the number `17`.

See also
--------

* Type conversion (Wikipedia)
* Glossary
    + Type
    + Type coercion


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

HSTS
====

**HTTP Strict Transport Security** lets a website inform the browser that it should never load the site using HTTP and should automatically convert all attempts to access the site using HTTP to HTTPS requests instead. It consists in one HTTP header, `Strict-Transport-Security`, sent by the server with the resource.

In other words, it tells the browser that changing the protocol from HTTP to HTTPS in a URL works (and is more secure) and asks the browser to do it for every request.

See also
--------

* `Strict-Transport-Security`
* OWASP Article: HTTP Strict Transport Security
* Wikipedia: HTTP Strict Transport Security


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

Firewall
========

A **firewall** is a system that filters network traffic. It can either let it pass or block it, according to some specified rules. For example, it can block incoming connections aimed at a certain port or outgoing connections to a certain IP address.

Firewalls can be as simple as a single piece of software, or more complex, like a dedicated machine whose only function is to act as a firewall.

See also
--------

* Firewall (computing) on Wikipedia


Page load time - MDN Web Docs Glossary: Definitions of Web-related terms

Page load time
==============

**Page load time** is the time it takes for a page to load, measured from navigation start to the start of the load event.

```js
let time = performance.timing;

let pageloadtime = time.loadEventStart - time.navigationStart;
```

While page load time 'sounds' like the perfect web performance metric, it isn't. Load times can vary greatly between users depending on device capabilities, network conditions, and, to a lesser extent, distance from the server. The development environment, where page load time is measured, is likely an optimal experience, not reflective of your users' reality. In addition, web performance isn't just about when the load event happens. It's also about perceived performance, responsiveness, jank and jitter.

See also
--------

* Navigation and resource timing
* `PerformanceNavigationTiming`
* `PerformanceResourceTiming`,


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

Glyph
=====

A **glyph** is a term used in typography for the visual representation of one or more characters.

The fonts used by a website contain different sets of glyphs, which represent the characters of the font.

See also
--------

* Glyph on Wikipedia
* Glyph, character and grapheme on Quora


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

Entity header
=============

**Warning:** The current HTTP/1.1 specification no longer refers to entities, entity headers or entity-body. Some of the fields are now referred to as Representation header fields.

An entity header is an HTTP header that describes the payload of an HTTP message (i.e. metadata about the message body). Entity headers include: `Content-Length`, `Content-Language`, `Content-Encoding`, `Content-Type`, `Expires`, etc. Entity headers may be present in both HTTP request and response messages.

In the following example, `Content-Length` is an entity header, while `Host` and `User-Agent` are requests headers:

```http
POST /myform.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Content-Length: 128
```

See also
--------

* Representation header


Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms

Grid Tracks
===========

A **grid track** is the space between two adjacent grid lines. They are defined in the *explicit grid* by using the `grid-template-columns` and `grid-template-rows` properties or the shorthand `grid` or `grid-template` properties. Tracks are also created in the *implicit grid* by positioning a grid item outside of the tracks created in the explicit grid.

The image below shows the first row track on a grid.

![Diagram showing a grid track.](/en-US/docs/Glossary/Grid_Tracks/1_grid_track.png)

Track sizing in the explicit grid
---------------------------------

When defining grid tracks using `grid-template-columns` and `grid-template-rows` you may use any length unit, and also the flex unit, `fr` which indicates a portion of the available space in the grid container.

Example
-------

The example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. Once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. One part is given to column 2, 3 parts to column 3.
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 3fr;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

Track sizing in the implicit grid
---------------------------------

Tracks created in the implicit grid are auto-sized by default, however you can define a size for these tracks using the `grid-auto-rows` and `grid-auto-columns` properties.

See also
--------

* Basic concepts of grid layout
* Definition of Grid Tracks in the CSS Grid Layout specification
* Property reference
    + `grid-template-columns`
    + `grid-template-rows`
    + `grid`
    + `grid-template`


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

CMS
===

A CMS (Content Management System) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code.

See also
--------

* Content management system on Wikipedia


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

WindowProxy
===========

A **`WindowProxy`** object is a wrapper for a `Window` object. A `WindowProxy` object exists in every browsing context. All operations performed on a `WindowProxy` object will also be applied to the underlying `Window` object it currently wraps. Therefore, interacting with a `WindowProxy` object is almost identical to directly interacting with a `Window` object. When a browsing context is navigated, the `Window` object its `WindowProxy` wraps is changed.

See also
--------

* HTML specification: WindowProxy section
* Stack Overflow question: WindowProxy and Window objects?


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

XML
===

eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The information technology (IT) industry uses many languages based on XML as data-description languages.

XML tags resemble HTML tags, but XML is much more flexible because it lets users define their own tags. In this way XML acts like a meta-language—that is, it can be used to define other languages, such as RSS. Moreover, HTML is a presentation language, whereas XML is a data-description language. This means that XML has far broader applications than just the Web. For example, Web services can use XML to exchange requests and responses.

See also
--------

* XML introduction


HTTP/2 - MDN Web Docs Glossary: Definitions of Web-related terms

HTTP/2
======

**HTTP/2** is a major revision of the HTTP network protocol.

The primary goals for HTTP/2 are to reduce latency by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of HTTP header fields, and add support for request prioritization and server push.

HTTP/2 does not modify the application semantics of HTTP in any way. All the core concepts found in HTTP 1.1, such as HTTP methods, status codes, URIs, and header fields, remain in place. Instead, HTTP/2 modifies how the data is formatted (framed) and transported between the client and server, both of which manage the entire process, and hides application complexity within the new framing layer. As a result, all existing applications can be delivered without modification.

See also
--------

* HTTP on MDN
* HTTP/2 on Wikipedia
* Glossary
    + HTTP
    + Latency


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

WebSockets
==========

*WebSocket* is a protocol that allows for a persistent TCP connection between server and client so they can exchange data at any time.

Any client or server application can use WebSocket, but principally web browsers and web servers. Through WebSocket, servers can pass data to a client without prior client request, allowing for dynamic content updates.

See also
--------

* Websocket on Wikipedia
* WebSocket reference on MDN
* Writing WebSocket client applications
* Writing WebSocket servers


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

Origin
======

Web content's **origin** is defined by the *scheme* (protocol), *hostname* (domain), and *port* of the URL used to access it. Two objects have the same origin only when the scheme, hostname, and port all match.

Some operations are restricted to same-origin content, and this restriction can be lifted using CORS.

Examples
--------

These are same origin because they have the same scheme (`http`) and hostname (`example.com`), and the different file path does not matter:

* `http://example.com/app1/index.html`
* `http://example.com/app2/index.html`

These are same origin because a server delivers HTTP content through port 80 by default:

* `http://example.com:80`
* `http://example.com`

These are not same origin because they use different schemes:

* `http://example.com/app1`
* `https://example.com/app2`

These are not same origin because they use different hostnames:

* `http://example.com`
* `http://www.example.com`
* `http://myapp.example.com`

These are not same origin because they use different ports:

* `http://example.com`
* `http://example.com:8080`
See also
--------

* Same-origin policy
* Site
* HTML specification: origin


Code unit - MDN Web Docs Glossary: Definitions of Web-related terms

Code unit
=========

A **code unit** is the basic component used by a character encoding system (such as UTF-8 or UTF-16). A character encoding system uses one or more code units to encode a Unicode code point.

In UTF-16 (the encoding system used for JavaScript strings) code units are 16-bit values. This means that operations such as indexing into a string or getting the length of a string operate on these 16-bit units. These units do not always map 1-1 onto what we might consider characters.

For example, characters with diacritics such as accents can sometimes be represented using two Unicode code points:

```js
const myString = "\u006E\u0303";
console.log(myString); // ñ
console.log(myString.length); // 2
```

Also, since not all of the code points defined by Unicode fit into 16 bits, many Unicode code points are encoded as a pair of UTF-16 code units, which is called a *surrogate pair*:

```js
const face = "🥵";
console.log(face.length); // 2
```

The `codePointAt()` method of the JavaScript `String` object enables you to retrieve the Unicode code point from its encoded form:

```js
const face = "🥵";
console.log(face.codePointAt(0)); // 129397
```

See also
--------

* Unicode encoding FAQ


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

Latency
=======

**Latency** is the network time it takes for a requested resource to reach its destination. Low latency is good, meaning there is little or no delay. High latency is bad, meaning it takes a long time for the requested resource to reach its destination.

Latency can be a factor in any kind of data flow, but is most commonly discussed in terms of network latency (the time it takes for a packet of data to travel from source to destination) and media codec latency (the time it takes for the source data to be encoded or decoded and reach the consumer of the resulting data).

See also
--------

* Understanding Latency


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

ISO
===

**ISO** (International Organization for Standardization) is a global association that develops uniform criteria coordinating the companies in each major industry.

See also
--------

* Official website


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

WebRTC
======

**WebRTC** (*Web Real-Time Communication*) is an API that can be used by video-chat, voice-calling, and P2P-file-sharing Web apps.

WebRTC consists mainly of these parts:

`getUserMedia()`

Grants access to a device's camera and/or microphone, and can plug in their signals to a RTC connection.

`RTCPeerConnection`

An interface to configure video chat or voice calls.

`RTCDataChannel`

Provides a method to set up a peer-to-peer data pathway between browsers.

See also
--------

* WebRTC on Wikipedia
* WebRTC API on MDN
* Browser support for WebRTC


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

IRC
===

**IRC** (*Internet Relay Chat*) is a worldwide chat system requiring an Internet connection and an IRC client, which sends and receives messages via the IRC server.

Designed in the late 1980s by Jarrko Oikarinen, IRC uses TCP and is an open protocol. The IRC server broadcasts messages to everyone connected to one of many IRC channels (each with their own ID).


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

Constant
========

A constant is a value that the programmer cannot change, for example numbers (1, 2, 42). With variables, on the other hand, the programmer can assign a new value to a variable name already in use.

Like variables, some constants are bound to identifiers. For example, the identifier `pi` could be bound to the value 3.14… .

See also
--------

* Constant on Wikipedia


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

Payload body
============

The HTTP message **payload body** is the *information* ("payload") part of the data that is sent in the HTTP Message Body (if any), prior to `transfer encoding` being applied. If transfer encoding is not used, the *payload body* and *message body* are the same!

For example, in this response the message body contains only the payload body: "Mozilla Developer Network":

```http
HTTP/1.1 200 OK
Content-Type: text/plain

Mozilla Developer Network
```

By contrast, the below response uses *transfer encoding* to encode the payload body into chunks. The payload body (information) sent is still "Mozilla Developer Network", but the message body includes additional data to separate the chunks:

```http
HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked

7\r\n
Mozilla\r\n
9\r\n
Developer\r\n
7\r\n
Network\r\n
0\r\n
\r\n
```

For more information see RFC 7230, section 3.3: Message Body and RFC 7230, section 3.3.1: Transfer-Encoding.


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

Hoisting
========

JavaScript **Hoisting** refers to the process whereby the interpreter appears to move the *declaration* of functions, variables, classes, or imports to the top of their scope, prior to execution of the code.

*Hoisting* is not a term normatively defined in the ECMAScript specification. The spec does define a group of declarations as *HoistableDeclaration*, but this only includes `function`, `function*`, `async function`, and `async function*` declarations. Hoisting is often considered a feature of `var` declarations as well, although in a different way. In colloquial terms, any of the following behaviors may be regarded as hoisting:

1. Being able to use a variable's value in its scope before the line it is declared. ("Value hoisting")
2. Being able to reference a variable in its scope before the line it is declared, without throwing a `ReferenceError`, but the value is always `undefined`. ("Declaration hoisting")
3. The declaration of the variable causes behavior changes in its scope before the line in which it is declared.
4. The side effects of a declaration are produced before evaluating the rest of the code that contains it.

The four function declarations above are hoisted with type 1 behavior; `var` declaration is hoisted with type 2 behavior; `let`, `const`, and `class` declarations (also collectively called *lexical declarations*) are hoisted with type 3 behavior; `import` declarations are hoisted with type 1 and type 4 behavior.

Some prefer to see `let`, `const`, and `class` as non-hoisting, because the temporal dead zone strictly forbids any use of the variable before its declaration. This dissent is fine, since hoisting is not a universally-agreed term. However, the temporal dead zone can cause other observable changes in its scope, which suggests there's some form of hoisting:

```js
const x = 1;
{
  console.log(x); // ReferenceError
  const x = 2;
}
```

If the `const x = 2` declaration is not hoisted at all (as in, it only comes into effect when it's executed), then the `console.log(x)` statement should be able to read the `x` value from the upper scope. However, because the `const` declaration still "taints" the entire scope it's defined in, the `console.log(x)` statement reads the `x` from the `const x = 2` declaration instead, which is not yet initialized, and throws a `ReferenceError`. Still, it may be more useful to characterize lexical declarations as non-hoisting, because from a utilitarian perspective, the hoisting of these declarations doesn't bring any meaningful features.

Note that the following is not a form of hoisting:

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

There's no "access before declaration" here; it's simply because `var` declarations are not scoped to blocks.

For more information on hoisting, see:

* `var`/`let`/`const` hoisting — Grammar and types guide
* `function` hoisting — Functions guide
* `class` hoisting — Classes guide
* `import` hoisting — JavaScript modules
See also
--------

* `var` statement — MDN
* `let` statement — MDN
* `const` statement — MDN
* `function` statement — MDN


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

CIA
===

CIA (Confidentiality, Integrity, Availability) (also called the CIA triad or AIC triad) is a model that guides an organization's policies for information security.

See also
--------

* CIA on Wikipedia


Input method editor - MDN Web Docs Glossary: Definitions of Web-related terms

Input method editor
===================

An Input Method Editor (IME) is a program that provides a specialized user interface for text input. Input method editors are used in many situations:

* To enter Chinese, Japanese, or Korean text using a Latin keyboard.
* To enter Latin text using a numeric keypad.
* To enter text on a touch screen using handwriting recognition.
See also
--------

* Input method
* Internationalization (I18N)


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

Snake case
==========

**Snake case** is a way of writing phrases without spaces, where spaces are replaced with underscores `_`, and the words are typically all lower case. It's often stylized as "snake\_case" to remind the reader of its appearance.

Snake casing is often used as a variable naming convention. The following names are in snake case: `left_shift`, `bitwise_invert`, `matrix_transpose`.

Note that snake case never contains upper case letters. Sometimes, constants are written in all-uppercase, such as JavaScript's `Number.MAX_SAFE_INTEGER`. This is not typically considered as snake case. Instead, it is sometimes called *screaming snake case*.

Snake case is the most popular convention in Python, Rust, and various other languages.

See also
--------

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


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

Firefox OS
==========

Firefox OS is a discontinued open source mobile operating system developed by Mozilla. See Firefox OS for more details.

Firefox OS was also often called Boot2Gecko before the project had an official name.


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

CORS
====

**CORS** (Cross-Origin Resource Sharing) is a system, consisting of transmitting HTTP headers, that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests.

The same-origin security policy forbids cross-origin access to resources. But CORS gives web servers the ability to say they want to opt into allowing cross-origin access to their resources.

CORS headers
------------

`Access-Control-Allow-Origin`

Indicates whether the response can be shared.

`Access-Control-Allow-Credentials`

Indicates whether or not the response to the request can be exposed when the credentials flag is true.

`Access-Control-Allow-Headers`

Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.

`Access-Control-Allow-Methods`

Specifies the method or methods allowed when accessing the resource in response to a preflight request.

`Access-Control-Expose-Headers`

Indicates which headers can be exposed as part of the response by listing their names.

`Access-Control-Max-Age`

Indicates how long the results of a preflight request can be cached.

`Access-Control-Request-Headers`

Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.

`Access-Control-Request-Method`

Used when issuing a preflight request to let the server know which HTTP method will be used when the actual request is made.

`Origin`

Indicates where a fetch originates from.

`Timing-Allow-Origin`

Specifies origins that are allowed to see values of attributes retrieved via features of the Resource Timing API, which would otherwise be reported as zero due to cross-origin restrictions.

See also
--------

* Cross-Origin Resource Sharing (CORS) on MDN
* Cross-origin resource sharing on Wikipedia
* Fetch specification


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

ICANN
=====

**ICANN** (Internet Corporation for Assigned Names and Numbers) is an international nonprofit that maintains the domain name system and the record of IP addresses.

See also
--------

* Official website
* ICANN on Wikipedia


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

Keyword
=======

A **keyword** is a word or phrase that describes content. Online keywords are used as queries for search engines or as words identifying content on websites.

When you use a search engine, you use keywords to specify what you are looking for, and the search engine returns relevant webpages. For more accurate results, try more specific keywords, such as "Blue Mustang GTO" instead of "Mustang". Webpages also use keywords in a meta tag (in the `<head>` section) to describe page content, so search engines can better identify and organize webpages.

See also
--------

* Keyword on Wikipedia


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

HTTP
====

The HyperText Transfer Protocol (**HTTP**) is the underlying network protocol that enables transfer of hypermedia documents on the Web, typically between a browser and a server so that humans can read them. The current version of the HTTP specification is called HTTP/2.

As part of a URI, the "http" within "http://example.com/" is called a "scheme". Resources using the "http" schema are typically transported over unencrypted connections using the HTTP protocol. The "https" scheme (as in "https://developer.mozilla.org") indicates that a resource is transported using the HTTP protocol, but over a secure TLS channel.

HTTP is textual (all communication is done in plain text) and stateless (no communication is aware of previous communications). This property makes it ideal for humans to read documents (websites) on the world wide web. However, HTTP can also be used as a basis for REST web services from server to server or `fetch()` requests within websites to make them more dynamic.

See also
--------

* HTTP on MDN
* HTTP on Wikipedia


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

Ciphertext
==========

In cryptography, a ciphertext is a scrambled message that conveys information but is not legible unless decrypted with the right cipher and the right secret (usually a key), reproducing the original Plaintext. A ciphertext's security, and therefore the secrecy of the contained information, depends on using a secure cipher and keeping the key secret.

See also
--------

* Ciphertext on Wikipedia


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

Houdini
=======

Houdini is a set of low level APIs that give developers the power to extend CSS, providing the ability to hook into the styling and layout process of a browser's rendering engine. Houdini gives developers access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS.

The benefit of Houdini is that developers can create CSS features without waiting for web standards specifications to define them and without waiting for every browser to fully implement the features.

While many of the features Houdini enables can be created with JavaScript, interacting directly with the CSSOM before JavaScript is enabled provides for faster parse times. Browsers create the CSSOM — including layout, paint, and composite processes — before applying any style updates found in scripts: layout, paint, and composite processes are repeated for updated JavaScript styles to be implemented. Houdini code doesn't wait for that first rendering cycle to be complete. Rather, it is included in that first cycle, creating renderable, understandable styles.

See also
--------

* Houdini APIs
* CSSOM
* CSS Paint API
* CSS Typed OM


Same-origin policy - MDN Web Docs Glossary: Definitions of Web-related terms

Same-origin policy
==================

The **same-origin policy** is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin.

It helps isolate potentially malicious documents, reducing possible attack vectors.

See also
--------

* Same-origin policy
* MDN Web Docs Glossary:
    + CORS
    + origin


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

Signature
=========

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

Signature (functions)
A **function signature** (or *type* signature, or *method* signature) defines input and output of Function or Method.
Signature (security)
A **signature**, or *digital signature*, is a protocol showing that a message is authentic.
See also
--------

* Signature on Wikipedia


First input delay - MDN Web Docs Glossary: Definitions of Web-related terms

First input delay
=================

**First input delay** (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.

It is the length of time, in milliseconds, between the first user interaction on a web page and the browser's response to that interaction. Scrolling and zooming are not included in this metric.

The time between when content is painted to the page and when all the functionality becomes responsive to human interaction often varies based on the size and complexity of the JavaScript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile devices). The longer the delay, the worse the user experience. Reducing site initialization time and eliminating long tasks can help eliminate first input delays.

See also
--------

* requestIdleCallback
* lazy loading


Replay attack - MDN Web Docs Glossary: Definitions of Web-related terms

Replay attack
=============

In web security, a *replay attack* happens when an attacker intercepts a previously-sent message and resends it later to get the same credentials as the original message, potentially with a different payload or instruction.

Replay attacks can be prevented by including a unique, single-use identifier with each message that the receiver can use to verify the authenticity of the transmission. This identifier can take the form of a session token or "number used only once" ("nonce").

See also
--------

* Replay attack on Wikipedia.


Round Trip Time (RTT) - MDN Web Docs Glossary: Definitions of Web-related terms

Round Trip Time (RTT)
=====================

**Round Trip Time (RTT)** is the length time it takes for a data packet to be sent to a destination plus the time it takes for an acknowledgment of that packet to be received back at the origin. The RTT between a network and server can be determined by using the `ping` command.

```bash
ping example.com
```

This will output something like:
```

PING example.com (216.58.194.174): 56 data bytes
64 bytes from 216.58.194.174: icmp_seq=0 ttl=55 time=25.050 ms
64 bytes from 216.58.194.174: icmp_seq=1 ttl=55 time=23.781 ms
64 bytes from 216.58.194.174: icmp_seq=2 ttl=55 time=24.287 ms
64 bytes from 216.58.194.174: icmp_seq=3 ttl=55 time=34.904 ms
64 bytes from 216.58.194.174: icmp_seq=4 ttl=55 time=26.119 ms
--- google.com ping statistics ---
5 packets transmitted, 5 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms
```

In the above example, the average round trip time is shown on the final line as 26.8ms.

See also
--------

* Time to First Byte (TTFB)
* Latency


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

W3C
===

The *World Wide Web Consortium* (W3C) is an international body that maintains Web-related rules and frameworks.

It consists of over 350 member-organizations that jointly develop Web standards, run outreach programs, and maintain an open forum for talking about the Web. The W3C coordinates companies in the industry to make sure they implement the same W3C standards.

Each standard passes through four stages of maturity: Working Draft (WD), Candidate Recommendation (CR), Proposed Recommendation (PR), and W3C Recommendation (REC).

See also
--------

* W3C website
* W3C on Wikipedia


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

Block
=====

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

Block (CSS)
A **block** on a webpage is an HTML element that appears on a new line, i.e. underneath the preceding element in a horizontal writing mode, and above the following element (commonly known as a *block-level element*). For example, `p` is by default a block-level element, whereas `a` is an *inline element* — you can put several links next to one another in your HTML source and they will sit on the same line as one another in the rendered output.
Block (scripting)
In JavaScript, a block is a collection of related statement enclosed in braces ("{}"). For example, you can put a block of statements after an `Statements/if...else` block, indicating that the interpreter should run the code inside the block if the condition is true, or skip the whole block if the condition is false.


Smoke Test - MDN Web Docs Glossary: Definitions of Web-related terms

Smoke Test
==========

A smoke test consists of functional or unit tests of critical software functionality. Smoke testing comes before further, in-depth testing.

Smoke testing answers questions like

* "Does the program start up correctly?"
* "Do the main control buttons function?"
* "Can you save a simple blank new test user account?"

If this basic functionality fails, there is no point investing time in more detailed QA work at this stage.

See also
--------

* Smoke testing (software) on Wikipedia


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

Hypertext
=========

Hypertext is text that contains links to other texts, as opposed to a single linear flow like in a novel.

The term was coined by Ted Nelson around 1965.

See also
--------

* Hypertext on Wikipedia


Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms

Grid Lines
==========

**Grid lines** are created anytime you use a CSS Grid Layout.

Example
-------

In the following example there is a grid with three column tracks and two row tracks. This gives us 4 column lines and 3 row lines.
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
```

Lines can be addressed using their line number. In a left-to-right language such as English, column line 1 will be on the left of the grid, row line 1 on the top. Lines numbers respect the writing mode of the document and so in a right-to-left language for example, column line 1 will be on the right of the grid. The image below shows the line numbers of the grid, assuming the language is left-to-right.

![Diagram showing the grid with lines numbered.](/en-US/docs/Glossary/Grid_Lines/1_diagram_numbered_grid_lines.png)

Lines are also created in the *implicit grid* when implicit tracks are created to hold content positioned outside of the *explicit grid*, however these lines cannot be addressed by a number.

Placing items onto the grid by line number
------------------------------------------

Having created a grid, you can place items onto the grid by line number. In the following example the item is positioned from column line 1 to column line 3, and from row line 1 to row line 3.
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="item">Item</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
```

Naming lines
------------

The lines created in the *explicit grid* can be named, by adding the name in square brackets before or after the track sizing information. When placing an item, you can then use these names instead of the line number, as demonstrated below.
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```

```html
<div class="wrapper">
  <div class="item">Item</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
  grid-column-start: col1-start;
  grid-column-end: col3-start;
  grid-row-start: row1-start;
  grid-row-end: rows-end;
}
```

See also
--------

### Property reference

* `grid-template-columns`
* `grid-template-rows`
* `grid-column-start`
* `grid-column-end`
* `grid-column`
* `grid-row-start`
* `grid-row-end`
* `grid-row`
### Further reading

* CSS Grid Layout Guide:
    + Basic concepts of grid layout
    + Line-based placement with CSS Grid
    + Layout using named grid lines
    + CSS Grids, Logical Values and Writing Modes
* Definition of Grid Lines in the CSS Grid Layout specification


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

HTTP header
===========

An **HTTP header** is a field of an HTTP request or response that passes additional context and metadata about the request or response. For example, a request message can use headers to indicate it's preferred media formats, while a response can use header to indicate the media format of the returned body. Headers are case-insensitive, begin at the start of a line and are immediately followed by a `':'` and a header-dependent value. The value finishes at the next CRLF or at the end of the message.

The HTTP and Fetch specifications refer to a number of header categories, including:

* Request header: Headers containing more information about the resource to be fetched or about the client itself.
* Response header: Headers with additional information about the response, like its location or about the server itself (name, version, …).
* Representation header: metadata about the resource in the message body (e.g. encoding, media type, etc.).
* Fetch metadata request header: Headers with metadata about the resource in the message body (e.g. encoding, media type, etc.).

A basic request with one header:

```http
GET /example.html HTTP/1.1
Host: example.com
```

Redirects have mandatory headers (`Location`):

```http
302 Found
Location: /NewPage.html
```

A typical set of headers:

```http
304 Not Modified
Access-Control-Allow-Origin: \*
Age: 2318192
Cache-Control: public, max-age=315360000
Connection: keep-alive
Date: Mon, 18 Jul 2016 16:06:00 GMT
Server: Apache
Vary: Accept-Encoding
Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
X-Backend-Server: developer6.webapp.scl3.mozilla.com
X-Cache: Hit from cloudfront
X-Cache-Info: cached
```

**Note:** Older versions of the specification referred to:

* General header: Headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.
* Entity header: Headers containing more information about the body of the entity, like its content length or its MIME-type (this is a superset of what are now referred to as the Representation metadata headers)

See also
--------

* List of all HTTP headers
* Syntax of headers in the HTTP specification
* Glossary
    + HTTP header
    + Request header
    + Response header
    + Representation header
    + Fetch metadata request header
    + Forbidden header name
    + Forbidden response header name
    + CORS-safelisted request header
    + CORS-safelisted response header


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

Local variable
==============

A variable whose name is bound to its value only within a local scope.

Example
-------

```js
let global = 5; // A global variable

function fun() {
  let local = 10; // A local variable
}
```

See also
--------

* Local variable on Wikipedia


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

XHTML
=====

**XHTML** is a term that was historically used to describe HTML documents written to conform with XML syntax rules.

The following example shows an HTML document and corresponding "XHTML" document, and the accompanying HTTP `Content-Type` headers they should be served with.

### HTML document

```html
<!-- Content-Type: text/html -->

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>HTML</title>
  </head>
  <body>
    <p>I am a HTML document</p>
  </body>
</html>
```

### XHTML document

```xml
<!-- Content-Type: application/xhtml+xml -->

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
  <head>
    <title>XHTML</title>
  </head>
  <body>
    <p>I am a XHTML document</p>
  </body>
</html>
```

In practice, very few "XHTML" documents are served over the web with a `Content-Type: application/xhtml+xml` header. Instead, even though the documents are written to conform to XML syntax rules, they are served with a `Content-Type: text/html` header — so browsers parse those documents using HTML parsers rather than XML parsers.

See also
--------

* HTML
* HTML5
* SVG
* MathML
* XML


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

API
===

An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. The API can be seen as a simple contract (the interface) between the application offering it and other items, such as third-party software or hardware.

In Web development, an API is generally a set of code features (e.g. methods, properties, events, and URLs) that a developer can use in their apps for interacting with components of a user's web browser, other software/hardware on the user's computer, or third-party websites and services.

For example:

* The getUserMedia API can be used to grab audio and video from a user's webcam, which is then available to the developer, for example, recording video and audio, broadcasting it to another user in a conference call, or capturing image stills from the video.
* The Geolocation API can be used to retrieve location information from services the user has available on their device (e.g. GPS), which can then be used in conjunction with other services, such as the Google Maps APIs, to plot the user's location on a custom map and show them what tourist attractions are in their area.
* The Web Animations API can be used to animate parts of a web page — for example, to programmatically move or rotate images.
See also
--------

* Web API reference
* API on Wikipedia


Compile time - MDN Web Docs Glossary: Definitions of Web-related terms

Compile time
============

The *compile time* is the time from when the program is first loaded until the program is parsed.

See also
--------

* Compile time on Wikipedia


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

IIFE
====

 An **IIFE** (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
 The name IIFE is promoted by Ben Alman in his blog.

```js
(function () {
  // …
})();

(() => {
  // …
})();

(async () => {
  // …
})();
```

It is a design pattern which is also known as a Self-Executing Anonymous Function and contains two major parts:

1. The first is the anonymous function with lexical scope enclosed within the `Grouping Operator` `()`. This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
2. The second part creates the immediately invoked function expression `()` through which the JavaScript engine will directly interpret the function.
Use cases
---------

### Avoid polluting the global namespace

 Because our application could include many functions and global variables from different source files, it's
 important to limit the number of global variables. If we have some initiation code that we don't need to use
 again, we could use the IIFE pattern. As we will not reuse the code again, using IIFE in this case is better than
 using a function declaration or a function expression.

```js
(() => {
  // some initiation code
  let firstVariable;
  let secondVariable;
})();

// firstVariable and secondVariable will be discarded after the function is executed.
```

### Execute an async function

An `async` IIFE allows you to use `await` and `for-await` even in older browsers and JavaScript runtimes that have no top-level await:

```js
const getFileStream = async (url) => {
  // implementation
};

(async () => {
  const stream = await getFileStream("https://domain.name/path/file.ext");
  for await (const chunk of stream) {
    console.log({ chunk });
  }
})();
```

### The module pattern

 We would also use IIFE to create private and public variables and methods. For a more sophisticated use of the module
 pattern and other use of IIFE, you could see the book Learning JavaScript Design Patterns by Addy Osmani.

```js
const makeWithdraw = (balance) =>
  ((copyBalance) => {
    let balance = copyBalance; // This variable is private
    const doBadThings = () => {
      console.log("I will do bad things with your money");
    };
    doBadThings();
    return {
      withdraw(amount) {
        if (balance >= amount) {
          balance -= amount;
          return balance;
        }
        return "Insufficient money";
      },
    };
  })(balance);

const firstAccount = makeWithdraw(100); // "I will do bad things with your money"
console.log(firstAccount.balance); // undefined
console.log(firstAccount.withdraw(20)); // 80
console.log(firstAccount.withdraw(30)); // 50
console.log(firstAccount.doBadThings); // undefined; this method is private
const secondAccount = makeWithdraw(20); // "I will do bad things with your money"
console.log(secondAccount.withdraw(30)); // "Insufficient money"
console.log(secondAccount.withdraw(20)); // 0
```

### For loop with var before ES6

 We could see the following use of IIFE in some old code, before the introduction of the statements **let** and **const**
 in **ES6** and the block scope. With the statement **var**, we have only function scopes and the global scope.
 Suppose we want to create 2 buttons with the texts Button 0 and Button 1 and when we click
 them, we would like them to alert 0 and 1. The following code doesn't work:

```js
for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
    console.log(i);
  };
  document.body.appendChild(button);
}
console.log(i); // 2
```

 When clicked, both Button 0 and Button 1 alert 2 because `i` is global,
 with the last value 2. To fix this problem before ES6, we could use the IIFE pattern:

```js
for (var i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = (function (copyOfI) {
    return function () {
      console.log(copyOfI);
    };
  })(i);
  document.body.appendChild(button);
}
console.log(i); // 2
```

 When clicked, Buttons 0 and 1 alert 0 and 1.
 The variable `i` is globally defined.
 Using the statement **let**, we could simply do:

```js
for (let i = 0; i < 2; i++) {
  const button = document.createElement("button");
  button.innerText = `Button ${i}`;
  button.onclick = function () {
    console.log(i);
  };
  document.body.appendChild(button);
}
console.log(i); // Uncaught ReferenceError: i is not defined.
```

When clicked, these buttons alert 0 and 1.

See also
--------

* IIFE (Wikipedia)
* Glossary
    + Function
    + Self-Executing Anonymous Function


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

Repo
====

In a revision control system like Git or SVN, a repo (i.e. "repository") is a place that hosts an application's code source, together with various metadata.

See also
--------

* Repository on Wikipedia


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

Primitive
=========

In JavaScript, a **primitive** (primitive value, primitive data type) is data that is not an object and has no methods or properties. There are 7 primitive data types:

* string
* number
* bigint
* boolean
* undefined
* symbol
* null

Most of the time, a primitive value is represented directly at the lowest level of the language implementation.

All primitives are *immutable*; that is, they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned to a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered. The language does not offer utilities to mutate primitive values.

Primitives have no methods but still behave as if they do. When properties are accessed on primitives, JavaScript *auto-boxes* the value into a wrapper object and accesses the property on that object instead. For example, `"foo".includes("f")` implicitly creates a `String` wrapper object and calls `String.prototype.includes()` on that object. This auto-boxing behavior is not observable in JavaScript code but is a good mental model of various behaviors — for example, why "mutating" primitives does not work (because `str.foo = 1` is not assigning to the property `foo` of `str` itself, but to an ephemeral wrapper object).

See also
--------

* JavaScript data types
* Primitive data type (Wikipedia)
* Glossary
    + JavaScript
    + string
    + number
    + bigint
    + boolean
    + null
    + undefined
    + symbol


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

Response header
===============

A **response header** is an HTTP header that can be used in an HTTP response and that doesn't relate to the content of the message. Response headers, like `Age`, `Location` or `Server` are used to give a more detailed context of the response.

Not all headers appearing in a response are categorized as *response headers* by the specification. For example, the `Content-Type` header is a representation header indicating the original type of data in the body of the response message (prior to the encoding in the `Content-Encoding` representation header being applied). However, "conversationally" all headers are usually referred to as response headers in a response message.

The following shows a few response and representation headers after a `GET` request.

```http
200 OK
Access-Control-Allow-Origin: \*
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY
```

See also
--------

* List of all HTTP headers
* Glossary
    + Representation header
    + HTTP header
    + Response header
    + Fetch metadata response header
    + Request header


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

Stylesheet
==========

A **stylesheet** is a set of CSS rules used to control the layout and design of a webpage or document. *Internal* stylesheets are placed inside a `<style>` element inside the `<head>` of a web document, and *external* stylesheets are placed inside a separate `.css` file, which is applied to a document by referencing the file inside a `<link>` element in the document's head.

External stylesheets are generally preferred because they allow you to control the styling of multiple pages from a single place, rather than having to repeat the CSS across each page.

See also
--------

* CSS first steps
* Stylesheets on Wikipedia


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

Global object
=============

A global object is an object that always exists in the global scope.

In JavaScript, there's always a global object defined. In a web browser, when scripts create global variables defined with the `var` keyword, they're created as members of the global object. (In Node.js this is not the case.) The global object's interface depends on the execution context in which the script is running. For example:

* In a web browser, any code which the script doesn't specifically start up as a background task has a `Window` as its global object. This is the vast majority of JavaScript code on the Web.
* Code running in a `Worker` has a `WorkerGlobalScope` object as its global object.
* Scripts running under Node.js have an object called `global` as their global object.

The `globalThis` global property allows one to access the global object regardless of the current environment.

`var` statements and function declarations at the top level create properties of the global object. On the other hand, `let` and `const` declarations never create properties of the global object.

The properties of the global object are automatically added to the global scope.

In JavaScript, the global object always holds a reference to itself:

```js
console.log(globalThis === globalThis.globalThis); // true (everywhere)
console.log(window === window.window); // true (in a browser)
console.log(self === self.self); // true (in a browser or a Web Worker)
console.log(frames === frames.frames); // true (in a browser)
console.log(global === global.global); // true (in Node.js)
```

See also
--------

* MDN Web Docs Glossary
    + global scope
    + object
* `Window`
* `WorkerGlobalScope`
* `global`


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

GPU
===

The GPU (Graphics Processing Unit) is a computer component similar to the CPU (Central Processing Unit). It specializes in the drawing of graphics (both 2D and 3D) on your monitor.


The Khronos Group - MDN Web Docs Glossary: Definitions of Web-related terms

The Khronos Group
=================

**The Khronos Group** is an open, non-profit, member-driven consortium of over 150 industry-leading companies. Their purpose is to create advanced, royalty-free interoperability standards for 3D graphics, augmented and virtual reality, parallel programming, vision acceleration, and machine learning.

The organization maintains standards such as OpenGL and the `WebGL API`.

See also
--------

* The Khronos Group on Wikipedia
* The Khronos Group website


Node.js - MDN Web Docs Glossary: Definitions of Web-related terms

Node.js
=======

Node.js is a cross-platform JavaScript runtime environment that allows developers to build server-side and network applications with JavaScript.

Node Package Manager (npm)
--------------------------

npm is a package manager that is downloaded and bundled alongside Node.js. Its command-line (CLI) client `npm` can be used to download, configure and create packages for use in Node.js projects. Downloaded packages can be imported by ES imports and CommonJS `require()` without including the dependency directory `node_modules/` they are downloaded to, as Node.js resolves packages without a relative or absolute path specified in their import.

Packages hosted on npm are downloaded from the registry at https://registry.npmjs.org/, but the CLI can be configured to use any compatible instance.

See also
--------

* Node.js on Wikipedia
* Node.js website
* API reference documentation
* Guides
* npm Documentation


Scroll chaining - MDN Web Docs Glossary: Definitions of Web-related terms

Scroll chaining
===============

**Scroll chaining** refers to the behavior observed when a user scrolls past the Scroll boundary of a scrollable element, causing scrolling on an ancestor element.

When a user scrolls within a scrollable element such as a `<div>` or `<textarea>` and the scrollport boundary (top, bottom, left or right) of the scrollable element is reached, there may be a "chained effect" in which the scroll action is seamlessly propagated to the parent element. This behavior creates a continuous scrolling experience, both vertically and horizontally.

A **scroll chain** is the order of scrollable elements where the scrolling action passes from one element to another. This happens when an inner element is scrolled to its limit, and the scrolling continues to its parent element, creating a 'chain' of scrolling actions. Chaining typically recurses up the containing block.

See also
--------

* `overscroll-behavior` CSS property
* CSS overflow module
* CSS overscroll behavior module
* CSS scroll snap module


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

Deserialization
===============

The process whereby a lower-level format (e.g. that has been transferred over a network, or stored in a data store) is translated into a readable object or other data structure.

In JavaScript, for example, you can deserialize a JSON string to an object by calling the function `JSON.parse()`.

See also
--------

* Serialization on Wikipedia


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

Rsync
=====

Rsync is an open-source file synchronizing tool that provides incremental file transfer. It can be used over insecure and secure transports (like SSH). It is available on most Unix-based systems (such as macOS and Linux) and Windows. There are also GUI-based tools that use rsync, for example, Acrosync.

A basic command looks like this:

```bash
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
```

* `-options` is a dash followed by one or more letters, for example `-v` for verbose error messages, and `-b` to make backups. See the full list of options at the rsync man page. (Search for "Options summary.")
* `SOURCE` is the path to the local file or directory that you want to copy or synchronize
* `user@` is the credentials of the user on the remote server you want to copy files over to.
* `x.x.x.x` is the IP address of the remote server.
* `DESTINATION` is the path to the location you want to copy your directory or files to on the remote server.

You can also make a connection over SSH using the `-e` option as shown:

```bash
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
```

There are numerous examples on the Internet, including those at the official website, and at the Wikipedia entry for rsync.


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

Fetch directive
===============

**CSP fetch directives** are used in a `Content-Security-Policy` header and control locations from which certain resource types may be loaded. For instance, `script-src` allows developers to allow trusted sources of script to execute on a page, while `font-src` controls the sources of web fonts.

All fetch directives fall back to `default-src`. That means, if a fetch directive is absent in the CSP header, the user agent will look for the `default-src` directive.

See Fetch directives for a complete list.

See also
--------

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


Top layer - MDN Web Docs Glossary: Definitions of Web-related terms

Top layer
=========

The **top layer** is a specific layer that spans the entire width and height of the viewport and sits on top of all other layers displayed in a web document. It is created by the browser to contain elements that should appear on top of all other content on the page.

Elements placed in the top layer generate a new stacking context, as do their corresponding `::backdrop` pseudo-elements.

Elements that will appear in the top layer include:

* Fullscreen elements, i.e. elements that have been caused to display in fullscreen mode by a successful `Element.requestFullscreen()` call.
* `<dialog>` elements displayed as a modal via a successful `HTMLDialogElement.showModal()` call.
* Popover elements shown via a successful `HTMLElement.showPopover()` call.

Some browsers, such as Chrome, show elements placed in the top layer inside a special DOM tree entry. For example:

![An element in the top layer, as shown in the chrome devtools](/en-US/docs/Glossary/Top_layer/top_layer_devtools.png)

Note that the top layer is an internal browser concept and cannot be directly manipulated from code. You can target elements placed in the top layer using CSS and JavaScript, but you cannot target the top layer itself.

See also
--------

* The stacking context
* Fullscreen API
* `<dialog>` element, `HTMLDialogElement` interface
* Popover API
* `:fullscreen` pseudo-class


Frame rate (FPS) - MDN Web Docs Glossary: Definitions of Web-related terms

Frame rate (FPS)
================

A **frame rate** is the speed at which the browser is able to recalculate, layout and paint content to the display. The **frames per second**, or **fps**, is how many frames can be repainted in one second. The goal frame rate for in website computer graphics is 60fps.

Movies generally have a frame rate of 24 fps. They are able to have fewer frames per second because the illusion of life is created with motion blurs. When moving on a computer screen there are no motion blurs (unless you are animating an image sprite with motion blurs).

See also
--------

* Frame rate (Wikipedia)
* FPS (Glossary)


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

IANA
====

**IANA** (Internet Assigned Numbers Authority) is a subsidiary of ICANN charged with recording and/or assigning domain names, IP addresses, and other names and numbers used by Internet protocols.

See also
--------

* Official website
* IANA on Wikipedia


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

Telnet
======

**Telnet** is a command line tool and an underlying TCP/IP protocol for accessing remote computers.

See also
--------

* Telnet on Wikipedia


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

Pseudo-element
==============

In CSS, a **pseudo-element** selector applies styles to parts of your document content in scenarios where there isn't a specific HTML element to select. For example, rather than putting the first letter of each paragraph in its own element, you can style them all with `p``::first-letter`.

See also
--------

* Pseudo-elements


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

Operator
========

Reserved **syntax** consisting of punctuation or alphanumeric characters that carries out built-in functionality. For example, in JavaScript the addition operator ("+") adds numbers together and concatenates strings, whereas the "not" operator ("!") negates an expression — for example making a `true` statement return `false`.

See also
--------

* Operator (computer programming) on Wikipedia
* JavaScript operators


Bézier curve - MDN Web Docs Glossary: Definitions of Web-related terms

Bézier curve
============

A **Bézier curve** (pronounced [bezje]) is a mathematically described curve used in computer graphics and animation. In vector images, they are used to model smooth curves that can be scaled indefinitely.

The curve is defined by a set of control points with a minimum of two. Web related graphics and animations often use cubic Béziers, which are curves with four control points P0, P1, P2, and P3.

To draw a quadratic Bézier curve, two imaginary lines are drawn, one from P0 to P1 and the other from P1 to P2. A third imaginary line is drawn with its starting point moving steadily on the first helper line and the end point on the second helper line. On this imaginary line a point is drawn from its starting point moving steadily to its end point. The curve this point describes is the Bézier curve. Here's an animated illustration demonstrating the creation of the curve:

![Drawing a Bézier curve](/en-US/docs/Glossary/Bezier_curve/b%C3%A9zier_2_big.gif)

See also
--------

* Bézier curve on Wikipedia
* Cubic Bézier easing functions in CSS
* `keySplines` SVG attribute


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

Guard
=====

Guard is a feature of `Headers` objects (as defined in the `Fetch spec`, which affects whether methods such as `set()` and `append()` can change the header's contents. For example, `immutable` guard means that headers can't be changed. For more information, read Fetch basic concepts: guard.


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

Element
=======

An **element** is a part of a webpage. In XML and HTML, an element may contain a data item or a chunk of text or an image, or perhaps nothing. A typical element includes an opening tag with some attributes, enclosed text content, and a closing tag.

![Example: in
Hello world!
, '
' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '
' is a closing tag.](/en-US/docs/Glossary/Element/anatomy-of-an-html-element.png)

Elements and tags are *not* the same things. Tags begin or end an element in source code, whereas elements are part of the DOM, the document model for displaying the page in the browser.

See also
--------

* Getting started with HTML
* Defining custom elements
* The `Element` interface, representing an element in the DOM.


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

Semantics
=========

In programming, **Semantics** refers to the *meaning* of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)

Semantics in JavaScript
-----------------------

In JavaScript, consider a function that takes a string parameter, and returns an `<li>` element with that string as its `textContent`. Would you need to look at the code to understand what the function did if it was called `build('Peach')`, or `createLiWithContent('Peach')`?

Semantics in CSS
----------------

In CSS, consider styling a list with `li` elements representing different types of fruits. Would you know what part of the DOM is being selected with `div > ul > li`, or `.fruits__item`?

Semantics in HTML
-----------------

In HTML, for example, the h1 element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

```html
<h1>This is a top level heading</h1>
```

By default, most browser's user agent stylesheet will style an h1 with a large font size to make it *look* like a heading (although you could style it to look like anything you wanted).

On the other hand, you could make any element *look* like a top level heading. Consider the following:

```html
<span style="font-size: 32px; margin: 21px 0;">Not a top-level heading!</span>
```

This will render it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above. It is therefore a good idea to use the right HTML element for the right job.

HTML should be coded to represent the *data* that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of CSS.

Some of the benefits from writing semantic markup are as follows:

* Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
* Screen readers can use it as a signpost to help visually impaired users navigate a page
* Finding blocks of meaningful code is significantly easier than searching through endless `div`s with or without semantic or namespaced classes
* Suggests to the developer the type of data that will be populated
* Semantic naming mirrors proper custom element/component naming

When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.

Semantic elements
-----------------

These are *some* of the roughly 100 semantic elements available:

* `<article>`
* `<aside>`
* `<details>`
* `<figcaption>`
* `<figure>`
* `<footer>`
* `<form>`
* `<header>`
* `<main>`
* `<mark>`
* `<nav>`
* `<section>`
* `<summary>`
* `<time>`
See also
--------

* HTML element reference on MDN
* Using HTML sections and outlines on MDN
* The meaning of semantics in computer science on Wikipedia
* Glossary
    + SEO


Advance measure - MDN Web Docs Glossary: Definitions of Web-related terms

Advance measure
===============

The **advance measure** is the total space the glyph takes, either horizontally or vertically, depending on the current writing direction. It is equal to the distance traveled by the cursor, placed directly in front of and then shifted behind the character.

 This term is used in the definition of several CSS `<length>` units.
 The *advance measure* of unit `ch` is either the width or height of character "0" in the given typeface, depending on whether the horizontal or vertical axis is currently used. A similar *advance measure* of unit `ic` is the width or height of the "水" character.

See also
--------

* `<length>`
* Learn: CSS values and units
* TextMetrics API


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

STUN
====

**STUN** (Session Traversal Utilities for NAT) is an auxiliary protocol for transmitting data around a NAT (Network Address Translator). STUN returns the IP address, port, and connectivity status of a networked computer behind a NAT.

See also
--------

* STUN on Wikipedia
* WebRTC protocols
### Technical reference

* Specification


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

Texel
=====

In 3D graphics, a **texel** is a single pixel within a texture. *Textures* are images presented on a polygon's surface within a 3D rendered image. A texture is characterized by a collection of texels, similar to how an image is characterized by a collection of pixels.

A pixel in a raster image file is a series of bits containing color data, and sometimes opacity data, which maps to display pixels on an output device such as a computer monitor. When a pixel belongs to an image used as a texture resource, it is called a 'texture pixel' or shortened to 'texel'. Instead of mapping directly to screen pixels, a texel's data is mapped to a location in the coordinate space of the 3D object being modeled. Textures can be used to convey color and other surface qualities such as depth and reflectivity. Multiple textures may be layered to create complex surface overlays.

The process of mapping the appropriate texels to their corresponding points on a polygon is called **texture mapping**. Texture mapping is a stage of the process of rendering a 3D image for display. When the source texel grid and destination pixel grid do not align, further **texture filtering** is applied to smooth the resultant texture-mapped pixels (texture *magnification* or *minification*). The final output of the rendering process is a flattened 2D projection of the 3D model, where the texture has been 'wrapped' around the model.

During the render pipeline, texture mapping is typically done prior to lighting the scene; however, in WebGL, lighting is performed as part of the texture mapping process.

See also
--------

* Texel (graphics) on Wikipedia
* Texture mapping on Wikipedia
* Texture filtering on Wikipedia
* Using textures in WebGL
* Lighting in WebGL
* Animating textures in WebGL


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

URN
===

URN (Uniform Resource Name) is a URI in a standard format, referring to a resource without specifying its location or whether it exists. This example comes from RFC3986: `urn:oasis:names:specification:docbook:dtd:xml:4.1.2`

See also
--------

* URN on Wikipedia


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

Domain name
===========

A **domain name** is a website's address on the Internet. Domain names are used in URLs to identify which server a specific webpage belongs to. The domain name consists of a hierarchical sequence of names (labels) separated by periods (dots) and ending with an extension.

See also
--------

* Domain name on Wikipedia
* Understanding domain names


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

HMAC
====

**Hash-based message authentication code**(*HMAC*) is a protocol used for cryptographically authenticating messages.

It can use any kind of cryptographic functions, and its strength depends on the underlying function (SHA1 or MD5 for instance), and the chosen secret key. With such a combination, the HMAC verification algorithm is then known with a compound name such as HMAC-SHA1.

HMAC is used to ensure both integrity and authentication.

See also
--------

* HMAC on Wikipedia
* RFC 2104 on IETF


Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms

Forbidden header name
=====================

A **forbidden header name** is the name of any HTTP header that cannot be modified programmatically; specifically, an HTTP **request** header name (in contrast with a Forbidden response header name).

Modifying such headers is forbidden because the user agent retains full control over them. Names starting with `Sec-` are reserved for creating new headers safe from APIs that grant developers control over headers, such as `fetch()`.

Forbidden header names start with `Proxy-` or `Sec-`, or are one of the following names:

* `Accept-Charset`
* `Accept-Encoding`
* `Access-Control-Request-Headers`
* `Access-Control-Request-Method`
* `Connection`
* `Content-Length`
* `Cookie`
* `Date`
* `DNT`
* `Expect`
* `Host`
* `Keep-Alive`
* `Origin`
* `Permissions-Policy`
* `Proxy-`
* `Sec-`
* `Referer`
* `TE`
* `Trailer`
* `Transfer-Encoding`
* `Upgrade`
* `Via`

**Note:** The `User-Agent` header is no longer forbidden, as per spec — see forbidden header name list (this was implemented in Firefox 43) — it can now be set in a Fetch Headers object, or with the setRequestHeader() method of `XMLHttpRequest`. However, Chrome will silently drop the header from Fetch requests (see Chromium bug 571722).

**Note:** While the `Referer` header is listed as a forbidden header in the spec, the user agent does not retain full control over it and the header can be programmatically modified. For example, when using `fetch()`, the `Referer` header can be programmatically modified via the `referrer` option.

See also
--------

Forbidden response header name (Glossary)


Browsing context - MDN Web Docs Glossary: Definitions of Web-related terms

Browsing context
================

A **browsing context** is an environment in which a browser displays a `Document`. In modern browsers, it usually is a *tab*, but can be a *window* or even only parts of a page, like a *frame* or an *iframe*.

Each browsing context has an origin (that of the active document) and an ordered history of previously displayed documents.

Communication between browsing contexts is severely constrained. Between browsing contexts of the same origin, a `BroadcastChannel` can be opened and used.

See also
--------

* See origin


Block-level content - MDN Web Docs Glossary: Definitions of Web-related terms

Block-level content
===================

In CSS, content that participates in block layout is called **block-level content**.

In a block layout, boxes are laid out one after the other, vertically, beginning at the top of a containing block. Each box's left outer edge touches the left edge of the containing block.
A block-level element always starts on a new line. In horizontal writing modes, like English or Arabic, it occupies the entire horizontal space of its parent element (container) and vertical space equal to the height of its contents, thereby creating a "block".

**Note:** The above behavior of block layout changes if the containing block's `writing-mode` is set to value other than the default value.

**Note:** HTML (*HyperText Markup Language*) elements historically were categorized as either "block-level" elements or "inline" elements. As a presentational characteristic, this is now specified by CSS.

Examples
--------

In this example, two paragraph (`<p>`) elements are put in a `<div>`.

```html
<div>
  <p>
    This the first paragraph. The background color of these paragraphs have been
    colored to distinguish them from their parent element.
  </p>
  <p>This is the second paragraph.</p>
</div>
```

The paragraph(`<p>`) elements are block-level by default. That is why they are displayed in block layout:
```

p {
  background-color: #8abb55;
}
```

See also
--------

* Inline-level content
* Block formatting context
* `display`
* `writing-mode`


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

Expando
=======

Expando properties are properties added to DOM nodes with JavaScript, where those properties are not part of the object's DOM specification:

```js
window.document.foo = 5; // foo is an expando
```

The term may also be applied to properties added to objects without respecting the object's original intent, such as non-numeric named properties added to an Array.


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

CardDAV
=======

**CardDAV** (vCard Extension to WebDAV) is a protocol standardized by the IETF and used to remote-access or share contact information over a server.

See also
--------

* CardDAV on Wikipedia
* RFC 6352: vCard Extensions to Web Distributed Authoring and Versioning (WebDAV)


Transport Layer Security (TLS) - MDN Web Docs Glossary: Definitions of Web-related terms

Transport Layer Security (TLS)
==============================

**Transport Layer Security (TLS)**, formerly known as Secure Sockets Layer (SSL), is a protocol used by applications to communicate securely across a network, preventing tampering with and eavesdropping on email, web browsing, messaging, and other protocols. Both TLS and SSL are client / server protocols that ensure communication privacy by using cryptographic protocols to provide security over a network. When a server and client communicate using TLS, it ensures that no third party can eavesdrop or tamper with any message.

All modern browsers support the TLS protocol, requiring the server to provide a valid digital certificate confirming its identity in order to establish a secure connection. It is possible for both the client and server to mutually authenticate each other, if both parties provide their own individual digital certificates.

**Note:** All major browsers began removing support for TLS 1.0 and 1.1 in early 2020; you'll need to make sure your web server supports TLS 1.2 or 1.3 going forward. From version 74 onwards, Firefox will return a Secure Connection Failed error when connecting to servers using the older TLS versions (Firefox bug 1606734).

See also
--------

* Transport Layer Security (Wikipedia)
* RFC 8446 (The Transport Layer Security Protocol, Version 1.3)
* RFC 5246 (The Transport Layer Security Protocol, Version 1.2)
* Transport Layer Security
* OWASP: Transport Layer Protection Cheat Sheet
* Glossary
    + HTTPS
    + SSL


Adobe Flash - MDN Web Docs Glossary: Definitions of Web-related terms

Adobe Flash
===========

Flash is an obsolete technology developed by Adobe for viewing expressive web applications, multimedia content, and streaming media.

As of 2021, Flash is no longer supported by Adobe or any major web browsers.

See also
--------

* Adobe Flash end-of-life announcement
* Saying goodbye to Flash in Chrome
* Firefox Roadmap for Flash End-of-Life
* Microsoft Windows Flash Player removal


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

Media
=====

The term **media** is an overloaded one when talking about the web; it takes on different meanings depending on the context.

Media (Audio-visual presentation)
The term **media** (more accurately, **multimedia**) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, TV shows, or any other form of content that is presented over a period of time.
Media (CSS)
In the context of CSS (Cascading Style Sheets), the term ***media*** refers to the destination to which the document is to be drawn by the rendering engine.
See also
--------

* Media on Wikipedia


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

IndexedDB
=========

IndexedDB is a Web API for storing large data structures within browsers and indexing them for high-performance searching. Like an SQL-based RDBMS, IndexedDB is a transactional database system. However, it uses JavaScript objects rather than fixed columns tables to store data.

See also
--------

* The IndexedDB API on MDN
* The W3C specification for IndexedDB


IP Address - MDN Web Docs Glossary: Definitions of Web-related terms

IP Address
==========

An **IP address** is a number used to address each device on an IP network uniquely.

*IP* stands for *Internet Protocol* which is the protocol layer with which the address is associated.

"IP address" typically still refers to 32-bit IPv4 addresses until IPv6 is deployed more broadly.

See also
--------

* IP address on Wikipedia


Apple Safari - MDN Web Docs Glossary: Definitions of Web-related terms

Apple Safari
============

Safari is a Web browser developed by Apple and bundled with macOS, iPadOS, and iOS. It's based on the open-source WebKit engine.

See also
--------

* Safari on Wikipedia
* Safari on apple.com
* The WebKit project
* WebKit nightly build
* Reporting a bug for Safari


RTSP: Real-time streaming protocol - MDN Web Docs Glossary: Definitions of Web-related terms

RTSP: Real-time streaming protocol
==================================

Real-time streaming protocol (RTSP) is a network protocol that controls how the streaming of a media should occur between a server and a client. Basically, RTSP is the protocol that describes what happens when you click "Pause"/"Play" when streaming a video. If your computer were a remote control and the streaming server a television, RTSP would describe how the instruction of the remote control affects the TV.

See also
--------

* RTSP on Wikipedia
* RFC 7826 (one of the documents that specifies precisely how the protocol works)
* Glossary
    + RTSP


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

Server
======

A server is a software or hardware offering a service to a user, usually referred to as client. A hardware server is a shared computer on a network, usually powerful and housed in a data center. A software server (often running on a hardware server) is a program that provides services to client programs or a user interface to human clients.

Services are provided generally over local area networks or wide area networks such as the internet. A client program and server program traditionally connect by passing messages encoded using a protocol over an API.

For example:

* An Internet-connected Web server is sending a HTML file to your browser software so that you can read this page
* Local area network server for file, name, mail, print, and fax
* Minicomputers, mainframes, and super computers at data centers
See also
--------

* Introduction to servers
* Server (computing) on Wikipedia


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

Fingerprinting
==============

**Fingerprinting** is a practice in which websites identify a particular browser (and by extension, a particular user) by collecting and combining distinguishing features of the browser and underlying operating system. Elements of a fingerprint might include, for example:

* the browser version
* the timezone and preferred language
* the set of video or audio codecs that are available on the system
* the fonts installed on the system
* the state of the browser's settings
* the computer's display size and resolution

A website can retrieve information like this by executing JavaScript and CSS on the device, and by combining this data can often create a unique fingerprint for a browser, which can then be used to track users across the web.

Web standards are designed in such a way as to minimize the ability of a website to collect identifying information, and browsers typically add their own protections as well.

See also
--------

* Cover Your Tracks: a tool to show the data a website can use to fingerprint your browser.
* Mitigating Browser Fingerprinting in Web Specifications: best practices for specification authors to prevent fingerprinting.


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

Ligature
========

A **ligature** is a joining of two characters into one shape. For example, in French "œ" is a ligature of "oe".

You can implement ligatures in your webpage with `font-variant-ligatures`.

See also
--------

* Ligature on Wikipedia


Session Hijacking - MDN Web Docs Glossary: Definitions of Web-related terms

Session Hijacking
=================

**Session hijacking** occurs when an attacker takes over a valid session between two computers. The attacker steals a valid session ID in order to break into the system and snoop data.

Most authentication occurs only at the start of a TCP session. In TCP session hijacking, an attacker gains access by taking over a TCP session between two machines in mid session.

![The attacker sniffs and accesses a legitimate session id from a user interacting with a web server, then uses that session identifier to spoof the session between the regular user and the server to exploit the user's session and access the server directly.](/en-US/docs/Glossary/Session_Hijacking/session_hijacking_3.jpg)

### Session hijacking occurs because

* no account lockout for invalid session IDs
* weak session-ID generation algorithm
* insecure handling
* indefinite session expiration time
* short session IDs
* transmission in plain text
### Session hijacking process

1. **Sniff**, that is perform a man-in-the-middle (MITM) attack, place yourself between victim and server.
2. **Monitor** packets flowing between server and user.
3. **Break** the victim machine's connection.
4. **Take control** of the session.
5. **Inject** new packets to the server using the Victim's Session ID.
### Protection against session hijacking

* create a secure communication channel with SSH (secure shell)
* pass authentication cookies over HTTPS connection
* implement logout functionality so the user can end the session
* generate the session ID after successful login
* pass encrypted data between the users and the web server
* use a string or long random number as a session key
See also
--------

* Session hijacking on Wikipedia


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

RIL
===

RIL (Radio Interface Layer) is a mobile operating system component which communicates between the device's software and the device's phone, radio, or modem hardware.

See also
--------

* Radio Interface Layer on Wikipedia


Scroll boundary - MDN Web Docs Glossary: Definitions of Web-related terms

Scroll boundary
===============

A **scroll boundary** is the point at which a scrollable element cannot be scrolled any further in a particular direction, either at the top or bottom (or left/right for horizontal scrolling). This typically is the edge of the scrollport.

When the content of a scroll container does not exceed the container size in the scrolling direction, the container is considered to be at its scroll boundary at all times. This is because there's no extra content to scroll through. If the content is prevented from scrolling, such as when `overflow: hidden` is set, the element is not a scroll container, and therefore, there is no scroll boundary.

When the scroll boundary of the scrollport is reached by a user scrolling the content, a visual effect such as a bounce or a functional action like pull-to-refresh on mobile devices may occur. This default browser behavior is called the **boundary default action**.

For example, on mobile devices, dragging a page downward when already at the top causes a bounce effect and sometimes triggers a page refresh. This bounce or refresh is the boundary default action.

Boundary default actions can be local or non-local.

* A **local boundary default** is the action that occurring at the boundary of a specific scrollable area confined to that element. This action is considered *local* as it does not affect any ancestor containers or the rest of the webpage.
* A **non-local boundary default action** is when reaching the scroll boundary of a scroll container has effects beyond the specific element being scrolled. An example of this is scroll chaining, where reaching the scroll boundary of one element triggers scrolling in a parent or ancestor element, and possibly even initiating a page-wide action, such as navigation.
See also
--------

* `overscroll-behavior` CSS property
* CSS overflow module
* CSS overscroll behavior module
* CSS scroll snap module


Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms

Effective connection type
=========================

**Effective connection type** (ECT) refers to the measured network performance, returning a cellular connection type, like 3G, even if the actual connection is tethered broadband or Wi-Fi, based on the time between the browser requesting a page and effective type of the connection.

The values of '`slow-2g`', '`2g`', '`3g`', and '`4g`' are determined using observed round-trip times and downlink values.

| ECT | Minimum RTT | Maximum downlink | Explanation |
| --- | --- | --- | --- |
| `slow-2g` | 2000ms | 50 Kbps | The network is suited for small transfers only such as text-only pages. |
| `2g` | 1400ms | 70 Kbps | The network is suited for transfers of small images. |
| `3g` | 270ms | 700 Kbps | The network is suited for transfers of large assets such as high resolution images, audio, and SD video. |
| `4g` | 0ms | ∞ | The network is suited for HD video, real-time video, etc. |

effectiveType is a property of the Network Information API, exposed to JavaScript via the navigator.connection object. To see your effective connection type, open the console of the developer tools of a supporting browser and enter the following:

```js
navigator.connection.effectiveType;
```

See also
--------

* Network Information API
* `NetworkInformation`
* `NetworkInformation.effectiveType`
* `ECT`


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

eTLD
====

The term **eTLD** stands for "effective top-level domain" and is a domain under which domains can be registered by a single organization.

A top level domain (TLD) is the part of the domain name following the final dot: so for example, the top-level domain in `crookedtimber.org` is `org`.

Suppose only domains directly under top-level domains were registrable by single organizations. Then you would know that the following domains all belonged to the same organization:
```

    xyz.org
abc.xyz.org
def.xyz.org
```

However, this does not work as a general rule, because many registrars allow organizations to register domains at levels below the top level. This means that, for example, `sussex.ac.uk` and `aber.ac.uk` are owned by different organizations.

Because this is a matter of the registrar's policies, it's impossible to tell algorithmically whether a given domain name suffix (like `ac.uk`) is publicly registrable or not. The Public Suffix List is a list of all suffixes under which organizations can directly register names: that is, it is a list of eTLDs.

The related concept **eTLD+1** means an eTLD plus the next part of the domain name. Because eTLDs are registrable, all domains with the same eTLD+1 are owned by the same organization.

For example, all the following are eTLD+1 domains:

* crookedtimber.org
* theguardian.com
* sussex.ac.uk
* aber.ac.uk

This means that all domains under each of these domains belong to the same organization. For example:
```

 film.theguardian.com
music.theguardian.com
```

```
      news.sussex.ac.uk
      blog.sussex.ac.uk
admissions.sussex.ac.uk
```

See also
--------

* Public Suffix List


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

Prototype
=========

A prototype is a model that displays the appearance and behavior of an application or product early in the development lifecycle.

See Inheritance and the prototype chain

See also
--------

* Software Prototyping on Wikipedia


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

Ajax
====

Asynchronous JavaScript and XML (**Ajax**, or **AJAX**) is a web development technique in which a web app fetches content from the server by making asynchronous HTTP requests, and uses the new content to update the relevant parts of the page without requiring a full page load. This can make the page more responsive, because only the parts that need to be updated are requested.

Ajax can be used to create single-page apps, in which the entire web app consists of a single document, which uses Ajax to update its content as needed.

Initially Ajax was implemented using the `XMLHttpRequest` interface, but the `fetch()` API is more suitable for modern web applications: it is more powerful, more flexible, and integrates better with fundamental web app technologies such as service workers. Modern web frameworks also provide abstractions for Ajax.

This technique is so common in modern web development that the specific term "Ajax" is rarely used.

See also
--------

* Fetching data from the server
* `Fetch API`
* Single-page application
* `XMLHttpRequest`
* AJAX on Wikipedia


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

WebExtensions
=============

WebExtensions is a cross-browser system for developing browser extensions in Firefox. This system provides APIs, which to a large extent are supported across different browsers like Mozilla Firefox, Google Chrome, Opera Browser, Microsoft Edge, or Apple Safari.

See also
--------

* Browser extensions on MDN


Bounding Box - MDN Web Docs Glossary: Definitions of Web-related terms

Bounding Box
============

The bounding box of an element is the smallest possible rectangle (aligned with the axes of that element's user coordinate system) that entirely encloses it and its descendants.


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

RAIL
====

**RAIL**, an acronym for **Response, Animation, Idle, and Load**, is a performance model originated by the Google Chrome team in 2015, focused on user experience and performance within the browser. The performance mantra of RAIL is "Focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." There are 4 stages of interaction: page load, idle, response to input, and scrolling and animation. In acronym order, the main tenets are:

**Response**

Respond to users immediately, acknowledging any user input in **100ms** or less.

**Animation**

When animating, render each frame in under **16ms**, aiming for consistency and avoiding jank.

**Idle**

When using the main JavaScript thread, work in chunks for less than **50ms** to free up the thread for user interactions.

**Load**

Deliver interactive content in less than **1 second**.

See also
--------

* Recommended Web Performance Timings: How long is too long


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

Algorithm
=========

An **algorithm** is a self-contained series of instructions to perform a function.

In other words, an algorithm is a means of describing a way to solve a problem so that it can be solved repeatedly, by humans or machines. Computer scientists compare the efficiency of algorithms through the concept of "Algorithmic Complexity" or "Big O" notation.

For example:

* A cooking recipe is a simple algorithm for humans.
* A sorting algorithm is often used in computer programming to explain to a machine how to sort data.

Common algorithms are Pathfinding algorithms such as the optimization Traveling Salesman Problem, Tree Traversal algorithms, and so on.

There are also Machine Learning algorithms such as Linear Regression, Logistic Regression, Decision Tree, Random Forest, Support Vector Machine, Recurrent Neural Network (RNN), Long Short Term Memory (LSTM) Neural Network, Convolutional Neural Network (CNN), Deep Convolutional Neural Network, and so on.

See also
--------

* Algorithm on Wikipedia
* Explanations of sorting algorithms
* Explanations of algorithmic complexity


Grid container - MDN Web Docs Glossary: Definitions of Web-related terms

Grid container
==============

Using the value `grid` or `inline-grid` on an element turns it into a **grid container** using CSS Grid Layout, and any direct children of this element become grid items.

When an element becomes a grid container it establishes a **grid formatting context**. The direct children can now lay themselves out on any explicit grid defined using `grid-template-columns` and `grid-template-rows`, or on the *implicit grid* created when an item is placed outside of the *explicit grid*.

See also
--------

### Property reference

* `grid-template-columns`
* `grid-template-rows`
* `grid-auto-columns`
* `grid-auto-rows`
* `grid`
* `grid-template`
### Further reading

* CSS Grid Layout guide: *Basic concepts of grid layout*