Czym jest popper.js i modernizr.js? Do czego służą?
, Czas czytania: 4:00 min. , Komentarz(y):1
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
Spis treści
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:Zostaw komentarz do artykułu: Czym jest popper.js i modernizr.js? Do czego służą?
1 Komentarz
Dodaj komentarz
Musisz się zalogować, aby móc dodać komentarz.
Fajny artykuł o Popper.js i Modernizr.js. Na pewno przyda się wielu osobom, które interesują się programowaniem.