Tag Archives: productivity

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

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

Zapostowany w Technika | Tagi: , , , , , , , | 6 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.

HTC Desire – moje wrażenia

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

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 »

Dlaczego HTC Desire?

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

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 :lol:

Nawiasem – jako że pojawiało się to pytanie – mam (kupiony w x-kom.pl) telefon dokładnie w takich kolorach, jak w tym video.

YouTube Preview Image

HTC Desire

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

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 »

Backup playlist w Winamp

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

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 »

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 »

Photomatix HDR – RAW vs. JPEG

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

Pierwotnie tytuł tego posta miał brzmieć „Photomatix vs. Enfuse”, ale w trakcie przygotowywania sobie materiałów zobaczyłem, że sprawy nie do końca mają się tak, jak sądziłem.

Ale od początku – w czasie obrabiania fotek z niedawnego spaceru (a konkretniej w czasie robienia HDRa z 3 ujęć w Photomatiksie) zauważyłem ciekawą rzecz. Załadowałem bezpośrednio 3 RAWy (.CR2 – z mojego 50d) do Photomatixa i kliknąłem dwa kolejne buttony prowadzące prosto do tonemappingu. Moim oczom ukazał się ten oto powalający rezultat:

Photomatix - HDR z RAWów

Photomatix - HDR z RAWów

Czytaj dalej »