Proces Frontend Data

Wat heb ik geleerd?

Ondanks ik een niet normale periode achter de rug heb en mij nog steeds in bevind, heb ik toch echt wel veel geleerd tijdens dit vak. Ik ben veel gevallen en heb dan ook zowat heel het internet afgezocht om de antwoorden op mijn vragen te vinden. Internet was mijn beste vriend, maar ook mijn tech-medestudenten om zeker niet te vergeten. Ik heb echt goede hulp gehad van mijn tech-medestudenten. Ze lieten mij nadenken en zoeken naar oplossingen. Als ik er echt niet uit kwam, hielpen ze mij. Echter ben ik wel telkens op een niveau gebleven dat voor mij begrijpbaar en helder is. Tuurlijk heb ik nieuwe dingen geleerd, maar als er methodes waren die mij boven de pet gingen, heb ik dat niet toegepast (het gaat hier niet om de verplichte onderdelen).

Op deze pagina vind je:

• Wat nou eindelijk parameters van een functie inhouden

• D3 ervaring

• Herkansing 🚀

Functie parameters

Al die CMD-jaren heb ik nooit begrepen hoe parameters in een function() werken, maar nu snap ik dat eindelijk. Ik denk dat dat komt, doordat ik de hele tijd bezig ben geweest met het maken van functies en data mee te geven. Bij een andere functie moet je die data weer opvangen, maar soms wil je er dan een normalere naam aan geven. Bijvoorbeeld:

function filterData {
            
         ...
     
             
     dots(combinedData[0]);

});

function dots (dotData) {
    const g = d3.select('g')
    .data = dotData

    ...
}

Hier roep ik in de eerste functie filterData de functie dots aan en geef ik als parameter combinedData[0] mee. In de function dots (dotData) zit een parameter dotData. Onder water werkt deze parameter als volgt:

1. De functie waar de parameter in zit wacht tot hij wordt aangeroepen - dots(combinedData[0])
2. Dan ziet de functie dat de aanroeping een parameter bevat - combinedData[0]
3. De functie met als parameter dotData gaat aan de slag met de content die in de parameter combinedData[0] zit. Hij gaat hiermee verder als dotData.

D3 code

Hoewel ik nog nooit met D3 had gewerkt, vond ik het best moeilijk om er gelijk zo diep op in te gaan. Eerst hield dat mij tegen, omdat ik het best pittig vond. Naarmate ik meer de video's van Curran bekeek, werd het allemaal wat meer duidelijk. Ook ben ik veel meer gaan oefenen op VizHub met D3 code om datavisualisaties te maken. Dat heeft erg geholpen.

Uiteindelijk snap ik nu wat het principe en de kracht van D3 is. Ik vond het ook echt leuk om, achteraf, mijn datavisualisatie te zien werken. Het heeft mij een hoop uren en energie gekost, maar met een werkend eindresultaat als dat geeft dat voor mij een voldaan gevoel.

Herkansing 🚀

Allereerst wil ik even zeggen dat ik in de loop naar de herkansing erg veel geleerd heb en erg veel heb aangepast. Hierdoor is het voor mij meer helder wat de code (Javascript) precies doet en wat de werking ervan is. Eerst vond ik het maar moeilijk vinden wat de D3 code doet en hoe dat aansluit bij mijn eigen geschreven code. Op het moment dat ik alle geneste functies uit die ene functie ging halen, luchtte het al een stuk meer op. De functies stonden los van elkaar en ik snapte eindelijk wat alles deed. Hierdoor kon ik verder gaan met het refactoren van de gehele index.js en het zo duidelijk mogelijk maken voor een andere developer.

Tijdens deze periode ben ik mij ook steeds af gaan vragen: "Is dit de juiste manier van schrijven?" "Is er geen andere, betere manier?" "Wat zegt het internet over de best practise van deze functie?". Door er zo kritisch mee te zijn, ben ik steeds op grote dingen maar ook details ingegaan, omdat ik het allemaal perfect wilde hebben. Perfect is het nooit, maar een doel om het perfect te krijgen, heeft al veel effect. Hierdoor ben ik echt door een aantal iteratieslagen geweest van mijn code.

Voor de herkansing/aanvulling heb ik goed tijd gestoken in het beter en duidelijker maken van mijn project. De dingen die ik voor de herkansing allemaal gedaan heb staan hieronder genoemd, namelijk;

Deze aanpassingen zijn voor het grote gedeelte gedaan in de d3/script/index.js , die hier te vinden is.

✅ Globale variabele

Ik heb een globale variabele aangemaakt voor een combinatie van 2 datasets. Deze variabele houdt de huidige dataset bij.

✅ Code refactored

Alle functies zaten in één functie ( filteredDataset() ) genest, maar ik heb ze nu allemaal als losse functies geschreven, waarvan sommigen elkaar aanroepen. Overige variabele en dubbele declaraties heb ik weggehaald. Echter werkt het gewoon nog hetzelfde, alleen is de code een stuk opgeschoond. (De werking ervan heb ik al uitgelegd bij het eerste beoordelingsmoment). De code ziet er overigens ook veel begrijpbaarder uit en het is voor mij nu ook een stuk helderder wat alle code precies doet.

✅ Naming conventions

De naming conventions heb ik geheel veranderd (van variabelen, functies, parameters (data)). Het zijn nu duidelijk beschrijvende namen die in 1 keer uitleggen waar het over gaat. Dat was eerst niet zo aan de orde, daardoor schepte het veel onduidelijkheid en was er constant verwarring. Dat is nu gelukkig opgelost.

✅ Code comments

Ik heb de variabelen voorzien van een comment achter de regel code en ik heb de functies voorzien van een comment-uitleg boven de functie. Hierdoor kan een andere developer beter begrijpen wat het doel is van de code. Ik heb geprobeerd om bij elke comment in dezelfde schrijfstijl te blijven, zodat de lezer sneller aan mijn manier van schrijven went.

✅ Consistentie

Consistentie. Dat is het principe waar ik de laatste dagen erg mee bezig ben geweest. Ik heb dit vooral toegepast op het gebruik van code comments op variabelen & functies. Ik heb geprobeerd dit op een consistente manier te doen. Dit geldt ook voor de benaming van parameters van functies, variabelen en de functies zelf. Ook heb ik consistentie in het gebruik van dividers (grenslijnen die mijn code gescheiden houden). Steeds geef ik hier aan waar de code onder de grenslijn over gaat door het in de grenslijn te zetten. Door dit op een zo consistent mogelijke manier te doen, is het voor zowel andere developers als mijzelf erg handig en gebruiksvriendelijk. Door de consistentie raak je gewend aan de terminologie en de manier hoe een applicatie gebouwd is.

✅ Linter - Prettier

Ik heb de linter Prettier door al mijn bestanden heen gehaald. Dit zorgde voor een frisse en heldere overview van de bestanden. De spacing vanaf de linkerkant is 1 tab en declaraties bevatten een semicolon op het einde. Hier zorgt het ook weer voor consistentie in gebruik van code conventies.

✅ User Interface

De UI is aangepast voor een betere UX (input buttons, geen zoom wanneer je op gemeente klikt (staat ook uit), betere kleuren van de kaart, legenda (dit hebben veel mensen niet, terwijl jullie dat wel verwachtten. Echter is het ook nog is duidelijker voor de user). Het proces van de iteratie's van de UI kan je hier vinden.