Author Archives: Bramus!

Don’t use functions as callbacks unless they’re designed for it

Solid advice by Jake: Here’s an old pattern that seems to be making a comeback: import { toReadableNumber } from ‘some-library’; const readableNumbers = someNumbers.map(toReadableNumber); Here’s the problem: // We think of: const readableNumbers = someNumbers.map(toReadableNumber); // …as being like: const readableNumbers = someNumbers.map((n) => toReadableNumber(n)); // …but it’s more like: const readableNumbers = someNumbers.map((item, …

Continue reading “Don’t use functions as callbacks unless they’re designed for it”

Read Post →

Tao of React – Software Design, Architecture & Best Practices

Alex Kondov, Tech Lead at Financial Times, has compiled a huge list of best practices when it comes to writing React. This article is a collection of principles and rules that have proven to be effective for me and the teams I’ve worked with. I outline good practices about components, application structure, testing, styling, state …

Continue reading “Tao of React – Software Design, Architecture & Best Practices”

Read Post →

Building Future UIs

The folks over at Formidable have been experimenting with Houdini and WebGL/Three.js to create futuristic UIs Futuristic sci-fi UIs in movies often support a story where humans, computers, and interfaces are far more advanced than today, often mixed with things like super powers, warp drives, and holograms. What is it about these UIs that feel …

Continue reading “Building Future UIs”

Read Post →

Animating a CSS Gradient Border

Recently, Stephanie Eckles sent out a call to revive the use of CSS border-image. Not to use it with images — which requires a pretty nasty syntax — but to create Gradient Borders in CSS. 🎉 Time to revive an old CSS property! When `border-image` was announced, I was off-put b/c the syntax was so …

Continue reading “Animating a CSS Gradient Border”

Read Post →

:focus-visible Is Here

With Chromium 86 and now recently Firefox 85 supporting :focus-visible, it’s a good time to refer to this post by Matthias Ott: The :focus-visible pseudo-class lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator. You use :focus-visible …

Continue reading “:focus-visible Is Here”

Read Post →

“This website is a single HTML file”

This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content. This setup is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere like a normal person. Brilliant! 🤩 John Doe → …

Continue reading ““This website is a single HTML file””

Read Post →

The Minimum Content Size In CSS Grid

Ahmad recently encountered an issue where a CSS Grid column grew too large: .wrapper { display: grid; grid-template-columns: [main] 1fr [aside] 16em; grid-gap: 2em; } The main column has a 1fr value. That means it will take the available space minus the sidebar and the gap. However, the minimum content size of a grid item …

Continue reading “The Minimum Content Size In CSS Grid”

Read Post →

Form Validation: You want :not(:focus):not(:placeholder-shown):invalid, not :invalid

The built-in browser form validation mechanism can be frustrating as it will mark fields invalid while still entering text. Using only CSS this can be circumvented, so that validations happen afterwards.

Read Post →

Sticky Photostack

Ooh I like this demo, making clever use of position: sticky;: See the Pen Sticky Photostack by Bennett Feely (@bennettfeely) on CodePen. There’s also some clever sizing going on in there to create the whitespace around the images, avoiding the need for a wrapper div per photo. img { width: 100vmin; height: 100vmin; transform: scale(0.6) …

Continue reading “Sticky Photostack”

Read Post →

How to render 3D in 2D canvas

Louis Hoebregts walks us through how they rendered a 3D globe on a 2D canvas. Because as all the following animation steps were plain 2D, I couldn’t use a 3D renderer such as Three.js. And so I had to figure out how to render a 3D shape using only the Canvas 2D API. In this …

Continue reading “How to render 3D in 2D canvas”

Read Post →