A rather geeky/technical weblog, est. 2001, by Bramus
react-blurhash
react-blurhash allows you to easily integrate Blurhash Placeholder Images images in your React Projects: Blurhash component is the recommended way to render blurhashes in your React projects. It uses BlurhashCanvas and a wrapping div to scale the decoded image to your desired size. You may control the quality of the decoded image with resolutionX and …
Continue reading “Easily include Blurhash placeholders in your React projects with react-blurhash“
Today, the LEGO Group is launching LEGO® White Noise, a new playlist designed to help listeners find a moment of relaxation in their busy lives. The playlist is composed of a series of audio tracks created using nothing but the iconic sounds that the LEGO brick makes, sounds that are recognised by generations all over …
Michael Scharnagl: I am currently building a book section for this site and thought it would be cool to show the books in 3D and also to make it visible how many pages a book has. In this article I would like to show you how to use CSS custom properties to adapt the thickness …
Continue reading “Make the page count of a 3D book visible using CSS Custom Properties”
Simon Hearne, who has been keeping a closer eye on unexpected layout shifts ever since Core Web Vitals came into play: One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT). In this post we will explore the surprisingly complex world of text rendering on the web and …
Continue reading “How to avoid layout shifts caused by web fonts”
Solid list of tips by the folks over at Snyk: By the time you’re at number 8 your mind may have dwelled, but don’t skip out on that step though! It not only allows you to build smaller images but also prevents you from having unnecessary files (read: security risks) left inside your container. Basically …
Continue reading “10 best practices to containerize Node.js web applications with Docker”
Ana Tudor recently shared a trick on how to make an image partially greyscale: #tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes. background: url(cat) 50%/ cover, linear-gradient(-45deg, transparent 50%, grey 0);background-blend-mode: luminosity Many variations possible. — Ana Tudor 🐯 (@anatudor) January 20, 2021 …
Continue reading “Animated Greyscale to Color Image Reveal Effect”
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”
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”
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 …
: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 …