Search completed in 1.04 seconds.
Responsive design - Learn web development
previous overview: css layout next in the early days of web
design, pages were built to target a particular screen size.
... if the user had a larger or smaller screen than the
designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space.
... as more diverse screen sizes became available, the concept of responsive web
design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
...And 29 more matches
Responsive Design Mode - Firefox Developer Tools
responsive
design is the practice of
designing a website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.
...responsive
design mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices.
... 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).
...And 8 more matches
Accessibility information for UI designers and developers
when you
design user interfaces with accessibility in mind, they will work for more people.
... this page describes a number of
design-related aspects to look out for, in no particular order.
... there are also plug-ins available for
design software, like stark for sketch.
...And 4 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
in this article we will discuss the main essential components of responsive
design, with some links to further information where necessary.
...this tends to be termed responsive
design or adaptive
design, two related but different approaches.
...read more about responsive
design advantages and disadvantages.
...And 4 more matches
How can we design for all types of users? - Learn web development
this article provides basic tips to help you
design websites for any kind of user.
... objective: universal
design means
design for everybody, regardless of disabilities or technical constraints.
... this article lists the most important quick-wins for universal
design.
...And 3 more matches
Test your skills: Media Queries and Responsive Design - Learn web development
this aim of this task is to get you working with responsive web
design with a practical task.
... note: due to the need to test your
design in multiple screen sizes we do not have an interactive editor for this task.
...you can drag your window smaller or use the responsive
design view in firefox devtools to view this as if on a phone.
...your post should include: a descriptive title such as "assessment wanted for responsive web
design assessment".
xbDesignMode.js - Archive of obsolete content
* * the original code is netscape cross browser
design mode code.
... * * contributor(s): doron rosenberg <doron@netscape.com> (original author) * * * * ***** end license block ***** */ /* xb
designmode a javascript wrapper for browsers that support
designmode */ function xb
designmode(aiframe){ this.meditordocument = null; this.miframeelement = null; // argument is a string, therefore an id if ( (typeof(aiframe) == "string") && (document.getelementbyid(aiframe).tagname.tolowercase()=="iframe") ){ this.miframeelement = document.getelementbyid(aiframe); } else if( (typeof(aiframe)=="object") && (aiframe.tagname.tolowercase() == ...
..."iframe") ){ this.miframeelement = aiframe; } else { throw "argument isn't an id of an iframe or an iframe reference"; } if (this.miframeelement.contentdocument){ // gecko this.meditordocument = this.miframeelement.contentdocument; this.meditordocument.
designmode = "on"; } else { // ie this.meditordocument = this.miframeelement.contentwindow.document; this.meditordocument.
designmode = "on"; // ie needs to reget the document element after
designmode was set this.meditordocument = this.miframeelement.contentwindow.document; } } xb
designmode.prototype.execcommand = function (acommandname, aparam){ if (this.meditordocument) this.meditordocument.execcommand(acommandname, false, aparam); else throw "no meditordocument found"; } xb
design...
Document.designMode - Web APIs
document.
designmode controls whether the entire document is editable.
... syntax var mode = document.
designmode; document.
designmode = value; value a string indicating whether
designmode is (or should be) set to on or off.
... example make an <iframe>'s document editable: iframenode.contentdocument.
designmode = "on"; specifications specification status comment html living standardthe definition of '
designmode' in that specification.
History Service Design
this document provides a high-level overview of the overall history service
design of the places system.
... places is
designed to be a complete replacement for the firefox bookmarks and history systems using storage.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
10 abstraction abstraction, coding, codingscripting, glossary, programming language abstraction in computer programming is a way to reduce complexity and allow efficient
design and implementation in complex software systems.
...it may refer to: 33 block (css) css, codingscripting,
design, glossary, html a block on a webpage is an html element that appears on a new line, i.e.
... 39 bounding box bounding box, codingscripting,
design, glossary the bounding box of an element is the smallest possible rectangle (aligned with the axes of that element's user coordinate system) that entirely encloses it and its descendants.
...And 26 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
on october 11, 2002, wired launched a brand-new site
design that uses validating xhtml for its structure and a small collection of css files for its layout.
... the new
design clearly shows what some experts have been saying: that standards-based
design can be visually compelling and preserve the interface conventions we've come to expect from web pages.
... the brains and primary driving force behind this compelling new
design is douglas bowman, network
design manager for terra lycos, who graciously agreed to an interview and in the process shed a lot of light on what goes into a standards-based re
design.
...And 23 more matches
Index - Archive of obsolete content
120 ui/frame create html iframes, using bundled html, css and javascript, that can be added to a
designated area of the firefox user interface.
...on october 11, 2002, wired launched a brand-new site
design that uses validating xhtml for its structure and a small collection of css files for its layout.
... the new
design clearly shows what some experts have been saying: that standards-based
design can be visually compelling and preserve the interface conventions we've come to expect from web pages.
...And 22 more matches
Beginner's guide to media queries - Learn web development
media queries are a key part of responsive web
design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
... in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple
design might be made responsive.
... prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand how to use media queries, and the most common approach for using them to create responsive
designs.
...And 21 more matches
Signing an XPI - Archive of obsolete content
c:\> set path=c:\apps\nss-3.11.4\bin\;c:\apps\nss-3.11.4\lib\;c:\apps\nspr-4.6\lib\;%path% an easier way is to copy everything from your new directories c:\apps\nss-3.11.4\ and c:\apps\nspr-4.6\ including sub directories to the same directory - fx c:\apps\co
designing\ - and then run every command from that.
... c:\projects\co
designing\> certutil -n -d .
... c:\projects\co
designing\> certutil -n -d .
...And 20 more matches
Index - Learn web development
14 common questions codingscripting, infrastructure, learn, web, webmechanics this section of the learning area is
designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g.
... the html or css learning articles.) these articles are
designed to work on their own.
... 15 how can we
design for all types of users?
...And 20 more matches
Index - Web APIs
this article is
designed to help you make that decision.
... 398 using the css painting api css, css paint api, canvas, houdini, learn 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.
... 897 document.
designmode api, document, html dom, needscontent, needsspectable, property, reference, editor document.
designmode controls whether the entire document is editable.
...And 17 more matches
Index
found 353 pages: # page tags and summary 1 network security services jss, nss, needsmigration network security services (nss) is a set of libraries
designed to support cross-platform development of security-enabled client and server applications.
... nss offers lots of functionality; we'll walk through the list of modules,
design principles, and important relevant standards.
...in the most simple scenario, the programmer will provide a directory on your filesystem as a parameter to the init function, and nss is
designed to do the rest.
...And 13 more matches
A hybrid approach - Developer guides
this brings us to our third approach, which aims to avoid some of the shortcomings the separate sites and responsive
design approaches by combining them.
... the good responsive web
design is great — right now it is the best technique available for making layouts look as good as possible in a variety of circumstances.
...this keeps the complexity of altering content on the server side, but still allows our layouts to benefit from the flexibility and future-readiness of responsive
design.
...And 13 more matches
Rich-Text Editing in Mozilla - Developer guides
mozilla 1.3 introduces an implementation of microsoft® internet explorer's
designmode feature.
... the rich-text editing support in mozilla 1.3 supports the
designmode feature which turns html documents into rich-text editors.
... setting up rich-text editing rich-text editing is initialized by setting the
designmode property of a document to "on", such as the document inside an iframe.
...And 12 more matches
Variable fonts guide - CSS: Cascading Style Sheets
the reason for this is that most typefaces have very specific
designs for bolder weights and italics that often include completely different characters (lower-case 'a' and 'g' are often quite different in italics, for example).
... in order to most accurately reflect the typeface
design and avoid differences between browsers and how they may or may not synthesize the different styles, it's more accurate to load the specific font files where needed when using a non-variable font.
... introducing the 'variation axis' the heart of the new variable fonts format is the concept of an axis of variation describing the allowable range of that particular aspect of the typeface
design.
...And 11 more matches
Signing Mozilla apps for Mac OS X
on mac os x, part of this infrastructure is automatic signing of the ".app" folder using apple's co
design tool.
... for projects that don't use mozilla's release automation and would like to be signed for secure launching on os 10.8 mountain lion and later, this guide should provide some insight into how to make sure applications are signed correctly using apple's co
design tool.
... the co
design tool apple provides a tool called co
design; this command-line application is used to add a signature to an application bundle.
...And 10 more matches
How to build custom form controls - Learn web development
design, structure, and semantics before building a custom control, you should start by figuring out exactly what you want.
...this is especially true in a team environment when the people who
design the control's behavior are different from the ones who implement it.
...
designing new interactions is generally only an option for very large industry players who have enough reach that an interaction they create can become a standard.
...And 9 more matches
Debugger - Firefox Developer Tools
adddebuggee(global) add the global object
designated byglobal to the set of global objects this debugger instance is debugging.
... if the
designated global is already a debuggee, this has no effect.
... return this debugger’s debugger.object instance referring to the
designated global.
...And 9 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
almost no matter when you started creating web pages, odds are pretty high you have one or more
designs based on the classic "convoluted tables and lots of images" paradigm.
... whether you've sliced up a logo so it fits in well with the
design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same.
...thanks to an obscure corner of the css specification, every
design based on a precise layout of small images in table cells have become visual disasters just waiting to happen.
...And 8 more matches
The Business Benefits of Web Standards - Archive of obsolete content
introduction and context doing more with less seems to be the mission impossible for web
designers: addressing more customers, a broader audience, more diversity in terms of browsers, more accessibility, users asking for more speed, while spending less to maintain or re
design a web site.
... caught between a rock and a hard place, web
designers face a formidable challenge.
... site wide consistent look and feel by separating structure (or content) from presentation, web
designers have a lot to gain.
...And 7 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
hsl functional notation
designers and artists often prefer to work using the hsl (hue/saturation/luminosity) color method.
... using color wisely making the right choices when selecting colors when
designing a website can be a tricky process, especially if you aren't well-grounded in art,
design, or at least basic color theory.
... finding the right colors coming up with just the right colors can be tricky, especially without training in art or
design.
...And 7 more matches
Layout System Overview - Archive of obsolete content
the original
design of the layout system allowed for multiple, possibly different, presentations to be supported simultaneously from the same content model.
...one of the goals of the layout system's
design is to create parts of the presentation as they become available, rather than waiting for the entire document to be read, parsed, and then presented.
...the fundamentals of frames: block and line there are many types of frames that are
designed to model various formatting requirements of different html and xml elements.
...And 6 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
take a cruise through one aspect of the re
design with master styler eric meyer.
...i was privileged enough to have that chance recently: i was asked to re
design the amazing netscape fish cam page for a new millennium.
...i dove right in and decided to have some fun with with the re
design, which is why i rather like the final result.
...And 6 more matches
Frequently Asked Questions for Lightweight themes
there are hundreds of thousands community-
designed themes to choose from, with more added every day.
... start looking here for
designs that fit your style.
...you can easily preview a
design and install it without needing to restart.
...And 6 more matches
Web audio codec guide - Web media technologies
the effect of codec configuration on encoded audio output audio codecs typically employ cleverly-
designed and highly-complex mathematical algorithms to take source audio data and compress it to take substantially less space in memory or network bandwidth.
... lfe channels are specifically
designed to store low-frequency audio data, and are commonly used to provide audio data for subwoofers, for example.
... the audio frequency bandwidth comes into play especially vividly when a codec is
designed or configured to represent human speech rather than a broad range of sounds.
...And 6 more matches
Grids - Learn web development
a grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our
design elements.
... they help us to create
designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.
... creating your grid in css having decided on the grid that your
design needs, you can use css grid layout to create that grid in css and place items onto it.
...And 5 more matches
Introduction to CSS layout - Learn web development
the page layout techniques we'll be covering in more detail in this module are normal flow the display property flexbox grid floats positioning table layout multiple-column layout each technique has its uses, advantages, and disadvantages, and no technique is
designed to be used in isolation.
... by understanding what each method is
designed for you will be in a good place to understand which is the best layout tool for each task.
... table layout — features
designed for styling the parts of an html table can be used on non-table elements using display: table and associated properties.
...And 5 more matches
Legacy layout methods - Learn web development
layout and grid systems before css grid layout it may seem surprising to anyone coming from a
design background that css didn’t have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like
designs.
...this is a valuable tool for responsive web
design.
... the easiest type of grid framework to create is a fixed width one — we just need to work out how much total width we want our
design to be, how many columns we want, and how wide the gutters and columns should be.
...And 5 more matches
Edit fonts - Firefox Developer Tools
variable fonts, or opentype font variations, define a new font file format that allows the font
designer to include multiple variations of a typeface inside a single font file.
...although it isn't required that these axes be defined for every font, if the font
designer does implement a registered axis, its behavior must follow the defined behavior.
...font
designers can define whatever axis they want; each one needs to be given a unique four-character tag.
...And 5 more matches
Web video codec guide - Web media technologies
in the end, the decisions about what sacrifices you're able to make are entirely up to you and/or your
design team.
... codec details av1 the aomedia video 1 (av1) codec is an open format
designed by the alliance for open media specifically for internet video.
...av1 is fully royalty-free and is
designed for use by both the <video> element and by webrtc.
...And 5 more matches
Developing New Mozilla Features - Archive of obsolete content
designate someone on your team to be involved with the mozilla.org cvs repository on a regular basis the ease of integrating your feature will increase if someone on your team is intimately involved with the source tree.
...and you'll miss the early discussion phase when you can add your perspective to the
design work.
...
design in the open post your plans to the appropriate newsgroup.
...And 4 more matches
Vulnerabilities - Archive of obsolete content
vulnerability categories a software flaw vulnerability is caused by an unintended error in the
design or coding of software.
...these vulnerabilities are caused by the software
designer making trust assumptions that permit the software to provide beneficial features, while also introducing the possibility of someone violating the trust assumptions to compromise security.
...one of the trust assumptions in the
design of the html content rendering feature was that users would not receive malicious hyperlinks and click on them.
...And 4 more matches
What do common web layouts contain? - Learn web development
when
designing pages for your website, it's good to have an idea of the most common layouts.
... summary there's a reason we talk about web
design.
...we have over 25 years' experience and we'll give you some common rules of thumb to help you
design your site.
...And 4 more matches
Common questions - Learn web development
this section of the learning area is
designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g.
... the html or css learning articles.) these articles are
designed to work on their own.
...
design and accessibility this section lists questions related to aesthetics, page structure, accessibility techniques, etc.
...And 4 more matches
What will your website look like? - Learn web development
discusses the planning and
design work you have to do for your website before writing code, including "what information does my website offer?", "what fonts and colors do i want?", and "what does my site do?" first things first: planning before doing anything, you need some ideas.
...this is sometimes called a
design guide,
design system, or brand book, and you can see an example at the firefox photon
design system.
... sketching out your
design next, grab pen and paper and sketch out roughly how you want your site to look.
...And 4 more matches
Handling common HTML and CSS problems - Learn web development
this includes linting code, handling css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive
design problems, and more.
...responsive
design problems are also common — a site that looks good in a desktop browser might provide a terrible experience on a mobile device, because the content is too small to read, or perhaps the site is slow because of expensive animations.
...to ensure this doesn't happen, you need to research the tools you are using first and
design your code around them.
...And 4 more matches
An Overview of XPCOM
gecko although it is in some ways structurally similar to microsoft com, xpcom is
designed to be used principally at the application level.
... maintenance even when you are not updating a component,
designing your application in a modular way can make it easier for you to find and maintain the parts of the application that you are interested in.
...clients of this code can then use a factory
design pattern to create the object (see factories) and further encapsulate the implementation.
...And 4 more matches
nsIMsgDBView
to create an instance, use: var dbview = components.classes[@mozilla.org/messenger/msgdbview;1?type=] .createinstance(components.interfaces.nsimsgdbview); where type
designates different types of view's available.
... sorttype a nsmsgviewsorttypevalue
designating the sort type used for the folder.
... sortorder an nsmsgviewsortordervalue
designating the sort order used for the folder.
...And 4 more matches
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
back in the early days of web
design, the way we constructed page layout was to use html tables, then fragment our
design into the cells of those tables in order to create a layout.
...the biggest downside however was that it tied our
design to the mark-up, often creating accessibility issues as it did so.
... in order to lay the
design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.
...And 4 more matches
Layout mode - CSS: Cascading Style Sheets
normal flow includes block layout,
designed for laying out boxes such as paragraphs and inline layout, which lays out inline items such as text.
... table layout,
designed for laying out tables.
... float layout,
designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.
...And 4 more matches
HTML documentation index - HTML: Hypertext Markup Language
114 <i>: the idiomatic text element element, html, html text-level semantics, reference, web, em the html idiomatic text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical
designations, among others.
... 135 <input type="search"> form input, forms, html, html forms, input type, reference, search <input> elements of type search are text fields
designed for the user to enter search queries into.
... 139 <input type="time"> element, forms, html, html input types, html forms, html input, input, input element, input type, reference, time <input> elements of type time create input fields
designed to let the user easily enter a time (hours and minutes, and optionally seconds).
...And 4 more matches
Content Processes - Archive of obsolete content
neither content or add-on proceses were ever actually implemented, but by the time they were cancelled, the sdk was already
designed with them in mind.
... the final section explains why the sdk still uses the notion of content scripts and message passing, even though the multiprocess model for which they were
designed never materialized.
... content scripts when the sdk was first
designed, firefox was being refactored towards a multiprocess model.
...And 3 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
related: xulrunner:what xulrunner provides, xulrunner hall of fame ui in mozilla mozilla's philosophy of using "the right tool for the right job" is manifested most prominently in the
design of the user interface.
...javascript, considered by many to be the best scripting language ever
designed is ideal for specifying the behavior of your interface widgets.
...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.
...And 3 more matches
New Skin Notes - Archive of obsolete content
--mmondor 11:54, 26 aug 2005 (pdt) for all that it is worth, i am against setting the 'base' font-size to anything other than 100%, let the user figure out which font-setting is best for him/her on his/her computer, rather than tweak it to what the
designer feels is the right size for the
designers eye(s).
... if the
designer wants smaller text, tweak his ua's text size off of the base, for 100% page specified text.
... and when done, verify that the
designer did not break the page with a "normal" font setting, by using a default profile.
...And 3 more matches
CSS and JavaScript accessibility best practices - Learn web development
the rule of thumb is that you can update the styling of a page feature to fit in your
design, but don't change it so much that it no longer looks or behaves as expected.
...you could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page
design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on.
... table css generally serves to make the table fit better into your
design and look less ugly.
...And 3 more matches
Server-side web frameworks - Learn web development
similarly, framework
design can have a large impact on how easy it is to test and re-use code.
... django (python) django is a high-level python web framework that encourages rapid development and clean, pragmatic
design.
...because everything is included, it all works together, follows consistent
design principles, and has extensive and up-to-date documentation.
...And 3 more matches
Handling common accessibility problems - Learn web development
we've already talked about other spheres such as responsive
design and performance in other places in the module.
... styles, so your users get that visual clue that a control will do something when activated, whether they are using mouse or keyboard: a:hover, input:hover, button:hover, select:hover, a:focus, input:focus, button:focus, select:focus { font-weight: bold; } note: if you do decide to remove the default focus styling using css, make sure you replace it with something else that fits in with your
design better — it is a very valuable accessiblity tool, and should not be removed.
... element relationships and context there are certain features and best practices in html
designed to provide context and relationships between elements where none otherwise exists.
...And 3 more matches
Creating localizable web applications
good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width: 10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also should be taken into account when
designing the interaction on the website.
... consider the following example: a filmreel-like slideshow showcasing highlighted features of the product or featured
designs.
... separate urls from navigation sometimes, when the urls are well-
designed, you may want to use the url to do something in the code depending on where the user is.
...And 3 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
these are the uses that flexbox was
designed for.
...this enables the
design pattern of a navigation bar where one group of items are aligned left and another group aligned right.
... center item before flexbox, developers would joke that the hardest problem in web
design was vertical centering.
...And 3 more matches
Index - Developer guides
17 event developer guide dom, event, guide, needsupdate, events events refers both to a
design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
... 24 overview of events and handlers beginner, dom, example, javascript, needsbeginnerupdate, needsupdate, events this overview of events and event handling explains the code
design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.
... 32 mobile web development intermediate, needsexample this page provides an overview of some of the main techniques needed to
design web sites that work well on mobile devices.
...And 3 more matches
Mobile Web Development - Developer guides
this page provides an overview of some of the main techniques needed to
design web sites that work well on mobile devices.
... we've organized it into two sections,
designing for mobile devices and cross-browser compatibility.
...
designing for mobile devices mobile devices have quite different hardware characteristics compared with desktop or laptop computers.
...And 3 more matches
XUL Migration Guide - Archive of obsolete content
the main reason for this
design is security: it reduces the risk that a malicious web page will be able to access privileged apis.
...but there are some notable limitations in the sdk apis and even a fairly simple ui may need some degree of re
design to work with them.
... some limitations are the result of intentional
design choices.
...And 2 more matches
Creating XPI Installer Modules - Archive of obsolete content
these new files represent a re
design of the way that the mozilla ui is packaged and installed.
...the reader is referred to jar packaging, which describes the
design, goals, and options available for jar packaging in some depth.
... what follows is a very brief overview of the
design and a description of what mozilla expects in installable packages.
...And 2 more matches
Index - Archive of obsolete content
4 accessibility/xul accessibility reference accessibility, xul this table is
designed to show how to expose text properly for various xul element types.
... 953 the joy of xul guide, mozilla, xpcom, xpconnect, xul 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.
... 1083 xul accessibility tool accessibility the xul accessibility tool is a firefox extension
designed by aaron andersen of webaim as part of a mozilla foundation accessibility minigrant in the spring of 2007.
...And 2 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.
... platform portability like html, xul is
designed to be platform-neutral, making applications easily portable to all of the operating systems on which mozilla runs.
... this degree of separation results in applications that are easier to maintain by programmers and readily customized by
designers and language translators.
...And 2 more matches
Archived Mozilla and build documentation - Archive of obsolete content
an ssb is
designed to work exclusively with a single web application.
... space manager detailed
design the space manager and related classes and structures are an important of the gecko layout system, specifically block layout.
... see the high level
design document for an overview of the space manager, and as an introduction to the classes, structures and algorithms container in this, the detailed
design document.
...And 2 more matches
Mobile accessibility - Learn web development
to make a website accessible and usable on mobile, you just need to follow general good web
design and accessibility best practices.
... responsive
design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens.
... responsive
design responsive
design is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.
...And 2 more matches
CSS layout - Learn web development
responsive
design as more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web
design (rwd) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
... it is an idea that changed the way we
design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.
...media queries are a key part of responsive web
design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
...And 2 more matches
Advanced form styling - Learn web development
the sizes of check boxes and radio buttons are not meant to be changed with their default
designs, and browsers react very differently when you try.
...> i like cherry </label> </p> <p> <label> <input type="checkbox" name="fruit-2" value="banana" disabled> i can't like banana </label> </p> <p> <label> <input type="checkbox" name="fruit-3" value="strawberry"> i like strawberry </label> </p> </fieldset> </form> now, let's style these with a custom checkbox
design.
... if you view these checkboxes in a browser that doesn't support appearance, your custom
design will be lost, but they will still look like checkboxes and be usable.
...And 2 more matches
Your first form - Learn web development
overview: forms next the first article in our series provides you with your very first experience of creating a web form, including
designing a simple form, implementing it using the right html form controls and other html elements, adding some very simple styling via css, and describing how data is sent to a server.
... objective: to gain familiarity with what web forms are, what they are used for, how to think about
designing them, and the basic html elements you'll need for simple cases.
...
designing your form before starting to code, it's always better to step back and take the time to think about your form.
...And 2 more matches
Front-end web developer - Learn web development
the assessments in each module are
designed to test your knowledge of the subject matter.
... the assessments in each module are
designed to test your knowledge of the subject matter.
... the assessments in each module are
designed to test your knowledge of the subject matter.
...And 2 more matches
Aprender y obtener ayuda - Learn web development
textual articles you'll find a lot of written articles on the web to teach you about web
design.
... effective problem solving there is no one effective way to solve all problems (and learn all things) associated with web
design and development, but there are some general bits of advice that will serve you well in most cases.
... learn and recognise the patterns as we said before, web
design/programming is mostly about problem solving and patterns.
...And 2 more matches
Accessibility and Mozilla
accessibility is the idea that software (among other things) should be
designed to be usable and, as much as possible, convenient to use for people with disabilities.
...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 page describes a number of
design-related aspects to look out for, in no particular order.accessibility/liveregiondevguidethis page is currently under construction.
...And 2 more matches
Gecko Logging
the log crate lists the available log levels: log level purpose rust logging levels error
designates very serious errors.
... warn
designates hazardous situations.
... info
designates useful information.
...And 2 more matches
Index
this page is
designed to help explain the cause and possible solutions for these warnings.
... 110 starting weblock xpcom in this chapter, we begin to
design and implement the web locking functionality itself.
...this was
designed so that most queries can be done in only one sql query.
...And 2 more matches
Mozilla
accessibility and mozilla accessibility is the idea that software (among other things) should be
designed to be usable and, as much as possible, convenient to use for people with disabilities.
... browser chrome tests the browser chrome test suite is an automated testing framework
designed to allow testing of application chrome windows using javascript.
...these articles provide important guides and references to ensuring the code you write is secure, including both
design recommendations and testing guidelines.
...And 2 more matches
Basic concepts - Web APIs
you'll find the following useful: for an overview of the
design and structure of indexeddb, see big concepts.
...this important and fundamental difference affects the way you
design and build your applications.
... limitations indexeddb is
designed to cover most cases that need client-side storage.
...And 2 more matches
Geometry and reference spaces in WebXR - Web APIs
at a fundamental level, rendering of scenes for webxr presentation in either augmented reality or virtual reality contexts is performed using webgl, so the two apis share much of the same
design language.
...the most efficient way, of course, is to
design your objects and code to use the same coordinate system as webgl does.
...from the perspective of an xr developer,
designing the stage is the part that matters most to your users.
...And 2 more matches
OpenType font features guide - CSS: Cascading Style Sheets
some fonts will have one or more of these features enabled by default (kerning and default ligatures are common examples), while others are left to the
designer or developer to choose to enable in specific scenarios.
... discovering availability of features in fonts this is sometimes the trickiest thing to work out if you don't have any documentation that came with the fonts (many type
designers and foundries will provide sample pages and css just for this very reason).
...these are
designed to work with the surrounding text without altering the baseline or line spacing.
...And 2 more matches
HTML elements reference - HTML: Hypertext Markup Language
<i> the html idiomatic text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical
designations, among others.
...this mechanism is
designed for use with web-based certificate management systems.
... <multicol> the html multi-column layout element (<multicol>) was an experimental element
designed to allow multi-column layouts and must not be used.
...And 2 more matches
Digital audio concepts - Web media technologies
special low frequency enhancement (lfe) channels provide the signal for special speakers
designed to produce the low frequency sounds and vibration to create a visceral sensation when listening to the audio.
... by using a sound (no pun intended) understanding of psychoacoustics, it's possible to
design a compression method that will minimize the compressed size of the audio while maximizing the percieved fidelity of the sound.
... telephone networks, which were originally
designed specifically to transmit human voices, can only carry audio (or any other kind of signal) in the frequency band from 300 hz to 3,000 hz.
...And 2 more matches
Image file type and format guide - Web media technologies
pixels are opaque, unless a specific color index is
designated as transparent, in which case pixels colored that value are entirely transparent.
...as of july 7, 2004, all relevant patents have expired and the gif format may be used freely ico (microsoft windows icon) the ico (microsoft windows icon) file format was
designed by microsoft for desktop icons of windows systems.
...as such, svg is popular for user interface elements in modern web
design.
...And 2 more matches
Performance fundamentals - Web Performance
computer displays are
designed to "fool" user's eyes, by delivering photons to them that mimic reality.
...that's why most modern electronic displays are
designed to refresh at that rate.
... from this comes an important but counter-intuitive corollary: a well-
designed system does not maximize the amount of free memory.
...And 2 more matches
Mobile first - Progressive web apps (PWAs)
in our planning your app article, we provided a high level look into the kinds of planning and functionality decisions you should make before you start coding an app, including some ideas for desktop and mobile
design.
... this article offers some related ideas, looking at the concept of mobile first — the practice of
designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default.
... conditional resource loading to actually implement responsive/adaptive
designs, you will need to enlist a certain amount of conditional resource loading, again so that different devices can receive an optimal experience without having to shoulder the burden of many resources that they don't need.
...And 2 more matches
Sunbird Theme Tutorial - Archive of obsolete content
it is
designed for beginners.
...you also need knowledge of: using your operating system to create files and directories using the tools listed above css graphic
design knowledge of xul, xbl and javascript is useful for advanced themes.
...you might prefer to do some
design work in an image editor first, so that you have a clear
design concept to implement.
...you normally make these after you have
designed the rest of your theme.
Game monetization - Game development
designing a good iap system is an art of it's own.
...google adsense is said to be the most effective one, but it's not
designed for games and it's a pretty bad practice to use it for that purpose.
... selling resources if you're a graphic
designer, you can sell the assets from the games you've created, or something brand new exclusively for that purpose at online shops like envato market.
... it's not much, but if you're a known
designer it can be an extra passive stream of income.
Sizing items in CSS - Learn web development
understanding how big the different features in your
design will be is important, and in this lesson we will summarize the various ways elements get a size via css and define a few terms around sizing that will help you in the future.
... setting a specific size we can of course give elements in our
design a specific size.
...images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the
design.
... sizing things according to the viewport can be useful in your
designs.
How much does it cost to do something on the Web? - Learn web development
if at some point you need to exchange projects with other
designers, you should find out what tools they're using.
... of course, you'll need a more serious computer if you want to produce complicated
designs, touch up photos, or produce audio and video files.
... next steps now that you understand what kind of money your website may cost you, it's time to start
designing that website and setting up your work environment.
... if you're more focused on
design, take a look at the anatomy of a web page.
Styling web forms - Learn web development
website owners want form styles that fit in with their overall site
design more than ever, and the web platform has changed to make this more possible.
... there's a lot of debate as to whether forms look better using the system default styles, or customized styles
designed to match your content.
... this decision is yours to make, as the
designer of your site, or web application.
...while our
design is a fixed-size
design, and we could use the resize property to prevent users from resizing our multi-line text field, it is best to not prevent users from resizing a textarea if they so choose.
The web and web standards - Learn web development
as you go through the learning material presented here, you'll start to learn how this is made possible with some very clever
design and implementation work.
... because you don't know exactly what your users will use, you need to
design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience.
... responsive web
design is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers.
... accessibility means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive
design).
Strategies for carrying out testing - Learn web development
you should ideally test these on both a phone and a tablet, to make sure that responsive
designs are working ok.
...for example, if you want to do some quick and dirty testing of your width/height media queries for responsive
design, you could use firefox's responsive
design mode.
... safari has a similar mode too, which can be enabled by going to safari > preferences, and checking show develop menu, then choosing develop > enter responsive
design mode.
... these steps are
designed to make sure that the browser you are testing in is as "pure" as possible, i.e.
Software accessibility: Where are we today?
these operating systems were not
designed with the needs of people with disabilities in mind.
... refreshable braille displays of various sizes a braille embosser audio- and braille- based user interfaces are concepts that software
designers are historically untrained for.
...open source software is an ideal way to the needs of disabled users, because accessibility can be fully integrated into the core
designs, rather than tacked onto as an afterthought.
...if you take a little time to learn them, they will become an unconscious improvement to your
design and engineering technique.
OSFile.jsm
os.file is a new api
designed for efficient, off-main thread, manipulation of files by privileged javascript code.
...the file api is
designed for high-level, highly-restricted manipulation of files by web applications.
... os.file is
designed for efficient, unrestricted, manipulation of files by firefox itself and by add-ons.
... 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.
NSS FAQ
general questions what is network security services (nss) nss is set of libraries, apis, utilities, and documentation
designed to support cross-platform development of security-enabled client and server applications.
... nss was
designed from the ground up for use by commercial developers.
...it consists of libraries and a daemon
designed to support cross-platform development of security-enabled client applications.
...exports (including those (a) on the bureau of industry and security denied parties list or entity list, (b) on the office of foreign assets control list of specially
designated nationals and blocked persons, and (c) involved with missile technology or nuclear, chemical or biological weapons).
The Places database
this document provides a high-level overview of the overall database
design of the places system.
... places is
designed to be a complete replacement for the firefox bookmarks and history systems using storage.
... the places schema looks like so: core url table moz_places: this is the main table of uris and is managed by the history service (see also history service
design).
... see history service
design for more information.
Using the Places history service
please see history service
design for information on the
design of the history service, and the places database for a higher-level
design overview of places.
... the navhistory service has broken this into two tables (see history service
design).
...it is
designed for people writing synchronizing or backup services that need access to all the flags.
...it is
designed for synchronizing or backup services.
Starting WebLock
« previousnext » in this chapter, we begin to
design and implement the web locking functionality itself.
... creating the weblock programming interface
design is one of the hardest parts of any programming problem.
...this makes changes to the interface when
designing a bit simpler, as you do not have to modify any class declarations.
...weblock is
designed so that the user interface notifies this service when we should go into lock mode.
Using XPCOM Components
« previousnext » one of the best ways to begin working with xpcom - especially when you are
designing the interface to a component that will be used by others, as we do in starting weblock - is to look at how clients are already using xpcom components.
...in object-oriented programming, it's typical to
design the interface first-to define the functionality that's going to be provided in the abstract, without worrying about how this functionality will be achieved.
... services versus regular instances whether to have clients use your component as an instance or a service is a
design question, really, and something you should be clear about in the documentation for your component.
... the singleton
design pattern that is used to create services is described in xpcom services.
Fundamentals of WebXR - Web APIs
webvr was generally considered to be an experimental api
designed to help specification writers determine the best approaches to creating an api for virtual reality on the web.
... 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.
...they're
designed for creating and animating 3d scenes regardless of context.
... 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.
Web Audio API - Web APIs
web audio concepts and usage the web audio api involves handling audio operations inside an audio context, and has been
designed to allow modular routing.
...this modular
design provides the flexibility to create complex audio functions with dynamic effects.
... audioworkletglobalscope the audioworkletglobalscope interface is a workletglobalscope-derived object representing a worker context in which an audio processing script is run; it is
designed to enable the generation, processing, and analysis of audio data directly using javascript in a worklet thread rather than on the main thread.
...ocessing using audioworkletthe process of creating an audio processor using javascript, establishing it as an audio worklet processor, and then using that processor within a web audio application is the topic of this article.basic concepts behind web audio apithis article explains some of the audio theory behind how the features of the web audio api work, to help you make informed decisions while
designing how audio is routed through your app.controlling multiple parameters with constantsourcenodethis article demonstrates how to use a constantsourcenode to link multiple parameters together so they share the same value, which can be changed by simply setting the value of the constantsourcenode.offset parameter.example and tutorial: simple synth keyboardthis article presents the code and working d...
Understandable - Accessibility
this is a matter of sensible
design — people don't want interfaces to surprise them; they want things to be intuitive and behave as expected.
... again, sensible
design should be implemented.
... again, sensible
design — make the navigation controls the same across all pages or views.
... again, sensible
design!
Ordering Flex Items - CSS: Cascading Style Sheets
the order property is
designed to lay the items out in ordinal groups.
... you might have a
design, perhaps a card that will display a news item.
...the card also has a date; the finished
design we want to create is something like this.
...then use order for purely visual
design tweaks.
font-variation-settings - CSS: Cascading Style Sheets
the <number> can be fractional or negative, depending on the value range available in your font, as defined by the font
designer.
... description this property is a low-level mechanism
designed to set variable font features where no other way to enable or access those features exist.
... here are the registered axes along with their corresponding css properties: axis tag css property "wght" font-weight "wdth" font-stretch "slnt" (slant) font-style: oblique + angle "ital" font-style: italic "opsz" font-optical-sizing custom axes can be anything the font
designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine.
...note that font
designers aren't forced follow this practice in any way, and some won't.
Event developer guide - Developer guides
events refers both to a
design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.
... the overview page provides an introduction to the
design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.
... the custom events page describes how the event code
design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.
...the events triggered by user interaction evolved during the early years of browser
design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled.
An overview of HTTP - HTTP
designed in the early 1990s, http is an extensible protocol which has evolved over time.
...thanks to the layered
design of the web, these are hidden in the network and transport layers.
...umerous functions: caching (the cache can be public or private, like the browser cache) filtering (like an antivirus scan or parental controls) load balancing (to allow multiple servers to serve the different requests) authentication (to control access to different resources) logging (allowing the storage of historical information) basic aspects of http http is simple http is generally
designed to be simple and human readable, even with the added complexity introduced in http/2 by encapsulating http messages into frames.
... experiments are in progress to
design a better transport protocol more suited to http.
Structural overview of progressive web apps - Progressive web apps (PWAs)
in this structural overview, we'll look at the features that make up a standard web application, as well as some
design patterns you can follow when building your pwa.
... being linkable, progressive, and responsive by
design it's important to remember the pwa advantages and keep them in mind when
designing the application.
... responsive: responsive web
design also applies to progressive web apps, as both are mainly for mobile devices.
...the overall approach is to have the
design look good on both mobile (with a responsive web
design approach) and desktop devices.
SVG documentation index - SVG: Scalable Vector Graphics
found 383 pages: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive
design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
... 13 svg attribute reference drawing, landing, needshelp, overview, responsive
design, svg, svg attribute, svg reference, vector graphics svg elements can be modified using attributes that specify details about exactly how the element should be handled or rendered.
...this provides a way to
design svg that gracefully falls back when features aren't available.
...many browsers support svg images in: 292 svg documentation index svg found 383 pages: 293 svg element reference drawing, elements, responsive
design, svg, svg reference, vector graphics, l10n:priority svg drawings and images are created using a wide array of elements which are dedicated to the construction, drawing, and layout of vector images and diagrams.
SDK and XUL Comparison - Archive of obsolete content
we've
designed the apis to be forward-compatible with the new multiple process architecture (codenamed electrolysis) planned for firefox.
... security if they're not carefully
designed, firefox add-ons can open the browser to attack by malicious web pages.
... user experience best practices the ui components available in the sdk are
designed to align with the usability guidelines for firefox, giving your users a better, more consistent experience.
Signing an extension - Archive of obsolete content
co
design.p12.
... nss-pk12util -i co
design.p12 -d .
...for production, use such a code: echo "enter password for object signing:" read mypassword nss-signtool \ -d /volumes/co
design/keystore \ -k "my company's verisign, inc.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the following code shows blocks
designated for internet explorer: .
...f a page is sent with a text/xml mimetype or any other xml or xhtml mimetype for any "doctype html system" doctype (for example, <!doctype html system "http://www.w3.org/tr/rec-html40/strict.dtd">), except for the ibm doctype for unknown doctypes or doctypes without dtds almost standards mode mozilla introduced almost standards mode for one reason: a section in the css 2 specification breaks
designs based on a precise layout of small images in table cells.
... mozilla 1.3 introduced an implementation of internet explorer's
designmode feature, which turns an html document into a rich text editor field.
Introduction to XUL - Archive of obsolete content
the intention is to build cross-platform applications like browsers and mail clients from a set of tools
designed for that purpose.
...ui
designers will be able to create ui descriptions which will work on multiple platforms.
...ui
designers and build engineers will need to maintain separate, platform-specific versions of at least some xul documents.
Writing Skinnable XUL and CSS - Archive of obsolete content
this rule also applies when
designing a css file for a ui component that will be overlayed into other components.
...note that in our current
designed mozilla skin (aside from global) every single css file is a derived skin file, so this applies to all of you!!!
...the problem here is that you'll end up placing a restriction on the skin, which will force the skin
designer to supply an image with the exact name you've specified.
XML - Archive of obsolete content
using a combination of xul's ready-made widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading stylesheets, you can
design any interface that you can imagine, using any number of different features, tools, and methodologies.
...in order to provide flexibility to you as a
designer of interfaces, xul offers no flexibility to you as acoder.
... gecko was
designed to be lightweight, standards-compliant and cross-platform, so rather than defining on its own how these widgets should be rendered, gecko depends for all but the most basic behavioral and presentational aspects of the widgets upon cascading stylesheets.
Web Standards - Archive of obsolete content
web standards are carefully
designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the web.
...
designing and building with these standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of internet devices.
... choosing standards compliance over proprietary practices in the development world, there is a need for standards because applications are
designed across multiple development groups.
Archive of obsolete content
on october 11, 2002, wired launched a brand-new site
design that uses validating xhtml for its structure and a small collection of css files for its layout.
... the new
design clearly shows what some experts have been saying: that standards-based
design can be visually compelling and preserve the interface conventions we've come to expect from web pages.
...it is
designed for beginners.
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
mvc (model-view-controller) is a pattern in software
design commonly used to implement user interfaces, data, and controlling logic.
...some other
design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-presenter), and mvw (model-view-whatever).
... the three parts of the mvc software-
design pattern can be described as follows: model: manages data and business logic.
WAI-ARIA basics - Learn web development
html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website
designs.
...in cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page
design.
...there are some other labelling techniques that use other properties such as aria-labelledby if you want to
designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well.
Fundamental CSS comprehension - Learn web development
the final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final
design — a business card/gamer card/social media profile.
... the default margin applied to the <h2> and <p> elements by the browser will interfere with our
design, so write a rule that targets all these elements and sets their margin to 0.
... example the following screenshot shows an example of what the finished
design should look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Overflowing content - Learn web development
there may be more text than you expected when
designing the site, or the text may be larger.
... unwanted overflow in web
design modern layout methods (described in css layout) manage overflow.
...test
designs with large and small amounts of content.
Normal Flow - Learn web development
in addition, as normal flow is
designed to make a readable document, by starting in this way you are working with the document rather than fighting against it as you make changes to the layout.
...{ width: 500px; margin: 0 auto; } p { background: rgba(255,84,104,0.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; } span { background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your
design.
... previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive
design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Supporting older browsers - Learn web development
previous overview: css layout next in this module, we recommend using flexbox and grid as the main layout methods for your
designs.
...supporting everyone means serving a version of your content that is
designed defensively, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers.
... cascading web
design with feature queries using feature queries (video) previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive
design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
What is CSS? - Learn web development
using css you can control exactly how html elements look in the browser, presenting your markup using whatever
design you like.
...browsers, like firefox, chrome, or edge , are
designed to present documents visually, for example, on a computer screen, projector or printer.
...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.
create fancy boxes - Learn web development
it's fun because it's all about turning a
design idea into working code; it's challenging because of annoying constraints and crazy freedom in the use of css.
...so let's see an example with a slightly different html snippet (which provide us an opportunity to see how to also handle
design localization): <blockquote>people who think they know everything are a great annoyance to those of us who do.
...at some point, to accomplish such box embellishment is a matter of creativity, both in
design and technical use of css properties.
Typesetting a community school homepage - Learn web development
give the active state a noticeably different styling so it stands out nicely, but make it still fit in with the overall page
design.
... give your list items a nice bullet, appropriate for the
design of the page.
... example the following screenshot shows an example of what the finished
design could look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
What is accessibility? - Learn web development
can the people with smartphones browse a heavy, cluttered website
designed for a large desktop monitor and unlimited bandwidth?
... more details please refer to: wikipedia article about accessibility wai (w3c's web accessibility initiative) next steps accessibility can impact both a website's
design and technical structure.
... from a
design point of view, we suggest learning about
designing for all types of users.
Responsive images - Learn web development
responsive images are just one part of responsive
design, a future css topic for you to learn.
...css arguably has better tools for responsive
design than html, and we'll talk about those in a future css module.
... note: in the <head> of the example linked above, you'll find the line <meta name="viewport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or
design).
Website security - Learn web development
previous overview: first steps website security requires vigilance in all aspects of website
design and usage.
... effective website security requires
design effort across the whole of the website: in your web application, the configuration of the web server, your policies for creating and renewing passwords, and the client-side code.
... note: this is an introductory topic,
designed to help you start thinking about website security, but it is not exhaustive.
Information for users
> help contents f1 > accessibility features) which describe any special features and keyboard shortcuts
designed to help users with disabilities.
... planning ahead for accessibility this document is intended to help testers and
designers understand and plan what still needs to be added to our ui for full usable accessibility.
... firefox accessibility skins and themes at the excellent 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.
Multiprocess on Windows
overview a high-level overview of the ideas behind the a11y+e10s
design is available on the wiki.
... prerequisite reading since so much of this
design resolves around microsoft com and its concept of the apartment, readers of this document should have a solid understanding of what apartments are.
...in particular, typelibs were originally
designed to work with 1990s-era visual basic.
Browser chrome tests
the browser chrome test suite is an automated testing framework
designed to allow testing of application chrome windows using javascript.
...be aware that this is not a solution; you should investigate why your test is taking so long, since it's most likely due to a bad test
design or a performance problem.
...} when writing tests,
design for failure.
Debugging on Mac OS X
bug 1522409 was filed to automate co
designing local builds to enable hardened runtime by default and eliminate this discrepancy.
... to obtain a hardened runtime build without using try infrastructure, a developer can manually co
design builds using the macos co
design(1) command with the developer.entitlements.xml file from the tree.
... this requires creating a co
designing identity.
IME handling guide
"" when an html editor (an element whose contenteditable attribute is "true" or document whose
designmode is "on") gets focus, the value is empty.
...therefore, this
design is enough (ideally, an instance should be created per im context, though).
... tsf is the most complicated ime api on all platforms, therefore,
design of this class is also very complicated.
PBackground
it connects a
designated "background" thread in the chrome process to any other thread in any other process.
... bypass both main threads if used from a non-main thread in a content process write process-agnostic code because it can be used even from another thread in the parent process the parent side of a pbackground actor pair is always on the
designated background thread, while the child side is on the thread that chooses to use pbackground.
... the background thread is
designed to be responsive (nobody is allowed to do long running computation or file i/o on it) to guarantee better latency than going through the main threads (which can run arbitrary js, gc, etc.) can provide.
Memory Profiler
this article details how to use an old profiler specifically
designed for firefox os devices.
... this memory profiler is
designed to solve the inconveniences and limitations.
... the profiler is
designed at the very beginning to support not only javascript but also native codes.
Midas
internet explorer supports the ability to make an entire document editable by setting the
designmode property of the document object; this is how midas is invoked in gecko.
... properties document.
designmode by setting this property to "on", the document becomes editable.
... examples this example shows the basic structure described in the notes section : <html> <head> <title>simple edit box</title> </head> <body> <iframe id="midasform" src="about:blank" onload="this.contentdocument.
designmode='on';" ></iframe> </body> </html> methods document.execcommand executes the given command.
Introduction to NSPR
it is valuable to formally define the expression during
design, write it down, and adhere to it.
... a thread may be
designed to wait for a particular situation to exist in some monitored data.
...the
design of the code that waits on a condition must take these facts into account.
An overview of NSS Internals
nss offers lots of functionality; we'll walk through the list of modules,
design principles, and important relevant standards.
...in the most simple scenario, the programmer will provide a directory on your filesystem as a parameter to the init function, and nss is
designed to do the rest.
... this line is a placeholder for future sections that should explain how libpkix works and is
designed.
NSS tools : certutil
several keywords are available: + serverauth + clientauth + co
designing + emailprotection + timestamp + ocspresponder + stepup + critical x.509 certificate extensions are described in rfc 5280.
...these new databases provide more accessibility and performance: * cert9.db for certificates * key4.db for keys * pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are
designed to be shared, these are the shared database type.
... * http://tools.ietf.org/html/rfc5280 * http://tools.ietf.org/html/rfc1113 * http://tools.ietf.org/html/rfc1485 the nss wiki has information on the new database
design and how to configure applications to use it.
certutil
several keywords are available: o serverauth o clientauth o co
designing o emailprotection o timestamp o ocspresponder o stepup o critical x.509 certificate extensions are described in rfc 5280.
...these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are
designed to be shared, these are the shared database type.
... o http://tools.ietf.org/html/rfc5280 o http://tools.ietf.org/html/rfc1113 o http://tools.ietf.org/html/rfc1485 the nss wiki has information on the new database
design and how to configure applications to use it.
Index
5 future directions guide, mozilla, spidermonkey this article documents future directions in functionality,
design, and coding practices for spidermonkey.
...by
design, this search may not find a property that other property lookup functions, such as js_lookupproperty, would find.
... 427 js_propertystub jsapi reference, spidermonkey the stub functions are not
designed to be called directly by a jsapi application.
JSAPI User Guide
but the jsapi is
designed to scale to applications that need many global objects.
...in
designing this kind of application, it's important to think through the security concerns ahead of time.
... spidermonkey is
designed to support custom, application-defined security models.
Web Replay
allowed non-determinism there is some slop in this
design: the replaying process must be non-deterministic enough that the ipc and debugger components work, but not so non-deterministic that observable behaviors are affected.
... this
design allows the replaying process to behave differently from the recording process, which allows for a fairly straightforward implementation of ipc and debugger integration.
... appendix: impacts on gecko development web replay is
designed to minimize the places where other parts of gecko need to know about it or interact with it.
Mozilla Projects
internet explorer supports the ability to make an entire document editable by setting the
designmode property of the document object; this is how midas is invoked in gecko.
... network security services network security services (nss) is a set of libraries
designed to support cross-platform development of security-enabled client and server applications.
... the language is written in json, but we do not expect people to write zest in this format - it is
designed to be a visual language.
Secure Development Guidelines
bbv: prevention check the bounds of your arrays use a safe and well-
designed api when using integers as array indexes, use caution format string bugs example: int main(int argc, char *argv[]) { if (argc > 1) printf(argv[1]); } format string bugs: prevention easy to fix: always use a format string specifier: int main(int argc, char *argv[]) { if (argc > 1) printf("%s", argv[1]); } double free example: void* ptr = malloc(1024); if (error) ...
... unlock(locka); unlock(lockb); } writing secure code: good coding practices banned api list badly
designed apis can often lead to vulnerabilities it’s too easy to use the api inappropriately for example, consider the libc string handling apis strcpy() performs no bounds checking strncpy() doesn’t always 0-terminate strncat() length parameter is very confusing banned api list examples of incorrect strncat usage buffer overflow strncat(buffer, string, sizeof(buffe...
...r)); off-by-one strncat(buffer, string, sizeof(buffer) – strlen(string)); correct usage strncat(buffer, string, sizeof(buffer) – strlen(string) – 1)); banned api list: recommendations create wrappers or replacements for standard functions with a bad
design libc function name reason to ban it strcpy, strcat, gets, sprintf, vsprintf no bounds checking.
Using the Places annotation service
the annotation service, provided by the nsiannotationservice interface, is
designed to store arbitrary data about a web page or about an item in the places database in firefox 3.
... for an overview of the places database
design, see the places database.
...you should not
design your service so that you require hundreds of unique annotation names.
mozIRegistry
it appears to be a
design document for something that never got implemented.
...these are placeholders for the types of components you're
designing and implementing.
...i'll be explaining the rationale for the
design and implementation of these components in this document.
Frequently Asked Questions
effective c++ (2nd edition): 50 specific ways to improve your programs and
designs by scott meyers.
... more effective c++ : 35 new ways to improve your programs and
designs by scott meyers.
... effective c++ cd: 85 specific ways to improve your programs and
designs by scott meyers.
Weak reference
a naive
design for an observer/observable relationship would require the observable to hold a owning reference to the observer.
...this
design, however, is flawed, as it holds the observer in existence longer than would otherwise be necessary.
...but in this
design, by hitching its life to the observable, it is kept on life-support long past any need or use.
Index
9 address book sync client
design by richard h.
... 40 mailnews fakeserver mailnews, seamonkey, thunderbird fakeserver is a testing server that implements a generic text-based protocol common to all major mailnews protocols (pop, imap, smtp, and nntp)
designed for use in automated tests.
...since thunderbird 3, the folder pane is
designed in a more modular and extensible fashion.
Mail and RDF
an aside: rational behind the
design after reviewing this
design, it might seem unnecessary to have the double-levels of notification/registration.
... here is the rational behind this
design: it keeps all rdf datasource-related code in one place and out of the messages and folders themselves.
...this
design allows each datasource to manage its own observers, and lets each mail session manage a list of folder listeners without necessarily knowing that some of these listeners are rdf-related.
Plug-in Basics - Plugins
although plug-ins are platform-specific, the plug-in api is
designed to provide the maximum degree of flexibility and to be functionally consistent across all platforms.
...using windowless plug-ins extends the possibilities for web page
design and functionality.
... plug-ins were originally
designed to work with the embed element rather than the object element (see using the embed element for plug-in display), but the object element itself provides some flexibility here.
Debugger-API - Firefox Developer Tools
by
design, it ought not to introduce security holes, so in principle it could be made available to content as well; but it is hard to justify the security risks of the additional attack surface.
...this is not inherent in the api’s
design, but simply that the self-hosting infrastructure isn’t prepared for the kind of invasions the debugger api can perform.
...given a debugger.script, one can set breakpoints, translate between source positions and bytecode offsets (a deviation from the “source level”
design principle), and find other static characteristics of the code.
Using IndexedDB - Web APIs
the indexeddb api is
designed to minimize the need for error handling, so you're not likely to see many error events (at least, not once you're used to the api!).
...one of the main
design goals of indexeddb is to allow large amounts of data to be stored for offline use.
...this
design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine-grained error handling is too cumbersome.
Pointer events - Web APIs
they are
designed to create a single dom event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers).
... element extensions there are three extensions to the element interface: setpointercapture()
designates a specific element as the capture target of future pointer events.
... #target { touch-action: pan-x; } compatibility with mouse events although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is
designed to only work with mouse input.
SubtleCrypto.deriveKey() - Web APIs
it's
designed to derive key material from some high-entropy input, such as the output of an ecdh key agreement operation.
... it's not
designed to derive keys from relatively low-entropy inputs such as passwords.
...it's
designed to derive key material from some relatively low-entropy input, such as a password.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
animating 3d graphics is an area of software development that brings together multiple disciplines in computer science, mathematics, art, graphic
design, kinematics, anatomy, physiology, physics, and cinematography.
... simulating classic cinematography cinematography is the art of
designing, planning, and executing camera movements to create the desired look and emotion for a scene in animation or film.
... there are a number of terms that are helpful to understand, primarily around camera movement, as these terms are used to describe
designed viewpoint changes with the virtual camera.
Basic concepts behind Web Audio API - Web APIs
this article explains some of the audio theory behind how the features of the web audio api work, to help you make informed decisions while
designing how audio is routed through your app.
... audio graphs the web audio api involves handling audio operations inside an audio context, and has been
designed to allow modular routing.
...this modular
design provides the flexibility to create complex audio functions with dynamic effects.
Window.open() - Web APIs
further reading: top ten web-
design mistakes of 2002, 6.
...so a user who tries to return to the origin will be confused by a grayed out back button." quote from the top ten new mistakes of web
design: 2.
...ses another windows to 'pop up' on your display, or move the focus of the system to a new frame or window, then the nice thing to do is to tell the user that something like that will happen." world wide web consortium accessibility initiative regarding popups "use link titles to provide users with a preview of where each link will take them, before they have clicked on it." ten good deeds in web
design, jakob nielsen, october 1999 using link titles to help users predict where they are going, jakob nielsen, january 1998 example "new window" icons & cursors always use the target attribute if javascript support is disabled or non-existent, then the user agent will create a secondary window according...
Architecture - Accessibility
while it is odd to call non-link objects a link, this was a necessary compromise in the newatk
design because it is necessary to know where objects exist within their containing text.
... previously the hyper link interface was really only for links, but the
design could not fully represent an html document hierarchy.
...the following magic offsets are useful to define in your code: #define char_offset_end_of_line = -1 #define char_offset_caret = -2 more information many more details on the mozilla document hierarchy are in the original
design document for newatk.
Cognitive accessibility - Accessibility
for example, provide responsive layouts, with a single column mobile
design.
... predictability wcag guideline 3.2 states "make web pages appear and operate in predictable ways." this is a tenet of good user experience
design.
... notes the above are good
design practices.
Accessibility Information for Web Authors - Accessibility
automated checking & repair cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that is
designed to identify errors in webpage related to section 508 standards and/or the wcag guidelines.
...(...) contrast is extremely important in web
design." wheel of color: pump up the contrast, robert hess, msdn "for this year's list of worst
design mistakes, (...) i asked readers of my newsletter to nominate the usability problems they found the most irritating.
... (...) about one-third complained about low contrast between text and background." top ten web
design mistakes of 2005: 1.
Color contrast - Accessibility
when
designing readable interfaces for different vision capabilities, the wcag guidelines recommend the following contrast ratios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.
... it is good to have a cool
design on your website, but the
design is worthless if your users can't read your content.
...make the color contrast as good as it can be within your
design constraints — ideally go for the aaa rating (see 1.4.6 below), but at least meet the aa rating (see 1.4.3 below).
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
to round off this set of guides to css grid layout, i am going to walk through a few different layouts, which demonstrate some of the different techniques you can use when
designing with grid layout.
...choose the method you find most helpful for the problems that you are solving and the
designs that you need to implement.
...in a responsive
design, you may want to display the layout as a single column, adding a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens.
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
css grid layout has been
designed to work alongside other parts of css, as part of a complete system for doing the layout.
... grid and flexbox the basic difference between css grid layout and css flexbox layout is that flexbox was
designed for layout in one dimension - either a row or a column.
... grid was
designed for two-dimensional layout - rows, and columns at the same time.
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.
... introduction to html5 this article introduces how to indicate to the browser that you are using html5 in your web
design or web application.
... new presentational layouts in order to improve the flexibility of
designs, two new layouts have been added: the css multi-column layouts and css flexible box layout.
<input type="search"> - HTML: Hypertext Markup Language
<input> elements of type search are text fields
designed for the user to enter search queries into.
...look at the following example: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..."> <button>search</button> </div> </form> you can see how the placeholder is rendered below: search form labels and accessibility one problem with search forms is their accessibility; a common
design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (this example shows a typical pattern).
...one way around this that won't impact on your visual
design is to use wai-aria features: a role attribute of value search on the <form> element will cause screenreaders to announce that the form is a search form.
Media container formats (file types) - Web media technologies
the format was
designed for use on 3g mobile phones, but can still be used on more modern phones and networks.
...ort chrome edge firefox safari adpcm (adaptive differential pulse code modulation) no gsm 06.10 no lpcm (linear pulse code modulation) yes mpeg-1 audio layer iii (mp3) no µ-law (u-law) no webm webm (web media) is a format based on matroska which is
designed specifically for use in modern web environments.
...firefox for android does not yet support av1; the implementation in firefox is
designed to use a secure process, which is not supported yet in android.
Codecs used by WebRTC - Web media technologies
cb is a subset of the main profile, and is specifically
designed for low-complexity, low-delay applications such as mobile video and videoconferencing, as well as for platforms with lower performing video processing capabilities.
... other audio codecs codec name browser compatibility g.722 chrome, firefox, safari ilbc[1] chrome, safari isac[2] chrome, safari [1] internet low bitrate codec (ilbc) is an open-source narrow-band codec developed by global ip solutions and now google,
designed specifically for streaming voice audio.
...it's used by google talk, qq, and other instant messaging clients and is specifically
designed for voice transmissions which are encapsulated within an rtp stream.
Progressive web app structure - Progressive web apps (PWAs)
being linkable, progressive and responsive by
design it's important to remember the pwa advantages and keep them in mind when
designing the application.
... responsive: responsive web
design also applies to progressive web apps, as both are mainly for mobile devices.
...the overall approach is to have the
design look good on both mobile (with a responsive web
design approach) and desktop devices.
Progressive web apps (PWAs)
progressive web apps are a useful
design pattern, though they aren't a formalized standard.
...he js13kpwa application, why it is built that way, and what benefits it brings.pwa developer guidein the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive web applications (pwas).structural overview of progressive web appsin this structural overview, we'll look at the features that make up a standard web application, as well as some
design patterns you can follow when building your pwa.
... the building blocks of responsive
design — learn the basics of responsive
design, an essential topic for modern app layout.
Gradients in SVG - SVG: Scalable Vector Graphics
the orientation of the gradient is controlled by two points,
designated by the attributes x1, x2, y1, and y2.
...gradient2 in the above example is
designed to create a vertical gradient.
...it requires a center point,
designated by the cx and cy attributes, and a radius, r.
Tutorials
fluid grids
design layouts that fluidly resize with the browser window, while still using a typographic grid.
... essential javascript
design patterns an introduction to essential javascript
design patterns.
... javascript patterns a javascript pattern and antipattern collection that covers function patterns, jquery patterns, jquery plugin patterns,
design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, dom.
WebAssembly Concepts - WebAssembly
it is not primarily intended to be written by hand, rather it is
designed to be an effective compilation target for low-level source languages like c, c++, rust, etc.
... don't break the web — webassembly is
designed so that it plays nicely with other web technologies and maintains backwards compatibility.
...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.
Guides - Archive of obsolete content
content processes the sdk was
designed to work in an environment where the code to manipulate web content runs in a different process from the main add-on code.
... this article highlights the main features of that
design.
Annotator - Archive of obsolete content
next we'll give a quick overview of the annotator's
design, then go through the implementation, step by step.
...
design overview implementing the widget creating annotations storing annotations displaying annotations ...
Chapter 1: Introduction to Extensions - Archive of obsolete content
perhaps things like fine-grained tab controls, mouse gestures, extensive toolbars and buttons, a feed reader, integration with a variety of web applications, or sophisticated tools to assist with web
design.
... because firefox and its extensions are
designed to support multiple languages, excellent extensions come from all over the world, and can be quickly localized by anyone interested.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
this is a matter of personal preference, but the mac os theme seems to be
designed so that the bookmarks toolbar is always the last one (it has a lighter color than the rest).
...you should also consider using a graphic
designer for this work, as it takes a lot of attention to detail to make good icons.
Local Storage - Archive of obsolete content
you should carefully
design your database structure, taking into account features you're planning on adding in the future.
...they were
designed with rdf datasources in mind, but since firefox 3 they have been extended to support sqlite datasources as well.
The Box Model - Archive of obsolete content
with xul you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface
design.
...you should avoid using long blocks text, and also avoid
designing your ui so that everything fits just right around text.
Case Sensitivity in class and id Names - Archive of obsolete content
find out how this wrinkle can affect your site
design and best practices to avoid any problems.
...therefore, authors should not rely on case-sensitivity as a way of creating distinct identifiers, unless they are
designing solely for a truly standards-compliant browser such as netscape 6.
Index of archived content - Archive of obsolete content
ipting styling proxy ui pydom rdf api rdf datasource how-to reading textual data remote xul remote debugging rsyncing the cvs repository running windows debug builds downloaded from tinderbox sxsw 2007 presentations safe browsing safe browsing:
design documentation safely loading uris same origin policy for xbl space manager detailed
design space manager high level
design standalone xpcom standard makefile header static analysis for windows code under linux stress testing string quick reference string rosetta stone structure of an inst...
...defaultchromeuri toolkit.singletonwindowtype xulauncher ant script to assemble an extension application/http-index-format specification calicalendarview calicalendarviewcontroller califiletype mozilla.dev.platform faq reftest opportunities files symsrv_convert xb
designmode.js archived open web documentation browser detection and cross browser support browser feature detection displaying notifications (deprecated) e4x e4x for templating processing xml with e4x e4x tutorial ...
List of Mozilla-Based Applications - Archive of obsolete content
runner longman dictionary of contemporary english cd-rom lotus notes / sametime groupware the latest version of ibm lotus notes and sametime can embed xul applications lucidor e-book reader lx-office accounting tool looks like it makes at least some use of xul maavis simple ui & communications for accessibility framework
designed for elderly people with dementia but other applications mac os x operating system makes use of some mpl files such as libsecurity_asn1 maemo browser browser for maemo internet tablet development name is microb magooclient business process management tool uses mozilla rhino mantra security tool mccoy secure update tool for ...
...xulrunner qutecom phone software previously named openwengo redcar text editor seems to use xulrunner red hat directory server server product uses nss red hat certificate system server product uses nss regex renamer tool to rename files sameplace im client scenari platform application suite for
designing publishing chains script it android development platform uses mozilla rhino, develop directly on your android device seamonkey suite a volunteer community legally backed by mozilla foundation with 2.5 million downloads secure browser browser that uses virtualization created by dell sept cms for lemonde.fr web site more information...
MMgc - Archive of obsolete content
this isn't an accident, the gc system was in part
designed this way so that it could be easily incrementalized.
...these 4k blocks are aligned on 4k boundaries so we can easily allocate everything on 8-byte boundaries (a necessary consequence of the 32-bit atom
design-- 3 type bits and 29 pointer bits).
Misc top level - Archive of obsolete content
images, tables, and mysterious gapsalmost no matter when you started creating web pages, odds are pretty high you have one or more
designs based on the classic "convoluted tables and lots of images" paradigm.
... whether you've sliced up a logo so it fits in well with the
design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same.
Getting Started - Archive of obsolete content
extract theme while you can hypothetically begin with any theme already
designed for seamonkey 2, for the sake of consistency we'll speak as though everyone is editing classic (default seamonkey theme).
...pplication> <description> <!-- seamonkey's uuid --> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>min_sm_version</em:minversion> <em:maxversion>max_sm_version</em:maxversion> </description> </em:targetapplication> establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of seamonkey your theme wasn't
designed for -- or wasn't tested on.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
extract theme while you can hypothetically begin with any theme already
designed for firefox, for the sake of consistency we'll speak as though everyone is editing the default firefox theme.
...etapplication> <description> <!-- firefox's uuid --> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>min_ff_version</em:minversion> <em:maxversion>max_ff_version</em:maxversion> </description> </em:targetapplication> establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of firefox your theme wasn't
designed for -- or wasn't tested on.
Style System Overview - Archive of obsolete content
[
design flaw in frame/sc relationship] three functions for creating style contexts on nsistyleset, wrapped by similarly named ones on nsiprescontext: resolvestylecontextfor: for elements.
...[
design flaw, again] any specially-parented style contexts (not along frame parents, which need not be content parents) are reconstructed using nsiframe::getparentstylecontextframe.
Mozilla Crypto FAQ - Archive of obsolete content
("cfr" stands for "code of federal regulations.") the export administration regulations were created by the bureau of export administration (bxa) and were
designed primarily to implement the requirements of the export administration act of 1979 (as amended), also known as 50 usc appendices 2401-2420.
...export regulations were in essence a licensing scheme
designed to impede or prohibit certain types of speech (e.g., publishing cryptographic source code in electronic form), and were therefore unconstitutional under the first amendment to the u.s.
Supporting private browsing mode - Archive of obsolete content
} else if (atopic == "quit-application") { this._os.removeobserver(this, "quit-application"); this._os.removeobserver(this, "private-browsing"); } }, get inprivatebrowsing() { return this._inprivatebrowsing; }, get watcher() { return this._watcher; }, set watcher(val) { this._watcher = val; } }; of special note is the fact that this helper object is
designed to not break on versions of firefox without private browsing support (those prior to firefox 3.5).
...private browsing for theme
designers if you want to make your theme look different when used in private browsing mode, you can do so quite easily by using the browsingmode attribute in the window element in browser.xul.
Focus and Selection - Archive of obsolete content
don't display an alert during a focus or blur event as this will be distracting for the user and is poor user interface
design.
...this shouldn't be used for disabling an element, however; the disabled attribute or property should be used instead, since that is what it is
designed for.
XUL accessibility tool - Archive of obsolete content
general information the xul accessibility tool is a firefox extension
designed by aaron andersen of webaim as part of a mozilla foundation accessibility minigrant in the spring of 2007.
... it is
designed to test (insofar as automated testing is possible) the guidelines and requirement for creating accessible xul as set forth in the xul accessibility guidelines, and to report on any problems found in tested documents.
The Implementation of the Application Object Model - Archive of obsolete content
html is
designed to handle documents and not to handle applications.
...if xul is dropped from the picture, then dialogs would have to be described using native widgetry (unless you're willing to
design an html dialog system, which still wouldn't cut it without extending html), and communicator would have to ship with both widget sets.
editor - Archive of obsolete content
enable the
design mode of the document loaded in the editor.
... attributes editortype, src, type properties accessibletype, commandmanager, contentdocument, contentwindow, docshell, editingsession, editortype, webbrowserfind, webnavigation methods geteditor, gethtmleditor, makeeditable examples this example shows how to made the editor editable by setting the
designmode property of the loaded html document: <script language="javascript"> function initeditor(){ // this function is called to set up the editor var editor = document.getelementbyid("myeditor"); editor.contentdocument.
designmode = 'on'; } </script> <editor id="myeditor" editortype="html" src="about:blank" flex="1" type="content-primary"/> once editable, the document can have special forma...
XULRunner Hall of Fame - Archive of obsolete content
conkeror a highly programmable web browser with a leopard-oriented
design inspired by emacs.
... mockery mockery is a gui
design tool for creating and editing mockups, prototypes, and wireframes for web and desktop software.
Mozilla release FAQ - Archive of obsolete content
when i try to use cvs on windows, i get an error about no home directory you need to set the home environment variable to a valid directory, as cvs was
designed with unix in mind, and wants to put a file in your home directory (the password file) i'm on a unix system, and still am having problems building here's a brief guide to common build problems: cc1: invalid option 'foo' cc: no such file or directory 'foo' these are almost always caused by your platform-specific makefile being incorrect for your system, either because you're not using the compil...
...there are some important things that you can do if you don't code or care to document: ideas - if you have an idea for what you'd like to see in mozilla, post a feature request to bugzilla artwork -
design new icons and other resources for mozilla use talkback - talkback-enabled builds help the community by letting mozilla.org members where in the code crashes occur.
Common Firefox theme issues and solutions - Archive of obsolete content
you can modify/re
design these icons to match your theme provided appropriate padlock icons are used for secure sites but not on insecure sites.
... .inspector-breadcrumbs-button { -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 stretch; /* for ff13- */ -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch; /* for ff14+ */ } responsive
design view responsive
design view is missing background for unused area the responsive
design view tool (tools > web developer > responsive
design view) needs background styling for the unused area of the content window.
Building up a basic demo with PlayCanvas - Game development
engine vs editor the engine itself can be used as a standard library by including its javascript file directly in your html, so you can start coding right away; in addition the playcanvas toolset comes with an online editor that you can use to drag and drop components onto the scene — a great way to create games and other apps requiring scenes if you're more of a
designer than a coder.
... summary of course, it depends on your approach —
designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files.
Mobile First - MDN Web Docs Glossary: Definitions of Web-related terms
mobile first, a form of progressive enhancement, is a web-development and web-
design approach that focuses on prioritizing
design and development for mobile screen sizes over
design and development for desktop screen sizes.
...the mobile-first approach contrasts with the older approach of
designing for desktop screen sizes first, and then only later adding some support for small screen sizes.
A cool-looking box - Learn web development
a base color for the
design.
... example the following screenshot shows an example of what the finished
design could look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Advanced styling effects - Learn web development
users of older ie versions might just have to cope with no shadows, so just test your
designs to make sure your content is legible without them.
...one very nice property, which can help you bring interest to your
designs, is the filter property.
Test Your Skills: Fundamental layout comprehension - Learn web development
project brief you have been provided with some raw html, basic css, and images — now you need to create a layout for the
design, which should look just like the image below.
... in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive
design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Practical positioning examples - Learn web development
you might be thinking "why not just create the separate tabs as separate webpages, and just have the tabs clicking through to the separate pages to create the effect?" this code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save information across views, and integrate this feature into a larger ui
design.
... in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive
design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Styling links - Learn web development
we also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web
design purposes.
... note: don't worry if you are not familiar with backgrounds and responsive web
design yet; these are explained in other places.
What are hyperlinks? - Learn web development
in the rest of this article, we discuss the various types of links and their importance to modern web
design.
...we'll talk about
designing website navigation in another article, but as a rule, whenever you add a new webpage, make sure at least one of your other pages links to that new page.
Structuring a page of content - Learn web development
objective: to test knowledge of web page structures, and how to represent a prospective layout
design in markup.
... the provided css is
designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.
What’s in the head? Metadata in HTML - Learn web development
a lot of the features you'll see on websites are proprietary creations,
designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.
...for example: <meta name="twitter:title" content="mozilla developer network"> adding custom icons to your site to further enrich your site
design, you can add references to custom icons in your metadata, and these will be displayed in certain contexts.
From object to iframe — other embedding technologies - Learn web development
<iframe> elements are
designed to allow you to embed other web documents into the current document.
... configure csp directives csp stands for content security policy and provides a set of http headers (metadata sent along with your web pages when they are served from a web server)
designed to improve the security of your html document.
HTML table basics - Learn web development
html tables should be used for tabular data — this is what they are
designed for.
... we have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the
design just generally looks better.
General asynchronous programming concepts - Learn web development
conclusion modern software
design increasingly revolves around using asynchronous programming, to allow programs to do more than one thing at a time.
...in the rest of this module, we'll explore further why asynchronous code matters and how to
design code that avoids some of the problems described above.
Client-side storage - Learn web development
this api is
designed for storing http responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection.
... the cache api is a another client-side storage mechanism, with a bit of a difference — it is
designed to save http responses, and so works very well with service workers.
Drawing graphics - Learn web development
strokes and line widths so far we've looked at drawing filled rectangles, but you can also draw rectangles that are just outlines (called strokes in graphic
design).
...this is very useful in many situations, like this one, where we want our
design to be drawn relative to the center of the canvas.
Getting started with Ember - Learn web development
designers and other non-developers can contribute to page templates without any knowledge of javascript, and interactivity can be added later.
...there are a couple of github issues open about this on the todomvc family of projects: add keyboard access to demos re-enable outline on focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app
design.
Accessibility in React - Learn web development
the <todo /> component will switch templates, as we
designed, and you'll see a form that lets us edit the name of the task.
... our useeffect() hook is behaving exactly as we
designed it: it runs as soon as the component renders, sees that isediting is false, and focuses the "edit" button.
Testopia
it is
designed to be a generic tool for tracking test cases, allowing for testing organizations to integrate bug reporting with their test case run results.
... though it is
designed with software testing in mind, it can be used to track testing on virtually anything in the engineering process.
Chrome registration
it will typically be a xul file, since xul is
designed for describing the contents of windows and dialogs.
... n.b.: because older versions of firefox do not understand the contentaccessible flag, any extension
designed to work with both firefox 3 and older versions of firefox will need to provide a fallback.
Interface Compatibility
documented apis which are shipped as part of the jetpack sdk are
designed to work in future versions of firefox.
... where appropriate, new apis should be
designed so that they are compatible with future plans, and clients do not need xpcom boilerplate.
Storage access policy: Block cookies from trackers
this policy is
designed as an alternative to the older cookie policies, which have been available in firefox for many years.
... faq this cookie policy has the potential to lead to site breakage, but has been
designed to allow common third-party integrations to continue to work while preventing cross-site tracking.
Script security
objects in a privileged scope are allowed complete access to objects in a less privileged scope, but by default they see a restricted view of such objects,
designed to prevent them from being tricked by the untrusted code.
... xrays are
designed to prevent untrusted code from confusing trusted code by redefining objects in unexpected ways.
Extending a Protocol
the tutorial is
designed for beginners and will walk you through all the steps you need to get things working.
... the tutorial is
designed for browser engineers who are implementing dom/web apis that need to, for example, send a message to the os or spin up something off the main thread - so it's biased towards supporting w3c/whatwg dom apis.
Examples
son) { 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/re
design/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 = "' + this.naturalwidth + '".'); ...
...change this line: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/re
design/img/favicon32.png']; change it to: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/re
design/img/favicon32.png', 'blah blah']; i added 'blah blah' to that array, it will cuase the whole promise to reject.
Localization formats
html/php maybe you are
designing a project that has relatively small translation needs like three to four lines (or more) of content asking users to update to the next version of software available.
...that file will have the following structure: ;getting started débuter avec firefox the english content is
designated by the semi-colon and the localizer provides the translation underneath.
Using the viewport meta tag to control layout on mobile browsers
enter viewport meta tag however, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive
design techniques.
...to get sharper images on these screens, web developers may want to
design images – or whole layouts – at a higher scale than their final size and then scale them down using css or viewport properties.
Mozilla Web Developer FAQ
also, html was
designed to adapt to different presentation media, so different presentations of the same document are to be expected.
...when xhtml output has been retrofitted to a content management system that was not
designed for xml from the ground up, the system usually ends up discriminating gecko users by serving tag soup labeled as xml to gecko (leading to a parse error) and serving the same soup labeled as text/html to ie (not leading to a parse error).
JSS Provider Notes
there is no good
design reason for this difference, but it is necessitated by a quirk in the nss implementation.
...since these problems lie deep in the nss
design and implementation, there is no clear timeframe for fixing them.
Mozilla-JSS JCA Provider notes
there is no good
design reason for this difference, but it is necessitated by a quirk in the nss implementation.
...since these problems lie deep in the nss
design and implementation, there is no clear timeframe for fixing them.
Python binding for NSS
design goals nss and nspr are c language api's which python-nss "wraps" and exposes to python programs.
... the
design of python-nss follows these basic guiding principles: be a thin layer with almost a one-to-one mapping of nss/nspr calls to python methods and functions.
NSS tools : modutil
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are
designed to be shared, these are the shared database type.
...ple, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) pk12util (1) signtool (1) the nss wiki has information on the new database
design and how to configure applications to use it.
NSS tools : pk12util
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are
designed to be shared, these are the shared database type.
...for example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) modutil (1) the nss wiki has information on the new database
design and how to configure applications to use it.
NSS tools : modutil
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are
designed to be shared, these are the shared database type.
...rs how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) pk12util (1) signtool (1) the nss wiki has information on the new database
design and how to configure applications to use it.
NSS tools : pk12util
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are
designed to be shared, these are the shared database type.
...ow-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) modutil (1) the nss wiki has information on the new database
design and how to configure applications to use it.
NSS tools : signver
these new databases provide more accessibility and performance: o cert9.db for certificates o key4.db for keys o pkcs11.txt, which is listing of all of the pkcs #11 modules contained in a new subdirectory in the security databases directory because the sqlite databases are
designed to be shared, these are the shared database type.
... example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also signtool (1) the nss wiki has information on the new database
design and how to configure applications to use it.
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.
... architecture after a few iterations of our original
design, the current necko architecture looks something like this: urls necko's primary responsibility is moving data from one location, to another location.
Bytecode Descriptions
creating and deleting bindings bindvar stack: ⇒ env push the current variableenvironment (the environment on the environment chain
designated to receive new variables).
... defvar operands: (uint32_t nameindex) create a new binding on the current variableenvironment (the environment on the environment chain
designated to receive new variables).
SpiderMonkey: The Mozilla JavaScript runtime
tips, tricks and philosophy future directions future directions for functionality,
design, and coding practices.
... spidermonkey internals a
design overview and a file-by-file walkthrough of the implementation.
WebReplayRoadmap
static type integration (not yet implemented) static type systems like flow and typescript are great and really useful for managing an app's codebase, but they are unsound by
design, and it is pretty easy to satisfy the type system and yet have different types in practice.
... while cloud integration is not in placer, web replay's architecture has recently been re
designed in preparation for cloud support, and communicating with replaying processes over a network connection instead of ipc should work pretty efficiently.
Gecko Roles
role_text_leaf represents selectable text that allows edits or is
designated read-only.
... role_ipaddress represents an edit control
designed for an internet protocol (ip) address.
Using the Places favicon service
for an overview of the database
design, see the places database.
...expiration is handled by browser/components/places/src/nsnavhistoryexpire.cpp as described in places
design.
Places
design documents the places database high-level overview of the places database
design.
... history service
design design of the history service.
Component Internals
an overview of xpcom discussed the factory
design pattern that's used in a factory object.
... the factory
design pattern in xpcom is represented by the nsifactory interface.
nsIAccessibleRole
role_text_leaf 42 represents selectable text that allows edits or is
designated read-only.
... role_ipaddress 63 represents an edit control
designed for an internet protocol (ip) address.
nsIBrowserHistory
designates the specified url as coming from a link explicitly followed by the user (for example by clicking on it).
... this method
designates the url as having been explicitly typed in by the user, so it can be used as an autocomplete result.
nsINavHistoryService
markpageastyped() this method
designates the url as having been explicitly typed in by the user, so it can be used as an autocomplete result.
... markpageasfollowedlink()
designates the specified url as coming from a link explicitly followed by the user (for example by clicking on it).
Component; nsIPrefBranch
note: the preferences system is not
designed to store large amounts of data: all preferences are stored in a single file, which is read at the application startup.
... note: the preferences system is not
designed to store large amounts of data: all preferences are stored in a single file, which is read at the application startup.
Getting Started Guide
in all other situations, it is
designed to be a drop in replacement for a raw xpcom pointer.
...nscomptr is
designed to be used with xpcom interfaces, so don't use it with non-interfaces with specific exceptions described below.
Xray vision
this is the problem that xray vision is
designed to solve.
... waiving xray vision xray vision is a kind of security heuristic,
designed to make most common operations on untrusted objects simple and safe.
Index - Firefox Developer Tools
36 measure a portion of the page
design, devtools, developer, firefox, layout, measure, measuring, measuring tool, tools using the measuring tool you can measure a specific area of a web page.
... 101 responsive
design mode
design, dev tools, firefox, guide, responsive
design, tools, web development, l10n:priority responsive
design is the practice of
designing a website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.
Tips - Firefox Developer Tools
viewport: click the screenshot button () in responsive
design mode.
... click an @media rule to apply it in responsive
design mode.
Firefox Developer Tools
(note: this feature is not turned on by default and must be enabled in settings before the icon will appear.) toggles responsive
design mode.
... responsive
design mode see how your website or app will look and behave on different devices and network types.
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.
... using the paint worklet to use the paint worklet, we need to register it using addmodule() and include it in our css, ensuring the css selector matches a dom node in our html registering the worklet the setup and
design of our paint worklet took place in the external script shown above.
Introduction to the DOM - Web APIs
the page content is stored in the dom and may be accessed and manipulated via javascript, so that we may write this approximative equation: api = dom + javascript the dom was
designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent api.
...however, you
design your test pages, testing the interfaces as you read about them is an important part of learning how to use the dom effectively.
msAudioCategory - Web APIs
yes foregroundonlymedia games or other sounds
designed only to work in the foreground, but will mute existing background media sounds.
... game audio needed for the game experience (dancing games, music games) feature films (
designed to pause when they go to the background) no gameeffects game sound effects
designed to mix with existing audio characters talking all non-music sounds no gamemedia background music played by a game no soundeffects game or other sound effects
designed to mix with existing audio: characters talking beeps, dings, brief sounds no other default audio type, and recommended for all audio media that does not need to continue playing in the background.
HTMLElement: beforeinput event - Web APIs
the event also applies to elements with contenteditable enabled, and to any element when
designmode is turned on.
... in the case of contenteditable and
designmode, the event target is the editing host.
HTMLElement: input event - Web APIs
bubbles yes cancelable no interface inputevent event handler property globaleventhandlers.oninput the event also applies to elements with contenteditable enabled, and to any element when
designmode is turned on.
... in the case of contenteditable and
designmode, the event target is the editing host.
In depth: Microtasks and the JavaScript runtime environment - Web APIs
it was
designed in an era in which this was a positive choice; there were few multi-processor computers available to the general public, and the expected amount of code that would be handled by javascript was relatively low at that time.
...a well-
designed web site or app uses workers to perform any complex or lengthy operations, leaving the main thread to do as little work as possible beyond updating, laying out, and rendering the web page.
Storage Access API - Web APIs
</iframe> the api is
designed to limit the potential storage exceptions to origins for which the user has shown an intent to interact.
...
design properties unique to firefox are summarized here: if the embedded origin tracker.example has already obtained first-party storage access on the top-level origin foo.example, and the user visits a page from foo.example embedding a page from tracker.example again in less than 30 days, the embedded origin will have storage access immediately when loading.
SubtleCrypto - Web APIs
even assuming you use the basic cryptographic functions correctly, secure key management and overall security system
design are extremely hard to get right, and are generally the domain of specialist security experts.
... errors in security system
design and implementation can make the security of the system completely ineffective.
Signaling and video calling - Web APIs
designing the signaling protocol now that we've built a mechanism for exchanging messages, we need a protocol defining how those messages will look.
...this code is
designed to safely handle partially-started calls.
Using DTMF with WebRTC - Web APIs
on the other hand, if the tone buffer is empty, our example is
designed to disconnect the call.
... dialing once the connection is open our
design requires that when the connection is established, we immediately send the dtmf string.
Using WebRTC data channels - Web APIs
the problem arises from the fact that sctp—the protocol used for sending and receiving data on an rtcdatachannel—was originally
designed for use as a signaling protocol.
... in order to resolve this issue, a new system of stream schedulers (usually referred to as the "sctp ndata specification") has been
designed to make it possible to interleave messages sent on different streams, including streams used to implement webrtc data channels.
WebXR Device API - Web APIs
webxr is a group of standards which are used together to support rendering 3d scenes to hardware
designed for presenting virtual worlds (virtual reality, or vr), or for adding graphical imagery to the real world, (augmented reality, or ar).
... webxr device api concepts and usage example webxr hardware setup while the older webvr api was
designed solely to support virtual reality (vr), webxr provides support for both vr and augmented reality (ar) on the web.
Using the Web Audio API - Web APIs
the web audio api handles audio operations inside an audio context, and has been
designed to allow modular routing.
...because of this modular
design, you can create complex audio functions with dynamic effects.
Web Crypto API - Web APIs
even assuming you use the basic cryptographic functions correctly, secure key management and overall security system
design are extremely hard to get right, and are generally the domain of specialist security experts.
... errors in security system
design and implementation can make the security of the system completely ineffective.
ARIA: button role - Accessibility
if the
design were to call for the button label to change from "mute" to "unmute," a toggle button would not be appropriate, so the the aria-pressed attribute would be omitted.
...however, a better solution is to adjust the visual
design so it matches the function and aria role.
Accessibility and Spacial Patterns - Accessibility
the two images below are from nasa research, specifically, from the article, "
designing with blue" "spatial localization.
... see also mdn accessibiltity: what users can do to browse more safely web accessibiltity for seizures and physical reactions web accessibility: understanding colors and luminance braille part 3: a step-by-step guide to typesetting ada braille correctly in adobe illustrator spatial math in brailleblaster (4 of 5) government literature nasa:
designing with blue math spatial reasoning: why math talk is about more than numbers scientific literature colour constancy in context: roles for local adaptation and levels of reference gamma oscillations and photosensitive epilepsy characterizing the patterned images that precipitate seizures and optimizing guidelines to prevent them arnold wilkins, john emmett, and graham harding contr...
Accessibility documentation index - Accessibility
43 aria: complementary role aria, aria role, reference, role-complementary the complementary landmark role is used to
designate a supporting section that relates to the main content, yet can stand alone when separated.
... the two images below are from nasa research, specifically, from the article, "
designing with blue" 84 accessibility documentation index accessibility, index this document provides a list of links to all accessibility articles on the mozilla developer network.
Web Accessibility: Understanding Colors and Luminance - Accessibility
this was done by way of
design, "to achieve white alignment of the monitor" according to the nasa document, "luminance contrast in color graphics" once luminance is established, the color contrast ratio can be established.
... an interesting study by nasa on the color blue, for example, noted that this color, which has low luminance, can be made legible if "care was taken to acheive adequate luminance contrast" (from the article,
designing with blue) wcag 2.1 defines relative luminance as follows (as of july 2019): for the srgb colorspace, the relative luminance of a color is defined as l = 0.2126 * r + 0.7152 * g+ 0.0722 * b where r, g and b are defined as: if rsrgb <= 0.03928 then r = rsrgb/12.92 else r = ((rsrgb+0.055)/1.055) ^ 2.4 if gsrgb <= 0.03928 then g = gsrgb/12.92 else g = ((gsrgb+0.055)/1.055) ^ 2.4 if bsrg...
Operable - Accessibility
guideline 2.3 — seizures and physical reactions: do not
design content in a way that is known to cause seizures or physical reactions this refers to content that, if not changed, could cause seizures in users with conditions such as epilepsy or could cause physical reactions (like dizziness) for users with conditions such as vestibular disorders.
... understanding animations from interactions note: also see the wcag description for guideline 2.3 seizures and physical reactions: do not
design content in a way that is known to cause seizures or physical reactions.
:scope - CSS: Cascading Style Sheets
<style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the
design of this feature as well as lack of other implementations resulted in the decision to remove it.
...<style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the
design of this feature as well as lack of other implementations resulted in the decision to remove it.
@document - CSS: Cascading Style Sheets
it is
designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.
...this has been limited to use only in user and ua sheets in firefox 59 in nightly and beta — an experiment
designed to mitigate potential css injection attacks (see bug 1035091).
shape - CSS: Cascading Style Sheets
rect the shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional
designs are appropriate.
... round the shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded
designs are appropriate.
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
flexbox was
designed as a single dimensional layout, meaning that it deals with laying out items as a row or as a column — but not both at once.
...in this guide i will explain how this works, what it is
designed for and what situations really require css grid layout rather than flexbox.
CSS Flexible Box Layout - CSS: Cascading Style Sheets
css flexible box layout is a module of css that defines a css box model optimized for user interface
design, and the layout of items in one dimension.
... typical use cases of flexbox common
design patterns that are typical flexbox use cases.
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout, and the box alignment specification are
designed to work with writing modes in css.
...this will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a
design.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
these are style sheets that define styles as part of the
design of a given web page or site.
... user stylesheets the user (or reader) of the web site can choose to override styles in many browsers using a custom user stylesheet
designed to tailor the experience to the user's wishes.
Column layouts - CSS: Cascading Style Sheets
requirements there are a number of
design patterns you might want to achieve with your columns: a continuous thread of content broken up into newspaper-style columns.
...it is
designed for controlling layout as a row or a column, but not both at the same time.
font-size - CSS: Cascading Style Sheets
for example, users with limited vision may wish to set the font size much larger than the size chosen by a web
designer.
... avoid using them for font sizes if you wish to create an inclusive
design.
list-style-type - CSS: Cascading Style Sheets
e.g., 壱萬壱阡壱百壱拾壱 the kanjis are
designed so that they can't be modified to look like another correct one japanese-informal japanese informal numbering kannada -moz-kannada example katakana e.g.
...this ensures the
design is unaffected by the bug fix and that list items are not improperly described.
text-size-adjust - CSS: Cascading Style Sheets
the text-size-adjust property allows web authors to disable or modify this behavior, as web pages
designed with small screens in mind do not need it.
... formal definition initial valueauto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).applies toall elementsinheritedyespercentagesyes, refer to the corresponding size of the text fontcomputed valueas specifiedanimation typediscrete formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly
designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none: p { -webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification status comment css mobile text size adjustment module level 1the definition of 'text-size-adjust' in that specification.
Audio and Video Delivery - Developer guides
mse has been
designed with dash in mind.
...the most popular libraries allow you to choose a consistent player
design over all browsers and provide a fallback for browsers that don't support audio and video natively.
Overview of events and handlers - Developer guides
this overview of events and event handling explains the code
design pattern used to react to incidents occurring when a browser accesses a web page, and it summarizes the types of such incidents modern web browsers can handle.
... the event
design pattern the event system, at its core, is simply a programming
design pattern.
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.
... resources w3c web education community group wiki covers web
design, html and html5, css, javascript and accessibility.
Developer guides
events developer guide events refer to two things: a
design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page; and the naming, characterization, and use of a large number of incidents of different types.
... mobile web development this article provides an overview of some of the main techniques needed to
design web sites that work well on mobile devices.
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
the html idiomatic text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical
designations, among others.
...among the use cases for the <i> element are spans of text representing a different quality or mode of text, such as: alternative voice or mood taxonomic
designations (such as the genus and species "homo sapiens") idiomatic terms from another language (such as "et cetera"); these should include the lang attribute to identify the language technical terms transliterations thoughts (such as "she wondered,what is this writer talking about, anyway?") ship or vessel names in western writing systems (such as "they searched the docks for the empre...
Microdata - HTML: Hypertext Markup Language
web developers can
design a custom vocabulary or use vocabularies available on the web, such as the widely used schema.org vocabulary.
...for others, a vocabulary will need to be
designed.
Evolution of HTTP - HTTP
in 2000, a new pattern for using http was
designed: representational state transfer (or rest).
...http's original
design proved to be a masterpiece, allowing the web to evolve over a quarter of a century, without the need of a mutiny.
Browser detection using the user agent - HTTP
also, rethink your
design: can you use progressive enhancement or fluid layouts to help remove the need to do this?
... progressive enhancement this
design technique involves developing your web site in 'layers', using a bottom-up approach, starting with a simpler layer and improving the capabilities of the site in successive layers, each using more features.
Content Security Policy (CSP) - HTTP
csp is
designed to be fully backward compatible (except csp version 2 where there are some explicitly-mentioned inconsistencies in backward compatibility; more details here section 1.1).
...a properly
designed content security policy helps protect a page against a cross site scripting attack.
Connection management in HTTP/1.x - HTTP
to ease these problems, the concept of a persistent connection has been
designed, even prior to http/1.1.
...however, the failure of pipelining has lead to
designing superior connection management models, which have been incorporated into http/2.
HTTP Index - HTTP
it was
designed for communication between web browsers and web servers, but it can also be used for other purposes.
...
designed with extensibility in mind, it has seen numerous additions over the years; this lead to its specification being scattered through numerous specification documents (in the midst of experimental abandoned extensions).
HTTP
it was
designed for communication between web browsers and web servers, but it can also be used for other purposes.
... 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 re-introduction to JavaScript (JS tutorial) - JavaScript
it is
designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world.
...functions that are
designed to be called by new are called constructor functions.
Working with objects - JavaScript
« previousnext » javascript is
designed on a simple object-based paradigm.
...a cup has a color, a
design, weight, a material it is made of, etc.
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 fre...
...use the pattern on a case-by-case basis based on your
design when you know the object contains no cycles in the reference graph, otherwise an endless loop will be triggered.
eval() - JavaScript
many dom apis are
designed with this in mind, so you can (and should) write: // instead of settimeout(" ...
... pass data instead of code for example, an extension
designed to scrape contents of web-pages could have the scraping rules defined in xpath instead of javascript code.
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.
The "codecs" parameter in common media types - Web media technologies
42 00 extended profile (xp)
designed for streaming video over the network, with high compression capability and further improvements to data robustness and stream switching.
... 56 00 scalable constrained high profile a subset of the scalable high profile
designed mainly for real-time communticions.
Media type and format guide: image, audio, and video content - Web media technologies
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.
... image file types for web
designers fundamental information about the various image file types that may be useful for web
designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.
Web Performance
web fonts are more prominent in web
design than ever, yet many developers simply embed them from a third party service and think nothing of it.
... performance budgets marketing,
design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance.
units-per-em - SVG: Scalable Vector Graphics
this is the size of the
design grid on which glyphs are laid out.
... note: this value is almost always necessary as nearly every other attribute requires the definition of a
design grid.
Paths - SVG: Scalable Vector Graphics
in this case, a shortcut version of the cubic bézier can be used,
designated by the command s (or s).
...the final two parameters
designate the x and y coordinates to end the stroke.
XML introduction - XML: Extensible Markup Language
instead, you define your own tags
designed specifically for your needs.
... comments <!-- comment --> "correct" xml (valid and well-formed) Сorrect
design rules for an xml document to be correct, the following conditions must be fulfilled: document must be well-formed.
Index - XSLT: Extensible Stylesheet Language Transformations
13 transforming xml with xslt needsmigration, transforming_xml_with_xslt, xml, xslt the separation of content and presentation is a key
design feature of xml.
... the structure of an xml document is
designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented.
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes an overview the separation of content and presentation is a key
design feature of xml.
... the structure of an xml document is
designed to reflect and clarify important relationships among the individual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented.
Index - WebAssembly
it is also
designed to run alongside javascript, allowing both to work together.
... 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.
WebAssembly
it is also
designed to run alongside javascript, allowing both to work together.
... webassembly is
designed to complement and run alongside javascript — using the webassembly javascript apis, you can load webassembly modules into a javascript app and share functionality between the two.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
the extension will actually work fine even if these are located in the content package, but putting them in the skin package has the benefit of making it possible to
design guis that match specific firefox themes, and allowing theme developers to create special visual effects for extensions.
Adding preferences to an extension - Archive of obsolete content
window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); window.addeventlistener("unload", function(e) { stockwatcher.shutdown(); }, false);
design the preference dialog now that we've written all the code, we need to build the xul file for the options dialog.
JXON - Archive of obsolete content
ocument with the following structure: <myboolean>true</myboolean> <myarray>cinema</myarray> <myarray>hot dogs</myarray> <myarray>false</myarray> <myobject> <nickname>jack</nickname> <registration_date>dec 25, 1995</registration_date> <privileged_user /> </myobject> <mynumber>99</mynumber> <mytext>hello world!</mytext> this example also shows how the ideal jxon document is an xml document
designed specifically to be converted in json format, though our algorithms work fine with any kind of xml document.
GRE - Archive of obsolete content
dependent libraries and environment variables the xulrunner gre is
designed so that the embedder does not need to set any environment variables such as path or ld_library_path before calling xpcomgluestartup(), because it dynamically loads the correct dependent libraries.
BundleLibrary - Archive of obsolete content
not the cleanest, but it got all my plugins at once) istylr: istylr.webapp online web
design tool (full win installer bundled with prism is available here - thanks to lars eric for his nsis script) meebo: meebo.webapp miro guide: miroguide.webapp motor0: motor0.webapp useful webapp on maintenance and fuel consumptions managment pandora: pandora@prism.app.webapp internet radio that only plays music you like.
Extensions - Archive of obsolete content
see the prism main window xul file for the actual structure: webrunner.xulporting an existing extension since there aren't many extensions
designed explicitly for prism, you may need to port your favorite extensions.
Priority Content - Archive of obsolete content
migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also check if any extra files live in the article's directory --jens.b 14:07, 26 apr 2005 (pdt) dependant on: mostly completed*: class xb
designmode / devedge - joel coreson please put completed articles on the devedge page instead.
Proxy UI - Archive of obsolete content
the preference changes selecting the proxy "mode" all product's proxy preference panels share a basic
design: a radio button that selects the proxy mode, then "related proxy mode" ui when needed.
richlistbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of listitems (richlistitems), similar to a listbox, but is
designed to be used when the items do not contain simple text content.
Custom app bundles for Mac OS X - Archive of obsolete content
some default values for preferences) application bundle contents in addition to the standard directory hierarchy that's required of all mac os x applications, as shown above in application bundle layout, there are some specific rules for what content goes where: the top-level directory is given a name that ends with .app which
designates the whole package as an application bundle.
Deploying XULRunner - Archive of obsolete content
xulrunner 39 and later due to mac os x code signing rules and how they interact with the
design of xulrunner (see bug 1105044 for the inside scoop), starting with xulrunner 39 the xulrunner library files are no longer able to reside in a xulrunner framework directory.
Extentsions FAQ - Archive of obsolete content
just drag them there from the toolbar customisation window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://web
designs.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages.
2006-09-22 - Archive of obsolete content
thai issue for 2.0 timeframe arabic support & uniscribe: details nstextframe: re-
design and impact on i18n native unicode converter editing and selection: should editing and selection operate on grapheme clusters?
2006-10-20 - Archive of obsolete content
help required
designing new home for quality.mozilla.org - talented web
designers and/or artists interested in helping the
design for quality.mozilla.org please read this posting.
NPN_SetValue - Archive of obsolete content
description a good place to set plugin operation mode such as windowless mode is npp_new, so the browser knows right away what mode the plugin is
designed to operate in.
NP_Port - Archive of obsolete content
since the port is shared between the plug-in and other plug-ins and the browser, the plug-in should always do the following: draw only within the area
designated by the npwindow.
Adobe Flash - Archive of obsolete content
function myflash_dofscommand(command, args) { // handle any callback logic that you may have
designed into your flash plugin // the flash animation will supply you with the values for command and args // this is a function that handles any information that the flash animation may pass it // actionscript can communicate with javascript via fscommands!
TCP/IP Security - Archive of obsolete content
designing a cryptographically sound application protocol is very difficult, and implementing it properly is even more challenging, so creating new application layer security controls is likely to create vulnerabilities.
Scratchpad - Archive of obsolete content
unlike the web console, which is
designed for interpreting a single line of code at a time, scratchpad lets you edit larger chunks of javascript code, then execute it in various ways depending on how you want to use the output.
References - Archive of obsolete content
from matt kruse debugging html and css is a well
designed website explaining well the how, why and where of html validation, css validation and debugging tools.
Using Web Standards in your Web Pages - Archive of obsolete content
the problem lies with
designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers." -web standards project this article provides an overview of the process for upgrading the content of your web pages to conform to the world wide web consortium (w3c) web standards.
E4X for templating - Archive of obsolete content
() { var content = <></>; for each (var el in a) { el.@att = 'val'; content += el; } return content; }()}</bar>; giving: <bar> <b att="val"/> <c att="val"/> <d att="val"/> </bar> one may still wish to remove complex business logic and supply as variables to the e4x, but the above allows the shaping of resulting content to be made more clear (and sometimes
design logic also calls for extra processing).
Index - Game development
18 building up a basic demo with playcanvas 3d, animation, beginner, canvas, games, playcanvas, tutorial, webgl, camera, lighting, rendering of course, it depends on your approach —
designers may favor the online editor while programmers will prefer having the full control over the coding environment and will probably use the engine's source files.
Game distribution - Game development
such games are often
designed to be played with two, or even one finger, so you can hold the device, play the game and be able to use the second hand for whatever you currently need.
Audio for Web games - Game development
<a href="clav.mp3" class="track">clavi</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="clavi-play-label"> <span id="clavi-play-label">play</span> </button> </li> </ul> <p class="sourced">all tracks sourced from <a href="http://jplayer.org/">jplayer.org</a></p> </section> all of these tracks are the same tempo and are
designed to be synchronized with each other, so we need to make sure they are loaded and available to the api before we are able to play them.
Gecko FAQ - Gecko Redirect 1
gecko is the open source browser engine
designed to support open internet standards such as html 5, css 3, the w3c dom, xml, javascript, and others.
Card sorting - MDN Web Docs Glossary: Definitions of Web-related terms
card sorting is a simple technique used in information architecture whereby people involved in the
design of a website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then organize those features into categories or groupings.
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
margins, padding or the use of the space distribution properties in box alignment can all contribute to the visible gap – therefore the grid-gap properties should not be seen as equal to “the gutter size” unless you know that your
design has not introduced any additional space with one of these methods.
Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
ions for markup language (e.g., html), style definitions (i.e., css), dom, accessibility iana (internet assigned numbers authority): name and number registries ecma intl.: scripting standards, most prominently for javascript iso (international organization for standardization): standards governing a diverse array of aspects, including character encodings, website management, and user-interface
design learn more general knowledge web standards on wikipedia ...
MDN Web Docs Glossary: Definitions of Web-related terms
quic r rail random number generator raster image rdf real user monitoring (rum) recursion reference reflow regular expression rendering engine repo reporting directive request header resource timing response header responsive web
design rest rgb ril robots.txt round trip time (rtt) routers rss rtcp (rtp control protocol) rtf rtl (right to left) rtp (real-time transport protocol) and srtp (secure rtp) rtsp: real-time streaming protocol ruby s safe same-origin policy scm ...
Cascade and inheritance - Learn web development
important declarations in author style sheets important declarations in user style sheets it makes sense for web developers' stylesheets to override user stylesheets, so the
design can be kept as intended, but sometimes users have good reasons to override web developer styles, as mentioned above — this can be achieved by using !important in their rules.
Creating fancy letterheaded paper - Learn web development
example the following screenshot shows an example of what the finished
design could look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Organizing your CSS - Learn web development
css methodologies instead of needing to come up with your own rules for writing css, you may benefit from adopting one of the approaches already
designed by the community and tested across many projects.
Combinators - Learn web development
if you remove the > that
designates this as a child combinator, you end up with a descendant selector and all <li> elements will get a red border.
Test your skills: tables - Learn web development
in this task we are going to style the same table, but using some good practices for table
design as outlined in the external article web typography:
designing tables to be read not looked at.
CSS values and units - Learn web development
hsl and hsla values slightly less well-supported than rgb is the hsl color model (not supported on old versions of ie), which was implemented after much interest from
designers.
CSS building blocks - Learn web development
understanding how big the different features in your
design will be is important, and in this lesson, we will summarize the various ways elements get a size via css and define a few terms around sizing that will help you in the future.
Flexbox - Learn web development
previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive
design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
Floats - Learn web development
previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive
design beginner's guide to media queries legacy layout methods supporting older browsers fundamental layout comprehension assessment ...
CSS FAQ - Learn web development
new html pages are expected to be
designed for standards-compliant browsers, and as a result, pages with a modern doctype declaration will be rendered with standards mode.
Use CSS to solve common problems - Learn web development
how to change the box model completely using box-sizing how to control backgrounds how to control borders how to style an html table how to add shadows to boxes uncommon and advanced techniques css allows some advanced
design techniques.
Web fonts - Learn web development
you can use the font stack to specify preferable fonts, followed by web-safe alternatives, followed by the default system font, but this adds overhead in terms of testing to make sure that your
designs look ok with each font, etc.
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).
Web forms — Working with user data - Learn web development
introductory guides your first form the first article in our series provides your very first experience of creating a web form, including
designing a simple form, implementing it using the right html elements, adding some very simple styling via css, and how data is sent to a server.
Document and website structure - Learn web development
many web
designers consider the navigation bar to be part of the header rather than an individual component, but that's not a requirement; in fact, some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.
What is JavaScript? - Learn web development
they do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the
design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.
Web performance - Learn web development
fonts and performance a look at whether you need to include external fonts and, if you do, how to include the fonts your
design requires with the least impact on your sites performance.
Client-Server Overview - Learn web development
http/1.1 200 ok server: apache x-backend-server: developer1.webapp.scl3.mozilla.com vary: accept,cookie, accept-encoding content-type: text/html; charset=utf-8 date: wed, 07 sep 2016 00:11:31 gmt keep-alive: timeout=5, max=999 connection: keep-alive x-frame-options: deny allow: get x-cache-info: caching content-length: 41823 <!doctype html> <html lang="en-us" dir="ltr" class="re
design no-js" data-ffo-opensanslight=false data-ffo-opensans=false > <head prefix="og: http://ogp.me/ns#"> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <script>(function(d) { d.classname = d.classname.replace(/\bno-js/, ''); })(document.documentelement);</script> ...
Ember resources and troubleshooting - Learn web development
using the
design patterns provided by the framework, a route using fetch() would look something like this: import route from '@ember/routing/route'; export default class myroute extends route { async model() { let response = await fetch('some/url/to/json/data'); let json = await response.json(); return { data: json }; } } see more information on specifying the route's model here.
Implementing feature detection - Learn web development
this works in a similar manner to media queries (see also responsive
design problems) — except that instead of selectively applying css depending on a media feature like a resolution, screen width or aspect ratio, it selectively applies css depending on whether a css feature is supported.
Cross browser testing - Learn web development
this includes linting code, handing css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive
design problems, and more.
Chrome Worker Modules
a module is a file, whose filename generally ends with either “.js” or “.jsm”, and
designed to be opened through require().
Accessibility API cross-reference
command a supporting section of the document,
designed to be complementary to the main content at a similar level in the dom hierarchy, but remains meaningful when separated from the main content.
Accessibility Features in Firefox
in much the same way that user css lets you take control of a web page's style, user scripts let you easily control any aspect of a web page's
design or interaction.
CSUN Firefox Materials
in much the same way that user css lets you take control of a web page's style, user scripts let you easily control any aspect of a web page's
design or interaction.
Embedding API for Accessibility
open issue: accessibility settings per url a powerful possibility is that we
design an interface for setting certain preferences based on the url.
Mozilla's Section 508 Compliance
here are the section 508 requirements and how far along mozilla seamonkey rv1.8a4 is with each one: requirement windows linux/unix mac os requirement windows linux/unix mac os (a) when software is
designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of performing a function can be discerned textually.
Mozilla’s UAAG evaluation report
(p2) p our interface for image toggling needs re
design unfortunately, there are quite a few open bugs on image toggling guideline 4.
Add-ons
extensions written using webextensions apis for firefox are
designed to be cross-browser compatible.
Adding a new CSS property
some common mistakes to watch out for when writing custom parsing code (which might go away if we re
design the parser along the lines described in css3-syntax): make sure to call skipuntil() to look for the matching close parentheses, braces, or brackets whenever you hit an error inside of them.
A bird's-eye view of the Mozilla framework
thehelp viewer files referenced in the article are located in /seamonkey/extensions/help/ this article also assumes you are familiar with the javascript and c++ programming languages, object-oriented programming (oop) terminology and
design concepts, the microsoft® component object model (com), and the corba omg interface definition language (idl).
Creating reftest-based unit tests
the 'mozreftestinvalidate' event is
designed to fire as soon after the initial rendering of the document is finished as possible, but never before.
Reviewer Checklist
if it's js, try to
design and build so that xpcshell can exercise most functionality.
Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive
design mode mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu.
Index
this new policy is
designed as an alternative to the current policies, which have been available in firefox for many years.
Message manager overview
message managers are
designed to enable chrome-privileged javascript code in one process to communicate with chrome-privileged javascript code in a different process.
Message manager overview
message managers are
designed to enable code in one process to communicate with code in a different process.
Site Identity Button
insecure renegotation - older versions of tls had a flaw in the basic
design; if your server uses an affected version, the security ui will be downgraded but no web console message will be displayed.
Firefox UI considerations for web developers
examples consider again the example top sites box shown at the top of the page, repeated below: let's look at some examples among the icons shown here (note that this discussion is based on the site
designs as of early january, 2019).
Embedding the editor
embedding objectives editor requires
design changes such that the embedding applications above can be fulfilled, and these changes will need to address the current problems.
HTML parser threading
due to legacy interface
design oddities, an nshtml5parser is initialized by calling nshtml5parser::parse(nsiuri*, nsirequestobserver*, void*, nsdtdmode).
Gecko's "Almost Standards" Mode
recommendations for authors who are attempting to migrate to validated markup using either html 4.01 or xhtml 1.0, and who are still using image-in-table
design concepts, make sure to use a doctype that will trigger "almost standards" mode.
Add-on Manager
the apis are
designed to be generic and support many different types of add-ons.
Assert.jsm
json.stringify is not
designed to be used for this purpose; objects may have ambiguous tojson() implementations that would influence the test.
DeferredTask.jsm
by
design, this method doesn't provide a way for the caller to detect when the next execution terminates, or collect a result.
Download
this behavior is
designed for the case where the call to cancel happens asynchronously, and is consistent with the case where the cancellation request could not be processed in time.
Promise
promise catch( function onreject ); the following calls are therefore identical: p.then(undefined, logerror); p.catch(logerror); debugging by
design, the instant state and value of a promise cannot be inspected synchronously from code, without calling the then() method.
PromiseWorker.jsm
self.addeventlistener('message', msg => worker.handlemessage(msg)); abstractworker is a base class for the worker, and it's
designed to be used by derived class, which provides above four methods (dispatch, postmessage, close, and log).
Localization content best practices
design for +50% bear in mind that english strings will likely be a lot shorter than their international equivalents, so you need to leave some space in your ui to allow for this.
Localizing with Mozilla Translator
when mozilla l10n switched to ''source l10n'', one of the many problems that mt had to solve was how to fit a directory structure in what had been
designed for five jars, and the ''patch'' consisted of providing a ''read from dir instead of jar'' and ''put everything inside platform neutral''.
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
links installing fonts for mozilla's mathml engine mathml version 3.0 - w3c recommendation, 21 october 2010 w3c mathml test suite -
designed to check the implementation of each element one attribute (or built-in rendering behavior) at a time in a fairly thorough manner.
Mozilla DOM Hacking Guide
the part about componentregistrar is
designed to allow external modules (in this case xpath) to be included in domclassinfo and as such benefit from the javascript benefits it provides.
Mozilla Style System Documentation
matters dealing with dynamic style changes are also tricky because the style contexts don't have pointers to their frames, but instead, we have the reverse and is probably the biggest flaw in the
design of this part of the system.
GPU performance
looks like it's
designed for x11-based linux-arm devices, omap3 is mentioned a lot in the docs ...
Gecko Profiler FAQ
the gecko profiler has been
designed specifically for the use case of having it run always in the background, and it’s pretty good at that!
Leak-hunting strategies and tips
these scripts are
designed to be run on balance trees in addition to raw stacks; since they are rather slow, it is often much faster to generate balance trees (e.g., using make-tree.pl for the refcount balancer or diffbloatdump.pl --use-address for trace-malloc) andthen run the balance trees (which are much smaller) through the post-processing.
Scroll-linked effects
one way to implement this without the scroll event listener is to use the css property
designed for this purpose: <body style="height: 5000px"> <div id="toolbar" style="position: sticky; top: 0px; margin-top: 100px; width: 100px; height: 20px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls.
Firefox Sync
it is not
designed for use by end-users, but instead for people who wish to understand the details of how sync is implemented or wish to interact with it.
L20n
github where the main code for the l20n infrastructure and
design spec lives.
NSPR's Position On Abrupt Thread Termination
to make this solution work requires that a function that encounters an error be
designed such that it first repairs its immediate state, and then reports that error to its caller.
PR_CallOnce
func a pointer to the function the calling client has
designed to perform the subsystem initialization.
PR_ReadDir
syntax #include <prio.h> prdirentry* pr_readdir( prdir *dir, prdirflags flags); parameters the function has the following parameters: dir a pointer to a prdir object that
designates an open directory.
PR_SetConcurrency
virtual processors are actuallyglobal threads, each of which is
designed to support an arbitrary number oflocal threads.
Introduction to Network Security Services
network security services (nss) is a set of libraries
designed to support cross-platform development of communications applications that support ssl, s/mime, and other internet security standards.
NSS_3.12_release_notes.html
bug 217538: softoken databases cannot be shared between multiple processes bug 294531:
design new interfaces for certificate path building and verification for libpkix bug 326482: nss ecc performance problems (intel) bug 391296: need an update helper for shared databases bug 395090: remove duplication of pkcs7 code from pkix_pl_httpcertstore.c bug 401026: need to provide a way to modify and create new pkcs #11 objects.
NSS API Guidelines
methods/functions
design init, shutdown functions if a layer has some global initialization tasks, which need to be completed before the layer can be used, that layer should supply an initialization function of the form layer_init().
nss tech note8
as originally
designed, before calling the cache function, the caller was responsible to fill in the session creation time (which might not be the same as the time of insertion into the cache) and the session expiration time, among other things.
Notes on TLS - SSL 3.0 Intolerant Servers
it is
designed to permit a server to detect a man-in-the-middle that is altering the ssl client hello (connection) requests as they pass from the client to the server, altering them by changing the protocol version number to a lower version number.
Overview of NSS
nss makes use of netscape portable runtime (nspr), a platform-neutral open-source api for system functions
designed to facilitate cross-platform development.
PKCS11 FAQ
the motivation for this is that some hardware tokens will prevent extraction of symmetric keys by
design.
NSS tools : signtool
netscape internal fips pkcs #11 module (this module is internally loaded) slots: 1 slots attached status: loaded slot: netscape internal fips-140-1 cryptographic services token: communicator certificate db ----------------------------------------------- see also signver (1) the nss wiki has information on the new database
design and how to configure applications to use it.
Network Security Services
network security services (nss) is a set of libraries
designed to support cross-platform development of security-enabled client and server applications.
FOSS
designed to supplement existing embeddings, gpsee ships with a sample trivial embedding, a scripting host, and an augmented version of mozilla's js shell.
Future directions
this article documents future directions in functionality,
design, and coding practices for spidermonkey.
Hacking Tips
it's
designed to highlight incorrect oom handling and this may show up as a crash or assertion failure at some later point.
Garbage collection
design overview spidermonkey has a mark-sweep garbage collection (gc) with incremental marking mode, generational collection, and compaction.
SpiderMonkey Internals
design walk-through at heart, spidermonkey is a fast interpreter that runs an untyped bytecode and operates on values of type js::value—type-tagged values that represent the full range of javascript values.
JS::Value
the garbage collector is
designed to automatically free unreachable memory.
JS_AlreadyHasOwnProperty
by
design, this search may not find a property that other property lookup functions, such as js_lookupproperty, would find.
JS_PropertyStub
bool *succeeded); // obsolete since jsapi 37 bool js_enumeratestub(jscontext *cx, js::handleobject obj); // obsolete since jsapi 37 bool js_convertstub(jscontext *cx, js::handleobject obj, jstype type, js::mutablehandlevalue vp); // obsolete since jsapi 37 void js_finalizestub(jscontext *cx, jsobject *obj); // obsolete since jsapi 14 description the stub functions are not
designed to be called directly by a jsapi application.
JS_ReportOutOfMemory
call js_reportallocationoverflow if an operation fails because it tries to use more memory (or more of some other resource) than the application is
designed to handle.
JS_SetInterruptCallback
some common uses for an interrupt callback are: to run garbage collection periodically, by calling js_maybegc; to periodically take a break from script execution to update the ui (though note that mozilla does not do this, by
design); to enforce application limits on the amount of time a script may run.
JS_SetOperationCallback
some common uses for an operation callback are: to run garbage collection periodically, by calling js_maybegc; to periodically take a break from script execution to update the ui (though note that mozilla does not do this, by
design); to enforce application limits on the amount of time a script may run.
SpiderMonkey 1.8
js_reportallocationoverflow can be used (instead of js_reportoutofmemory) to indicate that the script is trying to do something that would require more memory than the implementation is
designed to handle.
Zest
the language is written in json, but we do not expect people to write zest in this format - it is
designed to be a visual language.
Redis Tips
keyspace
design here are some things i keep in mind when creating keys: keys are like urls and should read like nice urls keys are like urls with paths separated by a colon, ':' (this is convention only) use a common prefix for all keys in your app (like a domain) be careful about possible name collisions key names should make it obvious what the values are for redis data structures are like program var...
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.
Handling Mozilla Security Bugs
if the group decides to publish a warning, the module owner, a peer, or some other person they may
designate will post this message to the known vulnerabilities page (which will be the authoritative source for this information) and will also send a copy of this message to an appropriate moderated mailing list and/or newsgroup (e.g., netscape.public.mozilla.announce and/or some other newsgroup/list established specifically for this purpose).
Browser security
these articles provide important guides and references to ensuring the code you write is secure, including both
design recommendations and testing guidelines.
Animated PNG graphics
error handling apng is
designed to allow incremental display of frames before the entire image has been read.
Gecko states
state_readonly the object is
designated read-only.
AT APIs Support
developing a xul window is not that different from developing a web page, but the elements available to add widgets are more powerful and
designed to be similar to desktop widgets.
DocShell
nswebbrowser project page (outlines the
design of nswebbrowser and docshell).
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.
Places utilities for JavaScript
getformattedstring() string getformattedstring(string key, array string params) parameters key the string name to get from the string bundle params strings to substitute into the bundle at
designated points see xul:stringbundle for more information.
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.
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.
XPCOM array guide
when
designing public interfaces, enumerators are the preferred mechanism for accessing these structures because they hide the details of the implementation behind the interface.
Preface
conventions the formatting conventions listed below are used to
designate specific types of information in the book and make things easier to scan.
Components.interfaces
it reflects only those interfaces which have been
designated in their .idl description as scriptable, that is the interfaces which xpconnect is capable of reflecting into javascript.
Components.interfacesByID
it reflects only those interfaces which have been
designated in their .idl description as [scriptable], i.e.
XPCShell Reference
these arguments are only passed to “scriptfile” and not the scripts
designated by –f options.
nsIAppShell
this interface is
designed to be used on the main application thread only.
nsIClassInfo
eager_classinfo 1 << 5 this flag is
designed for use with nsgenericfactory and can be set in nsmodulecomponentinfo::mflags.
nsIDOMNSHTMLDocument
designmode domstring set to "on" or "off" to enable or disable editing for the entire document at once.
nsIDocShell
the rule of thumb here is that we disable js if this docshell or any of its parents disallow scripting, unless the only reason for js being disabled in this docshell is a parent docshell having a document that is in
design mode.
nsIEditor
in the case of a
design mode document, this is the same as the window's selection.
nsIFeedResult
it's generally intended for use by clients
designed to work with specific feeds.
nsIMsgThread
void removechildat(in long index); void removechildhdr(in nsimsgdbhdr child, in nsidbchangeannouncer announcer); void markchildread(in boolean bread); nsimsgdbhdr getfirstunreadchild(); nsisimpleenumerator enumeratemessages(in nsmsgkey parent); attributes attribute type description threadkey nsmsgkey unsigned long key
designating this thread.
nsINavHistoryQuery
this was
designed so that most queries can be done in only one sql query.
nsINavHistoryQueryOptions
this is
designed for cases where you want to give the user the option of filing something into a list of folders.
nsINavHistoryResult
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) places results use a model-view-controller (mvc)
design pattern.
nsIParserUtils
the sanitizer is
designed to protect against xss when sanitized content is inserted into a different-origin context without an iframe-equivalent sandboxing mechanism.
nsITextInputProcessor
for solving that issue, methods of this interface have been
designed for performing a key operation or representing a change of composition state.
nsIWeakReference
method overview void queryreferent( in nsiidref uuid, [iid_is(uuid), retval] out nsqiresult result ); methods queryreferent() this method queries an interface on the referent if it exists, and like nsisupports.queryinterface(), produces an owning reference to the desired interface.")}} it is
designed to look and act exactly like (a proxied) nsisupports.queryinterface().
nsIWindowsRegKey
xpcom/ds/nsiwindowsregkey.idlscriptable this interface is
designed to provide scriptable access to the windows registry system.
XPCOM primitive
(however, if you are
designing that kind of api today, you should probably use nsivariant instead.) idl data type interface component idl nsidptr nsisupportsid @mozilla.org/supports-id;1 [scriptable, uuid(d18290a0-4a1c-11d3-9890-006008962422)] interface nsisupportsid : nsisupportsprimitive { attribute nsidptr data; string tostring(); }; astring nsisupportsstring @mozilla.org/supports-string;1 [scriptable, uui...
NS_CStringCopy
remarks this function is
designed to allow the implementation to efficiently assign the same value to two string objects.
NS_StringCopy
remarks this function is
designed to allow the implementation to efficiently assign the same value to two string objects.
Warnings
this page is
designed to help explain the cause and possible solutions for these warnings.
Reference Manual
the basics
design an nscomptr is
designed to be a complete replacement for raw xpcom interface pointers where they are used as owning references.
Autoconfiguration in Thunderbird
the configuration file description and definition the original project page on the mozilla wiki for background,
design, implementation and project details this document describes how autoconfiguration in thunderbird works, and what to do to allow mail servers to be autoconfigured.
MailNews fakeserver
fakeserver is a testing server that implements a generic text-based protocol common to all major mailnews protocols (pop, imap, smtp, and nntp)
designed for use in automated tests.
Thunderbird API documentation
activity manager address book sync client
design buddy icons in mail composition composition back end in mail cached compose window faq filelink providers new!
Theme Packaging
pre-requisites making a theme for thunderbird requires knowledge of cascading stylesheets (css), probably xbl, and some graphic
design and aesthetic skill (...or maybe not).
ctypes
types that act like specific c types these types are
designed to work exactly like the corresponding type on the native platform.
Drawing and Event Handling - Plugins
windowless plug-ins provide the plug-in writer with some significant
design possibilities: you can place a windowless plug-in within a section; other sections can exist both above and below it.
Scripting plugins - Plugins
the new nppvariable enumeration is defined in npapi.h as: nppvpluginscriptablenpobject = 15 threading model this api is not
designed to be thread safe.
Accessibility Inspector - Firefox Developer Tools
color contrast contrast ratio information is particularly useful when you are
designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as low vision or color blindness will be unable to read the text.
How to - Firefox Developer Tools
access debugging in add-onsbreaking on exceptionsdebug eval sourcesdisable breakpointsexamine, modify, and watch variableshighlight and inspect dom no
designore a sourceopen the debuggerpretty-print a minified filesearchset a breakpointset a conditional breakpointset watch expressionsstep through codeuse a source mapuse watchpoints ...
All keyboard shortcuts - Firefox Developer Tools
oggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive
design mode ctrl + shift + m cmd + opt + m ctrl + shift + m open browser console ctrl + shift + j cmd + shift + j ctrl + shift + j open browser toolbox ctrl + alt + shift + i cmd + opt + shift + i ctrl + alt + shift + i open scratchpad shift + f4 shift + f4 * shift + f4 open webide shift + f8 shift + f8 * shift + f8 ...
Style Editor - Firefox Developer Tools
the media sidebar works especially well with responsive
design view for creating and debugging responsive layouts: from firefox 46 onwards, if an @media rule contains a screen size in a condition, then it is made clickable: clicking it then resizes the screen to that size using the responsive
design view: creating and importing style sheets you can create a new style sheet by clicking the new button in the toolbar.
Toolbox - Firefox Developer Tools
by default this array includes: toggle split console responsive
design mode select a frame as the currently targeted document (this is only included by default from firefox 41 onwards).
Animation - Web APIs
designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive
design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment web animationsthe definition o...
AudioBuffer - Web APIs
objects of these types are
designed to hold small audio snippets, typically less than 45 s.
AudioNode - Web APIs
after a
design review in october 2013, it was decided to add constructors because they have numerous benefits over factory methods.
Canvas API - Web APIs
p5.js has a full set of canvas drawing functionality for artists,
designers, educators, and beginners.
DOMMatrix - Web APIs
the dommatrix interface is
designed with the intent that it will be used for all matrices within markup, supplanting the svgmatrix and cssmatrix interfaces.
Document.execCommand() - Web APIs
when an html document has been switched to
designmode, its document object exposes an execcommand method to run commands that manipulate the current editable region, such as form inputs or contenteditable elements.
Element.tabStop - Web APIs
after feedback, this property was removed from the
design doc and replaced by shadowroot.delegatesfocus.
Element - Web APIs
element.setpointercapture()
designates a specific element as the capture target of future pointer events.
Using files from web applications - Web APIs
exactly what part of your content will accept drops may vary depending on the
design of your application, but making an element receive drop events is easy: let dropbox; dropbox = document.getelementbyid("dropbox"); dropbox.addeventlistener("dragenter", dragenter, false); dropbox.addeventlistener("dragover", dragover, false); dropbox.addeventlistener("drop", drop, false); in this example, we're turning the element with the id dropbox into our drop zone.
GamepadHapticActuator - Web APIs
the gamepadhapticactuator interface of the gamepad api represents hardware in the controller
designed to provide haptic feedback to the user (if available), most commonly vibration hardware.
Gamepad API - Web APIs
experimental gamepad extensions gamepadhapticactuator represents hardware in the controller
designed to provide haptic feedback to the user (if available), most commonly vibration hardware.
HTMLImageElement.srcset - Web APIs
the srcset property, along with the sizes property, are a crucial component in
designing responsive web sites, as they can be used together to make pages that use appropriate images for the rendering situation.
MediaDevices.getUserMedia() - Web APIs
the originally-
designed security mechanism is in the process of being replaced with feature policy, so various browsers have different levels of security support, using different mechanisms.
MediaQueryList - Web APIs
this is very useful for adaptive
design, since this makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status.
MutationEvent - Web APIs
preface the mutation events have been marked as deprecated in the dom events specification, as the api's
design is flawed (see details in the "dom mutation events replacement: the story so far / existing points of consensus" post to public-webapps).
MutationObserver - Web APIs
it is
designed as a replacement for the older mutation events feature, which was part of the dom3 events specification.
NavigatorStorage - Web APIs
the storage standard is
designed to serve as a common basis for the implementation of all of those apis and storage technologies, so that their constraints and configurations can be understood and controlled using a common set of methods and properties.
PaymentAddress.dependentLocality - Web APIs
the read-only dependentlocality property of the paymentaddress interface is a string containing a sublocality
designation within a city, such as a neighborhood, borough, district, or, in the united kingdom, a dependent locality.
PaymentItem - Web APIs
this may be displayed to the user by the user agent, depending on the
design of the interface.
Using the Permissions API - Web APIs
function revokepermission() { navigator.permissions.revoke({name:'geolocation'}).then(function(result) { report(result.state); }); } the revoke() function has been disabled by default starting in firefox 51, since its
design has been brought into question in the web applications security working group.
RTCPeerConnection.createAnswer() - Web APIs
the contents of the object being passed to the sendtoserver() function, along with everything else in the promise fulfillment handler, depend entirely on your
design pc.createanswer().then(function(answer) { return pc.setlocaldescription(answer); }) .then(function() { // send the answer to the remote peer through the signaling server.
Resize Observer API - Web APIs
concepts and usage there are a whole raft of use cases for responsive
design techniques (and others besides) that respond to changes in an element's size, but previously their implementations have often been hacky and/or brittle.
SVGAngle - Web APIs
an svgangle object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGLength - Web APIs
an svglength object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGLengthList - Web APIs
an svglengthlist object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGMatrix - Web APIs
many of svg's graphics operations utilize 2x3 matrices of the form: [a c e] [b d f] which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become: [a c e] [b d f] [0 0 1] an svgmatrix object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGNumber - Web APIs
an svgnumber object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGNumberList - Web APIs
an svgnumberlist object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGPointList - Web APIs
an svgpointlist object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGPreserveAspectRatio - Web APIs
an svgpreserveaspectratio object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGRect - Web APIs
an svgrect object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGStringList - Web APIs
an svgstringlist object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGTransform - Web APIs
an svgtransform object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
SVGTransformList - Web APIs
an svgtransformlist object can be
designated as read only, which means that attempts to modify the object will result in an exception being thrown.
Selection - Web APIs
editing host an editable element (e.g., an html element with contenteditable set, or the html child of a document that has
designmode enabled).
Sensor APIs - Web APIs
the sensor apis are a set of interfaces built to a common
design that expose device sensors in a consistent way to the web platform.
Service Worker API - Web APIs
it is
designed to be fully async; as a consequence, apis such as synchronous xhr and localstorage can't be used inside a service worker.
Using the Storage Access API - Web APIs
usage notes the storage access api is
designed to allow embedded content to request access to storage that would otherwise be blocked when a user’s browser is set to block all third-party cookies.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
however, if you are
designing the format yourself, or your geometry is in text files (like wavefront .obj files) and must be converted into an arraybuffer at runtime, you have free choice on how to structure the memory.
Lifetime of a WebRTC session - Web APIs
it’s so big that years ago, smart people saw how big it was, how fast it was growing, and the limitations of the 32-bit ip addressing system, and realized that something had to be done before we ran out of addresses to use, so they started working on
designing a new 64-bit addressing system.
WebRTC API - Web APIs
establishing a connection: the perfect negotiation pattern perfect negotiation is a
design pattern which is recommended for your signaling process to follow, which provides transparency in negotiation while allowing both sides to be either the offerer or the answerer, without significant coding needed to differentiate the two.
WebXR application life cycle - Web APIs
life cycle outline most applications using webxr will follow a similar overall
design pattern: check to see if the user's device and browser are both capable of presenting the xr experience you want to provide.
Targeting and hit detection - Web APIs
it's possible—or even likely—that whatever 3d graphics engine you're using offers hit testing, especially if it's
designed specifically for game development.
XMLHttpRequest.responseType - Web APIs
this restriction is
designed in part to help ensure that synchronous operations aren't used for large transactions that block the browser's main thread, thereby bogging down the user experience.
XREnvironmentBlendMode - Web APIs
additive primarily used by ar devices with transparent lenses which directly allow reality to pass through to the user's eyes, the additive blending mode is
designed to be used in a situation in which the device has no control over the background and its brightness, since that isn't being digitally controlled.
XRSession.environmentBlendMode - Web APIs
additive primarily used by ar devices with transparent lenses which directly allow reality to pass through to the user's eyes, the additive blending mode is
designed to be used in a situation in which the device has no control over the background and its brightness, since that isn't being digitally controlled.
XRSession.requestAnimationFrame() - Web APIs
this example demonstrates a
design pattern that ensures seamless transition between non-immersive animations created via window.requestanimationframe and immersive xr animations.
XRView - Web APIs
currently, the specification (and therefore all current implementations of webxr) is
designed around rendering every xrview into a single xrwebgllayer, which is then presented on the xr device with half used for the left eye and half for the right eye.
XRWebGLLayer - Web APIs
methods getviewport() returns a new xrviewport instance representing the position, width, and height to which the webgl context's viewport must be set to contain drawing to the area of the framebuffer
designated for the specified view's contents.
Using the aria-describedby attribute - Accessibility
<div id="descriptionclose">closing this window will discard any information entered and return you back to the main page</div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not
designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document.
ARIA: application role - Accessibility
the application role is
designed to provide a means for widgets that are not part of the standard set to be accessible for direct interaction in ats that use both browse and focus modes for interacting with web content.
ARIA: article role - Accessibility
examples the restaurant recommendations feed display along with its separate documentation from the wai-aria 1.1 authoring practices feed
design pattern specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'article' in that specification.
ARIA: grid role - Accessibility
even though both data grids and layout grids employ the same aria roles, states, and properties, differences in their content and purpose surface factors that are important to consider in keyboard interaction
design.
WAI-ARIA Roles - Accessibility
elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to
designate a supporting section that relates to the main content, yet can stand alone when separated.
Perceivable - Accessibility
this means that
designs should be responsive, so that when the text size is increased, the content is still accessible.
Accessibility
"the web is fundamentally
designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.
:focus-visible - CSS: Cascading Style Sheets
tips for
designing useful and usable focus indicators cognition it may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input.
:focus - CSS: Cascading Style Sheets
tips for
designing useful and usable focus indicators :focus { outline: none; } never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass wcag 2.1 sc 1.4.11 non-text contrast.
font-stretch - CSS: Cascading Style Sheets
however some fonts, called variable fonts, can support a range of stretching with more or less fine granularity, and this can give the
designer a much closer degree of control over the chosen weight.
font-weight - CSS: Cascading Style Sheets
however some fonts, called variable fonts, can support a range of weights with more or less fine granularity, and this can give the
designer a much closer degree of control over the chosen weight.
@font-face - CSS: Cascading Style Sheets
by allowing authors to provide their own fonts, @font-face makes it possible to
design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available).
@media - CSS: Cascading Style Sheets
security because media queries provide insights into the capabilities—and by extension, the features and
design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.
At-rules - CSS: Cascading Style Sheets
/* general structure */ @identifier (rule); /* example: tells browser to use utf-8 character set */ @charset "utf-8"; there are several at-rules,
designated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet.
Basic concepts of flexbox - CSS: Cascading Style Sheets
the flexible box module, usually referred to as flexbox, was
designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.
Layout using named grid lines - CSS: Cascading Style Sheets
naming lines is useful when creating a responsive
design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions.
CSS Shapes - CSS: Cascading Style Sheets
roperties 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.
Tools - CSS: Cascading Style Sheets
other tools css animation - stylie to check the device display information (helpful in responsive web
design) - mydevice.io css menus - cssmenumaker.com a mighty, modern css linter that helps you enforce consistent conventions and avoid errors in your stylesheets - stylelint ...
Viewport concepts - CSS: Cascading Style Sheets
for example, if a mobile screen has a width of 320px, a website might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 320px space, which, depending on the
design, is illegible for many if not everyone.
animation - CSS: Cascading Style Sheets
designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive
design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:animation-name: noneanimat...
background-repeat - CSS: Cascading Style Sheets
d-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/re
design/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.
box-align - CSS: Cascading Style Sheets
notes the edge of the box
designated the start for alignment purposes depends on the box's orientation: horizontal top vertical left the edge opposite to the start is
designated the end.
box-direction - CSS: Cascading Style Sheets
notes the edge of the box
designated the start for layout purposes depends on the box's orientation: horizontal left vertical top the edge opposite to the start is
designated the end.
box-pack - CSS: Cascading Style Sheets
notes the edge of the box
designated the start for packing purposes depends on the box's orientation and direction: normal reverse horizontal left right vertical top bottom the edge opposite to the start is
designated the end.
font-feature-settings - CSS: Cascading Style Sheets
these lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature
designed to handle special cases where no other way exists to enable or access an opentype font feature.
font-language-override - CSS: Cascading Style Sheets
/* keyword value */ font-language-override: normal; /* <string> values */ font-language-override: "eng"; /* use english glyphs */ font-language-override: "trk"; /* use turkish glyphs */ /* global values */ font-language-override: initial; font-language-override: inherit; font-language-override: unset; by default, html's lang attribute tells browsers to display glyphs
designed specifically for that language.
font-weight - CSS: Cascading Style Sheets
however some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the
designer a much closer degree of control over the chosen weight.
max-block-size - CSS: Cascading Style Sheets
th or max-height as follows: values of writing-mode max-block-size is equivalent to horizontal-tb, lr , lr-tb , rl , rb , rb-rl max-height vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width the writing-mode values sideways-lr and sideways-rl were removed from the css writing modes level 3 specification late in its
design process.
outline - CSS: Cascading Style Sheets
how to
design useful and usable focus indicators wcag 2.1: understanding success criterion 2.4.7: focus visible formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:outline-col...
scroll-margin-inline-end - CSS: Cascading Style Sheets
width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the
designated snap points.
scroll-margin-inline-start - CSS: Cascading Style Sheets
: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the
designated snap points.
scroll-margin-inline - CSS: Cascading Style Sheets
width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the
designated snap points.
scroll-margin - CSS: Cascading Style Sheets
: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the
designated snap points.
Mutation events - Developer guides
preface the mutation events have been marked as deprecated in the dom events specification, as the api's
design is flawed (see details in the "dom mutation events replacement: the story so far / existing points of consensus" post to public-webapps).
Using HTML sections and outlines - Developer guides
semantic sectioning elements are specifically
designed to communicate structural meaning to browsers and other technologies interpreting the document on behalf of users, such as screen readers and voice assistants.
Mobile-friendliness - Developer guides
separate sites responsive
design a hybrid approach original document information originally published on 4 may, 2011 on the mozilla webdev blog as "approaches to mobile web development part 1 - what is mobile friendliness?", by jason grlicky.
Separate sites for mobile and desktop - Developer guides
responsive
design a hybrid approach original document information this article was originally published on 13 may 2011, on the mozilla webdev blog as "approaches to mobile web development part 2 – separate sites", by jason grlicky.
HTML attribute: rel - HTML: Hypertext Markup Language
search relevant to <form>, <link>, <a>, and <area> elements, the search keywords indicates that the hyperlink references a document whose interface is specially
designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search.
<hgroup> - HTML: Hypertext Markup Language
to produce any (non-abstract) rendered view of such an outline, some choice must be made in the
design of the rendering tool about how to render <hgroup> headings in such a way as to convey their multi-level nature.
<img>: The Image Embed element - HTML: Hypertext Markup Language
an alt decision tree • images • wai web accessibility tutorials alt-texts: the ultimate guide — axess lab how to
design great alt text: an introduction | deque mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 the title attribute the title attribute is not an acceptable substitute for the alt attribute.
<input type="button"> - HTML: Hypertext Markup Language
in a real site, you'd have to provide this information in a way that doesn't intefere with the site
design (for example by providing an easily accessible link that points to information on what the site accesskeys are).
<input type="reset"> - HTML: Hypertext Markup Language
when building a site, be sure to provide this information in a way that doesn't interfere with the site
design (for example by providing an easily accessible link that points to information on what the site access keys are).
<input type="submit"> - HTML: Hypertext Markup Language
when building a site, be sure to provide this information in a way that doesn't interfere with the site
design (for example by providing an easily accessible link that points to information on what the site access keys are).
<spacer> - HTML: Hypertext Markup Language
it was devised by netscape to accomplish the same effect as a single-pixel layout image, which was something web
designers used to use to add white spaces to web pages without actually using an image.
Compression in HTTP - HTTP
engineers
designed the optimized compression algorithm used by file formats
designed for this specific purpose.
Content negotiation - HTTP
site
designers must not be over-zealous by using language detection via this header as it can lead to a poor user experience: they should always provide a way to overcome the server-chosen language, e.g., by providing a language menu on the site.
Using HTTP cookies - HTTP
cookie prefixes the
design of the cookie mechanism is such that a server is unable to confirm that a cookie was set on a secure origin or even to tell where a cookie was originally set.
Cross-Origin Resource Policy (CORP) - HTTP
these vulnerabilities allowed sensitive data disclosure due to a race condition which arose as part of speculative execution functionality,
designed to improve performance.
Using Feature Policy - HTTP
there are several policy-controlled features
designed to represent functionality that can negatively impact the user experience.
Expect-CT - HTTP
builds of chrome are
designed to stop enforcing the expect-ct policy 10 weeks after the installation's build date.
Forwarded - HTTP
this header is used for debugging, statistics, and generating location-dependent content and by
design it exposes privacy sensitive information, such as the ip address of the client.
X-Forwarded-For - HTTP
this header is used for debugging, statistics, and generating location-dependent content and by
design it exposes privacy sensitive information, such as the ip address of the client.
X-Forwarded-Host - HTTP
this header is used for debugging, statistics, and generating location-dependent content and by
design it exposes privacy sensitive information, such as the ip address of the client.
Link prefetching FAQ - HTTP
some more examples follow: <link rel="prefetch alternate stylesheet" title="
designed for mozilla" href="mozspecific.css"> <link rel="next" href="2.html"> are anchor (<a>) tags prefetched?
HTTP Messages - HTTP
the http/2 binary framing mechanism has been
designed to not require any alteration of the apis or config files applied: it is broadly transparent to the user.
POST - HTTP
as described in the http 1.1 specification, post is
designed to allow a uniform method to cover the following functions: annotation of existing resources posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles; adding a new user through a signup modal; providing a block of data, such as the result of submitting a form, to a data-handling process; extending a database through an append operation.
HTTP resources and specifications - HTTP
designed with extensibility in mind, it has seen numerous additions over the years; this lead to its specification being scattered through numerous specification documents (in the midst of experimental abandoned extensions).
CSS Houdini
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.
About JavaScript - JavaScript
javascript runs on the client side of the web, which can be used to
design / program how the web pages behave on the occurrence of an event.
Grammar and types - JavaScript
together, these also bring object literals and class declarations closer together, and allow object-based
design to benefit from some of the same conveniences.
JavaScript modules - JavaScript
there is also a type of export called the default export — this is
designed to make it easy to have a default function provided by a module, and also helps javascript modules to interoperate with existing commonjs and amd module systems (as explained nicely in es6 in depth: modules by jason orendorff; search for "default exports").
Regular expressions - JavaScript
such a match would succeed in the strings "hi, do you know your abc's?" and "the latest airplane
designs evolved from slabcraft." in both cases the match is with the substring "abc".
Number - JavaScript
(javascript now has a bigint type, but it was not
designed to replace number for everyday uses.
Symbol.asyncIterator - JavaScript
onst myasynciterable = { async* [symbol.asynciterator]() { yield "hello"; yield "async"; yield "iteration!"; } }; (async () => { for await (const x of myasynciterable) { console.log(x); // expected output: // "hello" // "async" // "iteration!" } })(); when creating an api, remember that async iterables are
designed to represent something iterable — like a stream of data or a list —, not to completely replace callbacks and events in most situations.
Destructuring assignment - JavaScript
the current
design is useful if you want to be able to call the function without supplying any parameters, the other can be useful when you want to ensure an object is passed to the function.
Strict mode - JavaScript
javascript was
designed to be easy for novice developers, and sometimes it gives operations which should be errors non-error semantics.
icons - Web app manifests
maskable: the image is
designed with icon masks and safe zone in mind, such that any part of the image outside the safe zone can safely be ignored and masked away by the user agent.
Authoring MathML - MathML
note that by
design, mathml is well-integrated in html5 and in particular you can use usual web features like css, dom, javascript or svg.
<semantics> - MathML
in mathml there are two ways to mark up mathematics: presentation mathml is used to control the layout of equations, whereas content mathml is
designed to encode the semantic mathematical meaning and to make expressions understandable to computer algebra systems.
MathML documentation index - MathML
40 <semantics> mathml, mathml reference, mathml:element in mathml there are two ways to mark up mathematics: presentation mathml is used to control the layout of equations, whereas content mathml is
designed to encode the semantic mathematical meaning and to make expressions understandable to computer algebra systems.
Web media technologies
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.
Populating the page: how browsers work - Web Performance
this mechanism is
designed so that two entities attempting to communicate—in this case the browser and web server—can negotiate the parameters of the network tcp socket connection before transmitting data, often over https.
id - SVG: Scalable Vector Graphics
a stand-alone svg document uses xml 1.0 syntax, which specifies that valid ids only include
designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.
<animate> - SVG: Scalable Vector Graphics
designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive
design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment svg animations level 2the ...
SVG: Scalable Vector Graphics
as such, it's a text-based, open web standard for describing images that can be rendered cleanly at any size and are
designed specifically to work well with other web standards including css, dom, javascript, and smil.
Insecure passwords - Web security
the https protocol is
designed to protect user data from eavesdropping (confidentiality) and from modification (integrity) on the network.
Web security
certificate transparency certificate transparency is an open framework
designed to protect against and monitor for certificate misissuances.
Using templates and slots - Web Components
the following set of code snippets show how to use <slot> together with <template> and some javascript to: create a <element-details> element with named slots in its shadow root
design the <element-details> element in such a way that, when used in documents, it is rendered from composing the element’s content together with content from its shadow root—that is, pieces of the element’s content are used to fill in named slots in its shadow root note that it is technically possible to use <slot> element without a <template> element, e.g., within say a regular <div> element,...