I built an interactive demo for TypeIt’s website (https://typeitjs.com/build-your-own) a while back. The approach I took to handle user input necessitated a way to calculate the difference between the versions of a user’s text input.

I searched around for a package to help me out and found a couple of good ones (like fast-diff), but I either didn’t really like their API or didn’t want to take on a huge new dependency. Instead, I thought I’d give it a shot myself (famous last words).

I dove into it having no real formal knowledge of the algorithmic approaches to string diffing, and so things got frustrating real fast. But then I figured out a way to build it out using JavaScript symbols to link characters that helped ease the complexity a ton. It all resulted in “striff,” which comes in at just over 600 bytes gzipped, and that I’ve been using in production for a couple of months now.

It’s a little weird looking back now, because I don’t think I’d recommend someone taking the same path in building your own, but at the same time, there’s an immense satisfaction knowing I was able to figure out a pretty reliable approach. Check it out:

https://github.com/alexmacarthur/striff