Ładowanie...

Underscore vs. Lodash, czyli szybkie porównanie bibliotek

Tworząc stronę opartą głównie o frontend i jakiś zbiór danych często zadajemy sobie pytanie jakiej biblioteki użyć, by obrobić dane. Javascript to język działającym (prawie) wyłącznie po stronie klienta w przeglądarce. Dzisiaj postaram się po krótce przybliżyć dwie znane biblioteki służące do obróbki zbioru danych. Wprowadzenie Stojąc przed wyborem między biblioteką Underscore JS a Lodash, ... [Czytaj dalej]

Flexbox, czyli elastyczne tworzenie stron www

Pojęcie responsywnych stron www każdemu kojarzy się z elastycznymi stronami, które są dostosowane do wyświetlania na różnych rodzajach ekranów. W szczególności pojęcie znane jest osobom na stanowisku frontend developer - osoby odpowiedzialne za część wizualną (techniczną) strony www. Dzisiaj wiodącym trendem jest flexbox. Wprowadzenie Termin flexbox wprowadzono wraz z wejściem specyfikacji CSS2.1, natomiast ... [Czytaj dalej]

Preprocesory CSS - Wstęp

Każdy frontend'owiec na pewnym etapie swojej przygody z css, napotka pojęcie preprocesor. Ułatwiają one bardzo pracę nad styowaniem strony, a na pewno ją przyspieszają, co z kolei ma duży wpływ na wydajność. Oczywiście, aby zacząć korzystać z preprocesorów należy swobodie władać czystym css. Przedstawienie W tym wpisie postaram się jedtnie przedstawić zarys ... [Czytaj dalej]

Modułowość styli CSS

CSS jest prostym językiem i można w nim pisać kod, który jest łatwo dołączany do projektu. Początkujący webdeweloper nie zawsze jest świadomy, jakie szkody może wyrządzić nieumiejętne dokładanie kodu css. Wtedy zaczyna się niestety szukanie "na szybko" przyczyny złego stylowania poszczególnych elementów. Pułapki podczas kodowania w CSS Jakiś czas temu pisałem o ... [Czytaj dalej]

Gulp.js - narzędzie do automatyzacji #2

Nadszedł czas na drugą część z cyklu minifikacja i automatyzacja w zakresie front-endu. Jakiś czas temu przedstawiłem teorię i konfigurację Gulp.js. Dzisiaj skupię się na nieco szerszej analizie i przedstawieniu przykładu, jak (wg. mnie) zautomatyzować proces tworzenia witryny. Jako przykładowy schemat działania wykorzystam skrypt z Grunt'a. Przygotujmy Gulp'a czyli zainstalujmy go globalnie: npm ... [Czytaj dalej]

Gulp.js - narzędzie do automatyzacji #1

Jakiś czas temu pisałem na temat, jakim jest minifikacja js i css, na przykładzie narzędzia Grunt. Dzisiaj wstępnie omówię drugie narzędzie służące do automatyzacji procesu tworzenia stron www, czyli Gulp.js. Skupię się na porównaniu go do wspomnianego Grunt'a, zaletach i wadach oraz kilku prostych przykładach. Zaczynamy. Czym jest Gulp.js? Gulp.js jest narzędziem do ... [Czytaj dalej]

Animate.css, czyli proste animacje w czystym css

Witam. Coraz więcej serwisów internetowych zawiera w sobie efektowne animacje, przejścia, przekształcenia elementów. Kiedyś za te efekty odpowiadały grafiki, np. gif'y, jednak obecnie nie jest już to efektywne rozwiązanie, dlatego wykorzystuje się dobrodziejstwa CSS. Zatem, z czego korzystać? Jak stworzyć lekką, a zarazem efektowną stronę? Animate.css, jako zbiór przydatnych animacji Oto narzędzie, ... [Czytaj dalej]

Porównanie funkcji querySelector, getElementById i getElementsByClassName

Tworząc strony internetowe "od strony frontowej" zastanawialiście się kiedyś nad wydajnością waszych witryn? Otóż ma to duży wpływ na szybkość generowania strony, podobnie jak optymalny skrypt po stronie serwerowej. Wydajność dzisiejszych aplikacji webowych jest niezwykle istotna ze względu na ogromną popularność wszelkiej maści urządzeń mobilnych. querySelector document.querySelector("#element") Pierwsza z funkcji zwraca pierwszy napotkany element ... [Czytaj dalej]

Reguła !important w CSS - kiedy i jak używać?

Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...  Słowami Stephanie Rewis rozpoczynam te wpis, chcąc zwrócić uwagę na istotę "problemu". Autor powyższego wpisu, sfrustrowany kodami css, zwraca uwagę na nadużywanie pewnych reguł, które niekiedy powodują bałagan w kodzie. Typowy przykład (nie naśladować!) Piszę ... [Czytaj dalej]

Bootstrap 4 - wstęp do nowości

Każdy, kto choć troche interesuje się tworzeniem stron internetowych na pewno zna framework frontendowy Bootstrap. Jest to jeden z najbardziej popularnych i najczęściej wykorzystywanych narzędzi deweloperskich do tworzenia stron. Właśnie została zaprezentowana jego czwarta wersja, póki co w stadium alpha. Jest sporo nowości, a więc zaczynamy. Brak wsparcia dla IE8 - ... [Czytaj dalej]

Minifikacja plików JS i CSS - Grunt

Wiele osób, mając własną witrynę, zastanawia się czasem, jak by tu ją przyspieszyć. Coraz popularniejsze są narzędzia Google, tj. usługa PageSpeed Insights, która pozwala na przetestowanie danej witryny pod względem optymalizacyjnym, a co za tym idzie pod względem szybkości działania. Postaram się po krótce przedstawić narzędzie, które pozwoli zautomatyzować minifikację ... [Czytaj dalej]

Zagnieżdżenie elementów HTML cz. 1

Zainspirowany brakiem magii świąt, chciałbym napisać kilka (krótkich) słów na temat zagnieżdżenia elementów html. Jest to temat o tyle ciekawy, że nierzadko istnieje więcej niż jedno poprawne rozwiązanie. Moje przykłady zawarte w tym takście są moją praktyką i uważam je za poprawne. Dzisiejszy wpis będzie na temat linków i nagłówków. Podstawa Krótko ... [Czytaj dalej]

AJAX - dobrodziejstwo dynamicznych witryn

AJAX jest to technika tworzenia aplikacji internetowych, dzięki której dane możemy pobierać i wysyłać asynchronicznie ("w tle"). Wiele witryn korzysta z tego dobrodziejstwa, w którym ładowanie danych odbywa się bez przełaowania całej strony. Podstawowymi elementami, które wchodzą w skład AJAXu są XMLHttpRequest, JavaScript oraz XML. Powyższa grafika obrazuje poglądowo jak działa ... [Czytaj dalej]

AngularJS, czyli single page pełną parą

kilka dni temu pisałem na temat ReactJS, jednak po głębszym zbadaniu tematu postanowiłem wybrać nieco inne narzędzie. Technologie tworzenia witryn internetowych rozwijają się w zaskakującym tempie. Jedną z nich jest, stworzony w 2010 roku przez inżynierów Google, framework AngularJS. Jest za tem stosunkowo młodym narzędziem, jednak daje ogromne możliwości. Oparty ... [Czytaj dalej]

Naukę ReactJS czas zacząć

Zawsze fascynowały mnie witryny napisane w technologiach po stronie użytkownika, które nie wymagają przeładowania strony. Witryny takie, działają niezwykle szybko i dane mamy praktycznie od razu przed oczami, a to za sprawą wykorzystania JavaScriptu. Frameworki opanowały dzisiejszy internet - to trzeba przyznać. DOM jest stosowany do kolejnych web-technologii, jako ustandaryzowany ... [Czytaj dalej]

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.