Preload, prefetch and other <link> tags: what they do and when to use them

One way to improve web performance is to preload content you’ll need later in advance. Prefetch a CSS file, prerender a full page, or resolve a domain ahead of time – and you won’t have to wait for it when it’s actually needed! Browsers have a simple built-in way to do all these things. There’re five <link rel> tags that instruct the browser to preload something. Here’s what they each of them does and when to use them.

Controlling leftover Grid items with pseudo-selectors

I recently wrote about some of the cases where you might want to use Grid instead of flexbox, and vice-versa. One of the scenarios I pointed out might be a better case for using flexbox is when you want to control the behaviour of any leftover grid items that don’t fill an entire row.

Could Grouping HTML Classes Make Them More Readable?

<header class="[ site-header site-header-large ] [ mb-10 p-15 ]">

Those square brackets? Meaningless. Those are there to visually represent the groups to us developers. Technically, they are also classes, so if some sadist wrote .[ {}, it would do stuff in your CSS. But that's so unlikely that, hopefully, the clarity from the groups outweighs it and is more helpful.

Implementing a pin-to-bottom scrolling element with only CSS

Have you ever tried implementing a scrollable element where new content is being added and you want to pin the user to the bottom? It’s not trivial to do correctly. I recently worked on a new CSS feature called ‘scroll anchoring’ that shipped in Firefox 66. While implementing this feature, we discovered that scroll anchoring can be used to create a pin-to-bottom scrolling element without any Javascript. It’s a neat trick, so I thought I’d post the snippet here and explain how it works.

Getting to the bottom of line height in Figma

Fascinating deep dive into the history of line-height and some typographic changes being made at Figma.