Fix typos (#544)

src/config/spelling_ignore_words.txt

@@ -5,6 +5,7 @@
 accesskey
 activeview
 admin
+ajax
 alankent
 amsterdam
 andydavies
@@ -13,6 +14,7 @@ apps
 argyleink
 artice
 arturjanc
+aspnetcdn
 assistive
 async
 autocomplete
@@ -44,20 +46,23 @@ crawlability
 crawlable
 cript
 crossorigin
+crsb
 cryptocurrency
 csscriptdict
 cufon
 cufontext
 currentcolor
 cwebp
 darkgray
+dasherized
 datacenter
 datalist
 datamine
 deprioritize
 detectible
 doubleclick
 dougsillars
+downlink
 ebay
 ecommerce
 endlock
@@ -67,6 +72,7 @@ favicon
 fbevents
 filesize
 flexbox
+fontawesome
 frontend
 geolocation
 geos
@@ -77,6 +83,7 @@ googleads
 googleadservices
 googleapis
 googletagservices
+googleusercontent
 gstatic
 gunicorn
 gzip
@@ -94,14 +101,17 @@ inbox
 indexability
 inline
 inlining
+inln
 installability
 interoperable
 jank
 javascript
 jdiv
 jeffy
+jimstatic
 jpegs
 jquery
+jsdelivr
 json
 judgement
 kbytes
@@ -111,16 +121,20 @@ lang
 leaderboards
 lightgray
 linux
+lozad
 maxage
+maxcdn
 meetup
 meetups
 metadata
 microsites
+microsoft
 middleboxes
 mozilla
 namespace
 namespaces
 namespacing
+netdna
 nginx
 nocache
 noindex
@@ -135,10 +149,12 @@ olark
 onload
 openresty
 opensans
+opentype
 opsz
 outlier
 outsized
 pagead
+parastorage
 paywalls
 paulcalvano
 pclass
@@ -170,9 +186,11 @@ readible
 repurposed
 roboto
 rollout
+roun
 rowheader
 safelist
 sameorigin
+scdn
 scotthelme
 screenshot
 screenshots
@@ -183,15 +201,19 @@ setsize
 sharding
 shoesbycolin
 shopify
+shopifycdn
 simpl
 sitelinks
 slategray
 smartphones
 snuck
 spriting
 spsn
+squarespace
 srcset
+slnt
 ssllabs
+stackpath
 staticxx
 stylesheet
 stylesheets
@@ -201,18 +223,24 @@ subresource
 subresources
 subsampling
 tailwindcss
+tawk
 terabytes
 textarea
 textbox
 timeline
 timeseries
 timestamp
 tomayac
+treemap
+truetype
 tunetheweb
+typekit
 uber
+unpkg
 unsecurely
 uptick
 userland
+utdstc
 versioned
 viewport
 viewports

src/content/en/2019/accessibility.md

@@ -38,7 +38,7 @@ In order to make sure your website is readable under these conditions, making su
   <a href="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png">
     <img alt="Figure 1. Example of what text with insufficient color contrast looks like. Courtesy of LookZook" aria-labelledby="fig1-caption" aria-describedby="fig1-description" src="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png" width="600">
   </a>
-  <div id="fig1-description" class="visually-hidden">Four colored boxes of orange and gray shades with white text overlayed inside creating two columns. The left column says Too lightly colored and has the orange background color written as #FCA469. The right column says Recommended and the orange background color is written as #F56905. The top box in each column has an orange background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grey background shows the orange color in grayscale. Courtesy of LookZook.</div>
+  <div id="fig1-description" class="visually-hidden">Four colored boxes of orange and gray shades with white text overlaid inside creating two columns. The left column says Too lightly colored and has the orange background color written as #FCA469. The right column says Recommended and the orange background color is written as #F56905. The top box in each column has an orange background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grey background shows the orange color in greyscale. Courtesy of LookZook.</div>
   <figcaption id="fig1-caption">Figure 1. Example of what text with insufficient color contrast looks like. Courtesy of LookZook</figcaption>
 </figure>
 
@@ -180,7 +180,7 @@ If you'd like to see a skip link in action for yourself, you can! Just do a quic
   <a href="/static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png">
     <img alt="Figure 7. What a skip link looks like on google.com." aria-labelledby="fig7-caption" aria-describedby="fig7-description" src="/static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png" width="600">
   </a>
-  <div id="fig7-description" class="visually-hidden">Screenshot of Google search results page for search 'http archive'. The visible 'Skip to main content' link is surrounded by a blue focus highlight and a yellow overlayed box with a red arrow pointing to the skip link reads 'A skip link on google.com'.</div>
+  <div id="fig7-description" class="visually-hidden">Screenshot of Google search results page for search 'http archive'. The visible 'Skip to main content' link is surrounded by a blue focus highlight and a yellow overlaid box with a red arrow pointing to the skip link reads 'A skip link on google.com'.</div>
   <figcaption id="fig7-caption">Figure 7. What a skip link looks like on google.com.</figcaption>
 </figure>
 

src/content/en/2019/cdn.md

@@ -646,7 +646,7 @@ For resource requests (including same-domain and third-party), the TLS negotiati
   <a href="/static/images/2019/17_CDN/resource_tls_negotiation_time.png">
     <img alt="Distribution of TLS negotiation time for site resources broken down by CDN" aria-labelledby="fig10-caption" aria-describedby="fig10-description" src="/static/images/2019/17_CDN/resource_tls_negotiation_time.png" width="600">
   </a>
-  <div id="fig10-description" class="visually-hidden">Graph showing most CDNs have a TLS negotion time of around 80 ms, but some (Microsoft Azure, Yahoo, Edgecast, ORIGIN, and CDNetworks) start to creep out towards 200 ms - especially when going above the p50 percentile.</div>
+  <div id="fig10-description" class="visually-hidden">Graph showing most CDNs have a TLS negotiation time of around 80 ms, but some (Microsoft Azure, Yahoo, Edgecast, ORIGIN, and CDNetworks) start to creep out towards 200 ms - especially when going above the p50 percentile.</div>
   <figcaption id="fig10-caption">Figure 10. Resource TLS negotiation time.</figcaption>
 </figure>
 

src/content/en/2019/cms.md

@@ -30,7 +30,7 @@ As the web evolved, it became more powerful, but also more complicated. As a con
   <a href="/static/images/2019/14_CMS/web-evolution.png">
     <img src="/static/images/2019/14_CMS/web-evolution.png" aria-labelledby="fig1-caption" aria-describedby="fig1-description" alt="Figure 1. Chart illustrating the increase in web capabilities from 1999 to 2018." width="600">
   </a>
-  <div id="fig1-description" class="visually-hidden">On the left, labelled circa 1999, we have a bar chart with two bars showing what can be done is close to what is actually done. On the right, labelled 2018, we have a similar bar chart but what can be done is much larger, and what is done is slightly larger. The gap between what can be done and what is actually done has greatly increased.</div>
+  <div id="fig1-description" class="visually-hidden">On the left, labeled circa 1999, we have a bar chart with two bars showing what can be done is close to what is actually done. On the right, labeled 2018, we have a similar bar chart but what can be done is much larger, and what is done is slightly larger. The gap between what can be done and what is actually done has greatly increased.</div>
   <figcaption id="fig1-caption">Figure 1. Chart illustrating the increase in web capabilities from 1999 to 2018.</figcaption>
 </figure>
 

src/content/en/2019/compression.md

@@ -287,7 +287,7 @@ Google's [Lighthouse](https://developers.google.com/web/tools/lighthouse) tool e
   <a href="/static/images/2019/15_Compression/ch15_fig8_lighthouse.jpg">
     <img src="/static/images/2019/15_Compression/ch15_fig8_lighthouse.jpg" alt="Figure 10. Lighthouse compression suggestions" aria-labelledby="fig10-caption" aria-describedby="fig10-description"  width="600">
   </a>
-  <div id="fig10-description" class="visually-hidden">A screenshot of a Lighthouse report showing a list of reources (with the names redacted) and showing the size and the potential saving. For the first item there is a potentialy significant saving from 91 KB to 73 KB, while for other smaller files of 6 KB or less there are smaller savings of 4 KB to 1 KB.</div>
+  <div id="fig10-description" class="visually-hidden">A screenshot of a Lighthouse report showing a list of resources (with the names redacted) and showing the size and the potential saving. For the first item there is a potentially significant saving from 91 KB to 73 KB, while for other smaller files of 6 KB or less there are smaller savings of 4 KB to 1 KB.</div>
   <figcaption id="fig10-caption">Figure 10. Lighthouse compression suggestions.</figcaption>
 </figure>
 

src/content/en/2019/http2.md

@@ -211,7 +211,7 @@ HTTP Archive measures the number of TCP connections per page, and that is droppi
   <a href="/static/images/2019/20_HTTP_2/ch20_fig10_total_requests_per_page_trend_over_years.png">
     <img alt="Figure 10. Total requests per page." aria-labelledby="fig10-caption" aria-describedby="fig10-description" src="/static/images/2019/20_HTTP_2/ch20_fig10_total_requests_per_page_trend_over_years.png" width="600">
   </a>
-  <div id="fig10-description" class="visually-hidden">Timeseries chart of the number of requests per page, with themedian desktop page having 74 requests and the median mobile page having 69 requests as of July 2019. The trend is relatively flat.</div>
+  <div id="fig10-description" class="visually-hidden">Timeseries chart of the number of requests per page, with the median desktop page having 74 requests and the median mobile page having 69 requests as of July 2019. The trend is relatively flat.</div>
   <figcaption id="fig10-caption">Figure 10. Total requests per page. (Source: <a href="https://httparchive.org/reports/state-of-the-web#reqTotal">HTTP Archive</a>)</figcaption>
 </figure>
 

src/content/en/2019/markup.md

@@ -128,7 +128,7 @@ In order to discuss numbers about the use of elements (standard, deprecated or c
     <a href="/static/images/2019/03_Markup/fig7.png">
       <img src="/static/images/2019/03_Markup/fig7.png" alt="Figure 7. Top 150 elements." aria-labelledby="fig7-caption" aria-describedby="fig7-description" width="600" data-width="600" data-height="778" data-seamless data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTbHgqcSepZye6DrCTpifFAUYxKT1hEO56585awyMips8oiPMLYu20GETuIE8mALkm814ObJyktEe2P/pubchart?oid=1694360298&amp;format=interactive">
     </a>
-    <div id="fig7-description" class="visually-hidden">Bar chart showing a decreasing used of elements in descending order: html, head, body, title at above 99% usage, meta, a, div above 98% usage, link, script, imge, span above 90% usage, ul, li , p, style, input, br, form above 70% usage, h2, h1, iframe, h3, button, footer, header, nav above 50% usage and other less well-known tags trailing down from below 50% to almost 0% usage.</div>
+    <div id="fig7-description" class="visually-hidden">Bar chart showing a decreasing used of elements in descending order: html, head, body, title at above 99% usage, meta, a, div above 98% usage, link, script, img, span above 90% usage, ul, li , p, style, input, br, form above 70% usage, h2, h1, iframe, h3, button, footer, header, nav above 50% usage and other less well-known tags trailing down from below 50% to almost 0% usage.</div>
   <figcaption id="fig7-caption">Figure 7. Top 150 elements.</figcaption>
 </figure>
 

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

@@ -135,7 +135,7 @@ To help us mitigate this problem, there are [accessibility guidelines](https://d
   <a href="/static/images/2019/12_Mobile_Web/example-of-good-and-bad-color-contrast-lookzook.png">
     <img src="/static/images/2019/12_Mobile_Web/example-of-good-and-bad-color-contrast-lookzook.png" alt="Figure 4. Example of what text with insufficient color contrast looks like. Courtesy of LookZook" aria-labelledby="fig4-caption" aria-describedby="fig4-description">
   </a>
-  <div id="fig4-description" class="visually-hidden">Four colored boxes of orange and gray shades with white text overlayed inside creating two columns, one where the background color is too lightly colored compared to the white text and one where the background color is recommended compared to the white text. The hex code of each color is displayed, white is #FFFFFF, the light shade of orange background is #FCA469, and the recommended shade of orange background is #F56905. Image courtesy of LookZook</div>
+  <div id="fig4-description" class="visually-hidden">Four colored boxes of orange and gray shades with white text overlaid inside creating two columns, one where the background color is too lightly colored compared to the white text and one where the background color is recommended compared to the white text. The hex code of each color is displayed, white is #FFFFFF, the light shade of orange background is #FCA469, and the recommended shade of orange background is #F56905. Image courtesy of LookZook</div>
   <figcaption id="fig4-caption">Figure 4. Example of what text with insufficient color contrast looks like. Courtesy of LookZook</figcaption>
 </figure>
 

src/content/en/2019/pwa.md

@@ -131,7 +131,7 @@ Looking at the values developers set for the `display` property, it becomes imme
   <a href="/static/images/2019/11_PWA/fig7.png">
     <img src="/static/images/2019/11_PWA/fig7.png" alt="Figure 7. Usage of web app manifest display properties." aria-labelledby="fig7-caption" aria-describedby="fig7-description" width="600" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-src="https://docs.google.com/spreadsheets/d/e/2PACX-1vT7DUzACr4eBhNU4cDz8-17oSx2qYbi9OFDjngz0NXNBP2IzZFxvDxLX2XThlN4SZymKMygOXzpI2AJ/pubchart?oid=1514793237&amp;format=interactive">
   </a>
-  <div id="fig7-description" class="visually-hidden">Bar chart showing how the display property of web app manifests is used by desktop and mobile websites. In both cases, the "standalone" value is used 57% of the time. The property is not set at all in 38% of manifests. The "minimal UI", "browser", and "fullsceen" values each make up only 1 or 2% of usage.</div>
+  <div id="fig7-description" class="visually-hidden">Bar chart showing how the display property of web app manifests is used by desktop and mobile websites. In both cases, the "standalone" value is used 57% of the time. The property is not set at all in 38% of manifests. The "minimal UI", "browser", and "fullscreen" values each make up only 1 or 2% of usage.</div>
   <figcaption id="fig7-caption">Figure 7. Usage of web app manifest <code>display</code> properties.</figcaption>
 </figure>
 

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

@@ -261,7 +261,7 @@ <h3 id="color-contrast">Color contrast</h3>
         <a href="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png">
           <img alt="Figure 1. Example of what text with insufficient color contrast looks like. Courtesy of LookZook" aria-labelledby="fig1-caption" aria-describedby="fig1-description" src="/static/images/2019/09_Accessibility/example-of-good-and-bad-color-contrast-lookzook.png" width="600" loading="lazy" />
         </a>
-        <div id="fig1-description" class="visually-hidden">Four colored boxes of orange and gray shades with white text overlayed inside creating two columns. The left column says Too lightly colored and has the orange background color written as #FCA469. The right column says Recommended and the orange background color is written as #F56905. The top box in each column has an orange background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grey background shows the orange color in grayscale. Courtesy of LookZook.</div>
+        <div id="fig1-description" class="visually-hidden">Four colored boxes of orange and gray shades with white text overlaid inside creating two columns. The left column says Too lightly colored and has the orange background color written as #FCA469. The right column says Recommended and the orange background color is written as #F56905. The top box in each column has an orange background with white text #FFFFFF and the bottom box has a gray background with white text #FFFFFF. The grey background shows the orange color in greyscale. Courtesy of LookZook.</div>
         <figcaption id="fig1-caption">Figure 1. 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>
@@ -374,7 +374,7 @@ <h3 id="skip-links">Skip Links</h3>
         <a href="/static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png">
           <img alt="Figure 7. What a skip link looks like on google.com." aria-labelledby="fig7-caption" aria-describedby="fig7-description" src="/static/images/2019/09_Accessibility/example-of-a-skip-link-on-google.com.png" width="600" loading="lazy" />
         </a>
-        <div id="fig7-description" class="visually-hidden">Screenshot of Google search results page for search 'http archive'. The visible 'Skip to main content' link is surrounded by a blue focus highlight and a yellow overlayed box with a red arrow pointing to the skip link reads 'A skip link on google.com'.</div>
+        <div id="fig7-description" class="visually-hidden">Screenshot of Google search results page for search 'http archive'. The visible 'Skip to main content' link is surrounded by a blue focus highlight and a yellow overlaid box with a red arrow pointing to the skip link reads 'A skip link on google.com'.</div>
         <figcaption id="fig7-caption">Figure 7. What a skip link looks like on google.com.</figcaption>
       </figure>
       <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>

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

@@ -789,7 +789,7 @@ <h2 id="tls-negotiation-time-origin-3x-slower-than-cdns">TLS negotiation time: o
         <a href="/static/images/2019/17_CDN/resource_tls_negotiation_time.png">
           <img alt="Distribution of TLS negotiation time for site resources broken down by CDN" aria-labelledby="fig10-caption" aria-describedby="fig10-description" src="/static/images/2019/17_CDN/resource_tls_negotiation_time.png" width="600" loading="lazy" />
         </a>
-        <div id="fig10-description" class="visually-hidden">Graph showing most CDNs have a TLS negotion time of around 80 ms, but some (Microsoft Azure, Yahoo, Edgecast, ORIGIN, and CDNetworks) start to creep out towards 200 ms - especially when going above the p50 percentile.</div>
+        <div id="fig10-description" class="visually-hidden">Graph showing most CDNs have a TLS negotiation time of around 80 ms, but some (Microsoft Azure, Yahoo, Edgecast, ORIGIN, and CDNetworks) start to creep out towards 200 ms - especially when going above the p50 percentile.</div>
         <figcaption id="fig10-caption">Figure 10. Resource TLS negotiation time.</figcaption>
       </figure>
       <p>TLS handshake performance is impacted by a number of factors. These include RTT, TLS record size, and TLS certificate size. While RTT has the biggest impact on the TLS handshake, the second largest driver for TLS performance is the TLS certificate size.</p>