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















