Głównym problemem, który rozwiązują warstwy kaskadowe, jest zapewnienie poprawnego sposobu pisania CSS bez martwienia się o nadpisywanie się wartości i kolejność źródeł.
Cascade Layers CSS
Łukasz
ŁukaszBlog - Tworzenie stron
Oczywistością współczesnego świata jest fakt, że obecność online stała się nieodłączną częścią działalności każdej firmy, instytucji czy też pasjonata dążącego do dzielenia się swoją wiedzą z innymi. Kategoria Tworzenie stron internetowych to obszar, który oferuje wszechstronne i dogłębne spojrzenie na proces projektowania, tworzenia i rozwijania stron internetowych. W tej kategorii na blogu eksploruję różnorodne aspekty związane z kreowaniem funkcjonalnych, estetycznych i efektywnych stron online.
Łukasz
Flexbox – kompendium wiedzy
Flexbox opisuje dynamiczny i elastyczny układ strony w zależności od rozmiaru okna przeglądarki. Zapewnia poprawne wyświetlanie na wielu ekranach.
Łukasz
Filtrowanie danych w JS
Tworząc sklep internetowy z dużą ilością produktów potrzebujemy stworzyć sprawny mechanizm filtrowania danych, aby umożliwić klientowi odnalezienie pożądanego produktu. Zatem dzisiaj przygotujemy filtry danych i obsłużymy je w JavaScript, aby wyświetlić dane produkty.
Łukasz
Jak zrobić dobry code review?
Podczas tworzenia oprogramowania, nie ważne czy strony internetowej, aplikacji, ważnym elementem jest dobry code review. Wprowadzenie dobrych praktyk od początku cyklu życia danego oprogramowania z pewnością ułatwi i przyspieszy pracę.
Łukasz
Pseudo selektor :has()
Bardzo niedawno temu, nastał dzień, w którym to pierwsza przeglądarka uruchomiła wsparcie dla pseudo selektora :has() w CSS. Jest to o tyle ważna informacja, ponieważ czekaliśmy na to już od jakiegoś czasu. W skrócie: pseudo selektor :has() wybiera rodzica danego elementu.
Łukasz
Obrazy responsywne
Dzisiejszy wpis chciałbym poświęcić tematowi responsywnych obrazów na stronie internetowej. Temat bardzo istotny, gdyż bardzo wiele osób przegląda strony na urządzeniach mobilnych o różnej rozdzielczości. Dlatego przygotowuje się strony tak, aby zawierały obrazy responsywne.
Łukasz
prefers-reduced-motion, redukcja ruchu na stronie
Tworząc nowoczesne strony internetowe chcemy, aby była ona przyjazna użytkownikowi. Chcemy także, aby treść na stronie była przedstawiona w atrakcyjny sposób, także w formie animacji. Nie można jednak przesadzić, bo wtedy uwaga użytkownika zostanie rozproszona i jest mniejsza szansa, że dotrze do informacji, której szukał. Dzisiejszy wpis poświęcę zagadnieniu, które pomoże w zmniejszeniu ruchu na stronie (redukcja ruchu), gdy użytkownik sobie tego życzy.
Łukasz
drop-shadow(), czyli ładniejszy cień w CSS
Cienie pod elementami na stronie internetowej bardzo często poprawiają ich czytelność. Ma to miejsce na przykład podczas użycia wyskakujących okien czy tak zwanych modali. Jeszcze kiedyś chcąc uwydatnić element należało przygotować odpowiednią grafikę i umieścić ją w tle elementu. Dzisiaj mamy ten komfort, że możemy stworzyć cień w CSS i będzie on bardzo realistycz
Łukasz
Conic gradient, efektowne gradienty na stronie
Conic-gradient() to wbudowana funkcja CSS, za pomocą której można tworzyć ciekawe, barwne tła. Sposobów na wykorzystanie tego typu tła jest oczywiście więcej. Dzisiaj skupię się na omówieniu zasady działania i kilku przykładach.
Łukasz
Sposoby wyrównania checkbox’ów w formularzu
Tworzenie stron internetowych zawiera w sobie wiele możliwości. Także jeśli chodzi o projektowanie i tworzenie formularzy, w których zawarte są pola wyboru. Jak podejść do tego typu formularzy i jak je wykonać, by były przyjazne użytkownikowi? Wyrównanie checkbox’ów i sposoby przedstawię w poniższym, krótkim artykule.
Łukasz
Media Queries level 4
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
Przydatne wtyczki do VS Code
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
Aspect Ratio w CSS
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
Zapowiedź CSS Container Queries
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
CSS Scroll Snapping, czyli ciekawe przewijanie
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
Łączenie tabel w JavaScript
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