Kawałek Kodu

Co tu się odskryptala?! Czyli programistyczne porady na luzie

Jak zdziecinnieć, czyli o narzędziu do wyklikania reguł :nth-child.

Pewnie większość z Was, czytających blog to dorośli użytkownicy internetu, ale jako osoby związane z tworzeniem stron internetowych macie do czynienia z dziećmi. Niekoniecznie swoimi, choć to naturalne wobec powyższego, ale z tymi CSS-owymi dziećmi, czyli regułami typu :nth-child. Czasem te urwisy dają w kość i trzeba się trochę podrapać w głowę, aby dobrać odpowiednią regułę w celu wyróżnienia kilku dzieciaków.

Czytaj dalej

Nazywam się James. James Bug. Czyli błędy w Firefox.

Uważasz, że czasy dopasowywania strony pod każdą przeglądarkę z osobna minęły? Zacierasz ręce, bo w Chrome działa? Nic bardziej mylnego! I wcale nie mam na myśli przeglądarki wiodącej firmy tworzącej oprogramowanie.

Fire(fox)bug.

Na błędy trafiłem zupełnie przypadkowo - co w sumie wydaje się logiczne. I oczywiście testując stronę na Chrome, twierdziłem: a gdzie tam, to już nie te czasy. Jak się jednak okazało Firefox też ma swoje za uszami.

Pierwszy błąd wiąze się ze zmiennymi CSS. Weźmy kawałek kodu (sic!):

Drugi błąd jest związany z klejącym pozycjonowaniem i wyświetlaniem flex. Okazuje się, że klej na Firefox nie trzyma tak dobrze, jak na Chrome. Widocznie nie opracowali prawidłowej receptury dla każdej z "materiałów".

zmienna css i pseudo element (odświeżanie zawartości przy zmianie zmiennej).

position sticky i flex.

Lepkie ręce, czyli position: sticky jeszcze bardziej klejące.

Czy dzisiejszy odcinek będzie nawiązywał do braku higieny? Nie. Czy będzie nawiązywał do nalepek na lodówkę? Nie. Czy będzie nawiązywał do position: sticky? Tak! Ale będzie to prawie position: double-sticky!

Icky.

Pozycjonowanie sticky nie jest już nowością. Ale jest wspaniałym rozwiązaniem pozwalającym tworzyć nam "klejący" pasek nawigacji bez potrzeby ustawiania paddingów na elementach i obsługiwania zdarzenia scroll. Łączy w sobie dwa typy pozycjonowania: relatywne - kiedy element powinien znajdować się w viewport i przewija się wraz z nadrzędnym kontenerem, i fixed - kiedy przy dalszym przewijaniu kontenera element powinien się zatrzymać. Oczywiście moment kiedy przeglądarka mówi: "Stop! Zakaz wyjazdu!" nie musi być krawędzią przeglądarki. Możemy ustalić, że element ma się zatrzymywać 10px przed krawędzią, ale i 10px za krawędzią (czyli delikatnie schowany). Do zatrzymania może dojść również w momencie kiedy jeszcze nie zaczęliśmy przewijać. Np. kiedy element jest bardzo blisko krawędzi, ale ustaliliśmy pozycję na więcej pikseli niż wynosi naturalna odległość. Wtedy elementy stanie się "sticky" już na starcie. Co jest jeszcze fajne, to, że możemy go przyklejać

Najmniejszy tetris na świecie? Zagraj w tetris w faviconce.

Trzeba jakoś "spożytkować" obecny czas. Jak zawsze w tak trudnych chwilach jestem z Wami!:)
Dziś dla odstresowania gra tetris. Każdy ją zna. Mamy do czynienia z podstawowymi klockami, tj.: O, I, L, S, Z oraz T. Każdy klocek przechowywany jest w tablicy jako wartości offset X oraz Y od punktu 0,0. Każda tablica dla klocka składa się z czterech podtablic dla każdego kąta obrotu.

Ale, ale! Dla prawdziwych hardkorów gra ma tryb favicon:)

Zapraszam do gry: https://kawalekkodu.pl/examples/favicon-tetris.html

There's no place(holder) like SVG, czyli o lazy loading, ferajnie PICTURE+SOURCE+IMG i zaślepkach.

Czy substytut oryginału może dorównywać temu ostatniemu? Czy atrapa może być równie atrakcyjna? Czy niezamalowane kanwy obrazów mogą uratować właściciela galerii przed wpadką? O tym, no prawie o tym, w dzisiejszym wpisie.

Czytaj dalej

Lista nietrafiona w punkt, czyli o wyrównywaniu wielolinijkowego tekstu w elementach listy.

Z HTML-ową listą jest jak w życiu, albo wszystko się układa jak powinno, albo chybiamy z osiągnięciami naszych celów. Nie zawsze da się ustrzelić pluszowego misia dla dziewczyny na strzelnicy. Nie zawsze komplet kluczy nasadowych dla chłopaka okaże się brakującym elementem jego warsztatu. Tyle, że listę można szybko naprawić, natomiast w przypadku wymienionych sytuacji, trzeba kupić kolejny bilet lub zatryndalać z paragonem do marketu.

Czytaj dalej

Co było pierwsze, jajko czy kura? Czyli zmienne CSS jako warunki w media queries.

Od razu napiszę, że niestety nie znam odpowiedzi na pytanie tytułowe. Podobnie nie wiem co by było z podróżnikiem w czasie, który unicestwiłby własnego dziadka przed poczęciem swojego ojca. Ale opowiem trochę o paradoksie przyczynowo-skutkowym w CSS.

Czytaj dalej