1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-09-20 12:12:09 +00:00
Commit graph

216 commits

Author SHA1 Message Date
Rohan Kumar
c0d511b7c9
Mark up and widen code snippets 2022-04-06 19:02:17 -07:00
Rohan Kumar
aab9356cf2
New section on spacing, other additions
- Mention checking privacy policies for 3p content
- Elaborate on more mainstream examples of color overrides
- Link to CSS WG docs instead of MDN for prefers-contrast since they're
  more detailed.
- Specify that I'm just removing margins in <figure> elements for
  quotations.
2022-04-06 17:49:19 -07:00
Rohan Kumar
27ccfaca7b
Add info on non-breaing spaces. 2022-04-04 19:17:52 -07:00
Rohan Kumar
2f960ca7ec
Better linking, mention DPUB-ARIA, more infscroll
- Annotate links to PDFs and JS-mandatory content
- Add note on dpub-aria to the reading-mode section
- Fix a bad link
2022-04-04 18:11:50 -07:00
Rohan Kumar
8e2e1f9cc5
More information on image transcripts
- Add quote describing how blind readers struggle to find non-semantic context
- Mention that longdesc is deprecated by simple hyperlinks. Describe an alternative.
- Transcripts are necessary for machine translation
- Improve alt-text used alongside an image transcript
2022-04-04 15:46:04 -07:00
Rohan Kumar
f3b2c3ffa6
Rephrasing: better + inclusive use of prepositions
Follow
https://www.gov.uk/government/publications/inclusive-communication/inclusive-language-words-to-use-and-avoid-when-writing-about-disability
to mention disabilities directly with adjectives rather than
prepositions.

Fix my over-use of "with" by using more appropriate prepositions.
2022-04-03 21:10:16 -07:00
Rohan Kumar
73215343ca
Remove obsolete longdesc 2022-04-03 20:53:13 -07:00
Rohan Kumar
b1e7b65e02
Re-organize and clarify some things
- 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
2022-04-03 19:34:45 -07:00
Rohan Kumar
e5b0963d4f
Typos 2022-04-03 19:18:33 -07:00
Rohan Kumar
05a71fec3d
More accessible article layout
- Make sure that headings don't have the same name as any links, to
  avoid creating links with similar names but different purposes
- Remove useless <aside> elements that wrap landmarks.
- Move TOC down a bit, after the intro.
2022-04-03 16:03:22 -07:00
Rohan Kumar
cef17cef0f
Expand image optimization section
- Elaborate on each image optimization tool
- Mention using GNU Parallel or squoosh.app
- Describe libavif with libaom+butteraugli and the YUV400 color space
- Why you should avoid srcsets based on viewport or display properties
- Fix code snippet for <picture> sample

Threw in some formatting and very minor phrasing fixes.
2022-04-03 13:48:34 -07:00
Rohan Kumar
ec80c3b000
Reflect this site's CSS improvements
See parent commit 60bf9110b9
Link: 60bf9110b9
2022-04-03 23:55:04 -07:00
Rohan Kumar
85523c90e5
Add info to color contrast and img optim
- Elaborate on how contrast needs to be maintained under different
  conditions like different screens, gamma adjustments, and color
  blindnesses
- Add my skepticism about progressive decoding.
2022-04-02 17:46:35 -07:00
Rohan Kumar
1ecf099145
Elaborate on motivation in intro 2022-04-01 18:59:21 -07:00
Rohan Kumar
cd009197a9
Elaborate on speculative preloading with note on analytics 2022-03-31 18:42:50 -07:00
Rohan Kumar
9fbf3f5138
Mention BBR congestion, streamline quotation citations. 2022-03-31 18:42:13 -07:00
Rohan Kumar
6bb659b2cf
Add TCP-aware opim, reorg
Describe round-trip aware optimization

Move some sections around to flow better.
2022-03-31 18:34:53 -07:00
Rohan Kumar
eb8bb710fc
Layout-shift-avoidance, mention zoom and size-adjustment.
- Describe how to calculate intrinsic side to avoid layout-shifts caused
  by CSS Containment
- Mention use of relative font sizes.
- Replace incorrect use of the word "inline" when describing images.
2022-03-31 18:09:40 -07:00
Rohan Kumar
a5b8b5acc9
Introduce css containment for deferring rendering
As alternative to lazy loading.
2022-03-31 17:48:58 -07:00
Rohan Kumar
c21a21ea99
Add acknowledgements, note on justified text
- Say justified alignment is bad
- Add acknowledgements to the further-reading section
- Formatting in intro
2022-03-30 22:12:16 -07:00
Rohan Kumar
4d0851969e
Fix some invalid HTML 2022-03-30 21:02:39 -07:00
Rohan Kumar
5a4510765c
Elaborate on dark themes, cite WAI, cleanup
- Cite WAI more
- Mention merit of dark image variants
- Fix shitty ARIA
- use a <dl> list in one place.
- Describe use of `prefers-contrast: less`
- Narrow screen fixes.
2022-03-30 17:47:13 -07:00
Rohan Kumar
cd622cc85c
Clean up introduction and some phrasing.
- 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
2022-03-29 19:43:07 -07:00
Rohan Kumar
43a4a6bb1a
Clarify some details about figures, other deets
- Mention that captions can be repositioned relative to figure content
- Edit my captions in light of that fact
- Add unformatted/plain-text agents to "future work"
- Lowercase a heading
2022-03-29 18:29:07 -07:00
Rohan Kumar
689b6bcc3a
New "Beyond alt-text" section, short viewports
Describe how to best include images and figures in a way that flows well
and is accessible to both sighted and non-sighted users.

Describe how sticky elements can be a usability hazard on short
viewports

- Add changefreq
- Clean up structured data for quotations
- Add more sample unorthodox tests

TODO: dark image variant of image in new "Beyond alt-text" section
2022-03-29 18:26:22 -07:00
Rohan Kumar
3a639537b3
Info about csp, halation
- Mention pitfalls of a <meta>-based CSP
- Describe halation a bit more, with an image.
2022-03-28 18:11:55 -07:00
Rohan Kumar
741dc6ed81
Add some info from Fedi and elsewhere
Fediverse users gave good feedback, and I found other info elsewhere.

- Avoid the system-ui font
- Re-clarify article scope (textual websites)
- Mention dynamic content injection
- Describe saving pages offline
- Mention pictures of text versus narrow viewports
- Remove unnecessary info on why i removed margins from figures
- Mention indentation in preformatted code
- Describe appropriate size ranges for inlining images.
- Mention possibility of reporting issues in reading mode section
- Add info on screen readers changing kb nav to "future updates"
- Add info on special keyboard-driven browsers to "future updates"
- Describe best-practices for alt-text, figcaptions, and briefly
  mention transcripts.
- Add a conclusion

Also fix anchors for headings containing HTML entities and some minor
fixes throughout.
2022-03-28 14:56:42 -07:00
Rohan Kumar
cd730698c8
s/most/half/ 2022-03-27 21:04:53 -07:00
Rohan Kumar
312ff228db
Mention and accomodate dyscalculia 2022-03-27 17:32:52 -07:00
Rohan Kumar
d2757f99c5
Details for anti-pagination and Tor a11y
- Pagination hurts searchability
- Tor users can't change media queries, so make the site accessible by
  default.
2022-03-27 17:30:21 -07:00
Rohan Kumar
ccce5c94a9
Inline nav links in print media 2022-03-27 17:24:07 -07:00
Rohan Kumar
6b67668291
Mention inclusive design, tap targets 2022-03-27 17:24:05 -07:00
Rohan Kumar
b0d3189c84
Improve printer-friendliness
Make max line widths only apply to the "screen" media type.
2022-03-27 17:21:13 -07:00
Rohan Kumar
cb0e8a4be9
Mention some suggestions from Fedi
Future updates: add braille displays & clear lang.
Testing: mention zoom levels and caret navigation.
2022-03-27 17:19:13 -07:00
Rohan Kumar
6048e66d1b
Add info on line length
Introduce a bit more nuance into the WCAG's requirements.
2022-03-27 11:18:25 -07:00
Rohan Kumar
3df423336c
Balance indentation's problems against benefits
Describe how they help users with hand tremors avoid selecting
interactive elements.
2022-03-27 11:16:48 -07:00
Rohan Kumar
07a1b0fb06
Typo 2022-03-27 11:03:10 -07:00
Rohan Kumar
5e93b9d11a
More additions
- Mention calculation of font metrics
- Add related issues to lazy loading
- Justify importance of dark themes
- Trivial formatting tweak in a <pre> block
- Mention OCSP stapling, 0-RTT
- Spelling/grammar help machine translation
- Add more details to "future work" section
- Acknowledge Axess Lab
2022-03-26 16:44:57 -07:00
Rohan Kumar
6a42905002
Typos and fixes
- Hyperlink "h-card" on the Web version of the page
- Forgot to pluralize a word
- s/phrasing/non-phrasing/
2022-03-26 16:39:24 -07:00
Rohan Kumar
ceb19c9308
Re-org web best practices article
- Add a TOC
- Remove the flamebait bulleted list at the top
- Move link underlines section up by one
- Some formatting
2022-03-26 16:35:19 -07:00
Rohan Kumar
422369ea4f
Fix escaped tags in <pre>, remove redundancy 2022-03-26 12:31:51 -07:00
Rohan Kumar
53f4aedf45
info for sec-tests, switch-access, keybot. 2022-03-26 12:31:48 -07:00
Rohan Kumar
a1a33e14ea
Add machine translation notes, proofread 2022-03-25 17:44:10 -07:00
Rohan Kumar
6b402b6ec1
Another typo, formatting 2022-03-20 16:25:46 -07:00
Rohan Kumar
7d3ca83479
Typo 2022-03-20 16:24:14 -07:00
Rohan Kumar
4607ec2d95
Better example of bad custom colors
Add a better screenshot showcasing bad custom colors. Also give it a
figcaption.

The figcaption meant that I had to revise a statement later down when I
said I don't use figcaptions for images.
2022-03-20 16:09:01 -07:00
Rohan Kumar
013d382f27
Mention "skip links" 2022-03-19 13:40:08 -07:00
Rohan Kumar
1524b40c4a
Mention compatible SVG implementations 2022-03-17 23:37:22 -07:00
Rohan Kumar
fdfd53c3e5
Typo 2022-03-17 23:35:04 -07:00
Rohan Kumar
648771480e
Describe SVG optimization, rephrasings 2022-03-17 23:34:59 -07:00
Rohan Kumar
9098dd5d9a
Describe dark image variants and optimized loading 2022-03-17 23:31:31 -07:00
Rohan Kumar
208b0fe43e
Add info on non-browsers and TLS terminators 2022-03-16 17:09:21 -07:00
Rohan Kumar
cd124986ab
Add recommendations for narrow viewports
These recommendations also included stuff for <figure> elements; in the
spirit of dogfooding, I used some <figure> elements where appropriate
elsewhere in the page.
2022-03-16 17:08:43 -07:00
Rohan Kumar
4d8daf5aa5
Add nonbreaking spaces before version numbers
"WCAG 2.2" shouldn't be broken up; a new line shouldn't start with
"2.2". "WCAG 2.2" should be treated as one word.
2022-03-16 17:00:43 -07:00
Rohan Kumar
66833dc93e
Improve narrow screen compat
- Replace long <code> snippets
- Add some soft hyphens.
- Make one image of text look better on a narrow viewport.
2022-03-16 16:52:03 -07:00
Rohan Kumar
988d278b14
Formatting, info on contrast+halation, Tor notes
- Describe how contrast overkill in dark mode can cause halation
- Add more info on compatibility with the Tor browser
- Mention the rationale for a custom image border color
- More accurately note how in addition to fontconfig mappings, I also
  set my browser preferred font to "sans-serif".
- Clarify that underlines help identify both the beginnings and ends of
  hyperlinks.
- Formatting/phrasing fixes, esp in Gemtext.
2022-03-16 16:49:03 -07:00
Rohan Kumar
5575e2149d
Clarify use of WCAG, update sample CSP 2022-03-16 16:42:31 -07:00
Rohan Kumar
12a6c098f7
Add a11y justifications with citations
Cite the WCAG's supplementary techniques as justification for some
recommendations.
2022-03-16 16:40:04 -07:00
Rohan Kumar
857fc53679
Add info on TLS and a11y
- Recommend reading the WCAG and supplementary information on WCAG
  techniques
- Recommend against broken TLS ciphers.
2022-03-15 17:23:57 -07:00
Rohan Kumar
0aefb5d083
Add info on lazy-loading, rephrasings. 2022-03-14 13:50:01 -07:00
Rohan Kumar
86b4012ec0
Mention Brutalist Web Design 2022-03-04 13:55:35 -08:00
Rohan Kumar
03e45ae848
Mention visited link color 2022-02-28 02:30:48 -08:00
Rohan Kumar
892c27516a
Link to WCAG 2.2 instead of 2.0 2022-02-26 01:54:26 -08:00
Rohan Kumar
4ca5fed1e9
Better citations 2022-02-26 01:05:44 -08:00
Rohan Kumar
29ae0f3115
Web practices: link underlines are good. 2022-02-24 23:00:49 -08:00
Rohan Kumar
c203c7f099
Remove avatars from body text
I decided I don't like them
2022-02-22 22:17:13 -08:00
Rohan Kumar
c03af0eacc
Use new "indieweb-person" shortcode
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.
2022-02-19 12:48:53 -08:00
Rohan Kumar
65ad38d559
Fix broken links/anchors 2022-02-07 21:26:03 -08:00
Rohan Kumar
0d2d25b124
Fix: use HTTPS links where possible 2021-08-16 17:48:36 -07:00
Rohan Kumar
1e313cfdc9
Add footer heading 2021-08-05 00:42:59 -07:00
Rohan Kumar
f6413346af
Web best practices: add "security" section
Add information on restricting site functionality.

Add some details on accomodating Tor users.
2021-07-31 17:36:18 -07:00
Rohan Kumar
02dc7822ec
Web best practices: dark themes: Mention OLEDs
OLED displays use less energy when displaying darker colors.
2021-07-06 09:21:47 -07:00
Rohan Kumar
7ccf84f031
Web best practices: async decode + fingerprinting
- Mention image async decoding
- Describe how width-selector use can enable JS-free viewport
  fingerprinting
2021-07-02 20:37:24 -07:00
Rohan Kumar
da87f981a2
Web best practices: link to two other places
Link to the XHTML Club and an article by Bill Dietrich.
2021-06-27 17:37:29 -07:00
Rohan Kumar
aae653056d
Web best practices: link to ECT 2021-06-27 17:02:45 -07:00
Rohan Kumar
5511b354c4
Web best practices: mention Tor users
Simple sites should work well with the Tor Browser.
2021-06-27 15:26:01 -07:00
Rohan Kumar
99e402f133
Clean up some relative urls again 2021-06-16 12:18:01 -07:00
Rohan Kumar
8607612e0a
Add recommendations for dark themes 2021-06-13 18:28:15 -07:00
Rohan Kumar
58b64c9a95
Mention ELinks, Netrik
They're not very actively maintained, but they're still good for
testing.
2021-03-15 11:19:50 -07:00
Rohan Kumar
5ea5ee72cb
Update some article tags 2021-03-10 12:51:44 -08:00
Rohan Kumar
2030e221d7
Add more details about image compression
- Include a sample command
- Describe my approach to deciding on the level of compression/cropping
2021-02-28 13:33:24 -08:00
Rohan Kumar
7efe60a6bc
Stylistic fixes (minor)
Nothing new, just re-phrasing and capitalization.
2021-02-28 12:52:48 -08:00
Rohan Kumar
fe12f0dc32
Add link to avifenc 2021-02-28 12:40:26 -08:00
Rohan Kumar
13db509ea3
Add idea for website testing: site translation 2021-02-28 12:34:59 -08:00
Rohan Kumar
36a95f894a
Update preferred approach to image processing
- Include AVIF
- Include dark/light variants if applicable
2021-01-28 13:10:40 -08:00
Rohan Kumar
790f7f70ef
Article update: mention brotli
Brotli support is more prevalent than zstd
2021-01-28 12:20:23 -08:00
Rohan Kumar
a078d6a9ee
Reformat markdown with mdfmt 2021-01-24 14:42:40 -08:00
Rohan Kumar
f8113605c2
Shorten alt-text to recommended <100 char limit 2021-01-20 15:47:27 -08:00
Rohan Kumar
2083f1aed5
Article update: include advice on avatar image
Include info on using an avatar image/profile photo without
significantly increasing the footprint of a website, by re-using the
favicon image.
2020-12-29 22:34:35 -08:00
Rohan Kumar
8c63605d1a
Add 10 KB Club to web best practices article 2020-12-28 15:33:18 -08:00
Rohan Kumar
8fdee5d244
Include layout in web best practices
Article update: decribe good layout in the website best practices
article.
2020-12-21 16:41:46 -08:00
Rohan Kumar
6331840d95
Fix bad link
Sourcehut updated its per-object log URLs
2020-12-20 12:57:59 -08:00
Rohan Kumar
b9e4be50f5
Metadata: description + cache-bust manifest icons
- Add a cache-busting fingerprint to all the icons in the webmanifest
- Add a <meta> and open graph tag for a description.
- Include a 512px icon in the manifest
2020-12-19 17:50:55 -08:00
Rohan Kumar
ac0ced6aac
Article fix: put <body> in backticks
<body> was getting interpreted as an HTML tag instead of text.
2020-12-18 18:42:03 -08:00
Rohan Kumar
5e77a0d7f3
Use a smaller image in an article 2020-12-18 18:33:13 -08:00
rohan kumar
3368f8fea9
Update web best practices article: add testing
- Add information about testing edge cases
- Re-word some long sentences
2020-12-16 18:53:24 -08:00
rohan kumar
d45926c0f4
CLS: Declare original image dimensions in HTML
Reduce Cumulative Layout Shift (CLS) by declaring original image
dimensions in HTML before re-scaling with CSS. This tells browsers the
image's aspect ratio before the image and the stylesheet load, allowing
browsers to block out space accordingly to avoid making elements "jump"
during loading.

More info: https://web.dev/optimize-cls/
2020-12-15 23:09:45 -08:00
rohan kumar
bab75dcebc
Clarify HTTP Observatory scores 2020-11-30 12:09:22 -08:00
rohan kumar
4907336d96
Add bit about alt-text, clarify page size 2020-11-30 12:04:21 -08:00
rohan kumar
46512c9046
Update with feedback on page size
Added the Web Bloat Size Calculator and a snippet on how people on
trains experience a connection speed drops.

Thanks, u/Snapstromegon from Reddit!
2020-11-27 10:25:03 -08:00
rohan kumar
8e38c66243
Add pngquant to image compression section
Thanks, arnt and vbernat!
2020-11-25 21:58:37 -08:00
rohan kumar
1ba46835be
Clarification on HTTP/2
Thanks, reezer!
2020-11-25 16:36:40 -08:00
rohan kumar
b9207d17ea
Add max line length to web best practices article
Thanks, u/_listless
2020-11-24 15:32:38 -08:00
rohan kumar
103a860528
Link to article changelog 2020-11-24 14:24:12 -08:00
rohan kumar
d24cdfb423
Link to MDN docs on CSS @media queries 2020-11-24 14:19:20 -08:00
rohan kumar
a1f517c61a
Clarify that branding isn't evil 2020-11-24 10:58:05 -08:00
rohan kumar
2d43a0ddc4
Clarify a snippet on overriding stylesheets
We shouldn't require users to override stylesheets, but we should expect
it.
2020-11-24 10:53:22 -08:00
rohan kumar
8f47970379
More info about fingerprinting via fonts 2020-11-24 04:54:13 -08:00
rohan kumar
f1a56e9ec4
Explain why global stylesheet overrides are bad 2020-11-24 03:50:06 -08:00
rohan kumar
79b91972e7
Add more info on image optimization 2020-11-24 03:18:03 -08:00
rohan kumar
7ec5eab8eb
Clarify the controversial statement on font choice
The lobste.rs discussion at
https://lobste.rs/s/akcw1m/opinionated_list_best_practices_for
generated a lot of feedback about fonts, so I thought I'd explain a bit
more.
2020-11-24 02:43:59 -08:00
rohan kumar
2cd686a4fb
Add gzip + http2 to website best practices 2020-11-24 02:27:17 -08:00
rohan kumar
6f937ac5a8
Clarify the point of using HTML->md convertors
Thanks to some IRC users for pointing out how the rationale wasn't very
obvious
2020-11-24 01:59:22 -08:00
rohan kumar
e538b0df8e
Fix: s/white-on-black/black-on-white/ 2020-11-23 22:56:18 -08:00
rohan kumar
839e6d5737
Update website best practices with color info
Thanks to a couple IRC users for the feedback.
2020-11-23 19:00:31 -08:00
rohan kumar
18ff772d5f
New article: best practices for minimalistic websites 2020-11-23 15:51:57 -08:00