Search completed in 1.02 seconds.
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
client
hints are a set of http request header fields for proactive content negotiation allowing clients to indicate a list of device and agent specific preferences.
... client
hints enable automated delivery of optimized assets like the automatic negotiation of image dpr resolution.
... use of client
hints isn't automatic: rather, servers must announce that they support client
hints.
...And 6 more matches
WebGLRenderingContext.hint() - Web APIs
the webglrenderingcontext.
hint() method of the webgl api specifies
hints for certain behaviors.
... the interpretation of these
hints depend on the implementation.
... syntax void gl.
hint(target, mode); parameters target sets which behavior to be controlled.
...And 6 more matches
XForms Hint Element - Archive of obsolete content
the
hint is displayed when the mouse moves and pauses over the containing form control.
... the
hint will also be displayed if the containing form control recieves a xforms-
hint event.
... the message of the
hint element can exist in instance data, in a remote document, or as inline text.
...And 3 more matches
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
the canvasrenderingcontext2d.scrollpat
hintoview() method of the canvas 2d api scrolls the current or given path into view.
... syntax void ctx.scrollpat
hintoview(); void ctx.scrollpat
hintoview(path); parameters path a path2d path to use.
... examples using the scrollpat
hintoview method this example demonstrates the scrollpat
hintoview() method.
...And 2 more matches
AudioContextOptions.latencyHint - Web APIs
the audiocontextoptions dictionary (used when instantiating an audiocontext) may contain a property named latency
hint, which indicates the preferred maximum latency in seconds for the audio context.
... syntax audiocontextoptions.latency
hint = "interactive"; audiocontextoptions.latency
hint = 0.2; var latency
hint = audiocontextoptions.latency
hint; value the preferred maximum latency for the audiocontext.
...in fact, the default value of latency
hint is "interactive" (meaning the browser should try to use the lowest possible and reliable latency it can).
... specifications specification status comment web audio apithe definition of 'audiocontextoptions.latency
hint' in that specification.
JS::GetFirstArgumentAsTypeHint
syntax bool js::getfirstargumentastype
hint(jscontext* cx, callargs args, jstype *result); name type description cx jscontext * the context in which to define functions.
... description js::getfirstargumentastype
hint converts first argument of @@toprimitive method to jstype.
... see also mxr id search for js::getfirstargumentastype
hint bug 1054756 - added ...
103 Early Hints - HTTP
the http 103 early
hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response.
... syntax 103 early
hints specifications specification status comments rfc 8297: 103 early
hints ietf rfc initial definition browser compatibility the compatibility table in this page is generated from structured data.
Handling common JavaScript problems - Learn web development
the javascript/ecmascript linters we'd recommend are js
hint and eslint; these can be used in a variety of ways, some of which we'll detail below.
... online the js
hint homepage provides an online linter, which allows you to enter your javascript code on the left and provides an output on the right, including metrics, warnings, and errors.
...many code editors have linter plugins, for example github's atom code editor has a js
hint plugin available.
...And 8 more matches
Bytecode Descriptions
jsop::callprop is exactly like jsop::getprop but
hints to the vm that we're getting a method in order to call it.
...jsop::callelem is exactly like jsop::getelem but
hints to the vm that we're getting a method in order to call it.
... iternext stack: val ⇒ val no-op instruction to
hint to ionbuilder that the value on top of the stack is the string key in a for-in loop.
...And 7 more matches
Index - Web APIs
138 audiocontextoptions.latency
hint api, audio, audio context, audiocontext, audiocontextoptions, context, options, property, reference, web audio, web audio api, latency, latency
hint the audiocontextoptions dictionary (used when instantiating an audiocontext) may contain a property named latency
hint, which indicates the preferred maximum latency in seconds for the audio context.
... 432 cssnumericvalue.type api, css typed object model api, cssnumericvalue, experimental, houdini, property, reference, type the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percent
hint, or time.
... 596 canvasrenderingcontext2d.scrollpat
hintoview() api, canvas, canvasrenderingcontext2d, experimental, method, reference the canvasrenderingcontext2d.scrollpat
hintoview() method of the canvas 2d api scrolls the current or given path into view.
...And 6 more matches
Link prefetching FAQ - HTTP
a web page provides a set of prefetching
hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache.
... what are the prefetching
hints?
...an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching
hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the format for the link: header is described in rfc 5988 section 5.
...And 6 more matches
WebGL constants - Web APIs
constant name value description static_draw 0x88e4 passed to bufferdata as a
hint about whether the contents of the buffer are likely to be used often and not change often.
... stream_draw 0x88e0 passed to bufferdata as a
hint about whether the contents of the buffer are likely to not be used often.
... dynamic_draw 0x88e8 passed to bufferdata as a
hint about whether the contents of the buffer are likely to be used often and change often.
...And 5 more matches
<input type="tel"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief
hint to the user as to what kind of information is expected in the field.
... mozaction
hint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard.
... mozaction
hint a mozilla extension, supported by firefox for android, which provides a
hint as to what sort of action will be taken if the user presses the enter or return key while editing the field.
...And 5 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
attributes for the <input> element include global html attributes and: attribute type or types description accept file
hint for expected file type in file upload controls alt image alt attribute for the image type.
... required for accessibility autocomplete all
hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction image, submit url to use for form submission formenctype image, submit form data set encoding type to use for form submission formmethod image, submit ht...
... inputmode global value valid for all elements, it provides a
hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
...And 5 more matches
HTTP Index - HTTP
48 accept-ch client
hints, http, http header the accept-ch header is set by the server to specify which client
hints headers client should include in subsequent requests.
... 49 accept-ch-lifetime client
hints, http, header the accept-ch-lifetime header is set by the server to specify the persistence of accept-ch header value that specifies for which client
hints headers client should include in subsequent requests.
... 113 dpr client
hints, http, http header the dpr header is a client
hints headers which represents the client device pixel ratio (dpr), which is the the number of physical device pixels corresponding to every css pixel.
...And 5 more matches
<input type="url"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief
hint to the user as to what kind of information is expected in the field.
... mozaction
hint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard.
... mozaction
hint a mozilla extension, supported by firefox for android, which provides a
hint as to what sort of action will be taken if the user presses the enter or return key while editing the field.
...And 4 more matches
Using dns-prefetch - Web Performance
the cross-origin domain is then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch
hints in the <head> element any time your site references resources on cross-origin domains, but there are some things to keep in mind.
...this is because the ip behind your site’s domain will have already been resolved by the time the browser sees the
hint.
... second, it’s also possible to specify dns-prefetch (and other resources
hints) as an http header by using the http link field: link: <https://fonts.gstatic.com/>; rel=dns-prefetch third, consider pairing dns-prefetch with the preconnect
hint.
...And 4 more matches
<input type="search"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief
hint to the user as to what kind of information is expected in the field.
... mozaction
hint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard.
... mozaction
hint a mozilla extension, supported by firefox for android, which provides a
hint as to what sort of action will be taken if the user presses the enter or return key while editing the field.
...And 3 more matches
<input type="text"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief
hint to the user as to what kind of information is expected in the field.
... mozaction
hint a string indicating the type of action that will be taken when the user presses the enter or return key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard.
... mozaction
hint a mozilla extension, supported by firefox for android, which provides a
hint as to what sort of action will be taken if the user presses the enter or return key while editing the field.
...And 3 more matches
HTML documentation index - HTML: Hypertext Markup Language
8 accesskey global attributes, html, reference, accesskey the accesskey global attribute provides a
hint for generating a keyboard shortcut for the current element.
... 19 inputmode attribute, editing, forms, global attributes, html, input, reference, text, web, contenteditable, global, inputmode, text input the inputmode global attribute is an enumerated attribute that
hints at the type of data that might be entered by the user while editing the element or its contents.
... 224 link types: dns-prefetch attribute, html, link, link types, reference the dns-prefetch keyword for the rel attribute of the <link> element is a
hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing dns resolution for that origin.
...And 3 more matches
Content negotiation - HTTP
the server uses them as
hints and an internal algorithm chooses the best content to serve to the client.
... in addition to these, there is an experimental proposal to add more headers to the list of available headers, called client
hints.
... client
hints advertise what kind of device the user agent runs on (for example, if it is a desktop computer or a mobile device).
...And 3 more matches
nsIDocShell
storage getsessionstorageforprincipal(in nsiprincipal principal, in domstring documenturi, in boolean create); nsidomstorage getsessionstorageforuri(in nsiuri uri, in domstring documenturi); void historypurged(in long numentries); void internalload(in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags, in wstring awindowtarget, in string atype
hint, in nsiinputstream apostdatastream, in nsiinputstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest); native code only!
... kcharsetfrom
hintprevdoc 7 the character set was
hinted by the previous document.
...void internalload( in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags, in wstring awindowtarget, in string atype
hint, in nsiinputstream apostdatastream, in nsiinputstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest ); parameters auri the uri to load.
...And 2 more matches
Timing element visibility with the Intersection Observer API - Web APIs
let's start with the global variables: let contentbox; let nextarticleid = 1; let visibleads = new set(); let previouslyvisibleads = null; let adobserver; let refres
hintervalid = 0; these are used as follows: contentbox a reference to the <main> element's htmlelement object in the dom.
... refres
hintervalid used to store the interval id returned by setinterval().
...oad", startup, false); function startup() { contentbox = document.queryselector("main"); document.addeventlistener("visibilitychange", handlevisibilitychange, false); let observeroptions = { root: null, rootmargin: "0px", threshold: [0.0, 0.75] }; adobserver = new intersectionobserver(intersectioncallback, observeroptions); buildcontents(); refres
hintervalid = window.setinterval(handlerefres
hinterval, 1000); } first, a reference to the content wrapping <main> element is obtained, so we can insert our content into it.
...And 2 more matches
WebGLRenderingContext.getParameter() - Web APIs
gl.generate_mipmap_
hint glenum gl.fastest, gl.nicest or gl.dont_care.
... see also
hint.
... gl.fragment_shader_derivative_
hint glenum gl.fastest, gl.nicest or gl.dont_care.
...And 2 more matches
::placeholder - CSS: Cascading Style Sheets
an alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the <input> with its
hint.
... with this implementation, the
hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded.
... most screen reading technology will use aria-describedby to read the
hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.
...And 2 more matches
Using CSS gradients - CSS: Cascading Style Sheets
in this example, the colors share a color stop at the 50% mark, halfway through the gradient: <div class="striped"></div> div { width: 120px; height: 120px; } .striped { background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); } gradient
hints by default, the gradient transitions evenly from one color to the next.
... you can include a color-
hint to move the midpoint of the transition value to a certain point along the gradient.
... <div class="color-
hint"></div> <div class="simple-linear"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; } .color-
hint { background: linear-gradient(blue, 10%, pink); } .simple-linear { background: linear-gradient(blue, pink); } creating color bands & stripes to include a solid, non-transitioning color area within a gradient, include two positions for the color stop.
...And 2 more matches
linear-gradient() - CSS: Cascading Style Sheets
ng blue and finishing red */ linear-gradient(45deg, blue, red); /* a gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* color stop: a gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-gradient(0deg, blue, green 40%, red); /* color
hint: a gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* multi-position color stop: a gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the g...
... <color-
hint> the color-
hint is an interpolation
hint defining how the gradient progresses between adjacent color stops.
...you can move this midpoint to any position between two color stops by adding an unlabelled % color
hint between the two colors to indicate where the middle of the color transition should be.
...And 2 more matches
Web Performance
glossary terms beacon brotli compression client
hints code splitting cssom domain sharding effective connection type first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint http http/2 jank latency lazy load long task lossless compression lossy compression main thread minification network throttling packet page load time page prediction parse perceived performance prefe...
...this article explains the tls handshake process, and offers some tips for reducing this time, such as ocsp stapling, hsts preload headers, and the potential role of resource
hints in masking tls latency for third parties.
... controlling resource delivery with resource
hints browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant.
...And 2 more matches
SVG documentation index - SVG: Scalable Vector Graphics
48 color-rendering svg, svg attribute the color-rendering attribute provides a
hint to the svg user agent about how to optimize its color interpolation and compositing operations.
... 107 image-rendering needsexample, svg, svg attribute the image-rendering attribute provides a
hint to the browser about how to make speed vs.
... 185 shape-rendering svg, svg attribute the shape-rendering attribute provides
hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles.
...And 2 more matches
Mozilla XForms User Interface - Archive of obsolete content
mainly this is aimed to document how xforms elements will be presented in mozilla since the xforms specifications give only a
hint of how controls might be rendered.
... appearance - the value provided by the form author gives a
hint to the processor as to which widget to use to represent the xforms control.
...
hint similar to a tooltip (see the spec).
... the
hint is displayed when the mouse moves and pauses over the containing form control.
TypeScript support in Svelte - Learn web development
rich ide support: type information allows code editors and ides to offer features like code navigation, autocompletion, and smarter
hints.
... we'll use visual studio code to do a quick test and see how we can get autocompletion
hints and type-checking as we're writing components.
...just run npm run validate to check for unused css, and return a11y
hints and typescript compile errors.
...==================================== svelte-check found no errors and no warnings note that if you are using a supporting code editor like vs code, a simple way to start porting a svelte component is to just add the <script lang='ts'> at the top of your component and look for the three-dotted
hints: alert.svelte let's start with our alert.svelte component.
JS::ToPrimitive
syntax bool js::toprimitive(jscontext *cx, js::handleobject obj, jstype
hint, js::mutablehandlevalue vp); name type description cx jscontext * the context in which to perform the conversion.
...
hint jstype the
hint to pass to the toprimitive and @@toprimitive method when converting the object.
...
hint must be jstype_string or jstype_number to pass the corresponding type as a
hint, or jstype_void to pass no
hint.
... see also mxr id search for js::toprimitive js::getfirstargumentastype
hint js_defaultvalue -- old name of this function bug 1054756 - added ...
nsIAppShell
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void create(inout int argc, inout string argv); obsolete since gecko 1.9 void dispatchnativeevent(in prbool arealevent, in voidptr aevent); obsolete since gecko 1.9 void exit(); void favorperformance
hint(in boolean favorperfoverstarvation, in unsigned long starvationdelay); void getnativeevent(in prboolref arealevent, in voidptrref aevent); obsolete since gecko 1.9 void listentoeventqueue(in nsieventqueue aqueue, in prbool alisten); obsolete since gecko 1.9 void resumenative(); void run(); void runinstablestate(in nsirunnable arunnable); void spindown(); obsolete since gecko 1.9 ...
...favorperformance
hint() give
hint to native event queue notification mechanism.
...native event starvation this
hint tells the native dispatch code which to favor.
...void favorperformance
hint( in boolean favorperfoverstarvation, in unsigned long starvationdelay ); parameters favorperfoverstarvation true to favor event performance over event starvation, false to favor event starvation over event performance.
nsIXULSortService
obsolete since gecko 1.9 void sort(in nsidomnode anode, in astring asortkey, in astring asort
hints); constants constant value description sort_comparecase 0x0001 sort_integer 0x0100 methods native code only!insertcontainernode obsolete since gecko 1.9 (firefox 3)this feature is obsolete.
...void insertcontainernode( in nsirdfcompositedatasource db, in nsrdfsortstate sortstateptr, in nsicontent root, in nsicontent trueparent, in nsicontent container, in nsicontent node, in boolean anotify ); parameters db sortstateptr root trueparent container node anotify sort() sort the contents of the widget containing anode using asortkey as the comparison key, and asort
hints as how to sort.
... void sort( in nsidomnode anode, in astring asortkey, in astring asort
hints ); parameters anode a node in the xul widget whose children are to be sorted.
...asort
hints one or more
hints as to how to sort: ascending: sort the contents in ascending order descending: sort the contents in descending order comparecase: perform case sensitive comparisons integer: treat values as integers, non-integers are compared as strings twostate: do not allow the natural (unordered state) see also nsixultemplatequeryprocessor ...
nsIXULTemplateQueryProcessor
method overview void addbinding(in nsidomnode arulenode, in nsiatom avar, in nsiatom aref, in astring aexpr); print32 compareresults(in nsixultemplateresult aleft, in nsixultemplateresult aright, in nsiatom avar, in unsigned long asort
hints); nsisupports compilequery(in nsixultemplatebuilder abuilder, in nsidomnode aquery, in nsiatom arefvariable, in nsiatom amembervariable); void done(); nsisimpleenumerator generateresults(in nsisupports adatasource, in nsixultemplateresult aref, in nsisupports aquery); nsisupports getdatasource(in nsiarray adatasources, in nsidomnode arootnode, in boolean aistrusted, in nsixultemplatebuil...
...print32 compareresults( in nsixultemplateresult aleft, in nsixultemplateresult aright, in nsiatom avar, in unsigned long asort
hints ); parameters aleft the left result to compare.
...asort
hints the sort
hints are the flags in nsixulsortservice.
...a rule processor may use the member variable as a
hint to indicate what variable is expected to contain the results.
Troubleshooting XPCOM components registration
general
hints you may need to delete compreg.dat in your profile folder to force re-registration.
... windows-specific
hints use dependency walker to check that your dependent libraries are loaded correctly.
... linux-specific
hints check if you have missing dependent libraries: from your firefox (/xulrunner) install directory, run "./run-mozilla.sh `which ldd` -r path/to/your/component.so".
... mac-specific
hints use ktrace to see if firefox is trying to load your components.
conic-gradient() - CSS: Cascading Style Sheets
<color-
hint> th color-
hint is an interpolation
hint defining how the gradient progresses between adjacent color stops.
...the transitions between colors can be altered with color
hints between adjacent colors' color stops.
...you can move this color transition midpoint to any point between two color stops by adding a color
hint, indicating where the middle of the color transition should be.
...the midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color
hint.
HTML attribute reference - HTML: Hypertext Markup Language
enterkey
hint <textarea>, contenteditable the enterkey
hint specifies what action label (or icon) to present for the enter key on virtual keyboards.
... inputmode <textarea>, contenteditable provides a
hint as to the type of data that might be entered by the user while editing the element or its contents.
... media <a>, <area>, <link>, <source>, <style> specifies a
hint of the media for which the linked resource was designed.
... placeholder <input>, <textarea> provides a
hint to the user of what can be entered in the field.
Accept-CH - HTTP
the accept-ch header is set by the server to specify which client
hints headers a client should include in subsequent requests.
... note: client
hints are accessible only on secure origins (via tls).
... accept-ch and accept-ch-lifetime headers should be persisted for all secure requests to ensure client
hints are sent reliably.
... syntax accept-ch: <list of client
hints> examples accept-ch: dpr, viewport-width accept-ch: width accept-ch-lifetime: 86400 vary: dpr, viewport-width, width note: remember to vary the response based on the accepted client
hints.
HTTP headers - HTTP
client
hints http client
hints are a work in progress.
... accept-ch servers can advertise support for client
hints using the accept-ch header field or an equivalent html <meta> element with http-equiv attribute ([html5]).
... accept-ch-lifetime servers can ask the client to remember the set of client
hints that the server supports for a specified period of time, to enable delivery of client
hints on subsequent requests to the server’s origin ([rfc6454]).
...this is a
hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language from a dropdown).
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: auto|srgb|linearrgb|<name>|<iri>|inherit; animatable: yes color-rendering it provides a
hint to the browser about how to optimize its color interpolation and compositing operations.
... value: auto|<angle>|inherit; animatable: no image-rendering it provides a
hint to the browser about how to make speed vs.
... value: bounding-box|visiblepainted|visiblefil|visiblestroke|visible |painted|fill|stroke|all|none; animatable: yes shape-rendering
hints about what tradeoffs to make as the browser renders <path> element or basic shapes.
... value: none|underline|overline|line-through|blink|inherit; animatable: yes text-rendering
hints about what tradeoffs to make as the browser renders text.
Style System Overview - Archive of obsolete content
(i'll call this the data-struct-based
hint mechanism.) caller of nsiframemanager::computestylechangefor processes the change list, which has been built to avoid duplication.
... different
hint mechanism (from rule structs, not data structs) could make attributechanged just go straight to a frame-change, instead.
... rule change applies the rule-struct
hint as if the rule matched the root element.
Proposal - Archive of obsolete content
spec exists rss disposition
hinting a proposal to make it so iptv and ipradio/podcasting works better with rss.
... uses an http "content-type" parameter to
hint at an rss feeds disposition type -- to
hint at what is being syndicated.
... in development rss
hints a module that adds elements to a feed that help an aggregator process them.
Index - Learn web development
this article provides some
hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..
...however, in many cases we just need some quick
hints as we go.
... from object to iframe — other embedding technologies article, beginner, codingscripting, embedding, flash, guide, html, learn, multimedia and embedding, object, embed, iframe the topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still
hinting at some of the more advanced features of the involved technologies.
Introduction to automated testing - Learn web development
a reasonable set of basic functionalities to run on our project is as follows: html-tidy, css-lint, and js-
hint to lint and report/fix common html/css/js errors (see gulp-htmltidy, gulp-csslint, gulp-js
hint).
... js-
hint and babel install using the following lines: npm install --save-dev gulp-babel @babel/preset-env npm install --save-dev @babel/core npm install js
hint gulp-js
hint --save-dev add the following dependencies to gulpfile.js: const babel = require('gulp-babel'); const js
hint = require('gulp-js
hint'); add the following test to the bottom of gulpfile.js: function js(cb) { return gul...
...p.src('src/main.js') .pipe(js
hint()) .pipe(js
hint.reporter('default')) .pipe(babel({ presets: ['@babel/env'] })) .pipe(gulp.dest('build')); cb(); } here we grab our main.js file, run js
hint on it and output the results to the terminal using js
hint.reporter; we then pass the file to babel, which converts it to old style syntax and outputs the result into the build directory.
JSConvertOp
hint jstype the
hint to pass to the [[defaultvalue]] hook when converting the object.
...
hint will be jstype_string or jstype_number to pass the corresponding type as a
hint, or jstype_void to pass no
hint.
... other types may be passed as
hints, but such behavior is deprecated.
JS_DefaultValue
syntax bool js_defaultvalue(jscontext *cx, js::handle<jsobject*> obj, jstype
hint, js::mutablehandle<js::value> vp); name type description cx jscontext * the context in which to perform the conversion.
...
hint jstype the
hint to pass to the [[defaultvalue]] hook when converting the object.
...
hint must be jstype_string or jstype_number to pass the corresponding type as a
hint, or jstype_void to pass no
hint.
XForms Accessibility
description it is formed from value of child xforms
hint element if the element doesn't have describedby attribute.
...
hint similar to a tooltip (see the spec, the docs).
... the value of
hint element is used as description of accessible object.
nsIChannel
setting contentcharset before the channel has been opened provides a
hint to the channel on what the charset should be.
... setting contenttype before the channel has been opened provides a
hint to the channel as to what the mime type is.
... the channel may ignore this
hint in deciding on the actual mime type that it will report.
nsISpeculativeConnect
netwerk/base/public/nsispeculativeconnect.idlscriptable lets non-networking code provide
hints to the networking layer that an http connection attempt to a particular site is likely to happen soon; this lets the networking layer begin setting up tcp and, if appropriate, ssl handshakes to save time when the connection is actually opened later.
...method overview void speculativeconnect(in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtarget atarget); methods speculativeconnect() call this method to
hint to the networking layer that a new transaction for the specified uri is likely to happen soon.
...void speculativeconnect( in nsiuri auri, in nsiinterfacerequestor acallbacks, in nsieventtarget atarget ); parameters auri the uri of the
hinted transaction.
AudioContext() - Web APIs
available properties are as follows: latency
hint optional the type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds.
... non-standard exceptions in chrome if the value of the latency
hint property isn't valid, chrome throws a typeerror exception with the message "the provided value '...' is not a valid enum value of type audiocontextlatencycategory".
... var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext({ latency
hint: 'interactive', samplerate: 44100, }); specifications specification status comment web audio apithe definition of 'audiocontext()' in that specification.
AudioContextOptions - Web APIs
properties latency
hint optional the type of playback that the context will be used for, as a value from the audiocontextlatencycategory enum or a double-precision floating-point value indicating the preferred maximum latency of the context in seconds.
... constants standard values for latency
hint the latency
hint property can be number specifying a preferred maximum latency in seconds or a string from the audiocontextlatencycategory enumerated string, which selects a standard value for a given type of audio usage: value description "balanced" the user agent should balance audio output latency and power consumption when selecting a latency value.
... let musiccontext = new audiocontext({ latency
hint: "playback", samplerate: 48000 }); specifications specification status comment web audio apithe definition of 'audiocontextoptions' in that specification.
HTMLCanvasElement.getContext() - Web APIs
desynchronized: boolean that
hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop (gecko only) willreadfrequently: boolean that indicates whether or not a lot of read-back operations are planned.
... desynchronized: boolean that
hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop antialias: boolean that indicates whether or not to perform anti-aliasing.
... powerpreference: a
hint to the user agent indicating what configuration of gpu is suitable for the webgl context.
OES_standard_derivatives - Web APIs
in webgl 2, the constant is available as gl.fragment_shader_derivative_
hint and it requires glsl #version 300 es.
... constants this extension exposes one new constant, which can be used in the
hint() and getparameter() methods.
... ext.fragment_shader_derivative_
hint_oes a glenum indicating the accuracy of the derivative calculation for the glsl built-in functions: dfdx, dfdy, and fwidth.
PublicKeyCredentialCreationOptions.timeout - Web APIs
the timeout property, of the publickeycredentialcreationoptions dictionary, represents an
hint, given in milliseconds, for the time the script is willing to wait for the completion of the creation operation.
... this property is optional and merely is a
hint which may be overridden by the browser.
... syntax timeout = publickeycredentialcreationoptions.timeout value a numerical
hint, expressed in milliseconds, giving the time to wait for the creation operation to complete.
PublicKeyCredentialRequestOptions.timeout - Web APIs
the timeout property, of the publickeycredentialrequestoptions dictionary, represents an
hint, given in milliseconds, for the time the script is willing to wait for the completion of the retrieval operation.
... this property is optional and merely is a
hint which may be overridden by the browser.
... syntax timeout = publickeycredentialrequestoptions.timeout value a numerical
hint, expressed in milliseconds, giving the time to wait for the creation operation to complete.
-webkit-box-reflect - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> specifications not part of any standard.
additive-symbols - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples specifying additive symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style additive-symbols-example { system: additive; additive-symbols: v 5, iv 4, i 1; } .list { list-style: additive-symbols-example; } result specifications ...
negative - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples rendering negative counters html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: neg; } result specifications...
pad - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples padding a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-style: pad-example; } result specifications specification s...
prefix - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples adding a prefix to a counter html <ul class="index"> <li>the boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul> css @counter-style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix...
suffix - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a suffix for a counter html <ul class="choices"> <li>one</li> <li>two</li> <li>three</li> <li>none of the above</li> </ul> css @counter-style options { system: fixed; symbols: a b c d; suffix: ") "; } .choices { list-style: options; } result specifications specification status ...
symbols - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting counter symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style symbols-example { system: fixed; symbols: a "1" "\24b7" d e; } .list { list-style: symbols-example; } result specifications specification status ...
src - CSS: Cascading Style Sheets
specifies an external reference consisting of a <url>, followed by an optional
hint using the format() function to describe the format of the font resource referenced by that url.
... the format
hint contains a comma-separated list of format strings that denote well-known font formats.
...if no format
hints are supplied, the font resource is always downloaded.
background-image - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples layering background images note that the star image is partially transparent and is layered over the cat image.
background - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications s...
border-image-source - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples please see border-image for examples.
content - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop><counter-style-name> = <custom-ident>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples headings and quotes this example inserts quotation marks around quotes, and adds the word "chapter" before headings.
cross-fade() - CSS: Cascading Style Sheets
[ at <position> ]?, <angular-color-stop-list> )<alpha-value> = <number> | <percentage><hue> = <number> | <angle>where <side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples older syntax for cross-fade html <div class="crossfade"></div> css .crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/b...
mask-border-source - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-image - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
...| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications ...
mask - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
... ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples masking an image .target { mask: url(#c1) luminance; } .anothertarget { mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude; } specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
repeating-conic-gradient() - CSS: Cascading Style Sheets
<color-
hint> th color-
hint is an interpolation
hint defining how the gradient progresses between adjacent color stops.
...the transitions between colors can be altered with color
hints between adjacent colors' color stops.
...you can move this color transition midpoint to any point between two color stops by adding a color
hint, indicating where the middle of the color transition should be.
repeating-linear-gradient() - CSS: Cascading Style Sheets
<color-
hint> th color-
hint is an interpolation
hint defining how the gradient progresses between adjacent color stops.
...<color-stop-list> ) \---------------------------------/ \---------------/ definition of the gradient line list of color stops where <side-or-corner> = [left | right] || [top | bottom] and <color-stop-list> = [ <linear-color-stop> [, <color-
hint>?
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-
hint> = [ <percentage> | <length> ] examples zebra stripes body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, black 20px, black 40px); /* with multiple color stop lengths */ background-image: repeating-linear-gradient(-45deg, transparent 0 20px, black 20px 40px); } ten repeating horizontal bars body { width: 100vw; height: 100vh; } body { background-image: repeating-linear-gradient(to bottom, rgb(26,198,204), rgb(26,198,204) 7%, rgb(100,100,100) 10%); } because the last ...
shape-outside - CSS: Cascading Style Sheets
)<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-
hint>]?
... ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-
hint>]?
... ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-
hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-
hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples funneling text html <div class="main"> <div class="left"></div> <div class="right"></div> <p> sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link.
will-change - CSS: Cascading Style Sheets
the will-change css property
hints to browsers how an element is expected to change.
...the spec doesn't define the behavior of particular value, but it is common for transform to be a compositing layer
hint.
... var el = document.getelementbyid('element'); // set will-change when the element is hovered el.addeventlistener('mouseenter',
hintbrowser); el.addeventlistener('animationend', remove
hint); function
hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function remove
hint() { this.style.willchange = 'auto'; } specifications specification status comment css will change module level 1the...
<a>: The Anchor element - HTML: Hypertext Markup Language
links are not restricted to http-based urls — they can use any url scheme supported by browsers: sections of a page with fragment urls pieces of media files with media fragments telephone numbers with tel: urls email addresses with mailto: urls while web browsers may not support other url schemes, web sites can with registerprotocolhandler() hreflang
hints at the human language of the linked url.
... type
hints at the linked url’s format with a mime type.
... obsolete attributes charsetobsolete since html5
hinted at the character encoding of the linked url.
<input type="email"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief
hint to the user as to what kind of information is expected in the field.
... some examples of valid strings when multiple is specified: "" "me@example" "me@example.org" "me@example.org,you@example.org" "me@example.org, you@example.org" "me@example.org,you@example.org, us@example.org" some examples of invalid strings: "," "me" "me@example.org you@example.org" placeholders sometimes it's helpful to offer an in-context
hint as to what form the input data should take.
...this also offers
hints to autocomplete.
<input type="number"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief
hint to the user as to what kind of information is expected in the field.
... placeholders sometimes it's helpful to offer an in-context
hint as to what form the input data should take.
...a placeholder is a value most commonly used to provide a
hint as to the format the input should take value.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
these provide useful
hints to allow the browser to choose the most appropriate icon available.
...priority
hints are delegated using the values: auto: indicates no preference.
...css" rel="stylesheet" title="default style"> <link href="fancy.css" rel="alternate stylesheet" title="fancy"> <link href="basic.css" rel="alternate stylesheet" title="basic"> providing icons for different usage contexts you can include links to several different icons on the same page, and the browser will choose which one works best for its particular context using the rel and sizes values as
hints.
Link types - HTML: Hypertext Markup Language
<link> <a>, <area>, <form> dns-prefetch
hints to the browser that a resource is needed, allowing the browser to do a dns lookup and protocol handshaking before a user clicks the link.
... <link> <a>, <area>, <form> preconnect provides a
hint to the browser suggesting that it open a connection to the linked web site in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.
... resource
hintsthe definition of 'preconnect' in that specification.
Accept-CH-Lifetime - HTTP
the accept-ch-lifetime header is set by the server to specify the persistence of accept-ch header value that specifies for which client
hints headers client should include in subsequent requests.
... note: client
hints are accessible only on secure origins (via tls).
... accept-ch and accept-ch-lifetime headers should be persisted for all secure requests to ensure client
hints are sent reliably.
Date.prototype[@@toPrimitive] - JavaScript
syntax date()[symbol.toprimitive](
hint); return value the primitive value of the given date object.
... if
hint is "string" or "default", [@@toprimitive]() tries to call the tostring method.
... if
hint is "number", [@@toprimitive]() first tries to call valueof, and if that fails, it calls tostring.
Symbol.toPrimitive - JavaScript
the function is called with a string argument
hint, which specifies the preferred type of the result primitive value.
... the
hint argument can be one of "number", "string", and "default".
...var obj2 = { [symbol.toprimitive](
hint) { if (
hint == 'number') { return 10; } if (
hint == 'string') { return 'hello'; } return true; } }; console.log(+obj2); // 10 --
hint is "number" console.log(`${obj2}`); // "hello" --
hint is "string" console.log(obj2 + ''); // "true" --
hint is "default" specifications specification ecmascript (ecma-262)the definition of 'sym...
text-rendering - SVG: Scalable Vector Graphics
the text-rendering attribute provides
hints to the renderer about what tradeoffs to make when rendering text.
...the user agent will often choose whether to apply anti-aliasing techniques, built-in font
hinting or both to produce the most legible text.
...this option will usually cause the user agent to suspend the use of
hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.
File I/O - Archive of obsolete content
// you can read it into a string with var data = netutil.readinputstreamtostring(inputstream, inputstream.available()); }); read with content type
hint it's useful to provide a content type
hint to prevent the file system from doing a potentially expensive content type look up (which would be synchronous i/o).
... in this case an nsichannel object has to be explicitly created from the file: components.utils.import("resource://gre/modules/netutil.jsm"); // content type
hint is useful on mobile platforms where the filesystem // would otherwise try to determine the content type.
Index - Archive of obsolete content
mainly this is aimed to document how xforms elements will be presented in mozilla since the xforms specifications give only a
hint of how controls might be rendered.
... 2221 xforms
hint element xforms no summary!
Implementation Status - Archive of obsolete content
-revalidate supported 4.3.4 xforms-refresh supported 4.3.5 xforms-reset supported 4.3.6 xforms-next xforms-previous supported 4.3.7 xforms-focus supported 4.3.8 xforms-help xforms-
hint supported 4.3.9 xforms-submit partial see section 11.2 for more details 4.3.10 xforms-submit-serialize supported 4.4 notification events supported 4.4.1 xforms-insert supported 4.4.2 ...
... 297083; 343443; 8.3.4 help supported 8.3.5
hint partial problems with
hints in xul-hosted documents and ephemeral message positioning 349667; 8.3.6 alert supported 9.
Images in HTML - Learn web development
set the image's correct width and height (
hint: it is 200px wide and 171px high), then experiment with other values to see what the effect is.
...as
hinted to above, css background images are for decoration only.
Responsive images - Learn web development
the standard <img> element traditionally only lets you point the browser to a single source file: <img src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> we can however use two new attributes — srcset and sizes — to provide several additional source images along with
hints to help the browser pick the right one.
...screen widths) and indicates what image size would be best to choose, when certain media conditions are true — these are the
hints we talked about earlier.
Silly story generator - Learn web development
as a further
hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.
...
hints and tips you don't need to edit the html in any way, except to apply the javascript to your html.
Useful string methods - Learn web development
hint: in this case it is probably more useful to test whether the method call isn't equal to a certain result.
... note: a
hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.
Multimedia: Images - Learn web development
secondly, with the adoption of priority
hints, you can control the priority further by adding an importance attribute to your image tags.
... an example use case for priority
hints on images are carousels where the first image is a higher priority than the subsequent images.
Web performance resources - Learn web development
using resource
hints such as rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload keep the size of javascript to a minimum.
... pagespeed insights can analyze your page and give some general
hints to improve performance.
Client-side tooling overview - Learn web development
also well-worth looking at is web
hint, a configurable, open-source linter for the web that surfaces best practices including approaches to accessibility, performance, cross-browser compatibility via mdn's browser compatibility data, security, testing for pwas, and more.
... others there are a number of other tool types available to use in the post-development stage, including code climate for gathering code quality metrics, the web
hint browser extension for performing runtime analysis of cross-browser compatibility and other checks, github bots for providing more powerful github functionality, updown for providing app uptime monitoring, and so many more!
How to implement a custom autocomplete search component
h; }, /** * @return {string} the value of the result at the given index */ getvalueat: function(index) { return this._results[index]; }, /** * @return {string} the comment of the result at the given index */ getcommentat: function(index) { if (this._comments) return this._comments[index]; else return ''; }, /** * @return {string} the style
hint for the result at the given index */ getstyleat: function(index) { if (!this._comments || !this._comments[index]) return null; // not a category label, so no special styling if (index == 0) return 'suggestfirst'; // category label on first line of results return 'suggest
hint'; // category label on any other line of results }, /** * gets the image for the...
... /** * the number of matches */ get matchcount() { return this._results.length; }, /** * get the value of the result at the given index */ getvalueat: function(index) { return this._results[index]; }, /** * get the comment of the result at the given index */ getcommentat: function(index) { return this._comments[index]; }, /** * get the style
hint for the result at the given index */ getstyleat: function(index) { if (!this._comments[index]) return null; // not a category label, so no special styling if (index == 0) return "suggestfirst"; // category label on first line of results return "suggest
hint"; // category label on any other line of results }, /** * get the image for the result at the given...
IME handling guide
its mimestate, mhtmlinputtype, mhtmlinputinputmode and maction
hint are set at nsiwidget::setinputcontext() called.
... maction
hint the value is mozaction
hint attribute value of the focused editor.
Rhino documentation
performance
hints some tips on writing faster javascript code.
... small footprint
hints for those interested in small-footprint embeddings.
nsIMarkupDocumentViewer
obsolete since gecko 1.8 authorstyledisabled boolean disable entire author style level (including html presentation
hints) bidicharacterset octet whether to force the user's character set 1 - use the document character set 2 - use the character set chosen by the user.
...
hintcharacterset acstring
hintcharactersetsource print32 minfontsize long the minimum font size to allow.
Waterfall - Firefox Developer Tools
restyle
hint a string indicating what kind of restyling is needed.
... the
hint may be any of: self subtree latersiblings csstransitions cssanimations svgattranimations styleattribute styleattribute_animations force forcedescendants layout calculating the position and size of page elements.
AudioContext.baseLatency - Web APIs
note: you can request a certain latency during construction time with the latency
hint option, but the browser may ignore the option.
... example // default latency ("interactive") const audioctx1 = new audiocontext(); console.log(audioctx1.baselatency); // 0.00 // higher latency ("playback") const audioctx2 = new audiocontext({ latency
hint: 'playback' }); console.log(audioctx2.baselatency); // 0.15 specifications specification status comment web audio apithe definition of 'baselatency' in that specification.
CSSNumericValue.type - Web APIs
the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percent
hint, or time.
... examples let mathsum = css.px("23").sub(css.percent("4")).sub(css.cm("3")).sub(css.in("9")); // returns an object with the structure: {length: 1, percent
hint: "length"} let cssnumerictype = mathsum.type(); specifications specification status comment css typed om level 1the definition of 'type' in that specification.
Hit regions and accessibility - Web APIs
additionally, the scrollpat
hintoview() method can be used to make an element visible on the screen if focused, for example.
... canvasrenderingcontext2d.scrollpat
hintoview() scrolls the current path or a given path into the view.
Device Memory API - Web APIs
accessing device memory capacity there are two ways to acces the approximate amount of ram device has: via javascript api and via client
hints http header.
... client
hints header you also may use client
hints directive device-memory to retreive the same approximate ram capacity.
HTMLImageElement.decoding - Web APIs
the decoding property of the htmlimageelement interface represents a
hint given to the browser on how it should decode the image.
... syntax refstr = imgelem.decoding; imgelem.decoding = refstr; values a domstring representing the decoding
hint.
HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a
hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
... syntax let imageloadscheduling = htmlimageelement.loading; htmlimageelement.loading = eagerorlazy; value a domstring providing a
hint to the user agent as to how to best schedule the loading of the image to optimize page performance.
HTMLImageElement - Web APIs
htmlimageelement.decoding an optional domstring representing a
hint given to the browser on how it should decode the image.
... htmlimageelement.loading a domstring providing a
hint to the browser used to optimize loading the document by determining whether to load the image immediately (eager) or on an as-needed basis (lazy).
HTMLInputElement - Web APIs
placeholder string: returns / sets the element's placeholder attribute, containing a
hint to the user of what can be entered in the control.
... inputmode provides a
hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
MediaImage - Web APIs
type the mime type
hint for the user agant.
... note that it is just a
hint so that user agent may ignore images of types it does not support; user agent still may use mime type sniffing after downloading the image to determine its type.
PublicKeyCredentialCreationOptions - Web APIs
publickeycredentialcreationoptions.timeout optional a numerical
hint, in milliseconds, which indicates the time the caller is willing to wait for the creation operation to complete.
... this
hint may be overridden by the browser.
PublicKeyCredentialRequestOptions - Web APIs
publickeycredentialrequestoptions.timeout optional a numerical
hint, in milliseconds, which indicates the time the caller is willing to wait for the retrieval operation to complete.
... this
hint may be overridden by the browser.
SVGImageElement.decoding - Web APIs
the decoding property of the svgimageelement interface represents a
hint given to the browser on how it should decode the image.
... syntax var refstr = svgimageelement.decoding svgimageelement.decoding = refstr; values a domstring representing the decoding
hint.
WebGLRenderingContext - Web APIs
webglrenderingcontext.
hint() specifies
hints for certain behaviors.
... the interpretation of these
hints depend on the implementation.
ARIA: textbox role - Accessibility
aria-placeholder attribute represents a
hint (word or phrase) to the user about what to enter into the text field.
... the
hint should be a sample value or a brief description of the expected format.this information should not be used as a substitute for a label: a label is focusable, permanent, indicates what kind of information is expected, and increases the hit area for setting focus on the control, whereas placeholder text is only temporary
hint about the expected value, which if implemented incorrectly can decrease accessibility.
repeating-radial-gradient() - CSS: Cascading Style Sheets
at <position> , <color-stop-list> ) \---------------------------------------------------------------/\-----------------/ contour, size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-
hint>?
... and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-
hint> = [ <percentage> | <length> ] examples black and white gradient <div class="radial-gradient"></div> .radial-gradient { width: 120px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } farthest-corner <div class="radial-gradient"></div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red, black 5%, blue 5%, green 10%); background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, red 0 5%, green 5% 10%); } t...
<textarea> - HTML: Hypertext Markup Language
placeholder a
hint to the user of what can be entered in the control.
... carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the
hint.
<video>: The Video Embed element - HTML: Hypertext Markup Language
preload this enumerated attribute is intended to provide a
hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played.
... the specification does not force the browser to follow the value of this attribute; it is a mere
hint.
Global attributes - HTML: Hypertext Markup Language
list of global attributes accesskey provides a
hint for generating a keyboard shortcut for the current element.
... inputmode provides a
hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
Evolution of HTTP - HTTP
the introduction of client-
hints allows the browser, or client, to proactively communicate information about its requirements, or hardware constraints, to the server.
...by healing flaws, yet retaining the flexibility and extensibility which made http such a success, the adoption of http/2
hints at a bright future for the protocol.
DPR - HTTP
the dpr header is a client
hints headers which represents the client device pixel ratio (dpr), which is the the number of physical device pixels corresponding to every css pixel.
... note: client
hints are accessible only on secure origins (via tls).
Device-Memory - HTTP
the device-memory header is a device memory api header that works like client
hints header which represents the approximate amount of ram client device has.
... note: client
hints are accessible only on secure origins (via tls).
Index - HTTP
59 early-data client
hints, http, header, request the early-data header is set by an intermediate to indicates that the request has been conveyed in tls early data, and additionally indicates that an intermediary understands the 425 (too early) status code.
... 82 index http, http header, index found 115 pages: 83 keep-alive general header, http, http header, reference the keep-alive general header allows the sender to
hint about how the connection may be used to set a timeout and a maximum amount of requests.
jpmignore - Archive of obsolete content
if your project folder contains a lot of files that aren't necessary for the xpi to run, like documentation, js
hint, etc., you can use .jpmignore as a whitelist instead of a blacklist.
Localization - Archive of obsolete content
zing element attributes this feature is new in firefox 39 you can localize certain attributes of elements with an l10n-id by setting its value with l10n-id.attributename in the properties file like: hello_id.accesskey= h the following attributes are supported: accesskey alt label title placeholder further the localization of the aria attributes aria-label, aria-valuetext and aria-moz-
hint are supported with the same aliases as on firefox os: arialabel ariavaluetext ariamoz
hint using localized strings in javascript to reference localized strings from your main add-on code, you do this: var _ = require("sdk/l10n").get; console.log(_("hello_id")); assigning to "_" in particular is not required, but is a convention from the gettext tools and will make it possible to work wit...
Preferences - Archive of obsolete content
other documentation on preferences preferences api a brief guide to mozilla preferences — describes preferences system from user's/administrator's pov mozilla xpcom interfaces of the preferences system most used interfaces (these are frozen and will not change): nsiprefbranch and nsiprefservice nsiprefbranch2 interface (before gecko 1.8 it was called nsiprefbranc
hinternal) preferences system - an easy way to create a xul options window for your extension or application syncing preferences across clients using sync lxr pages for libpref, the source code module that implements the preferences system a javascript wrapper for preferences api adding preferences to an extension — a simple tutorial with a working extension that illustrates the use of pre...
Tabbed browser - Archive of obsolete content
, where, allowthirdpartyfixup, postdata, referrerurl ) where: "current" current tab (if there aren't any browser windows, then in a new window instead) "tab" new tab (if there aren't any browser windows, then in a new window instead) "tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa "window" new window "save" save to disk (with no filename
hint!) openuilink( url, e, ignorebutton, ignorealt, allowkeywordfixup, postdata, referrerurl ) the following code will open a url in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: ctrl) are being held.
Index of archived content - Archive of obsolete content
xforms building mozilla xforms community developing mozilla xforms implementation status mozilla xforms specials mozilla xforms user interface xforms alert element xforms group element xforms help element xforms
hint element xforms input element xforms label element xforms message element xforms output element xforms range element xforms repeat element xforms secret element xforms select element xforms select1 element xforms submit element xforms switch modu...
slideBar - Archive of obsolete content
jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidt
hintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance.
List of commands - Archive of obsolete content
xr.mozilla.org/seamonkey/sou...okmarkstree.js list of commands (listed alphabetically) browser:addbookmark browser:addbookmarkas browser:addgroupmarkas browser:back browser:editpage browser:find browser:findagain browser:findprev browser:forward browser:home browser:managebookmark browser:open browser:openfile browser:print browser:printpreview browser:savepage browser:searc
hinternet browser:sendpage browser:uploadfile cmd_bm_copy cmd_bm_cut cmd_bm_delete cmd_bm_expandfolder cmd_bm_export cmd_bm_find cmd_bm_import cmd_bm_managefolder cmd_bm_movebookmark cmd_bm_newbookmark cmd_bm_newfolder cmd_bm_newseparator cmd_bm_open cmd_bm_openinnewtab cmd_bm_openinnewwindow cmd_bm_paste cmd_bm_properties cmd_bm_rename cmd_bm_selectall cmd_bm_setnewbookmarkfolde...
XUL Coding Style Guidelines - Archive of obsolete content
they are placed above the actual entity string in the format: <!-- localization note (entity.name): content --> where the <var>entity.name</var> is the entity name (id) for the string (entity value) to be localized, and the content provides helpful
hints to the localizers.
Theme changes in Firefox 2 - Archive of obsolete content
over:active #reload-button:hover #reload-button:hover:active #searchbar[empty="true"] .searchbar-textbox #stop-button:hover #stop-button:hover:active #urlbar-icons-spacer #urlbar-spacer #urlbar[level="high"] #lock-icon:active #urlbar[level="high"] #lock-icon:hover #urlbar[level="low"] #lock-icon:active #urlbar[level="low"] #lock-icon:hover .autocomplete-treebody::-moz-tree-cell(suggest
hint) .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolautocompletecomment) .autocomplete-treebody::-moz-tree-cell-text(suggest
hint, treecolautocompletecomment) .bookmark-item[livemark] .openintabs-menuitem .toolbarbutton-icon .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button:h...
XForms Custom Controls - Archive of obsolete content
the following list shows where the base bindings for our xforms controls are defined: xforms.xml - contains the base bindings for output, label, trigger, submit, case, message,
hint, help, alert, upload and repeat xforms controls.
XForms Input Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a
hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported.
XForms Output Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a
hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the output's value.
XForms Trigger Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a
hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
the prefetch
hints are sent in http headers: link: ; rel=dns-prefetch, ; as=script; rel=preload, ; rel=prerender, ; as=style; rel=preload prefetch attribute value browsers will prefetch content when the prefetch <link> tag directs it to, giving the developer control over what resources should be prefetched.
MDN Web Docs Glossary: Definitions of Web-related terms
k function canonical order canvas card sorting carddav caret cdn certificate authority certified challenge-response authentication character character encoding character set chrome cia cipher cipher suite ciphertext class client
hints closure cms code splitting codec compile compile time computer programming conditional constant constructor continuous media control flow cookie copyleft cors cors-safelisted request header cors-safelisted response header crawler ...
Mobile accessibility - Learn web development
note: for a more complete reference covering the voiceover gestures available and other
hints on accessibility testing on ios, see test accessibility on your device with voiceover.
Responsive design - Learn web development
you can provide multiple sizes along with "
hints" (meta data that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using.
Client-side form validation - Learn web development
if you want to dig into form validation ui requirements, here are some useful articles you should read: smashingmagazine: form-field validation: the errors-only approach smashingmagazine: web form validation: best practices and tutorials six revision: best practices for
hints and validation in web forms a list apart: inline validation in web forms an example that doesn't use the constraint validation api in order to illustrate this, the following is a simplified version of the previous example that works with legacy browsers.
Image gallery - Learn web development
btn.setattribute('class', xxx); btn.textcontent = xxx; overlay.style.backgroundcolor = xxx;
hints and tips you don't need to edit the html or css in any way.
Video and Audio APIs - Learn web development
as a
hint, you can find out the x and y values of the element's left/right and top/bottom sides via the getboundingclientrect() method, and you can find the coordinates of a mouse click via the event object of the click event, called on the document object.
Aprender y obtener ayuda - Learn web development
this article provides some
hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..
Perceived performance - Learn web development
even if an operation is going to take a long time (because of latency or or inavailability of the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful
hints and tips (or jokes, or whatever else you think might be appropriate).
What is web performance? - Learn web development
even if an operation is going to take a long time (because of latency or whatever), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful
hints and tips (or jokes, or whatever else you think might be appropriate).
Handling common accessibility problems - Learn web development
we've already
hinted at some accessibility problems related to javascript, mainly in the area of semantic html — you should always use appropriate semantic html to implement functionality wherever it is available, for example use links and buttons as appropriate.
Handling common HTML and CSS problems - Learn web development
(255,0,0,1); box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4), inset -1px -1px 3px rgba(0,0,0,0.4); } button:hover { background-color: rgba(255,0,0,0.5); } button:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4), inset -1px -1px 3px rgba(255,255,255,0.4); } here we are providing an rgba background-color that changes opacity on hover to give the user a
hint that the button is interactive, and some semi-transparent inset box-shadow shades to give the button a bit of texture and depth.
Accessibility API cross-reference
n/a accessible_active_descendant_property aria-activedescendant critical info to convey immediately alert_high n/a n/a aria-live=assertive info that's important, but does not require immediacy alert_medium n/a n/a aria-live=polite low-priority info such as a tip or
hint alert_low n/a n/a n/a this object is changing or moving rapidly animated n/a n/a n/a indicates that the user input is currently directed to that object and it is "armed for selection." example: a highlighted menu item or a pressed push button.
Adding a new event
however, there are some
hints: set meventisinternal in the constructor of the most descendant class because each constructor creates dummy internal event instance at calling constructors of its super class.
Adding a new CSS property
see nschange
hint.h for documentation (or if that's not sufficient, see restylemanager::processrestyledframes).
Debugging JavaScript
strict code checking if you set the pref javascript.options.strict to true, the javascript engine gives you more types of warnings on the error console, most of which
hint at code bugs that are easy to oversee or even bad syntax.
The Firefox codebase: CSS Guidelines
generally, when specifying -moz-appearance: foo; you're giving
hints as to how something should act, however -moz-appearance: none; is probably saying 'ignore browser preconceptions - i want a blank sheet', so that's more visual.
Embedding Tips
hint, add a native message processing loop after the call to saveuri that terminates when onstatechange indicates persistence has finished..
AddonManager
callback, in string mimetype ) parameters file the nsifile where the add-on is located callback a callback to pass the addoninstall to mimetype an optional mimetype
hint for the add-on getallinstalls() asynchronously gets all current addoninstalls.
Introduction to NSPR
priorities for nspr threads are based loosely on
hints provided by the client and sometimes constrained by the underlying operating system.
PR_Wait
the resumption from the wait is merely a
hint that a change of state has occurred.
sslfnc.html
if the socket is already connected before ssl gets involved, you must provide this extra
hint.
sslintro.html
if the socket is already connected before ssl gets involved, you must provide this extra
hint.
Index
45 js::getfirstargumentastype
hint jsapi reference, reference, référence(2), spidermonkey js::getfirstargumentastype
hint converts first argument of @@toprimitive method to jstype.
JS_ValueToFunction
the object's jsobjectops.defaultvalue method is called with
hint=jstype_function.) js_valuetofunction returns a pointer to the converted function.
JS_ValueToObject
(implementation note: the object's jsobjectops.defaultvalue method is called with
hint=jstype_object.) the resulting object is subject to garbage collection unless the variable *objp is protected by a local root scope, an object property, or the js_addroot function.
SpiderMonkey 45
js_setcurrentembeddertimefunction (bug 1159507) js_getcurrentembeddertime (bug 1159507) js_mayresolvestandardclass (bug 1155946) js_getiteratorprototype (bug 1225392) js_globallexicalscope (bug 1202902) js_hasextensiblelexicalscope (bug 1202902) js_extensiblelexicalscope (bug 1202902) js_initreflectparse (bug 987514) js::toprimitive (bug 1206168) js::getfirstargumentastype
hint (bug 1054756) js::objecttocompletepropertydescriptor (bug 1144366) js_setimmutableprototype (bug 1211607) js_getownucpropertydescriptor (bug 1211607) js_hasownpropertybyid (bug 1211607) js_hasownproperty (bug 1211607) js_deleteucproperty (bug 1211607) js::newfunctionfromspec (bug 1054756) js::compilefornonsyntacticscope (bug 1165486) js_checkforinterrupt (bug 1058695) js::mapdelete (bug...
Setting up CDT to work on SpiderMonkey
eclipse's cdt has some pretty decent features that make it an attractive environment to work in when you are interested in getting code
hints, autocompletion, function, and field usage information and general ide goodness for c/c++.
Gecko object attributes
applied to: any role exposed via aria: aria-atomic live a
hint as to whether changes within the current region or subtree should be automatically presented.
Gecko Roles
role_tooltip represents a tooltip that provides helpful
hints; this is generally displayed at the mouse cursor position.
An Overview of XPCOM
you can not have two methods with the same name that take different parameters, and the workaround - having multiple function names - isn't pretty: void foowit
hint(in int x); void foowithstring(in string x); void foowithuri(in nsiuri x); however, these shortcomings pale in comparison to the functionality gained by using xpidl.
Mozilla internal string guide
use: printf("%s\n", ns_convertutf16toutf8(yourstring).get()); sequence of appends without reallocating setcapacity() allows you to give the string a
hint of the future string length caused by a sequence of appends (excluding appends that convert between utf-16 and utf-8 in either direction) in order to avoid multiple allocations during the sequence of appends.
nsIAccessibilityService
ssible createhtmltableheadaccessible(in nsidomnode adomnode); nsiaccessible createhtmltextaccessible(in nsisupports aframe); nsiaccessible createhtmltextfieldaccessible(in nsisupports aframe); nsiaccessible createhtmlcaptionaccessible(in nsisupports aframe); nsiaccessible getaccessible(in nsidomnode anode, in nsipresshell apresshell, in nsiweakreference aweakshell, inout nsiframe frame
hint, out boolean aishidden); nsiaccessible addnativerootaccessible(in voidptr aatkaccessible); void removenativerootaccessible(in nsiaccessible arootaccessible); void invalidatesubtreefor(in nsipresshell apresshell, in nsicontent achangedcontent, in pruint32 aevent); methods removenativerootaccessible() void removenativerootaccessible( in nsiaccessible arootaccessible ); inval...
nsIHttpChannel
the origin of the referring uri referrer_policy_origin_when_xorigin same as the default; only send the origin of the referring uri for cross-origin requests referrer_policy_unsafe_url always send the referrer, even when downgrading from https to http attributes attribute type description allowpipelining boolean this attribute is a
hint to the channel to indicate whether or not the underlying http transaction should be allowed to be pipelined with other transactions.
nsIPropertyBag
to do this use nsipropertybag: services.sysinfo.getproperty("version"); //output 5.1 services.sysinfo.getproperty("name"); //output windows_nt services.sysinfo.getproperty("arch"); //output x86 services.sysinfo.getproperty("haswindowstouc
hinterface"); //outputs false or true if windows touch is there consult the uxp repo (//github.com/realityripple/uxp/blob/master/xpcom/base/nssysteminfo.cpp) for the properties supported.
nsIWebNavigation
load_flags_from_external 4096 a
hint this load was prompted by an external program: take care!
Getting Started Guide
the document some com ownership guidelines provides some
hints on when ownership is needed.
XUL Overlays
you can specify a position attribute on a node in the overlay to provide a
hint for insertion into the master document.
Creating a Custom Column
as you develop your custom extension, please revisit this article and add any helpful
hints that you find along the way!
Standard OS Libraries
= new ctypes.int(); let mask = new ctypes.unsigned_int(); xquerypointer(display, rootwindow, root.address(), child.address(), rootx.address(), rooty.address(), windowx.address(), windowy.address(), mask.address() ); xclosedisplay(display); components.utils.reporterror(rootx.value + "," + rooty.value); x11.close(); resources for x11 extended window manager
hints githubgists :: noitidart / search · x11 - x11 js-ctypes snippets that can be copied and pasted to scratchpad xcb all the above methods, gdk, gtk, and x11/xlib are meant to be used on the main thread.
Debugging service workers - Firefox Developer Tools
registration is done with a block of code along these lines, using the register() method: if('serviceworker' in navigator) { navigator.serviceworker .register('sw.js') .then(function() { console.log('service worker registered'); }); } if you get the path wrong, for example, you'll get an error in the web console giving you a
hint as to what's wrong, which depends on what exactly is wrong with the code.
AudioContextLatencyCategory - Web APIs
audiocontextlatencycategory can be used when constructing a new audiocontext by passing one of these values as the latency
hint option in the audiocontext() constructor's options dictionary.
FetchEvent.respondWith() - Web APIs
exceptions exception notes networkerror a network error is triggered on certain combinations of fetchevent.request.mode and response.type values, as
hinted at in the "global rules" listed above.
FileHandle API - Web APIs
this.result.createobjectstore('files'); } idbreq.onsuccess = function () { var db = this.result; // let's create a new file var handlereq = db.mozcreatefilehandle("test.txt", "plain/text"); handlereq.onsuccess = function () { var myfilehandle = this.result; var store = db.transaction(['files'], 'readwrite').objectstore('files'); // let's store the file permanently //
hint: it could be handy to use the file name as the storage key var storereq = store.add(myfilehandle, myfilehandle.name); storereq.onsuccess = function () { console.log('the file has been successfully stored and can be retrieved anytime.') } } } a file stored that way is physically put on the device.
HTMLElement - Web APIs
htmlelement.attac
hinternals() attaches an elementinternals instance to the custom element.
HTMLTextAreaElement - Web APIs
placeholder string: returns / sets the element's placeholder attribute, containing a
hint to the user about what to enter in the control.
MediaStreamTrack - Web APIs
mediastreamtrack.content
hint a string that may be used by the web application to provide a
hint as to what type of content the track contains to guide how it should be treated by api consumers.
Resize Observer API - Web APIs
to achieve this, a limited solution would be to listen to changes to a suitable event that
hints at the element you are interested in changing size (e.g.
SVGImageElement - Web APIs
svgimageelement.decoding returns a domstring representing a
hint given to the browser on how it should decode the image.
SubtleCrypto.digest() - Web APIs
hint: if you are looking here for how to create an keyed-hash message authentication code (hmac), you need to use the subtlecrypto.sign() instead.
WebGLRenderingContext.bufferData() - Web APIs
adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage
hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
WebGLRenderingContext.getBufferParameter() - Web APIs
adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.transform_feedback_buffer, gl.uniform_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage
hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
Using the Web Speech API - Web APIs
var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); var
hints = document.queryselector('.
hints'); var colorhtml= ''; colors.foreach(function(v, i, a){ console.log(v, i); colorhtml += '<span style="background-color:' + v + ';"> ' + v + ' </span>'; });
hints.innerhtml = 'tap/click then say a color to change the background color of the app.
ARIA Screen Reader Implementors Guide - Accessibility
interpreting wai-aria live region markup live changes are
hints: in general live region markup is provided by the author as
hints, and the assistive technology may allow for global, site or even region-specific settings, as well as heuristics to help with live changes on pages that have no wai-aria
hints.
Forms - Accessibility
the following pages provide various techniques for improving the accessibility of web forms: basic form
hints: adding
hints and descriptions for invalid or required fields alerts: using alerts to provide client-side validation error messages multi-part labels: enabling complex form labels with a control inside each label see also the yahoo!
ARIA - Accessibility
for example, aria enables accessible navigation landmarks in html4, javascript widgets, form
hints and error messages, live content updates, and more.
Accessibility documentation index - Accessibility
10 basic form
hints aria, accessibility, forms when implementing forms using traditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
@font-face - CSS: Cascading Style Sheets
to provide the browser with a
hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a format() function: src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype"); the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
CSS data types - CSS: Cascading Style Sheets
index the data types defined by the set of css specifications include the following: <angle> <angle-percentage> <angular-color-
hint> <angular-color-stop> <attr-fallback> <attr-name> <basic-shape> <blend-mode> <calc-product> <calc-sum> <calc-value> <color> <color-stop> <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <posi...
Cubic Bezier Generator - CSS: Cascading Style Sheets
tx.beginpath(); ctx.strokestyle = 'red'; ctx.moveto(cx(x2), cy(y2)); ctx.lineto(cx(1), cy(1)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.moveto(cx(x2), cy(y2)); ctx.arc(cx(x2), cy(y2), radius, 0, 2 * math.pi); ctx.stroke(); ctx.fill(); ctx.closepath(); // draw the p1(1,1) point (with dashed
hints) ctx.beginpath(); ctx.moveto(cx(1), cy(1)); ctx.strokestyle = 'lightgrey'; ctx.lineto(cx(0), cy(1)); ctx.moveto(cx(1), cy(1)); ctx.lineto(cx(1), cy(0)); ctx.stroke(); ctx.closepath(); ctx.beginpath(); ctx.strokestyle = "black"; ctx.fillstyle = "black"; ctx.arc(cx(1), cy(1), radius, 0, 2 * math.pi); ...
Universal selectors - CSS: Cascading Style Sheets
recommendation defines behavior regarding namespaces and adds
hint that omitting the selector is allowed within pseudo-elements css level 2 (revision 1)the definition of 'universal selector' in that specification.
text-size-adjust - CSS: Cascading Style Sheets
formal definition initial valueauto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).applies toall elementsinheritedyespercentagesyes, refer to the corresponding size of the text fontcomputed valueas specifiedanimation typediscrete formal syntax none | auto | <percentage> examples basic disabling usage as
hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none: p { -webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification status comment css mobile text size adjustment module level 1the definition of 'text-size-adjust' in that s...
HTML attribute: accept - HTML: Hypertext Markup Language
formats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the types of the selected files; it simply provides
hints for browsers to guide users towards selecting the correct file types.
<menuitem> - HTML: Hypertext Markup Language
(if specified, the type attribute of the <menu> element must be popup; if missing, the parent element of the <menu> must itself be a <menu> in the popup menu state.) permitted aria roles none dom interface htmlmenuitemelement attributes this element includes the global attributes; in particular title can be used to describe the command, or provide usage
hints.
Link types: dns-prefetch - HTML: Hypertext Markup Language
the dns-prefetch keyword for the rel attribute of the <link> element is a
hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively performing dns resolution for that origin.
Link types: preconnect - HTML: Hypertext Markup Language
the preconnect keyword for the rel attribute of the <link> element is a
hint to browsers that the user is likely to need resources from the target resource's origin, and therefore the browser can likely improve the user experience by preemptively initiating a connection to that origin.
Link types: prefetch - HTML: Hypertext Markup Language
the prefetch keyword for the rel attribute of the <link> element is a
hint to browsers that the user is likely to need the target resource for future navigations, and therefore the browser can likely improve the user experience by preemptively fetching and caching the resource.
Link types: prerender - HTML: Hypertext Markup Language
the prerender keyword for the rel attribute of the <link> element is a
hint to browsers that the user might need the target resource for the next navigation, and therefore the browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
lso see it live): <head> <meta charset="utf-8"> <title>web font example</title> <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> <link href="style.css" rel="stylesheet"> </head> <body> … </body> not only are we providing the mime type
hints in the type attributes, but we are also providing the crossorigin attribute to handle the cors issue.
Accept-Language - HTTP
this header is a
hint to be used when the server has no way of determining the language via another way, like a specific url, that is controlled by an explicit user decision.
Keep-Alive - HTTP
the keep-alive general header allows the sender to
hint about how the connection may be used to set a timeout and a maximum amount of requests.
Save-Data - HTTP
, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481770 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] specifications specification title draft-grigorik-http-client-
hints-03, section 7: save-data http client
hints ...
HTTP resources and specifications - HTTP
e standard track rfc 2397 the "data" url scheme proposed standard rfc 3986 uniform resource identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header informational (expired) draft spec http client
hints ietf draft rfc 7578 returning values from forms: multipart/form-data proposed standard rfc 6266 use of the content-disposition header field in the hypertext transfer protocol (http) proposed standard rfc 2183 communicating presentation information in internet messages: the content-disposition header field only a subset of syntax of the content-dis...
HTTP response status codes - HTTP
103 early
hints this status code is primarily intended to be used with the link header, letting the user agent start preloading resources while the server prepares a response.
Closures - JavaScript
the helptext array defines three helpful
hints, each associated with the id of an input field in the document.
JavaScript modules - JavaScript
modules and classes as we
hinted at earlier, you can also export and import classes; this is another option for avoiding conflicts in your code, and is especially useful if you've already got your module code written in an object-oriented style.
Lexical grammar - JavaScript
\r u+2028 line separator <ls> wikipedia u+2029 paragraph separator <ps> wikipedia comments comments are used to add
hints, notes, suggestions, or warnings to javascript code.
The building blocks of responsive design - Progressive web apps (PWAs)
another proposal, srcset, was put forward by apple and takes a slightly different approach, instead providing a new srcset attribute for <img> inside which image references are placed along with "
hints" that the browser can use to work out which image is most suitable to display given its viewport size, resolution, etc.
string - SVG: Scalable Vector Graphics
the string attribute is a
hint to the user agent, and specifies a list of formats that the font referenced by the parent <font-face-uri> element supports.
Compatibility sources - SVG: Scalable Vector Graphics
illa.org/en/svg_in_firefox together with its revision history for firefox http://www.webkit.org/projects/svg/status.xml together with its recorded archive for webkit, safari and chrome http://www.opera.com/docs/specs/opera9/svg/ and accompanying pages for opera >= 9, http://www.opera.com/docs/specs/opera8/ for opera 8 http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx for
hints on ie9 support status the svg support charts at codedread.com for basic checks against the w3c test suite wikipedia for basic
hints, not normative ...