hyperfiddle

Dustin Getz (Hyperfiddle) 2025-01-20T17:05:37.475309Z

Now trivial: just another rendering of a virtual scroll table, except render to svg/rect instead of table/tr. The fun part is essentially the same e/for over IndexRing expression as the explorer tutorial. Everything else is just some css and a clock. The cosine is on the server, of course.

3
👌 9
⚡ 2
Dustin Getz (Hyperfiddle) 2025-01-20T18:02:32.252059Z

This is a great explainer for IndexRing by the way. It is manipulating the diffs to cause the tape striping pattern in the DOM - essentially recycling elements in a ring - which we ended up at because it is the most optimal dom layout strategy that results in the fewest possible touches. So, instead of issuing :grow and :shrink diffs at the ends (which destroy and rebuild the elements), it is issuing :update diffs in a specific pattern. In some cases, if the userland row renderer is careful, that means the total set of dom touches may be precisely text nodes only (i.e. inside the row but not the row itself), which means the layout engine can treat the rows as fixed boxes and perform the reordering and repainting exclusively on the GPU, which just feels incredibly lightweight and fast

👏 4
bdbrodie 2025-01-20T18:57:48.448979Z

Precision incremental computation

henrik 2025-01-20T20:28:24.042849Z

React reuses DOM elements in a similar manner when after diff it doesn’t have to change the type of the element. Had some subtle bugs related to it and lifecycle methods back in the day.