Inleiding
Voor de incidentele bezoeker valt het misschien niet meteen op, maar deze website is afgelopen week volledig vernieuwd. De inhoud en functionaliteit zijn gelijk gebleven, maar achter de schermen is er behoorlijk veel veranderd. In dit artikel geef ik een kijkje onder de motorkap.
Basis
Aan het basisprincipe van een website is niets veranderd. Nog steeds genereert een PHP-interpreter een lap HTML-code die met behulp van CSS en JavaScript een functioneel en aanschouwelijk digitaal thuis oplevert. Wel heb ik een aantal zaken toegepast die de dataoverdracht versnellen, mijn site beter vindbaar en bepaalde onderdelen beter toegankelijk maken.
CSS
Als hulpmiddel bij het opbouwen van een website voor kleine en grote schermen maak ik sinds een aantal jaren gebruik van Bootstrap. Dit framework neemt mij een hoop werk uit handen:
- consequente opmaak van bijna alle mogelijke onderdelen
- een grafisch raster dat flexibel schaalt met de breedte van het scherm
- volledige aanpasbaarheid qua kleuren en afmetingen
Laatstgenoemde eigenschap benutte ik voorheen slechts ten dele. Ik kopieerde complete blokken van de uiteindelijke CSS-code en paste deze aan. Groot nadeel: als ik een kleur wilde veranderen, moest ik handmatig op zoek naar alle plekken waar deze voorkwam; geen pretje bij het ontwikkelen of ombouwen van een website.
SASS
Toen ik de afgelopen weken besloot de overstap van Bootstrap versie 3 naar versie 4 te maken, wilde ik ook van bovengenoemd nadeel af. Ik had wel eens eerder gehoord over SASS, maar hoe moest dat dan precies? Gelukkig is Bootstrap er op voorbereid om te worden aangepast.
Bijkomend voordeel van SASS: mijn bronbestand voor de opmaak (.scss)
is veel kleiner dan het oude .css-bestand. Ook is het beter leesbaar
en makkelijker te onderhouden. Als laatste voordeel kan de compiler het
uiteindelijke bestand extreem compact maken (minificeren). Zo worden
meerdere bestanden samengevoegd en op één regel geperst. Voor de browser
van de bezoeker maakt dit niets uit, behalve dat de dataoverdracht
sneller gaat:
<link rel="stylesheet" href="css/app.min.css">
JavaScript
Ook bij het gebruikte JavaScript kon ik met een compiler de leesbaarheid
tijdens het ontwikkelen verbeteren en de prestaties voor de bezoeker
verhogen. De bronbestanden van jQuery, Bootstrap en mijn eigen
aanpassingen worden door UglifyJS samengevoegd en geminificeerd.
Uiteindelijk voeg ik slechts één tag in mijn HTML toe om alle scripts
mee te nemen:
<script src="js/app.min.js"></script>
Daarnaast worden op weblog-pagina's zoals deze nog CSS- en JavaScript-bestanden toegevoegd van HighlightJS, maar dat mag de pret niet drukken.
Plyr
Als muzikant wil ik graag mijn muziek met andere mensen delen. Tot
voor kort gebruikte ik daarvoor de standaard HTML5-audio-tag. Ik was er
van overtuigd dat de audioplayers zo het best toegankelijk waren. De
browsers zouden er toch zeker voor zorgen dat bijvoorbeeld een
slechtziende gebruiker met het toetsenbord de muziek kon
beluisteren?
Nee dus. Ik kreeg van verschillende kanten de feedback dat de players in elke browser anders uitzagen en niet altijd (volledig) met het toetsenbord te bedienen waren. Ik ging op zoek en vond een universeel en open-source alternatief: de Plyr-mediaplayer. Door de duidelijke documentatie was hij snel geïntegreerd.
Sitemap
Een internet zoekmachine kan natuurlijk elke website vanaf de home-pagina doorspitten op zoek naar inhoud en verdere links. Veel envoudiger is daarentegen het gebruik van een zogenaamde sitemap, een XML-bestand met een machineleesbare opsomming van alle pagina's. Dat scheelt de crawler een heel stuk werk en geeft de beheerder een beetje meer controle over zijn vindbaarheid.
In het verleden maakte ik gebruik van één statische sitemap; een simpele opsomming van alle bestaande pagina's - klaar. Toen lanceerde ik dit weblog en wilde ik de artikelen ook toevoegen. Natuurlijk moest dat wel geautomatiseerd gebeuren, dus combineerde ik beide smaken in, in totaal, drie XML-bestanden:
sitemap.xml: een opsomming van<sitemap>s in één<sitemapindex>sitemap-static.xml: alle statische pagina'ssitemap: een verwijzing naar een PHP-script dat alle weblog-artikelen toevoegde aan een aparte sitemap
Bij de ombouw van de afgelopen weken heb ik dit vereenvoudigd door met
Apache's URL-rewrite regels een verzoek voor /sitemap.xml om te buigen
naar een PHP-script dat alles afhandelt. De lijst met pagina's wordt nu
gegenereerd vanuit het (deels dynamische) navigatiemenu. Zo weet ik
zeker dat alles wat in het menu verschijnt, ook wordt aangeboden aan de
zoekrobots.
Conclusie
Door de ombouw naar Bootstrap 4 heb ik weer een hoop geleerd over dit framework en kan ik het veel effectiever inzetten. Het neemt me nu nóg meer werk uit handen en bespaart mij zo tijd. Tijd die ik dan weer kan besteden aan nieuwe muziek- en/of programmeerprojecten.