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.

Rövarspråket sägs ha uppfunnits av Astrid Lindgrens make Sture Lindgren när han lekte med sina kompisar som liten. Astrid Lindgrens böcker om Kalle Blomkvist gjorde språket populärt i Sverige.

Rövarspråket är ett talbaserat språk där varje konsonant ersätts med konsonanten + o + konsonanten igen. Utifrån den enkla regeln skulle det vara busenkelt att göra en rövarspråksgenerator. När det kommer till rövarspråket i skrift – hädanefter kallat rövarskrift – finns det dock några fler aspekter att beakta. I det här inlägget är det alltså egentligen inte en rövarspråksgenerator som byggs, utan snarare en rövarskriftsgenerator.

TL;DR​

• Den enkla talregeln (konsonant + "o" + konsonant) behöver några tillägg för att fungera i skrift – framförallt hantering av "x" och versaler.
• Det här inlägget går igenom två strategier för att bygga en generator i JavaScript: att loopa över konsonanterna, och att loopa över texten som ska översättas.
• En regex med en callback kan korta ner alltihop till två rader, som visas som det slutgiltiga alternativet.

Man skulle kunna tro att det här med veckonummer är busenkelt. Det är väl bara att börja på vecka 1 och fortsätta till vecka 52 för att sedan börja om igen? Tyvärr är det inte så enkelt. Det visar sig tvärtom vara förvånansvärt komplicerat!

TL;DR​

• Oftast har ett år 52 veckor, men vissa år har 53 veckor.
• Om ett år ska ha 53 veckor eller inte beror på vilken veckodag den 1 januari följande år är och om det aktuella året är ett skottår eller inte.
• Skottår förekommer i genomsnitt lite mindre än var fjärde år, vilket gör modellen för när 53 veckor ska förekomma klurig.