Czym jest popper.js i modernizr.js? Do czego służą?

4 września 2021, Czas czytania: 4:00 min. , Komentarz(y):0

Jeśli jesteś programistą i interesują Cię ciekawe sposoby na szybsze rozwiązywanie problemów, to jesteś we właściwym miejscu! W tym artykule przedstawię podstawowe informacje na temat Popper.js oraz Modernizr.js. Pokażę również, jak mogą one ułatwić Twoją pracę.

Spis treści:

• Co to jest Popper.js?
• Jak korzystać z Popper.js?
• Czym jest Modernizr.js?
• Jak korzystać z Modernizr.js?
• Skrót informacji

Co to jest Popper.js?

Popper.js nie jest biblioteką, a podstawą do budowania jej. Można powiedzieć, że jest to maszyna do ustawiania i pozycjonowania elementów, takich jak tooltipy. Jeśli szukasz biblioteki do tworzenia tooltipów, powinieneś spojrzeć na tippy.js, które jest oparte właśnie na Popper.js. Innym przykładem biblioteki korzystającej z Popper.js, jest nam wszystkim dobrze znany – Bootstrap. Dowiedzieć się więcej o popper.js możemy na stronie internetowej lub na jego stronie GitHuba.

Jak korzystać z Popper.js?

Są dwa sposoby, aby zacząć korzystać z Popper.js w naszym projekcie. Pierwszym z nich jest zainstalowanie poprzez menedżera pakietów npm lub Yarn a drugim przez dodanie CDN url w naszym projekcie. Menedżer pakietów:

Popper.js daje nam możliwość ustawienia tooltipa w aż dwunastu różnych położeniach, takich jak: top-start, top, top-end, right-start, right, right-end, bottom-end, bottom, bottom-start, left-end, left, left-start.

Na głównej stronie popper.js.org możemy sprawdzić te wszystkie opcje w interaktywnym przykładzie.

Kolejną opcją, jaką dostajemy, jest Overflow prevention, która przyczepia tooltipa i zmienia jego położenie razem ze scrollowaniem.

Podobną opcją jest flipping, która sprawia, że tooltip przeskakuje na przeciwną stronę razem ze scrollowaniem.

Aby tworzyć obiekty z metodami, należy skorzystać z konstruktora createPopper. To w nim będziemy zmieniali położenie elementu.

Przykład:

W dokumentacji znajdziecie dużo więcej informacji. Więc jeśli zależy Wam na bardziej skomplikowanych wariacjach, zapraszam do niej.

Czym jest Modernizr.js?

Jest to otwarta biblioteka napisana w języku JavaScript. Pozwala nam ona na sprawdzanie dostępności funkcji w różnych przeglądarkach internetowych. Ułatwia to pracę programistom, bo dzięki niej, łatwiej mogą dobrać takie funkcje, które będą dostępne w jak największej ilości wersji czy przeglądarek. Co więcej, w tych, w których funkcja nie będzie działać, programista będzie wiedział, że powinien użyć alternatywnego kodu. Niestety Modernizr.js nie dodaje nam brakujących funkcjonalności do przeglądarki. Do tego możemy skorzystać z Polyfill.

Jak korzystać z Modernizr.js?

Aby korzystać z modernizr.js, należy najpierw zainstalować go przez npm:

npm install -g modernizr

Na stronie modernizr, gdy wejdziemy w zakładkę download, znajdziemy wszystkie funkcje, które mogą się nam przydać. Możemy je również stamtąd pobrać.

Teraz jesteśmy gotowi, do zbudowania pliku modernizr.js wpisując:

modernizr -c modernizr-config.json

Teraz wystarczy tylko podłączyć skrypt w naszym pliku, który linkuje do pliku modernizr.js i zacząć korzystać z modernizr.js w zależności od twoich potrzeb.

Skrót informacji

Podsumowując, jest wiele sposobów na uproszczenie sobie pracy i poprawienie jej jakości. Jednymi z nich są właśnie popper.js i modernizr.js. Jeśli jesteś programistą, powinieneś szukać takich ułatwień i jak najbardziej z nich korzystać, aby zadbać o swoją efektywność. Możliwości są nieskończone. Jeśli znacie jakieś fajne biblioteki lub inne rzeczy, które pomogą w programowaniu, zapraszam do podzielenia się w komentarzach.

TAGI:

• web design
• popper.js
• modernizr.js

Zostaw komentarz do artykułu: Czym jest popper.js i modernizr.js? Do czego służą?