HTML inert property and React fallback

When an HTML element becomes too narrow, its content starts to wrap into multiple lines. This is intended behavior and works well in many cases. However, for short text, it doesn't look great when the last word or icon drops to the next line, becoming an orphan. For example, you might see something like this: Click here for more info It...

.content p code { display: block; padding: 5rem 12rem; margin-top: 10rem; border: 1px solid var(--neutral-100); background: var(--neutral-50); color: var(--neutral-600); border-radius: 2rem; width: fit-content; position: relative; } .copy-button { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); ...

If you encountered a case where you wanted to run multiple commands in parallel, the usual suggestion is to use the shell's & operator to send commands to the background. This approach kind of works, but it has its quirks. I often ended up with a process hanging in the background, multiple outputs being mangled, or the output of some commands...

It is incredibly hard to take a good photo of these. Colors have metallic reflection which I wasn’t able to capture, but it is very prominent in person. They are plotted using five different color markers. I framed them separately and plan to take a better photo once they are on the wall. Code is available on my GitHub.

What if I told you that we can make a timer without using setTimeout, setInterval or requestAnimationFrame? JavaScript is still necessary, but we can create the timer just by toggling some CSS classes. While I was working on an autoplay feature for a carousel, I thought to myself - CSS animations are kinda like timers. They have animationstart...