CSS
A Foldable Zig-Zag Connector Using Modern CSS
In a previous post, we created a fancy connector where a straight line bends (or stretches) based on the distance between the connected elements. This time, let's try a foldable zig-zag connector.
A select should tell you something
Customizable select isn’t just a prettier dropdown. Five before/after demos show how options can carry what people need to decide.
Quirks and Vintage Uses of CSS Table Display
I’ve long found the ability to use layouts of table elements with CSS rather odd. In addition to well known and loved values of CSS’ display property, like block, inline, flex, and grid, there are values like table and table-cell. What do these values do and why would they be used?
Re-Implementing :nth-child() With Modern CSS
Combining :nth-child with style queries and sibling-index() to conditionally select child elements.
Modern CSS Might Make Your Front-End More Complex
Replacing JavaScript with a modern CSS feature can simplify a piece of code while making the wider application harder to reason about. Gabriel Shoyombo explores what happens when logic is split between CSS and JavaScript, sharing practical guidance to help you keep complexity in check during migration.
Multi-Column Different-Speed Scrolling
Explores creating visually interesting photo galleries where columns scroll at different speeds or even in opposite directions.
HTML
Overriding Heading Levels With the headingoffset HTML Attribute
There are a few scenarios where we might need to change the level of a heading (<h1>–<h6>). As an example, we create a component with a <h1>, but then we use the component in a different context where it needs to be a <h2>. I know, I know, that’s what component props are for, but the headingoffset HTML attribute is another option.
Firefox Nightly 153 shipped headingoffset behind the dom.headingoffset.enabled flag, so we’re a way off, and it isn’t really usable until all web browsers support it, but it’s well worth a look now.
JavaScript
Zumly - Zoom-based navigation for the web
Zumly is a JavaScript library for hierarchical zoom navigation. Your interface is a set of screens called views. Clicking an element in one view zooms into it, and the next view grows out of that element. Zooming out returns along the same path. Moving between sibling views at the same level slides sideways.
procedural-almanac - A JavaScript library of procedural generation techniques, with citations for every function
Procedural drawing and motion techniques, each with its sources and short tests.
Demo: Random Island Generator.
BoardUI - React Design System for Dashboards
BoardUI is a React design system with 103 unique components, including 19 data charts, plus 10 Pro templates and 400+ design tokens, designed in Figma.
vanilla-web - A styleguide skill for building web apps with HTML, CSS and JavaScript only: no framework, no bundler, no server logic
It targets coding agents, but the conventions are the same ones a human team would adopt.
This skill was developed agentically. A coordinating agent ran five parallel research agents, a report writer, and five reference writers, with a human reviewing and steering between rounds. The chain of evidence is kept: every rule in references/ carries the link it was derived from.
react-axis-drag - A React hook for pointer drags that lock to one axis
Swipe a row sideways, drag a sheet down, pull a list to refresh: the drag follows one axis and leaves the other to the browser, so the page still scrolls.
No dependencies. About 1.4 kB minified and gzipped. React 18 and 19. Renders on the server.
Text.js - A React framework for apps that render in the browser console
Build full-stack React apps that render inside console.log.
Miscellaneous
desigma - Free Figma alternative made on Rust
Frames, auto layout, components and variants, prototyping, live collaboration, keyframe motion, whiteboards, decks, vector editing and real Figma file import, in a native desktop app written entirely in Rust. Free, offline, and yours to change.