Gdzie szukać porad i rozwiązań problemów z PHP
Ciężko mi w to uwierzyć, ale Webnote w zamyśle miał być blogiem, w którym miały dominować wpisy na temat PHP. Do tej chwili mamy ich „całe” 6. W tym wpisie chciałem wyjaśnić dlaczego tak jest, oraz gdzie najczęściej znajduje rozwiązania najpopularniejszych problemów. Przy okazji może ktoś podrzuci ciekawy temat do opracowania na blogu.
Dlaczego ciężko o ciekawy artykuł o PHP
Od początku wychodziłem z założenia pomijania typowych tematów dla blogów o PHP, czyli opisywania podstaw programowania obiektowego, czy tłumaczenia kolejnych wzorców projektowych. Raz, że zagadnienia te były opisane do bólu już parę lat temu, a dodatkowo uważam, iż tego typu wpisy najlepiej wyjaśnione są w przeznaczonej do tego literaturze.
Postanowiłem, że najlepszym rozwiązaniem będzie pisanie o bieżących problemach, które napotkam podczas pracy dla swoich klientów, czy projektów realizowanych w wolnym czasie. Tu pojawił się jednak problem. Język PHP jest tak popularnym i prostym językiem, że znalezienie rozwiązań większości napotkanych problemów kończyło się na kilkuminutowym korzystaniu z googla. Z drugiej strony opisywanie trudniejszych zagadnień jest kłopotliwe, ze względu na problem wyciagnięcia kodu z kontekstu aplikacji. Jest to jedna z wad nie korzystania z popularnych Framewoków.
Czytaj dalej...Underscore.php – biblioteka przydatnych funkcji w PHP
Underscore.php to nic innego jak bezpośredni port bardzo popularnej wśród programistów JavaScript biblioteki Underscore.js. Zapewnia nam ona bardzo dużą liczbę prostych, ale często przydatnych funkcji, które ułatwią nam pracę w PHP. Jestem pewien, że wiele z tych funkcji już sami sobie napisaliście podczas tworzenia swoich aplikacji, ale moim zdaniem warto przeglądnąć możliwości jakie daje nam stosowanie Underscore.php
W ramach biblioteki otrzymamy następujące narzędzia:
- zarządzanie kolekcjami
- zarządzanie tablicami
- wspomagające tworzenie funkcji
- zarządzanie obiektami
Myślę że warto pokazać kilka przykładowych możliwości Underscore.php. Jedną z ciekawszych funkcji jest metoda map, która pozwala nam zastosować jakąś funkcje na wszystkich kolejnych elementach kolekcji lub tablicy np.:
$result = __::map(
array(1, 2, 3),
function($num)
{
return $num * 3;
}
);zwróci nam wynik w postaci:
array(3, 6, 9)Kolejnym ciekawym przykładem jest metoda max, która pozwala nam pobranie maksymalnej wartości danej kolekcji lub wielowymiarowej tablicy według interesującego nas kryterium. Poniżej przykład:
$stooges = array(
array('name'=>'moe', 'age'=>40),
array('name'=>'larry', 'age'=>50),
array('name'=>'curly', 'age'=>60)
);
__::max($stooges, function($stooge) { return $stooge['age']; });Co ostatecznie zwróci nam wynik w postaci tablicy, która posiada najwyższą wartość “age” razem z pozostałą wartością danej tablicy.
array('name'=>'curly', 'age'=>60)Polecam przeglądnąć bardzo prostą dokumentacje znajdującą się na stronie głównej biblioteki, która zawiera zrozumiałe i obrazowe przykłady działania poszczególnych funkcji. Underscore.php wymaga PHP w wersji minimum 5.3 lub wyższej, choć nie powinno to obecnie być dużym problemem, warto o tym wspomnieć. Polecam także poczytać trochę o anonimowych funkcjach w PHP, gdyż są one często stosowane wraz z tą biblioteką.
Czytaj dalej...CSS3 transition – co to jest i jak z tego korzystać
CSS3 transition to niedawno wprowadzona możliwość tworzenia płynnego, zmieniającego się w funkcji czasu, parametru zdefiniowanego w CSS. Najprościej będzie to wytłumaczyć na przykładzie. Weźmy pod uwagę nawigacje dowolnej strony, często po najechaniu na dany link zobaczymy np. zmianę koloru tła. Tradycyjnie odbywało się to natychmiastowo, jednak za pomocą Transitions możemy sprawić, aby zmiana ta odbywała się stopniowo. Pozwala to nam na w miarę proste ożywienie naszej strony, bez wykorzystania bibliotek typu jQuery.
W tym miejscu od razu chciałbym przestrzec przed nadmiernym wykorzystaniem tej funkcji, najczęściej strony pełnią funkcje informacyjną i nie jest wymagane, aby cały projekt nam skakał, albo nie daj boże grał.
Jak wygląda funkcja CSS3 transition?
transition : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>Jest to skrócona wersja tej funkcji, podobnie jak w przypadku border, możemy kolejno definiować dane parametry np.: transition-property, transition-duration, transition-timing-function oraz transition-delay.
Opiszmy teraz za co odpowiadają dane funkcje:
- transition-property – odpowiada za to jaką funkcje mamy objąć transition, czyli jeżeli chcemy aby z czasem zmienił się nam kolor tła, to ustawiamy – background-color. Domyślnym parametrem jest all, czyli CSS transition będzie działa na wszystkie obsługiwane funkcję. Oto lista obsługiwanych parametrów.
- transition-duration – czas trwania przejścia.
- transition-timing-function – funkcja czasu, zaprezentowana w formie krzywej beziera. Istnieje 5 zdefiniowanych funkcji gotowych do wykorzystania pod nazwami: ease, linear, ease-in, ease-out, ease-in-out. Możemy także zdefiniować własną funkcję przy pomocy cubic-bezier. Pomocna w tym przypadku może okazać się strona http://cssglue.com/cubic.
- transition-delay – możliwość zdefiniowania opóźnienia całej przemiany.
Wsparcie dla przeglądarek
CSS transtions obsługiwane jest obecnie przez Chrome, Safari, Opera 10.5+, Firefox 4+. Z zapowiedzi wynika, iż wersja 10 IE również ma posiadać ich obsługę, czy w pełnym stopni? Trudno powiedzieć. Oczywiście należy pamiętać o dodawaniu prefilksów: -o-, -moz-, -webkit-, oraz -ms- właśnie ze względu na przyszłość.
Czytaj dalej...Odbicie lustrzane w CSS3 – funkcje transform i gradient
Surfując po Internecie regularnie spotykam strony, wykorzystujące rozmaite możliwość najnowszej wersji CSS. Standardem stają się zaokrąglone rogi, cienie i mniejsze lub większe animacje. Czasami jednak można przy pomocy kombinacji kilku funkcji stworzyć interesujący efekt. Tym razem pokażę jak przygotować prezentację zdjęcia, wraz z delikatnym odbiciem lustrzanym u jego podstawy. Końcowy efekt poniższego artykułu można zobaczyć na przygotowanej stronie demo.
Podstawowy HTML
Zaczniemy jak zwykle od początku, czyli od pokazania wykorzystanego kodu HTML.
<div class="content">
<div class="image">
<img src="http://placekitten.com/100/150" alt="" />
<div><img src="http://placekitten.com/100/150" alt="" />
<div class="fade"></div>
</div>
</div>
<div class="image">
<img src="http://placekitten.com/100/150" alt="" />
<div><img src="http://placekitten.com/100/150" alt="" />
<div class="fade"></div>
</div>
</div>
</div>Dla wygody interesujące nas obrazki umieszczam w jakimś kontenerze, w tym przypadku o nazwie klasy content. Obrazek wraz z jego odbiciem umieszczam w kontenerze o klasie image. Kolejny div odpowiada za nasze odbicie lustrzane, więc w nim umieszczamy drugi raz interesujący nas obraz, który potem za pomocą CSS3 odwrócimy i zasłonimy półprzezroczystym gradientem stworzonym dzięki pustemu divowi o klasie fade.
W tym miejscu warto zauważyć konieczność dublowania tego samego obrazka, co prawda wczyta się on tylko raz, ale w dużych ilościach efekt ten może lekko zwolnić naszą przeglądarkę. Warto więc ostrożnie korzystać z tego rozwiązania.
Czytaj dalej...Tworzymy krok po kroku stronę w HTML5 i CSS3 część 2
W poprzednim artykule przygotowaliśmy i omówiliśmy podstawy dotyczące naszej prostej strony internetowej w HTML5 i wykorzystując możliwości styli CSS3. Opisałem typowy dla nowej wersji HTML Doctype, podałem także moją propozycję struktury i podziału na konkretne elementy naszego projektu graficznego. W poniższym artykule nadszedł czas na szczegółowe kodowanie i ostylowanie poszczególnych części serwisu.
Dla ułatwienia udostępniam:
- podgląd efektu końcowego naszego serwisu
- plik do ściągnięcia zawierające gotowy kod HTML i CSS opisany w tym artykule
Tło i kontener strony
Zaczniemy od najprostszej czynności czyli ustawienie tła i wyśrodkowanego kontenera dla naszego serwisu. Kod odpowiadający za tę część serwisu:
body{
background: #50763b url('../img/background.png') repeat-x;
width: 100%;
font: 12px/20px Verdana, Arial, sens-serif;
color:#fff;
}
#wrapper {
margin: 0 auto;
width:960px;
padding:0 10px;
margin-bottom:20px;
overflow: hidden;
}
W body ustawiliśmy dla całego tła kolor ciemno zielony (#50763b). Dodatkowo wykorzystując stworzony plik background.png, o wymiarach zaledwie 1 px na 250 px, dodamy górny jasno zielony gradient. Aby obrazek wyświetlał się na całej szerokości naszego serwisu stosujemy właściwość repeat-x. Ustawiamy także nasza podstawową czcionkę, kolor, jej wymiary i szerokość odstępów między liniami.
Nasz kontener ustawiamy na szerokość 960px, która obecnie jest standardowym i polecanym wymiarem szerokości strony. Warto jednak zwrócić uwagę, iż powoli wartość ta się zwiększa i nie jest błędem skorzystać np. z 1100px. Korzystamy także ze standardowej metody środkowania naszego kontenera poprzez ustawienie automatycznych marginesów.
Czytaj dalej...