Observable

Mike Bostock

Our standard library and other recommended libraries for working in Observable. 

Libraries

can you share an example of opt-in? (for transitions)

There are a variety of ways you can implement animations or transitions with Hypertext Literal; my point here was that Hypertext Literal doesn’t really help you (yet; I want to explore interpolating async generators), but it doesn’t preclude you from implementing it yourself. 

One way to animate is to interpolate DOM nodes that mutate in-place over time. This can be done with the DOM API directly or with a library such as D3:

https://observablehq.com/@mbostock/animating-hypertext-literal
https://observablehq.com/@d3/learn-d3-animation

Another way is to use a DOM-diffing library, say together with CSS transitions:

https://observablehq.com/@mbostock/hello-nanomorph

The require does strange things to the buttons, but the import works fine.

Brett Cooper

Are there still plans to incorporate hypertext literal into stdlib? Would be really nice, especially the style object literals.

Volodymyr Agafonkin

It’s still planned but we need to implement support for versioning the standard library (so that new notebooks can use hypertext literal while the behavior of old notebooks will not change). So, I don’t know yet when this will happen.

Jacob Rus

Oblique and italic are two different things. In practice in this case the "font-style: oblique" is setting an italic font, but in principle it shouldn't (if the typeface in question included both oblique and italic fonts). You may want to use "font-style: italic" instead to avoid confusion. See https://developer.mozilla.org/en-US/docs/Web/CSS/font-style