Z tego artykułu dowiesz się:

Dlaczego HTML, CSS i PHP to nie wszystko?

Podstawowymi językami używanymi do tworzenia stron internetowych są HTML, CSS, a także w znaczącej ilości przypadków PHP. Tak naprawdę wszystko, co widzi użytkownik na odwiedzanej stronie www jesteśmy w stanie “zakodować” korzystając tylko z tych języków. Niestety bardzo często potrzebujemy funkcji (np. animacji czy obsługi ekranów Apple Retina), których nie jesteśmy w stanie wykonać za pomocą samego HTML’a, CSS’a czy PHP’a. Tutaj (oprócz przydatnych wtyczek dla Developerów) z pomocą przychodzą nam programiści z całego świata tworzący ogólnodostępne darmowe biblioteki JavaScript i inne moduły pomagające nam uzyskać zamierzony efekt. Oto 10 bibliotek, które skradły moje serce, są darmowe, używane przeze mnie w większości moich projektów, a także ułatwiają pracę programistów.

Jakiej biblioteki JavaScript użyć?
Jakiej biblioteki JavaScript użyć?

jQuery

Autorzy mówią o swojej bibliotece, że to “szybka, mała i bogata w funkcje biblioteka oparta o język JavaScript”. jQuery jest kompatybilne z wieloma przeglądarkami. Zbiór zawiera zestaw funkcji, które sprawiają, że manipulowanie kodem HTML, zdarzeniami, animacje czy efekty są znacznie prostsze, a łatwe korzystanie z jego API sprawiło, że jQuery na stałe zapisało się w technikę pisania stron www. Biblioteka jQuery jest darmowa, oznacza to, że może z niej skorzystać dosłownie każdy.

Tworząc stronę internetową opartą o CMS WordPress jeśli chcesz, możesz wykorzystać podstawową wersję jQuery będącą już w zestawie.

Google Fonts

Dzisiaj standardem stało się używanie niestandardowych, przykuwających oko czcionek. Dlatego też Google Fonts jest moją podstawową biblioteką. Google postanowiło zbudować katalog fontów gotowych do zastosowania na stronie internetowej, z którego korzystanie jest darmowe. Każdy z nich dostępny jest w ponad 135 językach. Dzięki Google Fonts możemy w bajecznie prosty sposób użyć na naszej stronie niecodziennego kroju sprawiając, że strona będzie wyglądała atrakcyjniej.

Google Fonts posiada również minusy. Jednym z nich może być fakt, że polskie znaki obsługuje na dzień dzisiejszy około 60% wszystkich dostępnych fontów. Innym z kolei może być dostępność jednego “stylu” danej czcionki (np. tylko pogrubionego) co mocno zawęża użycie niektórych z nich w naszym rodzimym języku.

Bootstrap Grid & Reboot

Framework Bootstrap jest biblioteką, dzięki ilości funkcji szturmem zdobyła serca developerów i zdołała wręcz ustandaryzować sposób, w jaki tworzy się dziś strony internetowe, a dokładniej ich responsywne wersje.

Autorzy określają BootStrap’a jako “najpopularniejszy na świecie framework do budowania responsywnych stron internetowych”. Aktualnie korzystam jedynie z dwóch modułów wchodzących w skład “paczki” BootStrap’owej.

Pierwszym z nich jest BootStrap Reboot, który zawiera zestaw reguł CSS. Ma na celu ujednolicenie wyglądu newralgicznych elementów języka HTML tak, aby wyglądały i funkcjonowały w sposób jak najbardziej zbliżony, bez względu na rodzaj przeglądarki internetowej.

Drugim jest natomiast Bootstrap Grid. Jest to biblioteka, bez której nie wyobrażam sobie tworzenia responsywnych stron. Dzięki przemyślanemu zestawowi reguł CSS możemy łatwo tworzyć responsywne strony internetowe, które poprawnie wyświetlają się na urządzeniach z ekranami o zróżnicowanych rozdzielczościach i przeglądarkach.

Font Awesome

Projektując stronę www, używamy również ikon. Oznacza to, że często ikony te tworzone były jako pliki png. Niestety niosło to ze sobą pewne problemy. Zbyt niska jakość ikon powodowała ich “rozpixelowanie” na wysokich rozdzielczościach. Z kolei pliki w wysokiej rozdzielczości zajmowały sporo miejsca i zużywały transfer. Następnie pojawił się format .svg, dzięki któremu mogliśmy zacząć używać ostrych jak żyletka grafik wektorowych.

Niestety również i w tym przypadku pojawił się problem z m.in. zmianą koloru takiej grafiki. W zależności od tego w jaki sposób umieścimy plik .svg, otrzymamy różne możliwości wpływania na niego poprzez reguły CSS.

Dlatego też zacząłem używać Font Awesome. Jest to zestaw ikon w formie czcionki, który bez problemu i bardzo łatwo możemy postawić na swojej stronie www. Ikony to wektory dlatego też ładują się błyskawicznie oraz są ostre na każdej rozdzielczości i przeglądarce. Korzystanie z nich nie wpływają znacząco na czas ładowania strony, a ich baza wciąż się powiększa. Brak możliwości spersonalizowania biblioteki ikon rekompensuje wersja PRO, która to pozwala w dedykowanej aplikacji stworzyć zestaw ikon jako dedykowaną bibliotekę użytkownika. Font Awesome ułatwia także tworzenie interfejsu CMS czy aplikacji web. Pozwala także na wybór metody, w jakiej chcesz korzystać z ikon między ikonami renderowanymi jako "czcionka" lub jako kod .svg.

slick

Slick czyli “ostatnia karuzela, której potrzebujesz” to kolejna z bibliotek JavaScript, którą stosunkowo niedawno umieściłem wśród moich ulubionych. Jej możliwości konfiguracyjne, mała ilość kodu i kompatybilność w tworzeniu różnych elementów interfejsu sprawiła, że wszystko, co muszę przedstawić czy to w formie karuzeli, czy slajdów mogę stworzyć, właśnie korzystając z funkcji tej biblioteki.

Za jej pomocą projektowałem już m.in. moduł z logotypami klientów, moduły opinii, karuzelę z produktami oraz wiele więcej.

AOS - Animate On Scroll Library

Na pewno często widziałeś w sieci strony web, które wyświetlają elementy dopiero w momencie, gdy pojawiały się one na ekranie podczas Twojego scrollowania. Istnieje bardzo duże prawdopodobieństwo, iż autorzy tych stron użyli do tego celu właśnie biblioteki AOS’a.

Animate On Scroll Library, jak sama nazwa wskazuje, pozwala na dodanie animacji dla elementów na stronie podczas scrollowania. Dzięki niej mogę w atrakcyjny sposób przedstawiać informacje na stronie w taki sposób, by odwiedzający miał poczucie, że elementy na stronie reagują na to co robi. AOS działa w większości aktualnie używanych przeglądarek dlatego polecam go jako metody na atrakcyjne animacje elementów strony www.

Przy okazji warto wspomnieć, iż autorem ów biblioteki jest Polak :)

Bardzo długi czas poszukiwałem biblioteki galerii zdjęć, która byłaby na tyle uniwersalna, konfigurowalna i łatwa w użyciu, aby można ją było zastosować na wielu rodzajach podstron. Poszukiwałem też modułu, który będzie w jakiś sposób “rozumiał” problem umieszczanych w galeriach zdjęć o różnych wymiarach.

Tutaj strzałem w dziesiątkę okazała się biblioteka Unite Gallery. Jest to swego rodzaju “galeryjny kombajn” zawierający wiele kombinacji i układów zdjęć. Dzięki temu modułowi bez większej znajomości programowania i kodu HTML masz możliwość stworzenia od prostej galerii w układzie “siatki”, po skomplikowaną i pięknie dopasowaną do wielu zróżnicowanych zdjęć, galerię typu “zagnieżdżonego”. Co ważne biblioteka Unite Gallery działa w większości nowoczesnych przeglądarek.

Od kiedy Unia Europejska wprowadziła na swoim terenie wymóg informowania o ochronie danych osobowych (RODO) (m.in. na stronach internetowych). Internet został zalany masą pasków, bloków, wyskakujących okienek i wielu innych pomysłów na spełnienie powyższego obowiązku.

Dzięki bibliotece jQuery Cookies mogę sprawić m.in., że zamknięte okienko pop-up nie pojawi się użytkownikowi ponownie lub pojawi się po spełnieniu określonych warunków (np. po 7 dniach). Chyba każdy z nas zna sytuację gdy wyskakujące pop-up’y po zamknięciu nadal pojawiały się po przejściu na podstronę bądź odświeżeniu strony. Dzięki jQuery Cookies sprawiam, że wyskakujące okienka będą mniej odstraszały Internautów odwiedzających tworzoną przeze mnie stronę.

jQuery FocusPoint

Odkryta przeze mnie bardzo niedawno biblioteka jQuery FocusPoint służy do dokładniejszego oraz zdefiniowanego przez użytkownika przycinania zdjęć podczas np. zmniejszania rozdzielczości urządzenia.

Bardzo często bywało tak, że chciałem, aby jakiś element na zdjęciu był cały czas widoczny. Podczas gdy standardowo CSS pozwalałby w niewielkim stopniu wpływać na zachowanie crop’a podczas skalowania strony, tak jQuery FocusPoint pozwala określić punkt, który ma zostać w “centrum uwagi” podczas przycinania zdjęcia przez przeglądarkę. Punkt przycinania możemy określić za pomocą specjalnej aplikacji uruchamianej w przeglądarce.

retina.js

Gdy Steve Jobs stojąc na czele amerykańskiego giganta - firmy Apple - około 10 lat temu wprowadzał na rynek telefony iPhone wyposażone w nowe ekrany Retina raczej nikt nie spodziewał się ilości problemów, jakie później przysporzy deweloperom stron www ten fakt.

Aktualnie wszystkie urządzenia z logo nadgryzionego jabłka wyposażone są w ekrany o zwiększonym zagęszczeniu pikseli. Niestety niesie to za sobą problemy z plikami graficznymi.

Tworząc stronę internetową, która ma być kompatybilna z ekranami Retina największym problemem jest rozdzielczość plików graficznych. Gdy dla zwykłego ekranu o rozdzielczości FullHD wystarczy zastosowanie grafik o szerokości 2000px by były one ostre przy powiększeniu na całym ekranie, tak w przypadku Retina Display musimy zastosować obraz 2 razy (a nawet 3 razy) większy.

Tutaj idealnym rozwiązaniem do obsługi takich ekranów jest biblioteka retina.js która sprawdza czy sprzęt, z którego odwiedzana jest strona wyposażony został w ekran o podwyższonej gęstości pixeli. Jeśli tak to sprawdza, czy na serwerze znajduje się wersja grafiki dedykowana dla Retiny a następnie automatycznie ją wyświetla.

Kod zawierający biblioteki JavaScript
Kod zawierający biblioteki JavaScript

Podsumowanie

Znajomość wyłącznie kodu HTML, CSS i PHP to dopiero początek. Możliwości, jakie daje nam m.in. jQuery, a także pomysłowość deweloperów z całego świata sprawia, że na stronie www można wdrożyć wiele niecodziennych oraz kreatywnych rozwiązań. Warto pamiętać, że każda dodatkowa biblioteka JavaScript, dodatkowy skrypt czy porcja kodu CSS dołączony do naszej strony (bez znaczenia czy jest w użyciu czy nie) to potencjalnie kolejne obniżenie oceny strony w Google PageSpeed Insight. Dlatego też powinniśmy korzystać z nich z głową.