Ooh I like this demo, making clever use of position: sticky;: See the Pen Sticky Photostack by Bennett Feely (@bennettfeely) on CodePen. There’s also some clever sizing going on in there to create the whitespace around the images, avoiding the need for a wrapper div per photo. img { width: 100vmin; height: 100vmin; transform: scale(0.6) …
How to render 3D in 2D canvas
Louis Hoebregts walks us through how they rendered a 3D globe on a 2D canvas. Because as all the following animation steps were plain 2D, I couldn’t use a 3D renderer such as Three.js. And so I had to figure out how to render a 3D shape using only the Canvas 2D API. In this …
Creating A React App From Scratch Using Snowpack
How to Record Screen Actions as a Puppeteer Script
One of the new (experimental) additions to the Chrome 89 DevTools is the Puppeteer Recorder: DevTools can now generate Puppeteer scripts based on your interaction with the browser, making it easier for you to automate browser testing. Simply start a new recording and as you click around you’ll see Puppeteer code being generated. Stefan Judis …
Continue reading “How to Record Screen Actions as a Puppeteer Script”
Cancel JavaScript Event Listeners with AbortController
One of the new features that was added in Chrome 88 is the ability to pass an AbortController‘s signal into addEventListener. const controller = new AbortController(); const { signal } = controller; document.querySelector(‘…’).addEventListener(‘foo’, (e) => { // … }, {signal}); By calling controller.abort();, you can remove the listener from the event target, just like when …
Continue reading “Cancel JavaScript Event Listeners with AbortController“
Implement footnotes in HTML with the <ruby> element
Looking for a way to implement footnotes in HTML, Thomas Steiner experimented with using the <ruby> element. The MDN docs describe the ruby element as follows. “The HTML <ruby> element represents small annotations that are rendered above, below, or next to base text, usually used for showing the pronunciation of East Asian characters. It can …
Continue reading “Implement footnotes in HTML with the <ruby> element”
How We Improved SmashingMag Performance
Interesting real-world case-study over at Smashing Magazine: In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of …
3D CSS Birthday Card
Nice demo by Jhey: See the Pen 3D CSS Birthday Card (Tap to open! 👇) by Jhey (@jh3y) on CodePen. Contains a little bit of JavaScript to make the card respond your mouse movement and to play the audio. The opening/closing of the card and the confetti are done using only CSS.
How to Play and Pause CSS Animations with CSS Custom Properties
Mads Stoumann, writing for CSS-Tricks, starts off with a simple idea: set a Custom Property to either playing or paused to control animation-play-state. [data-animation] { /* … */ animation-play-state: var(–animps, running); } /* Use a checkbox to pause animations */ [data-animation-pause]:checked ~ [data-animation] { –animps: paused; } But one of the listed use cases is …
Continue reading “How to Play and Pause CSS Animations with CSS Custom Properties”
Understanding CSS clip-path
Ahmad Shadeed is at it again, this time covering CSS clip-path. In this article, I aim to provide you with a clear explanation of how clip-path works in detail when to use it, and how you can use it today in your web development projects. Are you ready? Let’s dive in. As per usual: tons …