Search completed in 0.93 seconds.
The Web Developer Menu - Firefox Developer Tools
the web
developer menu is the main way to access the
developer tools that are built into firefox.
... on os x and linux, it's under the "tools" menu: on windows 7, it's under the "firefox" menu: you'll see that the menu is split into three sections: the first section lists tools that are hosted in the toolbox, which is a dedicated window for
developer tools the second section lists integrated tools that are not hosted in the toolbox, as well as any tools installed as add-ons (you'll see in the windows screenshot above that i've installed the firefox os simulator) the third section, "get more tools", is a link to more web development add-ons for firefox ...
Index - Firefox Developer Tools
found 158 pages: # page tags and summary 1 firefox
developer tools developing mozilla, guide, tools, web development, web development:tools, l10n:priority firefox
developer tools is a set of web
developer tools built into firefox.
... 4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox
developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
... 5 add-ons web development, web development:tools
developer tools that are not built into firefox, but ship as separate add-ons.
...And 25 more matches
Firefox Developer Tools
firefox
developer tools is a set of web
developer tools built into firefox.
... note: if you are just getting started with web development and using
developer tools, our learning docs will help you — see getting started with the web and what are browser
developer tools?
... the core tools you can open the firefox
developer tools from the menu by selecting tools > web
developer > toggle tools or use the keyboard shortcut ctrl + shift + i or f12 on windows and linux, or cmd + opt + i on macos.
...And 13 more matches
Migrating from Firebug - Firefox Developer Tools
when migrating from firebug to the firefox
developer tools, you may wonder where the features you loved in firebug are available in the
developer tools.
... the following list aims to help firebug users to find their way into the
developer tools.
... for the latest
developer tools and features, try firefox
developer edition.
...And 8 more matches
What are browser developer tools? - Learn web development
every modern web browser includes a powerful suite of
developer tools.
...three ways: keyboard: ctrl + shift + i, except internet explorer and edge: f12 macos: ⌘ + ⌥ + i menu bar: firefox: menu ➤ web
developer ➤ toggle tools, or tools ➤ web
developer ➤ toggle tools chrome: more tools ➤
developer tools safari: develop ➤ show web inspector.
... opera:
developer ➤
developer tools context menu: press-and-hold/right-click an item on a webpage (ctrl-click on the mac), and choose inspect element from the context menu that appears.
...And 7 more matches
Zest usecase: Reporting Security Vulnerabilities to Developers
when security teams find vulnerabilities they typically describe them to
developers using words, for example in a pdf or via a bug tracker.
... unfortunately in many cases
developers may lack the security knowledge to understand or reproduce the problem.
... also security teams often use tools which the
developers do not have access to or have no experience with.
...And 5 more matches
Settings - Firefox Developer Tools
opening settings beginning with firefox 62, the icon to open
developer tools settings has been moved into a menu accessed by clicking/touching ...
... the menu includes settings to control the location of the
developer tools.
... the rest of the settings are on the
developer tools settings pane.
...And 4 more matches
about:debugging - Firefox Developer Tools
the about:debugging page provides a single place from which you can attach the firefox
developer tools to a number of debugging targets.
... in the tools > web
developer menu, click remote debugging.
... before you connect: enable
developer settings on your android device.
...And 4 more matches
Web technology for developers
the open web presents incredible opportunities for
developers.
... documentation for web
developers web
developer reference a list of all references for web technologies, including those for html, css, and so on.
... web
developer guide the web
developer guide provides useful how-to content to help you actually use web technologies to do what you want or need to do.
...And 4 more matches
DevTools API - Firefox Developer Tools
if you notice any inconsistency, please let the firefox
developer tools team know.
... introduction the devtools api provides a way to register and access
developer tools in firefox.
...if true the tool will be shown in the
developer menu.
...And 3 more matches
Firefox addons developer guide - Archive of obsolete content
there should be some introductory text on the table of contents page at https://
developer.mozilla.org/en/firefox_addons_
developer_guide obviously there are a number of fixme items in the content that need dealing with, but those are already known.
... each chapter should be tagged appropriately, based on content, and every chapter should include the tag "firefox addons
developer guide".
... the stuff about installing the dom inspector (https://
developer.mozilla.org/en/firefox_addons_
developer_guide/let%27s_build_a_firefox_extension#install_the_dom_inspector) is not accurate for firefox 3 or later, since it's no longer included in the firefox installer and must be downloaded from amo.
...And 2 more matches
Tutorial: Set a breakpoint - Firefox Developer Tools
to do this, open the firefox
developer tools, click on the options gear at the upper right of the toolbox, and make sure that both “enable browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
...once they’re checked, you can close the
developer tools.
... save the following text to an html file: <div onclick="report('the best div');">click me!</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “web
developer”, and then “browser content toolbox”.
...And 2 more matches
Style Editor - Firefox Developer Tools
the style editor enables you to: view and edit all the stylesheets associated with a page create new stylesheets from scratch and apply them to the page import existing stylesheets and apply them to the page to open the style editor choose the "style editor" option from the "web
developer" menu (which is a submenu in the "tools" menu on the mac).
... source map support web
developers often create css files using a preprocessor like sass, less, or stylus.
... in the editor preferences section of the
developer tools settings, you can choose to use vim, emacs, or sublime text key bindings instead.
...And 2 more matches
about:debugging (before Firefox 68) - Firefox Developer Tools
the about:debugging page provides a single place from which you can attach the firefox
developer tools to a number of debugging targets.
... in the tools > web
developer menu, click "service workers".
... select the web
developer menu under the hamburger menu (), then select "service workers".
...And 2 more matches
Information for External Developers Dealing with Accessibility
implementing an msaa server, a practical guide a document for
developers who need to support microsoft active accessibility (msaa) in a desktop application, in order to make it accessible with 3rd party assistive technologies, containing practical tips and the details of mozilla's implementation.
... gnome keys: keyboard documentation for gnome 2.2: still seeking
developer guidelines for keyboard.
... join the mozilla accessibility community live chat both end users and
developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... purpose newsgroup mailing list google group
developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Accessibility Inspector - Firefox Developer Tools
accessing the accessibility inspector when you first open any of the other
developer tools, the accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the firefox accessibility engine started already, e.g., you might be a screenreader user or tester).
...starting in firefox 79, it is automatically enabled when you do one of the following: choose accessibility in the tools > web
developer menu.
... select the accessibility tab in the
developer tools toolbox.
... once activated, the accessibility engine remains running until you close the
developer tools toolbox.
Browser Console - Firefox Developer Tools
if you also want to use the other web
developer tools in the regular web toolbox with add-on or browser code, consider using the browser toolbox.
...to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable browser chrome and add-on debugging toolboxes" (firefox 40 and later) option in the
developer tool settings.
... opening the browser console you can open the browser console in one of two ways: from the menu: select "browser console" from the web
developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
...to enable it set the devtools.chrome.enabled preference to true in about:config, or set the "enable chrome debugging" option in the
developer tool settings.
All keyboard shortcuts - Firefox Developer Tools
this page lists all keyboard shortcuts used by the
developer tools built into firefox.
... in the editor preferences section of the
developer tools settings, you can choose to use vim, emacs, or sublime text key bindings instead.
...if you do this, the selected bindings will be used for all the
developer tools that use the source editor.
... from firefox 33 onwards, the key binding preference is exposed in the editor preferences section of the
developer tools settings, and you can set it there instead of about:config.
Responsive Design Mode - Firefox Developer Tools
toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the web
developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
... from the
developer tools toolbox: press the responsive design mode button in the toolbox's toolbar: from the keyboard: press ctrl + shift + m (or cmd + opt + m on macos).
... if you checked "screenshot to clipboard" in the
developer tools settings page, then the screenshot will be copied to the system clipboard.
...for example:
developer toolbox with rdm you can show or hide the
developer tools toolbox independently of toggling responsive design mode itself: while responsive design mode is enabled, you can continue browsing as you normally would in the resized content area.
Toolbox - Firefox Developer Tools
the toolbox provides a single home for most of the
developer tools that are built into firefox.
... there are a few different ways to open the toolbox: select "toggle tools" from the web
developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
... extra tools next there's an array of buttons that can be added or removed in the
developer tool settings.
...ggle rulers for the page measure a portion of the page: measure a part of the website by selecting areas within the page toolbox controls finally there's a row of buttons to: close the window toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window toggle the window between standalone and attached to the browser window access
developer tool settings settings see the separate page on the
developer tools settings.
Web Audio Editor - Firefox Developer Tools
with the web audio api,
developers create an audio context.
... the
developer connects the nodes in a graph, and the complete graph defines the behavior of the audio stream.
...if you have feedback or suggestions for new features, dev-
developer-tools or twitter are great places to register them.
...to enable it, open the
developer tool settings and check "web audio".
Developer Tools - MDN Web Docs Glossary: Definitions of Web-related terms
developer tools (or "development tools" or short "devtools") are programs that allow a
developer to create, test and debug software.
... current browsers provide integrated
developer tools, which allow to inspect a website.
... learn more general knowledge web development tools on wikipedia technical reference firefox
developer tools on mdn firebug (former
developer tool for firefox) chrome devtools on chrome.com safari web inspector on apple.com edge dev tools on microsoft.com ...
Front-end web developer - Learn web development
welcome to our front-end web
developer learning pathway!
... here we provide you with a structured course that will teach you all you need to know to become a front-end web
developer.
...we all get stuck, whether we are beginner or professional web
developers.
Developer guide
for new mozilla
developers a directory of articles which are particularly helpful for new mozilla
developers.
...
developer forums a topic-specific list of discussion forums and mailing lists where you can talk about mozilla development issues.
... mozilla platform development cheat sheet (archive.org) brian bondy's list of frequently referenced information for platform
developers.
NSS Developer Tutorial
the proper use of tabs has often been confusing for new nss
developers, so in nss/lib/ssl, we're gradually removing the use of tabs.
...we wish to increase the number of nss
developers, who have broad understanding of nss.
... update nss in mozilla-inbound and mozilla-central the procedure is documented at https://
developer.mozilla.org/docs/updating_nspr_or_nss_in_mozilla-central.
Browser Toolbox - Firefox Developer Tools
to do this, open the
developer tools settings, go to the section "advanced settings", and check the settings "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging".
... opening the browser toolbox open the browser toolbox through the menu button and the menu items "
developer" then "browser toolbox".
...altogether you will have access to the following
developer tools: debugger (note: if you want to debug a specific add-on that is restartless or sdk-based then try the add-on debugger.) console style editor performance network monitor page inspector accessibility inspector you can debug chrome: and about: pages using the normal debugger, just as if they were ordinary content pages.
DOM Property Viewer - Firefox Developer Tools
enable it in the
developer tools settings.
...to enable it, open the
developer tool settings and check the "dom" box under "default firefox
developer tools".
... opening the dom property viewer once enabled, you can open the dom property viewer by selecting "dom" from the web
developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its ctrl + shift + w keyboard shortcut.
Remote Debugging - Firefox Developer Tools
you can use the firefox
developer tools on your desktop to debug web sites and web apps running in other browsers or runtimes.
... the detailed instructions for connecting the
developer tools are specific to the runtime.
... you can connect the
developer tools to gecko-based runtimes like firefox desktop, firefox for android, and thunderbird.
WAI ARIA Live Regions/API Support - Developer guides
these notes are for
developers of screen readers.
...
developers should use the aria live regions
developer documentation.
...these features will help screen reader
developers improve the quality and performance of live region support, both for pages that are marked up with aria live region markup, and for pages where the author did not add any additional markup.
Index - Developer guides
found 43 pages: # page tags and summary 1
developer guides api, guide, landing, web these articles provide how-to information to help make use of specific web technologies and apis.
... 16 audio and video manipulation audio, canvas, examples, guide, html5, media, video, web audio api, webgl,
developer recommendation the ability to read the pixel values from each frame of a video can be very useful.
... 17 event
developer guide dom, event, guide, needsupdate, events events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
NPAPI plugin developer guide - Archive of obsolete content
mozilla encourages website
developers to avoid using plugins wherever possible.
... if there are plugin features which are not available in the web platform, we encourage
developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize web platform work to make those use cases possible.
Accessibility Information for Core Gecko Developers
join the mozilla accessibility community live chat both end users and
developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... purpose newsgroup mailing list google group
developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Accessibility information for UI designers and developers
see also: heading elements join the mozilla accessibility community live chat both end users and
developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... purpose newsgroup mailing list google group
developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Places Developer Guide
this document is for extension and application
developers who want to use the bookmarks and history apis in firefox 3.
...however, firefox
developers can take advantage of several helper apis that are browser-specific: fuel - a collection of wrapper apis for easing access to a number of firefox utilities and services nsiplacestransactionsservice - a firefox service for modifying bookmarks in a transactional manner, providing facilities for undo/redo places utilities for javascript - accessors and helper functions for firefox and extens...
Open the debugger - Firefox Developer Tools
there are three ways to open the debugger: select "debugger" from the web
developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press ctrl + shift + z on windows and linux, or cmd + opt + z on macos (starting in firefox 71; prior to firefox 66, the letter in this shortcut was s).
... press the menu button ( ), select "
developer", then "debugger".
Debugger - Firefox Developer Tools
(this is not an ideal way to handle debugger bugs, but the hope here is that some sort of backstop, even if imperfect, will make life easier for debugger
developers.
... for example, an uncaught exception hook may have access to browser-level features like the alert function, which this api’s implementation does not, making it possible to present debugger errors to the
developer in a way suited to the context.) debugger handler functions each debugger instance inherits accessor properties with which you can store handler functions for spidermonkey to call when given events occur in debuggee code.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
visit the url about:config, and set the devtools.chrome.enabled preference to true: setting the 'devtools.chrome.enabled' preference open a
developer scratchpad (menu button >
developer > scratchpad), and select "browser" from the "environment" menu.
...lt; }; } var divfactory = makefactory('div'); var spanfactory = makefactory('span'); function divsandspans() { for (i = 0; i < 10; i++) { var div = divfactory('div #' + i); div.appendchild(spanfactory('span #' + i)); document.body.appendchild(div); } } function dodivsandspans() { divsandspans(); } </script> open the browser console (menu button >
developer > browser console), and then evaluate the expression demotrackallocations() in the browser console.
Debugger-API - Firefox Developer Tools
both firefox’s built-in
developer tools and the firebug add-on use debugger to implement their javascript debuggers.
...javascript is both the debuggee language and the tool implementation language, so the qualities that make javascript effective on the web can be brought to bear in crafting tools for
developers.
Edit fonts - Firefox Developer Tools
variable font support in firefox
developer tools firefox 62 added support for variable fonts and firefox 63 features support for editing the properties of variable fonts in the font editor.
...if your operating system is not up to date, you will not be able to use variable fonts in web pages or the firefox
developer tools.
Work with animations - Firefox Developer Tools
the box below contains a grayscale icon, representing firefox
developer edition.
...hovering over these selectors, we can see that those elements are, respectively, the browser name "firefox
developer edition" and the browser icon.
UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view computed view changes view compatibility view (firefox
developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a separate pane in the center of the inspector.
... computed view the computed view shows you the complete computed css for the selected element (the computed values are the same as what getcomputedstyle would return.): compatibility view starting with firefox
developer edition version 77, the compatibility view shows css compability issues, if any, for properties applied to the selected element, and for the current page as a whole.
Debugging Firefox Desktop - Firefox Developer Tools
this guide explains how you can use the firefox
developer tools to debug a different instance of desktop firefox running on the same machine.
... enable remote debugging first, you'll need to ensure that both debugger and debuggee have the "enable browser chrome and add-on debugging toolboxes" and "enable remote debugging" settings checked in the
developer tools settings.
Storage Inspector - Firefox Developer Tools
opening the storage inspector you can open the storage inspector by selecting "storage inspector" from the web
developer submenu in the firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9 keyboard shortcut.
...it's just called "storage" in the
developer toolbox.
Console messages - Firefox Developer Tools
security the security messages shown in the web console help
developers find potential or actual vulnerabilities in their sites.
... additionally, many of these messages help educate
developers because they end with a “learn more” link that takes you to a page with background information and advice for mitigating the issue.
HTML5 Parser - Developer guides
changed parser behaviors some changes to the way that the gecko 2 parser behaves, as compared to earlier versions of gecko, may affect web
developers, depending on how you've written your code in the past and what browsers you've tested it on.
...this change has the following consequences for web
developers: if you omit the closing tag for <title>, <style>, <textarea>, or <xmp>, the page will fail to be parsed.
HTML5 - Developer guides
designed to be usable by all open web
developers, this reference page links to numerous resources about html5 technologies, classified into several groups based on their function.
... html5 reference guide quick-reference html5 sheet containing markup generators, code examples and web
developer tools.
Using HTML sections and outlines - Developer guides
it is important for
developers to use these semantic elements in line with their intended purposes.
...unknown elements are styled as display: inline by default, so you'll want to set them to display: block: article, aside, footer, header, nav, section { display: block; } of course the web
developer can style them differently, but keep in mind that in a non-html5 browser, the default styling is different from what is expected for such elements.
Introduction to Web development - Developer guides
eloquent javascript — a comprehensive guide to intermediate and advanced javascript methodologies intermediate a re-introduction to javascript — a recap on the javascript programming language aimed at intermediate-level
developers essential javascript design patterns — an introduction to essential javascript design patterns introduction to object-oriented javascript — learn about the javascript object model.
... google's html, css, and javascript from the ground up these easily digestible video tutorials from google's expert web
developers cover the basics of html, css and javascript.
Writing forward-compatible websites - Developer guides
ask the authors of any javascript libraries you use to also follow these guidelines suggest to the
developers of your favorite libraries that they follow these guidelines too.
... prefixed, non-standard features are provided by browser
developers for you to experiment with and offer feedback on, and aren't meant to be deployed.
Color vision simulation - Firefox Developer Tools
the simulator in the accessibility inspector in firefox
developer tools lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
DOM Inspector - Firefox Developer Tools
the dom inspector (also known as domi) is a
developer tool used to inspect, browse, and edit the document object model of documents - usually web pages or xul windows.
Application - Firefox Developer Tools
if you can’t see it there, you can enable it by going to the "three dot" menu and selecting settings (also accessible by pressing f1), then checking the application checkbox under default
developer tools.
Debugger.Memory - Firefox Developer Tools
web
developers need to know their pages’ actual memory consumption on real browsers, so it is correct for the tool to expose these behaviors, as long as it is done in a way that helps
developers make decisions about their own code.
Eyedropper - Firefox Developer Tools
sing whichever scheme you've selected in settings > inspector > default color unit: you can use it in one of two ways: to select a color from the page and copy it to the clipboard to change a color value in the inspector's rules view to a color you've selected from the page copying a color to the clipboard open the eyedropper in one of these two ways: select "eyedropper" under the "web
developer" menu open the page inspector tab and click the eyedropper button in its toolbar as you move the mouse around the page you'll see the current color value in the eyedropper change.
Basic operations - Firefox Developer Tools
to enable it, open the
developer tool settings, and check the "memory" box under "default firefox
developer tools": from firefox 50 onwards, the memory tool is enabled by default.
Animation inspector example: CSS transitions - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox
developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected {...
Animation inspector example: Web Animations API - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox
developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', o...
How to - Firefox Developer Tools
open the performance tools to open the performance tools: press shift + f5 select "performance" from the web
developer submenu in the firefox menu (or tools menu if you display the menu bar or are on os x) select "performance" from tools button, in the toolbar, if you have one: record a profile to start a new recording, press the stopwatch icon in the recordings pane.
Rulers - Firefox Developer Tools
to be able to toggle rulers for a page, you first need to enable the button by going to the settings page for the
developer tools and checking "toggle rulers for the page" under available toolbox buttons.
Rich output - Firefox Developer Tools
click on the triangle, and the object will be expanded to show its contents: starting with firefox 67 (available now in firefox
developer) you can use the arrow keys on your keyboard to navigate through objects displayed in the console.
Web Console - Firefox Developer Tools
opening the web console you open the web console from a menu or with a keyboard shortcut: choose web console from the web
developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press the ctrl+shift+k (command+option+k on os x) keyboard shortcut.
Experimental features in Firefox
to test these experimental features, you need to download firefox nightly or firefox
developer edition.
... nightly 53 yes
developer edition 53 no beta 53 no release 53 no preference name dom.dialog_element.enabled global attribute: inputmode our implementation of the inputmode global attribute has been updated as per the whatwg spec (bug 1509527), but we still need to make other changes too, like making it available on contenteditable content.
... nightly 75 yes
developer edition 75 no beta 75 no release 75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
...And 38 more matches
Index - Archive of obsolete content
81 dev/panel enables you to extend the firefox
developer tools.
...these type of extensions have many advantages for both users and
developers compared to the old xpinstall/-style extensions.
... 241 firefox addons
developer guide the original document is in japanese and distributed via the xuldev.org website.
...And 37 more matches
Index - Web APIs
this interface exists to define timeline features (inherited by documenttimeline and future timeline types) and is not itself directly used by
developers.
... 276 beforeinstallpromptevent.prompt() api, beforeinstallpromptevent, experimental, method, reference, prompt the prompt() method of the beforeinstallpromptevent interface allows a
developer to show the install prompt at a time of their own choosing.
... 397 css painting api api, css, css paint api, houdini, painting, reference the css painting api — part of the css houdini umbrella of apis — allows
developers to write javascript functions that can draw directly into an element's background, border, or content.
...And 26 more matches
The Joy of XUL - Archive of obsolete content
this guide is designed to introduce application
developers and their managers to xul so they can not only understand why mozilla's platform is based on it, but how they might adopt it for their own use.
...web
developers already familiar with dynamic html (dhtml) will learn xul quickly and can start building applications right away.
... also described are some reasons application
developers might choose to leverage xul and mozilla technology for building cross-platform applications.
...And 17 more matches
Introduction to client-side frameworks - Learn web development
developers who worked with javascript wrote tools to solve the problems they faced, and packaged them into reusable packages called libraries, so they could share their solutions with others.
...at build time, transparently to
developers, the framework's compiler translates the templates to optimized javascript instructions.
...react is used in combination with other libraries to make applications — react and react native enable
developers to make mobile applications; react and reactdom enable them to make web applications, etc.
...And 17 more matches
Developing New Mozilla Features - Archive of obsolete content
our portability requirements may be new to even seasoned
developers.
... develop relationships with existing
developers in the area of your feature if you want to add a big new feature to mail, spend some time helping the existing mail
developers.
... talk to the
developers about fixing some of their bugs.
...And 15 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
what this means to you as the
developer is this: you can take advantage of skills you already have with xml or web technologies to design and implement anything from a simple text editor to a comprehensive ide - complete with all of the interface widgets that you would find in virtually any major application framework.
...gecko is the first browser engine ever to deliver the full web standards support that
developers have been calling for.
...by meeting the needs of
developers and companies who are working to provide consumers with new interactive applications, solutions and services, gecko will become a key catalyst for new growth and innovation and for delivering anytime, anywhere access to millions of new users.
...And 14 more matches
Index - Learn web development
2 accessibility aria, accessibility, articles, beginner, css, codingscripting, html, javascript, landing, learn, module learning some html, css, and javascript is useful if you want to become a web
developer.
...there are also are times when you'll get stuck and feel frustrated — even professional web
developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work.
... 25 what are browser
developer tools?
...And 10 more matches
Handling common JavaScript problems - Learn web development
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.
...see the code snippet in how to make an http request) so
developers only have to write one simple bit of code (see jquery.ajax()).
... when
developers make use of new/nascent javascript features (for example ecmascript 6 / ecmascript next features, modern web apis...) in their code, and find that such features don't work in older browsers.
...And 10 more matches
Index
if you want to work with nss, it's often helpful to use the command line utilities that are provided by the nss
developers.
... 164 nss
developer tutorial nss, tutorial no summary!
... mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape and now with red hat.
...And 10 more matches
Web Replay
there are a few ways to start recording a tab: record current tab open the
developer tools and click the button indicated below.
... open a new tab in recording mode click the 'tools -> web
developer -> web replay -> reload and record tab' menu item.
... this has the same effect as above but can be used when the
developer tools are not open.
...And 10 more matches
Performance fundamentals - Web Performance
from a
developer's or user's perspective, this answers the question, "what does the platform do for you?" web technologies the web platform provides many tools, some better suited for particular jobs than others.
...to display graphics,
developers can use html or css (i.e.
...text and images reflow automatically, ui elements automatically receive the system theme, and the system provides "built-in" support for some use cases
developers may not think of initially, like different-resolution displays or right-to-left languages.
...And 10 more matches
The Business Benefits of Web Standards - Archive of obsolete content
these things come naturally to standards
developers without additional effort, time or thought.
... happier staff good
developers - both agency and inhouse - simply do not want to work using outdated methodologies and platforms with uncertain standards, with all the consequent uncertainty in quality.
...it supplies a far better development framework, for content providers, for web
developers, and for css stylists alike.
...And 9 more matches
Client-side tooling overview - Learn web development
although it is still entirely reasonable to write html, css, and javascript "by hand" there is now a wealth of tools that
developers can use to speed up the process of building a web site, or app.
... from time to time, even the most experienced of web
developers get stuck on a tooling problem; it is possible to waste hours attempting to get a tooling pipeline working before even touching a single line of application code.
... the modern tooling ecosystem today's modern
developer tooling ecosystem is huge, so it's useful to have a broad idea of what main problems the tools are solving.
...And 9 more matches
Mozilla
add-ons add-ons allow
developers to extend and modify the functionality of firefox.
... an introduction to hacking mozilla this guide introduces the mozilla project and provides an overview for
developers interested in contributing to or exploring the various parts of the codebase.
...fortunately, over the years, mozilla
developers have come up with not just technologies and features to help you debug code, but have devised tips and techniques that can help too.
...And 9 more matches
2015 MDN Fellowship Program - Archive of obsolete content
more information: mdn/
developerfellowship wiki page.
... 2015 mdn fellowship program launching in q1 2015, the mozilla
developer fellowship intends to accelerate the involvement of highly-skilled and experienced web
developers with the open web.
... who web and mobile
developers with an established track record of contributions and expertise in a specific web technology, function or domain who wish to increase the effectiveness of their teaching and communications.
...And 8 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
111
developer tools codingscripting,
developer tools, glossary
developer tools (or "development tools" or short "devtools") are programs that allow a
developer to create, test and debug software.
...for instance, script-src allows
developers to allow trusted sources of script to execute on a page, while font-src controls the sources of web fonts.
... 207 houdini css, css api, glossary, houdini, reference houdini is a set of low level apis that give
developers the power to extend css, providing the ability to hook into the styling and layout process of a browser’s rendering engine.
...And 8 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
« previousnext » this document was authored by taiga (gomita) gomibuchi and was originally published in japanese for the firefox
developers conference summer 2007.
... an easier method of building a firefox/thunderbird addon for
developers who are well-acquainted with ides like netbeans, eclipse, etc.
...you can learn more about chromebug and download it at http://getfirebug.com/wiki/index.php/chromebug_user_guide you may also find this extension to be valuable: extension
developer https://addons.mozilla.org/firefox/addon/7434 developing extensions: what you need to know let’s delve into chrome, something you’ll need to know about in order to develop extensions.
...And 7 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the purpose of this page is to provide provide theme
developers with notes on how to fix common issues.
...this issue is fixed by adding the following css instructions to the file browser/preferences/aboutpermissions.css: .site-favicon { height: 16px; width: 16px; -moz-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); } web
developer tools web
developer toolbar {to be added} web console web console buttons do not change appearance on the web console (tools > web
developer > web console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled.
... web console close button is missing the web console (tools > web
developer > web console) is missing its close button, which makes it impossible to close.
...And 7 more matches
Third-party APIs - Learn web development
provide apis allowing
developers to make use of their data (e.g.
... note: some apis handle access to their functionality slightly differently, requiring the
developer to make an http request to a specific url pattern to retrieve data.
... third party apis have a slightly different permissions system — they tend to use
developer keys to allow
developers access to the api functionality, which is more to protect the api vendor than the user.
...And 7 more matches
Aprender y obtener ayuda - Learn web development
there are also are times when you'll get stuck and feel frustrated — even professional web
developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work.
...professional web
developers use tools like mdn web docs to look up things they have forgotten all the time.
...youtube is an obvious one, with channels such as mozilla layout land, mozilla
developer, and google chrome
developers providing many useful videos.
...And 7 more matches
Getting started with React - Learn web development
to build for the web,
developers use react in tandem with reactdom.
... react's primary goal is to minimize the bugs that occur when
developers are building uis.
... in addition, many of the
developer-experience benefits of a react app, such as writing interfaces with jsx, require a compilation process.
...And 7 more matches
An Overview of XPCOM
the xpcom solution the cross platform component object module (xpcom) is a framework which allows
developers to break up monolithic software projects into smaller modularized pieces.
...but xpcom also provides several tools and libraries that enable the loading and manipulation of these components, services that help the
developer write modular cross-platform code, and versioning support, so that components can be replaced or upgraded without breaking or having to recreate the application.
... using xpcom,
developers create components that can be reused in different applications or that can be replaced to change the functionality of existing applications.
...And 7 more matches
url - Archive of obsolete content
var urls = require("sdk/url"); console.log(urls.gettld("http://www.bbc.co.uk/")); // "co.uk" console.log(urls.gettld("https://
developer.mozilla.org/")); // "org" parameters url : string the url, as a string.
...for example: var url = require("sdk/url").url("https://
developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.scheme); // https userpass the username:password part of the url, null if not present.
...for example: var url = require("sdk/url").url("https://
developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.host); //
developer.mozilla.org port the port number of the url, null if none was specified.
...And 6 more matches
Mozilla Crypto FAQ - Archive of obsolete content
shortly thereafter the nss
developers began work on an open source implementation of the rsa algorithm; that code, together with code previously developed for other cryptographic algorithms, will be included in a new version 3.1 of the nss open source cryptographic and pki library.
...also note that the nss
developers are creating code for support of s/mime secure messages; however full s/mime support within mozilla will require further development, and may not be available until after the mozilla 1.0 release.
... yes, as long as patent or other legal issues do not prevent such code from being used by the general community of mozilla
developers.
...And 6 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
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.
... although browser detection is perhaps the most common scripting task that every web
developer faces, it seems that the variety of different strategies in use for detecting browsers is unlimited.
...for more specific gecko recommendations, please see the gecko compatibility handbook gecko although many web
developers are aware of firefox, mozilla, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey.
...And 6 more matches
Standard OS Libraries
documentation for gdk functions are found here: gnome
developer :: gdk 2 reference manual.
... for gdk3 documentation is found here: gnome
developer :: gdk 3 reference manual.
... components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types var gint = ctypes.int; var gdkdevice = ctypes.structtype('gdkdevice'); var gdkmodifiertype = ctypes.int; var gdkwindow = ctypes.structtype('gdkwindow'); var void = ctypes.void_t; // https://
developer.gnome.org/gdk3/stable/gdk3-windows.html#gdk-get-default-root-window var gdk_get_default_root_window = gdk.declare('gdk_get_default_root_window', ctypes.default_abi, gdkwindow.ptr // return - the root window, which is top most parent of all windows ); // in gdk2 we have to use gdk_window_get_pointer, but in gdk3 it was deprecated and have to use gdk_window_get_device_position https://devel...
...And 6 more matches
Setting up an extension development environment - Archive of obsolete content
install firefox development extensions specifically for this new
developer user profile.
... edit files in the extensions folder of this profile, and restart the application as this new
developer profile.
... to quickly achieve our task of creating just a
developer profile, we will start the application with the parameters: /path/to/firefox -no-remote -p profilename without these parameters, the default behavior of your mozilla applications is to only open the everyday user profile: named default.
...And 5 more matches
Client-Server Overview - Learn web development
the first part is called the header, and contains useful information about the request, in the same way that an html head contains useful information about an html document (but not the actual content itself, which is in the body): get https://
developer.mozilla.org/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev http/1.1 host:
developer.mozilla.org connection: keep-alive pragma: no-cache cache-control: no-cache upgrade-insecure-requests: 1 user-agent: mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/52.0.2743.116 safari/537.36 accept: text/html,application/xhtml+xm...
...l,application/xml;q=0.9,image/webp,*/*;q=0.8 referer: https://
developer.mozilla.org/ accept-encoding: gzip, deflate, sdch, br accept-charset: iso-8859-1,utf-8;q=0.7,*;q=0.7 accept-language: en-us,en;q=0.8,es;q=0.6 cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zipujsazv6pcgcbjscj1zu6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.1471911953; ffo=true the first and second lines contain most of the information we talked about above: the type of request (get).
... the target/host website (
developer.mozilla.org).
...And 5 more matches
Server-side web frameworks - Learn web development
@app.route("/") def hello(): return "hello world!" while django expects
developers to define a list of url mappings between a url pattern and a view function.
...this allows
developers to optimize for the characteristics of different databases based on their usage.
...get it yourself: some web frameworks include tools/libraries that address every problem their
developers can think "by default", while more lightweight frameworks expect web
developers to pick and choose solution to problems from separate libraries (django is an example of the former, while flask is an example of a very light-weight framework).
...And 5 more matches
Handling common HTML and CSS problems - Learn web development
the trouble with html and css some of the trouble with html and css lies with the fact that both languages are fairly simple, and often
developers don't take them seriously, in terms of making sure the code is well-crafted, efficient, and semantically describes the purpose of the features on the page.
...for example, see: sublimelinter for sublime text notepad++ linter vscode linters browser
developer tools the
developer tools built into most browsers also feature useful tools for hunting down errors, mainly for css.
...this is particularly a problem when
developers decide to only use say, the -webkit- version of a property — meaning that the site won't work in other browsers.
...And 5 more matches
Localization content best practices
this document provides best practices for
developers to create localizable code, and describes how to avoid some localizability (l12y) common mistakes.
...this would waste everybody's time and create unnecessary frustration: localizers have to translate strings that are destined to change,
developers will need to use new ids later to update them.
...# see: http://
developer.mozilla.org/en/docs/localization_and_plurals # #1 is the number of cookies to delete # example: delete-cookies = delete #1 cookie;delete #1 cookies important: always include the localization note with this format if you use a plural form in firefox.
...And 5 more matches
WebReplayRoadmap
this document describes existing, planned, and potential features for the firefox
developer tools that are based on web replay, along with their ui.
... to that end, this document will be revised over time as we find new and better ways of helping
developers.
... retroactive console logging console logging is one of the primary tools most
developers use to debug a page.
...And 5 more matches
Signing Mozilla apps for Mac OS X
for release creating a
developer id requires a paid apple
developer account.
... once you have that you can do the following to create your id: open the
developer certificate utility.
... click "create a certificate" at the top right corner select the "
developer id" radio button and uncheck the "
developer id installer certificate" box.
...And 5 more matches
Index
this can create a difficult situation for extension
developers trying to support multiple gecko versions (firefox 2 and 3, for example).
...it is meant for use by extension
developers who have exception handler blocks which want to "eat" an exception, but still want to report it to the console.
... 96 xpcom glue guide, xpcom, xpcom glue the xpcom glue is a static library which component
developers and embedders can link against.
...And 5 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>.
... aria aria enables
developers to describe their widgets in more detail by adding special attributes to the markup.
... many of these were later added in html5, and
developers should always prefer using the correct semantic html element over using aria.
...And 5 more matches
Web Performance
in this article we define and compare these two performance monitoring approaches.populating the page: how browsers worka
developer should strive to achieve these two goals.
...there are many apis,
developer tools, best practices, and bad practices relating to web performance.
... other documentation
developer tools performance features this section provides information on how to use and understand the performance features in your
developer tools, including waterfall, call tree, and flame charts.
...And 5 more matches
Finding window handles - Archive of obsolete content
another technique is to use the accessibility framework, see for example http://
developer.mozilla.org/en/docs..._of_interfaces another way to find a window handle...
...es/ctypes.jsm'); var objc = ctypes.open(ctypes.libraryname('objc')); // types let id = ctypes.voidptr_t; let sel = ctypes.voidptr_t; // constants let nil = ctypes.voidptr_t(0); //common functions let sel_registername = objc.declare('sel_registername', ctypes.default_abi, sel, ctypes.char.ptr); let objc_msgsend = objc.declare('objc_msgsend', ctypes.default_abi, id, id, sel, '...'); /* https://
developer.apple.com/library/mac/documentation/cocoa/reference/applicationkit/classes/nsapplication_class/index.html#//apple_ref/occ/instp/nsapplication/orderfront: * [nswindowptr orderfront:nil] */ var orderfront = sel_registername('orderfront:'); var nswindowptr = ctypes.voidptr_t(ctypes.uint64(nswindowstring)); var rez_orderfront = objc_msgsend(nswindowptr, orderfront, nil); console.log('rez_orderf...
...mozilla
developers have put the reference to the gtkwindow* into the gdkwindow* "user data", as a back reference.
...And 4 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
it lists information about 2 different versions of the extension with id foobar@
developer.mozilla.org.
... <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@
developer.mozilla.org.
...--> <rdf:description about="urn:mozilla:extension:foobar@
developer.mozilla.org"> <em:updates> <rdf:seq> <!-- each li is a different version of the same add-on --> <rdf:li> <rdf:description> <em:version>2.2</em:version> <!-- this is the version number of the add-on --> <!-- one targetapplication for each application the add-on is compatible with --> <em:targetapplication> <rdf:description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <!-- this is where this version of the add-on will be download...
...And 4 more matches
Signing an XPI - Archive of obsolete content
temporarily install the test certificate authority into your mozilla browser rename the x509.cacert file generated earlier to x509.cert import it into mozilla firefox as a software
developer certificate authority.
... in the downloading certificate dialog, tick trust this ca to identify software
developers.
... image obtaining a valid software
developer code-signing certificate warning: currently firefox expects xpi files to be signed with certificates that conform to the older object signing convention, rather than the newer code signing convention.
...And 4 more matches
JXON - Archive of obsolete content
/*\ |*| |*| jxon snippet #1 mdn
developer network |*| |*| https://
developer.mozilla.org/docs/jxon |*| https://
developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
... /*\ |*| |*| jxon snippet #2 mdn
developer network |*| |*| https://
developer.mozilla.org/docs/jxon |*| https://
developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
... /*\ |*| |*| jxon snippet #3 mdn
developer network |*| |*| https://
developer.mozilla.org/docs/jxon |*| https://
developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
...And 4 more matches
Remote debugging - Archive of obsolete content
when a bug is reproducible by a community member, but not on a
developer's computer, a last-resort strategy is to debug it on the community member's computer.
...the
developer trusts that his time is not being wasted: the crash is a real bug in firefox.
... (that is, there's a legitimate reason it happens only on some computers, but that reason just hasn't been discovered.) the crash victim, in turn, trusts the
developer with full access to his computer.
...And 4 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
wouldn't being able to use the same language on both client and server simplify life for us
developers?
...now more than 10 years later, with netscape's technology group having been transformed into the mozilla foundation, server-side javascript is seeing a strong resurgence because of the simplicity it provides to web
developers reinvigorated by the fact that today's cpus can process javascript more than 10x faster than the cpus of the mid-90's ever could.
...let’s take a closer look at rhino and its importance to the javascript
developer.
...And 4 more matches
Gecko FAQ - Gecko Redirect 1
gecko enables a pioneering new class of dynamic content that is more interactive and offers greater presentation control to web
developers, using open and recommended internet standards instead of proprietary apis.
...likewise, many software
developers want to include web browsing capability in their applications, but don't want to independently develop browser software.
... these
developers can pick and choose the browser components they want from among those that gecko offers, and package these components alongside their own within their finished products.
...And 4 more matches
What’s in the head? Metadata in HTML - Learn web development
try going to some of your favorite websites and use the
developer tools to check out their head contents.
...let's go through an exercise to explore this go to the front page of the mozilla
developer network.
...in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://
developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="the mozilla
developer network (mdn) provides information about open web technologies including html, css, and apis for both web sites and html5 apps.
...And 4 more matches
Multiple Firefox profiles
web
developers might want a secondary profile for testing websites, apps, or other projects on different firefox channels.
...while using the nightly channel, you may encounter some add-ons that have become temporarily incompatible with new api changes, until the add-on
developer has a chance to update them.
...the four channels are release, beta,
developer edition, and nightly.
...And 4 more matches
Accessibility documentation index - Accessibility
this document provides a list of links to all accessibility articles on the mozilla
developer network.
...the following is intended to provide implementation guidance that respects screen readers
developers' need to try different things.
...if you notice an implementation issue, please take a little time and let the
developers know.
...And 4 more matches
SDK API Lifecycle - Archive of obsolete content
developers using the sdk's apis need to know how far they can trust that a given api will not change in future releases.
... at the same time,
developers maintaining and extending the sdk's apis need to be able to introduce new apis that aren't yet fully proven, and to retire old apis when they're no longer optimal or supported by the underlying platform.
...it has two main components: a stability index that defines how stable each module is a deprecation process that defines when and how stable sdk apis can be changed or removed from future versions of the sdk while giving
developers enough time to update their code.
...And 3 more matches
Install Manifests - Archive of obsolete content
this means that the add-on will work with the application identified by the id property (<em:id>) specified (for a comprehensive list of application ids and valid min/maxversions for them see valid application versions for add-on
developers), from the minimum version (<em:minversion>) up to and including the maximum version (<em:maxversion>).
... examples <em:contributor>john doe</em:contributor> <em:contributor>john doe</em:contributor> <em:contributor>jane doe</em:contributor> <em:contributor>elvis presley</em:contributor> creator the name of the creator/principal
developer - intended for display in the user interface.
... examples <em:description>advanced foo tools.</em:description>
developer the name(s) of co-
developers.
...And 3 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
this document was authored by yutaka kachi and was originally published in japanese for the firefox
developers conference summer 2007.
... 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.
...yukihiro matsumoto, the
developer behind the ruby scripting language, published a “free software license diagnostic” in his personal blog.
...And 3 more matches
Mozilla Documentation Roadmap - Archive of obsolete content
« previousnext » mozilla documentation firefox extension development is still an immature discipline, with a
developer base consisting mostly of hobbyists and just a few organized development groups.
... the mozilla
developer center this is the official and most extensive guide to everything related to mozilla.
...first of all, the in-site search is not reliable, so we recommend using a search engine like google, with queries such as "mdc javascript code modules" or "javascript code modules site:
developer.mozilla.org".
...And 3 more matches
Tamarin build documentation - Archive of obsolete content
the tamarin codebase contains a cross-platform build system for mozilla
developers.
... $ make cppflags=-davmplus_verbose additional instructions for non-android cross-platform tamarin-redux build on osx 10.6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://
developer.mozilla.org/index.php?title=en/tamarin/tamarin_build_documentation&revision=21 the bug when building on snow leopard (bug 537817) has been fixed in the tamarin-redux repo.
... - download the android 2.3.3 mac sdk zip file from http://
developer.android.com/sdk/index.html.
...And 3 more matches
Index - Archive of obsolete content
in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content
developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
... 421 building accessible custom components in xul accessibility, dhtml, xul dhtml accessibility is a new technology which enables
developers to construct accessible controls within (x)html pages.
...
developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications.
...And 3 more matches
Scratchpad - Archive of obsolete content
usage opening scratchpad in its own window there are several different ways to open scratchpad in its own window: press shift + f4, or go to the web
developer menu (which is a submenu in the tools menu on macos and linux), then select scratchpad click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "scratchpad".
...first you need to check "scratchpad" in the "default firefox
developer tools" section of the settings page.
...to do this check "enable chrome and add-on debugging" in the
developer tool settings.
...And 3 more matches
Network throttling - MDN Web Docs Glossary: Definitions of Web-related terms
the internet speeds for
developers creating web applications in a corporate office building on a powerful computer are generally very fast.
... as a
developer, tech writer, or designer, this is likely your experience.
...network throttling enables a
developer to emulate an experience of a user.
...And 3 more matches
What is a URL? - Learn web development
deeper dive basics: anatomy of a url here are some examples of urls: https://
developer.mozilla.org https://
developer.mozilla.org/docs/learn/ https://
developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it to load the associated page (resource).
... note: there are some extra parts and some extra rules regarding urls, but they are not relevant for regular users or web
developers.
... examples of absolute urls full url (the same as the one we used before) https://
developer.mozilla.org/docs/learn implicit protocol //
developer.mozilla.org/docs/learn in this case, the browser will call that url with the same protocol as the one used to load the document hosting that url.
...And 3 more matches
From object to iframe — other embedding technologies - Learn web development
a little while later (late 90s, early 2000s), plugin technologies became very popular, such as java applets and flash — these allowed web
developers to embed rich content into webpages such as videos and animations, which just weren't available through html alone.
... browser makers and web
developers have learned the hard way that iframes are a common target (official term: attack vector) for bad people on the web (often termed hackers, or more accurately, crackers) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords.
... because of this, spec engineers and browser
developers have developed various security mechanisms for making <iframe>s more secure, and there are also best practices to consider — we'll cover some of these below.
...And 3 more matches
Eclipse CDT
download "eclipse ide for c/c++
developers" (not eclipse ide for enterprise java
developers) from the eclipse download page, install it, and add the directory containing the eclipse binary to your path (/applications/eclipse.app/contents/eclipse/ on mac).
... (while package managers like snap sometimes provide an eclipse package, they do not include the c++
developer tools.
...eclipse doesn't have good facilities for building incrementally in individual directories in the way that mozilla
developers generally require.
...And 3 more matches
Firefox
with broad compatibility, the latest in web technologies, and powerful development tools, firefox is a great choice for both web
developers and end users.
...here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the
developer tools in firefox, and other topics.
...
developer guide our
developer guide provides details on how to get and compile the firefox source code, how to find your way around, and how to contribute to the project.
...And 3 more matches
Using the viewport meta tag to control layout on mobile browsers
to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to let web
developers control the viewport's size and scale.
...apple's documentation does a good job explaining how web
developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in fennec.
...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.
...And 3 more matches
Performance
performance best practices in extensions a performance "best practices" guide for extension
developers.
... measuring add-on startup performance a guide for add-on
developers on how to set up a performance testing environment.
... xul school: add-on performance tips for add-on
developers to help them avoid impairing application performance.
...And 3 more matches
ReadableStream.ReadableStream() - Web APIs
the contents of this method are defined by the
developer, and should aim to get access to the stream source, and do anything else required to set up the stream fuctionality.
...this can be used by the
developer to control the stream during set up.
... pull(controller) optional this method, also defined by the
developer, will be called repeatedly when the stream's internal queue of chunks is not full, up until it reaches its high water mark.
...And 3 more matches
WritableStream.WritableStream() - Web APIs
the contents of this method are defined by the
developer, and should aim to get access to the underlying sink.
...this can be used by the
developer to control the stream during set up.
... write(chunk, controller) optional this method, also defined by the
developer, will be called when a new chunk of data (specified in the chunk parameter) is ready to be written to the underlying sink.
...And 3 more matches
CSS: Cascading Style Sheets
css reference our exhaustive css reference for seasoned web
developers describes every property and concept of css.
... looking to become a front-end web
developer?
... reference css reference: this exhaustive reference for seasoned web
developers describes every property and concept of css.
...And 3 more matches
dev/panel - Archive of obsolete content
enables you to extend the firefox
developer tools.
... most of the firefox
developer tools are hosted in a ui component called the toolbox.
...when the panel's created, the framework passes it a debuggee: this is a messageport object that you can use to exchange json messages with the browser that the
developer tools are currently debugging.
...And 2 more matches
Source code directories overview - Archive of obsolete content
this document is a guide for
developers to the directory structure of the mozilla source code tree.
... it gives a bird's eye view of the source code so a
developer can get a good idea what is in mozilla and where to find things.
... it is a good document for a new mozilla
developer to start learning about the mozilla code base.
...And 2 more matches
Cascade and inheritance - Learn web development
even experienced
developers don't remember all the details.
... the effect of css location finally, it is also useful to note that the importance of a css declaration depends on what stylesheet it is specified in — it is possible for users to set custom stylesheets to override the
developer's styles, for example the user might be visually impaired, and want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.
... normal declarations in author style sheets (these are the styles set by us, the web
developers).
...And 2 more matches
The web and web standards - Learn web development
this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web
developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
... being a web
developer is good the web industry is a very attractive market to enter if you are looking for a job.
... recent published figures say that there are currently around 19 million web
developers in the world, and that figure is set more than double in the next decade.
...And 2 more matches
Framework main features - Learn web development
previous overview: client-side javascript frameworks next each major javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable
developer experience.
...typescript is useful for the strictness it allows
developers to enforce on their code.
...each framework names these lifecycle phases differently, and not all give
developers access to the same phases.
...And 2 more matches
TypeScript support in Svelte - Learn web development
according to stackoverflow's 2019
developer survey it is the third most loved language, right behind rust and python.
... there seems to be a broad consensus that typescript is particularly well suited for large-scale projects, with many
developers working on the same code base.
...nevertheless, some
developers prefer to use it even on small projects like the one we are developing.
...And 2 more matches
Command line crash course - Learn web development
many
developers today are using unix-based tools (e.g.
... let's also look at the headers that
developer.mozilla.org returns using curl's -i flag, and print all the location redirects it sends to the terminal, by piping the output of curl into grep (we will ask grep to return all the lines that contain the word "location").
... try running this: curl /docs/web/api/fetch -l -i | grep location | awk '{ print "https://
developer.mozilla.org" $2 }' your final output should look something like this: /docs/web/api/fetch /docs/web/api/globalfetch/globalfetch.fetch() /docs/web/api/globalfetch/fetch /docs/web/api/windoworworkerglobalscope/fetch by combining these commands we've customised the output to show the full urls that the mozilla server is redirecting through when we request the /docs/web/api/fetch url.
...And 2 more matches
Package management basics - Learn web development
parcel is a(nother) tool that
developers commonly use in their development process.
... installing parcel run the following command to install parcel locally: npm install parcel-bundler once that's done all the things, we're now ready for some "modern client-side development" (which really means using build tools to make the
developer experience a little easier).
... reducing your app's file size however, as with all tools that "help"
developers there's often a trade off.
...And 2 more matches
Accessibility and Mozilla
in fact, the same keyboard commands are still available, so users can become comfortable and productive right away.accessibility information for core gecko
developersboth end users and
developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.accessibility information for ui designers and
developerswhen you design user interfaces with accessibility in mind, they will work for more people.
... this
developer's guide lays out general guidelines that assistive technology (at)
developers can use in developing live region support.
...And 2 more matches
Debugging JavaScript
this document is intended to help
developers writing javascript code in mozilla, mainly for mozilla itself, but it may also be useful for web
developers.
... web console this is the first place to go when you're debugging a web page; open the web console using the web console option in the web
developer menu.
...to enable it, go to about:config in the url bar and set devtools.chrome.enabled to true, or set the "enable chrome and add-on debugging" option in the
developer tool settings.
...And 2 more matches
Debugging on Mac OS X
try server builds in most cases,
developers needing to debug a build as close as possible to the production environment should use a try build.
...at this time,
developers can obtain a hardened runtime build with the com.apple.security.get-task-allow entitlement allowed by submitting a try build and downloading the dmg generated by the "rpk" shippable build job.
...try builds use the
developer.entitlements.xml file from the source tree while production builds use production.entitlements.xml.
...And 2 more matches
Contributing to the Mozilla code base
project skills documentation/onboarding firefox browser (core layers) c++ firefox
developers documentation firefox (front-end) javascript and/or html/css firefox
developers documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefox for fire tv java contribute to fir...
...browse this component on bugzilla for related bugs ask in our matrix channels : #introduction:mozilla.org or #
developers:mozilla.org find a bug we've identified as a good fit for new contributors.
... visit firefox-dev.tools - we list firefox
developer tools bugs for new contributors.
...And 2 more matches
Localization formats
advantages to html good for small projects very simple for web
developers gives localizers the exact context of translations a localizer who knows basic html can style translations to make sure translations display correctly...we can allow slight modifications (e.g.
... $array["getting started"] = "débuter avec firefox" the php code searches the array and returns the translation that is associated with the english term used by the web
developer.
... <h1><?php echo ___("getting started")?></h1> function ___($str) { return $array[$str]; } advantage to .lang simple work-flow allowing the web
developer to place the file in svn and it can appear on the staging server .lang syntax is like simplified .po, which many localizers who are familiar with linux and other projects understand mozilla has a basic tool called main.lang checker, which can show any untranslated files to the localizer no need to compile to .mo file so a localizer can see his/her changes more quickly creating simple diffs .lang files will be cached which will reduce any slowness effect disadvantage to .lang no plural forms no context for localizers unless you provide good comments no styling by localizers if it is needed may be slow...
...And 2 more matches
Localization Use Cases
in all presented examples, we try to show the existing code, explain the problem from the localizers' or
developers' perspective, and suggest a solution.
...consequently, using the existing localization frameworks, the
developer needs to predict which strings might need pluralization in other languages, and pluralize them even in english: availablesize = {[ plural(size) ]} availablesize[other] = {{$size}} {{$unit}} available an italian translation might look like this: availablesize = {[ plural(size) ]} availablesize[one] = {{$size}} {{$unit}} disponibile availablesize[other] = {{$size}} {{$unit}} disponibili it's ...
...easy to imagine how
developers might forget to pluralize some strings that in other languages might require pluralization (or other grammatical features that the framework supports).
...And 2 more matches
SpiderMonkey Build Documentation
non-
developer (optimized) build use these steps if you want to install spidermonkey for production use or run performance benchmarks.
... (if you want to use spidermonkey as a library in your c++ application, or work on improving spidermonkey itself, do a
developer/debug build instead, as described below.) cd js/src # this name should end with "_opt.obj" to make the version control system ignore it.
...refer the release notes under command line tools -> new features the release notes also states that this compatibility package will no longer be provided in the near future, so the build system on macos will have to be adapted to look for headers in the sdk until then, the following should help, open /library/
developer/commandlinetools/packages/macos_sdk_headers_for_macos_10.14.pk this builds an executable named js in the directory build-release/dist/bin.
...And 2 more matches
XPCOM
this can create a difficult situation for extension
developers trying to support multiple gecko versions (firefox 2 and 3, for example).creating a python xpcom componentcreating applications with mozilla already provides a tutorial for making a simple javascript or c++ component (implementing the nsisimple interface).
...however, such decoders relied on servers sending correct mime types; images sent with incorrect mime types would not be correctly displayed.xpcom gluethe xpcom glue is a static library which component
developers and embedders can link against.
... it allows
developers to link only against the frozen xpcom method symbols and maintain compatibility with multiple versions of xpcom.xpcom guidethese articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.xpcom ownership guidelines...naturally.
...And 2 more matches
Thunderbird extensions
there are similarities with firefox extensions, but there are also differences that may confound the starting thunderbird
developer.
...see
developer.thunderbird.net for newer information.
... documentation getting started with thunderbird a brave, young
developer wants to develop an add-on for thunderbird.
...And 2 more matches
Content Index API - Web APIs
the content index api allows
developers to register their offline enabled content with the browser.
...content indexing allows
developers to tell the browser about their specific offline content.
... this allows users to discover and view what is available, whilst giving
developers the ability to add and manage this content.
...And 2 more matches
HTTP Messages - HTTP
web
developers, or webmasters, rarely craft these textual http messages themselves: software, a web browser, proxy, or web server, perform this action.
... get http://
developer.mozilla.org/docs/web/http/messages http/1.1 the authority component of a url, consisting of the domain name and optionally the port (prefixed by a ':'), is called the authority form.
... connect
developer.mozilla.org:80 http/1.1 the asterisk form, a simple asterisk ('*') is used with options, representing the server as a whole.
...And 2 more matches
A typical HTTP session - HTTP
to work around this problem, web
developers use several techniques: ping the server periodically via the xmlhttprequest, fetch apis, using the websockets api, or similar protocols.
... example requests fetching the root page of
developer.mozilla.org, i.e.
... http://
developer.mozilla.org/, and telling the server that the user-agent would prefer the page in french, if possible: get / http/1.1 host:
developer.mozilla.org accept-language: fr observe that final empty line, this separates the data block from the header block.
...And 2 more matches
Populating the page: how browsers work - Web Performance
therefore, a
developer should strive to achieve these two goals.
...to be fast to load, the
developers’ goals include sending requested information as fast as possible, or at least seem super fast.
...for smooth interactions, the
developer's goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch.
...And 2 more matches
Progressive web apps (PWAs)
with service workers, web
developers can create reliably fast web pages and offline experiences.
... to find out how to implement pwas, read through our pwa
developer guide.
...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 offl...
...And 2 more matches
WebAssembly Concepts - WebAssembly
javascript frameworks could make use of webassembly to confer massive performance advantages and new features while still making functionality easily available to web
developers.
...instead, it is designed to complement and work alongside javascript, allowing web
developers to take advantage of both languages' strong points: javascript is a high-level language, flexible and expressive enough to write web applications.
... the javascript api provides
developers with the ability to create modules, memories, tables, and instances.
...And 2 more matches
jpm - Archive of obsolete content
assuming you don't want an old version of firefox, your options are firefox
developer edition, firefox nightly, unbranded beta, or unbranded release.
...if your secret is compromised, another
developer could upload add-ons to your account.
...you can supply a path to a specific binary: jpm run -b /path/to/firefox/nightly as a shorthand for this, you can pass "nightly", "firefox
developeredition", "aurora", "beta", or "firefox" and jpm will look in the default location for these firefox versions [note: as of firefox 48, the shorthands "firefox" and "beta" will resolve to versions of firefox which will not run your add-on.
... as an add-on
developer, this is usually what you want.
Chrome Authority - Archive of obsolete content
developers should stick to simple require statements, with a single static string, one per line of code.
...var xhr = require("x"+"hr"); var modname = "xpcom"; var xpcom = require(modname); var one = require("one"); var two = require("two"); the intention is that
developers use require() statements for two purposes: to declare (to security reviewers) what sorts of powers the module wants to use, and to control how those powers are mapped into the module's local namespace.
...these warnings will serve to guide
developers to use the correct pattern.
... all module
developers should heed the warnings and correct their code until the warnings go away.
Getting Started (jpm) - Archive of obsolete content
install firefox
developer version for testing your add-on.
... if firefox can not be located, or you have installed firefox
developer as an alternate browser, you may need to provide the path to it.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://
developer.mozilla.org/"); } at the command prompt, execute jpm run again.
... this time clicking it takes you to https://
developer.mozilla.org/.
JavaScript Daemons Management - Archive of obsolete content
|*| |*| https://
developer.mozilla.org/docs/javascript/timers/daemons |*| https://
developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
...|*| |*| https://
developer.mozilla.org/docs/dom/window.setinterval |*| |*| syntax: |*| var timeoutid = window.settimeout(func, delay, [param1, param2, ...]); |*| var timeoutid = window.settimeout(code, delay); |*| var intervalid = window.setinterval(func, delay[, param1, param2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ /* if (document.all && !window.settimeout.ispolyfill) { var __native...
...2 |*| |*| daemon.js - a javascript highly scalable daemons manager |*| |*| https://
developer.mozilla.org/docs/javascript/timers/daemons |*| https://
developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
...2 |*| |*| daemon.js - a javascript highly scalable daemons manager |*| |*| https://
developer.mozilla.org/docs/javascript/timers/daemons |*| https://
developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
Downloading JSON and JavaScript in extensions - Archive of obsolete content
downloading json if the extension is downloading json, then the
developer should be using one of the json decoding methods discussed here and not using eval() at all.
...the json decoding methods available to extension
developers protect the extension from malicious json and javascript.
...this usually happens because the extension is trying to keep some of its code fresh and dynamic, and the
developers don't want to create a new version of the extension for each script change.
...sandboxing is not without its dangers and
developers should read the sandboxing page carefully to make sure untrusted code is not leaked out of the sandbox.
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
« previous this document was authored by taro (btm) matsuzawa and was originally published in japanese for the firefox
developers conference summer 2007.
... tools for extension
developers fixme: are we sure we'll talking about venkman since it's not well maintained fixme: we maybe should talk about firebug and chromebug fixme: and what about console 2 and docked-js console?
...i hope you’ll find that this chapter helps make you a more effective extension
developer.
... gonzui gonzui is a full-text source-code search engine from satoru takabayashi, the well-known
developer of the namazu search engine software.
Chapter 1: Introduction to Extensions - Archive of obsolete content
this document was authored by hideyuki emura and was originally published in japanese for the firefox
developers conference summer 2007.
...e with the version of firefox you're using manages a whitelist of sites trusted for installing add-ons helps troubleshoot add-ons by disabling them and offering a safe mode confirms and runs updates provides access to add-ons' settings dialogs provides access to add-ons' support sites development environment amenities initially, there wasn't adequate documentation available, and extension
developers were largely left to fend for themselves1; however, now there's a considerable store of knowledge.
... this lowers the threshold both to using and to developing extensions; that fact, combined with firefox's rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension
developers growing explosively—there are now more than 7000 extensions and themes published at the firefox add-ons site (https://addons.mozilla.org).
... 1 one of the authors of this special edition, piro, is world-famous as one of the original
developers.
Setting Up a Development Environment - Archive of obsolete content
for mac os x
developers, there is also a way to set up "shortcuts".
...
developer extensions there's a wide variety of firefox extensions that aid web development and add-on development.
...you should also take some time to play around with the web
developer tools that are included in firefox.
...one of the most common errors
developers make is to register a js event listener or observer, and never removing it.
Tabbed browser - Archive of obsolete content
var url = "https://
developer.mozilla.org"; var tab = gbrowser.addtab(null, {relatedtocurrent: true}); gsessionstore.settabstate(tab, json.stringify({ entries: [ { title: url } ], usertypedvalue: url, usertypedclear: 2, lastaccessed: tab.lastaccessed, index: 1, hidden: false, attributes: {}, image: null })); reusing tabs rather than open a new browser or new tab each and every time one is needed, it i...
...ser; // create tab var newtab = tabbrowser.addtab(url); newtab.setattribute(attrname, "xyz"); // focus tab tabbrowser.selectedtab = newtab; // focus *this* browser window in case another one is currently focused tabbrowser.ownerdocument.defaultview.focus(); } } the function can be called like so: openandreuseonetabperattribute("myextension-myattribute", "http://
developer.mozilla.org/").
...yinterface(components.interfaces.nsihttpchannel); //i used nsihttpchannel but i guess you can use nsichannel, im not sure why though var interfacerequestor = ohttp.notificationcallbacks.queryinterface(components.interfaces.nsiinterfacerequestor); //var domwindow = interfacerequestor.getinterface(components.interfaces.nsidomwindow); //not to be done anymore because: https://
developer.mozilla.org/docs/updating_extensions_for_firefox_3.5#getting_a_load_context_from_a_request //instead do the loadcontext stuff below var loadcontext; try { loadcontext = interfacerequestor.getinterface(components.interfaces.nsiloadcontext); } catch (ex) { try { loadcontext = asubject.loadgroup.notificationcallb...
...ihttpchannel as is done on line 8 "httpchannel = subject.queryinterface(ci.nsihttpchannel);" //start loadcontext stuff var loadcontext; try { var interfacerequestor = httpchannel.notificationcallbacks.queryinterface(ci.nsiinterfacerequestor); //var domwindow = interfacerequestor.getinterface(components.interfaces.nsidomwindow); //not to be done anymore because: https://
developer.mozilla.org/docs/updating_extensions_for_firefox_3.5#getting_a_load_context_from_a_request //instead do the loadcontext stuff below try { loadcontext = interfacerequestor.getinterface(ci.nsiloadcontext); } catch (ex) { try { loadcontext = subject.loadgroup.notificationcallbacks.getinterface(ci.nsiloadcontext); } catch (ex2) {} ...
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
a
developer would tell me something wasn't possible, and i could prove otherwise every time.
...besides the five minutes it recently took for one of our
developers to rearrange a module when he thought it would take him an hour or two?
...and if we need to make a template change, or add in a piece of content, our data is now structured in a way that surprises our
developers in how easy it is to make a change.
... what would you say to a site
developer considering a similar conversion to standards-based layout, either with simple tables or no tables at all?
Index of archived content - Archive of obsolete content
hout security issues downloading json and javascript in extensions enhanced extension installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey 2 firefox addons
developer guide hiding browser chrome hotfix extension how to convert an overlay extension to restartless inline options install manifests installing extensions and themes from web pages interaction between privileged and non-privileged pages jetpack processes legacy add-ons legacy extensions for...
... nativewindow contextmenus doorhanger menu toast notifications.jsm pageactions.jsm prompt.jsm runtimepermissions.jsm snackbars.jsm sound.jsm tab addons
developer guide code snippets creating a user interface firefox hub walkthrough initialization and cleanup prerequisites walkthrough webextensions for firefox for android listening to events in firefox extensions migrating from internal linkage to frozen linkage migrating...
... raw components to add-ons multiple item extension packaging offering a context menu for form controls overlay 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 x...
...la.dev.tech.js-engine 2006-10-06 obsolete: xpcom-based scripting for npapi plugins plugins adobe flash external resources for plugin creation logging multi-process plugins monitoring plugins multi-process plugin architecture npapi plugin
developer guide npapi plugin reference browser-side plug-in api npapi plug-in side api npanycallbackstruct npbyterange npclass npembedprint npevent npfullprint npidentifier npn newstream npnvariable npn_createobject npn...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
for web
developers, for example, it provides less fine-grained control over the experience, and it can strain bandwidth and other resources.
...extending traditional hypertext navigation the hypertext approach to developing web pages, in which
developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page.
... * * the initial
developer of the original code is * netscape corporation.
... * portions created by the initial
developer are copyright (c) 2003 * the initial
developer.
Building accessible custom components in XUL - Archive of obsolete content
introduction dhtml accessibility is a new technology which enables
developers to construct accessible controls within (x)html pages.
...
developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications.
...by implementing dhtml accessibility techniques, web
developers can declare that generic html elements are really acting as specific gui controls (such as a treeitem within a treeview).
...this would allow xul
developers to add a single spreadsheet element to their xul applications (for example), with rowheader, columnheader, and cell elements as children, without requiring them to manage the accessibility support for each spreadsheet control.
Deploying XULRunner - Archive of obsolete content
current xulrunner is a stable
developer preview release.
... this means that while the release is immature in some areas such as embedding, application deployment, and os integration, it can be used by
developers that are releasing standalone xul applications.
...the responsibility still lies with the
developer to provide the correct version of xulrunner per platform.
... windows on windows, xulrunner does not yet have a complete built-in installation solution; app
developers should use pre-existing solutions for a native windows installer.
Dialogs in XULRunner - Archive of obsolete content
in an effort to make things easier for
developers and more consistent for users, xul has a mechanism to automatically create and position the core dialog buttons ("ok," "cancel," and "help" for example).
... the
developer just declares the need for the button, the button's caption, and the access key for the button, as well as the javascript function to call if the button is pressed.
...it makes creating an application easier for
developers; in addition, the consistent user experience also makes applications easier to use.
...the xul filepickers are xpcom components and must be instantiated before using, like this: function dofileopen() { /* see: http://
developer.mozilla.org/en/docs/xul_tutorial:open_and_save_dialogs */ var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"].createinstance(nsifilepicker); fp.init(window, "open file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); var res = fp.show(); if (res == nsifilepicker.returnok) { var thefile = fp.file; alert(thefile.leafname); ...
Mozilla release FAQ - Archive of obsolete content
in return for this, netscape (aol) contributes
developers to work on the project.
...webpages mozilla project homepage netscape
developer program website mozillazine (news service) mozilla evangelism effort mozdev projects irc server: irc.mozilla.org channel #mozillazine note that recent versions of mozilla include an irc client.
...mozilla currently has far more
developers than documenters.
... what's the best way to feel part of the community and talk to other
developers?
Tamarin Tracing Build Documentation - Archive of obsolete content
the tamarin codebase contains a cross-platform build system for mozilla
developers.
...http://
developer.mozilla.org/en/docs...mpliance_tests running tamarin performance tests follow the same steps as the tamarin central instructions.
... http://
developer.mozilla.org/en/docs...formance_tests tamarin buildbot adobe maintains a continuous build and test system for tamarin tracing and continuous build and test system for tamarin central, similar to tinderbox.
...documentation on how to setup a user repository http://
developer.mozilla.org/en/publishing_mercurial_clones.
Organizing your CSS - Learn web development
some
developers put all of the rules onto a single line, like so: .box { background-color: #567895; } h2 { background-color: black; color: white; } other
developers prefer to break everything onto a new line: .box { background-color: #567895; } h2 { background-color: black; color: white; } css doesn't mind which one you use.
... comment your css adding comments to your css will help any future
developer work with your css file, but will also help you when you come back to the project after a break.
... however, you do gain a lot of structure by adopting one and, as many of these systems are very widely used, other
developers are more likely to understand the approach you are using and be able to write their css in the same way, rather than having to work out your own personal methodology from scratch.
... build systems for css another way to organise css is to take advantage of some of the tooling that is available for front-end
developers, which allows you to take a slightly more programmatic approach to writing css.
Manipulating documents - Learn web development
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.
...this is a "tree structure" representation created by the browser that enables the html structure to be easily accessed by programming languages — for example the browser itself uses it to apply styling and other information to the correct elements as it renders a page, and
developers like you can manipulate the dom with javascript after the page has been rendered.
...add the following line below the previous one: link.textcontent = 'mozilla
developer network'; we should also change the url the link is pointing to, so that it doesn't go to the wrong place when it is clicked on.
... add the following line, again at the bottom: link.href = 'https://
developer.mozilla.org'; note that, as with many things in javascript, there are many ways to select an element and store a reference to it in a variable.
A first splash into JavaScript - Learn web development
then go into the
developer tools javascript console, and enter the following line: checkguess(); after pressing return/enter, you should see an alert come up that says "i am a placeholder"; we have defined a function in our code that creates an alert whenever we call it.
... if you haven't already done so, save your code, refresh the page in your browser, and open the
developer tools javascript console.
... to start with, go to your browser
developer tools javascript console again, and enter the following: for (let i = 1 ; i < 21 ; i++) { console.log(i) } what happened?
... next, open your browser
developer tools, and make sure the javascript console tab is open.
Introduction to the server side - Learn web development
web
developers can't control what browser every user might be using to view a website — browsers provide inconsistent levels of compatibility with client-side code features, and part of the challenge of client-side programming is handling differences in browser support gracefully.
...the server-side code has full access to the server operating system and the
developer can choose what programming language (and specific version) they wish to use.
...
developers typically write their code using web frameworks.
... store session/state information server-side programming allows
developers to make use of sessions — basically, a mechanism that allows a server to store information on the current user of a site and send different responses based on that information.
Getting started with Ember - Learn web development
in ember, opinions are a set of conventions that help increase the efficiency of
developers at the cost of having to learn those conventions.
...
developers are then more easily able to switch between projects and applications without having to completely relearn the architecture, patterns, conventions, etc.
... ember is built on javascript technologies and is a thin layer on top of traditional object-oriented programming, while still allowing
developers to utilize functional programming techniques.
...designers and other non-
developers can contribute to page templates without any knowledge of javascript, and interactivity can be added later.
Understanding client-side JavaScript frameworks - Learn web development
javascript frameworks are an essential part of modern front-end web development, providing
developers with tried and tested tools for building scalable, interactive web applications.
... 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.
... looking to become a front-end web
developer?
...framework main features each major javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable
developer experience.
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.
...as a web
developer, you need to agree on a range of browsers and devices that the code definitely needs to work on with the site owner, but beyond that, you need to code defensively to give other browsers the best chance possible of being able to use your content.
...this situation is a lot less bad than it used to be; back when ie4 and netscape 4 were competing to be the dominant browser in the 1990s, browser companies deliberately implemented things differently to each other to try to gain competitive advantage, which made life hell for
developers.
... testing on prerelease browsers it is often a good idea to test on prerelease versions of browsers; see the following links: firefox
developer edition edge insider preview safari technology preview chrome canary opera
developer this is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's
developers have fixed the bug in a newer version.
Git and GitHub - Learn web development
all
developers will use some kind of version control system (vcs), a tool to allow them to collaborate with other
developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on.
... the most popular vcs (at least among web
developers) is git, along with github, a site that provides hosting for your repositories and several tools for working with them.
... looking to become a front-end web
developer?
...don't worry, even professional web
developers find git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like flight rules for git and dangit, git!
Tools and testing - Learn web development
looking to become a front-end web
developer?
... understanding client-side javascript frameworks javascript frameworks are an essential part of modern front-end web development, providing
developers with tried and tested tools for building scalable, interactive web applications.
... git and github all
developers will use some kind of version control system (vcs), a tool to allow them to collaborate with other
developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on.
... the most popular vcs (at least among web
developers) is git, along with github, a site that provides hosting for your repositories and several tools for working with them.
Information for Assistive Technology Vendors
mozilla support for linux/unix assistive technology
developers mozilla supports the at-spi (assistive technology service provider interface) in html and in our user interface (based on xul technology).
... this makes it possible for the
developers of linux and unix accessibility software, such as screen readers, voice dictation packages and screen magnifiers to provide support for mozilla.
... join the mozilla accessibility community live chat both end users and
developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... purpose newsgroup mailing list google group
developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Debugging a hang on OS X (Archived)
if you find a hang in an application, it is very useful for the
developer to know where in the code this hang happens, especially if he or she can't reproduce it.
... creating the sample on mac os x 10.5 (xcode < 4.2) when the application is still hung, open up spin control.app (it’s in your <tt>/
developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple).
... creating the sample on mac os x 10.4 when the application is still hung, open up sampler.app (it’s in your <tt>/
developer/applications/performance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple.).
... when you have the raw sample data, you can't just save that and attach it to a bug, because the format is not very usable (unless the
developer is a mac hacker).
HTTP logging
this saves a log of http-related information from your browser run into a file that you can examine (or upload to bugzilla if a
developer has asked you for a log).
... generally the default list is ok, unless a mozilla
developer has told you to modify it.
... for many bugs, the "log.txt-main" file is the only thing you need to upload as a file attachment to your bugzilla bug (this is assuming you're logging to help a mozilla
developer).
... other bugs may require all the logs to be uploaded--ask the
developer if you're not sure.
How Mozilla's build system works
this documentation is for mozilla
developers who need to work on mozilla's build system.
... for many
developers, typing mach build to build the tree is sufficient to work with the source tree.
... note: this document is not intended for
developers who just want to build mozilla.
... how moz.build processing works for most
developers, knowing that moz.build files are python scripts that are executed and emit python dictionaries describing the build configuration is enough.
Index
found 172 pages: # page tags and summary 1 firefox firefox, landing, mozilla here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the
developer tools in firefox, and other topics.
... 10 firefox ui considerations for web
developers activity stream, firefox, icons, mozilla, new tab, newtab, ui, web, web development, favicon there are a number of places within the firefox user interface where web sites are listed for the user to choose a destination to visit or a site to manage in some way.
... 168 performance best practices for firefox front-end engineers best practices, developing firefox, developing mozilla, firefox, front-end, mozilla, performance this guide will help firefox
developers working on front-end code produce code which is as performant as possible—not just on its own, but in terms of its impact on other parts of firefox.
... 172 security best practices for firefox front-end engineers best practices, developing firefox, developing mozilla, firefox, front-end, mozilla, performance this article will help firefox
developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.
Security best practices for Firefox front-end engineers
this article will help firefox
developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.
... the last flag ensures that
developers will identify and avoid the problems early on in the development cycle and before shipping the code.
...the linter makes an exception for code that uses string literals that are hard coded in the source code, assuming benevolent
developers.
...
developers are able to avoid tripping the rule by using escaping functions in combination with template strings, for example: bar.innerhtml = escapehtml`<a href='${url}'>about</a>`; in system-privileged chrome code, any kind of remaining scripts will still be removed by our sanitizer.
Gecko Keypress Event
if gecko doesn't replace the charcode with an ascii character, the web application
developers would need to consider all non-latin keyboard layouts (arabic, greek, hebrew, russian, etc.).
...therefore, web application
developers should use only letters, ascii numerals, plus sign, and minus sign for custom shortcut keys.
... alternative charcodes for internal key handling this section documents only gecko internal keypress event handling, so web application
developers can ignore this section.
...xul application
developers should use key elements for handling accel keys, so as to make use of the handling logic already provided for these elements.
How to implement a custom autocomplete search component
the component uses the autocompletesearchparam attribute or searchparam property to allow the
developer to define the default directory otherwise only paths beginning with / or ~/ will be autocompleted.
...because creating an xpcom component in order to build a custom autocomplete source can be enough to discourage some
developers, below is an example javascript xpcom component called "simple-autocomplete" that implements the necessary interfaces.
...synchronously) of the result * * @param searchstring - the string to search for * @param searchparam - an extra parameter * @param previousresult - a previous result to use for faster searchinig * @param listener - a listener to notify when the search is complete */ startsearch: function(searchstring, searchparam, result, listener) { // this autocomplete source assumes the
developer attached a json string // to the the "autocompletesearchparam" attribute or "searchparam" property // of the <textbox> element.
...: <textbox id="text1" type="autocomplete" autocompletesearch="simple-autocomplete" showcommentcolumn="true" autocompletesearchparam='[{"value":"mark","comment":"cool dude"},{"value":"mary","comment":"nice lady"},{"value":"jimmy","comment":"very uncool guy"},{"value":"jimbo","comment":null}]' /> the component uses the autocompletesearchparam attribute or searchparam property to allow the
developer to define a set of data to use for autocompletion.
Following the Android Toasts Tutorial from a JNI Perspective
this article is a work in progress and is based on githubgist :: _ff-addon-tutorial-jniandroidtoast.js this article will follow the android
developers :: api guides - toasts tutorial.
...this article teaches
developers how to port java code to jni by reading the java and android documentation.
... context context = getapplicationcontext(); charsequence text = "hello, firefox!"; int duration = toast.length_short; toast toast = toast.maketext(context, text, duration); toast.show(); nativewindow code as mentioned earlier, toasts are a very popular feature, so mozilla
developers chose to bring it to the privileged javascript scope via the nativewindow object.
... google
developer :: android apis - documentation for the android apis.
A brief guide to Mozilla preferences
for example, let's assume that nightly has a preference "some.preference" which defaults to true while
developeredition defaults the same preference to false and the user desires the preference to have the value true in both channels.
... if the preference is not a sticky preference and the user runs
developeredition and flips the pref to true it will be saved as it is not the default.
...when the user then runs
developeredition again, the preference value will be false as no user preference was written by nightly.
... if the preference is defined as a sticky preference, the value true will be written by nightly even though it matches the current default, so when
developeredition is run the preference keeps the desired value of true.
L20n
s a simple, straightforward example showing an english string being provided: <brandname "firefox"> <about "about {{ brandname }}"> here is the same string being provided in slovenian: <brandname { nominative: "firefox", genitive: "firefoxa", dative: "firefoxu", accusative: "firefox", locative: "firefoxu", instrumental: "firefoxom" }> <about "o {{ brandname.locative }}"> for
developers documentation for
developers wanting to implement localization functionality on their web apps using l20n.
... internationalization for your web app first read for
developers looking to use the l20n infrastructure.
... l20n syntax cheatsheet for
developers a simple cheatsheet to help
developers as they add l20n to their localization infrastructure.
... additional resources some additional resources for
developers and localizers involved with l20n.
NSS FAQ
nss was designed from the ground up for use by commercial
developers.
...
developer questions what hardware accelerators are supported?
... the integration effort depends on an number of factors, such as
developer skill set, application complexity, and the level of security required for your application.
... see https://
developer.mozilla.org/docs/glossary/tls.
Shumway
this article will help you understand shumway — mozilla's open standards-based flash renderer — and what it means for the community of
developers currently creating the adobe flash platform.
... the project is not exactly a
developer tool but it is something that content creators should test against (and report bugs or performance issues to).
... end-users and less involved
developers may report issues by hovering over "shumway" within flash content, clicking "report problems", and filling the form.
...please note that source code will be requested for the shumway
developers to use as small test cases.
Mozilla Projects
david baron that helps extension and chrome
developers to find memory leaks.
... shumway this article will help you understand shumway — mozilla's open standards-based flash renderer — and what it means for the community of
developers currently creating the adobe flash platform.
... webreplayroadmap this document describes existing, planned, and potential features for the firefox
developer tools that are based on web replay, along with their ui.
...to that end, this document will be revised over time as we find new and better ways of helping
developers.
Exploitable crashes
finding exploitable crashes exploitable crashes are most often discovered through normal testing and usage, when
developers recognize a crash stack in gdb or submitted to a bug as exploitable.
... additionally, mozilla
developers make heavy use of two tools in particular to find exploitable situations before they show up as exploitable crash reports.
...there is little public information about it, and it is hard to find even on the apple
developer site.
... to get them go to the mac
developer center downloads section -> other downloads -> search for "crashwrangler".
Handling Mozilla Security Bugs
this work is separate from the work of
developers adding new security features (cryptographically-based or otherwise) to mozilla, although obviously many of the same people will be involved in both sets of activities.
...in particular, we understand and acknowledge the concerns of those who believe that all information about security vulnerabilities should be publicly disclosed as soon as it is known, so that users may take immediate steps to protect themselves and so that problems can get the maximum amount of
developer attention and be fixed as soon as possible.
... at the same time, the mozilla project receives substantial contributions of code and
developer time from organizations that use (or plan to use) mozilla code in their own product offerings.
...each and every member of the mozilla security bug group will automatically have access to all mozilla bugs marked "security-sensitive." the members of the mozilla security bug group will be drawn primarily from the following groups: security
developers (i.e., those whose bugs are often singled out as security-relevant or who have security-relevant bugs assigned to them), and security qa people who are the qa contacts for those bugs.
Finishing the Component
the interfaces needed to block certain urls from loading are not frozen, and there is still some debate about how exactly this functionality should be exposed to embedders and component
developers, so the apis are not ready to be published.
... 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.
... gecko
developers could change the interface's iid, and some do.
... before attempting to use unfrozen interfaces, you should contact the
developers who are responsible for the code you're trying to use (i.e., module owners) and ask them how best to do what you are trying to do.
Index
73 an overview of thunderbird components thunderbird the thunderbird mail application is a group of components built on a set of technologies that can seem daunting to new
developers.
... 109 thunderbird
developer reference docs no summary!
... 110 tips and tricks from the newsgroups thunderbird the following discussions on mozilla.dev.apps.thunderbird and mozilla.dev.extensions include useful tips for thunderbird add-on
developers.
...the data will come from a custom header labeled x-superfluous 114 using mapi with thunderbird's windows 7
developer builds thunderbird debug, thunderbird mapi (messaging application programming interface) is a windows feature that allows applications to send files via a system's default mail application.
Thunderbird Binaries
thunderbird current release can be downloaded from https://www.mozilla.org/thunderbird/ past thunderbird releases can be downloaded from https://releases.mozilla.org/pub/thunderbird/releases/ early preview releases whilst writing new versions of thunderbird,
developers release preview versions, known as betas.
... these builds are made to get feedback from testers and extension
developers.
... warning: whilst
developers try to ensure that nightly builds are stable, it is possible that errors can get into nightly builds that can destroy your data or harm it.
... many
developers prefer to work on areas of the code which are too risky to change when approaching a release.
Web Push API Notifications best practices - Web APIs
“if done well, it's nice to have, but if not done well, it's really annoying.” — overheard conversation between two browser
developers discussing the ethics of push notifications.
... overview of web push notifications web push notifications (created using a combination of the notifications, push, and service worker apis) are part of the rising noise that product
developers and marketers are using to get attention for their sites.
...sometimes they can eliminate frustration and annoyance, and sometimes they can cause them, and it’s up to you as a
developer to make wise recommendations (and decisions) about the use of push notifications.
... browser mitigations because of abuses of push notifications in the past, web browser
developers have begun to implement strategies to help mitigate this problem.
Streams API - Web APIs
the streams api allows javascript to programmatically access streams of data received over the network and process them as desired by the
developer.
...it can be used to handle response streams of the fetch api, or
developer-defined streams (e.g.
... readablestreambyobreader represents a byob ("bring your own buffer") reader that can be used to read stream data supplied by the
developer (e.g.
... examples from other
developers: progress indicators with streams, service workers, & fetch.
Web Audio API - Web APIs
the web audio api provides a powerful and versatile system for controlling audio on the web, allowing
developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.
... timing is controlled with high precision and low latency, allowing
developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate.
... web audio api target audience the web audio api can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a
developer.
...with that in mind, it is suitable for both
developers and musicians alike.
Evolution of HTTP - HTTP
a typical flow of requests, all through one single connection is now looking like this: get /docs/glossary/simple_header http/1.1 host:
developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://
developer.mozilla.org/docs/glossary/simple_header 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=...
...utf-8 date: wed, 20 jul 2016 10:55:30 gmt etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a" keep-alive: timeout=5, max=1000 last-modified: tue, 19 jul 2016 00:59:33 gmt server: apache transfer-encoding: chunked vary: cookie, accept-encoding (content) get /static/img/header-background.png http/1.1 host:
developer.cdn.mozilla.net user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: */* accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://
developer.mozilla.org/docs/glossary/simple_header 200 ok age: 9578461 cache-control: public, max-age=315360000 connection: keep-alive content-length: 3077 content-type: image/png date: thu, 31 mar 2016 13:34:46 gmt last-modified: wed, 21 oct 2015 18:27:50 gmt server: apache (image con...
...this amassed interest from
developers working on both browsers and servers.
...having an up-to-date server communicating with a recent browser is enough to enable its use: only a limited set of groups were needed to trigger adoption, and as legacy browser and server versions are renewed, usage has naturally increased, without further web
developer efforts.
HTTP Index - HTTP
37 feature policy feature policy, feature-policy, http, reference, security, header feature policy allows web
developers to selectively enable, disable, and modify the behavior of certain features and apis in the browser.
...it allows web
developers to have more control over the data stored locally by a browser for their origins.
... 107 content-security-policy-report-only csp, http, https, reference, security, header the http content-security-policy-report-only response header allows web
developers to experiment with policies by monitoring (but not enforcing) their effects.
...database read/write, cpu time, file system access, etc.) in the
developer tools in the user's browser or in the performanceservertiming interface.
An overview of HTTP - HTTP
this role is primarily performed by the web browser; other possibilities are programs used by engineers and web
developers to debug their applications.
...http messages can be read and understood by humans, providing easier testing for
developers, and reduced complexity for newcomers.
...for example: get / http/1.1 host:
developer.mozilla.org accept-language: fr read the response sent by the server, such as: http/1.1 200 ok date: sat, 09 oct 2010 14:28:02 gmt server: apache last-modified: tue, 01 dec 2009 20:18:22 gmt etag: "51142bc1-7449-479b075b2891b" accept-ranges: bytes content-length: 29769 content-type: text/html <!doctype html...
... the path of the resource to fetch; the url of the resource stripped from elements that are obvious from the context, for example without the protocol (http://), the domain (here,
developer.mozilla.org), or the tcp port (here, 80).
CSS Houdini
houdini is a set of low-level apis that exposes parts of the css engine, giving
developers the power to extend css by hooking into the styling and layout process of a browser’s rendering engine.
... houdini is a group of apis that give
developers direct access to the css object model (cssom), enabling
developers to write code the browser can parse as css, thereby creating new css features without waiting for them to be implemented natively in browsers.
... css typed om reference css typed om guide css layout api designed to improve the extensibility of css, this api enables
developers to write their own layout algorithms, like masonry or line snapping.
... css painting api developed to improve the extensibility of css — allows
developers to write javascript functions that can draw directly into an element's background, border, or content via the paint() css function.
Inheritance and the prototype chain - JavaScript
javascript is a bit confusing for
developers experienced in class-based languages (like java or c++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in es2015, but is syntactical sugar, javascript remains prototype-based).
...(the console is included in most web browser's
developer tools.
... more information is available for firefox
developer tools, chrome devtools, and edge devtools.) function dosomething(){} console.log( dosomething.prototype ); // it does not matter how you declare the function, a // function in javascript will always have a default // prototype property.
... prototype and object.getprototypeof javascript is a bit confusing for
developers coming from java or c++, as it's all dynamic, all runtime, and it has no classes at all.
JavaScript
looking to become a front-end web
developer?
... intermediate understanding client-side javascript frameworks javascript frameworks are an essential part of modern front-end web development, providing
developers with proven tools for building scalable, interactive web applications.
... firefox
developer tools web console, javascript profiler, debugger, and more.
... learn javascript an excellent resource for aspiring web
developers — learn javascript in an interactive environment, with short lessons and interactive tests, guided by automated assessment.
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
kay length: 992 pages publisher: wrox; 2 edition (may 3, 2001) isbn: 0764543814 michael kay is a member of the w3c xsl working group and the
developer of his own open-source xslt processor, saxon.
... http://www.amazon.com/xslt-programme.../dp/0764543814 xslt author: doug tidwell length: 473 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 0596000537 doug tidwell is a senior
developer at ibm and a prominent evangelist for xml technologies generally.
... he is the author of several articles and tutorials on various aspects of xml at ibm's extensive xml
developer site.
...day location: http://www-106.ibm.com/
developerwork...-hands-on-xsl/ understanding xslt author: jay greenspan location: http://hotwired.lycos.com/webmonkey/...l?tw=authoring what is xslt?
cfx - Archive of obsolete content
there are also a number of internal commands, which are more likely to be useful to sdk
developers than to add-on
developers.
... this flag is particularly useful for sdk
developers or people working with the development version of the sdk, who may want to run an add-on using newer versions of the modules than than those shipping in firefox.
... this flag is particularly useful for sdk
developers or people working with the development version of the sdk, who may want to run an add-on using newer versions of the modules than than those shipping in firefox.
Getting started (cfx) - Archive of obsolete content
for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://
developer.mozilla.org/"); } at the command prompt, execute cfx run again.
... this time clicking it takes you to https://
developer.mozilla.org/.
... as an add-on
developer, this is usually what you want.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
on the other hand, if you are an experienced
developer or team, and you know that you are going to build a large, complex extension, you would do well to consider the approach described in this article.
...many intelligent
developers have been driven to the brink of insanity trying to build it for the first time.
... if you're not an experienced c++
developer, i wouldn't even bother.
Developing add-ons - Archive of obsolete content
add-ons topics submitting an add-on to amo provides helpful information for add-on
developers to help them properly package and deliver their add-ons.
...jetpack
developers only need to know the tools of the modern web: html, css, and javascript.
... addons.mozilla.org (amo) api
developers' guide the amo
developers' guide describes how to use the amo api to fetch information about add-ons from the addons.mozilla.org site.
Enhanced Extension Installation - Archive of obsolete content
extension installation and registration is also prohibitively difficult/annoying for
developers, who are forced to either dangerously hand-edit all the appropriate manifest files, or package their code as a xpi and install it that way every time they make a change.
...this should prevent against random file deletions and allow
developers to easily reset their state by deleting one of the required system files.
...making the database file format human readable would also help
developers debug their installation problems.
Appendix D: Loading Scripts - Archive of obsolete content
because there are such a diverse array of add-ons, and because the needs of
developers have grown organically over time, the gecko runtime provides a number of means to dynamically load and execute javascript files.
... <script> tags xul script tags are traditionally the primary means of loading scripts for extension
developers.
... advantages familiarity: these tags are very similar to the html script tags familiar to most web
developers.
Introduction - Archive of obsolete content
this tutorial is meant to be the stepping stone that will turn you into a professional firefox extension
developer in no time.
... we have poured years of xul experience into it, providing many solutions for problems extension
developers commonly run into.
...a team of over a dozen xul
developers conformed glaxstar at the time this tutorial was created, and the combined experiences of years creating firefox extensions are reflected here.
The Essentials of an Extension - Archive of obsolete content
<em:name>xul school hello world</em:name> <em:description>welcome to xul school!</em:description> <em:version>0.1</em:version> <em:creator>appcoast</em:creator> <em:homepageurl>https://
developer.mozilla.org/docs/xul_school</em:homepageurl> this is the data that is displayed before and after the extension is installed, that you can see in the add-ons manager.
...this division allows other
developers to create themes that replace skins, and translators to create localizations in different languages, all of this without having to change your extension or your code.
...if your menu item fits in the web
developer section, it is recommended that you add it there.
Add-ons - Archive of obsolete content
these type of extensions have many advantages for both users and
developers compared to the old xpinstall/-style extensions.
... firefox addons
developer guide the original document is in japanese and distributed via the xuldev.org website.
... security best practices in extensions this document is intended as a guide for
developers to promote best practices in securing your extension.
JavaScript Client API - Archive of obsolete content
therefore,
developers outside of the sync core should know that their code could require significant refactoring in future releases.
... before developing against the javascript api, it is recommended to speak to
developers of the api.
...if in doubt, consult the sync
developers.
Venkman Introduction - Archive of obsolete content
a powerful new tool is available for web
developers for use in many mozilla-based products, including firefox, mozilla suite and netscape 7.x.
... the javascript debugger, also called venkman, has been a part of the mozilla browser and the community of web and script
developers there for some time.
...even if you are already using venkman, the features, procedures, and tips described here will make you a more confident web
developer and debugger.
Creating XPI Installer Modules - Archive of obsolete content
however, this new arrangement does not make things much easier for the web or user interface
developer.
...xul, javascript, or css files) in the chrome subdirectories and editing them with a text editor has been replaced by something a lot of
developers find more confusing and esoteric.
...mozilla is alerted to these content specifications and the resources they manage either through registration as part of an installation process (as described in this tutorial) or by way of a shortcut file called installed-chrome.txt, in which
developers can point at their new contents.rdf files and have them registered as they develop (a process we do not describe here).
WinProfile Object - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
... winprofile (windows only) windows
developers use this object to manipulate the content of a windows .ini file.
WinReg Object - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
... winreg (windows only) windows
developers use this object to manipulate the content of the windows registry.
A XUL Bestiary - Archive of obsolete content
in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content
developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
... events events are also a source of confusion for many less-hardened
developers.
...in addition to the small matter of programming these serious things in c++ and compiling them platform for platform, the architects and
developers of mozilla use three "xp" technologies to link the core with the interface.
Using Remote XUL - Archive of obsolete content
the bar consists of a set of links organized into four main categories: the mozilla organization,
developer docs, testing, and tools.
... <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization" /> <menu label="
developer docs" /> <menu label="testing" /> <menu label="tools" /> <button label="faq" /> <button label="search" /> </menubar> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the menubar element is a container for a series of menus.
... <menuitem label="get involved" value="https://www.mozilla.org/get-involved.html" /> <menuitem label="newsgroups" value="https://www.mozilla.org/community.html" /> <menuitem label="license terms" value="https://www.mozilla.org/mpl/" /> <menuitem label="newsbot" value="https://www.mozilla.org/newsbot/" /> </menupopup> </menu> <menu label="
developer docs"> <menupopup> <menuitem label="roadmap" value="https://www.mozilla.org/roadmap.html" /> <menuitem label="projects" value="https://www.mozilla.org/projects/" /> <menuitem label="ports" value="https://www.mozilla.org/ports/" /> <menuitem label="module owners" value="https://www.mozilla.org/owners.html" /> <menuitem label=...
XUL Questions and Answers - Archive of obsolete content
overlaying elements without ids the original
developers only tend to put ids where they need them.
... see also http://
developer.mozilla.org/en/docs...in_chrome_code how can i include a .js document from inside a javascript document?
... visit http://
developer.mozilla.org/en/docs...pplication.ini to find out how to properly set up the application.ini file.
XUL accessibility guidelines - Archive of obsolete content
in addition, there is an active community of accessibility
developers within the mozilla project that will be happy to help you with any concerns or questions you have in regards to making your xul applications fully accessible.
...accessibility hub on the mozilla
developer center.
...the problem occurs when a
developer decides to add functionality that jumps the user to the second form field once 3 digits have been entered into the first form field.
XML - Archive of obsolete content
information
developers create languages particular to their applications, any time they need a very specific way to represent the structure of some data.
... when we say language, we mean that
developers create a set of terms, orlexicon, and a relationship between these terms, or what some people call agrammar.
...it will consist of a lexicon of four terms: memo, to, from, body -- all of which fit together into a syntax represented in most xml circles as: <!element memo (from, to, body)> for
developers accustomed to reading and using xml, this definition indicates that the root element "memo" is constituted by a "from" element, then a "to" element, then a "body" element.
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
xulrunner 1.8.0.1 is the first stable
developer preview release of xulrunner.
...sample applications are available from the mozilla
developer center.
...this is a
developer preview release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases.
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
xulrunner 1.8.0.4 is a stable
developer preview of the mozilla xulrunner application framework.
...sample applications are available from the mozilla
developer center.
...this is a
developer preview release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases.
Archived Mozilla and build documentation - Archive of obsolete content
dtrace dtrace is sun microsystem's dynamic tracing framework that allows
developers to instrument a program with probes that have little to no effect on performance when not in use and very little when active.
...it's meant as a guide to
developers wishing to understand or extend the mozilla http implementation.
...it is mainly of interest to gecko
developers.
Writing JavaScript for XHTML - Archive of obsolete content
problem: my favourite js library still breaks if you use javascript libraries like the famous prototype.js or yahoo's one, there is bad news for you: as long as the
developers don't apply the fixes mentioned above, you won't be able to use them in your xml-xhtml applications.
... two possible ways still are there, but neither is very promissing: take the library, recode it and publish it or e-mail the
developers, e-mail your friends to e-mail the
developers and e-mail your customers to e-mail the
developers.
... for completeness here is the accept field, that firefox 2.0.0.9 sends with its requests: accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 further reading you will find several useful articles in the
developer wiki: xml in mozilla dom xml introduction xml extras dom 2 methods you will need are: dom:document.createelementns dom:document.getelementsbytagnamens see also properly using css and javascript in xhtml documents ...
Using the Right Markup to Invoke Plugins - Archive of obsolete content
this is, in fact, the unique identifier of macromedia's flash plugin, and
developers are expected to know such unique identifiers in order to invoke the component of their choice.
...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.
...in order to work around this,
developers are encouraged to use the data attribute to the object element: <object type="application/x-shockwave-flash" data="animation.swf"..../>.
Windows Media in Netscape - Archive of obsolete content
netscape 7.1 has the ability to load the microsoft® windows media player™ as an activex control, and thus
developers can now build multimedia experiences that script the windows media player in netscape 7.1, just as they do in internet explorer.
... activexobject is used by many web
developers to detect the presence of internet explorer in much the same fashion as document.all is used.
...use of microsoft's msxml in conjunction with use of windows media player is common, particularly since both are offered to the
developer community as activex controls for ie browsers.
XQuery - Archive of obsolete content
while xquery is currently not supported in firefox (whether through javascript to
developers or to browser users), at least one extension has been developed to give a preliminary support for xquery for browser users (and serving as a simple model for how xquery can be implemented within extensions).
...berkeley db xml was the initial choice by the extension
developer for its support across many languages (c++, java, python, perl, php, etc.) (besides its also being open source), but now some problems may exist with bdbxml (unlike saxon).
... notes for
developers wishing to access xquery in their own extensions at present, the extension works simply by using liveconnect to work with berkeley db xml's java api (and via a java wrapper class which circumvents liveconnect's current inability to handle some types of java exceptions properly).
Game distribution - Game development
you can put your html5 games into the same arena (see native desktop, later on) and you should because it's good to diversify the platforms you support, but you have to remember that
developers creating desktop games have years of experience, great tools and stable distribution channels.
... self-hosting if you are a front-end
developer, you may already know what to do.
...the biggest desktop store for games is definitely steam — indie
developers can get on steam via the steam direct program.
Game promotion - Game development
write about your development process, nasty bugs you encounter, funny stories, lessons learned, and the ups and downs of being a game
developer.
... manakeep is a website builder made for indie game
developers and provides a great starting point to create your website.
...you can also sell a full version of the game from inside your browser demo version, which will be a great move considering high competition, some
developers even manage to make full browser versions.
Building up a basic demo with A-Frame - Game development
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.
...it is based on the entity component system, which is known in the game development world, but it targets web
developers with a familiar markup structure, manipulable with javascript.
...a-frame targets web
developers by offering easy to use web markup and all the advantages that brings, such as javascript manipulation.
Audio for Web games - Game development
there are a couple of differences between desktop and mobile browsers that may have caused browser vendors to make choices that can make web audio difficult for game
developers to work with.
...there is further information about it here from the google
developers site.
...
developers can generate audio and manipulate audio samples as well as positioning sound in 3d game space.
Houdini - MDN Web Docs Glossary: Definitions of Web-related terms
houdini is a set of low level apis that give
developers the power to extend css, providing the ability to hook into the styling and layout process of a browser’s rendering engine.
... houdini gives
developers access to the css object model (cssom), enabling
developers to write code the browser can parse as css.
... the benefit of houdini is that
developers can create css features without waiting for web standards specifications to define them and without waiting for every browser to fully implement the features.
Polyfill - MDN Web Docs Glossary: Definitions of Web-related terms
it was essentially a compilation of browser-specific workarounds so that javascript
developers could have a single common api that worked in all browsers.
... at the time, javascript
developers were grasping at straws trying to get their website to work across all devices because there was such a discrepancy between browsers that the website might have to be programmed radically differently and have a much different user interface based upon the user's browser.
... thus, the javascript
developer had access to only a very tiny handful of javascript apis that worked more-or-less consistently across all browsers.
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes add prefixes to experimental or nonstandard css properties and javascript apis, so
developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web
developers' code during the standardization process.
...
developers should wait to include the unprefixed property until browser behavior is standardized.
...web
developers have been using them on production web sites, despite their experimental nature.
WCAG - MDN Web Docs Glossary: Definitions of Web-related terms
wcag uses three levels of conformance: priority 1: web
developers must satisfy these requirements, otherwise it will be impossible for one or more groups to access the web content.
... priority 2: web
developers should satisfy these requirements, otherwise some groups will find it difficult to access the web content.
... priority 3: web
developers may satisfy these requirements, in order to make it easier for some groups to access the web content.
What is CSS? - Learn web development
sometimes because a particular browser is interested in having some capability, other times because web designers and
developers are asking for a feature, and sometimes because the working group itself has identified a requirement.
... as a newcomer to css, it is likely that you will find the css specs overwhelming — they are intended for engineers to use to implement support for the features in user agents, not for web
developers to read to understand css.
... many experienced
developers would much rather refer to mdn documentation or other tutorials.
What text editors are available? - Learn web development
objective: learn how to choose a text editor that best suits your needs as a web
developer.
...for text editors, check for two different kinds of support: user-oriented content (faq, manual, online help) discussion with
developers and other users (forum, email, irc) use the written documentation when you're learning how to use the editor.
...the
developers will give you an .exe or .msi file.
HTML forms in legacy browsers - Learn web development
all web
developers learn very quickly (and sometimes painfully) that the web is a very rough place for them.
... the webkit blog and planet webkit aggregate the best articles by webkit core
developers.
... graceful degradation is web
developer's best friend graceful degradation and progressive enhancement are development patterns that allow you to build great stuff by supporting a wide range of browsers at the same time.
Sending form data - Learn web development
viewing http requests http requests are never displayed to the user (if you want to see them, you need to use tools such as the firefox network monitor or the chrome
developer tools).
...after submitting the form: open the
developer tools.
...just remember that a front-end
developer is not the one who should define the security model of the data.it's possible to perform client-side form validation, but the server can't trust this validation because it has no way to truly know what has really happened on the client-side.
JavaScript basics - Learn web development
developers have written a variety of tools on top of the core javascript language, unlocking a vast amount of functionality with minimum effort.
... third-party apis that allow
developers to incorporate functionality in sites from other content providers, such as twitter or facebook.
...for more details on javascript consoles, see discover browser
developer tools.
Introduction to events - Learn web development
for example, node.js is a very popular javascript runtime that enables
developers to use javascript to build network and server-side applications.
...e/evt/event are most commonly used by
developers because they are short and easy to remember.
...when you fill in the details and select the submit button, the natural behavior is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.) the trouble comes when the user has not submitted the data correctly — as a
developer, you want to prevent the submission to the server and give an error message saying what's wrong and what needs to be done to put things right.
Fetching data from the server - Learn web development
fetch the fetch api is basically a modern replacement for xhr; it was introduced in browsers recently to make asynchronous http requests easier to do in javascript, both for
developers and other apis that build on top of fetch.
... the following block does the same thing as our original example, but is written in a different style: fetch(url).then(function(response) { return response.text() }).then(function(text) { poemdisplay.textcontent = text; }); many
developers like this style better, as it is flatter and arguably easier to read for longer promise chains — each subsequent promise comes after the previous one, rather than being inside the previous one (which can get unwieldy).
... now load the index file in your browser (via localhost:8000) and look in your browser
developer console.
Introduction to web APIs - Learn web development
application programming interfaces (apis) are constructs made available in programming languages to allow
developers to create complex functionality more easily.
...when calling a method from a library, the
developer is in control.
... with a framework, the control is inverted: the framework calls the
developer's code.
What is JavaScript? - Learn web development
apis are ready-made sets of code building blocks that allow a
developer to implement programs that would otherwise be hard or impossible to implement.
... if you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser
developer console — typeerror: para is undefined.
... comments as with html and css, it is possible to write comments into your javascript code that will be ignored by the browser, and exist simply to provide instructions to your fellow
developers on how the code works (and you, if you come back to your code after six months and can't remember what you did).
What went wrong? Troubleshooting JavaScript - Learn web development
at this point, let's consult the
developer console to see if it reports any syntax errors, then try to fix them.
... fixing syntax errors earlier on in the course we got you to type some simple javascript commands into the
developer tools javascript console (if you can't remember how to open this in your browser, follow the previous link to find out how).
... the name of the javascript file, which links through to the debugger tab of the
developer tools.
Getting started with Svelte - Learn web development
the outcome of this approach is not only smaller application bundles and better performance, but also a
developer experience that is more approachable for people that have limited experience of the modern tooling ecosystem.
...web
developers with basic html, css, and javascript knowledge can easily grasp svelte specifics in a short time and start building web applications.
...extensions to the javascript language are minimal and carefully picked in order to not break javascript syntax nor alienate
developers.
Learn web development
looking to become a front-end web
developer?
... tools and testing this topic covers the tools
developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side javascript frameworks.
...we are more than happy to talk to you, whether you are a learner, teacher, experienced web
developer, or someone else interested in helping to improve the learning experience.
Accessibility/LiveRegionDevGuide
this
developer's guide lays out general guidelines that assistive technology (at)
developers can use in developing live region support.
...sometimes the very best guide for some
developers is the code itself.
...it was originally intended to give web
developers a means to force a live region message to go to a separate output device.
Mozilla accessibility architecture
accessible tree contains only a subset of nodes from the dom tree not all dom nodes are exposed through accessibility api toolkits -- only those objects deemed important by the
developers of the toolkit.
...join the community live chat both end users and
developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... purpose newsgroup mailing list google group
developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Software accessibility: Where are we today?
mozilla
developers follow the general front-end accessibility requirements: there are a number of potential "gotchas" when developing xul ui.
... other
developers no matter what kind of work you do, the basis of accessibility is the need to understand that every user is different.
...see see also below for information and tools for both web and desktop application
developers.
Theme concepts
updating static themes if your static theme is hosted on amo, you can upload a new version using the
developer hub with the following steps: visit the product page for your theme through the
developer hub select "upload new version" on the left upload your packaged file for validation or modify it using the theme generator for self-hosted static themes, a new version can be updated through amo by following the above steps or be handled by you through an updateurl or external application updates.
... a new version will need to be signed through the
developer hub.
...opera takes an entirely different approach, and microsoft edge themes are not yet open to
developers.
Add-ons
add-ons allow
developers to extend and modify the functionality of firefox.
...you’ll find: overview of the firefox extension features tools and processes for developing and testing how to publish your extension on addons.mozilla.org or distribute it yourself how to manage your published extension an enterprise guide for developing and using extensions how to develop themes for firefox firefox
developer communities extensions for firefox for android in 2020, mozilla will release a new firefox for android experience.
... publishing add-ons addons.mozilla.org, commonly known as "amo," is mozilla's official site for
developers to list add-ons, and for users to discover them.
Command line options
firefox www.mozilla.com firefox www.mozilla.com
developer.mozilla.org note: when opening multiple urls, firefox always opens them as tabs in a new window.
... -devtools start with native
developer tools opened.
...this will enable another instance of firefox to connect the firefox
developer tools to this firefox instance.
Creating MozSearch plugins
example: searching mdc this plugin lets you easily search the mozilla
developer center web site.
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla
developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha...
...3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/html" method="get" template="http://
developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://
developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template url.
Debugging
fortunately, over the years, mozilla
developers have come up with not just technologies and features to help you debug code, but have devised tips and techniques that can help too.
... miscellaneous debugging safari some tips for debugging safari debugging chrome some tips for debugging chrome debugging internet explorer some tips for debugging internet explorer providing useful information to the mozilla
developers how to get a stacktrace for a bug report useful information you can provide about a crash.
...useful if a
developer can't reproduce your crash.
How to get a stacktrace with WinDbg
producing a minidump sometimes the stacktrace alone is not enough information for a
developer to figure out what went wrong.
... a
developer may ask you for a "minidump" or a "full memory dump", which are files containing more information about the process.
... you can easily produce minidumps from windbg and provide them to
developers.
PromiseWorker.jsm
worker file there is some standard templating that must be dropped into the worker file by the
developer.
...any
developer errors on the worker side, such as syntax errors, type errors, and so forth, will cause the promise to reject.
... a catch will trigger if there is a
developer error in the main thread resolve or reject callbacks.
WebRequest.jsm
the matchpattern constructor accepts: either: a string defining a single pattern or: an array of such strings cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/
developer.mozilla.org/*"); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://
developer.cdn.mozilla.net/*"]); see the match patterns article for details on the syntax of the strings you supply.
... examples basic examples this example just logs the url for every request initiated: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); webrequest.onbeforerequest.addlistener(logurl); function logurl(e) { console.log("loading: " + e.url); } filtering this example logs urls for requests under "https://
developer.mozilla.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/
developer.mozilla.org/*"); webrequest.onbeforerequest.addlistener(logurl, {urls: pattern}); function logurl(e) { console.log("loading: " + e.url); } this listener will be invoked for requests matching any of ...
...the three patterns, where the resource type is "stylesheet" or "image": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://
developer.cdn.mozilla.net/*"]); webrequest.onbeforerequest.addlistener(listener, { urls: pattern, types: ["image", "stylesheet"] }); function listener(e) { console.log("matched: " + e.url); } canceling this example cancels requests to load content from "http://example.org/": let {webrequest} = cu.impor...
Index
3 bootstrapping a new locale localization, mercurial, translate, bit bucket (see also https://
developer.mozilla.org/en/create_a_new_localization) 4 encodings for localization files internationalization, localization when creating a localization for mozilla products, it’s important to be aware of the encoding of the files that you generate.
... 9 localization content best practices apps, extensions, internationalization, localization, mozilla, l10n, l12y this document provides best practices for
developers to create localizable code, and describes how to avoid some localizability (l12y) common mistakes.
...it is aimed at mozilla and extension
developers.
Memory Profiler
firefox
developer tools now has a built-in memory profiler.
...
developers have to infer how an object might be allocated and freed by himself/herself.
...however, it still relies on
developers' wisdom, and sometimes chances, to dig out the problematical code snippet.
Power profiling overview
processors can have dozens of p-states, but the transitions are controlled by the hardware and os and so p-states are of less interest to application
developers than c-states.
...see section 14.9 of volume 3 of the intel software
developer's manual for more details about rapl.
...alternatively, here is an explanation of how one
developer diagnosed two animation-related problems the hard way (which required genuine platform expertise).
Profiling with the Firefox Profiler
in addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards web
developers, but does not include as much information as the firefox profiler web app.
... it is available from the menu at tools > web
developer > performance.
... reporting a performance problem has a step-by-step guide for obtaining a profile when requested by firefox
developers.
Python binding for NSS
it is suggested python
developers using python-nss periodically run their code with deprecation warnings enabled.
...python-nss is currently available in: fedora rhel 6 the principal
developer of python-nss is john dennis jdennis@redhat.com.
...this is primarily so the
developers can make changes to the api as experiece grows with it.
NSS Tools
nss security tools newsgroup: mozilla.dev.tech.crypto overview the nss security tools allow
developers to test, debug, and manage applications that use nss.
...for information about downloading the nss source, see https://
developer.mozilla.org/nss/building.
... currently points to the signver documentation on
developer.netscape.com.
NSS tools : signtool
for example, a commercial software
developer might sign the files that constitute a software product to prove that the files are indeed from a particular company.
... for example, if you are a software
developer, you should test your code to make sure it is virus-free before signing it.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, and sun.
Querying Places
domain name matching, text terms matching, time range...) // see : https://
developer.mozilla.org/en/nsinavhistoryquery var query = placesutils.history.getnewquery(); // options parameters (e.g.
... ordering mode and sorting mode...) // see : https://
developer.mozilla.org/en/nsinavhistoryqueryoptions var options = placesutils.history.getnewqueryoptions(); // execute the query // see : https://
developer.mozilla.org/en/nsinavhistoryservice#executequery() var result = placesutils.history.executequery(query, options); // using the results by traversing a container // see : https://
developer.mozilla.org/en/nsinavhistorycontainerresultnode var cont = result.root; cont.containeropen = true; for (var i = 0; i < cont.childcount; i ++) { var node = cont.getchild(i); // "node" attributes contains the information (e.g.
... uri, title, time, icon...) // see : https://
developer.mozilla.org/en/nsinavhistoryresultnode dump(node.title+ "\n"); } // close container when done // see : https://
developer.mozilla.org/en/nsinavhistorycontainerresultnode cont.containeropen = false; see also places query uris displaying places information using views ...
XML Extras
the xml extras module contains several features that allow
developers to treat xml as data i.e.
...the mozilla
developer center has several pages for xmlhttprequest.
...file new bugs for additional documentation contributions, either specifically aimed at javascript
developers or to complete & clarify the javadoc-style comments in the idl files.
Component Internals
« previousnext » where the previous chapter described components from the perspective of a client of xpcom components, this chapter discusses components from the perspective of the software
developer.
...of those 1300 interfaces, less than 100 were frozen, which means that a
developer is likely to stumble upon useful interfaces that aren't frozen.
...instead of asking every
developer to find and copy these various files into their own application, xpcom provides a single library of "not-ready-to-freeze-but-really-helpful" classes that you can link into your application, as the following figure demonstrates.
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="456,5,605,53" href="http://
developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="415,101,497,149" href="http://
developer.mozilla.org/en/nscstring" shape="rect" title="nscstring"> <area alt="" coords="521,101,689,149" href="http://
developer.mozilla.org/en/nsdependentcsubstring" shape="rect" title="nsdependentcsubstring"> <area alt="" coords="172,197,289,245" href="http://develope...
...r.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="315,197,437,245" href="http://
developer.mozilla.org/en/nsxpidlcstring" shape="rect" title="nsxpidlcstring"> <area alt="" coords="461,197,611,245" href="http://
developer.mozilla.org/en/nsdependentcstring" shape="rect" title="nsdependentcstring"> <area alt="" coords="635,197,787,245" href="http://
developer.mozilla.org/en/nspromiseflatcstring" shape="rect" title="nspromiseflatcstring"> <area alt="" coords="173,293,285,341" href="http://
developer.mozilla.org/en/nscautostring" shape="rect" title="nscautostring"> <area alt="" coords="5,389,227,437" href="http://
developer.mozilla.org/en/ns_lossyconvertutf16toascii" shape="rect" title="ns_lossyconvertutf16toascii"> <area alt="" coords="251,389,435,437" href="http://d...
...eveloper.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="309,293,445,341" href="http://
developer.mozilla.org/en/nsadoptingcstring" shape="rect" title="nsadoptingcstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendlite...
nsAString_internal
<map id="classes" name="classes"> <area alt="" coords="415,5,553,53" href="http://
developer.mozilla.org/en/nsastring_internal" shape="rect" title="nsastring_internal"> <area alt="" coords="379,101,451,149" href="http://
developer.mozilla.org/en/nsstring" shape="rect" title="nsstring"> <area alt="" coords="475,101,635,149" href="http://
developer.mozilla.org/en/nsdependentsubstring" shape="rect" title="nsdependentsubstring"> <area alt="" coords="151,197,257,245" href="http://
developer.mozi...
...lla.org/en/nsfixedstring" shape="rect" title="nsfixedstring"> <area alt="" coords="284,197,396,245" href="http://
developer.mozilla.org/en/nsxpidlstring" shape="rect" title="nsxpidlstring"> <area alt="" coords="420,197,559,245" href="http://
developer.mozilla.org/en/nsdependentstring" shape="rect" title="nsdependentstring"> <area alt="" coords="583,197,727,245" href="http://
developer.mozilla.org/en/nspromiseflatstring" shape="rect" title="nspromiseflatstring"> <area alt="" coords="152,293,253,341" href="http://
developer.mozilla.org/en/nsautostring" shape="rect" title="nsautostring"> <area alt="" coords="5,389,192,437" href="http://
developer.mozilla.org/en/ns_convertasciitoutf16" shape="rect" title="ns_convertasciitoutf16"> <area alt="" coords="216,389,400,437" href="http://
developer.mozilla.org/en/ns...
..._convertutf8toutf16" shape="rect" title="ns_convertutf8toutf16"> <area alt="" coords="277,293,405,341" href="http://
developer.mozilla.org/en/nsadoptingstring" shape="rect" title="nsadoptingstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(const char appendlit...
Building a Thunderbird extension 1: introduction
see
developer.thunderbird.net for newer information.
...however, most
developers use an editing program optimized for writing code (also known as an integrated development environment).
... documentation thunderbird extensions (documentation overview) firefox addons
developer guide (many topics are applicable to thunderbird) mozilla cross-reference source code browser ("comm-central" contains the thunderbird code repository) community the thunderbird development community has a mailing list with an extensive searchable archive with an extensive searchable archive.
Using the Gamepad API - Web APIs
the gamepad api is a way for
developers and designers to access and use gamepads and other game controllers.
... 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.
... timestamp: this returns a domhighrestimestamp representing the last time the data for this gamepad was updated, allowing
developers to determine if the axes and button data have been updated from the hardware.
Reporting API - Web APIs
concepts and usage there are a number of different features and problems on the web platform that generate information useful to web
developers when they are trying to fix bugs or improve their websites in other ways.
... the reporting api's purpose is to provide a consistent reporting mechanism that can be used to make such information available to
developers in the form of reports represented by javascript objects.
... reports sent to endpoints can be retrieved independently of the running of the websites they relate to, which is useful — a crash for example could bring down a web site and stop anything running, but a report could still be obtained to give the
developer some clues as to why it happened.
Using the Resource Timing API - Web APIs
resource timing properties an application
developer can use the property values to calculate the length of time a phase takes and that information can help diagnose performance issues.
...to help the
developer manage the buffer size, resource timing defines two methods that extend the performance interface.
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); set_resource_timing_buffer_size(200); } function init() { // load some image to trigger "resource" fetch events var image1 = new image(); image1.src = "https://
developer.mozilla.org/static/img/opengraph-logo.png"; var image2 = new image(); image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg" // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } coping with cors when cors is in effect, many of the timing properties' values are returned as zero unless the se...
Using Service Workers - Web APIs
note: as of firefox 44, when appcache is used to provide offline support for a page a warning message is now displayed in the console advising
developers to use service workers instead (bug 1204581.) service workers should finally fix these issues.
... self.addeventlistener('activate', (event) => { var cachekeeplist = ['v2']; event.waituntil( caches.keys().then((keylist) => { return promise.all(keylist.map((key) => { if (cachekeeplist.indexof(key) === -1) { return caches.delete(key); } })); }) ); });
developer tools chrome has chrome://inspect/#service-workers, which shows current service worker activity and storage on a device, and chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process.
... when testing you can get around the https restriction by checking the "enable service workers over http (when toolbox is open)" option in the firefox
developer tools settings.
Lifetime of a WebRTC session - Web APIs
for
developers trying to do peer-to-peer networking, this introduces a conundrum: without a unique identifier for every user device, it’s not possible to instantly and automatically know how to connect to a specific device on the internet.
...the answer is simple: since the two devices have no way to directly contact each other, and the specification can’t predict every possible use case for webrtc, it makes more sense to let the
developer select an appropriate networking technology and messaging protocol.
... in particular, if a
developer already has a method in place for connecting two devices, it doesn’t make sense for them to have to use another one, defined by the specification, just for webrtc.
Fundamentals of WebXR - Web APIs
as browser
developers built support for webvr and allowed
developers to experiment, it became clear that in order to finish an api for virtual environments on the web, it would make more sense to start a new specification than to try to "fix" webvr.
... important health and safety reminders because the entire act of creating a virtual 3d world is, in essence, a trick which takes advantage of our understanding of how eyes collect light and how the brain interprets the collected data, it is important to keep in mind that as such, software designers and
developers have a responsibility to be even more careful than usual to ensure that the results are correct.
... a-frame (specifically designed for creating webxr-based apps) babylon.js three.js game toolkits the game toolkits are designed for game
developers and often include gaming-specific features such as physics models, input control systems, asset management, 3d sound playback, and the like.
Geometry and reference spaces in WebXR - Web APIs
from the perspective of an xr
developer, designing the stage is the part that matters most to your users.
... reference spaces because of the variety of xr hardware available, coming in a wide variety of form factors from many
developers, it's impractical and non-scalable to expect
developers to have to directly communicate with the tracking technology being used.
... instead, the webxr device api is designed to have
developers plan their users' experiences and request an appropriate reference space that best represents those needs.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://
developer.mozilla.org/" target="_blank">mozilla
developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span> ]</p> <div id="info"> vivamus blandit massa ut metus mattis in fringil...
...|*| |*| /docs/web/api/window.setinterval |*| https://
developer.mozilla.org/user:fusionchess |*| |*| syntax: |*| var timeoutid = window.settimeout(func, delay[, arg1, arg2, ...]); |*| var timeoutid = window.settimeout(code, delay); |*| var intervalid = window.setinterval(func, delay[, arg1, arg2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ if (document.all && !window.settimeout.ispolyfill) { var __nativest__ = window.settimeou...
... minidaemon.js /*\ |*| |*| :: minidaemon :: |*| |*| revision #2 - september 26, 2014 |*| |*| /docs/web/api/window.setinterval |*| https://
developer.mozilla.org/user:fusionchess |*| https://github.com/madmurphy/minidaemon.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later.
Web applications and ARIA FAQ - Accessibility
unfortunately, there isn't a more semantic tag available to
developers in html 4, so we need to include aria roles and properties.
...aria includes many roles, states, and properties that aren't available in html5, so these will continue to be useful to
developers who use html5.
... free-aria google group -- for
developers and users of free tools and resources.
ARIA - Accessibility
many of these widgets were later incorporated into html5, and
developers should prefer using the correct semantic html element over using aria, if such an element exists.
...unfortunately, there isn't a more semantic tag available to
developers in html 4, so we need to include aria roles and properties.
... using aria a practical guide for
developers.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
practical tips for
developers and how mozilla does it contents this document is for
developers working to support msaa in an application in order to make it accessible with 3rd party assistive technologies, as well as for hackers wishing to be involved in mozilla's msaa support specifically.
...zoomtext and dragon can get by with your msaa support., and jaws can be scripted (even by external
developers) to support alternative interfaces.
... deciding which msaa features to support msaa methods - cheat sheet for
developers the iaccessible interface is used in a tree of iaccessible's, each one representing a data node, similar to a dom.
Web Accessibility: Understanding Colors and Luminance - Accessibility
currently, the rgb color space predominates as the space web
developers work in.
... the implication is that web
developers who seek to improve legibility of text against a background can take advantage of the principles of local adaptation.
... the implication is that web
developers who seek to improve legibility of text in which the ambient conditions of a room have changed can take advantage of css media queries 5 environment media features, when these features become available.
Accessibility
keyboard-navigable javascript widgets until now, web
developers who want to make their styled <div> and <span> based widgets accessible have lacked the proper techniques.
... keyboard accessibility is part of the minimum accessibility requirements which a
developer should be aware of.
... assistive technology (at) development a collection of articles intended for at
developers mobile accessibility checklist this document provides a concise checklist of accessibility requirements for mobile app
developers.
<input type="hidden"> - HTML: Hypertext Markup Language
<input> elements of type hidden let web
developers include data that cannot be seen or modified by users when a form is submitted.
...this specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser
developer tools.
... important: while the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any browser's
developer tools or "view source" functionality.
Microformats - HTML: Hypertext Markup Language
developer</a> on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> june 2013</time></p> <p class="p-summary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> properties property description p-name entry name/title p-author who wrote the entry, optionally embe...
...ttps://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a></span> replied to <a class="u-in-reply-to" href="/docs/web/html/microformats">a post on <strong>
developer.mozilla.org</strong> </a>: </p> <p class="p-name e-content">hey thanks for making this microformats resource</p> <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a> published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" datetime="...
...
developer</a> on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> june 2013</time> </p> <p class="p-summary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> </div> properties property description p-name name of the feed p-author author of the feed, optionally...
Cross-Origin Resource Sharing (CORS) - HTTP
more specifically, this article is for web administrators, server
developers, and front-end
developers.
...another article for server
developers discussing cross-origin sharing from a server perspective (with php code snippets) is supplementary reading.
...
developers using cross-site xmlhttprequest capability do not have to set any cross-origin sharing request headers programmatically.
Index - HTTP
it allows web
developers to have more control over the data stored locally by a browser for their origins.
... 52 content-security-policy-report-only csp, http, https, reference, security, header the http content-security-policy-report-only response header allows web
developers to experiment with policies by monitoring (but not enforcing) their effects.
...database read/write, cpu time, file system access, etc.) in the
developer tools in the user's browser or in the performanceservertiming interface.
HTTP
cors allows web
developers to control how their site reacts to cross-site requests.
... firefox
developer tools network monitor mozilla observatory a project designed to help
developers, system administrators, and security professionals configure their sites safely and securely.
...a must-read for any web
developer.
Strict mode - JavaScript
javascript was designed to be easy for novice
developers, and sometimes it gives operations which should be errors non-error semantics.
...in normal code assigning to nan does nothing; the
developer receives no failure feedback.
... var a = 0o10; // es2015: octal novice
developers sometimes believe a leading zero prefix has no semantic meaning, so they use it as an alignment device — but this changes the number's meaning!
CSS and JavaScript animation performance - Web Performance
css animations, on the other hand, allow
developers to make animations between a set of starting property values and a final set rather than between two states.
...
developers can create an animation by simply changing an element's style each time the loop is called (or updating the canvas draw, or whatever.) note: like css transitions and animations, requestanimationframe() pauses when the current tab is pushed into the background.
... note: in nightly/
developer edition, you should see that omta is enabled by default, so you might have to do the tests the other way around (test with it enabled first, then disable to test without omta.) summary browsers are able to optimize rendering flows.
Understanding latency - Web Performance
network throttling to emulate the latency of a low bandwidth network, you can use
developer tools and switch to a lower end network connection.
... in the
developer tools, under the network table, you can switch the throttling option to 2g, 3g, etc.
... different browser
developer tools have different preset options, the characteristics emulated include download speed, upload speed, and minimum latency, or the minimum amount of type it takes to send a packet of data.
Working with Events - Archive of obsolete content
the listener loads https://
developer.mozilla.org/: require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").open("https://
developer.mozilla.org/"); } }); this is exactly equivalent to constructing the button and then calling the button's on() method: var button = require("sdk/ui/button/action").actionbutton({ id: "...
...visit-mozilla", label: "visit mozilla", icon: "./icon-16.png" }); button.on("click", function() { require("sdk/tabs").open("https://
developer.mozilla.org/"); }); removing event listeners event listeners can be removed by calling removelistener(type, listener), supplying the type of event and the listener to remove.
XUL Migration Guide - Archive of obsolete content
using third party packages the sdk is extensible by design:
developers can create new modules filling gaps in the sdk, and package them for distribution and reuse.
... add-on
developers can install these packages and use the new modules.
page-mod - Archive of obsolete content
var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: /.*
developer.*/, contentscript: 'window.alert("matched!");' }); to specify multiple patterns, pass an array of match patterns: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: ["*.foo.org", "*.bar.com"], contentscript: 'window.alert("matched!");' }); see the match-pattern module for a detailed description of match pattern syntax.
... these match-patterns define the documents to which the page-mod will not be applied, even if their urls match the include option: var pagemod = require("sdk/page-mod"); var modscript = 'console.log("matches");'; pagemod.pagemod({ include: "*.mozilla.org", exclude: "*.
developer.mozilla.org", contentscript: modscript }); var tabs = require("sdk/tabs"); tabs.open("mozilla.org"); // matches tabs.open("addons.mozilla.org"); // matches tabs.open("
developer.mozilla.org"); // no match pagemod a page-mod object.
test/httpd - Archive of obsolete content
you can serve static content or use sjs scripts, as described in documentation on
developer.mozilla.org.
... you can also use nshttpserver to start the server manually: var { nshttpserver } = require("sdk/test/httpd"); var srv = new nshttpserver(); // further documentation on
developer.mozilla.org see http server for unit tests for general information.
Creating Reusable Modules - Archive of obsolete content
once you've done this, you can package the modules and distribute them independently of your add-on, making them available to other add-on
developers and effectively extending the sdk itself.
...module
developers can publish sdk modules to npm, and add-on
developers can install them from npm and build them into their add-ons.
Preferences - Archive of obsolete content
this article provides examples for extension
developers that wish to use the mozilla preferences system.
...however, there is a concept of complex types, which makes it easier for
developers to save and load nsilocalfile and nsisupportsstring objects in preferences (as strings — note that from the preferences system's point of view, complex values have a nsiprefbranch.pref_string type.) there are two nsiprefbranch methods implementing the concept — setcomplexvalue() and getcomplexvalue().
Getting Started with Firefox Extensions - Archive of obsolete content
firefox provides a very rich and flexible architecture that allows extension
developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser.
...unsigned add-ons can still be installed in
developer edition, nightly, and esr versions of firefox, after toggling the xpinstall.signatures.required preference in about:config.
Useful Mozilla Community Sites - Archive of obsolete content
developers submit their extensions using the web translation system (wts) and volunteers around the world translate them to different languages.
...hopefully this guide has helped you get started with add-on development and you're on your way to joining the large mozilla add-ons
developer community.
Creating a status bar extension - Archive of obsolete content
some of the samples in this series may be similar to samples you've seen elsewhere, but the goal of this series of articles is to help compile information for new extension
developers into one place to make it easy to jump in and get started.
...://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>status-bar-sample-1@example.com</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar panel</em:description> <em:creator>my name</em:creator> <em:homepageurl>http://
developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> let's take ...
Install.js - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
MMgc - Archive of obsolete content
this is a lot to ask from our c++
developers, so instead, mmgc assumes that every memory location might potentially contain a gc pointer.
...this would mean that
developers would only have to take into account #2 really when writing new code.
No Proxy For configuration - Archive of obsolete content
audience mozilla users, mozilla
developers, mozilla testers.
... 127.0.0.1 proxy ports 1 127.0.0.1 proxy no port .mozilla.org www.mozilla.org:80 www.mozilla.org:81 direct direct port number .mozilla.org:80 www.mozilla.org:80 www.mozilla.org direct direct :81 www.mozilla.org:81 proxy
developer notes the no_proxy for logic is written in c++.
FAQ - Archive of obsolete content
when the mozilla
developers make changes like this, they increase the skin version number.
...
developers try to keep changes like this to a minimum, but sometimes it just can't be helped.
DTrace - Archive of obsolete content
dtrace is sun microsystem's dynamic tracing framework that allows
developers to instrument a program with probes that have little to no effect on performance when not in use and very little when active.
... dtrace for web
developers how to use dtrace to profile your web application.
Java in Firefox Extensions - Archive of obsolete content
var aclass = java.lang.class.forname("org.mozilla.
developer.helloworld", true, cl); var astaticmethod = aclass.getmethod("getgreeting", []); var greeting = astaticmethod.invoke(null, []); alert(greeting); another, perhaps simpler approach is as follows: var myclass = loader.loadclass('com.example.myclass'); // use the same loader from above var myobj = myclass.newinstance(); var binval = myobj.mymethod(arg1, arg2); // pass whatever arguments you need (t...
...i've also experienced crashes in referencing the 'java' global within the xul editor of the extension
developer's extension which seems to point to some stability problem.
Menu - Archive of obsolete content
xulid string the id of the menuitem's backing xul element, exposed for the benefit of advanced
developers.
...(ok, slightly less.) this is only a recommended practice;
developers are of course free to do as they wish.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
javascript console evaluating mozilla's javascript engine has built-in support for debugging, and thus can provide powerful tools for javascript
developers.
... original document information author(s): doron rosenberg, ibm corporation published: 26 jul 2005 link: http://www.ibm.com/
developerworks/we...y/wa-ie2mozgd/ ...
Plug-n-Hack - Archive of obsolete content
this can include application
developers and testers, exactly the sort of people we would like to use these tools more!
...implementing the above features in firefox and the tools that we work on and support gives our team an advantage, however we believe that opening up such capabilities to all browsers and all security tools is much more useful for security researchers and application
developers and testers.
Remotely debugging Firefox for Metro - Archive of obsolete content
this article explains how to use remote debugging to inspect and code running in the new windows 8 ("metro-style") firefox app, using the
developer tools in firefox on the desktop.
... connecting on the desktop on the desktop, open the web
developer menu and select "connect...".
[Deprecated] The Mozilla build VM - Archive of obsolete content
other links of interest may include:
developer guide (documentation about developing on and for mozilla projects).
... you can also ask your getting-started questions in the introduction chat room on matrix, and any firefox development questions in the
developers room.
Methods - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
File Object - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
InstallVersion Object - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
Methods - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
Properties - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
Install Object - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
Methods - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
Methods - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
XPInstall API reference - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
XPInstall - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
SVG And Canvas In Mozilla - Archive of obsolete content
presentation view online download summary today's web browsers offer somewhat limited graphics capabilities to web
developers.
...this work provides additional benefits to web
developers such as the ability to apply svg effects to html content.
XTech 2005 Presentations - Archive of obsolete content
rich web: svg and canvas in mozilla - robert o'callahan today's web browsers offer somewhat limited graphics capabilities to web
developers.
...this work provides additional benefits to web
developers such as the ability to apply svg effects to html content.
Complete - Archive of obsolete content
to make it eaiser to support different locales,
developers usually place anything that might depend on the locale in separate files in a separate directory.
... classic for seamonkey modern for seamonkey to make it easier to support different themes,
developers place anything that might depend on the theme in separate files in a separate directory.
Custom toolbar button - Archive of obsolete content
the new file: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://
developer.mozilla.org/en/docs/custom_toolbar_button" em:iconurl="chrome://custombutton/content/icon.png" > <em:targetapplication><!-- firefox --> <description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minversion="1.4" em:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{3550f703-e5...
... to open the javascript console, choose tools – web
developer- browser console, and enable js.
Creating an Installer - Archive of obsolete content
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
Trees - Archive of obsolete content
this is an important point and many xul
developers have trouble understanding this aspect.
... that the treeitems are unlike other xul elements is a common source of confusion for xul
developers.
Debugging a XULRunner Application - Archive of obsolete content
debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = true; } let dbglistener=debuggerserver.createlistener(); dbglistener.portorpath=6000; dbglistener.open(); add the following to your prefs.js: (in recent ffox, edit about:config instead) pref("devtools.debugger.remote-enabled", true); in firefox, go to tools > web
developer > connect...
... note the "new in firefox 3" attribute "contentaccessible" on https://
developer.mozilla.org/en/chrome_registration so as per http://markmail.org/message/ezbomhkw3bgqjllv#query:x-jsd+page:1+mid:xvlr7odilbyhn6v7+state:results change the manifest to have this line: content venkman jar:venkman.jar!/content/venkman/ contentaccessible=yes i get errors about not being able to open contentareautils.js, contentareadd.js, findutils.js, or contentareautils.js...
XULRunner FAQ - Archive of obsolete content
in the future there will be a xulrunner
developer kit which will contain various development tools.
...this is a
developer preview release: additional features for installing and deploying xulrunner and applications based on xulrunner will be available in future releases.
XULRunner tips - Archive of obsolete content
extension manager chrome://mozapps/content/extensions/extensions.xul?type=extensions extension:manager-extensions theme manager chrome://mozapps/content/extensions/extensions.xul?type=themes extension:manager-themes javascript console chrome://global/content/console.xul global:console about:config chrome://global/content/config.xul
developer extensions venkman need a custom build or a compatible extension need to edit compatibility in needs a method to start venkman (usually by overlaying the main xul file, similar to existing code for firefox, suite, etc.) the function toopenwindowbytype() needs to be defined.
... extension
developer's extension extension
developer's extension is a useful tool, featuring live xul editor and javascript shell.
xbDesignMode.js - Archive of obsolete content
* * the initial
developer of the original code is * netscape communications corporation.
... * portions created by the initial
developer are copyright (c) 2003 * the initial
developer.
Gecko Compatibility Handbook - Archive of obsolete content
this is unfortunate since the html validator is one of the primary vehicles web
developers have for learning about the standards.
... report mozilla browser bugs or web site compatibility problems mozilla web
developer community references using web standards in your web pages browser detection and cross browser support updating dhtml web pages html element cross reference dom client object cross-reference introduction to cross-browser javascript and dynamic html gecko user agent strings
developer tools mozilla's doctype sniffing the main page links to many more resources.
2006-09-29 - Archive of obsolete content
he is also asking if there are
developers out there who know the tb core and are willing to help him out.
... discussions
developer documentation issues for thunderbird 2 eric shepherd has requested feedback for any
developer documentation issues that might need dealing with for thunderbird 2.
2006-10-06 - Archive of obsolete content
a: robert helmer pointed out the mozilla.org's config file could be found here and to look for -->mozconfig<---------------------------------------- -->end mozconfig<---------------------------------------- updated:
developer documentation issues for thunderbird 2 eric shepherd has requested feedback for any
developer documentation issues that might need dealing with for thunderbird 2.
... discussion highlights: ziga sancin suggests writing an introductory article for potential
developers containing basic project information (history, list of main
developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one get started on the project.
Extentsions FAQ - Archive of obsolete content
read http://
developer.mozilla.org/en/docs/extension_faq and check if there are any errors in js console.
... http://
developer.mozilla.org/en/docs...pcom_component would anyone be able to suggest the best way to do source level debugging in a firefox extension?
2006-11-17 - Archive of obsolete content
going to fosdem 2007 fosdem 2007 (free and open source software
developers' european meeting), february 24th - 25th.
... mozilla
developers will be having a room, and everyone is invited.
2006-09-29 - Archive of obsolete content
which
developer(s) has/have the correct expertise for a particular bug report).
... he has a working web-based tool called sibyl for providing both
developer and component recommendations for bug reports.
Monitoring plugins - Archive of obsolete content
this article discusses how
developers can make use of this new feature.
... below are a number of javascript snippets that would be useful to
developers trying to use this feature: registration to register for runtime notifications with the observer service you must create a class with an observe method which receives 3 parameters (subject, topic and data) as well as a register method that contains the following code: var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice (components.
NPEvent - Archive of obsolete content
microsoft windows the data structure has the following fields: event one of the following event types: wm_paint wm_lbuttondown wm_lbuttonup wm_lbuttondblclk wm_rbuttondown wm_rbuttonup wm_rbuttondblclk wm_mbuttondown wm_mbuttonup wm_mbuttondblclk wm_mousemove wm_keyup wm_keydown wm_setcursor wm_setfocus wm_killfocus for information about these events, see the microsoft windows
developer documentation.
...values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for information about these events, see the mac os
developer documentation.
Adobe Flash - Archive of obsolete content
with fscommands,
developers may choose to use macromedia's actionscript language to make a call back into the environment that contains the flash animation -- in this case, the html page.
... see also macromedia flash
developer documentation scripting the flash player plugin communication between javascript and macromedia flash fscommands (definition from the actionscript dictonary) actionscript dictionary mdc resources using the right markup to invoke plugins plugin central notable bugs bug 184722 bug 180378 bug 203861 ...
Plugins - Archive of obsolete content
mozilla encourages website
developers to avoid using plugins wherever possible and use standard web apis instead.
... if there are plugin features which are not available in the web platform, we encourage
developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize web platform work to make those use cases possible.
Building a Theme - Archive of obsolete content
rather than load the browser from disk using a file:// uri (since the location of firefox on the system can change from platform to platform and system to system), mozilla
developers came up with a solution for creating uris to content that the installed add-on knows about.
... visit https://addons.mozilla.org/
developers/ to create an account and begin distributing your themes!
Archive of obsolete content
element events archived event pages firefox
developer tools these are articles related to the firefox
developer tools, which are no longer current.
... web standards the web standards project windows media in netscape netscape 7.1 has the ability to load the microsoft® windows media player™ as an activex control, and thus
developers can now build multimedia experiences that script the windows media player in netscape 7.1, just as they do in internet explorer.
Index - Game development
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.
... 17 building up a basic demo with babylon.js 3d game engines, babylon.js, beginner, webgl babylon.js is one of the most popular 3d game engines used by
developers.
Introduction to game development for the Web - Game development
graphics webgl (opengl es 2.0) input touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game
developer, whether you're an individual or a large game studio, you want to know why it makes sense to target the web with your next game project.
... web technologies for game
developers for the tech folks, let's dig into the apis the web brings to the table that cater to game
developers.
3D games on the Web - Game development
there's an ongoing effort on releasing webgl 2.0 (based on opengl es 3.0) in the near future, which will bring many improvements and will help
developers build games for the modern web using current, powerful hardware.
... building up a basic demo with babylon.js babylon.js is one of the most popular 3d game engines used by
developers.
Game development
in this area of the site, we provide resources for web
developers wanting to develop games.
... port native games to the web if you are a native
developer (for example writing games in c++), and you are interested in how you can port your games over to the web, you should learn more about our emscripten tool — this is an llvm to javascript compiler, which takes llvm bytecode (e.g.
API - MDN Web Docs Glossary: Definitions of Web-related terms
methods, properties, events, and urls) that a
developer can use in their apps for interacting with components of a user's web browser, or other software/hardware on the user's computer, or third party websites and services.
... for example: the getusermedia api can be used to grab audio and video from a user's webcam, which can then be used in any way the
developer likes, for example, recording video and audio, broadcasting it to another user in a conference call, or capturing image stills from the video.
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
javascript is primarily used in the browser, enabling
developers to manipulate webpage content through the dom, manipulate data with ajax and indexeddb, draw graphics with canvas, interact with the device running the browser through various apis, and more.
...node.js - built using chrome's v8 javascript engine - allows
developers to use javascript as a scripting language to automate things on a computer and build fully functional http and web sockets servers.
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
a few request headers after a get request: get /home.html http/1.1 host:
developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://
developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt ...
...if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, but an entity header: post /myform.html http/1.1 host:
developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...
TLD - MDN Web Docs Glossary: Definitions of Web-related terms
a tld is the final component of a domain name, for example, "org" in
developer.mozilla.org.
... consider an example internet address: https://
developer.mozilla.org here org is the tld; mozilla.org is the second-level domain name; and
developer is a subdomain name.
HTML: A good basis for accessibility - Learn web development
<h1>links</h1> <p>this is a link to <a href="https://www.mozilla.org">mozilla</a>.</p> <p>another link, to the <a href="https://
developer.mozilla.org">mozilla
developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">click me!</button> <button data-message="this is from the second button">click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form</h2> <form> <div> <label for="name">fill in your name:</label> <input type="t...
... note: aria-labelledby is part of the wai-aria spec, which allows
developers to add in extra semantics to their markup to improve screen reader accessibility where needed.
HTML: A good basis for accessibility - Learn web development
<h1>links</h1> <p>this is a link to <a href="https://www.mozilla.org">mozilla</a>.</p> <p>another link, to the <a href="https://
developer.mozilla.org">mozilla
developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">click me!</button> <button data-message="this is from the second button">click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form</h2> <form> <div> <label for="name">fill in your name:</label> <input type="t...
... note: aria-labelledby is part of the wai-aria spec, which allows
developers to add in extra semantics to their markup to improve screen reader accessibility where needed.
WAI-ARIA basics - Learn web development
for example, html5 introduced a number of semantic elements to define common page features (<nav>, <footer>, etc.) before these were available,
developers would simply use <div>s with ids or classes, e.g.
...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.
Accessibility - Learn web development
learning some html, css, and javascript is useful if you want to become a web
developer.
...the following video provides a nice introduction to it: looking to become a front-end web
developer?
Advanced styling effects - Learn web development
this is not an official standard, but has been implemented across multiple browsers, as it is popular, and used fairly widely by
developers.
...mainly for browser compatibility — so many web
developers have started implementing websites with -webkit- prefixes that it started to look like the other browsers were broken, whereas in actual fact they were following the standards.
Debugging CSS - Learn web development
how to access browser devtools the article what are browser
developer tools is an up-to-date guide explaining how to access the tools in various browsers and platforms.
...a more experienced
developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.
Images, media, and form elements - Learn web development
html5 also contains attributes that enable web
developers to indicate which fields are required, and even the type of content that needs to be entered.
...this includes all the items mentioned in the last three sections: button, input, select, textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; } textarea { overflow: auto; } note: normalizing stylesheets are used by many
developers to create a set of baseline styles to use on all projects.
The box model - Learn web development
.box { box-sizing: border-box; } if you want all of your elements to use the alternative box model, and this is a common choice among
developers, set the box-sizing property on the <html> element, then set all other elements to inherit that value, as seen in the snippet below.
... use browser devtools to view the box model your browser
developer tools can make understanding the box model far easier.
Floats - Learn web development
the background of floats the float property was introduced to allow web
developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it.
... but web
developers quickly realized that you can float anything, not just images, so the use of float broadened, for example to fun layout effects such as drop-caps.
CSS FAQ - Learn web development
in this article, you'll find some frequently-asked questions (faqs) about css, along with answers that may help you on your quest to become a web
developer.
...for example, many
developers only using the -webkit- prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature relying on that property would break in non-webkit-based browsers, completely needlessly.
How do you make sure your website works properly? - Learn web development
open firefox's network tool (tools ➤ web
developer ➤ network) and reload the page: there's the problem, that "404" at the bottom.
... open the console (tools ➤ web
developer ➤ web console) and reload the page: in this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover javascript in another series of articles).
How do I start to design my website? - Learn web development
all of this is called project ideation and is a necessary first step to reach your goal, whether you are a beginner or an experienced
developer.
...musicians will never make any music unless they first have an idea of what they want to play—and the same is true for painters, writers, and web
developers.
Common questions - Learn web development
what are browser
developer tools?
... this set of articles shows you how to use the
developer tools in firefox to debug and improve performance of your website, using the tools to check memory usage, the javascript call tree, the number of dom nodes being rendered, and more.
The HTML5 input types - Learn web development
because html form control appearance may be quite different from a designer's specifications, web
developers sometimes build their own custom form controls.
... date and time pickers gathering date and time values has traditionally been a nightmare for web
developers.
Debugging HTML - Learn web development
to do this, we can use the browser
developer tools.
... if you are not familiar with how to use your browser's
developer tools, take a few minutes to review discover browser
developer tools.
Video and audio content - Learn web development
video and audio on the web web
developers have wanted to use video and audio on the web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) in the early days, native web technologies such as html didn't have the ability to embed video and audio on the web, so proprietary (or plugin-based) technologies like flash (an...
...due to these legal and preferential reasons, web
developers find themselves having to support multiple formats to capture their entire audience.
Client-side storage - Learn web development
open the javascript console of your browser's
developer tools.
...we've given it the name notes, and also specified an autoincrement key field called id — in each new record this will automatically be given an incremented value — the
developer doesn't need to set this explicitly.
The business case for web performance - Learn web development
definining and promoting a budget helps performance proponent advocates for good user experience against competing interests, such as marketing, sales, or even other
developers that may want to add videos, 3rd party scripts, or even frameworks.
... performance budgets help
developer teams protect optimal performane for users while enabling the business to tap into new markets and deliver custom experiences.
Learning area release notes - Learn web development
june 2020 our front-end web
developer learning pathway is officially launched!
...also see our hacks post — introducing the mdn web docs front-end
developer learning pathway — for more information about the rationale behind it.
Working with Svelte stores - Learn web development
this is a perfect example of how svelte puts the compiler in charge of better
developer ergonomics, not only saving us from typing boiler plate, but also generating less error-prone code.
... go back to your app, try adding some todos, then go your
developer tools web console.
Introducing a complete toolchain - Learn web development
git is currently the most popular source code revision control tool available to
developers — revision control provides many advantages, such as a way to backup your work in a remote place, and a mechanism to work in a team on the same project without fear of overwriting each other's code.
... finally, it can help you undo changes or revert your code back to a time "when it was working" if a mistake has been introduced somewhere and you are having trouble fixing it — something all
developers need to do once in a while!
Accessibility Features in Firefox
the mozilla firefox community welcomes bug reports, ideas, documentation, answering questions in the support forums -- and nearly any kind of community involvement resulting in a browser built for a broader audience of users and
developers.
...
developers, please see our dhtml accessibility documentation and get involved in writing tools and websites using this new technology.
Information for users
llent access firefox website, you will find many valuable resources, including a list of firefox themes that have been specially designed for those with low vision: themes with high color constrast themes with big icons themes with extra large and bright icons themes with extra large and extra bold text join the mozilla accessibility community live chat both end users and
developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... purpose newsgroup mailing list google group
developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Mozilla’s UAAG evaluation report
developers interested in this problem can look at the getalternatetext() method -- see the cvs history for suggestions.
...(p1) g menus indicate accesskey and accelerator configurations accelerators not show in button tooltips no centralized key bindings informational resource for end-users, only
developer documentation 11.2 current author bindings.
Android-specific test suites
see https://
developer.android.com/training/testing/unit-testing/local-unit-tests.html for more details.
... see https://
developer.android.com/studio/write/lint.html and http://tools.android.com/tips/lint for more details.
Benchmarking
in particular, "gc poisoning" is used in all debug builds, and in optimized nightly builds (but not opt
developer edition or beta builds).
... another option that is on by default in non-release builds is the preference javascript.options.asyncstack, which provides better debugging information to
developers.
What to do and what not to do in Bugzilla
verifying wontfix or invalid bugs is relatively easy if a
developer or a trusted qa person has wontfixed or invalidated them.
...these fields are reserved for the
developers.
Creating JavaScript callbacks in components
remember (or discover) that addeventlistener is a method of the nsidomeventtarget interface and is defined as such: void addeventlistener(in domstring type, in nsidomeventlistener listener, in boolean usecapture); however, it is extremely common to see
developers pass a normal javascript function for the listener instead of an nsidomeventlistener implementation: function doload(event) { // do something here } window.addeventlistener("load", doload, false); revealing the magic how is this possible?
...using javascript functions as callback handlers for components can be a nice convenience to
developers and there is virtually zero work to expose the feature.
Configuring Build Options
if you want to use the build regularly, you will want a release build without extra debugging information; if you are a
developer who wants to hack the source code, you probably want a non-optimized build with extra debugging macros.
...
developers should generally not use this option.
Creating Custom Events That Can Pass Data
example tbp note for extension
developers in order for your event to work the way it is described here it must be derived from nsdomevent.
... the problem that extension
developers will hit is that you are not allowed derive from nsdomevent in an extension.
Eclipse CDT Manual Setup
these requirements aren't a very good fit with the typical mozilla
developer's wish to minimize build times, implying parallelized, silenced builds.
...it will take 10 minutes or so on a decent
developer machine for a full rebuild of the index.
mach
mach (german for to make) is a program via the "command-line interface" to help
developers perform installation tasks such as installing firefox from its c++ source code.
... you should use mach because it provides a better and more unified
developer experience for working on mozilla projects.
Getting Started with Chat
channels here is a list of channels you should be aware of as a member of the mozilla community: (remember to use irc.mozilla.org and port 6697 or 6667 for your server settings) #qa a channel for qa discussion #
developers a channel for mozilla development discussion #sumo a channel for support with firefox for more information about the mozilla irc network and more channels, go here.
...for instance, firebot automatically posts messages to #
developers about the status of automated tests.
How to Report a Hung Firefox
note: this article is intended for
developers and technically-knowledgeable users.
... instead of crashing firefox, more advanced
developers who know how to use a debugger can try attaching to the firefox process and debugging in place.
Extending a Protocol
once it's compiled, ./mach run and you should be able to spin up the
developer console and type: navigator.echo("hi!"); that will return a pending promise that never settles.
... trying it out in the
developer console, you should now be able to do: navigator.echo("this is a test").then(console.log); if you see "this is a test", then all has gone well.
Addon
developers read only addonauthor[] an array of strings holding the
developers of the add-on.
... fulldescription read only string
developercomments read only string eula read only string icon64url read only string supporturl read only string contributionurl read only string contributionamount read only string averagerating read only number reviewcount read only integer reviewurl read only ...
JNI.jsm
; var geckoappshell = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.geckoappshell), { static_methods: [ { name: 'getcontext', sig: '()' + sig.context }] }); var context = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.context), { methods: [ { /* http://
developer.android.com/reference/android/content/context.html#getsystemservice%28java.lang.class%3ct%3e%29 * public abstract object getsystemservice (string name) */ name: 'getsystemservice', sig: genmethodsig([ sig.string // name ], sig.object // return ) ...
... }], static_fields: [ { name: 'window_service', sig: sig.string } // http://
developer.android.com/reference/android/content/context.html#window_service // public static final string window_service ] }); var windowmanager = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.windowmanager), { methods: [ { name: 'addview', sig: '(' + sig.view + sig.viewgroup_layoutparams + ')' + sig.void }, { name: 'removeview', sig: '(' + sig.view + ')' + sig.void }] }); var acontext = geckoappshell.getcontext(); var wm = acontext.getsystemservice(contex...
OSFile.jsm
one thing that all
developers need to remember is that the duration of a file i/o operation is unbounded.
... consequently, one of the key design choices of os.file is to provide operations that are low-level enough that they do not hide any i/o from the
developer (which could cause the
developer to perform more i/o than they think) and, since not all platforms have the same features, offer system-specific information that the
developer can use to optimize his algorithms for a platform.
Examples
omise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var mysubpromises = []; var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://
developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('succesfully loaded image at path = "' + path + '" the width of this image is = "' + t...
...change this line: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://
developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; change it to: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://
developer.cdn.mozilla.net/media/redesign/img/favicon32.png', 'blah blah']; i added 'blah blah' to that array, it will cuase the whole promise to reject.
JavaScript code modules
mozilla labs js modules this page features a list of javascript modules, along with download links and documentation, that extension
developers can use in their code.
... source-editor.jsm the source editor is used by
developer tools such as, the style editor; this interface implements the editor and lets you interact with it.
Bootstrapping a new locale
(see also https://
developer.mozilla.org/en/create_a_new_localization) the documentation here is no longer being maintained and is inaccurate.
... (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (~/ab-cd/browser/chrome/browser) $ edit ab-cd/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the
developers or l10n-drivers.
Localizing extension descriptions
localizing before gecko 1.9 before gecko 1.9, add-on
developers must go through a special process to define localized add-on descriptions for add-ons targeting toolkit-based apps (such as firefox or thunderbird).
..._localized_contributor_name extensions.extension_id.contributor.3=thrid_localized_contributor_name pref("extensions.extension_id.contributor.1", "path_to_localization_file"); pref("extensions.extension_id.contributor.2", "path_to_localization_file"); pref("extensions.extension_id.contributor.3", "path_to_localization_file"); the following add-on metadata can be localized using this process:
developer translator contributor ...
Localizing without a specialized tool
this string can easily be found in the browser ui by visiting a website that provides a search plugin (like http://
developer.mozilla.org/) and clicking on the drop-down arrow in the search box in the upper-right corner of your browser.
... (read more about tools at l10n:tools.) after you have downloaded your editor of choice, type the following command in the same path from above (l10n-mozilla-1.9.2/x-testing/browser/chrome/browser) $ edit l10n-mozilla-1.9.2/x-testing/browser/chrome/browser/aboutcerterror.dtd read the top of the file to get any context on how to translate contained in the notes written by the
developers or l10n-drivers.
Writing localizable code
it is aimed at mozilla and extension
developers.
... about localizers a few notes about localizers for
developers who rarely deal with them: localizers like tools, and they don't like editors, localization tools are often based on key-value pairs, at least some localizers have their talents focused on language skills and are not savvy in programming, or even building applications.
Mozilla Development Strategies
this article offers some strategies and suggestions to help
developers stay productive.
... make sure documentation gets updated if the bug you're fixing is likely to require an update to
developer documentation once it's fixed, be sure to add the dev-doc-needed keyword to the bug (or ask someone to do it, if you don't have editbugs privileges on bugzilla).
Mozilla Development Tools
bugzilla bugzilla is where
developers can report bugs in the mozilla source releases, and browse an online database of already-reported bugs.
...it lets
developers and others edit pages on the mozilla.org web site without having to use cvs.
Mozilla projects on GitHub
fxdt-adapters the firefox
developer tools adapter that lets you debug various remote targets from the firefox
developer tools.
... firefox-dev.tools a web page to help new mozilla contributors find bugs to work on that relate to the firefox
developer tools.
Emscripten
with emscripten, c/c++
developers don’t have the high cost of porting code manually to javascript — or having to learn javascript at all.
... web
developers also benefit, as they can use the many thousands of pre-existing native utilities and libraries in their sites.
MailNews automated testing
it allows reviewers to quickly pick up regressions in patches and helps
developers to think about different cases.
... this page and its sub-pages describe (and link to) the available test mechanisms within mailnews, and provide supporting information for
developers and testers.
Midas editor module security preferences
:23 pst, see: bugs 38966 and 913734 note: if you've reached this page from a message box in firefox or another mozilla product, try using keyboard shortcuts for the cut, copy, and paste commands: copy: ctrl+c or ctrl+insert (command+c on mac) paste: ctrl+v or shift+insert (command+v on mac) cut: ctrl+x or shift+delete (command+x on mac) the information on the rest of this page is for web
developers and advanced users.
...for example: user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://
developer.mozilla.org") again, keep in mind the security risks involved here and be sure to remove permission to access the clipboard once you no longer need it enabled.
NSS API Guidelines
if our library is self-consistent with how we accomplish these tasks, it makes it easier for the
developer to learn how to use our functions.
...
developers dealing with ssl and pkcs #7 layers should not have to see any of these functions.
Network Security Services
if you're a
developer and would like to contribute to nss, you might want to read the documents highlevel overview of internal details of nss and getting started with nss.
... nss
developer tutorial how to make changes in nss.
SpiderMonkey 1.8
however, one of the most important advances for jsapi application
developers is that the documentation is much improved.
... two new functions, js_setgczeal and js_dumpheap, aim to help
developers debug gc-related problems.
Running Automated JavaScript Tests
developers will often want to use the -d option: jstests.py -d path_to_js_shell the -d option skips tests that are marked as randomly failing; random failures are usually just noise when being run for day-to-day
developer testing.
...basic usage is the same: jit_test.py path_to_js_shell
developers will usually want to run like this to skip the slow tests and cover the most important options: jit_test.py --no-slow path_to_js_shell you can select specific tests to run in the same way as the jstests shell harness.
Using RAII classes in Mozilla
assertions runtime assertions offer two benefits - firstly, they run on windows, which the static analysis currently does not, and secondly they will run locally, even if the
developer did not choose to run static analysis locally.
... the static analys runtime assertions are often better at catching bugs in code that a
developer is currently working on than static analysis, which he might not think to run.
The Rust programming language
rust is a new open-source systems programming language created by mozilla and a community of volunteers, designed to help
developers create fast, secure applications which take full advantage of the powerful features of modern multi-core processors.
... rust and the future of systems programming unlocking the power of parallelism with rust rust for web
developers safe systems programming with rust growing the rust community putting rust into production at mozilla ...
History Service Design
this system provides additional performance, flexibility, and querying capabilities over the old one, for both end users and extensions
developers.
... objectives the primary objectives of the new history service implementation in places are: improve access to browsing history allow association of useful metadata with urls flexible query system for both end-users and add-ons
developers clean architecture for ease of code reuse and maintainability the most known and visible feature of history are views.
FUEL
consider using the add-ons sdk instead fuel is a javascript library designed to help
developers build extensions using terminology and interfaces that are familiar to them.
... fuel is about making it easier for extension
developers to be productive, by minimizing some of the xpcom formality and adding some "modern" javascript ideas.
SMILE
this article covers features introduced in seamonkey 2 smile is a javascript library designed to help
developers build extensions using terminology and interfaces that are familiar to them.
... smile is about making it easier for extension
developers to be productive, by minimizing some of the xpcom formality and adding some "modern" javascript ideas.
XPCOM glue
the xpcom glue is a static library which component
developers and embedders can link against.
... it allows
developers to link only against the frozen xpcom method symbols and maintain compatibility with multiple versions of xpcom.
Creating the Component Code
or you can use one of the special "bots" on irc in #
developers, where you can also get help from human beings.
... irc irc.mozilla.org /join #
developers /msg firebot uuid this command makes the bot generate and return a uuid, which you can then copy into your component source code.
PyXPCOM
with pyxpcom, a
developer can talk to xpcom or embed gecko from a python application.
...mozilla defines many external interfaces available to embeddors and component
developers.
XPConnect wrappers
developers in the know understand that wrappers play a large role in xpconnect, and that we have a lot of them.
... less informed
developers understand that wrappers exist and are somehow important, but they don't know when they should use what wrappers, or if they should be seeing a wrapper.
HOWTO
put the following at the end of your script: // do async processing // from <https://
developer.mozilla.org/en/xpconnect/xpcshell/howto> print("doing async work"); gscriptdone = false; var gthreadmanager = cc["@mozilla.org/thread-manager;1"] .getservice(ci.nsithreadmanager); var mainthread = gthreadmanager.currentthread; while (!gscriptdone) mainthread.processnextevent(true); while (mainthread.haspendingevents()) mainthread.processnextevent(true); 2.
...el> :: line 12" data: no] solution 1 var loader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); loader.loadsubscript("chrome://myall/content/file.jsm"); see: http://mxr.mozilla.org/comm-central/...figutils.js#54 solution 2 append the following at the top of your js file which you want to run in xpcshell { // <https://
developer.mozilla.org/en/xpconnect/xpcshell/howto> // <https://bugzilla.mozilla.org/show_bug.cgi?id=546628> let cc = components.classes; let ci = components.interfaces; // register resource://app/ uri let ios = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice); let reshandler = ios.getprotocolhandler("resource") .queryinterface(ci.nsiresprotocolhandler); let mozd...
Observer Notifications
data is a string form of the origin (for use in security checks), eg "http://
developer.mozilla.org".
...
developer tools these topics let you know about things that have happened related to firefox's built-in
developer tools.
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://
developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://
developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://
developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://
developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://
developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstring_(ex...
...ternal)"> <area alt="" coords="1147,198,1259,246" href="http://
developer.mozilla.org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://
developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://
developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="http://
developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://
developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external)"></map> ...
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="963,6,1045,54" href="http://
developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://
developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://
developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,246" href="http://
developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="937,198,10...
...71,246" href="http://
developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="1095,198,1196,246" href="http://
developer.mozilla.org/en/nsautostring_(external)" shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,294,197,342" href="http://
developer.mozilla.org/en/nsdependentstring_external" shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,294,467,342" href="http://
developer.mozilla.org/en/ns_convertasciitoutf16_external" shape="rect" title="ns_convertasciitoutf16_external"> <area alt="" coords="491,294,733,342" href="http://
developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,294,869,342" href="http://develop...
nsIXMLHttpRequest
note: if you're a web
developer or a mozilla add-on
developer, please refer to the xmlhttprequest documentation instead.
... this page contains documentation, specific to mozilla application and add-on
developers.
nsIZipWriter
var {cc: classes, ci: interfaces, cu: utils} = components; var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; //https://
developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.filtertext); var rv = fp.show(); if (rv == ci.nsifilepicker.returnok) { ...
...dds dirs to this as it finds it for (var i=0; i<dirarr.length; i++) { cu.reporterror('adding contents of dir['+i+']: ' + dirarr[i].leafname + ' path: ' + dirarr[i].path); var direntries = dirarr[i].directoryentries; while (direntries.hasmoreelements()) { var entry = direntries.getnext().queryinterface(ci.nsifile); //entry is instance of nsifile so here https://
developer.mozilla.org/docs/xpcom_interface_reference/nsifile if (entry.path == xpi.path) { cu.reporterror('skipping entry - will not add this entry to the zip file - as this is the zip itself: "' + xpi.path + '" leafname:"' + xpi.leafname + '"'); continue; } if (entry.isdirectory()) { dirarr.push(entry); } var relpath = entry.p...
XPIDL
when a change to an interface made by an xpidl
developer requires that third-party binary addons be recompiled, we say that it affects binary compatibility.
... when a change to an interface made by an xpidl
developer requires that third-party binary addons change their source code, we say that it affects source compatibility.
XSLT 2.0
for
developers saxon-ce a javascript api is provided for initiating an xslt 2.0 transform from a web page.
... error and diagnostics output from saxon-ce can be reviewed in the firefox
developer console or in firebug.
Address Book examples
there are several hooks in the address book code exposed to add-on
developers to help extend the behavior of the address book.
... photo handlers photo handlers allow
developers to customize the behavior of the contact editor when loading or saving contact photos.
Mail composition back end
this will change in the coming weeks and allow for
developers to write javascript to take advantage of the back end services.
... send later
developers also have the ability to do "send later" operations.
Mailnews and Mail code review requirements
getting early ui-reviews this reduces the chance that work is rejected due to needing further user experience changes, and hence is aimed at saving time for the
developer and reviewers.
... if an automated test framework is needed but is not yet available, the
developer is encouraged to write appropriate test code and commit it.
Creating a Custom Column
one of the new and exciting features available to thunderbird extension
developers in thunderbird 2.0 is the ability to easily create and handle custom columns in thunderbird's main view.
...most of the dirty tasks (displaying and sorting) are done for you in the background - so that all that's left to you, the extension
developer is to populate the code with your feature.
Activity Manager examples
if the default implementation of nsiactivityprocess, nsiactivitywarning and nsiactivityevent are not sufficient for the activity initiator, activity
developers can provide their own components to extend the capabilities.
... if activity
developers would like to extend the default ui representation of the activity types, they can provide their own xbl elements for their own activity types.
WebIDL bindings
in addition, for iterable, there are requirements for c++ function implementation by the interface
developer.
...f, const nsastring& akey, errorresult& arv); bool has(mozilla::dom::stringset* self, const nsastring& akey, errorresult& arv); void add(mozilla::dom::stringset* self, const nsastring& akey, errorresult& arv); } // namespace setlikehelpers } iterable unlike maplike and setlike, iterable does not have any c++ helpers, as the structure backing the iterable data for the interface is left up to the
developer.
Using Objective-C from js-ctypes
reading the apple
developer :: programming with objective-c - working with blocks you can learn more about blocks.
... */ // apple docs :: working with blocks - https://
developer.apple.com/library/ios/documentation/cocoa/conceptual/programmingwithobjectivec/workingwithblocks/workingwithblocks.html var _nsconcreteglobalblock = ctypes.open(ctypes.libraryname('objc')).declare('_nsconcreteglobalblock', ctypes.voidptr_t); // //github.com/realityripple/uxp/blob/master/js/src/ctypes/library.cpp?offset=0#271 /** * the "block descriptor" is a static singleton struct.
Using js-ctypes
var __cfallocator = new ctypes.structtype("__cfallocator"); var cfallocatorref = __cfallocator.ptr; var unichar = ctypes.jschar; // uint16 with automatic conversion // define constants var kcfusernotificationstopalertlevel = 0; var kcfusernotificationnotealertlevel = 1; var kcfusernotificationcautionalertlevel = 2; var kcfusernotificationplainalertlevel = 3; // declare functions /* https://
developer.apple.com/library/mac/documentation/corefoundation/reference/cfusernotificationref/index.html#//apple_ref/c/func/cfusernotificationdisplaynotice * sint32 cfusernotificationdisplaynotice ( * cftimeinterval timeout, * cfoptionflags flags, * cfurlref iconurl, * cfurlref soundurl, * cfurlref localizationurl, * cfstringref alertheader, * cfstringref alertmessage, * cfstringref...
...buttontitle * ); */ var cfusernotificationdisplaynotice = libcf.declare("cfusernotificationdisplaynotice", ctypes.default_abi, sint32, // return cftimeinterval, // timeout cfoptionflags, // flags cfurlref, // iconurl cfurlref, // soundurl cfurlref, // localizationurl cfstringref, // alertheader cfstringref, // alertmessage cfstringref // defaultbuttontitle ); /* https://
developer.apple.com/library/mac/documentation/corefoundation/reference/cftyperef/#//apple_ref/c/func/cfrelease * void cfrelease ( * cftyperef cf * ); */ var cfrelease = libcf.declare('cfrelease', ctypes.default_abi, void, // return cftyperef // cf ); /* https://
developer.apple.com/library/mac/documentation/corefoundation/reference/cfstringref/#//apple_ref/c/func/cfstringcreatewithcharacters * cf...
Plug-in Basics - Plugins
this is up to the content
developer or web page author.
...for information about the way html determines plug-in display mode, see "using html to display plug-ins." using html to display plug-ins when a user browses to a web page that invokes a plug-in, how the plug-in appears (or does not appear) depends on two factors: the way the
developer writes the plug-in determines whether it is displayed in its own window or is windowless.
Version, UI, and Status Information - Plugins
if an essential feature is unavailable, the
developer must arrange for alternative behavior, shut down the plug-in, or give the user a chance to decide what to do.
...if false is returned, windowless plug-ins will not work, and the
developer must provide alternatives.
CSSKeywordValue.CSSKeywordValue() - Web APIs
examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the
developer tools inspector.
... #myelement { display: flex; } <div id="myelement">check the
developer tools to see the log in the console and to inspect the style attribute on this div.</div> let keyword = new csskeywordvalue('initial'); let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', keyword); console.log( myelement.get('display').value); // 'initial' console.dir( keyword ); specifications specification status comment css typed om level 1the definition of 'csskeywordvalue' in that specification.
CSSKeywordValue - Web APIs
examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the
developer tools inspector.
... #myelement { display: flex; } <div id="myelement">check the
developer tools to see the log in the console and to inspect the style attribute on this div.</div> let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', new csskeywordvalue('initial')); console.log( myelement.get('display').value); // 'initial' specifications specification status comment css typed om level 1the definition of 'csskeywordvalue' in that specification.
CSS Painting API - Web APIs
the css painting api — part of the css houdini umbrella of apis — allows
developers to write javascript functions that can draw directly into an element's background, border, or content.
... concepts and usage essentially, the css painting api contains functionality allowing
developers to create custom values for paint(), a css <image> function.
Finale - Web APIs
more examples and tutorials there are a variety of demos and further explanations about canvas on these sites: codepen.io front end
developer playground & code editor in the browser.
... web audio the web audio api provides a powerful and versatile system for controlling audio on the web, allowing
developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.
Document.characterSet - Web APIs
users can override the
developer-specified encoding inside the content-type header or inline like <meta charset="utf-8">, such as with firefox's view → text encoding menu.
... this override is provided to fix incorrect
developer-specified encodings that result in garbled text.
Element: mousewheel event - Web APIs
this difference makes a serious issue for web application
developers.
... that is, web
developers cannot know if mousewheel event is caused by which device.
compareVersion - Web APIs
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
getVersion - Web APIs
extension, theme, and plug-in
developers must switch away from install.js based packages to the new packaging scheme with an install.rdf manifest.
... in particular plugin
developers should see how to package a plugin as an extension.
Location - Web APIs
examples // create anchor element and use href property for the purpose of this example // a more correct alternative is to browse to the url and use document.location or window.location var url = document.createelement('a'); url.href = 'https://
developer.mozilla.org:8080/search?q=url#search-results-close-container'; console.log(url.href); // https://
developer.mozilla.org:8080/search?q=url#search-results-close-container console.log(url.protocol); // https: console.log(url.host); //
developer.mozilla.org:8080 console.log(url.hostname); //
developer.mozilla.org console.log(url.port); // 8080 console.log(url.pathname); // /search co...
...nsole.log(url.search); // ?q=url console.log(url.hash); // #search-results-close-container console.log(url.origin); // https://
developer.mozilla.org:8080 specifications specification status comment html living standardthe definition of 'location' in that specification.
MSCandidateWindowShow - Web APIs
example in ie11,
developers can detect the opening of the ime candidate window by listening to mscandidatewindowshow event, then call getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.getelementbyid("mysearchbox").msgetinputcontext(); context.addeventlistener("mscandidatewindowshow", candidatewindowshowhandler); function c...
...
developers could listen to them and shift the suggestion ui accordingly.
Media Capabilities API - Web APIs
the media capabilities api allows
developers to determine decoding and encoding abilities of the device, exposing information such as whether media is supported and whether playback should be smooth and power efficient, with real time feedback about playback to better enable adaptive streaming, and access to display property information.
...with the media capabilities api,
developers can ensure each user is getting the best bitrate and storage savings for their browser, device, and os capabilities.
Navigator.msLaunchUri() - Web APIs
this enables
developers to provide a custom fallback experience for the user.
... if a handler doesn't exist, and the
developer doesn't provide a nohandlercallback, then internet explorer displays a dialog that asks the user if they want to allow the action.
Using the Permissions API - Web APIs
let's face it, permissions on the web are a necessary evil, and they are not much fun to deal with as
developers.
... the permissions api provides the tools to allow
developers to implement a better user experience as far as permissions are concerned.
Streams API concepts - Web APIs
the streams api adds a very useful set of tools to the web platform, providing objects allowing javascript to programmatically access streams of data received over the network and process them as desired by the
developer.
...these allow streams to be read straight into a buffer supplied by the
developer, minimizing the copying required.
Using writable streams - Web APIs
as a javascript
developer, programmatically writing data to a stream is very useful!
...this contains an instance of the writablestreamdefaultcontroller interface, which can be used by the
developer to further control the stream as required.
SubtleCrypto.exportKey() - Web APIs
/* convert an arraybuffer into a string from https://
developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } /* export the given key and write it into the "exported-key" space.
... /* convert an arraybuffer into a string from https://
developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } /* export the given key and write it into the "exported-key" space.
SubtleCrypto.importKey() - Web APIs
/* convert a string into an arraybuffer from https://
developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function str2ab(str) { const buf = new arraybuffer(str.length); const bufview = new uint8array(buf); for (let i = 0, strlen = str.length; i < strlen; i++) { bufview[i] = str.charcodeat(i); } return buf; } const pemencodedkey = `-----begin private key----- miievqibadanbgkqhkig9w0baqefaascbkcwggsjageaaoi...
... // from https://
developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string function str2ab(str) { const buf = new arraybuffer(str.length); const bufview = new uint8array(buf); for (let i = 0, strlen = str.length; i < strlen; i++) { bufview[i] = str.charcodeat(i); } return buf; } const pemencodedkey = `-----begin public key----- miibijanbgkqhkig9w0baqefaaocaq8am...
SyncEvent.tag - Web APIs
the syncevent.tag read-only property of the syncevent interface returns the
developer-defined identifier for this syncevent.
... syntax var tag = syncevent.tag value the
developer-defined identifier for this syncevent.
SyncManager.getTags() - Web APIs
the syncmanager.gettags method of the syncmanager interface returns a list of
developer-defined identifiers for syncmanager registrations.
...}) returns a promise that resolves to an array of domstrings containing
developer-defined identifiers for syncmanager registrations.
URL() - Web APIs
examples // base urls let m = 'https://
developer.mozilla.org'; let a = new url("/", m); // => 'https://
developer.mozilla.org/' let b = new url(m); // => 'https://
developer.mozilla.org/' new url('docs', b); // => 'https://
developer.mozilla.org/docs' let d = new url('/docs', b); // => 'https://
developer.mozilla.org/docs' ne...
...w url('/docs', d); // => 'https://
developer.mozilla.org/docs' new url('/docs', a); // => 'https://
developer.mozilla.org/docs' new url('/docs', "https://
developer.mozilla.org/fr-fr/toto"); // => 'https://
developer.mozilla.org/docs' new url('/docs', ''); // raises a typeerror exception as '' is not a valid url new url('/docs'); // raises a typeerror exception as '/docs' is not a valid url new url('http://www.example.com', ); // => 'http://www.example.com/' new url('http://www.example.com', b); // => 'http://www.example.com/' ne...
URL API - Web APIs
more interesting to most
developers is the api itself.
...in this case, those strings are
developer.mozilla.org and /docs/web/api/url_api, respectively.
Starting up and shutting down a WebXR session - Web APIs
with the extension in place, you can open up a
developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.
... emulator usage while somewhat awkward compared to using an actual headset, this makes it possible to experiment with and
developer webxr code on a desktop computer, where webxr isn't normally available.
Using the Web Animations API - Web APIs
meet the web animations api the web animations api opens the browser’s animation engine to
developers and manipulation by javascript.
... writing css animations with the web animations api one of the more familiar ways to approach learning the web animations api is to start with something most web
developers have played with before: css animations.
Web Animations API Concepts - Web APIs
the web animations api (waapi) provides javascript
developers access to the browser’s animation engine and describes how animations should be implemented across browsers.
... the internet explorer team requested an animations api to consolidate and normalize animation functionality across all browsers, and thus efforts began in earnest among mozilla firefox and google chrome
developers to create the one animation spec to rule them all: the web animations api.
Web Animations API - Web APIs
concepts and usage the web animations api provides a common language for browsers and
developers to describe animations on dom elements.
...this interface exists to define timeline features (inherited by documenttimeline and future timeline objects) and is not itself accessed by
developers.
Window.open() - Web APIs
this function is the lonely key to get back the handle on a window if the
developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle).
...and even if and when this happens, you can expect
developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages.
Synchronous and asynchronous requests - Web APIs
but
developers typically don't notice the problem because the hang only manifests with poor network conditions or when the remote server is slow to respond.
...the recommendation is that
developers move away from the synchronous api and instead use asynchronous requests.
Using XMLHttpRequest - Web APIs
here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>sending forms with pure ajax – mdn</title> <script type="text/javascript"> "use strict"; /*\ |*| |*| :: xmlhttprequest.prototype.sendasbinary() polyfill :: |*| |*| https://
developer.mozilla.org/docs/dom/xmlhttprequest#sendasbinary() \*/ if (!xmlhttprequest.prototype.sendasbinary) { xmlhttprequest.prototype.sendasbinary = function(sdata) { var nbytes = sdata.length, ui8data = new uint8array(nbytes); for (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; } /* send as arraybufferview...: */ this.send(ui8data); ...
... /* ...or as arraybuffer (legacy)...: this.send(ui8data.buffer); */ }; } /*\ |*| |*| :: ajax form submit framework :: |*| |*| https://
developer.mozilla.org/docs/dom/xmlhttprequest/using_xmlhttprequest |*| |*| this framework is released under the gnu public license, version 3 or later.
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.
... if the progress value is indeterminate, the
developer should omit the aria-valuenow attribute.
Accessibility: What users can do to browse more safely - Accessibility
they can be addressed by the design and speed of the display and computer" hardware and operating systems on many computers offer control that is not afforded to
developers.
...isiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image source:
developers.google.com from thomas steiner's article "move ya!
Accessibility Information for Web Authors - Accessibility
join the mozilla accessibility community live chat both end users and
developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... purpose newsgroup mailing list google group
developer discussion mozilla.dev.accessibility subscribe/unsubscribe google group end user support mozilla.support.accessibility subscribe/unsubscribe google group ...
Web accessibility for seizures and physical reactions - Accessibility
the point is, seizures most definitely can be and are fatal, and
developers and designers are incredibly important to making the web a safer place for those with sensitivities to photosensitive or musicogenic triggers.
... @media (prefers-color-scheme: dark) { /* adust styles for dark mode */ } window.matchmedia() there is a powerful tool available to
developers via window.matchmedia().
Using multi-column layouts - CSS: Cascading Style Sheets
conclusion css3 columns are a layout primitive that will help web
developers make the best use of screen real estate.
... imaginative
developers may find many uses for them, especially with the automatic height balancing feature.
CSS Containment - CSS: Cascading Style Sheets
the aim of the css containment specification is to improve performance of web pages by allowing
developers to isolate a subtree of the page from the rest of the page.
... this information is something that is usually known, and in fact quite obvious, to the web
developer creating the page.
Basic Concepts of grid layout - CSS: Cascading Style Sheets
at this point, you may find it useful to work with the grid inspector, available as part of firefox's
developer tools.
... .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } don't forget that you can use the grid inspector in firefox
developer tools to see how the items are positioned against the lines of the grid.
Grid template areas - CSS: Cascading Style Sheets
these can quickly become difficult to read for other
developers, or even your future self.
... however they are part of the specification and it is likely you will come across them in examples or in use by other
developers, even if you choose not to use them.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
this article explains what the cascade is, the order in which css declarations cascade, and how this affects you, the web
developer.
...to simplify the development process, web
developers often use a css reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.
regexp:match() - EXSLT
for example: <xsl:for-each select="regexp:match('http://
developer.mozilla.org/en/docs/firefox_3_for_
developers', '(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)')"> part <xsl:value-of select="position()" /> = <xsl:value-of select="." /> </xsl:for-each> this code generates the following output: part 1 = http://
developer.mozilla.org/en/docs/firefox_3_for_
developers part 2 = http part 3 =
developer.mozilla.org part 4 = part 5 = /en/docs...
.../firefox_3_for_
developers specifications exslt - regexp:match ...
<input type="url"> - HTML: Hypertext Markup Language
<input id="myurl" name="myurl" type="url" list="defaulturls"> <datalist id="defaulturls"> <option value="https://
developer.mozilla.org/"> <option value="http://www.google.com/"> <option value="http://www.microsoft.com/"> <option value="https://www.mozilla.org/"> <option value="http://w3.org/"> </datalist> with the <datalist> element and its <option>s in place, the browser will offer the specified values as potential values for the url; this is typically presented as a popup or drop-down menu containing the...
... <input id="myurl" name="myurl" type="url" list="defaulturls"> <datalist id="defaulturls"> <option value="https://
developer.mozilla.org/" label="mdn web docs"> <option value="http://www.google.com/" label="google"> <option value="http://www.microsoft.com/" label="microsoft"> <option value="https://www.mozilla.org/" label="mozilla"> <option value="http://w3.org/" label="w3c"> </datalist> validation there are two levels of content validation available for url inputs.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
> <datalist id="numbersxx"> <option>0</option> <option>2</option> <option>4</option> <option>8</option> <option>16</option> <option>32</option> <option>64</option> </datalist> <datalist id="fruitsxx"> <option>cherry</option> <option>banana</option> <option>mango</option> <option>orange</option> <option>blueberry</option> </datalist> <datalist id="urlsxx"> <option>https://
developer.mozilla.org</option> <option>https://caniuse.com/</option> <option>https://mozilla.com</option> <option>https://mdn.github.io</option> <option>https://www.youtube.com/user/firefoxchannel</option> </datalist> <p><label for="textx">text</label> <input type="text" list="fruitsxx" id="textx"/></p> <p><label for="colorx">color</label> <input type="color" list="colorsxx" id="colorx"/></p> <p><...
... as web
developers, it's important that we never assume that people will know all the things that we know.
<sub>: The Subscript element - HTML: Hypertext Markup Language
denoting the number of atoms of a given element within a chemical formula (such as every
developer's best friend, c8h10n4o2, otherwise known as "caffeine").
... another example: <p>almost every
developer's favorite molecule is c<sub>8</sub>h<sub>10</sub>n<sub>4</sub>o<sub>2</sub>, which is commonly known as "caffeine."</p> the output: specifications specification status comment html living standardthe definition of '<sub> and <sup>' in that specification.
HTML documentation index - HTML: Hypertext Markup Language
51 the html autocomplete attribute addresses, attribute, email addresses, forms, html, input, phone numbers, reference, select, text, usernames, autocomplete, form, passwords, textarea autocomplete lets web
developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
... 127 <input type="hidden"> element, forms, html, html forms, input, input types, reference, hidden <input> elements of type hidden let web
developers include data that cannot be seen or modified by users when a form is submitted.
Identifying resources on the Web - HTTP
https://
developer.mozilla.org https://
developer.mozilla.org/docs/learn/ https://
developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it to load the associated page (resource).
... examples https://
developer.mozilla.org/docs/learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:9780141036144 mailto:help@supercyberhelpdesk.info specifications specification title rfc 7230, section 2.7: uniform resource identifiers hypertext transfer protocol (http/1.1): message syntax and routing ...
HTTP caching - HTTP
web
developers invented a technique that steve souders called revving[1].
...in order to have the new versions, all the links to them must be changed, that is the drawback of this method: additional complexity that is usually taken care of by the tool chain used by web
developers.
HTTP conditional requests - HTTP
besides the setting of the validators on the server side, this mechanism is transparent: all browsers manage a cache and send such conditional requests without any special work to be done by web
developers.
... for locking mechanisms, it is the opposite: web
developers need to issue a request with the proper headers, while webmasters can mostly rely on the application to carry out the checks for them.
Using HTTP cookies - HTTP
to see stored cookies (and other storage that a web page can use), you can enable the storage inspector in
developer tools and select cookies from the storage tree.
... for example, if domain=mozilla.org is set, then cookies are available on subdomains like
developer.mozilla.org.
Feature Policy - HTTP
feature policy allows web
developers to selectively enable, disable, and modify the behavior of certain features and apis in the browser.
... the general principle is that there should be an intuitive or non-breaking way for web
developers to detect or handle the case when the feature is disabled.
Access-Control-Allow-Origin - HTTP
the "null" value for the acao header should therefore be avoided." examples a response that tells the browser to allow code from any origin to access a resource will include the following: access-control-allow-origin: * a response that tells the browser to allow requesting code from the origin https://
developer.mozilla.org to access a resource will include the following: access-control-allow-origin: https://
developer.mozilla.org limiting the possible access-control-allow-origin values to a set of allowed origins requires code on the server side to check the value of the origin request header, compare that to a list of allowed origins, and then if the origin value is in the list, to set the access-cont...
... access-control-allow-origin: https://
developer.mozilla.org vary: origin specifications specification status comment fetchthe definition of 'access-control-allow-origin' in that specification.
Server-Timing - HTTP
database read/write, cpu time, file system access, etc.) in the
developer tools in the user's browser or in the performanceservertiming interface.
... performanceservertiming interface in addition to having server-timing header metrics appear in the
developer tools of the browser, the performanceservertiming interface enables tools to automatically collect and process metrics from javascript.
HTTP headers - HTTP
content-security-policy-report-only allows web
developers to experiment with policies by monitoring, but not enforcing, their effects.
... nel defines a mechanism that enables
developers to declare a network error reporting policy.
Memory Management - JavaScript
this automaticity is a potential source of confusion: it can give
developers the false impression that they don't need to worry about memory management.
... low-level languages require the
developer to manually determine at which point in the program the allocated memory is no longer needed and to release it.
Object.setPrototypeOf() - JavaScript
because this feature is a part of the language, it is still the burden on engine
developers to implement that feature performantly (ideally).
... until engine
developers address this issue, if you are concerned about performance, you should avoid setting the [[prototype]] of an object.
String.prototype.link() - JavaScript
examples using link() the following example displays the word "mdn" as a hypertext link that returns the user to the mozilla
developer network.
... var hottext = 'mdn'; var url = 'https://
developer.mozilla.org/'; console.log('click to return to ' + hottext.link(url)); // click to return to <a href="https://
developer.mozilla.org/">mdn</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.link' in that specification.
delete operator - JavaScript
the following snippet gives a simple example: var employee = { age: 28, name: 'abc', designation: '
developer' } console.log(delete employee.name); // returns true console.log(delete employee.age); // returns true // when trying to delete a property that does // not exist, true is returned console.log(delete employee.salary); // returns true non-configurable properties when a property is marked as non-configurable, delete won't have any effect, and will return false.
...var empcount = 43; employeedetails = { name: 'xyz', age: 5, designation: '
developer' }; // adminname is a property of the global scope.
Web audio codec guide - Web media technologies
for web
developers, an even bigger concern is the network bandwidth needed in order to transfer audio, whether for streaming or to download it for use during gameplay.
...re chrome edge firefox internet explorer opera safari aac support yes[2] yes yes[1] 9 yes 3.1 container support mp4, adts, 3gp rtp / webrtc compatible yes licensing for streaming or distributing aac-encoded content: no license required;
developers of codecs are required to obtain a patent license through via licensing [1] due to patent issues, firefox does not directly support aac.
Handling media support issues in web content - Web media technologies
there is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web browser
developer is left to its own devices when deciding which media file types and codecs to support.
... this places a small, but reasonably easily overcome, burden on the web
developer: to properly handle the situation when the user's browser can't handle a particular type of media.
Codecs used by WebRTC - Web media technologies
google and some other browser
developers have adopted it for webrtc, but it is not available in all browsers and is not one of the mandatory codecs.
...if you select avc, make sure you're; aware of any potential fees you may need to pay; that said, the patent holders have generally said that most typical web site
developers shouldn't need to worry about paying the license fees, which are typically focused more on the
developers of the encoding and decoding software.
Media type and format guide: image, audio, and video content - Web media technologies
generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web
developer.
... references images image file type and format guide covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and
developers.
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
to keep images from breaking out of their containers when the container becomes narrower than the image,
developers started using css like the following: img { max-width: 100%; height: auto; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above css overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0.
...there is no need for a web
developer to do anything special to their code to take advantage of this, besides returning to the habit of using width and height attributes in their html.
Web media technologies
references html these articles cover html features for media
developers.
... accessibility guide for media in web design in this guide, we cover ways web designers and
developers can create content that is accessible to people with different capabilities.
Privacy, permissions, and information security
monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates content security policy provides the ability to define the extent to which a document's content can be accessed by other devices over the web; used in particular to prevent or mitigate attacks on the server feature policy lets web
developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web features the document in the frame should be allowed to access http public key pinning (hpkp) hpkp is used by ser...
...in order to decrease the likelihood of man-in-the-middle attacks http strict transport security (hsts) hsts is used by servers to let them protect themselves from protocol downgrade and cookie hijack attacks by letting sites tell clients that they can only use https to communicate with the server http/2 while http/2 technically does not have to use encryption, most browser
developers are only supporting it when used with https, so it can be thought of in that regard as being security-related permissions api provides a way to determine the status of permissions for the current browser context transport layer security (tls); formerly known as secure sockets layer (ssl) tls provides security and privacy by encrypting data during transport over the networ...
The building blocks of responsive design - Progressive web apps (PWAs)
for web
developers, it is now fairly common to be called upon to create a web site or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience.
...but this doesn't help us responsible web
developers, who have written small screen layouts into our css using media queries and want mobile devices to display those!
Web technology reference
introduction to html | learn html | html5 |
developer guide | element reference | reference css — styling the web cascading style sheets are used to describe the appearance of web content.
... learn javascript |
developer guide | reference ...
in - SVG: Scalable Vector Graphics
--> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://
developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround...
...--> <feimage xlink:href="https://
developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
Tutorials
these resources are created by forward-thinking companies and web
developers who have embraced open standards and best practices for web development and that provide or allow translations, through an open content license such as creative commons.
... a re-introduction to javascript a recap of the javascript programming language aimed at intermediate-level
developers.
Index - WebAssembly
4 compiling an existing c module to webassembly c++, compiling, emscripten, webassembly, wasm a core use-case for webassembly is to take the existing ecosystem of c libraries and allow
developers to use them on the web.
... 6 converting webassembly text format to wasm webassembly, assembly, conversion, text format, wabt, wasm, wast2wasm, wat2wasm webassembly has an s-expression-based textual representation, an intermediate form designed to be exposed in text editors, browser
developer tools, etc.
Understanding WebAssembly text format - WebAssembly
this is an intermediate form designed to be exposed in text editors, browser
developer tools, etc.
... 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.
Using the WebAssembly JavaScript API - WebAssembly
the equivalent code would look like this: fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(results => { results.instance.exports.exported_func(); }); viewing wasm in
developer tools in firefox 54+, the
developer tool debugger panel has functionality to expose the text representation of any wasm code included in a web page.
... starting soon in firefox, in addition to viewing webassembly as text,
developers will be able to debug (place breakpoints, inspect the callstack, single-step, etc.) webassembly using the text format.
WebAssembly
compiling an existing c module to webassembly a core use-case for webassembly is to take the existing ecosystem of c libraries and allow
developers to use them on the web.
...this is the low-level textual representation of a .wasm module shown in browser
developer tools when debugging.
Builder - Archive of obsolete content
the add-on builder was a web-based development environment that allowed
developers to create add-ons using the sdk apis, but without needing to use the jpm command line tool.
places/history - Archive of obsolete content
example let { search } = require("sdk/places/history"); // simple query search( { url: "https://
developers.mozilla.org/*" }, { sort: "visitcount" } ).on("end", function (results) { // results is an array of objects containing // data about visits to any site on
developers.mozilla.org // ordered by visit count }); // complex query // the query objects are or'd together // let's say we want to retrieve all visits from before a week ago // with the query of 'ruby', but from last week onwards, we want // all results with 'java...
util/match-pattern - Archive of obsolete content
://www.mozilla.org https://www.mozzarella.com http://www.mozilla.org https://foo.mozilla.org/ https://foo.com/moz /http.*moz.*/ http://foo.mozilla.org/ http://mozilla.org http://hemozoon.org/ https://anydomain.com/foomozbar/ ftp://http/mozilla.org /[^:/]+:\/\/[^/]*mozilla\.org\/.*/ ftp://foo.mozilla.org/ http://www.mozilla.org/ https://
developer.mozilla.org/any ftp://http/mozilla.org http://anydomain.com/mozilla.org/ examples var { matchpattern } = require("sdk/util/match-pattern"); var pattern = new matchpattern("http://example.com/*"); console.log(pattern.test("http://example.com/")); // true console.log(pattern.test("http://example.com/foo")); // true console.log(pattern.test("http://foo.com/")); // f...
cfx to jpm - Archive of obsolete content
with jpm, you must specify the path to "my-addon" explicitly, using a relative path: var my_addon = require("../lib/my-addon"); third-party modules the sdk has always supported third-party modules:
developers can write their own modules that extend the sdk's apis or add new apis, and other add-on
developers can make use of these modules in the same way that they use the sdk's built-in modules.
Canvas code snippets - Archive of obsolete content
remotecanvas = function() { this.url = 'http://
developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.src = this.u...
Forms related code snippets - Archive of obsolete content
date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdn
developer network |*| |*| https://
developer.mozilla.org/docs/code_snippets/forms |*| https://
developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later.
HTML to DOM - Archive of obsolete content
but, we still need to see how to execute the famous loaduri() method using our iframe: donkeybrowser.webnavigation.loaduri("http://
developer.mozilla.org", components.interfaces.nsiwebnavigation, null, null, null); also, i recommend you take a look at the nsiwebnavigation interface.
LookupPrefix - Archive of obsolete content
function lookupprefix (node, namespaceuri) { var htmlmode = document.contenttype; // mozilla only // depends on private function _lookupnamespaceprefix() below and on https://
developer.mozilla.org/en/code_snippets/lookupnamespaceuri // http://www.w3.org/tr/dom-level-3-core/core.html#node3-lookupnamespaceprefix // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this in text/html ...
Miscellaneous - Archive of obsolete content
simulating mouse and key events https://
developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from browser.xul over...
Rosetta - Archive of obsolete content
|*| |*| november 12, 2014 |*| |*| https://
developer.mozilla.org/add-ons/code_snippets/rosetta |*| https://
developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
StringView - Archive of obsolete content
view.js "use strict"; /*\ |*| |*| :: number.isinteger() polyfill :: |*| |*| /docs/web/javascript/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -9007199254740992 && nval < 9007199254740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdn
developer network |*| |*| revision #12, march 21st, 2017 |*| |*| https://
developer.mozilla.org/add-ons/code_snippets/stringview |*| https://
developer.mozilla.org/docs/user:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later.
Interaction between privileged and non-privileged pages - Archive of obsolete content
* @see <https://
developer.mozilla.org/docs/code_snippets/ * interaction_between_privileged_and_non-privileged_pages#security_notes> */ function geteventdata(event) { if (event.target.ownerdocument != targetdoc) throw "event from unexpected source"; return new xml(event.target.getattribute("eventdatafrompage")); } security notes never invoke the web page's javascript functions from your extension - doing thi...
CSS3 - Archive of obsolete content
css box alignment module level 3 working draft selectors level 4 working draft css lists module level 3 working draft extends the list counter mechanism so that list markers can be styled and web
developers can define new list counter schemes.
List of Mozilla-Based Applications - Archive of obsolete content
other places to find mozilla applications include: http://www.mozilla.org/projects/ http://
developer.mozilla.org/en/docs/xulrunner_hall_of_fame http://www.mozdev.org http://xulapps.net/ http://dmoz.org/computers/data_formats/markup_languages/xml/applications/xul/applications/ http://blog.mozbox.org/post/2007/06/14/xul-activity-in-france http://www.mozilla.org/projects/security/pki/nss/overview.html http://en.wikipedia.org/wiki/spidermonkey_(javascript_engine) http://www.mozilla.org/rhino/...
Using content preferences - Archive of obsolete content
var iosvc = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var prefservice = components.classes["@mozilla.org/content-pref/service;1"] .getservice(components.interfaces.nsicontentprefservice); // create a uri object referencing the site to save a preference for var uri = iosvc.newuri("http://
developer.mozilla.org/", null, null); // set the value of the "devmo.somesetting" preference to "foo".
Bookmark Keywords - Archive of obsolete content
thus we could type any of the following into the address bar and get back useful results: <tt>google geitost</tt> <tt>google mozilla keyword bookmark</tt> <tt>google bookmark site:
developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples.
Making a Mozilla installation modifiable - Archive of obsolete content
although mozilla stores the ui files in jar archives, it can also access them in their original, unarchived form, which is useful for the extensions
developer because it makes it unnecessary to extract the files from the archive before changing the code and then re-add them to the archive afterwards.
Creating a Microsummary - Archive of obsolete content
note: if you are a web site
developer, and you want to create microsummaries for pages on your site, you can write generators to do so, but a simpler and more efficient approach is to create the microsummaries on the server-side using the same tools and languages you already use to generate pages.
Downloading Nightly or Trunk Builds - Archive of obsolete content
so to figure out how to download a cutting edge or bleeding edge or 'beta' version of firefox, you need to look for a "build" (which is
developer-speak for the packaged files you can download) of 1.9.1 (the number of the underlying 'platform' called 'gecko' or 'mozilla' that firefox uses).
JSS build instructions for OSX 10.6 - Archive of obsolete content
howto successfully compile jss and nss for 32 and 64 bits on osx 10.6 (10.6.7) useful links: https://
developer.mozilla.org/en/nss_reference/building_and_installing_nss/build_instructions https://
developer.mozilla.org/jss_build_4.3.html ftp://ftp.mozilla.org/pub/mozilla.org/ <componente> /releases http://www.mozilla.org/projects/secu...using_jss.html steps: export all this: build_opt="1" cvsroot=":pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot" java_home=$(/usr/libexec/java_home") no_mdupdate="1" nsdistmode="copy" ns_use_gcc="1" create working dir: mkdir nss-jss cd nss-jss obtain source: altought manual said nspr_4_6_4_rtm, nss_3_11_4_rtm, jss_4_2_5_rtm, they di...
Repackaging Firefox - Archive of obsolete content
while the aim of this article is not to fully document how to make an extension (for that, try this section of the mozilla
developer center), here is a basic tutorial to get you started, and some tips specific for creating a dex.
Firefox Sync - Archive of obsolete content
related info javascript client api (useful for interacting with sync from mozilla applications, including developing extensions against sync) syncing custom preferences (useful for extension
developers) code snippets (demonstrates common actions with the javascript api) ...
Mozilla Application Framework - Archive of obsolete content
lxr a web interface to the mozilla codebase that shows you every file in the repository as well as a line-by-line breakdown of who changed which line when in each file bonsai a web interface to the checkin log that you can query for checkins between certain dates, of certain files, or by certain
developers.
Plug-n-Hack Phase1 - Archive of obsolete content
security tool commands manifest an example commands manifest (for owasp zap) is: https://code.google.com/p/zap-extensions/source/browse/branches/beta/src/org/zaproxy/zap/extension/plugnhack/resource/service.json firefox ui in firefox the tool commands will be made available via the
developer toolbar (gcli) https://
developer.mozilla.org/docs/tools/gcli a example of how the zap commands are currently displayed is: note that user specified parameters can be specified for commands, which can either be free text, a static pull down list of options or a dynamic list of options obtained from the tool on demand.
Configuration - Archive of obsolete content
example here is an example of a webapp.ini profile: [parameters] name=gmail id=google.mail@
developer.mozilla.org uri=https://mail.google.com icon=gmail status=yes location=no sidebar=no navigation=no ...
Extensions - Archive of obsolete content
the code snippet will look something like this: <em:targetapplication> <!– prism –> <description> <em:id>prism@
developer.mozilla.org</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>1.0.0.*</em:maxversion> </description> </em:targetapplication> in addition to the install manifest changes, you may want to expose your extension into the prism ui.
Priority Content - Archive of obsolete content
keller equivalents security
developer central -> security plugins central -> plugins devedge community -> mozilla web
developer community notes from devmo wishlist devedge toolbox tools on devedge examples on devedge started: devedge sidebar completed: standards-compliant authoring tools on devedge mostly completed: tools:validators on devedge dependant on the sidebar tabs and the tune-up wizard.
Reading textual data - Archive of obsolete content
einputstream); fis.init(file, -1, -1, 0); var lis = fis.queryinterface(components.interfaces.nsilineinputstream); var linedata = {}; var cont; do { cont = lis.readline(linedata); var line = converter.converttounicode(linedata.value); // now you can do something with line } while (cont); fis.close(); see also writing textual data joel on software: the absolute minimum every software
developer absolutely, positively must know about unicode and character sets ...
Tamarin Build System Documentation - Archive of obsolete content
create a user repository, instructions are https://
developer.mozilla.org/en/publishing_mercurial_clones go to the request a sandbox build page http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm enter the repository url, revision number, email address, and description.
Example Sticky Notes - Archive of obsolete content
tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://
developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme, inc.
XBL - Archive of obsolete content
custom xul elements with xbl from the xul school tutorial for add-on
developers xbl chapter of "rapid application development with mozilla" xbl 2.0 primer (draft) xbl 2.0 cross-browser implementation in javascript more xbl resources...
Install script template - Archive of obsolete content
ry installation fails var nosecondaryinstall = 1; // error return codes need some memory var err; // error return codes when we try and install to the current browser var errblock1; // error return codes when we try and do a secondary installation var errblock2 = 0; // global variable containing our secondary install location var secondaryfolder; //special error values used by the cycore
developers (www.cycore.com) who helped make this install script var exceptionoccurederror = -4711; var winregisnullerror = -4712; var invalidrootkeyerror = -4713; var registrykeynotwritableerror = -4714; //initinstall block //the installation is initialized here -- if we fail here, cancel the installation // initinstall is quite an overloaded method, but i have invoked it here w...
wait-cursor - Archive of obsolete content
see also https://
developer.mozilla.org/docs/talk:xul/attribute/wait-cursor this seems to work instead of trying to set a wait-cursor attribute: window.setcursor('wait') and window.setcursor('auto') ...
Application Update - Archive of obsolete content
resources http://wiki.mozilla.org/software_update http://wiki.mozilla.org/updategeneration http://
developer.mozilla.org/en/docs/setting_up_an_update_server http://chatzilla.rdmsoft.com/xulrunner/update/ http://
developer.mozilla.org/en/docs/xulrunner_tips ...
Building XULRunner with Python - Archive of obsolete content
you should also read the the
developer documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good platform for accessibility projects and both jambu alternative input and the iaccessible2 test tool are using it.
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
[setup] appname=my app appvername=my app 1.0 apppublisher=mark finkle apppublisherurl=http://
developer.mozilla.org/en/docs/getting_started_with_xulrunner appsupporturl=http://
developer.mozilla.org/en/docs/getting_started_with_xulrunner appupdatesurl=http://
developer.mozilla.org/en/docs/getting_started_with_xulrunner defaultdirname={pf}\my app defaultgroupname=my app allownoicons=yes outputdir=..\build\output outputbasefilename=myapp-1.0-win32 ; setupiconfile= compression=lzma solidcompression=yes ...
What XULRunner Provides - Archive of obsolete content
chains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-platform embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if
developer time permits and code size is controlled: ldap support spellchecking support (with or without dictionaries provided) see bug 285977 core support for profile roaming (with application-specific extensibility) pyxpcom embedding (not yet complete) - but it does work, if you compile a custom build that includes the pyxpcom bindings and there is a working python available.
nsIContentPolicy - Archive of obsolete content
char* previous = nsnull; nscomptr<nsicategorymanager> catman; servman->getservicebycontractid(ns_categorymanager_contractid, ns_get_iid(nsicategorymanager), getter_addrefs(catman)); rv = catman->addcategoryentry("content-policy", component_classname, component_contractid, pr_true, pr_true, &previous); javascript
developers can also implement an xpcom component that extends nsicontentpolicy.
2006-10-06 - Archive of obsolete content
discussions w3c sets road map for web app accessibility the w3c introduced its wai-aria (web accessibility initiative for accessible rich internet applications) roadmap--a set of guidelines for
developers to make accessible web content.
2006-10-13 - Archive of obsolete content
user questions about a open/saveas bug that already exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=347230 installer for 2.0rc2 ehume gives the
developers a thumbs up for the new installer for 2.0rc2 having a textfield where you can type in the installation directory.
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - october 7-13, 2006 announcements updated: thunderbird
developer documentation eric shepherd has put together a checklist for the upcoming thunderbird
developer documentation and is looking for feedback as well as contributors.
2006-10-27 - Archive of obsolete content
jonathan pritchard has clarified that announcement does not mean thunderbird will be changing direction, just certain areas of development that are of interest to the eudora
developers will have more attention paid to them.
2006-10-27 - Archive of obsolete content
peter weilbacher responded to alex's posting on the same day, stating that he is not sure what packaging system solaris 10 x86 uses but thinks that he might need to install the
developer packages of x and/or xrender and freetype which should contain the libxrender.* and libfreetype.* files that are need for the linking.
2006-10-06 - Archive of obsolete content
also invites people to help extension
developers test for compatibility (link to a bunch of extension compatability bugs) discussions reining in the release process a discussion of what can be done to speed up the release process.
2006-11-10 - Archive of obsolete content
benjamin smedberg crossposted a notice about unit testing for the mozilla toolkit, letting
developers know about the importance of testing for the improvement of mozilla 2, and asks for complete coverage.
2006-11-03 - Archive of obsolete content
announcements
developer chat with javascript
developer brendan eich on tuesday, november 7th at 10am pst (utc-8) brendan eich and some special guests will be hosting a
developer chat about new technologies comming to mozilla 2.
2006-09-30 - Archive of obsolete content
developers should use this sample instead: http://
developer.mozilla.org/en/docs/xpcom_glue discussions dynamic load overlay a short discussion about the possibilities of loading and unloading xul overlay runtime reading binary data from file discusses about the code to read binary data from file how to build xpcom component on mac os x discusses about the make file code used to build xpcom components on mac os x successfully meetings none during this week.
2006-11-24 - Archive of obsolete content
discussions tutorials: non c++ bindings for xpcom tutorials on how to interface with firefox using xpcom on a similar basis to how a
developer can with internet explorer through it's com interface tutorals and references related to extension development tutorials on developing extensions which use the third party libraries for firefox references to mozilla api exposed javascript component + xmldocument not accessible a discussion on error: uncaught exception: permission denied to get property xmldocument.textcontent creating xpcom components a good discussion about "components.classes[cid] has no properties" error firefox http explanation about how firefox handles the http aspec...
2006-12-08 - Archive of obsolete content
discussions xpcom cpp to js callback engaging discussion on a problem with trying to call back from c++ to a javascript object using an interface the
developer created with an idl.
NPVariant - Archive of obsolete content
number npvarianttype_int32 or npvarianttype_double string npvarianttype_string all other types npvarianttype_object functions npn_releasevariantvalue() npn_getstringidentifier() npn_getstringidentifiers() npn_getintidentifier() npn_identifierisstring() npn_utf8fromidentifier() npn_intfromidentifier() macros plugin
developers are not expected to directly manipulate or access the members of the npvariant instance, instead, the function npn_releasevariantvalue(), and the following macros are provided: npvariant_is_void() evaluates to true if v is of type npvarianttype_void.
Writing a plugin for Mac OS X - Archive of obsolete content
mat by using extern "c" in the header, like this: #pragma gcc visibility push(default) extern "c" { nperror np_initialize(npnetscapefuncs *browserfuncs); nperror np_getentrypoints(nppluginfuncs *pluginfuncs); void np_shutdown(void); } #pragma gcc visibility pop you can check to be sure your symbols are visible and in standard c format by using the nm utility provided among the mac os x
developer tools: [user@foo mymac] nm basicplugin ...
Date.prototype.toLocaleFormat() - Archive of obsolete content
extension and xulrunner
developers should know that just loading the format string from a .dtd or .properties file using a chrome://somedomain/locale/somefile.ext uri should be avoided, as the .dtd/.properties file and the tolocaleformat() method does not not necessarily use the same locale, which could result in odd looking or even ambiguous or unreadable dates.
Debug.setNonUserCodeExceptions - Archive of obsolete content
syntax debug.setnonusercodeexceptions [= bool]; remarks if this property is set to true within a given scope, the debugger can then choose whether to take some specified action on exceptions thrown inside that scope: for instance, if the
developer wishes to break on user-unhandled exceptions.
Server-Side JavaScript - Archive of obsolete content
sounds obvious, but for at least the first twelve years of the web's evolution,
developers have pretty much had to use different languages on the server from those available in the browser, leading to segregated teams, disparate and inconsistent know-how, and plenty of server-side string manipulation gymnastics to generate html or ajax pages.
Reference - Archive of obsolete content
his user page is here: http://
developer.mozilla.org/pt/docs...%c3%aas_xavier -- dria 08:19, 24 february 2006 (pst) object and function relation here is my problem , it has been breaking my head for quite some time now.
Web Standards - Archive of obsolete content
tools firebug extension web
developer extension markup validation service (w3c) css validation service (w3c) examples mozilla 1.0 demos - showing off what can be done with web standards.
Community - Extensions
mozillazine extensions & themes forum #extdev channel on moznet irc network — extension development questions #addons channel on moznet irc network — questions about http://addons.mozilla.org mozdev project owners mailing list mozillazine knowledge base allyourideas — ideas for extensions ((really needs a unique captcha)) babelzilla — a community for
developers and translators of extension for mozilla applications ...
Game monetization - Game development
if your work is a serious endeavour on the path to becoming an independent game
developer able to make a living, read on and see what your options are.
Publishing games - Game development
game monetization is essential to anyone who considers their game development work a serious endeavour on the path to becoming an independent game
developer able to make a living, so read on and see what your options are.
Mobile touch controls - Game development
overview: control mechanisms next the future of mobile gaming is definitely web, and many
developers choose the mobile first approach in their game development process — in the modern world, this generally also involves implementing touch controls.
Unconventional controls - Game development
leapmotion is becoming more and more popular due to very good integration with vr headsets — demoing rainbow membrane on an oculus rift with leap motion attached to it was voted one of the best webvr experiences by javascript
developers visiting demo booths at conferences around the world.
Visual JS GE - Game development
nstance, as indicated below: module.exports = { version : "0.5", path_of_node_app : "d:/path_to_server_instance_folder/server/" , // edit here path_of_www : "d:/xamp/htdocs/project_instance/", // path_to_www edit here editor_port : "1013", reg_path : "users/", account_port : 3666 , destroy_session_after_x_mseconds : 20000, }; local node.js application tools (uses in
developer mode only) the following section provides information about the tools involved in visual-js game engine.
Entity header - MDN Web Docs Glossary: Definitions of Web-related terms
a few request headers after a get request: in the following example, content-length is an entity header, while host and user-agent are requests headers: post /myform.html http/1.1 host:
developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...
HTTP header - MDN Web Docs Glossary: Definitions of Web-related terms
/newpage.html a typical set of headers: 304 not modified access-control-allow-origin: * age: 2318192 cache-control: public, max-age=315360000 connection: keep-alive date: mon, 18 jul 2016 16:06:00 gmt server: apache vary: accept-encoding via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (cloudfront) x-amz-cf-id: tol0fem6ui4fgldrkjx0vao5hpkkgzulyn2twd2gawltr7vlnjtvzw== x-backend-server:
developer6.webapp.scl3.mozilla.com x-cache: hit from cloudfront x-cache-info: cached ...
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
html specifications try to make this as
developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
the prefetch hints are sent in http headers: link: ; rel=dns-prefetch, ; as=script; rel=preload, ; rel=prerender, ; as=style; rel=preload prefetch attribute value browsers will prefetch content when the prefetch <link> tag directs it to, giving the
developer control over what resources should be prefetched.
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
ding: gzip content-type: text/html; charset=utf-8 date: mon, 18 jul 2016 16:06:00 gmt etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a" keep-alive: timeout=5, max=997 last-modified: mon, 18 jul 2016 02:36:04 gmt server: apache set-cookie: mykey=myvalue; expires=mon, 17-jul-2017 16:06:00 gmt; max-age=31449600; path=/; secure transfer-encoding: chunked vary: cookie, accept-encoding x-backend-server:
developer2.webapp.scl3.mozilla.com x-cache-info: not cacheable; meta data too large x-kuma-revision: 1085259 x-frame-options: deny ...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
ing semantic markup are as follows: search engines will consider its contents as important keywords to influence the page's search rankings (see seo) screen readers can use it as a signpost to help visually impaired users navigate a page finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes suggests to the
developer the type of data that will be populated semantic naming mirrors proper custom element/component naming when approaching which markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it...
Site - MDN Web Docs Glossary: Definitions of Web-related terms
examples of the same site https://
developer.mozilla.org/docs/ https://support.mozilla.org/ same site because the registrable domain of mozilla.org is the same http://example.com:8080 https://example.com same site because scheme and port are not relevant examples of different site https://
developer.mozilla.org/docs/ https://example.com not same site because the registrable domain of the two url...
MDN Web Docs Glossary: Definitions of Web-related terms
cross-site scripting crud cryptanalysis cryptographic hash function cryptography csp csrf css css object model (cssom) css pixel css preprocessor d data structure decryption delta denial of service descriptor (css) deserialization
developer tools dhtml digest digital certificate distributed denial of service dmz dns doctype document directive document environment dom (document object model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) ...
Mobile accessibility - Learn web development
long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing
developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).
CSS values and units - Learn web development
in programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the
developer and the computer.
Introduction to CSS layout - Learn web development
table layout html tables are fine for displaying tabular data, but many years ago — before even basic css was supported reliably across browsers — web
developers used to also use tables for entire web page layouts — putting their headers, footers, different columns, etc.
Supporting older browsers - Learn web development
in my experience,
developers are often very worried about the experience of 1% of users in an old version of internet explorer, while not considering at all the far greater number who have accessibility needs.
Using CSS generated content - Learn web development
this rule adds a space and an icon after every link that has the class glossary: html <a href="
developer.mozilla.org" class="glossary">
developer.mozilla.org</a> css a.glossary::after { content: " " url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif"); } ...
Styling lists - Learn web development
<dt>pita</dt> <dd>a soft, slightly leavened flatbread.</dd> <dt>halloumi</dt> <dd>a semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser
developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em.) the list items (<li> elements) have no set defaults for spacing.
Web fonts - Learn web development
this takes one or more font family names, and the browser travels down the list until it finds a font it has available on the system it is running on: p { font-family: helvetica, "trebuchet ms", verdana, sans-serif; } this system works well, but traditionally web
developers' font choices were limited.
Basic native form controls - Learn web development
due to the on-off nature of checkboxes, the checkbox is considered a toggle button, with many
developers and designers expanding on the default checkbox styling to create buttons that look like toggle switches you can see an example in action here (also see the source code).
UI pseudo-classes - Learn web development
as an example, imagine a confirmation page where the
developer has sent the details filled in on previous pages over to this page, with the aim of getting the user to check them all in one place, add any final data that is needed, and then confirm the order by submitting.
Mozilla splash page - Learn web development
note: to properly test the srcset/sizes examples, you'll need to upload your site to a server (using github pages is an easy and free solution), then from there you can test whether they are working properly using browser
developer tools such as the firefox network monitor.
Responsive images - Learn web development
when testing it with a mobile browser, you can use tools like firefox's about:debugging page to inspect the page loaded on the mobile using the desktop
developer tools.
CSUN Firefox Materials
the mozilla firefox community welcomes bug reports, ideas, documentation, answering questions in the support forums -- and nearly any kind of community involvement resulting in a browser built for a broader audience of users and
developers.
Gecko info for Windows accessibility vendors
to help web
developers in that regard, there is the wonderful memory leak monitor, a firefox 1.5+ extension from david baron, which warns chrome and extension
developers about one particular type of memory leak.
Links and Resources
accessibility information resource center for
developers at adobe - flash mx accessibility, pdf document accessibility and actionscript accessibility.
Mozilla's Section 508 Compliance
applications also shall not disrupt or disable activated features of any operating system that are identified as accessibility features where the application programming interface for those accessibility features has been documented by the manufacturer of the operating system and is available to the product
developer.
Index
found 689 pages: # page tags and summary 1 add-ons add-ons, extension, extensions, landing, mozilla add-ons allow
developers to extend and modify the functionality of firefox.
Testopia
links faq wiki docs bugs (please read the bug reporting guide) official testopia blog irc: #testopia or #bugzilla user help support-webtools@lists.mozilla.org
developers dev-apps-webtools@lists.mozilla.org downloads download 2.5 (bugzilla 4.2) download 2.4 (bugzilla 3.6 and 4.0) archived versions
developers greg hendricks vance baarda (former
developer) ed fuentetaja (former
developer) ...
Chrome registration
note: extensions can't currently (bug 1131065) register components to load in the content process using the manifest file so this flag is largely useless to extension
developers.
Creating a spell check dictionary add-on
s:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>locale-code@dictionaries.addons.mozilla.org</em:id> <em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- other install.rdf metadata such as em:localized, em:description, em:creator, em:
developer, em:translator, em:contributor or em:homepageurl --> <!-- firefox --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>46.0</em:maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> ...
Debugging on Windows
if you think you know a cool mozilla debugging trick, feel free to discuss it with #
developers and then post it here.
Makefile - variables
todo: xpcom/xpinstall variables: https://
developer.mozilla.org/en/adding_xpcom_components_to_mozilla_build_system ...
Old Thunderbird build
for hg tip, you should see green bs on https://treeherder.mozilla.org/#/jobs?repo=comm-central to start the build, cd into the comm-central subdirectory, and run: ./mozilla/mach build mach is our command-line tool to streamline common
developer tasks.
Simple Instantbird build
building instantbird what you need to do to build instantbird rather than firefox is: echo 'ac_add_options --enable-application=im' >> .mozconfig to start the build, cd into the comm-central subdirectory (created automatically by the hg clone command), and run: ./mozilla/mach build mach is our command-line tool to streamline common
developer tasks.
Simple Thunderbird build
for hg tip, you should see green bs on https://treeherder.mozilla.org/#/jobs?repo=comm-central to start the build, cd into the source directory, and run: ./mach build mach is our command-line tool to streamline common
developer tasks.
Updating NSPR or NSS in mozilla-central
(because some
developers might not be aware that nspr/nss are separately maintained and released, the mozilla hg server rejects accidental changes/forking, if the required keywords are missing in the commit comment.) if nspr or nss must be upgraded to a new static tag, follow this procedure: before starting, make sure your local repository is updated to mozilla-central tip and that there are no local changes: $ hg status -mard pull the new sources $ python client.py update_nspr nsp...
Commenting IDL for better documentation
*/ [noscript] void sayyummy(in astring language); }; in conclusion with just a little extra help from you, the intrepid
developer, the documentation team can crank out full, formatted documentation for your interface much more quickly and accurately.
Site Identity Button
if the site identity button on your site shows something you do not expect (for example, an orange warning triangle when you expect a green padlock) you can find out the cause of the problem by looking in the web console in the firefox
developer tools: ensure your web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downgraded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but subresources loaded for your page have not.
Firefox and the "about" protocol
about:crashes lists all crashes, which happened during the runtime of firefox (in case the user enabled the crash reporter) about:credits lists all contributors to the firefox project about:debugging switches to the
developer tools debugging page, which allows you to debug add-ons, tabs and service workers about:devtools summarizes the
developer tools and provides links to documentation for each tool about:downloads displays all downloads done within firefox about:home start page of firefox when opening a new window about:license displays licensing information a...
Using the Browser API
when the front page of https://
developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159).
mozbrowserloadend
when the front page of https://
developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159).
Embedding the editor
composer embedded in a xul application
developers need to embed composer widgets in their xul applications, by using the <editor> tag as we do today.
Embedding Mozilla
gecko allows third-party
developers to use the same technology as found in mozilla.
Gecko
gecko home page on mozillawiki home for the active
developers.
MathML Accessibility in Mozilla
mozilla and nvda
developers essentially do not have control on how mathematical formulas are read, please contact design science for any inquiries.
Mozilla MathML Project
mathml in mozilla
developer network mathml accessibility in mozilla sample mathml documents screenshots mathml start page - with translations in different languages ( arabic, chinese, hebrew, thai) mathml basics - document tailored to display correctly with just the symbol font that is pre-installed by default on most os configurations.
Activity Monitor, Battery Status Menu and top
(apple support documentation specifically recommends it for troubleshooting battery life problems.) unfortunately "energy impact" is not a good measure for either users or software
developers and it should be avoided.
Gecko Profiler FAQ
if the issue you are trying to avoid is not profiling on fast machines that mozilla
developers typically use to build firefox on, a better solution may be using a less high-end machine that actually has lower spec’d hardware instead of artificially slowing down just the cpu.
Profiling with the Gecko Profiler and Local Symbols on Windows
generate the breakpad symbol files by running ./mach buildsymbols: https://
developer.mozilla.org/en/building_firefox_with_debug_symbols#breakpad_symbol_files this will have created symbols under $objdir/dist/ , named after the binary name, architecture and version, so something like "firefox-40.0a1.en-us-win32.crashreporter-symbols.zip" point talos to this zipfile by passing its path to the --symbolspath flag.
Refcount tracing and balancing
refcount balancing is a follow-up step that analyzes the resulting log to help a
developer figure out where refcounting went wrong.
Scroll-linked effects
in all cases, however, firefox will display a warning to the
developer console (starting in version 46) if it detects the presence of a scroll-linked effect on a page.
Leak Monitor
david baron that helps extension and chrome
developers to find memory leaks.
MailNews
it allows reviewers to quickly pick up regressions in patches and helps
developers to think about different cases.
Introduction to NSPR
the current implementation of nspr allows
developers to compile a single source code base on macintosh (ppc), win32 (nt 3.51, nt 4.0, win'95), and over twenty versions of unix.
An overview of NSS Internals
if you want to work with nss, it's often helpful to use the command line utilities that are provided by the nss
developers.
Getting Started With NSS
you could contribute by organizing it in a better way.) nss sample code a good place to start learning how to write nss applications are the command line tools that are maintained by the nss
developers.
4.3.1 Release Notes
you can also give feedback directly to the
developers on the mozilla cryptography forums...
4.3 Release Notes
you can also give feedback directly to the
developers on the mozilla cryptography forums...
JSS FAQ
jss example code is essentially
developer test code; with that understanding, the best directory to look for sample code is in the org/mozilla/jss/tests directory: http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/tests org/mozilla/jss/tests/closedbs.java org/mozilla/jss/tests/keyfactorytest.java org/mozilla/jss/tests/digesttest.java org/mozilla/jss/tests/jcasigtest.java org/mozilla/jss/te...
NSS Memory allocation
if and when an arena is leaked, the
developer wants to see the call stack of the most recent allocation of the arena, not the stack of the oldest allocation of that arena.
NSS 3.12.4 release notes
documentation for a list of the primary nss documentation pages on
developer.mozilla.org, see nss.
NSS 3.28 release notes
please give feedback to the nss
developers for any compatibility issues that you encounter in your tests.
NSS sources building testing
if you are a software
developer and intend to contribute enhancements to nss, you should obtain the latest development snapshot of nss using mercurial/hg (a distributed source control management tool).
nss tech note6
any offer of binary support that may have been previously made to you by nss
developers is null and void.
Overview of NSS
nss includes a framework to which
developers and oems can contribute patches, such as assembler code, to optimize performance on their platforms.
NSS tools : certutil
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, sun, oracle, mozilla, and google.
NSS tools : cmsutil
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape and now with red hat.
NSS tools : crlutil
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, sun, oracle, mozilla, and google.
NSS tools : modutil
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, sun, oracle, mozilla, and google.
NSS tools : pk12util
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, sun, oracle, mozilla, and google.
NSS tools : ssltab
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape and now with red hat and sun.
NSS tools : ssltap
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape and now with red hat and sun.
NSS tools : vfychain
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, and sun.
NSS tools : vfyserv
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, and sun.
NSS_3.12.3_release_notes.html
the information in this table is excerpted from https://
developer.mozilla.org/en/nss_reference/nss_environment_variables environment variable value type description nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below).
certutil
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, and sun.
NSS tools : cmsutil
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape and now with red hat.
NSS tools : crlutil
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape and now with red hat.
NSS tools : modutil
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, and sun.
NSS tools : pk12util
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, and sun.
NSS tools : signver
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, and sun.
NSS tools : ssltap
mailing lists: pki-devel@redhat.com and pki-users@redhat.com irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape and now with red hat and sun.
NSS tools : vfychain
mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by
developers with netscape, red hat, and sun.
Necko Architecture
necko has been designed to accommodate pluggable protocols so
developers can contribute their own protocol libraries that can be dynamically loaded and used by applications utilizing necko.
Statistics API
the browser preference javascript.options.mem.log controls dumping of human-readable gc stats messages to the
developer console.
JIT Optimization Strategies
note: this page is an in-progress documentation of jit optimization strategies planned to support the "jit coach" feature intended for inclusion in firefox
developer tools.
JSAPI User Guide
it is up to the application
developer to decide what objects and methods are exposed to scripts.
Setting up CDT to work on SpiderMonkey
luckily, improvements in cdt have reduced the basic process to manageable five steps: download and extract "eclipse ide for c/c++
developers" from the eclipse downloads page.
TPS History Lists
an integer value from one of the transition types listed at https://
developer.mozilla.org/en/nsinavhistoryservice#constants.
Zest
zest topics usecases reporting security vulnerabilities to
developers reporting security vulnerabilities to companies defining active and passive scanner rules deep integration with security tools runtimes the runtime environments that support zest tools the tools that include support zest implementation the state of zest development videos simon demoed zest at appsec usa in november 2013, and the full video of my talk is avai...
Redis Tips
it is intended primarily for
developers, and deliberately omits some topics that will be important in any redis deployment, like security and backups.
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 di...
Security and the jar protocol
this ordinarily isn't a big deal, since site
developers wouldn't put up dangerous files and set them up to download like zip archives.
Task graph
the result of each task is sent to treeherder where
developers and sheriffs can track the status of the push.
Implementation Details
under msaa/ia2, watch for event_hide under atk/at-spi, watch for children-changed:remove to help
developers in that regard, there is memory leak monitor, a firefox extension.
AT APIs Support
open komodo - platform for building
developer environments miro - a free, open source internet tv and video player any xulrunner application (songbird media player, etc.) extensions to other xul apps (e.g.
Frecency algorithm
developer notes there are various development notes you can read about places that may offer additional insights: initial algorithm ideas implementation notes history the initial algorithm design was by mike connor and seth spitzer.
Preferences API
it is relatively easy to use, while providing a number of useful user and
developer features, including support for default preferences, user overrides via user.js, and locking.
Toolkit API
ackaging: specific information about how to package extensions theme packaging: specific information about how to package themes multiple-item extension packaging: specific information about multiple-item extension xpis xul application packaging: specific information about how to package xulrunner applications chrome registration printing in xul apps see also the following
developer pages contain examples and discussions of particular topics: xul xul overlays developing extensions xulrunner developing themes dom rdf storage ...
Creating a Python XPCOM component
a three-part tutorial on ibm
developerworks: getting to know pyxpcom - info on building pyxpcom (and maybe mozilla) to get it to work.
XPCOM array guide
array guidelines here are a few simple rules which will keep your code clean and your
developers happy: use typesafe arrays like nscomarray<t> nstarray<t> wherever possible.
Preface
creating xpcom components is meant for c++
developers.
Resources
« previous this last section of the book provides a list of resources referred to in the tutorial and other links that may be useful to the gecko
developer.
Setting up the Gecko SDK
the following four sections tell the
developer how to download and organize the gecko sdk and create a new project in which components like weblock can be created.
Starting WebLock
instead of starting with the implementation,
developers use xpidl (see xpidl and type libraries for more information about xpidl) to define the interface to the component: how the functionality should be organized, expressed, and exposed to its clients.
Using XPCOM Components
cookie manager cookie management is one of the many sets of functionality that is made available to the browser in the form of an xpcom component and that can be reused by
developers who want similar functionality in their applications.
Mozilla internal string guide
string guidelines follow these simple rules in your code to keep your fellow
developers, reviewers, and users happy.
Components.Exception
syntax var exception = [ new ] components.exception([ message [, result [, stack [, data ] ] ] ]); parameters message a string which can be displayed in the error console when your exception is thrown or in other
developer-facing locations, defaulting to 'exception' result the nsresult value of the exception, which defaults to components.results.ns_error_failure stack an xpcom stack to be set on the exception (defaulting to the current stack chain) data any additional data you might want to store, defaulting to null example throw components.exception("i am throwing an exception from a javascript xpcom c...
Components.utils.reportError
it is meant for use by extension
developers who have exception handler blocks which want to "eat" an exception, but still want to report it to the console.
JavaXPCOM
with javaxpcom, a
developer can talk to xpcom or embed gecko from a java application.
PlXPCOM
project page (mozdev) perl object definition (mozdev)
developer's guide to perl xpcom (mozdev) newsgroup (mozdev) mailing list (mozdev) ...
Community
#pyxpcom on irc.mozilla.org chat with other pyxpcom
developers on mozilla's irc network.
XPConnect
wrappers what sorts of wrappers xpconnect generates and uses xpconnect security membranes tools xpcshell join the xpcom community choose your preferred method for joining the discussion: mailing list newsgroup rss feed irc: #
developers (learn more)tools: javascript component wizard, visual c++ component wizard, visual c++ component wizard for visual studio 2010 ...
Language bindings
it is meant for use by extension
developers who have exception handler blocks which want to "eat" an exception, but still want to report it to the console.components.utils.sandboxcomponents.utils.sandbox is used to create a sandbox object for use with evalinsandbox().components.utils.scheduleprecisegcthis method lets scripts schedule a garbage collection cycle.
RefPtr
it was derived from an old #
developers discussion.
IAccessibleText
however, if the application
developer was not satisfied with how screen readers have handled the reading of sentences this boundary type could be implemented and screen readers could use the application's version of a sentence rather than the screen reader's.
nsIDOMParser
note: if you're a web
developer, please refer to the domparser documentation instead.
nsIPluginHost
it will *always malloc()* output buffer (caller is responsible to free it) if input buffer starts with lf, which comes from 4.x spec http://
developer.netscape.com/docs/manuals/communicator/plugin/pgfn2.htm#1007754 "if no custom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer.", it skips that '\n' and considers rest of the input buffer as data.
nsIURL
\ filename / ---------------------------- | filepath you can get a nsiurl from an nsiuri, using the queryinterface() method: var myuri = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice) .newuri("http://
developer.mozilla.org", null, null); try { var myurl = myuri.queryinterface(components.interfaces.nsiurl); } catch(e) { // the uri is not an url } or using instanceof: if (myuri instanceof components.interfaces.nsiurl) { // your code here } method overview autf8string getcommonbasespec(in nsiuri auritocompare); autf8string getrelativespec(in nsiuri auritocompare); attribute...
nsIWinTaskbar
fails if a jump list build operation has already been initiated,
developers should make use of a single instance of nsijumplistbuilder for building lists within an application.
nsPIPromptService
embedding/components/windowwatcher/public/nspipromptservice.idlscriptable this interface is for the dialog implementers, not for other
developers.
XPCOM reference
the contents herein are oriented primarily toward extension
developers and people embedding xpcom in other projects.
Setting HTTP request headers
if you want to support gecko2 (firefox4) you need to register your javascript component as described here: https://
developer.mozilla.org/en/xpcom/xpcom_changes_in_gecko_2.0#javascript_components.
XPCOM ABI
(this is an internals detail and should be of no concern to an extension
developer.) extension installation when the application (e.g.
xptcall FAQ
the code is at: xpcom/reflect/xptcall a new porting guide is at: https://
developer.mozilla.org/en/xptcall_porting_guide pre-implementation proposals are here and here.
Mozilla technologies
these services include:viewing and searching mozilla source code onlinesource code for all mozilla projects hosted in the mercurial repositories can be searched and viewed online using searchfox, a fast indexed search engine that runs on aws.xml extrasthe xml extras module contains several features that allow
developers to treat xml as data i.e.
Testing Mozilla code
fuzzing interfacethe fuzzing interface is glue code living in mozilla-central in order to make it easier for
developers and security researchers to test c/c++ code with either libfuzzer or afl-fuzz.measuring code coverage on firefoxcode coverage essentially is about measuring how often certain lines are hit, branches taken or conditions met in a program, given some test that you run on it.
Creating a gloda message query
from https://
developer.mozilla.org/docs/mozilla/thunderbird/thunderbird_extensions/demo_addon, demo3, it seems that the attributename given in these files is the constraintname to be used (e.g.
Main Windows
see
developer.thunderbird.net for newer information.
Demo Addon
see
developer.thunderbird.net for newer information.
Tips and Tricks from the newsgroups
the following discussions on mozilla.dev.apps.thunderbird and mozilla.dev.extensions include useful tips for thunderbird add-on
developers.
customDBHeaders Preference
ated 44%) adding: chrome/content/ (stored 0%) adding: chrome/content/superfluous.js (deflated 57%) adding: chrome/content/superfluous_overlay.xul (deflated 44%) adding: install.rdf (deflated 50%) end result ultimately, you want to be able to compose a message like this: and see the superfluous column displayed in your inbox like this: thanks many thanks go out to the thunderbird
developers for the fine product that it is.
Thunderbird
community thunderbird product home page thunderbird project community pages user support is handled at mozilla support development discussion happens on the tb-planning mailing list: subscribe archives add-on
developers forum/mailing list mozillazine forums mozilla messaging web page #thunderbird on irc.mozilla.org (for users) #maildev on irc.mozilla.org (for
developers) a list of all thunderbird communication channels ...
Add to iPhoto
closing remarks this is a fairly simple example of how to use js-ctypes, but it actually does something useful, and should be a helpful demonstration not just for how to use js-ctypes, but also more specifically for
developers that want to interface with mac os x system frameworks.
Int64
warning: do not rely on the value returned by this method, as it's subject to change at any time, depending on the debugging needs of the
developers.
UInt64
warning: do not rely on the value returned by this method, as it's subject to change at any time, depending on the debugging needs of the
developers.
js-ctypes
unlike binary xpcom components, it allows
developers to ship a single binary for use with multiple versions of firefox.
Plugins
tutorials and references the articles below are
developer information about the developing for click-to-play, and plugin blocking.
Animation - Web APIs
for this reason, modern browsers have implemented the part of the web animations spec that automatically removes overriding forward filling animations, unless the
developer explicitly specifies to keep them.
AnimationTimeline - Web APIs
this interface exists to define timeline features (inherited by documenttimeline and future timeline types) and is not itself directly used by
developers.
Beacon API - Web APIs
however, ensuring that the data is sent during the unloading of a document is something that has traditionally been difficult for
developers.
CSSPositionValue - Web APIs
#image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the
developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> ...
Using the CSS Painting API - Web APIs
the css paint api is designed to enable
developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc.
CSS Properties and Values API - Web APIs
the css properties and values api — part of the css houdini umbrella of apis — allows
developers to explicitly define their css custom properties, allowing for property type checking, default values, and properties that do or do not inherit their value.
ClipboardItem - Web APIs
the benefit of having the clipboarditem interface to represent data, is that it enables
developers to cope with the varying scope of file types and data easily.
Console.dir() - Web APIs
in other words, console.dir() is the way to see all the properties of a specified javascript object in console by which the
developer can easily get the properties of the object.
Console API - Web APIs
the console api provides functionality to allow
developers to perform debugging tasks, such as logging messages or the values of variables at set points in your code, or timing how long an operation takes to complete.
ContentIndex - Web APIs
the contentindex interface of the content index api allows
developers to register their offline enabled content with the browser.
DOMTokenList.values() - Web APIs
the values() method of the domtokenlist interface returns an iterator allowing
developers to go through all values contained in the domtokenlist.
Detecting device orientation - Web APIs
the motion event contains four properties: devicemotionevent.acceleration devicemotionevent.accelerationincludinggravity devicemotionevent.rotationrate devicemotionevent.interval motion values explained the devicemotionevent objects provide web
developers with information about the speed of changes for the device's position and orientation.
DeviceLightEvent - Web APIs
the devicelightevent provides web
developers with information from photo sensors or similiar detectors about ambient light levels near the device.
DeviceMotionEvent - Web APIs
the devicemotionevent provides web
developers with information about the speed of changes for the device's position and orientation.
DeviceOrientationEvent - Web APIs
the deviceorientationevent provides web
developers with information from the physical orientation of the device running the web page.
Document.domain - Web APIs
o set domain under one of the following conditions: the document is inside a sandboxed <iframe> the document has no browsing context the document's effective domain is null the given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it) the document-domain feature-policy is enabled examples getting the domain for the uri http://
developer.mozilla.org/docs/web, this example sets currentdomain to the string "
developer.mozilla.org".
Document.hasFocus() - Web APIs
tion checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function openwindow() { window.open('https://
developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status comment html living standardthe definition of 'document.hasfocus()' in that specification.
Document.importNode() - Web APIs
with gecko 28.0 (firefox 28 / thunderbird 28 / seamonkey 2.25 / firefox os 1.3), the console warns
developers not to omit the argument.
Document.origin - Web APIs
syntax var origin = document.origin; examples var origin = document.origin; // on this page, returns:'https://
developer.mozilla.org' var origin = document.origin; // on "about:blank", returns:'null' var origin = document.origin; // on "data:text/html,<b>foo</b>", returns:'null' ...
Document.registerElement() - Web APIs
the mytag variable holds a constructor that you can use to create a my-tag element in the document as follows: document.body.appendchild(new mytag()); this inserts an empty my-tag element that will be visible if you use the browser's
developer tools.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
e the following document, for example: <!doctype html> <html> <head> <title>my document</title> </head> <body> <h1>header</h1> <p> paragraph </p> </body> </html> the dom tree for this looks like so: conserving whitespace characters in the dom is useful in many ways, but there are certain places where this makes certain layouts more difficult to implement, and causes problems for
developers who want to iterate through nodes in the dom.
Element.outerHTML - Web APIs
variable whose outerhtml property was set will still hold a reference to the original element: var p = document.getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://
developer.mozilla.org?a=b&c=d"; console.log(anc.outerhtml); // output: "<a href='https://
developer.mozilla.org?a=b&c=d'></a>" specification specification status comment dom parsing and serializationthe definition of 'element.outerhtml' in that specification.
EventTarget.addEventListener() - Web APIs
example of options usage html <div class="outer"> outer, once & none-once <div class="middle" target="_blank"> middle, capture & none-capture <a class="inner1" href="https://www.mozilla.org" target="_blank"> inner1, passive & preventdefault(which is not allowed) </a> <a class="inner2" href="https://
developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) </a> </div> </div> css .outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; margin: 15px; text-decoration: none; } .outer { border: 1px solid red; color: red; } .middle { border: 1px solid green; color: green; width: 460px; } .inner1, .inner2...
File.type - Web APIs
developers are advised not to rely on this property as a sole validation scheme.
Using the Frame Timing API - Web APIs
firefox performance tool firefox's performance tool allows the
developer to record a piece of the user's interaction and the data obtained during the recording is used to create a profile of the browser's activity.
Gamepad.timestamp - Web APIs
the idea behind this is to allow
developers to determine if the axes and button data have been updated from the hardware.
Gamepad API - Web APIs
the gamepad api is a way for
developers to access and respond to signals from gamepads and other game controllers in a simple, consistent way.
Geolocation API - Web APIs
the
developer can now access this location information in a couple of different ways: geolocation.getcurrentposition(): retrieves the device's current location.
GlobalEventHandlers.onkeypress - Web APIs
*/ alert("yesss!!!"); location.assign("https://
developer.mozilla.org/"); } return true; }; })(); note: a more complete framework for capturing the typing of hidden words is available on github.
HTMLAnchorElement.referrerPolicy - Web APIs
examples var elt = document.createelement("a"); var linktext = document.createtextnode("my link"); elt.appendchild(linktext); elt.href = "https://
developer.mozilla.org/"; elt.referrerpolicy = "no-referrer"; var div = document.getelementbyid("divaround"); div.appendchild(elt); // when clicked, the link will not send a referrer header.
HTMLHyperlinkElementUtils.host - Web APIs
syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://
developer.mozilla.org/htmlhyperlinkelementutils.host" anchor.host == "
developer.mozilla.org" anchor.href = "https://
developer.mozilla.org:443/htmlhyperlinkelementutils.host" anchor.host == "
developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://
developer.mozilla.org:4097/htmlhyperlinkelementutils.host" anchor.host == "
developer.mozilla.org:4097" specifications specification status comment html livi...
HTMLHyperlinkElementUtils.hostname - Web APIs
syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://
developer.mozilla.org/docs/htmlhyperlinkelementutils.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.hostname; // returns:'
developer.mozilla.org' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.hostname' in that specification.
HTMLHyperlinkElementUtils.href - Web APIs
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://
developer.mozilla.org/htmlhyperlinkelementutils/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://
developer.mozilla.org/htmlhyperlinkelementutils/href' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.href' in that specification.
HTMLHyperlinkElementUtils.origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var result = window.location.origin; // returns:'https://
developer.mozilla.org' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.origin' in that specification.
HTMLHyperlinkElementUtils.password - Web APIs
syntax string = object.password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@
developer.mozilla.org/docs/htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.password; // returns:'flabada' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.password' in that specification.
HTMLHyperlinkElementUtils.pathname - Web APIs
syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://
developer.mozilla.org/docs/htmlhyperlinkelementutils.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/htmlhyperlinkelementutils.pathname' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.pathname' in that specification.
HTMLHyperlinkElementUtils.port - Web APIs
syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://
developer.mozilla.org:443/docs/htmlhyperlinkelementutils.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.port; // returns:'443' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.port' in that specification.
HTMLHyperlinkElementUtils.protocol - Web APIs
syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://
developer.mozilla.org/htmlhyperlinkelementutils.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.protocol; // returns:'https:' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.protocol' in that specification.
HTMLHyperlinkElementUtils.search - Web APIs
syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://
developer.mozilla.org/docs/htmlhyperlinkelementutils.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html living stan...
HTMLHyperlinkElementUtils.toString() - Web APIs
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://
developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://
developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring' specifications specification status comment html living standard living standard ...
HTMLHyperlinkElementUtils.username - Web APIs
syntax string = object.username; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@
developer.mozilla.org/docs/htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.username; // returns:'anonymous' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.username' in that specification.
Using IndexedDB - Web APIs
this new functionality enables
developers to specify a locale when creating an index using idbobjectstore.createindex() (check out its parameters.) in such cases, when a cursor is then used to iterate through the dataset, and you want to specify locale-aware sorting, you can use a specialized idblocaleawarekeyrange.
IndexedDB API - Web APIs
however, the synchronous api may be reintroduced if there is enough demand from web
developers.
Location: host - Web APIs
syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://
developer.mozilla.org/location.host" anchor.host == "
developer.mozilla.org" anchor.href = "https://
developer.mozilla.org:443/location.host" anchor.host == "
developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://
developer.mozilla.org:4097/location.host" anchor.host == "
developer.mozilla.org:4097" specifications specification status comment html living standardthe definition of 'host' in that specifi...
Location: hostname - Web APIs
syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://
developer.mozilla.org/docs/location.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.hostname; // returns:'
developer.mozilla.org' specifications specification status comment html living standardthe definition of 'hostname' in that specification.
Location: href - Web APIs
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://
developer.mozilla.org/location/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://
developer.mozilla.org/location/href' specifications specification status comment html living standardthe definition of 'href' in that specification.
Location: origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var result = window.location.origin; // returns:'https://
developer.mozilla.org' specifications specification status comment html living standardthe definition of 'origin' in that specification.
Location: password - Web APIs
syntax string = object.password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@
developer.mozilla.org/docs/location.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.password; // returns:'flabada' ...
Location: pathname - Web APIs
syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://
developer.mozilla.org/docs/location.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/location.pathname' specifications specification status comment html living standardthe definition of 'pathname' in that specification.
Location: port - Web APIs
syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://
developer.mozilla.org:443/docs/location.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.port; // returns:'443' specifications specification status comment html living standardthe definition of 'location.port' in that specification.
Location: protocol - Web APIs
syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://
developer.mozilla.org/location.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.protocol; // returns:'https:' specifications specification status comment html living standardthe definition of 'protocol' in that specification.
Location: search - Web APIs
syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://
developer.mozilla.org/docs/location.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html living standardthe definitio...
Location: toString() - Web APIs
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://
developer.mozilla.org/docs/location/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://
developer.mozilla.org/docs/location/tostring' specifications specification status comment html living standard living standard ...
Location: username - Web APIs
syntax string = object.username; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@
developer.mozilla.org/docs/location.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.username; // returns:'anonymous' ...
Locks.name - Web APIs
the name is selected by the
developer to represent an abstract resource for which use is being coordinated across multiple tabs, workers, or other code within the origin.
MediaDevices.getUserMedia() - Web APIs
for example, this line in the http headers will enable use of a camera for the document and any embedded <iframe> elements that are loaded from the same origin: feature-policy: camera 'self' this will request access to the microphone for the current origin and the specific origin https://
developer.mozilla.org: feature-policy: microphone 'self' https://
developer.mozilla.org if you're using getusermedia() within an <iframe>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission.
MediaKeyMessageEvent() - Web APIs
options options are as follows: messagetype: a
developer-defined message type that allows applications to differentiate messages without parsing them.
Media Source API - Web APIs
the two most common use cases for dash involve watching content “on demand” or “live.” on demand allows a
developer to take their time transcoding the assets into multiple resolutions of various quality.
Web-based protocol handlers - Web APIs
:</p> <textarea> <?php echo(htmlspecialchars($value, ent_quotes, 'utf-8')); ?> </textarea> </body> </html> references http://www.w3.org/tr/2011/wd-html5-20110525/timers.html#custom-handlers see also window.navigator.registercontenthandler nsiprotocolhandler (xul only) registerprotocolhandler enhancing the federated web at mozilla webdev register a custom protocolhandler at google
developers.
Navigator.share() - Web APIs
the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://
developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); sharing files ...
Node.cloneNode() - Web APIs
with gecko 28.0 (firefox 28 / thunderbird 28 / seamonkey 2.25 / firefox os 1.3)), the console warned
developers not to omit the argument.
Page Visibility API - Web APIs
t advance to the next slide unless the user is viewing the page an application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible a page wants to detect when it is being prerendered so it can keep accurate count of page views a site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off)
developers have historically used imperfect proxies to detect this.
PaymentResponse - Web APIs
allows the
developer to revalidate any requested user data (e.g., the phone number or the email address) if it changes.
Using the Payment Request API - Web APIs
for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }) this object provides the
developer with access to details they can use to complete the logical steps required after the payment completes, such as an email address to contact the customer, a shipping address for mailing goods out to them, etc.
Payment Request API - Web APIs
accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without
developers needing to do anything.
performance.clearResourceTimings() - Web APIs
example function load_resource() { var image = new image(); image.src = "https://
developer.mozilla.org/static/img/opengraph-logo.png"; } function clear_performance_timings() { if (performance === undefined) { log("browser does not support web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported = typeof performance.clearresourcetimings == "function"; if (supported) { console.log("run: performa...
Permissions API - Web APIs
the permissions api provides the tools to allow
developers to implement a better user experience as far as permissions are concerned.
Pointer events - Web APIs
this section contains information about pointer event and mouse event interaction and the ramifications for application
developers.
Push API - Web APIs
this lets
developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.
RTCIceServer - Web APIs
because many older books and examples still use this, we include it to help
developers update their code or make sense of older examples.
RTCIdentityErrorEvent.idp - Web APIs
syntax var idp = event.idp; event.idp = "
developer.mozilla.org"; example pc.onidpassertionerror = function( ev ) { alert("the idp named '" + ev.idp + "' encountered an error " + "while generating an assertion."); } ...
RTCIdentityErrorEvent.loginUrl - Web APIs
syntax var loginurl = event.loginurl; event.loginurl = "https://
developer.mozilla.org/fakeurl"; example pc.onidpassertionerror = function( ev ) { alert("the idp requested an authentication" + " to be performed at th3 url '" + ev.url + "'."); } ...
RTCPeerConnection.setIdentityProvider() - Web APIs
example var pc = new peerconnection(); pc.setidentityassertion("
developer.mozilla.org"); specifications specification status comment identity for webrtcthe definition of 'rtcpeerconnection.setidentityprovider()' in that specification.
RTCRtpStreamStats - Web APIs
this is a fairly technical part of how codecs work and while the higher this value is, the more errors occurred in the stream, generally most of the time this value is only interesting to very intensively hardcore media
developers.
ReadableStreamBYOBReader - Web APIs
the readablestreambyobreader interface of the streams api represents a byob ("bring your own buffer") reader that can be used to read stream data supplied by the
developer (e.g.
RenderingContext - Web APIs
horthand renderingcontext, methods and properties which can make use of any of these interfaces can be specified and written more easily; since <canvas> supports several rendering systems, it's helpful from a specification and browser implementation perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementation detail, and isn't something web
developers directly use.
Sensor APIs - Web APIs
sensor apis concepts and usage although the generic sensor api specification defines a sensor interface, as a web
developer you will never use it.
ServiceWorkerGlobalScope - Web APIs
developers should keep in mind that the serviceworker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.
Storage.setItem() - Web APIs
(safari sets the quota to 0 bytes in private mode, unlike other browsers, which allow storage in private mode using separate data containers.) hence
developers should make sure to always catch possible exceptions from setitem().
Using readable streams - Web APIs
as a javascript
developer, programmatically reading and manipulating streams of data received over the network, chunk by chunk, is very useful!
SubtleCrypto - Web APIs
the specification expects that most
developers will use the indexeddb api to store cryptokey objects.
SyncEvent - Web APIs
syncevent.tag read only returns the
developer-defined identifier for this syncevent.
SyncManager - Web APIs
syncmanager.gettags return a list of
developer-defined identifiers for syncmanager registration.
URL.host - Web APIs
examples let url = new url('/docs/web/api/url/host'); console.log(url.host); // "
developer.mozilla.org" url = new url('https://
developer.mozilla.org:443/docs/web/api/url/host'); console.log(url.host); // "
developer.mozilla.org" // the port number is not included because 443 is the scheme's default port url = new url('https://
developer.mozilla.org:4097/docs/web/api/url/host'); console.log(url.host); // "
developer.mozilla.org:4097" specifications specification status comment ...
URL.hostname - Web APIs
examples const url = new url('/docs/web/api/url/hostname'); console.log(url.hostname); // logs: '
developer.mozilla.org' specifications specification status comment urlthe definition of 'url.hostname' in that specification.
URL.password - Web APIs
examples const url = new url('https://anonymous:flabada@
developer.mozilla.org/docs/web/api/url/password'); console.log(url.password) // logs "flabada" specifications specification status comment urlthe definition of 'url.password' in that specification.
URL.username - Web APIs
examples const url = new url('https://anonymous:flabada@
developer.mozilla.org/docs/web/api/url/username'); console.log(url.username) // logs "anonymous" specifications specification status comment urlthe definition of 'username' in that specification.
URLUtilsReadOnly.hash - Web APIs
syntax string = object.hash; examples // in a web worker, on the page https://
developer.mozilla.org/docs/urlutilsreadonly.hash#example var result = window.self.hash; // returns:'#hash' specifications specification status comment urlthe definition of 'urlutilsreadonly.hash' in that specification.
URLUtilsReadOnly.host - Web APIs
syntax string = object.host; examples // in a web worker, on the page https://
developer.mozilla.org/urlutilsreadonly.host var result = window.self.host; // returns:'
developer.mozilla.org:80' specifications specification status comment urlthe definition of 'urlutilsreadonly.host' in that specification.
URLUtilsReadOnly.hostname - Web APIs
syntax string = object.hostname; examples // in a web worker, on the page https://
developer.mozilla.org/urlutilsreadonly.hostname var result = window.self.hostname; // returns:'
developer.mozilla.org' specifications specification status comment urlthe definition of 'urlutilsreadonly.hostname' in that specification.
URLUtilsReadOnly.href - Web APIs
syntax string = object.href; examples // in a web worker, on the page https://
developer.mozilla.org/urlutilsreadonly.href var result = window.self.href; // returns:'https://
developer.mozilla.org/urlutilsreadonly.href' specifications specification status comment urlthe definition of 'urlutilsreadonly.href' in that specification.
URLUtilsReadOnly.origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var result = self.location.origin; // returns:'https://
developer.mozilla.org:443' specifications specification status comment urlthe definition of 'urlutilsreadonly.origin' in that specification.
URLUtilsReadOnly.pathname - Web APIs
syntax string = object.pathname; examples // in a web worker, on the page https://
developer.mozilla.org/urlutilsreadonly.pathname var result = window.self.pathname; // returns:'/urlutilsreadonly.pathname' specifications specification status comment urlthe definition of 'urlutilsreadonly.pathname' in that specification.
URLUtilsReadOnly.port - Web APIs
syntax string = object.port; examples // in a web worker, on the page https://
developer.mozilla.org/urlutilsreadonly.port var result = window.self.port; // returns:'80' specifications specification status comment urlthe definition of 'urlutilsreadonly.port' in that specification.
URLUtilsReadOnly.protocol - Web APIs
syntax string = object.protocol; examples // in a web worker, on the page https://
developer.mozilla.org/urlutilsreadonly.href var result = window.self.protocol; // returns:'https:' specifications specification status comment urlthe definition of 'urlutilsreadonly.protocol' in that specification.
URLUtilsReadOnly.search - Web APIs
syntax string = object.search; examples // in a web worker, on the page https://
developer.mozilla.org/docs/urlutilsreadonly.href?t=67 var result = window.self.search; // returns:'?t=67' specifications specification status comment urlthe definition of 'urlutilsreadonly.search' in that specification.
URLUtilsReadOnly.toString() - Web APIs
syntax string = object.tostring(); examples // in a web worker, on the page https://
developer.mozilla.org/urlutilsreadonly.href var result = window.self.tostring(); // returns:'https://
developer.mozilla.org/urlutilsreadonly.href' browser compatibility the compatibility table in this page is generated from structured data.
USBEndpoint - Web APIs
examples while sometimes the
developer knows ahead of time the exact layout of a device's endpoints there are cases where this must be discovered at runtime.
User Timing API - Web APIs
the user timing interface allows the
developer to create application specific timestamps that are part of the browser's performance timeline.
Using DTMF with WebRTC - Web APIs
this article offers a brief high-level overview of how dtmf works over webrtc, then provides a guide for everyday
developers about how to send dtmf over an rtcpeerconnection.
Migrating from webkitAudioContext - Web APIs
this article attempts to summarize the areas where
developers are likely to encounter these problems and provide examples on how to port such code to standards based audiocontext, which will work across different browser engines.
window.requestIdleCallback() - Web APIs
this enables
developers to perform background and low priority work on the main event loop, without impacting latency-critical events such as animation and input response.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
|*| |*| https://
developer.mozilla.org/docs/dom/window.setinterval |*| |*| syntax: |*| var timeoutid = window.settimeout(func, delay[, arg1, arg2, ...]); |*| var timeoutid = window.settimeout(code, delay); |*| var intervalid = window.setinterval(func, delay[, arg1, arg2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ (function() { settimeout(function(arg1) { if (arg1 === 'test') { //...
Worklet - Web APIs
the worklet interface is a lightweight version of web workers and gives
developers access to low-level parts of the rendering pipeline.
XMLHttpRequest.abort() - Web APIs
var xhr = new xmlhttprequest(), method = "get", url = "https://
developer.mozilla.org/"; xhr.open(method, url, true); xhr.send(); if (oh_noes_we_need_to_cancel_right_now_or_else) { xhr.abort(); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.onreadystatechange - Web APIs
examples const xhr = new xmlhttprequest(), method = "get", url = "https://
developer.mozilla.org/"; xhr.open(method, url, true); xhr.onreadystatechange = function () { // in local files, status is 0 upon success in mozilla firefox if(xhr.readystate === xmlhttprequest.done) { var status = xhr.status; if (status === 0 || (status >= 200 && status < 400)) { // the request has been completed successfully console.log(xhr.responsetext); } else { // oh ...
XMLHttpRequest.sendAsBinary() - Web APIs
/*\ |*| |*| :: xmlhttprequest.prototype.sendasbinary() polyfill :: |*| |*| https://
developer.mozilla.org/docs/dom/xmlhttprequest#sendasbinary() |*| \*/ if (!xmlhttprequest.prototype.sendasbinary) { xmlhttprequest.prototype.sendasbinary = function (sdata) { var nbytes = sdata.length, ui8data = new uint8array(nbytes); for (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; } /* send as arraybufferview...: */ this.send(ui8data)...
XMLHttpRequestEventTarget.onabort - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://
developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onabort = function () { console.log('** the request was aborted'); }; xmlhttp.send(); //..
XMLHttpRequestEventTarget.onerror - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://
developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onerror = function () { console.log("** an error occurred during the transaction"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onload - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://
developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onload = function () { // do something with the retrieved data ( found in xmlhttp.response ) }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onloadstart - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://
developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onloadstart = function () { console.log("download underway"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onprogress - Web APIs
xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://
developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XRInputSource.profiles - Web APIs
e separated by hyphen ("-") characters if the platform makes it available, the usb vendor and product id may be provided but cannot be relied upon does not uniquely identify a specific device; rather, it identifies a configuration that the product is capable of using does not provide information about handedness of the device, if applicable the webxr input profiles registry is used by device
developers and browser
developers to attempt to ensure that a given device will report the same profile strings regardless of which browser or other user agent you use.
Resources - Web APIs
at ibm
developerworks xslt tutorial at zvon.org xpath tutorial at zvon.org using the mozilla javascript interface to do xsl transformations at mozilla.org mozilla.org's xslt project page, which includes a frequently encountered issues section.
CSS Shapes - CSS: Cascading Style Sheets
reference properties shape-image-threshold shape-margin shape-outside data types <basic-shape> guides overview of css shapes shapes from box values basic shapes shapes from images edit shape paths in css — firefox
developer tools external resources a list of css shapes resources css shapes 101 creating non-rectangular layouts with css shapes how to use css shapes in your web design how to get started with css shapes what i learned in one weekend with css shapes css vs.
CSS Layout cookbook - CSS: Cascading Style Sheets
in addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a
developer.
Privacy and the :visited selector - CSS: Cascading Style Sheets
*/ } :visited { outline-color: orange; /* visited links have an orange outline */ background-color: green; /* visited links have a green background */ color: yellow; /* visited links have yellow colored text */ } impact on web
developers overall, these restrictions shouldn't affect web
developers too significantly.
Viewport concepts - CSS: Cascading Style Sheets
to tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen,
developers can include a viewport meta tag, like the following: <meta name="viewport" content="width=device-width"> the width property controls the size of the viewport.
background-repeat - CSS: Cascading Style Sheets
ound repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://
developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is matched with a different value of background-repeat.
content - CSS: Cascading Style Sheets
html <ul> <li><a id="moz" href="http://www.mozilla.org/"> mozilla home page</a></li> <li><a id="mdn" href="https://
developer.mozilla.org/"> mozilla
developer network</a></li> </ul> css a { text-decoration: none; border-bottom: 3px dotted navy; } a::after { content: " (" attr(id) ")"; } #moz::before { content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); } #mdn::before { content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png"); } li { margin: 1em; } result elem...
display - CSS: Cascading Style Sheets
the <display-legacy> methods allow the same results with single keyword values, and should be favoured by
developers until the two keyword values are better supported.
env() - CSS: Cascading Style Sheets
originally provided by the ios browser to allow
developers to place their content in a safe area of the viewport, the safe-area-inset-* values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays.
opacity - CSS: Cascading Style Sheets
easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result setting opacity on hover html <img src="//
developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="146" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; } result specifications specification status comment ...
Guide to scroll anchoring - CSS: Cascading Style Sheets
in bug 1584285 the layout.css.scroll-anchoring.suppressions.enabled flag was added to firefox nightly in order to allow the disabling of these triggers further reading explainer document on the wicg site scroll anchoring for web
developers on the chromium blog implement a pin-to-bottom scrolling element using scroll anchoring ...
pointer-events - CSS: Cascading Style Sheets
html <ul> <li><a href="https://
developer.mozilla.org">mdn</a></li> <li><a href="http://example.com">example.com</a></li> </ul> css a[href="http://example.com"] { pointer-events: none; } result specifications specification status comment scalable vector graphics (svg) 2the definition of 'pointer-events' in that specification.
text-size-adjust - CSS: Cascading Style Sheets
supporting inflation, none in other cases (and then not modifiable).applies toall elementsinheritedyespercentagesyes, refer to the corresponding size of the text fontcomputed valueas specifiedanimation typediscrete formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so
developers can elect to turn it off by specifying a vlaue of none: p { -webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification status comment css mobile text size adjustment module level 1the definition of 'text-size-adjust' in that specification.
Event reference
developer tool-specific events event name event type specification fired when...
HTML attribute reference - HTML: Hypertext Markup Language
html specifications try to make this as
developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.
<img>: The Image Embed element - HTML: Hypertext Markup Language
<a href="https://
developer.mozilla.org"> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="visit the mdn site"> </a> using the srcset attribute in this example we include a srcset attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution devices.
<input type="file"> - HTML: Hypertext Markup Language
// https://
developer.mozilla.org/docs/web/media/formats/image_types const filetypes = [ "image/apng", "image/bmp", "image/gif", "image/jpeg", "image/pjpeg", "image/png", "image/svg+xml", "image/tiff", "image/webp", "image/x-icon" ]; function validfiletype(file) { return filetypes.includes(file.type); } the returnfilesize() function takes a number (of bytes, taken from the current file's size p...
<menuitem> - HTML: Hypertext Markup Language
example html content <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://
developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.
<noframes>: The Frame Fallback element - HTML: Hypertext Markup Language
<frameset cols="50%,50%"> <frame src="https://
developer.mozilla.org/en/html/element/frameset" /> <frame src="https://
developer.mozilla.org/en/html/element/frame" /> <noframes><p>it seems your browser does not support frames or is configured to not allow them.</p></noframes> </frameset> specifications specification status comment html5the definition of 'noframes' in that specification.
class - HTML: Hypertext Markup Language
though the specification doesn't put requirements on the name of classes, web
developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element.
contextmenu - HTML: Hypertext Markup Language
i am learning contextmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://
developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://
developer.mozilla.org/media/img/promote/p...
dir - HTML: Hypertext Markup Language
as the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web
developers use this attribute instead of the related css properties when possible.
Resource URLs - HTTP
note: it is recommended that web and extension
developers don’t try to use resource urls anymore.
CORS errors - HTTP
these steps may help you do so: navigate to the web site or web app in question and open the
developer tools.
Compression in HTTP - HTTP
in practice, web
developers don't need to implement compression mechanisms, both browsers and servers have it implemented already, but they have to be sure that the server is configured adequately.
Connection management in HTTP/1.x - HTTP
http pipelining http pipelining is not activated by default in modern browsers: buggy proxies are still common and these lead to strange and erratic behaviors that web
developers cannot foresee and diagnose easily.
Using Feature Policy - HTTP
for example, allow all browsing contexts within this iframe to use fullscreen: <iframe src="https://example.com..." allow="fullscreen"></iframe> this is equivalent to: <iframe src="https://example.com..." allow="fullscreen 'src'"></iframe> this example allows <iframe> content on a particular origin to access the user's location: <iframe src="https://google-
developers.appspot.com/demos/..." allow="geolocation https://google-
developers.appspot.com"></iframe> similar to the http header, several features can be controlled at the same time by specifying a semicolon-separated list of policy directives.
Clear-Site-Data - HTTP
it allows web
developers to have more control over the data stored locally by a browser for their origins.
Host - HTTP
examples host:
developer.cdn.mozilla.net specifications specification title rfc 7230, section 5.4: host hypertext transfer protocol (http/1.1): message syntax and routing ...
Origin - HTTP
examples origin: https://
developer.mozilla.org specifications specification comment rfc 6454, section 7: origin the web origin concept fetchthe definition of 'origin header' in that specification.
Referer - HTTP
examples referer: https://
developer.mozilla.org/docs/web/javascript specifications specification title rfc 7231, section 5.5.2: referer hypertext transfer protocol (http/1.1): semantics and content ...
Timing-Allow-Origin - HTTP
examples to allow any resource to see timing resources: timing-allow-origin: * to allow https://
developer.mozilla.org to see timing resources, you can specify: timing-allow-origin: https://
developer.mozilla.org specifications specification status comment resource timing level 3the definition of 'timing-allow-origin' in that specification.
Trailer - HTTP
http/1.1 200 ok content-type: text/plain transfer-encoding: chunked trailer: expires 7\r\n mozilla\r\n 9\r\n
developer\r\n 7\r\n network\r\n 0\r\n expires: wed, 21 oct 2015 07:28:00 gmt\r\n \r\n specifications specification title rfc 7230, section 4.4: trailer hypertext transfer protocol (http/1.1): message syntax and routing rfc 7230, section 4.1.2: chunked trailer part hypertext transfer protocol (http/1.1): message syntax and routing ...
Transfer-Encoding - HTTP
a chunked response looks like this: http/1.1 200 ok content-type: text/plain transfer-encoding: chunked 7\r\n mozilla\r\n 9\r\n
developer\r\n 7\r\n network\r\n 0\r\n \r\n specifications specification title rfc 7230, section 3.3.1: transfer-encoding hypertext transfer protocol (http/1.1): message syntax and routing ...
304 Not Modified - HTTP
many
developer tools' network panels of browsers create extraneous requests leading to 304 responses, so that access to the local cache is visible to
developers.
About JavaScript - JavaScript
each of mozilla's javascript engines expose a public api which application
developers can use to integrate javascript into their software.
Introduction - JavaScript
to open the web console (ctrl+shift+i on windows and linux or cmd-option-k on mac), open the tools menu in firefox, and select "
developer ▶ web console".
Date - JavaScript
it needs real-world feedback from web
developers, but is not yet ready for production use!
FinalizationRegistry - JavaScript
notes on cleanup callbacks some notes on cleanup callbacks:
developers shouldn't rely on cleanup callbacks for essential program logic.
Object.freeze() - JavaScript
var employee = { name: "mayank", designation: "
developer", address: { street: "rohini", city: "delhi" } }; object.freeze(employee); employee.name = "dummy"; // fails silently in non-strict mode employee.address.city = "noida"; // attributes of child object can be modified console.log(employee.address.city) // output: "noida" to make an object immutable, recursively freeze each property which is of type object (deep freeze).
Proxy - JavaScript
get the "doccookies" object here: https://
developer.mozilla.org/docs/dom/document.cookie#a_little_framework.3a_a_complete_cookies_reader.2fwriter_with_full_unicode_support */ var doccookies = new proxy(doccookies, { get: function (otarget, skey) { return otarget[skey] || otarget.getitem(skey) || undefined; }, set: function (otarget, skey, vvalue) { if (skey in otarget) { return false; } return otarget.setitem(skey, vvalue); },...
Planned changes to shared memory - JavaScript
there is standardization work ongoing that enables
developers to create sharedarraybuffer objects again, but changes are needed in order to be use these across threads (i.e., postmessage() for sharedarraybuffer objects throws by default).
WebAssembly.Instance() constructor - JavaScript
syntax important: since instantiation for large modules can be expensive,
developers should only use the instance() constructor when synchronous instantiation is absolutely required; the asynchronous webassembly.instantiatestreaming() method should be used at all other times.
WebAssembly.Module() constructor - JavaScript
syntax important: since compilation for large modules can be expensive,
developers should only use the module() constructor when synchronous compilation is absolutely required; the asynchronous webassembly.compilestreaming() method should be used at all other times.
WebAssembly.Module.customSections() - JavaScript
(read high level structure for information on section structures, and how normal sections ("known sections") and custom sections are distinguished.) this provides
developers with a way to include custom data inside wasm modules for other purposes, for example the name custom section, which allows
developers to provide names for all the functions and locals in the module (like "symbols" in a native build).
decodeURI() - JavaScript
examples decoding a cyrillic url decodeuri('https://
developer.mozilla.org/ru/docs/javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "https://
developer.mozilla.org/ru/docs/javascript_шеллы" catching errors try { var a = decodeuri('%e0%a4%a'); } catch(e) { console.error(e); } // urierror: malformed uri sequence specifications specification ecmascript (ecma-262)the definition of 'decodeuri' in that specification.
Destructuring assignment - JavaScript
function parseprotocol(url) { const parsedurl = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); if (!parsedurl) { return false; } console.log(parsedurl); // ["https://
developer.mozilla.org/web/javascript", "https", "
developer.mozilla.org", "en-us/web/javascript"] const [, protocol, fullhost, fullpath] = parsedurl; return protocol; } console.log(parseprotocol('https://
developer.mozilla.org/web/javascript')); // "https" object destructuring basic assignment const user = { id: 42, is_verified: true }; const {id, is_verified} = user; console.log(id...
instanceof - JavaScript
note for mozilla
developers: in code using xpcom, instanceof has special effect: obj instanceof xpcominterface (e.g.
new operator - JavaScript
the new operator lets
developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
JavaScript shells - JavaScript
jsconsole.com -- an open-source javascript console with the ability to easily link to particular expressions javascript shell (web page) - also available as part of the extension
developer's extension jash: javascript shell - a dhtml based shell that gives you command line access to a web page.
display - Web app manifests
type string mandatory no the display member is a string that determines the
developers’ preferred display mode for the website.
serviceworker - Web app manifests
type object mandatory no the serviceworker member describes a service worker that the
developer intends to install to control the pwa.
Progressive web app structure - Progressive web apps (PWAs)
the streams api allows
developers to have direct access to data streaming from the server — if you want to perform an operation on the data (for example, adding a filter to a video), you no longer need to wait for all of it to be downloaded and converted to a blob (or whatever) — you can start right away.
divisor - SVG: Scalable Vector Graphics
%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <number> default value sum of all values in k...
href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://
developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
kernelMatrix - SVG: Scalable Vector Graphics
ody, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none ...
mode - SVG: Scalable Vector Graphics
seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending2); transform:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal animatable ...
preserveAlpha - SVG: Scalable Vector Graphics
0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);"/> </svg> usage notes default value false value true | false ani...
target - SVG: Scalable Vector Graphics
ntext (e.g., a browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://
developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://
developer.mozilla.org" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://
developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> </svg> usage notes value _self | _pare...
xlink:href - SVG: Scalable Vector Graphics
<a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://
developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
Compatibility sources - SVG: Scalable Vector Graphics
the following sources are used for the compatibility tables on svg elements and attributes: https://
developer.mozilla.org/en/svg_in_firefox together with its revision history for firefox http://www.webkit.org/projects/svg/status.xml together with its recorded archive for webkit, safari and chrome http://www.opera.com/docs/specs/opera9/svg/ and accompanying pages for opera >= 9, http://www.opera.com/docs/specs/opera8/ for opera 8 http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx for hints on ie9 support status the svg support charts at codedread.com for basic checks against the w3c test suite wikipedia for basic hints, not normative ...
<feBlend> - SVG: Scalable Vector Graphics
mple svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//
developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feblend>' in that specification.
Other Resources - SVG: Scalable Vector Graphics
here is a list of additional resources on svg: mozilla svg resources svg.org svgbasics tutorials w3c svg homepage svg wiki http://wiki.svg.org/index.php?title=..._configuration i moved this from the other resources category, not sure why it's in other resources -nickolay http://
developer.mozilla.org/en/docs...%28external%29 ...
Other content in SVG - SVG: Scalable Vector Graphics
this means, that you can use clips, masks, filters, rotations and all other tools of svg on the content: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="90" y="-65" width="128" height="146" transform="rotate(45)" xlink:href="https://
developer.mozilla.org/static/img/favicon144.png"/> </svg> screenshotlive sample embedding arbitrary xml since svg is an xml application, you can of course always embed arbitrary xml anywhere in an svg document.
Mixed content - Web security
to make it easier for web
developers to find mixed content errors, all blocked mixed content requests are logged to the security pane of the web console, as seen below: to fix this type of error, all requests to http content should be removed and replaced with content served over https.
Web security
this page explains what you should be aware of as a web
developer.
Web Components
concepts and usage as
developers, we all know that reusing code as much as possible is a good idea.