mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-27 14:12:09 +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.
|
||||
|
||||
⁷ 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
|
||||
|
||||
⁸ 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.
|
||||
|
||||
[^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.
|
||||
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction"
|
||||
action="{{ $action }}" method="get" role="search">
|
||||
<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}" />
|
||||
</label>
|
||||
<div><!--We need the extra divs to serve as pseudo-table-cells.-->
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
<span itemprop="name" class="p-name">
|
||||
{{ if $webmention.title -}}
|
||||
{{ $title | truncate 200 | replaceRE ` \n` `
|
||||
` -}}
|
||||
` | safeHTML -}}
|
||||
{{ else -}}
|
||||
{{- $webmention.source | strings.TrimPrefix "https://" | strings.TrimPrefix "www." | strings.TrimRight "/" | truncate 35 -}}
|
||||
{{ end -}}
|
||||
|
|
Loading…
Reference in a new issue