Search completed in 0.95 seconds.
Publishing your website - Learn web development
previous overview: getting started with the web next once you finish writing the code and organizing the files that make up your
website, you need to put it all online so people can find it.
... publishing a
website is a complex topic because there are many ways to go about it.
... getting hosting and a domain name to have more control over content and
website appearance, most people choose to buy web hosting and a domain name: web hosting is rented file space on a hosting company's web server.
...And 19 more matches
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.
... objective: be able to describe the differences between a web page, a
website, a web server, and a search engine.
...these are also often called just "pages."
website a collection of web pages which are grouped together and usually connected together in various ways.
...And 17 more matches
Website security - Learn web development
previous overview: first steps
website security requires vigilance in all aspects of
website design and usage.
... 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.
... what is
website security?
...And 16 more matches
How do I start to design my website? - Learn web development
so when you get an idea and want to turn it into a
website, there are a few questions you should answer before anything else: what exactly do i want to accomplish?
... how will a
website help me reach my goals?
... how could a
website bring me to my goals?
...And 12 more matches
Document and website structure - Learn web development
previous overview: introduction to html next in addition to defining individual parts of your page (such as "a paragraph" or "an image"), html also boasts a number of block level elements used to define areas of your
website (such as "the header", "the navigation menu", "the main content column").
... this article looks into how to plan a basic
website structure, and write the html to represent this structure.
... objective: learn how to structure your document using semantic tags, and how to work out the structure of a simple
website.
...And 12 more matches
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.
... objective: you will learn how to diagnose and resolve some basic issues you can run into with your
website.
... so you've published your
website online?
...And 9 more matches
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.
... prerequisites: you should already know the difference between webpages,
websites, web servers, and search engines.
... objective: learn which software components you need if you want to edit, upload, or view a
website.
...And 9 more matches
What will your website look like? - Learn web development
previous overview: getting started with the web next what will your
website look like?
... discusses the planning and design work you have to do for your
website before writing code, including "what information does my
website offer?", "what fonts and colors do i want?", and "what does my site do?" first things first: planning before doing anything, you need some ideas.
... what should your
website actually do?
...And 8 more matches
Server-side website programming first steps - Learn web development
prerequisites before starting this module, you don't need to have any knowledge of server-side
website programming, or indeed any other type of programming.
... what software do i need to build a
website?
...after reading this article, you'll understand the additional power available to
websites through server-side coding.
...And 5 more matches
How to fix a website with blocked mixed content - Web security
your
website may break if your
website delivers https pages, all active mixed content delivered via http on this pages will be blocked by default.
... consequently, your
website may appear broken to users (if iframes or plugins don't load, etc.).
... note that since mixed content blocking already happens in chrome and internet explorer, it is very likely that if your
website works in both of these browsers, it will work equally well in firefox with mixed content blocking.
...And 4 more matches
How do you host your website on Google App Engine? - Learn web development
google app engine is a powerful platform that lets you build and run applications on google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static
website.
... here's a step-by-step guide to hosting your
website on google app engine.
... have a look at the sample application's structure — the
website folder contains your
website content and app.yaml is your application configuration file.
...And 2 more matches
Server-side website programming - Learn web development
the dynamic
websites – server-side programming topic is a series of modules that show how to create dynamic
websites;
websites that deliver customised information in response to http requests.
... most major
websites use some kind of server-side technology to dynamically display data as required.
... learning pathway getting started with server-side programming is usually easier than client-side development, because dynamic
websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.
...And 2 more matches
Writing forward-compatible websites - Developer guides
this page explains how to write
websites that do not break when new browser versions are released.
... this is especially important for intranets and other non-public
websites; if we can't see your code, we can't see that it broke.
... it's not always possible to follow all of these, but following as many of them as possible will help future-proof your
website.
... code hygiene avoid missing > passing a validator is one way to ensure this, but even if your
website doesn't validate entirely you should make sure all your > characters are present.
Index - Learn web development
this set of articles aims to provide complete beginners to web development with all that they need to start coding
websites.
... accessibility, beginner, design, example, intro, mobile, needsactivelearning when you're building a
website, one top issue to consider is universal design: accommodating all users regardless of disability, technical constraints, culture, location, and so on.
... 16 how do i start to design my
website?
...And 34 more matches
Progressive web app structure - Progressive web apps (PWAs)
architecture of an app there are two main, different approaches to rendering a
website — on the server or on the client.
... server-side rendering (ssr) means a
website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content.
... client-side rendering (csr) allows the
website to be updated in the browser almost instantly when navigating to different pages, but requires more of an initial download hit and extra rendering on the client at the beginning.
...And 17 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
11 accessibility accessibility, glossary web accessibility (a11y) refers to best practices for keeping a
website usable despite physical and technical restrictions.
...(firefox os was also often called boot2gecko before the project had an official name.) 38 bootstrap bootstrap, css, glossary, intro, framework bootstrap is a free, open source html, css, and javascript framework for quickly building responsive
websites.
... 53 csp glossary, http, infrastructure a csp (content security policy) is used to detect and mitigate certain types of
website related attacks like xss and data injections.
...And 16 more matches
Common questions - Learn web development
what is the difference between webpage,
website, web server, and search engine?
... in this article we describe various web-related concepts: webpages,
websites, web servers, and search engines.
... the term "web server" can refer to the hardware or software that serves
websites to clients across the web — or both of them working together.
...And 15 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
architecture of an app there are two main, different approaches to rendering a
website — on the server or on the client.
... server-side rendering (ssr) means a
website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content.
... client-side rendering (csr) allows the
website to be updated in the browser almost instantly when navigating to different pages, but requires more of an initial download hit and extra rendering on the client at the beginning.
...And 14 more matches
How much does it cost to do something on the Web? - Learn web development
prerequisites: you should already understand what software you need, the difference between a webpage, a
website, etc., and what a domain name is.
... objective: review the complete process for creating a
website and find out how much each step can cost.
... summary when launching a
website, you may spend nothing, or your costs may go through the roof.
...And 13 more matches
How the Web works - Learn web development
dns: domain name servers are like an address book for
websites.
... when you type a web address in your browser, the browser looks at the dns to find the
website's real address before it can retrieve the
website.
... the browser needs to find out which server the
website lives on, so it can send http messages to the right place (see below).
...And 13 more matches
Dealing with files - Learn web development
previous overview: getting started with the web next a
website consists of many files: text content, code, stylesheets, media content, and so on.
... when you're building a
website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server.
... dealing with files discusses some issues you should be aware of so you can set up a sensible file structure for your
website.
...And 12 more matches
Getting started with the Web - Learn web development
the story of your first
website it's a lot of work to create a professional
website, so if you're new to web development, we encourage you to start small.
... you won't build another facebook right away, but it's not hard to get your own simple
website online, so we'll start there.
... installing basic software when it comes to tools for building a
website, there's a lot to pick from.
...And 11 more matches
Introduction to the server side - Learn web development
after reading this article you'll understand the additional power available to
websites through server-side coding.
... most large-scale
websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g.
... perhaps the most significant benefit of server-side code is that it allows you to tailor
website content for individual users.
...And 11 more matches
Storage access policy: Block cookies from trackers
report broken sites if you find a
website broken as a result of this change, file a bug under the tracking protection component within the firefox product on bugzilla.
... will this storage access policy block ads from displaying on my
website?
... no — this feature only restricts access to cookies and site data that can be used to track users across
websites.
...And 11 more matches
How do you upload your files to a web server? - Learn web development
open the filezilla application; you should see something like this: logging in for this example, we'll suppose that our hosting provider (the service that will host our http web server) is a fictitious company "example hosting provider" whose urls look like this: mypersonal
website.examplehostingprovider.net.
... your account is: demozilla your
website will be visible at demozilla.examplehostingprovider.net to publish to this account, please connect through sftp with the following credentials: sftp server: sftp://demozilla.examplehostingprovider.net username: demozilla password: quickbrownfox port: 5548 to publish on the web, put your files into the public/htdocs directory.
... let's first look at http://demozilla.examplehostingprovider.net/ — as you can see, so far there is nothing there: note: depending on your hosting provider, most of the time you'll see a page saying something like “this
website is hosted by [hosting service].” when you first go to your web address.
...And 8 more matches
What is a web server? - Learn web development
on the hardware side, a web server is a computer that stores web server software and a
website's component files.
...an http server can be accessed through the domain names of the
websites it stores, and it delivers the content of these hosted
websites to the end user's device.
...(if the server doesn't find the requested document, it returns a 404 response instead.) to publish a
website, you need either a static or a dynamic web server.
...And 7 more matches
Client-Server Overview - Learn web development
as most
website server-side code handles requests and responses in similar ways, this will help you understand what you need to do when writing most of your own code.
... objective: to understand client-server interactions in a dynamic
website, and in particular what operations need to be performed by server-side code.
... both static and dynamic
websites (discussed in the following sections) use exactly the same communication protocol/patterns.
...And 7 more matches
What is accessibility? - Learn web development
accessibility is the practice of making your
websites usable by as many people as possible.
...just as it is wrong to exclude someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a
website because they have a visual impairment.
... 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 6 more matches
What are hyperlinks? - Learn web development
prerequisites: you should know how the internet works and be familiar with the difference between a webpage, a
website, a web server, and a search engine.
...that said, there are some nuances worth considering: types of links internal link a link between two webpages, where both webpages belong to the same
website, is called an internal link.
... without internal links, there's no such thing as a
website (unless, of course, it's a one-page
website).
...And 6 more matches
From object to iframe — other embedding technologies - Learn web development
a short history of embedding a long time ago on the web, it was popular to use frames to create
websites — small parts of a
website stored in individual html pages.
...this is great for incorporating third-party content into your
website that you might not have direct control over and don't want to have to implement your own version of — such as video from online video providers, commenting systems like disqus, maps from online map providers, advertising banners, etc.
... there are some serious security concerns to consider with <iframe>s, as we'll discuss below, but this doesn't mean that you shouldn't use them in your
websites — it just requires some knowledge and careful thinking.
...And 6 more matches
Server-side web frameworks - Learn web development
abstract and simplify database access
websites use databases to store information both to be shared with users, and about users.
...for example, django was created to support development of a newspaper
website, so it's good for blogs and other sites that involve publishing things.
... caching support: as your
website becomes more successful then you may find that it can no longer cope with the number of requests it is receiving as users access it.
...And 6 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
maybe that's why color is one of the first things people often want to experiment with when learning to develop
websites.
... letting the user pick a color there are many situations in which your
website may need to let the user select a color.
... using color wisely making the right choices when selecting colors when designing a
website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory.
...And 6 more matches
Introduction to progressive web apps - Progressive web apps (PWAs)
for example, web apps are more discoverable than native apps; it's a lot easier and faster to visit a
website than to install an application, and you can also share web apps by simply sending a link.
...progressive enhancement and responsive design already allow us to build mobile friendly
websites.
... success stories there are many success stories of companies trying the pwa route, opting for an enhanced
website experience rather than a native app, and seeing significant measurable benefits as a result.
...And 6 more matches
Responsive design - Learn web development
historic
website layouts at one point in history you had two options when designing a
website: you could create a liquid site, which would stretch to fill the browser window or a fixed width site, which would be a fixed size in pixels.
... these two approaches tended to result in a
website that looked its best on the screen of the person designing the site!
...as mobile devices became more powerful and able to display full
websites, this was frustrating to mobile users who found themselves trapped in the site's mobile version and unable to access information they knew was on the full-featured desktop version of the site.
...And 5 more matches
The web and web standards - Learn web development
therefore anyone can write the code to build a
website for free, and anyone can contribute to the standards creation process, where the specs are written.
... html, css, and javascript html, css, and javascript are the main three technologies you'll use to build a
website: hypertext markup language, or html, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure.
... server-side languages and frameworks html, css, and javascript are front-end (or client-side) languages, which means they are run by the browser to produce a
website front-end that your users can use.
...And 5 more matches
Client-side storage - Learn web development
since the early days of the web, sites have used cookies to store information to personalize user experience on
websites.
...this api is designed for storing http responses to specific requests, and is very useful for doing things like storing
website assets offline so the site can subsequently be used without a network connection.
...you will see that if you load two
websites (say google.com and amazon.com) and try storing an item on one
website, it won't be available to the other
website.
...And 5 more matches
Introduction to client-side frameworks - Learn web development
now, javascript is an essential part of the web, used on 95% of all
websites, and the web is an essential part of modern life.
...these modern, complex, interactive
websites are often referred to as web applications.
... javascript frameworks power much of the impressive software on the modern web – including many of the
websites you likely use every day.
...And 5 more matches
How can we design for all types of users? - Learn web development
this article provides basic tips to help you design
websites for any kind of user.
... summary when you're building a
website, one top issue to consider is universal design: accommodating all users regardless of disability, technical constraints, culture, location, and so on.
... font size you can specify font size on a
website either through relative units or absolute units.
...And 4 more matches
What’s in the head? Metadata in HTML - Learn web development
try going to some of your favorite
websites and use the developer tools to check out their head contents.
...a lot of the features you'll see on
websites are proprietary creations, designed to provide certain sites (such as social networking sites) with specific pieces of information they can use.
... for example, open graph data is a metadata protocol that facebook invented to provide richer metadata for
websites.
...And 4 more matches
What is JavaScript? - Learn web development
for example: the twitter api allows you to do things like displaying your latest tweets on your
website.
... the google maps api and openstreetmap api allows you to embed custom maps into your
website, and other such functionality.
... browser security each browser tab has its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another
website.
...And 4 more matches
Multimedia: video - Learn web development
previous overview: performance next as we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average
website.
... for the average
website, 25% of bandwidth comes from video.
... optimizing video has the potential for very large bandwidth savings that translate into better
website performance.
...And 4 more matches
The "why" of web performance - Learn web development
overview: performance next web performance is all about making
websites fast, including making slow processes seem fast.
... web performance—and its assocatiated best practices—are vital for your
website visitors to have a good experience.
...the action being measured as the conversion rate depends on the
website's business goals.
...And 4 more matches
Translation phase
projects the mozilla projects and their l10n workflows are divided into these groups: mozilla applications, mozilla
websites, and add-ons.
... mozilla
websites so you're interested in localizing mozilla
websites.
... these are the l10n tools we use to localize mozilla web projects: pontoon a web-based, what-you-see-is-what-you-get (wysiwyg) l10n tool that allows you to localize mozilla
websites within the site itself.
...And 4 more matches
Creating hyperlinks - Learn web development
in a real
website, index.html would be our home page or landing page (a web page that serves as the entry point for a
website or a particular section of a
website.).
...however, you should use relative links wherever possible when linking to other locations within the same
website.
... when you link to another
website, you'll need to use an absolute link.
...And 3 more matches
Aprender y obtener ayuda - Learn web development
i want to learn enough to build a
website for my local amateur tennis club.
... i want to learn html and css so i can expand my job role to take over updating the content on our company
website.
... also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily, for example: html and css basics learnt by summer javascript basics learnt by december example
website project built by next april etc.
...And 3 more matches
SVN for Localizers
here you'll learn the process of using svn to obtain mozilla
website source files from the mozilla servers and pushing your localizations right back to them.
... mac os x users can find svn inside the command line tools (available on the apple developer
website), or use tools like homebrew or fink.
... note: we use the terms stage and prod (abbreviations of the terms staging and production) to refer to testing and publicly visible
websites, respectively.
...And 3 more matches
Index - Firefox Developer Tools
with the help of this tool you can figure out whether your
website is causing the browser to repaint more than it needs to.
... because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your
website's responsiveness.
...it's most familiar from film and gaming, but is now widely used as a performance measure for
websites and web apps.
...And 3 more matches
Migrating from Firebug - Firefox Developer Tools
that means, that when you open the devtools in a tab, they stay open even when you switch between different
websites.
...both allow you to debug javascript code executed on a
website.
... switch between sources firebug has a script location menu listing all javascript sources related to the
website.
...And 3 more matches
Reporting API - Web APIs
concepts and usage there are a number of different features and problems on the web platform that generate information useful to web developers when they are trying to fix bugs or improve their
websites in other ways.
... reports sent to endpoints can be retrieved independently of the running of the
websites they relate to, which is useful — a crash for example could bring down a web site and stop anything running, but a report could still be obtained to give the developer some clues as to why it happened.
... reporting observers reports can also be obtained via reportingobserver objects created via javascript inside the
website you are aiming to get reports on.
...And 3 more matches
Threats - Archive of obsolete content
website malware is a growing problem.
... business needs have changed the way
websites store sensistive data, with more usage of cloud services.
... but hackers may make out money, data and confidential information from your
website by infecting
website with malware.
...And 2 more matches
What text editors are available? - Learn web development
prerequisites: you should already know about various software you need to build a
website.
... summary a
website consists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely.
...most editors specify on their
website whether they support windows or mac, though some editors only support certain versions (say, only windows 7 or later and not vista).
...And 2 more matches
CSS basics - Learn web development
first, find the output from google fonts that you previously saved from what will your
website look like?.
... add the following lines (shown below), replacing the font-family assignment with your font-family selection from what will your
website look like?.
...change the color code to the color you chose in what will my
website look like?.
...And 2 more matches
JavaScript basics - Learn web development
previous overview: getting started with the web next javascript is a programming language that adds interactivity to your
website.
... javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a
website.
...as your javascript skills grow, your
websites will enter a new dimension of power and creativity.
...And 2 more matches
Making decisions in your code — conditionals - Learn web development
<label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my
website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; } select.onchange = function() { ( select.value === 'black' ) ?
... update('black','white') : update('white','black'); } here we've got a <select> element to choose a theme (black or white), plus a simple <h1> to display a
website title.
...the
website's background color is set to the first provided color, and its text color is set to the second provided color.
...And 2 more matches
Web performance - Learn web development
building
websites requires html, css, and javascript.
... to build
websites and applications people want to use, which attract and retain users, you need to create a good user experience.
...this is known as web performance, and in this module you'll focus on the fundamentals of how to create performant
websites.
...And 2 more matches
Deploying our app - Learn web development
netlify, amongst other things, also allows you to run pre-deployment tasks, which in our case means that all the production code build processes can be performed inside of netlify and if the build is successful, the
website changes will be deployed.
... the newly-created production code is placed in a new directory called dist, which contains all the files required to run the
website, ready for you to upload to a server.
... however, doing this step manually isn't our final aim — what we want is for the build to happen automatically and the result of the dist directory to be deployed live on our
website.
...And 2 more matches
Localizing with Pontoon
at mozilla, we use pontoon to localize all mozilla products and
websites, ranging from firefox to mozilla.org.
...note that for our purposes here, we'll be using firefox affiliates
website to demo pontoon's functionality and workflow.
... and there it is, opened inside pontoon: main toolbar as you can see, most of the interface is taken by the
website being translated.
...And 2 more matches
Creating localizable web applications
note: most of the code snippets used in the examples below come from an early version of the getpersonas.com
website.
...for example, if not all the pages of your
website are going to be localized, you may consider removing links to the english-only pages from the navigation (headers, footers, sidebars) in the localized versions.
...good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width: 10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also should be taken into account when designing the interaction on the
website.
...And 2 more matches
ARIA: Navigation Role - Accessibility
the navigation landmark role is used to identify major groups of links used for navigating through a
website or page content.
... <div role="navigation" aria-label="main"> <!-- list of links to main
website locations --> </div> this is a
website's main navigation.
...lists) of links that are intended to be used for
website or page content navigation.
...And 2 more matches
Accessibility documentation index - Accessibility
48 aria: navigation role aria, aria role, reference, role-navigation the navigation landmark role is used to identify major groups of links used for navigating through a
website or page content.
... 53 aria: article role aria, aria role, aria article role, article, article role, reference the 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.
... 58 aria: contentinfo role aria, aria role, reference, role-contentinfo the contentinfo landmark role is used to identify information repeated at the end of every page of a
website, including copyright information, navigation links, and privacy statements.
...And 2 more matches
Index - Developer guides
27 graphics on the web 2d, 3d, canvas, graphics, html5, svg, web, webgl, webrtc
websites and applications often need to present graphics, such as images.these articles provide insight into how you can accomplish this.
... there are several tools available to check the performance of a
website or blog.
... 43 writing forward-compatible
websites css, compatibility, dom, html, javascript, web development this page explains how to write
websites that do not break when new browser versions are released.
...And 2 more matches
Browser detection using the user agent - HTTP
there are ways to develop your
website to progressively enhance itself based on the availability of features rather than by targeting specific browsers.
...people use user agent sniffing to detect if the users' device is touch-friendly and has a small screen so they can optimize their
website accordingly.
...using this information of whether the device has a touchscreen, do not change the entire layout of the
website just for touch devices: you will only create more work and maintenance for yourself.
...And 2 more matches
Web security
ensuring that your
website or open web application is secure is critical.
... http strict-transport-security the strict-transport-security: http header lets a
website specify that it may only be accessed using https.
... how to fix a
website with blocked mixed content if your
website delivers https pages, all active mixed content delivered via http on these pages will be blocked by default.
...And 2 more matches
Index - Archive of obsolete content
231 downloading json and javascript in extensions ajax, add-ons, extensions, json, xmlhttprequest a common practice found in many extensions is using xmlhttprequest (or some other mechanism) to download javascript or json (they are different) from a remote
website.
... 241 firefox addons developer guide the original document is in japanese and distributed via the xuldev.org
website.
... so there may be still some reference to the xuldev
website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).
...they are actually replaced by ''-(example removed)-'' the goal of this handbook is to help you update
websites to work with standards-based browsers and properly detect gecko.
Confidentiality, Integrity, and Availability - Archive of obsolete content
if your bank records are posted on a public
website, everyone can know your bank account number, balance, etc., and that information can't be erased from their minds, papers, computers, and other places.
...imagine that you have a
website and you sell products on that site.
...another example of a failure of integrity is when you try to connect to a
website and a malicious attacker between you and the
website redirects your traffic to a different
website.
...if an attacker is not able to compromise the first two elements of information security (see above) they may try to execute attacks like denial of service that would bring down the server, making the
website unavailable to legitimate users due to lack of availability.
CSS and JavaScript accessibility best practices - Learn web development
form elements elements to allow users to input data into
websites: <div> <label for="name">enter your name</label> <input type="text" id="name" name="name"> </div> you can see some good example css in our form-css.html example (see it live also).
... color and color contrast when choosing a color scheme for your
website, make sure that the text (foreground) color contrasts well with the background color.
...a visually impaired user might want to make the text bigger on all
websites they visit, or a user with severe color deficiency might want to put all
websites in high contrast colors that are easy for them to see.
...sometimes you'll see a
website where everything has been done with javascript — the html has been generated by javascript, the css has been generated by javascript, etc.
WAI-ARIA basics - Learn web development
html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with
website designs.
...let's look at an example — our
website-no-roles example (see it live) has the following structure: <header> <h1>...</h1> <nav> <ul>...</ul> <form> <!-- search form --> </form> </nav> </header> <main> <article>...</article> <aside>...</aside> </main> <footer>...</footer> if you try testing the example with a screenreader in a modern browser, you'll already get some useful information.
...you can try taking a copy of our original files (see index.html and style.css), or navigating to our
website-aria-roles example (see it live), which has a structure like this: <header> <h1>...</h1> <nav role="navigation"> <ul>...</ul> <form role="search"> <!-- search form --> </form> </nav> </header> <main> <article role="article">...</article> <aside role="complementary">...</aside> </main> <footer>...</footer> we've also given you a bonus feature in this example — th...
...traditional static
websites with largely text content are therefore easy to make accessible for people with visual impairments.
Supporting older browsers - Learn web development
every
website is different in terms of target audience.
...this is straightforward if you have an existing
website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using.
... another popular way to find out about how well a feature is supported is the can i use
website.
... support doesn't mean "looks the same" a
website can’t possibly look the same in all browsers, because some of your users will be viewing the site on a phone and others on a large desktop screen.
What is CSS? - Learn web development
however, the web would be a boring place if all
websites looked like that.
...however, a key thing about css is that everyone works very hard to never change things in a way that would break old
websites.
... a
website built in 2000, using the limited css available then, should still be usable in a browser today!
...on each property page on mdn you can see the status of the property you are interested in, so you can tell if you will be able to use it on a
website.
What do common web layouts contain? - Learn web development
when designing pages for your
website, it's good to have an idea of the most common layouts.
... deeper dive let's study some more concrete examples taken from well-known
websites.
... as you see, you can craft stunning
websites even with just basic layouts.
... have a look at your own favorite
websites and ask yourself, where's the header, the footer, the main content, and the side content?
How do I use GitHub Pages? - Learn web development
github has a very useful feature called github pages, which allows you to publish
website code live on the web.
... preparing your code for upload you can store any code you like in a github repository, but to use the github pages feature to full effect, your code should be structured as a typical
website, e.g.
...to do this: point the command line to your test-site directory (or whatever you called the directory containing your
website).
...here's what you'd type if you've put your
website in a directory called test-site on your desktop: cd desktop/test-site when the command line is pointing inside your
website directory, type the following command, which tells the git tool to turn the directory into a git repository: git init an aside on command line interfaces the best way to upload your code to github is via the command line — this is a window where you type in commands to do things like create files and run programs, rather than clicking inside a user interface.
What is a Domain Name? - Learn web development
computers can handle such addresses easily, but people have a hard time finding out who's running the server or what service the
website offers.
... finding an available domain name to find out whether a given domain name is available, go to a domain name registrar's
website.
... getting a domain name the process is quite straightforward: go to a registrar's
website.
... it's also worth noting that some aspects of building a
website cost money.
What is accessibility? - Learn web development
summary because of physical or technical limitations, maybe your visitors can't experience your
website the way you hoped.
...what can the people in brazil do with your english
website?
... can the people with smartphones browse a heavy, cluttered
website designed for a large desktop monitor and unlimited bandwidth?
... more details please refer to: wikipedia article about accessibility wai (w3c's web accessibility initiative) next steps accessibility can impact both a
website's design and technical structure.
Getting started with HTML - Learn web development
edit the line below in the input area to turn it into a link to your favorite
website.
... playable code2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>a link to my favorite
website.</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.gete...
...); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage" target="_blank">favorite
website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); ...
...for example, if we revisit our link example from earlier, we could write a basic version with only the href attribute, like this: <a href=https://www.mozilla.org/>favorite
website</a> however, as soon as we add the title attribute in this way, there are problems: <a href=https://www.mozilla.org/ title=the mozilla homepage>favorite
website</a> as written above, the browser misinterprets the markup, mistaking the title attribute for three attributes: a title attribute with the value the, and two boolean attributes, mozilla and homepage.
Fetching data from the server - Learn web development
previous overview: client-side web apis next another very common task in modern
websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page.
... originally page loading on the web was simple — you'd send a request for a
website to a server, and as long as nothing went wrong, the assets that made the web page would be downloaded and displayed on your computer.
...this is because of security restrictions (for more on web security, read
website security).
... however, a complete
website would handle this error more gracefully by displaying a message on the user's screen and perhaps offering options to remedy the situation, but we don't need anything more than a simple console.log().
Introduction to web APIs - Learn web development
for example, the twitter api allows you to do things like displaying your latest tweets on your
website.
... common third-party apis third-party apis come in a large variety; some of the more popular ones that you are likely to make use of sooner or later are: the twitter api, which allows you to do things like displaying your latest tweets on your
website.
... the telegram apis allows you to embed content from telegram channels on your
website, in addition to providing support for bots.
... the pinterest api provides tools to manage pinterest boards and pins to include them in your
website.
Third-party APIs - Learn web development
many large
websites and services such as google maps, twitter, facebook, paypal, etc.
... prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how third-party apis work, and how to use them to enhance your
websites.
...the purpose of these is so that the user knows what is going on in the
websites they visit and is less likely to fall victim to someone using an api in a malicious way.
... summary this article has given you a useful introduction to using third-party apis to add functionality to your
websites.
Introduction to automated testing - Learn web development
automation makes things easy throughout this module we have detailed loads of different ways in which you can test your
websites and apps, and explained the sort of scope your cross-browser testing efforts should have in terms of what browsers to test, accessibility considerations, and more.
...to update node, the most reliable way is to download and install an updated installer package from their
website (see link above).
... as you click on the real time testing you will be directed to a screen where you can choose the browser configuration, browser version, os, and screen resolution with which you want to test your
website.
...once loaded, you can perform live, interactive cross-browser testing with a
website.
Handling common JavaScript problems - Learn web development
there are also many new apis appearing in recent browsers, which don't work in older browsers, for example: indexeddb api, web storage api, and others for storing
website data on the client-side.
... effects libraries: these libraries are designed to allow you to easily add special effects to your
websites.
... many developers implemented bad browser sniffing code and didn't maintain it, and browsers start getting locked out of using
websites containing features that they had since implemented.
... again, prefixed features were never supposed to be used in production
websites — they are subject to change or removal without warning, and cause cross browser issues.
Client-side tooling overview - Learn web development
with your code in a git repository, you can push it to your own server instance, or use a hosted source control
website such as github, gitlab, or bitbucket.
... deployment tools deployment systems allow you to get your
website published, are available for both static and dynamic sites, and commonly tend to work alongside testing systems.
... some thoughts about tooling types there's certainly an order in which the different tooling types apply in the development lifecycle, but rest assured that you don't have to have all of these in place to release a
website.
...this could be a full blown
website or it might be a single readme document in a code repository.
Learn web development
this set of articles aims to provide complete beginners to web development with all that they need to start coding
websites.
... frameworks and tooling: after mastering the essentials of vanilla html, css, and javascript, you should learn about client-side web development tools, and then consider digging into client-side javascript frameworks, and server-side
website programming.
... web performance — making
websites fast and responsive web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a user's bandwidth, screen size, network, or device capabilities.
... server-side
website programming even if you are concentrating on client-side web development, it is still useful to know how servers and server-side code features work.
Phishing: a short definition
this email will usually contain a link pretending to lead to the original service, but in reality, taking the victim to an attacker-controlled
website.
... the login portal might resemble the trusted
website's login page very closely, and convince users to enter their credentials, letting others hijack their account.
...after all, the browser plays an essential role in the scheme: a fake
website is loaded in a browser and here is the maker’s last chance to preventing fraud.
... since version 2.0, firefox has used google’s safebrowsing service, to detect known web forgeries, and display an alert instead of the fraudulent
website.
amIWebInstallListener
the registered amiwebinstalllistener is used to notify about new installs triggered by
websites.
... methods onwebinstallblocked() called when the
website is not allowed to directly prompt the user to install add-ons.
...onwebinstalldisabled() called when installation by
websites is currently disabled.
... onwebinstallrequested() called when a
website wants to ask the user to install add-ons.
Credential Management API - Web APIs
the credential management api lets a
website store and retrieve user, federated, and public key credentials.
... credential management concepts and usage this api lets
websites interact with a user agent’s password system so that
websites can deal in a uniform way with site credentials and user agents can provide better assistance with the management of their credentials.
...to address these problems, the credential management api provides ways for a
website to store and retrieve different types of credentials.
... federatedcredential provides information about credentials from a federated identity provider, which is an entity that a
website trusts to correctly authenticate a user, and which provides an api for that purpose.
FileSystemEntry.toURL() - Web APIs
if your site is located at http://my-awesome-
website.woot, and you have a temporary file system that contains an image file named awesomesauce.jpg, the url returned by tourl() might be (depending on the browser's implementation) something like "filesystem:http://my-awesome-
website.woot/temporary/awesomesauce.jpg".
... code that makes use of this might look like this: let img = document.createelement("img"); img.src = imagefileentry.tourl(); document.body.appendchild(img); assuming the scenario mentioned before the code, the result would be html that looks like this being appended to the end of the document: <img src="filesystem:http://my-awesome-
website.woot/temporary/awesomesauce.jpg"> browser compatibility the compatibility table on this page is generated from structured data.
...not for use in new
websites.deprecated.
... not for use in new
websites.
Index - Web APIs
683 credential management api api, credential management api, landing, needscontent, overview, reference, credential management this api lets
websites interact with a user agent’s password system so that
websites can deal in a uniform way with site credentials and user agents can provide better assistance with the management of their credentials.
...to address these problems, the credential management api provides ways for a
website to store and retrieve different types of credentials.
...a federated identity provider is an entity that a
website trusts to correctly authenticate a user, and that provides an api for that purpose.
... 1991 ajax navigation example this is an example of an ajax
website composed only of three pages (first_page.php, second_page.php and third_page.php).
Web Authentication API - Web APIs
web authentication concepts and usage the web authentication api (also referred to as webauthn) uses asymmetric (public-key) cryptography instead of passwords or sms texts for registering, authenticating, and second-factor authentication with
websites.
... many
websites already have pages that allow users to register new accounts or sign in to an existing account, and the web authentication api acts as a replacement or supplement to those on those existing webpages.
...id, transports: ["usb", "nfc", "ble"], type: "public-key" }]; getcredentialdefaultargs.publickey.allowcredentials = idlist; return navigator.credentials.get(getcredentialdefaultargs); }) .then((assertion) => { console.log("assertion", assertion); }) .catch((err) => { console.log("error", err); }); mozilla demo
website and its source code.
... google demo
website and its source code.
Choosing between www and non-www URLs - HTTP
a recurring question among
website owners is whether to choose non-www or www urls.
...it will make your
website appear more consistent to your users and to search engines.
... this includes always linking to the chosen domain (which shouldn't be hard if you're using relative urls in your
website) and always sharing links (by email/social networks, etc.) to the same domain.
... techniques for canonical urls there are different ways to choose which
website is canonical.
Feature Policy - HTTP
in a nutshell feature policy provides a mechanism to explicitly declare what functionality is used (or not used), throughout your
website.
... with feature policy, you opt-in to a set of "policies" for the browser to enforce on specific features used throughout a
website.
...in some cases, you may wish to strictly limit how such functionality is used on a
website.
... there are policy-controlled features to allow functionality to be enabled/disabled for specific origins or frames within a
website.
HTTP Index - HTTP
5 choosing between www and non-www urls guide, http, url a recurring question among
website owners is whether to choose non-www or www urls.
...there are ways to develop your
website to progressively enhance itself based on the availability of features rather than by targeting specific browsers.
... 65 alt-svc draft, http, http header, needscompattable, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this
website.
... 68 clear-site-data http, http header, reference, header the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting
website.
Progressive loading - Progressive web apps (PWAs)
bundling versus splitting many visitors won't go through every single page of a
website, yet the usual approach is to bundle every feature we have into one big file.
...during the few seconds between initial
website access and completion of loading, the user sees a blank page, which is a bad experience.
... images besides javascript and css,
websites will likely contain a number of images.
... when you include <img> elements in your html, then every referenced image will be fetched and downloaded during initial
website access.
Insecure passwords - Web security
websites that handle user data should use https to protect their users from attackers.
... if a
website uses http instead of https, it is trivial to steal user information (such as their login credentials).
... note on password reuse sometimes
websites require username and passwords but don't actually store data that is very sensitive.
...users use the same password across multiple sites (news
websites, social networks, email providers, banks).
Mixed content - Web security
the attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a
website.
... the risk involved with mixed content does depend on the type of
website the user is visiting and how sensitive the data exposed to that site may be.
... warnings in web console the firefox web console displays a mixed content warning message in the net pane when a page on your
website has this issue.
...you could also use an online crawler like ssl-check or missing padlock that will check your
website recursively and find links to insecure content.
Securing your site - Web security
http strict transport security the strict-transport-security: http header lets a
website specify that it may only be accessed using https.
... access control by configuring a
website it is the best way to secure your site.
... you can ignore specific ips, restrict access to certain areas of
website, protect different files, protect against image hotlinking, and a lot more.
... for example, .htaccess file is used for
websites hosted on apache http server.
Frequently Asked Questions - Archive of obsolete content
when you try to load svg files from some
websites you may get a dialogue asking you "what should firefox do with this file?".
...if that isn't the problem, then it may be that the server hosting the
website is misconfigured.
... individuals can choose to use a plugin to view svg in mozilla on their own computers, but there is no way for svg content authors to make mozilla use a plugin when people view the svg files on their
website.
Mozilla release FAQ - Archive of obsolete content
webpages mozilla project homepage netscape developer program
website mozillazine (news service) mozilla evangelism effort mozdev projects irc server: irc.mozilla.org channel #mozillazine note that recent versions of mozilla include an irc client.
...visit netscape's
website for help on that software.
...these instructions are included in the source tree, and are also available on the mozilla
website: detailed build instructions: unix/x win32 mac if your version of make chokes on the makefiles (on unix), you might not be using gnu make.
What is RSS - Archive of obsolete content
it wasn't really a format for syndication, but was a format for providing a summary of a
website.
...like rss 0.90, netscape's rss 0.91 was also a format for providing a summary of a
website, and not really a syndication format (as it is today).
...they can put it on their
website.
Common Firefox theme issues and solutions - Archive of obsolete content
address bar identity box is missing padlock icons for secure sites in firefox 14 and later the identity box has been significantly changed and the favicon has been replaced by an icon that indicates the
website's status.
... address bar "door hangers" door hanger sync panel not styled the sync panel at the bottom of the "door hanger" for the save password panel displayed when a user logs into a
website needs to be styled to match rest of panel including border.
... mozillazine themes forum mozillazine is not an official mozilla
website, but it does have the largest community of firefox theme developers and is a great resource.
Game monetization - Game development
there are more and more portals interested in showing your games on their
websites.
...some publisher
websites have that information easily available, while some others are harder to find.
...check out tuts+ game development or similar
websites for writing opportunities.
Game promotion - Game development
website and blog you should definitely create your own
website containing all the information about your games, so people can see what you've worked on.
... while you can create your
website from scratch, there are also tools that can help make the process easier.
... manakeep is a
website builder made for indie game developers and provides a great starting point to create your
website.
Cookie - MDN Web Docs Glossary: Definitions of Web-related terms
a cookie is a small piece of information left on a visitor's computer by a
website, via a web browser.
... cookies are used to personalize a user’s web experience with a
website.
... it may contain the user’s preferences or inputs when accessing that
website.
SEO - MDN Web Docs Glossary: Definitions of Web-related terms
seo (search engine optimization) is the process of making a
website more visible in search results, also termed improving search rankings.
...if you follow those rules closely when doing seo for a
website, you give the site the best chances of showing up among the first results, increasing traffic and possibly revenue (for ecommerce and ads).
...when exploring the
website, crawlers should only find the content you want indexed.
HTML: A good basis for accessibility - Learn web development
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 see that the layout markup no longer gets in the way and confuses the content readout.
...this link allows people to bypass content repeated throughout multiple pages on a
website, such as a
website's header and primary navigation.
HTML: A good basis for accessibility - Learn web development
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 see that the layout markup no longer gets in the way and confuses the content readout.
...this link allows people to bypass content repeated throughout multiple pages on a
website, such as a
website's header and primary navigation.
Mobile accessibility - Learn web development
these days, mobile devices can usually handle fully-featured
websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully.
... to make a
website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.
...always ensure resizing is enabled, and set the width to the device's width in the <head>: <meta name="viewport" content="width=device-width; user-scalable=yes"> you should never set user-scalable=no if at all possible — many people rely on zoom to be able to see the content of your
website, so taking this functionality away is a really bad idea.
Fundamental text and font styling - Learn web development
the browser will only apply a font if it is available on the machine the
website is being accessed on; if not, it will just use a browser default font.
... verdana sans-serif note: among various resources, the cssfontstack.com
website maintains a list of web safe fonts available on windows and macos operating systems, which can help you make your decision about what you consider safe for your usage.
...you can have an entire
website sized using em, which makes maintenance easy.
HTML basics - Learn web development
paragraphs as explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content: <p>this is a single paragraph</p> add your sample text (you should have it from what should your
website look like?) into one or a few paragraphs, placed directly below your <img> element.
... previous overview: getting started with the web next in this module installing basic software what will your
website look like?
... dealing with files html basics css basics javascript basics publishing your
website how the web works ...
Tips for authoring fast-loading HTML pages - Learn web development
suppose your
website server is located in the united states and it has a visitor from india; the page load time will be much higher for the indian visitor compared to a visitor from the us.
... a cdn is a geographically distributed network of servers that work together to shorten the distance between the user and your
website.
... cdns store cached versions of your
website and serve them to visitors via the network node closest to the user, thereby reducing latency.
Structuring a page of content - Learn web development
prerequisites: before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on document and
website structure.
... project brief for this project, your task is to take the content for the homepage of a bird watching
website and add structural elements to it so it can have a page layout applied to it.
...metadata in html html text fundamentals creating hyperlinks advanced text formatting document and
website structure debugging html marking up a letter structuring a page of content ...
Responsive images - Learn web development
objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on
websites.
...a typical
website may contain a header image and some content images below the header.
...ideally, you would have multiple resolutions available and serve the appropriate size depending upon the device accessing the data on the
website.
Measuring performance - Learn web development
general performance reporting tools tools like pagespeed insights can measure a
website’s performance.
...the report contains scores about how your
website is performing, both for mobile and desktop.
... try running your favorite
website now, on both webpagetest.org and pagespeed insights, and see what the scores are.
Multimedia: Images - Learn web development
previous overview: performance next media, namely images and video, account for over 70% of the bytes downloaded for the average
website.
... for the average
website, 51% of its bandwidth comes from imagery, followed by video at 25%, so it's safe to say it's important to address and optimize your multi-media content.
... loading strategy one of the biggest improvements to most
websites is lazy-loading images beneath-the-fold, rather than downloading them all on initial page load regardless of whether a visitor scrolls to see them or not.
What is web performance? - Learn web development
perceived performance: how fast a
website seems to the user has a greater impact on user experience than how fast the
website actually is.
...when you request a url and hit enter / return, the browser finds out where the server is that holds that
website's files, establishes a connection to it, and requests the files.
...we mention this briefly earlier on, but in brief, latency is the time it takes for your
website assets to travel from the server to a user's computer.
Handling common accessibility problems - Learn web development
when we say accessibility in the context of web technology, most people immediately think of making sure
websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the keyboard (or other non-mouse features) to activate
website functionality.
...really, the aim of accessibility is to make your
websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop computers.
... color and color contrast when choosing a color scheme for your
website, you should make sure that the text (foreground) color contrasts well with the background color.
Strategies for carrying out testing - Learn web development
this is fairly intuitive to set up; the most important field to get right is the
website url.
...for a basic
website, what you need to do is copy the
website tracking code block and paste it into all the different pages you want to track using google analytics on your site.
...the most common devices/browsers you'll want to test are as follows: the official android studio ide for developing android apps is a bit heavy weight for just testing
websites on google chrome or the old stock android browser, but it does come with a robust emulator.
Accessibility Features in Firefox
these smart keywords can be setup via the context menu for the search field on the desired
website.
...for example, you can disable functions that
websites use to move or resize windows, or to remove your status bar, to disable right-click contextual menus, change the status bar text, etc.
...developers, please see our dhtml accessibility documentation and get involved in writing tools and
websites using this new technology.
Localization content best practices
use ordered variables in string with multiple variables consider this string from /browser: generalsiteidentity=this
website is owned by %s\nthis has been verified by %s first thing: always add a localization comment explaining what these variables mean, even if it seems obvious.
... # localization note(generalsiteidentity): %1$s is the owner of the current
website, # %2$s is the name of the certification authority signing the certificate.
... generalsiteidentity=this
website is owned by %1$s\nthis has been verified by %2$s avoid concatenations, use placeholders instead consider this string: tos-text = by proceeding you accept the tos-link = terms of services most developers would consider this a good solution and display the concatenation of tos-text+tos-link, with an active link on the second part.
browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-
website (host) base.
... type:boolean default value:true exists by default: no application support:firefox 11.0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the
website (host) serving the file for download will be preselected in the file picker.
... if no download directory for the current
website has been stored, browser.download.lastdir will be used.
NSS 3.16.3 release notes
:df:75:38:02:05:00:e1:25:f5:c8:36 cn = quovadis root ca 3 g3 sha1 fingerprint: 48:12:bd:92:3c:a8:c4:39:06:e7:30:6d:27:96:e6:a4:cf:22:2e:7d the trust bits were changed for the following ca certificates ou = class 3 public primary certification authority sha1 fingerprint: a1:db:63:93:91:6f:17:e4:18:55:09:40:04:15:c7:02:40:b0:ae:6b turned off
websites and code signing trust bits (1024-bit root) ou = class 3 public primary certification authority sha1 fingerprint: 74:2c:31:92:e6:07:e4:24:eb:45:49:54:2b:e1:bb:c5:3e:61:74:e2 turned off
websites and code signing trust bits (1024-bit root) ou = class 2 public primary certification authority - g2 sha1 fingerprint: b3:ea:c4:47:76:c9:c8:1c:ea:f2:9d:95:...
... sha1 fingerprint: cb:a1:c5:f8:b0:e3:5e:b8:b9:45:12:d3:f9:34:a2:e9:06:10:d3:36 turned off
websites trust bit (change requested by ca) cn = netlock uzleti (class b) tanusitvanykiado sha1 fingerprint: 87:9f:4b:ee:05:df:98:58:3b:e3:60:d6:33:e7:0d:3f:fe:98:71:af turned off
websites and code signing trust bits (1024-bit root) cn = netlock expressz (class c) tanusitvanykiado sha1 fingerprint: e3:92:51:2f:0a:cf:f5:05:df:f6:de:06:7f:75:37:e1:65:ea:57:4...
...b turned off
websites and code signing trust bits (1024-bit root) bugs fixed in nss 3.16.3 this bugzilla query returns all the bugs fixed in nss 3.16.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.3 ...
NSS 3.18.1 release notes
notable changes in nss 3.18.1 the following ca certificate had the
websites and code signing trust bits restored to their original state to allow more time to develop a better transition strategy for affected sites.
... the
websites and code signing trust bits were turned off in nss 3.18.
...so, to give
website administrators more time to update their web servers, we reverted the trust bits back to being enabled.
NSS 3.34 release notes
ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_34_rtm/src/ notable changes in nss 3.34 the following ca certificates were added: cn = gdca trustauth r5 root sha-256 fingerprint: bf:ff:8f:d0:44:33:48:7d:6a:8a:a6:0c:1a:29:76:7a:9f:c2:bb:b0:5e:42:0f:71:3a:13:b9:92:89:1d:38:93 trust flags:
websites cn = ssl.com root certification authority rsa sha-256 fingerprint: 85:66:6a:56:2e:e0:be:5c:e9:25:c1:d8:89:0a:6f:76:a8:7e:c1:6d:4d:7d:5f:29:ea:74:19:cf:20:12:3b:69 trust flags:
websites, email cn = ssl.com root certification authority ecc sha-256 fingerprint: 34:17:bb:06:cc:60:07:da:1b:96:1c:92:0b:8a:b4:ce:3f:ad:82:0e:4a:a3:0b:9a:cb:c4:a7:4e:bd:ce:...
...bc:65 trust flags:
websites, email cn = ssl.com ev root certification authority rsa r2 sha-256 fingerprint: 2e:7b:f1:6c:c2:24:85:a7:bb:e2:aa:86:96:75:07:61:b0:ae:39:be:3b:2f:e9:d0:cc:6d:4e:f7:34:91:42:5c trust flags:
websites cn = ssl.com ev root certification authority ecc sha-256 fingerprint: 22:a2:c1:f7:bd:ed:70:4c:c1:e7:01:b5:f4:08:c3:10:88:0f:e9:56:b5:de:2a:4a:44:f9:9c:87:3a:25:a7:c8 trust flags:
websites cn = trustcor rootcert ca-1 sha-256 fingerprint: d4:0e:9c:86:cd:8f:e4:68:c1:77:69:59:f4:9e:a7:74:fa:54:86:84:b6:c4:06:f3:90:92:61:f4:dc:e2:57:5c trust flags:
websites, email cn = trustcor rootcert ca-2 sha-256 fingerprint: 07:53:e9:40:37:8c:1b:d5:e3:83:6e:39:5d:ae:a5:cb:83:9e:50:46:f1...
...:bd:0e:ae:19:51:cf:10:fe:c7:c9:65 trust flags:
websites, email cn = trustcor eca-1 sha-256 fingerprint: 5a:88:5d:b1:9c:01:d9:12:c5:75:93:88:93:8c:af:bb:df:03:1a:b2:d4:8e:91:ee:15:58:9b:42:97:1d:03:9c trust flags:
websites, email the following ca certificates were removed: cn = certum ca, o=unizeto sp.
SpiderMonkey compartments
this has some important implications: all objects created by a
website reside in the same compartment and hence are located in the same memory region.
...in the new model most objects touched by a
website are tightly packed next to each other in memory, with no cross-origin objects in between.
...it means that a "google.com" object can never accidentally leak into an untrusted
website such as "evil.com".
Starting WebLock
in general, the weblock service interface needs to include the following functionality: lock - enable web locking so that any browser in the gecko application is restricted to the white list of
website domains.
...this should allow any browser in the gecko application to browse any
website regardless of the white list.
... the next set of functionality manages the white list where acceptable domains are stored: void addsite(in string url); void removesite(in string url); attribute nsisimpleenumerator sites; operations in this set - add, remove, and enumerate - will be called from a user interface that manages the white list and adds the current
website to the white list.
nsILivemarkService
getsiteuri() this method retrieves the uri of the
website associated with a livemark container.
... return value a nsiuri representing the uri of the
website; if the livemark container doesn't have a valid site uri, null will be returned.
... setsiteuri() this method sets the uri of the
website associated with a livemark container.
Paint Flashing Tool - Firefox Developer Tools
with the help of this tool you can figure out whether your
website is causing the browser to repaint more than it needs to.
... because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your
website's responsiveness.
...so testing your
website with the paint flashing tool helps ensure that it's still performing optimally.
Storage Access API - Web APIs
as a consequence, users who wish to continue to interact with embedded content are forced to greatly relax their blocking policy for resources loaded from all embedded origins and possibly across all
websites.
...the embedding
website needs to add this to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ...
... safari implementation differences although the api surface is the same,
websites using the storage access api should expect differences in the level and extent of storage access they receive between firefox and safari.
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.
...if possible, use the html <aside> element instead.aria: contentinfo rolethe contentinfo landmark role is used to identify information repeated at the end of every page of a
website, including copyright information, navigation links, and privacy statements.
...if possible, you should use this element instead.aria: navigation rolethe navigation landmark role is used to identify major groups of links used for navigating through a
website or page content.aria: region rolethe region landmark role is used to identify an area in the document that the author has identified as significant.
Cognitive accessibility - Accessibility
using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; providing consistent web page layout and navigation; incorporating familiar elements, such as underlined links that are blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; making
website authentication as easy as possible without compromising security; and making forms easy to complete, such as with clear error messages and simple error recovery.
... wcag are guided by four principles:
websites must be perceivable, operable, understandable, and robust.
...
websites must conform with the w3c’s web content accessibility guidelines.
Accessibility Information for Web Authors - Accessibility
websites.
... dive into accessibility by mark pilgrim an excellent, easy-to-understand resource (available in english and in 9 other languages) on accessible
website authoring, which goes into greater depth.
... in 30 days, you will know why your
website should be accessible and how to make it more accessible.
Introduction to HTML5 - Developer guides
for detailed information about multiple browsers' support of html5 features, refer to the caniuse
website.
...until the introduction of html5, only the meaning of valid mark-up was defined, meaning that as soon as one small error was made in the mark-up (most
websites have at least one), the behavior was undefined.
... don't worry — you don't have to change anything on your
website.
<input type="hidden"> - HTML: Hypertext Markup Language
improving
website security hidden inputs are also used to store and submit security tokens or secrets, for the purposes of improving
website security.
... the basic idea is that if a user is filling in a sensitive form, such as a form on their banking
website to transfer some money to another account, the secret they would be provided with would prove that they are who they say they are, and that they are using the correct form to submit the transfer request.
...you need to use well-designed secrets to actually secure your
website.
Using Feature Policy - HTTP
be wary of this when implementing feature policy on your
website.
... enforcing best practices for good user experiences it's difficult to build a
website that uses all the latest best practices and provides great performance and user experiences.
... as the
website evolves, it can become even harder to maintain the user experience over time.
Link prefetching FAQ - HTTP
basically, there are two ways of looking at this issue:
websites can already cause things to be silently downloaded using js/dom hacks.
... it is important that
websites adopt <link> tag based prefetching instead of trying to roll-in silent downloading using various js/dom hacks.
...the user preference to disable <link> tag prefetching may simply encourage
websites to stick with js/dom hacks, and that would not be good for users.
How to turn off form autocompletion - Web security
this article explains how a
website can disable autocomplete for form fields.
... by default, browsers remember information that the user submits through <input> fields on
websites.
...as
website author, you might prefer that the browser not remember the values for such fields, even if the browser's autocomplete feature is enabled.
indexed-db - Archive of obsolete content
the database created will be unique and private per add-on, and is not linked to any
website database.
... the module cannot be used to interact with a given
website database.
Adding Events and Commands - Archive of obsolete content
this is because it would be very insecure to have a
website js controlling the behavior of firefox and running javascript code with chrome privileges.
... suppose your extension interacts with pages from a
website, and you want some actions on this site to trigger actions in your extension.
Firefox addons developer guide - Archive of obsolete content
rules: file and directory names: italic method and variable names: class name if you want to add a fixme, add: fixme: a message notes: the original document is in japanese and distributed via the xuldev.org
website.
... so there may be still some reference to the xuldev
website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).
Add-ons - Archive of obsolete content
firefox addons developer guide the original document is in japanese and distributed via the xuldev.org
website.
... so there may be still some reference to the xuldev
website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).
cert_override.txt - Archive of obsolete content
the key and the
website are not valid: # psm certificate override settings file # this is a generated file!
...some.
website.com:443 oid.2.16.840.1.101.3.4.2.1 00:11:22:33:44:55:66:77:88:99:aa:bb:cc:dd:ee:ff:ff:ee:dd:cc:bb:aa:99:88:77:66:55:44:33:22:11:00 u aaaaaaaaaaaaaaabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa== fields fields are separated by a tab character.
Mozilla Web Developer Community - Archive of obsolete content
ms mozilla news and development help mozilla (testing and development) mozdev.org mozillazine planet mozilla spread firefox standards communities get involved in grass-roots web standards evangelism efforts through these groups: the web standards project, a grassroots coalition fighting for standards maccaws, making a commercial case for web standards a list apart, for people who make
websites mozilla technology evangelism, get involved with mozilla evangelism you may also find helpful information on the w3c mailing lists newsletter there is no newsletter planned at this time.
...the list of old devedge feeds is at http://devedge-temp.mozilla.org/comm.../feedlist.html feedback hendrix mdnproduct feedback bugzilla - report a bug in a mozilla product for questions related to this
website (but not technical questions), please send your message to the mdc mailing list.
Plugins - Archive of obsolete content
mozilla encourages
website developers to avoid using plugins wherever possible and use standard web apis instead.
... site author guide for click-to-activate plugins these guidelines will help
website authors use plugins when they are blocked by default with the firefox click-to-activate feature.
Vulnerabilities - Archive of obsolete content
website vulnerabilities owasp or open web security project is a non-profit charitable organization focused on improving the security of software and web applications.
... here are six of the most common
website vulnerabilities you must protect yourself against.
RDF in Mozilla FAQ - Archive of obsolete content
statements about the same rdf resource can then be intermingled: for example, the "last visit date" of a particular
website comes from the "browser global history" datasource, and the "shortcut keyword" that you can type to reach that
website comes from the "browser bookmarks" datasource.
... both datasources refer to "
website" by url: this is the "key" that allows the datasources to be "merged" effectively.
Game distribution - Game development
an html5 game is just another
website.
...some of these take your files and host them on their server, whereas others only link to your
website or embed your game on their site.
WebVR — Virtual Reality for the Web - Game development
for more info be sure to visit the mozvr.com and webvr.info
websites.
... there's also a markup framework called a-frame that offers simple building blocks for webvr, so you can rapidly build and experiment with vr
websites and games: read the building up a basic demo with a-frame tutorial for more details.
Card sorting - MDN Web Docs Glossary: Definitions of Web-related terms
card sorting is a simple technique used in information architecture whereby people involved in the design of a
website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then organize those features into categories or groupings.
... this can be used for example to work out what should go on each page of a
website.
Favicon - MDN Web Docs Glossary: Definitions of Web-related terms
a favicon (favorite icon) is a tiny icon included along with a
website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.
... note, however, that most modern browsers replaced the favicon from the address bar by an image indicating whether or not the
website is using https.
Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
this non-exhaustive list gives you an idea of which standards
websites and network systems must conform to: ietf (internet engineering task force): internet standards (std), which among other things govern set-up and use of uris, http, and mime w3c: specifications for markup language (e.g., html), style definitions (i.e., css), dom, accessibility iana (internet assigned numbers authority): name and number registries ecma intl.: scripting standards, most promi...
...nently for javascript iso (international organization for standardization): standards governing a diverse array of aspects, including character encodings,
website management, and user-interface design learn more general knowledge web standards on wikipedia ...
Organizing your CSS - Learn web development
it's a pattern we see all over
websites for comments, listings, and so on.
...by using the include functionality in sass (partials) these can then all be compiled together into one, or a small number of stylesheets to actually link into your
website.
Styling links - Learn web development
in addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a
website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site.
...the final article in our styling text module details how to use custom fonts on your
websites, or web fonts as they are better known.
Client-side form validation - Learn web development
read
website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.
...there are many ways that malicious users can misuse unprotected forms to damage the application (see
website security).
The HTML5 input types - Learn web development
read
website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.
... another feature worth noting is that the values of a search field can be automatically saved and re-used to offer auto-completion across multiple pages of the same
website; this tends to happen automatically in most modern browsers.
Sending form data - Learn web development
note: to get a better idea of how client-server architectures work, read our server-side
website programming first steps module.
... the
website security article of our server-side learning topic discusses a number of common attacks and potential defences against them in detail.
Installing basic software - Learn web development
overview: getting started with the web next in this module installing basic software what will your
website look like?
... dealing with files html basics css basics javascript basics publishing your
website how the web works ...
Images in HTML - Learn web development
you'll almost always keep the images for your
website on the same server as your html.
...in addition, never point your src attribute at an image hosted on someone else's
website that you don't have permission to link to.
Client-side web APIs - Learn web development
fetching data from the server another very common task in modern
websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entirely new page.
...many large
websites and services such as google maps, twitter, facebook, paypal, etc.
Perceived performance - Learn web development
previous overview: performance next perceived performance is how fast a
website seems to the user.
...how fast a
website feels like it's loading and rendering has a greater impact on user experience than how fast the
website actually loads and renders.
Getting started with Ember - Learn web development
examples include: prember: static
website rendering for blogs or marketing content.
...there are a couple of github issues open about this on the todomvc family of projects: add keyboard access to demos re-enable outline on focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for
website / app design.
Framework main features - Learn web development
suppose you're building a
website for an online magazine, and you need to be sure that each contributing writer gets credit for their work.
...just like you can write html tags inside each other to build a
website, you can use components inside other components to build a web application.
Getting started with React - Learn web development
adding a compiler like babel to a
website makes the code on it run slowly, so developers often set up such tooling with a build step.
... it's possible to add react to a
website without create-react-app by copying some <script> elements into an html file, but the create-react-app cli is a common starting point for react applications.
Introducing a complete toolchain - Learn web development
netlify is a hosting service for static
websites (that is,
websites that entirely consist of files that do not change in real time), which lets us deploy multiple times a day and freely hosts static sites of all kinds.
... git can be downloaded and installed via the git-scm
website — download the relevant installer for your system, run it, and follow the on-screen prompts.
CSUN Firefox Materials
websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage.
...these smart keywords can be setup via the context menu for the search field on the desired
website.
Index
at mozilla, we use pontoon to localize all mozilla products and
websites, ranging from firefox to mozilla.org.
...here you'll learn the process of using svn to obtain mozilla
website source files from the mozilla servers and pushing your localizations right back to them.
Creating localizable web content
if the screenshot shows the application that the
website directly relates to (firefox on mozilla.com/firefox, personas on getpersonas.com), try to use screenshots from the localized version.
... if however the screenshot shows a third-party application or
website, it's acceptable to use the english version if it's not available in the target language.
Preference reference
changes require an application restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-
website (host) base.
...ther the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets
websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
A Web PKI x509 certificate primer
self-sign csr (using sha256) and append the extensions described in the file "openssl x509 -req -sha256 -days 3650 -in example.csr -signkey key.pem -set_serial $any_integer -extfile openssl.ss.cnf -out example.pem" you can now use example.pem as your certfile cas included in firefox when you visit a secure
website, firefox will validate the
website’s certificate by checking that the certificate that signed it is valid, and checking that the certificate that signed the parent certificate is valid and so forth up to a root certificate that is known to be valid.
...*.yourcompany.com) but you want others outside of your organization to be able to browse to your
website using https without having to manually import a root certificate, then you can get an ssl certificate from one of the cas who already have a root certificate included in the major browsers.
Using the Places livemark service
determine whether a folder is a livemark you can use the nsilivemarkservice.islivemark() method to determine whether or not a given folder is a livemark container: if (livemarkservice.islivemark(folderid)) { // it's a livemark } else { // it's not a livemark } accessing the container's site uri the nsilivemarkservice.getsiteuri() method lets you obtain the nsiuri of the
website associated with a livemark container.
...nsilivemarkservice.setsiteuri() sets the uri of the
website associated with a livemark container.
nsIContentPrefService
provides a way for extensions and browser code to save preferences for specific
websites.
... preferences are saved as key/value pairs on a per-
website basis.
Zombie compartments
website) goes into its own compartment.
...in the results, you'll find a js-main-runtime-compartments tree (whcih you may need to expand further) that lists all system (firefox and add-ons) and user (
website) compartments, these compartments are also listed in more detail in the explicit allocations section.
Standard OS Libraries
because gnome is in the name of the
websites don't get confused and think this only works on gnome.
... core foundation to learn about all the mac os x apis and which library file you will need to call, go to the mac developer library
website and find the function, then scroll down to "declared in" section, and find which framework contains the header file.
Accessibility Inspector - Firefox Developer Tools
a (very) brief guide to accessibility accessibility is the practice of making your
websites usable by as many people as possible.
... color contrast contrast ratio information is particularly useful when you are designing the color palette for your
website because if the contrast is not sufficient, readers with visual impairments such as low vision or color blindness will be unable to read the text.
Frame rate - Firefox Developer Tools
frame rate is a measure of a
website's responsiveness.
...it's most familiar from film and gaming, but is now widely used as a performance measure for
websites and web apps.
Animating CSS properties - Firefox Developer Tools
transform opacity the css triggers
website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine.
... if you want to play along, the demo
website is here.
Intensive JavaScript - Firefox Developer Tools
if you want to play along you can find the demo
website here.
... there's also a video version of this walkthrough: the demo
website looks like this: it has three controls: a radio button group to control how to run the javascript: as a single blocking operation in the main thread, as a series of smaller operations in the main thread using requestanimationframe(), or in another thread using a worker.
Responsive Design Mode - Firefox Developer Tools
responsive design is the practice of designing a
website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.
...responsive design mode gives you a simple way to simulate these factors, to test how your
website will look and behave on different devices.
Firefox Developer Tools
responsive design mode see how your
website or app will look and behave on different devices and network types.
... get involved our community
website explains how to get involved.
Payment Request API - Web APIs
accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every
website without developers needing to do anything.
... merchantvalidationevent represents the browser requiring the merchant (
website) to validate themselves as allowed to use a particular payment handler (e.g., registered as allowed to use apple pay).
Web Push API Notifications best practices - Web APIs
it shows right up on your desktop even when the
website is shut.
...you can build trust by having a well-designed
website that provides good content that shows respect for the user, and a clear value to accepting push notifications.
Web Audio API best practices - Web APIs
user control if your
website or application contains sound, you should allow the user control over it, otherwise again, it will become annoying.
... bearing this in mind, if your
website or application requires timing and scheduling, it's best to stick with the audioparam methods for setting values.
Window: online event - Web APIs
note: this event shouldn't be used to determine the availability of a particular
website.
... network problems or firewalls might still prevent the
website from being reached.
ARIA: contentinfo role - Accessibility
the contentinfo landmark role is used to identify information repeated at the end of every page of a
website, including copyright information, navigation links, and privacy statements.
... <div role="contentinfo"> <h2>footer</h2> <!-- footer content --> </div> this is a
website footer.
Color contrast - Accessibility
it is good to have a cool design on your
website, but the design is worthless if your users can't read your content.
... background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when choosing a color scheme for your
website, choose foreground and background colors that have good contrast.
Viewport concepts - CSS: Cascading Style Sheets
in fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the
website, which can be much taller or wider than the viewport.
...for example, if a mobile screen has a width of 320px, a
website might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 320px space, which, depending on the design, is illegible for many if not everyone.
box-align - CSS: Cascading Style Sheets
not for use in new
websites.deprecated.
... not for use in new
websites.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
box-direction - CSS: Cascading Style Sheets
not for use in new
websites.deprecated.
... not for use in new
websites.user must explicitly enable this feature.user must explicitly enable this feature.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
Event reference
online event html5 offline the browser has gained access to the network (but particular
websites might be unreachable).
... beforeinstallprompt event chrome specific a user is prompted to save a
website to a home screen on mobile.
Mobile-friendliness - Developer guides
goal #1 (presentation) “make
websites that work well on a variety of screen sizes.” these days, users can access the web on devices in a wide range of form factors, including phones, tablets, and ereaders.
...a great example of this is alaska air’s
website.
<a>: The Anchor element - HTML: Hypertext Markup Language
websites can make phone calls with registerprotocolhandler, such as web.skype.com.
... using target="_blank" without rel="noreferrer" and rel="noopener" makes the
website vulnerable to window.opener api exploitation attacks (vulnerability description), although note that, in newer browser versions (e.g.
HTML: Hypertext Markup Language
"hypertext" refers to links that connect web pages to one another, either within a single
website or between
websites.
... html forms forms are a very important part of the web — these provide much of the functionality you need for interacting with
websites, e.g.
Clear-Site-Data - HTTP
the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting
website.
... examples sign out of web site if a user signs out of your
website or service, you might want to remove locally stored data.
Index - HTTP
17 alt-svc draft, http, http header, needscompattable, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this
website.
... 20 clear-site-data http, http header, reference, header the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting
website.
SameSite cookies - HTTP
values the samesite attribute accepts three values: lax cookies are allowed to be sent with top-level navigations and will be sent along with get request initiated by third party
website.
... strict cookies will only be sent in a first-party context and not be sent along with requests initiated by third party
websites.
Strict-Transport-Security - HTTP
description if a
website accepts a connection through http and redirects to https, visitors may initially communicate with the non-encrypted version of the site before being redirected, if, for example, the visitor types http://www.foo.com/ or even just foo.com.
...2 years is, however, the recommended goal as a
website's final hsts configuration as explained on https://hstspreload.org.
HTTP headers - HTTP
cookies, storage, cache) associated with the requesting
website.
...actual documentation can be found on the
website of the http working group.
Introduction - JavaScript
there are also more advanced server side versions of javascript such as node.js, which allow you to add more functionality to a
website than simply downloading files (such as realtime collaboration between multiple computers).
...you can also find the specification on the ecma international
website.
OpenSearch description format
the opensearch description format lets a
website describe a search engine for itself, so that a browser or other client application can use that search engine.
... reference material opensearch documentation safari 8.0 release notes: quick
website search microsoft edge dev guide: search provider discovery the chromium projects: tab to search imdb.com has a working osd.xml opensearch plugin generator ready2search - create opensearch plugins.
Animation performance and frame rate - Web Performance
transform opacity the css triggers
website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine.
... if you want to play along, the demo
website is here.
Web Performance
more important than how fast your
website is in milliseconds, is how fast your users perceive your site to be.
... html performance features some attributes and the source order of your mark-up can impact the performance or your
website.
Types of attacks - Web security
(click-jacking is sometimes called "user interface redressing", though this is a misuse of the term "redress".) cross-site request forgery (csrf) cross-site scripting (xss) cross-site scripting (xss) is a security exploit which allows an attacker to inject into a
website malicious client-side code.
... reflected xss attacks when a user is tricked into clicking a malicious link, submitting a specially crafted form, or browsing to a malicious site, the injected code travels to the vulnerable
website.
Tutorials
advanced level html forms forms are a very important part of the web — these provide much of the functionality you need for interacting with
websites, e.g.
... client-side web apis when writing client-side javascript for
websites or applications, you won't go very far before you start to use apis — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other
websites or services.
request - Archive of obsolete content
since the request is not being made by any particular
website, requests made here are not subject to the same-domain restriction that requests made in web pages are subject to.
Code snippets - Archive of obsolete content
de tabbed browser code (firefox/seamonkey) basic operations, such as page loading, with the tabbed browser, which is the heart of mozilla's browser applications cookies reading, writing, modifying, and removing cookies page loading code used to load pages, reload pages, and listen for page loads interaction between privileged and non-privileged code how to communicate from extensions to
websites and vice-versa.
JavaScript Client API - Archive of obsolete content
further, you agree (a) to maintain and link to (including on
websites from which your third party client may be downloaded) a separate, conspicuous, and reasonably detailed privacy policy detailing how data collected or transmitted by your third party client is managed and protected; (b) that your third party client will only store data in encrypted form on the firefox sync servers operated by mozilla; (c) that you and your third party client will use the firefox ...
Plug-n-Hack - Archive of obsolete content
for example, to configure a browser to use an intercepting proxy that can handle https traffic, the user must typically: configure their browser to proxy via the tool configure the tool to proxy via their corporate proxy import the tool’s ssl certificate into their browser if any of these steps are carried out incorrectly then the browser will typically fail to connect to any
website – debugging such problems can be frustrating and time-consuming.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.accessibility - oct 6, 2006 announcements legal precedent set for web accessibility us federal court rules that retailers may be sued if its
website is inaccsessible.
2006-10-13 - Archive of obsolete content
(user feels print belongs on the context menu along with back, reload, etc.) questions about programming for firefox a student questions how to create an extension that changes fonts, and how to capture
website content before it is displayed.
2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - september 22-29, 2006 announcements development for thunderjudge extension is put on hold the author of the thunderjudge extension is currently putting the development of the extension on hold due to several issues (more details available at the
website).
2006-11-10 - Archive of obsolete content
good ideas a splinter off of the extended validation certificates discussion going over whether or not fraudulent
websites may get these certificates and if so how to prevent this from happening.
References - Archive of obsolete content
from matt kruse debugging html and css is a well designed
website explaining well the how, why and where of html validation, css validation and debugging tools.
Archive of obsolete content
they are actually replaced by ''-(example removed)-'' the goal of this handbook is to help you update
websites to work with standards-based browsers and properly detect gecko.
2D maze game with device orientation - Game development
ody> <script> (function() { var game = new phaser.game(320, 480, phaser.canvas, 'game'); game.state.add('boot', ball.boot); game.state.add('preloader', ball.preloader); game.state.add('mainmenu', ball.mainmenu); game.state.add('howto', ball.howto); game.state.add('game', ball.game); game.state.start('boot'); })(); </script> </body> </html> so far we have a simple html
website with some basic content in the <head> section: charset, title, css styling and the inclusion of the javascript files.
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
the united states computer emergency readiness team (us-cert) defines symptoms of denial-of-service attacks to include: unusually slow network performance (opening files or accessing
websites) unavailability of a particular
website inability to access any
website dramatic increase in the number of spam emails received—(this type of dos attack is considered an email bomb) disconnection of a wireless or wired internet connection longterm denial of access to the web or any internet services learn more general knowledge denial-of-service attack on wikipedia ...
MitM - MDN Web Docs Glossary: Definitions of Web-related terms
learn more owasp article: man-in-the-middle attack wikipedia: man-in-the-middle attack the public-key-pins header (hpkp) can significantly decrease the risk of mitm by instructing browsers to require a whitelisted certificate for all subsequent connections to that
website.
Polyfill - MDN Web Docs Glossary: Definitions of Web-related terms
at the time, javascript developers were grasping at straws trying to get their
website to work across all devices because there was such a discrepancy between browsers that the
website might have to be programmed radically differently and have a much different user interface based upon the user's browser.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
they are most relevant when there are a plethora of links to external
websites that may be clicked on, like search engine results, dns prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
); the above code carries out the same function as the following code: window.onload = function() { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery official
website technical information offical api reference documentation ...
Advanced styling effects - Learn web development
mainly for browser compatibility — so many web developers have started implementing
websites with -webkit- prefixes that it started to look like the other browsers were broken, whereas in actual fact they were following the standards.
Flexbox - Learn web development
however you should be aware that there are still older browsers in use that don't support flexbox (or do, but support a really old, out-of-date version of it.) while you are just learning and experimenting, this doesn't matter too much; however if you are considering using flexbox in a real
website you need to do testing and make sure that your user experience is still acceptable in as many browsers as possible.
Grids - Learn web development
they help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our
websites.
Practical positioning examples - Learn web development
this includes information-heavy apps like strategy/war games, mobile versions of
websites where the screen is narrow and space is limited, and compact information boxes where you might want to make lots of information available without having it fill the whole ui.
CSS FAQ - Learn web development
the use of such properties on production
websites is not recommended — they have already created a huge web compatibility mess.
Web fonts - Learn web development
web fonts are a css feature that allows you to specify font files to be downloaded along with your
website as it is accessed, meaning that any browser that supports web fonts can have exactly the fonts you specify available to it.
Test your skills: HTML5 controls - Learn web development
create appropriate inputs for a user to update their details for: email
website phone number favourite color try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor.
Debugging HTML - Learn web development
metadata in html html text fundamentals creating hyperlinks advanced text formatting document and
website structure debugging html marking up a letter structuring a page of content ...
HTML text fundamentals - Learn web development
metadata in html html text fundamentals creating hyperlinks advanced text formatting document and
website structure debugging html marking up a letter structuring a page of content ...
Marking up a letter - Learn web development
metadata in html html text fundamentals creating hyperlinks advanced text formatting document and
website structure debugging html marking up a letter structuring a page of content ...
Introduction to HTML - Learn web development
document and
website structure as well as defining individual parts of your page (such as "a paragraph" or "an image"), html is also used to define areas of your
website (such as "the header," "the navigation menu," or "the main content column.") this article looks into how to plan a basic
website structure and how to write the html to represent this structure.
Image gallery - Learn web development
previous overview: building blocks now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by getting you to build a fairly common item you'll see on a lot of
websites — a javascript-powered image gallery.
JavaScript building blocks - Learn web development
image gallery now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of
websites — a javascript-powered image gallery.
Useful string methods - Learn web development
conclusion you can't escape the fact that being able to handle words and sentences in programming is very important — particularly in javascript, as
websites are all about communicating with people.
JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average
website, byte per byte, javascript has a greater negative impact on performance.
Information for users
firefox accessibility skins and themes at the excellent access firefox
website, you will find many valuable resources, including a list of firefox themes that have been specially designed for those with low vision: themes with high color constrast themes with big icons themes with extra large and bright icons themes with extra large and extra bold text join the mozilla accessibility community live chat both end users and developers are invited for d...
Links and Resources
dive into accessibility - another great, easy-to-understand resource on accessible
website authoring.
Accessibility and Mozilla
websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage.embedding api for accessibilityevent process procedurethis diagram outlines how events are processed within gecko.
Add-ons
among other things, an add-on could: change the appearance or content of particular
websites modify the firefox user interface add new features to firefox there are several types of add-ons, but the most common type are extensions.
Benchmarking
flash plugin if you are profiling real
websites, you should disable the adobe flash plugin so you are testing firefox code and not flash jank problems.
What to do and what not to do in Bugzilla
reports of problems with specific
websites that result from bad coding practices already determined to be “tech evangelism” cases by the module owner or peer, or problems that result from the use of proprietary technology, should be be moved to the tech evangelism product rather than being resolved as invalid.
Getting documentation updated
it may see periodical improvements or updates, and may eventually even be cleaned up (and de-archived) for better uxp focus, but for now, it's a historical snapshot for reference, not a living
website.
Multiple Firefox profiles
web developers might want a secondary profile for testing
websites, apps, or other projects on different firefox channels.
Site Identity Button
depending on the configuration of your
website, this button may display a number of different icons.
Using the Browser API
when this fires, we set the value inside the url bar input to be equal to the event object detail property — this is so that the url displayed continues to match the
website being shown when the user navigates back and forth through the history.
HTMLIFrameElement.getStructuredData()
examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getstructureddata(); request.onsuccess = function() { console.log(request.result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the
website of british alt-country band salter cane) will result in a json object being returned, along the lines of: { "items": [ { "type":["http://microformats.org/profile/hcard"], "properties":{"fn":["chris askew"], "n":[ { "properties": { "given-name":["chris"], "family-name":["askew"], ...
Localizing without a specialized tool
this string can easily be found in the browser ui by visiting a
website that provides a search plugin (like http://developer.mozilla.org/) and clicking on the drop-down arrow in the search box in the upper-right corner of your browser.
Initial setup
svn svn is a revision control environment that mozilla uses to house mozilla source
websites and their localizations for each official mozilla localization.
QA phase
if you're localizing mozilla
websites, your work will display soon after you've committed it without needing a language pack.
Are We Slim Yet
the are we slim yet project (commonly known as awsy) for several years tracked memory usage across builds on the (now defunct)
website areweslimyet.com.
Power profiling overview
if the problem manifests on a particular
website, try saving a local copy of the site and then manually removing html elements to see if a particular page feature is causing the problem many power problems are caused by either high cpu usage or high wakeup frequency.
about:memory
if you are using a communication channel where only text can be sent, such as a comment thread on a
website, click on the "measure..." button.
dom.event.clipboardevents.enabled
dom.event.clipboardevents.enabled lets
websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
L20n HTML Bindings
consider the following source html: <p data-l10n-id="save"> <input type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <input value="save" type="text"> or <a href="http://myevil
website.com" onclick="alert('pwnd!')" title="back to the homepage">cancel</a>.
An overview of NSS Internals
that's a good opportunity to talk about ssl/tls connections to servers in general (not just ev, not just
websites).
Index
that's a good opportunity to talk about ssl/tls connections to servers in general (not just ev, not just
websites).
NSS 3.16.4 release notes
it was removed in nss 3.16.3, but discussion in the mozilla.dev.security.policy forum led to the decision to keep this root included longer in order to give
website administrators more time to update their web servers.
NSS 3.17.3 release notes
:63:99:d2:7d:7f:90:44:c9:fe:b3:f3:3e:fa:9a cn = america online root certification authority 1 sha-1 fingerprint: 39:21:c1:15:c1:5d:0e:ca:5c:cb:5b:c4:f0:7d:21:d8:05:0b:56:6a cn = america online root certification authority 2 sha-1 fingerprint: 85:b5:ff:67:9b:0c:79:96:1f:c8:6e:44:22:00:46:13:db:17:92:84 the following ca certificates had the
websites and code signing trust bits turned off ou = class 3 public primary certification authority - g2 sha1 fingerprint: 85:37:1c:a6:e5:50:14:3d:ce:28:03:47:1b:de:3a:09:e8:f8:77:0f cn = equifax secure ebusiness ca-1 sha1 fingerprint: da:40:18:8b:91:89:a3:ed:ee:ae:da:97:fe:2f:9d:f5:b7:d1:8a:41 the following ca certificates were added cn = como...
NSS 3.18 release notes
the following ca certificates had the
websites and code signing trust bits turned off ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:14:23:21:74:e4:0d:7f:9d:62:13:97:86:63:3a cn = equifax secure global ebusiness ca-1 sha1 fingerprint: 7e:78:4a:10:1c:82:65:cc:2d:e1:f1:6d:47:b4:40:ca:d9:0a:19:45 cn = tc trustcenter class 3 ca ii sha1 fingerprint: 80:25...
NSS 3.19.3 release notes
ha1 fingerprint: 0c:62:8f:5c:55:70:b1:c9:57:fa:fd:38:3f:b0:3d:7b:7d:d7:b9:c6 cn = tc trustcenter universal ca i sha-1 fingerprint: 6b:2f:34:ad:89:58:be:62:fd:b0:6b:5c:ce:bb:9d:d9:4f:4e:39:f3 cn = tc trustcenter class 2 ca ii sha-1 fingerprint: ae:50:83:ed:7c:f4:5c:bc:8f:61:c6:21:fe:68:5d:79:42:21:15:6e the following ca certificate had the
websites trust bit turned off cn = comsign secured ca sha1 fingerprint: f9:cd:0e:2c:da:76:24:c1:8f:bd:f0:f0:ab:b6:45:b8:f7:fe:d5:7a the following ca certificates were added cn = tÜrktrust elektronik sertifika hizmet sağlayıcısı h5 sha1 fingerprint: c4:18:f6:4d:46:d1:df:00:3d:27:30:13:72:43:a9:12:11:c6:75:fb cn = tÜrktrust elektronik serti...
NSS 3.21 release notes
(c) kasım 2005 sha-1 fingerprint: b4:35:d4:e1:11:9d:1c:66:90:a7:49:eb:b3:94:bd:63:7b:a7:82:b7 the following ca certificate had the
websites trust bit turned off ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:14:23:21:74:e4:0d:7f:9d:62:13:97:86:63:3a the following ca certificates were added cn = certification authority of wosign g2 sha1 fingerprint: fb:ed:dc:90:65:b7:27:20:37:bc:55:0c:9c:56:de:bb:f2:78:94:e1 cn = ca wosign ecc root s...
NSS 3.28.5 release notes
added: cn = d-trust root ca 3 2013 sha-256 fingerprint: a1:a8:6d:04:12:1e:b8:7f:02:7c:66:f5:33:03:c2:8e:57:39:f9:43:fc:84:b3:8a:d6:af:00:90:35:dd:94:57 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-256 fingerprint: 46:ed:c3:68:90:46:d5:3a:45:3f:b3:10:4a:b8:0d:ca:ec:65:8b:26:60:ea:16:29:dd:7e:86:79:90:64:87:16 trust flags:
websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.tr, bel.tr, edu.tr, org.tr the version number of the updated root ca list has been set to 2.14.
NSS 3.30.2 release notes
added: cn = d-trust root ca 3 2013 sha-256 fingerprint: a1:a8:6d:04:12:1e:b8:7f:02:7c:66:f5:33:03:c2:8e:57:39:f9:43:fc:84:b3:8a:d6:af:00:90:35:dd:94:57 trust flags: email cn = tubitak kamu sm ssl kok sertifikasi - surum 1 sha-256 fingerprint: 46:ed:c3:68:90:46:d5:3a:45:3f:b3:10:4a:b8:0d:ca:ec:65:8b:26:60:ea:16:29:dd:7e:86:79:90:64:87:16 trust flags:
websites technically constrained to: gov.tr, k12.tr, pol.tr, mil.tr, tsk.tr, kep.tr, bel.tr, edu.tr, org.tr the version number of the updated root ca list has been set to 2.14 (the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.30.2 bug 1350859 - march 2017 batch of root ca changes bug 1349705 - implemented domain name constraints fo...
NSS 3.35 release notes
the
websites (tls/ssl) trust bit was turned off for the following ca certificates: cn = chambers of commerce root sha-256 fingerprint: 0c:25:8a:12:a5:67:4a:ef:25:f2:8b:a7:dc:fa:ec:ee:a3:48:e5:41:e6:f5:cc:4e:e6:3b:71:b3:61:60:6a:c3 cn = global chambersign root sha-256 fingerprint: ef:3c:b4:17:fc:8e:bf:6f:97:87:6c:9e:4e:ce:39:de:1e:a5:fe:64:91:41:d1:02:8b:7d:11:c0:b2:29:8c...
NSS 3.39 release notes
952c453647349763a3ab5ad6ccf69 cn = oiste wisekey global root gc ca sha-256 fingerprint: 8560f91c3624daba9570b5fea0dbe36ff11a8323be9486854fb3f34a5571198d the following ca certificate was removed: cn = comsign sha-256 fingerprint: ae4457b40d9eda96677b0d3c92d57b5177abd7ac1037958356d1e094518be5f2 the following ca certificates had the
websites trust bit disabled: cn = certplus root ca g1 sha-256 fingerprint: 152a402bfcdf2cd548054d2275b39c7fca3ec0978078b0f0ea76e561a6c7433e cn = certplus root ca g2 sha-256 fingerprint: 6cc05041e6445e74696c4cfbc9f80f543b7eabbb44b4ce6f787c6a9971c42f17 cn = opentrust root ca g1 sha-256 fingerprint: 56c77128d98c18d91b4cfdffbc25ee9103d4758ea2abad826...
Shumway
shumway is made with the same constraints as any
website.
JS::CompileOptions
this allows an attack by which a malicious
website loads a sensitive file (say, a bank statement) cross-origin (using the user's cookies), and sniffs the generated syntax errors (via a window.onerror handler) for juicy morsels of its contents.
JSErrorReport
this allows an attack by which a malicious
website loads a sensitive file (say, a bank statement) cross-origin (using the user's cookies), and sniffs the generated syntax errors (via a window.onerror handler) for juicy morsels of its contents.
Handling Mozilla Security Bugs
mozilla distributors who wish to inform their users of the existence of a vulnerability may repost any information from the known vulnerabilities page to their own
websites, mailing lists, release notes, etc., but should not disclose any additional information about the bug.
XPCOM Stream Guide
on the other hand, we use streams to access files within a zip archive, to store and provide data coming from
websites, even to talk to other programs on the same computer through "pipes" (more on that later).
Index
180 amiwebinstalllistener interfaces, interfaces:scriptable, xpcom, xpcom interface reference called when the
website is not allowed to directly prompt the user to install add-ons.
amIWebInstallPrompt
toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable called when installation by
websites is currently disabled.
nsIProtocolHandler
for example, privileged code and
websites that are same origin as this uri.
nsIURLFormatter
mozilla applications linking to mozilla
websites are strongly encouraged to use urls of the following format: http[s]://%service%.mozilla.[com|org]/%locale%/ method overview astring formaturl(in astring aformat); astring formaturlpref(in astring apref); methods formaturl() formats a string url.
Xray vision
because this code is being loaded from arbitrary web pages, it is regarded as untrusted and potentially hostile, both to other
websites and to the user.
Index
the thunderbird team can update this content via the
website at any time.
Theme Packaging
see the install.rdf reference for more information: em:id em:version em:type em:targetapplication em:name em:internalname optional install.rdf properties em:description em:creator em:contributor em:homepageurl em:updateurl note that if your theme will be made available on the https://addons.mozilla.org
website, it may not include an updateurl.
js-ctypes
note: js-ctypes is only available from chrome code; that is, ctypes is not available to
websites, only application and extension code.
Mozilla
firefox operational information database: sqlite a large amount of operational information about
websites visited and browser configuration is stored in relational databases in sqlite used by firefox.
Plugin Roadmap for Firefox - Plugins
2019 in september 2019, firefox 69 will remove the "always activate" flash option so we always ask for user permission before activating flash on a
website.
Toolbox - Firefox Developer Tools
cluded in the toolbar by default, but you can add them in the settings: highlight painted area 3d view (note that this is not available in firefox 40) scratchpad grab a color from the page take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your downloads directory toggle rulers for the page measure a portion of the page: measure a part of the
website by selecting areas within the page toolbox controls finally there's a row of buttons to: close the window toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window toggle the window between standalone and attached to the browser window access developer tool settings settings see the separate page on the developer tools setti...
AbstractRange - Web APIs
to illustrate this, consider the html below: <div class="container"> <div class="header"> <img src="" class="sitelogo"> <h1>the ultimate
website</h1> </div> <article> <section class="entry" id="entry1"> <h2>section 1: an interesting thing...</h2> <p>a <em>very</em> interesting thing happened on the way to the forum...</p> <aside class="callout"> <h2>aside</h2> <p>an interesting aside to share with you...</p> </aside> </section> </article> <pre id="log"></pre> </div> after loading th...
CanvasRenderingContext2D.drawWindow() - Web APIs
it is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many
websites expect that transparent parts of their interface will be drawn on white background.
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.
CredentialsContainer - Web APIs
for example, you might call this, after a user signs out of a
website to ensure that he/she isn't automatically signed in on the next site visit.
Introduction to the DOM - Web APIs
dex].value);"> <option value="white">white</option> <option value="lightgrey">gray</option> </select> <p><b><tt>link</tt></b></p> <select onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> <option value="green">green</option> </select> <small> <a href="http://some.
website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <input type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other...
Element.closest() - Web APIs
however, it will only support css 2.1 selectors in ie 8, and it can cause severe lag spikes in production
websites.
FederatedCredential - Web APIs
a federated identity provider is an entity that a
website trusts to correctly authenticate a user, and that provides an api for that purpose.
Using files from web applications - Web APIs
example: showing thumbnails of user-selected images let's say you're developing the next great photo-sharing
website and want to use html to display thumbnail previews of images before the user actually uploads them.
Basic concepts - Web APIs
many browsers have settings that let users wipe all data stored for a given
website, including cookies, bookmarks, stored passwords, and indexeddb data.
Using IndexedDB - Web APIs
(to learn more about how much storage you can have for each browser, see storage limits.) obviously, browsers do not want to allow some advertising network or malicious
website to pollute your computer, so browsers used to prompt the user the first time any given web app attempts to open an indexeddb for storage.
install - Web APIs
firefox 3 note in firefox 3 the callback is no longer invoked unless the
website performing the installation is whitelisted.
Media Capabilities API - Web APIs
media capabilities information enables
websites to enable adaptative streaming to alter the quality of content based on actual user-perceived quality, and react to a pick of cpu/gpu usage in real time.
NavigatorID.appVersion - Web APIs
this lead to the current situation, where browsers had to return fake values from these properties in order not to be locked out of some
websites.
NotificationAction - Web APIs
here a service worker shows a notification with a single "archive" action, allowing users to perform this common task from the notification without having to open the
website.
PaymentRequest.PaymentRequest() - Web APIs
each item in the array contains the following fields: supportedmethods for early implementations of the spec, this was a sequence of identifiers for payment methods that the merchant
website accepts.
Selection.selectAllChildren() - Web APIs
example html <main> <button>select footer</button> <p>welcome to my
website.</p> <p>i hope you enjoy your visit.</p> </main> <footer> <address>webmaster@example.com</address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.addeventlistener('click', (e) => { window.getselection().selectallchildren(footer); }); result specifications specification status comment ...
Using server-sent events - Web APIs
if this is specified, an event will be dispatched on the browser to the listener for the specified event name; the
website source code should use addeventlistener() to listen for named events.
Using the Storage Access API - Web APIs
first of all, if the <iframe> is sandboxed, the embedding
website needs to add the allow-storage-access-by-user-activation sandbox token to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ...
TextRange - Web APIs
generally, if the script only needs to be compatible with the latest browser, the standard interface is the best choice; however, the current
website still wants to be compatible with ie8 or below browsers.
Using Touch Events - Web APIs
examples and demos the following documents describe how to use touch events and include example code: touch events overview implement custom gestures introduction to touch events in javascript add touch screen support to your
website (the easy way) touch event demonstrations: paint program (by rick byers) touch/pointer tests and demos (by patrick h.
Web Audio API - Web APIs
it can be used to simply incorporate audio into your
website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms.
Window.resizeBy() - Web APIs
creating and resizing an external window for security reasons, it's no longer possible in firefox for a
website to change the default size of a window in a browser if the window wasn’t created by window.open(), or contains more than one tab.
ARIA live regions - Accessibility
dropdown box updates useful onscreen information a
website specializing in providing information about planets provides a dropdown box.
Using the log role - Accessibility
<div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </div> working examples: http://
websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite".
ARIA: timer role - Accessibility
examples some prominent web timers include clocks, stop watches and countdowns, such as ticketing
websites, e-commerce sites, and event countdowns (see https://countingdownto.com/).
Alerts - Accessibility
e is a simple form: <form method="post" action="post.php"> <fieldset> <legend>please enter your contact details</legend> <label for="name">your name (required):</label> <input name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="
website">
website (optional):</label> <input name="
website" id="
website"/> </fieldset> <label for="message">please enter your message (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/>...
Operable - Accessibility
guideline 2.1 — keyboard accessible: make all functionality available from a keyboard this guideline covers the necessity of making core
website functionality available via a keyboard in addition to other means (e.g.
Text labels and names - Accessibility
there are many situations in which a control, dialog, or other
website feature should be given a descriptive name or label to allow users of assistive technologies to understand what its purpose is and to be able to understand and operate it correctly.
Understanding the Web Content Accessibility Guidelines - Accessibility
a / aa / aaa levels primarily addressing user needs in these areas: mobile accessibility low vision cognitive read more about wcag 2.1: deque: wcag 2.1: what is next for accessibility guidelines tpg: web content accessibility guidelines (wcag) 2.1 legal standing this guide is intended to provide practical information to help you build better, more accessible
websites.
src - CSS: Cascading Style Sheets
syntax /* <url> values */ src: url(https://some
website.com/path/to/font.woff); /* absolute url */ src: url(path/to/font.woff); /* relative url */ src: url(path/to/font.woff) format("woff"); /* explicit format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.svg) format("svg"), url(path/to/f...
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
erra leone bologi leek soko chicory celtuce parsley jícama salsify.</p> </div> <nav> <ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> </ul> </nav> </div> physical values and grid layout we encounter physical properties frequently when building
websites, and while the grid placement and alignment properties and values respect writing modes, there are things you may want to do with grid that force you to use physical properties and values.
Contribute a recipe - CSS: Cascading Style Sheets
it may see periodical improvements or updates, and may eventually even be cleaned up (and de-archived) for better uxp focus, but for now, it's a historical snapshot for reference, not a living
website.
text-size-adjust - CSS: Cascading Style Sheets
/* keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /* global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many
websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages.
Ajax - Developer guides
pure-ajax navigation example this article provides a working (minimalist) example of a pure-ajax
website composed only of three pages.
<input type="search"> - HTML: Hypertext Markup Language
arch</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } this renders like so: examples you can see a good example of a search form used in context at our
website-aria-roles example (see it live).
<input type="url"> - HTML: Hypertext Markup Language
{ margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } <form> <div> <label for="myurl">enter the problem
website address:</label> <input id="myurl" name="myurl" type="url" required pattern=".*\.myco\..*" title="the url must be in a myco domain"> <span class="validity"></span> </div> <div> <label for="mycomment">what is the problem?</label> <input id="mycomment" name="mycomment" type="text" required> <span class="validity"></span> </div> <div> ...
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
example <p>according to mozilla's
website, <q cite="https://www.mozilla.org/about/history/details/">firefox 1.0 was released in 2004 and became a big success.</q></p> specifications specification status comment html living standardthe definition of '<q>' in that specification.
itemprop - HTML: Hypertext Markup Language
names examples item itemprop name itemprop value itemprop country ireland itemprop option 2 itemprop https://www.flickr.com/photos/nlireland/6992065114/ ring of kerry itemprop img https://www.flickr.com/photos/nlireland/6992065114/ itemprop
website flickr itemprop (token) (token) tokens are either strings or url's.
HTTP authentication - HTTP
in firefox, it is checked if the site actually requires authentication and if not, firefox will warn the user with a prompt "you are about to log in to the site “www.example.com” with the username “username”, but the
website does not require authentication.
Evolution of HTTP - HTTP
the drawback of the rest model resides in the fact that each
website defines its own non-standard restful api and has total control on it; unlike the *dav extensions were clients and servers are interoperable.
Resource URLs - HTTP
threats because some of the information shared by resource: urls is available to
websites, a web page could run internal scripts and inspect internal resources of firefox, including the default preferences, which could be a serious security and privacy issue.
Using HTTP cookies - HTTP
these techniques violate the principles of user privacy and user control, may violate data privacy regulations, and could expose a
website using them to legal liability.
Firefox user agent string reference - HTTP
firefox/firefoxversion is an optional compatibility token that some gecko-based browsers may choose to incorporate, to achieve maximum compatibility with
websites that expect firefox.
CONNECT - HTTP
for example, the connect method can be used to access
websites that use ssl (https).
HTTP Public Key Pinning (HPKP) - HTTP
dgst -sha256 -binary | openssl enc -base64 openssl req -in my-signing-request.csr -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 openssl x509 -in my-certificate.crt -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 the following command will extract the base64 encoded information for a
website.
Strict mode - JavaScript
some
websites now provide ways for users to write javascript which will be run by the
website on behalf of other users.
JavaScript
by adding togetherjs to your site, your users can help each other out on a
website in real-time!
display - Web app manifests
type string mandatory no the display member is a string that determines the developers’ preferred display mode for the
website.
orientation - Web app manifests
type string mandatory no the orientation member defines the default orientation for all the
website's top-level browsing contexts.
Web app manifests
web app manifests are part of a collection of web technologies called progressive web apps (pwas), which are
websites that can be installed to a device’s homescreen without an app store.
Mobile first - Progressive web apps (PWAs)
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.
Progressive web apps (PWAs)
it describes the name of the app, the start url, icons, and all of the other details necessary to transform the
website into an app-like format.
Index - XPath
55 index index, reference, xpath, xslt found 57 pages: 56 introduction to using xpath in javascript add-ons, dom, extensions, javascript, transforming_xml_with_xslt, web development, xml, xpath, xslt this document describes the interface for using xpath in javascript internally, in extensions, and from
websites.
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
http://www.amazon.com/gp/product/0596004206 digital
websites world wide web consortium the w3c homepage: http://www.w3.org/ the main xsl page: http://www.w3.org/style/xsl/ the version 1.0 recommendation for xslt: http://www.w3.org/tr/xslt archive of public style (css and xslt) discussions: http://lists.w3.org/archives/public/www-style/ the version 1.0 recommendation for xpath: http://www.w3.org/tr/xpath the world wide web consortium ...