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”. 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');

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”. 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

Een steeds terugkomend onderwerp in tijdschriften en fora op het internet is: het internet zelf. En dan met name het functioneren van internet de laatste jaren. Oudere deelnemers zoals ik, denken wel eens met weemoed terug aan de jaren dat internet een hobby was, en niet een manier om snel en veel geld te verdienen. Advertenties moeten nu eenmaal veel bekeken worden, en die associëren zich daarom met berichten die veel gelezen worden. Wat komt er op je Facebook- of Twitter-tijdlijn? Dat zijn berichten waar veel mensen zich druk over maken. Dus dat zijn geen berichten over het weer, “het zonnetje schijnt”, of “wat ben ik toch tevreden met mijn leven”. Het zijn juist de berichten met een negatieve inslag, die de aandacht trekken. Kennelijk zijn wij mensen zo gebouwd. Het nare is dat er nu slechts een paar grote techbedrijven over zijn gebleven die het grootste deel van het internet in hun macht hebben. Zij verdienen er op deze manier hun geld aan, en proberen dat ook zo te houden. Zo worden de negatieve en extreme berichten steeds maar weer versterkt. Ook komen er steeds meer privacyproblemen aan het licht, doordat deze bedrijven niet alleen advertenties verkopen, maar ook gegevens over jou en mij. Daarom borrelen er steeds meer initiatieven op die een alternatief internet willen bieden. Ik heb enkele ervan in een eerder blogje genoemd. De Beaker Browser is weer zo'n initiatief.

Beaker Browser

Met de Beaker Browser kun je een alternatief netwerk doorbladeren. Belangrijk is daarbij dat je met de browser niet alleen kunt bladeren en browsen, maar je kunt ook zelf een website, een plekje op dit netwerk maken. In die zin is de browser ook een “builder”. Je kunt in de browser je website aanpassen. Daarvoor is er een editor en een bestands-beheertool ingebouwd. Het grote verschil daarbij is, dat alles op je eigen computer komt te staan, en niet op een andere computer in het internet. Als alles op je eigen computer staat, heeft Google, Facebook of Twitter helemaal niets met je gegevens van doen, en mogen ze er niks mee doen, als ze het al zouden willen gebruiken. Het blijft jouw eigendom, je hebt nergens een vinkje gezet dat alles wat je uploadt door een of ander bedrijf zonder jouw toestemming gebruikt mag worden.

Gedistribueerd

Als je met de Beaker Browser een eigen plek vastlegt voor een site, dan maakt het programma op je computer een zogenaamde “hyperdrive” aan. Je ziet die drive dan ook in je computer als een echte drive. Dit stukje is dan gereserveerd om in verbinding te staan met dit speciale netwerk. Een gedistribueerd netwerk. Stel je voor dat je je computer uitzet. Dan kan niemand meer je geweldige website zien. Nu is het zo, dat je buren, of misschien beter, iemand van de andere kant van de wereld jouw site kan co-hosten. Dat betekent dat hij of zij een kopie van je website, je hyperdrive maakt. Dat is het leuke van die hyperdrive, dat gaat allemaal automatisch. Als je iets verandert, dan verandert het op de andere plek mee. Zo kan jouw site op meerdere plekken verspreid staan, “gedistribueerd”, zoals ze dat noemen. En zo word je een deel van een gedistribueerd netwerk. Als een computer uitvalt, dan wordt binnen het netwerk automatisch een andere route naar een computer gevonden die wel online is. Een DDOS aanval zal dan niet zo makkelijk zijn, kun je bedenken. Zo'n gedistribueerd netwerk werkt aan de buitenkant wel ongeveer als het world wide web, maar de techniek is dus anders. Dat zie je bij de Beaker Browser al aan het eerste stukje van de url. Daarin staat het protocol dat de browser moet gebruiken om de plaats op het internet goed weer te geven. Meestal staat er https://, soms sftp://, of zelfs file:///. In dit speciale geval is het hyper://. Mijn adres is bijvoorbeeld:

hyper://624557f3a5008883c49fb8f7b028f2bd240c0ff04e52b50ad430eba6b0c02058/

Silo's

Als je jouw computer uitzet, dan is er dus nog altijd een kopie op te halen op een andere plek, iemand bijvoorbeeld die aan de andere kant van de wereld woont, waar het dag is, als jij naar bed bent, en waar de computer daarom nog aanstaat. En hier geldt natuurlijk: hoe groter het netwerk, des te beter het gaat functioneren. Alles in je hyperdrive is benaderbaar (leesbaar) via het netwerk, met alle mogelijkheden van het hyperdrive-protocol. Een aparte webserver in de lucht houden, met al het gedoe, is helemaal niet nodig. Dus elk bestand kun je met een url ophalen vanuit een andere computer op het netwerk. Deze openheid is bewust in het netwerk ingebakken. De Beaker Browser oprichters zijn tegen zogenaamde “data silo's”.

Applicaties

Een website maken is niet het enige wat je met de Beaker Browser kunt doen. Als je wat meer ervaring hebt in programmeren, dan kun je er applicaties mee maken, die op het gedistribueerde netwerk hun werk doen. Een foto-album bijvoorbeeld, of een chatsite. Alles wat je maakt is open en bloot voor iedereen te zien. Dat is een hard principe van deze manier om een alternatief net te bouwen. Alle code (programmeercode) is open en voor anderen te hergebruiken. Als jij een mooie site maakt, kan een ander die gebruiken. Die persoon kan dan jouw hyperdrive “forken”, een kopie maken, en vervolgens aan zijn eigen wensen aanpassen en zijn eigen verhaal vertellen in een nieuwe mooie website die op de site van jou gebaseerd is. Dit schuurt nogal met ons copyright-idee, maar ik vind het wel een sympathieke werkwijze. Als mensen kunnen voortbouwen op uitvindingen van anderen, kan het netwerk zich heel snel vernieuwen. Veel sneller dan we gewend zijn in onze wereld van copyright en patenten. Ik kan me voorstellen, dat je de inhoud die je op je website zet, wel met een licentie verbindt. Dit “forken” geldt ook voor de applicaties die gemaakt zijn. Er is een contactenlijst en een forum en vraagbaak waar over het bouwen van applicaties gepraat wordt. Je kunt je hier alleen nog maar aanmelden via een twitter-account. Niet echt slim, maar kennelijk komt daar snel verandering in. Daarnaast is er een lijst van zogenaamde API's die je kunt gebruiken in je applicatie, om zoveel mogelijk gebruik te maken van de voordelen van het gedistribueerde netwerk. En natuurlijk is er een lijst van templates van sites of applicaties die al gemaakt zijn. Dat moeten er dan natuurlijk meer worden.

Probeersel

Als probeersel heb ik snel de laatste drie artikelen van mistynotes als website op een hyperdrive gezet, om daarmee een eenvoudig blogje te maken. Dat is gelukt. Maar je ziet nu wel dat je nog veel handmatig moet doen. Wel is het handig dat ik gewoon de markdown tekst kan kopiëren, en dan is de site meteen goed. De css moest wel nog wat aangepast worden, maar het meest vervelende is dat de landingspage niet automatisch wordt aangemaakt. Daarmee bedoel ik dat wanneer je een blogbericht schrijft, dan zorgt Wordpress, of Write.as er automatisch voor dat dit bericht (of een deel van het bericht) op je landingspage komt. Die pagina is dan een soort van inhoudsopgave met alle berichten die je hebt gemaakt in het verleden. Om dit te bewerkstelligen, zul je vast een applicatie kunnen maken. Via de frontends-.ui-folder denk ik. Maar dat is misschien iets voor later, als dit zich goed ontwikkelt. Zo ziet het er nu uit:

En als ik mijn computer aan heb staan met de hyperdrive online, kun je dat misschien ook hier zien met de Beaker Browser:

hyper://041030fa16a809ce27d78f0f608785edcfc47541836dc8dc637545f155375ebd/index.md

Maar wees niet teleurgesteld als je niets ziet. Ik ben nu eenmaal niet de hele tijd aan het Beakeren.

Installeren

Mocht je nieuwsgierig zijn, twijfel niet en probeer het uit. De installatie is niet zo moeilijk. Tenminste op linux niet, daarvoor is een zogenaamde AppImage gemaakt, dat op alle distributies moet kunnen draaien. Windows en Mac zal ook wel makkelijk te doen zijn. Veel succes!

#beaker #browser #distributed #tor #privacy #hacks