Sticky Photostack

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) rotate(…);
}

Here’s a forked demo that also removes the figure, stripping it down to its core:

See the Pen Sticky Photostack (Forked) by Bramus (@bramus) on CodePen.

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 article, I’ll show you how I finally did it. I’ll first explain how to render a basic shape from a 3D scene using the JavaScript Canvas 2D API. Then in the second part of this post, I’ll show you how to make everything a bit fancier with some textures and 3D volumes.

Some really nice demos in there, such as this one:

See the Pen 3D Globe in 2D (Depth sorting) by Base Design (@basedesign) on CodePen.

How to render 3D in 2D canvas →

Creating A React App From Scratch Using Snowpack

Short intro video on how to use Snowpack to build a React Application:

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 has a little video and some more the details on how to do this.

How to Record Screen Actions as a Puppeteer Script →

~

😅 Having sudden flashbacks to 2006 here, where I used Photoshop’s Script Listener Plug-In to record my actions as I converted a PDF to a JPG, yielding some Visual Basic code. With that generated code in hand I created a C# application that would steer Photoshop and perform that very same action each file in a folder.

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 calling element.removeEventListener.

💁‍♂️ Did you know you can use the AbortController to abort promises? It was its first intended use case when it was introduced back in 2017.

~

An excellent use-case here is that you can cancel multiple Event Listeners at once using it, as shared by Jake Archibald:

In the example above there are two competing event listeners. Whenever one of them finishes controller.abort(); is called, thus also removing the other one. Cool!

~

🔥 Like what you see? Want to stay in the loop? Here's how:

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 also be used for annotating other kinds of text, but this usage is less common.”

Hmm 🤔, this sounds like it could fit the footnotes use case.

The markup looks like this:

<ruby tabindex="0">some term<rt>content for the footnote</rt></ruby>

Using CSS Counters number indicators are injected, and using :target the footnotes are shown.

Not sure if this is how <ruby> should be used, but it’s quite a nice solution. Let’s hope this will open up the discussion again to adding elements to allow native footnotes in HTML.

<ruby> HTML footnotes →

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 the unexpected changes that helped boost all the metrics across the board.

Be sure to check out the linked diagnostics.css by Tim Kaldec. It can be used to indicate clear (or potential) problems with the markup.

How We Improved SmashingMag Performance →

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 great: a pure CSS slideshow that has a play/pause button:

See the Pen
<details> Play/Pause Animations
by Mads Stoumann (@stoumann)
on CodePen.

Nice one!

More use cases in the full post, including the use of an IntersectionObserver to pause animations for elements that are offscreen.

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 of examples and nice accompanying visuals.

Understanding Clip Path in CSS →

💡 To easily create Polygon Clip Paths, Clippy will come in handy.