JS oraz rysowanie w CSS

Ten wpis nie będzie o React i wstawianiu CSS-a wewnątrz kodu JavaScript, ale o czymś zupełnie odwrotnym. Będzie o sposobie wstawiania kodu JS wewnątrz plików CSS. Dokładnie chodzi o obiekty JSON, ale pewnie gdy zastosujemy pojedyncze wyrażenie bez średników to też będzie działać. Pokażę też jak użyć części specyfikacji o nazwie Houdini do rysowania w CSS za pomocą języka JavaScript.

Jakub T. Jankiewicz. Programista Front-End z wieloletnim doświadczeniem, skupiający się na języku JavaScript. Ostatnio pracuje także w języku R. Autor bloga Głównie JavaScript. Autor kilku projektów Open Source m.in. jQuery Terminal, sysend.js czy LIPS. Pomaga także przy projekcie OpenClipart, który dostarcza darmowych (w Domenie Publicznej) grafik wektorowych w formacie SVG. W wolnym czasie zajmuje się hobbistycznie fotografią.


Houdini

Jest to zestaw API, dzięki którym można podpiąć się pod silnik CSS. Za ich pomocą będziemy mogli dodawać nowe funkcjonalności do CSS, których nie ma jeszcze w przeglądarkach lub nigdy nie będą dostępne. Houdini to nazwa, która zawiera kilka API, z których jedne są już zaimplementowane w niektórych przeglądarkach. Inne są w trakcie wdrażania, a jeszcze inne są w planach lub w trakcie definiowania specyfikacji. Specyfikacja i implementacje mogą się jeszcze zmienić. Na stronie ishoudinireadyyet.com możesz sprawdzić status prac nad Houdini, w różnych przeglądarkach.

Workery

Workers, czyli z angielskiego robotnicy jest to sposób dodawania nowego wątku do języka JavaScript. Więc tak n prawdę nie jest jedno-wątkowy i można tworzyć nowe. Nowy worker tworzy się podając ścieżkę do pliku.

Mamy kilka rodzai workerów czyli:

  • Web Workers – zwykły wątek.
  • Shared Workers – jest to worker do którego można się odwoływać z różnych kontekstów np. stron, iframów czy innych workerów.
  • Service Workers – w przeglądarce jest to Worker, który działa po zamknięciu strony i może być np. odpowiedzialny za cachowanie stron (np. w aplikacji typu PWA) lub wysyłać powiadomienia ze strony (nawet jak zamknęliśmy stronę, a wyraziliśmy zgodę na powiadomienia).

Data URI

Jest to sposób do definiowania kodu html z danymi jako URI (rozwijając nazwę URL dostajemy Locator, a tutaj dane nie wskazują na lokalizacje, więc używamy URI czyli Identifier), który zaczyna się od data: i może wyglądać tak:

Dzięki temu możemy np. testować sobie kod JavaScript mając prosty edytor (czyli pasek adresu). Zdarza mi się testować w tem sposób proste właściwości JS albo CSS.

Data URI jest ograniczone co do długości, ale można utworzyć go z obiektu Blob. Nie posiada wtedy naszego kodu, ale ma tylko identyfikator (hash), który wskazuje na obiekt w pamięci.

Tutaj przykład funkcji blobify (nazwa może nie do końca poprawna, powinno być coś nawiązujące do URI). Bazuje ona na kodzie z tego pytania na Stack Overflow: „How to create a Web Worker from a string”.

Funkcja powstała do projektu Favloader (jest to biblioteka, która dodaje możliwość animacji favicon-ki, która nie zatrzymuje się jak zmienimy zakładkę. Używa do tego celu workera, który trzeba było dodać w tym samym piku, ponieważ ciężko by było użyć ścieżki, gdy używa się np. CDN).

Dalej w kodzie będziemy używać tej funkcji, aby utworzyć worker (a dokładnie paint worklet). Dlaczego nie użyjemy osobnego pliku? Moim zdaniem nadmierne rozdzielanie całej aplikacji na pliki jest błędem. Ciężko cokolwiek potem znaleźć, gdy trzeba skakać między plikami, a czasami nawet katalogami. Więc warto zależne funkcjonalności mieć w jednym pliku. Przydaje się to też, gdy brakuje innej możliwości np. na Codpen (link na końcu).

Przykładowy URL wygląda tak:

Więc nie jest to do końca data URI, ale działa dokładnie tak samo, tylko dane mogą mieć nieograniczoną długość, ponieważ nie ma ich w URL-u.

UWAGA: coś takiego nie zadziała z Service Workerem, który wymaga fizycznego pliku na dysku.

Paint Worklet

Jest to rodzaj Workera, do zdań specjalnych. Tworzy się go za pomocą:

Wewnątrz workera mamy dostęp do API, takiego samego jak API Canvas, gdzie mamy możliwość dowolnego rysowania. Możemy zarejestrować specjalnego Rysownika (ang. Paint), którym jest klasa i użyć go w CSS.

Poniżej kod prostego paint workletu, który rysuje punkt bazując na zmiennych CSS (to jedyny sposób aby wysyłać informacje do Paint Workletu).

JSON w CSS

Jak może zauważyłeś, w powyższym kodzie mamy:

czyli parsujemy zmienną CSS (a dokładnie jej wartość) jak JSON i to działa (przynajmniej w Chromium):

Nasz CSS wygląda tak:

Prawdopodobnie będzie działać wszystko od dwukropka do średnika, więc pewnie można też użyć JS i funkcji eval (nie próbowałem).

Punkty x oraz y możemy zmieniać jak ruszamy myszką, nasz worklet się uruchomi, gdy zmieni się wartość określona jako wejście Workletu.

Dodatkowo powinniśmy jeszcze zarejestrować poszczególne typy dla zmiennych:

Tutaj link do demo na CodePen.


Artykuł został pierwotnie opublikowany na jcubic.pl. Zdjęcie główne artykułu pochodzi z unsplash.com.

Patronujemy

 
 
Polecamy
Co zrobić, gdy baza danych puchnie? O skalowaniu w chmurze