Using templates and slots - Web Components
this element and its contents are not rendered in the dom, but it can still be referenced using javascript.
... let's look at a trivial quick example: <template id="my-paragraph"> <p>my paragraph</p> </template> this won't appear in your page until you grab a reference to it with javascript and then append it to the dom, using something like the following: let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; document.body.appendchild(templatecontent); although trivial, you can already start to see how this could be useful.
... using templates with web components templates are useful on their own, but they work even better with web components.
...And 8 more matches

Using the W3C DOM - Archive of obsolete content
using w3c standards means that code will run in compliant browsers with minimal need for cross-browser support, whereas code based on proprietary standards requires much more effort to be compatible with multiple user agents.
...t supported in the w3c document object model: document.layers[] id_attribute_value document.all document.all.id_attribute_value document.all[id_attribute_value] the following form related properties (originally from internet explorer) are not supported in the w3c document object model: formname.inputname.value inputname.value formctrlname document.forms(0) (note: document.forms[0] (using square brackets) uses the dom standard forms collection) scripts that use these properties will throw errors in most standards-compliant browsers.
...e, the following short sample dynamically sets the left margin of a <div> element with an id of "inset" to half an inch: // in the html: <div id="inset">sample text</div> document.getelementbyid("inset").style.marginleft = ".5in"; note: internet explorer 5 through 7 have a flawed implementation of getelementbyid(), which returns the first element with a matching name or id (id versus name when using getelementbyid, msdn: getelementbyid method).
...And 7 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
in previous guides we’ve looked at placing items by the lines created by defining grid tracks and also how to place items using named template areas.
...this time i’ll create the grid using named lines.
...when choosing the name you need to avoid words that might appear in the specification and be confusing - such as span.
...And 7 more matches

Using the WebAssembly JavaScript API - WebAssembly
if you have already compiled a module from another language using tools like emscripten, or loaded and run the code yourself, the next step is to learn more about using the other features of the webassembly javascript api.
...this is achieved using the webassembly.compilestreaming() and webassembly.instantiatestreaming() methods.
... note: this is a convoluted, longwinded example that achieves very little, but it does serve to illustrate what is possible — using webassembly code alongside javascript in your web applications.
...And 7 more matches

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
using eval in add-ons is almost always unnecessary, and many times even a security vulnerability.
... moreover, code using eval is harder to parse for a human mind, is often pretty complex, and relies on assumptions that are not necessarily true in the future or even now.
...there is simply no need to parse json using eval.
...And 6 more matches

Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
(see talk:properly_using_css_and_javascript_in_xhtml_documents of this ascertation.
... - xmlguru) inline style and script containing double dashes another problem with using comments to surround javascript in xhtml is related to the problems which can occur if comments contain double dashes (——).
... <script type="text/javascript"> <!-- var i; var sum = 0; for (i = 10; i > 0; --i) { sum += i; } // --> </script> using cdata instead of comments properly enclosing script contents inside of cdata sections can cause problems in downlevel browsers which do not understand xml.
...And 6 more matches

Using the Right Markup to Invoke Plugins - Archive of obsolete content
it discusses the object element and the embed element, with details about using the most apt html to invoke java in a web page as well.
...however, there are a few caveats that developers ought to bear in mind when using the object element with mozilla-based browsers such as netscape 7 and in ie: caveats if you use one single object element for both browsers (as in the above example), it is not possible to provide a cross-browserobtainment mechanism for streamlined download.
..."high" /> <param name="swliveconnect" value="true" /> <p>you need flash -- get the latest version from <a href="http://www.macromedia.com/downloads/"> here.</a></p> </object> </object> web authors have to specify anobtainment mechanism in mozilla-based browsers -- the browser won't automatically retrieve plugins that are missing if you don't specify where to get the plugin from using the codebase attribute.
...And 6 more matches

Accessing the Windows Registry Using XPCOM
the examples in this document are all written in javascript using xpcom.
...roductid: var wrk = components.classes["@mozilla.org/windows-registry-key;1"] .createinstance(components.interfaces.nsiwindowsregkey); wrk.open(wrk.root_key_local_machine, "software\\microsoft\\windows\\currentversion", wrk.access_read); var id = wrk.readstringvalue("productid"); wrk.close(); this example, while simple, shows several important things about using the interface.
... notice in the open() call that the root key to use is specified using the named constants available on the nsiwindowsregkey interface, in this case root_key_local_machine, which corresponds to hkey_local_machine in the windows registry.
...And 6 more matches

Using readable streams - Web APIs
note: if you are looking for information on writable streams try using writable streams instead.
...this is done using the readablestream.getreader() method: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => response.body) .then(body => { const reader = body.getreader(); invoking this method creates a reader and locks it to the stream — no other reader may read this stream until this reader is released, e.g.
... also note that the previous example can be reduced by one step, as response.body is synchronous and so doesn't need the promise: // fetch the original image fetch('./tortoise.png') // retrieve its body as readablestream .then(response => { const reader = response.body.getreader(); reading the stream now you’ve got your reader attached, you can read data chunks out of the stream using the readablestreamdefaultreader.read() method.
...And 6 more matches

Using CSS gradients - CSS: Cascading Style Sheets
we'll start by introducing linear gradients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line.
... <div class="diagonal-gradient"></div> div { width: 200px; height: 100px; } .diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } using angles if you want more control over its direction, you can give the gradient a specific angle.
... <div class="angled-gradient"></div> div { width: 120px; height: 120px; } .angled-gradient { background: linear-gradient(70deg, blue, pink); } when using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction.
...And 6 more matches

Using media queries - CSS: Cascading Style Sheets
to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods.
...multiple queries can be combined in various ways by using logical operators.
...except when using the not or only logical operators, the media type is optional and the all type will be implied.
...And 6 more matches

Using the application cache - HTML: Hypertext Markup Language
using this application cache feature is highly discouraged; it’s in the process of being removed from the web platform.
...the offline cache can be cleared for each site separately using the "remove..." button in tools -> options -> advanced -> network -> offline data.
...resources can be specified using either absolute or relative urls (e.g., index.html).
...And 6 more matches

Using the Browser API
we'll be using this term throughout the current article, and other parts of the documentation.
...t (see the full javascript listing.) wiring up the back and forward buttons early on in the code we implement two simple event listeners to move the browser back and forward in history when the relevant buttons are pressed: back.addeventlistener('touchend',function() { browser.goback(); }); fwd.addeventlistener('touchend',function() { browser.goforward(); }); the functions can be handled using the browser api htmliframeelement.goback() and htmliframeelement.goforward() methods.
...when you tap the url bar, you can enter a url using the built-in firefox os keyboard (although note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.).
...And 5 more matches

Using the Screen Capture API - Web APIs
starting screen capture: async/await style async function startcapture(displaymediaoptions) { let capturestream = null; try { capturestream = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { console.error("error: " + err); } return capturestream; } you can write this code either using an asynchronous function and the await operator, as shown above, or using the promise directly, as seen below.
... note: for privacy and security reasons, screen sharing sources are not enumerable using enumeratedevices().
... using the captured stream the promise returned by getdisplaymedia() resolves to a mediastream that contains at least one video stream that contains the screen or screen area, and which is adjusted or filtered based upon the constraints specifed when getdisplaymedia() was called.
...And 5 more matches

Background audio processing using AudioWorklet - Web APIs
the process of creating an audio processor using javascript, establishing it as an audio worklet processor, and then using that processor within a web audio application is the topic of this article.
... it's worth noting that because audio processing can often involve substantial computation, your processor may benefit greatly from being built using webassembly, which brings near-native or fully native performance to web apps.
... implementing your audio processing algorithm using webassembly can make it perform markedly better.
...And 5 more matches

Using the Web Speech API - Web APIs
note: on some browsers, like chrome, using speech recognition on a web page involves a server-based recognition engine.
...this is done using the speechrecognition() constructor.
... we also create a new speech grammar list to contain our grammar, using the speechgrammarlist() constructor.
...And 5 more matches

Using CSS transitions - CSS: Cascading Style Sheets
using animations with auto may lead to unpredictable results, depending on the browser and its version, and should be avoided.
... defining transitions css transitions are controlled using the shorthand transition property.
...y: opacity, left, top, height; transition-duration: 3s, 5s, 3s, 5s; } similarly, if any property's value list is longer than that for transition-property, it's truncated, so if you have the following css: div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; } this gets interpreted as: div { transition-property: opacity, left; transition-duration: 3s, 5s; } using transitions when highlighting menus a common use of css is to highlight items in a menu as the user hovers the mouse cursor over them.
...And 5 more matches

Using IO Timeout And Interrupt On NT - Archive of obsolete content
this technical memo is a cautionary note on using netscape portable runtime's (nspr) io timeout and interrupt on windows nt 3.51 and 4.0.
...on windows nt, nspr io is implemented using nt's overlapped (also called asynchronous) io.
... when a thread calls an io function, the thread issues an overlapped io request using the overlapped buffer in its <tt>prthread</tt> structure.
...And 4 more matches

Using XPCOM Utilities to Make Things Easier
using these declaration macros not only saves a tremendous amount of time when you're writing the code, it can also save time if you make changes to your idl file, since the c++ header file will then automatically include the updated list of methods to be supported.
...interface must be generated by xpidl using the macros described here, the code for the weblock component has gone from around 340 lines of code to just under 40.
... weblock2.cpp the listing below shows the generic module code from weblock1.cpp using the macros described in this chapter: weblock2.cpp #include "nsigenericfactory.h" #include "nsisupportsutils.h" #define sample_cid \ { 0x777f7150, 0x4a2b, 0x4301, \ { 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}} class sample: public nsisupports { public: sample(); virtual ~sample(); ns_decl_isupports }; sample::sample() { // note: in newer versions of gecko (1.3 or later) // you don't have to do this: ns_init_isupports(); } sample::~sample() { } ns_impl_isupports1(sample, nsisupports); ns_generic_factory_constructor(s...
...And 4 more matches

Examples of web and XML development using the DOM - Web APIs
this chapter provides some longer examples of web and xml development using the dom.
... width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's css style properties, which can be retrieved and set from the dom.
...le>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.
...And 4 more matches

Using FormData Objects - Web APIs
the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest.
... sending files using a formdata object you can also send files using formdata.
...put type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <div></div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 20...
...And 4 more matches

Using the link role - Accessibility
fire an accessible link event using the operating system's accessibility api if it supports it.
... examples this example shows how to implement a fake link using a <span> element.
... this includes javascript to grab the location and handle navigating to the new location using window.open() via clicking, and using keyboard, css to give the desired visuals of a link, the tabindex="0" attribute to make it keyboard-focussable, and role="link" to make it recognised as a link by assistive technology.
...And 4 more matches

Using shadow DOM - Web Components
this article covers the basics of using the shadow dom.
... you can affect the nodes in the shadow dom in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow dom tree inside a <style> element.
... basic usage you can attach a shadow root to any element using the element.attachshadow() method.
...And 4 more matches

Using XPInstall to Install Plugins - Archive of obsolete content
this article presents a guideline for improving the plugin installation experience for netscape gecko browsers using xpinstall.
...the benefit of using xpinstall is to provide a streamlined installation mechanism.
...an example might be that the current browser is netscape 7, but later, the user downloads a beta of the aol software using netscape gecko.
...And 3 more matches

Using JavaScript code modules
modules can also be used to create global javascript singletons that previously required using javascript xpcom objects.
...the module is loaded into a specific javascript scope, such as xul script or javascript xpcom script, using components.utils.import() or components.utils["import"]().
...(the url in the example is "resource://app/my_module.jsm".) code modules can only be loaded using a chrome: (), resource:, or file: url.
...And 3 more matches

Investigating leaks using DMD heap scan mode
it is particularly useful if you have no idea what is causing the leak.
...conveniently, you can usually do both at once using the cycle collector log.
... identifying the root in the cycle collector log the next step is to figure out why the cycle collector could not collect the window, using the find_roots.py script from the heapgraph repository.
...And 3 more matches

Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
nickname> [-x <\"\">] -m <serialnumber> ]"); fprintf(stderr, "%s %s\n --to put cert in header\n\n", progname, "-h -n <nickname> -b <headerfilename> [-v <\"\">]"); fprintf(stderr, "%s %s\n --to find public key from cert in header and encrypt\n\n", progname, "-e -b <headerfilename> -i <ipfilename> -e <encryptfilename> "); fprintf(stderr, "%s %s\n --decrypt using corresponding private key \n\n", progname, "-d -b <headerfilename> -e <encryptfilename> -o <opfilename>"); fprintf(stderr, "%s %s\n --sign using private key \n\n", progname, "-s -b <headerfilename> -i <infilename> "); fprintf(stderr, "%s %s\n --verify using public key \n\n", progname, "-v -b <headerfilename> -i <ipfilename> "); fprintf(stde...
... file name is not found\n", progname, dbdir, headerfilename, encryptedfilename); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-d -d <dbdirpath> -b <headerfilename> -e <encryptfilename> -o <opfilename>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return result as secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[4096]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0)...
...; if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfailure; goto cleanup; } /* sign using private key */ sgn = sgn_newcontext(sec_oid_pkcs1_md5_with_rsa_encryption, pk); if (!sgn) { pr_fprintf(pr_stderr, "unable to create context for signing\n"); rv = secfailure; goto cleanup; } rv = sgn_begin(sgn); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_begin\n"); goto cleanup; } while ((nb = pr_read(infile, ibuf, sizeof(ibuf))) > 0) { rv = sgn_update(sgn, ibuf, nb); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_update\n"); goto cleanu...
...And 3 more matches

Manipulating bookmarks using Places
this article offers examples for how to perform common bookmark management tasks using the bookmarks service.
... initiating the bookmarks service as is the case with nearly all interfaces, before you can use the bookmarks service, you need to get access to it: var bmsvc = components.classes["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); creating a bookmark folder creating a new bookmark folder is done using the nsinavbookmarksservice.createfolder() method.
...the uri for the bookmark needs to be specified using an nsiuri object.
...And 3 more matches

Using XPCOM Components
« previousnext » one of the best ways to begin working with xpcom - especially when you are designing the interface to a component that will be used by others, as we do in starting weblock - is to look at how clients are already using xpcom components.
...whenever a user accesses the cookie manager dialog to view, organize, or remove cookies that have been stored on the system, they are using the cookiemanager component behind the scenes.
...we'll be using this component from javascript ourselves as part of this tutorial[cookie-manager-in-tutorial].
...And 3 more matches

Using the CSS Painting API - Web APIs
to programmatically create an image used by a css stylesheet we need to work through a few steps: define a paint worklet using the registerpaint() function register the worklet include the paint() css function to elaborate over these steps, we're going to start by creating a half-highlight background, like on this header: css paint worklet in an external script file, we employ the registerpaint() function to name our css paint worklet.
... using the paint worklet to use the paint worklet, we need to register it using addmodule() and include it in our css, ensuring the css selector matches a dom node in our html registering the worklet the setup and design of our paint worklet took place in the external script shown above.
... css.paintworklet.addmodule('nameofpaintworkletfile.js'); this can be done using the paint worklet's addmodule() method in a <script> within the main html or in an external javascript file linked to from the document.
...And 3 more matches

Using Fetch - Web APIs
this kind of functionality was previously achieved using xmlhttprequest.
... fetch() won't can receive cross-site cookies; you can’t can establish a cross site session using fetch.
... const data = { username: 'example' }; fetch('https://example.com/profile', { method: 'post', // or 'put' headers: { 'content-type': 'application/json', }, body: json.stringify(data), }) .then(response => response.json()) .then(data => { console.log('success:', data); }) .catch((error) => { console.error('error:', error); }); uploading a file files can be uploaded using an html <input type="file" /> input element, formdata() and fetch().
...And 3 more matches

Using the MediaStream Recording API - Web APIs
it even gives you a visualization of your device's sound input, using the web audio api.
...this is your entry point into using the mediarecorder api — the stream is now ready to be captured into a blob, in the default encoding format of your browser.
...we register an event handler to do this using mediarecorder.ondataavailable: let chunks = []; mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } note: the browser will fire dataavailable events as needed, but if you want to intervene you can also include a timeslice when invoking the start() method — for example start(10000) — to control this interval, or call mediarecorder.requestdata() to trigger an event when y...
...And 3 more matches

Using the Notifications API - Web APIs
this article looks at the basics of using this api in your own apps.
...it stores data locally using indexeddb and notifies users when tasks are due using system notifications.
...we did this using the following: function checknotificationpromise() { try { notification.requestpermission().then(); } catch(e) { return false; } return true; } we basically try to see if the .then() method is available on requestpermission().
...And 3 more matches

Using the User Timing API - Web APIs
function display_marks(ev) { if (performance.getentries === undefined) { log("display marks: performance.getentries not supported", 0); return; } log("display marks", 0); // display each mark using getentries() var entries = performance.getentries(); var j=0; for (var i=0; i < entries.length; i++) { if (entries[i].entrytype == "mark") { if (j == 0) { log("= getentries()", 0); j++ } log("...
... [" + i + "] = " + entries[i].name, 0); } } // display each mark using getentriesbytype() entries = performance.getentriesbytype("mark"); for (var i=0; i < entries.length; i++) { if (i == 0) log("= getentriesbytype('mark')", 0); log("...
... [" + i + "] = " + entries[i].name, 0); } // display each mark using getentriesname(); must look for each mark separately entries = performance.getentriesbyname("mark-1","mark"); for (var i=0; i < entries.length; i++) { if (i == 0) log("= getentriesbyname('mark-1', 'mark')", 0); log("...
...And 3 more matches

Using bounded reference spaces - Web APIs
there are many uses for bounded reference spaces, including projects such as virtual paint studios or 3d construction, modeling, or sculpting systems; training simulations or lesson scenarios; dance or other performance-based games; or the preview of 3d objects in the real world using augmented reality.
...it's difficult (and would probably be fairly confusing) to create a virtual world that's larger than the physical space available to the user if you're mapping their real-world movement into the virtual environment.
...the boundary is then defined using an array of 2d coordinates, specifying only the x and z components since y is always 0.
...And 3 more matches

Using the alert role - Accessibility
fire an accessible alert event using the operating system's accessibility api if it supports it.
... let myalert = document.createelement("p"); myalert.setattribute("role", "alert"); let myalerttext = document.createtextnode("you must agree with our terms of service to create an account."); myalert.appendchild(myalerttext); document.body.appendchild(myalert); note: the same result can be achieved with less code when using a script library like jquery: $("<p role='alert'>you must agree with our terms of service to create an account.</p>").appendto(document.body); example 3: adding alert role to an existing element sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element.
...the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3 checkboxes selected: document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using css, making it visible will cause the alert to fire as if it was just added to the page.
...And 3 more matches

Using feature queries - CSS: Cascading Style Sheets
feature queries are created using the css at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide css that will only run based on the result of that test.
... in this guide you will learn how to implement progressive enhancement using feature queries.
...in practice however, when using feature queries for progressive enhancement, this doesn't matter.
...And 3 more matches

Using Promises - JavaScript
ction successcallback(result) { console.log("audio file ready at url: " + result); } function failurecallback(error) { console.error("error generating audio file: " + error); } createaudiofileasync(audiosettings, successcallback, failurecallback); modern functions return a promise that you can attach your callbacks to instead: if createaudiofileasync() were rewritten to return a promise, using it could be as simple as this: createaudiofileasync(audiosettings).then(successcallback, failurecallback); that's shorthand for: const promise = createaudiofileasync(audiosettings); promise.then(successcallback, failurecallback); we call this an asynchronous function call.
... one of the great things about using promises is chaining.
... creating a promise around an old callback api a promise can be created from scratch using its constructor.
...And 3 more matches

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
but instead of relying only on user actions, we can do more, using push messages and notifications to automatically re-engage and deliver new content whenever it is available.
... immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(result) { if(result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
...the app's service worker will receive data from the push server, which can then be shown using the notifications system, or another mechanism if desired.
...And 3 more matches

Using custom elements - Web Components
a custom element's class object is written using standard es 2015 class syntax.
... you'll learn more about these in the using the lifecycle callbacks section below.
...d put it inside the info span info.textcontent = this.getattribute('data-text'); // create some css to apply to the shadow dom const style = document.createelement('style'); style.textcontent = '.wrapper {' + // css truncated for brevity // attach the created elements to the shadow dom this.shadowroot.append(style,wrapper); finally, we register our custom element on the customelementregistry using the define() method we mentioned earlier — in the parameters we specify the element name, and then the class name that defines its functionality: customelements.define('popup-info', popupinfo); it is now available to use on our page.
...And 3 more matches

Using the Stylesheet Service - Archive of obsolete content
the examples in this document are all written in javascript using xpcom.
... using the api the string "chrome://myext/content/myext.css" in the examples below is just an example.
... be very careful with your css when using agent_sheet stylesheets.
...And 2 more matches

Using Remote XUL - Archive of obsolete content
this also means you can't load xul using file:// urls unless you set the preference dom.allow_xul_xbl_for_file to true.
...the remote xul manager extension lets you manage this whitelist, which is maintained using nsipermissionmanager, by creating entries of type "allowxulxbl", like this: components.classes["@mozilla.org/permissionmanager;1"] .getservice(components.interfaces.nsipermissionmanager) .add(uri, 'allowxulxbl', components.interfaces.nsipermissionmanager.allow_action); xul (pronounced like "zool"), which is short for xml-based user interface language, is an xml-based language for describing application interfaces.
... note: the downside to using xul is that it only works with browsers that understand it.
...And 2 more matches

Using SSH to connect to CVS - Archive of obsolete content
introduction this document is a guide to setting up access to cvs.mozilla.org using ssh.
...this can be done using a unix-style find and perl: find .
... avoiding passphrase requests you can avoid repeated passphrase requests by using ssh-agent.
...And 2 more matches

Implementing controls using the Gamepad API - Game development
this article looks at implementing an effective, cross-browser control system for web games using the gamepad api, allowing you to control your web games using console game controllers.
...now in the era of html5, we finally have the gamepad api, which gives us the ability to play browser-based games using gamepad controllers without any plugins.
...when you connect the controller, the game significantly changes (hungry fridge turns into the super turbo hungry fridge) and you're able to control the armored fridge using the gamepad api.
...And 2 more matches

Encrypt and decrypt MAC using token
nss sample code 3: encryption/decryption and mac using token object.
...ll) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { paddinglength = blocksize - ptextlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ...
...open \"%s\" for writing.\n", outfilename); return secfailure; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); filelength = filesize(encryptedfilename); while ((ctextlen = pr_read(infile, ctext, sizeof(ctext))) > 0) { count += ctextlen; /* decrypt cipher text buffer using cbc and iv */ rv = decrypt(ctxenc, decbuf, &decbuflen, sizeof(decbuf), ctext, ctextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "decrypt failure\n"); goto cleanup; } if (decbuflen == 0) break; rv = macupdate(ctxmac, decbuf, decbuflen); if (rv != secsuccess) { goto cleanup; } if (count =...
...And 2 more matches

Encrypt Decrypt_MAC_Using Token
nss sample code 3: encryption/decryption and mac using token object.
...*/ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv.
...open \"%s\" for writing.\n", outfilename); return secfailure; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); filelength = filesize(encryptedfilename); while ((ctextlen = pr_read(infile, ctext, sizeof(ctext))) > 0) { count += ctextlen; /* decrypt cipher text buffer using cbc and iv.
...And 2 more matches

EncDecMAC using token object - sample 3
encdecmac using token object example: <h2 id="nss_sample_code_3_hashing.">nss sample code 3: enc/dec/mac using token object id.</h2> <p class="summary">computes the hash of a file and saves it to another file, illustrates the use of nss message apis.</p> <pre class="brush: cpp"> /* this source code form is subject to the terms of the mozilla public * license, v.
...ontextbysymkey(ckm_md5_hmac, cka_sign, mk, &noparams); if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { paddinglength = blocksize - ptextlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ptext, ptextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "encrypt failure\n"); goto cleanup; } /* save the las...
...te | pr_rdwr , 00660); if (!outfile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for writing.\n", outfilename); return secfailure; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); filelength = filesize(encryptedfilename); while ((ctextlen = pr_read(infile, ctext, sizeof(ctext))) > 0) { count += ctextlen; /* decrypt cipher text buffer using cbc and iv */ rv = decrypt(ctxenc, decbuf, &decbuflen, sizeof(decbuf), ctext, ctextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "decrypt failure\n"); goto cleanup; } if (decbuflen == 0) break; rv = macupdate(ctxmac, decbuf, decbuflen); if (rv != secsuccess) { goto cleanup; } if (count == filelength) { decbuflen = decbuflen-paddinglength; } /* write the plain text to out file */ temp = pr_w...
...And 2 more matches

Using nsIDirectoryService
you can directly add a new nsifile with any property string using the nsiproperties interface: components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .set("myfilename", file); now, if your cost is too high to set all of these properties at once, you can register to be a callback that can provide an nsifile.
...in the past, this was done using nsifilelocator.
...in order to change these locations using nsifilelocator and still be able to use the same components directory as an existing mozilla installation, you had to make a component with the same id as nsifilelocator and then, after auto-registering components, manually register your own and replace the existing one -- all in all, a big pain.
...And 2 more matches

Using the Mozilla source server
using the mozilla source server is now even more feature-packed.
... set up symbols follow the instructions for using the mozilla symbol server.
... using the source server in windbg in the windbg command line, type .srcfix and hit enter.
...And 2 more matches

Using js-ctypes
after you're done when you're finished using a library, you should close it by calling the library object's close() method: lib.close(); if you fail to close the library, it will be automatically closed when it is garbage collected.
... using the library you may need to declare new types.
... the last thing we do is call lib.close() to close the library when we're done using it.
...And 2 more matches

Using channel messaging - Web APIs
in this article we'll explore the basics of using this technology.
...such things are not so easy using conventional web technology, because of the security models the web uses.
... we'll be focusing on the latter example in this article.
...And 2 more matches

Using server-sent events - Web APIs
when using http/2, the maximum number of simultaneous http streams is negotiated between the server and the client (defaults to 100).
... sending events from the server the server-side script that sends events needs to respond using the mime type text/event-stream.
... the php code for the example we're using here follows: date_default_timezone_set("america/new_york"); header("cache-control: no-cache"); header("content-type: text/event-stream"); $counter = rand(1, 10); while (true) { // every second, send a "ping" event.
...And 2 more matches

Using the Web Animations API - Web APIs
representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { transform: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { transform: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects.
...let’s take a look at pausing and playing animations in the growing/shrinking alice game (check out the full code on codepen): in this game, alice has an animation that causes her to go from small to big which we control via a bottle and a cupcake.
... pausing and playing animations we’ll talk more about alice’s animation later, but for now, let’s look closer at the cupcake’s animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will immediately run after it is called.
...And 2 more matches

Using the aria-labelledby attribute - Accessibility
to improve compatibility with user agents that do not support aria, you can use aria-labelledby with the <label> element (using the for attribute).
...</div> example 3: radio groups in the example below, the container of a radiogroup is associated with its label using the aria-labelledby attribute: <div id="radio_label">my radio label</div> <ul role="radiogroup" aria-labelledby="radio_label"> <li role="radio">item #1</li> <li role="radio">item #2</li> <li role="radio">item #3</li> </ul> example 4: dialog label in the example below, the header element that labels the dialog is referred to by the aria-labelledby attribute: <div role="dialog" ari...
...dialog contents </div> example 5: inline definition in the example below, the definition of a term that is described in the natural flow of the narrative is associated with the term itself using the aria-labelledby attribute: <p>the doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo"> an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span> </p> example 6: definition lists in the example below, the definitions in a formal definition list are associated with the terms they define using the aria-labelledby attribute: <dl> <dt id="anathema">anathema</dt> <dd role="definiti...
...And 2 more matches

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
they are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).
... basic usage declaring a custom property is done using a custom property name that begins with a double hyphen (--), and a property value that can be any valid css value.
...by declaring a custom property on the :root pseudo-class and using it where needed throughout the document, a css author can reduce the need for repetition: :root { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .thr...
...And 2 more matches

Using HTTP cookies - HTTP
ple cookie is set like this: set-cookie: <cookie-name>=<cookie-value> this shows the server sending headers to tell the client to store a pair of cookies: http/2.0 200 ok content-type: text/html set-cookie: yummy_cookie=choco set-cookie: tasty_cookie=strawberry [page content] then, with every subsequent request to the server, the browser sends back all previously stored cookies to the server using the cookie header.
...if a cookie is needed to be sent cross-origin, opt out of the samesite restriction by using the none directive.
... javascript access using document.cookie new cookies can be created via javascript using the document.cookie property, and existing cookies can be accessed from javascript as well, if the httponly flag is not set.
...And 2 more matches

Using Feature Policy - HTTP
writing a policy a policy is described using a set of individual policy directives.
... feature-policy: <feature name> <allowlist of origin(s)> for example, to block all content from using the geolocation api across your site: feature-policy: geolocation 'none' several features can be controlled at the same time by sending the http header with a semicolon-separated list of policy directives, or by sending a separate header for each policy.
... for example, this blocks the <iframe> from using the camera and microphone: <iframe allow="camera 'none'; microphone 'none'"> inheritance of policy for embedded content scripts inherit the policy of their browsing context, regardless of their origin.
...And 2 more matches

Using XML Data Islands in Mozilla - Archive of obsolete content
internet explorer had an "xml data islands" feature that allows web authors include xml data inline in html documents using the <xml> tag.
...mple.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> the xml source text can then be retrieved like this: var ordersource = document.getelementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
...the price of the first line item is " + firstprice + "."; } </script> </head> <body onload="rundemo()";> demo did not run </body> </html> the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
... here is another possible way, using the <object> tag.

Using microformats - Archive of obsolete content
loading the microformats api the microformats object is created using the new javascript script loader added to firefox 3.
... to use the api, you need to first load the object: components.utils.import("resource://gre/modules/microformats.js"); once you've loaded the microformats api, you can manage microformats using the methods listed here; for information about parsing microformats, see parsing microformats in javascript.
... geo represents a geographical location using latitude and longitude.
... note: you can simply call debug() on a microformat object: microformatobject.debug() instead of using this method if you prefer.

Using your new knowledge - Learn web development
previous overview: first steps with the things you have learned in the last few lessons you should find that you can format simple text documents using css, to add your own style to them.
... working with css the following live example shows a biography, which has been styled using css.
... make the level one heading pink, using the css color keyword hotpink.
... getting started with css how css is structured how css works using your new knowledge ...

Using Vue computed properties - Learn web development
previous overview: client-side javascript frameworks next in this article we'll add a counter that displays the number of completed todo items, using a feature of vue called computed properties.
... using computed properties the aim here is to add a summary count of our to-do list.
... since we're not relying on a button press to trigger the change, we can attach a @change event handler to each checkbox instead of using v-model.
...entization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores ...

Using RAII classes in Mozilla
ensuring raii classes are not used as temporaries a common mistake when using raii classes is to accidentally forget to name object, which causes its scope to be different from what is intended.
... static analysis static analysis passes are run on our testing infrastructure using our clang plugin, you can also run them locally marking a raii class for the static analysis is very simple, and performing this marking causes the static analysis to produce a build-time error whenever a raii class is allocated as a temporary, on the heap, or in static storage.
... in the common case, using these macros involves these three additions to a class: class moz_raii nsautoscriptblocker { public: explicit nsautoscriptblocker(jscontext *cx moz_guard_object_notifier_param) { // note: no ',' before macro moz_guard_object_notifier_init; nscontentutils::addscriptblocker(cx); } ~nsautoscriptblocker() { nscontentutils::removescriptblocker(); } private: moz_decl_use_guard_ob...
...in particular, a class derived from a class using these macros does not use moz_guard_object_notifier_init or moz_decl_use_guard_object_notifier, but instead uses either moz_guard_object_notifier_param_to_parent or moz_guard_object_notifier_only_param_to_parent: nsspecialautoscriptblocker::nsspecialautoscriptblocker(moz_guard_object_notifier_param_in_impl) : nsautoscriptblocker(moz_guard_object_notifier_only_param_to_parent) { } note that a...

How to build a binary XPCOM component using Visual Studio
this is a simple tutorial for building xpcom objects in c++ using visual studio.
...on windows, the sdk is built using a microsoft compiler, so you need to use one too.
...your xpcom component is made up of 3 parts: component interface described using idl.
... component implementation using c++.

Using the Multiple Accounts API
to create accounts using the api, you should do the following: create a fresh identity with createidentity(); assign values to the various identity properties as necessary.
...the current plans prevent sharing of information between accounts using the ui.
... smtp servers are stored in your preferences in a manner resembling the accounts: user_pref("mail.smtpservers", "server1,server2"); user_pref("mail.smtpserver.server1.hostname", "smtp.myisp.com"); user_pref("mail.smtpserver.server2.hostname", "smtp.mywork.com"); you can add new smtp servers using the smtp service.
...ags on biff (true) or just alert user that there is new mail (false) preference: mail.server.server.directory - local platform-specific path to store messages and folder indexes preference: mail.server.server.name - user-visible name of server the following are specific to imap: preference: mail.server.server.admin_url - administration url for server preference: mail.server.server.using_subscription - boolean, should we use subscriptions?

Using the Mozilla symbol server
using the symbol server in microsoft visual c++ using the symbol server in windbg the windbg symbol path is configured with a string value delimited with asterisk characters.
... to use only the mozilla symbol server, add the following entry to your symbol path (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://symbols.mozilla.org/ set this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command.
... if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for windows.
...even using the command line with symchk.exe to download symbols will fail.

Using Objective-C from js-ctypes
this message can be sent using the objc_msgsend function, and its variants, which are declared in /usr/include/objc/message.h.
... typedef struct objc_object *id; in this example, we send an alloc message without any arguments using the following code.
... let objc_msgsend = lib.declare("objc_msgsend", ctypes.default_abi, id, id, sel, "..."); let objc_msgsend_bool = lib.declare("objc_msgsend", ctypes.default_abi, bool, id, sel, "..."); other functions can be declared fluently, using id instead of class as the return type of objc_getclass.
... * blocks are regular objective-c objects in obj-c, and can be sent messages; * thus block instances need are creted using the core.wrapid() function.

Using the CSS Typed Object Model - Web APIs
<p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add javascript to grab our unstyled link and return back a definition list of all the default css property values impacting the link using computedstylemap().
...; cssvalue.appendchild(document.createtextnode( propval )); row.appendchild( cssvalue ); // and the type of unit const cssunit = document.createelement( 'td' ); cssunit.appendchild( document.createtextnode( allcomputedstyles.get( ofinterest[i] ).unit )); row.appendchild( cssunit ); //add the row to the table stylestable.appendchild( row ); } for those of you using a non-supporting browser, the above output should looks something like this: property value unit padding-top 0 px margin-bottom 16 px font-size 16 px font-stretch 100 percent animation-duration 0 s animation-iteration-count 1 number width auto undefined height a...
... to get a unit and value, we need a cssunitvalue, which we can retrieve using the cssstylevalue.parse() method on the cssunparsedvalue.
... see also using the css painting api ...

Using the Gamepad API - Web APIs
performing such checks tends to involve using the gamepad object in conjunction with an animation loop (e.g., requestanimationframe), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.
... using button information let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad.
...when one is connected, we grab the gamepad using navigator.getgamepads()[0], print information about the gamepad into our gamepad info div, and fire the gameloop() function that starts the whole ball movement process up.
...we have done this below using window.setinterval(); once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using window.clearinterval().

Using the Permissions API - Web APIs
this article provides a basic guide to using the w3c permissions api, which provides a programmatic way to query the status of api permissions attributed to the current context.
...this starts off by querying the permission status using permissions.query().
... revoking permissions starting in firefox 47, you can now revoke existing permissions, using the permissions.revoke() method.
...if we choose to never share our location from the permission prompt (deny permission), then we can't get back to the permission prompt without using the browser menu options: firefox: tools > page info > permissions > access your location.

Using Touch Events - Web APIs
however, devices with touch screens (especially portable devices) are mainstream and web applications can either directly process touch-based input by using touch events or the application can use interpreted mouse events for the application input.
... a disadvantage to using mouse events is that they do not support concurrent user input, whereas touch events support multiple simultaneous inputs (possibly at different locations on the touch surface), thus enhancing user experiences.
... basic steps this section contains a basic usage of using the above interfaces.
... // touchmove handler function process_touchmove(ev) { // set call preventdefault() ev.preventdefault(); } best practices here are some best practices to consider when using touch events: minimize the amount of work that is done in the touch handlers.

Using shaders to apply color in WebGL - Web APIs
applying color to the vertices in webgl objects are built using sets of vertices, each of which has a position and a color.
... by default, all other pixels' colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth gradients.
... const vssource = ` attribute vec4 avertexposition; attribute vec4 avertexcolor; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; varying lowp vec4 vcolor; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vcolor = avertexcolor; } `; the key difference here is that for each vertex, we pass its color using a varying to the fragment shader.
... drawing using the colors next, it's necessary to add code to look up the attribute location for the colors and setup that attribute for the shader program: const programinfo = { program: shaderprogram, attriblocations: { vertexposition: gl.getattriblocation(shaderprogram, 'avertexposition'), vertexcolor: gl.getattriblocation(shaderprogram, 'avertexcolor'), }, ...

Using textures in WebGL - Web APIs
in our case, we'll be using a single texture, mapped onto all six sides of our rotating cube, but the same technique can be used for any number of textures.
...it then uploads a single blue pixel using teximage2d().
...at that point we again call teximage2d() this time using the image as the source for the texture.
...this means that using a cross-domain image with cors approval does no longer taint the 2d canvas, so the 2d canvas remains usable as the source of a webgl texture.

Using DTMF with WebRTC - Web APIs
note, however, that although it's possible to send dtmf using webrtc, there is currently no way to detect or receive incoming dtmf.
...when the button is clicked, a dtmf string is sent over the connection using rtcdtmfsender.insertdtmf().
...if addtrack() is available on the rtcpeerconnection, we add each of the stream's audio tracks, one by one, to the connection using rtcpeerconnection.addtrack().
...we aren't using these for anything, so all we do is log them.

Using the Web Storage API - Web APIs
these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.
... note: as well as viewing the example pages live using the above links, you can also check out the source code.
... getting values from storage as noted above, values can be retrieved from storage using storage.getitem().
...this won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made.

Using the alertdialog role - Accessibility
this means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: the alert dialog must always be given an accessible name (through aria-labelledby or aria-label) , and in most cases the alert text will have to be marked up as the alert dialog's accessible description (using aria-describedby).
...the alert role should be used instead in that case (as the described in the using the alert role technique).
... fire an accessible alert event using the operating system's accessibility api if it supports it.
..."dialog1title" aria-describedby="dialog1desc"> <div role="document" tabindex="0"> <h2 id="dialog1title">your login session is about to expire</h2> <p id="dialog1desc">to extend your session, click the ok button</p> <button>ok</button> </div> </div> working examples: tbd notes aria attributes used alertdialog aria-labelledby aria-describedby related aria techniques using the dialog role using the alert role compatibility tbd: add support information for common ua and at product combinations additional resources ...

Using the group role - Accessibility
fire an accessible group event using the operating system's accessibility api if it supports it.
... examples example 1: using the group role with a html tree view the snippet below shows how the group role is added directly into the html source code.
... role="presentation" tabindex="-1" src="images/treecontracted.gif" /> <span role="treeitem" tabindex="0">cats</span> </div> <div id="catgroup" role="group"> <div id="siamese" role="treeitem"> <span tabindex="-1">siamese</span> </div> <div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </div> </div> </div> </div> example 2: using the group role with a html drop-down menu the snippet below shows how the group role is added directly into the html source code.
...le="menuitem">inbox</li> <li role="menuitem">archive</li> <li role="menuitem">trash</li> </ul> <ul role="group"> <li role="menuitem">custom folder 1</li> <li role="menuitem">custom folder 2</li> <li role="menuitem">custom folder 3</li> </ul> <ul role="group"> <li role="menuitem">new folder</li> </ul> </div> working examples: file directory treeview example using computed properties navigation treeview example using declared properties notes group members that are outside of the dom subtree of the group need to have explicit relationships assigned to them in order to participate in the group.

Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
if you’re using a screen reader, have you noticed that, when you go to this setting in firefox, it tells you “delete history after 21 days”?, followed by the announcement that you’re in a textbox, and that it contains the number 21.
...: shut down computer after minutes <input aria-labelledby="labelshutdown shutdowntime shutdownunit" type="checkbox" /> <span id="labelshutdown">shut down computer after</span> <input aria-labelledby="labelshutdown shutdowntime shutdownunit" id="shutdowntime" type="text" value="10" /> <span id="shutdownunit"> minutes</span> a note for jaws 8 users jaws 8.0 has its own logic to find labels, causing it to always override the accessiblename the textbox of an html document gets.
... community member ben millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using html 4, simply by embedding the input into the label.
...for labels with embedded form controls, using aria-labelledby is still the best approach.

Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
transforming the document you can use the xsltprocessor.transformtodocument() or xsltprocessor.transformtofragment() methods to transform a document using the imported xslt stylesheet.
... transforming html unfortunately it is currently not supported to transform html nodes using xslt.
... setting parameters you can control parameters for the stylesheet using the xsltprocessor.setparameter(), xsltprocessor.getparameter(), and xsltprocessor.removeparameter() methods.
... resources the following reflect the interface of the xsltprocessor object: nsixsltprocessor.idl xsltprocessor.webidl using xsltprocessor from xpcom components instantiating an xsltprocessor from an xpcom component requires a different syntax as the constructor is not defined inside components.

Using Dependent Libraries In Extension Components - Archive of obsolete content
the firefox extension system does not provide automatic support for loading these dependent libraries, but it is possible to load these libraries explicitly using a component stub.
...sample code is below, and can be built by placing the two files in extensions/stub and configuring with --enable-extensions=stub extension file structure using the stub slightly changes how components are packaged in the extension directory structure.
...os x code was built using the 10.4 universal sdk.

Using Dehydra - Archive of obsolete content
example: printing the location of type declarations save the following c++ code dumptypes.cc: typedef int myint; struct foo { int i; char *c; }; save the following analysis script dumptypes.js: function process_type(t) { print("type found: " + t.name + " location: " + t.loc); } function input_end() { print("hello, world!"); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/dumptypes.js -o/dev/null -c dumptypes.cc note:for g++4.5 and up use -fplugin-arg-gcc_dehydra-script= rather than -fplugin-arg it should print the following results: type found: foo location: test.cc:2:12 type found: myint location: test.cc:1:13 hello, world!
... see documentation for: process_type, input_end, print, .loc property example: using attributes to mark a class as "final" save the following code as final.cc: // this class should not be subclassed!
... */ function isfinal(c) { if (!c.attributes) return false; for each (let a in c.attributes) if (a.name == 'user' && a.value == 'final') return true; return false; } function process_type(t) { if (t.bases) for each (let base in t.bases) if (isfinal(base.type)) error("class " + t.name + " extends final class " + base.type.name, t.loc); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/final.js -o/dev/null -c final.cc it should print the following results and return with an error code: final.cc:8: error: class subclass extends final class myclass see documentation for: process_type, error, .bases property, .attributes property ...

Using Breakpoints in Venkman - Archive of obsolete content
using breakpoints to debug when you set a breakpoint, you give venkman (or whatever debugger you're using) the opportunity to display information about the execution environment.
... using breakpoints and the interactive view, you can change the values of the variables that venkman displays (only in the context of the debugging environment itself) and see how these changes affect the execution of the code.
... meta comments you can also embed scripted breakpoints directly into the source code you are debugging by using a venkman facility called meta comments.

Using Visual Studio as your XUL IDE - Archive of obsolete content
using xml schemas for validation and intellisense visual studio needs the xml schema for xul files.
...5.1 localization using dtd you will get validation errors in visual studio, if you are localizing your xul files.
...5.3 javascript related you will get validation errors for javascript code whenever using the keywords "const" and "let".

Using nsIXULAppInfo - Archive of obsolete content
this is not useful for scripts on webpages, which should continue using the navigator object when it's not possible to rely on feature-detection.
...the following sections provide a few examples of using nsixulappinfo from javascript.
... id you can tell which application you're running under using the nsixulappinfo.id property.

2D breakout game using Phaser - Game development
next » in this step-by-step tutorial, we create a simple mobile mdn breakout game written in javascript, using the phaser framework.
...you will learn the basics of using the phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, animations and tweens, and winning and losing states.
...if you are not already familiar with pure javascript game development, we would suggest that you first work through this series' counterpart, 2d breakout game using pure javascript.

Learn to style HTML using CSS - Learn web development
before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content).
...this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html.
... css building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper.

Using the Places history service
using the referrer information in each visit, the browsing path can be reconstructed at any time.
... nsiglobalhistory3.getgeckoflags: retrieves information previously set using setgeckoflags.
... see also manipulating bookmarks using places ...

Using the Places livemark service
initiating the livemark service before using the livemark service, you need to obtain an instance: var livemarkservice = components.classes["@mozilla.org/browser/livemark-service;2"] .getservice(components.interfaces.nsilivemarkservice); creating a new livemark the nsilivemarkservice.createlivemark() method creates a new livemark.
...you can convert a string into an nsiuri using nsiioservice.
...the expiration time for a livemark is determined by using information provided by the server when the feed was requested, specifically nsicacheentryinfo.expirationtime.

Making cross-thread calls using runnables
typically, thread activities are triggered and managed using an xpcom event-passing framework that uses the nsirunnable interface.
...llback callback, int digits) : mcallback(callback) , mdigits(digits) { } ns_imethod run() { nscstring result; calculatepi(mdigits, result); nscomptr<nsirunnable> resultrunnable = new piresulttask(mcallback, result); ns_dispatchtomainthread(resultrunnable); } private: picallback mcallback; int mdigits; }; putting it all together to start a new thread, create it using the thread manager: #include "nsxpcomcidinternal.h" void calculatepiasynchronously(int digits, picallback callback) { // to create a new thread, get the thread manager nscomptr<nsithreadmanager> tm = do_getservice(ns_threadmanager_contractid); nscomptr<nsithread> mythread; nsresult rv = tm->newthread(0, 0, getter_addrefs(mythread)); if (ns_failed(rv)) { // in case of failure, call ...
...} see also chromeworker using workers in javascript code modules the thread manager ...

Using dynamic styling information - Web APIs
to modify styles to a document using css syntax, one can insert rules or insert <style> tags whose innerhtml property is set to the desired css.
...however, this property only returns style attributes that have been set in-line (e.g, <td style="background-color: lightblue"> returns the string "background-color:lightblue", or directly for that element using element.style.propertyname, even though there may be other styles on the element from a stylesheet).
... using the setattribute method note that you can also change style of an element by getting a reference to it and then use its setattribute method to specify the css property and its value.

Using the CSS properties and values API - Web APIs
css.registerproperty the following will register a css custom properties, --my-prop, using css.registerproperty, as a color, give it a default value, and have it not inherit its value: window.css.registerproperty({ name: '--my-prop', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); @property the same registration can take place in css.
... the following will register a css custom properties, --my-prop, using @property, as a color, give it a default value, and have it not inherit its value: @property --my-prop { syntax: '<color>'; inherits: false; initial-value: #c0ffee; } using registered custom properties one of the advantages of registering a property is that the browser now knows how it should handle your custom property through things like transitions!
... in this example, the custom property --registered has been registered using the syntax <color> and then used in a linear gradient.

Using the Geolocation API - Web APIs
the geolocation api is used to retrieve the user's location, so that it can for example be used to display their position using a mapping api.
...this is done using the watchposition() function, which has the same input parameters as getcurrentposition().
... look like: function success(position) { dosomething(position.coords.latitude, position.coords.longitude); } function error() { alert('sorry, no position available.'); } const options = { enablehighaccuracy: true, maximumage: 30000, timeout: 27000 }; const watchid = navigator.geolocation.watchposition(success, error, options); describing a position the user's location is described using a geolocationposition object instance, which itself contains a geolocationcoordinates object instance.

Using writable streams - Web APIs
note: if you are looking for information about readable streams, try using readable streams instead.
... defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } so here we create a writer to write the chunks to the stream using writablestream.getwriter().
... we also create a new textencoder instance using the relevant constructor to encode the message into chunks to be put into the stream.

Creating 3D objects using WebGL - Web APIs
to do this efficiently, we're going to switch from drawing using the vertices directly by calling the gl.drawarrays() method to using the vertex array as a table, and referencing individual vertices in that table to define the positions of each face's vertices, by calling gl.drawelements().
... const indexbuffer = gl.createbuffer(); gl.bindbuffer(gl.element_array_buffer, indexbuffer); // this array defines each face as two triangles, using the // indices into the vertex array to specify each triangle's // position.
... drawing the cube next we need to add code to our drawscene() function to draw using the cube's index buffer, adding new gl.bindbuffer() and gl.drawelements() calls: // tell webgl which indices to use to index the vertices gl.bindbuffer(gl.element_array_buffer, buffers.indices); ...

Using IIR filters - Web APIs
when you are using an iirfilternode instead of a biquadfilternode you are creating the filter yourself, rather than just choosing a pre-programmed type.
... using an iirfilter in an audio graph let's create our context and our filter node: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = audioctx.createiirfilter(feedforward, feedback); we need a sound source to play.
... we set this up using a custom function, playsoundnode(), which creates a buffer source from an existing audiobuffer, attaches it to the default destination, starts it playing, and returns it: function playsourcenode(audiocontext, audiobuffer) { const soundsource = audiocontext.createbuffersource(); soundsource.buffer = audiobuffer; soundsource.connect(audiocontext.destination); soundsource.start(); return soundsource; } this function is called when the play button is pressed.

Using multi-column layouts - CSS: Cascading Style Sheets
unfortunately this is impossible to do with css and html without forcing column breaks at fixed positions, or severely restricting the markup allowed in the text, or using heroic scripting.
... using columns column count and width two css properties control whether and how many columns will appear: column-count and column-width.
... </p> </div> css #col { column-count: 2; } result will display the content in two columns (if you're using a multi-column compliant browser): the column-width property sets the minimum desired column width.

Using CSS counters - CSS: Cascading Style Sheets
using counters manipulating a counter's value to use a css counter, it must first be initialized to a value with the counter-reset property (0 by default).
... displaying a counter the value of a counter can be displayed using either the counter() or counters() function in a content property.
...using the counters() function, separating text can be inserted between different levels of nested counters.

SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead - JavaScript
the javascript warning "using //@ to indicate sourceurl pragmas is deprecated.
... message warning: syntaxerror: using //@ to indicate sourceurl pragmas is deprecated.
... use //# instead warning: syntaxerror: using //@ to indicate sourcemappingurl pragmas is deprecated.

Communicating using "port" - Archive of obsolete content
here's a simple add-on that sends a message to a content script using port: var tabs = require("sdk/tabs"); var alertcontentscript = "self.port.on('alert', function(message) {" + " window.alert(message);" + "})"; tabs.on("ready", function(tab) { worker = tab.attach({ contentscript: alertcontentscript }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); i...
... the main add-on code: var mymessagepayload = "some data"; self.port.emit("mymessage", mymessagepayload); from the main add-on code (in this case a panel instance) to the content script: var mymessagepayload = "some data"; panel.port.emit("mymessage", mymessagepayload); port.on() the port.on() function registers a function as a listener for a specific named message sent from the other side using port.emit().

Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
try to avoid using it.
...once the java application is done using mozilla, it needs to terminate the embedding process: try { mozilla.termembedding(); } catch (xpcomexception e) { // this exception is thrown if termembedding failed } working with xpcom objects now that mozilla is embedded, the java application can work with xpcom objects.

Using cross commit - Archive of obsolete content
using the script quick overview there are a couple of common ways to use cross-commit: land something simultaneously on the trunk and mozilla_1_8_branch # modify the files (probably by applying the patch) patch -p0 < ~/caret.patch # commit on trunk and branch at once # make sure to use -m "commit message" when doing so tools/cross-commit -m "fix some sort of security bug" layout/base/nscaret.
...(although it works without specifying -m on the command line if you are using x-enabled emacs on linux.) also note that if you don't specify any branches to commit on, cross-commit will commit to the trunk and the mozilla_1_8_branch by default.

Using Recursive Templates - Archive of obsolete content
for example, using this xml datasource: <people> <group name="male"> <person name="napoleon bonaparte"/> <person name="julius caesar"/> <person name="ferdinand magellan"/> </group> <group name="female"> <person name="cleopatra"/> <person name="laura secord"/> </group> </people> we could display this data in a flat list by using the right query: <query expr="group/person/"> or, we could display one level for the two groups, and use another level...
...the same query is executed again but using the groups generated from the previous execution of the query.

Using the Editor from XUL - Archive of obsolete content
the user chooses 'close' from the file menu, uses the key shortcut, or quits the application, causing all windows to be closed.
... in composer, we are using nshtmleditrules, so we end up in nshtmleditrules::willdoaction().

Using XForms and PHP - Archive of obsolete content
introduction a few tips on using xforms and php together.
...the same problem exists when using a single php/html file.

2D breakout game using pure JavaScript - Game development
you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states.
... note: if you are interested in learning about 2d web game development using a game library, consult this series' counterpart, 2d breakout game using phaser.

Using data attributes - Learn web development
using the css selectors and javascript access here this allows you to build some nifty effects without having to write your own display routines.
... see this screencast for an example using generated content and css transitions (jsbin example).

Using workers in JavaScript code modules
you can do so by using chromeworker instead of the standard worker object.
...try to avoid using it.

Using the viewport meta tag to control layout on mobile browsers
enter viewport meta tag however, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.
...to get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using css or viewport properties.

Using JSS
using jss newsgroup: mozilla.dev.tech.crypto if you have already built jss, or if you are planning to use a binary release of jss, here's how to get jss working with your code.
...you need to select the right version of the components, based on the version of jss you are using.

Using the Places favicon service
getting favicon images you can use favicons in the browser ui using special annotation uris.
...these annotation uris are described in more detail in using the places annotation service.

Using the Places keywords API
using the places keywords api the places keywords api allows to assign a keyword to an url.
... using the keywords api the keywords api is a promise-based api available through the placesutils module: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazymodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); setting a keyword for an url the insert() method accepts a keyword entry object describing the keyword to insert.

Using IndexedDB in chrome
(see using indexeddb for an overview.) however, the apis can also be accessed from system-privileged javascript using the components.utils.importglobalproperties() function: components.utils.importglobalproperties(["indexeddb"]); // from here on, it's like using indexeddb from content var req = indexeddb.open("my-database"); // ...
...ties": ["indexeddb"] } var principal = cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); var sandbox = components.utils.sandbox(principal, options); // the sandbox will have access to indexeddb var sandboxscript = 'var req = indexeddb.open("my-database");'; components.utils.evalinsandbox(sandboxscript, sandbox); before firefox 33, you would access indexeddb from chrome code using the initwindowless method of the nsiindexeddatabasemanager service.

Using nsCOMPtr
after you've been using nscomptrs for a while, and you reach unfamiliar territory, or run into compiler errors; you may want to return to this document to get help from the reference manual or the faq.
... contents status, recent changes, and plans recent changes to nscomptr getting started guide introduction using nscomptr summary reference manual the basics initialization and assignment using an nscomptr<t> as a t* efficiency and correctness compiler annoyances frequently asked questions buildtime errors runtime errors how do i...

Using nsIPasswordManager
zachlipton 22:52, 18 july 2006 (pdt) the code on this page will work with applications using toolkit 1.8 and below such as firefox 2.0.0.x and thunderbird 2.0.0.x.
... for similar functionality in toolkit 1.9, see using nsiloginmanager.

Using nsISimpleEnumerator
using nsisimpleenumerator <stringbundle>.strings var enumerator = document.getelementbyid('astringbundleid').strings; var s = ""; while (enumerator.hasmoreelements()) { var property = enumerator.getnext().queryinterface(components.interfaces.nsipropertyelement); s += property.key + ' = ' + property.value + ';\n'; } alert(s); example using javascript 1.7 features // creates a generator iterating over enum's values function generatorfromsimpleenumerator(enum, interface) { while (enum.hasmoreelements()) { yield enum.getnext().queryinterface(interface); } } var b = document.getelementbyid("stringbundleset").firstchild var props = generatorfromenumerator(b.strings, components.interfaces.nsipropertyelement); var s = ""; for (let property in props) { s += property.key + '...
... = ' + property.value + ';\n'; } alert(s); links code based on using_nsipasswordmanager nsisimpleenumerator xul:property:strings ...

Using the clipboard
tell the clipboard object to copy the data using the transferring object.
...here, the length is multiplied by two because we are using a unicode string which requires two bytes per character.

Using tab-modal prompts
using tab-modal prompts from chrome code currently, nsiprompt defaults to using window-modal prompts.
... you can force a prompt to be tab-modal using code like this: var thewindow = gbrowser.contentwindow; let prompt = components.classes["@mozilla.org/prompter;1"] .getservice(components.interfaces.nsipromptfactory) .getprompt(thewindow, components.interfaces.nsiprompt); let bag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); bag.setpropertyasbool("allowtabmodal", true); the var "thewindow" is a reference to the dom window.

Using C struct and pointers
ke this: var st_t = new ctypes.structtype("st_t", [ { "self": ctypes.pointertype(ctypes.void_t) }, { "str": ctypes.pointertype(ctypes.char) }, { "buff_size": ctypes.size_t }, { "i": ctypes.int }, { "f": ctypes.float }, { "c": ctypes.char } ]); here we are using the structtype() factory method of the ctypes object to create a ctype object that represents the c struct named st_t.
... using c strings with js-ctypes a pointer to char in javascript is declared as follows: var str = ctypes.pointertype(ctypes.char); now imagine you call a c function that returns a c string and you want to modify the contents of this string.

Declaring and Using Callbacks
prerequiste understanding abi functiontype declaring callbacks a callback is declared by using ctypes.functiontype.
... var myfunctypedeclaration = ctypes.functiontype(ctypes.default_abi, ctypes.void_t, []); function myjscallback() { return undefined; // as the return of the functiontype was ctypes.void_t we must return undefined or dont return at all otherwise js-ctypes will throw an error saying unexpected type } var myccallback = myfunctypedeclaration.ptr(myjscallback); using callbacks since callbacks are function pointers in c, js-ctypes has special handling for function pointer types.

Using the Debugger map scopes feature - Firefox Developer Tools
open the example page and then open the debugger using tools > web developer > debugger (or press ctrl + i and then select the debugger).
... using this feature is expensive in terms of resources, but it certainly makes your life easier when you have to debug source code that has been packaged webpack or a similar tool.

Using the Beacon API - Web APIs
in the following example, a worker sends a beacon using the url and data from the global context.
... this code snippet is for the global context: function worker_send(url, data) { // create the worker object var myworker = new worker("worker-using.js"); // send the worker the url and data to beacon myworker.postmessage([url, data]); // set up a message handler to receive the success/fail message from the worker myworker.onmessage = function(event) { var msg = event.data; // log worker's send status console.log("worker reply: sendbeacon() status = " + msg); }; } this code snippet is for the worker (worker-using.js): onmessage = function(event) { var msg = event.data; // split the url and data from the message var url = msg[0]; var data = msg[1]; // if the browser supports worker sendbeacon(), then send the beacon; otherwise // return failure messag...

Using the Payment Request API - Web APIs
the basics of making a payment this section details the basics of using the payment request api to make a payment.
... creating a new payment request object a payment request always starts with the creation of a new paymentrequest object — using the paymentrequest() constructor.

Using Pointer Events - Web APIs
another difference is that because pointer events are pointer device agnostic, the application accepts coordinate-based inputs from a mouse, a pen, or a fingertip using the same code.
...we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.

Using the Resource Timing API - Web APIs
timing resource loading phases the following example illustrates using the resource timing properties to calculate the amount of time the following phases take: redirection (redirectstart and redirectend ), dns lookup (domainlookupstart and domainlookupend), tcp handshake (connectstart and connectend), and response (responsestart and responseend).
... the following example demonstrates using these three properties.

Improving compatibility using WebRTC adapter.js - Web APIs
using adapter.js in order to use adapter.js, you need to include adapter.js on any page that uses webrtc apis: download a copy of the latest version of adapter.js from github.
... include adapter.js in your project: <script src="adapter.js"></script> write your code, using webrtc apis per the specification, knowing that your code should work on all browsers.

Using the Web Audio API - Web APIs
we'll expose the song on the page using an <audio> element.
...this can be done using a gainnode, which represents how big our sound wave is.

Using the aria-hidden attribute - Accessibility
using aria-hidden="false" will not re-expose the element to assistive technology if any of its parents specify aria-hidden="true".
... specifications see also using the presentation role role="none" ...

Using the log role - Accessibility
fire an accessible log event using the operating system's accessibility api if it supports it.
... <div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite".

Using the progressbar role - Accessibility
if the actual value of the progressbar can be determined, the developer has to indicate this progress using the aria-valuenow, aria-valuemin, and aria-valuemax attributes.
... examples example 1: basic progressbar with percentage values <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> example 2: using aria-valuetext <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="step 2: copying files...

Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
for example, the url http://developer.mozilla.org/en/docs/using_the_:target_selector#example contains the fragment identifier #example.
...this is done using the same identifying value that is found in the uri.

Using CSS transforms - CSS: Cascading Style Sheets
this guide provides an introduction to using transforms.
... css transforms are implemented using a set of css properties that let you apply affine linear transformations to html elements.

Using HTML sections and outlines - Developer guides
using html5 elements in non-html5 browsers sections and headings elements can be made to work in most non-html5 browsers with a couple of extra steps, and in this section we'll show you how.
... if a significant percentage of your particular target audience is using internet explorer 8 or older, then you can follow the below instructions to make them behave as expected.

Using dns-prefetch - Web Performance
best practices there are 3 main things to keep in mind: for one, dns-prefetch is only effective for dns lookups on cross-origin domains, so avoid using it to point to your site or domain.
... 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.

Using XPCOM without chrome - Archive of obsolete content
using sdk xpcom with the low-level module sdk/platform/xpcom , it's possible to exclude chrome and xpcomutils in some cases.

Using third-party modules (jpm) - Archive of obsolete content
it will contain a single directory "addon-pathfinder", and the modules included in this package will be somewhere in that directory: my-menuitem index.js node_modules menuitem package.json test we're interested in using the "menuitem" module, which is at "addon-pathfinder/lib/ui/menuitem".

Using Multiple Queries to Generate More Results - Archive of obsolete content
multiple queries with xml sources you can also use more than query when using an xml source.

Using the standard theme - Archive of obsolete content
<tt>xml-stylesheet</tt> processing instructions simply add one <tt>xml-stylesheet</tt> processing instruction for every style sheet you want to associate with your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> <tt>@import</tt> chains first, import the global skin in your custom style sheet using the css <tt>@import</tt> rule: @import url("chrome://global/skin/"); you then have to associate your xul file with your custom style sheet only: <?xml-stylesheet href="chrome://myextension/skin/custom.css" type="text/css"?> applying different custom style sheets depending on the selected theme mozilla is able to automatically pick your custom style sheet depending on the theme currently chose...

Using LDAP XPCOM with XULRunner - Archive of obsolete content
the solution is to use the bsmedberg stub, described in using dependent libraries in extension components: the component library is just a loader of the real library and all its dependencies, so as all the needed libraries are loaded.

Using SOAP in XULRunner 1.9 - Archive of obsolete content
xulrunner 1.8.* - using an old xulrunner is certainly an option but brings up a host of speed, stability and memory issues.

Using Firebug and jQuery (Screencast) - Archive of obsolete content
you can use the ability to quickly analyze and inspect a page that firebug and jquery affords you, using the results to build a greasemonkey script, instead of a simple bookmarklet.

Using Web Standards in your Web Pages - Archive of obsolete content
contents benefits of using web standards making your page using web standards - how to using the w3c dom developing cross browser and cross platform pages using xmlhttprequest summary of changes references original document information author(s): mike cowperthwaite, marcio galli, jim ley, ian oeschger, simon paquet, gérard talbot last updated date: may 29, 2008 copyright information: portions of this content...

Using workers in extensions - Archive of obsolete content
when the result is received from xmlhttprequest, instead of immediately updating the displayed information in the status bar, a message is sent to the main thread using the worker's postmessage() method.

Using JavaScript Generators in Firefox - Archive of obsolete content
generators can be used to simplify asynchronous code in firefox by opting in to using javascript version 1.7 or later.

Correctly Using Titles With External Stylesheets - Archive of obsolete content
external stylesheets are often associated with html documents using the <link rel="stylesheeet"> element, but it is important to use the element's title attribute properly.

Using the DOM File API in chrome code - Extensions
in bootstrap scope, this must be imported in like so: cu.importglobalproperties( [ "file" ] ) accessing a file by hard-coded pathname to reference a file by its path, you can simply use a string literal: var file = file.createfromfilename("path/to/some/file"); cross platform note: however using hard-coded paths raises cross platform issues since it uses a platform-dependent path separator (here "/").

Programs Using NSPR
the following programs are known to use nspr, or portions of it: gecko using programs (mozilla application suite, firefox, thunderbird, camino, etc.) many fedora/red hat and sun server applications.

Using the Places annotation service
see using the places favicon service for more information.

Using the Places tagging service
initiating the tagging service before using the tagging service, you need to obtain a reference to an instance of it: var taggingsvc = components.classes["@mozilla.org/browser/tagging-service;1"] .getservice(components.interfaces.nsitaggingservice); tagging a uri the nsitaggingservice.taguri() method tags a url with the given set of tags.

Using the Gecko SDK
this guide explains how to build xpcom components in c++ using the gecko sdk.

Using Mozilla code in other projects
using mozilla components spidermonkey spidermonkey is the javascript runtime engine used by mozilla projects.

Using popup notifications
creating a popup notification popup notifications can be created using the popupnotifications.jsm javascript code module.

Manipulating video using canvas - Web APIs
this tutorial demonstrates how to perform chroma-keying (also known as the "green screen effect") using javascript code.

Using the Frame Timing API - Web APIs
first, perhaps using the tools will save you is a bit too strong but performance tools can certainly help identify code that is not conformant to some expected time threshold.

Using the Media Capabilities API - Web APIs
the mediacapabilities interface the mediacapabilities is available using the mediacapabilities property which is provided by both the navigator object and the workernavigator object; in other words, the media capabilities api is available both on the main thread and from workers.

Using Navigation Timing - Web APIs
collecting timing information using the api is as simple as obtaining the performance object using window.performance and looking up what you need within the object returned.

Using the Performance API - Web APIs
high precision timing high precision timing is achieved by using the domhighrestimestamp type for time values.

Using WebGL extensions - Web APIs
mpressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context enabling an extension before an extension can be used it has to be enabled using webglrenderingcontext.getextension().

Using XMLHttpRequest in IE6 - Web APIs
in all modern browsers, you can create a new xmlhttprequest object using the following code: var request = new xmlhttprequest() however, if you need to also support internet explorer 6 and older, you need to extend your code like this: if (window.xmlhttprequest) { //firefox, opera, ie7, and other browsers will use the native object var request = new xmlhttprequest(); } else { //ie 5 and 6 will use the activex control var request = new activexobject("microsoft.xmlhttp"); } see also using xmlhttprequest ...

Using the aria-activedescendant attribute - Accessibility
this active child using the aria-activedescendant property must always be visible on screen and must be a descendant of the container in the document object model.

Using the aria-describedby attribute - Accessibility
used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-describedby ...

Using the aria-invalid attribute - Accessibility
used in aria roles all elements of the base markup related aria techniques using the aria-required attribute using the alert role compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-invalid property wai authoring practices for forms ...

Using the aria-label attribute - Accessibility
used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-label ...

Using the aria-required attribute - Accessibility
> <input id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <input id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in aria roles combobox gridcell listbox radiogroup spinbutton textbox tree related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html5 ...

Using the presentation role - Accessibility
presentation"> <a role="tab" href="#">tab 1</a> </li> <li role="presentation"> <a role="tab" href="#">tab 2</a> </li> <li role="presentation"> <a role="tab" href="#">tab 3</a> </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources using aria - 2.9 use of role=presentation or role=none: https://www.w3.org/tr/using-aria/#presentation ...

Using the status role - Accessibility
fire an accessible status event using the operating system's accessibility api if it supports it.

Using URL values for the cursor property - CSS: Cascading Style Sheets
url values as cursors are supported in windows, os/2, and linux (when using gtk+ 2.4 or better) releases of mozilla.

Using z-index - CSS: Cascading Style Sheets
in the following example, the layers' stacking order is rearranged using z-index.

Using device orientation with 3D transforms - Developer guides
using orientation to rotate an element the easiest way to convert orientation data to a 3d transform is basically to use the alpha, gamma, and beta values as rotatez, rotatex and rotatey values.

Using audio and video in HTML - Web media technologies
we don't have a particularly good guide to using these objects offscreen at this time, although audio and video manipulation may be a good start.

Index - Web APIs
using abortcontroller.abort().
... 42 aescbcparams api, aescbcparams, dictionary, reference, web crypto api the aescbcparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrapkey(), or subtlecrypto.unwrapkey(), when using the aes-cbc algorithm.
... 43 aesctrparams api, aesctrparams, dictionary, reference, web crypto api the aesctrparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrapkey(), or subtlecrypto.unwrapkey(), when using the aes-ctr algorithm.
...And 235 more matches

Index - Archive of obsolete content
perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers.
... 2 .htaccess ( hypertext access ) 301 redirect, cache control, custom error pages, htaccess, permanent redirect, redirect file accessing : htaccess files can be opened using any text editor, like windows notepad, vin, sublime text editor or any other.
... 15 communicating using "port" to enable add-on scripts and content scripts to communicate with each other, each end of the conversation has access to a port object.
...And 150 more matches

Index
this is often sufficient if you encrypt data for yourself, but as soon as you need to exchange signed/encrypted data with communication partners, using public key encryption simplifies the key management.
...the public keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.509 version 3.
... because of nss's expectation to operate with an nss database, it's mandatory that you perform an initialization call, where you tell nss which database you will be using.
...And 68 more matches

Index
2 accessing the windows registry using xpcom add-ons, code snippets, extensions, needsclassification, windows registry when implementing windows-specific functionality, it is often useful to access the windows registry for information about the environment or other installed programs.
...here is how to make the same component in python using pyxpcom.
... 11 how to build a binary xpcom component using visual studio add-ons, extensions, xpcom this is a simple tutorial for building xpcom objects in c++ using visual studio.
...And 65 more matches

Index - Archive of obsolete content
422 deprecated and defunct markup reference, xul {many elements on this page are wrongly marked as deprecated, this page needs review} 423 dynamically modifying xul-based user interface add-ons, dom, extensions, xul this article discusses manipulating xul interfaces, using dom and other apis.
... it explains the concept of dom documents, demonstrates a few simple examples of using dom calls to perform basic manipulations on a document, and then demonstrates working with anonymous xbl content using mozilla-specific methods.
... 434 how to quit a xul application xul, xulrunner script can attempt to quit a xul application, or force the application to quit, using the nsiappstartup interface.
...And 46 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
there are earlier experiments going back a long way in developing user interfaces using a combination of html and scripting languages, and xul could be considered an evolutionary step from that.
...again, since xul is a type of xml, stylesheets are read in using the xml-stylesheet processing instruction.
... the xul box model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical.
...And 37 more matches

Accessibility documentation index - Accessibility
where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect.
...a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets.
... 7 aria live regions aria, accessibility, arialive using javascript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction.
...And 36 more matches

Index - Learn web development
this article provides a basic guide to publishing content using github's gh-pages feature.
...in this article we'll discuss how to do that, using various available options such as sftp clients, rsync and github.
... beginner, browser, css, codingscripting, dev tools, html, javascript, learn the devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using: 26 what are hyperlinks?
...And 33 more matches

Handling common accessibility problems - Learn web development
when we say accessibility in the context of web technology, most people immediately think of making sure websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality.
...really, the aim of accessibility is to make your websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop computers.
... html semantic html (where the elements are used for their correct purpose) is accessible right out of the box — such content is readable by sighted viewers (provided you don't do anything silly like make the text way too small or hide it using css), but will also be usable by assistive technologies like screen readers (apps that literally read out a web page to their user), and confer other advantages too.
...And 28 more matches

Drawing graphics - Learn web development
prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn the basics of drawing on <canvas> elements using javascript.
... add the following code into it, just below the opening <body> tag: <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> we have added a class to the <canvas> element so it will be easier to select if we have multiple canvases on the page, but we have removed the width and height attributes for now (you could add them back in if you wanted, but we will set them using javascript in a below section).
... note: you should generally set the size of the image using html attributes or dom properties, as explained above.
...And 27 more matches

HTML documentation index - HTML: Hypertext Markup Language
3 applying color to html elements using css beginner, css, css colors, guide, html, html colors, html styles, styling html, color with css, there are lots of ways to add color to your html elements to create just the look you want.
... 16 dropzone deprecated, global attributes, html, reference the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the html drag and drop api.
...its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with css).
...And 27 more matches

Setting up your own test automation environment - Learn web development
previous overview: cross browser testing in this article, we will teach you how to install your own automation environment and run your own tests using selenium/webdriver and a testing library such as selenium-webdriver for node.
...most popular environments have available a package or framework that will install webdriver and the bindings required to communicate with webdriver using this language, for example, java, c#, ruby, python, javascript (node), etc.
... we will cover writing and running selenium tests using node.js, as it is quick and easy to get started, and a more familiar environment for front end devs.
...And 26 more matches

CSSPrimitiveValue - Web APIs
the value can be obtained by using the getstringvalue() method.
...the value can be obtained by using the getfloatvalue() method.
...the value can be obtained by using the getcountervalue() method.
...And 26 more matches

Introduction to automated testing - Learn web development
commercial cross-browser testing apps like lambdatest, sauce labs, browserstack, and testingbot are based on selenium, but allow you to access their set up remotely using a simple interface, saving you the hassle of setting up your own testing system.
... using a task runner to automate testing tools as we said above, you can drastically speed up common tasks such as linting and minifying code by using a task runner to run everything you need to run automatically at a certain point in your build process.
... to start using node/npm-based packages on your projects, you need to set up your project directories as npm projects.
...And 25 more matches

Handling common JavaScript problems - Learn web development
this includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
...1990s, the main browser choices back then (internet explorer and netscape) had scripting implemented in different language flavours (netscape had javascript, ie had jscript and also offered vbscript as an option), and while at least javascript and jscript were compatible to some degree (both based on the ecmascript specification), things were often implemented in conflicting, incompatible ways, causing developers many nightmares.
...jquery (or whatever library you are using) will then handle the differences in the background, so you don't have to.
...And 24 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
14 ajax ajax, codingscripting, glossary, infrastructure, l10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest.
...a ciphertext's security, and therefore the secrecy of the contained information, depends on using a secure cipher and keeping the key secret.
...its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
...And 23 more matches

HTML: A good basis for accessibility - Learn web development
— you'll keep seeing a common theme: the importance of using semantic html (sometimes called posh, or plain old semantic html).
... this means using the correct html elements for their intended purpose as much as possible.
...n your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter.
...And 23 more matches

HTML: A good basis for accessibility - Learn web development
— you'll keep seeing a common theme: the importance of using semantic html (sometimes called posh, or plain old semantic html).
... this means using the correct html elements for their intended purpose as much as possible.
...n your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter.
...And 23 more matches

Client-side storage - Learn web development
most major modern web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting html to the client to be displayed by the user's browser.
... note: there are limits to the amount of data you can store using client-side storage apis (possibly both per individual api and cumulatively); the exact limit varies depending on the browser and possibly based on user settings.
...for more information on cookies see our using http cookies article.
...And 23 more matches

JSAPI User Guide
these programs can execute javascript code from c++ using the spidermonkey api.
... note: the foss wiki page contains a few links to other libraries and programs that can make life easier when using spidermonkey and jsapi.
... hello world using the spidermonkey library to build spidermonkey from source, see spidermonkey build documentation.
...And 23 more matches

CSSPrimitiveValue.primitiveType - Web APIs
the value can be obtained by using the getstringvalue() method.
...the value can be obtained by using the getfloatvalue() method.
...the value can be obtained by using the getcountervalue() method.
...And 23 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
rt for new clients: var elm = getelmbyid("myid"); function getelmbyid(aid){ var element = null; if (ismozilla || isie5) element = document.getelementbyid(aid); else if (isnetscape4) element = document.layers[aid]; else if (isie4) element = document.all[aid]; return element; } the above code still has the issue of browser sniffing, or detecting which browser the user is using.
... browser sniffing is usually done through the useragent, such as: mozilla/5.0 (x11; u; linux i686; en-us; rv:1.5) gecko/20031016 while using the useragent to sniff the browser provides detailed information on the browser in use, code that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes.
... tooltips legacy browsers introduced tooltips into html by showing them on links and using the value of the alt attribute as a tooltip's content.
...And 22 more matches

Index
in this case, the application can still convert i to a jsval using js_newnumbervalue.
... 76 js::toprimitive jsapi reference, spidermonkey js::toprimitive converts a javascript object, obj, to a primitive value using ecmascript 6 toprimitive.
...its value is the logical or of zero or more of the following constants: 93 jsconstdoublespec jsapi reference, spidermonkey jsconstdoublespecs is used to define a set of double values that are assigned as properties to an object using js_defineconstdoubles.
...And 22 more matches

Index - Firefox Developer Tools
the dom hierarchy can be navigated using a two-paned window that allows a variety of different views on the document and all nodes within.
... 9 introduction to dom inspector dom_inspector the dom inspector is a mozilla extension that you can access from the tools > web development menu in seamonkey, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application.
... 12 debugging service workers application, devtools, firefox, guide, service workers in this article we will look at debugging service workers using the firefox devtools application panel.
...And 22 more matches

Introducing a complete toolchain - Learn web development
for our sample project, we'll be using a toolchain specifically designed to aid our software development and support the technical choices made during the software design phase.
...however, this project has only 4 svg images, which were manually minified using svgo before adding them to the project.
...in this case study we'll look at adding tests to your code, and deploying your app using netlify so it is available for all the web to see.
...And 21 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
as much as possible, standard cinematographic techniques are used, since the viewer has likely grown up watching films using those techniques, and has subconscious expectations that a film or animation will follow those methods.
... when using webgl to accelerate 2d graphics drawing, the camera is typically placed directly above the center of the scene with the distance and field of view set to allow the entire scene to be presented.
...as in all things, the position of an object in space—even if that space if virtual—can be represented using three numbers that indicate its position relative to the origin, whose position is defined to be (0, 0, 0).
...And 21 more matches

HTTP Index - HTTP
12 browser detection using the user agent compatibility, http, web development serving different web pages or services to different browsers is usually a bad idea.
... the web is meant to be accessible to everyone, regardless of which browser or device they're using.
... 19 cross-origin resource policy (corp) http, reference, security cross-origin resource policy is an opt-in mechanism that allows web applications to protect against certain cross-origin requests, such as those issued by the browser when resources are embedded using elements such as <script> and <img>.
...And 21 more matches

Browser Detection and Cross Browser Support - Archive of obsolete content
quick tip if you must determine if a visitor is using a gecko-based browser, simply test navigator.product == 'gecko' or look for the string 'gecko/' in the navigator.useragent.
...due to bugs, incomplete implementations of the standards and legacy browsers, web developers must be able to determine which browser a visitor is using and provide the appropriate content and scripting code path.
...server side browser detection using user agent strings was born.
...And 20 more matches

RDF in Mozilla FAQ - Archive of obsolete content
it describes thousands of web sites using a mix of the dublin core metadata vocabulary and the dmoz taxonomy.
...see the sites using odp data pages for some directories based on the odp rdf dumps.
... in mozilla, datasources can be composed together using the composite data source.
...And 20 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
so far, we've seen how components can share data using props, and communicate with their parents using events and two-way data binding.
... repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons.
... another solution is to assign a new array to todos containing a copy of all the todos with the completed property updated accordingly, like this: const checkalltodos = (completed) => { todos = todos.map(t => { // shorter version: todos = todos.map(t => ({...t, completed})) return {...t, completed: completed} }) } in this case we are using the map() method, which returns a new array with the results of executing the provided function for each item.
...And 20 more matches

Command line crash course - Learn web development
on the surface they’re far from welcoming but there’s a lot you can do with them, and we promise that, with a bit of guidance and practise, using them will get easier!
...if you updated the file names using your finder or explorer gui app, it would take you a long time.
... many developers today are using unix-based tools (e.g.
...And 20 more matches

The Firefox codebase: CSS Guidelines
basics here are some basic tips that can optimize reviews if you are changing css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a comment).
...if not, using a semantic class name is more descriptive and usually better.
... using descendant selectors is good practice for performance when possible: for example: .autocomplete-item[selected] > .autocomplete-item-title would be more efficient than .autocomplete-item[selected] .autocomplete-item-title overriding css before overriding any css rules, check whether overriding is really needed.
...And 20 more matches

Working with windows in chrome code
this is different from the user-visible window title, which is specified using xul.
... you can get a window object from a document using document.defaultview.
...this can be done using the following statement: var mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsiwebnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getin...
...And 20 more matches

panel - Archive of obsolete content
its content is specified as html and you can execute scripts in it, so the appearance and behavior of the panel is limited only by what you can do using html, css, and javascript.
...to do this, save the html in your add-on's data directory and load it using the data.url() method exported by the self module, like this: var mypanel = require("sdk/panel").panel({ contenturl: require("sdk/self").data.url("myfile.html") }); mypanel.show(); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
... you can specify one or more content scripts to load into a panel using the contentscript or contentscriptfile options to the panel() constructor.
...And 19 more matches

ui/sidebar - Archive of obsolete content
you specify its content using html, css, and javascript, and the user can show or hide it in the same way they can show or hide the built-in sidebars.
... usage creating, showing, and hiding sidebars you construct a sidebar object using the sidebar() constructor.
... once you've finished using the sidebar you can destroy it by calling its dispose() method.
...And 19 more matches

Mozilla internal string guide
most of the mozilla code uses a c++ class hierarchy to pass string data, rather than using raw pointers.
... iterators because mozilla strings are always a single buffer, iteration over the characters in the string is done using raw pointers: /** * find whether there is a tab character in `data` */ bool hastab(const nsastring& data) { const char16_t* cur = data.beginreading(); const char16_t* end = data.endreading(); for (; cur < end; ++cur) { if (char16_t('\t') == *cur) return true; } return false; } note that `end` points to the character after the end of the string buffer.
... `data` */ void removetabs(nsastring& data) { int len = data.length(); char16_t* cur = data.beginwriting(); char16_t* end = data.endwriting(); while (cur < end) { if (char16_t('\t') == *cur) { len -= 1; end -= 1; if (cur < end) memmove(cur, cur + 1, (end - cur) * sizeof(char16_t)); } else { cur += 1; } } data.setlength(len); } note that using beginwriting() to make a string longer is not ok.
...And 19 more matches

Add to iPhoto
declaring the apis the first thing we have to do is declare the mac os x apis we'll be using.
... note: in a few cases, this code takes the easy way out by using ctypes.voidptr_t instead of a typed pointer.
... core foundation the majority of the system routines we'll be using come from core foundation.
...And 19 more matches

Signaling and video calling - Web APIs
this lets us send signaling messages using this same server, instead of needing a separate server.
... an icecandidate event is sent to the rtcpeerconnection to complete the process of adding a local description using pc.setlocaldescription(offer).
...all your code needs to do is route it through to the remote peer using the signaling server.
...And 19 more matches

widget - Archive of obsolete content
there are a few advantages to using widgets over an ad hoc user interface.
...you can include this content inline as a string by using the content property, or point to content using a url with the contenturl property.
...just save the file in your add-on's data directory, and reference it using the data.url() method of the self module: var data = require("sdk/self").data; require("sdk/widget").widget({ id: "my-widget", label: "my widget", contenturl: data.url("my-content.html") }); this widget contains an entire web page: require("sdk/widget").widget({ id: "hello-display", label: "my hello widget", content: "hello!", width: 50 }); widgets are quite small by default, s...
...And 18 more matches

How to convert an overlay extension to restartless - Archive of obsolete content
using the current firefox esr, stable version, or nightly is generally a better idea if given the option, but some users take forever to upgrade.
... step 1: use services.jsm if you load one of mozilla's internal jsm files, for example services.jsm, you'll do so via privileged javascript code like this: components.utils.import("resource://gre/modules/services.jsm"); from here on out, it is assumed you've imported services.jsm somewhere at the top of whatever file you're in and will be using it in all code examples.
...o that you can access your files with custom paths such as: resource://myaddon/filename.ext chrome://myaddon/content/filename.ext step 2: no more resource:// uris for files internal to your bundle unfortunately, resource mappings in your chrome.manifest were not usable in restartless add-ons until mozilla finally fixed this bug in firefox 38, which looked bad, but only because mozilla is still using resource:// uris internally and in examples.
...And 18 more matches

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
try to avoid using it.
... chrome url use a file called a “chrome manifest” to register chrome packages with firefox and start using them.
...it is also possible to coerce an overlay without using the xul-overlay instruction in the xul document—this is called a “cross-package overlay” (figure 2).
...And 18 more matches

Responsive design - Learn web development
note: the screenshots above are taken using the responsive design mode in firefox devtools.
...using a very simple technique of setting the max-width property to 100%, images would scale down smaller if their containing column became narrower than the image's intrinsic size, but never grow larger.
...media queries enable the type of layout switch that cameron adams had previously explored using javascript, using only css.
...And 18 more matches

Handling common HTML and CSS problems - Learn web development
this includes linting code, handling css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
...this can be especially problematic when you are using third party code.
...or you might find that html generated by some kind of third party api (generating ad banners, for example) includes a class name or id that you are already using for a different purpose.
...And 17 more matches

WebIDL bindings
if you do, change to using // ns_impl_cycle_collection_wrappercache.
... note that using a 'headerfile' annotation is generally not recommended.
...this will produce two files in dom/bindings in your objdir: myinterface-example.h and myinterface-example.cpp, which show a basic implementation of the interface using a class that inherits from nsisupports and has a wrapper cache.
...And 17 more matches

A re-introduction to JavaScript (JS tutorial) - JavaScript
there's also a built-in object that we did not mention earlier called math that provides advanced mathematical functions and constants: math.sin(3.5); var circumference = 2 * math.pi * r; you can convert a string to an integer using the built-in parseint() function.
... if you want to convert a binary number to an integer, just change the base: parseint('11', 2); // 3 similarly, you can parse floating point numbers using the built-in parsefloat() function.
... you can also use the unary + operator to convert values to numbers: + '42'; // 42 + '010'; // 10 + '0x10'; // 16 a special value called nan (short for "not a number") is returned if the string is non-numeric: parseint('hello', 10); // nan nan is toxic: if you provide it as an operand to any mathematical operation, the result will also be nan: nan + 5; // nan you can test for nan using the built-in isnan() function: isnan(nan); // true javascript also has the special values infinity and -infinity: 1 / 0; // infinity -1 / 0; // -infinity you can test for infinity, -infinity and nan values using the built-in isfinite() function: isfinite(1 / 0); // false isfinite(-infinity); // false isfinite(nan); // false the parseint() and parsefloat() functions parse a string until...
...And 17 more matches

SVG documentation index - SVG: Scalable Vector Graphics
e vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
...when svg documents are embedded within a parent html document using the tag: 6 namespaces crash course svg, xml as an xml dialect, svg is namespaced.
... 13 svg attribute reference drawing, landing, needshelp, overview, responsive design, svg, svg attribute, svg reference, vector graphics svg elements can be modified using attributes that specify details about exactly how the element should be handled or rendered.
...And 17 more matches

Document Object Model - Archive of obsolete content
the dom structure may be examined and modified using various methods provided for this purpose.
...although there is only ever one document associated with a window at a time, you may load additional documents using various methods.
... in mozilla, the dom may be accessed and manipulated using javascript.
...And 16 more matches

CSS and JavaScript accessibility best practices - Learn web development
objective: to gain familiarity with using css and javascript appropriately in your web documents to maximise accessibility and not detract from it.
...using correct semantics has a lot to do with user expectations — elements look and behave in certain ways, according to their functionality, and these common conventions are expected by users.
... abbreviations an element that allows an abbreviation, acronym, or initialization to be associated with its expansion: <p>web content is marked up using <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr { color: #a60000; } the recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this.
...And 16 more matches

UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to target a checkbox only when it is selected.
... you can match these two states using the :required and :optional pseudo-classes.
...for a start, we are signalling required versus optional status using color alone, which isn't great for colorblind people.
...And 16 more matches

Mozilla
browser chrome tests the browser chrome test suite is an automated testing framework designed to allow testing of application chrome windows using javascript.
... it currently allows you to run javascript code in the same scope as the main firefox browser window and report results using the same functions as the mochitest test framework.
... c++ portability guide this document has migrated to using c++ in mozilla code.
...And 16 more matches

Inputs and input sources - Web APIs
voice commands using speech recognition.
... selecting using the main "select" button or other input on the controller to choose the targeted direction (or the object at which it points), or to otherwise engage an action.
...see advanced controllers using the gamepad object to learn how to use these controllers.
...And 16 more matches

XUL Migration Guide - Archive of obsolete content
next, we'll look at some of the main tasks involved in migrating: working with content scripts using the sdk's supported apis how to go beyond the supported apis when necessary, by: using third party modules using the sdk's low-level apis getting direct access to xpcom finally, we'll walk through a simple example.
... if your add-on can accomplish everything it needs using only the supported apis, it's a good candidate for migration.
... if your add-on only needs a little help from those techniques, and can accomplish most of what it needs using the supported apis, then it might still be worth migrating: we'll add more supported apis in future releases to meet important use cases.
...And 15 more matches

cfx - Archive of obsolete content
supported options you can point cfx run at a different package.json file using the --pkgdir option, and pass arguments to your add-on using the --static-args option.
... you can specify a different version of the host application using the --binary option, passing in the path to the application binary to run.
...you can specify an existing profile using the --profiledir option, and this gives you access to that profile's history, bookmarks, and other add-ons.
...And 15 more matches

nsIDOMWindowUtils
layermanagertype astring what type of layer manager the widget associated with this window is using.
...the rectangle is specified using a central point and a distance to expand in all four cardinal directions.
... using constants defined in nsidomnsevent.
...And 15 more matches

Fundamentals of WebXR - Web APIs
in webxr, the primary select and squeeze actions are directly supported using events, while other controls are available through a special webxr-specific implementation of the gamepad object.
... <<<--- replace image with an svg for future translation work and consistency --->>> some more advanced headsets provide at least minimal support for translational movement detection, but to capture more substantial movement through the space, external sensors are usually required, such as cameras (either using visible light or infrared).
... webxr session modes webxr offers support for both augmented reality (ar) and virtual reality (vr) sessions, using the same api.
...And 15 more matches

Geometry and reference spaces in WebXR - Web APIs
at a fundamental level, rendering of scenes for webxr presentation in either augmented reality or virtual reality contexts is performed using webgl, so the two apis share much of the same design language.
... however, in order to provide the ability to present scenes in true 3d using xr headsets and other such equipment, webxr has additional concepts that must be understood.
... in this article, we introduce the ways in which webxr expands upon the geometry of webgl, and how the positions and orientations of objects—both physical and virtual—are described in relation to one another using spaces and, in particular, reference spaces.
...And 15 more matches

The Box Model - Archive of obsolete content
most of the examples shown in the rest of this section were generated using the xul box alignment example.
... very simple example of an hbox with 3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz-box-orient css property.
...the css property may be useful on some occasions, but using the orient attribute is not recommended because it mixes content and presentation.
...And 14 more matches

CSS3 - Archive of obsolete content
css namespaces module recommendation since september 29th, 2011 adds the support for the xml namespaces by defining the notion of css qualified name, using the ' | ' syntax and adding the @namespace css at-rule.
...detection of ecmascript support, using the script media features is also proposed.
... the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties.
...And 14 more matches

Index of archived content - Archive of obsolete content
navigator navigator.moznotification add-ons add-on sdk builder guides content scripts communicating with other scripts communicating using "port" communicating using "postmessage" cross-domain content scripts interacting with page scripts loading content scripts reddit example port self contributor's guide classes and inheritance ...
...ted (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying web pages based on url modifying the page hosted by a tab open a web page troubleshooting unit testing using xpcom without chrome using third-party modules (jpm) bootstrapped extensions code snippets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress...
...extensions firefox addons developer guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions chapter 3: introduction to xul—how to build a more intuitive ui chapter 4: using xpcom—implementing advanced processes chapter 5: let's build a firefox extension chapter 6: firefox extensions and xul applications license and authors xul school tutorial adding events and commands adding toolbars and toolbar buttons adding menu...
...And 14 more matches

Gecko Compatibility Handbook - Archive of obsolete content
if you're new to standards, you may find using web standards in your web pages a helpful introduction.
... quick compatibility test if your site uses netscape 4.x and microsoft proprietary technologies, see using web standards in your web pages for a quick tutorial on standards.
... this compatibility test will be most beneficial to sites using simple code or that have updated to support standards.
...And 14 more matches

WAI-ARIA basics - Learn web development
as a result, developers quite often rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using css and controlled using javascript.
...as an example, aria-required="true" specifies that a form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">.
...where this is unavoidable, wai-aria provides a means to allow other elements to receive focus (using tabindex).
...And 14 more matches

The box model - Learn web development
we can, however, change the inner display type by using display values like flex.
... the second is a list, which is laid out using display: flex.
... parts of a box making up a block box in css we have the: content box: the area where your content is displayed, which can be sized using properties like width and height.
...And 14 more matches

TypeScript support in Svelte - Learn web development
we also had a look at using the transition directive to implement animations on dom elements in svelte.
...there are different opinions about it, and in this chapter we will talk briefly about the pros and cons of using typescript.
... creating a svelte typescript project from scratch you can start a new svelte typescript project using the standard template.
...And 14 more matches

NSS tools : signtool
to avoid problems, escape the quotation mark using the escape conventions for your platform.
...if you are installing the keys and certificate in the communicator databases, you must exit communicator before using this option; otherwise, you risk corrupting the databases.
...when you are using it to sign objects, it behaves like an object-signing certificate.
...And 14 more matches

imgIContainer
do not change these without looking at the implementations using them, struct gif_struct::disposal_method and gif_write() in particular.
...try to avoid using it.
...try to avoid using it.
...And 14 more matches

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

EventTarget.addEventListener() - Web APIs
you can do this by using feature detection for each of the options you're interested in.
...just add a getter for that option using code similar to what is shown above.
...tion modifytext() { const t2 = document.getelementbyid("t2"); if (t2.firstchild.nodevalue == "three") { t2.firstchild.nodevalue = "two"; } else { t2.firstchild.nodevalue = "three"; } } // add event listener to table const el = document.getelementbyid("outside"); el.addeventlistener("click", modifytext, false); in this code, modifytext() is a listener for click events registered using addeventlistener().
...And 14 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
warning: automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments.
...automatically focusing on a control can cause the page to scroll on load.
...disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.
...And 14 more matches

HTML elements reference - HTML: Hypertext Markup Language
this page lists all the html elements, which are created using tags.
...a url for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
...it has no effect on the content or layout until styled using css.
...And 14 more matches

Working with objects - JavaScript
for example, let's create an object named mycar and give it properties named make, model, and year as follows: var mycar = new object(); mycar.make = 'ford'; mycar.model = 'mustang'; mycar.year = 1969; the above example could also be written using an object initializer, which is a comma-delimited list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}): var mycar = { make: 'ford', model: 'mustang', year: 1969 }; unassigned properties of an object are undefined (and not null).
... mycar.color; // undefined properties of javascript objects can also be accessed or set using a bracket notation (for more details see property accessors).
...however, any property name that is not a valid javascript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation.
...And 14 more matches

The "codecs" parameter in common media types - Web media technologies
at a fundamental level, you can specify the type of a media file using a simple mime type, such as video/mp4 or audio/mpeg.
... general syntax a basic mime media type is expressed by stating the type of media (audio, video, etc), then a slash character (/), then the container format used to contain the media: audio/mpeg an audio file using the mpeg file type, such as an mp3.
... video/ogg a video file using the ogg file type.
...And 14 more matches

The Business Benefits of Web Standards - Archive of obsolete content
specifically, presentation is defined using layout-oriented css language.
...by using semantic markup we greatly assist the search engines in their indexing process.
...a lot of other sites would greatly increase their seo by simply using proper tags for the content.
...And 13 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
so to cancel our above timeout, you'd do this: cleartimeout(mygreeting); note: see greeter-app.html for a slightly more involved demo that allows you to set the name of the person to say hello to in a form, and cancel the greeting using a separate button (see the source code also).
...the following function creates a new date() object, extracts a time string out of it using tolocaletimestring(), and then displays it in the ui.
... it then runs the function once per second using setinterval(), creating the effect of a digital clock that updates once per second (see this live, and also see the source): function displaytime() { let date = new date(); let time = date.tolocaletimestring(); document.getelementbyid('demo').textcontent = time; } const createclock = setinterval(displaytime, 1000); just like settimeout(), setinterval() returns an identifying value you can use later when you need to clear the interval.
...And 13 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status.
... objective: learn and put into practice some basic svelte concepts, like creating components, passing data using props, render javascript expressions into our markup, modify the components state and iterating over lists.
... repl to code along with us using the repl, start at https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic.
...And 13 more matches

Strategies for carrying out testing - Learn web development
using analytics a much more accurate source of data, if you can get it, comes from an analytics app like google analytics.
... this is an application that will give you accurate stats on exactly what browsers people are using to browse your site.
... you may also consider using open source and privacy focussed analytics platforms like open web analytics and matomo.
...And 13 more matches

Eclipse CDT
using this plugin will result in parts of the ui described below being hidden or disabled.
... you can increase eclipse's memory limits using the eclipse.ini that lives alongside the eclipse binary.
...for that to work you also either need to find the existing bindings for that key combination (using the bindings column to sort by key combination helps with this) and remove them, or else you need to make your binding very specific by setting the "when" field to "c/c++ editor" instead of the more general "editing text".
...And 13 more matches

Performance best practices for Firefox front-end engineers
you might want to consider using a worker if you need to do some computation that can be done off of the main thread.
... if you need more elevated privileges than a standard worker allows, consider using a chromeworker, which is a firefox-only api which lets you create workers with more elevated privileges.
...you can do that using requestidlecallback() and the cooperative scheduling of background tasks api, and doing it only when we have a free second where presumably the user isn’t doing something.
...And 13 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
using this information, a screen reader will speak out loud important changes to the document or ui, and allow the user to track where they navigate.
... the screen reader user can navigate the web page using screen reader commands or browser commands, and the two pieces of software must remain in sync.
... when to use msaa, and when not to it's a common mistake to say that msaa is not worth using, for a number of reasons.
...And 13 more matches

Variable fonts guide - CSS: Cascading Style Sheets
this article will give you all you need to know to get you started using variable fonts.
... this allows for common typographic techniques such as setting different size headings in different weights for better readability at each size, or using a slightly narrower width for data-dense displays.
...in order to most accurately reflect the typeface design and avoid differences between browsers and how they may or may not synthesize the different styles, it's more accurate to load the specific font files where needed when using a non-variable font.
...And 13 more matches

Audio and Video Delivery - Developer guides
audio and video fallback you can create a more comprehensive fallback using flash.
... using flashmediaelement.swf is one way.
...find more about web audio api basics in using the web audio api.
...And 13 more matches

Web video codec guide - Web media technologies
this guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video.
...if the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference.
...as a result, the video's contents show a "layered" look, where instead of smooth gradients and transitions, the transitions from color to color are abrupt, causing strips of color to appear.
...And 13 more matches

Understanding WebAssembly text format - WebAssembly
note: this is potentially overkill if you are a web developer who just wants to load a wasm module into a page and use it in your code (see using the webassembly javascript api), but it is more useful if for example, you want to write wasm modules to optimize the performance of your javascript library, or build your own webassembly compiler.
... there is another issue here — using numeric indices to refer to items can be confusing and annoying, so the text format allows you to name parameters, locals, and most other items simply by including a name prefixed by a dollar symbol ($) just before the type declaration.
... so our final module (for now) looks like this: (module (func $add (param $lhs i32) (param $rhs i32) (result i32) local.get $lhs local.get $rhs i32.add) (export "add" (func $add)) ) if you want to follow along with the example, save the above our module into a file called add.wat, then convert it into a binary file called add.wasm using wabt (see converting webassembly text format to wasm for details).
...And 13 more matches

Communicating With Other Scripts - Archive of obsolete content
this section of the guide explains how content scripts can communicate with: your main.js file, or any other modules in your add-on other content scripts loaded by your add-on page scripts (that is, scripts embedded in the web page or included using <script> tags) main.js your content scripts can communicate with your add-on's "main.js" (or any other modules you're written for your add-on) by sending it messages, using either the port.emit() api or the postmessage() api.
... see the articles on using postmessage() and using port for details.
... content scripts content scripts loaded into the same document at the same time using the same method can interact with each other directly as well as with the web content itself.
...And 12 more matches

platform/xpcom - Archive of obsolete content
by subclassing unknown, either using standard javascript inheritance or using the sdk's heritage module, you can provide your own implementations of xpcom interfaces.
... in this example the helloworld component is available to javascript only, so we use the technique documented under the "using wrappedjsobject" section of how to build an xpcom component in javascript.
...wrappedjsobject() this, hello: function() {return 'hello world';} }); // create and register the factory var factory = factory({ contract: contractid, component: helloworld }); // xpcom clients can retrieve and use this new // component in the normal way var wrapper = cc[contractid].createinstance(ci.nsisupports); var helloworld = wrapper.wrappedjsobject; console.log(helloworld.hello()); using class id you can specify a class id for the factory by setting the id option in the factory's constructor.
...And 12 more matches

Trees - Archive of obsolete content
« previousnext » xul provides a way to create tabular or hierarchical lists using a tree.
...(using advanced features, progress meters or checkboxes also can be added to the tree) a tree consists of two parts, the set of columns, and the tree body.
... an advantage of using a tree view is that it allows the view to store the data in a manner which is more suitable for the data, or to load the data on demand as rows are displayed.
...And 12 more matches

Introduction to Public-Key Cryptography - Archive of obsolete content
client authentication refers to the confident identification of a client by a server (that is, identification of the person assumed to be using the client software).
... certificate-based authentication figure 5 shows how client authentication works using certificates and the ssl protocol.
...this evaluation process can employ a variety of standard authorization mechanisms, potentially using additional information in an ldap directory, company databases, and so on.
...And 12 more matches

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
regardless of how the back-ends of your web applications are implemented, client side you're using javascript for everything from same form validations to full ajax applications.
... now imagine being able to develop web apps using javascript server-side too.
... rhino offers a unique opportunity for the javascript developer to tap into the power of java classes using javascript.
...And 12 more matches

Index - Game development
11 techniques for game development games, guide this page lists essential core techniques for anyone wanting to develop games using open web technologies.
... 14 bounding volume collision detection with three.js 3d, games, javascript, webgl, bounding boxes, collision detection, three.js this article shows how to implement collision detection between bounding boxes and spheres using the three.js library.
...mozilla's a-frame framework provides a markup language allowing us to build 3d vr landscapes using a system familiar to web developers, which follows game development coding principles; this is useful for quickly and successfully building prototypes and demos, without having to write a lot of javascript or glsl.
...And 12 more matches

Mobile accessibility - Learn web development
these function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.
... if you want to turn talkback off: navigate back to the talkback menu screen (using the different gestures that are currently enabled.) navigate to the slider switch and activate it to turn it off.
... browsing web pages you can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.
...And 12 more matches

Beginner's guide to media queries - Learn web development
media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
... prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive designs.
... width and height the feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features.
...And 12 more matches

Third-party APIs - Learn web development
using facebook login to log in your users).
...one of the most obvious examples is using mapping apis to display custom maps on your pages.
...for example, the web audio api we saw in the introductory article is accessed using the native audiocontext object.
...And 12 more matches

Package management basics - Learn web development
without modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies together when they are released on the web.
... writing the code to include the package(s) in your application (this tends to be done using javascript modules, another subject that is worth reading up on and understanding).
...yarn resolves the dependencies using a different algorithm that can mean a faster user experience.
...And 12 more matches

Hacking Tips
7fffef1231c0 @ 24) #4 (nil) typein:3 (0x7fffef1231c0 @ 47) […] #25157 0x7fffefbbc250 typein:2 (0x7fffef1231c0 @ 24) #25158 0x7fffefbbc1c8 typein:3 (0x7fffef1231c0 @ 47) #25159 0x7fffefbbc140 typein:2 (0x7fffef1231c0 @ 24) #25160 0x7fffefbbc0b8 typein:3 (0x7fffef1231c0 @ 47) #25161 0x7fffefbbc030 typein:5 (0x7fffef123280 @ 9) note, you can do the exact same exercise above using lldb (necessary on osx after apple removed gdb) by running lldb -f js then following the remaining steps.
...if gdb does not load the unwinder by default, you can force it to, by using the source command with the js-gdb.py file.
... step next a few times, so that the "code" variable gets generated print code->code_, which is the address of the code disassembly code read at this address (using x/ni address, where n is the number of instructions you would like to see) here is an example.
...And 12 more matches

Details of the object model - JavaScript
the rest of this chapter describes the details of using javascript constructors and prototypes to create an object hierarchy and compares this to how you would do it in java.
... construction of object hierarchy construct an object hierarchy by using class definitions to define subclasses of existing classes.
... javascript (using this may cause an error for the following examples) class employee { constructor() { this.name = ''; this.dept = 'general'; } } javascript ** (use this instead) function employee() { this.name = ''; this.dept = 'general'; } java public class employee { public string name = ""; public string dept = "general"; } the manager and workerbee definitions show the dif...
...And 12 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
fluid grids the best place to start is with fluid measurements for our application layout — essentially, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels.
... we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery.
...the video always resizes dynamically, but the screen captures taken from it do not, so upon resizing the screen it was possible to end up with a messy layout with different sized elements when using max-width: 100%, such as: media queries fluid grids are a great start, but you'll notice that at certain points (known as breakpoints) the layout starts to break down.
...And 12 more matches

Content Scripts - Archive of obsolete content
content scripts can be one of the more confusing aspects of working with the sdk, but you're very likely to have to use them.
...its "main.js" attaches a content script to the current tab using the tabs module.
... additionally, some sdk user interface components - panel, sidebar, frame - are specified using html, and use separate scripts to interact with this content.
...And 11 more matches

page-worker - Archive of obsolete content
you specify the page to load using the contenturl option to the page() constructor.
...to do this, save the file in your add-on's data directory and create the url using the data.url() method of the self module: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", contenturl: require("sdk/self").data.url("myfile.html") }); from firefox 34, you can use "./myfile.html" as an alias for self.data.url("myfile.html").
... you can specify one or more content scripts to load into the page using the contentscript or contentscriptfile options to the page() constructor.
...And 11 more matches

Anonymous Content - Archive of obsolete content
introduction a binding can specify an anonymous content template using the content element.
...an element declared in a bound document using a single tag can then be constructed out of multiple child elements, and this implementation is hidden from the bound document.
... scoping and access using the dom when a binding is attached and certain conditions are met, the children of the binding's content element are cloned.
...And 11 more matches

Styling links - Learn web development
link states the first thing to understand is the concept of link states — different states that links can exist in, which can be styled using different pseudo-classes: link (unvisited): the default state that a link resides in, when it isn't in any other state.
... this can be specifically styled using the :link pseudo class.
... visited: a link when it has already been visited (exists in the browser's history), styled using the :visited pseudo class.
...And 11 more matches

Manipulating documents - Learn web development
this is usually done by using the document object model (dom), a set of apis for controlling html and styling information that makes heavy use of the document object.
... objective: to gain familiarity with the core dom apis, and the other apis commonly associated with dom and document manipulation the important parts of a web browser web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using javascript.
...using methods available on this object you can do things like return the window's size (see window.innerwidth and window.innerheight), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an event handler to the current window, and more.
...And 11 more matches

JavaScript object basics - Learn web development
it is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be put into a database.
... dot notation above, you accessed the object's properties and methods using dot notation.
... bracket notation there is another way to access object properties — using bracket notation.
...And 11 more matches

Inheritance in JavaScript - Learn web development
inside here you'll find the same person() constructor example that we've been using all the way through the module, with a slight difference — we've defined only the properties inside the constructor: function person(first, last, age, gender, interests) { this.name = { first, last }; this.age = age; this.gender = gender; this.interests = interests; }; the methods are all defined on the constructor's prototype.
...in this case we are using it to create a new object and make it the value of teacher.prototype.
...my name is ' + prefix + ' ' + this.name.last + ', and i teach ' + this.subject + '.'); }; this alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement.
...And 11 more matches

nss tech note5
using nss to perform miscellaneous cryptographic operations nss technical note: 5 nss project info is at http://www.mozilla.org/projects/security/pki/nss/ you can browse the nss source online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/ be sure to look for sample code first for things you need to do.
... ck_mechanism_type ciphermech = ckm_des_cbc_pad <big>(for example)</big> choose a slot on which to to do the operation pk11slotinfo* slot = pk11_getbestslot(ciphermech, null); or pk11slotinfo* slot = pk11_getinternalkeyslot(); /* alwys returns internal slot, may not be optimal */ prepare the key if using a raw key /* turn the raw key into a secitem */ secitem keyitem; keyitem.data = /* ptr to an array of key bytes */ keyitem.len = /* length of the array of key bytes */ /* turn the secitem into a key object */ pk11symkey* symkey = pk11_importsymkey(slot, ciphermech, pk11_originunwrap, ...
...iv is relevant only when using cbc mode of encryption.
...And 11 more matches

sslfnc.html
when an ssl2-only server receives an ssl3 client hello in ssl2 format, it can (and probably will) negotiate the protocol version correctly, not causing a "hang".
... warning: using the external array ssl_implementedciphers[] directly is deprecated.
...this is not the same as using multiple threads or multiple processors.
...And 11 more matches

Timing element visibility with the Intersection Observer API - Web APIs
without the intersection observer api, this winds up being done using intervals and timeouts for each individual ad, or other techniques that tend to slow the page down.
... using this api lets everything get streamlined by the browser to reduce the impact on performance substantially.
...we'll be using css grid to style and lay out the site, so we can be pretty straightforward here: <div class="wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#link2">another link</a></li> <li><a href="#link3">one more link</a></li> </ul> </nav> </aside> <main> </main> </div> this is the framework for the entire site.
...And 11 more matches

MediaDevices.getUserMedia() - Web APIs
generally, you will access the mediadevices singleton object using navigator.mediadevices, like this: async function getmedia(constraints) { let stream = null; try { stream = await navigator.mediadevices.getusermedia(constraints); /* use the stream */ } catch(err) { /* handle the error */ } } similarly, using the raw promises directly, the code looks like this: navigator.mediadevices.getusermedia(constraints) .then(function(stream) { /...
...see security for more information on this and other security issues related to using getusermedia().
... while information about a user's cameras and microphones are inaccessible for privacy reasons, an application can request the camera and microphone capabilities it needs and wants, using additional constraints.
...And 11 more matches

Rendering and the WebXR frame animation callback - Web APIs
this article covers the process of driving the frames of the xr scene to the device in the rendering loop, using the xrsession to obtain an xrframe object representing each frame, which is then used to prepare the framebuffer for delivery to the xr device.
... before you can render the virtual environment, you need to establish a webxr session by creating an xrsession using the navigator.xr.requestsession() method; you also need to associate the session with a framebuffer and perform other setup tasks.
...this is due to early displays using the ac electrical grid's current flow waveform, which cycles 60 times per second in the united states (50 in europe), for timing purposes.
...And 11 more matches

Codecs used by WebRTC - Web media technologies
the webrtc api makes it possible to construct web sites and apps that let users communicate in real time, using audio and/or video as well as optional data and other information.
... other video codecs codec name profile(s) browser compatibility vp9 — chrome (48+), firefox vp8 vp8, which we describe in general in the main guide to video codecs used on the web, has some specific requirements that must be followed when using it to encode or decode a video track on a webrtc connection.
... other notes the network payload format for sharing vp8 using rtp (such as when using webrtc) is described in rfc 7741: rtp payload format for vp8 video.
...And 11 more matches

Interacting with page scripts - Archive of obsolete content
</head> </html> the content script can see this object if it uses unsafewindow.foo instead of window.foo: // main.js var tabs = require("sdk/tabs"); var mod = require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscript: "console.log(unsafewindow.foo);" }) tabs.open(pageurl); be careful using unsafewindow: you can't rely on any of its properties or functions being, or doing, what you expect.
....html" and attaches a content script to it: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.open({ url: self.data.url("page.html"), onready: attachscript }); function attachscript(tab) { tab.attach({ contentscriptfile: self.data.url("content-script.js") }); } the content script defines an object and assigns it to unsafewindow twice: the first time using cloneinto(), the second time using simple assignment: // content-script.js var contentscriptobject = {"greeting" : "hello from add-on"}; unsafewindow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a proper...
...this means that you can't expose a function to a page script using cloneinto(), and if you clone an object into the page script scope, its methods will not be available to the page script.
...And 10 more matches

Private Properties - Archive of obsolete content
people have come up with several ways to emulate private properties using existing language features.
... this article discusses two common techniques: one using prefixes, the other closures.
...also shown here is how to generalize the idea of using weakmaps, from associating one or more private properties with an object, to associating one or more namespaces with each object.
...And 10 more matches

Writing to Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...try { var file = io.getfile("desktop", "myinfo.txt"); var stream = io.newoutputstream(file, "text"); } catch (ex) { alert(ex); } this example retrieves a file object on the desktop called 'myinfo.txt' using nsiscriptableio.getfile().
...when writing text files, characters are writing using a chosen character set, encoded automatically.
...And 10 more matches

Introduction to XUL - Archive of obsolete content
in fact, most of mozilla's windows (and dialogs) will be described using this mechanism.
... terms "xpfe" is the term mozilla-the-organization is using to describe mozilla-the-browser's cross platform front end, because x and c look similar if you beat them long and hard with a hammer.
...it will send its command to the application for processing, generally using some simple javascript for linkage.
...And 10 more matches

Windows Media in Netscape - Archive of obsolete content
this article explains how to embed the windows media player activex control in web pages to support netscape 7.1, how to control the windows media player activex control using javascript and provides working examples.
...detecting the right browser like internet explorer, netscape 7.1 and later versions can play windows media files using the popular windows media player activex control.
...netscape 7.1 is the first netscape gecko™ browser to support the windows media player as an activex control -- previous netscape browsers did not support any activex controls, and thus detecting which versions of netscape support the windows media activex control is an important first step towards building multimedia experiences using html, javascript, and the windows media activex control.
...And 10 more matches

Introduction to CSS layout - Learn web development
for many of the elements on your page the normal flow will create exactly the layout you need, however for more complex layouts you will need to alter this default behavior using some of the tools available to you in css.
...static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport.
... table layout — features designed for styling the parts of an html table can be used on non-table elements using display: table and associated properties.
...And 10 more matches

Legacy layout methods - Learn web development
previous overview: css layout next grid systems are a very common feature used in css layouts, and before css grid layout they tended to be implemented using floats or other layout features.
... layout and grid systems before css grid layout it may seem surprising to anyone coming from a design background that css didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs.
...you will however encounter "grid systems" using these legacy methods from time to time.
...And 10 more matches

Fundamental text and font styling - Learn web development
text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br> element.
...but it was a rare occasion such as this that he did.</p> you can find the finished example on github (see also the source code.) color the color property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property).
... trebuchet ms sans-serif you should be careful with using this font — it isn't widely available on mobile oses.
...And 10 more matches

Storing the information you need — Variables - Learn web development
if you are using a desktop browser, the best place to type your sample code is your browser's javascript console (see what are browser developer tools for more information on how to access this tool).
... to understand why this is so useful, let's think about how we'd write this example without using a variable.
... you may not fully understand the syntax we are using (yet!), but you should be able to get the idea — if we didn't have variables available, we'd have to implement a giant code block that checked what the entered name was, and then display the appropriate message for any name.
...And 10 more matches

Working with Svelte stores - Learn web development
objective: learn how to use svelte stores using stores we will create an alert component that shows notifications on screen, which can receive messages from any component.
... repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and events.
... svelte also provides a very intuitive way to integrate stores into its reactivity system using the reactive $store syntax.
...And 10 more matches

Introduction to cross browser testing - Learn web development
as a web developer, it is your responsibility to make sure that not only do your projects work, but they work for all your users, no matter what browser, device, or additional assistive tools they are using.
... you need to think about: different browsers other than the one or two that you use regularly on your devices, including slightly older browsers that some people might still be using, which don't support all the latest, shiniest css and javascript features.
...you can make some informed calls as to what browsers and devices your users will be using (as we'll discuss in the second article in the series — see gotta test 'em all?), but you can't guarantee everything.
...And 10 more matches

Client-side tooling overview - Learn web development
though your choice of code editor is certainly a tooling choice, this series of articles will go beyond that, focusing on developer tools that help you produce web code more efficiently.
... this part of the tooling should be specific to your own development environment, though it’s not uncommon for companies to have some kind of policy or pre-baked configuration available to install so that all their developers are all using the same processes.
...often linters can be configured to not only report errors, but also report any violations of a specified style guide that you team might be using (for example code that is using the wrong number of spaces for indentation, or using template literals rather than regular string literals).
...And 10 more matches

Message manager overview
communicate with frame scripts using message-passing apis there are various types of frame message managers, as depicted in this diagram: this diagram shows the setup when there are 2 browser windows open, one with 2 tabs open and one with 1 tab open.
...if you load a frame script using the global frame message manager, the script gets loaded separately into every open tab: three times, in the diagram above.
... similarly, if you send a message using the global frame message manager, it's received by all content tabs, and is then delivered to any frame scripts that are listening for it.
...And 10 more matches

NSS Tools modutil
using the security module database (modutil) newsgroup: mozilla.dev.tech.crypto the security module database tool is a command-line utility for managing pkcs #11 module information within secmod.db files or within hardware tokens.
...for information on certificate database and key database management, see using the certificate database tool.
... -jar jar-file add a new pkcs #11 module to the database using the named jar file.
...And 10 more matches

Working with data
this will also work: `ctypes.int.array()(jsarr)` mycarr.addressofelement(0).contents; // outputs: 4 mycarr.addressofelement(1).contents; // outputs: 10 type casting you can type cast data from one type to another by using the ctypes.cast() function: var newobj = ctypes.cast(origobj, newtype); this will return a new object whose data block is shared with the original object, but whose type is newtype.
...you can always get a pointer to the c value using the cdata object's address() method.
...in particular, comparing two different objects that are represented under-the-hood as javascript objects using the == or === operators will always return false.
...And 10 more matches

Basic concepts - Web APIs
for a detailed tutorial on how to use the api, see using indexeddb.
...you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.) this is currently experimental, and can only be used if the dom.indexeddb.experimental pref is set to true in about:config.
...if the object store has a key path, it is using in-line keys; otherwise, it is using out-of-line keys.
...And 10 more matches

A basic 2D WebGL animation example - Web APIs
in this webgl example, we create a canvas and within it render a rotating square using webgl.
...its job, as always, is to convert the coordinates we're using for our scene into clipspace coordinates (that is, the system by which (0, 0) is at the center of the context and each axis extends from -1.0 to 1.0 regardless of the actual size of the context).
...ion.x * urotationvector.y + avertexposition.y * urotationvector.x, avertexposition.y * urotationvector.y - avertexposition.x * urotationvector.x ); gl_position = vec4(rotatedposition * uscalingfactor, 0.0, 1.0); } </script> the main program shares with us the attribute avertexposition, which is the position of the vertex in whatever coordinate system it's using.
...And 10 more matches

Migrating from webkitAudioContext - Web APIs
it was first implemented in webkit, and some of its older parts were not immediately removed as they were replaced in the specification, leading to many sites using non-compatible code.
... new engines implementing the web audio spec (such as gecko) will only implement the official, final version of the specification, which means that code using webkitaudiocontext or old naming conventions in the web audio specification may not immediately work out of the box in a compliant web audio implementation.
... in order to port your code, you can just rename the method that you're using.
...And 10 more matches

Operable - Accessibility
success criteria how to conform to the criteria practical resource 2.1.1 keyboard (a) all functionality should be accessible using keyboard controls, unless it cannot be done using the keyboard (e.g.
... see ui controls and building keyboard accessibility back in 2.1.2 no keyboard trap (a) when entering a section of functionality using the keyboard, you should be able to get out of that section again using *only* the keyboard.
... for example, if you press enter/return on a focused button to open an options window, you should be able to close that window again and return to the main content using the keyboard.
...And 10 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
if we position an item using absolute positioning, we use these physical keywords as offset values to push the item around.
... in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right.
...we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on.
...And 10 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
some simple grid layouts could be implemented for ie10, through to edge 15, using the -ms properties.
... as with any front-end technology choice, the decision to use css grid layout will come down to the browsers your site visitors are typically using.
... if they tend to use up-to-date versions of firefox, chrome, opera, and safari, then it would make sense to start using css grids once those browsers update.
...And 10 more matches

HTML5 - Developer guides
using html5 audio and video the <audio> and <video> elements embed and allow the manipulation of new multimedia content.
... improvement in <iframe> using the sandbox and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element.
... introduction to html5 this article introduces how to indicate to the browser that you are using html5 in your web design or web application.
...And 10 more matches

Image file type and format guide - Web media technologies
note: you should typically avoid using bmp for web site content, as it's not a generally-accepted use of the format.
...typically, modern content should use png for lossless and indexed still images, and should consider using apng for lossless animation sequences.
...additionally, their use for favicons has subsided in favor of using a png file and the <link> element, as described in providing icons for different usage contexts in <link>: the external resource link element.
...And 10 more matches

Introduction to progressive web apps - Progressive web apps (PWAs)
it's just a shorthand used initially by google for the concept of creating a flexible, adaptable app using only web technologies.
... pwas are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features.
...you can install a native app so that it works offline, and users love tapping their icons to easily access their favorite apps, rather than navigating to it using a browser.
...And 10 more matches

page-mod - Archive of obsolete content
if you supply the scripts as separate files in the "data" directory, you specify them using with a url, typically constructed using the url() method of the self module's data object: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: data.url("my-script.js") }); var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contents...
... instead, keep the script in a separate file and load it using contentscriptfile.
... to learn much more about communicating with content scripts, see the guide to content scripts and in particular the chapter on communicating using port.
...And 9 more matches

jpm - Archive of obsolete content
add the following line to the end of the file $home/.profile to add it to your path permanently (as the file .profile is executed every time a new terminal is opened): export path="$home/node_modules/.bin/:$path" installing jpm from git alternatively, you can also get the latest version of jpm using git: git clone https://github.com/mozilla-jetpack/jpm.git cd jpm npm install npm link after installing jpm after installation, at the command prompt, type: jpm you should see a screen summarizing the available jpm commands.
... see using profiles for more information.
... see using profiles for more information.
...And 9 more matches

Appendix: What you should know about open-source software licenses - Archive of obsolete content
the deleted advertising clause the original bsd license contained an advertising clause, which stated that “any advertising for software using an modification of this source code must display the name of the original developer.” this clause has been removed.
... when a program is linked with a library, whether statically or using a shared library, the combination of the two is legally speaking a combined work, a derivative of the original library.
... applying an oss license in this section, i will explain practical details of applying a license when you are using oss source code, and participating in open-source projects.
...And 9 more matches

Audio for Web games - Game development
jumping to, playing, and then pausing that silence will mean we can now use javascript to play that file at arbitrary points.
...also note that playing and immediately pausing your audio does not guarantee that a small piece of audio won't be played.
...although the situation is soon going to get better with the adoption of the web audio api, the current most widely-supported method — using the vanilla <audio> element — leads to patchy results on mobile devices.
...And 9 more matches

Supporting older browsers - Learn web development
previous overview: css layout next in this module, we recommend using flexbox and grid as the main layout methods for your designs.
...before deciding on the approach to take, find out the number of visitors coming to your site using older browsers.
... this is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using.
...And 9 more matches

Advanced form styling - Learn web development
to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css.
...firefox settled on this because web developers mostly seemed to be using the -webkit- prefixed version, so it was better for compatibility.
...this stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using css.
...And 9 more matches

Client-side form validation - Learn web development
in this chapter we are focusing on client-side validation.
... javascript validation is coded using javascript.
... using built-in form validation one of the most significant features of html5 form controls is the ability to validate most user data without relying on javascript.
...And 9 more matches

The HTML5 input types - Learn web development
objective: to understand the newer input type values available to create native form controls, and how to implement them using html.
... e-mail address field this type of field is set using the value email for the type attribute: <input type="email" id="email" name="email"> when this type is used, the user is required to type a valid email address into the field.
... this is another good reason for using these newer input types — improving the user experience for users of these devices.
...And 9 more matches

How to build custom form controls - Learn web development
the control was active and the user moves the focus to another control using the keyboard (e.g.
... creating the look and feel using css now that we have a structure, we can start designing our control.
...if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow: ellipsis; vertical-align: top; } we don't need an extra element to design the down arrow; instead, we're using the :after pseudo-element.
...And 9 more matches

Other form controls - Learn web development
objective: to understand the non-<input> form features, and how to implement them using html.
... multi-line text fields a multi-line text field is specified using a <textarea> element, rather than using the <input> element.
...(using contenteditable on non-form controls provides an api for capturing html/"rich" content instead of plain text).
...And 9 more matches

Sending form data - Learn web development
a client (usually a web browser) sends a request to a server (most of the time a web server like apache, nginx, iis, tomcat, etc.), using the http protocol.
... the server answers the request using the same protocol.
...when you do this, the data is encrypted along with the rest of the request, even if the form itself is hosted on an insecure page accessed using http.
...And 9 more matches

From object to iframe — other embedding technologies - Learn web development
objective: to learn how to embed items into web pages using <object>, <embed>, and <iframe>, like flash movies and other webpages.
...let's look at how youtube allows us to embed a video in any page we like using an <iframe>.
... if you make a mistake, you can always reset it using the reset button.
...And 9 more matches

Graceful asynchronous programming with Promises - Learn web development
setstatusmessage("calling..."); navigator.mediadevices.getusermedia({video: true, audio: true}) .then(chatstream => { selfviewelem.srcobject = chatstream; chatstream.gettracks().foreach(track => mypeerconnection.addtrack(track, chatstream)); setstatusmessage("connected"); }).catch(err => { setstatusmessage("failed to connect"); }); } this function starts by using a function called setstatusmessage() to update a status display with the message "calling...", indicating that a call is being attempted.
...if we represented the above pseudo-code using asynchronous promises instead, we'd end up with something like this: choosetoppings() .then(function(toppings) { return placeorder(toppings); }) .then(function(order) { return collectorder(order); }) .then(function(pizza) { eatpizza(pizza); }) .catch(failurecallback); this is much better — it is easier to see what is going on, we only need a single .catch() block to handle all the error...
... using arrow functions, you can simplify the code even further: choosetoppings() .then(toppings => placeorder(toppings) ) .then(order => collectorder(order) ) .then(pizza => eatpizza(pizza) ) .catch(failurecallback); or even this: choosetoppings() .then(toppings => placeorder(toppings)) .then(order => collectorder(order)) .then(pizza => eatpizza(pizza)) .catch(failurecallback); this works beca...
...And 9 more matches

Basic math in JavaScript — numbers and operators - Learn web development
note: you may sometimes see exponents expressed using the older math.pow() method, which works in a very similar way.
... first try entering some simple examples of your own, such as 10 + 7 9 * 8 60 % 3 you can also try declaring and initializing some numbers inside variables, and try using those in the sums — the variables will behave exactly like the values they hold for the purposes of the sum.
...this can be conveniently done using the increment (++) and decrement (--) operators.
...And 9 more matches

Server-side web frameworks - Learn web development
the following sections illustrate some points using code fragments taken from real web frameworks.
... # django view function from django.http import httpresponse def index(request): # get an httprequest (request) # perform operations using information from the request.
...for example, the flask (python) web framework adds routes to view functions using a decorator.
...And 9 more matches

Ember interactivity: Events, classes and state - Learn web development
along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app.
... objective: to learn how to create component classes and use events to control interactivity, and keep track of app state using a service.
...dercomponent extends component { @action onkeydown({ target, key }) { let text = target.value.trim(); let hasvalue = boolean(text); if (key === 'enter' && hasvalue) { alert(text); target.value = '' } } } the @action decorator is the only ember-specific code here (aside from extending from the component superclass, and the ember-specific items we are importing using javascript module syntax) — the rest of the file is vanilla javascript, and would work in any application.
...And 9 more matches

Componentizing our Svelte app - Learn web development
repl to code along with us using the repl, start at https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 breaking the app into components in svelte, an application is composed from one or more components.
...data ordinarily flows down from parent to child using props.
... using bind, we will tell svelte that any changes made to the filter prop in the filterbutton component should propagate back up to the parent component, todos.
...And 9 more matches

Implementing feature detection - Learn web development
if you don't do this, browsers that don't support the features you are using in your code won't display your sites properly and will just fail, creating a bad user experience.
...therefore, you can detect whether the browser supports geolocation or not by using something like the following: if ("geolocation" in navigator) { navigator.geolocation.getcurrentposition(function(position) { // show the location on a map, perhaps using the google maps api }); } else { // give the user a choice of static maps instead perhaps } it is probably better to use an established feature detection library however, rather than writing your own all the time.
...see using bad browser sniffing code for more details.
...And 9 more matches

Mozilla Web Developer FAQ
since also other contemporary browsers have a standards mode, activating the standards mode or the almost standards mode in other browsers as well (using the above-mentioned exact doctypes) is the best way to get consistent css layout results across different browsers.
... when the paragraph markup is called for but the default margins are unwanted, zero margins can be suggested using css.
... you can see the http headers sent by the server by using the livehttpheaders extension or by using the web sniffer.
...And 9 more matches

An overview of NSS Internals
this is often sufficient if you encrypt data for yourself, but as soon as you need to exchange signed/encrypted data with communication partners, using public key encryption simplifies the key management.
...the public keys that are exchanged between parties are transported using a container; the container is called a certificate, following standard x.509 version 3.
... because of nss's expectation to operate with an nss database, it's mandatory that you perform an initialization call, where you tell nss which database you will be using.
...And 9 more matches

NSS tools : certutil
when you delete keys, be sure to also remove any certificates associated with those keys from the certificate database, by using -d.
... -m modify a certificate's trust attributes using the values of the -t argument.
... for example, using this option to set a value of 3 would cause 3 to be added to the three-month default, creating a validity period of six months.
...And 9 more matches

certutil
when you delete keys, be sure to also remove any certificates associated with those keys from the certificate database, by using -d.
... -m modify a certificate's trust attributes using the values of the -t argument.
...for example, using this option to set a value of 3 would cause 3 to be added to the three-month default, creating a validity period of six months.
...And 9 more matches

Web Replay
this requires using the same build of firefox and a reasonably similar version of the operating system; otherwise the tab will probably crash.
... ipc integration allows a replaying process to communicate with the chrome process using ipdl and shared memory.
... threads use file descriptors to wait on locks and notify each other, instead of using the native implementation for locking and condition variables.
...And 9 more matches

XPCOM glue
this is typically done using gre_getgrepathwithproperties.
... embedders using the standalone glue typically also need to avoid linking against nspr as well.
... however, when using threadsafe together with the glue libraries from gecko 1.8 or later, a special step needs to be taken to use ns_impl_threadsafe_isupportsn.
...And 9 more matches

Starting WebLock
using them is a good way for objects to pass messages to each other without the objects having explicit knowledge of one another.
...we could have just as easily have used the raw queryinterface() method, but using nscomptr is much more economical (see smart pointers).
...this process is similar to using createinstance from the nsicomponentmanager, but there is no aggregation parameter since the object has already been constructed.
...And 9 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
web video text tracks format (webvtt) is a format for displaying timed text tracks (such as subtitles or captions) using the <track> element.
...webvtt is a text based format, which must be encoded using utf-8.
...if you wish to use such characters, you need to escape them using for example &amp; for ampersand and &lt; for less-than.
...And 9 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
representing a position using a reference space as covered in defining spatial relationships with reference spaces in geometry and reference spaces in webxr, reference spaces establish a local coordinate system which is offset from another coordinate system that is itself defined by some other space.
... because each of these is defined using a reference space as its foundation, the webxr device api can easily be used to convert among the coordinate systems, perform operations affecting these spaces and their corresponding objects, and so forth.
...this is done using poses.
...And 9 more matches

Web Audio API - Web APIs
using a system based on a source-listener model, it allows control of the panning model and deals with distance-induced attenuation induced by a moving source (or moving listener).
... audiobuffer the audiobuffer interface represents a short audio asset residing in memory, created from an audio file using the audiocontext.decodeaudiodata() method, or created with raw data using audiocontext.createbuffer().
...when creating the node using the createmediastreamtracksource() method to create the node, you specify which track to use.
...And 9 more matches

Window - Web APIs
a window for a given document can be obtained using the document.defaultview property.
... window.issecurecontext read only indicates whether a context is capable of using features that require secure contexts.
...see also using navigation timing for additional information and examples.
...And 9 more matches

Grid template areas - CSS: Cascading Style Sheets
this method involves placing our items using named template areas, and we will find out exactly how this method works.
...this time, instead of placing my items using line numbers specified on the items themselves, i create the whole layout on the grid container.
...round-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid container.
...And 9 more matches

Index - HTTP
using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice with the content-type response header.
...using content negotiation, the server then selects one of the proposals, uses it and informs the client of its choice within the content-type response header.
...using content negotiation, the server selects one of the proposals, uses it and informs the client of its choice with the content-encoding response header.
...And 9 more matches

String - JavaScript
some of the most-used operations on strings are to check their length, to build and concatenate them using the + and += string operators, checking for the existence or location of substrings with the indexof() method, or extracting substrings with the substring() method.
... creating strings strings can be created as primitives, from string literals, or as objects, using the string() constructor: const string1 = "a string primitive"; const string2 = 'also a string primitive'; const string3 = `yet another string primitive`; const string4 = new string("a string object"); string primitives and string objects can be used interchangeably in most situations.
... string literals can be specified using single or double quotes, which are treated identically, or using the backtick character `.
...And 9 more matches

Modules - Archive of obsolete content
we will show how to do each of these things using the built-in components object provided by xulrunner application such as firefox and thunderbird.
... the module system used by the sdk is based on the commonjs specification: it is implemented using a loader object, which handles all the bookkeeping related to module loading, such as resolving and caching urls.
... we show how to create your own custom loaders, using the loader constructor provided by the sdk.
...And 8 more matches

Preferences - Archive of obsolete content
the interfaces dealing with preferences are fairly well documented, so using the methods not mentioned here should be straightforward.
...using them is as easy as: // get the "accessibility." branch var prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice).getbranch("accessibility."); // prefs is an nsiprefbranch.
... you can get both trees using the nsiprefservice.getbranch() and nsiprefservice.getdefaultbranch() functions.
...And 8 more matches

Adding windows and dialogs - Archive of obsolete content
whenever you need a new dialog, you should ask yourself if it can be implemented using these common dialogs, and use them whenever it is possible.
... using the prompt service is the recommended way to create common dialogs in an extension.
...we have been using the window.alert function to open alert messages in our examples so far, but that's not the right way to do it.
...And 8 more matches

Custom XUL Elements with XBL - Archive of obsolete content
many complex elements such as tabs, buttons and input controls are implemented using xbl and simpler xul elements.
... we'll look into xbl using a modified version of the hello world extension.
... if you use bindings on toolbar elements, remember to include the css file in the customize dialog, using the style directive in the chrome.manifest file.
...And 8 more matches

Modularization techniques - Archive of obsolete content
the mechanism we're using is based on the principles laid down by com, so pretty much anything you know about com can be applied here, and any reference on com can provide you with more interesting and complex examples than the ones provided here.
... interface interrogation is performed using the queryinterface() method.
... reference counting is performed using the addref() and release() methods.
...And 8 more matches

XUL accessibility guidelines - Archive of obsolete content
tab order provide a logical tab order and ensure that users can navigate all content using a keyboard.
...a short reference for using the accesskey attribute.
...consider using context menu items or other xul elements along with keyboard shortcuts.
...And 8 more matches

The Implementation of the Application Object Model - Archive of obsolete content
the first section of the document describes the motivation and reasoning behind using rdf as the foundation of xul.
... this section makes a technical argument both for having xul in the first place and for using rdf as the underlying implementation of xul's content model.
...it makes more sense to describe a content tree structure according to the accepted standards (that is accessible and manipulable via standard dom apis) using a real markup language, either an extension of html or an xml language like xul.
...And 8 more matches

Getting started with XULRunner - Archive of obsolete content
next » this article explores the mozilla platform by building a basic desktop application using xulrunner.
... given that firefox, thunderbird, and multiple other applications are written using the platform, it's a safe bet that it can be used to build a basic application.
... note: if you are using firefox build from ubuntuzilla repository, replace /usr/lib/firefox/platform.ini with /opt/firefox/platform.ini.
...And 8 more matches

Efficient animation for web games - Game development
there are several techniques worth knowing that will improve the performance of your game or application whilst also using less battery life, especially on low-end devices.
... help the browser help you if you are using dom for your ui, which i would certainly recommend, you really ought to use css transitions and/or css animations, rather than javascript-powered animations.
...when you animate position with javascript, the browser cannot easily make that same assumption, and so you might end up causing it to draw only the newly-exposed region of content, which may introduce slow-down.
...And 8 more matches

Grids - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind grid layout systems, and how to implement a grid layout using css grid.
... the following video provides a nice visual explanation of using css grid: defining a grid as a starting point, download and open the starting point file in your text editor and browser (you can also see it live here).
... padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in addition to creating grids using lengths and percentages, we can use the fr unit to flexibly size grid rows and columns.
...And 8 more matches

Styling web forms - Learn web development
not all widgets are created equal when css is involved at present, some difficulties remain when using css with forms.
... the ugly some elements can't be styled thoroughly using css.
... if you want to thoroughly customize those widgets, you really have to create your own using html, css, and javascript.
...And 8 more matches

Fetching data from the server - Learn web development
this is achieved by using apis like xmlhttprequest or — more recently — the fetch api.
... the ajax model involves using a web api as a proxy to more intelligently request data rather than just having the browser reload the entire page.
... a basic ajax request let's look at how such a request is handled, using both xmlhttprequest and fetch.
...And 8 more matches

Working with JSON - Learn web development
you'll come across it quite often, so in this article we give you all you need to work with json using javascript, including parsing json so you can access data within it, and creating json.
...{ "name": "eternal flame", "age": 1000000, "secretidentity": "unknown", "powers": [ "immortality", "heat immunity", "inferno", "teleportation", "interdimensional travel" ] } ] } if we loaded this object into a javascript program, parsed in a variable called superheroes for example, we could then access the data inside it using the same dot/bracket notation we looked at in the javascript object basics article.
...you can validate json using an application like jsonlint.
...And 8 more matches

Accessibility in React - Learn web development
focusing between templates when a user toggles a <todo/> template from viewing to editing, we should focus on the <input> used to rename it; when they toggle back from editing to viewing, we should move focus back to the "edit" button.
...should be updated like this: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} ref={editfieldref} /> the "edit" button in your view template should read like this: <button type="button" classname="btn" onclick={() => setediting(true)} ref={editbuttonref} > edit <span classname="visually-hidden">{props.name}</span> </button> focusing on our refs with useeffect to use our refs for their intended purpose, we need to import another react hook: useeffect().
... focusing on our editing field now that we know our useeffect() hook works, we can manage focus with it.
...And 8 more matches

Getting started with Svelte - Learn web development
note that you can also use the yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials.
... if you're using windows, you will need to install some software to give you parity with unix/macos terminal in order to use the terminal commands mentioned in this tutorial.
...this is much quicker than using git clone because it will not download all the history of the repo, or create a complete local clone.
...And 8 more matches

Adding a new todo form: Vue events, methods, and models - Learn web development
add the submit handler to your <form> element like so: <form @submit="onsubmit"> when you run this, the app still posts the data to the server, causing a refresh.
... .passive: equivalent to using the { passive: true } parameter when creating an event listener in vanilla javascript using addeventlistener().
...however, the exact event and attribute combination varies depending on input types and will take more code than just using the v-model shortcut.
...And 8 more matches

Detailed XPCOM hashtable guide
items are found, added, and removed from the hashtable by using the key.
...if you need entry pointers to remain constant, you may want to consider using plhashtable instead.
...because pldhash does not know what datatype your key is, all functions that work with keys are declared using const void*, and your client code must cast these pointers to the appropriate type.
...And 8 more matches

nsINavBookmarksService
try to avoid using it.
...try to avoid using it.
...try to avoid using it.
...And 8 more matches

Index
for the message pane, the icon we will show is on disk at: <profile home>/nim/<value of pref aim.session.screenname>/picture/<screenname for sender email address>.gif when trying to determine the screenname for the sender, we search the addressbook that we are using for collection.
... 19 creating a gloda message query thunderbird 3, thunderbird this page describes how to programmatically create a message query using gloda, thunderbird's global database.
... the following preferences are supported to control how this gets logged: 30 gloda examples thunderbird 3, thunderbird this page provides some examples for using gloda.
...And 8 more matches

Background Tasks API - Web APIs
window.requestidlecallback() makes it possible to become actively engaged in helping to ensure that the browser's event loop runs smoothly, by allowing the browser to tell your code how much time it can safely use without causing the system to lag.
... getting the most out of idle callbacks because idle callbacks are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to its full potential without over-tasking it, resulting in lag or other performance problems, you should be thoughtful about how you go about using them.
...while the browser, your code, and the web in general will continue to run normally if you go over the specified time limit (even if you go way over it), the time restriction is intended to ensure that you leave the system enough time to finish the current pass through the event loop and get on to the next one without causing other code to stutter or animation effects to lag.
...And 8 more matches

Drawing shapes with canvas - Web APIs
to make shapes using paths, we take some extra steps: first, you create the path.
...the starting point can also be changed by using the moveto() method.
... quadraticcurveto(cp1x, cp1y, x, y) draws a quadratic bézier curve from the current pen position to the end point specified by x and y, using the control point specified by cp1x and cp1y.
...And 8 more matches

Key Values - Web APIs
learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character.
... ime and composition keys keys used when using an input method editor (ime) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard.
... see dead keycodes for linux below "finalmode" the final (final mode) key is used on some asian keyboards to enter final mode when using imes.
...And 8 more matches

An overview of accessible web applications and widgets - Accessibility
since the html4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as <div> and <span>.
... many of these were later added in html5, and developers should always prefer using the correct semantic html element over using aria.
... this provides a much more consistent user experience than was possible in the previous generation of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using web-based applications.
...And 8 more matches

Cognitive accessibility - Accessibility
ve skills include: attention memory processing speed time management letters and language numbers symbols and math understanding and making choices a solid approach to providing accessible solutions for people with cognitive impairments includes: delivering content in more than one way, such as by text-to-speech or by video; providing easily-understood content, such as text written using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; providing consistent web page layout and navigation; incorporating familiar elements, such as underlined links that are blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; making websi...
... focused elements should be visibly focused when a user navigates using a keyboard, the ui should make it obvious which element currently has focus.
...if you have added content to links for screen readers, and that content is verbose and potentially confusing to sighted readers, consider clipping the added text to visually hide it from those not using assistive technologies.
...And 8 more matches

Keyboard-navigable JavaScript widgets - Accessibility
using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused.
... the order in which elements gain focus when using a keyboard, is the source order by default.
... warning: avoid using positive values for tabindex.
...And 8 more matches

Web Accessibility: Understanding Colors and Luminance - Accessibility
terminology can be confusing, because different terms are often used to describe the same thing.
... this is evolving, and new methods for measuring color involve measurements using other color spaces, but color measurements in the rgb color space still predominates, and this includes video production.
... where accessibility is concerned, however, standards and guidelines are currently written predominantly using the srgb color space, especially as it applies to color contrast ratios.
...And 8 more matches

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
those of us who have been doing web development for more years than we care to remember might consider that css grid is a little bit like using “tables for layout”.
...the css zen garden challenged us to take identical markup and create a unique design using css.
...we can also position items using line-based placement of grid template areas, without considering their location in the source.
...And 8 more matches

<tr>: The Table Row element - HTML: Hypertext Markup Language
the row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
... alignobsolete since html5 a domstring which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using align on every cell in the row individually.
... instead of using the obsolete align attribute, you should instead use the css text-align property to establish left, center, right, or justify alignment for the row's cells.
...And 8 more matches

Regular expressions - JavaScript
creating a regular expression you construct a regular expression in one of two ways: using a regular expression literal, which consists of a pattern enclosed between slashes, as follows: let re = /ab+c/; regular expression literals provide compilation of the regular expression when the script is loaded.
... if the regular expression remains constant, using this can improve performance.
... or calling the constructor function of the regexp object, as follows: let re = new regexp('ab+c'); using the constructor function provides runtime compilation of the regular expression.
...And 8 more matches

Performance fundamentals - Web Performance
developers draw to canvases using either a familiar 2d drawing api, or webgl, a "close to the metal" binding that mostly follows opengl es 2.0.
...this is done by avoiding intermediate surfaces where they would create overhead (such as per-application "back buffers" in many other operating systems), and by using special memory for graphics buffers that can be directly accessed by the compositor hardware.
... complex scenes are rendered using the device's gpu for maximum performance.
...And 8 more matches

Web Components
concepts and usage as developers, we all know that reusing code as much as possible is a good idea.
... this has traditionally not been so easy for custom markup structures — think of the complex html (and associated style and script) you've sometimes had to write to render custom ui controls, and how using them multiple times can turn your page into a mess if you are not careful.
... the basic approach for implementing a web component generally looks something like this: create a class in which you specify your web component functionality, using the ecmascript 2015 class syntax (see classes for more information).
...And 8 more matches

package.json - Archive of obsolete content
some of its entries, such as icon, name, and description, have direct analogues in the install manifest format, and entries from package.json are written into the install manifest when the add-on is built using jpm xpi.
...it looks like this (assuming the add-on's directory is "my-addon"): { "name": "my-addon", "title": "my-addon", "id": "jid1-1fergv45e4f4f@jetpack", "description": "a basic add-on", "author": "", "license": "mpl-2.0", "version": "0.1" } if you are using the new jpm tool, you can easily access manifest data from package.json by requiring it like any other module: var title = require("./package.json").title; key reference package.json may contain the following keys: author the name of the package's original author; this could be the name of a person or a company.
... note: this is deprecated along with cfx; it's not available when using jpm.
...And 7 more matches

Bootstrapped extensions - Archive of obsolete content
these are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application.
... this is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down.
... when the extension becomes enabled using the add-ons manager window.
...And 7 more matches

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
all of these documents currently assume, however, that you are developing your extension using xul and javascript only.
... anatomy of a simple c++ extension we assume that you are using c++ to write xpcom components that can be used either from other c++ components or from javascript.
...the main advantage of using an extension is that it is easy to package everything up and install it on another machine.
...And 7 more matches

Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
extension code using internal linkage will need to migrate to use frozen linkage because internal linkage will not be available in firefox 3.
...strings the most obvious change required by frozen linkage is using the frozen string api.
...unicharutils has been modified to provide a frozen-linkage comparator: nsstring mystring = somestring; - if (mystring.equals(otherstring, nscaseinsensitivestringcomparator())) + if (mystring.equals(otherstring, caseinsensitivecompare)) return ns_ok; // woot, we're equal in all things but case when using unicharutils from frozen-linkage code, link against the unicharutil_external_s static library.
...And 7 more matches

Adding sidebars - Archive of obsolete content
they also have shortcuts to open or close them using the keyboard.
...one minor difference is that the xul sidebar should be defined using the « xul reference « root element instead of window or dialog.
...the tabs are styled to match the operating system you're using, so you should avoid changing the css in tab boxes.
...And 7 more matches

Signing an XPI - Archive of obsolete content
you can either set this permanently via control panel->system properties->advanced->environment variables->system variables or do it each time you run the tools from the command-line (preferably using a batch file).
... enter new password: re-enter password: create a test certificate create a test certificate, using the -p option to set a password for the new certificate c:\projects\codesigning\> signtool -g mytestcert -d .
... -p"password" using certificate directory: .
...And 7 more matches

Binding Attachment and Detachment - Archive of obsolete content
attachment using css bindings can be attached to elements through css using the -moz-binding property.
... attachment using element.style property none of the xbl inheritance properties of element.style.mozbinding described here are implemented (if ever).
... when a binding is attached using the dom, it inherits from the current most derived binding that may already be attached to the element.
...And 7 more matches

ContextMenus - Archive of obsolete content
when using the mouse to open a context menu, the context is the element that was clicked.
... when using the keyboard, the context is the element in the window that is currently focused.
... <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute.
...And 7 more matches

Positioning - Archive of obsolete content
for popups attached using the popup or context attributes, the default position to appear is with the upper left corner (or upper right corner in right to left locales) at the position where the mouse was clicked.
...first, the position can be specified when using the popup's openpopup method.
...second, the position can be specified using several attributes placed on the menupopup, panel or tooltip element.
...And 7 more matches

Templates - Archive of obsolete content
the template is created using the template element.
...for example, if you are using a tree, you should place the template element inside a tree element.
...other values that you can use will depend on the datasource you are using.
...And 7 more matches

XUL Questions and Answers - Archive of obsolete content
a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument.
... using the "icon" attribute on a button from xulplanet.com reference: this attribute should be used to set the usage for common buttons.
...if you are using a button that matches one of these common usages, use the icon attribute to indicate this.
...And 7 more matches

Basic native form controls - Learn web development
previous overview: forms next in the previous article, we marked up a functional web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices.
... objective: to understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using html.
... they can benefit from spell checking (using the spellcheck attribute), if the browser supports it.
...And 7 more matches

Responsive images - Learn web development
in this section, we'll look at the two problems illustrated above and show how to solve them using html's responsive image features.
... you should note that we will be focusing on the html <img>s for this section, as seen in the content area of the example above — the image in the site header is only for decoration, and therefore implemented using css background images.
...using this technique could save mobile users a lot of bandwidth.
...And 7 more matches

Introduction to web APIs - Learn web development
in the same way, if you want to say, program some 3d graphics, it is a lot easier to do it using an api written in a higher-level language such as javascript or python, rather than try to directly write low level code (say c or c++) that directly controls the computer's gpu or other graphics functions.
...in the background, the browser is actually using some complex lower-level code (e.g.
...for example, you might draw shapes such as rectangles or circles, import an image onto the canvas, and apply a filter to it such as sepia or grayscale using the canvas api, or create a complex 3d scene with lighting and textures using webgl.
...And 7 more matches

Client-Server Overview - Learn web development
web servers and http (a primer) web browsers communicate with web servers using the hypertext transfer protocol (http).
...as you can see, the information from the form is encoded in the body of the request (for example, the new user fullname is set using: &user-fullname=hamish+willee).
...: cookie vary: accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:38:13 gmt location: https://developer.mozilla.org/profiles/hamishwillee keep-alive: timeout=5, max=1000 connection: keep-alive x-frame-options: deny x-cache-info: not cacheable; request wasn't a get or head content-length: 0 note: the http responses and requests shown in these examples were captured using the fiddler application, but you can get similar information using web sniffers (e.g.
...And 7 more matches

Introduction to client-side frameworks - Learn web development
by this point, it had already been using react to solve many of its problems internally.
... consider a common kind of application: a to-do list creator, which we'll look at implementing using a variety of frameworks in future chapters.
...vue is not alone in this: using a framework improves team as well as individual efficiency.
...And 7 more matches

Deploying our app - Learn web development
we push the code to github, deploy it using netlify, and even show you how to add a simple test into the process.
... objective: to finish working through our complete toolchain case study, focusing on deploying the app.
... the build process again, because we're using parcel for development, the build option is extremely simple to add.
...And 7 more matches

Error codes returned by Mozilla APIs
an error will typically be displayed on the error console, but can be captured using a try-catch block in javascript.
...for example, by using components.results.ns_error_not_initialized general errors the following errors are general and can occur when using any component.
... file errors the following table lists the errors that could occur when using files.
...And 7 more matches

OS.File for the main thread
using os.file from a jsm to import os.file into your chrome code, add the following line at the start of your script: components.utils.import("resource://gre/modules/osfile.jsm") promises before using os.file from the main thread, you need some understanding of the promise library.
... example: read the contents of a file as text the following snippet opens a file "file.txt" and read its contents as a string, using the default encoding (utf-8).
... example: write a string to a file the following snippet writes the text "this is some text" to a string "file.txt", using the default encoding (utf-8).
...And 7 more matches

Creating localizable web applications
avoid using it in a subdomain, as it can cause problems with certificates (this is wrong: http://en-us.example.com/foo/bar).
...use the dir attribute on the <html/> element and consider using a rtl class on <html/> or <body/> as well, in order to easily change css rules like in the example below.
...good: css: a[hreflang="en"]::after { content: " [en]" } html/php: <a href="http://www.mozilla.com/privacy-policy.html" hreflang="en"><?= _('privacy policy'); ?></a> don't mingle app logic and localizable content when using pure html if you decide not to use gettext on some pages (e.g.
...And 7 more matches

NSS tools : modutil
-jar jar-file add a new pkcs #11 module to the database using the named jar file.
...for the most basic case, simply upload the library: modutil -add modulename -libfile library-file [-ciphers cipher-enable-list] [-mechanisms mechanism-list] for example: modutil -dbdir sql:/home/my/sharednssdb -add "example pkcs #11 module" -libfile "/tmp/crypto.so" -mechanisms rsa:dsa:rc2:random using database directory ...
... installing a cryptographic module from a jar file pkcs #11 modules can also be loaded using a jar file, which contains all of the required libraries and an installation script that describes how to install the module.
...And 7 more matches

NSS tools : modutil
-jar jar-file add a new pkcs #11 module to the database using the named jar file.
...for the most basic case, simply upload the library: modutil -add modulename -libfile library-file [-ciphers cipher-enable-list] [-mechanisms mechanism-list] for example: modutil -dbdir sql:/home/my/sharednssdb -add "example pkcs #11 module" -libfile "/tmp/crypto.so" -mechanisms rsa:dsa:rc2:random using database directory ...
... installing a cryptographic module from a jar file pkcs #11 modules can also be loaded using a jar file, which contains all of the required libraries and an installation script that describes how to install the module.
...And 7 more matches

A Web PKI x509 certificate primer
generate the key using the following command: openssl genpkey -algorithm rsa -out key.pem -pkeyopt rsa_keygen_bits:2048 2048 is considered secure for the next 4 years.
...generate csr using this command: openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr -utf8 -subj '/cn=www.example.com' this creates a new certificate signing request (csr) that will be valid for 3 years.
...self-sign csr (using sha256) and append the extensions described in the file "openssl x509 -req -sha256 -days 3650 -in example.csr -signkey key.pem -set_serial $any_integer -extfile openssl.ss.cnf -out example.pem" you can now use example.pem as your certfile cas included in firefox when you visit a secure website, firefox will validate the website’s certificate by checking that the certificate that signed it is valid, and checking that the certificate that signed the parent certificate is valid and so forth up to a root certificate that is known to be valid.
...And 7 more matches

Places
places stores its data in an sqlite database using the mozstorage interfaces.
... manipulating bookmarks using places examples for how to work with bookmarks using the places api.
... using the places tagging service how to use the tagging service.
...And 7 more matches

Edit fonts - Firefox Developer Tools
note: the updated font tools as shown in this article are available in firefox 63 onwards; if you are using an older version of firefox the tools will not look or behave quite the same, but they will be similar (most notably the font editor will not be available).
... this can be set using em, rem, %, px, vh, or vw units.
... you can select values using the slider or enter a numeric value directly into the text box.
...And 7 more matches

Applying styles and colors - Web APIs
illstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw semi transparent circles for (var i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample an example using rgba() in this second example, we do something similar to the one above, but instead of drawing circles on top of each other, i've drawn small rectangles with increasing opacity.
... using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.
... note also that only start and final endpoints of a path are affected: if a path is closed with closepath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the linejoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical).
...And 7 more matches

WebGL model view projection - Web APIs
it assumes a knowledge of basic matrix math using translation, scale, and rotation matrices.
...normally model data is used that is in some arbitrary coordinate system, and is then transformed using a matrix, converting the model coordinates into the clip space coordinate system.
... for this example, it's easiest to illustrate how clip space works by simply using model coordinate values ranging from (-1,-1,-1) to (1,1,1).
...And 7 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
in this article, we'll make use of information introduced in the previous articles in our webxr tutorial series to construct an example which animates a rotating cube around which the user can move freely using a vr headset, keyboard, and/or mouse.
... this example demonstrates this by showing the canvas on the screen, even when presenting a scene as an immersive display using an xr device.
... note: this example always displays what it renders on the screen, even if using immersive-vr mode.
...And 7 more matches

WebXR Device API - Web APIs
the webxr device api implements the core of the webxr feature set, managing the selection of output devices, render the 3d scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.
...using the xrsystem interface, you can create xrsessions to represent actual ar and/or vr sessions.
... xrrigidtransform a transform defined using a position and orientation in the virtual space's coordinate system as described by the xrspace.
...And 7 more matches

Web Authentication API - Web APIs
this is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using web authentication, the password is replaced with a key pair that is stored in an authenticator.
...typically, server communications would be rest over https (probably using xmlhttprequest or fetch), but they could also be soap, rfc 2549 or nearly any other protocol provided that the protocol is secure.
...this could be entering a pin, using a fingerprint, doing an iris scan, etc.
...And 7 more matches

ARIA Test Cases - Accessibility
where a failure occurs we will test the browser for api incorrectness, using tools such as msaa inspect.
...the state of tristate checkboxes is not announced when initially focusing.
...a n/a jaws 10 pass fail - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - drag and drop tic tac toe slide show expected at behavior: (mz) once focusing or arrowing onto the draggable item, screen reader should indicate that item can be an object that can be dragged.
...And 7 more matches

CSS Box Alignment - CSS: Cascading Style Sheets
we were able to align text using text-align, center blocks using auto margins, and in table or inline-block layouts using the vertical-align property.
... css grid layout alignment example in this example using grid layout, there is extra space in the grid container after laying out the fixed width tracks on the inline (main) axis.
... this space is distributed using justify-content.
...And 7 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
in this guide, i will explain how a grid fits together with other techniques you may already be using.
... in this first example, i am using flexbox to lay out a set of boxes.
... the same layout with css grids in this next example, i create the same layout using grid.
...And 7 more matches

Index - Developer guides
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
... 7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player.
... this article will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <track> element.
...And 7 more matches

User input and controls - Developer guides
once you decided the input mechanisms, you can control them using tools offered by the web platform or javascript libraries.
... using features such as contenteditable elements you can implement fast rich-text editors and with drag&drop let users moving elements inside your app.
... the following is a set of recommendations and best practices for using such tools in open web apps.
...And 7 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
it may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
... it can also be the destination for streamed media, using a mediastream.
... disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc).
...And 7 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
below is a list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them.
... crossorigin indicates if the fetching of the image must be done using a cors request.
...user agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors.
...And 7 more matches

<input type="image"> - HTML: Hypertext Markup Language
height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not to show images, or if the user is using a screen reading device).
...there are three permitted values: application/x-www-form-urlencoded this, the default value, sends the form data as a string after url encoding the text using an algorithm such as encodeuri().
...this url is then sent to the server using an http get request.
...And 7 more matches

<input type="number"> - HTML: Hypertext Markup Language
the browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.
...ment that contains the optional pre-defined autocomplete options max the maximum value to accept for this input min the minimum value to accept for this input placeholder an example value to display inside the field when it's empty readonly a boolean attribute indicating whether the value is read-only step a stepping interval to use when using up and down arrows to adjust the value, as well as for validation list the values of the list attribute is the id of a <datalist> element located in the same document.
... if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
...And 7 more matches

<input type="text"> - HTML: Hypertext Markup Language
you can retrieve this using the value property in javascript.
... if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
... note: avoid using the placeholder attribute if you can.
...And 7 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
disableremoteplayback a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc).
... other usage notes: if you don't specify the controls attribute, the video won't include the browser's default controls; you can create your own custom controls using javascript and the htmlmediaelement api.
... you can play audio files using a <video> element.
...And 7 more matches

Cross-Origin Resource Sharing (CORS) - HTTP
this means that a web application using those apis can only request resources from the same origin the application was loaded from unless the response from other origins includes the right cors headers.
... images/video frames drawn to a canvas using drawimage().
... accept-language content-language content-type (but note the additional requirements below) dpr downlink save-data viewport-width width the only allowed values for the content-type header are: application/x-www-form-urlencoded multipart/form-data text/plain no event listeners are registered on any xmlhttprequestupload object used in the request; these are accessed using the xmlhttprequest.upload property.
...And 7 more matches

Strict-Transport-Security - HTTP
the http strict-transport-security response header (often abbreviated as hsts) lets a web site tell browsers that it should only be accessed using https, instead of using http.
... header type response header forbidden header name no syntax strict-transport-security: max-age=<expire-time> strict-transport-security: max-age=<expire-time>; includesubdomains strict-transport-security: max-age=<expire-time>; preload directives max-age=<expire-time> the time, in seconds, that the browser should remember that a site is only to be accessed using https.
... the http strict transport security header informs the browser that it should never load a site using http and should automatically convert all attempts to access the site using http to https requests instead.
...And 7 more matches

Web audio codec guide - Web media technologies
in addition to choosing the type of encoder to use, you may have the opportunity to adjust the encoder using parameters that choose specific algorithms, tune those algorithms, and specify how many passes to apply while encoding.
... audio frequency bandwidth the audio frequency bandwidth of a codec indicates the range of audio frequencies that can be represented using the codec.
...this capability was introduced on each platform in different firefox releases: aac support in firefox using external library, by platform platform first firefox version with aac support windows (vista and later) 22 android 20 linux (depends on gstreamer) 26 macos 35 [2] chrome supports aac only in mp4 containers, and only supports aac's main profile.
...And 7 more matches

Media container formats (file types) - Web media technologies
instead, it streams the encoded audio and video tracks directly from one peer to another using mediastreamtrack objects to represent each track.
...a good example of this is the mp3 audio file, which is in fact an mpeg-1 container with a single audio track encoded using mpeg-1 audio layer iii encoding.
...you are typically better off using webm, though there are times when ogg is useful to offer, such as when you wish to support older versions of firefox and chrome which don't yet support webm.
...And 7 more matches

Animation performance and frame rate - Web Performance
using these tools you can measure an application's animation frame rate, and diagnose performance bottlenecks if any are found.
... compared with animating elements using javascript, css animations can be easier to create.
... an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform.
...And 7 more matches

Progressive web apps (PWAs)
most of the features related to a pwa such as geolocation and even service workers are available only once the app has been loaded using https.
...this guide explains how a2hs is used, and what you need to do as a developer to allow your users to take advantage of it.how to make pwas installablein this article, we learned about how we can make pwas installable with a properly-configured web manifest, and how the user can then install the pwa with the "add to home screen" feature of their browser.how to make pwas re-engageable using notifications and pushhaving the ability to cache the contents of an app to work offline is a great feature.
...but instead of relying only on user actions, we can do more, using push messages and notifications to automatically re-engage and deliver new content whenever it is available.introduction to progressive web appsthis article provides an introduction to progressive web apps (pwas), discussing what they are and the advantages they offer over regular web apps.making pwas work offline with service workersin this article we took a simple look at how you can make your pwa work offline with service workers.
...And 7 more matches

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
modern browsers support using svg within css styles to apply graphical effects to html content.
... using embedded svg to apply an svg effect using css styles, you first need to create the css style that references the svg to apply.
... example: masking for example, you can make a gradient mask for html content using svg and css code similar to the following, inside your html document: <svg height="0"> <mask id="mask-1"> <lineargradient id="gradient-1" y2="1"> <stop stop-color="white" offset="0"/> <stop stop-opacity="0" offset="1"/> </lineargradient> <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> </mask> </svg> .target { mask: url(#mask-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } note that in the css, the mask is specified using a url ...
...And 7 more matches

Content type - SVG: Scalable Vector Graphics
in the svg dom, <angle> values are represented using svgangle or svganimatedangle objects.
...using srgb provides an unambiguous and objectively measurable definition of the color, which can be related to international standards.
...svg's extension to color, including the ability to specify icc-based colors, are represented using dom interface svgcolor.
...And 7 more matches

File I/O - Archive of obsolete content
you access the file system using mozilla xpcom components.
... creating an nsifile object components.utils.import("resource://gre/modules/fileutils.jsm"); var file = new fileutils.file("/home"); or the same without using fileutils.jsm: var file = components.classes["@mozilla.org/file/local;1"].
... getting files in special directories components.utils.import("resource://gre/modules/fileutils.jsm"); // get the "data.txt" file in the profile directory var file = fileutils.getfile("profd", ["data.txt"]); or the same without using fileutils.jsm: // get profile directory.
...And 6 more matches

HTML to DOM - Archive of obsolete content
although you can now natively parse html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all browsers in use in the wild.
... safely parsing simple html to dom when using xmlhttprequest to get the html of a remote webpage, it is often advantageous to turn that html string into dom for easier manipulation.
...see using a hidden iframe element to parse html to a window's dom below.
...And 6 more matches

Extension Versioning, Update and Compatibility - Archive of obsolete content
add-on versioning add-ons should specify their versions using the toolkit version format.
...using it in a minversion usually doesn't produce the effect you want.
... in the update manifest delivered from the updateurl the updatelink must be specified in one of the following ways: the updatelink to the xpi file must use https the updatelink can use http and you must include an updatehash for the xpi file using sha1, sha256, sha384 or sha512 hash algorithms.
...And 6 more matches

Connecting to Remote Content - Archive of obsolete content
« previousnext » using xmlhttprequest xmlhttprequest is an api for transferring xml between a local script and a remote server via http.
...we create this instance using xpcom instead of the usual way (new xmlhttprequest()) because this way works both in chrome and non-chrome code.
... if the response is an xml document, the responsexml property will hold an xmldocument object that can be manipulated using dom methods.
...And 6 more matches

JavaScript Object Management - Archive of obsolete content
we'll be using the placeholder 〈namespace〉 below.
... notice how the 〈namespace〉 namespace is declared using var.
...in case you're using javascript code modules or xpcom objects, where a window object is not readily available, use an nsitimer instead.
...And 6 more matches

Setting Up a Development Environment - Archive of obsolete content
we recommend you set up make in your system, since our examples come with all the necessary files to build and install the resulting xpi using this tool.
...or you can create an equivalent system using batch, ant or whatever you prefer.
... ultimately you can just compress the contents of the src directory using any zip or archive tool and get a similar result.
...And 6 more matches

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
it also provides two implementation examples using the model.
...this sample was made using iframes to illustrate a possible implementation.
...see the table below for a description of how applications like this exemplify inner-browsing and how they might be implemented using the inner-browsing approach.
...And 6 more matches

Working With Directories - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
... a reference to a directory may be created in the same way as with a file by using nsiscriptableio.getfile().
...var dir1 = io.getfile("home", ""); var dir2 = io.getfile("desktop", "myfiles"); to refer to a subdirectory, rather than using a path, use nsifile.append() to build up a path.
...And 6 more matches

Reading from Files - Archive of obsolete content
other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes.
...using the former will cause characters in the stream to be interpreted with a particular character encoding.
...var file = io.getfile("home", "sample.txt"); var stream = io.newinputstream(file, "text"); this example first retrieves a file object using nsiscriptableio.getfile().
...And 6 more matches

Multiple Queries - Archive of obsolete content
here is an example using an rdf datasource: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> <...
... this method of using multiple queries allows different content to generated for each query.
... multiple queries using the rdf simple syntax you can also use multiple queries with rdf datasources using the simple query syntax.
...And 6 more matches

Introduction to SSL - Archive of obsolete content
using the same techniques as those used for server authentication, ssl-enabled server software can check that a client's certificate and public id are valid and have been issued by a certificate authority (ca) listed in the server's list of trusted cas.
...the ssl handshake protocol involves using the ssl record protocol to exchange a series of messages between an ssl-enabled server and an ssl-enabled client when they first establish an ssl connection.
...server administrators must be careful about enabling it, however, because data sent using this cipher suite is not encrypted and may be accessed by eavesdroppers.
...And 6 more matches

Building a Theme - Archive of obsolete content
it's especially important to install the dom inspector, which we'll be using in later steps.
... if you get a message that the install.rdf is malformed, it is helpful to load it into firefox using the file->open file command and it will report xml errors to you.
...user actions are bound to functionality using javascript.
...And 6 more matches

Unconventional controls - Game development
using a tv remote to control the game ended up being surprisingly easy, because the events fired by the controller are emulating conventional keyboard keys.
...you can also check this handy cheat sheet seen below if you're working with panasonic tvs running firefox os: you can add moving between states, starting a new game, controlling the ship and blowing stuff up, pausing and restarting the game.
...you can also check out the tutorial about using leap motion plugin for kiwi.js, or the case study of building a web game with leap motion and pixi.js.
...And 6 more matches

CSS values and units - Learn web development
note: yes, css values tend to be denoted using angle brackets, to differentiate them from css properties (e.g.
... in the following example we have set the color of our heading using a keyword, and the background using the rgb() function: h1 { color: black; background-color: rgb(197,93,161); } a value in css is a way to define a collection of allowable sub-values.
... numbers, lengths, and percentages there are various numeric data types that you might find yourself using in css.
...And 6 more matches

What text editors are available? - Learn web development
do i need support/help while using my text editor?
...e free mac faq, forum pdf manual no vim specific open license free windows, mac, linux mailing list online manual yes visual studio code open source under mit licence/ specific licence for product free windows, mac, linux faq documentation yes active learning in this active learning section, we would like you to try using and/or installing a text editor of your choice.
... so first find out which os you're using, and then check if a given editor supports your os.
...And 6 more matches

Functions — reusable blocks of code - Learn web development
previous overview: building blocks next another essential concept in coding is functions, which allow you to store a piece of code that does a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times.
...in fact, we've been using functions all the way through the course so far; we've just not been talking about them very much.
... pretty much anytime you make use of a javascript structure that features a pair of parentheses — () — and you're not using a common built-in language structure like a for loop, while or do...while loop, or if...else statement, you are making use of a function.
...And 6 more matches

Introduction to the server side - Learn web development
it can also make sites easier to use by storing personal preferences and information — for example reusing stored credit card details to streamline subsequent payments.
... web browsers communicate with web servers using the hypertext transfer protocol (http).
...on a dynamic website html pages are normally created by inserting data from a database into placeholders in html templates (this is a much more efficient way of storing large amounts of content than using static websites).
...And 6 more matches

Getting started with React - Learn web development
this article is going to focus on the use case of using react to render the entire user interface of an application, using tooling provided by facebook’s own create-react-app tool.
...when compiled (using a tool like babel or parcel), our header expression would look like this: const header = react.createelement("header", null, react.createelement("h1", null, "mozilla developer network") ); it's possible to skip the compilation step and use react.createelement() to write your ui yourself.
...others say that its blended nature makes it confusing.
...And 6 more matches

Beginning our React todo list - Learn web development
add a task using the mouse or keyboard.
... mark any task as completed, using the mouse or keyboard.
... delete any task, using the mouse or keyboard.
...And 6 more matches

Getting started with Vue - Learn web development
most of the time, vue components are written using a special html template syntax.
...this allows you to start using vue on existing sites, which is why vue prides itself on being a progressive framework.
... this is a great option when migrating an existing project using a library like jquery to vue.
...And 6 more matches

Focus management with Vue refs - Learn web development
we'll look at using vue refs to handle this — an advanced feature that allows you to have direct access to the underlying dom nodes below the virtual dom, or direct access from one component to the internal dom structure of a child component.
... objective: to learn how to handle focus management using vue refs.
...in addition, what happens when you press tab again varies depending on the browser you're using.
...And 6 more matches

Understanding client-side JavaScript frameworks - Learn web development
as an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.
...along the way, we'll look at using events in ember, creating component classes to contain javascript code to control interactive features, and setting up a service to keep track of the data state of our app.
...along the way, we'll learn about using conditional rendering in our templates.
...And 6 more matches

Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the browser by adding images to the header area of the firefox browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
... static themes static themes are specified using the same resources as a browser extension: a manifest.json file to define the theme components with those components stored in the same folder as the manifest.json file or a sub folder.
...you can, however, programmatically include a theme in an extension using the theme api.
...And 6 more matches

Debugging on Mac OS X
this document explains how to debug mozilla-derived applications such as firefox, thunderbird, and seamonkey on macos using xcode.
... creating a debuggable build first, you need to build the application you're going to debug using --disable-optimize--enable-debug-symbols in your .mozconfig (also add --enable-debug if you want assertions etc.
... to obtain a hardened runtime build without using try infrastructure, a developer can manually codesign builds using the macos codesign(1) command with the developer.entitlements.xml file from the tree.
...And 6 more matches

Experimental features in Firefox
editor's note: when adding features to these tables, please try to include a link to the relevant bug or bugs using the bug macro: {{bug(bug-number)}}.
... nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.
... when tabbing between elements), and not when they are focused using a mouse or other pointing device.
...And 6 more matches

Leak-hunting strategies and tips
strategy for finding leaks when trying to make a particular testcase not leak, i recommend focusing first on the largest object graphs (since these entrain many smaller objects), then on smaller reference-counted object graphs, and then on any remaining individual objects or small object graphs that don't entrain other objects.
...leaking many copies of a string could be a very large leak, but the object graphs are small and easy to identify using gc-based leak detection.) what leak tools do we have?
...--jesse) dropping a reference on the floor by: forgetting to release (because you weren't using nscomptr when you should have been): see bug 99180 or bug 93087 for an example or bug 28555 for a slightly more interesting one.
...And 6 more matches

Power profiling overview
intel processor basics processor layout the following diagram (from the intel power governor documentation) shows how machines using recent intel processors are constructed.
...and many tools report c-states using the latter names.
... the exact relationship is confusing, and chapter 13 of the intel optimization manual has more details.
...And 6 more matches

PKCS11 FAQ
for information on how to do this, see using the jar installation manager to install a pkcs #11 cryptographic module.
...nss continues to evolve, and periodically enhances it's functionality by using a more complete list of pkcs #11 functions.
...nss is perfectly capable of using token certificates in place.
...And 6 more matches

Querying Places
// |query| and |options| are objects created in the previous section query.setparents([placesutils.bookmarks.toolbarguid], 1); let result = placesutils.history.executequery(query, options); serializing queries query and options objects can be serialized into a string starting with "place:" using queriestoquerystring.
...the original objects can be deserialized from the string using querystringtoqueries.
... using the results the most common way to use results is to implement a view.
...And 6 more matches

XPCOM array guide
note that this class differs from the other array types by using unsigned indices.
... nstptrarray<t> and nsautotptrarray<t> - similar to using t* with the above arrays, but also provides a safeelementat() accessor.
... an nsiarray implementation can be created from c++ or javascript using nsicomponentmanager.createinstance() and the contract id "@mozilla.org/array;1".
...And 6 more matches

XPCOM changes in Gecko 2.0
starting in gecko 2, however, components are registered using manifest files, similarly to how chrome is registered.
...xpt files the path of any xpt files must be listed explicitly in a manifest using an interfaces directive: interfaces components/mycomponent.xpt javascript components the registration information for javascript components is no longer located in the component itself; instead, it's located in the manifest.
...*/ if (xpcomutils.generatensgetfactory) var nsgetfactory = xpcomutils.generatensgetfactory([mycomponent]); else var nsgetmodule = xpcomutils.generatensgetmodule([mycomponent]); binary components binary components must be listed explicitly in a manifest using a binary-component directive: binary-component components/mycomponent.dll c++ in the component must be changed: a binary component no longer exports a nsgetmodule() function.
...And 6 more matches

nsIAnnotationService
do not set favicons using this service, it will not work.
... binary annotations should be set using setitemannotationbinary() or setpageannotationbinary().
...do not set favicons using this service, it will not work.
...And 6 more matches

Reference Manual
such a cast can easily by-pass nscomptrs machinery, causing leaks, type mismatches, and other calamities.
...here is a sample demonstrating the various positions these `annotations' can appear in, using dont_addref // controlling assignment into an |nscomptr|...
...nscomptr<nsifoo> foo( dont_queryinterface(afooptr) ); // or foo = dont_queryinterface(afooptr); by using this form, you are promising that the pointer you are assigning in is already a pointer to the xpcom-correct interface matching the nscomptrs underlying type, in this case, nsifoo.
...And 6 more matches

Animating CSS properties - Firefox Developer Tools
compared with animating elements using javascript, css animations can be easier to create.
... an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform.
... the intention of this scenario isn't to convince you that animating using margin is always a bad idea.
...And 6 more matches

Introduction to the DOM - Web APIs
many browsers extend the standard, so care must be exercised when using them on the web where documents may be accessed by various browsers with different doms.
... the modern dom is built using multiple apis that work together.
...every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the dom and a scripting language like javascript.
...And 6 more matches

RTCPeerConnection - Web APIs
ce specifies a function to be called when the signalingstatechange event occurs on an rtcpeerconnection interface.ontrack the rtcpeerconnection property ontrack is an eventhandler which specifies a function to be called when the track event occurs, indicating that a track has been added to the rtcpeerconnection.methodsalso inherits methods from: eventtargetaddicecandidate()when a web site or app using rtcpeerconnection receives a new ice candidate from the remote peer over its signaling channel, it delivers the newly-received candidate to the browser's ice agent by calling rtcpeerconnection.addicecandidate().addstream() the obsolete rtcpeerconnection method addstream() adds a mediastream as a local source of audio or video.
... instead of using this obsolete method, you should instead use addtrack() once for each track you wish to send to the remote peer.addtrack()the rtcpeerconnection method addtrack() adds a new media track to the set of tracks which will be transmitted to the other peer.close() the rtcpeerconnection.close() method closes the current peer connection.createanswer() the createanswer() method on the rtcpeerconnection interface creates an sdp answer to an offer received from a remote peer during the offer/answer negotiation of a webrtc connection.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface.
...And 6 more matches

WindowOrWorkerGlobalScope.setTimeout() - Web APIs
this syntax is not recommended for the same reasons that make using eval() a security risk.
... polyfill if you need to pass one or more arguments to your callback function, but need it to work in browsers which don't support sending additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 and below), you can include this polyfill to enable the html5 standard arguments-passing functionality.
...and as shown below, using call to set this doesn't work either.
...And 6 more matches

ARIA: textbox role - Accessibility
whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.
...instead of using aria-placeholder, use the semantic <input type="text"> or <textarea> with a placeholder attribute.
...instead of using aria-readonly, use the semantic <input type="text"> or <textarea> with a readonly attribute.
...And 6 more matches

Ordering Flex Items - CSS: Cascading Style Sheets
in this article we will take a look at ways in which you can change the visual order of your content when using flexbox.
... if you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source.
...if you change the order using flex-direction you can see how the tab order continues to follow the order that the items are listed in the source.
...And 6 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
css grid layout has the following features: fixed and flexible track sizes you can create a grid with fixed track sizes – using pixels for example.
...you can also create a grid using flexible sizes with percentages or with the new fr unit designed for this purpose.
... item placement you can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid.
...And 6 more matches

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
given the flexibility of svg images, there's a lot to keep in mind when using them as background images with the background-image property, and even more to keep in mind when also scaling them using the background-size property.
... this article describes how scaling of svg images is handled when using these properties.
... source image examples before diving in to look at the results of using different kinds of source images and seeing how they look when used with background-size, it would be helpful to look at a few example source images that have different dimensions and sizing settings.
...And 6 more matches

background-size - CSS: Cascading Style Sheets
%; background-size: auto 6px; background-size: auto auto; /* multiple backgrounds */ background-size: auto, auto; /* not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* global values */ background-size: inherit; background-size: initial; background-size: unset; the background-size property is specified in one of the following ways: using the keyword values contain or cover.
... using a width value only, in which case the height defaults to auto.
... using both a width and a height value, in which case the first sets the width and the second sets the height.
...And 6 more matches

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
using the display property we can switch between block and inline.
...if you create a flex container using the single value of inline-flex you will have an inline-level box with flex children.
...using display: grid will give you a block-level box, which creates a grid formatting context for the direct children.
...And 6 more matches

Live streaming web audio and video - Developer guides
key differences between streamed and static media in this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or webm file.
...using rtp with rtcp allows for adaptive streaming.
... using streaming protocols the process of using the various protocols is reassuringly familiar if you are used to working with media over http.
...And 6 more matches

Audio and video manipulation - Developer guides
y = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; frame.data[i * 4 + 1] = grey; frame.data[i * 4 + 2] = grey; } this.ctx1.putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload() result this is a pretty simple example showing how to manipulate video frames using a canvas.
... for efficiency, you should consider using requestanimationframe() instead of settimeout() when running on browsers that support it.
... playback rate we can also adjust the rate that audio and video plays at using an attribute of the <audio> and <video> element called playbackrate.
...And 6 more matches

<input type="search"> - HTML: Hypertext Markup Language
you can retrieve this using the htmlinputelement.value property in javascript.
... if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
... note: avoid using the placeholder attribute if you can.
...And 6 more matches

<input type="tel"> - HTML: Hypertext Markup Language
using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient.
... if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
... note: avoid using the placeholder attribute if you can.
...And 6 more matches

<input type="url"> - HTML: Hypertext Markup Language
if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
... note: avoid using the placeholder attribute if you can.
...as a general rule, you should avoid using them unless it can't be helped.
...And 6 more matches

Closures - JavaScript
run the code using this jsfiddle link and notice that the alert() statement within the displayname() function successfully displays the value of the name variable, which is declared in its parent function.
...one way of doing this is to specify the font-size of the body element (in pixels), and then set the size of the other elements on the page (such as headers) using the relative em unit: body { font-family: helvetica, arial, sans-serif; font-size: 12px; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; } such interactive text size buttons can change the font-size property of the body element, and the adjustments are picked up by other elements on the page thanks to the relative units.
... document.getelementbyid('size-12').onclick = size12; document.getelementbyid('size-14').onclick = size14; document.getelementbyid('size-16').onclick = size16; <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-16">16</a> run the code using jsfiddle.
...And 6 more matches

JavaScript data types and data structures - JavaScript
the indeed proper way to check what sort of object we are using is instanceof keyword.
... starting with ecmascript 2015, you are also able to check if a number is in the double-precision floating-point number range using number.issafeinteger() as well as number.max_safe_integer and number.min_safe_integer.
... caution: although bitwise operators can be used to represent several boolean values within a single number using bit masking, this is usually considered a bad practice.
...And 6 more matches

Indexed collections - JavaScript
let wisenarray = array.of(9.3) // wisenarray contains only one element 9.3 referring to array elements because elements are also properties, you can access the using property accessors.
...rr[3.4] = 'oranges' console.log(arr.length) // 0 console.log(arr.hasownproperty(3.4)) // true you can also populate an array when you create it: let myarray = new array('hello', myvar, 3.14159) // or let myarray = ['mango', 'apple', 'orange'] understanding length at the implementation level, javascript's arrays actually store their elements as standard object properties, using the array index as the property name.
...lement) }) // first // second // fourth if (array[2] === undefined) { console.log('array[2] is undefined') // true } array = ['first', 'second', undefined, 'fourth'] array.foreach(function(element) { console.log(element) }) // first // second // undefined // fourth since javascript elements are saved as standard object properties, it is not advisable to iterate through javascript arrays using for...in loops, because normal elements and all enumerable properties will be listed.
...And 6 more matches

Functions - JavaScript
the function constructor note: using the function constructor to create functions is not recommended since it needs the function body as a string which may prevent some js engine optimizations and can also cause other problems.
... as all other objects, function objects can be created using the new operator: new function (arg1, arg2, ...
... invoking the function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor.
...And 6 more matches

Localization - Archive of obsolete content
using localized strings in html this example uses the action button api, which is only available from firefox 29 onwards.
... the string is inserted as text, so you can't insert html using a statement like: # does not work.
...ments 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 ariamozhint 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 with existing tools that expect "_" to indicate localizable strings.
...And 5 more matches

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
so i'm very familiar with standards and the benefits of using them.
...we've noted that some of the file size comparison's aren't necessarily fair, because we're not comparing apples to apples-- we're comparing an old design using html, tables, and spacer gifs to a new design much richer in imagery and style.
...until this redesign, wired news wasn't even using css to style the content inside tables.
...And 5 more matches

Binding Implementations - Archive of obsolete content
introduction bindings can define methods and properties on a bound element using the implementation tag.
... the methods and properties of an implementation can be defined declaratively using method and property tags in xml, or an external implementation (e.g., a binary implementation) can be specified using the src attribute.
... methods methods are defined using the method element.
...And 5 more matches

MenuItems - Archive of obsolete content
a shortcut key can be created using the key element.
... <keyset> <key id="open-key" modifiers="accel" key="o"/> <key id="close-key" modifiers="accel" key="c"/> </keyset> <menubar> <menu label="view"> <menupopup> <menuitem label="open" key="open-key"/> <menuitem label="close" key="close-key"/> </menupopup> </menu> </menubar> the two menuitems are associated with a key using the key attribute.
...for the "open" item in this example, this command can be invoked by using the "accel" modifier key and pressing 'o'.
...And 5 more matches

Menus - Archive of obsolete content
menu types a menu is created using the menupopup tag.
... the menubar element a menu bar is created by using the xul menubar tag.
... the label for the menu element is specified using the label attribute.
...And 5 more matches

Tooltips - Archive of obsolete content
note that tooltips can only be activated using the mouse, so they should never contain important information that isn't available elsewhere.
... the tooltip element tooltips are displayed using a tooltip element, which is a type of popup, but is styled to look different.
... the tooltip can be created using the tooltip element, the contents of which appear inside the tooltip.
...And 5 more matches

Popup Guide - Archive of obsolete content
a menu is created using the menupopup element.
... a panel is created using the panel element.
... a tooltip can be created by setting the tooltiptext attribute on an element or by using the tooltip element.
...And 5 more matches

Adding Event Handlers - Archive of obsolete content
using scripts to make the find files dialog functional, we need to add some scripts which will execute when the user interacts with the dialog.
...we write this using javascript functions much in the same way as html.
... you can include multiple scripts in a xul file by using multiple script tags, each pointing to a different script.
...And 5 more matches

Focus and Selection - Archive of obsolete content
you can also add event handlers dynamically using the dom function addeventlistener.
...you can retrieve the command dispatcher from a window using the document's commanddispatcher property.
...this is because xul text boxes are implemented using the html input widget, so the focus event is received for that element instead.
...And 5 more matches

Manifest Files - Archive of obsolete content
if you just want to try testing privileged xul code in the firefox browser, you can do this easily by just using a manifest with only one line in it: create a new directory somewhere.
...this can be either a local file path using a file url or a jar archive using a jar url, which will be described in a moment.
...for standalone applications, they can be packaged up using xulrunner.
...And 5 more matches

Modifying a XUL Interface - Archive of obsolete content
creating new elements you can create new elements using the createelement() function of the document.
...you can then set attributes of the element using the setattribute() function and append it to the xul document using the appendchild() function.
... addbutton() then assigns the label 'a new button' to the button using the setattribute() function.
...And 5 more matches

XUL Structure - Archive of obsolete content
by accessing a file using a chrome url, the files receive elevated privileges to access local files, access preferences and bookmarks and perform other privileged operations.
...these packaged files can be created by using a zip utility.
...the extension will hook into the browser using a xul specific feature called an overlay which allows the xul from the extension to mesh with the xul in the browser.
...And 5 more matches

XEmbed Extension for Mozilla Plugins - Archive of obsolete content
overview recent versions of mozilla include an extension for writing plugins that use xembed instead of using the old xt-based mainloop that most plugins have been using since the netscape 3.x days.
...key differences all of the interfaces that you would normally expect to exist in the plugins will still exist when using xembed plugins.
... hosting using gtk2.x included below are a couple of code snippits that should help you get started as well as some hints on building a successful plugin.
...And 5 more matches

Date.prototype.toLocaleFormat() - Archive of obsolete content
the non-standard tolocaleformat() method converts a date to a string using the specified formatting.
... return value a string representing the given date using the specified formatting.
...names for months and days of the week are localized using the operating system's locale.
...And 5 more matches

LiveConnect Overview - Archive of obsolete content
this chapter describes using liveconnect technology to let java and javascript code communicate with each other.
...for example, you can create a java string object and assign it to the javascript variable mystring by using the new operator with the java constructor, as follows: var mystring = new java.lang.string("hello world"); in the previous example, the variable mystring is a javaobject because it holds an instance of the java object string.
...(although this functionality (along with some others) had been broken in gecko 1.9 (see bug 391642) as the mozilla-specific liveconnect code had not been maintained inside mozilla, with java 6 update 11 and 12 building support for reliance on mozilla's implementation of the generic (and cross-browser) npapi plugin code, this has again been fixed.) for example, suppose you are using the java forname method to assign the name of a java class to a variable called theclass.
...And 5 more matches

Reference - Archive of obsolete content
i also just read a document on proper inheritance using apply().
...--maian 01:43, 30 september 2005 (pdt) we should define the terms we are using.
...sevenspade 13:19, 2 july 2006 (pdt) after some thought, i removed the references to using language="javascript1.2", and all references are merely presented as information detailing past behavior.
...And 5 more matches

Plug-in Development Overview - Gecko Plugin API Reference
for information about the html elements to use, see using html to display plug-ins.
... to determine the mime types and file extensions that the plug-in handles, the browser normally uses the content of the registry entries for the plug-in described below in installation using the registry.
... working with urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a url anywhere on the network, provide hyperlinks to other documents, post form data to cgi scripts using http, or upload files to a remote server using ftp.
...And 5 more matches

What is accessibility? - Learn web development
we traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.
...see our cross-browser testing screen readers guide for more details on using them.
... the way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the keyboard to see how you get on.
...And 5 more matches

Debugging CSS - Learn web development
in order to do so i'll be using an example file.
... you can use this to do an a/b comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.
... the following video provides some useful tips on debugging css using the firefox devtools: editing values in addition to turning properties on and off, you can edit their values.
...And 5 more matches

Practical positioning examples - Learn web development
note: some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a javascript feature such as xmlhttprequest.
... the idea here is that we will style the tabs to look like a standard horizontal navigation menu, and style the panels to sit on top of one another using absolute positioning.
... next, add the following just below your previous css: .info-box { width: 450px; height: 400px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick.
...And 5 more matches

Sending forms through JavaScript - Learn web development
using a standalone formdata object.
... using formdata bound to a <form> element.
... using xmlhttprequest and the formdata object building an http request by hand can be overwhelming.
...And 5 more matches

Choosing the right approach - Learn web development
refer to the reference documentation for the api you're using for more specific support info.
...universe!'); }, 2000) pitfalls you can use recursive settimeout() calls to run a function repeatedly in a similar fashion to setinterval(), using code like this: let i = 1; settimeout(function run() { console.log(i); i++; settimeout(run, 100); }, 100); there is a difference between recursive settimeout() and setinterval(): recursive settimeout() guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again.
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes no (unless it is the same one) no code example the following function creates a new date() object, extracts a time string out of it using tolocaletimestring(), and then displays it in the ui.
...And 5 more matches

Mozilla accessibility architecture
the toolkit-specific classes then use these xpcom interfaces to gather information about the objects they want to expose, make any necessary changes, and then expose the information using microsoft com on windows, or through gtk2's atk api's on linux and unix.
...the assistive technology can choose to get the entire tree by using a depth- or breadth- first search, it can choose to get accessibles only based on events like focus, or it can get the accessible at a given point on the screen.
...the atk has more convenience methods than msaa does for traversal - for example it is possible to go straight to the accessible for a specific row and column of a table, using nsiaccessibletable::cellrefat().
...And 5 more matches

Obsolete Build Caveats and Tips
from firefox 10, the compilator is visual studio 2010; if you want to use it, you must use a previous version of it !), or 2005 professional from build_instructions those who need to work with the code for firefox 3/mozilla 1.9 and earlier can check out the latest source using cvs.
...if you're using visual studio, go to project properties > c/c++ > language > treat wchar_t as built-in type and set it to "yes".
...try to avoid using it.
...And 5 more matches

Internationalized Domain Names (IDN) Support in Mozilla Browsers
if end users input non-ascii characters as part of a domain name or if a web page contains a link using a non-ascii domain name, the application must convert such input into a special encoded format using only the usual ascii subset characters.
... ascii-compatible encoding (ace) the next step is to convert the 8-bit characters in unicode to 7-bit ones using only restricted ascii characters.
...this makes it possible for netscape 7.1/mozilla 1.4 users to access japanese host names under .jp top domain without any additional setup using just the built-in idn functionality.
...And 5 more matches

CustomizableUI.jsm
areas are registered using the registerarea method and unregistered using the unregisterarea method.
... note that ideally, you should register your toolbar using registerarea before any of the toolbars have their xbl bindings constructed (which will happen when they're added to the dom and are not hidden).
...this is roughly equivalent to manually looking up the position and using insertitem in the old api, but a lot less work for consumers.
...And 5 more matches

Profiling with the Firefox Profiler
using the firefox profiler visit profiler.firefox.com to get started.
... symbols for try builds are not uploaded to the symbol server automatically, you need to trigger a "sym" job on treeherder: using treeherder's add new jobs ui, schedule a "sym" job for each platform whose "b" job you want symbols for.
... then capture the profile using the add-on as usual.
...And 5 more matches

JSS Provider Notes
it implements cryptographic operations in native code using the nss libraries.
...if you are curious, you can verify the signature on the jar file using the jarsigner tool, which is distributed with the jdk.
... if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature.
...And 5 more matches

Mozilla-JSS JCA Provider notes
it implements cryptographic operations in native code using the nss libraries.
...if you are curious, you can verify the signature on the jar file using the jarsigner tool, which is distributed with the jdk.
... if you build jss yourself from source instead of using binaries downloaded from mozilla.org, your jar file will not have a valid signature.
...And 5 more matches

Enc Dec MAC Output Public Key as CSR
""); fprintf(stderr, "%-7s as input files and produces as a final output file.\n\n", ""); exit(-1); } /* map option letter enumerated commad type */ static commandtype option2command(const char* c) { switch (*c) { case 'g': return gen_csr; case 'e': return encrypt; case 'd': return decrypt; default: return unknown; } } /* * wrap the symkey using public key */ secstatus wrapkey(pk11symkey* key, seckeypublickey *pubkey, secitem **wrappedkey) { secstatus rv; secitem *data = (secitem *)port_zalloc(sizeof(secitem)); if (!data) { pr_fprintf(pr_stderr, "error while allocating memory\n"); rv = secfailure; goto cleanup; } data->len = seckey_publickeystrength(pubkey); data->data = (unsigned char*)...
...ull) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) { goto cleanup; } ctxenc = encryptinit(ek, iv, ivlen, ckm_aes_cbc); /* read a buffer of plaintext from input file */ while ((ptextlen = pr_read(infile, ptext, sizeof(ptext))) > 0) { /* encrypt using it using cbc, using previously created iv */ if (ptextlen != blocksize) { paddinglength = blocksize - ptextlen; for ( j=0; j < paddinglength; j++) { ptext[ptextlen+j] = (unsigned char)paddinglength; } ptextlen = blocksize; } rv = encrypt(ctxenc, encbuf, &encbuflen, sizeof(encbuf), ...
... if (ctxmac == null) { pr_fprintf(pr_stderr, "can't create mac context\n"); rv = secfailure; goto cleanup; } rv = macinit(ctxmac); if (rv != secsuccess) goto cleanup; ctxenc = decryptinit(ek, iv, ivlen, ckm_aes_cbc); while ((ctextlen = pr_read(infile, ctext, sizeof(ctext))) > 0) { count += ctextlen; /* decrypt cipher text buffer using cbc and iv */ rv = decrypt(ctxenc, decbuf, &decbuflen, sizeof(decbuf), ctext, ctextlen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "decrypt failure\n"); goto cleanup; } if (decbuflen == 0) break; rv = macupdate(ctxmac, decbuf, decbuflen); if (rv != secsuccess) { goto cleanup; } if (count =...
...And 5 more matches

NSS Sample Code Sample1
this program shows the following: rsa key pair generation naming rsa key pairs looking up a previously generated key pair by name creating aes and mac keys (or encryption and mac keys in general) wrapping symmetric keys using your own rsa key pair so that they can be stored on disk or in a database.
... as an alternative to token symmetric keys as a way to store large numbers of symmetric keys wrapping symmetric keys using an rsa key from another server unwrapping keys using your own rsa key pair the main part of the program shows a typical sequence of events for two servers that are trying to extablish a shared key pair.
...the primary host wraps the newly generated key using the // rsa key and stores the wrapped key data in a local file.
...And 5 more matches

Python binding for NSS
all nss/nspr python objects can print their current value by evaluting the python object in a string context or by using the python str() function.
...it is suggested python developers using python-nss periodically run their code with deprecation warnings enabled.
... mozilla source code management (scm) information on march 21, 2013 the nss project switched from using cvs as it's source code manager (scm) to mercurial, also known as hg.
...And 5 more matches

NSS Tools certutil
using the certificate database tool the certificate database tool is a command-line utility that can create and modify the netscape communicator cert8.db and key3.db database files.
...for information security module database management, see using the security module database tool.
... when you delete keys, be sure to also remove any certificates associated with those keys from the certificate database, by using -d.
...And 5 more matches

Tutorial: Embedding Rhino
this document will link to them using lxr.
... in this document: runscript: a simple embedding entering a context initializing standard objects collecting the arguments evaluating a script printing the result exiting the context expose java apis using java apis implementing interfaces adding java objects using javascript objects from java using javascript variables calling javascript functions javascript host objects defining host objects counter example counter's constructors class name dynamic properties defining javascript "methods" adding counter to runscript runscript: a simple embedding about the simpl...
... expose java apis using java apis no additional code in the embedding needed!
...And 5 more matches

Scripting Java
we can also aid our java development by using scripting for exploratory programming.
...for example, we could import all of the classes in the java.io package and access class java.io.file using just the name file: js> importpackage(java.io) js> file [javaclass java.io.file] here importpackage(java.io) makes all the classes in the java.io package (such as file) available at the top level.
...age name with "packages." for example, to import the org.mozilla.javascript package you could use importpackage() as follows: $ java org.mozilla.javascript.tools.shell.main js> importpackage(packages.org.mozilla.javascript); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 occasionally, you will see examples that use the fully qualified name of the package instead of importing using the importpackage() method.
...And 5 more matches

Bytecode Descriptions
surprisingly, it's not possible to get the right behavior using jsop::add and jsop::sub alone.
... funwithproto operands: (uint32_t funcindex) stack: proto ⇒ obj like jsop::lambda, but using proto as the new function's [[prototype]] (or %functionprototype% if proto is null).
...this can be ensured by creating the array with jsop::newarray and populating it using jsop::initelemarray.
...And 5 more matches

JIT Optimization Strategies
the function containing the arguments.length is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
... call a function using f.apply(obj, arguments) if the function contains any use of the arguments object that falls out of the cases defined above, this optimization will be suppressed.
...the function containing the arguments.callee is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access individual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
...And 5 more matches

Redis Tips
this document is a collection of some examples and tips for using redis, the open-source data structure server.
... here's an example, again using two separate redis clis, to show how it works.
... redis> get foo (nil) redis> ttl foo (integer) -1 using expire you set an expiration in seconds from the present.
...And 5 more matches

Secure Development Guidelines
introduction provide developers with information on specific security issues cover common coding mistakes and how they affect a product how to avoid making them how to mitigate them everything is oriented toward c/c++ introduction: gaining control specifics about the underlying architecture, using x86 as an example 6 basic registers (eax, ebx, ecx, edx, edi, esi) 2 stack-related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state information instruction pointer (eip) points to register being executed; can’t be modified directly introduction: gaining control (2) eip is modified using call...
... bbv: prevention check the bounds of your arrays use a safe and well-designed api when using integers as array indexes, use caution format string bugs example: int main(int argc, char *argv[]) { if (argc > 1) printf(argv[1]); } format string bugs: prevention easy to fix: always use a format string specifier: int main(int argc, char *argv[]) { if (argc > 1) printf("%s", argv[1]); } double free example: void* ptr = malloc(1024); if (error) { free(ptr); ...
...s and handles could be a race if instances of fh are shared between threads fh inheritence: default in unix, needs to be set in windows int main(int argc, char **argv, char **envp) { int fd = open("/etc/shadow", o_rdwr); setreuid(getuid(), getuid()); excve("/bin/sh", argv, envp); } suid root applications file i/o: file descriptors and handles potential overflows when using select fd_set struct, static length, holds a bitmask of fds manipulated with fd_set, fd_isset, fd_clr and fd_zero macros fd_set’s size depends on the operating system if the os allows opening more fds, then fd_set can hold could overflow fd_set file i/o: file descriptors and handles good solution: dynamically allocate fd_set structs int main(void) { int i, fd; fd_set fdset; ...
...And 5 more matches

How to build an XPCOM component in JavaScript
you can browse existing xpcom interfaces at various locations in the mozilla source code, or using xpcomviewer, a gui for browsing registered interfaces and components.
...the compilation can be done using the gecko sdk.
... dom api module = dom # name of the typelib xpidl_module = dom_apps # set to 1 if the module should be part of the gecko runtime common to all applications gre_module = 1 # the idl sources xpidlsrcs = \ helloworld.idl \ $(null) include $(topsrcdir)/config/rules.mk xpidl_flags += \ -i$(topsrcdir)/dom/interfaces/base \ -i$(topsrcdir)/dom/interfaces/events \ $(null) creating the component using xpcomutils in firefox 3 and later you can use import xpcomutils.jsm using components.utils.import to simplify the process of writing your component slightly.
...And 5 more matches

An Overview of XPCOM
using xpcom, developers create components that can be reused in different applications or that can be replaced to change the functionality of existing applications.
...using a freely available public initialization method, as the example below suggests, can cause problems.
... when you implement the nsisupports class (and you'll see in the chapter using xpcom utilities to make things easier how macros can make this process much easier), you must make sure the class methods return a valid result when the client calls queryinterface with the nsisupports iid.
...And 5 more matches

Finishing the Component
using frozen interfaces the core functionality of blocking sites is still missing, however.
...this puts you in the same situation as many developers using mozilla - you want to use some specific functionality, but the interfaces seem to change on a daily basis.
... the danger of using unfrozen interfaces suppose that you need to use the interface nsifoo that isn't frozen.
...And 5 more matches

Components.utils.Sandbox
creating a sandbox to create a new sandbox, call components.utils.sandbox: var sandbox = components.utils.sandbox(principal[, options]); using new components.utils.sandbox(...) to create a sandbox has the same effect as calling sandbox(...) without new.
... system principal to specify the system principal, you can create it using code like: cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); content principal you can specify a content principal for a particular origin in one of three ways: as an nsiprincipal, for example by using the nodeprincipal property of a dom node as an nsidomwindow, such as that returned by the dom window property as a string uri like "http://www.example.com/" (discourage...
...d) when possible, specify a window or an nsiprincipal object instead of using a string uri.
...And 5 more matches

XPCOM
accessing the windows registry using xpcomwhen implementing windows-specific functionality, it is often useful to access the windows registry for information about the environment or other installed programs.
...here is how to make the same component in python using pyxpcom.fun with xbl and xpconnectgenerating guidsguids are used in mozilla programming for identifying several types of entities, including xpcom interfaces (this type of guids is callled iid), components (cid), and legacy add-ons—like extensions and themes—that were created prior to firefox 1.5.
...here is the interface, and a description of its use.</t>how to build a binary xpcom component using visual studiothis is a simple tutorial for building xpcom objects in c++ using visual studio.
...And 5 more matches

XPIDL
constants are emitted in header files using anonymous enums, although there is an outstanding patch that combines adjacent constants into the same anonymous enums to quiet enum mismatch warnings.
... interfaces specifying interfaces is the primary purpose of using xpidl.
... attributes can be declared readonly, in which case setting causes an error to be thrown in script contexts and native contexts lack the set method, by using the "readonly" keyword.
...And 5 more matches

Plug-in Development Overview - Plugins
for information about the html elements to use, see using html to display plug-ins.
... to determine the mime types and file extensions that the plug-in handles, the browser normally uses the content of the registry entries for the plug-in described below in installation using the registry.
... working with urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a url anywhere on the network, provide hyperlinks to other documents, post form data to cgi scripts using http, or upload files to a remote server using ftp.
...And 5 more matches

Dragging and Dropping Multiple Items - Web APIs
mozilla supports the ability to drag multiple items using some additional non-standard methods.
...you should add them in order starting with 0 as you cannot add items at positions farther than the last item, however you can replace existing items by using indices you have already added.
... using 0 as the index is equivalent to calling setdata().
...And 5 more matches

Working with the History API - Web APIs
adding and modifying history entries using pushstate() changes the referrer that gets used in the http header for xmlhttprequest objects created after you change the state.
...but there is one important exception: after using history.pushstate(), calling history.back() does not raise a popstate event.
... note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) through gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), the passed object is serialized using json.
...And 5 more matches

PannerNode - Web APIs
it is an audionode audio-processing module describing its position with right-hand cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.
... the orientation and position value are set and retrieved using different syntaxes, since they're stored as audioparam values.
...while this audioparam cannot be directly changed, its value can be altered using its value property.
...And 5 more matches

SVGLength - Web APIs
svg_lengthtype_ems 3 a value was specified using the em units defined in css2.
... svg_lengthtype_exs 4 a value was specified using the ex units defined in css2.
... svg_lengthtype_px 5 a value was specified using the px units defined in css2.
...And 5 more matches

Adding 2D content to a WebGL context - Web APIs
the shaders a shader is a program, written using the opengl es shading language (glsl), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors.
... // vertex shader program const vssource = ` attribute vec4 avertexposition; uniform mat4 umodelviewmatrix; uniform mat4 uprojectionmatrix; void main() { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; } `; it's worth noting that we're using a vec4 attribute for the vertex position, which doesn't actually use a 4-component vector; that is, it could be handled as a vec2 or vec3 depending on the situation.
...note also the lack of any work with textures here; that will be added in using textures in webgl.
...And 5 more matches

Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
const constraints = { audio: true, video: true }; const config = { iceservers: [{ urls: "stun:stun.mystunserver.tld" }] }; const selfvideo = document.queryselector("video.selfview"); const remotevideo = document.queryselector("video.remoteview"); const signaler = new signalingchannel(); const pc = new rtcpeerconnection(config); this code also gets the <video> elements using the classes "selfview" and "remoteview"; these will contain, respectively, the local user's self-view and the view of the incoming stream from the remote peer.
...using destructuring, the rtctrackevent's track and streams properties are extracted.
... handling the negotiationneeded event first, we implement the rtcpeerconnection event handler onnegotiationneeded to get a local description and send it using the signaling channel to the remote peer.
...And 5 more matches

WebRTC API - Web APIs
to learn more about adapter.js, see improving compatibility using webrtc adapter.js.
...once a connection has been established and opened using rtcpeerconnection, media streams (mediastreams) and/or data channels (rtcdatachannels) can be added to the connection.
... you can also use the connection between two peers to exchange arbitrary binary data using the rtcdatachannel interface.
...And 5 more matches