Henrik’s (@hengiesel’s) add-ons and PRs have been my personal gold standard for development questions ever since I got involved with Anki. He generously disclosed all of his brilliant Anki work to the open source community, without expecting anything in return. To honor his contributions to the Anki ecosystem and maybe even give something back to Henrik, I’ve worked non-stop for about ten days on this project in the hopes it will be useful to fellow add-on devs.
Anki Tooltips (Tippy Tooltips 2.0)
A reference for modern anki add-on development
Preamble ...
Ever since I first published this add-on under the name “Tippy Tooltips”, it has been my favourite piece of Anki work. It had a simple goal which it fuliflled elegantly. It used some of the tricks from CSS Injector and some straight-up hacks to work around the <anki-editable> resubscription issue, but it had a small scope, so it was easy to maintain. I liked that it was primarily a JavaScript add-on - opposed to the majority of add-ons on AnkiWeb at the time.
Two years have passed and I have grown as a developer, partly thanks to my recent contributions to Anki. Now that a hell of a semester was over, I finally found the time to get back to this add-on. When I go over old code, I can’t just patch it up and send it out again. It has to meet my new standards.
… so I picked up where I left off almost a year ago: transitioning to a proper repository structure with build scripts. While working on it, I got the feeling this could turn into something more than just a tooltip add-on. With just the right size to not be overwhelming, it could serve as a reference for aspiring developers, showing best practices on how to use the JS API, Svelte components and other fun stuff.
Successor to New Format Pack
Something like that already exists in GitHub - hgiesel/anki_new_format_pack, but it is no longer updated. While it provides a wonderful template for new add-on projects with its build scripts, it’s Svelte components don’t use the latest methods anymore and the code isn’t documented thoroughly enough for new developers. So there was still a niche waiting to be filled. This raised the quality standard once more, as the code should not only be understandable to me, but for anyone else who is interested. So I went the extra mile and documented and typed pretty much everything.
This language breakdown of the GitHub repo shows that Anki is ready for a new wave of JS-first add-ons. One more reason to provide proper documentation of Anki’s API use.
Future Plans
Although it would be quite easy to integrate the tooltip functionality into Anki now that the add-on is tightly entangled with its API and exposed packages, I intend to keep this as an add-on. This way it can serve as a litmus test for potentially breaking changes to Anki. I intend to keep my palette of Anki add-ons as small as it is, so I should have the capacity to keep this one updated.
Over the days and weeks ahead, I’d like to highlight some of Anki Tooltip’s methods here in this thread.
I really hope this repo will be to someone what Henrik’s Closet add-on has been for me.