Your Tribe for Life

-repo: your-tribe-for-life-squad-page

2-9-24

Vandaag was de eerste schooldag en we gaan weer druk aan de slag, na 20 minuten rondlopen op de campus hebben we de briefing gekregen van de opdracht.

We gaan met de hand van sveltekit een squadpage maken. Dit zijn de gemaakte afspraken:

• (team) Voor woensdag een eenvoudige schets
• (mezelf) Voor woensdag experimenteren met sveltekit

Teamcanvas

3-9-24

heb vandaag de schetsen gemaakt voor het project, ook heb ik een goede start gemaakt aan de sveltekit tutorial. EEN BELANGRIJKE NOTE: gebruik voor strings met functies erin de ` (linksboven de keyboard) en niet de ’ (hoge komma) IK ZAT HIER MEEN HALF UUR MEE TE STRUGGELEN…

Ook iets wat ik heb gezien is een interessant artikel over wat 3 puntjes doen in js aangezien ik dit nog niet wist.

schets

4-9-24

Vandaag hadden we een lange college over sveltekit, over hoe het werkt, wat het is en een demo met hoe je er mee werkt. Hier zijn 3 vragen die ik als het goed is ga blijven weten:

• Hoe maak je een basic skelet sveltekit project.

5-9

Op deze dag had ik een groot probleem waar ik niet uit kwam, blijkbaar kende de VS code terminal ‘npm’ niet, hierdoor kon ik niet verder werken aan iets wat node/svelte gebruikten ondanks dat ik meerder artikelen/videos heb geprobeerd om te zorgen dat het weer werkte. Omdat ik daar niet verder mee kon heb ik een beetje gewerkt aan het design van de squad page.

6-9

Op school heb ik aan Justus gevraagd wat er aan de hand was met mijn terminal, eindstand, VS code kreeg voor een onbekende rede niet mee dat ik node had, als ik het doe in het cmd venster krijg ik wel het gewenste eindresultaat. Hierdoor moet ik gaan wennen om te werken via de cmd terminal, het is een omweg maar kan geen kwaad en ik kan gewoon verder.

9-9

vandaag kregen we een workshop over figma en heb ik een paar shorthands geleerd die mij gaan helpen met sneller kunnen designen, dit houd in bijv:

• met ‘r’ kan je gelijk vierkanten trekken.
• met ‘o’ maak je gelijk een circle.
• met ‘alt’ kopieer je gelijk of maak je iets breder als je het bij de zijlijnen vastpakt.
• met ‘ctrl + g’ groepeer je meerdere items
• wat doet ‘alt + shift’? Ook hebben we geleerd hoe je componenten maakt, hoe deed je dat ookalweer?

10-9

Vandaag heb ik veel tijd besteed aan het maken van de nieuw profile-card deze komt nu steeds verder in ontwikkeling.

11-9

scroll-snap-type: x mandatory; Scroll-snap-align/scroll-snap-type is PE dus hier hoef je geen @ supports te gebruiken als een css functie niet PE is en de css breekt als het device/browser het prorbeert te runnen moet je @supports gebruiken, dit zorgt dat als het niet ondersteund is dat het het niet uitvoerd.

creative coding met js in svelte

svelte: window on:mousemove{followPointer (functie)}

12-9

Vandaag heb ik de profile card zo goed als af, achteraf had ik beter bewijslast kunnen maken door gebruik te maken van issues, maar dat kan nog als ik ergens een verbetering punt zie.

13-9

We Love Web ‐ Vasilis van Gemert

16-9 Prioriteiten zetten

Epics

• Nieuw e-commerce website lanceren
• Website van de overheid verbeteren
• Website van … optimaliseren

Stories

• Winkelmandje toevoegen
• Betaalmogelijkheid toevoegen
• Website toegankelijker maken
• Website sneller maken

Stories zijn kleinere taken van een grote Epic opdracht, een userstory is nog een subdivisie van een story. voorbeeld userstory: “Als bezoeker, wil ik producten in mijn winkelmandje kunnen doen om overzicht te houden wat ik aanschaf”

17-9

Vandaag ben ik bezig geweest met het maken van de hifi layout voor de squad page, en heb ik die grootste deel afgekregen.

18-9

Eigen vooruitgang

• Kreeg de profilekaart live deze staat nu hier live

Opleveren van een project

• Refactored Code: gestructureerde code (conventies), semantiek, geen commented code, geen console.log(), goede tabs.

• Readme.md: Kenmerken, live link, screenshot(s?), Instructies (uitleg over het gebruik), Installatiehandleiding, CMS Uitleg, Huisstijl (of waar die te vinden is), bijdragen? (hints voor volgene dev-teams), gebruikte bronnen, badges met gebruikte technologie,

• Live zetten: Github pages, Vercel, Netlify, onrender

Kampvuur sessie Squadpage

• Beginnen met uitgebreid project board (Hoeveelheid bij taken, DOD’s, user stories, MoSCoW)
• Elkaar voorzien van duidelijke feedback en pull-requests serieus nemen (Feedback op code)
• Figma bestand opzetten met styleguide (fonts/kleuren enz.) VOOR we beginnen met programmeren
• Communicatie was best heel aardig maar kan altijd beter
• Resultaat: Zeer tevreden