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.
|
||||
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.
|
||||
|
||||
|
@ -684,7 +686,7 @@ convert ORIGINAL_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.
|
||||
|
||||
|
@ -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>.
|
||||
|
||||
{{<codefigure>}}
|
||||
|
||||
{{< codecaption >}}Firefox prefs to turn off JIT compilation {{< /codecaption >}}
|
||||
<figure itemscope="" itemtype="https://schema.org/SoftwareSourceCode">
|
||||
<figcaption>
|
||||
<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
|
||||
javascript.options.baselinejit
|
||||
javascript.options.native_regexp
|
||||
javascript.options.asmjs
|
||||
javascript.options.wasm</code></pre>
|
||||
|
||||
{{<codefigure>}}
|
||||
javascript.options.wasm</code></pre></figure>
|
||||
|
||||
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") }}
|
||||
<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 }}
|
||||
</figcaption>
|
||||
{{- .Page.Scratch.Set "codeIndex" (add 1 $codeIndex) -}}
|
||||
|
|
|
@ -1,10 +1,3 @@
|
|||
{{ $codeIndex := .Page.Scratch.Get "codeIndex" }}
|
||||
{{ $id := .Get "id" }}
|
||||
<figure itemscope itemtype="https://schema.org/SoftwareSourceCode"
|
||||
{{ if $id }}
|
||||
id="{{ $id }}"
|
||||
{{- else -}}
|
||||
id="code-{{ sub $codeIndex 1 }}"
|
||||
{{ end }}>
|
||||
<figure itemscope itemtype="https://schema.org/SoftwareSourceCode">
|
||||
{{ .Inner | markdownify }}
|
||||
</figure>
|
||||
|
|
Loading…
Reference in a new issue