Tampermonkey-userscript uitgebreid

In twee eerdere artikels had ik het al over het userscript dat ik heb gemaakt voor de resultatenlijsten van de Intersteno-internetwedstrijden.

In het eerste artikel legde ik uit wat zo’n userscript precies is, en hoe ik het userscript gebruik om de lay-out van de resultatenlijsten wat te verbeteren.

In het tweede artikel kon je lezen dat ik mijn userscript aangepast om extra functionaliteit toe te voegen, waardoor het mogelijk werd om de resultaten te filteren op land.

Ondertussen heb ik niet stilgezeten, en ik heb weer een nieuwe versie klaar, met nóg meer aanpassingen. Het oorspronkelijke script was bedoeld voor de jaarlijkse internationale internetwedstrijd; de nieuwe versie werkt nu ook met de nationale wedstrijden. De TAKI-software van Intersteno wordt immers ook door de nationale groeperingen (in België de ABW en de APSB) gebruikt om nationale wedstrijden te organiseren. Zo mogen we ons binnenkort vermoedelijk weer verwachten aan een nieuwe editie van PRO_Belgium, als voorbereiding op het aanstaande WK van Maastricht.

Volgende zaken zijn toegevoegd in de nieuwste versie van het userscript:

• het script biedt nu ook volledige ondersteuning voor de nationale wedstrijden
• de keuzelijst met de talen bevat enkel nog de relevante talen
• de klassement-keuzelijst bevat enkel nog de relevante opties
• de kolomkoppen bovenaan de tabel blijven zichtbaar wanneer je verder scrolt

Wat de talen betreft: in de oorspronkelijke keuzelijst worden alle talen vermeld waarin je kunt deelnemen aan de meertalenwedstrijd, maar de resultatenlijsten zijn niet al die talen beschikbaar! Zo zijn de resultatenlijsten niet beschikbaar in het Portugees, het Roemeens, het Fins, het Tsjechisch of het Chinees. Wanneer je een van die talen koos, kreeg je de tekst in het Engels te zien! Aangezien die talen duidelijk niet ondersteund worden, vond ik het niet meer dan logisch om ze niet in de keuzelijst op te nemen. (Ik had er ook voor kunnen kiezen om zélf alle teksten te vertalen, maar mijn Chinees beperkt zich jammer genoeg tot ni hao, en mijn Fins is helaas ook niet al te best.)

In de eigenlijke resultatenlijsten blijven de kolomkoppen nu zichtbaar bovenaan de pagina wanneer je verder naar beneden scrolt in de tabel. Reuze handig, toch?

De grootste aanpassing zit in de ondersteuning voor de nationale wedstrijden, en je kunt nu ook gemakkelijk omschakelen tussen de nationale en de internationale wedstrijden zonder dat je een andere URL moet intypen in de adresbalk van je webbrowser. Op de openingspagina, waar je de gewenste taal en de gewenste wedstrijd kiest, vind je nu een link om naar de nationale wedstrijden over te schakelen wanneer je bij de internationale wedstrijden bent, en omgekeerd.

Eenmaal bij de nationale wedstrijden zul je merken dat de keuzelijst voor het selecteren van de wedstrijd grondig veranderd is. Oorspronkelijk stonden de wedstrijden (min of meer) in omgekeerd chronologische volgorde: bovenaan de meest recente wedstrijd, onderaan de oudste. Dat vond ik niet echt handig, want de wedstrijden van alle landen stonden zo kriskras door elkaar. Dat heb ik dus veranderd. De wedstrijden staan nu alfabetisch gerangschikt op de naam van de wedstrijd, daarna in omgekeerd chronologische volgorde. De lijst begint nu met de ABW-klaviervaardigheidstest van 2016 en eindigt met het Turkse internetkampioenschap van 2006. Ik heb er ook telkens tussen haakjes de landcode bij vermeld, zodat je meteen kunt zien bij welk land een wedstrijd hoort.

Bovendien heb ik een keuzelijst toegevoegd, waarmee je, indien gewenst, eerst van tevoren een land kunt kiezen. Als je een van de landen kiest, krijg je vervolgens in de wedstrijdselectielijst enkel de wedstrijden van het betreffende land te zien. Momenteel zijn er zes landen beschikbaar: België, Kroatië, Italië, Luxemburg, Zwitserland en Turkije. (De overige landen maken geen gebruik van de Intersteno-software voor het organiseren van nationale wedstrijden.)

Maar er was nog van alles mis met die keuzelijst. Er stonden wedstrijden bij die nooit hadden plaatsgevonden (d.w.z. met een lege resultatenlijst, zonder deelnemers!) of die duidelijk een test voor de software waren geweest (dus geen echte wedstrijd), en bovendien ontbraken er wedstrijden die wél hadden plaatsgevonden, bijvoorbeeld de ABW-klaviervaardigheidstesten van 2010, 2012, 2013, 2014 en 2015! Om er helemaal een rommeltje van te maken, was er van enige consistentie doorheen de jaren weinig te merken. Zo vond je in de lijst bv. ‘APSB(Be) Vitesse 2010’, ‘APSB2011’, ‘2015-APSB (Be)’ en ‘APSB (BE) 2020’ als wedstrijdnaam voor de APSB-wedstrijden van respectievelijk 2010, 2011, 2015 en 2020.

De afbeelding hoger op deze pagina toont de oorspronkelijke keuzelijst; de afbeelding hieronder laat de aangepaste lijst zien.

Ik heb de keuzelijst dus een bijzonder grondige opknapbeurt gegeven. Het resultaat mag er zijn, vind ik. De wedstrijden die bij elkaar horen, staan nu netjes bij elkaar, de naamgeving is consistent, de wedstrijden zonder deelnemers staan er niet langer bij, en de ontbrekende wedstrijden heb ik toegevoegd. De keuzelijst bevat momenteel 105 wedstrijden. Ter vergelijking: de oorspronkelijke lijst bevatte er 94, kriskras door elkaar, waarvan 4 met een lege resultatenlijst (bv. ‘APSB_2015’, ‘Swiss 2020’).

Een bijkomende aanpassing is dat de klassement-keuzelijst, waar je kunt kiezen tussen het meertalig klassement, het moedertaalklassement of het algemeen klassement, enkel de relevante opties laat zien. Sommige wedstrijden bevatten immers enkel een resultatenlijst voor moedertaal, andere enkel voor meertalig. Wanneer er maar één mogelijkheid is, krijg je deze keuzelijst ook niet meer te zien (er valt dan immers niets te kiezen).

Dit is beslist niet de laatste versie van het userscript, want ik zal het wellicht een paar keer per jaar moeten aanpassen wanneer er nieuwe wedstrijden bijkomen.

Wil je het allemaal eens proberen, dan moet je de Tampermonkey-browserextensie aan je browser toevoegen en vervolgens mijn userscript installeren. Hoe je dat doet, lees je in mijn eerste artikel over userscripts.

openuserjs.org/scripts/gebo007/Intersteno_Internet_Results
org.intersteno.it/page.php?id_primario=47&id_secondario=211
www.intersteno.org/intersteno-internet-contests/classification-lists
www.tampermonkey.net

Tampermonkey-userscript: filteren op land

In een eerder artikel legde ik uit dat ik een userscript had gemaakt omdat ik niet helemaal tevreden was met de lay-out van de resultatenlijsten van de Intersteno-internetwedstrijden. Met dat script, dat iedereen vrij kan installeren en gebruiken, zien de lijsten er al een heel stuk beter uit (IMHO).

Het was mijn eerste userscript, en ik was er best tevreden mee. Maar nu ik me wat meer in userscripts heb verdiept, merk ik dat de mogelijkheden legio zijn. Hier kan ik nog zo veel meer mee doen!

Aanvankelijk zorgde het script alleen maar voor enkele cosmetische aanpassingen, maar nu heb ik het uitgebreid zodat het ook extra functionaliteit biedt. Dat maakt het al een heel stuk interessanter, niet alleen voor mij maar ook voor andere gebruikers zoals jij.

Bovenaan elk klassement staan twee keuzelijsten waarmee je de leeftijdscategorie en het klassement kunt selecteren (meertalig, moedertaal of algemeen). Welnu, mijn userscript voegt daar nog een derde, handige keuzelijst aan toe, waarmee je de resultaten kunt filteren op land.

Standaard wordt de complete lijst getoond, met deelnemers uit alle landen. Dankzij mijn aanpassing krijg je nu dus ook de mogelijkheid om enkel de resultaten te zien van de deelnemers van een bepaald land, bijvoorbeeld enkel de Belgen of enkel de Nederlanders.

Dat kun je voortaan eenvoudig doen door in de keuzelijst het gewenste land te selecteren. Handig, niet? In de lijst staan alle landen die ooit aan de Intersteno-internetwedstrijd deelgenomen hebben. Van zodra je een land hebt gekozen, wordt de resultatenlijst onmiddellijk gefilterd. Je hoeft dus niet nog een keer op de ‘continue’-knop te klikken.

En terwijl ik toch bezig was, heb ik nog een extraatje toegevoegd. Omdat de Belgen en de Nederlanders goed met elkaar overweg kunnen, heb ik er ook voor gezorgd dat je België en Nederland samen in één lijst kunt bekijken.

Omdat ik een pietje-precies ben, heb ik ervoor gezorgd dat je in de lijsten nu ook de correcte ISO-landcodes een -taalcodes te zien krijgt en dat de Nederlandse vertaling correct en volledig is (want dat was niet het geval!). Tenslotte heb ik naam en jaartal van de wedstrijd bovenaan elk klassement aanklikbaar gemaakt, zodat je snel terug kunt naar de startpagina waar je een ander jaartal of een andere taal kunt kiezen.

Je merkt het: met zo’n userscript is héél veel mogelijk.

Wil je het eens uitproberen, dan moet je de Tampermonkey-browserextensie aan je browser toevoegen en vervolgens mijn userscript installeren. Hoe je dat doet, lees je in mijn eerder artikel over userscripts.

openuserjs.org/scripts/gebo007/Intersteno_Internet_Results
org.intersteno.it/page.php?id_primario=47&id_secondario=211
www.intersteno.org/intersteno-internet-contests/classification-lists
www.tampermonkey.net

Tampermonkey-userscript

Helemaal op het einde van het vorige artikel maakte ik gewag van een userscript dat ik heb gemaakt om de leesbaarheid van de resultatenlijsten van de Intersteno-internetwedstrijd te verbeteren. In dit artikel leg ik precies uit welke stappen je moet ondernemen om er gebruik van te maken.

Maar eerst even wat uitleg bij de bestaansreden van het script. Waarom heb ik het gemaakt, wat doet het precies, en wat is een userscript eigenlijk?

Zoals je in het vorige artikel al kon lezen, worden de resultatenlijsten standaard getoond binnen de ietwat beperkende lay-out van de Intersteno-website: de lijst verschijnt in een frame, in veel gevallen met eigen horizontale en verticale schuifbalk. Door de Ctrl- of Shift-toets ingedrukt te houden bij het klikken op de ‘continue’-knop kon je uit het frame ontsnappen en de lijsten in hun eigen webpagina bekijken, waardoor het raadplegen van de lijsten al een heel stuk comfortabeler verloopt.

Maar het kan nog beter. Er zijn een aantal aspecten aan de lay-out van de resultatenlijsten, waar ik me wat aan erger. Zeg nu zelf: zou de leesbaarheid van de tabellen niet aanzienlijk verhoogd worden door het om en om toepassen van verschillende achtergrondkleuren bij de rijen van de tabel? Zou het niet beter zijn wanneer kolommen met cijfergegevens rechts in plaats van links uitgelijnd worden? Zou het niet duidelijker zijn wanneer de inhoud van cellen die over meerdere regels lopen gewoon bovenaan in de cel staat in plaats van verticaal gecentreerd? En zou het niet netjes zijn wanneer de breedte van de kolommen altijd gelijk is voor de verschillende tabellen? En zo kan ik nog wel enkele puntjes opsommen die voor verbetering in aanmerking komen.

Welnu, dat kan allemaal. Het enige wat ik daarvoor moet doen, is mijn eigen CSS ontwerpen en toepassen op de webpagina’s met de resultatenlijsten.

Wie een klein beetje kennis heeft van webpagina’s, weet beslist dat een webpagina opgebouwd wordt uit drie belangrijke onderdelen. Het eerste en allerbelangrijkste onderdeel is de HTML-code, die bepaalt welke tekst er op de pagina komt en hoe de pagina opgebouwd wordt uit kopjes, alinea’s, tabellen, enz.

Het tweede onderdeel is de CSS-stijl, die het uitzicht van die elementen bepaalt (bv. lettertype, tekengroote, kleur, positie, uitlijning, enz.).

Het derde, optionele onderdeel is scripting. Scripting zorgt ervoor dat je webbrowser een bepaald script (programma) uitvoert op de webpagina. De populairste scriptingtaal is JavaScript. Zo’n script kan de pagina interactief maken of wijzigingen aanbrengen aan de HTML- en CSS-code.

Dat laatste is nu juist wat ik wil doen: ik wil de CSS van de webpagina met de resultatenlijsten wijzigen, zodat het er allemaal wat meer uitziet zoals ik zou willen.

Net als de HTML-code en de CSS-code wordt ook de JavaScript-code gemaakt door de ontwerper van de webpagina, in dit geval dus de webmaster van de Intersteno-site. Als gebruiker kun je daar normaal gezien niets aan veranderen, tenzij je gebruik maakt van de populaire browserextensie Tampermonkey. Die extensie laat je toe om zogenaamde userscripts te gebruiken. De meeste gebruikers maken deze userscripts niet zelf, maar downloaden ze van populaire websites als bijvoorbeeld OpenUserJS, waar ontwikkelaars hun scripts beschikbaar stellen voor iedereen die er gebruik van wil maken.

Dat is dus wat ik gedaan heb: ik heb een userscript ontworpen, geschreven in JavaScript, dat de CSS-code van de webpagina’s met de resultatenlijsten van de Intersteno-internetwedstrijd op een zodanige manier aanpast, dat ik precies het resultaat krijg dat ik voor ogen heb, en ik heb mijn userscript geüpload naar OpenUserJS.

Wil je mijn script gebruiken, dan moet je twee dingen doen. Allereerst moet je de browserextensie Tampermonkey installeren. Tampermonkey is de populairste userscriptmanager en is beschikbaar voor alle populaire browsers: Chrome, Firefox, Microsoft Edge, Safari en Opera Next. Hoe je een browserextensie installeert, hangt af van je browser. Tampermonkey maakt het je makkelijk: klik op de Tampermonkey-homepage op de tab met de naam van je webbrowser, en klik vervolgens op de ‘Download’-knop. Meteen daarna kom je terecht op de webpagina met de beschrijving van de extensie en een knop waarmee je de extensie aan je browser kunt toevoegen.

Eenmaal Tampermonkey geïnstalleerd, kun je userscripts toevoegen. Mijn userscript staat op OpenUserJS. Als je daar in het zoekvak ‘Intersteno’ intypt, kom je vanzelf bij mijn script uit. Je kunt mijn script, dat de naam Intersteno_Internet_Results draagt, ook rechtstreeks vinden via deze link.

Heb je mijn script gevonden? Klik dan op de blauwe ‘Install’-knop om het script te installeren. Je krijgt eerst nog een pagina met wat extra informatie én met de volledige broncode van het script. Op die pagina moet je nog eens op ‘Install’ of ‘Installeren’ klikken om het script effectief te installeren.

Vóór je om het even welk script installeert, bekijk je best even de broncode, zodat je precies kunt nagaan wat het script doet. Niet alle userscripts zijn even betrouwbaar, dus je bent gewaarschuwd! Een betrouwbaar script bevat geen obscure code waarvan moeilijk te achterhalen is wat het precies doet, doet geen dingen die je totaal niet verwacht, en is voldoende gedocumenteerd. Dat laatste betekent dat tussen de computercode door commentaren staan die toelichten wat elk stukje van de code doet.

Wanneer je zowel Tampermonkey als mijn userscript geïnstalleerd hebt, zul je merken dat de resultatenlijsten er heel wat aantrekkelijker uitzien. Het script wordt automatisch uitgevoerd op de resultatenpagina’s op https://org.intersteno.it/* en heeft geen enkele invloed op andere webpagina’s die je bezoekt. Via het Tampermonkey-menu kun je het script te allen tijde naar believen in- of uitschakelen. Is het script uitgeschakeld, dan krijg je de originele pagina met de originele CSS te zien; is het script ingeschakeld, dan zie je de aangepaste versie.

Je zult de aanpassingen meteen merken. Ze werken zowel wanneer je de resultatenlijsten op de klassieke manier bekijkt (d.w.z. in het frame van de Intersteno-website) als in hun eigen browservenster of -tab. In het frame heb je nu alvast het voordeel dat de horizontale schuifbalk verdwenen is en dat er aan de rechterkant geen deel van de tekst ontbreekt. (Als dat niet het geval is, dan heb je hoogstwaarschijnlijk te veel ingezoomd. Zoom uit om de tekst wat te verkleinen.) In een eigen venster of tab zul je merken dat de tabel nu de volledige breedte van je browservenster inneemt (in plaats van 80%). Vind je dat te breed (wanneer je een extra-brede monitor gebruikt), maak het venster dan wat smaller.

Het is mogelijk dat je bij het laden van de webpagina eerst voor korte tijd de originele lay-out ziet, maar al snel zul je merken dat de aanpassingen toegepast worden. Bij de korte tabellen gaat dat heel snel, maar bij de lange tabellen duurt het wat langer. Dat komt doordat je browser aanvankelijk de volledige webpagina laadt, er de originele CSS-stijlen op toepast en pas daarna het userscript uitvoert. Het laden en renderen van pagina’s met grote tabellen neemt altijd wat meer tijd in beslag.

Lukt het niet of heb je nog vragen, dan mag je mij uiteraard hierover contacteren.

Zoals je al gemerkt hebt, is de broncode van mijn userscript gewoon door iedereen te bekijken en te downloaden. Wat erin staat, is geen groot geheim. Heb je suggesties voor verbeteringen of aanpassingen, dan mag je mij die altijd bezorgen. Ben je niet helemaal tevreden met mijn aanpassingen en denk je dat je het zelf beter kunt? Dan staat het je natuurlijk volkomen vrij om je eigen userscript te ontwerpen, volledig volgens je eigen smaken en wensen. Als je je daarbij laat inspireren door mijn userscript, dan verwacht ik wel dat je mij toevoegt als contributor in de header van je userscript. Je kunt dat doen door volgende regel op te nemen:

// @contributor Geert Bonte (https://openuserjs.org/users/gebo007)

Mijn script is vrij te gebruiken onder de MIT-licentie. In het kort komt het hierop neer: je mag met mijn script doen wat je wil zolang je er diezelfde licentie op toepast, en ik ben op geen enkele manier aansprakelijk voor de eventuele gevolgen.

Succes ermee en veel plezier met mijn Tampermonkey-userscript!

openuserjs.org/scripts/gebo007/Intersteno_Internet_Results
org.intersteno.it/page.php?id_primario=47&id_secondario=211
www.intersteno.org/intersteno-internet-contests/classification-lists
www.tampermonkey.net