1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-14 01:32:11 +00:00

Compare commits

..

No commits in common. "5c70d4d8364927bce4f58bb1dd5eff3a804dd884" and "fc8eb8d7a67b8b1f3570c3f4a799a0b78183152f" have entirely different histories.

10 changed files with 121 additions and 155 deletions

View file

@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -28,11 +28,14 @@
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;
@ -41,33 +44,20 @@
/* Small text needs higher contrast. */ /* Small text needs higher contrast. */
@media not (prefers-contrast: less) { @media not (prefers-contrast: less) {
sup a:link:not(:active) { sup a:link {
color: #feb; color: #feb;
} }
sup a:visited:not(:active) { sup a:visited {
color: #ffe6ff; color: #ffe5ff;
} }
} }
/* 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;
}
} }

View file

@ -17,24 +17,6 @@
* 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
@ -72,10 +54,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.
* 109.375% is the minimum required to get text to 17.5 CSS pixels and * 108.75% is the minimum required to get superscripts to reach 14.5
* superscripts past 14.75 px with most default stylesheets. At that * CSS pixels with most default stylesheets. At that size, my dark
* size, my dark color palette has sufficient contrast.*/ * color palette has sufficient contrast.*/
font-size: 109.375%; font-size: 109%;
/* 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
@ -99,13 +81,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 14px; padding: 0 16px;
} }
/* 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. */
[itemprop="articleBody"], div[itemprop="articleBody"],
[itemprop="dataFeedElement"], li[itemprop="dataFeedElement"],
.narrow { .narrow {
margin: auto; margin: auto;
max-width: 34em; max-width: 34em;
@ -123,9 +105,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. */
@ -135,15 +117,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,
li article,
summary,
aside > a, aside > a,
[role="doc-backlink"], footer,
[role="doc-endnotes"] { dt,
a[role="doc-backlink"],
section[role="doc-endnotes"],
li article,
summary {
content-visibility: auto; content-visibility: auto;
contain-intrinsic-size: auto 3em; contain-intrinsic-size: auto 3em;
} }
@ -164,42 +146,40 @@ html {
} }
.tall, .tall,
[role="doc-endnotes"] { section[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. */
article, html,
body, body,
dt, main,
article,
h1, h1,
h2, h2,
h3, h3,
html,
main,
pre, pre,
dt,
summary, summary,
[role="doc-endnotes"], section[role="doc-endnotes"] {
[role="doc-preface"] {
contain: inline-size layout paint; contain: inline-size layout paint;
} }
figure, p,
p { figure {
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;
} }
/* A11y: If we have a list of disclosure widgets, we need some /* 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. */
details, form,
form { details {
contain: inline-size layout; contain: inline-size layout;
margin: .5em 0; margin: .5em 0;
} }
@ -212,13 +192,13 @@ html {
* paragraph are section permalinks. */ * paragraph are section permalinks. */
input, input,
summary, div[itemprop="comment"] dd > a,
aside > a, /* Used for section permalinks */
dt > a, dt > a,
li > a, summary,
[itemprop="comment"] dd > a, nav[itemprop="breadcrumb"] a,
[itemprop="breadcrumb"] a, nav[itemprop="breadcrumb"] > span,
[itemprop="breadcrumb"] > span { aside > a, /* Used for section permalinks */
li > a {
padding: .75em .25em; padding: .75em .25em;
} }
@ -227,7 +207,8 @@ 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. */ * should take up as much space. Also: since it got
* 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;
@ -239,15 +220,15 @@ html {
padding-bottom: .25em; padding-bottom: .25em;
} }
aside > a, dt > a,
dt > a { aside > 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 */
[itemprop="comment"] dd > a , div[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. */
@ -279,12 +260,15 @@ 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. */
[role="doc-backlink"], a[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. */
@ -300,7 +284,6 @@ 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,
@ -310,7 +293,7 @@ html {
} }
/* Increase backlink tap target size to at least 48x48 */ /* Increase backlink tap target size to at least 48x48 */
[role="doc-backlink"] { a[role="doc-backlink"] {
contain: content; contain: content;
display: inline-block; display: inline-block;
padding: .75em .5em; padding: .75em .5em;
@ -328,7 +311,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. */
@ -345,6 +328,7 @@ 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
@ -375,20 +359,20 @@ nav ul {
} }
/* step 2: remove bullets and make elements inline. */ /* step 2: remove bullets and make elements inline. */
[itemprop="breadcrumb"] ol, nav[itemprop="breadcrumb"] ol,
[itemprop="breadcrumb"] li, nav[itemprop="breadcrumb"] li,
[itemprop="breadcrumb"] > span, nav[itemprop="breadcrumb"] > span,
nav ul li, nav ul li,
dt > a { dt > a {
display: inline-block; display: inline-block;
} }
[itemprop="breadcrumb"] ol { nav[itemprop="breadcrumb"] ol {
margin: -.25em; margin: -.25em;
padding: 0; padding: 0;
} }
[itemprop="breadcrumb"] li:not(:last-of-type)::after { nav[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
@ -418,8 +402,8 @@ h1 {
} }
li > a, li > a,
[itemprop="breadcrumb"] a, nav[itemprop="breadcrumb"] a,
[itemprop="breadcrumb"] > span { nav[itemprop="breadcrumb"] > span {
padding: .25em; padding: .25em;
} }
@ -445,7 +429,6 @@ 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;
} }
@ -456,8 +439,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. */
figure, section[itemprop="mentions"],
section[itemprop="mentions"] { figure {
margin: 1.5em 0; margin: 1.5em 0;
} }
@ -479,7 +462,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],
[type="hidden"] { input[type="hidden"] {
display: none; display: none;
} }
@ -493,7 +476,7 @@ samp {
* 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. */
[itemprop="comment"], div[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"] {
@ -534,7 +517,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. */
[itemprop="articleBody"] img { div[itemprop="articleBody"] img {
display: block; display: block;
height: auto; height: auto;
margin: auto; margin: auto;
@ -602,7 +585,7 @@ form > div > div {
a:focus, a:focus,
summary:focus, summary:focus,
[tabindex="0"]:focus, pre[tabindex]:focus,
form :focus { form :focus {
outline: 3px solid; outline: 3px solid;
} }
@ -611,7 +594,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),
[tabindex="0"]:focus:not(:focus-visible) { pre[tabindex]:focus:not(:focus-visible) {
outline: none; outline: none;
} }
} }

View file

@ -7,8 +7,8 @@
} }
/* Hide screen-only content */ /* Hide screen-only content */
[href="#h1"], /* Skip link */ a[href="#h1"], /* Skip link */
[role="doc-backlink"], /* can't navigate back on print. */ a[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,7 +20,6 @@
/* 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;
} }
@ -28,8 +27,8 @@
/* Print: don't break up self-contained items. */ /* Print: don't break up self-contained items. */
figure, figure,
blockquote,
section[itemprop="mentions"], section[itemprop="mentions"],
blockquote,
li { li {
break-inside: avoid; break-inside: avoid;
} }

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/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. 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.
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'}").

View file

@ -23,10 +23,12 @@ 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 class="p-gender-identity" itemprop="gender">Male</dd> <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/him" class="u-pronouns"><span class="p-pronoun">he</span>/<span class="p-pronoun">him</span></a></dd> <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>
<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>
@ -54,10 +56,12 @@ 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 class="p-gender-identity" itemprop="gender">Agender</dd> <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/them" class="u-pronouns"><span class="p-pronoun">they</span>/<span class="p-pronoun">them</span></a></dd> <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>
<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>
@ -108,11 +112,13 @@ 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.
[MOAC](https://sr.ht/~seirdy/MOAC/) Analyze WeeChat logs to quantify, graph, forecast, and perform anomaly-detection on IRC channel activity. Written in Python; uses Pandas.
: 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
--------------------------------- ---------------------------------

View file

@ -1,12 +0,0 @@
---
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.

View file

@ -14,17 +14,12 @@ 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
@ -133,10 +128,8 @@ $ 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.

View file

@ -46,8 +46,10 @@ 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.
[MOAC: sr.ht<wbr />/~seirdy<wbr />/MOAC](https://sr.ht/~seirdy/MOAC/) 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.
: 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.

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 := resources.Get "/favicon.svg" | resources.Fingerprint "md5" -}} {{- $icon_svg := resources.Get "/favicon.svg" | resources.Fingerprint "md5" -}}
{{- $logo := resources.Get "/atom.svg" | resources.Fingerprint "md5" -}} {{- $icon_png := resources.Get "/favicon192.png" | 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,6 +22,9 @@
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 -}}
@ -29,8 +32,6 @@
{{- .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>
@ -43,38 +44,43 @@
<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 }}" /><id>{{ .Permalink }}</id> <link rel="alternate" type="text/html" href="{{ .Permalink }}" />
<published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published><updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated> <published>{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</published>
<author><name>Rohan Kumar</name><uri>https://seirdy.one/</uri></author> <updated>{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</updated>
<author>
<name>Rohan Kumar</name>
<uri>https://seirdy.one/</uri>
</author>
<id>{{ .Permalink }}</id>
<rights>CC-BY-SA 4.0 by Rohan Kumar</rights> <rights>CC-BY-SA 4.0 by Rohan Kumar</rights>
{{- with .Params.replyURI -}} {{- 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 -}}
{{- $type := "article" -}}
{{- if eq .Section "notes" -}}
{{- $type = "note" -}}
{{- end -}}
<activity:object-type>http://activitystrea.ms/schema/1.0/{{ $type }}</activity:object-type>
<activity:verb>http://activitystrea.ms/schema/1.0/post</activity:verb>
{{- with .Params.image -}}
{{- $image := resources.Get (printf "/p/%s" . ) | resources.Fingerprint "md5" -}}
<media:thumbnail url="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" />
{{- end -}}
<content type="xhtml" xml:base="{{ .Permalink }}"> <content type="xhtml" xml:base="{{ .Permalink }}">
<div xmlns="http://www.w3.org/1999/xhtml"> <div xmlns="http://www.w3.org/1999/xhtml">
{{- if .Params.replyURI -}} {{- if .Params.replyURI -}}
{{- partial "reply-context" .Params | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | safeHTML }} {{- partial "reply-context" .Params | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | safeHTML }}
{{- end -}} {{- end -}}
{{ partial "processed-content.html" . | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | replaceRE `<meta content="true" ?/>` "" | safeHTML -}} {{ partial "processed-content.html" . | replaceRE `(?: )?(?:item(type|scope|prop|id|ref)="[^"]*"|class="language-figure")` "" | replaceRE `<meta content="true" ?/>` "" | safeHTML }}
</div> </div>
</content> </content>
{{- $type := "article" -}}
{{- if eq .Section "notes" -}}
{{- $type = "note" -}}
{{- end -}}
<activity:object-type>http://activitystrea.ms/schema/1.0/{{ $type }}</activity:object-type>
<activity:verb>http://activitystrea.ms/schema/1.0/post</activity:verb>
{{ with .Params.image -}}
{{- $image := resources.Get (printf "/p/%s" . ) | resources.Fingerprint "md5" -}}
<media:thumbnail url="{{ $image.Permalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" />
{{- end }}
</entry> </entry>
{{ end -}} {{- end -}}
{{- end }} {{- end }}
</feed> </feed>