Thema maartenvandekamp.nl beschikbaar op GitHub

Na een paar jaar van aanpassingen, en een recente heropbouw van de CSS, merkte ik dat de wijzigingen aan mijn website steeds grondiger werden. De afgelopen week ben ik bezig geweest om nieuwe Custom Post Types aan mijn website toe te voegen (advertenties, gastartikel), en al die code moet onderhouden worden.

Nu werkte het prima om dat op Dropbox te doen, en dan een .zip ervan te maken, maar als je merkt dat je wijzigingen – die je live hebt gemaakt – vergeet over te zetten in de Dropbox map, dan wil het nog wel eens fout gaan met benamingen en dergelijke.

Vandaar dat vanaf vandaag in ieder geval het thema van maartenvandekamp.nl op Github staat. Van daaruit trek ik een kopie naar mijn server, zodat ik altijd de up-to-date versie heb.

De code is nu nog een bonte verzameling van allerlei snippets van andere goed functionerende thema’s van WordPress, en de bedoeling is om dit thema volledig mijn eigen te maken.

De Custom Post Types als plugins staan er ook al op. Daar moet nog aan gesleuteld worden…

Heropbouw CSS maartenvandekamp.nl

De afgelopen twee weken ben ik bezig geweest om de CSS van de website maartenvandekamp.nl opnieuw op te bouwen. De manier waarop de website nu opgebouwd is, wordt ook wel Mobile First genoemd.

Mobile First

Mobile First betekent dat de website eerst wordt opgebouwd voor kleine schermen, zoals smartphones en tablets, en daarna aangepast wordt voor weergave op grotere schermen.

De achterliggende gedachte is dat een computer meer rekenkracht heeft dan een smartphone. De website wordt zo ‘licht’ mogelijk ontworpen zodat een smartphone deze snel kan weergeven. De website wordt ‘zwaarder’ – meer grafische opties en dergelijke – naarmate het scherm groter wordt. De rekenkracht van een computer is beter in staat om dit te berekenen.

De ‘ouderwetse manier’:

Afbeelding van computerscherm, tablet en smartphone
Website weergave past zich aan van groot naar klein
(Bron: link)

En de Mobile First manier:

Afbeelding van smartphone, tablet en computer scherm
Website wordt gebouwd voor smartphones, en past zich aan naar de grootte van het scherm.

(Bron: link)

Als basis heb ik het nieuwe thema van WordPress 4.1 gebruikt: Twenty Fifteen. Dit thema is volledig ‘responsive’ en past zich aan op het scherm waarop het wordt weergegeven. Een perfecte referentie om de CSS van de website opnieuw te schrijven!

De CSS is niet kleiner geworden, maar wel een stuk eenvoudiger te beheren. Daardoor kan ik sneller wijzigingen aanbrengen in de opmaak van de website!

Drie kwartier downtime op 27-12-2014

Er is sprake geweest van drie kwartier downtime – vanaf 19:00 tot 19:45. De oorzaak was een onverwachte Kernel Panic, waardoor de server niet meer reageerde.

Dankzij Pingdom en de Jetpack Monitor ben ik op de hoogte gebracht van het feit dat de server offline was.

Nieuwe website – Harm Jan Wieringa.nl

Sinds vandaag is er weer een nieuwe website bijgekomen. Voor Harm Jan Wieringa is harmjanwieringa.nl gebouwd, gebouwd (op moment van schrijven) met WordPress 4.1. Het standaard thema, Twenty Fifteen, is aangepast met een child-theme waarin enkele kleine CSS veranderingen zijn aangebracht.

Het thema is volledig responsive en schaalt goed op zowel smartphones, tablets en schermen met hoge DPI en hoge resoluties.

Database storing – met gevolgen

Vandaag was er weer een moment voor onderhoud. Dat onderhoud ging echter verkeerd, want de website lag er een uur lang uit. Het was de bedoeling om de database te upgraden naar nieuwe software zodat de website nog sneller zou worden, maar de update is nooit gelukt. Vandaar dat de website, na hard werken, weer op de oude software draait.

Veilig browsen op MaartenvandeKamp.nl

Google heeft recentelijk aangekondigd dat websites die informatie versleuteld verzenden naar de bezoeker, hoger in de zoekresultaten gaan plaatsen. Nou ben ik in juni bezig geweest om een certificaat voor mijn webmail te installeren, en daarop volgend vond ik dit een geschikt moment om ook mijn blog en bijbehorende CDN te voorzien van een certificaat.

Zo geschiedde, als je nu als bezoeker naar de website www.maartenvandekamp.nl gaat, dan zie je een slotje in de adresbalk die aangeeft dat de informatie versleuteld wordt tussen de server en de bezoeker. Dat geldt ook voor alle bestanden die vanaf het domein staticcdn.nl worden geserveerd voor deze website.

Website korte tijd offline wegens DDoS aanval

Vandaag is TransIP, het bedrijf waar ik mijn domeinnamen heb geregistreerd en een VPS heb draaien, aangevallen doormiddel van een DDoS aanval.

De VPS en website(s) waren korte tijd niet bereikbaar. Gelukkig is TransIP erin geslaagd de aanval af te wenden:

Nieuwe website Studio Frank Rijk

Vorige week is de nieuwe website van Studio Frank Rijk online gegaan. Van een oud WordPress thema naar een nieuwe thema, een child-theme, voorzien van headers waarop foto’s staan van de studio, de oefenruimte en de repetitieruimte. De website past zich aan naar de schermen van tablets en smartphones en is daardoor op elk apparaat te gebruiken.

Verder zijn de afbeeldingen geoptimaliseerd om zo min mogelijk bandbreedte te verbruiken en daardoor een optimale gebruikerservaring neer te zetten.

Specifieke CSS selector voor uitgaande domeinnamen

Ik ben constant bezig om mijn weblog over fotografie te verbeteren. Vandaag had ik weer een nieuw idee: bij elke uitgaande link wil ik een icoontje wat aangeeft dat het een externe link is. Daarvoor moet ik verschillende CSS selectors gebruiken om het gewenste doel te bereiken.

Na zoeken kwam ik op de volgende code uit:

a[href]:not([href*="maartenvandekamp.nl"])::after

Wat deze code doet is zoeken naar het element href, een attribuut van a, en als de href GEEN (vandaar not() ) maartenvandekamp.nl bevat, dan moet er een icoontje achter. Maar hij pakte alle links waar geen maartenvandekamp.nl in zat, ook links die wel intern waren maar een href van /stel-een-vraag/ hadden.

Dat was niet de bedoeling.

Specifieker zijn

Ik moest specifieker zijn en aangeven in welke class hij deze selector uit moest voeren: de class .entry-content, waarin de tekst van het artikel staat en .comment-content, de class waarin de tekst van de reactie staat. Uiteindelijk is het de volgende code geworden:

.entry-content a[href]:not([href*="maartenvandekamp.nl"])::after,
.comment-content a[href]:not([href*="maartenvandekamp.nl"])::after {
 font: normal 16px/1.75 'Genericons';
 content: '\f442';
 vertical-align: middle;
}

Nu worden links netjes voorzien van een icoontje, op basis van Genericons, aan de link toegevoegd.