fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-24 05:02:10 +00:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: fmaury:fc8eb8d7a67b8b1f3570c3f4a799a0b78183152f
Branches Tags
fmaury:master
fmaury:draft-searchengines
..
compare: fmaury:5c70d4d8364927bce4f58bb1dd5eff3a804dd884
Branches Tags
fmaury:master
fmaury:draft-searchengines

6 commits
fc8eb8d7a6 ... 5c70d4d836

Author SHA1 Message Date
Rohan Kumar
5c70d4d836
Mention color output for non-tty 2022-08-02 18:06:24 -07:00
Rohan Kumar
dc1717b693
New note: accessibility and search indexes 2022-08-02 18:06:01 -07:00
Rohan Kumar
f4fe706cab
Reduce margins 
We still clear 48px
 2022-08-02 18:04:51 -07:00
Rohan Kumar
385ea60c55
Atom feed: use different <logo>, formatting 
The spec recommends that the <logo> element is twice as wide as tall:
https://validator.w3.org/feed/docs/atom.html#optionalFeedElements

Add yet another site icon that fits that recommendation. Tidy up the
feed in the meantime.
 2022-08-01 21:28:32 -07:00
Rohan Kumar
7716ffb06c
Minor semantic tweaks to some links 
- Merge pronoun links together. They don't need to be separate.
- Make project-list a hyperlinked-description-list element.
 2022-08-01 21:26:18 -07:00
Rohan Kumar
5affa6df0b
CSS: compact, preserve active color, size tweak 
- Remove unnecessary elements from attribute selectors wherever it
  improves compression.
- Dark theme: prevent active link color from being overridden.
- Sort properties/attributes to improve compression ratios.
- Bump font size from 109% to 109.375% so the default font size hits
  17.5px and we get nice round numbers.
 2022-08-01 21:24:53 -07:00
10 changed files with 153 additions and 119 deletions
Show stats Expand all files Collapse all files

1
assets/atom.svg Normal file
View file

@ -0,0 +1 @@
<svg height="72" width="144" viewBox="0 0 144 72" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h144v72H0z"/><path d="M60.51 50.71c-.72 0-1.42-.11-2.1-.33-.69-.21-1.28-.57-1.78-1.07-.51-.51-.87-1.1-1.08-1.78-.22-.69-.33-1.39-.33-2.11s.11-1.42.33-2.1c.21-.69.57-1.28 1.08-1.78.5-.51 1.09-.87 1.78-1.08.68-.22 1.38-.32 2.1-.32s1.42.1 2.1.32c.69.21 1.28.57 1.78 1.08.51.5.87 1.09 1.08 1.78.22.68.33 1.38.33 2.1s-.11 1.42-.33 2.11c-.21.68-.57 1.27-1.08 1.78-.5.5-1.09.86-1.78 1.07-.68.22-1.38.33-2.1.33zm0-18.88c-.72 0-1.42-.11-2.1-.33-.69-.21-1.28-.57-1.78-1.07-.51-.51-.87-1.1-1.08-1.78-.22-.69-.33-1.39-.33-2.11s.11-1.42.33-2.1c.21-.68.57-1.28 1.08-1.78.5-.51 1.09-.86 1.78-1.08.68-.22 1.38-.32 2.1-.32s1.42.1 2.1.32c.69.22 1.28.57 1.78 1.08.51.5.87 1.1 1.08 1.78.22.68.33 1.38.33 2.1s-.11 1.42-.33 2.11c-.21.68-.57 1.27-1.08 1.78-.5.5-1.09.86-1.78 1.07-.68.22-1.38.33-2.1.33zm21.52 29.5-4.01-3.12c2.12-2.52 3.64-5.04 4.53-7.56-.82-.1-1.59-.4-2.29-.89-.7-.48-1.2-1.12-1.51-1.91-.3-.79-.46-1.6-.46-2.43 0-.72.11-1.42.33-2.1.21-.69.57-1.28 1.08-1.78.5-.51 1.09-.87 1.78-1.08.68-.22 1.38-.32 2.1-.32s1.42.1 2.1.32c.69.21 1.28.57 1.78 1.08.51.5.87 1.09 1.08 1.78.22.68.33 1.38.33 2.1v.27c-.08 5.22-2.32 10.43-6.75 15.64zm1.46-29.5c-.72 0-1.42-.11-2.1-.33-.69-.21-1.28-.57-1.78-1.07-.51-.51-.87-1.1-1.08-1.78-.22-.69-.33-1.39-.33-2.11s.11-1.42.33-2.1c.21-.68.57-1.28 1.08-1.78.5-.51 1.09-.86 1.78-1.08.68-.22 1.38-.32 2.1-.32s1.42.1 2.1.32c.69.22 1.28.57 1.78 1.08.51.5.87 1.1 1.08 1.78.22.68.33 1.38.33 2.1s-.11 1.42-.33 2.11c-.21.68-.57 1.27-1.08 1.78-.5.5-1.09.86-1.78 1.07-.68.22-1.38.33-2.1.33z" fill="#fff"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

24
assets/css/dark.css
View file

@ -28,14 +28,11 @@
color: #eee7b2; color: #eee7b2;
} }
a:active {
color: #b93;
}
a:visited { a:visited {
color: #ffdaff; color: #ffdaff;
} }
/* For users who request less contrast, target ACPA Lc of -85 to -86 */
@media (prefers-contrast: less) { @media (prefers-contrast: less) {
html { html {
background-color: #333; background-color: #333;
@ -44,20 +41,33 @@
/* Small text needs higher contrast. */ /* Small text needs higher contrast. */
@media not (prefers-contrast: less) { @media not (prefers-contrast: less) {
sup a:link { sup a:link:not(:active) {
color: #feb; color: #feb;
} }
sup a:visited { sup a:visited:not(:active) {
color: #ffe5ff; color: #ffe6ff;
} }
} }
/* For users who request more contrast, target ACPA Lc near -96 */
@media (prefers-contrast: more) { @media (prefers-contrast: more) {
html { html {
background-color: #111; background-color: #111;
color: #eee; color: #eee;
} }
a:link {
color: #feb;
}
a:visited {
color: #ffe6ff;
}
} }
/* Specified last so it overrides :visited. I chose this color because
* it's dimmer, so it's noticeable even without color vision. */
a:active {
color: #f83;
}
} }

129
assets/css/main.css
View file

@ -17,6 +17,24 @@
* microformats2 classnames for IndieWeb parsers, but I don't actually * microformats2 classnames for IndieWeb parsers, but I don't actually
* use those for styling. * use those for styling.
* *
* Some pages (e.g. post archives) are really long despite having a
* small download size. Rather than resort to pagination, I decided to
* use CSS containment and content-visibility. I test performance on
* browsers with heavy throttling and no GPU acceleration to ensure that
* they're gentle on the CPU. For instance, Lighthouse benchmarks my
* machine's CPU power at 1200-1300 and recommends 2.8-3.0x throttling;
* I throttle at 12-15x.
*
* "content-visibility: auto" implies containment; however, some
* browsers don't support "content-visibility: auto" but do support the
* "contain" property. To be consistent across all these browsers, I
* therefore use both even if it's a bit redundant. Once the latest
* Safari has supported "content-visibility: auto" for a year or so and
* it's in the latest version of the Tor Browser (which typically uses
* whatever the latest Firefox-ESR was a month or two ago), I'll
* consider removing these redundancies. I'll probably have to wait two
* years.
*
* To keep myself from caring about minute details, I limited myself to * To keep myself from caring about minute details, I limited myself to
* only defining spacing in increments of .25em. Pixels are 1px or * only defining spacing in increments of .25em. Pixels are 1px or
* multiples of 3px. This also improves compression. No more "finding * multiples of 3px. This also improves compression. No more "finding
@ -54,10 +72,10 @@ html {
* with minimal adjustment, and makes tap-targets larger. * with minimal adjustment, and makes tap-targets larger.
* Only do this on screen, since printouts already improve legibility * Only do this on screen, since printouts already improve legibility
* and cost paper + ink. * and cost paper + ink.
* 108.75% is the minimum required to get superscripts to reach 14.5 * 109.375% is the minimum required to get text to 17.5 CSS pixels and
* CSS pixels with most default stylesheets. At that size, my dark * superscripts past 14.75 px with most default stylesheets. At that
* color palette has sufficient contrast.*/ * size, my dark color palette has sufficient contrast.*/
font-size: 109%; font-size: 109.375%;
/* Aligning to the center with space on both sides prevents accidental /* Aligning to the center with space on both sides prevents accidental
* link activation on tablets, and is a common practice that users are * link activation on tablets, and is a common practice that users are
@ -81,13 +99,13 @@ html {
* containing lists of interactives, with 8px in between. * containing lists of interactives, with 8px in between.
* Don't use relative units here; this margin shouldn't scale with * Don't use relative units here; this margin shouldn't scale with
* zoom, or else text will get narrower with zoom. */ * zoom, or else text will get narrower with zoom. */
padding: 0 16px; padding: 0 14px;
} }
/* 45em is too wide for long body text. /* 45em is too wide for long body text.
* Typically meets SC 1.4.8, plus or minus a few characters. */ * Typically meets SC 1.4.8, plus or minus a few characters. */
div[itemprop="articleBody"], [itemprop="articleBody"],
li[itemprop="dataFeedElement"], [itemprop="dataFeedElement"],
.narrow { .narrow {
margin: auto; margin: auto;
max-width: 34em; max-width: 34em;
@ -105,9 +123,9 @@ html {
/* Add padding on both sides so that focus outlines don't escape their /* Add padding on both sides so that focus outlines don't escape their
* containers. This will let us enable CSS containment without * containers. This will let us enable CSS containment without
* clipping overflowing elements. */ * clipping overflowing elements. */
padding: 0 .5em;
margin-top: .25em; margin-top: .25em;
margin-bottom: .25em; margin-bottom: .25em;
padding: 0 .5em;
} }
/* Align titular h1 with top nav and body text. */ /* Align titular h1 with top nav and body text. */
@ -117,15 +135,15 @@ html {
/* Archive pages can get long. Allow them to get long without slowing /* Archive pages can get long. Allow them to get long without slowing
* down the browser by using content-visibility. */ * down the browser by using content-visibility. */
dt,
footer,
h2, h2,
h3, h3,
aside > a,
footer,
dt,
a[role="doc-backlink"],
section[role="doc-endnotes"],
li article, li article,
summary { summary,
aside > a,
[role="doc-backlink"],
[role="doc-endnotes"] {
content-visibility: auto; content-visibility: auto;
contain-intrinsic-size: auto 3em; contain-intrinsic-size: auto 3em;
} }
@ -146,40 +164,42 @@ html {
} }
.tall, .tall,
section[role="doc-endnotes"] { [role="doc-endnotes"] {
contain-intrinsic-size: auto 50em; contain-intrinsic-size: auto 50em;
} }
/* Full-width elements (e.g. display: block) have known widths, so /* Full-width elements (e.g. display: block) have known widths, so
* contain their widths. */ * contain their widths. */
html,
body,
main,
article, article,
body,
dt,
h1, h1,
h2, h2,
h3, h3,
html,
main,
pre, pre,
dt,
summary, summary,
section[role="doc-endnotes"] { [role="doc-endnotes"],
[role="doc-preface"] {
contain: inline-size layout paint; contain: inline-size layout paint;
} }
p, figure,
figure { p {
contain: inline-size layout; contain: inline-size layout;
} }
/* Containment changed spaicng a bit; correct that. */
article > h2 { article > h2 {
margin: .25em 0; margin: .25em 0;
padding: .25em 0; padding: .25em 0;
} }
/* If we have a list of disclosure widgets, we need some /* A11y: If we have a list of disclosure widgets, we need some
* non-interactive space on the screen that's safe to tap. */ * non-interactive space on the screen that's safe to tap. */
form, details,
details { form {
contain: inline-size layout; contain: inline-size layout;
margin: .5em 0; margin: .5em 0;
} }
@ -192,13 +212,13 @@ html {
* paragraph are section permalinks. */ * paragraph are section permalinks. */
input, input,
div[itemprop="comment"] dd > a,
dt > a,
summary, summary,
nav[itemprop="breadcrumb"] a,
nav[itemprop="breadcrumb"] > span,
aside > a, /* Used for section permalinks */ aside > a, /* Used for section permalinks */
li > a { dt > a,
li > a,
[itemprop="comment"] dd > a,
[itemprop="breadcrumb"] a,
[itemprop="breadcrumb"] > span {
padding: .75em .25em; padding: .75em .25em;
} }
@ -207,8 +227,7 @@ html {
* Also prevent overlapping outlines on focus */ * Also prevent overlapping outlines on focus */
/* We've increased the padding for dt > a, but dt without a link /* We've increased the padding for dt > a, but dt without a link
* should take up as much space. Also: since it got * should take up as much space. */
* content-visibility: auto previously, give it an intrinsic size. */
dt { dt {
padding: 1em .5em; padding: 1em .5em;
margin: -.25em 0 -.25em -.5em; margin: -.25em 0 -.25em -.5em;
@ -220,15 +239,15 @@ html {
padding-bottom: .25em; padding-bottom: .25em;
} }
dt > a, aside > a,
aside > a { dt > a {
contain: content; contain: content;
margin: -.75em -.25em; margin: -.75em -.25em;
} }
header > nav, header > nav,
a[href="#h1"], /* skip link */ a[href="#h1"], /* skip link */
div[itemprop="comment"] dd > a , [itemprop="comment"] dd > a ,
footer > nav, footer > nav,
/* List items with direct hyperlink children should only have one /* List items with direct hyperlink children should only have one
* hyperlink. */ * hyperlink. */
@ -260,15 +279,12 @@ html {
margin: 0 0 0 -.5em; margin: 0 0 0 -.5em;
} }
/* align h-feeds in sections; they typically follow articles. */ /* align h-feeds in sections; they typically follow articles. */
a[role="doc-backlink"], [role="doc-backlink"],
section article p { section article p {
margin-left: -.5em; margin-left: -.5em;
} }
/* The nav has to be distant-enough from the top to make room for a /* The nav has to be distant-enough from the top to make room for a
* skip-link. The breadcrumbs also can't have their focus-outlines * skip-link. The breadcrumbs also can't have their focus-outlines
* overflow while CSS containment is enabled. */ * overflow while CSS containment is enabled. */
@ -284,6 +300,7 @@ html {
padding-top: 0; padding-top: 0;
} }
/* Lists of links should have some spacing so tap targets don't overlap. */
/* stylelint-disable selector-max-compound-selectors -- simplest way to describe link-lists */ /* stylelint-disable selector-max-compound-selectors -- simplest way to describe link-lists */
:not(nav) > ul li > a, :not(nav) > ul li > a,
nav:not([itemprop="breadcrumb"]) li, nav:not([itemprop="breadcrumb"]) li,
@ -293,7 +310,7 @@ html {
} }
/* Increase backlink tap target size to at least 48x48 */ /* Increase backlink tap target size to at least 48x48 */
a[role="doc-backlink"] { [role="doc-backlink"] {
contain: content; contain: content;
display: inline-block; display: inline-block;
padding: .75em .5em; padding: .75em .5em;
@ -311,7 +328,7 @@ html {
a[href="#h1"]:focus { a[href="#h1"]:focus {
top: 0; top: 0;
} }
} } /* End of adjustments for screen media type */
/* Make superscripts a bit easier to tap, and prevent consecutive /* Make superscripts a bit easier to tap, and prevent consecutive
* superscripts from touching. */ * superscripts from touching. */
@ -328,7 +345,6 @@ sup {
line-height: 0; line-height: 0;
} }
/* narrow screens: reduce list indentation, hyphenate nested lists /* narrow screens: reduce list indentation, hyphenate nested lists
* touch screens: lists of links should be easy to tap so give them * touch screens: lists of links should be easy to tap so give them
* some spacing (partial SC 2.5.5). There should be non-interactive * some spacing (partial SC 2.5.5). There should be non-interactive
@ -359,20 +375,20 @@ nav ul {
} }
/* step 2: remove bullets and make elements inline. */ /* step 2: remove bullets and make elements inline. */
nav[itemprop="breadcrumb"] ol, [itemprop="breadcrumb"] ol,
nav[itemprop="breadcrumb"] li, [itemprop="breadcrumb"] li,
nav[itemprop="breadcrumb"] > span, [itemprop="breadcrumb"] > span,
nav ul li, nav ul li,
dt > a { dt > a {
display: inline-block; display: inline-block;
} }
nav[itemprop="breadcrumb"] ol { [itemprop="breadcrumb"] ol {
margin: -.25em; margin: -.25em;
padding: 0; padding: 0;
} }
nav[itemprop="breadcrumb"] li:not(:last-of-type)::after { [itemprop="breadcrumb"] li:not(:last-of-type)::after {
content: "→"; content: "→";
} }
/* narrow screens: we reduce margin for blockquotes a lot, using /* narrow screens: we reduce margin for blockquotes a lot, using
@ -402,8 +418,8 @@ h1 {
} }
li > a, li > a,
nav[itemprop="breadcrumb"] a, [itemprop="breadcrumb"] a,
nav[itemprop="breadcrumb"] > span { [itemprop="breadcrumb"] > span {
padding: .25em; padding: .25em;
} }
@ -429,6 +445,7 @@ kbd {
ins, ins,
[role="note"], [role="note"],
[role="doc-tip"] { [role="doc-tip"] {
contain: content;
font-style: italic; font-style: italic;
text-decoration: none; text-decoration: none;
} }
@ -439,8 +456,8 @@ ins,
* This does not hold true for figures in somewhat distinct sections; the * This does not hold true for figures in somewhat distinct sections; the
* section should instead get the spacing. A section that constitutes a * section should instead get the spacing. A section that constitutes a
* separate schema.org object would qualify. */ * separate schema.org object would qualify. */
section[itemprop="mentions"], figure,
figure { section[itemprop="mentions"] {
margin: 1.5em 0; margin: 1.5em 0;
} }
@ -462,7 +479,7 @@ samp {
* I use hidden spans in backlinks to provide ARIA labels. * I use hidden spans in backlinks to provide ARIA labels.
* Some ancient browsers don't support input[type="hidden"] */ * Some ancient browsers don't support input[type="hidden"] */
[hidden], [hidden],
input[type="hidden"] { [type="hidden"] {
display: none; display: none;
} }
@ -476,7 +493,7 @@ input[type="hidden"] {
* viewport, triggering horizontal scrolling. Allow breaking words in * viewport, triggering horizontal scrolling. Allow breaking words in
* content I don't control (comments, names). For content I do control, * content I don't control (comments, names). For content I do control,
* I just add soft hyphens to the HTML. */ * I just add soft hyphens to the HTML. */
div[itemprop="comment"], [itemprop="comment"],
:not(pre) > code, :not(pre) > code,
:not(pre) > samp, :not(pre) > samp,
span[itemtype="https://schema.org/Person"] { span[itemtype="https://schema.org/Person"] {
@ -517,7 +534,7 @@ summary {
/* center standalone images; same justification as /* center standalone images; same justification as
* for centering the body contents. Also makes images easier to see * for centering the body contents. Also makes images easier to see
* for people holding a device with one hand. */ * for people holding a device with one hand. */
div[itemprop="articleBody"] img { [itemprop="articleBody"] img {
display: block; display: block;
height: auto; height: auto;
margin: auto; margin: auto;
@ -585,7 +602,7 @@ form > div > div {
a:focus, a:focus,
summary:focus, summary:focus,
pre[tabindex]:focus, [tabindex="0"]:focus,
form :focus { form :focus {
outline: 3px solid; outline: 3px solid;
} }
@ -594,7 +611,7 @@ form :focus {
* Leave it on for elements that are supposed to show focus on click. */ * Leave it on for elements that are supposed to show focus on click. */
@supports selector(:focus-visible) { @supports selector(:focus-visible) {
a:focus:not(:focus-visible), a:focus:not(:focus-visible),
pre[tabindex]:focus:not(:focus-visible) { [tabindex="0"]:focus:not(:focus-visible) {
outline: none; outline: none;
} }
} }

7
assets/css/print.css
View file

@ -7,8 +7,8 @@
} }
/* Hide screen-only content */ /* Hide screen-only content */
a[href="#h1"], /* Skip link */ [href="#h1"], /* Skip link */
a[role="doc-backlink"], /* can't navigate back on print. */ [role="doc-backlink"], /* can't navigate back on print. */
aside:not([role="note"]), aside:not([role="note"]),
/* An un-opened summary inside an article has no use in print. /* An un-opened summary inside an article has no use in print.
* Outside an article it's used in my webring list where it has some * Outside an article it's used in my webring list where it has some
@ -20,6 +20,7 @@
/* splitting up sections with <hr> is unnecesary if those /* splitting up sections with <hr> is unnecesary if those
* sections are removed */ * sections are removed */
body > hr, body > hr,
main[itemprop] > article + hr,
nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) { nav:not([itemprop="breadcrumb"]) a:not([rel="home"]) {
display: none; display: none;
} }
@ -27,8 +28,8 @@
/* Print: don't break up self-contained items. */ /* Print: don't break up self-contained items. */
figure, figure,
section[itemprop="mentions"],
blockquote, blockquote,
section[itemprop="mentions"],
li { li {
break-inside: avoid; break-inside: avoid;
} }

2
content/_index.md
View file

@ -16,7 +16,7 @@ About me
<meta itemprop="url" content="https://seirdy.one" /> <meta itemprop="url" content="https://seirdy.one" />
<div itemprop="author" itemscope="" itemtype="https://schema.org/Person" itemid="https://seirdy.one/#seirdy" class="p-author author h-card vcard" id="seirdy"> <div itemprop="author" itemscope="" itemtype="https://schema.org/Person" itemid="https://seirdy.one/#seirdy" class="p-author author h-card vcard" id="seirdy">
I'm <a itemprop="url" href="https://seirdy.one" rel="author me home canonical" class="u-url u-uid url"> {{% indieweb-icon %}} <span itemprop="name" class="p-name fn n"> <span itemprop="givenName" class="p-given-name given-name">Rohan</span>&#160;<span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a> (<span class="p-pronouns"><a href="https://pronoun.is/he" class="p-pronoun h-pronoun">he</a>/<a href="https://pronoun.is/he/him" class="p-pronoun h-pronoun">him</a></span>). I'm also known by my more casual online handle <span itemprop="alternateName" class="p-nickname nickname">Seirdy</span> (<span class="p-pronouns"><a href="https://pronoun.is/they" class="p-pronoun h-pronoun">they</a>/<a href="https://pronoun.is/they/them" class="p-pronoun h-pronoun">them</a></span>). Mixing them up is fine. I'm <a itemprop="url" href="https://seirdy.one" rel="author me home canonical" class="u-url u-uid url"> {{% indieweb-icon %}} <span itemprop="name" class="p-name fn n"> <span itemprop="givenName" class="p-given-name given-name">Rohan</span>&#160;<span itemprop="familyName" class="p-family-name family-name">Kumar</span></span></a> (<span class="p-pronouns"><a href="https://pronoun.is/he/him" class="u-pronouns"><span class="p-pronoun">he</span>/<span class="p-pronoun">him</span></a></span>). I'm also known by my more casual online handle <span itemprop="alternateName" class="p-nickname nickname">Seirdy</span> (<span class="p-pronouns"><a href="https://pronoun.is/they/them" class="u-pronouns"><span class="p-pronoun">they</span>/<span class="p-pronoun">them</span></a></span>). Mixing them up is fine.
The Director's Cut of my bio is at my [About page](./about/ "{itemprop='subjectOf'}"). The Director's Cut of my bio is at my [About page](./about/ "{itemprop='subjectOf'}").

22
content/about/_index.md
View file

@ -23,12 +23,10 @@ I go by <span itemprop="name" class="p-name fn n"><span itemprop="givenName" cla
<dd><span itemprop="homeLocation" itemscope="" itemtype="https://schema.org/State" class="p-region">California</span>, <abbr itemprop="nationality" itemscope="" itemtype="https://schema.org/Country" class="p-country-name" title="United States of America">USA</abbr></dd> <dd><span itemprop="homeLocation" itemscope="" itemtype="https://schema.org/State" class="p-region">California</span>, <abbr itemprop="nationality" itemscope="" itemtype="https://schema.org/Country" class="p-country-name" title="United States of America">USA</abbr></dd>
<dt>Gender</dt> <dt>Gender</dt>
<dd> <dd class="p-gender-identity" itemprop="gender">Male</dd>
<span class="p-gender-identity" itemprop="gender">Male</span>
</dd>
<dt>Pronouns</dt> <dt>Pronouns</dt>
<dd class="p-pronouns"><a href="https://pronoun.is/he" class="p-pronoun h-pronoun">he</a>/<a href="https://pronoun.is/he/him" class="p-pronoun h-pronoun">him</a></dd> <dd class="p-pronouns"><a href="https://pronoun.is/he/him" class="u-pronouns"><span class="p-pronoun">he</span>/<span class="p-pronoun">him</span></a></dd>
<dt>Software forges</dt> <dt>Software forges</dt>
<dd><a href="https://sr.ht/~seirdy" rel="me">Sourcehut</a> (preferred)</dd> <dd><a href="https://sr.ht/~seirdy" rel="me">Sourcehut</a> (preferred)</dd>
@ -56,12 +54,10 @@ I go by <span class="p-nickname nickname" itemprop="alternateName">Seirdy</span>
<dd>Cyberspace</dd> <dd>Cyberspace</dd>
<dt>Gender</dt> <dt>Gender</dt>
<dd> <dd class="p-gender-identity" itemprop="gender">Agender</dd>
<span class="p-gender-identity" itemprop="gender">Agender</span>
</dd>
<dt>Pronouns</dt> <dt>Pronouns</dt>
<dd class="p-pronouns"><a href="https://pronoun.is/they" class="p-pronoun h-pronoun">they</a>/<a href="https://pronoun.is/they/them" class="p-pronoun h-pronoun">them</a></dd> <dd class="p-pronouns"><a href="https://pronoun.is/they/them" class="u-pronouns"><span class="p-pronoun">they</span>/<span class="p-pronoun">them</span></a></dd>
<dt>Social (Fediverse)</dt> <dt>Social (Fediverse)</dt>
<dd><a href="https://pleroma.envs.net/seirdy" rel="me">@Seirdy<wbr />@pleroma<wbr />.envs.net</a> (primary)</dd> <dd><a href="https://pleroma.envs.net/seirdy" rel="me">@Seirdy<wbr />@pleroma<wbr />.envs.net</a> (primary)</dd>
@ -112,13 +108,11 @@ If you want to follow me on the Fediverse, [read my Fediverse greeting first]({{
Selected projects Selected projects
----------------- -----------------
### [Clogstats](https://sr.ht/~seirdy/clogstats/) [Clogstats](https://sr.ht/~seirdy/clogstats/)
: Analyze WeeChat logs to quantify, graph, forecast, and perform anomaly-detection on IRC channel activity. Written in Python; uses Pandas.
Analyze WeeChat logs to quantify, graph, forecast, and perform anomaly-detection on IRC channel activity. Written in Python; uses Pandas. [MOAC](https://sr.ht/~seirdy/MOAC/)
: Generate passwords and analyze password strength given physical limits to computing. Based on a weblog/gemlog entry: [Becoming physically immune to brute-force attacks](../posts/2021/01/12/password-strength/). Written in Go.
### [MOAC](https://sr.ht/~seirdy/MOAC/)
Generate passwords and analyze password strength given physical limits to computing. Based on a weblog/gemlog entry: [Becoming physically immune to brute-force attacks](../posts/2021/01/12/password-strength/). Written in Go.
Interests, preferences, et cetera Interests, preferences, et cetera
--------------------------------- ---------------------------------

12
content/notes/accessibility-and-search-indexes.md Normal file
View file

@ -0,0 +1,12 @@
---
title: "Accessibility and search indexes"
date: 2022-08-02T18:06:26-07:00
---
Search engine indexes like Google, Yandex, and Bing now favor mobile-friendly sites. This has encouraged many sites to invest in mobile-friendliness. If we overlook toxic developments like Google AMP and Yandex Turbo pages, this is an example of search engines creating incentives to improve the state of the Web. Smaller indexes like Teclis and Marginalia create different incentives: they penalize tracking and toxic forms of <abbr title="Search Engine Optimization">SEO</abbr>.
I wonder how this could apply to accessibility. Currently, Google rewards the use of alt-text and penalizes small text, small tap-targets, bad link text, and missing language metadata. Rewarding alt-text has created perverse incentives to be overly descriptive, but on the whole these incentives have been helpful. Can we do better?
For starters: on searches with many results, search engines could stick to keywords that show up in both the DOM *and* significant landmarks of the accessible tree. They could gently penalize easily-detectable accessibility issues such as missing labels, landmarks, or heading-levels. Search engines that use these heuristics should develop or endorse tools to detect issues using the same logic. Automated tools only detect a tiny fraction of issues; saying "we plan to roll out more accessibility checks in the future" could get people to do more than merely meet current checks.
I also think it's worth exposing some metadata in search results to describe fixable issues. Something as simple as "This result has detectable accessibility issues: missing landmarks" with a "more info" link could go a long way.

9
content/posts/cli-best-practices.md
View file

@ -14,12 +14,17 @@ outputs:
- html - html
- gemtext - gemtext
--- ---
<section role="doc-preface">
<h2 id="preface">Preface</h2>
This began as a reply to another article by Lucas F. Costa; it lists practices to improve user-experience (<abbr title="User Experience">UX</abbr>) of command-line interfaces (<abbr title="Command-Line Interface">CLIs</abbr>). It comes from a good place, and has some good advice: I particularly like its advice on input-validation and understandable errors. Unfortunately, a number of its suggestions are problematic, particularly from an accessibility perspective. This began as a reply to another article by Lucas F. Costa; it lists practices to improve user-experience (<abbr title="User Experience">UX</abbr>) of command-line interfaces (<abbr title="Command-Line Interface">CLIs</abbr>). It comes from a good place, and has some good advice: I particularly like its advice on input-validation and understandable errors. Unfortunately, a number of its suggestions are problematic, particularly from an accessibility perspective.
This is a "living article" that I plan on adding to indefinitely. If you like it, come back in a month or two and check the "changelog" link in the article header. This is a "living article" that I plan on adding to indefinitely. If you like it, come back in a month or two and check the "changelog" link in the article header.
<p role="doc-tip">Note: this article specifically concerns CLIs, not full-blown textual user interfaces (<abbr title="Textual User Interfaces">TUIs</abbr>). It also focuses on utilities for UNIX-like shells; other command-line environments may have different conventions.</p> <p role="doc-tip">Note: this article specifically concerns CLIs, not full-blown textual user interfaces (<abbr title="Textual User Interfaces">TUIs</abbr>). It also focuses on utilities for UNIX-like shells; other command-line environments may have different conventions.</p>
</section>
{{<toc>}} {{<toc>}}
Problematic patterns Problematic patterns
@ -128,8 +133,10 @@ $ moac -
2. Be safe. If a tool makes irreversible changes to the outside environment, add a `--dry-run` or equivalent option. 2. Be safe. If a tool makes irreversible changes to the outside environment, add a `--dry-run` or equivalent option.
3. If your tool has color output: disable color when the output is not a [TTY](https://en.wikipedia.org/wiki/Tty_(Unix)), unless the user explicitly force-enables color via a command-line flag. Many tools support a `--color` flag that accepts the values "always", "never", and "auto".
More opinionated considerations {#more-opinionated-considerations} More opinionated considerations {#more-opinionated-considerations}
----------------------------------------- -------------------------------
These considerations are far more subjective, debatable, and deserving of skepticism than the previous recommendations. There's a reason I call this section "considerations", not "recommendations". Exceptions abound; I'm here to present information, not to think on your behalf. These considerations are far more subjective, debatable, and deserving of skepticism than the previous recommendations. There's a reason I call this section "considerations", not "recommendations". Exceptions abound; I'm here to present information, not to think on your behalf.

10
content/resume/index.md
View file

@ -46,10 +46,8 @@ Portfolio
Git repositories mirrored across [Sourcehut](https://sr.ht/~seirdy), [GitHub](https://github.com/Seirdy), and [GitLab](https://gitlab.com/Seirdy). Selected projects: Git repositories mirrored across [Sourcehut](https://sr.ht/~seirdy), [GitHub](https://github.com/Seirdy), and [GitLab](https://gitlab.com/Seirdy). Selected projects:
### Clogstats: [sr.ht<wbr />/~seirdy<wbr />/clogstats](https://sr.ht/~seirdy/clogstats) [Clogstats: sr.ht<wbr />/~seirdy<wbr />/clogstats](https://sr.ht/~seirdy/clogstats)
: Gathers IRC channel activity statistics from WeeChat logs and performs time-series analysis and forecasting on them. It can quantify, rank, and chart chatting activity over time and display forecasts. It can also detect anomalous increases in activity. Written in Python with NumPy and Pandas.
Gathers IRC channel activity statistics from WeeChat logs and performs time-series analysis and forecasting on them. It can quantify, rank, and chart chatting activity over time and display forecasts. It can also detect anomalous increases in activity. Written in Python with NumPy and Pandas. [MOAC: sr.ht<wbr />/~seirdy<wbr />/MOAC](https://sr.ht/~seirdy/MOAC/)
: Analyze password strength given physical limits to computing, and generate secure passwords. Computes theoretical limits to a brute-force attack limited by given physical quantities (mass, energy, power, temperature, etc.) and generates passwords to withstand them. This provides a future-proof understanding of password strength. Extensively tested. Written in Go.
### MOAC: [sr.ht<wbr />/~seirdy<wbr />/MOAC](https://sr.ht/~seirdy/MOAC/)
Analyze password strength given physical limits to computing, and generate secure passwords. Computes theoretical limits to a brute-force attack limited by given physical quantities (mass, energy, power, temperature, etc.) and generates passwords to withstand them. This provides a future-proof understanding of password strength. Extensively tested. Written in Go.

56
layouts/_default/list.atom.xml
View file

@ -1,16 +1,16 @@
{{- $pages := (where site.RegularPages "Section" .Section) -}} {{- $pages := (where site.RegularPages "Section" .Section) -}}
{{- $period := "daily" -}} {{- $period := "daily" -}}
{{- $title := .Section | humanize -}} {{- $title := .Section | humanize -}}
{{- if .IsHome }} {{- if .IsHome -}}
{{- $title = "All content" -}} {{- $title = "All content" -}}
{{- $pages = where .Site.RegularPages "Date" "!=" (time "0001-01-01") -}} {{- $pages = where .Site.RegularPages "Date" "!=" (time "0001-01-01") -}}
{{- $period = "hourly" -}} {{- $period = "hourly" -}}
{{ end -}} {{- end -}}
{{- if eq .Section "notes" -}} {{- if eq .Section "notes" -}}
{{- $period = "hourly" -}} {{- $period = "hourly" -}}
{{- end -}} {{- end -}}
{{- $icon_svg := resources.Get "/favicon.svg" | resources.Fingerprint "md5" -}} {{- $icon := resources.Get "/favicon.svg" | resources.Fingerprint "md5" -}}
{{- $icon_png := resources.Get "/favicon192.png" | resources.Fingerprint "md5" -}} {{- $logo := resources.Get "/atom.svg" | resources.Fingerprint "md5" -}}
<?xml version="1.0" encoding="utf-8" standalone="yes"?> <?xml version="1.0" encoding="utf-8" standalone="yes"?>
<feed <feed
xmlns="http://www.w3.org/2005/Atom" xmlns="http://www.w3.org/2005/Atom"
@ -22,9 +22,6 @@
xmlns:thr="http://purl.org/syndication/thread/1.0" xmlns:thr="http://purl.org/syndication/thread/1.0"
xml:lang="{{ .Site.LanguageCode }}"> xml:lang="{{ .Site.LanguageCode }}">
<title>{{ $title }} on {{ .Site.Title }}</title> <title>{{ $title }} on {{ .Site.Title }}</title>
<link rel="self" type="application/atom+xml" href="{{ .Permalink }}atom.xml" />
<logo>{{ $icon_png.Permalink }}</logo>
<icon>{{ .Site.Params.icon | absURL }}</icon>
<subtitle> <subtitle>
{{- if .Params.Description -}} {{- if .Params.Description -}}
{{- .Params.Description -}} {{- .Params.Description -}}
@ -32,6 +29,8 @@
{{- .Site.Params.Description -}} {{- .Site.Params.Description -}}
{{- end -}} {{- end -}}
</subtitle> </subtitle>
<icon>{{ $icon.Permalink }}</icon><logo>{{ $logo.Permalink }}</logo>
<link rel="self" type="application/atom+xml" href="{{ .Permalink }}atom.xml" />
<sy:updatePeriod>{{ $period }}</sy:updatePeriod> <sy:updatePeriod>{{ $period }}</sy:updatePeriod>
<sy:updateFrequency>2</sy:updateFrequency> <sy:updateFrequency>2</sy:updateFrequency>
<author> <author>
@ -44,43 +43,38 @@
<updated>{{ now.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated> <updated>{{ now.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
<id>{{ .Permalink }}</id> <id>{{ .Permalink }}</id>
{{ range $pages -}} {{ range $pages -}}
{{- if not .Params.Private }} {{- if not .Params.Private -}}
<entry> <entry>
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
<link rel="alternate" type="text/html" href="{{ .Permalink }}" /> <link rel="alternate" type="text/html" href="{{ .Permalink }}" /><id>{{ .Permalink }}</id>
<published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published> <published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published><updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
<updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated> <author><name>Rohan Kumar</name><uri>https://seirdy.one/</uri></author>
<author> <rights>CC-BY-SA 4.0 by Rohan Kumar</rights>
<name>Rohan Kumar</name> {{- with .Params.replyURI -}}
<uri>https://seirdy.one/</uri>
</author>
<id>{{ .Permalink }}</id>
<rights>CC-BY-SA 4.0 by Rohan Kumar</rights>
{{- with .Params.replyURI }}
<thr:in-reply-to ref="{{ . }}" href="{{ . }}" /> <thr:in-reply-to ref="{{ . }}" href="{{ . }}" />
{{- end -}} {{- end -}}
{{- with .Params.replyAuthorURI }} {{- with .Params.replyAuthorURI -}}
<link rel="mentioned" ostatus:object-type="http://activitystrea.ms/schema/1.0/person" href="{{ . }}"/> <link rel="mentioned" ostatus:object-type="http://activitystrea.ms/schema/1.0/person" href="{{ . }}"/>
{{- end -}} {{- end -}}
<content type="xhtml" xml:base="{{ .Permalink }}">
<div xmlns="http://www.w3.org/1999/xhtml">
{{- if .Params.replyURI -}}
{{- partial "reply-context" .Params | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | safeHTML }}
{{- end -}}
{{ partial "processed-content.html" . | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | replaceRE `<meta content="true" ?/>` "" | safeHTML }}
</div>
</content>
{{- $type := "article" -}} {{- $type := "article" -}}
{{- if eq .Section "notes" -}} {{- if eq .Section "notes" -}}
{{- $type = "note" -}} {{- $type = "note" -}}
{{- end -}} {{- end -}}
<activity:object-type>http://activitystrea.ms/schema/1.0/{{ $type }}</activity:object-type> <activity:object-type>http://activitystrea.ms/schema/1.0/{{ $type }}</activity:object-type>
<activity:verb>http://activitystrea.ms/schema/1.0/post</activity:verb> <activity:verb>http://activitystrea.ms/schema/1.0/post</activity:verb>
{{ with .Params.image -}} {{- with .Params.image -}}
{{- $image := resources.Get (printf "/p/%s" . ) | resources.Fingerprint "md5" -}} {{- $image := resources.Get (printf "/p/%s" . ) | resources.Fingerprint "md5" -}}
<media:thumbnail url="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" /> <media:thumbnail url="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" />
{{- end }} {{- end -}}
</entry> <content type="xhtml" xml:base="{{ .Permalink }}">
{{- end -}} <div xmlns="http://www.w3.org/1999/xhtml">
{{- if .Params.replyURI -}}
{{- partial "reply-context" .Params | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | safeHTML }}
{{- end -}}
{{ partial "processed-content.html" . | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | replaceRE `<meta content="true" ?/>` "" | safeHTML -}}
</div>
</content>
</entry>
{{ end -}}
{{- end }} {{- end }}
</feed> </feed>