{"id":441,"date":"2017-03-14T13:59:20","date_gmt":"2017-03-14T12:59:20","guid":{"rendered":"http:\/\/blog.magnusmanske.de\/?p=441"},"modified":"2017-03-14T14:00:40","modified_gmt":"2017-03-14T13:00:40","slug":"mixnmatch-interface-update","status":"publish","type":"post","link":"http:\/\/magnusmanske.de\/wordpress\/archives\/441","title":{"rendered":"Mix&#8217;n&#8217;match interface update"},"content":{"rendered":"<p><a href=\"http:\/\/magnusmanske.de\/wordpress\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-11.51.57.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-442\" src=\"http:\/\/magnusmanske.de\/wordpress\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-11.51.57-181x300.png\" alt=\"\" width=\"181\" height=\"300\" srcset=\"http:\/\/magnusmanske.de\/wordpress\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-11.51.57-181x300.png 181w, http:\/\/magnusmanske.de\/wordpress\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-11.51.57-617x1024.png 617w, http:\/\/magnusmanske.de\/wordpress\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-11.51.57.png 646w\" sizes=\"auto, (max-width: 181px) 100vw, 181px\" \/><\/a>I have been looking into a JavaScript library called <a href=\"https:\/\/vuejs.org\/\">vue.js<\/a> lately. It is similar to <a href=\"https:\/\/en.wikipedia.org\/wiki\/React_(JavaScript_library)\">React<\/a>, but not encumbered by licensing issues (that might prevent its use on WMF servers in the future),\u00a0faster (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.<\/p>\n<p>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 <a href=\"https:\/\/tools.wmflabs.org\/mix-n-match\">Mix&#8217;n&#8217;match<\/a> using vue.js.\u00a0This new version went &#8220;live&#8221; 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 (<a href=\"https:\/\/tools.wmflabs.org\/mix-n-match\/#\/entry\/17282928\">example<\/a>), which (for unmatched entries) will search Wikidata, the respective language Wikipedia, and the Mix&#8217;n&#8217;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.<\/p>\n<p>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&#8217;n&#8217;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 (<a href=\"https:\/\/tools.wmflabs.org\/mix-n-match\/#\/main\/group_type,order_easy,completed_section\">example<\/a>).<\/p>\n<p>As usual,\u00a0feel free to browse <a href=\"https:\/\/bitbucket.org\/magnusmanske\/mixnmatch\/src\/647ac6005128c8f4f420af58a40bd17f7e8fa336\/public_html\/?at=master\">the code<\/a> (vue.js-based <a href=\"https:\/\/bitbucket.org\/magnusmanske\/mixnmatch\/src\/647ac6005128c8f4f420af58a40bd17f7e8fa336\/public_html\/index.html?at=master&amp;fileviewer=file-view-default\">HTML<\/a> and <a href=\"https:\/\/bitbucket.org\/magnusmanske\/mixnmatch\/src\/647ac6005128c8f4f420af58a40bd17f7e8fa336\/public_html\/index_vue.js?at=master&amp;fileviewer=file-view-default\">JavaScript<\/a>, respectively). Issues (for the new interface, or Mix&#8217;n&#8217;match in general) go <a href=\"https:\/\/bitbucket.org\/magnusmanske\/mixnmatch\/issues?status=new&amp;status=open\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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),\u00a0faster (or so they claim), but most of all, it can work without interference on the server side; all I need for my [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-441","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/posts\/441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/comments?post=441"}],"version-history":[{"count":2,"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/posts\/441\/revisions"}],"predecessor-version":[{"id":444,"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/posts\/441\/revisions\/444"}],"wp:attachment":[{"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/media?parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/categories?post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/magnusmanske.de\/wordpress\/wp-json\/wp\/v2\/tags?post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}