Your work is done when it looks so simple that the consumer thinks they could have done it, which means they won’t appreciate how hard you worked.
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:
Nice demo by Jhey in which he created a Pure CSS Stopwatch:
It uses a clever combination of CSS Animations, CSS Counters, and
@property, CSS knows how how to “animate” (read: interpolate) the values.
The animation play state is controlled using a checkbox, as detailed here.
💁♂️ CSS Counters is one of the 9 Underutilized CSS Features
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 determines the look and feel of a button, while a back-of-the-front-end developer determines what happens when that button is clicked.
Imo this separation also is present in backend development, where you have the “front-of-the-backend” people and “back-of-the-backend” people. Hear me out:
You might already know these two parties as “backend devs” and “ops”, so nothing new there. Thanks to things like Docker and CI/CD the line between both has become more and more vague, with overlaps in responsibilities between both.
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
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. We’ll be taking a look at using some unconventional techniques, we can use autoloaders to take PHP a step further, introducing interesting and exciting new functionality PHP natively doesn’t support.
Really enlightening stuff! Slides also available.
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 in between the blocks where I took some time off.
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
spanwrapping some text placed inside an
h1itself is in the upper left corner on the page and contains my name. Initially, only the letter “D” is shows. The remaining part fades-in on hover.
I was quite surprised to see the whole page flashing green given the transition was scoped to a very isolated element. I didn’t really see any connection between animating a
spanand causing repaint on the whole page.
The culprit: Stacking Contexts