Observable Framework 1.9.0

Back in June, the fine folks over at Observable HQ bumped up the version to 1.9.0, and gave us some goodies along the way.

As longtime Drop readers know, I despise giant libraries like React and Vue, so you can investigate Framework’s new support for React & JSX. It looks super easy, but I avoid React and JSX like we all should have the plague we’re still in.

One of Framework’s superpowers are inline javascript expressions, which let us interpolate dynamic content anywhere on the page using ${…}. An issue with them (before 1.9.0) was that they used <span> tags to mark the start/end of those inline blocks, which messes up all sorts of things HTML-wise.

They switched to using comments (they also leveled up how they parse markdown files and JS code blocks/expressions), so now it’s possible to dynamically create cards, table rows, plots…anything, really.

While they had some toy examples to explain this, I threw together a larger example that showcases these new superpowers.

Follow the instructions at that Codeberg link to see the magic behind:

and:

and:

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️