recursal/MDN huggingface dataset:
Preflight request
=================

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

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

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

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


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


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


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


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

See also
--------

* CORS
* `OPTIONS`
Second-level Domain
===================

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

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

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

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

See also
--------

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

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

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

See also
--------

* Ruby on Wikipedia
* Ruby's official website
* Ruby On Rails' official website
Speed index
===========

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

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

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

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

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

See also
--------

* Learn web performance
Presto
======

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

See also
--------

* Presto layout engine on Wikipedia
Lossless compression
====================

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

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

See also
--------

* Glossary
    + GZIP
    + Brotli
    + PNG
    + Lossy compression
Shallow copy
============

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

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

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

See also the definition of *structural equivalence*.

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

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

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

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

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


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

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


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


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


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


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

See also
--------

* Deep copy
Network throttling
==================

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

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

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

See also
--------

* Synthetic monitoring
CSS
===

**CSS** (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser.

The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.

CSS is one of the three core Web technologies, along with HTML and JavaScript. CSS usually styles HTML elements, but can be also used with other markup languages like SVG or XML.

A CSS rule is a set of properties associated with a selector. Here is an example that makes every HTML paragraph yellow against a black background:


```css
/\* The selector "p" indicates that all paragraphs in the document will be affected by that rule \*/
p {
  /\* The "color" property defines the text color, in this case yellow. \*/
  color: yellow;

  /\* The "background-color" property defines the background color, in this case black. \*/
  background-color: black;
}
```


"Cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance. This is a very important feature, since a complex website can have thousands of CSS rules.

See also
--------

* Learn CSS
* CSS on Wikipedia
* The CSS documentation on MDN
* The CSS Working Group current work
IDL
===

An **IDL** (*Interface Description Language*) is a generic language used to specified objects' interfaces apart from any specific programming language.

Content versus IDL attributes
-----------------------------

In HTML, most attributes have two faces: the **content attribute** and the **IDL attribute**.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via `element.setAttribute()` or `element.getAttribute()`. The content attribute is always a string even when the expected value should be an integer. For example, to set an `<input>` element's `maxlength` to 42 using the content attribute, you have to call `setAttribute("maxlength", "42")` on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like `element.foo`. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

Most of the time, IDL attributes will return their values as they are really used. For example, the default `type` for `<input>` elements is "text", so if you set `input.type="foobar"`, the `<input>` element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the `type` IDL attribute will return the string "text".

IDL attributes are not always strings; for example, `input.maxlength` is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so `input.maxlength` is always going to return a number and when you set `input.maxlength`, it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (`select.size`, for example) and you should read the specifications to understand how exactly they behave.

See also
--------

* IDL on Wikipedia
* HTML attribute reference
* Interface Definition Language
Request header
==============

A **request header** is an HTTP header that can be used in an HTTP request to provide information about the request context, so that the server can tailor the response. For example, the `Accept-*` headers indicate the allowed and preferred formats of the response. Other headers can be used to supply authentication credentials (e.g. `Authorization`), to control caching, or to get information about the user agent or referrer, etc.

Not all headers that can appear in a request are referred to as *request headers* by the specification. For example, the `Content-Type` header is referred to as a representation header.

In addition, CORS defines a subset of request headers as simple headers, request headers that are always considered authorized and are not explicitly listed in responses to preflight requests.

The HTTP message below shows a few request headers after a `GET` request:


```http
GET /home.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
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,\*/\*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0
```

See also
--------

* List of all HTTP headers
* RFC 9110, section 6.3: Header Fields
PDF
===

**PDF** (Portable Document Format) is a file format used to share documentation without depending on any particular software implementation, hardware platform, or operating system. PDF provides a digital image of a printed document, and keeps the same appearance when printed.

See also
--------

* PDF on Wikipedia
WebIDL
======

**WebIDL** is the interface description language used to describe the data types, interfaces, methods, properties, and other components which make up a Web application programming interface (API). It uses a somewhat stylized syntax which is independent of any specific programming language, so that the underlying code which is used to build each API can be written in whatever language is most appropriate, while still being possible to map the API's components to JavaScript-compatible constructs.

WebIDL is used in nearly every API specification for the Web, and due to its standard format and syntax, the programmers who create Web browsers can more easily ensure that their browsers are compatible with one another, regardless of how they choose to write the code to implement the API.

See also
--------

* Specification
* Information contained in a WebIDL file
* Gecko WebIDL bindings
* WebIDL
Property
========

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

Property (CSS)
A **CSS property** is a characteristic (like color) whose associated value defines one aspect of how the browser should display the element.
Property (JavaScript)
A **JavaScript property** is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.
Endianness
==========

**Endian** and **endianness** (or "byte-order") describe how computers organize the bytes that make up numbers.

Each memory storage location has an index or address. Every byte can store an 8-bit number (i.e. between `0x00` and `0xff`), so you must reserve more than one byte to store a larger number. By far the most common *ordering* of multiple bytes in one number is the **little-endian**, which is used on all Intel processors. Little-endian means storing bytes in order of least-to-most-significant (where the least significant byte takes the first or lowest address), comparable to a common European way of writing dates (e.g., 31 December 2050).

Naturally, **big-endian** is the opposite order, comparable to an ISO date (2050-12-31). Big-endian is also often called "network byte order", because Internet standards usually require data to be stored big-endian, starting at the standard UNIX socket level and going all the way up to standardized Web binary data structures. Also, older Mac computers using 68000-series and PowerPC microprocessors formerly used big-endian.

Examples with the number `0x12345678` (i.e. 305 419 896 in decimal):

* *little-endian*: `0x78 0x56 0x34 0x12`
* *big-endian*: `0x12 0x34 0x56 0x78`
* *mixed-endian* (historic and very rare): `0x34 0x12 0x78 0x56`

The typed arrays guide provides an example that converts any number to its binary representation under the given endianness.

See also
--------

* `ArrayBuffer`
* `DataView`
* Typed Arrays
* Endianness (Wikipedia)
* Data structure (Glossary)
Function
========

A **function** is a code snippet that can be called by other code or by itself, or a variable that refers to the function. When a function is called, arguments are passed to the function as input, and the function can optionally return a value. A function in JavaScript is also an object.

A function name is an identifier included as part of a function declaration or function expression. The function name's scope depends on whether the function name is a declaration or expression.

### Different types of functions

An **anonymous function** is a function without a function name. Only function expressions can be anonymous, function declarations must have a name:


```js
// Anonymous function created as a function expression
(function () {});

// Anonymous function created as an arrow function
() => {};
```


The following terms are not used in the ECMAScript language specification, they're jargon used to refer to different types of functions.

A **named function** is a function with a function name:


```js
// Function declaration
function foo() {}

// Named function expression
(function bar() {});

// Arrow function
const baz = () => {};
```


An **inner function** is a function inside another function (`square` in this case). An **outer function** is a function containing a function (`addSquares` in this case):


```js
function addSquares(a, b) {
  function square(x) {
    return x \* x;
  }
  return square(a) + square(b);
}

// Arrow function
const addSquares2 = (a, b) => {
  const square = (x) => x \* x;
  return square(a) + square(b);
};
```


A **recursive function** is a function that calls itself. See recursion.


```js
function loop(x) {
  if (x >= 10) return;
  loop(x + 1);
}

// Arrow function
const loop2 = (x) => {
  if (x >= 10) return;
  loop(x + 1);
};
```


An **Immediately Invoked Function Expression** (IIFE) is a function that is called directly after the function is loaded into the browser's compiler. The way to identify an IIFE is by locating the extra left and right parenthesis at the end of the function's definition.

Function expressions, named or anonymous, can be called immediately.


```js
(function foo() {
  console.log("Hello Foo");
})();

(function food() {
  console.log("Hello Food");
})();

(() => console.log("hello world"))();
```


Declared functions can't be called immediately this way, because IIFEs must be function *expressions*.


```js
function foo() {
  console.log('Hello Foo');
}();
```


If you'd like to know more about IIFEs, check out the following page on Wikipedia: Immediately Invoked Function Expression

See also
--------

* Functions
* Arrow Functions
Number
======

In JavaScript, **Number** is a numeric data type in the double-precision 64-bit floating point format (IEEE 754). In other programming languages different numeric types exist; for example, Integers, Floats, Doubles, or Bignums.

See also
--------

* Numeric types on Wikipedia
* The JavaScript type: `Number`
* The JavaScript global object `Number`
* Glossary:
    + JavaScript
    + Primitive
Wrapper
=======

In programming languages such as JavaScript, a wrapper is a function that is intended to call one or more other functions, sometimes purely for convenience, and sometimes adapting them to do a slightly different task in the process.

For example, SDK Libraries for AWS are examples of wrappers.

See also
--------

* Wrapper function (Wikipedia)
* MDN Web Docs Glossary
    + API
    + Class
    + Function
Minification
============

**Minification** is the process of removing unnecessary or redundant data without affecting how a resource is processed by the browser.

Minification can include the removal of code comments, white space, and unused code, as well as the shortening of variable and function names. Minification is used to improve web performance by reducing file size. It is generally an automated step that occurs at build time.

As minification makes code less legible to humans, developer tools have 'prettification' features that can add white space back into the code to make it a bit more legible.
Syntax
======

Syntax specifies the required combination and sequence of characters making up correctly structured code. Syntax generally includes grammar and the rules that apply to writing it, such as indentation requirements in Python.

Syntax varies from language to language (e.g., syntax is different in HTML and JavaScript). Although languages can share few similarities in terms of their syntaxes for example "operand operator operand" rule in JavaScript and Python. This does not mean the two languages share similarities with syntax.

Syntax applies both to programming languages (commands to the computer) and markup languages (document structure information) alike.

Syntax only governs ordering and structure; the instructions must also be *meaningful*, which is the province of semantics.

Code must have correct syntax in order to compile correctly, otherwise a syntax error occurs. Even small errors, like a missing parenthesis, can stop source code from compiling successfully.

Frameworks are said to have a "clean" syntax if they produce simple, readable, concise results. If a codebase uses "a lot of syntax", it requires more characters to achieve the same functionality.

See also
--------

* Syntax (programming languages) on Wikipedia
Digest
======

A **digest** is a small value generated by a hash function from a whole message. Ideally, a digest is quick to calculate, irreversible, and unpredictable, and therefore indicates whether someone has tampered with a given message.

A digest can be used to perform several tasks:

* in non-cryptographic applications (e.g., the index of hash tables, or a fingerprint used to detect duplicate data or to uniquely identify files)
* verify message integrity (a tampered message will have a different hash)
* store passwords so that they can't be retrieved, but can still be checked (To do this securely, you also need to salt the password.)
* generate pseudo-random numbers
* generate keys

It is critical to choose the proper hash function for your use case to avoid collisions and predictability.

See also
--------

* See Cryptographic hash function
* Hash function on Wikipedia
Render-blocking
===============

**Render-blocking** refers to any part of the process of loading a website when it blocks the rendering of the user interface. Render-blocking is bad for web performance because it increases the length of time until users can interact with the site — for example viewing content or interacting with controls.

The most common causes of render-blocking are initially-loaded CSS or JavaScript files.

See also
--------

* CSS performance optimization
* JavaScript performance optimization
* What Are Render-Blocking Resources & How to Fix Render Blocking Issues on Speckyboy (2018)