A rather geeky/technical weblog, est. 2001, by Bramus
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 →
Collection of CSS snippets by Stephanie Eckles to create some common layouts. It’s good to see how Flexbox and Grid have changed our approach to layouting, as these examples used to require a truckload of markup and/or some nasty CSS hacks before 😅 SmolCSS →