Fix markdown linting (#2371)

.github/linters/.markdown-lint.yml

@@ -25,11 +25,12 @@ MD013: false                  # Don't demand maximum line lengths
 MD024:
   siblings_only: true         # Allows sub-headings to be reused under different headings
 MD026:
-  punctuation: ".,;:!。，；:"  # List of not allowed
+  punctuation: ".,;:。，；:"  # List of not allowed
 MD029: false                  # Ordered list item prefix
 MD033: false                  # Allow inline HTML
 MD034: false                  # Allow base URLs
 MD036: false                  # Emphasis used instead of a heading
+MD037: false                  # Checks for no spaces in emphasis but subject to false positives so turn off
 MD040: false                  # Don't demand language for all code blocks
 
 #################

.github/workflows/linter.yml

@@ -38,7 +38,7 @@ jobs:
           VALIDATE_HTML: true
           VALIDATE_JAVASCRIPT_ES: true
           VALIDATE_JSON: true
-          VALIDATE_MD: true
+          VALIDATE_MARKDOWN: true
           VALIDATE_PYTHON_PYLINT: true
           VALIDATE_PYTHON_FLAKE8: true
           VALIDATE_SQLFLUFF: true

sql/2020/accessibility/README.md

@@ -1,3 +1,5 @@
+# Accessibility queries
+
 ## Files and their purpose
 
 ### [pages_with_longest_alts.sql](./pages_with_longest_alts.sql)

src/content/en/2020/caching.md

@@ -188,7 +188,7 @@ These statistics are interesting when compared with last years data:
 {{ figure_markup(
   image="cache-control-and-max-age-and-expires-2019.png",
   caption="Usage of `Cache-Control` and `Expires` headers in 2019.",
-  description="A bar chart showing the usage of `Cache-Control` and `Expires` headers. In desktop, 72.3% of responses are served with a `Cache-Control` header. 56.3% are served with an `Expires` header, 55.2%	use both `Cache-Control` and `Expires` header, and 26.7% did not include either header. In mobile, 71.7% of responses are served with a `Cache-Control` header, 56.4% are served with an `Expires` header, 55.5% use both `Cache-Control` and `Expires` header, and 27.4% did not include either header.",
+  description="A bar chart showing the usage of `Cache-Control` and `Expires` headers. In desktop, 72.3% of responses are served with a `Cache-Control` header. 56.3% are served with an `Expires` header, 55.2% use both `Cache-Control` and `Expires` header, and 26.7% did not include either header. In mobile, 71.7% of responses are served with a `Cache-Control` header, 56.4% are served with an `Expires` header, 55.5% use both `Cache-Control` and `Expires` header, and 27.4% did not include either header.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vQvridledKYJT8mHVVa5-x_TllkwbPsOaDg66iMWafxJq-KSLLfSHUaA6VoMyLnp9FFJ48vePGpiWQ5/pubchart?oid=651240480&format=interactive",
   sheets_gid="664360335",
   sql_file="cache_control_and_max_age_and_expires_2019.sql"
@@ -302,7 +302,7 @@ We can see a few common errors that are made when attempting to configure a resp
 
 Functionally, `no-cache` and `max-age=0` are similar, since they both require revalidation of a cached resource. The `no-cache` directive can also be used alongside a `max-age` directive that is greater than 0—this results in the object being cached for the specified TTL but being revalidated prior to every use.
 
-When looking at the above three discussed directives, 2.7% of responses include the combination of all three `no-store`, `no-cache` and `max-age=0`	directives, 6.7% of responses include both `no-store` and `no-cache`, and a negligible number of responses (< 0.15%) include `no-store` alone.
+When looking at the above three discussed directives, 2.7% of responses include the combination of all three `no-store`, `no-cache` and `max-age=0` directives, 6.7% of responses include both `no-store` and `no-cache`, and a negligible number of responses (< 0.15%) include `no-store` alone.
 
 As noted above, where `no-store` is specified with either/both of `no-cache` and `max-age=0`, the no-store directive takes precedence, and the other directives are ignored. Therefore, if you don't want content to be cached anywhere, simply specifying `Cache-Control: no-store` is sufficient and is both simpler and uses the minimum number of header bytes.
 

src/content/en/2020/css.md

@@ -1477,7 +1477,7 @@ A small but notable number of pages (around 3000 or 0.05%) were oddly using `@su
 {{ figure_markup(
   image="supports-criteria.png",
   caption="Relative popularity of `@supports` features queried as a percent of occurrences.",
-  description="Bar chart of the relative popularity of @supports features queried as a percent of occurrences. The most popular feature queried is `sticky` at 49% of occurrences on mobile pages, followed by `ime-align` at 24%, `mask-image` at 12%, `overflow-scrolling` at 5%, `grid` at 2%, custom properties, `transform-style`, `max()`, and `object-fit `all at 1%, and `appearance` at approximately 0%.",
+  description="Bar chart of the relative popularity of @supports features queried as a percent of occurrences. The most popular feature queried is `sticky` at 49% of occurrences on mobile pages, followed by `ime-align` at 24%, `mask-image` at 12%, `overflow-scrolling` at 5%, `grid` at 2%, custom properties, `transform-style`, `max()`, and `object-fit` all at 1%, and `appearance` at approximately 0%.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRpe_HsNGpekn6YZV9k6QGmcZPxalqnDrL7DrDY-7X65RZEf_-aGfWuEvhk-yWV83ctIceE1bppCLpj/pubchart?oid=1901533222&format=interactive",
   sheets_gid="1155233487",
   sql_file="supports_criteria.sql"
@@ -1734,7 +1734,7 @@ Another future spec that is currently worked on is <a hreflang="en" href="https:
 {{ figure_markup(
   image="usage-of-explicit-nesting-in-scss.png",
   caption="Usage of explicit nesting in SCSS.",
-  description="Bar chart showing `Total` is used by 85% on desktop and 85% on mobile, `&:pseudo-class` is 83% and 83% respectively, `&.class` is 80% and 80%, `&::pseudo-element` is 66% and 66%, `& (by itself)` is 62% and 62%, `&[attr]` is 57% and 57%, `& >`	24% and 23%, `& +`	21% and 20%, `& descendant` is 16% and 15%, and `&#id` is 6% on desktop and 6% on mobile.",
+  description="Bar chart showing `Total` is used by 85% on desktop and 85% on mobile, `&:pseudo-class` is 83% and 83% respectively, `&.class` is 80% and 80%, `&::pseudo-element` is 66% and 66%, `& (by itself)` is 62% and 62%, `&[attr]` is 57% and 57%, `& >` 24% and 23%, `& +` 21% and 20%, `& descendant` is 16% and 15%, and `&#id` is 6% on desktop and 6% on mobile.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vRpe_HsNGpekn6YZV9k6QGmcZPxalqnDrL7DrDY-7X65RZEf_-aGfWuEvhk-yWV83ctIceE1bppCLpj/pubchart?oid=370242263&format=interactive",
   sheets_gid="1872903377",
   sql_file="sass_nesting.sql"

src/content/en/2020/fonts.md

@@ -94,7 +94,7 @@ It was interesting to note the differences in speed for sites using the various
 {{ figure_markup(
   image="fonts-median-lcp-of-sites-using-hosted-fonts.png",
   caption="Median LCP of sites using hosted fonts.",
-  description="A bar chart showing the median FCP of desktop and mobile sites using various font hosts. `cdn.shopify.com` is fastest at 3,335 on desktop and 8,401 on mobile, `fonts.shopifycdn.com` is at 3,224 and 8,531 respectively, `netdna.bootstrapcdn.com` is at 3,910 and 8,183, `maxcdn.bootstrapcdn.com` is at 4,240 and 8,530, `cdnjs.cloudflare.com` is at 4,105 and 8,730, `use.fontawesome.com `is at 4,519 and 9,166, `fonts.gstatic.com` is at 4,878 and 9,558, `cdn.jsdelivr.net` is at 5,368 and 10,646, `static.parastorage.com` is at 4,322 and 11,813, `use.typekit.net` is at 4,700 and 12,552.",
+  description="A bar chart showing the median FCP of desktop and mobile sites using various font hosts. `cdn.shopify.com` is fastest at 3,335 on desktop and 8,401 on mobile, `fonts.shopifycdn.com` is at 3,224 and 8,531 respectively, `netdna.bootstrapcdn.com` is at 3,910 and 8,183, `maxcdn.bootstrapcdn.com` is at 4,240 and 8,530, `cdnjs.cloudflare.com` is at 4,105 and 8,730, `use.fontawesome.com`is at 4,519 and 9,166, `fonts.gstatic.com` is at 4,878 and 9,558, `cdn.jsdelivr.net` is at 5,368 and 10,646, `static.parastorage.com` is at 4,322 and 11,813, `use.typekit.net` is at 4,700 and 12,552.",
   chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vT2Q4hcDGGdclJH2ym0Pp_f8JWvYur_OQFQNkuScJyO7_ZCR1KPZsewL-mEZhxcuRFcde_Mxio8z_8P/pubchart?oid=2012634758&format=interactive",
   sql_file="04_05.web_font_usage_breakdown_with_fcp.sql"
   )

src/content/en/2020/markup.md

@@ -1024,7 +1024,7 @@ The results show that almost half of the pages we analyzed are using the typical
 
 ### Favicons
 
-The situation around favicons is fascinating. Favicons work with or without markup—some browsers would fall back to <a hreflang="en" href="https://realfavicongenerator.net/faq#why_icons_in_root">looking at the domain root</a>—, accept several image formats, and then also promote several dozen sizes (some tools are reported to generate 45 of them; <a hreflang="en" href="https://realfavicongenerator.net/">realfavicongenerator.net</a> would return _37_ if requested to handle every case). As of this time of writing, there is an <a hreflang="en" href="https://github.com/whatwg/html/issues/4758">open issue</a> for the HTML spec to help improve the situation.
+The situation around favicons is fascinating. Favicons work with or without markup (some browsers would fall back to <a hreflang="en" href="https://realfavicongenerator.net/faq#why_icons_in_root">looking at the domain root</a>), accept several image formats, and then also promote several dozen sizes (some tools are reported to generate 45 of them; <a hreflang="en" href="https://realfavicongenerator.net/">realfavicongenerator.net</a> would return _37_ if requested to handle every case). As of this time of writing, there is an <a hreflang="en" href="https://github.com/whatwg/html/issues/4758">open issue</a> for the HTML spec to help improve the situation.
 
 When we built our tests we didn't check for the presence of images, but only looked at the markup. That means, when you review the following, note that it's more about _how_ favicons are referenced rather than whether or how often they are used.
 

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

@@ -75,10 +75,10 @@ Some takeaways:
   * The top 30 origins constitute 25% of aggregate traffic on mobile.
   * The top 200 origins constitute 33% of aggregate traffic on mobile.
 * The web has a **broad torso**.
- * The top 10k origins constitute roughly two-thirds of traffic: 64% of traffic on mobile.
+  * The top 10k origins constitute roughly two-thirds of traffic: 64% of traffic on mobile.
 * The web has a **long tail**.
- * 3M origins in top 98% on Android versus 1.8M on Windows.
- * The tail is about twice as long on Android as Windows. This is most likely attributable to the larger number of mobile devices and users, compared to desktop.
+  * 3M origins in top 98% on Android versus 1.8M on Windows.
+  * The tail is about twice as long on Android as Windows. This is most likely attributable to the larger number of mobile devices and users, compared to desktop.
 
 #### Traffic to a site from mobile versus desktop (CrUX)
 

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

@@ -23,9 +23,11 @@ featured_stat_label_3: The median number of mobile page requests
 
 Page weight is one of the simpler metrics available. Much like stepping on a human scale to get a sense of your personal weight (well, mass really, but you get it), loading a page will provide a sense of the number and size of resources collected and requested. But as the web and web pages have matured and grown, so have associated metrics — such as page weight. It can affect a page's performance much like personal weight (mass) can do the same. This chapter will take a deeper dive and peel back the layers of web pages and see what it is that constitutes a page's weight at the possible detriment of the end user: you, I, us.
 
+<!-- markdownlint-disable MD018 -->
 ## #PageWeightStillMatters
 
 #PageWeightStillMatters would almost imply that it didn't or ever mattered. It might not have mattered when text based Craigslist launched. But 25 years ago when it was founded, Mosaic 1.0 also launched the same year, and Waterfalls by TLC was a top hit. The web matured as did resources. It was just a few years back when the twitterverse was tied up discussing how the average size of web pages now equaled the size of the <a hreflang="en" href="https://www.wired.com/2016/04/average-webpage-now-size-original-doom/">original doom</a>. Many of us mused about what the size the page could become in time, including <a hreflang="en" href="https://speedcurve.com/blog/web-performance-page-bloat/">our very own Tammy Everts</a>, but the reality is startling. A page sits @  ~4 MB and 3.7 MB, desktop/mobile respectively, at the 75th percentile, and a shocking 7.4 MB and 6.7 MB at the 90th percentile. There are multitudes of implications in having such heavy pages, like the likelihood of poor user experience due to unreliable networks. Today, despite lessons <a hreflang="en" href="https://blog.chriszacharias.com/page-weight-matters">learned a decade ago</a>, we are experiencing variations of the same challenges: despite having slightly better networks, we are working with much larger resources.
+<!-- markdownlint-enable MD018 -->
 
 ### Bandwidth
 

src/content/en/2020/pwa.md

@@ -174,14 +174,14 @@ Your app should display some content when JavaScript is disabled, even if it is
 
 In a service worker one can listen for a number of events:
 
-1.  `install`, which occurs upon service worker installation.
-2.  `activate`, which occurs upon service worker activation.
-3.  `fetch`, which occurs whenever a resource is fetched.
-4.  `push`, which occurs when a push notification arrives.
-5.  `notificationclick`, which occurs when a notification is being clicked.
-6.  `notificationclose`, which occurs when a notification is being closed.
-7.  `message`, which occurs when a message sent via postMessage() arrives.
-8.  `sync`, which occurs when a background sync event occurs.
+1. `install`, which occurs upon service worker installation.
+2. `activate`, which occurs upon service worker activation.
+3. `fetch`, which occurs whenever a resource is fetched.
+4. `push`, which occurs when a push notification arrives.
+5. `notificationclick`, which occurs when a notification is being clicked.
+6. `notificationclose`, which occurs when a notification is being closed.
+7. `message`, which occurs when a message sent via postMessage() arrives.
+8. `sync`, which occurs when a background sync event occurs.
 
 We have examined which of these events are being listened to by service workers in our dataset.
 

src/content/es/2020/http.md

@@ -603,7 +603,7 @@ La aplicación más común de `Upgrade` es <a href="https://developer.mozilla.or
 
 Cuando se usa `Alt-Svc`, un cliente realiza solicitudes al origen de forma normal. Sin embargo, si el servidor incluye un encabezado o envía una trama que contiene una lista de alternativas, el cliente puede establecer una nueva conexión con el punto final y usarla para futuras solicitudes a ese origen.
 
-Como era de esperar, el uso de `Alt-Svc` se encuentra casi en su totalidad en servicios que utilizan versiones HTTP avanzadas: el 12.0% de las solicitudes HTTP/2 y el 60.1% de las solicitudes gQUIC recibieron un encabezado` Alt-Svc` como respuesta, en comparación con el 0.055% de solicitudes HTTP/1.x. Tenga en cuenta que nuestra metodología aquí solo captura los encabezados `Alt-Svc`, no las tramas `ALTSVC` en HTTP/2, por lo que la realidad puede estar un poco subestimada.
+Como era de esperar, el uso de `Alt-Svc` se encuentra casi en su totalidad en servicios que utilizan versiones HTTP avanzadas: el 12.0% de las solicitudes HTTP/2 y el 60.1% de las solicitudes gQUIC recibieron un encabezado `Alt-Svc` como respuesta, en comparación con el 0.055% de solicitudes HTTP/1.x. Tenga en cuenta que nuestra metodología aquí solo captura los encabezados `Alt-Svc`, no las tramas `ALTSVC` en HTTP/2, por lo que la realidad puede estar un poco subestimada.
 
 Si bien `Alt-Svc` puede apuntar a un <i lang="en">host</i> completamente diferente, la compatibilidad con esta habilidad varía entre los navegadores. Solo el 4.71% de los encabezados `Alt-Svc` anunciaban un punto final en un <i lang="en">hostname</i> diferente; estos eran casi universalmente (99.5%) publicidad de compatibilidad con gQUIC y HTTP/3 en Google Ads. Google Chrome ignora los anuncios `Alt-Svc` entre <i lang="en">hosts</i> para HTTP/2, por lo que muchas de las otras instancias se habrían ignorado.
 

src/content/fr/2019/css.md

@@ -90,7 +90,7 @@ Eh bien, nous sommes curieux de savoir combien de couleurs en double sont prése
 
 ## Unités
 
-Avec CSS, il existe de nombreuses façons d’obtenir le même résultat visuel en utilisant différents types d’unités : `rem`,` px`, `em`, `ch`, ou même `cm` ! Alors, quels types d’unités sont les plus populaires ?
+Avec CSS, il existe de nombreuses façons d’obtenir le même résultat visuel en utilisant différents types d’unités : `rem`, `px`, `em`, `ch`, ou même `cm` ! Alors, quels types d’unités sont les plus populaires ?
 
 {{ figure_markup(
   image="fig5.png",
@@ -110,7 +110,7 @@ En ce qui concerne les unités basées sur l’espace physique, l’unité `cm`
 
 ### Unités basées sur la taille de fenêtre (<i lang="en">viewport</i> {unites-basees-sur-la-taille-de-fenetre-viewport}
 
-Nous avons constaté des différences plus importantes pour les unités basées sur le <i lang="en">viewport</i> entre les appareils mobiles et les ordinateurs de bureau. 36,8&nbsp;% des sites mobiles utilisent `vh` (hauteur de <i lang="en">viewport</i>), alors que seuls 31&nbsp;% des sites pour ordinateur le font. Nous avons également constaté que `vh` est plus courant que `vw` (largeur de <i lang="en">viewport</i>) d’environ 11&nbsp;%. `vmin` (<i lang="en">viewport</i> minimum) est plus populaire que `vmax` (<i lang="en">viewport</i> maximum), avec environ 8&nbsp;% d’utilisation de `vmin` sur mobile tandis que` vmax` n’est utilisé que par 1&nbsp;% des sites Web.
+Nous avons constaté des différences plus importantes pour les unités basées sur le <i lang="en">viewport</i> entre les appareils mobiles et les ordinateurs de bureau. 36,8&nbsp;% des sites mobiles utilisent `vh` (hauteur de <i lang="en">viewport</i>), alors que seuls 31&nbsp;% des sites pour ordinateur le font. Nous avons également constaté que `vh` est plus courant que `vw` (largeur de <i lang="en">viewport</i>) d’environ 11&nbsp;%. `vmin` (<i lang="en">viewport</i> minimum) est plus populaire que `vmax` (<i lang="en">viewport</i> maximum), avec environ 8&nbsp;% d’utilisation de `vmin` sur mobile tandis que `vmax` n’est utilisé que par 1&nbsp;% des sites Web.
 
 ### Propriétés personnalisées (<i lang="en">custom properties</i>) {proprietes-personnalisees-custom-properties}
 

src/content/fr/2019/fonts.md

@@ -595,7 +595,7 @@ Après avoir plongé dans le code, toutes ces 718 requêtes vont à Google Fonts
 
 Il est ironique qu'un plugin d'optimisation des performances puisse rendre vos performances bien pires !
 
-## Une correspondance plus précise avec `unicode-range`.
+## Une correspondance plus précise avec `unicode-range`
 
 {{ figure_markup(
   caption="Pourcentage des pages mobiles qui déclarent une police web avec la propriété <code>unicode-range</code>.",