mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Fix invalid HTML
This commit is contained in:
parent
52a7b8a737
commit
8e8512290b
3 changed files with 12 additions and 17 deletions
|
@ -671,7 +671,9 @@ Most of my images will probably be screenshots that start as PNGs. My typical fl
|
||||||
6. Create a lossy AVIF image from the cropped full-color PNG, and include it in the `<picture>` element if it's smaller than the WebP. If color isn't important, use the YUV400 color space.
|
6. Create a lossy AVIF image from the cropped full-color PNG, and include it in the `<picture>` element if it's smaller than the WebP. If color isn't important, use the YUV400 color space.
|
||||||
7. If the image is too light, repeat for a dark version of the image to display according to a `prefers-color-scheme: dark` media query.
|
7. If the image is too light, repeat for a dark version of the image to display according to a `prefers-color-scheme: dark` media query.
|
||||||
|
|
||||||
{{<codefigure id="png-pipeline">}} {{< codecaption lang="shell" >}}
|
{{<codefigure>}}
|
||||||
|
|
||||||
|
{{< codecaption lang="shell" id="png-pipeline" >}}
|
||||||
|
|
||||||
this is a sample command to compress a PNG image using ImageMagick, `pngquant`, and `oxipng`. It shrinks the image, turns it grayscale, reduces the color palette, and then applies lossless Zopfli compression.
|
this is a sample command to compress a PNG image using ImageMagick, `pngquant`, and `oxipng`. It shrinks the image, turns it grayscale, reduces the color palette, and then applies lossless Zopfli compression.
|
||||||
|
|
||||||
|
@ -684,7 +686,7 @@ convert ORIGINAL_FILE \
|
||||||
| oxipng -o max -Z --fix - --out OUTPUT_FILE
|
| oxipng -o max -Z --fix - --out OUTPUT_FILE
|
||||||
```
|
```
|
||||||
|
|
||||||
</figure>
|
{{</codefigure>}}
|
||||||
|
|
||||||
In general, avoid loading images just for decoration. Only use an image if it has a clear purpose that significantly adds to the content in a way that text can't replace, and provide alt-text as a fallback. Any level of detail that isn't necessary for getting the point across should be removed by lossy compression and cropping.
|
In general, avoid loading images just for decoration. Only use an image if it has a clear purpose that significantly adds to the content in a way that text can't replace, and provide alt-text as a fallback. Any level of detail that isn't necessary for getting the point across should be removed by lossy compression and cropping.
|
||||||
|
|
||||||
|
@ -1325,17 +1327,17 @@ A special thanks goes out to GothAlice for the questions she answered in `#webde
|
||||||
|
|
||||||
[^13]: Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnera­bilities. In Firefox, navigate to `about:config` and toggle some flags under <code>javascript<wbr>.options</code>.
|
[^13]: Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnera­bilities. In Firefox, navigate to `about:config` and toggle some flags under <code>javascript<wbr>.options</code>.
|
||||||
|
|
||||||
{{<codefigure>}}
|
<figure itemscope="" itemtype="https://schema.org/SoftwareSourceCode">
|
||||||
|
<figcaption>
|
||||||
{{< codecaption >}}Firefox prefs to turn off JIT compilation {{< /codecaption >}}
|
<strong itemprop="name"> <span itemprop="codeSampleType">Code snippet</span> 11</strong>:
|
||||||
|
Firefox prefs to turn off JIT compilation
|
||||||
|
</figcaption>
|
||||||
|
|
||||||
<pre tabindex="0"><code itemprop="text">javascript.options.ion
|
<pre tabindex="0"><code itemprop="text">javascript.options.ion
|
||||||
javascript.options.baselinejit
|
javascript.options.baselinejit
|
||||||
javascript.options.native_regexp
|
javascript.options.native_regexp
|
||||||
javascript.options.asmjs
|
javascript.options.asmjs
|
||||||
javascript.options.wasm</code></pre>
|
javascript.options.wasm</code></pre></figure>
|
||||||
|
|
||||||
{{<codefigure>}}
|
|
||||||
|
|
||||||
In Chromium and derivatives, run the browser with `--js-flags='--jitless'`; in the Tor Browser, set the security level to "Safer".
|
In Chromium and derivatives, run the browser with `--js-flags='--jitless'`; in the Tor Browser, set the security level to "Safer".
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ $codeIndex := (.Page.Scratch.Get "codeIndex") }}
|
{{ $codeIndex := (.Page.Scratch.Get "codeIndex") }}
|
||||||
<figcaption>
|
<figcaption>
|
||||||
<strong itemprop="name"> <span itemprop="codeSampleType">Code snippet</span> {{ $codeIndex }}</strong>{{with .Get "lang"}} (<span itemprop="programmingLanguage">{{ . }}</span>){{end}}:
|
<strong itemprop="name" id="{{ if .Get "id" }}{{.Get "id"}}{{else}}code-{{ $codeIndex }}{{end}}"> <span itemprop="codeSampleType">Code snippet</span> {{ $codeIndex }}</strong>{{with .Get "lang"}} (<span itemprop="programmingLanguage">{{ . }}</span>){{end}}:
|
||||||
{{ .Inner | markdownify | safeHTML }}
|
{{ .Inner | markdownify | safeHTML }}
|
||||||
</figcaption>
|
</figcaption>
|
||||||
{{- .Page.Scratch.Set "codeIndex" (add 1 $codeIndex) -}}
|
{{- .Page.Scratch.Set "codeIndex" (add 1 $codeIndex) -}}
|
||||||
|
|
|
@ -1,10 +1,3 @@
|
||||||
{{ $codeIndex := .Page.Scratch.Get "codeIndex" }}
|
<figure itemscope itemtype="https://schema.org/SoftwareSourceCode">
|
||||||
{{ $id := .Get "id" }}
|
|
||||||
<figure itemscope itemtype="https://schema.org/SoftwareSourceCode"
|
|
||||||
{{ if $id }}
|
|
||||||
id="{{ $id }}"
|
|
||||||
{{- else -}}
|
|
||||||
id="code-{{ sub $codeIndex 1 }}"
|
|
||||||
{{ end }}>
|
|
||||||
{{ .Inner | markdownify }}
|
{{ .Inner | markdownify }}
|
||||||
</figure>
|
</figure>
|
||||||
|
|
Loading…
Reference in a new issue