Easter egg on my Pipe Operator post:

Both the donut preview and code examples are projections of an event stream. You were able to see the event stream if you knew what to click.

It was a little too hidden, so now it's automatically visible at the bottom of the post if the stream isn't empty.

This little guy will soon replace one of the largest assets on my site:

You can't create a flipping circle without turning it into the coin from Mario.

I think there's a rule... or something:

Flipping looks nice when you animate rotateY:
caniuse.com?search=rotateY

I'll need to figure out how to give the appearance of an edge, but love how simple this was!

Animating elements already mounted to the DOM is one thing... but I'll need a lot of interactivity.

Took a minute to get this working how I wanted:

I know I'll need the ability to play/pause individual components on mouse enter/leave.

Mobile would need a different solution. But this is working fine for web:

I'll likely set a global playback rate for an article, with sensible steps.

But, for now, I'll embrace the crazy:

Creating a Sprite component has been challenging, so taking a break to look into an adjustable playback rate:

Revisited the first example using the paths.

Was quite tricky getting all these things to pause and resume at the same time - but think I've figured it out.

There we go!

I'll use animations like this to show relationships between components a lot. ERDs, flow charts, etc.

If you think this dot will follow the path of the star, you are going to be disappointed! 😅

Not quite sure what I've got wrong here, I'm sure another ☕️ is the answer.

Eeeh, kinda got SVG morphing working...
Needs quite a lot of work to be reusable, though:

So far so good - a simple animation I can play/pause which also loops.

I imagine this will be the core of what I'll need.

Very pleased with how this article is turning out!

Looking forward to publishing it.

Finally! 😅

I've solved the pain with dynamic code blocks without breaking syntax highlighting.

Composite is a Design Pattern that can be used to treat single objects, and collections of objects, in the same way.

Here's an example:

Have you ever wondered how strategy games like Red Alert 2 manage hundreds of units on screen without crashing?

The secret is the Flyweight Pattern:

The Adapter Pattern is useful when you want to own the interface you want to use: