recursal/MDN huggingface dataset:
SRI
===

**Subresource Integrity** (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched file must match.

See also
--------

* Subresource Integrity
Plugin
======

A browser plugin is a software component that users can install to handle content that the browser can't support natively. Browser plugins are usually written using the NPAPI (Netscape Plugin Application Programming Interface) architecture.

The most well-known and widely used plugin was the now outdated Adobe Flash player, which enabled browsers to run Adobe Flash content.

As browsers have become more powerful, plugins have become less useful. Plugins also have a history of causing security and performance problems for web users.

Between 2016 and 2021 browser vendors worked on a deprecation roadmap for plugins and in particular for Adobe Flash, and today plugins are no longer supported by any major browsers.

Plugins should not be confused with browser extensions, which unlike plugins are distributed as source code rather than binaries, and which are still supported by browsers, notably using the WebExtensions system.

See also
--------

* Adobe Flash end-of-life announcement
Abstraction
===========

Abstraction in computer programming is a way to reduce complexity and allow efficient design and implementation in complex software systems. It hides the technical complexity of systems behind simpler APIs.

Advantages of Data Abstraction
------------------------------

* Helps the user to avoid writing low-level code.
* Avoids code duplication and increases reusability.
* Can change the internal implementation of a class independently without affecting the user.
* Helps to increase the security of an application or program as only important details are provided to the user.
Example
-------


```js
class ImplementAbstraction {
  // method to set values of internal members
  set(x, y) {
    this.a = x;
    this.b = y;
  }

  display() {
    console.log(`a = ${this.a}`);
    console.log(`b = ${this.b}`);
  }
}

const obj = new ImplementAbstraction();
obj.set(10, 20);
obj.display();
// a = 10
// b = 20
```

See also
--------

* Abstraction on Wikipedia
TCP handshake
=============

TCP (Transmission Control Protocol) uses a **three-way handshake** (aka TCP-handshake, three message handshake, and/or SYN-SYN-ACK) to set up a TCP/IP connection over an IP based network.

The three messages transmitted by TCP to negotiate and start a TCP session are nicknamed SYN, *SYN-ACK*, and ACK for **SYN**chronize, **SYN**chronize-**ACK**nowledgement, and **ACK**nowledge respectively. The three message mechanism is designed so that two computers that want to pass information back and forth to each other can negotiate the parameters of the connection before transmitting data such as HTTP browser requests.

The host, generally the browser, sends a TCP SYNchronize packet to the server. The server receives the SYN and sends back a SYNchronize-ACKnowledgement. The host receives the server's SYN-ACK and sends an ACKnowledge. The server receives ACK and the TCP socket connection is established.

This handshake step happens after a DNS lookup and before the TLS handshake, when creating a secure connection. The connection can be terminated independently by each side of the connection via a four-way handshake.

See also
--------

* Transport Layer Security (TLS) protocol
* HTTPS
* Transport Layer Security on Wikipedia
Media query
===========

A **media query** is a logical expression that is a method for CSS, JavaScript, HTML, and other web languages, to check aspects of the user agent or device that the document is being displayed in, independent of the document contents, to determine whether the associated code block or feature should be applied.

Media queries are used to conditionally apply CSS styles with the CSS `@media` and `@import` at-rules and in JavaScript to test and monitor media states such as with the `matchMedia()` method, `matches` property, and `change` event. Media queries are used as values of the `<link>`, `<source>`, and `<style>` HTML element `media` attributes, conditionally applying the link, source, or style if the media query is true. When a `media` attribute is omitted, it defaults to `true`. Media queries are also used as the value of the `sizes` attribute of the `<img>` element.

Media queries are made up of optional media query modifiers and media types, and zero or more media conditions, along with logical operators.

Media queries are re-evaluated in response to changes in the user environment, such as when a user expands a browser window or flips a mobile device onto its side changing from portrait to landscape orientation.

Multiple comma-separated media queries create a **media query list**. A media query list is true if any of its component media queries are true, and false only if all of its component media queries are false.

A media query may optionally be prefixed by a single media query modifier or `not` or `only`, which in the case of `not`, alters the meaning of the following media query.

See also
--------

* Using media queries
* CSS media queries module
Cross Axis
==========

The cross axis in flexbox runs perpendicular to the main axis, therefore if your `flex-direction` is either `row` or `row-reverse` then the cross axis runs down the columns.

![The cross axis runs down the column](/en-US/docs/Glossary/Cross_Axis/basics3.png)

If your main axis is `column` or `column-reverse` then the cross axis runs along the rows.

![The cross axis runs along the row.](/en-US/docs/Glossary/Cross_Axis/basics4.png)

Alignment of items on the cross axis is achieved with the `align-items` property on the flex container or `align-self` property on individual items. In the case of a multi-line flex container, with additional space on the cross axis, you can use `align-content` to control the spacing of the rows.

See also
--------

### Property reference

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

* CSS Flexbox Guide:
    + Basic Concepts of Flexbox
    + Aligning items in a flex container
    + Mastering wrapping of flex items
* Glossary
    + Flex
    + Flex Container
    + Flex Item
    + Grid
Forbidden response header name
==============================

A *forbidden response header name* is an HTTP header name (`Set-Cookie`) that cannot be modified programmatically.

See also
--------

* Fetch specification: forbidden response-header name
* Forbidden header name (Glossary)
DMZ
===

A **DMZ** (DeMilitarized Zone) is a way to provide an insulated secure interface between an internal network (corporate or private) and the outside untrusted world — usually the Internet.

It exposes only certain defined endpoints, while denying access to the internal network from external nodes.

See also
--------

* DMZ on Wikipedia
Thread
======

Thread in computer science is the execution of running multiple tasks or programs at the same time. Each unit capable of executing code is called a **thread**.

The **main thread** is the one used by the browser to handle user events, render and paint the display, and to run the majority of the code that comprises a typical web page or app. Because these things are all happening in one thread, a slow website or app script slows down the entire browser; worse, if a site or app script enters an infinite loop, the entire browser will hang. This results in a frustrating, sluggish (or worse) user experience.

 Modern JavaScript offers ways to create additional threads, each executing independently while possibly communicating between one another. This is done using technologies such as web workers, which can be used to spin off a sub-program that runs concurrently with the main thread in a thread of its own. This allows slow, complex, or long-running tasks to be executed independently of the main thread, preserving the overall performance of the site or app—as well as that of the browser overall.
 Threading also allows web applications to take advantage of modern multi-core processors: enabling even better performance than multi-threaded applications running on a single core.

A special type of worker, called a **service worker**, can be created which can be left behind by a site—with the user's permission—to run even when the user isn't currently using that site. This is used to create sites capable of notifying the user when things happen while they're not actively engaged with a site. Such as notifying a user they have received new email even though they're not currently logged into their mail service.

Overall it can be observed these threads within our operating system are extremely helpful. They help minimize the context switching time, enables more efficient communication and allows further use of the multiprocessor architecture.

See also
--------

* Asynchronous JavaScript
* Web worker API
* Service worker API
* Glossary
    + Main thread
Microsoft Edge
==============

**Microsoft Edge** is a free-of-cost graphical Web browser bundled with Windows 10 and developed by Microsoft since 2014. Initially known as Spartan, Edge replaced the longstanding browser Internet Explorer.

See also
--------

* Official website
* MDN Web Docs Glossary
    + Google Chrome
    + Microsoft Edge
    + Microsoft Internet Explorer
    + Mozilla Firefox
    + Netscape Navigator
    + Opera Browser
URL
===

**Uniform Resource Locator** (**URL**) is a text string that specifies where a resource (such as a web page, image, or video) can be found on the Internet.

In the context of HTTP, URLs are called "Web address" or "link". Your browser displays URLs in its address bar, for example: `https://developer.mozilla.org` Some browsers display only the part of a URL after the "//", that is, the Domain name.

URLs can also be used for file transfer (FTP), emails (SMTP), and other applications.

See also
--------

* Understanding URLs and their structure
* The syntax of URLs is defined in the URL Living Standard
* URL on Wikipedia
XPath
=====

**XPath** is a query language that can access sections and content in an XML document.

See also
--------

* XPath documentation on MDN
* XPath specification
* Official website
* XPath on Wikipedia
Developer Tools
===============

Developer tools (or "development tools" or short "DevTools") are programs that allow a developer to create, test and debug software.

Current browsers provide integrated developer tools, which allow to inspect a website. They let users inspect and debug the page's HTML, CSS, and JavaScript, allow to inspect the network traffic it causes, make it possible to measure it's performance, and much more.

See also
--------

* Web development tools on Wikipedia
* Firefox Developer Tools on MDN
* Firebug (former developer tool for Firefox)
* Chrome DevTools on chrome.com
* Safari Developer Tools on apple.com
* Edge Dev Tools on microsoft.com
Recursion
=========

The act of a function calling itself, recursion is used to solve problems that contain smaller sub-problems. A recursive function can receive two inputs: a base case (ends recursion) or a recursive case (resumes recursion).

Examples
--------

### Recursive function calls itself until condition met

The following Python code defines a function that takes a number, prints it, and then calls itself again with the number's value -1. It keeps going until the number is equal to 0, in which case it stops.


```py
def recurse(x):
   if x > 0:
       print(x)
       recurse(x - 1)

recurse(10)
```


The output will look like this:

 10
 9
 8
 7
 6
 5
 4
 3
 2
 1

### Recursion is limited by stack size

The following code defines a function that returns the maximum size of the call stack available in the JavaScript runtime in which the code is run.


```js
const getMaxCallStackSize = (i) => {
  try {
    return getMaxCallStackSize(++i);
  } catch {
    return i;
  }
};

console.log(getMaxCallStackSize(0));
```

### Common usage examples


```js
const factorial = (n) => {
  if (n === 0) {
    return 1;
  } else {
    return n \* factorial(n - 1);
  }
};
console.log(factorial(10));
// 3628800
```



```js
const fibonacci = (n) => (n <= 2 ? 1 : fibonacci(n - 1) + fibonacci(n - 2));
console.log(fibonacci(10));
// 55
```



```js
const reduce = (fn, acc, [cur, ...rest]) =>
  cur === undefined ? acc : reduce(fn, fn(acc, cur), rest);
console.log(reduce((a, b) => a + b, 0, [1, 2, 3, 4, 5, 6, 7, 8, 9]));
// 45
```

See also
--------

* Recursion (computer science) on Wikipedia
* More details about recursion in JavaScript
Netscape Navigator
==================

Netscape Navigator or Netscape was a leading browser in the 1990s. Netscape was based on Mosaic and the Netscape team was led by Marc Andreessen, a programmer who also wrote code for Mosaic.

Netscape helped make the Web graphical rather than a text-only experience. Many browsing features became standard after Netscape introduced them. Netscape could display a webpage while loading, used JavaScript for forms and interactive content, and stored session information in cookies. Despite Netscape's technical advantages and initial dominance, by the late 1990s Internet Explorer swiftly overtook Netscape in market share.

See also
--------

* Netscape Navigator on Wikipedia
WebP
====

**WebP** is a lossless and lossy compression image format developed by Google.

See also
--------

* WebP on Wikipedia
XForms
======

**XForms** is a convention for building Web forms and processing form data in the XML format.

**Note:** No major browser supports XForms any longer—we suggest using HTML forms instead.
Grid Areas
==========

A **grid area** is one or more grid cells that make up a rectangular area on the grid. Grid areas are created when you place an item using line-based placement or when defining areas using named grid areas.

![Image showing a highlighted grid area](/en-US/docs/Glossary/Grid_Areas/1_grid_area.png)

Grid areas *must* be rectangular in nature; it is not possible to create, for example, a T- or L-shaped grid area.

Example
-------

In the example below I have a grid container with two grid items. I have named these with the `grid-area` property and then laid them out on the grid using `grid-template-areas`. This creates two grid areas, one covering four grid cells, the other two.
```

\* {
  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: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "a a b"
    "a a b";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
```



```html
<div class="wrapper">
  <div class="item1">Item</div>
  <div class="item2">Item</div>
</div>
```

See also
--------

### Property reference

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

* CSS Grid Layout Guide:
    + Basic concepts of grid layout
    + Grid template areas
* Definition of Grid Areas in the CSS Grid Layout specification
Robots.txt
==========

Robots.txt is a file which is usually placed in the root of any website. It decides whether crawlers are permitted or forbidden access to the website.

For example, the site admin can forbid crawlers to visit a certain folder (and all the files therein contained) or to crawl a specific file, usually to prevent those files being indexed by other search engines.

See also
--------

* Robots.txt on Wikipedia
* https://developers.google.com/search/reference/robots\_txt
* Standard specification: RFC9309
* https://www.robotstxt.org/
Intrinsic size
==============

In CSS, the *intrinsic size* of an element is the size it would be based on its content, if no external factors were applied to it. For example, inline elements are sized intrinsically: `width`, `height`, and vertical margin and padding have no impact, though horizontal margin and padding do.

How intrinsic sizes are calculated is defined in the CSS Intrinsic and Extrinsic Sizing Specification.

Intrinsic sizing takes into account the `min-content` and `max-content` size of an element. For text the `min-content` size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. For a box containing a string of text, the `min-content` size would be defined by the longest word. The keyword value of `min-content` for the `width` property will size an element according to the `min-content` size.

The `max-content` size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. The keyword value `max-content` exposes this behavior.

For images the intrinsic size has the same meaning — it is the size that an image would be displayed if no CSS was applied to change the rendering. By default images are assumed to have a "1x" pixel density (1 device pixel = 1 CSS pixel) and so the intrinsic size is simply the pixel height and width. The intrinsic image size and resolution can be explicitly specified in the EXIF data. The intrinsic pixel density may also be set for images using the `srcset` attribute (note that if both mechanisms are used, the `srcset` value is applied "over" the EXIF value).
Gutters
=======

**Gutters** or *alleys* are spacing between content tracks. These can be created in CSS Grid Layout using the `column-gap`, `row-gap`, or `gap` properties.

Example
-------

In the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and `20px`-gaps between row tracks.
```

\* {
  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: #fff8f8;
  padding: 1em;
  color: #d9480f;
}
```



```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1.2fr);
  grid-auto-rows: 45%;
  column-gap: 20px;
  row-gap: 20px;
}
```



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


In terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. The gap acts as if the grid line at that location has gained extra size, so any grid item placed after that line begins at the end of the gap.

The `row-gap` and `column-gap` properties are not the only things that can cause tracks to space out. Margins, padding, or the use of the space distribution properties in Box Alignment can all contribute to the visible gap – therefore the `row-gap` and `column-gap` properties should not be seen as equal to the "gutter size" unless you know that your design has not introduced any additional space with one of these methods.

See also
--------

### Property reference

* `column-gap`
* `row-gap`
* `gap`
### Further reading

* CSS Grid Layout Guide: *Basic concepts of grid layout*
* Definition of gutters in the CSS Grid Layout specification
Markup
======

A markup language is one that is designed for defining and presenting text. HTML (HyperText Markup Language), is an example of a markup language.

Within a text file such as an HTML file, elements are *marked up* using tags which explain the purpose of that part of the content.

Types of markup language
------------------------

**Presentational Markup:**

Used by traditional word processing system with WYSIWYG (what you see it is what you get); this is hidden from human authors, users and editors.

**Procedural Markup:**

Combined with text to provide instructions on text processing to programs. This text is visibly manipulated by the author.

**Descriptive Markup:**

Labels sections of documents as to how the program should handle them. For example, the HTML `<td>` defines a cell in a HTML table.

See also
--------

* MDN Web Docs Glossary
    + HTML
    + XHTML
    + XML
    + SVG
Table Wrapper Box
=================

The **Table Wrapper Box** is the box generated around table grid boxes which accounts for the space needed for any caption displayed for the table. This box will become the containing block for absolutely positioned items where the table is the containing block.
CSS pixel
=========

The term **CSS pixel** is synonymous with the CSS unit of absolute length *px* — which is normatively defined as being exactly 1/96th of 1 CSS inch (*in*).

See also
--------

* CSS Length Explained on the MDN Hacks Blog
Style origin
============

In CSS, there are three categories of sources for style changes. These categories are called **style origins**. They are the **user agent origin**, **user origin**, and the **author origin**.

User-agent origin

The user agent origin is the style origin comprised of the default styles used by the user's web browser. If no other styles are applied to content, the user agent origin's styles are used while rendering elements.

User origin

The user origin is the style origin containing any CSS that the user of the web browser has added. These may be from adding styles using a developer tool or from a browser extension that automatically applies custom styles to content, such as Stylus or Stylish.

Author origin

The author origin is the style origin which contains all of the styles which are part of the document, whether embedded within the HTML or loaded from an external stylesheet file.

The style origins are used to determine where to stop rolling back (or backtracking through) the cascade of styles that have been applied to an element when removing styles, such as when using the `unset` or `revert` keywords.

See also
--------

* CSS Cascading and Inheritance: Cascading Origins
Site
====

Informally, a *site* is a website, which is a collection of web pages, served from the same domain, and maintained by a single organization.

Browsers sometimes need to distinguish precisely between different sites. For example, the browser must only send `SameSite` cookies to the same site that set them.

For this more precise definition a site is determined by the *registrable domain* portion of the domain name. The registrable domain consists of an entry in the Public Suffix List plus the portion of the domain name just before it. This means that, for example, `theguardian.co.uk`, `sussex.ac.uk`, and `bookshop.org` are all registrable domains.

According to this definition, `support.mozilla.org` and `developer.mozilla.org` are part of the same site, because `mozilla.org` is a registrable domain.

In some contexts, the scheme is also considered when differentiating sites. This would make `http://vpl.ca` and `https://vpl.ca` different sites. Including the scheme prevents an insecure (HTTP) site from being treated as the same site as a secure (HTTPS) site. A definition that considers the scheme is sometimes called a *schemeful same-site*. This stricter definition is applied in the rules for handling `SameSite` cookies.

**Note:** Browsers sometimes make security decisions (for example, deciding which resources a script can access) based on the Origin of a resource. This is a more restrictive concept than the site, encompassing the scheme, the whole domain, and the port. See also same-origin policy.

Examples
--------

These are the same site because the registrable domain of `mozilla.org` is the same:

* `https://developer.mozilla.org/en-US/docs/`
* `https://support.mozilla.org/en-US/`

These are the same site because the port is not relevant:

* `https://example.com:8080`
* `https://example.com`

These are not the same site because the registrable domain of the two URLs differs:

* `https://developer.mozilla.org/en-US/docs/`
* `https://example.com`

These are the same site, or different sites if the scheme is considered:

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

* What is a URL
* Origin
* Same-origin policy