Misschien een beetje een verwarrende titel. Even uiteenzetten, want dan begrijp je beter waar ik het over heb. Voor mensen die een Gmail adres hebben, zullen vast wel bekend zijn met de volle inbox. En dan met name de reclame mails en updates van allerlei diensten (track en trace code mailtjes en bestellingsbevestigingen). Stel nu, dat je net zoals ik, meestal niet meteen die mailtjes wil weggooien of archiveren. En het dan vergeet, of de moeite niet neemt om het op te ruimen...

Dus, KADOOTJE VAN DE SINT omdat het vandaag 5 december is (link naar mijn oplossing onderin deze blogpost 🎁)

Volle inboxmeldingen

Na een aantal jaar heeft ook Google wel genoeg van al die mails van je die je maar 'bewaard'. Dus kreeg ik meldingen dat mijn inbox toch echt wel een beetje heel vol zat. Nu ben ik een beetje een luie ITer, en was nog maar net begonnen om handmatig op te gaan ruimen, of ik had er alweer genoeg van.

Dat kan makkelijker

Ik dacht, dit moet toch makkelijker kunnen? Ik wil in feite prima van oude mailtjes af, maar zoals ik al zei, die online shopping bestellingen en de mailtjes ervan zijn toch meestal nog wel handig wanneer het op een retour aan komt. Dus die van afgelopen maand wil ik nog wel houden. Alles van daarvoor kan in principe wel weg. Gelukkig heb ik al een tijdje geleden in Gmail aangezet dat ik aparte categorieën voor bepaalde mailtjes wil hebben, en heb Gmail inmiddels wel kunnen trainen welke mailtjes reclame zijn, welke updates (dus bestellingen/track+trace/etc.) zijn en welke gewoon netjes in mijn Postvak In moeten komen.

Dit en de zoekfunctie in Gmail maken het best eenvoudig om een goede selectie te krijgen van de mailtjes die wel weg kunnen. Daarna klik ik op alles selecteren en gooi het weg.

Opgeruimd staat netjes

Zo, alles eens even goed opgeruimd in mijn mailbox. En dat fijne opgeruimde gevoel was helaas maar voor korte duur. De nieuwe reclame mailtjes en updates kwamen alweer binnen. Dat was het moment dat ik dacht, dit wil ik niet iedere dag/maand gaan doen, of iedere x jaar op het moment dat het te vol zit.

Is dit te automatiseren?

Ik ben wat gaan Googlen want ik hou niet van repetitieve handelingen die een computer prima zelf kan zolang ik de juiste instructies en randvoorwaarden stel.

Gelukkig is er tegenwoordig Google Script (https://script.google.com)! 👌🎉

Je kan er zelf een script maken, en door je functie in het script daarna aan een trigger te hangen, het automatisch periodiek laten uitvoeren!

Super chill, dit is wat ik zocht. Ik heb een script gemaakt voor elke verschillende inbox, want reclame mag best maandelijks en tot een maand terug worden opgeschoond, maar de updates van bestellingen vind ik wel prima als die maandelijks tot een jaar terug worden bewaard.

In het kort

1. Ga naar Gmail > Instellingen > Inbox en zet de vinkjes aan voor de categorieën.
   

2. Ga naar de zoekbalk om wat zoekopdrachten te maken die de set van mailtjes teruggeven die jij periodiek wilt opschonen.

3. Ga naar script.google.com en log in.

4. Maak een nieuw project aan.

5. Gebruik deze code bijvoorbeeld als basis:

function cleanUpReclame() {
  var delayDays = 30 // Aantal dagen waarna mails naar de vuilnisbak gaan
  var maxDate = new Date();
  maxDate.setDate(maxDate.getDate()-delayDays);
  var threads = GmailApp.search('category:promotions is:unread');
  for (var i = 0; i < threads.length; i++) {
      if (threads[i].getLastMessageDate()<maxDate)
      {
        threads[i].moveToTrash();
      }
  }
}
function cleanUpUpdates() {
  var delayDays = 364 // Aantal dagen waarna mails naar de vuilnisbak gaan
  var maxDate = new Date();
  maxDate.setDate(maxDate.getDate()-delayDays);
  var threads = GmailApp.search('category:updates');
  for (var i = 0; i < threads.length; i++) {
      if (threads[i].getLastMessageDate()<maxDate)
      {
        threads[i].moveToTrash();
      }
  }
}

function cleanUpForums() {
  var delayDays = 364 // Aantal dagen waarna mails naar de vuilnisbak gaan
  var maxDate = new Date();
  maxDate.setDate(maxDate.getDate()-delayDays);
  var threads = GmailApp.search('category:forums');
  for (var i = 0; i < threads.length; i++) {
      if (threads[i].getLastMessageDate()<maxDate)
      {
        threads[i].moveToTrash();
      }
  }
}

function cleanUpSocial() {
  var delayDays = 364 // Aantal dagen waarna mails naar de vuilnisbak gaan
  var maxDate = new Date();
  maxDate.setDate(maxDate.getDate()-delayDays);
  var threads = GmailApp.search('category:social');
  for (var i = 0; i < threads.length; i++) {
      if (threads[i].getLastMessageDate()<maxDate)
      {
        threads[i].moveToTrash();
      }
  }
}

6. Maak je keuzes even bij de variabelen (delayDays en de .search('category:xxx');
Je kan namelijk de functie gewoon kopiëren zoveel je wil, even een andere naam geven bij de function declaratie, en met name de zoekopdracht bij deze regel kan je veel bereiken:

var threads = GmailApp.search('category:promotions is:unread');

Zo heb je bijvoorbeeld, en in mijn voorbeeld hier heb ik er ook bij staan: is:unread. Dit komt gewoon van de zoekopdrachten die je kan maken bij stap 2 hierboven. Zo kan je er ook nog bepaalde afzenders bij zetten etc., bijvoorbeeld:

var threads = GmailApp.search('category:promotions is:unread from:(info@email.ibood.com OR newsletter@outspot.nl');

Dit gooit alle mails van ibood OF outspot van het type reclame weg die nog niet zijn gelezen. Hier kan je dus leuke selecties maken voor bepaalde mailtjes. Vaak zijn aanbiedingen tijdelijk geldig dus ja. Als je het mailtje dan na 2 dagen nog niet hebt gelezen bijvoorbeeld, kan je het wel weggooien.

7. We zijn er bijna, nu niet vergeten de trigger in te stellen.
Wanneer je het stukje code hebt gemaakt en hebt opgeslagen kan je teruggaan naar je project en je zal je functie zien terugkomen in het overzichtje. Klik op Triggers:

Hier kan je de door jouw gekozen functienamen periodiek laten uitvoeren. Dit is het laatste en daarna ben je voorlopig klaar met je mailbox. Nou ja, wanneer het om opruimen gaat dan.

Tot slot

Omdat Google helemaal van het delen van dit soort handige dingen is tegenwoordig, hier de link om de code even makkelijk over te nemen naar je eigen account: https://script.google.com/d/1OfbhSmPbagoAaCVvhsccDssVk6L-84OBc7pa9ewt60Cs-r4nNTnp9pNJ/edit?usp=sharing

Vragen mag

Laat hieronder een reactie achter en ik zal je proberen te helpen als het niet lukt. 😎

Ben jij geen robot? Ik ook niet. Toch moet ik het keer op keer bewijzen. We kennen het vast wel inmiddels. Formulier invullen? Ik ben geen robot aanvinken. Wat mij opvalt, is dat het tegenwoordig bijna altijd tot het oplossen van een puzzel leidt. Ik krijg vrijwel nooit meer direct een groen vinkje! Was het maar een leuke bezigheid. Nee, alleen maar irritant. En het meest irritante nog wel: Je lost em op, je weet zeker dat je het goed hebt. Nee hoor, fout, doe er nog maar 1. Dat met die auto's op de foto en bussen en verkeersborden etc. Na 2 keer mag je dan toch door. Fijn hoor.

Vanuit mijn werk is het ook nog eens helemaal irritant voor onze bezoekers met een iOS apparaat. Er zit een bug in de code van reCAPTCHA v2, waarbij de pagina lekker naar beneden wordt gescrollt. Poef, daar zit je dan in de footer van de website. Succes ermee... Zo gaat je conversieratio wel naar de knoppen ja.

Deze bug bestaat al een aantal jaar, en doet zich bij verschillende versies van iOS voor. Soms is het er wel, dan weer niet, dan weer wel. Denk je dat Google er iets aan doet? Nee hoor. Je kan met wat suggesties van de github community wel wat scriptjes proberen, maar die bleken niet te helpen bij de recente versie van iOS. Hieronder een voorbeeld oplossing:

var HEADER_HEIGHT = 0; // Height of header/menu fixed if exists
var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
var grecaptchaPosition;

var isScrolledIntoView = function (elem) {
  var elemRect = elem.getBoundingClientRect();
  var isVisible = (elemRect.top - HEADER_HEIGHT >= 0 && elemRect.bottom <= window.innerHeight);

  return isVisible;
};

if (isIOS) {
  var recaptchaElements = document.querySelectorAll('.g-recaptcha');

  window.addEventListener('scroll', function () {
    Array.prototype.forEach.call(recaptchaElements, function (element) {
      if (isScrolledIntoView(element)) {
        grecaptchaPosition = document.documentElement.scrollTop || document.body.scrollTop;
      }
    });
  }, false);
}

var onReCaptchaSuccess = function () {
  if (isIOS && grecaptchaPosition !== undefined) {
    window.scrollTo(0, grecaptchaPosition);
  }
};

<div class="g-recaptcha" data-theme="light" data-type="image" data-sitekey="XXXXXX"></div>

Mocht dit nu niet je probleem verhelpen, dan is er altijd nog reCAPTCHA v3! (of invisible reCAPTCHA v2).

Deze nieuwe versie is eind Oktober 2018 uit de beta gekomen en bevat geen vinkvakjes meer en captcha challenges zoals we deze maar al te goed kennen.

Het enige wat deze versie aan irritatiefactor heeft, net als de invisble variant van versie 2, is die badge van Google die vertoont 'moet' worden. Dat staat in de gebruikersovereenkomst.

Ik snap het wel vanuit Google, maar dat ding zit op de meest irritante plekken, waar je vaak ook al andere knoppen op je site hebt gehangen. Ja, je kan het aanpassen door de badge data-badge=inline mee te geven, dat klopt, echter dat werkt alleen bij versie v2 met de invisible captcha. En die bevat nog van die puzzels/challenges.

Maar wacht, versie 3 werkt dus anders en heeft geen challenges die de gebruiker lastig vallen! AWESOME, toch? Ja, maar alleen de badge inline werkt(e) een paar weken geleden (nog) niet. Laat dat nou net die irritatie bij mij zijn haha.

Ik wil die badge gewoon inline kunnen stylen en ergens in de footer dumpen.

Nah ja, helaas. Wat wel goed is aan versie 3, is dat je dus geen reCAPTCHA challenges meer krijgt. Hoe werkt dat dan? Je draait gewoon een stukje code met een specifieke reCAPTCHA sleutel die je voor versie 3 hebt aangemaakt in de reCAPTCHA admin sectie.

Hierdoor weet Google eigenlijk al welke versie er moet worden aangeboden. En nu het vernuftige aan deze versie: Google monitort het gedrag van de bezoeker op jouw aangeven, en analyseert dit op de achtergrond. Zodra jij een validatie doet richting reCAPTCHA (dus bijvoorbeeld wanneer er op verzenden wordt geklikt bij een formulier), dan heeft Google in de tussentijd het gedrag al in de gaten gehouden en geeft een score tussen de 0 en 1 terug. Jij kan dan aangeven, als het een 0.5 of lager is, dan moet er geen formulier verzonden worden. Google weet met 0.9 eigenlijk zo goed als zeker dat het geen spam-bot is. Bij 0.3 zou je toch je moeten afvragen of dit niet een spam-bot is.

Mooi, handig, makkelijk, geen last van als gebruiker, maar wel een beetje kantje boord met privacy en het idee dat je gedragingen nog meer gemonitort worden door Google. En dat laatste maakt het een vernuftige zet van Google. Zij meer data, jij minder irritatie.

Behalve dan die BADGE! Okay, die is persoonlijk...

Goed, hoe doe je dit dan in de praktijk? De aangeleverde code is niet geweldig, en de dev-docs zijn ook nog niet helemaal op orde, maar hieronder hoe je het in werking zet:

Allereerst moet je sowieso de recaptcha api aanroepen op je pagina's:

<script src='https://www.google.com/recaptcha/api.js?render=<jouw publieke v3 recaptcha key>'></script>

Daarna moet je ervoor zorgen dat er zodra het ingeladen is, een pageview wordt doorgegeven:

<script>
  grecaptcha.ready(function() {
      grecaptcha.execute('<jouw publieke v3 recaptcha key>', {action: 'homepage'}).then(function(token) {
         ...
      });
  });
  </script>

Ik raad dan aan een action:'pageview' mee te geven op wanneer je een CMS hebt dat met templates werkt. En een 'homepage' op alleen de homepage).

Waar de drie puntjes staan, ..., kan je dan een validatie POST functie plaatsen of aanroepen wanneer het nodig is dat er gecontroleerd wordt. Dit controleren doe je om in te grijpen.

Dan denk ik dus als meest voor de hand liggende controle moment, bij het verzenden van een formulier. Dat zal ik hieronder dan nog even verder uitwerken. Waar je ook aan kan denken, is bij het klikken van een hyperlink. Nou zullen bots die niet per se een click event triggeren, maar je zou wellicht wel een trigger kunnen schrijven voor dit soort spiders, en ze daarmee blokkeren. Moet je alleen niet bij de goedaardige spiders doen die je content ranken 😉

Anyways, hier een mogelijke functie voor bij een click op de submit button:

document.getElementById("btnSubmit").addEventListener("click", function (e) {
    e = "<public key hier invullen>";
    grecaptcha.ready(function () {
        grecaptcha.execute(e, {
            action: "submit"
        }).then(function (e) {
            jQuery.ajax({
                type: "POST",
                url: "https://www.jouwdomein.nl/recaptcha-verify-v3.php?token=" + e,
                data: JSON.stringify(e),
                dataType: "json",
                success: function (e) {
                    if ("true" == e.success) {
                        var t = document.getElementsByTagName("form")[0];
                        t.setAttribute("id", t.name), document.getElementById(t.name).submit()
                    }
                },
                error: function (e, t, n) {
                    console.log(n)
                }
            })
        })
    })
});

De jQuery AJAX call post de info naar een php bestand wat je kan gebruiken om via Google een score terug te krijgen. Deze zijn gewoon te krijgen op github, en kan je gebruiken en een beetje ombouwen:

<?php
/**
 * @copyright Copyright (c) 2015, Google Inc.
 * @link      https://www.google.com/recaptcha
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
require __DIR__ . '/appengine-https.php';
// Initiate the autoloader. The file should be generated by Composer.
// You will provide your own autoloader or require the files directly if you did
// not install via Composer.
require_once __DIR__ . '/../vendor/autoload.php';
// Register API keys at https://www.google.com/recaptcha/admin
$siteKey = '';
$secret = '';
// Copy the config.php.dist file to config.php and update it with your keys to run the examples
if ($siteKey == '' && is_readable(__DIR__ . '/config.php')) {
    $config = include __DIR__ . '/config.php';
    $siteKey = $config['v3']['site'];
    $secret = $config['v3']['secret'];
}
// Effectively we're providing an API endpoint here that will accept the token, verify it, and return the action / score to the page
// In production, always sanitize and validate the input you retrieve from the request.
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->setExpectedHostname($_SERVER['SERVER_NAME'])
                  ->setExpectedAction($_GET['action'])
                  ->setScoreThreshold(0.5)
                  ->verify($_GET['token'], $_SERVER['REMOTE_ADDR']);
header('Content-type:application/json');
echo json_encode($resp->toArray());

Let wel dat je dus nog even in de config.php je keys moet aanleveren. Hier wordt ook de secret key van reCAPTCHA gebruikt om het gedrag te verifiëren. de setScoreThreshold(0.5) is dan iets waar je mee kan spelen. Zet em wat lager en je weet zeker dat alle mensen er in ieder geval doorkomen. Sommige spam zou ook nog door kunnen komen. Zet em hoger en mensen met automatische formulier invullers komen misschien niet zomaar er doorheen.

Dusssss je hoort em niet, maar ziet em wel, een beetje dan... door die lelijke badge (Ja ik weet hoe ik het kan manipuleren, maar goed dat is niet netjes en hoort niet).

UPDATE (17-4-2019): Inmiddels mag je van Google de batch verbergen, mits je maar de disclaimer en privacy linkjes en teksten in de user flow plaatst. Dat is toch wel een stukje fijner dacht ik zo!

Ik heb recentelijk mijn hardware van een update voorzien (betere processor, meer geheugen en aardig wat meer opslagruimte). Ook ben ik afgestapt van xpenology als besturingssysteem. Het was te afhankelijk van hobbyisten voor updates en het duurt tegenwoordig meer dan een jaar voordat Synology een keer de broncode vrij geeft.

Welk besturingssysteem dan?

Ik heb een tijd rondgekeken en ervaringen van anderen gelezen over verschillende opties:

• ESXi, ProxMox, Hypervisor en dergelijken
• Open Media Vault, Amahi etc.
• FreeNAS
• Standaard Linux server distro's - dus veel voorwerk zelf doen
• unRAID

Ik ben uiteindelijk bij unRAID terecht gekomen. De redenen zijn eigenlijk eenvoudig, als je naar mijn eisenpakket kijkt:

• Native Docker
• Klassieke NAS functionaliteiten
• Doorvoer van data zo snel als mijn internet verbinding

unRAID bood al deze mogelijkheden, daar waar de anderen gevirtualiseerde Docker implementaties hadden, of heel erg gericht waren op RAID configuraties, of op basis van Virtual Machines draaiden.

FreeNAS, OMV en andere Linux Distro's: Striped RAID Arrays vond ik geen must, en dat is bij unRAID dan ook niet mogelijk, ook al zou ik daar veel hogere data transfer snelheden halen.

Omdat FreeNAS daarnaast ook nog eens gebaseerd op FreeBSD is, en met Jails werkt (een soort plugin idee), en Docker dus via een virtual machine aanbiedt, evenals OMV, welke wel gewoon een linux distro is, kreeg ik het idee dat het beheren van mijn docker containers niet het meest efficiënt zou zijn. Puur omdat er geen native version van Docker voor FreeBSD bestaat.

ESxi, ProxMox etc.: Te bare metal voor mij. Ik wil niet allerlei exotische besturingssystemen in virtual machines plaatsen en daarbij ook nog eens processoren en geheugen evenals controllers toe te wijzen, ook al is mijn hardware daar inmiddels toe instaat met Intel VT-d etc. Teveel gedoe, wanneer het gros wat ik nodig heb en wil toch gewoon via docker containers zal zijn, en geen behoefte heb om met die exotische besturingssystemen aan de slag te gaan.

En mocht ik dan toch zoiets nodig hebben, ik kan altijd nog een beetje met een virtual machine spelen via unRAID.

Dus unRAID, en nu?

Installeren was best eenvoudig, gewoon zoals gewend bij xpenology een USB flashen met wat bestanden via een installer, en opstarten maar.

Meer was het eigenlijk niet. Gewoon wat instellingen doen via de webUI van unRAID, wat shares maken, een paar plugins installeren, en mijn nieuwe NAS stond.

Ik kan je wel een aantal plugins aanraden, die het unRAID-leven wat makkelijker maken.

Begin met onderstaande, de rest is daarna met een paar klikken aan te vullen/installeren:

• Community Applications

Hierna kun je via het tabblad Apps, wat erbij komt, gemakkelijk zoeken naar de volgende plugins:

• CA Auto Turbo Write Mode (voor veel snellere data-transfers)
• CA Auto Update Applications
• CA Backup / Restore Appdata
• CA Cleanup Appdata
• CA Config Editor
• CA Docker Autostart Manager
• CA Mover Tuning
• Dynamix SSD TRIM (als je een SSD als cache drive hebt)
• Fix Common Problems (handig om je unRAID probleemloos te houden)
• Preclear Disks (om nieuwe schijven voor te bereiden en ze toe te voegen aan je array)
• Unassigned Devices (om externe USB schijven te mounten en beschikbaar te maken die geen onderdeel van je array vormen)

Daarna is het volle bak Docker containers, die je overigens ook terugvindt in de Community Applications plugin, en dus gewoon kunt zoeken via Apps.

Het enige aan unRAID is, dat het niet gratis is, en misschien is het niet voor iedereen. Ik denk dan aan mensen die per se striped RAID arrays zoeken, of hele virtual machines willen draaien, zonder dat er een Linux based besturingssysteem voor zit, en dus eigenlijk baremetal willen draaien met oplossingen als ESXi of Hypervisor, etc.

Ik wil op dit moment echt niets anders meer. Dit was zo de moeite waard om up te graden t.o.v. xpenology.

Dit en andere blogs draai ik erop, allemaal in eigen containers. Mijn media toepassingen ook allemaal in hun eigen container. Updaten van de software binnen de containers gebeurt elke nacht, wanneer er een update beschikbaar is. Alle naar buiten gerichte WebUI's zijn van TLS/SSL voorzien, en goed afgeschermd qua poorten binnen het interne netwerk.

Heerlijk.

Nou ja, het is een setje commando's en er zijn wat vereisten vooraf waar je aan moet voldoen. Maar als je die hebt, kun je dit kopiëren, kleine aanpassingen doen, plakken en uitvoeren.

De vereisten

• Je moet een computer hebben, die verbonden is aan het internet
• Er moet linux op draaien ^[1]
• Er moet docker op geïnstalleerd zijn
• Je router moet je even goed instellen qua port forwarding
• Je hebt een terminal draaien en voldoende rechten
• Je hebt een domeinnaam in bezit en die laat je verwijzen naar je eigen ip-adres

Als je dit allemaal voor elkaar hebt (of bijvoorbeeld een Synology server hebt met versie 5.2 of hoger), plak je de volgende code, nadat je die gepersonaliseerd hebt, in de terminal:

docker run -d --name nginx -p 8080:80 -p 4433:443 -v /path/to/docker/nginx/certs:/etc/nginx/certs:ro -v /path/to/docker/nginx/vhost:/etc/nginx/vhost.d:rw -v /var/run/docker.sock:/tmp/docker.sock:ro -v /path/to/docker/nginx/htpasswd:/etc/nginx/htpasswd:rw -v /path/to/docker/nginx/html:/usr/share/nginx/html:rw --restart=always jwilder/nginx-proxy

docker run --name nginx-letsencrypt -d \
    -v path/to/docker/nginx/certs:/etc/nginx/certs:rw \
    -v /var/run/docker.sock:/var/run/docker.sock:ro \
    --volumes-from nginx \
    jrcs/letsencrypt-nginx-proxy-companion

docker run --name jouwghostblog -d -p 99:2368 \
-e VIRTUAL_HOST=www.jouwdomeinnaam.nl,jouwdomeinnaam.nl -e VIRTUAL_PORT=99 -e \
LETSENCRYPT_HOST=www.jouwdomeinnaam.nl,jouwdomeinnaam.nl \
-e LETSENCRYPT_EMAIL=jouw-emailadres.com \
-e url=https://jouwdomeinnaam.nl \
-e NODE_ENV=production \
-v /path/to/docker/ghost/jouwghostblog:/var/lib/ghost/content \
--restart=always \
ghost:alpine

En that's it. Verander dus even de gewenste poorten, misschien wil je bij de nginx container -p 80:80 en -p 443:443 hebben, dat kan (behalve bij Synology, gebruik dan de instellingen in de code hierboven qua poorten. Verander www.jouwdomeinnaam.nl naar je eigen domein-naam, en vul je e-mailadres even in voor letsencrypt.

Binnen luttele seconden heb je een ssl-beveiligd ghost blog klaar staan en kan je gaan schrijven.

Dus nog 1 keer in de herhaling:

1. Koop een domeinnaam
2. Heb een computer die aan het internet verbonden is (dit kan ook je Synology NAS zijn bijvoorbeeld)
3. Draai een linux versie als besturingssysteem (dit heb je wanneer je Synology gebruikt) ^[2]
4. Installeer Docker (dit is er al wanneer je Synology versie 5.2 of hoger draait)
5. Zorg dat je bij de terminal kan met voldoende rechten (SSH met een applicatie als Putty wanneer je de Synology gebruikt - zet wel even SSH aan bij je Synology)
6. Stuur op je router de juiste poorten door naar je computer (80 en 443) of Synology (poorten aangepast forwarden - Synology hangt daar namelijk hardcoded zijn eigen webserver aan vast)
7. Plak de bovenstaande gepersonaliseerde code, en gaan met die banaan.

Google Tag Manager. Leuk concept, handig, en best makkelijk. Geen gedoe met allerlei snippets, alleen gedoe met 1 snippet in je website sjablonen/pagina's.

Snippets

De rest van de snippets worden allemaal aangeboden in een prettigere gebruikersinterface, zodat iemand die een beetje weet wat ie doet, maar geen programmeer-ervaring heeft (javascript met name), gewoon allerlei dingen kan instellen en aanpassen. Handig!

Vooral handig wanneer je gewoon een centraal overzicht wilt hebben van alle snippets en troep die je op je website laat draaien. Gewoon wat regeltjes (triggers in Tag manager) die bepalen welke tag wanneer wordt afgevuurd. En dat is echt prima wanneer je gewoon simpele tags hebt die per domein dienen te worden ingezet, of per soort pagina's, etc.

Cross domain && Tag Manager

Zodra je cross domain gaat, moet je wel nog even ervoor zorgen dat relevante informatie netjes wordt overgedragen. Bijvoorbeeld bij Analytics. En dan wordt het toch al snel een stuk minder overzichtelijker in Tag manager t.o.v. gewoon de snippets in je template(s) kwakken, of gewoon per .html pagina een snippet definiëren. Die nauwkeurige, verfijnde manier van controle hebben over elke pagina op basis van gewoon een stukje javascript, die ging ik al snel missen.

Vooral omdat de conventies binnen Tag manager weer net even iets anders werken dan een snippet.

Tag Manager mogelijkheden

In de loop van de tijd heeft Google de Tag manager van allerlei updates voorzien, waarbij je tegenwoordig ook echt gewoon Custom HTML en javascript macro's en functies kunt inzetten en laten gebeuren op basis van situaties/triggers.

Het mooiste daar van is dat je de variabelen/functies die je hebt gemaakt, kunt uitwisselen binnen andere functies of tags.

Elke variabele is binnen een andere variabele aan te roepen middels {{variabele x}}. Je kunt dan ook gewoon lekker javascripten er mee. Bijvoorbeeld:

    var a, b = {{variabele x}}.split(','),c,x,y;
        for  (a = 0; a < b.length; a++) {
            if (x === y) { 
                c = y;
                break;
            }
        }

en {{variabele x}} kan gewoon ook weer een functie met berekening zijn of wat dan ook. Erg leuk.

Cross domain Analytics.js

In mijn geval had ik bijvoorbeeld een domein A en een domein B, waarbij op domein A een iframe werd ingeladen waarin domein B werd aangeroepen om een formulier te presenteren en af te handelen. Helaas is dit dus crossdomain.

Wanneer je bijvoorbeeld met Google Analytics werkt, zal deze de aanroep van het iframe zien als een nieuwe sessie. Zelfs een nieuwe user-id voor aanmaken. Hierdoor krijg je dus statistieken die niet meer aan elkaar te knopen zijn. Het lijkt in dit scenario gewoon alsof de gebruiker die het formulier invulde, een compleet andere gebruiker is, die zomaar even landt op je formulierpagina, en weer vertrekt.

En nee, wanneer het op iframe's aankomt, kun je niet zomaar even de code van de iframe pagina manipuleren vanaf het hoofddomein (en daarmee bijvoorbeeld het user-id even corrigeren of overzetten) en vice versa. Dat is om veiligheidsredenen gewoon geblokkeerd. En maar goed ook.

postMessage

Eugh, dacht ik destijds. Mijn voorganger had dit verder ook nooit afgemaakt of juist geïmplementeerd. Daar was ik aan begonnen en had uiteindelijk toch gekozen voor het gebruik van de postMessage API, om analytics data van domein A naar domein B te communiceren.

Linker en url-decoreren

Google heeft ook mogelijkheden met de Linker plugin, of gewoon de Linker-functionaliteit in te zetten, maar dan krijg je dus van die lelijke links zoals https://www.domeinb.com/?_ga=1.213353566.4232634566

Dit is overigens wel de enige manier wanneer je geen controle hebt over domein b, wanneer je als domein a beheerder die informatie wil overdragen.

Wanneer je deze manier toepast bij cross domain iframe welke je op je hoofd domain inlaadt, zal het frame via een onload=maakErEenAnalyticsUrlVan(); moeten worden ingezet. Dan krijg je afhankelijk van de snelheid van de verbinding en webservers even een flikkerend iframe dat opnieuw wordt ingeladen. En je loopt het risico dat de pageview in het iframe al is getriggerd. 3 keer bah en onhandig.

Waarom toch postMessage?

postMessage is hierin beter, maar vergt wel even wat afstemming binnen je code die je zelf beheert, en eventueel de code van het andere domein, welke je wellicht niet beheerd. Heb je wel toegang tot de code op het andere domein (in je iframe bijvoorbeeld), ben je sneller klaar. Anders moet je met de beheerder van het andere domein afstemmen wat de communicatie zal zijn via postMessage tussen beide domeinen.

Timing

Zo kun je ervoor kiezen om vanuit het hoofddomein een bericht te sturen zodra de user-id in Analytics is geregistreerd. Dit bericht stuur je dan naar je iframe domein b. Maar... wat nu als het hoofddomein al klaar is en het bericht wil gaan sturen, maar het iframe domein is nog niet ingeladen en is dus nog niet aan het luisteren via de Eventlistener? Dan stuur je de user-id zomaar de ruimte in, want echte controle zit er niet zomaar even in. Iedere pagina kan berichten sturen via postMessage naar welke locatie dan ook. Wat je beter kunt doen, is het laatst ingeladen domein degene laten zijn die het verzoek doet. Dit child domain, in de iframe is degene die aan de parent domain vraagt wat de Google user-id is, waarna het child domain gaat zitten luisteren of er iets terug komt. Het parent domain krijgt dat het verzoek als luisterende binnen en geeft antwoord. Dit is de beste manier om de timings-uitdagingen op te lossen.

Geldige afzender

Het is aan de ontvanger om te luisteren en te bepalen of het een geldig soort bericht is, en of het van een vertrouwd domein komt. Ja, je kunt zeggen als luisteraar: '*', maakt mij niet uit waar het vandaan komt, en er klaar mee zijn, maar dat brengt potentiële veiligheidsrisico's met zich mee (zeker met de huidige AVG wil je daar voorzichtig mee zijn). Dus dit moet je ook weer aangeven in je Eventlistener. Geef daar jouw domeinen aan die mogen verzenden. Binnen Google Tag manager kan je dit doen met een Aangepaste HTML-tag waarbij je met variabele topOrigin een set aan domeinnamen kan meegeven, die geaccepteerd worden als afzender. Onderstaande code plaats je dus op je externe domein welke in de iframe wordt ingeladen:

<script>
// Add the expected origin domain inside gtm topOrigin variable
// Must use the following format http://example.com
var topOrigin, topOrigins = {{gtm topOrigin}}.split(',');
function xDomainHandler(event) {
  event = event || window.event;
  var origin = event.origin;
  // Check for the whitelist when cid gets returned
  var found = false;
  for (var i = 0; i < topOrigins.length; i++) {
    if (topOrigins[i] == origin) {
	topOrigin = topOrigins[i];
      found = true;
      break;
    }
  }
  if (topOrigin != '*' && topOrigin != event.origin) {
    return;
  }
  try {
    var data = JSON.parse(event.data);
  } catch (e) {
    // SyntaxError or JSON is undefined.
    return;
  }
  if (data.cid) {
    sendHit(data.cid);
  }
}

if (window.addEventListener) {
  window.addEventListener('message', xDomainHandler, false);
} else if (window.attachEvent) {
  window.attachEvent('onmessage', xDomainHandler);
}

var alreadySent = false;
function sendHit(cid) {
  if (alreadySent) return;
  alreadySent = true;
  // If cid exists, it will overwrite any existing cookies.
  var params = {};
  if (cid) params['clientId'] = cid;
  
  dataLayer.push({'event':'trackPage','cid': cid});
}
if (!window.postMessage) {
  // If no postMessage Support.
  sendHit();
} else {
  // Resolve current topOrigin for initial message request
  var a=document.createElement('a');
  a.href=document.referrer;
  topOrigin = a.href;
  // Tell top that we are ready.
  top.postMessage('send_client_id', topOrigin);
  // Set a timeout in case top doesn't respond.
  setTimeout(sendHit, 100);
}
</script>

Op het hoofd domein (parent domain), welke de iframe inlaadt, zorg je ervoor dat de volgende aangepaste HTML-tag wordt ingeladen:

<script>
// Edit the gtm allowedOrigins variable and add your domains to the whitelist
var allowedOrigins = {{gtm allowedOrigins}}.split(',');
function xDomainHandler(event) {
  event = event || window.event;
  var origin = event.origin;
  
// Check for the whitelist.
  var found = false;
  for (var i = 0; i < allowedOrigins.length; i++) {
    if (allowedOrigins[i] == origin) {

      found = true;
      break;
    }
  }
  if (!found) return;
  if (event.data != 'send_client_id') return;

// Get the clientId and send the message.
  var tracker = ga.getAll()[0];
    tracker.get('clientId');
    var data = {cid: tracker.get('clientId')};
    event.source.postMessage(JSON.stringify(data), origin);
}
if (window.addEventListener) {
  window.addEventListener('message', xDomainHandler, false);
} else if (window.attachEvent) {
  window.attachEvent('onmessage', xDomainHandler);
}
</script>

De variabele allowedorigins vul je dan weer met je child domeinen als geaccepteerde regexwaarde.

Om een lang verhaal kort te maken; Gebruik dit json-bestand en importeer deze container met instellingen in je werkruimte van Tag manager om een blanco startpakket te gebruiken. Op basis hiervan en wat tweaks voor jezelf (denk aan anonimizeIP = true in je analytics tag instellingen i.v.m. de AVG), en je kunt crossdomain gaan tracken. Het enige wat je moet doen, is op beide domeinen dezelfde GTM-container inladen en de juiste triggers gebruiken bij de juiste domeinen.

Altijd een leuke. Geef je toegang tot je Adwords account aan een derde partij die een MCC ('My Client Center') account heeft (tegenwoordig 'Adwords manager accounts'), zie je bij de volgende account update in Adwords Editor hun naam als je Adwords account naam verschijnen.

Lekker irritant. Beetje ongewenste marketing van hun zijde. Ik hoef niet telkens hun bedrijfsnaam/codenaam voor ons Adwords account te zien. Al helemaal niet wanneer ze alleen maar even een quickscan hebben gedaan voor ons. Kom op zeg.

Vervelend...

dat dit fenomeen slecht gedocumenteerd is op het web. Het zal vast wel ergens vermeld staan hoe dit gedaan kan worden, maar ik kon er maar moeilijk iets over vinden.

Oorzaak

Nu kun je wanneer je toegang krijgt tot een Adwords account in de rol van Adwords manager (MCC) de naam van het account aangeven voor binnen je MCC. Zo kun je onderscheid maken tussen de verschillende accounts die je beheert. Wat er niet bij vermeld wordt is dat deze benaming de huidige accountnaam overschrijft, ook bij de eigenaar(s).

Wanneer je dus op het originele account inlogt, kan het zijn dat je zomaar die naamgeving ziet staan. En het is al helemaal overduidelijk in de Adwords Editor.

Niet bedoeld

Ik denk overigens dat deze derde partij die heeft gekeken naar het account, zich hier niet van bewust is. Vervelende is naast dit, dat je het pas weer kunt veranderen als je het account aan een MCC hangt. In het originele account kan dit niet..., niet via Adwords Editor, en niet via de WebUI.

Oplossing

Dus ja, de oplossing is een MCC account regelen (als je die nog niet hebt), en dan de koppeling maken en de naam opgeven die het was of die je wilt hebben. Daarna ontkoppelen en voilà. Opgelost.

De laatste week is het weer raak bij Analytics. Al jaren hebben de meeste site-beheerders last van spam bezoeken die de statistieken negatief beïnvloeden, en soms zelfs compleet om zeep helpen. Ik schreef hier al eerder over, de zogenaamde 'ghost spam' zoals dit bekend staat in de online-wereld. Nu is er echter een andere vorm bijgekomen die langs alle filters lijkt te komen, die de meeste Analytics beheerders nu onderhand wel hebben ingesteld. Spam via taal instellingen.

Hoe werkt het?

Het werkt als volgt; Spam via bots komt binnen op analytics, met als user-agent instelling voor taal iets in de trant van: Secret.ɢoogle.com You are invited! Enter only with this ticket URL. Copy it. Vote for Trump!, en vandaag heb ik er weer een nieuwe bij: o-o-8-o-o.com search shell is much better than google!

Wat doet het?

Deze spam gedraagd zich iets anders dan de ghost spam van de afgelopen jaren, wat niet meer dan een 1 pagina per sessie bezoek met een duur van 0:00 minuten was. Deze spam bezoek echter ook echt pagina's, 4,14 per sessie, en hangt zo'n 1:30 gemiddeld op je site rond. Irritant!

Oplossingen te over

Gelukkig zijn er filters en properties die je kunt toepassen. In mijn geval is het vrij eenvoudig te weren tot nu toe. Je maakt gewoon een filter aan met de instellingen:

taal-instellingen, uitsluiten, filterpatroon oogle.*. Even toepassen op al je properties als je er meer hebt, en je bent er vanaf.

Deze specifieke instelling werkt vooral voor waar ik mee te maken kreeg. Beiden gebruiken één overeenkomstig woord/letter combinatie, oogle in de taal-instellingen.

Waarom oogle?

Ik zag dat de eerste spammer waar ik te maken mee kreeg, ɢoogle schreef, waarbij de eerste ɢ een ander teken is dan de tweede g. Sneaky!

Nog een RegEx patroon wat je kunt inzetten

Deze werkt iets anders dan degene die ik tot nu toe heb gebruikt en ziet er als volgt uit:

    .{15,}|\s[^\s]*\s|\.|,|\!|\/

Deze filter focust zich op de speciale tekens die er inzitten bij de language spammers. Normale bezoekers hebben de land-codes welke meestal bestaan uit 2 letters, een streep en weer 2 letters. Dus nl-NL bijvoorbeeld. Het bovenstaande patroon filtert dus alles met een punt, komma, uitroepteken en een /-teken. Daarnaast ook nog alles qua taal-instelling dat groter is dan 15 tekens. Op zich redelijk netjes, totdat de spammers ook daar weer mee aan de slag gaan. Te denken valt aan een short-URL.

Tijdelijke segmenten

Maar goed, dan heb je nog te maken met de achtergelaten vervuiling. Dit is op te lossen door een segment te maken waarbij je dezelfde instelling hanteert en de taal-spammers eruit filtert. Dit kun je tijdelijk inzetten om je eventuele rapportages te corrigeren. Bij mij scheelde het nogal in bezoekersduur en pagina's per sessie.

Deze spam is namelijk nogal aanwezig qua volume. Tevens worden er ook verwijzers gebruikt welke legitieme sites zijn, waaronder bijvoorbeeld reddit.com en lifehacker.com afgelopen week. Tja, die wil je misschien als verwijzer niet blokkeren.

Omgedraaide filter

Ik zit er nog aan te denken om het voorbeeld van de taalfilter hierboven even om te draaien. Ik kan natuurlijk bezig blijven met het uitsluiten van rare taal-instellingen, maar waarom niet gewoon een taalfilter maken waarbij ik alles uitsluit wat niet overeenkomt met de bekende taal-instellingen. Dat is op zich prima te bouwen. De reden dat dit op zich zou moeten werken, is omdat het de spammers toch echt om aandacht gaat. En wanneer ze alleen doorkomen bij ons in de statistieken met een geldige taal-setting, dan is het doel niet behaald.

Ik zal deze eens gaan opzetten en even test-draaien. Daarna zal ik deze hier melden en waarschijnlijk is er al iemand die deze heeft gemaakt inmiddels en beschikbaar heeft gemaakt binnen de templates voor Google Analytics.

UPDATE 1: Ben nu een totaalrapport met alle language settings aan het exporteren, daar er geen simpel overzicht te verkrijgen was met alle valide taal instellingen voor Google Analytics, dus dan maar zelf 1 maken. Die zet ik dan dadelijk om naar een RegEx filter patroon en zal zo dadelijk een filter aanmaken waarbij ik deze lijst laat opnemen. Voor nu is dat de meest toekomst-veilige ofwel future-proof oplossing.**

Filter voor opnemen van alleen geldige taalinstellingen in Analytics

UPDATE 2: Ik heb een filter gemaakt met een patroon wat iets ruimer is dan de strikte iso landen code lijsten waar Google gebruik van maakt (ja, er zijn er meer).

• ISO 639 specifies 2-letter and 3-letter codes for languages.
• ISO 3166 specifies 2-letter and 3-letter codes for countries, as well as 3-digit codes.

Gebruik 1 van onderstaande filterpatronen op basis van je voorkeur. De eerste gebruik ik zelf en is wat ruimer dan per se nodig. Ik doe dit omdat ik tussen de data ook taalinstellingen als en-029 e.d. tegenkwam. Dit zijn dan wel geen officiële taalcodes, maar ze zitten mij ook niet in de weg. Die kan ik later altijd nog wegfilteren.

Het ruimere patroon:

    ^[a-zA-Z0-9_]{1,2}(\-|\_)[a-zA-Z0-9_]{2,3}$|^[a-zA-Z0-9_]{1,2}$|\(not set\)

En het striktere patroon voor mensen die het officieel willen hebben:

    ^[a-z]{2}(\-|\_)[A-Z]{2}$

Dus:

• Gewoon naar je filters gaan (zorgen dat deze op de juiste properties wordt geplaatst wanneer je er meer dan 1 hebt)
• Kiezen voor aangepast of custom
• Opnemen of include kiezen
• Veld of field taalinstellingen of language settings
• Filterpatroon zoals hierboven invoeren en opslaan die hap.

Tot slot

Deze filter bespaard je in de toekomst het nodige werk van het bijwerken van een uitsluiten/exclude filter, en zal ook prima blijven werken, daar het de spammers toch om aandacht gaat. En die aandacht voor een URL of iets anders gaat ze niet lukken met maximaal 5 tekens, gescheiden door een - of _. Dus niet meer interessant voor hen.

Hiermee heb je toekomstige taalinstellingen-spammers dus ook weggefilterd!

Ik ben al een tijdje op mijn gemak bezig met het moderniseren van de webformulieren voor de websites van mijn werk, en heb gekozen voor een separate client-side validatie techniek, aangevuld met separate server-side validatie nadien. Dit om ervoor te zorgen dat ik zo min mogelijk a-synchrone call-back scenario's hoef af te dekken. Niet dat ik AJAX schuw, maar gewoon omdat het voor nu gewoon sneller opgeleverd kan worden en het ook even niet complexer hoeft te worden dan nodig is. Dit laatste vooral vanwege het gebruik van 3rd party oplossingen waar een content-editor gewoon in moet kunnen blijven werken en mij niet bij elke inhoudelijke aanpassing nodig moet hebben. Ockhams scheermes als het even kan!

Setup voor client-side validatie library

Ik heb gekozen voor het gebruik van parsley.js, daar het precies de mogelijkheden biedt die ik zocht.

Ik heb dit verrijkt met de Bootstrap opmaak van de eigen site en alles draaide prima. Totdat ik merkte dat al vrij snel meerdere formulier registraties direct achter elkaar binnen begonnen te komen. En zo heel af en toe kreeg ik er 20+ binnen, met een uitschieter naar ~100...

Spam?

Oeps! Na alles na gelopen te hebben, kwam ik erachter dat er op zich niets mis was met mijn implementatie. De client-side verliep prima. Parsley JS deed zijn ding en er waren niet echt scenario's te bedenken waar mijn initialisatie en validatie regels voor Parsley fout zouden verlopen (gesloten proces waar de gebruiker doorheen loopt), en ook met testen kwam ik niets tegen waar dit mis zou gaan.

Niets te vinden?

Toch maar eens geprobeerd mijzelf nog eens goed in de gebruikers te verplaatsen. 100 formulier inzendingen in 5 minuten... Trage verbinding? Wellicht. Zitten er verschillen in de ingevoerde data door de gebruiker? Niet echt, een beoordelingscijfertje aangepast, verder niet. Dus in ieder geval is de gebruiker 'terug gegaan' na inzending. Kan gebeuren. Maar zoveel dubbelen is niet juist. Hoe zou een gebruiker op zo'n formulier klikken?

En toen had ik het ineens. Klikken... 2 keer op verzenden klikken voordat het formulier doorgaat naar de eindpagina? De befaamde dubbelklik? Yep...

Dus ook als een verbinding trager lijkt te zijn? 5 keer? Yep... Bijzonder dat de persoon met 100 inzendingen dan ook echt heeft zitten klikken als een malle, maar goed, begrijpelijk.

Oplossen die hap

Okay! Ik heb iets waar ik mee kan werken. Om bovenstaand te voorkomen heb ik een simpele gif in een div met hoge z-index ingezet die bij de verwerking van de Parsley code wordt getoond, en natuurlijk verdwijnt zodra de eindpagina wordt getoond.

    $("form").on("submit", function () {
        //Laat het loading scherm zien 
        $("#loading").css("display", "block");
        //Voer de rest van de validatie code uit...

Daarnaast moet je dan ook nog het laadscherm weghalen wanneer er toch iets niet goed blijkt te zijn, ofwel wanneer Parsley terugkomt met validatie-fouten:

    // Wanneer er een fout in het document wordt gevonden bij inzenden, dient het loading scherm weer weggehaald te worden
      window.Parsley.on('field:error', function() { 
        $("#loading").css("display", "none");
      });

En daarmee is de cirkel rond. Server-side validatie loopt hier eigenlijk altijd wel door, zolang er niemand met de client-side resultaten gaat lopen rommelen (maar goed, dan nog komt die netjes terug als dit wel zo zou zijn), reCAPTCHA van Google houdt de bots goed buiten de deur, en dubbelklikkers en trage verbindingen zijn nu geen obstakel meer.

Ben de laatste tijd bezig met Javascript. Meer dan ik had gehoopt. Ik vind het heerlijk om zelf met Javascript te knutselen. Tegelijkertijd probeer ik wel te waken om niet overal te pas en te onpas JS in te zetten, als het ook anders kan.

Ik gebruik graag beschikbaar gestelde snippets of libraries, die ik dan aanpas op mijn wensen. Zo wilde ik laatst een datumprikker plaatsen in een formulier, en dan kom je al snel op een Javascript uit. Helemaal wanneer je beperkte invloed hebt op de manier waarop het formulier wordt opgebouwd (3e partij en geen toegang tot hun source).

Nou ja, je zou het gehele formulier kunnen herschrijven met behulp van XLST, en er dan een HTML5 verhaal van maken (wat zeker nog op mijn to-do lijst staat, met Bootstrap smaakje), maar dat is een project an sich. Tevens zijn de HTML5 input features niet geschikt voor alle devices en browsers op het moment, dus je zit toch al snel met nog wat Javascript te kijken.

In dit geval heb ik daar nu de tijd niet voor en moet het snel opgeleverd worden.

Zoeken

Dus op zoek naar dat script. Tijdens mijn zoektocht kom je dan wel een aantal scripts tegen die behoorlijk wat mogelijkheden lijken te bieden, maar dan toch weer her en der, bij implementatie, in de soep draaien (uitsluiten van datums en tijdsmomenten, mogelijkheden tot opmaak gelijk trekken met de huisstijl).

Dan kun je drie dingen doen;

• Troubleshooten en uiteindelijk bugfixen in het hoofdscript (waar jij niet aan de basis hebt gestaan dus aardig wat extra tijd kwijt bent om het te doorgronden)
• Zelf van de grond af aan opbouwen (want alles naar eigen wens)
• Weggooien en op zoek naar een alternatief

Ik heb eerst getroubleshoot, maar al snel de bijl begraven en ik ben na een paar snelle simpele fixes die niet het gewenste resultaat hadden, verder gaan zoeken. Zelf bouwen was al snel vergeten door mij, want tijd en onderhoud. Zeker als je nog op tijdelijk contract staat is dit niet de keuze die je wilt maken.

Uiteindelijk ben ik bij pickadate.js van Amsul terecht gekomen. Belangrijkste criteria kon aan voldaan worden;

1. hoog configureerbaar - Kantooruren + speciale dagen met afwijkende tijden.
2. in de basis responsive design.
3. goed gedocumenteerd en dus snel(ler) manipuleerbare source.

Top, maar toch...

Alsnog heb ik een volledig custom aanroep erboven op geschreven om bijvoorbeeld een extra knop te maken die de eerstvolgende speciale datum invult zodra deze aangeklikt wordt. Daarna was het van belang om het beheerbaar te houden en heb ik een setje datums aan het begin van het bestand in gegeven, waarna de een functie zelf gaat evalueren (loop met splice en sort door een array heen) of de datum nog wel geldig is. Dit voorkomt dat ik de bestanden maandelijks mag gaan updaten. Ik heb wel wat beters te doen. Zeker als de datums meestal voor een heel jaar bekend zijn...

Onderaan het blog zal ik de custom initialisatie code plaatsen zodat anderen er eventueel gebruik van kunnen maken.

Tevens wilde ik een eenvoudige knop bovenaan in de datumkiezer zetten. Er staat namelijk standaard 'Sluiten', 'Wissen' en 'Vandaag' beschikbaar. Handige functionaliteit. Ik wilde gewoon de eerstvolgende door mij aangegeven speciale datum selecteert.

Op zich vrij eenvoudig, omdat ik een Array heb die ik splice op basis van het moment waarop een gebruiker deze bekijkt. Dus ik vergelijk op het moment van het openen van de datumkiezer het huidige moment (new Date();) met de speciale datums en splice deze uit de array en sort deze daarna van laag naar hoog. Dit betekent dat de dichtst bijzijnde datum ten opzichte van vandaag altijd op index 0 in de array zit.

Dit kan ik vervolgens gebruiken om gewoon de functionaliteit van de 'Vandaag' knop te kopiëren en in de source van pickadate.js toevoegen.

Daarna wilde ik dat deze knoppen boven het kalendergedeelte kwamen te staan. Onderin stonden ze zo verstopt.

Ook de source code aangepast en het gedeelte dat de html rendert aangepast en verplaatst.

Erg leuk maar voor je het weet zit je echt knie-diep in custom code, met risico's dat het weer moet bijgehouden worden bij updates etc.

Dat was voor mij ook het moment om te stoppen met aanpassingen. Alles natuurlijk goed gedocumenteerd met comments, maar ja... we weten allemaal hoe nuttig die soms zijn...

Ik maak tevens gebruik van jQuery om de DOM her en der te manipuleren en te tweaken, maar ook om pickadate.js te binden bijvoorbeeld. Deze jQuery selectors kun je natuurlijk vervangen met document.getElementById("id").pickadate(); bijvoorbeeld. Wel eerst even zorgen dat jQuery wordt ingeladen op je webpagina natuurlijk.

Een demo:

See the Pen pickadate.js example by Tim Huesken (@TimHuesken) on CodePen.

Zoals beloofd (lap code):

    /*Custom aanroep van pickadate.js door Tim Huesken - tim.huesken[at]outlook.com*/

    /*-------------------------------------------------------------------*/
    /*Alle speciale datums.*/
    /*Format waarin je een datum opvoert: new Date(Jaar, Maandnummer-1,Dag,Uur,Minuut,Seconde,Milliseconde).getTime(),*/
    /*Oude datums kun je laten staan, die worden netjes eruit gefilterd*/
    var zondagen = [ new Date( 2016, 1, 21, 0, 0, 0, 0 ).getTime(), new Date( 2016, 3, 3, 0, 0, 0, 0 ).getTime(), new Date( 2016, 4, 16, 0, 0, 0, 0 ).getTime(),
                    new Date( 2016, 5, 26, 0, 0, 0, 0 ).getTime(), new Date( 2016, 8, 11, 0, 0, 0, 0 ).getTime(), new Date( 2016, 10, 6, 0, 0, 0, 0 ).getTime(),
                    new Date( 2016, 11, 18, 0, 0, 0, 0 ) ];
    /*------------------------------------------------------------------*/

    //Kies hier de tekst van de knop en de popup bij mouseover speciale datums.
    var textButton = "Speciale Zondag";
    var zondag = '';
    var format = 'yyyy-dd-mm';

    /*Hiermee wordt de Speciale zondag button gedefinieerd.*/
    /*Functionaliteiten en stijl kun je hier manipuleren. Haal bijvoorbeeld de regel weg en vervang met: var appendButton = ''; om de button in zijn geheel weg te halen.*/
    var appendButton = '<button id="zondag" class="picker__button--zondag" type="button">' + textButton + '</button>';

    //Helper functie voor het toevoegen van de juiste data-pick waarde voor de Speciale zondag button. Hier hoef je niets aan te wijzigen.
    function dataPickZondag(){
        for ( var i = zondagen.length -1; i >= 0; i-- ) {
            if ( new Date().getTime() >= zondagen[ i ] )  {
                zondagen.splice( i, 1 );
            }
        }
        for ( var j = 0; j < zondagen.length -1; j++ ) {
          if ( $( '[data-pick=' + zondagen[ j ] + ']' ) !== null ) {
                  $( '[data-pick=' + zondagen[ j ] + ']' ).addClass( 'pickadate--zondag' );
                  $( '[data-pick=' + zondagen[ j ] + ']' ).attr( "title" , "Speciale zondag" );
                  $( '[data-pick=' + zondagen[ j ] + ']' ).removeClass( 'picker__day--disabled' );
              }
          }
        zondagen.sort();
        if ( $( '[data-pick=' + zondagen[ 0 ] + ']' ) !== null ) {
                    $( '#zondag' ).attr( "data-pick", zondagen[0] );
            }
            else {
            $( 'button' ).remove( ".picker__button--zondag" );    
            }
    }

    /*Hier worden de datumprikker en tijdprikker aangeroepen en opgemaakt. Basis instellingen vind je hier.*/
    var datepicker = $( "input[placeholder='Datum placeholder']" ).pickadate({
            firstDay: 1,
            min: new Date(),
            max: +45,
            //formatSubmit: format,
            hiddenName: true,
            //closeOnSelect: false,
            closeOnClear: false,
            disable: [
            true,
            1,2,3,4,5,
            [2016, 1, 21],
            [2016, 3, 3],
            [2016, 3, 27, 'inverted'],
            [2016, 4, 5, 'inverted'],
            [2016, 4, 16],
            [2016, 5, 26],
            [2016, 8, 11],
            [2016, 10, 6],
            [2016, 11, 18],
            [2016, 11, 25, 'inverted'],
            [2016, 11, 26, 'inverted'],
            [2017, 1, 1, 'inverted']
            ],
            onRender: function (){
                //format = format + ' ' + zondag,
                nu = new Date().getTime();
                teLaat = ( new Date().setHours( 0, 0, 0, 0 ) + 56700000 );
                $( '.picker__buttons' ).append( appendButton );
                dataPickZondag();
                $( '.picker__button--clear' ).click( function() {
                    tpicker.clear();
                });
                    if ( nu > teLaat ) {
                        $( 'button' ).remove( ".picker__button--today" );
                    }
                }
        }),
        dpicker = datepicker.pickadate( 'picker' );

    var timepicker = $( "input[placeholder='Tijd placeholder']" ).pickatime({
            format: 'HH:i uur',
            formatSubmit: 'HH:i',
            hiddenName: true,
            min: [9,0],
            max: [16,30],
            disable: [
            [12,0],
            [12,30]
            ]
        }),
        tpicker = timepicker.pickatime('picker');

        if (dpicker === undefined) {} else { 
        dpicker.on('open', function (event) {
            var nu = new Date().getTime(),
            teLaat = (new Date().setHours(0,0,0,0) + 56700000);
            $('.picker__button--clear').click(function(){
                    tpicker.clear();
                });
            if(document.getElementById("zondag")){
                dataPickZondag();
            }
            
            if (nu > teLaat) {
                dpicker.set('min', 1);
                $( 'picker__button--today').addClass( 'picker__day--outfocus picker__day--disabled' );
                $( '[data-pick=' + new Date().setHours( 0, 0, 0, 0 ) + ']' ).removeClass( 'picker__day--selected picker__day--highlighted' );
                $( 'button' ).remove( ".picker__button--today" );
            }
        });
    }

        if (dpicker === undefined) {} else {
            dpicker.on( 'set', function ( event ) {
                if (( event.select ) && ( zondagen.indexOf(dpicker.get( 'select' ).pick) != -1 )) {
                    //zondag = 'JASNO op Zondag',
                    $( "input[data-name='Eventtype']" ).val("JASNO op Zondag"),
                    $( "input[data-name='Evenement']" ).val("Ja"),
                    tpicker.clear(),
                    tpicker.set('enable', true),
                    tpicker.set({
                    interval: 60,
                    min: [11,0],
                    max: [15,0],
                    }),
                    tpicker.on( 'open', function ( remove ) {
                        $( 'p' ).remove( ".text-center" );
                        }),
                    setTimeout( tpicker.open, 0 );
                }
                else if (( event.select ) && ( dpicker.get( 'select' ).pick !== new Date().setHours( 0, 0, 0, 0 ) )) {
                    //zondag = '',
                    $( "input[data-name='Eventtype']" ).val("Bezoek"),
                    $( "input[data-name='Evenement']" ).val("Ja"),
                    tpicker.clear(),
                    tpicker.set( 'enable' , true),
                    tpicker.set({
                        interval: 30,
                        min: [9,0],
                        max: [16,30],
                        disable: [
                        {
                            from:[12,0], to:[12,30]
                        }
                        ]
                    }),
                    tpicker.on( 'open', function ( remove ) {
                            $( 'p' ).remove( ".text-center" );
                        }),
                    setTimeout( tpicker.open, 0 );
                }
                else if (( event.select ) && ( dpicker.get( 'select' ).pick === new Date().setHours( 0, 0, 0, 0 ) )) {
                    var tijd = (new Date().getTime() + ( 60 * 45 * 1000 )),
                    min = new Date(tijd),
                    uur = min.getHours(),
                    afgerond = ( 30 * ( Math.ceil( min.getMinutes()/30 )));
                    //zondag = '',
                    $( "input[data-name='Eventtype']" ).val("Bezoek"),
                    $( "input[data-name='Evenement']" ).val("Ja"),
                    tpicker.clear(),
                    tpicker.set( 'enable', true ),
                    tpicker.set({
                        interval: 30,
                        min: [uur,afgerond],
                        max: [16,30],
                        disable: [
                        {
                            from:[12,0], to:[12,30]
                        }
                        ]
                    }),
                    tpicker.on( 'open', function ( remove ) {
                            $( 'p' ).remove( ".text-center" );
                        }),
                    setTimeout( tpicker.open, 0 );
                }
            });
        }

Aangepaste Source

Mocht je hier verder gebruik van willen maken, kun je hier de verdere source files downloaden. Ik verwacht wel van je dat je weet hoe je deze .js en .css bestanden moet aanroepen in je webpagina en dat je weet de input elementen in een form aan te roepen en succesvol bovenstaande code kunt aanpassen zodat de boel netjes aan de elementen wordt gebonden. Ook neem ik aan dat je de css kunt instellen naar wens. Mochten er onverhoopt toch vragen ontstaan, laat ze hieronder achter en ik zal ze proberen te beantwoorden.

Ook weet ik dat mijn code efficiënter en beter kan. Als je iets ziet, mag je het natuurlijk melden. Graag zelfs. :-)

De laatste maanden zijn er voor degenen die er oog voor hebben en op letten, aardig wat wijzigingen te zien in de SERP (Search Engine Result Page) snippets van Google. Zo experimenteerden ze vorige maand met verschillende kleuren voor de 'Adv.' markering bij Adwords advertenties.

Adwords

De ene week/dag waren ze nog geel met witte letters, nu regelmatig groen met witte letters. Zie hieronder de verschillen:

Statistieken

Ik zie in de statistieken minder kliks de laatste tijd, maar of er een correlatie bestaat met deze aanpassingen door Google, is moeilijk te zeggen. Seizoensinvloeden uitschakelen, evenals andere factoren, is iets wat alleen te realiseren is door veel tijd in een testsite te stoppen en daar ook bij te adverteren. Dat ligt niet binnen mijn hobby budget.

Pagina titel lengte in SERP snippets

Niet alleen de manier van weergeven van de Adwords advertentie markeringen worden getest, ook zijn er af en toe grotere SERP snippets te zien in de zoekresultaten. Ik ben er nog geen tegen het lijf gelopen, maar de standaard breedte van 512px breed, wordt af en toe opgerekt tot 600px.

Hierdoor is er iets meer ruimte voor de inhoud van een zoekresultaat (organische resultaten dus). Dit houdt ook in, dat er wat meer letters getoond kunnen worden van de pagina titel en de meta-beschrijvingen.

Afkappen!

Google kapt traditioneel te lange pagina titels af zodra ze deze lengte overschrijden. Woorden werden tot op heden gewoon bot afgekapt, ongeacht het een raar resultaat zou hebben.

Dit leidt soms tot zeer ongelukkige SERP snippets:

Dit had 'The International Association of Assemblages of Assassin Assets' moeten zijn.

Pixel breedte en font verhoudingen

Google gebruikt het Arial font voor de zoekresultaten, en het arial font heeft verschillende breedtes voor verschillende letters. Daarom is de 600px breedte eigenlijk de enige maat die je kan toepassen voor dit verhaal.

Gelukkig zijn er andere marketeers op de wereld die het hun sport hebben gemaakt dit tot op het bot uit te zoeken, en uit de blog 'Title Tag Length Guidelines: 2016 Edition', is dit dan ook breed uitgemeten.

Het komt er op neer dat je met een pagina titel (het <title></title> element), het beste kunt proberen de titel onder de 60 letters^[1] te houden. Dan loop je gemiddeld het minste risico dat Google zelf de titel gaat afkappen en laat eindigen met ...

Netjes afkappen

Een stukje terug gaf ik aan dat Google woorden soms ongelukkig afkapt. Ook lijkt het erop dat bij de nieuwe testen/wijzigingen, woorden niet meer zo maar halverwege worden afgekapt. Er wordt nu netjes voor of na het woord afgekapt. Is het een heel lang woord, dan zal het uiteindelijk alsnog worden afgekapt. Het afkap resultaat is dan wel behoorlijk rigoreus, ruim voordat de maximale lengte van 600px wordt behaald.

Merknamen eraan vastplakken

Google plakt tegenwoordig ook graag zelf de merknamen ergens achter aan de pagina titel vast. Wanneer een titel wordt ingekort want te lang, dan kan dit gebeuren. Ook dit heeft weer invloed op het uitzoeken van de juiste pagina titels.

Tot slot

Al het bovenstaande in acht nemende, is het belangrijk om nooit te vergeten dat de pagina titel relevant moet zijn ten opzichte van de pagina inhoud, en ook nog eens moet aanzetten tot interactie van de gebruiker (wil je bezoekers trekken).

Het is dan al gauw verleidelijk om een click-bait titel te gaan verzinnen, om maar bezoekers te trekken. Heeft ook geen zin! Zodra de pagina inhoud niet aan de verwachting van de bezoeker voldoet, zal deze vrij snel je site weer verlaten. Een bounce... En deze hebben ook weer invloed op de langere termijn voor je positie binnen de zoekresultaten.

Het is een complex geheel, om goed voor ogen te houden. Het is dan ook eigenlijk het makkelijkste, meest betrouwbare/zekere, om je gewoon aan de wensen van Google te houden. En die zijn simpel:

Relevante pagina-titels en meta-beschrijvingen, die verwijzen naar een pagina met relevante inhoud welke de gebruiker waardeert.

Kleinigheden waar je dan wel op kunt letten bij het schrijven van pagina-titels, meta-beschrijvingen en pagina-inhoud, zijn dingen als de lengte, om zo goed mogelijk op het netvlies van de eventuele bezoeker te landen.

In mijn dagelijks werk maak ik gebruik van oplossingen door derde partijen, en dat brengt bepaalde afhankelijkheden met zich mee.

De situatie

Wij maken gebruik van formulieren welke door een 3e partij worden gegenereerd. Het formulier wordt op basis van een xml bestand geïnitialiseerd (waar ik geen toegang tot heb), en met xslt tot bruikbare HTML verwerkt.

Het verwerken van het formulier wordt dan ook door hen afgevangen met een javascript wat ze in het formulier injecteren, en waar ik ook geen toegang tot heb. Dit stukje script verwerkt bij verzending de inhoud van het formulier tot bruikbare data en verzend het dan naar hun database.

In dit stukje script worden formuliervelden met ongeldige waarden via een alert aan de gebruiker kenbaar gemaakt.

Waarom wilde ik de alert voorkomen?

Tegenwoordig verwacht ik bij een formulier dat er geen alert naar voren komt wanneer ik iets ben vergeten in te vullen. Zo'n irritante popup met wat meldingen...

Dat werkt gewoon niet lekker. Dan moet ik onthouden wat er staat en zelf op het formulier (zeker bij een groter formulier met veel invulvelden nogal irritant) gaan zoeken naar de plek waar ik iets ben vergeten of fout heb gedaan...

Ik wil gewoon met kleur in het formulier zien dat iets niet klopt en daar direct mee aan de slag. Een tekstboodschap en de focus naar het veld in kwestie is gewoon logisch en handiger.

Achteraf gezien grappig dat ik eerst de hele DOM structuur heb aangepakt met javascript, om de functies van het script van de 3e partij te omzeilen. Ik was de bron van het probleem aan het aanpakken, ofwel voorkomen dat de alert werd aangeroepen. Normaliter een goede aanpak, maar hier bleek ik aan symptoombestrijding te moeten gaan doen...

Hoe is het dan toch gelukt?

Zoals net al min of meer gezegd, eigenlijk is het altijd simpeler dan je op een gegeven moment bedenkt...

    <script>    
    window.alert = function(){};
    </script>

Ja, het is een beetje een grove oplossing, want ik blokkeer hiermee alle alert calls voor deze pagina. Maar op deze pagina gebruik ik geen alerts, en liever sowieso niet. Daarnaast draait het formulier in een iframe, en blijft hiermee de blokkade van alerts tot alleen de iframe beperkt.

Soms is het zo simpel... :)

Leuk om als cadeau te geven! Dat was het eerste wat door mij heen ging toen mijn schoonvader zijn lijstje met verjaardagscadeaus liet zien. Er stond waarempel een Raspberry Pi op het lijstje. En nog wel bovenaan. Zelf heb ik nog een Raspberry Pi 1B in gebruik als Media center waarmee ik al mijn foto's en filmpjes aan de diverse apparaten in huis beschikbaar stel.

Oldskool naar de oplossing »

Het idee van mijn schoonvader was om weer eens lekker 'oldskool' te kunnen prutsen en wellicht her en der programmeren. Natuurlijk heb ik hem gelijk gewezen op de verschillende communities waar allerlei leuke Raspberry projecten op vermeld staan.

Iedereen in de familie vond het wel een goed cadeau eigenlijk en het was aan mij om het te regelen. Ten tijde van zijn verjaardagswens was de Raspberry Pi 2 de laatste telg in de Rpi familie. Net toen ik deze besteld had, kwam de 3 uit en moest ik bekennen dat ik dat feit even over het hoofd had gezien bij het bestellen. Oeps! Na wat gedoe met ruilen (wat ook weer helemaal goed is gekomen), kreeg ik gisteren een berichtje dat het niet helemaal leek te werken. Geen beeld, niets. Standaard als mij dat zelf gebeurt (alles goed? ja? stroom aan... en dan niets...), krijg ik het heel kort even warm. Zo van, is het nu DOA?

Om maar niet direct een heel RMA proces te moeten starten, toch maar even kijken of we konden troubleshooten en componenten konden uitsluiten.

Dus gezellig, schoonpa 's avonds op bezoek met de Rpi 3, en dan onderdelen van mijn werkende Rpi 1 uitwisselen en het probleem isoleren. Biertje erbij, hopen dat het geen nachtwerk wordt.

Na een tijdje uitsluiten blijkt dat er niets aan de hand is met de aangekochte hardware! Dat gebeurt mij niet vaak als er iets mis is. Op dit moment is het enige dat nog overblijft de HDMI poort van de TV bij mijn schoonvader, of misschien toch zijn usb toetsenbord/muis die hij niet had meegenomen. Dat konden we niet testen.

Raspberry Pi 3 en geïntegreerde bluetooth

Wel had hij zijn Bluetooth toetsenbord bij, en vandaar deze topic! Zo, dat was nog eens een lange intro voor mijn doen. Daarom ook de 'snelkoppeling' optie bovenin.

Mijn schoonvader gaf aan dat hij het liefst draadloos kon typen met zijn bluetooth toetsenbord, maar na succesvol opstarten konden we nog niet direct gaan typen helaas. Het volgende speelde namelijk: Raspberry Pi met NOOBS ofwel Raspbian als besturingssysteem bevat in de meest recente versie wel degelijk Bluetooth ondersteuning, maar deze is niet zo conventioneel toegankelijk via instellingen in de menu's van Raspbian (via de GUI).

Dat is gewoon 'ouderwets', of eigenlijk 'nieuwerwets' terminal werk.

Stap voor stap instructies

Beetje Googlen (was er zelf ook niet van op de hoogte) en prutsen, bood de volgende oplossing:

1. Open een Terminalsessie en voer in (gevolgd door enter):

• sudo apt-get install pi-bluetooth^[1]
• sudo apt-get update[^2]
• sudo reboot
• Open de Terminal sessie weer:
• Zet je bluetooth apparaat in discover modus
• sudo bluetoothctl
• agent on
• default-agent
• scan on
• pair xx:xx:xx:xx:xx, waarbij xx de nummers en letters zijn die je ziet staan bij het apparaat wat het meest op je bluetooth toetsenbord lijkt nadat je de vorige opdracht scan on hebt uitgevoerd.
• Waarschijnlijk wordt er nu een PIN code getoond, toets deze in op je toetsenbord (op je bluetooth toetsenbord), gevolgd door [ENTER].
• trust xx:xx:xx:xx:xx (Soms werkt dit ook als er geen PIN code wordt gevraagd of gegeven)
• connect xx:xx:xx:xx:xx

Hieronder nog even alleen de opdrachten voor gemakkelijk kopiëren en plakken voor in de terminal:

    sudo apt-get install pi-bluetooth \
    sudo apt-get update \
    sudo reboot \

Na de reboot:

    sudo bluetoothctl

Binnen de bluetoothctl:

    agent on
    default-agent
    scan on
    pair xx:xx:xx:xx:xx
    trust xx:xx:xx:xx:xx
    connect xx:xx:xx:xx:xx

Veel plezier vandaag,

tijdens internationale Pi-dag!

met het tikken via Bluetooth op je Raspberry Pi 3 via Bluetooth! Ook na een reboot blijft dit prima actief en werken. Dit houdt natuurlijk wel op zodra je het SD-kaartje weer reset.

Vrijwel ieder Analytics account krijgt ermee te maken, bezoeken die 0:00 seconden duren, niets uitvoeren op je site (geen conversies of vervolgpagina's bezocht) en je gemiddelden omlaag halen. Je bounce-rates schieten omhoog als je een kleine site bent en je weet gewoon niet waar je aan toe bent.

Beter bekend als Ghost referral spam, is dit gewoonweg irritant. Gelukkig zijn er een aantal manieren om dit op te lossen.

Stel filters in

Stel filters in op elke relevante Weergave of View die je gemaakt hebt binnen je Analytics account. Je kunt dit met de hand doen, maar dan ben je wel even zoet. Tevens moet je dan elke keer dat er weer een andere soort spammer langs komt, een nieuw filter bouwen of een bestaande aanpassen. Straks ben je nog meer bezig met spam uit je overzichten halen, dan met het bekijken van statistieken.

Er zijn meer mensen die dit hebben gedacht, en een stel slimmeriken hebben dit inmiddels lekker geautomatiseerd. Bezoek 1 van de volgende sites en maak gebruik van hun gratis tools en laat deze tools lekker de filters onderhouden voor je:

• Referrer-spam.help
• Spam filter installer

Besef je wel dat deze oplossing (inherent aan een filter in Analytics), niet met terugwerkende kracht zal opereren. Wat er dus al staat, blijft in je statistieken bestaan. Dus, eigenlijk, wacht niet langer!

Eventueel is er nog wel een manier om ook met terugwerkende kracht de gegevens uit je statistieken te verbergen. Let wel, dit is verbergen, i.t.t. het niet meer registreren via een filter.

Maak speciale segmenten aan

Bij elke Weergave of View in je Analytics account, wordt een set segmenten aangeleverd. Dit zijn eigenlijk gewoon verzamelingen van bezoekersdata, met een speciale verdeling, ofwel segmentering. Het leuke hiervan is dat je deze segmenten dus kunt loslaten op je data waar al vervuiling door Ghost referral spammers optreedt. Zo'n segment verbergt dan mooi de spam data en kan samen met een Alle gegevens segment in 1 grafiek worden getoond. Zie je meteen welk deel van je bezoekers een spammer is en wat de verschillen in gedrag op je site wel niet zijn.

Ik heb zo'n segment aangemaakt en je kunt deze importeren naar je segmenten bibliotheek door deze link te volgen. Verander bijvoorbeeld regel 1 en 2 van het segment van jouw-domein.nl naar je eigen website adres. Één versie met en één zonder www.

Selecteer in het overzicht naar keuze daarna je segment en je zult wellicht een verschil gaan zien in bezoekers.

Welke optie toepassen?

Ik zeg in dit geval, 'Why not both?'. De 1 sluit de ander niet uit en wanneer je bijvoorbeeld filters hebt gebruikt, kan het zo zijn dat er een nieuwe verwijzingsspammer bij komt in de loop van de tijd, en je niet goed door hebt dat dit langzaam de statistieken aan het vervuilen is. Daar komt het segment wat ik eerder aanraadde, weer goed van pas.

Het segment haalt namelijk verkeer wat niet aan een voor jouw bekende hostname vandaan komt, eruit. Dus het segment includes alle verkeer van bijvoorbeeld jouw-website-adres.nl, facebook.com, linkedin.com, etc. Nu heb je een segment wat andersom werkt dan een filter over het algemeen. Deze blokkeert ofwel werkt op exclude basis.

Daarom is het zo interessant om beiden te gebruiken!

Succes ermee! Als er vragen zijn, stel ze in de comments hieronder.

Als online marketeer kom je op een gegeven moment op een punt waarbij je je afvraagt; Kan mijn site nog sneller? En dan ga je de siteconfiguratie optimaliseren. Scripts in de footer, A-synchronous inladen waar mogelijk. CSS bestanden minify-en, en waarom de rest ook niet? HTML, Javascript... allemaal comprimeren die hap. Afbeeldingen optimaliseren. Zo dat scheelt. En nu? Wat kan er nog meer gedaan worden?

Een snellere server, meer capaciteit regelen? Als het een VPS is, waarom niet wat meer resources laten toewijzen voor een schappelijke prijs?

Quickwin

Of, en dat is een quickwin heb ik mogen ondervinden, gebruik een CDN. Een Content Delivery Network. Deze uitbaters hebben capaciteit genoeg en een super geoptimaliseerde infrastructuur klaarstaan voor jou en vele anderen.

Ik ben na enig zoeken maar eens met Cloudflare aan de gang gegaan. Ze hebben een gratis plan wat voor een simpel blogje of eenvoudige website al genoeg is over het algemeen. Ook krijg je er gratis de mogelijkheid bij om via het beheerderspaneel aan te geven dat je site onder vuur ligt. Nu zal ik daar waarschijnlijk niet mee te maken krijgen, maar het meldpunt vuurwerkoverlast had er rond oud en nieuw jongstleden last van, en dan is het toch wel handig als je met de klik van de muis de DDoS knop kan aanzetten en je site daarmee bereikbaar blijft.

Het proces is eenvoudig en ik zal hier dan ook niet uitvoerig over praten. Volg de instructies op hun site, stel de nameservers in bij je domein registrar en 24 uur geduld. Eigenlijk was dit het al een beetje.

Besef wel dat alle externe resources, zoals op mijn site bijvoorbeeld de Comment-sectie via Disqus en Google Analytics, niet via een CDN zullen profiteren van de caching functies.

De winst

Mijn site is er significant sneller door geworden en mijn laadtijd is ~25% sneller geworden (van 1,9s naar 1,5s), er is via de caching servers van Cloudflare nog steviger gecomprimeerd dan dat ik al had en dat scheelt ook een goede 25%.

En dit alleen al met een vrij eenvoudige site is toch het vermelden waard. Kun je nagaan wat de winsten kunnen zijn bij een site die al een tijdje in de lucht is en her en der plugins en modules en aardig wat content heeft draaien...

Mijn ijkpunten zijn de tools van Google Pagespeed Insights en GTMetrix.com geweest. Ik ben best wel tevreden over mijn scores nu.

Doe er je voordeel mee! En nee ik wordt niet gesponsord door Cloudflare :-)

Zelf je eigen blog hosten klinkt misschien als een hele toer, maar eigenlijk valt het best wel mee. Ja, je moet wel een beetje handig zijn met computers, en je schoonmoeder zal het vast niet voor elkaar krijgen zonder hulp. Er is genoeg over geschreven en als je toch ergens vast loopt, is er genoeg hulp te krijgen op diverse fora.

In deze blogpost neem ik als voorbeeld het zelf hosten van je blog op een Synology NAS, en heb ik gekozen voor Ghost blog software. Het leuke is, dat je met deze methode met hetzelfde gemak straks ook Wordpress, Joomla of Drupal zou kunnen starten. En wat helemaal mooi is, je hebt het eerste deel van deze handleiding dan al uitgevoerd, dus dat scheelt weer tijd! Dan kan je letterlijk binnen 5 minuten een volledig onafhankelijk zelf gehost blog draaiende hebben.

Wanneer je het voorbereidend werk meetelt, een Synology NAS^[1] in bezit hebt, en je hebt deze geüpdatet naar op zijn minst versie 5.2, kun je binnen 15 minuten al aan het tikken zijn en je eerste blogpost schrijven.

Het is een aardige handleiding geworden, en ik raad dan ook aan om deze van start tot eind te doorlopen. Hieronder toch maar even een inhoudsopgave, zodat het allemaal wat overzichtelijker wordt hopelijk.

INHOUDSOPGAVE

1. Je Synology voorbereiden
   1.1 Internetverkeer goed doorsturen
   1.2 Package Center
   1.2.1 Docker installeren
   1.3 Binnenkomend verkeer op Synology naar de juiste containers sturen
   1.3.1 Start Docker
   1.3.2 Software zoeken en downloaden
   1.3.3 Software starten in eigen container
   1.3.4 Nginx container configureren
   1.3.4.1 Controleren Nginx container
   1.3.5 Nginx container starten
2. Ghost blog installeren en instellen
   2.1 Ghost blog zoeken, downloaden, instellen
   2.2 Ghost blog starten
   2.2.1 Ghost is wel gestart, maar ik kan er niet bij via de browser!
   2.3 Lekker bloggen!

Wat het makkelijker maakt straks om je blog direct online aan te bieden, is dat je alvast een domeinnaam hebt gekocht en deze naar je ip-adres van je router hebt doorgestuurd of dit laten doen. Ik heb bijvoorbeeld www.timhuesken.nl gekocht voor €9 per jaar.

1. Je Synology voorbereiden

Er zijn een aantal dingen die we willen instellen op de Synology, zodat je blog straks direct te vinden is, ook van buitenaf. We gaan zorgen dat internetverkeer netjes bij je Synology terecht komt door de poorten goed in te stellen op je router, en we gaan de onderliggende software instellen die ons straks in staat stelt om met een simpele opdracht het blog te starten.

1.1 Router instellen voor je Synology

Zorg ervoor dat je Synology een verbinding met het internet heeft, en dat binnenkomend verkeer op poort 80 netjes naar je Synology wordt doorgestuurd. Wanneer iemand naar een website gaat, wordt er door elke browser standaard uitgegaan dat men naar poort 80 wilt gaan, tenzij anders aangegeven. Om straks wat gerommel met poorten te voorkomen, is het verstandig om een poort door te sturen op je router. In dit geval poort 80 naar het interne netwerk (naar het ip-adres van je Synology) op poort 8080 (dit mag ook een andere poort zijn). Dit geldt vanaf DSM 6.x, ofwel xpenology 6.x ook voor de https poort 443. Ik kwam er recent achter dat dit dan niet meer goed werkt. Pak dus bijvoorbeeld poort 4433.

Kort gezegd: Router > poort doorsturen >

• externe poort 80, doorsturen naar interne poort 8080
• externe poort 443 doorsturen naar interne poort 4433^[1:1]

Wanneer je dit hebt geregeld, ga je naar het beheersgedeelte van je Synology, vaak te vinden op het ip-adres van je Synology, poort 5000. Bijvoorbeeld zal de volgende URL je hier brengen: http://192.168.1.2:5000. Log in met het beheerdersaccount en wachtwoord en ga naar het 'Package Center'.

1.2 Package Center

In het Package Center van Synology staan allemaal kant-en-klare apps met allerlei soorten software. Omdat er nog geen package is voor Ghost, gaan we dit op een andere manier oplossen. Er is namelijk een stukje software, Docker, wat je Synology zal omtoveren tot een apparaat wat eigenlijk alle software die er is, zou kunnen gaan draaien. Het bouwt als het ware een virtuele omgeving bovenop het bestaande bestuurssysteem en leent de basis functies van dit bestuurssysteem binnen de verschillende 'zandbakken' die je kunt opstarten. Binnen Docker noemen ze dit 'containers'.

Zo'n container moet je zien als een afgebakende omgeving, waar jij bepaald wat er wordt gedaan en uitgevoerd. Hier gaan we straks Ghost laten draaien. Docker is daarnaast in staat om op een veilige manier te communiceren met de wereld buiten de zandbak, waardoor jij nu bijvoorbeeld in staat bent om deze blogpost te lezen!

1.2.1 Docker installeren

Zoek in het Package Center naar het pakket van Docker en klik op installeren. Zodra dit gebeurt is, ben je er eigenlijk al klaar voor om je blog op te gaan starten.

[

Om ervoor te zorgen dat het internetverkeer je blog netjes weet te vinden, zijn er nog wel wat instellingen nodig die we moeten uitvoeren wanneer we het blog willen gaan starten.

1.3 Binnenkomend verkeer op Synology naar de juiste containers sturen

We hebben hiervoor de router al juist ingesteld en ervoor gezorgd dat de basis voor je Ghost blog er staat. Nu moeten we alleen nog zorgen dat we straks ook onze container gemakkelijk op de juiste manier kunnen instellen.

Het internetverkeer komt aan op je Synology, maar we moeten dit nog naar de juiste container leiden, en ervoor zorgen dat deze container straks ook snapt wat het met deze verzoeken moet doen.

Om het verkeer naar de juiste zandbakken van Docker te leiden, is er een simpele ingreep nodig. Start Docker op binnen je beheersomgeving van je Synology. Je kunt deze vinden door linksboven de lijst met apps op te vragen. Hier staat Docker tussen.

1.3.1 Start Docker

[

Nadat je Docker hebt gestart zul je een overzichts pagina zien waar nu nog weinig informatie zal staan.

[

1.3.2 Software zoeken in downloaden

Klik nu op Register en zoek naar jwilder of nginx. We zijn op zoek naar de 'Automated Nginx reverse proxy for docker containers' van jwilder. Klik het zoekresultaat aan en klik als laatste op downloaden.

[

1.3.3 Software starten in eigen container

Wanneer de software is gedownload, kunnen we naar de volgende stap, en dat is 'Image'. Zoek binnen dit gedeelte naar de software die we hebben laten downloaden, selecteer deze door er 1 keer op te klikken en kies voor 'Starten'. Kies daar voor Starten met Docker uitvoeren voor nu.

[

1.3.4 Nginx container configureren

We krijgen nu een simpel scherm te zien waar wordt gevraagd een opdrachtregel in te vullen. Vul hier de volgende code in:

docker run -d --name nginx -p 8080:80 -p 4433:443 -v /volume1/docker/nginx/certs:/etc/nginx/certs -v /var/run/docker.sock:/tmp/docker.sock:ro jwilder/nginx-proxy

Deze opdrachtregel is uniform en maakt het makkelijker voor nu om snel te starten. Je hoeft nu namelijk alleen nog even door de opties heen te lopen en ze te controleren. Invoeren hoeft nu niet meer. Dit is zo, omdat we voor de optie zonder wizard hebben gekozen bij de vorige actie.

EDIT:

Het kan zijn dat je de opdrachtregel niet via de wizard kan invoeren zoals hier beschreven. Het kan echter wel gedaan worden m.b.v. de command-line via een SSH verbinding.

[

1.3.4.1 Controleren Nginx container

Doorloop nu de informatie door een aantal keer op volgende te klikken en bekijk de gegevens even. Misschien heb je een tik-fout gemaakt?

[

1.3.5 Nginx container starten

Wanneer je bij het laatste scherm bent aangekomen, vergeet dan niet het vinkje 'Voer deze container uit nadat de wizard is voltooid' aan te vinken zoals hier beneden aangegeven.

[

Voila, je hebt nu een webserver die verzoeken van het internet afvangt en deze netjes kan doorsturen naar de juiste container(s).

Ik heb je dit laten doorlopen zodat je straks met het grootste gemak meerdere blogs zou kunnen starten, mocht je dit graag willen. Of bijvoorbeeld andere software wilt gaan draaien en het internetverkeer op een nette manier snel en efficiënt naar de juiste container wilt gaan loodsen.

Credits ook voor Jason Wilder, die een volledig ingestelde image van Nginx beschikbaar heeft gesteld, die in staat is om dit allemaal in goede banen te leiden, zonder tussenkomst van jou, de beheerder. Anders zou je namelijk bij iedere blog of website die je zou willen aanbieden, de hele regels voor het routeren van het verkeer, iedere keer opnieuw handmatig moeten gaan aanmaken.

Dit is de voorbereiding die nodig is om nu (eindelijk?!) je Ghost blog te kunnen gaan opstarten en lekker te kunnen gaan bloggen.

2. Ghost blog installeren en instellen

Je Synology is nu helemaal voorbereid om je eigen Ghost blog te gaan hosten. Eventueel kun je ook allerlei andere software gaan laten draaien, maar daar heb ik het in deze blogpost nu niet over.

Ik heb dit blog draaien op Ghost, waar ik een tijdje geleden tegenaan liep toen ik Wordpress eigenlijk wel een beetje zat was. Ik had behoefte aan iets nieuws (esthetisch ben ik ook erg gecharmeerd van de standaard looks van Ghost - dat Casper als thema standaard mee levert) en Ghost is technisch gezien moderner, lichter qua server belasting en gewoon lekker simpel en kaal. Dat is ook zo'n beetje hun motto, 'Just a blogging platform'.

2.1 Ghost blog zoeken, downloaden, instellen

Goed, we gaan nu wat sneller door de stappen van het maken van een Docker container heen, want eigenlijk is het niet veel spannender dan wat we eerder hebben gezien bij de voorbereiding.

Start Docker op je Synology en zoek in het register naar Ghost. Als het goed is zie je de volgende resultaten:

[

Ga nu naar het onderdeel Image en selecteer Ghost en kies voor 'Starten met Docker uitvoeren', want we gaan weer met een opdrachtregel starten, voor het gemak en de snelheid.

docker run --name mijn-ghostblog -d -p 84:2368 -e VIRTUAL_PORT=84 -e VIRTUAL_HOST=www.jouwdomeinnaam.nl,jouwdomeinnaam.nl -e NODE_ENV=production -v /volume1/docker/ghost/mijn-ghostblog:/var/lib/ghost ghost

Voordat je de container start, lees onderstaand even rustig door:

Hierboven staat in de code www.jouwdomeinnaam.nl,jouwdomeinnaam.nl. Voor mijzelf heb ik hier natuurlijk www.timhuesken.nl ingevuld, maar als je dus zelf een blog wilt starten is dit nu de plek waar je jouw eigen domein invuld.

Wat doet dit commando verder?

• Het maakt een container met de naam mijn-ghostblog aan en laat deze permanent draaien -d als daemon
• Wij vertellen Docker dat de container verkeer op poort 84 wil ontvangen -p 84:2368 en dat de container intern het verkeer naar Ghost doorstuurt op poort 2368, wat een standaard poort voor Ghost is.
• Omdat we aangeven dat de -e VIRTUAL_HOST=www.jouwdomeinnaam.nl,jouwdomeinnaam.nl is, zal Nginx alle aanvragen voor deze URLs netjes doorsturen naar deze container. Dit is dus mogelijk omdat we de Nginx software van Jason Wilder gebruiken
• De container zal via Nginx het verkeer op poort 84 ontvangen dankzij -e VIRTUAL_PORT=84.
• We geven aan dat de basis van Ghost, Node.js, onze Ghost installatie in Productie mode moet gaan draaien met behulp van -e NODE_ENV=production. Hier kunnen we dadelijk gebruik van maken bij het instellen van Ghost.
• En als laatste maar niet geheel onbelangrijk; -v /volume1/docker/ghost/mijn-ghost-blog:/var/lib/ghost zorgt ervoor dat op mijn Synology er een folder wordt gelinkt aan de folder binnen Ghost, waar alle belangrijke informatie staat. En dit laatste is ook direct het mooie van Docker. Ik kan straks de container weggooien, of als deze om wat voor reden dan ook niet meer wil werken... Ik heb dankzij deze link al mijn gegevens nog!
• Het allerlaatste stukje aan het eind van de regel ghost, na de gelinkte folder, is niets meer dan de opdracht aan Docker om de image van Ghost te gebruiken.

Misschien geeft bovenstaand iets meer inzicht in hoe Docker nu in elkaar steekt en wat je er eigenlijk allemaal mee kunt bouwen. Maar goed, dat is voor een andere keer. Laten we nu eindelijk eens het blog gaan starten!

2.2 Ghost blog starten

Wanneer je eerder genoemde opdrachtregel weer door de 'Start met Docker uitvoeren' haalt, en kiest om de container uit te voeren wanneer de wizard voltooid is, kun je nu naar www.jouwdomeinnaam.nl gaan en zul je Ghost zien draaien!

Mocht dit niet zo zijn, dan is er nog 1 dingetje wat we even moeten doen, en dat is het volgende:

2.2.1 Ghost is wel gestart, maar ik kan er niet bij via de browser!

Het kan zijn dat, en waarschijnlijk is dat ook zo, we nog even Ghost moeten instellen op de achtergrond.

Sinds de komst van versie 2.0.0 van ghost zijn er een aantal zaken veranderd. Zo is er geen config.js meer zoals eerst beschreven in deze blogpost. Wat er nu in de plaats is gekomen is de mogelijkheid om via een Docker variabele de url in te stellen: -e url=http://jouwdomeinnaam.nl. Hierdoor wordt de config.production.json voorzien van de waarde van het domein waarop Ghost moet worden aangeboden. Mocht dit niet lukken, kan je altijd je container via de ssh terminal benaderen door docker exec -it mijn-ghostblog bash in te voeren. Hierna kun je naar de juiste plek navigeren en met commando vi /var/lib/ghost/config.production.json een aanpassing doen. Ga met de cursor naar de juiste regel waar de url staat vermeldt, druk op insert, ga naar het stukje met http://localhost:2368 en vervang dit met http://jouwdomeinnaam.nl. Druk op escape, gevolgd door :w, ENTER, :q, exit, ENTER.

2.3 Lekker bloggen!

Ga naar Docker en rechtsklik op je Container van Ghost. Kies voor 'Actie' en klik vervolgens op 'Opnieuw opstarten'. That's it!

Je blog moet nu toch echt werken. Ga naar www.jouwdomeinnaam.nl, stel wat zaken in en volg de tutorial van Ghost!

Is het nu toch nog niet gelukt? Laat even een reactie achter hieronder en ik zal je proberen te helpen.

Eventueel zou je het volgende kunnen proberen:

1. Installeer de node.js package van Synology via het Package Center (de play edities kunnen namelijk wel node.js draaien, wat Ghost blog weer als basis gebruikt)
2. Open een SSH terminal via Putty naar je NAS
3. Gebruik de volgende gids om Ghost blog te installeren