Tag Archives: webdevelopment

Komodo Edit + Prefixr

Zapostowany w Technika | Tagi: , , , , , , | Skomentuj

Każdy kto ma do czynienia z kodowaniem CSS wie, jaki to ból korzystać z tych właściwości CSS3, które w różnych przeglądarkach wymagają różnych „prefixów producenckich” (-moz-, -webkit- etc.). Nie dość tego — na przestrzeni kilku wersji danej przeglądarki potrafiła się całkowicie zmieniać implementacja formatu danej właściwości (jak było np. z linear-gradientem w Webkicie).

Wiąże się to oczywiście z faktem, że póki co wspomniane właściwości CSS nie są jeszcze częścią oficjalnej, ostatecznej specyfikacji, dlatego póki co producenci przeglądarek w taki sposób sobie je „testują”. Ale jeśli ktoś chce z tych możliwości korzystać już dzisiaj, stoi przed nim spore wyzwanie związane z napisaniem kodu kompatybilnego ze wszystkimi aplikacjami. Można oczywiście pomagać sobie „ręcznie” — korzystając chociażby z http://caniuse.com/ .

Na szczęście pojawiła się niedawno webowa aplikacja http://prefixr.com – w której można wkleić fragment kodu sformatowanego tylko wg. oficjalnej propozycji specyfikacji, np:

body
{
  border-radius:5px;
}

A ona wypluje nam kod z wszystkimi wariantami dla popularnych przeglądarek :)

body {
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Fajne? Pewnie, że fajne. Ale „fajność” idzie znacznie dalej. Twórcy tej jakże użytecznej aplikacji udostępniają także API oraz przykłady wykorzystania go w różnych edytorach programistycznych. Niestety widać wyraźnie, że preferują Maca — co znaczy, że nie ma np. na liście mojego ulubionego edytora, Komodo Edit. Na szczęście, można wykorzystać ich wskazówki i zrobić to samemu w bardzo prosty sposób.

Otwieramy Toolboxa, klikamy PPM i wybieramy "Add" » "New Command..."

Otwieramy Toolboxa, klikamy PPM i wybieramy "Add" » "New Command..."

W polu "Command" wklejamy:

W polu "Command" wklejamy:

curl -sSd css="%S" http://prefixr.com/api/index.php
Jeśli chcemy mieć przypisany skrót klawiszowy (a chcemy), przechodzimy do zakładki "Key Binding" i wpisujemy wybrany skrót. Ja wybrałem Ctrl+L, R.

Jeśli chcemy mieć przypisany skrót klawiszowy (a chcemy), przechodzimy do zakładki "Key Binding" i wpisujemy wybrany skrót. Ja wybrałem Ctrl+L, R.

Czas na test. Wpisujemy jakąś prostą deklarację w oknie edytora, zaznaczamy…

Czas na test. Wpisujemy jakąś prostą deklarację w oknie edytora, zaznaczamy…

Wciskamy Ctrl+L, a potem R… i voila!

Wciskamy Ctrl+L, a potem R… i voila!

Acha, żeby to zadziałało, w systemie musi być zainstalowany cURL (chociażby stąd: http://curl.haxx.se/ ), a adres jego pliku wykonywalny musi być w zmiennej systemowej PATH (jak mniemam — ja przypadkiem już miałem zainstalowanego cURLa z inną aplikacją, więc u mnie działało „na dotyk”).

I ostatnia sprawa: Prefixr nie radzi sobie niestety z co bardziej specyficznymi deklaracjami. Nie rozwinie nam niestety np:

border-bottom-left-radius: 5px;

Ale po pierwsze, da się samemu ekstrapolować już potrzebne prefixy z rozwinięcia podstawowej wersji deklaracji, a po drugie — mam nadzieję, że będą konsekwentnie usprawniać aplikację.

WordPress TwentyTen, CSS reset Erica Meyera i komunikaty o błędach HTML5 forms w Chrome

Zapostowany w Technika | Tagi: , , , , , , , | Skomentuj

Długo wczoraj szukałem co jest nie tak z wyświetlaniem komunikatu o błędnej zawartości pola typu „email” w Chrome (mowa oczywiście o wbudowanej w przeglądarkę obsłudze sprawdzania pól formularzy HTML5):

Dziwne wyświetlanie błędu zawartości pola typu "email" w Chrome.

Dziwne wyświetlanie błędu zawartości pola typu "email" w Chrome.

Nadmienię, że pracowałem na bazie CSSa z najnowszej wersji theme’a WP TwentyTen. Szukałem i szukałem — i koniec końców zawęziłem moje poszukiwania do popularnego resetu styli autorstwa Erica Meyera:

Domyślny reset CSS Erica Meyera.

Domyślny reset CSS Erica Meyera.

Na pierwszy rzut oka wszystko gra, nie? Zacząłem więc eliminować części selektora jeden po drugim i jakieś było moze zdziwienie, kiedy okazało się że usunięcie DIVa:

Reset CSS z wykomentowanym DIVem w selektorze.

Reset CSS z wykomentowanym DIVem w selektorze.

…naprawiło sytuację:

Poprawne wyświetlanie komunikatu błędu.

Poprawne wyświetlanie komunikatu błędu.

Wychodzi zatem na to, że „wbudowane” w Chrome dymki z komunikatami o błędach same są HTMLem stylowanym CSSem — w tym konkretnie przypadku jest to DIV do którego „przenikać” zdają się style ustawiane przez użytkownika. Dziwne cokolwiek…

CSS3 + Flexbox = Koniec z FLOAT’ami (kiedyś)

Zapostowany w Technika | Tagi: , , , , , , , | 5 Komentarzy

Biorąc pod uwagę tempo, z jakim aktualizowane ostatnio są najważniejsze przeglądarki (o zgrozo, nawet IE) wszystko wskazuje na to, że już za chwilę będzie można zacząć stosować większość dobrodziejstw CSS3 nawet w komercyjnych projektach.

Ale w natłoku tych wszystkich wyskakujących po Sieci demówek bajeranckich box-shadow‘ów, text-shadow‘ów, transitions czy nawet interaktywnych obiektów 3D, łatwo było przeoczyć nowość o wiele bardziej, w moim mniemaniu, fundamentalną — nowy rodzaj wyświetlania elementów.

display: box

Na początek małe demo. Koniecznie oglądać w jakimś Webkicie (Chrome, Safari czy nawet Android). Póki co, Opera kompletnie tego nie rozumie, IE aż po wersję 8 też (może M$ doda obsługę w wersji 9). Firefox niby sobie radzi, ale gubi się w wielu miejscach (co ciekawe – włącznie z wersją 4 beta – skutkiem czego w tym demie nie widać np. będzie faktu, że box jest skalowalny – co zasadniczo pozbawia sensu cały temat ;) ).

Powinno być widać coś takiego:

Na co warto zwrócić uwagę:

  • Nie ma tutaj żadnych floatów (!)
  • Równa wysokość niebieskich boxów jest dana „z automatu” – nie ma żadnych tricków CSS2.1 czy JS.
  • 3 niebieskie boxy są wyrównane w zielonym boksie do dołu — zielony box nie ma paddingu na górze!
  • Kolejność niebieskich boxów ustawiona jest w CSSie. W kodzie następują kolejno „child 1″, „child 2″ i „child 3″.
  • „child 1″ ma stałą szerokość, a „child 3″ i „child 2″ okupują pozostałą szerokość zielonego boxa w stosunku 3:1 (wszystko ustawione via CSS). Widać to dokładnie, kiedy ogląda sie demo w jakimś Webkicie i skaluje się okno przeglądarki.
  • Zielony box wycentrowany jest w przeglądarce w pionie i w poziomie – beż żadnych „margin:auto”, „position:absolute”, „left:50%;top:50%” czy ujemnych marginesów.

Ale jak?

Z wykorzystaniem kilku nowych, proponowanych w draftach (póki co, niestety) CSS3 atrybutów.

Zielony box (rodzic)

display:box
Nowa wartość display, która włącza model flexbox na elemencie, na którym jest ustawiona, i jego bezpośrednich dzieciach.
box-orient
Możliwe wartości: horizontal | vertical | inherit — definiuje jak wyświetlane są niebieskie boxy: horyzontalnie (tak jest ustawione w demie) czy wertykalnie.
box-pack
Możliwe wartości: start | end | center | justify — ustawia wyrównanie niebieskich boxów (dzieci) na osi zdefiniowanej przez wartość box-orient. Czyli jeśli w tym przypadku box-orient: horizontal, to chodzi o wyrówanie horyzontalne. Gdyby było box-orient: vertical, box-pack ustawiało by wyrównanie niebieskich boxów w pionie. Mała uwaga: na demie nie widać, że niebieskie boxy wyrównane tak naprawdę są do prawej, bo ze względu na ustawienie na dwóch z nich wartości box-flex — w sumie zajmują całą szerokość zielonego boxa.
box-align
Możliwe wartości: start | end | center | baseline | stretch. Odwrotność atrybutu box-pack — jeśli box-pack definiował wyrównanie horyzontalne, box-align będzie ustawiał wyrównanie wertykalne — i vice versa.

Niebieskie boxy (dzieci)

box-flex
Możliwe wartości: 0 | jakakolwiek liczba całkowita – ta wartość robi dwie rzeczy: włącza skalowalność boxa-dziecka i ustawia proporcje, w jakich dzieci (niebieskie boxy, w tym przypadku) będą wykorzystywały wolną przestrzeń w „rodzicu” (zielonym boksie). W demie 2 niebieskie boxy mają włączoną tą wartość: „child 3″ ma box-flex: 3, a „child 2″ ma box-flex: 1 — co oznacza, że oba będą skalowalne i będą wypełniały wolą przestrzeń w zielonym boksie (pozostałą po odjęciu szerokości „child 1″) w stosunku 3:1.
box-ordinal-group
Możliwe wartości: jakakolwiek liczba całkowita. Atrybut ten pozwala na zmianę kolejności wyświetlania boxów-dzieci (niebieskich) w stosunku do kolejności, jaką mają w kodzie. W demie boxy te mają kolejno: „child 1″ — box-ordinal-group: 3, „child 2″ — box-ordinal-group: 1 i „child 3″ — box-ordinal-group: 2

Co jeszcze

To oczywiście nie wszystkie wartości (polecam poczytać źródła), jakie składają się na flexbox. Ale to już wystarcza, żeby w pełni zastąpić floaty, a nawet dodać developerom wiele nowych możliwości bez konieczności uciekania się do hacków. Kiedy tylko wszystkie podstawowe przeglądarki zaczną spójnie to obsługiwać, rzecz jasna (patrzę głównie na Ciebie, Firefoksie). Na razie za wesoło nie jest. IMHO zaznaczenie tam Firefoxa na zielono też jest nieco na zasadzie „wishful thinking”.

Źródła

Update

Zapomniałem dodać, że wszystkie te właściwości są obecnie w fazie eksperymentalnej, w zw. z czym trzeba stosować „przedrostki producenckie”, czyli:

display: box;

display: -moz-box;
display: -khtml-box;

box-align: center;

-moz-box-align: center;
-khtml-box-align: center;

box-pack: center;

-moz-box-pack: center;
-khtml-box-pack: center;

…i tak dalej.

Kolejne zmiany

Zapostowany w Inne | Tagi: , , , , , , , , , | 3 Komentarzy

Po niespełna roku znowu postanowiłem trochę podłubać przy moim themie. Tym razem miałem kilka powodów:

  • Miałem trochę wolnego czasu,
  • WordPress 3.0 i nowy defaultowy theme twentyten — korciło mnie, żeby po raz pierwszy na nim poeksperymentować (sporą część stylów tekstowych zostawiłem właściwie niezmienioną),
  • CSS3 — jako że coraz więcej przeglądarek zaczyna sensownie to obsługiwać, czas był wielki nimi się pobawić,
  • Od dawna miałem zamiar wdrożyć sobie skin skalowalny,
  • Miałem zachciankę, żeby zmajstrować temat kompletnie pozbawiony grafiki dekoracyjnej.

To tyle :)

PHP 5.3.1 + Apache 2.2 + MySQL 5 = problem

Zapostowany w Technika | Tagi: , , , , , , , | 3 Komentarzy

Miałem dziś wątpliwą przyjemność reinstalowania Windowsa po 2 latach nieprzerwanej pracy na jednej instalacji Visty (sic!). Jak zwykle, nie obyło się bez problemów. Zwykle w takich przypadkach zaskakują mnie coraz to nowe problemy wynikające z łączenia nowych wersji Apache’a, PHP i MySQLa.

Tym razem efekt był dość ciekawy. Po bezproblemowym odpaleniu wszystkiego i próbie uruchomienia w przeglądarce PhpMyAdmina – zawiecha. Strona ładuje się w nieskończoność. Log w Apache’u nie pokazuje żadnych sensowych wskazówek. Czytaj dalej »

Simple Tags 1.6.6 + WordPress 2.9

Zapostowany w Technika | Tagi: , , , , , , , , , | Skomentuj

Przed momentem zaktualizowałem sobie WordPressa do wersji 2.9 i okazało się, ze wystrzeliłem w kosmos jedną z ważniejszych wtyczek — Simple Tags 1.6.6. Okazuje się, że wcale nie jest ona niekompatybilna — po prostu autor zastosował cokolwiek dziwny sposób detekcji wersji WP. Beż żadnego fallbacka do nowszych wydań. Czytaj dalej »

Rekursywny CHMOD plików i folderów

Zapostowany w Technika | Tagi: , , , , , , , | 4 Komentarzy

Ani to moje odkrycie, ani — przynajmniej dla niektórych — nic specjalnie odkrywczego w ogóle, ale mi jako webdeveloperowi i windowsowcowi (dziwne słowo…) nieraz już zaoszczędziło spoooooro czasu. Dlatego też postanowiłem wrzucić to, głównie dla samego siebie jako memo na przyszłość.

Czasem potrzeba szybko rekursywnie zmienić uprawnienia plików bądź katalogów tak, aby były zapisywalne dla wszystkich użytkowników. Można zrobić to młotkiem – przez FTP, plik po pliku, katalog po katalogu. I stracić w najlepszym razie wiele, wiele minut. Ale jeśli jest dostęp przez SSH, wystarczy wydać polecenie: Czytaj dalej »

Kilka zmian

Zapostowany w Inne | Tagi: , , , , , , , , , | 2 Komentarzy

Od dłuższego czasu chciałem nieco mocniej wyróżnić najnowszy post na stronie głównej, ale jakoś nie bardzo mogłem się zebrać, żeby do tego przysiąść. Szczęśliwie ostatnimi dniami znalazłem nieco natchnienia i odpaliłem Photoshopa, a zaraz potem Notepada++ :D . Efekt nawet całkiem mi odpowiada (póki co).

Tym razem, dla odmiany, zapędziłem do roboty WordPressowe Custom Fields (do obrazka przy najnowszym poście). Czytaj dalej »

Ikony Tortoise SVN w Total Commander

Zapostowany w Technika | Tagi: , , , , , , , , , , , , | 4 Komentarzy

Od czasu do czasu każdy webdeveloper musi przynajmniej zetknąć się z jakąś formą wersjonowania kodu. Jednym z najpopularniejszych systemów służących do tego właśnie celu jest oczywiście Subversion (SVN).

Pod Windows najwygodniej z SVN (moim przynajmniej zdaniem) korzysta się przy pomocy klienta zwanego Tortoise SVN, który bardzo ładnie integruje się z shellem, dając w menu kontekstowym wszystkie potrzebne polecenia, a status plików pokazując przy pomocy nakładek na ikony. Czytaj dalej »