1
0
Fork 0
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:
Rohan Kumar 2022-04-19 20:07:30 -07:00
parent 52a7b8a737
commit 8e8512290b
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 12 additions and 17 deletions

View file

@ -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&shy;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&shy;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".

View file

@ -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) -}}

View file

@ -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>