Index - MDN Web Docs Glossary: Definitions of Web-related terms
ion, coding, codingscripting, glossary, programming language abstraction in computer programming is a way to reduce complexity and allow efficient design and implementation in complex software systems. it hides the technical complexity of systems behind simpler apis. 11 accessibility accessibility, glossary web accessibility (a11y) refers to best practices for keeping a website usable despite physical and technical restrictions. web accessibility is formally defined and discussed at the w3c through the web accessibility initiative (wai). 12 accessibility tree (aom) aom, accessibility, dom, glossary, reference the accessibility tree, or accessibility object model (aom), contains accessibility-related information for most html elements. 13 ...
...ot2gecko (b2g) is the engineering codename for firefox os and refers to builds that haven't yet received official firefox os branding. (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. 39 bounding box bounding box, codingscripting, design, glossary the bounding box of an element is the smallest possible rectangle (aligned with the axes of that element's user coordinate system) that entirely encloses it and its descendants. 40 breadcrumb accessibility, glossary, navigation, search, site map, breadcrumb a breadcrumb, or breadcrumb trail...
...ions of persistent storage. crud typically refers to operations performed in a database or datastore, but it can also apply to higher level functions of an application such as soft deletes where data is not actually deleted but marked as deleted via a status. 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. 54 csrf glossary, security csrf (cross-site request forgery) is an attack that impersonates a trusted user and sends a website unwanted commands. 55 css css, codingscripting, glossary, web, l10n:priority css (cascading style sheets) is a declarative language that controls how webpages look in the browser. ...
...And 14 more matches

How much does it cost to do something on the Web? - Learn web development
getting involved on the web isn't as cheap as it looks. in this article we discuss how much you may have to spend, and why. 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. in this article we discuss how much everything costs, and how you get what you pay (or don't pay). software text editors you likely have a text editor: such as, notepad on windows, gedit on linux, textedit on mac. you'll have an easier time writing code if you choose an editor that color-c...
...le formats, but each editor saves ongoing projects in its own specialized format. most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it. sites like pixabay provide images under cc0 license, so you can use, edit and publish them even with modification for commercial use. media editors if you want to include video or audio into your website, you can either embed online services (for example youtube, vimeo, or dailymotion), or include your own videos (see below for bandwidth costs). for audio files, you can find free software (audacity, wavosaur), or paying up to a few hundred dollars (sony sound forge, adobe audition). likewise, video-editing software can be free (pitivi, openshot for linux, imovie for mac), less than $100 (adobe p...
...most hosting sites you'll deal with these days will offer by default — or another secure solution like rsync over ssh. browsers you either already have a browser or can get one for free. if necessary, download firefox here or google chrome here. web access computer / modem you need a computer. costs can vary tremendously, depending on your budget, and where you live. to publish a barebones website, you only need a basic computer capable of launching an editor, and a web browser, so the entry level can be quite low. of course, you'll need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files. you need to upload content to a remote server (see hosting below), so you need a modem. your isp can rent internet connectivity to you ...
...And 12 more matches

Structural overview of progressive web apps - Progressive web apps (PWAs)
and include specific components in order to be recognized as a web app that can be used both on the web and installed and run as a local application. in this structural overview, we'll look at the features that make up a standard web application, as well as some design patterns you can follow when building your pwa. architecture of an app there are two main, different approaches to rendering a website — on the server or on the client. they both have their advantages and disadvantages, and you can mix the two approaches to some degree. 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. it works great across browsers, but it suffers in terms of time navigating between pag...
...r-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. it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived performance — loading a page requires a new round trip to the server. 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. the website is slower on an initial visit, but can be faster to navigate. the best results tend to come when you use both client-side and server-side rendering; you can render a web site on the server, cache its conten...
...hen loading the remainder of the app's contents. that way, the next time someone visits the app from the device, the ui loads from the cache immediately and any new content is requested from the server (if it isn’t available in the cache already). this structure is fast, and also feels fast as the user sees "something" instantly, instead of a loading spinner or a blank page. it also allows the website to be accessible offline if the network connection is not available. we can control what is requested from the server and what is retrieved from the cache with a service worker, which will be explained in detail in the next article — for now let's focus on the structure itself. benefits of the app shell pattern this architecture allows a web site to benefit the most from all the pwa feature...
...And 12 more matches

Introduction to the server side - Learn web development
overview: first steps next welcome to the mdn beginner's server-side programming course! in this first article, we look at server-side programming from a high level, answering questions such as "what is it?", "how does it differ from client-side programming?", and "why it is so useful?". after reading this article you'll understand the additional power available to websites through server-side coding. ...
... so useful?". after reading this article you'll understand the additional power available to websites through server-side coding. prerequisites: basic computer literacy. a basic understanding of what a web server is. objective: to gain familiarity with what server-side programming is, what it can do, and how it differs from client-side programming. 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. html and javascript). perhaps the most significant benefit of server-side code is that it allows you to tailor website content for individual users. dynamic sites can highlight content that is more relevant base...
...for example reusing stored credit card details to streamline subsequent payments. it can even allow interaction with users of the site, sending notifications and updates via email or through other channels. all of these capabilities enable much deeper engagement with users. in the modern world of web development, learning about server-side development is highly recommended. what is server-side website programming? web browsers communicate with web servers using the hypertext transfer protocol (http). when you click a link on a web page, submit a form, or run a search, an http request is sent from your browser to the target server. the request includes a url identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may...
...And 8 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. where should your website live on your computer? when you are working on a website locally on your computer, you should keep all the related files in a single folder that mirrors the published website's file structure on the server. this folder can live anywhere you like, but you...
...call it test-site (or something more imaginative). ...
...call it test-site (or something more imaginative). an aside on casing and spacing you'll notice that throughout this article, we ask you to name folders and files completely in lowercase with no spaces. ...
...And 7 more matches

How the Web works - Learn web development
d the shop. tcp/ip: transmission control protocol and internet protocol are communication protocols that define how data should travel across the internet. this is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. in our example, this is like a car or a bike (or however else you might get around). 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). this is like looking up the address of the shop so you can access it. http: hypertext transfer protocol is an application pro...
...rowser needs to find out which server the website lives on, so it can send http messages to the right place (see below). this is like looking up the address of the shop so you can access it. http: hypertext transfer protocol is an application protocol that defines a language for clients and servers to speak to each other. this is like the language you use to order your goods. component files: a website is made up of many different files, which are like the different parts of the goods you buy from the shop. these files come in two main types: code files: websites are built primarily from html, css, and javascript, though you'll meet other technologies a bit later. ...
...use to order your goods. component files: a website is made up of many different files, which are like the different parts of the goods you buy from the shop. these files come in two main types: code files: websites are built primarily from html, css, and javascript, though you'll meet other technologies a bit later. assets: this is a collective name for all the other stuff that makes up a website, such as images, music, video, word documents, and pdfs. so what happens, exactly? when you type a web address into your browser (for our analogy that's like walking to the shop): the browser goes to the dns server, and finds the real address of the server that the website lives on (you find the address of the shop). the browser sends an http request message to the server, asking it to...
...And 7 more matches

From object to iframe — other embedding technologies - Learn web development
knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and the previous articles in this module. objective: to learn how to embed items into web pages using <object>, <embed>, and <iframe>, like flash movies and other webpages. 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. these were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a table. these were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like ...
...on is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; iframes in detail so, that was easy and fun, right? <iframe> elements are designed to allow you to embed other web documents into the current document. 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. the live editable examples you've been using through this course are implemented using <iframe>s. there are some serious security concerns to consider with <ifra...
...n version of — such as video from online video providers, commenting systems like disqus, maps from online map providers, advertising banners, etc. the live editable examples you've been using through this course are implemented using <iframe>s. 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. let's explore the code in a bit more detail. say you wanted to include the mdn glossary on one of your web pages — you could try something like this: <iframe src="https://udn.realityripple.com/docs/glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://udn.realityripple.c...
...And 6 more matches

Storage access policy: Block cookies from trackers
’ll keep this page updated with the newest information as we strengthen our protections. these protections are on by default in nightly. the cookie policy can be enabled in other versions of firefox through the content blocking settings (these steps will vary by version; the linked documentation includes a dropdown to select the appropriate firefox version). 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. alternatively you can report broken sites directly in firefox by clicking "report a problem" in the content blocking section of the control center (this shortcut may not be available in all versions of firefox). tracking protection explained how does firefox determine wh...
...these entries after you have finished testing. faq this cookie policy has the potential to lead to site breakage, but has been designed to allow common third-party integrations to continue to work while preventing cross-site tracking. in this section we describe the functionality you can expect in different integration scenarios. 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. blocking tracking identifiers does not prevent the display of advertisements. i use a third-party analytics service that is classified as a tracker. will i still receive analytics data? this depends on how the third-party analytics service is implemented. third-party analytics p...
...ytics data? this depends on how the third-party analytics service is implemented. third-party analytics providers will no longer be able to user their third-party storage to collect data. this means that providers using cookies which are scoped to their third-party domain, or local storage and other site data stored under their origin, will no longer have access to those identifiers across other websites. if these services are embedded into the main context of the page, they can continue to use first-party cookies and site storage to track users across page visits on that specific first-party domain. i use third-party services for social login, like, and share button integration. will my users still be able to make use of these services? this depends on how the social integration is implement...
...And 6 more matches

What is accessibility? - Learn web development
se to interact with the web, and how we can make accessibility part of our web development workflow. prerequisites: basic computer literacy, a basic understanding of html and css. objective: to gain familiarity with accessibility, including what it is, and how it affects you as a web developer. so what is accessibility? accessibility is the practice of making your websites usable by as many people as possible. we traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections. you might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or ci...
...ith slow network connections. you might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances. 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. we are all different, but we are all human, and therefore have the same human rights. accessibility is the right thing to do. providing accessible sites is part of the law in some countries, which can open up some significant markets that otherwise would not be able to use your services or buy your products. building accessible sites benefit everyone: s...
...lity can also be a result of old age, rather than any specific trauma or condition, and it could also result from hardware limitations — some users might not have a mouse. 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. can you use the tab key to move between the different controls of a web form, for example? you can find more details about keyboard controls in our cross browser testing using native keyboard accessibility section. in terms of statistics, a significant number of people have mobility impairments. the u.s. centers for disease control and prevention d...
...And 5 more matches

How do you upload your files to a web server? - Learn web development
er file in the usual way. note: of course there are lots of other options. see publishing tools for more information. ...
...or 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: mypersonalwebsite.examplehostingprovider.net. we have just opened an account and received this info from them: congratulations for opening an account at example hosting provider. 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.
...//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. to connect your sftp client to the distant server, follow these steps: choose file > site manager... from the main menu. in the site manager window, press the new site button, then fill in the site name as demozilla in the provided space. fill in the sftp server your host provided in the host: field. in the logon ty...
...And 5 more matches

What is a web server? - Learn web development
nd understand the difference between a web page, a web site, a web server, and a search engine. objective: you will learn what a web server is and gain a general understanding of how it works. summary the term web server can refer to hardware or software, or both of them working together. on the hardware side, a web server is a computer that stores web server software and a website's component files. (for example, html documents, images, css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other devices connected to the web. on the software side, a web server includes several parts that control how web users access hosted files. at a minimum, this is an http server. an http server is software that understa...
...physical data interchange with other devices connected to the web. on the software side, a web server includes several parts that control how web users access hosted files. at a minimum, this is an http server. an http server is software that understands urls (web addresses) and http (the protocol your browser uses to view webpages). 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. at the most basic level, whenever a browser needs a file that is hosted on a web server, the browser requests the file via http. when the request reaches the correct (hardware) web server, the (software) http server accepts the request, finds the requested document, and sends it back to the browser, also ...
... whenever a browser needs a file that is hosted on a web server, the browser requests the file via http. when the request reaches the correct (hardware) web server, the (software) http server accepts the request, finds the requested document, and sends it back to the browser, also through http. (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. a static web server, or stack, consists of a computer (hardware) with an http server (software). we call it "static" because the server sends its hosted files as-is to your browser. a dynamic web server consists of a static web server plus extra software, most commonly an application server and a database. we call it "dynamic" because the appli...
...And 5 more matches

Common questions - Learn web development
ns relating to general knowledge of the web ecosystem and how it works. how does the internet work? the internet is the backbone of the web, the technical infrastructure that makes the web possible. at its most basic, the internet is a massive network of computers communicating with each other. this article discusses how it works, in broad terms. 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. these terms are often a source of confusion for newcomers to the web, or are used incorrectly. let's discover what they actually mean! what are hyperlinks? in this article, we'll go over what hyperlinks are and why they matter. what is a url? ...
...oncept when it comes to the internet. it is the mechanism used by browsers to retrieve any published resource on the web. what is a domain name? domain names are a key component of the internet infrastructure. they provide a human-readable address for any web server available on the internet. what is a web server? 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. in this article we go over how web servers work, and why they're important. tools and setup questions related to the tools/software you can use to build websites. what software do i need to build a website? in this article we explain which software components you need to edit, upload, or view a website. how much does...
...in this article we discuss how much everything costs and what you get for what you pay (or don't pay). ...
...And 5 more matches

The web and web standards - Learn web development
mascript, which javascript is based on), khronos (who publish technologies for 3d graphics, such as webgl), and others. "open" standards one of the key aspects of web standards, which timbl and the w3c agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. 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. because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. you wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version o...
...ke "hello web server. can you give me the files i need to render bbc.co.uk"? "sure thing web browser — here you go" [downloads files and renders web page] the actual syntax for http messages (called requests and responses) is not that human-readable, but this gives you the basic idea. 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. simple html looks like this: <h1>this is a top-level heading</h1> <p>this is a paragraph of text.</p> <img src="cat.jpg" alt="a picture of my cat"> if we adopted a house-building analogy, html would be like the founda...
...k at your code, and highlight places where you haven't followed the rules properly. minifiers, which remove all the whitespace from your code files to make it so that they are smaller and therefore download from the server more quickly. 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. there are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. a typical use for a server-side language is to get some data out of a database and generate some html to contain the data, before then sending the html over to the browser to disp...
...And 5 more matches

Server-side web frameworks - Learn web development
ango passes to every view function contains methods and properties for accessing the target url, the type of request (e.g. an http get), get or post parameters, cookie and session data, etc. django can also pass information encoded in the structure of the url by defining "capture patterns" in the url mapper (see the last code fragment in the section above). abstract and simplify database access websites use databases to store information both to be shared with users, and about users. web frameworks often provide a database layer that abstracts database read, write, query, and delete operations. this abstraction layer is referred to as an object-relational mapper (orm). using an orm has two benefits: you can replace the underlying database without necessarily needing to change the code that ...
...ecting productivity are similar to those for "effort to learn" — e.g. documentation, community, programming experience, etc. — other factors include: framework purpose/origin: some web frameworks were initially created to solve certain types of problems, and remain better at creating web apps with similar constraints. 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. by contrast, flask is a much lighter-weight framework and is great for creating web apps running on embedded devices. opinionated vs unopinionated: an opinionated framework is one in which there are recommended "best" ways to solve a particular problem. opinionated frameworks tend to be more productive when you're trying t...
... performance of the framework/programming language: usually "speed" is not the biggest factor in selection because even relatively slow runtimes like python are more than "good enough" for mid-sized sites running on moderate hardware. the perceived speed benefits of another language, e.g. c++ or javascript, may well be offset by the costs of learning and maintenance. 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. at this point you may consider adding support for caching. caching is an optimisation where you store all or part of a web response so that it does not have to be recalculated on subsequent requests. returning a cached response is much faster than calculating one in...
...And 5 more matches

Introduction to client-side frameworks - Learn web development
gs, but to do things. javascript’s popularity steadily increased. developers who worked with javascript wrote tools to solve the problems they faced, and packaged them into reusable packages called libraries, so they could share their solutions with others. this shared ecosystem of libraries helped shape the growth of the web. ...
... the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. ...
...s opinions about how software gets built. these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. javascript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its front end. what frameworks are out there? there are many frameworks out there, but currently the "big four" are considered to be the following. ember ember was initially released in december 2011 as a continuation of work that started in the sproutcore project. it i...
...And 5 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
with css, there are lots of ways to add color to your html elements to create just the look you want. this article is a primer introducing each of the ways css color can be used in html. ...
... 120)). the foreground (text) color is specified by setting the color property to hsl(0deg, 100%, 100%). this is one of many ways to specify the color white. we add a green wavy line under the text with text-decoration. finally, a bit of a shadow is added to the text using text-shadow. its color parameter is set to black. letting the user pick a color there are many situations in which your website may need to let the user select a color. perhaps you have a customizable user interface, or you're implementing a drawing app. maybe you have editable text and need to let the user choose the text color. or perhaps your app lets the user assign colors to folders or items. although historically it's been necessary to implement your own color picker, html now provides support for browsers to provid...
...lor picker. each time this event arrives, we set the box's border color to match the color picker's current value. the change event is received when the color picker's value is finalized. we respond by setting the contents of the <p> element with the id "output" to a string describing the finally selected 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. the wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, par...
...And 5 more matches

Responsive design - Learn web development
the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand the fundamental concepts and history of responsive design. ...
...understand the main techniques you need to know to master it. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand the fundamental concepts and history of responsive design. 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! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. ...
...s who wished to embrace mobile would generally create a special mobile version of their site, with a different url (often something like m.example.com, or example.mobi). this meant that two separate versions of the site had to be developed and kept up-to-date. in addition, these mobile sites often offered a very cut down experience. 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. flexible layout before responsive design a number of approaches were developed to try to solve the downsides of the liquid or fixed-width methods of building websites. in 2004 cameron adams wrote a post ...
...And 4 more matches

How can we design for all types of users? - Learn web development
active learning there is no active learning available yet. ...
... active learning there is no active learning available yet. dig deeper color contrast to keep your text readable, use a text color that contrasts well with the background color. ...
...mes packaged with an on-screen color picker to find out a color value. for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page. font size you can specify font size on a website either through relative units or absolute units. absolute units absolute units are not proportionally calculated but refer to a size set in stone, so to speak, and are expressed most of the time in pixels (px). for instance, if in your css you declare this: body { font-size:16px; } … you are telling the browser that whatever happens, the font size must be 16 pixels. modern browsers get arou...
...And 4 more matches

Client-side storage - Learn web development
th per individual api and cumulatively); the exact limit varies depending on the browser and possibly based on user settings. see browser storage limits and eviction criteria for more information. old school: cookies the concept of client-side storage has been around for a long time. since the early days of the web, sites have used cookies to store information to personalize user experience on websites. they're the earliest form of client-side storage commonly used on the web. these days, there are easier mechanisms available for storing client-side data, therefore we won't be teaching you how to use cookies in this article. however, this does not mean cookies are completely useless on the modern-day web — they are still used commonly to store data related to user personalization and state,...
...e database system for storing complex data. this can be used for things from complete sets of customer records to even complex data types like audio or video files. you'll learn more about these apis below. the future: cache api some modern browsers support the new cache api. 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. cache is usually used in combination with the service worker api, although it doesn't have to be. use of cache and service workers is an advanced topic, and we won't be covering it in great detail in this article, although we will show a simple example in the offline asset storage section below. storing simple dat...
...and open it up again. enter the following lines again: let myname = localstorage.getitem('name'); myname you should see that the value is still available, even though the browser has been closed and then opened again. separate storage for each domain there is a separate data store for each domain (each separate web address loaded in the browser). 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. this makes sense — you can imagine the security issues that would arise if websites could see each other's data! a more involved example let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used. our example wil...
...And 4 more matches

Client-Server Overview - Learn web development
previous overview: first steps next now that you know the purpose and potential benefits of server-side programming we're going to examine in detail what happens when a server receives a "dynamic request" from a browser. 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. prerequisites: basic computer literacy. a basic understanding of what a web server is. objective: to understand client-server interactions in a dynamic website, and in particular what operations need to be performed by server-side code. there is no real code in the discussion because we haven't yet chosen a web framework to use to write our code! this discussion is however...
... the resource, etc). the body of a successful response to a get request would contain the requested resource. when an html page is returned it is rendered by the web browser. as part of processing the browser may discover links to other resources (e.g. an html page usually references javascript and css pages), and will send separate http requests to download these files. both static and dynamic websites (discussed in the following sections) use exactly the same communication protocol/patterns. get request/response example you can make a simple get request by clicking on a link or searching on a site (like a search engine homepage). for example, the http request that is sent when you perform a search on mdn for the term "client server overview" will look a lot like the text shown below (it wil...
...u6pqzbfmuat; dwf_section_edit=false; dwf_sg_task_completion=false; _gat=1; _ga=ga1.2.1688886003.1471911953; ffo=true the first and second lines contain most of the information we talked about above: the type of request (get). the target resource url (/search). the url parameters (q=client%2bserver%2boverview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev). the target/host website (developer.mozilla.org). the end of the first line also includes a short string identifying the specific protocol version (http/1.1). the final line contains information about the client-side cookies — you can see in this case the cookie includes an id for managing sessions (cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...). the remaining lines contain information about the browser u...
...And 4 more matches

Introduction to progressive web apps - Progressive web apps (PWAs)
l name. it's just a shorthand used initially by google for the concept of creating a flexible, adaptable app using only web technologies. pwas are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features. 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. on the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. you can install a native app so that it works offline, and users love tapping their icons to easily access their favorite apps, rather than navigating to it using a br...
...g their icons to easily access their favorite apps, rather than navigating to it using a browser. pwas give us the ability to create web apps that can enjoy these same advantages. it's not a brand new concept—such ideas have been revisited many times on the web platform with various approaches in the past. progressive enhancement and responsive design already allow us to build mobile friendly websites. pwas, however, provide all this and more without losing any of the existing features that make the web great. what makes an app a pwa? as we hinted at above, pwas are not created with a single technology. they represent a new philosophy for building web apps, involving some specific patterns, apis, and other features. it's not that obvious if a web app is a pwa or not from first glance. an a...
...ore integrated with the native platform—app icons on the home screen or app launcher, applications that automatically run in full screen mode, etc. re-engaging with users through the use of system notifications and push messages, leading to more engaged users and better conversion rates. 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. the website pwa stats shares many case studies that indicate these benefits. the best-known success story is probably that of flipkart lite. india's largest e-commerce site was rebuilt as a progressive web app in 2015, which resulted in 70% increase in conversions. the aliexpress pwa has also seen much...
...And 4 more matches

Getting started with the Web - Learn web development
getting started with the web is a concise series introducing you to the practicalities of web development. you'll set up the tools you need to construct a simple webpage and publish your own simple code. 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. by working through the articles listed below in order, you will go from nothing to getting your first webpage online. let's begin our journey! installing basic software when it comes to tools for building a website, there's a lot to pick from. if you're just starting out, you might be confused by the array of code ...
...let's begin our journey! installing basic software when it comes to tools for building a website, there's a lot to pick from. if you're just starting out, you might be confused by the array of code editors, frameworks, and testing tools out there. in installing basic software, we show you step-by-step how to install just the software you need to begin some basic web development. what will your website look like? before you start writing the code for your website, you should plan it first. what information are you showcasing? what fonts and colors are you using? what will your website look like? we outline a simple method you can follow to plan out your site's content and design. dealing with files a website consists of many files: text content, code, stylesheets, media content, and so on. w...
... html basics hypertext markup language (html) is the code that you use to structure your web content and give it meaning and purpose. ...
...And 3 more matches

What’s in the head? Metadata in HTML - Learn web development
<body> element (which are displayed on the page when loaded in a browser), the head's content is not displayed on the page. instead, the head's job is to contain metadata about the document. in the above example, the head is quite small: <head> <meta charset="utf-8"> <title>my test page</title> </head> in larger pages however, the head can get quite full. try going to some of your favorite websites and use the developer tools to check out their head contents. our aim here is not to show you how to use everything that can possibly be put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity. let's get started. adding a title we've already seen the <title> element in action — this can be used to add a tit...
...s, here">) — which is supposed to provide keywords for search engines to determine relevance of that page for different search terms — is ignored by search engines, because spammers were just filling the keyword list with hundreds of keywords, biasing results. other types of metadata as you travel around the web, you'll find other types of metadata, too. 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. in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/openg...
... note: if your site uses a co...
...And 3 more matches

Translation phase
al tutorials on localizing for that particular project group. it's up to you and your community to determine which l10n tool will best suit your needs. as you gain more experience, you may want to localize independent of mozilla-developed l10n tools, which we'll also discuss here. projects the mozilla projects and their l10n workflows are divided into these groups: mozilla applications, mozilla websites, and add-ons. below you'll find the list of all mozilla projects, their associated l10n tools, and links to tutorials outlining their workflows. mozilla applications so you're interested in localizing mozilla applications. each l10n tool follows a different workflow for localizing mozilla application projects. we've linked a brief tutorial to each l10n tool name below. follow the tutorials to ...
...r locale has an hg repository hosted on the mozilla servers, you can track your localization's current progress by visiting the l10n dashboards. note: if you are starting a new localization and decide to use an offline tool for localizing mozilla applications, you will need to become familiar with using mercurial (hg). visit the tutorial on using hg in your localization efforts here. mozilla websites so you're interested in localizing mozilla websites. each l10n tool follows a different workflow for localizing mozilla web projects. we've linked a brief tutorial to each l10n tool name below. follow the tutorials to help you decide which l10n tool fits your specific needs. these are the l10n tools we use to localize mozilla web projects: pontoon a web-based, what-you-see-is-what-you-get ...
...each l10n tool follows a different workflow for localizing mozilla web projects. we've linked a brief tutorial to each l10n tool name below. follow the tutorials to help you decide which l10n tool fits your specific needs. 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. visit pontoon here. please note the pontoon is not available for all web projects yet. these are the mozilla web projects that are localized using the l10n tools above: mozilla.org every user's first mozilla experience. addons.mozilla.org (amo) a portal for all users interested in finding add-ons for their local mozilla applications. read the guidelines on localiz...
...And 3 more matches

What are hyperlinks? - Learn web development
objective: learn about links on the web and why they matter. summary hyperlinks, usually called links, are a foundational concept behind the web. to explain what links are, we need to step back to the very basics of web architecture. ...
... in the rest of this article, we discuss the various types of links and their importance to modern web design. deeper dive as we said, a link is a text string tied to a url, and we use links to allow easy jumping from one document to another. 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). external link a link from your webpage to someone else's webpage. without external links, there is no web, since the web is a network of webpages. use external links to provide information besides the content available through your webpage. incoming links a lin...
...someone else's webpage. without external links, there is no web, since the web is a network of webpages. use external links to provide information besides the content available through your webpage. incoming links a link from someone else's webpage to your site. it's the opposite of an external link. note that you don't have to link back when someone links to your site. when you're building a website, focus on internal links, since those make your site usable. find a good balance between having too many links and too few. we'll talk about designing website navigation in another article, but as a rule, whenever you add a new webpage, make sure at least one of your other pages links to that new page. on the other hand, if your site has more than about ten pages, it's counter-productive to link ...
...And 2 more matches

JavaScript basics - Learn web development
it was invented by brendan eich (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation. ...
...it was invented by brendan eich (co-founder of the mozilla project), the mozilla foundation, and the mozilla corporation. javascript is versatile and beginner-friendly. with more experience, you'll be able to create games, animated 2d and 3d graphics, comprehensive database-driven apps, and much more! javascript itself is relatively compact, yet very flexible. ...
...s different from the tools listed above. you can learn more in mdn's javascript learning area, as well as in other parts of mdn. the section below introduces some aspects of the core language, and offers an opportunity to play with a few browser api features too. have fun! a hello world! example javascript is one of the most popular modern web technologies! as your javascript skills grow, your websites will enter a new dimension of power and creativity. however, getting comfortable with javascript is more challenging than getting comfortable with html and css. you may have to start small, and progress gradually. to begin, let's examine how to add javascript to your page for creating a hello world! example. (hello world! is the standard for introductory programming examples.) important: if y...
...And 2 more matches

Making decisions in your code — conditionals - Learn web development
is not just for setting variable values; you can also run functions, or lines of code — anything you like. the following live example shows a simple theme chooser where the styling for the site is applied using a ternary operator. ...
... finally, we've also got an onchange event listener that serves to run a function containing a ternary operator. it starts with a test condition — select.value === 'black'. if thi...
...l.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. we also have a function called update(), which takes two colors as parameters (inputs). the website's background color is set to the first provided color, and its text color is set to the second provided color. finally, we've also got an onchange event listener that serves to run a function containing a ternary operator. it starts with a test condition — select.value === 'black'. if this returns true, we run the update() function with parameters of black and white, meaning that we end up wit...
...And 2 more matches

Aprender y obtener ayuda - Learn web development
lan it is a good idea to create a plan to help you achieve what you want to achieve through your learning. a goal statement it sounds silly, but why not start with a single sentence that says what you want to achieve? the following have different scopes, but are all realistic and achievable: i want to become a professional web developer in two years' time. 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. the following are not quite as reasonable: i want to go from a complete beginner to becoming a senior web developer in three months. i want to start my own company and build a social network that will out-perform facebook, in two years. what...
... keep thinking about how much progress you are making, and adjust your plan if needs be. staying motivated it is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. what follows are some tips to stay motivated and keep working: try to make your work environment as productive as possible. try to ...
...esign and development, but there are some general bits of advice that will serve you well in most cases. break things down into chunks for a start, when you are trying to implement something specific and it seems really hard to get your head around, you should try to break it down into multiple smaller problems, or chunks. for example, if you are looking at a task of "build a simple two-column website", you could break it down as follows: create the html structure work out basic site typography work out a basic color scheme implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer. implement a horizontal navigation menu etc. then you could break it down further, for example, "implement horizontal navigation menu" co...
...And 2 more matches

The "why" of web performance - Learn web development
this article provides an introduction into why web performance is important to site visitors and for your business goals. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to gain basic familiarity of why web performance is important for good user experience. web performance refers to how quickly site content loads and renders in a web browser, and how well it responds to user interaction. bad performing sites are slow to display and slow to respond to input. ...
...ce is for users to not notice performance. while an individual's perception of site performance performance is subjective, loading and rendering can be measured. good performance may not be obvious to most site visitors, but most will immediately recognize a sluggish site. that is why we care. why care about performance? web performance—and its assocatiated best practices—are vital for your website visitors to have a good experience. in a sense, web performance can be considered a subset of web accessibility. with performance as with accessibility, you consider what device a site visitor is using to access the site and the device connection speed. as an example, consider the loading experience of cnn.com, which at the time of this writing had over 400 http requests with a file size of over...
...ite costs to download.) improve conversion rates reducing the dowload and render time of a site improves conversion rates and user retention. a conversion rate is the rate at which site visitors perform a measured or desired action. for example, this might be making a purchase, reading an article, or subscribing to a newsletter. the action being measured as the conversion rate depends on the website's business goals. performance impacts conversion; improving web performance improves conversion. site visitors expect a site to load in two seconds or less; sometimes even less on mobile (where it generally takes longer). these same site visitors begin abandoning slow sites at 3 seconds. the speed at which a site loads is one factor. if the site is slow to react to user interaction, or appears ...
...And 2 more matches

Creating localizable web applications
an important step of developing a web application or creating web content is making sure that it can be localized. listed below are good practices and recommendations that should be followed in order to make your content easily localizable. note: most of the code snippets used in the examples below come from an early version of the getpersonas.com website. in some cases, the code snippets were slightly changed to better illustrate the recommendations or for clarity. cheatsheet don't hardcode english text, formats (numbers, dates, addresses, etc.), word order or sentence structure. don't put text or numbers in images. don't forget about right-to-left locales. take advantage of printf() (or equivalents) and use variables in the english strings. write semantic code (e.g. don't use...
...nd (e.g. http://example.com/foo/bar/en-us). avoid using it in a subdomain, as it can cause problems with certificates (this is wrong: http://en-us.example.com/foo/bar). simplify localized versions if necessary oftentimes, it is better to slightly simplify the localized version of your web application than to serve a mix of localized and english content. 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. define the locale and the direction in the html generate the lang attribute dynamically, depending on the current locale. use the dir attribute on the <html/> element and consider using a rtl class on <html/> or <body/> as well, in orde...
...s than english, you may want to make an element slightly wider. snippet 3. good: body.de foo, body.fr foo, body.pl foo { /* locale-specific rules for the foo element */ width: 10em; /* originally 8em */ } adapt the interaction to rtl locales right-to-left locales not only require good images handling (see images), but also should be taken into account when designing the interaction on the website. consider the following example: a filmreel-like slideshow showcasing highlighted features of the product or featured designs. for right-to-left languages, the slideshow should go from right to left as well, making the last element in the html the first one to be displayed. separate urls from navigation sometimes, when the urls are well-designed, you may want to use the url to do something in t...
...And 2 more matches

Index - Firefox Developer Tools
this article is a quick tour of the main sections of the page inspector's user interface. 81 paint flashing tool web performance the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. 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. 82 performance developer tools, learn, performance, web performance the performance tool gives you insight into your site's general responsiveness, javascript and layout performance. with...
... tree and the flame chart are both used to analyze your site's javascript, and they both use the same data: a sample of the javascript engine's stack, taken periodically during the recording. 88 frame rate frame rate is the rate at which a video device can produce images (or frames). it's most familiar from film and gaming, but is now widely used as a performance measure for websites and web apps. 89 how to to open the performance tools: 90 scenarios needscontent performance scenarios 91 animating css properties css animation, developer tools, web performance with css animations you specify a number of keyframes, each of which uses css to define the appearance of the element at a particular stage of the animatio...
...perties css animation, developer tools, web performance with css animations you specify a number of keyframes, each of which uses css to define the appearance of the element at a particular stage of the animation. the browser creates the animation as a transition from each keyframe to the next. 92 intensive javascript if you want to play along you can find the demo website here. 93 ui tour the performance tool's ui consists of 4 main pieces: 94 waterfall 95 remote debugging tools, l10n:priority you can use the firefox developer tools on your desktop to debug web sites and web apps running in other browsers or runtimes. the other browser might be on the same device as the tools themselves or on a diff...
...And 2 more matches

Migrating from Firebug - Firefox Developer Tools
respecting the same origin policy. that means that when you open a page on the same origin in a different tab, firebug gets opened automatically. and when you open a page of a different origin in the same tab, it closes automatically. the devtools' activation on the other hand is tab based. that means, that when you open the devtools in a tab, they stay open even when you switch between different websites. when you switch to another tab, though, they're closed. open the tools firebug can be opened by pressing f12. to open it to inspect an element it is possible to press ctrl+shift+c / cmd+opt+c. the devtools share the same shortcuts, but also provide shortcuts for the different panels. e.g. the network monitor can be opened via ctrl+shift+q / cmd+opt+q, the web console via ctrl+shift+k / cmd+op...
...to search for elements within the html panel via css selectors or xpaths. also the devtools' inspector panel allows to search for css selectors. it even displays a list with matching ids or classes. searching by xpaths is not supported though (see bug 963933. debugger what's the script panel in firebug, is the debugger panel in the devtools. 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. those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, eval(), new function(), etc.). in the devtools' debugger panel the scripts are listed at the left side within the sources side panel. dynamically generated script...
...also provides information about html parsing or layout. this is the part where firebug and the devtools differ the most, because the outputs are completely different. while firebug focuses on javascript performance and provides detailed information about javascript function calls during the profiling session, the performance tool in the devtools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding javascript function calls. view javascript call performance what comes nearest to firebug's profiler output is the call tree view in the performance panel. like in firebug it lists the total execution time of each function call under total time as well as the number of calls under samples, the time spent within the function under self time and ...
...And 2 more matches

Credential Management API - Web APIs
for example, user agents have a particularly hard time dealing with federated identity providers or esoteric sign-in mechanisms that use more than just a username and password. ...
...for example, user agents have a particularly hard time dealing with federated identity providers or esoteric sign-in mechanisms that use more than just a username and password. ...
... a website store and retrieve user, federated, and public key credentials. these capabilities allow users to sign in without typing passwords, see the federated account they used to sign in to a site, and resume a session without the explicit sign-in flow of an expired session. 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. for example, user agents have a particularly hard time dealing with federated identity providers or esoteric sign-in mechanisms that use more than just a username and password. ...
...And 2 more matches

Accessibility documentation index - Accessibility
antically denotes html elements containing text that is marked/highlighted for reference purposes. this is semantically equivalent to the html <mark> element. if possible, you should use this element instead. 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. 49 aria: region role aria, aria role, accessibility, reference, landmark role, role-region the region landmark role is used to identify an area in the document that the author has identified as significant. it is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate. 50 ...
...ktop application, and no traditional html interpretation techniques should be used. this role should only be used to define very dynamic and desktop-like web applications. 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. it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page. 54 aria: banner role aria, accessibility, needscontent a banner role represents general and informative content frequently placed at the beginning of the page. this usually includes a logo, company name, search icon, photo related to the p...
...e the checkbox role is used for checkable interactive controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. 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. this section is commonly called a footer. 59 aria: dialog role aria, accessibility, needscontent, web development the dialog role is used to mark up an html based application dialog or window that separates content or ui from the rest of the web application or page. dialogs are generally placed on top...
...And 2 more matches

Confidentiality, Integrity, and Availability - Archive of obsolete content
able to access them, but no one else should. a failure to maintain confidentiality means that someone who shouldn't have access has managed to get it, through intentional behavior or by accident. such a failure of confidentiality, commonly known as a breach, typically cannot be remedied. once the secret has been revealed, there's no way to un-reveal it. 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. nearly all the major security incidents reported in the media today involve major losses of confidentiality. so, in summary, a breach of confidentiality means that someone gains access to information who shouldn't have access to it. integrity i...
...jor security incidents reported in the media today involve major losses of confidentiality. so, in summary, a breach of confidentiality means that someone gains access to information who shouldn't have access to it. integrity integrity refers to ensuring the authenticity of information—that information is not altered, and that the source of the information is genuine. imagine that you have a website and you sell products on that site. now imagine that an attacker can shop on your web site and maliciously alter the prices of your products, so that they can buy anything for whatever price they choose. that would be a failure of integrity, because your information—in this case, the price of a product—has been altered and you didn't authorize this alteration. another example of a failure of ...
...magine that an attacker can shop on your web site and maliciously alter the prices of your products, so that they can buy anything for whatever price they choose. that would be a failure of integrity, because your information—in this case, the price of a product—has been altered and you didn't authorize this alteration. 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. in this case, the site you are directed to is not genuine. availability availability means that information is accessible by authorized users. 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...
... original document information author(s): karen scarfone, wayne jansen, and miles tracy title: nist special publication 800-123, guide to general server security last updated date: july 2008 copyright information: this document is not subject to copyright. ...

CSS and JavaScript accessibility best practices - Learn web development
me (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links. something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls. 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). most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy. you shouldn't however deviate too much from the expected visual feed...
... a good, simple example of table html and css in our table-css.html example (see it live also). table css generally serves to make the table fit better into your design and look less ugly. it is a good idea to make sure the table headers stand out (normally using bold), and use zebra striping to make different rows easier to parse. 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. your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content. there is an easy way to check whether your contrast is large enough to not cause problems. there are a number of contrast checking tools online that you can enter your foreground and ba...
...o this manually in firefox, and how to use a custom style sheet (css) with internet explorer by adrian gordon for the equivalent ie instructions. it is probably easier to do it using an extension, for example the stylish extension is available for firefox, safari, opera, and chrome. users might do this for a variety of reasons. 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. whatever the need, you should be comfortable with this, and make your designs flexible enough so that such changes will work in your design. as an example, you might want to make sure your main content area can handle bigger text (maybe it will start to scroll ...
...t audience, and it would be unreasonable to expect you to make it 100% accessible to blind people, however you could implement keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies. the problem with too much javascript the problem often comes when people rely on javascript too much. 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. this has all kinds of accessibility and other issues associated with it, so it is not advised. as well as using the right element for the right job, you should also make sure you are using the right technology for the right job! think carefully about whethe...

WAI-ARIA basics - Learn web development
g from the top of the page. as another example, apps started to feature complex controls like date pickers for choosing dates, sliders for choosing values, etc. 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. as a result, developers quite often rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using css and controlled using javascript. the problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble o...
... see our section on testing screenreaders for more information. signposts/landmarks wai-aria adds the role attribute to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. the first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. 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. for example, voice...
...ond the actual input being called out as a search input (<input type="search">). in addition, some older browsers (most notably ie8) don't recognise the semantics of the html5 elements. let's improve it by the use of some aria features. first, we'll add some role attributes to our html structure. ...
...ore about these semantics and the power of aria properties/attributes below, especially in the accessibility of non-semantic controls section. for now though, let's look at how aria can help with dynamic content updates. dynamic content updates content loaded into the dom can be easily accessed using a screenreader, from textual content to alternative text attached to images. traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments. the problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like xmlhttprequest, fetch, or dom apis. these are sometimes referred to as live regions. le...

What text editors are available? - Learn web development
in this article we highlight some things to think about when installing a text editor for web development. prerequisites: you should already know about various software you need to build a website. objective: learn how to choose a text editor that best suits your needs as a web developer. summary a website consists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely. the sheer number of choices is a bit overwhelming, since a text editor is so basic to computer science (yes, web development is computer science). ideally, you'd try as many editors as you can and get a feel for what suits your workflow. but we'll give you some pointers for getting started. here are the primary questions you should conside...
...our choice. however, some editors are only available for certain oss, so if you like switching back and forth, that would narrow down the possibilities. any text editor can get the job done, if it runs on your system, but a cross-platform editor eases migration from os to os. so first find out which os you're using, and then check if a given editor supports your os. 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). if you're running ubuntu, your best bet is to search within the ubuntu software center. in general, of course, the linux/unix world is a pretty diverse place where different distros work with different, incompatible packaging systems. that means, if you've set your ...
...ually quite straightforward. the method varies based on your platform but it shouldn't be too hard: windows. the developers will give you an .exe or .msi file. sometimes the software comes in a compressed archive like .zip, .7z, or .rar, and in that case you'll need to install an additional program to extract the content from the archive. windows supports .zip by default. mac. on the editor's website you can download a .dmg file. some text editors you can find directly in the apple store to make installation even simpler. linux. in the most popular distros you can start with your graphical package manager (ubuntu software center, mintinstall, gnome software, &c.). you can often find a .deb or .rpm file for prepackaged software, but most of the time you'll have to use your distro's repository...
...distros you can start with your graphical package manager (ubuntu software center, mintinstall, gnome software, &c.). you can often find a .deb or .rpm file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in worst case scenario, compile your editor from source. take the time to carefully check the installation instructions on the text editor's website. when you install a new text editor, your os will probably continue to open text files with its default editor until you change the file association. these instructions will help you specify that your os should open files in your preferred editor when you double-click them: windows windows 8 windows 7 older systems mac os x linux ubuntu unity gnome kde n...

How do I use GitHub Pages? - Learn web development
th other people's code too! this article provides a basic guide to publishing content using github's gh-pages feature. publishing content github is a very important and useful community to get involved in, and git/github is a very popular version control system — most tech companies now use it in their workflow. github has a very useful feature called github pages, which allows you to publish website code live on the web. basic github setup first of all, install git on your machine. this is the underlying version control system software that github works on top of. next, sign up for a github account. it's simple and easy. once you've signed up, log in to github.com with your username and password. preparing your code for upload you can store any code you like in a github repository, ...
... the underlying version control system software that github works on top of. next, sign up for a github account. it's simple and easy. once you've signed up, log in to github.com with your username and password. 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. with the primary entry point being an html file called index.html. the other thing you need to do before moving on is to initialise your code directory as a git repository. to do this: point the command line to your test-site directory (or whatever you called the directory containing your website). for this, use the cd command (i.e. "change directory"). here's what you'd type if you've ...
...th the primary entry point being an html file called index.html. the other thing you need to do before moving on is to initialise your code directory as a git repository. to do this: point the command line to your test-site directory (or whatever you called the directory containing your website). for this, use the cd command (i.e. "change directory"). ...
... your code directory as a git repository. to do this: point the command line to your test-site directory (or whatever you called the directory containing your website). for this, use the cd command (i.e. "change directory"). 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. it will look something like ...

What is a Domain Name? - Learn web development
provide a human-readable address for any web server available on the internet. any internet-connected computer can be reached through a public ip address, either an ipv4 address (e.g. 173.194.121.32) or an ipv6 address (e.g., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). 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. ip addresses are hard to remember and might change over time. to solve all those problems we use human-readable addresses called domain names. deeper dive structure of domain names a domain name has a simple structure made of several parts (it might be one part only, two, three...), separated by dots and read from right to left: each of those parts provides specific information abo...
...in name registries to keep track of technical and administrative information connecting you to your domain name. note : for some domain name, it might not be a registrar which is in charge of keeping track. for instance, every domain name under .fire is managed by amazon. finding an available domain name to find out whether a given domain name is available, go to a domain name registrar's website. most of them provide a “whois” service that tells you whether a domain name is available. alternatively, if you use a system with a built-in shell, type a whois command into it, as shown here for mozilla.org: $ whois mozilla.org domain name:mozilla.org domain id: d1409563-lror creation date: 1998-01-24t05:00:00z updated date: 2013-12-08t01:16:57z registry expiry date: 2015-01-23t05:00:00z...
...la.org because the mozilla foundation has already registered it. on the other hand, let's see if i could register afunkydomainname.org: $ whois afunkydomainname.org not found as you can see, the domain does not exist in the whois database (at the time of writing), so we could ask to register it. good to know! getting a domain name the process is quite straightforward: go to a registrar's website. usually there is a prominent “get a domain name” call to action. click on it. fill out the form with all required details. make sure especially that you have not misspelled your desired domain name. once it's paid for, it's too late! the registrar will let you know when the domain name is properly registered. within a few hours, all dns servers will have received your dns information. ...
...h registered domain name. now that the computer knows the requested ip address, your browser can negotiate contents with the web server. next steps okay, we talked a lot about processes and architecture. time to move on. if you want to get hands-on, it's a good time to start digging into design and explore the anatomy of a web page. it's also worth noting that some aspects of building a website cost money. please refer to how much it costs to build a web site. or read more about domain names on wikipedia. you can also find here a fun and colourful explanation of how dns woks. ...

CSS basics - Learn web development
the mouse pointer is hovering over the link. there are many more selectors to discover. to learn more, see the mdn selectors guide. fonts and text now that we've explored some css fundamentals, let's improve the appearance of the example by adding more rules and information to the style.css file. first, find the output from google fonts that you previously saved from what will your website look like?. add the <link> element somewhere inside your index.html's head (anywhere between the <head> and </head> tags). it looks something like this: <link href="https://fonts.googleapis.com/css?family=open+sans" rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage. next, delete the existing rule you have in your style.css fi...
...ss?family=open+sans" rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage. next, delete the existing rule you have in your style.css file. it was a good test, but let's not continue with lots of red text. add the following lines (shown below), replacing the font-family assignment with your font-family selection from what will your website look like?. the property font-family refers to the font(s) you want to use for text. this rule defines a global base font and font size for the whole page. since <html> is the parent element of the whole page, all elements inside it inherit the same font-size and font-family. html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "open sans",...
... display sets the display mode of an element. (keep reading to learn more) to continue, let's add more css. keep adding these new rules at the bottom of style.css. experiment with changing values to see what happens. changing the page color html { background-color: #00539f; } this rule sets a background color for the entire page. change the color code to the color you chose in what will my website look like?. styling the body body { width: 600px; margin: 0 auto; background-color: #ff9500; padding: 0 20px 20px 20px; border: 5px solid black; } there are several declarations for the <body> element. let's go through these line-by-line: width: 600px; this forces the body to always be 600 pixels wide. margin: 0 auto; when you set two values on a property like margin or padding, ...
... that looks similar to this one: (you can view our version here.) if you get stuck, you can always compare your work with our finished example code on github. in this exercise, we have just scratched the surface of css. to go further, see learning to style html using css. 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 ...

Creating hyperlinks - Learn web development
fy where the file you're interested in is located in the filesystem. let's look at an example of a directory structure, see the creating-hyperlinks directory. the root of this directory structure is called creating-hyperlinks. when working locally with a web site, you'll have one directory that contains the entire site. inside the root, we have an index.html file and a contacts.html. 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.). there are also two directories inside our root — pdfs and projects. these each have a single file inside them — a pdf (project-brief.pdf) and an index.html file, respectively. note that you can have two index.html files in one project, as long as...
...f links out of context that are labeled "click here", "click here", "click here". use relative links wherever possible from the description above, you might think that it's a good idea to just use absolute links all the time because they don't break when a page is moved like relative links. 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. for a start, it's easier to scan your code — relative urls are generally shorter than absolute urls, which makes reading code much easier. second, it's more efficient to use relative urls wherever possible. when you use an absolute url, the browser starts by looking up the real location of the server on the domain name ...
... to the latest windows version of firefox: <a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-us" download="firefox-latest-64bit-installer.exe"> download latest firefox for windows (64-bit) (english, us) </a> active learning: creating a navigation menu for this exercise, we'd like you to link some pages together with a navigation menu to create a multi-page website. this is one common way in which a website is created — the same page structure is used on every page, including the same navigation menu, so when links are clicked it gives the impression that you are staying in the same place, and different content is being brought up. you'll need to make local copies of the following four pages, all in the same directory. for a complete file list, see the n...
... them. ...

Getting started with HTML - Learn web development
lla homepage". this appears as a tooltip when a cursor hovers over the element. target: the target attribute specifies the browsing context used to display the link. for example, target="_blank" will display the link in a new tab. if you want to display the linked content in the current tab, just omit this attribute. edit the line below in the input area to turn it into a link to your favorite website. add the <a> element. add the href attribute and the title attribute. specify the target attribute to open the link in the new tab. you'll be able to see your changes update live in the output area. you should see a link—that when hovered over—displays the value of the title attribute, and when clicked, navigates to the web address in the href attribute. remember that you need to inclu...
...ou get really stuck, press the show solution button to see the answer. ...
...); 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(); ...
...or a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. this is permitted in certain circumstances, but it can also break your markup in other circumstances. 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. obviously, this is not intended! i...

Fetching data from the server - Learn web development
this seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible, such as xmlhttprequest and the fetch api. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to fetch data from the server and use it to update the contents of a web page. ...
...uch as xmlhttprequest and the fetch api. prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to fetch data from the server and use it to update the contents of a web page. what is the problem here? 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. the trouble with this model is that whenever you want to update any part of the page, for example, to display a new set of products or load a new page, you've got to load the entire page again. this is extremely wasteful and results in a poor user experience, es...
...ode (just above the closing </script> tag) to load verse 1 by default, and make sure the <select> element always shows the correct value: updatedisplay('verse 1'); versechoose.value = 'verse 1'; serving your example from a server modern browsers will not run xhr requests if you just run the example from a local file. this is because of security restrictions (for more on web security, read website security). to get around this, we need to test the example by running it through a local web server. to find out how to do this, read how do you set up a local testing server? fetch the fetch api is basically a modern replacement for xhr; it was introduced in browsers recently to make asynchronous http requests easier to do in javascript, both for developers and other apis that build on top of...
...ing all the products in the user interface. to handle errors, we chain a .catch() block onto the end of the chain. this runs if the promise fails for some reason. inside it, we include a function that is passed as a parameter, an error object. this error object can be used to report the nature of the error that has occurred, in this case we do it with a simple console.log(). 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(). you can test the fail case yourself: make a local copy of the example files (download and unpack the can-store zip file). run the code through a web server (as described above, in serving your e...

What is JavaScript? - Learn web development
ll need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use). third party apis are not built into the browser by default, and you generally have to grab their code and information from somewhere on the web. 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. note: these apis are advanced, and we'll not be covering any of these in this module. you can find out much more about these in our client-side web apis module. there's a lot more available, too! however, don't get over excited just yet. you won't be able to build the ...
...d this later in the article, in the script loading strategies section. 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. this is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things. note: there are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course. javascript running order when the browser encounters a block...
...script. server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. examples of popular server-side web languages include php, python, ruby, asp.net and... javascript! javascript can also be used as a server-side language, for example in the popular node.js environment — you can find out more about server-side javascript in our dynamic websites – server-side programming topic. dynamic versus static code the word dynamic is used to describe both client-side javascript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. server-side code dynamically generates new content on the server, e.g. pulling data ...
...ntuitive), or to explain very simple operations (maybe your code is overcomplicated). summary so there you go, your first step into the world of javascript. we've begun with just theory, to start getting you used to why you'd use javascript and what kind of things you can do with it. along the way, you saw a few code examples and learned how javascript fits in with the rest of the code on your website, amongst other things. javascript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. in the next article, we will plunge straight into the practical, getting you to jump straight in and build your own javascript examples. overview: first steps next in this module what is javascript?

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. we have already taken a look at optimizing images. this article looks at optimizing video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the various video formats, their impact on performance, and how to reduce video impact on overall page load time while serving the smallest video file size based on each browsers file type support. why optimize your multimedia? for the average website, 25% of bandwidth comes from video. optimizing video has the potential f...
...rn about the various video formats, their impact on performance, and how to reduce video impact on overall page load time while serving the smallest video file size based on each browsers file type support. why optimize your multimedia? 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. optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize video preload, and consider streaming the video. the sections below describe each of these optimization techniques. compress all videos most video compression work compares adjacent frames within a video, with the intent of removing detail that...
...cing fullscreen mode. remove audio from muted hero videos for hero-video or other video without audio, removing audio is smart. <video autoplay="" loop="" muted="true" playsinline="" id="hero-video"> <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="web_banner.mp4" type="video/mp4"> </video> this hero-video code (above) is common to conference websites and corporate home pages. it includes a video that is auto-playing, looping, and muted. there are no controls, so there is no way to hear audio. the audio is often empty, but still present, and still using bandwidth. there is no reason to serve audio with video that is always muted. removing audio can save 20% of the bandwidth. depending on your choice of software, you might be able to remove a...
...ise, it wastes a lot of bandwidth. consider streaming video streaming allows the proper video size and bandwidth (based on network speed) to be delivered to the end user. similar to responsive images, the correct size video is delivered to the browser, ensuring fast video startup, low buffering, and optimized playback. conclusion optimizing video has the potential to significantly improve website performance. video files are relatively large compared to other website files, and always worthy of attention. this article explains how to optimize website video through reducing file size, with (html) download settings, and with streaming. previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? m...

Web performance - Learn web development
the rest of our beginner's learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them. ...
... the rest of our beginner's learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them. ...
...these perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. in this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings...
...d immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. this article outlines some javascript best practices that should be considered to ensure even complex content is as performant as possible. html performance features some attributes and the source order of your mark-up can impact the performance or your website. by minimizing the number of dom nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. this article looks in detail at how html can be used to ensure maximum performance. css performance features css may be a less important optimization focus for improved performan...

Handling common JavaScript problems - Learn web development
allow javascript code to access and manipulate raw binary data, which is necessary as browser apis for example start to manipulate streams of raw video and audio data. these are available in ie10 and above, and all modern browsers. 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. web workers api for running javascript in a separate thread, helping to improve performance. webgl api for real 3d graphics. web audio api for advanced audio manipulation. webrtc api for multi-person, real-time video/audio connectivity (e.g. video conferencing). there are a few strategies for handling incompatibilities between browsers relating to feature support; l...
... much easier api for creating common 3d objects, lighting, textures, etc. the service worker api is also very complex to use, so code libraries have started appearing to make common service worker uses-cases much easier to implement (see the service worker cookbook for several useful code samples). effects libraries: these libraries are designed to allow you to easily add special effects to your websites. this was more useful back when dhtml was a popular buzzword, and implementing an effect involved a lot of complex javascript, but these days browsers have a lot of built in css3 features and apis to implementing effects more easily. see javascripting.com/animation for a list of libraries. ui libraries: provide methods for implementing complex ui features that would otherwise be challenging to ...
...ure didn't work in say, firefox 10 and below, and implemented code to detect this, and then firefox 11 came out — which did support that feature? firefox 11 probably wouldn't be supported because it's not firefox 10. you'd have to change all your sniffing code regularly. 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. this became so common that browsers started to lie about what browser they were in their user-agent strings (or claim they were all browsers), to get around sniffing code. browsers also implemented facilities to allow users to change what user-agent string the browser reported when queried with javascript. this all made browser sniffing even m...
...dified audiocontext constructor, then creating a new audio context instance to use for our web audio coding. this pattern can be applied to just about any prefixed javascript feature. javascript libraries/polyfills also make use of this kind of code, to abstract browser differences away from the developer as much as possible. 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. if you insist on using prefixed features, make sure you use the right ones. you can look up what browsers require prefixes for different javascript/api features on mdn reference pages, and sites like caniuse.com. if you are unsure, you can also find out by doing some testing directly in browsers. for exam...

Deploying our app - Learn web development
cial terms and also the time required to actually deploy) it's possible to deploy during development to either share work in progress or to have a pre-release for some other purpose. 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. although netlify offers a drag and drop deployment service, we are intending to trigger a new deployment to netlify each time we push to a github repo. it's exactly these kinds of connected services that we would encourage you to look for when deciding on your own build toolchain. we can commit our code and push to github and the updated code will automatically trigger...
.../index.html, we can run it with npx parcel build src/index.html and parcel will build everything ready for production instead of just running it for development and testing purposes. this includes doing minification and tree-shaking of code, and cache-busting on filenames. 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. this is where our code, github, and netlify need to be set up to talk to one another, so that each time we update our github code repository, netlify will automatically pick ...
... to be added to our local git repository before we can push it up there, otherwise it won't be able to find it. you'll need to run a command with the following structure (use the provided https option for now — especially if you are new to github — not the ssh option): git remote add github https://github.com/yourname/repo-name.git so if your remote url was https://github.com/remy/super-website.git, as in the screenshot above, your command would be git remote add github https://github.com/remy/super-website.git change the url to your own repository, and run it now. now we're ready to push our code to github; run the following command now: git push github master at this point you'll be prompted to enter a username and password before git will allow the push to be sent. ...
...'s also the default branch that netlify will look for, which is convenient. so with our project committed in git and pushed to our github repository, the next step in the toolchain is to connect github to netlify so our project can be deployed live on the web! using netlify for deployment deploying from github to netlify is surprisingly simple once you know the steps, particularly with "static websites" such as this project. note: there are also a lot of guides and tutorials on netlify to help you improve your development workflow. let's get this done: go to https://app.netlify.com/start. press the github button underneath the continuous deployment heading. "continuous deployment" means that whenever the code repository changes, netlify will (try) to deploy the code, thus it be...

Client-side tooling overview - Learn web development
ter" copy of the code, and when, so a team of developers doesn’t end up overwriting each other’s work all the time. git is the source code control system that most people use these days. it is primarily accessed via the command line but can be accessed via friendly user interfaces. 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. we'll be using github in this module. you can find more information about it at git and github. code formatters code formatters are somewhat related to linters, except that rather than point out errors in your code, they usually tend to make sure your code is formatted correctly, according to your style rules, ideally automatically fixing errors that they ...
...a github repo). this can including linting, but also more sophisticated procedures like unit tests, where you run part of your code, making sure they behave as they should. frameworks for writing tests include jest, mocha, and jasmine. automated test running and notification systems include travis ci, jenkins, circle ci, and others. 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. for example, a typical toolchain will wait for you to push changes to a remote repo, run some tests to see if the changes are ok, and then if the tests pass, automatically deploy your app to a production site. netlify is one of the most popular deployment tools right now, but others i...
...e analysis of cross-browser compatibility and other checks, github bots for providing more powerful github functionality, updown for providing app uptime monitoring, and so many more! 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. in fact, you don't need any of these. however, including some of these tools in your process will improve your own development experience and likely improve the overall quality of your code. it often takes some time for new developer tools to settle down in their complexity. one of the best known tools, webpack, has a reputation for being overly complicated to work with, but in the latest major...
...s page). when you get results, have a look at information such as how many stars or downloads the extension has, as an indicator of its quality. development-related forums to ask questions on about what tools to use, for example mdn learn discourse, or stack overflow. when you’ve chosen a tool to use, the first port of call should be the tool project homepage. this could be a full blown website or it might be a single readme document in a code repository. the date-fns docs for example are pretty good, complete, and easy to follow. some documentation however can be rather technical and academic and not a good fit for your learning needs. instead, you might want to find some dedicated tutorials on getting started with particular types of tools. great starting places is to search web site...

Learn web development
the aim of this area of mdn is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfortable." from there, you should be able to start making your way, learning from the rest of mdn, and other intermediate to advanced resources that assume a lot of previous knowledge. if you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly. ...
...nly interested in coding, you'll want to move on to javascript or server-side development. begin with our javascript first steps and server-side first steps modules. 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. note: our glossary provides terminology definitions. besides, if you have a specific question about web development, our common questions section may have something to help you. random glossary entry semantics in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of javascript have?", or "what purpose...
...listed below, we'll cover all the essential aspects of structuring, styling, and interacting with web forms. accessibility — make the web usable by everyone accessibility is the practice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. this topic gives you all you need to know. 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. tools and testing this topic covers the tools developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control...
...s download fast and are responsive to user interaction, regardless of a user's bandwidth, screen size, network, or device capabilities. tools and testing this topic covers the tools developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side javascript frameworks. 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. this topic provides a general introduction to how the server-side works and detailed tutorials showing how to build up a server-side app using two popular frameworks: django (python) and express (node.js). getting our code examples the code examp...

Localizing with Pontoon
pontoon is a very simple and intuitive tool that requires little to no technical skill to use in the l10n workflow. here we'll discuss how to use pontoon to localize projects, from first sign-in to finalizing your contributions. along the way, we'll point out some sweet features that will make you more efficient and make your l10n contributions easier. ...
...rn how to get involved on github. first steps pontoon's home page is very easy to use. to begin localizing the project, click on the persona icon and sign in. next, simply select the project you want to work on and your locale from the dropdown menus. pontoon will automatically open that locale's project for you to get started. 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. only the toolbar on top belongs to pontoon, containing the following items (from left to right): list of strings opens a sidebar with a list of all strings to localize. project selector (affiliates) switches b...
...slate your first string: hover over the text you want to translate with your mouse. an edit button appears over that text. click on it to enable the translate mode. replace the original text with its translation into your language. click the save button to save your translation. out-of-context some strings are impossible to translate in-context, e.g. the contents of the <title> tag in websites and strings with placeables or different plural forms. by clicking on the hamburger icon in the main toolbar, a list of all strings and available translations will open in the sidebar. you can also use the sidebar for out-of-context localization: click on the string you'd like to translate. translation panel with original string and its details (e.g. comments) opens. translate the string...
...ons will open in the sidebar. you can also use the sidebar for out-of-context localization: click on the string you'd like to translate. translation panel with original string and its details (e.g. comments) opens. translate the string in the translation area below. click the save button to save your translation. as you translate strings out-of-context, translations will also appear in website, if they could also be translated in-context. translation helpers as you can see, suggestions from history, translation memory, machine translation and other locales are also available in the out-of-context translation panel. we call all of these translation helpers and here's how each of them will help you as you translate strings: history displays previously suggested translations, in...

SVN for Localizers
first things first, we need to give you a brief introduction to what svn is and where you can find the necessary tools to get started. if you're already familiar with this information, skip ahead to mozilla's svn repositories. brief intro to svn svn (abbreviation for subversion) is a free and open source repository tool we use to manage the localized mozilla web pages. it's a handy tool that allows us to grab, change, and store versions of source files in one location. ...
...o your computer and to push changed or localized files back onto the server. installing svn client: linux users can download the svn client from http://subversion.apache.org/packages.html or install packages provided within their distribution (for example, in debian, sudo apt-get install subversion). 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. windows users can install the svn client directly from the cygwin setup file. if you already installed cygwin but it didn't include the svn package, run the cygwin installer again and be sure to check the box beside subversion package. this option is found in the devel category. a possible alternative is to install tortoisesvn (graphical interface and comman...
...ng in trunk because they are seen most frequently. inside mozilla.com/trunk/locales, there are separate directories for each locale that is localizing mozilla.com. in each of those locale directories are other directories with files to be localized in .lang format. note: we use the terms stage and prod (abbreviations of the terms staging and production) to refer to testing and publicly visible websites, respectively. working with svn now that you understand the mozilla svn repository layout (in particular the layout for mozilla.com), let's get some files into your hands to start localizing! the first thing you need to do is copy the mozilla repository you want to work on to your computer. enter the following command in your command-line tool: svn checkout https://svn.mozilla.org/projec...
...be asked for your ldap login credentials. the -m parameter followed by some text within double quotes (") will be pushed along with your changes. within the double quotes you should briefly describe your changes so that everyone can see what you contributed. you can also double check your changes using the viewvc interface. after you commit your changes, wait 15 minutes and check the staging website for your locale. your recent changes should now be visible online. you will have the chance to see how the localized website will look when it's pushed to prod (i.e., a website that regular visitors will see). when localizing websites, l10n-drivers will always add needed files to your repository or update your files with new strings in english. it's very important for you to update your worki...

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:...
...nge requested by ca) cn = verisign class 2 public primary certification authority - g3 sha-1 fingerprint: 61:ef:43:d7:7f:ca:d4:61:51:bc:98:e0:c3:59:12:af:9f:eb:63:11 turned off code signing trust bit (change requested by ca) cn = ac raíz certicámara s.a. ...
...e signing trust bit (change requested by ca) cn = ac raíz certicámara s.a. ...
...e 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:4b 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.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:...
...om 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:...
... 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, em...
...z o.o. ...

amIWebInstallListener
the default implementation displays a confirmation dialog when add-ons are ready to install and uses the observer service to notify when installations are blocked. ...
..., size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); boolean onwebinstallrequested(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindowinternal. methods onwebinstallblocked() called when the website is not allowed to directly prompt the user to install add-ons. boolean onwebinstallblocked( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint32 acount optional ); parameters awindow the window that triggered the installs. auri the uri of the site that triggered the installs. ainstalls the addoninstalls that were ...
...riant ainstalls, in pruint32 acount optional ); parameters awindow the window that triggered the installs. auri the uri of the site that triggered the installs. ainstalls the addoninstalls that were blocked. acount optional the number of addoninstalls. return value true if the caller should start the installs. onwebinstalldisabled() called when installation by websites is currently disabled. void onwebinstalldisabled( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint32 acount optional ); parameters awindow the window that triggered the installs. auri the uri of the site that triggered the installs. ainstalls the addoninstalls that were blocked. acount optional the numb...
...domwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint32 acount optional ); parameters awindow the window that triggered the installs. auri the uri of the site that triggered the installs. ainstalls the addoninstalls that were blocked. acount optional the number of addoninstalls. onwebinstallrequested() called when a website wants to ask the user to install add-ons. boolean onwebinstallrequested( in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, in pruint32 acount optional ); parameters awindow the window that triggered the installs. auri the uri of the site that triggered the installs. ainstalls the addoninstalls that were requested. acou...

FileSystemEntry.toURL() - Web APIs
an then be used as a document reference in html content, or an empty string if the url can't be generated (such as if the file system implementation doesn't support tourl()). example if you have a filesystemfileentry corresponding to an image file in a file system available to your web site or app, you can call tourl() to get its url for use in html. 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...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... ...
... ...

Index - Web APIs
ential, credential management api, property, reference, credential management the type property of the credential interface returns a domstring containing the credential's type. valid values are password, federated and public-key. 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. for example, user agents have a particularly hard time dealing with federated identity providers or esoteric sign-in mechanisms that use more than just a username and password. to address these prob...
...this give users capabilities such as seeing the federated account they used to sign on to a site, or resuming a session without the explicit sign-in flow of an expired session. ...
... list for a specific feature for the current feature policy. 1294 federatedcredential api, credential management api, federatedcredential, interface, reference, credential management the federatedcredential interface of the the credential management api provides information about credentials from a federated identity provider. a federated identity provider is an entity that a website trusts to correctly authenticate a user, and that provides an api for that purpose. openid connect is an example of a federated identity provider framework. 1295 federatedcredential api, constructor, credential management api, federatedcredential, needsexample, reference, credential management the federatedcredential constructor creates a new federatedcredential object. ...
...ow object provides access to the browser's session history (not to be confused for webextensions history) through the history object. it exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with html5 -- manipulate the contents of the history stack. 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). to see how it works, please create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ): 1992 working with the history api advanced, dom, history api, history api tutorial html5 introduced the pushstate() and replacestate() methods for add and modifying history...

Reporting API - Web APIs
nism for web applications to use to make reports available based on various platform features (for example content security policy, feature-policy, or feature deprecation reports) in a consistent manner. 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. such information can include: content security policy violations. feature-policy violations. deprecated feature usage (when you are using something that will stop working soon in browsers). occurrence of crashes. occurrence of user-agent interventions (when the browser blocks something your code is trying to do because it is deemed a security risk for example, or just plain...
...oad balancing (each endpoint will receive a specified proportion of report traffic) and safeguarding against failure (fallback endpoints can be specified to use if the primary ones fail). note: there is no absolute guarantee of report delivery — a report could still fail to be collected if a serious error occurs. 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. this method is not as failsafe as the...
...ich can then be used to collect and access reports. report an object representing a single report. reporting api dictionaries reportingobserveroptions allows options to be set in the constructor when creating a reporting observer. ...
...tructor when creating a reporting observer. available report types the spec defines the following report types: deprecation report indicates that a webapi or other browser feature being used in the website is expected to stop working in a future release. indicated by a report.body property with a deprecationreportbody return value. intervention report indicates that a request made by the website has been denied by the browser, e.g. for security or user annoyance reasons. indicated by a report.body property with a interventionreportbody return value. crash report indicates that the website stopped running due to a browser crash. indicated by a report.body property with a crashreportbody return value. examples in our deprecation_report.html example, we create a simple reporting observ...

Web Authentication API - Web APIs
les strong authentication with public key cryptography, enabling passwordless authentication and/or secure second-factor authentication without sms texts. ...
...ds or sms texts for registering, authenticating, and second-factor authentication with websites. this resolves significant security problems related to phishing, data breaches, and attacks against sms texts or other second-factor authentication methods while at the same time significantly increasing ease of use (since users don't have to manage dozens of increasingly complicated passwords). 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. similar to the other forms of the credential management api, the web authentication api has two basic methods that correspond to register and login: navigator.credentials.create() - when used wit...
... webauthn.org and its client source code and server source code specifications specification status comment web authentication: an api for accessing public key credentials level 1 recommendation initial definition. ...
... webauthn.org and its client source code and server source code specifications specification status comment web authentication: an api for accessing public key credentials level 1 recommendation initial definition. ...

Index - Developer guides
gecko/firefox 6 with multi-touch support added in gecko/firefox 12. 26 using device orientation with 3d transforms advanced, css, dom, needsupdate, orientation, transforms this article provides tips on how to use device orientation information in tandem with css 3d transforms. 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. 28 guide to web apis api, guide, landing, web the web includes a wide array of apis that can be used from javascript to build increasingly more powerful and capable applications, running either on the web, locally, or through technology such as nod...
...ation and performance landing, optimization, performance, web when building modern web apps and sites, it's important to make your content perform well. that is, to make it work quickly and efficiently. this lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power. there are several tools available to check the performance of a website or blog. the most notable tools are listed below. 37 parsing and serializing xml ajax, add-ons, dom, dom parsing, document, extensions, guide, htmldocument, json, parsing, parsing xml, serializing, serializing xml, xml, xmldocument, xmlhttprequest in this article, we'll look at the objects provided by the web platform to make the common tasks of serializing and parsing xml ea...
...recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies. relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. 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. 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 he...
...ity, dom, html, javascript, web development 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. ...

Browser detection using the user agent - HTTP
but browsers and standards are not perfect, and there are still some edge cases where detecting the browser is needed. using the user agent to detect the browser looks simple, but doing it well is, in fact, a very hard problem. ...
...ective, than progressive enhancement, but may be useful in some cases. mobile device detection arguably the most common use and misuse of user agent sniffing is to detect if the device is a mobile device. however, people too often overlook what they are really after. 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. while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side! so, user agent sniffing i...
...o, user agent sniffing is definitely not the way to go. thankfully, there are much better alternatives. use navigator.maxtouchpoints to detect if the user's device has a touchscreen. then, default back to checking the user agent screen only if (!("maxtouchpoints" in navigator)) { /*code here*/}. 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. rather, add in touch conveniences such as bigger, more easily clickable buttons (you can do this using css by simply increasing the font size). here is an example of code that increases the padding of #examplebutton to 1em on mobile devices. var hastouchscreen = false; if ("maxtouchpoints" in navigator) { ...
...) is simply a poor man's version of not all and (min-width: 25em): do not use (max-width: 24.99em) because the layout might break on very high font sizes on very high definition devices in the future. always be very deliberate about choosing the right media query and choosing the right >=, <=, >, or < in any corresponding javascript because it is very easy to get these mixed up, resulting in the website looking wonking right at the screen size where the layout changes. thus, thoroughly test the website at the exact widths/heights where layout changes occur to ensure that the layout changes occur properly. making the best of user agent sniffing after reviewing all of the above better alternatives to user agent sniffing, there are still some potential cases where user agent sniffing is appropr...

HTTP Index - HTTP
like the notion of resources and uris, a simple structure of messages, and a client-server structure for the communication flow. on top of these basic concepts, numerous extensions have appeared over the years, adding new functionality and new semantics by creating new http methods or headers. 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. this page provides some advice on what's best. 6 data urls base64, guide, http, intermediate, url data urls, urls prefixed with the data: scheme, allow content creators to embed small files inline in documents. 7 evolution of http guide, http, needsupdate, needsupdate(http/3) http (hypertext transfer protoc...
... but some of the information is available to sites the browser connects to as well. 12 browser detection using the user agent compatibility, http, web development serving different web pages or services to different browsers is usually a bad idea. the web is meant to be accessible to everyone, regardless of which browser or device they're using. there are ways to develop your website to progressively enhance itself based on the availability of features rather than by targeting specific browsers. 13 compression in http guide, http, compression compression is an important way to increase the performance of a web site. for some documents, size reduction of up to 70% lowers the bandwidth capacity needs. over the years, algorithms also got more efficient, and ...
... header contains the time in seconds the object has been in a proxy cache. 64 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource. 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. 66 authorization http, http header, reference, request header, header the http authorization request header contains the credentials to authenticate a user agent with a server, usually after the server has responded with a 401 unauthorized status and the www-authenticate header. 67 cache-control cache-control, general header, http, http header, reference ...
...ectives for caching mechanisms in both requests and responses. caching directives are unidirectional, meaning that a given directive in a request is not implying that the same directive is to be given in the response. 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. it allows web developers to have more control over the data stored locally by a browser for their origins. 69 connection http, headers, reference, web the connection general header controls whether or not the network connection stays open after the current transaction finishes. if the value sent is keep-alive, the connection is persistent and not closed, allowing for subsequ...

Mixed content - Web security
erved over http that is included in an https webpage, but that cannot alter other portions of the webpage. for example, an attacker could replace an image served over http with an inappropriate image or message to the user. 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. if the attacker observes http requests to certain images, they could determine which webpage the user is visiting. passive content list this section lists all types of http requests which are considered passive content: <img> (src attribute) <audio> (src attribute) <video> (src attribute) <object> subresources (when an <object> performs http requests) mixed active content mixed active...
...equest for the http content. the attacker can also rewrite the response to include malicious javascript code. malicious active content can steal the user's credentials, acquire sensitive data about the user, or attempt to install malware on the user's system (by leveraging vulnerabilities in the browser or its plugins, for example). 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. the webpage may have public data visible to the world or private data visible only when authenticated. if the webpage is public and has no sensitive data about the user, using mixed active content still provides the attacker with the opportunity to redirect the user to other http pages and steal http cookies from those s...
...cases in css where a <url> value is used (@font-face, cursor, background-image, and so forth). <object> (data attribute) navigator.sendbeacon (url attribute) other resource types like web fonts and workers may be considered active mixed content, as they are in chrome. ...
... starting in firefox 23, mixed active content is blocked by default (and mixed display content can be blocked by setting a preference). ...

Web security
even simple bugs in your code can result in private information being leaked, and bad people are out there trying to find ways to steal data. the web security-oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft. content security content security policy (csp) content security policy (csp) is an added layer of security that helps to detect and mitigate certain types of attacks, including cross-site scripting (xss) and data injection attacks. these attacks are used for everything from data theft to site defacement to the distribution of malware. ...
... content. https https (hypertext transfer protocol secure) is an encrypted version of the http protocol. it uses ssl or tls to encrypt all communication between a client and a server. this secure connection allows clients to be sure that they are connected with the intended server, and to exchange sensitive data. http strict-transport-security the strict-transport-security: http header lets a website specify that it may only be accessed using https. certificate transparency certificate transparency is an open framework designed to protect against and monitor for certificate misissuances. newly issued certificates are 'logged' to publicly run, often independent ct logs which maintain an append-only, cryptographically assured record of issued tls certificates. mixed content an https page th...
...ed' to publicly run, often independent ct logs which maintain an append-only, cryptographically assured record of issued tls certificates. mixed content an https page that includes content fetched using cleartext http is called a mixed content page. pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers. 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. consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). passive mixed content is displayed by default, but users can set a preference to block this type of content, as well. this page explains what you shou...
...on security insecure passwords serving login forms over http is especially dangerous because of the wide variety of attacks that can be used against them to extract a user’s password. network eavesdroppers could steal a user's password by sniffing the network, or by modifying the served page in transit. privacy and the :visited selector before about 2010, the css :visited selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links. security-related glossary terms block cipher mode of operation certificate authority challenge-response authentication cipher cipher suite ciphertext cor...

Index - Archive of obsolete content
sms, ideally an extension that needs to display web content (which is always potentially dangerous) will use all of them. 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. once the content has been downloaded, the extension authors proceed to use eval() to decode the string content into javascript objects. this practice is dangerous and will not, in fact, pass an amo review. so the extension will not be allowed to move out of the amo sandbox. 233 enhanced extension installation add-ons, extensions no summary! 234 extension etiquett...
...ipting, extensions, javascript, seamonkey, url, thunderbird starting with seamonkey 2 alpha 1 seamonkey supports toolkit/-style extensions. these type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions. 241 firefox addons developer guide the original document is in japanese and distributed via the xuldev.org website. 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). 242 hiding browser chrome add-ons, extensions, xul, xulbrowserwindow there are times in which an extension may find it usefu...
... 3274 gecko compatibility handbook cross-browser_development, gecko, web development ** notes ** - the solution quick reference needs more attention. - i'm also looking for a way to organize all that information. - some inline examples were removed because of technical limitations. 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. 3275 getting the page url in npapi plugin add-ons, npapi, plugins sometimes, you want to restrict an npapi plugin to be loadable only from a certain url or domain or scheme. or whenever you make network requests yourself, you almost always need to enforce same-origin policy. 3282 index archive, i...

Frequently Asked Questions - Archive of obsolete content
e 'xmlns:xlink' attribute has been used in the file without including the following two namespace bindings on the root <svg> tag. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> make sure all your svg files have these bindings. for more information see this link. why am i asked to choose a program to open svg files? when you try to load svg files from some websites you may get a dialogue asking you "what should firefox do with this file?". this is either because your browser doesn't support svg (you must have mozilla firefox 1.5 or newer), or because the webpage/server isn't correctly telling mozilla that the file contains svg. for example, webpages that embed svg using the <object> or <embed> tags must have a 'type' attribute assigned with the correct svg...
...e webpage/server isn't correctly telling mozilla that the file contains svg. for example, webpages that embed svg using the <object> or <embed> tags must have a 'type' attribute assigned with the correct svg mime type of "image/svg+xml". if the mime type specified is wrong (for example image/svg-xml) mozilla won't recognise it. if that isn't the problem, then it may be that the server hosting the website is misconfigured. for information on configuring servers for svg see this link. why am i asked to install a plug-in to view svg files? this is probably because there is an <embed> or <object> tag in the html page and its 'type' attribute is set to the wrong mime type. the svg mime type is image/svg+xml (not image/svg-xml or anything else for that matter). correct this mistake or ask the documen...
...ng a (very small!) svg file that demonstrates the bug. if you have any problems with the bug database feel free to contact contact us. can i use a plugin for svg instead of mozilla's native support? 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. the native svg support must be turned off before mozilla will look to see if there's an svg plugin installed. this is done by toggling a hidden user configuration preference (pref). to access the pref type about:config into the url bar, then type svg.enabled into the filter field. when you double click on the pref you will see its value change to and from true/false, turning the native support o...

Mozilla release FAQ - Archive of obsolete content
oes its own qa. in return for this, netscape (aol) contributes developers to work on the project. the netscape versions may have a different look/feel than mozilla versions, and also may add proprietary features. the netscape versions are all branded as netscape (aol) products. what resources are available to the mozilla community? 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. other irc clients can be found at irchelp.org. usenet all newsgroups in the netscape.public.mozilla.* hierarchy. if your news server doesn't carry these, you can use the mozilla news server. (some people...
...ative to unix qt = another gui toolkit xp = cross platform xpfe = cross-platform frontend based on nglayout m[number] = milestone release [number] (no longer used) i'm wondering how to do xxx with navigator 3.x... the mozilla newsgroups are intended to be used by people who will be working with mozilla, either in an organizational fashion, suggesting features, or coding. visit netscape's website for help on that software. i went and made a suggestion and people were rude to me. why? if you posted it to the mailing list/newsgroups, remember that on usenet, people are not always polite to each other. some people are just rude, and some people have a low tolerance for uninformed people. if you're new to the mozilla newsgroups, you probably should be reading the newsgroup for a few days regu...
... under the covers (by me) the rfc for http the w3's html 4.0 definition building mozilla i get x error when trying to build mozilla - what's wrong? first, make sure that you have the latest release of the mozilla source. secondly, ensure that you have fully read the build instructions for your platform. 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. grab the latest version of gnu make from the gnu ftp site. regarding shells, i would like to recommend the following: if you are using unix, use bash-family shells for the build because of the better control over redirection (in case you want to log er...

Threats - Archive of obsolete content
example.net, or a computer can identify itself as a site called www.example.net when it is not. this type of impersonation is known as spoofing. misrepresentation. a person or organization can misrepresent itself. for example, suppose the site www.example.net pretends to be a furniture store when it is really just a site that takes credit-card payments but never sends any goods. malware. 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. for example, site can be infected with a malware redirect hack in which a legitimate redirects to spam site or a phishing page. this kind of malwar...
...for more detailed look on this you can refer to this detailed post on wordpress malware redirect. phishing. phishing is a method of a social engineering with the goal of obtaining sensitive data such as passwords, usernames, credit card numbers. ...
...nt messages or phishing emails which appear to be legitimate but they are used to obtain personal information. for example, a mail which appears to be to be sent from a bank, asking to verify your identity by giving away your private information. ddos network attack. the volume and strength of ddos attacks are growing as hackers try to bring organizations offline or steal their data by flooding websites and networks with spurious traffic. original document information author(s): ella deon lackey last updated date: 2012 copyright information: © 2012 red hat, inc. link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation original document information author(s): joint task force transformation initiative title: national institute o...

Common Firefox theme issues and solutions - Archive of obsolete content
nd :not ([mode="text"]) to those style rules. for instance use toolbar[iconsize="small"]:not ([mode="text"]). a little experimenting may be required to fully address this issue with your theme. 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. in the case of secure sites the icon must be a padlock. to fix this issue, you need to copy the files chrome://browser/skin/identity-icons-generic.png, chrome://browser/skin/identity-icons-https.png and chrome://browser/skin/identity-icons-https-ev.png to your browser folder. you can modify/redesign these icons to match your theme provided appropriate padlock icons are used for secure s...
...abled url bars there needs to be a visual clue when url bar is disabled. to test this please go to bug 324777 using the default theme and activate the "click me" link. the url bar of the resulting popup window is disabled. 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. this issue also applies to the edit bookmark panel, which is activated by double clicking on the bookmark star in the url bar. for details, please see bug 708797. "about" pages about:addons disabled add-on icons are not grey scale in tools > add-ons, the icons of disabled icons need to be converted to grey scale. to accomplish this c...
... find and fix issues before you push updates to amo. this is document is a work in progress so feedback and/or suggestions is appreciated. mdn css reference mozilla's developer network maintains a great css reference. amo themes forum we'd like to encourage you to participate in the amo (addons.mozilla.org) forums theme forum. 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. their theme development forum is here. mozillazine firefox nightly theme changes thread mozillazine's firefox nightly theme changes thread is a great resource for keeping up to date with the latest changes to the firefox ui and contains links to the bugzilla bug reports, which detail what changes were m...

Game monetization - Game development
s to not annoy the players too much, but visible enough to make them click it or at least take notice. adding adverts between game sessions on game over screens is a popular approach. licensing there's an approach that can work as a monetization model on it's own, and that's selling licenses for distribution of your game. there are more and more portals interested in showing your games on their websites. they follow various strategies to earn money via your games, but you don't have to worry about all that as selling the license is usually a one-time deal. you get the money and they can get creative with using your game to make money. finding publishers might be hard at first — try to look for them at the html5 gamedevs forums. if you're well known they may reach out to you. most of the deal...
...ll that as selling the license is usually a one-time deal. you get the money and they can get creative with using your game to make money. finding publishers might be hard at first — try to look for them at the html5 gamedevs forums. if you're well known they may reach out to you. most of the deals are done through emails when talking to a dedicated person on the publisher side. some publisher websites have that information easily available, while some others are harder to find. when reaching a publisher try to be nice and straight to the point — they are busy people. exclusive licenses the exclusive license is a type of license for one publisher — you've built a game and you're selling all the rights to it to a single entity along with the rights to redistribute it — softgames are an ...
... to write articles about your games and even get paid for them. game promotion and monetization at the same time is a win-win, and if you don't abuse it with too much advertising the readers will enjoy reading them and as well as learning a thing or two. if you focus on sharing the knowledge first and use your games just as the examples it should be ok. check out tuts+ game development or similar websites for writing opportunities. merchandise you can sell t-shirts, stickers or other gadgets — some devs make more money from the merchandise than from the games themselves, but it only works on very popular and recognizable games like angry birds. still, it could be another small stream of passive income. the more diversified your earnings are, the better your business stability. donations whe...

Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
ot. a network of co-infected computers is known as a botnet or a zombie army. both kaspersky labs and symantec have identified botnets -- not spam, viruses, or worms -- as the biggest threat to internet security. ...
...known as a botnet or a zombie army. both kaspersky labs and symantec have identified botnets -- not spam, viruses, or worms -- as the biggest threat to internet security. ...
...y. both kaspersky labs and symantec have identified botnets -- not spam, viruses, or worms -- as the biggest threat to internet security. ...

SEO - MDN Web Docs Glossary: Definitions of Web-related terms
search engines give some guidelines for seo, but big search engines keep result ranking as a trade secret. ...
... search engines give some guidelines for seo, but big search engines keep result ranking as a trade secret. ...
...ffic and possibly revenue (for ecommerce and ads). search engines give some guidelines for seo, but big search engines keep result ranking as a trade secret. seo combines official search engine guidelines, empirical knowledge, and theoretical knowledge from science papers or patents. seo methods fall into three broad classes: technical tag the content using semantic html. when exploring the website, crawlers should only find the content you want indexed. copywriting write content using your visitors' vocabulary. use text as well as images so that crawlers can understand the subject. popularity you get most traffic when other established sites link to your site. learn more general knowledge seo on wikipedia learn seo google webmasters learning resources ...

HTML: A good basis for accessibility - Learn web development
navigating the content. table layouts are a relic of the past — they made sense back when css support was not widespread in browsers, but now they just create confusion for screen reader users. additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain. ...
...it is also much leaner and smaller in terms of code size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slo...
...when necessary | w3c techniques for wcag 2.0 g201: giving users advanced warning when opening a new window | w3c techniques for wcag 2.0 skip links a skip link, also known as skipnav, is an a element placed as close as possible to the opening <body> element that links to the beginning of the page's main content. this link allows people to bypass content repeated throughout multiple pages on a website, such as a website's header and primary navigation. skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be a laborious task. webaim: "skip navigation" links how–to: use skip navigation links - the a11y project mdn understanding w...

HTML: A good basis for accessibility - Learn web development
navigating the content. table layouts are a relic of the past — they made sense back when css support was not widespread in browsers, but now they just create confusion for screen reader users. additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain. ...
...it is also much leaner and smaller in terms of code size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slo...
...when necessary | w3c techniques for wcag 2.0 g201: giving users advanced warning when opening a new window | w3c techniques for wcag 2.0 skip links a skip link, also known as skipnav, is an a element placed as close as possible to the opening <body> element that links to the beginning of the page's main content. this link allows people to bypass content repeated throughout multiple pages on a website, such as a website's header and primary navigation. skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be a laborious task. webaim: "skip navigation" links how–to: use skip navigation links - the a11y project mdn understanding w...

Supporting older browsers - Learn web development
without locking out users of older technology. prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand how to provide support for your layouts on older browsers that might not support the features you want to use. what is the browser landscape for your site? every website is different in terms of target audience. before deciding on the approach to take, find out the number of visitors coming to your site using older browsers. this is straightforward if you have an existing website which you are adding to or replacing, as you probably have analytics available which can tell you the technology people are using. if you have no analytics or this is a brand new site, t...
...to make this easy for you at mdn, by providing browser compatibility information on each page detailing a css property. for example, take a look at the page for grid-template-columns. at the bottom of this page is a table, which lists major browsers along with the version they began supporting this property. another popular way to find out about how well a feature is supported is the can i use website. this site lists the majority of web platform features with information about their browser support status. you can view usage statistics by location — useful if you work on a site that has users mostly for a specific area of the world. you can even link your google analytics account to get analysis based on your user data. understanding the technology your users have, and the support for thin...
... on a site that has users mostly for a specific area of the world. you can even link your google analytics account to get analysis based on your user data. understanding the technology your users have, and the support for things you might want to use puts you in a good place to make all of your decisions and to know how best to support all of your users. 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. similarly, some of your users will have an old browser version, and others the latest browser. some of your users might be hearing your content read out to them by a screen reader, or have zoomed in on the page to be able to read it. supporting every...

What is CSS? - Learn web development
break onto a new line and have space between them. links are colored and underlined to distinguish them from the rest of the text. what you are seeing is the browser's default styles — very basic styles that the browser applies to html to make sure it will be basically readable even if no explicit styling is specified by the author of the page. however, the web would be a boring place if all websites looked like that. using css you can control exactly how html elements look in the browser, presenting your markup using whatever design you like. for more on browser/default styles, check out the following video: what is css for? as we have mentioned before, css is a language for specifying how documents are presented to users — how they are styled, laid out, etc. a document is usually a...
...se a particular browser is interested in having some capability, other times because web designers and developers are asking for a feature, and sometimes because the working group itself has identified a requirement. css is constantly developing, with new features coming available. 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! as a newcomer to css, it is likely that you will find the css specs overwhelming — they are intended for engineers to use to implement support for the features in user agents, not for web developers to read to understand css. many experienced developers would much rather refer to mdn doc...
...how css works. it is unusual for all browsers to implement a feature at the same time, and so there is usually a gap where you can use some part of css in some browsers and not in others. for this reason, being able to check implementation status is useful. 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 follows is the compat data chart for the css font-family property. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-familychrome full support 1edge full support 12firefox fu...

Fundamental text and font styling - Learn web development
nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. 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. a simple example looks like so: p { font-family: arial; } this would make all paragraphs on a page adopt the arial font, which is found on any computer. web safe fonts speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without ...
...e an alternative (possibly older) version of the times new roman font called times. it's considered best practice to use both with times new roman as the preferred alternative. trebuchet ms sans-serif you should be careful with using this font — it isn't widely available on mobile oses. 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. note: there is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. this is a little bit more complex, and we will be discussing this in a separate artic...
...he current element we are styling (more specifically, the width of a capital letter m contained inside the parent element.) this can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. why bother? it is quite natural once you get used to it, and you can use em to size everything, not just text. you can have an entire website sized using em, which makes maintenance easy. rems: these work just like em, except that 1 rem is equal to the font size set on the root element of the document (i.e. <html>), not the parent element. this makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle — rem is not supported in internet explorer 8 and below.

What do common web layouts contain? - Learn web development
prerequisites: make sure you've already thought about what you want to accomplish with your web project. objective: learn where to put things on your webpages, and how to put them there. summary there's a reason we talk about web design. you start out with a blank page, and you can take it so many directions. and if you don't have much experience, starting out with a blank page might be a bit scary. we have over 25 years' experience and we'll give you some common rules of thumb to help you design your site. ...
...designs and exceptions, of course. in other articles we'll discuss how to design responsive sites (sites that change depending on the screen size) and sites whose layouts vary between pages. for now, it's best to keep your layout consistent throughout your site. active learning there is no active learning available yet. deeper dive let's study some more concrete examples taken from well-known websites. one-column layout invision application. a typical one-column layout providing all the information linearly on one page. quite straightforward. just remember, many people will still browse your site from desktops, so make your content usable/readable there as well. two-column layout. abduzeedo, a simple blog layout. blogs usually have two columns, a fat one for the main content an...
...the image of the main content. the way the curve of the header's menu ties in with the curve at the bottom of the image, the header and main content look like one thing even though they're technically completely different. the opera example looks more complex than the mica example, but it's actually easier to implement (all right, "easy" is a relative concept). 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? that will inspire you for your own design and give you good hints for which designs work and which ones don't. ...

What is accessibility? - Learn web development
in this article we give general accessibility principles and explain a few rules. active learning there is no active learning available yet. ...
...sibility: general principles we might associate accessibility at first with negative limitations. this building has to be accessible, so it must follow these regulations for door width and toilet size and elevator placement. that's a narrow way to think of accessibility. think of it as a wonderful way to empower people and serve more customers. 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? they'll go somewhere else. in general, we must think about our product from the viewpoints of all our target customers, and adapt accordingly. hence accessibility. web accessibility in the specific context of the web, accessibility means that anyone can benefit from y...
...that's just the beginning. accessibility champions since 1999, the w3c has operated a working group called the web accessibility initiative (wai) promoting accessibility through guidelines, support material, and international resources. more details please refer to: wikipedia article about accessibility wai (w3c's web accessibility initiative) next steps accessibility can impact both a website's design and technical structure. from a design point of view, we suggest learning about designing for all types of users. if the technical side interests you more, you could learn how to embed images in webpages. ...

Structuring a page of content - Learn web development
g it out using css is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of. 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. objective: to test knowledge of web page structures, and how to represent a prospective layout design in markup. starting point to get this assessment started, you should go and grab the zip file containing all the starting assets. the zip file contains: the html you need to add structural markup to. css to style your markup. images that are used on the page...
...images that are used on the page. create the example on your local computer, or alternatively use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. note: if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. 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. it needs to have: a header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. the title and logo appear side by side once styling is applied, and the navigation appears below those two items. a main content area containing two columns — a main block ...
...'s very hard to help someone with a coding problem if you can't see their code. ...

Introduction to web APIs - Learn web development
ng some complex lower-level code (e.g. c++ or rust) to do the actual audio processing. but again, this complexity is abstracted away from you by the api. third-party apis are not built into the browser by default, and you generally have to retrieve their code and information from somewhere on the web. for example, the twitter api allows you to do things like displaying your latest tweets on your website. it provides a special set of constructs you can use to query the twitter service and return specific information. relationship between javascript, apis, and other javascript tools so above, we talked about what client-side javascript apis are, and how they relate to the javascript language. let's recap this to make it clearer, and also mention where other javascript tools fit in: javascr...
...e a number of options available, e.g. simple name/value storage with the web storage api, and more complex tabular data storage with the indexeddb api. 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. map apis like mapquest and the google maps api allows you to do all sorts of things with maps on your web pages. the facebook suite of apis enables you to use various parts of the facebook ecosystem to benefit your app, for example by providing app login using facebook login, accepting in-app payments, rolling out targetted ad campaigns, etc. the telegram apis allows you to embed content from...
...nd the google maps api allows you to do all sorts of things with maps on your web pages. the facebook suite of apis enables you to use various parts of the facebook ecosystem to benefit your app, for example by providing app login using facebook login, accepting in-app payments, rolling out targetted ad campaigns, etc. the telegram apis allows you to embed content from telegram channels on your website, in addition to providing support for bots. the youtube api, which allows you to embed youtube videos on your site, search youtube, build playlists, and more. the pinterest api provides tools to manage pinterest boards and pins to include them in your website. the twilio api, which provides a framework for building voice and video call functionality into your app, sending sms/mms from your app...

Third-party APIs - Learn web development
previous overview: client-side web apis next the apis we've covered so far are built into the browser, but not all apis are. many large websites and services such as google maps, twitter, facebook, paypal, etc. provide apis allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. using facebook login to log in your users). this article looks at the difference between browser apis and 3rd party apis and shows some typical uses of the latter. 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. what are third party apis? third party ap...
...nctionality slightly differently, requiring the developer to make an http request to a specific url pattern to retrieve data. these are called restful apis — we'll show an example later on. they usually require api keys security for browser apis tends to be handled by permission prompts, as discussed in our first article. 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. third party apis have a slightly different permissions system — they tend to use developer keys to allow developers access to the api functionality, which is more to protect the api vendor than the user. you'll find a line similar to the following in the mapquest api example: l.mapquest.key = 'your-api-...
... to get it running, you'll need to: get an api key from google cloud. find the string enter-api-key-here in the source code, and replace it with your api key. run the example through a web server. it won't work if you just run it directly in the browser (i.e. via a file:// url). summary this article has given you a useful introduction to using third-party apis to add functionality to your websites. previous overview: client-side web apis next in this module introduction to web apis manipulating documents fetching data from the server third party apis drawing graphics video and audio apis client-side storage ...

Multimedia: Images - Learn web development
in terms of download performance, eliminating media, and reducing file size is the low-hanging fruit. this article looks at optimizing image and video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time. ...
...es. objective: to learn about the various image formats, their impact on performance, and how to reduce the impact of images on overall page load time. this is a high-level introduction to optimizing multimedia delivery on the web, covering general principles and techniques. for a more in-depth guide, see https://images.guide. why optimize your multimedia? 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. you need to be considerate of data usage. many people are on capped data plans or even pay-as-you-go where they are literally paying by the megabyte. this isn't an emerging market problem either. as of 2018, 24% of the united kingdom still use p...
...spite being the largest consumer of bandwidth, images load asynchronously so the visitor can see the page as they download and therefore, their impact on perceived performance is far lower than many expect. however, images are mostly used for content, so it's important that a visitor can see them as soon as possible for a good experience. 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. many javascript libraries can implement this for you, such as lazysizes, and browser vendors are working on a native lazyload attribute that is currently in the experimental phase. beyond loading a subset of images, next you should look into ...

What is web performance? - Learn web development
asurable to use? is the scrolling smooth? are buttons clickable? are pop-ups quick to open up, and do they animate smoothly as they do so? there are a lot of best practices to consider in making apps feel smooth, for example using css animations rather than javascript for animation, and minimizing the number of repaints the ui requires due to changes in the dom. perceived performance: how fast a website seems to the user has a greater impact on user experience than how fast the website actually is. how a user perceives your performance is as important, or perhaps more important, than any objective statistic, but it's subjective, and not as readily measurable. perceived performance is user perspective, not a metric. even if an operation is going to take a long time (because of latency or whatever...
...long it felt like it took the content to load. how content is rendered to effectively understand web performance, the issues behind it, and the major topic areas we mentioned above, you really should understand some specifics about how browsers work. this includes: how the browser works. 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. see populating the page: how the browser works for a detailed overview. source order. your html index file's source order can significantly affect performance. the download of additional assets linked to from the index file is generally sequential, based on source order, but this can be manipulated and should definitely be optimize...
...l attributes and the relationships between the nodes. extensive dom manipulation after the pages has loaded (e.g., adding, deleting, or moving of nodes) can affect performance, so it is worth understanding how to dom works, and how such issues can be mitigated. find out more at document object model. latency. 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. there is overhead involved in establishing tcp and http connections, and some unavoidable latency in pushing the request and response bytes back and forth across the network, but there are certain ways to reduce latency (e.g. reducing the number of http request you make by downloading less files, using a cdn to make your site more universally...

Handling common accessibility problems - Learn web development
es: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross browser testing. objective: to be able to diagnose common accessibility problems, and use appropriate tools and techniques to fix them. what is accessibility? 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. people with hearing impairments relying on captions/subtitles or other text alternatives for audio/video content. however, it i...
...some examples might include: users on mobile devices. users on alternative browsing devices such as tvs, watches, etc. ...
...d. you should make sure interactive elements like buttons and links have appropriate focus/hover/active states set, to give the user visual clues as to their function. if you remove the defaults for stylistic reasons, make sure you include some replacement styles. there are a few other considerations you should take into account. 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. your design might look cool, but it is no good if people with visual impairments like color blindness can't read your content. use a tool like webaim's color contrast checker to check whether your scheme is contrasting enough. another tip is to not rely on color alone for signposts/information, as th...

Introduction to automated testing - Learn web development
nguages; an idea of the high level principles of cross-browser testing. objective: to provide an understanding of what automated testing entails, how it can make your life easier, and how to make use of some of the commercial products that make things easier. 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. sounds like a lot of work, doesn't it? we agree — testing all the things we've looked at in previous articles manually can be a real pain. fortunately, there are tools to help us automate some of this pain away. there are two main ...
...ful scripts on your projects. once the install completes, test that node is installed by typing the following into the terminal, which returns the installed versions of node and npm: node -v npm -v if you've got node/npm already installed, you should update them to their latest versions. to update node, the most reliable way is to download and install an updated installer package from their website (see link above). to update npm, use the following command in your terminal: npm install npm@latest -g note: if the above command fails with permissions errors, fixing npm permissions should sort you out. to start using node/npm-based packages on your projects, you need to set up your project directories as npm projects. this is easy to do. for example, let's first create a test directo...
...ow many concurrent sessions are running, your total number of tests to date, and more. to start off with manual testing you need to select the "real time testing" tab from the left navigation menu. 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. as you click on the start button, a loading screen will appear, providing you with a vm (virtual machine) based on your configurations. once loaded, you can perform live, interactive cross-browser testing with a website. if you notice an issue with the ui, then you can share it with your colleagues by capturing a screenshot of your vm with the screenshot button. you can also record a vi...

Strategies for carrying out testing - Learn web development
and matomo. they expect you to self-host the analytics platform. setting up google analytics first of all, you'll need a google account. use this account to sign into google analytics. choose the google analytics (web) option, and click the sign up button. enter your web site/app details into the signup page. ...
...r your web site/app details into the signup page. this is fairly intuitive to set up; the most important field to get right is the website url. this needs to be your site/app's root url. once you've finished filling in everything, press the get tracking id button, then accept the terms of service that appear. the next page provides you with some code snippets and other instructions. 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. you could place the snippets below your closing </body> tag, or somewhere else appropriate that keeps it from getting muddled up with your application code. upload the changes to the development server, or wherever else you need your code. ...
...nu, then choosing develop > enter responsive design mode. chrome also has something similar: device mode (see simulate mobile devices with device mode). more often than not though, you'll have to install some kind of emulator. 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. if you want something a bit more lightweight, andy is a reasonable option that runs on both windows and mac. apple provides an app called simulator that runs on top of the xcode development environment, and emulates ipad/iphone/apple watch/apple tv. this includes the native ios safari browser. this unfor...

Accessibility Features in Firefox
ing search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing custom searches from the command line such as "word punditry" to look up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first going to the search tool's web site. custom searches can be added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination. the built-in text zoom feature can be accessed with the ctrl+plus and ctrl+minus hotkeys. the accessibility exten...
...ter keys rather than tabbing through many links to get there. caret browsing allows you to move through web content one letter a time. you can even select web content and copy it to the clipboard. -- all with the keyboard detailed advanced javascript control: mozilla gives you the ability to fine tune what javascript is allowed to do while you browse. 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. you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other ja...
... bunch of plain documents. firefox is currently the only browser to support the newly evolving standards for making these web applications accessible. companies such as yahoo! have announced they are already working with the technology their new richer interfaces accessible with this new technology. developers, please see our dhtml accessibility documentation and get involved in writing tools and websites using this new technology. sun contributes code to improve accessibility on unix a similar story occurred at sun microsystems. sun needed an accessible web browser for unix, specifically for solaris. again, rather than develop a brand new web browser, it made more sense to contribute fixes that make firefox accessible on unix. thanks to sun's efforts we already have excellent support for the g...

Localization content best practices
ys include the localization note with this format if you use a plural form in firefox. this comment is used by tools to identify strings with plural forms. one last advice: never use plural form as a replacement for single/multiple conditional. see bug 658191 for more details. ...
...nsider 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. using multiple %s give the impression that the order of variables if fixed, which is actually not. # localization note(generalsiteidentity): %1$s is the owner of the current website, # %2$s is the name of the certification authority signing the certificate. ...
... %s first thing: always add a localization comment explaining what these variables mean, even if it seems obvious. using multiple %s give the impression that the order of variables if fixed, which is actually not. # 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. unfortunately, this won't work at all: you need at least a thir...

SpiderMonkey compartments
another compartment, except through a cross-compartment wrapper. compartment example the firefox browser embeds spidermonkey. in firefox 4 and above, compartments are used and all javascript objects that belong to a certain origin (such as "http://mail.google.com/" or "http://www.bank.com/") are placed in a separate compartment. 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. this improves cache utilization by reducing false sharing of cache lines. false sharing occurs when we are trying to operate on an object and we have to read an entire cache line of data into the cpu cache. in the old model, javascript objects could be co-located with arbitrary other javascript objects from other orig...
...se sharing occurs when we are trying to operate on an object and we have to read an entire cache line of data into the cpu cache. in the old model, javascript objects could be co-located with arbitrary other javascript objects from other origins. such cross-origin objects are used together very infrequently, which reduces the number of cache hits we get. 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. javascript objects (including javascript functions, which are objects also) are only allowed to touch objects in the same compartment. this invariant is very useful for security purposes. the javascript engine enforces this requirement at a very low level. it means that a "google.com" object can never acci...
... other in memory, with no cross-origin objects in between. javascript objects (including javascript functions, which are objects also) are only allowed to touch objects in the same compartment. this invariant is very useful for security purposes. the javascript engine enforces this requirement at a very low level. it means that a "google.com" object can never accidentally leak into an untrusted website such as "evil.com". only a special object type can cross the compartment boundaries. we call these objects cross-compartment wrappers. spidermonkey tracks the creation of these cross-compartment wrappers and thus it knows at all times what objects from a compartment are kept alive by outside references (through cross-compartment wrappers). this allows the garbage collecting of individual compartm...

Storage Access API - Web APIs
arately (or completely break) if those cookies are not available. in the case of breakage, site owners have often encouraged users to add their site as an exception or to disable the policy entirely. 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 storage access api is intended to solve this problem; embedded cross-origin content can request unrestricted access to its first-party storage on a site-by-site basis via the document.requeststorageaccess() method, and check whether it already has access via the document.hasstorageaccess() method. in addition, sandboxed <iframe>s cannot be granted storage access by default for security re...
...stricted access to its first-party storage on a site-by-site basis via the document.requeststorageaccess() method, and check whether it already has access via the document.hasstorageaccess() method. in addition, sandboxed <iframe>s cannot be granted storage access by default for security reasons. the api therefore also adds the allow-storage-access-by-user-activation sandbox token. 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"> ... </iframe> the api is designed to limit the potential storage exceptions t...
...lementers of the storage access api — safari shows prompts for all embedded tracking content that has not previously received storage access, while firefox only prompts users after a tracking origin has requested storage access on more than a threshold number of sites. see document.requeststorageaccess() for more details. 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. this is caused by differences in the storage access policies implemented in the two browsers. design properties unique to firefox are summarized here: if the embedded origin tracker.example has already obtained first-party storage access on the top-level or...

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. description the navigation role is a landmark role. landmark roles provide a way to identify the organization and structure of a web page. by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically. screen readers use landmark roles to provide keyboard navigation to important sections of a page. ...
...d structure of a web page. by classifying and labeling sections of a page, structural information conveyed visually through layout is represented programmatically. screen readers use landmark roles to provide keyboard navigation to important sections of a page. like the html <nav> element, navigation landmarks provide a way to identify groups (e.g. lists) of links that are intended to be used for website or page content navigation. if a page includes more than one navigation landmark, each should have a unique label. if two or more navigational landmark on a page have the same set of links, use the same label for each. it is preferable to use the html5 <nav> element to define a navigation landmark. if the html5 nav element technique is not being used, use a role="navigation" attribute to define ...
...footer"> <!-- content --> </nav> repeated landmarks if a navigation landmark role or <nav> element in a document is repeated in a document, and both landmarks have identical content, use the same label for each landmark. an example of this would be repeating the main navigation at the top and bottom of the page. <header> <nav id="main-nav" aria-label="main"> <!-- list of links to main website locations --> </nav> </header> ... <footer> <nav id="footer-nav" aria-label="main"> <!-- list of links to main website locations --> </nav> </footer> redundant descriptions screen readers will announce the type of role the landmark is. because of this, you do not need to describe what the landmark is in its label. for example, a declaration of role="navigation" with an of aria-labe...

WAI-ARIA Roles - Accessibility
sistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional html interpretation techniques should be used. this role should only be used to define very dynamic and desktop-like web applications.aria: article rolethe article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.aria: banner rolea banner role represents general and informative content frequently placed at the beginning of the page. this usually includes a logo, company name, search icon, photo related to the page, or slogan.aria: button rolethe button role should be us...
...mentary rolethe complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated. these sections are frequently presented as sidebars or call-out boxes. 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. this section is commonly called a footer.aria: dialog rolethe dialog role is used to mark up an html based application dialog or window that separates content or ui from the rest of the web application or page. dialogs are generally placed on top of the rest of the page content using an overlay. dialogs can be either non-...
...ctionality of an application.aria: mark rolethe mark landmark role semantically denotes html elements containing text that is marked/highlighted for reference purposes. this is semantically equivalent to the html <mark> element. 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. it is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate.aria: row rolean element with role="row" is a row of cells within a tabular structure. a row contains one or mo...

Cognitive accessibility - Accessibility
wcag guidelines wcag, web content accessibility guidelines, includes several guidelines to improve cognitive accessibility. these guidelines are published by the web accessibility initiative (wai) of the world wide web consortium (w3...
... accessibility guidelines, includes several guidelines to improve cognitive accessibility. these guidelines are published by the web accessibility initiative (wai) of the world wide web consortium (w3c), the main international standards organization for the internet. this group is also responsible for the accessible rich internet application (aria) guidelines. wcag are guided by four principles: websites must be perceivable, operable, understandable, and robust. to this end, they define 17 specific guidelines, of which six are especially relevant for cognitive accessibility. all of the following guidelines help more than just people with cognitive disabilities. for example, being able to extend the expiration time on an application requiring an authentication code sent to a mobile device via te...
...e form instructions describing the purpose and the necessary input. include spell checking and suggestions for long-form text input, as well as links to help and support material. if a specific data format is expected for input, provide an example. notes the above are good design practices. they will benefit everyone. many people with cognitive impairments also have physical disabilities. websites must conform with the w3c’s web content accessibility guidelines. the w3c’s cognitive and learning disabilities accessibility task force produces web accessibility guidelines for people with cognitive impairments. webaim has a cognitive page of relevant information and resources. the united states centers for disease control estimate that, as of 2018, 1 in 4 u.s. citizens have a disabilit...

Introduction to HTML5 - Developer guides
s. however, gecko, and by extension, firefox, has very good support for html5, and work continues toward supporting more of its features. gecko began supporting some html5 features in version 1.8.1. you can find a list of all of the html5 features that gecko currently supports on the main html5 page. for detailed information about multiple browsers' support of html5 features, refer to the caniuse website. declaring that the document contains html5 mark-up with the html5 doctype the doctype for html5 is very simple. to indicate that your html content uses html5, simply use: <!doctype html> doing so will cause even browsers that don't presently support html5 to enter into standards mode, which means that they'll interpret the long-established parts of html in an html5-compliant way while ignor...
...ible with ascii and using at least 8 bits. this was done to tighten security and prevent some types of attacks. using the new html5 parser the parsing rules of html5, which analyze the meaning of mark-up, have been more precisely defined in html5. 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. essentially, it meant that all browsers behaved differently, which is no longer the case. now, faced with errors in the mark-up, all compliant browsers must behave exactly in the same way. this requirement helps web developers quite a bit. while it is true that all modern browsers now use these html5 parsing rules, non-html5-compliant browsers are...
...the web browsers' developers have done everything for you! ...

<input type="hidden"> - HTML: Hypertext Markup Language
ing step 2, the id of the record being updated is kept in a hidden input. when the form is submitted in step 3, the id is automatically sent back to the server with the record content. the id lets the site's server-side component know exactly which record needs to be updated with the submitted data. you can see a full example of what this might look like in the examples section below. ...
...tomatically sent back to the server with the record content. the id lets the site's server-side component know exactly which record needs to be updated with the submitted data. you can see a full example of what this might look like in the examples section below. 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. this would stop a malicious user from creating a fake form, pretending to be a ...
...s hidden secrets to prevent such attacks. as stated previously, placing the secret in a hidden input doesn't inherently make it secure. the key's composition and encoding would do that. the value of the hidden input is that it keeps the secret associated with the data and automatically includes it when the form is sent to the server. you need to use well-designed secrets to actually secure your website. validation hidden inputs don't participate in constraint validation; they have no real value to be constrained. examples let's look at how we might implement a simple version of the edit form we described earlier (see tracking edited content), using a hidden input to remember the id of the record being edited. the edit form's html might look a little bit like this: <form> <div> <lab...

Choosing between www and non-www URLs - HTTP
this page provides some advice on what's best. what are domain names? in an http url, the first substring that follows the initial http:// or https:// is called the domain name. this domain name is hosted on a server where the document resides. a server isn't necessarily a physical machine: several servers can reside on the same physical machine. or, one server can be handled by several machines, cooperating to produce the answer or balancing the load of the requests between them. the key point is that semantically one domain name represents one single server. so, do i have to choose one or the other for my web site? yes, you need to choose one and stick with it. ...
...ooperating to produce the answer or balancing the load of the requests between them. the key point is that semantically one domain name represents one single server. so, do i have to choose one or the other for my web site? yes, you need to choose one and stick with it. the choice of which one to have as your canonical location is yours, but if you choose one, stick with it. 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. no, you can have two. what is important is that you are coherent and consistent with which one is the official domain. this official domai...
...two techniques so that it is clear for your users, or search engines, which domain is the canonical one, while still allowing the non-canonical domain to work and provide the expected pages. so, choose one of your domains as your canonical one! there are two techniques below to allow the non-canonical domain to work still. techniques for canonical urls there are different ways to choose which website is canonical. using http 301 redirects in this case, you need to configure the server receiving the http requests (which is most likely the same for www and non-www urls) to respond with an adequate http 301 response to any request to the non-canonical domain. this will redirect the browser trying to access the non-canonical urls to their canonical equivalent. for example, if you've chosen to u...

Progressive loading - Progressive web apps (PWAs)
s in the places more content will eventually be loaded. this could be achieved by progressive loading — also known as lazy loading. this is all about deferring loading of as many resources as possible (html, css, javascript), and only loading those immediately that are really needed for the very first experience. 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. a bundle.js file can be many megabytes, and a single style.css bundle can contain everything from basic css structure definitions to all the possible styles of every version of the site: mobile, tablet, desktop, print only, etc. it is faster to load all that information as one file rather than many small ones, but if t...
...tion as one file rather than many small ones, but if the user doesn't need everything at the very beginning, we could load only what's crucial and then manage other resources when needed. render-blocking resources bundling is a problem, because the browser has to load the html, css, and javascript before it can paint their rendered results onto the screen. during the few seconds between initial website access and completion of loading, the user sees a blank page, which is a bad experience. to fix that we can, for example, add defer to javascript files: <script src="app.js" defer></script> they will be downloaded and executed after the document itself has been parsed, so it won't block rendering the html structure. we can also split css files and add media types to them: <link rel="styleshe...
...s met. in our js13kpwa demo app, the css is simple enough to leave it all in a single file with no specific rules as to how to load them. we could go even further and move everything from style.css to the <style> tag in the <head> of index.html — this would improve performance even more, but for the readability of the example we will skip that approach too. 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. it's not unusual to have megabytes of image data to download before announcing the site is ready, but this again creates a bad perception of performance. we don't need all of the images in the best possible quality at the ...

Insecure passwords - Web security
rms over http is especially dangerous because of the wide variety of attacks that can be used against them to extract a user’s password. network eavesdroppers could steal a user's password by sniffing the network, or by modifying the served page in transit. the https protocol is designed to protect user data from eavesdropping (confidentiality) and from modification (integrity) on the network. 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). this was famously demonstrated by firesheep. to fix this issue, install and configure an ssl/tls certificate onto your server. there are various vendors offering free and paid certificates. if you are us...
...p instead of https, it is trivial to steal user information (such as their login credentials). this was famously demonstrated by firesheep. to fix this issue, install and configure an ssl/tls certificate onto your server. there are various vendors offering free and paid certificates. if you are using a cloud platform, it may have its own ways of enabling https. note on password reuse sometimes websites require username and passwords but don't actually store data that is very sensitive. for example, a news site may save which news articles a user wants to go back to and read, but not save any other data about a user. web developers of the news site may be less motivated to secure their site and their user credentials. unfortunately, password reuse is a big problem. users use the same password ...
...ords but don't actually store data that is very sensitive. for example, a news site may save which news articles a user wants to go back to and read, but not save any other data about a user. web developers of the news site may be less motivated to secure their site and their user credentials. unfortunately, password reuse is a big problem. users use the same password across multiple sites (news websites, social networks, email providers, banks). hence, even if access to the username and password to your site doesn't seem like a huge risk to you, it is a great risk to users who have used the same username and password to log in to their bank accounts. attackers are getting smarter; they steal username/password pairs from one site and then try reusing them on more lucrative sites. ...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
eate them, right-click, select “new>boolean”, and type in the name and set the value accordingly. install the dom inspector the dom inspector is an extension that lets you examine html and xul dom tree structures, javascript objects and css properties, etc. this is not required for developing extensions, but it is handy to have around. install extensions for firefox from the mozilla add-ons website. optional - install firebug and chromebug chromebug is used by the firebug development team to develop firebug. you can use it to help debug firefox extensions as well as to inspect and learn how the firefox ui (chrome) is constructed. you can learn more about chromebug and download it at http://getfirebug.com/wiki/index.php/chromebug_user_guide you may also find this extension to be valua...
... the benefit of making it possible to design guis that match specific firefox themes, and allowing theme developers to create special visual effects for extensions. first, add the skin directory and its subordinate files to your helloworld directory as shown in figure 10. the purpose of each of these files is explained in table 4. download the files icon.png and icon-small.png from the resources website and place them appropriately. fixme: figure 10: directory structure with skin package added add the skin package update chrome.manifest with the contents of listing 10. listing 10: additional content for chrome.manifest skin helloworld classic/1.0 skin/classic/ style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css style chrome://global/content/customizetoolbar.xul c...

cert_override.txt - Archive of obsolete content
this file is used by firefox, thunderbird, and other xul-based applications. since there is no way to add easily an exception in a xulrunner 1.9 project, you can open the page in firefox, accept the certificate, then copy the cert_override.txt to the xulrunner application profile. the syntax is described on this web site. example here is an example for a sha1-256 hash algorithm. ...
... do not edit. ...

Mozilla Web Developer Community - Archive of obsolete content
archived devedge newsletters are at http://devedge-temp.mozilla.org/community/news/ feeds recent changes rss feed warning: this feed is updated very often. mozilla developer news feed actually, there are...
...recent changes rss feed warning: this feed is updated very often. mozilla developer news feed actually, there are no other feeds available for developer.mozilla.org. looking for feed ideas? 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
important: since firefox 52, all plugin support except flash has been dropped (see plug-in support has been dropped other than flash for more details). flash usage is also set to be phased out in the future. note: plugins are now a legacy technology. they are not available on most mobile devices. mozilla encourages website developers to avoid using plugins wherever possible and use standard web apis instead. if there are plugin features which are not available in the web platform, we encourage developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize web platform work to make those use cases possible. for more information about plugin roadmap, see non-archived plugin information. plugins are shared libraries that users can install to di...
...nctionality of the browser itself. plugins are also different from search plugins, which plug additional search engines in the search bar. gecko plugin api reference (npapi) this reference describes the application programming interfaces for npapi plugins and provides information about how to use these interfaces. 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. scripting plugins (npruntime) this reference describes the new cross-browser npapi extensions that let plugins be scriptable and also let them access the script objects in the browser. shipping a plugin as a toolkit bundle plugins can be shipped as a toolkit bundle, allowing a user to easily...

What is RSS - Archive of obsolete content
always created by server-side software (usually written in a language like php, java, c#, or python) on the web server. however, so that we can learn rss, we will be creating rss scripts by hand. a short history of rss in march of 1999 netscape released rss 0.90. it was much much different than today's rss. it wasn't really a format for syndication, but was a format for providing a summary of a website. in fact, back then, rss did not stand for really simple syndication but stood for rich site summary. in july of 1999 netscape's rss 0.91 was released. 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). netscape's rss 0.91 was created to simplify things. rss 0.90 was rdf-based, which many found to be ov...
...t everyone to come and read. just subscribe to my rss feed and you will be able to get the latest ones all the time.". note: if you provide a non-password-protected rss feed, you are implicitly giving everyone permission to use the contents in you rss feed in almost any way they see fit. they can read it. they can make local copies of it. they can share that local copy. they can put it on their website. they can even re-syndicate it. and more. if you don't want any of that done, then don't put it in a non-password-protected rss feed, and, of course, don't make the password public. news web sites use rss to provide everyone with a list of their newest articles. for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>example news site</title> <description>t...

Vulnerabilities - Archive of obsolete content
will only be exploitable under a combination of highly unlikely conditions. one vulnerability might provide root-level access to a system, while another vulnerability might only permit read access to an insignificant file. ultimately, organizations need to know how difficult it is for someone to exploit each vulnerability and, if a vulnerability is exploited, what the possible impact would be. website vulnerabilities owasp or open web security project is a non-profit charitable organization focused on improving the security of software and web applications. according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. the organization publishes a list of top web security vulnerabilities based on the data from various security organizat...
...nth most common web app vulnerability in 2017. the organization publishes a list of top web security vulnerabilities based on the data from various security organizations. the web security vulnerabilities are prioritized depending on exploitability, detectability and impact on software which can be any cms such as wordpress, joomla, magento, wocommerce and more. here are six of the most common website vulnerabilities you must protect yourself against. 1. sql injections 2. cross site scripting (xss) 3. broken authentication & session management 4. insecure direct object references - dom (document object model) 5. security misconfiguration 6. cross-site request forgery (csrf) ...

Game distribution - Game development
debugging mobile. publishing the game there are three main options when it comes to publishing a game: self-hosting publishers stores remember that the name of your game should be unique enough to be quickly promoted later on, but also catchy enough, so people don't forget it. self-hosting if you are a front-end developer, you may already know what to do. an html5 game is just another website. you can upload it to a remote server, grab a catchy domain name, and host it yourself. if you want to make money out of game dev, you should secure your source code one way or another against people who could easily take it and sell it as their own. you can concatenate and minify the code to make it smaller and uglify it so it's a lot harder to reverse engineer your game. another good measure t...
...il in the monetization article. there are also independent portals collecting interesting games like html5games.com, gamearter.com, marketjs.com, gameflare, gamedistribution.com or poki where you can send your game in and it will get some natural promotion because of the big traffic those sites attract. 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. such exposure may just provide promotion for your game, or if you have adverts shown beside your game (or other money making options) it may also provide monetization. web and native stores you can also upload and publish your game directly to different types of stores, or marketplaces. to do that you'll have to prepare and package it to a build format specific...

Game promotion - Game development
automatically be promoted by the organizers and other attendees. you'll be rich and famous, or so they say. many great games get started as a quick, sloppy demo submitted to a competition. if both the idea and the execution are good enough, you will succeed. plus competitions generally require games to follow a mandatory theme, so you can get creative around a theme if you are stuck for ideas. 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. the more information you can include the better — you should include screenshots, description, trailer, press kit, requirements, available platforms, support details and more. you'll get bonus points for allowing your users to directly play your games...
...ames will help educate others, increase your reputation in the community, and further improve seo. a further option is to publish monthly reports that summarize all your progress — it helps you see what you've accomplished throughout the month and what's still left to do, and it keeps reminding people that your game is coming out soon — building buzz is always good. 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. presskit() is a press kit builder that helps you create a press page to share with the media. social media your social media presence is very important — follow the right hashtags, make friends, eng...

WebVR — Virtual Reality for the Web - Game development
d experimental builds of chrome (mozilla and google teamed up to work on the implementation together), but sooner rather than later we'll see it in regular builds. the webvr spec is in editor's draft status which means it is still subject to change. the development is led by vladimir vukicevic from mozilla and brandon jones from google. for more info be sure to visit the mozvr.com and webvr.info websites. using the webvr api the webvr api is based on two concepts — sending stereoscopic images to both lenses in your headset and receiving positional data for your head from the sensor, and those two are handled by hmdvrdevice (head-mounted display virtual reality device) and positionsensorvrdevice. get the devices to get information about devices connected to your computer, you can use the na...
...esponsive design, but applied to the vr world — write once and run in any vr headset ... or without it. you can check the webvr boilerplate sources — it's a good example to start learning webvr from, and a starting point for any web-based vr experience. 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. immersion is more important than gameplay or graphics - you have to feel you're "inside" the experience. it's not easy to achieve, but it doesn't require realistic images. quite the contrary as having a basic shapes flying around in high framerate can make a lot. remember: experimenting is key - see what works ...

Cookie - MDN Web Docs Glossary: Definitions of Web-related terms
a user can customize their web browser to accept, reject, or delete cookies. cookies can be set and modified at the server level using the set-cookie http header, or with javascript using document.cookie. ...
...a user can customize their web browser to accept, reject, or delete cookies. cookies can be set and modified at the server level using the set-cookie http header, or with javascript using document.cookie. ...

Favicon - MDN Web Docs Glossary: Definitions of Web-related terms
usually, a favicon is 16 x 16 pixels in size and stored in the gif, png, or ico file format. they are used to improve user experience and enforce brand consistency. ...
... usually, a favicon is 16 x 16 pixels in size and stored in the gif, png, or ico file format. they are used to improve user experience and enforce brand consistency. ...

Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
how how the web works (and sometimes controlling the internet as well). several standards bodies are responsible for defining different aspects of the web, and all the standards must coordinate to keep the web maximally usable and accessible. web standards also must evolve to improve the current status and adapt to new circumstances. ...
...f 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 prominently for javascript iso (international organization for standardization): standards governing a diverse array of aspects, including character encodings, website management, and user-interface design learn more general knowledge web standards on wikipedia ...

Mobile accessibility - Learn web development
...
...but we will add more when we think of them. not disabling zoom using viewport, it is possible to disable zoom. 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. there are certain situations where zooming might break the ui; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your ui. keeping menus accessible because the screen is so much narrower on mobile ...

Organizing your CSS - Learn web development
an approach made popular by the work of nicole sullivan. the basic idea of oocss is to separate your css into reusable objects, which can be used anywhere you need on your site. the standard example of oocss is the pattern described as the media object. this is a pattern with a fixed size image, video or other element on one side, and flexible content on the other. it's a pattern we see all over websites for comments, listings, and so on. if you are not taking an oocss approach you might create custom css for the different places this pattern is used, for example creating a class called comment with a bunch of rules for the component parts, then a class called list-item with almost the same rules as the comment class except for some tiny differences. the differences between these two components...
...to organise css is to break down stylesheets into smaller stylesheets. when using sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. 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. so for example, with partials, you could have several style files inside a directory, say foundation/_code.scss, foundation/_lists.scss, foundation/_footer.scss, foundation/_links.scss, etc., then use the sass @use role to load them into other stylesheets: // foundation/_index.sass @use 'code' @use 'lists' @use 'footer' @use 'links' if the partials are all loaded into an index file, as implie...

Styling links - Learn web development
. styling links as buttons the tools you've explored so far in this article can also be used in other ways. for example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things. 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. let's explore how. first, some html: <ul> <li><a href="#">home</a></li><li><a href="#">pizza</a></li><li><a href="#">music</a></li><li><a href="#">wombats</a></li><li><a href="#">finland</a></...
...tion at the end of the module — see typesetting a community school homepage. this assessment tests all the knowledge discussed in this module, so you might want to read the next article before moving on to it. summary we hope this article has provided you with all you'll need to know about links — for now! 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. previous overview: styling text next in this module fundamental text and font styling styling lists styling links web fonts typesetting a community school homepage ...

Client-side form validation - Learn web development
to the client-side to tell the user to fix their data. however, client-side validation should not be considered an exhaustive security measure! your apps should always perform security checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server. 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. what is form validation? go to any popular site with a registration form, and you will notice that they provide feedback when you don't enter your data in the format they are expecting. you'll get messages such as: "this field is required...
...rmat. our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether. we want to protect our users' data. forcing our users to enter secure passwords makes it easier to protect their account information. we want to protect ourselves. there are many ways that malicious users can misuse unprotected forms to damage the application (see website security). warning: never trust data passed to your server from the client. even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request. different types of client-side validation there are two different types of client-side validation that you'll encounter on the web: built-in form validation uses ...

The HTML5 input types - Learn web development
rrect immediately, rather than having to wait for a round trip to the server. but it should not be considered an exhaustive security measure! your apps should always perform security checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to turn off, so malicious users can still easily send bad data through to your server. 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. note that a@b is a valid email address according to the default provided constraints. this is because the email input type allows intranet email addresses by default. to implement different validation behavior, you can use the pattern attribu...
...field in firefox 71, safari 13, and chrome 79 on macos, and edge 18 and chrome 79 on windows 10. note that the clear icon only appears if the field has a value, and, apart from safari, it is only displayed when the field is focused. 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. phone number field a special field for filling in phone numbers can be created using tel as the value of the type attribute: <input type="tel" id="tel" name="tel"> when accessed via a touch device with a dynamic keyboard, most devices will display a numeric keypad when type="tel" is encountered, meaning this type is useful whenever ...

Sending form data - Learn web development
, etc.), using the http protocol. the server answers the request using the same protocol. an html form on a web page is nothing more than a convenient user-friendly way to configure an http request to send data to a server. this enables the user to provide information to be delivered in the http request. note: to get a better idea of how client-server architectures work, read our server-side website programming first steps module. on the client side: defining how to send the data the <form> element defines how the data will be sent. all of its attributes are designed to let you configure the request to be sent when a user hits a submit button. the two most important attributes are action and method. the action attribute the action attribute defines where the data gets sent. its value mu...
...rm> note: servers can be configured with a size limit for files and http requests in order to prevent abuse. security issues each time you send data to a server, you need to consider security. html forms are by far the most common server attack vectors (places where attacks can occur). the problems never come from the html forms themselves — they come from how the server handles data. the website security article of our server-side learning topic discusses a number of common attacks and potential defences against them in detail. you should go and check that article out, to get an idea of what's possible. be paranoid: never trust your users so, how do you fight these threats? this is a topic far beyond this guide, but there are a few rules to keep in mind. the most important rule is: nev...

HTML basics - Learn web development
ey are used for accessibility and other reasons such as seo. try to create a meaningful sequence of headings on your pages, without skipping levels. 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. lists a lot of the web's content is lists and html has special elements for these. marking up lists always consist of at least 2 elements. the most common list types are ordered and unordered lists: unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. these are w...
... with a page that looks like the one below (you can also view it here): if you get stuck, you can always compare your work with our finished example code on github. here, we have only really scratched the surface of html. to find out more, go to our learning html topic. 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 ...

Installing basic software - Learn web development
ch about it while you are learning. you might sometimes run into a project that requires support for it. ...
... it. installing a local web server some examples will need to be run by a web server to work successfully. ...

Tips for authoring fast-loading HTML pages - Learn web development
ork for every use of a background image. however, the fewer http requests and single image caching can help reduce page-load time. use a content delivery network (cdn) for the purposes of this article, a cdn is a means to reduce the physical distance between your server and your visitor. as the distance between your server origin and visitor increases, the load times will increase. ...
...ce between your server origin and visitor increases, the load times will increase. 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. further reading: understanding cdns reduce domain lookups since each separate domain costs time in a dns lookup, the page load time will grow along with the number of separate domains appearing in css link(s) and javascript and image src(es). this may ...

Images in HTML - Learn web development
efore, you should give your image a descriptive filename; dinosaur.jpg is better than img835.png. you could embed the image using its absolute url, for example: <img src="https://www.example.com/images/dinosaur.jpg"> but this is pointless, as it just makes the browser do more work, looking up the ip address from the dns server all over again, etc. you'll almost always keep the images for your website on the same server as your html. warning: most images are copyrighted. do not display an image on your webpage unless: you own the image. you have received explicit, written permission from the image owner. you have ample proof that the image is, in fact, in the public domain. copyright violations are illegal and unethical. in addition, never point your src attribute at an image hosted...
... as your html. warning: most images are copyrighted. do not display an image on your webpage unless: you own the image. you have received explicit, written permission from the image owner. you have ample proof that the image is, in fact, in the public domain. copyright violations are illegal and unethical. 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. this is called "hotlinking". again, stealing someone's bandwidth is illegal. it also slows down your page, leaving you with no control over whether the image is removed or replaced with something embarrassing. our above code would give us the following result: note: elements like <img> and <video> are sometimes referred to as replaced elements. thi...

Responsive images - Learn web development
his helps to improve performance across different devices. responsive images are just one part of responsive design, a future css topic for you to learn. prerequisites: you should already know the basics of html and how to add static images to a web page. objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on websites. why responsive images? let's examine a typical scenario. a typical website may contain a header image and some content images below the header. the header image will likely span the whole of the width of the header, and the content image will fit somewhere inside the content column. here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can...
...arge image on a screen significantly smaller than the size it was meant for. doing so can waste bandwidth; in particular, mobile users don't want to waste bandwidth by downloading a large image intended for desktop, when a small image would do for their device. ideally, you would have multiple resolutions available and serve the appropriate size depending upon the device accessing the data on the website. to make things more complicated, some devices have high resolution screens that need larger images than you might expect to display nicely. this is essentially the same problem, but in a slightly different context. you might think that vector images would solve these problems, and they do to a certain degree — they are small in file size and scale well, and you should use them wherever possi...

Client-side web APIs - Learn web development
in some way. this is usually done by using the document object model (dom), a set of apis for controlling html and styling information that makes heavy use of the document object. in this article, we'll look at how to use the dom in detail, along with some other interesting apis that can alter your environment in interesting ways. 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. this seemingly small detail has had a huge impact on the performance and behavior of sites. in this article, we'll explain the concept, and look at technologies that make it possible, such as xmlhttprequest and the fetch api. third party apis the ap...
...ions of a webpage without having to load an entirely new page. this seemingly small detail has had a huge impact on the performance and behavior of sites. in this article, we'll explain the concept, and look at technologies that make it possible, such as xmlhttprequest and the fetch api. third party apis the apis we've covered so far are built into the browser, but not all apis are. many large websites and services such as google maps, twitter, facebook, paypal, etc. provide apis allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom google maps on your site, or using facebook login to log in your users). this article looks at the difference between browser apis and 3rd party apis and shows some typical uses of the l...

Measuring performance - Learn web development
mber of http requests or minifiers that remove all whitespace from your code to make the files smaller. we'll talk about both categories in this course. and as well as talking about performance metrics we will of course talk about the metrics that you'll use to measure whether your site's performance is improving. general performance reporting tools tools like pagespeed insights can measure a website’s performance. you can enter a url and get a performance report in seconds. the report contains scores about how your website is performing, both for mobile and desktop. this is a good start for getting an idea about what you are already doing well and what could be improved. at the time of writing, mdn's performance report summary looks similar to the following: a performance report contai...
...nce report contains information about things like how long a user has to wait before anything is displayed on the page, how many bytes need to be downloaded to display a page, and much more. it also lets you know it the measured values are considered good or bad. webpagetest.org is another example of a tool that automatically tests your site and returns useful metrics. try running your favorite website now, on both webpagetest.org and pagespeed insights, and see what the scores are. network tools most browsers have tools available that you can use to run against loaded pages and determine how they are performing. for example, the firefox network monitor returns detailed information on all the assets downloaded form the network, along with a time graph that shows how long each one took to down...

Perceived performance - Learn web development
previous overview: performance next perceived performance is how fast a website seems to the user. how a user perceives your performance is as important, or perhaps more important, than any objective statistic, but it's subjective, and not as readily measurable. perceived performance is user perspective, not a metric. this article provides a brief introduction to perceived performance, looking at user perceptions, and what objective tools can be used to measure that which is subjective. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to gain basic familiarity of user perception of web performance. ...
...rceived performance, looking at user perceptions, and what objective tools can be used to measure that which is subjective. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to gain basic familiarity of user perception of web performance. performance is about user perception. 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. even if an operation is going to take a long time (because of latency or or inavailability of the main thread), it is possible to keep the user engaged while they wait by showing a loading spinner, or a series of useful hints and tips (or jokes, or whatever else you ...

Getting started with Ember - Learn web development
est practices" allow for faster long-term development speed. ember has clear conventions that are useful for enforcing consistency and helping team members get up to speed quickly. ember with add-ons emberjs has a plugin architecture, which means that add-ons can be installed and provide additional functionality without much, if any, configuration. examples include: prember: static website rendering for blogs or marketing content. fastboot: server-side rendering, including improving search-engine optimization (seo), or improving initial render performance of complex, highly interactive web pages. empress-blog: authoring blog posts in markdown while optimizing for seo with prember. ember-service-worker: configuring a pwa so that the app can be installed on mobile devices, just li...
...omvc project has a few issues in terms of adhering to accessible/default web practices. 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. that said, because this tutorial is a focus on the javascript side of making a small web application, todomvc's value comes from providing pre-made css and recommended html structure, which eliminates small differences between implementations, allowing for easier comparison. later on in the tutorial, we'll focus on adding code to our application to fix some of todomvc's biggest fau...

Framework main features - Learn web development
fer a way to describe the external properties they may need, the internal state that the component should manage, and the events a user can trigger on the component's markup. the code snippets in the rest of this section will use react as an example, and are written with jsx. properties properties, or props, are external data that a component needs in order to render. 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. you might create an authorcredit component to go with each article. this component needs to display a portrait of the author and a short byline about them. in order to know what image to render, and what byline to print, authorcredit needs accept some props. a react representation of this au...
...xact mechanism will differ between frameworks, but the end result is the same. components tend to import components into other components using the standard javascript module syntax, or at least something similar. components in components one key benefit of component-based ui architecture is that components can be composed together. 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. each framework allows you to write components that utilize (and thus depend on) other components. for example, our authorcredit react component might be utilized inside an article component. that means that article would need to import authorcredit. import authorcredit from "./components/authorcredit"; once that’s do...

Getting started with React - Learn web development
react can be used for small pieces of an interface, it's not as easy to "drop into" an application as a library like jquery, or even a framework like vue — it is more approachable when you build your entire app with react. in addition, many of the developer-experience benefits of a react app, such as writing interfaces with jsx, require a compilation process. 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. react arguably has a heavy tooling requirement, but it can be learned. this article is going to focus on the use case of using react to render the entire user interface of an application, using tooling provided by facebook’s own create-react-app tool. how does react use javascript? react utilizes feat...
...e react team's jsx in depth article. setting up your first react app there are many ways to use react, but we're going to use the command-line interface (cli) tool create-react-app, as mentioned earlier, which expedites the process of developing a react application by installing some packages and creating some files for you, handling the tooling described above. 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. using it will allow you spend more time building your app, and less time fussing with setup. requirements in order to use create-react-app, you need to have node.js installed. it's recommended that you use the long-term support (lts) versi...

Introducing a complete toolchain - Learn web development
f you wish to complete the tutorial. as mentioned previously, github is a source code repository service that adds community features such as issue tracking, following project releases and much more. in the next chapter we will push to a github code repository, which will cause a cascade effect that (should) deploy all the software to a home on the web. 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. netlify is what provides the "home on the web" mentioned above — free hosting for us to deploy our test app to. once you've signed up for github (click the sign up link on the homepage if you don't already have an account, a...
...creating a separate version and try out new functionality on, without those changes affecting your original code. finally, it can help you undo changes or revert your code back to a time "when it was working" if a mistake has been introduced somewhere and you are having trouble fixing it — something all developers need to do once in a while! 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. this is all you need to do for now. you can interact with git in a number of different ways, from using the command line to issue commands, to using a git gui app to issue the same commands by pushing buttons, or even from directly inside your code editor, as seen in the visual studio code example bel...

CSUN Firefox Materials
." - pc magazine firefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web. in addition to winning major awards such as pc world product of the year, firefox has attracted a huge following among savvy users who simply care enough about their web browsing experience to download a new piece of software. websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage. why do the most discerning users switch to firefox? because firefox rethinks the web, and does away with many of the common annoyances that cause browsing to be difficult for ordinary people. firefox's "www for everyone" philosophy is also a great accessibility story. every user, regardless of w...
...ng search. bookmarks can have a keyword assigned to them which can be typed into the address bar to bring up the bookmark. a "smart keywords" feature enhances this even further by allowing custom searches from the command line such as "word punditry" to look up the word "punditry" in an online dictionary. these smart keywords can be setup via the context menu for the search field on the desired website. integrated web search via ctrl+k is much faster to use than first going to the search tool's web site. custom searches can be added to this quick search bar and the user can switch between them by choosing from a drop down available via the standard alt+down arrow key combination. the built-in text zoom feature can be accessed with the ctrl+plus and ctrl+minus hotkeys. the accessibility ex...

Index
the mercurial faq are also worth a read, should you run into trouble. 25 localizing with mozilla translator guide, localization, translator, l10n no summary! 26 localizing with pontoon junk, localization pontoon is a web-based, what-you-see-is-what-you-get (wysiwyg), localization (l10n) tool. at mozilla, we use pontoon to localize all mozilla products and websites, ranging from firefox to mozilla.org. pontoon is a very simple and intuitive tool that requires little to no technical skill to use in the l10n workflow. here we'll discuss how to use pontoon to localize projects, from first sign-in to finalizing your contributions. along the way, we'll point out some sweet features that will make you more efficient and make your l10n contributions easier. ...
... page will walk you through creating a patch for an existing localization. the steps below are fairly generic; for the most part they apply to creating l10n patches for firefox, thunderbird, seamonkey, or calendar. 32 svn for localizers intro, localization, svn, opensource welcome to the svn tutorial 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. first things first, we need to give you a brief introduction to what svn is and where you can find the necessary tools to get started. if you're already familiar with this information, skip ahead to mozilla's svn repositories. 33 uplifting a localization from central to aurora guide, localizati...

Phishing: a short definition
ct sensitive information, such as usernames, passwords, and financial details by disguising as a trustworthy entity online. a relatively simple, yet effective, phishing scheme is sending an email with a fake invoice of a person’s favorite shopping site. 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. past and current countermeasures various technical, and social approaches, exist to combat phishing attacks. none of these are sufficient by themselves, so we see a mix of these deployed by various services. the following is a non-ex...
...e efficient if implemented to protect millions of users automatically. as most phishing attacks start with unsolicited email messages, a clear starting point is improving spam filters, thus reducing the number of fraudulent messages reaching users. web browser vendors too, are interested in protecting their users from phishing. 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. two-factor authentication none of the above anti-phishing measures address the basic problem: username/password combinations are often enough to impersonate us...

Preference reference
om.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. 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. if set to true, the data is stored as content preference.browser.pagethumbnails.capturing_disabledthe preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.brows...
...the emitting of the oncopy, oncut and onpaste events are controlled by this preference. javascript.options.showinconsolethe preference javascript.options.showinconsole controls whether errors or warnings in chrome code are shown in the error console...

NSS 3.18.1 release notes
.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_18_1_rtm/src/ new in nss 3.18.1 no new functionality is introduced in this release. this is a patch release to update the list of root ca certificates. ...
...y/nss/releases/nss_3_18_1_rtm/src/ new in nss 3.18.1 no new functionality is introduced in this release. this is a patch release to update the list of root ca certificates. 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. but when firefox 38 went into beta, there was a huge spike in the number of certificate verification errors attributed to this change. so, to give website administrators more time to update their web servers, we reverted the trust bits back to being enabled. ou = equifax secure certificate authority sha1 fingerprint: d2:32...

Notes on TLS - SSL 3.0 Intolerant Servers
hese earlier browsers. netscape 6.1 or mozilla 0.9.2 and later these browsers shipped with the tls option on but also included a graceful rollback mechanism on the client side when they encounter known tls/ssl 3.0 intolerant servers. firefox 2 and later starting with firefox 2, support for ssl 2.0 has been disabled by default; unless it is expressly re-enabled by the user using about:config. website administrators: how to avoid this problem? upgrade to a newer version if available, which corrects this problem. there will be other network clients which implement tls/ssl 3.0 specification correctly and have a problem with your site. let's not perpetuate the problem servers. contact the manufacturer and inquire if there is a new version available which fixes this problem. post a note on yo...
... preference option edit | preferences | privacy and security | ssl | enable tls is turned on. if so, turn it off. now re-visit the problem site. if the content displays this time, you are most likely witnessing a tls/ssl 3.0 intolerant server. report such a problem to the server's administrator. how to report an intolerant server optional:get the name of the ssl server software used by the website. to do so, add http://toolbar.netcraft.com/site_report?url= to the beginning of the url. the server software will appear next to server under ssl certificate information. for instance, to check https://bugzilla.mozilla.org/, then visit http://toolbar.netcraft.com/site_rep...a.mozilla.org/. add the information on such a server (software, url) to bug 59321 at bugzilla. (note: you will be aske...

A Web PKI x509 certificate primer
:false subjectaltname =dns:www.example.com extendedkeyusage =serverauth 4. 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. this chain of certificates is called the certificate hierarchy. if your certificates will only be used to verify one domain (e.g. *.yourcompany.co...
...ate 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. this chain of certificates is called the certificate hierarchy. if your certificates will only be used to verify one domain (e.g. *.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. firefox uses a default set of x.509v3 root certificates for various certification authorities (cas). the root certificates included by default have their "trust bits" set to indicate if the ca's root certific...

Starting WebLock
ers use xpidl (see xpidl and type libraries for more information about xpidl) to define the interface to the component: how the functionality should be organized, expressed, and exposed to its clients. 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. unlock - disable web locking. this should allow any browser in the gecko application to browse any website regardless of the white list. addsite - add the current url to the white list. removesite - remove the current url from the white list. enumeratesites - allows the enumeration of all sites in the white list. enumeratesites might be used in the user interface to provide something...
...lly call unlock on such a component when switching a profile. 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. there is no policy applied to what sites get added or removed to this list, or who can remove a site. the most interesting method definition is the enumerator. first of all, it does not look like a method at all: attribute nsisimpleenumerator sites; this line defines an attribute in the interface. in c++, this is considered a public variable and "compiled" into a get method...

nsILivemarkService
formed_uri if the site uri annotation has somehow been corrupted (and can't be turned into an nsiuri) getlivemarkidforfeeduri() determines whether the feed uri is a currently registered livemark. long long getlivemarkidforfeeduri( in nsiuri afeeduri ); parameters afeeduri feed uri to look for. return value the id of the livemark. getsiteuri() this method retrieves the uri of the website associated with a livemark container. nsiuri getsiteuri( in long long container ); parameters container the folder id of 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. exceptions thrown ns_error_invalid_arg if the folder id isn't known or identifies a folder that isn'...
...container, in nsiuri feeduri ); parameters container the folder id of a livemark container. feeduri nsiuri object representing the syndication feed uri. exceptions thrown ns_error_invalid_arg if the folder id isn't known or identifies a folder that isn't a livemark container; also if the feeduri parameter isn't a valid nsiuri object. setsiteuri() this method sets the uri of the website associated with a livemark container. void setsiteuri( in long long container, in nsiuri siteuri ); parameters container the folder id of a livemark container. siteuri nsiuri object representing the site uri, or null to clear the site uri for this livemark container. exceptions thrown ns_error_invalid_arg if the folder id isn't known or identifies a folder that isn't a livemark...

Zombie compartments
this page tells you how to detect and avoid zombie compartments, which are a particular kind of memory leak. they can be caused by bugs in firefox itself, or by bugs in firefox add-ons. compartments firefox’s javascript memory is segregated into zones and compartments. roughly speaking, all memory used by javascript code that is from a particular origin (i.e. website) goes into its own compartment. firefox’s own javascript code also gets one or more compartments and so do add-on scripts. multiple compartments can share a zone, where a zone keeps track of things that can easily and securely be shared between related compartments such as string data and type information. viewing live compartments if you want to see a list of live compartments, type "about:memory" into the addres...
...nd securely be shared between related compartments such as string data and type information. viewing live compartments if you want to see a list of live compartments, type "about:memory" into the address bar and click on the measure button. 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. that more fine-graned representation may look like this │ ├───28.45 mb (05.71%) -- top(https://www.google.de/, id=141) │ │ ├──13.66 mb (02.74%) -- active/window(https://www.google.de/) │ │ │ ├───7.83 mb (01.57%) -- js-compartment(https://www.google.de/) ...

Standard OS Libraries
e gdk library functions are available for use. gdk has version 2 and 3, typically version 2 is referred to as just gdk and version 3 is referred to as gdk3. examples for both are found below. documentation for gdk functions are found here: gnome developer :: gdk 2 reference manual. for gdk3 documentation is found here: gnome developer :: gdk 3 reference manual. because gnome is in the name of the websites don't get confused and think this only works on gnome. it is true though that gdk was developed by the gnome team. example: gdk_window_get_pointer this example is fot the gdk 2.0 library. in gdk 3.0 the gdk_window_get_device_position function was deprecated, see below for gdk 3.0 example. components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0...
...top :: xproto.h mac os x mac os x has two categories of c-based api (carbon, core foundation) and objective-c based api (cocoa). note: you cannot use carbon routines from your add-on; firefox is a 64-bit application, and you cannot use carbon from 64-bit code. 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. the coregraphics framework is based on corefoundation framework, including coregraphics etc. the release, string, etc. comes from corefoundation. example: cgeventgetlocation for example, cgeventgetlocation function is declared in cgevent.h header file, which is contained in core...

Accessibility Inspector - Firefox Developer Tools
ibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention. this article takes you through the main features of the accessibility inspector and how to use it. a (very) brief guide to accessibility accessibility is the practice of making your websites usable by as many people as possible. this means trying your best to not lock anyone out of accessing information because of any disability they may have, or any other personal circumstances such as the device they are using, the speed of their network connection, or their geographic location or locale. you can find more extensive information in the accessibility section of mdn web docs. here w...
...e accessibility tree relate to the ui items on the actual page. in the following example, you can see that the image has been highlighted and its role, graphic, name, "road, asphalt, sky, clouds, fall", and the color contrast ratio, 3.46, appears in the information bar above it. 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. see color contrast for details about recommended contrast ratios. for example: the color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read. notice the warning symbol that indicates that the contrast fail...

Paint Flashing Tool - Firefox Developer Tools
the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. 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. repaints and responsiveness when the browser renders a web page it parses the html and css, determines how to lay it out, and then paints it to actually display the content on the screen. whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. for example, a repaint will be needed if t...
...to each other, which is handled in composition: neither layer needs a repaint. in this case, with a simple style, the extra repaints don't make much of a difference. but if the style were computationally expensive to paint, they might. it's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to the next. so testing your website with the paint flashing tool helps ensure that it's still performing optimally. ...

Animating CSS properties - Firefox Developer Tools
border-width margin-left font-size properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. color properties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. 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. an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform. the intention of this scenario isn't to convince you that animating using margin is always a bad...
...fference between animating using margin and animating using transform. the intention of this scenario isn't to convince you that animating using margin is always a bad idea. it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems. if you want to play along, the demo website is here. it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform. there are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint. there's also a video version of this walkthrough: ...

Responsive Design Mode - Firefox Developer Tools
toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos). ...
... toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos). ...

Firefox Developer Tools
messages logged by a web page and interact with the page using javascript. javascript debugger stop, step through, examine, and modify the javascript running in a page. network monitor see the network requests made when a page is loaded. performance tools analyze your site's general responsiveness, javascript, and layout performance. responsive design mode see how your website or app will look and behave on different devices and network types. accessibility inspector provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention. application panel provides tools for inspecting and debugging modern web apps (also known as progressive web apps). this includes inspection of service workers and web ...
... bugs.firefox-dev.tools a tool helping to find bugs to work on. ...

BudgetService.getBudget() - Web APIs
...
... ...

BudgetService.getCost() - Web APIs
...
... ...

BudgetService.reserve() - Web APIs
...
... ...

BudgetService - Web APIs
...
... ...

BudgetState.budgetAt - Web APIs
...
... ...

BudgetState.time - Web APIs
...
... ...

BudgetState - Web APIs
...
... ...

Event.initEvent() - Web APIs
...
... ...

FileException - Web APIs
...
... ...

FileReaderSync - Web APIs
...
... ...

FileSystemDirectoryEntry.removeRecursively() - Web APIs
...
... ...

FileSystemDirectoryReader.readEntries() - Web APIs
on chrome 77, readentries() will only return the first 100 filesystementry instances. in order to obtain all of the instances, readentries() must be called multiple times. ...
... on chrome 77, readentries() will only return the first 100 filesystementry instances. in order to obtain all of the instances, readentries() must be called multiple times. ...

FileSystemDirectoryReader - Web APIs
...
... ...

FileSystemEntry.copyTo() - Web APIs
...
... ...

FileSystemEntry.getMetadata() - Web APIs
...
... ...

FileSystemEntry.moveTo() - Web APIs
...
... ...

FileSystemEntry.remove() - Web APIs
...
... ...

FileSystemFileEntry.createWriter() - Web APIs
...
... ...

FileSystemFileEntry - Web APIs
...
... support yeslegend full support full support no support no supportnon-standard. expect poor cross-browser support.non-standard. expect poor cross-browser support.deprecated. not for use in new websites.deprecated. not for use in new websites.see implementation notes.see implementation notes.uses a non-standard name.uses a non-standard name.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use. ...

IDBDatabaseException - Web APIs
...
... ...

IDBEnvironment - Web APIs
...
... ...

IDBVersionChangeEvent.version - Web APIs
...
... ...

IDBVersionChangeRequest.setVersion() - Web APIs
...
... ...

IDBVersionChangeRequest - Web APIs
...
... ...

MediaRecorder.ignoreMutedMedia - Web APIs
...
... ...

PasswordCredential - Web APIs
...
... ...

Payment Request API - Web APIs
different sites. consistent experience on every site (that supports the api): as the payment sheet is controlled by the browser, it can tailor the experience to the user. this can include localizing the ui into the user's preferred language. 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. a browser could also adjust the font size or color contrast of the payment sheet, making it more comfortable for the user to make a payment. credentials management: users can manage their credit cards and shipping addresses directly in the browser. a browser can also sync these "credentials" across devices, making it easy for users to jump from desktop ...
...es the web page to update the details of the payment request in response to a user action. paymentmethodchangeevent represents the user changing payment instrument (e.g., switching from a credit card to debit card). paymentresponse an object returned after the user selects a payment method and approves a payment request. 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). dictionaries addresserrors a dictionary containing strings providing descriptive explanations of any errors in any paymentaddress entries which have errors. payererrors a dictionary containing strings providing descriptive explanations of any errors in related to payme...

PushRegistrationManager - Web APIs
...
... ...

Web Push API Notifications best practices - Web APIs
ustomers. has the customer switched tabs to answer an email? win them back with an expiring offer of free shipping that they can’t ignore! but really, is this the best use of push notifications? or is it a new iteration on the old and tired pop-up ad? “web push doesn’t risk ending up in the spam folder. nor can it be blocked by ad blockers. it shows right up on your desktop even when the website is shut. in mobile, it shows up in the notification tray, just like app push notifications, even when the browser is not running.” — an unnamed marketing site positive uses of push but there’s a bright and useful side to push notifications, too. let’s say you and your team commonly use a chat program to communicate, but today you’re happily working somewhere, and problem comes up. sa...
...nd-requiring-interaction. we caution you to use the interaction-requiring ones very sparingly, since they can be the most annoying. your notifications should be assistive, not disruptive. building trust some studies have shown that as many as 60% of push notifications are blocked. allowing your site to push notifications in realtime requires trust. 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. browser mitigations because of abuses of push notifications in the past, web browser developers have begun to implement strategies to help mitigate this problem. for example, safari 12.1 now requires—and other browsers either already do, or are planning[1] to do so—that the user in...

UIEvent.initUIEvent() - Web APIs
see also uievent the constructor to use instead of this deprecated method: uievent(). more specific constructors can be used too. ...
... see also uievent the constructor to use instead of this deprecated method: uievent(). more specific constructors can be used too. ...

Web Audio API best practices - Web APIs
t.queryselector('button'); button.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } }, false); you might instead be working with an offlineaudiocontext, in which case you can resume the suspended audio context with the startrendering() method. user control if your website or application contains sound, you should allow the user control over it, otherwise again, it will become annoying. this can be achieved by play/stop and volume/mute controls. the using the web audio api tutorial goes over how to do this. if you have buttons that switch audio on and off, using the aria role="switch" attribute on them is a good option for signalling to assistive technology what t...
...f the audioparam's defined methods to set these values, they will take precedence over the above property setting. if for example, you want the gain value to be raised to 1 in 2 seconds time, you can do this: gainnode.gain.setvalueattime(1, audioctx.currenttime + 2); it will override the previous example (as it should), even if it were to come later in your code. 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. if you're sure it doesn't, setting it with the value property is fine. ...

Window.releaseEvents() - Web APIs
...
... ...

Window.routeEvent() - Web APIs
...
... ...

Window.showModalDialog() - Web APIs
...
... ...

ARIA: contentinfo role - Accessibility
using the <footer> element instead is recommended: <footer> <h2>footer</h2> <!-- footer content --> </footer> description the contentinfo role is a landmark used to identify a page footer. landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. ...
...using the <footer> element instead is recommended: <footer> <h2>footer</h2> <!-- footer content --> </footer> description the contentinfo role is a landmark used to identify a page footer. landmarks can be used by assistive technology to quickly identify and navigate to large sections of the document. ...

Accessibility Information for Web Authors - Accessibility
other organizations such as schools are starting to follow these guidelines as well. web content accessibility guidelines (wcag) 1.0 another important set of guidelines from the w3c web accessibility initiative (wai). the european union is looking to base their upcoming accessibility regulations on these guidelines. these guidelines are discussed on the wai interest group discussion list. ...
...widgets such as menus or tree views keyboard accessible. accessible web page authoring ibm has put together a simple, practical resource for web authors to learn accessibility the fast and painless way. highly recommended, an excellent resource. 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. automated checking & repair cynthia says™ from hisoftware® company "cynthia says™" is a free online webpage accessibility validation service that is designed to identify errors in webpage related to section 508 standards and/or the wcag guide...

Color contrast - Accessibility
is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors. this is because they don't see bright and dark areas as readily as those without such conditions, and therefore have trouble seeing edges, borders, and other details. it is good to have a cool design on your website, but the design is worthless if your users can't read your content. examples let's have a look at some simple html and css code: <div class="good">good contrast</div> <div class="bad">bad contrast</div> div { /* general div styles here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color. the "good" <div> has...
...make the color contrast as good as it can be within your design constraints — ideally go for the aaa rating (see 1.4.6 below), but at least meet the aa rating (see 1.4.3 below). if you are including non-text content such as video or animation, you should follow 1.4.11 (again, see below). to check your contrast as you make your ...

Viewport concepts - CSS: Cascading Style Sheets
ed into view. on larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser window. on most mobile devices and when the browser is in fullscreen mode, the viewport is the entire screen. 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. to recap, the viewport is basically the part of the document that is currently visible. viewport sizes are mutable the width of the viewport is not always the width of the window. if you query the width or height of the window and document in chrome or firefox, you may get: document.documentelement.clientwidth /* 1200 */ window.innerwidth...
...web content can be seen, which is not necessarily the same size as the rendered page. mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. users can then pan and zoom to see different areas of the page. 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. to tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following: <meta name="viewport" content="width=devic...

box-align - CSS: Cascading Style Sheets
see also align-items, box-orient, box-direction, box-pack ...
... see also align-items, box-orient, box-direction, box-pack ...

<shape> - CSS: Cascading Style Sheets
see also related css property: clip the -moz-image-rect() function has similar coordinate values to rect(). ...
... see also related css property: clip the -moz-image-rect() function has similar coordinate values to rect(). ...

Event reference
notificationevent notifications apithe definition of 'onnotificationclick' in that specification. a system notification spawned by serviceworkerregistration.shownotification() has been clicked. offline event html5 offline the browser has lost access to the network. online event html5 offline the browser has gained access to the network (but particular websites might be unreachable). open event websocket a websocket connection has been established. open event server sent events an event source connection has been established. orientationchange event screen orientation the orientation of the device (portrait/landscape) has changed. pagehide pagetransitionevent html5 a session histor...
...rotated in any direction. non-standard events event name event type specification fired when... afterscriptexecute event mozilla specific a script has been executed. beforescriptexecute event mozilla specific a script is about to be executed. beforeinstallprompt event chrome specific a user is prompted to save a website to a home screen on mobile. dommousescroll mozilla specific the wheel button of a pointing device is rotated (detail attribute is a number of lines). (use wheel instead) dragdrop dragevent mozilla specific an element is dropped (use drop instead). dragexit dragevent mozilla specific a drag operation is being ended (use dragend instead).

Mobile-friendliness - Developer guides
what is mobile friendliness? mobile friendliness can mean a multitude of things, depending on who you’re talking to. it can be helpful to think of it in terms of three goals for improving your site’s user experience: presentation, content, and performance. 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. needless to say, a fixed-width, three-column layout filled with complex javascript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. a slimmed-down, linearized page layout with elements sized for a touchscreen would be much more appropria...
...n, linearized page layout with elements sized for a touchscreen would be much more appropriate. that’s why this first goal is all about presenting your content in a way that makes life easy for users on mobile device. goal #2 (content) “adjust your content for mobile users.” think about what your users want to do at your site if they are on a phone. a great example of this is alaska air’s website. their desktop site focuses on getting visitors to book trips. mobile users, however, are probably more interested in checking-in for a flight or seeing if their flight is delayed. they’ve adjusted their site’s content to reflect this, and it meets the needs of mobile users. goal #3 (performance) “give your users a smooth experience, even on a slow connection.” though things have been get...

<a>: The Anchor element - HTML: Hypertext Markup Language
re</a> for details about mailto: urls, such as including a subject or body, see email links or rfc 6068. linking to telephone numbers <a href="tel:+49.157.0156">+49 157 0156</a> <a href="tel:+1(555)5309">(555) 5309</a> tel: link behavior varies with device capabilities: cellular devices autodial the number. most operating systems have programs that can make calls, like skype or facetime. websites can make phone calls with registerprotocolhandler, such as web.skype.com. other behaviors include saving the number to contacts, or sending the number to another device. see rfc 3966 for syntax, additional features, and other details about the tel: url scheme. using the download attribute to save a <canvas> as a png to save a <canvas> element’s contents as an image, you can create a link ...
...stener('mouseup', () => isdrawing = false); document.queryselector('a').addeventlistener('click', event => event.target.href = canvas.todataurl() ); result security and privacy <a> elements can have consequences for users’ security and privacy. see referer header: privacy and security concerns for information. 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. firefox 79+) setting target="_blank" implicitly provides the same protection as setting rel="noopener". accessibility strong link text the content inside a link should indicate where the link goes, even out of context. inaccessible, weak link text a sadly comm...

<acronym> - HTML: Hypertext Markup Language
see also the <abbr> html element ...
... see also the <abbr> html element ...

<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
see also web components <shadow>, <slot>, <template>, <element> ...
... see also web components <shadow>, <slot>, <template>, <element> ...

<element>: The Custom Element element (Obsolete) - HTML: Hypertext Markup Language
see also web components: <content>, <shadow>, <slot>, and <template> ...
... see also web components: <content>, <shadow>, <slot>, and <template> ...

<listing> - HTML: Hypertext Markup Language
see also the <pre> and <code> elements to be used instead. the <plaintext> and <xmp> elements, similar to <listing> but also obsolete. ...
... see also the <pre> and <code> elements to be used instead. the <plaintext> and <xmp> elements, similar to <listing> but also obsolete. ...

HTML: Hypertext Markup Language
html (hypertext markup language) is the most basic building block of the web. it defines the meaning and structure of web content. other technologies besides html are generally used to describe a web page's appearance/presentation (css) or functionality/behavior (javascript). "hypertext" refers to links that connect web pages to one another, either within a single website or between websites. links are a fundamental aspect of the web. by uploading content to the internet and linking it to pages created by other people, you become an active participant in the world wide web. html uses "markup" to annotate text, images, and other content for display in a web browser. html markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <sp...
...eo, audio, and even entire other webpages. html tables representing tabular data on a webpage in an understandable, accessible way can be a challenge. this module covers basic table markup, along with more complex features such as implementing captions and summaries. 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. registering and logging in, sending feedback, buying products, and more. this module gets you started with creating the client-side/front-end parts of forms. use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a...

Using Feature Policy - HTTP
ature, the browser maintains a list of origins for which the feature is enabled, known as an allowlist. if you do not specify a policy for a feature, then a default allowlist will be used. the default allowlist is specific to each feature. the feature-policy header is still in an experimental state, and is subject to change at any time. be wary of this when implementing feature policy on your website. writing a policy a policy is described using a set of individual policy directives. a policy directive is a combination of a defined feature name, and an allowlist of origins that can use the feature. features within a policy are separated by semicolons. allowlist an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be...
...rame to have a feature enabled, the origin must be in the allowlist for both the parent page and the allow attribute. disabling a feature in a policy is a one-way toggle. if a feature has been disabled for a child frame by its parent frame, the child cannot re-enable it, and neither can any of the child's descendants. 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. you can use feature policies to specify the desired best practices, and rely on the browser to enforce the policies to prevent regressions. there are several policy-controlled features designed to represent funct...

Feature Policy - HTTP
apis in the browser. it is similar to content security policy but controls features instead of security behavior. the feature-policy header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change. in a nutshell feature policy provides a mechanism to explicitly declare what functionality is used (or not used), throughout your website. this allows you to lock in best practices, even as the codebase evolves over time — as well as to more safely compose third-party content — by limiting which features are available. with feature policy, you opt-in to a set of "policies" for the browser to enforce on specific features used throughout a website. these policies restrict what apis the site can access or modify the browser's def...
...ences". the features include: layout-inducing animations legacy image formats oversized images synchronous scripts synchronous xmlhttprequest unoptimized images unsized media granular control over certain features the web provides functionality and apis that may have privacy or security risks if abused. 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. where available, the feature integrates with the permissions api, or feature-specific mechanisms to check if the feature is available. the features include (see features list): accelerometer ambient light sensor autoplay camera encrypted media fullscreen g...

Clear-Site-Data - HTTP
it allows web developers to have more control over the data stored locally by a browser for their origins. header type response header forbidden header name no syntax the clear-site-data header accepts one or more directives. if all types of data should be cleared, the wildcard directive ("*") can be used. // single directive clear-site-data: "cache" // multiple directives (comma separated) clear-site-data: "cache", "cookies" // wild card clear-site-data: "*" directives all directives must comply with the quoted-string grammar. ...
...cutioncontexts" indicates that the server wishes to reload all browsing contexts for the origin of the response (location.reload). "*" (wildcard) indicates that the server wishes to clear all types of data for the origin of the response. if more data types are added in future versions of this header, they will also be covered by it. examples sign out of web site if a user signs out of your website or service, you might want to remove locally stored data. you can achieve that by adding the clear-site-data header when sending the page confirming that logging out from the site has been accomplished successfully (https://example.com/logout, for example): clear-site-data: "cache", "cookies", "storage", "executioncontexts" clearing cookies if this header is delivered with the response at http...

Index - HTTP
header contains the time in seconds the object has been in a proxy cache. 16 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource. 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. 18 authorization http, http header, reference, request header, header the http authorization request header contains the credentials to authenticate a user agent with a server, usually after the server has responded with a 401 unauthorized status and the www-authenticate header. 19 cache-control general header, http, http header, reference the cache-cont...
...ectives for caching mechanisms in both requests and responses. caching directives are unidirectional, meaning that a given directive in a request is not implying that the same directive is to be given in the response. 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. it allows web developers to have more control over the data stored locally by a browser for their origins. 21 connection http, headers, reference, web the connection general header controls whether or not the network connection stays open after the current transaction finishes. if the value sent is keep-alive, the connection is persistent and not closed, allowing for subsequ...

Strict-Transport-Security - HTTP
load directives max-age=<expire-time> the time, in seconds, that the browser should remember that a site is only to be accessed using https. includesubdomains optional if this optional parameter is specified, this rule applies to all of the site's subdomains as well. preload optional see preloading strict transport security for details. not part of the specification. 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. this creates an opportunity for a man-in-the-middle attack. the redirect could be exploited to direct visitors to a malicious site instead of the secure version ...
...f 1 year. this blocks access to pages or sub domains that can only be served over http. strict-transport-security: max-age=31536000; includesubdomains in the following example, max-age is set to 2 years, raised from what was a former limit max-age of 1 year. note that 1 year is acceptable for a domain to be included in browsers' hsts preload lists. 2 years is, however, the recommended goal as a website's final hsts configuration as explained on https://hstspreload.org. it also suffixed with preload which is necessary for inclusion in most major web browsers' hsts preload lists, e.g. chromium, edge, & firefox. strict-transport-security: max-age=63072000; includesubdomains; preload specifications specification status comment http strict transport security (hsts) ...

HTTP headers - HTTP
ss a resource behind a proxy server. proxy-authorization contains the credentials to authenticate a user agent with a proxy server. caching age the time, in seconds, that the object has been in a proxy cache. cache-control directives for caching mechanisms in both requests and responses. clear-site-data clears browsing data (e.g. cookies, storage, cache) associated with the requesting website. expires the date/time after which the response is considered stale. pragma implementation-specific header that may have various effects anywhere along the request-response chain. used for backwards compatibility with http/1.0 caches where the cache-control header is not yet present. warning general warning information about possible problems. client hints http client hints are a work in...
...s considered stale. pragma implementation-specific header that may have various effects anywhere along the request-response chain. used for backwards compatibility with http/1.0 caches where the cache-control header is not yet present. warning general warning information about possible problems. client hints http client hints are a work in progress. actual documentation can be found on the website of the http working group. accept-ch servers can advertise support for client hints using the accept-ch header field or an equivalent html <meta> element with http-equiv attribute ([html5]). accept-ch-lifetime servers can ask the client to remember the set of client hints that the server supports for a specified period of time, to enable delivery of client hints on subsequent requests t...

Link prefetching FAQ - HTTP
h-next", false); however, the theory is that if link prefetching needs to be disabled then there must be something wrong with the implementation. we would rather improve the implementation if it does not work correctly, than expect users to locate and tweak some obscure preference. what about folks who pay-per-byte for network bandwidth? basically, there are two ways of looking at this issue: websites can already cause things to be silently downloaded using js/dom hacks. prefetching is a browser feature; users should be able to disable it easily. it is important that websites adopt <link> tag based prefetching instead of trying to roll-in silent downloading using various js/dom hacks. the <link> tag gives the browser the ability to know what sites are up to, and we can use this information t...
...this is one reason why prefetching is enabled by default. which browsers support link prefetching? browsers based on mozilla 1.2 (or later) as well as browsers based on mozilla 1.0.2 (or later) support prefetching. this includes firefox and netscape 7.01+. ...

Introduction - JavaScript
script reference to get more details on individual objects and statements. what is javascript? javascript is a cross-platform, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.). 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). inside a host environment (for example, a web browser), javascript can be connected to the objects of its environment to provide programmatic control over them. javascript contains a standard library of objects, such as array, date, and math, and a core set of language elements such as operators, control s...
...elop their implementation of javascript. the ecmascript standard is documented in the ecma-262 specification. see new in javascript to learn more about different versions of javascript and ecmascript specification editions. the ecma-262 standard is also approved by the iso (international organization for standardization) as iso-16262. you can also find the specification on the ecma international website. the ecmascript specification does not describe the document object model (dom), which is standardized by the world wide web consortium (w3c) and/or whatwg (web hypertext application technology working group). the dom defines the way in which html document objects are exposed to your script. to get a better idea about the different technologies that are used when programming with javascript, cons...

OpenSearch description format
opensearch is supported by (at least) firefox, edge, internet explorer, safari, and chrome. (see reference material for links to other browsers' documentation.) firefox also supports additional features not in the opensearch standard, such as search suggestions and the <searchform> element. this article focuses on creating opensearch-compatible search plugins that support these additional firefox features. opensearch description files can be advertised as described in autodiscovery of search plugins, and can be installed programmatically as described in adding search engines from web pages. ...
...10kb (see bug 361923). in addition, the search plugin service provides a logging mechanism that may be useful to plugin developers. use about:config to set the pref 'browser.search.log' to true. then, logging information will appear in firefox's error console (tools ⟩ error console) when search plugins are added. 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. customized search through ready2search ...

Animation performance and frame rate - Web Performance
border-width margin-left font-size properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. color properties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. 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. an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform. the intention of this scenario isn't to convince you that animating using margin is always a bad...
...fference between animating using margin and animating using transform. the intention of this scenario isn't to convince you that animating using margin is always a bad idea. it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems. if you want to play along, the demo website is here. it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform. there are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint. there's also a video version of this walkthrough: ...

Web Performance
our journey here. what is web performance? this article starts the module off with a good look at what performance actually is — this includes the tools, metrics, apis, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow. how do users perceive performance? more important than how fast your website is in milliseconds, is how fast your users perceive your site to be. these perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. in this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings...
...lications subjectively and objectively faster. there are many apis, developer tools, best practices, and bad practices relating to web performance. here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic. html performance features some attributes and the source order of your mark-up can impact the performance or your website. by minimizing the number of dom nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. this article looks in detail at how html can be used to ensure maximum performance. multimedia: images and video the lowest hanging fruit of web performance is often media optimi...

color-profile - SVG: Scalable Vector Graphics
...
... ...

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. this enables the browser to offer autocompletion (that is, suggest possible completions for fields that the user has started typing in) or autofill (that is, pre-populate certain fields upon load). these features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. however, some data submitted in forms either are not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government identifier or credit card security code). ...
... (that is, pre-populate certain fields upon load). these features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. however, some data submitted in forms either are not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government identifier or credit card security code). 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. note that the wcag 2.1 success criterion 1.3.5: identify input purpose does not require that autocomplete/autofill actually work - merely that form fields that relate to specific personal user information are programmatically identified. this means that the cr...

Securing your site - Web security
ctices to use when storing passwords. content security properly configuring server mime types there are several ways incorrect mime types can cause potential security problems with your site. this article explains some of those and shows how to configure your server to serve files with the correct mime types. http strict transport security the strict-transport-security: http header lets a website specify that it may only be accessed using https. http access control the cross-origin resource sharing standard provides a way to specify what content may be loaded from other domains. you can use this to prevent your site from being used improperly; in addition, you can use it to establish resources that other sites are expressly permitted to use. content security policy an added layer of s...
...oject, xss was the seventh most common web app vulnerability in 2017. the x-frame-options response header the x-frame-options: http response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>. sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites. 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. ...

Types of attacks - Web security
. this can be used, for example, to steal login credentials or to get the user's unwitting permission to install a piece of malware. (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. this code is executed by the victims and lets the attackers bypass access controls and impersonate users. according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. these attacks succeed if the web app does not employ enough validation or encoding. the user's browser cannot detect the malicious script is untr...
... dom-based. stored xss attacks the injected script is stored permanently on the target servers. the victim then retrieves this malicious script from the server when the browser sends a request for data. 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. the web server reflects the injected script back to the user's browser, such as in an error message, search result, or any other response that includes data sent to the server as part of the request. the browser executes the code because it assumes the response is from a "trusted" server which the user has already interacted with. dom-based xss attacks the payload is executed as a result of mo...

Tutorials
ther webpages. html tables representing tabular data on a webpage in an understandable, accessible way can be a challenge. this module covers basic table markup, along with more complex features such as implementing captions and summaries. 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. registering and logging in, sending feedback, buying products, and more. this module gets you started with creating the client-side parts of forms. tips for authoring fast-loading html pages optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and internet connection. css tutorials introductory level css basics css (casc...
... nature of javascript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. here we teach object theory and syntax in detail, look at how to create your own objects, and explain what json data is and how to work with it. 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. in this module, we will explore what apis are, and how to use some of the most common apis you'll come across often in your development work. a re-introduction to java...

Modules - Archive of obsolete content
. compartments are very useful from a security point of view: each compartment has a set of privileges that determines what a script running in that compartment can and cannot do. compartments with chrome privileges have access to the components object, giving them full access to the host platform. in contrast, compartments with content privileges can only use those features available to ordinary websites. the sandbox constructor takes a url parameter, which is used to determine the set of privileges for the compartment in which the sandbox will be created. passing an xul url will result in a compartment with chrome privileges (note, however, that if you ever actually do this in any of your code, gabor will be forced to hunt you down and kill you). otherwise, the compartment will have content pr...

indexed-db - Archive of obsolete content
api, such as idbtransaction, idbopendbrequest, and idbobjectstore, are accessible through the indexeddb object itself. the api exposed by indexed-db is almost identical to the dom indexeddb api, so we haven't repeated its documentation here, but refer you to the indexeddb api documentation for all the details. 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. see bug 778197 and bug 786688. example this example uses the action button api, which is only available from firefox 29 onwards. here's a complete add-on that adds two buttons to the browser: the button labeled "add" adds the title of the current tab to a database, while the button labeled "list" lists all the tit...

request - Archive of obsolete content
request can be executed by calling its get() method, a post request by calling its post() method, and so on. when the server completes the request, the request object emits a "complete" event. registered event listeners are passed a response object. each request object is designed to be used once. attempts to reuse them will throw an error. 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. with the exception of response, all of a request object's properties correspond with the options in the constructor. each can be set by simply performing an assignment. however, keep in mind that the same validation rules that apply to options in the constructor will apply during as...

package.json - Archive of obsolete content
long with cfx; it's not available when using jpm. string in the guid format. this is used as a classid of the "harness service" xpcom component. defaults to a random guid generated by cfx. hasembeddedwebextension new in jpm 1.2.0. boolean value: true if the add-on contains an embedded webextension. homepage the url of the add-on's website. this value will be used as the add-on's em:homepageurl element in its install.rdf. icon the path to an image file containing the icon for the add-on. optional: you can have no icon field in package.json and put your icon named "icon.png" in the root directory of your add-on. if no icon is specified, the standard add-on icon will be used by default. when using ...

Code snippets - Archive of obsolete content
downloading files code to download files, images, and to monitor download progress password manager code used to read and write passwords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg anim...

Downloading JSON and JavaScript in extensions - Archive of obsolete content
once the content has been downloaded, the extension authors proceed to use eval() to decode the string content into javascript objects. this practice is dangerous and will not, in fact, pass an amo review. so the extension will not be allowed to move out of the amo sandbox. the practice is dangerous because the decoded javascript has full chrome privileges and could perform some nasty actions. ...

Extension Packaging - Archive of obsolete content
note: starting in gecko 2.0, xpi files are no longer unpacked when extensions are installed. instead, the xpi itself is placed in the extensions directory, and files are loaded directly out of the package. making an extension xpi an xpi (xpinstall) file is simply a zip file, containing the extension files, with the install.rdf file at the root of the zip. users can download xpi files from a website, or from a local file, and install by opening it, or dragging it into the extension manager window. the xpi file must contain only uncompressed files, or files compressed using the deflate algorithm. the mime type recognized by firefox for xpi files is application/x-xpinstall. since most http servers are not configured to return this mime type for the .xpi extension by default, you will probably...

Extension Etiquette - Archive of obsolete content
lbars as necessary. status bar items should only be added for extensions that need constant monitoring, such as ad blocking, page ranking, or cookie management. likewise, use context menu items sparingly — only for tasks that are done frequently or on specific elements of a web page. focus don't steal focus. it's not your extension's job to take focus from the web content. if the user loads a website and they ask for focus, they should get it. overriding their request isn't very nice. about dialogs there is a default popup about dialog that is created from install.rdf data; creating a new xul about box is usually unnecessary. you can decrease download size by omitting a customized about box. make one only if you have a special feature that needs to be included — for example, a custom upda...

Install Manifests - Archive of obsolete content
nderbird 1.5, see toolkit version format. examples <em:version>2.0</em:version> <em:version>1.0.2</em:version> <em:version>0.4.1.2005090112</em:version> firefox 1.5 / xulrunner 1.8 - add-ons that do not use a valid version format will not be installed. the version format is different from, although backwards-compatible with, 1.0's. for add-ons hosted on addons.mozilla.org - mozilla's update website may repackage your add-on and correct or reject malformed version strings. optional property reference you may need to supply these properties, depending on the capabilities of your add-on. abouturl the chrome:// url of the extension's about dialog box. this is only useful to extensions. if this property is specified, in the about:addons extensions list, the about... link in the extension's ...

Listening to events in Firefox extensions - Archive of obsolete content
s. domlinkhandler the domlinkhandler object is called by the domlinkadded event in order to detect any rss feeds, site icons, or opensearch plugins for the web site. pageshoweventhandlers the pageshoweventhandlers() function is called by the pageshow event and is used to populate the character set menu and update the ui elements associated with any detected feeds or opensearch plugins for the website. xulbrowserwindow xulbrowserwindow is an nsiwebprogresslistener used to get progress events for the currently visible browser. it is used to update the ui for many different reasons: update the progress bar and status messages as pages load turn on and off the throbber as pages load set the site icon when available update the address bar as the user navigates hide notification bars when ...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
y is considering releasing its own software as open source, it should consider dual-licensing or the cpl. applying a license to original works if you want to release your own code as open-source, here’s what you do next. insert the license declaration in the top of every file in your source code; include the full text of the license in your source-code archive; place the source code on a website or otherwise make it accessible; tell all your friends. if you are using the modified bsd license or mpl, place the full text in the top, not just the license declaration. if you are using the gpl or lgpl, use the declaration at the end of the license’s full text as a template and insert that. see below. gpl license declaration template if you develop a new program, and you want it to be o...

Chapter 1: Introduction to Extensions - Archive of obsolete content
ons to provide certain pieces of information. new feature extensions fixme: update this. extensions can add completely new features to firefox. this class of extension requires a greater level of knowledge and programming ability. greasemonkey userchrome.js both of these provide an environment for running user scripts (javascript) in firefox itself, where the scripts can target specific websites. adblock plus blocks the display of unwanted advertisements on web pages. all-in-one gestures adds mouse-gesture functionality. application level extensions fixme: update this. these are sophisticated extensions that can be considered full-scale applications in their own right, essentially using firefox as the development platform. one-trick gag extensions fixme: update this. the...

Adding Events and Commands - Archive of obsolete content
communication mechanism, specially when dealing with a somewhat common problem: communication between window xul and web page content. it isn't hard for xul code to control the content on pages being loaded or displayed, as we will see later on, but it can be hard for your extension xul code to receive information from pages in a secure manner. 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. one way to solve this is to have the actions on the site to generate a custom event that can be easily recognized by your extension. you can capture the events in the xul...

Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
might replace the json with attack code before it arrives at the user. use native json since firefox 3.5 you should use json. really, just use it! note: do not use json parsers implemented in javascript. these implementations are less efficient and often also contain serious security vulnerabilities. such implementations are meant to be used within a very different security context, namely a website, where the origin of the data is usually known in all instances and where vulnerabilities would have a much smaller impact. what about jsonp? jsonp, which really is just another script tag containing generated, remotely retrieved code, is generally not secure. it might be possible to execute any retrieved jsonp code in an unprivileged sandbox (which is complicated!), but if you have a choice, j...

Security best practices in extensions - Archive of obsolete content
or convenience. if you choose to do so, beware when making edits to the bundled files so as not to break the well thought out security architecture. third-party javascript in the context of web sites, using javascript written by others is very common. it is not unheard of in add-ons as well, and can provide a useful way to avoid code duplication and accelerate development. this article is about websites, but gives some insights into the general risks. when you do include other scripts, there are a number of things you can do to ensure their integrity and safety for users. the first is to always get it from a trusted source. another thing you should do is namespace it just in case other add-ons include it. for example, if you're using jquery, there's jquery.noconflict(). conclusion security ca...

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). there are a few things that could be done to make this fit the site better, and for general cleaning up: tables should use the "standard-table" css class so they're styled the same as those on the rest of mdc. there should be some introductory text on the table of contents page at https://developer.mozilla.org/en/...

Add-ons - Archive of obsolete content
files to extend the functionality of an xul program. extensions support in seamonkey 2 starting with seamonkey 2 alpha 1 seamonkey supports toolkit/-style extensions. these type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions. firefox addons developer guide the original document is in japanese and distributed via the xuldev.org website. 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). hotfix extension this document has been moved to the add-ons wiki. how to convert an overlay extension to restartless first off, what kind of...

An Interview With Douglas Bowman of Wired News - Archive of obsolete content
ncentrated effort at making it so. sure, we now pay more attention to our image alt attributes, and try to use heading tags appropriately. but a huge decrease in the amount [sic] of presentation markup tags also plays a big role too. since all of our content is also completely accessible sans style sheets, i think we get the best of both worlds: a well-designed, highly stylized, true-to-our-brand website which adapts in different browsing environments. what would you say to a site developer considering a similar conversion to standards-based layout, either with simple tables or no tables at all? i think the conversion is a matter of taking into account several considerations. are you tired of the maintenance headaches caused by the glut of extra tables and presentation tags in your markup? can ...

JavaScript Client API - Archive of obsolete content
the firefox sync services (a “third party client”), you acknowledge that you will need to install and use a local version of the firefox sync server for multiple account testing and that any use of mozilla’s hosted firefox sync services is subject to mozilla’s firefox sync terms of service at https://services.mozilla.com/tos/. ...

Mozilla Application Framework in Detail - Archive of obsolete content
ons of images and css which can augment or replace your current ui elements. xul provides an excellent answer for organizations with heterogeneous computing environments. customized xul applications with significant business logic can be written once, and used on the range of platforms that exist within the organization. in addition, if the organization maintains sophisticated, interactive websites, it will already possess a wealth of technical expertise that will be relevant for creating xul applications. in addition to the technologies already mentioned, we go even further by allowing you to even create your own custom interface widgets. don't feel limited by the widgets that the framework already contains! xbl (extensible binding language) allows you to expand your library of interface ...

Plug-n-Hack - Archive of obsolete content
without integration between security tools and browsers, a user must often switch between the tool and their browser several times to perform a simple task, such as intercepting an http(s) request. pnh allows security tools to declare the functionality that they support which is suitable for invoking directly from the browser. a b...

Prism - Archive of obsolete content
tor automatically takes this information into account. documentation frequently asked questions bundles a web application bundle is a zip archive that holds a configuration file, icons and an optional webapp js script. bundles can be installed locally, or directly from a website using the prism for firefox extension. configuration a webapp bundle should contain a webapp.ini configuration file. the configuration file is a simple, ini-style text file that specifies some parameters about a web application. styling one of prism's goals is to make web applications feel more like deskto...

Remotely debugging Firefox for Metro - Archive of obsolete content
tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. if you want to debug your web content, you'll choose the relevant content tab. you'll see one entry under "available remote processes": this is the browser process itself. you'll choose this option if you want to debug the browser's own code. let's choose to attach to the mozilla.org website. the toolbox will open in its own window, attached to the firefox for metro tab that's currently hosting mozilla.org: the toolbox, and the tools it hosts (including the console, debugger, style editor, profiler, etc.), work in just the same way as they do when attached to local content. ...

XTech 2005 Presentations - Archive of obsolete content
, qualified names, and xml elements and lists. e4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants. another e4x feature: the ability to bind a w3c dom document to a new xml object, reflecting the dom in e4x terms so that updates to either the dom or the e4x object hierarchy show up in the other. directions of the mozilla rdf engine: website scripting, standards conformance and perfomance - axel hecht this presentation showed new developments in the mozilla rdf engine. these include plans to expose the rdf api to public web content, as well as performance and correctness improvements. rich web: svg and canvas in mozilla - robert o'callahan today's web browsers offer somewhat limited graphics capabilities to web developers. adva...

Using spell checking in XUL - Archive of obsolete content
spell checking functionality is available starting in firefox 2. this document describes how to use the mozispellcheckingengine component to add spell checking capabilities to your firefox extension. see controlling spell checking in html forms for details on adding spell check support to html forms for your website. checking the spelling of a word to check the spelling of a word, you must first create an interface to the mozispellcheckingengine component and then call the check() method on the string you wish to test. this method returns true if the word is correctly spelled, or false if it's not. you may also want to check to see if the word is in the user's personal dictionary, since sometimes a word might be correctly spelled but in the dictionary. // different versions of firefox have ...

Gecko Compatibility Handbook - Archive of obsolete content
if you're new to standards, you may find using web standards in your web pages a helpful introduction. ...

2006-10-06 - Archive of obsolete content
read more... discussions w3c sets road map for web app accessibility the w3c introduced its wai-aria (web accessibility initiative for accessible rich internet applications) roadmap--a set of guidelines for developers to make accessible web content. this set of documents tackles some of the difficulties that ajax has been causing with regards to accessibility. read more... ...

2006-10-13 - Archive of obsolete content
about a font rendering problem with firefox print on the firefox context menu user would like discussion about why the bug https://bugzilla.mozilla.org/show_bug.cgi?id=204519 is a wontfix. (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. firefox add-on wanted user is inquiring if there is such an application to automatically save pieces of a webpage everytime is it updated. firefox 2.0 should re-implement modal window.open to support web 2.0 user would like the option to show pop-up windows, using window.open(), from inside untrusted script, to be re-implemented. this function was disabled,...

2006-12-01 - Archive of obsolete content
n. rich results for searches a proposal to implement "rich results", a set of registered sites that would provide information as it relates to a user's search. windows dde shell integration removal a call for responses or concerns regarding the removal of the dde shell integration. how do allow an internal web site to have universalbrowserwrite? a question regarding having an internal website use universalbrowserwrite on a local intranet. developping microsummary generator questions and discussion surrounding microsummaries in ff 2.0. applying extensions question regarding the proper application of ff extensions. finding out how blur() works... question regarding how to access the functionality that arises when window.blur() is called. ff2 not responding to click on lin...

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). he is also asking if there are developers out there who know the tb core and are willing to help him out. discussions developer documentation issues for thunderbird 2 eric shepherd has requested feedback for any developer documentation issues that might need dealing with for thunderbird 2. meetings none for this week. ...

2006-11-17 - Archive of obsolete content
ent. alex vincent ran into some difficulty with xulrunner extension manager not recognizing xulwidgets for verbosio? however he found out that it was a result of his flat-chrome version of xul widgets and works fine with the jarred-chrome version. boaz discuses the evolution of web browsers towards a more "application mode" whereas a web browser is loaded for the sole purpose of running a given website. boaz invites your comments xulrunner 1.8.0.4 is running a kiosk-type application on linux with 512mb, and there is the appearance of a significant memory leak. win2xul asks for any quick pointers, opinions, experience, suggestions or ideas on where xulrunner might leak memory bug 319654 was fixed on trunk recently. nickolay ponomarev lets us know that processing instructions are now added to x...

2006-11-10 - Archive of obsolete content
vember 10, 2006 return to mozilla-dev-security announcements none during this week. discussions why now? (was: extended validation certificates) a continuation of last week's discussion on extended validation certificates, the there post was getting unruly at 147 replies. 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. meetings none during this week. ...

2006-11-17 - Archive of obsolete content
.dev.tech.layout - november 11 - november 17, 2006 announcements none this week. discussions testing accesskey conflicts discussion about the complexity of access keys and how to detect conflicts there in the l10n community. bug #360589 describes this ongoing issue. site not loading with seamonkey a user built seamonkey in debug mode and is currently receiving a "bad request" error on some websites. reflow branch testing wanted l. david baron would like users to test the reflow branch as it is coming close to being merged with the trunk. nightly builds, instructions and the current list of known regressions on the branch can be found at: http://wiki.mozilla.org/gecko:reflow...ng#quick_links. users are asked to file bugs on encountered problems that are not present on the current trunk bui...

NPAPI plugin developer guide - Archive of obsolete content
ay content that the application itself can't display natively. for example, the adobe flash plug-in is used to access flash content (including videos and certain interactive applications), and the quicktime and realplayer plugins are used to play special format videos in a web page. important: plugins are now a legacy technology. they are not available on most mobile devices. mozilla encourages website developers to avoid using plugins wherever possible. if there are plugin features which are not available in the web platform, we encourage developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize web platform work to make those use cases possible. plugins are written using npapi, the cross-browser api for plugins. the main source of documentation ...

How RSS Works - Archive of obsolete content
this page explains how rss works. you will not yet be creating your own rss files, but you will be learning about the different systems that come into play with rss syndication. how rss works there are two main components that come into play with rss syndication: the server end and the client end. the server end of rss syndication is the part of the system that produces the rss feed. a news website would be at the server end of rss syndication. a blog would be at the server end of rss syndication. an ipradio show would be at the server end of rss syndication. an iptv show would be at the server end of rss syndication. the client end of rss syndication is the part of the system that consumes the rss feed. the mozilla firefox web browser would be at the client end of the rss syndication. a d...

0.90 - Archive of obsolete content
(and not only a syndication format, as it is today.) rss 0.90 is an rdf-based format. when rss 0.90 was created, the rss initialization stood for rich site summary and not really simple syndication. (see rss - what is in a name for more info on rss's naming history.) note: rss 0.90 has been deprecated. ...

Security Controls - Archive of obsolete content
ware, or firmware. all three types of controls are necessary for robust security. for example, a security policy is a management control, but its security requirements are implemented by people (operational controls) and systems (technical controls). think of phishing attacks. an organization may have an acceptable use policy that specifies the conduct of users, including not visiting malicious websites. security controls to help thwart phishing, besides the management control of the acceptable use policy itself, include operational controls, such as training users not to fall for phishing scams, and technical controls that monitor emails and web site usage for signs of phishing activity. a common problem with security controls is that they often make systems less convenient or more difficult ...

Introduction to Public-Key Cryptography - Archive of obsolete content
ates are included in the verifier's local database. for general information about the way digital signatures work, see "digital signatures". for a more detailed description of the signature verification process in the context of ssl client and server authentication, see "introduction to ssl." managing certificates certificates are used in many applications, from encrypting email to accessing websites. there are two major stages in the lifecycle of a certificate: the point when it is issued (issuance and enrollment) and the period when the certificates are no longer valid (renewal or revocation). there are also ways to manage the certificate during its lifecycle. making information about the certificate available to other applications is publishing the certificate and then backing up the key ...

The Basics of Web Services - Archive of obsolete content
web services exchange data from a server to a client, using an xml format to send requests, so both the server and the client can understand each other. (xml introduction). ...

References - Archive of obsolete content
andard-compliant browsers, part 2 from makiko itoh javascript best practices lists 15 of the most frequent coding practices which create problems for javascript and dhtml-driven webpages. the webpage explains and proposes with small examples the best coding practices and most recommendable ways of developing problem-free javascript code. 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. we highly recommend this site. it is also available in french. from dan. <- previous section: summary of changes ...

Browser Detection and Cross Browser Support - Archive of obsolete content
improper browser detection can lead to web maintenance nightmares. rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross browser web content. ...

-moz-window-shadow - Archive of obsolete content
firefox 3 added support for transparent windows on mac os x. however, for these windows shadows were turned off and there was no way to turn them on. in firefox 3.5 the default changed, with all windows having a shadow. this version introduced the -moz-window-shadow css property to provide a way to turn off unwanted shadows. initial valuedefaultapplies toall elements that create native windows, e.g. ...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
ure in rhino, e4x processing. e4x (ecmascript for xml) is an extension of javascript which provides direct support for xml, greatly simplifying the process of consuming xml via javascript. rhino’s support of this important standard eliminates the pain of using dom or sax based parsers in java. listing 3 below details a script used to process an rss feed from the mozilla website. importpackage( java.net ); // connect to the remote resource var u = new url( "http://www.mozilla.org/news.rdf" ); var c = u.openconnection(); c.connect(); // read in the raw data var s = new java.io.inputstreamreader( c.getinputstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } /...

Standards-Compliant Authoring Tools - Archive of obsolete content
mweaver™ cs6 style master and layout master by western civilisation some caveats: it appears that tools currently available from namo generate ie-specific or netscape 4-specific code that may require extra debugging for compatibility with standards-based browsers. newer versions of microsoft frontpage™ have improved, however be sure not to rely on frontpage-specific extensions for critical website content or functionality. some versions of microsoft word create invalid html code that only works with internet explorer. always be sure to validate your web pages. original document information last updated date: january 30th, 2003 copyright © 2001-2003 netscape. all rights reserved. related links validators html central ...

RDF in Mozilla FAQ - Archive of obsolete content
r bookmarks", "browser global history", "imap mail accounts", "nntp news servers", and "rdf/xml files". in mozilla, datasources can be composed together using the composite data source. this is like overlaying graphs, or merging collections of statements ("microtheories") together. 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. for a more detailed account of how to write a datasource, refer to the rdf datasource how-to. how does mozilla ma...

The Business Benefits of Web Standards - Archive of obsolete content
index and rank properly (where they deserve to) across all search engines. in the same way that standards hugely reduce the concern we need to have for browser differences, they also reduce the differences between the way search engines rank pages. there should be little need to plunge into the increasing costs and uncertain quality and integrity of proprietary pay per click campaigns. increase website traffic maintain contact with your user on multiple platforms standards-based code and cross-platform go hand in hand. while some browsers have quirks that cause different behavior by platform, mozilla-based browsers are designed to behave identically on all supported platforms (mac, linux, unix, windows...) web content is increasingly being accessed by a growing number of user agents other th...

Archive of obsolete content
ent. gecko compatibility handbook ** notes ** - the solution quick reference needs more attention. - i'm also looking for a way to organize all that information. - some inline examples were removed because of technical limitations. 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. getting the page url in npapi plugin sometimes, you want to restrict an npapi plugin to be loadable only from a certain url or domain or scheme. or whenever you make network requests yourself, you almost always need to enforce same-origin policy. index of archived content ...

2D maze game with device orientation - Game development
the <body> contains initialization of the phaser framework and the definitions of the game states. var game = new phaser.game(320, 480, phaser.canvas, 'game'); the line above will initialize the phaser instance — the arguments are the width of the canvas, height of the canvas,...

Ajax - MDN Web Docs Glossary: Definitions of Web-related terms
own as xmlhttprequest. ajax allows you to update parts of the dom of an html page instead without the need for a full page refresh. ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading). with interactive websites and modern web standards, ajax is gradually being replaced by functions within javascript frameworks and the official fetch api standard. ...

API - MDN Web Docs Glossary: Definitions of Web-related terms
a simple contract (the interface) between the application offering it and other items, such as third party software or hardware. in web development, an api is generally a set of code features (e.g. methods, properties, events, and urls) that a developer can use in their apps for interacting with components of a user's web browser, or other software/hardware on the user's computer, or third party websites and services. for example: the getusermedia api can be used to grab audio and video from a user's webcam, which can then be used in any way the developer likes, for example, recording video and audio, broadcasting it to another user in a conference call, or capturing image stills from the video. the geolocation api can be used to retrieve location information from whatever service the user ...

ARPA - MDN Web Docs Glossary: Definitions of Web-related terms
.arpa (address and routing parameter area) is a top-level domain used for internet infrastructure purposes, especially reverse dns lookup (i.e., find the domain name for a given ip address). learn more general knowledge official website .arpa on wikipedia ...

Accessibility - MDN Web Docs Glossary: Definitions of Web-related terms
web accessibility is formally defined and discussed at the w3c through the web accessibility initiative (wai). ...

Bootstrap - MDN Web Docs Glossary: Definitions of Web-related terms
initially, bootstrap was called twitter blueprint and was developed by a team working at twitter. it supports responsive design and features predefined design templates that you can use out of the box, or customize for your needs with your code. ...

Breadcrumb - MDN Web Docs Glossary: Definitions of Web-related terms
in content, displaying either a hierarchy of the current page in relation to the the site's structure, from top level to current page, or a list of the links the user followed to get to the current page, in the order visited. a location breadcrumb for this document might look something like this: mdn > glossary > breadcrumb breadcrumb trails enable users to be aware of their location within a website. this type of navigation, if done correctly, helps users know where they are in a site and how they got there. they can also help a user get back to where they were before and can reduce the number of clicks needed to get to a higher-level page. ...

CSP - MDN Web Docs Glossary: Definitions of Web-related terms
the implementation is based on an http header called content-security-policy. ...

CSRF - MDN Web Docs Glossary: Definitions of Web-related terms
this can be done, for example, by including malicious parameters in a url behind a link that purports to go somewhere else: <img src="https://www.example.com/index.php?action=delete&id=123"> for users who have modification permissions on https://www.example.com, the <img> element executes action on https://www.example.com without their noticing, even if the element is not at https://www.example.com. there are many ways to prevent csrf, such as implementing restful api, adding secure tokens, etc. ...

CSS - MDN Web Docs Glossary: Definitions of Web-related terms
l be affected by that rule */ p { /* the "color" property defines the text color, in this case yellow. */ color: yellow; /* the "background-color" property defines the background color, in this case black. */ background-color: black } "cascading" refers to the rules that govern how selectors are prioritized to change a page's appearance. this is a very important feature, since a complex website can have thousands of css rules. learn more general knowledge learn css css on wikipedia technical reference the css documentation on mdn the css working group current work ...

CSS Object Model (CSSOM) - MDN Web Docs Glossary: Definitions of Web-related terms
the css object model (cssom) is a map of all css selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship. the cssom is very similar to the document object model (dom). both of them are part of the critical rendering path which is a series of steps that must happen to properly render a website. the cssom, together with the dom, to build the render tree, which is in turn used by the browser to layout and paint the web page. cssom api the css object model is also a set of apis allowing the manipulation of css from javascript. it is much like the dom, but for the css rather than the html. it allows users to read and modify the css style dynamically. see also populating the page: how browsers work ...

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. the name comes from the fact that often card sorting is carried out by literally writing the items to sort onto cards, and then arranging the cards into piles. learn more general knowledge card sorting on wikipedia ...

Compile - MDN Web Docs Glossary: Definitions of Web-related terms
uctivity tools. most compilers work either ahead-of-time (aot) or just-in-time (jit). as a programmer, you usually invoke aot compilers from a command line or your ide. the most famous, "gcc" is one example. jit compilers are usually transparent to you, used for performance. for instance in the browser: firefox' spidermonkey javascript engine has a jit built-in that will compile javascript in a website to machine code while you're viewing it so it runs faster. projects like webassembly work on making this even better. learn more general knowledge compiler on wikipedia the gnu compiler collection (gcc) learning resources base cs introduction on compilers a big list of learning material on stackoverflow ...

Cross-site scripting - MDN Web Docs Glossary: Definitions of Web-related terms
this code is executed by the victims and lets the attackers bypass access controls and impersonate users. according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. these attacks succeed if the web app does not employ enough validation or encoding. the user's browser cannot detect the malicious script is untrustworthy, and so gives it access to any cookies, session tokens, or other sensitive site-specific information, or lets the malicious script rewrite the html content. ...

Developer Tools - MDN Web Docs Glossary: Definitions of Web-related terms
they let users inspect and debug the page's html, css, and javascript, allow to inspect the network traffic it causes, make it possible to measure it's performance, and much more. ...

Domain name - MDN Web Docs Glossary: Definitions of Web-related terms
domain names are used in urls to identify to which server belong a specific webpage. the domain name consists of a hierarchial sequence of names (labels) separated by periods (dots) and ending with an extension. ...

Git - MDN Web Docs Glossary: Definitions of Web-related terms
urce, distributed source code management (scm) system. ...

Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
olyfills can be used to build in missing features with javascript, but acceptable alternatives to features like styling and layout should be provided where possible, for example by using the css cascade, or html fallback behaviour. some good examples can be found in handling common html and css problems. it is a useful technique that allows web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. progressive enhancement is related but different — often seen as going in the opposite direction to graceful degredation. in reality both approaches are valid and can often complement one another. ...

Hotlink - MDN Web Docs Glossary: Definitions of Web-related terms
a hotlink (also known as an inline link) is an object (typically an image) directly linked to from another site. for example, an image hosted on site1.com is shown directly on site2.com. the practice is often frowned upon as it can cause unwanted bandwidth usage on the website hosting the linked-to object, and copyright concerns — it is considered stealing when it is done without permission. ...

IANA - MDN Web Docs Glossary: Definitions of Web-related terms
iana (internet assigned numbers authority) is a subsidiary of icann charged with recording and/or assigning domain names, ip addresses, and other names and numbers used by internet protocols. learn more general knowledge official website iana on wikipedia ...

ICANN - MDN Web Docs Glossary: Definitions of Web-related terms
icann (internet corporation for assigned names and numbers) is an international nonprofit that maintains the domain name system and the record of ip addresses. learn more general knowledge official website icann on wikipedia ...

IETF - MDN Web Docs Glossary: Definitions of Web-related terms
the internet engineering task force (ietf) is a worldwide organization that drafts specifications governing the mechanisms behind the internet, especially the tcp/ip or internet protocol suite. the ietf is open, run by volunteers, and sponsored by the internet society. learn more general knowledge official website ...

ISO - MDN Web Docs Glossary: Definitions of Web-related terms
iso (international organization for standardization) is a global association that develops uniform criteria coordinating the companies in each major industry. learn more general knowledge official website ...

JSON - MDN Web Docs Glossary: Definitions of Web-related terms
json can represent numbers, booleans, strings, null, arrays (ordered sequences of values), and objects (string-value mappings) made up of these values (or of other arrays and objects). ...

Keyword - MDN Web Docs Glossary: Definitions of Web-related terms
when you use a search engine, you use keywords to specify what you are looking for, and the search engine returns relevant webpages. for more accurate results, try more specific keywords, such as "blue mustang gto" instead of simply "mustang". ...

MitM - MDN Web Docs Glossary: Definitions of Web-related terms
c wi-fi networks aren't trustworthy. check for https in your address bar and ensure encryption is in-place before logging in. 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. ...

Mozilla Firefox - MDN Web Docs Glossary: Definitions of Web-related terms
x is a free open-source browser whose development is overseen by the mozilla corporation. ...

Node.js - MDN Web Docs Glossary: Definitions of Web-related terms
node.js is a cross-platform javascript runtime environment that allows developers to build server-side and network applications with javascript. learn more general knowledge node.js on wikipedia node.js website technical information api reference documentation tutorials ...

OWASP - MDN Web Docs Glossary: Definitions of Web-related terms
owasp (open web application security project) is a non-profit organization and worldwide network that works for security in free software, especially on the web. learn more general knowledge official website ...

OpenSSL - MDN Web Docs Glossary: Definitions of Web-related terms
openssl is an open-source implementation of ssl and tls. learn more general knowledge openssl on wikipedia official website ...

PHP - MDN Web Docs Glossary: Definitions of Web-related terms
php (a recursive initialism for php: hypertext preprocessor) is an open-source server-side scripting language that can be embedded into html to build web applications and dynamic websites. examples basic syntax // start of php code <?php // php code goes here ?> // end of php code printing data on screen <?php echo "hello world!"; ?> php variables ​​​​​​​​​​​​​​<?php // variables $nome='danilo'; $sobrenome='santos'; $pais='brasil'; $email='danilocarsan@gmailcom'; ​​​​​​​ // printing the variables echo $nome; echo $sobrenome; echo $pais; echo $email; ?> ...

Page prediction - MDN Web Docs Glossary: Definitions of Web-related terms
ure completing search text and address bar urls based on browsing history and related searches. for example, as the user types in the address bar, the browser might send the current text in the address bar to the search engine before the user submits the request. although browser page prediction and prediction services enable faster page loads, they consume additional bandwidth. also, pre-loaded websites and embedded content can set and read their cookies as if they were visited even if they weren't. ...

Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
this measure relies on human perception, not an objective metric like time to interactive. in terms of web performance, perceived performance is how fast a user interaction feels rather than how fast an interaction actually is, be that a button press or a page load. perceived performance is not how fast your site is; it's how fast your users think it is. perceived performance is not measured by when your site is done loading but when it has loaded enough for users to believe it has loaded and is interactive. ...

Polyfill - MDN Web Docs Glossary: Definitions of Web-related terms
back in the days of ie6, netscape, and nnav where each browser implemented javascript very differently. the 1st version of jquery was an early example of a polyfill. it was essentially a compilation of browser-specific workarounds so that javascript developers could have a single common api that worked in all browsers. at the time, javascript developers were grasping at straws trying to get their website to work across all devices because there was such a discrepancy between browsers that the website might have to be programmed radically differently and have a much different user interface based upon the user's browser. thus, the javascript developer had access to only a very tiny handful of javascript apis that worked more-or-less consistently across all browsers. using a polyfill to handle brow...

Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
n that the content will likely be requested, enabling the content to load instantly if and when the user requests it. the content is downloaded and cached for anticipated future use without the user making an explicit request for it. dns prefetching domain lookups can be slow, especially with network latency on mobile phones. 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. <link rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, the...

Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
feature detection is generally used to determine whether browsers can handle more modern functionality, while polyfills are often used to add missing features with javascript. special notice should be taken of accessibility. acceptable alternatives should be provided where possible. progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents. graceful degradation is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement. in reality both approaches are valid and can often complement one another. learn more general knowledge progressive enhancement on wikipedia ...

RSS - MDN Web Docs Glossary: Definitions of Web-related terms
rss (really simple syndication) refers to several xml document formats designed for publishing site updates. when you subscribe to a website's rss feed, the website sends information and updates to your rss reader in an rss document called a feed, so you don't need to check all your favorite websites manually. learn more general knowledge rss on wikipedia technical reference latest specification ...

Robots.txt - MDN Web Docs Glossary: Definitions of Web-related terms
it decides whether crawlers are permitted or forbidden access to the web site. for example, the site admin can forbid crawlers to visit a certain folder (and all the files therein contained) or to crawl a specific file, usually to prevent those files being indexed by other search engines. ...

Ruby - MDN Web Docs Glossary: Definitions of Web-related terms
ruby is also a method for annotating east asian text in html documents to provide pronunciation information; see the <ruby> element. ...

SLD - MDN Web Docs Glossary: Definitions of Web-related terms
...

SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms
an spa (single-page application) is a web app implemention that loads only a single web document, and then updates the body content of that single document via javascript apis such as xmlhttprequest and fetch when different content is to be shown. this therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages such as seo, more effort required to maintain state, implement navigation, and do meaningful performance monitoring. learn more general knowledge some of the most popular spa frameworks include: react angular vue.js ...

SVN - MDN Web Docs Glossary: Definitions of Web-related terms
apache subversion (svn) is a free source control management (scm) system. ...

Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
m features and employing hooking techniques. voiceover macos comes with voiceover, a built-in screen reader. to access voiceover, go to system preferences > accessibility > voiceover. you can also toggle voiceover on and off with fn+command + f5. voiceover both reads aloud and displays content. the content read aloud is displayed in a dark grey box. desktop/laptop screen reader users navigate websites with a keyboard or other non-pointing device. the best way to emulate use is to do the same. just like keyboard navigation without voiceover, you can navigate through interactive elements using the tab key and the arrow keys: next interactive element: tab previous interactive element: shift + tab next radio button in a same named-group: right or down arrow previous radio button in a same ...

Second-level Domain - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge sld on wikipedia ...

TLD - MDN Web Docs Glossary: Definitions of Web-related terms
omain in the internet's hierarchical dns (domain name system). a tld is the final component of a domain name, for example, "org" in developer.mozilla.org. icann (internet corporation for assigned names and numbers) designates organizations to manage each tld. depending on how strict an administrating organization might be, tld often serves as a clue to the purpose, ownership, or nationality of a website. consider an example internet address: https://developer.mozilla.org here org is the tld; mozilla.org is the second-level domain name; and developer is a subdomain name. all together, these constitute a fully-qualified domain name; the addition of https:// makes this a complete url. iana today distinguishes the following groups of top-level domains: country-code top-level domains (cctld) t...

Thread - MDN Web Docs Glossary: Definitions of Web-related terms
thread in computer science is the execution of running multiple tasks or programs at the same time. each unit capable of executing code is called a thread. the main thread is the one used by the browser to handle user events, render and paint the display, and to run the majority of the code that comprises a typical web page or app. because these things are all happening in one thread, a slow website or app script slows down the entire browser; worse, if a site or app script enters an infinite loop, the entire browser will hang. this results in a frustrating, sluggish (or worse) user experience. however, modern javascript offers ways to create additional threads, each executing independently while possibly communicating between one another. this is done using technologies such as web workers...

Three js - MDN Web Docs Glossary: Definitions of Web-related terms
three.js is a javascript-based webgl engine that can run gpu-powered games and other graphics-powered apps straight from the browser. the three.js library provides many features and apis for drawing 3d scenes in your browser. learn more general knowledge three.js on wikipedia three.js official website ...

UTF-8 - MDN Web Docs Glossary: Definitions of Web-related terms
ed 0-127), meaning that existing ascii text is already valid utf-8. all other characters use two to four bytes. each byte has some bits reserved for encoding purposes. since non-ascii characters require more than one byte for storage, they run the risk of being corrupted if the bytes are separated and not recombined. learn more general knowledge utf-8 on wikipedia faq about utf-8 on unicode website ...

W3C - MDN Web Docs Glossary: Definitions of Web-related terms
velop web standards, run outreach programs, and maintain an open forum for talking about the web. the w3c coordinates companies in the industry to make sure they implement the same w3c standards. each standard passes through four stages of maturity: working draft (wd), candidate recommendation (cr), proposed recommendation (pr), and w3c recommendation (rec). learn more general knowledge w3c website w3c on wikipedia ...

WAI - MDN Web Docs Glossary: Definitions of Web-related terms
wai or web accessibility initiative is an effort by the world wide web consortium (w3c) to improve accessibility for people with various challenges, who may need a nonstandard browser or devices. learn more general knowledge wai website web accessibility initiative on wikipedia ...

WHATWG - MDN Web Docs Glossary: Definitions of Web-related terms
the whatwg (web hypertext application technology working group) is a community that maintains and develops web standards, including dom, fetch, and html. employees of apple, mozilla, and opera established whatwg in 2004. learn more general knowledge whatwg on wikipedia whatwg website ...

World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
o standardize and develop the web further. this consortium consists of core web interest groups, such as web browser developers, government entities, researchers, and universities. its mission includes education and outreach. learn more learn about it learn the web web literacy map (an inventory of skills needed in web development) general knowledge world wide web on wikipedia the w3c website ...

XPath - MDN Web Docs Glossary: Definitions of Web-related terms
xpath is a query language that can access sections and content in an xml document. learn more technical reference xpath documentation on mdn xpath specification general knowledge official website xpath on wikipedia ...

XQuery - MDN Web Docs Glossary: Definitions of Web-related terms
xquery is a computer language for updating, retrieving, and calculating data in xml databases. ...

Event - MDN Web Docs Glossary: Definitions of Web-related terms
events are assets generated by dom elements, which can be manipulated by a javascript code. learn more technical reference event documentation on mdn general knowledge official website dom events on wikipedia ...

Glyph - MDN Web Docs Glossary: Definitions of Web-related terms
a glyph is a term used in typography for the visual representation of one or more characters. the fonts used by a website contain different sets of glyphs, which represent the characters of the font. learn more general knowledge glyph on wikipedia glyph, character and grapheme on quora ...

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 ...

Assessment: Accessibility troubleshooting - Learn web development
tivating it using the return key? the table the data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. can you add some features to your html to fix this problem? other considerations? can you list two more ideas for improvements that would make the website more accessible? assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for accessibilit...

Advanced styling effects - Learn web development
sed fairly widely by developers. when used in this context, both of the properties would require a -webkit- vendor prefix, even for non-webkit/chrome-based browsers: .text-clip { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } so why have other browsers implemented a -webkit- prefix? 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. so they were forced to implement a few such features. this highlights the danger of using non-standard and/or prefixed css features in your work — not only do they cause browser compatibility issues, but they are also subject to change, so your code coul...

Overflowing content - Learn web development
made too small for the word and so it breaks out of the box. you might wonder why css works in such a messy way, displaying content outside of its intended container. why not hide overflowing content? why not scale the size of the container to fit all the content? wherever possible, css does not hide content. this would cause data loss. the problem with data loss is that you might not notice. website visitors may not notice. if the submit button on a form disappears and no one can complete the form, this could be a big problem! instead, css overflows in visible ways. you are more likely to see there is a problem. at worst, a site visitor will let you know that content is overlapping. if you restrict a box with a width or a height, css trusts you to know what you are doing. css assumes that y...

Flexbox - Learn web development
ost new browsers — firefox, chrome, opera, microsoft edge and ie 11, newer versions of android/ios, etc. 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. flexbox is a bit trickier than some css features. for example, if a browser is missing a css drop shadow, then the site will likely still be usable. not supporting flexbox features however will probably break a layout completely, making it unusable. we discuss strategies for overc...

Grids - Learn web development
amental concepts behind grid layout systems, and how to implement a grid layout using css grid. what is grid layout? a grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. they help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites. a grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters. creating your grid in css having decided on the grid that your design needs, you can use css grid layout to create that grid in css and place items onto it. we will look at the basic features of grid layout first and then explore how to create a simple grid system for yo...

Legacy layout methods - Learn web development
. popular frameworks such as bootstrap and foundation include a grid system. there are also standalone grid systems, either developed using css or using preprocessors. let's take a look at one of these standalone systems as it demonstrates common techniques for working with a grid framework. the grid we will be using is part of skeleton, a simple css framework. to get started visit the skeleton website, and choose "download" to download the zip file. unzip this and copy the skeleton.css and normalize.css files into a new directory. make a copy of our html-skeleton.html file and save it in the same directory as the skeleton and normalize css. include the skeleton and normalize css in the html page, by adding the following to its head: <link href="normalize.css" rel="stylesheet"> <link href="s...

Practical positioning examples - Learn web development
tml), and an idea of how css works (study introduction to css.) objective: to get an idea of the practicalities of positioning a tabbed info-box the first example we'll look at is a classic tabbed info box — a very common feature used when you want to pack a lot of information into a small area. 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. our simple example will look like this once we are finished: note: you can see the finished example running live at info-box.html (source code). check it out to get an idea of what you will be building in this section o...

How CSS is structured - Learn web development
the opposite of a best practice. first, it is the least efficient implementation of css for maintenance. one styling change might require multiple edits within in a single web page. second, inline css also mixes (css) presentational code with html and content, making everything more difficult to read and understand. separating code and content makes maintenance easier for all who work on the the website. there are a few circumstances where inline styles are more common. you might have to resort to using inline styles if your working environment is very restrictive. for example, perhaps your cms only allows you to edit the html body. you may also see a lot of inline styles in html email to achieve compatibility with as many email clients as possible. playing with the css in this article for th...

CSS FAQ - Learn web development
n chapter 6.4.3. what do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do? these properties, called prefixed properties, are extensions to the css standard. they allow use of experimental and non-standard features in browsers without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended. the use of such properties on production websites is not recommended — they have already created a huge web compatibility mess. for example, many developers only using the -webkit- prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature relying on that property would break in non-webkit-based browsers, completely needlessly. this problem got so bad that other browsers started to imple...

Web fonts - Learn web development
tack to specify preferable fonts, followed by web-safe alternatives, followed by the default system font, but this adds overhead in terms of testing to make sure that your designs look ok with each font, etc. web fonts but there is an alternative, which works very well, right back to ie version 6. 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. amazing! the syntax required looks something like this: first of all, you have a @font-face block at the start of the css, which specifies the font file(s) to download: @font-face { font-family: "myfont"; src: url("myfont.woff"); } below this you can then use the font...

How does the Internet work? - Learn web development
uman readable name called a domain name. for example (at the time of writing; ip addresses can change) google.com is the domain name used on top of the ip address 173.194.121.32. so using the domain name is the easiest way for us to reach a computer over the internet. internet and the web as you might notice, when we browse the web with a web browser, we usually use the domain name to reach a website. does that mean the internet and the web are the same thing? it's not that simple. as we saw, the internet is a technical infrastructure which allows billions of computers to be connected all together. among those computers, some computers (called web servers) can send messages intelligible to web browsers. the internet is an infrastructure, whereas the web is a service built on top of the infras...

What is a URL? - Learn web development
parts, some mandatory and others optional. let's see the most important parts using the following url: http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#somewhereinthedocument http is the protocol. the first part of the url indicates which protocol the browser must use. a protocol is a set method for exchanging or transferring data around a computer network. usually for websites it is the http protocol or its secured version, https. the web requires one of these two, but browsers also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols. www.example.com is the domain name. it indicates which web server is being requested. alternatively, it is possible to directly us...

How do you set up a local testing server? - Learn web development
h testing local files some examples won't run if you open them as local files. this can be due to a variety of reasons, the most likely being: they feature asynchronous requests. some browsers (including chrome) will not run async requests (see fetching data from the server) if you just run the example from a local file. this is because of security restrictions (for more on web security, read website security). they feature a server-side language. server-side languages (such as php or python) require a special server to interpret the code and deliver the results. running a simple local http server to get around the problem of async requests, we need to test such examples by running them through a local web server. one of the easiest ways to do this for our purposes is to use python's simp...

Styling web forms - Learn web development
1996, and wasn't supported very well by browsers for a few years after that. browsers relied on the underlying operating system to manage and render form controls. and even with css available to style html, browser vendors have historically been reluctant to make form controls stylable because users were so accustomed to the visual appearance of their respective platforms. but this has changed. website owners want form styles that fit in with their overall site design more than ever, and the web platform has changed to make this more possible. for some form widgets, it is still difficult to rebuild controls to make them stylable, but we can now use css to style many form features, though we do need to take extra care to ensure we don't break usability. not all widgets are created equal when c...

Test your skills: HTML5 controls - Learn web development
w, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. html5 controls 1 first let's explore some of the new html5 input types. 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. html5 controls 2 next, we want you to implement a slider control to allow the user to choose a maximum number of people to invite to their party. implement a basic slider control to go along with ...

Add a hitmap on top of an image - Learn web development
<area shape="rect" coords="10, 5, 20, 15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices. try following links with your keyboard alone. try turning images off. if your image map is wider than about 240px, you’ll need to make further adjustments to make your website responsive. it's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image. if you must use image maps, you may want to look into matt stow's jquery plugin. alternatively, dudley storey demonstrates a way to use svg for an image map effect, along with a subsequent combined svg-raster hack for bitmap images. learn more <img> <map> ...

Use JavaScript within a webpage - Learn web development
is executed once the page is fully loaded'); }); </script> that's convenient when you just need a small bit of javascript, but if you keep javascript in separate files you'll find it easier to focus on your work write self-sufficient html write structured javascript applications use scripting accessibly accessibility is a major issue in any software development. javascript can make your website more accessible if you use it wisely, or it can become a disaster if you use scripting without care. to make javascript work in your favor, it's worth knowing about certain best practices for adding javascript: make all content available as (structured) text. rely on html for your content as much as possible. for example, if you've implemented a nice javascript progress bar, make sure to suppl...

Advanced text formatting - Learn web development
text semantics section would be a great place to start.) in the next article we will look at the html elements you'd use to structure the different parts of an html document. previous overview: introduction to html next in this module getting started with html what’s in the head? 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 ...

Debugging HTML - Learn web development
er. ...

HTML text fundamentals - Learn web development
d text formatting article, later on in the course. ...

Marking up a letter - Learn web development
p someone with a coding problem without seeing their code. ...

Introduction to HTML - Learn web development
nced text formatting there are many other elements in html for formatting text that we didn't get to in the html text fundamentals article. the elements here are less well-known, but still useful to know about. in this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more. 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. debugging html writing html is fine, but what if some...

Structuring the web with HTML - Learn web development
html is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e. just looking at it, consuming the content). ...

How to contribute to the Learning Area on MDN - Learn web development
...

Image gallery - Learn web development
prerequisites: before attempting this assessment you should have already worked through all the articles in this module. objective: to test comprehension of javascript loops, functions, conditionals, and events. ...

JavaScript building blocks - Learn web development
...

Manipulating documents - Learn web development
are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using javascript. you might think that such limitations are a bad thing, but browsers are locked down for good reasons, mostly centering around security. imagine if a web site could get access to your stored passwords or other sensitive information, and log into websites as if it were you? despite the limitations, web apis still give us access to a lot of functionality that enable us to do a great many things with web pages. there are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages: the window is the browser tab that a w...

Useful string methods - Learn web development
test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: strings. 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. this article has given you the basics that you need to know about manipulating strings for now. this should serve you well as you go into more complex topics in the future. next, we're going to look at the last major type of data we need to focus on in the short term — arrays. previous overview: first steps next in this module what is javas...

Working with JSON - Learn web development
is valid for inclusion inside json, not just arrays or objects. so for example, a single string or number would be a valid json object. unlike in javascript code in which object properties may be unquoted, in json only quoted strings may be used as properties. active learning: working through a json example so, let's work through an example to show how we could make use of some json data on a website. getting started to begin with, make local copies of our heroes.html and style.css files. the latter contains some simple css to style our page, while the former contains some very simple body html: <header> </header> <section> </section> plus a <script> element to contain the javascript code we will be writing in this exercise. at the moment it only contains two lines, which grab references...

Web performance resources - Learn web development
below is a quick review of best practices, tools, apis with links to provide more information about each topic. best practices start with learning the critical rendering path of the browser. knowing this will help you understand how to improve the performance of the site. using resource hints such as rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload keep the size of javascript to a minimum. only use as much javascript as needed for the current page. css performance factors use http/2 on your server (or cdn). use a cdn for resources which can reduce load times significantly. compress your resources using gzip, brotli, and zopfli. ...

JavaScript performance - Learn web development
this article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing javascript for web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the effects of javascript on performance optimization, and how a javascript file size is not the only impact on web performance. ...

Deployment and next steps - Learn web development
rigin on gitlab. gitlab uses a built-in tool called gitlab ci/cd to build your site and publish it to the gitlab pages server. the sequence of scripts that gitlab ci/cd runs to accomplish this task is created from a file named .gitlab-ci.yml, which you can create and modify at will. a specific job called pages in the configuration file will make gitlab aware that you are deploying a gitlab pages website. let's have a go at doing this now. create a .gitlab-ci.yml file inside your project's root and give it the following content: image: node:latest pages: stage: deploy script: - npm install - npm run build artifacts: paths: - public only: - master here we are telling gitlab to use an image with the latest version of node to build our app. next we are decl...

Handling common HTML and CSS problems - Learn web development
cond one has a -webkit- prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the webkit engine). the third one has no prefix, and shows the final version of the syntax (included in the css image values and replaced content module level 3 spec, which defines this feature). 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. this is particularly a problem when developers decide to only use say, the -webkit- version of a property — meaning that the site won't work in other browsers. this actually happens so much that other browsers have started to implement -webkit- prefixed versions of various css properties, so they will wo...

Setting up your own test automation environment - Learn web development
ee your test listed; from here you'll be able to see videos, screenshots, and other such data. note: sauce labs' platform configurator is a useful tool for generating capability objects to feed to your driver instances, based on what browser/os you want to test on. note: for more useful details on testing with sauce labs and selenium, check out getting started with selenium for automated website testing, and instant selenium node.js tests. filling in sauce labs test details programmatically you can use the sauce labs api to annotate your test with more details, such as whether it passed, the name of the test, etc. sauce labs doesn't know these details by default! to do this, you need to: install the node sauce labs wrapper using the following command (if you've not already done it...

Command line crash course - Learn web development
in them all in quite as much detail as the previous couple. have a play with them in a test directory you’ve created somewhere so that you don’t accidentally delete anything important, using the example commands below for guidance: mkdir — this creates a new directory inside the current directory you are in, with the name you provide after the command name. for example, mkdir my-awesome-website will make a new directory called my-awesome-website. rmdir — removes the named directory, but only if it’s empty. for example rmdir my-awesome-website will remove the directory we created above. if you want to remove a directory that is not empty (and also remove everything it contains), then you can use the -r option (recursive), but this is dangerous. make sure there is nothing you might n...

Gecko info for Windows accessibility vendors
ies for this node, and the last 2 parameters return 2 arrays corresponding to style property name and style property value. another [in] parameter, usealternativemediaproperties, indicates whether you want style information for the default media type (usually screen), or a set of alternative media types specified in nsisimpledomdocument::set_alternateviewmediatype(mediatypestring) . see the w3c's website for a list of official media type name. unfortunately, at this time the argument usealternateview is ignored. hresult get_computedstyle( /* [in] */ unsigned short maxstyleproperties, /* [in] */ boolean usealternateview, // if true, returns properties for media // as set in nsidomdocument::set_alternateviewmediatypes /* [out] */ bstr *styleproperties, /* [out] */ bstr *stylevalues, /* ...

Information for users
es such as screen readers, screen magnifiers, voice input software and on screen keyboards. planning ahead for accessibility this document is intended to help testers and designers understand and plan what still needs to be added to our ui for full usable accessibility. ...

Links and Resources
lity project - an equally important toolkit on linux apple accessibility - moving forward with os x. other resources trace center - trace center of the university of wisconsin (research on technology for persons with disabilities). home of lars (linux accessibility resource site) at university of toronto. dive into accessibility - another great, easy-to-understand resource on accessible website authoring. color contrast analyzer by juicy studio: an excellent tool for checking if webpages use/have sufficient color contrast, sufficient brightness difference by comparing background and foreground (text) colors. this tool will measure accurately the degree of legibility of a webpage. ...

Accessibility and Mozilla
firefox materialsfirefox 1.5 is a fast, free, standards compliant web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web. in addition to winning major awards such as pc world product of the year, firefox has attracted a huge following among savvy users who simply care enough about their web browsing experience to download a new piece of software. 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. gecko info for windows accessibility vendorsplease contact the mozilla accessibility community.information for assistive technology vendorsboth end users and developers are invit...

Frequently Asked Questions for Lightweight themes
ry, you can access it from the submissions dashboard. from there, you can view your current designs. by clicking on each, you can make changes to each design's settings. what's the maximum file size allowable for my lightweight theme? the theme you upload may not exceed 300 kb for the header or the footer image. couldn't find the answer you're looking for? consider visiting the firefox support website or the themes forum for more help. ...

Add-ons
add-ons allow developers to extend and modify the functionality of firefox. they are written using standard web technologies - javascript, html, and css - plus some dedicated javascript apis. 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. developing extensions in the past, there were several toolsets for developing firefox extensions, but as of november 2017, extensions must be built using webextensions apis. other toolsets, such as overlay add-ons, bootstrapped add-ons, and the add-on sdk, are no longer supported. extensions written using webextensions apis for firefox are designed to be cross-browser ...

Benchmarking
accelerated graphics especially on linux, accelerated graphics can sometimes lead to severe performance problems even if things look ok visually. normally you would want to leave acceleration enabled while profiling, but on linux you may wish to disable accelerated graphics (preferences -> advanced -> general -> use hardware acceleration when available). 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. in about:addons > plugins, set shockwave flash to "never activate". timer precision firefox reduces the precision of the performance apis and other clock and timer apis accessible to web content. they are currently reduce to a multiple of 2ms; which is controlled by the privacy.reducetimerpr...

What to do and what not to do in Bugzilla
ed behavior. the exceptions are bugs in other software which we have to work around and bugs that involve certain core gecko modules. bugs covered by this exception should not be invalidated by anyone other than the module owner or module peer; for bugs involving modules like layout or content, attach a test case to the bug and then cc one of the owners or peers. 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. resolving bugs as fixed resolve a bug as fixed if the bug has been fixed by a checkin into the mozilla mercurial code repos...

Getting documentation updated
...

Multiple Firefox profiles
n mozilla's end-user support site. reasons to have multiple profiles the casual user may want to have different profiles for work and personal use, or different family members. having different profiles would help separate work and personal life, or allow each family member to have his or her own set of bookmarks, settings, and add-ons. web developers might want a secondary profile for testing websites, apps, or other projects on different firefox channels. for example, you might want to have some extensions installed for web development, but not for general-purpose web browsing. while using the nightly channel, you may encounter some add-ons that have become temporarily incompatible with new api changes, until the add-on developer has a chance to update them. you can remove such add-ons from ...

Tracking Protection
oose what to block? content is blocked based on the domain from which it is to be loaded. firefox ships with a list of sites which have been identified as engaging in cross-site tracking of users. when tracking protection is enabled, firefox blocks content from sites in the list. sites that track users are most commonly third-party advertising and analytics sites. what does this mean for your website? most obviously, it means that when tracking protection is enabled: content served from third-party trackers will not be visible to users your site won't be able to use third-party advertising or analytics services that engage in tracking more subtly, if other parts of your site depend on trackers being loaded, then these parts will also be broken when tracking protection is enabled. for e...

Site Identity Button
the site identity button is a feature in firefox that gives users more information about the sites they visit. depending on the configuration of your website, this button may display a number of different icons. if the site identity button on your site shows something you do not expect (for example, an orange warning triangle when you expect a green padlock) you can find out the cause of the problem by looking in the web console in the firefox developer tools: ensure your web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downgraded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but subres...

Firefox Operational Information Database: SQLite
the sqlite manager add-on allows convenient browsing of this information. (install the sqlite mangager add-on, click tools -> sqlite manager. ...

Using the Browser API
on the url bar to stop focusing it, so the keyboard moves off the screen, allowing us to get our full screen view back. there's another event listener added later on in the code that listens for the mozbrowserlocationchange event. 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. browser.addeventlistener('mozbrowserlocationchange', function (e) { urlbar.value = e.detail; }); zooming in and out the browser content can be programmatically zoomed in and out using the htmliframeelement.zoom() method. this takes a single method — a zoom factor — which dictates the percentage to zoom in or out by. ...

HTMLIFrameElement.getStructuredData()
ned on the page loaded in the browser. parameters none. 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"], ... specif...

Following the Android Toasts Tutorial from a JNI Perspective
elds have two types, static and not. we look up the documentation for our field, which is length_short, and we see it is static. so we will not need a group in the third argument of loadclass for fields, we will only need static_fields. fields do not accept arguments, so the "method format" is not used, we simply tell the sig the type of the field, which we find out from the android documentation website. this is what our fields array will look like: static_fields: [ { name: 'length_short', sig: sig.int } ] wrap it all up here is the code for our completed toast class: var toast = jni.loadclass(my_jenv, sig.toast.substr(1, sig.toast.length - 2), { static_methods: [ { name: 'maketext', sig: '(' + sig.context + // context sig.int +...

Localizing without a specialized tool
purposes of this tutorial, we will just convert all letters to uppercase, so that the change is visible in the ui. <!entity cmd_enginemanager.label "manage search engines..."> <!entity searchendcap.label "search"> save the file. .properties files the property file "search.properties" contains the string "add %s". 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. at the second to bottom of the list of search engines that appears, you'll see, "add %s", where %s is replaced by the name of the site. again, to start, make sure you are in /path/to/your/working/directory/l10n-mozilla-1.9.2/x-testin...

Initial setup
access. at that point, you must visit the mozilla committer page and follow the process outlined there. here is an example bug that illustrates the process well. use this bug template when filing your hg account registration bug. add a request about creating your locale's repository to the new locales newsgroup. svn svn is a revision control environment that mozilla uses to house mozilla source websites and their localizations for each official mozilla localization. see this wiki page about how to gain access to svn. the svn for localizers guide will help you learn the most important svn commands for l10n. add a request about creating your locale's repository to the new locales newsgroup. web-based l10n tools we'll talk about these in a little bit. for now, just be aware that should you ch...

QA phase
after all of your hard work localizing we're sure that you not only want to see your work but you want to make sure it's accurate! if you don't have a lot of experience with code, you might even be concerned that you've broken something (oops!). now we'll walk you through performing some quality assurance testing on your work to make sure you're on the right track. if you're localizing mozilla websites, your work will display soon after you've committed it without needing a language pack. since such is the case, this part of the guide may not be entirely applicable to you. feel free to skip ahead to the next section by clicking on the next link at the bottom of the page. in order to see your work on firefox (or another mozilla application), you'll need to have a built language pack to install...

Creating localizable web content
international symbol for information. it can stay this way. use localized screenshots if possible screenshots are important informative graphics, often times explaining how to achieve something in a desktop or web application. as such, they should be perceived as an essential part of the content and should be localized. image 1. bad. 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. image 2. acceptable. 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. ...

Setting up the infrastructure
pe decision (see localization formats for details): html/php .lang gettext (.po) assuming you chose gettext, you'll need to follow the steps below to set up the infrastructure for localizing your web application. requirements: php with gettext support, apache and some unix experience. create a new branch for l10n (optional if starting a new project). create a locale directory in your website (usually something like docroot/locale). copy the shell scripts from /addons/trunk/site/app/locale/ to your locale directory: extract-po.sh will be used to extract all english strings from your application's directories specified in source_dirs, merge the resulting template (*.pot) file with the existing (already containing translations) messages.po files for each locale (if they exist) an...

Mozilla projects on GitHub
github. it also lists some interesting github repositories containing mozilla project code. getting started you can look at code on github without an account. that is the first thing to know. to do more—to contribute to the code, or to fork it and start your own project based on mozilla-related code—you need a github account. to learn more about setting up a github account, visit the github website. most mozilla project code is located in repositories within the mozilla github organization. this is a great place to start looking for any projects not listed below. projects this listing covers the larger-scale and more important mozilla projects on github. it does not include everything since it's hard to keep track of all the smaller projects. look to github for the most complete list of ...

Are We Slim Yet
it used the same infrastructure as about:memory to measure memory usage on a predefined snapshot of alexa top 100 pages known as tp5. since firefox transitioned to using multiple processes by default, we moved awsy into the taskcluster infrastructure. this allowed us to run measurements on all branches and platforms. the results are posted to perfherder where we can track regressions automatically. as new processes are added to firefox we want to make sure their memory usage is also tracked by awsy. ...

Power profiling overview
c, or intel power gadget on windows) for the comparisons. avoid lower-quality measurements, especially activity monitor's "energy impact". try using differential profiling to narrow down the cause. try turning hardware acceleration on or off; e10s on or off; flash on or off. try putting the relevant tab in the foreground vs. in the background. 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. use one of the low-context tools to determine if this is the case (e.g. on mac use powermetrics.) if so, follow that up by using a tool that gives high-context measurements, ...

about:memory
ll open a file dialog that lets you save the memory reports to a file of your choosing. (the filename will have a .json.gz suffix.) you can then attach or upload the file appropriately. the recipients will be able to view the contents of this file within about:memory in their own firefox instance. 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. this will cause a tree-like structure to be generated text within about:memory. this structure is just text, so you can copy and paste some or all of this text into any kind of text buffer. (you don't need to take a screenshot.) this text contains fewer measurements than a memory reports file, but is often good enough to diagnose problems. don't click "measure..

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. if set to true, the data is stored as content preference. 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. false the last used directory for any download (stored in browser.download.lastdir) will be the preselected direc...

dom.event.clipboardevents.enabled
the emitting of the oncopy, oncut and onpaste events are controlled by this preference. type:boolean default value:true exists by default: no application support: gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) status: active; last updated 2012-02-15 introduction: pushed to nightly on 2012-02-14 bugs: bug 542938 values true (default) the oncopy, oncut and onpaste events are enabled for web content. ...

L20n HTML Bindings
sed in translations. in addition to the pre-defined whitelists, any element found in the original source html is allowed in the translation as well. 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://myevilwebsite.com" onclick="alert('pwnd!')" title="back to the homepage">cancel</a>. """> the result will be: <p data-l10n-id="back"> <input value="save" type="submit"> or <a href="/main" class="btn-cancel" title="back to the homepage">cancel</a>. </p> the input element is not on the default whitelist but since it's present in the source html, it is also allowed in the translation. the v...

An overview of NSS Internals
stinguish an ev certificate, cas will embed a policy oid in the certificate, and the browser is expected to verify that a trust chain permits the end entity (ee) certificate to make use of the policy. only the apis of the newer libpkix engine are capable of performing a policy verification. that's a good opportunity to talk about ssl/tls connections to servers in general (not just ev, not just websites). whenever this document mentions ssl, it refers to either ssl or tls. (tls is a newer version of ssl with enhanced features.) when establishing an ssl connection to a server, (at least) a server certificate (and its trust chain) is exchanged from the server to the client (e.g., the browser), and the client verifies that the certificate can be verified (including matching the name of the expe...

Getting Started With NSS
d that describe various aspects of nss. you can start with: the current primary nss documentation page from which we link to other documentation. a general overview of the applications that use nss and the features it provides. a high level introduction to the internals of nss. learn about getting the nss sources, building, and testing. old documentation that is on the archived mozilla.org website. (unfortunately the nss project doesn't have a technical writer at this time, so our documentation is not as organized as we would like it to be. you could contribute by organizing it in a better way.) nss sample code a good place to start learning how to write nss applications are the command line tools that are maintained by the nss developers. you can find them in subdirectory mozilla/secu...

Index
stinguish an ev certificate, cas will embed a policy oid in the certificate, and the browser is expected to verify that a trust chain permits the end entity (ee) certificate to make use of the policy. only the apis of the newer libpkix engine are capable of performing a policy verification. that's a good opportunity to talk about ssl/tls connections to servers in general (not just ev, not just websites). whenever this document mentions ssl, it refers to either ssl or tls. (tls is a newer version of ssl with enhanced features.) when establishing an ssl connection to a server, (at least) a server certificate (and its trust chain) is exchanged from the server to the client (e.g., the browser), and the client verifies that the certificate can be verified (including matching the name of the expe...

NSS 3.16.4 release notes
tificate changes as listed below, and includes a small number of bug fixes. notable changes in nss 3.16.4 the following 1024-bit root ca certificate was restored to allow more time to develop a better transition strategy for affected sites. 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. cn = gte cybertrust global root sha1 fingerprint: 97:81:79:50:d8:1c:96:70:cc:34:d8:09:cf:79:44:31:36:7e:f4:74 in nss 3.16.3, the 1024-bit "entrust.net secure server certification authority" root ca certificate (sha1 fingerprint: 99:a6:9b:e6:1a:fe:88:6b:4d:2b:82:00:7c:b8:54:fc:31:7e:15:39) was removed. in nss 3.16...

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
hest dtls protocol version enabled by default has been increased from dtls 1.0 to dtls 1.2. the default key size used by certutil when creating an rsa key pair has been increased from 1024 bits to 2048 bits. on mac os x, by default the softokn shared library will link with the sqlite library installed by the operating system, if it is version 3.5 or newer. ...

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
72:da:5b:0c:c1:d0:57:f0:36:9b:46 cn = utn - datacorp sgc sha-1 fingerprint: 58:11:9f:0e:12:82:87:ea:50:fd:d9:87:45:6f:4f:78:dc:fa:d6:d4 o = tÜrktrust bilgi İletişim ve bilişim güvenliği hizmetleri a.Ş. ...

NSS 3.28.5 release notes
(the version numbers 2.12 and 2.13 for the root ca list have been skipped.) bugs fixed in nss 3.28.5 bug 1350859 - march 2017 batch of root ca changes. bug 1349705 - implemented domain name constraints ...

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.32 release notes
rtable runtime (nspr) 4.16, or newer. nss 3.32 source distributions are available on ftp.mozilla.org, for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_32_rtm/src/ notable changes in nss 3.32 various minor improvements and correctness fixes. the code signing trust bit was turned off for all, included root certificates. the websites (tls/ssl) trust bit was turned off for the following root certificates. cn = addtrust class 1 ca root sha-256 fingerprint: 8c:72:09:27:9a:c0:4e:27:5e:16:d0:7f:d3:b7:75:e8:01:54:b5:96:80:46:e3:1f:52:dd:25:76:63:24:e9:a7 cn = swisscom root ca 2 sha-256 fingerprint: f0:9b:12:2c:71:14:f4:a0:9b:d4:ea:4f:4a:99:d5:58:b4:6e:4c:25:cd:81:14:0d:29:c0:56:13:91:4c:38:41 ...

NSS 3.35 release notes
:af:68:8e:90:a1:c7:0f:55:6c:fd:6b:60:25:db:ea:10:41:6d:7e:b6:83:1f:8c:40 subject cn = verisign class 3 secure server ca - g2 sha-256 fingerprint: 0a:41:51:d5:e5:8b:84:b8:ac:e5:3a:5c:12:12:2a:c9:59:cd:69:91:fb:b3:8e:99:b5:76:c0:ab:da:c3:58:14 this intermediate cert had been directly included to help with transition from 1024-bit roots per bug #1045189. ...

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
adobe flash player disabled (or set to "click-to-enable") for performance or security reasons. there might be a time where users want to experience your content but flash is no longer supported by adobe. to emphasize a point: the current behavior is that shumway works on any swf file unless (or until) the adobe flash player plugin is activated. shumway is made with the same constraints as any website. users who disable flash because of security or performance concerns can still see content through shumway because it cannot be forced to behave worse than javascript (and webgl, etc.) allows. users with shumway enabled will still see your flash content, if compatible with shumway, even if flash player is installed but blocked. testing and what to do in case of trouble the first step is to dire...

JS::CompileOptions
methods some methods of js::owningcompileoptions and js::compileoptions return the instance itself to allow method chain. methods of js::readonlycompileoptions method description bool mutederrors() const determines if errors are muted. the web platform allows scripts to be loaded from arbitrary cross-origin sources. 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. to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the global for which it is loaded. callers should set this flag for cros...

JSErrorReport
l, the error is local to the script in the current html page. lineno unsigned line number in the source that caused the error. column unsigned zero-based column index in line in the source that caused the error. ismuted bool the web platform allows scripts to be loaded from arbitrary cross-origin sources. 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. to counter this attack, html5 specifies that script errors should be sanitized ("muted") when the script is not same-origin with the global for which it is loaded. callers should set this flag for cross...

Handling Mozilla Security Bugs
this information) and will also send a copy of this message to an appropriate moderated mailing list and/or newsgroup (e.g., netscape.public.mozilla.announce and/or some other newsgroup/list established specifically for this purpose). 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. the original reporter of a security bug may decide when that bug report will be made public. disclosure is done by clearing the bug's "security-sensitive" flag, after which the bug will revert to being an ordinary bug. we believe that investing this power in the bug reporter simply acknowledge...

Using the Places livemark service
ating the livemark. 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. var siteuri = livemarkservice.getsiteuri(newlvmkid); //newlvmkid = see "create a new livemark" for more detail. getsiteuri() returns null if there is no uri for the specified livemark. nsilivemarkservice.setsiteuri() sets the uri of the website associated with a livemark container. livemarkservice.setsiteuri(newlvmkid, uri("http://newuri.com/"...

XPCOM Stream Guide
provide a way to read or write data to some object. in basic c++ programming for a console application, we usually talk about streams to access files, or to interact with the user. mozilla's use of streams is more complex. on the one hand, we don't interact with the user through streams. 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). we even have streams that take input from other streams and transform the data within them to something more useful. primitive streams there are streams for several different types of data storage. each of these implements nsiinputstream. primitive input streams type native class contra...

Index
gger interfaces, interfaces:scriptable, xpcom, xpcom interface reference retained for backwards compatibility. 179 amiwebinstallinfo add-on manager, interfaces, interfaces:scriptable, xpcom, xpcom interface reference starts all installs. 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. 181 amiwebinstallprompt interfaces, interfaces:scriptable, xpcom, xpcom interface reference gets a confirmation that the user wants to start the installs. 182 amiwebinstaller extension manager, interfaces, interfaces:scriptable, reference, xpcom interface reference installs an array of add-ons...

amIWebInstallPrompt
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void confirm(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow. methods confirm() gets a confirmation that the user wants to start the installs. ...

nsIContentPrefService
dom/interfaces/base/nsicontentprefservice.idlscriptable please add a summary to this article. last changed in gecko 2 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) inherits from: nsisupports implemented by: @mozilla.org/content-pref/service;1. ...

nsIProtocolHandler
only be allowed if those origins should have access to the local file system. it's up to the application to decide what origins should have such access. protocols like file that point to local data should set this flag. uri_loadable_by_subsumers 1<<14 the uris for this protocol can be loaded only by callers with a principal that subsumes this uri. for example, privileged code and websites that are same origin as this uri. uri_non_persistable 1<<10 loading channels from this protocol has side-effects that make it unsuitable for saving to a local file. uri_does_not_return_data 1<<11 channels using this protocol never call ondataavailable() on the listener passed to asyncopen(), and therefore do not return any usable data. uri_is_lo...

nsIURLFormatter
toolkit/components/urlformatter/public/nsiurlformatter.idlscriptable this interface exposes methods to substitute variables in url formats. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) variable names can contain 'a-z' letters and '_' characters. 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. the set of known variables is predefined. if a variable is unknown, it is left unchanged and a non-fatal error is reported. ast...

Xray vision
e that along with the c++ core, implements the browser itself is called chrome code and runs using system privileges. if chrome-privileged code is compromised, the attacker can take over the user's computer. javascript loaded from normal web pages is called content code. 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. as well as these two levels of privilege, chrome code can create sandboxes. the security principal defined for the sandbox determines its privilege level. if an expanded principal is used, the sandbox is granted certain privileges over content code and is protected from direct access by content code. the security machinery in gecko ensures that there's asymmetric access betwe...

Index
, the cached compose window is on by default. to test it 17 content tabs thunderbird content tabs enable thunderbird to display remote content in a tab, which users can browse in (mostly) the same way as with a browser. for example, invoking thunderbird's help | what's new menu option opens a tab that displays web content. the thunderbird team can update this content via the website at any time. 18 cookies in thunderbird cookies, guide, thunderbird in versions of thunderbird prior to 3 the cookie policy was very restrictive (to rss only). thunderbird 3 uses the gecko cookie policy with some changes. 19 creating a gloda message query thunderbird 3, thunderbird this page describes how to programmatically create a message query using gl...

Building a Thunderbird extension 3: install manifest
</em:targetapplication> </description> </rdf> the following items (shown in bold) should be customized for your application: <em:id>myfirstext@jen.zed</em:id>: this is the id of the extension. the first portion is the short name of the extension and must be in lowercase; the last portion is a two-part period-delimited value such as your first and last name or the top-level domain of your website. while this value is in email address format, it is not an email address. it should, however, be a unique value so that it does not conflict with other extensions. <em:name>my first extension</em:name>: the extension name is displayed in the thunderbird add-on manager. <em:version>1.0</em:version>: this is the version number of your extension. it must be updated each time you release a new ver...

Theme Packaging
ll.rdf properties your install.rdf file must have the following properties. 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. sample install.rdf file <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this ex...

js-ctypes
see bug 505907. other work made possible by js-ctypes is jni, this is elaborated on in the jni.jsm section and not the js-ctypes section due to the jsm abstracting away all of the js-ctypes. unlike binary xpcom components, it allows developers to ship a single binary for use with multiple versions of firefox. note: js-ctypes is only available from chrome code; that is, ctypes is not available to websites, only application and extension code. documentation if you are brand new to js-ctypes, and have no idea about it, the pages you should read first is - ctypes.open followed by standard os libraries. using js-ctypes ctypes.open custom native file standard os libraries finding window handles ...

Mozilla
firefox here you can learn about how to contribute to the firefox project and you will also find links to information about the construction of firefox add-ons, using the developer tools in firefox, and other topics. 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. the sqlite manager add-on allows convenient browsing of this information. (install the sqlite mangager add-on, click tools -> sqlite manager. in the manager, select the database you want to explore in the '(select profile database)' pulldown, click 'go', select one of the tables...

Plugin Roadmap for Firefox - Plugins
in order to improve security and performance, mozilla will maintain a list of sites which cannot use any plugins. september 2017 starting with firefox 56 in september 2017, firefox for android will remove all support for plugins (bug 1381916). 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. 2020 in december 2020, flash support will be completely removed from consumer versions of firefox. adobe will stop shipping security updates for flash at the end of 2020. see also mozilla firefox october 2015 - npapi plugins in firefox july 2016 - reducing adobe flash usage in firefox july 2017 - firefox roadmap for flash end-of-life adobe flash november 2015 - flash, html5 and op...

DOM Inspector - Firefox Developer Tools
from thunderbird add-ons. or, build thunderbird yourself with the following options: ac_add_options --enable-extensions="default inspector" ac_add_options --enable-inspector-apis mozilla suite and seamonkey select tools > web development > dom inspector. you can install the sidebar panel via edit > preferences > advanced > dom inspector, then simply open up the inspector panel and visit a website. report a bug in dom inspector use the conveniently named "dom inspector" component in bugzilla. to find out who knows dom inspector code and where it lives, see the dom inspector module listing. ...

Frame rate - Firefox Developer Tools
frame rate is a measure of a website's responsiveness. a low or inconsistent frame rate can make a site appear unresponsive or janky, making for a bad user experience. a frame rate of 60fps is the target for smooth performance, giving you a time budget of 16.7ms for all the updates needed in response to some event. the frame rate graph in the performance tool shows you the frame rate over the course of a recording. it gives you a quick indication of where your site might be having problems, enabling you to use the other tools for a more in-depth analysis. frame rate and responsiveness frame rate is the rate at which a video device can produce images (or frames). it's most familiar from film and gaming, but is now widely used as a performance measure for websites and web apps. in we...

Intensive JavaScript - Firefox Developer Tools
this article we'll take an example site whose long-running javascript causes responsiveness problems, and apply two different approaches to fixing them. the first is to split long-running functions into pieces and use requestanimationframe to schedule each piece, and the second is to run the whole function in a separate thread using a web worker. 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. a button to run the javascript, labeled "do po...

Settings - Firefox Developer Tools
vice workers are not affected by this option. note that this option was called "disable cache" in firefox versions previous to 49, but it was renamed to make it clearer that this affects the http cache, and not service workers/the cache api. disable javascript reload the current tab with javascript disabled. enable service workers over http enable service worker registrations from insecure websites. enable browser chrome and add-on debugging toolboxes enable you to use developer tools in the context of the browser itself, and not only web content. enable remote debugging enable the developer tools to debug remote firefox instances. enable worker debugging enable a panel within the debugger to debug workers. note: this option got removed from the ui in firefox 56, because this versio...

Cookies - Firefox Developer Tools
the risk of csrf and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same registrable domain. last accessed — date and time when the cookie was last read. created — date and time when the cookie was created. hostonly — is this cookie a domain cookie? that is, the domain value matches exactly the domain of the current website. note: some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/hide the columns. you can edit cookies by double-clicking inside cells in the table widget and editing the values they contain, and add new cookies by clicking the "plus" (+) button and then editing the resulting new row t...

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...

Validators - Firefox Developer Tools
e. html tidy html tidy is a tool that can be used to report errors in an html page and to format web pages for better reading. (some authoring software, such as html-kit, builds in html tidy which makes validation quick and easy.) html validator pro this is an automated html5 checker using the same validator as the w3c. provide a starting url and the tool will find and validate all pages in a website. accessibility services lynx viewer checks a web page using lynx visualization and allows validation of accessibility features original document information last updated date: august 16th, 2002 copyright © 2001-2003 netscape. ...

Console messages - Firefox Developer Tools
the page. reflows occur when a change has happened to a page that the browser thinks affects the layout. many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the dom in javascript. because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. by logging reflow events the web console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from javascript, which code triggered them. reflow events are logged as "reflow" messages, as distinct from css errors or warnings. by default, they are disabled. you can enable them by clicking ...

AbstractRange - Web APIs
dom figuring out what your global offset refers to, the user agent (browser) can instead go directly to the node indicated by the starting position and start from there, working its way forward until it reaches the given offset into the ending node. ...

CanvasRenderingContext2D.drawWindow() - Web APIs
the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. by specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower). 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. with this method, it is possible to fill a hidden iframe with arbitrary content (e.g., css-styled html text, or svg) and draw it into a canvas. it will be scaled, rotated and so on according to the current transformation. ted mielczarek's tab preview extension uses this technique in chrome to provide thumbnails...

Hit regions and accessibility - Web APIs
the following guidelines can help to make it more accessible. fallback content the content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. ...

Optimizing canvas - Web APIs
this article provides suggestions for optimizing your use of the canvas element to ensure that your graphics perform well. performance tips the following is a collection of tips to improve canvas performance. pre-render similar primitives or repeating objects on an offscreen canvas if you find yourself repeating some of the same drawing operations on each animation frame, consider offloading them to an offscreen canvas. ...

CloseEvent - Web APIs
stener indicated by the websocket object's onclose attribute. constructor closeevent() creates a new closeevent. properties this interface also inherits properties from its parent, event. closeevent.code read only returns an unsigned short containing the close code sent by the server. the following values are permitted status codes. the following definitions are sourced from the iana website [ref]. note that the 1xxx codes are only websocket-internal and not for the same meaning by the transported data (like when the application-layer protocol is invalid). the only permitted codes to be specified in firefox are 1000 and 3000 to 4999 [source, bug]. status code name description 0–999 reserved and not used. 1000 normal closure ...

Content Index API - Web APIs
rs to register their offline enabled content with the browser. concepts and usage as it stands, offline web content is not easily discoverable by users. content indexing allows developers to tell the browser about their specific offline content. this allows users to discover and view what is available, whilst giving developers the ability to add and manage this content. examples could be a news website prefetching the latest articles in the background, or a content streaming app registering downloaded content. the content index api is an extension to service workers, which allows developers to add urls and metadata of already cached pages, under the scope of the current service worker. the browser can then use these entries to display offline reading to a user. as a developer you can also disp...

CredentialsContainer.get() - Web APIs
e: providers: an array of domstring instances of identity providers to search for. protocols an array of domstring instances of federation protocols to search for. publickey: an publickeycredentialrequestoptions object containing requirements for returned webauthn credentials. mediation: a string indicating whether the user will be required to log on for every visit to the website. valid values are "silent", "optional", or "required". unmediated: a boolean indicating the returned credential instance should not require user mediation. signal: an instance of abortsignal that can indicate that an ongoing get() operation should be halted. an aborted operation may complete normally (generally if the abort was received after the operation finished) or reject with an "abort...

CredentialsContainer.preventSilentAccess() - Web APIs
the preventsilentaccess() method of the credentialscontainer interface sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty promise. 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. mediation varies by origin, and is an added check point of browser stored credentials, informing a user of an account login status. this method is typically called after a user signs out of a website, ensuring this user's login information is not automatically passed on the next site visit. earlier versions of the spec called this method requireusermediation(). see browser compatibility for support details. syntax var promise = credentialscontai...

CredentialsContainer - Web APIs
. credentialscontainer.get()secure context returns a promise that resolves with the credential instance that matches the provided parameters. credentialscontainer.preventsilentaccess()secure context sets a flag that specifies whether automatic log in is allowed for future visits to the current origin, then returns an empty promise. 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. earlier versions of the spec called this method requireusermediation(). see browser compatibility for support details. credentialscontainer.store()secure context stores a set of credentials for a user, inside a provided credential instance and returns that instance in a promise. examples // tbd specifications ...

Document.requestStorageAccess() - Web APIs
origin, the access request is automatically given an ephemeral storage access grant, which will go away when the page is reloaded. the user is never shown a prompt in this case, and calling requeststorageaccess() won’t have any side effects besides changing the value returned by document.hasstorageaccess(). debugging the storage access grant threshold may make it more difficult to test your website under the condition where firefox prompts the user for access. to make testing easier, we have added two preferences in about:config that control prompting upon requeststorageaccess() calls: dom.storage_access.auto_grants can be set to false to disable the automatic granting of ephemeral storage access grants. all calls to requeststorageaccess() by origins classified as trackers will trigger a...

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
if (element.prototype.matches.call(el, s)) return el; el = el.parentelement || el.parentnode; } while (el !== null && el.nodetype === 1); return null; }; } however, if you really do require ie 8 support, then the following polyfill will do the job very slowly, but eventually. however, it will only support css 2.1 selectors in ie 8, and it can cause severe lag spikes in production websites. if (window.element && !element.prototype.closest) { element.prototype.closest = function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i, el = this; do { i = matches.length; while (--i >= 0 && matches.item(i) !== el) {}; } while ((i < 0) && (el = el.parentelement)); return el; }; } specifications specif...

FederatedCredential - Web APIs
openid connect is an example of a federated identity provider framework. in browsers that support it, an instance of this interface may be passed in the credential member of the init object for global fetch. constructor federatedcredential() creates a new federatedcredential object. ...

Using files from web applications - Web APIs
r; const files = dt.files; handlefiles(files); } here, we retrieve the datatransfer field from the event, pull the file list out of it, and then pass that to handlefiles(). from this point on, handling the files is the same whether the user used the input element or drag and drop. 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. you can establish your input element or drop zone as discussed previously and have them call a function such as the handlefiles() function below. function handlefiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (!file.type.startswith('image/')){ continue ...

FileSystemDirectoryEntry - Web APIs
full support full support no support no supportexperimental. expect behavior to change in the future.experimental. expect behavior to change in the future.non-standard. expect poor cross-browser support.non-standard. expect poor cross-browser support.deprecated. not for use in new websites.deprecated. not for use in new websites.see implementation notes.see implementation notes.uses a non-standard name.uses a non-standard name.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use. ...

FileSystemEntry - Web APIs
yeslegend full support full support no support no supportexperimental. expect behavior to change in the future.experimental. expect behavior to change in the future.non-standard. expect poor cross-browser support.non-standard. expect poor cross-browser support.deprecated. not for use in new websites.deprecated. not for use in new websites.uses a non-standard name.uses a non-standard name.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use. ...

Guide to the Fullscreen API - Web APIs
pport 10.0 full support 1.0alternate name alternate name uses the non-standard name: webkitisfullscreenlegend full support full support no support no supportdeprecated. 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.uses a non-standard name.uses a non-standard name. document.fullscreenenabled the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull req...

Fullscreen API - Web APIs
pport 10.0 full support 1.0alternate name alternate name uses the non-standard name: webkitisfullscreenlegend full support full support no support no supportdeprecated. 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.uses a non-standard name.uses a non-standard name. document.fullscreenelement the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull req...

GlobalEventHandlers.ondragexit - Web APIs
syntax var dragexithandler = targetelement.ondragexit; return value dragexithandler the dragexit event handler for element targetelement. example this example demonstrates using the ondragexit attribute handler to set an element's dragexit event handler. ...

Ajax navigation example - Web APIs
to see how it works, please create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ): note: for fully integrating the <form> elements within this mechanism, please take a look at the paragraph submitting forms and uploading files. first_page.php: <?php $page_title = "first page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype html> <html> <head> <?php include "include/header.php"; echo "<title>" . $page_title . ...

Basic concepts - Web APIs
u have to write code that synchronizes a client-side indexeddb database with a server-side database. full text searching. the api does not have an equivalent of the like operator in sql. in addition, be aware that browsers can wipe out the database, such as in the following conditions: the user requests a wipe out. many browsers have settings that let users wipe all data stored for a given website, including cookies, bookmarks, stored passwords, and indexeddb data. the browser is in private browsing mode. some browsers, have "private browsing" (firefox) or "incognito" (chrome) modes. at the end of the session, the browser wipes out the database. the disk or quota limit has been reached. the data is corrupt. an incompatible change is made to the feature. the exact circumstances and br...

Using IndexedDB - Web APIs
error events. the most likely problem is that the user decided not to give your web app permission to create a database. one of the main design goals of indexeddb is to allow large amounts of data to be stored for offline use. (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. the user could choose to allow or deny access. also, indexeddb storage in browsers' privacy modes only lasts in-memory until the incognito session is closed (private browsing mode for firefox and incognito mode for chrome, but in firefox this is not implemented...

install - Web APIs
int install(array xpilist [, function callbackfunc ] ) parameters the install method has the following parameters: xpilist an array of files to be installed (see example below). callbackfunc an optional callback function invoked when the installation is complete (see example below). firefox 3 note in firefox 3 the callback is no longer invoked unless the website performing the installation is whitelisted. returns install returns true if the function succeeded and false if it did not, but these values are not always reliable as a determinant of the success of the operation. to surface detail about the status of the installation, use the optional callback function and its status parameter, as in the example below. description in the example below, a ...

Media Capabilities API - Web APIs
orted color gamut, dynamic range abilities, and real-time feedback about the playback. to test support, smoothness and power efficiency of a video or audio file, you define the media configuration you want to test, and then pass the audio or video configuration as the parameter of the mediacapabilities interface's encodinginfo() and decodinginfo() methods. 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. media capabilities interfaces mediacapabilities provides information about the decoding abilities of the device, system and browser based on codecs, profile, resolution, and bitrates. the information can be used to serve optimal media str...

NavigatorID.appVersion - Web APIs
th these properties. the window.navigator.appversion, window.navigator.appname and window.navigator.useragent properties have been used in "browser sniffing" code: scripts that attempt to find out what kind of browser you are using and adjust pages accordingly. 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. specifications specification status comment html living standardthe definition of 'navigatorid.appversion' in that specification. living standard initial definition ...

NotificationAction - Web APIs
icon read only the url of the image used to represent the notification when there is not enough space to display the notification itself. example notifications can fire notificationclick events on the serviceworkerglobalscope. 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. the user can also click the main body of the notification to open their inbox instead. self.registration.shownotification("new mail from alice", { actions: [ { action: 'archive', title: 'archive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'archive') { // archive action was clicked arc...

PaymentRequest.PaymentRequest() - Web APIs
paymentrequest(methoddata, details, [options]); parameters methoddata contains an array of identifiers for the payment methods the merchant web site accepts and any associated payment method specific data. 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. starting with more recent browsers, this parameter is more generic than credit cards, it is a single domstring, and the meaning of the data parameter changes with the supportedmethods. for example, the basic card payment method is selected by specifying the string basic-card here. data a json-serializable object that provides optional information that might be needed by the supported...

Using the Payment Request API - Web APIs
mes(), buildshoppingcartdetails()); request.canmakepayment().then(function(canmakeafastpayment) { if (canmakeafastpayment) { checkoutbutton.innertext = "fast checkout with w3c"; } else { checkoutbutton.innertext = "setup w3c checkout"; } }).catch(function(error) { // the user may have turned off the querying functionality in their // privacy settings. the website does not know whether they can make // a fast payment, so pick a generic title. checkoutbutton.innertext = "checkout with w3c"; }); } note: see our customizing the payment button demo for the full code. checking before all prices are known if the checkout flow needs to know whether paymentrequest.canmakepayment() will return true even before all line items and their prices are kno...

Selection.selectAllChildren() - Web APIs
the selection.selectallchildren() method adds all the children of the specified node to the selection. previous selection is lost. syntax sel.selectallchildren(parentnode) parameters parentnode all children of parentnode will be selected. parentnode itself is not part of the selection. ...

Using server-sent events - Web APIs
for that message. each field is represented by the field name, followed by a colon, followed by the text data for that field's value. fields each message received has some combination of the following fields, one per line: event a string identifying the type of event described. 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. the onmessage handler is called if no event name is specified for a message. data the data field for the message. when the eventsource receives multiple consecutive lines that begin with data:, it concatenates them, inserting a newline character between each one. trailing newlines are removed. id the event id to set the eve...

SharedWorkerGlobalScope.applicationCache - Web APIs
the applicationcache read-only property of the sharedworkerglobalscope interface returns the applicationcache object for the worker (see using the application cache). syntax var nameobj = self.applicationcache; value an applicationcache. ...

Using the Storage Access API - Web APIs
true for document.cookie access, as browsers will often return an empty cookie jar when third-party cookies are blocked. accessing a user's cookies in an embedded cross-origin iframe in this example we show how an embedded cross-origin <iframe> can access a user’s cookies under a storage access policy that blocks third-party cookies. 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"> ... </iframe> now on to ...

TextRange - Web APIs
e standard range object to process the text fragment. ie9 and later also gave up the document.selection object and switched to the standard interface (although textrange has been reserved, it has lost its function in most cases). it's easy to get confused. 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. therefore, the best way is to deal with both at the same time, that is, try to use textrange mode when the standard interface is not supported, but do not regard it as the only choice. ...

Using Touch Events - Web APIs
mouse handling code. the implementation status of pointer events in browsers is relatively high with chrome, firefox, ie11 and edge having complete implementations. 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. lauke) community touch events community group mail list w3c #touchevents irc channel related topics and resources pointer events standard ...

Using the Web Audio API - Web APIs
.connect(gainnode).connect(panner).connect(audiocontext.destination); the only thing left to do is give the app a try: check out the final demo here on codepen. summary great! we have a boombox that plays our 'tape', and we can adjust the volume and stereo panning, giving us a fairly basic working audio graph. this makes up quite a few basics that you would need to start to add audio to your website or web app. there's a lot more functionality to the web audio api, but once you've grasped the concept of nodes and putting your audio graph together, we can move on to looking at more complex functionality. more examples there are other examples available to learn more about the web audio api. the voice-change-o-matic is a fun voice manipulator and sound visualization web app that allows you ...

Web Audio API - Web APIs
theory of the web audio api in a lot more detail in our article basic concepts behind web audio api. web audio api target audience the web audio api can seem intimidating to those that aren't familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer. it can be used to simply incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms. however, it can also be used to create advanced interactive instruments. with that in mind, it is suitable for both developers and musicians alike. we have a simple introductory tutorial for those that are familiar with programming but need a good introduction to some of the terms and structure of the a...

Window.applicationCache - Web APIs
important: application cache is deprecated as of firefox 44, and is no longer available in insecure contexts from firefox 60 onwards (bug 1354175, currently nightly/beta only). don't use it to offline websites — consider using service workers instead. returns a reference to the application cache object for the window. syntax cache = window.applicationcache parameters cache is an object reference to an offlineresourcelist. specification html 5wd ...

Window: online event - Web APIs
the online event of the window interface is fired when the browser has gained access to the network and the value of navigator.online switches to true. 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. bubbles no cancelable no interface event event handler property ononline examples // addeventlistener version window.addeventlistener('online', (event) => { console.log("you are now connected to the network."); }); // ononline version window.ononline = (event) => { console.log("you are now connected to the network."); }; specifications specification status html living standardthe defin...

Window.resizeBy() - Web APIs
s to grow the window horizontally. ydelta is the number of pixels to grow the window vertically. example // shrink the window window.resizeby(-200, -200); notes this method resizes the window relative to its current size. to resize the window in absolute terms, use window.resizeto(). 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. see the compatability table for details on the change. even if you create window by window.open() it is not resizable by default. to make the window resizable, you must open it with the "resizable" feature. // create resizable window myexternalwindow = window.ope...

msWriteProfilerMark - Web APIs
windows xp, this method sends an event to an event tracing session with traceevent; for systems after windows xp, this method writes an event with eventwrite. the event includes a pointer to a window object, current markup, and the event name passed as bstrprofilermarkname. the bstrprofilermarkname property has a 32-character limit when called from script. this method is useful to profile real website performance by using the operating system metrics as a baseline. example if (mswriteprofilermark) { mswriteprofilermark("mark1"); } see also microsoft api extensions ...

ARIA live regions - Accessibility
any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. the screen reader will speak changes whenever the user is idle. for regions which are not important, or would be annoying because of rapid updates or other reasons, silence them with aria-live="off". dropdown box updates useful onscreen information a website specializing in providing information about planets provides a dropdown box. when a planet is selected from the dropdown, a region on the page is updated with information about the selected planet. html <fieldset> <legend>planet information</legend> <label for="planetsselect">planet:</label> <select id="planetsselect" aria-controls="planetinfo"> <option value="">select a planet&hellip...

Using the log role - Accessibility
e 2: snippet from an example application this snippet creates the chat log in an ajax chat application. <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". with an area that has scrolling text, such as a stock ticker, the marquee role should be used instead. aria attributes used log related aria techniques marquee role compatibility tbd: add support information for common ua and at product combina...

ARIA: timer role - Accessibility
or of the timer must take full responsibility for not letting users get stuck in a focus limbo or trap focus inside something the user cannot exit of. all aspects of interaction, including returning to the regular web content on other parts of the page, must be handled. use wisely, and cautiously! 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/). as an illustration of aria-atomic, consider a site with a simple clock, showing hours and minutes. the clock is updated each minute, with the new remaining time simply overwriting the current content. <div id="clock" role="timer" aria-live="off">20</div> <button onclick="starttimer('clock')">start</button> /* basic ja...

ARIA: article role - Accessibility
it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page. <div role="article"> <h2>heading of the segment</h2> <p>paragraph for the segment.</p> <p>another paragraph.</p> ... controls to interact with the article, share it, etc. ... </div> <div role="article"> ... </div> this example shows two articles side by side on one page that could be structured similarly and are related. instead of a div with an article role, use the <article> element. ...

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
perable states that user interface components and navigation must be operable. note: to read the w3c definitions for operable and its guidelines and success criteria, see principle 2: operable — user interface components and navigation must be operable. 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. mouse), so that users that rely on keyboard controls can access them. success criteria how to conform to the criteria practical resource 2.1.1 keyboard (a) all functionality should be accessible using keyboard controls, unless it cannot be done using the keyboard (e.g. freehand drawing). built-...

Text labels and names - Accessibility
there are a number of different types of problems in this category, found in different contexts, and each has its own solution. the different problems and solutions are discussed in the sections below. use alt attribute to label area elements that have the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to. ...

Understanding the Web Content Accessibility Guidelines - Accessibility
however, we are not lawyers, and none of this constitutes legal advice. if you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer. what is accessibility? and particularity the accessibility guidelines and th...

src - CSS: Cascading Style Sheets
the src css descriptor of the @font-face rule specifies the resource containing font data. it is required for the @font-face rule to be valid. ...

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in the guide to box alignment and grids, i demonstrated how auto margins work in a grid area. using an auto margin to push one item away from the others is a common flexbox trick too, however this also ties th...

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
itten in the current writing mode, inline-end is the final column line of our grid. when we specify our grid area using the grid-area property we first define both start lines block-start and inline-start, then both end lines block-end and inline-end. this seems unusual at first as we are used to the physical properties of top, right, bottom and left but makes more sense if you start to think of websites as being multi-directional in writing mode. counting backwards we can also count backwards from the block and inline end of the grid, for english that would be the right hand column line and final row line. these lines can be addressed as -1, and you can count back from there – so the penultimate line is -2. it is worth noting that the final line is the final line of the explicit grid, the g...

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
umn flexible grid system, and also a product listing using auto-placement. as you can see from this set of examples, there is often more than one way to achieve the result you want with grid layout. choose the method you find most helpful for the problems that you are solving and the designs that you need to implement. a responsive layout with 1 to 3 fluid columns using grid-template-areas many websites are a variation of this type of layout, with content, sidebars, a header and a footer. in a responsive design, you may want to display the layout as a single column, adding a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens. i am going to create this layout using the named template areas that we learned about in the guide grid template areas. my mark-...

Introducing the CSS Cascade - CSS: Cascading Style Sheets
erties values to a known state before beginning to make alterations to suit their specific needs. author stylesheets author stylesheets are the most common type of style sheet. these are style sheets that define styles as part of the design of a given web page or site. the author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme. user stylesheets the user (or reader) of the web site can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user's wishes. cascading order the cascading algorithm determines how to find the value to apply for each property for each document element. it first filters all the rules from the different sources to k...

Breadcrumb Navigation - CSS: Cascading Style Sheets
requirements the items typically display inline with a separator to indicate a hierarchy between individual pages. recipe download this example note: the example above uses two selectors to insert content before every li except the first one. this could also be achieved using one selector only: .breadcrumb li:not(:first-child)::before { content: "→"; } this solution uses a more complex selector, but requires less rules. feel free to choose the solution that you prefer. ...

Contribute a recipe - CSS: Cascading Style Sheets
...

Using Media Queries for Accessibility - CSS: Cascading Style Sheets
reduced motion blinking and flashing animation can be problematic for people with cognitive concerns such as attention deficit hyperactivity disorder (adhd). additionally, certain kinds of motion can be a trigger for vestibular disorders, epilepsy, and migraine and scotopic sensitivity. also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers. syntax no-preference indicates that the user has made no preference known to the system. ...

Using media queries - CSS: Cascading Style Sheets
e. , (comma) commas are used to combine multiple media queries into a single rule. each query in a comma-separated list is treated separately from the others. thus, if any of the queries in a list is true, the entire media statement returns true. in other words, lists behave like a logical or operator. targeting media types media types describe the general category of a given device. although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screenreaders. for example, this css targets printers: @media print { ... } you can also target multiple devices. for instance, this @media rule uses two media queries to target both screen and print devices: @media screen, print { ... } see media types for a ...

Media queries - CSS: Cascading Style Sheets
y expressions. testing media queries programmatically describes how to use media queries in your javascript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser). using media queries for accessibility learn how media queries can help users understand your website better. specifications specification status comment media queries level 5 editor's draft css conditional rules module level 3 candidate recommendation media queries level 4 candidate recommendation media queries recommendation css level 2 (revision 1) recommendation initial definition ...

Microsoft CSS extensions - CSS: Cascading Style Sheets
microsoft applications such as edge and internet explorer support a number of special microsoft extensions to css. these extensions are prefixed with -ms-. microsoft-only properties (avoid using on websites) note: these properties will only work in microsoft applications, and are not on a standards track. -ms-accelerator -ms-block-progression -ms-content-zoom-chaining -ms-content-zooming -ms-content-zoom-limit -ms-content-zoom-limit-max -ms-content-zoom-limit-min -ms-content-zoom-snap -ms-content-zoom-snap-points -ms-content-zoom-snap-type -ms-filter -ms-flow-from -ms-flow-into -ms-high-contrast-adjust -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
some of them apply only to xul elements. ...

Privacy and the :visited selector - CSS: Cascading Style Sheets
this was done through window.getcomputedstyle and other techniques. this process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity. to mitigate this problem, browsers have limited the amount of information that can be obtained from visited links. ...

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
custom properties (sometimes referred to as css variables or cascading variables) are entities defined by css authors that contain specific values to be reused throughout a document. they are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);). complex websites have very large amounts of css, often with a lot of repeated values. for example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. custom properties allow a value to be stored in one place, then referenced in multiple other places. an additional benefit is semantic identifiers. for example, --main-text-color is easier to understand than #00ff00, especially if this same col...

WebKit CSS extensions - CSS: Cascading Style Sheets
these properties will only work in webkit applications. ...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
ance property was used in xul stylesheets to design custom widgets with platform-appropriate styling. it was also used in the xbl implementations of the widgets that ship with the mozilla platform. starting with gecko/firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets. compatibility note: if you wish to use this property on websites, you should test it very carefully. although it is supported in most modern browsers, its implementation varies widely. in older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. the differences are smaller in the newest browsers. syntax /* css basic user interface module level 4 values */ appearanc...

box-direction - CSS: Cascading Style Sheets
full support 1.0prefixed prefixed implemented with the vendor prefix: -webkit-legend full support full support no support no supportnon-standard. expect poor cross-browser support.non-standard. expect poor cross-browser support.deprecated. 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. see also box-orient box-pack box-align flex-direction ...

text-size-adjust - CSS: Cascading Style Sheets
the text-size-adjust css property controls the text inflation algorithm used on some smartphones and tablets. other browsers will ignore this property. /* 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. instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. to map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the v...

scale() - CSS: Cascading Style Sheets
tes on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001 [sx 0 0 sy 0 0] accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. if you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferrably site-wide. also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences. find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criter...

transform - CSS: Cascading Style Sheets
transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left. none specifies that no transform should be applied. accessibility concerns scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. if you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferrably site-wide. also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences. find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criter...

Ajax - Developer guides
data; that is, the page requests data from the server. with server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. these incoming messages can be treated as events + data inside the web page. see also: using server-sent events. pure-ajax navigation example this article provides a working (minimalist) example of a pure-ajax website composed only of three pages. sending and receiving binary data the responsetype property of the xmlhttprequest object can be set to change the expected response type from the server. possible values are the empty string (default), arraybuffer, blob, document, json, and text. the response property will contain the entity body according to responsetype, as an arraybuffer, blob, document, json, o...

Graphics on the Web - Developer guides
static images can easily be displayed using the <img> element, or by setting the background of html elements using the background-image property. you can also construct graphics on-the-fly, or manipulate images after the fact. these articles provide insight into how you can accomplish this. 2d graphics canvas the <canvas> element provides apis to draw 2d graphics using javascript. svg scalable vector graphics (svg) lets you use lines, curves, and other geometric shapes to render graphics. with vectors, you can create images that scale cleanly to any size. view all... 3d graphics webgl a guide to getting started with webgl, the 3d graphics api for the web. ...

Rich-Text Editing in Mozilla - Developer guides
ich-text editing rich-text editing is initialized by setting the designmode property of a document to "on", such as the document inside an iframe. once designmode has been set to "on", the document becomes a rich-text editing area and the user can type into it as if it were a textarea. the most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website. similarly, setting contenteditable to "true" allows you to make individual elements of a document editable. executing commands when an html document has been switched to designmode, the document object exposes the document.execcommand method which allows one to run commands to manipulate the contents of the editable region. most commands affect the document's selection (bold, italics, etc), w...

HTML5 - Developer guides
varying according to the time and user actions. this is the technology behind ajax. jit-compiling javascript engines the new generation of javascript engines is much more powerful, leading to greater performance. history api allows the manipulation of the browser history. this is especially useful for pages loading interactively new information. the contenteditable attribute: transform your website to a wiki! html5 has standardized the contenteditable attribute. learn more about this feature. drag and drop the html5 drag and drop api allows support for dragging and dropping items within and between web sites. this also provides a simpler api for use by extensions and mozilla-based applications. focus management in html the new html5 activeelement and hasfocus attributes are supported. ...

Using HTML sections and outlines - Developer guides
ing the html source can divine the meaning of a class like navigation. by contrast, the <nav> sectioning element more clearly describes to browsers and other devices the content contained: links or other navigational structures to help users move through and understand where they are in a site's or page's content. new semantic elements were added to html5 to improve and clarify the sectioning of websites into meaningful areas of content. it is important for developers to use these semantic elements in line with their intended purposes. many accessibility tools as well as reader views provided by some browsers rely on semantic sectioning elements. so don't simply swap out an existing tangle of <div> elements for a bunch of <section> elements. section elements in html5 html navigational elemen...

Separate sites for mobile and desktop - Developer guides
barrassing to serve desktop users your mobile site accidentally. when it is right to choose this option firstly, if your target audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what. this is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand formats like xhtml-mp or the older wml. this factor aside, there is one case where this strategy really shines over other methods. if the functionality you would like to provide to your users on mobile devices is extremely different from that on a desktop, then using separate sites is simply likely to be the most practical choice. this is because yo...

Optimization and performance - Developer guides
the most notable tools are listed below. ...

<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); result accessibility concerns alternative content the <canvas> element on its own is just a bitmap and does not provide information about any drawn objects. canvas content is not exposed to accessibility tools as semantic html is. in general, you should avoid using canvas in an accessible website or app. the following guides can help to make it more accessible. mdn hit regions and accessability canvas accessibility use cases canvas element accessibility issues html5 canvas accessibility in firefox 13 – by steve faulkner best practices for interactive canvas elements specifications specification status comment html living standardthe definition of '<...

<header> - HTML: Hypertext Markup Language
ioning content and therefore does not introduce a new section in the outline. that said, a <header> element is intended to usually contain the surrounding section's heading (an h1–h6 element), but this is not required. historical usage although the <header> element didn't make its way into specifications until html5, it actually existed at the very beginning of html. as seen in the very first website, it was originally used as the <head> element. at some point, it was decided to use a different name. this allowed <header> to be free to fill a different role later on. attributes this element only includes the global attributes. examples page header <header> <h1>main page title</h1> <img src="mdn-logo-sm.png" alt="mdn logo"> </header> article header <article> <header> <h2>the ...

<input type="search"> - HTML: Hypertext Markup Language
specifications specification status comment html living standardthe definition of '<input type="search">' in that specification. living standard initial definition html 5.1the definition of '<input type="search">' in that specification. recommendation initial definition ...

<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> ...

<main> - HTML: Hypertext Markup Language
tent">skip to main content</a> <!-- navigation and header content --> <main id="main-content"> <!-- main page content --> </main> </body> webaim: "skip navigation" links reader mode browser reader mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view. building websites for safari reader mode and other reading apps. specifications specification status comment html living standardthe definition of '<main>' in that specification. living standard html 5.1the definition of '<main>' in that specification. recommendation no change from html5. html5the definition of '<main>' in that specification. recomm...

<q>: The Inline Quotation element - HTML: Hypertext Markup Language
element. a style rule may be needed to add quotation marks in older browsers. attributes this element includes the global attributes. cite the value of this attribute is a url that designates a source document or message for the information quoted. this attribute is intended to point to information explaining the context or the reference for the quote. 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. living standard html5the definition of '<q>' in that specification. recommendation html 4.01...

<samp>: The Sample Output element - HTML: Hypertext Markup Language
ibutes. usage notes you can use a css rule to override the browser's default font face for the <samp> element; however, it's possible that the browser's preferences may take precedence over any css you specify. the css to override the default font face would look like this: samp { font-family: "courier"; } if you need an element which will serve as a container for output generated by your website or app's javascript code, you should instead use the <output> element. examples basic example in this simple example, a paragraph includes an example of the output of a program. <p>when the process is complete, the utility will output the text <samp>scan complete. found <em>n</em> results.</samp> you can then proceed to the next step.</p> the resulting output looks like this: sample outp...

<strong>: The Strong Importance element - HTML: Hypertext Markup Language
draw attention to certain text without indicating a higher level of importance. use the <em> element to mark text that has stress emphasis. another accepted use for <strong> is to denote the labels of paragraphs which represent notes or warnings within the text of a page. <b> vs. <strong> it is often confusing to new developers why there are so many ways to express the same thing on a rendered website. <b> and <strong> are perhaps one of the most common sources of confusion, causing developers to ask "should i use <b> or <strong>? don't they both do the same thing?" not exactly. the <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important. it may help to realize that both are valid and s...

accesskey - HTML: Hypertext Markup Language
here the number doesn't have a logical association with the functionality it triggers. informing the user that accesskeys are present, so that they are aware of the functionality. if the system lacks a method of notifying the user about this feature, the user might accidentally activate accesskeys. because of these issues, it is generally advised not to use accesskeys for most general-purpose websites and web apps. webaim: keyboard accessibility - accesskey specifications specification status comment html 5.2the definition of 'accesskey' in that specification. recommendation more realistic behavior described for what is implemented in reality. html living standardthe definition of 'accesskey' in that specification. living standard no chan...

itemprop - HTML: Hypertext Markup Language
oken. in the example below, each data cell is a token. 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. an item is called a typed item if it is a url. otherwise, it is a string. strings cannot contain a period or a colon (see below). if the item is a typed item it must be either: a defined property name, or a valid url, which refers to the vocabulary definition, or a valid url that is used as...

Link types - HTML: Hypertext Markup Language
ocument, or site, and its resources. if the type attribute is set to application/opensearchdescription+xml the resource is an opensearch plugin that can be easily added to the interface of some browsers like firefox or internet explorer. <a>, <area>, <link>, <form> none. shortlink shortlink specification from wikipedia, the free encyclopedia: url shortening some websites create short links to make sharing links via instant messaging easier. <link> ??? sidebar obsolete since gecko 63 indicates that the hyperlink leads to a resource that would be better suited for a secondary browsing context, like a sidebar. browsers, that don't have such a context will ignore this keyword. while once part of the html specification, this has been remov...

Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
ting sites on the web. browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites. there are now three modes used by the layout engines in web browsers: quirks mode, almost standards mode, and full standards mode. in quirks mode, layout emulates nonstandard behavior in navigator 4 and internet explorer 5. this is essential in order to support websites that were built before the widespread adoption of web standards. in full standards mode, the behavior is (hopefully) the behavior described by the html and css specifications. in almost standards mode, there are only a very small number of quirks implemented. how do browsers determine which mode to use? for html documents, browsers use a doctype in the beginning of the document to decide wheth...

Using the application cache - HTML: Hypertext Markup Language
nifest file. you do not need to list all pages you want cached in the manifest file, the browser implicitly adds every page that the user visits and that has the manifest attribute set to the application cache. some browsers (e.g., firefox) display a notification bar the first time a user loads an application that uses the application cache. the notification bar displays a message such as: this website (example.com) is asking to store data on your computer for offline use. [allow] [never for this site] [not now] the term "offline(-enabled) applications" sometimes refers specifically to applications that the user has allowed to use offline capabilities. loading documents the use of an application cache modifies the normal process of loading a document: if an application cache exists, the b...

HTTP authentication - HTTP
this may be an attempt to trick you." ...

Evolution of HTTP - HTTP
yed by new http methods, but only by accessing specific uris with basic http/1.1 methods. this allowed any web application to provide an api to allow retrieval and modification of its data without having to update the browsers or the servers: all what is needed was embedded in the files served by the web sites through standard http/1.1. 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. restful apis became very common in the 2010s. since 2005, the set of apis available to web pages greatly increased and several of these apis created extensions, mostly new specific http headers, to the http protocol for specific purposes: server-sent eve...

Resource URLs - HTTP
und in the resource url's ('->'), it means that the first file loaded the next one: resource://<file-loader> -> <file-loaded> please refer to identifying resources on the web for more general details. in this article, we focus on resource uris, which are used internally by firefox to point to built-in resources. 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. for example, a script on browserleaks highlights what firefox reveals when queried by a simple script running on the site (you can find the code in https://browserleaks.com/firefox#more). the file firefox.js passes preference ...

Content Security Policy (CSP) - HTTP
t-security-policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="css/style.css"> </head> <body> ... content ... </body> </html> can you spot the mistake? stylesheets are allowed to be loaded only from cdn.example.com, yet the website tries to load one from its own origin (http://example.com). a browser capable of enforcing csp would send the following violation report as a post request to http://example.com/_/csp-reports, when the document is visited: { "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/css/style.css", "violated-directive": "...

Using HTTP cookies - HTTP
cookies, and are never sent to a server. more structured and larger amounts of data can be stored using the indexeddb api, or a library built on it. other techniques have been created to cause cookies to be recreated after they are deleted, known as "zombie" cookies. 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. ...

Content-Security-Policy-Report-Only - HTTP
icy-report-only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports the html of signup.html looks like this: <!doctype html> <html> <head> <title>sign up</title> <link rel="stylesheet" href="css/style.css"> </head> <body> ... content ... </body> </html> can you spot the violation? stylesheets are only allowed to be loaded from cdn.example.com, yet the website tries to load one from its own origin (http://example.com). a browser capable of enforcing csp will send the following violation report as a post request to http://example.com/_/csp-reports, when the document is visited: { "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/css/style.css", "violated-directive": "s...

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

SameSite cookies - HTTP
the samesite attribute of the set-cookie http response header allows you to declare if your cookie should be restricted to a first-party or same-site context. 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. this is the default value in modern browsers. strict cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. none cookies will be sent in all contexts, i.e sending cross-origin is allowed. none used to be the default value, but recent browser versions made lax the default value to have reasonably robust defense against some classes of cross-site request forgery (csrf) attacks. no...

Firefox user agent string reference - HTTP
ppversion mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion appname/appversion appname/appversion indicates the application name and version. for instance, this could be "camino/2.1.1", or "seamonkey/2.7.1". 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. firefoxversion will generally represent the equivalent firefox release corresponding to the given gecko version. some gecko-based browsers may not opt into using this token; for this reason, sniffers should be looking for gecko — not firefox! whether this token appears is controlled by the "general.useragent.compatmode.firefox" boolean pref. mobile and tablet indicator...

CONNECT - HTTP
the client asks an http proxy server to tunnel the tcp connection to the desired destination. the server then proceeds to make the connection on behalf of the client. once the connection has been established by the server, the proxy server continues to proxy the tcp stream to and from the client. connect is a hop-by-hop method. ...

Proxy servers and tunneling - HTTP
network data and protocol information through public network by encapsulating the data. http tunneling is using a protocol of higher level (http) to transport a lower level protocol (tcp). the http protocol specifies a request method called connect. it starts two-way communications with the requested resource and can be used to open a tunnel. this is how a client behind an http proxy can access websites using ssl (i.e. https, port 443). note, however, that not all proxy servers support the connect method or limit it to port 443 only. see also the http tunnel article on wikipedia. proxy auto-configuration (pac) a proxy auto-configuration (pac) file is a javascript function that determines whether web browser requests (http, https, and ftp) go directly to the destination or are forwarded to a ...

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. openssl s_client -servername www.example.com -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 example hpkp header public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; repo...

Strict mode - JavaScript
must be made possible to provide a reference to the un-inlined function if arguments.callee is accessed. arguments.callee for strict mode functions is a non-deletable property which throws an error when set or retrieved: 'use strict'; var f = function() { return arguments.callee; }; f(); // throws a typeerror "securing" javascript strict mode makes it easier to write "secure" javascript. some websites now provide ways for users to write javascript which will be run by the website on behalf of other users. javascript in browsers can access the user's private information, so such javascript must be partially transformed before it is run, to censor access to forbidden functionality. javascript's flexibility makes it effectively impossible to do this without many runtime checks. certain language ...

JavaScript
javascript an excellent resource for aspiring web developers — learn javascript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. the first 40 lessons are free, and the complete course is available for a small one-time payment. togetherjs collaboration made easy. by adding togetherjs to your site, your users can help each other out on a website in real-time! stack overflow stack overflow questions tagged with "javascript". javascript versions and release notes browse javascript's feature history and implementation status. jsfiddle edit javascript, css, html and get live results. use external resources and collaborate with your team online. plunker plunker is an online community for creating, collaborating on and sharing your web...

display - Web app manifests
the display mode changes how much of browser ui is shown to the user and can range from browser (when the full browser window is shown) to fullscreen (when the app is full-screened). note: if the display member is not specified, it defaults to browser. note: you can selectively apply css to your app based on the display mode, using the display-mode media feature. ...

orientation - Web app manifests
note: orientation and/or its specific values might not be supported by a user agent on various display modes because supporting them does not make sense for the particular context. note: the orientation can be changed at runtime via the screen orientation api. ...

related_applications - Web app manifests
type array mandatory no the related_applications field is an array of objects specifying native applications that are installable by, or accessible to, the underlying platform — for example, a native android application obtainable through the google play store. such applications are intended to be alternatives to the manifest's website that provides similar/equivalent functionality — like the native app equivalent. note: developer can specify that the native applications are preferred over the web application by setting prefer_related_applications to true. examples "related_applications": [ { "platform": "play", "url": "https://play.google.com/store/apps/details?id=com.example.app1", "id": "com.example.app1" }, { "platform": "itunes", ...

Web app manifests
unlike regular web apps with simple homescreen links or bookmarks, pwas can be downloaded in advance and can work offline, as well as use regular web apis. the web app manifest provides information about a web application in a json text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). ...

Using images in HTML - Web media technologies
references these articles cover some of the html elements and css properties that are used to control how images are displayed on the web. html <img> the html <img> element is used to embed an image in a webpage. ...

Populating the page: how browsers work - Web Performance
adds time to the page load, a secure connection is worth the latency expense, as the data transmitted between the browser and the web server cannot be decrypted by a third party. after the 8 round trips, the browser is finally able to make the request. response once we have an established connection to a web server, the browser sends an initial http get request on behalf of the user, which for websites is most often an html file. once the server receives the request, it will reply with relevant response headers and the contents of the html. <!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link rel="stylesheet" src="styles.css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="ht...

Understanding latency - Web Performance
cause the connection to the server is already set. latency describes the amount of delay on a network or internet connection. low latency implies that there are no or almost no delays. high latency implies that there are many delays. one of the main aims of improving performance is to reduce latency. the latency associated with a single asset, especially a basic html page, may seem trivial. but websites generally involve multiple requests: the html includes requests for multiple css, scripts, and media files. the greater the number and size of these requests, the greater the impact of high latency on user experience. on a connection with low latency, requested resources will appear almost immediately. on a connection with high latency, there will be a discernible delay between the time that a...

Using dns-prefetch - Web Performance
aded later or link target a user tries to follow. why use dns-prefetch? when a browser requests a resource from a (third party) server, that cross-origin’s domain name must be resolved to an ip address before the browser can issue the request. this process is known as dns resolution. while dns caching can help to reduce this latency, dns resolution can add significant latency to requests. for websites that open connections to many third parties, this latency can significantly reduce loading performance. dns-prefetch helps developers mask dns resolution latency. the html <link> element offers this functionality by way of a rel attribute value of dns-prefetch. the cross-origin domain is then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > ...

How to make PWAs installable - Progressive web apps (PWAs)
s required only by chrome for android currently) currently, only the chromium-based browsers such as chrome, edge, and samsung internet require the service worker. if developing your app using firefox, be aware that you will need a service worker to be compatible with chromium-based browsers. the manifest file the key element is a web manifest file, which lists all the information about the website in a json format. it usually resides in the root folder of a web app. it contains useful information, such as the app’s title, paths to different-sized icons that can be used to represent the app on an os (such as an icon on the home screen, an entry in the start menu, or an icon on the desktop), and a background color to use in loading or splash screens. this information is needed for the bro...

Making PWAs work offline with Service workers - Progressive web apps (PWAs)
worker are implemented. in this article, we look at how it is used in our js13kpwa example (see the source code also). we examine how to add offline functionality. service workers explained service workers are a virtual proxy between the browser and the network. they finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a website and make them available when the user’s device is offline. they run on a separate thread from the main javascript code of our page, and don't have any access to the dom structure. this introduces a different approach from traditional web programming — the api is non-blocking, and can send and receive communication between different contexts. you are able to give a service worker something to...

Media - Progressive web apps (PWAs)
ut you might also want to project it to a big screen for a large audience, or you might want to print it. these different media have different characteristics. css has the capacity to present content according to the media type. to specify rules that are specific to a type of media, use @media followed by the media type, followed by curly braces that enclose the rules. example a document on a website has a navigation area that contains the primary site menu. in the markup language, the navigation area's parent element has the id nav-area. (in html5, this can be marked up with the <nav> element instead of <div> with an id attribute.) when printing the document, the navigation area has no purpose. this css (below) removes the navigation area when printing the document: @media print { #nav-...

Mobile first - Progressive web apps (PWAs)
in our planning your app article, we provided a high level look into the kinds of planning and functionality decisions you should make before you start coding an app, including some ideas for desktop and mobile design. this article offers some related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. this guide looks at a few useful techniques inside the mobile first umbrella. first things first — mobile as a default you may think that concentrating on the mobile experience first sounds pointless, as we are more used to dealing with desktop sites, and we surely need to consider the full gamut of fea...

Progressive web apps (PWAs)
web browser handles its network requests and asset caching. with service workers, web developers can create reliably fast web pages and offline experiences. manifest file a json file that controls how your app appears to the user and ensures that progressive web apps are discoverable. 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. pwa advantages pwas should be discoverable, installable, linkable, network independent, progressive, re-engageable, responsive, and safe. to find out more about what these mean, read progressive web app advantages. to find out how to implement pwas, read through our pwa developer guide. documentation <-- the temporary automatic list below will be replaced soon --> ...

Referer header: privacy and security concerns - Web security
has many security advantages, including the fact that https sites will never transmit referer information to non-https sites. this is becoming less useful in this context now that most of the web is using https, but it is still a worthy consideration. in addition, you should consider removing any third party content (e.g. social networking widgets embedded in <iframe>) from secure areas of your website, like password reset pages, payment forms, login areas, etc. you can also mitigate such risks using: the referrer-policy header on your server to control what information is sent through the referer header. again, a directive of no-referrer would omit the referer header entirely. the referrerpolicy attribute on html elements that are in danger of leaking such information (such as <img> and <...

Index - XPath
ml data referenced in the dtd of the source document. 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. mozilla implements a fair amount of the dom 3 xpath, which means that xpath expressions can be run against both html and xml documents. 57 xpath snippets example, snippets, xml, xpath, xslt this article provides some xpath code snippets. the snippets are functions you can use in the real world in your own code. ...

Introduction to using XPath in JavaScript - XPath
mozilla implements a fair amount of the dom 3 xpath, which means that xpath expressions can be run against both html and xml documents. the main interface to using xpath is the evaluate function of the document object. document.evaluate this method evaluates xpath expressions against an xml based document (including html documents), and returns a xpathresult object, which can be a single node or a set of nodes. ...

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
http://www.amazon.com/xslt-doug-tidwell/dp/0596000537 learning xml, second edition author: erik t. ray length: 432 pages publisher: o'reilly media; 2 edition (september 22, 2003) isbn: 0596004206 as the title indicates, this is an overview of xml generally. chapter 6 is devoted specifically to xslt. ...

Compiling from Rust to WebAssembly - WebAssembly
ilabe to npm let's use `npm link` to make this package available to other javascript packages installed $ cd pkg $ npm link we now have an npm package, written in rust, but compiled to webassembly. it's ready for use from javascript, and doesn't require the user to have rust installed; the code included was the webassembly code, not the rust source. using the package on the web let's build a website that uses our new package. many people use npm packages through various bundler tools, and we'll be using one of them, webpack, in this tutorial. it's only a little bit complex, and shows a realistic use-case. let's move back out of the pkg directory, and make a new directory, site, to try this out in: $ cd ../.. $ mkdir site $ cd site $ npm link hello-wasm create a new file, package.json, ...