A very detailed and thorough overview of how to use design tokens to power a distributed design system and site architecture. The crux is ensuring design (Figma), code (CSS), and content management (in this case, Contentful) are all aligned.

Also includes some solid advice on why design tokens should be transformed into semantic tokens when they hit the codebase, which I fully agree with.

An excellent overview of how to approach fluid design on the web. Lots of excellent references and techniques, particularly those around using Flex layout with flex-basis to control widths, or auto-repeating Grid layouts for extra control. Also some solid stats around the problems of designing for fixed breakpoints.

On the Tailwind trap, or how Tailwind hides the shortcuts and lures people into bad habits:

When I was using grid in Tailwind, I thought of it as a static thing with a defined number of columns, or rows, or both. To change it I had to explicitly state how many new columns (or rows) I wanted. I wasn't aware that a grid could be dynamic, adapting the number of columns or rows based on the content and available space

On how fluid design comes with one clear tradeoff:

Everything has tradeoffs - you can't have it all. And as far as I can tell the main tradeoff with building fluid websites is that you can't control every aspect. At some screen sizes it won't look exactly as you wished it did.

On the reality of designing for fixed breakpoints (and how rare those breakpoints are to fit what your users use):

Two of the designs I worked on were likely seen by less than 1% of people. And even if we're generous and include the entire range for the largest breakpoint, even though 1280px is at the top end, less than 3% of people would have seen three of my designs exactly as I intended them.

A useful primer on how to use migration files in Craft.

Migra­tions are PHP files that con­tain code which alters the data­base from one state to anoth­er.

The core commands are as follows.

Run any waiting migrations, specifically the safeUp() functions:

php craft up

Rerun the last migration (undoes the previous migration and runs the file(s) again, so any changes are automatically applied):

php craft migrate/redo --interactive=0

Revert the previous migration (runs the safeDown() function):

php craft migrate/down --interactive=0

Eric introduces the Tiny TV 2, an adorable piece of faux-retro tech that lets you load videos onto a tiny, replica cathode ray TV (which is obviously using an LED panel, digital files, and visual effects for all of the analogue touches e.g. static). But he also has some interesting surrounding thoughts on how quality, well-made goods can spark genuine joy. And now I kinda want my own mini TV to hack around with – and incredibly, they aren't even that expensive!

I needed to throw together a quick presentation for an internal team meeting at work, but I've maxed out my Slides.com free usage and really hate Google's offering, so went digging for something better. Thanks to the Front End Horse community, I was introduced to Sli.dev. It's a solution with a clear learning curve – especially if you've never used Vue.js before – but after an hour of noodling around, I had a completely useable slide deck. Another couple of hours later and I had a custom, branded theme, using our company fonts and colours throughout. And now that's setup, all I have to do is clone the Git repo and edit the solitary Markdown file that controls the entire deck. I kinda love it 😅

But there's more to the codebase then scratching a bit of a developer itch. It comes with some great tools bundled, including prebaked slide animations, code formatting/highlighting, and some very clever custom focus order management so you can click through and showcase specific aspects of a slide in a preset sequence. The presentation mode is surprisingly robust, making it trivial (particularly with multiple monitors) to see all of your notes, the next slide, and various other tools whilst everyone else only sees the presentation. And, it's completely self-hosted, so I could render out the final deck and stick it on a web host somewhere to archive it indefinitely.

There are some downsides, but I've not hit anything too egregious. It has a very minor loading time, and there is an irritating reliance on additional abstractions, so your templates are all in Vue (not a bad choice) and CSS defaults to UnoCSS, but even here I was able to revert to pretty much vanilla CSS with relative ease. So really, as long as you can get past the unconventional install method (npm and CLI commands), this is a very robust piece of kit.

Perhaps the definition of a "lolsob" micro-essay on the state of the internet in 2024. 

On the usefulness of search engines:

The first page of Google results are links to pages that have scraped other pages for information from other pages that have been scraped for information. All the sources seem to link back to one another. There is no origin.

On the helpfulness of AI:

Your coworker sends you a PowerPoint pack to support a presentation you are giving to the executive committee, but you can’t make heads or tails of it. You call them over Zoom and they tell you they used ChatGPT to write it.

A little too personal:

Your Gmail is approaching storage capacity.

Every web developer has torn their hair out trying to align an icon with some text, or two separate pieces of text with each other, or (god forbid) a whole sequence of text nodes, icons, form elements, etc. Niki has put together a really great article on why this is so tricky, what we can do about it, and how designers/font creators can help make everyone's lives easier.

This is my claim: we, as a civilization, forgot how to center things.

Together, I trust, we can find our way back to putting one rectangle inside another rectangle without messing it up.

On why text-align: middle never quite seems to do what you want:

text-align: middle comes closest, but it aligns by x-height, not cap-height, which still looks unbalanced

On how fonts can make themselves more easily align-able:

If you are a font designer, make life easier for everybody by setting your metrics so that ascender − cap-height = descender

Important! You don’t have to actually extend your ascenders/descenders to these boundaries. As you can see in the picture, my ascender space, for example, is way underutilized. Just make the numbers match.

On how to calculate the right amount of padding to use on any given font:

You can get the required font metrics for your font from opentype.js.org/font-inspector.html (ascender, descender, sCapHeight).

On how to extend that to icons and inline iconography/imagery:

Now that we have that sorted, aligning icons is not that hard too. You set vertical-align: baseline and then move them down by (iconHeight - capHeight) / 2

Cursorless is a very cool VS Code plugin that uses Talon (voice-control assistive tech) to navigate around codebases, write and edit code, and do just about anything else. Even if that isn't interesting, give the tutorial video a watch, because it's fascinating.

A phenomenally interesting journey through one person's assistive set-up, using only the left mouse button to navigate the web, code websites, play video games, and everything else in-between.

On a better keyboard layout for limited cursor-travel, pointer-only typing:

...you come across the Chubon keyboard layout, which seems to be optimized for your very situation—it places common letters toward a center grouping where they’re easy to click with less pointer travel.

On the many superpowers of the macOS Accessibility Keyboard:

The built-in Panel Editor gives you the ability to edit the panel or create new ones. This means you can create your very own keyboard layout! The Panel Editor is powerful. You can add not only the basic keys but also buttons which execute key combos, invoke system actions, input strings of text, and more.

On some unexpected accessibility benefits of supporting Markdown:

Note-taking apps like Bear that use Markdown for formatting are great because you can avoid using keyboard shortcuts or UI controls for formatting—and you added dedicated punctuation buttons to your keyboard so that you don’t need to press Shift to access characters like the asterisk or underscore.

On a tool for making your mouse behave like a touch event in macOS browsers:

The browser extension ScrollAnywhere lets you click and drag on webpages to scroll them—much like you would on a mobile touchscreen.

On how you can use voice commands to play video games:

Since Talon gives you the ability to verbalize keypresses, your mouse pointer is freed from typing duty. This is important for being able to play games that require camera control via the mouse.

On how tools can be combo'ed to turn a single mouse input into a whole stack of augmentations and efficiencies:

You started with nothing more than a one-button mouse. But from there you expanded the capabilities of that humble device, giving yourself keyboard access, shortcuts and macros, assistive tech tools, and powerful voice input capability.

What is the best way to provide descriptive text for images that are both complex and the main focus of a page? Paul has tried to tackle this on pages dedicated to their personal art, and found that the advice isn't necessarily that clear. The tl;dr would be: move the text onto the page itself and reference it from the image (using ARIA or alt attributes, or a combination).

I hadn't realised that the WAI has outlined seven image "types", nor that they have different suggested approaches based on the "type". I initially thought Paul's use of the "complex image" type felt wrong, but reading over the spec I agree; it's weird, but that's the best fit for these kinds of pages/content.

On disproving the weirdly common belief that you can't have more than 140 characters in alt text (this isn't Twitter!):

Myth busted: there is no character limit on “alt” text.

On concerns with overly long alternative text:

So you’re free to use as many characters in your
alt text as is necessary to describe an image, but it’s also worth remembering that someone using a screen reader apparently cannot skip listening to the alt text if it feels like it’s going on forever, so try not to be unnecessarily verbose.

On the official guidance from WAI (taken from the WAI tutorial on images):

In these cases, a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image.

On how to deal with "Complex Images":

The general advice is to make long descriptions available to everyone to reach a wider audience with your content. For example, show the description as part of the main content.

I've always struggled to find glasses or sunglasses that fit my weird head, so I was intrigued by a company explicitly targeting body shapes that aren't well catered for. Unfortunately, the selection is pretty narrow and likely won't work with my level of prescription, but saving to check back in the future.

Today's obscure HTML element: <bdi>. It stands for "bidirectional" and refers to text that can include both RTL and LTR languages (does not appear to care about other variations).

Looking on MDN, the exact order is quite complex, but thankfully the browser does most of the heavy lifting for you.

Usernames and other user-provided values should be directionally isolated from their surrounding inline text, if there is any.

In HTML, this can be done with the <bdi> element.

Not only does this stop people messing with text direction using directional overrides (sorry for ruining your jokes), it also makes sure that an English sentence still ends on the right even when starting with an Arabic name.