Mozilla
the articles below include content about downloading and building mozilla code.
... in addition, you'll find helpful articles about how the code works, how to build add-ons for mozilla applications and the like.
... a bird's-eye view of the mozilla framework the purpose of this article is to provide a high-level technical overview of the architecture of the extensible, object-based mozilla application framework.
...And 18 more matches

Common questions - Learn web development
the html or css learning articles.) these articles are designed to work on their own.
...this article discusses how it works, in broad terms.
... in this article we describe various web-related concepts: webpages, websites, web servers, and search engines.
...And 17 more matches

Timing element visibility with the Intersection Observer API - Web APIs
in this article, we'll build a mock blog which has a number of ads interspersed among the contents of the page, then use the intersection observer api to track how much time each ad is visible to the user.
... although many aspects of this example will not match real world usage (in particular, the articles all have the same text and aren't loaded from a database, and there are just a handful of simple text-only ads that are selected from an array), this should provide enough understanding of the api to quickly learn how to apply the intersection observer api to your own site.
...then the "wrapper" class is defined; it wraps the entire blog, including the header, sidebar, and body content (articles and ads).
...And 17 more matches

WAI-ARIA basics - Learn web development
previous overview: accessibility next following on from the previous article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.
... prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course.
...you can get an idea of support levels by looking at powermapper's wai-aria screen reader compatibility article.
...And 15 more matches

Index - Developer guides
found 43 pages: # page tags and summary 1 developer guides api, guide, landing, web these articles provide how-to information to help make use of specific web technologies and apis.
... 4 getting started ajax, api, advanced, javascript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
... 7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player.
...And 14 more matches

Web Performance
in this article we define and compare these two performance monitoring approaches.populating the page: how browsers worka developer should strive to achieve these two goals.
...in this article, we'll discuss creating a clear business case to convince decision-makers to make the investment.understanding latencylatency is the time it takes for a packet of data to travel from source to a destination.
...this article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.using dns-prefetchdns-prefetch is an attempt to resolve domain names before resources get requested.
...And 14 more matches

Using HTML sections and outlines - Developer guides
html article element (<article>) defines a piece of self-contained content.
...the header can also be used inside other semantic elements such as <article> or <section>.
...<article>, <section>, <aside>, and <nav> can have their own <header>.
...And 13 more matches

Index - Firefox Developer Tools
this article takes you through the main features of the accessibility inspector and how to use it.
... 12 debugging service workers application, devtools, firefox, guide, service workers in this article we will look at debugging service workers using the firefox devtools application panel.
... 13 inspecting web app manifests application, devtools, firefox, guide, manifest in this article we will look at inspecting app manifests using the firefox devtools application panel.
...And 12 more matches

Accessibility documentation index - Accessibility
this document provides a list of links to all accessibility articles on the mozilla developer network.
...this means that most of the instructions provided in the 'using the dialog role' technique are applicable to the alertdialog role as well: 17 using the aria-activedescendant attribute attribute, document object model, needscontent, property, widget, aria-activedescendant this article describes the aria-activedescendant property.
... 30 using the article role aria, accessible, needscontent the article role is used to identify a section of a page that forms an independent part of a document, page or site.
...And 12 more matches

Practical positioning examples - Learn web development
this article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
...check it out to get an idea of what you will be building in this section of the article.
...let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab 3</a></li> </ul> <div class="panels"> <article class="active-panel"> <h2>the first tab</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 11 more matches

Fundamental text and font styling - Learn web development
overview: styling text next in this article we'll start you on your journey towards mastering text styling with css.
... note: if the above paragraph leaves you feeling confused, then no matter — go back and review our box model article, to brush up on the box model theory, before carrying on.
... the css properties used to style text generally fall into two categories, which we'll look at separately in this article: font styles: properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
...And 10 more matches

Document and website structure - Learn web development
this article looks into how to plan a basic website structure, and write the html to represent this structure.
...usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.
... main content: <main>, with various content subsections represented by <article>, <section>, and <div> elements.
...And 10 more matches

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
note this article is the version from 2003 with slight modifications (no images and no links to samples).
...this article discusses the concept of inner-browsing and possible approaches for its implementation.
...this article includes a ticker example demonstrating that the inner-browsing model can be used to dynamically request new data from the server side and provide updates to the ticker.
...And 9 more matches

Archive of obsolete content
adding preferences to an extension this article takes the creating a dynamic status bar extension sample to the next level, adding a popup menu that lets you quickly switch between multiple stocks to watch.
... archived mozilla and build documentation these articles are archived, obsolete documents about mozilla, gecko, and the process of building mozilla projects.
... element events archived event pages firefox developer tools these are articles related to the firefox developer tools, which are no longer current.
...And 9 more matches

Grids - Learn web development
this article will give you all you need to know to get started with page layout.
...it has a grid defined already, and a simple article outlined.
...add the following rules to the bottom of your css: header { grid-column: 1 / 3; grid-row: 1; } article { grid-column: 2; grid-row: 2; } aside { grid-column: 1; grid-row: 2; } footer { grid-column: 1 / 3; grid-row: 3; } line-based placement body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 1fr 3fr; ...
...And 9 more matches

Examples - Archive of obsolete content
this page contains the source code of the examples related to the "properly using css and javascript in xhtml documents" article.
... please refer to the article to learn more about these examples.
... </p> </body> </html> back to the article problem 2 <!-- this file should have a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 - comments in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <style t...
...And 8 more matches

HTML: A good basis for accessibility - Learn web development
this article looks in detail at how html can be used to ensure maximum accessibility.
...you can verify these claims by comparing your previous experience with a more modern website structure example, which could look something like this: <header> <h1>header</h1> </header> <nav> <!-- main navigation in here --> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <!-- article content in here --> </article> <aside> <h2>related</h2> <!-- aside content in here --> </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more modern structure example with a screen reader, you'll...
... another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <div> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>), etc.
...And 8 more matches

HTML: A good basis for accessibility - Learn web development
this article looks in detail at how html can be used to ensure maximum accessibility.
...you can verify these claims by comparing your previous experience with a more modern website structure example, which could look something like this: <header> <h1>header</h1> </header> <nav> <!-- main navigation in here --> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <!-- article content in here --> </article> <aside> <h2>related</h2> <!-- aside content in here --> </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more modern structure example with a screen reader, you'll...
... another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <div> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>), etc.
...And 8 more matches

CSS layout - Learn web development
guides these articles will provide instruction on the fundamental layout tools and techniques available in css.
... introduction to css layout this article will recap some of the css layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
...this article explains the basics of normal flow as a grounding for learning how to change it.
...And 8 more matches

Getting started with HTML - Learn web development
overview: introduction to html next in this article we cover the absolute basics of html.
... to get you started, this article defines elements, attributes, and all the other important terms you may have heard.
...this article will stay with these two terms.
...And 8 more matches

Working with JSON - Learn web development
you'll come across it quite often, so in this article we give you all you need to work with json using javascript, including parsing json so you can access data within it, and creating json.
...nknown", "powers": [ "immortality", "heat immunity", "inferno", "teleportation", "interdimensional travel" ] } ] } if we loaded this object into a javascript program, parsed in a variable called superheroes for example, we could then access the data inside it using the same dot/bracket notation we looked at in the javascript object basics article.
...this has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.
...And 8 more matches

CSS Containment - CSS: Cascading Style Sheets
for example a listing of article headlines and content, as in the mark-up below.
... <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <p>more content here.</p> </article> each article has the contain property with a value of content applied in the css.
... article { contain: content; } each article is independent of the other articles on the page, and so they have been given contain: content in order to indicate to the browser that this is the case.
...And 8 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.
...you could then also provide a link to get back up to the top of the article.
...And 8 more matches

Advanced form styling - Learn web development
previous overview: forms next in this article, we will see what can be done with css to style the types of form control that are more difficult to style — the "bad" and "ugly" categories.
... as we saw in the previous article, text fields and buttons are perfectly easy to style; now we will dig into styling the bits that are more problematic.
... to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css.
...And 7 more matches

Basic native form controls - Learn web development
previous overview: forms next in the previous article, we marked up a functional web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices.
...in this particular article we will look at the original set of form controls, available in all browsers since the early days of the web.
...this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text.
...And 7 more matches

Styling web forms - Learn web development
previous overview: forms next in the previous few articles we looked at all the html you'll need to create and structure your web forms.
... in this article we will move on to looking at how to use css to style your form controls.
... multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling.
...And 7 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.
...it's beyond the scope of this article to cover the user experience of forms, but if you want to dig into that topic you should read the following articles: smashing magazine has some good articles about forms ux, including an older but still relevant extensive guide to web form usability article.
... in this article, we'll build a simple contact form.
...And 7 more matches

Web forms — Working with user data - Learn web development
this module provides a series of articles that will help you master the essentials of web forms.
...in the articles listed below, we'll cover all the essential aspects of web forms including marking up their html structure, styling form controls, validating form data, and submitting data to the server.
... 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.
...And 7 more matches

Arrays - Learn web development
previous overview: first steps next in the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name.
...we'll return to this example later on in the article.
... as in previous articles, let's learn about the real basics of arrays by entering some examples into browser developer console.
...And 7 more matches

Web performance - Learn web development
the "why" of web performance this article discusses why web performance is important for accessibility, user experience and your business goals.
...this article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance, how do users perceive performance?
...in this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.
...And 7 more matches

Handling common JavaScript problems - Learn web development
fixing general javascript problems as we said in the previous article on html/css, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues.
... if you are not already familiar with the basics of troubleshooting javascript, you should study that article before moving on.
...(see using a task runner to automate testing tools in a later article.) see eslint integrations for eslint options; jshint is supported out of the box by grunt, and also has other integrations available, e.g.
...And 7 more matches

Accessibility
this article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
...this article looks in detail at how html can be used to ensure maximum accessibility.
...this article outlines some css and javascript best practices that should be considered to ensure even complex content is as accessible as possible.
...And 7 more matches

Basics of HTTP - HTTP
articles overview of http describes what http is and its role in web architecture, including its position in the protocol stack.
...this article goes through its history and describes http/0.9, http/1.0, http/1.1, and the modern http/2, as well as novelties introduced over the years.
...this article explains how this is accomplished using the content-type header and the mime standard.
...And 7 more matches

Gecko Compatibility Handbook - Archive of obsolete content
(related article) problem: site has problems in all gecko-based browsers if you are still seeing problems, take a look at the troubleshooting section of this handbook.
... upgrade the browser detection javascript to detect "gecko." (related article) content differs in gecko browsers and internet explorer use of proprietary or invalid markup (such as is generated by some microsoft office applications).
...(related article) stylesheet is not being recognized the presence of the title attribute in a link element that references an external stylesheet can cause the stylesheet may be causing the external stylesheet to be ignored.
...And 6 more matches

Basic math in JavaScript — numbers and operators - Learn web development
this article discusses only the basic parts that you need to know now.
...we don't cover these in detail in this article because we wanted to keep it as a simple introduction and only cover the real basic essentials for now; however, once you've read through this module a couple of times it is worth going to the object reference pages and learning more about what's available.
...we used ++ in our "guess the number" game back in our first splash into javascript article, when we added 1 to our guesscount variable to keep track of how many guesses the user has left after each turn.
...And 6 more matches

Getting started with Svelte - Learn web development
previous overview: client-side javascript frameworks next in this article we'll provide a quick introduction to the svelte framework.
...we'll talk about this more in the last article.
...to make it easier for you to follow each article, we provide a github repository with a folder containing the source for the app as it is at the start of each tutorial.
...And 6 more matches

Introduction to automated testing - Learn web development
in this article, we look at what is available, how to use task runners, and how to use the basics of commercial browser test automation apps such as lambdatest, sauce labs, browserstack, and testingbot.
... we agree — testing all the things we've looked at in previous articles manually can be a real pain.
... we will look at how to set up your own selenium-based testing system in the next article.
...And 6 more matches

Web accessibility for seizures and physical reactions - Accessibility
this article introduces concepts behind making web content accessibile for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions.
... the fact that static images may cause seizures and other disorders is documented in such articles as “gamma oscillations and photosensitive epilepsy”, where it is noted “certain visual images, even in the absence of motion or flicker, can trigger seizures in patients with photosensitive epilepsy” the epilepsy foundation, in its article, "shedding light on photosensitivity, one of epilepsy's most complex conditions" talks about static images and patterns.
...in its article, "a revised definition of epilepsy" the epilepsy foundation notes that…"a seizure is an event and epilepsy is the disease involving recurrent unprovoked seizures." according to the epilepsy foundation's page "how serious are seizures?" , "sudden unexpected death in epilepsy (sudep) is likely the most common disease-related cause of death in with epilepsy.
...And 6 more matches

Audio and Video Delivery - Developer guides
this article is intended as a starting point for exploring the various delivery mechanisms of web based media and compatibility with popular browsers.
... video player styling basics with the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.
... cross-browser audio basics this article provides a basic guide to creating an html5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the media api.
...And 6 more matches

Browser Detection and Cross Browser Support - Archive of obsolete content
warning: the content of this article may be out of date.
... this article was written in 2003 and is not on par with current standards.
... this article is outdated, do not follow it.
...And 5 more matches

Implementing game control mechanisms - Game development
in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads.
... captain rogers was created using the phaser framework, the most popular tool for simple 2d game development in javascript right now, but it should be fairly easy to reuse the knowledge contained within these articles when building games in pure javascript or any other framework.
... in the following articles we will show how to implement various different control mechanisms for captain rogers to support different platforms — from touch on mobile, through keyboard/mouse/gamepad on desktop, to more unconventional ones like tv remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.
...And 5 more matches

Beginner's guide to media queries - Learn web development
olid rgb(79, 185, 227); text-decoration: none; display: block; padding: 10px; color: #333; font-weight: bold; } nav a:hover { background-color: rgba(207, 232, 220, 0.7); } .related { background-color: rgba(79, 185, 227, 0.3); border: 1px solid rgb(79, 185, 227); padding: 10px; } .sidebar { background-color: rgba(207, 232, 220, 0.5); padding: 10px; } article { margin-bottom: 1em; } we've made no layout changes, however the source of the document is ordered in a way that makes the content readable.
... <body> <div class="wrapper"> <header> <nav> <ul> <li><a href="">about</a></li> <li><a href="">contact</a></li> <li><a href="">meet the team</a></li> <li><a href="">blog</a></li> </ul> </nav> </header> <main> <article> <div class="content"> <h1>veggies!</h1> <p> ...
... </p> </aside> </article> <aside class="sidebar"> <h2>external vegetable-based links</h2> <ul> <li> ...
...And 5 more matches

Styling links - Learn web development
we'll look at all these topics in this article.
...in this article we'll build on this knowledge, showing you best practices for styling links.
...the last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using background shorthand instead of the individual properties.
...And 5 more matches

UI pseudo-classes - Learn web development
previous overview: forms next in the previous articles, we covered the styling of various form controls, in a general manner.
...in this article, we will explore in detail the different ui pseudo-classes available to us in modern browsers for styling forms in different states.
... note: a number of the pseudo-classes discussed here are concerned with styling form controls based on their validation state (is their data valid, or not?) you'll learn much more about setting and controlling validation constraints in our next article — client-side form validation — but for now we'll keep things simple with regards to form validation, so it doesn't confuse things.
...And 5 more matches

From object to iframe — other embedding technologies - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and the previous articles in this module.
... active learning: classic embedding uses in this article we are going to jump straight into an active learning section, to immediately give you a real idea of just what embedding technologies are useful for.
...="0" allowfullscreen sandbox> <p> <a href="https://udn.realityripple.com/docs/glossary"> fallback link for browsers that don't support iframes </a> </p> </iframe> this example includes the basic essentials needed to use an <iframe>: allowfullscreen if set, the <iframe> is able to be placed in fullscreen mode using the full screen api (somewhat beyond scope for this article.) frameborder if set to 1, this tells the browser to draw a border between this frame and other frames, which is the default behaviour.
...And 5 more matches

Storing the information you need — Variables - Learn web development
previous overview: first steps next after reading the last couple of articles you should now know what javascript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level.
... in this article, we will get down to the real basics, looking at how to work with the most basic building blocks of javascript — variables.
... tools you need throughout this article, you'll be asked to type in lines of code to test your understanding of the content.
...And 5 more matches

JavaScript First Steps - Learn web development
in this first article we will look at javascript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with javascript's purpose.
...troubleshooting javascript when you built up the "guess the number" game in the previous article, you may have found that it didn't work.
... never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in javascript programs.
...And 5 more matches

Object-oriented JavaScript for beginners - Learn web development
previous overview: objects next with the basics out of the way, we'll now focus on object-oriented javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how javascript emulates object classes via constructor functions, and how to create object instances.
... to start this off, we could return to our person object type from our first objects article, which defines the generic data and functionality of a person.
...for example: in the rest of the article, we'll start to look at how oop theory can be put into practice in javascript.
...And 5 more matches

Object prototypes - Learn web development
in this article, we explain how prototype chains work and look at how the prototype property can be used to add methods to existing constructors.
... note: this article covers traditional javascript constructors and classes.
... in the next article, we talk about the modern way of doing things, which provides easier syntax to achieve the same things — see ecmascript 2015 classes.
...And 5 more matches

Introducing JavaScript objects - Learn web development
guides object basics in the first article looking at javascript objects, we'll look at fundamental javascript object syntax, and revisit some javascript features we've already looked at earlier on in the course, reiterating the fact that many of the features you've already dealt with are in fact objects.
... object-oriented javascript for beginners with the basics out of the way, we'll now focus on object-oriented javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how javascript emulates object classes via constructor functions, and how to create object instances.
...in this article, we explore that difference, explain how prototype chains work, and look at how the prototype property can be used to add methods to existing constructors.
...And 5 more matches

Aprender y obtener ayuda - Learn web development
this article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish..
... textual articles you'll find a lot of written articles on the web to teach you about web design.
...some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "learn the css box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the css background property"?) mdn web docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.
...And 5 more matches

Framework main features - Learn web development
this article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.
...you might create an authorcredit component to go with each article.
... for example, our authorcredit react component might be utilized inside an article component.
...And 5 more matches

Deployment and next steps - Learn web development
previous overview: client-side javascript frameworks in the previous article we learning about svelte's typescript support, and how to use it to make your application more robust.
... in this final article we will look at how to deploy your application and get it online, and also share some of the resources that you should go on to, to continue your svelte learning journey.
...even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help you make your own decision.
...And 5 more matches

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
previous overview: client-side javascript frameworks next in the last article we added more features to our to-do list and started to organize our app into components.
... in this article we will add the app's final features and further componentize our app.
... the following new components will be developed throughout the course of this article: moreactions: displays the check all and remove completed buttons, and emits the corresponding events required to handle their functionality.
...And 5 more matches

Web Audio API - Web APIs
you can read about the theory of the web audio api in a lot more detail in our article basic concepts behind web audio api.
... there's also a basic concepts behind web audio api article, to help you understand the way digital audio works, specifically in the realm of the api.
...so if some of the theory doesn't quite fit after the first tutorial and article, there's an advanced tutorial which extends the first one to help you practise what you've learnt, and apply some more advanced techniques to build up a step sequencer.
...And 5 more matches

Generating HTML - Web APIs
the second example will transform the input document (example2.xml), which again contains information about an article, into an html document.
... the <body> element of the article now contains html elements (a <b> and <u> tag, see figure 2).
... figure 2 xml file :(example2.xml)view example | view source xml document (example2.xml): <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example2.xsl"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
...And 5 more matches

Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
this article describes how to set up the development environment for a large, complex firefox extension with any or all of the above-mentioned requirements.
...on the other hand, if you are an experienced developer or team, and you know that you are going to build a large, complex extension, you would do well to consider the approach described in this article.
...if someone can confirm this and/or provide guidelines for what's different, i'll update the article to incorporate this information.
...And 4 more matches

Priority Content - Archive of obsolete content
migrators: nigel mcfarlane and ben karel shorter works mostly completed: bypassing security restrictions and signing code original: bypassing security restrictions and signing code wiki location: bypassing security restrictions and signing code migrators: joel stanley i added the related links from the original article.
...dependant on: updating dhtml web pages for next generation browsers on devedge the tune-up wizard (see below, in the wishlist section) mostly completed: popup window controls devedge article migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated.
...keller mostly completed*: rich-text editing in mozilla 1.3 "mostly completed" means i'm waiting for a location to store example and source files which are required for demoing the information in the articles.
...And 4 more matches

Index - Archive of obsolete content
the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms.
...in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
... 422 deprecated and defunct markup reference, xul {many elements on this page are wrongly marked as deprecated, this page needs review} 423 dynamically modifying xul-based user interface add-ons, dom, extensions, xul this article discusses manipulating xul interfaces, using dom and other apis.
...And 4 more matches

CSS and JavaScript accessibility best practices - Learn web development
this article outlines some css and javascript best practices that should be considered to ensure even complex content is as accessible as possible.
...as we frequently mentioned in our html: a good basis for accessibility article, you should use the appropriate semantic element for the job, whenever possible.
...as we looked at in our html: a good basis for accessibility article, the key considerations are: good semantics: using the right element for the right job.
...And 4 more matches

Accessible multimedia - Learn web development
this article shows how.
... this article on the other hand looks at another general class of content that arguably isn't as easy to ensure accessibility for — multimedia.
... simple images we already covered simple text alternatives for html images in our html: a good basis for accessibility article — you can refer back to there for the full details.
...And 4 more matches

What is accessibility? - Learn web development
overview: accessibility next this article starts the module off with a good look at what accessibility is — this overview includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
...an article, later on, will discuss these.
... the way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the keyboard to see how you get on.
...And 4 more matches

CSS building blocks - Learn web development
guides this module contains the following articles, which cover the most essential parts of the css language.
...in this article and its sub-articles, we'll run through the different types in great detail, seeing how they work.
... the sub-articles are as follows: type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items.
...And 4 more matches

Responsive design - Learn web development
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.
... the first was the idea of fluid grids, something which was already being explored by gillenwater, and can be read up on in marcotte's article, fluid grids (published in 2009 on a list apart).
...in marcotte's original exploration this meant flexible grids (using floats) and media queries, however in the almost 10 years since that article was written, working responsively has become the default.
...And 4 more matches

HTML text fundamentals - Learn web development
this article explains the way html can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.
... to answer this question, let's take a look at text-start.html—the starting point of our running example for this article (a nice hummus recipe).
... code textarea.onkeyup = function(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; active learning: marking up our recipe page so at this point in the article, you have all the information you need to mark up our recipe page example.
...And 4 more matches

Introduction to HTML - Learn web development
guides this module contains the following articles, which will take you through all the basic theory of html and provide ample opportunity for you to test out some skills.
...this article looks at how to use html to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
...this article shows the syntax required to make a link and discusses best practices for links.
...And 4 more matches

Video and audio content - Learn web development
in this article we'll look at doing just that with the <video> and <audio> elements; we'll then finish off by looking at how to add captions/subtitles to your videos.
...ovps even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article.
... we'll be discussing this kind of service a bit more in the next article.
...And 4 more matches

HTML table advanced features and accessibility - Learn web development
previous overview: tables next in the second article in this module, we look at some more advanced features of html tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
...we'd recommend using the <caption> element instead, however, as summary is deprecated by the html5 spec, and can't be read by sighted users (it doesn't appear on the page.) active learning: adding a caption let's try this out, revisiting an example we first met in the previous article.
...you'll learn more about this when you go through our css modules (introduction to css is a good place to start; we also have an article specifically on styling tables).
...And 4 more matches

HTML table basics - Learn web development
overview: tables next this article gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
...in this module we are focusing on the html part; to find out about the css part you should visit our styling tables article after you've finished here.
... tables are not automatically responsive: when you use proper layout containers (such as <header>, <section>, <article>, or <div>), their width defaults to 100% of their parent element.
...And 4 more matches

Graceful asynchronous programming with Promises - Learn web development
this article shows you how promises work, how you'll see them in use with web apis, and how to write your own.
... we looked at promises briefly in the first article of the course, but here we'll look at them in a lot more depth.
... note: you can learn more about this somewhat advanced topic, if you're interested, in the article signaling and video calling.
...And 4 more matches

Inheritance in JavaScript - Learn web development
previous overview: objects next with most of the gory details of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes.
...all the other code constructs we discussed in this set of articles are supported as far back as ie9 or earlier, and there are ways to achieve earlier support than that.
... particularly after this last article, you might be thinking "woo, this is complicated".
...And 4 more matches

Command line crash course - Learn web development
this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (cli) tools.
...macos darwin mostly has parity with unix, certainly good enough to not cause us any worries as we work through this article.
...ir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and transform streams of text (for example changing all the instances of <div>s in an html file to <article>): awk, tr, sed note: there are a number of good tutorials on the web that go much deeper into the command line on the web — this is only a brief introduction!
...And 4 more matches

Introducing a complete toolchain - Learn web development
previous overview: understanding client-side tools next in the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain.
...in this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
... there really are unlimited combinations of tools and ways to use them, what you see in this article and the next is only one way that the featured tools can be used for a project.
...And 4 more matches

Understanding client-side web development tools - Learn web development
client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line.
...client-side tooling overview in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
...this article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (cli) tools.
...And 4 more matches

Index
170 enc dec mac output public key as csr generates encryption/mac keys and outputs public key as certificate signing request 171 enc dec mac using key wrap certreq pkcs10 csr generates encryption/mac keys and outputs public key as pkcs11 certificate signing request 172 encdecmac using token object - sample 3 encdecmac, html, ncc, ncc article, web, web development no summary!
... 175 initialize nss database - sample 2 html, javascript, nss, nss article, nss initialization, web development the nss sample code below demonstrates how to initialize the nss database.
...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) pk12util (1) signtool (1) the nss wiki has information on the new data...
...And 4 more matches

Index
this article will show you how to use the available interfaces in several mozilla products.
... 98 xpcom guide add-ons, extensions, guide, landing, mozilla, xpcom these articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.
...this article details those changes, and provides suggestions for how to update your code.
...And 4 more matches

Matrix math for the web - Web APIs
this article explores how to create matrices and how to use them with css transforms and the matrix3d transform type.
... while this article uses css to simplify explanations, matrices are a core concept used by many different technologies including webgl, the webxr (vr and ar) api, and glsl shaders.
... this article is also available as an mdn content kit.
...And 4 more matches

Geometry and reference spaces in WebXR - Web APIs
in this article, we introduce the ways in which webxr expands upon the geometry of webgl, and how the positions and orientations of objects—both physical and virtual—are described in relation to one another using spaces and, in particular, reference spaces.
... the article spatial tracking in webxr builds upon the information provided here to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited.
...3d geometry while we'll examine here the required math operations used to compute the positions, orientations, and movement of objects in virtual space—plus the need to integrate the human viewer of the scene into the mix—a thorough introduction to geometry and the use of matrices and vectors to manage 3d representations of a scene is well beyond the scope of what can be accomplished in this article.
...And 4 more matches

Web Accessibility: Understanding Colors and Luminance - Accessibility
newer technologies, such as opengl and direct3d incorporate support for the srgb gamma curve, although some articles for opengl reference use of rgba rather than srgb.
... see the stack exchange article, "formula to determine the brightness of rgb color".
... 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 ...
...And 4 more matches

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
in this article we will take a look at how flexbox fits in with all the other css modules.
...additionally, any new values defined in the box alignment module will apply to flexible box layout; in otherwords, the box alignment module, once completed, will supercede the definitions here." in a later article in this series — aligning items in a flex container — we will take a thorough look at how the box alignment properties apply to flex items.
... writing modes in the basic concepts of flexbox article, i explained that flexbox is writing mode aware.
...And 4 more matches

Adding captions and subtitles to HTML5 video - Developer guides
in other articles we looked at how to build a cross browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player.
... this article will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <track> element.
... captioned video example in this article, we will refer to the video player with captions example.
...And 4 more matches

Regular expression syntax cheatsheet - JavaScript
this page provides an overall cheat sheet of all the capabilities of regexp syntax by aggregating the content of the articles in the regexp guide.
... if you need more information on a specific topic, please follow the link on the corresponding heading to access the full article or head to the guide.
... character classes if you are looking to contribute to this document, please also edit the original article characters meaning .
...And 4 more matches

Progressive web app structure - Progressive web apps (PWAs)
the most popular approach is the "app shell" concept, which mixes ssr and csr in exactly the way described above, and in addition follows the "offline first" methodology which we will explain in detail in upcoming articles and use in our example application.
... we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's focus on the structure itself.
...the folder structure looks like this: the html from the html point of view, the app shell is everything outside the content section: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data...
...And 4 more matches

Venkman Introduction - Archive of obsolete content
warning: the content of this article may be out of date.
...this article provides an overview and some practical examples of using the javascript debugger in web applications and web page scripting.
... this introduction is the first in a series of articles on venkman and javascript debugging.
...And 3 more matches

Archived Mozilla and build documentation - Archive of obsolete content
these articles are archived, obsolete documents about mozilla, gecko, and the process of building mozilla projects.
... chromeless [this project may not be active — check github https://github.com/mozilla/chromeless] creating a firefox sidebar extension this article describes how to create a registered sidebar for firefox 2 or greater.
...this article provides a list of them.
...And 3 more matches

Accessibility - Learn web development
this article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
...this article looks in detail at how html can be used to ensure maximum accessibility.
...this article outlines some css and javascript best practices that should be considered to ensure that even complex content is as accessible as possible.
...And 3 more matches

Advanced styling effects - Learn web development
this article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.
...first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the f...
... multiple box shadows you can also specify multiple box shadows in a single box-shadow declaration, by separating them with commas: <article class="multiple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, ...
...And 3 more matches

The HTML5 input types - Learn web development
previous overview: forms next in the previous article we looked at the <input> element, covering the original values of the type attribute available since the early days of html.
... note: most of the features discussed in this article have wide support across browsers.
...to implement different validation behavior, you can use the pattern attribute, and you can also custom the error messages; we'll talk how to use these features in the client-side form validation article later on.
...And 3 more matches

How to structure a web form - Learn web development
we already met this in the previous article.
... the <label> element as we saw in the previous article, the <label> element is the formal way to define a label for an html form widget.
...take this example, which we saw in the previous article: <label for="name">name:</label> <input type="text" id="name" name="user_name"> with the <label> associated correctly with the <input> via its for attribute (which contains the <input> element's id attribute), a screenreader will read out something like "name, edit text".
...And 3 more matches

Using data attributes - Learn web development
say you have an article and you want to store some extra information that doesn’t have any visual representation.
... just use data attributes for that: <article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> ...
... </article> javascript access reading the values of these attributes out in javascript is also very simple.
...And 3 more matches

Adding vector graphics to the Web - Learn web development
in this article we'll show you how to include one in your webpage.
... note: this article doesn't intend to teach you svg; just what it is, and how to add it to web pages.
...also, please refer to this article describing how to prepare svgs for the web.
...And 3 more matches

Build your own function - Learn web development
previous overview: building blocks next with most of the essential theory dealt with in the previous article, this article provides practical experience.
...you'll learn a lot more about these in our later events article.
... you've reached the end of this article, but can you remember the most important information?
...And 3 more matches

Functions — reusable blocks of code - Learn web development
in this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define them, scope, and parameters.
...in our random-canvas-circles.html example (see also the full source code) from our loops article, we included a custom draw() function that looked like this: function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } this function draws 100 random circles inside a <canvas> element.
...you've already seen this structure a few times throughout the course, and you'll learn more about and see it in use in the next article.
...And 3 more matches

Looping code - Learn web development
we already met this in the previous article when we looked at switch statements — when a case is met in a switch statement that matches the input expression, the break statement immediately exits the switch statement and moves onto the code after it.
...have a look at the useful string methods article for help.
... note: there are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article.
...And 3 more matches

Client-side storage - Learn web development
this article explains the very basics of how these work.
... these days, there are easier mechanisms available for storing client-side data, therefore we won't be teaching you how to use cookies in this article.
...for more information on cookies see our using http cookies article.
...And 3 more matches

Client-side web APIs - Learn web development
in this article, we'll look at how to use the dom in detail, along with some other interesting apis that can alter your environment in interesting ways.
... in this article, we'll explain the concept, and look at technologies that make it possible, such as xmlhttprequest and the fetch api.
...this article looks at the difference between browser apis and 3rd party apis and shows some typical uses of the latter.
...And 3 more matches

A first splash into JavaScript - Learn web development
in subsequent articles, you'll revisit all these features in a lot more detail!
... with that in mind, let's look at the example we'll be building up in this article, and review the general process of dissecting it into tangible tasks.
... example — guess the number game in this article we'll show you how to build up the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastresult { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100.
...And 3 more matches

JavaScript object basics - Learn web development
overview: objects next in this article, we'll look at fundamental javascript object syntax, and revisit some javascript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects.
...as you'll see in the object-oriented javascript for beginners article, when we start creating constructors and so on, this is very useful — it always ensures that the correct values are used when a member's context changes (for example, two different person object instances may have different names, but we want to use their own name when saying their greeting).
...try entering the following into your javascript console: const mynotification = new notification('hello!'); again, we'll look at constructors in a later article.
...And 3 more matches

Introduction to the server side - Learn web development
in this first article, we look at server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?".
... after reading this article you'll understand the additional power available to websites through server-side coding.
... the site you are on right now controls access to content: articles are visible to everyone, but only users who have logged in can edit them.
...And 3 more matches

Componentizing our Svelte app - Learn web development
previous overview: client-side javascript frameworks next in the last article we started developing our todo list app.
... the central objective of this article is to look at how to break our app into manageable components and share information between them.
... in this article we will concentrate on creating the filterbutton and todo components; we'll get to the others in future articles.
...And 3 more matches

Working with Svelte stores - Learn web development
previous overview: client-side javascript frameworks next in the last article we completed the development of our app, finished organizing it into components, and discussed some advanced techniques for dealing with reactivity, working with dom nodes, and exposing component functionality.
... in this article we will show another way to handle state management in svelte — stores.
... to learn more about detecting and fixing accessibility issues check out our handling common accessibility problems article.
...And 3 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
in this article we'll be using variables and props to make our app dynamic, allowing us to add and delete todos, mark them as complete, and filter them by status.
... adding new todos now onto the next major task for this article — let's add some functionality for adding new todos.
... let's use this in our addtodo() function — update it like so: function addtodo() { todos = [...todos, { id: newtodoid, name: newtodoname, completed: false }] newtodoname = '' } filtering todos by status finally for this article, let's implement the ability to filter our todos by status.
...And 3 more matches

Handling common accessibility problems - Learn web development
defines accessibility more completely and thoroughly than this article does.
... that said, this article will cover cross browser and testing issues surrounding people with disabilities, and how they use the web.
...here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0" (see webaim's tabindex article for more really useful details).
...And 3 more matches

Handling common HTML and CSS problems - Learn web development
first things first: fixing general problems we said in the first article of this series that a good strategy to begin with is to test in a couple of modern browsers on desktop/mobile, to make sure your code is working generally, before going on to concentrate on the cross browser issues.
... in our debugging html and debugging css articles, we provided some really basic guidance on debugging html/css — if you are not familiar with the basics, you should definitely study these articles before carrying on.
...you can still refer to them by their names, and style them with css, for example — you just need to make sure they are behaving as you want them to, for example setting display: block; on all of the new semantic elements (such as <article>, <aside>, etc.), but only in old versions of ie that don't recognise them (so, ie 8 and lower).
...And 3 more matches

Introduction to cross browser testing - Learn web development
overview: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages.
...you can make some informed calls as to what browsers and devices your users will be using (as we'll discuss in the second article in the series — see gotta test 'em all?), but you can't guarantee everything.
... in later articles, we'll explore common cross browser problems, and look at solutions to those.
...And 3 more matches

A bird's-eye view of the Mozilla framework
tiner last updated date: 11/23/05 statement of purpose the purpose of this article is to provide a high-level technical overview of the architecture of the extensible, object-based mozilla application framework.
... the article focuses on the architecture of the overall framework supporting the mozilla application suite, not the architecture of the individual applications themselves.
... prerequisites this article assumes you have access to mozilla sources and are familiar with the directory structure of the source tree.
...And 3 more matches

Standard OS Libraries
this article gives the names of standard libraries that can be accessed with js-ctypes.
...this article allows you to find out what types to give to values/arguments by supplying links to the documentation of the os libraries.
...as wayland is not out yet in the wild this article does not focus on wayland, it will focus on gtk+ and xorg(x11/x).
...And 3 more matches

Using IndexedDB - Web APIs
for the reference documentation on the indexeddb api, see the indexeddb article and its subpages.
... this article documents the types of objects used by indexeddb, as well as the methods of the asynchronous api (the synchronous api was removed from spec).
...for more information on how to upgrade the version of the database in older webkit/blink, see the idbdatabase reference article.
...And 3 more matches

Using the MediaStream Recording API - Web APIs
this article aims to provide a basic guide on how to use the mediarecorder interface, which provides this api.
...we'll concentrate on the recording and playback functionality for this article.
... we'll declare some variables for the record and stop buttons, and the <article> that will contain the generated audio players: const record = document.queryselector('.record'); const stop = document.queryselector('.stop'); const soundclips = document.queryselector('.sound-clips'); finally for this section, we set up the basic getusermedia structure: if (navigator.mediadevices && navigator.mediadevices.getusermedia) { console.log('getusermedia supported.'); navigato...
...And 3 more matches

Using readable streams - Web APIs
this article explains the basics.
... note: this article assumes that you understand the use cases of readable streams, and are aware of the high-level concepts.
... if not, we suggest that you first read the streams concepts and usage overview and dedicated streams api concepts article, then come back.
...And 3 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
in this article, we'll make use of information introduced in the previous articles in our webxr tutorial series to construct an example which animates a rotating cube around which the user can move freely using a vr headset, keyboard, and/or mouse.
... screenshot of this example in action the core of this example—the spinning, textured, lighted cube—is taken from our webgl tutorial series; namely, the penultimate article in the series, covering lighting in webgl.
... while reading this article and the accompanying source code, it's helpful to keep in mind that the display for a 3d headset is a single screen, divided in half.
...And 3 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
this article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.
... you can read more about the relationship between flexbox and the writing modes specification in a later article; however, the following description should help explain why we do not talk about left and right and top and bottom when we describe the direction that our flex items flow in.
...we’ll therefore take a more detailed look at how this algorithm works in the article controlling ratios of items along the main axis.
...And 3 more matches

HTML: Hypertext Markup Language
html markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.
... the articles below can help you learn more about html.
... html introduction if you're new to web development, be sure to read our html basics article to learn what html is and how to use it.
...And 3 more matches

Cross-Origin Resource Sharing (CORS) - HTTP
who should read this article?
... more specifically, this article is for web administrators, server developers, and front-end developers.
...another article for server developers discussing cross-origin sharing from a server perspective (with php code snippets) is supplementary reading.
...And 3 more matches

Structural overview of progressive web apps - Progressive web apps (PWAs)
the most popular approach is the app shell concept, which mixes ssr and csr in exactly the way described above, and in addition follows the "offline first" methodology which we will explain in detail in upcoming articles and use in our example application.
... we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's focus on the structure itself.
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>js13kgames a-frame entries</title> <meta name="description" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data...
...And 3 more matches

Index - WebAssembly
this article explains the best practices around this.
...this article explains a little bit about how it works, and how to use available tools to covert text format files to the .wasm assembly format.
...this article describes what they are in a little more detail.
...And 3 more matches

Skinning XUL Files by Hand - Archive of obsolete content
this article can help you get started understanding skins and creating skins for xul.
...- can be grouped in css, but this is an extremely inefficient way to style xul, and is frowned upon in the mozilla development community (again, refer to the skinning guidelines in writing skinnable xul and css for more info); css2 also provides some new ways to group elements for styling, which we summarize briefly here, because they appear in mozilla with some frequency, but reserve for another article: pseudo-class parent-child element:pseudo-class { attribute: value; } parent > child { attribute: value; } button:hover { border: 1px; } menu#file > menuitem { font-weight: bold; } pseudo-classes reflect states of the element: when the mouse moves over a button, for example, the appropriate pseudo-class stylesheet rules are a...
...we will discuss this special url type in a later article.
...And 2 more matches

Getting started with XULRunner - Archive of obsolete content
next » this article explores the mozilla platform by building a basic desktop application using xulrunner.
...there is an article with a more complicated approach to building xulrunner applications at creating xulrunner apps with the mozilla build system.
... if you need to change xulrunner itself or integrate it with external binaries you may need to read that article.
...And 2 more matches

3D games on the Web - Game development
see our explaining basic 3d theory article for all the information you need.
...you should definitely check out glsl shaders article to learn more about them.
... there's also the building up a basic demo with a-frame article showing you how easy it is to build 3d environments for virtual reality using the a-frame framework.
...And 2 more matches

Techniques for game development - Game development
this article explains how.
...this article explains what this can do for you, and shows how to use libraries that make this easy.
... efficient animation for web games this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones.
...And 2 more matches

Mobile accessibility - Learn web development
this article looks at mobile-specific accessibility considerations.
... prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, and an understanding of the previous articles in the course.
... control mechanisms in our css and javascript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see mouse-specific events).
...And 2 more matches

Organizing your CSS - Learn web development
in this article we will take a brief look at some best practices for writing your css to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.
...for example, you might have something like the below selector, which applies the rule to a <p> with a class of box inside an <article> with a class of main.
... article.main p.box { border: 1px solid #ccc; } if you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset.
...And 2 more matches

Pseudo-classes and pseudo-elements - Learn web development
if we wanted to make the first paragraph in an article larger and bold, we could add a class to that paragraph and then add css to that class, as shown in the first example below: however, this could be annoying to maintain — what if a new paragraph got added to the top of the document?
...instead of adding the class, we could use the :first-child pseudo-class selector — this will always target the first child element in the article, and we will no longer need to edit the html (this may not always be possible anyway, maybe due to it being generated by a cms.) all pseudo-classes behave in this same kind of way.
...in the example above, you could write :first-child and the rule would apply to any element that is the first child of an <article> element, not just a paragraph first child — :first-child is equivalent to *:first-child.
...And 2 more matches

CSS selectors - Learn web development
in this article and its sub-articles we'll run through the different types in great detail, seeing how they work.
... in earlier articles you met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as h1, or a class such as .special.
...in this article's subarticles we will look at the different groups of selectors in more detail.
...And 2 more matches

Introduction to CSS layout - Learn web development
overview: css layout next this article will recap some of the css layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
...us: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: this has been a very short introduction to what is possible in flexbox, to find out more, see our flexbox article.
... .box1 { grid-column: 2 / 4; grid-row: 1; } .box2 { grid-column: 1; grid-row: 1 / 3; } .box3 { grid-row: 2; grid-column: 3; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> note: these two examples are just a small part of the power of grid layout; to find out more see our grid layout article.
...And 2 more matches

Other form controls - Learn web development
previous overview: forms next we now look at the functionality of non-<input> form elements in detail, from other control types such as drop-down lists and multi-line text fields, to other useful form features such as the <output> element (which we saw in action in the previous article), and progress bars.
... note: you can find a slightly more interesting example of text area usage in the example we put together in the first article of the series (see the source code also).
... you've reached the end of this article, but can you remember the most important information?
...And 2 more matches

Sending form data - Learn web development
and, since we covered validation in the previous article, we're ready to submit!
... this article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there?
... note: it is beyond the scope of this article to teach you any server-side languages or frameworks.
...And 2 more matches

Multimedia and Embedding - Learn web development
guides this module contains the following articles which will take you through all the fundamentals of embedding multimedia on webpages.
...in this article we'll look at how to use it in more depth, including basics, annotating it with captions using <figure>, and how it relates to css background images.
...this article introduces you to what vector graphics are and how to include the popular svg format in web pages.
...And 2 more matches

Making asynchronous programming easier with async and await - Learn web development
this article gives you what you need to know.
... to actually consume the value returned when the promise fulfills, since it is returning a promise, we could use a .then() block: hello().then((value) => console.log(value)) or even just shorthand such as hello().then(console.log) like we saw in the last article.
... rewriting promise code with async/await let's look back at a simple fetch example that we saw in the previous article: fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new error(`http error!
...And 2 more matches

Asynchronous JavaScript - Learn web development
if you are not familiar with the concept of asynchronous programming, you should definitely start with the general asynchronous programming concepts article in this module.
... guides general asynchronous programming concepts in this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and javascript.
... you should understand these concepts before working through the other articles in the module.
...And 2 more matches

Object building practice - Learn web development
previous overview: objects next in previous articles we looked at all the essential javascript object theory and syntax details, giving you a solid base to start from.
... in this article we dive into a practical exercise, giving you some more practice in building custom javascript objects, with a fun and colorful result.
... let's bounce some balls in this article we will write a classic "bouncing balls" demo, to show you how useful objects can be in javascript.
...And 2 more matches

Learning area release notes - Learn web development
our web forms learning module now has "test your skills" assessments accompanying the articles.
... march 2020 you'll now find "test your skills" assessments accompanying the articles in the following modules: css building blocks javascript first steps javascript building blocks introducing javascript objects january 2020 the html forms module has been significantly updated: it has been retitled web forms, and moved out of the html topic area to recognise that it covers more than just html form elements — it also covers styling, validation, the basics of how to send data and process it on the server, and more besi...
...you can see these on: css layout: flexbox css layout: grids css layout: floats december 2019 we are adding a new type of assessment article to the learning area — "test your skills" — which will offer several short questions aimed at rapidly testing whether you understood what is going on.
...And 2 more matches

Server-side website programming first steps - Learn web development
finally, we provide a high-level introductory article about web server security.
...in this first article, we look at server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?".
... after reading this article, you'll understand the additional power available to websites through server-side coding.
...And 2 more matches

Ember app structure and componentization - Learn web development
previous overview: client-side javascript frameworks next in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the html for it, and then breaking that html structure into components.
... planning out the layout of the todomvc app in the last article we set up a new ember project, then added and configured our css styles.
...--}} {{outlet}} <welcomepage /> is a component provided by an ember addon that renders the default welcome page we saw in the previous article, when we first navigated to our server at localhost:4200.
...And 2 more matches

Getting started with React - Learn web development
previous overview: client-side javascript frameworks next in this article we will say hello to react.
... this article is going to focus on the use case of using react to render the entire user interface of an application, using tooling provided by facebook’s own create-react-app tool.
... to read more about jsx, check out the react team's jsx in depth article.
...And 2 more matches

TypeScript support in Svelte - Learn web development
previous overview: client-side javascript frameworks next in the last article we learned about svelte stores and even implemented our own custom store to persist the app's information to web storage.
...even if you are not planning to adopt it, this article will be useful for allowing you to learn what it has to offer and help you make your own decision.
... the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/08-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development mode.
...And 2 more matches

Strategies for carrying out testing - Learn web development
previous overview: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-browser testing.
...you should definitely include accessibility as a grade a testing requirement (we'll cover exactly what you should test in our handling common accessibility problems article) plus you might have other considerations.
... note: we also need to consider accessibility — there are a number of useful tools you can install on your machine to facilitate accessibility testing, but we'll cover those in the handling common accessibility problems article, later in the course.
...And 2 more matches

Cross browser testing - Learn web development
guides introduction to cross browser testing this article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" strategies for carrying out testing next, we drill down into carrying out testing, looking at identifyi...
...this article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports.
...in this article, we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as sauce labs and browser stack.
...And 2 more matches

Index
3 account examples extensions, thunderbird this article provides examples on accessing and manipulating thunderbird accounts.
... 8 address book examples mailnews, seamonkey, thunderbird this article provides examples on accessing and manipulating thunderbird address books.
... 86 faq add-ons, extensions, thunderbird the old contents of this faq page were duplicated in the setting up extension development environment article and the building a thunderbird extension article.
...And 2 more matches

Basic concepts - Web APIs
for the reference documentation on the indexeddb api, refer back to the main indexeddb api article and its subpages, which document the types of objects used by indexeddb.
...if you are not familiar with transactions in a database, read the wikipedia article on transactions.
...if you are not familiar with object-oriented database management systems, read the wikipedia article on object database.
...And 2 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
there are a few articles about the fundamental math, geometry, and other concepts behind webgl and webxr which may be useful to read before or while reading this one, including: explaining basic 3d theory matrix math for the web webgl model view projection geometry and reference spaces in webxr ed.
... note: most diagrams used in this article to show how the camera moves while performing standard movements was taken from an article on the filmmakeriq web site; namely, from this image which is found all over the web, however, and though we assume these are under a permissive license due to their frequent reuse, ownership is not certain.
...there are several kinds of perspective; those are defined and their mathematics explained in the article webgl model view projection.
...And 2 more matches

Inputs and input sources - Web APIs
the use of these profiles is briefly described under input profiles below, and a more complete guide may be found in our article using webxr input profiles.
...details are beyond the scope of this article, however.
... there are a number of examples showing how to handle select events throughout the documentation, such as in the section on targeting and the targeting ray elsewhere in this article.
...And 2 more matches

Rendering and the WebXR frame animation callback - Web APIs
this article covers the process of driving the frames of the xr scene to the device in the rendering loop, using the xrsession to obtain an xrframe object representing each frame, which is then used to prepare the framebuffer for delivery to the xr device.
...these setup tasks are described in the article setting up and shutting down a webxr session.
...thus it's the other kinds of input that you need to handle yourself: pointing device target and button presses gamepad inputs non-xr input device inputs to learn more about how to handle user inputs while presenting a scene using webxr, see the article inputs and input sources.
...And 2 more matches

WebXR Device API - Web APIs
this article serves as an introduction to the basics of what's involved in creating a webxr experience without diving into the code in detail.
...this article explains the relationship between spaces, poses, viewers, and views.
...in this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.
...And 2 more matches

XSLT Basic Example - Web APIs
the example will take an xml document that contains information (title, list of authors and body text) about an article and present it in an human readable form.
...the xml document (example.xml) contains the information about the article.
...the template that matches the root node outputs the article's title and then says to process all templates (via apply-templates) that match author nodes which are children of the authors node.
...And 2 more matches

Ajax - Developer guides
documentation getting started this article guides you through the ajax basics and gives you two simple hands-on examples to get you started.
...this article will explain how to use some ajax techniques, like: analyzing and manipulating the response of the server monitoring the progress of a request submitting forms and upload binary files – in pure ajax, or using formdata objects using ajax within web workers fetch api the fetch api provides an interface for fetching resources.
... pure-ajax navigation example this article provides a working (minimalist) example of a pure-ajax website composed only of three pages.
...And 2 more matches

Video player styling basics - Developer guides
in the previous cross browser video player article we described how to build a cross-browser html5 video player using the media and fullscreen apis.
... this follow-up article looks at how to style this custom player, including making it responsive.
... html markup there are a few changes that were made to the html markup shown in the previous article.
...And 2 more matches

Developer guides
these articles provide how-to information to help make use of specific web technologies and apis.
...this article is intended as a starting point for exploring the various delivery mechanisms of web-based media and compatibility with popular browsers.
...this article provides a reference to explain what you need to do.
...And 2 more matches

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

Securing your site - Web security
this article offers an assortment of suggestions, as well as links to other articles providing more useful information.
... note: this article is a work in progress, and is neither complete nor does following its suggestions guarantee your site will be fully secure.
... privacy and the :visited selector this article discusses changes made to the getcomputedstyle() method that eliminates the ability for malicious sites to figure out the user's browsing history.
...And 2 more matches

Basic Example - XSLT: Extensible Stylesheet Language Transformations
these are the same files used in the generating html example in the xslt in netscape gecko article.
... the xml file describes an article and the xsl file formats the information for display.
... figure 4 : xml file <?xml version="1.0"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
...And 2 more matches

WebAssembly
loading and running webassembly code after you have a .wasm, this article covers how to fetch, compile and instantiate it, combining the webassembly javascript api with the fetch or xhr apis.
...in this article we show you how to use webassembly via the webassembly javascript api.
...this article describes what they are.
...And 2 more matches

Creating a status bar extension - Archive of obsolete content
next » this is the first in a series of articles that will demonstrate how to create increasingly intricate extensions for the firefox browser.
... some of the samples in this series may be similar to samples you've seen elsewhere, but the goal of this series of articles is to help compile information for new extension developers into one place to make it easy to jump in and get started.
...if this sounds a lot like the existing building an extension article, you're right.
... however, this sample will be expanded upon in later articles in the series.

Creating a Firefox sidebar extension - Archive of obsolete content
warning: the content of this article may be out of date.
...a newer document is available: creating a firefox sidebar this article describes how to create a registered sidebar for firefox 2 or greater.
... introduction this article is a quick start for the creation of a new sidebar for firefox.
... pre-requisites this article is a quick start, it won't explain all elements of xul, packaging and xpi's.

Using Breakpoints in Venkman - Archive of obsolete content
this article continues a series of articles on venkman that began with venkman introduction.
...this article describes breakpoints in javascript and how to use venkman to set and examine breakpoints.
... for more information about the sorts of actions you can take in venkman when you're at a breakpoint, see the debugging basics section of the introductory venkman article.
...resources venkman introduction—previous article on venkman.

Creating XPI Installer Modules - Archive of obsolete content
introduction this article is rather old and only applies to mozilla suite and seamonkey (until it gets converted to toolkit).
...this article describes the new packaging scheme of mozilla and offers a tutorial for creating a new package that can then be redistributed, installed, and made available to users.
... the xpi packaging scheme a complete description of the new packaging scheme is beyond the scope of this article.
...all of the resources described in this article are in the xpi archive and can be adapted for use in your own development.

2006-11-10 - Archive of obsolete content
summary: mozilla.dev.accessibility - oct 28-nov 10, 2006 announcements acm transactions on accessible computing "transactions on accessible computing (taccess) is a quarterly journal that publishes refereed articles addressing issues of computing as it impacts the lives of people with disabilities." read more...
... discussions firefox: an open source accessibility success story aaron leventhal of ibm recently published a new article praising firefox accessibility.
... the article goes into the history of accessibility in firefox, details ibm's involvement and addresses some ajax accessibility concerns.
... the article closes with a glimpse at the future of firefox accessibility.

Sunbird Theme Tutorial - Archive of obsolete content
for information on how to find the profile directory, see the mozillazine article: profile folder inside the profile directory, go to the <tt>extensions</tt> directory.
...for example, when i wrote this article i used this command in my theme directory: zip -0r testing-0.1.jar .
...for example, when i wrote this article i used this command in my <tt>chrome</tt> directory: zip -0r testing.jar .
...for example, when i wrote this article i used this command in my theme directory: zip -9 testing-0.1.jar * chrome/testing.jar make this jar file available to users.

Updating an extension to support multiple Mozilla applications - Archive of obsolete content
« previousnext » this article shows how to take an existing extension and update it so that it can be used in additional mozilla applications.
... we'll build upon the stock watcher extension created in earlier articles in this series, updating it so it can also be used in thunderbird and sunbird (previous versions worked only in firefox).
... if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension localizing an extension download the sample you can download this article's sample code so you can look at it side-by-side with the article, or to use it as a basis for your own extension.
...update the chrome manifest remember way back in the first article in this series when we created our chrome manifest, which we haven't touched since?

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.
...every proposed w3c web standards replacement in this article is working without a problem in modern browsers like msie 7, firefox 2, opera 9, safari 3, konqueror 3.5+, icab 4, etc.
... the next-to-last section, summary of changes, outlines all the changes described in this article.
... the last section offers excellent and best references for those wishing to learn more about upgrading techniques presented in this article and more for those wishing to perfect their web pages.

Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
warning: the content of this article may be out of date.
... this article was written on august 31, 2001; it is not compatible with current versions of firefox.
... this article applies to mozilla versions 0.9.2 and higher and netscape versions 6.1 and higher.
... related sources the full sample plugin code can be found in the mozilla source tree under modules/plugin/samples/4x-scriptable/ ibm developer works has published a good article on xpcom.

GLSL Shaders - Game development
in this article we will make a simple code example that renders a cube.
... as you may remember from the basic theory article, a vertex is a point in a 3d coordinate system.
... note: you can learn more about model, view, and projection transformations from the vertex processing paragraph, and you can also check out the links at the end of this article to learn more about it.
...ragmentshader' ).textcontent }); var cube = new three.mesh(boxgeometry, shadermaterial); scene.add(cube); cube.rotation.set(0.4, 0.2, 0); function render() { requestanimationframe(render); renderer.render(scene, camera); } render(); css body { margin: 0; padding: 0; font-size: 0; } canvas { width: 100%; height: 100%; } result conclusion this article has taught the very basics of shaders.

Square tilemaps implementation: Scrolling maps - Game development
this article covers how to implement scrolling square tilemaps using the canvas api.
... note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.
... this article also builds upon implementing static square tilemaps — you should read that too if you've not done so already.
...in the demo provided along with this article, these are the parameters the camera has: x and y: the current position of the camera.

Fundamental CSS comprehension - Learn web development
prerequisites: before attempting this assessment you should have already worked through all the articles in this module.
... to stop the image from spilling out of the main business card content (the <article> element), we need to give it a specific height.
... set the <article>'s height to 120px, but expressed in ems.
... as a last little touch, give the paragraph inside the <article> an appropriate padding value so that its left edge lines up with the <h2> and footer paragraph, and set its color to be fairly light so it is easy to read.

Images, media, and form elements - Learn web development
there are a few key basics worth highlighting in this section of the article.
... for further information on styling forms, take a look at the two articles in the html section of these guides.
... we have covered a lot in this article, but can you remember the most important information?
...in the next article we'll look over a few tips you'll find useful when you have to style html tables.

Floats - Learn web development
with the advent of flexbox and grid it has now returned to its original purpose, as this article explains.
... in this article we'll just concentrate on the proper uses of floats.
... you've reached the end of this article, but can you remember the most important information?
...see the article on legacy layout methods for information on how they used to be used, which may be useful if you find yourself working on older projects.

CSS first steps - Learn web development
guides this module contains the following articles, which will take you through all the basic theory of css, and provide opportunities for you to test out some skills.
...this article explains what css is, with a simple syntax example, and also covers some key terms about the language.
... getting started with css in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way.
...this article gives you a chance to do that.

Web fonts - Learn web development
previous overview: styling text next in the first article of the module, we explored the basic css features available for styling fonts and text.
... in this article we will go further, exploring web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
... you've reached the end of this article, and already did some skill testing in our active learning sections, but can you remember the most important information going forward?
... summary now that you have worked through our articles on text styling fundamentals, it is time to test your comprehension with our assessment for the module, typesetting a community school homepage.

Styling text - Learn web development
guides this module contains the following articles, which will teach you all of the essentials behind styling html text content.
... fundamental text and font styling in this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
...this article explains all.
...we'll look at all these topics in this article.

How do I start to design my website? - Learn web development
this article covers the all-important first step of every project: define what you want to accomplish with it.
... than go through a long explanation, let's go back to our example with this table: goals things to do let people hear your music record music prepare some audio files usable online (could you do this with existing web services?) give people access to your music on some part of your website talk about your music write a few articles to start the discussion define how articles should look publish those articles on the website (how to do this?) meet other musicians provide ways for people to contact you (email?
...first, some of these items are not web-related (e.g., record music, write articles).
... from this article, you should now be able to make a rough plan for creating a website.

What are hyperlinks? - Learn web development
in this article, we'll go over what hyperlinks are and why they matter.
...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.
...the creating hyperlinks article of our introduction to html module explains how to implement links in detail.

What is a web server? - Learn web development
in this article, we explain what web servers are, how web servers work, and why they are important.
...(services range from free to thousands of dollars per month.) you can find more details in this article.
...(we'll cover that sort of technology in other articles.) http provides clear rules for how a client and server communicate.
... we'll cover http itself in a technical article later.

What software do I need to build a website? - Learn web development
in this article we lay out which software components you need when you're editing, uploading, or viewing a website.
...we'll provide a few links in this article.
... uploading files to a web server is a very important step while creating a website, so we cover it in detail in a separate article.
... if you'd like to learn more about text editors, read our article about how to choose and install a text editor.

Client-side form validation - Learn web development
this article leads you through basic concepts and examples of client-side form validation.
... regexs are quite complex, and we don't intend to teach you them exhaustively in this article.
...if you want to dig into form validation ui requirements, here are some useful articles you should read: smashingmagazine: form-field validation: the errors-only approach smashingmagazine: web form validation: best practices and tutorials six revision: best practices for hints and validation in web forms a list apart: inline validation in web forms an example that doesn't use the constraint validation api in order to illustrate this, the following is a simplified v...
... you've reached the end of this article, but can you remember the most important information?

HTML forms in legacy browsers - Learn web development
the webkit blog and planet webkit aggregate the best articles by webkit core developers.
...as you can see from the complexity of the property compatibility table for form widgets article, it's very difficult.
...there are many techniques to handle these issue; however mastering all of them is beyond the scope of this article.
... if you read all the articles of this html forms guide, you should now be at ease with using forms.

JavaScript basics - Learn web development
this article helps you get started with javascript and furthers your understanding of what is possible.
... it's outside the scope of this article—as a light introduction to javascript—to present the details of how the core javascript language is different from the tools listed above.
... important: in this article, try entering the example code lines into your javascript console to see what happens.
... conclusion if you have followed all the instructions in this article, you should end up with a page that looks something like the image below.

Advanced text formatting - Learn web development
previous overview: introduction to html next there are many other elements in html for formatting text, which we didn't get to in the html text fundamentals article.
... the elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means).
... you've reached the end of this article, but can you remember the most important information?
...to find way more html elements, you can take a look at our html element reference (the inline text semantics section would be a great place to start.) in the next article we will look at the html elements you'd use to structure the different parts of an html document.

What’s in the head? Metadata in HTML - Learn web development
it contains information such as the page <title>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup.
... let's revisit the simple html document we covered in the previous article: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <p>this is my page</p> </body> </html> the html head is the contents of the <head> element — unlike the contents of the <body> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page.
...of course, the other stuff we are talking about in this article could also be thought of as metadata too.
...in the next article we'll be looking at html text fundamentals.

Images in HTML - Learn web development
in this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images.
... it is better to include such supporting information in the main article text, rather than attached to the image.
... you've reached the end of this article, but can you remember the most important information?
...in the next article we'll move it up a gear, looking at how to use html to embed video and audio in web pages.

Introducing asynchronous JavaScript - Learn web development
previous overview: asynchronous next in this article we briefly recap the problems associated with synchronous javascript, and take a first look at some of the different asynchronous techniques you'll encounter, showing how they can help us solve such problems.
...this section recaps some of the information we saw in the previous article.
...this is because as we said in the previous article, javascript is single threaded.
...let's look at a quick example, from our fetching data from the server article: fetch('products.json').then(function(response) { return response.json(); }).then(function(json) { products = json; initialize(); }).catch(function(err) { console.log('fetch problem: ' + err.message); }); note: you can find the finished version on github (see the source here, and also see it running live).

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
(in other words, when the stack is empty.) you will learn more on this matter as you progress through this article.
... this was a problem, for example, in the monkey island-inspired walking animation from our drawing graphics article: in this example, you have to animate both the position of the character on the screen, and the sprite being shown.
... active learning: a reaction game for the final section of this article, you'll create a 2-player reaction game.
... conclusion so that's it — all the essentials of async loops and intervals covered in one article.

Introduction to events - Learn web development
in this article, we discuss some important concepts surrounding events, and look at how they work in browsers.
...these are a little out of scope for this article, but if you want to read them, visit the addeventlistener() and removeeventlistener() reference pages.
... you've reached the end of this article, but can you remember the most important information?
... if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

Function return values - Learn web development
let's return to a familiar example (from a previous article in this series): let mytext = 'the weather is cold'; let newstring = mytext.replace('cold', 'warm'); console.log(newstring); // should print "the weather is warm" // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with the replacement made the replace() function is invoked on the mytext string, and is passed two parameters: th...
...(in these cases, our reference pages list the return value as void or undefined.) for example, in the displaymessage() function we built in the previous article, no specific value is returned when the function is invoked.
... you've reached the end of this article, but can you remember the most important information?
... if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

Making decisions in your code — conditionals - Learn web development
in this article, we'll explore how so-called conditional statements work in javascript.
...we first looked at comparison operators back in our basic math in javascript — numbers and operators article.
... you've reached the end of this article, but can you remember the most important information?
...if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

JavaScript building blocks - Learn web development
in this article we'll explore how conditional structures work in javascript.
...in this article we'll explore fundamental concepts behind functions such as basic syntax, how to invoke and define functions, scope, and parameters.
... build your own function with most of the essential theory dealt with previously, this article provides a practical experience.
...in this final article we will discuss some important concepts surrounding events, and look at how they work in browsers.

Fetching data from the server - Learn web development
this seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible, such as xmlhttprequest and the fetch api.
... a more complex example to round off the article, we'll look at a slightly more complex example that shows some more interesting uses of fetch.
...we won't discuss all of it in the article, but you can find extensive comments in the code (see can-script.js).
... summary this article shows how to start working with both xhr and fetch to fetch data from the server.

Handling text — strings in JavaScript - Learn web development
in this article, we'll look at all the common things that you really ought to know about strings when learning javascript, such as creating strings, escaping quotes in strings, and joining strings together.
... you've reached the end of this article, but can you remember the most important information?
...note that this also requires knowledge from the next article, so you might want to read that first.
...in the next article, we'll build on this, looking at some of the built-in methods available to strings in javascript and how we can use them to manipulate our strings into just the form we want.

What is JavaScript? - Learn web development
in this article we will look at javascript from a high level, answering questions such as "what is it?" and "what can you do with it?", and making sure you are comfortable with javascript's purpose.
... let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our how css works article).
...you will learn ways around this later in the article, in the script loading strategies section.
...in the next article, we will plunge straight into the practical, getting you to jump straight in and build your own javascript examples.

What went wrong? Troubleshooting JavaScript - Learn web development
previous overview: first steps next when you built up the "guess the number" game in the previous article, you may have found that it didn't work.
... never fear — this article aims to save you from tearing your hair out over such problems by providing you with some tips on how to find and fix errors in javascript programs.
...we'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here.
...as you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions.

Measuring performance - Learn web development
this article introduces web perfomrance metrics that you can use to measure and optimize your site's performance.
... while this article does not dive into using these apis, it is useful to know they exist.
... you can also refer to the navigation and timings article for further examples on using performance web apis.
... conclusion this article provided a brief overview of the web performance metrics to help introduce you to what you can measure on a web app or site.

Client-Server Overview - Learn web development
add a new article to a wiki, add a new contact to a database).
... let's recap on how this works, by looking again at the static site architecture diagram we looked at in the last article.
... anatomy of a dynamic request this section provides a step-by-step overview of the "dynamic" http request and response cycle, building on what we looked at in the last article with much more detail.
...we discuss a lot more benefits and some popular web framework choices in the next article.

Server-side web frameworks - Learn web development
previous overview: first steps next the previous article showed you what the communication between web clients and servers looks like, the nature of http requests and responses, and what a server-side web application needs to do in order to respond to requests from a web browser.
... work directly with http requests and responses as we saw in the last article, web servers and browsers communicate via the http protocol — servers wait for http requests from the browser and then return information in http responses.
... summary this article has shown that web frameworks can make it easier to develop and maintain server-side code.
... for the next article in this module we'll change direction slightly and consider web security.

Website security - Learn web development
this introductory article won't make you a website security guru, but it will help you understand where threats come from, and what you can do to harden your web application against the most common attacks.
... the rest of this article gives you more details about a few common threats and some of the simple steps you can take to protect your site.
... summary this article has explained the concept of web security and some of the more common threats against which your website should attempt to protect.
... with this article, you've come to the end of this module, covering your first steps in server-side website programming.

Starting our Svelte Todo list app - Learn web development
in this article we will first have a look at the desired functionality of our app, then we'll create a todos.svelte component and put static markup and styles in place, leaving everything ready to start developing our to-do list app features, which we'll go on to in subsequent articles.
... in subsequent articles we'll get all these features working, and more besides.
...if you want to learn more about why this is necessary, you can check out scott o'hara’s article, “fixing lists”.
...px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } with our markup styled, everything now looks better: the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode.

Client-side tooling overview - Learn web development
overview: understanding client-side tools next in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
... in these articles, we won’t answer every question about web tooling, but we will provide you with a useful starting point of understanding the fundamentals, which you can then build from.
... though your choice of code editor is certainly a tooling choice, this series of articles will go beyond that, focusing on developer tools that help you produce web code more efficiently.
...this is one reason we wrote this series of articles, to hopefully provide that first step that is hard to find otherwise.

Package management basics - Learn web development
previous overview: understanding client-side tools next in this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
... a project dependency can be an entire javascript library or framework — such as react or vue — or a very small utility like our human-readable date library, or it can be a command line tool such as prettier or eslint, which we talked about in previous articles.
...as we touched on in the previous article, dependencies can be installed globally or locally to your project.
...periment, but you can call it whatever you like: mkdir parcel-experiment cd parcel-experiment next, let's initialise our app as an npm package, which creates a config file — package.json — that allows us to save our configuration details in case we want to recreate this environment later on, or even publish the package to the npm registry (although this is somewhat beyond the scope of this article).

Commenting IDL for better documentation
the documentation team has tools that convert comments from the doxygen format into the standard reference article format we use here on mdn, with certain limitations.
... this article will help you understand how you can format your comments to help ensure that the conversion process can be automated as much as possible in order to ensure that your interface gets properly documented.
... * * @note the article's name should be simply "nsicookiemonster" but is not in * order to make it more obvious this is an example.
... also, you should add the * "interfaces" tag to your article, as well as "interfaces:scriptable" if the * interface is scriptable.

Content Index API - Web APIs
examples could be a news website prefetching the latest articles in the background, or a content streaming app registering downloaded content.
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving ite...
...ait navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anc...
... async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) return; // unregister content from index await registration.index.delete(article.id); } all the above methods are available within the scope of the service worker.

WebGL model view projection - Web APIs
this article explores how to take data within a webgl project, and project it into the proper spaces to display it on the screen.
... note: this article is also available as an mdn content kit.
...ebglbox constructor the constructor looks like this: function webglbox() { // setup the canvas and webgl context this.canvas = document.getelementbyid('canvas'); this.canvas.width = window.innerwidth; this.canvas.height = window.innerheight; this.gl = mdn.createcontext(canvas); var gl = this.gl; // setup a webgl program, anything part of the mdn object is defined outside of this article this.webglprogram = mdn.createwebglprogramfromids(gl, 'vertex-shader', 'fragment-shader'); gl.useprogram(this.webglprogram); // save the attribute and uniform locations this.positionlocation = gl.getattriblocation(this.webglprogram, 'position'); this.colorlocation = gl.getuniformlocation(this.webglprogram, 'color'); // tell webgl to test the depth when drawing, so if a square is beh...
...more on that in the relevant wikipedia articles: cartesian coordinate system, right-hand rule.

Starting up and shutting down a WebXR session - Web APIs
you will learn how to do these things in this article.
... emulator issues and notes while this isn't the place for a full article about the extension, there are some specific things worth mentioning.
... for more specifics about securing webxr actitvities and usage, see the article permissions and security for webxr.
...to learn more about rendering, see the article rendering and the webxr frame animation callback.

Accessibility: What users can do to browse more safely - Accessibility
this article discusses making web content accessible for those with vestibular disorders, and those who support them, by taking advantage of personalization and accessibility settings built into the operating systems.
... personalization and accessibility settings from the article, "understanding success criterion 2.3.1: three flashes or below threshold" "flashing can be caused by the display, the computer rendering the image or by the content being rendered.
...examples include: transitionrun transitionstart transitionend transitioncancel edge 75 and above (desktop, in windows 10) according to eric bailey, in his april 30, 2019 article revisiting prefers-reduced-motion, the reduced motion media query, "while microsoft edge does not have support for prefers-reduced-motion, it will become chrome under the hood soon." safari 10.1 and above (desktop) do not enable auto-play (does not work for gifs) ios safari 10.3 and above (mobile and tablet) select the "reduce motion option" in os accessibility settings for apple (image sour...
...ce: developers.google.com from thomas steiner's article "move ya!

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen less that 500 pixels wide.
... we go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p> </article> <aside class="side">sidebar</aside> <div class="ad">advertising</div> <footer class="main-footer">the footer</footer> </div> as we are using grid-template-areas to create the layout.
...; } nav ul { list-style: none; margin: 0; padding: 0; } <div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"><h1>main article area</h1> <p>in this layout, we display the areas in source order for any screen less that 500 pixels wide.
... we go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article> <aside class="side">sidebar</aside> <div class="ad">advertising</div> <footer class="main-footer">the footer</footer> </div> i can then set up our grid, as for the example 12-column layout above.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
this article is a primer introducing each of the ways css color can be used in html.
...see box properties in the box model to learn about the relationship between elements and their borders, and the article styling borders using css to learn more about applying styles to borders.
... color theory resources a full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities.
... for more information about color blindness, see the following articles: medline plus: color blindness (united states national institute of health) american academy of ophthamology: what is color blindness?

HTML attribute: rel - HTML: Hypertext Markup Language
link link not allowed author author of the current document or article.
... and type attributes specify links to versions of the document in an alternative format and language, intended for other media: <link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="french html (for printing)"> <link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="french pdf"> author indicates the author of the current document or article.
...with <a> and <area>, it indicates the linked document (or mailto:) provides information about the author of the nearest <article> ancestor if there is one, otherwise the entire document.
... note: the obsolete rev="made" is treated as rel="alternate" bookmark relevant as the rel attribute value for the <a> and <area> elements, the bookmark provides a permalink for ancestor section, which is the nearest ancestor <article> or <section>, if there is at least one, otherwise, the nearest heading sibling or ancestor descendant, to the next..

HTML documentation index - HTML: Hypertext Markup Language
this article is a primer introducing each of the ways css color can be used in html.
...by default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." this article helps to explain what this means.
...the formats of the strings that specify these values are described in this article.
... 61 <article>: the article contents element element, html, html sections, reference, web the html <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).

Microformats - HTML: Hypertext Markup Language
example h-entry as a blog post: <article class="h-entry"> <h1 class="p-name">microformats are amazing</h1> <p>published by <a class="p-author h-card" href="http://example.com">w.
... developer</a> on <time class="dt-published" datetime="2013-06-13 12:00:00">13^th june 2013</time></p> <p class="p-summary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> properties property description p-name entry name/title p-author who wrote the entry, optionally embedded h-card dt-published when the entry was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/fil...
...com/profile/jgmac1106" ] }, "lang": "en", "value": "greg mcverry" } ] }, "lang": "en" } h-feed the h-feed is a stream or feed of h-entry posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts example h-feed <div class="h-feed"> <h1 class="p-name">microformats blogs</h1> <article class="h-entry"> <h2 class="p-name">microformats are amazing</h2> <p>published by <a class="p-author h-card" href="http://example.com">w.
... developer</a> on <time class="dt-published" datetime="2013-06-13 12:00:00">13^th june 2013</time> </p> <p class="p-summary">in which i extoll the virtues of using microformats.</p> <div class="e-content"> <p>blah blah blah</p> </div> </article> </div> properties property description p-name name of the feed p-author author of the feed, optionally embed an h-card children nested h-entry objects representing the items of the feed h-event the h-event is for events on the web.

Using images in HTML - Web media technologies
references these articles cover some of the html elements and css properties that are used to control how images are displayed on the web.
... guides these articles provide guidance on selecting and configuring image types.
...additionally, this article provides guidance for selecting the best image file type for a given situation.
... learn html: responsive images in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.

Progressive loading - Progressive web apps (PWAs)
previous overview: progressive web apps in previous articles we covered apis that help us make our js13kpwa example a progressive web app: service workers, web manifests, notifications and push.
... in this article we will go even further and improve the performance of the app by progressively loading its resources.
... we render the images with a blur at the beginning, so a transition to the sharp one can be achieved: article img[data-src] { filter: blur(0.2em); } article img { filter: blur(0em); transition: filter 0.5s; } this will remove the blur effect within half a second, which looks good enough for the "loading" effect.
...and in this article, we've looked into the concept of progressive loading, including an interesting example that makes use of the intersection observer api.

Web security
the web security-oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.
...this article provides an overview of tls and the kinds of decisions you need to make when securing your content.
...this article provides some information about signature algorithms known to be weak, so you can avoid them when appropriate.
...this article describes them and offers advice on mitigating those risks.

WebAssembly Concepts - WebAssembly
this article explains the concepts behind how webassembly works including its goals, the problems it solves, and how it runs inside the web browser's rendering engine.
... for a simple guide on how to do this, see our converting webassembly text format to wasm article.
...you can get started with installing the necessary toolchain, compiling a sample rust program to a webassembly npm package, and using that in a sample web app, over at our compiling from rust to webassembly article.
... summary this article has given you an explanation of what webassembly is, why it is so useful, how it fits into the web, and how you can make use of it.

Using the WebAssembly JavaScript API - WebAssembly
this article teaches you what you’ll need to know.
... note: if you are unfamiliar with the basic concepts mentioned in this article and need more explanation, read webassembly concepts first, then come back.
... you can see multiplicity in action in our understanding text format article — see the mutating tables and dynamic linking section.
... summary this article has taken you through the basics of using the webassembly javascript api to include a webassembly module in a javascript context and make use of its functions, and how to use webassembly memory and tables in javascript.

Guides - Archive of obsolete content
this page lists more theoretical in-depth articles about the sdk.
...this article highlights the main features of that design.
... two types of scripts this article explains the differences between the apis available to your main add-on code and those available to content scripts.

Preferences - Archive of obsolete content
this article provides examples for extension developers that wish to use the mozilla preferences system.
... note: this article doesn't cover all available methods for manipulating preferences; please refer to the xpcom reference pages listed in resources section for the complete list of methods.
...similar to setting nsisupportsstring: var pls = components.classes["@mozilla.org/pref-localizedstring;1"] .createinstance(components.interfaces.nsipreflocalizedstring); pls.data = val; prefs.setcomplexvalue("preference.with.non.ascii.value", components.interfaces.nsipreflocalizedstring, pls); nsilocalfile and nsirelativefilepref please see the file io article for details on nsilocalfile and nsirelativefilepref.

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
this article is aimed at presenting alternatives to common eval uses in add-ons and other javascript code.
...how to handle this is inter-add-on specific and not addressed in this article.
... special thanks special thanks goes to wladimir palant of adblock plus, who wrote an article years back which heavily inspired this one.

Signing an XPI - Archive of obsolete content
introduction this article describes how to sign your own firefox extensions with a code-signing certificate on a windows platform.
... it was developed from the linux article so you want to sign your xpi package?
... this article is a mirror of the original, with minor reformatting, some new info and all links updated in march 2010.

Firefox addons developer guide - Archive of obsolete content
instead of using footnotes, we should inline these notes into the body of the article.
... if you prefer, you can just link to the articles directly.
... these articles are all tagged as covering firefox 3.1 using the fx_minversion_header template, but i don't think that's the case.

Add-ons - Archive of obsolete content
extension etiquette this article describes best practices when making extensions, including how to be kind to your users.
...this article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of firefox itself.
... setting up an extension development environment this article provides suggestions for how to set up your mozilla application for extension development.

JXON - Archive of obsolete content
in this article we will show how to convert a parsed xml document (i.e.
...it could be useful to read the xml introduction article first.
...e> <size description="medium"> <color_swatch image="black_cardigan.jpg">black</color_swatch> </size> </catalog_item> </product> <script type="text/javascript"><![cdata[function matchwo(a,b) { if (a < b && a < 0) { return 1; } else { return 0; } }]]></script> </catalog> first, create a dom tree like the previous example as described in the how to create a dom tree article.

Bookmark Keywords - Archive of obsolete content
thus we could type any of the following into the address bar and get back useful results: <tt>google geitost</tt> <tt>google mozilla keyword bookmark</tt> <tt>google bookmark site:developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples.
... acknowledgements thanks to asa dotzler and his article how cool are custom keywords?, which provided the inspiration to write this article.
... note: this reprinted article was originally part of the devedge site.

RDF Datasource How-To - Archive of obsolete content
this article is at least partially outdated.
...the xpcom registration parts and the "as of this writing, it is not currently possible to implement javascript xpcom components" comment seem outdated didn't check the whole article.
...the "rdf universe" consists of a set of statements about internet resources; for example, "my home page was last modified april 2nd", or "that news article was sent by bob".

Using XPInstall to Install Plugins - Archive of obsolete content
this article presents a guideline for improving the plugin installation experience for netscape gecko browsers using xpinstall.
...this article is about how you can use xpinstall to install plugins to the browsers that support xpinstall.
...this article focuses on how to install plugins.

Learn XPI Installer Scripting by Example - Archive of obsolete content
this article uses the installer script from browser.xpi install package as the basis for discussing xpi installations in general.
...in this article, we use the unix install file, but the installers for all the platforms are quite similar, and you can easily take what you learn here and apply it to installations on any platform that mozilla supports.
...that installer script , usually named install.js, is the subject of this article.

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
this article explains how to add a toolbar button to a toolkit application (such as firefox, thunderbird, or kompozer) using overlays.
...although the article covers creating an entire toolbar, rather than just a button, it has a great explanation of the techniques we'll use here.
...extensions for firefox/thunderbird 1.5 and above should instead use something like this in their chrome.manifest: skin myextension classic/1.0 chrome/skin/ style chrome://global/content/customizetoolbar.xul chrome://myextension/skin/toolbar-button.css ia take note of the packaging section in this article; you may need to include .jar references if you are delivering your extension as an .xpi file.

Atomic RSS - Archive of obsolete content
"getting started" box, if there is no "getting started" article yet written, should be populated with another feature article or tutorial, should one exist.
... documentation selected articles atomic rss tim bray talks about using atom 1.0 as a micro format and extension module for rss 2.0; keeping rss 2.0 as your sydication format but bringing in and using selected atom 1.0 elements.
... references atomic rss element list examples none available at this time community none available at this time tools none available at this time other resources tim bray's atom rss article rss, atom, rdf, xml ...

Web Standards - Archive of obsolete content
this article covers common issues associated with migrating applications to the open source mozilla-based browser.
... using web standards in your web pages this article provides an overview of the process for upgrading the content of your web pages to conform to the w3c web standards.
... the business benefits of web standards this article discusses how adhering to web standards, and leaving behind proprietary markup and technologies, can contribute to a company's business goals.

Windows Media in Netscape - Archive of obsolete content
this article explains how to embed the windows media player activex control in web pages to support netscape 7.1, how to control the windows media player activex control using javascript and provides working examples.
... this article deals uniquely with netscape 7.1 running on the windows operating system.
...examples in this article all assume that the user is running windows media player 7 and later, although netscape 7.1 supports the clsids of windows media player 6x and later.

Examples - Game development
volumetric particle flow physics simulation of flowing liquid.
... explosion and chain reaction exploding particles that set off other explosions.
... rainbow firestorm rainbow-coloured particles, falling like rain, bouncing around on a terrain of orbs.

Game distribution - Game development
this article covers all you need to know about the ways in which you can distribute your newly created game into the wild.
...publishers will be explained in more detail in the monetization article.
... if you're looking for more information about the different types of app stores you can check the list of mobile software distribution platforms article on wikipedia.

3D collision detection - Game development
this article provides an introduction to the different bounding volume techniques used to implement collision detection in 3d environments.
... followup articles will cover implementations in specific 3d libraries.
... note: check out the bounding volumes with three.js article to see a practical implementation of this technique.

WebRTC data channels - Game development
this article explains more about this, and shows you how to use libraries to implement data channels in your game.
...this article, however, will take advantage of some libraries that can help trivialize the work, and will demonstrate ways to use abstraction to work around implementation differences between browsers.
... original document information author(s): alan kligman source article: webrtc data channels for great multiplayer other contributors: robert nyman copyright information: alan kligman, 2013 ...

Move the ball - Game development
you already know how to draw a ball from working through the previous article, so now let's make it move.
... cleaning up our code we will be adding more and more commands to the draw() function in the next few articles, so it's good to keep it as simple and clean as possible.
...replace the existing draw() function with the following two functions: function drawball() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawball(); x += dx; y += dy; } compare your code you can check the finished code for this article for yourself in the live demo below, and play with it to understand better how it works: exercise: try changing the speed of the moving ball, or the direction it moves in.

Assessment: Accessibility troubleshooting - Learn web development
prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course.
... project brief for this project, you are presented with a fictional nature site displaying a "factual" article about bears.
... can you update the article text to make it easier for screenreader users to navigate?

Cascade and inheritance - Learn web development
we have covered a lot in this article, but can you remember the most important information?
... what's next if you understood most of this article, then well done — you've started getting familiar with the fundamental mechanics of css.
...we'd advise that you return to this article a few times as you continue through the course, and keep thinking about it.

Debugging CSS - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you to find out what is going on.
... how to access browser devtools the article what are browser developer tools is an up-to-date guide explaining how to access the tools in various browsers and platforms.
...load this up in a new tab if you want to follow along, and open up your devtools as described in the article linked above.

Combinators - Learn web development
body article p in the example below, we are matching only the <p> element which is inside an element with a class of .box.
...for example, to select only <p> elements that are direct children of <article> elements: article > p in this next example, we have an unordered list, nested inside of which is an ordered list.
... we have covered a lot in this article, but can you remember the most important information?

Type, class, and ID selectors - Learn web development
for example, if i wanted to select the first child of any descendant element of <article> , no matter what element it was, and make it bold, i could use the :first-child selector, which we will learn more about in the lesson on pseudo-classes and pseudo-elements, as a descendant selector along with the <article> element selector: article :first-child { } this could be confused however with article:first-child, which will select any <article> element that is the first child of ano...
...it is selecting any element which is the first-child of any descendant element of <article>: article *:first-child { } although both do the same thing, the readability is significantly improved.
... in the next article we'll continue exploring selectors by looking at attribute selectors.

Styling tables - Learn web development
this article provides a guide to making html tables look good, with some specific table styling techniques highlighted.
... we have covered a lot in this article, but can you remember the most important information?
...the next article explores debugging css — how to solve problems such as layouts not looking like they should, or properties not applying when you think they should.

Legacy layout methods - Learn web development
in this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.
...in this example case we've chosen <div>s, but you could choose something more semantically appropriate like <article>s, <section>s, and <aside>, or whatever.
... if you read our previous article about flexbox, you might think that flexbox is the ideal solution for creating a grid system.

Getting started with CSS - Learn web development
previous overview: first steps next in this article we will take a simple html document and apply css to it, learning some practical things about the language along the way.
...we will be taking a proper look at all of these selectors and many more in our selectors articles later on in the course.
...for example: /* selects any <span> that is inside a <p>, which is inside an <article> */ article p span { ...

Styling lists - Learn web development
this article explains all.
...throughout this article, we'll look at unordered, ordered, and description lists — all have styling features that are similar, and some that are particular to their type of list.
...you are better off using the background family of properties, which you've learned in the backgrounds and borders article.

How does the Internet work? - Learn web development
this article discusses what the internet is and how it works.
... prerequisites: none, but we encourage you to read the article on setting project goals first objective: you will learn the basics of the technical infrastructure of the web and the difference between internet and the web.
... note: for the rest of this article, we will only talk about physical cables, but wireless networks work the same.

How do you upload your files to a web server? - Learn web development
this article shows you how to publish your site online using file transfer tools.
...in this article we'll discuss how to do that, using various available options such as sftp clients, rsync and github.
... we've covered the basics of using this in the publishing your website article from our getting started with the web guide, so we aren't going to repeat it all here.

What is accessibility? - Learn web development
this article introduces the basic concepts behind web accessibility.
...in this article we give general accessibility principles and explain a few rules.
... 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.

How to build custom form controls - Learn web development
in this article, we will discuss how to build a custom control.
... note: we'll focus on building the control, not on how to make the code generic and reusable; that would involve some non-trival javascript code and dom manipulation in an unknown context, and that is out of the scope of this article.
...the following is just an example of what is possible, and will match the screenshot at the beginning of this article.

Sending forms through JavaScript - Learn web development
this article explores such approaches.
... gaining control of the global interface standard html form submission, as described in the previous article, loads the url where the data was sent, which means the browser window navigates with a full page load.
...most of the xhr code you'll see in this article could be swapped out for fetch.

HTML basics - Learn web development
as the title suggests, this article will give you a basic understanding of html and its functions.
...let's revisit the code we put into our index.html example (which we first met in the dealing with files article): <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="images/firefox-icon.png" alt="my test image"> </body> </html> here, we have the following: <!doctype html> — the doctype.
... conclusion if you have followed all the instructions in this article, you should end up with a page that looks like the one below (you can also view it here): if you get stuck, you can always compare your work with our finished example code on github.

Use JavaScript within a webpage - Learn web development
learn in this article how to trigger javascript right from your html documents.
... in this article we're going over the html code you need to make javascript take effect.
... if you want to learn javascript itself, you can start with our javascript basics article.

Creating hyperlinks - Learn web development
this article shows the syntax required to make a link, and discusses link best practices.
... <a href="https://www.mozilla.org/"> <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> </a> note: you'll find out more about using images on the web in a future article.
... you've reached the end of this article, but can you remember the most important information?

Responsive images - Learn web development
previous overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools html provides to help implement them.
... note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images?
... you've reached the end of this article, but can you remember the most important information?

General asynchronous programming concepts - Learn web development
overview: asynchronous next in this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and javascript.
... you should understand these concepts before working through the other articles in the module.
... we'll start to look at how we can write asynchronous code in the next article.

Drawing graphics - Learn web development
this article provides an introduction to canvas, and further resources to allow you to learn more.
...webgl allows you to create real 3d graphics inside your web browser; the below example shows a simple rotating webgl cube: this article will focus mainly on 2d canvas, as raw webgl code is very complex.
... in this case we want a 2d canvas, so add the following javascript line below the others inside the <script> element: const ctx = canvas.getcontext('2d'); note: other context values you could choose include webgl for webgl, webgl2 for webgl 2, etc., but we won't need those in this article.

Manipulating documents - Learn web development
in this article we'll look at how to use the dom in detail, along with some other interesting apis that can alter your environment in interesting ways.
... in this article we'll focus mostly on manipulating the document, but we'll show a few other useful bits besides.
... active learning: a dynamic shopping list to round off the article, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form input and button.

Video and Audio APIs - Learn web development
this article shows you how to do common tasks such as creating custom playback controls.
...here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls.
... summary i think we've taught you enough in this article.

Useful string methods - Learn web development
you don't need to understand arrays or loops right now — these will be explained in future articles.
... you've reached the end of this article, but can you remember the most important information?
...this article has given you the basics that you need to know about manipulating strings for now.

Adding features to our bouncing balls demo - Learn web development
previous overview: objects in this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it.
... prerequisites: before attempting this assessment you should have already worked through all the articles in this module.
... objective: to test comprehension of javascript objects and object-oriented constructs starting point to get this assessment started, make a local copy of index-finished.html, style.css, and main-finished.js from our last article in a new directory in your local computer.

Introduction to client-side frameworks - Learn web development
in an article for smashing magazine, sarah drasner writes about how vue can replace jquery as a tool for making small portions of a webpage interactive.
...in the first article of the series, she explains what a static site generator is, and how it relates to other means of publishing web content.
... our next article goes down to a lower level, looking at the specific kinds of features frameworks tend to offer, and why they work like they do.

React interactivity: Events and state - Learn web development
in this article we'll do this, digging into events and state along the way, and ending up with an app in which we can successfully add and delete tasks, and toggle tasks as completed.
... summary that's enough for one article.
...in the next article we'll implement functionality to edit existing tasks and filter the list of tasks between all, completed, and incomplete tasks.

Using Vue computed properties - Learn web development
previous overview: client-side javascript frameworks next in this article we'll add a counter that displays the number of completed todo items, using a feature of vue called computed properties.
... summary in this article we've used a computed property to add a nice little feature to our app.
... we do however have bigger fish to fry — in the next article we will look at conditional rendering, and how we can use it to show an edit form when we want to edit existing todo items.

Rendering a list of Vue components - Learn web development
we could use lodash.uniqueid(), however, like we did in the previous article.
... summary and that brings us to the end of another article.
...we'll get to these in the next article.

Implementing feature detection - Learn web development
this article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports.
... save it somewhere sensible, like the directory you've been creating your other examples for in this article.
... summary this article covered feature detection in a reasonable amount of detail, going through the main concepts and showing you how to both implement your own feature detection tests and use the modernizr library to implement tests more easily.

Setting up your own test automation environment - Learn web development
previous overview: cross browser testing in this article, we will teach you how to install your own automation environment and run your own tests using selenium/webdriver and a testing library such as selenium-webdriver for node.
... we will also look at how to integrate your local testing environment with commercial tools like the ones discussed in the previous article.
... it is out of scope to look at this area in detail in this article, but we'd suggest getting started with travis ci — this is probably the easiest ci tool to get started with and has good integration with web tools like github and node.

Accessibility and Mozilla
these articles provide mozilla-specific details about accessibility.
...in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users.
...this article reviews the progress and technology as it has developed.zoomtextwe've made a lot of progress with mozilla/zoomtext compatibility.

Following the Android Toasts Tutorial from a JNI Perspective
this article is a work in progress and is based on githubgist :: _ff-addon-tutorial-jniandroidtoast.js this article will follow the android developers :: api guides - toasts tutorial.
...this article teaches developers how to port java code to jni by reading the java and android documentation.
...= toast.length_short; var duration = toast.length_short; // toast toast = toast.maketext(context, text, duration); var toast = toast.maketext(context, text, duration); // toast.show(); toast.show(); } finally { if (my_jenv) { jni.unloadclasses(my_jenv); } } references oracle :: jni types and data structures and determine the signature of a method - these articles are crucial because it tells us how to create our jni signatures.

Mozilla Content Localized in Your Language
prepositions and articles what is the appropriate form of expressing prepositions and articles in your language?
... articles -- avoid them articles (such as the word "the" in english) should be avoided wherever possible.
...avoiding articles will help ensure that your translations will be accommodated within the user interface.

64-bit Compatibility
this article focuses on hacking tracemonkey code generation (jstracer.cpp, jsregex.cpp) in ways that will work on both 32-bit and 64-bit jit backends.
...for more information and platform specific details on virtual address widths, see this article on wikipedia.
...to avoid equivocating, the rest of this article will use the term "native integers".

Exploitable crashes
this article will help you determine if a crash is exploitable, find crashes which are exploitable, and to fix exploitable crashes.
...there is an mdn article documenting its use with mozilla projects.
...there is an mdn article documenting its use with mozilla projects.

Browser security
these articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines.
...this article provides an overview of what these are and how they work.exploitable crashesthis article will help you determine if a crash is exploitable, find crashes which are exploitable, and to fix exploitable crashes.handling mozilla security bugsthis document describes how the new security organizational structure will work, and how security-related mozilla bug reports will be handled.pinning violation reportsif a site makes use of key pinning, and your browser sees a certificate chain for that site which does not match the pin, firefox will reject the connection and display an error page.
... secure development guidelinesthe following content will likely see significant revision, though can be used as a reference for security best practices to follow when developing code for mozilla.security and the jar protocolthis article discusses security concerns with the jar: protocol, which only firefox has ever implemented for web content.

MailNews fakeserver
there are added in alphabetical order, which may help for purposes that rely on article key orders.
...the following comprises the api of the news fakeserver itself: nntpdaemon api name arguments returns notes [constructor] daemon flags n/a flags are defined below addgroup group name (string), is postable nothing adds the group (resetting if it exists) addarticle newsarticle object nothing adds the message to all groups in the article's group list addarticletogroup newsarticle object, group (string), integral key for group nothing adds the message to the specified group with the specified key getgroup group name group object group is a map key->article, with the additional properties: flags, keys (array of keys), nextkey (next key to use for new articles) getgroupstats group name array of [size, min, max] the size is an estimate if nntp_real_l...
... getarticle message id newsarticle object pretty self-explanatory newsarticle api name arguments returns notes [constructor] text (as a string) n/a initializes all fields headers (property) map of header (lower-case) -> value body (property) text of body messageid (property) message id fulltext (property) full text as message without modification except added headers.

Using js-ctypes
note: this information comes from this article on msdn.
...instantiating c data objects and referencing them is covered in the article working with data.
...we see that it needs to be defined like this: int winapi messagebox( _in_opt_ hwnd hwnd, _in_opt_ lpctstr lptext, _in_opt_ lpctstr lpcaption, _in_ uint utype ); so we read this article here on defining types and replicate it: declaring types var lib = ctypes.open("user32.dll"); or even without the extension.

URLs - Plugins
news (usenet news) locates usenet news groups or individual usenet articles.
... nntp (usenet news using nntp access) locates usenet news groups or individual usenet articles; alternate to news.
... possible url types include http (similar to an html form submission), mailto (sending mail), news (posting a news article), and ftp (uploading a file).

UI Tour - Firefox Developer Tools
this article is a quick tour of the main sections of the page inspector's user interface.
... click the name of the property to open the reference article for that property on mdn web docs.
... the "browser compatibility" section of the article gives details of browser support for the property.

Body.text() - Web APIs
example in our fetch text example (run fetch text live), we have an <article> element and three links (stored in the mylinks array.) first, we loop through all of these and give each one an onclick event handler so that the getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is clicked.
...when the fetch is successful, we read a usvstring (text) object out of the response using text(), then set the innerhtml of the <article> element equal to the text object.
... let myarticle = document.queryselector('article'); let mylinks = document.queryselectorall('ul a'); for(let i = 0; i <= mylinks.length-1; i++) { mylinks[i].onclick = function(e) { e.preventdefault(); let linkdata = e.target.getattribute('data-page'); getdata(linkdata); } }; function getdata(pageid) { console.log(pageid); var myrequest = new request(pageid + '.txt'); fetch(myrequest).then(function(response) { return response.text().then(function(text) { myarticle.innerhtml = text; }); }); } specifications specification status comment fetchthe definition of 'text()' in that specification.

ContentIndex.add() - Web APIs
homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } the add method...
... // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; self.registration.index.add(item); specifications specification status comment unknownthe definition of 'add' in that specification.

ContentIndex - Web APIs
// our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; // our asynchronous function to add indexed content async function registercontent(data) { const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } retrieving ite...
...ait navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anc...
... async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registration.index) return; // unregister content from index await registration.index.delete(article.id); } all the above methods are available within the scope of the service worker.

HTMLImageElement.sizes - Web APIs
html <article> <h1>an amazing headline</h1> <div class="test"></div> <p>this is even more amazing content text.
...i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #880e4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code hand...
... let image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here.

The HTML DOM API - Web APIs
html dom concepts and usage in this article, we'll focus on the parts of the html dom that involve engaging with html elements.
... these element-specific interfaces make up the majority of the html dom api, and are the focus of this article.
... javascript const namefield = document.getelementbyid("username"); const sendbutton = document.getelementbyid("sendbutton") sendbutton.disabled = true; // [note: this is disabled since it causes this article to always load with this example focused and scrolled into view] //namefield.focus(); namefield.addeventlistener("input", event => { const elem = event.target; const valid = elem.value.length != 0; if (valid && sendbutton.disabled) { sendbutton.disabled = false; } else if (!valid && !sendbutton.disabled) { sendbutton.disabled = true; } }); this code uses the document interfac...

LocalFileSystem - Web APIs
(to learn more about the storage types, see the basic concepts article.) in most cases, you need to create only one file system, but in a few cases, it might be useful to create a second one.
...for more information about restrictions, see the basic concepts article.
...for more details, see the article on basic concepts.

Media Capture and Streams API (Media Stream) - Web APIs
interfaces in these reference articles, you'll find the fundamental information you'll need to know about each of the interfaces that make up the media capture and streams api.
... events addtrack ended muted overconstrained removetrack started unmuted guides and tutorials the articles below provide additional guidance and how-to information that will help you learn to use the api, and how to perform specific tasks that you may wish to handle.
...this article discusses capabilities and constraints, as well as media settings, and includes an example we call the constraint exerciser.

Web Push API Notifications best practices - Web APIs
this article provides a useful summary of best practices to keep in mind when developing web sites and applications that use push notifications for user engagement.
...searching the web for "web push notifications," you'll find articles from marketing experts who believe you should use push to re-engage people who have left your site so they can complete a purchase, or be sent the latest news, or receive links to recommended products.
...for example, if the user views more than one article, or lingers on your page for several minutes, they may be interested in receiving updates.

Using writable streams - Web APIs
this article explains the streams api’s writable stream functionality.
... note: this article assumes that you understand the use cases of writable streams, and are aware of the high-level concepts.
... if not, we suggest that you first read the streams concepts and usage overview and dedicated streams api concepts article, then come back.

Getting started with WebGL - Web APIs
this article will introduce you to the basics of using webgl.
... it's assumed that you already have an understanding of the mathematics involved in 3d graphics, and this article doesn't pretend to try to teach you 3d graphics concepts itself.
... it's worth noting here that this series of articles introduces webgl itself; however, there are a number of frameworks available that encapsulate webgl's capabilities, making it easier to build 3d applications and games, such as three.js and babylon.js.

Lighting in WebGL - Web APIs
fortunately, it's not all that hard to do, and this article will cover some of the basics.
... simulating lighting and shading in 3d although going into detail about the theory behind simulated lighting in 3d graphics is far beyond the scope of this article, it's helpful to know a bit about how it works.
... instead of discussing it in depth here, take a look at the article on phong shading at wikipedia, which provides a good overview of the most commonly used lighting model or if you'd like to see a webgl based explanation see this artcle.

WebRTC API - Web APIs
guides introduction to webrtc protocols this article introduces the protocols on top of which the webrtc api is built.
...in this article, we'll look at the lifetime of a webrtc session, from establishing the connection all the way through closing the connection when it's no longer needed.
... taking still photos with webrtc this article shows how to use webrtc to access the camera on a computer or mobile phone with webrtc support and take a photo with it.

Lighting a WebXR setting - Web APIs
and while this article provides brief reminders as to how lighting works in general, it is not by any means a tutorial in lighting or a guide to how to create a properly-lit 3d scene.
... flashback: simulating lighting in 3d although this article isn't a comprehensive guide to lighting a 3d scene, it's useful to provide a brief reminder as to how lighting works in general.
... you can learn more about how to perform lighting in webgl in the article lighting in webgl.

Advanced techniques: Creating and sequencing audio - Web APIs
note: this is a much stripped down version of chris wilson's a tale of two clocks article, which goes into this method in much more detail.
... there's no point repeating it all here, but it's highly recommended to read this article and use this method.
... much of the code here is taken from his metronome example, which he references in said article.

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.
... note: for more information, see our visualizations with web audio api article.
... note: for more information, see our web audio spatialization basics article.

Background audio processing using AudioWorklet - Web APIs
the process of creating an audio processor using javascript, establishing it as an audio worklet processor, and then using that processor within a web audio application is the topic of this article.
... throughout the remainder of this article, we'll look at these steps in more detail, with examples (including working examples you can try out on your own).
... glitch project page see the code try it live creating an audio worklet processor fundamentally, an audio worklet processor (which we'll refer to usually as either an "audio processor" or simply as a "processor" because otherwise this article will be about twice as long) is implemented using a javascript module that defines and installs the custom audio processor class.

Web audio spatialization basics - Web APIs
the official term for this is spatialization, and this article will cover the basics of how to implement such a system.
...ection = this.dataset.control; if (moving && moving.frameid) { window.cancelanimationframe(moving.frameid); } moving = moveboombox(direction); }, false); window.addeventlistener('mouseup', function() { if (moving && moving.frameid) { window.cancelanimationframe(moving.frameid); } }, false) }) summary hopefully, this article has given you an insight into how web audio spatialization works, and what each of the pannernode properties do (there are quite a few of them).
...we rolled our own in this article to give you an idea of how it works, but you'll save a lot of time by taking advantage of work others have done before you.

Using Web Workers - Web APIs
this article provides a detailed introduction to using web workers.
...more advanced details are covered later on in the article.
... performing web i/o in the background you can find an example of this in the article using workers in extensions .

Using XMLHttpRequest - Web APIs
read the article about html in xmlhttprequest to learn how to do this.
...there are three primary ways to analyze and parse this raw html string: use the xmlhttprequest.responsexml property as covered in the article html in xmlhttprequest.
...*/ ifhaschanged("yourpage.html", function (nmodif, nvisit) { console.log("the page '" + this.filepath + "' has been changed on " + (new date(nmodif)).tolocalestring() + "!"); }); if you want to know if the current page has changed, please read the article about document.lastmodified.

WAI-ARIA Roles - Accessibility
this role should only be used to define very dynamic and desktop-like web applications.aria: article rolethe article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website.
... it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.aria: banner rolea banner role represents general and informative content frequently placed at the beginning of the page.
...g can be interacted with).aria: document rolegenerally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: the document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.aria: feed rolea feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls.

:is() (:matches(), :any()) - CSS: Cascading Style Sheets
since <section>, <article>, <aside>, and <nav> are commonly nested together, without :is(), styling them to match one another can be tricky.
... for example, without :is(), styling all the <h1> elements at different depths could be very complicated: /* level 0 */ h1 { font-size: 30px; } /* level 1 */ section h1, article h1, aside h1, nav h1 { font-size: 25px; } /* level 2 */ section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1 { font-size: 20px; } /* level 3 */ /* ...
...*/ using :is(), though, it's much easier: /* level 0 */ h1 { font-size: 30px; } /* level 1 */ :is(section, article, aside, nav) h1 { font-size: 25px; } /* level 2 */ :is(section, article, aside, nav) :is(section, article, aside, nav) h1 { font-size: 20px; } /* level 3 */ :is(section, article, aside, nav) :is(section, article, aside, nav) :is(section, article, aside, nav) h1 { font-size: 15px; } avoiding selector list invalidation unlike selector lists, the :is() pseudo-class doesn't get invalidated when one of the selectors passed to it isn't supported by the browser.

:where() - CSS: Cascading Style Sheets
take the following html: <article> <h2>:is()-styled links</h2> <section class="is-styling"> <p>here is my main content.
... </footer> </article> <article> <h2>:where()-styled links</h2> <section class="where-styling"> <p>here is my main content.
... </footer> </article> in this somewhat-contrived example, we have two articles that each contain a section, an aside, and a footer.

CSS Fonts - CSS: Cascading Style Sheets
ps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-variation-settings font-weight line-height at-rules @font-face font-family font-feature-settings font-style font-variant font-weight font-stretch src unicode-range @font-feature-values guides fundamental text and font styling in this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
...this article provides you with all you need to know about using opentype font features in css.
...this article will give you all you need to know to get you started using variable fonts.

Basic Concepts of grid layout - CSS: Cascading Style Sheets
this article introduces the css grid layout and the new terminology that is part of the css grid layout level 1 specification.
... positioning items against lines we will be exploring line based placement in full detail in a later article.
...x2">two</div> <div class="box box3">three</div> <div class="box box4">four</div> <div class="box box5">five</div> </div> * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .box { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } next steps in this article we have had a very quick look through the grid layout specification.

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
in the article covering the basic concepts of grid layout, we started to look at how to position items on a grid using line numbers.
... in this article we will fully explore how this fundamental feature of the specification works.
...we will explore how grids work with writing modes in a later article however we have the concept of four flow-relative directions: block-start block-end inline-start inline-end we are working in english, a left-to-right language.

Consistent list indentation - CSS: Cascading Style Sheets
for example, if you declare that lists have no left margin, they move over in internet explorer, but sit stubbornly in place in gecko-based browsers.this article will help you understand the problems that can occur and how to avoid them.
... conclusion in the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists.
... note: this reprinted article was originally part of the devedge site.

break-inside - CSS: Cascading Style Sheets
html <article> <h1>main heading</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } body { width: 80%; margin: 0 auto; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: ...
...0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-inside' in that specification.

column-span - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toin-flow block-level elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | all examples making a heading span columns in this example, the heading is made to span across all the columns of the article.
... html <article> <h2>header spanning all of the columns</h2> <p> the h2 should span all the columns.
...the text is equally distributed over the columns.</p> </article> css article { columns: 3; } h2 { column-span: all; } result specifications specification status comment css multi-column layout modulethe definition of 'column-span' in that specification.

contain - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | strict | content | [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border: 3px solid black; } article { border: 1...
...px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a ...
...value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; contain: content; } this also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds: specifications specification status comment css containment module level 1t...

display - CSS: Cascading Style Sheets
.container { display: inline-flex; } for more information on these changes to the specification, see the article adapting to the new two-value syntax of display.
... html <article class="container"> <span>first</span> <span>second</span> <span>third</span> </article> <article class="container"> <span>first</span> <span>second</span> <span>third</span> </article> <div> <label for="display">choose a display value:</label> <select id="display"> <option selected>block</option> <option>inline</option> <option>inline-block</option> <option>none<...
.../option> <option>flex</option> <option>inline-flex</option> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px; } article { background-color: red; } article span { background-color: black; color: white; margin: 1px; } article, span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = select.value; }); } select.addeventlistener('change', updatedisplay); updatedis...

Event developer guide - Developer guides
docs creating and triggering eventsthis article demonstrates how to create and dispatch dom events.
...this article provides details about the coordinate systems at play and how you use them.overview of events and handlersevents and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the browser is r...
...you should instead use the standard touch events api, supported since gecko/firefox 6 with multi-touch support added in gecko/firefox 12.using device orientation with 3d transformsthis article provides tips on how to use device orientation information in tandem with css 3d transforms.

Content categories - Developer guides
note: a more detailed discussion of these content categories and their comparative functionalities is beyond the scope of this article; for that, you may wish to read the relevant portions of the html specification.
...they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>...
... elements belonging to this category are <article>, <aside>, <nav> and <section>.

A hybrid approach - Developer guides
this article presents one potential combination of techniques as an example here, but different combinations will be appropriate under different circumstances.
... approaches to mobile web development see the following articles for background and other approaches to developing for mobile platforms.
... separate sites responsive design original document information this article was originally published on 27 june 2011, on the mozilla webdev blog as "approaches to mobile web development part 4 – a hybrid approach", by jason grlicky.

<address>: The Contact Address element - HTML: Hypertext Markup Language
<address> can be used in a variety of contexts, such as providing a business's contact information in the page header, or indicating the author of an article by including an <address> element within the <article>.
... permitted content flow content, but with no nested <address> element, no heading content (<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), no sectioning content (<article>, <aside>, <section>, <nav>), and no <header> or <footer> element.
... examples this example demonstrates the use of <address> to demarcate the contact information for an article's author.

<aside>: The Aside element - HTML: Hypertext Markup Language
examples using <aside> this example uses <aside> to mark up a paragraph in an article.
... the paragraph is only indirectly related to the main article content: <article> <p> the disney movie <cite>the little mermaid</cite> was first released to theatres in 1989.
... </p> </article> specifications specification status comment html living standardthe definition of '<aside>' in that specification.

<main> - HTML: Hypertext Markup Language
example <!-- other content --> <main> <h1>apples</h1> <p>the apple is the pomaceous fruit of the apple tree.</p> <article> <h2>red delicious</h2> <p>these bright red apples are the most common found in many supermarkets.</p> <p>...
...</p> </article> <article> <h2>granny smith</h2> <p>these juicy, green apples make a great filling for apple pies.</p> <p>...
...</p> </article> </main> <!-- other content --> accessibility concerns landmark the <main> element behaves like a main landmark role.

HTTP Index - HTTP
18 list of default accept values accept, content negotiation, http, reference this article documents the default values for the http accept header for specific inputs and browser versions.
... 22 reason: cors disabled authentication, authentication article, cors, cross-origin, disabled, errors, http, https, messages, resource, same origin, same-origin, security, sharing, validation, secure, troubleshooting a request that needs to use cors was attempted, but cors is disabled in the user's browser.
... 45 http cookies advertising, browser, cookies, cookies article, guide, http, history, javascript, privacy, protocols, server, storage, web development, data, request, tracking an http cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser.

Regular expressions - JavaScript
characters / constructs corresponding article \, ., \cx, \d, \d, \f, \n, \r, \s, \s, \t, \v, \w, \w, \0, \xhh, \uhhhh, \uhhhhh, [\b] character classes ^, $, x(?=y), x(?!y), (?<=y)x, (?<!y)x, \b, \b assertions (x), (?:x), (?<name>x), x|y, [xyz], [^xyz], \number groups and ranges *, +, ?, x{n}, x{n,}, x{n,m} quantifiers \p{unicodeproperty}, \p{unic...
...odeproperty} unicode property escapes note: a larger cheatsheet is also available (only aggregating parts of those individual articles).
... examples note: several examples are also available in: the reference pages for exec(), test(), match(), matchall(), search(), replace(), split() this guide articles': character classes, assertions, groups and ranges, quantifiers, unicode property escapes using special characters to verify input in the following example, the user is expected to enter a phone number.

Authoring MathML - MathML
the installation is similar: copy latexmathml.js and latexmathml.standardarticle.css, add links in the header of your document and the latex content of your web page marked by the "latex" class will be automatically parsed and converted to html+mathml: <head> ...
... <script type="text/javascript" src="latexmathml.js"></script> <link rel="stylesheet" type="text/css" href="latexmathml.standardarticle.css" /> ...
... <div class="latex"> \documentclass[12pt]{article} \begin{document} \title{latexml example} \maketitle \begin{abstract} this is a sample latexml document.

Web audio codec guide - Web media technologies
in this article, we look at audio codecs used on the web to compress and decompress audio, what their capabilities and use cases are, and offer guidance when choosing audio codecs to use for your content.
... for information about the fundamental concepts behind how digital audio works, see the article digital audio concepts.
... note: compatibility information described here is generally correct as of the time this article was written; however, there may be caveats and exceptions.

Codecs used by WebRTC - Web media technologies
see this article on sumo for details.
...whichever you choose, be sure to read the information provided in this article about any particular configuration issues you may need to contend with for that codec.
...see the article handling media support issues in web content to learn more about how to offer support for your preferred codecs while still being able to fall back on browsers that don't implement that codec.

Web media technologies
this article lists the various apis with links to documentation you may find helpful in mastering them.
... references html these articles cover html features for media developers.
...this article is a guide to autoplay, with tips on when and how to use it and how to work with browsers to handle autoplay blocking gracefully.

How to make PWAs installable - Progressive web apps (PWAs)
previous overview: progressive next in the last article, we read about how the example application, js13kpwa, works offline thanks to its service worker, but we can go even further and allow users to install the web app on mobile and desktop browers that support doing so.
...this article explains how to achieve this using the web app's manifest.
... summary in this article, we learned about how we can make pwas installable with a properly-configured web manifest, and how the user can then install the pwa with the "add to home screen" feature of their browser.

Introduction to progressive web apps - Progressive web apps (PWAs)
overview: progressive web apps next this article provides an introduction to progressive web apps (pwas), discussing what they are and the advantages they offer over regular web apps.
... an example application in this series of articles we will examine the source code of a super simple website that lists information about games submitted to the a-frame category in the js13kgames 2017 competition.
...we'll be examining this code carefully over the course of this series of articles.

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
in this article, we look at how it is used in our js13kpwa example (see the source code also).
... summary in this article we took a simple look at how you can make your pwa work offline with service workers.
... service workers are also used when dealing with push notifications — this will be explained in a subsequent article.

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.
...other articles will discuss the functionality in more detail, but here we're interested in the layout.
... what's more relevant to this article is that we didn't want the brick css and javascript files being applied to the markup unless we were looking at the mobile app view.

SVG documentation index - SVG: Scalable Vector Graphics
this article lists these types along with their syntax and descriptions of what they're used for.
... 282 positions beginner, coordinate systems, coordinates, drawing, graphics, needsbeginnerupdate, svg, svg:tutorial in this article, we examine how scalable vector graphics (svg) represents the positions and sizes of objects within a drawing context, including coordinate system and what a "pixel" measurement means in a scalable context.
... 284 svg in html introduction intermediate, needsupdate, svg this article and its associated example shows how to use inline svg to provide a background picture for a form.

Transport Layer Security - Web security
this article's goal is to help you make these decisions to ensure the confidentiality and integrity communication between client and server.
...this article provides an overview of tls and the kinds of decisions you need to make when securing your content.
...the cipher names correspondence table on the mozilla opsec team's article on tls configurations lists these names as well as information about compatibility and security levels.

XML introduction - XML: Extensible Markup Language
structure of an xml document this sub-article in process writing...
... <?xml-stylesheet type="text/xsl" href="transform.xsl"?> recommendations this article is obviously only a very brief introduction to what xml is, with a few small examples and references to get you started.
... for more details about xml, you should look around on the web for more in-depth articles.

Index - XSLT: Extensible Stylesheet Language Transformations
these are the same files used in the generating html example in the xslt in netscape gecko article.
... the xml file describes an article and the xsl file formats the information for display.
... 14 an overview needshelp, needsmarkupwork, transforming_xml_with_xslt, xml, xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows.

An Overview - XSLT: Extensible Stylesheet Language Transformations
« transforming xml with xslt the extensible stylesheet language/transform is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows.
...the examples in this article all assume the use of the xsl prefix.
... to learn more about xslt and xpath, see the for further reading section at the end of this article.

port - Archive of obsolete content
this article documents the port object, which is used to communicate between a content script and the main add-on code.
... for an overview of content scripts, see the main article.

self - Archive of obsolete content
this article documents the self object that is available as a global in content scripts.
... self provides: access to the options object access to the port object access to a mostly deprecated messaging api for an overview of content scripts, see the main article.

Content Scripts - Archive of obsolete content
in many ways these are like content scripts, but they're not the focus of this article.
...see the article on cross-domain content scripts.

Content Processes - Archive of obsolete content
to understand this article, it's probably best to read it as if content and add-on processes actually exist.
...sandboxes were explained this article.

Private Properties - Archive of obsolete content
this article discusses two common techniques: one using prefixes, the other closures.
...it is possible to read this section on its own, but to fully appreciate how namespaces work, and the problem they set out to solve, it is recommended to read the entire article.

Contributor's Guide - Archive of obsolete content
to understand this article, it's probably best to read it as if content and add-on processes actually exist.
...this article discusses two common techniques: one using prefixes, the other closures.

Using third-party modules (jpm) - Archive of obsolete content
this article describes how you can use third-party modules with jpm.
... this article explains how to use npm-hosted third-party sdk modules with jpm.

File I/O - Archive of obsolete content
use of os.file is preferred over the examples in this article.
... this article describes local file input/output in chrome javascript.

Deploying a Plugin as an Extension - Archive of obsolete content
in this article, we will create an extension for the rhapsody player engine.
...you'll notice that one thing we did not do is provide a mechanism for updating the plugin, as discussed at the beginning of this article.

How to convert an overlay extension to restartless - Archive of obsolete content
this article is a step-by-step tutorial on how to convert an old overlay-based extension into a restartless (bootstrapped) extension that is also extractionless.
... further reading author original article.

Listening to events in Firefox extensions - Archive of obsolete content
there are several different categories of events; this article will help you learn about them and direct you to more specific documentation covering each of them.
... if you call javascript functions as part of the pageshow event, you can ensure these functions are called when the page is loaded in browsers other than firefox 1.5 by calling the pageshow event as part of the load event, as shown in the sample later in this article.

Offering a context menu for form controls - Archive of obsolete content
this article describes how an extension can override this change in a particular window, enabling context menus to work on form controls.
... this article presents information based on ehsan akhgari's form control context menu extension, which was created specifically to demonstrate how to do this.

Appendix A: Add-on Performance - Archive of obsolete content
note: see the newer article performance best practices in extensions for more up-to-date information about how to optimize the performance of your add-on.
... look at the source samples in the article and notice how they mostly consist of nested if statements.

Setting Up a Development Environment - Archive of obsolete content
in order to set the profile location to the right value, you should read the support article on profiles, at the mozilla support site.
... you can learn about setting up multiple firefox profiles in the mozilla support article managing profiles.

Setting up an extension development environment - Archive of obsolete content
this article provides suggestions for how to set up your mozilla application for extension development.
...for more information about mozilla preferences, refer to the mozillazine article on "about:config".

Updating addons broken by private browsing changes - Archive of obsolete content
see the imgicache article for more information.
...the supporting per-window private browsing article explains further about the equivalent notifications, which are all backwards compatible through to firefox 12 (and are sent side-by-side with the global private browsing notifications in older versions).

Adding preferences to an extension - Archive of obsolete content
« previousnext » this article takes the creating a dynamic status bar extension sample to the next level, adding a popup menu that lets you quickly switch between multiple stocks to watch.
... as before, concepts covered in the previous articles in this series won't be rehashed here, so if you haven't already seen them: creating a status bar extension creating a dynamic status bar extension also, for reference, you may want to take a look at preferences system and the preferences api.

Underscores in class and ID Names - Archive of obsolete content
note: browser support for underscores in css has greatly improved since this article was originally published in 2001 and the following recommendation is no longer accurate for most circumstances.
... note: this reprinted article was originally part of the devedge site.

Creating a dynamic status bar extension - Archive of obsolete content
« previousnext » this article builds upon the article creating a status bar extension, which creates a static status bar panel in the firefox status bar, by dynamically updating its content with information fetched from the web every few minutes.
...we end up reloading data from each of the windows once in 10 minutes - fixing this by creating a js component responsible for communication with the server is a good idea for one of the future articles startup: function() { this.refreshinformation(); window.setinterval(this.refreshinformation, 10*60*1000); }, this starts by calling our refreshinformation() function, which is responsible for fetching and displaying stock ticker information in the status bar panel.

Index of archived content - Archive of obsolete content
pets alerts and notifications autocomplete bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons management lab...
... extending gecko with xbl and xtf mozilla e4x rich web svg and canvas in mozilla xul - mozilla's xml user interface language xtech 2006 presentations xul explorer xulrunner application update article building xulrunner building xulrunner with python commandline components creating xulrunner apps with the mozilla build system creating a windows inno setup installer for xulrunner applications custom app bundles for mac os x debugging a xulrunner application deploying xulrunner ...

List of Mozilla-Based Applications - Archive of obsolete content
xul and the mozilla framework are heavily used in the gui snapstick internet on tv article that talks about snapstick using firefox sogo groupware front-end uses thunderbird code songbird music xulrunner application spicebird collaboration suite spiderape embedding tool uses mozilla spidermonkey splashtop web browser browser part of instant-on operating system sqlite-manager database manager stan...
... taskpool productivity telasocial kiosk app uses xulrunner telekast teleprompter tenfourfox browser for powerpc-based macs timberwolf browser for amiga os4 based on firefox - project page mozilla thunderbird email 47 million dl tomtom home 2 pc application to manage tomtom gps devices review article from gps magazine; over 2.4m users topstyle html, xhtml and css editor seems to have optional gecko embedding but doesn't use it by default toxtox media browser for tv 5000 downloads trixul gui toolkit uses mozilla spidermonkey trustedbird email client thunderbird bundled with a set of extensions (formerly known as milimail) tun...

Localizing an extension - Archive of obsolete content
« previousnext » this article expands upon the previous samples on extension writing by adding localization support to our stock watcher extension.
...if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension download the sample you can download this article's sample code so you can look at it side-by-side with the article, or to use it as a basis for your own extension.

Download Manager improvements in Firefox 3 - Archive of obsolete content
other download manager documentation download manager preferences this article lists preferences used by the download manager as well as their default values.
... the download manager schema this article describes the database format used to store and track information about each download.

Repackaging Firefox - Archive of obsolete content
notice: the article is about repackaging firefox 2.0 and is obsolete when working on 3.x repackaging.
... while the aim of this article is not to fully document how to make an extension (for that, try this section of the mozilla developer center), here is a basic tutorial to get you started, and some tips specific for creating a dex.

Creating a Help Content Pack - Archive of obsolete content
one common use of this is to inherit the small using the help window article provided with the viewer.
... for example, the following code uses a datasource outside the content pack you have created to include the article in a table of contents: <rdf:li> <rdf:description nc:panelid="toc" nc:datasources="chrome://help/locale/help-toc.rdf chrome://foo/locale/help/glossary.rdf"/> </rdf:li> each of the different data source types (toc, index, glossary, and search) may be used multiple times (and in the case of platform-specific information, must be used multiple times).

Microsummary XML grammar reference - Archive of obsolete content
warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this article provides detailed information about the xml grammar used to build microsummary generators, describing each element and their attributes.
... for an introduction to how to create a microsummary, read the article creating a microsummary.

Mozilla Application Framework in Detail - Archive of obsolete content
editor's note: this article should be rewritten to describe why use xulrunner to create your own application.
... more information using the mozilla soap api (an article written for the apple developer connection) xml extras (the home page for the xml extras code module, which contains mozilla's web services support) soap scripts in mozilla (documentation on soap in mozilla from the engineer who implemented it) xpinstall, mozilla's cross platform installation technology one of the many things that makes the mozilla platform easy for both users and developers i...

New Skin Notes - Archive of obsolete content
a few examples: , .these work fine with the old theme, and i expect that this affects a lot of reference articles.
...just so that (perhaps) this might revive the topic, a side bar shouldn't exceed 16% to allow proper viewing at 800 pixels width ideally in my opinion, i find strange that i'm the only person not too fond of large side bars (or side bars at all, for that matter :) considering that in most articles we scroll down to read the text, and that the side bar scrolls as well, the links aren't there anymore, but the width remains wasted anyway.

XPInstall - Archive of obsolete content
learn xpi installer scripting by example this article uses the installer script from browser.xpi install package as the basis for discussing xpi installations in general.
... creating xpi installer modules this article describes the packaging scheme of the mozilla and offers a tutorial for creating a new package that can then be redistributed, installed, and made available to users.

A XUL Bestiary - Archive of obsolete content
the purpose of this article is not to describe these items in any great detail but to define what they are in simple terms.
...in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.

Dynamically modifying XUL-based user interface - Archive of obsolete content
this article discusses manipulating xul interfaces, using dom and other apis.
...you may also want to read some introductory documents about dom, like the about the document object model article or the introduction page of the gecko dom reference.

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
use other tutorials and articles to find out more—the main extensions page here is a good starting point.
... in particular, the articles creating toolbar buttons and building an extension explain the process in more detail.

Custom toolbar button - Archive of obsolete content
use other tutorials and articles to find out more—the main extensions page here is a good starting point.
... in particular, the articles creating toolbar buttons and building an extension explain the process in more detail.

XML - Archive of obsolete content
this article describes the relationship of xul to xml, its parent language.
... xul is made out of xml you don't need to know all about xml in order to use xul, but you may want to read through this article to get a sense of xul's pedigree as a specialized markup language.

XUL Event Propagation - Archive of obsolete content
this article describes the event model in xul and features event propagation as a way to handle events in different places in the interface.
...this flexibility in the xul event model is the focus of this article.

textbox - Archive of obsolete content
more information is available in the preferences system article.
... added from david walsh's article on spell check.

Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
the tutorial here uses the my app example from the article getting started with xulrunner.
... step 2: creating the application to make your application standalone, deploy your application according to the deploying xulrunner 1.8 article.

Debugging a XULRunner Application - Archive of obsolete content
jsdump(str) (function defined below) will output str as a "message" with a speech bubble icon next to it: function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } for more information about the error console see the error console and browser console article.
... inspired by http://article.gmane.org/gmane.comp.mozilla.devel.jsdebugger/859 i extracted venkman.jar, opened venkman\content\venkman\venkman-scripts.xul and changed: @@ -54,11 +54,11 @@ <script src="chrome://global/content/nstransferable.js" /> <script src="chrome://global/content/nsclipboard.js" /> <script src="chrome://global/content/nsdraganddrop.js" /> - <script src="chrome://communicator/co...

Deploying XULRunner - Archive of obsolete content
registration and app installation are performed with command line switches as outlined in the xulrunner section of article command line options.
...an example of one such solution may be found in the article: creating a windows inno setup installer for xulrunner applications.

Dialogs in XULRunner - Archive of obsolete content
« previous the last article in this series covered some simple xul for creating windows, menus, and toolbars.
... future articles in this series will look at input controls, printing, the clipboard, and xpcom.

Windows and menus in XULRunner - Archive of obsolete content
you can learn how to do it in the article window icons.
...more than i can fit into a single article, so we will continue looking at building ui in xulrunner in the next article.

Adobe Flash - Archive of obsolete content
this article explains how javascript can be used to access methods from within the flash plugin, as well as how a feature called fscommands can be used to access javascript functions from within the flash animation.
... the focus of this article is to present tips on scripting flash within gecko™-based web browsers.

Writing a plugin for Mac OS X - Archive of obsolete content
this article is adapted from josh aas's blog post writing an npapi plugin for mac os x.
... before you go on reading this article, you may wish to grab the sample code located here, as it will be referenced during this tutorial.

Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
>what is the 3571st prime number</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</lastbuilddate></pubdate> <link>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <slash:comments>72</slash:comments> </item> <item> <title>first article!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:comments>118</slash:comments> </item> </channel> </rss> the <slash:comments> element is it reason that the rss s...
...(using either of these 2 rss modules is out of the scope of this article.) in reality, an item's comments count could change at any given time.

Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
s shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/article/54321</link> <wfw:commentrss>http://www.example.com/feed/rss/54321/comments</wfw:commentrss> </item> <item> <title>rain is wet</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54320</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>http://www.examp...
...le.com/article/54320</link> <wfw:commentrss>http://www.example.com/feed/rss/54320/comments</wfw:commentrss> </item> <item> <title>huh?!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss> element is the reason that the well-formed web rss module is popular.

What is RSS - Archive of obsolete content
in other words, when you syndicate, you are telling everyone something like: "hey everyone, i've got articles that i want everyone to come and read.
... news web sites use rss to provide everyone with a list of their newest articles.

Content - Archive of obsolete content
"getting started" box, if there is no "getting started" article yet written, should be populated with another feature article or tutorial, should one exist.
... documentation selected articles why rss content module is popular - including html contents charles iliya krempeaux talks about the rss content module, why it is popular among some, and how it is used to include html contents.

title - Archive of obsolete content
netscape rss 0.91 revision 3 example <?xml version="1.0"?> <!doctype rss system "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> <url>http://www.advogato.org/image/tinyadvogato.png</url> </image> <item> <title>why can i not get any tang?!</title> ...
... <link>http://www.advogato.org/article/10101.html</link> <description>seriously.

Vulnerabilities - Archive of obsolete content
this article discusses vulnerabilities, explaining what they are and how they are present in all systems.
...this article uses three high-level vulnerability categories: software flaws, security configuration issues, and software feature misuse.

Theme changes in Firefox 2 - Archive of obsolete content
this article covers the changes that need to be made to update a firefox theme to work properly in firefox 2.
... note: we could use an article called updating themes for firefox 2 that would serve as a how-to guide for updating themes.

Theme changes in Firefox 3 - Archive of obsolete content
this article covers the changes that need to be made to update a firefox theme to work properly in firefox 3.
... note: we could use an article called updating themes for firefox 3 that would serve as a how-to guide for updating themes.

Using workers in extensions - Archive of obsolete content
« previous this article shows you how to use worker threads in extensions to perform tasks in the background without blocking the user interface.
... if you haven't already created an extension, or would like to refresh your memory, take a look at the previous articles in this series: creating a status bar extension creating a dynamic status bar extension adding preferences to an extension localizing an extension updating an extension to support multiple mozilla applications download the sample you may download the complete example: download the example.

Browser Feature Detection - Archive of obsolete content
this article has generally never been more than a way to show off firefox web compatibility, rather than something truly informative in a broader sense.
... note: this reprinted article was originally part of the devedge site.

Reference - Archive of obsolete content
maybe something like main article: javascript 1.2--sevenspade 15:16, 6 july 2006 (pdt) as a side note, the ability to to specify different versions has come up again - now between versions 1.6 and 1.7.
...js article from the main page and global objects page at least.

Writing JavaScript for XHTML - Archive of obsolete content
this article shows some of the reasons alongside with strategies to remedy the problems.
... for completeness here is the accept field, that firefox 2.0.0.9 sends with its requests: accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 further reading you will find several useful articles in the developer wiki: xml in mozilla dom xml introduction xml extras dom 2 methods you will need are: dom:document.createelementns dom:document.getelementsbytagnamens see also properly using css and javascript in xhtml documents ...

Mozilla XForms User Interface - Archive of obsolete content
introduction this article is a quick reference of the xforms user interface elements.
...this article uses several notations.

The Business Benefits of Web Standards - Archive of obsolete content
this article discusses how adhering to web standards, and leaving behind proprietary markup and technologies, can contribute to a company's business goals.
...from this it follows that there needs to be a framework and a process for content contributors to post articles, to upload videos, sound or any other media.

Using the Right Markup to Invoke Plugins - Archive of obsolete content
this article is about how to invoke a plugin with the correct use of html.
...the details are covered in another article.

XUL Parser in Python - Archive of obsolete content
warning: the content of this article may be out of date.
... this article is from 2000.

Bounding volume collision detection with THREE.js - Game development
this article shows how to implement collision detection between bounding boxes and spheres using the three.js library.
... it is assumed that before reading this you have read our 3d collision detection introductory article first, and have basic knowledge about three.js.

Explaining basic 3D theory - Game development
this article explains all of the basic theory that's useful to know when you are getting started working with 3d.
...read the camera paragraph in the three.js article to learn about those.

Building up a basic demo with the PlayCanvas engine - Game development
if you have already worked through our building up a basic demo with three.js article (or you are familiar with other 3d libraries) you'll notice that playcanvas works on similar concepts: camera, light and objects.
... summary now you can continue reading the playcanvas editor article, go back to the building up a basic demo with playcanvas page, or go back a level higher to the main 3d games on the web page.

WebVR — Virtual Reality for the Web - Game development
this article introduced webvr from the perspective of its use in games.
... note: for more information, read our webvr concepts article.

Mobile touch controls - Game development
note: the touch events reference article provides more examples and information.
... summary that covers adding touch controls for mobile; in the next article we'll see how to add keyboard and mouse support.

Unconventional controls - Game development
but imagine going even further — in this article we will explore various unconventional ways to control your web game, some more unconventional than others.
... doppler effect there's a very interesting article available on motion sensing using the doppler effect, which mixes together waving your hand and using the microphone.

Implementing controls using the Gamepad API - Game development
this article looks at implementing an effective, cross-browser control system for web games using the gamepad api, allowing you to control your web games using console game controllers.
...the code discussed in this article was tested with a few gamepads, but the author's favorite configuration is a wireless xbox 360 controller and the firefox browser on mac os x.

Crisp pixel art look with image-rendering - Game development
this article discusses a useful technique for giving your canvas/webgl games a crisp pixel art look, even on high definition monitors.
...check out the image-rendering article for more information on the differences between these values, and which prefixes to use depending on the browser.

Efficient animation for web games - Game development
this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones.
...puzzowl isn’t out yet, but here’s a little screencast of it running on a nexus 5: note: this article was originally written and published by chris lord, on his blog — see efficient animation for games on the (mobile) web.

Square tilemaps implementation: Static maps - Game development
this article covers how to implement static square tilemaps using the canvas api.
... note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic information included in our tilemaps introduction article.

Tools for game development - Game development
on this page you can find links to our game development tools articles, which eventually aims to cover frameworks, compilers, and debugging tools.
...this article shows how to make use of shumway, and how to contribute fixes and bugs to the project.

2D breakout game using pure JavaScript - Game development
to get the most out of this series of articles you should already have basic to intermediate javascript knowledge.
... note: this series of articles can be used as material for hands-on game development workshops.

2D breakout game using Phaser - Game development
to get the most out of this series of articles you should already have basic to intermediate javascript knowledge.
... note: this series of articles can be used as material for hands-on game development workshops.

2D maze game with device orientation - Game development
note: you can read the building monster wants candy article for the in-depth introduction to the basic phaser-specific functions and methods.
...so added in the create() function of our game state: this.hole = this.add.sprite(ball._width*0.5, 90, 'hole'); this.physics.enable(this.hole, phaser.physics.arcade); this.hole.anchor.set(0.5); this.hole.body.setsize(2, 2); the difference is that our hole’s body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article).

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
ng though endless divs with or without semantic or namespaced classes suggests to the developer the type of data that will be populated semantic naming mirrors proper custom element/component naming when approaching which markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.
... semantic elements these are some of the roughly 100 semantic elements available: <article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time> learn more html element reference on mdn using html sections and outlines on mdn the meaning of semantics in computer science on wikipedia ...

The box model - Learn web development
if you want to understand the thinking behind this, see the css tricks article on box-sizing.
... we have covered a lot in this article, but can you remember the most important information?

Test Your Skills: Fundamental layout comprehension - Learn web development
the image that is inside the article should have text wrapped around it.
... the <article> and <aside> elements should display as a two column layout.

Multiple-column layout - Learn web development
this article explains how to use this feature.
... you've reached the end of this article, but can you remember the most important information?

Normal Flow - Learn web development
previous overview: css layout next this article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout.
...the normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport.

Positioning - Learn web development
this article explains the different position values, and how to use them.
... you've reached the end of this article, but can you remember the most important information?

Supporting older browsers - Learn web development
this article explains how to use modern web techniques without locking out users of older technology.
...this also means that there are some outdated articles and tutorials in existence; this useful guide helps you check what you are looking at and can also help if you need flex support in very old browsers.

How CSS is structured - Learn web development
playing with the css in this article for the exercise that follows, create a folder on your computer.
...the next article, how css works, explains the process.

How CSS works - Learn web development
the updated output is as follows: in our debugging css article in the next module we will be using browser devtools to debug css problems, and will learn more about how the browser interprets css.
...in the next article you'll use your new knowledge to restyle an example, testing out some css in the process.

CSS FAQ - Learn web development
in this article, you'll find some frequently-asked questions (faqs) about css, along with answers that may help you on your quest to become a web developer.
... note: for more information, see our positioning learning article, and in particular the introducing z-index section.

How do you make sure your website works properly? - Learn web development
in this article we go over various troubleshooting steps for a website and some basic actions to take in order to solve these issues.
... open the console (tools ➤ web developer ➤ web console) and reload the page: in this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover javascript in another series of articles).

How 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.
...this article lists the most important quick-wins for universal design.

How much does it cost to do something on the Web? - Learn web development
in this article we discuss how much you may have to spend, and why.
...in this article we discuss how much everything costs, and how you get what you pay (or don't pay).

What is the difference between webpage, website, web server, and search engine? - Learn web development
in this article, we describe various web-related concepts: web pages, websites, web servers, and search engines.
...such documents are written in the html language (which we look into in more detail in other articles).

What are browser developer tools? - Learn web development
this article explains how to use the basic functions of your browser's devtools.
... note: before you run through the examples below, open the beginner's example site that we built during the getting started with the web article series.

Test your skills: Advanced styling - Learn web development
this aim of this skill test is to assess whether you've understood our advanced form styling and ui pseudo-classes articles.
... advanced form styling 3 in our final task for this assessment series, we provide you with a feedback form that is already nicely-styled — you've already seen something similar if you've worked through our ui pseudo-classes article, and now we want you to come up with your own solution.

Test your skills: Form validation - Learn web development
this aim of this skill test is to assess whether you've understood our client-side form validation article.
... form validation 3 in our final task for this set, we are providing you with a similar example to what you saw in the accompanying article — a simple email address entry input.

Front-end web developer - Learn web development
the learning and getting help article provides you with a series of tips for looking up information and helping yourself.
... there are no specific assessment articles in this set of modules.

Dealing with files - Learn web development
an aside on casing and spacing you'll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces.
...to demonstrate this, we will insert a little bit of html into our index.html file, and make it display the image you chose in the article "what will your website look like?" copy the image you chose earlier into your images folder.

Installing basic software - Learn web development
maybe that sounds obvious to some people, but some of you are reading this article on your phone or a library computer.
...in this article, we'll just set you up with a bare minimum — a text editor and some modern web browsers.

Publishing your website - Learn web development
this article explains how to get your simple sample code online with little effort.
...this article doesn't attempt to document all the possible methods.

The web and web standards - Learn web development
this article provides some useful background on the web — how it came about, what web standard technologies are, how they work together, why "web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
...for a more detailed explanation of how some of them work together, read our article how the web works.

Tips for authoring fast-loading HTML pages - Learn web development
use a content delivery network (cdn) for the purposes of this article, a cdn is a means to reduce the physical distance between your server and your visitor.
... note, however, that many of the tips listed in this article are common-sense techniques which apply to any user agent, and can be applied to any web page, regardless of browser-support requirements.

Debugging HTML - Learn web development
this article will introduce you to some tools that can help you find and fix errors in html.
...this also marks the end of the introduction to html module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below.

Mozilla splash page - Learn web development
previous overview: multimedia and embedding in this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla!
... adding a video to the main article content just inside the <article> element (right below the opening tag), embed the youtube video found at https://www.youtube.com/watch?v=ojcncvb1olg, using the appropriate youtube tools to generate the code.

Introduction to web APIs - Learn web development
they use events to handle changes in state we already discussed events earlier on in the course in our introduction to events article, which looks in detail at what client-side web events are and how they are used in your code.
... if you are not already familiar with how client-side web api events work, you should go and read this article first before continuing.

Silly story generator - Learn web development
previous overview: first steps in this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories.
... prerequisites: before attempting this assessment you should have already worked through all the articles in this module.

Test your skills: Arrays - Learn web development
this aim of this skill test is to assess whether you've understood our arrays article.
...note that we don't teach how to do this in the arrays article, so you'll have to do some research.

Test your skills: Math - Learn web development
this aim of this skill test is to assess whether you've understood our basic math in javascript — numbers and operators article.
... math 3 in the final task for this article, we want you to write some tests.

Test your skills: JSON - Learn web development
this aim of this skill test is to assess whether you've understood our working with json article.
... json 1 the one and only task in this article concerns accessing json data and using it in your page.

Test your skills: Object basics - Learn web development
this aim of this skill test is to assess whether you've understood our javascript object basics article.
...if you are not sure, then don't worry — this is what we'll be looking at in future articles in the series!

Multimedia: Images - Learn web development
this article looks at optimizing image and video to improve web performance.
...a detailed article on how to combine all of these attributes can be found here.

Perceived performance - Learn web development
this article provides a brief introduction to perceived performance, looking at user perceptions, and what objective tools can be used to measure that which is subjective.
...some of these quick tips have full articles if you want to dive deeper.

What is web performance? - Learn web development
this article provides a brief introduction to objective, measureable web performance*, looking at what technologies, techniques, and tools are involved in web optimization.
... * versus subjective, perceived performance, covered in the next article what is web performance?

JavaScript performance - Learn web development
this article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing javascript for web performance.
...in the next article we take a look at some html features that can impact performance, including some attributes specifically created to improve performance.

Multimedia: video - Learn web development
this article looks at optimizing video to improve web performance.
...this article explains how to optimize website video through reducing file size, with (html) download settings, and with streaming.

The "why" of web performance - Learn web development
this article provides an introduction into why web performance is important to site visitors and for your business goals.
...for example, this might be making a purchase, reading an article, or subscribing to a newsletter.

Getting started with Ember - Learn web development
previous overview: client-side javascript frameworks next in our first ember article we will look at how ember works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
...in the next article we'll look at building up the markup structure of our app, as a group of logical components.

Routing in Ember - Learn web development
previous overview: client-side javascript frameworks next in this article we learn about routing, or url-based filtering as it is sometimes referred to.
...study the code to learn more about ember, and also check out the next article, which provides links to more resources and some troubleshooting advice.

Accessibility in React - Learn web development
previous overview: client-side javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
... in the very last article we'll present you with a list of react resources that you can use to go further in your learning.

Componentizing our React app - Learn web development
in this article we will show you a sensible way to break our app up into components.
... summary and that's it for this article — we've gone into some depth on how to break up your app nicely into components, end render them efficiently.

React resources - Learn web development
previous overview: client-side javascript frameworks next our final article provides you with a list of react resources that you can use to go further in your learning.
... if you'd like to try this api for yourself, smashing magazine has written an introductory article about react context.

Beginning our React todo list - Learn web development
this article will walk you through putting the basic app component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
...if you want to learn more about why this is necessary, you can check out scott o'hara’s article, “fixing lists”.

Getting started with Vue - Learn web development
in this article we'll look at a little bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
... in the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.

Adding a new todo form: Vue events, methods, and models - Learn web development
this is what we'll cover in this article.
...in the next article, we'll concentrate on fixing this, looking at the different ways vue provides to style components.

Focus management with Vue refs - Learn web development
this article from the digital ocean community blog dives into the lifecycle methods more deeply.
...in the next article we'll round things off with some further resources to take your vue learning further.

Styling Vue components with CSS - Learn web development
in this article we'll explore the different ways of styling vue components with css.
...in the next article we'll return to adding some more functionlity to our app, namely using a computed property to add a count of completed todo items to our app.

Tools and testing - Learn web development
working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.
... modules understanding client-side web development tools client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line.

Learn web development
this set of articles aims to provide complete beginners to web development with all that they need to start coding websites.
...in the articles listed below, we'll cover all the essential aspects of structuring, styling, and interacting with web forms.

Accessibility API cross-reference
article <article> <part> or <art> object representing entire app.
...in aria, used to nest browsable rich text content inside interactive content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a listbox for math & chemistry equation n/a n/a math a scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list.

Index
this article suggests the steps you might want to follow, as well as offering some pointers to a suitable timeline.
... 682 submitting an add-on add-ons, beginner, tutorial, webextensions this article walks through the process of publishing an add-on.

Debugging a hang on OS X (Archived)
warning: the content of this article may be out of date.
... this article contains historical information about older versions of os x.

Windows SDK versions
older versions some of the older version are no longer supported, further information is available at obsolete build caveats and tips [en-us] under the windows sdk article.
...older sdks these are no longer supported, further information is available at obsolete build caveats and tips [en-us] under the windows sdk article.

Working with Mozilla source code
the articles below will help you get your hands on the mozilla source code, learn to navigate the code, and how to get the changes you propose checked into the tree.
...this article needs to be updated fully for mercurial.

Developer guide
for new mozilla developers a directory of articles which are particularly helpful for new mozilla developers.
... mozilla modules and module ownership this article provides information about mozilla's modules, what the role of a module owner is, and how module owners are selected.

Index
this article explains how the new policy works and how you can test it.
... 172 security best practices for firefox front-end engineers best practices, developing firefox, developing mozilla, firefox, front-end, mozilla, performance this article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.

Limitations of chrome scripts
this is one of a pair of articles: the other one lists limitations of frame scripts.
...see the article on using the message manager.

Limitations of frame scripts
this article lists the most important of these apis.
... this is one of a pair of articles: the other one lists limitations of chrome scripts.

Message manager overview
this article describes the different types of message manager, how to access them, and at a high level, what sorts of things you can use them for.
... frame message managers in multiprocess firefox, when chrome code needs to interact with web content, it needs to: factor the code that needs direct access to content into separate scripts, which are called "frame scripts" use a frame message manager to load these frame scripts into the content process use the frame message manager api to communicate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead of "frame scripts".

Gecko's "Almost Standards" Mode
(see the devedge article "images, tables, and mysterious gaps" for a detailed explanation of how such layouts are treated in "standards" mode.) in slightly more detail, what differs in almost-standards mode is roughly this: inline boxes that have no non-whitespace text as a child and have no border, padding, or margin: do not influence the size of the line box (that is, their line-height is ignored) do not get a hei...
... note: this reprinted article was originally part of the devedge site.

How to get a stacktrace for a bug report
this article describes how to use the mozilla crash reporter (breakpad) to get a crash id, which our engineers can use to get a stacktrace, and alternative ways to get a stacktrace if you can't get a crash id.
... alternative ways to get a stacktrace if the mozilla crash reporter doesn't come up or isn't available you will need to obtain a stacktrace manually: windows see the article create a stacktrace with windbg for information on how to do this.

PBackground
this article outlines what pbackground is, and how it works.
... note: this article was original published as what is pbackground?, by kyle huey.

Index
17 localization sign-off reviews guide, localization, mozilla this article presents an overview of why we do sign-off reviews of localizations, the details on the criteria used for the sign-off reviews, and the process for requesting a review and for following its progress.
... 21 localizing extension descriptions add-ons, extensions, guide, internationalization, localization this article provides details on how to go about localizing the descriptions of mozilla add-ons, as well as for other metadata about your add-on.

Localization content best practices
the most obvious impact is that the definite article which in english is always the can either be der, die or das.
... to complicate matters, if the grammatical context changes, the article will change: der text 'the text' changes to wollen sie den text speichern?

Mozilla Development Strategies
this article offers some strategies and suggestions to help developers stay productive.
... warning: the content of this article may be out of date.

PKCS11 module installation
this article covers the two methods for installing pkcs #11 modules into firefox.
... note: the information in this article is specific to firefox 3.5 and newer.

Index
5 future directions guide, mozilla, spidermonkey this article documents future directions in functionality, design, and coding practices for spidermonkey.
... 15 jsapi cookbook spidermonkey this article shows the jsapi equivalent for a tiny handful of common javascript idioms.

Redis Tips
i recommend reading this article on realtime metrics with bitstrings: https://blog.getspool.com/2011/11/29/fast-easy-realtime-metrics-using-redis-bitmaps/.
... you may encounter articles on the web trying to scare you away from using lots of small zsets due to their memory consumption.

Accessibility API Implementation Details
this article (from 2007) reviews the progress and technology as it has developed.
... xforms accessibilitythis article provides a quick guide to how accessibility is handled in gecko for xforms.xul accessibilitythis article shows how xul control elements are mapped to accessibility api.

Feed content access API
w.open("", "feedtest_window"); var doc = win.document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.text + "</title></head><body>"); doc.write("<h1>" + feed.title.text + "</h1><p>"); var itemarray = feed.items; var numitems = itemarray.length; // write the article information if (!numitems) { doc.write("<i>no news is good news!</i>"); } else { var i; var theentry; var theurl; var info; for (i=0; i<numitems; i++) { theentry = itemarray.queryelementat(i, components.interfaces.nsifeedentry); if (theentry) { theurl = doc.wr...
...this opens a new window containing the feed contents, with each item's title a clickable link that takes you to the article itself.

Avoiding leaks in JavaScript XPCOM components
quite a lot has happened since this article was written.
... this article needs to be updated to reflect the changes and the cases where they help.

XPCOM guide
these articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.
...this article details those changes, and provides suggestions for how to update your code.xpcom hashtable guidea hashtable is a data construct that stores a set of items.

mozIStorageFunction
storage/public/mozistoragefunction.idlscriptable please add a summary to this article.
...nscomptr<mozistoragestatement> stmt; rv = dbconn->createstatement(ns_literal_cstring( "select square(value) from some_table"), getter_addrefs(stmt) ); ns_ensure_success(rv, rv); prbool hasmore; while (ns_succeeded(stmt->executestep(&hasmore)) && hasmore) { // handle the results } see also storage introduction and how-to article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database.

mozIStorageProgressHandler
storage/public/mozistorageprogresshandler.idlscriptable please add a summary to this article.
... see also storage mozstorage introduction and how-to article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database.

mozIStorageValueArray
storage/public/mozistoragevaluearray.idlscriptable please add a summary to this article.
... see also storage introduction and how-to article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragestatement create and execute sql statements on a sqlite database.

nsIMsgDatabase
mailnews/db/msgdb/public/nsimsgdatabase.idlscriptable please add a summary to this article.
...y astalehits); void updatehdrincache(in string asearchfolderuri, in nsimsgdbhdr ahdr, in boolean aadd); boolean hdrisincache(in string asearchfolderuri, in nsimsgdbhdr ahdr); attributes attribute type description dbfolderinfo nsidbfolderinfo readonly: firstnew nsmsgkey readonly: msgretentionsettings nsimsgretentionsettings msgdownloadsettings nsimsgdownloadsettings lowwaterarticlenum nsmsgkey readonly: highwaterarticlenum nsmsgkey readonly: nextpseudomsgkey nsmsgkey for undo-redo of move pop->imap.

wrappedJSObject
this article focuses on the latter kind of wrappers, which hide any properties or methods on the component that are not part of the supported interfaces as declared in xpidl.
... the rest of this article demonstrates what xpconnect wrappers do and how wrappedjsobject can be used to bypass them.

XPCOM
this article will show you how to use the available interfaces in several mozilla products.aggregating the in-memory datasourcealready_addrefedalready_addrefed in association with nscomptr allows you to assign in a pointer without addrefing it.binary compatibilityif mozilla decides to upgrade to a compiler that does not have the same abi as the current version, any built component may fail.
...it allows developers to link only against the frozen xpcom method symbols and maintain compatibility with multiple versions of xpcom.xpcom guidethese articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.xpcom ownership guidelines...naturally.

Xray vision
that includes the code samples in this article.
...that includes the code samples in this article.

Create Custom Column
the article "creating a custom column" will get you well on the road to creating your own columns and populating them with custom data.
... the customdbheaders preference article provides information on a preference setting that exposes custom header data for use in a custom column within thunderbird's main view.

Working with windows in chrome code
this article describes working with multiple windows in mozilla chrome code (xul applications and extensions).
... there are several articles and books about creating xpcom components online.

Dominators view - Firefox Developer Tools
otherwise, you might want to review the article on dominators concepts.
...see the relevant section of the dominators concepts article.

Edit fonts - Firefox Developer Tools
this article provides a tour of the font tools available in the firefox devtools.
... note: the updated font tools as shown in this article are available in firefox 63 onwards; if you are using an older version of firefox the tools will not look or behave quite the same, but they will be similar (most notably the font editor will not be available).

Waterfall - Firefox Developer Tools
the animating css properties article shows how animating different css properties can give different performance outcomes, and how the waterfall can help signal that.
...in the screenshot below, we've zoomed in on a js function that's caused a drop in the frame rate: the intensive javascript article shows how the waterfall can highlight responsiveness problems caused by long javascript functions, and how you can use asynchronous methods to keep the main thread responsive.

A basic ray-caster - Web APIs
this article provides an interesting real-world example of using the <canvas> element to do software rendering of a 3d environment using ray-casting.
...i'll leave that for another article, probably from another person.

Using channel messaging - Web APIs
in this article we'll explore the basics of using this technology.
... we'll be focusing on the latter example in this article.

ContentIndex.getAll() - Web APIs
homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
...ait navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anc...

Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
introduction this article is an overview of some powerful, fundamental dom level 1 methods and how to use them from javascript.
... mynewptagnode.appendchild(mytextnode); the final state for the modified object tree looks like this: creating a table dynamically (back to sample1.html) for the rest of this article we will continue working with sample1.html.

Element.closest() - Web APIs
example html <article> <div id="div-01">here is div-01 <div id="div-02">here is div-02 <div id="div-03">here is div-03</div> </div> </div> </article> javascript var el = document.getelementbyid('div-03'); var r1 = el.closest("#div-02"); // returns the element with the id=div-02 var r2 = el.closest("div div"); // returns the closest ancestor which is a div in div, here it is the div-03 itself var...
... r3 = el.closest("article > div"); // returns the closest ancestor which is a div and has a parent article, here it is the div-01 var r4 = el.closest(":not(div)"); // returns the closest ancestor which is not a div, here it is the outmost article polyfill for browsers that do not support element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning ie9+), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.msmatchesselector || element.prototype.webkitmatchesselector; } if (!element.prototype.closest) { element.prototype.closest = function(s) { var el = this; do { if (element.prototype.matches.call(el, s)) return el; el = el.parentelement || el.parentnode; } while (el !== null &...

Fetch basic concepts - Web APIs
this article explains some of the basic concepts of the fetch api.
... note: this article will be added to over time.

HTMLImageElement.useMap - Web APIs
you can learn more about client-side image maps in our learning article add a hitmap on top of an image.
..."> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for additional examples (including interactive ones), see the articles about the <map> and <area> elements, as well as the guide to using image maps.

IDBCursor.continuePrimaryKey() - Web APIs
example here’s how you can resume an iteration of all articles tagged with "javascript" since your last visit: let request = articlestore.index("tag").opencursor(); let count = 0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey...
...); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // preload 5 articles into the unread list; unreadlist.push(cursor.value); if (++count < 5) { cursor.continue(); } }; specifications specification status comment indexed database api draftthe definition of 'continueprimarykey()' in that specification.

Checking when a deadline is due - Web APIs
in this article we look at a complex example involving checking the current time and date against a deadline stored via indexeddb.
... the main example application we will be referring to in this article is to-do list notifications, a simple to-do list application that stores task titles and deadline times and dates via indexeddb, and then provides users with notifications when deadline dates are reached, via the notification, and vibration apis.

LocalFileSystemSync - Web APIs
for more concepts, see the counterpart article for the asynchronous api.
...for more details, see the article on basic concepts.

Recording a media element - Web APIs
while the article using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an html media element (namely <audio> or <video>) as the source of the mediastream to be recorded.
... in this article, we'll look at an example that does just that.

Capabilities, constraints, and settings - Web APIs
this article discusses capabilities and constraints, as well as media settings, and includes an example we call the constraint exerciser.
... if an error occurs, we log it using the handleerror() method that we'll look at farther down in this article.

Payment processing concepts - Web APIs
in this article, we'll take a look at how the api operates and what each of its components does.
...should have an article about this specification and how to use it.

Using the Permissions API - Web APIs
this article provides a basic guide to using the w3c permissions api, which provides a programmatic way to query the status of api permissions attributed to the current context.
... a simple example for this article, we have put together a simple demo called location finder.

RTCIceCandidate - Web APIs
the article webrtc connectivity provides additional useful details.
... examples for examples, see the article signaling and video calling, which demonstrates the entire process.

WebGLRenderingContext.getUniformLocation() - Web APIs
example in this example, taken from the animatescene() method in the article a basic 2d webgl animation example, obtains the locations of three uniforms from the shading program, then sets the value of each of the three uniforms.
...olor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the resulting animation in action.

WebRTC connectivity - Web APIs
this article describes how the various webrtc-related protocols interact with one another in order to create a connection and transfer data and/or media among peers.
... see the individual articles on these properties and methods for more specifics, and codecs used by webrtc for information about codecs supported by webrtc and which are compatible with which browsers.

Lifetime of a WebRTC session - Web APIs
in this article, we'll look at the lifetime of a webrtc session, from establishing the connection all the way through closing the connection when it's no longer needed.
... this article doesn't get into details of the actual apis involved in establishing and handling a webrtc connection; it simply reviews the process in general with some information about why each step is required.

Signaling and video calling - Web APIs
in this article, we will further enhance the websocket chat first created as part of our websocket documentation (this article link is forthcoming; it isn't actually online yet) to support opening a two-way video call between users.
...here's the expected sequence of events: we'll see this detailed more over the course of this article.

Using DTMF with WebRTC - Web APIs
this article offers a brief high-level overview of how dtmf works over webrtc, then provides a guide for everyday developers about how to send dtmf over an rtcpeerconnection.
...the details of how dtmf payloads are handled on rtp are beyond the scope of this article.

Targeting and hit detection - Web APIs
this content is just pasted here until work begins on writing this article in earnest.
... the details of how to work with an individual platform's ranging system is beyond the scope of this article.

Using the Web Animations API - Web APIs
this article will start you off in the right direction with fun demos and tutorials featuring alice in wonderland.
... browser support the basic web animations api features discussed in this article are available by default in firefox 48+ and chrome 36+.

Web Animations API Concepts - Web APIs
this article will introduce you to the important concepts behind the waapi, providing you with a theoretical understanding of how it works so you can use it effectively.
... to learn how to put the api to use, check out its sister article, using the web animations api.

Web Audio API best practices - Web APIs
in this article, we'll share a number of best practices — guidelines, tips, and tricks for working with the web audio api.
...you have to request the file and wait for it to load (this section of our advanced article shows a good way to do it), but then you have access to the data directly, which means more precision, and more precise manipulation.

Migrating from webkitAudioContext - Web APIs
in this article, we cover the differences in web audio api since it was first implemented in webkit and how to update your code to use the modern web audio api.
... this article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based audiocontext, which will work across different browser engines.

Visualizations with Web Audio API - Web APIs
this article explains how, and provides a couple of basic use cases.
... draw(); this code gives us a result like the following: note: the examples listed in this article have shown usage of analysernode.getbytefrequencydata() and analysernode.getbytetimedomaindata().

WindowOrWorkerGlobalScope.setInterval() - Web APIs
nintervid = setinterval(typewrite, this.rate); btyping = true; }; this.pause = function () { clearinterval(nintervid); btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; spart = ""; for (nidx; nidx < asheets.length; scroll(asheets[nidx++], 0, false)); clean(); }; } /* usage: */ var otwexample1 = new typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15); /* default frame rate is 100: */ var otwexample2 = new typewriter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { curso...
...</div> <h1>javascript typewriter</h1> <div id="article"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.

XRInputSource - Web APIs
read on in the main article on gripspace for more details on how to use this space.
... for more details on the input source's coordinate system, see the article that covers the gripspace property in detail.

ARIA annotations - Accessibility
note: you can find all the examples discussed in this article in a demo file at aria-annotations.
...you’ll see examples of most of these later on in the article, but briefly: aria-label="" can be set on an element to provide a brief descriptive label when it isn't appropriate to have the label actually appearing in the ui, for example a search input in a horizontal nav bar.

ARIA: application role - Accessibility
if the web application encompassed by the application role contains parts that should be treated like normal web content, a role of document or article should be used.
... associated wai-aria roles, states, and properties document, article used to indicate parts of the application that should be treated as normal web content aria-activedescendant used to manage focus inside the application.

ARIA: banner role - Accessibility
<div role="banner"> <img src="companylogo.svg" alt="my company name" /> <h1>title</h1> <h2>subtitle</h2> </div> by default, the html5 <header> element has an identical meaning to the banner landmark, unless it is a descendant of <aside>, <article>, <main>, <nav>, or <section>.
... assistive technologies can identify the main header element of a page as the banner if is a descendant of the body element, and not nested within an article, aside, main, nav or section subsection.

ARIA: contentinfo role - Accessibility
<article> <h2>everyday pad thai</h2> <!-- article content --> <footer aria-label="everyday pad thai metadata"> <p>posted on <time datetime="2018-09-23 12:17">may 16</time> by <a href="#">lisa</a>.</p> </footer> </article> ...
...note that a footer element nested within an article, aside, main, nav, or section is not considered contentinfo.

ARIA: document role - Accessibility
in contrast to the article role, the document role does not have any relation to other elements with a document role, it merely has a relationship to the containing composit widget.
... an article can have associated articles.

ARIA: textbox role - Accessibility
<!-- simple text input field --> <div id="txtboxlabel">enter your five-digit zipcode</div> <div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no javascript to support textbox features.
... <label for="txtbox">enter your five-digit zipcode</label> <input type="text" placeholder="5-digit zipcode" id="txtbox"/> <!-- multi-line text area --> <label for="txtboxmultiline">enter the tags for the article</label> <textarea id="txtboxmultiline" required></textarea> where a text field is read-only, indicated this by setting aria-readonly="true" on the element.

:host-context() - CSS: Cascading Style Sheets
/* selects a shadow root host, only if it is a descendant of the selector argument given */ :host-context(h1) { font-weight: bold; } :host-context(main article) { font-weight: bold; } /* changes paragraph text color from black to white when a .dark-theme class is applied to the document body */ p { color: #000; } :host-context(body.dark-theme) p { color: #fff; } syntax :host-context( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
...content = this.textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(span); style.textcontent = 'span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host-context(h1) { font-style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules style the instance of the <context-span> element (the shadow host in this instance) inside the <h1>.

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
future alignment features for flexbox at the beginning of this article i explained that the alignment properties currently contained in the level 1 flexbox specification are also included in box alignment level 3, which may well extend these properties and values in the future.
...you can see how these properties behave when working with a grid in the mdn article box alignment in grid layout, and i have also compared how alignment works in these specifications in my box alignment cheatsheet.

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
.item { flex: 2 1 auto; } if you have read the article basic concepts of flexbox, then you will have already had an introduction to the properties.
... remember this behaviour and what effects min-content and max-content have as we explore flex-grow and flex-shrink later in this article.

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this article provides a set of mixins for those who want to mess around with flexbox using the native support of current browsers.
... this set uses: fallbacks using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in browsers.

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
if you want to dig into writing modes further, however, then i would recommend that you read jen simmons excellent article on css writing modes.
...again, for full details of these see jen’s article.

Understanding CSS z-index - CSS: Cascading Style Sheets
this article will try to explain those rules, with some simplification and several examples.
... stacking context example 1: 2-level html hierarchy, z-index on the last level stacking context example 2: 2-level html hierarchy, z-index on all levels stacking context example 3: 3-level html hierarchy, z-index on the second level original document information author(s): paolo lombardi this article is the english translation of an article i wrote in italian for yappy.

Viewport concepts - CSS: Cascading Style Sheets
this article explains the concept of the viewport — what it is, its impact in terms of css, svg, and mobile devices — and differentiates between the visual viewport and the layout viewport.
... documents like this article may be very long.

break-after - CSS: Cascading Style Sheets
html <article> <h1>main heading</h1> <h2>subheading</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation m...

break-before - CSS: Cascading Style Sheets
html <article> <h1>main heading</h1> <h2>subheading</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation ...

justify-items - CSS: Cascading Style Sheets
html <article class="container" tabindex="0"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: s...
...tretch; } article:hover, article:focus { justify-items: center; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'justify-items' in that specification.

justify-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first child</span> <span>second child</span> <span>third child</span> <span>fourth child</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } sp...
...an:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'justify-self' in that specification.

margin-trim - CSS: Cascading Style Sheets
eritednocomputed valueas specifiedanimation typediscrete formal syntax none | in-flow | all examples basic usage once support is implemented for this property, it will probably work like so: when you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article { background-color: red; margin: 20px; padding: 20px; display: inline-block; } article > span { background-color: black; color: white; text-align: center; padding: 10px; margin-right: 20px; } the problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it: span:last-child { margin-right: 0; } it is a pain having to...
...instead, margin-trim could fix it: article { margin-trim: in-flow; ...

place-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } s...
...pan:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of 'place-self' in that specification.

Getting Started - Developer guides
this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
...for a more realistic example, see step 3 of this article.

Creating a cross-browser video player - Developer guides
this article describes a simple html5 video player that uses the media and fullscreen apis and works across most major desktop and mobile browsers.
...the player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article.

HTML5 - Developer guides
semantics sections and outlines in html5 a look at the new outlining and sectioning elements in html5: <section>, <article>, <nav>, <header>, <footer> and <aside>.
... introduction to html5 this article introduces how to indicate to the browser that you are using html5 in your web design or web application.

Separate sites for mobile and desktop - Developer guides
approaches to mobile web development see the following articles for background and other approaches to developing for mobile platforms.
... 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.

Block-level elements - HTML: Hypertext Markup Language
by default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." this article helps to explain what this means.
... <article> article content.

<footer> - HTML: Hypertext Markup Language
implicit aria role contentinfo, or no corresponding role if a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region permitted aria roles group, presentation or none dom interface htmlelement attributes this element only includes the global attributes.
... examples <footer> some copyright info or perhaps some author info for an &lt;article&gt;?

<header> - HTML: Hypertext Markup Language
implicit aria role banner, or no corresponding role if a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region permitted aria roles group, presentation or none dom interface htmlelement usage notes the <header> element is not sectioning content and therefore does not introduce a new section in the outline.
... examples page header <header> <h1>main page title</h1> <img src="mdn-logo-sm.png" alt="mdn logo"> </header> article header <article> <header> <h2>the planet earth</h2> <p>posted on wednesday, <time datetime="2017-10-04">4 october 2017</time> by jane smith</p> </header> <p>we live on a planet that's blue and green, with so many things still unseen.</p> <p><a href="https://janesmith.com/the-planet-earth/">continue reading....</a></p> </article> specifications specification status ...

<section>: The Generic Section element - HTML: Hypertext Markup Language
note: if the contents of the element would make sense syndicated as a standalone piece, the <article> element may be a better choice.
... if it makes sense to separately syndicate the content of a <section> element, use an <article> element instead.

HTML elements reference - HTML: Hypertext Markup Language
for more information about the basics of html elements and attributes, see the section on elements in the introduction to html article.
... <article> the html <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).

Link types - HTML: Hypertext Markup Language
<a>, <area>, <link> <form> bookmark indicates that the hyperlink is a permalink for the nearest ancestor <article> element.
... this allows for bookmarking a single article in a page containing multiple articles, such as on a monthly summary blog page, or a blog aggregator.

Using HTTP cookies - HTTP
for details about the header attributes mentioned below, refer to the set-cookie reference article.
... for more information about cookie prefixes and the current state of browser support, see the prefixes section of the set-cookie reference article.

Feature-Policy - HTTP
the header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change.
... for more information, see the main feature policy article.

HTTP
this article describes different methods of caching and how to use http headers to control them.
... redbot tools to check your cache-related headers how browsers work a very comprehensive article on browser internals and request flow through http protocol.

Introduction - JavaScript
if you are new to javascript, start with the articles in the learning area and the javascript guide.
...to get a better idea about the different technologies that are used when programming with javascript, consult the article javascript technologies overview.

JavaScript modules - JavaScript
the good news is that modern browsers have started to support module functionality natively, and this is what this article is all about.
... aside — .mjs versus .js throughout this article, we've used .js extensions for our module files, but in other resources you may see the .mjs extension used instead.

ReferenceError: deprecated caller or arguments usage - JavaScript
examples deprecated function.caller or arguments.callee.caller function.caller and arguments.callee.caller are deprecated (see the reference articles for more information).
... 'use strict'; function myfunc() { if (myfunc.caller == null) { return 'the function was called from the top!'; } else { return 'this function\'s caller was ' + myfunc.caller; } } myfunc(); // warning: referenceerror: deprecated caller usage // "the function was called from the top!" function.arguments function.arguments is deprecated (see the reference article for more information).

Digital audio concepts - Web media technologies
for details about the most important and useful ones for web developers to be familiar with, see the article guide to audio codecs used on the web.
... constrained storage (either because the storage space is small, or because there's a large amount of sound to store into it) a need to constrain the network bandwidth required to broadcast the audio; this is especially important for live streams and teleconferencing psychoacoustics 101 diving into the details of psychoacoustics and how audio compression works is far beyond the scope of this article, but it is useful to have a general idea of how audio gets compressed by common algorithms can help understand and make better decisions about audio codec selection.

CSS and JavaScript animation performance - Web Performance
in this article, we analyse the performance differences between css- and javascript-based animation.
...both of them are classified under the same css-based umbrella in this article.

PWA developer guide - Progressive web apps (PWAs)
in the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive web applications (pwas).
... --->>> titles below are just for the list; give articles good seo names and feel free to tweak those and this as needed...

How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
as mentioned before, to be able to receive push messages, you have to have a service worker, the basics of which are already explained in the making pwas work offline with service workers article.
... server.js the server part is written in node.js and needs to be hosted somewhere suitable, which is a subject for an entirely separate article.

Tutorials
html5 doctor articles about using html5 right now.
... how browsers work a detailed research article describing different modern browsers, their engines, page rendering etc.

Using shadow DOM - Web Components
this article covers the basics of using the shadow dom.
... high-level view this article assumes you are already familiar with the concept of the dom (document object model) — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an html document in the case of web documents).

Using templates and slots - Web Components
this article explains how you can use the <template> and <slot> elements to create a flexible template that can then be used to populate the shadow dom of a web component.
... a more involved example to finish off the article, let's look at something a little less trivial.

Index - XPath
16 comparison of css selectors and xpath css, draft, needscontent, reference, selectors, xpath this article seeks to document the difference between css selectors and xpath for web developers to be able to better choose the right tool for the right job.
... 57 xpath snippets example, snippets, xml, xpath, xslt this article provides some xpath code snippets.

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
he is the author of several articles and tutorials on various aspects of xml at ibm's extensive xml developer site.
... articles hands-on xsl author: don r.

Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
supported) starts-with() (supported) string() (supported) string-length() (supported) substring() (supported) substring-after() (supported) substring-before() (supported) sum() (supported) system-property() (supported) translate() (supported) true() (supported) unparsed-entity-url() (not supported) for further reading books online the world wide web consortium portals articles tutorials/examples mailing lists/newsgroups resources index original document information copyright information: copyright © 2001-2003 netscape.
... note: this reprinted article was originally part of the devedge site.

Communicating With Other Scripts - Archive of obsolete content
see the articles on using postmessage() and using port for details.

Cross-domain Content Scripts - Archive of obsolete content
"message", function(message) { console.log(message); }); the "page.html" file embeds an iframe whose content is served from "http://en.m.wikipedia.org/": <!doctype html> <!-- page.html --> <html> <head></head> <body> <iframe id="wikipedia" src="http://en.m.wikipedia.org/"></iframe> </body> </html> the "page-script.js" file locates "today's featured article" and sends its content to "main.js": // page-script.js var iframe = window.document.getelementbyid("wikipedia"); var todaysfeaturedarticle = iframe.contentwindow.document.getelementbyid("mp-tfa"); self.postmessage(todaysfeaturedarticle.textcontent); for this to work, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://en.m.wikip...

Classes and Inheritance - Archive of obsolete content
however, to fully appreciate how class works, and the problem it is supposed to solve, it is recommended that you read the entire article.

self - Archive of obsolete content
the package specification article explains the package.json file.

io/file - Archive of obsolete content
for now, you need to require("chrome") and use the xpcom directory service as described in this article about file i/o.

cfx to jpm - Archive of obsolete content
this article highlights the main differences between cfx and jpm.

jpm-mobile - Archive of obsolete content
this article is the reference for jpm-mobile.

Tools - Archive of obsolete content
articles listed here provide a reference for the sdk's tools: cfx enables you to test, run, and package add-ons.

Getting Started (jpm) - Archive of obsolete content
this article describes how to develop using jpm.

Tutorials - Archive of obsolete content
this page lists practical hands-on articles about how to accomplish specific tasks using the sdk.

Bootstrapped extensions - Archive of obsolete content
this article discusses how bootstrapped extensions work.

Autocomplete - Archive of obsolete content
turning autocomplete on for a xul widget this article is about xul widgets and not about html form inputs.

Bookmarks - Archive of obsolete content
this article offers examples for how to perform common bookmark management tasks using the bookmarks service.

Finding window handles - Archive of obsolete content
recall that nsibasewindow -> nativehandle returns the following in the different operating systems: windows - hwnd mac os x - nswindow* linux - gdkwindow* (it will be gdkwindow* no matter what desktop/window manager) is in use, for explanation why see the article: standard os libraries - unix section) windows components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsiwebnavigation) ...

Forms related code snippets - Archive of obsolete content
image preview before upload the filereader.prototype.readasdataurl() method can be useful, for example, to get a preview of an image before uploading it.[article] this example shows how to use it in this way.

On page load - Archive of obsolete content
this article is for xul/javascript developers who want to have custom code executed each time a new page is loaded in browser/mail.

SVG Animation - Archive of obsolete content
this article needs to be written!

StringView - Archive of obsolete content
see this article for other stuff.

JavaScript timers - Archive of obsolete content
this article provides a list of those.

Windows - Archive of obsolete content
this article offers code snippets demonstrating common tasks you may wish to perform.

Code snippets - Archive of obsolete content
general examples and demos from mdn articles a collection of examples and demos from articles.

Displaying web content in an extension without security issues - Archive of obsolete content
the following article explains these security mechanisms, ideally an extension that needs to display web content (which is always potentially dangerous) will use all of them.

Extension Etiquette - Archive of obsolete content
this article describes best practices when making extensions, including how to be kind to your users.

Adding windows and dialogs - Archive of obsolete content
read the article and its examples carefully, because there are many useful functions to use in the prompt service.

Handling Preferences - Archive of obsolete content
mdc articles and other guides are usually good at specifying the preferences you'll need to use.

Mozilla Documentation Roadmap - Archive of obsolete content
secondly, there are several important articles that are very lacking in information, like the preferences system page.

The Essentials of an Extension - Archive of obsolete content
also have a look at the plurals and localization article, that covers a localization feature in firefox that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.

Performance best practices in extensions - Archive of obsolete content
this article offers some best practices and suggestions that can not only improve the performance and speed of your extension, but also of firefox itself.

Security best practices in extensions - Archive of obsolete content
this article is about websites, but gives some insights into the general risks.

Signing an extension - Archive of obsolete content
this article describes how to digitally sign your extension for firefox and thunderbird, with a code signing certificate for object signing.

Case Sensitivity in class and id Names - Archive of obsolete content
note: this reprinted article was originally part of the devedge site.

Install.js - Archive of obsolete content
see also this article from xulplanet's main tutorial.