π¨ Bouwen
Aangezien wij alle assets hebben ontvangen van de opdrachtgever, was het al snel duidelijk dat wij meteen aan de slag konden gaan met de code. Wij hebben als team besloten om dit project met Svelte te bouwen. Dit omdat Svelte een snelle compiler is voor Javascript.
Tijdens het bouwen, hebben wij altijd één ding in ons achterhoofd. Wat is onze user goal? Wie is onze gebruiker? Onze user goal is: Als gebruiker wil ik meer lezen met behulp van de interactieve scrollbooks van scrollbook zodat ik kennis kan opdoen en mijzelf kan ontwikkelen waarbij onze gebruiker een lezer is die nog niet van lezen houdt tussen de 16 en 20.
De styleguide, hebben wij tot leven gebracht met behulp van vanilla HTML, CSS & JS. Hierbij worden alle stylen, componenten, kleuren etc. weergegeven op de website.
Nuxtjs is een framework gebouwd op Vuejs. Nuxtjs boost de productivity van development, omdat er al heel veel features ingebouwd zitten. Denk hierbij aan routing, SEO optimalisatie en worden components automatisch geimporteert.
We gebuiken een library om de scrolling tot perfectie te maken. Voor meer informatie over de library vindt je hieronder:
Verder hebben wij binnen het team een aantal taken verdeeld. De uitgebreide taakverdeling is ook te zien op ons Github Projects Board
Build Issues
- β‘οΈ Deploy Script #1
- π Page Transitions #2
- π Scroll Animations #3
- πΉ Balrog Smoke #4
- π Routing #6
- π§ββοΈ Main Layout #9
Documentation Issues
Build Issues
- β‘οΈ Deploy Script #1
- π Scroll Animations #3
- π¬ Starting Screen #5
- π§ββοΈ Main Layout #9
- π‘ Home Page #10
- π₯ Fire Particles #15
Documentation Issues
Binnen het team hebben wij een aantal code conventions gemaakt. Deze is te zien op de π» Code Conventions pagina.
Als entry animatie voor het boek van Lord of the Rings hadden we bedacht dat we konden inzoomen op de poort van de mines of moria. Helaas kwamen hierbij wat performance issues bij kijken.
Dit zag er laggy uit en was totaal niet smooth! Hierdoor zijn wij gaan zoeken waaraan de issue lag. Wij dachten eerst dat het lag aan de library die we gebruikte (ScrollMagic), daarom besloten we om het in vanilla JavaScript na te gaan maken. Toen het af was, bleek het dat het helemaal niet uitmaakte of we nou een library gebruikte of niet. Uiteindelijk kwamen we bij de css property will-change: transform; terecht. Deze property was onze held in nood. Hierdoor is de performance drastisch verbeterd. https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
