recursal/MDN huggingface dataset:
Cacheable
=========

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

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

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

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


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

200 OK
(…)
```


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


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

200 OK
(…)
```


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


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

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

See also
--------

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

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

See also
--------

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

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

See also
--------

* WHATWG website
* WHATWG on Wikipedia
Symbol
======

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

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

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

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

See also
--------

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

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

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

See also
--------

* IPv4 on Wikipedia
Flex
====

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

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

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

See also
--------

### Property reference

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

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

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

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

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


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

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

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

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

Considering the following HTML:


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


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


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

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

See also
--------

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

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

See also
--------

* Copyleft on Wikipedia
Bitwise flags
=============

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

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


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


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

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

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

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

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


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

See also
--------

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

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

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

See also
--------

* SGML on Wikipedia
* Introduction to SGML
Kebab case
==========

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

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

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

See also
--------

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

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

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

See also
--------

* Digital certificate on Wikipedia
Global variable
===============

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

In JavaScript it is a property of the global object.

See also
--------

* Global variable on Wikipedia
Search engine
=============

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

A search engine conducts the following processes:

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

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

See also
--------

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

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

See also
--------

* CRUD on Wikipedia
Favicon
=======

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

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

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

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

See also
--------

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

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

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

See also
--------

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

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

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

WebDAV allows clients to

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

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

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

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

See also
--------

* JPEG on Wikipedia
Polyfill
========

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

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

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

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

See also
--------

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

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

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

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

There are two types of basic state machines:

deterministic finite state machine

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

non-deterministic finite state machine

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

*Figure 1: Deterministic Finite State Machine.*

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

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

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

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

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

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

See also
--------

* Finite-state machine on Wikipedia
* UML state machine on Wikipedia
* Moore machine on Wikipedia
* Mealy machine on Wikipedia
Alignment subject
=================

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

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

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

Block containers (including table cells)

The entire content of the block as a single unit.

Multicol containers

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

Flex containers

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

Grid containers

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

See also
--------

* CSS box alignment module
Constructor
===========

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

Syntax
------


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

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


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


```js
function Default() {}

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

See also
--------

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

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

See also
--------

* Type system on Wikipedia
Navigation directive
====================

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

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

See Navigation directives for a complete list.

See also
--------

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

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

See also
--------

* MIME-Type
* MIME on Wikipedia