React + Deno - generowanie palet kolorów i obrazów
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) orazuseEffect
do przegenerowania kontekstu płótna (canvas context), czyli do narysowania losowego obrazka po wybraniu palety (przykład: komponent PaletteConsumer) - metody
entries()
,keys()
czyvalues()
klasy Map w JavaScript są array-like ale nie są tablicami, dlatego aby móc użyć na tych kolekcjach funkcjimap
muszę je do tablicy przekształcić (czyli opakować wywołaniemArray.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ę.