mdn · hamishwillee · Apr 27, 2021 · Apr 25, 2021 · Apr 26, 2021 · Apr 26, 2021
@@ -59,7 +59,7 @@ <h2 id="HTML_for_structuring_content">HTML for structuring content</h2>
 <p>This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?</p>
 
 <div class="note">
-<p><strong>Note</strong>: <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">Roughy 8% of men and 0.5% of women</a> are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 million such people in the world</a>, while the total population was <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">around 7 billion</a>).</p>
+<p><strong>Note</strong>: <a href="https://www.color-blindness.com/2006/04/28/colorblind-population/">Roughy 8% of men and 0.5% of women</a> are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 million such people in the world</a>, while the total population was <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">around 7 billion</a>).</p>
 </div>
 
 <p>In your HTML code, you can mark up sections of content based on their <em>functionality</em> — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognize those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure">consequences of not using the right element structure and semantics for the right job</a>.</p>

@@ -151,7 +151,7 @@ <h3 id="Active_learning_The_descriptions_use_in_search_engines">Active learning:
 </ol>
 
 <div class="note">
-<p><strong>Note</strong>: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — a way to make your site's search results better in the Google search engine.</p>
+<p><strong>Note</strong>: In Google, you will see some relevant subpages of MDN Web Docs listed below the main homepage link — these are called sitelinks, and are configurable in <a href="https://www.google.com/webmasters/tools/">Google's webmaster tools</a> — a way to make your site's search results better in the Google search engine.</p>
 </div>
 
 <div class="note">
@@ -162,7 +162,7 @@ <h3 id="Other_types_of_metadata">Other types of metadata</h3>
 
 <p>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.</p>
 
-<p>For example, <a href="http://ogp.me/">Open Graph Data</a> is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you'll find this:</p>
+<p>For example, <a href="https://ogp.me/">Open Graph Data</a> is a metadata protocol that Facebook invented to provide richer metadata for websites. In the MDN Web Docs sourcecode, you'll find this:</p>
 
 <pre class="brush: html">&lt;meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"&gt;
 &lt;meta property="og:description" content="The Mozilla Developer Network (MDN) provides

@@ -303,7 +303,7 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
  <li><a href="/en-US/docs/Web/Guide/Audio_and_video_delivery">Audio and Video delivery</a>: A LOT of detail about putting audio and video onto web pages using HTML and JavaScript.</li>
  <li><a href="/en-US/docs/Web/Guide/Audio_and_video_manipulation">Audio and Video manipulation</a>: A LOT of detail about manipulating audio and video using JavaScript (for example adding filters.)</li>
- <li>Automated options to <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li>
+ <li>Automated options to <a href="https://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>.</li>
  <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
  <li><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li>
  <li><a href="/en-US/docs/Web/Events#media">Event reference > Media</a></li>

@@ -368,7 +368,7 @@ <h2 id="Tables_for_visually_impaired_users">Tables for visually impaired users</
 <p>But what if you cannot make those visual associations? How then can you read a table like the above? Visually impaired people often use a screenreader that reads out information on web pages to them. This is no problem when you're reading plain text but interpreting a table can be quite a challenge for a blind person. Nevertheless, with the proper markup we can replace visual associations by programmatic ones.</p>
 
 <div class="note">
-<p><strong>Note</strong>: There are around 253 Million people living with Visual Impairment according to <a href="http://www.who.int/mediacentre/factsheets/fs282/en/" title="Vision Impairment Data">WHO data in 2017</a>.</p>
+<p><strong>Note</strong>: There are around 253 Million people living with Visual Impairment according to <a href="https://www.who.int/mediacentre/factsheets/fs282/en/" title="Vision Impairment Data">WHO data in 2017</a>.</p>
 </div>
 
 <p>This section of the article provides further techniques for making tables as accessible as possible.</p>

@@ -55,7 +55,7 @@ <h3 id="How_does_a_table_work">How does a table work?</h3>
 <p>The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. Look at the table below for example and find a Jovian gas giant with 62 moons. You can find the answer by associating the relevant row and column headers.</p>
 
 <table>
- <caption>Data about the planets of our solar system (Planetary facts taken from <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.</caption>
+ <caption>Data about the planets of our solar system (Planetary facts taken from <a href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.</caption>
  <thead>
   <tr>
    <td colspan="2"></td>
@@ -183,7 +183,7 @@ <h3 id="How_does_a_table_work">How does a table work?</h3>
    <td>5906.4</td>
    <td>-225</td>
    <td>5</td>
-   <td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
+   <td>Declassified as a planet in 2006, but this <a href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
   </tr>
  </tbody>
 </table>

@@ -597,8 +597,8 @@ <h2 id="See_also">See also</h2>
 
 <ul>
  <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
- <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li>
- <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="https://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li>
+ <li><a href="https://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
 
 </ul>
 

@@ -582,7 +582,7 @@ <h3 id="A_simple_character_animation">A simple character animation</h3>
   <pre class="brush: js">let sprite = 0;
 let posX = 0;</pre>
 
-  <p>Let's explain the spritesheet image (which we have respectfully borrowed from Mike Thomas' <a href="http://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/" rel="bookmark" title="Permanent Link to Create a sprite sheet walk cycle using CSS animation">Create a sprite sheet walk cycle using CSS animation</a>). The image looks like this:</p>
+  <p>Let's explain the spritesheet image (which we have respectfully borrowed from Mike Thomas' <a href="https://atomicrobotdesign.com/blog/htmlcss/create-a-sprite-sheet-walk-cycle-using-using-css-animation/" rel="bookmark" title="Permanent Link to Create a sprite sheet walk cycle using CSS animation">Create a sprite sheet walk cycle using CSS animation</a>). The image looks like this:</p>
 
   <p><img alt="" src="walk-right.png" style="display: block; margin: 0px auto;"></p>
 

@@ -104,7 +104,7 @@ <h3 id="Common_third-party_APIs">Common third-party APIs</h3>
 </ul>
 
 <div class="note">
-<p><strong>Note</strong>: You can find information on a lot more 3rd party APIs at the <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>.</p>
+<p><strong>Note</strong>: You can find information on a lot more 3rd party APIs at the <a href="https://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>.</p>
 </div>
 
 <h2 id="How_do_APIs_work">How do APIs work?</h2>

@@ -116,7 +116,7 @@ <h2 id="So_what_can_it_really_do">So what can it really do?</h2>
 <ul>
  <li>The {{domxref("Document_Object_Model","DOM (Document Object Model) API")}} allows you to manipulate HTML and CSS, creating, removing and changing HTML, dynamically applying new styles to your page, etc. Every time you see a popup window appear on a page, or some new content displayed (as we saw above in our simple demo) for example, that's the DOM in action.</li>
  <li>The {{domxref("Geolocation","Geolocation API")}} retrieves geographical information. This is how <a href="https://www.google.com/maps">Google Maps</a> is able to find your location and plot it on a map.</li>
- <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> and <a href="http://webglsamples.org/">webglsamples</a>.</li>
+ <li>The {{domxref("Canvas_API","Canvas")}} and {{domxref("WebGL_API","WebGL")}} APIs allow you to create animated 2D and 3D graphics. People are doing some amazing things using these web technologies —see <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> and <a href="https://webglsamples.org/">webglsamples</a>.</li>
  <li><a href="/en-US/docs/Web/Guide/Audio_and_video_delivery">Audio and Video APIs</a> like {{domxref("HTMLMediaElement")}} and {{domxref("WebRTC API", "WebRTC")}} allow you to do really interesting things with multimedia, such as play audio and video right in a web page, or grab video from your web camera and display it on someone else's computer (try our simple <a href="https://chrisdavidmills.github.io/snapshot/">Snapshot demo</a> to get the idea).</li>
 </ul>
 

@@ -190,7 +190,7 @@ <h2 id="Trying_the_example_out">Trying the example out</h2>
 
 <p>The technique we covered here is not the only way to create inheriting classes in JavaScript, but it works OK, and it gives you a good idea about how to implement inheritance in JavaScript.</p>
 
-<p>A common way is to use a JavaScript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. <a href="http://coffeescript.org/#classes">CoffeeScript</a> for example provides <code>class</code>, <code>extends</code>, etc.</p>
+<p>A common way is to use a JavaScript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. <a href="https://coffeescript.org/#classes">CoffeeScript</a> for example provides <code>class</code>, <code>extends</code>, etc.</p>
 
 <h2 id="A_further_exercise">A further exercise</h2>
 

@@ -149,7 +149,7 @@ <h3 id="Other_notes">Other notes</h3>
 <ul>
  <li>JSON is purely a string with a specified data format — it contains only properties, no methods.</li>
  <li>JSON requires double quotes to be used around strings and property names. Single quotes are not valid other than surrounding the entire JSON string.</li>
- <li>Even a single misplaced comma or colon can cause a JSON file to go wrong, and not work. You should be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly). You can validate JSON using an application like <a href="http://jsonlint.com/">JSONLint</a>.</li>
+ <li>Even a single misplaced comma or colon can cause a JSON file to go wrong, and not work. You should be careful to validate any data you are attempting to use (although computer-generated JSON is less likely to include errors, as long as the generator program is working correctly). You can validate JSON using an application like <a href="https://jsonlint.com/">JSONLint</a>.</li>
  <li>JSON can actually take the form of any data type that is valid for inclusion inside JSON, not just arrays or objects. So for example, a single string or number would be valid JSON.</li>
  <li>Unlike in JavaScript code in which object properties may be unquoted, in JSON only quoted strings may be used as properties.</li>
 </ul>
@@ -341,7 +341,7 @@ <h2 id="See_also">See also</h2>
  <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li>
  <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
  <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
- <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li>
+ <li><a href="https://json.org">Official JSON web site with link to ECMA standard</a></li>
 </ul>
 
 <p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>

@@ -265,7 +265,7 @@ <h2 id="Adding_collision_detection">Adding collision detection</h2>
    <li>For each ball, we need to check every other ball to see if it has collided with the current ball. To do this, we start another <code>for</code> loop to loop through all the balls in the <code>balls[]</code> array.</li>
    <li>Immediately inside the for loop, we use an <code>if</code> statement to check whether the current ball being looped through is the same ball as the one we are currently checking. We don't want to check whether a ball has collided with itself! To do this, we check whether the current ball (i.e., the ball whose collisionDetect method is being invoked) is the same as the loop ball (i.e., the ball that is being referred to by the current iteration of the for loop in the collisionDetect method). We then use <code>!</code> to negate the check, so that the code inside the <code>if</code> statement only runs if they are <strong>not</strong> the same.</li>
    <li>We then use a common algorithm to check the collision of two circles. We are basically checking whether any of the two circle's areas overlap. This is explained further in <a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a>.</li>
-   <li>If a collision is detected, the code inside the inner <code>if</code> statement is run. In this case we only set the <code>color</code> property of both the circles to a new random color. We could have done something far more complex, like get the balls to bounce off each other realistically, but that would have been far more complex to implement. For such physics simulations, developers tend to use a games or physics library such as <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a>, etc.</li>
+   <li>If a collision is detected, the code inside the inner <code>if</code> statement is run. In this case we only set the <code>color</code> property of both the circles to a new random color. We could have done something far more complex, like get the balls to bounce off each other realistically, but that would have been far more complex to implement. For such physics simulations, developers tend to use a games or physics library such as <a href="https://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="https://brm.io/matter-js/">matter.js</a>, <a href="https://phaser.io/">Phaser</a>, etc.</li>
   </ul>
  </li>
  <li>You also need to call this method in each frame of the animation. Add the following below the <code>balls[i].update();</code> line:

@@ -62,7 +62,7 @@ <h2 id="Tools">Tools</h2>
  <li>Learn to use the <a href="/en-US/docs/Tools/Performance">Firefox Dev Tools</a> to profile your site.</li>
  <li><a href="https://developers.google.com/speed/docs/insights/v5/about">PageSpeed Insights</a> can analyze your page and give some general hints to improve performance.</li>
  <li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> can give you a detailed breakdown of many aspects of your site including performance, SEO and accessibility. </li>
- <li>Test your page's speed using <a href="http://webpagetest.org/">WebPageTest.org</a>, where you can use different real device types and locations.</li>
+ <li>Test your page's speed using <a href="https://webpagetest.org/">WebPageTest.org</a>, where you can use different real device types and locations.</li>
  <li>Try the <a href="https://developers.google.com/web/tools/chrome-user-experience-report">Chrome User Experience Report</a> which quantifies real user metrics.</li>
  <li>Define a<a href="/en-US/docs/Web/Performance/Performance_budget"> performance budget.</a></li>
 </ul>