11 december, 2016

Give me back my scroll wheel!

De functionaliteit om met je scrollwiel op een link te klikken, zodat deze in een nieuw tabblad wordt geopend, is op veel websites stuk: de link wordt in het huidige tabblad geopend of soms in het huidige tabblad en in een nieuw tabblad. Bekende websites waar dit misgaat zijn bijvoorbeeld nos.nl en marktplaats.nl.

Dit is irritant en daarom een simpele oplossing. Sleep de onderstaande link (bookmarklet) naar je favorieten en klik erop wanneer een website vervelend doet.

Fix scrollwiel

Iedere keer op die link moeten klikken is uiteraard nog steeds niet optimaal en daarom ook een Chrome plugin die de bovenstaande code op iedere website automatisch uitvoert.

Chrome plugin

Waarom is ... ? Een google Top 25

Een keywordanalyse is één van de belangrijkste taken, voordat je gaat beginnen aan zoekmachine optimalisatie voor je website. Er moet natuurlijk wel worden gezocht op het keyword waar je je website voor wil optimaliseren.

Een keywordanalyse kan echter ook gewoon leuk zijn. Waar zoeken mensen nou eigenlijk naar in Google? Waar willen ze antwoord op? Vandaag de eerste uit (waarschijnlijk) een hele serie.

Waarom is (of zijn) … ?

Een top 25
Het getal tussen haakjes is het aantal mensen dat hier per maand op zoekt.

  1. waarom zijn bananen krom? (5400)
  2. waarom is zeewater zout? (1900)
  3. waarom is de lucht blauw? (720)
  4. waarom is sporten gezond? (170)
  5. waarom is roken ongezond? (170)
  6. waarom is een banaan krom? (140)
  7. waarom is mijn internet zo traag? (140)
  8. waarom is roken slecht? (110)
  9. waarom is de eiffeltoren gebouwd? (91)
  10. waarom is er kinderarbeid? (73)
  11. waarom zijn marokkanen naar nederland gekomen? (73)
  12. waarom is de euro ingevoerd? (73)
  13. waarom is de jeugd zo verpest? (73)
  14. waarom zijn vrouwen zo moeilijk? (58)
  15. waarom is de aarde rond? (58)
  16. waarom is alcohol slecht? (58)
  17. waarom zijn verzadigde vetten ongezond? (46)
  18. waarom is pluto geen planeet? (46)
  19. waarom is bloed rood? (46)
  20. waarom is bewegen belangrijk? (46)
  21. waarom is de eu opgericht? (46)
  22. waarom is de berlijnse muur gebouwd? (46)
  23. waarom is een brandweerauto rood? (46)
  24. waarom is fruit gezond? (46)
  25. waarom is gymmen belangrijk (46)

Nog enkele leuke die de top 25 net niet gehaald hebben

  1. waarom is pino blauw? (36)
  2. waarom zijn vrouwen zo gemeen? (22)
  3. waarom is persoonlijke hygiëne belangrijk? (22)
  4. waarom zijn chinezen geel? (16)
  5. waarom zijn er muggen? (16)

Eenvoudige JavaScript error logging met Analytics

Hoe goed je je website ook getest hebt er zullen fouten in blijven zitten. Er zijn teveel combinaties van OS- en browserversies om allemaal te kunnen testen. Het is daarom belangrijk om te weten te welke errors je gebruikers tegen aanlopen. Dit kleine stukje code trackt alle JavasScript-errors met Google Analytics.

window.onerror = function(error_msg, url, line_number) {
  var error = 'msg: ' + error_msg + '; url: ' + url + '; line:' + line_number;
  _gaq.push(['_trackEvent', 'Error', window.location.pathname, error, 0]);
}

Vervolgens vind je de errors op de volgende manier terug in je Analytics.

Analytics error log

Wat is JSONP?

JSONP is een manier om met JavaScript Cross-Origin Requests te doen. Dat wil zeggen om requests te doen naar een server binnen een ander (sub)domein dan het huidige. Dit is namelijk met een standaard XMLHttpRequest niet mogelijk wegens veiligheidsoverwegingen. In nieuwe browsers is dit probleem opgelost door de implementatie van Cross-origin resource sharing (CORS). De implementatie  van CORS vraagt echter om complexere aanpassingen van je webservice dan JSONP en wordt bovendien niet ondersteunt door oude browsers en veel mobiele browsers. Veel webservices maken daarom nog steeds gebruik van JSONP om Cross-Origin Requests af te handelen.

Wanneer jQuery wordt gebruikt is de implementatie van JSONP erg simpel. Door simpelweg ?callback=? toe te voegen aan een request maak je van een normaal JSON request een JSONP request.

// standaard JSON request naar een eigen webservice
var my_webservice = 'www.my_own_domain.com/webservice';
var req = $.getJSON(my_webservice);

// standaard JSONP request naar een webservice buiten het eigen domein
var not_my_webservice = 'www.not_my_own_domain.com/webservice';
var req = $.getJSON(not_my_webservice + '?callback=?');

JSONP heeft enkel een aantal beperkingen ten opzichte van een normaal XMLHttpRequest en het is daarom goed om te begrijpen wat er gebeurt.

Daar een standaard XMLHttpRequest dus niet werkt wordt er bij JSONP een ‘trucje’ toegepast. Het request naar de externe webserver wordt gedaan door het laden van een extern script. In de querystring van de locatie van het externe script kunnen variabelen aan het request worden meegegeven. De webservice geeft vervolgens zijn antwoord op het request terug in het geladen script. Een implementatie in Vanilla JavaScript zou er zo uit kunnen zien.

// De callback functie die wordt aangeroepen, zodra het script is geladen.
var foo = function(response) {
  // Hier kun je iets met het antwoord van de webservice gaan doen
}

// De externe webservice. In de querystring wordt de naam van de callback functie meegeven,
// zodat de teruggegeven data hierin kan worden gewrapped. De JSON krijgt Padding, oftewel JSONP.
var not_my_webservice = 'www.not_my_own_domain.com/webservice?callback=foo'

// Initialiseer het script element
var script = document.createElement('script');
script.src = not_my_webservice;
script.type = 'text/javascript';
script.charset = 'utf-8';
script.async = true

// Injecteer het script in de head van pagina.
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

Het antwoord van de webservice ziet er dan bijvoorbeeld zo uit:

foo({some_key: some_value})

Zodra het script geladen is zal dus de callback functie worden uitgevoerd waarbij de data als argument aan de functie wordt meegegeven. In deze callback-functie kun je vervolgens iets gaan doen met de data.

Door het mechanisme achter JSONP te snappen zie je ook direct de beperkingen. Zo is het bijvoorbeeld enkel mogelijk om GET-requests te doen en is er niet de mogelijk voor error handling. Een 404 van de webservice wordt hierdoor bijvoorbeeld niet ondervangen. Nu begrijp je dus ook waarom het volgende stukje code met jQuery niet zal werken.

var not_my_webservice = 'www.not_my_own_domain.com/webservice';
var req = $.getJSON(not_my_webservice + '?callback=?');
req.error(function() {
  // Deze code zal nooit worden uitgevoerd.
});

Hallo wereld!

Hoi, welkom op mijn blog!

Zoals de url al wel weggeeft is mijn naam Ewout Kleinsmann. Ik ben internetondernemer, student Electrical Engineering en hou van reizen. Deze blog zal over alledrie gaan, maar met een zeer sterk accent op internet.

Soms in het Nederlands, soms in het Engels en soms allebei.