Ciekawe biblioteki JS oraz CSS [Lista]


  • Admin

    Cześć dzisiaj wpis nieco inny, powiemy sobie o paru ciekawych bibliotekach do JS i nie tylko które warto znać.
    Z góry zaznaczam, że nie wypróbowałem wszystkich z nich (część pozostaje wciąż w moich zakładkach jako "do przetestowania") ale są wartę uwagi dlatego postanowiłem je tutaj zebrać.

    No dobrze koniec tego przykrótkiego wstępu, lecimy:

    JavaScript:

    • Glide.js - prosty, ładny i funkcjonalny slider na naszą stronę.
    • Coin Slider - prosty do granic możliwości slider.
    • Rellax - biblioteka pozwalająca uzyskać Parallax efekt.
    • Parallax - podobnie jak powyżej
    • Particles.js - efekt rozpadu, często występujący przy np. stronach logowania.
    • Scroll Reveal JS & AOS & Basic Scroll - animowanie pojawiających się danych podczas przewijania.
    • Vibrant.js - wyciąganie kolorów z obrazu, np. do zrobienia poświaty za obrazem (coś jak albumy na Spotify jakiś czas temu)
    • Adaptive Background - dokładnie to co powyżej lecz z użyciem jQuery.
    • Typed.js - efekt pisania na klawiaturze po ekranie, nic prostszego.
    • Chart JS - ciekawa biblioteka do tworzenia fajnych kolorowych wykresów.
    • PaperJS - animowanie SVG czyli wektory w akcji.
    • BonsaiJS - podobnie JW.
    • FilePond - upload plików, optymalizacja i skalowanie.
    • Three.js - dość spora biblioteka pozwalająca na animowanie obiektów w przestrzeni 3D, całkiem rozbudowana (niestety nie miałem okazji z niej korzystać).
    • Vivus - animowanie SVG.
    • Kute.js - gotowy silnik do wszelakich animacji
    • D3.js - biblioteka do wizualizacja danych, bardziej rozpoznawalna w środowisku big-data.
    • Anime.js - wodotryski na stronę.
    • Tesseract.js - swego rodzaju OCR
    • Normalize.css - biblioteka której celem jest zresetowanie wbudowanych w przeglądarki stylów
    • Coinhive - kopanie kryptowalut na stronie.
    • Bideo.js - pełnoekranowy odtwarzacz, przydatny dla strony typu One-Page.
    • Pixi.js - tworzenie ciekawych rzeczy w oparciu o WebGL.
    • Lodash - prosta biblioteka ułatwiająca działanie na tablicach, obiektach czy stringach. Pozwala na np. opóźnienie wykonania zapytania czy wiele innych.
    • Photo Sphere Viewer - odtwarzacz (zupełnie jak Google Street View) 360 stopni.

    CSS

    • Animate.css - niezły zbiór przejść i animacji.
    • Loaders.css - animacje ładowania.
    • Hover - animacje odgrywane przy najechaniu myszką.
    • Font-Awesome - skalowane ikony SVG jako proste do wdrożenia klasy w CSS.
    • Fontello - tym razem strona, pozwalająca wygenerować paczkę wybranych ikon (również FontAwesome) aby następnie móc ich używać w kodzie swojej strony.

    Zestawienie celowo nie zawiera framework'ów ponieważ ich dodanie wydłużyłoby znacznie tą listę (natomiast znajdziecie je w zewnętrznych zasobach poniżej). Zwróćcie proszę uwagę na to, że pewne prezentowane rozwiązania mogą być już przestarzałe, część i/lub całość przestała/przestanie istnieć wraz z biegiem czasu.

    Polecam sprawdzić możliwości każdej z tych bibliotek i rozważyć czy aby na pewno są one konieczne w projekcie.
    Czasami bywa też sytuacja w której użycie takiej biblioteki niewiele pomoże a jedynie spowolni działanie waszej aplikacji, warto więc wtedy samemu zaimplementować jej funkcjonalność - istnieją nawet bardzo fajne strony udostępniające kod i pokazujące jak to zrobić.

    Wystarczy trochę czasu i samozaparcia aby w kilka minut uzyskać coś podobnego a może nawet lepszego.
    Szczególnie warto wydaje mi się zainteresować się stroną Codrops która ma niesamowite zasoby pokazujące co można zrobić z czystym językiem, dla przykładu CSS:

    Na koniec pragnę jedynie poinformować, że przedstawione biblioteki to tak naprawdę nic, bardziej obszerne dokumenty znajdziecie na przykład tutaj.: https://github.com/sorrycc/awesome-javascript
    Istnieje również nawet cała strona na ten temat poświęcona biblioteką do JS i nie tylko.

    Jeżeli znacie jakieś inne ciekawe propozycje które warto zamieścić, koniecznie podzielcie się nimi w komentarzu.