recursal/MDN huggingface dataset:
Web-related technologies
========================

This section of the site is a home for documentation on web-related technologies that aren't central to the MDN's remit (i.e. they aren't web standards technologies), but are nonetheless related to the web and of interest to web developers.

**Note:** These documentation resources generally aren't maintained by the MDN writer's team — if you have suggestions or queries related to these resources, check out the landing pages for those technologies for contact details of the relevant maintenance team.

Technology list
---------------

IMSC: subtitles and captioning for the Web

IMSC (TTML Profiles for Internet Media Subtitles and Captions) is a file format for representing subtitles and captions. It uses XML to describe content, timing, layout, and styling. IMSC is very similar to HTML and CSS in concept — in fact, most IMSC styles have a direct equivalent in CSS.
The MDN Web Docs project
========================

**MDN Web Docs** is free-to-use resource on which we document the open web platform. Our mission is to provide *developers* with the *information* they need to *easily* build projects on the *web platform*.

This is the landing page for the MDN Web Docs project itself. Here you'll find guides on how the site works, how we do our documentation, the guidelines and conventions we adhere to, and how you can help.

We invite everyone to help! MDN Web Docs is an open-source project and accepts contributions. There are many different tasks you can help with, from the simple (proofreading and correcting typos) to the complex (writing API documentation).

To find out how to help, visit our Getting started page. If you want to talk to us and ask questions, join the discussion on the MDN Web Docs chat rooms.

Community guidelines

These guides help you get started with contributing to MDN Web Docs. They also cover topics such as how you can help with tasks and issues, open discussions, and suggest content. If you need help or want to contact us, you'll find the information here.

Writing guidelines

These guides provide all the information about how to write for MDN Web Docs. They outline the policies for the type of content we write and the type of content we don't write. You'll also find our writing style guide here, how-to guides to perform various content tasks, and also information about the structure of our different pages.

MDN Product Advisory Board

The MDN Product Advisory Board's mission is to build collaboration between Mozilla, its documentation team, and the key collaborating organizations that help the MDN community collectively maintain MDN Web Docs.
MDN Web Docs Glossary: Definitions of Web-related terms
=======================================================

Web technologies contain long lists of jargon and abbreviations that are used in documentation and coding. This glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web.

Glossary terms can be selected from the sidebar.

**Note:** This glossary is a never-ending work in progress. You can help improve it by writing new entries or by making the existing ones better.
Mozilla
=======

The articles below include content about downloading and building Mozilla code. In addition, you'll find helpful articles about how the code works, how to build add-ons for Mozilla applications and the like.

Add-onsAdd-ons allow developers to extend and modify the functionality of Firefox. They are written using standard Web technologies - JavaScript, HTML, and CSS - plus some dedicated JavaScript APIs.

FirefoxFirefox is Mozilla's popular Web browser, available for multiple platforms including Windows, macOS, and Linux on the desktop and all Android and iOS mobile devices. With broad compatibility, the latest in Web technologies, and powerful development tools, Firefox is a great choice for both Web developers and end users.
Accessibility
=============

*Web Accessibility* (**A11Y**) refers to best practices for keeping a website usable despite physical and technical restrictions. Web accessibility is formally defined and discussed at the W3C through the Web Accessibility Initiative (WAI).

See also
--------

* Accessibility resources at MDN
* Learn accessibility on MDN
* ARIA documentation on MDN
* The WAI-ARIA recommendation
* Web accessibility on Wikipedia
* Web Accessibility In Mind
* The W3C Web Accessibility Initiative
Chrome
======

In a browser, the chrome is any visible aspect of a browser aside from the webpages themselves (e.g., toolbars, menu bar, tabs). This is not to be confused with the Google Chrome browser.

See also
--------

* Browser and GUI Chrome
SPA (Single-page application)
=============================

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as Fetch when different content is to be shown.

This therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages such as SEO, more effort required to maintain state, implement navigation, and do meaningful performance monitoring.

See also
--------

* Single-page application (Wikipedia)
* Understanding client-side JavaScript frameworks
* Glossary
    + API
    + AJAX
    + JavaScript
* Popular SPA frameworks:
    + React
    + Angular
    + Vue.JS
Prefetch
========

 Prefetching refers to the practice of speculatively fetching documents or subresources in the background for pages that the user is *likely* to navigate to in the near future.
 This can significantly reduce the load time for the prefetched page if the user does choose to navigate to it.
 Prefetching might be used, for example, to fetch the page linked by a "Next" button or its subresources, or a link popup that a user hovers over, or search results.

### Resource prefetching

Resources should be prefetched based on how likely it is that they will be needed in a future navigation. Browsers can infer this automatically for some resources, such as the current URL in the address bar.

This can be done using `<link rel="prefetch">` (the Speculation Rules API only handles document prefetches for navigations):


```html
<link rel="prefetch" href="next.html" />
```

### Document prefetching

Developers can provide hints to the browser of navigations that should be prefetched in a couple of different ways:

`<link rel="prefetch">`:


```html
<link rel="prefetch" href="next.html" />
```


Speculation Rules API prefetch:


```html
<script type="speculationrules">
 {
 "prefetch": [
 {
 "source": "list",
 "urls": ["next.html"]
 }
 ]
 }
</script>
```


The Speculation Rules API handles document prefetches for navigations much better than `<link rel="prefetch">`; the former was designed specifically for that purpose whereas the latter has a number of limitations; see `<link rel="prefetch">` for details.

### DNS prefetching

DNS prefetching resolves domain names in advance, speeding up load times by reducing the time associated with domain lookup at request time.


```html
<link rel="dns-prefetch" href="https://example.com/" />
```

See also
--------

* Speculative loading
* prerender
* Speculation Rules API
Identifier
==========

An **identifier** is a sequence of characters in the code that identifies a variable, function, or property. In most languages, identifiers are case-sensitive and not quoted.

In JavaScript, identifiers can contain Unicode letters, `$`, `_`, and digits (0-9), but may not start with a digit. An identifier differs from a string in that a string is data, while an identifier is part of the code. In JavaScript, there is no way to convert identifiers to strings, but sometimes it is possible to parse strings into identifiers.

In CSS, there are two identifier data types: `<custom-ident>` and `<dashed-ident>`. The CSS `<ident>` can start with a digit and can contain almost any character, but non-letter/digit ASCII characters such as `"`, `\`, and `*` need to be escaped. Emojis, which are valid as identifiers, do not need to be escaped.

See also
--------

* Glossary
    + Scope
    + string
    + Unicode
* Identifier on Wikipedia
DoS attack
==========

DoS (Denial of Service) is a network attack that prevents legitimate use of server resources by flooding the server with requests.

Computers have limited resources, for example computation power or memory. When these are exhausted, the program can freeze or crash, making it unavailable. A DoS attack consists of various techniques to exhaust these resources and make a server or a network unavailable to legitimate users, or at least make the server perform sluggishly.

There are also Distributed Denial of Service (DDoS) Attacks in which a multitude of servers are used to exhaust the computing capacity of an attacked computer.

### Types of DoS attack

DoS attacks are more of a category than a particular kind of attack. Here is a non-exhaustive list of DoS attack types:

* bandwidth attack
* service request flood
* SYN flooding attack
* ICMP flood attack
* peer-to-peer attack
* permanent DoS attack
* application level flood attack
See also
--------

* Denial-of-service attack on Wikipedia
* Denial-of-service on OWASP
* DDoS
Slug
====

A Slug is the unique identifying part of a web address, typically at the end of the URL. In the context of MDN, it is the portion of the URL following "*<locale>/docs/*".

It may also just be the final component when a new document is created under a parent document; for example, this page's slug is `Glossary/Slug` .

See also
--------

* Choosing titles and slugs
Cipher suite
============

A cipher suite is a combination of a key exchange algorithm, authentication method, bulk encryption cipher, and message authentication code.

In a cryptosystem like TLS, the client and server must agree on a cipher suite before they can begin communicating securely. A typical cipher suite looks like ECDHE\_RSA\_WITH\_AES\_128\_GCM\_SHA256 or ECDHE-RSA-AES128-GCM-SHA256, indicating:

* ECDHE (elliptic curve Diffie-Hellman ephemeral) for key exchange
* RSA for authentication
* AES-128 as the cipher, with Galois/Counter Mode (GCM) as the block cipher mode of operation
* SHA-256 as the hash-based message authentication code (HMAC)
See also
--------

* Mozilla recommended cipher suite choices for TLS
Canonical order
===============

In CSS, canonical order is used to refer to the order in which separate values need to be specified (or parsed) or are to be serialized as part of a CSS property value. It is defined by the formal syntax of the property and normally refers to the order in which longhand values should be specified as part of a single shorthand value.

For example, `background` shorthand property values are made up of several `background-*` longhand properties. The canonical order of those longhand values is defined as

1. `background-image`
2. `background-position`
3. `background-size`
4. `background-repeat`
5. `background-attachment`
6. `background-origin`
7. `background-clip`
8. `background-color`

Furthermore, its syntax defines, that if a value for the `background-size` is given, it **must** be specified **after** the value for the `background-position`, separated by a slash. Other values may appear in any order.

See also
--------

* What does "canonical order" mean with respect to CSS properties? on Stack Overflow provides useful further discussion.
* The description of the formal syntax used for CSS values on MDN
Fuzz testing
============

**Fuzzing** is a technique for testing software using automated tools to provide invalid or unexpected input to a program or function in a program, then checking the results to see if the program crashes or otherwise acts inappropriately. This is an important way to ensure that software is stable, reliable, and secure.

* Wikipedia: Fuzz testing
URI
===

A **URI** *(Uniform Resource Identifier)* is a string that refers to a resource.

The most common are URLs, which identify the resource by giving its location on the Web. URNs, by contrast, refer to a resource by a name, in a given namespace, such as the ISBN of a book.

See also
--------

* URI on Wikipedia
* RFC 3986 on URI
Serialization
=============

The process whereby an object or data structure is translated into a format suitable for transfer over a network, or storage (e.g. in an array buffer or file format).

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

CSS values are serialized by calling the function `CSSStyleDeclaration.getPropertyValue()`.

See also
--------

* Serialization on Wikipedia
Caret
=====

A **caret** (sometimes called a "text cursor") is an indicator displayed on the screen to indicate where text input will be inserted.

Most user interfaces represent the caret using a thin vertical line or a character-sized box that flashes, but this can vary. This point in the text is called the **insertion point**. The word "caret" differentiates the text insertion point from the mouse cursor.

On the web, a caret is used to represent the insertion point in `<input>` and `<textarea>` elements, as well as any elements whose `contenteditable` attribute is set, thereby allowing the contents of the element to be edited by the user.

See also
--------

* Caret navigation on Wikipedia
### CSS related to the caret

You can set the color of the caret for a given element's editable content by setting the element's CSS `caret-color` property to the appropriate `<color>` value.

### HTML elements that may present a caret

These elements provide text entry fields or boxes and therefore make use of the caret.

* `<input type="text">`
* `<input type="password">`
* `<input type="search">`
* `<input type="date">`, `<input type="time">`, and `<input type="datetime-local">`
* `<input type="number">`, `<input type="range">`
* `<input type="email">`, `<input type="tel">`, and `<input type="url">`
* `<textarea>`
* Any element with its `contenteditable` attribute set
Lazy load
=========

**Lazy loading** is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation pattern; typically, these assets are only loaded when they are scrolled into view.

If correctly implemented, this delay in asset loading is seamless to the user experience and might help improve initial load performance, including time to interactive, as fewer assets are required for the page to start working.

See also
--------

* Lazy loading
Mutable
=======

A *mutable* value is one that can be changed without creating an entirely new value. In JavaScript, objects and arrays are mutable by default, but primitive values are not — once a primitive value is created, it cannot be changed, although the variable that holds it may be reassigned.

See also
--------

* Immutable object on Wikipedia
* Immutable
Non-normative
=============

Software specifications often contain information marked as **non-normative** or *informative*, which is provided to help readers understand the specification better, or to show an example or best practice. Non-normative parts of the specification are provided as guidelines, and are not considered part of the formal specification. Sections that contain the official part of the specification are often marked as normative.

See also
--------

* Description of normative and informative content in WHATWG wiki
Grid Row
========

A **grid row** is a horizontal track in a CSS Grid Layout, that is the space between two horizontal grid lines. It is defined by the `grid-template-rows` property or in the shorthand `grid` or `grid-template` properties.

In addition, rows may be created in the *implicit grid* when items are placed outside of rows created in the *explicit grid*. These rows will be auto sized by default, or can have a size specified with the `grid-auto-rows` property.

When working with alignment in CSS Grid Layout, the axis along which rows run is known as the *inline, or row, axis*.

See also
--------

### Property reference

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

* CSS Grid Layout Guide: *Basic concepts of grid layout*
RTL (Right to Left)
===================

**RTL** (**Right To Left**) is a locale property indicating that text is written from right to left.

For example, the `he` locale (for Hebrew) specifies right-to-left. Arabic (`ar`) is another common language written RTL.

The opposite of RTL, LTR (Left To Right) is used in other languages, including English (`en`, `en-US`, `en-GB`, etc.), Spanish (`es`), and French (`fr`).

See also
--------

* MDN Web Docs Glossary
    + Localization
    + LTR (Left to Right)
    + RTL (Right to Left)
IETF
====

The Internet Engineering Task Force (**IETF**) is a worldwide organization that drafts specifications governing the mechanisms behind the Internet, especially the TCP/IP or Internet Protocol Suite.

The IETF is open, run by volunteers, and sponsored by the Internet Society.

See also
--------

* Official website
RGB
===

*Red-Green-Blue* (**RGB**) is a color model that represents colors as mixtures of three underlying components (or channels), namely: *red*, *green*, and *blue*. This model describes a color with a sequence of three numbers (typically between 0.0 and 1.0, or between 0 and 255). Each number represents the primary colors' different intensities (or contributions) in determining the final color.

Alone an RGB value has no meaning. A color model defines how the three components relate to a color space. Graphically, a point in a three-dimensional grid or cube represents a color. Each dimension (or axis) corresponds to a different channel. The RGB color model is then a *cubic*, or *Cartesian*, coordinate system of the underlying color space.

For the web, the underlying color space for an RGB value is *sRGB* (Standard RGB), and each RGB component is a number between 0 and 255.

Note that there are other RGB color spaces, like the *Adobe RGB* color space, that can represent a wider gamut of color than the *sRGB* color space. The coordinates in *sRGB* and *Adobe RGB* are different.

There are many ways to describe the RGB components of a color. In CSS they can be represented as a single 24-bit integer in hexadecimal notation (for example, `#add8e6` is light blue), or in functional notation, `rgb()` as three separate numbers between 0 and 255 (for example, `rgb(46 139.5 87)`). There are also the `srgb`, `srgb-linear`, `a98-rgb`, and `prophoto-rgb` color spaces for the `color()` function.

RGB is not the only color model that can represent the *sRGB* color space. Cylindrical coordinate systems like the `HSL` (*hue-saturation-lightness*) or `HWB` (*hue-whiteness-blackness*) color models are also used to represent a sRGB color on the web.

See also
--------

* RGB color model on Wikipedia
* sRGB color space on Wikipedia
* Adobe RGB color space on Wikipedia
* CSS data type: <color>
Prototype-based programming
===========================

**Prototype-based programming** is a style of object-oriented programming in which classes are not explicitly defined, but rather derived by adding properties and methods to an instance of another class or, less frequently, adding them to an empty object.

In simple words: this type of style allows the creation of an object without first defining its class.

See also
--------

* Prototype-based programming on Wikipedia
Hotlink
=======

A **hotlink** (also known as an **inline link**) is an object (typically an image) directly linked to from another site. For example, an image hosted on site1.com is shown directly on site2.com.

The practice is frowned upon, as it can cause unwanted bandwidth usage on the website hosting the linked-to object. From an ethical standpoint, it could be considered stealing when done without permission.

See also
--------

* Hotlink on Wikipedia
* Hyperlink (Glossary)
Promise
=======

A **`Promise`** is an object that's returned by a function that has not yet completed its work. The promise literally represents a promise made by the function that it will eventually return a result through the promise object.

When the called function finishes its work asynchronously, a function on the promise object called a resolution (or fulfillment, or completion) handler is called to let the original caller know that the task is complete.

See also
--------

* Futures and promises
* `Promise` in the JavaScript Reference.
* Using promises
Local scope
===========

Local scope is a characteristic of variables that makes them local (i.e., the variable name is only bound to its value within a scope which is not the global scope).

See also
--------

* Scope on Wikipedia
SQL Injection
=============

SQL injection takes advantage of Web apps that fail to validate user input. Hackers can maliciously pass SQL commands through the Web app for execution by a backend database.

SQL injection can gain unauthorized access to a database or to retrieve information directly from the database. Many data breaches are due to SQL injection.

![Pie chart of most common vulnerabilities: SQL Injection is responsible for 50% of vulnerabilities, Cross Site Scripting is responsible for 42% of vulnerabilities, Source Code Disclosure is responsible for 7% of vulnerabilities.](/en-US/docs/Glossary/SQL_Injection/sql_inj_xss.gif)

How It Works
------------

![Screenshot of the login form with username and password fields](/en-US/docs/Glossary/SQL_Injection/updates_loginscreen.png)

After entering username and password, behind the GUI the SQL queries work as follows:


```sql
"SELECT Count(\*) FROM Users WHERE Username=' " + txt.User.Text+" ' AND Password=' "+ txt.Password.Text+" ' ";
```


Now suppose User enters the Username: admin and Password: passwd123, so after clicking on the Log in button, SQL query will run as follows:


```sql
"SELECT Count(\*) FROM Users WHERE Username=' admin ' AND Password=' passwd123 ' ";
```


If the credentials are correct, then the user is allowed to log in, so it's a very simple (and therefore insecure) mechanism. Hackers use this insecurity to gain unauthorized access.

Hackers use a simple string called a Magical String, for example:

**Username: *admin***

**Password: *anything 'or'1'='1***

After clicking on the login button, the SQL query will work as follows:


```sql
"SELECT Count(\*) FROM Users WHERE Username=' admin ' AND Password=' anything 'or'1'='1 ' ";
```


Just take a closer look at the above query's password section.
```

Password=' anything 'or'1'='1 '
```


The password is not 'anything', hence password=anything results in FALSE, but '1'='1' is a TRUE statement and hence returns a TRUE value. Finally, due to the OR operator, the value (FALSE OR TRUE) is TRUE, so authentication bypasses successfully. Just due to a simple string (Magical String) the entire database is compromised.

How To Prevent
--------------

Before executing the queries for the user credentials, make some changes like the following:


```sql
$id = $_GET['id']

(1) $id = Stripslashes($id)

(2) $id = mysql_real_escape_String($id)
```


So due to (1) each single quote (') in the input string is replaced with double quotes ("), and due to (2) before every (') it adds (/). The revised magical string fails to bypass the authentication, and your database stays secure.

See also
--------

* SQL injection on Wikipedia
* Explanation of SQL injection on OWASP (Open Web Application Security Project)