1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-27 22:12:10 +00:00

Compare commits

...

4 commits

Author SHA1 Message Date
Rohan Kumar
f630c8b670
Clarification around round-trip window sizes 2022-09-22 10:51:53 -07:00
Rohan Kumar
c2fafa8d97
fix entity escaping 2022-09-22 10:29:22 -07:00
Rohan Kumar
2218a44a36
New note: notice box semantics 2022-09-22 09:10:44 -07:00
Rohan Kumar
2e2a37583c
remove link from label 2022-09-22 09:09:49 -07:00
5 changed files with 25 additions and 5 deletions

View 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`.

View file

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

View file

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

View file

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

View file

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