Anchor position tool

This is a great little helper in understanding anchor positioning in CSS.

Chrome-only for now.

The hardest working font in Manhattan – Aresluna

This is absolutely wonderful!

There’s deep dives and then there’s Marcin’s deeeeeeep dives. Sit back and enjoy this wholesome detective work, all beautifully presented with lovely interactive elements.

This is what the web is for!

Why is everything binary? (Webbed Briefs)

Heydon’s latest video is particularly good:

All of my videos are black and white, but especially this one.

Knowing CSS is mastery to Frontend Development — Anselm Hannemann

Anselm isn’t talking about becoming a CSS wizard, but simply having an understanding of what CSS can do. I have had similar experiences to this:

In the past years I had various situations where TypeScript developers (they called themselves) approached me and asked whether I could help them out with CSS. I expected to solve a complex problem but for me — knowing CSS very well — it was always a simple, straightforward solution or code snippet.

Let’s face it, “full stack” usually means “JavaScript”—HTML and CSS aren’t considered worthy of consideration. Their loss.

If Not React, Then What? - Infrequently Noted

Put the kettle on; it’s another epic data-driven screed from Alex. The footnotes on this would be a regular post on any other blog (and yes, even the footnotes have footnotes).

This is a spot-on description of the difference between back-end development and front-end development:

Code that runs on the server can be fully costed. Performance and availability of server-side systems are under the control of the provisioning organisation, and latency can be actively managed by developers and DevOps engineers.

Code that runs on the client, by contrast, is running on The Devil’s Computer. Nothing about the experienced latency, client resources, or even available APIs are under the developer’s control.

Client-side web development is perhaps best conceived of as influence-oriented programming. Once code has left the datacenter, all a web developer can do is send thoughts and prayers.

As a result, an unreasonably effective strategy is to send less code. In practice, this means favouring HTML and CSS over JavaScript, as they degrade gracefully and feature higher compression ratios. Declarative forms generate more functional UI per byte sent. These improvements in resilience and reductions in costs are beneficial in compounding ways over a site’s lifetime.

What Is React.js? (Webbed Briefs)

Its proponents can be weird, it takes itself far too seriously, and its documentation is interminable. These are some ways that some people have described Christianity. This video is about React.js.

Should this be a map or 500 maps? - by Elan Ullendorff

This is kind of about art direction and kind of about design systems.

There is beauty in trying to express something specific; there is beauty too in finding compromises to create something epic and collective.

My only concern is whether we are considering the question at all.

AI Safety for Fleshy Humans: a whirlwind tour

This is a terrificly entertaining level-headed in-depth explanation of AI safety. By the end of this year, all three parts will be published; right now the first part is ready for you to read and enjoy.

This 3-part series is your one-stop-shop to understand the core ideas of AI & AI Safety — explained in a friendly, accessible, and slightly opinionated way!

( Related phrases: AI Risk, AI X-Risk, AI Alignment, AI Ethics, AI Not-Kill-Everyone-ism. There is no consensus on what these phrases do & don’t mean, so I’m just using “AI Safety” as a catch-all.)

An Interactive Guide to CSS Container Queries

Another terrific interactive tutorial from Ahmad, this time on container queries.

The growing backlash against AI

You are not creative and then create something, you become creative by working on something, creativity is a byproduct of work.

In this way “AI” is deeply dehumanizing: Making the spaces and opportunities for people to grow and be human smaller and smaller. Applying a straitjacket of past mediocrity to our minds and spirits.

And that is what is being booed: The salespeople of mediocrity who’ve made it their mission to speak lies from power. The lie that only tech can and will save us. The lie that a bit of statistics and colonial, mostly white, mostly western data is gonna create a brilliant future. The lie that we have no choice, no alternatives.

CSS :has() Interactive Guide

This isn’t just a great explanation of :has(), it’s an excellent way of understanding selectors in general. I love how the examples are interactive!

022. Web 2.0 Expo 2007

I’ve been enjoying Richard’s trip down memory lane with his memoirs of the Web2.0 years. Imagine my surprise when I showed up in this one!

I remember that fun panel from the Web2.0 Expo …Jesus! Seventeen years ago!

Okay, Color Spaces — ericportis.com

Everyone is quite rightly linking to this great interactive explainer on colour. It does a great job of describing complex concepts in a clear accessible way.

SpeedCurve | The psychology of site speed and human happiness

Tammy takes a deep dive into our brains to examine the psychology of web performance. It opens with this:

If you don’t consider time a crucial usability factor, you’re missing a fundamental aspect of the user experience.

I wish that more UX designers understood that!

Pluralistic: Tech workers and gig workers need each other (13 Jan 2024) – Pluralistic: Daily links from Cory Doctorow

Ever wondered why you’re always being encouraged to download the app?

But zero percent of app users have installed an ad-blocker, because they don’t exist, because you’d go to prison if you made one. An app is just a web-page wrapped in enough IP to make it a felony to add an ad-blocker to it.

Designing better target sizes

This is a wonderfully in-depth interactive explainer on touch target sizes, with plenty of examples.

scottjehl/PE: declarative data binding for HTML

This is an interesting idea from Scott—a templating language that doesn’t just replace variables with values, but keeps the original variable names in there too.

Not sure how I feel about using data- attributes for this though; as far as I know, they’re intended to be site-specific, not for cross-site solutions like this.

The origins of the steam engine

The fascinating pre-history of steam power, illustrated with interactive widgets.

The subjective experience of coding in different programming languages (Interconnected)

I love the analogies Matt uses to describe the vibes of different kinds of coding:

When I’m deep in multiple nested parentheses in a C-like language, even Python, I feel precarious, like I’m walking a high wire or balancing things in my hands and picking my way down steep stairs.

I haven’t done much Haskell but what I did felt like crawling underground through caves and tunnels.

Opening a terminal window to a distant server is like reaching through a hatch with my arm, but a long way; ssh tunnel is well named.

Writing code with GitHub Copilot and Typescript in full flight feels like, well, flying, or at least great bounding leaps like being on the Moon.

Invokers (Explainer) | Open UI

This is a really interesting proposal, and I have thoughts.