Search completed in 1.41 seconds.
Patterns - SVG: Scalable Vector Graphics
« previousnext »
patterns
patterns are arguably one of the more confusing fill types to use in svg.
...like gradients, the <
pattern> element should be put in the <defs> section of your svg file.
...width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </lineargradient> <
pattern id="
pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#gradient1)" fill-opacity="0.5"/> </
pattern> </defs> <rect fill="url(#
pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive sample ins...
...And 23 more matches
HTML attribute: pattern - HTML: Hypertext Markup Language
the
pattern attribute specifies a regular expression the form control's value should match.
... if a non-null value doesn't conform to the constraints set by the
pattern value, the validitystate object's read-only
patternmismatch property will be true.
... the
pattern attribute is an attribute of the text, tel, email, url, password, and search input types.
...And 20 more matches
util/match-pattern - Archive of obsolete content
test strings containing urls against simple
patterns.
... usage specifying
patterns there are three ways you can specify
patterns: as an exact match string using a wildcard in a string using a regular expression exact matches a url matches only that url.
... example
pattern example matching urls example non-matching urls "http://example.com/" http://example.com/ http://example.com http://example.com/foo https://example.com/ http://foo.example.com/ wildcards a single asterisk matches any url with an http, https, or ftp scheme.
...And 14 more matches
<pattern> - SVG: Scalable Vector Graphics
the <
pattern> element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.
... the <
pattern> is referenced by the fill and/or stroke attributes on other graphics elements to fill or stroke those elements with the referenced
pattern.
... html,body,svg { height:100% } <svg viewbox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> <defs> <
pattern id="star" viewbox="0,0,10,10" width="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </
pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the
pattern tile.
...And 12 more matches
CanvasRenderingContext2D.createPattern() - Web APIs
the canvasrenderingcontext2d.create
pattern() method of the canvas 2d api creates a
pattern using the specified image and repetition.
... this method returns a canvas
pattern.
...the
pattern it creates must be assigned to the canvasrenderingcontext2d.fillstyle or canvasrenderingcontext2d.strokestyle properties, after which it is applied to any subsequent drawing.
...And 9 more matches
SVGPatternElement - Web APIs
the svg
patternelement interface corresponds to the <
pattern> element.
...onaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svg
patternelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svg
patternelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this inte...
... svg
patternelement.
patternunits read only an svganimatedenumeration corresponding to the
patternunits attribute of the given <
pattern> element.
...And 8 more matches
ValidityState.patternMismatch - Web APIs
the read-only
patternmismatch property of a validitystate object indicates if the value of an <input>, after having been edited by the user, does not conform to the constraints set by the element's
pattern attribute.
... if the field supports the
pattern attribute -- which means the <input> is of type text, tel, email, url, password, or search -- and the
pattern value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the
pattern value, the
patternmismatch property will be true.
... examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel"
pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel"
pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel"
pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the
pattern attribute set on each.
...And 7 more matches
patternContentUnits - SVG: Scalable Vector Graphics
the
patterncontentunits attribute indicates which coordinate system to use for the contents of the <
pattern> element.
... note: that this attribute has no effect if attribute viewbox is specified on the <
pattern> element.
... only one element is using this attribute: <
pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- a
pattern tile that content coordinates and values are computed against the current coordinate user space.
...And 7 more matches
CanvasPattern.setTransform() - Web APIs
the canvas
pattern.settransform() method uses an svgmatrix or dommatrix object as the
pattern's transformation matrix and invokes it on the
pattern.
... syntax void
pattern.settransform(matrix); parameters matrix an svgmatrix or dommatrix to use as the
pattern's transformation matrix.
... examples using the settransform method this is just a simple code snippet which uses the settransform method to create a canvas
pattern with the specified
pattern transformation from an svgmatrix.
...And 4 more matches
Accessibility and Spacial Patterns - Accessibility
stripes and
patterns are typical of the kinds of images that create problems, and stripes have been studied most closely.
... in 2005, arnold wilkins, john emmett, and graham harding evaluated the guidelines for characterizing
patterned images that could precipitate seizures.
...which they published in the paper, characterizing the
patterned images that precipitate seizures and optimizing guidelines to prevent them the steps necessary to evaluate material reduce to the following: look at the screen are there more than five stripes?
...And 3 more matches
patternUnits - SVG: Scalable Vector Graphics
the
patternunits attribute indicates which coordinate system to use for the geometry properties of the <
pattern> element.
... only one element is using this attribute: <
pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are relative to the current user space --> <
pattern id="p1" x="12.5" y="12.5" width="25" height="25"
patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </
pattern> <!-- all geometry properties are relative to the target bounding box --> <
pattern id="p2" x=".125" y=".125" width=".25" height=".25"
patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </
pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" ...
...width="80" height="80" fill="url(#p2)" /> </svg>
pattern for <
pattern>,
patternunits defines the coordinate system in use for the geometry properties (x, y, width and height) of the element.
...And 3 more matches
Responsive Navigation Patterns - Progressive web apps (PWAs)
these
patterns are a great place to start.
... note: html/css for the corresponding
patterns will be available soon.
...
pattern 1: top toggle menu in this
pattern, as the screen width is reduced, the top navigation items rearrange until there is not enough space.
...And 2 more matches
patternTransform - SVG: Scalable Vector Graphics
the
patterntransform attribute defines a list of transform definitions that are applied to a
pattern tile.
... only one element is using this attribute: <
pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <
pattern id="p1" width=".25" height=".25"
patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </
pattern> <!-- apply the transformed
pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg>
pattern for <
pattern>,
patterntransform defines a list of transform definitions that are applied to a
pattern tile.
...for backward compatibility reason, it is highly suggested to keep using the
patterntransform attribute.
...And 2 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
however, despite that flexibility in transport and communication of signaling messages, there's still a recommended design
pattern you should follow when possible, known as perfect negotiation.
...the perfect negotiation
pattern is an example of the ways in which negotiation have improved since the early days of webrtc.
...negotiation is an inherently asymmetric operation: one side needs to serve as the "caller" while the other peer is the "callee." the perfect negotiation
pattern smooths this difference away by separating that difference out into independent negotiation logic, so that your application doesn't need to care which end of the connection it is.
... implementing perfect negotiation let's take a look at an example that implements the perfect negotiation
pattern.
CanvasPattern - Web APIs
the canvas
pattern interface represents an opaque object describing a
pattern, based on an image, a canvas, or a video, created by the canvasrenderingcontext2d.create
pattern() method.
... canvas
pattern.settransform() applies an svgmatrix or dommatrix representing a linear transform to the
pattern.
... specifications specification status comment html living standardthe definition of 'canvas
pattern' in that specification.
Parser API
functions interface function <: node { id: identifier | null; params: [
pattern ]; defaults: [ expression ]; rest: identifier | null; body: blockstatement | expression; generator: boolean; expression: boolean; } a function declaration or expression.
... interface functiondeclaration <: function, declaration { type: "functiondeclaration"; id: identifier; params: [
pattern ]; defaults: [ expression ]; rest: identifier | null; body: blockstatement | expression; generator: boolean; expression: boolean; } a function declaration.
... interface variabledeclarator <: node { type: "variabledeclarator"; id:
pattern; init: expression | null; } a variable declarator.
...And 26 more matches
<input type="url"> - HTML: Hypertext Markup Language
value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength,
pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange().
...heir type, url inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid
pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck contr...
...
pattern the
pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
...And 17 more matches
<input type="email"> - HTML: Hypertext Markup Language
value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,
pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax.
... list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid multiple whether or not to allow multiple, comma-separated, e-mail addresses to be entered
pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be list the values of t...
...
pattern the
pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
...And 16 more matches
Regular expressions - JavaScript
« previousnext » regular expressions are
patterns used to match character combinations in strings.
...these
patterns are used with the exec() and test() methods of regexp, and with the match(), matchall(), replace(), replaceall(), search(), and split() methods of string.
... 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 16 more matches
Applying styles and colors - Web APIs
you will learn how to add different colors, line styles, gradients,
patterns and shadows to your drawings.
... color is a string representing a css <color>, a gradient object, or a
pattern object.
... we'll look at gradient and
pattern objects later.
...And 15 more matches
<input type="tel"> - HTML: Hypertext Markup Language
value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength,
pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string ("").
..., telephone number inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum length, in utf-16 characters, to accept as a valid input minlength the minimum length that is considered valid for the field's contents
pattern a regular expression the entered value must match to pass constraint validation placeholder an example value to display inside the field when it has no value readonly a boolean attribute which, if present, indicates that the field's contents should not be user-editable size the number of characters wide the input field should be onscreen list the val...
...
pattern the
pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
...And 15 more matches
Client-side form validation - Learn web development
pattern: specifies a regular expression that defines a
pattern the entered data needs to follow.
... note: there are several errors that will prevent the form from being submitted, including a badinput,
patternmismatch, rangeoverflow or rangeunderflow, stepmismatch, toolong or tooshort, typemismatch, valuemissing, or a customerror.
... validating against a regular expression another useful validation feature is the
pattern attribute, which expects a regular expression as its value.
...And 14 more matches
Index - Web APIs
540 canvas
pattern api, canvas, interface, reference the canvas
pattern interface represents an opaque object describing a
pattern, based on an image, a canvas, or a video, created by the canvasrenderingcontext2d.create
pattern() method.
... 541 canvas
pattern.settransform() api, canvas, canvas
pattern, experimental, method, reference the canvas
pattern.settransform() method uses an svgmatrix object as the
pattern's transformation matrix and invokes it on the
pattern.
... 555 canvasrenderingcontext2d.create
pattern() api, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.create
pattern() method of the canvas 2d api creates a
pattern using the specified image and repetition.
...And 13 more matches
page-mod - Archive of obsolete content
run scripts in the context of web pages whose url matches a given
pattern.
... a
pattern that a page's url must match, in order for the script(s) to be attached to that page.
... for example, the following add-on retrieves the html content of specific tags from documents that match the
pattern.
...And 12 more matches
<input type="password"> - HTML: Hypertext Markup Language
value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength,
pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password.
... if the
pattern attribute is specified, the content of a password control is only considered valid if the value passes validation; see validation for more information.
... additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, password field inputs support the following attributes: attribute description maxlength the maximum length the value may be, in utf-16 characters minlength the minimum length in characters that will be considered valid
pattern a regular expression the value must match in order to be valid placeholder an example value to display in the field when the field is empty readonly a boolean attribute which, if present, indicates that the field's contents should not be editable size the number of characters wide the input field should be maxlength the maximum number of characters (...
...And 11 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
pattern password, text, tel
pattern the value must match to be valid placeholder password, search, tel, text, url text that appears in the form control when it has no value set readonly almost all boolean.
...
pattern the
pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
... it must be a valid javascript regular expression, as used by the regexp type, and as documented in our guide on regular expressions; the 'u' flag is specified when compiling the regular expression, so that the
pattern is treated as a sequence of unicode code points, instead of as ascii.
...And 11 more matches
SVG documentation index - SVG: Scalable Vector Graphics
for shapes and text it's a presentation attribute that defines the color (or any svg paint servers like gradients or
patterns) used to paint the element; for animation it defines the final state of the animation.
... 72 fill-opacity svg, svg attribute the fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient,
pattern, etc) applied to a shape.
... 159
patterncontentunits svg, svg attribute the
patterncontentunits attribute indicates which coordinate system to use for the contents of the <
pattern> element.
...And 10 more matches
<input type="search"> - HTML: Hypertext Markup Language
events change and input supported common attributes autocomplete, list, maxlength, minlength,
pattern, placeholder, required, size.
..., search field inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid
pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck contr...
...
pattern the
pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
...And 8 more matches
Client-Server Overview - Learn web development
both static and dynamic websites (discussed in the following sections) use exactly the same communication protocol/
patterns.
.../best?team=my_team_name&show=11) or as part of the url
pattern (e.g.
... the web server detects that the request is "dynamic" and forwards it to the web application for processing (the web server determines how to handle different urls based on
pattern matching rules defined in its configuration).
...And 7 more matches
Web accessibility for seizures and physical reactions - Accessibility
certain visual
patterns, especially stripes, can also cause physical reactions even though they are not animated.
...
patterns and images can also trigger epilepsy.
...disorders is documented in such articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and
patterns.
...And 7 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
navigation a common
pattern for navigation is to have a list of items displayed as a horizontal bar.
... this
pattern, as basic as it seems, was difficult to achieve before flexbox.
... space distributed within the items a different
pattern for navigation would be to distribute the available space within the items themselves, rather than create space between them.
...And 7 more matches
<input type="text"> - HTML: Hypertext Markup Language
events change and input supported common attributes autocomplete, list, maxlength, minlength,
pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange().
...eir type, text inputs support the following attributes: attribute description list the id of the <datalist> element that contains the optional pre-defined autocomplete options maxlength the maximum number of characters the input should accept minlength the minimum number of characters long the input can be and still be considered valid
pattern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck contr...
...
pattern the
pattern attribute, when specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
...And 7 more matches
String.prototype.replace() - JavaScript
the replace() method returns a new string with some or all matches of a
pattern replaced by a replacement.
... the
pattern can be a string or a regexp, and the replacement can be a string or a function to be called for each match.
... if
pattern is a string, only the first occurrence will be replaced.
...And 7 more matches
nsIZipReader
method overview void close(); void extract(in autf8string zipentry, in nsifile outfile); void extract(in string zipentry, in nsifile outfile); obsolete since gecko 10 nsiutf8stringenumerator findentries(in autf8string a
pattern); nsiutf8stringenumerator findentries(in string a
pattern); obsolete since gecko 10 nsiprincipal getcertificateprincipal(in autf8string aentryname); nsiprincipal getcertificateprincipal(in string aentryname); obsolete since gecko 10 nsizipentry getentry(in autf8string zipentry); nsizipentry getentry(in string zipentry); obsolete since gecko 10 nsiinputst...
... nsiutf8stringenumerator findentries( in autf8string a
pattern ); parameters a
pattern a regular expression used to find matching entries in the zip file.
... pat~pat2 returns matches to the
pattern 'pat' which do not also match the
pattern 'pat2'.
...And 6 more matches
Index - Archive of obsolete content
49 page-mod add-on sdk run scripts in the context of web pages whose url matches a given
pattern.
... 128 util/match-
pattern test strings containing urls against simple
patterns.
...this document is a guide to common code
patterns that may need to change to work with frozen linkage.
...And 5 more matches
WebRequest.jsm
name type description urls match
pattern only invoke the listener for urls that match one of the
patterns.
... to specify match
patterns, first import the "match
pattern.jsm" module, then construct a match
pattern.
... the match
pattern constructor accepts: either: a string defining a single
pattern or: an array of such strings cu.import("resource://gre/modules/match
pattern.jsm"); let
pattern = new match
pattern("https:/developer.mozilla.org/*"); cu.import("resource://gre/modules/match
pattern.jsm"); let
pattern = new match
pattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://developer.cdn.mozilla.net/*"]); see the match
patterns article for details on the syntax of the strings you supply.
...And 5 more matches
Overview of events and handlers - Developer guides
this overview of events and event handling explains the code design
pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.
... the event design
pattern the event system, at its core, is simply a programming design
pattern.
... the
pattern starts with an agreement over a kind of event and: the name string used for the event, the type of the data structure used to represent the key properties of that event, and the javascript object which will 'emit' that event.
...And 5 more matches
Proxy Auto-Configuration (PAC) file - HTTP
examples: isresolvable("www.mozilla.org") // true isinnet() syntax isinnet(host,
pattern, mask) parameters host a dns hostname, or ip address.
...
pattern an ip address
pattern in the dot-separated format.
... mask mask for the ip address
pattern informing which parts of the ip address should be matched against.
...And 5 more matches
context-menu - Archive of obsolete content
urlcontext(match
pattern) this context occurs when the menu is invoked on pages with particular urls.
... match
pattern is a match
pattern string or an array of match
pattern strings.
... when match
pattern is an array, the context occurs when the menu is invoked on a page whose url matches any of the
patterns.
...And 4 more matches
Mozilla internal string guide
you can see both of these uses in common
patterns, below.
... cache-friendly means that the zero terminator for c compatibility is written after the new content of the string has been written, so the result is a forward-only linear write access
pattern instead of a non-linear back-and-forth sequence resulting from using setlength() followed by beginwriting().
...the syntax is: prbool findinreadable(const nsastring&
pattern, nsastring::const_iterator start, nsastring::const_iterator end, nsstringcomparator& acomparator = nsdefaultstringcomparator()); to use this, start and end should point to the beginning and end of a string that you would like to search.
...And 4 more matches
String.prototype.replaceAll() - JavaScript
the replaceall() method returns a new string with all matches of a
pattern replaced by a replacement.
... the
pattern can be a string or a regexp, and the replacement can be a string or a function to be called for each match.
... parameters regexp (
pattern) a regexp object or literal with the global flag.
...And 4 more matches
Organizing your CSS - Learn web development
the standard example of oocss is the
pattern described as the media object.
... this is a
pattern with a fixed size image, video or other element on one side, and flexible content on the other.
... it's a
pattern we see all over websites for comments, listings, and so on.
...And 3 more matches
Server-side web frameworks - Learn web development
handling these all in one function would be hard to maintain, so web frameworks provide simple mechanisms to map url
patterns to specific handler functions.
... @app.route("/") def hello(): return "hello world!" while django expects developers to define a list of url mappings between a url
pattern and a view function.
... url
patterns = [ url(r'^$', views.index), # example: /best/myteamname/5/ url(r'^best/(?p<team_name>\w.+?)/(?p<team_number>[0-9]+)/$', views.best), ] make it easy to access data in the request data can be encoded in an http request in a number of ways.
...And 3 more matches
Componentizing our Svelte app - Learn web development
sharing data between components: props-down, events-up
pattern the bind directive is pretty straightforward and allows you to share data between a parent and child component with minimal fuss.
...a different approach is the "props-down, events-up" communication
pattern.
... basically, this
pattern relies on child components receiving data from their parents via props and parent components updating their state by handling events emitted from child components.
...And 3 more matches
Limitations of chrome scripts
this page describes
patterns that used to work in the chrome process that will no longer work in multiprocess firefox.
... compatibility shims for many of the
patterns described here we've implemented compatibility shims so the
patterns still work.
... the rest of this page documents
patterns that don't work in multiprocess firefox as well as how are shims try to paper over the problem.
...And 3 more matches
An Overview of XPCOM
clients of this code can then use a factory design
pattern to create the object (see factories) and further encapsulate the implementation.
... factories once code is broken up into components, client code typically uses the new operator to instantiate objects for use: someclass* component = new someclass(); this
pattern requires that the client knows something about the component, however-how big it is at the very least.
... the factory design
pattern can be used to encapsulate object construction.
...And 3 more matches
RegExp.prototype[@@replace]() - JavaScript
the [@@replace]() method replaces some or all matches of a this
pattern in a string by a replacement, and returns the result of the replacement as a new string.
...a number of special replacement
patterns are supported; see the specifying a string as a parameter section in string.prototype.replace() page.
... return value a new string with some or all matches of a
pattern replaced by a replacement.
...And 3 more matches
RegExp() constructor - JavaScript
the regexp constructor creates a regular expression object for matching text with a
pattern.
... syntax literal, constructor, and factory notations are possible: /
pattern/flags new regexp(
pattern[, flags]) regexp(
pattern[, flags]) parameters
pattern the text of the regular expression.
...
patterns may include special characters to match a wider range of values than would a literal string.
...And 3 more matches
RegExp - JavaScript
the regexp object is used for matching text with a
pattern.
...use the constructor function when you know the regular expression
pattern will be changing, or you don't know the
pattern and obtain it from another source, such as user input.
... regexp.prototype.source the text of the
pattern.
...And 3 more matches
Modifying Web Pages Based on URL - Archive of obsolete content
to modify any pages that match a particular
pattern (for example, "http://example.org/") as they are loaded, use page-mod module.
... one or more
patterns to match urls for the pages you want to modify.
... a simple code snippet where content script is supplied as contentscript option and url
pattern is given as include option is as follows: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscript: 'document.body.innerhtml = ' + ' "<h1>page matches ruleset</h1>";' }); do as follows: create a new directory and navigate to it.
...And 2 more matches
Venkman Introduction - Archive of obsolete content
the break command takes a file
pattern and line number.
... any loaded file which matches the file
pattern, and contains an executable line at the requested line number will have a breakpoint set.
... if no loaded files match the file
pattern or line number, an error message is printed to the console and the command fails.
...And 2 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
217 iife codingscripting, design
pattern, functions, glossary, javascript an iife (immediately invoked function expression) is a javascript function that runs as soon as it is defined.
... 249 lazy load glossary, lazy loading, reference, web performance lazy loading is a strategy that delays the loading of some assets (e.g., images) until they are needed by the user based on the user's activity and navigation
pattern; typically, these assets are only loaded when they are scrolled into view.
... 259 mvc glossary, infrastructure, intro, mvc, model view controller mvc (model-view-controller) is a
pattern in software design commonly used to implement user interfaces, data, and controlling logic.
...And 2 more matches
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
mvc (model-view-controller) is a
pattern in software design commonly used to implement user interfaces, data, and controlling logic.
...some other design
patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-presenter), and mvw (model-view-whatever).
... the three parts of the mvc software-design
pattern can be described as follows: model: manages data and business logic.
...And 2 more matches
Third-party APIs - Learn web development
note: some apis handle access to their functionality slightly differently, requiring the developer to make an http request to a specific url
pattern to retrieve data.
... other apis may require that you include the key in a slightly different way, but the
pattern is relatively similar for most of them.
...this is a common
pattern you'll encounter with apis.
...And 2 more matches
Creating JavaScript callbacks in components
callback
patterns in idl xpcom components use idl to create interfaces.
...a common
pattern used with interfaces to create a bi-directional communication between two groups of code is the observer (or listener)
pattern.
...here is a very simple example of the observer
pattern: [scriptable, uuid(...)] interface stringparserobserver { void onword(string word); }; [scriptable, uuid(...)] interface stringparser { void parse(string data); void addobserver(stringparserobserver observer); }; in this example, the stringparser will call the stringparserobserver.onword method whenever it finishes parsing a word found in the raw string data.
...And 2 more matches
Reference Manual
the
patterns presented throughout this section will help you get the most out of nscomptr.
... private: nscomptr<nsifoo> mfooptr; }; bar::bar( nsifoo* initial_fooptr ) : mfooptr(initial_fooptr) // initialize it _here_ { // not here } additionally, there is an optimization
pattern using a temporary that converts assignment form to construction form.
... nsifoo* temp; nsresult rv=getfoo(&temp); nscomptr<nsifoo> foo=dont_addref(temp); // remember this `raw-pointer, call // getter, assign |dont_addref|' //
pattern.
...And 2 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.
... it uses an array of values that specify alternating lengths of lines and gaps which describe the
pattern.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common
patterns this example illustrates a variety of common line dash
patterns.
...And 2 more matches
CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.getlinedash() returns the current line dash
pattern array containing an even number of non-negative numbers.
... canvasrenderingcontext2d.setlinedash() sets the current line dash
pattern.
... gradients and
patterns canvasrenderingcontext2d.createlineargradient() creates a linear gradient along the line given by the coordinates represented by the parameters.
...And 2 more matches
Cookbook template - CSS: Cascading Style Sheets
description of the problem this recipe solves or the
pattern you are demonstrating.
... requirements what does this
pattern need to include, or what problems does it need to solve?
... download the example choices made explain your decisions when creating the
pattern.
...And 2 more matches
Recipe: Media objects - CSS: Cascading Style Sheets
the media object is a
pattern we see all over the web.
... requirements media object
pattern needs some or all of the following characteristics: stacked on mobile, two columns on desktop.
... by using grid-template-areas to achieve the layout, i can see the
pattern in the css.
...And 2 more matches
Web video codec guide - Web media technologies
some have trouble with specific kinds of shapes and
patterns, or aren't good at replicating sharp edges, or tend to lose detail in dark areas, or any number of possibilities.
...there are many forms of aliasing; the most common ones you may see include: moiré
patterns a unknown prefix: moiré
pattern.
... is a large-scale spatial interference
pattern produced when a
pattern in the source image and the manner in which the encoder operates are slightly out of alignment spatially.
...And 2 more matches
height - SVG: Scalable Vector Graphics
twenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <
pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length ...
... value <length> | <percentage> default value 120% animatable yes
pattern for <
pattern>, height defines the vertical length of the tile
pattern.
... the exact effect of this attribute is influenced by the
patternunits and
patterntransform attributes.
...And 2 more matches
href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <
pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable no
pattern for <
pattern>, href defines a url referring to a different <
pattern> element within the current svg document.
...on the <
pattern> element, the href attribute is animatable.
...And 2 more matches
width - SVG: Scalable Vector Graphics
twenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <
pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length ...
... value <length> | <percentage> default value 120% animatable yes
pattern for <
pattern>, width defines the horizontal length of the tile
pattern.
... the exact effect of this attribute is influenced by the
patternunits and
patterntransform attributes.
...And 2 more matches
x - SVG: Scalable Vector Graphics
rmatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <
pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value <length> | <percentage> default value -10% animatable yes
pattern for <
pattern>, x defines the x coordinate of the uper left corner of the tile
pattern.
... the exact effect of this attribute is influenced by the
patternunits and
patterntransform attributes.
...And 2 more matches
y - SVG: Scalable Vector Graphics
rmatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <
pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value <length> | <percentage> default value -10% animatable yes
pattern for <
pattern>, y defines the y coordinate of the uper left corner of the tile
pattern.
... the exact effect of this attribute is influenced by the
patternunits and
patterntransform attributes.
...And 2 more matches
page-worker - Archive of obsolete content
a match
pattern string or an array of match
pattern strings.
...at least one match
pattern must be supplied.
... see the match-
pattern module for a detailed description of match
pattern syntax.
... include a set of match
patterns to define the urls which the page-worker's content script will be applied.
The new nsString class implementation (1999) - Archive of obsolete content
this document is intended to briefly describe the new nsstring class architecture, and discuss the implications on memory management, optimizations, internationalization and usage
patterns.
...usage
patterns how to use these classes to increase the portability, thread and process safety of gecko, i suggest the following rules regarding the use of each of our string class derivatives: <center> string class</center> <center> where to use</center> nsstrimpl use to pass strings between modules who have linked the nsstrimpl function library.
...our nsstrimpl uses an allocator
pattern so that programmers can install their own policy, but this may also make allocation simpler in a multiprocess environment.
...to wit: they want to ensure that the underlying buffers cannot be corrupted or altered erroneously they want to ensure that the appropriate set of conversion functions get applied they want some control over the usage
pattern of strings, such that the 2-byte (ucs2) form is used whenever possible, and some restrictions are applied to the use of 1-byte (ascii) nscstrings.
Index
this document attempts to help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript
patterns that cause leaks.
... 120 xpcom array guide guide, needscontent, needsmarkupwork, xpcom mozilla has many array classes because each array is optimized for a particular usage
pattern.
... 797 nsinavhistoryresult developing mozilla, extensions, interfaces, places, xpcom, xpcom api reference places results use a model-view-controller (mvc) design
pattern.
...more specifically, the nsinavhistoryresultviewer interface provides the view component of the
pattern, and nsinavhistoryresultviewobserver is the controller.
HTMLInputElement - Web APIs
(if you set this to a negative number, an exception will be thrown.)
pattern string: returns / sets the element's
pattern attribute, containing a regular expression that the control's value is checked against.
... use the title attribute to describe the
pattern to help the user.
... reportvalidity() runs the checkvalidity() method, and if it returns false (for an invalid input or no
pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.
... the following properties have been added: autocomplete, autofocus, dirname, files, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, labels, list, max, min, multiple,
pattern, placeholder, required, selectiondirection, selectionend, selectionstart, step, validationmessage, validity, valueasdate, valueasnumber, width, and willvalidate.
Navigator.vibrate() - Web APIs
if a vibration
pattern is already in progress when this method is called, the previous
pattern is halted and the new one begins instead.
...if the
pattern leads to a too long vibration, it is truncated: the max length depends on the implementation.
... syntax var successbool = window.navigator.vibrate(
pattern);
pattern provides a
pattern of vibration and pause intervals.
... passing a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration
pattern.
Vibration API - Web APIs
describing vibrations vibration is described as a
pattern of on-off pulses, which may be of varying lengths.
... the
pattern may consist of either a single integer, describing the number of milliseconds to vibrate, or an array of integers describing a
pattern of vibrations and pauses.
... vibration
patterns an array of values describes alternating periods in which the device is vibrating and not vibrating.
... canceling existing vibrations calling navigator.vibrate() with a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration
pattern.
ARIA: feed role - Accessibility
implementing the feed
pattern allows a screen reader to reliably read and trigger the loading of feed content while in reading mode.
... another feature of the feed
pattern is skim reading: articles within a feed can contain both an accessible name with the aria-label and a description with an aria-describedby, suggesting to screen readers which elements to speak after the label when navigating by article.
... the feed
pattern enables reliable assistive technology reading mode interaction by establishing the following interoperability agreement between the web page and assistive technologies: in the context of a feed, the web page code is responsible for: appropriate visual scrolling of the content based on which article contains dom focus.
... examples example implementation of feed
pattern specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'feed' in that specification.
<input type="month"> - HTML: Hypertext Markup Language
one way around this is to put a
pattern attribute on your month input.
... even though the month input doesn't use it, if the browser falls back to treating it like a text input, the
pattern will be used.
...(summer months only, yyyy-mm)</label> <input id="month" type="month" name="month" min="2017-06" max="2017-09" required
pattern="[0-9]{4}-[0-9]{2}"> <span class="validity"></span> </div> <div> <input type="submit" value="submit form"> </div> </form> if you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the
pattern nnnn-nn, where n is a number from 0 to 9.
... of course, this doesn't stop people from entering invalid dates (such as 0000-42), or incorrectly formatted dates that follow the
pattern.
Intl.Locale.prototype.hourCycle - JavaScript
valid hour cycle types hour cycle type description h12 hour system using 1–12; corresponds to 'h' in
patterns.
... h23 hour system using 0–23; corresponds to 'h' in
patterns.
... h11 hour system using 0–11; corresponds to 'k' in
patterns.
... h24 hour system using 1–24; corresponds to 'k' in
pattern.
Progressive web apps (PWAs)
progressive web apps are a useful design
pattern, though they aren't a formalized standard.
... pwa can be thought of as similar to ajax or other similar
patterns that encompass a set of application attributes, including use of specific web technologies and techniques.
...kpwa application, why it is built that way, and what benefits it brings.pwa developer guidein the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive web applications (pwas).structural overview of progressive web appsin this structural overview, we'll look at the features that make up a standard web application, as well as some design
patterns you can follow when building your pwa.
... instant loading web apps with an application shell architecture — a guide to using the app shell coding
pattern to create apps that load quickly.
requiredFeatures - SVG: Scalable Vector Graphics
twentynine elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <
pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> ...
...svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http://www.w3.org/tr/svg11/feature#graphicsattribute http://www.w3.org/tr/svg11/feature#marker http://www.w3.org/tr/svg11/feature#colorprofile http://www.w3.org/tr/svg11/feature#gradient http://www.w3.org/tr/svg11/feature#
pattern http://www.w3.org/tr/svg11/feature#clip http://www.w3.org/tr/svg11/feature#mask http://www.w3.org/tr/svg11/feature#filter http://www.w3.org/tr/svg11/feature#xlinkattribute http://www.w3.org/tr/svg11/feature#font http://www.w3.org/tr/svg11/feature#extensibility http://www.w3.org/tr/svg11/feature#svgdom-static the browser supports all of the dom interfaces and methods that corre...
... the display and visibility attributes http://www.w3.org/tr/svg11/feature#marker the browser supports the <marker> element http://www.w3.org/tr/svg11/feature#colorprofile the browser supports the <color-profile> element http://www.w3.org/tr/svg11/feature#gradient the browser supports the <lineargradient>, <radialgradient> and <stop> elements http://www.w3.org/tr/svg11/feature#
pattern the browser supports the <
pattern> element http://www.w3.org/tr/svg11/feature#clip the browser supports the <clippath> element and the clip-path, clip-rule attributes http://www.w3.org/tr/svg11/feature#basicclip the browser supports the <clippath> element and the clip-path attribute http://www.w3.org/tr/svg11/feature#mask the browser supports the <mask> element http://www.
...lorprofile</text> <!-- testing : http://www.w3.org/tr/svg11/feature#gradient --> <rect class="ko" x="10" y="660" height="25" width="430" /> <rect class="ok" x="10" y="660" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#gradient" /> <text x="20" y="677">http://www.w3.org/tr/svg11/feature#gradient</text> <!-- testing : http://www.w3.org/tr/svg11/feature#
pattern --> <rect class="ko" x="10" y="685" height="25" width="430" /> <rect class="ok" x="10" y="685" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#
pattern" /> <text x="20" y="702">http://www.w3.org/tr/svg11/feature#
pattern</text> <!-- testing : http://www.w3.org/tr/svg11/feature#clip --> <rect class="ko" x="10" y="710" height="25" width="430" /> <rect class...
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <
pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
... value <iri> default value none animatable no
pattern for <
pattern>, xlink:href defines the reference to a different <
pattern> element within the current svg document fragment.
... scalable vector graphics (svg) 1.1 (second edition)the definition of 'href for <
pattern>' in that specification.
... recommendation defines href for the <
pattern> element.
Fills and Strokes - SVG: Scalable Vector Graphics
you can specify more numbers if you would like a more complicated dash
pattern.
... the first example specifies three numbers, in which case the renderer loops the numbers twice to create an even
pattern.
...the
pattern then repeats.
...can all be set this way, in addition to the gradient and
pattern versions of those shown below.
Archived Mozilla and build documentation - Archive of obsolete content
a sequence of characters) that matches
patterns of characters in other strings.
... microsummary generators use them to identify the pages that the generators know how to summarize by matching
patterns in those pages' urls.
... the life of an html http request the new nsstring class implementation (1999) this document is intended to briefly describe the new nsstring class architecture, and discuss the implications on memory management, optimizations, internationalization and usage
patterns.
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
probably just need bom test since other encodings must be specified var
patternxml = /\.(svg|xml|xul|rdf|xhtml)$/; if ((contenttype && contenttype.match(/[text|application]\/(.*)\+?xml/)) || (href.indexof('file://') === 0 && href.match(
patternxml))) { /* grab the response as text (see below for that routine) and then find encoding within*/ var encname = '([a-za-z][a-za-z0-9._-]*)'; ...
... var
pattern = new regexp('^<\\?xml\\s+.*encoding\\s*=\\s*([\'"])'+encname+'\\1.*\\?>'); // check document if not?
...j++) { xincludeparent.insertbefore(responsenodes[j], xinclude); } xincludeparent.removechild(xinclude); } else if (responsetype === 'responsetext') { if (encname) { var encodingtype = response.match(
pattern); if (encodingtype) { encodingtype = encodingtype[2]; } else { encodingtype = 'utf-8'; } // need to make a whole new request apparently since cannot conv...
HTML forms in legacy browsers - Learn web development
learn about the issues to understand common
patterns, it helps to read browser documentation.
... graceful degradation is web developer's best friend graceful degradation and progressive enhancement are development
patterns that allow you to build great stuff by supporting a wide range of browsers at the same time.
...it's a development
pattern that defines two requirements: a strict separation between structure and behaviors.
Index - Learn web development
10 wai-aria basics aria, accessibility, article, beginner, codingscripting, guide, html, javascript, learn, wai-aria, semantics this article has by no means covered all that's available in wai-aria, but it should have given you enough information to understand how to use it, and know some of the most common
patterns you will encounter that require it.
...below are four common design
patterns which you might use flexbox to create, your task is to build them.
...to that end, be sure to: 313 html forms in legacy browsers example, forms, guide, html, intermediate, web to understand common
patterns, it helps to read browser documentation.
Client-side storage - Learn web development
you will see this request
pattern used very often throughout indexeddb.
... we then get a reference to the object store using the same
pattern we've seen previously, and use the idbobjectstore.delete() method to delete the record from the database, passing it the id.
...this is very similar to the
pattern you saw in the previous example for adding data to the database — we open a readwrite transaction and get a reference to our videos_os object store, create an object representing the record to add to the database, then simply add it using idbobjectstore.add().
Getting started with React - Learn web development
react utilizes features of modern javascript for many of its
patterns.
...most react components follow this
pattern.
... some elements in the expression have attributes, which are written just like in html, following a
pattern of attribute="value".
SourceMap.jsm
sourcenode.prototype.replaceright(
pattern, replacement) call string.prototype.replace on the very rightmost source snippet.
...
pattern: the
pattern to replace.
... replacement: the thing to replace the
pattern with.
Redis Tips
recipes - at the bottom of many pages is a section that gives usage
patterns or recipes for the command under discussion.
... psubscribe and punsubscribe are like subscribe and unsubscribe, but they let you use wildcards for
pattern matching.
... heartbeats and time-based event logs it's a common
pattern to use numerical timestamps for ranking members in a zset.
Index
but we noticed that the common usage
pattern is to compose, send, compose, send, compose send.
... if the user has this usage
pattern, we wouldn't have to create a new window.
...rss is implemented in js and doesn't follow the same
pattern as the c++ protocols.
Waterfall - Firefox Developer Tools
filtering markers you can control which markers are displayed using a button in the toolbar: waterfall
patterns exactly what you'll see in the waterfall is very dependent on the kind of thing your site is doing: javascript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green.
... but there are common
patterns which can alert you to possible performance problems.
... rendering waterfall one
pattern that you'll often see in the waterfall view is something like this: this is a visualization of the basic algorithm the browser uses to update the page in response to some event: javascript function call: some event - for example, a dom event - causes some javascript in the page to run.
CanvasRenderingContext2D.fillStyle - Web APIs
the canvasrenderingcontext2d.fillstyle property of the canvas 2d api specifies the color, gradient, or
pattern to use inside shapes.
... syntax ctx.fillstyle = color; ctx.fillstyle = gradient; ctx.fillstyle =
pattern; options color a domstring parsed as css <color> value.
...
pattern a canvas
pattern object (a repeating image).
CanvasRenderingContext2D.strokeStyle - Web APIs
the canvasrenderingcontext2d.strokestyle property of the canvas 2d api specifies the color, gradient, or
pattern to use for the strokes (outlines) around shapes.
... syntax ctx.strokestyle = color; ctx.strokestyle = gradient; ctx.strokestyle =
pattern; options color a domstring parsed as css <color> value.
...
pattern a canvas
pattern object (a repeating image).
Constraint validation API - Web APIs
concepts and usage certain html form controls, such as <input>, <select> and <textarea>, can restrict the format of allowable values, using attributes like required and
pattern to set basic constraints.
... examples take the following form: <form> <label for="name">enter username (upper and lowercase letters): </label> <input type="text" name="name" id="name" required
pattern="[a-za-z]+"> <button>submit</button> </form> the basic html form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the
pattern.
...inside this function we work out whether the value is invalid because it is empty, or because it doesn't match the
pattern, using an if() block, and set a custom validity error message.
NDEFReader.scan() - Web APIs
syntax var readerpromise = ndefreader.scan(options); parameters options optional id -- the match
pattern for matching each ndefrecord.id.
... recordtype -- the match
pattern for matching each ndefrecord.recordtype.
... mediatype -- the match
pattern for matching each ndefrecord.mediatype.
Writing a WebSocket server in Java - Web APIs
here's an implementation split into parts: import java.io.ioexception; import java.io.inputstream; import java.io.outputstream; import java.net.serversocket; import java.net.socket; import java.security.messagedigest; import java.security.nosuchalgorithmexception; import java.util.base64; import java.util.scanner; import java.util.regex.matcher; import java.util.regex.
pattern; public class websocket { public static void main(string[] args) throws ioexception, nosuchalgorithmexception { serversocket server = new serversocket(80); try { system.out.println("server has started on 127.0.0.1:80.\r\nwaiting for a connection..."); socket client = server.accept(); system.out.println("a client connected."); socket methods: java.net.socket getinputstream() ...
... try { string data = s.usedelimiter("\\r\\n\\r\\n").next(); matcher get =
pattern.compile("^get").matcher(data); creating the response is easier than understanding why you must do it in this way.
... if (get.find()) { matcher match =
pattern.compile("sec-websocket-key: (.*)").matcher(data); match.find(); byte[] response = ("http/1.1 101 switching protocols\r\n" + "connection: upgrade\r\n" + "upgrade: websocket\r\n" + "sec-websocket-accept: " + base64.getencoder().encodetostring(messagedigest.getinstance("sha-1").digest((match.group(1) + "258eafa5-e914-47da-95ca-c5ab0dc85b11").getbytes("utf-8"))) + "\r\n\r\n").getbytes("utf-8"); out.write(response, 0...
Lighting a WebXR setting - Web APIs
lighting information can leak to the web information about the user's surroundings and device usage
patterns.
... temporal and spatial filtering consider an attack that uses a building's automated lighting system to flash the lights on and off quickly in a known
pattern.
... without proper precautions, the lighting estimation data could be used to detect this
pattern and thus determine that a user is in a particular location.
Pagination - CSS: Cascading Style Sheets
this cookbook
pattern demonstrates the navigation
pattern used to display pagination, where the user can move between pages of content such as search results.
... requirements the pagination
pattern typically displays items in a row.
... recipe download this example choices made this
pattern is laid out using flexbox — one flex container nested inside another.
Split Navigation - CSS: Cascading Style Sheets
a navigation
pattern where one or more elements are separated from the rest of the navigation items.
... requirements a common navigation
pattern is to have one element pushed away from the others.
... recipe download this example choices made this
pattern combines auto margins with flexbox to split the items.
str:split() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes str:split() splits a string using a
pattern string to determine where the splits should occur, returning a node-set containing the resulting strings.
... syntax str:split(string,
pattern) parameters string the string to split.
...
pattern the
pattern indicating where to split the string.
Event developer guide - Developer guides
events refers both to a design
pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
... the overview page provides an introduction to the design
pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.
... the custom events page describes how the event code design
pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.
Constraint validation - Developer guides
validation-related attributes in addition to the type attribute described above, the following attributes are used to describe basic constraints: attribute input types supporting the attribute possible values constraint description associated violation
pattern text, search, url, tel, email, password a javascript regular expression (compiled with the ecmascript 5 global, ignorecase, and multiline flags disabled) the value must match the
pattern.
...
patternmismatch constraint violation min range, number a valid number the value must be greater than or equal to the value.
... <option value="ch">switzerland</option> <option value="fr">france</option> <option value="de">germany</option> <option value="nl">the netherlands</option> </select> <input type="submit" value="validate"> </form> this displays the following form: first, we write a function checking the constraint itself: function checkzip() { // for each country, defines the
pattern that the zip has to follow var constraints = { ch : [ '^(ch-)?\\d{4}$', "switzerland zips must have exactly 4 digits: e.g.
<input type="datetime-local"> - HTML: Hypertext Markup Language
one way around this is to put a
pattern attribute on your datetime-local input.
...for example, try viewing the following demo in a non-supporting browser: <form> <div> <label for="party">choose your preferred party date and time (required, june 1st 8.30am to june 30th 4.30pm):</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30"
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}t[0-9]{2}:[0-9]{2}" required> <span class="validity"></span> </div> <div> <input type="submit" value="book party!"> </div> <input type="hidden" id="timezone" name="timezone" value="-08:00"> </form> if you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the p...
... and what user is going to understand the
pattern they need to enter the time and date in?
<input type="time"> - HTML: Hypertext Markup Language
one way around this is to put a
pattern attribute on your time input.
...for example, try viewing the following demo in a browser that doesn't support time inputs: <form> <div> <label for="appt-time">choose an appointment time (opening hours 12:00 to 18:00): </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required
pattern="[0-9]{2}:[0-9]{2}"> <span class="validity"></span> </div> <div> <input type="submit" value="submit form"> </div> </form> if you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the
pattern nn:nn, where n is a number from 0 to 9.
... of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the
pattern.
HTML documentation index - HTML: Hypertext Markup Language
45 html attribute:
pattern attribute, attributes, constraint validation api, reference the
pattern attribute specifies a regular expression the form control's value should match.
... if a non-null value doesn't conform to the constraints set by the
pattern value, the validitystate object's read-only
patternmismatch property will be true.
...these minimal
patterns of html are used for marking up entities that range from fundamental to domain-specific information, such as people, organizations, events, and locations.
Microformats - HTML: Hypertext Markup Language
these minimal
patterns of html are used for marking up entities that range from fundamental to domain-specific information, such as people, organizations, events, and locations.
... as in this example, some markup
patterns require only a single microformat root class name, which parsers use to find a few generic properties such as name, url, photo.
..."dt-start", "dt-end", "dt-bday" special parsing: time element datetime attribute, value-class-
pattern and separate date time value parsing for readability.
SyntaxError: invalid regular expression flag "x" - JavaScript
in a regular expression literal, which consists of a
pattern enclosed between slashes, the flags are defined after the second slash.
... to include a flag with the regular expression, use this syntax: var re = /
pattern/flags; or var re = new regexp('
pattern', 'flags'); regular expression flags flag description g global search.
...to match newlines (added in ecmascript 2018) u unicode; treat
pattern as a sequence of unicode code points y perform a "sticky" search that matches starting at the current position in the target string.
SVG element reference - SVG: Scalable Vector Graphics
ncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotlight> <fetile> <feturbulence> <filter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <
pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line...
...>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <
pattern>, <svg>, <switch>, <symbol>, <unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, ...
...<image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <
pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <
pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elemen...
<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:decimal-format name=name decimal-separator=character grouping-separator=character infinity=string minus-sign=character nan=string percent=character per-mille=charater zero-digit=character digit=character
pattern-separator=character /> required attributes none.
... digit specifies the character used in the format
pattern to stand for a digit.
...
pattern-separator specifies the character separating positive and negative sub
patterns in a format
pattern.
jpmignore - Archive of obsolete content
here is an example: # ignore .ds_store files created by mac .ds_store # ignore any zip or xpi files *.zip *.xpi # ignore specific directory # you can start
patterns with a forward slash (/) to avoid recursivity.
... # you can end
patterns with a forward slash (/) to specify a directory.
JavaScript Debugger Service - Archive of obsolete content
function createfilter(
pattern, pass) { var jsdifilter = components.interfaces.jsdifilter; var filter = { globalobject: null, flags: pass ?
... (jsdifilter.flag_enabled | jsdifilter.flag_pass) : jsdifilter.flag_enabled, url
pattern:
pattern, startline: 0, endline: 0 }; return filter; }, we then add the filters we want.
LookupNamespaceURI - Archive of obsolete content
i = lookupnamespaceuri; } function lookupnamespaceuri (prefix) { return lookupnamespaceurihelper(this, prefix); } function lookupnamespaceurihelper (node, prefix) { // adapted directly from http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceurialgo var i, att, htmlmode = document.contenttype, // mozilla only xmlns
pattern = /^xmlns:(.*)$/; switch (node.nodetype) { case 1: // element_node (could also just test for node.element_node, etc., if supported in all browsers) if (node.namespaceuri != null && node.prefix === prefix) { // note: prefix could be "null" in the case we are looking for default namespace return node.namespaceuri; ...
... } if (node.attributes.length) { for (i = 0; i < node.attributes.length; i++) { att = node.attributes[i]; if (xmlns
pattern.test(att.name) && xmlns
pattern.exec(att.name)[1] === prefix) { if (att.value) { return att.value; } return null; // unknown } if (att.name === 'xmlns' && prefix == null) { // default namespace if (att.value) { return att.value; } return null; // unknown } ...
LookupPrefix - Archive of obsolete content
{ return _lookupnamespaceprefix(namespaceuri, node.ownerelement); } return null; default: if (node.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, node.parentnode); } return null; } } // private function for lookupprefix only function _lookupnamespaceprefix (namespaceuri, originalelement) { var xmlns
pattern = /^xmlns:(.*)$/; if (originalelement.namespaceuri && originalelement.namespaceuri === namespaceuri && originalelement.prefix && originalelement.lookupnamespaceuri(originalelement.prefix) === namespaceuri) { return originalelement.prefix; } if (originalelement.attributes && originalelement.attributes.length) { for (var i=0; i < originalelement.attributes.length; i++) { var att = orig...
...inalelement.attributes[i]; xmlns
pattern.lastindex = 0; var localname = att.localname || att.name.substr(att.name.indexof(':')+1); // latter test for ie which doesn't support localname if (localname.indexof(':') !== -1) { // for firefox when in html mode localname = localname.substr(att.name.indexof(':')+1); } if ( xmlns
pattern.test(att.name) && att.value === namespaceuri && lookupnamespaceuri(originalelement, localname) === namespaceuri ) { return localname; } } } if (originalelement.parentnode) { // entityreferences may have to be skipped to get to it return _lookupnamespaceprefix(namespaceuri, originalelement.parentnode); } return null; } ...
prefwindow - Archive of obsolete content
notes usage
patterns opening/initializing a prefwindow note that you can define an initwithparams() function in your sub window - to handle parameters passed using openwindow() in case the window was already open.
... the suggested usage
pattern is as follows: // subwindow.js function onload(ev) { // do some initialization...
Paddle and keyboard controls - Game development
the same
pattern is true for the second listener: keyup events will fire the keyuphandler() function (when the keys stop being pressed).
...the same
pattern follows with the right cursor and the rightpressed variable.
Mobile accessibility - Learn web development
if you've set a passcode or
pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.
...this is commonly represented by a "three horizontal lines" icon, and the design
pattern is consequently known as a "hamburger menu".
Grids - Learn web development
a grid is a collection of horizontal and vertical lines creating a
pattern against which we can line up our design elements.
... as many columns as will fit we can combine some of the things we have learned about track listing, repeat notation and minmax() to create a useful
pattern.
The HTML5 input types - Learn web development
to implement different validation behavior, you can use the
pattern attribute, and you can also custom the error messages; we'll talk how to use these features in the client-side form validation article later on.
... as we mentioned earlier, the
pattern attribute can be used to enforce constraints, which you'll learn about in client-side form validation.
Test your skills: Form validation - Learn web development
form validation 2 now we want you to take the same form you saw in the previous task (use your previous answer if you want to), and add some more specific
pattern validation to the first three fields using regular expressions.
... remove the length validation from the phone number field if it is present, and set it so that it accepts 10 digits — either 10 digits in a row, or a
pattern of three digits, three digits, then four digits, separated by either spaces, dashes, or dots.
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
this is the general
pattern you'll see it used in: function draw() { // drawing code goes here requestanimationframe(draw); } draw(); the idea is to define a function in which your animation is updated (e.g.
...the general
pattern you'd use looks something like this: let starttime = null; function draw(timestamp) { if (!starttime) { starttime = timestamp; } currenttime = timestamp - starttime; // do something based on current time requestanimationframe(draw); } draw(); browser support requestanimationframe() is supported in more recent browsers than setinterval()/settimeout().
Introduction to events - Learn web development
inline event handlers — don't use these you might also see a
pattern like this in your code: <button onclick="bgchange()">press me</button> function bgchange() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } note: you can find the full source code for this example on github (also see it running live).
...it is not important to understand these concepts fully at this point, but they might serve to explain some code
patterns you'll likely come across.
Making decisions in your code — conditionals - Learn web development
we wanted to make a special mention of testing boolean (true/false) values, and a common
pattern you'll come across again and again.
... the keyword default, followed by exactly the same code
pattern as one of the cases (bullets 3–5), except that default does not have a choice after it, and you don't need to break statement as there is nothing to run after this in the block anyway.
Object prototypes - Learn web development
in fact, a fairly common
pattern for more object definitions is to define the properties inside the constructor, and the methods on the prototype.
... this
pattern can be seen in action in piotr zalewa's school plan app example.
Aprender y obtener ayuda - Learn web development
as you'll discover, learning web development is more about problem-solving and learning
patterns than it is about learning lots of syntaxes.
... learn and recognise the
patterns as we said before, web design/programming is mostly about problem solving and
patterns.
Creating our first Vue component - Learn web development
both of the following are equivalent: <input type="checkbox" id="todo-item" v-bind:checked="isdone" /> <input type="checkbox" id="todo-item" :checked="isdone" /> you're free to use whichever
pattern you would like.
...because the shorthand syntax is more commonly used, this tutorial will stick to that
pattern.
Handling common JavaScript problems - Learn web development
for a light introduction; you should also study examples like this one, which shows a typical
pattern of saving a this scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct this scope.
... this
pattern can be applied to just about any prefixed javascript feature.
Eclipse CDT Manual Setup
if the main object directory for your source tree is a fennec build: in the "cdt gcc build output parser", change the compiler command
pattern to (.*gcc)|(.*[gc]\+\+)|(clang) (before this change it should have been "(gcc)|([gc]\+\+)|(clang)").
... this
pattern is what cdt uses to identify compiler commands when parsing the build output.
Cross Process Object Wrappers
bidirectional cpows a common
pattern is for chrome code to access content objects and add event listeners to them.
...*/ browsermm.loadframescript("chrome://my-addon/content/frame-script.js", false); browsermm.addmessagelistener("my-addon-message", function(message) { let wrapper = message.objects.element; wrapper.addeventlistener("click", function() { console.log("they clicked"); }); }); mapping content documents to xul browsers a common
pattern is to get the xul <browser> that corresponds to a content document.
Leak-hunting strategies and tips
a good general
pattern for finding and fixing leaks is to start with a task that you want not to leak (for example, reading email).
... build with --enable-trace-malloc common leak
patterns when trying to find a leak of reference-counted objects, there are a number of
patterns that could cause the leak: ownership cycles.
Profiling with the Firefox Profiler
the change in stack height is useful to find
patterns like long blocking calls (long flatlines) or very tall spiky blocks (recursive calls and js).
... with more experience you can read profiles faster by recognizing
patterns.
Setting up CDT to work on SpiderMonkey
if you want to use ccache: select "c/c++ general", then "preprocessor include
patterns".
... under the "providers" group tab, select "cdt gcc build output parser" and add the string |(ccache) to the end of the "compiler command
pattern" text input.
Avoiding leaks in JavaScript XPCOM components
this document attempts to help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript
patterns that cause leaks.
... i actually can't find an example of this simple leak
pattern that occurred in mozilla's codebase.
Component Internals
an overview of xpcom discussed the factory design
pattern that's used in a factory object.
... the factory design
pattern in xpcom is represented by the nsifactory interface.
Using XPCOM Utilities to Make Things Easier
module implementation macros the general case is to use ns_impl_nsgetmodule, which doesn't take any callbacks, but all the macros follow the same general
pattern.
...this is a common
pattern when you have a local nscomptr in a function and you must pass back a reference to it, as in the following: someclass::get(nsisupports** aresult) { if (!aresult) return ns_error_null_pointer; nscomptr<nsisupports> value; object->method(getter_addrefs(value)); *aresult = value.get(); ns_if_addref(*aresult); return ns_ok; } the first thing that this method does is check to see ...
XPCOM guide
this document attempts to help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript
patterns that cause leaks.creating xpcom componentsthis guide is about gecko, and about creating xpcom components for gecko-based applications.how to build an xpcom component in javascriptif you are looking for add-on sdk solution for xpcom javascript components then check out platform/xpcom module first.inheriting from implementation classesgiven that idl interfaces map to abstract classes in c++, a com...
...service(), etc methods are expensive and should be avoided when possible.receiving startup notificationssometimes it's necessary for xpcom components to receive notifications as to the progress of the application's startup process, so they can start new services at appropriate times, for example.xpcom array guidemozilla has many array classes because each array is optimized for a particular usage
pattern.
nsINavHistoryResult
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) places results use a model-view-controller (mvc) design
pattern.
...more specifically, the nsinavhistoryresultviewer interface provides the view component of the
pattern, and nsinavhistoryresultviewobserver is the controller.
Cached compose window FAQ
but we noticed that the common usage
pattern is to compose, send, compose, send, compose send.
... if the user has this usage
pattern, we wouldn't have to create a new window.
Mozilla
a common
pattern used with interfaces to create a bi-directional communication between two groups of code is the observer (or listener)
pattern.
...here is a very simple example of the observer
pattern: creating mozsearch plugins firefox 2 uses a simplified form of the opensearch format for storing search plugins.
Using IndexedDB - Web APIs
basic
pattern the basic
pattern that indexeddb encourages is the following: open a database.
... one common
pattern with cursors is to retrieve all objects in an object store and add them to an array, like this: var customers = []; objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { customers.push(cursor.value); cursor.continue(); } else { console.log("got all customers: " + customers); } }; note: alternatively, you can use getall() t...
LockManager.request() - Web APIs
this shared/exclusive lock
pattern is common in database transaction architecture, for example to allow multiple simultaneous readers (each requests a "shared" lock) but only one writer (a single "exclusive" lock).
... this is known as the readers-writer
pattern.
Node - Web APIs
we use a wrapper function named grep to do the searching: function grep(parentnode,
pattern) { const matches = [] let endscan = false eachnode(parentnode, function(node){ if (endscan) { return false } // ignore anything which isn't a text node if (node.nodetype !== node.text_node) { return } if (typeof
pattern === "string") { if (-1 !== node.textcontent.indexof(
pattern)) { matches.push(node) } } else if (
pattern.test(node.tex...
...tcontent)) { if (!
pattern.global) { endscan = true matches = node } else { matches.push(node) } } }) return matches } for example, to find text nodes that contain typos: const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"] const
pattern = new regexp("\\b(" + typos.join("|") + ")\\b", "gi") const mistakes = grep(document.body,
pattern) console.log(mistakes) specifications specification status comment domthe definition of 'node' in that specification.
Notification.vibrate - Web APIs
the vibrate read-only property of the notification interface specifies a a vibration
pattern for the device's vibration hardware to emit when the notification fires.
... syntax var vibrate = notification.vibrate; value a vibration
pattern, as specified in the vibration api spec.
Using readable streams - Web APIs
// enqueue the next data chunk into our target stream controller.enqueue(value); return pump(); this is the standard
pattern you’ll see when using stream readers: you write a function that starts off by reading the stream.
...readstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); in the readstream() function itself, we lock a reader to the stream using readablestream.getreader(), then follow the same kind of
pattern we saw earlier — reading each chunk with read(), checking whether done is true and then ending the process if so, and reading the next chunk and processing it if not, before running the read() method again.
WebGL best practices - Web APIs
program(prog); } for (const [vs, fs, prog] of programs) { if (!gl.getprogramparameter(prog, gl.link_status)) { console.error('link failed: ' + gl.getprograminfolog(prog)); console.error('vs info-log: ' + gl.getshaderinfolog(vs)); console.error('fs info-log: ' + gl.getshaderinfolog(fs)); } } khr_parallel_shader_compile for non-blocking compile/link status while we've described a
pattern to allow browsers to compile and link in parallel, normally checking compile_status or link_status blocks until the compile or link completes.
... a good
pattern for "always give me the highest precision": #ifdef gl_fragment_precision_high precision highp float; #else precision mediump float; #endif essl100 minimum requirements (webgl 1) float think range min above zero precision highp float24* (-2^62, 2^62) 2^-62 2^-16 relative mediump ieee float16 (-2^14, 2^14) 2^-14 2^-10 relative ...
Web Locks API - Web APIs
for example, if a web app running in multiple tabs wants to ensure that only one tab is syncing data between the network and indexed db, each tab could try to acquire a "my_net_db_sync" lock, but only one tab will succeed (the leader election
pattern.) the api is used as follows: the lock is requested.
...this can be used to implement the readers-writer
pattern.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
in these cases, a recursive settimeout()
pattern is preferred: (function loop(){ settimeout(function() { // your logic here loop(); }, delay); })(); in the above snippet, a named function loop() is declared and is immediately executed.
...while this
pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.
Synchronous and asynchronous requests - Web APIs
this
pattern can be useful, for example in order to interact with the server in the background, or to preload content.
... the following example shows a theoretical analytics code
pattern that submits data to a server by using the sendbeacon() method.
Web APIs
e cssnamespacerule cssnumericvalue cssomstring csspagerule csspositionvalue cssprimitivevalue csspseudoelement cssrule cssrulelist cssstyledeclaration cssstylerule cssstylesheet cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvas
pattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialsco...
...svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghkernelement svgimageelement svglength svglengthlist svglineelement svglineargradientelement svgmpathelement svgmaskelement svgmatrix svgmeshelement svgmetadataelement svgmissingglyphelement svgnumber svgnumberlist svgpathelement svg
patternelement svgpoint svgpolygonelement svgpolylineelement svgpreserveaspectratio svgradialgradientelement svgrect svgrectelement svgrenderingintent svgsvgelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstringlist svgstylable svgstyleelement svgswitchelement svgsymbolelement svgtrefelement svgtspanelement svgtests svgtextcontentelement svgtextelement svgtextpatheleme...
Accessibility documentation index - Accessibility
83 accessibility and spacial
patterns accessibility, braille,
patterns, photosensitive seizures nasa conducted research on the perception of color, and found that luminance contrast mattered greatly as to how they were perceived.
...it is intended to continuously evolve as more
patterns arise.
Web Accessibility: Understanding Colors and Luminance - Accessibility
the expert consensus of the epilepsy foundation noted the following in their publication, photic- and
pattern-induced seizures: expert consensus of the epilepsy foundation of america working group "irrespective of luminance, a transition to or from a saturated red is also considered a risk" saturation is sometimes described as the "purity" or "intensity" of a color, and although these are good definitions for "pigments" in an artist's paint set, they are not quite accurate as definitions for color from...
...macknik on november 1, 2014 scientific papers photic- and
pattern-induced seizures: expert consensus of the epilepsy foundation of america working group w3c issues and discussions contrast ratio math and related visual issues #695 luminance / luma confusion #236 outdated threshold for srgb companding in the "relative luminance" definition #308 non-srgb color spaces, outdated srgb threshold, and other issues in the "relative luminance" definition #360 ...
:nth-child() - CSS: Cascading Style Sheets
/* selects the second <li> element in a list */ li:nth-child(2) { color: lime; } /* selects every fourth element among any group of siblings */ :nth-child(4n) { color: lime; } syntax the nth-child pseudo-class is specified with a single argument that describes a
pattern for matching element indices in a list of siblings.
... functional notation <an+b> represents elements in a list whose indices match those found in a custom
pattern of numbers, defined by an+b, where: a is an integer step size, b is an integer offset, n is all positive integers, starting from 0.
:nth-last-child() - CSS: Cascading Style Sheets
syntax the nth-last-child pseudo-class is specified with a single argument, which represents the
pattern for matching elements, counting from the end.
... functional notation <an+b> represents elements whose numeric position in a series of siblings matches the
pattern an+b, for every positive integer or zero value of n.
List group with badges - CSS: Cascading Style Sheets
in this recipe we will create a list group
pattern with badges that indicate a count.
... recipe download this example choices made flexbox makes this particular
pattern straightforward and also makes it easy to make changes to the layout.
Sticky footers - CSS: Cascading Style Sheets
a sticky footer
pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
... requirements the sticky footer
pattern needs to meet the following requirements: footer sticks to the bottom of the viewport when content is short.
CSS Layout cookbook - CSS: Cascading Style Sheets
the css layout cookbook aims to bring together recipes for common layout
patterns, things you might need to implement in your own sites.
... css grid, flexbox split navigation a navigation
pattern where some links are visually separated from the others.
Index - Developer guides
17 event developer guide dom, event, guide, needsupdate, events events refers both to a design
pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
... 24 overview of events and handlers beginner, dom, example, javascript, needsbeginnerupdate, needsupdate, events this overview of events and event handling explains the code design
pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.
<input type="date"> - HTML: Hypertext Markup Language
for example: ddmmyyyy dd/mm/yyyy mm/dd/yyyy dd-mm-yyyy mm-dd-yyyy month dd, yyyy one way around this is the
pattern attribute on your date input.
...for example, try viewing the following in a unsupporting browser: <form> <label for="bday">enter your birthday: <input type="date" name="bday" required
pattern="\d{4}-\d{2}-\d{2}"> <span class="validity"></span> </label> <p> <button>submit</button> </p> </form> if you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the
pattern ####-##-## (where # is a digit from 0 to 9).
<input type="range"> - HTML: Hypertext Markup Language
events change and input supported common attributes autocomplete, list, max, min, and step idl attributes list, value, and valueasnumber methods stepdown() and stepup() validation there is no
pattern validation available; however, the following forms of automatic validation are performed: if the value is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input.
... note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple,
pattern, placeholder, readonly, required, size, src, and width.
RegExp.prototype.compile() - JavaScript
syntax regexobj.compile(
pattern, flags) parameters
pattern the text of the regular expression.
... examples using compile() the following example shows how to recompile a regular expression with a new
pattern and a new flag.
String.prototype.split() - JavaScript
the division is done by searching for a
pattern; where the
pattern is provided as the first parameter in the method's call.
... syntax str.split([separator[, limit]]) parameters separator optional the
pattern describing where each split should occur.
Destructuring assignment - JavaScript
return values that you're not interested in: function f() { return [1, 2, 3]; } const [a, , b] = f(); console.log(a); // 1 console.log(b); // 3 const [c] = f(); console.log(c); // 1 you can also ignore all returned values: [,,] = f(); assigning the rest of an array to a variable when destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest
pattern: const [a, ...b] = [1, 2, 3]; console.log(a); // 1 console.log(b); // [2, 3] be aware that a syntaxerror will be thrown if a trailing comma is used on the left-hand side with a rest element: const [a, ...b,] = [1, 2, 3]; // syntaxerror: rest element may not have a trailing comma // always consider using rest operator as the last element unpacking values from a regular expression match when...
...rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring
pattern.
throw - JavaScript
* * accepted formats for a zip code are: * 12345 * 12345-6789 * 123456789 * 12345 6789 * * if the argument passed to the zipcode constructor does not * conform to one of these
patterns, an exception is thrown.
... */ function zipcode(zip) { zip = new string(zip);
pattern = /[0-9]{5}([- ]?[0-9]{4})?/; if (
pattern.test(zip)) { // zip code value will be the first match in the string this.value = zip.match(
pattern)[0]; this.valueof = function() { return this.value }; this.tostring = function() { return string(this.value) }; } else { throw new zipcodeformatexception(zip); } } function zipcodeformatexception(value) { this.value = value; this.message = 'does not conform to the expected format for a zip code'; this.tostring = function() { return this.value + this.message; }; } /* * this could be in a script that validates address data * for us addresses.
Performance fundamentals - Web Performance
for example, paper covered with printed text reflects photons to the user's eyes in some
pattern.
... by manipulating pixels, a reader app emits photons in a similar
pattern to "fool" the user's eyes.
Introduction to progressive web apps - Progressive web apps (PWAs)
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.
...they represent a new philosophy for building web apps, involving some specific
patterns, apis, and other features.
Structural overview of progressive web apps - Progressive web apps (PWAs)
in this structural overview, we'll look at the features that make up a standard web application, as well as some design
patterns you can follow when building your pwa.
... benefits of the app shell
pattern this architecture allows a web site to benefit the most from all the pwa features — it caches the app shell and manages the dynamic content in a way that greatly improves the performance.
in - SVG: Scalable Vector Graphics
in many cases, the fillpaint is opaque everywhere, but that might not be the case if a shape is painted with a gradient or
pattern which itself includes transparent or semi-transparent parts.
...in many cases, the strokepaint is opaque everywhere, but that might not be the case if a shape is painted with a gradient or
pattern which itself includes transparent or semi-transparent parts.
overflow - SVG: Scalable Vector Graphics
although the initial value for overflow is auto, it is overwritten in the user agent style sheet for the <svg> element when it is not the root element of a stand-alone document, the <
pattern> element, and the <marker> element to be hidden by default.
... as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignobject>, <iframe>, <image>, <marker>, <
pattern>, <symbol>, <svg>, and <text> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is wider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | hidden | scroll | auto default value visible animatable yes for a description of the values, please see the css overflow property.
preserveAspectRatio - SVG: Scalable Vector Graphics
elements seven elements are using this attribute: <svg>, <symbol>, <image>, <feimage>, <marker>, <
pattern>, and <view>.
... default value xmidymid meet animatable yes
pattern for <
pattern>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport.
viewBox - SVG: Scalable Vector Graphics
five elements are using this attribute: <marker>, <
pattern>, <svg>, <symbol>, and <view>.
... value <number>?, <number>?, <number>?, <number> default value none animatable yes
pattern for <
pattern>, viewbox defines the position and dimension for the content of the
pattern tile.
xlink:title - SVG: Scalable Vector Graphics
these elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <
pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage context value <anything> default value none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource.
... candidate recommendation deprecated the attribute and made it only apply to <a>, <image>, <lineargradient>, <
pattern>, <radialgradient>, <script>, <textpath>, and <use> scalable vector graphics (svg) 1.1 (second edition)the definition of 'seed' in that specification.
<feTile> - SVG: Scalable Vector Graphics
the <fetile> svg filter primitive allows to fill a target rectangle with a repeated, tiled
pattern of an input image.
... the effect is similar to the one of a <
pattern>.
Tutorials
essential javascript design
patterns an introduction to essential javascript design
patterns.
... javascript
patterns a javascript
pattern and anti
pattern collection that covers function
patterns, jquery
patterns, jquery plugin
patterns, design
patterns, general
patterns, literals and constructor
patterns, object creation
patterns, code reuse
patterns, dom.
Using templates and slots - Web Components
however, it is generally more practical to add slots within a <template> element, since you are unlikely to need to define a
pattern based on an already-rendered element.
...this uses exactly the same
pattern as we saw in our earlier trivial example.
Content Scripts - Archive of obsolete content
the content of the page: // main.js var tabs = require("sdk/tabs"); var contentscriptstring = 'document.body.innerhtml = "<h1>this page has been eaten</h1>";' tabs.activetab.attach({ contentscript: contentscriptstring }); the following high-level sdk modules can use content scripts to modify web pages: page-mod: enables you to attach content scripts to web pages that match a specific url
pattern.
dev/panel - Archive of obsolete content
if an actor can send notifications, as in the request/reply/notify
pattern, then the corresponding volcan.js object emits an event, which you can listen for using addeventlistener.
Listen for Page Load - Archive of obsolete content
the script adds a red border to the tab's document: require("sdk/tabs").on("ready", runscript); function runscript(tab) { tab.attach({ contentscript: "if (document.body) document.body.style.border = '5px solid red';" }); } (this example is only to show the idea: to implement something like this, you should instead use page-mod, and specify "*" as the match-
pattern.) learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Developing for Firefox Mobile - Archive of obsolete content
ils supported ui/button/action not supported ui/button/toggle not supported ui/frame not supported ui/id supported ui/sidebar not supported ui/toolbar not supported util/array supported util/collection supported util/deprecate supported util/list supported util/match-
pattern supported util/object supported util/uuid supported window/utils supported ...
Canvas code snippets - Archive of obsolete content
tx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['create
pattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'line...
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 5: closing all browser windows var browsers = windowmediator.getenumerator('navigator:browser'); var browser; while (browsers.hasmoreelements()) { browser = browsers.getnext().queryinterface(components.interfaces.nsidomwindowinternal); browser.browsertrytoclosewindow(); } this method returns an overview of the specified window type in the form of an iterator
pattern object called nsisimpleenumerator.
Index of archived content - Archive of obsolete content
t/assert test/harness test/httpd test/runner test/utils ui/button/action ui/button/toggle ui/frame ui/id ui/sidebar ui/toolbar util/array util/collection util/deprecate util/list util/match-
pattern util/object util/uuid window/utils release notes tools cfx cfx to jpm console jpm jpm-mobile jpmignore package.json tutorials ...
MMgc - Archive of obsolete content
another point to consider is whether marking should always be on or should be turned on and off at some point based on memory allocation
patterns.
Windows Media in Netscape - Archive of obsolete content
for example if (window.activexobject) { // internet explorer only script } server-side detection using user-agent strings netscape 7.1's user agent string on windows has the general
pattern: mozilla/5.0 (windows; u; <em>operating system version</em>; <em>language</em>; rv:1.4) gecko/20030624 netscape/7.1 (ax<em>[;optional comments]</em>) the "vendor comment" (ax) following the "vendor version" netscape/7.1 is an indicator that the browser supports the windows media player activex control.
Examples - Game development
canvas airport simulation animated map showing planes taking off and landing at airports, along with flight path
patterns.
Audio for Web games - Game development
let's create another async function to set up the sample — we can combine the two async functions in a nice promise
pattern to perform further actions when each file is loaded and buffered: async function loadfile(filepath) { const track = await getfile(filepath); return track; } let's also create a playtrack() function, which we can call once a file has been fetched.
Efficient animation for web games - Game development
} var drawpending = false; function requestredraw() { if (!drawpending) { drawpending = true; requestanimationframe(redraw); } } following this
pattern — or something similar — means that no matter how many times you call requestredraw, your drawing function will only be called once per frame.
WAI-ARIA basics - Learn web development
summary this article has by no means covered all that's available in wai-aria, but it should have given you enough information to understand how to use it, and know some of the most common
patterns you will encounter that require it.
CSS selectors - Learn web development
it is a
pattern of elements and other terms that tell the browser which html elements should be selected to have the css property values inside the rule applied to them.
Test your skills: backgrounds and borders - Learn web development
backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating
pattern of stars on the right.
What text editors are available? - Learn web development
these functionalities are often helpful: search-and-replace, in one or multiple documents, based on regular expressions or other
patterns as needed quickly jump to a given line view two parts of a large document separately view html as it will look in the browser select text in multiple places at once view your project's files and directories format your code automatically with code beautifier check spelling auto-indent code based on indentation settings do i want to add extra features to my text editor?
UI pseudo-classes - Learn web development
controls with built-in validation, such as <input type="email"> or <input type="url"> are (matched with) :invalid when the data entered into them does not match the
pattern they are looking for (but they are valid when empty).
The web and web standards - Learn web development
it isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical
patterns you'll be called upon to implement.
Define terms with HTML - Learn web development
dl> <dt>jambalaya</dt> <dd> rice-based entree typically containing chicken, sausage, seafood, and spices </dd> <dt>sukiyaki</dt> <dd> japanese specialty consisting of thinly sliced meat, vegetables, and noodles, cooked in sake and soy sauce </dd> <dt>chianti</dt> <dd> dry italian red wine originating in tuscany </dd> </dl> the basic
pattern, as you can see, is to alternate <dt> terms with <dd> descriptions.
Mozilla splash page - Learn web development
then save
pattern.png in the same directory (right click on the image to get an option to save it.) access the different images in the originals directory and save them in the same way; you'll want to save them in a different directory for now, as you'll need to manipulate (some of) them using a graphics editor before they're ready to be used.
Responsive images - Learn web development
vector images are great for simple graphics,
patterns, interface elements, etc., but it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo.
Drawing graphics - Learn web development
let's try adding another arc: ctx.fillstyle = 'yellow'; ctx.beginpath(); ctx.arc(200, 106, 50, degtorad(-45), degtorad(45), true); ctx.lineto(200, 106); ctx.fill(); the
pattern here is very similar, but with two differences: we have set the last parameter of arc() to true, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion.
JavaScript object basics - Learn web development
the syntax always follows this
pattern: const objectname = { member1name: member1value, member2name: member2value, member3name: member3value }; the value of an object member can be pretty much anything — in our person object we've got a string, a number, two arrays, and two functions.
Ember resources and troubleshooting - Learn web development
using the design
patterns provided by the framework, a route using fetch() would look something like this: import route from '@ember/routing/route'; export default class myroute extends route { async model() { let response = await fetch('some/url/to/json/data'); let json = await response.json(); return { data: json }; } } see more information on specifying the route's model here.
Introduction to client-side frameworks - Learn web development
it follows a similar
pattern to the one we used to build a list item element: function builddeletebuttonel(id) { const button = document.createelement('button'); const textcontent = document.createtextnode('delete'); button.setattribute('type', 'button'); button.appendchild(textcontent); return button; } this button doesn't do anything yet, but it will later once we decide to implement our delete feature.
Accessibility in React - Learn web development
we're going to follow a
pattern similar to our previous changes: we'll make a new ref, and utilize our useprevious() hook, so that we can focus on the list heading whenever a user deletes a task.
Componentizing our React app - Learn web development
to follow the same
pattern we had initially, let's give each instance of the <todo /> component an id in the format of todo-i, where i gets larger by one every time: <todo name="eat" completed={true} id="todo-0" /> <todo name="sleep" completed={false} id="todo-1" /> <todo name="repeat" completed={false} id="todo-2" /> now go back to todo.js and make use of the id prop.
Implementing feature detection - Learn web development
generally, such tests are done via one of the following common
patterns: summary of javascript feature detection techniques feature detection type explanation example if member in object check whether a certain method or property (typically an entry point into using the api or other feature you are detecting for) exists in its parent object.
Limitations of frame scripts
qi from content window to chrome window there's a particular
pattern often used to get from a content window to the associated chrome window.
Limitations of frame scripts
qi from content window to chrome window there's a particular
pattern often used to get from a content window to the associated chrome window.
PBackground
this has lead to a rather awkward
pattern seen in some parts of the gecko codebase, looking something like this (try searching for geckoprocesstype_default in dxr): if (xre_getprocesstype() == geckoprocesstype_default) { dothething(arguments); } else { mipdlprotocol->senddothething(arguments); } this can get unwieldy very quickly, so a better solution was needed.
Introduction to Layout in Mozilla
puted stylistic data style data is computed lazily, as it is asked for reflow recursively compute geometry (x, y, w, h) for frames, views, and widgets given w & h constraints of “root frame” compute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmetrics basic
pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame sizes child frame and view based on child’s metrics n.b.
Task.jsm
async() simplifies the common
pattern of implementing a method via a task, like this simple object with a greet method that has a name parameter and spawns a task to send a greeting and return its reply: let greeter = { message: "hello, name!", greet: function(name) { return task.spawn((function* () { return yield sendgreeting(this.message.replace(/name/, name)); }).bind(this); }) }; with async(), the method can...
Gecko Profiler FAQ
for example, we have observed that the first access to large hashtables when doing a hashtable lookup can incur a page fault in many cases, and while the specific reason behind each one of those page faults may be different, the general conclusion from that observation would be something about the overall efficiency of your memory access
patterns.
Power profiling overview
each of these samples can trigger a wakeup, which consumes power and obscures firefox's natural wakeup
patterns.
Certificate functions
vocationpolicy mxr 3.12 and later cert_getprevgeneralname mxr 3.10 and later cert_getprevnameconstraint mxr 3.10 and later cert_getsloptime mxr 3.2 and later cert_getsslcacerts mxr 3.2 and later cert_getstatename mxr 3.2 and later cert_getusepkixforvalidation mxr 3.12 and later cert_getvaliddns
patternsfromcert mxr 3.12 and later cert_gentime2formattedascii mxr 3.2 and later cert_hexify mxr 3.2 and later cert_importcachain mxr 3.2 and later cert_importcerts mxr 3.2 and later cert_isrootdercert mxr 3.8 and later cert_isusercert mxr 3.6 and later cert_keyfromdercrl mxr 3.4 and later ...
NSS_3.12_release_notes.html
ert.h) cert_findcrlentryreasonexten (see cert.h) cert_findcrlnumberexten (see cert.h) cert_findnameconstraintsexten (see cert.h) cert_getclassicocspdisabledpolicy (see cert.h) cert_getclassicocspenabledhardfailurepolicy (see cert.h) cert_getclassicocspenabledsoftfailurepolicy (see cert.h) cert_getpkixverifynistrevocationpolicy (see cert.h) cert_getusepkixforvalidation (see cert.h) cert_getvaliddns
patternsfromcert (see cert.h) cert_newtempcertificate (see cert.h) cert_setocsptimeout (see certhigh/ocsp.h) cert_setusepkixforvalidation (see cert.h) cert_pkixverifycert (see cert.h) hash_gettype (see sechash.h) nss_initwithmerge (see nss.h) pk11_createmergelog (see pk11pub.h) pk11_creategenericobject (see pk11pub.h) pk11_createpbev2algorithmid (see pk11pub.h) pk11_destroymergelog (see pk11pub.h) pk11_g...
NSS environment variables
3.12.3 nss_use_shexp_in_cert_name boolean (any value to enable) tells nss to allow shell-style wildcard
patterns in certificates to match ssl server host names.
NSS functions
vocationpolicy mxr 3.12 and later cert_getprevgeneralname mxr 3.10 and later cert_getprevnameconstraint mxr 3.10 and later cert_getsloptime mxr 3.2 and later cert_getsslcacerts mxr 3.2 and later cert_getstatename mxr 3.2 and later cert_getusepkixforvalidation mxr 3.12 and later cert_getvaliddns
patternsfromcert mxr 3.12 and later cert_gentime2formattedascii mxr 3.2 and later cert_hexify mxr 3.2 and later cert_importcachain mxr 3.2 and later cert_importcerts mxr 3.2 and later cert_isrootdercert mxr 3.8 and later cert_isusercert mxr 3.6 and later cert_keyfromdercrl mxr 3.4 and later ...
sslcrt.html
[a-z] matches any character between a and z [^az] matches any character except a or z ~ followed by another shell expression removes any
pattern matching the shell expression from the match list (foo|bar) matches either the substring foo or the substring bar.
NSS_3.12.3_release_notes.html
nss_use_shexp_in_cert_name boolean (any non-empty value to enable) tells nss to allow shell-style wildcard
patterns in certificates to match ssl server host names.
Pork Tool Development
replacement for the "renamer" tool, a diff file is generated as the ast is traversed, using the visitor
pattern.
Pork Tools
if (!*aresult) return ns_error_failure; return ns_ok; } nsifoo* getter() { nsifoo *result = null; // aresult below is kept for complicated cases // typically it wont be needed and can be removed nsifoo **aresult = &result; // *aresult
patterns are replaced with result result = ...
SpiderMonkey Internals
nan-boxing is a technique based on the fact that in ieee-754 there are 2**53-2 different bit
patterns that all represent nan.
JSVAL_TO_INT
the jsval encoding of the integer 4, for instance, is not ((jsval) 4) but some other
pattern of bits.
JSVAL_TRUE
jsval values must not be used as c true/false values; there is no guarantee that the c bit-
pattern of any particular jsval is zero or nonzero.
JS_GetNaNValue
while the ieee standard defines many nan bit-
patterns, they are indistinguishable in javascript, so in effect there's only one nan.
Running Automated JavaScript Tests
running jstest in a browser jstests also runs on browser, with the following command: ./mach jstestbrowser to run specific test, you can use --filter=
pattern command-line argument, where
pattern is a regexp
pattern that is tested against file:///{path_to_obj_dir}/dist/test-stage/jsreftest/tests/jsreftest.html?test={relative_path_to_test_from_js/src/tests} string: ./mach jstestbrowser --filter=
pattern running jstests on treeherder when viewing treeherder after a push to the mozilla repositories, jstests run in the browser are shown as r(j) meaning ...
Shell global objects
functions available only in debug build if --fuzzing-safe is not specified and parseregexp(
pattern[, flags[, match_only]) parses a regexp
pattern and returns a tree, potentially throwing.
The Rust programming language
in addition, rust offers zero-cost abstractions, move semantics, guaranteed memory safety, threads with no data races, trait-based generics,
pattern matching, type inference, and efficient c bindings, with a minimum runtime size.
History Service Design
the querying system allows to extract slices of data based on common
patterns, this is directly usable by the end user, but also by implementers to provide a variety of nice features.
XPCOM array guide
introduction array types mozilla has many array classes because each array is optimized for a particular usage
pattern.
Using XPCOM Components
the singleton design
pattern that is used to create services is described in xpcom services.
Detailed XPCOM hashtable guide
nsdatahashtable/nsinterfacehashtable/nsclasshashtable - high-level c++ wrappers around pldhash; simplifies the common usage
pattern mapping a simple keytype to a simple datatype; client does not need to declare or manage an entry class; nsdatahashtable datatype is a scalar such as pruint32; nsinterfacehashtable datatype is an interface; nsclasshashtable datatype is a class pointer owned by the hashtable.
Observer Notifications
if your component requires access to the user profile, or any services which require access to the profile (preferences, bookmarks, and so on) then a common
pattern is to register with the nsicategorymanager for the app-startup topic which can be done in the component's registration code, and then in that notification register with the observer service for the profile-after-change notification.
nsAutoRefTraits
for example: ns_specialize_template class nsautoreftraits<prfiledesc> : public nspointerreftraits<prfiledesc> { public: static void release(prfiledesc *ptr) { pr_close(ptr); } }; or ns_specialize_template class nsautoreftraits<fc
pattern> : public nspointerreftraits<fc
pattern> { public: static void release(fc
pattern *ptr) { fc
patterndestroy(ptr); } static void addref(fc
pattern *ptr) { fc
patternreference(ptr); } }; nsautoreftraits is described in xpcom/base/nsautoref.h.
RefPtr
and it's not clear what happens when the compiler does accept this
pattern.
nsIJSCID
return value see also see components.classes for usage
patterns of the createinstance() and getservice() methods.
Frequently Asked Questions
no matter which code
pattern you use to solve this problem, you should comment it, e.g., // warning: this getter doesn't addref() its result.
Filelink Providers
example: <form id="provider-form" onsubmit="return false;"> <label for="username">username:</label> <input id="username" type="text" required="true" /> <label for="server">server:</label> <input id="server" type="text" required="true" /> <label for="port">port:</label> <input id="port"
pattern="[0-9]+" required="true" /> </form> the form is expected to use html5 form validation.
MailNews Protocols
rss is implemented in js and doesn't follow the same
pattern as the c++ protocols.
Network request list - Firefox Developer Tools
blocking specific urls if you want to view your page as it would look without a resource (e.g., if it were blocked by the browser or an extension), you can block requests matching
patterns you specify.
AudioParam - Web APIs
an audioparam can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific
pattern.
Beacon API - Web APIs
not only do these techniques represent poor coding
patterns, some of them are unreliable and result in the perception of poor page load performance for the next navigation.
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_create
pattern.png'; img.onload = function() { ctx.imagesmoothingquality = 'low'; ctx.drawimage(img, 0, 0, 300, 150); }; result specifications specification status comment html living standardthe definition of 'imagesmoothingquality' in that specification.
Compositing example - Web APIs
dth = size * 2; proto.canvas.height = size * 2; proto.fillstyle = color1; // top-left proto.fillrect(0, 0, size, size); proto.fillstyle = color2; // top-right proto.fillrect(size, 0, size, size); proto.fillstyle = color2; // bottom-left proto.fillrect(0, size, size, size); proto.fillstyle = color1; // bottom-right proto.fillrect(size, size, size, size); var
pattern = proto.create
pattern(proto.canvas, "repeat");
pattern.data = proto.canvas.todataurl(); return
pattern; }; var op_8x8 = createinterlace(8, "#fff", "#eee"); ...
Canvas API - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvas
pattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
DOMException - Web APIs
(legacy code value: 11 and legacy constant name: invalid_state_err) syntaxerror the string did not match the expected
pattern.
Document.mozSetImageElement() - Web APIs
each time the function is called, the square is a different color (its red component is increased each time), so each time the user clicks the element, the background is filled with a brighter and brighter
pattern of red tiles.
Document Object Model (DOM) - Web APIs
helement svgglyphrefelement svggradientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svg
patternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtrefelement svgtspanelement svguseelement svgunknownelemen...
The HTML DOM API - Web APIs
canvasgradient canvas
pattern canvasrenderingcontext2d imagebitmap imagebitmaprenderingcontext imagedata offscreencanvas offscreencanvasrenderingcontext2d path2d textmetrics media interfaces the media interfaces provide html access to the contents of the media elements: <audio> and <video>.
Key Values - Web APIs
if more function keys are available, their names continue the
pattern here by continuing to increment the numeric portion of each key's name, so that, for example, "f24" is a valid key value.
MSSiteModeEvent - Web APIs
*note that as of microsoft edge, the createevent()/initevent() constructor
pattern for synthetic events is deprecated.
Notification - Web APIs
notification.vibrate read only specifies a vibration
pattern for devices with vibration hardware to emit.
PaymentRequest.show() - Web APIs
usage notes the most common
patterns for using show() involve either the async/await syntax or the use of show().then().catch() to handle the response and any possible rejection.
Payment Request API - Web APIs
the browser can automatically suggest which card to use based on past usage
patterns or restrictions from the merchant (e.g, "we only accept visa or mastercard"), or allow the user to say which is their default/favorite card.
ResizeObserver() - Web APIs
the callback will generally follow a
pattern along the lines of: function(entries, observer) { for (let entry of entries) { // do something to each entry // and possibly something to the observer itself } } examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { ...
Resize Observer API - Web APIs
the code will usually follow this kind of
pattern (taken from resize-observer-border-radius.html): const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.bo...
SVGUnitTypes - Web APIs
the svgunittypes interface defines a commonly used set of constants used for reflecting gradientunits,
patterncontentunits and other similar attributes.
Using the Screen Capture API - Web APIs
generally, the browser will provide an image which obscures the hidden portion of the logical display surface in some way, such as by blurring or replacing with a color or
pattern.
SpeechGrammar - Web APIs
the speechgrammar interface of the web speech api represents a set of words or
patterns of words that we want the recognition service to recognize.
SpeechGrammarList - Web APIs
the speechgrammarlist interface of the web speech api represents a list of speechgrammar objects containing words or
patterns of words that we want the recognition service to recognize.
ValidityState - Web APIs
patternmismatch read only a boolean that is true if the value does not match the specified
pattern, and false if it does match.
WebRTC API - Web APIs
establishing a connection: the perfect negotiation
pattern perfect negotiation is a design
pattern which is recommended for your signaling process to follow, which provides transparency in negotiation while allowing both sides to be either the offerer or the answerer, without significant coding needed to differentiate the two.
WebXR application life cycle - Web APIs
life cycle outline most applications using webxr will follow a similar overall design
pattern: check to see if the user's device and browser are both capable of presenting the xr experience you want to provide.
Advanced techniques: Creating and sequencing audio - Web APIs
let's create another async function to set up the sample — we can combine the two async functions in a nice promise
pattern to perform further actions when this file is loaded and buffered: async function setupsample() { const filepath = 'dtmf.mp3'; const sample = await getfile(audioctx, filepath); return sample; } note: you can easily modify the above function to take an array of files and loop over them to load more than one sample.
Visualizations with Web Audio API - Web APIs
creating a waveform/oscilloscope to create the oscilloscope visualisation (hat tip to soledad penadés for the original code in voice-change-o-matic), we first follow the standard
pattern described in the previous section to set up the buffer: analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display: canvasctx.clearrect(0, 0, width, height); we now define the draw() function: function draw() { in here, we us...
Web Audio API - Web APIs
it can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific
pattern.
Window.getComputedStyle() - Web APIs
it's likely the defaultview
pattern was a combination of folks not wanting to write a testing spec for window and making an api that was also usable in java.
XRSession.requestAnimationFrame() - Web APIs
this example demonstrates a design
pattern that ensures seamless transition between non-immersive animations created via window.requestanimationframe and immersive xr animations.
ARIA: article role - Accessibility
examples the restaurant recommendations feed display along with its separate documentation from the wai-aria 1.1 authoring practices feed design
pattern specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'article' in that specification.
ARIA: tab role - Accessibility
the common user experience
pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs.
-moz-image-rect - CSS: Cascading Style Sheets
the other corners follow a similar
pattern: #box3 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:136px; position:absolute; } html the html is quite simple: <div...
Grid wrapper - CSS: Cascading Style Sheets
the grid wrapper
pattern is useful for aligning grid content within a central wrapper, while also allowing items to break out and align to the edge of the containing element or page when desired.
Linear-gradient Generator - CSS: Cascading Style Sheets
ortant; } /** * main container */ #container { width: 1000px; height: 100%; display: table; margin: 0 auto; } #gradient-container { width: 450px; height: 250px; min-width: 8px; min-height: 8px; margin: 100px auto; border: 1px solid #ddd; position: relative; } #gradient-container[data-alpha="true"]:after { content: ""; width: 100%; height: 100%; background: url('images/canvas-
pattern.png'); position: absolute; z-index: -1; } /** * gradient axis */ .gradient-axis { width: 125%; height: 4px; margin: -3px 0 0 0; border: 1px solid #ccc; position: absolute; top: 50%; left: 0; opacity: 0.5; } .gradient-axis[data-active='true'] { opacity: 1; z-index: 1; } .gradient-axis:after { content: ""; width: 25px; height: 100%; background-color: #ccc; position: absolute...
grid-template-columns - CSS: Cascading Style Sheets
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring
pattern to be written in a more compact form.
grid-template-rows - CSS: Cascading Style Sheets
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring
pattern to be written in a more compact form.
mask-border - CSS: Cascading Style Sheets
| <'mask-border-repeat'> | <'mask-border-mode'> examples setting a bitmap-based mask border in this example, we will mask an element's border with a diamond
pattern.
repeat() - CSS: Cascading Style Sheets
the repeat() css function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring
pattern to be written in a more compact form.
text-emphasis-position - CSS: Cascading Style Sheets
in html, this can be done with the following
pattern: em { text-emphasis: dot; /* set text-emphasis for <em> elements */ } em rt { display: none; /* hide ruby inside <em> elements */ } specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
CSS: Cascading Style Sheets
ificity, inheritance and the cascade css units and values box model and margin collapse the containing block stacking and block-formatting contexts initial, computed, used, and actual values css shorthand properties css flexible box layout css grid layout media queries animation cookbook the css layout cookbook aims to bring together recipes for common layout
patterns, things you might need to implement in your sites.
Strings (str) - EXSLT
str:concat()str:concat() returns a string containing all the string values in a node-set concatenated together.str:split()str:split() splits a string using a
pattern string to determine where the splits should occur, returning a node-set containing the resulting strings.str:tokenize()str:tokenize() splits a string using a set of characters as delimiters that determine where the splits should occur, returning a node-set containing the resulting strings.
Ajax - Developer guides
as well as this, it can also be used to test addressed nodes within a document to determine whether they match a
pattern or not.
HTML5 Parser - Developer guides
if you tested your site only with gecko 1.x or webkit (for example, firefox-only intranets or webkit-oriented mobile sites), then you might have tags that match this
pattern, and they will behave differently with gecko 2.
Introduction to Web development - Developer guides
eloquent javascript — a comprehensive guide to intermediate and advanced javascript methodologies intermediate a re-introduction to javascript — a recap on the javascript programming language aimed at intermediate-level developers essential javascript design
patterns — an introduction to essential javascript design
patterns introduction to object-oriented javascript — learn about the javascript object model.
Developer guides
events developer guide events refer to two things: a design
pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page; and the naming, characterization, and use of a large number of incidents of different types.
<input type="color"> - HTML: Hypertext Markup Language
because users can write colors in many different ways (such as rgb(255, 255, 0)), one way to work around this is to set a
pattern attribute equal to either #[0-9a-f]{6} or #[0-9a-fa-f]{6} (preferably the latter because some users may not expect a different result with just a letter-case change) and set a placeholder attribute equal to a color representing the expected format of the user's input, such as #ff0000.
Content-Location - HTTP
ccept header: request header response header accept: application/json, text/json content-location: /documents/foo.json accept: application/xml, text/xml content-location: /documents/foo.xml accept: text/plain, text/* content-location: /documents/foo.txt these urls are examples — the site could serve the different filetypes with any url
patterns it wishes, such as a query string parameter: /documents/foo?format=json, /documents/foo?format=xml, and so on.
Grammar and types - JavaScript
var obj = { // __proto__ __proto__: theprotoobj, // shorthand for ‘handler: handler’ handler, // methods tostring() { // super calls return 'd ' + super.tostring(); }, // computed (dynamic) property names [ 'prop_' + (() => 42)() ]: 42 }; regexp literals a regex literal (which is defined in detail later) is a
pattern enclosed between slashes.
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).
Character classes - JavaScript
so to match a
pattern across multiple lines, the character set [^] can be used — it will match any character including newlines.
Quantifiers - JavaScript
for example, given a string like "some <foo> <bar> new </bar> </foo> thing": /<.*>/ will match "<foo> <bar> new </bar> </foo>" /<.*?>/ will match "<foo>" examples repeated
pattern var wordendingwithas = /\w+a+\b/; var delicatemessage = "this is spartaaaaaaa"; console.table(delicatemessage.match(wordendingwithas)); // [ "spartaaaaaaa" ] counting characters var singleletterword = /\b\w\b/g; var notsolongword = /\b\w{1,6}\b/g; var loooongword = /\b\w{13,}\b/g; var sentence = "why do i have to learn multiplication table?"; console.table(sentence.match(singleletterword))...
Using Promises - JavaScript
a variant of this is the promise constructor anti-
pattern, which combines nesting with redundant use of the promise constructor to wrap code that already uses promises.
Memory Management - JavaScript
v8 engine flags the max amount of available heap memory can be increased with a flag: node --max-old-space-size=6000 index.js we can also expose the garbage collector for debugging memory issues using a flag and the chrome debugger: node --expose-gc --inspect index.js see also ibm article on "memory leak
patterns in javascript" (2007) kangax article on how to register event handler and avoid memory leaks (2010) performance ...
Functions - JavaScript
when functions are used only once, a common
pattern is an iife (immediately invoked function expression).
Array.prototype.map() - JavaScript
when not to use map() since map builds a new array, using it when you aren't using the returned array is an anti-
pattern; use foreach or for-of instead.
Intl - JavaScript
locale identification and negotiation the internationalization constructors as well as several language sensitive methods of other constructors (listed under see also) use a common
pattern for identifying locales and determining the one they will actually use: they all accept locales and options arguments, and negotiate the requested locale(s) against the locales they support using an algorithm specified in the options.localematcher property.
JSON.parse() - JavaScript
gerous.lastindex = 0; if (rx_dangerous.test(text)) { text = text.replace(rx_dangerous, function(a) { return ( "\\u" + ("0000" + a.charcodeat(0).tostring(16)).slice(-4) ); }); } // in the second stage, we run the text against regular expressions that look // for non-json
patterns.
Object.defineProperty() - JavaScript
var
pattern = { get() { return 'i always return this string, ' + 'whatever you have assigned'; }, set() { this.myname = 'this is my name string'; } }; function testdefinesetandget() { object.defineproperty(this, 'myproperty',
pattern); } var instance = new testdefinesetandget(); instance.myproperty = 'test'; console.log(instance.myproperty); // i always re...
Object.freeze() - JavaScript
use the
pattern on a case-by-case basis based on your design when you know the object contains no cycles in the reference graph, otherwise an endless loop will be triggered.
Object - JavaScript
this
pattern can be used for any prototype, such as node.prototype, function.prototype, etc.
RegExp.prototype[@@search]() - JavaScript
class myregexp extends regexp { constructor(str) { super(str) this.
pattern = str; } [symbol.search](str) { return str.indexof(this.
pattern); } } var re = new myregexp('a+b'); var str = 'ab a+b'; var result = str.search(re); // string.prototype.search calls re[@@search].
RegExp.prototype[@@split]() - JavaScript
the [@@split]() method still splits on every match of this regexp
pattern (or, in the syntax above, regexp), until the number of split items match the limit or the string falls short of this
pattern.
RegExp.$1-$9 - JavaScript
in the replacement text, the script uses $1 and $2 to indicate the results of the corresponding matching parentheses in the regular expression
pattern.
RegExp.prototype.sticky - JavaScript
perhaps because of the bug, the es2015 specification specifically calls out the fact that: when the y flag is used with a
pattern, ^ always matches only at the beginning of the input, or (if multiline is true) at the beginning of a line.
Nullish coalescing operator (??) - JavaScript
0; console.log(vala); // "default for a" console.log(valb); // "" (as the empty string is not null or undefined) console.log(valc); // 42 assigning a default value to a variable earlier, when one wanted to assign a default value to a variable, a common
pattern was to use the logical or operator (||): let foo; // foo is never assigned any value so it is still undefined let somedummytext = foo || 'hello!'; however, due to || being a boolean logical operator, the left hand-side operand was coerced to a boolean for the evaluation and any falsy value (0, '', nan, null, undefined) was not returned.
function declaration - JavaScript
conditionally created functions functions can be conditionally declared, that is, a function statement can be nested within an if statement, however the results are inconsistent across implementations and therefore this
pattern should not be used in production code.
let - JavaScript
ounter, }); }; thing.prototype.showpublic = function() { return this.someproperty; }; thing.prototype.showprivate = function() { return privatescope.get(this).hidden; }; } console.log(typeof privatescope); // "undefined" var thing = new thing(); console.log(thing); // thing {someproperty: "foo"} thing.showpublic(); // "foo" thing.showprivate(); // 1 the same privacy
pattern with closures over local variables can be created with var, but those need a function scope (typically an iife in the module
pattern) instead of just a block scope like in the example above.
Image file type and format guide - Web media technologies
for example, the following code represents an xbm image which is 8 pixels by 8 pixels, with those pixels in a black-and-white checkerboard
pattern: #define square8_width 8 #define square8_height 8 static unsigned char square8_bits[] = { 0xaa, 0x55, 0xaa, 0x55, 0xaa, 0x55, 0xaa, 0x55 }; mime type image/xbm, image-xbitmap file extension(s) .xbm specification none browser compatibility firefox 1–3.5, internet explorer 1–5 maximum dimensions unlimited supported color ...
class - SVG: Scalable Vector Graphics
se> <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> <font> <foreignobject> <g> <glyph> <glyphref> <image> <line> <lineargradient> <marker> <mask> <missing-glyph> <path> <
pattern> <polygon> <polyline> <radialgradient> <rect> <stop> <svg> <switch> <symbol> <text> <textpath> <title> <tref> <tspan> <use> ...
clip-path - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <
pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-...
clip - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignobject>, <
pattern>, <marker> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- auto clipping --> <svg x="0" width="10" height="10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4"...
color-interpolation - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <
pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> usage notes value auto | srgb | linearrgb default value srgb animatable yes auto indicates that the user agent can choose either the srgb or linearrgb spaces for color interpolation.
color-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <
pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-colo...
enable-background - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <a>, <defs>, <glyph>, <g>, <marker>, <mask>, <missing-glyph>, <
pattern>, <svg>, <switch>, and <symbol> context notes value accumulate | new [ <x> <y> <width> <height> ]?
fill - SVG: Scalable Vector Graphics
for shapes and text it's a presentation attribute that defines the color (or any svg paint servers like gradients or
patterns) used to paint the element; for animation it defines the final state of the animation.
mask - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <
pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> usage notes value see the css property mask default value none animatable yes specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
onclick - SVG: Scalable Vector Graphics
thirty-seven elements are using this attribute: <a>, <altglyph>, <animate>, <animatemotion>, <animatetransform>, <circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <
pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none ...
pointer-events - SVG: Scalable Vector Graphics
fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <
pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | none default value visiblepainted animatable yes for a detailed explanation of each possible value, have a look at the css pointer-event...
stroke-dasharray - SVG: Scalable Vector Graphics
the stroke-dasharray attribute is a presentation attribute defining the
pattern of dashes and gaps used to paint the outline of the shape; note: as a presentation attribute, stroke-dasharray can be used as a css property.
stroke - SVG: Scalable Vector Graphics
the stroke attribute is a presentation attribute defining the color (or any svg paint servers like gradients or
patterns) used to paint the outline of the shape; note: as a presentation attribute stroke can be used as a css property.
systemLanguage - SVG: Scalable Vector Graphics
35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <
pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
transform - SVG: Scalable Vector Graphics
also, as a legacy from svg 1.1, <lineargradient> and <radialgradient> support the gradienttransform attribute, and <
pattern> supports the
patterntransform attribute, both of which act exactly like the transform attribute.
xlink:arcrole - SVG: Scalable Vector Graphics
person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <
pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resource that describes the intended property.
xlink:type - SVG: Scalable Vector Graphics
twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <
pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage notes value simple default value simple animatable no simple this value specifies that the referred resource is a simple link.
SVG Attribute reference - SVG: Scalable Vector Graphics
ing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength
patterncontentunits
patterntransform
patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specul...
<a> - SVG: Scalable Vector Graphics
aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<a>' in that specification.
<defs> - SVG: Scalable Vector Graphics
ke-width, transform, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<defs>' in that specification.
<g> - SVG: Scalable Vector Graphics
-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface.
<marker> - SVG: Scalable Vector Graphics
aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
<mask> - SVG: Scalable Vector Graphics
stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment css masking module level 1the definition of '<mask>' in that specification.
<missing-glyph> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y dom interface this element implements the svgmissingglyphelement interface.
<svg> - SVG: Scalable Vector Graphics
-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<symbol> - SVG: Scalable Vector Graphics
-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <
pattern>, <script>, <style>, <switch>, <text>, <view> note: a <symbol> element itself is not meant to be rendered.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implementation status unknown display behavior of <style> defined via ua style sheet implementation status unknown !important user agent style rules controlling never-rendered elements implementation status unknown :focus and ::selection styles implementation status unknown geometry change notes x and y attributes removed from <
pattern> and <filter> implementation status unknown auto value of width and height computes to 0 but 100% on <svg> not implemented coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) impl...
SVG Tutorial - SVG: Scalable Vector Graphics
introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients
patterns texts basic transformations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials.
format-number - XPath
syntax format-number(number ,
pattern [,decimal-format] ) arguments number the number to be formatted
pattern a string in the format of the jdk 1.1 decimalformat class.
number - XPath
if the string does not match this
pattern, then the string is converted to nan.
Index - XPath
it can also be used to test addressed nodes within a document to determine whether they match a
pattern or not.
XPath
it can also be used to test addressed nodes within a document to determine whether they match a
pattern or not.