Logboek

Maandag 22 november

Vandaag begonnen we aan het nieuwe vak Frontend applications. We kregen eerst een uitleg van Vincent over Frameworks. Daarna begon Angelo met een uitleg/live coding sessie over React. Hij vertelde ons hoe React geinstalleerd kan worden en de basis functies van React.

Na de uitleg ging ik aan de slag met React. Ik installeerde een React App in mijn eigen Repo waarna ik een 'Hello World' maakte op mijn pagina met React.

Dinsdag 23 november

Vandaag kregen we een uitleg van Angelo. Het ging over het gebruik van componenten in React. Componenten zijn herbruikbare stukjes code die gebruikt kunnen worden in elk scherm van het project.

Een voobeeld van een component:

import { useContext } from "react"
import StarWarsContext from "../providers/StarWarsContext"

const Name = () => {
  const json = useContext(StarWarsContext)

  return <h1>{json?.name}</h1>
}

export default Name

Hiermee wordt de naam uit het StarWarsContext bestand gehaald en in de h1 gezet. De naam kan nu hergebruikt worden op de volgende manier:

import Name from "./components/Name"

export default function App() {
  return <Name />
}

De naam is nu te zien in de applicatie en kan hergebruikt worden over de rest van de website.

Verder ben ik vandaag verder gegaan met het lezen en expirimenteren met React en de Components. Ook heb ik de plugin StyledComponents geinstalleerd en uitgeprobeerd. Hier vertel ik meer over op de React pagina.

Woensdag 24 november

Vandaag begonnen we de dag met uitleg van Angelo over D3 in React. Hij maakte hier met gebruik van D3 een Barchart in React. Hierin werd mij duidelijk dat het principe ten opzichte van D3 zonder React niet veel verschilt. De werking is in principe hetzelfde. Het enige verschil is dat D3 nu via de D3 package geinstalleerd kan worden in plaats van met de D3 script link.

Daarna kregen we een gastcollege van de mensen van Level30Wizards. Dit ging over het maken van 3D animaties in browsers, met behulp van ThreeJS en WebGL. Dit was een heel interessant college, mede doordat het voor mij duidelijker werd wat er allemaal duidelijk is in de browser.

Ik ben die dag verder gegaan met het schrijven van mijn documentatie over React.

Donderdag 25 november

Vandaag begonnen we de dag weer met een uitleg van Angelo. Deze keer ging het over Routing. Routing in React werkt anders dan Routing in 'gewone' HTML. Het is niet mogelijk om simpelweg een <a> element te gebruiken om naar een volgende pagina te gaan.

Daarom is het noodzakelijk om Routes op te stellen in de App.js. Hierover vertel ik meer op de React pagina.

Daarna ben ik aan de slag gegaan met mijn eigen project. Ik heb een aantal tutorials gekeken over hoe een wereldkaart, door middel van D3 en React, gemaakt kan worden. Ik ben uiteindelijk tot de conclusie gekomen dat dit te lastig is om dit in combinatie met React te maken. Daarom heb ik besloten om dezelfde Barchart te maken als in Frontend Data, maar dan met React.

Vrijdag 26 november

Vandaag begonnen we de dag met een uitleg over de developer tools en Typescript. Typescript is in principe JavaScript, maar met een aantal extra syntaxen, wat een betere samenwerking met de editor geeft.

Daarna ben ik verder gegaan met het inbouwen van mijn Frontend Data project in React. Ik krijg hierbij een aantal errors. Een van de errors die ik krijg is scale is not a function. Ik ben de rest van de dag bezig geweest met het oplossen van deze errors.

Maandag 29 november

Vandaag begonnen we met een uitleg over Linting en het deployen van de App. Angelo raadde ons aan om de plugin Prettier te downloaden in VsCode. Hiermee worden automatisch schoonheidsfoutjes uit de code gehaald, zoals enters, inspringingen en semicolons.

Daarna ben ik verder gegaan met mijn app. Ik probeerde een andere barchart dan mijn eigen te implementeren in de app. Hier ben ik best wel ver mee gekomen, al heeft deze barchart nog geen interactie.

Dinsdag 30 november

Vandaag ben ik verder gegaan met de documentatie. Ik heb mijn logboek verder uitgewerkt en de React pagina verder uitgewerkt.

Woensdag 1 december

Vandaag begonnen we de dag met een uitleg van Angelo over performance van de app. Hij legde ons uit hoe met behulp van de console de performance van een website gemeten kan worden.

Daarna ben ik naar Angelo gegaan voor hulp. Ik kreeg steeds dezelfde foutmeldingen, zoals scaleBand is not a funtion. Hij zei dat het niet aan mijn code kon liggen, waarna we hebben gekeken naar de package.json. Daar kwamen we erachter dat ik op een een of andere manier een d3 versie van 8 jaar oud had. Na het verwijderen van de d3 package en het herinstalleren, kreeg ik de foutmelding niet meer waardoor ik verder kon met mijn project.

Later heb ik mijn applicatie online gezet. Eerst heb ik het een aantal keren geprobeerd met Netlify, maar daar kreeg ik alleen maar errors. Daarna heb ik het geprobeerd met Vercel, waarna het gelukkig wel lukte. Het proces is heel eenvoudig. Vercel heeft alleen toegang tot de GitHub repo nodig, waarna Vercel zelf alle instellingen goed zet en online zet.

Donderdag 2 december

Vandaag heb ik een aantal code opschoningen gedaan. Ook heb ik peer-feedback gegeven aan Bas. Daarna heb ik mijn wiki verder uitgewerkt en afgemaakt. Ik heb ook nog een aantal aanpassingen aan mijn code gedaan om de code wat effectiever en netter te maken.

Daarna heb ik de documentatie volledig afgerond.