From 01e52bad1651ceb2b44604cd4cc814a9880bce69 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Tue, 19 Apr 2022 18:06:57 -0700 Subject: [PATCH] Split up figcaption partial, add some fignos - give code blocks their own figure numbers/names/ID - Split figcaption into quotecaption and codecaption - create codefigure partial to reduce markup for SoftwareSourceCode figures --- content/posts/website-best-practices.md | 146 ++++++++++-------------- layouts/posts/single.html | 1 + layouts/shortcodes/codecaption.html | 6 + layouts/shortcodes/codefigure.html | 10 ++ layouts/shortcodes/figcaption.html | 22 ---- layouts/shortcodes/quotecaption.html | 8 ++ 6 files changed, 88 insertions(+), 105 deletions(-) create mode 100644 layouts/shortcodes/codecaption.html create mode 100644 layouts/shortcodes/codefigure.html delete mode 100644 layouts/shortcodes/figcaption.html create mode 100644 layouts/shortcodes/quotecaption.html diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index b8737b6..1ccf273 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -67,12 +67,9 @@ Consider taking hardening measures to maximize the security benefits made possib JavaScript and WebAssembly are responsible for the bulk of modern web exploits. If that isn't reason enough, most [non-mainstream search indexes](./../../../2021/03/10/search-engines-with-own-indexes.html) have little to no support for JavaScript. Ideally, a text-oriented site can enforce a scripting ban at the [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) level. -
-{{< figcaption type="code" >}} -this is the CSP for my main website, with hashes removed for readability. -{{< /figcaption >}} +{{}} {{< codecaption >}} this is the CSP for my main website, with hashes removed for readability. {{< /codecaption >}} -``` figure {samp=true var1="HASH"} +```figure {samp=true var1="HASH"} default-src 'none'; img-src 'self' data:; style-src 'sha256-HASH'; @@ -85,7 +82,7 @@ upgrade-insecure-requests; sandbox allow-same-origin ``` -
+{{}} `default-src: 'none'` implies `script-src: 'none'`, causing a compliant browser to forbid the loading of scripts. Furthermore, the `sandbox` CSP directive forbids a [wide variety of risky actions](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/sandbox). While `script-src` restricts script loading, `sandbox` can also restrict script execution with stronger defenses against script injection (e.g. by a browser add-on).[^1] I added the `allow-same-origin` parameter so that these add-ons will still be able to function.[^2] @@ -102,10 +99,10 @@ If you're able to control your HTTP headers, then use headers instead of a ` that's enforced late.

-{{< figcaption type="citation" partOfType="TechArticle" >}} +{{< quotecaption partOfType="TechArticle" >}} HTML Living Standard, section 4.2.5.3: Pragma directives, -{{< /figcaption >}} +{{< /quotecaption >}} ### If you must enable scripts @@ -141,16 +138,13 @@ Optimal loading is a complex topic. Broadly, it covers three overlapping categor HTML is a blocking resource: images and stylesheets will not load until the user agent loads and parses the HTML that calls them. To start loading above-the-fold images before the HTML parsing finishes, send a `link` HTTP header. -
-{{< figcaption type="code" >}} -my website includes a `link` header to load an SVG that serves as my IndieWeb photo and favicon. Hash removed from filename for readability. -{{< /figcaption >}} +{{}} {{< codecaption >}} my website includes a `link` header to load an SVG that serves as my IndieWeb photo and favicon. Hash removed from filename for readability. {{< /codecaption >}} -``` figure {var1="HASH" samp=true} +```figure {var1="HASH" samp=true} link: ; rel=preload; as=image ``` -
+{{}} ### Don't count on the cache @@ -162,16 +156,13 @@ Requesting a high number of cached resources can decrease performance of the cac One way to help browsers decide which disk-cached resources to prioritize is to use immutable assets. Include the `immutable` directive in your `cache-control` headers, and cache-bust modified assets by changing their URLs. -
-{{< figcaption type="code" >}} -The only external assets on my pages are images and a web app manifest (for icons); I mark these assets as "immutable" and cache-bust them by including checksums in their filenames. -{{< /figcaption >}} +{{}} {{< codecaption >}} The only external assets on my pages are images and a web app manifest (for icons); I mark these assets as "immutable" and cache-bust them by including checksums in their filenames. {{< /codecaption >}} -``` figure {samp=true} +```figure {samp=true} cache-control: max-age=31557600, immutable ``` -
+{{}} You can also keep your asset counts low by combining textual assets (e.g. CSS) and inlining small resources. @@ -199,10 +190,10 @@ There is only one honest measure of web performance: **the time from when you cl Everything else is bullshit. -{{< figcaption type="citation" partOfType="TechArticle" >}} +{{< quotecaption partOfType="TechArticle" >}} {{