Spring naar hoofdtekst

FWieP.nl makeover 2020

Geplaatst op door ,
Laatste aanpassing op .

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's
  • sitemap: 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.

Inhoudsopgave

Atom-feed Atom-feed van FWiePs weblog

Artikelen


Categorieën

Doorzoek de onderstaande categorieën om de lijst met artikelen te filteren.