diff --git a/README.md b/README.md index febc3ac..43650fe 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Dependencies To build: -- Hugo 0.90 or later +- Hugo 0.93 or later - Make - Git (Hugo uses Git info for features like date last updated) - [Efficient Compression Tool](https://github.com/fhanau/Efficient-Compression-Tool) It's like zopfli but more efficient and faster. diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md index d690ace..b8737b6 100644 --- a/content/posts/website-best-practices.md +++ b/content/posts/website-best-practices.md @@ -68,22 +68,22 @@ 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 >}} -Code snippet: this is the CSP for my main website, with hashes removed for readability. - -
- -
default-src 'none';
+``` figure {samp=true var1="HASH"}
+default-src 'none';
 img-src 'self' data:;
-style-src 'sha256-HASH';
+style-src 'sha256-HASH';
 style-src-attr 'none';
 frame-ancestors 'none';
 base-uri 'none';
 form-action 'none';
-manifest-src https://seirdy.one/manifest.min.HASH.webmanifest;
+manifest-src https://seirdy.one/manifest.min.HASH.webmanifest;
 upgrade-insecure-requests;
-sandbox allow-same-origin
+sandbox allow-same-origin +```
@@ -102,14 +102,10 @@ If you're able to control your HTTP headers, then use headers instead of a ` that's enforced late.

-
- — - - HTML Living Standard, section 4.2.5.3: Pragma directives, - - - -
+{{< figcaption type="citation" partOfType="TechArticle" >}} +HTML Living Standard, section 4.2.5.3: Pragma directives, + +{{< /figcaption >}} ### If you must enable scripts @@ -146,13 +142,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 >}} -Code snippet: my website includes a `link` header to load an SVG that serves as my IndieWeb photo and favicon. Hash removed from filename for readability. - -
- -
link: </favicon.HASH.svg>; rel=preload; as=image
+``` figure {var1="HASH" samp=true} +link: ; rel=preload; as=image +```
@@ -167,10 +163,14 @@ 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.
-
-Code snippet: 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. -
-
cache-control: max-age=31557600, immutable
+{{< 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 >}} + +``` 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,14 +199,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" >}} +{{