Making My Own Diffs

Making the text comparison process much easier!

I've already added a plethora of validation tools to my #100Devs Asset Manager, but I wanted to ensure the markers I was writing were as accurate to the slides text as possible, so it was time to visualize the difference between my text and the slides text!

While I would love to regale you with the tale of me building my own diffing algorithim from scratch, in reality I found a library that did most of that tedious work for me: diff.

It generated an array of changes, each change containing the actual text, and if the change was an addition, removal, or there was no change at all. With this information, I was able to build the result string by using chalk to color the additions green, removals red, and equalities as white.

After that, I only needed to reuse code from my asset validation for streams with both markers and slides, generating the diff and logging said diff if there were any changes at all.

In addition, I extended my Marker formats to allow for additional contextual information after a | - this additional information is usually from the slides, but not included in the generated output due to the verbosity, it is however useful for searching and this diff generation.