Wyżymanie HTML, czyli gumowa kostka w CSS.

Tagi CSS, gfx, JavaScript Październik 15, 2017 Napisał(a) Kawałek Kodu

Kiedy poznawałeś wciągający świat transformacji 3D w CSS pewnie trafiłeś na efekt obracającego się sześcianu. Dziś możliwości CSS trochę spowszedniały, a my aby nie stać w miejscu zrobimy skok jednocześnie w przyszłość i przeszłość. Pokażę Ci odzworowanie retroefektu zwanego rubber vectors, korzystając z aktualnych możliwości transformacji 3D. Przy zderzeniu przeszłości i przyszłości zobaczysz coś niedzisiejszego. Właściwie to już widziałeś na powyższym wideo, ale za chwilę będziesz mógł cieszyć się tym oglądając na żywo.

Jak skręcić kostkę (nie swoją)?

Idea efektu jest dosyć prosta. Polega na rysowaniu kostki w standardowy sposób, natomiast co linię pokazujemy klatkę animacji o jeden (lub więcej) późniejszą. Musimy w tym celu mieć X buforów na poszczególne klatki animacji. Pierwszą klatkę rysujemy na pierwszym buforze, podczas kolejnej kopiujemy go (i wszystkie za nim) o jeden niżej, a klatkę rysujemy znów na pierwszym. Pobierając kolejne linie z coraz to "późniejszych" buforów sprawiają one wrażenie "ciągnięcia się" za tymi powyżej.

Czytaj dalej

Były sobie ptaszki trzy, czyli blokada checkboxów.

Tagi HTML, JavaScript Wrzesień 21, 2017 Napisał(a) Kawałek Kodu

Ku, być może smutkowi niekórych, dziś będziemy się zajmować checkbox'ami znanymi z formularzy HTML. Niestety nie żywymi ptaszkami. Cel do osiągnięcia jest następujący: dla grupy checkbox'ów mamy zablokować możliwość ich kliknięcia powyżej wybranej liczby. Np. mając 10 ptaszków chcemy umożliwić zaznaczenie tylko trzech.

Czytaj dalej

Doctor, doctor, doctor... Czyli jak uzupełnić tablicę do zadanej długości.

Tagi JavaScript, PHP Wrzesień 2, 2017 Napisał(a) Kawałek Kodu

Czasem zdarza się, że potrzebujesz dopełnić tablicę lub string do długości innej, większej niż aktualna długość elementu. Np. z jakiegoś powodu chcesz aby tablica miała zawsze 100 elementów.

W przypadku tablicy w PHP używamy funkcji array_pad:

$array = [1, 44, 13, 23];
$array = array_pad($array, 10, 15);

Wynikiem działania tej funkcji będzie tablica dziesięcioelementowa, dopełniona "od prawej strony" sześcioma elementami o wartości 15.
Argument drugi może przyjąć wartość ujemną. Wtedy dopełnienie następuje na początku tablicy.

Czytaj dalej

Scopana metoda, czyli dlaczego selektor > oraz + nie zawsze działa.

Tagi JavaScript Sierpień 27, 2017 Napisał(a) Kawałek Kodu

Kupujesz wysyłkowo lampkę odstraszającą owady, okazuje się, że żarówka jest spalona. Zamawiasz buty przez internet, za ciasne. Wreszcie rozpakowujesz paczkę, w której czeka wymarzy robot kuchenny, który będzie pasował pod kolor kuchni, dostajesz zupełnie inny kolor. Ręce opadają. Te opadają też czasem przy walce z przeciwnościami podczas programowania. Dziś pokażę Ci jedną z takich kłód rzucanych pod nogi, ale zastrzegam: nie jest to złośliwość twórców przeglądarek, ani też ich przeoczenie.

Zacznijmy od przykładu nawiązującego do tytułu.

<body>

<ul id="element1">
 <li></li>
 <li></li>
 <li></li>
</ul>

</body>

Spróbujmy teraz pobrać z powyższej struktury bezpośrednie dzieci #element1, które są tagami LI.

var li = document.getElementById("element1").querySelectorAll(">li");

I co otrzymałeś próbując wyświetlić wyniki z pomocą console.log?
Dlaczego tak się stało, o tym dalej.

Czytaj dalej

Chiński kucharz w stringach, czyli jak pociąć tekst.

Tagi JavaScript Sierpień 9, 2017 Napisał(a) Kawałek Kodu

Zdarzyło Ci się kiedyś używac metody split w JavaScript? Jeśli używałeś, to pewnie po to, aby rozdzielić tekst "sklejony" przecinkami czy średnikami.

A co jeśli tekst byłby połączony różnymi znakami... Rozcinać je kilkukrotnie? Ciach, ciach, chiach, ciach? Nie!
Nic nie stoi na przeszkodzie, aby jako argument do metody split przekazać wyrażenie regularne.

Czytaj dalej

"Hello dollar", czyli po co mi jQuery?

Tagi JavaScript Sierpień 1, 2017 Napisał(a) Kawałek Kodu

A może by tak nie ściągać na stronę całej biblioteki jQuery, MooTools, DoJo, czy też innej, której używasz, jeśli potrzebujesz tylko możliwości selekcji elementów w drzewie DOM?

Jeśli wykorzystanie przez Ciebie jednej ze wspomnianych bibliotek ogranicza się wyłącznie (lub prawie) do wybierania elementów na podstawie zadanego selektora, to ta biblioteka jest Ci zupełnie niepotrzebna.

Chcesz wybrać grupę elementów?
W jQuery robiłeś to pewnie tak:

var linki = $('#sekcja1 div.blok a');

aby wybrać wszystkie linki zawarte w div(ach) z klasą blok, zawarty/e w elemencie o id=sekcja1.

Czytaj dalej

Kawałek Kodu

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