Skip to content

Mix’n’match interface update

I have been looking into a JavaScript library called vue.js lately. It is similar to React, but not encumbered by licensing issues (that might prevent its use on WMF servers in the future), faster (or so they claim), but most of all, it can work without interference on the server side; all I need for my purposes is including the vue.js file into HTML.

So why would you care? Well, as usual, I learn new technology by working it into an actual project (rather than just vigorously nodding over a manual). This time, I decided to rewrite the slightly dusty interface of Mix’n’match using vue.js. This new version went “live” a few minutes ago, and I am surprised myself at how much more responsive it has become. This might be best exemplified by the single entry view (example), which (for unmatched entries) will search Wikidata, the respective language Wikipedia, and the Mix’n’match database for the entry title. It also searches Wikidata via SPARQL to check if the ID for the respective property is already in use. This all happens nicely modular, so I can re-use lots of code for different modules.

Most of the functions in the previous version have been implemented in the new one. Redirect code is in place, so if you have bookmarked a page on Mix’n’match, you should end up in the right place. One new function is the ability to sort and group the catalogs (almost 400 now!) on the main page (example).

As usual, feel free to browse the code (vue.js-based HTML and JavaScript, respectively). Issues (for the new interface, or Mix’n’match in general) go here.