Auto generate featured chapters

src/content/en/2019/accessibility.md

@@ -15,7 +15,7 @@ last_updated: 2020-08-02T00:00:00.000Z
 
 ## Introduction
 
-Accessibility on the web is essential for an inclusive and equitable society. As more of our social and work lives move to the online world, it becomes even more important for people with disabilities to be able to participate in all online interactions without barriers. Just as building architects can create or omit accessibility features such as wheelchair ramps, web developers can help or hinder the assistive technology users rely on.
+<span id="featured-quote">Accessibility on the web is essential for an inclusive and equitable society. As more of our social and work lives move to the online world, it becomes even more important for people with disabilities to be able to participate in all online interactions without barriers. Just as building architects can create or omit accessibility features such as wheelchair ramps, web developers can help or hinder the assistive technology users rely on.</span>
 
 When thinking about users with disabilities, we should remember that their user journeys are often the same—they just use different tools. These popular tools include but are not limited to: screen readers, screen magnifiers, browser or text size zooming, and voice controls.
 
@@ -47,6 +47,8 @@ In order to make sure your website is readable under these conditions, making su
 
 Only 22.04% of sites gave all of their text sufficient color contrast. Or in other words: 4 out of every 5 sites have text which easily blends into the background, making it unreadable.
 
+<span id="featured-stat-1" hidden>22%</span><span id="featured-stat-label-1" hidden>Sites using sufficient colour contrast</span>
+
 <p class="note">Note that we weren't able to analyze any text inside of images, so our reported metric is an upper-bound of the total number of websites passing the color contrast test.</p>
 
 ### Zooming and scaling pages
@@ -97,6 +99,8 @@ Images are an essential part of the web experience. They can tell powerful stori
 
 Even though alt attributes have been around for 25 years, 49.91% of pages still fail to provide alt attributes for some of their images, and 8.68% of pages never use them at all.
 
+<span id="featured-stat-2" hidden>50%</span><span id="featured-stat-label-2" hidden>Sites with missing image alt attributes</span>
+
 ### Captions for audio and video
 
 Just as images are powerful storytellers, so too are audio and video in grabbing attention and expressing ideas. When audio and video content is not captioned, users who cannot hear this content miss out on large portions of the web. One of the most common things we hear from users who are Deaf or hard of hearing is the need to include captions for all audio and video content.
@@ -191,6 +195,8 @@ In fact you don't need to even leave this site as we [use them here too](https:/
 
 It's hard to accurately determine what a skip link is when analyzing sites. For this analysis, if we found an anchor link (`href=#heading1`) within the first 3 links on the page, we defined this as a page with a skip link. So 14.19% is a strict upper bound.
 
+<span id="featured-stat-3" hidden>14%</span><span id="featured-stat-label-3" hidden>Sites using a skip link</span>
+
 ### Shortcuts
 
 Shortcut keys set via the [`aria-keyshortcuts`](https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts) or [`accesskey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey) attributes can be used in one of two ways:

src/content/en/2019/javascript.md

@@ -25,6 +25,8 @@ The [HTTP Archive](https://httparchive.org/) crawls [millions of pages](https://
 
 JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, [download and execution have become the most expensive stages](https://v8.dev/blog/cost-of-javascript-2019) when JavaScript is processed by a web page.
 
+<span id="featured-quote" hidden>JavaScript is the most costly resource we send to browsers; having to be downloaded, parsed, compiled, and finally executed. Although browsers have significantly decreased the time it takes to parse and compile scripts, download and execution have become the most expensive stages when JavaScript is processed by a web page.</span>
+
 Sending smaller JavaScript bundles to the browser is the best way to reduce download times, and in turn improve page performance. But how much JavaScript do we really use?
 
 <figure>
@@ -129,7 +131,9 @@ For both mobile and desktop clients, more third-party requests are sent than fir
    <figcaption id="fig9-caption">Figure 9. Distribution of total JavaScript downloaded on mobile.</figcaption>
 </figure>
 
-At the median, 89% more third-party code is used than first-party code authored by the developer for both mobile and desktop. This clearly shows that third-party code can be one of the biggest contributors to bloat. For more information on the impact of third parties, refer to the ["Third Parties"](./third-parties) chapter.
+At the median, <span id="featured-stat-1">89%</span> more third-party code is used than first-party code authored by the developer for both mobile and desktop. This clearly shows that third-party code can be one of the biggest contributors to bloat. For more information on the impact of third parties, refer to the ["Third Parties"](./third-parties) chapter.
+
+<span id="featured-stat-label-1" hidden>Sites with more third-party code than first-party</span>
 
 ## Resource compression
 
@@ -282,6 +286,8 @@ Open source code, or code with a permissive license that can be accessed, viewed
 
 [jQuery](https://jquery.com/), the most popular JavaScript library ever created, is used in 85.03% of desktop pages and 83.46% of mobile pages. The advent of many Browser APIs and methods, such as [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), standardized much of the functionality provided by the library into a native form. Although the popularity of jQuery may seem to be declining, why is it still used in the vast majority of the web?
 
+<span id="featured-stat-2" hidden>83%</span><span id="featured-stat-label-2" hidden>Sites that use jQuery</span>
+
 There are a number of possible reasons:
 
 - [WordPress](https://wordpress.org/), which is used in more than 30% of sites, includes jQuery by default.
@@ -303,6 +309,8 @@ In the past number of years, the JavaScript ecosystem has seen a rise in open-so
    <figcaption id="fig12-caption">Figure 12. Most frequently used frameworks on desktop.</figcaption>
 </figure>
 
+<span id="featured-stat-3" hidden>4.6%</span><span id="featured-stat-label-3" hidden>Home pages using React</span>
+
 Only a subset of popular frameworks are being analyzed here, but it's important to note that all of them either follow one of these two approaches:   
 
 - A [model-view-controller](https://developer.chrome.com/apps/app_frameworks) (or model-view-viewmodel) architecture   

src/content/en/2019/media.md

@@ -14,7 +14,7 @@ last_updated: 2020-08-12T00:00:00.000Z
 ---
 
 ## Introduction
-Images, animations, and videos are an important part of the web experience. They are important for many reasons: they help tell stories, engage audiences, and provide artistic expression in ways that often cannot be easily produced with other web technologies. The importance of these media resources can be demonstrated in two ways: by the sheer volume of bytes required to download for a page, and also the volume of pixels painted with media. 
+<span id="featured-quote">Images, animations, and videos are an important part of the web experience. They are important for many reasons: they help tell stories, engage audiences, and provide artistic expression in ways that often cannot be easily produced with other web technologies. The importance of these media resources can be demonstrated in two ways: by the sheer volume of bytes required to download for a page, and also the volume of pixels painted with media.</span>
 
 From a pure bytes perspective, HTTP Archive has [historically reported](https://legacy.httparchive.org/interesting.php#bytesperpage) an average of two-thirds of resource bytes associated from media. From a distribution perspective, we can see that virtually every web page depends on images and videos. Even at the tenth percentile, we see that 44% of the bytes are from media and can rise to 91% of the total bytes at the 90th percentile of pages. 
 
@@ -32,7 +32,9 @@ First, the network overhead required to download these bytes can be large and in
 
 The second impact is on the financial cost to the user. This is often an ignored aspect since it is not a burden on the website owner but a burden to the end-user. Anecdotally, it has been shared that some markets, [like Japan](https://twitter.com/yoavweiss/status/1195036487538003968?s=20), see a drop in purchases by students near the end of the month when data caps are reached, and users cannot see the visual content. 
 
-Further, the financial cost of visiting these websites in different parts of the world is disproportionate. At the median and 90th percentile, the volume of image bytes is 1 MB and 1.9 MB respectively. Using [WhatDoesMySiteCost.com](https://whatdoesmysitecost.com/#gniCost) we can see that the gross national income (GNI) per capita cost to a user in Madagascar a single web page load at the 90th percentile would cost 2.6% of the daily gross income. By contrast, in Germany this would be 0.3% of the daily gross income. 
+Further, the financial cost of visiting these websites in different parts of the world is disproportionate. At the median and 90th percentile, the volume of image bytes is 1 MB and 1.9 MB respectively. Using [WhatDoesMySiteCost.com](https://whatdoesmysitecost.com/#gniCost) we can see that the gross national income (GNI) per capita cost to a user in Madagascar a single web page load at the 90th percentile would cost 2.6% of the daily gross income. By contrast, in Germany this would be 0.3% of the daily gross income.
+
+<span  id="featured-stat-1" hidden>1 MB</span><span id="featured-stat-label-1" hidden>Median size of home pages</span>
 
 <figure>
   <a href="/static/images/2019/media/fig2_total_image_bytes_per_web_page_mobile.png">
@@ -162,6 +164,8 @@ In aggregate, across all page, we indeed see the prevalence of these formats. JP
   <figcaption id="fig7-caption">Figure 7. Image format usage.</figcaption>
 </figure>
 
+<span id="featured-stat-2" hidden>60%</span><span id="featured-stat-label-2" hidden>JPEG use amongst images</span>
+
 Of course, web pages are not uniform in their use of image content. Some depend on images more than others. Look no further than the home page of `google.com` and you will see very little imagery compared to a typical news website. Indeed, the median website has 13 images, 61 images at the 90th percentile, and a whopping 229 images at the 99th percentile.
 
 <figure>
@@ -260,6 +264,8 @@ The most common method to implement responsive images is to build a list of alte
   <figcaption id="fig14-caption">Figure 14. Percent of pages using responsive images with HTML.</figcaption>
 </figure>
 
+<span id="featured-stat-3" hidden>2%</span><span id="featured-stat-label-3" hidden>Use of <code>&lt;picture&gt;</code> element</span>
+
 The notably lower use of `<picture>` is not surprising given that it is used most often for advanced responsive web design (RWD) layouts like [art direction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Art_direction).
 
 ### Use of sizes

src/templates/base/2019/featured_chapters.ejs.html

@@ -0,0 +1,27 @@
+<% if (Object.keys(featured_quotes).length === 1) { -%>
+{%- set featured_chapter = ("<%- Object.keys(featured_quotes) %>") %}
+<% } else { -%>
+{%- set featured_chapter = ("<%- Object.keys(featured_quotes).join('","') %>") | random %}
+<% } -%>
+
+<% let loop = 0 -%>
+<% for (chapter in featured_quotes) { -%>
+<% if (loop === 0) { -%>
+{%- if featured_chapter == "<%- chapter %>" %}
+<% } else { -%>
+{%- elif featured_chapter == "<%- chapter %>" %}
+<% } %><% loop++ -%>
+  {%- set featured_chapter_quote = "<%- featured_quotes[chapter].quote %>" %}
+  {%- set featured_chapter_stats = {
+<% for (stat in featured_quotes[chapter].stats) { -%>
+<% let stat_count = stat; stat_count++; -%>
+<% if (featured_quotes[chapter].stats) { -%>
+      "stat<%- stat_count -%>":"<%- featured_quotes[chapter].stats[stat][0] %>","label<%- stat_count -%>":"<%- featured_quotes[chapter].stats[stat][1] -%>"<% if (stat_count < featured_quotes[chapter].stats.length) { -%>,<% } %>
+<% } -%>
+<% } -%>
+    }
+  %}
+<% } -%>
+{% endif %}
+
+{{ featuredChapter(featured_chapter, featured_chapter_quote, featured_chapter_stats) }}

src/templates/en/2019/chapters/accessibility.html

@@ -147,7 +147,7 @@
 
 {% endblock %} {% block main_content %}
 <h2 id="introduction"><a href="#introduction" class="anchor-link">Introduction</a></h2>
-<p>Accessibility on the web is essential for an inclusive and equitable society. As more of our social and work lives move to the online world, it becomes even more important for people with disabilities to be able to participate in all online interactions without barriers. Just as building architects can create or omit accessibility features such as wheelchair ramps, web developers can help or hinder the assistive technology users rely on.</p>
+<p><span id="featured-quote">Accessibility on the web is essential for an inclusive and equitable society. As more of our social and work lives move to the online world, it becomes even more important for people with disabilities to be able to participate in all online interactions without barriers. Just as building architects can create or omit accessibility features such as wheelchair ramps, web developers can help or hinder the assistive technology users rely on.</span></p>
 <p>When thinking about users with disabilities, we should remember that their user journeys are often the same—they just use different tools. These popular tools include but are not limited to: screen readers, screen magnifiers, browser or text size zooming, and voice controls.</p>
 <p>Often, improving the accessibility of your site has benefits for everyone. While we typically think of people with disabilities as people with a permanent disability, anybody can have a temporary or situational disability. For example, someone might be permanently blind, have a temporary eye infection, or, situationally, be outside under a glaring sun. All of these might explain why someone is unable to see their screen. Everyone has situational disabilities, and so improving the accessibility of your web page will improve the experience of all users in any situation.</p>
 <p>The <a href="https://www.w3.org/WAI/WCAG21/quickref/">Web Content Accessibility Guidelines</a> (WCAG) advise on how to make a website accessible. These guidelines were used as the basis for our analysis. However, in many cases it is difficult to programmatically analyze the accessibility of a website. For instance, the web platform provides several ways of achieving similar functional results, but the underlying code powering them may be completely different. Therefore, our analysis is just an approximation of overall web accessibility.</p>
@@ -167,6 +167,7 @@ <h3 id="color-contrast"><a href="#color-contrast" class="anchor-link">Color cont
   <figcaption id="fig1-caption"><a href="#fig-1" class="anchor-link">Figure 1.</a> Example of what text with insufficient color contrast looks like. Courtesy of LookZook</figcaption>
 </figure>
 <p>Only 22.04% of sites gave all of their text sufficient color contrast. Or in other words: 4 out of every 5 sites have text which easily blends into the background, making it unreadable.</p>
+<p><span id="featured-stat-1" hidden="">22%</span><span id="featured-stat-label-1" hidden="">Sites using sufficient colour contrast</span></p>
 <p class="note">Note that we weren't able to analyze any text inside of images, so our reported metric is an upper-bound of the total number of websites passing the color contrast test.</p>
 <h3 id="zooming-and-scaling-pages"><a href="#zooming-and-scaling-pages" class="anchor-link">Zooming and scaling pages</a></h3>
 <p>Using a <a href="https://accessibleweb.com/question-answer/minimum-font-size/">legible font size</a> and <a href="https://www.w3.org/WAI/WCAG21/quickref/#target-size">target size</a> helps users read and interact with your website. But even websites perfectly following all of these guidelines can't meet the specific needs of each visitor. This is why device features like pinch-to-zoom and scaling are so important: they allow users to tweak your pages so their needs are met. Or in the case of particularly inaccessible sites using tiny fonts and buttons, it gives users the chance to even use the site.</p>
@@ -206,6 +207,7 @@ <h2 id="media-on-the-web"><a href="#media-on-the-web" class="anchor-link">Media
 <h3 id="alternative-text-on-images"><a href="#alternative-text-on-images" class="anchor-link">Alternative text on images</a></h3>
 <p>Images are an essential part of the web experience. They can tell powerful stories, grab attention, and elicit emotion. But not everyone can see these images that we rely on to tell parts of our stories. Thankfully, in 1995, HTML 2.0 provided a solution to this problem: <a href="https://webaim.org/techniques/alttext/">the alt attribute</a>. The alt attribute provides web developers with the capability of adding a textual description to the images we use, so that when someone is unable to see our images (or the images are unable to load), they can read the alt text for a description. The alt text fills them in on the part of the story they would have otherwise missed.</p>
 <p>Even though alt attributes have been around for 25 years, 49.91% of pages still fail to provide alt attributes for some of their images, and 8.68% of pages never use them at all.</p>
+<p><span id="featured-stat-2" hidden="">50%</span><span id="featured-stat-label-2" hidden="">Sites with missing image alt attributes</span></p>
 <h3 id="captions-for-audio-and-video"><a href="#captions-for-audio-and-video" class="anchor-link">Captions for audio and video</a></h3>
 <p>Just as images are powerful storytellers, so too are audio and video in grabbing attention and expressing ideas. When audio and video content is not captioned, users who cannot hear this content miss out on large portions of the web. One of the most common things we hear from users who are Deaf or hard of hearing is the need to include captions for all audio and video content.</p>
 <p>
@@ -287,6 +289,7 @@ <h3 id="skip-links"><a href="#skip-links" class="anchor-link">Skip Links</a></h3
 </figure>
 <p>In fact you don't need to even leave this site as we <a href="https://github.com/HTTPArchive/almanac.httparchive.org/pull/645">use them here too</a>!</p>
 <p>It's hard to accurately determine what a skip link is when analyzing sites. For this analysis, if we found an anchor link (<code>href=#heading1</code>) within the first 3 links on the page, we defined this as a page with a skip link. So 14.19% is a strict upper bound.</p>
+<p><span id="featured-stat-3" hidden="">14%</span><span id="featured-stat-label-3" hidden="">Sites using a skip link</span></p>
 <h3 id="shortcuts"><a href="#shortcuts" class="anchor-link">Shortcuts</a></h3>
 <p>
   Shortcut keys set via the <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts"><code>aria-keyshortcuts</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey"><code>accesskey</code></a> attributes can be used in one of two ways: