Som nämnt många gånger förut försöker jag alltid hålla mina variabler oföränderliga när jag utvecklar. Nu ska vi kika närmare på hur vi åstadkommer oföränderliga arrayer i JavaScript när vi lägger till element, byter ut element eller tar bort element. Vi utgår från en array med fåglar:

const birds = ["Talgoxe", "Blåmes", "Tallbit", "Skogsduva"]

Låt säga att vi har den här arrayen med städer:

const cities = ["Uppsala", "Stockholm", "Lycksele", "Lund"]

Och låt säga att vi vill skriva ut städerna i arrayen i en mening i stil med denna:

Uppsala, Stockholm, Lycksele och Lund är 4 fina städer i Sverige.

Hur?!

Jag utvecklade nyligen stöd för att filtrera blogginlägg efter kategorier. (Sedan dess har jag i stället utvecklat stöd för kategori- och författarsidor så att man kan klicka på en kategori och se alla andra inlägg med den kategorin, så den här funktionaliteten används inte längre.) Vid varje kategori i filtreringsvyn fanns även specificerat hur många inlägg som finns med respektive kategori. I det här inlägget ska jag gå igenom vad jag försökte åstadkomma och hur jag löste det.

Nu blir det fredagsdisco!

TL;DR​

• Varje ruta i en grid får en slumpmässig rgb(...)-färg, och custom-hooken useInterval sätter om alla färger vid varje takt.
• Frekvensen i hertz översätts till intervallets delay som 1000 / frequency; under 1 Hz skickas null in och discot pausas.
• CSS grid-layouten och varje rutas färg sätts med inline-stilar, som passar värden som ändras vid varje rendering bättre än CSS-klasser.

I det här spelet ska du skriva alfabetet så snabbt du kan. Klicka på rutan och starta spelet genom att skriva alfabetets första bokstav. Mitt rekord är 2,95 sekunder. Slå det om du kan!

setInterval kör en callback i ett bestämt intervall. Att använda funktionen i React innebär att man måste komma ihåg att anropa clearInterval vid unmount och dra in extra state varje gång intervallet ska pausas eller startas om. Det här inlägget paketerar båda delarna i en liten custom hook som jag kallar useInterval.

TL;DR​

• useEffect startar intervallet och returnerar en cleanup som anropar clearInterval – ingen manuell unmount-hantering.
• Den senaste callbacken hålls i en ref, så intervallet fortsätter ticka i jämn takt även när komponenten renderar om av orelaterade skäl.
• Att skicka in null som delay pausar intervallet, så det går att härleda "körs nu" direkt från props eller state utan en separat flagga.
• När delay ändras startas intervallet om automatiskt, så ett dynamiskt värde "bara funkar".

Har du någonsin kopierat något och direkt glömt vad det var?

TL;DR​

• navigator.clipboard.readText() returnerar ett Promise<string> med clipboardens nuvarande text.
• Funktionen är bara tillgänglig i en säker kontext (HTTPS eller localhost), och läsningen måste ske under en användarinteraktion – därför är den kopplad till ett knappklick i stället för att köras vid sidladdning.
• Anropet kan kasta fel (nekad behörighet, dokumentet saknar fokus, ingen clipboard tillgänglig …) så det hör alltid hemma i ett try/catch.

Starta spelet genom att klicka på rutan och skriva bokstaven som visas. Då börjar tiden gå och du får en ny slumpmässig bokstav att skriva så snabbt som möjligt. Varje rätt följs av en ny slumpmässig bokstav och om du skriver fel tar spelet slut. Kör hårt!

TL;DR​

• Ett litet snabbskrivningsspel byggt i React med TypeScript.
• useReducer håller spelets state samlat, med läget som idle eller running.
• useEffect läser in sparat rekord från local storage och slumpar fram första bokstaven vid mount.
• En egen useInterval-hook driver klockan.

Att hitta indexet av det största värdet i en array är en av de där uppgifterna som verkar trivial men har flera olika lösningar – var och en med sina avvägningar kring läsbarhet, prestanda och fallgropar.

TL;DR​

• En for-loop fungerar, men kräver flera muterbara variabler.
• En reduce kan lösa det på ett enda varv, men är inte särskilt lättläst.
• I praktiken är years.indexOf(Math.max(...years)) oftast det bästa valet – lättläst och kompakt, även om datan i praktiken gås igenom tre gånger bakom kulisserna.

Har du någonsin undrat hur gammal du är ... i millisekunder? Eller exakt hur många veckor det är mellan två tidpunkter? Lugn, lugn – i det här inlägget kan du få svar på alla dina "Hur många [enhet] är det mellan [tidpunkt] och [tidpunkt]?"-frågor!

TL;DR​

• Millisekunder, sekunder, minuter, timmar, dagar och veckor mellan två tidpunkter är trivialt att räkna ut – det är bara att dela millisekundsdifferensen med rätt konstant.
• Månader och år är knepigare eftersom deras längd varierar. Tricket är att räkna hela perioder framåt från startdatumet och addera hur långt in i nästa period vi har kommit – samma ankarbaserade modell som Temporal-API:n använder.
• Vill du bara ha svaret kan du anropa Temporal.Duration.prototype.total direkt i stället för att skriva uträkningarna själv.