What’s the simplest project you’ve built that turned out to be surprisingly useful?
It was a text compare app I made for showing the difference between two sets.
What problem did it solve?
People who were doing curriculum coding challenges would sometimes remove or alter parts of the code they were not asked to touch and it’d cause the tests to fail.
Copying and pasting their code into the editor for the challenge, visually you couldn’t tell if other parts of code was altered.
Myself and others would copy the new part of the code that was added by the poster, and it would pass the tests. The advice was to reset the step and try again. But if they kept making changes they weren’t asked to, then they couldn’t complete the step, and for some people it was a recurring issue.
Even minor changes that did not affect the functionality of the code could cause the tests to fail.
Was it just for you, or did others start using it too?
So I built the app, showing exactly where parts of the code was altered. This was done by showing the code in different colours. Just a few times I used it to to debug my own code, but most of the time it was for the forum.
Magenta showed code that was not altered.
Blue showed code that was removed.
Red was the new code.
If you were building it again today, what would you do differently?
I think keeping it simple is what made it so powerful.
Standard line by line diff tools feel cluttered and can disrupt coding flow.
Side by side layouts add cognitive load as you have to manually compare code, and cost time as you need to read two columns. Traditionally they are built for precision not visual comfort.
There are others out there. They show two lines when code is different, usually using red and green. They add plus and minus signs, also add cognitive load, and you don’t always get to see all code at once due to context collapsing. Sometimes inline modifications are highlighted.
I wanted something that showed at a glance where code was the same, missing, or new. Plus, a person new to coding using a differ is then having to read multiple lines of code, analysing it, and perhaps not knowing what to look out for.
I wanted something simple, so I overlaid the text, the minimum lines of code was always shown. I’d delete most of the magenta code as it wasn’t altered. What was left was the most relevant code to inspect.
