Modernizing taginfo

About once a year I set aside a week to work on taginfo, one of my many projects that doesn’t get enough attention. And inevitably once I get started there are so many things I want to do that it takes two weeks instead of the originally allotted week. So this time I thought I plan with the two weeks from the start. You probably know where this goes: I spend more like three or four weeks on taginfo…

This time I worked on something I wanted to do for a long time: Modernize the Javascript and CSS. The web technologies HTML, CSS, and Javascript have matured quite a lot in the last decade. Browsers are pretty good at keeping backwards compatibility and the old code still worked, but it was showing its age and newer and better solutions for many problems are available today.

Back in 2010 when I started taginfo, jQuery was a popular library. It still exists today but browsers have gained so much native functionality that it isn’t as important. And most of the jQuery plugins I was using have not been updated in years, some you can’t even find on the Internet any more. So I decided to get rid of jQuery and most external Javascript libraries altogether and write the code I need myself.

The taginfo site doesn’t have much Javascript on it. The most complex piece is the code for the dynamic tables you see on many pages. They were generated by an unmaintained jQuery plugin called Flexigrid in which I have fixed some bugs and changed some things here or there. I looked around for a Javascript library that could give me the same functionality in more modern code, but couldn’t find anything not tied to some complex framework. So I decided to write that myself. This has the added advantage that I can write exactly the functionality I want and don’t have to add some external warts to some existing Javascript library. The tables get their content through asynchronous API calls, support sorting by different columns, filter queries, paging (with buttons or the keyboard, or — new — with the mouse wheel (press Shift to use that)) and resizing of columns.

The rest of the Javascript is mostly pretty simple. The “tab” functionality, autocomplete for the search, some mouse and keyboard interaction. A lot of the code is simple formatting of key and tag links, numbers and so on which was already there and basically unchanged.

The only external library I am still using is D3 for the tag cloud on the home page and the charts and graphs. That library is pretty stable and it does some clever and useful stuff. And it doesn’t have any dependencies on jQuery or anything else.

You might wonder why I am not using some kind of modern Javascript framework. The reason is simple: They are changing too fast. Taginfo has been around for a long time and I expect it to be around for a long time. But, as mentioned, I can only work on it for small amounts of time here or there. So it is important it keeps working without any intervention and that, when I find the time to work on it, I can actually work on it and not spend my time updating to the newest framework version or getting NodeJS updated so that the build system works before I can do this one little change. Most of the Javascript I am writing is in one file, the same with the CSS. I don’t build the CSS or use Typescript or something like that. I have to do some things myself that a framework could solve for me, but taginfo isn’t so complex that this isn’t possible.

So, after all that work, what do I have to show for it? Most people will not even notice the changes. The site looks and feels more or less the same as before. That’s intentional. I have ideas for more changes, but they have to wait for the next time. But the big changes under the hood make the site already work better on smaller screens. Many bug reports I get are about the site not working correctly on mobile phones. There is still a lot to be done in that regard, but because of the cleaner CSS and Javascript it is now much easier to work on that.

Inevitably I broke some things in the process. Some issues I found myself, some were found by users. And more will probably be found in the next weeks or months. But I am pretty happy with the state the web site is in right now. Maybe the next time I work on taginfo I can work on the content side.