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

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

Dane mrożące krew w żyłach, czyli tabela z nieprzewijalnym nagłówkiem i pierwszą kolumną.

Zdarzało Ci się pracować z jakimś arkuszem kalkulacyjnym? Fajna była opcja zamrożenia pierwszej kolumny, aby widzieć z którym wierszem mamy do czynienia. Równie fajne było zamrażanie nagłówka naszej tabeli z ważnymi wydatkami domowymi. Kiedyś można było tylko westchnąć na myśl o czymś takim w HTML. Były co prawda metody wykorzystujące JavaScript, ale aż mózg trzeszczał kiedy implementowało się ten sposób.

Czytaj dalej

Jak nabić sobie guza, czyli bumpmapping S01E01.

Nie, nie, oczywiście nie będę namawiał żadnego z Was do uzyskiwania efektu guza na własnej głowie. Czasy biegania po pokoju i obijania się o wszelkie narożniki i ściany minęły. Ale ponieważ w duszy każdego z nas jest odrobinę dziecka, to będziemy nabijać inne guzy. Będzie to też nawiązanie do pierwszych, bardziej zaawansowanych gier 3D, w który efekt ten mogliśmy zaobserwować. Wywoływał wtedy rumieńce na buzi, ale bez guzów!

Czytaj dalej