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..."
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ę.
Od dłuższego już czasu ilekroć kupowałem nową książkę, zastanawiałem się, czy zdołam ją jeszcze upchać na którejś z półek. W związku z tym chodził mi powoli po głowie zakup jakiegoś czytnika e-booków. Co nastąpiło wreszcie kilka tygodni temu.
Barierą dotychczas, może do pewnego stopnia poza ceną, był dla mnie fakt, że nigdy nie trzymałem takiego ustrojstwa w ręku. Nie miałem po prostu pojęcia na ile to tak naprawdę nadaje się do czytania (szczególnie w ostrym świetle). Bałem się, że e-ink koniec końców niewiele różni się od LCD (czyli w słońcu jest bezużyteczny). I że te 6 cali ekranu (większe są dla mnie za drogie i zbyt niemobilne) jest za małe. Na szczęście — nie mogłem mylić się bardziej.
Koniec końców wybór padł na „kundelka” — z kilku przyczyn:
cena — kupiłem dokładnie za 443,64 PLN z wysyłką (sprawami celnopodatkowymi zajmuje się Amazon we własnym zakresie, więc to cena ostateczna, po kursie dolara z danego dnia, rzecz jasna) vs od ok. 750 PLN za Onyxa poczynając, jeśli z Ceneo brać pod uwagę tylko sklepy z jaką-taką opinią,
ekran — to bodaj największa zaleta Kindle’a: 6 calowy E-ink Pearl (16 odcieni szarości, lepszy kontrast) vs zastosowany w Boox 60s E-ink Vizplex EPD (o 8 odcieniach i mniejszym kontraście — ten ekran stosowany też był w poprzednich wersjach Kindle’a).
Wi-Fi — Onyx Boox 60s nie ma bezprzewodowej łączności. Niby tylko „bajer” ale jednak fajniej jest móc „pchać” na Kindle’a książki bezprzewodowo, albo na szybko sprawdzić coś w Wikipedii.
większa wbudowana pamięć — 3GB dostępne dla użytkownika w Kindle 3 naprzeciw 512MB w Boox 60s (choć ten ostatni może wykorzystywać karty SD, czego nie może Kindle).
ergonomiczniejsza budowa — sprawa subiektywna, ale wg mnie przyciski do przewracania stron po bokach urządzenia to coś, czego w Onyksie zdecydowanie brakuje.
Żeby nie było tak różowo, są oczywiście rzeczy, które Boox 60s robi lepiej:
reflow PDFów (o ile nie są skanami, rzecz jasna),
oprogramowanie po polsku,
Text-to-Speech po polsku (z wykorzystaniem najlepszej bodaj syntezy mowy, jaką jest Ivona),
znacznie szerszy wachlarz obsługiwanych formatów plików: PDF, DjVu, DOC, DOCX, XLS, XLSX, PPT, PPTX, TXT, HTML, MOBI (bez DRM), PRC, EPUB, CHM, PDB, RTF, FB2, JPG, GIF, BMP, TIFF, MP3 (w Kindle jest to: AZW, TXT, PDF, AA, AAX, MP3, MOBI — bez DRM, PRC). Brak w Kindle’u wyróżnionego otwartego formatu ebooków EPUB boli chyba najmocniej, ale on akurat konwertuje się na natywny kundelkowy MOBI najładniej (z użyciem choćby fantastycznego Calibre),
serwis gwarancyjny w Polsce
Jako się rzekło, po rozważeniu wspomnianych „za” i „przeciw” — wybór padł na produkt Amazona. Kiedy go rozpakowałem i spojrzałem na ekran, miałem podobne wrażenie, jak któryś z forumowiczów na eksiazki.org — że jest na niego przyklejona kartka z instrukcją. Taka jest rozdzielczość (167 ppi)! Komuś, kto wcześniej nie widział czytnika (jak ja) nie da się tego opisać. To po prostu trzeba zobaczyć na żywo.
Kindle 3
Etui
Od razu po zamówieniu Kindle’a, kupiłem sobie futerał „ekologiczny” brytyjskiej firmy Tuff Luv. Podobno w całości zrobiony z materiałów z odzysku (nie żeby mnie to szczególnie obchodziło). Ważne, że mi się podobał
Etui Tuff Luv
Kindle w etui Tuff Luv
Do tego przyszedł w iście „dizajnerskim” i — a jakże — ekologicznym opakowaniu, które nawet po zużyciu może mieć swoje drugie życie (patrz 2 fotka poniżej)!
Pudełko na etui Tuff Luv
Wnętrze pudełka na etui Tuff Luv
Z perspektywy kilku tygodni
Krótko mówiąc — to jeden z moich bardziej udanych zakupów . Jeśli ktoś lubi czytać — to zdecydowanie gadżet dla niego. Z tym, że od razu trzeba dopowiedzieć – zdjęcia, komiksy (chyba, że czarno-białe), kolorowe ilustracje – to nie ten adres. W takim przypadku trzeba kupować jakiegoś pada LCD — i męczyć sobie nim wzrok w domu, bo w słoneczny dzień na ławce sobie już tych fotek nie pooglądasz . Reklama mówi 100% prawdę (choć raz):
Wady
Może nie tyle wady Kindle’a, co chyba samej technologii E-ink. Okazuje się, że podobnie jak LCD, jest podatna na „stuck pixels”. Po pewnym czasie pojawiło mi się kilka mikroskopijnych (trzeba cały czas pamiętać, że to 167ppi, więc ciężko dostrzec 1 plamkę) kropek, które są cały czas czarne + jedna nieco większa (już widoczna nie tylko w ostrym słońcu). Jasne, że to wkurza — jak się już wie, że to tam jest, nie można przestać na to patrzeć. Ale jak człowiek po prostu zacznie czytać, zapomina o pierdołach.
Wiem z opisów przypadków innych użytkowników, że Amazon ma doskonały serwis i prawdopodobnie po zgłoszeniu problemu zaraz wysłaliby mi zamiennik, nie czekając nawet, aż odeślę ten. I niewykluczone, że się na to skuszę gdzieś pod koniec okresu gwarancyjnego (choć czytałem też o przypadkach, kiedy ktoś odsyłał z jednym stuck pixelem, a dostał nowy… z trzema… ech). Póki co po prostu nie przeszkadza mi to na tyle, żebym się tym aż tak zajmował, zamiast po prostu czytać
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.
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.
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.
…naprawiło sytuację:
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…
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”.
Minęło już kilka dni korzystania z nowego gadżetu, czas zatem chyba podzielić się moimi dotychczasowymi spostrzeżeniami.
Budowa zewnętrzna
Głównie plastik, pokryty taką typową „htc-owską” gumą, znaną mi np. już z HTC TyTN II. Miłe to to w dotyku, ale zostawia się na tym po jakimś czasie tłuste ślady po palcach. Z drugiej strony – nie rysuje się jak glossowy plastik w iPhonie (porównanie z tym telefonem pojawi się pewnie jeszcze nie raz ). „Ramka” z przodu naokoło całego wyświetlacza zdaje się być jakimś metalem (jest zimniejsze w dotyku), wykończonym na matowo. Czytaj dalej »
Gdybym miał odpowiedzieć na pytanie: „Dlaczego akurat HTC Desire?” — pewnie mógłbym opowiadać o poziomie konfigurowalności systemu, prawdziwie użytecznych funkcjach „biznesowych” — ale w sumie i tak wystarczyłoby pokazać to
Nawiasem – jako że pojawiało się to pytanie – mam (kupiony w x-kom.pl) telefon dokładnie w takich kolorach, jak w tym video.
Cóż, wreszcie się stało. Symbian zdecydowanie nie spełnił swojego zadania jako PDA. Od długiego czasu nie dawało mi to spokoju.
i8910 to naprawdę świetny hardware — doskonały ekran, świetne głośniki stereo, naprawdę niezły aparat jak na komórkę, nagrywanie w 720p. Ale jako narzędzie „biznesowe” nie sprawdza się zupełnie. Konieczność instalowania zewnętrznego softu żeby móc dowolnie konfigurować powtarzalność eventów w kalendarzu? Dajcie spokój… Brak możliwości jakiegokolwiek sensownego konfigurowania ekranu startowego: samsungowski ekran z widżetami to jakiś żart – kompletny brak API do pobierania informacji z kalendarza (!!!) skutkiem czego nie było nawet widżetu wyświetlającego nadchodzące wydarzenia. A na defaultowy symbianowy ekran lepiej spuścić zasłonę milczenia. Czytaj dalej »
Miałem nadzieję, że po niedawnej reinstalacji Windowsa udało mi się już przywrócić kompa do stanu wyjściowego (z niewielkimi perypetiami). Okazuje się jednak, że zapomniałem o jeszcze jednej rzeczy. Nie zapisałem sobie nigdzie playlist ani zakładek z Winampa. A ten, niestety, pod pewnymi względami został jeszcze w latach ’90 — i nie ma tak prostej funkcji, jak automatyczny backup list gdzieś online (ręczne eksportowanie list do .m3u przy każdej zmianie playlisty jak dla mnie zupełnie nie rozwiązuje tej sprawy). Dzięki temu też pozbyłem się kilku dłuuugich i nie bez trudu zbudowanych playlist. Czytaj dalej »
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 »
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 »