recursal/MDN huggingface dataset:
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 cryptography — they ensure the integrity of transmitted data, and provide the basis for HMAC, which enables message authentication.

See also
--------

* Hash function on Wikipedia
Long task
=========

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

* Long task API
Metadata
========

**Metadata** is — in its very simplest definition — data that describes data. For example, an HTML document is data, but HTML can also contain metadata in its `<head>` element that describes the document — for example who wrote it, and its summary.

See also
--------

* Learn: metadata
* metadata on Wikipedia
* The `<meta>` element on MDN
Data structure
==============

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

See also
--------

* Data structure on Wikipedia
Control flow
============

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 conditional structure or `if...else`, so that different code executes depending on whether the form is complete or not:


```js
if (isEmpty(field)) {
  promptUser();
} else {
  submitForm();
}
```


A typical script in JavaScript or PHP (and the like) includes many control structures, including conditionals, loops and functions. Parts of a script may also be set to execute when 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
--------

* Control flow on Wikipedia
* JavaScript Reference - Control flow on MDN
* Statements (Control flow) on MDN
Git
===

**Git** is a free, open-source, distributed Source Code Management (SCM) 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
--------

* Official website with documentation
* GitHub, a Git-based graphical project host
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
--------

* Learn about web performance
* Perceived performance
Continuous 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.
Media (Audio-visual presentation)
=================================

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

* 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
* `<audio>` and `<video>` elements, used to present media in HTML documents
Media (CSS)
===========

In the context of CSS (Cascading Style Sheets), the term ***media*** refers to the destination to which the document is to be drawn by the 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
--------

* Using media queries
* Media queries
* `@media` at-rule: Conditionally apply part of a stylesheet, based on the result of a media query.
* `Window.matchMedia()`: Test the viewing device against a media query
Boolean attribute (HTML)
========================

A **boolean attribute** in HTML is an attribute that represents `true` or `false` values. If an HTML tag contains a boolean attribute - no matter the value of that attribute - the attribute is set to `true` on that element. If an HTML tag does not contain the attribute, the attribute is set to `false`.

If the attribute is present, it can have one of the following values:

* no value at all, e.g. `attribute`
* the empty string, e.g. `attribute=""`
* attribute's name itself, with no leading or trailing whitespace, e.g. `attribute="attribute"`

**Note:** The strings "true" and "false" are invalid values. To set the attribute to `false`, the attribute should not be present in the element tag. Though modern browsers treat *any* string value as `true`, you should not rely on that behavior.

Here's an example of a HTML boolean attribute `checked`:


```html
<!-- The following checkboxes will be checked on initial rendering -->
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />

<!-- The following checkbox will not be checked on initial rendering -->
<input type="checkbox" />
```

See also
--------

* Enumerated
Boolean (JavaScript)
====================

A **Boolean** in JavaScript is a primitive value that can be either `true` or `false`.

A `Boolean` object is a wrapper around a Boolean primitive.

See also
--------

* The JavaScript global object
* JavaScript data types and data structures
Boolean attribute (ARIA)
========================

A **boolean attribute** in ARIA is an enumerated attribute that includes `true` or `false` in the enumerated list.

In ARIA, booleans only come in the form of strings `"true"` and `"false"`.

See also
--------

* Enumerated that contains more behavioral details and examples of ARIA boolean attributes
Block (scripting)
=================

In JavaScript, a block is a collection of related statements enclosed in braces ("{}"). For example, you can put a block of statements after an `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
--------

* JavaScript block statement
Block (CSS)
===========

A **block** on a webpage is an HTML element that appears on a new line, i.e. underneath the preceding element in a horizontal writing mode, and above the following element (commonly known as a *block-level element*). For example, `<p>` is by default a block-level element, whereas `<a>` is an *inline element* — you can put several links next to one another in your HTML source and they will sit on the same line as one another in the rendered output.

Using the `display` property you can change whether an element displays inline or as a block (among many other options); **blocks** are also subject to the effects of positioning schemes and use of the `position` property.

See also
--------

* Visual formatting model
Property (CSS)
==============

A **CSS property** is a characteristic (like color) whose associated value defines one aspect of how the browser should display the element.

Here's an example of a CSS rule:


```css
/\* "div" is a selector indicating that all the div elements \*/
/\* in the document will be styled by that rule \*/
div {
  /\* The property "color" with the value "black" indicates \*/
  /\* that the text will have the color black \*/
  color: black;

  /\* The property "background-color" with the value "white" indicates \*/
  /\* that the background color of the elements will be white \*/
  background-color: white;
}
```

See also
--------

* Learn CSS
* The CSS reference on MDN
* The CSS Working Group current work
Property (JavaScript)
=====================

A **JavaScript property** is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.

A property consists of the following parts:

* A *name* (also called a *key*), which is either a string or a symbol.
* A *value*, which can be any JavaScript value. A property that has a function as its value may also be called a method.
* Some *attributes*, which specify how the property can be read and written. A property may have the `configurable`, `enumerable`, and `writable` attributes.

Accessor properties do not have an actual "value". The value is represented indirectly through a pair of functions, one (the getter) invoked when reading the value and one (the setter) invoked when setting the value. However, accessor properties behave like regular data properties on the surface, because the getter and setter functions are invoked automatically and are typically transparent to JavaScript code.

The property's value (including the getter and setter) and its attributes are stored in a data record called the *property descriptor*. Many methods, such as `Object.getOwnPropertyDescriptor()` and `Object.defineProperty()`, work with property descriptors.

The term *property* itself does not correspond to any JavaScript value — it's an abstract concept. For example, in the following code:


```js
const obj = {
  a: 1,
  b() {},
};
```


The object `obj` has two properties. The first one has `"a"` as the key and `1` as the value. The second one has `"b"` as the key and a function as the value (using the method syntax). The `"a"` – `1`, `"b"` – `function` associations are the properties of the object.

In the context of classes, properties can be divided into *instance properties*, which are owned by each instance, and *static properties*, which are owned by the class and hold data common to all instances. In the context of inheritance, properties can also be divided into *own properties*, which are owned by the object itself, and *inherited properties*, which are owned by objects in the prototype chain of the object.

For more information about reading and writing properties, see working with objects.

See also
--------

* Property (programming) on Wikipedia
* Introduction to object-oriented JavaScript
* Object properties
* Enumerability and ownership of properties
Baseline (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.

See also
--------

* Baseline on Wikipedia
* CSS Box Alignment on MDN
Node (networking)
=================

In networking, a **node** is a connection point in the network. In physical networks, a node is usually a device, like a computer or a router.

See also
--------

* Node on Wikipedia
Node (DOM)
==========

In the context of the DOM, a **node** is a single point in the node tree. Various things that are nodes are the document itself, elements, text, and comments.

See also
--------

* The node tree WHATWG spec
* Node objects
DSL (Digital Subscriber Line)
=============================

**DSL (Digital Subscriber Line)** is a type of broadband internet connection that sends wired data transmissions over telephone lines.

 The download and upload rates don't need to be the same. In such cases, the line is said to be *asymmetrical* and the ADSL abbreviation is used.
 Contrast with cable, fiber optic, or dial-up connections.

See also
--------

* Digital subscriber line on Wikipedia
DSL (Domain-Specific Language)
==============================

A **Domain-Specific Language (DSL)** is a type of computer language of limited scope, designed to address a particular problem within an application domain.

Contrast DSLs with *general-purpose languages (GPLs)*, which are designed to address various problems across domains.

See also
--------

* Domain-specific language on Wikipedia
* DSL Guide on martinfowler.com
Safe (HTTP Methods)
===================

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: `GET`, `HEAD`, or `OPTIONS`. All safe methods are also idempotent, but not all idempotent methods are safe. For example, `PUT` and `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 website.

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

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


```http
GET /pageX.html HTTP/1.1
```


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


```http
POST /pageX.html HTTP/1.1
```


A call to an idempotent but non-safe method:


```http
DELETE /idX/delete HTTP/1.1
```

See also
--------

* Definition of safe in the HTTP specification.
* Description of common safe methods: `GET`, `HEAD`, `OPTIONS`
* Description of common unsafe methods: `PUT`, `DELETE`, `POST`
Signature (functions)
=====================

A **function signature** (or *type* signature, or *method* signature) defines input and output of functions or methods.

A signature can include:

* parameters and their types
* a return value and type
* exceptions that might be thrown or passed back
* information about the availability of the method in an object-oriented program (such as the keywords `public`, `static`, or `prototype`).
In depth
--------

### Signatures in JavaScript

JavaScript is a *loosely typed* or a *dynamic* language. That means you don't have to declare the type of a variable ahead of time. The type will get determined automatically while the program is being processed. A signature in JavaScript can still give you some information about the method:


```js
MyObject.prototype.myFunction(value);
```


* The method is installed on an object called `MyObject`.
* The method is installed on the `prototype` of `MyObject` (thus it is an instance method) as opposed to being a static method.
* The name of the method is `myFunction`.
* The method accepts one parameter, which is called `value` and is not further defined.
### Signatures in Java

In Java, signatures are used to identify methods and classes at the level of the virtual machine code. You have to declare types of variables in your code in order to be able to run the Java code. Java is *strictly typed* and will check any parameters at compilation time if they are correct.


```java
public static void main(String[] args)
```


* The `public` keyword is an access modifier and indicates that this method can be called by any object.
* The `static` keyword indicates that this method is a class method as opposed to being an instance method.
* The `void` keyword indicates that this method has no return value.
* The name of the method is `main`.
* The method accepts one parameter of type String Array. It is named `args`.
See also
--------

* Java internal type signatures on Wikipedia
Signature (security)
====================

A **signature**, or *digital signature*, is a protocol showing that a message is authentic.

From the hash of a given message, the **signing process** first generates a digital signature linked to the signing entity, using the entity's private key.

On receiving the message, the **verification process**

* *authenticates the sender -* uses the sender's public key to 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.

Digital signatures rely on asymmetric cryptography, also known as public-key cryptography.

See also
--------

* Digital signature on Wikipedia
* See digest, encryption
Common questions
================

 This section of the Learning Area is designed to provide answers to common questions that may come
 up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.

* HTML questions
* CSS questions
* JavaScript questions
* Web mechanics
* Tools and setup
* Design and accessibility
Writing mathematics with MathML
===============================

Mathematical Markup Language — or MathML — is the markup language used to write mathematical formulas in web pages using fractions, scripts, radicals, matrices, integrals, series, etc. Although it was originally designed as an independent XML language, MathML is generally embedded inside HTML documents and can be seen as an extension of HTML.

**Warning:** In practice, MathML content is generated from lightweight markup languages (e.g. LaTeX) or using graphical user interface: if you just need to integrate mathematical formulas in your web pages, the tips from the Authoring MathML page should be enough.

#### Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

**Get started**

Prerequisites
-------------

Before attempting to learn MathML, it is assumed that you have some basic knowledge of HTML and CSS. Consequently, you are strongly advised to get familiar with at least these two technologies first. Start by working through the following modules:

* Getting started with the Web
* Introduction to HTML
* Introduction to CSS

Some familiarity with mathematical notations and TeX rendering rules might also come in handy, even though required concepts will be explained as needed.

Modules
-------

MathML first steps

MathML is the markup language used to write mathematical formulas in Web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML.

See also
--------

MathML on MDN

The main entry point for MathML documentation on MDN, where you'll find detailed reference documentation for all features of the MathML language. Want to know all the values a property can take? This is a good place to go.
Asynchronous JavaScript
=======================

In this module, we take a look at asynchronous JavaScript, why it is important, and how it can be used to effectively handle potential blocking operations, such as fetching resources from a server.

#### Looking to become a front-end web developer?

 We have put together a course that includes all the essential information you need to
 work towards your goal.


**Get started**

Prerequisites
-------------

Asynchronous JavaScript is a fairly advanced topic, and you are advised to work through JavaScript first steps and JavaScript building blocks modules before attempting this.

**Note:** If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides
------

Introducing asynchronous JavaScript

In this article, we'll learn about **synchronous** and **asynchronous** programming, why we often need to use asynchronous techniques, and the problems related to the way asynchronous functions have historically been implemented in JavaScript.

How to use promises

Here we'll introduce promises and show how to use promise-based APIs. We'll also introduce the `async` and `await` keywords.

Implementing a promise-based API

This article will outline how to implement your own promise-based API.

Introducing workers

Workers enable you to run certain tasks in a separate thread to keep your main code responsive. In this article, we'll rewrite a long-running synchronous function to use a worker.

Assessments
-----------

Sequencing animations

The assessment asks you to use promises to play a set of animations in a particular sequence.

See also
--------

* Asynchronous Programming from the fantastic Eloquent JavaScript online book by Marijn Haverbeke.