Vol_4.6.26

We curate web design resources.

Website of the week:

ARTEMIS II Mission Visualizer - live stream-ish
https://www.nasa.gov/missions/artemis-ii/arow/

Your options for preloading images with JavaScript
There are a number of ways to preload an image on demand with JavaScript — each with their own strengths & drawbacks. Let's explore them.
https://macarthur.me/posts/preloading-images/

Building a Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds
A tutorial on building a scroll-driven WebGL gallery in Three.js with depth-layered images, palette-driven backgrounds, and motion that responds to scroll velocity.
https://tympanus.net/codrops/2026/03/09/building-a-scroll-reactive-3d-gallery-with-three-js-velocity-and-mood-based-backgrounds/

Pretext
It solves the problem of calculating the height of a paragraph of line-wrapped text without touching the DOM. The usual way of doing this is to render the text and measure its dimensions, but this is extremely expensive. Pretext uses an array of clever tricks to make this much, much faster, which enables all sorts of new text rendering effects in browser applications.
https://simonwillison.net/2026/Mar/29/pretext/

css-select
As a compiler, css-select turns CSS selectors into functions that tests if elements match them. As an engine, css-select looks through a DOM tree, searching for elements. Elements are tested "from the top", similar to how browsers execute CSS selectors.
https://github.com/fb55/css-select/blob/master/README.md#css-select----

Applying accessibility fixes with stealth for the greater good
Accessibility had never really played a significant role since I started working as a front-end developer in 2019. It didn’t have a significant role in my boot camp, or in YouTube tutorials I watched, and certainly not in my job.
https://piccalil.li/blog/applying-accessibility-fixes-with-stealth-for-the-greater-good/

An in-depth guide to customising lists with CSS
This first rule of styling lists is that they should be treated with the same reverence you would show any other text. If a list is inserted within a passage of text, treat it as a continuation and integral part of that text.
https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/

Some Favorite Things

CODEPEN Pen of the Week