mdn · sideshowbarker · Mar 9, 2021 · Mar 9, 2021
@@ -13,9 +13,9 @@
 <p>In this article we look at a complex example involving checking the current time and date against a deadline stored via IndexedDB. The main complication here is checking the stored deadline info (month, hour, day, etc.) against the current time and date taken from a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> object.</p>
 </div>
 
-<p><img alt="A screenshot of the sample app. A red main title saying To do app, a test to-do item, and a red form for users to enter new tasks" src="https://mdn.mozillademos.org/files/6319/to-do-app.png" style="float: left; height: 569px; margin-bottom: 20px; margin-right: 20px; width: 320px;"></p>
+<p><img alt="A screenshot of the sample app. A red main title saying To do app, a test to-do item, and a red form for users to enter new tasks" src="to-do-app.png" style="float: left; margin-bottom: 20px; margin-right: 20px;"></p>
 
-<p>The main example application we will be referring to in this article is <strong>To-do list notifications</strong>, a simple to-do list application that stores task titles and deadline times and dates via <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, and then provides users with notifications when deadline dates are reached, via the <a href="/en-US/docs/Web/API/notification">Notification</a>, and <a href="/en-US/docs/Web/Guide/API/Vibration">Vibration</a> APIs. You can <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">download the To-do list notifications app from github</a> and play around with the source code, or <a href="https://mdn.github.io/to-do-notifications/">view the app running live</a>.</p>
+<p>The main example application we will be referring to in this article is <strong>To-do list notifications</strong>, a simple to-do list application that stores task titles and deadline times and dates via <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, and then provides users with notifications when deadline dates are reached, via the <a href="/en-US/docs/Web/API/Notification">Notification</a>, and <a href="/en-US/docs/Web/API/Vibration_API">Vibration</a> APIs. You can <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">download the To-do list notifications app from github</a> and play around with the source code, or <a href="https://mdn.github.io/to-do-notifications/">view the app running live</a>.</p>
 
 <h2 id="The_basic_problem">The basic problem</h2>
 
@@ -27,7 +27,7 @@ <h3 id="Recording_the_date_information">Recording the date information</h3>
 
 <p>To provide a reasonable user experience on mobile devices, and to cut down on ambiguities, I decided to create an HTML form with:</p>
 
-<p><img alt="The form of the to-do app, containing fields to fill in a task title, and minute, hour, day, month and year values for the deadline." src="https://mdn.mozillademos.org/files/6321/to-do-app-form2.png" style="float: left; height: 311px; margin-bottom: 20px; margin-right: 40px; width: 288px;"></p>
+<p><img alt="The form of the to-do app, containing fields to fill in a task title, and minute, hour, day, month and year values for the deadline." src="to-do-app-form2.png" style="float: left; margin-bottom: 20px; margin-right: 40px;"></p>
 
 <ul>
  <li>A text input for entering a title for your to-do list. This is the least avoidable bit of user typing.</li>

@@ -6,7 +6,7 @@
   - HTML5
   - Web-Based Protocol Handlers
 ---
-<div>{{Fx_minversion_header(3)}}</div>
+<div></div>
 
 <h2 id="Background">Background</h2>
 
@@ -22,7 +22,7 @@ <h2 id="Background">Background</h2>
 
 <h2 id="Registering">Registering</h2>
 
-<p>Setting up a web application as a protocol handler is not a difficult process. Basically, the web application uses <code><a href="/en-US/docs/Web/API/navigator.registerProtocolHandler">registerProtocolHandler()</a></code> to register itself with the browser as a potential handler for a given protocol. For example:</p>
+<p>Setting up a web application as a protocol handler is not a difficult process. Basically, the web application uses <code><a href="/en-US/docs/Web/API/Navigator/registerProtocolHandler">registerProtocolHandler()</a></code> to register itself with the browser as a potential handler for a given protocol. For example:</p>
 
 <pre class="brush: js">navigator.registerProtocolHandler("web+burger",
                                   "http://www.google.co.uk/?uri=%s",
@@ -38,7 +38,7 @@ <h2 id="Registering">Registering</h2>
 
 <p>When a browser executes this code, it should display a prompt to the user, asking permission to allow the web application to register as a handler for the protocol. Firefox displays a prompt in the notification bar area:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9683/protocolregister.png" style="display: block; height: 401px; margin: 0px auto; width: 700px;"></p>
+<p><img alt="" src="protocolregister.png" style="display: block; margin: 0px auto;"></p>
 
 <div class="note"><strong>Note:</strong>The URL template supplied when registering <strong>must</strong> be of the same domain as the webpage attempting to perform the registration or the registration will fail. For example, <code class="plain">http://example.com/homepage.html</code> can register a protocol handler for <code class="plain">http://example.com/handle_mailto/%s</code>, but not for <code class="plain">http://example.<em><strong>org</strong></em>/handle_mailto/%s</code>.</div>
 
@@ -124,7 +124,7 @@ <h2 id="References">References</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a href="/en-US/docs/DOM/window.navigator.registerContentHandler">window.navigator.registerContentHandler</a></li>
+ <li><a href="/en-US/docs/Web/API/Navigator/registerContentHandler">window.navigator.registerContentHandler</a></li>
  <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIProtocolHandler">nsIProtocolHandler</a> (XUL only)</li>
  <li><a href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li>
  <li><a href="https://developers.google.com/web/updates/2011/06/Registering-a-custom-protocol-handler">Register a custom protocolHandler</a> at Google Developers.</li>

@@ -16,7 +16,7 @@
 
 <p>A <code>PannerNode</code> always has exactly one input and one output: the input can be <em>mono</em> or <em>stereo</em> but the output is always <em>stereo</em> (2 channels); you can't have panning effects without at least two audio channels!</p>
 
-<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/13815/WebAudioPannerNode.png" style="display: block; height: 225px; margin: 0px auto; width: 771px;"></p>
+<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="webaudiopannernode.png" style="display: block; margin: 0px auto;"></p>
 
 <table class="properties">
  <tbody>
@@ -95,7 +95,7 @@ <h2 id="Methods">Methods</h2>
 
 <dl>
  <dt>{{domxref("PannerNode.setPosition()")}}</dt>
- <dd>Defines the position of the audio source relative to the listener (represented by an {{domxref("AudioListener")}} object stored in the {{domxref("AudioContext.listener")}} attribute.)</dd>
+ <dd>Defines the position of the audio source relative to the listener (represented by an {{domxref("AudioListener")}} object stored in the {{domxref("BaseAudioContext.listener")}} attribute.)</dd>
  <dt>{{domxref("PannerNode.setOrientation()")}}</dt>
  <dd>Defines the direction the audio source is playing in.</dd>
  <dt>{{domxref("PannerNode.setVelocity()")}} {{obsolete_inline}}</dt>
@@ -130,5 +130,5 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
 </ul>
@@ -12,7 +12,7 @@
 
 <p><span class="seoSummary">The Presentation API lets a {{Glossary("user agent")}} (such as a Web browser) effectively display web content through large presentation devices such as projectors and network-connected televisions.</span> Supported types of multimedia devices include both displays which are wired using HDMI, DVI, or the like, or wireless, using <a href="https://www.dlna.org/">DLNA</a>, <a href="/en-US/docs/">Chromecast</a>, <a href="https://developer.apple.com/airplay/">AirPlay</a>, or <a href="https://www.wi-fi.org/discover-wi-fi/miracast">Miracast</a>.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14544/presentation%20mode%20illustration.png" style="height: 382px; width: 945px;"></p>
+<p><img alt="" src="presentation_mode_illustration.png"></p>
 
 <p>In general, a web page uses the Presentation Controller API to specify the web content to be rendered on presentation device and initiate the presentation session. With Presentation Receiver API, the presenting web content obtains the session status. With providing both the controller page and the receiver one with a messaged-based channel, a Web developer can implement the interaction between these two pages.</p>
 

@@ -2,12 +2,12 @@
 title: Screen.availHeight
 slug: Web/API/Screen/availHeight
 tags:
-- API
-- CSSOM View
-- Property
-- Reference
-- Screen size
-- availHeight
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+  - Screen size
+  - availHeight
 ---
 <p>{{APIRef("CSSOM")}}</p>
 
@@ -38,10 +38,9 @@ <h3 id="Value">Value</h3>
   <code>height</code> (the total height of the screen in CSS pixels) minus the heights of
   the Dock and menu bar, as seen in the diagram below.</p>
 
-<p><a href="/files/15243/availHeight-diagram.svg"><img
+<p><a href="/en-US/docs/Web/API/Screen/availHeight/availheight-diagram.svg"><img
       alt="Diagram showing how Screen.availHeight relates to Screen.height and the screen's contents"
-      src="https://mdn.mozillademos.org/files/15243/availHeight-diagram.svg"
-      style="height: 312px; width: 500px;"></a></p>
+      src="availheight-diagram.svg"></a></p>
 
 <h2 id="Example">Example</h2>
 
@@ -67,8 +66,7 @@ <h2 id="Example">Example</h2>
 
 <p><a href="https://mdn.mozillademos.org/files/15247/screen-availHeight.png"><img
       alt="Screenshot of the example for Screen.availHeight"
-      src="https://mdn.mozillademos.org/files/15247/screen-availHeight.png"
-      style="height: 338px; width: 600px;"></a></p>
+      src="screen-availheight.png"></a></p>
 
 <p>On a Windows system, this would function similarly, by opening the window and sizing it
   vertically so it uses all available vertical space, leaving room for the taskbar and any

@@ -19,9 +19,9 @@
 
 <p>The <code>ScriptProcessorNode</code> interface is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the input audio data, one containing the processed output audio data. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</p>
 
-<p><img alt="The ScriptProcessorNode stores the input in a buffer, send the audioprocess event. The EventHandler takes the input buffer and fill the output buffer which is sent to the output by the ScriptProcessorNode." src="https://mdn.mozillademos.org/files/5157/WebAudioScriptProcessingNode.png" style="display: block; height: 174px; margin: 0px auto; width: 306px;"></p>
+<p><img alt="The ScriptProcessorNode stores the input in a buffer, send the audioprocess event. The EventHandler takes the input buffer and fill the output buffer which is sent to the output by the ScriptProcessorNode." src="webaudioscriptprocessingnode.png" style="display: block; margin: 0px auto;"></p>
 
-<p>The size of the input and output buffer are defined at the creation time, when the {{domxref("AudioContext.createScriptProcessor()")}} method is called (both are defined by {{domxref("AudioContext.createScriptProcessor()")}}'s <code>bufferSize</code> parameter). The buffer size must be a power of 2 between <code>256</code> and <code>16384</code>, that is <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code> or <code>16384</code>. Small numbers lower the <em>latency</em>, but large number may be necessary to avoid audio breakup and glitches.</p>
+<p>The size of the input and output buffer are defined at the creation time, when the {{domxref("BaseAudioContext.createScriptProcessor")}} method is called (both are defined by {{domxref("BaseAudioContext.createScriptProcessor")}}'s <code>bufferSize</code> parameter). The buffer size must be a power of 2 between <code>256</code> and <code>16384</code>, that is <code>256</code>, <code>512</code>, <code>1024</code>, <code>2048</code>, <code>4096</code>, <code>8192</code> or <code>16384</code>. Small numbers lower the <em>latency</em>, but large number may be necessary to avoid audio breakup and glitches.</p>
 
 <p>If the buffer size is not defined, which is recommended, the browser will pick one that its heuristic deems appropriate.</p>
 

@@ -26,7 +26,7 @@ <h2 id="3D_boombox_demo">3D boombox demo</h2>
 
 <p>To demonstrate 3D spatialization we've created a modified version of the boombox demo we created in our basic <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a> guide. see the <a href="https://mdn.github.io/webaudio-examples/spacialization/">3D spatialization demo live</a> (and see the <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">source code</a> also).</p>
 
-<p><img alt="A simple UI with a rotated boombox and controls to move it left and right and in and out, and rotate it." src="https://mdn.mozillademos.org/files/16232/web-audio-spatialization.png" style="border-style: solid; border-width: 1px; height: 724px; width: 949px;"></p>
+<p><img alt="A simple UI with a rotated boombox and controls to move it left and right and in and out, and rotate it." src="web-audio-spatialization.png" style="border-style: solid; border-width: 1px;"></p>
 
 <p>The boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls. When we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc. This is done by setting the different properties of the <code>PannerNode</code> object instance in relation to that movement, to emulate spacialization.</p>
 

@@ -13,7 +13,7 @@
 ---
 <div>{{APIRef("WebVR API")}}{{deprecated_header}}</div>
 
-<div class="notecard note"><strong>Note:</strong> WebVR API is replaced by <a href="/en-US/docs/Web/API/WebXR_API">WebXR API</a>. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers and supported a small number of devices.</div>
+<div class="notecard note"><strong>Note:</strong> WebVR API is replaced by <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR API</a>. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers and supported a small number of devices.</div>
 
 <p class="summary">The WebVR API is a fantastic addition to the web developer's toolkit, allowing WebGL scenes to be presented in virtual reality displays such as the Oculus Rift and HTC Vive. But how do you get started with developing VR apps for the Web? This article will guide you through the basics.</p>
 
@@ -44,7 +44,7 @@ <h2 id="Introducing_our_demo">Introducing our demo</h2>
 
 <p>To illustrate how the WebVR API works, we'll study our raw-webgl-example, which looks a bit like this:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15121/Capture1.png" style="display: block; height: 761px; margin: 0px auto; width: 1341px;"></p>
+<p><img alt="" src="capture1.png" style="display: block; margin: 0px auto;"></p>
 
 <div class="note">
 <p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">source code of our demo</a> on GitHub, and <a href="https://mdn.github.io/webvr-tests/raw-webgl-example/">view it live</a> also.</p>
@@ -232,7 +232,7 @@ <h3 id="Starting_and_stopping_the_VR_presentation">Starting and stopping the VR
 
 <p>Once the presentation starts, you'll be able to see the stereoscopic view displayed in the browser:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15123/Capture2.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="capture2.png" style="display: block; margin: 0 auto;"></p>
 
 <p>You'll learn below how the stereoscopic view is actually produced.</p>
 
@@ -425,7 +425,7 @@ <h3 id="Displaying_the_pose_(position_orientation_etc.)_data">Displaying the pos
 
 <h2 id="WebVR_events">WebVR events</h2>
 
-<p>The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see <a href="/en-US/docs/Web/API/WebVR_API#Window_events">Window events</a>). For example:</p>
+<p>The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see <a href="/en-US/docs/Web/API/WebVR_API#window_events">Window events</a>). For example:</p>
 
 <ul>
  <li>{{event("vrdisplaypresentchange")}} — Fires when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.</li>