Codekraker 10: Marco Slooten - Werkenbijtopicus
naar topicus.nl
naar topicus.nl
Codekraker 10: Marco Slooten

Codekraker 10: Marco Slooten

‘Met dit trucje creëer je avatars met gekleurde fallback gelinkt aan initialen’

Handig JavaScript trucje met de modulo: avatars met gekleurde fallback

Veel applicaties en dashboards maken gebruik van avatars. Wanneer je geen foto hebt van de gebruiker, kun je de avatar vormgeven met de initialen tegen een achtergrondkleur. Maar hoe bepaal je de kleur? Dankzij een handig trucje met gebruik van de modulo kun je eenvoudig een gekleurde fallback voor je avatars creëren die gelinkt is aan de initialen. Geen random kleuren meer, maar avatars waarbij iedere combinatie van initialen altijd dezelfde kleur geeft. 

Kijken we naar de gekleurde fallback bij avatars, dan heb je een aantal requirements. We willen een avatar die:

  • Een kleur uit een lijst van kleuren.

  • Deterministisch is, waarbij dezelfde letters altijd dezelfde kleur terug krijgen ('AA' wordt altijd groen bijvoorbeeld).

  • Geen volgorde van kleuren heeft (dus niet dat de eerste avatar altijd blauw is, en de tweede altijd rood).

De eerste stap is om een nummer te genereren uit de bestaande initialen met string.charCodeAt(). Stel je hebt ‘MJ’, dan krijg je 77 en 74 terug. Deze tel je niet bij elkaar op, want dan krijg je hetzelfde getal en dus dezelfde kleur als bij ‘JM’. In plaats daarvan plak je ze tegen elkaar aan als string en maak je er dan weer een number van:

Vervolgens kies je een kleur. Ik heb een array met HEX kleurcodes waar ik er één van terug moet geven. Deze array kan meer dan 7.000 kleuren bevatten. In dit specifieke geval heb ik voldoende aan een array met slechts 6 kleuren. Maar hoe breng je 7774 terug naar een getal tussen de 0 en 5? Hiervoor is de modulo operator (%), ook wel bekend als de remainder operator, perfect. Hiermee krijg je de restwaarde terug die overblijft na het delen. 7774 % 6 geeft 4 terug. Als je dit handmatig wil doen kun je 7774 delen door 6, naar beneden afronden, vermenigvuldigen met 6 en dit aftrekken van het oorspronkelijke getal (7774). De uitkomst zal dus altijd tussen de 0 en de rechterkant van het procentteken min 1 liggen. Hiermee kun je de functie schrijven om een kleur terug te geven, waarbij je de uitkomst gebruikt als index op de array van kleuren:

Deze techniek is niet alleen ideaal voor avatars, maar ook nuttig voor alle andere situaties waarbij je iets wilt verdelen over een beperkt aantal items. Bijvoorbeeld om de tijd in 24-uurs formaat om te zetten naar de tijd op een klok of om te checken of een nummer even of oneven is. Als je bijvoorbeeld wilt weten hoe laat 17:00 is op een analoge klok, dan gebruik je 17 % 12. Wil je weten of een getal even is? Dan check je [getal] % 2 === 0. Je kunt er zelfs een IBAN-nummer mee valideren! Wil je meer weten of de volledige code (inclusief HTML en CSS) om een werkende avatar te maken? Lees dan mijn blog.

Benieuwd naar andere codekrakers? Lees de tips van NickDennisFrankRamonJeroenLisette en Sally, Jim of Rhodé.