Search completed in 1.41 seconds.
465 results for "pattern":
Your results are loading. Please wait...
Patterns - SVG: Scalable Vector Graphics
WebSVGTutorialPatterns
« 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
WebSVGElementpattern
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.createpattern() method of the canvas 2d api creates a pattern using the specified image and repetition.
... this method returns a canvaspattern.
...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 svgpatternelement 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/svgpatternelement" 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">svgpatternelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this inte...
... svgpatternelement.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 canvaspattern.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 canvaspattern 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 canvaspattern interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the canvasrenderingcontext2d.createpattern() method.
... canvaspattern.settransform() applies an svgmatrix or dommatrix representing a linear transform to the pattern.
... specifications specification status comment html living standardthe definition of 'canvaspattern' 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
WebHTMLElementinputurl
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
WebHTMLElementinputemail
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
WebHTMLElementinputtel
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
WebAPIIndex
540 canvaspattern api, canvas, interface, reference the canvaspattern interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the canvasrenderingcontext2d.createpattern() method.
... 541 canvaspattern.settransform() api, canvas, canvaspattern, experimental, method, reference the canvaspattern.settransform() method uses an svgmatrix object as the pattern's transformation matrix and invokes it on the pattern.
... 555 canvasrenderingcontext2d.createpattern() api, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.createpattern() 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
WebHTMLElementinputpassword
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
WebHTMLElementinput
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
WebSVGIndex
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
WebHTMLElementinputsearch
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
WebHTMLElementinputtext
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 apattern); nsiutf8stringenumerator findentries(in string apattern); 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 apattern ); parameters apattern 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 matchpattern only invoke the listener for urls that match one of the patterns.
... to specify match patterns, first import the "matchpattern.jsm" module, then construct a matchpattern.
... the matchpattern constructor accepts: either: a string defining a single pattern or: an array of such strings cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/developer.mozilla.org/*"); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["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(matchpattern) this context occurs when the menu is invoked on pages with particular urls.
... matchpattern is a match pattern string or an array of match pattern strings.
... when matchpattern 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.
... urlpatterns = [ 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, designpattern, 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
WebSVGAttributeheight
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
WebSVGAttributehref
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
WebSVGAttributewidth
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
WebSVGAttributex
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
WebSVGAttributey
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
MozillaTechXPCOMIndex
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
WebAPINavigatorvibrate
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
WebHTMLElementinputmonth
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".
Setting up your own test automation environment - Learn web development
the code you need should follow the pattern seen below.
...the code you need should follow the pattern seen below.
...the code you need should follow the pattern seen below.
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 canvaspattern 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 canvaspattern 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
WebAPINDEFReaderscan
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
WebEXSLTstrsplit
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
WebGuideEvents
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
WebHTMLElementinputtime
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
WebHTMLIndex
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
WebSVGElement
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 subpatterns 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, urlpattern: 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 xmlnspattern = /^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 (xmlnspattern.test(att.name) && xmlnspattern.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 xmlnspattern = /^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]; xmlnspattern.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 ( xmlnspattern.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; } ...
Creating regular expressions for a microsummary generator - 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.
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...
::-ms-fill - Archive of obsolete content
-ms-bar shows animated dots that flow in a bar pattern.
... -ms-ring shows animated dots that flow in a ring pattern.
Common causes of memory leaks in extensions - Extensions
this page explains coding patterns that cause extension to cause memory leaks.
... strict mode also excludes several other error-prone code patterns.
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
MozillaTechXPCOMGuide
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
WebAPINode
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.
ServiceWorkerRegistration.showNotification() - Web APIs
vibrate: a vibration pattern to run with the display of the notification.
... a vibration pattern can be an array with as few as one member.
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
WebAPI
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 canvaspattern 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 svgpatternelement 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.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; } repeat notation takes the track listing, and uses it to create a repeating pattern of tracks.
...this pattern will be repeated five times.
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
WebGuideIndex
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
WebHTMLElementinputdate
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
WebHTMLElementinputrange
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
WebSVGAttributein
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
WebSVGAttributeviewBox
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
WebSVGElementfeTile
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 antipattern 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.
<xsl:template> - XSLT: Extensible Stylesheet Language Transformations
WebXSLTElementtemplate
syntax <xsl:template match=pattern name=name mode=name priority=number> <xsl:param> [optional] template </xsl:template> required attributes none.
... optional attributes match specifies a pattern that determines the elements for which this template should be used.
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.
High-Level APIs - Archive of obsolete content
page-mod run scripts in the context of web pages whose url matches a given 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.
Low-Level APIs - Archive of obsolete content
util/match-pattern test strings containing urls against simple patterns.
Chrome Authority - Archive of obsolete content
these warnings will serve to guide developers to use the correct pattern.
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 ...
Add-on SDK - Archive of obsolete content
modify web pages modify pages matching a url pattern or dynamically modify a particular tab.
Bootstrapped extensions - Archive of obsolete content
edward lee shows off some helpful coding patterns and examples you can use in your bootstrapped add-on.
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 = ['createpattern', '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...
Extension Etiquette - Archive of obsolete content
version numbering please follow the mozilla pattern: major version dot current incarnation dot security/bugfix release (like 1.0.7).
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
this document is a guide to common code patterns that may need to change to work with frozen linkage.
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.
Custom XUL Elements with XBL - Archive of obsolete content
there are two conflicting patterns that you should always keep in mind: encapsulation and separation of presentation and logic.
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 ...
JXON - Archive of obsolete content
the following table shows the corresponding conversion patterns between xml and json according to the third algorithm.
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.
Dehydra Frequently Asked Questions - Archive of obsolete content
initially dehydra was written as an easy way to look for patterns in control flow graphs (cfgs).
importUserCertificates - Archive of obsolete content
if the string is null and no certificate with the same dn exists in the user's certificate store, personal security manager uses the following pattern to derive the nickname: <tt><common name>'s <issuer name> id</tt>.
Metro browser chrome tests - Archive of obsolete content
files that don't match this pattern will be ignored by the test harness.
RDF Datasource How-To - Archive of obsolete content
starting with the resource that corresponds to the tree element, http://foo.bar.com/, the graph will be traversed and content will be constructed using the pattern specified within the template tags.
String Rosetta Stone - Archive of obsolete content
find a substring nsstring findinreadable(const nsastring& pattern, nsastring::const_iterator start, nsastring::const_iterator end, nsstringcomparator& acomparator = nsdefaultstringcomparator()) std::string size_type find(const basic_string& s, size_type pos = 0) const size_type find(const chart* s, size_type pos, size_type n) const size_type find(const chart* s, size_type pos = 0) const size_type find(chart c, size_type pos = 0) const qstring int qstring::indexof ( const qstring & str, int from = 0, qt::casesensitivity cs = qt::casesensitive ) const format a printf style string nsstring appendprintf() std::string n/a qstring qstring & qstring::sprintf ( const char * cformat, ...
Anonymous Content - Archive of obsolete content
this pattern continues all the way up the binding chain.
Building accessible custom components in XUL - Archive of obsolete content
role declarations are a little confusing at first glance, but they all follow the same pattern.
Introduction to XUL - Archive of obsolete content
however, mozilla supports extended dom functionality for the xul content model, patterned after the html extensions.
Sorting Results - Archive of obsolete content
this method of sorting a seq works best for the simple query syntax since it is obvious how the starting ref relates to the end member results (they are just the children), or for extended syntax queries that follow a similar pattern.
Template Builder Interface - Archive of obsolete content
a common pattern is to use the following: var rdf = components.classes["@mozilla.org/rdf/rdf-service;1"].
Template Logging - Archive of obsolete content
the first example generates no error and is a common template query pattern.
XUL accessibility guidelines - Archive of obsolete content
to enforce this pattern some forms provide three form fields.
The Implementation of the Application Object Model - Archive of obsolete content
if this approach isn't taken now, then we'll fall back into our old pattern.
Troubleshooting XForms Forms - Archive of obsolete content
alternatively, for a long term fix you can enter an exception pattern in the anti-xss protection exceptions text area.
Implementation Status - Archive of obsolete content
ment fails to apply to child attributes 342319; 6.1.5 calculate supported 6.1.6 constraint supported 6.1.7 p3ptype unsupported 279049; 6.2.1 atomic datatype partial we will support simpletype's using length, minlength, maxlength, pattern, maxinclusive, mininclusive, maxexclusive, minexclusive, totaldigits, and fractiondigits 7.
Parsing microformats in JavaScript - Archive of obsolete content
defaultgetter() uses the microformat patterns to decide what the correct text for a given microformat property is.
RDF in Mozilla FAQ - Archive of obsolete content
the "simple" form, which is currently the most common form in the mozilla codebase, and the "extended" form, which allows for sophisticated pattern matching against the rdf graph.
The Business Benefits of Web Standards - Archive of obsolete content
the blogging community are particularly dynamic in this respect where on many platforms including wordpress, textpattern and habari, the site theme is a complete and discrete entity in its own right.
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.
Anatomy of a video game - Game development
not surprisingly, this pattern corresponds to how a game engine is programmed.
Examples - Game development
canvas airport simulation animated map showing planes taking off and landing at airports, along with flight path patterns.
3D games on the Web - Game development
under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just html.
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.
asm.js - Game development
they can consult the asm.js spec and know that it will run fast if they adhere to asm.js patterns.
Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
multiple domains, however, is an anti-pattern, as dns lookups slow initial load times.
IIFE - MDN Web Docs Glossary: Definitions of Web-related terms
(function () { statements })(); it is a design pattern which is also known as a self-executing anonymous function and contains two major parts: the first is the anonymous function with lexical scope enclosed within the grouping operator ().
Lazy load - MDN Web Docs Glossary: Definitions of Web-related terms
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.
Random Number Generator - MDN Web Docs Glossary: Definitions of Web-related terms
a prng (pseudorandom number generator) is an algorithm that outputs numbers in a complex, seemingly unpredictable pattern.
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: tables - Learn web development
there are a number of ways that you can achieve this, but i suggest following similar patterns as used in the tutorial to do the following things.
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.
Test your skills: Flexbox - Learn web development
below are four common design patterns which you might use flexbox to create, your task is to build them.
Introduction to CSS layout - Learn web development
there are however useful techniques for certain layout patterns that rely on the position property.
Supporting older browsers - Learn web development
you can choose the one that makes the most sense for the layout pattern you need to create.
create fancy boxes - Learn web development
if you want to see some crazy examples, take a look at lea verou's css patterns.
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.
Getting started with HTML - Learn web development
empty elements not all elements follow the pattern of an opening tag, content, and a closing tag.
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.
Making asynchronous programming easier with async and await - Learn web development
there is a pattern that can mitigate this problem — setting off all the promise processes by storing the promise objects in variables, and then awaiting them all afterwards.
Looping code - Learn web development
this shows a loop is used to iterate over the items in an array and do something with each of them — a very common pattern in javascript.
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.
Fetching data from the server - Learn web development
you will basically need to use the same pattern as you saw earlier in the xhr-basic.html example.
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.
Website security - Learn web development
the most common pattern at this time is to only display the last 4 digits of a credit card number.
Getting started with Ember - Learn web development
developers are then more easily able to switch between projects and applications without having to completely relearn the architecture, patterns, conventions, etc.
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.
React interactivity: Events and state - Learn web development
deleting a task deleting a task will follow a similar pattern to toggling its completed state: we need to define a function for updating our state, then pass that function into <todo/> as a prop and call it when the right event happens.
Getting started with Svelte - Learn web development
it's main current disadvantages are that it is a young framework — its ecosystem is therefore more limited in terms of tooling, support, plugins, clear usage patterns, etc.
Handling common accessibility problems - Learn web development
most modern browsers follow the tab pattern described above (you can also do shift + tab to move backwards through the focusable elements), but some browsers have their own idiosyncracies: firefox for the mac doesn't do tabbing by default.
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.
Command line crash course - Learn web development
this allows you to run an operation against a potentially large number of files at once, all of which match the specified pattern.
Accessibility information for UI designers and developers
or in this one, you could consider using patterns besides colored areas: again, if people are unable to distinguish the colors, they can rely on the patterns instead.
Browser chrome tests
files that don't match this pattern will be ignored by the test harness.
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_getvaliddnspatternsfromcert 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_getvaliddnspatternsfromcert (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_getvaliddnspatternsfromcert 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
MozillaTechXPCOMGuideArrays
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<fcpattern> : public nspointerreftraits<fcpattern> { public: static void release(fcpattern *ptr) { fcpatterndestroy(ptr); } static void addref(fcpattern *ptr) { fcpatternreference(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.
Animating CSS properties - Firefox Developer Tools
if you scroll through this, you'll see a pattern like this: this is showing us the rendering waterfall.
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.clip() - Web APIs
only those parts of the checkerboard pattern that are within the clipping region get drawn.
CanvasRenderingContext2D.getLineDash() - Web APIs
the getlinedash() method of the canvas 2d api's canvasrenderingcontext2d interface gets the current line dash pattern.
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_createpattern.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.createpattern(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 canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
DOMError - Web APIs
WebAPIDOMError
syntaxerror the string did not match the expected pattern.
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.
Examples of web and XML development using the DOM - Web APIs
wherever possible, the examples use common apis, tricks, and patterns in javascript for manipulating the document object.
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 svgpatternelement svgpolylineelement svgpolygonelement svgradialgradientelement svgrectelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstyleelement svgsvgelement svgswitchelement svgsymbolelement svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtrefelement svgtspanelement svguseelement svgunknownelemen...
DragEvent - Web APIs
WebAPIDragEvent
this firing pattern is different than mouseover ).
The HTML DOM API - Web APIs
canvasgradient canvaspattern 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.
MSManipulationEvent.initMSManipulationEvent() - Web APIs
beginning with the microsoft edge browser, the initevent() constructor pattern for synthetic events is deprecated.
MSSiteModeEvent - Web APIs
*note that as of microsoft edge, the createevent()/initevent() constructor pattern for synthetic events is deprecated.
Capabilities, constraints, and settings - Web APIs
specifications specification status comment media capture and streamsthe definition of 'constrainable pattern' in that specification.
Navigator.sendBeacon() - Web APIs
the following example shows a theoretical analytics code pattern that submits data to a server using the sendbeacon() method.
Notification.Notification() - Web APIs
vibrate: a vibration pattern for the device's vibration hardware to emit with the notification.
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.
PublicKeyCredentialCreationOptions.extensions - Web APIs
fingerprint, pin, pattern), how the key is protected, how the matcher (tool used for the authentication operation) is protected.
PublicKeyCredentialRequestOptions.extensions - Web APIs
fingerprint, pin, pattern), how the key is protected, how the matcher (tool used for the authentication operation) is protected.
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.
Service Worker API - Web APIs
custom templating based on certain url patterns.
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.
WebGLRenderingContext.bufferData() - Web APIs
usage a glenum specifying the intended usage pattern of the data store for optimization purposes.
WebGLRenderingContext.getBufferParameter() - Web APIs
gl.buffer_usage: returns a glenum indicating the usage pattern of the buffer.
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.
Rendering and the WebXR frame animation callback - Web APIs
sample renderer callback let's take a look at some real code that follows this basic pattern.
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.
Web Speech API - Web APIs
speechgrammar the words or patterns of words that we want the recognition service to recognize.
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: row role - Accessibility
to create an interactive widget that has a tabular structure, use the grid pattern instead.
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.
ARIA: table role - Accessibility
to create an interactive widget that has a tabular structure, use the grid pattern instead.
Architecture - Accessibility
navigating to the next word follows a similar pattern.
Mobile accessibility checklist - Accessibility
it is intended to continuously evolve as more patterns arise.
Understandable - Accessibility
this pattern is commonly used on e-commerce sites like amazon.
-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...
:nth-last-of-type() - CSS: Cascading Style Sheets
syntax the nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.
:nth-of-type() - CSS: Cascading Style Sheets
/* selects every fourth <p> element among any group of siblings */ p:nth-of-type(4n) { color: lime; } syntax the nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements.
:placeholder-shown - CSS: Cascading Style Sheets
html <form id="test"> <p> <label for="name">enter student name:</label> <input id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form> css input { background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; } result specifications specification status comment selectors level 4the defini...
Box alignment in Flexbox - CSS: Cascading Style Sheets
alignment and auto margins there is a specific use case in flexbox where we might think that a justify-self property is what we need, and this is when we want to split a set of flex items, perhaps to create a split navigation pattern.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
a common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left.
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
display: table- the css table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as internet explorer 8.
Basic concepts of flexbox - CSS: Cascading Style Sheets
after a while, thinking about start and end rather than left and right becomes natural, and will be useful to you when dealing with other layout methods such as css grid layout which follow the same patterns.
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
the example in the specification demonstrates one such pattern.
Ordering Flex Items - CSS: Cascading Style Sheets
used carefully the order property can allow for some useful common patterns to be easily implemented.
CSS Flexible Box Layout - CSS: Cascading Style Sheets
typical use cases of flexbox common design patterns that are typical flexbox use cases.
Grid template areas - CSS: Cascading Style Sheets
take some time to build some common layout patterns using grid, while there are lots of new terms to learn, the syntax is relatively straightforward.
Layout using named grid lines - CSS: Cascading Style Sheets
try building some common patterns with these various methods, and you will soon find your most productive way to work.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
for additional common layout patterns see grid by example, where there are many smaller examples of grid layout and also some larger ui patterns and full page layouts.
Subgrid - CSS: Cascading Style Sheets
this guide details what subgrid does, and gives some use cases and design patterns that are solved by the feature.
Breadcrumb Navigation - CSS: Cascading Style Sheets
choices made this pattern is laid out using a simple flex layout demonstrating how a line of css can give us our navigation.
Card - CSS: Cascading Style Sheets
this pattern is a list of "card" components with optional footers.
Column layouts - CSS: Cascading Style Sheets
requirements there are a number of design patterns you might want to achieve with your columns: a continuous thread of content broken up into newspaper-style columns.
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...
border-bottom-width - CSS: Cascading Style Sheets
nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.
border-image - CSS: Cascading Style Sheets
| <'border-image-repeat'> examples bitmap in this example, we will apply a diamond pattern to an element's borders.
border-left-width - CSS: Cascading Style Sheets
nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.
border-right-width - CSS: Cascading Style Sheets
nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.
border-top-width - CSS: Cascading Style Sheets
nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.
border-width - CSS: Cascading Style Sheets
nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.
element() - CSS: Cascading Style Sheets
WebCSSelement
a somewhat more bizarre example this example uses a hidden <button> element in a repeating pattern as its background.
grid-auto-columns - CSS: Cascading Style Sheets
the grid-auto-columns css property specifies the size of an implicitly-created grid column track or pattern of tracks.
grid-auto-rows - CSS: Cascading Style Sheets
the grid-auto-rows css property specifies the size of an implicitly-created grid row track or pattern of tracks.
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
WebCSSrepeat
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
WebCSS
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
WebEXSLTstr
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
WebGuideAJAX
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
WebGuideHTMLHTML5HTML5 Parser
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.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
svg (scalable vector graphics) lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image.
disabled - HTML: Hypertext Markup Language
additionally, since the elements become immutable, most other attributes, such as pattern, have no effect, until the control is enabled.
HTML attribute reference - HTML: Hypertext Markup Language
pattern <input> defines a regular expression which the element's value will be validated against.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
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.
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
pattern validation <input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
x-ms-format-detection - HTML: Hypertext Markup Language
phone phone number patterns are autolinked.
Evolution of HTTP - HTTP
in 2000, a new pattern for using http was designed: representational state transfer (or rest).
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.
HTTP resources and specifications - HTTP
modern apis for application are defines using the restful pattern nowadays.
Closures - JavaScript
note that these closures follow the module design pattern.
Functions - JavaScript
shorter functions in some functional patterns, shorter functions are welcome.
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.
Regular expression syntax cheatsheet - 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 ...
Classes - JavaScript
the species pattern lets you override default constructors.
Deprecated and obsolete features - JavaScript
source the text of the pattern.
SyntaxError: test for equality (==) mistyped as assignment (=)? - JavaScript
to help debugging, javascript (with strict warnings enabled) warns about this pattern.
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.prototype.exec() - JavaScript
false source the text of the 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.
RegExp.prototype.test() - JavaScript
description use test() whenever you want to know whether a pattern is found in a string.
String.prototype.search() - JavaScript
description when you want to know whether a pattern is found, and also know its index within a string, use search().
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 ...
Animation performance and frame rate - Web Performance
if you scroll through this, you'll see a pattern like this: this is showing us the rendering waterfall.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
offline first the "offline first" — or "cache first" — pattern is the most popular strategy for serving content to the user.
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: <paint>; animatable: yes stroke-dasharray defines the pattern of dashes and gaps used to paint the outline of the shape.
class - SVG: Scalable Vector Graphics
WebSVGAttributeclass
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
WebSVGAttributeclip
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-opacity - SVG: Scalable Vector Graphics
the fill-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to a shape.
fill - SVG: Scalable Vector Graphics
WebSVGAttributefill
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
WebSVGAttributemask
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
WebSVGAttributeonclick
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-opacity - SVG: Scalable Vector Graphics
the stroke-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc) applied to the stroke of a shape.
stroke - SVG: Scalable Vector Graphics
WebSVGAttributestroke
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
WebSVGAttribute
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
WebSVGElementa
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
WebSVGElementdefs
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
WebSVGElementg
-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
WebSVGElementglyph
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
WebSVGElementmarker
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
WebSVGElementmask
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
WebSVGElementsvg
-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
WebSVGElementsymbol
-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.
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
it's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other svg graphics element.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
pattern module pattern implemented.
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...
Texts - SVG: Scalable Vector Graphics
WebSVGTutorialTexts
both may also refer to gradients or patterns, which makes simple coloring text in svg very powerful compared to css 2.1.
Tools for SVG - SVG: Scalable Vector Graphics
snap.svg is designed for modern browsers and therefore supports the newest svg features like masking, clipping, patterns, full gradients, groups.
SVG Tutorial - SVG: Scalable Vector Graphics
WebSVGTutorial
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
WebXPathIndex
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.
An Overview - XSLT: Extensible Stylesheet Language Transformations
in essence, an xslt stylesheet is a set of rules, called templates, which declare that any node that matches this specific pattern should be manipulated in this specific way and end up in this specific position in the result tree.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
some things work if you use lower case node-names in patterns and expressions, and treat the nodes as if they are in the null namespace, however this is not very well tested so it might not work in all situations.