Redesign je visitekaartje op basis van een headless CMS en een framework.
Deze leertaak hoort bij sprint 13: Your Tribe for Life. Dit is een autonome opdracht die je individueel uitvoert voor jouw eigen FDND Tribe.
Je leert hoe je één datapunt uit een headless CMS selecteert en weergeeft op een website. Daarbij is het belangrijk óók de stijlelementen dynamisch in te zetten om jouw persoonlijkheid te laten doorschijnen in jouw visitekaartje.
Bij elke leertaak wordt de development-lifecycle doorlopen. Hierdoor ontwikkel je een standaard aanpak voor frontend praktijkvraagstukken, werk je systematisch aan leertaken, ervaar je de relevantie van het geleerde en verwerf je de kennis, houding en vaardigheden die de beroepspraktijk van je vraagt. De development lifecycle kent de volgende stappen:
- Analyseren - bijvoorbeeld: grip krijgen op een taak door gesprekken met een opdrachtgever, schrijven van een debriefing, maken van een todo lijst, inventarisatie van bestaande informatie, overzicht creëren, plannen, definition of done etc.
- Ontwerpen - bijvoorbeeld: het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.
- Bouwen - bijvoorbeeld: toepassen van webtechnologie (HTML, CSS, JS), gebruik van tooling, werken volgens conventies en wetgeving, documenteren en bijhouden van een changelog.
- Integreren - bijvoorbeeld: publiceren, live zetten, uploaden naar de server, toevoegen in een bestaand systeem, ftp-en.
- Testen - bijvoorbeeld: Unit testing (TDD), System test, User test, device lab test, A\B testing.
Semester 3 bereid je voor op de beroepspraktijk. Om die reden werken we serieuzer waarbij we gericht zijn op de werkwijze die je straks in je stagebedrijf of bij FDND-Agency ook gaat hanteren. Hoe meer je de voorgestelde werkwijze omarmt, hoe makkelijker je straks in een bedrijf mee kunt draaien.
- Lees deze hele leertaak goed door voor je verder gaat
- Houdt een brainstorm over mogelijke oplossingen en noteer alle ideeën
- Richt één repository in waarin je gaat werken en zet issues aan. Koppel het automatisch opnemen van issues in het projectboard @ docs.github.com
- Maak keuzes en leg deze vast door issues in te schieten
- Werk verder aan de hand van issues door telkens een issue op te pakken en alles wat ermee te maken heeft bij deze issue vast te leggen. (voorheen deed je dit in de wiki)
Maak bespreek (delen van) jouw ontwerp en haal daarbij breed (teamleden, peers en docenten) feedback op in de vorm van issues in GitHub.
NB: Het is fijn als je screenshots van versies van het ontwerp opneemt in de issue-thread zodat de ontstaansgeschiedenis van het definitieve ontwerp navolgbaar wordt. Neem ook links of screenshots van inspiratiebronnen op.
- Werk je ideeen uit in een ontwerp
- Haal feedback op jouw ontwerp op
- Noteer opmerkingen
- Itereer (begin weer bij stap 1) — na een aantal iteraties —
- Breek het ontwerp op in kleine behapbare delen en maak daar issues voor aan in het projectboard
Je gaat systematisch werken aan het project door middel van issues. Je doet niets zonder dat er een issue voor is. Als je iets te binnen schiet wat niet perse bij je huidige taak hoort ga je het niet snel doen maar schiet je een nieuwe issue in. Je sluit alleen een issue als deze door iemand anders bekeken is.
NB: Door alleen issues te sluiten als er iemand naar gekeken heeft voorkom je heel veel bugs. In het bedrijfsleven kijkt er vaak een senior frontender of tech-lead naar jouw taken voor ze geaccepteerd worden.
- Pak een issue uit Todo op door deze toe te wijzen
- Verplaats de issue naar In Progress
- Doe onderzoek naar de mogelijke oplossing, neem bronnen en inzichten op in de issue
- Implementeer de gevonden oplossing
- Documenteer de stappen en belangrijkste algoritmes
- Itereer (begin weer bij stap 2) — na een aantal iteraties —
- Documenteer de laatste inzichten en sluit de issue, verplaats deze naar Done als dit niet automagisch gebeurt
Omdat we met een framework werken kan hosting niet via GitHub pages opgelost worden. Gelukkig zijn er standaardoplossingen voor een aantal veelgebruikte hostingoplossingen, bijvoorbeeld Vercel.
- Zet je project live door gebruik te maken van het artikel SvelteKit on Vercel @ Vercel. Als je de keuze krijgt kies dan voor een Hobby project, deze is niet zo uitgebreid maar in ieder geval gratis.
Voor de gebruiker is testen de belangrijkste fase uit de DLC. Dit is waar je erachter komt of jouw website lekker werkt op alle browsers en platformen en of gebruikers jouw interface snappen.
- Test jouw project op zo veel mogelijk manieren
- usertest (iig. op klasgenoten en je familie)
- lighthouse test (voor automated performance en usability)
- handmatige tests (iig. de tabtest maar ook uitschakelen van JS of CSS)
- browsertest (chrome, safari, firefox, edge)
- devicetest (oude en nieuwe mobieltjes, tablets, laptops)
Focus sprint 13 - Je hebt al een basis social network voor jouw squad. Breid dit social network uit naar een platform waarop de tribe members elkaar kunnen vinden en ondersteunen. In ieder geval gedurende het begin van jullie carriere als frontend designer & developer.
De focus ligt op team building, samenwerken en hoe je frameworks inzet om een gezamenlijk doel te bereiken én in contact te blijven.
- Je hebt gewerkt volgens de verschillende fases van de development-lifecycle en je hebt je werk gedocumenteerd in de Readme en Wiki
- Je toont aan dat je in de analysefase verschillende methoden en technieken hebt ingezet om te inventariseren wat er moet gebeuren
- Je toont aan dat je in de ontwerpfase verschillende methoden en technieken hebt ingezet die ervoor zorgen dat je precies weet wat je moet bouwen
- Je toont aan dat je in de bouwfase verschillende methoden en technieken hebt ingezet om het ontwerp te realiseren
- Je toont aan dat je in de integratiefase verschillende methoden en technieken hebt ingezet om je website live te zetten
- Je toont aan dat je in de testfase verschillende methoden en technieken hebt ingezet om het ontwerp te testen en verbeteren
- De code staat op Github en heeft een live url