Lordicon

Jeden projekt oraz wiele zróżniocowanych zadań: przygotowanie strony WWW, napisanie odtwarzacza dla animacji, stworzenie wtyczki dla WordPress-a.

W ostatnim czasie miałem przyjemność współpracy z Panem Tomaszem Wiluszem przy bardzo ciekawym projekcie. W ramach jego inicjatywy powstała strona Lordicon, w obrębie której można zapoznać się z biblioteką ikon. Ale nie takich zwyczajnych! Każda z nich ma starannie przygotowaną animację, za pomocą której można wnieść nieco dynamizmu do realizowanych przez twórców stron internetowych, aplikacji mobilnych czy też animacji. Zestawy ikon są już standardem przy projektowaniu stron, ale dodanie tutaj animacji jest ciekawym powiewiem świeżości. Ze swojej strony mogę polecić paczkę Lordicon. Na pewno skorzystam z niej w nie jednym projekcie.

Przygotowanie strony WWW

W ramach tego projektu przygotowałem stronę WWW. Jako, że ta ma charakter czysto statyczny, ponownie miałem okazję skorzystać ze świetnego generatora jakim jest Jekyll. W skrócie witryna jest przygotowana w taki sposób, że w procesie jej budowania powstaje finalna postać, która może być wysyłana bezpośrednio do przeglądarek. Po drodze nie jest potrzebny jakiklowiek interpreter. W ramach jej hostingu wystarcza jakikolwiek, najtańszy serwer HTTP. Takie rozwiązanie gwarantuje bezpieczeństwo. Zamawiający nie musi w ogóle się przejmować kwestiami aktualizacji oraz potencjalnych luk (zakładając że kompetencje w tym temacie pozostawiamy usługodawcy świadczącemu hosting).

W tym projekcie szablon graficzny został mi dostarczony w postaci makiet. Moim zadaniem było jego pocięcie. Przyłożyłem się tutaj by szablon ładował się możliwie szybko, mimo znaczącej ilości danych, które są do pobrania. Do tego jak to w każdym moim nowym projekcie tego typu, skorzystałem z narzędzia, które pozwala zoptymalizować używane zasoby: Webpack.

Odtwarzacz dla animacji

Tutaj został przygotowany tak zwany custom element, który pozwala w bardzo łatwy sposób osadzić ikonki (i inne animacje Lottie), na stronie internetowej. Wystarczy do tego załadować określoną bibliotekę z repozytorium NPM i możemy się cieszyć funkcjonalnym tagiem “lord-icon”. Jego dalsze użycie jest banalnie proste:

<lord-icon animation="hover" src="/my-icon.json"></lord-icon>               

Oczywiście w ramach tego projektu przygotowałem wiele przykładów pracy z tym elementem. Możesz je zobaczyć w ramach repozytorium GitHub, którego jestem autorem. Dodam że dana biblioteka została napisana z wykorzystaniem języka TypeScript, które stanowi w ostatnich latach jedno z moich podstawowych narzędzi pracy.

Wtyczka dla WordPress-a

Tak kompleksowy projekt potrzebował jeszcze jednego finalnego elementu: wtyczki dla popularnego CMS-a, która pozwoli łatwo osadzić ikonki na już istniejących stronach internetowych. Przygotowana wtyczka wspiera nowy graficzny edytor Gutenberg dostępny w Wordpress-ie 5 lub nowszym, dzięki któremu praca z ikonami może opierać się na metodzie złap i upuść. To nie wszystko: bardziej zaawansowani użytkownicy mogą skorzystać z shortcode i osadzić ikonki w bardziej kłopotliwych miejsach. Wtyczka jest w pełni darmowa. Wraz z nią udostępnionych jest 50 darmowych ikonek z kolekcji Lordicon. Możesz ją pobrać tutaj. Jeśli chcesz rzucić okiem na otwarty kod źródłowy zapraszam do repozytorium.