Front-end technologie voor Hugo websites

Technische schuld

Een ijzersterke technologische basis is cruciaal voor het langetermijnsucces van een digitaal bureau en zijn klanten. Vamudo gelooft in werken zonder technische schulden, wat betekent dat er geen sluiproutes genomen worden ten behoeve van winst op korte termijn, die ten koste gaan van kwaliteit. Technische schuld blijft je namelijk onvermijdelijk achtervolgen. Na verloop van tijd komt het in veelvoud terug op je bord in de vorm van bugs of beveiligingsproblemen. Technische schuld inlossen wanneer het eigenlijk al te laat is, kost veel capaciteit. Openstaande technische schuld beperkt daarom toekomstige capaciteit die besteed kan worden aan behoud van de productkwaliteit, het bedienen van nieuwe klanten en het ondersteunen van bestaande klanten. Technische schuld is een veel voorkomende valkuil in het technische vakgebied. Het belemmert ook de transparantie naar klanten toe, omdat natuurlijk niemand er graag mee te koop loopt. Transparantie is een van de kernwaarden van Vamudo. Het dwingt ons om altijd de hoogste kwaliteitsnormen te handhaven, wat direct waarde toevoegt aan onze producten. Bovendien helpt het onze klanten om weloverwogen beslissingen te nemen over de geschiktheid van onze oplossingen voor hun situatie. Eén ding is zeker als je ervoor kiest om met Vamudo te bouwen: het zal glashelder zijn wat je kunt verwachten. En wat je kunt verwachten is een moderne website van topkwaliteit.

Bootstrap

Vamudo gebruikt Bootstrap, een populaire front-end toolkit, om de pagina’s van Hugo websites samen te stellen. Bootstrap biedt een uitgebreide verzameling CSS en JavaScript componenten, lay-outs en hulpprogramma’s, waardoor het ontwikkelingsproces wordt gestroomlijnd en consistente ontwerppatronen over de gehele website worden gegarandeerd. Met Bootstrap kunnen ontwikkelaars met minimale inspanning snel prototypes maken en responsive, mobile-first websites bouwen. Het biedt een flexibel rastersysteem, responsieve typografie, onderdelen voor formulieren, navigatiecomponenten en nog veel meer, waardoor de ontwikkeltijd en -inspanning aanzienlijk wordt verminderd. Om een naadloze integratie van Bootstrap in elke Hugo website te garanderen, maakt Vamudo gebruik van de gohugoio/hugo-mod-bootstrap-scss Hugo module. Deze module bevat de SCSS en JavaScript broncode van Bootstrap, zodat deze daadwerkelijk kan worden gebruikt binnen Hugo projecten. Een groot voordeel van deze aanpak is dat alleen de onderdelen van Bootstrap eruit gepikt kunnen worden die echt nodig zijn in een project, in plaats van de complete Bootstrap bibliotheek. Dat minimaliseert de ‘project bloat’, wat betekent dat alleen de essentiële afhankelijkheden worden gebundeld in de uiteindelijke website. Hierdoor blijft de voetafdruk van de Hugo websites van Vamudo klein en zullen de laadtijden zo snel mogelijk zijn.

SASS

Bovenop Bootstrap heeft Vamudo een eigen SASS laag ontwikkeld. SASS (Syntactisch Awesome Style Sheets) is een krachtige CSS (Cascading Stylesheets) preprocessor die een reeks functies en verbeteringen aan de standaard CSS syntax teovoegt. SASS biedt talloze voordelen ten opzichte van gewone CSS. Het biedt variabelen, waardoor het hergebruik van waarden in meerdere stijlbestanden mogelijk wordt en thematisering en maatwerk vergemakkelijkt wordt. Met mixins kunnen herbruikbare codeblokken worden gemaakt, waardoor redundantie wordt verminderd en de onderhoudbaarheid wordt verbeterd. Het hiërachisch nesten van stijlen vereenvoudigt de CSS-structuur, waardoor deze leesbaarder en intuïtiever wordt. Bovendien ondersteunt SASS functies, operators en directives, waardoor complexe berekeningen en dynamische styling ook binnen handbereik liggen. Deze eigenschappen van SASS stellen ontwikkelaars in staat nettere, meer modulaire en schaalbare stylesheets te schrijven. Vamudo maakt verder gebruik van de kracht van Hugo Pipes, dat SCSS omzet in CSS en ECMAScript-modules bundelt. Deze integratie vereenvoudigt de ontwikkelprocedure aanzienlijk. Er is bijvoorbeeld geen aparte webpack configuratie nodig.

Bootstrap componenten verpakken in SASS

Vamudo breidt Bootstrap componenten uit door deze in de SASS code te verpakken met behulp van het sleutelwoord @extends. Deze aanpak stelt ons in staat om het uiterlijk en gedrag van Bootstrap componenten aan te passen aan specifieke ontwerpvereisten, zonder de HTML layouts te vervuilen met allerlei bootstrap classes. Helaas vereisen bepaalde Bootstrap componenten, zoals de dropdown, nog steeds de opname van Bootstrap CSS classes in de HTML templates vanwege de nauwe koppeling van Bootstrap JavaScript componenten met CSS classes. Het zou misschien eleganter zijn geweest als Bootstrap zijn JavaScript componenten aan HTML gegevensattributen had gekoppeld. Dit is de benadering die Vamudo gebruikt om JavaScript met HTML te verbinden.

Dynamische styling met SASS as Go templates

Vamudo maakt dankbaar gebruik van de mogelijkheid van Hugo om SCSS bestanden uit te voeren als Go templates. Hierdoor kunnen thema-instellingen, zoals kleuren en lettertypen, die door middel van het content management systeem van de website en opgeslagen in Hugo website gegevens, als SASS variabelen in SCSS bestanden worden geïnjecteerd. Deze variabelen overschrijven vervolgens SASS en CSS variabelen die door Bootstrap worden gebruikt, wat de Hugo websites zeer flexibel om te thematiseren maakt.

Een eigen kijk op atomic design

Vamudo gebruikt zijn eigen interpretatie van de atomic design methodologie. De stijlen op paginaniveau worden niet zozeer gebruikt om het hoogste niveau van ontwerpgetrouwheid weer te geven, maar eerder om variaties op hoog niveau in templates tussen verschillende soorten pagina’s te definiëren, zoals de homepage versus een blog artikel. Volgens Vamudo heeft het sjabloonniveau weinig praktisch nut buiten design systems en wireframing. Het template nivueau wordt daarom toegepast om groepen organismen samen te voegen op het niveau van secties binnen een pagina, in tegenstelling tot het stylen van gehele pagina’s. Het organismeniveau wordt gebruikt zoals bedoeld: moleculen samenvoegen om een relatief complex, apart deel van een interface vorm te geven. Atomen en moleculen worden ook gebruikt zoals bedoeld. Atomen worden gedefinieerd voor basisbouwstenen, oftewel componenten die niet verder uit te splitsen zijn in nog kleinere componenten. Moleculen worden gebruikt om groepjes van aan elkaar gerelateerde atomen te definiëren. De kloof tussen het molecuul- en organismeniveau kan in sommige situaties behoorlijk groot worden. Daarom voegde Vamudo het celniveau toe tussen het molecuul- en organismeniveau om meer flexibiliteit te creëren om SASS code voor complexe organismen netjes georganiseerd te houden.

BEM-methodologie binnen atomair ontwerp:

Vamudo past verder de BEM-methodiek (Block-Element-Modifier) voor CSS toe binnen atomic design. BEM stelt een specifieke naamgevingsconventie voor die helpt bij het creëren van duidelijke, onderhoudbare en herbruikbare stijlen. Blokken vertegenwoordigen onafhankelijke, op zichzelf staande componenten, elementen zijn geneste onderdelen van deze blokken en modifiers duiden variaties van het uiterlijk of gedrag van blokken of elementen in verschillende contexten aan. Door BEM te combineren met atomic design zorgt Vamudo voor een gestructureerde en schaalbare benadering van CSS ontwikkeling.

Conclusie

Vamudo’s gebruik van moderne front-endtechnologieën, zoals Hugo-, Bootstrap-, SASS- en ECMAScript-modules, in combinatie met hun eigen interpretatie van atomic design, vormt de basis voor zeer geoptimaliseerde, flexibele en toekomstbestendige websites. Door de kracht van SASS te benutten, kunnen ontwikkelaars gebruikmaken van geavanceerde functies om hun productiviteit te verhogen en onderhoudbare code te produceren. Bootstrap stimuleert het ontwikkelingsproces vanuit de kern en biedt een uitgebreide toolkit met componenten efficiënt op voortgeborduurd kan worden. Vamudo’s integratie van Hugo, SASS en ECMAScript modules met DecapCMS maakt dynamische thematisering en maatwerk mogelijk. Met oog voor detail en de toepassing van methodologieën zoals BEM en atomic design, levert Vamudo uitzonderlijke codekwaliteit, wat resulteert in visueel verbluffende, toekomstbestendige websites die uitstekende gebruikerservaringen bieden.