Filip Klar web developer blog

Popularyzacja minimalizmu w projektowaniu stron internetowych sprawiła, że przybywa coraz więcej stron pozbawionych cieni, gradientów i realistycznych ikon. Do tego przede wszystkim witryny powinny być dostosowane do najnowszych urządzeń mobilnych.

W ten trend wpisuje się wygląd zaplecza WordPressa 3.8 oraz nowej skórki Twenty Fourteen. We wspomnianym panelu administratora nowego WP zastosowano pewną innowację – ikonki w menu z lewej strony wcale nie są obrazkami. Do ich wyświetlenia używany jest specjalny plik czcionki.
Czytaj dalej »

Sortowanie danych na stronie – jakaż to ważna i funkcjonalna rzecz. Przydaje się przy dużych spisach i znacząco ułatwia znalezienie pozycji o pożądanej cesze czy parametrze. Co najczęściej kojarzy się z sortowaniem informacji umieszczonych w tabelkach, które zostały zaciągnięte z bazy? Zapewne kombinowanie z konstruowaniem zapytań na podstawie zmiennych GET (np. ?order=desc&by=id).

Oczywiście, wiążę się to z przeładowaniem strony i obciążaniem bazy danych po raz kolejny. Jak temu zaradzić? Sortować pobrane dane w przeglądarce. Szybko i skutecznie – bez pisania skryptów PHP, porównywania rekordów przez MySQL i czekania na załadowanie strony. Jedynym warunkiem jest korzystanie przez użytkownika ostatecznego z JavaScriptu.
Czytaj dalej »

W przeglądarkach internetowych istnieje możliwość ręcznego powiększenia dużego pola tekstowego. Dla większości twórców stron internetowych wydaje się to jednak zbędne. Nie każdy chce, aby użytkownik mógł manipulować wyglądem strony w ten sposób. Istnieje w CSS właściwość resize. Niestety, w wielu przeglądarkach jej zastosowanie nie wystarcza. Przykładowy kod wyglądałby tak:

textarea {
 width: 300px;
 height: 80px;
 resize: none;
}

Co jest jeszcze potrzebne? Aby być pewnym, że użytkownik nie zobaczy w narożniku pola symbolu poszerzania, a ponadto nie będzie mógł w rzeczywistości go powiększyć, konieczne będzie jeszcze ustalenie minimalnych i maksymalnych wymiarów. Nietrudno się domyślić, że muszą być one takie same jak te standardowe. Dodajemy więc poniższy kod i gotowe!

textarea {
 min-width: 300px;
 max-width: 300px;
 min-height: 80px;
 max-height: 80px;
}