inherentlee/leecat.art
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove target=blank etc

Browse Source
This commit is contained in:
inherentlee committed 2026-09-12 10:48:36 -07:00
1 parent c517bb8d69
commit 07bb31111f
80 files changed
+389 -366
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/posts/2026/2026-01-05-orion-handspun.md
+1 -1
View File
@@ -8,4 +8,4 @@ tags:
- yarn
---
Fiber: Merino/silk 70/30 from [Jakira Farms](https://www.etsy.com/shop/JakiraFarms){target="_blank" rel="external"} in colorway Orion
Fiber: Merino/silk 70/30 from [Jakira Farms](https://www.etsy.com/shop/JakiraFarms) in colorway Orion
src/posts/2026/2026-01-07-intro-to-git.md
+14 -14
View File
@@ -64,14 +64,14 @@ have you ever tried to revert to a previous version of a document in MS Office o
or, more uniquely and/or uncommonly:
- you've been using Google's named versions, but you're [out of named versions (you can have 40 per doc, or 15 per spreadsheet)](https://support.google.com/docs/answer/190843#zippy=%2Ccreate-a-named-version){target="_blank" rel="external"}, so you'll have to start going back and deleting named versions, and isn't that just a pain?
- you're using MS Office, but [your file isn't in OneDrive, so there's no version history at all](https://support.microsoft.com/en-us/office/view-previous-versions-of-office-files-5c1e076f-a9c9-41b8-8ace-f77b9642e2c2){target="_blank" rel="external"}? Or maybe it *is* in OneDrive, but you were offline, so too many changes got jumbled into one big edit when you next went online?
- you've been using Google's named versions, but you're [out of named versions (you can have 40 per doc, or 15 per spreadsheet)](https://support.google.com/docs/answer/190843#zippy=%2Ccreate-a-named-version), so you'll have to start going back and deleting named versions, and isn't that just a pain?
- you're using MS Office, but [your file isn't in OneDrive, so there's no version history at all](https://support.microsoft.com/en-us/office/view-previous-versions-of-office-files-5c1e076f-a9c9-41b8-8ace-f77b9642e2c2)? Or maybe it *is* in OneDrive, but you were offline, so too many changes got jumbled into one big edit when you next went online?
or, websites. Maybe you're building something in Squarespace and find out that [in current versions of Squarespace, it doesn't support version history.](https://forum.squarespace.com/topic/239030-roll-site-back-to-previous-version-changes/){target="_blank" rel="external"}.
or, websites. Maybe you're building something in Squarespace and find out that [in current versions of Squarespace, it doesn't support version history.](https://forum.squarespace.com/topic/239030-roll-site-back-to-previous-version-changes/).
## problem statement
I started writing this to help a friend. She's getting started with a website, and we're using the static site generator [11ty](https://www.11ty.dev/){target="_blank" rel="external"} as she wants to have a lot of easy-to-write posts. She needs a single-user workflow that allows her to publish her website without hosting it herself, and that's the use case where this was born.
I started writing this to help a friend. She's getting started with a website, and we're using the static site generator [11ty](https://www.11ty.dev/) as she wants to have a lot of easy-to-write posts. She needs a single-user workflow that allows her to publish her website without hosting it herself, and that's the use case where this was born.
this walkthrough is best suited for people who want to use `git` in single-person projects, or perhaps with one or two other close collaborators. There's quite a few topics it doesn't cover that are vitally important in large collaborative projects, such as **branching** and **merging**.
@@ -91,8 +91,8 @@ that all said, let's get (git?) into it!
many, many tools interact with `git`:
- a lot of modern text editors have graphical user interfaces (GUIs) that let you perform `git` operations, like [VSCode](https://code.visualstudio.com/docs/sourcecontrol/overview){target="_blank" rel="external"}, [Zed](https://zed.dev/docs/git){:target="_blank"}, or [Sublime Text](https://www.sublimetext.com/docs/git_integration.html){:target="_blank"}
- there are [standalone `git` GUIs](https://git-scm.com/tools/guis){target="_blank" rel="external"}
- a lot of modern text editors have graphical user interfaces (GUIs) that let you perform `git` operations, like [VSCode](https://code.visualstudio.com/docs/sourcecontrol/overview), [Zed](https://zed.dev/docs/git), or [Sublime Text](https://www.sublimetext.com/docs/git_integration.html)
- there are [standalone `git` GUIs](https://git-scm.com/tools/guis)
- and many `git` users use the `git` command line interface (CLI), which is fully text-based
today we're going to talk about the `git` CLI... technically. But **don't let that scare you** - we'll talk about *concepts* and *actions* that can be applied to other `git` interfaces as well.
@@ -108,9 +108,9 @@ if you want to use the `git` CLI, you'll need a terminal. You've got a couple op
- on Linux or Mac, you should have one built in! This is the easy path, congrats :) Even better, `git` generally ships with these systems, so there's no installation required. Search for an application called 'Terminal' or similar
- note that I don't have a Mac and have never used one. I can't guarantee that everything operates the same over there - there may be discrepancies I don't know about
- on Windows, there's two options
- [`git` for Windows](https://gitforwindows.org/){target="_blank" rel="external"} packages a Linux-like terminal with a `git` GUI. This may be slightly friendlier for people who aren't at all familiar with Linux. If choosing `git` for Windows, [see my installation instructions below](#git-for-windows)
- I use [Windows Subsystem for Linux, or WSL](https://learn.microsoft.com/en-us/windows/wsl/install){target="_blank" rel="external"}, which gives you a Linux distribution within Windows. It's pretty smooth sailing at this point, but there's some idiosyncracies to conquer - like the fact that your *Windows* files and your *Linux* files are stored in different places. If choosing WSL, [see my usage notes below](#wsl)
- both of the Windows options listed work with [Windows Terminal](https://apps.microsoft.com/detail/9n0dx20hk701){target="_blank" rel="external"} which offers a nicer-looking terminal experience than the basic command prompt. If you're going to keep working with what you set up today, I recommend it!
- [`git` for Windows](https://gitforwindows.org/) packages a Linux-like terminal with a `git` GUI. This may be slightly friendlier for people who aren't at all familiar with Linux. If choosing `git` for Windows, [see my installation instructions below](#git-for-windows)
- I use [Windows Subsystem for Linux, or WSL](https://learn.microsoft.com/en-us/windows/wsl/install), which gives you a Linux distribution within Windows. It's pretty smooth sailing at this point, but there's some idiosyncracies to conquer - like the fact that your *Windows* files and your *Linux* files are stored in different places. If choosing WSL, [see my usage notes below](#wsl)
- both of the Windows options listed work with [Windows Terminal](https://apps.microsoft.com/detail/9n0dx20hk701) which offers a nicer-looking terminal experience than the basic command prompt. If you're going to keep working with what you set up today, I recommend it!
#### `git` for Windows
@@ -135,7 +135,7 @@ while *installing* WSL is a single command, here's a couple notes about getting
you'll also need to be careful of a few things regarding text editors to make them work with WSL:
1. if you install VSCode, you'll need to add the [remote development extension pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack){target="_blank" rel="external"}
1. if you install VSCode, you'll need to add the [remote development extension pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
1. if you install Zed, you'll need to check "Add to PATH (requires shell restart)" in the installer, then restart your terminal as noted
- there's a single setting in Zed to disable all AI settings: **Settings > AI > General > Disable AI**
1. I don't recommend installing Sublime Text if using WSL, because summoning it from within WSL is a little more complicated than either of the two above, and I found when I [reviewed editors](/comparing-text-editors) that it struggled with some file operations in WSL
@@ -163,7 +163,7 @@ there's usually a terminal command for the editor. For VSCode, it's `code`; for
## `git version`
let's check that you have git installed with `git version`. You might see something like `git version 2.34.1` printed out in response. If you don't get a version number, but instead get an error saying you don't have `git`, [install `git`](https://git-scm.com/install){target="_blank" rel="external"}.
let's check that you have git installed with `git version`. You might see something like `git version 2.34.1` printed out in response. If you don't get a version number, but instead get an error saying you don't have `git`, [install `git`](https://git-scm.com/install).
### a few handy settings
@@ -397,7 +397,7 @@ remember how I said we could use `git clone` to work on an existing project? If
the world of git servers is vast - hell, you can run your own! - but we're going to just mention a few major hosts: GitHub, GitLab, and Codeberg. For this walkthrough, we're going to work with Codeberg, but you'll find that the UI is pretty similar across all three, so if you've got a GitHub or GitLab account feel free to use that.
let's head on over to [Codeberg](https://codeberg.org/){target="_blank" rel="external"} First off, we'll make an account.
let's head on over to [Codeberg](https://codeberg.org/) First off, we'll make an account.
now we'll make a new project using the `+` in the upper right. Choose 'New repository,' then pick a repository name. You can leave the other settings be.
@@ -434,7 +434,7 @@ cool! we have a remote set up. What does "fetch" and "push" mean?
this may seem unhelpful if we're thinking about this project as something only we work on, but imagine there's a team of people all contributing to the project. What if we *and* another person both work on the same file? Our changes might overlap!
if we're working alone and *from one machine*, we'll pretty much never have to use `git fetch` or `git pull`! If we happen to do our work on multiple machines - for example, I do some work on my PC and some on my fruitpad (using an app called [Working Copy](https://workingcopy.app/){target="_blank" rel="external"}) - we'll probably update the remote from one machine, then need to pull that work down onto the other machine.
if we're working alone and *from one machine*, we'll pretty much never have to use `git fetch` or `git pull`! If we happen to do our work on multiple machines - for example, I do some work on my PC and some on my fruitpad (using an app called [Working Copy](https://workingcopy.app/)) - we'll probably update the remote from one machine, then need to pull that work down onto the other machine.
for our use case, we can pretty safely stick to `git pull` (if we ever even need to use it!), but if you're working in a larger collaborative project, `git fetch` is your friend!
@@ -531,7 +531,7 @@ git remote set-url codeberg <new-url>
we'll notice that the SSH URL starts with `git@`, whereas the HTTPS URL started with `https://`.
in order for all this to be useful, we need to tell Codeberg about our SSH key. In Codeberg, navigate to [settings, then find the left-hand tab for SSH keys](https://codeberg.org/user/settings/keys){target="_blank" rel="external"}. Choose 'Add key' and paste in the **public** key (if you set up that `sshcat` alias, use it now to output your key for ease of copying). Save and we'll now be set up to authenticate with SSH!
in order for all this to be useful, we need to tell Codeberg about our SSH key. In Codeberg, navigate to [settings, then find the left-hand tab for SSH keys](https://codeberg.org/user/settings/keys). Choose 'Add key' and paste in the **public** key (if you set up that `sshcat` alias, use it now to output your key for ease of copying). Save and we'll now be set up to authenticate with SSH!
### `git push`, take two
src/posts/2026/2026-01-08-comparing-text-editors.md
+12 -12
View File
@@ -16,12 +16,12 @@ I'm fucking depressed. No, not like mental health depressed (okay, look, that to
the editors I reviewed, in no particular order, are:
- [VSCode](https://code.visualstudio.com/){target="_blank" rel="external"} (my current daily driver which I've been wanting to leave behind for a while now)
- [Zed](https://zed.dev/){target="_blank" rel="external"} (an editor I've been tentatively interested in)
- [Kate](https://kate-editor.org/){target="_blank" rel="external"} (recommended to me semi-recently on the fediverse, but one I quickly wrote off at the time because of clunkiness)
- [Lapce](https://lap.dev/lapce/){target="_blank" rel="external"} (recommended via fedi)
- [Pulsar](https://pulsar-edit.dev/){target="_blank" rel="external"} (a fork of the discontinued Atom editor, recommended again by fedi, in the course of this review)
- and finally, [Sublime Text](https://www.sublimetext.com/){target="_blank" rel="external"} (my daily driver back in college)
- [VSCode](https://code.visualstudio.com/) (my current daily driver which I've been wanting to leave behind for a while now)
- [Zed](https://zed.dev/) (an editor I've been tentatively interested in)
- [Kate](https://kate-editor.org/) (recommended to me semi-recently on the fediverse, but one I quickly wrote off at the time because of clunkiness)
- [Lapce](https://lap.dev/lapce/) (recommended via fedi)
- [Pulsar](https://pulsar-edit.dev/) (a fork of the discontinued Atom editor, recommended again by fedi, in the course of this review)
- and finally, [Sublime Text](https://www.sublimetext.com/) (my daily driver back in college)
## the qualities
@@ -60,7 +60,7 @@ and finally, 3 **ethical and trustworthiness** qualities:
| Pulsar | no | **yes** | no[3] | **yes** | **yes** |
| Sublime Text | **yes** | **yes** | no[3][4] | **yes** | no[5] |
[1] extension needed: [VSCode `.editorconfig`](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig){target="_blank" rel="external"}, [VSCode WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack){:target="_blank"}, [Zed `.editorconfig`](https://zed.dev/extensions/editorconfig){:target="_blank"}
[1] extension needed: [VSCode `.editorconfig`](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig), [VSCode WSL](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack), [Zed `.editorconfig`](https://zed.dev/extensions/editorconfig)
[2] I could open a WSL directory in Kate, but couldn't see any files. I confirmed that opening a Windows directory worked as expected.
@@ -68,7 +68,7 @@ and finally, 3 **ethical and trustworthiness** qualities:
[4] saving a new file opens the save menu in the Windows File Explorer, which frankly makes me a bit afraid. Touching your WSL files from Windows is generally a bad idea.
[5] I explored two different add-on packages for Markdown preview support. [Markdown Live Preview](https://packagecontrol.io/packages/MarkdownLivePreview){target="_blank" rel="external"} and [MarkdownPreview](https://packagecontrol.io/packages/MarkdownPreview){:target="_blank"}. Markdown Live Preview opened a whole new window scoped only to the specific `.md` file. MarkdownPreview previewed in browser. Neither of these match the behavior I am looking for.
[5] I explored two different add-on packages for Markdown preview support. [Markdown Live Preview](https://packagecontrol.io/packages/MarkdownLivePreview) and [MarkdownPreview](https://packagecontrol.io/packages/MarkdownPreview). Markdown Live Preview opened a whole new window scoped only to the specific `.md` file. MarkdownPreview previewed in browser. Neither of these match the behavior I am looking for.
### aesthetic qualities
@@ -100,11 +100,11 @@ this is my best guess based on searching online and reviewing the settings; it's
| Pulsar | **yes** | n/a | **yes**[3] |
| Sublime Text | **yes** | n/a | unknown[4] |
[1] [prompts directory](https://github.com/microsoft/vscode/tree/main/.github/prompts){target="_blank" rel="external"}
[1] [prompts directory](https://github.com/microsoft/vscode/tree/main/.github/prompts)
[2] looks like at current LLMs are only used for [documentation](https://github.com/zed-industries/zed/tree/main/.factory/prompts){target="_blank" rel="external"}
[2] looks like at current LLMs are only used for [documentation](https://github.com/zed-industries/zed/tree/main/.factory/prompts)
[3] it's been discussed and sounds currently up for debate: [Pulsar](https://github.com/pulsar-edit/pulsar/issues/792){target="_blank" rel="external"}, [Sublime Text](https://forum.sublimetext.com/t/implement-ai-into-sublime-text/68411){:target="_blank"}
[3] it's been discussed and sounds currently up for debate: [Pulsar](https://github.com/pulsar-edit/pulsar/issues/792), [Sublime Text](https://forum.sublimetext.com/t/implement-ai-into-sublime-text/68411)
[4] I couldn't find the source code for Sublime Text online; I assume it's not OSS. If you know where it is, point me in that direction.
@@ -123,4 +123,4 @@ at the end of the day, I might just have to keep looking... but regardless, I wa
### WSL2 and Linux GUIs
I learned that [WSL2 can support GUI apps](https://learn.microsoft.com/en-us/windows/wsl/tutorials/gui-apps){target="_blank" rel="external"} so I tried this for a few. Pulsar did not work; Sublime Text worked but the UI scale was *teensy* and was not affected by the `ui_scale` setting.
I learned that [WSL2 can support GUI apps](https://learn.microsoft.com/en-us/windows/wsl/tutorials/gui-apps) so I tried this for a few. Pulsar did not work; Sublime Text worked but the UI scale was *teensy* and was not affected by the `ui_scale` setting.
src/posts/2026/2026-01-11-spinning-plants.md
+1 -1
View File
@@ -20,7 +20,7 @@ in picture, from top:
1. rose
1. ramie
notes on handspinning various plant fibers. Fibers were purchased as a [sample pack from Hearthside Fibers](https://www.etsy.com/listing/1141552359/plant-based-fiber-top-sampler-pack-vegan){target="_blank" rel="external"}. Unfortunately, I spun the first sample - flax - in 2023, so don't have thoughts on that left in my head. I also received a mystery sample along with the 12 named samples that *may* have been lotus - it's the smallest skein in the image. The lotus was also spun in 2023.
notes on handspinning various plant fibers. Fibers were purchased as a [sample pack from Hearthside Fibers](https://www.etsy.com/listing/1141552359/plant-based-fiber-top-sampler-pack-vegan). Unfortunately, I spun the first sample - flax - in 2023, so don't have thoughts on that left in my head. I also received a mystery sample along with the 12 named samples that *may* have been lotus - it's the smallest skein in the image. The lotus was also spun in 2023.
- overall, these are broadly more slippery than wool
- most if not all of these benefitted from pre-drafting moreso than I usually do for wool
src/posts/2026/2026-01-18-bfl-silk-handspun.md
+1 -1
View File
@@ -8,4 +8,4 @@ tags:
- yarn
---
Fiber from [Woolgatherings](https://woolgatherings.com){target="_blank" rel="external"}. 70% Blue-Faced Leicester 30% tussah silk.
Fiber from [Woolgatherings](https://woolgatherings.com). 70% Blue-Faced Leicester 30% tussah silk.
src/posts/2026/2026-01-18-coral-reef-handspun.md
+1 -1
View File
@@ -8,4 +8,4 @@ tags:
- yarn
---
Fiber from [Jakira Farms](https://www.etsy.com/shop/JakiraFarms){target="_blank" rel="external"} in Coral Reef colorway. 100% merino.
Fiber from [Jakira Farms](https://www.etsy.com/shop/JakiraFarms) in Coral Reef colorway. 100% merino.
src/posts/2026/2026-01-18-fire-ice-handspun.md
+1 -1
View File
@@ -8,4 +8,4 @@ tags:
- yarn
---
Fiber from [Jakira Farms](https://www.etsy.com/shop/JakiraFarms){target="_blank" rel="external"} in Fire & Ice colorway. 100% merino.
Fiber from [Jakira Farms](https://www.etsy.com/shop/JakiraFarms) in Fire & Ice colorway. 100% merino.
src/posts/2026/2026-01-18-rambouillet-handspun.md
+1 -1
View File
@@ -9,4 +9,4 @@ tags:
- highlight
---
Fiber from [Woolgatherings](https://woolgatherings.com){target="_blank" rel="external"}. 100% rambouillet. Hand-dyed!
Fiber from [Woolgatherings](https://woolgatherings.com). 100% rambouillet. Hand-dyed!
src/posts/2026/2026-01-18-spinners-dream-handspun.md
+1 -1
View File
@@ -8,4 +8,4 @@ tags:
- yarn
---
Fiber from [Paradise Fibers](https://paradisefibers.com){target="_blank" rel="external"}. 40% merino/20% alpaca/20% camel/20% mulberry silk. Scrumptiously soft.
Fiber from [Paradise Fibers](https://paradisefibers.com). 40% merino/20% alpaca/20% camel/20% mulberry silk. Scrumptiously soft.
src/posts/2026/2026-01-24-gold-handspun.md
+1 -1
View File
@@ -8,4 +8,4 @@ tags:
- yarn
---
Fiber from [Paradise Fibers](https://paradisefibers.com){target="_blank" rel="external"}. 70% merino/30% nylon. Hand-dyed by me.
Fiber from [Paradise Fibers](https://paradisefibers.com). 70% merino/30% nylon. Hand-dyed by me.
src/posts/2026/2026-02-06-screen-reader-optimizations.md
+1 -1
View File
@@ -10,7 +10,7 @@ tags:
## context
recently, I've been working on a [website for a project called spoonfairies](https://inherentlee.codeberg.page/spoonfairies/){target="_blank" rel="external"}. On the providers page, we list a series of names along with their pronouns, location, and services offered. Visually, it looks like this:
recently, I've been working on a [website for a project called spoonfairies](https://inherentlee.codeberg.page/spoonfairies/). On the providers page, we list a series of names along with their pronouns, location, and services offered. Visually, it looks like this:
![A provider listing from spoonfairies. On the top row of text, it shows the provider's name in large purple text, then their pronouns in slightly opaque white and slightly smaller font, then aligned on the right, a map pin emoji and their general location in standard size white text. On the second row of text, it lists a few services the provider offers, comma separated.](/img/2026/spoonfairies-provider.png)
src/posts/2026/2026-02-19-eleventy-lessons.md
+9 -9
View File
@@ -8,7 +8,7 @@ tags:
- software
---
recently I wrote *several* sites using [Eleventy](https://www.11ty.dev/){target="_blank" rel="external"} (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by [heckin.technology](https://heckin.technology/){target="_blank" rel="external"}. See ya, GitHub. Won't miss ya.
recently I wrote *several* sites using [Eleventy](https://www.11ty.dev/) (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by [heckin.technology](https://heckin.technology/). See ya, GitHub. Won't miss ya.
Originally, I compiled some of the things I've learned in a standalone site.
@@ -20,7 +20,7 @@ this will comprise of 4 parts: [related posts](#related-posts), [featured images
## related posts
by default, the [Eleventy base blog](github.com/11ty/eleventy-base-blog){target="_blank" rel="external"} comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.
by default, the [Eleventy base blog](github.com/11ty/eleventy-base-blog) comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.
while that is useful for *this* site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.
@@ -89,7 +89,7 @@ and that sorts related posts.
## featured images
images in 11ty use the [Image Transform Plugin](https://www.11ty.dev/docs/plugins/image/#eleventy-transform){target="_blank" rel="external"}. I found it hard to find anything to reference while building this - a lot of sites in the template gallery are either text-heavy or not using the plugin - so I'm reproducing what I've got here for reference.
images in 11ty use the [Image Transform Plugin](https://www.11ty.dev/docs/plugins/image/#eleventy-transform). I found it hard to find anything to reference while building this - a lot of sites in the template gallery are either text-heavy or not using the plugin - so I'm reproducing what I've got here for reference.
### file structure
@@ -192,7 +192,7 @@ together, that sets up featured images for posts.
### simple pagination
[Post pagination in Eleventy is pretty straightforward](https://www.11ty.dev/docs/pagination/){target="_blank" rel="external"}, mostly requiring some specific front matter.
[Post pagination in Eleventy is pretty straightforward](https://www.11ty.dev/docs/pagination/), mostly requiring some specific front matter.
The home page pagination I have set up here looks like the following (in `index.njk`):
@@ -208,7 +208,7 @@ pagination:
6 posts per page, paginate data from `collections.posts` which we'll call just `posts` for short, and do it in reverse (aka, most recent posts show first).
[You'll also likely want previous and next buttons](https://www.11ty.dev/docs/pagination/nav){target="_blank" rel="external"}. I did. Here's what I have...
[You'll also likely want previous and next buttons](https://www.11ty.dev/docs/pagination/nav). I did. Here's what I have...
#### pagination.njk
@@ -258,9 +258,9 @@ Yup. The order of previous vs. next is totally unintuitive to me, too.
### complex pagination
however, there's a catch. [Tag pages are *created* via pagination](https://www.11ty.dev/docs/quicktips/tag-pages/){target="_blank" rel="external"}! It's a lot harder to paginate those - you can't just use the front matter to set it up.
however, there's a catch. [Tag pages are *created* via pagination](https://www.11ty.dev/docs/quicktips/tag-pages/)! It's a lot harder to paginate those - you can't just use the front matter to set it up.
I untangled [this GitHub issue about double-layered pagination](https://github.com/11ty/eleventy/issues/332#issuecomment-445236776){target="_blank" rel="external"} and came to the following solution...
I untangled [this GitHub issue about double-layered pagination](https://github.com/11ty/eleventy/issues/332#issuecomment-445236776) and came to the following solution...
#### eleventy.config.js
@@ -329,7 +329,7 @@ eleventyExcludeFromCollections: true
```
{% endraw %}
note the pagination checking `tag.pageNumber` against `tag.PageSize` - the [original suggested solution](https://github.com/11ty/eleventy/issues/332#issuecomment-445236776){target="_blank" rel="external"} in the GitHub post creates an issue where the pagination loops through *all* of the tag pages bit-by-bit. This sorts that - hat tip to [TheReyzar who mentioned the issue and showed part of their solution](https://github.com/11ty/eleventy/issues/332#issuecomment-1248185406){target="_blank" rel="external"}.
note the pagination checking `tag.pageNumber` against `tag.PageSize` - the [original suggested solution](https://github.com/11ty/eleventy/issues/332#issuecomment-445236776) in the GitHub post creates an issue where the pagination loops through *all* of the tag pages bit-by-bit. This sorts that - hat tip to [TheReyzar who mentioned the issue and showed part of their solution](https://github.com/11ty/eleventy/issues/332#issuecomment-1248185406).
#### filters.js (again)
@@ -424,4 +424,4 @@ thankfully, the CSS property `aspect-ratio` makes this pretty straightforward, a
---
There's the good stuff from [11ty Lessons](https://inherentlee.codeberg.page/lessons/){target="_blank" rel="external"}. Hope you enjoyed.
There's the good stuff from [11ty Lessons](https://inherentlee.codeberg.page/lessons/). Hope you enjoyed.
src/posts/2026/2026-03-22-accessible-image-modals.md
+5 -5
View File
@@ -14,11 +14,11 @@ Recently I've been working on a single-page digital rendition of a zine complete
## the `dialog` element
do you know how many tutorials want you to roll your own modals? It's a not-insignificant amount. W3Schools, top of the search results in many cases, recommends it in two places - [image modals](https://www.w3schools.com/howto/howto_css_modal_images.asp){target="_blank" rel="external"} and [responsive image modals](https://www.w3schools.com/css/css3_images_modal.asp){target="_blank" rel="external"}. Several search results for "image modal" pop up div solutions - [div modal 1](https://stackoverflow.com/questions/75598914/how-to-display-an-image-clicking-on-it-using-modal-window-on-html-css-and-js){target="_blank" rel="external"}, [div modal 2](https://dev.to/salehmubashar/create-an-image-modal-with-javascript-2lf3){target="_blank" rel="external"}, [div modal 3](https://www.youtube.com/watch?v=Y9TNHynFjaQ){target="_blank" rel="external"}.
do you know how many tutorials want you to roll your own modals? It's a not-insignificant amount. W3Schools, top of the search results in many cases, recommends it in two places - [image modals](https://www.w3schools.com/howto/howto_css_modal_images.asp) and [responsive image modals](https://www.w3schools.com/css/css3_images_modal.asp). Several search results for "image modal" pop up div solutions - [div modal 1](https://stackoverflow.com/questions/75598914/how-to-display-an-image-clicking-on-it-using-modal-window-on-html-css-and-js), [div modal 2](https://dev.to/salehmubashar/create-an-image-modal-with-javascript-2lf3), [div modal 3](https://www.youtube.com/watch?v=Y9TNHynFjaQ).
If you don't know of the existence of `<dialog>`, a search for image modals will not get you there quickly.
If you search for *accessible* image modals, you'll still hear about `<div>`s. Hell, [W3C's ARIA Authoring Practices Guide uses a `<div>`](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/){target="_blank" rel="external"}. You kinda have to go digging to read about the [dialog element from Scott O'Hara](https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html){target="_blank" rel="external"} or find [AccessibleWeb.dev's piece on modals](https://accessibleweb.dev/modals){target="_blank" rel="external"}. Or you can go [straight for Adrian Roselli](https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html){target="_blank" rel="external"} and find examples that use the native `<dialog>` element. Thanks Adrian!
If you search for *accessible* image modals, you'll still hear about `<div>`s. Hell, [W3C's ARIA Authoring Practices Guide uses a `<div>`](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/). You kinda have to go digging to read about the [dialog element from Scott O'Hara](https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html) or find [AccessibleWeb.dev's piece on modals](https://accessibleweb.dev/modals). Or you can go [straight for Adrian Roselli](https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html) and find examples that use the native `<dialog>` element. Thanks Adrian!
Did I roll my own modal at first? Regretfully, yes. I'd used the `<dialog>` element before... several years ago... in a project I don't have access to anymore... Needless to say, I had forgotten about its existence.
@@ -38,7 +38,7 @@ so, what do we get from the `<dialog>` element that we don't get from a `<div>`
1. the `autofocus` attribute for in-modal elements to set which element should receive focus on opening the modal
1. the `open` attribute which is set on the `<dialog>` when open and removed when closed (when you use the functions mentioned previously)
and more. This is just the pieces in use for me. There's also things like [setting forms so that submission closes the dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes){target="_blank" rel="external"} (point 1 in that list).
and more. This is just the pieces in use for me. There's also things like [setting forms so that submission closes the dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes) (point 1 in that list).
### what doesn't it give us?
@@ -51,7 +51,7 @@ MDN warns:
> Do not add the `tabindex` property to the `<dialog>` element as it is not interactive and does not receive focus.
— [`<dialog>`: additional notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes){target="_blank" rel="external"} (point 3 in that list).
— [`<dialog>`: additional notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes) (point 3 in that list).
despite this, I found that in Firefox (but not Edge), the *`<dialog>` itself was focusable*. I have no idea why, but I tested this on a totally unstyled and unmodified page and still found it to be true. As a focusable element, it made no sense. It had no interactivity and could not be activated.
@@ -83,7 +83,7 @@ I also looped through all images and attached my `openDialog()` function to any
here's the most relevant parts of the CSS:
- `dialog::backdrop` was given a [relatively calculated](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors){target="_blank" rel="external"} color - `rgba(from var(--color-bg) r g b / .8)` - as well as a blur
- `dialog::backdrop` was given a [relatively calculated](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors) color - `rgba(from var(--color-bg) r g b / .8)` - as well as a blur
- `body:has(dialog[open])` has `overflow: hidden` set
- `dialog img` uses a `max-height` as well as `object-fit: contain`
src/posts/2026/2026-05-06-fedilearns.md
+1 -1
View File
@@ -7,4 +7,4 @@ tags:
- reference
---
My new project [FediLearns](https://fedilearns.fyi){target="_blank" rel="external"} is a learning-focused classifieds page for the fediverse. Check it out!
My new project [FediLearns](https://fedilearns.fyi) is a learning-focused classifieds page for the fediverse. Check it out!
src/posts/2026/2026-06-30-core-css.md
+5 -5
View File
@@ -9,13 +9,13 @@ tags:
- highlight
---
What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few [browser defaults](https://browserdefaultstyles.com/){target="_blank" rel="external"} for a more pleasant browsing experience without needing much if any visual testing.
What CSS would you implement if you had no or very low vision? Recently, a Blind friend wanted to know more about CSS. This is my attempt at a very minimal CSS file that cleans up a few [browser defaults](https://browserdefaultstyles.com/) for a more pleasant browsing experience without needing much if any visual testing.
Want to just see the final stylesheet? [Skip to the end of the page](#result).
## CSS resets
Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/){target="_blank" rel="external"}, which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.
Before we start: this isn't a CSS reset. You may want to apply it in concert with one. While writing this, a friend recommended [Josh W. Comeau's CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/), which looks largely very solid to me. However, if using that particular reset, I would ***not*** reset default margins (rule 2). They are tremendously useful in this case, where we are unlikely to be setting margins on elements individually.
## color
@@ -42,7 +42,7 @@ body {
To skip reading about accent colors, head right to [focus indication](#focus-indication).
If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. [XKCD has a color sheet based on a wide survey](https://xkcd.com/color/rgb/){target="_blank" rel="external"} that is potentially useful here. Validate that the color contrast is enough with a tool like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/){target="_blank" rel="external"}. You might color your headers and links.
If you have any opinions about color, you might pick accents. At the simplest level, I'd pick one for light mode and one for dark mode. [XKCD has a color sheet based on a wide survey](https://xkcd.com/color/rgb/) that is potentially useful here. Validate that the color contrast is enough with a tool like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/). You might color your headers and links.
If you're coloring links, it's worth considering browser defaults. Blue is unvisited, purple is visited, and red is inactive. Choosing a red or purple link color might confuse users. Blues are pretty safe. A green might be fun.
@@ -64,7 +64,7 @@ a {
## focus indication
Focus indication is a visual change that occurs when something interactive on the screen (like a link) receives keyboard focus. Without it, sighted keyboard-only users can't tell where they are on the page. Conventionally, it's an outline. [Read more about accessible focus indication](https://www.sarasoueidan.com/blog/focus-indicators/){target="_blank" rel="external"}.
Focus indication is a visual change that occurs when something interactive on the screen (like a link) receives keyboard focus. Without it, sighted keyboard-only users can't tell where they are on the page. Conventionally, it's an outline. [Read more about accessible focus indication](https://www.sarasoueidan.com/blog/focus-indicators/).
I would recommend a *smidge* of padding (spacing *inside* the border or outline of an element) around your links to allow for more space between the letters and focus outline in order to help with legibility.
@@ -141,7 +141,7 @@ img, picture, video, canvas, svg {
## headers, footers, navs
Let's talk the components that every page likely has - a header, a footer, and navs. I'm going to use a very simple design for our header - a [skip link](https://webaim.org/techniques/skipnav/){target="_blank" rel="external"}, an (optional) site title (the title could also be one of the nav links), and then an unordered list of links enclosed in a `nav` element. Like the following:
Let's talk the components that every page likely has - a header, a footer, and navs. I'm going to use a very simple design for our header - a [skip link](https://webaim.org/techniques/skipnav/), an (optional) site title (the title could also be one of the nav links), and then an unordered list of links enclosed in a `nav` element. Like the following:
```html
<header>
src/posts/2026/2026-07-26-log-cabin-dishtowels.md
+1 -1
View File
@@ -8,6 +8,6 @@ tags:
- weaving
---
Yarn: [Circulo Anne Weaving Yarn](https://woolery.com/products/circulo-anne-weaving-yarn){target="_blank" rel="external"}.
Yarn: [Circulo Anne Weaving Yarn](https://woolery.com/products/circulo-anne-weaving-yarn).
3 towels. Woven area roughly 12"x24". Hemstitched.
src/posts/2026/2026-08-01-loud-table-runner.md
+1 -1
View File
@@ -8,6 +8,6 @@ tags:
- weaving
---
Yarn: [Circulo Natural Cotton Maxcolor 4/6 Yarn](https://woolery.com/products/circulo-natural-cotton-maxcolor-4-6-yarn){target="_blank" rel="external"} with occasional stripes of [Fez Alpa](https://woolery.com/products/feza-alp-premier-yarn){target="_blank" rel="external"}.
Yarn: [Circulo Natural Cotton Maxcolor 4/6 Yarn](https://woolery.com/products/circulo-natural-cotton-maxcolor-4-6-yarn) with occasional stripes of [Fez Alpa](https://woolery.com/products/feza-alp-premier-yarn).
About 11" wide and 5' long including tassels.
src/posts/2026/2026-08-05-visual-site-builders-accessibility.md
+17 -17
View File
@@ -8,7 +8,7 @@ tags:
- software
---
Recently, I [asked on the Fediverse](https://flipping.rocks/@inherentlee/117037989967706516){target="_blank" rel="external"} about visual/drag-and-drop website builders and got a wealth of answers.
Recently, I [asked on the Fediverse](https://flipping.rocks/@inherentlee/117037989967706516) about visual/drag-and-drop website builders and got a wealth of answers.
I want to evaluate based on some accessibility factors:
@@ -27,7 +27,7 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## Blocs
[Blocs](https://blocsapp.com/){target="_blank" rel="external"} is a builder for MacOS, iPad, and iPhone. I had trouble getting a template loaded on my iPad, but I reviewed the Blocs website - built with Blocs, of course - for major issues. This is, I would assume, the shiniest version possible.
[Blocs](https://blocsapp.com/) is a builder for MacOS, iPad, and iPhone. I had trouble getting a template loaded on my iPad, but I reviewed the Blocs website - built with Blocs, of course - for major issues. This is, I would assume, the shiniest version possible.
| Factor | Notes | Score |
|---|---|---|
@@ -35,13 +35,13 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
| Keyboard navigation | Custom focus, missing in many areas on the Blocs site and turned off by default in the CSS - not sure if that is for this site or is the standard. The ability to potentially customize focus is interesting. | 1 |
| Reading order | Good! Block-based layout helps significantly here I would guess. | 3 |
| Text alternatives | Supported. | 3 |
| Color | Light and dark modes are possible - [Blocs dark mode documentation](https://help.blocsapp.com/knowledge-base/dark-theme/){target="_blank" rel="external"}. | 3 |
| Color | Light and dark modes are possible - [Blocs dark mode documentation](https://help.blocsapp.com/knowledge-base/dark-theme/). | 3 |
| Other | Difficulty with iPad app. | 1 |
| | | **12** |
## Cowsites
[Cowsites](https://cowsites.net){target="_blank" rel="external"} is a simple site editor with no drag-and-drop elements.
[Cowsites](https://cowsites.net) is a simple site editor with no drag-and-drop elements.
| Factor | Notes | Score |
|---|---|---|
@@ -55,7 +55,7 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## Figma Sites
[Figma Sites](https://www.figma.com/sites/){target="_blank" rel="external"} allows you to turn a Figma design into a functioning website. It offers generative AI features. I tested two themes from Figma Community.
[Figma Sites](https://www.figma.com/sites/) allows you to turn a Figma design into a functioning website. It offers generative AI features. I tested two themes from Figma Community.
| Factor | Notes | Score |
|---|---|---|
@@ -63,13 +63,13 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
| Keyboard navigation | Browser default focus outlines. One template *actually* had a skip link! | 2 |
| Reading order | Not clear how order is determined. Potentially partially influenced by order of elements in the sidebar, but one theme tested did not adhere to that and the nav was the last in the reading order despite being top of the sidebar order. I can't publish on the starter plan, so I can't see how my own changes influence the site, but with a well-built theme the organization helps ensure that adding new elements puts them in a reasonable place in the sidebar order. | 2 |
| Text alternatives | Supported. | 3 |
| Color | Light and dark modes are possible - [Figma variable modes documentation](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables){target="_blank" rel="external"}. | 3 |
| Color | Light and dark modes are possible - [Figma variable modes documentation](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables). | 3 |
| Other | n/a | 2 |
| | | **12** |
## Framer
[Framer](https://framer.com){target="_blank" rel="external"} is a full-featured site designer with a built-in CMS. It offers generative AI features.
[Framer](https://framer.com) is a full-featured site designer with a built-in CMS. It offers generative AI features.
| Factor | Notes | Score |
|---|---|---|
@@ -83,7 +83,7 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## Kiki
[Kiki](https://tomotama.com/kiki){target="_blank" rel="external"} is a simple site builder with no drag-and-drop elements. You can customize the CSS to your liking. I played with the demo site.
[Kiki](https://tomotama.com/kiki) is a simple site builder with no drag-and-drop elements. You can customize the CSS to your liking. I played with the demo site.
| Factor | Notes | Score |
|---|---|---|
@@ -97,7 +97,7 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## mmm.page
[mmm.page](https://mmm.page/){target="_blank" rel="external"} is a drag-and-drop builder. The preview doesn't show you a standalone page (it's a page that also has the mmm.page login/signup menu bar), so I looked at a few sites to get a sense for how it worked.
[mmm.page](https://mmm.page/) is a drag-and-drop builder. The preview doesn't show you a standalone page (it's a page that also has the mmm.page login/signup menu bar), so I looked at a few sites to get a sense for how it worked.
| Factor | Notes | Score |
|---|---|---|
@@ -111,11 +111,11 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## Rapidweaver
[Rapidweaver](https://www.realmacsoftware.com/rapidweaver/){target="_blank" rel="external"} is built exclusively for Mac. Ah, well.
[Rapidweaver](https://www.realmacsoftware.com/rapidweaver/) is built exclusively for Mac. Ah, well.
## Showit
[Showit](https://showit.com/){target="_blank" rel="external"} is a drag-and-drop builder with a Wordpress backend for content management. I reviewed several different premade themes. Custom CSS is allowed.
[Showit](https://showit.com/) is a drag-and-drop builder with a Wordpress backend for content management. I reviewed several different premade themes. Custom CSS is allowed.
| Factor | Notes | Score |
|---|---|---|
@@ -129,7 +129,7 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## Startup
[Startup](https://designmodo.com/startup/){target="_blank" rel="external"} is a block-based builder with pre-defined components and less freedom than some others on this list.
[Startup](https://designmodo.com/startup/) is a block-based builder with pre-defined components and less freedom than some others on this list.
| Factor | Notes | Score |
|---|---|---|
@@ -143,7 +143,7 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## Straw.page
[Straw.Page](https://straw.page/){target="_blank" rel="external"} is a drag-and-drop builder that bills itself as mobile-friendly. I looked at one of the offered themes, intentionally choosing one that should have intuitive reading order (spoiler: didn't matter).
[Straw.Page](https://straw.page/) is a drag-and-drop builder that bills itself as mobile-friendly. I looked at one of the offered themes, intentionally choosing one that should have intuitive reading order (spoiler: didn't matter).
| Factor | Notes | Score |
|---|---|---|
@@ -157,7 +157,7 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## Univer.se
[Univer.se](https://univer.se/){target="_blank" rel="external"} is a drag-and-drop builder with plenty of premade themes. I reviewed a premade theme to get started.
[Univer.se](https://univer.se/) is a drag-and-drop builder with plenty of premade themes. I reviewed a premade theme to get started.
| Factor | Notes | Score |
|---|---|---|
@@ -171,7 +171,7 @@ Want to just see the final ranking? Pop down to the [summary](#summary).
## Webflow
[Webflow](https://webflow.com/){target="_blank" rel="external"} is a drag-and-drop builder. Currently bottom of my review list due to AI features.
[Webflow](https://webflow.com/) is a drag-and-drop builder. Currently bottom of my review list due to AI features.
## Webnode
@@ -207,11 +207,11 @@ Gotta dive into Wordpress to explore these and haven't yet.
### Beaver Builder
[Beaver Builder](https://www.wpbeaverbuilder.com/){target="_blank" rel="external"}.
[Beaver Builder](https://www.wpbeaverbuilder.com/).
### Divi
[Divi](https://www.elegantthemes.com/gallery/divi/){target="_blank" rel="external"}.
[Divi](https://www.elegantthemes.com/gallery/divi/).
---
src/posts/2026/2026-08-20-pink-lime-grey-shawl.md
+1 -1
View File
@@ -8,6 +8,6 @@ tags:
- weaving
---
Yarn: [Gist Duet Cotton/Linen Weaving Yarn](https://woolery.com/products/gist-duet-cotton-linen-weaving-yarn){target="_blank" rel="external"}.
Yarn: [Gist Duet Cotton/Linen Weaving Yarn](https://woolery.com/products/gist-duet-cotton-linen-weaving-yarn).
About 2' wide and 5' long including fringe.
src/posts/2026/2026-09-08-framer-accessibility.md
+15 -15
View File
@@ -8,7 +8,7 @@ tags:
- software
---
This is a work in progress post originally written for a colleague beginning to explore [Framer](https://framer.com){target="_blank" rel="external"}, a visual site designer with CMS. It walks through some major web accessibility topics, first generally and then as they relate to Framer, with links to relevant resources.
This is a work in progress post originally written for a colleague beginning to explore [Framer](https://framer.com), a visual site designer with CMS. It walks through some major web accessibility topics, first generally and then as they relate to Framer, with links to relevant resources.
## Accessible from the beginning
@@ -16,20 +16,20 @@ Accessibility **must** be built from the start of a project. Retrofitting a proj
## Definitions
- **Assistive technology (AT):** "technology used by individuals with (varying levels and kinds of) disabilities in order to perform functions that might otherwise be difficult or impossible. It is an umbrella term for a wide variery of tools, including tools that enable access to information on the Web. ... Keyboards, screen readers, braille displays, voice recognition software, switch controls, and screen magnifiers are examples of high-tech assistive technology. Operating system and browser accessibility display modes (such as dark mode, and Windows High Contrast Mode) are also a form of assistive technology." (Sara Souiedan, [Practical Accessibility](https://practical-accessibility.today){target="_blank" rel="external"} - content gated behind paid course)
- See Browsing with Assistive Technology for an overview of some common methods/uses of AT.
- **Assistive technology (AT):** "technology used by individuals with (varying levels and kinds of) disabilities in order to perform functions that might otherwise be difficult or impossible. It is an umbrella term for a wide variery of tools, including tools that enable access to information on the Web. ... Keyboards, screen readers, braille displays, voice recognition software, switch controls, and screen magnifiers are examples of high-tech assistive technology. Operating system and browser accessibility display modes (such as dark mode, and Windows High Contrast Mode) are also a form of assistive technology." (Sara Souiedan, [Practical Accessibility](https://practical-accessibility.today) - content gated behind paid course)
- See [Browsing with Assistive Technology](https://tetralogical.com/blog/2021/12/24/browsing-with-assistive-technology-videos/) for an overview of some common methods/uses of AT.
- **Screen readers (SR):** A type of AT aimed at Blind/low vision users which reads aloud page content. Notably, SRs do not simply read page content in order; they have complex shortcuts which allow users to summarize links on a page, skip headline-by-headline, move to landmark sections, and more.
- **Web Content Accessibility Guidelines (WCAG):** "the standard that defines how to make Web content more accessible to people with disabilities. It defines a baseline set of guidelines that digital content must meet in order to provide minimum levels of accessibility." (Sara Souiedan, Practical Accessibility again)
## Semantic HTML
Most HTML elements are semantic, that is, they convey meaning. Labeling something an `<h1>` doesn't just style it like a header; it also means that assistive tech can understand it to be a header (this also helps with SEO - a lot of things that improve accessibility improve SEO as well). See the Mozilla docs for a [list of semantic HTML elements](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements){target="_blank" rel="external"}.
Most HTML elements are semantic, that is, they convey meaning. Labeling something an `<h1>` doesn't just style it like a header; it also means that assistive tech can understand it to be a header (this also helps with SEO - a lot of things that improve accessibility improve SEO as well). See the Mozilla docs for a [list of semantic HTML elements](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantic_elements).
Notably, `<div>`s and `<span>`s are not semantic and convey no meaning. They are used for styling alone.
### Semantic HTML in Framer
Semantic HTML elements can be applied to any Framer element using the "Accessibility" section in the right-hand sidebar. Read about [using semantic tags for navigation and footers](https://www.framer.com/help/articles/semantic-tags-navigation-footer/){target="_blank" rel="external"} - this applies to far more than the two elements mentioned.
Semantic HTML elements can be applied to any Framer element using the "Accessibility" section in the right-hand sidebar. Read about [using semantic tags for navigation and footers](https://www.framer.com/help/articles/semantic-tags-navigation-footer/) - this applies to far more than the two elements mentioned.
## Reading order
@@ -58,7 +58,7 @@ Following from reading order, we reach the concept of keyboard navigation. The a
Links, buttons, and form controls are tabbable by default. When tagged as the correct HTML element, they will function as expected.
[Framer supports adding the tabindex attribute](https://www.framer.com/help/articles/tab-order-customization/){target="_blank" rel="external"}. If you *must* do this for some reason, make sure to set its value to 0 - Framer defaults to 1. 0 will maintain the reading order established by layout and the left-hand sidebar; 1 will place the tabbable element first in the tabbing order.
[Framer supports adding the tabindex attribute](https://www.framer.com/help/articles/tab-order-customization/). If you *must* do this for some reason, make sure to set its value to 0 - Framer defaults to 1. 0 will maintain the reading order established by layout and the left-hand sidebar; 1 will place the tabbable element first in the tabbing order.
## Keyboard focus
@@ -66,7 +66,7 @@ When navigating with a keyboard, there should always be visual indication on the
### Keyboard focus in Framer
Framer does not currently allow for customizing keyboard focus in the editor. It must be done using [custom CSS](https://www.framer.com/help/articles/how-to-add-custom-code/){target="_blank" rel="external"}.
Framer does not currently allow for customizing keyboard focus in the editor. It must be done using [custom CSS](https://www.framer.com/help/articles/how-to-add-custom-code/).
In my tests, it was possible to clip out the browser default focus outline with certain padding settings. Review your site by tabbing through the page(s), and ensure that a full outline surrounds all interactable elements. If an outline is missing, consider adjusting the padding around that element.
@@ -74,7 +74,7 @@ In my tests, it was possible to clip out the browser default focus outline with
Skip links allow keyboard users to bypass large repeated blocks of content (such as a top nav). Without a skip link, a keyboard user will not stay long on a site - after moving to a new page, they may realize they have to tab through the entire nav again and leave.
Skip links are generally invisible to mouse users, and only appear when tabbing around a page. To see an example, open [WebAIM (Web Accessibility in Mind)](https://webaim.org/){target="_blank" rel="external"} and hit the `TAB` key. Notice the red box that appears in the upper left that reads "skip to main content."
Skip links are generally invisible to mouse users, and only appear when tabbing around a page. To see an example, open [WebAIM (Web Accessibility in Mind)](https://webaim.org/) and hit the `TAB` key. Notice the red box that appears in the upper left that reads "skip to main content."
### Skip links in Framer
@@ -82,7 +82,7 @@ Skip links in Framer require custom code, both React and CSS.
## Text alternatives
Text alternatives - alternative text, captioning, audio descriptions, etc. - are the most commonly thought of form of web accessibility. You likely need no further explanation of what they are and why they matter, but they can be rather daunting to write. I recommend reading [Adrian Roselli's approach to writing alt text](https://adrianroselli.com/2024/05/my-approach-to-alt-text.html){target="_blank" rel="external"}.
Text alternatives - alternative text, captioning, audio descriptions, etc. - are the most commonly thought of form of web accessibility. You likely need no further explanation of what they are and why they matter, but they can be rather daunting to write. I recommend reading [Adrian Roselli's approach to writing alt text](https://adrianroselli.com/2024/05/my-approach-to-alt-text.html).
### Text alternatives in Framer
@@ -93,12 +93,12 @@ Text alternatives can be easily set by double clicking on the media item in ques
There are a couple areas to consider when it comes to color:
1. **Light and dark modes** are both accessibility needs, and a site that only offers one limits access of some potential users.
1. **Color contrast** will improve users' abilities to view and read your site. WebAIM covers [color contrast as it relates to WCAG](https://webaim.org/articles/contrast/){target="_blank" rel="external"}. While you can use [WebAIM's contrast checker](https://webaim.org/resources/contrastchecker/){target="_blank" rel="external"}, I recommend finding a more fully-featured color design tool that incorporates contrast checking, luminance comparison, color vision simulation, and more. My personal tool of choice is [Atmos](https://atmos.style/){target="_blank" rel="external"}.
1. **Color contrast** will improve users' abilities to view and read your site. WebAIM covers [color contrast as it relates to WCAG](https://webaim.org/articles/contrast/). While you can use [WebAIM's contrast checker](https://webaim.org/resources/contrastchecker/), I recommend finding a more fully-featured color design tool that incorporates contrast checking, luminance comparison, color vision simulation, and more. My personal tool of choice is [Atmos](https://atmos.style/).
1. Ensuring that **color alone is not used to communicate meaning** helps users with various color deficiencies or certain AT users access your content and understand what is going on. For example, a form that highlights inputs in red when they are improperly filled in should *also* provide error messages.
### Color in Framer
Regarding item 1, Framer supports [light and dark modes for your color styles](https://www.framer.com/academy/lessons/light-dark-mode){target="_blank" rel="external"}. Items 2 & 3 are handled independently of Framer.
Regarding item 1, Framer supports [light and dark modes for your color styles](https://www.framer.com/academy/lessons/light-dark-mode). Items 2 & 3 are handled independently of Framer.
## Responsive design
@@ -106,13 +106,13 @@ A huge percentage of web browsing comes from mobile devices or tablets - and tha
### Responsive design in Framer
Read about [how to design responsive websites in Framer](https://www.framer.com/blog/design-responsive-websites/){target="_blank" rel="external"}.
Read about [how to design responsive websites in Framer](https://www.framer.com/blog/design-responsive-websites/).
## Forms
Accessible forms can be *hard*. They bring in challenges relating to labeling, validation, reading order, and color design.
1. **Labeling:** all form controls should have associated labels. Note that placeholder text does not constitute a label! Best practice is that labels be visible, but in some cases (for example a search bar which can be widely visually understood via placeholder text and a magnifying glass icon) you may want an invisible label. [Invisible labels can be achieved in several ways](https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text){target="_blank" rel="external"}.
1. **Labeling:** all form controls should have associated labels. Note that placeholder text does not constitute a label! Best practice is that labels be visible, but in some cases (for example a search bar which can be widely visually understood via placeholder text and a magnifying glass icon) you may want an invisible label. [Invisible labels can be achieved in several ways](https://www.w3.org/WAI/tutorials/forms/labels/#hiding-label-text).
1. **Validation:** thankfully, form control attributes can control validation for many common scenarios such as email, phone number, etc. It’s also possible to control whether an input is required.
1. **Reading order:** it’s important to ensure that tabbing through your form follows the same order as the visual items.
1. **Color:** as discussed earlier, ensure that errors are not communicated solely by color!
@@ -129,7 +129,7 @@ Accessible forms can be *hard*. They bring in challenges relating to labeling, v
## Other considerations
- Links should have **anchor text** that accurately represents what they point to (review this document for examples - note how links encapsulate the content they lead to).
- Counterexample: a newspaper page with many "continue reading" links. In this case, you would use the title or aria-label attributes to give a better programmatic name to the link that isn't visible to sighted users. Framer doesn't support the title attribute, so use [aria-label](https://www.framer.com/help/articles/improving-accessibility-with-aria-labels/){target="_blank" rel="external"} (found under "Accessibility" in the right-hand sidebar).
- Counterexample: a newspaper page with many "continue reading" links. In this case, you would use the title or aria-label attributes to give a better programmatic name to the link that isn't visible to sighted users. Framer doesn't support the title attribute, so use [aria-label](https://www.framer.com/help/articles/improving-accessibility-with-aria-labels/) (found under "Accessibility" in the right-hand sidebar).
- Links should always be **visibly indicated as links** - underlines are traditional, and traditional is understandable by users. If you choose otherwise, ensure you aren't [distinguishing only by color](#color)!
- If your links are underlined, avoid underlining other text elements to avoid confusion.
- Some users need **reduced or removed animations**. There is a setting in Framer to [allow reduced motion support](https://www.framer.com/help/articles/reduced-motion-settings/){target="_blank" rel="external"}. It's turned off by default.
- Some users need **reduced or removed animations**. There is a setting in Framer to [allow reduced motion support](https://www.framer.com/help/articles/reduced-motion-settings/). It's turned off by default.
src/posts/2026/2026-09-08-leather-mouse-purse.md
+1 -1
View File
@@ -8,4 +8,4 @@ tags:
- leather
---
Made from [a pattern by AnnaleatherHK on Etsy](https://www.etsy.com/listing/900951877/pdf-pattern-mouse-coin-purse-leather-diy){target="_blank" rel="external"}.
Made from [a pattern by AnnaleatherHK on Etsy](https://www.etsy.com/listing/900951877/pdf-pattern-mouse-coin-purse-leather-diy).
src/posts/2026/2026-09-09-houndstooth-dishtowels.md
+1 -1
View File
@@ -8,6 +8,6 @@ tags:
- weaving
---
Yarn: [Circulo Anne Weaving Yarn](https://woolery.com/products/circulo-anne-weaving-yarn){target="_blank" rel="external"}.
Yarn: [Circulo Anne Weaving Yarn](https://woolery.com/products/circulo-anne-weaving-yarn).
3 towels. Woven area roughly 12"x24". Hemstitched.