Dzisiejszy wpis chciałbym rozpocząć od informacji o tym, iż optymalizacja czcionki na stronie przyniosła mi korzyść w postaci odchudzenia samej strony i ilości pobieranych danych. Bardzo często na stronach widzimy przeróżne kroje czcionek, jedne bardziej, inne mniej czytelne. U mnie na stronie do tej pory używałem kroju Ubuntu, bo w sumie taki mi się podobał. Kwestię gustu i tego, czy czcionka jest ładna lub nie, pomijam.
Blog - Tworzenie stron
Selektory w CSS – zbiór
W arkuszach styli CSS selektor to cześć kodu poprzedzająca nawias klamrowy. Określa on element lub wiele elementów, do których odnosi się dana reguła. Wyróżniamy kilka grup selektorów, które oznaczą nam elementy na stronie. Są to selektory elementów, pseudoelementów, klas i identyfikatorów, pseudoklas, atrybutów, uniwersalne oraz potomków. Selektory nie mogą zostać użyte w stylu 'inline’. Poniżej przedstawione zostały rodzaje selektorów.
Pobieranie i wysyłanie danych w JS – metoda fetch()
Tworzenie stron internetowych wymaga danych, które zaprezentujemy na stronie. Potrzebujemy je pobrać z API REST’owego, bądź będzie nam dostarczone w formie zmiennych, np. do TWIG’a. Dzisiaj skupię się na pierwszej formie dostarczenia danych, czyli pobieranie i wysyłaniu danych asynchronicznie metodą fetch() w JavaScript.
Funkcja clamp w CSS
Funkcja clamp to wygodna i nowoczesna metoda CSS służąca do uzyskania precyzyjnej, a zarazem elastycznej kontroli nad wyglądem elementów. Użycie tej funkcji polega na podaniu trzech parametrów, a ona już sama przeliczy wielkość danego elementu.
Sortowanie liczb w JavaScript
Jaka jest podstawowa metoda w JavaScript do sortowania? Oczywiście – metoda sort(), jednak nie do końca. Metoda ta sortuje poprawnie elementy alfabetyczne, ale nie liczbowe. Zaraz wyjaśnię na przykładach jak to działa i jak to zrobić poprawnie.
4 najważniejsze metody w JavaScript
Tablice są jednym z najważniejszych elementów w każdym języku programowania. Używa się ich powszechnie, na co dzień, w każdym rodzaju projektu. Dzisiaj chciałbym przedstawić 4 najważniejsze metody w JavaScript, takie jak filter() czy map(), które usprawnią pracę i obróbkę danych w każdym projekcie.
Usuwanie spójników z końca linii
Przyjęło się, że pisząc dłuższy tekst porządkuje się go w taki sposób, aby na końcu każdej linii nie zostawały pojedyncze spójniki, np. „z,a,i,u,o,w”, oraz przyimki, np. „do, za, na, tu”. Do tego celu używa się tzw. „twardej spacji”, a w świecie webdev . W związku z tym, że przy tworzeniu stron również ta zasada obowiązuje, dzisiaj przestawię sprawdzony sposób, a właściwie krótki kod JavaScript, który (mówiąc w skrócie) usunie nam spójniki z końca linii i przeniesie je do następnej linii.
Porównanie czasu w JavaScript
Dawno nic nie pisałem, więc dzisiaj postanowiłem, że będzie krótki poradnik. Chciałbym dzisiaj opisać temat zarządzania czasem, a konkretniej, sprawdzić czy obecna godzina jest z podanego przedziału. Można to wykorzystać np. do pokazania na stronie czy sklep jest jeszcze otwarty. Zaczynamy.
Tworzenie responsywnych tabel
Używanie tabel na stronie internetowej czasem sprawia nieco problemów, zwłaszcza, gdy nasz design strony jest elastyczny, responsywny. O ile na pełnowymiarowych komputerach nie sprawia to większych problemów, o tyle na urządzeniach mobilnych potrafi nieco popsuć odbiór danych z tabeli. Dzisiaj postaram się opisać jedno z przykładowych rozwiązań tego kłopotu.
Wyrażenia regularne w JavaScript
Podczas tworzenia strony internetowej zdarza się, że potrzebujemy sprawdzić dane wprowadzone przez użytkownika lub wyszukać element spośród wielu dostępnych. Wtedy z pomocą przychodzą nam wyrażenia regularne. Dzisiaj postaram się przedstawić możliwie zwięźle przydatne wyrażenia regularne, które można wykorzystać podczas walidacji danych przesyłanych od użytkownika poprzez formularz.
Templatki JS bez użycia jQuery
Framework jQuery zakorzenił się tak bardzo w środowisku deweloperów www, że wielu z nich „automatycznie” dodaje go do swoich projektów. Od pewnego czasu w swoich projektach, tam gdzie nie jest to konieczne, nie używam jQuery. Dzisiaj przedstawię wam jak używać templatek bez użycia frameworka jQuery.
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.
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.
Responsywne wideo w tle strony
Jakiś czas temu pisałem o tym jak zrobić screenshot’a w html5, natomiast dzisiaj skupię się na efekcie, który jest coraz bardziej popularny w internecie. Mianowicie zaprezentuję, jak uzyskać responsywne tło w postaci wideo. Sprawa przy responsywnej grafice jest o tyle prostsza, że wystarczy użyć backround-image oraz background-size (cover/contain). A przy wideo?
Preprocesory CSS
Każdy frontend’owiec na pewnym etapie swojej przygody z css, napotka pojęcie preprocesor. Ułatwiają one bardzo pracę nad stylowaniem 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 swobodnie władać czystym css.
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 web deweloper 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.