Analyse - kosterm14/portfolio GitHub Wiki

Analyse in het kort

Voor mijn individuele opdracht van de meesterproef kies ik ervoor om een portfolio te maken op basis van de GitHub REST API. Hierbij ga ik alles combineren wat ik geleerd heb. Dit zijn dingen als SvelteKit, GSAP en nog veel meer! Eerst heb ik een vooronderzoek gedaan naar de dingen die ik niet ken zoals het GitHub API en Svelte runes.

Randvoorwaarden

Een voorwaarde voor een eigen project is dat er een echte opdrachtgever / product owner is en dat de opdracht complex genoeg is om aan het leerresultaat van Semester 4 (en daarmee het eindleerresultaat van de opleiding ) te voldoen! Maar je kunt ook zelf de opdrachtgever zijn en een portfolio maken.

Alle stof van de afgelopen drie semesters moet terugkomen in je project.

Dit zijn site rendering methodes als:

  • SSG (Static Site Generation)
  • SSR (Server-Side Rendering)
  • ISR (Incremental Static Regeneration)
  • CSR (Client-Side Rendering)

Maar ook frameworks, Content Management Systems (CMS) en API's moeten terugkomen in je project.

Het idee

Ik ben van plan een portfolio te maken waarin ik, doormiddel van de GitHub REST API, mijn repo's laat zien. Deze wil ik (als dat mogelijk is) interactief op de website hebben zodat de gebruiker niet van de website af hoeft om ze te zien. Hierbij wil ik scrollanimaties gebruiken om de website een professionele feel te geven en te laten zien wat ik kan. Ik ben van plan dit te doen met SvelteKit als framework omdat dit een populaire framework is waar ik zelf ook graag in werk. Ik ga proberen gebruik te maken van de recent uitgebrachte Svelte "runes" die ik nooit eerder gebruikt heb.

Onderzoek GitHub API

Ik ga beginnen met een vooronderzoek naar de GitHub REST API aangezien ik hier nog nooit mee gewerkt heb.

Ik begon met het doorlezen van de officiele GitHub REST API docs. Dit is echt heel veel tekst om door te nemen dus ik vroeg ChatGPT om een kortere uitleg van wat de GitHub API is en hoe het werkt en nam deze door.

Hierna heb ik wat onderzoek gedaan op Google en Youtube en kwam zo op deze tutorial video. Hier heb ik geleerd om met behulp van een combinatie van Postman en de 'List repositories for a user' pagina in de Github API docs mijn repo's op te halen.

Op deze pagina leggen ze uit hoe je onderstaand curl command kunt gebruiken om dus een lijst van alle public repositories op te halen van de aangegeven user.

curl -L \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <YOUR-TOKEN>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/users/USERNAME/repos

Hier zijn de -H velden Headers, ik heb de autorization header uitgezet aangezien dit nodig is om private repo's te tonen maar alle repo's op mijn github zijn public. De link onder de headers is een path wat je in je GET zet in Postman.

Ik heb hier mijn eigen GitHub naam ingevuld om mijn repo's te krijgen.

https://api.github.com/users/kosterm14/repos

Na het senden kreeg ik deze data van mijn GitHub account terug.

Postman

In de tutorial die ik gekeken heb maakte hij gebruik van een programma genaamd Postman. Postman is een applicatie waarmee web-API's kunnen worden getest. Hiermee kan ik testen welke data ik ophaal met mijn GET's.

Curl

Op de GitHub REST API docs pagina kun je de keuze maken tussen CLI, curl en Javascript. Postman maakt gebruik van curl commands dus ik gebruik dit ook. curl is een command line tool en library om data te transferren met URL's (curl->cURL->client for URLs)

Onderzoek Svelte runes

Svelte 5, nu in de Release Candidate fase, is de nieuwste versie van het framework Svelte. Wat Svelte 5 uniek maakt, is de introductie van Runes - speciale syntactische constructies die ontwikkelaars meer controle geven over reactiviteit.

Wat zijn runes?

rune /ro͞on/ noun
A letter or mark used as a mystical or magic symbol.

"Runes" zijn speciale symbolen die je kunt gebruiken in de Svelte compiler. Wat je in de huidige Svelte versies kunt bereiken met let, =, export en reactive declarations ($:) kunnen allemaal ook bereikt worden met runes in Svelte 5.

Svelte runes zijn voor mij nog best ingewikkeld maar het is wel interessant om te zien hoe ze nieuwe dingen bedenken om het zo efficient mogelijk te maken voor de gebruiker. Hier is een goed voorbeeld te vinden van een situatie waarin je runes zou gebruiken.

Stel je wilt een logica maken die kan tellen. Dit is hoe je het nu zou doen.

// counter.js
import { writable } from 'svelte/store';

export function createCounter() {
	const { subscribe, update } = writable(0);

	return {
		subscribe,
		increment: () => update((n) => n + 1)
	};
}

// App.svelte
<script>
	import { createCounter } from './counter.js';

	const counter = createCounter();
</script>

<button on:click={counter.increment}>
	clicks: {$counter}
</button>

Maar met behulp van runes kan dit simpeler bereikt worden.

// counter.svelte.js
export function createCounter() {
	let count = $state(0);

	return {
		get count() { return count },
		increment: () => count += 1
   };
}

// App.svelte
<script>
	import { createCounter } from './counter.svelte.js';

	const counter = createCounter();
</script>

<button on:click={counter.increment}>
	clicks: {counter.count}
</button>

Svelte 5 is jammer genoeg nog niet beschikbaar voor gebruik maar er is wel een preview page waar je de runes in kunt testen. Ik ga dit zeker proberen!

:)

⚠️ **GitHub.com Fallback** ⚠️