Code afspraken
Tijdens deze sprint hebben we verschillende afspraken gemaakt over code & performance, lees er hieronder meer over.
Code afspraken
We hebben in ons groepje tijdens deze opdracht van performance matter een aantal afspraken gemaakt over hoe we aan onze code werken.
- Custom properties
We de afspraak gemaakt om gebruik te maken van custom properties. Zo hebben we als team geen kleurafwijkingen en zorgt iedereen ervoor dat ze gebruik maken van nette en gestructureerde code
:root {
/* CUSTOM PROPERTIES */
/* Colours for specific allergies */
--walnoot-kleur: #cd9540;
--amandel-kleur: #f1c17e;
--cashewnoot-kleur: #e68460;
--ei-kleur: #f4eb34;
--vis-kleur: #daeeee;
--hazelnoot-kleur: #baddce;
--pinda-kleur: #72afa6;
--schelp-kleur: #f1c8ba;
--soja-kleur: #eae3d2;
/* Primaire kleuren */
--donkerblauw: #152a45;
--wit: #ffffff;
--zwart: #121212;
--grijs: #888682;
--mini-nav-grijs: #a9a1a1;
--licht-grijs: #eaeaea;
/* Font Family */
--body-font: "Montserrat";
}
- Class names
We hebben met elkaar de afspraak gemaakt om gebruik te maken van logische class names. Hierdoor is het makkelijk om een ander zijn code te lezen.
Achtergrondinformatie over performance:
De performance van een website is hoe goed de website functioneerd. Er zijn verschillende meettechnieken die gebruikt kunnen worden om de performance van een website te testen. Denk bijvoorbeeld aan hoe snel een website laad, wat wordt er als eerste geladen op de pagina, heeft de website last van layout shifts? Krijgt de gebruiker feedback over dat er daadwerkelijk iets gebeurd op de pagina bij het laden? Al deze dingen zijn belangrijk om rekening mee te houden als je een website maakt. Bij de website van Vini Mini hebben we ook geprobeerd hier rekening mee te houden, lees er hieronder meer over.
Wat hebben we allemaal getest en verbeterd aan onze performance op de website?
Wat zijn belangrijke performance aspecten?:
- Responsive images
<picture>
<source srcset="<%= data.product.plaatjes[0].smallAsWebP %>" type="image/webp" />
<source srcset="<%= data.product.plaatjes[0].small %>" type="image/jpeg" />
<img src="<%= data.product.plaatjes[0].small %>" class="product-img" alt="Product titel afbeelding" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" width="80em" height="60em" />
</picture>
In dit de code wordt aangegeven dat de afbeelding 100% van de viewport breedte inneemt als het schermformaat kleiner is dan 600 pixels, 50% van de viewport breedte bij een schermformaat tussen 600 en 1200 pixels, en 33% van de viewport breedte bij een schermformaat groter dan 1200 pixels. Met behulp van het <picture> element, srcset en sizes attributen wordt ervoor gezorgd dat de browser de meest geschikte afbeelding selecteert op basis van het beschikbare schermformaat en de grootte. Hierdoor wordt een optimale weergave en prestatie van de afbeeldingen bereikt op verschillende apparaten en schermformaten.