3. Bouwen

Github Api

In mijn project heb ik de GitHub API benut om repositories van mijn GitHub-profiel op te halen, te filteren en weer te geven op mijn website. Dit is mijn aanpak:

API-configuratie: Ik heb een variabele username gedefinieerd met mijn GitHub-gebruikersnaam en vervolgens de API-URL geconstrueerd. Deze URL is zo ingesteld dat hij maximaal 50 repositories ophaalt, gesorteerd op de meest recent bijgewerkte.

const username = "JalalToufik";
const apiUrl = `https://api.github.com/users/${username}/repos?sort=updated&per_page=50`;

Ik heb een Svelte store gemaakt om de repositories op te slaan die ik van de API ontvang. Deze store maakt het eenvoudig om de data reactief te maken en te gebruiken in de componenten.

    // Store for repositories
    const repos = writable([]);

In mijn project heb ik de GitHub API benut om repositories van mijn GitHub-profiel op te halen, te filteren en weer te geven op mijn website. Dit is mijn aanpak:

API-configuratie: Ik heb een variabele username gedefinieerd met mijn GitHub-gebruikersnaam en vervolgens de API-URL geconstrueerd met het /users/{username}/repos endpoint. Deze URL is zo ingesteld dat hij maximaal 50 repositories ophaalt, gesorteerd op de meest recent bijgewerkte.

Filterfunctie: Ik heb een functie filterRepos gemaakt. Deze functie neemt een lijst van repositories als input en geeft alleen de repositories terug waarvan de namen voorkomen in een vooraf gedefinieerde lijst van belangrijke repositories.

Weergave: De gefilterde repositories worden vervolgens op een overzichtelijke manier gepresenteerd op mijn website. (Je kunt hier eventueel details toevoegen over hoe je de repositories precies weergeeft.)

    function filterRepos(repos) {
        const specificRepos = ["bieb-in-bloei", "ink-web-app", "oba-web-app"];
        return repos.filter(repo => specificRepos.includes(repo.name.toLowerCase()));
    }

Met de OnMount haal ik de repositories op van mijn GitHub-profiel, filtert ze en zorg ik ervoor dat een specifieke set repositories altijd bovenaan de lijst komt te staan op mijn webpagina. Dit alles gebeurt wanneer de component wordt geladen (onMount).

    onMount(async () => {
    try {
        const response = await fetch(apiUrl);
        let data = await response.json();

        const filteredRepos = filterRepos(data);

        repos.set(filteredRepos.sort((a, b) => {
            const order = ["bieb-in-bloei", "ink-web-app", "oba-web-app"];
            return order.indexOf(a.name.toLowerCase()) - order.indexOf(b.name.toLowerCase());
        }));
        } catch (error) {
        console.error("Error fetching repos:", error);
        }
    });

Formulier

Ik heb een contactformulier ontwikkeld voor mijn website waarmee bezoekers mij rechtstreeks een bericht kunnen sturen. Dit heb ik gedaan doormiddel:

HTML-structuur (Toegankelijkheid)

• aria-labelledby: Deze ARIA-eigenschap koppelt de section aan de titel (de legend) in het formulier, waardoor schermlezers de context van de sectie duidelijk kunnen communiceren.
• fieldset en legend: Deze elementen groeperen de formuliervelden logisch en geven het formulier een beschrijvende titel.
• label for="": Elk label is expliciet gekoppeld aan zijn overeenkomstige invoerveld met behulp van het for attribuut. Dit zorgt ervoor dat wanneer een gebruiker op het label klikt, de focus naar het invoerveld wordt verplaatst.
• required en aria-invalid="false": Deze attributen maken ingebouwde validatie mogelijk en geven de huidige validatiestatus aan voor schermlezers.

Toegankelijkheid met CSS

• Visueel contrast: De gebruikte kleuren (hoewel niet expliciet weergegeven in de code) zorgen waarschijnlijk voor voldoende contrast tussen tekst en achtergrond, waardoor de inhoud beter leesbaar is voor gebruikers met een visuele beperking.
• Focus styling: De CSS lijkt de focusstatus van elementen te stylen (:focus), wat essentieel is voor toetsenbordnavigatie en mensen met motorische beperkingen helpt.

Progressive Enhancement

• Basale functionaliteit zonder JavaScript: Zelfs zonder JavaScript werkt het formulier nog steeds. De gebruiker kan gegevens invullen en het formulier verzenden, dankzij de standaard HTML-formulierfunctionaliteit en de action en method attributen in het <form> element.