From 631ca9445d9d2574dd75914688921b56f3899e9e Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Mon, 24 Oct 2022 12:47:37 -0700 Subject: [PATCH] Smarten some punctuation --- content/posts/website-best-practices.md | 24 ++++++++++++------------ layouts/partials/webmention-form.html | 2 +- layouts/partials/webmentions.html | 4 ++-- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index b9cbb90..299bc2c 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -16,7 +16,7 @@ sitemap: Priority: 0.7 featured: 2 image: "serenity-4x.png" -image_alt: "Retro-looking browser with bitmap fonts showing this article's \"code snippet 4\"." +image_alt: "Retro-looking browser with bitmap fonts showing this article’s “code snippet 4”." articleType: "TechArticle" evergreen: true title: "Best practices for inclusive textual websites" @@ -124,7 +124,7 @@ If you're able to control your HTTP headers, then use headers instead of a `list of available images prior to dynamically inserting a meta element with an http-equiv attribute in the Content security policy state. Resources that have already been fetched are not guaranteed to be blocked by a Content - Security Policy that's enforced late. + Security Policy that’s enforced late.

{{< quotecaption partOfType="TechArticle" >}} @@ -307,7 +307,7 @@ Lazy loading may or may not work. Some browsers, including Firefox and the Tor B {{}}
-

Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing images in a page's markup such that a server can track how many images are requested and when.

+

Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user’s approximate scroll position throughout a session, by strategically placing images in a page’s markup such that a server can track how many images are requested and when.

{{< quotecaption partOfType="TechArticle">}} {{}} @@ -416,7 +416,7 @@ Long pages with many DOM nodes may benefit from CSS containment, a more recently Leveraging containment and `content-visibility` is a progressive enhancement, so there aren't any serious implications for older browsers. I use `content-visibility` to defer rendering off-screen entries in my archives. Doing so allows me to serve long archive pages instead of resorting to pagination, with page-length limited only by download size. In my tests using Lighthouse with Chromium Devtools' simulated CPU throttling,[^11] this article rendered faster _with_ containment-enabled CSS than without any custom stylesheets at all. -Using `content-visibility` for content at the end of the page is relatively safe. Using it for content earlier in the page risks introducing minor [layout shifts](#layout-shifts) and scrollbar-jumping. Eliminate the layout shifts by calculating a value for the `contain-intrinsic-size` property. {{}}{{}}, by {{}}, is a comprehensive guide to calculating intrinsic size values. The scrollbar is less likely to jump around noticeably on extra-long pages, so sufficient page-length could let you get away with setting `contain-intrinsic-size` to a rough estimate. +Using `content-visibility` for content at the end of the page is relatively safe. Using it for content earlier in the page risks introducing minor [layout shifts](#layout-shifts) and scrollbar-jumping. Eliminate the layout shifts by calculating a value for the `contain-intrinsic-size` property. {{}}{{}}, by {{}}, is a comprehensive guide to calculating intrinsic size values. The scrollbar is less likely to jump around noticeably on extra-long pages, so sufficient page-length could let you get away with setting `contain-intrinsic-size` to a rough estimate. ### Performance of assistive technologies @@ -516,7 +516,7 @@ Web pages that hide content behind "show content" widgets are difficult to searc {{}} -{{}} +{{}}
@@ -660,10 +660,10 @@ I personally try to maintain the flow of an article even if its figures and capt that primary content, e.g., to the side of the page, to dedicated pages, or to an appendix, without affecting the flow of the document.

If a figure element is referenced by its relative position, e.g., - "in the photograph above" or "as the next figure shows", then moving the figure would disrupt the - page's meaning. Authors are encouraged to consider using labels to refer to figures, rather than + “in the photograph above” or “as the next figure shows” then moving the figure would disrupt the + page’s meaning. Authors are encouraged to consider using labels to refer to figures, rather than using such relative references, so that the page can easily be restyled without affecting the - page's meaning.

+ page’s meaning.

{{< quotecaption partOfType="TechArticle" >}} HTML Living Standard, section 4.4.12: @@ -802,7 +802,7 @@ If you include a `theme-color` directive in your document ``, then recent {{}} {{}} -
WebKit's default dark stylesheet uses dark-colored links that are difficult to read.
+
WebKit’s default dark stylesheet uses dark-colored links that are difficult to read.
{{}} CSS filters such as `invert` are expensive to run, so use them sparingly. Simply inverting your page's colors to provide a dark theme could slow it down or cause a user's fans to spin. @@ -816,7 +816,7 @@ Darker backgrounds draw less power on devices with OLED screens; however, backgr This image is an approximation of what halation looks like, cropped from Essential Accessibility.
-{{< picture name="halation" alt="Fuzzy white text on black background reading \"But it is not\"." >}} +{{< picture name="halation" alt="Fuzzy white text on black background reading “But it is not”." >}} {{}} "Just disable dark mode" is a poor response to users complaining about halation: it ignores the utility of dark themes described at the beginning of this section. @@ -1553,7 +1553,7 @@ Designers already test their websites with multiple browser engines to ensure cr Screen readers on touch screen devices are also quite different from their desktop counterparts, and typically feature fewer capabilities. Be sure to test on both desktop and mobile. -Screen reader implementations often skip punctuation marks like the exclamation point ("!"). Ensure that meaning doesn't rely too heavily on such punctuation. +Screen reader implementations often skip punctuation marks like the exclamation point (!). Ensure that meaning doesn't rely too heavily on such punctuation. Screen readers have varying levels of verbosity. The default verbosity level doesn't always convey inline emphasis, such as ``, ``, or ``. Ensure that your meaning carries through without these semantics.[^35] @@ -1698,7 +1698,7 @@ These tests begin reasonably, but gradually grow absurd. Once again, use your ju I'm still on step 17, trying to find new ways to break this page. If you come up with a new test, please [share it](mailto:~seirdy/seirdy.one-comments@lists.sr.ht). -{{}} {{< picture name="serenity" alt="Retro-looking browser with bitmap fonts showing this article's \"Code snippet 4\"." class="pix" sf=2 >}} +{{}} {{< picture name="serenity" alt="Retro-looking browser with bitmap fonts showing this article’s “code snippet 4”." class="pix" sf=2 >}}
diff --git a/layouts/partials/webmention-form.html b/layouts/partials/webmention-form.html index bdf1077..c4a6f00 100644 --- a/layouts/partials/webmention-form.html +++ b/layouts/partials/webmention-form.html @@ -1,5 +1,5 @@
- Publish a response on your own website and share the link here to send me a webmention! Include a link to this page's canonical location for it to be accepted. + Publish a response on your own website and share the link here to send me a webmention! Include a link to this page’s canonical location for it to be accepted.
diff --git a/layouts/partials/webmentions.html b/layouts/partials/webmentions.html index e0644c2..fd96990 100644 --- a/layouts/partials/webmentions.html +++ b/layouts/partials/webmentions.html @@ -1,7 +1,7 @@ {{- $wbmLinks := (slice "https://si3t.ch/log/2021-04-18-entetes-floc.html" "https://xmpp.org/2021/02/newsletter-02-feburary/" "https://gurlic.com/technology/post/393626430212145157" "https://gurlic.com/technology/post/343249858599059461" "https://www.librepunk.club/@penryn/108411423190214816" "https://benign.town/@josias/108457015755310198" "http://www.tuxmachines.org/node/148146" "https://i.reddit.com/r/web_design/comments/k0dmpj/an_opinionated_list_of_best_practices_for_textual/gdmxy4u/" "https://bbbhltz.space/posts/thoughts-on-tech-feb2021/" "https://jorts.horse/@alice/108477866954580532" "https://brid.gy/comment/mastodon/@Seirdy@pleroma.envs.net/AK7FeQ4h2tUCKNwlXc/AK7GtGkE7JOVgm1Cgi" "https://fosstodon.org/@werwolf/108529382741681838" "https://mastodon.social/@WahbAllat/108986614624476982" "https://linuxrocks.online/@friend/109029028283860044" "https://fosstodon.org/@fullstackthaumaturge/108765040526523487" "https://inhji.de/notes/an-opinionated-list-of-best-practices-for-textual-websites") -}} {{- $archivetodayLinks := (slice "https://example.com") -}}
-
+

Web­mentions

This site supports Webmentions, a backlink-based alternative to traditional comment forms.

{{ partial "webmention-form.html" . }} @@ -14,7 +14,7 @@ {{- $webmentions = $webmentions | append (getJSON $url2) -}} {{- end -}} {{- if gt (len $webmentions) 0 -}} -

Webmentions received for this post appear in the following list after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don't support them. I replace broken links with Wayback Machine snapshots, if they exist.

+

Webmentions received for this post appear in the following list after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don’t support them. I auto-replace broken links with Wayback Machine snapshots, if they exist.

Toggle Webmentions