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

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.

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

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

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

• Quick hits with the Flexible Box Model
• CSS3 Flexbox

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.

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.

Na szczęście chwila Googlania wskazała właściwy trop — przyznam, że sam na to bym nie wpadł.

Wykomentować jedną linię w pliku hosts

Czyli — w C:\Windows\System32\Drivers\etc\hosts trzeba wykomentować/usunąć linię:

::1             localhost

upewniając się jednocześnie, że jest tam cały czas:

127.0.0.1       localhost

od siebie jeszcze dodam, że po tym dobrze jest z konsoli wyczyścić cache DNS:

ipconfig /flushdns

i oczywiście zrestartować Apache’a. U mnie pomogło

Nie pozostaje nic innego jak hakowanie w oczekiwaniu na nowsze wydanie. Na szczęście sprowadza się to do jednej prostej czynności.

W pliku /wp-content/plugins/simple-tags/simple-tags.php zamieniamy w linii 35:

if ( strpos($wp_version, '2.7') !== false || strpos($wp_version, '2.8') !== false  ) {

na:

if ( strpos($wp_version, '2.7') !== false || strpos($wp_version, '2.8') !== false || strpos($wp_version, '2.9') !== false ) {

I działa

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:

find . -type d -exec chmod 777 {} \;

żeby wszystkie katalogi w obecnym folderze i podfolderach stały się zapisywalne dla każdego. Oraz:

find . -type f -exec chmod 666 {} \;

żeby to samo stało się z plikami. Oba polecenia szczególnie przydają się przy przenosinach np. WordPressa z maszyny windowsowej na server linuxowy. Oczywiście należy z tym uważać (hakerzy i inni wandale) – dlatego może lepiej zamieniać na 755 i 644 — ale to już zależy od tego, jak mamy skonfigurowany serwer.

Zaczerpnięte z movabletripe.

Ciekawe, kiedy będzie o tym na TVN24

Phishing

Update: Długo czekać nie musiałem :). Właśnie powiedzieli o tej akcji na TVN24 (13/10/2009).

Nowa wersja - KP2

1. Rotujące najnowsze zdjęcia – te posty, w kórych pokazuję jakieś kolejne, pojedyncze (czasem 1 + kilka dodatkowych) zdjęcie. Rodzaj fotobloga.
2. Galerie - całe serie zdjęć – z jakiejś imprezy, spotkania, wycieczki, wyjazdu. Część z nich będzie wymagać hasła dostępu, jako że czasem będą to jakieś imprezy rodzinne i nie każdy może sobie życzyć widnieć na tej stronie (to nie Nasza Klasa ). Dlatego jeśli uważasz, że powinieneś mieć dostęp do danej galerii — daj znąć, a prześlę Ci hasło.
3. Zasadnicze posty – wszystko to, co nie jest „fotoblogiem” – podzielone na 3 kategorie: Obrazy (wpisy okołofotograficzno-designerskie), Technika (gadżety, Windows, PC itp.) i Inne (nie wymaga komentarza).
4. Ostatnie komentarze – 4 ostatnie komentarze z całego bloga.
5. Archiwum – sposób na przeglądanie całego archiwum poprzez wyszukiwanie lub oglądanie postów skategoryzowanych pod określonym tagiem.
6. RSS – linki do feedów z danej kategorii.

Cóż, that’s all folks . Mam nadzieję, że nowy design przypadnie do gustu tym kilku osobom, które tu czasem wpadają. Czekam na opinie (najchętniej te negatywne, bo od pozytywów to jest wspomniany portal ;)) i info o ewentualnych wyłapanych bugach.

Thunderbird starzeje się właściwie w oczach. Wciąż ten sam zestaw funkcjonalności, prawdziwie użytecznych wtyczek jak na lekarstwo (znowu, w przeciwieństwie to Fx’a), wyszukiwanie wiadomości nie działało tam chyba nigdy i pewnie już nie będzie. Wprawdzie niby idzie wersja trzecia, ale idzie tak już od maja 2008, a wśród wypisywanych w kolejnych press releasach ficzersach próżno szukać czegoś rewolucyjnego. Że w końcu Addon-Manager zostanie doprowadzony do stanu w jakim Fx jest od nie wiem sam już kiedy? Że zakładki będą? Że w Address Booku będzie… pole na podanie daty urodzin ? Litości…

Patrząc na to wszystko i mimo wysiłku nie mogąc dostrzec jakiejś sensownej myśli przewodniej czy choćby pomysłu na przyszłość Thunderbirda u ekipy Mozilli – zdecydowałem się zaryzykować i po raz pierwszy powierzyć moją cenną korespondencję pocztową w ręce największego dziś chyba providera pocztowego — Google’a.

Skłamałbym twierdząc, że nie miałem żadnych obaw przed tym krokiem. Powodów nie brakowało – od wydajności interfejsu webowego przy dużej ilości i to niemałych maili po niewiedzę kto właściwie ma dostęp do zawartości mojej poczty (teorie spiskowe teoriami spiskowymi — ale nikt mi nie powie, że choćby żeby rozpoznać spam, wielkie G nie skanuje treści maili…). Ale potencjalne korzyści w końcu mnie przekonały — to chyba najaktywniej rozwijany i wciąż ulepszany klient pocztowy na planecie.

Używam Gmaila już ponad dwa tygodnie, mam zatem chyba perspektywę niezbędną do porównania go z TB. Przyszedł zam czas, żeby powiedzieć

co mi się podoba w Gmailu

No to jedziemy:

Zwolnienie lokalnych zasobów

Odstawiając klienta desktopowego zyskałem:

• ponad połowę mojego drugiego monitora (dotychczas zajętą otwartym Thunderbirdem),
• kilkadziesiat MB wciąż zajętej pamięci RAM,
• 2 x circa 2 GB na dysku twardym (poczta + codzienny backup).

Tagowanie wiadomości

Używanie etykiet w Gmailu do oznaczania projektów, stanu wykonania zadania itp.

Tej części obawiałem się dość mocno. Byłem bardzo przyzwyczajony do drzewiastej struktury katalogów, jaką wypracowałem sobie po latach pracy w TB. A trzeba dodać, że służył mi jako swego rodzaju CRM — miałem folder z projektami nad którymi pracujemy, w nim osobne podfoldery dla klientów, w nich z kolei katalogi na dyskusje o każdym osobnym projekcie itd. Do tego używałem jeszcze etykiet dla oznaczania statusów poszczególnych maili: „Do zrobienia”, „Czekam na odpowiedź”, „W trakcie” itd. Nie wiedziałem na ile dobrze uda mi się przełożyć ten system na „płaską” strukturę tagów.

Okazało się, że poszło to nadzwyczaj dobrze – a przy okazji wyszła jedna zaleta tagowania, o której wcześniej nie pomyślałem – w przeciwieństwie do struktury drzewiastej folderów – dzięki tagom mogę przypisać daną dyskusję do więcej niż jednego projektu. Ponadto dzięki możliwości kolorowania tagów jedne projekty mogę sobie oznaczyć jako „aktywne”, inne jako tylko „utrzymywane”. Jeszcze inne kolory przewidziałem dla statusów wiadomości — zielona „Czekam na odpowiedź”, czerwona „Pilne”, niebieska „Do zrobienia” itd. Do tego tagi „statusowe” zaczynam od wykrzyknika, dzięki czemu mam je na samym początku w menu tagów – co przyspiesza oznaczanie stanów poszczególnych projektów.

Grupowanie maili w dyskusje

Grupowanie maili w całe dyskusje

To druga cecha Gmaila, która budziła wcześniej moje ogromne wątpliwości. Thunderbird ma wprawdzie widok, który w założeniu ma chyba robić coś podobnego, ale spróbowałem z niego skorzystać tylko raz — jak zobaczyłem, jaki pieprznik się robi – dałem sobie spokój i od tamtej pory maile oglądałem w formie, w jakiej tradycjnie prezentowane były od początku bodaj istnienia poczty elektronicznej — wylistowane pojedynczo, po dacie nadania.

I tutaj znowu G zaskoczył mnie cokolwiek pozytywnie. Grupowanie działa nadspodziewanie dobrze (jednak przy założeniu, że moi korespondenci nie grzebią przy temacie maila podczas odpowiadania — co dzieje się jednak bardzo rzadko). Po wymianie kilkunastu wiadomości cała dyskusja zaczyna przypominać formą rozmowę z komunikatora internetowego – co jest dość wygodne kiedy chce się prześledzić przebieg wymiany zdań (a taka możliwość jest nie do przecenienia jeśli mówimy o wykorzystaniu poczty elektronicznej jako formy komunikacji przy pracy nad projektami).

Wydajność

Aplikacje webowe z reguły nie są za szybkie (przynajmniej w porównaniu do natywnego software’u desktopowego). Gmail jednak miło mnie zaskoczył. Ewidentnie widać, że programiści G znają się na optymalizacji javascriptu. Mój Firefox ma jednocześnie aktywnych 28 (!) rozszerzeń, a mimo to w niektórych przypadkach Gmail działa mi szybciej, niż Thunderbird w analogicznych sytuacjach (np. otwieranie zawartości dużego maila z kilkoma sporymi załącznikami). Podobnie ma się rzecz z innymi operacjami – nadawanie etykiet, przechodzenie między folderami, autozapis nowego maila – wszystko dzieje się nadspodziewanie szybko.

Google Labs + addony Firefoxa

Tutaj każdy znajdzie coś dla siebie — nie ma właściwie tygodnia, żeby zespół G nie dorzucał jakiejś nowej funkcjonalności do Labs. Choć dlaczego niektóre z nich nie są częścią podstawowych możliwości (jak np. osadzanie w mailach obrazków) — ciężko stwierdzić.

Dodatkowe funkcjonalności Gmaila w Google Labs

Jednym z fajniejszych bajerów z Labs jest np. automatyczne rozpoznawanie odnośników do Picasa Web Albums osadzonych w mailu i automatyczne dodawanie odpowiednich miniaturek pod mailem:

Picasa Web Albums w Gmail

Jeszcze szczęśliwsi mogą być użytkownicy Firefoxa korzystający z Gmaila — a to dzięki świetnemu dodatkowi Better Gmail 2, który dodaje kilka fajnych smaczków (jak np. ikony załączników zależne od rzeczywistego typu pliku czy pokazywanie na faviconie ilości nieprzeczytanych maili w skrzynce).

Better Gmail 2

Zresztą ciekawych dodatków do Firefoxa poprawiających pracę w Gmailu jest więcej:

• Xoopit – przeglądarka fotek i video w poczcie
• Gmail Manager – powiadamiacz o nowej poczcie
• i jeszcze kilka innych

Ale żeby nie było, że wszystko jest tak różowe – teraz

co w Gmail mi się nie podoba

No cóż — coś musiało się znaleźć .

Załączniki

A właściwie operacje na nich. Jestem przyzwyczajony do tego, że przechodzi przeze mnie spora ilość korespondencji między różnymi osobami. Czasem wymaga to sklejenia w jednym mailu wyjściowym informacji z wielu mailu „wejściowych”. Z tym łączy się czasem konieczność przeciągania załączników między mailami.

W Thunderbirdzie nie było z tym problemu. Chyba że już po przeciągnięciu załącznika, a przed wysłaniem nowego maila — przeniosło się do innego folderu wiadomość, z której przeciągało się załącznik — wtedy TB w nieskończoność próbował wysłać wiadomość nie mogąc znaleźć źródłowego załącznika . Ten bug jakoś pozostaje niezauważony przez ekipę Mozilli od bodaj początku istnienia Thunderbirda.

Załączniki w Gmail

W Gmailu obsługa załączników jest tylko tak dobra, na ile pozwalają ograniczenia samej przeglądarki, HTMLa, protokołu HTTP i javascriptu. Generalnie nie jest źle – można uploadować po kilka załączników na raz (zapewne dzięki ukrytemu flashowi), są paski postępo podczas uploadu, a w przypadku forwardowania wiadomości z załącznikami – nie trzeba czekać na ich upload – jak w przypadku podobnej czynności z desktopowego klienta.

Nie ma natomiast mowy o żadnych operacjach na załącznikach między dwiema wiadomościami – jedyne co można zrobić, to właśnie forwardować danego maila razem z zawartymi w nimi plikami. Jeśli chce się dodać do niego załączniki z innego maila — trzeba je najpierw pobrać na dysk, i ponownie uploadować. Niby nic strasznego, ale jest to jednak uciążliwe. Cóż, może któregoś dnia pojawi się w Google Labs coś, co rozwiąże ten problem.

Generalnie

Myślę, że póki co, zostanę przy Gmailu. Oszczędzam dzięki temu więcej, aniżeli tracę. Drobne wady związane z załącznikami nie są dla mnie na tyle uciążliwe, żeby bardzo przeszkadzały w codziennej pracy. Trochę szkoda mi Thunderbirda, bo spędziłem z nim mnóstwo czasu — ale póki nie zobaczę, że Mozilla ma jakieś konkretne pomysły na jego rozwój – nie mam za bardzo na co się oglądać.

A zatem, zgodnie z sugestią z Codexa WP, wygenerowanie odpowiednich kluczy i zamianę tej części pliku wp-config.php:

define('AUTH_KEY', 'put your unique phrase here'); // Change this to a unique phrase.
define('SECURE_AUTH_KEY', 'put your unique phrase here'); // Change this to a unique phrase.
define('LOGGED_IN_KEY', 'put your unique phrase here'); // Change this to a unique phrase.

na coś w stylu (zwróćcie szczególną uwage na nowy, czwarty klucz NONCE_KEY):

define('AUTH_KEY',        'N2&C0*g+le/a@>2b`G`1s{RGE0GlyT1/M ci~da/!mAQ>w$Hs{#]fscE-D[opglu');
define('SECURE_AUTH_KEY', '5Y:O#O;A[_>iQyE75Gs~x]EM|u*KKGM]Gr8]1S$)Ejw;Q|r.q5CCHi}IN[(t:YxQ');
define('LOGGED_IN_KEY',   '&|zShDp2r(M_Az)@f!=UrW{Aa5E0)PFz7onp*F]r:HdFu8dSEP?:Zuf!ryaa<,,+');
define('NONCE_KEY',       '$zkh.e RS%CT>u]-v,k A>R~K|D.*C#|k_k^~&0xj<=Rv#rwxNIx#swC3$KXAKh[');

Jedną z lepszych tego typu aplikacji, na jakie trafiłem, jest FileHippo Updater. Dla odmiany ma własny interfejs graficzny, a do tego szukając aktualizacji, opiera się na bogatej bibliotece oprogramowania hostowanej przez FileHippo.com.

FileHippo skanuje system

Skanowanie systemu w poszukiwaniu programów do zupdate’owania przebiega szybko, a rezultaty pokazywane są w oknie domyślnej przeglądarki. Niestety – na tym koniec udogodnień. Instalki trzeba już pobrać (klikając na linki w liście wyników) i zainstalować ręcznie. Ech, ciągle marzy mi się zestaw repozytoriów rodem z Ubuntu .

Wyniki skanowania