Waarom zou je dat in 's hemelsnaam doen? Goede vraag! Al heb ik hem zelf net gesteld. Ik kan wel een paar antwoorden bedenken. Je bent nieuwsgierig, en wil eindelijk eens weten wat dat nu is, Linux! Maar je hebt geen zin om een linux image te downloaden en te installeren. Of je hebt soms, net als ik, een tooltje nodig waarvan je weet dat die in de gereedschapskist van Linux zit, maar niet in die van Windows. Er zijn ook genoeg mensen, Linux-fans, die Linux op Windows helemaal niet zien zitten en deze mogelijkheid meer als een vijandige coup in de wereld van de softwareontwikkeling zien. Een pact met de duivel zou nog niet zo erg zijn. Weer anderen vinden het gewoon een slechte implementatie. Deze mensen gebruiken Linux voor hun beheer of ontwikkelwerk erg intensief, en dan is snelheid wel een issue. In ieder geval, ik laat je zien hoe gemakkelijk de installatie is en wat je er dan, als beginner vervolgens nog mee kunt doen.

WSL: een middenkader manager

Dat je Linux op Windows kunt draaien komt door een vertaalprogramma van Linux naar Windows. Een zogenaamde “compatibiliteits”-laag die luistert naar alles wat Linux wil, en dat vervolgens doorgeeft aan Windows . Dit vertaalprogramma zorgt er dan dus voor dat Windows het gevraagde uitvoert. Dit vertaalprogramma is een subsysteem en in dit geval heet dit vertaalprogramma dan ook Windows Subsystem for Linux (WSL). Je kunt dit subsysteem tegelijk met een linuxdistributie installeren. Je hoeft daarvoor alleen Windows Powershell als administrator te starten en in te typen: wsl --install. Dan wordt WSL met Ubuntu linux geïnstalleerd. Als je een andere Linux distributie wil installeren dan zet je er nog eens de distributienaam in, bijvoorbeeld wsl --install -d Debian.

Grafisch

Was het in eerdere versies van WSL zo, dat je alleen de commandline van Linux kon gebruiken na een installatie, nu wordt er ook een “GUI App Support” mee naar beneden gehaald en op je computer gezet.

Hiermee kun je dan software installeren die een grafische interface heeft. Voor mij is het niet zo heel interessant, omdat ik Linux alleen gebruik als ik een tooltje als wget, curl, grep, rsync nodig heb. Het downloaden van deze GUI App Support duurt wel een tijdje. Na de installatie moet je, zoals gebruikelijk bij Windows, de computer herstarten.

Start je dan vervolgens WSL op, dan vraagt het programma je een gebruikersnaam en wachtwoord te geven om in de toekomst in te kunnen loggen in de Linux omgeving. Klaar.

Superuser do!

Of toch nog niet? Je kunt Linux nu al gebruiken, maar als je van alles de laatste versie wil hebben, dan installeer je de laatste versie. Dat is wel zo veilig. Met het intypen van sudo apt update laat je Linux de gegevens verzamelen over alle programma's die geïnstalleerd zijn, en checken of hier nog nieuwere versies van te vinden zijn. De eerste keer zullen dat er heel veel zijn, maar de installatie van al deze software gaat erg snel. Sneller dan bij Windows, natuurlijk. Hiervoor typ je het commando sudo apt upgrade in. Windows probeert overigens deze manier van het bijhouden van de geïnstalleerde software na te doen en heeft vorig jaar een Package Manager met de naam winget geïntroduceerd. Werkt aardig met het commando winget upgrade --all, als je het tenminste niet erg vindt om steeds opnieuw aangemaakte icoontjes van je desktop te verwijderen. Maar dat is even een zijspoortje. De wondere wereld van Linux ligt nu aan je voeten: een knipperende cursor. Geen bureaublad? Geen mooi behangpapier? Voorlopig even niet. Probeer dan maar eens wat in te typen: pwd of ls , ll, df, uname -r .

Grafisch (2)

Ben je toch van de grafische kant, dan installeer je grafische programma's met bijvoorbeeld sudo apt install firefox, of een programma dat er niet voor Windows is zoals gthumb voor foto's: sudo apt install gthumb. Gimp en Inkscape zijn leuke programma's maar die kun je mijns inzien beter gewoon op je Windows machine, of op een echte Linux-machine uitvoeren.

Start bijvoorbeeld gthumb op door in te typen gthumb. Je ziet dat er nog helemaal niks te doen is op je bestandssysteem. Je kunt de Linux ruimte echter wel benaderen vanuit de Windows Explorer (Verkenner) door in het locatieveld \\wsl$ te typen. Ja, Windows benadert de Linux bestanden via een netwerk-koppeling. Dat maakt het voor sommigen te langzaam om goed mee te werken, maar voor ons suffe gebruikers is dat helemaal geen probleem. Met wat klikken kom je dan uit waar je wezen moet, bijvoorbeeld in de downloadfolder. \\wsl.localhost\Ubuntu\home\peter\Downloads. Kopieer foto's met de Windows verkenner naar zo'n map die te zien is door WSL, en je kunt het bekijken en bewerken met gthumb.

Puzzelen

En als je helemaal enthousiast bent geworden en vaak moet switchen tussen Powershell en Ubuntu kun je ook nog Windows Terminal installeren. Pas dan ook gauw het uiterlijk van de schermen aan, om het verschil tussen Powershell en Ubuntu te merken, want volgens sommigen is dat water en vuur! Zo is puzzelen zonder puzzelboekje in deze regenachtige winterdagen leuk om te doen. En misschien vind je het op den duur zelfs leuker om een echte “superuser” te zijn dan een saaie “administrator”. Dan is de Linux community weer een lid rijker.

#linux #windows #opensource #hacks

Het gebeurt niet zo vaak dat ik in een schrijftekst op een ingewikkelde manier iets wil zoeken en vervangen. Meestal is dat aan de hand bij gegevens die in een bepaald formaat horen te staan. Html, of xml bijvoorbeeld. In de loop der jaren heb ik langzaamaan geleerd om dit zoek- en vervangwerk via de zogenaamde reguliere expressies uit te voeren. Ik vermoed dat veel mensen er op deze geleidelijke manier mee vertrouwd zijn geraakt, en er net als ik nooit een cursus in hebben gevolgd. Want je kunt er met gemak een moeilijke cursus voor maken. Elke keer als ik ze wil gebruiken moet ik er opnieuw induiken. Gelukkig zijn er websites die je hiermee helpen. Als je nog nooit op deze manier gewerkt hebt, kijk dan even mee met dit voorbeeld. Misschien dat je de stap dan een keer gaat wagen.

Reguliere expressies. Er zijn mensen die in paniek beginnen te schreeuwen als ze iemand de term horen bezigen. Het is ook niet verwonderlijk, als je de zoekpatronen ziet. Het zijn net geheimzinnige toverspreuken. Of soms lijken ze op het vloeken (!*@#$!!!) in een stripverhaal. De expressies hebben hun uiterlijk duidelijk niet mee, daarnaast kunnen ze zich ook gedragen als erg gevaarlijke monsters. Sommige expressies worden zelfs ‘greedy’ genoemd, als ze heel veel tekst willen opeten. Daarom is het aan te bevelen er voorzichtig mee om te gaan. Zoals gezegd zijn er websites die je daarmee kunnen helpen. Ikzelf gebruik hiervoor vaak regex101 , waar de 101 staat voor ‘beginners’. Het leuke van deze site is, dat die aan de rechterkant laat zien wat je aan het doen bent. Dat werkt in ieder geval voor mij heel aardig.

Vraag en antwoord

Laatst had ik een groot aantal kleine html-bestanden met vragen en antwoorden. De antwoorden stonden meteen achter de vraag. Ik wilde graag het antwoord verstoppen, en alleen zichtbaar maken als je met de muis over het antwoord beweegt.

Hoeveel is vier keer vijfentwintig? Honderd.

Moet dan worden:

Hoeveel is vier keer vijfentwintig?

Je kunt nu het antwoord alleen zien door er met de muis overheen te bewegen. Hiervoor moet de html veranderd worden van

Hoeveel is vier keer vijfentwintig? Honderd.<br/>

in

<span title="Honderd">Hoeveel is vier keer vijfentwintig?</span><br/>

Je ziet dat je dan een stukje tekst achteraan (Honderd) naar voren moet halen. Ook is het nodig om html-tags (span en title) toe te voegen. En ja, dit kan dus in één keer met reguliere expressies.

Editor

Als je Windows gebruikt, dan zul je vast wel Notepad++ kunnen gebruiken. Er zijn genoeg andere editors die reguliere expressies ondersteunen. Een editor die op Windows, Linux en OS X werkt is bijvoorbeeld Atom. Het is vaak even zoeken naar het knopje dat aangeeft dat je met reguliere expressies wil zoeken. Bij Atom staat het bijvoorbeeld rechts beneden in een hoekje. Maar laten we eerst eens naar de website gaan die je kan helpen. Je kopieert eerst te doorzoeken tekst in het vakje voor “teststring”, en bovenaan ga je rustig je toverformule opstellen. Sommige tekens zijn handig om meteen te weten: een punt (.) staat voor elk teken dat je maar kunt bedenken, en een ster (*) betekent “zoek van het voorgaande teken zoveel als maar mogelijk is”. Dan betekent .* dus gewoon alles zoeken. Hier zien we al dat het monster erg greedy kan worden. Uiteindelijk kwam ik tot het volgende resultaat. Je ziet hier dat je stukken tekst apart van elkaar kunt houden door haakjes () te gebruiken. Bij het vervangen kun je aan deze stukken tekst refereren door die aan te duiden met eerste, tweede of derde: $1, $2 of $3. Op deze manier kun je dus $2 in het resultaat plaatsen vóór $1. Aan de rechterkant op de site kun je zien welke tekst geselecteerd wordt, en waarom. Ook vind je daar de uitleg van de tekens die je voor reguliere expressies kunt gebruiken. Ik had zelf wat moeite om tekst te selecteren “tot aan” het vraagteken bijvoorbeeld. Of “vanaf” het vraagteken. Hoe dat moet, heb ik ook moeten opzoeken op internet. Het vraagteken is trouwens een teken dat eigenlijk is gereserveerd voor reguliere expressies. Als je echt letterlijk op het vraagteken wil zoeken, dan moet je er een backslash voor zetten, om aan te geven dat je echt wel letterlijk het vraagteken bedoelt.

Flits

Je moet je bedenken dat je even bezig bent om zo'n toverformule op te stellen. Maar toen ik klaar was en abacadabra kon zeggen, had ik in een fractie van een seconde veertig bestanden veranderd. En dat is natuurlijk wel een leuk resultaat. Als je enthousiast bent geworden door de flexibiliteit en de kracht van reguliere expressies en niet bang bent voor dit krachtige monster, dan kun je enkele introductiecursussen volgen. Er zijn er genoeg te vinden op internet. Maar het leukste is toch om het gewoon te doen op deze 101 website.

#hacks #website #regex

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 website maken wordt steeds gemakkelijker. Veel sites zijn vrij simpel opgezet, en hoeven geen ingewikkelde javascript-code of -plugins, en ook geen dure database. Deze simpele sites noemt men ook wel “static sites”. Een blog is vaak een “static site”: de blog wordt steeds aangevuld met een nieuw item, de oude items blijven over het algemeen hetzelfde. Er is dus niet meer nodig dan een verzameling html-pagina's op een kleine ruimte op internet. WordPress biedt veel mogelijkheden, als je er voor betaalt. Maar als je deze niet nodig hebt, dan kun je eens overwegen of het goedkoop huren van een internetplekje met een domein niet veel handiger en goedkoper is. Er zijn steeds meer zogenaamde Static Site Generators, die je het leven makkelijk maken. Vaak zijn deze sites ook veel sneller dan de logge WordPress-sites. Eén ervan heb ik met verrassend gemak geprobeerd.

Importeren

Als je al een WP-website hebt, en je wil overstappen naar een goedkoper alternatief, dan heb je de mogelijkheid om eerst de website vanuit WordPress te exporteren, en vervolgens in een andere omgeving te importeren. Kies daarvoor bij WordPress onder gereedschappen het menu-item exporteren, inhoud exporteren. Media exporteren is niet per sé nodig, als je de site meteen naar een nieuwe site wil exporteren. Als je het bestand uitpakt, dan hou je een xml over.

Publii

Publii is de site generator die ik heb uitgeprobeerd, omdat die volgens het reclameverhaaltje WordPress sites kan importeren. Bezoek de website van Publii, download het programma, installeer het en start Publii. Je kunt meteen de naam van je website invullen en bevestigen. Daarna zie je een menu, en onder het menu-item “Tools” vind je een “WP-importer”.
Hiermee kun je de geëxporteerde xml uit je WordPress omgeving inladen. Afhankelijk van de grootte van je website duurt dat kort of lang. Bij mij duurde het een paar minuten. De foto's, of beelden worden van je website gekopieerd, dus de website moet nog wel bestaan. Als de site niet meer bestaat dan zul je ook een export van de media moeten hebben. Hoe je deze dan vervolgens moet importeren in Publii weet ik niet precies.

Geen images

Als de importfunctie klaar is, dan heb je meteen een website die je kunt bekijken. Het kan zijn dat de beelden niet in de website staan. Dat was bij mij in ieder geval zo. Maar als je weer naar tools gaat en op de optie “Regenerate thumbnails” klikt, zet Publii ze er alsnog in, ook al zijn het geen “thumbnails”. Dat is even een weetje. Daarna heb je een website op je computer, die de inhoud en de beelden van je WordPress website bevat. Alles is geordend volgens het standaard theme “Simple”. Je kunt het theme veranderen onder Site settings, je hebt aanvankelijk de keuze uit: ...één theme. Andere themes of templates zul je moeten inladen en eventueel betalen. Er zijn nog niet veel themes te krijgen. Je kunt er ook voor kiezen dit Simple theme aan te passen.

CSS

Het is mogelijk daar veel van aan te passen, de layout, de kleuren, het achtergrondbeeld, de maten van de lay-out-onderdelen. Je kunt dus aardig wat aanpassen, maar feit blijft dat het een theme voor een blog is. Ik heb wat aanpassingen gedaan aan de Hero sectie, maar de belangrijkste mogelijkheid is toch de custom CSS knop onder tools. Zo kun je bijvoorbeeld de afbeeldingen hetzelfde formaat geven, als het formaat uit je WordPress website. De css gaat namelijk niet mee in de conversie.

Sync

Als je een plekje op internet hebt, kun je de website daar naar verplaatsen. Dat kan op verschillende manieren, Google cloud, Netlify, Github, Gitlab, maar vaak zal het gewoon SFTP zijn. Met SFTP transporteer je al de websitebestanden van je computer naar het internet. Als je de instellingen en gegevens van je gehuurde internetplek invult, een keer een testje doet met de knop, dan ben je klaar om de site te publiceren. Druk dan op de knop “Sync your website”. Ook dat duurt de eerste keer een aantal minuten omdat de hele site bijgewerkt moet worden. Daarna, als je een blogje schrijft, is het aanvullen van een artikel op de site een kwestie van een paar seconden.

Met het menu-item “new post” kom je in een editor terecht waar de meest voorkomende zaken voor het schrijven van een blog in zijn geregeld. Het maken van hyperlinks, afbeeldingen, koppen of het instellen van letterkenmerken zijn zoals je gewend bent in een wordprocessor, of WordPress editor. De preview-knop laat je het resultaat van je inspanningen zien en als je tevreden bent druk je op de knop “Sync your website”, om je nieuwe artikel te publiceren.

Gemak

Het was voor mij een verrassing hoe gemakkelijk het importeren ging. Voor het aanpassen aan de site naar een nieuwe look, of zo veel mogelijk terug naar de look van je oude WP-site heb je wat CSS kennis nodig. Maar dat hoef je dan ook maar één keer te doen. Of er is altijd wel een kennis te vinden die het voor je wil doen. Daarna kun je je concentreren op het schrijven, in de wetenschap dat je alles zo simpel mogelijk hebt geregeld en er dus ook zo weinig mogelijk voor betaalt.

#static #website #css #publii #hacks

Cryptpad is een handig gratis gereedschap om teksten of code te schrijven, presentaties te componeren, berekeningen te maken in spreadsheets of bijvoorbeeld een whiteboard te gebruiken. Cryptpad gebruik je online, in de browser, en daardoor maakt het niet uit waar je bent. Als je als gebruiker ingelogd bent kun je altijd bij je teksten, als je die op de computer van cryptpad hebt opgeslagen. Je kunt op deze manier ook met meerdere mensen aan één document werken. In deze tijd van thuiswerken kan dat erg handig zijn.

Rijke tekst

Allereerst is er de “rich text” editor. De basis bewerkingen voor een dergelijke editor zijn snel te gebruiken via een menubalkje. Zoals bijvoorbeeld het vet, cursief maken, of het onderstrepen van tekst. Sub- en superscript is ook mogelijk en voor de wiskundigen onder ons is er zelfs een speciale manier om wiskundige formules in de tekst te voegen. Hiervoor is het wel nodig om iets te weten van Tex. Plaatjes kun je alleen in de tekst zetten als je deze uploadt op de “cryptdrive”, en hiervoor moet je je hebben aangemeld als gebruiker. Dat kan dus niet anoniem als “Anonymous”. Je tekstbestand kun je op de cryptdrive zetten, of exporteren en bewaren op je computer als html- of doc-bestand.

Markdown

De code editor is gewoon een markdown editor. Syntax highlighting voor bijvoorbeeld javascript heb ik hier dan ook niet in kunnen ontdekken. Dus echt een code-editor is het niet. Ook vond ik hierin niet de mogelijkheid om plaatjes in de tekst te zetten op de manier van markdown, zoals dat in een gewone editor kan. Ook dat zal te maken hebben met het feit dat je een plaatje alleen via je “cryptdrive” kan inladen, en niet via een url. Vergelijk dezelfde tekst met plaatje in cryptpad en in de editor Atom.

Samenwerken

Een van de belangrijkste voordelen van Cryptpad is dat je met meerdere mensen aan één document kunt werken. De gebruikers zie je aan de rechterkant van het scherm. Dus Cryptpad kan wat dat betreft hetzelfde als Google Docs of Office Online. Tijdens het werken kun je met elkaar overleggen via de chatfunctie.

Zero Knowledge

“Zero knowledge” is een wat rare aanprijzing van deze site. De makers van de site bedoelen hiermee dat ze op geen enkele manier kennis kunnen hebben van wat jij allemaal op hun omgeving uitspookt. De bestanden worden al in de browser versleuteld en komen dus versleuteld op de omgeving binnen. Zelfs van je wachtwoord hebben de makers geen weet. Als je je wachtwoord vergeten bent, dan kun je nooit meer bij je bestanden komen. Dus het is wel wijs om je wachtwoord in een wachtwoordmanager op te slaan.

Delen

Bestanden kunnen gedeeld worden door iemand een link toe te sturen via de knop “share”. Tegelijk kun je aangeven of de persoon waarmee je het bestand deelt het bestand alleen mag inzien, of ook mag bewerken.

Conclusie

Van Cryptpad heb ik de editors en het spreadsheet geprobeerd. Het werkt redelijk goed. Voor gewone zaken hou ik toch meer van een reguliere wordprocessor of editor die lokaal op je computer is geïnstalleerd. Maar als je vaak onderweg bent, of als je moet samenwerken met anderen, dan is dit wel ideaal. Bovendien heb je geen privacy-issues. Alles wordt versleuteld opgeslagen op de “cryptdrive”. Dat “cryptdrive” zo belangrijk is, vormt meteen ook een nadeel. De gratis variant heeft maar 50 mb vrije ruimte. Als je veel met plaatjes werkt, is dat zo vol. Maar het is wel een goede manier om het uit te proberen. En betalen voor een veilige omgeving is natuurlijk wel zo redelijk.

#cryptpad #alternative #office #security #privacy #opensource #hacks

Sinds LinkedIn mijn gmail account in de openbaarheid heeft gegooid heb ik veel last van grapjassen die dit account voor van alles en nog wat gebruiken. Ze proberen wat bij Amazon, ze ondertekenen een petitie, of ze maken een account aan bij een winkel. Je vraagt je af hoe dit laatste mogelijk is. Bij de aanmaak van een account wordt er immers een bevestigingsmail gestuurd. In die mail vind je dan een link waar je op kunt klikken om dat account te bevestigen. Je moet dus het wachtwoord van het gmail-account hebben en eventueel de telefoon waarop je “twee-factor-authenticatie” hebt ingesteld, om op die link te kunnen klikken. Vorige week had ik zogenaamd een account op “OfferUp” aangemaakt. Ik heb nooit van die website gehoord, maar het verbaasde mij dat ik een bevestigingsmail toegezonden kreeg, daarna zelfs een welkomstbericht en de grappenmakers hebben vervolgens een dure tv op dit account te geef gezet. Zo krijg ik dus een hoop mails binnen met de vraag: “Hi, is this still available?”. Nu heb ik op mijn Google-account een wachtwoord staan dat er ongeveer zo uit ziet: ywlRy0ZA^Vb>c(QjqqP&l_Ex. Dus ik vermoed dat mijn gmail-account niet gehackt is. Natuurlijk heb ik voor de zekerheid het gmail-account van een nieuw wachtwoord voorzien. Ik heb echter de indruk dat deze site gehackt is, gezien het beeld dat je te zien krijgt als je die in de browser oproept.

De emmer die overloopt

Voor mij is het de druppel die de emmer doet overlopen. Zo'n site gaat rustig verder met de verkoop, ook al is ze gehackt. Ik krijg ten minste nog steeds van die OfferUp e-mails binnen. Waarschijnlijk gaat dat dan via de apps op de smartphone.

Gelukkig heb ik in het afgelopen jaar rustig mijn gmail-account uit mijn internetactiviteiten gehaald. Ontgooglen is “in”, nietwaar? Volgens mij zijn er nu geen accounts meer waarmee ik moet inloggen met mijn gmail account. Er zijn wel mensen die mij op dit e-mail account in het adresboek hebben staan. Die zal ik nog een berichtje moeten sturen, en anders kan men mij altijd nog bellen op mijn telefoonnummer dat al twintig jaar hetzelfde is.

Dus nu is het echt tijd om mijn gmail account te verwijderen.

Maar gaat dat wel, als je een Android telefoon hebt? Dat vroeg ik me dus wel even af. Maar kennelijk kun je je per dienst afmelden voor Google services, terwijl je Google account intact blijft. Als je gmail “uitzet” dan kun je zelfs de agenda blijven gebruiken. Het mooie is ook dat je eventueel later die gmail weer aan kunt zetten. Wel is het zo dat al je mails het ravijn in worden geveegd om nooit meer terug te keren. Mocht je daar nog belangrijke mails in hebben zitten, dan moet je die nog allemaal nagaan. Je kunt ook een backup van de mails maken via de “takeout”-functie in je Google account. Je kunt er voor kiezen alleen de mails te backuppen, maar als je toch bezig bent, kun je ook eens alle spullen in een keer zekerstellen. Bij een grote backup kan het wel dagen duren. Bij mij duurde het drie dagen. Omdat ik wat heb zitten veranderen aan de informatie over wachtwoorden uit een lang vergeten chromebrowser-tijdperk – ik gebruik nu voornamelijk Firefox – krijg ik ook een melding dat niet alles compleet is. Het is trouwens wel aan te bevelen om eens naar je wachtwoorden te kijken hier en ervoor te zorgen dat alles in orde is. Dat had ik al veel eerder moeten doen, en als je Chrome niet gebruikt, kun je hier eigenlijk wel zowat alles verwijderen.

De rode knop

Zal ik hem indrukken, die knop? Er zit zoveel aan vast, aan zo'n gmail account. Daarom zullen gelekte gmail adressen ook wel populair zijn om iets mee te doen. Je gooit die niet zomaar weg. Mensen denken ook vaak dat een gmail-account hetzelfde is als een google-account. In ieder geval zie je bij support het volgende: Volg je de instructies daar, dan zie je op het grote moment een scherm dat er zo ongeveer uitziet. Ik hoef geen backup meer te maken, want dat heb ik pas al gedaan. Ik kies hier gmail. Omdat je op je Google account met je gmail inlogt, vraagt Google je nu een ander e-mail adres te gebruiken, zodat je je Google account kunt blijven gebruiken. En dan krijg je nog een waarschuwing. En dat is heel terecht, want veel mensen gebruiken het gmail-adres voor van alles en nog wat. Bijvoorbeeld om in te loggen bij je bank, of als reserve e-mail adres voor als je je wachtwoord vergeten bent. Ik heb ongeveer een jaar dit gmail adres niet meer gebruikt. Zo ben ik er vrij zeker van, dat er geen moeilijkheden van komen. Maar het blijft echt wel spannend. En dan gaat het toch echt gebeuren!

#gmail #degoogle #google #leaks #deletegmail #deletegoogle #hacks

Schrijvers schrijven in sommige gevallen om niet vergeten te worden en een plaatsje in de geschiedenis te krijgen. Ben jij er ook zo een, dan kun je het lot een beetje helpen door gebruik te maken van het webarchief. Hiermee kun je je blogje voor altijd vastleggen. Ook al ben je zelf of je blogje al helemaal niet meer in deze wereld, iedereen kan nog steeds met je kennismaken, of je kunstwerken herlezen. Ik ga het doen om een andere reden.

Ik wil mijn oude blog op WordPress weghalen, nu ik ben overgestapt op een ander blogplatform. Waarom zou ik eigenlijk mijn WordPress account willen verwijderen? Dat kan toch gewoon blijven bestaan? Tja, dat is persoonlijk. Ik wil bezoekers van mijn website niet opzadelen met allerlei trackers. Kijk eens naar de trackers van mistynotes.nl, mijn huidige website, en naar de trackers in mistynotes.wordpress.com.

Dat komt natuurlijk doordat ik niet betaal voor die ruimte op wordpress.com. Als ik mijn eigen spullen en privacy ter beschikking stel aan al die data-gieren omdat ik niet betaal, dan is dat nog te begrijpen. Maar bezoekers die mijn verhaaltjes willen lezen, wil ik daar niet aan blootstellen.

Hoe sla je nu je website op? Als je naar de archive.org gaat vind je op een wat onlogische plek een veldje met “Save Page Now”.

Als je dit hebt gedaan vind je de pagina terug in het archief. Maar als je daar een artikel wil lezen, en je klikt op een “read more”-link, dan krijg je helaas een foutmelding.

Het bewaren van de pagina levert alleen die hoofdpagina van je blog op in het archief. Nu kun je handmatig alle pagina's van je website afgaan. Voor mij geldt dat ik maar een keer per maand gemiddeld een blogje schrijf, maar zelfs dan is het een heel werk. Bij het opslaan echter zag ik in kleine letters deze tekst.

Sign in to use extra features: “Save outlinks”, “Save screenshot” and “My webarchive”

Sign up!

Dus dan maar opseinen. Het “sign-up” proces gaat zoals zo vaak, e-mail adres en wachtwoord invullen, op de link klikken van een toegezonden e-mail ter verificatie, en vervolgens inloggen.

Je ziet nu een andere welkomstpagina. Klik op web.

En rechts zie je dan de felbegeerde “Save Page Now”. Klik de extra vinkjes aan bij “save outlinks” en “save to my webarchive”.

Je ziet nu duidelijk dat ook andere pagina's worden geladen.

En klaar.

Je ziet dan ook meteen de url waar je het archief kunt bekijken. Hier is dat:

(A snapshot was captured. Visit page: /web/20200925081748/https://mistynotes.nl/)

Buiten de site is dat dan: https://web.archive.org/web/20200925081748/https://mistynotes.nl/

Als we deze links gebruiken en naar het archief gaan, zien we dat de links nu wel werken. Het huidige artikel is natuurlijk nog niet bewaard in het archief. Bij een simpel blog als dat van mij krijg je vaak op de eerste pagina een aantal titels te zien met meestal een stukje tekst, de “lead” of inleiding van een artikel, met een linkje “meer lezen” of “read more” erbij. Als je het vinkje “save outlinks” hebt aanstaan, dan komen ook alle artikelen mee die je onder “meer lezen” hebt staan.

Exponentieel

Nu staan niet alle artikelen van mij op die eerste pagina en moet je op de link onderaan klikken “older” om de andere artikelen te zien. Die pagina die naar “older” wijst wordt ook netjes opgeslagen. Maar alle “meer lezen” links op deze “older”-pagina dus niet, helaas. Het linken gaat namelijk maar één niveau diep. En dat is wel begrijpelijk, met meerdere niveaus of op een recursieve manier ben je al gauw het hele internet aan het archiveren vanuit een simpel blogje. Netwerkrelaties zijn exponentieel in aantal. Waar kennen we dat van? Ook van de virusbesmettingen natuurlijk. Een virus kent ook de kracht van netwerken voor verspreiding en maakt daarom ook gebruik van een netwerk van mensen. Dus archive.org wil graag ver onder die virtuele R0 blijven bij het aanmaken van nieuwe pagina's. Een veilige manier is dan om maar een niveau diep te zoeken. Gelukkig heb ik maar twee hoofdpagina's. De tweede pagina laat ik dan op dezelfde manier archiveren.

Oeps, te laat

Nu heb ik alle voorbeelden van het bewaren van een website gedaan met mijn nieuwe site. Maar eigenlijk zou ik dat moeten doen met mijn oude site natuurlijk. Die wil ik verlaten, en links die ernaar toe verwijzen veranderen in links die naar het webarchive wijzen. Helaas kan dat nu niet meer. Ik heb mijn betaalde account al opgezegd, en daarmee kan ik met mistynotes.blog, het domein dat wordpress.com netjes afhandelde om naar het subdomein mistynotes.wordpress.com te wijzen, niet meer gebruiken. Ik verwijs er nog naar, via een omweg. Maar met webarchive.com krijg je hiermee je website niet terug. Gelukkig heb ik de afgelopen jaren wel af en toe een archief-snapshot van mijn WordPress site gemaakt.

Als je je account van wordpress verwijdert, is het dus nodig eerst alle links in je nieuwe site die naar je oude website verwijzen, te veranderen zodat ze naar dit webarchive gaan wijzen. Voor iedere website is dat natuurlijk anders. Als dat er niet al te veel zijn, kun je deze handmatig aanpassen. In mijn geval zijn het er maar een paar. Dan hoop ik maar dat ik die pagina's waarnaar verwezen wordt, terug te vinden zijn op webarchive, omdat ik toevallig vond dat dat belangrijk was om op te slaan. En anders sla ik ze natuurlijk nog apart op in het webarchief, nu het nog kan.

Struinen

Mocht je je hebben ingeschreven op de website archive.org, kijk dan ook eens naar de andere tools. Een 404 foutmelding afhandeling voor als je een gearchiveerde pagina uit je blog verwijdert. Of een dode links checker voor je WP-blog. En je kunt natuurlijk struinen in het grote webarchief met boeken, video's, geluiden, beelden en zelfs oude software.

#webarchive #waybackmachine #blogging #privacy #website #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

Een website is geen ebook. Met het standaard minimalistische uiterlijk van write.as komen die twee echter heel dicht bij elkaar. Het is dan ook niet verwonderlijk dat de makers van write.as nu een nieuwe mogelijkheid aanbieden, om van je website direct een ebook te maken. Dat kan, door achter je website de tekens “/.epub” te zetten. Probeer het maar eens met https://mistynotes.nl/.epub. Weinig werk en heel leuk, als je al je gedichten of verhalen in een boekje wil hebben.

Niet standaard

Nu zie je dat het uiterlijk van mistynotes afwijkt van de write.as-standaard, en niet zo gemakkelijk past in een ebook. De illustraties zijn bijvoorbeeld hier en daar te groot. Daarom heb ik het gegenereerde ebook ingeladen in Calibre om het aan te passen...

... en de extra css van mistynotes.nl aan de standaard css geplakt.

Je ziet dat het ebook er nu uitziet als de website. In dit geval zie je dat de illustraties de juiste grootte hebben, en net een beetje buiten het kader gedrukt staan, zoals de bedoeling was.
Nu is, zoals gezegd, een ebook geen website, en ik zou graag de mogelijkheid hebben om apart voor het ebook een css te maken. Deze vraag heb ik natuurlijk meteen gesteld.

Gouden idee

In ieder geval vind ik het een gouden idee, want hoeveel mensen lopen er niet rond met het voornemen om al hun schrijfsels eens te bundelen in een ebook? Nu is dat mogelijk, zonder al te veel gedoe. Deze nieuwe uitbreiding van write.as bevindt zich nu nog in de ontwikkelfase, maar het ziet er veelbelovend uit.

#ebook #write.as #boek #hacks

Een website leuker maken, dat geeft voldoening. Het is alleen niet zo gemakkelijk. Ik ben zelf helemaal geen designer, en daarom kies ik liever een ontwerp van iemand die iets heeft gemaakt wat ik mooi vind. Op mijn nieuwe plek write.as zijn er wel templates van mensen die iets gemaakt hebben, maar dat zijn er niet zoveel. Op mijn blogje mistynotes.wordpress.com had ik het “libretto”-thema, en daar was ik wel tevreden mee. Dit heb ik nu gebruikt om mistynotes.nl vorm te geven met css. Lees hoe dat in zijn werk gaat op write.as.

Afkijken

Dus eigenlijk is het gewoon “afkijken” van een ander. Maar van afkijken kun je veel leren, nietwaar? In ieder geval heb ik vandaag het uiterlijk van mistynotes.nl zo veranderd, dat ik er tevreden mee ben. Allereerst wilde ik de kleuren van de site goed zetten. En dan op zo'n manier dat de achtergrond en het tekstgedeelte nèt een andere kleur hebben. Precies zoals dat bij het libretto thema werkt dus. Bij het bepalen hoe dat moet heb ik ook weer afgekeken, namelijk van andere thema's die voor write.as beschikbaar zijn. Ik heb geleerd dat het tekst-gedeelte met een “article”-tag te vinden is. Deze tag kun je gebruiken als “selector” in je css. Allereerst even de kleur van de achtergrond bepalen.

body {
background: #f2f1ed;  
}

En dan die van het “article”

article {
   padding-top: 50px;
    background-color: #faf9f5;
    -moz-box-shadow:    1px 1px 2px #eae9e5; 
    -webkit-box-shadow: 1px 1px 2px #eae9e5; 
    box-shadow:         1px 1px 2px #eae9e5;
}

En je ziet dat ik er ook een klein schaduwtje aan geplakt heb, en de bovenkant iets (50 pixels) naar beneden geduwd heb. Steeds afkijken dus.

Koppen

Daarna vond ik dat de kleur en hoe de kopjes eruit zien wat meer moesten lijken op het libretto-thema. Daarom heb ik de twee belangrijkste koppen een opvallende kleur gegeven, en de kleinere tussenkopjes een kleur die op grijs lijkt. Ook heb ik het font-type aangepast. Nu weet ik niet zeker of dit laatste altijd goed werkt. Maar ik denk dat, als het niet werkt, terug gevallen wordt op het oorspronkelijk lettertype. Dus dat is dan geen ramp.

h1, h2 {
    font-family: libretto-icons;
    color: #943526;
    padding-top:15px;  
    text-align: center;
}

h3, h4 {
    color: #787065;
}

.post-title, .dt-published {
    color: #787065 !important;
    font-family: libretto-icons;
    text-align: center;
}

Samen met de kopjes heb ik ook nog wat veranderd aan het tijdstempel, of eigenlijk de tekst met de datum van publicatie (.post-title, .dt-published). Ik wilde de kop en deze datum gecentreerd hebben. Ook wilde ik vóór en na de datum een tilde zetten. In het libretto-thema is dat een mooi figuurtje, maar hier bij de minimalisten van write.as past dat misschien niet zo, dus een tilde is snel gemaakt, en is natuurlijk ook makkelijker. De datum kan ik vinden met de tag “time”. Ik gebruik natuurlijk de f-12 knop in de browser om alles “onder de motorkap” te kunnen bekijken.

time::before {
  content: "~";
}

time::after {
  content: "~";
}

Beginletter

Wat ik ook leuk vind, is dat de beginletter van een tekst soms wat groter gemaakt wordt. Doet me denken aan die middeleeuwse monniken die hele mooie tekeningen maakten van die eerste letter. Ik ben wat bescheidener en maak het alleen wat groter en geeft het een ander kleurtje.

/* <p:first-of-type> is of no use, because there is always an image in the first paragraph in my blog*/
p:nth-child(2) {
  display:inline-block !important;
}

p::first-letter {
  font-size: 120%;
  color: #787065;
}

Het was een heel gedoe om te vinden hoe dat nou moest. Want ik heb in mijn blog als eerste altijd een plaatje, een “image”, vlak onder de titel. Dus ik kon geen gebruik maken van de css-mogelijkheid “first-of-type”, om alleen de eerste paragraaf van zo'n mooi versierinkje te voorzien. Alle paragrafen, is gewoon teveel van het goede, vind ik. Nu is het zo, dat bij write.as alle paragrafen al als “inline”-display staan gedefinieerd. Hierdoor kun je de letters ervan niet van veranderen. Wist ik ook niet, hoor. Dus ik moest zoeken hoe ik de eerste paragraaf kan veranderen in “display:inline-block”, omdat je daar de eerste letter dan weer wel van kunt veranderen. De website w3schools heeft mij hierbij heel erg geholpen. Wat een puzzel is dat css toch! Ik vond de css manier om kindjes te zoeken: p:nth-child(2), het tweede kind is de klos. Want in de eerste staat kennelijk het plaatje. Write.as zet steeds alles in een paragraaf, kennelijk. Nou, dat tweede kindje moest ik veranderen, en er ook nog voor zorgen dat ik voorrang krijg op de andere instellingen van write.as. Daarom staat er !important achter. Waarschijnlijk snap je er geen hol van, maar je komt er vanzelf achter als je het probeert. Lees dit stukje dan nog maar eens door.

Opblazen

Het Libretto thema zoals dat oorspronkelijk werkte, maakte de hoofd-illustraties bij het artikel groter dan het kader. Nu is dat niet meer zo bij WordPress.com, sinds de nieuwste release. Geen idee waarom niet, en ik krijg daar ook geen antwoord. Maar goed, dat is helemaal niet zo erg. Want in tegenstelling tot WordPress.com is het bij write.as wel mogelijk hier en daar wat aanpassingen aan het uiterlijk te doen.

.e-content{
    overflow: visible;
}

div.e-content img.img_main{ 
    margin-left: -100px;
    margin-right: -100px;
    max-width: 132% !important;
    width: 132%;
}

Dit was eerlijk gezegd ook niet makkelijk voor mijn onervaren css-vaardigheden. De f-12 knop en w3schools zijn dan wel een grote hulp. Uiteindelijk is het me wel gelukt. Als je uit de artikelen die op de hoofdpagina staan, er ééntje kiest en je gaat dan dus naar het artikel, dan zie je ineens een groter plaatje. Alsof je het artikel openmaakt en uitpakt.

Alles bij elkaar

Ik weet niet of het echt robuust en gedegen is. Dat is altijd wel het probleem als je begint met iets waar je weinig ervaring mee hebt. Soms moest ik helaas met !important wat uit de minimalistische “styleguide” van write.as breken. Maar goed, de tijd zal het leren. Mocht je hetzelfde thema willen gebruiken, daar heb ik helemaal geen probleem mee. Hier heb je het hele stukje css. Je ziet hier ook dat ik plaatjes links of rechts iets buiten het kader en in de marge gedrukt, kan tonen. Voor de plaatjes moet je dan wel de html-wijze gebruiken en niet de mark-down, tijdens het schrijven. Bijvoorbeeld:

<img src="https://i.snap.as/1ziyarj.png" alt="Prutsen met css" class="img_main"/>

voor het hoofdimage, of

<img src="https://i.snap.as/DhLCcpI.png" alt="kwastcss" class="img_left"/>

voor een beeld aan de zijkant. En denk er dan ook aan, dat als je zelf het artikel niet begint met een plaatje, dat je dan p:nth-child(2) verandert in p:nth-child(1). Als je iets ziet dat beter kan, wat heel goed mogelijk is natuurlijk, dan houd ik me aanbevolen!

Opdracht

Je ziet overigens ook dat ik het “published with write.as” hier beneden weggehaald heb. Met Javascript. Dat kan natuurlijk ook met css. Dat is een leuke leeropdracht voor je. Probeer het stukje met css weg te krijgen. Ik heb het wel op mijn “over mij” pagina gezet. Want ere wie ere toekomt. Het hoeft alleen niet op iedere pagina van mijn blogje te staan, nietwaar? Laat het maar weten als je vragen hebt. In ieder geval ben ik tevreden over het uiterlijk van mistynotes.nl. Of dat morgen ook nog zo is, dat is natuurlijk afwachten.

#write.as #css #wordpress #website #hacks