mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-27 22:12:10 +00:00
Compare commits
4 commits
001e889e7b
...
f630c8b670
Author | SHA1 | Date | |
---|---|---|---|
|
f630c8b670 | ||
|
c2fafa8d97 | ||
|
2218a44a36 | ||
|
2e2a37583c |
5 changed files with 25 additions and 5 deletions
17
content/notes/notice-box-semantics.md
Normal file
17
content/notes/notice-box-semantics.md
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
---
|
||||||
|
title: "Notice box semantics"
|
||||||
|
date: 2022-09-22T09:10:41-07:00
|
||||||
|
replyURI: "https://tdarb.org/blog/notice-box.html"
|
||||||
|
replyTitle: "RE: Creating a Simple HTML/CSS Notice Box"
|
||||||
|
replyType: "BlogPosting "
|
||||||
|
replyAuthor: "Bradley Taunt"
|
||||||
|
replyAuthorURI: "https://tdarb.org/about.html"
|
||||||
|
---
|
||||||
|
|
||||||
|
I'd rather make a notice a `<section>` with a heading, or an `<aside>` if it's not related to the surrounding content.
|
||||||
|
|
||||||
|
You could even add a more specific ARIA (or DPUB-ARIA) role like `role="note"`, `role="doc-pullquote"`, `role="doc-tip"`, etc. But don't use them unless you have multiple kinds of `aside` elements and need to help people skim.
|
||||||
|
|
||||||
|
Most of these roles actually map to the `section` superclass rather than the `complementary` role of `aside`, which isn't always a problem: the `aside` element tells reader-mode implementations to remove the element, but the `role` tells assistive technologies more useful information. I use a similar hack for my in-page section permalinks.
|
||||||
|
|
||||||
|
If the notice is important to the surrounding content and reader-mode shouldn't remove it, use a `section`.
|
|
@ -1806,7 +1806,8 @@ I opted to meet the criterion a different way. Since all my pages are linked by
|
||||||
|
|
||||||
⁶ uBlock Origin is a popular browser extension for content filtering; it's the most popular Firefox add-on. It includes a built-in feature to block all media elements exceeding a user-configurable size threshold.
|
⁶ uBlock Origin is a popular browser extension for content filtering; it's the most popular Firefox add-on. It includes a built-in feature to block all media elements exceeding a user-configurable size threshold.
|
||||||
|
|
||||||
⁷ If you'd like more details about TCP, here's a great introduction:
|
⁷ Technically, this is only true in idealized circumstances and if you have 0-RTT enabled. If your requests are not idempotent, you probably should stick with 1-RTT. A TCP handshake actually involves one additional round-trip, so you could probably start off with a 30-kilobyte window on HTTP/2 with 0-RTT. HTTP/3 servers with 0-RTT do use a true "zero-round-trip" connection, but they use QUIC instead of TCP. QUIC uses similar sizing logic but I'm not sure about the exact values.
|
||||||
|
If you'd like more details about TCP, here's a great introduction:
|
||||||
=> https://hpbn.co/building-blocks-of-tcp/ High-Performance Browser Networking, by Ilya Grigorik
|
=> https://hpbn.co/building-blocks-of-tcp/ High-Performance Browser Networking, by Ilya Grigorik
|
||||||
|
|
||||||
⁸ Iterating through a list of font names to see if each one is available on a user's system is a slow but effective way to determine installed fonts without being granted permission to use the Font Access API. BrowserLeaks has a demo of this approach.
|
⁸ Iterating through a list of font names to see if each one is available on a user's system is a slow but effective way to determine installed fonts without being granted permission to use the Font Access API. BrowserLeaks has a demo of this approach.
|
||||||
|
|
|
@ -1860,7 +1860,9 @@ A special thanks goes out to GothAlice for the questions she answered in <samp>#
|
||||||
|
|
||||||
[^5]: One example is a utility class for the `image-rendering` property. I use it on images that look better with `pixelated` rendering. This is a property of the image contents, not the image semantics or placement; a class makes sense.
|
[^5]: One example is a utility class for the `image-rendering` property. I use it on images that look better with `pixelated` rendering. This is a property of the image contents, not the image semantics or placement; a class makes sense.
|
||||||
|
|
||||||
[^6]: {{<mention-work itemprop="citation" itemtype="TechArticle">}}{{<cited-work name="High-Performance Browser Networking" url="https://hpbn.co/building-blocks-of-tcp/" extraName="headline">}} by {{<indieweb-person first-name="Ilya" last-name="Grigorik" url="https://www.igvita.com/" itemprop="author">}}{{</mention-work>}} gives a great introduction to how TCP works, if you'd like more details.
|
[^6]: Technically, this is only true in idealized circumstances and if you have 0-RTT enabled. If your requests are not idempotent, you probably should stick with 1-RTT. A TCP handshake actually involves one additional round-trip, so you could probably start off with a 30-kilobyte window on HTTP/2 with 0-RTT. HTTP/3 servers with 0-RTT do use a true "zero-round-trip" connection, but they use QUIC instead of TCP. QUIC uses similar sizing logic but I'm not sure about the exact values.
|
||||||
|
|
||||||
|
{{<mention-work itemprop="citation" itemtype="TechArticle">}}{{<cited-work name="High-Performance Browser Networking" url="https://hpbn.co/building-blocks-of-tcp/" extraName="headline">}} by {{<indieweb-person first-name="Ilya" last-name="Grigorik" url="https://www.igvita.com/" itemprop="author">}}{{</mention-work>}} gives a great introduction to how TCP works, if you'd like more details.
|
||||||
|
|
||||||
[^7]: This one-kilobyte limit is a semi-arbitrary rule-of-thumb I came up with. It's a simple number easier to work with than the number of bytes remaining in the earliest contentful round-trip, yet it typically falls within that quota.
|
[^7]: This one-kilobyte limit is a semi-arbitrary rule-of-thumb I came up with. It's a simple number easier to work with than the number of bytes remaining in the earliest contentful round-trip, yet it typically falls within that quota.
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction"
|
itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction"
|
||||||
action="{{ $action }}" method="get" role="search">
|
action="{{ $action }}" method="get" role="search">
|
||||||
<label for="search" itemscope="" itemprop="target" itemtype="https://schema.org/EntryPoint">
|
<label for="search" itemscope="" itemprop="target" itemtype="https://schema.org/EntryPoint">
|
||||||
Search this site (powered by the <a rel="nofollow" href="https://searchmysite.net/">Search My Site</a> API):
|
Search this site (powered by the Search My Site API):
|
||||||
<meta itemprop="urlTemplate" content="{{ $action }}?q={q}" />
|
<meta itemprop="urlTemplate" content="{{ $action }}?q={q}" />
|
||||||
</label>
|
</label>
|
||||||
<div><!--We need the extra divs to serve as pseudo-table-cells.-->
|
<div><!--We need the extra divs to serve as pseudo-table-cells.-->
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
<span itemprop="name" class="p-name">
|
<span itemprop="name" class="p-name">
|
||||||
{{ if $webmention.title -}}
|
{{ if $webmention.title -}}
|
||||||
{{ $title | truncate 200 | replaceRE ` \n` `
|
{{ $title | truncate 200 | replaceRE ` \n` `
|
||||||
` -}}
|
` | safeHTML -}}
|
||||||
{{ else -}}
|
{{ else -}}
|
||||||
{{- $webmention.source | strings.TrimPrefix "https://" | strings.TrimPrefix "www." | strings.TrimRight "/" | truncate 35 -}}
|
{{- $webmention.source | strings.TrimPrefix "https://" | strings.TrimPrefix "www." | strings.TrimRight "/" | truncate 35 -}}
|
||||||
{{ end -}}
|
{{ end -}}
|
||||||
|
|
Loading…
Reference in a new issue