Deviant Love is a browser extension that finds all the art on a DeviantArt Faves page, organizes it by which artist made it, and sorts the artists in “most faved art” order, letting you know exactly who to thank for all this lovely artwork. It’s one of my all-time favorite projects to work on, to the point of it being my gateway back into Web development, but at its core is a hunk of code that caused me a lot of grief a while ago. I’d like to do some programmer talk about this file.
In the beginning, core.js (now core.module.js) was home to most of the extension’s code, as I thought that was the best way to keep code findable. But as I strove to make Deviant Love ever better and more useful, using an editor that discouraged having “too many” open files, I wound up creating a monster. This is the version-by-version measurement of SLOC (Source Lines Of Code) as reported by GitHub:
| Version | SLOC | Notes |
|---|---|---|
| 1.0.2 | 186 | Started using a Git repo with this version |
| 1.0.3 – 1.0.4 | 203 | |
| 2.0 Alpha 1 | 307 | |
| 2.0 RC 1 | 369 | |
| 2.0 RC 2 | 368 | |
| 2.0 | 384 | |
| 2.0.1 | 385 | |
| 2.0.2 | 408 | |
| 2.0.3 – 2.0.4 | 411 | |
| 2.0.5 – 2.0.6 | 407 | |
| 2.1 – 2.1.1 | 373 | Dropped workarounds for missing <progress> and <input placeholder> support in old browsers |
| 2.1.2 – 2.1.3 | 372 | |
| 2.2 | 688 | Added subaccounts |
| 2.2.1 | 685 | |
| 2.2.2 | 690 | |
| 2.3 | 712 | |
| 2.3.1 – 2.3.4 | 719 | The highest point – or arguably, lowest point |
| 2.4 | 627 | Switched editors and started breaking up core.js |
| 3.0 Alpha 1 | 576 | Had a key realization – the best way to represent HTML is with HTML, not with the JS to create it |
| 2.5 | 564 | |
| 2.5.1 – 2.5.4 | 509 | Introduced Svelte; filename is now core.module.js |
| 3.0 Alpha 2 | 363 | Most of the main UI was rewritten as Svelte components |
| 3.0 Alpha 3 | 359 | The new action bar and its Options action are implemented largely via other files |
| Current Git source | 339 | Everything for adapting the data to the user’s subaccounts is now elsewhere |
At over 600 lines, this was painful to deal with; a constant ordeal of scrolling up & down playing Where’s Waldo with what I wanted to work on. Nowadays, when I want to change how Deviant Love finds things? Open find.js. When I want to change how artists are represented in the interface? DeviantEntry.html. The ol’ core file still has a lot of duties, but at less than half its worst size, scanning through the file feels much snappier. I just now took a look at it and quickly identified all the things I’d still like to move out or phase out.
Lessons learned from this? Always use an editor that can handle many open files elegantly. Complex operations should go in their own files. And building up & working with complex DOM structures in code (including via jQuery) tends to lead to unmaintanability (just make sure the alternative doesn’t lead to unusability).
You could make the argument that there shouldn’t be a “core” at all, just a full embrace of modularity. I think there’s some value to having a “brain” that represents the general flow of the application and helps coordinate the other modules. So Deviant Love will always have a core – I’ll just need to keep it lean from now on.