A while back, I made a GIF of refactoring React code to Svelte. Lots of folks asked me how I did it.
It was done by hand coding a Svelte component (code) that walks thru a list of CSS classes. Each class, either highlights, hides or displays lines.
I also did a typewriter example: https://svelte.dev/repl/543a55ffb5184821971fa243c95e4e03?version=3.34.0 which looks like this:
Code is usually a screenshot, but as a GIF I think it’s even more compelling. It’s a really nice way to share a code on social media, for a presentation or for a video course. I wondered if it was possible to make these more soft coded, that way it could work for any code. Maybe it could even end up as a VS code extension that records edits and generates a beautiful GIF/video.
So today I’m experimenting with recording the current selection, making a list of selections, and then playing it back.
This one worked out well, I located selections using
element.selectionEnd, stored them in an array and then played them back using
To go further, I would explore recording deletions and additions too.