Meesterproef WEEK 02
Working 2 days a week at this project
📅 MAANDAG 22/04 T/M VRIJDAG 26/04
📅 WOENSDAG 24/04
Einddoel
- Een voltooide portfolio-website waar mijn projecten worden opgehaald via de GitHub API en de content wordt opgehaald via Sanity(CMS).
Belangrijkste functies en kenmerken
- Responsief design voor zowel desktop als mobiele apparaten
- Overzicht van projecten met details, afbeeldingen en links naar de GitHub repositories
- Contentbeheer via Sanity
- Contactformulier voor potentiële werkgevers of klanten om eenvoudig contact op te nemen
- Een 'Over mij' sectie die mijn vaardigheden en ervaring beschrijft
- Github API data gebruiken
Deadline
- 14-06-2024
Taken aanmaken
Categoriseer de stappen(labels aanmaken)
**Werkwijze **
- Taken aan pages gelabeld
- Taken onderverdeel per DLC-fase
- Taken geprioriteerd
- Uren gekoppeld per taken
- Taken onderverdeel in de weken op basis van uren.
- Taken toegewezen aan de werk dag.
Overzicht board
Tijdsduur van de taken Ik werk 2 dagen per week aan het project en totaal 16uur.
Bepaal de volgorde van de taken(MoSCoW-methode)
📅 DONDERDAG 25/04
Voor mijn Meesterproef heb ik besloten mijn portfolio te bouwen met Astro als frontend framework. Voorheen had ik mijn portfolio opgebouwd met Next.js, maar Next.js ligt ver weg van SvelteKit. Momenteel werk ik met SvelteKit en ik zocht een framework dat qua structuur en benadering dicht bij SvelteKit ligt, zodat de overstap niet te groot zou zijn. Astro heeft dezelfde componentgebaseerde benadering en komt overeen met de webstandaarden, wat de overgang gemakkelijker maakt. Bovendien wilde ik mijn vaardigheden in JavaScript verder ontwikkelen, en omdat Astro dicht bij de webstandaarden ligt, was dit een perfecte keuze voor mij. Het mixen van verschillende frameworks vond ik ook erg fijn, omdat ik in de toekomst misschien SPA-websites wil maken en met Astro de vrijheid heb om elk UI-framework te kiezen of zelfs meerdere te combineren.
Eenvoudige HTML is een Component (JSX / webcomponent) Het Astro-framework introduceert de .astro-bestandsextensie als een component. Maak een nieuw bestand, schrijf wat HTML erin - en daar heb je het - een volledig aangepaste HTML-component die overal gebruikt kan worden.
<!-- Link.astro -->
<a href="/">Mijn Link</a>
En dan, importeer dat eenvoudig overal - in een Astro-bestand:
import Link from '.@/components/Link.astro';
<div>
<Link />
</div>
Ik zie dat als een voordeel omdat het zo eenvoudig is - geen functie schrijven, zoals Next.js - minder rommel.
import Link from '.@/components/link.astro';
Dit brengt me bij het volgende duidelijke voordeel - het werkt hetzelde als Sveltekit.
Routing Op Basis Van Directories En Bestanden Astro bevat standaard routing door gebruik te maken van de conventie van de /pages-directory. Elk .astro-bestand in die directory wordt een route. Als het een directory is, kun je eenvoudig index.astro gebruiken.
Er zijn meer opties om dynamische routes te ondersteunen - bijvoorbeeld, als je een /blog/an-id-of-a-post hebt, zou je /blog/[id].astro gebruiken als een bestand om alle dynamische posts af te handelen die daar moeten zijn(hetzelfde als Sveltekit).
Run Javascript Wanneer en Waar Het Nodig Is Standaard rendert Astro statische pagina’s. Hoewel het SSR ondersteunt en server-API-routes, bevat Astro speciale directives (HTML-attributen) die verschillende laad- en activatiestrategieën instrueren. Om client-side Javascript in de browser uit te voeren, zou je de client directive gebruiken:
import Link from '@/compoennts/Link.astro';
<Link client:only>any js runs inside the component in the browser</Link>
Dit zorgt ervoor dat elke JS-code die is opgenomen in Link.astro in de browser wordt uitgevoerd - dit omvat event handlers en praktisch alles
Astro bevat een fantastische documentatie met veel voorbeelden en handleidingen over hoe je bijna alles kunt doen wat je je kunt voorstellen.