Piszę generator palet kolorów

Lubię, jak jest kolorowo, wymyśliłam więc, że czas na trening: zbuduję (używając Deno i React) prosty generator palet kolorów. Palety kolorów będą tworzone na podstawie napisu wprowadzonego przez użytkownika.

Jak to zrobiłam

Wprowadzony tekst traktuję funkcją skrótu (md5) i traktuję kilka początkowych par cyfr szesnastkowych jako wartości hue (w modelu kolorów HSL) dla początkowej “palety”.

Póżniej korzystam z gotowej biblioteki Kolorwheel.js i generuję kilka kolejnych “palet”.

Po wybraniu “palety” program generuje losowy obrazek, którego kolory pochodzą z palety.

CSS do stronki wzięłam z awsm.css

Czego się nauczyłam

Było kilka momentów, gdy musiałam sięgnąć do internetów po podpowiedzi, bo trafiłam na nowy dla mnie obszar:

• użyłam po raz pierwszy react hooków useRef (do przechowania referencji do obiektu DOM reprezentującego canvas) oraz useEffect do przegenerowania kontekstu płótna (canvas context), czyli do narysowania losowego obrazka po wybraniu palety (przykład: komponent PaletteConsumer)
• metody entries(), keys() czy values() klasy Map w JavaScript są array-like ale nie są tablicami, dlatego aby móc użyć na tych kolekcjach funkcji map muszę je do tablicy przekształcić (czyli opakować wywołaniem Array.from(...)(przykład: komponent PaletteChoice)
• mogę użyć pewnej listy literałów napisowych do utworzenia typu (TypeScript) przypominającego “enuma” , dzięki czemu na etapie statycznej analizy kompilator wyłapie pomyłki (przykład: klasa PaletteName)

Screenshot

Żródła

Źródła (GitHub): deno-react-palette-generator

Demo

Wygenerowałam też Github Page na której można sobie poklikać.

Wnioski

Strona strasznie długo się ładowała. Chyba z minutę. Strzelam, że to z powodu deweloperskich/niezminimalizowanych wersji bibliotek, które zostały wessane do bundla. Ale nie o optymalizację mi tu chodzi, tylko o dobrą zabawę.