Post

🫠 automerge.org The new Automerge website is live!! The biggest (smallest) surprise? How fun it was to build the demo! Automerge is so robust, it withstood all our weird ideas — like using physics-driven particles to literally push changes between docs — and it just worked. Perfectly. Every time.

Hahah I was THIS CLOSE to just doing it all on the GPU. Not many good, performant ways to figure out "where on screen is this one character of DOM text?" But in the end, using a monospace font and some carefully-fudged calculations did the trick 🍰

this is random but: function getBox(textNode, char = 0) { const range = document.createRange(); range.setStart(textNode, char); range.setEnd(textNode, char + 1); return range.getBoundingClientRect() }

0 reposts1 like

The reason I didn't take this approach is that any time the number of tasks changes, I need to recompute all the positions particles will have *when they arrive*, which is in the future, which requires doing a lot of speculative positioning. Doing that inside the DOM was like 100x slower.

There is absolutely a different blend of tricks I could use, and ranges would be great for some parts, but at a certain point I just had to get it working and ship! So the compromise: monospace, no wrapping, and it's okay if stuff doesn't line up perfectly — especially emoji 😉