CoCalc -- index.md

GitHub Repository: mohamedkhallouq/content
Path: blob/main/files/en-us/mdn/kitchensink/index.md
⁶⁵⁸¹ views

---

title: The MDN Content Kitchensink
slug: MDN/Kitchensink
browser-compat: html.elements.video

---

Warning: Don't delete this page. It's used by mdn/yari for its automation.

About this page

The kitchensink is a page that attempts to incorporate every possible content element and Yari macro.

This page attempts to be the complete intersection of every other page. Not in terms of the text but in terms of the styles and macros. Let's start with some notes…

Text that uses the <kbd> tag: Shift

Note: Here's a block indicator note.

Warning: Here's a block indicator warning.

Prev/Next buttons

{{PreviousMenuNext("Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard", "Games/Techniques/Control_mechanisms/Other", "Games/Techniques/Control_mechanisms")}}

Another one…

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}

Code snippets

Plain text

  ___________________________
< I'm an expert in my field. >
  ---------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||

HTML

<pre></pre>

JavaScript

const f = () => {
  return Math.random();
};

CSS

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

WebAssembly

(func (param i32) (param f32) (local f64)
  local.get 0
  local.get 1
  local.get 2)

Rust

#[cfg(test)]
mod tests {
    #[test]
    fn it_works() {
        assert_eq!(2 + 2, 4);
    }
}

Python

class BookListView(generic.ListView):
    model = Book
    # your own name for the list as a template variable
    context_object_name = 'my_book_list'
    queryset = Book.objects.filter(title__icontains='war')[:5]
    template_name = 'books/my_arbitrary_template_name_list.html'

Formal syntax

The formal syntax must be taken from the spec and added to the MDN data repository. It is an important tool to get precise syntax information for advanced users.

Interactive Examples

{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}} {{EmbedInteractiveExample("pages/css/order.html")}} {{EmbedInteractiveExample("pages/js/regexp-assertions.html", "taller")}}

Tables

Markdown table

Constant name	Value	Description
`QUERY_COUNTER_BITS_EXT`	0x8864	The number of bits used to hold the query result for the given target.
`CURRENT_QUERY_EXT`	0x8865	The currently active query.
`QUERY_RESULT_EXT`	0x8866	The query result.
`QUERY_RESULT_AVAILABLE_EXT`	0x8867	A Boolean indicating whether a query result is available.
`TIME_ELAPSED_EXT`	0x88BF	Elapsed time (in nanoseconds).
`TIMESTAMP_EXT`	0x8E28	The current time.
`GPU_DISJOINT_EXT`	0x8FBB	A Boolean indicating whether the GPU performed any disjoint operation.

HTML table

Content categories	Flow content, phrasing content, palpable content.
Permitted content	Phrasing content.
Tag omission	{{no_tag_omission}}
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	Any
DOM interface	{{domxref("HTMLElement")}}

Values for the content of `<meta name="viewport">`
Value	Possible subvalues	Description
`width`	A positive integer number, or the text `device-width`	Defines the pixel width of the viewport that you want the website to be rendered at.
`user-scalable` {{ReadOnlyInline}}	`yes` or `no`	If set to `no`, the user is not able to zoom in the webpage. The default is `yes`. Browser settings can ignore this rule, and iOS10+ ignores it by default.
`viewport-fit`	`auto`, `contain` or `cover`	The `auto` value doesn't affect the initial layout viewport, and the whole web page is viewable. The `contain` value means that the viewport is scaled to fit the largest rectangle inscribed within the display. The `cover` value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display.

Every macro under the sun

Well, almost every macro. Hopefully only the ones that are in active use.

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.

JavaScript {{jsxref("Array")}} on MDN

Listening for mouse movement is even easier than listening for key presses: all we need is the listener for the {{domxref("Element/mousemove_event", "mousemove")}} event.

Browser compatibility

Axis-Aligned Bounding Box

One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist.

var rect1 = { x: 5, y: 5, width: 50, height: 50 };
var rect2 = { x: 20, y: 10, width: 10, height: 10 };

if (
  rect1.x < rect2.x + rect2.width &&
  rect1.x + rect1.width > rect2.x &&
  rect1.y < rect2.y + rect2.height &&
  rect1.y + rect1.height > rect2.y
) {
  // collision detected!
}

// filling in the values =>

if (5 < 30 && 55 > 20 && 5 < 20 && 55 > 10) {
  // collision detected!
}

Rect code

<div id="cr-stage"></div>
<p>
  Move the rectangle with arrow keys. Green means collision, blue means no
  collision.
</p>
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script>

Crafty.init(200, 200);

var dim1 = {x: 5, y: 5, w: 50, h: 50}
var dim2 = {x: 20, y: 10, w: 60, h: 40}

var rect1 = Crafty.e("2D, Canvas, Color").attr(dim1).color("red");

var rect2 = Crafty.e("2D, Canvas, Color, Keyboard, Fourway").fourway(2).attr(dim2).color("blue");

rect2.bind("EnterFrame", function () {
if (rect1.x > rect2.x + rect2.w &#x26;&#x26;
rect1.x + rect1.w > rect2.x &#x26;&#x26;
rect1.y > rect2.y + rect2.h &#x26;&#x26;
rect1.h + rect1.y > rect2.y) {
// collision detected!
this.color("green");
} else {
// no collision
this.color("blue");
}
});

Obsolete CSSOM interfaces {{deprecated_inline}}

Accessibility resources at MDN
Web accessibility on Wikipedia

The AvailableInWorkers macro inserts a localized note box indicating that a feature is available in a Web worker context.

Create a {{htmlelement("canvas")}} element and set its width and height attributes to the original, smaller resolution.
Set its CSS {{cssxref("width")}} and {{cssxref("height")}} properties to be 2x or 4x the value of the HTML width and height. If the canvas was created with a 128 pixel width, for example, we would set the CSS width to 512px if we wanted a 4x scale.
Set the {{htmlelement("canvas")}} element's image-rendering CSS property to some value that does not make the image blurry. Either crisp-edges or pixelated will work. Check out the {{cssxref("image-rendering")}} article for more information on the differences between these values, and which prefixes to use depending on the browser.

MDN Web Docs Glossary:
- {{Glossary("XMLHttpRequest", "XHR")}}
AJAX on Wikipedia
Ajax
Ajax - Getting started
{{DOMxRef("XMLHttpRequest")}}
{{DOMxRef("Fetch API")}}
Using Fetch API
Synchronous vs. Asynchronous Communications

{{SVGElement("feGaussianBlur")}}
{{SVGAttr("keySplines")}} SVG attribute
{{htmlattrxref("dir")}}
{{htmlattrxref("lang")}}
{{cssxref(":dir")}}
{{cssxref("direction")}}

Types

{{WebExtAPIRef("alarms.Alarm")}}
- : Information about a particular alarm.