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.
-
-
-
-
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.
Recently I've been working on a single-page digital rendition of a zine complete with many hand-drawn images. The author wanted to be able to bring images up to a full-screen view, to either zoom in or to put the whole enlarged image on one screen with no scrolling. It was a real struggle to find resources on how to do this in an accessible manner, so I'm writing up what I did.
-
-
Fair warning: This solution is likely imperfect.
-
-
the dialog element
-
do you know how many tutorials want you to roll your own modals? It's a not-insignificant amount. W3Schools, top of the search results in many cases, recommends it in two places - image modals and responsive image modals. Several search results for "image modal" pop up div solutions - div modal 1, div modal 2, div modal 3.
-
If you don't know of the existence of <dialog>, a search for image modals will not get you there quickly.
Did I roll my own modal at first? Regretfully, yes. I'd used the <dialog> element before... several years ago... in a project I don't have access to anymore... Needless to say, I had forgotten about its existence.
-
Anyway, I got there. Eventually. So let's talk about modals and <dialog>.
-
what does <dialog> give us?
-
so, what do we get from the <dialog> element that we don't get from a <div> modal?
-
-
a semantically meaningful element
-
a backdrop that fills the screen behind the modal, styleable with ::backdrop
-
automatic use of the Esc key to close the modal
-
automatic focus trapping that prevents any tabbing within the page behind the modal (users can tab off the page into the browser buttons)
-
the JS functions .showModal() and .close()
-
if closedby is set to any, clicking outside the modal (anywhere on the backdrop) will also close the modal
-
automatic return of focus to the element that triggered the modal
-
the autofocus attribute for in-modal elements to set which element should receive focus on opening the modal
-
the open attribute which is set on the <dialog> when open and removed when closed (when you use the functions mentioned previously)
despite this, I found that in Firefox (but not Edge), the <dialog> itself was focusable. I have no idea why, but I tested this on a totally unstyled and unmodified page and still found it to be true. As a focusable element, it made no sense. It had no interactivity and could not be activated.
-
I'm still torn: do I add tabindex="-1"? MDN specifically says not to, but I'm pretty sure they're warning against making it focusable. Why warn against making it nonfocusable when it's not supposed to be focusable in the first place, after all?
-
At current, I'm ambivalent, but I've added tabindex="-1" to handle Firefox's poor behavior. Making the dialog focusable is unhelpful and confusing.
-
in addition to the <dialog>
-
here's what else I wrote...
-
html
-
besides the <dialog>, I gave my <img> elements tabindex="0" to make them focusable.
-
js
-
in modal.js, I created an openDialog() function that takes in the clicked image. It:
-
-
creates a new <img> element and copies over the src and alt attributes - importantly, it doesn't copy the full <img> because we don't want to copy that tabindex attribute
-
replaces the current <img> in the modal with our new copy with replaceChild() (or if there's no current one, it just appends)
-
calls dialog.showModal()
-
-
I gave my close button two event listeners, one that listens for click events and one that listens for a keydown of the space or enter keys. In the case of the keydown, it calls event.preventDefault() to stop the space key from scrolling the underlying page.
-
I also looped through all images and attached my openDialog() function to any image with a tabindex attribute (I had some images that weren't intended to be fullscreened, so they lacked tabindex). Again, I gave them listeners on both click and keydown.
-
css
-
here's the most relevant parts of the CSS:
-
-
dialog::backdrop was given a relatively calculated color - rgba(from var(--color-bg) r g b / .8) - as well as a blur
-
body:has(dialog[open]) has overflow: hidden set
-
dialog img uses a max-height as well as object-fit: contain
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?
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, gitisn'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
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
-
-
git for Windows packages a Linux-like terminal with a git GUI. This may be slightly friendlier for people who aren't at all familiar with Linux. If choosing git for Windows, see my installation instructions below
-
I use Windows Subsystem for Linux, or WSL, which gives you a Linux distribution within Windows. It's pretty smooth sailing at this point, but there's some idiosyncracies to conquer - like the fact that your Windows files and your Linux files are stored in different places. If choosing WSL, see my usage notes below
-
-
-
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:
-
-
if choosing to install Windows Terminal, check 'Add a Git Bash Profile to Windows Terminal' on the first options page
-
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
-
initial branch name: choose the 'Override' option and leave it set to "main"
-
everything else: keep the recommended choices
-
-
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:
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
-
-
-
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
-
-
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:
-
-
pwdprints 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 onlycd, we'll be brought back to the home directory; if we provide a directory path, we'll be taken to the provided directory
-
lslists 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:
-
-
create a new project on our local machine, or
-
work with an existing project
-
-
-
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:
-
-
a long string that identifies the commit
-
the author of the commit
-
the date it was created
-
the message written to describe the commit
-
-
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
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:
-
gitadd 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 revertdoesn'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:
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.
-
-
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
-
-
-
if we installed git for Windows, we should have Git Credential Manager (GCM)
-
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
-
-
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.
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.
-
-
set up a terminal and learned a couple indispensable commands
-
created a new project with git init
-
checked in constantly using git status
-
learned what a commit is, and how to use git log to view our commit history
-
used git add to add new files or file changes to a commit
-
created commits with git commit
-
undid a commit using git revert
-
talked about remotes, making a new Codeberg project, and using git remote to link that project to our local work
-
talked about git fetch and git pull
-
added our local work to the remote project using git push
-
and finally, set up some kind of credential management so we don't have to log in for everygit push!
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:
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.
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:
-
-
All referenced resource types
-
All referenced modules
-
-
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"'"-f2 - \
- |cut-d"@"-f1 -
-
-# this gets us strings like
-# ../../modules/vm/main.bicep
-grep-E"^module ""$file"\
- |cut-d"'"-f2 -
-
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. -ttrims newline characters. The <s do some redirection, and yes, the space between them matters.
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.
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.
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.
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.
--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"/"-f1 -)
-
-# this gets us strings like
-# resourceGroups
-resourceType=$(echo"$resource"|cut-d"/"-f2 -)
-
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.
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.
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:
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)
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.
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.
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, 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.
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)
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
[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
-
-
-
-
-
UI
-
file icons
-
color scheme
-
-
-
-
-
VSCode
-
yes
-
yes
-
yes[1]
-
-
-
Zed
-
yes
-
yes
-
yes[2]
-
-
-
Kate
-
no
-
yes
-
yes[2]
-
-
-
Lapce
-
yes
-
no
-
yes[3]
-
-
-
Pulsar
-
yes
-
no
-
yes[1]
-
-
-
Sublime Text
-
yes
-
yes
-
yes
-
-
-
-
[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.
[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.
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?
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.
-
Option 1, but better: redirect to a link tree
-
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.
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.
-
-
Creating a GitHub Pages site walks you through getting a repository set up and automatically publishing to a URL like "your-github-username.github.io" (don't worry, we'll get that custom domain name attached soon!)
-
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
recently I wrote several sites using Eleventy (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by heckin.technology. See ya, GitHub. Won't miss ya.
-
Originally, I compiled some of the things I've learned in a standalone site.
-
however, since I don't know how much I'll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I'll skip the intro to Markdown content. I'm also going to update them where I've learned more or to better match what's represented on this site.
I didn't want to just see posts that shared all tags, but rather posts that shared any tag
-
I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order
-
I wanted to exclude the posts that I could reach with between-post pagination
-
-
filters.js
-
after adjusting for those needs, I had the following in filters.js:
-
eleventyConfig.addFilter("excludeFromCollection",function(collection=[], urls=[this.ctx.page.url]){
- return collection.filter(post=> urls.indexOf(post.url)===-1);
-});
-
-eleventyConfig.addFilter("filterByTags",function(collection=[],...requiredTags){
- return collection.filter(post=>{
- return requiredTags.flat().some(tag=> post.data.tags.includes(tag));
- });
-});
-
-eleventyConfig.addFilter("randomize",function(array){
- // Create a copy of the array to avoid modifying the original
- let shuffledArray = array.slice();
-
- // Fisher-Yates shuffle algorithm
- for(let i = shuffledArray.length -1; i >0; i--){
- const j = Math.floor(Math.random()*(i +1));
- [shuffledArray[i], shuffledArray[j]]=[shuffledArray[j], shuffledArray[i]];
- }
-
- return shuffledArray;
-});
-
post.njk
-
I used this in my post layout. filterTagList comes with the base blog by default, and removes the tags "posts" and "all." head also comes with the base blog. postlist.njk is my modified-from-the-base-blog post layout.
-
{% set relevantTags = tags | filterTagList %}
-
-{% set olderPost = collections.posts | getPreviousCollectionItem %}
-{% set newerPost = collections.posts | getNextCollectionItem %}
-{% set urlsToExclude = [page.url, olderPost.url, newerPost.url]}
-
-{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(urlsToExclude) | randomize | head(3) %}
-{% if postlist.length %}
-<sectionclass="related-posts">
- <h2>related posts</h2>
- {% include "postlist.njk" %}
-</section>
-{% endif %}
-
and that sorts related posts.
-
-
featured images
-
images in 11ty use the Image Transform Plugin. I found it hard to find anything to reference while building this - a lot of sites in the template gallery are either text-heavy or not using the plugin - so I'm reproducing what I've got here for reference.
for any given post, my front matter references the image in this manner:
-
---
-image:
- src: sample-0.jpg
- alt: moss on a fencepost
----
-
-
image HTML transform
-
As mentioned, there's a plugin for images. If you started with the base blog, in eleventy.config.js, you'll probably find a chunk of code similar to this already in place:
-
eleventyConfig.addPlugin(eleventyImageTransformPlugin,{
- formats:["auto"],
-
- widths:[640],
- failOnError:true,
- htmlOptions:{
- imgAttributes:{
- // e.g. <img loading decoding> assigned on the HTML tag will override these values.
- loading:"lazy",
- decoding:"async",
- }
- },
-
- sharpOptions:{
- animated:true,
- },
-});
-
setting formats to "auto" helps - use whatever type of image you want, get that type out. The default settings that came with the Eleventy base blog didn't set a width, which I wanted (by default, images off my camera - like the hellebore featured image for this post - are almost 5k pixels wide). I also found it helpful to set failOnError to true for a little more feedback.
-
-
NOTE: It sure seems like Eleventy will fail your image processing if there's no alt text. While admirable, it would be nice if I could find any documentation for this!
-
-
passthrough copy
-
as I worked through this, I thought I needed a passthrough copy for a while. You don't - just let the plugin do its thing.
-
templating
-
I needed images to show up in 3 places:
-
-
In the lists of posts on the home page, I wanted each post to show its featured image
-
In the "related posts" section on each individual post, I wanted each related post to show its featured image
-
And of course, I wanted the post to show its own featured image
-
-
home page and related posts
-
both of these sections use the same template, which in my setup is called postlist.njk. Within the relevant links, I added the following:
6 posts per page, paginate data from collections.posts which we'll call just posts for short, and do it in reverse (aka, most recent posts show first).
There's two components to this, the bigger one being this pagination.njk template. Look, I like my little icons, ok? It takes an olderHref and a newerHref, and optionally an olderTitle and newerTitle.
{# idk why these are backwards either #}
-{% set newerHref = pagination.href.previous %}
-{% set olderHref = pagination.href.next %}
-{% include "pagination.njk" %}
-
-
Yup. The order of previous vs. next is totally unintuitive to me, too.
-
complex pagination
-
however, there's a catch. Tag pages are created via pagination! It's a lot harder to paginate those - you can't just use the front matter to set it up.
// note that this uses the lodash.chunk method, so you’ll have to import that
-eleventyConfig.addCollection("tagPagination",function(collection){
- // Get unique list of tags
- let tagSet =newSet(collection.getAllSorted().flatMap((post)=> post.data.tags ||[]));
- // Remove "structural" tags
- tagSet = tagSet.difference(newSet(["posts"]));
-
- // Get each item that matches the tag
- let paginationSize =6;
- let tagMap =[];
- let tagArray =[...tagSet];
-
- for(let tagName of tagArray){
- let tagItems = collection.getFilteredByTag(tagName);
- let pagedItems =chunk(tagItems.reverse(), paginationSize);
-
- for(let pageNumber =0, max = pagedItems.length; pageNumber < max; pageNumber++){
- tagMap.push({
- tagName: tagName,
- pageNumber: pageNumber,
- pageSize: pagedItems.length,
- pageData: pagedItems[pageNumber]
- });
- }
- }
-
- return tagMap;
-});
-
tag-pages.njk
-
in my tag-pages.njk file (or whatever you use to template out your tag pages):
-
---
-pagination:
- data: collections.tagPagination
- size: 1
- alias: tag
-eleventyComputed:
- permalink: /tags/{{ tag.tagName | slugify }}/% if tag.pageNumber %{{ tag.pageNumber + 1 }}/% endif %
- title: "Posts tagged {{ tag.tagName }}"
-eleventyExcludeFromCollections: true
----
-<h1>Posts tagged “{{ tag.tagName }}”</h1>
-
-{% set postlist = tag.pageData %}
-{% include "postlist.njk" %}
-
-{# idk why these are backwards either #}
-{% if tag.pageNumber > 0 %}
- {% set newerHref = pagination.href.previous %}
-{% endif %}
-{% if tag.pageNumber < tag.pageSize - 1 %}
- {% set olderHref = pagination.href.next %}
-{% endif %}
-{% include "pagination.njk" %}
today I tackled making the tag page more visually interesting.
-
preview the first featured image
-
first, I worked on previewing the first featured image. The focus here is on digging into collections[tag] (reversed!) to get to the data of the first post.
-
<ulclass="taglist">
-{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
- {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
- <li>
- <ahref="{{ tagUrl }}"class="taglist-link">
- {% set tagRecent = collections[tag] | reverse %}
- {% if tagRecent[0].data.image.src %}
- <imgsrc="/posts/img/{{ tagRecent[0].data.image.src }}"alt="{{ tagRecent[0].data.image.alt }}">
- {% else %}
- <divclass="missing-image"></div>
- {% endif %}
- <spanclass="post-tag">{{ tag }}</span>
- {% set numPosts = collections[tag].length %}
- ({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
- </a>
- </li>
-{% endfor %}
-</ul>
-
preview a collage of recent featured images
-
I found that having just the first featured image made the tag page hard to differentiate from any of the pages listing individual posts, so from there I moved to showing 4 images (or empty rectangles where there weren't four to show).
-
<ulclass="taglist">
-{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
- {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
- <li>
- <ahref="{{ tagUrl }}"class="taglist-link">
- <divclass="tag-imgs">
- {% set tagRecent = collections[tag] | reverse %}
- {% for i in range(0, 4) %}
- {% if tagRecent[i].data.image.src %}
- <imgsrc="/posts/img/{{ tagRecent[i].data.image.src }}"alt="{{ tagRecent[i].data.image.alt }}">
- {% else %}
- <divclass="missing-image"></div>
- {% endif %}
- {% endfor %}
- </div>
- <spanclass="post-tag">{{ tag }}</span>
- {% set numPosts = collections[tag].length %}
- ({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
- </a>
- </li>
-{% endfor %}
-</ul>
-
with a bit of display: grid, we're good to go, right?
-
handling multiple aspect ratios
-
this had worked so far because the photos on the lessons site are from my camera in landscape mode, producing neat, identical 3:2 aspect ratios. Let's throw a wrench in that and introduce a portrait-mode photo.
-
thankfully, the CSS property aspect-ratio makes this pretty straightforward, and object-fit finishes the job.
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).
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/_site/feed.xml b/_site/feed.xml
deleted file mode 100644
index 00744fc6..00000000
--- a/_site/feed.xml
+++ /dev/null
@@ -1,494 +0,0 @@
-
-
- hello hello
- Lee Cattarin... on the internet!
-
-
- 2026-05-06T00:00:00Z
- https://leecat.art/
-
- Lee Cattarin
- lee.cattarin@gmail.com
-
-
- fediLearns
-
- 2026-05-06T00:00:00Z
- https://leecat.art/fedilearns/
- <p>My new project <a href="https://fedilearns.fyi" target="_blank" rel="external">FediLearns</a> is a learning-focused classifieds page for the fediverse. Check it out!</p>
-
-
-
- accessible image modals
-
- 2026-03-22T00:00:00Z
- https://leecat.art/accessible-image-modals/
- <p>Recently I've been working on a single-page digital rendition of a zine complete with many hand-drawn images. The author wanted to be able to bring images up to a full-screen view, to either zoom in or to put the whole enlarged image on one screen with no scrolling. It was a real struggle to find resources on how to do this in an accessible manner, so I'm writing up what I did.</p>
-<blockquote>
-<p>Fair warning: This solution is likely imperfect.</p>
-</blockquote>
-<h2 id="the-dialog-element">the <code>dialog</code> element</h2>
-<p>do you know how many tutorials want you to roll your own modals? It's a not-insignificant amount. W3Schools, top of the search results in many cases, recommends it in two places - <a href="https://www.w3schools.com/howto/howto_css_modal_images.asp" target="_blank" rel="external">image modals</a> and <a href="https://www.w3schools.com/css/css3_images_modal.asp" target="_blank" rel="external">responsive image modals</a>. Several search results for "image modal" pop up div solutions - <a href="https://stackoverflow.com/questions/75598914/how-to-display-an-image-clicking-on-it-using-modal-window-on-html-css-and-js" target="_blank" rel="external">div modal 1</a>, <a href="https://dev.to/salehmubashar/create-an-image-modal-with-javascript-2lf3" target="_blank" rel="external">div modal 2</a>, <a href="https://www.youtube.com/watch?v=Y9TNHynFjaQ" target="_blank" rel="external">div modal 3</a>.</p>
-<p>If you don't know of the existence of <code><dialog></code>, a search for image modals will not get you there quickly.</p>
-<p>If you search for <em>accessible</em> image modals, you'll still hear about <code><div></code>s. Hell, <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/" target="_blank" rel="external">W3C's ARIA Authoring Practices Guide uses a <code><div></code></a>. You kinda have to go digging to read about the <a href="https://www.scottohara.me/blog/2023/01/26/use-the-dialog-element.html" target="_blank" rel="external">dialog element from Scott O'Hara</a> or find <a href="https://accessibleweb.dev/modals" target="_blank" rel="external">AccessibleWeb.dev's piece on modals</a>. Or you can go <a href="https://adrianroselli.com/2025/06/where-to-put-focus-when-opening-a-modal-dialog.html" target="_blank" rel="external">straight for Adrian Roselli</a> and find examples that use the native <code><dialog></code> element. Thanks Adrian!</p>
-<p>Did I roll my own modal at first? Regretfully, yes. I'd used the <code><dialog></code> element before... several years ago... in a project I don't have access to anymore... Needless to say, I had forgotten about its existence.</p>
-<p>Anyway, I got there. Eventually. So let's talk about modals and <code><dialog></code>.</p>
-<h3 id="what-does-dialog-give-us">what does <code><dialog></code> give us?</h3>
-<p>so, what do we get from the <code><dialog></code> element that we don't get from a <code><div></code> modal?</p>
-<ol>
-<li>a semantically meaningful element</li>
-<li>a backdrop that fills the screen behind the modal, styleable with <code>::backdrop</code></li>
-<li>automatic use of the <code>Esc</code> key to close the modal</li>
-<li>automatic focus trapping that prevents any tabbing within the page behind the modal (users can tab off the page into the browser buttons)</li>
-<li>the JS functions <code>.showModal()</code> and <code>.close()</code></li>
-<li>if <code>closedby</code> is set to <code>any</code>, clicking outside the modal (anywhere on the backdrop) will also close the modal</li>
-<li>automatic return of focus to the element that triggered the modal</li>
-<li>the <code>autofocus</code> attribute for in-modal elements to set which element should receive focus on opening the modal</li>
-<li>the <code>open</code> attribute which is set on the <code><dialog></code> when open and removed when closed (when you use the functions mentioned previously)</li>
-</ol>
-<p>and more. This is just the pieces in use for me. There's also things like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes" target="_blank" rel="external">setting forms so that submission closes the dialog</a> (point 1 in that list).</p>
-<h3 id="what-doesnt-it-give-us">what doesn't it give us?</h3>
-<ol>
-<li>a close button - gotta roll your own and attach the requisite <code>.close()</code> call (or rely on users hitting escape or clicking the backdrop)</li>
-<li>prevention of scroll on the rest of the page</li>
-</ol>
-<h3 id="a-bug">a bug</h3>
-<p>MDN warns:</p>
-<blockquote>
-<p>Do not add the <code>tabindex</code> property to the <code><dialog></code> element as it is not interactive and does not receive focus.</p>
-</blockquote>
-<p>— <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#additional_notes" target="_blank" rel="external"><code><dialog></code>: additional notes</a> (point 3 in that list).</p>
-<p>despite this, I found that in Firefox (but not Edge), the <em><code><dialog></code> itself was focusable</em>. I have no idea why, but I tested this on a totally unstyled and unmodified page and still found it to be true. As a focusable element, it made no sense. It had no interactivity and could not be activated.</p>
-<p>I'm still torn: do I add <code>tabindex="-1"</code>? MDN specifically says not to, but I'm pretty sure they're warning against making it <em>focusable</em>. Why warn against making it nonfocusable when <em>it's not supposed to be focusable in the first place</em>, after all?</p>
-<p>At current, I'm ambivalent, but I've added <code>tabindex="-1"</code> to handle Firefox's poor behavior. Making the dialog focusable is unhelpful and confusing.</p>
-<h2 id="in-addition-to-the-dialog">in addition to the <code><dialog></code></h2>
-<p>here's what else I wrote...</p>
-<h3 id="html">html</h3>
-<p>besides the <code><dialog></code>, I gave my <code><img></code> elements <code>tabindex="0"</code> to make them focusable.</p>
-<h3 id="js">js</h3>
-<p>in <code>modal.js</code>, I created an <code>openDialog()</code> function that takes in the clicked image. It:</p>
-<ul>
-<li>creates a new <code><img></code> element and copies over the <code>src</code> and <code>alt</code> attributes - importantly, it doesn't copy the full <code><img></code> because we <em>don't</em> want to copy that <code>tabindex</code> attribute</li>
-<li>replaces the current <code><img></code> in the modal with our new copy with <code>replaceChild()</code> (or if there's no current one, it just appends)</li>
-<li>calls <code>dialog.showModal()</code></li>
-</ul>
-<p>I gave my close button two event listeners, one that listens for click events and one that listens for a keydown of the space or enter keys. In the case of the keydown, it calls <code>event.preventDefault()</code> to stop the space key from scrolling the underlying page.</p>
-<p>I also looped through all images and attached my <code>openDialog()</code> function to any image with a <code>tabindex</code> attribute (I had some images that weren't intended to be fullscreened, so they lacked <code>tabindex</code>). Again, I gave them listeners on both click and keydown.</p>
-<h3 id="css">css</h3>
-<p>here's the most relevant parts of the CSS:</p>
-<ul>
-<li><code>dialog::backdrop</code> was given a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors" target="_blank" rel="external">relatively calculated</a> color - <code>rgba(from var(--color-bg) r g b / .8)</code> - as well as a blur</li>
-<li><code>body:has(dialog[open])</code> has <code>overflow: hidden</code> set</li>
-<li><code>dialog img</code> uses a <code>max-height</code> as well as <code>object-fit: contain</code></li>
-</ul>
-<h2 id="errors-questions">errors? questions?</h2>
-<p>reach out!</p>
-
-
-
- eleventy lessons
-
- 2026-02-19T00:00:00Z
- https://leecat.art/eleventy-lessons/
- <p>recently I wrote <em>several</em> sites using <a href="https://www.11ty.dev/" target="_blank" rel="external">Eleventy</a> (4? 5?). Including, over the past few days, rewriting this one! That's right, if you're reading this, we're now running on 11ty and hosted by <a href="https://heckin.technology/" target="_blank" rel="external">heckin.technology</a>. See ya, GitHub. Won't miss ya.</p>
-<p>Originally, I compiled some of the things I've learned in a standalone site.</p>
-<p>however, since I don't know how much I'll focus on that specific site - it is mostly a sample - I am re-publishing the most useful information here. I'll skip the intro to Markdown content. I'm also going to update them where I've learned more or to better match what's represented on this site.</p>
-<p>this will comprise of 4 parts: <a href="https://leecat.art/eleventy-lessons/#related-posts">related posts</a>, <a href="https://leecat.art/eleventy-lessons/#featured-images">featured images</a>, <a href="https://leecat.art/eleventy-lessons/#pagination">pagination</a>, and <a href="https://leecat.art/eleventy-lessons/#tag-image-preview">tag image preview</a>. Feel free to jump ahead, as none depend on the others.</p>
-<hr>
-<h2 id="related-posts">related posts</h2>
-<p>by default, the <a href="https://leecat.art/eleventy-lessons/github.com/11ty/eleventy-base-blog" target="_blank" rel="external">Eleventy base blog</a> comes with pagination between posts. Post 2 can take you to posts 1 and 3, etc.</p>
-<p>while that is useful for <em>this</em> site, when building another site I wanted to see a couple randomly-suggested posts that shared 1 or more tags.</p>
-<p>I started by referring to <a href="https://github.com/11ty/eleventy/discussions/2534" target="_blank rel=external"">this GitHub issue about related posts</a>. I had to fix a few errors that arose from the suggested code.</p>
-<p>I also wanted to make three changes:</p>
-<ol>
-<li>I didn't want to just see posts that shared <em>all</em> tags, but rather posts that shared <em>any</em> tag</li>
-<li>I wanted to randomly add a few posts instead of just getting whatever was first (with a shared tag) in the post order</li>
-<li>I wanted to exclude the posts that I could reach with between-post pagination</li>
-</ol>
-<h3 id="filters-js">filters.js</h3>
-<p>after adjusting for those needs, I had the following in <code>filters.js</code>:</p>
-<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"excludeFromCollection"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> urls<span class="token operator">=</span><span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>page<span class="token punctuation">.</span>url<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> urls<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>post<span class="token punctuation">.</span>url<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"filterByTags"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collection<span class="token operator">=</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span>requiredTags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">return</span> collection<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">post</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
- <span class="token keyword">return</span> requiredTags<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token operator">=></span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>tags<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"randomize"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token comment">// Create a copy of the array to avoid modifying the original</span>
- <span class="token keyword">let</span> shuffledArray <span class="token operator">=</span> array<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
- <span class="token comment">// Fisher-Yates shuffle algorithm</span>
- <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> shuffledArray<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">const</span> j <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>i <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">[</span>shuffledArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> shuffledArray<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>shuffledArray<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">,</span> shuffledArray<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span>
-
- <span class="token keyword">return</span> shuffledArray<span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
-<h3 id="post-njk">post.njk</h3>
-<p>I used this in my post layout. <code>filterTagList</code> comes with the base blog by default, and removes the tags "posts" and "all." <code>head</code> also comes with the base blog. <code>postlist.njk</code> is my modified-from-the-base-blog post layout.</p>
-<pre class="language-html"><code class="language-html">{% set relevantTags = tags | filterTagList %}
-
-{% set olderPost = collections.posts | getPreviousCollectionItem %}
-{% set newerPost = collections.posts | getNextCollectionItem %}
-{% set urlsToExclude = [page.url, olderPost.url, newerPost.url]}
-
-{% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection(urlsToExclude) | randomize | head(3) %}
-{% if postlist.length %}
-<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>related-posts<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>related posts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
- {% include "postlist.njk" %}
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span>
-{% endif %}</code></pre>
-<p>and that sorts related posts.</p>
-<hr>
-<h2 id="featured-images">featured images</h2>
-<p>images in 11ty use the <a href="https://www.11ty.dev/docs/plugins/image/#eleventy-transform" target="_blank" rel="external">Image Transform Plugin</a>. I found it hard to find anything to reference while building this - a lot of sites in the template gallery are either text-heavy or not using the plugin - so I'm reproducing what I've got here for reference.</p>
-<h3 id="file-structure">file structure</h3>
-<pre><code>content/
-|--img/
-| |--sample-0.jpg
-| |--sample-1.jpg
-| `--etc
-|--posts/
-| |--lesson-0-front-matter-and-urls.md
-| |--lesson-1-headings-paragraphs-and-horizontal-lines.md
-| `--etc
-`--etc
-</code></pre>
-<h3 id="front-matter">front matter</h3>
-<p>for any given post, my front matter references the image in this manner:</p>
-<pre><code>---
-image:
- src: sample-0.jpg
- alt: moss on a fencepost
----
-</code></pre>
-<h3 id="image-html-transform">image HTML transform</h3>
-<p>As mentioned, there's a plugin for images. If you started with the base blog, in <code>eleventy.config.js</code>, you'll probably find a chunk of code similar to this already in place:</p>
-<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addPlugin</span><span class="token punctuation">(</span>eleventyImageTransformPlugin<span class="token punctuation">,</span> <span class="token punctuation">{</span>
- <span class="token literal-property property">formats</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"auto"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
-
- <span class="token literal-property property">widths</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">640</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
- <span class="token literal-property property">failOnError</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
- <span class="token literal-property property">htmlOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
- <span class="token literal-property property">imgAttributes</span><span class="token operator">:</span> <span class="token punctuation">{</span>
- <span class="token comment">// e.g. <img loading decoding> assigned on the HTML tag will override these values.</span>
- <span class="token literal-property property">loading</span><span class="token operator">:</span> <span class="token string">"lazy"</span><span class="token punctuation">,</span>
- <span class="token literal-property property">decoding</span><span class="token operator">:</span> <span class="token string">"async"</span><span class="token punctuation">,</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
-
- <span class="token literal-property property">sharpOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
- <span class="token literal-property property">animated</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
-<p>setting <code>formats</code> to "auto" helps - use whatever type of image you want, get that type out. The default settings that came with the Eleventy base blog didn't set a <code>width</code>, which I wanted (by default, images off my camera - like the hellebore featured image for this post - are almost 5k pixels wide). I also found it helpful to set <code>failOnError</code> to true for a little more feedback.</p>
-<blockquote>
-<p>NOTE: It sure seems like Eleventy will fail your image processing if there's no alt text. While admirable, it would be nice if I could find any documentation for this!</p>
-</blockquote>
-<h3 id="passthrough-copy">passthrough copy</h3>
-<p>as I worked through this, I thought I needed a passthrough copy for a while. You don't - just let the plugin do its thing.</p>
-<h3 id="templating">templating</h3>
-<p>I needed images to show up in 3 places:</p>
-<ul>
-<li>In the lists of posts on the home page, I wanted each post to show its featured image</li>
-<li>In the "related posts" section on each individual post, I wanted each related post to show its featured image</li>
-<li>And of course, I wanted the post to show its own featured image</li>
-</ul>
-<h3 id="home-page-and-related-posts">home page and related posts</h3>
-<p>both of these sections use the same template, which in my setup is called <code>postlist.njk</code>. Within the relevant links, I added the following:</p>
-<pre class="language-html"><code class="language-html">{% if post.data.image.src %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/{{ post.data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ post.data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-{% else %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
-{% endif %}</code></pre>
-<h3 id="post-body">post body</h3>
-<p>the post body looks similar:</p>
-<pre class="language-html"><code class="language-html">{% if image.src %}
-<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</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>featured-img<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/posts/img/{{ image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-{% endif %}</code></pre>
-<p>together, that sets up featured images for posts.</p>
-<hr>
-<h2 id="pagination">pagination</h2>
-<h3 id="simple-pagination">simple pagination</h3>
-<p><a href="https://www.11ty.dev/docs/pagination/" target="_blank" rel="external">Post pagination in Eleventy is pretty straightforward</a>, mostly requiring some specific front matter.</p>
-<p>The home page pagination I have set up here looks like the following (in <code>index.njk</code>):</p>
-<pre><code>---
-pagination:
- data: collections.posts
- size: 13
- alias: posts
- reverse: true
----
-</code></pre>
-<p>6 posts per page, paginate data from <code>collections.posts</code> which we'll call just <code>posts</code> for short, and do it in reverse (aka, most recent posts show first).</p>
-<p><a href="https://www.11ty.dev/docs/pagination/nav" target="_blank" rel="external">You'll also likely want previous and next buttons</a>. I did. Here's what I have...</p>
-<h4 id="pagination-njk">pagination.njk</h4>
-<p>There's two components to this, the bigger one being this <code>pagination.njk</code> template. Look, I like my little icons, ok? It takes an <code>olderHref</code> and a <code>newerHref</code>, and optionally an <code>olderTitle</code> and <code>newerTitle</code>.</p>
-<pre class="language-html"><code class="language-html">{% if olderHref or newerHref %}
-<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</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>pagination<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</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>pagination {% if inPost %}post-pagination{% endif %}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- {% if olderHref %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>older<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>{{ olderHref }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</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>fa-solid fa-hand-point-left<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
- {{ olderTitle or "older" }}
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
- {% endif %}
- {% if newerHref %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>newer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>{{ newerHref }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- {{ newerTitle or "newer" }}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</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>fa-solid fa-hand-point-right<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
- {% endif %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span>
-{% endif %}</code></pre>
-<h4 id="calling-the-template">calling the template</h4>
-<p>From <code>index.njk</code> we can <code>include "pagination.njk"</code>:</p>
-<pre><code>{# idk why these are backwards either #}
-{% set newerHref = pagination.href.previous %}
-{% set olderHref = pagination.href.next %}
-{% include "pagination.njk" %}
-</code></pre>
-<p>Yup. The order of previous vs. next is totally unintuitive to me, too.</p>
-<h3 id="complex-pagination">complex pagination</h3>
-<p>however, there's a catch. <a href="https://www.11ty.dev/docs/quicktips/tag-pages/" target="_blank" rel="external">Tag pages are <em>created</em> via pagination</a>! It's a lot harder to paginate those - you can't just use the front matter to set it up.</p>
-<p>I untangled <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-445236776" target="_blank" rel="external">this GitHub issue about double-layered pagination</a> and came to the following solution...</p>
-<h4 id="eleventy-config-js">eleventy.config.js</h4>
-<p>in <code>eleventy.config.js</code>:</p>
-<pre class="language-js"><code class="language-js"><span class="token comment">// note that this uses the lodash.chunk method, so you’ll have to import that</span>
-eleventyConfig<span class="token punctuation">.</span><span class="token function">addCollection</span><span class="token punctuation">(</span><span class="token string">"tagPagination"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">collection</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token comment">// Get unique list of tags</span>
- <span class="token keyword">let</span> tagSet <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>collection<span class="token punctuation">.</span><span class="token function">getAllSorted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">flatMap</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">post</span><span class="token punctuation">)</span> <span class="token operator">=></span> post<span class="token punctuation">.</span>data<span class="token punctuation">.</span>tags <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token comment">// Remove "structural" tags</span>
- tagSet <span class="token operator">=</span> tagSet<span class="token punctuation">.</span><span class="token function">difference</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"posts"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
- <span class="token comment">// Get each item that matches the tag</span>
- <span class="token keyword">let</span> paginationSize <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
- <span class="token keyword">let</span> tagMap <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
- <span class="token keyword">let</span> tagArray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>tagSet<span class="token punctuation">]</span><span class="token punctuation">;</span>
-
- <span class="token keyword">for</span><span class="token punctuation">(</span> <span class="token keyword">let</span> tagName <span class="token keyword">of</span> tagArray<span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">let</span> tagItems <span class="token operator">=</span> collection<span class="token punctuation">.</span><span class="token function">getFilteredByTag</span><span class="token punctuation">(</span>tagName<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token keyword">let</span> pagedItems <span class="token operator">=</span> <span class="token function">chunk</span><span class="token punctuation">(</span>tagItems<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> paginationSize<span class="token punctuation">)</span><span class="token punctuation">;</span>
-
- <span class="token keyword">for</span><span class="token punctuation">(</span> <span class="token keyword">let</span> pageNumber <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> max <span class="token operator">=</span> pagedItems<span class="token punctuation">.</span>length<span class="token punctuation">;</span> pageNumber <span class="token operator"><</span> max<span class="token punctuation">;</span> pageNumber<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- tagMap<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
- <span class="token literal-property property">tagName</span><span class="token operator">:</span> tagName<span class="token punctuation">,</span>
- <span class="token literal-property property">pageNumber</span><span class="token operator">:</span> pageNumber<span class="token punctuation">,</span>
- <span class="token literal-property property">pageSize</span><span class="token operator">:</span> pagedItems<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
- <span class="token literal-property property">pageData</span><span class="token operator">:</span> pagedItems<span class="token punctuation">[</span>pageNumber<span class="token punctuation">]</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
-
- <span class="token keyword">return</span> tagMap<span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
-<h4 id="tag-pages-njk">tag-pages.njk</h4>
-<p>in my <code>tag-pages.njk</code> file (or whatever you use to template out your tag pages):</p>
-<pre class="language-html"><code class="language-html">---
-pagination:
- data: collections.tagPagination
- size: 1
- alias: tag
-eleventyComputed:
- permalink: /tags/{{ tag.tagName | slugify }}/% if tag.pageNumber %{{ tag.pageNumber + 1 }}/% endif %
- title: "Posts tagged {{ tag.tagName }}"
-eleventyExcludeFromCollections: true
----
-<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Posts tagged “{{ tag.tagName }}”<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
-
-{% set postlist = tag.pageData %}
-{% include "postlist.njk" %}
-
-{# idk why these are backwards either #}
-{% if tag.pageNumber > 0 %}
- {% set newerHref = pagination.href.previous %}
-{% endif %}
-{% if tag.pageNumber < tag.pageSize - 1 %}
- {% set olderHref = pagination.href.next %}
-{% endif %}
-{% include "pagination.njk" %}</code></pre>
-<p>note the pagination checking <code>tag.pageNumber</code> against <code>tag.PageSize</code> - the <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-445236776" target="_blank" rel="external">original suggested solution</a> in the GitHub post creates an issue where the pagination loops through <em>all</em> of the tag pages bit-by-bit. This sorts that - hat tip to <a href="https://github.com/11ty/eleventy/issues/332#issuecomment-1248185406" target="_blank" rel="external">TheReyzar who mentioned the issue and showed part of their solution</a>.</p>
-<h4 id="filters-js-again">filters.js (again)</h4>
-<p>finally, in my <code>filters.js</code> file, I add the <code>tagPagination</code> tag to the tags that get filtered using <code>filterTagList</code>:</p>
-<pre class="language-js"><code class="language-js">eleventyConfig<span class="token punctuation">.</span><span class="token function">addFilter</span><span class="token punctuation">(</span><span class="token string">"filterTagList"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">filterTagList</span><span class="token punctuation">(</span><span class="token parameter">tags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">return</span> <span class="token punctuation">(</span>tags <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">tag</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string">"all"</span><span class="token punctuation">,</span> <span class="token string">"posts"</span><span class="token punctuation">,</span> <span class="token string">"tagPagination"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
-<hr>
-<h2 id="tag-image-preview">tag image preview</h2>
-<p>today I tackled making the tag page more visually interesting.</p>
-<h3 id="preview-the-first-featured-image">preview the first featured image</h3>
-<p>first, I worked on previewing the first featured image. The focus here is on digging into <code>collections[tag]</code> (reversed!) to get to the data of the first post.</p>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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>taglist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
- {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>{{ tagUrl }}<span class="token punctuation">"</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>taglist-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- {% set tagRecent = collections[tag] | reverse %}
- {% if tagRecent[0].data.image.src %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/posts/img/{{ tagRecent[0].data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ tagRecent[0].data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- {% else %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
- {% endif %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>post-tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ tag }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
- {% set numPosts = collections[tag].length %}
- ({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
-{% endfor %}
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
-<h3 id="preview-a-collage-of-recent-featured-images">preview a collage of recent featured images</h3>
-<p>I found that having just the first featured image made the tag page hard to differentiate from any of the pages listing individual posts, so from there I moved to showing 4 images (or empty rectangles where there weren't four to show).</p>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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>taglist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-{% for tag in collections | getKeys | filterTagList | sortAlphabetically %}
- {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>{{ tagUrl }}<span class="token punctuation">"</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>taglist-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>tag-imgs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- {% set tagRecent = collections[tag] | reverse %}
- {% for i in range(0, 4) %}
- {% if tagRecent[i].data.image.src %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/posts/img/{{ tagRecent[i].data.image.src }}<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{{ tagRecent[i].data.image.alt }}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
- {% else %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>missing-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
- {% endif %}
- {% endfor %}
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</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>post-tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ tag }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
- {% set numPosts = collections[tag].length %}
- ({{ numPosts }} post{% if numPosts > 1 %}s{% endif %})
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
-{% endfor %}
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre>
-<p>with a bit of <code>display: grid</code>, we're good to go, right?</p>
-<h4 id="handling-multiple-aspect-ratios">handling multiple aspect ratios</h4>
-<p>this had worked so far because the photos on the lessons site are from my camera in landscape mode, producing neat, identical 3:2 aspect ratios. Let's throw a wrench in that and introduce a portrait-mode photo.</p>
-<p>thankfully, the CSS property <code>aspect-ratio</code> makes this pretty straightforward, and <code>object-fit</code> finishes the job.</p>
-<pre class="language-css"><code class="language-css"><span class="token selector">.taglist-link img</span> <span class="token punctuation">{</span>
- <span class="token property">aspect-ratio</span><span class="token punctuation">:</span> 3 / 2<span class="token punctuation">;</span>
- <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
-<span class="token punctuation">}</span></code></pre>
-<p>(I also set the <code>missing-img</code> <code><div></code>s to have the same aspect ratio.)</p>
-<hr>
-<p>There's the good stuff from <a href="https://inherentlee.codeberg.page/lessons/" target="_blank" rel="external">11ty Lessons</a>. Hope you enjoyed.</p>
-
-
-
- crow
-
- 2026-02-09T00:00:00Z
- https://leecat.art/crow/
-
-
-
- screen reader optimizations
-
- 2026-02-06T00:00:00Z
- 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"><</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"><</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"></</span>span</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</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"><</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"><</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"></</span>span</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>span</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</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><span></code>s did.</p>
-<p>at least with fairly default settings in NVDA, the <code><span></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><a></code> tag isn't broken into three links. But the <code><span></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"><</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"><</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"></</span>span</span><span class="token punctuation">></span></span>
- <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</span>span</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation"></</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>
-
-
-
- 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>
-
-
-
\ No newline at end of file
diff --git a/_site/fire-and-ice-handspun/index.html b/_site/fire-and-ice-handspun/index.html
deleted file mode 100644
index f5ff8d7f..00000000
--- a/_site/fire-and-ice-handspun/index.html
+++ /dev/null
@@ -1,1676 +0,0 @@
-
-
-
-
-
-
-
-
-fire & ice handspun | hello hello
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- skip
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
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):
-
-
...Legal
-
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:
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
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
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.
Drupal's gender field includes the following guidance in its description:
-
-
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
....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.
If you do collect gender data, inform the user what it is used for and who it will be shared with.
-
Anti-patterns
-
Legal gender markers
-
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.
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.
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."
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?'"
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."
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.
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.
-
Healthcare or legal systems
-
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.
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.
"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."
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?'
Advocates for Trans Equality (A4TE) (formerly National Center for Transgender Equality (NCTE) and Transgender Legal Defense and Education Fund (TLDEF))
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.
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:
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:
Now users on phones won't have an unhelpful button taking screen space.
-
nav.js
-
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.
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.
-
functionsetAlignRight(){
- // If we're aligned on the right, the toggle should point to the left
- alignToggle.innerHTML =LEFT_ICON;
-}
-
-functionsetAlignLeft(){
- // 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
-functionchangeAlign(align){
- switch(align){
- caseLEFT:
- setAlignLeft();
- break;
- casenull:
- // If nothing is set, default to right alignment
- align =RIGHT;
- caseRIGHT:
- 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
-functiontoggleAlign(){
- 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");
-
-functionsetAlignRight(){
- alignToggle.innerHTML =LEFT_ICON;
- navbar.style.justifyContent ="flex-end";
- // If you have other necessary style changes, add them here
-}
-
-functionsetAlignLeft(){
- 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.)
-
-
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().
Cool! Now we have a menu that re-aligns itself and repositions the alignment button.
-
-
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:
-
functiontoggleAlign(){
- 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:
-
functiontoggleAlign(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.
-
-
thanks for reading
-
Want to see further changes? Found a bug with this implementation? Contact me!
A hand carved set of 4 stamps make up this iris print.
-
details
-
dimensions
-
-
5 x 7 inch print
-
3.5 x 5 or 5 x 7 inch greeting card
-
-
coloration
-
default: varies. green stem and yellow leafy bits are standard, and iris petals are usually in a pink, purple, or orange with dark blue or purple detailing. other colors on request.
in this pattern, you will be creating floats on the front of the work, then picking them up and knitting into them 3 rows later. Do this as part of the stitch you are working, not instead of! You should have the same number of stitches afterwards.
-
when you pick up a float, you want it to sit in front of the worked stitch, and untwisted. To achieve this, I have been catching the float on my right needle by dipping the needle down and under the float, from the front to the back. From there, I work the stitch, then slip the float over the new stitch on my right needle.
-
knit flat
-
cast on
-
knit flat, the pattern repeat uses 6n + 1 stitches. In the swatch shown, I cast on 29 stitches - 2 on each side for selvedge, then 25 -- 6 * 4 + 1. To simplify things, I'll write the pattern for the swatch, selvedge and all - but please adapt as you see fit.
-
with MC, cast on 29 stitches.
-
establish the pattern
-
-
row 0 (WS): with MC, knit to last stitch, sl1 wyif
-
row 1 (RS):
-
-
with MC, k2
-
[with CC, k1; with MC, k5] * 4, then with CC, k1
-
with MC, k1, sl1 wyif
-
-
-
row 2 (WS):
-
-
with MC, k1, p1
-
[with CC, k1 and leave working yarn on RS; with MC, p5] * 4, then with CC, k1 and bring working yarn back to WS
-
with MC, p1, sl1 wyif
-
-
-
-
pattern repeat
-
-
row 3 (RS): with MC, knit to last stitch, sl1 wyif
-
row 4 (WS): with MC, k1, purl to last stitch, sl1 wyif
-
row 5 (RS):
-
-
with MC, k5
-
[with CC, k1 into the float from 3 rows below; with MC, k5] * 4
-
with MC, k4, sl1 wyif
-
-
-
row 6 (RS):
-
-
with MC, k1, p4
-
[with CC, k1 and leave working yarn on RS; with MC, p5] * 4 -- on the last repeat, move working yarn back to WS before purling
-
with MC, p4, sl1 wyif
-
-
-
rows 7-8: repeat rows 3-4
-
row 9 (RS):
-
-
with MC, k2
-
[with CC, k1 into the float from 3 rows below; with MC, k5] * 4, then with CC, k1
-
with MC, k1, sl1 wyif
-
-
-
row 10 (WS):
-
-
with MC, k1, p1
-
[with CC, k1 and leave working yarn on RS; with MC, p5] * 4, then with CC, k1 and bring working yarn back to WS
-
with MC, p1, sl1 wyif
-
-
-
-
close the pattern
-
end after rows 5 or 9 of the pattern repeat. replace row 6 or 10 with the following:
-
-
row 6 alteration:
-
-
with MC, k1, p4
-
[with CC, k1; with MC, p5] * 4
-
with MC, p4, sl1 wyif
-
-
-
row 10 alteration:
-
-
with MC, k1, p1
-
[with CC, k1; with MC, p5] * 4, then with CC, k1
-
with MC, p1, sl1 wyif
-
-
-
-
to end my swatch, I did the following:
-
-
row (RS): with MC, knit to last stitch, sl1 wyif
-
row (WS): with MC, k1, purl to last stitch, sl1 wyif
-
row (RS): with MC, bind off
-
-
knit in the round
-
cast on
-
with MC, cast on a multiple of 6 stitches. knit in plain stockinette until you are ready to start the pattern.
-
establish the pattern
-
-
row 1:
-
-
[with CC, k1; with MC, k5] repeat to last 6 stitches
-
with CC, k1 and leave working yarn on RS; with MC, k5
-
-
-
row 2:
-
-
[with CC, p1 and leave working yarn on RS; with MC, k5] repeat to last 6 stitches
-
with CC, p1 and move working yarn to WS; with MC, k5
-
-
-
-
pattern repeat
-
-
rows 3-4: with MC, knit all stitches
-
row 5:
-
-
with MC, k3
-
[with CC, k1 into the float from 3 rows below; with MC, k5] repeat to last 3 stitches
-
with CC, k1 and leave working yarn on RS; with MC, k2
-
-
-
row 6:
-
-
with MC, k3
-
[with CC, p1 and leave working yarn on RS; with MC, k5] repeat to last 3 stitches
-
with CC, p1 and moving working yarn to WS; with MC, k2
-
-
-
rows 7-8: repeat rows 3-4
-
row 9:
-
-
[with CC, k1 into the float from 3 rows below; with MC, k5] repeat to last 6 stitches
-
with CC, k1 into the float from 3 rows below and leave working yarn on RS; with MC, k5
-
-
-
rows 10:
-
-
[with CC, p1 and leave working yarn on RS; with MC, k5] repeat to last 6 stitches
-
with CC, p1 and move working yarn to WS; with MC, k5
-
-
-
-
close the pattern
-
end after rows 5 or 9 of the pattern repeat. replace row 6 or 10 with the following:
-
-
row 6 alteration:
-
-
with MC, k3
-
[with CC, p1; with MC, k5] repeat to last 3 stitches
-
with CC, p1; with MC, k2
-
-
-
row 10 alteration: [with CC, p1; with MC, k5] repeat for all stitches
-
-
with MC, knit in plain stockinette until you want to bind off, then bind off.
cardboard templates have been really handy for the spacing of rivets and such. I use cereal boxes since they are not corrugated.
-
-
tools
-
If I have linked a tool, I really like that specific tool and find it stands out. Otherwise, idk, I've used precisely one edge beveler, I have no idea how it compares.
-
-
(need to have) some kind of scratch awl for marking
-
(need to have) cutproof mat
-
(need to have basically whenever you are using a mallet) "poundo board" or cutting board (this is just an example, I got mine elsewhere) - importantly, this is distinct from your cutproof mat. you can use this in place of your cutproof mat but it tends to pick up a lot of punctures which can leave indents in your leather with pressure - so I only use mine for mallet-ing and otherwise use my cutproof mat
-
(nice to have) pattern plastic - but like I said above you can use non-corrugated cardboard
-
(nice to have) acrylic leather thickness gauge - but you can also just use a ruler or calipers, or learn to gauge by eye/feel
-
-
cutting
-
-
(need to have) metal cork-backed ruler (cork backing will keep it from slip-sliding around)
(nice to have for small objects with a lot of layers at the seams, like wallets) skiving knife of some kind. there's a lot of different types out there. I have a CS Osborne leather knife and I don't love it, but idk if that's just because I am still learning how to skive.
-
-
you're supposed to skive on a fucken rock so as not to absolutely wreck your cutproof mat. I haven't got my rock yet but I haven't ruined my mat yet either.
-
ok so I got a skiving knife from Weaver and it definitely beats out the CS Osborne leather knife
-
-
-
-
edging and burnishing
-
-
(nice to have) edge beveler
-
(need to have) sandpaper in maybe two grits. I have 100 and 600 sitting around right now
if you don't want to go in on a $50 push drill, start with just some simple single-hole punches or a rotary punch. rotary punches are pretty heavily recommended since they come with a range of punch sizes; I avoid them like the plague because I have small shitty hands and I think those would pair poorly with a rotary punch.
-
if you're going to be attaching buckles, you'll need oblong holes for the buckle tongue. two options:
-
-
punch a standard hole at each end of your eventual oblong, then using a ruler and sharp small blade cut between those holes to create your oblong
-
-
get an oblong punch. shaped punches are expensive as shit but if you're doing more than a few buckles this is worth it.
-
-
-
another shaped punch: the english point strap end punch. I don't own this yet but am heavily considering it if I am going to make more harnesses (and I am). you don't specifically need english point - there's other strap end styles - but having a strap end punch in the size of your choosing is useful for harnesses, belts, anything with a lot of straps.
-
-
with strap end punches, you can use a larger punch on a smaller strap (for an imperfect result, tbf) but not vice versa
-
there are also strap end acrylic templates out there on several retailers sites - I have a tandy one
-
-
-
-
riveting, snapping, etc
-
-
for any given size/brand of rivets, you can usually buy a setter and anvil for maybe $25 together
-
-
also I have one extra of both of those specific linked items, so if you're short on cash lmk and I will ship em to ya - since I have switched over to the next option
-
-
-
however, if you think you might get really into leatherworking, or if you think you will be getting multiple sizes of rivets, attaching snaps, attaching other types of rivet-style clasps, whatever, I would highly recommend this setter post and base and a rivet setter die or whichever setter die you need for your specific thing
-
-
these dies also work with larger presses and make it much more possible to transition from a hand press to a full press without having to re-buy all your dies
-
according to Corter Leather at the very least (I don't really have the experience to make a full comparison) this system is much more reliable for well-balanced, well-rounded rivets, snaps, etc
-
-
-
-
stitching
-
-
(nice to have) wing divider for drawing stitching lines
-
(need to have) stitching chisels! if you want to save some money, you mostly need the 6-tooth and the 2-tooth - 6 for straightaways, 2 for curves. I occasionally use my 4-tooth and very occasionally use my 1-tooth (except for zippers. if you wanna do zippers get a 1-tooth).
-
-
my stitching chisels are 4mm spacing. I picked this pretty arbitrarily :)
-
technically you could just buy a diamond awl or a 1-tooth chisel and poke each hole individually and that would be cheaper but oh my god love yourself
(need to have) thread - I am using Ritza 25 Tiger Thread (currently I have the 1.0mm size. I find it a little large and will probably size down when I order other colors - update, sized down to .8 and even have some .6 - much preferable) and have also used MeiSi Superfine Linen Thread but polyester threads are easier to seal off with a lighter
-
(nice to have) some kind of silicone needle puller (I don't actually have this one, I was having trouble finding what I have - little pink finger covers that are all grippy) for gripping needles. or just use the back of a mousepad? or something?
-
-
tool care
-
-
(need to have for certain blades such as skiving knife) jeweler's rouge for stropping
-
-
I am not an expert here so I am not making firm recommendations. I got mine from Springfield Leather
-
-
-
-
tooling
-
-
(need to have) swivel knife
-
(need to have) a beveler. I have a smooth beveler at the moment, but am waiting on a checked beveler in the mail as I think I will like that look better
-
(need to have) as mentioned previously, mallet or maul
-
(nice to have) literally any other stamps i guess
-
(nice to have) templates! it really helps to start out with some designs made for swivel knife. I got a few (both free and paid) from dadhands
-
-
zippers
-
-
okay so I bought them because they are pretty but these rainbow zippers actually make it so much easier because you can differentiate each tooth from the next!!!
today I decided to finally clean up the assets/img directory for this site. Since 2022, when I started this project, I've just been adding images directly to that directory with no further segmentation - messy of me, I know! It's gotten unwieldy and I'm starting to get worried about generic names leading to duplicates at some point, particularly for the non-gallery images where I have a tendency to uselotsofmushroomimages.
-
so it's time to move them into year-based folders. Let's talk about how I did that. bash away!
let's start with the basics: a list of posts. find gets us everything under a specific directory - in this case, the _posts directory. We can filter out the directories a few different ways, but I piped the find output through a basic grep looking for .md in the filename.
grep can also help us get image names with the regex "name:.+jpg|png". I add name: to the regex because there are very occasionally images that aren't the featured image for the post, and those don't fit the pattern of name: <img>. Since there's so few of those, I ended up handling them manually.
-
to make grep work with regex, it needs the -E flag.
-
# gives us
-# name: <img>
-# note the 4 spaces at the beginning of the line
-IMAGE_LINE=$(cat $FILE |grep-E"name:.+jpg|png$")
-
cut
-
that output gets us the full line of text that includes the image filename. Let's trim out what we actually want.
-
below, -d sets a delimiter, and -f chooses what field we want to return. Because there's 4 spaces before name, our field index is actually pretty high - cut is creating 4 empty strings.
there's two major things we need to do with the information we've gathered:
-
-
replace the image filename in-place in the post's markdown file
-
move the image file from its original location into a new directory
-
-
we can do replacement with sed, where our pattern should be something like this: s/$IMAGE/$YEAR\/&\ (the & subs in the found string - in this case $IMAGE). We could also use comma separators if we don't want to escape the slash, like s,$IMAGE,$YEAR/&, - I did this for ease of reading.
-
by default, sed prints to standard output, so we'll tell it to edit in-place instead with -i. Here's our full sed command:
-
sed"s,$IMAGE,$YEAR/&,"-i$FILE
-
mving and shaking
-
(my mom thinks I'm funny.)
-
now we'll handle moving the image file from its original location into a new directory. let's create our image paths, source and destination:
do you have a favorite git flag? I do. let's talk about git add -p.
-
the p stands for partial
-
okay, it totally doesn't. it's short for --patch. but 'partial' is my mental trick because it makes a little more sense to me, and it might help you remember it too.
-
also, TIL: this command is a shortcut to the patch subcommand of the --interactive flag - a flag I have never in my life used. wild the things you learn when you read the documentation.
-
the primary purpose
-
a classic scenario: you've realized your uncommitted work doesn't just encapsulate one change, and it's not so easily split as to be separable per-file. git add -p instead lets you choose to stage changes chunk-by-chunk, or, as git terms it, hunk-by-hunk.
-
hunks
-
...are not perfect. you can split hunks, but only so much, and there's going to be cases where your changes are so mixed in as to be inseparable.
-
a secondary purpose
-
I use -p almost every time I use git add, not because I know I will need to split up my work, but to review what changes I made.
-
a tertiary purpose
-
the output from git add -p highlights extraneous trailing spaces!
-
how it works
-
every hunk -p shows you comes with the following single-character choices:
-
y and n
-
yes and no respectively. either add the hunk, or don't.
-
q
-
quit. exit the whole -p process.
-
a and d
-
I rarely use these two. that said, I try to remember these two as all and done. stage all of the hunks in the current file, or be done with the current file.
-
s
-
only shows up sometimes, because it lets you split the current hunk. if unsplittable, you won't see this option.
This piece is unfinished and is presented in only partial form.
-
Prelude
-
5 or so years ago, I’m in a Facebook group. Rather than my usual lefty fare, it was more all-over-the-map; it was focused on socializing, support, and advice for younger employees at my current employer.
-
Every once and a while, discussion would turn to something like:
-
-
I’m facing sexism at work…
-
-
or any relevant comment about any -ism you can imagine. Unfortunately, there was no shortage of reply guys ready to diminish, second guess, disbelieve, and more. And as a “nonpartisan” space, it of course had a “no politics” rule!
-
You can probably see what’s coming a mile away.
-
-
Politics
-
-
the total complex of relations between people living in society
-
-
is how Merriam-Webster defines politics. It is not the only definition, and it is not the first definition, but it’s nicely non-circular and doesn’t get us bogged down in what is and isn’t government policy.
-
That might be a more expansive definition than what you’re used to. Let’s take a detour.
-
The Personal is Political
-
The idea that “the personal is political” has been around since second-wave feminism, 1960s at least. For example, here’s the Combahee River Collective Statement referencing it in 1977, having already worked to further and expound on it:
-
-
A political contribution which we feel we have already made is the expansion of the feminist principle that the personal is political.
“The personal is political” and associated political movement is pushback against an insistence on individualizing systemic issues. Crenshaw frames it as a “process of recognizing as social and systemic what was formerly perceived as isolated and individual” (Mapping the Margins: Intersectionality, Identity Politics, and Violence against Women of Color by Kimberlé Crenshaw) and it’s vital in our current understanding of things like sexual assault and domestic violence as — forgive me for repeating the word yet again — systemic issues.
-
What does “no politics” gain us?
-
But why might people institute a “no politics” rule?
-
Easier moderation
-
A frequent argument that gets made is that “we just don’t have the resources to moderate that.” Regardless of whether it’s right, this is what’s effective and what we have the bandwidth for.
-
As a frequent moderator, I see the appeal in this. Political discussions can be tense, with high emotions and hard stances. After all, the personal is political - someone may not be speaking of some theoretical risk but to a concrete fear that hangs over their head daily. Members will get invested, and feelings will be hurt.
-
Create a welcoming, “neutral” environment
-
Especially in environments where you want to welcome a large and diverse group of people, the aim should be to make the membership and prospective membership comfortable (possibly while also warding off trolls who want to argue).
-
For some, "the law isn't about shaping society, it's about who gets punished" (I Hate Mondays by Innuendo Studios). Politics are a method of assigning blame. "No politics" means no one is to blame.
-
Interlude
-
6 or so months ago, I'm in a Discord server. Rule 1 states that no politics or religion are allowed. Interestingly, it also states that "insults, racism, sexism, homophobia, transphobia, and all other discriminatory speech" are not permitted.
-
How do we better achieve our goals?
-
Easier moderation
-
Create a welcoming environment
-
-
sections
-
-
what ethical goals does a no politics rule attempt to achieve
-
how are those goals not met by no politics rules (not met/actively betrayed/only achievable for a subset of users)
-
how can we better meet those goals?
-
-
notes
-
-
there are ways to limit when and where this discussion is acceptable: create a news/politics channel, encourage spoilering/threading/using appropriate platform tools, encourage a culture that values cws and respects requests for them and more broadly respects people's boundaries
-
there are ways to limit how "no politics" gets deployed: make specific rules against shutting down people talking about their lived experience, avoid backseat modding becoming the norm
-
there are ways to limit your definition of "politics" so that you can more carefully delineate what you are trying to avoid, though I would be wary of this route - the fact is that a No Politics rule, no matter how well reasoned, may read as a red flag for a marginalized person
Adapted from a workplace session on pronouns and gender identity.
-
What are pronouns?
-
and for that matter, what's gender?
-
Pronouns
-
-
Words used in place of nouns
-
English has 1st (I, we), 2nd (you), and 3rd (he, she, they, it) person pronouns
-
-
When we talk about pronouns in the context of gender identity, we’re referring to 3rd person pronouns – words you use to talk about someone to another person
-
It is still always correct to use you/yours (2nd person) pronouns
-
-
-
-
Ok, what's gender?
-
-
In English as well as some other languages, pronouns are gendered
-
-
Other languages may have more or fewer grammatical genders
-
Other cultures, particularly non-Western ones, may have more social genders
-
-
-
One way we classify humans
-
Ostensibly related to biology, but mostly tied into gendered social norms
-
Everyone's got it!
-
-
-
Gender is derived from the Latin work genus, meaning “kind” or “type.” Gender is the social organization of bodies into different categories of people. In the contemporary United States, this sorting into categories is based on sex, but historically and cross-culturally there have been many different social systems of organizing people into genders.
-
-
– Transgender History: the Roots of Today’s Revolution, Susan Stryker (she/her)
-
-
Gender literally means “kind” or “type” or “classification” – it’s related to words like genre and general – and has no necessary connection to real-world biology.
-
-
– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)
-
Gender terms
-
-
Cisgender: someone who is the gender assigned to them at birth
-
Transgender: someone who is a gender other than, or in addition to, the gender assigned to them at birth
-
Nonbinary: an umbrella term or individual identity for anyone whose gender does not wholly and solely align with one binary gender
-
-
Genderfluid and agender are two common nonbinary identities
-
-
-
Two-spirit: an umbrella term for Indigenous people who fulfill traditional third-gender roles
-
-
A brief foray into history
-
this is all new, right? ...right?
-
Alternate pronouns aren't new
-
-
...Francis Brewster coined E, es, and em in 1841, and Charles Crozat Converse announced thon and thons in 1884...
-
-
-
...ze appears in 1864, introduced by someone known only by the initials J.W.L., and hir first popped up a century ago, invented, or at least introduced to readers in California, by the editor of the Sacramento Bee on August 14, 1920.
-
-
– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)
-
-
Even singular "they" which is seen as new has been in use since the 1300s - and predates singular "you"
-
-
Fuss over pronouns isn't new
-
-
In 1916, when Jeanette Rankin, of Montana, became the first woman elected to the US House of Representatives, the Minneapolis Star Tribune ran this headline challenging the grammatical rule that says the masculine pronoun [he] can refer to women: “Can ‘She’ Be ‘He’, a Congressman, and Be Woman?” Pronouns aren’t just a part of speech. Pronouns are political.
-
-
– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)
-
Trans and nonbinary people aren't new
-
-
In 1841, Francis Brewster took time from his medical practice to write a grammar in which he labeled his new pronouns “masculor feminine.” Masculofeminina is Latin for “man-woman, or hermaphrodite*,” and Brewster’s use of this unusual term is the first hint at nonbinary gender in a grammar book.
-
-
– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)
-
-
Magnus Hirschfeld (1868 – 1935) was a German physician and sexologist credited with coining the term transvestite to describe people we would today likely consider transgender
-
Hirschfeld’s Institute for Sexual Research, opened in 1919 in Berlin, performed the first modern gender affirmation surgeries in 1930
-
-
History repeats itself
-
-
Hirschfeld’s Institute was an early target of Nazi book burnings
-
-
-
Men seemed eager to blame women for the pronoun problem. If finding a new pronoun was the job of the women’s movement, then singular they was the fault of the women’s movement.
-
-
– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)
-
Prescriptivism and descriptivism
-
-
Prescriptivism handles language from a top-down standpoint: it is defined by an authority, and we use it as defined
-
Descriptivism recognizes that we build our own language, and that authorities (like dictionaries) are just documenting its use
-
Language is built by and for us, to serve our needs
-
It has evolved to get to where we are now, and will continue to evolve
-
-
thou used to be a singular you, which was plural-only
-
-
-
Corporate environments are great examples of constantly shifting language – especially around our acronyms
-
-
-
Calling words “invented” makes them sound artificial. But word coining is a natural process, one that’s essential for any language to survive.
-
-
– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)
-
Why it matters
-
-
…the use of appropriate pronouns has a positive impact on mental health, and the use of inappropriate pronouns can form part of a general pattern of harassment and abuse.
-
-
– What’s Your Pronoun: Beyond He & She, Dennis Baron (he/him)
-
-
Misgendering is generally part of a larger pattern
-
Even if misgendering isn’t coming from a place of ill intent, consistent misgendering builds up to be very detrimental
-
Referring to people correctly shows respect and understanding - just like learning to pronounce an unfamiliar name
-
Nonbinary is not a monolith. No gender (experience, expression) is a monolith
-
Pronouns are just one small part of a much larger picture
-
-
Pronoun interactions
-
...and how do I help?
-
Introductions
-
-
Introduce yourself with pronouns to set norms
-
Encourage, but don’t force, others to do the same
-
Don’t single out the visibly trans person!
-
-
Corrections
-
Correcting yourself
-
-
Repeat what you were saying with the correct pronoun
-
Respond with “thank you” to others’ corrections
-
Move on! Don’t make a big deal of it
-
-
Correcting others
-
-
Gently interject with the proper pronoun
-
Talk to the speaker afterwards about their mistake – no shaming!
-
Check in with the person who was misgendered
-
-
Digital tools
-
-
Set your pronouns in Teams
-
Add pronouns to your email signature
-
-
PRACTICE!
-
-
Deliberately think or speak about a specific person using the correct pronouns
Correcting others is actually great practice – it helps you be more aware of pronouns in speech
-
The key to success will be repetition and reinforcement
-
Mistakes are normal, and this does take effort
-
-
-
It is not unusual for speakers of English to find it difficult to switch pronouns about a person, because we (English-speakers) don’t have that many pronouns, historically, and we tend not to introduce new ones quite as often as we introduce, say, nouns.
-
-
– pronouns 101: introduction to your loved one’s new pronouns, Kirby Conrod (they/them)
-
More scenarios
-
beyond just "they"
-
What if you don't know someone's pronouns?
-
-
Use they/them/theirs - this is language you already use! e.g. "Someone left their phone here"
-
-
Note that if you know someone doesn't use they/them, this is misgendering - "they" is not always neutral
-
-
-
Use the person’s name
-
-
Multiple pronouns
-
-
Some people use multiple sets of pronouns
-
For some, there’s a preference; others like all offered sets equally
-
-
Ask if you aren’t certain!
-
-
-
Using both/all sets offered at varying times can make the person feel seen
-
-
Don’t feel you need to alternate within one sentence or context – this can be confusing for you and others
-
-
-
For some, using a more normative and a less normative pronoun can be a first step in coming out
-
-
It's often an attempt at authentically revealing a previously-hidden part of themself
-
-
-
Ignoring a less normative set of pronouns in favor of the "easier" set can feel like ignoring part of that person
-
-
Neopronouns
-
-
Some people use pronouns other than he, she, they, or it
-
Because these pronouns are newer to the English language, they are termed “neopronouns”
-
Examples:
-
-
Ze/hir/hirs or ze/zir/zirs
-
Xe/xem/xyrs (or various other spellings)
-
Ey/em/eirs
-
-
-
-
While I can't speak for all neopronoun users, here are some of my personal reasons for using ze/hir in addition to he/him:
-
-
Reflect my own gendered identity. Personally, my experiences when others have used they/them for me have been negative. Especially early in transition and in times where I aligned more strongly with being a man, it often felt like a way for folks to avoid gendering me. Because of this, I still have a deep dislike towards being referred to with those pronouns. Ze/hir or other neopronouns reflect a strongly gendered nonbinary identity to me.
-
Connect with queer history. My particular preference for ze/hir comes from Leslie Feinberg's use of these pronouns. I understand myself as in community with other queer/trans people and my pronoun usage reflects that.
-
Encourage learning, curiosity, and willingness to play. I notice often that cisgender (non-trans) folks are so afraid of making mistakes that it hinders learning and growth. I want to encourage folks to try new things around me, and to be playful with language rather than afraid. I think our ability to adapt language to our needs is beautiful and powerful, and I want to encourage that.
-
Pave the way for more vulnerable queer people to express themselves. As someone in a position of relative privilege, it is far easier for me to publicly use neopronouns than it may be for other queer/trans folks who find they align with neos. If someone has already seen me using neos, they are less likely to push back on the next person they see doing so - even if that means I am the one to deal with that pushback.
-
Be more visible as a trans person. This ties back to (1). While some trans people prefer to fly under the radar so to speak and be read as a cis person of their gender, there is no cis version of "nonbinary". For me, being understood by others as a binary cis man feels stifling and incorrect. Neopronouns are one way to make my transness more visible as someone who is otherwise not always read as queer. And, as in (4), that visibility helps pave the way for others :)
-
-
Any/all pronouns
-
-
Some people accept any pronouns for various reasons
-
This is not an opportunity to ask them which ones they "really prefer"
update: in gender census' 2025 report the numbers continue to be very similar, sitting at about 62% and 30% respectively.
-
-
update: in 2024, ~60% of respondents use "nonbinary." ~29% use "enby."
-
-
according to gender census, which surveys "people whose genders are not adequately described, expressed or encompassed by the restrictive gender binary":
we don't know the overlap - it could be that half of nonbinary people also use enby, or that bunches of people use enby who don't call themselves nonbinary
-
either way, there's a big chunk of nonbinary folks who don't call themselves enbies - at least half of us
-
if you're talking about the entire community or the gender category: please consider just saying nonbinary
I also have several varieties of rainbow gradient yarn which will produce varying results.
-
For any flag not on the list, please do still message - I'm happy to get the colors missing to do it! For example I would only need a gray for asexual, so it's easy to add :)
-
details
-
dimensions
-
usually sized to hold 1-3 dice sets, but I can aim for a specific size on request.
Speedball Model B printing press. Goes for ~$100 - I got it through Blick
-
usage
-
-
cut or tear paper to fit the press - the usable pressing surface is slightly smaller than 6" x 8", with a bit of margin space that won't be effectively pressed
-
lay paper right side up (if relevant)
-
ink printing block
-
lay block ink-down on paper
-
ensure paper & block are positioned under the top plate of the press
-
close press and put pressure on. I have been putting my upper body weight on it
-
open press and remove block
-
-
tips for multi-layer prints
-
I've accomplished multi-layer prints in two ways thus far:
-
-
cut or tear paper so as to be only slightly larger than the stamp. use paper borders to align stamps
-
use washi tape to attach paper to a carpenter's square such that the stamps will be centered when lined up with the carpenter's square. This requires that the stamp AND carpenter's square fit under the press
-
-
other notes
-
-
as mentioned, the working area is slightly smaller than the stated 6" x 8" area
-
corners of the press are cut metal and can be slightly sharp. I put some washi tape on the corners to help avoid scratching myself
-
placing the block ink down on the paper, as opposed to placing the paper on top of an inked block, does appear to be more effective
-
compared to using a brayer, this dramatically improves consistency and ink evenness for each print! I highly recommend it if only to cut down on misprints or mistakes
You do look, my son, in a moved sort,
-As if you were dismay'd: be cheerful, sir.
-Our revels now are ended. These our actors,
-As I foretold you, were all spirits and
-Are melted into air, into thin air:
-And, like the baseless fabric of this vision,
-The cloud-capp'd towers, the gorgeous palaces,
-The solemn temples, the great globe itself,
-Ye all which it inherit, shall dissolve
-And, like this insubstantial pageant faded,
-Leave not a rack behind. We are such stuff
-As dreams are made on, and our little life
-Is rounded with a sleep.
-
direct
-
grep takes a file or files as an argument.
-
grep"'d" tempest.md
-
As if you were dismay'd: be cheerful, sir.
-The cloud-capp'd towers, the gorgeous palaces,
-
redirect
-
If there's no files, or if - is passed as an argument, grep reads from standard input. < reads a file into standard input (this is shorthand for 0<, 0 being the file descriptor of stdin).
-
grep"'d"< tempest.md
-# or
-grep"'d" - < tempest.md
-
As if you were dismay'd: be cheerful, sir.
-The cloud-capp'd towers, the gorgeous palaces,
-
re-redirect
-
<(command) creates a file descriptor for the output of command.
-
grep"'d" - <<(cat tempest.md)
-
As if you were dismay'd: be cheerful, sir.
-The cloud-capp'd towers, the gorgeous palaces,
-
(In this case, you could substitute cat tempest.md | grep "'d" - but <(command) is handy for cases where commands don't take stdin, or need to take in multiple files (such as comm).
-
re-re-redirect
-
cat can also take stdin when given - or no arguments.
-
grep"'d"<<(cat< tempest.md)
-# or
-grep"'d"<<(cat - < tempest.md)
-
As if you were dismay'd: be cheerful, sir.
-The cloud-capp'd towers, the gorgeous palaces,
-
conclusion
-
it's <s all the way down.
-
-
postscript: heredoc
-
grep"'d"<< tempest.md
-heredoc> oh are we interactive now
-heredoc> what am i 'doing' anyway
-heredoc> tempest.md
-
what am i 'doing' anyway
-
(<< starts an ephemeral document or heredoc. The first argument given is the delimiter, and is more commonly EOF (end of file).)
- Design-oriented platforms/infrastructure engineer with a well-rounded
- background in algorithms, UI/UX, observabilty, databases, and accessibility.
- Consistent customer focus with strong communication skills and a passion for
- sharing knowledge.
-
-
-
-
-
Toolkit
-
-
-
Git, bash, and the terminal
-
Containers and Kubernetes
-
Terraform, Bicep, and infrastructure deployment
-
GitHub Actions and other pipelines
-
HTML, CSS, and Javascript
-
Languages like Go, C, and Python
-
Accessibility knowledge and thoughtful design
-
-
-
-
-
Experience
-
-
-
-
Freelance Web Developer
-
– Present
-
-
-
- Creates and maintains websites for clients based off their concepts and
- ideas.
-
-
-
-
- My Liberation Work Has Been Damn Ableist: A Landworker Memoir
- (maze-pants.codeberg.page):
- a web-friendly version of Maze's ~70 page zine, built as a single-page
- static site.
-
- ...a pleasure to work with. Ze pays close attention to detail, and
- truly cares about making his creations accessible, including aspects
- that I didn’t even know to ask for. As a bonus ze is extremely quick
- and responsive!
-
-
-
- Gryphon's Roost (gryphonsroost.xyz):
- a major redesign and port of Gryphon's Wix site to an Eleventy and
- TinaCMS blog.
-
I really appreciate your willingness/ability
- to meet me where I was at as far as communication and such was. I
- feel a lot more comfortable asking clarifying questions than I have
- with others.
-
-
- Mari Hsu (marihsu.com):
- a redesign of Mari's existing site and full port from pure HTML/CSS to
- Eleventy-based blog.
-
- Having participated in a few tangible projects that Lee has run online
- I have admired hir clean, effective, and attractive websites for a
- while. When Lee announced ze was taking on more work, I jumped at the
- chance to have someone else rebuild my old handcoded one. My new
- website from Lee is fantastic! Super easy to customize and update on
- my own, which is what I have wanted for a long time. Ze was easy to
- work with, very communicative about details of the process, and well
- aligned with what I wanted from my site. I would not hesitate to
- recommend Lee to anyone, at any technical comfort level, who wants a
- nice website.
-
-
-
- Spoonfairies (spoonfairies.help):
- an Eleventy-based website for a just-launching project, designed and
- built from the ground up.
-
- ...the site dev of my dreams -- ze brought my vision from a
- PowerPoint to a webpage with clarity and a focus on accessibility
- that made me feel real hope for the future. I am grateful for his
- thought partnership and ongoing site support!
-
-
-
- Beall Greenhouses (beall-greenhouses.com):
- a website for the Beall Greenhouses artist studios and markets,
- originally pure HTML/CSS/JS before porting to Eleventy for longevity
- and ease of maintenance.
-
- ...an absolute delight to work with. His communication is efficient
- and timely, and his considerations in design are impeccable. When I
- asked him if he could do this project, he came in on a level that I
- had not anticipated. His contributions to my event have been
- immeasurable. It’s exciting to continue to work with him, as we are
- constantly finding new ways to upgrade our interface with the public.
- The possibilities that he brings to the table are astounding.
-
-
-
-
-
-
-
-
-
-
-
Microsoft, Redmond, WA
-
–
-
-
-
Software Development Engineer I & II
-
-
- Worked on green- and brown-field projects with customers, solving emerging
- problems in infrastructure, devOps, and LLM/human interaction. Wrote
- reports on product feedback to relay to product teams and improved
- documentation.
-
-
-
-
Contributed UI/UX, algorithm, and database design to a new
- human-in-the-loop approach to LLM form automation, ensuring both that
- content was effectively reviewed and that auditing was smooth.
-
Deployed and configured Kubernetes for many scenarios, handling
- monitoring and observability, scaling, traffic routing, security and
- policy, Windows container support, and more.
-
Maintained team working agreements to ensure team unity and
- consistency. Shaped team processes and documentation to improve clarity
- and speed up onboarding.
-
Improved Azure and open source documentation with new, updated, and
- corrected information.
-
Coached multiple learning-oriented hackathons to ensure broader
- community understanding and adoption of Azure services.
-
Presented to groups of 10–100 on backend accessibility and queer/trans
- education.
-
-
-
-
-
-
-
-
-
Riverside Refuge Studio, Vashon, WA
-
– Present
-
-
-
Co-owner and artist
-
-
- Maintains website, storefront, and inventory for a diverse set of artistic
- goods. Communicates with a range of customers, both digitally and
- in-person.
-
-
-
-
Designs and creates art/crafts in a variety of mediums ranging from
- visual to functional.
-
Presents work in art shows in and around Seattle.
-
Runs booths or studio space at art fairs and markets.
-
-
-
-
-
-
-
-
-
Rensselaer Polytechnic Institute, Troy, NY
-
–
-
-
-
Undergraduate Programming Mentor
-
-
- Helped students debug and develop in Python and learn core programming
- concepts. Created daily quiz material and graded exams.
-
-
-
-
-
-
-
-
Microsoft, Redmond, WA
-
–
-
-
-
Software Development Engineering Intern
-
- Developed a chatbot add-on for the Azure Android application.
-
Designs, develops, and maintains website for learning and skill-sharing
- listings for the fediverse (Mastodon). Manages all data and incoming
- listing requests.
Created and ran a global event for zine artists on the fediverse
- for two years. Coordinated website, physical material shipping and
- logistics, payment, and marketing for a 40–50 person project.
Created a digital art exhibit and sale to raise money for charity.
- Coordinated ~30 artists to contribute physical and digital work as well as
- a collaborative sticker sheet. Raised ~2.3k for Trans Rescue.
-
-
-
-
-
Education
-
-
- Bachelor of Science — Computer Science
-
- Rensselaer Polytechnic Institute, Troy, NY
-
recently, I've been working on a website for a project called spoonfairies. On the providers page, we list a series of names along with their pronouns, location, and services offered. Visually, it looks like this:
-
-
pronouns
-
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 very irritating. Imagine hearing the following:
-
-
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.
-
-
...ad nauseam. Kinda irritating.
-
the fix
-
put the pronouns in a span that provides special styling, and use ::before and ::after to apply parentheses.
-
<ahref="/providers/lorem-ipsum">
- Lorem Ipsum
- <spanclass="pronouns">she/her</span>
-</a>
the slash is the magic there. 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.
-
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.
-
location
-
ooh, time to implement locations! I did my same ol' trick.
-
<ahref="/providers/lorem-ipsum">
- Lorem Ipsum
- <spanclass="pronouns">she/her</span>
- <spanclass="location">Tacoma</span>
-</a>
-
.location::before{
- content:"📍" / "is based out of";
-}
-
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.
-
again, style em up nice, more of a standard text look, right-aligned. Cool.
-
a bigger problem than parentheses
-
...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 <span>s did.
-
at least with fairly default settings in NVDA, the <span>s broke up the way the link was read out. Suddenly, I was getting:
-
-
visited link Lorem Ipsum visited link she slash her visited link Tacoma
-
-
this is all one link, mind you. The <a> tag isn't broken into three links. But the <span>s apparently break up the screen reader output anyway (in NVDA, that's a continual caveat).
-
ooookay... what next?
-
total overhaul
-
I moved away from my content approach entirely (well, I kept it around as a failsafe, but it's not running the show now). Instead, I switched over to an aria-label for the whole link.
-
<ahref="/providers/lorem-ipsum"
- aria-label="Lorem Ipsum she/her is based out of Tacoma">
- Lorem Ipsum
- <spanclass="pronouns">she/her</span>
- <spanclass="location">Tacoma</span>
-</a>
-
(technically, all this is templated to hell and back. I would hope that's obvious given I'm talking about lists of these entries.)
-
now, after more screen reader testing, it reads out smoothly. The aria-label 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. And I've got my fancy styling. Sweet.
bella & canvas tee shirts (light tones, standard fabrics - no fleece, suede, ribbing, etc)
-
cutproof mat (optional, can be subbed out for any firm surface to slide into the shirt)
-
water-soluble pencil for fabric marking (optional)
-
(edit 18 Sep 2023) versaFine ink pads
-
speedball fabric print ink
-
inkwell
-
brayer
-
-
steps
-
-
iron front of shirt lightly to remove any wrinkles
-
lay shirt out on table. I put a cutproof mat inside the shirt to prevent any ink from going through and give myself a firm surface to work on
-
for a multi-layer design:
-
line up an un-inked stamp, face up
-
with water soluble pencil, outline 1 corner and mark out at least one other alignment spot. I found I could make marks about an inch long and get decent alignment just from that, rather than outlining the whole stamp (which ime gets similar alignment)
-
alternately you can use a carpenters square or similar tool to line up the stamps - just make sure not to move it!!
-
ink stamp thoroughly (lay stamp faceup and daub with ink pads)
-
lay stamp into position (for multi-layer design, align with existing marks)
-
press across the stamp with the brayer, being careful not to move the stamp
-
lift up in a clean motion; I generally lift a corner and check that things are looking good before lifting fully off
-
hang or drape until ready to iron
-
-
-
do not stack the shirts, even if the ink seems dry! it will transfer to other shirts
-
do not let the shirts sit in any way that the design is in contact with other fabric
-
-
-
press with iron on the highest appropriate heat setting
-
-
-
avoid moving the iron a lot as this can smudge ink
-
my rule of thumb has been to press until the image is uniformly hot to the touch
-
I am going to try next time to use parchment paper to avoid any ink smudginess (Edit: meh, I don't really recommend it. Just hold the iron still at first.)
-
-
-
dab some water on the water-soluble pencil and rub gently to erase
Note: Shirt orders are done in rounds so I can take advantage of free shipping. This means if there's no demand, your shirt may wait a while. If you'd really like to get around this, I'll just ask that you cover the additional shipping.
send a greeting card around the world. maybe more than one. we'll see.
-
outline
-
from a group of participants, a random list will be formed. every person is given the address of the next person in the list (the last person receives the first person's address). first person picks a greeting card, signs it, and sends it to their designated recipient; that person receives, signs, sends on, etc.
-
this continues on to the last person, who finally signs and sends back to the first, closing the loop and ending the adventure. the first person gets to keep the card they originally sent out.
-
if we want to, this can be easily re-run - add folks who want to be added, drop folks who want to be dropped, scramble the list, and start again.
-
timeline
-
accepting new applications for this first round until December 15th, 2025. After the 15th, you may still put in for future rounds, but be aware future rounds are not confirmed yet and will not be confirmed for at least 6 months most likely.
-
your marching orders (recipient address, order in loop) will arrive by email no later than January 1st, 2026.
-
participants
-
any number, but in the case of signups reaching 26 or greater people, the cohort will be split. Why 26? I'd like this to not run significantly longer than a year, and I'm very loosely estimating that each person will add 2 weeks to the timeline.
-
update: we closed signups at 32 participants and will be running two loops! Don't worry, that doesn't change what you as participants do.
-
on randomization
-
I will edit the list as needed to accommodate any mailing restrictions. I will also re-roll if I am placed first on the list.
-
card guidelines
-
4x6 inches/10x15 centimeters minimum size recommended so there is space for everyone to sign. please nothing wildly vulgar, I guess?
-
you are allowed to include stickers or similar flat items for future recipients if you so desire. Please ensure your package meets weight guidelines for flat mail (in the US, forever/international stamped mail must be under 1oz; outside of the US please look into local guidelines - if you're struggling to be sure let me know and I'll do my best to help).
-
address privacy
-
the only people who will see your address are:
-
-
me
-
the person who is sending directly to you
-
if you put a return address (which I really would recommend), your recipient
-
-
what I'll need from participants
-
signing the card
-
Sign in any way you find meaningful. Please don't hog the card space - remember that as many as ~2 dozen people will be signing it!
-
IMPORTANT! Only put a name, nickname, doodle, fedi handle, etc. on the card that you are comfortable having displayed publicly. In any posts that I make, it will not be directly connected to you. However, as this likely has a small cohort, please be aware that how you sign could be tied back to your fedi account.
-
mailing it back out
-
This will require a fresh envelope and stamp(s) as needed for postage.
-
status checks
-
this is, at the end of the day, pretty flexible, but what I would really, really like is:
-
-
2 emails, one on receipt and one on re-sending. This allows me to check in on progress and ensure the card doesn't get too stalled, or lost.
-
more optionally, but fun for seeing how things are going: a picture of the card (not the envelope!)
-
-
what I'll send participants
-
guidelines
-
all guidelines (which you can always find here!) will be repeated over email so you have a local copy. They may additionally be ported over to a standalone site if we find we want somewhere not-on-this-website for pictures and travel deets (don't worry, no addresses. Nothing more specific than country or state).
-
recipient and loop order assignment
-
each participant will be sent the name and address of the next person in the loop. They will also be sent their place in the loop, numbered from 0.
-
reminders
-
I'll be doing my level best to track the card's movement, so as it is sent around (assuming I get check-ins from y'all! please help me out here!) I will send out reminders to folks to either check their mail or make sure the card gets sent out again. Some folks have specifically asked for this support and I don't want to let them down, so more communication is always better.
-
I want in!
-
read all that? too long, didn't bother? either way.
work in progress! To be updated as I continue spinning.
-
-
in picture, from top:
-
-
flax
-
(probably) lotus
-
banana
-
hemp
-
tencel
-
rose
-
ramie
-
-
notes on handspinning various plant fibers. Fibers were purchased as a sample pack from Hearthside Fibers. Unfortunately, I spun the first sample - flax - in 2023, so don't have thoughts on that left in my head. I also received a mystery sample along with the 12 named samples that may have been lotus - it's the smallest skein in the image. The lotus was also spun in 2023.
-
-
overall, these are broadly more slippery than wool
-
most if not all of these benefitted from pre-drafting moreso than I usually do for wool
-
-
ease of spinning
-
-
easy: flax, hemp
-
middling: banana, tencel
-
hard: rose
-
worst: ramie
-
-
texture (of final yarn)
-
-
softest: rose
-
pleasant: banana, tencel
-
meh: ramie
-
itchy: hemp, flax
-
-
density/thickness
-
I am estimating this via yards per gram of fiber. Other than the flax and lotus (can't promise anything there), I aimed for my average spin with all of these and spun them on the same tool (Wheeliam, an Ashford Kiwi 3). Per-fiber notes mention whether they spun thick or thin if notable.
-
-
-
-
fiber
-
yards
-
grams
-
yds/g
-
-
-
-
-
banana
-
33
-
22
-
1.50
-
-
-
flax
-
33
-
27
-
1.22
-
-
-
hemp
-
41
-
26
-
1.58
-
-
-
lotus
-
16
-
12
-
1.33
-
-
-
rose
-
60
-
29
-
2.07
-
-
-
tencel
-
31
-
29
-
1.07
-
-
-
ramie
-
7.5
-
5
-
1.5
-
-
-
-
per-fiber breakdown
-
written up in order of spinning.
-
banana
-
-
felt a bit wear-y on the hands - that may have been the silk I spun earlier that day though
-
a bit hard to draft, quite liked to stick to itself and clump, but once moving was quite slippery
-
-
hemp
-
-
awful feeling. awful awful awful. hate.
-
easy to spin
-
quite grippy
-
easy joins
-
difficult to tell apart from stray plant matter
-
-
rose
-
-
incredibly soft; shiny and very pretty
-
quite difficult to spin
-
wanted to spin thin
-
joins were tough, it's quite slippery
-
needed slow and careful drafting because of the above - I brought my wheel down to a lower ratio which is rare
-
-
tencel
-
-
also felt a bit wear-y like banana
-
spun a bit thick and liked to clump
-
not as bad as rose on the slippery front
-
very shiny, almost glittery in spots
-
dense and spun up fast
-
-
ramie
-
-
hated this
-
slippery af
-
constantly splitting all over the place so I couldn't keep the fibers aligned in the slightest
-
stopped after 5g because it sucked and I didn't care to finish it
similar to a Secret Santa (but not holiday-oriented), each participant is assigned a recipient. Participants assemble an envelope or package (estimate around $20-25 in value (not incl. shipping), but you are highly encouraged to pull from your own supplies, thrift, or make things yourself before buying new) and send to their recipients.
-
because of international shipping prices, participants will opt in to broad location categories that they are able to ship to (US, EU, and rest of world). You are encouraged to provide more detail about your shipping abilities in a free text field following the opt-in question - if you'd like to check where you are unable to send mail to, try postcrossing's postal monitor. I will do my absolute best to accommodate shipping restrictions and needs. If you are unable to be matched with a gifter and/or a giftee I will reach out.
-
timeline
-
sign up form will close on December 15th, 2025. Participants will receive their giftee's details by January 1st, 2026.
-
ship-by date of February 15th, 2026, giving participants 1 and a half months to prepare and send their package. Packages will be expected to arrive by March 15th, 2026. If any recipient hasn't received a package by that time, I will follow up with their designated gifter.
-
reach out if you need flexibility regarding timeline!
-
shipping
-
if you are struggling with shipping costs, please feel free to put together a flat envelope with things such as greeting cards and stickers rather than more 3-dimensional items.
-
if you are shipping ink, please be aware that liquids often have specific shipping rules. Look up the relevant rules for your location.
-
if you are in the US, I quite recommend Pirate Ship which can help you get discounted rates with USPS and other services. You must make an account, but there is no fee for doing so.
-
backups
-
in the event of a drop-out or other issue, I will be providing one or two backup gifts. Participants may also opt-in to being backups as well to take some load off me. If backups are needed, I will cover the first one, then round-robin a randomized list of those who have opted in to backups.
Clear and holographic stickers ordered through DieCutStickers. See the stickers tag to view available designs.
-
previous round of stickers from StickerYou
-
details below provided from StickerYou FAQs.
-
clear stickers deets
-
Q: What do you mean by "removable adhesive"? Are my stickers going to fall off?
-
A: Removable adhesive means our stickers are able to peeled off and re-stuck immediately if you need to reposition your sticker. This isn't going to weaken the adhesion, as we guarantee our stickers stick strong, last long, and won't rip or tear when exposed to the elements. This also means our high quality stickers peel-off residue free, and won't damage your stuff if you do decide to remove them.
-
Q: I want to put the stickers on my laptop, but worry about damaging it. Will it leave residue behind?
-
A: Our clear stickers will stick strong for as long as you need them, but when you’re ready to remove, the stickers will come off clean, without leaving any messy residue behind!
-
Q: Can I stick these stickers outside, will they last?
-
A: Yes they will! Our stickers are water-resistant, and if applied correctly our stickers will stick strong and last long outside for at least a few years.
-
holographic stickers deets
-
Q: These custom stickers are permanent, will they damage a surface if I try to remove them?
-
A: Depending on the surface or material they are applied to, it’s possible that the surface may be damaged. Most surfaces that have been painted may be damaged when trying to remove a permanent die-cut sticker. For example, surfaces such as laminates and painted walls. It may be possible to remove permanent holographic stickers from lacquered / bake-dried surfaces such as car paint, however we do not guarantee that the surface will not be damaged.
-
Q: Are these holographic die-cut stickers water, dishwasher and freezer safe?
-
A: These stickers are certainly freezer safe and water repellant. They will also withstand dishwasher use thanks to their permanent adhesive. They are not recommended for use on fabrics and other similar materials and as such should not be put through a washer/dryer.
A leather spine journal with a striped front cover and navy back cover. It includes both blank pages and fold-out coloring pages from Fantastic Cities by Steve McDonald.
-
details
-
dimensions
-
-
cover: 5" x 7"
-
pages: 4 1/2" x 6 5/8" (4 1/2" x 11" unfolded)
-
-
coloration
-
-
spine: dark blue leather
-
cover: red, orange, green, blue stripes (front), navy blue (back)
-
endpapers: varied collaged decorative papers in multiple colors
Sometimes you want to insert a visual break in your text that isn't just a new paragraph. You can use three dashes to create a horizontal line:
-
-
This text will be below the line.
-
Lists
-
Unordered lists
-
Unordered lists can be created with dashes or asterisks. With dashes:
-
-
this is an item
-
this is another item
-
-
With asterisks:
-
-
this is an item
-
this is another item
-
-
Ordered lists
-
Ordered (numbered) lists can be created with (surprise!) numbers. You can write numbers as you would normally, or you can just write the number 1 over and over, like so:
-
-
this is item 1
-
despite being written with a 1, this is item 2
-
-
This allows you to insert more information into lists in the future without having to renumber every following item.
-
Nested lists
-
Both unordered and ordered lists can be nested. Just tab the nested section inwards:
-
-
this is an item
-
-
this is nested below it
-
this is also nested
-
-
-
this is another item
-
-
You can mix unordered and ordered lists when you nest.
-
Quotes
-
You can always just use quotation marks, of course, but if you are quoting a larger chunk of text it can be nice to use a blockquote.
-
You format a blockquote by starting the line with a caret:
-
-
This is a quote, and it will render differently than a paragraph.
-
-
If you want a quote to have multiple separate paragraphs, and still contiguously display as one quote, make sure to put a caret on the empty line between the paragraphs.
-
-
This is a multi-paragraph quote.
-
Here's the second paragraph.
-
-
Blockquotes can also have lists
-
They still have the caret at the front
-
-
-
Monospace
-
You can write single words in monospace, or create code blocks:
-
3 backticks surround code blocks
-
-
Code blocks can have syntax highlighting:
-
<h1>Hello, world</h1>
-
Tables
-
Tables in Markdown are kind of annoying to format. You use the pipe (|) character as well as dashes.
-
| Header 1 | Header 2 |
-|---|---|
-| data 1a | data 1b |
-| data 2a | data 2b |
-| data 3a | data 3b |
-
-
When I remove the monospace block, you can see how this formats:
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
- 
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
- 
-
- 
-
- 
-
- 
-
-
- 
-
- 
-
-
- 
-
- 
-
- 
-
-
- 
-
-
- 
-
- 
