recursal/MDN huggingface dataset:
Random Number Generator
=======================

A **PRNG** (pseudorandom number generator) is an algorithm that outputs numbers in a complex, seemingly unpredictable pattern. Truly random numbers (say, from a radioactive source) are utterly unpredictable, whereas all algorithms are predictable, and a PRNG returns the same numbers when passed the same starting parameters or *seed*.

PRNGs can be used for a variety of applications, such as games.

A cryptographically secure PRNG is a PRNG with certain extra properties making it suitable for use in cryptography. These include:

* that it's computationally unfeasible for an attacker (without knowledge of the seed) to predict its output
* that if an attacker can work out its current state, this should not enable the attacker to work out previously emitted numbers.

Most PRNGs are not cryptographically secure.

See also
--------

* Pseudorandom number generator on Wikipedia
* `Math.random()`, a built-in JavaScript PRNG function. Note that this is not a cryptographically secure PRNG.
* `Crypto.getRandomValues()`: this is intended to provide cryptographically secure numbers.
Grid Axis
=========

CSS Grid Layout is a two-dimensional layout method enabling the laying out of content in *rows* and *columns*. Therefore in any grid we have two axes. The *block or column axis*, and the *inline or row axis*.

It is along these axes that items can be aligned and justified using the properties defined in the Box Alignment specification.

In CSS the *block or column axis* is the axis used when laying out blocks of text. If you have two paragraphs and are working in a right to left, top to bottom language they lay out one below the other, on the block axis.

![Diagram showing the block axis in CSS Grid Layout.](/en-US/docs/Glossary/Grid_Axis/7_block_axis.png)

The *inline or row axis* runs across the Block Axis and is the direction along which regular text flows. These are our rows in CSS Grid Layout.

![Diagram showing the inline axis in CSS Grid Layout.](/en-US/docs/Glossary/Grid_Axis/7_inline_axis.png)

The physical direction of these axes can change according to the writing mode of the document.

See also
--------

* CSS Grid Layout Guide: *Basic concepts of grid layout*
* CSS Grid Layout Guide: *Box alignment in Grid Layout*
* CSS Grid Layout Guide: *Grids, logical values and writing modes*
Selector (CSS)
==============

A **CSS selector** is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule's specified style applied to them.

Example
-------

Consider this CSS:


```css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}
```


The selectors here are `"p"` (which applies the color green to the text inside any `<p>` element), `"div.warning"` (which makes any `<div>` element with the class `"warning"` look like a warning box), and `"#customized"`, which sets the base font of the element with the ID `"customized"` to 16-pixel tall Lucida Grande or one of a few fallback fonts.

We can then apply this CSS to some HTML, such as:


```html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>
```


The resulting page content is styled like this:

See also
--------

* Learn more about CSS selectors in our introduction to CSS.
* Basic selectors
    + Type selectors `elementname`
    + Class selectors `.classname`
    + ID selectors `#idname`
    + Universal selectors `* ns|* *|*`
    + Attribute selectors `[attr=value]`
    + State selectors `a:active, a:visited`
* Grouping selectors
    + Selector list `A, B`
* Combinators
    + Next-sibling selectors `A + B`
    + Subsequent-sibling selectors `A ~ B`
    + Child selectors `A > B`
    + Descendant selectors `A B`
* Pseudo
    + Pseudo classes `:`
    + Pseudo elements `::`
Mobile First
============

**Mobile first**, a form of progressive enhancement, is a web-development and web-design approach that focuses on prioritizing design and development for mobile screen sizes over design and development for desktop screen sizes. The rationale behind the mobile-first approach is to provide users with good user experiences at all screen sizes—by starting with creating a user experience that works well on small screens, and then building on top of that to further enrich the user experience as the screen size increases. The mobile-first approach contrasts with the older approach of designing for desktop screen sizes first, and then only later adding some support for small screen sizes.
Character set
=============

A **character set** is an encoding system to let computers know how to recognize Character, including letters, numbers, punctuation marks, and whitespace.

In earlier times, countries developed their own character sets due to their different languages used, such as Kanji JIS codes (e.g. Shift-JIS, EUC-JP, etc.) for Japanese, Big5 for traditional Chinese, and KOI8-R for Russian. However, Unicode gradually became most acceptable character set for its universal language support.

If a character set is used incorrectly (For example, Unicode for an article encoded in Big5), you may see nothing but broken characters, which are called Mojibake.

See also
--------

* Character encoding (Wikipedia)
* Mojibake (Wikipedia)
* Glossary
    + Character
    + Unicode
Main Axis
=========

The main axis in flexbox is defined by the direction set by the `flex-direction` property. There are four possible values for `flex-direction`. These are:

* `row`
* `row-reverse`
* `column`
* `column-reverse`

Should you choose `row` or `row-reverse` then your main axis will run along the row in the inline direction.

![In this image the flex-direction is row which forms the main axis](/en-US/docs/Glossary/Main_Axis/basics1.png)

Choose `column` or `column-reverse` and your main axis will run top to bottom of the page in the block direction.

![Three flex items taking up the full width of the container, displayed one below the other in code order. Flex-direction is set to column. The main axis is vertical i.e. from top to bottom](/en-US/docs/Glossary/Main_Axis/basics2.png)

On the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of `flex` properties on the items. Or, you can control the space between and around items by using the `justify-content` property.

See also
--------

### Property reference

* `flex-basis`
* `flex-direction`
* `flex-grow`
* `flex-shrink`
* `justify-content`
* `flex`
### Further reading

* CSS Flexbox Guide:
    + Basic Concepts of Flexbox
    + Aligning items in a flex container
    + Controlling Ratios of flex items along the main axis
Resource Timing
===============

Diagnosing performance issues requires performance data at the granularity of the resource. The Resource Timing API is a JavaScript API that is able to capture timing information for each individual resource that is fetched when a page is loaded.

See also
--------

* Using the resource timing API
* Server Timing
SLD
===

An SLD (Second Level Domain) 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`.

See Second Level Domain for more information.
Domain sharding
===============

Browsers limit the number of active connections for each domain. To enable concurrent downloads of assets exceeding that limit, **domain sharding** splits content across multiple subdomains. When multiple domains are used to serve multiple assets, browsers are able to download more resources simultaneously, resulting in a faster page load time and improved user experience.

The problem with domain sharding, in terms of performance, is the cost of extra DNS lookups for each domain and the overhead of establishing each TCP connection.

The initial response from an HTTP request is generally an HTML file listing other resources such as JavaScript, CSS, images and other media files that need to be downloaded. As browsers limit the number of active connections per domain, serving all the required resources from a single domain could be slow as assets need to be downloaded sequentially. With domain sharding, the required downloads are served from more than one domain, enabling the browser to simultaneously download needed resources. Multiple domains, however, is an anti-pattern, as DNS lookups slow initial load times.

HTTP2 supports unlimited concurrent requests making domain sharding an obsolete requirement when HTTP/2 is enabled.

See also
--------

* TLS
* DNS
* HTTP/2
SIMD
====

SIMD (pronounced "sim-dee") is short for **Single Instruction/Multiple Data** which is one classification of computer architectures. SIMD allows one same operation to be performed on multiple data points resulting in data level parallelism and thus performance gains — for example, for 3D graphics and video processing, physics simulations or cryptography, and other domains.

See also SISD for a sequential architecture with no parallelism in either the instructions or the data sets.

See also
--------

* SIMD on Wikipedia
* Glossary
    + SIMD
    + SISD
Alpha (alpha channel)
=====================

The **alpha channel** specifies to opacity of a (`<color>`). Colors are represented in digital form as a collection of numbers, each representing the strength or intensity level of a given component of the color. Each of these components is called a **channel**. In a typical image file, the color channels describe how much red, green, and blue are used to make up the final color. To represent a color through which the background can be seen to some extent, a fourth channel is added to the color: the alpha channel.

For example, the color `#8921F2` (also described as `rgb(137 33 242)` or `hsl(270 89% 54)`) is a nice shade of purple. Below you see a small box of that color in the top-left corner and a box of the *same* color but with an alpha channel set at 50% (or 0.5) opacity, `#8921F280`, where `80` is the hexadecimal equivalent of 50%. This color is also described as `rgb(137 33 242 / 50%)` or `hsl(270 89% 54 / 50%)`. The two boxes are drawn on top of a paragraph of text.

![Image showing the effect of an alpha channel on a color.](/en-US/docs/Glossary/Alpha/alpha-channel-example.png)

As you can see, the color without an alpha channel completely blocks the background text, while the box with the alpha channel leaves it visible through the purple background color.

See also
--------

* CSS colors
* CSS values and units introduction
* Image file type and format guide
* Alpha compositing on Wikipedia
* RGBA color model on Wikipedia
* Channel (digital image) on Wikipedia
Code splitting
==============

**Code splitting** is the practice of splitting the code a web application depends on — including its own code and any third-party dependencies — into separate bundles that can be loaded independently of each other.
 This allows an application to load only the code it actually needs at a given point in time, and load other bundles on demand.
 This approach is used to improve application performance, especially on initial load.

Code splitting is a feature supported by bundlers like Webpack and Browserify which can create multiple bundles that can be dynamically loaded at runtime.

See also
--------

* Bundling
* Lazy loading
* HTTP/2
* Tree shaking
OpenGL
======

**OpenGL** (**Open Graphics Library**) is a cross-language, multi-platform application programming interface (API) for rendering 2D and 3D vector graphics. The API is typically used to interact with a graphics processing unit (GPU), to achieve hardware-accelerated rendering.

See also
--------

* OpenGL on Wikipedia
* OpenGL
Locale
======

**Locale** is a set of language- or country-based preferences for a user interface.

A program draws its locale settings from the language of the host system. Among other things, locales represent paper format, currency, date format, and numbers according to the protocols in the given region.

See also
--------

* Locale on Wikipedia
Parser
======

A **parser** is the module of a compiler or interpreter that parses a source code file.

More generally, it's a piece of software that parses text and transforms its content to another representation.

See also
--------

* Parser on Wikipedia
Scroll container
================

A **scroll container** is an element box in which content can be scrolled, whether or not scroll bars are present. A user agent adds scroll bars to an element box to make it a scroll container when the CSS `overflow` property is set to `scroll` or when `overflow` is set to `auto` *and* the content overflows the container.

When the content of an element box overflows its bounding box, users can use scroll bars to scroll through the clipped content that is otherwise hidden from view.

A scroll container includes a scrollport and scroll bars.

Scrollport
----------

The scrollport is the visible part of a scroll container and coincides with the padding box of the scroll container. The scroll bars are used to move content in and out of the scrollport so that the content can be viewed.
JavaScript
==========

JavaScript (or "JS") is a programming language used most often for dynamic client-side scripts on webpages, but it is also often used on the server-side, using a runtime such as Node.js.

JavaScript **should not** be confused with the Java programming language. Although *"Java"* and *"JavaScript"* are trademarks (or registered trademarks) of Oracle in the U.S. and other countries, the two programming languages are significantly different in their syntax, semantics, and use cases.

JavaScript is primarily used in the browser, enabling developers to manipulate webpage content through the DOM, retrieve content from servers using the `fetch()` API, store complex data using IndexedDB, draw graphics with canvas, interact with the device running the browser through various APIs, and more. JavaScript is one of the world's most commonly-used languages, owing to the recent growth and performance improvement of APIs available in browsers.

Origins and History
-------------------

Conceived as a server-side language by Brendan Eich (then employed by the Netscape Corporation), JavaScript soon came to Netscape Navigator 2.0 in September 1995. JavaScript enjoyed immediate success and Internet Explorer 3.0 introduced JavaScript support under the name JScript in August 1996.

In November 1996, Netscape began working with Ecma International to make JavaScript an industry standard. Since then, the standardized JavaScript is called ECMAScript and specified under ECMA-262, whose latest (fourteenth, ES2023) edition is available as of June 2023.

Recently, JavaScript's popularity has expanded even further through the successful Node.js platform—the most popular cross-platform JavaScript runtime environment outside the browser. Node.js - built using Chrome's V8 JavaScript Engine - allows developers to use JavaScript as a scripting language to automate things on a computer and build fully functional HTTP and WebSockets servers.

See also
--------

* JavaScript on Wikipedia
* The JavaScript Guide on MDN
* The "javascripting" workshop on NodeSchool
* The JavaScript course on codecademy.com
* The latest ECMAScript standard
* The JavaScript reference on MDN
* The *Eloquent JavaScript* book
Loop
====

A **loop** is a sequence of instructions that is repeated until a certain condition is met. An example would be the process of getting an item of data and changing it, and then making sure some condition is checked — such as if a counter has reached a prescribed number.

Loops are one way to execute a statement for a variable number of times. The same effect can be achieved with recursion, especially in languages where all data is immutable, making it impossible to update a counter variable.

See also
--------

* Control flow on Wikipedia
* Loops and iteration guide
Delta
=====

The term **delta** refers to the difference between two values or states.

The name originates from the Greek letter Δ (delta), which is equivalent to the letter *D* in the Roman alphabet. *Delta* refers to the use of the letter Δ as a shorthand for *difference*.

The term *delta* is commonly used when communicating changes in speed, position, or acceleration of a physical or virtual object. It's also used when describing changes in the volume or frequency of sound waves.

For example, when describing how far an object on the screen moves left-to-right, one might use the term *delta x* or *Δx*.

Likewise, given the new value of *X* and its old value, you might compute the delta like this:


```js
let deltaX = newX - oldX;
```


More commonly, you receive the delta and use it to update a saved previous condition:


```js
let newX = oldX + deltaX;
```

See also
--------

* Mouse wheel events (`WheelEvent` offer the amount the wheel moved since the last event in its `deltaX`, `deltaY`, and `deltaZ` properties, for example.
Codec
=====

A **codec** (a blend word derived from "**co**der-**dec**oder") is a program, algorithm, or device that encodes or decodes a data stream. A given codec knows how to handle a specific encoding or compression technology.

See also
--------

* Codec on Wikipedia
* Web video codec guide
* Web audio codec guide
* Guide to media types and formats on the web
RTF
===

RTF (Rich Text Format) is a plain-text-based file format with support for formatting instructions (like bold or italic).

Three programmers in the Microsoft Word team created RTF in the 1980s, and Microsoft continued to develop the format until 2008. However, many word-processing programs can still read and write RTF.

See also
--------

* Rich Text Format on Wikipedia
* specification v1.9.1 from Microsoft
WebAssembly
===========

**WebAssembly** (abbr. *Wasm*) is an open binary programming format that can be run in modern web browsers in order to gain performance and/or provide new features for web pages.

See also
--------

* WebAssembly on Wikipedia
* Official website
* WebAssembly on MDN
ECMA
====

**Ecma International** (formally *European Computer Manufacturers Association*) is a non-profit organization that develops standards in computer hardware, communications, and programming languages.

On the web it is famous for being the organization which maintain the ECMA-262 specification (aka. ECMAScript) which is the core specification for the JavaScript language.

See also
--------

* Ecma International on Wikipedia
* The Ecma International website
Clickjacking
============

Clickjacking is an interface-based attack that tricks website users into unwittingly clicking on malicious links. In clickjacking, the attackers embed their malicious links into buttons or legitimate pages in a website. In an infected Site, whenever a user clicks on a legitimate link, the attacker gets the confidential information of that user, which ultimately compromises the user's privacy on the Internet.

Clickjacking can be prevented by implementing a Content Security Policy (frame-ancestors) and implementing Set-Cookie attributes.

See also
--------

* Web security: clickjacking protection
* Clickjacking on Wikipedia
* Clickjacking on OWASP
Grid Cell
=========

In a CSS Grid Layout, a **grid cell** is the smallest unit you can have on your CSS grid. It is the space between four intersecting grid lines and conceptually much like a table cell.

![Diagram showing an individual cell on the grid.](/en-US/docs/Glossary/Grid_Cell/1_grid_cell.png)

If you do not place items using one of the grid placement methods, direct children of the grid container will be placed one into each individual grid cell by the auto-placement algorithm. Additional row or column tracks will be created to create enough cells to hold all items.

Example
-------

In the example we have created a three column track grid. The five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining 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-auto-rows: 100px;
}
```



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

See also
--------

### Property reference

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

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

An **exception** is a condition that interrupts normal code execution. In JavaScript syntax errors are a very common source of exceptions.

See also
--------

* Exception handling on Wikipedia
Node
====

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

Node (DOM)
In the context of the DOM, a **node** is a single point in the node tree. Various things that are nodes are the document itself, elements, text, and comments.
Node (networking)
In networking, a **node** is a connection point in the network. In physical networks, a node is usually a device, like a computer or a router.

Another use of the word is when talking about Node.js
Privileged
==========

Users are said to be **privileged** when they are granted additional rights to a system, or given ultimate access to content in a higher priority level when compared to normal users.

See also
--------

* Privilege (computing) on Wikipedia
HTTP/3
======

**HTTP/3** is the upcoming major revision of the HTTP network protocol, succeeding HTTP/2.

The major point of HTTP/3 is that it uses a new UDP protocol named QUIC, instead of TCP.

See also
--------

* HTTP on MDN
* HTTP/3 on Wikipedia
* Glossary
    + HTTP
    + HTTP 2
    + Latency
Usenet
======

Usenet is an internet discussion system where each post is duplicated on many servers. The equivalent of Internet forums in its day, Usenet functioned like a bulletin board system.

See also
--------

* Usenet on Wikipedia
VoIP
====

VoIP (Voice over Internet Protocol) is a technology used to transmit voice messages over IP (Internet Protocol) networks. Common VoIP packages include Skype, MSN Messenger, Yahoo and many more. Everything transferred through VoIP is digital. It is also known as IP telephony, or broadband telephony. The main reason for using VoIP technology is because of cost.

VoIP allows you to make a call directly from a computer, a special VoIP phone, or a traditional phone connected to a special adapter. A high speed internet connection is required for VoIP. Usually, telephone calls over the Internet do not incur further charges beyond what the user is paying for Internet access, much in the same way that the user doesn't pay for sending individual emails over the Internet.

See also
--------

* VoIP on Wikipedia
ALPN
====

**Application-Layer Protocol Negotiation** (**ALPN**) is a TLS extension (defined in RFC 7301) for identifying what application-layer protocol is negotiating the encrypted connection, without requiring additional round trips to do so.

| Protocol | Identification sequence |
| --- | --- |
| HTTP/1.1 | `0x68 0x74 0x74 0x70 0x2F 0x31 0x2E 0x31` ("http/1.1") |
| HTTP/2 | `0x68 0x32` ("h2") |
| HTTP/2 over cleartext TCP | `0x68 0x32 0x63` ("h2c") |
| HTTP/3 | `0x68 0x33` ("h3") |

See also
--------

* Performance resource timing `nextHopProtocol` property
* PerformanceObserver API
* IANA registered ALPN identifiers