Laatst was ik op zoek naar een bedrijf dat hulp of begeleiding biedt met hosting voor onze website kantamassage.nl. Het leuke is, dat je dan meteen ook blogjes leest om een indruk te krijgen van dat bedrijf. En ik las dit blogje over het voordeel van het webp-formaat voor afbeeldingen. Nu had ik er al eerder aan gedacht om al de jpg afbeeldingen om te zetten, en één afbeelding had ik al in webp formaat gezet, maar ik vond het steeds veel te veel werk om al die afbeeldingen te converteren. En... dat is het eigenlijk helemaal niet!

Want er is een heel oud en uitgebreid converteerprogramma beschikbaar: Imagemagick. Dit programma biedt via de commandline de mogelijkheid om een heleboel bestanden ineens te verwerken. Als je Imagemagick installeert heb je, naast het commando imagemagick, de beschikking over een aantal commando's die je in een terminalvenster kunt gebruiken. Eén ervan, convert, had ik al gebruikt, om pdf bestanden om te zetten in een jpg bestand, zonder dat je er een screenshot of een andere work-around voor hoeft te gebruiken.

convert -density 300 -quality 100 filenaam.pdf filenaam.jpg

Dat ging heel snel en makkelijk, daarom dacht ik dat die magie ook gebruikt zou kunnen worden om snel webp-bestanden aan te maken. Ik moest er wel even voor zitten. Het commando is kennelijk mogrify.

mogrify -format webp *.jpg

Het resultaat levert inderdaad een aantal bestanden op die een stuk kleiner zijn dan hun jpg-versie. In een enkel geval zag ik dat het verschil niet zo groot was. Waar dat aan ligt, weet ik niet en laat ik nu maar even voor wat het is.

Daarna hoef je alleen nog een zoek- en vervang-opdracht in je html uit te voeren (alleen de index.html bij ons), waarbij alle .jpg vervangen wordt door .webp en je bent klaar. Natuurlijk ga je dat wel even testen. Het kan namelijk zijn dat de oriëntatie van de illustratie is veranderd. Althans, nadat ik het mogrify-commando had uitgevoerd was daar bij twee foto's wel sprake van. Maar iedereen test natuurlijk zijn website voordat hij hem online zet.

Simpel en stom

Voor mij is het alweer een bevestiging dat het KISS principe werkt. Had ik een ingewikkelde wp-site gemaakt, dan had ik al die foto's waarschijnlijk één voor één moeten uploaden. Misschien is er een tooltje waarmee je dat op een ftp-manier kunt doen, maar dat moet je volgens mij extra aanschaffen. En bovendien zul je op al die plekken de verwijzingen naar de illustraties moeten zoeken en de extensie in de naam handmatig aanpassen. Dat zoek- en prutswerk hoef ik gelukkig niet te doen. Jeyj!

#website #kiss #imagemagick #pdf #jpg #webp

Discuss...

Omdat Bluesky een relatief nieuw medium is en ik nog op een website een vrij oude Font Awesome gebruik om deelknoppen te laten zien, kan ik geen gebruik maken van het nieuwe icoontje. Het is voor mij als luilak, te veel werk alles naar de nieuwe Font Awesome te laten refereren. Dus, dan maar iets anders verzinnen.

Er is een website waarmee je icoontjes kunt maken: iconify.

En zoals je ziet is het bluesky-icoontje hier al netjes klaargemaakt. Het mooie is dat je hiermee ook code kunt genereren die je simpel in je eigen website kunt kopiëren. Dat spreekt mij natuurlijk wel aan. Ik heb een paar minimale aanpassingen moeten doen, en het werkt gewoon. Dit is de gekopieerde code voor de website:

/* Bluesky icoontje*/
.fa-bluesky{
height: 20px;
width: 20px;
background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik0xMiAxMC44Yy0xLjA4Ny0yLjExNC00LjA0Ni02LjA1My02Ljc5OC03Ljk5NUMyLjU2Ni45NDQgMS41NjEgMS4yNjYuOTAyIDEuNTY1Qy4xMzkgMS45MDggMCAzLjA4IDAgMy43NjhjMCAuNjkuMzc4IDUuNjUuNjI0IDYuNDc5Yy44MTUgMi43MzYgMy43MTMgMy42NiA2LjM4MyAzLjM2NHEuMjA0LS4wMy40MTUtLjA1NnEtLjIwNy4wMzMtLjQxNS4wNTZjLTMuOTEyLjU4LTcuMzg3IDIuMDA1LTIuODMgNy4wNzhjNS4wMTMgNS4xOSA2Ljg3LTEuMTEzIDcuODIzLTQuMzA4Yy45NTMgMy4xOTUgMi4wNSA5LjI3MSA3LjczMyA0LjMwOGM0LjI2Ny00LjMwOCAxLjE3Mi02LjQ5OC0yLjc0LTcuMDc4YTkgOSAwIDAgMS0uNDE1LS4wNTZxLjIxLjAyNi40MTUuMDU2YzIuNjcuMjk3IDUuNTY4LS42MjggNi4zODMtMy4zNjRjLjI0Ni0uODI4LjYyNC01Ljc5LjYyNC02LjQ3OGMwLS42OS0uMTM5LTEuODYxLS45MDItMi4yMDZjLS42NTktLjI5OC0xLjY2NC0uNjItNC4zIDEuMjRDMTYuMDQ2IDQuNzQ4IDEzLjA4NyA4LjY4NyAxMiAxMC44Ii8+PC9zdmc+");
}

Awesome deception

Deze code maakt dus het icoontje aan, zodat het verderop gebruikt kan worden onder de misleidende naam: fa-bluesky. 🕶 Voor de grootte en breedte heb ik hier 20px genomen, omdat de standaard van 1em het Bluesky-icoontje wel erg dominant-groot tegenover de andere icoontjes maakt. En dat willen we natuurlijk niet. De URL die onder het knopje moet, vind je op een informatiepagina van Bluesky. En uiteindelijk staat het er als volgt genoteerd:

<a href="https://bsky.app/intent/compose?text=Voor%20ontspanning%20en%20vermindering%20van%20pijn%20en%20stress%3A%20Kanta%20Thaise%20Massage%20https%3A%2F%2Fkantamassage.nl"><i class="fa fa-bluesky w3-hover-opacity"></i></a>

En mocht je benieuwd zijn welke website het betreft: kantamassage.nl.

#internet #bluesky #website #fontawesome

Discuss...

Zoals in een vorig blogje gesteld: als je iemand iets interessants wil laten zien kun je in plaats van een link naar de website te sturen, ervoor kiezen om een link direct naar het hoofdstukje te sturen. Maar ik zie nu dat het nòg gemakkelijker kan: je stuurt een link naar het geselecteerd stukje tekst op die website.

Selecteren maar!

Hiervoor is sinds kort een mogelijkheid uitgevonden: “text fragments”. In de link die je maakt naar de tekst zet je dan #:~:text=. En achter het =teken vul je de tekst in die je op de website geselecteerd wil zien. Deze tekst moet wel volgens de url-conventies werken en dus url-encoded zijn. Er zijn online veel hulpmiddelen die je helpen bij het maken van deze url-encoded tekst. Laten we een voorbeeld maken. We proberen de eerste zin van het artikel “Link meteen door naar dat interessante hoofdstuk” te selecteren:

Stel je voor dat je een artikel op internet gelezen hebt dat je met iemand wil delen.

Eerst de gewone url naar de website noteren.

https://mistynotes.nl/link-meteen-door-naar-dat-interessante-hoofdstuk.

Daarachter dus

#:~:text=

en daar weer achter de te selecteren tekst van die website, url-encoded.

Stel%20je%20voor%20dat%20je%20een%20artikel%20op%20internet%20gelezen%20hebt%20dat%20je%20met%20iemand%20wil%20delen.

Samen dus:

https://mistynotes.nl/link-meteen-door-naar-dat-interessante-hoofdstuk/#:~:text=Stel%20je%20voor%20dat%20je%20een%20artikel%20op%20internet%20gelezen%20hebt%20dat%20je%20met%20iemand%20wil%20delen

En als link: “kijk eens naar dit stukje tekst!“

Van begin tot eind

Het gebruik van tekst-fragmenten biedt nog extra mogelijkheden. Als je bijvoorbeeld een groot stuk tekst wil selecteren, dan is het vervelend om die hele tekst in de url te zetten. Je kunt dan het begin van de tekst en het eind van de tekst weergeven, gescheiden door een komma. De tekst ertussen wordt er dan automatisch bij gezocht. Dus het voorbeeldje hierboven kan wel korter.

https://mistynotes.nl/link-meteen-door-naar-dat-interessante-hoofdstuk/#:~:text=Stel%20je%20voor%20dat,delen.

En als link: “Kijk eens naar dit stukje tekst!

Maar, welke dan?

Nu kan het zijn dat je naar een website refereert met heel veel tekst. En laat nou in die tekst een zinnetje of woord dat je wil selecteren drie keer voorkomen, en je wilt alleen de derde selecteren. Dan kun je die onderscheiden door de tekst die voor en achter de selectie komt mee te geven. Ook weer gescheiden door komma's. Tekst die vóór de selectie komt (prefix) krijgt op het eind een streepje. En de tekst die na de selectie komt (suffix), krijgt aan het begin een streepje. Als ik bijvoorbeeld naar het woordje ov-chipkaart wil verwijzen in het artikel, dan zie je dat dit woordje vaker voorkomt. De context van de derde keer dat dit woord voorkomt is:

De naam van het id: “Ov-chipkaart” plak je dan aan de url met een hekje (#) ertussen.

We kunnen hier nu aan refereren door id: en plak te gebruiken als prefix en suffix: id:-,“Ov-chipkaart”,-plak dan wordt de url:

https://mistynotes.nl/link-meteen-door-naar-dat-interessante-hoofdstuk/#:~:text=id:-,“Ov-chipkaart”,-plak

Dus: “Kijk eens naar het derde woordje ov-chipkaart” op de website!

Er zijn nog wel meer mogelijkheden met deze tekstfragmenten, zoals meerdere stukken tekst selecteren, en de kleur en stijl van de selectie bepalen. Bekijk ze maar eens. Sommige zijn echter bedoeld voor de mensen die de websites maken.

Blits

Toegegeven, voor de ontvanger van jouw link is het dan wel een stuk gemakkelijker, het samenstellen van de link is wel wat werk. Dus het is altijd wel even afwegen of je het ervoor over hebt, om even de blits te maken met een geselecteerde tekst in een link.

#internet #links #website

Discuss...

Stel je voor dat je een artikel op internet gelezen hebt dat je met iemand wil delen. Met name van een bepaald gedeelte uit dat lange artikel vermoed je dat je vriend of vriendin dat interessant gaat vinden. De voor de hand liggende manier om je artikel te delen, is de url naar je kennis sturen, en hem vertellen welk hoofdstukje daarin interessant is. Maar soms is het mogelijk om de link zo aan te passen dat die meteen naar dat interessante hoofdstukje wijst.

Gekraakt

In Wikipedia bijvoorbeeld, vind je een artikel dat vermeldt dat pc-active de ov-chipkaart kraakte. Van dat gegeven weet je dat je vriend dat reuze interessant vindt, en je wil dat graag delen. De url van de pagina vind je bovenaan in de url-balk van je browser. De url in dit geval is: https://nl.wikipedia.org/wiki/PC-Active

Inspectie

Als je deze url als link gebruikt en aanklikt kom je dus terecht aan het begin van de pagina op de website. Maar als je naar het hoofdstuk wil verwijzen dat over de Ov-chipkaart gaat, moet je even snel kijken of dat kopje in de browser voorzien is van een “id”. Dat kun je doen door er met de rechtermuisknop op te drukken en “inspecteren” te kiezen.

Hier zie je dan dat er inderdaad een id bestaat voor deze paragraaf.

De naam van het id: “Ov-chipkaart” plak je dan aan de url met een hekje (#) ertussen. https://nl.wikipedia.org/wiki/PC-Active#Ov-chipkaart

Klaar! Deze url kopieer je dan en stuur je in de mail naar je vriend, of in een bericht op social media. Zo wordt de url beschikbaar als link naar precies die paragraaf die je wilt laten zien.

Helaas hebben niet alle paragraafkopjes op internet een id. Maar als er wel een id beschikbaar is (en dat heb je snel gecheckt), dan doe je je vriend een groot plezier door hem minder te laten zoeken en scrollen naar de plek die jij bedoelt.

Dus: “toets een hekje” om direct doorverbonden te worden naar de juiste plek.

#website #internet

Discuss...

Het leven wordt duurder, en we proberen op alle mogelijke manieren dubbeltjes en kwartjes tot aan hele euro's te besparen. Ook in het digitale leven gaan de prijzen omhoog. Over een paar weken is het 1 januari, en misschien wordt 2023 wel een schrikjaar. Met de digitale gereedschappen die er op vandaag zijn, is het maken en publiceren van een website steeds eenvoudiger. Maar is het ook goedkoper? Dat valt te bezien.

Als je een website moet maken die als voornaamste doel heeft jezelf of je bedrijf te presenteren, dan is het niet nodig een uitgebreid Content Management Systeem (CMS) te gebruiken. Wel natuurlijk als je in de toekomst grotere plannen hebt met de website, zoals het presenteren van een winkel met producten en het toelaten van meerdere gebruikers die op je website in kunnen loggen en de inhoud moeten kunnen veranderen. Voor een massagepraktijk bijvoorbeeld, is het vooral van belang om je op het web te presenteren, je contactgegevens bekend te maken en eventueel de tarieven die je voor de diensten in rekening wil brengen. Met deze website als voorbeeld laat ik zien hoe het goedkoop en niet al te moeilijk kan.

Domein registreren.

Allereerst zul je een naam op internet moeten hanteren. Als je al een bedrijf hebt, hoef je hierover niet lang na te denken. Om die naam op internet te kunnen gebruiken moet je een zogenaamd domein registreren. In ons geval is dat “kantamassage”. Je kunt er “kantamassage.com” van maken of “kantamassage.nl”. De meeste mensen in Nederland zijn gewend aan het .nl suffix. Dus daar gaan we voor. Je kunt eventueel ook andere suffixen, of domeinnamen die heel erg op je bedrijfsnaam lijken, registreren. Dit om te voorkomen dat iemand anders zich die domeinen gaat toe-eigenen en zich gaat voordoen als jouw bedrijf. Er zijn veel bedrijven die je hiermee willen helpen, bijvoorbeeld namecheap, godaddy ,mijndomein, strato, hostinger, kies er een die je het meest bevalt, de prijzen zullen elkaar niet zo heel veel ontlopen.

Ping ping

Je hebt het domein gekocht, wat heb je dan? Alleen een domeinnaam? Je domeinprovider heeft ook een uniek nummer op internet voor jou gereserveerd: een ip-adres. Zo'n ip-adres is uiteindelijk het adres van een machine waar een browser gaat zoeken of daar iets te vinden is om je te tonen. Voor kantamassage is dat bijvoorbeeld 34.249.138.199. Maar is daar dan iets te vinden? Helaas niet, want we hebben alleen een domeinnaam gekocht, en geen ruimte op een computer dat te benaderen is op het internet, en waar je bestanden op kunt zetten die een browser dan zal tonen. Die ruimte kun je in de meeste gevallen wel bijkopen bij het bedrijf waar je de naam hebt geregistreerd. Dat betekent echter wel dat je tien keer zoveel te betalen hebt als voor je domeinregistratie. Voor dat geld heb je die websiteruimte met een versleutelde https verbinding (het slotje in de adresbalk). Maar we willen alles toch goedkoop houden? Ondanks dat we ook nog alles simpel willen houden, moeten we toch wat extra doen om gratis ruimte en een gratis https-slotje te scoren.

Github

Er zijn plekken waar je wel gratis je bestanden neer kunt zetten zodat ze via internet te benaderen zijn. Zoek eens op “free hosting” in een zoekmachine. Hostinger of 000webhost bieden bijvoorbeeld een gratis pakket aan. Je hebt daar zelfs uitgebreidere mogelijkheden met website-builders of met Wordpress. Er bestaat echter ook een speciale plek die oorspronkelijk is gebouwd om open-source software op te bewaren en om het mogelijk te maken met meerdere mensen aan hetzelfde programma te kunnen werken: Github. Die historie is voor ons niet zo belangrijk. Wat ik zelf wel belangrijk vind, is dat deze plek meer garantie biedt voor een goede en snelle werking van je website. Bij 000webhost bijvoorbeeld, is je gratis website erg traag, en op sommige tijden van de dag gewoon niet bereikbaar. Op Github zul je dat niet echt meemaken, is mijn verwachting.

Niets installeren

Maar hoe zet je website-bestanden op Github? Je maakt dan gebruik van Github Pages, dat speciaal voor webpagina's bedoeld is. Allereerst maak je een account aan op Github. Daarna maak je een zogenaamde repository aan waarvan de naam de volgende structuur heeft: accountnaam.github.io. Dat is stap 1 op deze instructiepagina. Anders dan op deze pagina wordt voorgesteld, kun je het af zonder nieuwe git-software te installeren. Git is een versiebeheersysteem, en je zult dat een beetje moeten leren voor je er mee kunt werken. Gelukkig is dat niet nodig en hoef je de vervolgstappen op deze instructiepagina niet te volgen. Ik heb deze software niet op mijn computer gezet en toch heb ik de bestanden er neer kunnen zetten. Dat kun je namelijk eenvoudig doen door te navigeren naar je repository die je net hebt aangemaakt, en gewoon op de knop Add file te klikken en daarna op Upload files. Geef een omschrijving bij het uploaden (git is per slot een versiebeheer systeem en houdt alle veranderingen bij), en bevestig je keuze. De bestanden staan nu op je Github-page, en zijn benaderbaar door in de browser accountnaam.github.io te typen! In ons geval is dat kantamassage.github.io.

De website maken

Hoe heb ik die bestanden dan aangemaakt die ik op Github gezet heb? De website heb ik vrij snel gemaakt met behulp van het parallax template op w3schools. Eigenlijk is het al genoeg om de broncode van dit template te kopiëren en op je computer als index.html te bewaren. Daarna kun je zelf de tekst, kleuren en foto's aanpassen. Maar je kunt het natuurlijk ook op de w3schools-manier doen.

Https

We hebben dus een website op Github en we hebben een domeinnaam. Nu moeten we ervoor zorgen dat als je "https://kantamassage.nl" in je browser typt, je ook terecht komt op Github. Dat kan met een ander bedrijf: Cloudflare. Dat is een bedrijf dat veel diensten aanbiedt die te maken hebben met websites en het beheer ervan. De meeste diensten gaan over het sneller en veiliger maken van je website. Ook hier maak je een account aan. Daarna kun je meteen een website toevoegen. Kies dan op de volgende pagina voor het gratis abonnement. Vervolgens worden alle gegevens over je domein ingelezen. Die kun je vergelijken met de gegevens die bij je provider van je domeinnaam (registrar) vindt. Dit gaat over de zogenaamde DNS-instellingen. In wezen is het de inhoud van een databaserecord waarin staat naar welk ip-adres de browser moet kijken als je een domeinnaam intypt. Een soort woordenboek, of beter nog een telefoonboek van namen en nummers. Daarna komt een belangrijke stap. Die gaat dan niet automatisch, want je moet bij je registrar iets veranderen: de computers die deze dns-database bijhouden: de nameservers. Daar moeten in plaats van de nameservers van de registrar die er nu staan, de namen van de nameservers van Cloudflare komen te staan. In ons geval is dat arnold.ns.cloudflare.com en demi.nl.cloudflare.com. Als je dat gedaan hebt kun je bevestigen dat je dat gedaan hebt door op de knop "Done, check nameservers" te klikken. Bij de paar stappen die daarna volgen kun je je gewoon bij de standaard waarden houden. En daarna is het wachten tot Cloudflare vindt dat het goed is.

Ping

Ondertussen kunnen we nog eens kijken naar de Github-pages. Want wat we later gaan doen, is vertellen tegen die nameservers van Cloudflare dat hij voor het domein niet meer naar het oorspronkelijk ip-adres (dat was in ons voorbeeld 34.249.138.199) moet wijzen, maar naar het ip-adres van de Github-pages. Maar wat is dat ip-adres van Github dan? En Github heeft veel pages, hoe weet Github welk van de pages getoond moet worden als Cloudflare de browser volgens onze opdracht naar Githubs ip-adres stuurt? Eerst maar eens het ip-adres opzoeken. In deze documentatie vind je zelfs een viertal nummers.

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Dan toch maar eens pingen naar kantamassage.github.io. Kennelijk is het ip adres dan 185.199.110.153

Cname

Onze tweede vraag was: hoe weet Github dat de vraag van de browser voor kantamassage.nl naar kantamassage.github.io moet wijzen en niet naar bijvoorbeeld blabla.github.io? Daarvoor is het nodig dat je nog wat informatie toevoegt aan Github Pages, namelijk de naam van het binnenkomende domein: kantamassage.nl. Onder menu-tem Settings->Pages vind je het kopje Custom Domain.

Als je hier de naam invult, wordt een bestandje met de naam CNAME aangemaakt in de root van je repository. De inhoud van het bestandje bevat de naam die je hebt ingevuld: “kantamassage.nl”. Zo wordt kantamassage.nl niet alleen aan het ip adres van github.io (185.199.110.153) gekoppeld, maar ook aan het subdomein kantamassage op github.io (kantamassage.github.io).

Nu weer terug naar Cloudflare. Als de nameservers goed staan, en in Cloudflare krijg je de melding dat het ok is, dan kun je eindelijk de verwijzing naar Github in de dns zetten:

De ipnummers voor de AAAA-records (ipv6) kun je ook met ping vinden, maar dan met ping -6 domeinnaam. Probeer het eens uit en verbaas je erover dat je een https-website hebt voor weinig geld!

“Verwijsbrief”

Je hebt nu voor ongeveer 10 euro per jaar ( de prijs van de domeinregistratie) een https-website online. Als je meer domeinen hebt geregistreerd, bijvoorbeeld kantamassage.com dan kun je die laten doorverwijzen naar kantamassage.nl bij je registrar, door het aanmaken van een 301 redirect. Dat is meestal een kwestie van een paar klikken en de domeinnaam in vullen.

Nieuw

Voor mij was het allemaal betrekkelijk nieuw, deze manier van website-beheer, en ik heb ook wel zitten stoeien met die ip-adressen van Github. Daarom heb ik het ook allemaal nog eens goed opgeschreven en kan ik het hier delen. Maar het kan zijn dat sommige dingen ook wel beter kunnen. Ik zag bijvoorbeeld een soort van “Pages”-mogelijkheid bij Cloudflare. Dat is waarschijnlijk nog makkelijker, ik weet alleen niet of dat ook gratis is. Ik heb er in ieder geval wel van geleerd, en laat het me gerust weten wanneer het nog beter of makkelijker kan.

#website #internet #domein #https #gratis

Discuss...

Een beetje clickbait mag wel af en toe. Het gaat hier niet om een miljardair die denkt dat ie de aarde kan verlaten, nadat hij haar vervuild en uitgemergeld heeft. Het gaat om w3schools. Als je ooit de letters html naast elkaar hebt zien staan, dan is de kans groot dat je ook w3schools hebt gezien. Google maar eens op html image, of alleen maar op html. W3schools staat dan op de eerste pagina, als het al niet het eerste zoekresultaat is. Twintig jaar geleden al, was het een vraagbaak voor mensen die iets met internet te maken hadden. Je kunt het antwoord op je vraag vaak heel snel vinden op de site, en wat ook belangrijk is: er staat geen letter te veel in de uitleg. Je hoeft dan niet een hele pagina door te worstelen voordat je hebt waar je voor gekomen bent.

Verrassend

Toen ik laatst op de site kwam, zag ik een reclame-banner met de aankondiging dat er nu ook “w3-spaces” zijn. Dat is dan internetruimte voor een website. Ik vroeg me dan ook meteen af, waar dat dan nou voor nodig is. Hebben we niet Wix, Weebly, Google-Sites, of zelfs WordPress? Ik heb de nieuwe mogelijkheid uitgeprobeerd, en er zijn wel verschillen aan te wijzen. Of je daar gelukkig mee bent is een tweede.

Leren

W3schools is in de eerste plaats opgezet om een leerplaats te bieden voor internet-bouwers. Bij het aanprijzen van spaces zie je dan ook termen als “playground”, “experiments” en “code”. Dus een drag- en drop-gereedschap, zoals bij Weebly, of Google Sites hoef je niet te verwachten. Van een woud van menu-opties zoals bij WordPress is ook geen sprake. Je maakt een website aan de hand van een voorgekookt voorbeeld. Dat voorbeeld, een template, heb je snel gevonden door te kijken op hun template-keuze site. Hier kun je ze ook vinden. Alle bestanden die nodig zijn voor dit voorbeeld worden dan op je “space” gezet. Dan kun je aan de slag.

Dummy

Dat heb ik uitgeprobeerd door een “dummy”-site aan te maken. Samengevat komt het erop neer dat je je eigen tekst en foto's tussen de html-code van het voorbeeld zet. Je vervangt dan als het ware de tekst en de foto's van het voorbeeld. Het gekozen ontwerp dat je mooi genoeg hebt gevonden, blijft dan onaangetast. Je moet wel enig begrip hebben van html en ook een beetje van hoe css werkt. Dat helpt om de plekken te vinden waar je iets moet veranderen. Vaak moet je ook iets weghalen door de code tussen <!-- en --> te zetten.

Snel klaar

Hoe gaat het in zijn werk? Natuurlijk zul je eerst een account aan moeten maken. Dat gaat precies zoals je verwacht: een email-adres en wachtwoord invoeren, en het emailadres bevestigen. Als je op je nieuwe werkomgeving dan kiest voor de “Create a space” knop dan kun je meteen een template uitzoeken. Ik heb een eenvoudig template, het parallax template, uitgekozen voor mijn testje. Vervolgens kun je je eigen tekst gewoon met knippen en plakken tussen de <p> en </p> tags zetten, terwijl je de originele tekst vervangt. Vergeet dan ook niet de <title> te vervangen. Foto's kun je “uploaden” door op de “upload”-knop te drukken. Vervolgens vervang je de originele namen van illustraties op de site door deze nieuwe, vers omhoog gehaalde bestanden. Je kunt telkens in een “preview” bekijken of het resultaat je aanstaat. Sommige delen van de site hoeven niet van toepassing te zijn op je situatie. In mijn voorbeeld is dat ook het geval, en die delen heb ik dan ook weggehaald. Klaar! Dat is snel! Hoeft maar een uurtje of twee te duren.

Code completion

Met deze werkzaamheden heb je het grafische ontwerp intact gelaten. Je kunt echter ook in het ontwerp, de kleuren, de grootte van de objecten, of de uitlijning, heel veel veranderen. De editor helpt je daarbij. Je moet je voorstellen dat de w3schools-templates opgebouwd zijn met een mooi uitgedacht systeem van css-klassen. Het doet ook wel denken aan het systeem van bootstrap dat je goed kunt gebruiken voor sites die “responsive” moeten zijn, dus goed moeten reageren op pc of mobiel apparaat. Mocht je het zelf uitproberen, verander dan eens de naam van een “class”. Je ziet dan een lijstje in de editor verschijnen van mogelijke klassen die je kunt gebruiken. De naamgeving is over het algemeen goed gekozen, en als je er langer mee werkt zul je vast goed weten wat die klassen doen.

Statisch

De website die je zo hebt gemaakt is statisch. Dat wil zeggen dat ze niet verandert naar aanleiding van input van de bezoeker, of van gegevens die de site ergens anders vandaan haalt. Dat maakt dit wel geschikt voor een presentatie-website voor een klein bedrijf of voor jou als persoon. In de toekomst is het hier ook mogelijk een werkend formulier in de site te zetten, zonder dat je daarvoor aan de serverkant moeilijke php-dingen hoeft te doen. Zo'n formulier zie je inderdaad ook vaak op sites voor bedrijven om klanten de mogelijkheid te geven makkelijk een vraag te stellen. Voorlopig kun je hier met een email-adres wel vooruit. Waar deze spaces niet zo voor geschikt zijn, is bloggen, vind ik. Om één keer tussen die p-tags tekst te kopieren is wel te doen, maar iedere keer als je iets nieuws schrijft lijkt me dat wel overdreven.

Beperkingen

Als je van template wil wisselen, zoals dat bij andere websitebuilders mogelijk is, dan kan dat niet snel. Je moet dan een nieuwe space aanmaken, die natuurlijk niet dezelfde naam kan hebben. Als je de oude space verwijdert, omdat je gratis account maar één space toelaat, duurt het een maand voordat je de naam weer kunt gebruiken. Maar als je daarop niet kunt wachten, dan is het mogelijk alle bestanden van je space te wissen, een andere space aan te maken (ook een nieuw account met een ander emailadres als je het gratis wil houden), daar de bestanden van de template op terecht laten komen, en ze vervolgens op de oude space neerzetten. Nou, dat kan wel makkelijker. Een andere beperking die vooral bij de gratis versie geldt, is de lage verkeerslimiet van 100 MB per maand.

Export en import

W3spaces heeft vooralsnog geen export- of importmogelijkheid. Voor import kun je de upload-knop gebruiken, met de kans dat je rsi-symptomen krijgt. FTP is voor zover ik kan zien nog niet mogelijk. Exporteren kan helemaal niet, dus dat zou je ook handmatig kunnen doen door elke file in de browser op te roepen en te downloaden. Makkelijker is het om wget te gebruiken. Met wget -r -np -k https://snappie.w3spaces.com kreeg ik alle gebruikte bestanden op mijn pc. Bovendien was daarna een dubbelklik op het index.html bestand voldoende om de website lokaal te kunnen bekijken. In principe kun je de bestanden dus ook op een andere plek op internet neerzetten. Overigens heb ik op mijn Windows machine WSL moeten gebruiken om dat voor elkaar te krijgen. Maar er zijn vast andere goede manieren om het op Windows te exporteren.

Voor wie?

Het blijft voor mij een vraag die maar blijft hangen. Voor wie zou deze bouwomgeving bedoeld zijn. Is het alleen maar als playground bedoeld, of ook voor serieus werk? Je kunt de templates en css-klassen nu al gratis in je code gebruiken, al moet je dan net iets meer werk verrichten. Drie euro per maand is niet echt heel veel, maar je moet het wel steeds betalen, en je komt er dan ook niet vanaf. Of wel? Het is mogelijk om alle bestanden die je daar hebt staan op een andere site te zetten. Je hebt de space dan niet meer nodig. Tot ziens, en met dank aan de handige editor. Je zou er inderdaad tien websites op kunnen maken voor een aantal klanten, en die daar dan op laten staan. Het is absoluut niet handig om een gratis account voor zo iets te gebruiken, aangezien er een heel lage verkeerslimiet van 100 MB per maand geldt. Met een paar dikke foto's zit je daar al snel overheen. Bij mij was de limiet in ieder geval al na een dag bereikt.

With a Free plan you get 100 MB data a month. Since you have reached this limit, we have temporarily closed your space for public access. Your space will be opened again when your next subscription period starts, Sep 26, 2021. To get more data, upgrade your plan.

Nu heb ik inderdaad ook in de haast niet netjes naar de grootte van de foto's gekeken. Maar toch. Gelukkig heb ik de bestanden vóór deze melding al naar mijn computer gehaald, en neergezet op een andere gratis site, waarvan de gratis versie traag en onbetrouwbaar is, maar voor nul euro is dat natuurlijk ok.

Een buil

Spaces is een aardig initiatief van w3schools, en ik zie het dan maar meer als een speeltuin, dan een serieus hosting alternatief. Maar je weet nooit. De editor is handig, drie euro is niet zo heel duur, de gebruikte templates zijn wel goed uitgedacht en getest. Dus een echte buil kun je je er ook niet aan vallen. Bovendien is deze 'code'-manier flexibeler, en loopt niet zo snel tegen de grenzen aan, die de werking van de meer grafisch ingestelde drag- en drop omgevingen wel beperken.

#website #w3schools #css #free #domein #gratis #internet #hack

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

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

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

Veel mensen zullen het erg overdreven vinden, maar ik gebruik voor mijn internetverkeer altijd een VPN. Het gebruik van de VPN is niet zo heel duur meer en het kost me eigenlijk ook niet veel moeite. Het wordt bij het opstarten van de computer geactiveerd, en ik merk er niets van als ik op internet ben, of de mail ophaal. Nu “onderhoud” ik een paar websites waar enkele duizenden bezoekers per maand komen. “Onderhoud” staat tussen aanhalingstekens, omdat de sites erg statisch zijn: alleen heel af en toe pas ik er iets aan. Het is ook daarom dat ik er pas laat achter kwam dat één van de sites erg langzaam is, en zelfs een melding krijgt: “The connection has timed out”.

The connection has timed out

The server (...) is taking too long to respond.

- The site could be temporarily unavailable or too busy. Try again in a few moments.
- If you are unable to load any pages, check your computer’s network connection.
- If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the Web.

Of je krijgt een responstijd van over de 2 minuten. Dat kun je zien als je de wonderknop F12 indrukt voordat je de website in je browser laadt.

Firefox laat het hier afweten met een “connection time out” en Chrome lukt het uiteindelijk na meer dan twee minuten de site in te laden. Je ziet hier ook dat de lange tijd niet besteed wordt aan het laden van de bestanden, maar om verbinding te krijgen met de server om het “document” op te halen. Dus om gewoon antwoord te krijgen.

Loslaten

Het duurde ook een tijdje voordat ik er achter kwam, dat de site wel snel is, als ik de VPN uitschakelde. Dat was wel een opluchting. Natuurlijk kun je via testwebsites een beter beeld krijgen, maar de eerste test is meestal vanaf je eigen computer. Toch vond ik het een vreemd fenomeen, want bij geen enkele andere website ervaar ik dit probleem. Daarom heb ik alle files van de server naar een ander plaats op internet gekopieerd. Mijn ruimte voor een homepage bij xs4all. Het laden vanaf die plek gaat probleemloos en soepel, ook met de VPN ertussen. Het verschil is natuurlijk de domeinnaam en de fysieke server. Zou het aan de naam kunnen liggen? Het verwerken van de domeinnaam naar een ip-adres via nameservers? Die vraag loslaten is moeilijk, als ik niet precies weet waardoor dit komt. Ook al zullen weinig mensen gebruik maken van een VPN. Ik stel daarom een vraag aan mijn hostingprovider, en een aan mijn VPN-provider. Ik verwacht natuurlijk een “kastje-muur” situatie.

Amsterdam Parijs Londen

Van de VPN support kreeg ik meteen een mail terug met de vraag om meerdere VPN-servers te proberen. Je kunt namelijk kiezen via welke VPN-server je het internet op gaat. Wat bleek? De VPN-servers in Nederland konden de site niet laden. Ik probeerde er drie in Amsterdam. In andere landen ging dat prima. Dan beperken de problemen zich dus tot de personen met dezelfde VPN-provider die servers in Amsterdam gebruiken. Misschien is dat er maar een. Ikzelf. Maar mijn vervolgvraag was, wat daaraan te doen? Alles moet natuurlijk goed werken. Maar...

Thanks for the information. All these three sites are using different hosting providers, and that's probably where the problem lies. Some providers are getting picked up by filters as VPN services which can be blocked. I don't think there's anything we can do to fix that i'm afraid.

Tja, toch een soort van “het ligt niet aan ons, maar aan hullie”. Zou mijn domeinprovider dat wel leuk vinden, dat sites van klanten eruit gefilterd worden, als een gebruiker een VPN gebruikt? Of ontzettend vertraagd worden? Ik vind het maar raar. Filters vertragen niet volgens mij, die zeggen alleen maar “Ja gaat u gerust verder” of “Nee, u wordt bij deze geblokkeerd”. De VPN-medewerker erkent dat inderdaad, en adviseert mij gewoon een andere server op te zoeken.

Yes that would of course be the easiest for us to trouble shoot. It might not be a filter, it could just be a case of bad or weird routing between some servers. Hopefully you find some server which has a good connection and also works with your website.

Hmmm. Een andere server dus. Daar zat ik trouwens ook wel al aan te denken. Dan bedoel ik niet een andere VPN-server, maar een andere webserver, omdat tijdens mijn kleine test bleek dat het gratis plekje van xs4all bijna twee keer zo snel is als de server waar ik ieder jaar zeventig euro voor betaal. Allez, zeventig euro is low budget, maar dat mag zich toch niet in laten halen door een gratis alternatief.

Helder

Nog even wachten op het antwoord van de hostingprovider. Support kan drie dagen duren, voor zo'n goedkoop abonnement. Ja, alle begrip voor. Had ik maar mijn portemonnaie moeten trekken. Gelukkig is het geen acuut probleem. En jawel, support komt binnen een dag met deze geweldige constatering.

Specifiek op basis van deze opmerking heb ik het idee dat het zonder VPN wel correct gaat, als dat zo is zorgt er iets in de VPN voor een probleem.
Mocht je nog vragen hebben dan verneem ik het graag van je!

Dat is wel een helder antwoord. Tenminste in de zin van hoe de kwaliteit van de support eruitziet. Want dit is wel heel gemakzuchtig voorbijgaan aan mijn constatering dat alleen de site op hun server niet goed functioneert via de VPN. Goed dat dat nu duidelijk is. Bij een acuut probleem kun je dit soort “ondersteuning” niet hebben.

Nu kan ik er natuurlijk zelf helemaal induiken en onderzoek doen met bijvoorbeeld een terminalcommando als traceroute, (dat je trouwens ook nog vooraf even moet installeren). Maar het weer is wat draaglijker geworden en buiten lonkt. Ik ben bang dat ik het probleem toch ga loslaten, ik zet het kastje tegen de muur en volg het “advies” van de VPN-provider op. Verhuizen naar een andere webserver, en daarmee hopelijk een support, die een beetje mee wil denken.

#vpn #website #mullvad #mijndomein