🗒 Logboek

Dag 1

Vandaag was de introductie en kennismaking met de docenten, helaas was ik ziek vandaag en kon er daardoor niet bij zijn. Wel heb ik de slides thuis bekeken en een repo aangemaakt. Ik zag op Teams dat ik was toegevoegd aan een support group en hier heb ik toen om een korte uitleg van de les gevraagd.

Dag 2

Vandaag ben ik wel naar school geweest en heb ik kennisgemaakt met mijn support groepje, ook ben ik verdergegaan aan mijn repo om een beetje structuur aan te brengen. Tijdens de presentatie werd er een terugblik geworpen naar blok tech en een korte refresh gedaan op JavaScript. Dit ging aardig goed en ik wist nog veel over JavaScript aangezien ik dit veel op mijn stage heb gebruikt. Na de presentatie ben ik begonnen met functional programming, als eerste heb ik geprobeerd om de dataset in te laden. Toen dit was gelukt heb ik geprobeerd om met simpele JavaScript functies de data te manipuleren.

Dag 3

Vandaag kregen we een presentatie over hoe je een goede wiki/documentatie kan schrijven voor GitHub repo's. Bij blok tech heb ik dit ook al moeten doen dus ik had al wel is met een readme/wiki gewerkt. Uiteindelijk heb ik een navigation sidebar gemaakt, een footer en alle punten die tot nu toe zijn behandeld toegevoegd hieraan. Vervolgens heb ik deze een beetje uitgewerkt en dat was de dag eigenlijk wel.

Dag 4

Vandaag kregen we een presentatie over chaining & cleaning, hierbij gingen we voornamelijk in op het 'chaining' gedeelte. Bij het voorbeeld werd kort uitgelegd wat een promise is en hoe je hiermee functies aan elkaar kan chainen. Ik vond dit erg interessant en wilde dit graag proberen aangezien ik eerst fetch als me promise gebruikte met .then(). Eenmaal begonnen met het refactoren kwam ik erachter dat deze methode heel fijn werkt en heb toen nog extra functies geschreven om mijn gewenste output te krijgen.

Dit had ik eerst:

  fetch(url)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("Something went wrong");
      }
    })
    .then((responseJson) => {
      // Do something with the response
    })
    .catch((error) => {
      console.log(error);
    });

Verbeterde fetch met een promise

const parseData = async () => {
  return new Promise((resolve, reject) => {
    fetch(url).then((response) => {
      if (response.ok) resolve(response.json());
      else {
        reject(new Error("Er is iets misgegaan in de api"));
        window.alert("Helaas is er iets misgegaan...");
      }
    });
  })
    .then((res) => {
      // filter answers from question
      let answers = getAnswersMethod(res);
      return answers;
    })
    .then((colors) => {
      // match color with hexcodes
      let hexCodes = connectColorToHex(colors);
      console.table(hexCodes);
      return hexCodes;
    })
    .then((table) => {
      let colorTable = createColorTable(table);
    });
};

Dag 5

Vandaag hadden we het over debugging en refactoring gehad. Dit is een belangrijk onderdeel van een project, vooral als je in een team werkt. Refactoring van code betekent dat je de code verbeterd zonder dat het de gewenste data veranderd, dit is handig omdat de eerste code die schrijft waarschijnlijk heel anders of beter kan zodra je in een verder stadium bent. Verder verbeterd dit ook de kwaliteit/leesbaarheid van je code en dit waardeer je zelf over 3 jaar maar ook je collega's waarderen dit.

Verder hebben we het gehad over linters / formatters. Ik had dit al ingesteld in mijn code editor. Ik heb bijvoorbeeld een settings.json met al me persoonlijke voorkeuren zoals het automatisch toevoegen van ; aan het eind van elke regel, automtisch verspringen wanneer je line te lang word zodat het allemaal leesbaar blijft, automatisch opslaan als je van de tab weggaat en een formatter die de code automatisch de code goed laat inspringen op elkaar.

Dag 6

Vandaag hadden we een les over API's. We hebben het gehad over wat het is en wat je ermee kan. Verder hebben we de rest van de dag besteed aan het opzoeken van een leuke API waarmee we deze week aan de slag konden. Ik heb veel API's gevonden die me wel leuk leken maar dan had ik totaal geen inspiratie wat ik ermee kon doen. Uiteindelijk ben ik bij de Spotify API terecht gekomen, dit was wel iets moeilijker omdat je te maken had met authentication maar alsnog wilde ik het proberen. Ik ben aan de slag gegaan en had eind van de dag de authentication flow klaar en kon ik endpoints opvragen met een bearer token. Dat was het voor deze dag en ben de volgende dag verdergegaan met het fetchen van data.

Dag 7

Vandaag hadden we een college van Joost over verschillende manier om data te fetchen. We hebben het gehad over 4 soorten:

• Async/await
• Promises
• Fetch
• XHR request

Dit was best interessant om eens te zien wat er nog meer was, ik had met allemaal wel is gewerkt maar gebruik eigenlijk standaard fetch. Het was een goede opfrisser om te zien dat er nog meer is dan alleen fetch. Verder heb ik vandaag gewerkt aan de flow van de applicatie zodat ik api calls kan uitvoeren en deze data kan presenteren op de pagina. Ik kwam er hierachter dat ik best groot probleem had omdat ik data dynamisch wil laten zien aan de hand van spotify moest ik gebruik maken van een interval. Dus wanneer een nummer veranderd moet de data op de pagina ook veranderen, gelukkig is React hier erg goed en past dus alleen de data aan indien er iets veranderd in de data. Ik heb vervolgens een useEffect hook gebruikt om te checken of er iets is geupdate in de state (ongeveer hetzelfde als componentDidMount of componentDidUpdate).

In de useEffect check ik vervolgens of de global variable 'hash.access_token' bestaat en als dat true is initieert hij een interval functie die elke 3 seconden de data fetched. Aan deze logica heb ik een hele avond besteed maar uiteindelijk werkt het!

  useEffect(() => {
    if (hash.access_token) {
      if (count === 0) getData();
      const refreshData = tickerInterval();
      return () => clearInterval(refreshData);
    }
  }, []);

  const tickerInterval = () => {
    const interval = setInterval(() => {
      setCount((count) => count + 1);
      getData();
    }, 3000);
    return interval;
  };

Dag 8

Vandaag heb ik de issues van de peer feedback verwerkt in de code of documentatie. Dit was niet super veel gelukkig dus ik kon daarna verder werken aan de code, ik heb een beetje styling toegepast zodat het er een beetje normaal uit ziet voor het oog.

Dag 9

Vandaag heb ik de hele dag aan de documentatie gewerkt, ik ben hier helemaal niet goed in en heb het dus lekker uitgesteld... Toen ik klaar was met de documentatie heb ik alles ingeleverd en me voorbereid op het mondeling van morgen

Dag 10

Mondeling op school