Basic math in JavaScript — numbers and operators - Learn web development
previous overview: first steps next at this point in the course we discuss math in javascript — how we can use operators and other features to successfully manipulate numbers to do our bidding.
... prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is.
... objective: to gain familiarity with the basics of math in javascript.
...And 61 more matches

Compiling from Rust to WebAssembly - WebAssembly
if you have some rust code, you can compile it into webassembly (wasm).
... this tutorial takes you through all you need to know to compile a rust project to wasm and use it in an existing web app.
... rust and webassembly use cases there are two main use cases for rust and webassembly: to build an entire application — an entire web app based in rust.
...And 56 more matches

Introducing asynchronous JavaScript - Learn web development
previous overview: asynchronous next in this article we briefly recap the problems associated with synchronous javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
... prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals.
... objective: to gain familiarity with what asynchronous javascript is, how it differs from synchronous javascript, and what use cases it has.
...And 54 more matches

JavaScript data types and data structures - JavaScript
this article attempts to list the built-in data structures available in javascript and what properties they have.
... dynamic typing javascript is a loosely typed and dynamic language.
... variables in javascript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types: let foo = 42; // foo is now a number foo = 'bar'; // foo is now a string foo = true; // foo is now a boolean data and structure types the latest ecmascript standard defines nine types: six data types that are primitives, checked by typeof operator: undefined : typeof instance === "undefined" boolean : typeof instance === "boolean" number : typeof instance === "number" string : typeof instance === "string" bigint : typeof instance === "bigint" symbol : typeof instance === "symbol" null : typeof instance === "object".
...And 50 more matches

Classes - JavaScript
classes are a template for creating objects.
...classes in js are built on prototypes but also have some syntax and semantics that are not shared with es5 classalike semantics.
... defining classes classes are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations.
...And 45 more matches

async function - JavaScript
an async function is a function declared with the async keyword.
... async functions are instances of the asyncfunction constructor, and the await keyword is permitted within them.
... the async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.
...And 44 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
the flexible box module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
... when we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column.
... this can be contrasted with the two-dimensional model of css grid layout, which controls columns and rows together.
...And 43 more matches

JavaScript object basics - Learn web development
overview: objects next in this article, we'll look at fundamental javascript object syntax, and revisit some javascript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects.
... prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks).
... objective: to understand the basic theory behind object-oriented programming, how this relates to javascript ("most things are objects"), and how to start working with javascript objects.
...And 42 more matches

In depth: Microtasks and the JavaScript runtime environment - Web APIs
when debugging or, possibly, when trying to decide upon the best approach to solving a problem around timing and scheduling of tasks and microtasks, there are things about how the javascript runtime operates under the hood that may be useful to understand.
... that's what this section covers introduction javascript is an inherently single-threaded language.
... it was designed in an era in which this was a positive choice; there were few multi-processor computers available to the general public, and the expected amount of code that would be handled by javascript was relatively low at that time.
...And 41 more matches

Grid template areas - CSS: Cascading Style Sheets
however, there is an alternate method to use for positioning items on the grid which you can use alone or in combination with line-based placement.
... this method involves placing our items using named template areas, and we will find out exactly how this method works.
... you will see very quickly why we sometimes call this the ascii-art method of grid layout!
...And 40 more matches

<easing-function> - CSS: Cascading Style Sheets
the <easing-function> css data type denotes a mathematical function that describes how fast one-dimensional values change during animations.
... the easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation.
... they correlate a time ratio to an output ratio, both expressed as <number>s.
...And 40 more matches

WebAssembly - JavaScript
the webassembly javascript object acts as the namespace for all webassembly-related functionality.
... unlike most other global objects, webassembly is not a constructor (it is not a function object).
... description the primary uses for the webassembly object are: loading webassembly code, using the webassembly.instantiate() function.
...And 36 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
grids can be used to lay out major page areas or small user interface elements.
...css grid layout has the following features: fixed and flexible track sizes you can create a grid with fixed track sizes – using pixels for example.
...features such as adding “as many columns that will fit into a container” are included.
...And 34 more matches

Building up a basic demo with the PlayCanvas engine - Game development
built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
...if you have already worked through our building up a basic demo with three.js article (or you are familiar with other 3d libraries) you'll notice that playcanvas works on similar concepts: camera, light and objects.
... environment setup to start developing with playcanvas, you don't need much.
...And 31 more matches

Basic usage of canvas - Web APIs
« previousnext » let's start this tutorial by looking at the <canvas> html element itself.
... at the end of this page, you will know how to set up a canvas 2d context and have drawn a first example in your browser.
... the <canvas> element <canvas id="tutorial" width="150" height="150"></canvas> at first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes.
...And 31 more matches

About JavaScript - JavaScript
what is javascript?
... javascript® (often shortened to js) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for web pages, but it's used in many non-browser environments as well.
... it is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.
...And 31 more matches

Typical use cases of Flexbox - CSS: Cascading Style Sheets
in this guide we will take a look at some of the common use cases for flexbox — those places where it makes more sense than another layout method.
... in a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another.
... as you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items.
...And 30 more matches

Release phase
now you're ready for the final phase: becoming an official l10n release.
... here, we'll continue to stay true to the original intent of this guide and only present you with the technical information you need to become an official release.
... we'll primarily focus on getting your release repository setup and the mercurial commands you'll need to know to use that repository.
...And 29 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in the article covering the basic concepts of grid layout, we started to look at how to position items on a grid using line numbers.
... starting your exploration of grid with numbered lines is the most logical place to begin, as when you use grid layout you always have numbered lines.
...in a left to right language such as english line 1 is on the left-hand side of the grid.
...And 28 more matches

Introducing the CSS Cascade - CSS: Cascading Style Sheets
the cascade is an algorithm that defines how to combine property values originating from different sources.
... it lies at the core of css, as emphasized by the name: cascading style sheets.
... this article explains what the cascade is, the order in which css declarations cascade, and how this affects you, the web developer.
...And 27 more matches

mask - CSS: Cascading Style Sheets
the mask css shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
... as well as the properties listed below, the mask shorthand also resets mask-border to its initial value.
... it is therefore recommended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade.
...And 27 more matches

WebAssembly.instantiate() - JavaScript
the webassembly.instantiate() function allows you to compile and instantiate webassembly code.
... this function has two overloads: the primary overload takes the webassembly binary code, in the form of a typed array or arraybuffer, and performs both compilation and instantiation in one step.
... the returned promise resolves to both a compiled webassembly.module and its first webassembly.instance.
...And 26 more matches

Destructuring assignment - JavaScript
the destructuring assignment syntax is a javascript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // stage 4(finished) proposal ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // {c: 30, d: 40} description the object and array literal expressions provide an easy way to create ad hoc packages of data.
...And 26 more matches

mask-size - CSS: Cascading Style Sheets
the mask-size css property specifies the sizes of the mask images.
... /* keywords syntax */ mask-size: cover; mask-size: contain; /* one-value syntax */ /* the width of the image (height set to 'auto') */ mask-size: 50%; mask-size: 3em; mask-size: 12px; mask-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ mask-size: 50% auto; mask-size: 3em 25%; mask-size: auto 6px; mask-size: auto auto; /* multiple values */ /* do not confuse this with mask-size: auto auto */ mask-size: auto, auto; mask-size: 50%, 25%, 25%; mask-size: 6px, auto, contain; /* global values */ mask-size: inherit; mask-size: initial; mask-size: unset; note: if the value of this property is not set in a mask shorthand property that is applied ...
...to the element after the mask-size css property, the value of this property is then reset to its initial value by the shorthand property.
...And 25 more matches

Public class fields - JavaScript
both public and private field declarations are an experimental feature (stage 3) proposed at tc39, the javascript standards committee.
...as such, unlike their private counterparts, they participate in prototype inheritance.
... syntax class classwithinstancefield { instancefield = 'instance field' } class classwithstaticfield { static staticfield = 'static field' } class classwithpublicinstancemethod { publicmethod() { return 'hello world' } } examples public static fields public static fields are useful when you want a field to exist only once per class, not on every class instance you create.
...And 25 more matches

Compiling a New C/C++ Module to WebAssembly - WebAssembly
when you’ve written a new code module in a language like c/c++, you can compile it into webassembly using a tool like emscripten.
...there are a number of options available when compiling with emscripten, but the main two scenarios we'll cover are: compiling to wasm and creating html to run our code in, plus all the javascript "glue" code needed to run the wasm in the web environment.
... compiling to wasm and just creating the javascript.
...And 23 more matches

Case Sensitivity in class and id Names - Archive of obsolete content
summary: although css is itself case-insensitive, class and id names are defined to be case-sensitive in html 4.01.
...in the authoring of both css and javascript/dom (otherwise known as dhtml) routines, it is a near-certainty that class and id names will be used to identify elements.
... we have discovered, however, that many authors are running into trouble with class and id names because they're used to the bugs of browsers that don't fully support open standards.
...And 22 more matches

Basic Shapes - CSS: Cascading Style Sheets
css shapes can be defined using the <basic-shape> type, and in this guide i’ll explain how each of the different values accepted by this type work.
... before looking at the shapes, it is worth understanding two pieces of information that go together to make these shapes possible: the <basic-shape> type the reference box the <basic-shape> type the <basic-shape> type is used as the value for all of our basic shapes.
... the reference box understanding the reference box used by css shapes is important when using basic shapes, as it defines each shape's coordinate system.
...And 22 more matches

JavaScript technologies overview - JavaScript
introduction whereas html defines a webpage's structure and content and css sets the formatting and appearance, javascript adds interactivity to a webpage and creates rich web applications.
... however, the umbrella term "javascript" as understood in a web browser context contains several very different elements.
... one of them is the core language (ecmascript), another is the collection of the web apis, including the dom (document object model).
...And 21 more matches

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
flexbox was designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once.
...in the next example i have ten items all with a flex-basis of 160px and the ability to grow and shrink.
...as the items can grow, they will expand larger than 160 px in order to fill each row completely.
...And 20 more matches

<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
use the html <canvas> element with either the canvas scripting api or the webgl api to draw graphics and animations.
... content categories flow content, phrasing content, embedded content, palpable content.
... permitted parents any element that accepts phrasing content.
...And 20 more matches

Building up a basic demo with PlayCanvas editor - Game development
instead of coding everything from scratch you can also use the online playcanvas editor.
... this can be a more pleasant working environment if you are not someone who likes to code.
... creating an account the playcanvas editor is free — all you have to do to begin with is register your account and login: when you first sign up, you are taken straight into the editor and given a simple starter tutorial involving editing a 3d rolling ball game.
...And 19 more matches

:nth-last-child() - CSS: Cascading Style Sheets
the :nth-last-child() css pseudo-class matches elements based on their position among a group of siblings, counting from the end.
... /* selects every fourth element among any group of siblings, counting backwards from the last one */ :nth-last-child(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-child, except it counts items backwards from the end, not forwards from the beginning.
... syntax the nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.
...And 19 more matches

Caching compiled WebAssembly modules - WebAssembly
warning: experimental webassembly.module indexeddb serialization support is being removed from browsers; see bug 1469395 and this spec issue.
... caching is useful for improving the performance of an app — we can store compiled webassembly modules on the client so they don't have to be downloaded and compiled every time.
... caching via indexeddb indexeddb is a transactional database system that allows you to store and retrieve structured data on the client-side.
...And 19 more matches

mask-border - CSS: Cascading Style Sheets
the mask-border css shorthand property lets you create a mask along the edge of an element's border.
... constituent properties this property is a shorthand for the following css properties: mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width syntax /* source | slice */ mask-border: url('border-mask.png') 25; /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space; /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; values <'mask-border-source'> the source image.
... see mask-border-source.
...And 18 more matches

WebAssembly.Table - JavaScript
the webassembly.table() object is a javascript wrapper object — an array-like structure representing a webassembly table, which stores function references.
... a table created by javascript or in webassembly code will be accessible and mutable from both javascript and webassembly.
... constructor webassembly.table() creates a new table object.
...And 18 more matches

Compiling an Existing C Module to WebAssembly - WebAssembly
a core use-case for webassembly is to take the existing ecosystem of c libraries and allow developers to use them on the web.
... as an example, let's compile an encoder for webp to wasm.
... the source for the webp codec is written in c and available on github as well as some extensive api documentation.
...And 18 more matches

-webkit-mask-composite - CSS: Cascading Style Sheets
the -webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another.
... mask images are composited in the opposite order that they are declared with the -webkit-mask-image property.
... /* keyword values */ -webkit-mask-composite: clear; -webkit-mask-composite: copy; -webkit-mask-composite: source-over; -webkit-mask-composite: source-in; -webkit-mask-composite: source-out; -webkit-mask-composite: source-atop; -webkit-mask-composite: destination-over; -webkit-mask-composite: destination-in; -webkit-mask-composite: destination-out; -webkit-mask-composite: destination-atop; -webkit-mask-composite: xor; /* global values */ -webkit-mask-composite: inherit; -webkit-mask-composite: initial; -webkit-mask-composite: unset; there is a standardized mask-composite property covering parts of this non-standard property using different keywords.
...And 17 more matches

text-emphasis - CSS: Cascading Style Sheets
the text-emphasis css property applies emphasis marks to text (except spaces and control characters).
... it is a shorthand for text-emphasis-style and text-emphasis-color.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 17 more matches

Object.assign() - JavaScript
the object.assign() method copies all enumerable own properties from one or more source objects to a target object.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax object.assign(target, ...sources) parameters target the target object — what to apply the sources’ properties to, which is returned after it is modified.
...And 17 more matches

<basic-shape> - CSS: Cascading Style Sheets
the <basic-shape> css data type represents a shape used in the clip-path, shape-outside, and offset-path properties.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax the <basic-shape> data type is defined with one of the basic shape functions listed below.
...And 16 more matches

<base>: The Document Base URL element - HTML: Hypertext Markup Language
the html <base> element specifies the base url to use for all relative urls in a document.
... there can be only one <base> element in a document.
... a document's used base url can be accessed by scripts with document.baseuri.
...And 16 more matches

WebAssembly.Memory - JavaScript
the webassembly.memory object is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a webassembly instance.
... a memory created by javascript or in webassembly code will be accessible and mutable from both javascript and webassembly.
... constructor webassembly.memory() creates a new memory object.
...And 16 more matches

How to make PWAs installable - Progressive web apps (PWAs)
previous overview: progressive next in the last article, we read about how the example application, js13kpwa, works offline thanks to its service worker, but we can go even further and allow users to install the web app on mobile and desktop browers that support doing so.
... the installed web app can then be launched by users just as if it were any native app.
...your web app can sit next to native applications as first class citizens.
...And 16 more matches

A basic ray-caster - Web APIs
this article provides an interesting real-world example of using the <canvas> element to do software rendering of a 3d environment using ray-casting.
... after realizing, to my delight, that the nifty <canvas> element i'd been reading about was not only soon to be supported in firefox, but was already supported in the current version of safari, i had to try a little experiment.
... the canvas overview and tutorial i found here at mdn are great, but nobody had written about animation yet, so i thought i'd try a port of a basic raycaster i'd worked on a while ago, and see what sort of performance we can expect from a javascript-controlled pixel buffer.
...And 15 more matches

Assertions - JavaScript
assertions include boundaries, which indicate the beginnings and endings of lines and words, and other patterns indicating in some way that a match is possible (including look-ahead, look-behind, and conditional expressions).
...do not forget to edit it as well, thanks!
... boundary-type assertions characters meaning ^ matches the beginning of input.
...And 15 more matches

WebAssembly.Memory() constructor - JavaScript
the webassembly.memory() constructor creates a new memory object whose buffer property is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a webassembly instance.
... a memory created by javascript or in webassembly code will be accessible and mutable from both javascript and webassembly.
... syntax new webassembly.memory(memorydescriptor); parameters memorydescriptor an object that can contain the following members: initial the initial size of the webassembly memory, in units of webassembly pages.
...And 15 more matches

JavaScript language resources - JavaScript
ecmascript is the scripting language that forms the basis of javascript.
... ecmascript standardized by the ecma international standards organization in the ecma-262 and ecma-402 specifications.
... the following ecmascript standards have been approved or are being worked on: name links release date description current editions ecma-262 10th edition pdf, html, working draft, repository 2019 ecmascript 2019 language specification ecma-262 9th edition pdf, html, working draft, repository 2018 ecmascript 2018 language specification ecma-402 5th edition working draft, repository 2018 ecmascript 2018 internationalization api specification obsolete/historical editions ecma-262 pdf june 1997 ecmascript: a general purpose, cross-platform programming language.
...And 14 more matches

Array.prototype.lastIndexOf() - JavaScript
the lastindexof() method returns the last index at which a given element can be found in the array, or -1 if it is not present.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax arr.lastindexof(searchelement[, fromindex]) parameters searchelement element to locate in the array.
...And 14 more matches

WebAssembly.Module - JavaScript
a webassembly.module object contains stateless webassembly code that has already been compiled by the browser — this can be efficiently shared with workers, and instantiated multiple times.
... constructor webassembly.module() creates a new module object.
... static properties webassembly.module.customsections() given a module and string, returns a copy of the contents of all custom sections in the module with the given string name.
...And 14 more matches

JavaScript shells - JavaScript
a javascript shell allows you to quickly test snippets of javascript code without having to reload a web page.
... standalone javascript shells the following javascript shells are stand-alone environments, like perl or python.
... node.js - node.js is a platform for easily building fast, scalable network applications.
...And 14 more matches

mask-repeat - CSS: Cascading Style Sheets
the mask-repeat css property sets how mask images are repeated.
... a mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
... /* one-value syntax */ mask-repeat: repeat-x; mask-repeat: repeat-y; mask-repeat: repeat; mask-repeat: space; mask-repeat: round; mask-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ mask-repeat: repeat space; mask-repeat: repeat repeat; mask-repeat: round space; mask-repeat: no-repeat round; /* multiple values */ mask-repeat: space round, no-repeat; mask-repeat: round repeat, space, repeat-x; /* global values */ mask-repeat: inherit; mask-repeat: initial; mask-repeat: unset; by default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
...And 13 more matches

Intl.Locale.prototype.caseFirst - JavaScript
the intl.locale.prototype.casefirst property is an accessor property that returns whether case is taken into account for the locale's collation rules.
...certain locales use a character's case (uppercase or lowercase) in the collation process.
... this additional rule can be expressed in a locale's casefirst property.
...And 13 more matches

WebAssembly.CompileError - JavaScript
the webassembly.compileerror object indicates an error during webassembly decoding or validation.
... constructor webassembly.compileerror() creates a new webassembly.compileerror object.
... instance properties webassembly.compileerror.prototype.message error message.
...And 13 more matches

WebAssembly.LinkError - JavaScript
the webassembly.linkerror object indicates an error during module instantiation (besides traps from the start function).
... constructor webassembly.linkerror() creates a new webassembly.linkerror object.
... instance properties webassembly.linkerror.prototype.message error message.
...And 13 more matches

WebAssembly.RuntimeError - JavaScript
the webassembly.runtimeerror object is the error type that is thrown whenever webassembly specifies a trap.
... constructor webassembly.runtimeerror() creates a new webassembly.runtimeerror object.
... instance properties webassembly.runtimeerror.prototype.message error message.
...And 13 more matches

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
notifications can be used by the service worker to show new information to the user, or at least alert them when something has been updated.
... create a notification the example app creates a notification out of the available data — a game is picked at random, and the chosen one feeds the notification with the content: it sets the game's name as the title, mentioning the author in the body, and showing the image as an icon: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+games[randomitem].slug+'.jpg'; var options = { body: notifbody, i...
...you can examine the service workers cookbook examples, try to set up a push messaging server using firebase, or build your own server (using node.js for example).
...And 13 more matches

Exported WebAssembly functions - WebAssembly
exported webassembly functions are how webassembly functions are represented in javascript.
... exported webassembly functions are basically just javascript wrappers that represent webassembly functions in javascript.
... when you call them, you get some activity in the background to convert the arguments into types that wasm can work with (for example converting javascript numbers to int32), the arguments are passed to the function inside your wasm module, the function is invoked, and the result is converted and passed back to javascript.
...And 13 more matches

Loading and running WebAssembly code - WebAssembly
to use webassembly in javascript, you first need to pull your module into memory before compilation/instantiation.
... this article provides a reference for the different mechanisms that can be used to fetch webassembly bytecode, as well as how to compile/instantiate then run it.
... webassembly is not yet integrated with <script type='module'> or es2015 import statements, thus there is not a path to have the browser fetch modules for you using imports.
...And 13 more matches

speak-as - CSS: Cascading Style Sheets
the speak-as descriptor specifies how a counter symbol constructed with a given @counter-style will be represented in the spoken form.
... for example, an author can specify a counter symbol to be either spoken as its numerical value or just represented with an audio cue.
... syntax /* keyword values */ speak-as: auto; speak-as: bullets; speak-as: numbers; speak-as: words; speak-as: spell-out; /* @counter-style name value */ speak-as: <counter-style-name>; values auto if the value of speak-as is specified as auto, then the effective value of speak-as will be determined based on the value of the system descriptor: if the value of system is alphabetic, the effective value of speak-as will be spell-out.
...And 12 more matches

Basic Concepts of Multicol - CSS: Cascading Style Sheets
multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper.
... this guide explains how the specification works with some common use case examples.
...the columns are anonymous boxes and described as column boxes in the specification.
...And 12 more matches

AsyncFunction - JavaScript
the asyncfunction constructor creates a new async function object.
... in javascript, every asynchronous function is actually an asyncfunction object.
... note that asyncfunction is not a global object.
...And 12 more matches

Object.prototype.hasOwnProperty() - JavaScript
the hasownproperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it).
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax obj.hasownproperty(prop) parameters prop the string name or symbol of the property to test.
...And 12 more matches

WebAssembly.instantiateStreaming() - JavaScript
the webassembly.instantiatestreaming() function compiles and instantiates a webassembly module directly from a streamed underlying source.
... this is the most efficient, optimized way to load wasm code.
... syntax promise<resultobject> webassembly.instantiatestreaming(source, importobject); parameters source a response object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream, compile, and instantiate.
...And 12 more matches

class expression - JavaScript
the class expression is one way to define a class in ecmascript 2015.
... similar to function expressions, class expressions can be named or unnamed.
... if named, the name of the class is local to the class body only.
...And 12 more matches

JavaScript typed arrays - JavaScript
javascript typed arrays are array-like objects that provide a mechanism for reading and writing raw binary data in memory buffers.
... as you may already know, array objects grow and shrink dynamically and can have any javascript value.
... javascript engines perform optimizations so that these arrays are fast.
...And 12 more matches

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
previous overview: progressive web apps next now that we’ve seen what the structure of js13kpwa looks like and have seen the basic shell up and running, let's look at how the offline capabilities using service worker are implemented.
...they finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a website and make them available when the user’s device is offline.
... they run on a separate thread from the main javascript code of our page, and don't have any access to the dom structure.
...And 12 more matches

mask-border-slice - CSS: Cascading Style Sheets
the mask-border-slice css property divides the image set by mask-border-source into regions.
... these regions are used to form the components of an element's mask border.
... syntax /* all sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice.
...And 11 more matches

Private class fields - JavaScript
class properties are public by default and can be examined or modified outside the class.
... there is however an experimental proposal to allow defining private class fields using a hash # prefix is added.
... syntax class classwithprivatefield { #privatefield } class classwithprivatemethod { #privatemethod() { return 'hello world' } } class classwithprivatestaticfield { static #private_static_field } examples private static fields private fields are accessible on the class constructor from inside the class declaration itself.
...And 11 more matches

WebAssembly.Table() constructor - JavaScript
the webassembly.table() constructor creates a new table object of the given size and element type.
... syntax new webassembly.table(tabledescriptor); parameters tabledescriptor an object that can contain the following members: element a string representing the type of value to be stored in the table.
... initial the initial number of elements of the webassembly table.
...And 11 more matches

Trailing commas - JavaScript
trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to javascript code.
... if you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma.
... javascript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ecmascript 5) and most recently (ecmascript 2017) to function parameters.
...And 11 more matches

-webkit-mask-box-image - CSS: Cascading Style Sheets
-webkit-mask-box-image sets the mask image for an element's border box.
... initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
... <gradient> a -webkit-gradient function to be used as a mask image.
...And 10 more matches

:has() - CSS: Cascading Style Sheets
the :has() css pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.
... /* selects any <a>, as long as it has an <img> element directly inside it */ /* note that this is not supported in any browser yet */ let test = document.queryselector('a:has(> img)'); syntax :has( <relative-selector-list> )where <relative-selector-list> = <relative-selector>#where <relative-selector> = <combinator>?
...<subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!where <type-selector> = <wq-name> | <ns-prefix>?
...And 10 more matches

-ms-high-contrast - CSS: Cascading Style Sheets
the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.
... high contrast mode is a specialized display mode that prioritizes making content as legible as possible by dynamically replacing foreground and background colors with a user-specified theme.
... syntax the -ms-high-contrast media feature is specified as one of the following values.
...And 10 more matches

Pseudo-classes - CSS: Cascading Style Sheets
a css pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
... /* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
... note: in contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.
...And 10 more matches

flex-basis - CSS: Cascading Style Sheets
the flex-basis css property sets the initial main size of a flex item.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.
...And 10 more matches

About the JavaScript reference - JavaScript
the javascript reference serves as a repository of facts about the javascript language.
...as you write javascript code, you'll refer to these pages often (thus the title "javascript reference").
... if you're learning javascript, or need help understanding some of its capabilities or features, check out the javascript guide.
...And 10 more matches

TypeError: invalid assignment to const "x" - JavaScript
the javascript exception "invalid assignment to const" occurs when it was attempted to alter a constant value.
... javascript const declarations can't be re-assigned or redeclared.
... message typeerror: invalid assignment to const "x" (firefox) typeerror: assignment to constant variable.
...And 10 more matches

WebAssembly.Instance - JavaScript
a webassembly.instance object is a stateful, executable instance of a webassembly.module.
... instance objects contain all the exported webassembly functions that allow calling into webassembly code from javascript.
... constructor webassembly.instance() creates a new instance object.
...And 10 more matches

WebAssembly.Module.customSections() - JavaScript
the webassembly.customsections() function returns a copy of the contents of all custom sections in the given module with the given string name.
... syntax webassembly.module.customsections(module, sectionname); parameters module the webassembly.module object whose custom sections are being considered.
... exceptions if module is not a webassembly.module object instance, a typeerror is thrown.
...And 10 more matches

Asynchronous JavaScript - Learn web development
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.
... 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.
... if you are not familiar with the concept of asynchronous programming, you should definitely start with the general asynchronous programming concepts article in this module.
...And 9 more matches

-webkit-mask-repeat-x - CSS: Cascading Style Sheets
the -webkit-mask-repeat-x property specifies whether and how a mask image is repeated (tiled) horizontally.
... /* keyword values */ -webkit-mask-repeat-x: repeat; -webkit-mask-repeat-x: no-repeat; -webkit-mask-repeat-x: space; -webkit-mask-repeat-x: round; /* multiple values */ -webkit-mask-repeat-x: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-x: inherit; -webkit-mask-repeat-x: initial; -webkit-mask-repeat-x: unset; syntax values repeat the mask image is repeated both horizontally and vertically.
... no-repeat the mask image is not repeated; only one copy of the mask image is drawn.
...And 9 more matches

-webkit-mask-repeat-y - CSS: Cascading Style Sheets
the -webkit-mask-repeat-y property sets whether and how a mask image is repeated (tiled) vertically.
... /* keyword values */ -webkit-mask-repeat-y: repeat; -webkit-mask-repeat-y: no-repeat; -webkit-mask-repeat-y: space; -webkit-mask-repeat-y: round; /* multiple values */ -webkit-mask-repeat-y: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-y: inherit; -webkit-mask-repeat-y: initial; -webkit-mask-repeat-y: unset; syntax values repeat the mask image is repeated vertically.
... no-repeat the mask image is not repeated vertically; only one copy of the mask image is drawn in vertical direction.
...And 9 more matches

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
css traditionally has sized things according to the physical dimensions of the screen.
... therefore we describe boxes as having a width and height, position items from the top and left, float things left, assign borders, margin, and padding to the top, right, bottom, left, etc.
...start and end as opposed to left and right/top and bottom.
...And 9 more matches

aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
... this property is not yet implemented in browsers, however some browsers are implementing this internally in order to provide the aspect ratio mapping described below.
... syntax aspect-ratio: 1 / 1; /* global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset; values <auto> replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio.
...And 9 more matches

WebAssembly.Global() constructor - JavaScript
a webassembly.global() constructor creates a new global object representing a global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances.
... syntax new webassembly.global(descriptor, value); parameters descriptor a globaldescriptor dictionary object, which contains two properties: value: a usvstring representing the data type of the global.
...this can be any value, as long as its type matches the variable's data type.
...And 9 more matches

WebAssembly.Global - JavaScript
a webassembly.global object represents a global variable instance, accessible from both javascript and importable/exportable across one or more webassembly.module instances.
... constructor webassembly.global() creates a new global object.
...by default this is the webassembly.global() constructor.
...And 9 more matches

Building up a basic demo with PlayCanvas - Game development
playcanvas is a popular 3d webgl game engine, originally created by will eastcott and dave evans.
... games and demos playcanvas has a few well-known demos published that showcase its possibilities.
... tanx is a multiplayer tank game where you can drive your tank around, shooting at other players as you go.
...And 8 more matches

mask-origin - CSS: Cascading Style Sheets
the mask-origin css property sets the origin of a mask.
... /* keyword values */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box; /* multiple values */ mask-origin: padding-box, content-box; mask-origin: view-box, fill-box, border-box; /* non-standard keyword values */ -webkit-mask-origin: content; -webkit-mask-origin: padding; -webkit-mask-origin: border; /* global values */ mask-origin: inherit; mask-origin: initial; mask-origin: unset; for elements rendered as a single box, this property specifies the mask positioning area.
... in other words, this property specifies the origin position of an image specified by the mask-image css property.
...And 8 more matches

text-emphasis-style - CSS: Cascading Style Sheets
the text-emphasis-style css property sets the appearance of emphasis marks.
... it can also be set, and reset, using the text-emphasis shorthand.
... /* initial value */ text-emphasis-style: none; /* no emphasis marks */ /* <string> values */ text-emphasis-style: 'x'; text-emphasis-style: '点'; text-emphasis-style: '\25b2'; text-emphasis-style: '*'; text-emphasis-style: 'foo'; /* should not be used.
...And 8 more matches

<aside>: The Aside element - HTML: Hypertext Markup Language
the html <aside> element represents a portion of a document whose content is only indirectly related to the document's main content.
... asides are frequently presented as sidebars or call-out boxes.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 8 more matches

RegExpInstance.lastIndex - JavaScript
the lastindex is a read/write integer property of regular expression instances that specifies the index at which to start the next match.
... property attributes of regexpinstance.lastindex writable yes enumerable no configurable no description this property is set only if the regular expression instance used the g flag to indicate a global search, or the y flag to indicate a sticky search.
... the following rules apply: if lastindex is greater than the length of the string, test() and exec() fail, then lastindex is set to 0.
...And 8 more matches

String.prototype.lastIndexOf() - JavaScript
the lastindexof() method returns the index within the calling string object of the last occurrence of the specified value, searching backwards from fromindex.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax str.lastindexof(searchvalue[, fromindex]) parameters searchvalue a string representing the value to search for.
...And 8 more matches

WebAssembly.Table.prototype.set() - JavaScript
the set() prototype method of the webassembly.table object mutates a reference stored at a given index to a different value.
...this must be an exported webassembly function, a javascript wrapper for an underlying wasm function.
... if value is not an exported webassembly function or null, a typeerror is thrown.
...And 8 more matches

WebAssembly.compile() - JavaScript
the webassembly.compile() function compiles webassembly binary code into a webassembly.module object.
... this function is useful if it is necessary to a compile a module before it can be instantiated (otherwise, the webassembly.instantiate() function should be used).
... syntax promise<webassembly.module> webassembly.compile(buffersource); parameters buffersource a typed array or arraybuffer containing the binary code of the .wasm module you want to compile.
...And 8 more matches

WebAssembly.compileStreaming() - JavaScript
the webassembly.compilestreaming() function compiles a webassembly.module directly from a streamed underlying source.
... this function is useful if it is necessary to a compile a module before it can be instantiated (otherwise, the webassembly.instantiatestreaming() function should be used).
... syntax promise<webassembly.module> webassembly.compilestreaming(source); parameters source a response object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream and compile.
...And 8 more matches

async function expression - JavaScript
the async function keyword can be used to define async functions inside expressions.
... you can also define async functions using an async function statement.
... syntax async function [name]([param1[, param2[, ..., paramn]]]) { statements } as of es2015, you can also use arrow functions.
...And 8 more matches

Measuring performance using the PerfMeasurement.jsm code module
the perfmeasurement.jsm javascript code module lets you take detailed performance measurements of your code.
... note: the perfmeasurement.jsm javascript code module can only be used from chrome -- that is, from within the application itself or an add-on.
... the first thing you need to do is to import the module into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") you can then create a perfmeasurement object.
...And 7 more matches

CanvasRenderingContext2D.textBaseline - Web APIs
the canvasrenderingcontext2d.textbaseline property of the canvas 2d api specifies the current text baseline used when drawing text.
... syntax ctx.textbaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; options possible values: "top" the text baseline is the top of the em square.
... "hanging" the text baseline is the hanging baseline.
...And 7 more matches

mask-border-source - CSS: Cascading Style Sheets
the mask-border-source css property sets the source image used to create an element's mask border.
... the mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border.
... syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used.
...And 7 more matches

Character classes - JavaScript
character classes distinguish kinds of characters such as, for example, distinguishing between letters and digits.
...do not forget to edit it as well, thanks!
... has one of the following meanings: matches any single character except line terminators: \n, \r, \u2028 or \u2029.
...And 7 more matches

String.prototype.toLocaleUpperCase() - JavaScript
the tolocaleuppercase() method returns the calling string value converted to upper case, according to any locale-specific case mappings.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax str.tolocaleuppercase() str.tolocaleuppercase(locale) str.tolocaleuppercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to upper case according to any locale-specific case mappings.
...And 7 more matches

Symbol.asyncIterator - JavaScript
the symbol.asynciterator well-known symbol specifies the default asynciterator for an object.
... if this property is set on an object, it is an async iterable and can be used in a for await...of loop.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 7 more matches

WebAssembly.Instance() constructor - JavaScript
the webassembly.instance() constructor creates a new instance object which is a stateful, executable instance of a webassembly.module.
... syntax important: since instantiation for large modules can be expensive, developers should only use the instance() constructor when synchronous instantiation is absolutely required; the asynchronous webassembly.instantiatestreaming() method should be used at all other times.
... new webassembly.instance(module, importobject); parameters module the webassembly.module object to be instantiated.
...And 7 more matches

WebAssembly.Module.exports() - JavaScript
the webassembly.module.exports() function returns an array containing descriptions of all the declared exports of the given module.
... syntax webassembly.module.exports(module); parameters module a webassembly.module object.
... exceptions if module is not a webassembly.module object instance, a typeerror is thrown.
...And 7 more matches

class - JavaScript
the class declaration creates a new class with a given name using prototype-based inheritance.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... you can also define a class using a class expression.
...And 7 more matches

CanvasRenderingContext2D.setLineDash() - Web APIs
the setlinedash() method of the canvas 2d api's canvasrenderingcontext2d interface sets the line dash pattern used when stroking lines.
... note: to return to using solid lines, set the line dash list to an empty array.
... syntax ctx.setlinedash(segments); parameters segments an array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units).
...And 6 more matches

Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the css scroll snap specification gives us a way to snap scrolling to certain points as the user scrolls through a document.
... basics of scroll snap the key properties of the scroll snap specification are scroll-snap-type and scroll-snap-align.
... you can also pass in the keywords mandatory, or proximity.
...And 6 more matches

mask-border-width - CSS: Cascading Style Sheets
the mask-border-width css property sets the width of an element's mask border.
... syntax /* keyword value */ mask-border-width: auto; /* <length> value */ mask-border-width: 1rem; /* <percentage> value */ mask-border-width: 25%; /* <number> value */ mask-border-width: 3; /* vertical | horizontal */ mask-border-width: 2em 3em; /* top | horizontal | bottom */ mask-border-width: 5% 15% 10%; /* top | right | bottom | left */ mask-border-width: 5% 2em 10% auto; /* global values */ mask-border-width: inherit; mask-border-width: initial; mask-border-width: unset; the mask-border-width property may be specified using one, two, three, or four values chosen from the list of values below.
... values <length-percentage> the width of the mask border, specified as a <length> or a <percentage>.
...And 6 more matches

mask-clip - CSS: Cascading Style Sheets
the mask-clip css property determines the area which is affected by a mask.
... /* <geometry-box> values */ mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* keyword values */ mask-clip: no-clip; /* non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the keyword values listed below, separated by commas.
... view-box uses the nearest svg viewport as reference box.
...And 6 more matches

mask-type - CSS: Cascading Style Sheets
the mask-type css property sets whether an svg <mask> element is used as a luminance or an alpha mask.
... it applies to the <mask> element itself.
... /* keyword values */ mask-type: luminance; mask-type: alpha; /* global values */ mask-type: inherit; mask-type: initial; mask-type: unset; this property may be overridden by the mask-mode property, which has the same effect but applies to the element where the mask is used.
...And 6 more matches

SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead - JavaScript
the javascript warning "using //@ to indicate sourceurl pragmas is deprecated.
... use //# instead" occurs when there is a deprecated source map syntax in a javascript source.
... message warning: syntaxerror: using //@ to indicate sourceurl pragmas is deprecated.
...And 6 more matches

ReferenceError: assignment to undeclared variable "x" - JavaScript
the javascript strict mode-only exception "assignment to undeclated variable" occurs when the value has been assigned to an undeclared variable.
... message referenceerror: assignment to undeclared variable "x" (firefox) referenceerror: "x" is not defined (chrome) referenceerror: variable undefined in strict mode (edge) error type referenceerror warning in strict mode only.
... a value has been assigned to an undeclared variable.
...And 6 more matches

JavaScript error reference - JavaScript
below, you'll find a list of errors which are thrown by javascript.
...each error is an object based upon the error object, and has a name and a message.
... for a beginner's introductory tutorial on fixing javascript errors, see what went wrong?
...And 6 more matches

handler.has() - JavaScript
the handler.has() method is a trap for the in operator.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax const p = new proxy(target, { has: function(target, prop) { } }); parameters the following parameters are passed to has() method.
...And 6 more matches

String.prototype.toLocaleLowerCase() - JavaScript
the tolocalelowercase() method returns the calling string value converted to lower case, according to any locale-specific case mappings.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax str.tolocalelowercase() str.tolocalelowercase(locale) str.tolocalelowercase([locale, locale, ...]) parameters locale optional the locale parameter indicates the locale to be used to convert to lower case according to any locale-specific case mappings.
...And 6 more matches

WebAssembly.Memory.prototype.grow() - JavaScript
the grow() protoype method of the memory object increases the size of the memory instance by a specified number of webassembly pages.
... syntax memory.grow(number); parameters number the number of webassembly pages you want to grow the memory by (each one is 64kib in size).
... return value the previous size of the memory, in units of webassembly pages.
...And 6 more matches

WebAssembly.Module() constructor - JavaScript
a webassembly.module() constructor creates a new module object containing stateless webassembly code that has already been compiled by the browser and can be efficiently shared with workers, and instantiated multiple times.
... the webassembly.module() constructor function can be called to synchronously compile given webassembly binary code.
... however, the primary way to get a module is through an asynchronous compilation function like webassembly.compile().
...And 6 more matches

WebAssembly.validate() - JavaScript
the webassembly.validate() function validates a given typed array of webassembly binary code, returning whether the bytes form a valid wasm module (true) or not (false).
... syntax webassembly.validate(buffersource); parameters buffersource a typed array or arraybuffer containing webassembly binary code to be validated.
... return value a boolean that specifies whether buffersource is valid wasm code (true) or not (false).
...And 6 more matches

CanvasRenderingContext2D.lineDashOffset - Web APIs
the canvasrenderingcontext2d.linedashoffset property of the canvas 2d api sets the line dash offset, or "phase." note: lines are drawn by calling the stroke() method.
... syntax ctx.linedashoffset = value; value a float specifying the amount of the line dash offset.
... examples offsetting a line dash this example draws two dashed lines.
...And 5 more matches

aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css media feature can be used to test the aspect ratio of the viewport.
... syntax the aspect-ratio feature is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport.
... it is a range feature, meaning you can also use the prefixed min-aspect-ratio and max-aspect-ratio variants to query minimum and maximum values, respectively.
...And 5 more matches

mask-border-outset - CSS: Cascading Style Sheets
the mask-border-outset css property specifies the distance by which an element's mask border is set out from its border box.
... syntax /* <length> value */ mask-border-outset: 1rem; /* <number> value */ mask-border-outset: 1.5; /* vertical | horizontal */ mask-border-outset: 1 1.2; /* top | horizontal | bottom */ mask-border-outset: 30px 2 45px; /* top | right | bottom | left */ mask-border-outset: 7px 12px 14px 5px; /* global values */ mask-border-outset: inherit; mask-border-outset: initial; mask-border-outset: unset; the mask-border-outset property may be specified as one, two, three, or four values.
... values <length> the size of the mask border outset as a dimension.
...And 5 more matches

mask-image - CSS: Cascading Style Sheets
the mask-image css property sets the image that is used as mask layer for an element.
... /* keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* global values */ mask-image: inherit; mask-image: initial; mask-image: unset; syntax values none this keyword is interpreted as a transparent black image layer.
... <mask-source> a <url> reference to a <mask> or to a css image.
...And 5 more matches

mask-mode - CSS: Cascading Style Sheets
the mask-mode css property sets whether the mask reference defined by mask-image is treated as a luminance or alpha mask.
... /* keyword values */ mask-mode: alpha; mask-mode: luminance; mask-mode: match-source; /* multiple values */ mask-mode: alpha, match-source; /* global values */ mask-mode: inherit; mask-mode: initial; mask-mode: unset; syntax the mask-mode property is specified as one or more of the keyword values listed below, separated by commas.
... values alpha this keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.
...And 5 more matches

text-align-last - CSS: Cascading Style Sheets
the text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax /* keyword values */ text-align-last: auto; text-align-last: start; text-align-last: end; text-align-last: left; text-align-last: right; text-align-last: center; text-align-last: justify; /* global values */ text-align-last: inherit; text-align-last: initial; text-align-last: unset; values auto the affected line is aligned per the value of text-align, unless text-align is justify, in which case the effect is the same as setting text-align-last to start.
...And 5 more matches

text-emphasis-position - CSS: Cascading Style Sheets
the text-emphasis-position css property sets where emphasis marks are drawn.
... like ruby text, if there isn't enough room for emphasis marks, the line height is increased.
... /* initial value */ text-emphasis-position: over right; /* keywords value */ text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; text-emphasis-position: right under; text-emphasis-position: left under; /* global values */ text-emphasis-position: inherit; text-emphasis-position: initial; text-emphasis-position: unset; syntax values over draw marks over the text in horizontal writing mode.
...And 5 more matches

Warning: JavaScript 1.6's for-each-in loops are deprecated - JavaScript
the javascript warning "javascript 1.6's for-each-in loops are deprecated; consider using es6 for-of instead" occurs when a for each (variable in obj) statement is used.
... message warning: javascript 1.6's for-each-in loops are deprecated; consider using es6 for-of instead error type warning what went wrong?
... javascript 1.6's for each (variable in obj) statement is deprecated, and will be removed in the near future.
...And 5 more matches

String.prototype.toUpperCase() - JavaScript
the touppercase() method returns the calling string value converted to uppercase (the value will be converted to a string if it isn't one).
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax str.touppercase() return value a new string representing the calling string converted to upper case.
...And 5 more matches

TypedArray.prototype.lastIndexOf() - JavaScript
the lastindexof() method returns the last index at which a given element can be found in the typed array, or -1 if it is not present.
...this method has the same algorithm as array.prototype.lastindexof().
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 5 more matches

WebAssembly.CompileError() constructor - JavaScript
the webassembly.compileerror() constructor creates a new webassembly compileerror object, which indicates an error during webassembly decoding or validation.
... syntax new webassembly.compileerror(message, filename, linenumber) parameters message optional human-readable description of the error.
... examples creating a new compileerror instance the following snippet creates a new compileerror instance, and logs its details to the console: try { throw new webassembly.compileerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof compileerror); // true console.log(e.message); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } ...
...And 5 more matches

WebAssembly.Instance.prototype.exports - JavaScript
the exports readonly property of the webassembly.instance object prototype returns an object containing as its members all the functions exported from the webassembly module instance, to allow them to be accessed and used by javascript.
... instance.exports examples using exports after fetching some webassembly bytecode using fetch, we compile and instantiate the module using the webassembly.instantiatestreaming() function, importing a javascript function into the webassembly module in the process.
... we then call an exported webassembly function that is exported by the instance.
...And 5 more matches

WebAssembly.LinkError() constructor - JavaScript
the webassembly.linkerror() constructor creates a new webassembly linkerror object, which indicates an error during module instantiation (besides traps from the start function).
... syntax new webassembly.linkerror(message, filename, linenumber) parameters message optional human-readable description of the error.
... examples creating a new linkerror instance the following snippet creates a new linkerror instance, and logs its details to the console: try { throw new webassembly.linkerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof linkerror); // true console.log(e.message); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications ...
...And 5 more matches

WebAssembly.Module.imports() - JavaScript
the webassembly.imports() function returns an array containing descriptions of all the declared imports of the given module.
... syntax webassembly.module.imports(module); parameters module a webassembly.module object.
... exceptions if module is not a webassembly.module object instance, a typeerror is thrown.
...And 5 more matches

WebAssembly.RuntimeError() constructor - JavaScript
the webassembly.runtimeerror() constructor creates a new webassembly runtimeerror object — the type that is thrown whenever webassembly specifies a trap.
... syntax new webassembly.runtimeerror(message, filename, linenumber) parameters message optional human-readable description of the error.
... examples creating a new runtimeerror instance the following snippet creates a new runtimeerror instance, and logs its details to the console: try { throw new webassembly.runtimeerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof runtimeerror); // true console.log(e.message); // "hello" console.log(e.name); // "runtimeerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } ...
...And 5 more matches

WebAssembly.Table.prototype.get() - JavaScript
the get() prototype method of the webassembly.table() object retrieves a function reference stored at a given index.
... return value a function reference — this is an exported webassembly function, a javascript wrapper for an underlying wasm function.
... examples using get the following example (see table.html on github, and view it live also) compiles and instantiates the loaded table.wasm byte code using the webassembly.instantiatestreaming() method.
...And 5 more matches

Async scripts for asm.js - Game development
every medium or large game should compile asm.js code as part of an async script to give the browser the maximum flexibility to optimize the compilation process.
... in gecko, async compilation allows the javascript engine to compile the asm.js off the main thread when the game is loading and cache the generated machine code so that the game doesn't need to be compiled on subsequent loads (starting in firefox 28).
... to see the difference, toggle javascript.options.parallel_parsing in about:config.
...And 4 more matches

HTMLCanvasElement.mozGetAsFile() - Web APIs
the non-standard, firefox-specific the htmlcanvaselement method mozgetasfile() returns a memory-based file object representing the image contained in the canvas.
... syntax canvas.mozgetasfile(name, type); parameters name a domstring indicating the file name to give the file representing the image file in memory.
... return value a file object representing the image contained in the canvas.
...And 4 more matches

prefers-contrast - CSS: Cascading Style Sheets
the prefers-contrast css media feature is used to detect if the user has requested that the web content is presented with a higher (or lower) contrast.
... syntax no-preference indicates that the user has made no preference known to the system.
... this keyword value evaluates as false in a boolean context.
...And 4 more matches

ReferenceError: invalid assignment left-hand side - JavaScript
the javascript exception "invalid assignment left-hand side" occurs when there was an unexpected assignment somewhere.
... for example, a single "=" sign was used instead of "==" or "===".
... message referenceerror: invalid assignment left-hand side error type referenceerror.
...And 4 more matches

Math.asin() - JavaScript
the math.asin() function returns the arcsine (in radians) of a number, that is ∀x∊[-1;1],math.asin(x)=arcsin(x)= the unique y∊[-π2;π2]such thatsin(y)=x\forall x \in [{-1};1],\;\mathtt{\operatorname{math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax math.asin(x) parameters x a number.
...And 4 more matches

Reflect.has() - JavaScript
the static reflect.has() method works like the in operator as a function.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax reflect.has(target, propertykey) parameters target the target object in which to look for the property.
...And 4 more matches

RegExp.lastMatch ($&) - JavaScript
the non-standard lastmatch property is a static and read-only property of regular expressions that contains the last matched characters.
... regexp.$& is an alias for this property.
... description the lastmatch property is static, it is not a property of an individual regular expression object.
...And 4 more matches

RegExp.lastParen ($+) - JavaScript
the non-standard lastparen property is a static and read-only property of regular expressions that contains the last parenthesized substring match, if any.
... regexp.$+ is an alias for this property.
... description the lastparen property is static, it is not a property of an individual regular expression object.
...And 4 more matches

WebAssembly.Table.prototype.grow() - JavaScript
the grow() prototype method of the webassembly.table object increases the size of the table instance by a specified number of elements.
... exceptions if the grow() operation fails for whatever reason, a rangeerror is thrown.
... examples using grow the following example creates a new webassembly table instance with an initial size of 2 and a maximum size of 10.
...And 4 more matches

CanvasCaptureMediaStreamTrack - Web APIs
the canvascapturemediastreamtrack interface represents the video track contained in a mediastream being generated from a <canvas> following a call to htmlcanvaselement.capturestream().
... properties this interface inherits the properties of its parent, mediastreamtrack.
... canvascapturemediastreamtrack.canvas read only returns the htmlcanvaselement object whose surface is captured in real-time.
...And 3 more matches

CanvasRenderingContext2D.getLineDash() - Web APIs
the getlinedash() method of the canvas 2d api's canvasrenderingcontext2d interface gets the current line dash pattern.
... syntax ctx.getlinedash(); return value an array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units).
...for example, setting the line dash to [5, 15, 25] will result in getting back [5, 15, 25, 5, 15, 25].
...And 3 more matches

HTMLCanvasElement.mozFetchAsStream() - Web APIs
the htmlcanvaselement.mozfetchasstream() internal method used to create a new input stream that, when ready, would provide the contents of the canvas as image data.
... however, this non-standard and internal method has been removed.
... syntax void canvas.mozfetchasstream(callback, type); parameters callback an nsiinputstreamcallback.
...And 3 more matches

MediaStreamAudioDestinationNode.MediaStreamAudioDestinationNode() - Web APIs
the mediastreamaudiodestinationnode() constructor of the web audio api creates a new mediastreamaudiodestinationnode object instance.
... syntax var myaudiodest = new mediastreamaudiodestinationnode(context, options); parameters inherits parameters from the audionodeoptions dictionary.
... context an audiocontext representing the audio context you want the node to be associated with.
...And 3 more matches

MediaStreamAudioSourceNode.mediaStream - Web APIs
the mediastreamaudiosourcenode interface's read-only mediastream property indicates the mediastream that contains the audio track from which the node is receiving audio.
... this stream was specified when the node was first created, either using the mediastreamaudiosourcenode() constructor or the audiocontext.createmediastreamsource() method.
... syntax audiosourcestream = mediastreamaudiosourcenode.mediastream; value a mediastream representing the stream which contains the mediastreamtrack serving as the source of audio for the node.
...And 3 more matches

:nth-last-of-type() - CSS: Cascading Style Sheets
the :nth-last-of-type() css pseudo-class matches elements of a given type, based on their position among a group of siblings, counting from the end.
... /* selects every fourth <p> element among any group of siblings, counting backwards from the last one */ p:nth-last-of-type(4n) { color: lime; } note: this pseudo-class is essentially the same as :nth-of-type, except it counts items backwards from the end, not forwards from the beginning.
... syntax the nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.
...And 3 more matches

grid-template-areas - CSS: Cascading Style Sheets
the grid-template-areas css property specifies named grid areas, establishing the cells in the grid and assigning them names.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... those areas are not associated with any particular grid item, but can be referenced from the grid-placement properties grid-row-start, grid-row-end, grid-column-start, grid-column-end, and their shorthands grid-row, grid-column, and grid-area.
...And 3 more matches

mask-border-repeat - CSS: Cascading Style Sheets
the mask-border-repeat css property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border.
... syntax /* keyword value */ mask-border-repeat: stretch; mask-border-repeat: repeat; mask-border-repeat: round; mask-border-repeat: space; /* vertical | horizontal */ mask-border-repeat: round stretch; /* global values */ mask-border-repeat: inherit; mask-border-repeat: initial; mask-border-repeat: unset; the mask-border-repeat property may be specified using one or two values chosen from the list of values below.
... formal definition initial valuestretchapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples basic usage this property doesn't appear to be supported anywhere yet.
...And 3 more matches

BigInt.asIntN() - JavaScript
the bigint.asintn static method is used to wrap a bigint value to a signed integer between -2width-1 and 2width-1-1.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax bigint.asintn(width, bigint); parameters width the amount of bits available for the integer size.
...And 3 more matches

BigInt.asUintN() - JavaScript
the bigint.asuintn static method is used to wrap a bigint value to an unsigned integer between 0 and 2width-1.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax bigint.asuintn(width, bigint); parameters width the amount of bits available for the integer size.
...And 3 more matches

Math.asinh() - JavaScript
the math.asinh() function returns the hyperbolic arcsine of a number, that is math.asinh(x)=arsinh(x)= the unique ysuch thatsinh(y)=x\mathtt{\operatorname{math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x the source for this interactive example is stored in a github repository.
... if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax math.asinh(x) parameters x a number.
...And 3 more matches

RegExp.prototype.ignoreCase - JavaScript
the ignorecase property indicates whether or not the "i" flag is used with the regular expression.
... ignorecase is a read-only property of an individual regular expression instance.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 3 more matches

String.prototype.toLowerCase() - JavaScript
the tolowercase() method returns the calling string value converted to lower case.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax str.tolowercase() return value a new string representing the calling string converted to lower case.
...And 3 more matches

WebAssembly.Memory.prototype.buffer - JavaScript
the buffer prototype property of the webassembly.memory object returns the buffer contained in the memory.
... examples using buffer the following example (see memory.html on github, and view it live also) fetches and instantiates the loaded memory.wasm byte code using the webassembly.instantiatestreaming() method, while importing the memory created in the line above.
... webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(obj => { var i32 = new uint32array(memory.buffer); for (var i = 0; i < 10; i++) { i32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); specifications specification webassembly javascript interfacethe definition of 'buffer' in that specification.
...And 3 more matches

WebAssembly.Table.prototype.length - JavaScript
the length prototype property of the webassembly.table object returns the length of the table, i.e.
... syntax table.length; examples using length the following example creates a new webassembly table instance with an initial size of 2 and a maximum size of 10.
... var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'length' in that specification.
...And 3 more matches

Logical OR assignment (||=) - JavaScript
the logical or assignment (x ||= y) operator only assigns if x is falsy.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... logical or assignment short-circuits as well, meaning it only performs an assignment if the logical operation would evaluate the right-hand side.
...And 3 more matches

JavaScript reference - JavaScript
this part of the javascript section on mdn serves as a repository of facts about the javascript language.
... built-ins javascript standard built-in objects, along with their methods and properties.
...ndexed collections array int8array uint8array uint8clampedarray int16array uint16array int32array uint32array float32array float64array bigint64array biguint64array keyed collections map set weakmap weakset structured data arraybuffer sharedarraybuffer atomics dataview json control abstraction promise generator generatorfunction asyncfunction reflection reflect proxy internationalization intl intl.collator intl.datetimeformat intl.displaynames intl.listformat intl.locale intl.numberformat intl.pluralrules intl.relativetimeformat webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.table webassembly.compileerror webassem...
...And 3 more matches

MediaSessionActionDetails.fastSeek - Web APIs
the boolean property fastseek in the mediasessionactiondetails dictionary is an optional value which, when specified and true, indicates that the requested seekto operation is part of an ongoing series of seekto operations.
... your handler should take steps to return as quickly as possible by skipping any steps of its operation which are only necessary when the seek operation is complete.
... once fastseek is false or not present, the repeating series of seekto actions is complete and you can finalize the state of your web app or content.
...And 2 more matches

:last-of-type - CSS: Cascading Style Sheets
the :last-of-type css pseudo-class represents the last element of its type among a group of sibling elements.
... /* selects any <p> that is the last element of its type among its siblings */ p:last-of-type { color: lime; } note: as originally defined, the selected element had to have a parent.
... syntax :last-of-type examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted.
...And 2 more matches

device-aspect-ratio - CSS: Cascading Style Sheets
the device-aspect-ratio css media feature can be used to test the width-to-height aspect ratio of an output device.
... syntax the device-aspect-ratio feature is specified as a <ratio>.
... it is a range feature, meaning that you can also use the prefixed min-device-aspect-ratio and max-device-aspect-ratio variants to query minimum and maximum values, respectively.
...And 2 more matches

contrast() - CSS: Cascading Style Sheets
the contrast() css function adjusts the contrast of the input image.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax contrast(amount) parameters amount the contrast of the result, specified as a <number> or a <percentage>.
...And 2 more matches

mask-border-mode - CSS: Cascading Style Sheets
the mask-border-mode css property specifies the blending mode used in a mask border.
... syntax /* keyword values */ mask-border-mode: luminance; mask-border-mode: alpha; /* global values */ mask-border-mode: inherit; mask-border-mode: initial; mask-border-mode: unset; values luminance the luminance values of the mask border image are used as the mask values.
... alpha the alpha values of the mask border image are used as the mask values.
...And 2 more matches

mask-composite - CSS: Cascading Style Sheets
the mask-composite css property represents a compositing operation used on the current mask layer with the mask layers below it.
... /* keyword values */ mask-composite: add; mask-composite: subtract; mask-composite: intersect; mask-composite: exclude; /* global values */ mask-composite: inherit; mask-composite: initial; mask-composite: unset; syntax one or more of the keyword values listed below, separated by commas.
... values for the composition the current mask layer is referred to as source, while all layers below it are referred to as destination.
...And 2 more matches

mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image.
... /* keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25% 75%; mask-position: 0px 0px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas.
... formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | cen...
...And 2 more matches

TypeError: can't assign to property "x" on "y": not an object - JavaScript
the javascript strict mode exception "can't assign to property" occurs when attempting to create a property on primitive value such as a symbol, a string, a number or a boolean.
... message typeerror: can't assign to property "x" on {y}: not an object (firefox) typeerror: cannot create property 'x' on {y} (chrome) error type typeerror.
... in strict_mode, a typeerror is raised when attempting to create a property on primitive value such as a symbol, a string, a number or a boolean.
...And 2 more matches

Intl.Locale.prototype.baseName - JavaScript
the intl.locale.prototype.basename property returns a substring of the locale's string representation, containing core information about the locale.
...the basename property returns basic, core information about the locale in the form of a substring of the complete data string.
... basename returns the language ["-" script] ["-" region] *("-" variant) subsequence of the unicode_language_id grammar.
...And 2 more matches

Set.prototype.has() - JavaScript
the has() method returns a boolean indicating whether an element with the specified value exists in a set object or not.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax myset.has(value); parameters value the value to test for presence in the set object.
...And 2 more matches

Assignment (=) - JavaScript
the simple assignment operator (=) is used to assign a value to a variable.
... the assignment operation evaluates to the assigned value.
... chaining the assignment operator is possible in order to assign a single value to multiple variables the source for this interactive example is stored in a github repository.
...And 2 more matches

Logical nullish assignment (??=) - JavaScript
the logical nullish assignment (x ??= y) operator only assigns if x is nullish (null or undefined).
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... logical nullish assignment short-circuits as well meaning that x ??= y is equivalent to: x ??
...And 2 more matches

CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
the canvascapturemediastreamtrack method requestframe() requests that a frame be captured from the canvas and sent to the stream.
... syntax stream.requestframe(); return value undefined usage notes there is currently an issue flagged in the specification pointing out that at this time, no exceptions are being thrown if the canvas isn't origin-clean.
... this may change in the future, so it would be wise to plan ahead and watch for exceptions such as securityerror (although the specific error that might be thrown is not mentioned in the spec, this is a likely candidate).
... example // find the canvas element to capture var canvaselt = document.getelementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // send the current state of the canvas as a frame to the stream stream.getvideotracks()[0].requestframe(); specifications specification status comment media capture from dom elementsthe definition of 'canvascapturemediastream.requestframe()' in that specification.

CanvasRenderingContext2D.canvas - Web APIs
the canvasrenderingcontext2d.canvas property, part of the canvas api, is a read-only reference to the htmlcanvaselement object that is associated with a given context.
... it might be null if there is no associated <canvas> element.
... syntax ctx.canvas; examples given this <canvas> element: <canvas id="canvas"></canvas> ...
... you can get a reference to the canvas element within the canvasrenderingcontext2d by using the canvas property: var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.canvas // htmlcanvaselement specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.canvas' in that specification.

CanvasRenderingContext2D.measureText() - Web APIs
the canvasrenderingcontext2d.measuretext() method returns a textmetrics object that contains information about the measured text (such as its width, for example).
... syntax ctx.measuretext(text); parameters text the text string to measure.
... example given this <canvas> element: <canvas id="canvas"></canvas> ...
... you can get a textmetrics object using the following code: const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let text = ctx.measuretext('hello world'); console.log(text.width); // 56; specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.measuretext' in that specification.

MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
the mediastreamtrackaudiosourceoptions dictionary's mediastreamtrack property must contain a reference to the mediastreamtrack from which the mediastreamtrackaudiosourcenode being created using the mediastreamtrackaudiosourcenode() constructor.
... syntax mediastreamtrackaudiosourceoptions = { mediastreamtrack: audiosourcetrack; } mediastreamtrackaudiosourceoptions.mediastreamtrack = audiosourcetrack; value a mediastreamtrack from which the audio output of the new mediastreamtrackaudiosourcenode will be taken.
... example this example uses getusermedia() to obtain access to the user's camera, then creates a new mediastreamaudiosourcenode from the first audio track provided by the device.
... let audioctx = new (window.audiocontext || window.webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourceoptions.mediastream' in that specification.

-webkit-mask-attachment - CSS: Cascading Style Sheets
if a -webkit-mask-image is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
... /* keyword values */ -webkit-mask-attachment: scroll; -webkit-mask-attachment: fixed; -webkit-mask-attachment: local; /* multiple values */ -webkit-mask-attachment: scroll, local; -webkit-mask-attachment: fixed, local, scroll; /* global values */ -webkit-mask-attachment: inherit; -webkit-mask-attachment: initial; -webkit-mask-attachment: unset; syntax values scroll if scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image.
... fixed if fixed is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport.
... formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.

:-moz-last-node - CSS: Cascading Style Sheets
the :-moz-last-node css pseudo-class is a mozilla extension that represents any element that is the last child node of some other element.
... it differs from :last-child because it does not match a last-child element with (non-whitespace) text after it.
... note: any whitespace at the end of an element is ignored for the determination of :-moz-last-node.
... syntax :-moz-last-node examples css span:-moz-last-node { background-color: lime; } html <p> <span>this does not match.</span> <span>this matches!</span> </p> <p> <span>this doesn't match because it's followed by text.</span> blahblah.

:last-child - CSS: Cascading Style Sheets
the :last-child css pseudo-class represents the last element among a group of sibling elements.
... /* selects any <p> that is the last element among its siblings */ p:last-child { color: lime; } note: as originally defined, the selected element had to have a parent.
... syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child { color: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; } result specifications specification status comment selectors level 4the definition of ':last-child' in ...
... selectors level 3the definition of ':last-child' in that specification.

Introduction to the CSS basic box model - CSS: Cascading Style Sheets
when laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard css basic box model.
... every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
... the content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player.
...it often has a background color or background image.

Mastering margin collapsing - CSS: Cascading Style Sheets
the top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing.
... margin collapsing occurs in three basic cases: adjacent siblings the margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).
... some things to note: more complex margin collapsing (of more than two margins) occurs when the above cases are combined.
... <p>this paragraph has a <code>.4rem</code> margin between it and the text above.</p> <p>my bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> </div> <p>i am <code>2rem</code> below the element above.</p> css div { margin: 2rem 0; background: lavender; } p { margin: .4rem 0 1.2rem 0; background: yellow; } result specifications specification status ...

CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box model is a module of css that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.
...this model defines how css lays out elements, including their content, padding, border, and margin areas.
... mastering margin collapsing sometimes, two adjacent margins are collapsed into one.
... specifications specification status comment css basic box model working draft added margin-trim css level 2 (revision 1) recommendation css level 1 recommendation initial definition.

Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
picking a target the pseudo-class :target is used to style the target element of a url containing a fragment identifier.
...in html, identifiers are found as the values of either id or name attributes, since the two share the same namespace.
... <h4 id="one">...</h4> <p id="two">...</p> <div id="three">...</div> <a id="four">...</a> <em id="five">...</em> <a href="#one">first</a> <a href="#two">second</a> <a href="#three">third</a> <a href="#four">fourth</a> <a href="#five">fifth</a> conclusion in cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the document they're supposed to be reading.
... note: this reprinted article was originally part of the devedge site.

Class selectors - CSS: Cascading Style Sheets
the css class selector matches elements based on the contents of their class attribute.
... /* all elements with class="spacious" */ .spacious { margin: 2em; } /* all <li> elements with class="spacious" */ li.spacious { margin: 2em; } /* all <li> elements with a class list that includes both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red ...
...text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifications specification status comment selectors level 4the definition of 'class selectors' in that specification.
... working draft no changes selectors level 3the definition of 'class selectors' in that specification.

text-emphasis-color - CSS: Cascading Style Sheets
the text-emphasis-color css property sets the color of emphasis marks.
... this value can also be set using the text-emphasis shorthand.
... /* initial value */ text-emphasis-color: currentcolor; /* <color> */ text-emphasis-color: #555; text-emphasis-color: blue; text-emphasis-color: rgba(90, 200, 160, 0.8); text-emphasis-color: transparent; /* global values */ text-emphasis-color: inherit; text-emphasis-color: initial; text-emphasis-color: unset; syntax values <color> defines the color of the emphasis marks.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples emphasis with a color and custom character css em { text-emphasis-color: green; text-emphasis-style: "*"; } html <p>here's an example:</p> <em>this has emphasis marks!</em> result specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.

JavaScript Guide - JavaScript
the javascript guide shows you how to use javascript and gives an overview of the language.
... if you need exhaustive information about a language feature, have a look at the javascript reference.
... chapters this guide is divided into several chapters: introduction about this guide about javascript javascript and java ecmascript tools hello world grammar and types basic syntax & comments declarations variable scope variable hoisting data structures and types literals control flow and error handling if...else switch try/catch/throw error objects loops and iteration for while do...while break/continue for..in for..of functions defining functions calling functions function scope closures arguments & parameters arrow functions expressions and operators assignment & comparisons arithmetic operators bitwise & logical operators conditional (ternary) operator numbers and dates ...
... date object text formatting string literals string object template literals internationalization regular expressions indexed collections arrays typed arrays keyed collections map weakmap set weakset working with objects objects and properties creating objects defining methods getter and setter details of the object model prototype-based oop creating object hierarchies inheritance promises guarantees chaining error propagation composition timing iterators and generators iterators iterables generators meta programming proxy handlers and traps revocable proxy reflect javascript modules exporting importing default exports renaming features aggregating modules ...

Map.prototype.has() - JavaScript
the has() method returns a boolean indicating whether an element with the specified key exists or not.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax mymap.has(key) parameters key the key of the element to test for presence in the map object.
... examples using has() let mymap = new map() mymap.set('bar', "foo") mymap.has('bar') // returns true mymap.has('baz') // returns false specifications specification ecmascript (ecma-262)the definition of 'map.prototype.has' in that specification.

WeakMap.prototype.has() - JavaScript
the has() method returns a boolean indicating whether an element with the specified key exists in the weakmap object or not.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax wm.has(key); parameters key required.
... examples using the has method var wm = new weakmap(); wm.set(window, 'foo'); wm.has(window); // returns true wm.has('baz'); // returns false specifications specification ecmascript (ecma-262)the definition of 'weakmap.prototype.has' in that specification.

WeakSet.prototype.has() - JavaScript
the has() method returns a boolean indicating whether an object exists in a weakset or not.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax ws.has(value); parameters value required.
... examples using the has method var ws = new weakset(); var obj = {}; ws.add(window); myset.has(window); // returns true myset.has(obj); // returns false specifications specification ecmascript (ecma-262)the definition of 'weakset.prototype.has' in that specification.

Addition assignment (+=) - JavaScript
the addition assignment operator (+=) adds the value of the right operand to a variable and assigns the result to the variable.
... the types of the two operands determine the behavior of the addition assignment operator.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x += y meaning: x = x + y examples using addition assignment // assuming the following variables // foo = 'foo' // bar = 5 // baz = true // number + number -> addition bar += 2 // 7 // boolean + number -> addition baz += 1 // 2 // boolean + boolean -> addition baz += false // 1 // number + string -> concatenation bar += 'foo' // "5foo" // string + boolean -> concatenation foo += false // "foofalse" // string + string -> concatenation foo += 'bar' // "foobar" specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Logical AND assignment (&&=) - JavaScript
the logical and assignment (x &&= y) operator only assigns if x is truthy.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... logical and assignment short-circuits as well meaning that x &&= y is equivalent to: x && (x = y); and not equivalent to the following which would always perform an assignment: x = x && y; examples using logical and assignment let x = 0; let y = 1; x &&= 0; // 0 x &&= 1; // 0 y &&= 1; // 1 y &&= 0; // 0 specifications specification logical assignment operatorsthe definitio...
...n of 'assignment operators' in that specification.

MediaSource.MediaSource() - Web APIs
the mediasource() constructor of the mediasource interface constructs and returns a new mediasource object with no associated source buffers.
... syntax var mediasource = new mediasource(); parameters none.
... example the following snippet is taken from a simple example written by nick desaulniers (view the full demo live, or download the source for further investigation.) var video = document.queryselector('video'); var asseturl = 'frag_bunny.mp4'; // need to be specific for blink regarding codecs // ./mp4info frag_bunny.mp4 | grep codec var mimecodec = 'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'; if ('mediasource' in window && mediasource.istypesupported(mimecodec)) { var mediasource = new mediasource; //console.log(mediasource.readystate); // closed video.src = url.createobjecturl(mediasource); mediasource.addeventlistener('sourceopen', sourceopen); } else { console.error('unsupported mime type or codec: ', mimecodec); } ...

MediaStreamAudioSourceOptions.mediaStream - Web APIs
the mediastreamaudiosourceoptions dictionary's mediastream property must specify the mediastream from which to retrieve audio data when instantiating a mediastreamaudiosourcenode using the mediastreamaudiosourcenode() constructor.
... syntax mediastreamaudiosourceoptions = { mediastream: audiosourcestream; } mediastreamaudiosourceoptions.mediastream = audiosourcestream; value a mediastream representing the stream from which to use a mediastreamtrack as the source of audio for the node.
... example specifications specification status comment web audio apithe definition of 'mediastreamaudiosourceoptions.mediastream' in that specification.

PasswordCredential.password - Web APIs
the password read-only property of the passwordcredential interface returns a usvstring containing the password of the credential.
... syntax password =passwordcredential.password value a usvstring containing a password.
... specifications specification status comment credential management level 1the definition of 'password' in that specification.

PasswordCredential.passwordName - Web APIs
the passwordname property of the passwordcredential interface returns a usvstring, depicting the name used by the password field, when submitting the current object to a remote endpoint via fetch.
... this property defaults to 'password', but may be matched to anything your backend service expects.
... syntax var passwordname = passwordcredential.passwordname passwordcredential.passwordname = "passcode" value a usvstring representing the password field name, used when submitting the current object to a remote endpoint via fetch.

-webkit-mask-position-x - CSS: Cascading Style Sheets
the -webkit-mask-position-x css property sets the initial horizontal position of a mask image.
... /* keyword values */ -webkit-mask-position-x: left; -webkit-mask-position-x: center; -webkit-mask-position-x: right; /* <percentage> values */ -webkit-mask-position-x: 100%; -webkit-mask-position-x: -50%; /* <length> values */ -webkit-mask-position-x: 50px; -webkit-mask-position-x: -1cm; /* multiple values values */ -webkit-mask-position-x: 50px, 25%, -3em; /* global values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the image relative to the box's lef...
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: 25%; } specifications not part of any standard.

-webkit-mask-position-y - CSS: Cascading Style Sheets
the -webkit-mask-position-y css property sets the initial vertical position of a mask image.
... /* keyword values */ -webkit-mask-position-y: top; -webkit-mask-position-y: center; -webkit-mask-position-y: bottom; /* <percentage> values */ -webkit-mask-position-y: 100%; -webkit-mask-position-y: -50%; /* <length> values */ -webkit-mask-position-y: 50px; -webkit-mask-position-y: -1cm; /* multiple values values */ -webkit-mask-position-y: 50px, 25%, -3em; /* global values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image relative to the box's top ...
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: 25%; } specifications not part of any standard.

TypeError: "x" has no properties - JavaScript
the javascript exception "null (or undefined) has no properties" occurs when you attempt to access properties of null and undefined.
... message typeerror: unable to get property {x} of undefined or null reference (edge) typeerror: null has no properties (firefox) typeerror: undefined has no properties (firefox) error type typeerror.
... examples null and undefined have no properties null.foo; // typeerror: null has no properties undefined.bar; // typeerror: undefined has no properties ...

Symbol.hasInstance - JavaScript
the symbol.hasinstance well-known symbol is used to determine if a constructor object recognizes an object as its instance.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... property attributes of symbol.hasinstance writable no enumerable no configurable no examples custom instanceof behavior you could implement your custom instanceof behavior like this, for example: class myarray { static [symbol.hasinstance](instance) { return array.isarray(instance) } } console.log([] instanceof myarray); // true function myarray() { } object.defineproperty(myarray, symbol.hasinstance, { value: function(instance) { return array.isarray(instance); } }); console.log([] instanceof myarray); // true specifications specification ecmascript (ecma-262)the definition of 'symbol.hasinstance' in that specification.

Bitwise AND assignment (&=) - JavaScript
the bitwise and assignment operator (&=) uses the binary representation of both operands, does a bitwise and operation on them and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x &= y meaning: x = x & y examples using bitwise and assignment let a = 5; // 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 a &= 2; // 0 specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Bitwise OR assignment (|=) - JavaScript
the bitwise or assignment operator (|=) uses the binary representation of both operands, does a bitwise or operation on them and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x |= y meaning: x = x | y examples using bitwise or assignment let a = 5; a |= 2; // 7 // 5: 00000000000000000000000000000101 // 2: 00000000000000000000000000000010 // ----------------------------------- // 7: 00000000000000000000000000000111 specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Bitwise XOR assignment (^=) - JavaScript
the bitwise xor assignment operator (^=) uses the binary representation of both operands, does a bitwise xor operation on them and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x ^= y meaning: x = x ^ y examples using bitwise xor assignment let a = 5; // 00000000000000000000000000000101 a ^= 3; // 00000000000000000000000000000011 console.log(a); // 00000000000000000000000000000110 // 6 let b = 5; // 00000000000000000000000000000101 b ^= 0; // 00000000000000000000000000000000 console.log(b); // 00000000000000000000000000000101 // 5 specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Division assignment (/=) - JavaScript
the division assignment operator (/=) divides a variable by the value of the right operand and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x /= y meaning: x = x / y examples using division assignment // assuming the following variable // bar = 5 bar /= 2 // 2.5 bar /= 'foo' // nan bar /= 0 // infinity specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Exponentiation assignment (**=) - JavaScript
the exponentiation assignment operator (**=) raises the value of a variable to the power of the right operand.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x **= y meaning: x = x ** y examples using exponentiation assignment // assuming the following variable // bar = 5 bar **= 2 // 25 bar **= 'foo' // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Left shift assignment (<<=) - JavaScript
the left shift assignment operator (<<=) moves the specified amount of bits to the left and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x <<= y meaning: x = x << y examples using left shift assignment let a = 5; // 00000000000000000000000000000101 bar <<= 2; // 20 // 00000000000000000000000000010100 specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Multiplication assignment (*=) - JavaScript
the multiplication assignment operator (*=) multiplies a variable by the value of the right operand and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x *= y meaning: x = x * y examples using multiplication assignment // assuming the following variable // bar = 5 bar *= 2 // 10 bar *= 'foo' // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Remainder assignment (%=) - JavaScript
the remainder assignment operator (%=) divides a variable by the value of the right operand and assigns the remainder to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x %= y meaning: x = x % y examples using remainder assignment // assuming the following variable // bar = 5 bar %= 2 // 1 bar %= 'foo' // nan bar %= 0 // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Right shift assignment (>>=) - JavaScript
the right shift assignment operator (>>=) moves the specified amount of bits to the right and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x >>= y meaning: x = x >> y examples using right shift assignment let a = 5; // (00000000000000000000000000000101) a >>= 2; // 1 (00000000000000000000000000000001) let b = -5; // (-00000000000000000000000000000101) b >>= 2; // -2 (-00000000000000000000000000000010) specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Subtraction assignment (-=) - JavaScript
the subtraction assignment operator (-=) subtracts the value of the right operand from a variable and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x -= y meaning: x = x - y examples using subtraction assignment // assuming the following variable // bar = 5 bar -= 2 // 3 bar -= 'foo' // nan specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

Unsigned right shift assignment (>>>=) - JavaScript
the unsigned right shift assignment operator (>>>=) moves the specified amount of bits to the right and assigns the result to the variable.
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax operator: x >>>= y meaning: x = x >>> y examples using unsigned right shift assignment let a = 5; // (00000000000000000000000000000101) a >>>= 2; // 1 (00000000000000000000000000000001) let b = -5; // (-00000000000000000000000000000101) b >>>= 2; // 1073741822 (00111111111111111111111111111110) specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.

CanvasRenderingContext2D.drawWidgetAsOnScreen() - Web APIs
the non-standard and internal only canvasrenderingcontext2d.drawwidgetasonscreen() method of the canvas 2d api renders the root widget of a window into the canvas.
... syntax void ctx.drawwidgetasonscreen(window); parameters window the window to render.

:-moz-handler-crashed - CSS: Cascading Style Sheets
the :-moz-handler-crashed css pseudo-class is a mozilla extension that matches elements that can't be displayed because the plugin responsible for drawing them has crashed.
... syntax :-moz-handler-crashed specifications not part of any standard.

CSS Basic User Interface - CSS: Cascading Style Sheets
css basic user interface is a css module that lets you define the rendering and functionality of features related to the user interface.
... specifications specification status comment css basic user interface module level 4 working draft css basic user interface module level 3 recommendation css level 2 (revision 1) recommendation initial definition.

CSS Masking - CSS: Cascading Style Sheets
css masking is a css module that defines means, including masking and clipping, for partially or fully hiding portions of visual elements.
... reference properties clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type specifications specification status comment css masking module level 1 candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'mask' in that specification.

CSS Custom Properties for Cascading Variables - CSS: Cascading Style Sheets
css custom properties for cascading variables is a css module that allows for the creation of custom properties that can be used over and over.
... css properties --* specifications specification status comment css custom properties for cascading variables module level 1 candidate recommendation initial definition ...

Details of the object model - JavaScript
« previousnext » javascript is an object-based language based on prototypes, rather than being class-based.
... because of this different basis, it can be less apparent how javascript allows you to create hierarchies of objects and to have inheritance of properties and their values.
... this chapter assumes that you are already somewhat familiar with javascript and that you have used javascript functions to create simple objects.
...And 127 more matches

ARIA Test Cases - Accessibility
introduction the information on this page is out of date: it was last updated november 2010.
...or copy-paste: http://oaa-accessibility.org/examples/ for each example we test the "expected" results with assistive technologies, for each browser that at supports wai-aria in.
... where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect.
...And 126 more matches

Handling common JavaScript problems - Learn web development
previous overview: cross browser testing next now we'll look at common cross-browser javascript problems and how to fix them.
... this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
... prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross browser testing.
...And 125 more matches

CanvasRenderingContext2D - Web APIs
the canvasrenderingcontext2d interface, part of the canvas api, provides the 2d rendering context for the drawing surface of a <canvas> element.
...the canvas tutorial has more explanation, examples, and resources, as well.
... basic example to get a canvasrenderingcontext2d instance, you must first have an html <canvas> element to work with: <canvas id="my-house" width="300" height="300"></canvas> to get the canvas' 2d rendering context, call getcontext() on the <canvas> element, supplying '2d' as the argument: const canvas = document.getelementbyid('my-house'); const ctx = canvas.getcontext('2d'); with the context in hand, you can draw anything you like.
...And 107 more matches

What is JavaScript? - Learn web development
overview: first steps next welcome to the mdn beginner's javascript course!
... in this article we will look at javascript from a high level, answering questions such as "what is it?" and "what can you do with it?", and making sure you are comfortable with javascript's purpose.
... prerequisites: basic computer literacy, a basic understanding of html and css.
...And 96 more matches

Graceful asynchronous programming with Promises - Learn web development
previous overview: asynchronous next promises are a comparatively new feature of the javascript language that allow you to defer further actions until after a previous action has completed, or respond to its failure.
... this is useful for setting up a sequence of async operations to work correctly.
... prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals.
...And 92 more matches

Grammar and types - JavaScript
« previousnext » this chapter discusses javascript's basic grammar, variable declarations, data types and literals.
... basics javascript borrows most of its syntax from java, c, and c++, but it has also been influenced by awk, perl, and python.
... javascript is case-sensitive and uses the unicode character set.
...And 91 more matches

Inheritance in JavaScript - Learn web development
previous overview: objects next with most of the gory details of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes.
... in addition, we present some advice on when and where you might use oojs, and look at how classes are dealt with in modern ecmascript syntax.
... prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects).
...And 84 more matches

WAI-ARIA basics - Learn web development
previous overview: accessibility next following on from the previous article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.
... wai-aria is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on.
... here we'll show how to use it at a basic level to improve accessiblity.
...And 82 more matches

HTML: A good basis for accessibility - Learn web development
prerequisites: basic computer literacy, a basic understanding of html (see introduction to html), and an understanding of what accessibility is.
... html and accessibility as you learn more about html — read more resources, look at more examples, etc.
...this means using the correct html elements for their intended purpose as much as possible.
...And 79 more matches

HTML: A good basis for accessibility - Learn web development
prerequisites: basic computer literacy, a basic understanding of html (see introduction to html), and an understanding of what accessibility is.
... html and accessibility as you learn more about html — read more resources, look at more examples, etc.
...this means using the correct html elements for their intended purpose as much as possible.
...And 79 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the first and most important thing to understand when considering the code to manage point-of-view and cameras in your application is this: webxr does not have cameras.
... there are a few articles about the fundamental math, geometry, and other concepts behind webgl and webxr which may be useful to read before or while reading this one, including: explaining basic 3d theory matrix math for the web webgl model view projection geometry and reference spaces in webxr ed.
... note: most diagrams used in this article to show how the camera moves while performing standard movements was taken from an article on the filmmakeriq web site; namely, from this image which is found all over the web, however, and though we assume these are under a permissive license due to their frequent reuse, ownership is not certain.
...And 77 more matches

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
by davey waterson, javascript architect, aptana there's no debate that javascript is the most widely used language client-side on the web.
... regardless of how the back-ends of your web applications are implemented, client side you're using javascript for everything from same form validations to full ajax applications.
... now imagine being able to develop web apps using javascript server-side too.
...And 73 more matches

UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to target a checkbox only when it is selected.
... in this article, we will explore in detail the different ui pseudo-classes available to us in modern browsers for styling forms in different states.
... prerequisites: basic computer literacy, and a basic understanding of html and css, including general knowledge of pseudo-classes and pseudo-elements.
...And 73 more matches

Using XPCOM Utilities to Make Things Easier
« previousnext » this chapter goes back over the code you've already created in the first part of the tutorial (see weblock1.cpp in the previous chapter) and uses xpcom tools that make coding a lot easier and more efficient.
... it also introduces a basic string type that is used with many of the apis in both xpcom and gecko.
...much of the code created to get the software recognized and registered as a component can be reduced to a small data structure and a single macro.
...And 72 more matches

CSS and JavaScript accessibility best practices - Learn web development
previous overview: accessibility next css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
...this article outlines some css and javascript best practices that should be considered to ensure even complex content is as accessible as possible.
... prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and understanding of what accessibility is.
...And 70 more matches

Background Tasks API - Web APIs
the cooperative scheduling of background tasks api (also referred to as the background tasks api or simply the requestidlecallback() api) provides the ability to queue tasks to be executed automatically by the user agent when it determines that there is free time to do so.
...this code draws any pending updates to the document currently being displayed, runs any javascript code the page needs to run, accepts events from input devices, and dispatches those events to the elements that should receive them.
...it's an extremely busy chunk of code, and your main javascript code may run right inside this thread along with all of this.
...And 70 more matches

Basic concepts - Web APIs
overview of indexeddb indexeddb lets you store and retrieve objects that are indexed with a "key." all changes that you make to the database happen within transactions.
... indexeddb is an asynchronous api that can be used in most contexts, including web workers.
... it used to include a synchronous version also, for use in web workers, but this was removed from the spec due to lack of interest by the web community.
...And 70 more matches

Detailed XPCOM hashtable guide
this is the long version of xpcom hashtable guide.
... what is a hashtable?
... a hashtable is a data construct that stores a set of items.
...And 68 more matches

Command line crash course - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages.
... objective: to understand what the terminal/command line is, what basic commands you should learn, and how to install new command line tools.
... welcome to the terminal the terminal is a text interface for executing text-based programs.
...And 66 more matches

Package management basics - Learn web development
prerequisites: familiarity with the core html, css, and javascript languages.
... objective: to understand what package managers and package repositories are, why they are needed, and the basics of how to use them.
... a dependency in your project a dependency is a third-party bit of software that was probably written by someone else and ideally solves a single problem for you.
...And 66 more matches

Introduction - JavaScript
« previousnext » this chapter introduces javascript and discusses some of its fundamental concepts.
... what you should already know this guide assumes you have the following basic background: a general understanding of the internet and the world wide web (www).
...if you are new to programming, try one of the tutorials linked on the main page about javascript.
...And 65 more matches

Strict mode - JavaScript
sometimes you'll see the default, non-strict mode referred to as "sloppy mode".
... this isn't an official term, but be aware of it, just in case.
... javascript's strict mode, introduced in ecmascript 5, is a way to opt in to a restricted variant of javascript, thereby implicitly opting-out of "sloppy mode".
...And 64 more matches

Avoiding leaks in JavaScript XPCOM components
quite a lot has happened since this article was written.
...in firefox 3, a cycle collector was introduced and refined in later versions, and mozilla is currently working on a generational garbage collector for js.
... this article needs to be updated to reflect the changes and the cases where they help.
...And 63 more matches

Mozilla release FAQ - Archive of obsolete content
it was last updated in 2005.
...mozilla is a project to continue netscape communicator as an open project.
... the project is maintained by employees of netscape (now a division of aol), red hat, some other companies, as well as contributors from the community.
...And 62 more matches

Plug-in Basics - Plugins
next » how plug-ins are used plug-ins offer a rich variety of features that can increase the flexibility of gecko-based browsers.
... plug-ins like these are now available: multimedia viewers such as adobe flash and adobe acrobat utilities that provide object embedding and compression/decompression services applications that range from personal information managers to games the range of possibilities for using plug-in technology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins.
... with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the browser by consulting the installed plug-ins page.
...And 60 more matches

<input type="password"> - HTML: Hypertext Markup Language
<input> elements of type password provide a way for the user to securely enter a password.
... the element is presented as a one-line plain text editor control in which the text is obscured so that it cannot be read, usually by replacing each character with a symbol such as the asterisk ("*") or a dot ("•").
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...And 60 more matches

Expressions and operators - JavaScript
« previousnext » this chapter describes javascript's expressions and operators, including assignment, comparison, arithmetic, bitwise, logical, string, ternary and more.
... operators javascript has the following types of operators.
... assignment operators comparison operators arithmetic operators bitwise operators logical operators string operators conditional (ternary) operator comma operator unary operators relational operators javascript has both binary and unary operators, and one special ternary operator, the conditional operator.
...And 58 more matches

Cascade and inheritance - Learn web development
overview: building blocks next the aim of this lesson is to develop your understanding of some of the most fundamental concepts of css — the cascade, specificity, and inheritance — which control how css is applied to html and how conflicts are resolved.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the cascade and specificity, and how inheritance works in css.
... conflicting rules css stands for cascading style sheets, and that first word cascading is incredibly important to understand — the way that the cascade behaves is key to understanding css.
...And 57 more matches

Working with objects - JavaScript
« previousnext » javascript is designed on a simple object-based paradigm.
... an object is a collection of properties, and a property is an association between a name (or key) and a value.
... a property's value can be a function, in which case the property is known as a method.
...And 57 more matches

JavaScript Daemons Management - Archive of obsolete content
in computer science a daemon is a task that runs as a background process, rather than being under the direct control of an interactive user.
... in the javascript programming language, daemons are all processes created by javascript timers or by a worker instantiation.
...in different objects (daemons) and then to create a constructor for such a class of objects (daemon) in order to standardize and simplify the instantiation of them.
...And 56 more matches

Adobe Flash - Archive of obsolete content
scriptability refers to the ability of plugins to interact with javascript.
... in particular, the macromedia® flash™ plugin exposes certain plugin functionality for access via javascript.
... it can also access javascript methods from within the plugin.
...And 56 more matches

Functions - JavaScript
« previousnext » functions are one of the fundamental building blocks in javascript.
... a function in javascript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.
... see also the exhaustive reference chapter about javascript functions to get to know the details.
...And 56 more matches

Inheritance and the prototype chain - JavaScript
javascript is a bit confusing for developers experienced in class-based languages (like java or c++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in es2015, but is syntactical sugar, javascript remains prototype-based).
... when it comes to inheritance, javascript only has one construct: objects.
... each object has a private property which holds a link to another object called its prototype.
...And 56 more matches

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
in this guide we will be exploring the three properties that are applied to flex items, which enable us to control the size and flexibility of the items along the main axis — flex-grow, flex-shrink, and flex-basis.
... fully understanding how these properties work with growing and shrinking items is the real key to mastering flexbox.
... a first look our three properties control the following aspects of a flex item's flexibility: flex-grow: how much of the positive free space does this item get?
...And 55 more matches

Places utilities for JavaScript
its not an interface, and as such it will never be frozen, but it provides some easy to use functions that can save you from reinventing the wheel and cluttering up your own classes/functions when you need it.
...these just take in the node, as the interface is already defined: asvisit(anode) asfullvisit(anode) ascontainer(anode) asquery(anode) annotations a few annotation names are defined here.
... load_in_sidebar_anno - this annotation is associated with bookmarks or items that should load in the sidebar automatically.
...And 54 more matches

this - JavaScript
a function's this keyword behaves a little differently in javascript compared to other languages.
... it also has some differences between strict mode and non-strict mode.
... in most cases, the value of this is determined by how a function is called (runtime binding).
...And 54 more matches

JavaScript Object Management - Archive of obsolete content
« previousnext » chrome javascript in this section we'll look into how to handle javascript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.
... the first step to good javascript object management is having a namespace, or a javascript object that contains our code and data, that you know will not conflict with firefox code or other extensions.
...for instance, there are frequently used xpcom services such as the observer service that can be included as members in the namespace: /** * 〈namespace〉 namespace.
...And 52 more matches

JavaScript Client API - Archive of obsolete content
overview this page describes how to use the internal client-side sync javascript api.
... this api is available in mozilla-based products that use sync, such as firefox desktop.
... please note that usage of the sync apis is governed by a terms of service: by accessing or using the firefox sync apis in connection with the development of your own client software to access the firefox sync services (a “third party client”), you acknowledge that you will need to install and use a local version of the firefox sync server for multiple account testing and that any use of mozilla’s hosted firefox sync services is subject to mozilla’s firefox sync terms of service at https://services.mozilla.com/tos/.
...And 52 more matches

Functions - JavaScript
generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function.
...values can be passed to a function, and the function will return a value.
... in javascript, functions are first-class objects, because they can have properties and methods just like any other object.
...And 51 more matches

Classes and Inheritance - Archive of obsolete content
a class is a blueprint from which individual objects are created.
... these individual objects are the instances of the class.
... each class defines one or more members, which are initialized to a given value when the class is instantiated.
...And 49 more matches

passwords - Archive of obsolete content
interact with firefox's password manager to add, retrieve and remove stored credentials.
...typically a credential consists of a username and a password.
... using this module you can: search for credentials which have been stored in the password manager.
...And 49 more matches

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the new design clearly shows what some experts have been saying: that standards-based design can be visually compelling and preserve the interface conventions we've come to expect from web pages.
... the brains and primary driving force behind this compelling new design is douglas bowman, network design manager for terra lycos, who graciously agreed to an interview and in the process shed a lot of light on what goes into a standards-based redesign.
... wired news redesign in a nutshell driven by xhtml 1.0 transitional and css; allows centralized control over layout and appearance for thousands of pages; simple markup allows for rapid changes to templates; average page weight dropped by almost half; page layout accomplished with simple css positioning; vastly increased accessibility without special coding or user agent detection.
...And 49 more matches

Pseudo-classes and pseudo-elements - Learn web development
previous overview: building blocks next the next set of selectors we will look at are referred to as pseudo-classes and pseudo-elements.
...once you know how to use them, you can look at the list to see if there is something which works for the task you are trying to achieve.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the pseudo-class and pseudo-element selectors.
...And 48 more matches

Broadcasters and Observers - Archive of obsolete content
« previousnext » there may be times when you want several elements to respond to events or changes of state easily.
... to do this, we can use broadcasters.
... command attribute forwarding we've already seen that elements such as buttons can be hooked up to commands.
...And 47 more matches

Following the Android Toasts Tutorial from a JNI Perspective
this article is a work in progress and is based on githubgist :: _ff-addon-tutorial-jniandroidtoast.js this article will follow the android developers :: api guides - toasts tutorial.
... toast description a toast provides simple feedback about an operation in a small popup.
...for example, navigating away from an email before you send it triggers a "draft saved" toast to let you know that you can continue editing later.
...And 47 more matches

AsyncTestUtils extended framework
the asynctestutils extended framework is one mechanism for testing the mailnews component of thunderbird.
... boilerplate add the following code to the top of your test file to import everything you need: load("../../mailnews/resources/loghelper.js"); load("../../mailnews/resources/asynctestutils.js"); load("../../mailnews/resources/messagegenerator.js"); load("../../mailnews/resources/messagemodifier.js"); load("../../mailnews/resources/messageinjection.js"); if the directory where you are adding the tests does not have a head_*.js file that has the two following lines, add them at the top of your test file (before the lines shown above): load("../../mailnews/resources/maildirservice.js"); load("../../mailnews/resources/mailtestutils.js"); at the bottom of the test file, add the following: var tests =[ ...
... // list your tests here ]; function run_test() { configure_message_injection({mode: "local"}); async_run_tests(tests); } asynchronous testing basics why do we need it?
...And 47 more matches

Drawing shapes with canvas - Web APIs
« previousnext » now that we have set up our canvas environment, we can get into the details of how to draw on the canvas.
... by the end of this article, you will have learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the basic shapes.
... working with paths is essential when drawing objects onto the canvas and we will see how that can be done.
...And 47 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
css grid layout has been designed to work alongside other parts of css, as part of a complete system for doing the layout.
... grid and flexbox the basic difference between css grid layout and css flexbox layout is that flexbox was designed for layout in one dimension - either a row or a column.
... grid was designed for two-dimensional layout - rows, and columns at the same time.
...And 47 more matches

Value definition syntax - CSS: Cascading Style Sheets
a component can be a keyword, some characters considered as a literal, or a value of a given css data type or of another css property.
...for example: auto, smaller or ease-in.
... the specific case of inherit, initial and unset all css properties accept the keywords inherit, initial and unset, that are defined throughout css.
...And 47 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
but this is increasingly inefficient: browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare.
...you don't get caught in the situation of having to bring out more new site versions as more new browsers and platforms come out, and adjust code as feature support in existing browsers changes.
... there are disadvantages to this approach as well.
...And 47 more matches

Object-oriented JavaScript for beginners - Learn web development
previous overview: objects next with the basics out of the way, we'll now focus on object-oriented javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how javascript emulates object classes via constructor functions, and how to create object instances.
... prerequisites: basic computer literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects).
... objective: to understand the basic theory behind object-oriented programming, how this relates to javascript ("everything is an object"), and how to create constructors and object instances.
...And 46 more matches

Using CSS gradients - CSS: Cascading Style Sheets
gradients can be used anywhere you would use an <image>, such as in backgrounds.
... because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects.
... in addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.
...And 46 more matches

WebAssembly
webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++, c# and rust with a compilation target so that they can run on the web.
... it is also designed to run alongside javascript, allowing both to work together.
... in a nutshell webassembly has huge implications for the web platform — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so.
...And 46 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
we will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product listing using auto-placement.
... as you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout.
... a responsive layout with 1 to 3 fluid columns using grid-template-areas many websites are a variation of this type of layout, with content, sidebars, a header and a footer.
...And 45 more matches

dominant-baseline - SVG: Scalable Vector Graphics
the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents.
... it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context.
... it is used to determine or re-determine a scaled-baseline-table.
...And 45 more matches

RDF Datasource How-To - Archive of obsolete content
this article is at least partially outdated.
...the xpcom registration parts and the "as of this writing, it is not currently possible to implement javascript xpcom components" comment seem outdated didn't check the whole article.
... this document is a cookbook that describes how to create a native, client-side datasource that works with mozilla's rdf implementation.
...And 44 more matches

nsICryptoHash
netwerk/base/public/nsicryptohash.idlscriptable this interface can be used to compute a cryptographic hash function of some data.
... you can, for example, calculate the sha256 hash of a file to determine if it contains the data you think it does.
... the hash algorithms supported are md2, md5, sha-1, sha-256, sha-384, and sha-512.
...And 44 more matches

Indexed collections - JavaScript
this includes arrays and array-like constructs such as array objects and typedarray objects.
... javascript does not have an explicit array data type.
...the array object has methods for manipulating arrays in various ways, such as joining, reversing, and sorting them.
...And 44 more matches

Lexical grammar - JavaScript
this page describes javascript's lexical grammar.
... the source text of ecmascript scripts gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators, comments or white space.
... ecmascript also defines certain keywords and literals and has rules for automatic insertion of semicolons to end statements.
...And 44 more matches

The Firefox codebase: CSS Guidelines
this document contains guidelines defining how css inside the firefox codebase should be written, it is notably relevant for firefox front-end engineers.
... basics here are some basic tips that can optimize reviews if you are changing css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a comment).
...some examples to avoid: absolutely positioned elements hardcoded values such as: vertical-align: -2px; .
...And 43 more matches

JS_InitClass
make a jsclass accessible to javascript code by creating its prototype, constructor, properties, and functions.
... syntax jsobject * js_initclass(jscontext *cx, js::handleobject obj, js::handleobject parent_proto, const jsclass *clasp, jsnative constructor, unsigned nargs, const jspropertyspec *ps, const jsfunctionspec *fs, const jspropertyspec *static_ps, const jsfunctionspec *static_fs); name type description cx jscontext * pointer to a js context from which to derive runtime information.
... obj js::handleobject pointer to the "globals" object to use for initializing the class.
...And 43 more matches

Box-shadow generator - CSS: Cascading Style Sheets
box-shadow generator html content <div id="container"> <div class="group section"> <div id="layer_manager"> <div class="group section"> <div class="button" data-type="add"> </div> <div class="button" data-type="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" ...
...data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div>...
... </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="hue"> <div id="hue_selector"> </div> </div> <div class="info"> <div class="input" data-topic="hue" data-title='h:' data-action="hsv"></div> <div class="input" data-topic="saturation" data-title='s:' data-action="hsv"></div> ...
...And 43 more matches

Regular expressions - JavaScript
in javascript, regular expressions are also objects.
...this chapter describes javascript regular expressions.
... creating a regular expression you construct a regular expression in one of two ways: using a regular expression literal, which consists of a pattern enclosed between slashes, as follows: let re = /ab+c/; regular expression literals provide compilation of the regular expression when the script is loaded.
...And 43 more matches

JavaScript
javascript (js) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.
... while it is most well-known as the scripting language for web pages, many non-browser environments also use it, such as node.js, apache couchdb and adobe acrobat.
... javascript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g.
...And 43 more matches

DeferredTask.jsm
firefox 28 note interface was changed in firefox 28, and old methods were removed.
... the deferredtask.jsm javascript code module offers utility routines for a task that will run after a delay.
... multiple attempts to run the same task before the delay will be coalesced.
...And 42 more matches

Enc Dec MAC Output Public Key as CSR
nss sample code 5: encryption/decryption and mac and output public as a csr.
... generates encryption/mac keys and outputs public key as certificate signing request /* this source code form is subject to the terms of the mozilla public * license, v.
...if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
...And 42 more matches

Introduction to the JavaScript shell
the javascript shell (js) is a command-line program included in the spidermonkey source distribution.
... it is the javascript equivalent of python's interactive prompt, the lisp read-eval-print loop, or ruby's irb.
... this article explains how to use the shell to experiment with javascript code and run javascript programs.
...And 42 more matches

General asynchronous programming concepts - Learn web development
overview: asynchronous next in this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and javascript.
... prerequisites: basic computer literacy, a reasonable understanding of javascript fundamentals.
... objective: to understand the basic concepts behind asynchronous programming, and how they manifest in web browsers and javascript.
...And 41 more matches

Color picker tool - CSS: Cascading Style Sheets
colorpicker tool html <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> <div class="title"> css color </div> </div> </div> <div id="picker" class="block"> <div class="ui-color-picker" data-topic="picker" data-mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" d...
...: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), ...
...kground: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } ...
...And 41 more matches

Using CSS transitions - CSS: Cascading Style Sheets
animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.
... css transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g.
... the web author can define which property has to be animated and in which way.
...And 41 more matches

Introduction to progressive web apps - Progressive web apps (PWAs)
overview: progressive web apps next this article provides an introduction to progressive web apps (pwas), discussing what they are and the advantages they offer over regular web apps.
... pwas are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.
... for example, web apps are more discoverable than native apps; it's a lot easier and faster to visit a website than to install an application, and you can also share web apps by simply sending a link.
...And 41 more matches

Tips for authoring fast-loading HTML pages - Learn web development
these tips are based on common knowledge and experimentation.
...this can be crucial for high volume sites or sites which have a spike in traffic due to unusual circumstances such as breaking news stories.
...it is just as important for broadband content and can lead to dramatic improvements even for your visitors with the fastest connections.
...And 39 more matches

HTML table basics - Learn web development
overview: tables next this article gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
... prerequisites: the basics of html (see introduction to html).
... objective: to gain basic familiarity with html tables.
...And 39 more matches

Basic concepts behind Web Audio API - Web APIs
it won't turn you into a master sound engineer, but it will give you enough background to understand why the web audio api works like it does.
... audio graphs the web audio api involves handling audio operations inside an audio context, and has been designed to allow modular routing.
... basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph.
...And 39 more matches

Control flow and error handling - JavaScript
« previousnext » javascript supports a compact set of statements, specifically control flow statements, that you can use to incorporate a great deal of interactivity in your application.
... the javascript reference contains exhaustive details about the statements in this chapter.
... the semicolon (;) character is used to separate statements in javascript code.
...And 39 more matches

A guide to searching crash reports
please read the documentation about individual crash reports before reading this page.
... the mozilla crash-stats site provides facilities for investigating large numbers of firefox crash reports.
... this guide to searching through crash reports may help you locate the crash reports that will help you find and fix the firefox bug you're working on.
...And 38 more matches

A basic 2D WebGL animation example - Web APIs
in this webgl example, we create a canvas and within it render a rotating square using webgl.
... the coordinate system we use to represent our scene is the same as the canvas's coordinate system.
...its job, as always, is to convert the coordinates we're using for our scene into clipspace coordinates (that is, the system by which (0, 0) is at the center of the context and each axis extends from -1.0 to 1.0 regardless of the actual size of the context).
...And 38 more matches

Mobile first - Progressive web apps (PWAs)
in our planning your app article, we provided a high level look into the kinds of planning and functionality decisions you should make before you start coding an app, including some ideas for desktop and mobile design.
... this article offers some related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default.
... first things first — mobile as a default you may think that concentrating on the mobile experience first sounds pointless, as we are more used to dealing with desktop sites, and we surely need to consider the full gamut of features for the overall experience across desktop, mobile, etc., before then paring it down to a mobile experience that is simpler, more streamlined, or whatever.
...And 38 more matches

The new nsString class implementation (1999) - Archive of obsolete content
if you happen to see dbaron lying around somewhere, please direct him here so he can fix this message.
... this document is intended to briefly describe the new nsstring class architecture, and discuss the implications on memory management, optimizations, internationalization and usage patterns.
... disclaimer: i absolutely hate string classes.
...And 37 more matches

Basic native form controls - Learn web development
prerequisites: basic computer literacy, and a basic understanding of html.
...this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text.
... note: the features discussed in this article are supported in all browsers, which is not the case for all form controls.
...And 37 more matches

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
note: css versions 1 and 2 were a single monolithic specification where all of css was defined in one large document.
... as css became a more feature rich language, maintaining one huge specification became problematic, with different parts of css moving on at different speeds.
... css was therefore modularised, and the various css specifications are different modules that make up css today.
...And 37 more matches

Memory Management - JavaScript
low-level languages like c, have manual memory management primitives such as malloc() and free().
... in contrast, javascript automatically allocates memory when objects are created and frees it when they are not used anymore (garbage collection).
... memory life cycle regardless of the programming language, the memory life cycle is pretty much always the same: allocate the memory you need use the allocated memory (read, write) release the allocated memory when it is not needed anymore the second part is explicit in all languages.
...And 37 more matches

filter - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax /* url to svg filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* multiple filters */ filter: contrast(175%) brightness(3%); /* use no filter */ filter: none; /* global values */ filter: inherit; filter: initial; filter: unset; with a function, use the following: filter: <filter-function> [<filter-function>]* | none for a reference to an svg <filter> element, use the following: filter: url(file.svg#filter-element-id) interpolation if both the beginning and end filters have a function list of the s...
... functions the filter property is specified as none or one or more of the functions listed below.
...And 36 more matches

Closures - JavaScript
in javascript, closures are created every time a function is created, at function creation time.
...note that the displayname() function has no local variables of its own.
... closure consider the following code example: function makefunc() { var name = 'mozilla'; function displayname() { alert(name); } return displayname; } var myfunc = makefunc(); myfunc(); running this code has exactly the same effect as the previous example of the init() function above.
...And 36 more matches

Numbers and dates - JavaScript
« previousnext » this chapter introduces the concepts, objects and functions used to work with and perform calculations using numbers and dates in javascript.
... this includes using numbers written in various bases including decimal, binary, and hexadecimal, as well as the use of the global math object to perform a wide variety of mathematical operations on numbers.
... numbers in javascript, numbers are implemented in double-precision 64-bit binary format ieee 754 (i.e., a number between ±2−1022 and ±2+1023, or about ±10−308 to ±10+308, with a numeric precision of 53 bits).
...And 36 more matches

Regular expression syntax cheatsheet - JavaScript
if you need more information on a specific topic, please follow the link on the corresponding heading to access the full article or head to the guide.
... character classes if you are looking to contribute to this document, please also edit the original article characters meaning .
... has one of the following meanings: matches any single character except line terminators: \n, \r, \u2028 or \u2029.
...And 36 more matches

Promise - JavaScript
the promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
...it allows you to associate handlers with an asynchronous action's eventual success value or failure reason.
... this lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.
...And 36 more matches

eval() - JavaScript
warning: executing javascript from a string is an enormous security risk.
... it is far too easy for a bad actor to run arbitrary code when you use eval().
... the eval() function evaluates javascript code represented as a string.
...And 36 more matches

Writing JavaScript for XHTML - Archive of obsolete content
there are a number of reasons for this.
... partially it is because, prior to version 9, internet explorer was incapable of handling xhtml sent with the official xhtml media type at all.
... (rather than displaying content, it would present the user with a file download dialog.) but it is also founded in the experience that javascript, authored carefully for html, can break when placed with an xml environment.
...And 35 more matches

Creating reftest-based unit tests
if the bitmaps resulting from displaying the two files in an 800x1000 window are identical, the test passes.
...if one has software that multiplies numbers, one wants a regression test to show that 2 * 2 continues to be calculated to be 4, not something similar to but not quite exactly 4.
...if a regression test harness has false failures, it makes the harness not trustworthy and the harness will not be used.
...And 35 more matches

JavaScript-DOM Prototypes in Mozilla
prototype setup on an xpconnect wrapped dom node in mozilla when a dom node is accessed from javascript in mozilla, the native c++ dom node is wrapped using xpconnect and the wrapper is exposed to javascript as the javascript representation of the dom node.
...in the case where the c++ object has class info (nsiclassinfo), the jsobject is a more or less empty jsobject which is not really that special.
... all the methods that are supposed to show up on this jsobject are actually not properties of the object itself, but rather properties of the prototype of the jsobject for the wrapper (unless the c++ object's class info has the flag nsixpcscriptable::dont_share_prototype set, but lets assume that's not the case here).
...And 35 more matches

Variable fonts guide - CSS: Cascading Style Sheets
standard (or static) fonts in the past, a typeface would be produced as a number of individual fonts, and each font would represent one specific width/weight/style combination.
... so you would have separate files for 'roboto regular', 'roboto bold', and 'roboto bold italic' — meaning that you could end up with 20 or 30 different font files to represent a complete typeface (it could be several times that for a large typeface that has different widths as well).
... in such a scenario, in order to use a typeface for typical use on a site for body copy you would need at least four files: regular, italic, bold, and bold italic.
...And 35 more matches

AsyncShutdown.jsm
managing safe shutdown of asynchronous services.
... firefox shutdown is composed of phases that take place sequentially.
... typically, each shutdown phase removes some capabilities from the application.
...And 34 more matches

NSS_3.12_release_notes.html
nss 3.12 release notes 17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
... note: firefox 3 uses nss 3.12, but not the new sqlite-based shareable certificate and key databases.
... distribution information the cvs tag for the nss 3.12 release is nss_3_12_rtm.
...And 34 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
one of the reasons that flexbox quickly caught the interest of web developers is that it brought proper alignment capabilities to the web for the first time.
... it enabled proper vertical alignment, so we can at last easily center a box.
... to center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically.
...And 34 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {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-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell.
...to cause all created rows to be 100 pixels tall for example you would use: * {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; } <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-gap: 10px; grid-auto-rows: 100px; } you can use minmax() in your value for grid-auto-rows enabling the creation of rows that are a minimum size but then grow to fit content if it is taller.
... * {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; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 34 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> ...
... <div class="property"> <div class="name"> axis unit </div> <div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> ...
... <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user...
...And 34 more matches

Using Promises - JavaScript
« previousnext » a promise is an object representing the eventual completion or failure of an asynchronous operation.
... essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.
... imagine a function, createaudiofileasync(), which asynchronously generates a sound file given a configuration record and two callback functions, one called if the audio file is successfully created, and the other called if an error occurs.
...And 34 more matches

CSS basics - Learn web development
previous overview: getting started with the web next css (cascading style sheets) is the code that styles web content.
... css basics walks through what you need to get started.
...using a text editor, paste the three lines of css (above) into a new file.
...And 33 more matches

What went wrong? Troubleshooting JavaScript - Learn web development
never fear — this article aims to save you from tearing your hair out over such problems by providing you with some tips on how to find and fix errors in javascript programs.
... prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is.
...these are usually okay to fix, as long as you are familiar with the right tools and know what the error messages mean!
...And 33 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
layout methods will conform to the specification where possible and implement individual behavior based on their differences (features and constraints).
... while the specification currently specifies alignment details for all layout methods, browsers have not fully implemented all of the specification; however, the css grid layout method has been widely adopted.
...if you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis.
...And 33 more matches

New in JavaScript - Archive of obsolete content
this chapter contains information about javascript's version history and implementation status for mozilla/spidermonkey-based javascript applications, such as firefox.
... ecmascript versions language resources learn more about the ecmascript standards on which the javascript language is based on.
... ecmascript 5 support implementation status for the current standard ecma-262 edition 5.1 in mozilla-based engines and products.
...And 32 more matches

Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
xhtml™ 1.0 the extensible hypertext markup language (second edition) defines xhtml to be a reformulation of html 4 as an xml 1.0 application.
... if you're writing xhtml (as opposed to regular html) you should understand the fundamental differences between html 4 and xhtml.
... when an xhtml page is served with mime type text/html it is treated by all browsers as if it were nothing more than html.
...And 32 more matches

Building up a basic demo with Three.js - Game development
three.js, as with any other 3d library, provides built-in helper functions to help you implement common 3d functionality more quickly.
... in this article we'll take you through the real basics of using three, including setting up a development environment, structuring the necessary html, the fundamental objects of three, and how to build up a basic demo.
... note: we chose three because it is one of the most popular webgl libraries, and it is easy to get started with.
...And 32 more matches

Understanding client-side JavaScript frameworks - Learn web development
javascript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications.
... many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.
... as an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.
...And 32 more matches

PerfMeasurement.jsm
the perfmeasurement.jsm javascript code module lets you take detailed performance measurements of your code.
... note: the perfmeasurement.jsm javascript code module can only be used from chrome -- that is, from within the application itself or an add-on.
... before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") see measuring performance using the perfmeasurement.jsm code module for details on how to use this api.
...And 32 more matches

JSClass
a jsclass describes a class of javascript objects.
... a c/c++ program can use a jsclass with the js_initclass and js_newobject apis to create objects that have custom methods and properties implemented in c/c++.
... syntax struct jsclass { const char *name; uint32_t flags; /* optional since spidermonkey 37 */ jspropertyop addproperty; jsdeletepropertyop delproperty; jspropertyop getproperty; jsstrictpropertyop setproperty; jsenumerateop enumerate; jsresolveop resolve; jsconvertop convert; /* obsolete since spidermonkey 44 */ /* optional since spidermonkey 25 */ jsfinalizeop finalize; /* optional */ jsclassinternal reserved0; /* obsolete since spidermonkey 13 */ jscheckaccessop checkaccess; /* obsolete since spidermonkey 29 */ jsnative call; jshasinstanceop hasinstance; jsnative construct; jsxdrobjectop xdrobj...
...And 32 more matches

background-size - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... using a width value only, in which case the height defaults to auto.
... using both a width and a height value, in which case the first sets the width and the second sets the height.
...And 32 more matches

position - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... syntax the position property is specified as a single keyword chosen from the list of values below.
... relative the element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.
...And 32 more matches

Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
... here we define an <audio> element with multiple sources — we do this as not all browsers support the same audio formats.
... to ensure reasonable coverage, we should specify at least two different formats.
...And 32 more matches

Video player styling basics - Developer guides
preliminary modifications from the original example this section summarises the modifications that were made to the original video player example to make the styling task easier, before the bulk of the work was started.
... the markup for the custom controls now looks as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> ...
...this has now been changed to use a data-state attribute, which this code already uses to handle its fullscreen implementation.
...And 32 more matches

Namespaces crash course - SVG: Scalable Vector Graphics
as an xml dialect, svg is namespaced.
...versions of svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
... background it has been a long standing goal of the w3c to make it possible for different types of xml based content to be mixed together in the same xml file.
...And 32 more matches

Handling text — strings in JavaScript - Learn web development
in this article, we'll look at all the common things that you really ought to know about strings when learning javascript, such as creating strings, escaping quotes in strings, and joining strings together.
... prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is.
... objective: to gain familiarity with the basics of strings in javascript.
...And 31 more matches

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
given the flexibility of svg images, there's a lot to keep in mind when using them as background images with the background-image property, and even more to keep in mind when also scaling them using the background-size property.
...there are some edge cases that aren't covered by these rules, but this covers the majority of cases.
... if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio.
...And 31 more matches

Specificity - CSS: Cascading Style Sheets
specificity is based on the matching rules which are composed of different sorts of css selectors.
...when multiple declarations have equal specificity, the last declaration found in the css is applied to the element.
...as per css rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
...And 31 more matches

<color> - CSS: Cascading Style Sheets
a <color> can be defined in any of the following ways: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail.
... color keywords color keywords are case-insensitive identifiers that represent a specific color, such as red, blue, black, or lightseagreen.
... there are a few caveats to consider when using color keywords: html only recognizes the 16 basic color keywords found in css1, using a specific algorithm to convert unrecognized values (often to completely different colors).
...And 31 more matches

Array - JavaScript
the javascript array class is a global object that is used in the construction of arrays; which are high-level, list-like objects.
... description arrays are list-like objects whose prototype has methods to perform traversal and mutation operations.
... neither the length of a javascript array nor the types of its elements are fixed.
...And 31 more matches

HTML basics - Learn web development
as the title suggests, this article will give you a basic understanding of html and its functions.
... the main parts of our element are as follows: the opening tag: this consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets.
... this states where the element begins or starts to take effect — in this case where the paragraph begins.
...And 30 more matches

Ember interactivity: Events, classes and state - Learn web development
previous overview: client-side javascript frameworks next at this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items.
... along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app.
... prerequisites: at minimum, it is recommended that you are familiar with the core html, css, and javascript languages, and have knowledge of the terminal/command line.
...And 30 more matches

NSS 3.35 release notes
introduction the nss team has released network security services (nss) 3.35, which is a minor release.
... nss 3.35 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_35_rtm/src/ new in nss 3.35 new functionality tls 1.3 support has been updated to draft -23.
... please use the equivalent ssl_sig_rsa_pss_rsae_sha* for rsaencryption keys, or ssl_sig_rsa_pss_pss_sha* for pss keys.
...And 30 more matches

BaseAudioContext - Web APIs
the baseaudiocontext interface of the web audio api acts as a base definition for online and offline audio-processing graphs, as represented by audiocontext and offlineaudiocontext respectively.
... you wouldn't use baseaudiocontext directly — you'd use its features via one of these two inheriting interfaces.
... a baseaudiocontext can be a target of events, therefore it implements the eventtarget interface.
...And 30 more matches

OpenType font features guide - CSS: Cascading Style Sheets
these are all referred to as opentype features, and are made available to use on the web via specific properties and a low-level control property — font-feature-settings.
... in addition to broad feature sets like ligatures or lining figures (numerals that line up evenly as opposed to 'oldstyle', which look more like lower-case letters), there are also very specific ones such as stylistic sets (which might include several specific variants of glyphs meant to be used together), alternates (which might be one or more variants of the letter 'a'), or even language-specific alterations for east asian languages.
... in the latter case, these alterations are actually necessary to properly express the language, so they go beyond the more stylistic preference of most other opentype features.
...And 30 more matches