|Blog|Nieuwe website, nieuwe technieken

Een website om trots op te zijn

De nieuwe JVDmedia website staat ondertussen alweer een tijdje live en wat zijn we er blij mee! We hebben naast een nieuw en fris design ook de onderliggende techniek verbeterd.

De volgende technieken/frameworks zijn terug te vinden op onze website en je leest er meer over in dit blog.

Statamic
Tailwind CSS
Laravel Mix & Purge CSS

Statamic als CMS

We hebben als CMS (Content Management System) gekozen voor Statamic. De belangrijkste reden hiervoor is dat we onze website als showcase willen gebruiken van wat we kunnen als bedrijf. Omdat we met veel maatwerk projecten gebruik maken van het Laravel framework en Statamic gebouwd is op Laravel viel de keuze snel op Statamic. Daarnaast is Statamic, ten opzichte van andere systemen, heel anders opgezet.

Alles in Statamic is namelijk een bestand, er is geen koppeling met een database. Dit geeft een behoorlijke snelheidswinst ten opzichte van bijvoorbeeld WordPress, omdat WordPress eerst verbinding moet maken met een database. Dit houdt ook in dat alles bijgehouden kan worden in versie beheer. Behalve cache, dat moet je niet bijhouden 😉

Daarnaast is het maken van thema’s heel flexibel. Je kunt bijvoorbeeld de template taal van Laravel gebruiken (Blade) of Statamic’s eigen template taal (Antlers). In de volgende versie van Statamic wordt dit nog flexibeler.

Een groot pluspunt voor developers is dat de documentatie van Statamic heel goed in elkaar zit en de ‘community’ heel behulpzaam en ondersteunend is.

Lego stenen

Statamic is, zoals ze het zelf zeggen; “Statamic is like a box of LEGO® bricks”.

Dat wil zeggen dat je een achterkant hebt waar je je pagina’s, bestanden, formulieren en ‘collecties’ kunt beheren en samenstellen. Het samenstellen gebeurt in iets wat een fieldset genoemd wordt. Hierin wordt de structuur aangegeven waar een pagina, formulier of collectie aan moet voldoen en wat gebruikt kan worden om deze te vullen.

(Een collectie kan van alles zijn, wij hebben bijvoorbeeld een collectie voor onze blogs, quotes en cases.)

Je kunt per pagina of collectie een fieldset selecteren die specifiek voor die pagina geldt. Het is dan mogelijk om voor die fieldset een specifiek template te maken. Dit resulteert in een stuk maatwerk wat via het CMS te beheren is.

Styling

Het overgrote deel van de css van de website is in Sass geschreven, aangevuld met het css utility first framework Tailwind.

Je hebt nu vast drie vragen;

Wat is Tailwind
Wat is utility first?
Waarom aanvullen als het overgrote deel al geschreven is?

Tailwind is een utiltiy first css framework, daarover straks meer. Tailwind is gemaakt door Adam Wathan.

A utility-first CSS framework for rapidly building custom user interfaces.

Tailwind heeft van zichzelf geen standaard thema’s of componenten, het is net zoals Statamic een blokkendoos. Het bestaat uit allemaal kleine css classes (utilities) die één specifiek doel hebben, bijvoorbeeld de tekst grootte aanpassen, of de margin/padding aanpassen.

Een veel gehoord punt van kritiek op utility first is dat, vanwege een veelvoud aan classes op een element, je net zo goed inline styles kun t gebruiken. Dit is echter niet het geval, dit artikel gaat hier dieper op in. De hoofdmoot uit dit artikel is

All that being said, just because it looks the same doesn’t mean it is the same. Understanding how both practices differ is key to grasping the benefits of utility-first.

Inline styles allow you to do anything you want. You don’t have to follow any pre-existing definition.
Utility classes expose a well-defined API that you can use to compose more complex components

Voor meer informatie over utility first, Adam Wathan heeft een blog geschreven waar hij dit verder uitlegt.

We hebben Tailwind toegevoegd omdat we onze website ook deels willen gebruiken als showcase voor de mogelijkheden. Her en der zul je, als je de code van de website inspecteert, een volgende class tegen kunnen komen. Alle Tailwind classes hebben een prefix van “tw-” om botsingen met de bestaande css te voorkomen.

Nieuwe website, nieuwe technieken

In bovenstaand voorbeeld wordt de tekstgrootte aangepast op basis van responsive breakpoints.

Het gebruik van Tailwind stelt ons in staat om een snelheidswinst te behalen bij het opzetten van de templates doordat we alleen een class hoeven toe te voegen om specifieke css te activeren.

In de toekomst volgen hier meer blogs over.

Laravel Mix & PurgeCSS

Laravel mix is een tool om de javascript en css van een website mee te bouwen, of zoals ze het zelf zeggen;

An elegant wrapper around Webpack for the 80% use case.

Voor de niet-developers; webpack kan best ingewikkeld zijn om goed in te richten. Laravel mix neemt dit weg met een duidelijke syntax.

Het is niet voor niets standaard in Laravel opgenomen om de javascript en css te bouwen.

Aanvullend op Laravel mix wordt purgeCSS gebruikt om alle css die niet gebruikt wordt weg te halen. Dit resulteert in een kleiner css bestand. Kijk bijvoorbeeld naar de volgende verschillen.

Asset: css/jvdmedia.css | Size: 976 kB (development)

Asset: css/jvdmedia.css | Size: 113 kB (productie)

Dat is een verschil van 863kB! De css zal dus sneller geladen zijn, wat de laadtijd van de website verder verkort.

Inspiratie