Auto generate featured chapters

src/.gitignore

@@ -2,6 +2,7 @@
 .vscode/
 node_modules/
 templates/*/*/chapters/
+templates/*/*/featured_chapters.html
 templates/*/*/ebook.html
 templates/sitemap.xml
 static/html/

src/content/en/2019/accessibility.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1764
 results: https://docs.google.com/spreadsheets/d/16JGy-ehf4taU0w4ABiKjsHGEXNDXxOlb__idY8ifUtQ/
 queries: 09_Accessibility
+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.
+featured_stat_1: 22%
+featured_stat_label_1: Sites using sufficient colour contrast
+featured_stat_2: 50%
+featured_stat_label_2: Sites with missing image alt attributes
+featured_stat_3: 14%
+featured_stat_label_3: Sites using a skip link
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/caching.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1771
 results: https://docs.google.com/spreadsheets/d/1mnq03DqrRBwxfDV05uEFETK0_hPbYOynWxZkV3tFgNk/
 queries: 16_Caching
+featured_quote: Caching is a technique that enables the reuse of previously downloaded content. It provides a significant performance benefit by avoiding costly network requests and it also helps scale an application by reducing the traffic to a website's origin infrastructure. There's an old saying, "the fastest request is the one that you don't have to make," and caching is one of the key ways to avoid having to make requests.
+featured_stat_1: 27%
+featured_stat_label_1: Responses not using any caching headers
+featured_stat_2: 39%
+featured_stat_label_2: Responses using the <code>Vary</code> header
+featured_stat_3: 82%
+featured_stat_label_3: Sites that could save 1Mb by optimising caching better
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/cdn.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1772
 results: https://docs.google.com/spreadsheets/d/1Y7kAxjxUl8puuTToe6rL3kqJLX1ftOb0nCcD8m3lZBw/
 queries: 17_CDN
+featured_quote: "Use a Content Delivery Network" was one of Steve Souders original recommendations for making web sites load faster. It's advice that remains valid today, and in this chapter of the Web Almanac we're going to explore how widely Steve's recommendation has been adopted, how sites are using Content Delivery Networks (CDNs), and some of the features they're using.
+featured_stat_1: 20%
+featured_stat_label_1: Home pages served by CDN
+featured_stat_2: 9.61%
+featured_stat_label_2: Homepages served by most popular CDN (Cloudflare)
+featured_stat_3: 30%
+featured_stat_label_3: 3P CDN requests that use Google
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/cms.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1769
 results: https://docs.google.com/spreadsheets/d/1FDYe6QdoY3UtXodE2estTdwMsTG-hHNrOe9wEYLlwAw/
 queries: 14_CMS
+featured_quote: The general term Content Management System (CMS) refers to systems enabling individuals and organizations to create, manage, and publish content. A CMS for web content, specifically, is a system aimed at creating, managing, and publishing content to be consumed and experienced via the open web. Each CMS implements some subset of a wide range of content management capabilities and the corresponding mechanisms for users to build websites easily and effectively around their content.
+featured_stat_1: 40%
+featured_stat_label_1: Pages powered by a CMS
+featured_stat_2: 74%
+featured_stat_label_2: CMS sites that use WordPress
+featured_stat_3: 1,232 KB
+featured_stat_label_3: Median image KB loaded per desktop CMS page.
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/compression.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1770
 results: https://docs.google.com/spreadsheets/d/1IK9kaScQr_sJUwZnWMiJcmHEYJV292C9DwCfXH6a50o/
 queries: 15_Compression
+featured_quote: HTTP compression is a technique that allows you to encode information using fewer bits than the original representation. When used for delivering web content, it enables web servers to reduce the amount of data transmitted to clients. This increases the efficiency of the client's available bandwidth, reduces page weight, and improves web performance.
+featured_stat_1: 38%
+featured_stat_label_1: HTTP responses using text-based compression
+featured_stat_2: 80%
+featured_stat_label_2: Use of gzip compression
+featured_stat_3: 56%
+featured_stat_label_3: HTML responses not using compression
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/css.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1757
 results: https://docs.google.com/spreadsheets/d/1uFlkuSRetjBNEhGKWpkrXo4eEIsgYelxY-qR9Pd7QpM/
 queries: 02_CSS
+featured_quote: Cascading Style Sheets (CSS) are used to paint, format, and layout web pages. Their capabilities span concepts as simple as text color to 3D perspective. It also has hooks to empower developers to handle varying screen sizes, viewing contexts, and printing. CSS helps developers wrangle content and ensure it's adapting properly to the user.
+featured_stat_1: 5%
+featured_stat_label_1: Pages using custom properties
+featured_stat_2: 2%
+featured_stat_label_2: Sites that use CSS Grid
+featured_stat_3: 780
+featured_stat_label_3: Number of digits in largest Z-Index value
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/ecommerce.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1768
 results: https://docs.google.com/spreadsheets/d/1FUMHeOPYBgtVeMU5_pl2r33krZFzutt9vkOpphOSOss/
 queries: 13_Ecommerce
+featured_quote: Nearly 10% of the home pages in this study were found to be on an ecommerce platform. An "ecommerce platform" is a set of software or services that enables you to create and operate an online store, including Paid-for services such as Shopify, software platforms such as Magento Open Source, and Hosted platforms such as Magento Commerce.
+featured_stat_1: 3.98%
+featured_stat_label_1: Sites using WooCommerce the most popular ecommerce platform
+featured_stat_2: 116
+featured_stat_label_2: Number of ecommerce platforms detected
+featured_stat_3: 1,517 KB
+featured_stat_label_3: Median image bytes per mobile ecommerce page
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/fonts.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1761
 results: https://docs.google.com/spreadsheets/d/108g6LXdC3YVsxmX1CCwrmpZ3-DmbB8G_wwgQHX5pn6Q/
 queries: 06_Fonts
+featured_quote: Web fonts enable beautiful and functional typography on the web. Using web fonts not only empowers design, but it democratizes a subset of design, as it allows easier access to those who might not have particularly strong design skills. However, for all the good they can do, web fonts can also do great harm to your site's performance if they are not loaded properly.
+featured_stat_1: 74.9%
+featured_stat_label_1: 3P Font Requests that use Google Fonts
+featured_stat_2: 29%
+featured_stat_label_2: Percent of pages that include a Google Fonts stylesheet link
+featured_stat_3: 718
+featured_stat_label_3: Most font requests on a single page
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/http2.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1775
 results: https://docs.google.com/spreadsheets/d/1z1gdS3YVpe8J9K3g2UdrtdSPhRywVQRBz5kgBeqCnbw/
 queries: 20_HTTP_2
+featured_quote: HTTP/2 was the first major update to the main transport protocol of the web in nearly 20 years. It arrived with a wealth of expectations: it promised a free performance boost with no downsides. More than that, we could stop doing all the hacks and work arounds that HTTP/1.1 forced us into, due to its inefficiencies. Bundling, spriting, inlining, and even sharding domains would all become anti-patterns in an HTTP/2 world, as improved performance would be provided by default. This chapter examines how this relatively new technology has fared in the real world.
+featured_stat_1: 95%
+featured_stat_label_1: Users who can use HTTP/2
+featured_stat_2: 27.83%
+featured_stat_label_2: Requests with HTTP/2 prioritisation issues
+featured_stat_3: 8.38%
+featured_stat_label_3: Sites supporting QUIC
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/javascript.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1756
 results: https://docs.google.com/spreadsheets/d/1kBTglETN_V9UjKqK_EFmFjRexJnQOmLLr-I2Tkotvic/
 queries: 01_JavaScript
+featured_quote: 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.
+featured_stat_1: 89%
+featured_stat_label_1: Sites with more third-party code than first-party
+featured_stat_2: 83%
+featured_stat_label_2: Sites that use jQuery
+featured_stat_3: 4.6%
+featured_stat_label_3: Home pages using React
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/markup.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1758
 results: https://docs.google.com/spreadsheets/d/1WnDKLar_0Btlt9UgT53Giy2229bpV4IM2D_v6OM_WzA/
 queries: 03_Markup
+featured_quote: As of July 2019, the HTTP Archive has begun collecting all used <em>element</em> names in the DOM for about 4.4 million desktop home pages, and about 5.3 million mobile home pages which we can now begin to research and dissect. This crawl encountered over 5,000 distinct <em>non-standard element names</em> in these pages, so we capped the total distinct number of elements that we count to the 'top' 5,048.
+featured_stat_1: 11
+featured_stat_label_1: Elements used on more than 90% of pages
+featured_stat_2: 15%
+featured_stat_label_2: Pages that contain deprecated elements
+featured_stat_3: 65
+featured_stat_label_3: Variants of carousels found
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/media.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1759
 results: https://docs.google.com/spreadsheets/d/1hj9bY6JJZfV9yrXHsoCRYuG8t8bR-CHuuD98zXV7BBQ/
 queries: 04_Media
+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.
+featured_stat_1: 1 MB
+featured_stat_label_1: Median size of home pages
+featured_stat_2: 60%
+featured_stat_label_2: JPEG use amongst images
+featured_stat_3: 2%
+featured_stat_label_3: Use of <code>&lt;picture&gt;</code> element
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/mobile-web.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1767
 results: https://docs.google.com/spreadsheets/d/1dPBDeHigqx9FVaqzfq7CYTz4KjllkMTkfq4DG4utE_g/
 queries: 12_Mobile_Web
+featured_quote: Since 2007, the mobile web has grown at an explosive rate. And now, 13 years later, mobile accounts for 59% of all searches and 58.7% of all web traffic, according to Akamai mPulse data in July 2019. It's no longer an afterthought, but the primary way people experience the web. So given how significant mobile is, what kind of experience are we providing our visitors? Where are we falling short? Let's find out.
+featured_stat_1: 65%
+featured_stat_label_1: Sites with medium or large content shifts during load
+featured_stat_2: 32%
+featured_stat_label_2: Sites that disable zooming
+featured_stat_3: 34%
+featured_stat_label_3: Sites with sufficiently sized tap targets
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/page-weight.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1773
 results: https://docs.google.com/spreadsheets/d/1nWOo8efqDgzmA0wt1ipplziKhlReAxnVCW1HkjuFAxU/
 queries: 18_PageWeight
+featured_quote: The common argument as to why page size doesn't matter anymore is that, thanks to high-speed internet and our souped-up devices, we can serve massive, complex (and massively complex) pages to the general population. This assumption works fine, as long as you're okay with ignoring the vast swathe of internet users who don't have access to said high-speed internet and souped-up devices.
+featured_stat_1: 20%
+featured_stat_label_1: Sites sending more than 6 MB of Data
+featured_stat_2: 434 KB
+featured_stat_label_2: Increase in median desktop size in last year
+featured_stat_3: 69
+featured_stat_label_3: Median requests per home page
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/performance.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1762
 results: https://docs.google.com/spreadsheets/d/1zWzFSQ_ygb-gGr1H1BsJCfB7Z89zSIf7GX0UayVEte4/
 queries: 07_Performance
+featured_quote: Performance is a visceral part of the user experience. For many websites, an improvement to the user experience by speeding up the page load time aligns with an improvement to conversion rates. Conversely, when performance is poor, users don't convert as often and have even been observed to be rage clicking on the page in frustration.
+featured_stat_1: 13%
+featured_stat_label_1: Sites with fast FCP
+featured_stat_2: 42%
+featured_stat_label_2: Sites with slow TTFB
+featured_stat_3: 40%
+featured_stat_label_3: Sites with fast FID
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/pwa.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1766
 results: https://docs.google.com/spreadsheets/d/19BI3RQc_vR9bUPPZfVsF_4gpFWLNT6P0pLcAdL-A56c/
 queries: 11_PWA
+featured_quote: Progressive Web Apps (PWAs) are a new class of web applications, building on top of platform primitives like the Service Worker APIs. Service workers allow apps to support network-independent loading by acting as a network proxy, intercepting your web app's outgoing requests, and replying with programmatic or cached responses.
+featured_stat_1: 0.44%
+featured_stat_label_1: Sites that register a service worker
+featured_stat_2: 15%
+featured_stat_label_2: Pageviews that use a Service Worker
+featured_stat_3: 57%
+featured_stat_label_3: PWAs that use the <code>standalone</code> <code>display</code> property
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/resource-hints.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1774
 results: https://docs.google.com/spreadsheets/d/14QBP8XGkMRfWRBbWsoHm6oDVPkYhAIIpfxRn4iOkbUU/
 queries: 19_Resource_Hints
+featured_quote: Resource hints provide <em>hints</em> to the browser about what resources will be needed soon. The action that the browser takes as a result of receiving this hint will vary depending on the type of resource hint; different resource hints kick off different actions. When used correctly, they can improve page performance by giving a head start to important anticipated actions.
+featured_stat_1: 29%
+featured_stat_label_1: Sites using <code>dns-prefetch</code>
+featured_stat_2: 88%
+featured_stat_label_2: Resource hints using the <code>as</code> attribute
+featured_stat_3: 0.04%
+featured_stat_label_3: Usage of priority hints
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/security.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1763
 results: https://docs.google.com/spreadsheets/d/1Zq2tQhPE06YZUcbzryRrBE6rdZgHHlqEp2XcgS37cm8/
 queries: 08_Security
+featured_quote: As the web grows in capabilities and allows access to more and more sensitive data, it becomes increasingly important for developers to adopt web security features to protect their applications. The security features reviewed in this chapter are defenses built into the web platform itself, available to every web author.
+featured_stat_1: 79%
+featured_stat_label_1: Sites using HTTPS
+featured_stat_2: 41%
+featured_stat_label_2: Sites using TLSv1.3
+featured_stat_3: 4.43%
+featured_stat_label_3: Sites using CSP
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/seo.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1765
 results: https://docs.google.com/spreadsheets/d/1uARtBWwz9nJOKqKPFinAMbtoDgu5aBtOhsBNmsCoTaA/
 queries: 10_SEO
+featured_quote: Search Engine Optimization (SEO) isn't just a hobby or a side project for digital marketers, it is crucial for the success of a website. The primary goal of SEO is to make sure that a website is optimized for the search engine bots that need to crawl and index its pages, as well as for the users that will be navigating the website and consuming its content. SEO impacts everyone working on a website, from the developer who is building it, through to the digital marketer who will need to promote it to new potential customers.
+featured_stat_1: 346
+featured_stat_label_1: No. of words on median page
+featured_stat_2: 11%
+featured_stat_label_2: Pages with no heading tags
+featured_stat_3: 15%
+featured_stat_label_3: Sites eligible for rich results
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/en/2019/third-parties.md

@@ -10,6 +10,13 @@ translators: []
 discuss: 1760
 results: https://docs.google.com/spreadsheets/d/1iC4WkdadDdkqkrTY32g7hHKhXs9iHrr3Bva8CuPjVrQ/
 queries: 05_Third_Parties
+featured_quote: The open web is vast, linkable, and interoperable by design. The ability to grab someone else’s complex library and use it on your site with a single <code>&lt;link&gt;</code> or <code>&lt;script&gt;</code> element has supercharged developers’ productivity and enabled awesome new web experiences; on the flip side, the immense popularity of a select few third-party providers raises important performance and privacy concerns. This chapter examines the prevalence and impact of third-party code on the web in 2019, the web usage patterns that lead to the popularity of third-party solutions, and potential repercussions for the future of web performance and privacy.
+featured_stat_1: 93%
+featured_stat_label_1: Pages with 3P
+featured_stat_2: 49%
+featured_stat_label_2: 3P requests
+featured_stat_3: 28%
+featured_stat_label_3: 3P bytes
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-10-06T00:00:00.000Z
 ---

src/content/es/2019/css.md

@@ -10,6 +10,13 @@ translators: [c-torres]
 discuss: 1757
 results: https://docs.google.com/spreadsheets/d/1uFlkuSRetjBNEhGKWpkrXo4eEIsgYelxY-qR9Pd7QpM/
 queries: 02_CSS
+featured_quote: Las Hojas de Estilo en Cascada (CSS por sus siglas en inglés) se utilizan para pintar, formatear y diseñar páginas web. Sus capacidades abarcan conceptos tan simples como el color del texto hasta perspectiva 3D. También tiene ganchos para permitir a los desarrolladores manejar diferentes tamaños de pantalla, contextos de visualización e impresión. CSS ayuda a los desarrolladores a lidiar con el contenido y a asegurarse de que se adapte correctamente al usuario.
+featured_stat_1: 5%
+featured_stat_label_1: Páginas que utilizan custom properties
+featured_stat_2: 2%
+featured_stat_label_2: Sitios que utilizan CSS Grid
+featured_stat_3: 780
+featured_stat_label_3: Número de dígitos en el valor Z-Index más grande
 published: 2019-11-11T00:00:00.000Z
 last_updated: 2020-11-03T00:00:00.000Z
 ---