refactoring - kokjp1/TechTrack GitHub Wiki
- Ik heb ervoor gekozen om toch voor arrow functions en named functions te gaan. De reden hiervoor is dat arrow functions soms verplicht zijn (d3) en ook overzichtelijker als ze in een andere functie zitten. Overigens voor grote top-level functies vind ik named functions veel overzichtelijker
- Ik schrijf bij ingewikkelde code/functies een enkelzinnige uitleg en bij secties / grote delen van bestanden headers om te laten zien waar bepaalde code begint en eindigt
- De component conventions leg ik uit in đTK1 omdat ik daar onderzoek naar heb gedaan.
Hieronder zal ik een aantal "geavanceerde" javascript/svelte dingen uitleggen die ik gebruikt heb. De reden dat ik deze geavanceerde methoden gebruik is als volgt;
- AI gebruikt graag "efficiente code". Als ik AI vraag om ergens naar te kijken en hij reageert met code die ternary operators of $: gebruikt, wie ben ik dan om de code omslachtiger en minder efficient te maken puur omdat ik het niet begrijp. Ik kies er daarom voor om deze code en principes te begrijpen i.p.v. te vervangen voor iets omslachtigers.
- Ternary Operators zijn single line If Else statements
$: progressPercent = $currentSong?.duration ? ($currentSong.progress / $currentSong.duration) * 100 : 0;Hier staat principieel gewoon
if ($currentSong?.duration) {
progressPercent = ($currentSong.progress / $currentSong.duration) * 100;
} else {
progressPercent = 0;
}- Optional chaining dient ervoor om fout meldingen en vooral crashes te voorkomen, om hetzelfde voorbeeld te gebruiken;
$: progressPercent = $currentSong?.duration ? ($currentSong.progress / $currentSong.duration) * 100 : 0;Hier gaat het specifiek om de $currentSong?.duration. wat hier eigenlijk staat (of waar dan ook), is "Als de linkerkant bestaat (niet null/undefined), ga dan verder; anders geef undefined terug." Hierdoor voorkom je dat je code crashed en vite een melding geeft
- Nullish Coalescing operators lijken heel erg op Conditional Chains, maar werken net anders. In plaats van het object veilig checken (steeds checken of het deel bestaat waar je op verder gaat specificeren), checken Nullish Coalescing operators of het hele object bestaat of niet.
const aArtistName = aArtists[0]?.name ?? aArtists[0] ?? 'Unknown';Hier staat principieel gewoon bestaat artists[0].name? Voer het uit. Zo niet? Pak artists[0]. Bestaat die OOK niet? "unknown"
- Conditional Classes spreken redelijk voor zich maar zijn extreem handig. Je kan met svelte op basis van javascript variabelen classes toekennen aan een element. Dit lijkt erg op "classList.add", maar werkt reactiever en sneller en korter
<span class:connected={isConnected} class:notconnected={!isConnected}></span>Class="Connected" ALS isConnected === True.
Class="notconnected" ALS isConnected === False
- Reactive declarations hebben veel te maken met stores maar zijn inherent aan svelte. ze zorgen ervoor dat de data met $: altijd update als er iets aan verandert.
$: vinylSize = sizeCalculation($currentSong.popularity);Vinylsize verandert constant dus we zetten er $: voor zodat alles wat gebruik maakt van VinylSize altijd update.
- Er is geen echte term voor maar het is wel extreem handig. Het is iets ingebouwds in svelte wat ervoor zorgt dat je css variabelen kan maken van javascript variables. Het maakt gebruik van inline HTML styling.
style="--glow-color: {$currentSong.vibrantAlbumColor || '#1db954'}"Aan de hand van een variabele "currentSong.vibrantAlbumColor" (die een kleurcode teruggeeft) maken we een CSS variabele, die we later in de CSS kunnen gebruiken
.play-pause:hover {
background: var(--glow-color);
color: #000;
box-shadow: 0 6px 16px rgba(0, 0, 0);
}