Eindelijk… Een nieuwe website! Het kostte behoorlijk wat bloed, zweet en tranen, want zoals dat gaat bij us.: iedereen heeft overal een mening over. Uiteindelijk kozen we voor een stapsgewijze aanpak, waarbij iedereen tussen de bedrijven door een bijdrage leverde aan het eindresultaat. Én aan het vervolg - een website is tenslotte nooit af. Benieuwd naar jullie reacties!
Static Site Generator
We wilden geen CMS gebruiken voor onze website. Dat geeft alleen maar extra complexiteit en eigenlijk hebben we het niet nodig. Een static site generator was dus een goed alternatief. Er zijn meerdere static site generators op de markt - het concept begint ook aan populariteit te winnen. Wij kozen de ultra snelle hugo.
Het idee achter een static site generator is dat een CMS soms eigenlijk alleen maar complexiteit toevoegt, ten koste gaat van de flexibiliteit en onnodig veel serverruimte gebruikt. Een statische website kan in zijn geheel draaien op een CDN: wel zo makkelijk. Ander voordeel: voor een statische website zijn geen speciale skills nodig, het is gewoon HTML, CSS en JavaScript. Iedereen kan dus een bijdrage leveren. En - niet onbelangrijk - wij wilden gewoon alle kanten op kunnen. Het maken van je eigen website is al lastig genoeg.
Omdat we geen CMS hebben, schrijven we de content gewoon in Markdown files. Direct in versie controle: makkelijk voor techneuten, wat lastiger voor de rest.
Haarscherp Beeld
Om ervoor te zorgen dat we haarscherp beeld tonen op HiDPI-schermen (zoals retina-schermen of 4k-schermen) maken we gebruik van zogenaamde client hints en het srcset attribute. Dit betekent dat de browser vraagt om een beeld dat past bij de DPI van het betreffende scherm. Je krijgt dus op elk device (smartphone, tablet, laptop, desktop) een beeld te zien dat past bij de afmetingen en resolutie van het scherm.
Beelden moeten dus op maat worden geleverd in verschillende resoluties: monnikenwerk dat we liever voorkomen. Door gebruik te maken van de imgix service wordt on the fly voor een juist beeld gezorgd, zo mogelijk omgezet naar het webp formaat.
Hosten op AppEngine (Google CLoud)
In principe hebben we AppEngine niet nodig voor een statische website. Maar AppEngine deployed nou eenmaal lekker makkelijk. En - wat ook erg prettig is - het stelt ons in staat gebruik te maken van een wereldwijd CDN-netwerk voor alle statische content: een standaard AppEngine feature. Daarnaast is het extreem eenvoudig om via AppEngine een letsencrypt-certificaat te gebruiken en de website zonder gedoe via HTTPS te serveren.
Nieuwe versies uitrollen doen we met behulp van BitBucket Pipelines. Zowel voor de automated build als de Automated Release gaat dat direct vanuit versie controle.
TypeScript
Ok, het is voor deze site een beetje over-engineering, maar we willen ook altijd graag een beetje spelen met leuke technieken. De Javascript schreven we daarom in TypeScript. Gewoon, omdat het kan.