From 6e33a3baca64fbe08630715eaff774727f4be3f4 Mon Sep 17 00:00:00 2001 From: Lee Cattarin Date: Thu, 19 Feb 2026 21:09:25 -0800 Subject: [PATCH] a-h of site pages --- _site/aarons-mask/index.html | 1267 +++++++++++++ _site/about/index.html | 1126 +++++++++++ _site/acadia-coloring-journal/index.html | 1283 +++++++++++++ _site/acadia-mitts/index.html | 1267 +++++++++++++ _site/an-intro-to-git/index.html | 1682 +++++++++++++++++ _site/anarchy-autism/index.html | 1289 +++++++++++++ _site/art-shows-and-events/index.html | 1280 +++++++++++++ _site/artisans-cooperative-cards/index.html | 1274 +++++++++++++ _site/artisans-cooperative-shirts/index.html | 1275 +++++++++++++ _site/artists-conk/index.html | 1258 ++++++++++++ .../index.html | 1498 +++++++++++++++ _site/backend-accessibility/index.html | 1328 +++++++++++++ _site/bag-strap/index.html | 1267 +++++++++++++ _site/baseball-journal/index.html | 1277 +++++++++++++ _site/become-unbutterable/index.html | 1274 +++++++++++++ _site/bfl-silk-handspun/index.html | 1267 +++++++++++++ _site/big-pidge/index.html | 1284 +++++++++++++ .../block-printing-transfer-method/index.html | 1298 +++++++++++++ .../blue-and-brown-leather-journal/index.html | 1283 +++++++++++++ .../index.html | 1277 +++++++++++++ _site/bottom-growth/index.html | 1272 +++++++++++++ _site/bowtie/index.html | 1267 +++++++++++++ _site/boypussy/index.html | 1294 +++++++++++++ _site/brookes-collar/index.html | 1267 +++++++++++++ _site/brookes-cuff-bracelets/index.html | 1267 +++++++++++++ _site/brookes-notebook/index.html | 1282 +++++++++++++ _site/brookes-scarf/index.html | 1274 +++++++++++++ _site/brookes-socks/index.html | 1267 +++++++++++++ _site/brookes-suspenders/index.html | 1267 +++++++++++++ _site/brown-creeper/index.html | 1268 +++++++++++++ _site/butch-hands-pattern/index.html | 1349 +++++++++++++ _site/chanterelle/index.html | 1279 +++++++++++++ _site/charlie-the-alpaca-handspun/index.html | 1267 +++++++++++++ _site/circle-bag/index.html | 1267 +++++++++++++ _site/colophon/index.html | 1017 ++++++++++ _site/coming-out/index.html | 1283 +++++++++++++ _site/comparing-text-editors/index.html | 1489 +++++++++++++++ _site/congrats-on-the-autism-adhd/index.html | 1280 +++++++++++++ _site/congrats-on-the-gay/index.html | 1286 +++++++++++++ _site/contact/index.html | 1100 +++++++++++ _site/coral-reef-handspun/index.html | 1267 +++++++++++++ _site/crow/index.html | 1266 +++++++++++++ _site/designing-a-bag/index.html | 1283 +++++++++++++ _site/domain-and-site-setup/index.html | 1318 +++++++++++++ _site/double-bill-pocket-bifold/index.html | 1267 +++++++++++++ _site/dragon-mask/index.html | 1272 +++++++++++++ _site/dyeing-fiber/index.html | 1267 +++++++++++++ _site/ecommerce-options/index.html | 1299 +++++++++++++ _site/eight-pocket-bifold/index.html | 1267 +++++++++++++ _site/euphorbia/index.html | 1267 +++++++++++++ _site/fat-raccoon/index.html | 1284 +++++++++++++ .../index.html | 1301 +++++++++++++ _site/fedizinefest-2025/index.html | 1267 +++++++++++++ _site/feed.xml | 144 ++ _site/fire-and-ice-handspun/index.html | 1267 +++++++++++++ _site/fishhook-pride-keychains/index.html | 1272 +++++++++++++ _site/five-of-them/index.html | 1279 +++++++++++++ _site/fix-your-hearts/index.html | 1266 +++++++++++++ _site/flatfish/index.html | 1279 +++++++++++++ _site/flicker/index.html | 1284 +++++++++++++ _site/flocked-notebook/index.html | 1280 +++++++++++++ .../foldy-wallet-with-thumb-slide/index.html | 1267 +++++++++++++ _site/foldy-wallet/index.html | 1267 +++++++++++++ .../index.html | 1282 +++++++++++++ _site/foxgloves/index.html | 1283 +++++++++++++ _site/gallery/1/index.html | 1214 ++++++++++++ _site/gallery/10/index.html | 1218 ++++++++++++ _site/gallery/11/index.html | 1096 +++++++++++ _site/gallery/2/index.html | 1228 ++++++++++++ _site/gallery/3/index.html | 1210 ++++++++++++ _site/gallery/4/index.html | 1218 ++++++++++++ _site/gallery/5/index.html | 1212 ++++++++++++ _site/gallery/6/index.html | 1216 ++++++++++++ _site/gallery/7/index.html | 1260 ++++++++++++ _site/gallery/8/index.html | 1242 ++++++++++++ _site/gallery/9/index.html | 1244 ++++++++++++ _site/gallery/index.html | 1202 ++++++++++++ _site/geese-trans-wrongs/index.html | 1284 +++++++++++++ _site/geese/index.html | 1284 +++++++++++++ _site/gender-as-a-proxy-variable/index.html | 1456 ++++++++++++++ _site/gender-in-data-models/index.html | 1506 +++++++++++++++ _site/gender/index.html | 1290 +++++++++++++ _site/girldick/index.html | 1294 +++++++++++++ .../give-to-trans-orgs-and-people/index.html | 1326 +++++++++++++ _site/gradient-purse-strap/index.html | 1267 +++++++++++++ _site/green-memo-pad/index.html | 1283 +++++++++++++ _site/greeting-loons/index.html | 1277 +++++++++++++ _site/greeting-quorbs/index.html | 1272 +++++++++++++ _site/guestbook/index.html | 1082 +++++++++++ _site/hair/index.html | 1279 +++++++++++++ _site/hand-dyed-gold-handspun/index.html | 1267 +++++++++++++ _site/handcombed-jacobs-handspun/index.html | 1267 +++++++++++++ _site/handedness-toggle/index.html | 1493 +++++++++++++++ .../index.html | 1288 +++++++++++++ _site/happy-bihrtday/index.html | 1283 +++++++++++++ _site/happy-solstice-2024/index.html | 1258 ++++++++++++ _site/happy-solstice-2025/index.html | 1267 +++++++++++++ _site/heron/index.html | 1284 +++++++++++++ .../index.html | 1284 +++++++++++++ 99 files changed, 125342 insertions(+) create mode 100644 _site/aarons-mask/index.html create mode 100644 _site/about/index.html create mode 100644 _site/acadia-coloring-journal/index.html create mode 100644 _site/acadia-mitts/index.html create mode 100644 _site/an-intro-to-git/index.html create mode 100644 _site/anarchy-autism/index.html create mode 100644 _site/art-shows-and-events/index.html create mode 100644 _site/artisans-cooperative-cards/index.html create mode 100644 _site/artisans-cooperative-shirts/index.html create mode 100644 _site/artists-conk/index.html create mode 100644 _site/azure-locations-and-file-crawling/index.html create mode 100644 _site/backend-accessibility/index.html create mode 100644 _site/bag-strap/index.html create mode 100644 _site/baseball-journal/index.html create mode 100644 _site/become-unbutterable/index.html create mode 100644 _site/bfl-silk-handspun/index.html create mode 100644 _site/big-pidge/index.html create mode 100644 _site/block-printing-transfer-method/index.html create mode 100644 _site/blue-and-brown-leather-journal/index.html create mode 100644 _site/booby-congrats-on-the-top-surgery/index.html create mode 100644 _site/bottom-growth/index.html create mode 100644 _site/bowtie/index.html create mode 100644 _site/boypussy/index.html create mode 100644 _site/brookes-collar/index.html create mode 100644 _site/brookes-cuff-bracelets/index.html create mode 100644 _site/brookes-notebook/index.html create mode 100644 _site/brookes-scarf/index.html create mode 100644 _site/brookes-socks/index.html create mode 100644 _site/brookes-suspenders/index.html create mode 100644 _site/brown-creeper/index.html create mode 100644 _site/butch-hands-pattern/index.html create mode 100644 _site/chanterelle/index.html create mode 100644 _site/charlie-the-alpaca-handspun/index.html create mode 100644 _site/circle-bag/index.html create mode 100644 _site/colophon/index.html create mode 100644 _site/coming-out/index.html create mode 100644 _site/comparing-text-editors/index.html create mode 100644 _site/congrats-on-the-autism-adhd/index.html create mode 100644 _site/congrats-on-the-gay/index.html create mode 100644 _site/contact/index.html create mode 100644 _site/coral-reef-handspun/index.html create mode 100644 _site/crow/index.html create mode 100644 _site/designing-a-bag/index.html create mode 100644 _site/domain-and-site-setup/index.html create mode 100644 _site/double-bill-pocket-bifold/index.html create mode 100644 _site/dragon-mask/index.html create mode 100644 _site/dyeing-fiber/index.html create mode 100644 _site/ecommerce-options/index.html create mode 100644 _site/eight-pocket-bifold/index.html create mode 100644 _site/euphorbia/index.html create mode 100644 _site/fat-raccoon/index.html create mode 100644 _site/fd-signifier-and-oppositional-sexism/index.html create mode 100644 _site/fedizinefest-2025/index.html create mode 100644 _site/feed.xml create mode 100644 _site/fire-and-ice-handspun/index.html create mode 100644 _site/fishhook-pride-keychains/index.html create mode 100644 _site/five-of-them/index.html create mode 100644 _site/fix-your-hearts/index.html create mode 100644 _site/flatfish/index.html create mode 100644 _site/flicker/index.html create mode 100644 _site/flocked-notebook/index.html create mode 100644 _site/foldy-wallet-with-thumb-slide/index.html create mode 100644 _site/foldy-wallet/index.html create mode 100644 _site/fountain-pen-friendly-stationery/index.html create mode 100644 _site/foxgloves/index.html create mode 100644 _site/gallery/1/index.html create mode 100644 _site/gallery/10/index.html create mode 100644 _site/gallery/11/index.html create mode 100644 _site/gallery/2/index.html create mode 100644 _site/gallery/3/index.html create mode 100644 _site/gallery/4/index.html create mode 100644 _site/gallery/5/index.html create mode 100644 _site/gallery/6/index.html create mode 100644 _site/gallery/7/index.html create mode 100644 _site/gallery/8/index.html create mode 100644 _site/gallery/9/index.html create mode 100644 _site/gallery/index.html create mode 100644 _site/geese-trans-wrongs/index.html create mode 100644 _site/geese/index.html create mode 100644 _site/gender-as-a-proxy-variable/index.html create mode 100644 _site/gender-in-data-models/index.html create mode 100644 _site/gender/index.html create mode 100644 _site/girldick/index.html create mode 100644 _site/give-to-trans-orgs-and-people/index.html create mode 100644 _site/gradient-purse-strap/index.html create mode 100644 _site/green-memo-pad/index.html create mode 100644 _site/greeting-loons/index.html create mode 100644 _site/greeting-quorbs/index.html create mode 100644 _site/guestbook/index.html create mode 100644 _site/hair/index.html create mode 100644 _site/hand-dyed-gold-handspun/index.html create mode 100644 _site/handcombed-jacobs-handspun/index.html create mode 100644 _site/handedness-toggle/index.html create mode 100644 _site/handspun-yarn-in-party-mix-and-orange-gold/index.html create mode 100644 _site/happy-bihrtday/index.html create mode 100644 _site/happy-solstice-2024/index.html create mode 100644 _site/happy-solstice-2025/index.html create mode 100644 _site/heron/index.html create mode 100644 _site/hummingbird-become-ungovernable/index.html diff --git a/_site/aarons-mask/index.html b/_site/aarons-mask/index.html new file mode 100644 index 0000000..12550ad --- /dev/null +++ b/_site/aarons-mask/index.html @@ -0,0 +1,1267 @@ + + + + + + + aaron's mask | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

aaron's mask

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + + +

Commission piece; based on an existing pattern. The red detailing and teeth are my own design.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/about/index.html b/_site/about/index.html new file mode 100644 index 0000000..8a3dfb5 --- /dev/null +++ b/_site/about/index.html @@ -0,0 +1,1126 @@ + + + + + + + about | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + +

about

+ + +

My name is Lee Cattarin. I use he or ze pronouns.

+ +

I'm a programmer (are you looking for a resume?), artist&crafter - knitting, spinning yarn, stamp carving/printmaking, cardmaking & papercrafts, bookbinding, leatherworking - bread baker, guitar player, and probably a lot of other things.

+ +A koi pond in fall afternoon light. A slender white person in a knitted dark teal sweater crouches in front of the pond and extends hir hand towards the surface of the water. Several curious koi are arriving to see what the matter is, and one white koi has stuck its face a bit out of the water to reach toward hir hand. + +

As of November 2023, my wife Brooke Osment and I have a art store: Riverside Refuge Studio. You can find various store links, or other ways to connect, on my contact page. We're based out of Vashon, WA, USA, and ship internationally.

+ +

pets

+ +

We have a dog...

+ +4 collaged pictures of Kestrel the Malinois mutt, a big tan dog with a thick ruff and half floppy, half pointy ears. In the pictures, he rolls on his back in the grass, looks snobbily at the camera with one ear flopping, looks off to one side, and sleeps in a big leather chair. + +

...and six ducks.

+ +2 pictures that show all six ducks, each duck labeled with their name. In the first image, Sparrow (Golden 300, a light brown breed that looks similar to female mallards) and Puffin (Swedish Black, black with a white bib and beautiful iridescence) come up to eat from my hand. In the second image, Chickadee (Magpie, black and white splotched) is up front looking to one side, and behind her are Dodo (Silver Runner, white and grey), Emu (Fawn & White Runner, white and pale tan), and Kiwi (Chocolate Runner, dark brown all over), with Sparrow and Puffin partially visible behind. + +

webrings

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/acadia-coloring-journal/index.html b/_site/acadia-coloring-journal/index.html new file mode 100644 index 0000000..54fe3d7 --- /dev/null +++ b/_site/acadia-coloring-journal/index.html @@ -0,0 +1,1283 @@ + + + + + + + Acadia coloring journal | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

Acadia coloring journal

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + book +
    • + +
+ +
+ + + A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park. + + +

A green journal with a blue leather spine. The coloring pages are from the book Color Acadia with art by Katie Dube and Keri Kimura.

+

details

+

dimensions

+
    +
  • cover: 6 1/4" x 4 3/4"
    • +
  • pages: 6" x 4 1/2"
    • +
+

coloration

+
    +
  • cover: green with a blue leather spine
    • +
  • endpapers: beige, brown, white, and silver marbling
    • +
+

pages

+
    +
  • graph paper in multiple grid sizes, vellum graph paper, Color Acadia pages
    • +
  • 50 pages (40 graph paper, 10 Color Acadia)
    • +
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/acadia-mitts/index.html b/_site/acadia-mitts/index.html new file mode 100644 index 0000000..51570d1 --- /dev/null +++ b/_site/acadia-mitts/index.html @@ -0,0 +1,1267 @@ + + + + + + + acadia mitts | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

acadia mitts

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + knit +
    • + +
+ +
+ + + a hand wearing a knitted fingerless mitten. it's knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib. + + +

Yarn: The Fibre Co. Acadia

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/an-intro-to-git/index.html b/_site/an-intro-to-git/index.html new file mode 100644 index 0000000..cdca327 --- /dev/null +++ b/_site/an-intro-to-git/index.html @@ -0,0 +1,1682 @@ + + + + + + + an intro to git | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

an intro to git

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash. + + +

alrighty, this one's a real doozy. Strap in.

+
+ + + +
+

versioning

+

have you ever tried to revert to a previous version of a document in MS Office or Google Docs and found that your revision history is cluttered with small changes that by all rights should be grouped into one set of edits, but they aren't, and it's tedious to pick through all the versions?

+

or, more uniquely and/or uncommonly:

+ +

or, websites. Maybe you're building something in Squarespace and find out that in current versions of Squarespace, it doesn't support version history..

+

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 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.

+

this walkthrough also focuses on the "happy path," without much discussion of troubleshooting. I may write more on the topic in the future, but we're already over 4,500 words, so we're calling it a day.

+

finally, I wrote this walkthrough primarily with knowledge from using WSL [more on this later] on Windows and with Zed as my text editor. While I've tried to cover my bases with other OSes and options, there's a solid chance I'm missing things!

+

that all said, let's get (git?) into it!

+

what is git?

+

git is a version control system. We can use it to track changes we make to a set of files.

+
+

tip: it's important to understand that despite the examples of MS Office and Google Docs above, git isn't useful with word documents. git shines with plain text files - .txt, .md, or basically any type of code.

+
+

where can I use git?

+

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, Zed, or Sublime Text
    • +
  • there are standalone git 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.

+

what is a CLI?

+

a CLI a way to interact with your computer and with software in text-only form. Rather than using the mouse and clicking on things, you type in commands and see output.

+

where can I use the git CLI?

+

if you want to use the git CLI, you'll need a terminal. You've got a couple options here:

+
    +
  • 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 + +
    • +
  • both of the Windows options listed work with Windows Terminal 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

+

on the "Releases" page, scroll down to "Assets" and pick the .exe file.

+

during installation, you'll be asked to choose some things by the installer. Here's my recommendations:

+
    +
  1. if choosing to install Windows Terminal, check 'Add a Git Bash Profile to Windows Terminal' on the first options page
    2. +
  2. default editor: don't use vim. Pick something you have installed - it can just be Notepad - or you can use nano, an in-terminal editor
    3. +
  3. initial branch name: choose the 'Override' option and leave it set to "main"
    4. +
  4. everything else: keep the recommended choices
    5. +
+

you can open git for Windows via the start menu by searching for 'git bash.' If you chose to install Windows Terminal, one of the dropdown options will be for a new tab will be 'Git Bash.'

+

WSL

+

while installing WSL is a single command, here's a couple notes about getting started once inside WSL:

+
    +
  • don't be concerned that you can't see anything when you type or paste your password! Since it's sensitive information, this is intentional. You'll notice this pattern a couple of times while following this walkthrough
    • +
  • Ctrl+C and Ctrl+V won't work like they do on Windows. If you want to copy/paste, right-click (there won't be a context menu, it'll just happen)
    • +
  • if you're downloading a text editor like the ones mentioned above, you'll still follow the Windows instructions
    • +
+

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
    2. +
  2. 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
      • +
    +
    3. +
  3. 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 that it struggled with some file operations in WSL
    4. +
+

you must start your editor of choice within WSL. Don't use the Windows start menu! Instead, you'll type code . or zed . (note the .) while in WSL.

+

you can open WSL via the start menu by searching for 'WSL.' If you chose to install Windows Terminal, one of the dropdown options for a new tab will be your WSL distribution, usually 'Ubuntu.'

+

a few terminal operations

+

here's three vital terminal commands:

+
    +
  • pwd prints the working (current) directory. A lot of terminals will just show you what your current directory on every line, but if they don't, try pwd.
    • +
+
+

tip: directory is just another word for folder

+
+
    +
  • cd lets us change directories. If we type only cd, we'll be brought back to the home directory; if we provide a directory path, we'll be taken to the provided directory
    • +
  • ls lists files in the current directory (including other directories)
    • +
+

edit files

+

we'll want to edit files, right? How do we open our editor from the terminal?

+

there's usually a terminal command for the editor. For VSCode, it's code; for Zed, it's zed. If we want to open the current directory in our editor of choice (and we do!), we'll write <editor command> . (note the .), where . means "the current directory."

+

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.

+

a few handy settings

+

before we really start, we're going to set a few basics to make it easier for ourselves.

+
# skip this one if you installed git for windows
+# this means that if git wants us to edit something,
+# it'll open in the built-in terminal editor 'nano'
+# the default is vim, which can be pretty unfriendly to newcomers
+# nano, on the other hand, will tell you how to do basic
+# operations at the bottom of the editor
+git config --global core.editor nano
+
+# this uses the autocorrect
+# the value specifies how many *tenths* of a second
+# so 10 => 1 second
+git config --global help.autocorrect 10
+
+# skip this one if you installed git for windows
+# the default branch name is "master" due to older computer terminology
+# older language used to explain some computing relationships as master/slave
+# some people consider this outdated and harmful, so "main" is a more common these days
+# also, I'll be using main, so this will help make your output look like mine
+git config --global init.defaultbranch main
+
+# this sets our information
+# if we don't set this, git will prompt us to set it later
+git config --global user.name <your-name>
+git config --global user.email <your-email>
+

git going

+

(no, that's not a real git command)

+

there's two main ways to start:

+
    +
  1. create a new project on our local machine, or
    2. +
  2. work with an existing project
    3. +
+
+

tip: git and associated tooling refer to projects as repositories. I'll be sticking with the word project here as I find it a bit friendlier, but you'll probably run across the word repository in the wider world of git

+
+

git init

+

git init <project> will create a new directory named project ready to be used with git. We can then use cd <project> to enter the directory.

+
+

tip: don't use spaces in your project name!

+
+

git clone

+

git clone <project URL> will pull in an existing project. We're not going to talk about this right now; instead, we're going forward assuming with git init.

+

git status

+

before we do anything, let's see what git will tell us about our project. Type git status and we might see the following:

+
On branch main
+
+No commits yet
+
+nothing to commit (create/copy files and use "git add" to track)
+

let's dissect this.

+

branch main

+

git has a concept of branches, which are different paths our file history has taken. While branches are incredibly powerful, we're going to stay away from branches during this walkthrough and focus on working on a single branch - in this case, main.

+

no commits / nothing to commit

+

"no commits" means that the project has no history whatsoever. "Nothing to commit" means we've made no changes. But what is a commit?

+

commits and history

+

a commit is one set of changes made to our work. We get to choose which changes are part of any given commit, and we write a message describing the commit so that future-us knows what we did if for some reason we need to undo something.

+

git log

+

in an established project, we can use git log to look at our commit history. By default, one commit will output like this:

+
commit e2fd6c4772e61f9c074638a933eb92fc1ea885ef
+Author: Lee Cattarin <lee.cattarin@gmail.com>
+Date:   Sun Dec 28 18:47:00 2025 -0800
+
+	fix syntax err in alt
+

In order there, we have:

+
    +
  1. a long string that identifies the commit
    2. +
  2. the author of the commit
    3. +
  3. the date it was created
    4. +
  4. the message written to describe the commit
    5. +
+

creating a commit

+

commits are made with the command git commit, but if we try to create a commit right now we'll be told "nothing to commit."

+

okay, what if we edit a file?

+
+

tip: if you don't want to actually open your editor, just use touch file.txt to create a new empty file named file.txt

+
+

hmmm, there's still nothing to commit! What happens if we check git status? There's some new output!

+
Untracked files:
+  (use "git add <file>..." to include in what will be committed)
+        file.txt
+

git tells us that we have "untracked" files - a.k.a. files that git hasn't got in its history yet. It also tells us to use git add if we want to be able to commit that file.

+

the staging area

+

git has a concept called the staging environment or staging area. This captures the set of changes we're adding to a single commit. When we add something to the staging area, we say we are staging it or that it is staged. In order to stage changes, we'll use git add.

+

why a staging area? Why not just commit our changes?

+

well, imagine we're writing a blog post (easy for me to imagine right now). We start reviewing it, and notice that there's a bit of page styling we don't like - not something tied to the content of the post, but the styling of the overall site. We fix it, and want to save that change while continuing to work on our post draft. git add and the staging area allow that kind of choice.

+

git add

+

git add <filename> lets us add all changes in the given file to the staging area. Sometimes this is really useful - if we just created a new file (by, say, using touch file.txt), we probably want to add the whole thing.

+

personally, I really like using git add -p, so much so that I wrote an entire blog post about it. It lets us review changes piece-by-piece and pick only the pieces we want.

+

for now, we'll try git add file.txt. We'll notice there's no output by default, but we can run git status to see where things are at. git will now tell us:

+
Changes to be committed:
+  (use "git rm --cached <file>..." to unstage)
+        new file:   file.txt
+

now we're ready to create a commit!

+

git commit

+

if we just write git commit, it'll open an editor for us to edit the commit message - our description of the changes. This can be handy if we want to write a lengthy description, but if we want to just write a one-liner, we can use git commit -m "<message>". It's quicker and doesn't involve opening an editor.

+

let's create a super basic commit:

+
git commit -m "baby's first commit"
+
+

tip: as excited as you may be, don't use '!' in your commit messages

+
+

we'll see output like this:

+
[main (root-commit) 3dcf1ca] baby's first commit
+ 1 file changed, 1 insertion(+)
+

checking our work

+

trying git log now will show us our single commit!

+
+

tip: type q to exit the git log output

+
+

trying git status will tell us:

+
On branch main
+nothing to commit, working tree clean
+

changes to existing files

+

so, we've added a new file - that wasn't bad. Things get a little more interesting when we edit files git already knows about. Let's use <editor-command> . to open the current directory and write a sentence or two in file.txt.

+

after saving file.txt, try git status again.

+
+

tip: Ctrl+S (or Cmd+S on Mac) is the shortcut for saving basically everywhere

+
+
Changes not staged for commit:
+  (use "git add <file>..." to update what will be committed)
+  (use "git restore <file>..." to discard changes in working directory)
+        modified:   file.txt
+

git restore

+

git restore is new! That lets us get rid of our changes and go back to the last version of the file committed. Be careful with this - we should only do it if we really want to get rid of those changes.

+

let's not restore, and instead stage and commit our new changes:

+
git add file.txt
+git commit -m "added a new sentence"
+

again, we can use git status or git log as needed.

+

git revert

+

ooooh... I don't actually like that change. What if I want to undo something?

+

run git log again, and copy the first 6-8 characters in the commit string (we can copy more, including the whole string if we want, but it's not necessary):

+
commit 8b5dd7838f8c8423cfa445b6cddbed88e9c32511 (HEAD -> main)
+Author: Lee Cattarin <lee.cattarin@gmail.com>
+Date:   Wed Jan 7 15:18:45 2026 -0800
+
+    added a new sentence
+
+

in this case, 8b5dd7.

+

now we can try git revert <commit-string>. It'll open our editor to write a message about the change. It's important to know that git revert doesn't delete the old commit - it creates a new commit that undoes the previous work.

+
[main 9268d5c] Revert "added a new sentence"
+ 1 file changed, 1 deletion(-)
+

I didn't edit the message - we can tell because it just says "Revert" and then the old commit message. But we can edit and add lots of detail about why we're doing it.

+

git remote

+

let's try a new command: git remote. Hmm, nothing happened... what's a "remote"?

+

remember how I said we could use git clone to work on an existing project? If we did that, we'd be getting that project from a remote server - not our local machine.

+

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 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.

+

with the project created, Codeberg will tell us three things we can do: clone the repository, create a new repository, or push an existing repository. We'll push an existing one.

+
git remote add origin https://codeberg.org/inherentlee/testing.git
+git push -u origin main
+

first, we'll add a remote. Across from the project title, we should see a button that says Code with a dropdown indicator. It'll offer a few choices, the first two being SSH and HTTPS. I'll talk about SSH in a bit, but let's try HTTPS first. Copy that URL; we're about to use it in a command.

+
+

tip: the remote can be named whatever you want! Traditionally, it's called origin, but if it's easier for you to remember, you might call it codeberg or maybe remote

+
+
git remote add <remote-name> <url>
+

for this walkthrough, we'll call our remote codeberg.

+

there's no feedback, but that's ok. Re-running git remote shows that we have a remote now: codeberg. That really doesn't tell us much, does it! Let's try a more talkative command: git remote --verbose or, more simply, git remote -v. Now it tells us the following:

+
codeberg  https://codeberg.org/inherentlee/git-intro.git (fetch)
+codeberg  https://codeberg.org/inherentlee/git-intro.git (push)
+

cool! we have a remote set up. What does "fetch" and "push" mean?

+

git fetch (and git pull)

+

git fetch brings remote changes to our local machine. So does a command called git pull. Why are there two?

+

fetch brings the remote changes down, but doesn't combine them yet with our local work. This gives us a chance to explore what those changes are before we actually integrate them into our work!

+

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) - 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!

+

git push, take one

+

git push is the opposite of git pull - it takes your local changes and adds them to the remote.

+

the first time we use it on any given branch, we'll want to set what's called the upstream - the remote branch that our local branch is connected to by default. We can do this with the following command:

+
git push --set-upstream codeberg main
+# or, for brevity
+git push -u codeberg main
+

authentication

+

when we call git push, we're prompted for our Codeberg username and password.

+

personally, I find constantly authenticating tremendously annoying! There's a couple of ways to handle this.

+
    +
  1. in the command line, we can use a few different credential management settings: +
      +
    • git config --global credential.helper cache will store our username and password in memory. You'll be re-prompted every 15 minutes. I work in long enough sessions that this is still a pain for me, but it may work for you
      • +
    • git config --global credential.helper store will save our username and password in a file on our machine, and only re-prompt if we change either value. Importantly, this method does not encrypt our password in any way! While it's convenient, it's not very secure
      • +
    • on Mac, git config --global credential.helper osxkeychain is a secure method for saving credentials
      • +
    +
    2. +
  2. if we installed git for Windows, we should have Git Credential Manager (GCM)
    3. +
  3. in any terminal environment, we can use an SSH key. This is my preferred method! I find it's a good balance between never logging in and constantly logging in - I do it once after opening the terminal, and them I'm good for that work session
    4. +
+

SSH keys

+

while I'm not going to go into a lot of the technical concepts behind SSH keys, I will talk a bit about how my setup works. If you're happy with one of the other credential management setups above, feel free to skip past this section cause it's a bit chunky.

+

the SSH (secure shell) protocol allows for secure communication on an insecure network.

+

when we generate an SSH key, we get a public and a private key. These are mathematically related, and if we encrypt something with the private key, it can be decrypted with the public key, and vice versa.

+

the important thing to know is you should never share your private key. Also, while you aren't forced to set a password when creating these keys, I strongly recommend doing so.

+

creation

+

running ssh-keygen will take us through a series of prompts. Assuming we don't already have an SSH key, the default file location is fine.

+

when you choose a passphrase, write it down. If you lose it, there is no recourse. You will have to generate a new SSH key.

+

after generation, we will have two files at the location specified by the tool (or the custom location we chose). Generally, that's the folder .ssh in our home directory. If we navigate to that directory (cd $HOME/.ssh) and look at the files (ls), we'll see files named id_rsa and id_rsa.pub. The one that ends with .pub is the public key.

+

an alias...

+

time for a little more terminal knowledge!

+

I have two handy pieces of tooling in my terminal that I use for SSH operations.

+

the first one is an alias - basically a simple shortcut for a command. I've written an alias for outputting my public key so that when I need it, I can get it without having to write out the path to the key. Laziness is a virtue, okay?

+

there's a file in the home directory called .bashrc. It sets a lot of terminal-wide functionality. We're going to add an alias to it!

+

the command to output a file's contents is cat <filename>. My alias name of choice to cat my public SSH key is sshcat - but feel free to name yours something else.

+

navigate to the home directory (cd) and open your .bashrc file in your editor (<editor-command> .bashrc). Add the following to the bottom before saving and exiting.

+
alias sshcat="cat $HOME/.ssh/id_rsa.pub"
+
+

tip: don't be alarmed if you can't use this right away! Your .bashrc file takes effect when the terminal starts up. If you want to test it, either restart your terminal, or type source $HOME/.bashrc

+
+

and a function

+

the other piece of shortcut SSH key tooling I use is a function that I call ssa, short for ssh-agent. ssh-agent manages SSH keys and keeps us logged in during a session.

+
# SSH agent
+ssa() {
+	ssa_pid=$(pgrep ssh-agent)
+	if [[ $ssa_pid ]]; then kill $ssa_pid; fi
+
+    echo -n "$fg[green]"
+	eval $(ssh-agent -s)
+	ssh-add ~/.ssh/id_rsa
+}
+

look, I'll be honest... we're not going to explain this one in detail. In short, though, it removes any existing instance of ssh-agent, then prompts us to put in our SSH key password so it can authenticate us.

+

open the .bashrc file again for editing, and add the above function to the bottom before saving and exiting. Again, either quit the terminal or type source $HOME/.bashrc to reload and use this new function by typing in ssa.

+

SSH keys and the remote

+

when we added a remote, we used the HTTPS URL. Let's update to using the SSH URL - you can find this on the main project page under the dropdown button that reads Code.

+
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. 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

+

we can now call git push again and again now without having to repeat our credentials every time. We can also call git pull for our private repositories.

+

summary

+

let's talk about what we've done.

+
    +
  1. set up a terminal and learned a couple indispensable commands
    2. +
  2. created a new project with git init
    3. +
  3. checked in constantly using git status
    4. +
  4. learned what a commit is, and how to use git log to view our commit history
    5. +
  5. used git add to add new files or file changes to a commit
    6. +
  6. created commits with git commit
    7. +
  7. undid a commit using git revert
    8. +
  8. talked about remotes, making a new Codeberg project, and using git remote to link that project to our local work
    9. +
  9. talked about git fetch and git pull
    10. +
  10. added our local work to the remote project using git push
    11. +
  11. and finally, set up some kind of credential management so we don't have to log in for every git push!
    12. +
+

congratulations, and welcome to git!

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/anarchy-autism/index.html b/_site/anarchy-autism/index.html new file mode 100644 index 0000000..ea06f2a --- /dev/null +++ b/_site/anarchy-autism/index.html @@ -0,0 +1,1289 @@ + + + + + + + anarchy autism | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

anarchy autism

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A print in rainbow ink that says autism with the anarchy A. + + +

my therapist's idea

+

details

+

dimensions

+

7.5" x 4"

+

coloration

+

default: black

+

available as

+

patch, print, sticker, shirt, card, pin

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/art-shows-and-events/index.html b/_site/art-shows-and-events/index.html new file mode 100644 index 0000000..929b1ac --- /dev/null +++ b/_site/art-shows-and-events/index.html @@ -0,0 +1,1280 @@ + + + + + + + art shows and events | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

art shows and events

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
+ + + Image unrelated to post. A cluster of small, four-petaled flowers, varying in color between a purpley-pink and yellow. + + +

2023

+ +

2024

+ +

2025

+ +

2026

+ + +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/artisans-cooperative-cards/index.html b/_site/artisans-cooperative-cards/index.html new file mode 100644 index 0000000..287a084 --- /dev/null +++ b/_site/artisans-cooperative-cards/index.html @@ -0,0 +1,1274 @@ + + + + + + + artisans cooperative cards | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/artisans-cooperative-shirts/index.html b/_site/artisans-cooperative-shirts/index.html new file mode 100644 index 0000000..8ec3a95 --- /dev/null +++ b/_site/artisans-cooperative-shirts/index.html @@ -0,0 +1,1275 @@ + + + + + + + artisans cooperative shirts | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

artisans cooperative shirts

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail. + + +

Learn more about Artisans Cooperative, a new platform for makers and supporters.

+

I've joined the "coop" and will be making shirts to support their fundraiser.

+

Buy them on Artisans Cooperative's new marketplace.

+

Buy them via my order form. (Sep 2024: No longer accepting orders via this method)

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/artists-conk/index.html b/_site/artists-conk/index.html new file mode 100644 index 0000000..cbe7955 --- /dev/null +++ b/_site/artists-conk/index.html @@ -0,0 +1,1258 @@ + + + + + + + artists conk! | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

artists conk!

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
+ + + A hand holding a mushroom with a whitish surface. Scratched into the surface and showing up as brown lines is an illustration of many leatherworking tools. + + +

did you know you can draw on (certain) mushrooms

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/azure-locations-and-file-crawling/index.html b/_site/azure-locations-and-file-crawling/index.html new file mode 100644 index 0000000..5c58a8f --- /dev/null +++ b/_site/azure-locations-and-file-crawling/index.html @@ -0,0 +1,1498 @@ + + + + + + + azure locations and file crawling | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

azure locations and file crawling

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A Linux terminal. There is a fun rainbow flag in ascii art at the top, and then the user has called a command asking Azure for a list of resources applicable to a specific resource type + + +

context

+

Azure is Microsoft's cloud offering. Each possible resource that can be deployed in Azure has a location it's deployed in, such as "East US" or "Italy." While some resources can be deployed in all locations, other resources have location constraints.

+

It's common, when deploying, to have a whole ecosystem of resources that will work together. However, this introduces a problem: which locations work for all resources in a deployment?

+

Let's dig in. (Want just the outcome? Check the summary.)

+

bicep

+

Bicep is a language for describing Azure resources. A Bicep file sets out a series of resources with preset or parameterized properties in order to deploy said resources.

+

A minimal Bicep file that creates a resource group might look like this:

+
param resourceGroupName string = 'myResourceGroup'
+param location string = "westus2"
+
+resource resourceGroup 'Microsoft.Resources/resourceGroups@2022-09-01' = {
+    name: resourceGroupName
+    location: location
+}
+

This is easy to start parsing - I can use grep to find that Microsoft.Resources/resourceGroups@2022-09-01 string and go from there.

+

nesting

+

However, minimal is uncommon. As stated above, deployments of multiple resources are much more common.

+

When working with large deployments, certain resources may be needed more than once. You can repeat your earlier storage account declaration, or, instead, you can template out how to deploy a storage account with given parameters, then reuse that template. This is called a module, and it's fundamental to organizing Bicep files.

+

Let's say this is our file structure. Ignore the lack of parameter files or READMEs, this is just an example.

+
.
+|--infra
+   |--env
+   |  |--dev
+   |  |  |--main.bicep
+   |  |--prod
+   |     |--main.bicep
+   |--modules
+      |--rg
+      |  |--main.bicep
+      |--vm
+      |  |--modules
+      |  |  |--network.bicep
+      |  |  |--virtual-machine.bicep
+      |  |--main.bicep
+      |--kv
+         |--modules
+         |  |--role-assignment.bicep
+         |  |--key-vault.bicep
+         |--main.bicep
+

Bicep files use relative references for local modules, so infra/env/dev/main.bicep references ../../modules/vm/main.bicep, which references ./modules/network.bicep. While the directory structure in this example could be flattened, my point is: modules can nest, and each module refers relatively to the module(s) it relies on.

+

finding all resources

+

Okay, let's backtrack. From a given Bicep file, we want:

+
    +
  1. All referenced resource types
    2. +
  2. All referenced modules
    3. +
+

grep

+

Resources and modules both have patterns in how they are declared. Thankfully, they're pretty simple regexes. grep will spit out lines in a file that match a given regex.

+
# this gets us strings like
+# resource resourceGroup 'Microsoft.Resources/resourceGroups@2022-09-01' = {
+grep -E "^resource " "$file"
+
+# this gets us strings like
+# module vm '../../modules/vm/main.bicep' = {
+grep -E "^module " "$file"
+

cut

+

From there, let's use cut to strip off the parts we don't want.

+
# this gets us strings like
+# Microsoft.Resources/resourceGroups
+grep -E "^resource " "$file" \
+    | cut -d "'" -f 2 - \
+    | cut -d "@" -f 1 -
+
+# this gets us strings like
+# ../../modules/vm/main.bicep
+grep -E "^module " "$file" \
+    | cut -d "'" -f 2 -
+

These calls are a little opaque. -d sets a delimiter (what to split on). -f picks a field to return, numbered from 1.

+

mapfile

+

We'll save these values to variables. mapfile reads a file, putting each line into a new array element. -t trims newline characters. The <s do some redirection, and yes, the space between them matters.

+
mapfile -t resources < <(grep -E "^resource " "$file" \
+    | cut -d "'" -f 2 - \
+    | cut -d "@" -f 1 -)
+mapfile -t modules < <(grep -E "^module " "$file" \
+    | cut -d "'" -f 2 -)
+

dirname (& more)

+

We can't just stop there. We need to search each module in turn. Using dirname, we can get the directory of the file we're searching, then append the relative module path.

+
get_resources () {
+    # ... grep, cut, etc ...
+
+    directory=$(dirname "$file")
+
+    for module in "${modules[@]}"
+    do
+        mapfile -t -O "${#resources[@]}" resources < <(get_resources "$directory/$module")
+    done
+}
+

A lot just happened there besides dirname. {modules[@]} is all the array elements (as opposed to just $modules, which evaluates to the first element). ${#modules[@]}, on the other hand - note the pound sign - is the number of elements in the array.

+

Additionally, mapfile usually writes from index 0 onwards. But with the -O argument, we can specify an origin. By setting the starting point to the length of the array, we append to the array rather than writing over existing data.

+

Finally, we got some recursion going! get_resources calls get_resources for every module found.

+

the get_resources function

+

So far, our code looks like this:

+
get_resources () {
+    mapfile -t resources < <(grep -E "^resource " "$file" \
+        | cut -d "'" -f 2 - \
+        | cut -d "@" -f 1 -)
+    mapfile -t modules < <(grep -E "^module " "$file" \
+        | cut -d "'" -f 2 -)
+
+    directory=$(dirname "$file")
+
+    for module in "${modules[@]}"
+    do
+        mapfile -t -O "${#resources[@]}" resources < <(get_resources "$directory/$module")
+    done
+
+    for resource in "${resources[@]}"; do; echo "$resource"; done
+}
+

That last one-liner just returns our results. Note that we don't just echo "${resources[@]}" - this results in a space-delimited string and it'll be helpful later to have a newline-delimited string.

+

finding locations

+

Now we need to use these resource types to get available locations. First, actually call our function from above. We'll assume we're in a directory with a top-level main.bicep file.

+
mapfile -t resources < <(get_resources "main.bicep")
+

sort

+

Does sorting matter? Not really, but sort has a useful feature, -u, which returns unique items (aka, it deduplicates). Looking up the same resource type twice slows us down.

+
mapfile -t resources < <(get_resources "main.bicep" | sort -u)
+

sort is one reason it helps to have newlines as delimiters - it expects that.

+

az

+

We'll use az to list all the locations - just to give ourselves a starting point. You could also use the locations for the first resource type.

+
mapfile -t locations < <(az account list-locations --query "[].displayName" \
+    --out tsv)
+

We can then use an az command to find available locations for a given resource type:

+
mapfile -t newLocations < <(az provider show --namespace "$namespace" \
+    --query "resourceTypes[?resourceType=='$resourceType'].locations | [0]" \
+    --out tsv)
+

--out tsv means we will get a list with no decoration whatsoever - it's vital for programmatic handling of az command output.

+

cut (again)

+

We'll need to get those $namespace and $resourceType variables. cut comes back in handy:

+
# remember, $resource is something like Microsoft.Resources/resourceGroups
+
+# this gets us strings like
+# Microsoft.Resources
+namespace=$(echo "$resource" | cut -d "/" -f 1 -)
+
+# this gets us strings like
+# resourceGroups
+resourceType=$(echo "$resource" | cut -d "/" -f 2 -)
+

comm

+

Okay, we can get locations. How do we handle finding their intersection?

+

comm to the rescue. It finds common lines between two sorted files. Its default output is three columns - lines only in file 1, lines only in file 2, and lines common to both. We can suppress the first two columns with -12.

+

comm expects files, so we'll reuse our redirection <(someCommand) from earlier.

+
mapfile -t locations < <(comm -12 \
+    <(for location in "${locations[@]}"; do echo "$location"; done) \
+    <(for location in "${newLocations[@]}"; do echo "$location"; done) )
+

comm also likes newline-delimited input, so we're again looping through the array rather than echoing all values at once.

+

catching errors

+

With functionality as it is, many deployments will come back with 0 locations available. Turns out some basic resource types, like role assignments, don't have locations. So let's filter those.

+
if [[ ${#newLocations[@]} -eq 0 ]]
+then
+    # handle
+fi
+

tee

+

We'll print the locations to the shell. We can even use tee to print them to a file for good measure:

+
for location in "${locations[@]}"; do echo "$location"; done | tee locations.txt
+

the location code

+

Here's our code for this section:

+
mapfile -t resources < <(get_resources "main.bicep" | sort -u)
+
+mapfile -t locations < <(az account list-locations --query "[].displayName" \
+  --out tsv)
+
+for resource in "${resources[@]}"
+do
+    namespace=$(echo "$resource" | cut -d "/" -f 1 -)
+    resourceType=$(echo "$resource" | cut -d "/" -f 2 -)
+
+    mapfile -t newLocations < <(az provider show --namespace "$namespace" \
+        --query "resourceTypes[?resourceType=='$resourceType'].locations | [0]" \
+        --out tsv)
+
+    if [[ ${#newLocations[@]} -eq 0 ]]
+    then
+        continue
+    fi
+
+    mapfile -t locations < <(comm -12 \
+        <(for location in "${locations[@]}"; do echo "$location"; done) \
+        <(for location in "${newLocations[@]}"; do echo "$location"; done) )
+done
+
+for location in "${locations[@]}"; do echo "$location"; done | tee locations.txt
+
+

summary

+

Here's our final script:

+
# Recursively crawls bicep files to find all referenced resources
+get_resources () {
+    mapfile -t resources < <(grep -E "^resource " "$file" \
+        | cut -d "'" -f 2 - \
+        | cut -d "@" -f 1 -)
+    mapfile -t modules < <(grep -E "^module " "$file" \
+        | cut -d "'" -f 2 -)
+
+    directory=$(dirname "$file")
+
+    for module in "${modules[@]}"
+    do
+        mapfile -t -O "${#resources[@]}" resources < <(get_resources "$directory/module")
+    done
+
+    for resource in "${resources[@]}"; do echo "$resource"; done
+}
+
+# Execution starts here
+mapfile -t resources < <(get_resources "main.bicep" | sort -u)
+
+mapfile -t locations < <(az account list-locations --query "[].displayName" \
+    --out tsv)
+
+for resource in "${resources[@]}"
+do
+    namespace=$(echo "$resource" | cut -d "/" -f 1 -)
+    resourceType=$(echo "$resource" | cut -d "/" -f 2 -)
+
+    mapfile -t newLocations < <(az provider show --namespace "$namespace" \
+        --query "resourceTypes[?resourceType=='$resourceType'].locations | [0]" \
+        --out tsv)
+
+    if [[ ${#newLocations[@]} -eq 0 ]]
+    then
+        continue
+    fi
+
+    mapfile -t locations < <(comm -12 \
+        <(for location in "${locations[@]}"; do echo "$location"; done) \
+        <(for location in "${newLocations[@]}"; do echo "$location"; done) )
+done
+
+for location in "${locations[@]}"; do echo "$location"; done | tee locations.txt
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/backend-accessibility/index.html b/_site/backend-accessibility/index.html new file mode 100644 index 0000000..5edae90 --- /dev/null +++ b/_site/backend-accessibility/index.html @@ -0,0 +1,1328 @@ + + + + + + + backend accessibility | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

backend accessibility

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A carved stamp next to its print. The print reads '#camelCase' in a slightly formal-looking italic font. + + +
+

These notes are from a talk I gave at work. If you think something is missing or incorrect, please let me know!

+
+

Backend developers still have users: other developers. We're all human, with human limitations and differences. Design for those limitations and you'll find you improve the end result for everyone.

+

Documentation

+

The first thing you can do: document. By this I don't just mean standalone text documentation; I also include code comments, clear variable and file naming, and pipeline or script outputs that report success or failure and give details.

+

Rely on standards

+

Rely on existing standards where possible. Style guides, spell checkers, linters, and formatters are all great. Make standards easy to follow with linter, editor, etc. config files in your repo, or add a devcontainer so others can easily get started with the project. When there's no standard, create one; for example, set up github issue and PR templates. And whenever you can, automate tests and fixes.

+

User stories

+

I want to understand new terms as they're introduced

+
    +
  • Abbreviations/initialisms: can stall anyone unfamiliar with them. Spell them out when they're first introduced, and add the abbreviation in parentheses.
    • +
  • Jargon: avoid it as much as possible. Keep a friendly tone.
    • +
  • Neologisms: tech loves em! Often compound words or portmanteaus. For compound words (or, at times, hashtags), use camelCase or another style that distinguishes between words. This helps visually as well as improving screen reader pronunciation.
    • +
+

I want to quickly scan a page for the information I need

+

Sighted users may take for granted the ability to skim a page by glancing at headers or highlights. Users with screen readers rely on several features for the same functionality.

+

For example, screen readers can summarize the headers on a page. To leverage this, break up content with headers and avoid using other formatting to achieve similar effects visually. Stick to one h1 per page, and don't skip levels (e.g. go from an h1 to an h3).

+

Screen readers can also summarize a page's links. In order for this to be effective, links need descriptive text attached to them (and always avoid bare links!). Compare these examples:

+
+

Read more about accessibility patterns on the web

+
+

vs

+
+

Read more about accessibility patterns on the web

+
+

The second example has text directly attached to the link that describes its content. This is a vast improvement over the first example, where the link would just be read out as "more". Since links are visually highlighted, good link text also improves readability for everyone.

+

A table of contents can be helpful for a broad set of users, from the power user who knows exactly what she needs from the page to the newbie who just wants to see what the major topics are.

+

I want to be aware of and able to understand all content on the page

+

Alt text/image descriptions for image and transcription/audio descriptions for videos are essential (and not just for screen readers - they're really useful if you've got poor internet connection). The references section of this document will link to more information on writing good alt text, but in general, focus on why the image/video is there and what it is conveying.

+

(If you find you are simply transcribing text in an image, remove the image unless it conveys additional detail - images showing text intended to be read are less user-friendly than the same content conveyed as text. If the text is purely decorative and not intended to be read, carry on - just make sure you don't transcribe it since it's not meaningful!)

+

I find this comes up the most in backend as diagrams. We love diagrams in place of words! Unfortunately, you'll want those words for some users eventually. Avoid alt text like "diagram of components" or "flow chart showing pipeline" - either write out a more direct explanation that mentions all entities contained in the diagram, or direct the reader to a section of text that covers the same content (e.g. "flow chart of the pipeline described below"). If you're writing a direct explanation, don't feel the need to describe each shape or arrow - focus on describing the relationships and entities those shapes and arrows represent.

+

todo notes

+

These are bits of feedback or further thoughts that have yet to be integrated into this.

+
    +
  • tabs vs spaces (prefer tabs - allows each developer to customize based on eyesight and personal preference)
    • +
  • don't use color alone to convey meaning
    • +
  • autocorrects and confirmation prompts
    • +
+

References

+ +

Alt text/image descriptions

+ +

Other specific topics

+ + +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/bag-strap/index.html b/_site/bag-strap/index.html new file mode 100644 index 0000000..deb6d63 --- /dev/null +++ b/_site/bag-strap/index.html @@ -0,0 +1,1267 @@ + + + + + + + bag strap | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

bag strap

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A nylon webbing shoulder strap in bright teal with clips on each end. + + +

adjustable! also can be made with rainbow fittings.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/baseball-journal/index.html b/_site/baseball-journal/index.html new file mode 100644 index 0000000..5275ad5 --- /dev/null +++ b/_site/baseball-journal/index.html @@ -0,0 +1,1277 @@ + + + + + + + baseball journal | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

baseball journal

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + book +
    • + +
+ +
+ + + A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + + +

Baseball stitched book!

+

details

+

dimensions

+

3" x 2" ish

+

coloration

+
    +
  • cover: white leather
    • +
  • pages: white
    • +
+

pages

+

drawing paper

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/become-unbutterable/index.html b/_site/become-unbutterable/index.html new file mode 100644 index 0000000..5d81807 --- /dev/null +++ b/_site/become-unbutterable/index.html @@ -0,0 +1,1274 @@ + + + + + + + become unbutterable | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

become unbutterable

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + 3 copies of the same stamp in orange ink are spread out next to the hand carved rubber stamp they were made from. They show a cat lying on his back with paws curled, holding a butter knife in his mouth. Text around the cat reads, in all caps, 'become unbutterable.' + + +

Hand carved stamp based on a photo of Jorts the cat.

+

details

+

dimensions

+

roughly 4.5" x 3.5"

+

coloration

+

default: jalapeno

+

available as

+

patch, print, greeting card

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/bfl-silk-handspun/index.html b/_site/bfl-silk-handspun/index.html new file mode 100644 index 0000000..6543830 --- /dev/null +++ b/_site/bfl-silk-handspun/index.html @@ -0,0 +1,1267 @@ + + + + + + + BFL/silk handspun | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

BFL/silk handspun

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + yarn +
    • + +
+ +
+ + + a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. + + +

Fiber from Woolgatherings. 70% Blue-Faced Leicester 30% tussah silk.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/big-pidge/index.html b/_site/big-pidge/index.html new file mode 100644 index 0000000..58b52f8 --- /dev/null +++ b/_site/big-pidge/index.html @@ -0,0 +1,1284 @@ + + + + + + + big pidge | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

big pidge

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence. + + +

A large, large pigeon. Based on a fantastic photograph by Chris Price.

+

details

+

dimensions

+

5" x 5" or so

+

coloration

+

default: black, sometimes with some blue, purple, green "iridescence"

+

available as

+

patch, print, greeting card, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/block-printing-transfer-method/index.html b/_site/block-printing-transfer-method/index.html new file mode 100644 index 0000000..43488f5 --- /dev/null +++ b/_site/block-printing-transfer-method/index.html @@ -0,0 +1,1298 @@ + + + + + + + block printing transfer method | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

block printing transfer method

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
+ + + A pink block of carving material with a printed design of a bird attached to it. The paper has been partially rubbed away (process described in this post) to reveal the inked design on the carving material. + + +

materials

+

for transfer

+ +

for carving

+ +

for printing

+ +

process

+
    +
  1. Cut printout and speedy-carve to desired overall shape
    2. +
  2. Paint an even layer of gel medium on both printout (inked side) and speedy-carve
    3. +
  3. Align the gel'd printout to the gel'd block, and press on using a brayer
    4. +
  4. Let dry. Really. Let it dry. Leave it be.
    5. +
  5. Dampen the back of the printout with a sponge or wet finger, then gently rub to remove paper
    6. +
  6. Done correctly, this should leave your image (and a thin layer of gel medium) on the speedy-carve
    7. +
+

references

+ + +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/blue-and-brown-leather-journal/index.html b/_site/blue-and-brown-leather-journal/index.html new file mode 100644 index 0000000..16464c9 --- /dev/null +++ b/_site/blue-and-brown-leather-journal/index.html @@ -0,0 +1,1283 @@ + + + + + + + blue and brown leather journal | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

blue and brown leather journal

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + book +
    • + +
+ +
+ + + A three panel collage showcasing a blue and brown leather-covered journal. + + +

A two-tone blue and brown leather journal closed by a button. The inside front cover has a small pocket.

+

details

+

dimensions

+
    +
  • cover: 5" x 7"
    • +
  • pages: 4 1/2" x 6 5/8"
    • +
+

coloration

+
    +
  • cover: bright and dark blue, brown
    • +
  • endpapers: n/a
    • +
+

pages

+
    +
  • Fabriano cards
    • +
  • 42 pages
    • +
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/booby-congrats-on-the-top-surgery/index.html b/_site/booby-congrats-on-the-top-surgery/index.html new file mode 100644 index 0000000..caffc9f --- /dev/null +++ b/_site/booby-congrats-on-the-top-surgery/index.html @@ -0,0 +1,1277 @@ + + + + + + + booby (congrats on the top surgery) | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

booby (congrats on the top surgery)

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A landscape-oriented white card with a two-color print of a blue-footed booby. + + +

cheeky lil congrats on the top surgery card :D

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/bottom-growth/index.html b/_site/bottom-growth/index.html new file mode 100644 index 0000000..c3d6924 --- /dev/null +++ b/_site/bottom-growth/index.html @@ -0,0 +1,1272 @@ + + + + + + + bottom growth | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

bottom growth

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + 4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac. + + +

Celebration of testosterone-driven bottom growth. Submitted for T! the Zine.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/bowtie/index.html b/_site/bowtie/index.html new file mode 100644 index 0000000..1e651a5 --- /dev/null +++ b/_site/bowtie/index.html @@ -0,0 +1,1267 @@ + + + + + + + bowtie | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

bowtie

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A black leather bow tie with black stitching. + + +

Handstitched leather bowtie with standard clasp.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/boypussy/index.html b/_site/boypussy/index.html new file mode 100644 index 0000000..5397a49 --- /dev/null +++ b/_site/boypussy/index.html @@ -0,0 +1,1294 @@ + + + + + + + boypussy | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

boypussy

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + + +

To order this as a shirt, please fill out the order form (Sep 2024: no longer taking orders via this method).

+

details

+

dimensions

+

3" x 8"

+

coloration

+

default: pink

+

available as

+

patch, print, greeting card, sticker, shirt, pin

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/brookes-collar/index.html b/_site/brookes-collar/index.html new file mode 100644 index 0000000..5514eb6 --- /dev/null +++ b/_site/brookes-collar/index.html @@ -0,0 +1,1267 @@ + + + + + + + brooke&#39;s collar | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

brooke's collar

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + + +

3/4" wide collar with stainless/nickel fittings.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/brookes-cuff-bracelets/index.html b/_site/brookes-cuff-bracelets/index.html new file mode 100644 index 0000000..041e17a --- /dev/null +++ b/_site/brookes-cuff-bracelets/index.html @@ -0,0 +1,1267 @@ + + + + + + + brooke&#39;s cuff bracelets | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

brooke's cuff bracelets

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Olive green leather cuffs with silver spikes and a shearling lining. + + +

To match brooke's collar.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/brookes-notebook/index.html b/_site/brookes-notebook/index.html new file mode 100644 index 0000000..82e6c8b --- /dev/null +++ b/_site/brookes-notebook/index.html @@ -0,0 +1,1282 @@ + + + + + + + brooke&#39;s notebook | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

brooke's notebook

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + + +

A collage book full of different paper, art, and more.

+

details

+

coloration

+
    +
  • cover: pale green on one side, dark purple on the other, with a slightly reflective gold spine
    • +
  • endpapers: collaged papers in green and purple flowery/natural themes
    • +
+

pages

+
    +
  • varies. coloring pages, handmade paper, decorative paper, stamped pages, and more
    • +
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/brookes-scarf/index.html b/_site/brookes-scarf/index.html new file mode 100644 index 0000000..8bf3e8d --- /dev/null +++ b/_site/brookes-scarf/index.html @@ -0,0 +1,1274 @@ + + + + + + + brooke&#39;s scarf | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

brooke's scarf

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + knit +
    • + +
+ +
+ + + A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes. + + +

pattern

+

Open Air Wrap by Purl Soho

+

yarns

+
    +
  • Hedgehog Fibres Kidsilk Lace in Goblin
    • +
  • ITO Sensai in Pale Blue
    • +
  • Rowan Kidsilk Haze in Mineral
    • +
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/brookes-socks/index.html b/_site/brookes-socks/index.html new file mode 100644 index 0000000..09980a4 --- /dev/null +++ b/_site/brookes-socks/index.html @@ -0,0 +1,1267 @@ + + + + + + + brooke&#39;s socks | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

brooke's socks

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + knit +
    • + +
+ +
+ + + Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray. + + +

My second pair of socks, knit for my partner. They use Schoppel-Wolle Das Paar yarn in the colorway Fruhjahrsputz / Spring Cleaning. This yarn is designed to produce identical striping for each sock, and it very nearly did, with only a tiny discrepancy notable as I got to the toes.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/brookes-suspenders/index.html b/_site/brookes-suspenders/index.html new file mode 100644 index 0000000..091b32d --- /dev/null +++ b/_site/brookes-suspenders/index.html @@ -0,0 +1,1267 @@ + + + + + + + brooke&#39;s suspenders | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

brooke's suspenders

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + a two image collage showing the front and back of a person, neck to waist. she's wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back. + + +

for our 3 year anniversary :)

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/brown-creeper/index.html b/_site/brown-creeper/index.html new file mode 100644 index 0000000..c6a814a --- /dev/null +++ b/_site/brown-creeper/index.html @@ -0,0 +1,1268 @@ + + + + + + + brown creeper | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

brown creeper

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + 2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk. + + +

Created for Stanza 2024, a show highlighting nonbinary artists and poets.

+

My art was inspired by the fantastic poem "A blurred arboreal" by Lore Kahuapāʻani.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/butch-hands-pattern/index.html b/_site/butch-hands-pattern/index.html new file mode 100644 index 0000000..6cd7c0f --- /dev/null +++ b/_site/butch-hands-pattern/index.html @@ -0,0 +1,1349 @@ + + + + + + + butch hands pattern | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

butch hands pattern

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Hands wearing a pair of pink and grey gloves with convertable mitten tops. + + +

This pattern is a Work in Progress and will be updated with more information as I make a second pair of these.

+

Authorship and attribution

+
    +
  • Created: 12 March 2021
    • +
  • Last updated: 13 February 2023
    • +
+

This pattern was built on the Podster Gloves pattern by Glenna C. on Ravelry. I highly recommend reading and following that pattern to fill in gaps with this one.

+

Materials and tools

+
    +
  • bulky yarn
    • +
  • fingering yarn
    • +
  • Needles: size 8 DPNs, size 1.5 DPNs
    • +
+

Outline

+

These gloves are built in two parts: bulky yarn section, then fingering. First, with bulky yarn and larger needles, the ribbed cuff is knit in the round. From the cuff we build the back of the hand by working a portion of the stitches flat in stockinette. The back of the hand then forms the mitten top by making additional stitches and joining to work in the round again, then knitting until a taper and grafting the ends with Kitchener stitch.

+

With fingering yarn and smaller needles, we work from the leftover cuff stitches up to build the palm, using decreases to connect the edges of the bulky and fingering sections. A thumb gusset is built with increases, then put onto waste yarn to work later. When the palm is knit to the point it aligns with the start of the mitten top, we pick up stitches from the inside edge of the mitten top and join to knit the rest of the hand and fingers in the round. Finally, we split off fingers and work each separately, including returning to finish the thumb.

+

Directions

+

Cuff

+

With larger needles and bulky yarn, CO 28 (N) stitches and join to work in the round, placing a BOR marker. Work in k1p1 rib or your preferred rib until desired length of cuff is reached, then stop at BOR.

+

Back of hand

+

Remove BOR marker. Turn to work WS.

+

p15 (N/2 + 1) stitches. Place a locking stitch marker into the first and last stitches of this row for a reference point later. Turn to work RS.

+

Back of hand repeat:

+
    +
  • RS: k15
    • +
  • WS: p15
    • +
+

Repeat until work sits just below the knuckles, ending with a RS row.

+

Thread a piece of waste yarn through all back of hand stitches. This is used as a reference point later to pick up stitches for the hand.

+

Mitten top

+

At the end of a RS row, place a BOR marker, then make 13 (N/2 -1) stitches using the backwards loop cast on or your preferred method. Join to work in the round.

+

Establish a ribbed cuff on the palm side of the mitten top while leaving the back of the hand in stockinette:

+
    +
  • (k1, p1) x7, k1 (15 stitches in rib)
    • +
  • k13
    • +
+

Repeat for 4 rows or your desired length.

+

Knit in stockinette until work is about level with the end of the pinky finger.

+

Mitten top decreases:

+
    +
  • Row 1: (k1, ssk, k7, k2tog, k1) x2 (4 stitches decreased, 22 stitches remaining)
    • +
  • Row 2: k all stitches
    • +
  • Row 3: (k1, ssk, k5, k2tog, k1) x2 (4 stitches decreased, 18 stitches remaining)
    • +
  • Row 4: k all stitches
    • +
  • Row 5: (k1, ssk, k3, k2tog, k1) x2 (4 stitches decreased, 14 stitches remaining)
    • +
+

Place first 7 stitches onto one needle and second 7 stitches on to another. Graft together using Kitchener stitch or your preferred method.

+

You can alternately begin the decreases on the pinky side of the hand earlier than on the pointer side - this will make the mitten top fit the hand closer.

+

Establishing the palm

+

You will now start to work with the other stitches left by the cuff, on the RS. Use smaller needles and fingering weight yarn.

+

Start by making 1 from the yarn between the back of hand (BOH) stitches and your first stitch. Then kfb (or your preferred increase) across all remaining cuff stitches. Make 1 more stitch from the yarn between your stitches and the BOH. You should have 28 (N) stitches.

+

At the end of your RS row, pick up the selvedge stich below the stitch we marked earlier. Then turn your work.

+

k2tog - the selvedge stitch and your last stitch. purl across to the last stitch in the row, then ssk that stitch together with, again, the selvedge stitch below the marked stitch. Turn your work.

+

Palm repeat:

+
    +
  • RS: sl1 wyif, knit to last stitch, sl1 wyif, pick up next selvedge stitch
    • +
  • WS: k2tog (selvedge stitch and last stitch), purl to last stitch, ssk (last stitch and picked up selvedge stitch)
    • +
+

You only need to do this one or two times before starting the thumb gusset.

+

Thumb gusset

+

I diverge slightly from the Podster Gloves pattern here in that there is only one line of increases going up this thumb, and so we increase more frequently.

+

Follow right or left hand instructions accordingly until you have added 16-20 stitches depending on thumb size.

+

Right hand thumb

+
    +
  • RS: sl1 wyif, k2, knit all added gusset stitches, m1R, knit to end according to Palm
    • +
  • WS: follow Palm instructions
    • +
+

If you would like to place a marker for the increases, I recommend setting that up as follows:

+
    +
  • RS: sl1 wyif, k2, [knit 0 gusset stitches,] m1R, k1, place marker, ...
    • +
+

and then on future RS:

+
    +
  • RS: sl1 wyif, knit to one stitch before marker, m1R, k1, slip marker, ...
    • +
+

This ensures that you are not doing your make ones with a marker in the way. But I generally don't use the marker and just knit all the "new" stitches before doing the m1R.

+

Left hand thumb

+

To be continued...

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/chanterelle/index.html b/_site/chanterelle/index.html new file mode 100644 index 0000000..ec3bdbb --- /dev/null +++ b/_site/chanterelle/index.html @@ -0,0 +1,1279 @@ + + + + + + + chanterelle | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

chanterelle

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + + +

Hand carved stamp based on a photo of chanterelle mushrooms.

+

details

+

dimensions

+

about 2" square

+

coloration

+

default: 2-tone yellow

+

available as

+

patch, print, greeting card

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/charlie-the-alpaca-handspun/index.html b/_site/charlie-the-alpaca-handspun/index.html new file mode 100644 index 0000000..a481f46 --- /dev/null +++ b/_site/charlie-the-alpaca-handspun/index.html @@ -0,0 +1,1267 @@ + + + + + + + charlie the alpaca handspun | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

charlie the alpaca handspun

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + yarn +
    • + +
+ +
+ + + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight + + +

Fiber from Circle R Ranch. 100% alpaca, from Charlie the alpaca.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/circle-bag/index.html b/_site/circle-bag/index.html new file mode 100644 index 0000000..aee31b3 --- /dev/null +++ b/_site/circle-bag/index.html @@ -0,0 +1,1267 @@ + + + + + + + circle bag | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

circle bag

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap. + + +

it's roumd

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/colophon/index.html b/_site/colophon/index.html new file mode 100644 index 0000000..dfe9cff --- /dev/null +++ b/_site/colophon/index.html @@ -0,0 +1,1017 @@ + + + + + + + colophon | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + +

colophon

+ +

This is v2 of my personal website, build with Eleventy v3.1.2. It's been hand-coded from the ground up.

+

v1 of this site began in 2022 and was based on Millennial, a minimalist Jekyll theme for running a blog or publication by Paul Le.

+

The fonts are Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :)

+

Thank you to some lovely friends for their feedback and help with the site! You should hire them. Yes, you.

+
    +
  • Lenny, especially for their HTML/CSS and accessibility expertise
    • +
  • Shir
    • +
+

You can find the accessibility statement here. You can also explore the sitemap. If you'd like, you can view the site's palette or the style overview.

+

This site is created without the use of generative AI.

+ + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/coming-out/index.html b/_site/coming-out/index.html new file mode 100644 index 0000000..09aaf86 --- /dev/null +++ b/_site/coming-out/index.html @@ -0,0 +1,1283 @@ + + + + + + + coming out | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

coming out

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A card and print in the same design - a chick and a broken eggshell, and a simple font reading 'congrats on coming out of your shell' + + +

details

+

dimensions

+

3" x 5"

+

coloration

+

default: black

+

available as

+

patch, print, greeting card

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/comparing-text-editors/index.html b/_site/comparing-text-editors/index.html new file mode 100644 index 0000000..7ac9c9f --- /dev/null +++ b/_site/comparing-text-editors/index.html @@ -0,0 +1,1489 @@ + + + + + + + comparing text editors | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

comparing text editors

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Image unrelated to post. Close up on a horsetail plant's stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint. + + +

I'm fucking depressed. No, not like mental health depressed (okay, look, that too, but that's not relevant here). Looking to switch text editors, I reviewed 6 different options...and what I found didn't thrill me.

+
+

this post contains comparison tables that are far more viewable on desktop/tablet

+
+

the editors

+

the editors I reviewed, in no particular order, are:

+
    +
  • VSCode (my current daily driver which I've been wanting to leave behind for a while now)
    • +
  • Zed (an editor I've been tentatively interested in)
    • +
  • Kate (recommended to me semi-recently on the fediverse, but one I quickly wrote off at the time because of clunkiness)
    • +
  • Lapce (recommended via fedi)
    • +
  • Pulsar (a fork of the discontinued Atom editor, recommended again by fedi, in the course of this review)
    • +
  • and finally, Sublime Text (my daily driver back in college)
    • +
+

the qualities

+

I reviewed looking for 5 major functional qualities that I considered to be my most useful or heavily-used features:

+
    +
  • .editorconfig support
    • +
  • find and replace with regex support
    • +
  • WSL support (including, because apparently this is an issue, the ability to delete files from inside the editor) (this is the highest priority - I do all work in WSL)
    • +
  • multi-edit (e.g. ability to select multiple instances of a word and edit them all) (this is the most discardable functionality, as it can be replaced with find-and-replace)
    • +
  • markdown preview
    • +
+

3 less important, but preferred, aesthetic qualities:

+
    +
  • clean, modern UI
    • +
  • file type icons
    • +
  • ability to customize the color scheme (ideally per-color settings, but that's uncommon)
    • +
+

and finally, 3 ethical and trustworthiness qualities:

+
    +
  • no LLM features
    • +
  • for products with LLM features: single setting to turn off LLM features
    • +
  • trust that product longevity will not be affected by LLM-generated code
    • +
+

(in other words: no LLMs).

+

the comparison charts

+

functional qualities

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
.editorconfigfind-and-replaceWSLmulti-edit.md preview
VSCodeyes[1]yesyes[1]yesyes
Zedyes[1]yesyesyesyes
Kateyesyesno[2]yesno
Lapcenoyesno[3]yesno
Pulsarnoyesno[3]yesyes
Sublime Textyesyesno[3][4]yesno[5]
+

[1] extension needed: VSCode .editorconfig, VSCode WSL, Zed .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.

+

[3] opening the project worked fine, but I couldn't delete files. In Sublime Text's case, they were deleted but still shown in the file view.

+

[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 and 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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UIfile iconscolor scheme
VSCodeyesyesyes[1]
Zedyesyesyes[2]
Katenoyesyes[2]
Lapceyesnoyes[3]
Pulsaryesnoyes[1]
Sublime Textyesyesyes
+

[1] several color schemes available. Further extensions available.

+

[2] several color schemes available.

+

[3] only light and dark schemes available. Further plugins available.

+

ethical qualities

+

this is my best guess based on searching online and reviewing the settings; it's kind of hard to really confirm these things. I am judging the last quality - whether or not the devs are using LLMs - based on the existence of prompts directories in the projects' repositories.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
no LLM featuresLLM kill switchno LLM code
VSCodenonono[1]
Zednoyesno[2]
Kateyesn/ayes
Lapceyesn/ayes
Pulsaryesn/ayes[3]
Sublime Textyesn/aunknown[4]
+

[1] prompts directory

+

[2] looks like at current LLMs are only used for documentation

+

[3] it's been discussed and sounds currently up for debate: Pulsar, Sublime Text

+

[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.

+

summary

+

I'll be honest, I just don't know. The functionality is not something I can easily compromise on. TBH, I figured I had pretty basic needs as a developer, but it seems that's not the case! The only editors that meet my functionality needs across the board are also the worst offenders on the LLM front.

+

at the end of the day, I might just have to keep looking... but regardless, I wanted to publish what I found to help anyone else with similar needs.

+

corrections and edits

+
    +
  • Kate does have multi-edit
    • +
  • Lapce has plugins for further color schemes
    • +
  • VSCode WSL support requires an extension
    • +
  • Zed .editorconfig support requires an extension
    • +
+

WSL2 and Linux GUIs

+

I learned that WSL2 can support 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.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/congrats-on-the-autism-adhd/index.html b/_site/congrats-on-the-autism-adhd/index.html new file mode 100644 index 0000000..919827b --- /dev/null +++ b/_site/congrats-on-the-autism-adhd/index.html @@ -0,0 +1,1280 @@ + + + + + + + congrats on the autism/adhd | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

congrats on the autism/adhd

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + 4 greeting cards propped up on a keyboard. On the right hand side, two cards read 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows. + + +

Hand carved modular stamps to congratulate your friend or yourself on your fantastic neurodivergence.

+

As these are modular, I can expand the range of terms offered if there is demand for it.

+

details

+

dimensions

+

roughly 4" x 3"

+

coloration

+

default: onyx black

+

available as

+

patch, print, greeting card

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/congrats-on-the-gay/index.html b/_site/congrats-on-the-gay/index.html new file mode 100644 index 0000000..3e6b072 --- /dev/null +++ b/_site/congrats-on-the-gay/index.html @@ -0,0 +1,1286 @@ + + + + + + + congrats on the gay | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

congrats on the gay

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + + +

A variation on my congrats on the autism/adhd cards.

+

Hand carved modular stamps to congratulate your friend or yourself on your fantastic gayness.

+

As these are modular, I can expand the range of terms offered if there is demand for it.

+

details

+

dimensions

+

roughly 4" x 3"

+

coloration

+

default: onyx black with rainbow lettering on 'Gay!'

+

available as

+

print, greeting card

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/contact/index.html b/_site/contact/index.html new file mode 100644 index 0000000..53ced3a --- /dev/null +++ b/_site/contact/index.html @@ -0,0 +1,1100 @@ + + + + + + + contact | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + +

contact

+ +

contact me

+
+
signal
+
inherentlee.13
+
email
+
lee dot cattarin at gmail dot com
+
text (no phone calls!)
+
seven seven four, two four nine, zero five eight six
+
discord
+
inherentlee
+
snail mail
+
message me for address!
+
guestbook?
+
guestbook.
+
+

socials

+
+
the fediverse/mastodon
+
@inherentlee@flipping.rocks and @inherentlee@weirder.earth (weirder.earth largely unused)
+
rss
+
feed
+
codeberg
+
inherentlee
+
github
+
lee0c
+
ravelry
+
inherentlee
+
twitch
+
inherentlee
+
+
+

shops

+

if pricing is an issue for you, reach out and we can work out sliding scale options - or an art trade!

+
+
square
+
Riverside Refuge Studio
+
faire (wholesale)
+
Riverside Refuge Studio
+
kofi (now the home of FediZineFest 2025 and Rescue Trans Rescue)
+
inherentlee
+
+

payment methods

+
+
venmo
+
lee-cattarin
+
paypal
+
leecattarin
+
+
+

in physical stores!

+

Colorado

+

Denver

+ +

Oregon

+

Beaverton

+ +

Washington

+

Port Orchard

+
    +
  • Aphrodisia Boutique: stickers, pins, cards, prints, leather goods (impact toys, cuffs, potentially harnesses)
    • +
+

Seattle

+ +

Tacoma

+
    +
  • Anna's Anomalies (Sanford and Sons Antiques, 743 Broadway, Tacoma, WA, 98402): stickers, pins, cards, prints
    • +
+

Vashon

+ +
+

not online or online unreliably

+
+
linkedin
+
Lee Cattarin
+
instagram
+
inherentlee
+
facebook
+
Lee Cattarin
+
twitter
+
inherentlee
+
+ + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/coral-reef-handspun/index.html b/_site/coral-reef-handspun/index.html new file mode 100644 index 0000000..908b8e4 --- /dev/null +++ b/_site/coral-reef-handspun/index.html @@ -0,0 +1,1267 @@ + + + + + + + coral reef handspun | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

coral reef handspun

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + yarn +
    • + +
+ +
+ + + 2 skeins, one large and one small, of a heathered grey yarn with hints of blue and orange in about a sport or DK weight. + + +

Fiber from Jakira Farms in Coral Reef colorway. 100% merino.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/crow/index.html b/_site/crow/index.html new file mode 100644 index 0000000..360bbff --- /dev/null +++ b/_site/crow/index.html @@ -0,0 +1,1266 @@ + + + + + + + crow | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

crow

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + a block print in dark indigo ink on white paper depicting a perched crow looking over one shoulder. one side of the crow is lit with fine feather detail, and the other side is almost entirely in shadow. + + + +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/designing-a-bag/index.html b/_site/designing-a-bag/index.html new file mode 100644 index 0000000..7a4df6a --- /dev/null +++ b/_site/designing-a-bag/index.html @@ -0,0 +1,1283 @@ + + + + + + + designing a bag | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

designing a bag

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don't slide out. + + +

begin by testing

+

the first step in any design is small tests. For leatherwork, this usually means working with paper - cheaper than leather, but with some of the same inflexibility.

+

build up from basic facts

+

my grommets, laid out on paper, spaced out cleanly at 1/2" away from edges and 1" apart. My tablet is ~10"x8". I started with these facts.

+

template, template, template

+

don't measure out the same spacing any more than you have to. Templating is your friend for both ease of use and regularity.

+

mind the order of your work

+

the corners should be stitched before lacing in order to get into tight spaces easily. Grommets are set most easily before the work is 3-dimensional. It's cleanest to cut before grommets are installed so as to work on a smooth and level surface. Hold all this in your mind when choosing your next move, and ensure you don't step on your own toes.

+

consider v2

+

even if you won't be making one, what would you do differently? Where does your design fail? Where does it succeed?

+

take notes

+

easier said than done.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/domain-and-site-setup/index.html b/_site/domain-and-site-setup/index.html new file mode 100644 index 0000000..7ebefc8 --- /dev/null +++ b/_site/domain-and-site-setup/index.html @@ -0,0 +1,1318 @@ + + + + + + + domain and site setup | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

domain and site setup

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass. + + +

This was written as a skill share for the Artisans Cooperative blog.

+

In this writeup, I will walk through one (of many!) ways to set up and utilize a custom domain and website.

+

Audience

+

This is aimed at a non-technical audience, but my own perspective is technical and some of the articles I link to will get technical. Because of this, it's possible that I will miss things that you have questions on - please reach out to me and ask questions!

+

Outcome

+

After following this writeup, you should have:

+
    +
  • a domain name: domain names identify internet locations with an easier-to-remember string than an IP (Internet Protocol) address.
    • +
  • a static website: static means that the site has fixed, pre-built assets that remain the same regardless of who is viewing them (or the time of day, or the weather, or...). A static site can still vary widely in complexity! I created my static site using GitHub Pages, a free offering that requires some technical skill to configure, but I'll mention some alternate routes that require less technical know-how, including simply letting your domain name point to an existing site you don't control - like your Artisans Cooperative storefront.
    • +
+

This writeup will not cover every possible route to getting your own home on the web - there's far too many options out there. It's just meant to give you a starting point and a few ideas.

+

Domain name

+

Top-level domains (TLDs)

+

I started planning my domain name by reviewing the list of TLDs - things like ".org" or ".com". ICANN (the Internet Corporation for Assigned Names and Numbers) maintains a list of all TLDs - it's long! Reviewing this list can help you think of potential domain names. You can also look at a list like this one Wikipedia maintains - it has more detail and can tell you if a specific TLD is for a given country, reserved for specific uses, or (what you probably want) for general use.

+

Personally, I narrowed it down to two - ".art" or ".gay". From there, it's off to the domain registrars! These are companies that offer domain names for sale. Here's an article from Forbes Advisor reviewing some of the major names in the space. I use Namecheap, but don't let that bias you. Look around at pricing (pay attention to the rate for year 2 onward - domain registrars often offer super low year 1 rates to hook customers) and consider other features, like support availability.

+

Decide on a full domain name

+

Narrowing down a TLD isn't the only choice - you also need to decide what goes in front of that! Some things to think about:

+
    +
  • memorable: Shorter domain names and domain names with clearly recognizable words are helpful for both you and your audience. If you're anything like me, your site might end up as a repository for all sorts of knowledge and references, and being able to quickly type up or relay a URL is a plus.
    • +
  • distinct: Is it unique? Avoid domains that are only a character off from more commonly visited websites or that sound particularly generic.
    • +
  • constant: While you can change domains frequently if you wish (and might want to if you're tight on cash - again, year 1 offers are cheap!), reprinting all your marketing materials is no fun. Aim to pick something that has staying power, like your own or your business' name.
    • +
+

In my case, I went with leecat.art. The ".art" TLD was cheaper than the ".gay" option long-term, and I shortened my full, somewhat hard to spell name to a quick two syllables, 3 characters each.

+

Buy your domain

+

Pick a domain registrar that offers the domain name you want, and pay (usually for a year). Next, we'll talk about some uses for this domain name.

+

Using your domain name

+

Option 1: simple redirect

+

The easiest way to utilize a domain name is to have it redirect to another URL. I'm not going to go through how to set up a domain redirect with every possible provider, but if you search up "[your domain registrar] redirect" you should find useful documentation.

+ +

Link trees (popularized by linktree) are a single page with a collection of links maintained by an owner. You can use linktree or check out this WIRED article with alternatives. Some are paid, usually small monthly fees, and some are free.

+

Option 2: static site with GitHub Pages

+

Wait, what's GitHub?

+

GitHub - wait, no.

+

First, let's talk about git. Git is a version control system, a type of software that manages changes to a set of files. This allows the owner(s) of those files to do things like revert changes or compare current and historical versions of files. It also allows for multiple people to work on the same shared file repository without creating conflicts.

+

GitHub is a centralized source for many, many git repositories. It essentially allows you to back up both your code and the log of all changes to the cloud (someone else's computer). It also supports GitHub Pages, a free way to host a static site of your own.

+

To get started with GitHub, you'll first need to create an account if you don't have one. If you want to learn some GitHub basics, the GitHub team has created this handy introduction to GitHub that walks you through some basic git and GitHub concepts.

+

Now that we know what GitHub is...

+

The GitHub documentation is pretty thorough, so let's point to some articles over there.

+ + +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/double-bill-pocket-bifold/index.html b/_site/double-bill-pocket-bifold/index.html new file mode 100644 index 0000000..5f33dcd --- /dev/null +++ b/_site/double-bill-pocket-bifold/index.html @@ -0,0 +1,1267 @@ + + + + + + + double bill pocket bifold | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

double bill pocket bifold

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + + +

continuing to iterate on bifolds. made of a variety of discount leather with various imperfections. fully hand-stitched.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/dragon-mask/index.html b/_site/dragon-mask/index.html new file mode 100644 index 0000000..8fdcdd3 --- /dev/null +++ b/_site/dragon-mask/index.html @@ -0,0 +1,1272 @@ + + + + + + + dragon mask | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

dragon mask

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it. + + +

pattern by PaintYee

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/dyeing-fiber/index.html b/_site/dyeing-fiber/index.html new file mode 100644 index 0000000..9348eab --- /dev/null +++ b/_site/dyeing-fiber/index.html @@ -0,0 +1,1267 @@ + + + + + + + dyeing fiber | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

dyeing fiber

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + yarn +
    • + +
+ +
+ + + 4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold. + + +

hand-dyed with acid dyes

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/ecommerce-options/index.html b/_site/ecommerce-options/index.html new file mode 100644 index 0000000..2495bab --- /dev/null +++ b/_site/ecommerce-options/index.html @@ -0,0 +1,1299 @@ + + + + + + + ecommerce options | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

ecommerce options

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
+ + + Image unrelated to post. A loon rearing up with eir wings spread on a calm lake. + + +

Artisans Cooperative

+
    +
  • using this. clunky. variants are unintuitive.
    • +
  • allows me to set alt text for images.
    • +
  • points for being a cooperative model
    • +
+

bigCartel

+

Etsy

+
    +
  • fuck etsy mxn
    • +
+

Kofi

+
    +
  • using this currently, but it has a strict no-NSFW policy.
    • +
+

nopCommerce

+
    +
  • open source! hosting is a bit of a pain
    • +
  • has an Azure hosting option that was easy enough to spin up
    • +
+

PrestaShop

+
    +
  • open source! hosting is a bit of a pain
    • +
+

Shopify

+
    +
  • $30/month minimum after a few free months.
    • +
+

Square

+
    +
  • this is my current preference.
    • +
  • has a free tier! pay per transaction rather than monthly.
    • +
  • only irritation point so far: managing shipping myself actually costs me money? there's a fee for not using Square's integrated shipping.
    • +
  • does not support alt text for background images or product images, which, wtf
    • +
  • keyboard navigation of the main menu fails when there are nested categories below any menu item - focus lands on each category without expanding the menu item
    • +
  • support blows
    • +
  • legal name only policy apparently which ewwwww
    • +
+

WooCommerce

+
    +
  • WordPress only.
    • +
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/eight-pocket-bifold/index.html b/_site/eight-pocket-bifold/index.html new file mode 100644 index 0000000..8f587a1 --- /dev/null +++ b/_site/eight-pocket-bifold/index.html @@ -0,0 +1,1267 @@ + + + + + + + eight pocket bifold | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

eight pocket bifold

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole. + + +

a slight change to the first wallet design. made of a variety of discount leather with various imperfections. fully hand-stitched.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/euphorbia/index.html b/_site/euphorbia/index.html new file mode 100644 index 0000000..02b1244 --- /dev/null +++ b/_site/euphorbia/index.html @@ -0,0 +1,1267 @@ + + + + + + + euphorbia | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

euphorbia

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers. + + +

I am euphorbic.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/fat-raccoon/index.html b/_site/fat-raccoon/index.html new file mode 100644 index 0000000..002a1bc --- /dev/null +++ b/_site/fat-raccoon/index.html @@ -0,0 +1,1284 @@ + + + + + + + fat raccoon | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

fat raccoon

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + + +

A friendly neighborhood visitor.

+

details

+

dimensions

+

5" x 6"

+

coloration

+

default: black

+

available as

+

patch, print, greeting card, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/fd-signifier-and-oppositional-sexism/index.html b/_site/fd-signifier-and-oppositional-sexism/index.html new file mode 100644 index 0000000..b51a446 --- /dev/null +++ b/_site/fd-signifier-and-oppositional-sexism/index.html @@ -0,0 +1,1301 @@ + + + + + + + fd signifier &amp; oppositional sexism | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

fd signifier & oppositional sexism

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Image unrelated to post. A mama sheep with two babies curled up next to her in a grassy field. + + +

This is in response to an F.D Signifier video, How to get RICH off weak men! (go follow him!). It is written as a response video and the script has not been changed to fit this format.

+

As much as it's a response video, I think the content should also stand on its own.

+
+

Recently I watched an FD Signifier video that I'll link in the description, currently titled "How to get rich off weak men"

+

Now, overall, fucking excellent, you're great FD, you're very much someone I look up to. So let's ground things by stating I don't say any of this to disagree or denigrate any of your points, but rather to build on them.

+

oppositional sexism

+

what we're going to start and end with today is a concept called oppositional sexism. This comes from Julia Serano writing in Whipping Girl.

+

In addition to traditional sexism, where men are better than women and masculinity better than femininity, Serano argues that we also experience and propagate oppositional sexism, where men are seen as women's opposites. from Whipping Girl:

+
+

the belief that female and male are rigid, mutually exclusive categories, each possessing a unique and nonoverlapping set of attributes, aptitudes, abilities, and desires

+
+

oppositional sexism positions men as opposed to women, rather than understanding both groups as heavily overlapping in characteristics, abilities, interests, physicality, etc.

+

where analysis based in traditional sexism takes the gender binary as fact and analyzes how we move within it, oppositional sexism takes aim at the gender binary itself and looks at the ways that it is constructed.

+

how we socialize boys

+

now what does this have to do with FD's video? Well, I would characterize his analysis as grounded in, among many other things, an understanding of traditional sexism. He talks about the ways boys learn about maleness and masculinity and its dominence over femaleness and femininity, but never questions the existence of the category "boy" in opposition to "girl".

+

And I think we have to! we can't just examine misogyny and toxic masculinity while unconsciously accepting the creation of binary gender, because the creation of and pressure on binary gender helps create misogyny and toxic masculinity. When boys are continuously told they are wildly different from girls, when they are continuously split up and separated, when girls are portrayed as almost a different species, we invite unhealthy attitudes about women and girls.

+

this is of course hypothetical - we live in a society and can't escape it - but if instead we stressed that all children are human, that they are part of a unified group, i can't help but imagine that we would have much healthier attitudes towards sex and dating.

+

how this affects us all

+

now, obviously, the deconstruction of misogyny is enough reason to use this for analysis. we want to minimize misogyny and toxic masculinity, and this supports that goal. but let's also talk about the way bioessentialism and binary gender roles foster other biases.

+

transphobia and particularly anti-nonbinary sentiments are probably the most obvious ones propped up by this, but there's also:

+
    +
  • +

    homophobia or biphobia: when we view men and women as two discrete and opposing groups, there's a large difference between a male-female relationship and a male-male or female-female one.

    +
    • +
  • +

    intersex erasure and discrimination: the coercive and corrective sexing of intersex infants, up to and including nonconsensual surgical modification, should be the obvious example, but let's also consider the ways that intersex people are erased by the gender binary. Intersex people are not uncommon, with various estimates ranging from one in two thousand to one in about sixty. But the structure of the gender binary must insist that they are essentially one in a million. it makes no room for them - they must be outliers.

    +
    • +
+

and, interestingly,

+
    +
  • racism: the creation of distinct and biologically separate groups from a spectrum of human experience, and the clear statement that these groups must be unequal, can prime people to accept further distinctions between humans as biologically inherent. anecdotally, while I was forming up this video, friends reported seeing manosphere or MRA types fall down this exact pipeline.
    • +
+

Now, I want to be clear: I am not claiming that misogyny or the gender binary is the root of all other biases. I think the world is far more complex than that. But I do believe that the gender binary, and more broadly, a binarist mindset, is a fertile breeding ground for other biases.

+

end notes

+

going forward, I want you to have the concept of oppositional sexism in your analysis toolbox. I want you to think critically about the way that the gender binary is not a natural outgrowth of humanity, but rather created and enforced. And I want you to question and push back against the way that you - as a man or woman - see yourself in opposition to, rather than in alliance with, women or men (nonbinary people, you get a pass here, I figure you're already thinking about this).

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/fedizinefest-2025/index.html b/_site/fedizinefest-2025/index.html new file mode 100644 index 0000000..dd0d5dd --- /dev/null +++ b/_site/fedizinefest-2025/index.html @@ -0,0 +1,1267 @@ + + + + + + + fediZineFest 2025 | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

fediZineFest 2025

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + zine +
    • + +
+ +
+ + + A logo in purple, yellow, blue, and green. A piece of paper folded into 8 sections reads FEDI ZINE; it resembles the classic folding pattern of a simple 8-page zine made from printer paper. Next to it, a fully folded zine reads fest 2025. + + +

FediZineFest returns for its second year. Read more about it and sign up on the fediZineFest 2025 website.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/feed.xml b/_site/feed.xml new file mode 100644 index 0000000..a7d0d15 --- /dev/null +++ b/_site/feed.xml @@ -0,0 +1,144 @@ + + + hello hello + Lee Cattarin... on the internet! + + + 2026-02-19T21:09:51Z + https://leecat.art/ + + Lee Cattarin + lee.cattarin@gmail.com + + + screen reader optimizations + + 2026-02-19T21:09:51Z + https://leecat.art/screen-reader-optimizations/ + <h2 id="context">context</h2> +<p>recently, I've been working on a <a href="https://inherentlee.codeberg.page/spoonfairies/" target="_blank" rel="external">website for a project called spoonfairies</a>. On the providers page, we list a series of names along with their pronouns, location, and services offered. Visually, it looks like this:</p> +<p><img src="https://leecat.art/img/spoonfairies-provider.png" alt="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." loading="lazy" decoding="async" width="1000" height="147"></p> +<h2 id="pronouns">pronouns</h2> +<p>at first, all three pieces of information in the top row had no extra styling - it was just a line of text with the same color and size throughout. The location bit also didn't exist yet, so we're going to briefly ignore it. Screenreader testing (with NVDA, specifically) informed me that, when reading through a long list of providers, parentheses become <em>very</em> irritating. Imagine hearing the following:</p> +<blockquote> +<p>Lorem Ipsum left parentheses she slash her right parentheses web accessiblity webdev. Dolor Sit left parentheses they slash them right parentheses housecleaning. Amet Consectetur left parentheses he slash him right parentheses webdev spreadsheets software.</p> +</blockquote> +<p>...ad nauseam. Kinda irritating.</p> +<h3 id="the-fix">the fix</h3> +<p>put the pronouns in a span that provides special styling, and use <code>::before</code> and <code>::after</code> to apply parentheses.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/providers/lorem-ipsum<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Lorem Ipsum + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pronouns<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>she/her<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre> +<pre class="language-css"><code class="language-css"><span class="token selector">.pronouns::before</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"("</span> / <span class="token string">""</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> +<span class="token selector">.pronouns::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">")"</span> / <span class="token string">""</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p><strong>the slash is the magic there.</strong> The string before the slash indicates the visual content, and the string after the slash is the alternative text content. I went happily on my way.</p> +<p>plus, this is neat - now I can style the pronouns separately. Let's make them the standard text color rather than the link color, and a bit smaller, and a smidge opaque... nice.</p> +<h2 id="location">location</h2> +<p>ooh, time to implement locations! I did my same ol' trick.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/providers/lorem-ipsum<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Lorem Ipsum + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pronouns<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>she/her<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tacoma<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre> +<pre class="language-css"><code class="language-css"><span class="token selector">.location::before</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"📍"</span> / <span class="token string">"is based out of"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span></code></pre> +<p>I even added actual alternative text rather than an empty string to provide some context. Pronouns, I figured, could exist without much context, as it's pretty common for them to follow directly after names in introductions, but location isn't as much of a given.</p> +<p>again, style em up nice, more of a standard text look, right-aligned. Cool.</p> +<h2 id="a-bigger-problem-than-parentheses">a bigger problem than parentheses</h2> +<p>...then I did some screen reader testing. Which I should have done directly after the pronouns bit. Turns out, I wasn't thrilled with what the <code>&lt;span&gt;</code>s did.</p> +<p>at least with fairly default settings in NVDA, the <code>&lt;span&gt;</code>s broke up the way the link was read out. Suddenly, I was getting:</p> +<blockquote> +<p>visited link Lorem Ipsum visited link she slash her visited link Tacoma</p> +</blockquote> +<p>this is all one link, mind you. The <code>&lt;a&gt;</code> tag isn't broken into three links. But the <code>&lt;span&gt;</code>s apparently break up the screen reader output anyway (in NVDA, that's a continual caveat).</p> +<p>ooookay... what next?</p> +<h3 id="total-overhaul">total overhaul</h3> +<p>I moved away from my <code>content</code> approach entirely (well, I kept it around as a failsafe, but it's not running the show now). Instead, I switched over to an <code>aria-label</code> for the whole link.</p> +<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/providers/lorem-ipsum<span class="token punctuation">"</span></span> + <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Lorem Ipsum she/her is based out of Tacoma<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + Lorem Ipsum + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pronouns<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>she/her<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>location<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tacoma<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre> +<p>(technically, all this is templated to hell and back. I would hope that's obvious given I'm talking about <em>lists</em> of these entries.)</p> +<p>now, after more screen reader testing, it reads out smoothly. The <code>aria-label</code> precludes the actual link text and cleanly says what needs to be said, with nothing breaking up the text and the whole thing easily recognized as one link. <em>And</em> I've got my fancy styling. Sweet.</p> + + + + crow + + 2026-02-09T00:00:00Z + https://leecat.art/crow/ + + + + charlie the alpaca handspun + + 2026-02-05T00:00:00Z + https://leecat.art/charlie-the-alpaca-handspun/ + <p>Fiber from Circle R Ranch. 100% alpaca, from Charlie the alpaca.</p> + + + + ruby the alpaca handspun + + 2026-01-27T00:00:00Z + https://leecat.art/ruby-the-alpaca-handspun/ + <p>Fiber from Circle R Ranch. 100% alpaca, from Ruby the alpaca.</p> + + + + hand-dyed gold handspun + + 2026-01-24T00:00:00Z + https://leecat.art/hand-dyed-gold-handspun/ + <p>Fiber from <a href="https://paradisefibers.com" target="_blank" rel="external">Paradise Fibers</a>. 70% merino/30% nylon. Hand-dyed by me.</p> + + + + spinner's dream handspun + + 2026-01-18T00:00:00Z + https://leecat.art/spinners-dream-handspun/ + <p>Fiber from <a href="https://paradisefibers.com" target="_blank" rel="external">Paradise Fibers</a>. 40% merino/20% alpaca/20% camel/20% mulberry silk. Scrumptiously soft.</p> + + + + rambouillet handspun + + 2026-01-18T00:00:00Z + https://leecat.art/rambouillet-handspun/ + <p>Fiber from <a href="https://woolgatherings.com" target="_blank" rel="external">Woolgatherings</a>. 100% rambouillet. Hand-dyed!</p> + + + + fire & ice handspun + + 2026-01-18T00:00:00Z + https://leecat.art/fire-and-ice-handspun/ + <p>Fiber from <a href="https://www.etsy.com/shop/JakiraFarms" target="_blank" rel="external">Jakira Farms</a> in Fire &amp; Ice colorway. 100% merino.</p> + + + + dyeing fiber + + 2026-01-18T00:00:00Z + https://leecat.art/dyeing-fiber/ + <p>hand-dyed with acid dyes</p> + + + + coral reef handspun + + 2026-01-18T00:00:00Z + https://leecat.art/coral-reef-handspun/ + <p>Fiber from <a href="https://www.etsy.com/shop/JakiraFarms" target="_blank" rel="external">Jakira Farms</a> in Coral Reef colorway. 100% merino.</p> + + + \ No newline at end of file diff --git a/_site/fire-and-ice-handspun/index.html b/_site/fire-and-ice-handspun/index.html new file mode 100644 index 0000000..d26994f --- /dev/null +++ b/_site/fire-and-ice-handspun/index.html @@ -0,0 +1,1267 @@ + + + + + + + fire &amp; ice handspun | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

fire & ice handspun

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + yarn +
    • + +
+ +
+ + + 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + + +

Fiber from Jakira Farms in Fire & Ice colorway. 100% merino.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/fishhook-pride-keychains/index.html b/_site/fishhook-pride-keychains/index.html new file mode 100644 index 0000000..3991c15 --- /dev/null +++ b/_site/fishhook-pride-keychains/index.html @@ -0,0 +1,1272 @@ + + + + + + + fishhook pride keychains | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

fishhook pride keychains

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors. + + +

Available for lots of flags! Except the lesbian sunset flag because it's really hard to color match :(

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/five-of-them/index.html b/_site/five-of-them/index.html new file mode 100644 index 0000000..b009a0e --- /dev/null +++ b/_site/five-of-them/index.html @@ -0,0 +1,1279 @@ + + + + + + + five of them | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

five of them

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + + +

Photographed in the backyard.

+

details

+

dimensions

+

6" x 2.5"

+

coloration

+

default: green and brown

+

available as

+

patch, print, greeting card, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/fix-your-hearts/index.html b/_site/fix-your-hearts/index.html new file mode 100644 index 0000000..f38f1ae --- /dev/null +++ b/_site/fix-your-hearts/index.html @@ -0,0 +1,1266 @@ + + + + + + + fix your hearts | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

fix your hearts

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + + + +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/flatfish/index.html b/_site/flatfish/index.html new file mode 100644 index 0000000..43dc2c2 --- /dev/null +++ b/_site/flatfish/index.html @@ -0,0 +1,1279 @@ + + + + + + + flatfish | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

flatfish

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A print of a simple flatfish design inked in sepia. + + +

Hand carved stamp of a slightly goofy looking flatfish.

+

details

+

dimensions

+

about 2" around

+

coloration

+

default: sepia

+

available as

+

patch, print, greeting card

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/flicker/index.html b/_site/flicker/index.html new file mode 100644 index 0000000..c103014 --- /dev/null +++ b/_site/flicker/index.html @@ -0,0 +1,1284 @@ + + + + + + + flicker | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

flicker

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder). + + +

Hand carved set of stamps of a northern flicker, hungrily eyeing our bird feeder.

+

details

+

dimensions

+

roughly 6" square

+

coloration

+

default: black, sepia brown, and satin red

+

available as

+

print, greeting card, patch, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/flocked-notebook/index.html b/_site/flocked-notebook/index.html new file mode 100644 index 0000000..f54cf94 --- /dev/null +++ b/_site/flocked-notebook/index.html @@ -0,0 +1,1280 @@ + + + + + + + flocked notebook | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

flocked notebook

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + book +
    • + +
+ +
+ + + A two panel collage showing the cover and endpapers of a thick notebook. + + +

A landscape-oriented notebook with black paper and a fuzzy cover. yes. it's fuzzy.

+

details

+

dimensions

+

~ 4" x 6"

+

coloration

+
    +
  • cover: sky blue and fuzzy. there is a piece of yellow leather cord, part of the spine, across one end
    • +
  • endpapers: black background overlaid with a wavy silver grid
    • +
+

pages

+
    +
  • Strathmore? maybe? black mixed media paper
    • +
  • 60 pages
    • +
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/foldy-wallet-with-thumb-slide/index.html b/_site/foldy-wallet-with-thumb-slide/index.html new file mode 100644 index 0000000..742290e --- /dev/null +++ b/_site/foldy-wallet-with-thumb-slide/index.html @@ -0,0 +1,1267 @@ + + + + + + + foldy wallet with thumb slide | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

foldy wallet with thumb slide

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide. + + +

Designed for standard credit cards, not business cards.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/foldy-wallet/index.html b/_site/foldy-wallet/index.html new file mode 100644 index 0000000..4bfa02e --- /dev/null +++ b/_site/foldy-wallet/index.html @@ -0,0 +1,1267 @@ + + + + + + + foldy wallet | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

foldy wallet

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A four part collage showing a single piece of deep red leather folding up to become a card wallet. + + +

Single piece construction for easy care - just unfold/pull out the tabs!

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/fountain-pen-friendly-stationery/index.html b/_site/fountain-pen-friendly-stationery/index.html new file mode 100644 index 0000000..99ccb7f --- /dev/null +++ b/_site/fountain-pen-friendly-stationery/index.html @@ -0,0 +1,1282 @@ + + + + + + + fountain pen-friendly stationery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/foxgloves/index.html b/_site/foxgloves/index.html new file mode 100644 index 0000000..fb45451 --- /dev/null +++ b/_site/foxgloves/index.html @@ -0,0 +1,1283 @@ + + + + + + + foxgloves | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

foxgloves

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. + + +

details

+

dimensions

+

6" x 6"

+

coloration

+

default: green and pink

+

available as

+

patch, print, greeting card, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/1/index.html b/_site/gallery/1/index.html new file mode 100644 index 0000000..cd08a81 --- /dev/null +++ b/_site/gallery/1/index.html @@ -0,0 +1,1214 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + a skein of black handspun yarn + +

    icelandic lamb handspun

    +
      + +
    • yarn
      • + +
    +     +
    2. + +
  2. + + + a skein of dark grey handspun yarn + +

    handcombed jacobs handspun

    +
      + +
    • yarn
      • + +
    +     +
    3. + +
  3. + + + front and back of our solstice card from this year, designed in postcard format. long alt incoming... front - 4 picture collage. 1 - i'm standing in the woods, looking to one side, wearing an elaborate knit scarf. 2 - silhouetted thistle-like flowers in front of a pink-purple sky. 3 - my wife brooke crouches down to draw a heart in charcoal on a beach log, with 'L + B' written inside. 4 - brooke stands on a driftwood-covered beach looking hella cool in mirrored shades. our dog kes stands in front of her and looks off to one side eagerly. overlaid is the words 'happy solstice' in cursive. back - split down the center like the back of a postcard. on the left side, a 5 picture collage. 1 - i stand on a rock at the edge of a calm alpine lake. overlaid is the words 'lee, brooke, kestrel, & the flock' in print lettering. 2 - an early spring fern curl. 3 - our six ducks, all facing to the left, not in a row but still very organized. 4 - brooke grins at the camera while hugging kestrel's head. kestrel looks maybe a bit distraught. 5 - silhouette of a heron in flight across an early morning blue sky. on the address side, i've added a dahlia to represent the stamp, and written 'you!' in the field that would normally hold the mailing address. + +

    happy solstice 2025

    +
      + +
    • highlight
      • + +
    +     +
    4. + +
  4. + + + A diaphanous knit lacework scarf draped over the back of a chair. It is split down the long way into two colors - one tinted orange and one tinted mint blue. Both colors, the orange and the blue, are held double with the same variegated gray, making the piece more cohesive. The yarn overs in the lacework create airy repeating holes. + +

    brooke's scarf

    +
      + +
    • knit
      • + +
    +     +
    5. + +
  5. + + + lee (a white person with glasses and a side shave) holds up a leather dragon mask in black and dark green. ze sticks hir tongue out at it. + +

    dragon mask

    +
      + +
    • leather
      • + +
    • highlight
      • + +
    +     +
    6. + +
  6. + + + a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale. + +

    intro to wireframing

    +
      + +
    • software
      • + +
    +     +
    7. + +
  7. + + + a two image collage showing the front and back of a person, neck to waist. she's wearing leather suspenders with a button attachment, buckles for adjustment, and a stitched diamond where the straps cross in the back. + +

    brooke's suspenders

    +
      + +
    • leather
      • + +
    +     +
    8. + +
  8. + + + two wrists, each wearing a black leather wrap bracelet. the upper bracelet is a thin strap wrapped 3 times around the wrist. the lower bracelet wraps twice, with a thicker strap, and has carefully placed spikes that avoid the wrap spots. + +

    wrap bracelets

    +
      + +
    • leather
      • + +
    +     +
    9. + +
  9. + + + a hand wearing a knitted fingerless mitten. it's knit in a slubby, almost tweedy yarn, with the body being blue grey stockinette and the cuffs and tips a vibrant green rib. + +

    acadia mitts

    +
      + +
    • knit
      • + +
    +     +
    10. + +
  10. + + + ok so. five image collage showing the front, 3 inner spreads, and back of a riso-printed zine in green and light blue. it's called 'on the shoulders of giants' and it's about a knitting technique I learned from Stephen west and how I built on that technique. it talks about joining two adjacent panels without seaming, instead knitting the second panel onto the selvedge of the first. then it uses that technique to approach two panels knit with significantly different weights of yarn + +

    on the shoulders of giants

    +
      + +
    • zine
      • + +
    • knit
      • + +
    +     +
    11. + +
  11. + + + someone's torso in a knitted short sleeve shirt. the front is teal, and the bit of back we can see is mustard yellow. looking closely, it's notable that the stitches are turned 90 degrees from a standard knit garment. + +

    sideways canvas shirt

    +
      + +
    • knit
      • + +
    +     +
    12. + +
  12. + + + a collage of 4 images, each showing a fabric patch created by collaging 5 or 6 scraps of fabric and joining them with a simple running stitch in white thread. patches of running stitch go back and forth both horizontally and vertically. + +

    scrap patches

    +
      + +
    • patch
      • + +
    +     +
    13. + +
  13. + + + a largely unseen person holds up an expansive knitted shawl, built in 6 sections of different textures and colors. in the background, trees and dappled sunlight. + +

    textures unite

    +
      + +
    • knit
      • + +
    • highlight
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/10/index.html b/_site/gallery/10/index.html new file mode 100644 index 0000000..88a81f0 --- /dev/null +++ b/_site/gallery/10/index.html @@ -0,0 +1,1218 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + 3 copies of the same print of iris flowers and a bud, done in slightly varied color schemes. + +

    iris

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    2. + +
  2. + + + A greeting card reading, in black. 'Congrats on the,' and then, in rainbow, 'Gay!' + +

    congrats on the gay

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    3. + +
  3. + + + A three panel collage showing a the endpapers, cover, and pages of a small hardbound notebook. + +

    lined notebook

    +
      + +
    • book
      • + +
    +     +
    4. + +
  4. + + + A two panel collage showing the cover and endpapers of a thick notebook. + +

    flocked notebook

    +
      + +
    • book
      • + +
    +     +
    5. + +
  5. + + + A six panel collage showing the covers, endpapers, and some of the pages of a notebook. + +

    brooke's notebook

    +
      + +
    • book
      • + +
    • highlight
      • + +
    +     +
    6. + +
  6. + + + Feet propped up on a car dashboard, with a desert landscape beyond. The feet are in salmon-colored socks with black flecks, and decorative lines running down the socks. + +

    pink socks

    +
      + +
    • knit
      • + +
    +     +
    7. + +
  7. + + + Feet in a pair of colorful socks. They are identically striped and quickly vary between yellow, green, blue, white, and gray. + +

    brooke's socks

    +
      + +
    • knit
      • + +
    +     +
    8. + +
  8. + + + Several knitted drawstring dice bags sit in front of a bookshelf. They are in different pride flag colors; from right to left (skipping a few duplicates) bisexual, lesbian, nonbinary, trans, and genderqueer. The trans-colored dice bag in the center opens towards the camera, showing a variety of colorful dice inside. + +

    pride dice bags

    +
      + +
    • knit
      • + +
    • gender
      • + +
    +     +
    9. + +
  9. + + + A two panel collage showing a square book with a tan cover and blue and gold endpapers. + +

    square watercolor pad

    +
      + +
    • book
      • + +
    +     +
    10. + +
  10. + + + A three panel collage showing a book held in the palm of a hand. + +

    tiny books

    +
      + +
    • book
      • + +
    +     +
    11. + +
  11. + + + A three panel collage showcasing a small book with foldout pages and a bright orange cover. + +

    orange journal

    +
      + +
    • book
      • + +
    +     +
    12. + +
  12. + + + A three panel collage showcasing a journal with a striped cover. + +

    striped journal

    +
      + +
    • book
      • + +
    +     +
    13. + +
  13. + + + A three panel collage showcasing a small green memo pad. + +

    green memo pad

    +
      + +
    • book
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/11/index.html b/_site/gallery/11/index.html new file mode 100644 index 0000000..d4cc6a3 --- /dev/null +++ b/_site/gallery/11/index.html @@ -0,0 +1,1096 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + A three panel collage showcasing a blue and brown leather-covered journal. + +

    blue and brown leather journal

    +
      + +
    • book
      • + +
    +     +
    2. + +
  2. + + + A five panel collage showcasing a book that is part graph papers of various sizes, and part coloring pages based on Acadia National Park. + +

    Acadia coloring journal

    +
      + +
    • book
      • + +
    +     +
    3. + +
  3. + + + Rows of the same design, a skull with a speech bubble announcing varied pronoun sets, repeat in multiple colors along a stretch of off-white fabric. + +

    pronoun patches

    +
      + +
    • print
      • + +
    • patch
      • + +
    • gender
      • + +
    +     +
    4. + +
  4. + + + 4 greeting cards propped up on a keyboard. On the right hand side, two cards read 'Congrats on the Autism'; one in rainbow ink and one in black ink with a glittery gold shadow. On the left, two cards read 'Congrats on the ADHD'; one in red and one in black, both with glittery pink shadows. + +

    congrats on the autism/adhd

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    5. + +
  5. + + + 3 copies of the same stamp in orange ink are spread out next to the hand carved rubber stamp they were made from. They show a cat lying on his back with paws curled, holding a butter knife in his mouth. Text around the cat reads, in all caps, 'become unbutterable.' + +

    become unbutterable

    +
      + +
    • print
      • + +
    +     +
    6. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/2/index.html b/_site/gallery/2/index.html new file mode 100644 index 0000000..9505aa3 --- /dev/null +++ b/_site/gallery/2/index.html @@ -0,0 +1,1228 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + 2 copies of the same print, one in black ink and one in dark teal. The print is text that reads 'fix your hearts or die', with the text shaped into a somewhat long and narrow heart. + +

    fix your hearts

    +
      + +
    • print
      • + +
    +     +
    2. + +
  2. + + + A print of a loon rearing up with wings spread + +

    loon

    +
      + +
    • print
      • + +
    +     +
    3. + +
  3. + + + A 5 photo collage showing the front and back cover as well as 3 full spreads of a folded zine about Kestrel, my dog, who is a 65lb Malinois with a goofy smile and floppy ears. it is printed in two layers of color, blue and orange, and each image depicts Kestrel in various posts... alert and watchful, resting, looking mopey, wearing a sweatshirt. + +

    kestrel zine

    +
      + +
    • print
      • + +
    • zine
      • + +
    • highlight
      • + +
    +     +
    4. + +
  4. + + + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + +

    greeting loons

    +
      + +
    • card
      • + +
    • print
      • + +
    • highlight
      • + +
    +     +
    5. + +
  5. + + + 2 copies of the same print side by side. In yellow, black, and purple ink, a brown creeper, a small bird, is depicted, well camouflaged against a tree trunk. + +

    brown creeper

    +
      + +
    • print
      • + +
    +     +
    6. + +
  6. + + + A print in two layers of color showing two rotund quails on a branch. Most of the details are in black ink, then there is a layer with a brown gradient filling in some color on the head and breast. + +

    quorbs

    +
      + +
    • print
      • + +
    • highlight
      • + +
    +     +
    7. + +
  7. + + + A print in dark teal ink depicting a power drill with text in cursive below that reads 'ceci n'est pas un exercice' or 'this is not a drill' + +

    not a drill

    +
      + +
    • print
      • + +
    • shirt
      • + +
    +     +
    8. + +
  8. + + + A stack of hand-bound journals showing long stitches aligned with the spines. They are leather bound and have tie closures. + +

    leather long-stitch journals

    +
      + +
    • leather
      • + +
    • book
      • + +
    +     +
    9. + +
  9. + + + Two red leather lobster ornaments, about 4-5 in long each. + +

    lobstah

    +
      + +
    • leather
      • + +
    +     +
    10. + +
  10. + + + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail. + +

    greeting quorbs

    +
      + +
    • card
      • + +
    • print
      • + +
    +     +
    11. + +
  11. + + + A print in black ink on brown paper. It depicts a stem of euphorbia, a plant with long, thin leaves and many clustered flowers. + +

    euphorbia

    +
      + +
    • print
      • + +
    +     +
    12. + +
  12. + + + A landscape-oriented white card with a two-color print of a blue-footed booby. + +

    booby (congrats on the top surgery)

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    13. + +
  13. + + + A print of a tattooed woman in bright highlighter yellow underwear. + +

    luminescent

    +
      + +
    • print
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/3/index.html b/_site/gallery/3/index.html new file mode 100644 index 0000000..bdd780f --- /dev/null +++ b/_site/gallery/3/index.html @@ -0,0 +1,1210 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + A print of a brightly colored flower in 4 layers of color + +

    kniphofia

    +
      + +
    • print
      • + +
    +     +
    2. + +
  2. + + + 5 small triangular pouches made of leather in two sizes and various colors. + +

    triangle pouch

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + A collage showing various small (around an inch) stamps that depict people or animals. + +

    tiny portraits

    +
      + +
    • print
      • + +
    +     +
    4. + +
  4. + + + 4 square pouches that close with snaps. 2 have loops that attach keyrings. They are in various colors of leather. + +

    snap pouch

    +
      + +
    • leather
      • + +
    +     +
    5. + +
  5. + + + A green leather bracelet, stitched along the edges with dark blue thread, holds an ouroborous o-ring in place with two black snaps. + +

    o-ring bracelet

    +
      + +
    • leather
      • + +
    +     +
    6. + +
  6. + + + Several oak-leaf-shaped leather patches with stitching holes punched around the edges. + +

    leaf patches

    +
      + +
    • leather
      • + +
    +     +
    7. + +
  7. + + + A black leather bow tie with black stitching. + +

    bowtie

    +
      + +
    • leather
      • + +
    +     +
    8. + +
  8. + + + A collage showing 3 pictures of a red and brown leather card wallet. The red pocket separator folds around to the back to become a fetching curlicue. + +

    swoop wallet

    +
      + +
    • leather
      • + +
    +     +
    9. + +
  9. + + + Two identical prints of a delicata squash. The body of the squash is cornsilk (muted yellow), the stem and stripes in mint green, and the shadows in lilac. + +

    squarsh

    +
      + +
    • print
      • + +
    +     +
    10. + +
  10. + + + Two pink leather bracelets with stainless steel hardware and aqua stitching. + +

    rachel's bracelets

    +
      + +
    • leather
      • + +
    +     +
    11. + +
  11. + + + 4 copies of the same print in various color schemes, laid out in a 2x2 grid. The print shows testosterone-driven bottom growth of a clitoris. The color schemes are, clockwise from top right, brown on turquoise, red on cornsilk (muted yellow), violet on magenta, and mint green on lilac. + +

    bottom growth

    +
      + +
    • print
      • + +
    • gender
      • + +
    +     +
    12. + +
  12. + + + A collage showing a red and black leather dog collar tooled with roses and the name Sora. It's fully stitched with dark red stitching and has brass hardware. + +

    sora's collar

    +
      + +
    • leather
      • + +
    +     +
    13. + +
  13. + + + Two leather shrimp-shaped cat toys. They have long dangly antennae and are stitched in red and orange. + +

    shrimp cat toy

    +
      + +
    • leather
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/4/index.html b/_site/gallery/4/index.html new file mode 100644 index 0000000..ec0150e --- /dev/null +++ b/_site/gallery/4/index.html @@ -0,0 +1,1218 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + A card wallet with one main pocket and one quick access slot with a thumb slide. The cover of the main pocket curves around the thumb slide. + +

    foldy wallet with thumb slide

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + Olive green leather cuffs with silver spikes and a shearling lining. + +

    brooke's cuff bracelets

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + A brown/grey leather mask of a long snouted dog with visible teeth and red detailing. + +

    aaron's mask

    +
      + +
    • leather
      • + +
    +     +
    4. + +
  4. + + + A sunflower made of leather. Many individual natural toned leather petals are sewn onto a brown center . + +

    sunflower

    +
      + +
    • leather
      • + +
    +     +
    5. + +
  5. + + + A four part collage showing a single piece of deep red leather folding up to become a card wallet. + +

    foldy wallet

    +
      + +
    • leather
      • + +
    +     +
    6. + +
  6. + + + A brown leather wallet with a subtle trans flag stitching across the top. + +

    proud dad wallet

    +
      + +
    • leather
      • + +
    • gender
      • + +
    +     +
    7. + +
  7. + + + A collage showing a wallet in a patchwork style, with different colors of leather all stitched together to make up the exterior and the top interior pockets. Other pockets inside are dyed various colors. + +

    patchwork wallet

    +
      + +
    • leather
      • + +
    +     +
    8. + +
  8. + + + A leather bag sized for a large smartphone with a main pocket and a wraparound smaller pocket. It has a magnetic clasp. + +

    mom bag

    +
      + +
    • leather
      • + +
    +     +
    9. + +
  9. + + + a coiled up purse strap in gradient cool colors - we can see green, teal, indigo, and a slightly pinkish purple. It has brass hardware and is stiched along its length with cream stitches. + +

    gradient purse strap

    +
      + +
    • leather
      • + +
    +     +
    10. + +
  10. + + + A collage showing a green leather wallet with a zippered pocket built into one external side. + +

    zipper bifold (green)

    +
      + +
    • leather
      • + +
    +     +
    11. + +
  11. + + + A collar rests on a leather-wrapped lighter. It is lined with shearling and built of two other layers of leather - a wider mustard yellow layer and a thinner teal layer over that. the teal layer holds a heart shaped o-ring in place. + +

    vix collar

    +
      + +
    • leather
      • + +
    +     +
    12. + +
  12. + + + A print that reads 'trans the world' surrounding an image of a globe and a trans symbol. It's in a ping-to-blue gradient. + +

    trans the world

    +
      + +
    • print
      • + +
    • shirt
      • + +
    • gender
      • + +
    +     +
    13. + +
  13. + + + A print that reads 'slightly weird man club' in a nonbinary flag colored gradient + +

    slightly weird man club

    +
      + +
    • print
      • + +
    • shirt
      • + +
    • gender
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/5/index.html b/_site/gallery/5/index.html new file mode 100644 index 0000000..a6336c5 --- /dev/null +++ b/_site/gallery/5/index.html @@ -0,0 +1,1212 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + Two hard enamel pins in my trans rights and trans wrongs skulls designs. + +

    pins!

    +
      + +
    • pin
      • + +
    +     +
    2. + +
  2. + + + A cat in a sunbeam snuggles a little leather mouse-shaped cat toy. + +

    mousie

    +
      + +
    • leather
      • + +
    +     +
    3. + +
  3. + + + A collage showing an orange leather wallet with a long zipper running the length of the outside. + +

    long zipper bifold

    +
      + +
    • leather
      • + +
    +     +
    4. + +
  4. + + + two tooled leather patches. they have scrolls tooled on them that read various pronoun sets. + +

    tooled leather patches

    +
      + +
    • leather
      • + +
    • gender
      • + +
    +     +
    5. + +
  5. + + + a keychain with an iridescent fishhook style attachment linked via leather to an iridescent keyring. the leather is stitched with nonbinary flag colors. + +

    fishhook pride keychains

    +
      + +
    • leather
      • + +
    • gender
      • + +
    +     +
    6. + +
  6. + + + A round bag in brown, mustard yellow, and rich deep orange, with a teal shoulder strap. + +

    circle bag

    +
      + +
    • leather
      • + +
    +     +
    7. + +
  7. + + + A white woman with a shaved side cut wearing a black leather collar with a large dangling o-ring. + +

    stephanie collar

    +
      + +
    • leather
      • + +
    +     +
    8. + +
  8. + + + 3 tiny mushroom stamps next to their impressions. They are all about 1 inch square. There is a chanterelle in yellow, a russula in pink, and witch's hat mycena in indigo. + +

    tiny mushrooms

    +
      + +
    • print
      • + +
    +     +
    9. + +
  9. + + + A two-picture collage showing the inside and outside of a wallet made with piñatex, a leather alternative made from pineapple leaves. It is two tone blue with a pink accent and has a zippered pocket built in. + +

    piñatex wallet with zipper

    +
      + +
    • leather
      • + +
    +     +
    10. + +
  10. + + + A nylon webbing harness in bright teal laid out on a desk. + +

    moss harness

    +
      + +
    • leather
      • + +
    +     +
    11. + +
  11. + + + A keychain on an iridescent rainbow split ring. It is dark brown/grey leather and has LEE CAT ART stamped into it. + +

    maker's mark keychain

    +
      + +
    • leather
      • + +
    +     +
    12. + +
  12. + + + A green leather collar lined with brown/grey shearling and fitted with two sizes of silver-toned spikes. + +

    brooke's collar

    +
      + +
    • leather
      • + +
    +     +
    13. + +
  13. + + + A nylon webbing shoulder strap in bright teal with clips on each end. + +

    bag strap

    +
      + +
    • leather
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/6/index.html b/_site/gallery/6/index.html new file mode 100644 index 0000000..e3b48f6 --- /dev/null +++ b/_site/gallery/6/index.html @@ -0,0 +1,1216 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + Several blades with leather sheaths, and a few extra sheaths. There's a #2 blade with an orange sheath with yellow stitching, a #11 blade with a blue sheath with light grey stitching, and a skiving knife with a plum sheath and pink stitching. + +

    x-acto knife sheath

    +
      + +
    • leather
      • + +
    +     +
    2. + +
  2. + + + A leather pouch shaped a bit like a d10 but with eight sides. It has a rainbow zippered opening and a wristlet strap. + +

    little critter pouch

    +
      + +
    • leather
      • + +
    • highlight
      • + +
    +     +
    3. + +
  3. + + + A collage showing a hand-stitched leather bifold with a zippered coin pocket on one exterior side. + +

    zipper bifold

    +
      + +
    • leather
      • + +
    +     +
    4. + +
  4. + + + A collage showing a hand-stitched leather card wallet with 3 card pockets, a hidden pocket, and a zippered coin pouch. + +

    vertical zipper card wallet

    +
      + +
    • leather
      • + +
    +     +
    5. + +
  5. + + + A collage showing a hand-stitched leather card wallet with 3 card pockets and 1 interior pocket. + +

    vertical card wallet

    +
      + +
    • leather
      • + +
    +     +
    6. + +
  6. + + + A collage showing a hand-stitched leather vertical bifold wallet with 6 card pockets, 2 hidden pockets, and 1 bill pocket. + +

    vertical bifold

    +
      + +
    • leather
      • + +
    +     +
    7. + +
  7. + + + A 3-picture collage showing a hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a asymmetrical interior with a hidden pocket and 3 card pockets on the right, and a hidden pocket and 2 card pockets on the left. The left front pocket has a small naturally occuring hole. + +

    eight pocket bifold

    +
      + +
    • leather
      • + +
    +     +
    8. + +
  8. + + + A 3-picture collage showing a hand-stitched leather wallet in plum and light natural leather, with a double bill pocket. + +

    double bill pocket bifold

    +
      + +
    • leather
      • + +
    +     +
    9. + +
  9. + + + A hand stitched full grain leather bifold wallet in dark plum leather. It has a main bill pocket and a symmetrical interior with a hidden pocket and 3 card pockets on each side. + +

    nine pocket bifold

    +
      + +
    • leather
      • + +
    +     +
    10. + +
  10. + + + A bic lighter wrapped in leather and hand-stitched up one side. + +

    leather lighter case

    +
      + +
    • leather
      • + +
    +     +
    11. + +
  11. + + + Someone from chin to mid-torso, wearing a dark teal leather chest harness with matte black fittings over a t shirt. + +

    leather chest harness

    +
      + +
    • leather
      • + +
    +     +
    12. + +
  12. + + + A print in rainbow ink that says autism with the anarchy A. + +

    anarchy autism

    +
      + +
    • print
      • + +
    • sticker
      • + +
    • shirt
      • + +
    • pin
      • + +
    +     +
    13. + +
  13. + + + A print of a nude trans woman in an asymmetrical rope harness. + +

    rope (one)

    +
      + +
    • print
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/7/index.html b/_site/gallery/7/index.html new file mode 100644 index 0000000..45e73cf --- /dev/null +++ b/_site/gallery/7/index.html @@ -0,0 +1,1260 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + A black tank top laid on a desk. In white ink it reads 'Artisans Cooperative' with a print of some chickens and a quail. + +

    artisans cooperative shirts

    +
      + +
    • shirt
      • + +
    • print
      • + +
    +     +
    2. + +
  2. + + + A print of a small shrimp with slender little leggies in orange ink. + +

    shrimp

    +
      + +
    • print
      • + +
    • card
      • + +
    • sticker
      • + +
    • pin
      • + +
    +     +
    3. + +
  3. + + + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + +

    girldick

    +
      + +
    • print
      • + +
    • sticker
      • + +
    • shirt
      • + +
    • pin
      • + +
    • gender
      • + +
    +     +
    4. + +
  4. + + + A butch holding a chainsaw and wearing a tank top that reads boypussy in pink Barbie font. + +

    boypussy

    +
      + +
    • print
      • + +
    • sticker
      • + +
    • shirt
      • + +
    • pin
      • + +
    • gender
      • + +
    +     +
    5. + +
  5. + + + A print of the word queer in black ink. The letters are rounded with elongated oval negative space. + +

    queer

    +
      + +
    • print
      • + +
    • card
      • + +
    • sticker
      • + +
    • pin
      • + +
    • gender
      • + +
    +     +
    6. + +
  6. + + + A card and print in the same design - a chick and a broken eggshell, and a simple font reading 'congrats on coming out of your shell' + +

    coming out

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    7. + +
  7. + + + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + +

    happy biHRTday

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    8. + +
  8. + + + A print of a cluster of foxgloves. The background is inked in green, with negative space and pink details making up the foxgloves. + +

    foxgloves

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    9. + +
  9. + + + 2 white greeting cards with the Artisans Cooperative logo, a chicken. One card has a single print of the chicken in black ink, and the other has two overlapping prints in blue and red ink + +

    artisans cooperative cards

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    10. + +
  10. + + + Clear and holographic stickers in the same design - a smiling skull with speech bubble reading 'trans rights!' + +

    stickers!

    +
      + +
    • sticker
      • + +
    +     +
    11. + +
  11. + + + A row of shirts hanging in front of a window, with a variety of hand-printed designs. + +

    shirts!

    +
      + +
    • shirt
      • + +
    +     +
    12. + +
  12. + + + A print of a nonbinary flag waving, with yellow, white (uninked), purple, and black stripes. + +

    nonbinary flag

    +
      + +
    • print
      • + +
    • card
      • + +
    • gender
      • + +
    +     +
    13. + +
  13. + + + A block print of five mule deer grazing in a dark green field. The deer are partially negative space and partially brown ink detailing. + +

    five of them

    +
      + +
    • print
      • + +
    • shirt
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/8/index.html b/_site/gallery/8/index.html new file mode 100644 index 0000000..087348d --- /dev/null +++ b/_site/gallery/8/index.html @@ -0,0 +1,1242 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + A block print of a tiger swallowtail butterfly dangling from Japanese snowdrops, a white drooping flower. + +

    swallowtail on snowdrops

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    2. + +
  2. + + + A 3-part collage showing a blue journal with leather straps woven into the covers. + +

    leather strap journal

    +
      + +
    • book
      • + +
    +     +
    3. + +
  3. + + + A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads 'become ungovernable' + +

    hummingbird become ungovernable

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    4. + +
  4. + + + A 4-part collage of a hardcover book, showing a coloring page with 'stampede!' written across it. + +

    stampede journal

    +
      + +
    • book
      • + +
    +     +
    5. + +
  5. + + + A 4-part collage of a slim handbound book. + +

    orange green journal

    +
      + +
    • book
      • + +
    +     +
    6. + +
  6. + + + A 3-part collage of a leather-covered book with baseball-style stitching across the spine. + +

    baseball journal

    +
      + +
    • book
      • + +
    +     +
    7. + +
  7. + + + A smiling skull with devil horns and a little spiked tail, and a speech bubble reading 'trans wrongs!' + +

    trans wrongs skull

    +
      + +
    • print
      • + +
    • card
      • + +
    • sticker
      • + +
    • pin
      • + +
    • gender
      • + +
    +     +
    8. + +
  8. + + + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over towards them and HONKS! Both have speech bubbles; the calm goose says 'trans rights!' while the honking goose says 'trans wrongs!' + +

    geese/trans wrongs

    +
      + +
    • print
      • + +
    • shirt
      • + +
    • gender
      • + +
    +     +
    9. + +
  9. + + + A block print of a spotted towhee mid-leap. + +

    spotted towhee

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    10. + +
  10. + + + Four knitted shrimp in various shades of pink. They are all somewhere around hand-sized, and have little yarn antennae and leggies. + +

    knit shrimp

    +
      + +
    • knit
      • + +
    +     +
    11. + +
  11. + + + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! + +

    geese

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    12. + +
  12. + + + A block print in black ink of a rotund raccoon raising a welcoming paw towards the viewer. + +

    fat raccoon

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    13. + +
  13. + + + A block print of a superb speciman of pigeon, inked mostly in black but with patches of green, blue, and purple to indicate iridescence. + +

    big pidge

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/9/index.html b/_site/gallery/9/index.html new file mode 100644 index 0000000..f99e970 --- /dev/null +++ b/_site/gallery/9/index.html @@ -0,0 +1,1244 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + A print in mostly black ink of a smiling skull with a speech bubble. In pink and blue, the speech bubble reads 'trans rights!' + +

    trans rights skull

    +
      + +
    • print
      • + +
    • card
      • + +
    • sticker
      • + +
    • pin
      • + +
    • gender
      • + +
    +     +
    2. + +
  2. + + + A print of a stellar's jay, a beautiful black and blue bird, about to take off from a branch + +

    stellar's jay

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    3. + +
  3. + + + A print in black ink of belly hair. + +

    hair

    +
      + +
    • print
      • + +
    • gender
      • + +
    +     +
    4. + +
  4. + + + A print in black, brown, and red ink of a northern flicker (a type of woodpecker). Viewed from the back, he is looking over his shoulder and upward towards something unseen above him (my bird feeder). + +

    flicker

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    5. + +
  5. + + + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + +

    heron

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    6. + +
  6. + + + A print of a 3-stage design of a green seedling barely open, starting to straighten up, and growing strong, with little piles of dirt beneath each one. + +

    seedling

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    7. + +
  7. + + + 6 versions of a print of lupine flowers with the leaves inked in light green and the blossoms inked in a variety of blues, purples, and pinks. + +

    lupine

    +
      + +
    • print
      • + +
    • card
      • + +
    • shirt
      • + +
    +     +
    8. + +
  8. + + + A picture of multiple leather keychains sitting on a wood table. Many of them are simple rectangle shapes with stitching around the edge; a few are odd wavy or geometric shapes. A few say things like 'MOM' or 'EGG'. + +

    leather keychains

    +
      + +
    • leather
      • + +
    +     +
    9. + +
  9. + + + A print of a killdeer in black ink. + +

    killdeer

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    10. + +
  10. + + + A print of a junco mid-takeoff from a branch. Eir head is inked in black, body in gray, and the branch in sepia. + +

    junco

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    11. + +
  11. + + + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white. + +

    handspun yarn in party mix and orange-gold

    +
      + +
    • yarn
      • + +
    +     +
    12. + +
  12. + + + A print of a simple flatfish design inked in sepia. + +

    flatfish

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    13. + +
  13. + + + A print of two chanterelle mushrooms inked in a dark-to-light yellow gradient. + +

    chanterelle

    +
      + +
    • print
      • + +
    • card
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gallery/index.html b/_site/gallery/index.html new file mode 100644 index 0000000..c501c47 --- /dev/null +++ b/_site/gallery/index.html @@ -0,0 +1,1202 @@ + + + + + + + gallery | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + +

gallery

+ + +

the gallery page is for finished art

+

(or browse by tags)

+ +
    + +
  1. + + + a block print in dark indigo ink on white paper depicting a perched crow looking over one shoulder. one side of the crow is lit with fine feather detail, and the other side is almost entirely in shadow. + +

    crow

    +
      + +
    • print
      • + +
    +     +
    2. + +
  2. + + + one large skein (and technically a smaller skein hidden behind it) of sheen-y black alpaca handspun, in about a DK weight + +

    charlie the alpaca handspun

    +
      + +
    • yarn
      • + +
    +     +
    3. + +
  3. + + + one large skein and two smaller skeins of a rich chocolatey brown alpaca handspun, in about a DK weight + +

    ruby the alpaca handspun

    +
      + +
    • yarn
      • + +
    +     +
    4. + +
  4. + + + 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + +

    hand-dyed gold handspun

    +
      + +
    • yarn
      • + +
    +     +
    5. + +
  5. + + + a skein of a lightly variegated grey yarn in about a sport or DK weight. + +

    spinner's dream handspun

    +
      + +
    • yarn
      • + +
    +     +
    6. + +
  6. + + + 1 large and 2 small skeins of handspun yarn in a sport or DK weight that has been dyed in light and dark teal, green, and rusty green-gold. + +

    rambouillet handspun

    +
      + +
    • yarn
      • + +
    +     +
    7. + +
  7. + + + 2 skeins, one large and one small, of a heathered orange yarn with hints of blue in about a DK or worsted weight. + +

    fire & ice handspun

    +
      + +
    • yarn
      • + +
    +     +
    8. + +
  8. + + + 4oz of yarn and a pound of wool, chunked out, drying on a drying rack outdoors. the yarn and half the wool is a mix of teals and greens; the other half of the wool is a beautiful orange-gold. + +

    dyeing fiber

    +
      + +
    • yarn
      • + +
    +     +
    9. + +
  9. + + + 2 skeins, one large and one small, of a heathered grey yarn with hints of blue and orange in about a sport or DK weight. + +

    coral reef handspun

    +
      + +
    • yarn
      • + +
    +     +
    10. + +
  10. + + + a spinning wheel bobbin full of undyed white handspun yarn in about a sport or DK weight. + +

    BFL/silk handspun

    +
      + +
    • yarn
      • + +
    +     +
    11. + +
  11. + + + 3 skeins of handspun yarn, 1 large and 2 small. One of the small skeins is a little more inconsistent weight than the other two - this one was spun on drop spindle about 2 years ago. The other two are about a sport or maybe a DK weight. All three are a gold colorway with tiny hints of orange and a pale light green. + +

    orion handspun

    +
      + +
    • yarn
      • + +
    +     +
    12. + +
  12. + + + 3 skeins of handspun yarn, 2 large and 1 small. the large ones are a rich earth-tone blend of reds, pinks, browns, and hints of green and gold. the smaller skein is similar but with a decidedly greener hue + +

    petrichor handspun

    +
      + +
    • yarn
      • + +
    +     +
    13. + +
  13. + + + a skein of light grey handspun yarn + +

    light grey jacobs handspun

    +
      + +
    • yarn
      • + +
    +     +
    14. + +
+ + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/geese-trans-wrongs/index.html b/_site/geese-trans-wrongs/index.html new file mode 100644 index 0000000..297ce95 --- /dev/null +++ b/_site/geese-trans-wrongs/index.html @@ -0,0 +1,1284 @@ + + + + + + + geese/trans wrongs | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

geese/trans wrongs

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over towards them and HONKS! Both have speech bubbles; the calm goose says 'trans rights!' while the honking goose says 'trans wrongs!' + + +

Combination of trans wrongs skull and the geese.

+

details

+

dimensions

+

6" x 4"

+

coloration

+

default: black

+

available as

+

patch, print, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/geese/index.html b/_site/geese/index.html new file mode 100644 index 0000000..cf10428 --- /dev/null +++ b/_site/geese/index.html @@ -0,0 +1,1284 @@ + + + + + + + geese | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

geese

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Two Canada geese and their reflections in the water. One is calmly swimming away, while the over leans over and HONKS! + + +

Based on a fantastic picture by handmade ghost

+

details

+

dimensions

+

6" x 3"

+

coloration

+

default: black

+

available as

+

patch, print, greeting card, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gender-as-a-proxy-variable/index.html b/_site/gender-as-a-proxy-variable/index.html new file mode 100644 index 0000000..7901277 --- /dev/null +++ b/_site/gender-as-a-proxy-variable/index.html @@ -0,0 +1,1456 @@ + + + + + + + gender as a proxy variable | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

gender as a proxy variable

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Part of a scan of the cover of my zine, Gender as a Proxy Variable. It shows the title and a bit of handsewn binding. + + +

Look through a scan of the zine. (Be aware that the PDF is not as up to date as the web version below.)

+

Get print copies.

+

The below material is a web page reproduction of my zine Gender as a Proxy Variable.

+
+

Authored by Lee Cattarin

+

August - December 2023 -> February 2024

+
+
+

I would argue that you almost never have to ask for gender…

+

If you’re collecting gender identity data to personalize user-facing copy, try asking for preferred* pronouns instead. If you’re asking because you want to make in-app content recommendations, try asking about the user’s content preferences. If you’re asking to generate a user avatar, let the user generate their own. Gender identity is a poor proxy variable — stick to asking for the information you actually want.

+
+

-- Nikki Stevens, quoted in “How to Make Your Software More Trans-Inclusive,” emphasis mine

+

*pro tip: just say "pronouns" and drop the "preferred"

+
+

So, what are you asking for when you ask for

+

Gender?

+
    +
  • pronouns?
    • +
  • title or prefix?
    • +
  • health needs?
    • +
  • clothing preferences?
    • +
  • bathroom use?
    • +
  • public profile data?
    • +
  • demographic data?
    • +
  • legal identification?
    • +
  • medical information?
    • +
+
+

Formatting note

+

(this section and its effects have been altered to be functional in this medium - in the print zine, checkboxes and radio buttons were used. But Markdown only has one type of list.)

+

Questions that require users pick a single answer will be followed with "(pick one)".

+

Questions that allow users to choose multiple answers will be followed with "(pick any)".

+

Write-in fields may have italicized suggestions in them.

+
+

...Pronouns

+

What pronouns should we use for you? (pick any)

+
    +
  • he/him/his
    • +
  • she/her/hers
    • +
  • they/them/theirs
    • +
  • other (write-in): ze/hir/hirs
    • +
+

Worried about parsing that free text field? Try:

+
    +
  • subjective: she
    • +
  • objective: her
    • +
  • possessive (adj): her
    • +
  • possessive (prn): hers
    • +
  • reflexive: herself
    • +
+

...Title or prefix

+

What title or prefix should we use for you? (pick one)

+
    +
  • Mr.
    • +
  • Mrs.
    • +
  • Ms.
    • +
  • Mx.
    • +
  • Rev.
    • +
  • Dr.
    • +
  • Hon.
    • +
+

(et cetera)

+
    +
  • no prefix
    • +
  • other (write-in):
    • +
+

...Health needs

+

Do you require private facilities for breastfeeding or other health and wellness needs? (pick one)

+
    +
  • yes
    • +
  • no
    • +
+

Provide a write-in space for specific needs, such as refrigeration or running water.

+

...Clothing preferences

+

Which style of shirt would you prefer? (pick one)

+
    +
  • straight cut
    • +
  • fitted (edit: a reader has suggested "curvy" or "flared" as alternatives)
    • +
+

...Bathroom use

+

Do you require any of the following restrooms? (pick any)

+
    +
  • all-gender
    • +
  • single-occupancy
    • +
  • wheelchair-accessible
    • +
  • other (write-in):
    • +
+

All restrooms should be provided with menstrual products.

+

...Public profile data

+

What is your gender? This information will be viewable on your profile by all logged-in users. (pick any)

+
    +
  • man
    • +
  • woman
    • +
  • nonbinary
    • +
  • other (write-in):
    • +
+

Make sure to note the visibility level!

+

...Demographic data

+

What is your gender? This information is collected for demographic analysis only. (pick one)

+
    +
  • man
    • +
  • woman
    • +
  • nonbinary
    • +
  • other (write-in):
    • +
+ +

What is your legal sex as marked on government-issued identification? (pick one)

+
    +
  • M
    • +
  • F
    • +
  • X
    • +
+

Explain where this information will be used. If you need something more specific than any legal identification, say so: "This is used for insurance purposes and must match your gender on insurance paperwork."

+

...Medical

+

What is your gender? (pick any)

+
    +
  • man
    • +
  • woman
    • +
  • nonbinary
    • +
  • other (write-in):
    • +
+

What sex were you assigned at birth? (pick one)

+
    +
  • male
    • +
  • female
    • +
  • other (write-in):
    • +
+

An organ inventory and/or surgical history is a useful tool.

+
+

But let’s talk more about that

+

Gender question

+

Is:

+
    +
  • man
    • +
  • woman
    • +
  • nonbinary
    • +
  • other (write-in):
    • +
+

enough?

+

Maybe not! Probably not, in fact! But what are our other options?

+
    +
  • Expansive lists can be overwhelming to users, fall quickly out of date, and are prone to significant localization issues.
    • +
  • Free text entry removes many of the downsides of expansive lists but introduces new problems with data storage and analysis.
    • +
+

Having a few primary options and a write-in, as shown above, is a good balance!

+
+

A little more on

+

Anti-patterns

+

Consider the following options:

+
    +
  • man
    • +
  • woman
    • +
  • trans man
    • +
  • trans woman
    • +
+

Aside from the lack of nonbinary gender choices, did you notice that?

+

These exclusive choices present “man” and “trans man” (and “woman” and “trans woman”) as separate genders, when what they’re most likely trying to convey is:

+
    +
  • cis man
    • +
  • cis woman
    • +
  • trans man
    • +
  • trans woman
    • +
+

Avoid treating “cis” as the unspoken default.

+

Other anti-patterns include:

+
    +
  • automatic detection of gender (just don’t)
    • +
  • immutable gender fields (make gender easily editable)
    • +
  • grouping all nonbinary or nonstandard genders under “other” (add common gender terms for the relevant culture; include write-in fields)
    • +
+

Patterns

+

Here’s some additional positive patterns that can be appended to many of the earlier examples:

+
    +
  • Make fields optional unless truly necessary, or include “decline to specify”
    • +
  • When questions can’t accommodate a free text field, include “gender not listed here” for those who have an answer but don’t see it reflected in the form
    • +
  • Allow for edits
    • +
  • Allow for the removal of old data
    • +
+

Sources

+

This zine draws from material I gathered for a longer blog post: leecat.art/gender-in-data

+

Linked in that blog post are numerous sources; the most heavily relied on here was from Drupal’s documentation and is found under the section headed “Do you need gender data?”

+

Author

+

Lee Cattarin is a transgender software developer and artist based out of Vashon, WA, USA. All hir creative work can be found at leecat.art

+

Get in touch with hir via any of the methods listed on leecat.art/contact

+

A small stamp depicting Lee's face next to a speech bubble in handwritten text that reads 'Thanks for reading!'. Below that, the word 'editors' in quotes, and stamps of a fluffy dog and 6 variously-patterned ducklings

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gender-in-data-models/index.html b/_site/gender-in-data-models/index.html new file mode 100644 index 0000000..2bf7ca0 --- /dev/null +++ b/_site/gender-in-data-models/index.html @@ -0,0 +1,1506 @@ + + + + + + + gender in data models | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

gender in data models

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Image unrelated to post. A light pink peony in full bloom, close up. + + + + + +

Context and problem

+

As transgender and nonbinary people gain visibility and legal identification expands gender fields to include nonbinary genders and/or "X" markers, data models that only support "male" and "female" (or "M"/"F") are no longer sufficient to align with individuals' legal records or personal identity. However, with the large range of terminology used by transgender and nonbinary people, tackling this problem can seem challenging and brings the potential to further harm or exclude already marginalized individuals.

+

Known limitations

+
    +
  • This is a work in progress
    • +
  • While I have relied on many articles and talks in collating this resource, as well as on my own experiences as a nonbinary trans person enmeshed in nonbinary and trans communities, it is still largely the work of one person at present and will not represent the views of all trans, nonbinary, or gender-expansive people
    • +
+

Where do we need help?

+

Proofreading and commentary from all readers!

+

If you're knowledgeable on this topic, additional information and viewpoints are tremendously useful.

+

If you're new, where do you have questions? What hasn't been explained enough? What do you leave this document still wondering about?

+

Scope

+

This document will look at existing and potential solutions to modeling gender in data for use by software systems, primarily via presenting and analyzing patterns and anti-patterns.

+

Out of scope

+
    +
  • The business case for building data models and software that is inclusive of all.
    • +
  • The validity of trans identities, or of any specific term or set of terms used by individuals in reference to their gender.
    • +
  • A detailed overview of trans people's experiences or understandings; a "Gender 101" or "Trans 101" document; a complete dictionary of terminology relating to the trans or gender diverse community.
    • +
+

Core definitions

+

In order to more easily discuss these topics, I will note here my working definitions for some terms below.

+
+

A note on language… Please do not assume that these definitions are fixed or can be broadly applied across cultures and countries. The language around gender has continued to change as the trans community is more able to connect, have in depth conversations, and define for ourselves how we use language. On an individual, person-to-person level, it's always preferable to mirror the language people use for themselves rather than prescriptively apply terms.

+
+
    +
  • Transgender (abbreviated trans; also trans*): anyone whose gender does not align with their sex assigned at birth. This is both an umbrella term and an individual identity. Used here, it is inclusive of but not limited to (and these identities may overlap): transgender women, transgender men, nonbinary people - including genderqueer, agender, or genderfluid people as well as many other labels - and anyone who is otherwise not cisgender.
    • +
  • Cisgender (abbreviated cis): anyone whose gender matches their sex assigned at birth. +
    +

    Language note: trans and cis are derived from Latin, meaning "on the other side of" and "on this side of" respectively.

    +
    +
    • +
  • Binary/Nonbinary: these terms are in reference to the idea of gender as a binary consisting only of man/male and woman/female, which is neither accurate nor effective in describing human experience.
    • +
  • Nonbinary (also non-binary; abbreviated NBi, NBy, NB [recommended to avoid as it can cause language collisions around NB used to mean non-Black], enby [informal]): an umbrella term or individual identity for anyone whose gender does not wholly and solely align with one binary gender.
    • +
+

Data on the transgender community

+

There's a dearth of data on trans individuals. That said, we do have some relevant sources that have given us broad insight into trans communities.

+
    +
  • U.S. Transgender Survey, the largest survey ever devoted to the lives and experiences of transgender people, with 27,715 respondents across the United States.
    • +
  • Gender Census, an annual survey that collects information about the language used by people whose genders are not adequately described, expressed or encompassed by the restrictive gender binary.
    • +
+

Both of these sources use ‘nonbinary’ as their usual spelling; I am mirroring that here.

+

Issues and considerations

+

Do you need gender data?

+

It's always worthwhile to stop and look at how relevant or necessary gender information is to your goals.

+
+

"'I would argue that you almost never have to ask for gender,' Stevens said.

+

"If you’re collecting gender identity data to personalize user-facing copy, try asking for preferred pronouns instead. If you’re asking because you want to make in-app content recommendations, try asking about the user’s content preferences. If you’re asking to generate a user avatar, let the user generate their own. Gender identity is a poor proxy variable — stick to asking for the information you actually want.

+
+

(Hunter, 2020)

+

Drupal's gender field includes the following guidance in its description:

+
+
    +
  1. Do you need to address a person with pronouns? Genders do not necessarily map easily onto the pronouns a person uses. If you need to associate pronouns with a person, ask for those pronouns directly.
    2. +
  2. Do you need to address a person with a title or prefix (such as Mr./Ms./Mx.)? Genders also do not necessarily correspond to a person's preferred title, and moreover would leave out honorifics related to profession, such as Dr., Rev., or Capt. If you need to associate titles with a person, ask for those titles directly.
    3. +
  3. Do you need to collect gender information for demographic data reasons? If you do, make sure you are able to accurately record a person's gender, rather than forcing them into choosing from limited options. If you need to use the data for recording trends, writing reports, or segmentation for advertising or other reasons, consider post-processing the data to group related genders depending on your specific use-case.
    4. +
  4. Do you need to know a person's health needs, clothing preferences or bathroom use? If you are organizing an event, for instance, you might want to know what sort of facilities to provide or what sorts of t-shirts to order. Genders, however, do not necessarily correspond to specific body types, body functions, health requirements (such as menstrual supplies) or reflect what types of facilities a person would feel safest using in a public environment. If you are collecting gender data for this purpose, ask the more precise questions specifically.
    5. +
  5. Do you want to publicly display a person's gender on a profile? This is often a choice made by social media and dating/relationship sites. If you do this, consider making the field optional altogether. If you are providing user avatars, remember that human bodies come in all sorts, and allow individuals to choose an avatar separately from collecting this data.
    6. +
  6. Do you need to know assigned gender for legal, medical or regulatory reasons? Current gender does not necessarily correspond to assigned sex at birth or legal gender marker, so be sure you are clear in what you are requesting of a person. It's particularly critical to be transparent about your privacy policy and the how this data will be used.
    7. +
+
+

(McCabe and Beach, 2019)

+

Safety and prevention of abuse

+
+

....if this information is displayed publicly there is potential for abuse by people who like to make discriminatory jokes about gender identity, and any such system would need to put steps in place to prevent such abuse.

+

...

+

Instead of putting the burden on a user to fully understand the risks of sharing their highly personal information, let’s put the burden on ourselves to treat that information right. If we have no strong reason to collect it, or can’t guarantee its safety, we shouldn’t collect it.

+
+

(Spicknall, 2019)

+

If you do collect gender data, inform the user what it is used for and who it will be shared with.

+

Anti-patterns

+ +

The availability of nonbinary gender options in legal systems varies by location. The ability to change one's gender marker (from one binary category to another or from binary to nonbinary) varies even more widely, with requirements ranging from simple voluntary declaration, to verification by medical professional(s) of varying treatments which vary in how accessible they are and whether they are actually desired by individuals for whom this is relevant, to only changing in response to proven "error," etc.

+

(Transgender Law Center, 2017) (Movement Advancement Project) (Knight and Ghosal, 2016)

+

If you are not specifically trying to refer to an individual’s legal identification, don’t tie gender to it.

+

Biological sex

+

This is variously defined to refer to sex assigned at birth, legal gender/sex markers, or current physical sex based on any number of characteristics, which may include

+
    +
  • chromosomes
    • +
  • gonads
    • +
  • genitalia
    • +
  • primary sex hormones
    • +
  • secondary sex characteristics
    • +
+

and more. This identifier may or may not be treated as binary and may or may not take into account an individual's medical history.

+

(Montañez, 2017)

+

Outside of healthcare, this is largely unnecessary. For healthcare, see Two- or multi- step approach and Organ inventory.

+

"Other" or similarly named categories

+

As a way to accurately represent gender diverse people, "other" is, quite literally, othering. "Prefer not to say" or similar wording can be an excellent option, but not if it is the only option outside the traditional gender binary that is available to users - in that case, it becomes no longer a preference but a requirement not to say.

+
+

"Researchers have also developed methods to respond to challenges involved in data collection about sexual and gender identities which are culturally specific and unique. For example, in 2011, the government of Nepal attempted the world’s first census in which respondents had the option of choosing 'Male,' 'Female,' or 'Third Gender.' The effort was not successful for a number of reasons, among which was that large proportions of the gender minority population did not identify with the term 'third gender.' Subsequent research determined that the use of culturally specific terms such as 'Methi' and 'Kothi' would have increased the effectiveness of the census effort."

+
+

(Park, 2016)

+

Expansive lists

+

While these can be appealing for the choice they afford users, they come with notable use and implementation considerations.

+
    +
  • Timeliness. This area of language moves quickly and terms are coming into and out of use fast. Larger sets of options require more work to stay up to date and include recent terminology, as well as prompting more questions about which terms, if any, are no longer used to the point they should be removed.
    • +
  • Localization. Hyper-specific terms are easy targets for localization issues, and a more detailed list requires more in-depth research to localize.
    • +
  • User overwhelm. A list with a large set of options, particularly if it's many unfamiliar words, may confuse users.
    • +
  • Exclusive choice. Mentioned briefly above, the more options a list of gender terms offers, the more likely two or more terms are to overlap. Unless offering a "check all that apply" system, this makes accurate choice more difficult for the user rather than easier.
    • +
+

Free text entry

+

This approach provides much of the benefits of an expansive list, and removes the drawbacks discussed above. However, it comes at the cost of making data storage and analysis more expensive, challenging, and time-consuming. It may additionally still contribute to user confusion for anyone who is uncertain where or how the information will be used or whether there are expected responses.

+

For smaller projects, however, this is still an option. Or you can offer this to a small subset of users who find that the available options don't fit - see Not listed here.

+

Assumptions that a single term will fully encompass gender, especially in a more exhaustive list of options

+

Especially when providing expansive lists or allowing write in fields, ensure that terms that are not mutually exclusive must be chosen as though they are. This is the reasoning behind guidance for a two-step approach, described in more detail in Two- or multi- step approach, which "measures assigned sex at birth and self-reported gender identity at the time of the survey" (Park, 2016)

+
+

"...some terms aren’t mutually exclusive, and framing them as such is offensive, Mons said: 'For example, if we list Man, Woman, Non-Binary, Trans Man and Trans Woman, does that separation imply that someone who is trans and identifies as a man is not a man?'"

+
+

(Gossett, 2020) emphasis mine

+

Automatic detection of gender

+

In addition to reinforcing binarism, this approaches tends to reinforce sexism as well, and can further reinforce other prejudices as they intersect with gender.

+
+

"Moreover, these works tend to codify (literally, to write into code) essentialist, stereotypical characterizations of male and female communication patterns and present them as universal, context-free, scientific truths."

+
+

(kanarinka, 2016)

+

For transgender individuals, automatic categorization as a gender they are not is often a frequent and painful occurrence. We should take care not to introduce unnecessary causes of harm into our systems, especially when they are less accurate and helpful than user self-identification.

+

Using gender as a proxy for pronouns

+

Gender isn’t one-to-one with pronouns (or terms of address). If you want to know how to refer to someone, ask pronouns separately.

+

Patterns and solutions

+

Decline to specify

+

Including "decline to specify" or a similar opt-out response is always a positive addition unless the information is actually necessary. However, as mentioned above, don't use this as a replacement for the inclusion of terms that actually match the identity of the individual. Opting out should be a choice, not forced due to lack of other options.

+

Not listed here

+

Including "gender not listed here" or a similar response provides an out for anyone who does not feel represented by the available options. You could follow this up with a free text entry field.

+

Allow for changes

+

Avoid treating gender as an immutable category - make sure users have the ability to edit it.

+

Two- or multi- step approach

+

As mentioned briefly above, a two-step approach separates gender and assigned sex at birth, allowing healthcare systems additional information about the patient. See WPATH guidelines on EMR and associated reference for more details. +This may also be expanded to a multi-step approach, with questions covering some/all of

+
    +
  • Gender
    • +
  • Sex assigned at birth
    • +
  • Legal gender/sex designation
    • +
  • Transgender status +
      +
    • This may additionally benefit from self-identification as "gender diverse, gender non-conforming, gender variant, or gender expansive" (Stevens) either in the same question or as an additional question
      • +
    +
    • +
  • Intersex status
    • +
+

…but only if the data is necessary.

+

Organ inventory

+
+

Provide a means to maintain an inventory of a patient's medical transition history and current anatomy. An anatomical inventory would allow providers to record into the chart (and/or update as needed) the organs each individual patient has at any given point in time; this inventory would then drive any individualized auto-population of history and physical exam templates. This inventory should be uncoupled from the patient's recorded gender identity, assigned sex, or preferred pronouns.

+

...

+

These procedures, however, also should also be un-coupled from any gender-coded template so that an individual coded as male who has had a hysterectomy, for example, could have that history documented. In addition, sex-specific organ procedures and diagnoses relating to these organs should be un-coupled, so that (as an example) a prostatic ultrasound may be ordered on a patient registered as female, or a cervical pap smear ordered on a patient registered as male. Such practices would allow enhanced decision support for transgender-specific care, such as medication interactions, organ- and sex-specific preventive health alerts, or accommodations for sex-specific laboratory normal value ranges.

+
+

(Deutsch, et. al, 2013)

+

Refer to the reference linked above for detailed examples of organ or surgical history inventories.

+

Additional reference (added Sep 2024): (Bourns, 2023)

+

Differentiate with ‘cis’ and ‘trans’

+

Avoid questions that contrast ‘male’ and ‘trans male’ or any parallel set of terms. Either contrast ‘cis male’ and ‘trans male,' or allow respondents to choose multiple responses.

+ +

These systems add additional requirements and restrictions. In cases like these, it may be helpful to have an additional field for legal gender/sex designation (usually set to F, M, or X) in order to allow for alignment with existing documentation without preventing self-identification on the part of the individual.

+

Healthcare systems in particular may benefit from Organ inventory and Two- or multi- step approach.

+

Examples in existing systems

+

WPATH guidelines on EMR

+
    +
  • WPATH: World Professional Association for Transgender Health (WPATH, 2023)
    • +
  • EMR: Electronic Medical Records
    • +
+
+

Preferred name, gender identity, and pronoun preference, as identified by patients, should be included as demographic variables (such as with ethnicity). These would be captured in readily amendable, optional fields that are separate from the patient’s state-listed name and sex or gender designation, which may continue to be used for billing purposes in circumstances when the patient has not yet obtained legal change of name and/or sex or gender designation. Note that some patients may identify as ‘genderqueer’ and prefer the use of neither pronoun. While lists of current common gender identities, sex options, and pronoun options are provided [in original document, see source], ideally field parameters would be easily amended to reflect changing paradigms and social trends within transgender communities.

+
+

(Deutsch, et. al, 2013)

+

Facebook

+
+

"In 2014, Facebook expanded their gender options from 2 to 58 for English speakers in the US and UK. The gender options they added were created in consultation with the LGBTQIA community and range from 'gender non-conforming' to 'two-spirit' to 'trans female'. The corporation later added the ability to identify as more than one gender and to input a custom gender. ... While these changes may appear to be progressive, Facebook’s databases still resolve custom and non-binary genders to Male and Female on the backend based on the binary gender that users select at sign-up where the custom option is not available. Here is how the Facebook Marketing API views gender: 1 = Male, 2 = Female. So while a user and her friends may see her presented as the gender she elects, she is a 1 = Male or 2 = Female to any advertisers looking to purchase her attention."

+
+

(kanarinka, 2016)

+

Drupal

+

Uses a list of genders developed by the Open Demographics project. (McCabe and Beach, 2019) (Stevens)

+

Salesforce Health Cloud

+

Includes Male, Female, Other, and Decline to Specify as options for a gender field, and the field can be null. (Salesforce)

+

Adobe XDM

+

Includes Male, Female, Not Specified, and Non-specific. Defaults to not specifed. (Adobe) (Adobe)

+

Epic Healthcare EMR

+

Uses three different fields: sex assigned at birth, legal sex and gender identity. (Landman, 2017)

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gender/index.html b/_site/gender/index.html new file mode 100644 index 0000000..ce430f8 --- /dev/null +++ b/_site/gender/index.html @@ -0,0 +1,1290 @@ + + + + + + + gender? | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

gender?

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A page of handwritten notes with some loosely drawn charts, described further in the post. + + +

transcription

+

Headers and text in blockquotes are handwritten; plain text is image description.

+

Model 1: Binary

+

There are two dots spaced a bit apart, labeled 'Male' and 'Female'

+

Model 2: A spectrum, with male and female as the extremes

+

The same two dots from the previous diagram, now with a horizontal line connecting them.

+
+

Let's think about expanding this in two ways...

+
+

Following this, two arrows point downward to two columns titled Models 3a and 3b, separated by a squiggle.

+

Model 3a: Add an axis

+

The connected dots from Model 2. Now, a vertical axis rises midway between male and female, and its extreme is labeled 'agender.' Arrows helpfully indicate the directions of 'less gender' and 'more gender.' There is a dotted line between agender and male, suggesting a triangle shape.

+

Model 3b: Re-consider the endpoints

+

The connected dots from Model 2, but instead of the horizontal line ending at the points marked male and female, it continues off into seeming infinity.

+
+

These are just two points, not "extremes"

+
+

Model 4: "Color Wheel"

+

A grayscale circle simulating a color wheel, with a slice scaled up to examine. "Type" of gender is labeled as varying as the color wheel is circled, while "amount" of gendered is labeled as varying between the center and the edge of the circle.

+
+

If we wanted to "place" male and female here, they're probably regions, not discrete points.

+

Just as "sky blue" and "navy" are both blue, we have umbrella terms that contain or overlap other terms"

+
+

In correspondence with this text, the color wheel image has two areas circled in dotted lines, labeled 'male?' and 'female?'

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/girldick/index.html b/_site/girldick/index.html new file mode 100644 index 0000000..f409b35 --- /dev/null +++ b/_site/girldick/index.html @@ -0,0 +1,1294 @@ + + + + + + + girldick | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

girldick

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A butch cooking and wearing a cropped tee with blue cap sleeves that reads girldick in blue G.I.Joe font. + + +

To order this as a shirt, please fill out the order form. (Sep 2024: no longer taking orders via this method)

+

details

+

dimensions

+

3" x 8"

+

coloration

+

default: blue

+

available as

+

patch, print, greeting card, sticker, shirt, pin

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/give-to-trans-orgs-and-people/index.html b/_site/give-to-trans-orgs-and-people/index.html new file mode 100644 index 0000000..64c662a --- /dev/null +++ b/_site/give-to-trans-orgs-and-people/index.html @@ -0,0 +1,1326 @@ + + + + + + + give to trans orgs and people | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

give to trans orgs and people

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + Image unrelated to post. A close up on a flower bouquet in shades of purple, pink, and white. Centered is a large, almost soft-looking pink flower that is still partially closed up. + + +

This is a collation of responses to a fediverse post I made.

+

For reference, I also have a list set up at /give that lists a number of great nonprofits.

+

Collections

+ +

Orgs

+ +

People

+

If you are listed here and would like to be removed, just get in touch with me.

+

Aldercone Studio

+ +

héctor

+ +

Luke Orion

+ +

Pixel

+ +

Taj

+ +

Credit

+

Thank you to these wonderful folks (and many more who chose to remain uncredited) for the links/orgs:

+ + +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/gradient-purse-strap/index.html b/_site/gradient-purse-strap/index.html new file mode 100644 index 0000000..92da244 --- /dev/null +++ b/_site/gradient-purse-strap/index.html @@ -0,0 +1,1267 @@ + + + + + + + gradient purse strap | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

gradient purse strap

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + a coiled up purse strap in gradient cool colors - we can see green, teal, indigo, and a slightly pinkish purple. It has brass hardware and is stiched along its length with cream stitches. + + +

40-something inches long, brass hardware, custom dyed.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/green-memo-pad/index.html b/_site/green-memo-pad/index.html new file mode 100644 index 0000000..b32529c --- /dev/null +++ b/_site/green-memo-pad/index.html @@ -0,0 +1,1283 @@ + + + + + + + green memo pad | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

green memo pad

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + book +
    • + +
+ +
+ + + A three panel collage showcasing a small green memo pad. + + +

A green memo pad. The text block is held on by a piece of waxed thread around the spine, which allows it to be replaced if desired.

+

details

+

dimensions

+
    +
  • cover: 4 5/8" x 3 1/4"
    • +
  • pages: 4 1/2" x 3"
    • +
+

coloration

+
    +
  • cover: green
    • +
  • endpapers: blue fruits and vines w/ gold detailing, yellow w/ flecks
    • +
+

pages

+
    +
  • Strathmore Artagain in multiple colors, graph paper
    • +
  • 36 pages (24 Artagain, 12 graph paper)
    • +
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/greeting-loons/index.html b/_site/greeting-loons/index.html new file mode 100644 index 0000000..0a2c09a --- /dev/null +++ b/_site/greeting-loons/index.html @@ -0,0 +1,1277 @@ + + + + + + + greeting loons | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

greeting loons

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A pile of hand-printed A2 size greeting cards. A loon rearing up with outstretched wings spans the front and back of the cards. + + +

Original print greeting cards.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/greeting-quorbs/index.html b/_site/greeting-quorbs/index.html new file mode 100644 index 0000000..32ffdde --- /dev/null +++ b/_site/greeting-quorbs/index.html @@ -0,0 +1,1272 @@ + + + + + + + greeting quorbs | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

greeting quorbs

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A pile of hand-printed A2 size greeting cards. Only the front is visible, showing a particularly round quail. + + +

Original print greeting cards.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/guestbook/index.html b/_site/guestbook/index.html new file mode 100644 index 0000000..82f8861 --- /dev/null +++ b/_site/guestbook/index.html @@ -0,0 +1,1082 @@ + + + + + + + guestbook | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + +

guestbook

+ +

guestbook entries are manually added and moderated :)

+

yes, you may sign again even if you've been here before - just no spamming please!

+

write

+

if the embed below is not working for you, you can open the guestbook form in a new tab or just contact me any way you want with your desired message

+ +

read

+

J'myle Koretz on :

+
+

It was delightful to meet you at the Vashon art walk a couple weekends back. Kestrel was awesome, and your [Brooke's] jackets were so cool!

+
+

Jack on :

+
+

All the things you make and do are so cool and I feel so lucky every time I get to see them (including the ones that now live in my home!)

+
+

hello on :

+
+

thanks for being gay and weird pal

+
+

Fén (Spirits) on :

+
+

Hi you make really good art and crafts and have been awesome to get to know ^^ Keep on keeping on~

+
+

Olive on :

+
+

Hi! You're cool :))

+
+

Fern (Rainbow) on :

+
+

I think you're awesome and this is really impressive 🥺

+
+

handmade ghost on :

+
+

Everything Lee makes is a gift to the world--just knowing ze made something new brings me joy and sends me scrambling to this site!

+
+

jay on :

+
+

EGG

+
+

pqqq on :

+
+

Hello from Fedi! Your site is absolutely wonderful, and I love that you're adding a guestbook, too!!

+
+

Morgan on :

+
+

You make good art and good takes on gender 💜

+
+

Lisa on :

+
+

Ask not for whom the snoot is booped. It is booped for weevils.

+
+

nathanlovestrees on :

+
+

honk!

+
+

✨pencilears✨ on :

+
+

Hello! I'm glad we're still doing guest books on websites.

+
+

brhfl on :

+
+

hey hi! just giving you some test data and also basking in the nostalgia of a guestbook :)

+
+

Eedlipherus C. Bigribs on :

+
+

Signing the guestbook so you have data to format on the page lyao.

+

And this is a second paragraph, because, honestly, this is more interesting than the QA I get paid to do, so I'll just make this bit long enough to wrap for a few lines, yep, maybe a little bit more, uh huh, that's right, eat your heart out, Lorem Ipsum.

+
+

jade on :

+
+

Hi Lee!

+
+

alex tax1a on :

+
+

Hi!! signing the guestbook, so you have at least one datum.

+
+ + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/hair/index.html b/_site/hair/index.html new file mode 100644 index 0000000..37a80c6 --- /dev/null +++ b/_site/hair/index.html @@ -0,0 +1,1279 @@ + + + + + + + hair | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

hair

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A print in black ink of belly hair. + + +

Hand carved stamp of some tummy hair, in celebration of testosterone.

+

details

+

dimensions

+

4" x 6"

+

coloration

+

default: black

+

available as

+

patch, print, greeting card??

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/hand-dyed-gold-handspun/index.html b/_site/hand-dyed-gold-handspun/index.html new file mode 100644 index 0000000..c9767b7 --- /dev/null +++ b/_site/hand-dyed-gold-handspun/index.html @@ -0,0 +1,1267 @@ + + + + + + + hand-dyed gold handspun | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

hand-dyed gold handspun

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + yarn +
    • + +
+ +
+ + + 3 skeins, one small and two large, of a rich golden-orange handspun with light tonal effects, in about a DK weight + + +

Fiber from Paradise Fibers. 70% merino/30% nylon. Hand-dyed by me.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/handcombed-jacobs-handspun/index.html b/_site/handcombed-jacobs-handspun/index.html new file mode 100644 index 0000000..86a0b20 --- /dev/null +++ b/_site/handcombed-jacobs-handspun/index.html @@ -0,0 +1,1267 @@ + + + + + + + handcombed jacobs handspun | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

handcombed jacobs handspun

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + yarn +
    • + +
+ +
+ + + a skein of dark grey handspun yarn + + +

Fiber: Jacobs wool that I scoured and combed myself.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/handedness-toggle/index.html b/_site/handedness-toggle/index.html new file mode 100644 index 0000000..a7f71ed --- /dev/null +++ b/_site/handedness-toggle/index.html @@ -0,0 +1,1493 @@ + + + + + + + handedness toggle | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

handedness toggle

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A screenshot of the rescue trans rescue navbar centered on a button that shows a hand pointing left. + + +

Recently, I got an iPad for art and immediately fell down the rabbit hole of Glitch and web development.

+

When creating the rescue Trans rescue site, I started with a right-aligned navbar. While developing and testing on my iPad, I got in the habit of hovering my hand over the top-right corner of the tablet, always ready to try the light/dark toggle or switch pages.

+

And then I thought about left-handed people - left handed tablet or touchscreen users in particular. Reaching across the screen repeatedly would start to be a real drag, wouldn't it?

+

Ok, let's make a toggle!

+

(Want to just see the outcome? Head on down the page to the summary.)

+

the button

+

First we'll need some HTML for our button. I added this to my menu:

+
<button id="alignment"
+		title="toggle left/right navbar alignment"
+		aria-label="toggle left/right navbar alignment"
+		class="menu-link">
+	<!-- autopopulated by nav.js -->
+</button>
+

It's important to note here that I added it to the beginning of the menu list. I want it to be the first item in the list so that it points over the left side of the screen with nothing obstructing it.

+

handling narrow screens

+

Let's quickly take a moment to ensure that the toggle only shows up on wider screens with a bit of CSS:

+
@media (max-width: 500px) {
+	#alignment {
+		display: none;
+	}
+}
+

Now users on phones won't have an unhelpful button taking screen space.

+ +

Now let's move to nav.js and define some consts for ease of use. We're going to use Font Awesome icons for this button, so we'll go grab their HTML for the left and right pointing hands.

+
const ALIGN = "alignment"
+const LEFT = "left"
+const RIGHT = "right"
+
+const LEFT_ICON = '<i class="fa-regular fa-hand-point-left" aria-hidden="true"></i>';
+const RIGHT_ICON = '<i class="fa-regular fa-hand-point-right" aria-hidden="true"></i>';
+

We'll use localStorage to store and retrieve alignment preferences:

+
let align = localStorage.getItem(ALIGN);
+

and we'll grab the button we defined in HTML:

+
let alignToggle = document.getElementById(ALIGN);
+

setting icons

+

Next, let's structure out some functions. We'll fill them in more as we figure out what we need.

+
function setAlignRight() {
+	// If we're aligned on the right, the toggle should point to the left
+	alignToggle.innerHTML = LEFT_ICON;
+}
+
+function setAlignLeft() {
+	// If we're aligned on the left, the toggle should point to the right
+	alignToggle.innerHTML = RIGHT_ICON;
+}
+
+// This function changes the alignment to the given value
+// It also runs at startup to set alignment
+function changeAlign(align) {
+	switch (align) {
+		case LEFT:
+			setAlignLeft();
+			break;
+		case null:
+			// If nothing is set, default to right alignment
+			align = RIGHT;
+		case RIGHT:
+			setAlignRight();
+			break;
+	}
+	// Set localStorage for next time
+	localStorage.setItem(ALIGN, align);
+}
+
+// Run at startup
+changeAlign();
+
+// This function handles the actual flip-flopping of the alignment value
+function toggleAlign() {
+	if (align === LEFT) align = RIGHT;
+	else align = LEFT;
+
+	changeAlign(align);
+}
+
+// Attach the toggle function to the alignToggle as a click listener
+alignToggle.addEventListener("click", toggleAlign);
+

So that gets us the basic functionality of changing the icon when the toggle is clicked. However, it does nothing for the navbar alignment. What do we need for that?

+

alignment

+

Well, that depends on your navbar CSS. For this, let's run through the simplest possible version: your navbar is a flexbox and all items are treated equally. Maybe your CSS looks sorta like this:

+
#navbar {
+	position: sticky;
+	top: 0 px;
+	width: 100%;
+	display: flex;
+	/* This is the line that matters to us */
+	/* we'll want to swap between flex-start and flex-end */
+	justify-content: flex-end;
+}
+

Let's add that justify-content setting to our JS (as well as a line to fetch the navbar by id):

+
let navbar = document.getElementById("navbar");
+
+function setAlignRight() {
+	alignToggle.innerHTML = LEFT_ICON;
+	navbar.style.justifyContent = "flex-end";
+	// If you have other necessary style changes, add them here
+}
+
+function setAlignLeft() {
+	alignToggle.innerHTML = RIGHT_ICON;
+	navbar.style.justifyContent = "flex-start";
+	// If you have other necessary style changes, add them here
+}
+

Now, the menu should re-orient itself when we interact with the toggle. However, you'll notice that the left-aligned menu shows up in the same order as the right aligned menu: handedness toggle first, then the rest of the menu.

+

(Forgive the lack of continuity with the header image.)

+

the navbar of this site in dark mode. from left to right, there's pink and blue icons of: a hand pointing right, images, file folder, user/person, opened mail, and a lightbulb.

+

moving the button

+

I don't want that; I want the handedness toggle to always point, unobstructed, to the side of the screen it moves things to. So let's move it around when we set alignment. It'll need to be the first item in the menu list for right-handed alignment, and the last item for left-handed. We can do that with prepend() and append().

+
function setAlignRight() {
+	alignToggle.innerHTML = LEFT_ICON;
+	navbar.style.justifyContent = "flex-end";
+	navbar.prepend(alignToggle);
+}
+
+function setAlignLeft() {
+	alignToggle.innerHTML = RIGHT_ICON;
+	navbar.style.justifyContent = "flex-start";
+	navbar.append(alignToggle);
+}
+

Cool! Now we have a menu that re-aligns itself and repositions the alignment button.

+

The same navbar, now with elements reordered. The hand pointing right now lands at the end of the menu. Incidentally, the theme button has also been swapped and is at the start of the menu but that's not relevant.

+

keyboard navigation

+

Oooh, but wait: keyboard navigation is broken.

+

When I tab over to the alignment button and hit Enter/space, it does what we expect, but it also loses keyboard focus. Because of that little prepend()/append() move, the element is removed from the DOM and re-added in a new location - now without focus. We'll need to add focus back to the alignToggle manually, so it's not lost.

+

We can do that with the .focus() function:

+
function toggleAlign() {
+	if (align === LEFT) align = RIGHT;
+	else align = LEFT;
+
+	changeAlign(align);
+
+	// Replace focus on the toggle that's been moved
+	alignToggle.focus();
+}
+

Ok, now focus is maintained... but it also shows up after a mouse click, not just a keyboard interaction. That's a little irritating. How do we fix that?

+

managing focus

+

toggleAlign() is an event handler, which means it can optionally take an event var. For "click" events, that event var includes a field detail which provides the click count. This can be used to disambiguate single vs double clicks, or it can be used to test for keyboard interaction, which creates zero clicks.

+

Let's add that in:

+
function toggleAlign(event) {
+	if (align === LEFT) align = RIGHT;
+	else align = LEFT;
+
+	changeAlign(align);
+
+	// Zero clicks means this was a keyboard interaction
+	// Replace focus on the toggle that's been moved
+	if (event.detail === 0) alignToggle.focus();
+}
+

Now we should only replace visible focus for keyboard interactions.

+

Navbar showing handedness toggle in focus, pointing right. It has a bright blue outline, pink background, and dark icon image.

+

thanks for reading

+

Want to see further changes? Found a bug with this implementation? Contact me!

+
+

summary

+

Here's the referenced HTML, CSS, and JS in full:

+

HTML

+
<button id="alignment"
+		title="toggle left/right navbar alignment"
+		aria-label="toggle left/right navbar alignment"
+		class="menu-link">
+	<!-- autopopulated by nav.js -->
+</button>
+

CSS

+
#navbar {
+	position: sticky;
+	top: 0 px;
+	width: 100%;
+	display: flex;
+	/* nav.js handles justify-content instead */
+	/* justify-content: flex-end; */
+}
+
+/* Remove the handedness toggle on narrow screens */
+@media (max-width: 500px) {
+	#alignment {
+		display: none;
+	}
+}
+

JS

+
const ALIGN = "alignment"
+const LEFT = "left"
+const RIGHT = "right"
+
+const LEFT_ICON = '<i class="fa-regular fa-hand-point-left" aria-hidden="true"></i>';
+const RIGHT_ICON = '<i class="fa-regular fa-hand-point-right" aria-hidden="true"></i>';
+
+let align = localStorage.getItem(ALIGN);
+let alignToggle = document.getElementById(ALIGN);
+
+function setAlignRight() {
+	alignToggle.innerHTML = LEFT_ICON;
+	navbar.style.justifyContent = "flex-end";
+	navbar.prepend(alignToggle);
+}
+
+function setAlignLeft() {
+	alignToggle.innerHTML = RIGHT_ICON;
+	navbar.style.justifyContent = "flex-start";
+	navbar.append(alignToggle);
+}
+
+function changeAlign(align) {
+	switch (align) {
+		case LEFT:
+			setAlignLeft();
+			break;
+		case null:
+			align = RIGHT;
+		case RIGHT:
+			setAlignRight();
+			break;
+	}
+	localStorage.setItem(ALIGN, align);
+}
+
+changeAlign();
+
+function toggleAlign(event) {
+	if (align === LEFT) align = RIGHT;
+	else align = LEFT;
+
+	changeAlign(align);
+
+	if (event.detail === 0) alignToggle.focus();
+}
+
+alignToggle.addEventListener("click", toggleAlign);
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html b/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html new file mode 100644 index 0000000..0736553 --- /dev/null +++ b/_site/handspun-yarn-in-party-mix-and-orange-gold/index.html @@ -0,0 +1,1288 @@ + + + + + + + handspun yarn in party mix and orange-gold | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

handspun yarn in party mix and orange-gold

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
    + +
  • + + yarn +
    • + +
+ +
+ + + 4 skeins of handspun yarn, two in a somewhat pastel multicolor and two in a blend of orange, gold, and white. + + +

4 skeins of handspun yarn.

+

details

+

dimensions

+
    +
  • left skeins: +
      +
    • 50g, 60yds
      • +
    • 60g, 80yds
      • +
    +
    • +
  • right skeins: +
      +
    • 72g, 124 yds
      • +
    • 76g, 136 yds
      • +
    +
    • +
+

coloration

+
    +
  • left skeins: multicolor mix of blue, orange, purple, pink, green, and gray
    • +
  • right skeins: gold, orange, and white
    • +
+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/happy-bihrtday/index.html b/_site/happy-bihrtday/index.html new file mode 100644 index 0000000..c8dbc0e --- /dev/null +++ b/_site/happy-bihrtday/index.html @@ -0,0 +1,1283 @@ + + + + + + + happy biHRTday | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

happy biHRTday

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A card and print in the same design - a bouncy, cheery font reading 'happy biHRTday' + + +

details

+

dimensions

+

3" x 5"

+

coloration

+

default: black and a random accent color

+

available as

+

patch, print, greeting card

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/happy-solstice-2024/index.html b/_site/happy-solstice-2024/index.html new file mode 100644 index 0000000..44dc493 --- /dev/null +++ b/_site/happy-solstice-2024/index.html @@ -0,0 +1,1258 @@ + + + + + + + happy solstice 2024 | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

happy solstice 2024

+ +
+

+ posted on + + by Lee Cattarin +

+ + +
+ + + A digital card with front and back stitched together into one image. Front - a collage of photos - brooke with blue hair and kestrel wiggling in her lap; kestrel on his back with one back paw clutched in his mouth; lee sitting holding some custom art of kestrel, showing kestrel the pictures; lee looking intently through a long camera lens; brooke, back to the camera, swaggering across tidal flats in her hand-stitched jacket. over the photos, hand-lettering reads 'happy solstice!' in two shades of pink. Back - two photos - the duckies clustered around the camera; and kestrel leaping gracefully through shallow water with his tongue out in a blep. Overlaid text reads '~ Lee, Brooke, Kestrel, & the Flock' + + +

Hand-lettered digitally. Happy Solstice to you and yours.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/happy-solstice-2025/index.html b/_site/happy-solstice-2025/index.html new file mode 100644 index 0000000..732912b --- /dev/null +++ b/_site/happy-solstice-2025/index.html @@ -0,0 +1,1267 @@ + + + + + + + happy solstice 2025 | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

happy solstice 2025

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + front and back of our solstice card from this year, designed in postcard format. long alt incoming... front - 4 picture collage. 1 - i'm standing in the woods, looking to one side, wearing an elaborate knit scarf. 2 - silhouetted thistle-like flowers in front of a pink-purple sky. 3 - my wife brooke crouches down to draw a heart in charcoal on a beach log, with 'L + B' written inside. 4 - brooke stands on a driftwood-covered beach looking hella cool in mirrored shades. our dog kes stands in front of her and looks off to one side eagerly. overlaid is the words 'happy solstice' in cursive. back - split down the center like the back of a postcard. on the left side, a 5 picture collage. 1 - i stand on a rock at the edge of a calm alpine lake. overlaid is the words 'lee, brooke, kestrel, & the flock' in print lettering. 2 - an early spring fern curl. 3 - our six ducks, all facing to the left, not in a row but still very organized. 4 - brooke grins at the camera while hugging kestrel's head. kestrel looks maybe a bit distraught. 5 - silhouette of a heron in flight across an early morning blue sky. on the address side, i've added a dahlia to represent the stamp, and written 'you!' in the field that would normally hold the mailing address. + + +

Happy Solstice to you and yours.

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/heron/index.html b/_site/heron/index.html new file mode 100644 index 0000000..b51acb5 --- /dev/null +++ b/_site/heron/index.html @@ -0,0 +1,1284 @@ + + + + + + + heron | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

heron

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A print in black ink of a great blue heron, leaning downwards so that eir beak is level with eir feet. + + +

Hand carved stamp of a great blue heron. Based on a photo from birdpixel.

+

details

+

dimensions

+

4" x 8"

+

coloration

+

default: black

+

available as

+

patch, print, greeting card, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/_site/hummingbird-become-ungovernable/index.html b/_site/hummingbird-become-ungovernable/index.html new file mode 100644 index 0000000..af6679a --- /dev/null +++ b/_site/hummingbird-become-ungovernable/index.html @@ -0,0 +1,1284 @@ + + + + + + + hummingbird become ungovernable | hello hello + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + +
+ + + + + +
+

hummingbird become ungovernable

+ +
+

+ posted on + + by Lee Cattarin +

+ + + + +
+ + + A block print in black and orange ink of a rufous hummingbird, tail flared, hovering in midair. Clutched in eir tiny claws is a banner that waves in the wind and reads 'become ungovernable' + + +

Rufous hummingbirds are remarkably aggressive.

+

details

+

dimensions

+

6" x 6"

+

coloration

+

default: black and orange

+

available as

+

patch, print, greeting card, shirt

+ +
+ + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file