Photoblogging with Sanity and Eleventy (opens in a new window or tab)
In this post, I will show how I built a personal photo blog.
All Links
Carousels: No one likes you (opens in a new window or tab)
I know carousels have not magically disappeared in the last 5 years, but they have come up yet again in (work) conversation.
Using the Increased Contrast Mode CSS media query (opens in a new window or tab)
Giving visitors to my website who require increased contrast the ‘enhanced’ level of contrast, and all others the ‘minimum’ level in both Light and Dark Mode.
Aspect Ratio is Great (opens in a new window or tab)
Goodbye, padding hack.
Respecting Font Size Preferences: Rems and 62.5% Base Font Size (opens in a new window or tab)
Let's understand why rem is the ideal unit for font size and how setting the root font size to 62.5% can make our lives easier.
WCAG, but in language I can understand (opens in a new window or tab)
Summing up each success criterion in WCAG 2.1 in as close to a single paragraph as I can manage.
How To Use Contentful With Eleventy (opens in a new window or tab)
Contentful is an immensely well-featured headless content management system, but the density of its featureset can be daunting to integrate with static site generators. The great news is, Eleventy is so well-designed and modular — it doesn’t have to be nearly so challenging.
Form Autocomplete (opens in a new window or tab)
Let's talk about some handy web form APIs that can make forms much more comfortable to fill out: autocomplete and virtual keyboard options.
Image Display Elements (opens in a new window or tab)
There are a few different ways to add images to your page depending on what you care about in regards to what part of the image is displayed, the quality, and the performance.
Consistent, Fluidly Scaling Type and Spacing (opens in a new window or tab)
A sizing scale is a uniform progression of sizes based on a scale—or, more accurately, a ratio.
Multiline Comment (opens in a new window or tab)
Could you use CSS Grid to draw “pixels” on a resizable, responsive canvas? (“Canvas” as in 🎨, not as in <canvas> ☺️)?
Accessible SVGs: Perfect Patterns For Screen Reader Users (opens in a new window or tab)
Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers.
Includes and Macros (opens in a new window or tab)
It’s not always obvious why you should choose one over another.
Configuring Web Fonts in 11ty with Global Data (opens in a new window or tab)
I wanted to have a single source of truth for our fonts that I could expose as global data and reuse in my templates, front matter, inline CSS, and wherever else they're needed.
One repo, many sites (opens in a new window or tab)
Who would have thought; software.gay was still available.
How to get, set, and remove data attributes with vanilla JavaScript (opens in a new window or tab)
Today, we’re going to look at how to get, set, remove, and check for data attributes on an element.
Digital Accessibility and Chronic Pain (opens in a new window or tab)
Designing for chronic pain is just as important as designing for other disabilities.
Using CSS Variables for reduced motion on a global scale (opens in a new window or tab)
To respect the reduced motion feature doesn’t necessarily mean removing the animation altogether.
Lazily Loading Images with the 11ty Image Plugin (opens in a new window or tab)
Images are a core part of the web, but they don't come for free.
The hidden world of aria-hidden (opens in a new window or tab)
An interesting feature of aria-hidden is that it hides stuff from screen reader users, but its effects are hidden from everyone else.