Mimo iż Node.js jest stosunkowo młodym projektem, zdążył już zdobyć rzeszę zwolenników. I nie ma co się dziwić. Jest to technologia pozwalająca stworzyć i uruchomić serwer w kilka minut i jedyne czego wymaga, to znajomość JavaScript. Oczywiście poza samym językiem musimy jeszcze wiedzieć o co w tym wszystkim chodzi. Tutaj z pomocą przychodzi nam The Node Beginner Book, czyli Node.js opisany krok po kroku w taki sposób, aby osoby nie mające z tą technologią nic wspólnego mogły rozpocząć naukę. W książce znajdziemy wszystkie informacje niezbędne do rozpoczęcia pracy z Node.js, m.in. tworzenie serwera HTTP, obsługa danych POST, routing. Jeśli chcecie zacząć naukę Node.js, książka ta będzie dobrym początkiem.
Od długiego już czasu CSS oferuje funkcjonalność noszącą nazwę pseudo-elementy. Niestety w czasach gdy na desktopach królował IE, a urządzenia mobilne kojarzyły się głównie z Nokią, pseudo-elementy nie miały racji bytu ze względu na niewielki odsetek użytkowników, którzy zauważyliby ich obecność. Od tamtego czasu minęło dobrych kilka lat, udział IE6 oraz IE7 w rynku mocno się skurczył, Microsoft wydał dobrą przeglądarkę IE9 i pracuje nad IE10, a urządzenia mobilne (wyposażone w nowoczesne przeglądarki) coraz częściej wykorzystywane są do przeglądania stron. Mając tak przyjazny ekosystem, możemy bez obaw stosować pseudo-elementy, z których najciekawszymi niewątpliwie są :before oraz :after.
Co w nich takiego wyjątkowego? Dzięki nim możemy do dowolnego elementu na stronie dodać dwa elementy potomne występujące bezpośrednio przed i po treści znajdującej się we wskazanym elemencie. W ten sposób unikniemy dziesiątek pomocniczych div-ów i span-ów zaśmiecających nasz kod. Zanim przejdziemy do kodu, warto dowiedzieć się gdzie wspomniane pseudo-elementy mogą być pomocne.
Nie są to oczywiście wszystkie możliwe zastosowania :before i :after. Jestem pewien, że moglibyście po chwili zastanowienia podać kilka kolejnych.
Przejdźmy do kodu. Najprostsze zastosowanie :before i :after sprowadza się do wskazania treści, jaka pojawi się przed i po wskazanym elemencie.
Kanał ATOM
<div id="element">
Lorem ipsum
</div>
#element:before {
content: '"';
}
#element:after {
content: '"';
}
W ten oto prosty sposób dodaliśmy do wskazanego elementu cudzysłów otwierający oraz zamykający. O wiele lepszym pomysłem jest dodanie tych znaków w treści, jednak powyższy przykład miał jedynie na celu zaprezentowanie sposobu działania.
Ważne jest aby wiedzieć, iż pseudo-elementy, są – jak ich nazwa wskazuje – pseudo elementami, elementami oszukanymi, których próżno szukać w drzewie DOM. Elementy te nie są widoczne w źródle strony. Doskonale to widać (a właściwie nie widać) w Firebugu, który nie jest nawet w stanie wykryć, że dany element wykorzystuje pseudo-elementy. O wiele lepiej radzi sobie z tym Chrome oraz IE9 i narzędzia deweloperskie wbudowane w te przeglądarki.
Kolejną ważną informacją jaką należy zapamiętać jest to, że pseudo-elementy :before i :after nie otaczają wskazanego elementu, lecz w nim się zawierają, otaczając jego zawartość. Doskonale zobrazuje to kolejny przykład.
#element {
border: 1px solid red;
padding: 20px;
}
#element:before {
content: 'przed';
border: 1px solid red;
padding: 10px;
}
#element:after {
content: 'po';
border: 1px solid red;
padding: 10px;
}
W efekcie uzyskamy coś takiego.
Ostatnią niezbędną do pracy z :before i :after informacją jest to, iż oba pseudo-elementy zachowują się jak elementy inline umieszczone przed i po treści. Oznacza to, że w przypadku zmiany ich wyświetlania na blokowe, treść “wyląduje” między nimi ale w pionie. Co więcej, blokowy pseudo-element spowoduje rozciągnięcie elementu, do którego jest dodany.
Dzisiaj kolega w pracy zapytał mnie, jak w PHP osiągnąć funkcjonalność znaną z systemów baz danych – mianowicie jak zwrócić pierwszą niepustą zmienną. W przypadku MySQLa czy też Postgresa mamy funkcję COALESCE. W tym krótkim wpisie pokażę jak osiągnąć podobny efekt w PHP. Przypadek z wykorzystaniem zagnieżdżonych klauzul if pominę ;)
Za wartości puste uznajemy tutaj takie, dla których poniższy kod zwraca false:
<?php var_dump((bool) $foo); //false $foo = ''; var_dump((bool) $foo); //false $foo = array(); var_dump((bool) $foo); //false $foo = 0x00; var_dump((bool) $foo); //false $foo = null; var_dump((bool) $foo); //false $foo = false; var_dump((bool) $foo); //false $foo = '0'; var_dump((bool) $foo); //false ?>
Rozwiązanie jest bardzo proste – wystarczy skorzystać ze skróconego operatora trójargumentowego dostępnego w PHP5.3. Poniższy kod mówi sam za siebie:
<?php $a = null; $b = false; $c = 14; $d = 'foo'; $notEmpty = $a ?: $b ?: $c ?: $d; echo $notEmpty // 14 ?>
W przypadku, kiedy musimy takiego sprawdzania dokonywać wiele razy w naszym kodzie, lepsze będzie napisanie własnej funkcji realizującej to zadanie. Możliwe jest to dzięki func_get_args, która zwraca tablicę wszystkich zmiennych przekazanych do wywoływanej funkcji. Przykładowy kod:
<?php function coalesce() { $args = func_get_args(); foreach($args as $arg) { if ($arg) { return $arg; } } return null; } $a = null; $b = false; $c = 14; $d = 'foo'; echo coalesce($a, $b, $c, $d); //14 ?>
Mam nadzieję, że powyższy wpis przyda się tym, ktorzy natrafili na podobny problem, a jego rozwiązanie nie dla każdego było jasne. Aczkolwiek zwracam uwagę na to, aby dbać o przejrzystość kodu i nie stosować takich rozwiązań nagminnie. Są sytuacje, kiedy taki kod sprawdzi się najlepiej, aczkolwiek warto wcześniej zastanowić się dwa razy, czy to na pewno będzie prawidłowe rozwiązanie naszego problemu.
