Steve Ruiz recently noted that in many design tools a group of shapes would end up at a different position after you rotate them and then successively rotate them back. The problem here is that the average center of the group — the point on which the group rotates — changes after the first rotation. …
Category Archives: Elsewhere
How I built a modern website in 2021
Kent C. Dodds recently launched his new site, built with Remix (which soon will go open source). In this post he lifts the hood and explains the technical details. I especially like how his build process is split into two parts: Updating the content Building the source That way he doesn’t waste precious CPU cycles …
Conditional border-radius and three future CSS features
Stefan Judis has reworked Ahmad Shadeed‘s Conditional border-radius, using these three (future) CSS additions: Media query ranges Container Queries CSS @when + @else Unlike the original code, the result definitely is a very nice and readable piece of code that doesn’t feel hacky at all — I like where CSS is headed 😊 Conditional border-radius …
Continue reading “Conditional border-radius and three future CSS features”
Tachometer – Statistically rigorous benchmark runner for the web
From the Polymer team: Tachometer is a tool for running benchmarks in web browsers. It uses repeated sampling and statistics to reliably identify even tiny differences in runtime. To compare two files, run it like so: npx tachometer variant1.html variant2.html Tachometer will open Chrome and load each HTML file, measuring the time between bench.start() and …
Continue reading “Tachometer – Statistically rigorous benchmark runner for the web”
How To create the Stripe Website Gradient Effect
Kevin Hufnagl reverse engineered Stripe’s Website Gradient Effect. Here’s what he found on the JavaScript side of things: Essentially they are using a minimalistic implementation of WebGL which they called minigl and a Gradient Class which is used to store all of our animation properties and control the animation. See the Pen Stripe Website Gradient …
Continue reading “How To create the Stripe Website Gradient Effect”
CSS Logical Properties Mapping
Love this Pen from Adrian Roselli where you can easily switch between Physical and Logical Properties. 💡 Someone should fork this and add toggles to change the writing-mode / direction. Related: CSS Logical Properties Are the Future of the Web & i18n →
How to win at CORS
Jake Archibald takes a deep dive into CORS: CORS is hard. It’s hard because it’s part of how browsers fetch stuff, and that’s a set of behaviours that started with the very first web browser over thirty years ago. Since then, it’s been a constant source of development; adding features, improving defaults, and papering over …
W3C TPAC 2021: CSS WG Updates
At (the ongoing) TPAC 2021 — the W3C Annual Conference — the CSS Working Group provided two video updates that summarize some of the ongoing work they’ve been doing. Perfect way to get up to speed in less than 10 minutes Improving CSS Architecture with Cascade Layers, Container Queries, Scope In this video Miriam Suzanne …
Atropos — Stunning touch-friendly 3D parallax hover effects
Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and Vue.js I like that this script is also comes in a VanillaJS version, which shares its core with the React and Vue implementations. Atropos → Related: You could build this with pure CSS …
Continue reading “Atropos — Stunning touch-friendly 3D parallax hover effects”
PWA Summit 2021 Talk Highlights
The entire livestream of PWA Summit 2021 is available online on YouTube. This is the full livestream of the conference, and includes the keynote, all 9 talks, all 3 live Q&A sessions, and the full Future of Web Apps panel. It also includes four talks from our organizing companies. Highlights to me are: Make your …