A rather geeky/technical weblog, est. 2001, by Bramus
::spelling-error and ::grammar-error pseudo-elements
Part of the CSS Pseudo-Elements Level 4 Specification are ways to style spelling and grammar errors. By default spelling errors — words you have mistyped — get a red dotted underline, thanks to the ::spelling-error pseudo-class selector you can tweak that. Grammar errors — such as a missing capital letter at the beginning of a …
Relive the whole Mars 2020 Entry Descent Landing in your browser, in 3D, powered by Three.JS/WebGL 🤯 Here’s a few pointers to use: Use the ⏪ ⏩ at the bottom to speed up / slow down the animation Scroll over the pane on the left to jump between phases of the landing You can click …
Nice demo by Jhey in which he created a Pure CSS Stopwatch: See the Pen Pure CSS Working Stopwatch 😎 (@property) by Jhey (@jh3y) on CodePen. It uses a clever combination of CSS Animations, CSS Counters, and @property: Each digit gets its own CSS Animation with its own timing. Inside each animation the value of …
Photo by Alex on Unsplash Late 2019 Brad Frost already pondered about The Great Divide and introduced the terms “front of the frontend” and “back of the frontend”. In a new post he gives the easily-shareable overview that lists the differences between both. A succinct way I’ve framed the split is that a front-of-the-front-end developer …
Continue reading “front-of-the-front-end / back-of-the-front-end”
Putting libraries like GSAP and Framer Motion and React Spring aside, Josh W. Comeau digs into the transition property — “the CSS motion workhorse” as he calls it — and easing functions. I especially like the sandbox at the very end of the post that lets you play the various easing functions and framerate An …
Recording from the October 2020 edition of Laravel Worldwide Meetup where Liam Hammet (starting at 36:58) showed off some nice use cases for custom autoloaders in PHP: We use autoloaders in PHP all the time, but if you change your mindset a little, you’ll find they can do a lot more than you might’ve thought. …
Nice in-browser 3D-render of your GitHub History. You can download the result as a .stl file to run it through your 3D printer. Here’s my 2020 timeline for example: I take pride in the fact that my Saturdays (front row) and Sundays (back row) remain as good as empty, and that there’s an occasional gap …
Dzhavat ran into an interesting performance issue where practically his whole site would repaint when a transition in the header was triggered. The element being animated is a span wrapping some text placed inside an h1. The h1 itself is in the upper left corner on the page and contains my name. Initially, only the …
Continue reading “Debugging layout repaint issues triggered by CSS Transition”
z-index (and Stacking Contexts) in CSS
Ahmad Shadeed digs into z-index and covers a few scenarios that create new Stacking Contexts. Understanding Z-Index in CSS → What no one told you about z-index → MDN: Understanding z-index: The Stacking Context →