I’ve been intrigued by web components for some time, from a safe distance. I like things that are part of the web platform, but mostly when that means I don’t have to write much JavaScript.
Spurred by last week’s ShopTalk I rolled out View Transitions here on my static Jekyll site.
A complete guide.
There are already countless of metadata systems out there without having to use Twitter cards.
What makes Web Components different than JS frameworks is that they're a set of Web Standards built into the platform.
User-facing state is what someone experiences when they interact with (or try to interact with) an element in some capacity. It is reactive, helping to communicate the ways in which something can be manipulated.
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.
Discover which SVG patterns we should avoid and which patterns are the most inclusive when comparing different combinations of OSs, browsers, and screen readers.
It’s not always obvious why you should choose one over another.
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.
Who would have thought; software.gay was still available.
Today, we’re going to look at how to get, set, remove, and check for data attributes on an element.
Images are a core part of the web, but they don't come for free.
An interesting feature of aria-hidden is that it hides stuff from screen reader users, but its effects are hidden from everyone else.
An attempt to explain and show real basic examples of bundling CSS and JavaScript with basic needs.
A straightforward how-to.
Using Git commit time as a reliable time to use as modified or last updated time.
Improve user experience by providing a print style sheet for your website.
This post aims to provide you with all the tools you need to start creating your own generative SVG art/design.
The <dl>, or description list, element is underrated. It's used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile.
Collection of useful HTML components.
To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.
Like many companies, we have a Hack Week at Sentry. In 2017, we coded an app which blared entrance music for anyone who stepped foot in our office. In 2019, we encouraged folks to be nice on the Internet.
Examples of how to implement accessible icons.
Detailed over of the differences and how to use.
How to implement a multi-theme switcher while respecting user's light/dark mode preference by default in Eleventy.
Good overview of Webmentions including how-to and links.
Setting up responsive images in Eleventy using Cloudinary.
How to cover one element with another.
Collection of filters, shortcodes and other tips for extending Eleventy.
Multiple ways to select a random post.
In-depth data explainer for Eleventy.
Nifty trick that could come in handy.
An approach to handle drafts in Eleventy.
In-depth how-to, title says it all.
How to add scheduled publishing to 11ty site with a bonus for drafts.
Using plain Javascript to manipulate the UI
Different options and approaches to implementing a dark mode design and the technical considerations they entail.
Title says it all.
Quick way to see what has focus.
In this series, we will examine the proper steps to creating forms for the web, how to think about the code we write, and considerations to make along the way.
Show and tell examples of making patterns and UI elements more accessible.
A guide for modern browsers.
Handy list of useful dev tools tips.
Quick how-to for setting up design tokens in Eleventy.
Overview of how to ensure forms are accessible.
In-depth look at how to accessibly use SVGs with radio buttons.
15 things to improve website accessibility.
Considerations for opening links in new tab/windows.
Overview of when to use the name attribute.
Video overview of how to create filters in Eleventy.
Overview of how to and how not to use the tabindex attribute
Good overview of when to use ARIA in combination with semantic HTML.
