#frontendowe spojrzenie na tworzenie stron www
Zapytania o media przeglądarki są bardzo istotne, gdy tworzymy responsywne strony www. Dzisiaj dobrą praktyką jest projektowanie stron w tak zwanym podejściu „mobile first” oraz elastycznie dopasowane do rodzaju urządzenia i szerokości jego ekranu. Dzisiaj chcę przedstawić czwarty poziom Media Queries, czyli dostosowanie elementów względem wielu parametrów w nowym podejściu (zakresy).
Łukasz
Tworząc i wersjonując projekty czasem potrzebujemy poprowadzić daną gałąź (branch) bez historii branch’a źródłowego. Jest to pomocne w przypadku, gdy chcemy wydzielić jakiś moduł, który następnie przeniesiemy do innego projektu. Zatem przejdźmy do szybkiego przedstawienia operacji tworzenia branch’a bez historii.
Łukasz
Rozszerzenia środowiska IDE są nieocenione w przyspieszaniu pracy bez obniżania jakości. Biorąc pod uwagę, że Visual Studio Code jest jednym z najpopularniejszych narzędzi, postanowiłem przedstawić kilka przydatnych wtyczek. Dotyczyć będą one głównie pracy frontendowej, jednak mimo wszystko warto znać wtyczki do VS Code.
Łukasz
Prezentacja treści na stronie w formie graficznej to bardzo istotne zagadnienie. Chodzi głównie o to, aby obrazy były umieszczone w odpowiednich proporcjach. W tym przypadku z pomocą przychodzi nam aspect ratio w CSS. Jest to rozwiązanie znane już od dawna, jednak nie wszystkie przeglądarki to wspierają. Przejdźmy do konkretów.
Łukasz
Od jakiegoś czasu można zaobserwować w świecie dev nowy trend lub podejście do tworzenia stron www. Mowa tu o planowanym wprowadzeniu „CSS Container Queries” do obsługi elastycznych layoutów. Tworząc projekt responsywny, często używa się zapytania @media, aby zmienić układ elementów w zależności od rozmiaru widocznego obszaru.
Łukasz
Często przemierzając internet można spotkać strony internetowe typu „one page”. Na niektórych przechodzenie między sekcjami odbywa się na zasadzie przewijania oraz „doskakiwania” do kolejnej/poprzedniej sekcji. Dawniej robiło się to za pomocą JavaScriptu, jednak dzisiaj możliwości są większe. Dzisiaj pozwala już na to sam CSS, o czym będzie w tym wpisie.
Łukasz
Tablica (także w JavaScript) to struktura danych reprezentująca uporządkowany zbiór indeksowanych elementów. Łączenie tabel w JavaScript to jedna z podstawowych operacji na danych. Często zdarza się, iż potrzebujemy połączyć dwie lub więcej zestawów danych w jedną zbiorczą tabelę. Z pomocą przychodzą nam co najmniej trzy metody.
Łukasz
Dostępność jest w dzisiejszych czasach bardzo ważna, szczególnie jeśli chodzi o kontrast kolorów na stronach internetowych. Osoby słabo widzące poruszając się w internecie nierzadko mają problem z poprawnym widzeniem treści. Dzisiaj przygotowałem wpis na temat poprawy dostępności strony na podstawie kontrastu w CSS.
Łukasz
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.
Łukasz
Apple tworzy swoją przeglądarkę Safari Technology Preview w celu szybszego wprowadzania poprawek, zmian i nowości do głównej gałęzi Safari oraz usprawnienia dla deweloperów. We wpisach tego typu chciałbym zawierać istotnie zmiany/poprawki z mojego punktu widzenia, które będą przydatne w pracy typowo frontendowej.
Łukasz
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.
Łukasz
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.
Łukasz
Funkcja clamp() w CSS to wygodna i nowoczesna metoda CSS służąca do uzyskania precyzyjnej, a zarazem ale elastycznej kontroli nad wyglądem stylowanych elementów. Użycie tej funkcji polega na podaniu trzech parametrów, a ona już sama przeliczy wielkość danego elementu.
Łukasz
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.
Łukasz
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.
Łukasz
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.
Łukasz