Stephen Margheim

PS. If you want to learn how to make beautiful <textarea>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏

Full CSS snippet:
```
textarea {
field-sizing: content;
min-block-size: attr(rows rlh);
}
```

attr() - CSS | MDN The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It can also be used with pseudo-elements, in which case the attribute's value on the pseudo-element's originating element is returned.

`field-sizing` docs: developer.mozilla.org/en-US/docs/...

`attr()` function docs: developer.mozilla.org/en-US/docs/...

The `min-block-size` rule uses the new, more powerful `attr()` CSS function to automatically convert the rows attribute into the default height, because content field-sizing <textarea>s will *ignore* the rows attribute.

Coming in the next version of Safari, and already in Chrome and Edge, you can now create <textarea>s that auto-grow with the `field-sizing: content` rule.

#StylishHTML

PS. If you want to learn how to make beautiful listboxes like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏

Learn more at MDN: developer.mozilla.org/en-US/docs/...

Full CSS snippet:
```
::picker(select) {
scrollbar-color: lightgray transparent;
scrollbar-width: thin;
}
```

Have a small scroll container where you want to de-emphasize the scrollbar, like in a popover? Say hello to `scrollbar-color` and `scrollbar-width`

#StylishHTML

PS. If you want to learn how to make beautiful popovers like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏

Dark-themed code snippet showing two HTML lines: a button with popovertarget="--dropdown-example" and a div id="--dropdown-example" popover.

Requires double-dashed IDs in your HTML:
```
<button popovertarget="--dropdown-example"></button>
<div id="--dropdown-example" popover></div>
```

Dark-themed code editor showing a CSS snippet defining [popovertarget] and [popover] rules with anchor-name, position-anchor, top: anchor(bottom), and left: anchor(left).

Full CSS snippet:
```
[popovertarget] {
anchor-name: attr(popovertarget type(<custom-ident>));
}

[popover] {
position-anchor: attr(id type(<custom-ident>));

top: anchor(bottom);
left: anchor(left);
}
```

Double-dashed IDs and the enhanced `attr()` CSS function allow us to bind popovertargets with their popovers without having to create distinct anchor-names.

Learn more at MDN: developer.mozilla.org/en-US/docs/... and developer.mozilla.org/en-US/docs/...

#StylishHTML

PS. If you want to learn how to make beautiful <dialog>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏

Dark code editor showing a CSS rule: body:has(dialog:modal) { overflow: hidden; } with syntax-highlighted selectors and properties.

Full CSS snippet:
```
body:has(dialog:modal) {
overflow: hidden;
}
```

Prevent scrolling when a modal <dialog> is open with pure CSS using the `:modal` CSS pseudo-class. Mix with `body:has` and you're good to go!

Learn more at MDN: developer.mozilla.org/en-US/docs/...

#StylishHTML

PS. If you want to learn how to make beautiful breadcrumb <nav>s like in the GIF with nothing but standard HTML and CSS, I'll be sharing those tips in the future as well. So be sure to follow 🙏

Dark code editor showing CSS: body selector with scrollbar-gutter: stable and a nested &:has(:popover-open) rule setting overflow: hidden.

Full CSS snippet:
```
body {
scrollbar-gutter: stable;

&:has(:popover-open) {
overflow: hidden;
}
}
```

With `scrollbar-gutter: stable` in place, you get this lovely behavior instead.

Want to avoid layout shift when you remove scrolling on popover or dialog opening?

Simple, use the new `scrollbar-gutter: stable` CSS rule on your scroll container (likely <body>).

Learn more at MDN: developer.mozilla.org/en-US/docs/...

#StylishHTML

I love @rauno.bsky.social's style and taste, so I remixed a recent combobox design of his as a simple <select> using the new customizable select styling features coming to Baseline:

play.tailwindcss.com/9JsjWJyk9a

PS. Creating the effect of the picker wrapping and surrounding the select took some creative problem-solving, but I’m quite happy with the result. Key limitation is that you can’t animate the picker beautifully with this approach.

I love @rauno.bsky.social's style and taste, so I remixed a recent combobox design of his as a simple <select> using the new customizable select styling features coming to Baseline:

play.tailwindcss.com/9JsjWJyk9a

GitHub - yippee-fun/morphlex: Optimal DOM morphing, written in TypeScript. Optimal DOM morphing, written in TypeScript. Contribute to yippee-fun/morphlex development by creating an account on GitHub.

Morphlex now has a new algorithm that produces extremely optimal DOM morphs for inserts, removals and sorts. github.com/yippee-fun/m...

This is what I have seen typically as the primary value. Seems less valuable in the age of AI. Also, requires nearly 100% adoption of typing throughout the code base to have the full graph. I still find runtime typing a stronger value proposition, especially for a dynamic language like Ruby

Genuine question: what is the essential benefit of static type checking? I understand the core benefit of runtime type checking—to guarantee that certain states, inputs, outputs are never allowed to flow thru the program. But I’ve never quite grokked what makes static type checking valuable

YouTube video by Joel Drapper Empirical Demo

Nick, you need to check out www.youtube.com/watch?v=G9rx... which is a demo of what we are building with github.com/yippee-fun/e...

Deep magics. But built on top of `require-hooks` gem.

GitHub - yippee-fun/empirical Contribute to yippee-fun/empirical development by creating an account on GitHub.

And we continue writing that love letter with the new Empirical gem, which leverages the power of pre-processing Ruby at boot time to bring a terse and elegant DX for defining methods with runtime typing constraints.

github.com/yippee-fun/...

GitHub - yippee-fun/literal: A literal Ruby gem. 💎 A literal Ruby gem. 💎. Contribute to yippee-fun/literal development by creating an account on GitHub.

Once you then embrace that you can create your own objects that respond to === and encode custom rules of “set inclusion”, you have everything you need to a rich and robust runtime type system. The Literal gem is @joel.drapper.me and I’s love letter to ===

github.com/yippee-fun/...

Level-up `rescue` with dynamic exception matchers When you use a rescue clause in Ruby, you can specify what kinds of exceptions you want to rescue. But what if you want to rescue exceptions by severity? By message? B...

This post from @honeybadger.io is about runtime types, it just doesn’t know it! It does a good job of demonstrating the simplicity and power of Ruby’s === interface, and a runtime type is simply “an object that responds to ===.”

www.honeybadger.io/blog/level-...