Like Carbon, but a bit different. Ray.so →
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 …
Continue reading “Debugging layout repaint issues triggered by CSS Transition”
Understanding 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 →
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 …
Continue reading “HTML Table with Sticky Header Row and Sticky First Column”
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 …
Continue reading “The Ingenious Design of the Aluminum Beverage Can”
Remotion – Create videos programmatically in React
Remotion is a suite of libraries building a fundament for creating videos programmatically using React. Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc. Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem Also comes with a handy player …
Continue reading “Remotion – Create videos programmatically in React”
Style the target text from text-fragment links using the ::target-text pseudo-element
One of my favorite features that shipped with Chrome 80 — apart from Optional Chaining — is the ability to link to text-fragments. By default Chrome will highlight those in yellow: 💡 To easily create text-fragment links there’s this Chromium Plugin you can use. ~ As tweeted before, coming to Chromium 89 is the ability …