Add headings and re-order the items in the article footers to improve
heading-based navigation. Now all sections should have a landmark
recognized by most AT, or a heading.
WCAG recommends telling visitors about their current place in a site's
hierarchy. All pages are exactly zero or one level below a section, so
simply emphasizing a member of the navigation links should be
sufficient.
Some old browser engines don't fully support hyphenation, so they need
some extra help. Now, the entire site should fit in a 150 CSS-pixel wide
viewport.
Clean up some link text too so the text alone is more useful.
All pages except bookmarks can now fit on your smartwatch without any
adjustments, so we can disable the auto-zoom-out-to-match-mobile
wizardry that watch browsers do (comparable to the
zoom-out-to-match-desktop stuff that early mobile browsers did).
Yay.
- Use borders instead of <hr>
- Distinguish <kbd> from <code> and body text with boldness
- Improve dark contrast and make dark visited links look distinct from
regular text
- Improve focus indicators
- Shrink some excessive alt text
- Remove some redundant links
- Screenreaders that split elements up aren't just on touchscreens
- Mention ChromeVox in list of screen readers
- Move TOC higher in page
- Spelling
- Drop more unused classes
Putting the heading in the navigation element makes the structure more
logical and matches the behavior of most other websites.
Move it before the introduction in my web best practices post.
- Replace hashes in code snippets with variables for screen-readability
- Use hyphens where valid instead of combined words for screen reader
pronunciation
- Typo
- Add WIP section on screen reader support tips not already covered.
Order is significant for the ToC and post list so make them ordered.
I opted to make post-lists a reversed list, so I don't end up having
every post change its number every time I post.
Visitors can see that on post update dates; I can see that in
builds.sr.ht.
This results in not having to upload every page on a trivial change. Add
the "-c" rsync flag to take advantage of that. Doing so should also
result in longer-lived cached copies, with etags and last-modified
headers.
- Re-phrase a line referring to a previous section; after some
re-arrangements, that section is no longer a "previous" section.
- Replace spatial terminology ("bottom") with sequential terminology
("end")
- Add note on font enumeration without the Font Access API
- Acknowledge testing in grayscale but emphasize that it isn't enough.
- Move defense of link underlines to just after the section on custom
colors, since it's more relevant to it.
- Add xkcd image into the page instead of just linking, since the linked
page content is an image that doesn't include a transcript or
descriptive alt-text.
- Trivial rephrasings
- Even less halation for dark theme
- More contrast for borders
- Slightly larger font, fixes APCA contrast issue for <small>
- Make responsive navbar work in NetSurf
- Make aria-current page bold
- Use content-visibility to unload footers and endnotes
- Add aria-labels to unclear webring link text
- Replace <hr> elements with css borders; the semantic meaning of <hr>
was unnecessary with section breaks.
- Give the intro a heading
- Make the preface an <aside> with a "doc-preface" DPUB-ARIA role
- Move the TOC before the intro
- Give the TOC a "doc-toc" DPUB-ARIA role
- Provide a TLDR
- Some webrings I might eventually join require sending the origin via
referrer. Make per-link exceptions to my "no-referrer" policy sent via
HTTP header.
- Add hotline webring
- Add criteria for me to join a webring.
No browser I know of falls back to a PNG when given an SVG with a PNG
fallback. The Tor version of my site uses no SVGs.
Exclude the SVG favicon in the Tor version of the site, since the Tor
Browser disables SVG on the safest setting.
- SearchMySite.net uses the "keywords" meta property to categorize
sites, so include keywords on the homepage
- Exclude the published date if it doesn't exist.
Pulls content exported from Buku, so I don't have to commit every time I
add a bookmark.
Since I added another nav item, I had to adjust the navbar css.
- apple-touch-icon not needed, will be fetched from doc root
- re-order <head> elements to optimize for compression algorithm size
savings. shaved off like 15 bytes. this was a good use of my time.
This should reduce a lot of repetition. Supports first/last names,
nicknames, generic names that don't conform to first/last norms, and
has basic support for affiliated organizations.
Also snuck in more info on website colors to the web best practices
article, inc. a link to Chris' Wiki.
The only visible change to page display should be author names in
webmentions. Besides that, this commit only alters the underlying markup
to improve metadata extraction.
- Add more microdata for webmentions, authors, dates, etc.
- Add microformats2 for webmentions
- Add authors to webmention text, when available.
- Remove reference to unused syntax.css
- Stop Apple's magic phone-number-linkification. If I need to link a
telephone number I'll use a tel: URI, thank you very much.
Some browsers/addons allow shortcuts for going to the next/prev page by
matching links with the word "next" or "previous"; Tridactyl is one
example. I thought I'd add a next/prev link to make it easy to binge
this blog.
The favicon is 175 bytes, smaller than the size of the HTTP headers to
fetch it. It can be inlined.
Now, pages that don't have any other images need just a single request.
The main stylesheet for the sit is just 721 bytes uncompressed. I can
inline it safely to shave off a request, since the headers alone are
probably comparable to the size of the CSS.
- The default time is browser-default colors, not "light". The only
"theme" for my site is the dark theme.
- The "color-scheme" doesn't have wide support
- The "color-scheme" property doesn't really do anything much if you use
browser-defaults or a dark theme with @prefers-color-scheme
- Move the end of the h-entry div up above the footer.
- Move syndicated link to Gemini capsule up into the byline so it gets
included in the now-smaller h-entry.
See https://github.com/nekr0z/static-webmentions/issues/1
- Wrap the <a> in a <span> to make the h-entry expose an author URL
(link to homepage). Useful for sending Webmentions.
- Switch from schema.org/Article to schema.org/BlogPosting
- Footer should contain date last built so people don't start scratching
their heads wondering why webmentions aren't showing up
- Add rel="nofollow ugc" to webmention links.
Statically grab and include webmentions during Hugo builds, no JS
involved. Hugo supports making web requests and parsing the resulting
JSON, so there was no need to use an external program either.
Inspired by the h-entry implementation on Charlie Owen's personal
website: https://whalecoiner.com
The u-photo re-uses the 32px favicon that the browser has already
cached, so it shouldn't bloat up the page anymore.
These changes required a bit of additional CSS. I snuck in come color
changes too.
