A rather geeky/technical weblog, est. 2001, by Bramus
Back in June, Will Boyd wondered what things CSS can animate, which turns out to be quite a lot. This articles explores some of the unexpected things that CSS can animate and some nifty things you can do by animating them. I like this demo where you choose between two options (in which a z-index …
Continue reading “The Surprising Things That CSS Can Animate”
With Node 12 and up supporting ES Modules natively and Node 10 — the last version to not support it unflagged — going EOL, it’s time to start migrating your code to ES Modules. Aral Balkan took the time to convert his tool “Place” to embrace them and documented his work: Yesterday, I refactored Place, …
Not that you should ever need it, but if you were to find yourself in such a situation: it exists. Bootstrap 5 drops support for Internet Explorer 11, but you can add support back by simply adding a CSS file and a few JavaScript polyfills. Bootstrap 5 for IE 11 → Find out here what’s …
Sam Thorogood has been looking into all kinds of changes that can happen to DOM Nodes: This post will explain how to be notified when: an element is added or removed from the DOM the bounding box of an element changes (i.e., resizes) an element moves around the page for any reason Expect some ResizeObserver, …
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”
With the January meeting of TC39 behind us, the Stage-4 features that will make it into ES2021 have been selected. The following features will be part of ES2021, which will be formalised mid-2021: String.prototype.replaceAll Promise.any WeakRefs + FinalizationRegistry Logical Assignment Operators Numeric Separators Apart from the linked-to posts above, Pawel Grzybek has done a writeup …
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”
