front-of-the-front-end / back-of-the-front-end

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 …

An Interactive Guide to CSS Transitions

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 …

Unconventional Autoloaders in PHP

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. …

GitHub Skyline — Your GitHub Story in 3D

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 …

Debugging layout repaint issues triggered by CSS Transition

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 …

SmolCSS – Minimal snippets for modern CSS layouts and components

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 →

HTML Table with Sticky Header Row and Sticky First Column

Nice work by Chris Coyier: See the Pen Table with Sticky Header and Sticky First Column by Chris Coyier (@chriscoyier) on CodePen. I tried this on a table before and would swear it didn’t work back then. Perhaps I did something wrong, because it’s quite tricky as Chris details: The “trick” at play here is …

The Ingenious Design of the Aluminum Beverage Can

Bill details the engineering choices underlying the design of a beverage can he explains why it is cylindrical, outlines the manufacturing steps needed to created the can, notes why the can narrows near it lid, show close ups of the double-seam that hold the lid on, and details the complex operation of the tab that …