Dit project is een opdracht die we heb ontvangen van het softwarebedrijf De Voorhoede om de website van DDA te maken en te reviseren. Het doel van deze opdracht was om de bestaande website te verbeteren aan de hand van nieuwe designs. Ook is het van belang dat er dynamische data wordt opgehaald vanuit een API of database.
In de huidige sprint 11 wordt de nadruk gelegd op het toepassen van de standaarden die we voorgaarde sprint hebben geleerd, met daarbij het ontwerpen en toepassen van mooie en aantrekkelijke user interfaces en het samenwerken in een repository met branches en pull / merge requests.
- DDA
Dit zijn de code conventions die we hebben gebruikt bij de development van dit project:
- Alles engels
- In branches werken
- Conventional commits
- Kebab case voor classes
- Camel case voor JS
- Button -> btn
- Witruimtes
- Nesting (maar niet teveel)
Dit is hoe we de prioriteit hebben gelabeld aan een functionaliteit.
- Must have -- PO1
- Should have -- PO2
- Wont have -- PO3
Voor pull requests gebruiken we de template van fdnd-agency
De hele website bestaat uit het figma design van de opdrachtgever. Wij hebben deze ontwerpkeuzes toegepast op de website wat je kan zien aan de componenten:
Bij de ontwikkeling van de pagina is gewerkt volgens het mobile first-principe. Hierbij is ook rekening gehouden met de responsiveness van de typografie voor grotere schermen. Dit is gedaan door middel van CSS clamp(). Deze aanpak is verwerkt in de styleguide van de basic-styling.
De website is gemaakt aan de hand van meerdere componenten. We hebben alle elementen die vaker voorkomen op de website gemaakt als component zodat deze elementen niet steeds overnieuw gemaakt hoeft te worden. Een paar componenten die we hebben gemaakt zijn:
- Buttons
- image cards
- event lists
- labels
- href linkjes
- section headings
- footer
- header
De rest van de componenten / partials zijn te vinden in de "partials" folder in de repository.
Tijdens dit project hebben we een aantal standaarden aangehouden om een toegankelijke website te maken voor de gebruikers. We hebben de volgende standaarde toegepast:
- Performance enhancement
- Progressive enhancement
- Toegankelijkheid
Om de performance van de website optimaal te houden hebben we tijdens de development verschillende technieken gebruikt om de performance te verbeteren, waaronder:
Webp en avif is moderne formatting voor images. De bestandsgrootte is kleiner ten opzichte van jpeg of png wat betere performance biedt.
De images uit de Directus API kun je ophalen als format avif of webp. Er zijn ook statische images in de assets folder. In de assets folder bevinden zich ook de webp en de avif format van deze images. En als fallback heb ik de normale format png als de browser van de gebruiker bijvoorbeeld nog geen webp of avif support.
Om layout shifts te voorkomen hebben we een width en height toegevoegt aan elke image. Bij het renderen van de pagina weet de browser wat de height en width van de image is waardoor deze ruimte gereserveerd kan worden. Hierdoor zal de gebruiker geen verschuivingen zien waardoor de user experience verbetert.
De images zitten nu in een <picture> tag. In de picture tag zijn een aantal source's met verschillende width's aangemaakt. Nu gaat de browser zelf uitzoeken welke source het beste past bij de omstandigheden. Het kijkt of de browser avif of webp ondersteunt en het kijkt naar de media query(schermgrootte) (als deze zijn geimplementeerd). Vervolgens kiest het dan een uit dat geschikt is. Zijn er geen van de source's geschikt dat pakt het de fallback en dat is de <img>.
De images die uit de Directus API worden opgehaald zijn alle veel te groot. Als je ze zo groot inlaadt terwijl je op de pagina kleiner nodig hebt gaat je performance achteruit. Omdat de hele afbeelding meer geheugen heeft dan een kleinere.
De website gebruikt meerdere fonts die niet standaard in css zitten. In plaats van fonts te laden via een externe <link> (Google Fonts), zijn ze in dit project lokaal gedownload en opgeslagen in de /public folder.
| Home | Over ons |
|---|---|
 |
 |
| Publicaties | Leden |
|---|---|
 |
 |
| Events | Vacatures |
|---|---|
 |
 |
-
HTML & CSS
De basisstructuur en styling van de website zijn opgebouwd met HTML en CSS. De huisstijl van de website is in een aparte styleguide verwerkt. -
Server-side JavaScript
Voor de back-end is gebruik gemaakt van Node.js en Express om een dynamische en efficiënte webserver te creëren. Nodejs zorgt ervoor dat ik Javascript serverside kan gebruiken en Express maakt mogelijk om routes te maken en responses en requests te verwerken. -
Liquid Templates
De weergave van de pagina’s gebeurt met behulp van Liquid Templates, waardoor dynamische data eenvoudig kan worden ingeladen en eventueel gemanipuleerd met liquid functies. -
Directus APi De data die wordt opgehaald kom uit de Directus Api. Doormiddel van API endpoint url's kunnen vervolgens specifieke data worden opgevraagt.
Project lokaal installeren
-
Fork de repository
Ga naar de repository pagina en klik op de Fork knop in de rechterbovenhoek om een kopie van de repository naar je eigen GitHub account te maken. -
Clone de repository
Clone je geforkte repository naar je lokale computer door het volgende commando uit te voeren in de terminal: git clone https://github.com/Matthijs217/pleasurable-ui -
Installeer de packages
Voer in de terminal de command npm install uit om de packages uit de package.JSON te installeren. -
Start de server
Voer in de terminal de command npm start uit om de server te starten.
This project is licensed under the terms of the MIT license.