Blog Questions Challenge

I just released @stanko/dual-range-input - a native dual-range input. Here is how it looks with the default styles: The "native" part is somewhat open for discussion. I call it native because the library uses two native HTML range inputs. This means that all of the native interactions and accessibility features are preserved....

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...

HTML inert is a relatively new property, but it is supported in all major browsers since April this year. When you set inert on an element, the browser will ignore all user events on it, including tabbing into elements. It will also hide it from screen readers. I like to think of it as a "reversed focus trap". But we can use it to create focus...