Skip to content

Instantly share code, notes, and snippets.

@bgoonz

bgoonz/Web-Dev-Glossary.md

Created August 27, 2022 05:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bgoonz/c7fe5f303392e1049f24f91be9cb9d02 to your computer and use it in GitHub Desktop.
Save bgoonz/c7fe5f303392e1049f24f91be9cb9d02 to your computer and use it in GitHub Desktop.
Download ZIP
Web-Dev-Glossary.md
Raw
Web-Dev-Glossary.md

Term: '404'

  • Glossary
  • HTTP Errors
  • Infrastructure
  • Navigation

A 404 is a Standard Response Code meaning that the Glossary("Server", "server") cannot find the requested resource.

See also

Term: '502'

  • '502'
  • Bad Gateway
  • Glossary
  • HTTP Errors
  • Infrastructure
  • Navigation

An Glossary("HTTP") error code meaning "Bad Gateway".

A Glossary("Server", "server") can act as a gateway or proxy (go-between) between a client (like your Web browser) and another, upstream server. When you request to access a Glossary("URL"), the gateway server can relay your request to the upstream server. "502" means that the upstream server has returned an invalid response.

Normally the upstream server is not down (i.e. furnishes no response to the gateway/proxy), but does not understand the same data-exchange protocol as the gateway/proxy. Internet Glossary("Protocol", "protocols") are quite explicit, and so a 502 usually means that one or both machines were incorrectly or incompletely programmed.

See also

Term: Abstraction

  • Abstraction
  • Coding
  • CodingScripting
  • Glossary
  • Programming Language

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

Advantages of Data Abstraction

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

Example

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

    display() {
        console.log('a = ' + this.a);
        console.log('b = ' + this.b);
    }
}

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

See also

  • interwiki("wikipedia", "Abstraction (computer science)", "Abstraction") on Wikipedia

Term: accent

  • Glossary
  • Input
  • accent

An accent is a typically bright color that contrasts with the more utilitarian background and foreground colors within a color scheme. These are present in the visual style of many platforms (though not all).

On the web, an accent is sometimes used in HTMLElement("input") elements for the active portion of the control, for instance the background of a checked checkbox.

See also

CSS related to the accent

You can set the color of the accent for a given element by setting the element's CSS cssxref("accent-color") property to the appropriate cssxref("<color>") value.

Term: Accessibility tree

  • AOM
  • Accessibility
  • DOM
  • Glossary
  • Reference

The accessibility tree contains Glossary("accessibility")-related information for most HTML elements.

Browsers convert markup into an internal representation called the DOM tree. The DOM tree contains objects representing all the markup's elements, attributes, and text nodes. Browsers then create an accessibility tree based on the DOM tree, which is used by platform-specific Accessibility APIs to provide a representation that can be understood by assistive technologies, such as screen readers.

There are four things in an accessibility tree object:

  • name
    • : How can we refer to this thing? For instance, a link with the text "Read more" will have "Read more" as its name (find more on how names are computed in the [Accessible Name and Description Com
  • description
    • : How do we describe this thing, if we want to provide more description beyond the name? The description of a table could explain what kind of information the table contains.
  • role
    • : What kind of thing is it? For example, is it a button, a nav bar, or a list of items?
  • state
    • : Does it have a state? Examples include checked or unchecked for checkboxes, and collapsed or expanded for the <summary> element.

Additionally, the accessibility tree often contains information on what can be done with an element: a link can be followed, a text input can be typed into, etc.

While still in draft form within the Web Incubator Community Group, the Accessibility Object Model (AOM) intends to incubate APIs that make it easier to express accessibility semantics and potentially allow read access to the computed accessibility tree.

See also

  • Glossary

    • Glossary("Accessibility")
    • Glossary("ARIA")

Term: Accessibility

  • Accessibility
  • Glossary

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 Glossary("W3C") through the Glossary("WAI","Web Accessibility Initiative") (WAI).

See also

Term: Adobe Flash

Flash is an obsolete technology developed by Adobe for viewing expressive web applications, multimedia content, and streaming media.

As of 2021, Flash is no longer supported by Adobe or any major web browsers.

See also

Term: Advance measure

  • Accessibility
  • Glossary

The advance measure of a glyph is its advance width or advance height, whichever is in the inline axis of the element.

This term is used in the definition of a number of CSS cssxref("<length>") units. For example, ch is the advance measure of the "0" character in the given typeface. For a horizontal inline axis, this will be the width of the character.

See also

  • cssxref("<length>")

Term: Ajax

  • AJAX
  • CodingScripting
  • Glossary
  • Infrastructure
  • l10n:priority

Ajax, which initially stood for Asynchronous Glossary("JavaScript") And Glossary("XML"), is a programming practice of building complex, dynamic webpages using a technology known as Glossary("XHR(XMLHttpRequest)","XMLHttpRequest"_).

Ajax allows you to update parts of the Glossary("DOM") of an Glossary("HTML") page without the need for a full page refresh. Ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading).

With interactive websites and modern web standards, Ajax is gradually being replaced by functions within JavaScript frameworks and the official domxref("Fetch API") Standard.

See also

Term: Algorithm

  • CodingScripting
  • Glossary

An algorithm is a self-contained series of instructions to perform a function.

In other words, an algorithm is a means of describing a way to solve a problem so that it can be solved repeatedly, by humans or machines. Computer scientists compare the efficiency of algorithms through the concept of "Algorithmic Complexity" or "Big O" notation.

For example:

  • A cooking recipe is a simple algorithm for humans.
  • A sorting algorithm is often used in computer programming to explain a machine how to sort data.

Common algorithms are Pathfinding algorithms such as the Traveling Salesman Problem, Tree Traversal algorithms and so on.

There are also Machine Learning algorithms such as Linear Regression, Logistic Regression, Decision Tree, Random Forest, Support Vector Machine, Recurrent Neural Network (RNN), Long Short Term Memory (LSTM) Neural Network, Convolutional Neural Network (CNN), Deep Convolutional Neural Network and so on.

See also

Term: Alignment container

  • Alignment container
  • CSS
  • Glossary
  • alignment

The alignment container is the rectangle that the alignment subject is aligned within. This is defined by the layout mode; it is usually the alignment subject's containing block, and assumes the writing mode of the box establishing the containing block.

See also

Term: Alignment subject

  • Alignment subject
  • CSS
  • Glossary
  • alignment

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

For cssxref("justify-self") and cssxref("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 cssxref("justify-content") and cssxref("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 cssxref("justify-content"), the flex items in each flex line. For cssxref("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

Term: Alpha (alpha channel)

  • Alpha
  • Alpha Channel
  • Drawing
  • Glossary
  • Graphics
  • Translucency
  • Translucent
  • Transparency
  • Transparent
  • WebGL
  • WebXR
  • channel
  • color
  • pixel

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. The alpha channel specifies how opaque the color is.

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 0.5 (50% opacity). The two boxes are drawn on top of a paragraph of text.

Image showing the effect of an alpha channel on a color.

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.

Term: API

  • CodingScripting
  • Glossary
  • Infrastructure

An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. The API can be seen as a simple contract (the interface) between the application offering it and other items, such as third party software or hardware.

In Web development, an API is generally a set of code features (e.g. glossary("method","methods"), Glossary("property","properties"), events, and Glossary("URL","URLs")) that a developer can use in their apps for interacting with components of a user's web browser, or other software/hardware on the user's computer, or third party websites and services.

For example:

  • The getUserMedia API can be used to grab audio and video from a user's webcam, which can then be used in any way the developer likes, for example, recording video and audio, broadcasting it to another user in a conference call, or capturing image stills from the video.
  • The Geolocation API can be used to retrieve location information from whatever service the user has available on their device (e.g. GPS), which can then be used in conjunction with the Google Maps APIs to for example plot the user's location on a custom map and show them what tourist attractions are in their area.
  • The Twitter APIs can be used to retrieve data from a user's twitter accounts, for example, to display their latest tweets on a web page.
  • The Web Animations API can be used to animate parts of a web page — for example, to make images move around or rotate.

See also

Term: Apple Safari

  • Glossary
  • Navigation
  • WebMechanics

Safari is a Glossary("Browser","Web browser") developed by Apple and bundled with both macOS and iOS. It's based on the open source WebKit engine.

See also

Term: Application Context

  • CodingScripting
  • Glossary

An application context is a top-level browsing context that has a manifest applied to it.

If an application context is created as a result of the user agent being asked to navigate to a deep link, the user agent must immediately navigate to the deep link with replacement enabled. Otherwise, when the application context is created, the user agent must immediately navigate to the start URL with replacement enabled.

Please note that the start URL is not necessarily the value of the start_url member: the user or user agent could have changed it when the application was added to home-screen or otherwise bookmarked.

Term: Argument

  • CodingScripting
  • Glossary
  • JavaScript

An argument is a glossary("value") (Glossary("primitive") or Glossary("object")) passed as input to a Glossary("function").

See also

  • Interwiki("wikipedia", "Parameter(computerprogramming)", "Difference between Parameter and Argument") on Wikipedia
  • The jsxref("Functions/arguments","arguments") object in glossary("JavaScript")

Term: ARIA

  • Accessibility
  • Glossary

ARIA (Accessible Rich _glossary("Internet") Applications*) is a _Glossary("W3C"*) specification for adding semantics and other metadata to Glossary("HTML") to cater to users of assistive technology.

For example, you could add the attribute role="alert" to a HTMLElement("p") glossary("tag") to notify a sight-challenged user that the information is important and time-sensitive (which you might otherwise convey through text color).

See also

Term: ARPA

  • Glossary
  • Infrastructure

.arpa (address and routing parameter area) is a glossary("TLD","top-level domain") used for Internet infrastructure purposes, especially reverse DNS lookup (i.e., find the glossary('domain name') for a given glossary("IP address")).

See also

Term: ARPANET

  • Glossary
  • Infrastructure

The ARPANET (Advanced Research Projects Agency NETwork) was an early computer network, constructed in 1969 as a robust medium to transmit sensitive military data and to connect leading research groups throughout the United States. ARPANET first ran NCP (Network Control Protocol) and subsequently the first version of the Internet protocol or glossary("TCP")/glossary("IPv4","IP") suite, making ARPANET a prominent part of the nascent glossary("Internet"). ARPANET was closed in early 1990.

See also

  • Interwiki("wikipedia", "ARPANET") on Wikipedia

Term: Array

  • Array
  • CodingScripting
  • Glossary
  • JavaScript
  • programming

An array is an ordered collection of data (either Glossary("primitive") or Glossary("object") depending upon the language). Arrays are used to store multiple values in a single variable. This is compared to a variable that can store only one value.

Each item in an array has a number attached to it, called a numeric index, that allows you to access it. In JavaScript, arrays start at index zero and can be manipulated with various Glossary("Method", "methods").

What an array in JavaScript looks like:

//
let myArray = [1, 2, 3, 4];
let catNamesArray = ['Jacqueline', 'Sophia', 'Autumn'];
//Arrays in JavaScript can hold different types of data, as shown above.

See also

  • Interwiki("wikipedia", "Array data structure", "Array") on Wikipedia
  • JavaScript jsxref("Array") on MDN

Term: ASCII

  • Glossary
  • Infrastructure

ASCII (American Standard Code for Information Interchange) is one of the most popular coding method used by computers for converting letters, numbers, punctuation and control codes into digital form. Since 2007, Glossary("UTF-8") superseded it on the Web.

See also

Interwiki("wikipedia", "ASCII") on Wikipedia

Term: Asynchronous

  • Glossary
  • Web
  • WebMechanics
  • asynchronous

The term asynchronous refers to two or more objects or events not existing or happening at the same time (or multiple related things happening without waiting for the previous one to complete). In computing, the word "asynchronous" is used in two major contexts.

  • Networking and communications

    • : Asynchronous communication is a method of exchanging messages between two or more parties in which each party receives and processes messages whenever it's convenient or possible to do so, rather than doing so immediately upon receipt. Additionally, messages may be sent without waiting for acknowledgement, with the understanding that if a problem occurs, the recipient will request corrections or otherwise handle the situation.

      For humans, e-mail is an asynchronous communication method; the sender sends an email and the recipient will read and reply to the message when it's convenient to do so, rather than doing so at once. And both sides can continue to send and receive messages whenever they wish, instead of having to schedule them around each other.

      When software communicates asynchronously, a program may make a request for information from another piece of software (such as a server), and continue to do other things while waiting for a reply. For example, the AJAX (Asynchronous JavaScript and Glossary("XML")) programming technique—now usually "Ajax", even though Glossary("JSON") is usually used rather than XML in modern applications—is a mechanism that requests relatively small amounts of data from the server using Glossary("HTTP"), with the result being returned when available rather than immediately.

  • Software design

    • : Asynchronous software design expands upon the concept by building code that allows a program to ask that a task be performed alongside the original task (or tasks), without stopping to wait for the task to complete. When the secondary task is completed, the original task is notified using an agreed-upon mechanism so that it knows the work is done, and that the result, if any, is available.

      There are a number of programming techniques for implementing asynchronous software. See the article Asynchronous JavaScript for an introduction to them.

See also

Term: ATAG

  • ATAG
  • Accessibility
  • Authoring Tool Accessibility Guidelines
  • Glossary

ATAG (Authoring Tool glossary("Accessibility") Guidelines) is a Glossary("W3C") recommendation for building accessible-authoring tools that produce accessible contents.

See also

Term: Attribute

  • CodingScripting
  • Glossary
  • HTML

An attribute extends an HTML or XML Glossary("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.

<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 domxref("HTMLInputElement.placeholder").

Considering the following HTML:

<input placeholder="Original placeholder" />

We can check the reflection between domxref("HTMLInputElement.placeholder") and the attribute using:

//
let input = document.getElementsByTagName('input')[0];
let attr = input.getAttributeNode('placeholder');
console.log(attr.value);
console.log(input.placeholder); //Returns the same value as `attr.value`

and

//
let input2 = document.getElementsByTagName('input')[0];
let attr2 = input.getAttributeNode('placeholder');
console.log(attr2.value); // Returns `Original placeholder`
input2.placeholder = 'Modified placeholder'; // Also change the value of the reflected attribute.
console.log(attr2.value); // Returns `Modified placeholder`

See also

Term: Media (Audio-visual presentation)

  • Audio
  • Glossary
  • Media
  • Multimedia
  • Video

The term media (more accurately, multimedia) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, TV shows, or any other form of content that is presented over a period of time.

More broadly, media may include still images such as photographs or other still images.

Media content can be recorded, played back, presented, and at times interacted with in various ways.

See also

  • interwiki("wikipedia", "Multimedia") on Wikipedia
  • Web media technologies: a guide to all the ways media can be used in web content
  • Multimedia and Embedding in the MDN learning area
  • HTMLElement("audio") and HTMLElement("video") elements, used to present media in Glossary("HTML") documents

Term: Bandwidth

  • Glossary
  • Infrastructure

Bandwidth is the measure of how much information can pass through a data connection in a given amount of time. It is usually measured in multiples of bits-per-second (bps), for example megabits-per-second (Mbps) or gigabits-per-second (Gbps).

See also

  • Interwiki("wikipedia", "Bandwidth") on Wikipedia

Term: Base64

  • Advanced
  • Base64
  • JavaScript
  • Typed Arrays
  • URI
  • URL
  • Unicode Problem
  • atob()
  • btoa()

Base64 is a group of similar binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding.

Base64 encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that are designed to deal with ASCII. This is to ensure that the data remain intact without modification during transport. Base64 is commonly used in a number of applications including email via MIME, and storing complex data in XML.

One common application of Base64 encoding on the web is to encode binary data so it can be included in a data: URL.

In JavaScript there are two functions respectively for decoding and encoding Base64 strings:

  • btoa(): creates a Base64-encoded ASCII string from a "string" of binary data ("btoa" should be read as "binary to ASCII").
  • atob(): decodes a Base64-encoded string("atob" should be read as "ASCII to binary").

The algorithm used by atob() and btoa() is specified in RFC 4648, section 4.

Note that btoa() expects to be passed binary data, and will throw an exception if the given string contains any characters whose UTF-16 representation occupies more than one byte. For more details, see the documentation for btoa().

Encoded size increase

Each Base64 digit represents exactly 6 bits of data. So, three 8-bits bytes of the input string/binary file (3×8 bits = 24 bits) can be represented by four 6-bit Base64 digits (4×6 = 24 bits).

This means that the Base64 version of a string or file will be at least 133% the size of its source (a ~33% increase). The increase may be larger if the encoded data is small. For example, the string "a" with length === 1 gets encoded to "YQ==" with length === 4 — a 300% increase.

The "Unicode Problem"

Since DOMStrings are 16-bit-encoded strings, in most browsers calling window.btoa on a Unicode string will cause a Character Out Of Range exception if a character exceeds the range of a 8-bit ASCII-encoded character. There are two possible methods to solve this problem:

  • the first one is to escape the whole string and then encode it;
  • the second one is to convert the UTF-16 DOMString to an UTF-8 array of characters and then encode it.

Here are the two possible methods.

Solution #1 - escaping the string before encoding it

//

function utf8_to_b64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

function b64_to_utf8(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

// Usage:
utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

This solution has been proposed by Johan Sundström.

Another possible solution without utilizing the now deprecated 'unescape' and 'escape' functions.

//

function b64EncodeUnicode(str) {
    return btoa(
        encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
            return String.fromCharCode('0x' + p1);
        })
    );
}
b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="

Solution #2 - rewriting atob() and btoa() using TypedArrays and UTF-8

Note: The following code is also useful to get an ArrayBuffer from a Base64 string and/or viceversa (see below).

//
'use strict';

/*\
|*|
|*|  Base64 / binary data / UTF-8 strings utilities
|*|
|*|  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
|*|
\*/

/* Array of bytes to Base64 string decoding */

function b64ToUint6(nChr) {
    return nChr > 64 && nChr < 91
        ? nChr - 65
        : nChr > 96 && nChr < 123
        ? nChr - 71
        : nChr > 47 && nChr < 58
        ? nChr + 4
        : nChr === 43
        ? 62
        : nChr === 47
        ? 63
        : 0;
}

function base64DecToArr(sBase64, nBlocksSize) {
    var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ''),
        nInLen = sB64Enc.length,
        nOutLen = nBlocksSize ? Math.ceil(((nInLen * 3 + 1) >> 2) / nBlocksSize) * nBlocksSize : (nInLen * 3 + 1) >> 2,
        taBytes = new Uint8Array(nOutLen);

    for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
        nMod4 = nInIdx & 3;
        nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << (6 * (3 - nMod4));
        if (nMod4 === 3 || nInLen - nInIdx === 1) {
            for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
                taBytes[nOutIdx] = (nUint24 >>> ((16 >>> nMod3) & 24)) & 255;
            }
            nUint24 = 0;
        }
    }

    return taBytes;
}

/* Base64 string to array encoding */

function uint6ToB64(nUint6) {
    return nUint6 < 26 ? nUint6 + 65 : nUint6 < 52 ? nUint6 + 71 : nUint6 < 62 ? nUint6 - 4 : nUint6 === 62 ? 43 : nUint6 === 63 ? 47 : 65;
}

function base64EncArr(aBytes) {
    var nMod3 = 2,
        sB64Enc = '';

    for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
        nMod3 = nIdx % 3;
        if (nIdx > 0 && ((nIdx * 4) / 3) % 76 === 0) {
            sB64Enc += '\r\n';
        }
        nUint24 |= aBytes[nIdx] << ((16 >>> nMod3) & 24);
        if (nMod3 === 2 || aBytes.length - nIdx === 1) {
            sB64Enc += String.fromCodePoint(
                uint6ToB64((nUint24 >>> 18) & 63),
                uint6ToB64((nUint24 >>> 12) & 63),
                uint6ToB64((nUint24 >>> 6) & 63),
                uint6ToB64(nUint24 & 63)
            );
            nUint24 = 0;
        }
    }

    return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
}

/* UTF-8 array to DOMString and vice versa */

function UTF8ArrToStr(aBytes) {
    var sView = '';

    for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
        nPart = aBytes[nIdx];
        sView += String.fromCodePoint(
            nPart > 251 && nPart < 254 && nIdx + 5 < nLen /* six bytes */
                ? /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
                  (nPart - 252) * 1073741824 +
                      ((aBytes[++nIdx] - 128) << 24) +
                      ((aBytes[++nIdx] - 128) << 18) +
                      ((aBytes[++nIdx] - 128) << 12) +
                      ((aBytes[++nIdx] - 128) << 6) +
                      aBytes[++nIdx] -
                      128
                : nPart > 247 && nPart < 252 && nIdx + 4 < nLen /* five bytes */
                ? ((nPart - 248) << 24) + ((aBytes[++nIdx] - 128) << 18) + ((aBytes[++nIdx] - 128) << 12) + ((aBytes[++nIdx] - 128) << 6) + aBytes[++nIdx] - 128
                : nPart > 239 && nPart < 248 && nIdx + 3 < nLen /* four bytes */
                ? ((nPart - 240) << 18) + ((aBytes[++nIdx] - 128) << 12) + ((aBytes[++nIdx] - 128) << 6) + aBytes[++nIdx] - 128
                : nPart > 223 && nPart < 240 && nIdx + 2 < nLen /* three bytes */
                ? ((nPart - 224) << 12) + ((aBytes[++nIdx] - 128) << 6) + aBytes[++nIdx] - 128
                : nPart > 191 && nPart < 224 && nIdx + 1 < nLen /* two bytes */
                ? ((nPart - 192) << 6) + aBytes[++nIdx] - 128
                : /* nPart < 127 ? */ /* one byte */
                  nPart
        );
    }

    return sView;
}

function strToUTF8Arr(sDOMStr) {
    var aBytes,
        nChr,
        nStrLen = sDOMStr.length,
        nArrLen = 0;

    /* mapping... */

    for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
        nChr = sDOMStr.codePointAt(nMapIdx);

        if (nChr > 65536) {
            nMapIdx++;
        }

        nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
    }

    aBytes = new Uint8Array(nArrLen);

    /* transcription... */

    for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
        nChr = sDOMStr.codePointAt(nChrIdx);
        if (nChr < 128) {
            /* one byte */
            aBytes[nIdx++] = nChr;
        } else if (nChr < 0x800) {
            /* two bytes */
            aBytes[nIdx++] = 192 + (nChr >>> 6);
            aBytes[nIdx++] = 128 + (nChr & 63);
        } else if (nChr < 0x10000) {
            /* three bytes */
            aBytes[nIdx++] = 224 + (nChr >>> 12);
            aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
            aBytes[nIdx++] = 128 + (nChr & 63);
        } else if (nChr < 0x200000) {
            /* four bytes */
            aBytes[nIdx++] = 240 + (nChr >>> 18);
            aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
            aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
            aBytes[nIdx++] = 128 + (nChr & 63);
            nChrIdx++;
        } else if (nChr < 0x4000000) {
            /* five bytes */
            aBytes[nIdx++] = 248 + (nChr >>> 24);
            aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63);
            aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
            aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
            aBytes[nIdx++] = 128 + (nChr & 63);
            nChrIdx++;
        } /* if (nChr <= 0x7fffffff) */ else {
            /* six bytes */
            aBytes[nIdx++] = 252 + (nChr >>> 30);
            aBytes[nIdx++] = 128 + ((nChr >>> 24) & 63);
            aBytes[nIdx++] = 128 + ((nChr >>> 18) & 63);
            aBytes[nIdx++] = 128 + ((nChr >>> 12) & 63);
            aBytes[nIdx++] = 128 + ((nChr >>> 6) & 63);
            aBytes[nIdx++] = 128 + (nChr & 63);
            nChrIdx++;
        }
    }

    return aBytes;
}

Tests

//
/* Tests */

var sMyInput = 'Base 64 \u2014 Mozilla Developer Network';

var aMyUTF8Input = strToUTF8Arr(sMyInput);

var sMyBase64 = base64EncArr(aMyUTF8Input);

alert(sMyBase64);

var aMyUTF8Output = base64DecToArr(sMyBase64);

var sMyOutput = UTF8ArrToStr(aMyUTF8Output);

alert(sMyOutput);

Appendix: Decode a Base64 string to Uint8Array or ArrayBuffer

These function let us to create also uint8Arrays or arrayBuffers from Base64-encoded strings:

//
// "Base 64 \u2014 Mozilla Developer Network"
var myArray = base64DecToArr('QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==');

// "Base 64 \u2014 Mozilla Developer Network"
var myBuffer = base64DecToArr('QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==').buffer;

alert(myBuffer.byteLength);

Note: The function base64DecToArr(sBase64[, nBlocksSize]) returns an uint8Array of bytes. If your aim is to build a buffer of 16-bit / 32-bit / 64-bit raw data, use the nBlocksSize argument, which is the number of bytes of which the uint8Array.buffer.bytesLength property must result a multiple (1 or omitted for ASCII, binary strings or UTF-8-encoded strings, 2 for UTF-16 strings, 4 for UTF-32 strings).

Term: Baseline

  • CSS
  • Glossary
  • SVG
  • alignment
  • typography

The baseline is a term used in European and West Asian typography meaning an imaginary line upon which the characters of a font rest.

The descenders of characters like g and p extend below this line. Glossary("glyph", "Glyphs") with rounded lower and upper extents like C or 3 slightly extend below it.

East Asian scripts have no baseline. Their glyphs are placed in a square box without ascenders or descenders.

See also

Term: beacon

  • Beacon
  • Glossary
  • Reference
  • Web Performance

A web beacon is a small object, such as a 1 pixel gif, embedded in markup, used to communicate information back to the web server or to 3rd party servers. Beacons are generally included to provide information about the user for statistical purposes. Beacons are often included within third party scripts for collecting user data, performance metrics and error reporting.

There is a W3C Draft Beacon Specification to standardize the beacon as an interface to asynchronously transfer HTTP data from User Agent to a web server prior to page load without negative performance impact.

See also

Term: BiDi

  • Accessibility
  • Glossary

BiDi (BiDirectional) refers to a document containing both right-to-left and left-to-right text. Even when both directionalities occur in the same paragraph, the text in each language must appear in its proper directionality.

See also

  • Interwiki("wikipedia", "Bi-directional text") on Wikipedia

Term: BigInt

  • BigInt
  • Glossary
  • JavaScript
  • Reference
  • arbitrary precision format

In Glossary("JavaScript"), BigInt is a numeric data type that can represent integers in the arbitrary precision format. In other programming languages different numeric types can exist, for examples: Integers, Floats, Doubles, or Bignums.

See also

  • Interwiki("wikipedia", "Data type#Numeric_types", "Numeric types") on Wikipedia
  • The JavaScript type: BigInt
  • The JavaScript global object jsxref("BigInt")

Term: Blink

  • Glossary
  • Infrastructure
  • Layout
  • Rendering engine

Blink is an open-source browser layout engine developed by Google as part of Chromium (and therefore part of glossary("Google Chrome", "Chrome") as well). Specifically, Blink began as a fork of the WebCore library in glossary("WebKit"), which handles layout, rendering, and glossary("DOM"), but now stands on its own as a separate glossary("rendering engine").

See also

  • Blink project home page

  • Blink on Wikipedia

  • FAQ on Blink

  • Glossary

    • glossary("Google Chrome")
    • glossary("Gecko")
    • glossary("Trident")
    • glossary("WebKit")
    • glossary("Rendering engine")

Term: Block cipher mode of operation

  • Block cipher mode of operation
  • Cryptography
  • Glossary
  • Security

A block cipher mode of operation, usually just called a "mode" in context, specifies how a block cipher should be used to encrypt or decrypt messages that are longer than the block size.

Most symmetric-key algorithms currently in use are block ciphers: this means that they encrypt data a block at a time. The size of each block is fixed and determined by the algorithm: for example AES uses 16-byte blocks. Block ciphers are always used with a mode, which specifies how to securely encrypt messages that are longer than the block size. For example, AES is a cipher, while CTR, CBC, and GCM are all modes. Using an inappropriate mode, or using a mode incorrectly, can completely undermine the security provided by the underlying cipher.

Term: Block

  • Disambiguation
  • Glossary

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

_GlossaryDisambiguation}}

Term: Boolean

  • Boolean
  • CodingScripting
  • Glossary
  • JavaScript
  • Programming Languages
  • data types

In computer science, a Boolean is a logical data type that can have only the values true or false.

For example, in JavaScript, Boolean conditionals are often used to decide which sections of code to execute (such as in if statements) or repeat (such as in for loops).

Below is some JavaScript pseudocode (it's not truly executable code) demonstrating this concept.

//
/* JavaScript if statement */
if (boolean conditional) {
   // code to execute if the conditional is true
}

if (boolean conditional) {
  console.log("boolean conditional resolved to true");
} else {
  console.log("boolean conditional resolved to false");
}

/* JavaScript for loop */
for (control variable; boolean conditional; counter) {
  // code to execute repeatedly if the conditional is true
}

for (var i=0; i < 4; i++) {
  console.log("I print only when the boolean conditional is true");
}

The Boolean value is named after English mathematician interwiki("wikipedia", "George Boole"), who pioneered the field of mathematical logic.

See also

Term: Boot2Gecko

  • B2G
  • Boot2Gecko
  • Firefox OS
  • Glossary
  • Infrastructure
  • Intro

Boot2Gecko (B2G) is the engineering codename for glossary("Firefox OS") and refers to builds that haven't yet received official Firefox OS branding. (Firefox OS was also often called Boot2Gecko before the project had an official name.)

Term: Bootstrap

  • Bootstrap
  • CSS
  • Glossary
  • Intro
  • framework

Bootstrap is a free, open source Glossary("HTML"), CSS, and Glossary("JavaScript") framework for quickly building responsive websites.

Initially, Bootstrap was called Twitter Blueprint and was developed by a team working at Twitter. It supports responsive design and features predefined design templates that you can use out of the box, or customize for your needs with your code. You don't need to worry about compatibility with other browsers either, as Bootstrap is compatible with all modern browsers and newer versions of glossary("Microsoft Internet Explorer", "Internet Explorer").

See also

Term: Bounding Box

  • Bounding Box
  • CodingScripting
  • Design
  • Glossary

The bounding box of an element is the smallest possible rectangle (aligned with the axes of that element's user coordinate system) that entirely encloses it and its descendants.

Term: Breadcrumb

  • Accessibility
  • Glossary
  • Navigation
  • Search
  • Site map
  • breadcrumb

A breadcrumb, or breadcrumb trail, is a navigational aid that is typically placed between a site's header and the main content, displaying either a hierarchy of the current page in relation to the site's structure, from top level to current page, or a list of the links the user followed to get to the current page, in the order visited.

A location breadcrumb for this document might look something like this:

MDN > Glossary > Breadcrumb

Breadcrumb trails enable users to be aware of their location within a website. This type of navigation, if done correctly, helps users know where they are in a site and how they got there. They can also help a user get back to where they were before and can reduce the number of clicks needed to get to a higher-level page.

Term: Brotli

  • Brotli
  • Glossary
  • Reference
  • Web Performance
  • compression

Brotli is a general-purpose lossless compression algorithm.

It compresses data using a combination of a modern variant of the LZ77 algorithm, Huffman coding, and second-order context modeling, providing a compression ratio comparable to the best currently available general-purpose compression methods. Brotli provides better compression ratios than glossary("GZip_compression", "gzip") and deflate speeds are comparable, but brotli compressing is a slower process than Gzip compression, so gzip may be a better option for the compression of non-glossary("Cache", "cacheable") content.

Brotli is compatible with most modern browsers, but you may want to consider a fallback.

See also

Term: Browser

  • Glossary
  • Navigation

A Web browser or browser is a program that retrieves and displays pages from the Glossary("World Wide Web","Web"), and lets users access further pages through Glossary("hyperlink","hyperlinks"). A browser is the most familiar type of Glossary("user agent").

See also

Term: Browsing context

  • Glossary

A browsing context is the environment in which a browser displays a domxref("Document"). In modern browsers, it usually is a tab, but can be a window or even only parts of a page, like a frame or an iframe.

Each browsing context has a specific origin, the origin of the active document and a history that memorize all the displayed documents, in order.

Communication between browsing context is severely constrained. Between browsing context of the same origin, a domxref("BroadcastChannel") can be opened and used.

See also

  • See glossary("origin")

Term: buffer

  • Buffer
  • CodingScripting
  • Glossary
  • NeedsContent

A buffer is a storage in physical memory used to temporarily store data while it is being transferred from one place to another.

See also

Term: Bézier curve

  • Bézier curve
  • Glossary
  • Graphics
  • Reference

A Bézier curve (pronounced [bezje]) is a mathematically described curve used in computer graphics and animation. In Glossary("vector image", "vector images"), they are used to model smooth curves that can be scaled indefinitely.

The curve is defined by a set of control points with a minimum of two. Web related graphics and animations use Cubic Béziers, which are curves with four control points P0, P1, P2, and P3.

To draw the curve, two imaginary lines are drawn, one from P0 to P1 and the other from P1 to P2. The end points of the lines are then steadily moved to the next point. A third imaginary line is drawn with its starting point moving steadily on the first helper line and the end point on the second helper line. On this imaginary line a point is drawn from its starting point moving steadily to its end point. The curve this point describes is the Bézier curve. Here's an animated illustration demonstrating the creation of the curve:

Drawing a Bézier curve

See also

Term: Cacheable

  • Glossary
  • WebMechanics

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 following constraints for an HTTP response to be cached:

  • The method used in the request is itself cacheable, that is either a HTTPMethod("GET") or a HTTPMethod("HEAD") method. A response to a HTTPMethod("POST") or HTTPMethod("PATCH") request can also be cached if freshness is indicated and the HTTPHeader("Content-Location") header is set, but this is rarely implemented. (For example, Firefox does not support it per https://bugzilla.mozilla.org/show_bug.cgi?id=109553.) Other methods, like HTTPMethod("PUT") or HTTPMethod("DELETE") are not cacheable and their result cannot be cached.
  • The status code of the response is known by the application caching, and it is considered cacheable. The following status code are cacheable: HTTPStatus("200"), HTTPStatus("203"), HTTPStatus("204"), HTTPStatus("206"), HTTPStatus("300"), HTTPStatus("301"), HTTPStatus("404"), HTTPStatus("405"), HTTPStatus("410"), HTTPStatus("414"), and HTTPStatus("501").
  • There are specific headers in the response, like HTTPHeader("Cache-Control"), that prevents caching.

Note that some non-cacheable requests/responses to a specific URI may invalidate previously cached responses on the same URI. For example, a HTTPMethod("PUT") to pageX.html will invalidate all cached HTTPMethod("GET") or HTTPMethod("HEAD") requests to the same URI.

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

GET /pageX.html HTTP/1.1
(…)

200 OK
(…)

A HTTPMethod("PUT") request cannot be cached. Moreover, it invalidates cached data for request to the same URI done via HTTPMethod("HEAD") or HTTPMethod("GET"):

PUT /pageX.html HTTP/1.1
(…)

200 OK
(…)

A specific HTTPHeader("Cache-Control") header in the response can prevent caching:

GET /pageX.html HTTP/1.1
(…)

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

See also

  • Definition of cacheable in the HTTP specification.
  • Description of common cacheable methods: HTTPMethod("GET"), HTTPMethod("HEAD")
  • Description of common non-cacheable methods: HTTPMethod("PUT"), HTTPMethod("DELETE"), often HTTPMethod("POST")

Term: Cache

  • Glossary
  • HTTP

A cache (web cache or HTTP cache) is a component that stores HTTP responses temporarily so that it can be used for subsequent HTTP requests as long as it meets certain conditions.

See also

  • interwiki("wikipedia", "Web cache") on Wikipedia

Term: CalDAV

  • CalDAV
  • Glossary
  • Infrastructure

CalDAV (Calendaring extensions to Glossary("WebDAV")) is a glossary("protocol") standardized by the Glossary("IETF") and used to remotely access calendar data from a glossary("server").

See also

Term: Call stack

  • Call Stack
  • CodingScripting
  • Glossary
  • JavaScript

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple glossary("function","functions") — what function is currently being run and what functions are called from within that function, etc.

  • When a script calls a function, the interpreter adds it to the call stack and then starts carrying out the function.
  • Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.
  • When the current function is finished, the interpreter takes it off the stack and resumes execution where it left off in the last code listing.
  • If the stack takes up more space than it had assigned to it, it results in a "stack overflow" error.

Example

//

function greeting() {
    // [1] Some code here
    sayHi();
    // [2] Some code here
}
function sayHi() {
    return 'Hi!';
}

// Invoke the `greeting` function
greeting();

// [3] Some code here

The code above would be executed like this:

  1. Ignore all functions, until it reaches the greeting() function invocation.

  2. Add the greeting() function to the call stack list.

    Note: Call stack list: - greeting

  3. Execute all lines of code inside the greeting() function.

  4. Get to the sayHi() function invocation.

  5. Add the sayHi() function to the call stack list.

    Note: Call stack list: - sayHi - greeting

  6. Execute all lines of code inside the sayHi() function, until reaches its end.

  7. Return execution to the line that invoked sayHi() and continue executing the rest of the greeting() function.

  8. Delete the sayHi() function from our call stack list.

    Note: Call stack list: - greeting

  9. When everything inside the greeting() function has been executed, return to its invoking line to continue executing the rest of the JS code.

  10. Delete the greeting() function from the call stack list.

    Note: Call stack list: EMPTY

In summary, then, we start with an empty Call Stack. Whenever we invoke a function, it is automatically added to the Call Stack. Once the function has executed all of its code, it is automatically removed from the Call Stack. Ultimately, the Stack is empty again.

See also

  • Interwiki("wikipedia", "Call stack") on Wikipedia

  • Glossary

    • Glossary("Call stack")
    • Glossary("Function")

Term: Callback function

  • Callback
  • Callback function
  • CodingScripting
  • Glossary

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Here is a quick example:

//

function greeting(name) {
    alert('Hello ' + name);
}

function processUserInput(callback) {
    var name = prompt('Please enter your name.');
    callback(name);
}

processUserInput(greeting);

The above example is a glossary("synchronous") callback, as it is executed immediately.

Note, however, that callbacks are often used to continue code execution after an glossary("asynchronous") operation has completed — these are called asynchronous callbacks. A good example is the callback functions executed inside a .then() block chained onto the end of a promise after that promise fulfills or rejects. This structure is used in many modern web APIs, such as fetch().

See also

  • interwiki("wikipedia", "Callback(computerprogramming)", "Callback") on Wikipedia

Term: Canonical order

  • Canonical order
  • CodingScripting
  • Glossary

In CSS, canonical order is used to refer to the order in which separate values need to be specified (or Glossary("parse", "parsed")) or are to be Glossary("serialization", "serialized") as part of a CSS property value. It is defined by the formal Glossary("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, cssxref("background") shorthand property values are made up of several background-* longhand properties. The canonical order of those longhand values is defined as

  1. cssxref("background-image")
  2. cssxref("background-position")
  3. cssxref("background-size")
  4. cssxref("background-repeat")
  5. cssxref("background-attachment")
  6. cssxref("background-origin")
  7. cssxref("background-clip")
  8. cssxref("background-color")

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

See also

Term: Canvas

  • CodingScripting
  • Glossary
  • Graphics
  • HTML
  • JavaScript

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D and 3D shapes and bitmap images.

It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. It provides an empty graphic zone on which specific Glossary("JavaScript") Glossary("API","APIs") can draw (such as Canvas 2D or Glossary("WebGL")).

See also

Term: Card sorting

  • Card sorting
  • Design
  • Glossary

Card sorting is a simple technique used in glossary("Information architecture") whereby people involved in the design of a website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then organize those features into categories or groupings. This can be used for example to work out what should go on each page of a website. The name comes from the fact that often card sorting is carried out by literally writing the items to sort onto cards, and then arranging the cards into piles.

See also

  • interwiki("wikipedia", "Card_sorting", "Card sorting") on Wikipedia

Term: CardDAV

  • CardDAV
  • Glossary
  • Infrastructure

CardDAV (vCard Extension to Glossary("WebDAV")) is a glossary("protocol") standardized by the Glossary("IETF") and used to remote-access or share contact information over a glossary("server").

See also

Term: caret

  • Cursor
  • Glossary
  • Input
  • caret
  • insertion point
  • text cursor
  • text entry
  • text input
  • text insertion point

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 HTMLElement("input") and HTMLElement("textarea") elements, as well as any elements whose htmlattrxref("contenteditable") attribute is set, thereby allowing the contents of the element to be edited by the user.

See also

  • interwiki("wikipedia", "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 cssxref("caret-color") property to the appropriate cssxref("<color>") value.

HTML elements that may present a caret

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

Term: CDN

  • Glossary
  • Infrastructure

A CDN (Content Delivery Network) is a group of servers spread out over many locations. These servers store duplicate copies of data so that servers can fulfill data requests based on which servers are closest to the respective end-users. CDNs make for fast service less affected by high traffic.

CDNs are used widely for delivering stylesheets and Javascript files (static assets) of libraries like Bootstrap, jQuery etc. Using CDN for those library files is preferable for a number of reasons:

  • Serving libraries' static assets over CDN lowers the request burden on an organization's own servers.
  • Most CDNs have servers all over the globe, so CDN servers may be geographically nearer to your users than your own servers. Geographical distance affects latency proportionally.
  • CDNs are already configured with proper cache settings. Using a CDN saves further configuration for static assets on your own servers.

Term: Certificate authority

  • Cryptography
  • Glossary
  • Security

A certificate authority (CA) is an organization that Glossary("Signature/Security", "signs") Glossary("Digital certificate", "digital certificates") and their associated Glossary("Key", "public keys"), thereby asserting that the contained information and keys are correct.

For a website digital certificate, this information minimally includes the name of the organization that requested the digital certificate (e.g., Mozilla Corporation), the site that it is for (e.g., mozilla.org), and the certificate authority.

Certificate authorities are the part of the Internet public key infrastructure that allows browsers to verify website identity and securely connect over SSL (and HTTPS).

Note: Web browsers come preloaded with a list of "root certificates". The browser can use these to reliably check that the website certificate was signed by a certificate authority that "chains back" to the root certificate (i.e. was trusted by the owner of the root certificate or an intermediate CA). Ultimately this process relies on every CA performing adequate identity checks before signing a certificate!

See also

Term: Certified

  • Apps
  • B2G
  • Firefox OS
  • Glossary
  • Security
  • Trustworthy

Certified means that an application, content or data transmission has successfully undergone evaluation by professionals with expertise in the relevant field, thereby indicating completeness, security and trustworthiness.

For details on certification in glossary("Cryptography"), please refer to glossary("Digital Certificate").

See also

  • Interwiki("wikipedia", "Professional_certification(computertechnology)#Information_systems_security", "Certification") on Wikipedia

Term: Challenge-response authentication

  • Security

In security protocols, a challenge is some data sent to the client by the server in order to generate a different response each time. Challenge-response protocols are one way to fight against replay attacks where an attacker listens to the previous messages and resends them at a later time to get the same credentials as the original message.

The HTTP authentication protocol is challenge-response based, though the "Basic" protocol isn't using a real challenge (the realm is always the same).

See also

Term: Character encoding

  • Composing
  • Glossary

An encoding defines a mapping between bytes and text. A sequence of bytes allows for different textual interpretations. By specifying a particular encoding (such as UTF-8), we specify how the sequence of bytes is to be interpreted.

For example, in HTML we normally declare a character encoding of UTF-8, using the following line:

<meta charset="utf-8" />

This ensures that you can use characters from just about any human language in your HTML document, and they will display reliably.

See also

Term: Character set

  • Glossary
  • character encoding
  • character set

A character set is an encoding system to let computers know how to recognize Glossary("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, Glossary("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 Interwiki("wikipedia", "Mojibake").

See also

  • Interwiki("wikipedia", "Character encoding") (Wikipedia)

  • Interwiki("wikipedia", "Mojibake") (Wikipedia)

  • Glossary

    • Glossary("Character")
    • Glossary("Unicode")

Term: Character

  • CodingScripting
  • Glossary
  • strings

A character is either a symbol (letters, numbers, punctuation) or non-printing "control" (e.g., carriage return or soft hyphen). glossary("UTF-8") is the most common character set and includes the graphemes of the most popular human languages.

See also

  • interwiki("wikipedia", "Character (computing)") on Wikipedia
  • interwiki("wikipedia", "Character encoding") on Wikipedia
  • interwiki("wikipedia", "ASCII") on Wikipedia
  • interwiki("wikipedia", "UTF-8") on Wikipedia
  • interwiki("wikipedia", "Unicode") on Wikipedia

Term: Chrome

  • Browser
  • Chrome
  • Glossary
  • WebMechanics

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 glossary("Google Chrome") browser.

See also

Term: CIA

  • Glossary
  • Security

CIA (Confidentiality, Integrity, Availability) (also called the CIA triad or AIC triad) is a model that guides an organization's policies for information security.

See also

  • Interwiki("wikipedia", "Information_security#Key_concepts", "CIA") on Wikipedia

Term: Cipher suite

  • Cryptography
  • Glossary
  • Security

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

In a Glossary("cryptosystem") like Glossary("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

Term: Cipher

  • Cryptography
  • Glossary
  • Privacy
  • Security

In glossary("cryptography"), a cipher is an algorithm that can glossary("encryption", "encode") glossary("Plaintext") to make it unreadable, and to glossary("decryption", "decode") it back.

Ciphers were common long before the information age (e.g., substitution ciphers, transposition ciphers, and permutation ciphers), but none of them were cryptographically secure except for the one-time pad.

Modern ciphers are designed to withstand glossary("attack", "attacks") discovered by a glossary("cryptanalysis", "cryptanalyst"). There is no guarantee that all attack methods have been discovered, but each algorithm is judged against known classes of attacks.

Ciphers operate two ways, either as block ciphers on successive blocks, or buffers, of data, or as stream ciphers on a continuous data flow (often of sound or video).

They also are classified according to how their glossary("key", "keys") are handled:

  • symmetric key algorithms use the same key to encode and decode a message. The key also must be sent securely if the message is to stay confidential.
  • asymmetric key algorithms use a different key for encryption and decryption.

See also

  • Interwiki("wikipedia", "Cipher") on Wikipedia

  • Encryption and Decryption

  • MDN Web Docs Glossary

    • Glossary("Block cipher mode of operation")
    • Glossary("Cipher")
    • Glossary("Ciphertext")
    • Glossary("Cipher suite")
    • Glossary("Cryptanalysis")
    • Glossary("Cryptography")
    • Glossary("Decryption")
    • Glossary("Encryption")
    • Glossary("Key")
    • Glossary("Plaintext")
    • Glossary("Public-key cryptography")
    • Glossary("Symmetric-key cryptography")

Term: Ciphertext

  • Cryptography
  • Glossary
  • Privacy
  • Security

In glossary("cryptography"), a ciphertext is a scrambled message that conveys information but is not legible unless glossary("decryption","decrypted") with the right glossary("cipher") and the right secret (usually a glossary("key")), reproducing the original glossary("Plaintext"). A ciphertext's security, and therefore the secrecy of the contained information, depends on using a secure cipher and keeping the key secret.

See also

  • Interwiki("wikipedia", "Ciphertext") on Wikipedia

Term: Class

  • CodingScripting
  • Glossary

In glossary("OOP","object-oriented programming"), a class defines an glossary("object","object's") characteristics. Class is a template definition of an object's glossary("property","properties") and glossary("method","methods"), the "blueprint" from which other more specific instances of the object are drawn.

See also

Term: Clickjacking

  • Clickjacking
  • Interface-based attack
  • Glossary
  • Security
  • vulnerability
  • exploit

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 glossary("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.

Learn more

Term: Closure

  • CodingScripting
  • Glossary

The binding which defines the glossary("scope") of execution. In glossary("JavaScript"), glossary("function","functions") create a closure context.

See also

  • Interwiki("wikipedia", "Closure%28computerprogramming%29", "Closure") on Wikipedia
  • Closure on MDN

Term: CMS

  • CMS
  • Composing
  • Content management system
  • Glossary

A CMS (Content Management System) is software that allows users to publish, organize, change, or remove various kinds of content, not only text but also embedded images, video, audio, and interactive code.

See also

  • Interwiki("wikipedia", "Content management system") on Wikipedia

Term: Code point

  • Glossary

A code point is a number assigned to represent an abstract character in a system for representing text (such as Unicode). In Unicode, a code point is expressed in the form "U+1234" where "1234" is the assigned number. For example, the character "A" is assigned a code point of U+0041.

Character encoding forms, such as UTF-8 and UTF-16, determine how a Unicode code point should be encoded as a sequence of bytes. Different encoding forms may encode the same code point as different byte sequences: for example, the Cyrillic character "Ф", whose code point is U+0424, is encoded as 0xd0a4 in UTF-8 and as 0x0424 in UTF-16.

See also

Term: Code splitting

  • Glossary
  • Reference
  • Web Performance
  • code splitting
  • latency

Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel.

As an application grows in complexity or is maintained, CSS and JavaScripts files or bundles grow in byte size, especially as the number and size of included third-party libraries increases. To prevent the requirement of downloading ginormous files, scripts can be split into multiple smaller files. Then features required at page load can be downloaded immediately with additional scripts being lazy loaded after the page or application is interactive, thus improving performance. While the total amount of code is the same (and perhaps even a few bytes larger), the amount of code needed during initial load can be reduced.

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

Term: Code unit

  • Glossary

A code unit is the basic component used by a character encoding system (such as UTF-8 or UTF-16). A character encoding system uses one or more code units to encode a Unicode Glossary("code point").

In UTF-16 (the encoding system used for JavaScript strings) code units are 16-bit values. This means that operations such as indexing into a string or getting the length of a string operate on these 16-bit units. These units do not always map 1-1 onto what we might consider characters.

For example, sometimes characters with diacritics such as accents are represented using two Unicode code points:

//
const myString = 'ñ';
myString.length;
// 2

Also, since not all of the code points defined by Unicode fit into 16 bits, many Unicode code points are encoded as a pair of UTF-16 code units, which is called a surrogate pair:

//
const face = '🥵';
face.length;
// 2

The jsxref("String/codePointAt", "codePointAt()") method of the JavaScript jsxref("String") object enables you to retrieve the Unicode code point from its encoded form:

//
const face = '🥵';
face.codePointAt(0);
// 129397

See also

Term: Codec

  • Glossary
  • WebMechanics

A codec (a blend word derived from "**coder-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

Term: Compile time

  • CodingScripting
  • Glossary
  • JavaScript

The compile time is the time from when the program is first loaded until the program is Glossary("parse","parsed").

See also

  • Interwiki("wikipedia", "Compile time") on Wikipedia

Term: Compile

  • CodingScripting
  • Glossary

Compiling is the process of transforming a computer program written in a given Glossary("computer programming", "language") into a set of instructions in another format or language. A compiler is a computer program to execute that task.

Typically, a compiler transforms code written in a higher-level language such as C++ or Rust or Java into executable (runnable) code — so-called binary code or machine code. WebAssembly, for example, is a form of executable binary code that can be compiled from code written in C++, Rust, C#, Go, Swift, and several other languages and that can then be run on any web page, in any browser.

Most compilers perform either ahead-of-time (AOT) compilation or just-in-time (JIT) compilation.

The GNU gcc compiler is one well-known example of an AOT compiler. AOT compilers are typically invoked from the command line in a shell environment (from within a terminal or console) or within an Glossary("IDE").

JIT compilers are typically not invoked directly but are instead built into software runtimes internally, for the purpose of improving performance. For example, all major browsers now use JavaScript engines that have built-in JIT compilers.

Compilers may also translate among higher-level languages — for example, from TypeScript to Glossary("JavaScript") — in which case, they are often sometimes referred to as transpilers.

See also

Term: Computer Programming

  • CodingScripting
  • Computer Programming
  • Programming Language
  • programming

Computer programming is a process of composing and organizing a collection of instructions. These tell a computer/software program what to do in a language which the computer understands. These instructions come in the form of many different languages such as C++, Java, JavaScript, HTML, Python, Ruby, and Rust.

Using an appropriate language, you can program/create all sorts of software. For example, a program that helps scientists with complex calculations, a database that stores huge amounts of data, a web site that allows people to download music, or animation software that allows people to create animated movies.

See also

Term: Conditional

  • Beginner
  • CodingScripting
  • Glossary

A condition is a set of rules that can interrupt normal code execution or change it, depending on whether the condition is completed or not.

An instruction or a set of instructions is executed if a specific condition is fulfilled. Otherwise, another instruction is executed. It is also possible to repeat the execution of an instruction, or set of instructions, while a condition is not yet fulfilled.

See also

Term: Constant

  • CodingScripting
  • Constant
  • Glossary

A constant is a value that the programmer cannot change, for example numbers (1, 2, 42). With glossary("variable","variables"), on the other hand, the programmer can assign a new glossary("value") to a variable name already in use.

Like variables, some constants are bound to identifiers. For example, the identifier pi could be bound to the value 3.14... .

See also

  • Interwiki("wikipedia", "Constant(computerprogramming)", "Constant") on Wikipedia

Term: Constructor

  • CodingScripting
  • Glossary

A constructor belongs to a particular class glossary("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 glossary("OOP","object-oriented programming") languages. Essentially, a constructor in glossary("JavaScript") is usually declared at the instance of a glossary("class").

Syntax

//
// 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 glossary("object reference") to a glossary("variable").

//

function Default() {}

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

See also

Term: Continuous Media

  • Glossary
  • Media

Continuous media is data where there is a timing relationship between source and destination. The most common examples of continuous media are audio and motion video. Continuous media can be real-time (interactive), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict.

CSS can be used in a variety of contexts, including print media. And some CSS, particularly those that are used for layout, behave differently depending on the context they are in.

Continuous Media, therefore, identifies a context where the content is not broken up. It flows continuously. Web content displayed on a screen is continuous media, as is spoken content.

Term: Control flow

  • CodingScripting
  • Glossary
  • JavaScript

The control flow is the order in which the computer executes statements in a script.

Code is run in order from the first line in the file to the last line, unless the computer runs across the (extremely frequent) structures that change the control flow, such as conditionals and loops.

For example, imagine a script used to validate user data from a webpage form. The script submits validated data, but if the user, say, leaves a required field empty, the script prompts them to fill it in. To do this, the script uses a Glossary("Conditional", "conditional") structure or if...else, so that different code executes depending on whether the form is complete or not:

if (field==empty) {
    promptUser();
} else {
    submitForm();
}

A typical script in glossary("JavaScript") or glossary("PHP") (and the like) includes many control structures, including conditionals, Glossary("Loop", "loops") and Glossary("Function", "functions"). Parts of a script may also be set to execute when Glossary("Event", "events") occur.

For example, the above excerpt might be inside a function that runs when the user clicks the Submit button for the form. The function could also include a loop, which iterates through all of the fields in the form, checking each one in turn. Looking back at the code in the if and else sections, the lines promptUser and submitForm could also be calls to other functions in the script. As you can see, control structures can dictate complex flows of processing even with only a few lines of code.

Control flow means that when you read a script, you must not only read from start to finish but also look at program structure and how it affects order of execution.

See also

Term: Cookie

  • Glossary
  • WebMechanics

A cookie is a small piece of information left on a visitor's computer by a website, via a web browser.

Cookies are used to personalize a user's web experience with a website. It may contain the user's preferences or inputs when accessing that website. A user can customize their web browser to accept, reject, or delete cookies.

Cookies can be set and modified at the server level using the Set-Cookie HTTP header, or with JavaScript using document.cookie.

See also

Term: Copyleft

  • Glossary
  • OpenPractices
  • Remixing
  • Sharing

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 Glossary("GPL") (for software) and the Creative Commons SA (Share Alike) licenses (for works of art).

See also

  • Interwiki("wikipedia", "Copyleft") on Wikipedia

Term: CORS-safelisted request header

  • CORS
  • Fetch

A CORS-safelisted request header is one of the following HTTP headers:

  • HTTPHeader("Accept"),
  • HTTPHeader("Accept-Language"),
  • HTTPHeader("Content-Language"),
  • HTTPHeader("Content-Type").

When containing only these headers (and values that meet the additional requirements laid out below), a requests doesn't need to send a glossary("preflight request") in the context of CORS.

You can safelist more headers using the HTTPHeader("Access-Control-Allow-Headers") header and also list the above headers there to circumvent the following additional restrictions:

Additional restrictions

CORS-safelisted headers must also fulfill the following requirements in order to be a CORS-safelisted request header:

  • For HTTPHeader("Accept-Language") and HTTPHeader("Content-Language"): can only have values consisting of 0-9, A-Z, a-z, space or *,-.;=.
  • For HTTPHeader("Accept") and HTTPHeader("Content-Type"): can't contain a CORS-unsafe request header byte: 0x00-0x1F (except for 0x09 (HT), which is allowed), "():<>?@[\]{}, and 0x7F (DEL).
  • For HTTPHeader("Content-Type"): needs to have a MIME type of its parsed value (ignoring parameters) of either application/x-www-form-urlencoded, multipart/form-data, or text/plain.
  • For any header: the value's length can't be greater than 128.

See also

  • Glossary("CORS-safelisted response header")
  • Glossary("Forbidden header name")
  • Glossary("Request header")

Term: CORS-safelisted response header

  • CORS
  • Fetch
  • Glossary
  • HTTP

A CORS-safelisted response header is an HTTP header in a CORS response that it is considered safe to expose to client scripts. Only safelisted response headers are made available to web pages.

By default, the safelist includes the following response headers:

  • HTTPHeader("Cache-Control")
  • HTTPHeader("Content-Language")
  • HTTPHeader("Content-Length")
  • HTTPHeader("Content-Type")
  • HTTPHeader("Expires")
  • HTTPHeader("Last-Modified")
  • HTTPHeader("Pragma")

Additional headers can be added to the safelist using HTTPHeader("Access-Control-Expose-Headers").

Note: HTTPHeader("Content-Length") was not part of the original set of safelisted response headers [ref]

Examples

Extending the safelist

You can extend the list of CORS-safelisted response headers by using the HTTPHeader("Access-Control-Expose-Headers") header:

Access-Control-Expose-Headers: X-Custom-Header, Content-Encoding

See also

  • HTTP

  • HTTP headers

  • HTTPHeader("Access-Control-Expose-Headers")

  • Glossary

    • Glossary("CORS")
    • Glossary("CORS-safelisted_request_header", "CORS-safelisted request header")
    • Glossary("Forbidden header name")
    • Glossary("Request header")

Term: CORS

  • Glossary
  • Infrastructure
  • Security

CORS (Cross-Origin Resource Sharing) is a system, consisting of transmitting Glossary("HTTP_header", "HTTP headers"), that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests.

The same-origin security policy forbids cross-origin access to resources. But CORS gives web servers the ability to say they want to opt into allowing cross-origin access to their resources.

See also

CORS headers

  • HTTPHeader("Access-Control-Allow-Origin")
    • : Indicates whether the response can be shared.
  • HTTPHeader("Access-Control-Allow-Credentials")
    • : Indicates whether or not the response to the request can be exposed when the credentials flag is true.
  • HTTPHeader("Access-Control-Allow-Headers")
    • : Used in response to a preflight request to indicate which HTTP headers can be used when making the actual reques
  • HTTPHeader("Access-Control-Allow-Methods")
    • : Specifies the method or methods allowed when accessing the resource in response to a preflight request.
  • HTTPHeader("Access-Control-Expose-Headers")
    • : Indicates which headers can be exposed as part of the response by listing their names.
  • HTTPHeader("Access-Control-Max-Age")
    • : Indicates how long the results of a preflight request can be cached.
  • HTTPHeader("Access-Control-Request-Headers")
    • : Used when issuing a preflight request to let the server know which HTTP headers will be used when the actual request is made.
  • HTTPHeader("Access-Control-Request-Method")
    • : Used when issuing a preflight request to let the server know which HTTP method will be used when the actual request is made.
  • HTTPHeader("Origin")
    • : Indicates where a fetch originates from.

Term: Crawler

  • Browser
  • Crawler
  • Glossary
  • Infrastructure

A web crawler is a program, often called a bot or robot, which systematically browses the glossary("World Wide Web","Web") to collect data from webpages. Typically search engines (e.g. Google, Bing, etc.) use crawlers to build indexes.

See also

  • Interwiki("wikipedia", "Web crawler") on Wikipedia
  • Glossary("Search engine") (Glossary)

Term: CRLF

  • CR
  • CRLF
  • Glossary
  • Infrastructure
  • LF
  • carriage return
  • line feed

CR and LF are control characters or bytecode that can be used to mark a line break in a text file.

  • CR = Carriage Return (\r, 0x0D in hexadecimal, 13 in decimal) — moves the cursor to the beginning of the line without advancing to the next line.
  • LF = Line Feed (\n, 0x0A in hexadecimal, 10 in decimal) — moves the cursor down to the next line without returning to the beginning of the line.

A CR immediately followed by a LF (CRLF, \r\n, or 0x0D0A) moves the cursor down to the next line and then to the beginning of the line.

See also

  • interwiki("wikipedia", "Newline#In_programming_languages", "Newline") on Wikipedia
  • interwiki("wikipedia", "Carriage_return#Computers", "Carriage return") on Wikipedia

Term: Cross-site scripting

  • Cross Site Scripting
  • DOM
  • Glossary
  • Security
  • XSS
  • exploit

Cross-site scripting (XSS) is a security exploit which allows an attacker to inject into a website malicious client-side code. This code is executed by the victims and lets the attackers bypass access controls and impersonate users. According to the Open Web Application Security Project, XSS was the seventh most common Web app vulnerability in 2017.

These attacks succeed if the Web app does not employ enough validation or encoding. The user's browser cannot detect the malicious script is untrustworthy, and so gives it access to any cookies, session tokens, or other sensitive site-specific information, or lets the malicious script rewrite the glossary("HTML") content.

See also

Term: Cross Axis

  • CSS
  • Glossary
  • cross axis
  • flexbox

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

The cross axis runs down the column

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

The cross axis runs along the row.

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

See also

Property reference

  • cssxref("align-content")
  • cssxref("align-items")
  • cssxref("align-self")
  • cssxref("flex-wrap")
  • cssxref("flex-direction")
  • cssxref("flex")
  • cssxref("flex-basis")
  • cssxref("flex-flow")
  • cssxref("flex-grow")
  • cssxref("flex-shrink")
  • cssxref("justify-content")
  • cssxref("order")

Further reading

Term: CRUD

  • Glossary
  • Infrastructure

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

  • Interwiki("wikipedia", "CRUD") on Wikipedia

Term: Cryptanalysis

  • Cryptography
  • Glossary
  • Privacy
  • Security

Cryptanalysis is the branch of glossary("cryptography") that studies how to break codes and cryptosystems. Cryptanalysis creates techniques to break glossary("cipher","ciphers"), in particular by methods more efficient than a brute-force search. In addition to traditional methods like frequency analysis and index of coincidence, cryptanalysis includes more recent methods, like linear cryptanalysis or differential cryptanalysis, that can break more advanced ciphers.

See also

  • Interwiki("wikipedia", "Cryptanalysis") on Wikipedia

Term: Cryptographic hash function

  • Cryptography
  • Glossary
  • Security

A cryptographic hash function, also sometimes called a digest function, is a glossary("cryptography", "cryptographic") primitive transforming a message of arbitrary size into a message of fixed size, called a glossary("digest"). Cryptographic hash functions are used for authentication, Glossary("digital signature", "digital signatures"), and Glossary("HMAC", "message authentication codes").

To be used for cryptography, a hash function must have these qualities:

  • quick to compute (because they are generated frequently)
  • not invertible (each digest could come from a very large number of messages, and only brute-force can generate a message that leads to a given digest)
  • tamper-resistant (any change to a message leads to a different digest)
  • collision-resistant (it should be impossible to find two different messages that produce the same digest)

Cryptographic hash functions such as MD5 and SHA-1 are considered broken, as attacks have been found that significantly reduce their collision resistance.

See also

  • interwiki("wikipedia", "Cryptographic hash function", "Cryptographic hash function") on Wikipedia

  • MDN Web Docs Glossary

    • Glossary("Symmetric-key cryptography")

Term: Cryptography

  • Cryptography
  • Glossary
  • Privacy
  • Security

Cryptography, or cryptology, is the science that studies how to encode and transmit messages securely. Cryptography designs and studies algorithms used to encode and decode messages in an insecure environment, and their applications.

More than just data confidentiality, cryptography also tackles identification, authentication, non-repudiation, and data integrity. Therefore it also studies usage of cryptographic methods in context, cryptosystems.

See also

  • Interwiki("wikipedia", "Cryptography") on Wikipedia

  • Information security tutorial

  • Encrypting and Decrypting

  • MDN Web Docs Glossary

    • Glossary("Block cipher mode of operation")
    • Glossary("Cipher")
    • Glossary("Ciphertext")
    • Glossary("Cipher suite")
    • Glossary("Cryptanalysis")
    • Glossary("Cryptography")
    • Glossary("Decryption")
    • Glossary("Encryption")
    • Glossary("Key")
    • Glossary("Plaintext")
    • Glossary("Public-key cryptography")
    • Glossary("Symmetric-key cryptography")

Term: CSP

  • Glossary
  • HTTP
  • Infrastructure

A CSP (Content Security Policy) is used to detect and mitigate certain types of website related attacks like Glossary("Cross-site_scripting"), clickjacking and data injections.

The implementation is based on an Glossary("HTTP") header called HTTPHeader("Content-Security-Policy").

See also

Term: CSRF

  • Glossary
  • Security

CSRF (Cross-Site Request Forgery) is an attack that impersonates a trusted user and sends a website unwanted commands.

This can be done, for example, by including malicious parameters in a glossary("URL") behind a link that purports to go somewhere else:

<img src="https://www.example.com/index.php?action=delete&id=123" />

For users who have modification permissions on https://www.example.com, the <img> element executes action on https://www.example.com without their noticing, even if the element is not at https://www.example.com.

There are many ways to prevent CSRF, such as implementing glossary("REST", "RESTful API"), adding secure tokens, etc.

See also

Term: CSS pixel

  • CSS
  • CSS Pixel
  • Glossary
  • height
  • length
  • pixel
  • size
  • unit
  • width

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

See also

Term: CSS preprocessor

  • CSS
  • Glossary

A CSS preprocessor is a program that lets you generate Glossary("CSS") from the preprocessor's own unique Glossary("syntax").

There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

To use a CSS preprocessor, you must install a CSS compiler on your web Glossary("server"); Or use the CSS preprocessor to compile on the development environment, and then upload compiled CSS file to the web server.

See also

Term: Selector (CSS)

  • CSS
  • CSS Selector
  • CodingScripting
  • Glossary
  • HTML
  • Selector

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:

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 HTMLElement("p") element), "div.warning" (which makes any HTMLElement("div") element with the Glossary("CSS class", "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:

<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:

EmbedLiveSample("Example", 640, 240)

See also

Term: Media (CSS)

  • CSS
  • Glossary
  • Intro
  • Media

In the context of Glossary("CSS") (Cascading Style Sheets), the term media refers to the destination to which the document is to be drawn by the Glossary("rendering engine").

Typically, this is a screen—but it may also be a printer, Braille display, or another type of device.

CSS offers several features that allow you to tweak your document's styles—or even offer different styles—according to the media type (such as screen or print, to name two) or media capabilities (such as width, resolution, or other values) of the viewer's device.

See also

Term: CSS Object Model (CSSOM)

  • CSS
  • CSSOM
  • DOM
  • Glossary

The CSS Object Model (CSSOM) is a set of APIs for reading and modifying a document's style-related (CSS) information. In other words, similar to the way in which the DOM enables a document's structure and content to be read and modified from JavaScript, the CSSOM allows the document's styling to be read and modified from JavaScript.

See also

Term: Data structure

  • CodingScripting
  • Data structure
  • Glossary

Data structure is a particular way of organizing data so that it can be used efficiently.

See also

  • interwiki("wikipedia", "Data_structure", "Data structure") on Wikipedia

Term: Database

  • Database
  • Glossary
  • Sql

A database is a storing system that collects organized data, to make some works easier like searching, structure, and extend.

In web development, most databases use the relational database management system (RDBMS) to organize data and programming in glossary("SQL"). Some databases, however, don't follow the former mechanism to organized data, which called NoSQL.

Some famous server-side RDBMS are MySQL(or MariaDB which is a fork of it), SQL Server, and Oracle Database. On the other hand, some famous NoSQL examples are MongoDB, Cassandra, and Redis.

Browsers also have their own database system called glossary("IndexedDB").

See also

  • Interwiki("wikipedia", "Database") on Wikipedia

  • Glossary

    • Glossary("IndexedDB")
    • Glossary("SQL")

Term: Decryption

  • Cryptography
  • Glossary
  • Privacy
  • Security

In glossary("cryptography"), decryption is the conversion of glossary("ciphertext") into glossary("Plaintext").

Decryption is a cryptographic primitive: it transforms a ciphertext message into plaintext using a cryptographic algorithm called a glossary("cipher"). Like encryption, decryption in modern ciphers is performed using a specific algorithm and a secret, called the glossary("key"). Since the algorithm is often public, the key must stay secret if the encryption stays secure.

The decryption primitive.

Decryption is the reverse of glossary("encryption") and if the key stays secret, decryption without knowing the specific secret, decryption is mathematically hard to perform. How hard depends on the security of the cryptographic algorithm chosen and evolves with the progress of glossary("cryptanalysis").

See also

Term: Delta

  • Delta
  • Glossary
  • difference
  • value

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:

//
let deltaX = newX - oldX;

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

//
let newX = oldX + deltaX;

See also

  • Mouse wheel events (domxref("WheelEvent") offer the amount the wheel moved since the last event in its domxref("WheelEvent.deltaX", "deltaX"), domxref("WheelEvent.deltaY", "deltaY"), and domxref("WheelEvent.deltaZ", "deltaZ") properties, for example.

Term: Denial of Service

  • Attack
  • Denial of Service
  • Glossary
  • Intro
  • Security

See DoS attack for more information.

Term: Descriptor (CSS)

  • CSS
  • CodingScripting
  • Glossary
  • NeedsContent

A CSS descriptor defines the characteristics of an cssxref("at-rule"). At-rules may have one or multiple descriptors. Each descriptor has:

  • A name
  • A value, which holds the component values
  • An "!important" flag, which in its default state is unset

Term: Deserialization

  • Deserialization
  • Deserialize
  • Glossary
  • JavaScript

The process whereby a lower-level format (e.g. that has been transferred over a network, or stored in a data store) is translated into a readable object or other data structure.

In Glossary("JavaScript"), for example, you can deserialize a Glossary("JSON") Glossary("string") to an object by calling the Glossary("function") jsxref("JSON.parse()").

See also

Term: Developer Tools

  • CodingScripting
  • Developer Tools
  • Glossary

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

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

See also

Term: DHTML

  • CodingScripting
  • DHTML
  • Glossary
  • HTML

DHTML (Dynamic glossary("HTML")) refers to the code behind interactive webpages that need no plugins like Glossary("Adobe Flash","Flash") or Glossary("Java"). DHTML aggregates the combined functionality of Glossary("HTML"), Glossary("CSS"), the Glossary("DOM"), and Glossary("JavaScript").

See also

  • interwiki("wikipedia", "Dynamic HTML", "DHTML") on Wikipedia

Term: Digest

  • Cryptography
  • Glossary
  • Privacy
  • Security

A digest is a small value generated by a glossary("cryptographic hash function", "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 glossary("key","keys")

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

See also

  • See glossary("Cryptographic hash function")
  • interwiki("wikipedia", "Cryptographic_hash_function", "Hash function") on Wikipedia

Term: Digital certificate

  • Cryptography
  • Glossary
  • Security

A digital certificate is a data file that binds a publicly known Glossary("Key", "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 Glossary("certificate authority"), attesting to the certificate's authenticity.

See also

  • interwiki("wikipedia", "Public_key_certificate", "Digital certificate ") on Wikipedia

Term: Distributed Denial of Service

  • Attack
  • DDoS
  • Denial of Service
  • Glossary
  • Intro
  • Security

A Distributed Denial-of-Service (DDoS) is an attack in which many compromised systems are made to attack a single target, in order to swamp server resources and block legitimate users.

Normally many persons, using many bots, attack high-profile Web glossary("server","servers") like banks or credit-card payment gateways. DDoS concerns computer networks and CPU resource management.

In a typical DDoS attack, the assailant begins by exploiting a vulnerability in one computer system and making it the DDoS master. The attack master, also known as the botmaster, identifies and infects other vulnerable systems with malware. Eventually, the assailant instructs the controlled machines to launch an attack against a specified target.

There are two types of DDoS attacks: a network-centric attack (which overloads a service by using up bandwidth) and an application-layer attack (which overloads a service or database with application calls). The overflow of data to the target causes saturation in the target machine so that it cannot respond or responds very slowly to legitimate traffic (hence the name "denial of service"). The infected computers' owners normally don't know that their computers have been compromised, and they also suffer loss of service.

A computer under an intruder's control is called a zombie or bot. A network of co-infected computers is known as a botnet or a zombie army. Both Kaspersky Labs and Symantec have identified botnets -- not spam, viruses, or worms -- as the biggest threat to Internet security.

The United States Computer Emergency Readiness Team (US-CERT) defines symptoms of denial-of-service attacks to include:

  • Unusually slow network performance (opening files or accessing websites)
  • Unavailability of a particular website
  • Inability to access any website
  • Dramatic increase in the number of spam emails received—(this type of DoS attack is considered an email bomb)
  • Disconnection of a wireless or wired internet connection
  • Longterm denial of access to the Web or any internet services

See also

  • interwiki("wikipedia", "Denial-of-service_attack", "Denial-of-service attack") on Wikipedia

Term: DMZ

  • Glossary
  • Networking
  • Security

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

It exposes only certain defined endpoints, while denying access to the internal network from Glossary('node/networking', 'external nodes').

See also

  • Interwiki("wikipedia", "DMZ (computing)", "DMZ") on Wikipedia

Term: DNS

  • DNS
  • Domain Name System
  • Glossary
  • Infrastructure

DNS (Domain Name System) is a hierarchical and decentralized naming system for Internet connected resources. DNS maintains a list of Glossary("domain name","domain names") along with the resources, such as IP addresses, that are associated with them.

The most prominent function of DNS is the translation of human-friendly domain names (such as mozilla.org) to a numeric Glossary("IP address") (such as 151.106.5.172); this process of mapping a domain name to the appropriate IP address is known as a DNS lookup. By contrast, a reverse DNS lookup (rDNS) is used to determine the domain name associated with an IP address.

See also

Term: Doctype

  • Browser
  • CodingScripting
  • DOCTYPE
  • Glossary
  • HTML
  • Intro

In Glossary("HTML"), the doctype is the required "<!DOCTYPE html>" preamble found at the top of all documents. Its sole purpose is to prevent a Glossary("browser") from switching into so-called "quirks mode" when rendering a document; that is, the "<!DOCTYPE html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.

See also

Term: Document directive

  • CSP
  • Directive
  • Document
  • Glossary
  • HTTP
  • Security

Glossary("CSP") document directives are used in a HTTPHeader("Content-Security-Policy") header and govern the properties of a document or worker environment to which a policy applies.

Document directives don't fall back to the CSP("default-src") directive.

See Document directives for a complete list.

See also

  • Glossary

    • Glossary("CSP")
    • Glossary("Reporting directive")
    • Glossary("Fetch directive")
    • Glossary("Navigation directive")

  • Reference

    • https://www.w3.org/TR/CSP/#directives-document
    • HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")
    • HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")
    • HTTPHeader("Content-Security-Policy/require-sri-for", "require-sri-for") _Deprecated_Inline}}
    • HTTPHeader("Content-Security-Policy")

Term: document environment

  • CodingScripting
  • Glossary
  • JavaScript

When the JavaScript global environment is a window or an iframe, it is called a document environment. A global environment is an environment that doesn't have an outer environment.

See also

Term: Domain name

  • Domain Name
  • Glossary
  • Protocol
  • WebMechanics

A domain name is a website's address on the Glossary("Internet"). Domain names are used in Glossary("URL","URLs") to identify to which server belong a specific webpage. The domain name consists of a hierarchical sequence of names (labels) separated by periods (dots) and ending with an glossary("TLD","extension").

See also

Term: Domain sharding

  • DNS
  • Glossary
  • HTTP
  • Reference
  • Web Performance
  • latency

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

Term: Domain

  • Browser
  • Domain
  • Glossary
  • Infrastructure
  • Networking

A domain is an authority within the internet that controls its own resources. Its "domain name" is a way to address this authority as part of the hierarchy in a Glossary("URL") - usually the most memorable part of it, for instance a brand name.

A fully qualified domain name (FQDN) contains all necessary parts to look up this authority by name unambiguously using the Glossary("DNS") system of the internet.

For example, in "developer.mozilla.org":

  1. "org" is called a interwiki("wikipedia", "Top-level_domain", "top-level domain"). They are registered as an internet standard by the interwiki("wikipedia", "Internet_Assigned_Numbers_Authority", "IANA") . Here, "org" means "organization" which is defined in a top-level domain registry.
  2. "mozilla" is the domain. If you like to own a domain you have to register it with one of the many interwiki("wikipedia", "Domain_name_registrar", "registrars") who are allowed to do so with a top-level domain registry.
  3. "developer" is a "sub-domain", something you as the owner of a domain may define yourself. Many owners choose to have a subdomain "www" to point to their Glossary("World_Wide_Web") resource, but that's not required (and has even fallen somewhat out of favor).

See also

  • interwiki("wikipedia", "Domain_name", "Domain Name") on Wikipedia

Term: Dominator

  • CodingScripting
  • Glossary

In graph theory, node A dominates node B if every path from the root node to B passes through A.

This concept is important for Glossary("garbage collection") because it means that B is only reachable through A. So if the garbage collector found A to be unreachable and eligible for reclaiming, than B would also be unreachable and eligible for reclaiming. So objects that A dominates contribute to the retained size of A: that is, the total amount of memory that could be freed if A itself were freed.

See also

Term: DOM (Document Object Model)

  • CodingScripting
  • DOM
  • Glossary

The DOM (Document Object Model) is an glossary("API") that represents and interacts with any glossary("HTML") or glossary("XML") document. The DOM is a document model loaded in the glossary("browser") and representing the document as a node tree, where each node represents part of the document (e.g. an Glossary("element"), text string, or comment).

The DOM is one of the most-used Glossary("API")s on the glossary("World Wide Web","Web") because it allows code running in a browser to access and interact with every node in the document. Nodes can be created, moved and changed. Event listeners can be added to nodes and triggered on occurrence of a given event.

DOM was not originally specified—it came about when browsers began implementing Glossary("JavaScript"). This legacy DOM is sometimes called DOM 0. Today, the WHATWG maintains the DOM Living Standard.

See also

Term: DoS attack

  • Glossary
  • Security

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

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

  • interwiki("wikipedia", "Denial-of-service_attack", "Denial-of-service attack") on Wikipedia
  • Denial-of-service on OWASP
  • Glossary("Distributed Denial of Service","DDoS")

Term: DTLS (Datagram Transport Layer Security)

  • DTLS
  • Intro

Datagram Transport Layer Security (DTLS) is a protocol used to secure datagram-based communications. It's based on the stream-focused Transport Layer Security (Glossary("TLS")), providing a similar level of security. As a datagram protocol, DTLS doesn't guarantee the order of message delivery, or even that messages will be delivered at all. However, DTLS gains the benefits of datagram protocols, too; in particular, the lower overhead and reduced latency.

These features are especially useful for one of the most common areas in which DTLS comes into play: Glossary("WebRTC"). All of the WebRTC related protocols are required to encrypt their communications using DTLS; this includes Glossary("SCTP"), Glossary("RTP", "SRTP"), and Glossary("STUN").

See also

  • Interwiki("wikipedia", "Datagram Transport Layer Security") on Wikipedia

  • Specifications:

  • Related specification

    • RFC(5763, "Framework for Establishing a Secure Real-time Transport Protocol (SRTP) Security Context Using DTLS")
    • RFC(5764, "DTLS Extension to Establish Keys for the Secure Real-time Transport Protocol (SRTP)")
    • RFC(6083, "DTLS for Stream Control Transmission Protocol (SCTP)")
    • RFC(8261, "Datagram Transport Layer Security (DTLS) Encapsulation of SCTP Packets")
    • RFC(7350, "Datagram Transport Layer Security (DTLS) as Transport for Session Traversal Utilities for NAT (STUN)")
    • RFC(7925, "TLS / DTLS Profiles for the Internet of Things")

Term: DTMF (Dual-Tone Multi-Frequency signaling)

  • DTMF
  • Glossary
  • WebRTC

Dual-Tone Multi-Frequency (DTMF) signaling is a system by which audible tones are used to represent buttons being pressed on a keypad. Frequently referred to in the United States as "touch tone" (after the Touch-Tone trademark used when the transition from pulse dialing to DTMF began), DTMF makes it possible to signal the digits 0-9 as well as the letters "A" through "D" and the symbols "#" and "*". Few telephone keypads include the letters, which are typically used for control signaling by the telephone network.

Computers may make use of DTMF when dialing a modem, or when sending commands to a menu system for teleconferencing or other purposes.

See also

  • interwiki("wikipedia", "Dual-tone multi-frequency signaling") on Wikipedia
  • interwiki("wikipedia", "Pulse dialing") on Wikipedia

Term: Dynamic typing

  • CodingScripting
  • Glossary
  • ProgrammingLanguage

Dynamically-typed languages are those (like glossary("JavaScript")) where the interpreter assigns glossary("variable","variables") a glossary("type") at runtime based on the variable's glossary("value") at the time.

See also

Term: ECMA

  • Glossary
  • Stub
  • WebMechanics

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. Glossary("ECMAScript")) which is the core specification for the Glossary("JavaScript") language.

See also

Term: ECMAScript

  • Glossary
  • WebMechanics

ECMAScript is a scripting language specification on which glossary("JavaScript") is based. Ecma International is in charge of standardizing ECMAScript.

See also

  • Interwiki("wikipedia", "ECMAScript") on Wikipedia
  • ECMAScript

Term: Effective connection type

  • Glossary
  • Navigator
  • Network Information API
  • NetworkInformation
  • Performance
  • Reference
  • Web Performance
  • connect
  • effective connection type
  • effectiveType

Effective connection type (ECT) refers to the measured network performance, returning a cellular connection type, like 3G, even if the actual connection is tethered broadband or WiFi, based on the time between the browser requesting a page and effective type of the connection.

The values of 'slow-2g', '2g', '3g', and '4g' are determined using observed round-trip times and downlink values.

ECT Minimum RTT Maximum downlink Explanation
slow-2g 2000ms 50 Kbps The network is suited for small transfers only such as text-only pages.
2g 1400ms 70 Kbps The network is suited for transfers of small images.
3g 270ms 700 Kbps The network is suited for transfers of large assets such as high resolution images, audio, and SD video.
4g 0ms ∞ The network is suited for HD video, real-time video, etc.

effectiveType is a property of the Network Information API, exposed to JavaScript via the navigator.connection object. To see your effective connection type, open the console of the developer tools of a supporting browser and enter the following:

//
navigator.connection.effectiveType;

See also

  • Network Information API
  • domxref('NetworkInformation')
  • domxref('NetworkInformation.effectiveType')
  • HTTPHeader("ECT")

Term: Element

  • CodingScripting
  • Glossary
  • HTML

An element is a part of a webpage. In glossary("XML") and glossary("HTML"), an element may contain a data item or a chunk of text or an image, or perhaps nothing. A typical element includes an opening tag with some glossary("attribute", "attributes"), enclosed text content, and a closing tag.

Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

See also

Term: Empty element

  • CodingScripting
  • Glossary
  • Intermediate

An empty element is an Glossary("element") from HTML, SVG, or MathML that cannot have any child nodes (i.e., nested elements or text nodes).

The HTML, SVG, and MathML specifications define very precisely what each element can contain. Many combinations have no semantic meaning, for example an HTMLElement("audio") element nested inside an HTMLElement("hr") element.

In HTML, using a closing tag on an empty element is usually invalid. For example, <input type="text"> </input> is invalid HTML.

The empty elements in HTML are as follows:

  • HTMLElement("area")
  • HTMLElement("base")
  • HTMLElement("br")
  • HTMLElement("col")
  • HTMLElement("embed")
  • HTMLElement("hr")
  • HTMLElement("img")
  • HTMLElement("input")
  • HTMLElement("keygen")(HTML 5.2 Draft removed)
  • HTMLElement("link")
  • HTMLElement("meta")
  • HTMLElement("param")
  • HTMLElement("source")
  • HTMLElement("track")
  • HTMLElement("wbr")

Term: Encapsulation

  • CodingScripting
  • Glossary

Encapsulation is the packing of data and glossary("function","functions") into one component (for example, a glossary("class")) and then controlling access to that component to make a "blackbox" out of the glossary("object"). Because of this, a user of that class only needs to know its interface (that is, the data and functions exposed outside the class), not the hidden implementation.

See also

Term: Encryption

  • Cryptography
  • Glossary
  • Privacy
  • Security

In glossary("cryptography"), encryption is the conversion of glossary("plaintext") into a coded text or glossary("ciphertext"). A ciphertext is intended to be unreadable by unauthorized readers.

Encryption is a cryptographic primitive: it transforms a plaintext message into a ciphertext using a cryptographic algorithm called a glossary("cipher"). Encryption in modern ciphers is performed using a specific algorithm and a secret, called the glossary("key"). Since the algorithm is often public, the key must stay secret if the encryption stays secure.

How encryption works.

Without knowing the secret, the reverse operation, glossary("decryption"), is mathematically hard to perform. How hard depends on the security of the cryptographic algorithm chosen and evolves with the progress of glossary("cryptanalysis").

Term: Endianness

  • Coding
  • CodingScripting
  • Glossary

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

See also

  • jsxref("ArrayBuffer")
  • jsxref("DataView")
  • Typed Arrays
  • Interwiki("wikipedia", "Endianness") (Wikipedia)
  • Glossary("Data structure") (Glossary)

Term: Engine

  • CodingScripting
  • Glossary
  • NeedsContent

The glossary("JavaScript") engine is an interpreter that parses and executes a JavaScript program.

See also

  • Interwiki("wikipedia", "JavaScript engine") on Wikipedia

Term: Entity header

  • Glossary
  • WebMechanics

Warning: The current HTTP/1.1 specification no longer refers to entities, entity headers or entity-body. Some of the fields are now referred to as glossary("Representation header") fields.

An entity header is an glossary("HTTP_header", "HTTP header") that describes the payload of an HTTP message (i.e. metadata about the message body). Entity headers include: HTTPHeader("Content-Length"), HTTPHeader("Content-Language"), HTTPHeader("Content-Encoding"), HTTPHeader("Content-Type"), HTTPHeader("Expires"), etc. Entity headers may be present in both HTTP request and response messages.

In the following example, HTTPHeader("Content-Length") is an entity header, while HTTPHeader("Host") and HTTPHeader("User-Agent") are requests headers:

POST /myform.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
Content-Length: 128

See also

  • Glossary("Representation header")

Term: Entity

  • CodingScripting
  • Composing
  • Glossary
  • HTML

An glossary("HTML") entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard.

Note: Many characters have memorable entities. For example, the entity for the copyright symbol (©) is &copy;. For less memorable characters, such as &#8212; or &#x2014;, you can use a reference chart or decoder tool.

Reserved characters

Some special characters are reserved for use in HTML, meaning that your browser will parse them as HTML code. For example, if you use the less-than (<) sign, the browser interprets any text that follows as a Glossary('tag').

To display these characters as text, replace them with their corresponding character entities, as shown in the following table.

Character Entity Note
& &amp; Interpreted as the beginning of an entity or character reference.
< &lt; Interpreted as the beginning of a Glossary('tag')
> &gt; Interpreted as the ending of a Glossary('tag')
" &quot; Interpreted as the beginning and end of an Glossary('attribute')'s value.

See also

Term: Event

  • CodingScripting
  • Glossary

Events are assets generated by DOM elements, which can be manipulated by a Javascript code.

See also

Term: Exception

  • Beginner
  • CodingScripting
  • Glossary

An exception is a condition that interrupts normal code execution. In JavaScript glossary("syntax error", "syntax errors") are a very common source of exceptions.

See also

  • Interwiki("wikipedia", "Exception handling") on Wikipedia

Term: EXIF

  • EXIF
  • Image

The Exchangeable Image File Format (EXIF) is a standard that specifies how metadata about a multimedia file can be embedded within the file. For example, an image might contain EXIF data describing the: pixel width, height, and density, shutter speed, aperture, ISO settings, capture date, etc.

See also

Term: Expando

  • CodingScripting
  • JavaScript
  • Reference
  • expando

Expando properties are properties added to glossary("DOM") nodes with glossary("JavaScript"), where those properties are not part of the glossary("object","object's") DOM specification:

//
window.document.foo = 5; // foo is an expando

The term may also be applied to properties added to objects without respecting the object's original intent, such as non-numeric named properties added to an glossary("Array").

Term: Fallback alignment

  • CSS
  • Glossary
  • alignment

In CSS Box Alignment, a fallback alignment is specified in order to deal with cases where the requested alignment cannot be fulfilled. For example, if you specify justify-content: space-between there must be more than one alignment subject. If there is not, the fallback alignment is used. This is specified per alignment method, as detailed below.

  • First baseline
    • : start
  • Last baseline
    • : safe end
  • Baseline
    • : start
  • Space-between
    • : flex-start (start)
  • Space-around
    • : center
  • Space-evenly
    • : center
  • Stretch
    • : flex-start (start)

See also

Term: Falsy

  • CodingScripting
  • Glossary
  • JavaScript

A falsy (sometimes written falsey) value is a value that is considered false when encountered in a Glossary("Boolean") context.

Glossary("JavaScript") uses Glossary("Type_Conversion", "type conversion") to coerce any value to a Boolean in contexts that require it, such as Glossary("Conditional", "conditionals") and Glossary("Loop", "loops").

The following table provides a complete list of JavaScript falsy values:

Value Description
false The keyword false.
0 The jsxref("Number") zero (so, also 0.0, etc., and 0x0).
-0 The jsxref("Number") negative zero (so, also -0.0, etc., and -0x0).
0n The jsxref("BigInt") zero (so, also 0x0n). Note that there is no jsxref("BigInt") negative zero — the negation of 0n is 0n.
"", '', `` Empty string value.
Glossary("null") null — the absence of any value.
Glossary("undefined") undefined — the primitive value.
Glossary("NaN") NaN — not a number.
domxref("document.all") Objects are falsy if and only if they have the [[IsHTMLDDA]] internal slot.That slot only exists in domxref("document.all") and cannot be set using JavaScript.

Examples

Examples of falsy values in JavaScript (which are coerced to false in Boolean contexts, and thus bypass the if block):

//
if (false)
if (null)
if (undefined)
if (0)
if (-0)
if (0n)
if (NaN)
if ("")

The logical AND operator, &&

If the first object is falsy, it returns that object

//
false && 'dog';
// ↪ false

0 && 'dog';
// ↪ 0

See also

  • Glossary("Truthy")
  • Glossary("Type_coercion", "Coercion")
  • Glossary("Boolean")

Term: Favicon

  • Glossary
  • Intro
  • favicon
  • user agent

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 Glossary("https","HTTPS").

Usually, a favicon is 16 x 16 pixels in size and stored in the Glossary("GIF"), Glossary("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

Term: Fetch directive

  • CSP
  • HTTP
  • Security

Glossary("CSP") fetch directives are used in a HTTPHeader("Content-Security-Policy") header and control locations from which certain resource types may be loaded. For instance, CSP("script-src") allows developers to allow trusted sources of script to execute on a page, while CSP("font-src") controls the sources of web fonts.

All fetch directives fall back to CSP("default-src"). That means, if a fetch directive is absent in the CSP header, the user agent will look for the default-src directive.

See Fetch directives for a complete list.

See also

  • Glossary

    • Glossary("CSP")
    • Glossary("Reporting directive")
    • Glossary("Document directive")
    • Glossary("Navigation directive")

  • Reference

    • https://www.w3.org/TR/CSP/#directives-fetch
    • HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")
    • HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")
    • HTTPHeader("Content-Security-Policy/require-sri-for", "require-sri-for") _Deprecated_Inline}}
    • HTTPHeader("Content-Security-Policy")

Term: Fetch metadata request header

  • Fetch Metadata Request Headers
  • Glossary

A fetch metadata request header is an Glossary("Request header", "HTTP request header") that provides additional information about the context from which the request originated. This allows the server to make decisions about whether a request should be allowed based on where the request came from and how the resource will be used.

With this information a server can implement a Glossary("resource isolation policy"), allowing external sites to request only those resources that are intended for sharing, and that are used appropriately. This approach can help mitigate common cross-site web vulnerabilities such as Glossary("CSRF"), Cross-site Script Inclusion('XSSI'), timing attacks, and cross-origin information leaks.

These headers are prefixed with Sec-, and hence have Glossary("Forbidden header name", "forbidden header names"). As such, they cannot be modified from JavaScript.

The fetch metadata request headers are:

  • HTTPHeader("Sec-Fetch-Site")
  • HTTPHeader("Sec-Fetch-Mode")
  • HTTPHeader("Sec-Fetch-User")
  • HTTPHeader("Sec-Fetch-Dest")

See also

Term: Firefox OS

  • B2G
  • Boot2Gecko
  • Firefox OS
  • Glossary
  • Infrastructure
  • Intro

Firefox OS is a discontinued open source mobile operating system developed by Mozilla. See interwiki("wikipedia", "Firefox OS") for more details.

Term: firewall

  • DDoS
  • Firewall
  • Glossary
  • Security
  • computer network

A firewall is a system that filters network traffic. It can either let it pass or block it, according to some specified rules. For example, it can block incoming connections aimed at a certain port or outgoing connections to a certain IP address.

Firewalls can be as simple as a single piece of software, or more complex, like a dedicated machine whose only function is to act as a firewall.

See also

  • Interwiki("wikipedia", "Firewall (computing)") on Wikipedia

Term: First-class Function

  • CodingScripting
  • Glossary
  • JavaScript

A programming language is said to have First-class functions when functions in that language are treated like any other variable. For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable.

Example | Assign a function to a variable

JavaScript

//
const foo = function () {
    console.log('foobar');
};
foo(); // Invoke it using the variable
// foobar

We assigned an Anonymous Function in a glossary("Variable"), then we used that variable to invoke the function by adding parentheses () at the end.

Note: Even if your function was named, you can use the variable name to invoke it. Naming it will be helpful when debugging your code. But it won't affect the way we invoke it.

Example | Pass a function as an Argument

JavaScript

//

function sayHello() {
    return 'Hello, ';
}
function greeting(helloMessage, name) {
    console.log(helloMessage() + name);
}
// Pass `sayHello` as an argument to `greeting` function
greeting(sayHello, 'JavaScript!');
// Hello, JavaScript!

We are passing our sayHello() function as an argument to the greeting() function, this explains how we are treating the function as a value.

Note: The function that we pass as an argument to another function, is called a glossary("Callback function"). sayHello is a Callback function.

Example | Return a function

JavaScript

//

function sayHello() {
    return function () {
        console.log('Hello!');
    };
}

In this example; We need to return a function from another function - We can return a function because we treated function in JavaScript as a value.

Note: A function that returns a function is called a Higher-Order Function.

Back to our example; Now, we need to invoke sayHello function and its returned Anonymous Function. To do so, we have two ways:

1- Using a variable

//
const sayHello = function () {
    return function () {
        console.log('Hello!');
    };
};
const myFunc = sayHello();
myFunc();
// Hello!

This way, it returns the Hello! message.

Note: You have to use another variable. If you invoked sayHello directly, it would return the function itself without invoking its returned function.

2- Using double parentheses

//

function sayHello() {
    return function () {
        console.log('Hello!');
    };
}
sayHello()();
// Hello!

We are using double parentheses ()() to invoke the returned function as well.

See also

  • Interwiki("wikipedia", "First-class_function", "First-class functions") on Wikipedia

  • MDN Web Docs Glossary

    • glossary("Callback function")
    • glossary("Function")
    • glossary("Variable")

Term: First contentful paint

  • Glossary
  • Performance
  • Reference
  • Web Performance

First Contentful Paint (FCP) is when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. The question "Is it happening?" is "yes" when the first contentful paint completes.

The First Contentful Paint time stamp is when the browser first rendered any text, image (including background images), non-white canvas or SVG. This excludes any content of iframes, but includes text with pending webfonts. This is the first time users could start consuming page content.

See also

Term: First CPU idle

  • Glossary
  • Lighthouse
  • Performance
  • Web Performance

First CPU Idle measures when a page is minimally interactive, or when the window is quiet enough to handle user input. It is a non-standard Google web performance metric. Generally, it occurs when most, but not necessarily all visible UI elements are interactive, and the user interface responds, on average, to most user input within 50ms. It is also known as First interactive.

Term: First input delay

  • Glossary
  • Reference
  • Web Performance

First input delay (FID) measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.

It is the length of time, in milliseconds, between the first user interaction on a web page and the browser's response to that interaction. Scrolling and zooming are not included in this metric.

The time between when content is painted to the page and when all the functionality becomes responsive to human interaction often varies based on the size and complexity of the JavaScript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile devices). The longer the delay, the worse the user experience. Reducing site initialization time and eliminating long tasks can help eliminate first input delays.

See also

Term: First interactive

  • Glossary
  • Lighthouse
  • Web Performance

_draft}}

First Interactive, also known as first CPU idle, is a non-standard web performance metric that measures when the user's window is quiet enough to handle user input, or what is termed as minimally interactive.

Minimally interactive is defined as when some, but not necessarily all, UI elements on the page have loaded and are interactive, and, on average, respond to user input in a reasonable amount of time.

More information

First interactive is a variation of Time to Interactive, which is split into First Interactive and Consistently Interactive. These metrics have been proposed by the Web Incubator Community Group and are already being used in various tools. This metric has been called First CPU Idle since Lighthouse 3.0

Term: First Meaningful Paint

  • Glossary
  • Reference
  • Web Performance

First Meaningful Paint (FMP) is the paint after which the biggest above-the-fold layout change has happened and web fonts have loaded. It is when the answer to "Is it useful?" becomes "yes", upon first meaningful paint completion.

See also

Term: First paint

  • Beginner
  • Glossary
  • Performance
  • Web Performance

First Paint, part of the Paint Timing API, is the time between navigation and when the browser renders the first pixels to the screen, rendering anything that is visually different from what was on the screen prior to navigation. It answers the question "Is it happening?"

See also

Term: Flex Container

  • CSS
  • Glossary
  • flex container
  • flexbox

A glossary("flexbox") layout is defined using the flex or inline-flex values of the display property on the parent item. This element then becomes a flex container, and each one of its children becomes a glossary("flex item").

A value of flex causes the element to become a block level flex container, and inline-flex an inline level flex container. These values create a flex formatting context for the element, which is similar to a block formatting context in that floats will not intrude into the container, and the margins on the container will not collapse with those of the items.

See also

Property reference

  • cssxref("align-content")
  • cssxref("align-items")
  • cssxref("flex")
  • cssxref("flex-direction")
  • cssxref("flex-flow")
  • cssxref("flex-wrap")
  • cssxref("justify-content")

Further reading

Term: Flex Item

  • CSS
  • Glossary
  • flex item
  • flexbox

The direct children of a glossary("Flex Container") (elements with display: flex or display: inline-flex set on them) become flex items.

Continuous runs of text inside flex containers will also become flex items.

See also

Property reference

  • cssxref("align-self")
  • cssxref("flex-basis")
  • cssxref("flex-grow")
  • cssxref("flex-shrink")
  • cssxref("order")

Further reading

Term: Flexbox

  • CSS
  • Glossary
  • Intro
  • flexbox

Flexbox is the commonly-used name for the CSS Flexible Box Layout Module, a layout model for displaying items in a single dimension — as a row or as a column.

In the specification, Flexbox is described as a layout model for user interface design. The key feature of Flexbox is the fact that items in a flex layout can grow and shrink. Space can be assigned to the items themselves, or distributed between or around the items.

Flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items.

See also

Property reference

  • cssxref("align-content")
  • cssxref("align-items")
  • cssxref("align-self")
  • cssxref("flex")
  • cssxref("flex-basis")
  • cssxref("flex-direction")
  • cssxref("flex-flow")
  • cssxref("flex-grow")
  • cssxref("flex-shrink")
  • cssxref("flex-wrap")
  • cssxref("justify-content")
  • cssxref("order")

Further reading

Term: Flex

  • CSS
  • Flex
  • Glossary
  • flexbox

flex is a new value added to the CSS cssxref("display") property. Along with inline-flex it causes the element that it applies to in order to become a glossary("flex container"), and the element's children to each become a glossary("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

  • cssxref("align-content")
  • cssxref("align-items")
  • cssxref("align-self")
  • cssxref("flex")
  • cssxref("flex-basis")
  • cssxref("flex-direction")
  • cssxref("flex-flow")
  • cssxref("flex-grow")
  • cssxref("flex-shrink")
  • cssxref("flex-wrap")
  • cssxref("justify-content")
  • cssxref("order")

Further reading

Term: Forbidden header name

  • Fetch
  • Glossary
  • HTTP
  • Headers
  • forbidden

A forbidden header name is the name of any HTTP header that cannot be modified programmatically; specifically, an HTTP request header name (in contrast with a Glossary("Forbidden response header name")).

Modifying such headers is forbidden because the user agent retains full control over them. Names starting with Sec- are reserved for creating new headers safe from glossary("API","APIs") using Fetch that grant developers control over headers, such as domxref("XMLHttpRequest").

Forbidden header names start with Proxy- or Sec-, or are one of the following names:

  • Accept-Charset
  • Accept-Encoding
  • Access-Control-Request-Headers
  • Access-Control-Request-Method
  • Connection
  • Content-Length
  • Cookie
  • Cookie2
  • Date
  • DNT
  • Expect
  • Feature-Policy
  • Host
  • Keep-Alive
  • Origin
  • Proxy-
  • Sec-
  • Referer
  • TE
  • Trailer
  • Transfer-Encoding
  • Upgrade
  • Via

Note: The User-Agent header is no longer forbidden, as per spec — see forbidden header name list (this was implemented in Firefox 43) — it can now be set in a Fetch Headers object, or via XHR setRequestHeader(). However, Chrome will silently drop the header from Fetch requests (see Chromium bug 571722).

See also

Glossary("Forbidden response header name") (Glossary)

Term: Forbidden response header name

  • Glossary
  • HTTP
  • Response
  • forbidden

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

See also

Term: Fork

  • Fork
  • Glossary
  • Tools
  • git

A fork is a copy of an existing software project at some point to add someone's own modifications to the project.

Basically, if the license of the original software allows, you can copy the code to develop your own version of it, with your own additions, which will be a "fork".

Forks are often seen in free and open source software development. This is now a more popular term thanks to contribution model using Git (and/or the GitHub platform).

See also

Term: frame rate (FPS)

  • Animation
  • Glossary
  • Web Performance
  • requestAnimationFrame

A frame rate is the speed at which the browser is able to recalculate, layout and paint content to the display. The frames per second, or fps, is how many frames can be repainted in one second. The goal frame rate for in web site computer graphics is 60fps.

Movies generally have a frame rate of 24 fps. They are able to have fewer frames per second because the illusion of life is created with motion blurs. When moving on a computer screen there are no motion blurs (unless you are animating an image sprite with motion blurs).

See also

  • Interwiki("wikipedia", "Frame rate") (Wikipedia)
  • glossary("FPS") (Glossary)

Term: Fragmentainer

  • CSS
  • CSS Fragmentation Specification
  • Glossary
  • fragmentainer

A fragmentainer is defined in the CSS Fragmentation Specification as follows:

A box—such as a page box, column box, or region—that contains a portion (or all) of a fragmented flow. Fragmentainers can be pre-defined, or generated as needed. When breakable content would overflow a fragmentainer in the block dimension, it breaks into the next container in its fragmentation context instead.

Fragmented contexts are found in CSS Paged Media, where the fragmentainer would be the box which defines a page. In Multiple-column Layout the fragmentainer is the column box created when columns are defined on a multicol container. In CSS Regions each Region is a fragmentainer.

Term: FTP

  • CodingScripting
  • FTP
  • Glossary
  • Protocol

FTP (File Transfer Protocol) is an insecure glossary("protocol") for transferring files from one glossary("host") to another over the Internet.

For many years it was the defacto standard way of transferring files, but as it is inherently insecure, it is no longer supported by many hosting accounts. Instead you should use SFTP (a secure, encrypted version of FTP) or another secure method for transferring files like Rsync over SSH.

See also

Term: FTU

  • FTU
  • Firefox OS
  • First time use
  • Gaia
  • Glossary
  • Infrastructure
  • Intro

FTU (First Time Use) is the app that loads when you run a newly-installed version of glossary("Gecko") on a glossary("Firefox OS") device.

You can use FTU to set many important options (e.g. timezone, WiFi details, default language, importing contacts), or take the "Phone Tour" to find out more about your device.

Term: Function

  • CodingScripting
  • Glossary
  • IIFE
  • Immediately Invoked Function Expressions (IIFE)
  • Intro
  • JavaScript

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

A function name is an Glossary("identifier") included as part of a function declaration or function expression. The function name's Glossary("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:

//
// When used as a function expression
(function () {});
// or using the ECMAScript 2015 arrow notation
() => {};

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:

//
// Function declaration
function foo() {}
// Named function expression
(function bar() {});
// or using the ECMAScript 2015 arrow notation
const foo = () => {};

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):

//

function addSquares(a, b) {
    function square(x) {
        return x * x;
    }
    return square(a) + square(b);
}
//Using ECMAScript 2015 arrow notation
const addSquares = (a, b) => {
    const square = (x) => x * x;
    return square(a) + square(b);
};

A recursive function is a function that calls itself. See Glossary("Recursion", "recursion").

//

function loop(x) {
    if (x >= 10) return;
    loop(x + 1);
}
//Using ECMAScript 2015 arrow notation
const loop = (x) => {
    if (x >= 10) return;
    loop(x + 1);
};

An Immediately Invoked Function Expressions (glossary("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.

//
// Declared functions can't be called immediately this way
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
/*
function foo() {
    console.log('Hello Foo');
}();
*/

// Function expressions, named or anonymous, can be called immediately
(function foo() {
    console.log('Hello Foo');
})();

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

(() => console.log('hello world'))();

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

See also

Term: Fuzz testing

  • Firefox
  • Fuzzing
  • Mozilla
  • QA
  • Security
  • 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, and we use fuzzing a lot at Mozilla.

Term: Garbage collection

  • CodingScripting
  • Glossary

Garbage collection is a term used in Glossary("computer programming") to describe the process of finding and deleting Glossary("object", "objects") which are no longer being Glossary("object reference", "referenced") by other objects.

In other words, garbage collection is the process of removing any objects which are not being used by any other objects. Often abbreviated "GC," garbage collection is a fundamental component of the memory management system used by Glossary("JavaScript").

See also

Term: Gecko

  • Firefox OS
  • Gecko
  • Glossary
  • Infrastructure
  • Intro
  • Mozilla

Gecko is the layout engine developed by the Mozilla Project and used in many apps/devices, including glossary("Mozilla Firefox","Firefox") and glossary("Firefox OS").

Web glossary("browser","browsers") need software called a layout engine to interpret glossary("HTML"), glossary("CSS"), glossary("JavaScript"), and embedded content (like images) and draw everything to your screen. Besides this, Gecko makes sure associated glossary("API","APIs") work well on every operating system Gecko supports, and that appropriate APIs are exposed only to relevant support targets. This means that Gecko includes, among other things, a networking stack, graphics stack, layout engine, a JavaScript virtual machine, and porting layers.

Since all Firefox OS apps are Web apps, Firefox OS uses Gecko as its app runtime as well.

See also

  • interwiki("wikipedia", "Gecko (software)", "Gecko") on Wikipedia

Term: General header

  • Glossary
  • WebMechanics

General header is an outdated term used to refer to an glossary('HTTP_header', 'HTTP header') that can be used in both request and response messages, but which doesn't apply to the content itself (a header that applied to the content was called an glossary("entity header")). Depending on the context they are used in, general headers might either be glossary("Response header", "response") or glossary("request header", "request headers") (e.g. HTTPheader("Cache-Control")).

Note: Current versions of the HTTP/1.1 specification do not specifically categorize headers as "general headers". These are now simply refered to as glossary("Response header", "response") or glossary("request header", "request headers") depending on context.

Term: GIF

  • Composing
  • Glossary

GIF (Graphics Interchange Format) is an image format that uses lossless compression and can be used for animations. A GIF uses up to 8 bits per pixel and a maximum of 256 colors from the 24-bit color space.

See also

  • Interwiki("wikipedia", "GIF") on Wikipedia

Term: Git

  • Collaborating
  • Glossary

Git is a free, open-source, distributed Source Code Management (Glossary("SCM", "SCM", 1)) system. It facilitates handling code bases with distributed development teams. What sets it apart from previous SCM systems is the ability to do common operations (branching, committing, etc.) on your local development machine, without having to change the master repository or even having write access to it.

See also

Term: Global object

  • CodingScripting
  • Glossary
  • NeedsContent

A global object is an glossary("object") that always exists in the glossary("global scope").

In JavaScript, there's always a global object defined. In a web browser, when scripts create global variables defined with the var keyword, they're created as members of the global object. (In Glossary("Node.js") this is not the case.) The global object's Glossary("interface") depends on the execution context in which the script is running. For example:

  • In a web browser, any code which the script doesn't specifically start up as a background task has a domxref("Window") as its global object. This is the vast majority of JavaScript code on the Web.
  • Code running in a domxref("Worker") has a domxref("WorkerGlobalScope") object as its global object.
  • Scripts running under Glossary("Node.js") have an object called global as their global object.

Note: Unlike jsxref("Statements/var", "var"), the statements jsxref("Statements/let", "let") and jsxref("Statements/const", "const") do not create properties of the global object.

window object in the Browser

The window object is the Global Object in the Browser. Any Global Variables or Functions can be accessed as properties of the window object.

Access Global Variables

//
var foo = 'foobar';
foo === window.foo; // Returns: true

After defining a Global Variable foo, we can access its value directly from the window object, by using the variable name foo as a property name of the Global Object window.foo.

Explanation:

The global variable foo was stored in the window object, like this:

//
foo: 'foobar';

Access Global Functions

//

function greeting() {
    console.log('Hi!');
}

window.greeting(); // It is the same as the normal invoking: greeting();

The example above explains how Global Functions are stored as properties in the window object. We created a Global Function called greeting, then invoked it using the window object.

Explanation:

The global function greeting was stored in the window object, like this:

//
greeting: function greeting() {
    console.log('Hi!');
}

See also

Term: Global scope

  • CodingScripting
  • Glossary
  • NeedsContent

In a programming environment, the global scope is the glossary("scope") that contains, and is visible in, all other scopes.

In client-side JavaScript, the global scope is generally the web page inside which all the code is being executed.

See also

Term: Global variable

  • CodingScripting
  • Glossary

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

In JavaScript it is a glossary("property") of the glossary("global object").

See also

  • Interwiki("wikipedia", "Global variable") on Wikipedia

Term: Glyph

  • Glossary
  • SVG
  • typography

A glyph is a term used in typography for the visual representation of one or more Glossary("character", "characters").

The fonts used by a website contain different sets of glyphs, which represent the characters of the font.

See also

Term: Google Chrome

  • Browser
  • Chrome canary
  • Chrome stable
  • Chromium
  • Glossary
  • WebMechanics
  • google chrome

Google Chrome is a free Web glossary("browser") developed by Google. It's based on the Chromium open source project. Some key differences are described on the Chromium wiki. Chrome supports its own layout called glossary("Blink"). Note that the iOS version of Chrome uses that platform's WebView, not Blink.

See also

  • interwiki("wikipedia", "Google Chrome", "Google Chrome") on Wikipedia

For Chrome Users

Use one of these links if you're an everyday user.

For Web Developers

If you want to try the latest Chrome features, install one of the pre-stable builds. Google pushes updates frequently and has designed the distributions to run side-by-side with the stable version. Visit the Chrome Releases Blog to learn what's new.

Term: GPL

  • GPL
  • Glossary
  • License
  • OpenPractices
  • Remixing
  • Sharing

The (GNU) GPL (General Public License) is a Glossary("copyleft") free software license published by the Free Software Foundation. Users of a GPL-licensed program are granted the freedom to use it, read the source code, modify it and redistribute the changes they made, provided they redistribute the program (modified or unmodified) under the same license.

See also

Term: GPU

  • Glossary
  • Graphics
  • Infrastructure

The GPU (Graphics Processing Unit) is a computer component similar to the CPU (Central Processing Unit). It specializes in the drawing of graphics (both 2D and 3D) on your monitor.

Term: Graceful degradation

  • Design
  • Glossary
  • graceful degradation

Graceful degradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers.

Glossary("Polyfill","Polyfills") can be used to build in missing features with JavaScript, but acceptable alternatives to features like styling and layout should be provided where possible, for example by using the CSS cascade, or HTML fallback behavior. Some good examples can be found in Handling common HTML and CSS problems.

It is a useful technique that allows Web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. Glossary("Progressive enhancement") is related but different — often seen as going in the opposite direction to graceful degradation. In reality both approaches are valid and can often complement one another.

See also

Term: Grid Areas

  • CSS
  • CSS Grids
  • Reference

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

Image showing a highlighted grid area

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

Example

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

* {
    box-sizing: border-box;
}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 100px;
    grid-template-areas:
        'a a b'
        'a a b';
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
}
<div class="wrapper">
    <div class="item1">Item</div>
    <div class="item2">Item</div>
</div>

_ EmbedLiveSample('Example', '300', '280') }}

See also

Property reference

  • cssxref("grid-template-columns")
  • cssxref("grid-template-rows")
  • cssxref("grid-auto-rows")
  • cssxref("grid-auto-columns")
  • cssxref("grid-template-areas")
  • cssxref("grid-area")

Further reading

Term: Grid Axis

  • CSS
  • CSS Grids

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.

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.

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

See also

Term: Grid Cell

  • CSS Grids

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 glossary("grid lines") and conceptually much like a table cell.

Diagram showing an individual cell on the grid.

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 glossary("grid tracks", "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;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
}
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>

_ EmbedLiveSample('Example', '300', '280') }}

See also

Property reference

  • cssxref("grid-template-columns")
  • cssxref("grid-template-rows")
  • cssxref("grid-auto-rows")
  • cssxref("grid-auto-columns")

Further reading

Term: Grid Column

  • CSS
  • CodingScripting

A grid column is a vertical track in a CSS Grid Layout, and is the space between two vertical grid lines. It is defined by the cssxref("grid-template-columns") property or in the shorthand cssxref("grid") or cssxref("grid-template") properties.

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

When working with alignment in CSS Grid Layout, the axis down which columns run is known as the block, or column, axis.

See also

Property reference

  • cssxref("grid-template-columns")
  • cssxref("grid-auto-columns")
  • cssxref("grid")
  • cssxref("grid-template")

Further reading

Term: Grid container

  • CSS
  • Glossary
  • grid

Using the value grid or inline-grid on an element turns it into a grid container using CSS Grid Layout, and any direct children of this element become grid items.

When an element becomes a grid container it establishes a grid formatting context. The direct children can now lay themselves out on any explicit grid defined using cssxref("grid-template-columns") and cssxref("grid-template-rows"), or on the implicit grid created when an item is placed outside of the explicit grid.

See also

Property reference

  • cssxref("grid-template-columns")
  • cssxref("grid-template-rows")
  • cssxref("grid-auto-columns")
  • cssxref("grid-auto-rows")
  • cssxref("grid")
  • cssxref("grid-template")

Further reading

Term: Grid Lines

  • CSS Grids

Grid lines are created when you define glossary("Grid tracks", "tracks") in the explicit grid using CSS Grid Layout.

Example

In the following example there is a grid with three column tracks and two row tracks. This gives us 4 column lines and 3 row lines.

* {
    box-sizing: border-box;
}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 100px;
}

_ EmbedLiveSample('Example', '500', '250') }}

Lines can be addressed using their line number. In a left-to-right language such as English, column line 1 will be on the left of the grid, row line 1 on the top. Lines numbers respect the writing mode of the document and so in a right-to-left language for example, column line 1 will be on the right of the grid. The image below shows the line numbers of the grid, assuming the language is left-to-right.

Diagram showing the grid with lines numbered.

Lines are also created in the implicit grid when implicit tracks are created to hold content positioned outside of the explicit grid, however these lines cannot be addressed by a number.

Placing items onto the grid by line number

Having created a grid, you can place items onto the grid by line number. In the following example the item is positioned from column line 1 to column line 3, and from row line 1 to row line 3.

* {
    box-sizing: border-box;
}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
<div class="wrapper">
    <div class="item">Item</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 100px;
}
.item {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}

_ EmbedLiveSample('Placing_items_onto_the_grid_by_line_number', '500', '250') }}

Naming lines

The lines created in the explicit grid can be named, by adding the name in square brackets before or after the track sizing information. When placing an item, you can then use these names instead of the line number, as demonstrated below.

* {
    box-sizing: border-box;
}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
<div class="wrapper">
    <div class="item">Item</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
    grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
    grid-column-start: col1-start;
    grid-column-end: col3-start;
    grid-row-start: row1-start;
    grid-row-end: rows-end;
}

_ EmbedLiveSample('Naming_lines', '500', '250') }}

See also

Property reference

  • cssxref("grid-template-columns")
  • cssxref("grid-template-rows")
  • cssxref("grid-column-start")
  • cssxref("grid-column-end")
  • cssxref("grid-column")
  • cssxref("grid-row-start")
  • cssxref("grid-row-end")
  • cssxref("grid-row")

Further reading

Term: Grid Row

  • CSS Grids

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 cssxref("grid-template-rows") property or in the shorthand cssxref("grid") or cssxref("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 cssxref("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

  • cssxref("grid-template-rows")
  • cssxref("grid-auto-rows")
  • cssxref("grid")
  • cssxref("grid-template")

Further reading

Term: Grid Tracks

  • CSS Grids

A grid track is the space between two adjacent glossary("grid lines"). They are defined in the explicit grid by using the cssxref("grid-template-columns") and cssxref("grid-template-rows") properties or the shorthand cssxref("grid") or cssxref("grid-template") properties. Tracks are also created in the implicit grid by positioning a grid item outside of the tracks created in the explicit grid.

The image below shows the first row track on a grid.

Diagram showing a grid track.

Track sizing in the explicit grid

When defining grid tracks using cssxref("grid-template-columns") and cssxref("grid-template-rows") you may use any length unit, and also the flex unit, fr which indicates a portion of the available space in the grid container.

Example

The example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. Once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. One part is given to column 2, 3 parts to column 3.

* {
    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;
}
.wrapper {
    display: grid;
    grid-template-columns: 200px 1fr 3fr;
}
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>

_ EmbedLiveSample('Example', '500', '230') }}

Track sizing in the implicit grid

Tracks created in the implicit grid are auto-sized by default, however you can define a size for these tracks using the cssxref("grid-auto-rows") and cssxref("grid-auto-columns") properties.

See also

Term: Grid

  • CSS
  • CSS Grid
  • Glossary

A CSS grid is defined using the grid value of the cssxref("display") property; you can define columns and rows on your grid using the cssxref("grid-template-rows") and cssxref("grid-template-columns") properties.

The grid that you define using these properties is described as an explicit grid.

If you place content outside of this explicit grid, or if you are relying on auto-placement and the grid algorithm needs to create additional row or column glossary("grid tracks", "tracks") to hold glossary("grid item", "grid items"), then extra tracks will be created in the implicit grid. The implicit grid is the grid created automatically due to content being added outside of the tracks defined.

In the example below I have created an explicit grid of three columns and two rows. The third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks.

Example

* {
    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;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
}
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
    <div>Seven</div>
    <div>Eight</div>
</div>

_ EmbedLiveSample('Example', '500', '330') }}

See also

  • Basic concepts of grid layout

  • Property reference:

    • cssxref("grid-template-columns")
    • cssxref("grid-template-rows")
    • cssxref("grid")
    • cssxref("grid-template")

Term: Guard

  • API
  • CodingScripting
  • Glossary
  • guard

Guard is a feature of domxref("Headers") objects (as defined in the domxref("Fetch_API","Fetch spec"), which affects whether methods such as domxref("Headers.set","set()") and domxref("Headers.append","append()") can change the header's contents. For example, immutable guard means that headers can't be changed. For more information, read Fetch basic concepts: guard.

Term: Gutters

  • CSS Grids

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

Example

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

* {
    box-sizing: border-box;
}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #fff8f8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1.2fr);
    grid-auto-rows: 45%;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
<div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>

_ EmbedLiveSample('Example', '300', '280') }}

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

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

See also

Property reference

  • cssxref("column-gap")
  • cssxref("row-gap")
  • cssxref("gap")

Further reading

Term: gzip compression

  • Glossary
  • compression
  • gzip

gzip is a file format used for file compression and decompression. It is based on the Deflate algorithm that allows files to be made smaller in size which allows for faster network transfers. gzip is commonly supported by web servers and modern browsers, meaning that servers can automatically compress files with gzip before sending them, and browsers can uncompress files upon receiving them.

See also

Term: Hash

  • CodingScripting
  • Cryptography
  • Glossary
  • Hash

The hash function takes a variable-length message input and produces a fixed-length hash output. It is commonly in the form of a 128-bit "fingerprint" or "message digest". Hashes are very useful for glossary("cryptography") — they insure the integrity of transmitted data, and provide the basis for glossary("HMAC"), which enables message authentication.

See also

  • Interwiki("wikipedia", "Hash function") on Wikipedia

Term: Head

  • CodingScripting
  • Glossary
  • HTML
  • head
  • metadata

The Head is the part of an glossary("HTML") document that contains glossary("metadata") about that document, such as author, description, and links to glossary("CSS") or glossary("JavaScript") files that should be applied to the HTML.

See also

  • htmlelement("head") element reference on MDN
  • The HTML <head> on the MDN Learning Area

Term: High-level programming language

  • CodingScripting
  • Glossary

A high-level programming language has a significant abstraction from the details of computer operation. It is designed to be easily understood by humans and for this reason they must be translated by another software. Unlike low-level programming languages, it may use natural language elements, or may automate (or even entirely hide) significant areas of computing systems, making the process of developing simpler and more understandable relative to a lower-level language. The amount of abstraction provided defines how "high-level" a programming language is.

The idea of a language automatically translatable into machine code, but nearer to human logic, was introduced in computer science in the 1950s, especially thanks to the work of John Backus (IBM), to whom it owes the first high-level language to have been widely circulated: Fortran. For this innovation Backus received the Turing prize.

Term: HMAC

  • Cryptography
  • Glossary
  • Hash
  • Security

Hash-based message authentication code(HMAC) is a protocol used for Glossary("cryptography", "cryptographically") authenticating messages.

It can use any kind of Glossary("Cryptographic hash function", "cryptographic functions"), and its strength depends on the underlying function (SHA1 or MD5 for instance), and the chosen secret key. With such a combination, the HMAC verification Glossary("Algorithm", "algorithm") is then known with a compound name such as HMAC-SHA1.

HMAC is used to ensure both integrity and authentication.

See also

  • Interwiki("wikipedia", "Hash-based message authentication code", "HMAC") on Wikipedia
  • RFC 2104 on IETF

Term: Hoisting

  • CodingScripting
  • Glossary
  • JavaScript

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

Hoisting allows functions to be safely used in code before they are declared.

Variable and class declarations are also hoisted, so they too can be referenced before they are declared. Note that doing so can lead to unexpected errors, and is not generally recommended.

Note: The term hoisting is not used in any normative specification prose prior to ECMAScript® 2015 Language Specification. Hoisting was thought up as a general way of thinking about how execution contexts (specifically the creation and execution phases) work in JavaScript.

Function hoisting

One of the advantages of hoisting is that it lets you use a function before you declare it in your code.

//
catName('Tiger');

function catName(name) {
    console.log("My cat's name is " + name);
}
/*
The result of the code above is: "My cat's name is Tiger"
*/

Without hoisting you would have to write the same code like this:

//

function catName(name) {
    console.log("My cat's name is " + name);
}

catName('Tiger');
/*
The result of the code above is the same: "My cat's name is Tiger"
*/

Variable hoisting

Hoisting works with variables too, so you can use a variable in code before it is declared and/or initialized.

However JavaScript only hoists declarations, not initializations! This means that initialization doesn't happen until the associated line of code is executed, even if the variable was originally initialized then declared, or declared and initialized in the same line.

Until that point in the execution is reached the variable has its default initialization (undefined for a variable declared using var, otherwise uninitialized).

Note: Conceptually variable hoisting is often presented as the interpreter "splitting variable declaration and initialization, and moving (just) the declarations to the top of the code".

Below are some examples showing what can happen if you use a variable before it is declared.

var hoisting

Here we declare then initialize the value of a var after using it. The default initialization of the var is undefined.

//
console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num; // Declaration
num = 6; // Initialization
console.log(num); // Returns 6 after the line with initialization is executed.

The same thing happens if we declare and initialize the variable in the same line.

//
console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num = 6; // Initialization and declaration.
console.log(num); // Returns 6 after the line with initialization is executed.

If we forget the declaration altogether (and only initialize the value) the variable isn't hoisted. Trying to read the variable before it is initialized results in ReferenceError exception.

//
console.log(num); // Throws ReferenceError exception - the interpreter doesn't know about `num`.
num = 6; // Initialization

Note however that initialization also causes declaration (if not already declared). The code snippet below will work, because even though it isn't hoisted, the variable is initialized and effectively declared before it is used.

//
a = 'Cran'; // Initialize a
b = 'berry'; // Initialize b

console.log(a + '' + b); // 'Cranberry'

let and const hoisting

Variables declared with let and const are also hoisted but, unlike var, are not initialized with a default value. An exception will be thrown if a variable declared with let or const is read before it is initialized.

//
console.log(num); // Throws ReferenceError exception as the variable value is uninitialized
let num = 6; // Initialization

Note that it is the order in which code is executed that matters, not the order in which it is written in the source file. The code will succeed provided the line that initializes the variable is executed before any line that reads it.

For information and examples see let > temporal dead zone.

class hoisting

Classes defined using a class declaration are hoisted, which means that JavaScript has a reference to the class. However the class is not initialized by default, so any code that uses it before the line in which it is initialized is executed will throw a ReferenceError.

Function and class expression hoisting

Function expressions and class expressions are not hoisted.

The expressions evaluate to a function or class (respectively), which are typically assigned to a variable. In this case the variable declaration is hoisted and the expression is its initialization. Therefore the expressions are not evaluated until the relevant line is executed.

See also

Term: Host

  • Glossary
  • Intermediate
  • Web
  • WebMechanics

A host is a device connected to the glossary("Internet") (or a local network). Some hosts called glossary("server","servers") offer additional services like serving webpages or storing files and emails.

The host doesn't need to be a hardware instance. It can be generated by virtual machines. The host generated by virtual machines is called "Virtual hosting".

See also

  • interwiki("wikipedia", "Host (network)", "Host") on Wikipedia

Term: Hotlink

  • Glossary
  • WebMechanics

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 often frowned upon as it can cause unwanted bandwidth usage on the website hosting the linked-to object, and copyright concerns — it is considered stealing when it is done without permission.

See also

  • Interwiki("wikipedia", "Inline linking", "Hotlink") on Wikipedia
  • glossary("Hyperlink") (Glossary)

Term: Houdini

  • CSS
  • CSS API
  • Glossary
  • Houdini
  • Reference

Houdini is a set of low level APIs that give developers the power to extend CSS, providing the ability to hook into the styling and layout process of a browser's rendering engine. Houdini gives developers access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS.

The benefit of Houdini is that developers can create CSS features without waiting for web standards specifications to define them and without waiting for every browser to fully implement the features.

While many of the features Houdini enables can be created with JavaScript, interacting directly with the CSSOM before JavaScript is enabled provides for faster parse times. Browsers create the CSSOM — including layout, paint, and composite processes — before applying any style updates found in scripts: layout, paint, and composite processes are repeated for updated JavaScript styles to be implemented. Houdini code doesn't wait for that first rendering cycle to be complete. Rather, it is included in that first cycle, creating renderable, understandable styles.

See also

Term: HPKP

  • Glossary
  • Security

HTTP Public Key Pinning (HPKP) is a security feature that tells a web client to associate a specific cryptographic public key with a certain web server to decrease the risk of Glossary("MITM") attacks with forged certificates.

See also

Term: HSTS

  • HTTP
  • Security

HTTP Strict Transport Security lets a web site inform the browser that it should never load the site using HTTP and should automatically convert all attempts to access the site using HTTP to HTTPS requests instead. It consists in one HTTP header, HTTPHeader("Strict-Transport-Security"), sent by the server with the resource.

In other words, it tells the browser that changing the protocol from HTTP to HTTPS in a URL works (and is more secure) and asks the browser to do it for every request.

See also

  • HTTPHeader("Strict-Transport-Security")
  • OWASP Article: HTTP Strict Transport Security
  • Wikipedia: interwiki("wikipedia", "HTTP Strict Transport Security")

Term: HTML5

  • CodingScripting
  • Glossary
  • HTML
  • HTML5
  • Markup

The term HTML5 is essentially a buzzword that refers to a set of modern web technologies. This includes the Glossary("HTML") Living Standard, along with glossary("JavaScript") glossary("API","APIs") to enhance storage, multimedia, and hardware access.

You may sometimes hear about "new HTML5 elements", or find HTML5 described as a new version of HTML. HTML5 was the successor to previous HTML versions and introduced new elements and capabilities to the language on top of the previous version, HTML 4.01, as well as improving or removing some existing functionality. However, as a Living Standard HTML now has no version. The up-to-date specification can be found at html.spec.whatwg.org/.

Any modern site should use the HTML doctype — this will ensure that you are using the latest version of HTML.

Note: Until 2019, the glossary("W3C") published a competing HTML5 standard with version numbers. Since 28 May 2019, the WHATWG Living Standard was announced by the W3C as the sole version of HTML.

See also

Term: HTML

  • CodingScripting
  • Glossary
  • HTML
  • l10n:priority

HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.

Brief history

In 1990, as part of his vision of the Glossary("World Wide Web","Web"), Tim Berners-Lee defined the concept of Glossary("hypertext"), which Berners-Lee formalized the following year through a markup mainly based on Glossary("SGML"). The Glossary("IETF") began formally specifying HTML in 1993, and after several drafts released version 2.0 in 1995. In 1994 Berners-Lee founded the Glossary("W3C") to develop the Web. In 1996, the W3C took over the HTML work and published the HTML 3.2 recommendation a year later. HTML 4.0 was released in 1999 and became an Glossary("ISO") standard in 2000.

At that time, the W3C nearly abandoned HTML in favor of Glossary("XHTML"), prompting the founding of an independent group called Glossary("WHATWG") in 2004. Thanks to WHATWG, work on Glossary("HTML5") continued: the two organizations released the first draft in 2008 and the final standard in 2014.

Concept and syntax

Detail of the structure of an HTML element

An HTML file is normally saved with an .htm or .html extension, served by a Glossary("Server","web server"), and can be rendered by any Glossary("Browser","Web browser").

See also

Term: HTTP/2

  • Glossary
  • HTTP
  • Infrastructure
  • Reference
  • Web Performance
  • l10n:priority

HTTP/2 is a major revision of the HTTP network protocol.

The primary goals for HTTP/2 are to reduce glossary("latency") by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of HTTP header fields, and add support for request prioritization and server push.

HTTP/2 does not modify the application semantics of HTTP in any way. All the core concepts found in HTTP 1.1, such as HTTP methods, status codes, URIs, and header fields, remain in place. Instead, HTTP/2 modifies how the data is formatted (framed) and transported between the client and server, both of which manage the entire process, and hides application complexity within the new framing layer. As a result, all existing applications can be delivered without modification.

See also

  • HTTP on MDN

  • interwiki("wikipedia", "HTTP/2", "HTTP/2") on Wikipedia

  • Glossary

    • glossary("HTTP")
    • glossary("Latency")

Term: HTTP/3

  • HTTP
  • Intro
  • NeedsContent

HTTP/3 is the upcoming major revision of the HTTP network protocol, succeeding glossary("HTTP 2", "HTTP/2").

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

See also

  • HTTP on MDN

  • interwiki("wikipedia", "HTTP/3", "HTTP/3") on Wikipedia

  • Glossary

    • glossary("HTTP")
    • glossary("HTTP 2")
    • glossary("Latency")

Term: HTTP header

  • Glossary
  • HTTP Header
  • WebMechanics

An HTTP header is a field of an HTTP request or response that passes additional context and metadata about the request or response. For example, a request message can use headers to indicate it's preferred media formats, while a response can use header to indicate the media format of the returned body. Headers are case-insensitive, begin at the start of a line and are immediately followed by a ':' and a header-dependent value. The value finishes at the next CRLF or at the end of the message.

The HTTP and Fetch specifications refer to a number of header categories, including:

  • Glossary("Request header"): Headers containing more information about the resource to be fetched or about the client itself.
  • Glossary("Response header"): Headers with additional information about the response, like its location or about the server itself (name, version, …).
  • Glossary("Representation header"): metadata about the resource in the message body (e.g. encoding, media type, etc.).
  • Glossary("Fetch metadata request header"): Headers with metadata about the resource in the message body (e.g. encoding, media type, etc.).

A basic request with one header:

GET /example.http HTTP/1.1
Host: example.com

Redirects have mandatory headers (HTTPHeader("Location")):

302 Found
Location: /NewPage.html

A typical set of headers:

304 Not Modified
Access-Control-Allow-Origin: *
Age: 2318192
Cache-Control: public, max-age=315360000
Connection: keep-alive
Date: Mon, 18 Jul 2016 16:06:00 GMT
Server: Apache
Vary: Accept-Encoding
Via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (CloudFront)
X-Amz-Cf-Id: TOl0FEm6uI4fgLdrKJx0Vao5hpkKGZULYN2TWD2gAWLtr7vlNjTvZw==
X-Backend-Server: developer6.webapp.scl3.mozilla.com
X-Cache: Hit from cloudfront
X-Cache-Info: cached

Note: Older versions of the specification referred to:

  • Glossary("General header"): Headers applying to both requests and responses but with no relation to the data eventually transmitted in the body.
  • Glossary("Entity header"): Headers containing more information about the body of the entity, like its content length or its MIME-type (this is a superset of what are now referred to as the Representation metadata headers)

See also

  • List of all HTTP headers

  • Syntax of headers in the HTTP specification

  • Glossary

    • Glossary("HTTP header")
    • Glossary("Request header")
    • Glossary("Response header")
    • Glossary("Representation header")
    • Glossary("Fetch metadata request header")
    • Glossary("Forbidden header name")
    • Glossary("Forbidden response header name")
    • Glossary("CORS-safelisted request header")
    • Glossary("CORS-safelisted response header")

Term: Safe (HTTP Methods)

  • Glossary
  • WebMechanics

An HTTP method is safe if it doesn't alter the state of the server. In other words, a method is safe if it leads to a read-only operation. Several common HTTP methods are safe: HTTPMethod("GET"), HTTPMethod("HEAD"), or HTTPMethod("OPTIONS"). All safe methods are also glossary("idempotent"), but not all idempotent methods are safe. For example, HTTPMethod("PUT") and HTTPMethod("DELETE") are both idempotent but unsafe.

Even if safe methods have a read-only semantic, servers can alter their state: e.g. they can log or keep statistics. What is important here is that by calling a safe method, the client doesn't request any server change itself, and therefore won't create an unnecessary load or burden for the server. Browsers can call safe methods without fearing to cause any harm to the server; this allows them to perform activities like pre-fetching without risk. Web crawlers also rely on calling safe methods.

Safe methods don't need to serve static files only; a server can generate an answer to a safe method on-the-fly, as long as the generating script guarantees safety: it should not trigger external effects, like triggering an order in an e-commerce Web site.

It is the responsibility of the application on the server to implement the safe semantic correctly, the webserver itself, being Apache, Nginx or IIS, can't enforce it by itself. In particular, an application should not allow HTTPMethod("GET") requests to alter its state.

A call to a safe method, not changing the state of the server:

GET /pageX.html HTTP/1.1

A call to a non-safe method, that may change the state of the server:

POST /pageX.html HTTP/1.1

A call to an idempotent but non-safe method:

DELETE /idX/delete HTTP/1.1

See also

  • Definition of safe in the HTTP specification.
  • Description of common safe methods: HTTPMethod("GET"), HTTPMethod("HEAD"), HTTPMethod("OPTIONS")
  • Description of common unsafe methods: HTTPMethod("PUT"), HTTPMethod("DELETE"), HTTPMethod("POST")

Term: HTTPS RR

  • Glossary
  • HTTPS
  • HTTPS RR
  • Infrastructure
  • Security

HTTPS RR (HTTPS Resource Records) are a type of DNS record that delivers configuration information and parameters for how to access a service via Glossary("HTTPS").

An HTTPS RR can be used to optimize the process of connecting to a service using HTTPS. Further, the presence of an HTTPS RR signals that all useful Glossary("HTTP") resources on the origin are reachable over HTTPS, which in turn means that a browser can safely upgrade connections to the domain from HTTP to HTTPS.

See also

Term: HTTPS

  • Glossary
  • HTTPS
  • Infrastructure
  • Security

HTTPS (HyperText Transfer Protocol Secure) is an encrypted version of the Glossary("HTTP") protocol. It uses Glossary("SSL") or Glossary("TLS") to encrypt all communication between a client and a server. This secure connection allows clients to safely exchange sensitive data with a server, such as when performing banking activities or online shopping.

See also

Term: Hyperlink

  • CodingScripting
  • Glossary
  • HTML
  • Navigation

Hyperlinks connect webpages or data items to one another. In HTML, HTMLElement("a") elements define hyperlinks from a spot on a webpage (like a text string or image) to another spot on some other webpage (or even on the same page).

See also

Term: Hypertext

  • Glossary
  • Web
  • WebMechanics

Hypertext is text that contains links to other texts, as opposed to a single linear flow like in a novel.

The term was coined by Ted Nelson around 1965.

See also

  • interwiki("wikipedia", "Hypertext", "Hypertext") on Wikipedia

Term: I18N

  • Beginner
  • Credibility
  • Glossary
  • Internationalization
  • OpenPractices
  • i18n

i18n (from "internationalization", a 20-letter word) is the best practice that enables products or services to be readily adapted to any target culture.

Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language. (The Glossary("W3C") definition)

Among other things, i18n requires support for multiple

  • character sets (usually via Unicode)
  • units of measure (currency, °C/°F, km/miles, etc.)
  • time and date formats
  • keyboard layouts
  • text directions

See also

Term: IANA

  • Glossary
  • Infrastructure

IANA (Internet Assigned Numbers Authority) is a subsidiary of glossary("ICANN") charged with recording and/or assigning glossary("domain name","domain names"), glossary("IP address","IP addresses"), and other names and numbers used by Internet glossary("protocol","protocols").

See also

  • Official website
  • interwiki("wikipedia", "Internet Assigned Numbers Authority", "IANA") on Wikipedia

Term: ICANN

  • Glossary
  • Infrastructure

ICANN (Internet Corporation for Assigned Names and Numbers) is an international nonprofit that maintains the glossary("DNS","domain name system") and the record of glossary("IP address","IP addresses").

See also

Term: ICE

  • CodingScripting
  • Glossary
  • Networking
  • Protocols
  • WebRTC

ICE (Interactive Connectivity Establishment) is a framework used by glossary("WebRTC") (among other technologies) for connecting two peers, regardless of network topology (usually for audio and video chat). This protocol lets two peers find and establish a connection with one another even though they may both be using Network Address Translator (glossary("NAT")) to share a global IP address with other devices on their respective local networks.

The framework algorithm looks for the lowest-latency path for connecting the two peers, trying these options in order:

  1. Direct UDP connection (In this case—and only this case—a glossary("STUN") server is used to find the network-facing address of a peer)
  2. Direct TCP connection, via the HTTP port
  3. Direct TCP connection, via the HTTPS port
  4. Indirect connection via a relay/glossary("TURN") server (if a direct connection fails, e.g., if one peer is behind a firewall that blocks NAT traversal)

See also

  • WebRTC, the principal web-related protocol which uses ICE
  • WebRTC protocols
  • rfc("5245"), the IETF specification for ICE
  • domxref("RTCIceCandidate"), the interface representing a ICE candidate

Term: IDE

  • CodingScripting
  • Glossary

An Integrated Development Environment (IDE) or Interactive Development environment is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools and a debugger.

See also

  • interwiki("wikipedia", "Integrated_development_environment", "IDE") on Wikipedia

Term: Idempotent

  • Glossary
  • WebMechanics

An HTTP method is idempotent if an identical request can be made once or several times in a row with the same effect while leaving the server in the same state. In other words, an idempotent method should not have any side-effects (except for keeping statistics). Implemented correctly, the HTTPMethod("GET"), HTTPMethod("HEAD"), HTTPMethod("PUT"), and HTTPMethod("DELETE") methods are idempotent, but not the HTTPMethod("POST") method. All glossary("Safe/HTTP", "safe") methods are also idempotent.

To be idempotent, only the actual back-end state of the server is considered, the status code returned by each request may differ: the first call of a HTTPMethod("DELETE") will likely return a HTTPStatus("200"), while successive ones will likely return a HTTPStatus("404"). Another implication of HTTPMethod("DELETE") being idempotent is that developers should not implement RESTful APIs with a delete last entry functionality using the DELETE method.

Note that the idempotence of a method is not guaranteed by the server and some applications may incorrectly break the idempotence constraint.

GET /pageX HTTP/1.1 is idempotent. Called several times in a row, the client gets the same results:

GET /pageX HTTP/1.1
GET /pageX HTTP/1.1
GET /pageX HTTP/1.1
GET /pageX HTTP/1.1

POST /add_row HTTP/1.1 is not idempotent; if it is called several times, it adds several rows:

POST /add_row HTTP/1.1
POST /add_row HTTP/1.1   -> Adds a 2nd row
POST /add_row HTTP/1.1   -> Adds a 3rd row

DELETE /idX/delete HTTP/1.1 is idempotent, even if the returned status code may change between requests:

DELETE /idX/delete HTTP/1.1   -> Returns 200 if idX exists
DELETE /idX/delete HTTP/1.1   -> Returns 404 as it just got deleted
DELETE /idX/delete HTTP/1.1   -> Returns 404

See also

  • Definition of idempotent in the HTTP specification.
  • Description of common idempotent methods: HTTPMethod("GET"), HTTPMethod("HEAD"), HTTPMethod("PUT"), HTTPMethod("DELETE"), HTTPMethod("OPTIONS"), HTTPMethod("TRACE")
  • Description of common non-idempotent methods: HTTPMethod("POST"),HTTPMethod("PATCH"), HTTPMethod("CONNECT")

Term: Identifier

  • Beginner
  • CodingScripting
  • Glossary
  • Sharing

An identifier is a sequence of characters in the code that identifies a glossary("variable"), glossary("function"), or glossary("property").

In glossary("JavaScript"), identifiers are case-sensitive and can contain glossary("Unicode") letters, $, _, and digits (0-9), but may not start with a digit.

An identifier differs from a string in that a glossary("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.

See also

  • interwiki("wikipedia", "Identifier#In_computer_science", "Identifier") on Wikipedia

  • Glossary

    • glossary("Identifier")
    • glossary("Scope")
    • glossary("string")
    • glossary("Unicode")

Term: IDL

  • CodingScripting
  • Glossary
  • IDL
  • Interface description language

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 domxref("element.setAttribute()") or domxref("element.getAttribute()"). The content attribute is always a string even when the expected value should be an integer. For example, to set an HTMLElement("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 HTMLElement("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

Term: IETF

  • Glossary
  • IETF
  • Infrastructure
  • Internet

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

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

See also

Term: IIFE

  • CodingScripting
  • DesignPattern
  • Functions
  • Glossary
  • JavaScript

An IIFE (Immediately Invoked Function Expression) is a glossary("JavaScript") glossary("function") that runs as soon as it is defined. The name IIFE is promoted by Ben Alman in his blog.

//
(function () {
    statements;
})();

It is a design pattern which is also known as a glossary("Self-Executing Anonymous Function") and contains two major parts:

  1. The first is the anonymous function with lexical scope enclosed within the jsxref("Operators/Grouping", "Grouping Operator") (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.
  2. The second part creates the immediately invoked function expression () through which the JavaScript engine will directly interpret the function.

Use cases

Avoid polluting the global namespace

Because our application could include many functions and global variables from different source files, it's important to limit the number of global variables. If we have some initiation code that we don't need to use again, we could use the IIFE pattern. As we will not reuse the code again, using IIFE in this case is better than using a function declaration or a function expression.

//
(function () {
    // some initiation code
    let firstVariable;
    let secondVariable;
})();

// firstVariable and secondVariable will be discarded after the function is executed.

The module pattern

We would also use IIFE to create private and public variables and methods. For a more sophisticated use of the module pattern and other use of IIFE, you could see the book Learning JavaScript Design Patterns by Addy Osmani.

//
const makeWithdraw = (balance) =>
    (function (copyBalance) {
        let balance = copyBalance; // This variable is private
        let doBadThings = function () {
            console.log('I will do bad things with your money');
        };
        doBadThings();
        return {
            withdraw: function (amount) {
                if (balance >= amount) {
                    balance -= amount;
                    return balance;
                } else {
                    return 'Insufficient money';
                }
            }
        };
    })(balance);

const firstAccount = makeWithdraw(100); // "I will do bad things with your money"
console.log(firstAccount.balance); // undefined
console.log(firstAccount.withdraw(20)); // 80
console.log(firstAccount.withdraw(30)); // 50
console.log(firstAccount.doBadThings); // undefined; this method is private
const secondAccount = makeWithdraw(20); // "I will do bad things with your money"
console.log(secondAccount.withdraw(30)); // "Insufficient money"
console.log(secondAccount.withdraw(20)); // 0

For loop with var before ES6

We could see the following use of IIFE in some old code, before the introduction of the statements let and const in ES6 and the block scope. With the statement var, we have only function scopes and the global scope. Suppose we want to create 2 buttons with the texts Button 0 and Button 1 and we click them, we would like them to alert 0 and 1. The following code doesn't work:

//
for (var i = 0; i < 2; i++) {
    const button = document.createElement('button');
    button.innerText = 'Button ' + i;
    button.onclick = function () {
        alert(i);
    };
    document.body.appendChild(button);
}
console.log(i); // 2

When clicked, both Button 0 and Button 1 alert 2 because i is global, with the last value 2. To fix this problem before ES6, we could use the IIFE pattern:

//
for (var i = 0; i < 2; i++) {
    const button = document.createElement('button');
    button.innerText = 'Button ' + i;
    button.onclick = (function (copyOfI) {
        return function () {
            alert(copyOfI);
        };
    })(i);
    document.body.appendChild(button);
}
console.log(i); // 2

When clicked, Buttons 0 and 1 alert 0 and 1. The variable i is globally defined. Using the statement let, we could simply do:

//
for (let i = 0; i < 2; i++) {
    const button = document.createElement('button');
    button.innerText = 'Button ' + i;
    button.onclick = function () {
        alert(i);
    };
    document.body.appendChild(button);
}
console.log(i); // Uncaught ReferenceError: i is not defined.

When clicked, these buttons alert 0 and 1.

See also

  • Quick example (at the end of the "Functions" section, right before "Custom objects")

  • interwiki("wikipedia", "Immediately-invoked function expression", "IIFE") (Wikipedia)

  • Glossary

    • Glossary("Function")
    • Glossary("Self-Executing Anonymous Function")

Term: IMAP

  • Beginner
  • Glossary
  • Infrastructure
  • MailNews

IMAP (Internet Message Access Protocol) is a Glossary("protocol") used to retrieve and store emails. More recent than Glossary("POP"), IMAP allows folders and rules on the server.

Unlike POP3, IMAP allows multiple simultaneous connections to one mailbox. Clients accessing a mailbox can receive information about state changes made from other clients. IMAP also provides a mode for clients to stay connected and receive information on demand.

Mark Crispin initially developed IMAP in 1986 as Interim Mail Access Protocol. IMAP4 revision 1 is the current version, defined by RFC 3501.

See also

  • RFC(3501)
  • Glossary("POP")
  • interwiki("wikipedia", "Internet Message Access Protocol", "IMAP") on Wikipedia

Term: Immutable

  • CodingScripting
  • Glossary

An immutable glossary("object") is one whose content cannot be changed. An object can be immutable for various reasons, for example:

  • To improve performance (no planning for the object's future changes)
  • To reduce memory use (make glossary("object reference","object references") instead of cloning the whole object)
  • Thread-safety (multiple threads can reference the same object without interfering with one other)

See also

  • interwiki("wikipedia", "Immutable object", "Immutable") on Wikipedia

Term: 'MDN Web Docs Glossary: Definitions of Web-related terms'

  • Beginner
  • Definitions
  • Dictionary
  • Glossary
  • Index
  • Landing
  • Terminology

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 (or listed below on mobile devices and other narrow width screens).

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.

LearnBox({"title":"Learn a new word ..."})

  1. MDN Web Docs Glossary _ListSubpagesForSidebar("/en-us/docs/Glossary", 1_)

Term: IndexedDB

  • API
  • CodingScripting
  • Database
  • Glossary
  • Sql

IndexedDB is a Web glossary("API") for storing large data structures within browsers and indexing them for high-performance searching. Like an glossary("SQL")-based RDBMS, IndexedDB is a transactional database system. However, it uses glossary("JavaScript") objects rather than fixed columns tables to store data.

See also

Term: Index

  • Glossary
  • Index
  • MDN Meta
  • Navigation

Index("/en-US/docs/Glossary")

Term: Information architecture

  • Design
  • Glossary
  • information architecture

Information architecture, as applied to web design and development, is the practice of organizing the information / content / functionality of a web site so that it presents the best user experience it can, with information and services being easily usable and findable.

See also

  • interwiki("wikipedia", "Information_architecture", "Information architecture") on Wikipedia

Term: Inheritance

  • CodingScripting
  • Glossary
  • Inheritance
  • Programming Language

Inheritance is a major feature of glossary("OOP","object-oriented programming"). Data abstraction can be carried up several levels, that is, glossary("class","classes") can have superclasses and subclasses.

As an app developer, you can choose which of the superclass's glossary("attribute","attributes") and glossary("method","methods") to keep and add your own, making class definition very flexible. Some languages let a class inherit from more than one parent (multiple inheritance).

See also

Term: Input method editor

  • Glossary

An input method editor (IME) is a program that provides a specialized user interface for text input. Input method editors are used in many situations:

  • to enter Chinese, Japanese, or Korean text using a Latin keyboard
  • to enter Latin text using a numeric keypad
  • to enter text on a touch screen using handwriting recognition

See also

  • Interwiki("wikipedia", "Input method")

  • Glossary

    • Glossary("I18N")

Term: Instance

  • Beginner
  • CodingScripting
  • Glossary
  • JavaScript
  • NeedsExample
  • OOP

An glossary("object") created by a glossary("constructor") is an instance of that constructor.

See also

  • interwiki("wikipedia", "Instance (computer science)", "Instance") on Wikipedia

Term: Internationalization

  • Glossary
  • Internationalization
  • Reference

Internationalization, often shortened to "i18n", is the adapting of a web site or web application to different languages, regional differences, and technical requirements for different regions and countries. Internationalization is the process of architecting your web application so that it can be quickly and easily adapted to various languages and regions without much engineering effort when new languages and regions are supported. Also so that a user can browse features to translate or localize the application to access all the content without breaking the layout.

Internationalization includes support for multiple character sets (usually via Unicode), units of measure (currency, °C/°F, km/miles, etc.), date and time formats, keyboard layouts, and layout and text directions.

See also

Term: Internet

  • Beginner
  • Glossary
  • Guide
  • Intro
  • NeedsContent
  • Tutorial
  • Web
  • WebMechanics

The Internet is a worldwide network of networks that uses the Internet protocol suite (also named glossary("TCP")/glossary("IPv6","IP") from its two most important glossary("protocol","protocols")).

See also

Term: Intrinsic size

  • CSS
  • Glossary
  • Intrinsic size

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

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

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

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

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

Term: IP Address

  • Beginner
  • Glossary
  • Infrastructure
  • Web

An IP address is a number assigned to every device connected to a network that uses the Internet protocol.

"IP address" typically still refers to 32-bit IPv4 addresses until IPv6 is deployed more broadly.

See also

  • interwiki("wikipedia", "IP address", "IP address") on Wikipedia

Term: IPv4

  • Glossary
  • IPv4
  • Infrastructure
  • Internet Protocol
  • Protocol

IPv4 is the fourth version of the communication Glossary("protocol") underlying the glossary("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). glossary("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

interwiki("wikipedia", "IPv4", "IPv4") on Wikipedia

Term: IPv6

  • Glossary
  • IPv6
  • Infrastructure
  • Intermediate
  • Web
  • WebMechanics

IPv6 is the current version of the communication glossary("protocol") underlying the glossary("Internet"). Slowly IPv6 is replacing Glossary("IPv4"), among other reasons because IPv6 allows for many different Glossary("IP address","IP addresses").

See also

  • interwiki("wikipedia", "IPv6", "IPv6") on Wikipedia

Term: IRC

  • Glossary
  • Infrastructure
  • Internet Relay Chat
  • Open Protocol
  • irc

IRC (Internet Relay Chat) is a worldwide chat system requiring an Internet connection and an IRC client, which sends and receives messages via the IRC server.

Designed in the late 1980s by Jarrko Oikarinen, IRC uses glossary("TCP") and is an open protocol. The IRC server broadcasts messages to everyone connected to one of many IRC channels (each with their own ID).

Term: ISO

  • Glossary
  • ISO
  • Infrastructure
  • Web Standards
  • web specifications

ISO (International Organization for Standardization) is a global association that develops uniform criteria coordinating the companies in each major industry.

See also

Term: ISP

  • Glossary
  • ISP
  • Internet Service Provider
  • Web
  • WebMechanics

An ISP (Internet Service Provider) sells Internet access, and sometimes email, web hosting, and voice over IP, either by a dial-up connection over a phone line (formerly more common), or through a broadband connection such as a cable modem or DSL service.

See also

  • How the Internet works (explanation for beginners)
  • interwiki("wikipedia", "Internet service provider", "Internet service provider") on Wikipedia

Term: ITU

  • Glossary
  • ITU
  • Standardization
  • organization

The International Telecommunication Union (ITU) is the organization authorized by the United Nations to establish standards and rules for telecommunication, including telegraph, radio, telephony and the internet.

From defining rules for ensuring transmissions get to where they need to go to and creating the "SOS" alert signal used in Morse code, the ITU has long played a key role in how we use technology to exchange information and ideas.

In the Internet Age, the ITU's role of establishing standards for video and audio data formats used for streaming, teleconferencing, and other purposes. For example, the ITU and the Moving Picture Experts Group (MPEG) worked together to develop and publish, as well as to maintain, the various MPEG specifications, such as MPEG-2 (ITU H.262), AVC (ITU H.264), and HEVC (ITU H.265).

See also

Term: Jank

  • Beginner
  • CodingScripting
  • Glossary
  • Performance
  • Web Performance

Term: Java

  • CodingScripting
  • Glossary
  • Java
  • Programming Language

Java is a glossary("Compile", "compiled"), glossary("OOP", "object-oriented"), highly portable Glossary("computer programming", "programming") language.

Java is statically typed and features a similar syntax to C. It comes with a large library of readily usable functions, the Java Software Development Kit (SDK).

Programs are glossary("Compile", "compiled") only once ahead of time into a proprietary byte code and package format that runs inside the Java Virtual Machine (JVM). The JVM is available across many platforms, which allows Java programs to run almost everywhere without the need to be compiled or packaged again. This makes it a preferred language in many large enterprises with heterogenous landscapes, but may be perceived "heavy".

See also

  • interwiki("wikipedia", "Java (programming language)", "Java") on Wikipedia

Term: JavaScript

  • CodingScripting
  • Glossary
  • JavaScript
  • l10n:priority

Summary

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 Glossary("Server","server")-side, using a runtime such as Node.js.

JavaScript should not be confused with the interwiki("wikipedia", "Java(programminglanguage)", "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 Glossary("DOM"), manipulate data with Glossary("AJAX") and Glossary("IndexedDB"), draw graphics with Glossary("canvas"), interact with the device running the browser through various Glossary("API","APIs"), and more. JavaScript is one of the world's most commonly-used languages, owing to the recent growth and performance improvement of Glossary("API","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 glossary("Microsoft Internet Explorer", "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 (eleventh, ES2020) edition is available as of June 2020.

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 Glossary("HTTP") and Glossary("WebSockets") servers.

See also

Term: JPEG

  • Beginner
  • Composing
  • Glossary
  • Images
  • 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

  • Interwiki("wikipedia", "JPEG") on Wikipedia

Term: jQuery

  • Glossary
  • JQuery
  • JavaScript

jQuery is a Glossary("JavaScript") Glossary("Library") that focuses on simplifying Glossary("DOM") manipulation, Glossary("AJAX") calls, and Glossary("Event") handling.

jQuery uses a format, $(selector).action() to assign an element(s) to an event. To explain it in detail, $(selector) will call jQuery to select selector element(s), and assign it to an event Glossary("API") called .action().

//
$(document).ready(function () {
    alert('Hello World!');
    $('#blackBox').hide();
});

The above code carries out the same function as the following code:

//
window.onload = function () {
    alert('Hello World!');
    document.getElementById('blackBox').style.display = 'none';
};

Or:

//
window.addEventListener('load', () => {
    alert('Hello World!');
    document.getElementById('blackBox').style.display = 'none';
});

See also

Term: JSON

  • CodingScripting
  • Glossary
  • Intro
  • JSON
  • l10n:priority

JavaScript Object Notation (JSON) is a data-interchange format. Although not a strict subset, JSON closely resembles a subset of Glossary("JavaScript") syntax. Though many programming languages support JSON, it is especially useful for JavaScript-based apps, including websites and browser extensions.

JSON can represent numbers, booleans, strings, null, arrays (ordered sequences of values), and objects (string-value mappings) made up of these values (or of other arrays and objects). JSON does not natively represent more complex data types like functions, regular expressions, dates, and so on. (Date objects by default serialize to a string containing the date in ISO format, so the information isn't completely lost.) If you need JSON to represent additional data types, transform values as they are serialized or before they are deserialized.

See also

  • interwiki("wikipedia", "JSON", "JSON") on Wikipedia
  • Link("/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON") on MDN

Term: Key

  • Cryptography
  • Glossary
  • Security

A key is a piece of information used by a Glossary("cipher") for Glossary("encryption") and/or Glossary("decryption").

Encrypted messages should remain secure even if everything about the Glossary("cryptosystem"), except for the key, is public knowledge.

In Glossary("symmetric-key cryptography"), the same key is used for both encryption and decryption. In Glossary("public-key cryptography"), there exists a pair of related keys known as the public key and private key. The public key is freely available, whereas the private key is kept secret. The public key is able to encrypt messages that only the corresponding private key is able to decrypt, and vice versa.

See also

  • Kerckhoffs's principle on Wikipedia

  • MDN Web Docs Glossary

    • Glossary("Block cipher mode of operation")
    • Glossary("Cipher")
    • Glossary("Ciphertext")
    • Glossary("Cipher suite")
    • Glossary("Cryptanalysis")
    • Glossary("Cryptography")
    • Glossary("Decryption")
    • Glossary("Encryption")
    • Glossary("Key")
    • Glossary("Plaintext")
    • Glossary("Public-key cryptography")
    • Glossary("Symmetric-key cryptography")

Term: Keyword

  • Glossary
  • Keyword
  • Search
  • keyword search

A keyword is a word or phrase that describes content. Online keywords are used as queries for search engines or as words identifying content on websites.

When you use a search engine, you use keywords to specify what you are looking for, and the search engine returns relevant webpages. For more accurate results, try more specific keywords, such as "Blue Mustang GTO" instead of "Mustang". Webpages also use keywords in a meta tag (in the htmlelement("head") section) to describe page content, so search engines can better identify and organize webpages.

See also

  • interwiki("wikipedia", "Keyword_research", "Keyword") on Wikipedia

Term: The Khronos Group

  • Glossary
  • Khronos

The Khronos Group is an open, non-profit, member-driven consortium of over 150 industry-leading companies. Their purpose is to create advanced, royalty-free interoperability standards for 3D graphics, augmented and virtual reality, parallel programming, vision acceleration, and machine learning.

The organization maintains standards such as Glossary("OpenGL") and the domxref("WebGL API").

See also

Term: Latency

  • Audio
  • Glossary
  • Media
  • Networking
  • Reference
  • Video
  • Web Performance
  • latency

Latency is the network time it takes for a requested resource to reach its destination. Low latency is good, meaning there is little or no delay. High latency is bad, meaning it takes a long time for the requested resource to reach its destination.

Latency can be a factor in any kind of data flow, but is most commonly discussed in terms of network latency (the time it takes for a packet of data to travel from source to destination) and media codec latency (the time it takes for the source data to be encoded or decoded and reach the consumer of the resulting data).

See also

Term: Layout viewport

  • CodingScripting
  • Glossary
  • Layout
  • layout viewport
  • viewport

The layout viewport is the viewport into which the browser draws a web page. Essentially, it represents what is available to be seen, while the Glossary("visual viewport") represents what is currently visible on the user's display device.

This becomes important, for example, on mobile devices, where a pinching gesture can usually be used to zoom in and out on a site's contents. The rendered document doesn't change in any way, so the layout viewport remains the same as the user adjusts the zoom level. Instead, the visual viewport is updated to indicate the area of the page that they can see.

See also

Term: Lazy load

  • Glossary
  • Lazy loading
  • Reference
  • Web Performance

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

Term: LGPL

  • Glossary
  • License
  • OpenPractices
  • Remixing
  • Sharing

LGPL (GNU Lesser General Public License) is a free software license published by the Free Software Foundation. The LGPL provides a more permissive alternative for the strictly Glossary("copyleft") Glossary("GPL"). While any derivative work using a GPL-licensed program must be released under the same terms (free to use, share, study, and modify), the LGPL only requires the LGPL-licensed component of the derivative program to continue using the LGPL, not the whole program. LGPL is usually used to license shared components such as libraries (.dll, .so, .jar, etc.).

See also

  • interwiki("wikipedia", "GNU Lesser General Public License", "GNU LGPL") on Wikipedia
  • LGPL License text on gnu.org

Term: Ligature

  • CSS
  • Design
  • Glossary

A ligature is a joining of two characters into one shape. For example, in French "œ" is a ligature of "oe".

You can implement ligatures in your webpage with cssxref("font-variant-ligatures").

See also

  • interwiki("wikipedia", "Typographic ligature", "Ligature") on Wikipedia

Term: Literal

  • Literal
  • JavaScript
  • Glossary

Literals represent values in JavaScript. These are fixed values—not variables—that you literally provide in your script.

Examples

String literals

A string literal is zero or more characters enclosed in double (") or single quotation marks ('). A string must be delimited by quotation marks of the same type (that is, either both single quotation marks, or both double quotation marks).

The following are examples of string literals:

//
'foo';
'bar';
'1234';
'one line \n new line';
"John's cat";

Object literals

An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).

The following is an example of an object literal. The first element of the car object defines a property, myCar, and assigns to it a new string, "Toyota"; the second element, the getCar property, is immediately assigned the result of invoking the function carTypes('Honda'); the third element, the special property, uses an existing variable (sales).

//
var sales = 'BMW';

function carTypes(name) {
    if (name == 'Honda') {
        return name;
    } else {
        return "Sorry, we don't sell " + name + '.';
    }
}

var car = { myCar: 'Toyota', getCar: carTypes('Honda'), special: sales };

console.log(car.myCar); // Toyota
console.log(car.getCar); // Honda
console.log(car.special); // BMW

See also

  • interwiki("wikipedia", "Literal (computer programming)", "Literal") on Wikipedia

Term: Local scope

  • CodingScripting
  • Glossary
  • NeedsContent

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

See also

  • interwiki("wikipedia", "Scope (computer science)", "Scope") on Wikipedia

Term: Local variable

  • CodingScripting
  • Glossary
  • NeedsContent

A glossary("variable") whose name is bound to its glossary("value") only within a Glossary("local scope").

Example

//
var global = 5; //is a global variable

function fun() {
    var local = 10; //is a local variable
}

See also

  • interwiki("wikipedia", "Local variable", "Local variable") on Wikipedia

Term: Locale

  • Composing
  • Glossary
  • 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

  • interwiki("wikipedia", "Locale", "Locale") on Wikipedia

Term: Localization

  • Collaborating
  • Glossary
  • Intro
  • Localization
  • WebMechanics

Localization (l10n) is the process of adapting a software user interface to a specific culture.

The following are common factors to consider:

  • language
  • unit of measure (e.g., kilometers in Europe, miles in U.S.)
  • text direction (e.g., European languages are left-to-right, Arabic right-to-left)
  • capitalization in Latin script (e.g., English uses capitals for weekdays, Spanish uses lowercase)
  • adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally)
  • use of register (e.g., in Japanese respectful speech differs exceptionally from casual speech)
  • number format (e.g., 10 000,00 in Germany vs. 10,000.00 in the U.S.)
  • date format
  • currency
  • cultural references
  • paper size
  • color psychology
  • compliance with local laws
  • local holidays
  • personal names

See also

  • interwiki("wikipedia", "Language localisation", "Localization") on Wikipedia

Term: Long task

  • Glossary
  • Long Tasks API
  • Reference
  • Web Performance

A long task is a task that takes more than 50ms to complete.

It is an uninterrupted period where the main UI thread is busy for 50 ms or longer. Common examples include long running event handlers, expensive reflows and other re-renders, and work the browser does between different turns of the event loop that exceeds 50 ms.

See also

Term: Loop

  • CodingScripting
  • Glossary
  • control flow
  • programming

A loop is a sequence of instructions that is continually repeated until a certain condition is met in Glossary("computer programming"). An example would be the process of getting an item of data and changing it, and then making sure some Glossary("conditional", "condition") is checked such as, if a counter has reached a prescribed number.

Examples

For loop

Syntax:

for (statement 1; statement 2; statement 3){
 execute code block
}
  • Statement 1 is executed once before the code block is run.
  • Statement 2 defines the condition needed to execute the code block.
  • Statement 3 is executed every time the code block is run.

Example:

//
for (var i = 0; i < 10; i++) {
    console.log(i);
}
//This loop will print numbers 0-9, will stop when condition is met (i = 10)

For the above example, the syntax is as follows:

  • Statement 1 sets the variable for the loop (var i = 0).
  • Statement 2 sets the loop condition (i < 10).
  • Statement 3 increases the value of i (i++) each time the code block is run.

While loop

Syntax:

while (condition){
 execute code block
}
  • The code block will continue to loop as long as the condition is true.

Example:

//
var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
//This loop  will print number 0-4, will stop when condition becomes false (i >=5)

For the above example, the syntax is as follows:

  • The code block will continue to run as long as the variable (i) is less than 5.

See also

  • interwiki("wikipedia", "Control_flow#Loops","Control flow") on Wikipedia

  • MDN Web Docs Glossary

    • Glossary("Loop")

Term: Lossless compression

  • Beginner
  • Composing
  • Glossary
  • Images
  • Web Performance
  • compression
  • lossless

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 glossary("GZIP"), glossary("Brotli"), WebP, and glossary("PNG"),

glossary("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

    • glossary("GZIP")
    • glossary("Brotli")
    • glossary("PNG")
    • glossary("Lossy compression")

Term: lossy compression

  • Beginner
  • Composing
  • Glossary
  • Images
  • JPEG
  • Lossy
  • Web Performance
  • compression

Lossy compression, or irreversible compression, is a data-compression method that uses inexact approximations and partial-data discarding to represent content. In simpler terms: lossy compression causes data from the initial file to be lost, possibly causing degradation in quality. The process of such compression is irreversible; once lossy compression of the content has been performed, the content cannot be restored to its original state. Therefore, content that has undergone lossy compression should generally not be further edited.

Lossy compression is widely used in image formats.

Lossy compression image

Although there is no obvious difference quality between the two images above, the size of the second image has been significantly reduced, using lossy compression.

See also

Term: LTR (Left To Right)

  • Composing
  • Glossary
  • Localization

LTR (Left To Right) is a Glossary("locale") property indicating that text is written from left to right. For example, the en-US locale (for US English) specifies left-to-right.

Most Western languages, as well as many others around the world, are written LTR.

The opposite of LTR, Glossary("RTL") (Right To Left) is used in other common languages, including Arabic (ar) and Hebrew (he).

Technical reference

See also

Term: Main Axis

  • CSS
  • Glossary
  • Main axis
  • flexbox

The main axis in glossary("flexbox") is defined by the direction set by the cssxref("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

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

image

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

  • cssxref("flex-basis")
  • cssxref("flex-direction")
  • cssxref("flex-grow")
  • cssxref("flex-shrink")
  • cssxref("justify-content")
  • cssxref("flex")

Further reading

Term: Main thread

  • Glossary
  • Reference
  • Web Performance

The main thread is where a browser processes user events and paints. By default, the browser uses a single thread to run all the JavaScript in your page, as well as to perform layout, reflows, and garbage collection. This means that long-running JavaScript functions can block the thread, leading to an unresponsive page and a bad user experience.

Unless intentionally using a web worker, such as a service worker, JavaScript runs on the main thread, so it's easy for a script to cause delays in event processing or painting. The less work required of the main thread, the more that thread can respond to user events, paint, and generally be responsive to the user.

See also

Term: markup

  • Glossary
  • Intro
  • Markup
  • NeedsContent

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

Types of markup language

  • Presentational Markup:
    • : Used by traditional word processing system with WYSIWYG (what you see it is what you get); this is hidden from human authors, users and editors.
  • Procedural Markup:
    • : Combined with text to provide instructions on text processing to programs. This text is visibly manipulated by the author.
  • Descriptive Markup:
    • : Labels sections of documents as to how the program should handle them. For example, the HTML HTMLElement("td") defines a cell in a HTML table.

See also

Term: MathML

  • CodingScripting
  • Glossary
  • MathML
  • Mathematical Markup Language
  • XML

MathML (an glossary("XML") application) is an open standard for representing mathematical expressions in webpages. In 1998 the W3C first recommended MathML for representing mathematical expressions in the glossary("browser"). MathML has other applications also including scientific content and voice synthesis.

See also

Term: Media

  • Disambiguation
  • Glossary

The term media is an overloaded one when talking about the web; it takes on different meanings depending on the context.

_GlossaryDisambiguation}}

See also

  • interwiki("wikipedia", "Media") on Wikipedia

Term: Metadata

  • CodingScripting
  • Glossary
  • HTML
  • metadata

Metadata is — in its very simplest definition — data that describes data. For example, an glossary("HTML") document is data, but HTML can also contain metadata in its htmlelement("head") element that describes the document — for example who wrote it, and its summary.

See also

  • interwiki("wikipedia", "metadata", "metadata") on Wikipedia
  • The htmlelement("meta") element on MDN

Term: Method

  • CodingScripting
  • Glossary
  • JavaScript

A method is a glossary("function") which is a glossary("property") of an glossary("object"). There are two kind of methods: Instance Methods which are built-in tasks performed by an object instance, or _Glossary("static method", "Static Methods")_ which are tasks that are called directly on an object constructor.

Note: In JavaScript functions themselves are objects, so, in that context, a method is actually an glossary("object reference") to a function.

See also

Term: Microsoft Edge

  • Browser
  • Glossary
  • Infrastructure

Microsoft Edge is a free-of-cost graphical glossary("World Wide Web", "Web") Glossary("browser") bundled with Windows 10 and developed by Microsoft since 2014. Initially known as Spartan, Edge replaced the longstanding browser glossary("Microsoft Internet Explorer","Internet Explorer").

See also

  • Official website

  • MDN Web Docs Glossary

    • Glossary("Google Chrome")
    • Glossary("Microsoft Edge")
    • Glossary("Microsoft Internet Explorer")
    • Glossary("Mozilla Firefox")
    • Glossary("Netscape Navigator")
    • Glossary("Opera Browser")

Term: Microsoft Internet Explorer

  • Browser
  • Glossary
  • Internet Explorer
  • Microsoft
  • Microsoft Internet Explorer
  • Navigation
  • Web Browser
  • Windows
  • Windows Operating System

Internet Explorer (or IE) is a free graphical glossary("browser") maintained by Microsoft for legacy enterprise uses. glossary("Microsoft Edge") is currently the default Windows browser.

Microsoft first bundled IE with Windows in 1995 as part of the package called "Microsoft Plus!". By around 2002, Internet Explorer had become the most used browser in the world, but has since lost ground to Chrome, Firefox, Edge, and Safari.

IE has gone through many releases and currently stands at version 11.0.12, with desktop, mobile, and Xbox Console versions available. Formerly available on Mac and UNIX, Microsoft discontinued those versions in 2003 and 2001 respectively.

See also

Term: Middleware

  • CodingScripting
  • Glossary

Middleware is a (loosely defined) term for any software or service that enables the parts of a system to communicate and manage data. It is the software that handles communication between components and input/output, so developers can focus on the specific purpose of their application.

In server-side web application frameworks, the term is often more specifically used to refer to pre-built software components that can be added to the framework's request/response processing pipeline, to handle tasks such as database access.

See also

  • Interwiki("wikipedia", "Middleware(distributedapplications)", "Middleware(distributedapplications)") on Wikipedia
  • Interwiki("wikipedia", "Middleware", "Middleware") on Wikipedia

Term: MIME type

  • Glossary
  • WebMechanics

A MIME type (now properly called "media type", but also sometimes "content type") is a string sent along with a file indicating the type of the file (describing the content format, for example, a sound file might be labeled audio/ogg, or an image file image/png).

It serves the same purpose as filename extensions traditionally do on Windows. The name originates from the glossary("mime","MIME") standard originally used in E-Mail.

See also

Term: mime

  • Beginner
  • Glossary
  • Infrastructure
  • MIME

MIME "Multipurpose internet mail extensions" is a standard to describe documents in other forms beside ASCII text, e.g. audio, video and images. Initially used for E-Mail attachments, it has become the de facto standard to define types of documents anywhere.

See also MIME-Type

See also

Term: minification

  • Glossary
  • Performance
  • Reference
  • Web Performance

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.

Term: MitM

  • Glossary
  • Security

A manipulator-in-the-middle attack (MitM) intercepts a communication between two systems. For example, a Wi-Fi router can be compromised.

Comparing this to physical mail: If you're writing letters to each other, the mail carrier can intercept each letter you mail. They open it, read it, eventually modify it, and then repackage the letter and only then send it to whom you intended to sent the letter for. The original recipient would then mail you a letter back, and the mail carrier would again open the letter, read it, eventually modify it, repackage it, and give it to you. You wouldn't know there's a manipulator in the middle in your communication channel - the mail carrier is invisible to you and to your recipient.

In physical mail and in online communication, MITM attacks are tough to defend. A few tips:

  • Don't just ignore certificate warnings. You could be connecting to a phishing server or an imposter server.
  • Sensitive sites without HTTPS encryption on public Wi-Fi networks aren't trustworthy.
  • Check for HTTPS in your address bar and ensure encryption is in-place before logging in.

See also

Term: Mixin

  • CodingScripting
  • Glossary
  • Method
  • Mixin
  • Property

A mixin is a Glossary("class") (interface, in WebAPI spec terms) in which some or all of its Glossary("method", "methods") and/or Glossary("property", "properties") are unimplemented, requiring that another Glossary("class") or Glossary("interface") provide the missing implementations.

The new class or interface then includes both the properties and methods from the mixin as well as those it defines itself. All of the methods and properties are used exactly the same regardless of whether they're implemented in the mixin or the interface or class that implements the mixin.

The advantage of mixins is that they can be used to simplify the design of APIs in which multiple interfaces need to include the same methods and properties.

For example, the WindowOrWorkerGlobalScope mixin is used to provide methods and properties that need to be available on both the domxref("Window") and domxref("WorkerGlobalScope") interfaces. The mixin is implemented by both of those interfaces.

See also

Term: Mobile First

  • Design
  • Glossary
  • Layout
  • Layout mobile

Mobile first, a form of Glossary("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.

Term: Modem

  • Infrastructure
  • Navigation

A modem ("modulator-demodulator") is a device that converts digital information to analog signals and vice-versa, for sending data through networks.

Different kinds are used for different networks: DSL modems for telephone wires, WiFi modems for short-range wireless radio signals, 3G modems for cellular data towers, and so on.

Modems are different from Glossary("Router","routers"), but many companies sell modems combined with routers.

See also

  • Interwiki("wikipedia", "Modem") on Wikipedia

Term: Modularity

  • CodingScripting
  • Glossary

The term Modularity refers to the degree to which a system's components may be separated and recombined, it is also division of a software package into logical units. The advantage of a modular system is that one can reason the parts independently

See also

  • Interwiki("wikipedia", "Modularity") on Wikipedia

Term: Mozilla Firefox

  • Browser
  • Firefox
  • Glossary
  • Infrastructure
  • Mozilla
  • Mozilla Firefox

Mozilla Firefox is a free open-source Glossary("browser") whose development is overseen by the Mozilla Corporation. Firefox runs on Windows, OS X, Linux, and Android.

First released in November 2004, Firefox is completely customizable with themes, plug-ins, and add-ons. Firefox uses glossary("Gecko") to render webpages, and implements both current and upcoming glossary("world wide web", "Web") standards.

See also

Term: Mutable

  • CodingScripting
  • Glossary
  • NeedsContent

Mutable is a type of variable that can be changed. In glossary("JavaScript"), only Glossary("Object","objects") and Glossary("Array","arrays") are mutable, not Glossary("primitive", "primitive values").

(You can make a variable name point to a new value, but the previous value is still held in memory. Hence the need for garbage collection.)

A mutable object is an object whose state can be modified after it is created.

Immutables are the objects whose state cannot be changed once the object is created.

Strings and Numbers are Immutable. Lets understand this with an example:

var immutableString = "Hello";

// In the above code, a new object with string value is created.

immutableString = immutableString + "World";

// We are now appending "World" to the existing value.

On appending the "immutableString" with a string value, following events occur:

  1. Existing value of "immutableString" is retrieved
  2. "World" is appended to the existing value of "immutableString"
  3. The resultant value is then allocated to a new block of memory
  4. "immutableString" object now points to the newly created memory space
  5. Previously created memory space is now available for garbage collection.

See also

  • Interwiki("wikipedia", "Immutable object") on Wikipedia

Term: MVC

  • Glossary
  • Infrastructure
  • Intro
  • MVC
  • Model View Controller

MVC (Model-View-Controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. It emphasizes a separation between the software's business logic and display. This "separation of concerns" provides for a better division of labor and improved maintenance. Some other design patterns are based on MVC, such as MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), and MVW (Model-View-Whatever).

The three parts of the MVC software-design pattern can be described as follows:

  1. Model: Manages data and business logic.
  2. View: Handles layout and display.
  3. Controller: Routes commands to the model and view parts.

Model View Controller example

Imagine a simple shopping list app. All we want is a list of the name, quantity and price of each item we need to buy this week. Below we'll describe how we could implement some of this functionality using MVC.

Diagram to show the different parts of the mvc architecture.

The Model

The model defines what data the app should contain. If the state of this data changes, then the model will usually notify the view (so the display can change as needed) and sometimes the controller (if different logic is needed to control the updated view).

Going back to our shopping list app, the model would specify what data the list items should contain — item, price, etc. — and what list items are already present.

The View

The view defines how the app's data should be displayed.

In our shopping list app, the view would define how the list is presented to the user, and receive the data to display from the model.

The Controller

The controller contains logic that updates the model and/or view in response to input from the users of the app.

So for example, our shopping list could have input forms and buttons that allow us to add or delete items. These actions require the model to be updated, so the input is sent to the controller, which then manipulates the model as appropriate, which then sends updated data to the view.

You might however also want to just update the view to display the data in a different format, e.g., change the item order to alphabetical, or lowest to highest price. In this case the controller could handle this directly without needing to update the model.

MVC on the web

As a web developer, this pattern will probably be quite familiar even if you've never consciously used it before. Your data model is probably contained in some kind of database (be it a traditional server-side database like MySQL, or a client-side solution such as IndexedDB [en-US].) Your app's controlling code is probably written in HTML/JavaScript, and your user interface is probably written using HTML/CSS/whatever else you like. This sounds very much like MVC, but MVC makes these components follow a more rigid pattern.

In the early days of the Web, MVC architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views back to display in the browser. However, these days, more of the logic is pushed to the client with the advent of client-side data stores, and XMLHttpRequest allowing partial page updates as required.

Web frameworks such as AngularJS and Ember.js all implement an MVC architecture, albeit in slightly different ways.

See also

  • interwiki("wikipedia", "Model-view-controller") on Wikipedia

Term: Namespace

  • CodingScripting
  • Glossary
  • Operating System

Namespace is a context for identifiers, a logical grouping of names used in a program. Within the same context and same scope, an identifier must uniquely identify an entity.

In an operating system a directory is a namespace. Each file or subdirectory has a unique name, but one file may use the same name multiple times.

See also

  • Interwiki("wikipedia", "Namespace") on Wikipedia

Term: NaN

  • CodingScripting
  • Computing
  • Glossary
  • NaN

NaN (Not a Number) is a numeric Glossary("Type", "data type") that means an undefined value or value that cannot be represented, especially results of floating-point calculations.

For example, NaNs can represent infinity, result of division by zero, missing value, or the square root of a negative (which is imaginary, whereas a floating-point number is real).

Practically speaking, if I divide two variables in a glossary("JavaScript") program, the result may be NaN, which is predefined in JavaScript as "undefined". Hence this division may break the program. Now, if this computation was a small part of a much larger algorithm, it would be really painful to figure out where the error actually occurs. Fortunately, since the result will be NaN and I know my divisor may turn out to be 0, I can set up testing conditions that prevent any such computations in the first place or notify me of where they happen.

See also

Term: NAT

  • Beginner
  • Glossary
  • Infrastructure
  • WebMechanics
  • WebRTC

NAT (Network Address Translation) is a technique for letting multiple computers share an IP address. NAT assigns unique addresses to each computer on the local network and adjusts incoming/outgoing network traffic to send data to the right place.

See also

Term: Native

  • CodingScripting
  • Glossary

A native application has been compiled to run on the hardware/software environment that comprises the targeted architecture.

An example of a native Android app would be a mobile application written in Java using the Android toolchain.

On the other hand, a Web App that runs inside a browser is not native — it is run in the web browser, which sits on top of the native environment, not the native environment itself.

See also

  • Interwiki("wikipedia", "Native (computing)") on Wikipedia

Term: Navigation directive

  • CSP
  • HTTP
  • Security

Glossary("CSP") navigation directives are used in a HTTPHeader("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 CSP("default-src") directive.

See Navigation directives for a complete list.

See also

Term: Netscape Navigator

  • Browser
  • Glossary
  • Navigation
  • Netscape
  • Netscape Navigator

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

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

See also

  • Interwiki("wikipedia", "Netscape Navigator") on Wikipedia

Term: Network throttling

  • Glossary
  • RUM
  • Reference
  • Synthetic monitoring
  • Web Performance

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. wifi, good 3G, 2G...)

See also

Term: Node (networking)

  • Glossary
  • Infrastructure

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.

See also

  • Interwiki("wikipedia", "Node (networking)", "Node") on Wikipedia

Term: NNTP

  • Glossary
  • Infrastructure

NNTP (Network News Transfer Protocol) is a Glossary("protocol") used to transfer Glossary("Usenet") messages from client to server or between servers.

See also

  • Interwiki("wikipedia", "Network_News_Transfer_Protocol", "NNTP") at Wikipedia
  • From the IETF: RFC 3977 about NNTP (2006)

Term: Node.js

  • Glossary
  • Infrastructure
  • JavaScript
  • node.js

Node.js is a cross-platform Glossary("JavaScript") runtime environment that allows developers to build server-side and network applications with JavaScript.

Node Package Manager (npm)

npm is bundled with Node.js. It runs on the command line as the command npm. It is a package manager that downloads packages into a node_modules folder. You call the downloaded packages through const libraryModule = require("libraryname").

See also

Term: Node

  • Disambiguation
  • Glossary

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

_GlossaryDisambiguation}}

Another use of the word is when talking about Glossary("Node.js")

Term: non-normative

  • Glossary
  • Infrastructure
  • Specification
  • Standardization

Software Glossary("specification", "specifications") often contains information marked as non-normative or informative, which means that those are provided there for the purpose of helping the readers to understand the specification better or to show an example or a best practice, and not needed to be followed as a rule. Sections that contain official part of the specification that must be followed are often marked as Glossary("normative", "normative").

See also

Term: Normative

  • Glossary
  • Infrastructure
  • Specification
  • Standardization

Normative is a word commonly used in software Glossary("specification", "specifications") to denote sections that are standardized and must be followed as a rule. Specifications might also contain sections that are marked as _Glossary("non-normative")_ or _informative_, which means those are provided there for the purpose of helping the reader understand the specifications better or to showcase an example or best practice, which need not be followed as a rule.

See also

Term: 'Null'

  • CodingScripting
  • Glossary

In computer science, a null value represents a reference that points, generally intentionally, to a nonexistent or invalid glossary("object") or address. The meaning of a null reference varies among language implementations.

In Glossary("JavaScript"), null is marked as one of the Glossary("Primitive", "primitive values"), because its behavior is seemingly primitive.

But in certain cases, null is not as "primitive" as it first seems! Every Object is derived from null value, and therefore typeof operator returns object for it:

//
typeof null === 'object'; // true

See also

  • JavaScript data types

  • The JavaScript global object: jsxref("null")

  • Interwiki("wikipedia", "Null pointer") on Wikipedia

  • Glossary

    • Glossary("JavaScript")
    • Glossary("string")
    • Glossary("number")
    • Glossary("bigint")
    • Glossary("boolean")
    • Glossary("null")
    • Glossary("undefined")
    • Glossary("symbol")

Term: Nullish value

  • Glossary
  • JavaScript
  • 'Null'
  • Primitive
  • undefined

In JavaScript, a nullish value is the value which is either JSxRef("null") or JSxRef("undefined"). Nullish values are always falsy.

Term: Number

  • CodingScripting
  • Glossary
  • JavaScript

In Glossary("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

  • Interwiki("wikipedia", "Data type#Numeric_types", "Numeric types") on Wikipedia

  • The JavaScript type: Number

  • The JavaScript global object jsxref("Number")

  • Glossary:

    • Glossary("JavaScript")
    • Glossary("Primitive")

Term: Object reference

  • CodingScripting
  • Glossary

A link to an glossary("object"). Object references can be used exactly like the linked objects.

The concept of object references becomes clear when assigning the same object to more than one glossary("property"). Rather than holding a copy of the object, each assigned property holds object references that link to the same object, so that when the object changes all properties referring to the object reflect the change.

See also

  • Interwiki("wikipedia", "Reference (computer science)") on Wikipedia

Term: Object

  • CodingScripting
  • Glossary
  • Intro
  • Object

In JavaScript, objects can be seen as a collection of properties. With the object literal syntax, a limited set of properties are initialized; then properties can be added and removed. Property values can be values of any type, including other objects, which enables building complex data structures. Properties are identified using key values. A key value is either a Glossary("String", "String value") or a Glossary("Symbol", "Symbol value").

There are two types of object properties: The data property and the accessor property.

Note: It's important to recognize it's accessor property — not accessor method. We can give a JavaScript object class-like accessors by using a function as a value — but that doesn't make the object a class.

See also

Term: OOP

  • Beginner
  • CodingScripting
  • Glossary

OOP (Object-Oriented Programming) is an approach in programming in which data is encapsulated within glossary("object","objects") and the object itself is operated on, rather than its component parts.

glossary("JavaScript") is heavily object-oriented. It follows a prototype-based model (as opposed to class-based).

See also

Term: OpenGL

  • CodingScripting
  • Glossary
  • 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

  • Interwiki("wikipedia", "OpenGL") on Wikipedia
  • OpenGL

Term: OpenSSL

  • Glossary
  • Security

OpenSSL is an open-source implementation of glossary("SSL") and glossary("TLS").

See also

Term: Opera Browser

  • Browser
  • Glossary
  • Navigation
  • Opera
  • Opera Browser

Opera is the fifth most used web glossary("browser"), publicly released in 1996 and initially running on Windows only. Opera uses glossary("Blink") as its layout engine since 2013 (before that, glossary("Presto")). Opera also exists in mobile and tablet versions.

See also

Term: Operand

  • CodingScripting
  • Glossary

An operand is the part of an instruction representing the data manipulated by the glossary("operator"). For example, when you add two numbers, the numbers are the operand and "+" is the operator.

See also

  • Interwiki("wikipedia", "Operand") on Wikipedia

Term: Operator

  • CodingScripting
  • Glossary

Reserved syntax consisting of punctuation or alphanumeric characters that carries out built-in functionality. For example, in JavaScript the addition operator ("+") adds numbers together and concatenates strings, whereas the "not" operator ("!") negates an expression — for example making a true statement return false.

See also

Term: Origin

  • Glossary
  • Security
  • WebMechanics
  • origin

Web content's origin is defined by the scheme (protocol), hostname (domain), and port of the Glossary("URL") used to access it. Two objects have the same origin only when the scheme, hostname, and port all match.

Some operations are restricted to same-origin content, and this restriction can be lifted using Glossary("CORS").

Examples

These are same origin because they have the same scheme (http) and hostname (example.com), and the different file path does not matter:

  • http://example.com/app1/index.html
  • http://example.com/app2/index.html

These are same origin because a server delivers HTTP content through port 80 by default:

  • http://Example.com:80
  • http://example.com

These are not same origin because they use different schemes:

  • http://example.com/app1
  • https://example.com/app2

These are not same origin because they use different hostnames:

  • http://example.com
  • http://www.example.com
  • http://myapp.example.com

These are not same origin because they use different ports:

  • http://example.com
  • http://example.com:8080

See also

Term: OTA

  • Glossary
  • Infrastructure
  • Intro
  • OTA
  • Over the air
  • updates

Over The Air (OTA) refers to automatic updating of software on connected devices from a central server. All device owners receiving a given set of updates are on the same "channel", and each device often can access several channels (e.g. for production or engineering builds).

See also

  • Interwiki("wikipedia", "Over-the-air programming") on Wikipedia

Term: OWASP

  • Glossary
  • Security

OWASP (Open Web Application Security Project) is a non-profit organization and worldwide network that works for security in Free Software, especially on the Web.

See also

Term: P2P

  • Glossary
  • Infrastructure
  • Networking
  • P2P

P2P (Peer-to-peer) is a computer networking architecture in which all participating nodes (peers) have equal privileges and share the workload. P2P differs from a client-server network architecture, where multiple client nodes connect to centralized servers for services. P2P is commonly found in Blockchain Applications.

See also

  • P2P on Wikipedia

Term: PAC

  • CodingScripting
  • Glossary

A Proxy Auto-Configuration file (PAC file) is a file which contains a function, FindProxyForURL(), which is used by the browser to determine whether requests (including HTTP, HTTPS, and FTP) should go directly to the destination or if they need to be forwarded through a web proxy server.

//

function FindProxyForURL(url, host) {
    /* ... */
}

ret = FindProxyForURL(url, host);

See Proxy Auto-Configuration (PAC) file for details about how these are used and how to create new ones.

See also

Term: Packet

  • Glossary
  • Network packet
  • Packet
  • Reference
  • TCP
  • Web Performance
  • payload

A packet, or network packet, is a formatted chunk of data sent over a network. The main components of a network packet are the user data and control information. The user data is known as the payload. The control information is the information for delivering the payload. It consists of network addresses for the source and destination, sequencing information, and error detection codes and is generally found in packet headers and footer.

What a packet contains

Hop limit

A hop occurs when a packet is passed from one network to the next network. It is a field that is decreases by one each time a packet goes through, once it reaches 0 it has failed and the packet is discarded.

Over time the number packets can cause traversing within closed circuits, the number of packets circulating would build up and then ultimately lead to the networking in failing.

Error detection and correction

Error detection and correction are codes that are used to detect and apply corrections to the errors that occur when data is transmitted to the receiver. There are two types of error corrections backward and forward error correction. Backward error correction is when the receiver requests the sender to retransmit the entire data unit. Forward error correction is when the receiver uses the error-correcting code which automatically corrects the errors

At the transmitter, the calculation is performed before the packet is sent. When received at the destination, the checksum is recalculated, and compared with the one in the packet.

Priority

This field indicates which packet should have higher priority over the others. The high priority queue is emptied more quickly than lower priority queues when the network is congested.

Addresses

When routing network packets it requires two network addresses the source address of the sending host, and the destination address of the receiving host.

User Data - Payload

Payload is the data that is carried on behalf of an application. It is usually of variable length, up to a maximum that is set by the network protocol and sometimes the equipment on the route.

References used

Term: Page load time

  • Glossary
  • Timings
  • Web Performance
  • metrics
  • page load time

Page load time is the time it takes for a page to load, measured from navigation start to the start of the load event.

//
let time = performance.timing;

let pageloadtime = time.loadEventStart - time.navigationStart;

While page load time 'sounds' like the perfect web performance metric, it isn't. Load times can vary greatly between users depending on device capabilities, network conditions, and, to a lesser extent, distance from the server. The development environment, where page load time is measured, is likely an optimal experience, not reflective of your users' reality. In addition, web performance isn't just about when the load event happens. It's also about perceived performance, responsiveness, jank and jitter.

See also

Term: Page prediction

  • Glossary
  • Security
  • Web Performance
  • page prediction

Page Prediction is a browser feature or script which, when enabled, tells the browser to download resources the user is likely to visit before the user requests the content. Page prediction improves performance by enabling almost instant loading of predicted content. However, page prediction may also download content a user does not seek.

Some web applications include a prediction feature completing search text and address bar URLs based on browsing history and related searches. For example, as the user types in the address bar, the browser might send the current text in the address bar to the search engine before the user submits the request.

Although browser page prediction and prediction services enable faster page loads, they consume additional bandwidth. Also, pre-loaded websites and embedded content can set and read their cookies as if they were visited even if they weren't.

See also

Term: Parameter

  • CodingScripting
  • Glossary
  • JavaScript

A parameter is a named variable passed into a Glossary("function"). Parameter variables are used to import Glossary("argument","arguments") into functions.

For example:

//

function example(parameter) {
    console.log(parameter); // Output = foo
}

const argument = 'foo';

example(argument);

Note the difference between parameters and arguments:

  • Function parameters are the names listed in the function's definition.
  • Function Glossary("argument","arguments") are the real values passed to the function.
  • Parameters are initialized to the values of the arguments supplied.

Two kinds of parameters:

  • input parameters
    • : the most common kind; they pass values into functions. Depending on programming language, input parameters can be passed several ways (e.g., call-by-value, call-by-address, call-by-reference).
  • output/return parameters
    • : primarily return multiple values from a function, but not recommended since they cause confusion

See also

Term: Parent object

  • CodingScripting
  • Glossary
  • NeedsContent

The glossary("object") to which a given glossary("property") or glossary("method") belongs.

See also

Term: Parse

  • Browser
  • CSS
  • CodingScripting
  • Glossary
  • HTML
  • JavaScript
  • Web Performance

Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the glossary("JavaScript") engine inside browsers.

When the browser encounters CSS styles, it parses the text into the CSS Object Model (or glossary('CSSOM')), a data structure it then uses for styling layouts and painting. The browser then creates a render tree from both these structures to be able to paint the content to the screen. JavaScript is also downloaded, parsed, and then execute.

JavaScript parsing is done during glossary("compile time") or whenever the glossary("parser") is invoked, such as during a call to a method.

See also

Term: Parser

  • CodingScripting
  • Glossary

A parser is the module of a compiler or interpreter that glossary("parse","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

Term: Payload body

  • HTTP
  • HTTP Header

The HTTP message payload body is the information ("payload") part of the data that is sent in the HTTP Message Body (if any), prior to HTTPHeader("Transfer-Encoding","transfer encoding") being applied. If transfer encoding is not used, the payload body and message body are the same thing!

For example, in this response the message body contains only the payload body: "Mozilla Developer Network":

HTTP/1.1 200 OK
Content-Type: text/plain

Mozilla Developer Network

By contrast, the below response uses transfer encoding to encode the payload body into chunks. The payload body (information) sent is still "Mozilla Developer Network", but the message body includes additional data to separate the chunks:

HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked

7\r\n
Mozilla\r\n
9\r\n
Developer\r\n
7\r\n
Network\r\n
0\r\n
\r\n

For more information see RFC 7230, section 3.3: Message Body and RFC 7230, section 3.3.1: Transfer-Encoding.

Term: Payload header

  • Glossary
  • Payload header
  • Headers
  • WebMechanics

A payload header is an Glossary("HTTP_header", "HTTP header") that describes the payload information related to safe transport and reconstruction of the original resource Glossary("Representation header", "representation"), from one or more messages. This includes information like the length of the message payload, which part of the resource is carried in this payload (for a multi-part message), any encoding applied for transport, message integrity checks, etc.

Payload headers may be present in both HTTP request and response messages (i.e. in any message that is carrying payload data).

The payload headers include: HTTPHeader("Content-Length"), HTTPHeader("Content-Range"), HTTPHeader("Trailer"), and HTTPHeader("Transfer-Encoding").

See also

Term: PDF

  • Composing
  • Glossary
  • PDF
  • Portable Document Format

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

  • Interwiki("wikipedia", "Portable Document Format", "PDF") on Wikipedia

Term: Perceived performance

  • Glossary
  • Perceived Performance
  • Reference
  • Web Performance

Perceived performance is a measure of how fast, responsive, and reliable a website feels to its users. The perception of how well a site is performing can have more impact on the user experience that the actual load and response times.

See also

Term: Percent-encoding

  • Glossary
  • WebMechanics

Percent-encoding is a mechanism to encode 8-bit characters that have specific meaning in the context of Glossary("URL", "URLs"). It is sometimes called URL encoding. The encoding consists of substitution: A '%' followed by the hexadecimal representation of the ASCII value of the replace character.

Special characters needing encoding are: ':', '/', '?', '#', '[', ']', '@', '!', '$', '&', "'", '(', ')', '*', '+', ',', ';', '=', as well as '%' itself. Other characters don't need to be encoded, though they could.

Character Encoding
':' %3A
'/' %2F
'?' %3F
'#' %23
'[' %5B
']' %5D
'@' %40
'!' %21
'$' %24
'&' %26
"'" %27
'(' %28
')' %29
'*' %2A
'+' %2B
',' %2C
';' %3B
'=' %3D
'%' %25
' ' %20 or +

Depending on the context, the character ' ' is translated to a '+' (like in the percent-encoding version used in an application/x-www-form-urlencoded message), or in '%20' like on URLs.

See also

  • Definition of percent-encoding in Wikipedia.
  • RFC(3986), section 2.1, where this encoding is defined.

Term: PHP

  • Beginner
  • CodingScripting
  • Glossary
  • Infrastructure
  • Intro
  • PHP

PHP (a recursive initialism for PHP: Hypertext Preprocessor) is an open-source server-side scripting language that can be embedded into HTML to build web applications and dynamic websites.

Examples

Basic syntax

  // start of PHP code
<?php
     // PHP code goes here
 ?>
// end of PHP code

Printing data on screen

<?php
   echo "Hello World!";
?>

PHP variables

<?php
 // variables
 $nome='Danilo';
 $sobrenome='Santos';
 $pais='Brasil';
 $email='danilocarsan@gmailcom';

 // printing the variables
 echo $nome;
 echo $sobrenome;
 echo $pais;
 echo $email;
?>

See also

Term: Pixel

  • Design
  • Glossary
  • Graphics

A pixel is the smallest building block of a graphical display like a computer screen.

Display resolution is expressed in the unit of pixels. eg: A "800 x 600" pixel resolution means that 800 pixels can be displayed in width and 600 pixels in height.

See also

Term: Placeholder names

  • Cryptography
  • Glossary
  • Security

Placeholder names are commonly used in cryptography to indicate the participants in a conversation, without resorting to terminology such as "Party A," "eavesdropper," and "malicious attacker."

The most commonly used names are:

  • Alice and Bob, two parties who want to send messages to each other, occasionally joined by Carol, a third participant
  • Eve, a passive attacker who is eavesdropping on Alice and Bob's conversation
  • Mallory, an active attacker ("man-in-the-middle") who is able to modify their conversation and replay old messages

Term: Plaintext

  • Cryptography
  • Glossary
  • Security

Plaintext refers to information that is being used as an input to an Glossary("encryption") Glossary("algorithm"), or to Glossary("ciphertext") that has been decrypted.

It is frequently used interchangeably with the term cleartext, which more loosely refers to any information, such as a text document, image, etc., that has not been encrypted and can be read by a human or computer without additional processing.

Term: Plugin

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

The most well-known and widely used plugin was the Adobe Flash player, which enabled browsers to run Glossary("Adobe Flash") content.

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

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

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

See also

Term: PNG

  • Beginner
  • Composing
  • Glossary
  • Infrastructure
  • PNG

PNG (Portable Network Graphics) is a graphics file format that supports lossless data compression.

See also

Term: Polyfill

  • Browser Support
  • CodingScripting
  • Glossary
  • JavaScript
  • 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 cssxref("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

Term: Polymorphism

  • CodingScripting
  • Glossary

Polymorphism is the presentation of one interface for multiple data types.

For example, integers, floats, and doubles are implicitly polymorphic: regardless of their different types, they can all be added, subtracted, multiplied, and so on.

In the case of glossary("OOP"), by making the glossary("class") responsible for its code as well as its own data, polymorphism can be achieved in that each class has its own glossary("function") that (once called) behaves properly for any glossary("object").

See also

Term: POP3

  • Beginner
  • Glossary
  • Infrastructure

POP3 (Post Office Protocol) is a very common glossary("protocol") for getting emails from a mail server over a glossary("TCP") connection. POP3 does not support folders, unlike the more recent Glossary("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

  • Interwiki("wikipedia", "Post Office Protocol", "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:

    • Glossary("IMAP")

Term: Port

  • Glossary
  • Intro
  • Security
  • computer network
  • port

For a computer connected to a network with an Glossary("IP address"), a port is a communication endpoint. Ports are designated by numbers, and below 1024 each port is associated by default with a specific Glossary("protocol").

For example, the default port for the Glossary("HTTP") protocol is 80 and the default port for the HTTPS protocol is 443, so a Glossary("HTTP") server waits for requests on those ports. Each Internet protocol is associated with a default port: Glossary("SMTP") (25), Glossary("POP") (110), Glossary("IMAP") (143), Glossary("IRC") (194), and so on.

See also

  • Interwiki("wikipedia", "Port (computer networking)" , "Port") on Wikipedia

Term: Prefetch

  • Glossary
  • Prefetch
  • Reference
  • Web Performance

Prefetching is when content is downloaded in the background, this is based on the assumption that the content will likely be requested, enabling the content to load instantly if and when the user requests it. The content is downloaded and cached for anticipated future use without the user making an explicit request for it.

DNS Prefetching

Domain lookups can be slow, especially with network latency on mobile phones. They are most relevant when there are a plethora of links to external websites that may be clicked on, like search engine results, DNS prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time.

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

Link prefetching

Link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links. If the user decides to click on one of the links, then the page will be rendered instantly as the content has already been downloaded.

The prefetch hints are sent in HTTP headers:

Link: ; rel=dns-prefetch,
      ; as=script; rel=preload,
      ; rel=prerender,
      ; as=style; rel=preload

Prefetch attribute value

Browsers will prefetch content when the prefetch <link> tag directs it to, giving the developer control over what resources should be prefetched.

 <link rel="prefetch" href="https://www.example.com/solutions" />

See also

Term: Preflight request

  • CORS
  • Glossary
  • HTTP
  • Preflight
  • request

A CORS preflight request is a Glossary("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 HTTPMethod("OPTIONS") request, using three HTTP request headers: HTTPHeader("Access-Control-Request-Method"), HTTPHeader("Access-Control-Request-Headers"), and the HTTPHeader("Origin") header.

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 HTTPMethod("DELETE") request, before sending a DELETE request, by using a preflight request:

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 HTTPHeader("Access-Control-Allow-Methods") response header, which lists DELETE:

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 Glossary("URL") using HTTPHeader("Access-Control-Max-Age") header like in the above example.

See also

  • Glossary("CORS")
  • HTTPMethod("OPTIONS")

Term: Prerender

  • Glossary
  • Prefetch
  • Security
  • Web Performance
  • prerender

With prerendering, the content is prefetched and then rendered in the background by the browser as if the content had been rendered into an invisible separate tab. When the user navigates to the prerendered content, the current content is replaced by the prerendered content instantly.

<link rel="prerender" href="https://example.com/content/to/prerender" />

See also

Term: Presto

  • Glossary
  • Infrastructure

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

See also

Term: Primitive

  • CodingScripting
  • Glossary
  • JavaScript

In Glossary("JavaScript"), a primitive (primitive value, primitive data type) is data that is not an Glossary("object") and has no glossary("method","methods"). There are 7 primitive data types: Glossary("string"), Glossary("number"), Glossary("bigint"), Glossary("boolean"), Glossary("undefined"), Glossary("symbol"), and Glossary("null").

Most of the time, a primitive value is represented directly at the lowest level of the language implementation.

All primitives are immutable, i.e., they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered.

Example

This example will help you understand that primitive values are immutable.

JavaScript

//
// Using a string method doesn't mutate the string
var bar = 'baz';
console.log(bar); // baz
bar.toUpperCase();
console.log(bar); // baz

// Using an array method mutates the array
var foo = [];
console.log(foo); // []
foo.push('plugh');
console.log(foo); // ["plugh"]

// Assignment gives the primitive a new (not a mutated) value
bar = bar.toUpperCase(); // BAZ

A primitive can be replaced, but it can't be directly altered.

Primitive wrapper objects in JavaScript

Except for null and undefined, all primitive values have object equivalents that wrap around the primitive values:

  • jsxref("String") for the string primitive.
  • jsxref("Number") for the number primitive.
  • jsxref("BigInt") for the bigint primitive.
  • jsxref("Boolean") for the boolean primitive.
  • jsxref("Symbol") for the symbol primitive.

The wrapper's valueOf() method returns the primitive value.

See also

  • JavaScript data types

  • Interwiki("wikipedia", "Primitive data type") (Wikipedia)

  • Glossary

    • Glossary("JavaScript")
    • Glossary("string")
    • Glossary("number")
    • Glossary("bigint")
    • Glossary("boolean")
    • Glossary("null")
    • Glossary("undefined")
    • Glossary("symbol")

Term: privileged code

  • privileged

Privileged code - Javascript code of your extension. For example, code in content scripts.

Non-privileged - Javascript on web-page.

Term: Privileged

  • Glossary
  • Security

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

Term: Progressive Enhancement

  • Accessibility
  • Design
  • Glossary

Progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code.

The word progressive in progressive enhancement means creating a design that achieves a simpler-but-still-usable experience for users of older browsers and devices with limited capabilities, while at the same time being a design that progresses the user experience up to a more-compelling, fully-featured experience for users of newer browsers and devices with richer capabilities.

Feature detection is generally used to determine whether browsers can handle more modern functionality, while polyfills are often used to add missing features with JavaScript.

Special notice should be taken of accessibility. Acceptable alternatives should be provided where possible.

Progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents. Glossary("Graceful degradation") is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement. In reality both approaches are valid and can often complement one another.

See also

Term: Progressive web apps

  • Composing
  • Glossary
  • Progressive web apps

Progressive web apps is a term used to describe the modern state of web app development. This involves taking standard web sites/apps that enjoy all the best parts of the Web — such as discoverability via search engines, being linkable via Glossary("URL")s, and working across multiple form factors — and supercharging them with modern APIs (such as Service Workers and Push) and features that confer other benefits more commonly attributed to native apps.

These features include being installable, working offline, and being easy to sync with and re-engage the user from the server.

See also

Term: Promise

  • Glossary
  • Promise
  • Promises
  • asynchronous

A jsxref("Promise") is an Glossary("object") that's returned by a Glossary("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 Glossary("asynchronous", "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

Term: Property

  • Disambiguation
  • Glossary

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

_GlossaryDisambiguation}}

Term: Protocol

  • Glossary
  • Infrastructure
  • Protocols

A protocol is a system of rules that define how data is exchanged within or between computers. Communications between devices require that the devices agree on the format of the data that is being exchanged. The set of rules that defines a format is called a protocol.

See also

Term: Prototype-based programming

  • CodingScripting
  • Glossary

Prototype-based programming is a style of Glossary("OOP", "object-oriented programming") in which Glossary('Class', '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 Glossary('Object', 'object') without first defining its Glossary('Class', 'class').

See also

  • Interwiki("wikipedia", "Prototype-based programming", "Prototype-based programming") on Wikipedia

Term: Prototype

  • Apps
  • Composing
  • Glossary

A prototype is a model that displays the appearance and behavior of an application or product early in the development lifecycle.

See Inheritance and the prototype chain

See also

  • Interwiki("wikipedia", "Software Prototyping") on Wikipedia

Term: Proxy server

  • Glossary
  • Proxy
  • Server

A proxy server is an intermediate program or computer used when navigating through different networks of the Internet. They facilitate access to content on the World Wide Web. A proxy intercepts requests and serves back responses; it may forward the requests, or not (for example in the case of a cache), and it may modify it (for example changing its headers, at the boundary between two networks).

A proxy can be on the user's local computer, or anywhere between the user's computer and a destination server on the Internet. In general there are two main types of proxy servers:

  • A forward proxy that handles requests from and to anywhere on the Internet.
  • A reverse proxy taking requests from the Internet and forwarding them to servers in an internal network.

See also

Term: Pseudo-class

  • CSS
  • CodingScripting
  • Glossary
  • Selector

In CSS, a pseudo-class selector targets elements depending on their state rather than on information from the document tree. For example, the selector a_ cssxref(":visited") }} applies styles only to links that the user has already followed.

See also

Term: Pseudo-element

  • CSS
  • CodingScripting
  • Glossary

In CSS, a pseudo-element selector applies styles to parts of your document content in scenarios where there isn't a specific HTML element to select. For example, rather than putting the first letter of each paragraph in its own element, you can style them all with p_ Cssxref("::first-letter") }}.

See also

Term: Pseudocode

  • CodingScripting
  • Glossary
  • Pseudocode

Pseudocode refers to code-like syntax that is generally used to indicate to humans how some code syntax works, or illustrate the design of an item of code architecture. It won't work if you try to run it as code.

See also

  • interwiki("wikipedia", "Pseudocode", "Pseudocode") on Wikipedia.

Term: Public-key cryptography

  • Cryptography
  • Glossary
  • Public-key cryptography
  • Security

Public-key cryptography — or asymmetric cryptography — is a cryptographic system in which keys come in pairs. The transformation performed by one of the keys can only be undone with the other key. One key (the private key) is kept secret while the other is made public.

When used for digital signatures, the private key is used to sign and the public key to verify. This means that anyone can verify a signature, but only the owner of the corresponding private key could have generated it.

When used for encryption, the public key is used to encrypt and the private key is used to decrypt. This gives public-key encryption systems an advantage over symmetric encryption systems in that the encryption key can be made public. Anyone could encrypt a message to the owner of the private key, but only the owner of the private key could decrypt it. However, they are typically much slower than symmetric algorithms and the size of message they can encrypt is proportional to the size of the key, so they do not scale well for long messages.

As a result, it's common for an encryption system to use a symmetric algorithm to encrypt the message, then a public-key system to encrypt the symmetric key. This arrangement can confer the benefits of both systems.

Commonly used public-key cryptosystems are RSA (for both signing and encryption), DSA (for signing) and Diffie-Hellman (for key agreement).

See also

Term: Python

  • CodingScripting
  • Glossary
  • Language
  • Python
  • programming

Python is a high level general-purpose programming language. It uses a multi-paradigm approach, meaning it supports procedural, object-oriented, and some functional programming constructs.

It was created by Guido van Rossum as a successor to another language (called ABC) between 1985 and 1990, and is currently used on a large array of domains like web development, desktop applications, data science, DevOps, and automation/productivity.

Python is developed under an OSI-approved open source license, making it freely usable and distributable, even for commercial use. Python's license is administered by the Python Software Foundation.

See also

Term: Quality values

  • Glossary
  • WebMechanics

Quality values, or q-values and q-factors, are used to describe the order of priority of values in a comma-separated list. It is a special syntax allowed in some HTTP headers and in HTML.

The importance of a value is marked by the suffix ';q=' immediately followed by a value between 0 and 1 included, with up to three decimal digits, the highest value denoting the highest priority. When not present, the default value is 1.

Examples

The following syntax

text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

indicates the order of priority:

Value Priority
text/html and application/xhtml+xml 1.0
application/xml 0.9
*/* 0.8

If there is no priority defined for the first two values, the order in the list is irrelevant. Nevertheless, with the same quality, more specific values have priority over less specific ones:

text/html;q=0.8,text/*;q=0.8,*/*;q=0.8
Value Priority
text/html 0.8 (but totally specified)
text/* 0.8 (partially specified)
*/* 0.8 (not specified)

Some syntax, like the one of HTTPHeader("Accept"), allow additional specifiers like text/html;level=1. These increase the specificity of the value. Their use is extremely rare.

Browser-specific information

Firefox

Starting with Firefox 18, the quality factor values are clamped to 2 decimal places. They used to be clamped to only 1 decimal place in earlier versions (bug(672448)).

More information

Term: Quaternion

  • Definition
  • Glossary
  • Orientation
  • Quaternion
  • WebXR
  • rotation

A quaternion is the quotient of two 3D vectors and is used in 3D graphics and in accelerometer-based sensors to represent orientation or rotational data.

While mathematical quaternions are more involved than this, the unit quaternions (or rotational quaternions) used to represent rotation while using WebGL or WebXR, for example, are represented using the same syntax as a 3D point. As such, the type domxref("DOMPoint") (or domxref("DOMPointReadOnly")) is used to store quaternions.

See also

  • interwiki("wikipedia", "Quaternions and spatial rotation") on Wikipedia
  • interwiki("wikipedia", "Quaternion") on Wikipedia
  • domxref("XRRigidTransform.orientation") in the WebXR Device API reference

Term: QUIC

  • Glossary
  • HTTP
  • QUIC
  • Reference
  • Web Performance

Quick UDP Internet Connection, or QUIC, is an experimental multiplexed transport protocol implemented on UDP. It was developed by Google as a way to experiment with ways to improve TCP and web application delivery.

As TCP is built into the kernel of many operating systems being able to experiment with changes, test them and implement modifications is an extremely slow process. The creation of QUIC allows developers to conduct experiments and try new things faster.

QUIC was designed to support the semantics of HTTP/2. It provides multiplexing, flow control, security and congestion control.

Key features of QUIC include:

  • Reduction in connection establishment time.
  • Improved congestion control.
  • Multiplexing without head-of-line blocking.
  • Forward error correction.
  • Connection migration.

There is limited browser and server support for QUIC today.

Resources

See also

Term: RAIL

  • Glossary
  • RAIL
  • Timings
  • Web Performance

RAIL, an acronym for Response, Animation, Idle, and Load, is a performance model originated by the Google Chrome team in 2015, focused on user experience and performance within the browser. The performance mantra of RAIL is "Focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." There are 4 stages of interaction: page load, idle, response to input, and scrolling and animation. In acronym order, the main tenets are:

  • Response
    • : Respond to users immediately, acknowledging any user input in 100ms or less.
  • Animation
    • : When animating, render each frame in under 16ms, aiming for consistency and avoiding jank.
  • Idle
    • : When using the main JavaScript thread, work in chunks for less than 50ms to free up the thread for user interactions.
  • Load
    • : Deliver interactive content in less than 1 second.

See also

Term: Raster image

  • CUR
  • Documents
  • Glossary
  • ICO
  • JPEG
  • PNG
  • gif
  • raster image

A raster image is an image file defined as a grid of pixels. They're also referred to as bitmaps. Common raster image formats on the Web are JPEG, PNG, GIF, and ICO.

Raster image files usually contain one set of dimensions, but the ICO and CUR formats, used for favicons and CSS cursor images, can contain multiple sizes.

See also

  • glossary("Vector images")

Term: RDF

  • CodingScripting
  • Glossary
  • Infrastructure
  • OpenPractices
  • WebMechanics

RDF (Resource Description Framework) is a language developed by W3C for representing information on the World Wide Web, such as Webpages. RDF provides a standard way of encoding resource information so that it can be exchanged in a fully automated way between applications.

See also

  • Interwiki("wikipedia", "Resource Description Framework") on Wikipedia

Term: Real User Monitoring (RUM)

  • Glossary
  • RUM
  • Reference
  • Web Performance

Real User Monitoring or RUM measures the performance of a page from real users' machines. Generally, a third party script injects a script on each page to measure and report page load data for every request made. This technique monitors an application's actual user interactions. In RUM, the third party script collects performance metrics from the real users' browsers. RUM helps identify how an application is being used, including the geographic distribution of users and the impact of that distribution on the end user experience.

See also

Term: Recursion

  • CodingScripting
  • Glossary

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

Examples

Recursive function calls itself until condition met

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

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

recurse(10)

The output will look like this:

10 9 8 7 6 5 4 3 2 1

See also

Term: Reference

  • CodingScripting
  • Glossary
  • NeedsContent

In the context of glossary("object","objects"), this is an glossary("object reference"). On MDN, we could be talking about the glossary("JavaScript") reference itself.

In computing, a reference is a value that indirectly accesses data to retrieve a variable or a record in a computer's memory or other storage device.

See also

  • Interwiki("wikipedia", "Reference (computer science)") on Wikipedia

Term: Reflow

  • Glossary
  • WebMechanics

Reflow happens when a glossary("browser") must process and draw part or all of a webpage again, such as after an update on an interactive site.

See also

Term: Regular expression

  • CodingScripting
  • Glossary
  • Regular Expression

Regular expressions (or regex) are rules that govern which sequences of characters come up in a search.

Regular expressions are implemented in various languages, but the best-known implementation is the Perl Implementation, which has given rise to its own ecosystem of implementations called PCRE (Perl Compatible Regular Expression). On the Web, glossary("JavaScript") provides another regex implementation through the jsxref("RegExp") object.

See also

Term: Rendering engine

  • Glossary
  • Infrastructure
  • Rendering engine
  • Web browser engine

A rendering engine is software that draws text and images on the screen. The engine draws structured text from a document (often glossary("HTML")), and formats it properly based on the given style declarations (often given in glossary("CSS")). Examples of layout engines: glossary("Blink"), glossary("Gecko"), EdgeHTML, glossary("WebKit").

See also

Term: Repo

  • Glossary
  • Infrastructure
  • Intro
  • Repo
  • Repository

In a revision control system like Glossary("Git") or Glossary("SVN"), a repo (i.e. "repository") is a place that hosts an application's code source, together with various metadata.

See also

Term: Reporting directive

  • CSP
  • HTTP
  • Policy
  • Reporting
  • Security
  • Violation

Glossary("CSP") reporting directives are used in a HTTPHeader("Content-Security-Policy") header and control the reporting process of CSP violations.

See Reporting directives for a complete list.

See also

  • Glossary

    • Glossary("CSP")
    • Glossary("Fetch directive")
    • Glossary("Document directive")
    • Glossary("Navigation directive")

  • Reference

    • https://www.w3.org/TR/CSP/#directives-reporting
    • HTTPHeader("Content-Security-Policy/upgrade-insecure-requests", "upgrade-insecure-requests")
    • HTTPHeader("Content-Security-Policy/block-all-mixed-content", "block-all-mixed-content")
    • HTTPHeader("Content-Security-Policy/require-sri-for", "require-sri-for") _deprecated_inline}}
    • HTTPHeader("Content-Security-Policy")

Term: Representation header

  • Glossary
  • WebMechanics

A representation header is an glossary("HTTP_header", "HTTP header") that describes the particular representation of the resource sent in an HTTP message body.

Representations are different forms of a particular resource. For example, the same data might be formatted as a particular media type such as XML or JSON, localised to a particular written language or geographical region, and/or compressed or otherwise encoded for transmission. The underlying resource is the same in each case, but its representation is different.

Clients specify the formats that they prefer to be sent during content negotiation (using Accept-* headers), and the representation headers tell the client the format of the selected representation they actually received.

Representation headers may be present in both HTTP request and response messages. If sent as a response to a HEAD request, they describe the body content that would be selected if the resource was actually requested.

Representation headers include: HTTPHeader("Content-Type"), HTTPHeader("Content-Encoding"), HTTPHeader("Content-Language"), and HTTPHeader("Content-Location").

See also

Term: Request header

  • Glossary
  • WebMechanics

A request header is an glossary("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 HTTPHeader("Accept", "Accept-*") headers indicate the allowed and preferred formats of the response. Other headers can be used to supply authentication credentials (e.g. HTTPHeader("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 HTTPHeader("Content-Type") header is referred to as a glossary("representation header").

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

The HTTP message below shows a few request headers after a HTTPMethod("GET") request:

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

Term: Resource Timing

  • Glossary
  • Timings
  • Web Performance

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

Term: Response header

  • Glossary
  • WebMechanics

A response header is an glossary("HTTP header") that can be used in an HTTP response and that doesn't relate to the content of the message. Response headers, like HTTPHeader("Age"), HTTPHeader("Location") or HTTPHeader("Server") are used to give a more detailed context of the response.

Not all headers appearing in a response are categorized as response headers by the specification. For example, the HTTPHeader("Content-Type") header is a glossary("representation header") indicating the original type of data in the body of the response message (prior to the encoding in the HTTPHeader("Content-Encoding") representation header being applied). However, "conversationally" all headers are usually referred to as response headers in a response message.

The following shows a few response and representation headers after a HTTPMethod("GET") request.

200 OK
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY

See also

  • List of all HTTP headers

  • Glossary

    • Glossary("Representation header")
    • Glossary("HTTP header")
    • Glossary("Response header")
    • Glossary("Fetch metadata response header")
    • Glossary("Request header")

Term: Responsive web design

  • Accessibility
  • Design
  • Glossary
  • Responsive web design

Responsive Web Design (RWD) is a Web development concept focusing on making sites look and behave optimally on all personal computing devices, from desktop to mobile.

See also

Term: REST

  • Architecture
  • Beginner
  • Glossary
  • HTTP
  • Rest
  • WebMechanics

REST (Representational State Transfer) refers to a group of software architecture design constraints that bring about efficient, reliable and scalable distributed systems.

The basic idea of REST is that a resource, e.g. a document, is transferred via well-recognized, language-agnostic, and reliably standardized client/server interactions. Services are deemed RESTful when they adhere to these constraints.

HTTP APIs in general are sometimes colloquially referred to as RESTful APIs, RESTful services, or REST services, although they don't necessarily adhere to all REST constraints. Beginners can assume a REST API means an HTTP service that can be called using standard web libraries and tools.

See also

Term: RGB

  • Beginner
  • CSS
  • Design
  • Guide

Red Green Blue (RGB) is a color model that represents colors as mixtures of three underlying components (or channels), namely, red, green, and blue. Each color is described by a sequence of three numbers (typically between 0.0 and 1.0, or between 0 and 255) that represent the different intensities (or contributions) of red, green, and blue, in determining the final color.

There are many ways to describe the RGB components of a color. In Glossary("CSS") they can be represented as a single 24-bit integer in hexadecimal notation (for example, #``add8e6 is light blue), or in functional notation as three separate 8-bit integers (for example, rgb(46, 139, 87) is sea green). In Glossary("OpenGL"), Glossary("WebGL"), and Glossary("GLSL") the red-green-blue components are fractions (floating-point numbers between 0.0 and 1.0), although in the actual color buffer they are typically stored as 8-bit integers. Graphically, a color can be represented as a point in a three-dimensional grid or cube, where each dimension (or axis) corresponds to a different channel.

See also

Term: RIL

  • B2G
  • Firefox OS
  • Glossary
  • Infrastructure
  • Intro
  • Mobile
  • Telephony

RIL (Radio Interface Layer) is a mobile operating system component which communicates between the device's software and the device's phone, radio, or modem hardware.

See also

  • Interwiki("wikipedia", "Radio Interface Layer") on Wikipedia

Term: Random Number Generator

  • CodingScripting
  • Glossary

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

  • Interwiki("wikipedia", "Pseudorandom number generator") on Wikipedia
  • jsxref("Math.random()"), a built-in JavaScript PRNG function. Note that this is not a cryptographically secure PRNG.
  • domxref("Crypto.getRandomValues()"): this is intended to provide cryptographically secure numbers.

Term: Robots.txt

  • Glossary
  • Infrastructure

Robots.txt is a file which is usually placed in the root of any website. It decides whether Glossary("crawler", "crawlers") are permitted or forbidden access to the web site.

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

See also

Term: Round Trip Time (RTT)

  • Beginner
  • Glossary
  • Performance
  • Resource
  • Round Trip Time
  • Web Performance

Round Trip Time (RTT) is the length time it takes for a data packet to be sent to a destination plus the time it takes for an acknowledgment of that packet to be received back at the origin. The RTT between a network and server can be determined by using the ping command.

$ ping example.com
PING example.com (216.58.194.174): 56 data bytes
64 bytes from 216.58.194.174: icmp_seq=0 ttl=55 time=25.050 ms
64 bytes from 216.58.194.174: icmp_seq=1 ttl=55 time=23.781 ms
64 bytes from 216.58.194.174: icmp_seq=2 ttl=55 time=24.287 ms
64 bytes from 216.58.194.174: icmp_seq=3 ttl=55 time=34.904 ms
64 bytes from 216.58.194.174: icmp_seq=4 ttl=55 time=26.119 ms
--- google.com ping statistics ---
5 packets transmitted, 5 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 23.781/26.828/34.904/4.114 ms

In the above example, the average round trip time is shown on the final line as 26.8ms.

See also

Term: Routers

  • Intro

There are three definitions for routers on the web:

  1. For the network layer, the router is a networking device that decides data Glossary('Packet')s directions. They are distributed by retailers allowing user interaction to the internet.
  2. For a _Glossary('SPA', 'Single-page application' _) in the application layer, a router is a library that decides what web page is presented by a given Glossary('URL'). This middleware module is used for all URL functions, as these are given a path to a file that is rendered to open the next page.
  3. In the implementation of an Glossary('API') in a service layer, a router is a software component that parses a request and directs or routes the request to various handlers within a program. The router code usually accepts a response from the handler and facilitates its return to the requester.

See also

For network layer context:

  • Interwiki("wikipedia", "Router (computing)") on Wikipedia

For SPA in application layer context, most of the popular SPA frameworks has its routing library:

Term: RSS

  • Glossary
  • OpenPractices
  • RSS
  • Sharing
  • WebMechanics

RSS (Really Simple Syndication) refers to several XML document formats designed for publishing site updates. When you subscribe to a website's RSS feed, the website sends information and updates to your RSS reader in an RSS document called a feed, so you don't need to check all your favorite websites manually.

See also

Term: Rsync

Rsync is an open-source file synchronizing tool that provides incremental file transfer It can be used over insecure and secure transports (like SSH). It is available on most Unix-based systems (such as macOS and Linux) and Windows. There are also GUI-based tools that use rsync, for example, Acrosync.

A basic command looks like this:

rsync [-options] SOURCE user@x.x.x.x:DESTINATION
  • -options is a dash followed by one or more letters, for example -v for verbose error messages, and -b to make backups. See the full list of options at the rsync man page. (Search for "Options summary.")
  • SOURCE is the path to the local file or directory that you want to copy or synchronize
  • user@ is the credentials of the user on the remote server you want to copy files over to.
  • x.x.x.x is the IP address of the remote server.
  • DESTINATION is the path to the location you want to copy your directory or files to on the remote server.

You can also make a connection over SSH using the -e option as shown:

rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION

There are numerous examples on the Internet, including those at the official website, and at the Wikipedia entry for rsync.

Term: RTCP (RTP Control Protocol)

  • Glossary
  • Media
  • Networking
  • Protocol
  • RTCP
  • control

The RTP Control Protocol (RTCP) is a partner to the Glossary("RTP") protocol. RTCP is used to provide control and statistical information about an RTP media streaming session.

This lets control and statistics packets be separated logically and functionally from the media streaming while using the underlying packet delivery layer to transmit the RTCP signals as well as the RTP and media contents.

RTCP periodically transmits control packets to all of an RTP session's participants, using the same mechanism that is being used to transmit the data packets. That underlying protocol handles the multiplexing of the data and control packets and may use separate network ports for each type of packet.

See also

Term: RTF

  • Composing
  • Format
  • Glossary
  • RTF
  • Rich Text Format

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

Term: RTL (Right to Left)

  • Composing
  • Glossary
  • Localization

RTL (Right To Left) is a Glossary("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

    • Glossary("Localization")
    • Glossary("LTR", "LTR (Left to Right)")
    • Glossary("RTL", "RTL (Right to Left)")

Term: RTP (Real-time Transport Protocol) and SRTP (Secure RTP)

  • Glossary
  • Network
  • Protocol
  • RTP

The Real-time Transport Protocol (RTP) is a network protocol which described how to transmit various media (audio, video) from one endpoint to another in a real-time fashion. RTP is suitable for video-streaming application, telephony over glossary("IP") like Skype and conference technologies.

The secure version of RTP, SRTP, is used by WebRTC, and uses encryption and authentication to minimize the risk of denial-of-service attacks and security breaches.

RTP is rarely used alone; instead, it is used in conjunction with other protocols like glossary("RTSP") and glossary("SDP").

See also

Term: 'RTSP: Real-time streaming protocol'

  • Glossary
  • Real-time streaming protocol
  • Reference
  • rtsp

Real-time streaming protocol (RTSP) is a network protocol that controls how the streaming of a media should occur between a glossary("server") and a glossary("client"). Basically, RTSP is the protocol that describes what happens when you click "Pause"/"Play" when streaming a video. If your computer were a remote control and the streaming server a television, RTSP would describe how the instruction of the remote control affects the TV.

See also

  • Interwiki("wikipedia", "Real_Time_Streaming_Protocol","RTSP") on Wikipedia

  • RFC 7826 (one of the documents that specifies precisely how the protocol works)

  • Glossary

    • Glossary("RTSP")

Term: Ruby

  • CodingScripting
  • Glossary
  • Ruby

Ruby is an open-source programming language. In a glossary("world wide web","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 HTMLElement("ruby") element.

See also

Term: Safe

  • Glossary
  • Disambiguation

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

_GlossaryDisambiguation}}

Term: Same-origin policy

  • Glossary
  • Same-origin policy
  • origin

The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one Glossary("origin") can interact with a resource from another origin.

It helps isolate potentially malicious documents, reducing possible attack vectors.

See also

Term: SCM

  • CodingScripting
  • Glossary
  • SCM

SCM (Source Control Management) is a system for managing source code. Usually it refers to the use of software to handle versioning of source files. A programmer can modify source code files without being afraid of editing out useful stuff, because a SCM keeps track of how the source code has changed and who made the changes.

Some SCM systems include CVS, SVN, GIT.

See also

  • Interwiki("wikipedia", "Revision control") on Wikipedia

Term: Scope

  • CodingScripting
  • Glossary
  • JavaScript

The current context of execution. The context in which glossary("value","values") and expressions are "visible" or can be referenced. If a glossary("variable") or other expression is not "in the current scope," then it is unavailable for use. Scopes can also be layered in a hierarchy, so that child scopes have access to parent scopes, but not vice versa.

A glossary("function") serves as a closure in glossary("JavaScript"), and thus creates a scope, so that (for example) a variable defined exclusively within the function cannot be accessed from outside the function or within other functions. For instance, the following is invalid:

//

function exampleFunction() {
    var x = 'declared inside function'; // x can only be used in exampleFunction
    console.log('Inside function');
    console.log(x);
}

console.log(x); // Causes error

However, the following code is valid due to the variable being declared outside the function, making it global:

//
var x = 'declared outside function';

exampleFunction();

function exampleFunction() {
    console.log('Inside function');
    console.log(x);
}

console.log('Outside function');
console.log(x);

See also

  • Interwiki("wikipedia", "Scope (computer science)") on Wikipedia

Term: Screen reader

  • Accessibility
  • Glossary
  • Screen reader
  • Voice Over
  • Voiceover

Screen readers are software applications that attempt to convey what is seen on a screen display in a non-visual way, usually as text to speech, but also into braille or sound icons. Screen readers are essential to people who are blind, as well as useful to people who are visually impaired, illiterate, or have a learning disability. There are some browser extension screen readers, but most screen readers operate system-wide for all user applications, not just the browser.

In terms of web accessibility, most user agents provide an accessibility object model and screen readers interact with dedicated accessibility APIs, using various operating system features and employing hooking techniques.

VoiceOver

macOS comes with VoiceOver, a built-in screen reader. To access VoiceOver, go to System Preferences > Accessibility > VoiceOver. You can also toggle VoiceOver on and off with fn+command + F5. VoiceOver both reads aloud and displays content. The content read aloud is displayed in a dark grey box.

Desktop/laptop screen reader users navigate websites with a keyboard or other non-pointing device. The best way to emulate use is to do the same.

Just like keyboard navigation without VoiceOver, you can navigate through interactive elements using the tab key and the arrow keys:

  • Next interactive element: Tab
  • Previous interactive element: Shift + Tab
  • Next radio button in a same named-group: right or down arrow
  • Previous radio button in a same named-group: left or up arrow

Navigating through the content of a page is done with the tab key and a series of other keys along with Control + Option keys

  • Next heading: Control + Option + H
  • Next list: Control + Option + X
  • Next graphic: Control + Option + G
  • Next table: Control + Option + T
  • Down an HTML hierarchical order Control + Option + right arrow
  • Previous heading: Shift + Control + Option + H
  • Previous list: Shift + Control + Option + X
  • Previous graphic: Shift + Control + Option + G
  • Previous table: Shift + Control + Option + T
  • Up an HTML hierarchical order: Control + Option + left arrow

See also

Term: Script-supporting element

  • Glossary
  • HTML
  • HTML Content Categories
  • scripts

In an Glossary("HTML") document, script-supporting elements are those elements that don't directly contribute to the appearance or layout of the page; instead, they're either scripts or contain information that's only used by scripts.

These elements may be important, but do not affect the displayed page unless the page's scripts explicitly cause them to do so.

There are only two script-supporting elements: HTMLElement("script") and HTMLElement("template").

See also

SectionOnPage("/en-US/docs/Web/HTML/Kinds_of_HTML_content", "Script-supporting elements")

Term: Block (scripting)

  • CodingScripting
  • Glossary
  • JavaScript

In glossary("JavaScript"), a block is a collection of related glossary("statement","statements") enclosed in braces ("{}"). For example, you can put a block of statements after an jsxref("Statements/if...else","if (condition)") block, indicating that the interpreter should run the code inside the block if the condition is true, or skip the whole block if the condition is false.

See also

Term: Scroll container

  • Glossary
  • scroll container

A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow.

The scroll container allows the user to scroll through parts of the overflow region that would otherwise be clipped and hidden from view. The visible part of the scroll container is referred to as the glossary("Scrollport", "scrollport").

See also

  • MDN Web Docs Glossary:

    • glossary("Scroll container")
    • glossary("Scrollport")

  • Related CSS Properties:

    • cssxref("overflow")

Term: Scrollport

  • Glossary
  • scrollport

The scrollport is the visual viewport of a glossary("Scroll container", "scroll container") in a document. A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow. The scrollport coincides with the padding box of that container and represents the content that can be seen as the box is scrolled.

See also

  • MDN Web Docs Glossary:

    • glossary("Scroll container")
    • glossary("Scrollport")

  • Related CSS Properties:

    • cssxref("overflow")

Term: SCTP

  • Glossary
  • Infrastructure
  • SCTP
  • WebRTC

SCTP (Stream Control Transmission glossary("Protocol")) is an Glossary("IETF") standard for a transport protocol which enables the reliable, in-order transmission of messages while offering congestion control, multi-homing, and other features to improve reliability and stability of the connection. It's used for sending traditional telephone calls over the Internet, but is also used for Glossary("WebRTC") data.

See also

  • RFC(4960, "Stream Control Transmission Protocol")
  • Interwiki("wikipedia", "Stream Control Transmission Protocol") on Wikipedia

Term: SDP

  • Advanced
  • Collaborating
  • Glossary
  • Infrastructure
  • Protocol
  • WebRTC

SDP (Session Description glossary("Protocol")) is the standard describing a Glossary("P2P","peer-to-peer") connection. SDP contains the Glossary("codec"), source address, and timing information of audio and video.

Here is a typical SDP message:

   v=0
   o=alice 2890844526 2890844526 IN IP4 host.anywhere.com
   s=
   c=IN IP4 host.anywhere.com
   t=0 0
   m=audio 49170 RTP/AVP 0
   a=rtpmap:0 PCMU/8000
   m=video 51372 RTP/AVP 31
   a=rtpmap:31 H261/90000
   m=video 53000 RTP/AVP 32
   a=rtpmap:32 MPV/90000

SDP is never used alone, but by protocols like Glossary("RTP") and Glossary("RTSP"). SDP is also as component of Glossary("WebRTC"), which uses SDP as a way of describing a session.

See also

  • WebRTC protocols
  • Interwiki("wikipedia", "Session Description Protocol") on Wikipedia

Term: Search engine

  • Definition
  • Glossary
  • Indexing
  • Search Engine
  • Searching
  • Web Crawling
  • WebMechanics
  • World Wide Web
  • details
  • google

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

A search engine conducts the following processes:

  • Web crawling: Searching web sites by navigating Glossary("Hyperlink", "Hyperlinks") on web pages, both within a site, and from one site to another. A web site 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

Term: Second-level Domain

  • Glossary
  • Infrastructure

A Second Level Domain (Glossary("SLD")) is the part of the domain name that is located right before a Top Level Domain (Glossary("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

  • Interwiki("wikipedia", "Second-level domain", "SLD") (Wikipedia)

  • Glossary

    • Glossary("DNS")
    • Glossary("Domain")
    • Glossary("Domain name")
    • Glossary("TLD")

Term: Secure Context

  • Glossary
  • Security
  • Secure contexts

A secure context is a Window or Worker in which certain minimum standards of authentication and confidentiality are met. Many Web APIs and features are only accessible in secure contexts, reducing the opportunity for misuse by malicious code.

For more information see: Web > Security > Secure Contexts.

Term: Signature (security)

  • Cryptography
  • Glossary
  • Privacy
  • Security

A signature, or digital signature, is a glossary("protocol") showing that a message is authentic.

From the glossary("hash") of a given message, the signing process first generates a digital signature linked to the signing entity, using the entity's private glossary("key").

On receiving the message, the verification process

  • authenticates the sender - uses the sender's public key to glossary("decryption","decrypt") the signature and recover the hash, which can only be created with the sender's private key, and
  • checks message integrity - compares the hash with a newly calculated one from the received document (the two hashes will differ if the document has been tampered with)

The system fails if the private key is compromised or the recipient is deceitfully given the wrong public key.

See also

  • Interwiki("wikipedia", "Digital signature") on Wikipedia
  • See glossary("digest"), glossary("encryption")

Term: Self-Executing Anonymous Function

  • Glossary

A glossary("JavaScript") glossary("function") that runs as soon as it is defined. Also known as an glossary("IIFE") (Immediately Invoked Function Expression).

See the IIFE glossary page linked above for more information.

Term: Semantics

  • CodingScripting
  • Glossary
  • HTML
  • semantics

In programming, Semantics refers to the meaning of a piece of code — for example "what effect does running that line of JavaScript have?", or "what purpose or role does that HTML element have" (rather than "what does it look like?".)

Semantics in JavaScript

In JavaScript, consider a function that takes a string parameter, and returns an htmlelement("li") element with that string as its textContent. Would you need to look at the code to understand what the function did if it was called build('Peach'), or createLiWithContent('Peach')?

Semantics in CSS

In CSS, consider styling a list with li elements representing different types of fruits. Would you know what part of the DOM is being selected with div > ul > li, or .fruits__item?

Semantics in HTML

In HTML, for example, the htmlelement("h1") element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

<h1>This is a top level heading</h1>

By default, most browser's user agent stylesheet will style an htmlelement("h1") with a large font size to make it look like a heading (although you could style it to look like anything you wanted).

On the other hand, you could make any element look like a top level heading. Consider the following:

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

This will render it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above. It is therefore a good idea to use the right HTML element for the right job.

HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of CSS.

Some of the benefits from writing semantic markup are as follows:

  • Search engines will consider its contents as important keywords to influence the page's search rankings (see glossary("SEO"))
  • Screen readers can use it as a signpost to help visually impaired users navigate a page
  • Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
  • Suggests to the developer the type of data that will be populated
  • Semantic naming mirrors proper custom element/component naming

When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.

Semantic elements

These are some of the roughly 100 semantic elements available:

  • htmlelement("article")
  • htmlelement("aside")
  • htmlelement("details")
  • htmlelement("figcaption")
  • htmlelement("figure")
  • htmlelement("footer")
  • htmlelement("header")
  • htmlelement("main")
  • htmlelement("mark")
  • htmlelement("nav")
  • htmlelement("section")
  • htmlelement("summary")
  • htmlelement("time")

See also

  • HTML element reference on MDN

  • Using HTML sections and outlines on MDN

  • interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science") on Wikipedia

  • Glossary

    • Glossary("SEO")

  • Semantic elements in HTML:

    • htmlelement("article")
    • htmlelement("aside")
    • htmlelement("details")
    • htmlelement("figcaption")
    • htmlelement("figure")
    • htmlelement("footer")
    • htmlelement("header")
    • htmlelement("main")
    • htmlelement("mark")
    • htmlelement("nav")
    • htmlelement("section")
    • htmlelement("summary")
    • htmlelement("time")

Term: SEO

  • Glossary
  • Intro
  • SEO
  • Search
  • WebMechanic

SEO (Search Engine Optimization) is the process of making a website more visible in search results, also termed improving search rankings.

Search engines Glossary("Crawler", "crawl") the web, following links from page to page, and index the content found. When you search, the search engine displays the indexed content. Crawlers follow rules. If you follow those rules closely when doing SEO for a website, you give the site the best chances of showing up among the first results, increasing traffic and possibly revenue (for ecommerce and ads).

Search engines give some guidelines for SEO, but big search engines keep result ranking as a trade secret. SEO combines official search engine guidelines, empirical knowledge, and theoretical knowledge from science papers or patents.

SEO methods fall into three broad classes:

  • technical
    • : Tag the content using semantic Glossary("HTML"). When exploring the website, crawlers should only find the content you want indexed.
  • copywriting
    • : Write content using your visitors' vocabulary. Use text as well as images so that crawlers can understand the subject.
  • popularity
    • : You get most traffic when other established sites link to your site.

See also

Term: Serialization

  • CodingScripting
  • Glossary
  • JavaScript
  • Serialization

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

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

Glossary("CSS") values are serialized by calling the function domxref("CSSStyleDeclaration.getPropertyValue()").

See also

Term: Server Timing

  • Glossary
  • Reference
  • Server Timing
  • Web Performance

The Server Timing specification enables the server to communicate performance metrics from the request-response cycle to the user agent, and utilizes a JavaScript interface to allow applications to collect, process, and act on these metrics to optimize application delivery.

See also

Term: Server

  • Glossary
  • Infrastructure
  • Networking
  • Protocol
  • Server

A server is a software or hardware offering a service to a user, usually referred to as client. A hardware server is a shared computer on a network, usually powerful and housed in a data center. A software server (often running on a hardware server) is a program that provides services to client programs or a glossary("UI","user interface") to human clients.

Services are provided generally over local area networks or wide area networks such as the internet. A client program and server program traditionally connect by passing messages encoded using a glossary("protocol") over an glossary("API").

For example:

  • An Internet-connected Web server is sending a glossary("HTML") file to your browser software so that you can read this page
  • Local area network server for file, name, mail, print, and fax
  • Minicomputers, mainframes, and super computers at data centers

See also

Term: Session Hijacking

  • Glossary
  • Security
  • session hijacking

Session hijacking occurs when an attacker takes over a valid session between two computers. The attacker steals a valid session ID in order to break into the system and snoop data.

Most authentication occurs only at the start of a glossary("TCP") session. In TCP session hijacking, an attacker gains access by taking over a TCP session between two machines in mid session.

image

Session hijacking occurs because

  • no account lockout for invalid session IDs
  • weak session-ID generation algorithm
  • insecure handling
  • indefinite session expiration time
  • short session IDs
  • transmission in plain text

Session hijacking process

  1. Sniff, that is perform a man-in-the-middle (MITM) attack, place yourself between victim and server.
  2. Monitor packets flowing between server and user.
  3. Break the victim machine's connection.
  4. Take control of the session.
  5. Inject new packets to the server using the Victim's Session ID.

Protection against session hijacking

  • create a secure communication channel with SSH (secure shell)
  • pass authentication cookies over HTTPS connection
  • implement logout functionality so the user can end the session
  • generate the session ID after successful login
  • pass encrypted data between the users and the web server
  • use a string or long random number as a session key

See also

  • Interwiki("wikipedia", "Session hijacking") on Wikipedia

Term: SGML

  • CodingScripting
  • Composing
  • Glossary
  • SGML

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

On the web, Glossary("HTML") 4, Glossary("XHTML"), and Glossary("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

Term: Shadow tree

  • DOM
  • Glossary
  • Shadow Tree
  • shadow dom

A shadow tree is a tree of DOM Glossary("node", "nodes") whose topmost node is a shadow root; that is, the topmost node within a shadow DOM. A shadow tree is a hidden set of standard DOM nodes which is attached to a standard DOM node that serves as a host. The hidden nodes are not directly visible using regular DOM functionality, but require the use of a special Shadow DOM API to access.

Nodes within the shadow tree are not affected by anything applied outside the shadow tree, and vice versa. This provides a way to encapsulate implementation details, which is especially useful for custom elements and other advanced design paradigms.

See also

  • Using shadow DOM
  • domxref("Element.shadowRoot") and domxref("Element.attachShadow()")
  • domxref("ShadowRoot")
  • HTMLElement("slot")

Term: Shim

  • CodingScripting
  • Glossary

A shim is a piece of code used to correct the behavior of code that already exists, usually by adding new API that works around the problem. This differs from a Glossary("polyfill"), which implements a new API that is not supported by the stock browser as shipped.

See also

  • Interwiki("wikipedia", "Shim (computing)", "Shim") on Wikipedia

Term: Signature

  • Disambiguation
  • Glossary

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

_GlossaryDisambiguation}}

See also

  • Interwiki("wikipedia", "Signature(disambiguation)", "Signature"_) on Wikipedia

Term: SIMD

  • CodingScripting
  • Glossary
  • JavaScript

SIMD (pronounced "sim-dee") is short for Single Instruction/Multiple Data which is one Interwiki("wikipedia","Flynn%27s_taxonomy","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 Glossary("SISD") for a sequential architecture with no parallelism in either the instructions or the data sets.

See also

  • Interwiki("wikipedia", "SIMD") on Wikipedia

  • Glossary

    • Glossary("SIMD")
    • Glossary("SISD")

Term: Simple header

  • CORS
  • Glossary
  • HTTP
  • Infrastructure

Old term for Glossary("CORS-safelisted request header").

Term: Simple response header

  • CORS
  • Glossary
  • HTTP

Old term for Glossary("CORS-safelisted response header").

Term: SISD

  • CodingScripting
  • Glossary

SISD is short for Single Instruction/Single Data which is one Interwiki("wikipedia","Flynn%27s_taxonomy","classification of computer architectures"). In SISD architecture, a single processor executes a single instruction and operates on a single data point in memory.

See also Glossary("SIMD") for a parallel architecture that allows one same operation to be performed on multiple data points.

See also

  • Interwiki("wikipedia", "SISD") on Wikipedia

Term: Site map

  • Accessibility
  • Glossary
  • Search
  • Site map

A site map or sitemap is a list of pages of a web site.

Structured listings of a site's page help with search engine optimization, providing a link for web crawlers such as search engines to follow. Site maps also help users with site navigation by providing an overview of a site's content in a single glance.

Term: Site

  • Glossary
  • Security
  • WebMechanics

The site of a piece of web content is determined by the registrable domain of the host within the origin. This is computed by consulting a Public Suffix List to find the portion of the host which is counted as the public suffix (e.g. com, org or co.uk).

The concept of a site is used in SameSite cookies, as well as a web application's Cross-Origin Resource Policy.

Examples

These are the same site because the registrable domain of mozilla.org is the same (different host and files path don't matter):

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

These are the same site because scheme and port are not relevant:

  • http://example.com:8080
  • https://example.com

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

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

See also

Term: SLD

  • Glossary
  • Infrastructure

An SLD (Second Level Domain) is the part of the domain name that is located right before a Top Level Domain (Glossary("TLD")). For example, in mozilla.org the SLD is mozilla and the TLD is org.

See Second Level Domain for more information.

Term: Sloppy mode

  • CodingScripting
  • Glossary
  • JavaScript
  • Sloppy

Glossary("ECMAScript") 5 and later let scripts opt in to a new strict mode, which alters the semantics of JavaScript in several ways to improve its resiliency and which make it easier to understand what's going on when there are problems.

The normal, non-strict mode of JavaScript is sometimes referred to as sloppy mode. This isn't an official designation, but you are likely to come across it if you spend time doing serious JavaScript code.

See also

  • "Strict Mode" in chapter 7 ("JavaScript Syntax") in the book Speaking JavaScript.

Term: Slug

  • Community
  • Glossary
  • Intermediate
  • MDN
  • URL
  • Web

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/".

See also

Term: Smoke Test

  • Composing
  • Glossary
  • Intro
  • QA
  • Testing

A smoke test consists of functional or unit tests of critical software functionality. Smoke testing comes before further, in-depth testing.

Smoke testing answers questions like

  • "Does the program start up correctly?"
  • "Do the main control buttons function?"
  • "Can you save a simple blank new test user account?"

If this basic functionality fails, there is no point investing time in more detailed QA work at this stage.

See also

  • Interwiki("wikipedia", "Smoke testing (software)") on Wikipedia

Term: SMPTE (Society of Motion Picture and Television Engineers)

  • Engineers
  • Glossary
  • Motion Picture
  • Movies
  • SMPTE
  • Specifications
  • Television
  • standards

The Society of Motion Picture and Television Engineers (SMPTE) is the professional association of engineers and scientists that develop and define standards and technologies used to create, broadcast, store, and present entertainment media.

For example, SMPTE defines the standards used for digital cinema used by modern digital movie theaters.

Term: SMTP

  • Beginner
  • Collaboration
  • Glossary
  • Infrastructure
  • Sharing

SMTP (Simple Mail Transfer Protocol) is a glossary("protocol") used to send a new email. Like glossary("POP") and glossary("NNTP"), it is a Glossary("state machine")-driven protocol.

The protocol is relatively straightforward. Primary complications include supporting various authentication mechanisms (GSSAPI, CRAM-MD5, NTLM, MSN, AUTH LOGIN, AUTH PLAIN, etc.), handling error responses, and falling back when authentication mechanisms fail (e.g., the server claims to support a mechanism, but doesn't).

See also

  • Interwiki("wikipedia", "SMTP") (Wikipedia)

  • Glossary

    • glossary("NNTP")
    • glossary("POP")
    • glossary("protocol")
    • Glossary("state machine")

Term: Snap positions

  • Glossary
  • snap positions

A scroll container may set snap positions — points that the scrollport will stop moving at after a scrolling operation is completed. This allows a scrolling experience that gives the effect of paging through content rather than needing to drag content into view.

Defining Snap positions on the scroll container was introduced in the CSS Scroll Snap specification.

Term: SOAP

  • Glossary
  • Infrastructure
  • SOAP
  • WebMechanics

SOAP (Simple Object Access Protocol) is a glossary('protocol') for transmitting data in glossary('XML') format.

See also

Term: SPA (Single-page application)

  • Glossary
  • SPA
  • single-page app

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 domxref("XMLHttpRequest") and 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

Term: Specification

  • Glossary
  • OpenPractices
  • Standardization

A specification is a document that lays out in detail what functionality or attributes a product must include before delivery. In the context of describing the Web, the term "specification" (often shortened to "spec") generally means a document describing a language, technology, or Glossary("API") which makes up the complete set of open Web technologies.

See also

  • Interwiki("wikipedia", "Specification") on Wikipedia

Term: Speculative parsing

  • Advanced
  • HTML
  • HTML5
  • NeedsUpdate
  • Web Development
  • Web Performance

Traditionally in browsers the HTML parser ran on the main thread and was blocked after a </script> tag until the script has been retrieved from the network and executed. Some HTML parser, such as Firefox since Firefox 4, support speculative parsing off of the main thread. It parses ahead while scripts are being downloaded and executed. The HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream and runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.

This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.

To make speculative loads of linked scripts, style sheets and images successful, avoid domxref('document.write'). If you use a <base> element to override the base URI of your page, put the element in the non-scripted part of the document. Don't add it via document.write() or domxref('document.createElement').

Avoiding losing tree builder output

Speculative tree building fails when document.write() changes the tree builder state such that the speculative state after the </script> tag no longer holds when all the content inserted by document.write() has been parsed. However, only unusual uses of document.write() cause trouble. Here are the things to avoid:

  • Don't write unbalanced trees. <script>document.write("<div>");</script> is bad. `<script>document.write("
");</script>` is OK. - Don't write an unfinished token. `<script>document.write("
` is bad. - Don't finish your writing with a carriage return. `<script>document.write("Hello World!\r");</script>` is bad. `<script>document.write("Hello World!\n");</script>` is OK. - Don't format part of a table. ` <script>document.write("");</script>
Hello World!
` is bad.

Term: Speed index

  • Glossary
  • Performance
  • Reference
  • Web Performance

Speed Index (SI) is a page load performance metric that shows you how quickly the contents of a page are visibly populated. It is the average time at which visible parts of the page are displayed. Expressed in milliseconds, and dependent on the size of the viewport, the lower the score, the better.

Calculation of SpeedIndex

The calculation calculates what percent of the page is visually complete at every 100ms interval until the page is visually complete. The overall score, the above the fold metric, is a sum of the individual 10 times per second intervals of the percent of the screen that is not-visually complete**.**

See also

Term: SQL Injection

  • Glossary
  • Security
  • Sql
  • Sql Injection
  • Webapp

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.

image

How It Works

image

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

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

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

"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:

User## Term: admin

Password: anything 'or'1'='1

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

"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:

$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

Term: SQL

  • CodingScripting
  • Database
  • Glossary
  • Sql

SQL (Structured Query Language) is a descriptive computer language designed for updating, retrieving, and calculating data in table-based databases.

See also

Term: SRI

  • CSP
  • Security

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

See also

Term: Secure Sockets Layer (SSL)

  • Glossary
  • SSL
  • Security
  • TLS
  • Web Performance

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 Glossary("TLS", "Transport Layer Security (TLS)") protocol.

See also

Term: Stacking context

  • CSS
  • CodingScripting
  • Glossary

Stacking context refers to how elements on a webpage appear to sit on top of other elements, just as you can arrange index cards on your desk to lie side-by-side or overlap each other.

See also

Term: State machine

  • CodingScripting
  • Finite
  • Glossary
  • Input
  • Mealy
  • Moore
  • State Machine
  • Turing 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" Glossary("statement") in that if x == true 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

image

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

image

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

Note that any Glossary("regular expression") can be represented by a state machine.

See also

  • Interwiki("wikipedia", "Finite-state machine") on Wikipedia
  • Interwiki("wikipedia", "UML state machine") on Wikipedia
  • Interwiki("wikipedia", "Moore machine") on Wikipedia
  • Interwiki("wikipedia", "Mealy machine") on Wikipedia

Term: Statement

  • Beginner
  • CodingScripting
  • Glossary

In a computer programming language, a statement is a line of code commanding a task. Every program consists of a sequence of statements.

See also

Term: Static method

  • CodingScripting
  • Glossary
  • JavaScript
  • Method
  • Static
  • Static Method

A static method (or static function) is a Glossary("method") defined as a member of an Glossary("object") but is accessible directly from an API object's constructor, rather than from an object instance created via the constructor.

In a Web API, a static method is one which is defined by an interface but can be called without instantiating an object of that type first.

Methods called on object instances are called instance methods.

Examples

In the Notifications API, the domxref("Notification.requestPermission()") method is called on the actual domxref("Notification") constructor itself — it is a static method:

//
let promise = Notification.requestPermission();

The domxref("Notification.close()") method on the other hand, is an instance method — it is called on an specific notification object instance to close the system notification it represents:

//
let myNotification = new Notification('This is my notification');

myNotification.close();

See also

Term: Static typing

  • CodingScripting
  • Glossary
  • Type

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

  • Interwiki("wikipedia", "Type system") on Wikipedia

Term: Strict mode

  • Glossary
  • JavaScript
  • Reference

JavaScript's strict mode is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "Glossary("Sloppy_mode", "sloppy mode")". Strict mode isn't just a subset: it intentionally has different semantics from normal code.

Strict mode for an entire script is invoked by including the statement "use strict"; before any other statements.

See also

Term: Stringifier

  • CodingScripting
  • Glossary
  • Stringifier

An Glossary("object", "object's") stringifier is any Glossary("attribute") or Glossary("method") that is defined to provide a textual representation of the object for use in situations where a Glossary("string") is expected.

See also

Term: String

  • Beginner
  • CodingScripting
  • Glossary
  • String

In any computer programming language, a string is a sequence of Glossary("character","characters") used to represent text.

In Glossary("JavaScript"), a String is one of the Glossary("Primitive", "primitive values") and the jsxref("String") object is a Glossary("wrapper") around a String primitive.

See also

Term: STUN

  • Glossary
  • Infrastructure
  • STUN
  • WebMechanics
  • WebRTC

STUN (Session Traversal Utilities for NAT) is an auxiliary protocol for transmitting data around a glossary("NAT") (Network Address Translator). STUN returns the glossary("IP address"), glossary("port"), and connectivity status of a networked computer behind a NAT.

See also

Technical reference

Term: Style origin

  • CSS
  • Glossary
  • Style
  • Style Origin
  • origin

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

  • User-agent origin
    • : The user agent origin is the style origin comprised of the default styles used by the user's web browser. If no other styles are applied to content, the user agent origin's styles are used while rendering elements.
  • User origin
    • : The user origin is the style origin containing any CSS that the user of the web browser has added. These may be from adding styles using a developer tool or from a browser extension that automatically applies custom styles to content, such as Stylus or Stylish.
  • Author origin
    • : The author origin is the style origin which contains all of the styles which are part of the document, whether embedded within the Glossary("HTML") or loaded from an external stylesheet file.

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

See also

Term: Stylesheet

  • Glossary
  • StyleSheet

A stylesheet is a set of CSS rules used to control the layout and design of a webpage or document. Internal stylesheets are placed inside a htmlelement("style") element inside the htmlelement("head") of a web document, and external stylesheets are placed inside a separate .css file, which is applied to a document by referencing the file inside a htmlelement("link") element in the document's head.

External stylesheets are generally preferred because they allow you to control the styling of multiple pages from a single place, rather than having to repeat the CSS across each page.

See also

Term: SVG

  • Beginner
  • CodingScripting
  • Glossary
  • Graphics
  • SVG
  • l10n:priority

Scalable Vector Graphics (SVG) is a 2D vector image format based on an Glossary("XML") syntax.

The Glossary("W3C") began work on SVG in the late 1990s, but SVG only became popular when Glossary("Microsoft Internet Explorer", "Internet Explorer") 9 came out with SVG support. All major Glossary("browser","browsers") now support SVG.

As a vector image format, SVG graphics can scale infinitely, making them invaluable in Glossary("responsive web design", "responsive design"), since you can create interface elements and graphics that scale to any screen size. SVG also provides a useful set of tools, such as clipping, masking, filters, and animations.

See also

Term: SVN

  • Collaborating
  • Glossary

Apache Subversion (SVN) is a free source control management (Glossary("SCM")) system. It allows developers to keep a history of text and code modifications. Although SVN can also handle binary files, we do not recommend that you use it for such files.

See also

Term: Symbol

  • Data Type
  • ECMAScript 2015
  • Glossary
  • JavaScript
  • Sharing
  • Symbol

In Glossary("JavaScript"), Symbol is a Glossary("Primitive", "primitive value").

A value having the data type Symbol can be referred to as a "Symbol value". In a JavaScript runtime environment, a symbol value is created by invoking the function jsxref("Symbol"), which dynamically produces an anonymous, unique value. A symbol may be used as an object property.

Symbol can have an optional description, but for debugging purposes only.

A Symbol value represents a unique identifier. For example:

//
// Here are two symbols with the same description:
let Sym1 = Symbol('Sym');
let Sym2 = Symbol('Sym');

console.log(Sym1 === Sym2); // returns "false"
// Symbols are guaranteed to be unique.
// Even if we create many symbols with the same description,
// they are different values.

Note: If you are familiar with Ruby (or another language) that also has a feature called "symbols", please don't be misled. JavaScript symbols are different.

Symbol type is a new feature in ECMAScript 2015. There is no ECMAScript 5 equivalent for Symbol.

In some programming languages, the symbol data type is referred to as an "atom."

Symbols don't "Auto-Convert" to strings

Most values in JavaScript support implicit conversion to a string. For instance, we can alert almost any value, and it will work. Symbols are special. They don't auto-convert.

For example:

//
let Sym = Symbol('Sym');
alert(Sym); // TypeError: Cannot convert a Symbol value to a string

That's a "language guard" against messing up, because strings and symbols are fundamentally different, and should not occasionally convert one into another.

If you really want to show a symbol, we need to call .toString() on it.

//
let Sym = Symbol('Sym');
alert(Sym.toString()); // Symbol(Sym), now it works

Or you can use the symbol.description property to get its description:

//
let _Sym = Symbol('Sym');

alert(_Sym.description); // Sym

Well-known symbols

The jsxref("Symbol") class has constants for so-called well-known symbols. These symbols let you configure how JS treats an object, by using them as property keys.

Examples of well-known symbols are: jsxref("Symbol.iterator") for array-like objects, or jsxref("Symbol.search") for string objects.

They are listed in the specification in the Well-known symbols table:

  • Symbol.hasInstance
  • Symbol.isConcatSpreadable
  • Symbol.iterator
  • Symbol.toPrimitive
  • …and so on.

Global symbol registry

There is a global symbol registry holding all available symbols. The methods that access the registry are jsxref("Symbol.for()") and jsxref("Symbol.keyFor()"); these mediate between the global symbol table (or "registry") and the run-time environment. The global symbol registry is mostly built by JavaScript's compiler infrastructure, and the global symbol registry's content is not available to JavaScript's run-time infrastructure, except through these reflective methods.

The method Symbol.for(tokenString) returns a symbol value from the registry, and Symbol.keyFor(symbolValue) returns a token string from the registry; each is the other's inverse, so the following is true:

//
Symbol.keyFor(Symbol.for('tokenString')) === 'tokenString'; // true

See also

Term: Symmetric-key cryptography

  • Cryptography
  • Glossary
  • Security
  • Symmetric-key cryptography

Symmetric-key cryptography is a term used for cryptographic algorithms that use the same key for encryption and for decryption. The key is usually called a "symmetric key" or a "secret key".

This is usually contrasted with Glossary("public-key cryptography"), in which keys are generated in pairs and the transformation made by one key can only be reversed using the other key.

Symmetric-key algorithms should be secure when used properly and are highly efficient, so they can be used to encrypt large amounts of data without having a negative effect on performance.

Most symmetric-key algorithms currently in use are block ciphers: this means that they encrypt data one block at a time. The size of each block is fixed and determined by the algorithm: for example Glossary("AES") uses 16-byte blocks. Block ciphers are always used with a _Glossary("Block cipher mode of operation", "mode")_, which specifies how to securely encrypt messages that are longer than the block size. For example, AES is a cipher, while CTR, CBC, and GCM are all modes. Using an inappropriate mode, or using a mode incorrectly, can completely undermine the security provided by the underlying cipher.

See also

  • MDN Web Docs Glossary

    • Glossary("Block cipher mode of operation")
    • Glossary("Cryptography")
    • Glossary("Cryptographic hash function")
    • Glossary("Symmetric-key cryptography")

Term: Synchronous

  • Glossary
  • Web
  • WebMechanics

Synchronous refers to real-time communication where each party receives (and if necessary, processes and replies to) messages instantly (or as near to instantly as possible).

A human example is the telephone — during a telephone call you tend to respond to another person immediately.

Many programming commands are also synchronous — for example when you type in a calculation, the environment will return the result to you instantly, unless you program it not to.

See also

Term: Syntax error

  • CodingScripting
  • Glossary
  • JavaScript

An Glossary("exception") caused by the incorrect use of a pre-defined Glossary("syntax"). Syntax errors are detected while compiling or parsing source code.

For example, if you leave off a closing brace (}) when defining a Glossary("JavaScript") function, you trigger a syntax error. Browser development tools display Glossary("JavaScript") and Glossary("CSS") syntax errors in the console.

See also

  • Interwiki("wikipedia", "Syntax error") on Wikipedia
  • jsxref("SyntaxError") JavaScript object

Term: Syntax

  • CodingScripting
  • Glossary
  • Syntax

Syntax specifies the required combination and sequence of Glossary("character","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 Glossary("HTML") and Glossary("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 Glossary("semantics").

Code must have correct syntax in order to Glossary("compile") correctly, otherwise a Glossary("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

  • Interwiki("wikipedia", "Syntax (programming languages)") on Wikipedia

Term: Synthetic monitoring

  • Glossary
  • RUM
  • Reference
  • Synthetic monitoring
  • Web Performance

Synthetic monitoring involves monitoring the performance of a page in a 'laboratory' environment, typically with automation tooling in an environment that is as consistent as possible.

With a consistent baseline, synthetic monitoring is good for measuring the effects of code changes on performance. However, it doesn't necessarily reflect what users are experiencing.

Synthetic Monitoring involves deploying scripts to simulate the path an end-user might take through a web application, reporting back the performance of the simulator experiences. Examples of popular synthetic monitoring tools include WebPageTest and Lighthouse. The traffic measured is not of your actual users, but rather synthetically generated traffic collecting data on page performance.

Unlike RUM, synthetic monitoring provides a narrow view of performance that doesn't account for user differences, making it useful in getting basic data about an application's performance and spot-checking performance in development environments. Combined with other tools, such as network throttling, can provide excellent insight into potential problem areas.

See also

Term: Table Grid Box

  • Glossary
  • CSS
  • Tables

The Table Grid Box is a block level box which contains all of the table internal boxes, excluding the caption. The box which includes the caption is referred to as the Table Wrapper Box.

Term: Table Wrapper Box

  • Glossary
  • CSS
  • Tables

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

Term: Tag

  • CodingScripting
  • Glossary
  • HTML
  • Intro

In Glossary("HTML"), a tag is used for creating an Glossary("element").

The name of an HTML element is the name used in angle brackets such as <p> for paragraph. Note that the end tag's name is preceded by a slash character, </p>, and that in glossary("empty element", "empty elements"), the end tag is neither required nor allowed. If Glossary("attribute", "attributes") are not mentioned, default values are used in each case.

See also

Term: TCP handshake

  • Glossary
  • Networking
  • SSL
  • Security
  • TCP
  • TCP handshake
  • TLS
  • Web Performance

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

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

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

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

See also

Term: TCP slow start

  • Glossary
  • Infrastructure
  • Networking
  • TCP
  • Transmission Control Protocol
  • Web Performance
  • data

glossary('TCP') slow start helps buildup transmission speeds to the network's capabilities. It does this without initially knowing what those capabilities are and without creating congestion. glossary('TCP') slow start is an algorithm used to detect the available bandwidth for packet transmission, and balances the speed of a network connection. It prevents the appearance of network congestion whose capabilities are initially unknown, and slowly increases the volume of information diffused until the network's maximum capacity is found.

To implement TCP slow start, the congestion window (cwnd) sets an upper limit on the amount of data a source can transmit over the network before receiving an acknowledgment (ACK). The slow start threshold (ssthresh) determines the (de)activation of slow start. When a new connection is made, cwnd is initialized to one TCP data or acknowledgment packet, and waits for an acknowledgement, or ACK. When that ACK is received, the congestion window is incremented until the cwnd is greater than ssthresh. Slow start also terminates when congestion is experienced.

Congestion control

Congestion itself is a state that happens within a network layer when the message traffic is too busy it slows the network response time. The server sends data in TCP packets, the user's client then confirms delivery by returning acknowledgements, or ACKs. The connection has a limited capacity depending on hardware and network conditions. If the server sends too many packets too quickly, they will be dropped. Meaning, there will be no acknowledgement. The server registers this as missing ACKs. Congestion control algorithms use this flow of sent packets and ACKs to determine a send rate.

See also

Term: TCP

  • Glossary
  • Infrastructure
  • Networking
  • TCP
  • Transmission Control Protocol
  • data

TCP (Transmission Control Protocol) is an important network Glossary("protocol") that lets two hosts connect and exchange data streams. TCP guarantees the delivery of data and packets in the same order as they were sent. Vint Cerf and Bob Kahn, who were DARPA scientists at the time, designed TCP in the 1970s.

TCP's role is to ensure the packets are reliably delivered, error free. TCP has concurrence control, which means the initial requests start small, increasing in size to the levels of bandwidth the computers, servers, and network can support.

See also

Term: Telnet

  • Glossary
  • Infrastructure

Telnet is a command line tool and an underlying TCP/IP protocol for accessing remote computers.

See also

  • interwiki('wikipedia','Telnet') on Wikipedia

Term: Texel

  • 3D
  • Drawing
  • Glossary
  • Graphics
  • Texel
  • Texture

A Texel is a single-pixel within a texture map, which is an image that gets used (in whole or in part) as the image presented on a polygon's surface within a 3D rendered image. It is not to be confused with pixel which is the unit of screen space. This is one of the main differences between Texel's and pixels, pixels are image data. Texel components are made up of subjective data, therefore they can be an image as well as a depth map.

The process of mapping the appropriate Texel's to their corresponding points on a polygon is called texture mapping, which is a stage of the process of rendering a 3D image for display. Texture mapping is typically done prior to lighting the scene; however, in WebGL, lighting is performed as part of the texture mapping process.

Textures are characterised by collections of Texel's, as how images are characterised by collections of pixels. When texture mapping occurs the renderer maps Texel's to the appropriate pixels.

See also

Term: Thread

  • Glossary
  • Thread
  • asynchronous

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

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

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

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

See also

Term: Three js

  • Browser
  • CodingScripting
  • JavaScript
  • Programming Language
  • three.js

three.js is a Glossary("JavaScript")-based Glossary("WebGL") engine that can run GPU-powered games and other graphics-powered apps straight from the Glossary("browser"). The three.js library provides many features and Glossary("API","APIs") for drawing 3D scenes in your browser.

See also

Term: Time to first byte

  • Glossary
  • Performance
  • Reference
  • Web Performance

Time to First Byte (TTFB) refers to the time between the browser requesting a page and when it receives the first byte of information from the server. This time includes DNS lookup and establishing the connection using a TCP handshake and SSL handshake if the request is made over https.

TTFB is the time it takes between the start of the request and the start of the response, in milliseconds:

TTFB = responseStart - navigationStart

See also

Term: Time to interactive

  • Glossary
  • Performance
  • Reference
  • Web Performance

Time to Interactive (TTI) is a non-standardized web performance 'progress' metric defined as the point in time when the last Long Task finished and was followed by 5 seconds of network and main thread inactivity.

TTI, proposed by the Web Incubator Community Group in 2018, is intended to provide a metric that describes when a page or application contains useful content and the main thread is idle and free to respond to user interactions, including having event handlers registered.

Caveat:

TTI is derived by leveraging information from the domxref("Long Tasks API"). Although available in some performance monitoring tools, TTI is not a part of any official web specification at the time of writing.

See also

Term: TLD

  • Glossary
  • Web
  • WebMechanics

A TLD (top-level domain) is the most generic Glossary("domain") in the Internet's hierarchical Glossary("DNS") (domain name system). A TLD is the final component of a Glossary("domain name"), for example, "org" in developer.mozilla.org.

Glossary("ICANN") (Internet Corporation for Assigned Names and Numbers) designates organizations to manage each TLD. Depending on how strict an administrating organization might be, TLD often serves as a clue to the purpose, ownership, or nationality of a website.

Consider an example Internet address: https://developer.mozilla.org Here org is the TLD; mozilla.org is the second-level domain name; and developer is a subdomain name. All together, these constitute a fully-qualified domain name; the addition of https:// makes this a complete URL.

Glossary("IANA") today distinguishes the following groups of top-level domains:

  • country-code top-level domains (ccTLD)
    • : Two-character domains established for countries or territories. Example: .us for United States.
  • internationalized country code top-level domains (IDN ccTLD)
    • : ccTLDs in non-Latin character sets (e.g., Arabic or Chinese).
  • generic top-level domains (gTLD)
    • : Top-level domains with three or more characters.
  • unsponsored top-level domains
    • : Domains that operate directly under policies established by ICANN processes for the global Internet community, for example "com" and "edu".
  • sponsored top-level domains (sTLD)
    • : These domains are proposed and sponsored by private organizations that decide whether an applicant is eligible to use the TLD, based on community theme concepts.
  • infrastructure top-level domain
    • : This group consists of one domain, the Glossary("ARPA", "Address and Routing Parameter Area") (ARPA).

See also

Term: Transport Layer Security (TLS)

  • Cryptography
  • Glossary
  • Infrastructure
  • Security
  • Web Performance

Transport Layer Security (TLS), formerly known as Glossary("SSL", "Secure Sockets Layer (SSL)"), is a Glossary("protocol") used by applications to communicate securely across a network, preventing tampering with and eavesdropping on email, web browsing, messaging, and other protocols. Both SSL and TLS are client / server protocols that ensure communication privacy by using cryptographic protocols to provide security over a network. When a server and client communicate using TLS, it ensures that no third party can eavesdrop or tamper with any message.

All modern browsers support the TLS protocol, requiring the server to provide a valid Glossary("Digital certificate", "digital certificate") confirming its identity in order to establish a secure connection. It is possible for both the client and server to mutually authenticate each other, if both parties provide their own individual digital certificates.

Note: TLS 1.0 and 1.1 support will be removed from all major browsers in early 2020; you'll need to make sure your web server supports TLS 1.2 or 1.3 going forward. From version 74 onwards, Firefox will return a Secure Connection Failed error when connecting to servers using the older TLS versions (bug(1606734)).

See also

Term: TOFU

  • HTTP
  • SSH
  • Security

Trust On First Use (TOFU) is a security model in which a client needs to create a trust relationship with an unknown server. To do that, clients will look for identifiers (for example public keys) stored locally. If an identifier is found, the client can establish the connection. If no identifier is found, the client can prompt the user to determine if the client should trust the identifier.

TOFU is used in the SSH protocol, in HTTP Public Key Pinning (Glossary("HPKP")) where the browsers will accept the first public key returned by the server, and in HTTPHeader("Strict-Transport-Security") (Glossary("HSTS")) where a browser will obey the redirection rule.

See also

Term: Transferable objects

  • Transferable
  • Workers

Transferable objects are objects that own resources that can be transferred from one context to another, ensuring that the resources are only available in one context at a time. Following a transfer, the original object is no longer usable; it no longer points to the transferred resource, and any attempt to read or write the object will throw an exception.

Transferrable objects are commonly use to share resources that can only be safely exposed to a single JavaScript thread at a time. For example, an jsxref("ArrayBuffer") is a transferrable object that owns a block of memory. When such a buffer is transferred between threads, the associated memory resource is detached from the original buffer and attached to the buffer object created in the new thread. The buffer object in the original thread is no longer usable because it no longer owns a memory resource.

Transferring may also be used when creating deep copies of objects with domxref("structuredClone()"). Following the cloning operation, the transferred resources are moved rather than copied to the cloned object.

The mechanism used to transfer an object's resources depends on the object. For example, when an jsxref("ArrayBuffer") is transferred between threads, the memory resource that it points to is literally moved between contexts in a fast and efficient zero-copy operation. Other objects may be transferred by copying the associated resource and then deleting it from the old context.

Not all objects are transferable. A list of transferable objects is provided below.

Transferring objects between threads

The code below demonstrates how transferring works when sending a message from a main thread to a domxref("Web Workers API", "web worker thread","","true"). The jsxref("Uint8Array") is copied (duplicated) in the worker while its buffer is transferred. After transfer any attempt to read or write uInt8Array from the main thread will throw, but you can still check the byteLength to confirm it is now zero.

//
// Create an 8MB "file" and fill it.
var uInt8Array = new Uint8Array(1024 * 1024 * 8); // 8MB
for (var i = 0; i < uInt8Array.length; ++i) {
    uInt8Array[i] = i;
}
console.log(uInt8Array.byteLength); // 8388608

// Transfer the underlying buffer to a worker
worker.postMessage(uInt8Array, [uInt8Array.buffer]);
console.log(uInt8Array.byteLength); // 0

Note: Typed arrays like jsxref("Int32Array") and jsxref("Uint8Array"), are serializable, but not transferable. However their underlying buffer is an jsxref("ArrayBuffer"), which is a transferable object. We could have sent uInt8Array.buffer in the data parameter, but not uInt8Array in the transfer array.

Transferring during a cloning operation

The code below shows a domxref("structuredClone()") operation where the underlying buffer is copied from the original object to the clone.

//
const original = new Uint8Array(1024);
const clone = structuredClone(original);
console.log(original.byteLength); // 1024
console.log(clone.byteLength); // 1024

original[0] = 1;
console.log(clone[0]); // 0

// Transferring the Uint8Array would throw an exception as it is not a transferrable object
// const transferred = structuredClone(original, {transfer: [original]});

// We can transfer Uint8Array.buffer.
const transferred = structuredClone(original, { transfer: [original.buffer] });
console.log(transferred.byteLength); // 1024
console.log(transferred[0]); // 1

// After transferring Uint8Array.buffer cannot be used.
console.log(original.byteLength); // 0

Supported objects

The items that can be transferred are:

  • jsxref("ArrayBuffer")
  • domxref("MessagePort")
  • domxref("ReadableStream")
  • domxref("WritableStream")
  • domxref("TransformStream")
  • domxref("AudioData")
  • domxref("ImageBitmap")
  • domxref("VideoFrame")
  • domxref("OffscreenCanvas")

Note: Transferrable objects are marked up in Web IDL files with the attribute Transferrable.

See also

Term: Transient activation

  • Transient activation
  • Glossary
  • JavaScript

Transient activation (or "transient user activation") is a window state that indicates a user has recently pressed a button, moved a mouse, used a menu, or performed some other user interaction.

This state is sometimes used as a mechanism for ensuring that a web API can only function if triggered by user interaction. For example, scripts cannot arbitrarily launch a popup that requires transient activation ⁠—it must be triggered from a UI element's event handler.

Examples of APIs that require transient activation are:

  • domxref("MediaDevices.selectAudioOutput()")

Note: Transient activation expires after a timeout (if not renewed by further interaction), and may also be "consumed" by some APIs.

See also

Term: Tree shaking

  • JavaScript
  • Modules
  • Statement
  • Web Performance
  • export
  • import
  • tree shaking

Tree shaking is a term commonly used within a JavaScript context to describe the removal of dead code.

It relies on the import and export statements in ES2015 to detect if code modules are exported and imported for use between JavaScript files.

In modern JavaScript applications, we use module bundlers (e.g., webpack or Rollup) to automatically remove dead code when bundling multiple JavaScript files into single files. This is important for preparing code that is production ready, for example with clean structures and minimal file size.

See also

Term: Trident

  • Browser
  • Glossary
  • Infrastructure
  • Trident

Trident (or MSHTML) was a layout engine that powered Glossary("Microsoft Internet Explorer","Internet Explorer"). A Trident Glossary("fork") called EdgeHTML replaced Trident in Internet Explorer's successor, Glossary("Microsoft Edge","Edge").

See also

Term: Truthy

  • CodingScripting
  • Glossary
  • JavaScript

In Glossary("JavaScript"), a truthy value is a value that is considered true when encountered in a Glossary("Boolean") context. All values are truthy unless they are defined as Glossary("Falsy", "falsy") (i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN).

Glossary("JavaScript") uses Glossary("Type_Coercion", "type coercion") in Boolean contexts.

Examples of truthy values in JavaScript (which will be coerced to true in boolean contexts, and thus execute the if block):

//
if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

The logical AND operator, &&

If the first object is truthy, the logical AND operator returns the second operand:

//
true && "dog"
// returns "dog"

[] && "dog"
// returns "dog"

See also

  • Glossary("Falsy")
  • Glossary("Type_Coercion", "Type coercion")
  • Glossary("Boolean")

Term: TTL

  • Caching
  • Domain Name System
  • Glossary
  • Infrastructure
  • Networking
  • Performance

Time To Live (TTL) can refer to either the lifetime of a packet in a network, or the expiry time of cached data.

Networking

In networking, the TTL, embedded in the packet, is a usually defined as a number of hops or as an expiration timestamp after which the packet is dropped. It provides a way to avoids network congestion, but releasing packets after they roamed the network too long.

Caching

In the context of caching, TTL (as an unsigned 32-bit integer) being a part of the Glossary("Response header", "HTTP response header") or the Glossary("DNS") query, indicates the amount of time in seconds during which the resource can be cached by the requester.

See also

  • Interwiki("wikipedia", "Time to live", "TTL") on Wikipedia
  • RFC 2181 on IETF
  • RFC1035 on IETF

Term: TURN

  • Glossary
  • Infrastructure
  • TURN
  • WebMechanics
  • WebRTC

TURN (Traversal Using Relays around NAT) is a Glossary('protocol') enabling a computer to receive and send data from behind a glossary("NAT", "Network Address Translator") (NAT) or firewall. TURN is used by Glossary("WebRTC") to allow any two devices on the Internet to enter a peer-to-peer connection.

See also

Term: Type coercion

  • Coercion
  • JavaScript
  • Type coercion

Type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers). _Glossary("Type conversion")_ is similar to _type coercion_ because they both convert values from one data type to another with one key difference — type coercion is implicit whereas type conversion can be either implicit or explicit.

Examples

//
const value1 = '5';
const value2 = 9;
let sum = value1 + value2;

console.log(sum);

In the above example, JavaScript has coerced the 9 from a number into a string and then concatenated the two values together, resulting in a string of 59. JavaScript had a choice between a string or a number and decided to use a string.

The compiler could have coerced the 5 into a number and returned a sum of 14, but it did not. To return this result, you'd have to explicitly convert the 5 to a number using the jsxref("Global_Objects/Number", "Number()") method:

//
sum = Number(value1) + value2;

See also

  • Interwiki("wikipedia", "Type conversion") (Wikipedia)

  • Glossary

    • Glossary("Type")
    • Glossary("Type conversion")

Term: Type conversion

  • CodingScripting
  • Glossary
  • Type casting
  • Type conversion

Type conversion (or typecasting) means transfer of data from one data type to another. Implicit conversion happens when the compiler automatically assigns data types, but the source code can also explicitly require a conversion to take place. For example, given the instruction 5+2.0, the floating point 2.0 is implicitly typecasted into an integer, but given the instruction Number("0x11"), the string "0x11" is explicitly typecasted as the number 17.

See also

  • Interwiki("wikipedia", "Type conversion") (Wikipedia)

  • Glossary

    • Glossary("Type")
    • Glossary("Type coercion")

Term: Type

  • CodingScripting
  • Glossary
  • JavaScript

Type is a characteristic of a glossary("value") affecting what kind of data it can store, and the structure that the data will adhere to. For example, a Glossary("boolean") Data Type can hold only a true or false value at any given time, whereas a Glossary("string") has the ability to hold a string or a sequence of characters, a Glossary("number") can hold numerical values of any kind, and so on.

A value's data type also affects the operations that are valid on that value. For example, a value of type number can be multiplied by another number, but not by a string - even if that string contains only a number, such as the string "2".

Types also provides us with useful knowledge about the comparison between different values. Comparison between structured types is not always an easy assumption, as even if the previous data structure is the same, there could be inherited structures inside of the Prototype Chain.

If you are unsure of the type of a value, you can use the typeof operator.

See also

  • Interwiki("wikipedia", "Data type") on Wikipedia

  • JavaScript data types

  • Glossary

    • Glossary("JavaScript")
    • Glossary("string")
    • Glossary("number")
    • Glossary("bigint")
    • Glossary("boolean")
    • Glossary("null")
    • Glossary("undefined")
    • Glossary("symbol")

Term: UDP (User Datagram Protocol)

  • Glossary
  • Infrastructure
  • Networking
  • Protocols
  • UDP

UDP (User Datagram Protocol) is a long standing glossary("protocol") used together with glossary("IPv6","IP") for sending data when transmission speed and efficiency matter more than security and reliability.

UDP uses a simple connectionless communication model with a minimum of protocol mechanism. UDP provides checksums for data integrity, and port numbers for addressing different functions at the source and destination of the datagram. It has no handshaking dialogues, and thus exposes the user's program to any unreliability of the underlying network; There is no guarantee of delivery, ordering, or duplicate protection. If error-correction facilities are needed at the network interface level, an application may use the Transmission Control Protocol (TCP) or Stream Control Transmission Protocol (SCTP) which are designed for this purpose.

UDP is suitable for purposes where error checking and correction are either not necessary or are performed in the application; UDP avoids the overhead of such processing in the protocol stack. Time-sensitive applications often use UDP because dropping packets is preferable to waiting for packets delayed due to retransmission, which may not be an option in a real-time system.

See also

  • Interwiki("wikipedia", "User Datagram Protocol") on Wikipedia
  • Specification

Term: UI

  • Accessibility
  • Design
  • Glossary

User Interface (UI) is anything that facilitates the interaction between a user and a machine. In the world of computers, it can be anything from a keyboard, a joystick, a screen or a program. In case of computer software, it can be a command-line prompt, a webpage, a user input form, or the front-end of any application.

See also

  • interwiki("wikipedia", "User_interface", "User interface") on Wikipedia
  • interwiki("wikipedia", "Front_end_development", "Front end development") on Wikipedia

Term: undefined

  • CodingScripting
  • Glossary
  • JavaScript
  • NeedsContent

undefined is a Glossary("primitive") value automatically assigned to glossary("variable", "variables") that have just been declared, or to formal Glossary("Argument","arguments") for which there are no actual arguments.

Example

//
var x; //create a variable but assign it no value

console.log("x's value is", x); //logs "x's value is undefined"

See also

Term: Unicode

  • Infrastructure

Unicode is a standard Glossary("Character set","character set") that numbers and defines Glossary("Character","characters") from the world's different languages, writing systems, and symbols.

By assigning each character a number, programmers can create Glossary("Character encoding","character encodings"), to let computers store, process, and transmit any combination of languages in the same file or program.

Before Unicode, it was difficult and error-prone to mix languages in the same data. For example, one character set would store Japanese characters, and another would store the Arabic alphabet. If it was not clearly marked which parts of the data were in which character set, other programs and computers would display the text incorrectly, or damage it during processing. If you've ever seen text where characters like curly quotes ("") were replaced with gibberish like £, then you've seen this problem, known as Interwiki("wikipedia", "Mojibake").

The most common Unicode character encoding on the Web is Glossary("UTF-8"). Other encodings exist, like UTF-16 or the obsolete UCS-2, but UTF-8 is recommended.

See also

Term: URI

  • Glossary
  • HTTP
  • Search
  • URI
  • URL

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

The most common are Glossary("URL","URL")s, which identify the resource by giving its location on the Web. Glossary("URN","URN")s, by contrast, refer to a resource by a name, in a given namespace, such as the ISBN of a book.

See also

Term: URL

  • Glossary
  • Infrastructure
  • l10n:priority

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

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

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

See also

Term: URN

  • Glossary
  • Intro
  • Navigation
  • urn

URN (Uniform Resource Name) is a Glossary("URI") in a standard format, referring to a resource without specifying its location or whether it exists. This example comes from RFC3986: urn:oasis:names:specification:docbook:dtd:xml:4.1.2

See also

  • Interwiki("wikipedia", "URN") on Wikipedia

Term: Usenet

  • Glossary
  • WebMechanics

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

  • Interwiki("wikipedia", "Usenet") on Wikipedia

Term: User agent

  • Browser
  • Glossary
  • UA
  • User-agent
  • Web Browser
  • WebMechanics
  • agent
  • user agent
  • userAgent

A user agent is a computer program representing a person, for example, a Glossary("Browser","browser") in a Glossary("World Wide Web", "Web") context.

Besides a browser, a user agent could be a bot scraping webpages, a download manager, or another app accessing the Web. Along with each request they make to the server, browsers include a self-identifying HTTPHeader("User-Agent") Glossary("HTTP") header called a user agent (UA) string. This string often identifies the browser, its version number, and its host operating system.

Spam bots, download managers, and some browsers often send a fake UA string to announce themselves as a different client. This is known as user agent spoofing.

The user agent string can be accessed with Glossary("JavaScript") on the client side using the domxref("Navigator/userAgent", "NavigatorID.userAgent") property.

A typical user agent string looks like this: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0".

See also

  • interwiki("wikipedia", "User agent") on Wikipedia

  • domxref("Navigator/userAgent", "NavigatorID.userAgent")

  • Browser detection using the user agent

  • RFC(2616, "14.43"): The User-Agent header

  • Glossary:

    • Glossary("Browser")

  • HTTP Headers

    • HTTPHeader("User-agent")

Term: UTF-8

  • CodingScripting
  • Glossary
  • HTML
  • JavaScript
  • Utf-8

UTF-8 (UCS Transformation Format 8) is the World Wide Web's most common Glossary("Character encoding", "character encoding"). Each character is represented by one to four bytes. UTF-8 is backward-compatible with Glossary("ASCII") and can represent any standard Unicode character.

The first 128 UTF-8 characters precisely match the first 128 ASCII characters (numbered 0-127), meaning that existing ASCII text is already valid UTF-8. All other characters use two to four bytes. Each byte has some bits reserved for encoding purposes. Since non-ASCII characters require more than one byte for storage, they run the risk of being corrupted if the bytes are separated and not recombined.

See also

Term: UUID

  • Glossary
  • Infrastructure

A Universally Unique Identifier (UUID) is a label used to uniquely identify a resource among all other resources of that type.

Computer systems generate UUIDs locally using very large random numbers. In theory the IDs may not be globally unique, but the probability of duplicates is vanishingly small. If systems really need absolutely unique IDs then these might be allocated by a central authority.

UUIDs are 128-bit values that are canonically represented as a 36-character string in the format 123e4567-e89b-12d3-a456-426614174000 (5 hex strings separated by hyphens). There are a number of versions that differ slightly in the way they are calculated; for example, the inclusion of temporal information.

The formal definition can be found in: RFC4122: A Universally Unique IDentifier (UUID) URN Namespace.

See also

Term: UX

  • Accessibility
  • Composing
  • Design
  • Glossary
  • Navigation

UX is an acronym that stands for User eXperience. It is the study of the interaction between users and a system. Its goal is to make a system easy to interact with from the user's point of view.

The system can be any kind of product or application that an end user is meant to interact with. UX studies undertaken on a web page for example can demonstrate whether it is easy for users to understand the page, navigate to different areas, and complete common tasks, and where such processes could have less friction.

See also

  • Interwiki("wikipedia", "User experience") on Wikipedia

Term: Validator

  • Beginner
  • Glossary
  • Security

A validator is a program that checks for syntax errors in code. Validators can be created for any format or language, but in our context we speak of tools that check Glossary("HTML"), Glossary("CSS"), and Glossary("XML").

See also

Term: Value

  • CodingScripting
  • Glossary
  • NeedsContent

In the context of data or an object Glossary("Wrapper", "wrapper") around that data, the value is the Glossary("Primitive","primitive value") that the object wrapper contains. In the context of a Glossary("Variable","variable") or Glossary("Property","property"), the value can be either a primitive or an Glossary("Object reference","object reference").

See also

  • Interwiki("wikipedia", "Primitive wrapper class") on Wikipedia

Term: Variable

  • CodingScripting
  • Glossary
  • JavaScript

A variable is a named reference to a Glossary("Value", "value"). That way an unpredictable value can be accessed through a predetermined name.

See also

Term: Vendor Prefix

  • CodingScripting
  • Glossary

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process. Developers should wait to include the unprefixed property until browser behavior is standardized.

Note: Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites.

Lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a stable state much more quickly.

CSS prefixes

The major browsers use the following prefixes:

  • -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers including Firefox for iOS; basically, any WebKit based browser)
  • -moz- (Firefox)
  • -o- (old pre-WebKit versions of Opera)
  • -ms- (Internet Explorer and Microsoft Edge)

Sample usage:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

API prefixes

Historically, vendors have also used prefixes for experimental APIs. If an entire interface is experimental, then the interface's name is prefixed (but not the properties or methods within). If an experimental property or method is added to a standardized interface, then the individual method or property is prefixed.

Interface prefixes

Prefixes for interface names are upper-cased:

  • WebKit (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
  • Moz (Firefox)
  • O (Older, pre-WebKit, versions of Opera)
  • MS (Internet Explorer and Microsoft Edge)

Property and method prefixes

The prefixes for properties and methods are lower-case:

  • webkit (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
  • moz (Firefox)
  • o (Old, pre-WebKit, versions of Opera)
  • ms (Internet Explorer and Microsoft Edge)

Sample usage:

//
var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame;

See also

  • Interwiki("wikipedia", "CSS_hack#Browser_prefixes", "Vendor prefix") on Wikipedia

Term: Viewport

  • CodingScripting
  • Glossary
  • Layout
  • viewport

A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the document you're viewing which is currently visible in its window (or the screen, if the document is being viewed in full screen mode). Content outside the viewport is not visible onscreen until scrolled into view.

The portion of the viewport that is currently visible is called the Glossary("visual viewport"). This can be smaller than the layout viewport, such as when the user has pinched-zoomed. The Glossary("layout viewport") remains the same, but the visual viewport became smaller.

See also

Term: Visual Viewport

  • Glossary
  • VisualViewport
  • viewport
  • visual viewport

The portion of the Glossary("viewport") that is currently visible is called the visual viewport. This can be smaller than the layout viewport, such as when the user has pinched-zoomed. The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page.

See also

Term: VoIP

  • Glossary
  • Infrastructure
  • 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

  • Interwiki("wikipedia", "VoIP") on Wikipedia

Term: W3C

  • Community
  • Consortium
  • Glossary
  • Intro
  • W3C
  • Web consortium

The World Wide Web Consortium (W3C) is an international body that maintains Glossary("World Wide Web", "Web-related") rules and frameworks.

It consists of over 350 member-organizations that jointly develop Web standards, run outreach programs, and maintain an open forum for talking about the Web. The W3C coordinates companies in the industry to make sure they implement the same W3C standards.

Each standard passes through four stages of maturity: Working Draft (WD), Candidate Recommendation (CR), Proposed Recommendation (PR), and W3C Recommendation (REC).

See also

  • W3C website
  • Interwiki("wikipedia", "World Wide Web Consortium", "W3C") on Wikipedia

Term: WAI

  • Accessibility
  • Glossary

WAI or Web Accessibility Initiative is an effort by the World Wide Web Consortium (W3C) to improve accessibility for people with various challenges, who may need a nonstandard Glossary("browser") or devices.

See also

  • WAI website
  • Interwiki("wikipedia", "Web Accessibility Initiative") on Wikipedia

Term: WCAG

  • Accessibility
  • Glossary
  • WCAG
  • Web Guidelines

Web Content Accessibility Guidelines (WCAG) are a recommendation published by the Glossary("WAI","Web Accessibility Initiative") group at the Glossary("W3C"). They outline a set of guidelines for making content accessible primarily for people with disabilities but also for limited-resource devices such as mobile phones.

WCAG 2.0 which superseded WCAG 1.0 was published as a W3C Recommendation on 11 December 2008. It consists of 12 guidelines organized under 4 principles (perceivable, operable, understandable, and robust) and each guideline has testable success criteria.

WCAG uses three levels of conformance:

  • Priority 1: Web developers must satisfy these requirements, otherwise it will be impossible for one or more groups to access the Web content. Conformance to this level is described as A.
  • Priority 2: Web developers should satisfy these requirements, otherwise some groups will find it difficult to access the Web content. Conformance to this level is described as AA or Double-A.
  • Priority 3: Web developers may satisfy these requirements, in order to make it easier for some groups to access the Web content. Conformance to this level is described as AAA or Triple-A.

See also

Term: Web performance

  • Glossary
  • Perceived Performance
  • Reference
  • Web Performance

Web performance is the objective time from when a request for content is made until the requested content is displayed in the user's browser, objective render times, and the subjective user experience of load time and runtime.

Objectively, it is measurable time, in milliseconds, it takes for the web page or web application to be downloaded, painted in the user's web browser, and become responsive and interactive. It is the frames per second and times the main thread is not available for user interactions. Subjectively, it is the user's perception of whether the time it takes between the time the user requests the content and the time until the user feels the content requested is available and usable feels slow or fast.

See also

Term: Web server

  • web server
  • web-server

A web server is a piece of software that often runs on a hardware server offering service to a user, usually referred to as the client. A server, on the other hand, is a piece of hardware that lives in a room full of computers, commonly known as a data center.

See also

Term: Web standards

  • Glossary
  • Infrastructure
  • Web Standards
  • standards
  • web specifications

Web standards are rules established by international standards bodies and defining how the Glossary("World Wide Web", "Web") works (and sometimes controlling the Glossary("Internet") as well).

Several standards bodies are responsible for defining different aspects of the Web, and all the standards must coordinate to keep the Web maximally usable and accessible. Web standards also must evolve to improve the current status and adapt to new circumstances.

This non-exhaustive list gives you an idea of which standards websites and network systems must conform to:

  • IETF (Internet Engineering Task Force): Internet standards (STD), which among other things govern set-up and use of Glossary("URI", "URIs"), Glossary("HTTP"), and Glossary("MIME")
  • Glossary("W3C"): specifications for markup language (e.g., Glossary("HTML")), style definitions (i.e., Glossary("CSS")), Glossary("DOM"), Glossary("Accessibility", "accessibility")
  • IANA (Internet Assigned Numbers Authority): name and number registries
  • Ecma Intl.: scripting standards, most prominently for Glossary("JavaScript")
  • Glossary("ISO") (International Organization for Standardization): standards governing a diverse array of aspects, including character encodings, website management, and user-interface design

See also

  • Interwiki("wikipedia", "Web standards") on Wikipedia

Term: WebAssembly

  • Glossary
  • Infrastructure

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

See also

Term: WebDAV

  • Glossary
  • Infrastructure

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

WebDAV is rarely used alone, but two extensions are very common: Glossary("CalDAV") (remote-access calendar) and Glossary("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

  • Interwiki("wikipedia", "WebDAV") on Wikipedia

  • Specifications:

    • rfc(2518)
    • rfc(3253)
    • rfc(3744)

Term: WebExtensions

  • CodingScripting
  • Glossary
  • NeedsContent
  • WebExtensions

WebExtensions is a cross-browser system for developing browser extensions in Firefox. This system provides APIs, which to a large extent are supported across different browsers like Mozilla Firefox, Google Chrome, Opera Browser, Microsoft Edge, or Apple Safari.

See also

Term: WebGL

  • Advanced
  • CodingScripting
  • Glossary
  • Web Graphics
  • WebGL

WebGL (Web Graphics Library) is a Glossary("JavaScript") Glossary("API") that draws interactive 2D and 3D graphics.

The Khronos Group maintains WebGL, which is based on Glossary("OpenGL") ES 2.0.

You can invoke WebGL within the Glossary("HTML") HTMLElement("canvas") element, which provides a rendering surface.

All major Glossary("Browser","browsers") now support WebGL, but its availability depends also on external factors (e.g. GPU support).

See also

Term: WebIDL

  • CodingScripting
  • Glossary
  • WebIDL

WebIDL is the interface description language used to describe the Glossary("type", "data types"), Glossary("interface", "interfaces"), Glossary("method", "methods"), Glossary("property", "properties"), and other components which make up a Web application programming interface (Glossary("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 Glossary("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

Term: WebKit

  • Browser
  • Glossary
  • Intro
  • Web
  • WebKit
  • WebMechanics

WebKit is a framework that displays properly-formatted webpages based on their markup. Glossary("Apple Safari") depends on WebKit, and so do many mobile browsers (since WebKit is highly portable and customizable).

WebKit began life as a fork of KDE's KHTML and KJS libraries, but many individuals and companies have since contributed (including KDE, Apple, Google, and Nokia).

WebKit is an Apple trademark, and the framework is distributed under a BSD-form license. However, two important components fall under the Glossary("LGPL"): the WebCore rendering library and the JavaScriptCore engine.

See also

Term: WebM

  • Composing
  • Glossary
  • Infrastructure
  • WebM

WebM is royalty-free and is an open web video format natively supported in Mozilla Firefox.

See also

Term: WebP

  • Beginner
  • Composing
  • Glossary
  • Infrastructure
  • WebP

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

See also

Term: WebRTC

  • CodingScripting
  • Glossary
  • Infrastructure
  • JavaScript
  • P2P
  • VoIP
  • Web
  • WebRTC

WebRTC (Web Real-Time Communication) is an Glossary("API") that can be used by video-chat, voice-calling, and P2P-file-sharing Web apps.

WebRTC consists mainly of these parts:

  • domxref("MediaDevices.getUserMedia", "getUserMedia()")
    • : Grants access to a device's camera and/or microphone, and can plug in their signals to a
  • domxref("RTCPeerConnection")
    • : An interface to configure video chat or voice calls.
  • domxref("RTCDataChannel")
    • : Provides a method to set up a Glossary("P2P", "peer-to-peer") data pathway between browsers.

See also

Term: WebSockets

  • Connection
  • Glossary
  • Infrastructure
  • Networking
  • Protocols
  • Web
  • WebSocket

WebSocket is a Glossary("protocol") that allows for a persistent Glossary("TCP") connection between Glossary("Server", "server") and client so they can exchange data at any time.

Any client or server application can use WebSocket, but principally web Glossary("Browser", "browsers") and web servers. Through WebSocket, servers can pass data to a client without prior client request, allowing for dynamic content updates.

See also

Term: WebVTT

  • Audio
  • CodingScripting
  • Glossary
  • Video
  • Web
  • WebVTT

WebVTT (Web Video Text Tracks) is a Glossary("W3C") specification for a file format marking up text track resources in combination with the HTML HTMLElement("track") element.

WebVTT files provide metadata that is time-aligned with audio or video content like captions or subtitles for video content, text video descriptions, chapters for content navigation, and more.

See also

Term: WHATWG

  • Community
  • DOM
  • Glossary
  • HTML
  • HTML5
  • WHATWG
  • Web
  • standards

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

See also

Term: Whitespace

  • Glossary
  • Lexical Grammar
  • whitespace

Whitespace refers to Glossary("Character", "characters") which are used to provide horizontal or vertical space between other characters. Whitespace is often used to separate tokens in Glossary("HTML"), Glossary("CSS"), Glossary("JavaScript"), and other computer languages.

Whitespace characters and their usage vary among languages.

In HTML

The Infra Living Standard defines five characters as "ASCII whitespace": U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, and U+0020 SPACE.

In JavaScript

The ECMAScript Language Specification defines several Unicode codepoints as "white space": U+0009 CHARACTER TABULATION <TAB>, U+000B LINE TABULATION <VT>, U+000C FORM FEED <FF>, U+0020 SPACE <SP>, U+00A0 NO-BREAK SPACE <NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP>, and any other Unicode "Space_Separator" code points <USP>.

See also

Term: WindowProxy

  • Glossary
  • Window
  • WindowProxy

A WindowProxy object is a wrapper for a Window object. A WindowProxy object exists in every browsing context. All operations performed on a WindowProxy object will also be applied to the underlying Window object it currently wraps. Therefore, interacting with a WindowProxy object is almost identical to directly interacting with a Window object. When a browsing context is navigated, the Window object its WindowProxy wraps is changed.

See also

Term: World Wide Web

  • Glossary
  • Infrastructure
  • WWW
  • World Wide Web

The World Wide Web—commonly referred to as WWW, W3, or the Web—is an interconnected system of public webpages accessible through the Glossary("Internet"). The Web is not the same as the Internet: the Web is one of many applications built on top of the Internet.

Tim Berners-Lee proposed the architecture of what became known as the World Wide Web. He created the first web Glossary("Server","server"), web Glossary("Browser","browser"), and webpage on his computer at the CERN physics research lab in 1990. In 1991, he announced his creation on the alt.hypertext newsgroup, marking the moment the Web was first made public.

The system we know today as "the Web" consists of several components:

  • The Glossary("HTTP") protocol governs data transfer between a server and a client.
  • To access a Web component, a client supplies a unique universal identifier, called a Glossary("URL") (uniform resource locator) or Glossary("URI") (uniform resource identifier) (formally called Universal Document Identifier (UDI)).
  • Glossary("HTML") (hypertext markup language) is the most common format for publishing web documents.

Linking, or connecting resources through Glossary("Hyperlink","hyperlinks"), is a defining concept of the Web, aiding its identity as a collection of connected documents.

Soon after inventing the Web, Tim Berners-Lee founded the Glossary("W3C") (World Wide Web Consortium) to standardize and develop the Web further. This consortium consists of core Web interest groups, such as web browser developers, government entities, researchers, and universities. Its mission includes education and outreach.

See also

Term: Wrapper

  • CodingScripting
  • Glossary
  • 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

  • Interwiki("wikipedia", "Wrapper function") (Wikipedia)

  • MDN Web Docs Glossary

    • Glossary("API")
    • Glossary("Class")
    • Glossary("Function")

Term: XForms

  • CodingScripting
  • Glossary
  • Deprecated
  • XForms

XForms is a convention for building Web forms and processing form data in the glossary("XML") format.

Note: No major browser supports XForms any longer—we suggest using HTML5 forms instead.

Term: XHR (XMLHttpRequest)

  • API
  • Beginner
  • CodingScripting
  • Glossary
  • XMLHttpRequest

domxref("XMLHttpRequest") (XHR) is a Glossary("JavaScript") Glossary("API") to create Glossary("AJAX") requests. Its methods provide the ability to send network requests between the Glossary("browser") and a Glossary("server").

See also

Term: XHTML

  • CodingScripting
  • Glossary
  • XHTML

XHTML is a term that was historically used to describe HTML documents written to conform with Glossary("XML") syntax rules.

Code sample

(Note that this has not been thoroughly tested for all circumstances and may not necessarily reflect the standard behavior completely.)

Note also that if you wish to allow xml:base, you will need the xml:base function, and the line beginning var href = ... should become:

//
var href = getXmlBaseLink(/* XLink sans xml:base */ xinclude.getAttribute('href'), /* Element to query from */ xinclude);
//

function resolveXIncludes(docu) {
    // http://www.w3.org/TR/xinclude/#xml-included-items
    var xincludes = docu.getElementsByTagNameNS('http://www.w3.org/2001/XInclude', 'include');
    if (xincludes) {
        for (i = 0; i < xincludes.length; i++) {
            var xinclude = xincludes[i];
            var href = xinclude.getAttribute('href');
            var parse = xinclude.getAttribute('parse');
            var xpointer = xinclude.getAttribute('xpointer');
            var encoding = xinclude.getAttribute('encoding'); // e.g., UTF-8 // "text/xml or application/xml or matches text/*+xml or application/*+xml" before encoding (then UTF-8)
            var accept = xinclude.getAttribute('accept'); // header "Accept: "+x
            var acceptLanguage = xinclude.getAttribute('accept-language'); // "Accept-Language: "+x
            var xiFallback = xinclude.getElementsByTagNameNS('http://www.w3.org/2001/XInclude', 'fallback')[0]; // Only one such child is allowed
            if (href === '' || href === null) {
                // Points to same document if empty (null is equivalent to empty string)
                href = null; // Set for uniformity in testing below
                if (parse === 'xml' && xpointer === null) {
                    alert('There must be an XPointer attribute present if "href" is empty an parse is "xml"');
                    return false;
                }
            } else if (href.match(/#$/, '') || href.match(/^#/, '')) {
                alert('Fragment identifiers are disallowed in an XInclude "href" attribute');
                return false;
            }
            var j;
            var xincludeParent = xinclude.parentNode;
            try {
                netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect UniversalBrowserRead'); // Necessary with file:///-located files trying to reach external sites
                if (href !== null) {
                    var response, responseType;
                    var request = new XMLHttpRequest();
                    request.open('GET', href, false);
                    request.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
                    request.setRequestHeader('Cache-Control', 'no-cache');
                    if (accept) {
                        request.setRequestHeader('Accept', accept);
                    }
                    if (acceptLanguage) {
                        request.setRequestHeader('Accept-Language', acceptLanguage);
                    }
                    switch (parse) {
                        case 'text':
                            // Priority should be on media type:

                            var contentType = request.getResponseHeader('Content-Type');

                            //text/xml; charset="utf-8" // Send to get headers first?
                            // Fix: We test for file extensions as well in case file:// doesn't return content type (as seems to be the case); can some other tool be used in FF (or IE) to detect encoding of local file? Probably just need BOM test since other encodings must be specified
                            var patternXML = /\.(svg|xml|xul|rdf|xhtml)$/;
                            if (
                                (contentType && contentType.match(/[text|application]\/(.*)\+?xml/)) ||
                                (href.indexOf('file://') === 0 && href.match(patternXML))
                            ) {
                                /* Grab the response as text (see below for that routine) and then find encoding within*/
                                var encName = '([A-Za-z][A-Za-z0-9._-]*)';
                                var pattern = new RegExp('^<\\?xml\\s+.*encoding\\s*=\\s*([\'"])' + encName + '\\1.*\\?>'); // Check document if not?
                                // Let the request be processed below
                            } else {
                                if (encoding === '' || encoding === null) {
                                    // Encoding has no effect on XML
                                    encoding = 'utf-8';
                                }
                                request.overrideMimeType('text/plain; charset=' + encoding); //'x-user-defined'
                            }
                            responseType = 'responseText';
                            break;
                        case null:
                        case 'xml':
                            responseType = 'responseXML';
                            break;
                        default:
                            alert('XInclude element contains an invalid "parse" attribute value');
                            return false;
                            break;
                    }
                    request.send(null);
                    if ((request.status === 200 || request.status === 0) && request[responseType] !== null) {
                        response = request[responseType];
                        if (responseType === 'responseXML') {
                            // apply xpointer (only xpath1() subset is supported)
                            var responseNodes;
                            if (xpointer) {
                                var xpathResult = response.evaluate(xpointer, response, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
                                var a = [];
                                for (var k = 0; k < xpathResult.snapshotLength; k++) {
                                    a[k] = xpathResult.snapshotItem(k);
                                }
                                responseNodes = a;
                            } else {
                                // Otherwise, the response must be a single well-formed document response
                                responseNodes = [response.documentElement]; // Put in array so can be treated the same way as the above
                            }
                            // PREPEND ANY NODE(S) (AS XML) THEN REMOVE XINCLUDE
                            for (j = 0; j < responseNodes.length; j++) {
                                xincludeParent.insertBefore(responseNodes[j], xinclude);
                            }
                            xincludeParent.removeChild(xinclude);
                        } else if (responseType === 'responseText') {
                            if (encName) {
                                var encodingType = response.match(pattern);
                                if (encodingType) {
                                    encodingType = encodingType[2];
                                } else {
                                    encodingType = 'utf-8';
                                }
                                // Need to make a whole new request apparently since cannot convert the encoding after receiving it (to know what the encoding was)
                                var request2 = new XMLHttpRequest();
                                request2.overrideMimeType('text/plain; charset=' + encodingType);
                                request2.open('GET', href, false);
                                request2.setRequestHeader('If-Modified-Since', 'Thu, 1 Jan 1970 00:00:00 GMT');
                                request2.setRequestHeader('Cache-Control', 'no-cache');
                                request2.send(null);
                                response = request2[responseType]; // Update the response for processing
                            }

                            // REPLACE XINCLUDE WITH THE RESPONSE AS TEXT
                            var textNode = docu.createTextNode(response);
                            xincludeParent.replaceChild(textNode, xinclude);
                        }

                        // replace xinclude in doc with response now (as plain text or XML)
                    }
                }
            } catch (e) {
                // Use xi:fallback if XInclude retrieval above failed
                var xiFallbackChildren = xiFallback.childNodes;
                // PREPEND ANY NODE(S) THEN REMOVE XINCLUDE
                for (j = 0; j < xiFallbackChildren.length; j++) {
                    xincludeParent.insertBefore(xiFallbackChildren[j], xinclude);
                }
                xincludeParent.removeChild(xinclude);
            }
        }
    }
    return docu;
}

Term: XLink

  • CodingScripting
  • Glossary

XLink is a W3C standard which is used to describe links between XML and XML or other documents. Some its behaviors are left to the implementation to determine how to handle.

Simple XLinks are "supported" in Firefox (at least in SVG and MathML), though they do not work as links if one loads a plain XML document with XLinks and attempts to click on the relevant points in the XML tree.

For those who may have found XLink 1.0 cumbersome for regular links, XLink 1.1 drops the need to specify xlink:type="simple" for simple links.

XLink is used in SVG, MathML, and other important standards.

Specifications

See also

Term: XML

  • CodingScripting
  • Glossary
  • XML
  • l10n:priority

eXtensible Markup Language (XML) is a generic markup language specified by the W3C. The information technology (IT) industry uses many languages based on XML as data-description languages.

See also

Term: XPath

  • CodingScripting
  • Glossary
  • XML
  • XPath

XPath is a query language that can access sections and content in an glossary("XML") document.

See also

Term: XQuery

  • CodingScripting
  • Glossary
  • XML
  • XQuery

XQuery is a computer language for updating, retrieving, and calculating data in glossary("XML") databases.

See also

Term: XSLT

  • CodingScripting
  • Glossary
  • XML
  • XSLT

eXtensible Stylesheet Language Transformations (XSLT) is a declarative language used to convert Glossary("XML") documents into other XML documents, Glossary("HTML"), Glossary("PDF"), plain text, and so on.

XSLT has its own processor that accepts XML input, or any format convertible to an XQuery and XPath Data Model. The XSLT processor produces a new document based on the XML document and an XSLT stylesheet, making no changes to the original files in the process.

See also

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment