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.

1. Pojemniki na niewielkie grafiki występujące np. przy linkach (pobierz w wersji PDF + ikonka). Dodanie pseudo-elementu pozwala usunąć zbędny element, w którym osadzona jest grafika (przy założeniu, że korzystamy ze sprite’ów).
2. Nadanie dodatkowego obramowania wokół jakiegoś elementu.
3. Dodanie “fikuśnych” cudzysłowów do cytowanego tekstu.
4. Możliwość utworzenia wielowarstwowego tła.
5. Możliwość tworzenia prostych grafik tylko przy pomocy CSS.

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.

<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.

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

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
?>

Skrócony operator trójargumentowy

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łasna funkcja

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.

W serii Linkdump pojawiają się materiały różnego typu i o różnej tematyce - czasem bardziej popularne jak jQuery lub zbiory darmowych ikon, czasem bardziej ambitne, czyli lektury dla zaawansowanych lub chcących poszerzyć swoją wiedzę. Nie było jeszcze niczego związanego z pojedynczym serwisem - linki prowadziły zawsze do różnych zakamarków Internetu. Tym razem chciałbym to zmienić, [...]

pre { border: #aaa solid 1px; padding: 10px; margin: 5px 5px 15px 5px; font-family: "Courier New",Courier,monospace; background-color: #f9f9f9;}pre span.key_word { color: #006699; font-weight: bold;}pre span.comment { color: #008200}pre span.variable{ color: #AA7700}p { margin: 0px;}Klasy abstrakcyjne i interfejsy są bytami, które nie tylko ułatwiają pisanie kodu, ale także sprawiają, że kod jest czytelniejszy i bardziej przejrzysty, a logika aplikacji prostsza do zrozumienia. Ich poprawne i przemyślane zastosowanie z pewnością opłaca się, gdy aplikacja zaczyna się rozrastać i/lub zmieniać.O tym co to jest interfejs oraz klasa abstrakcyjna można przeczytać w wikipedii. I choć zrozumienie tego, czym są nie jest wcale takie skomplikowane, to poprawne ich stosowanie nie jest czasami oczywiste.Nie chcę tytułować się żadnym ekspertem w tej dziedzinie, ale po pewnym czasie spędzonym nad projektowaniem aplikacji i wdrażaniem tych rozwiązań, chciałem się podzielić wnioskami.Kiedy więc powinno się stosować interfejsy i/lub klasy abstrakcyjne?Pozwolę sobie to wszystko zaprezentować na prostym przykładzie:

<?phpclass Man{  public function sleep() {/*...*/}  public function eat() {/*...*/}  public function doMenStuff() {/*...*/}}class Woman{  public function sleep() {/*...*/}  public function eat() {/*...*/}  public function doFemaleStuff() {/*...*/}} 

W powyższym przykładzie mamy dwie klasy (Man i Woman), w których jesteśmy w stanie wyodrębnić pewną część wspólną. W takiej sytuacji warto rozważyć utworzenie nadklasy abstrakcyjnej po której będą dziedziczyły obie klasy. W tym wypadku takie rozwiązanie jest idealne:

<?phpabstract class Human
        
                    

            

                Czytaj dalej tutaj (rozwija treść wpisu)

                Czytaj dalej na blogu autora...            
            

            

                Zwiń

                Czytaj na blogu autora...            
            

Ostatnio miałem okazję zająć się bardziej poważnie administracją serwera (dokładniej VPSa) "od podstaw". Od podstaw, to znaczy na zupełnie zerowej instalacji Linuksa, w związku z czym trzeba było zainstalować, skonfigurować i uruchomić wszystkie niezbędne do pracy usługi. Pomimo tego, że generalnie określiłbym się jako programista mający od czasu do czasu do czynienia z zagadnieniami administracyjnymi [...]

Kilka dni temu – 14 lipca, światło dzienne ujrzała nowa odsłona PHP 5.4 – alpha 2. Można ją ściągnąć z http://downloads.php.net/stas/ w wersji „czystej” oraz z http://windows.php.net/qa/ jako binarny plik dla Windows. Kolejna alpha przewidziana jest za 3 lub 4 tygodnie, teoretycznie powinna się pojawić 4-tego sierpnia. Najważniejsze nowości jakie przyniosła ta wersja to przede wszystkim:

• usprawnione opisy błędów parsera
• wbudowany deweloperski mini serwer www

O innych nowościach i zmianach możecie przeczytać w logu.

Generator CSS3 to kolejne narzędzie ze stajni “the best of developer tools”. Jego jedynym przeznaczeniem jest generowanie składni CSS3 dla nowych bajerów takich jak zaokrąglone rogi, gradienty, transformacje, czy układ wielokolumnowy. W sumie wygenerować możemy czternaście nowych funkcjonalności. Generator znajduje się pod adresem http://css3generator.com/.