Wat was er op TV gisteren?

npostart

Soms kijk ik op de NPO-start website om te zien wat er vanavond op tv is. Dat gaat redelijk snel. Je klikt op gids en selecteert “avond”. Menu naar gisteren scrollen Vaak wil ik echter terugkijken van wat er gisteravond op tv was. Ik ben namelijk niet echt een nachtbraker. En dan wordt het een beetje moeilijker. Omdat alles is ingesteld op “vandaag” moet je op vandaag klikken en scrollen naar de datum “gisteren”. Het zijn natuurlijk echte luxe-problemen, maar het is leuk om daar eens wat voor te doen. Hoe? Met bookmarklets.

Bookmarklets

Bookmarklets zijn geen bookmarks, of bladwijzers voor in je browser, maar ze lijken er wel op. Bookmarks bevatten links naar webpagina's, en bookmarklets bevatten stukjes javascript-code die een link “on the fly” samenstellen. Zo kun je dus links samenstellen waarin een datum zit, die “vandaag” moet voorstellen. Als je bijvoorbeeld een bookmark hebt gemaakt die de programma's van vandaag laat zien:

https://www.npostart.nl/gids?date=2021-04-09&type=tv#evening 

dan is die morgen, of volgende week niet meer geldig. Met een bookmarklet kun je dit ondervangen, door met Javascript te laten berekenen welke datum vandaag is, en dit in de link te zetten, als je op de bookmarklet klikt. Hieronder zie je zo'n code-blokje. Schrik niet van deze javascript-code. Javascript heeft kennelijk geen directe manier om de dag van vandaag samen te stellen. Je zou verwachten dat iets als getDate('yyyy-mm-dd') of %Y-%m-%d zou werken. Dat is niet het geval. Je moet het jaar, de maand en dag apart ophalen en aan elkaar plakken, en daarom ziet het er wat moeilijker uit dan het is. De code voor de bookmarklet zou er dan bijvoorbeeld zo uit kunnen zien:

javascript:function npo() {
 var date = new Date();
 var y = date.getFullYear(); 
 var m = date.getMonth() +1; 
 if(m < 10){m = '0' + m;}
 var d = (date.getDate()-1);
 if(d < 10){d = '0' + d;}
 var dag = y + "-" + m + "-" + d;
 return 'https://www.npostart.nl/gids?date='+ dag;
} window.open(npo(),'_self');

Nieuwe bladwijzer Als je met deze code een bookmarklet wil maken, dan klik je met de rechtermuisknop op de bladwijzerwerkbalk en kies je “Nieuwe bladwijzer”. Vul een mooie naam in bij het veldje “Naam” en kopieer de code van hierboven in het veld “locatie”. Nieuwe bladwijzer dialoog Hiermee zie je dus de tv-gids van gisteren (var d = (date.getDate()-1)). Je kunt zo ook andere bookmarklets maken. Overal waar een datum in de url staat, kun je een bookmarklet maken door dit stukje te gebruiken en de url aan te passen.

Tjilp

Een ander voorbeeld laat zien hoe je een interessante pagina kunt delen met Twitter, zonder gebruik te maken van de standaard mogelijkheden die mensen als share-button op hun website zetten, en waarvan je soms niet precies weet wat die doet. Om zelf zo'n bookmarklet te maken, moet je weten hoe Twitter de link wil hebben, en je moet ook wat verstand hebben van javascript en hoe een site-document is opgebouwd. Dat is soms wel ingewikkeld en daarom heb ik deze van een opensource code community gekopieerd.

javascript:(function(){n=getSelection().anchorNode;if(!n){t=document.title;}else{t=n.nodeType===3?n.data:n.innerText;}t='“'+t.trim()+'”\n\n';window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(t)}${document.location.href}`)})();

Nu kun je van een pagina de kop selecteren, of een andere tekst en via deze bookmarklet het artikel “tweeten”.

En meer...

Omdat bookmarklets javascript uitvoeren als je erop klikt, kun je er ook heel andere zaken mee regelen dan de browser naar een andere site sturen. Je kunt bijvoorbeeld alle tekst van je huidige pagina rood maken, als je dat al zou willen. Of tekst die je geselecteerd hebt sturen naar een vertaal-website, die de geselecteerde tekst vertaalt. Het is een leuke manier om eens met Javascript te spelen en uit te proberen. En er zijn heel wat mensen die hun creatieve ideeën hebben uitgevoerd. Zoek eens op github, of andere sites naar 'bookmarklet'. Je komt dan wel leuke en handige dingen tegen.

Ik hoef in ieder geval niet meer te scrollen om mijn tv-overzicht van gisteren te zien.

#javascript #bookmarklet #browser #hacks