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.

• 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

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.

Tym razem, dla odmiany, zapędziłem do roboty WordPressowe Custom Fields (do obrazka przy najnowszym poście). Kiedy obrazek nie jest zdefiniowany, następuje wstawienie domyślnej grafiki (logo) – jak przy tym poście. W przeciwnym razie dałem sobie do wyboru jeszcze możliwość ustawienia, czy obrazek będzie miał przezroczyste tło (na wypadek wyciętych grafik w 24bit PNG) – tak, żeby mógł nieco wystawać poza ciemnoszary obszar tła.

Ponadto zmniejszyłem ilość starszych postów wyświetlanych pod najnowszym oraz usunąłem z sidebara widgety z ostatnimi komentarzami i listą archiwalnych miesięcy.

Druga, kosmetyczna zmiana ma miejsce na stronie z fotkami. Zdjąłem ciemne tła z podstawowych albumów.

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.

I wszystko pięknie, do momentu, kiedy do zarządzania plikami rzeczywiście korzysta się z Eksploratora Windows. Co wśród ludzi żyjących z pracy przy PCcie nie jest chyba zjawiskiem częstym (chyba że ktoś jest masochistą). Jeśli zatem ktoś używa, powiedzmy, Total Commandera (a trudno o lepszy wybór ) – ma problem. Przy domyślnej konfiguracji TC i TortoiseSVN nie zobaczy nakładek na ikonki oznaczających statusy wersjonowanych plików.

Do niedawna myślałem, że „tak to już jest” – a z SVN nie korzystam jednak na tyle często, żebym nie mógł przeboleć otwarcia okna esploratora od czasu do czasu dla sprawdzenia co jest a co nie jest zcommitowane. Ale ostatnio, podczas pracy nad redesignem Lokiego, coś mnie podkusiło, żeby jednak pogooglać temat. No i jednak da się

Oto co trzeba zrobić:

1. W Total Commanderze wybieramy w menu Konfiguracja > Opcje > Operacja, a następnie w sekcji „Wybieranie za pomocą myszki” upewniamy się, że zaznaczono „Lewy przycisk myszki (jak w Windows)”:
   

   W TC ustawiamy wybieranie za pomocą LPM

2. Wciąż w konfiguracji Total Commandera, w sekcji „Ikony” upewniamy się, że zaznaczona jest opcja „Pokaż nakładkę ikony”:
   

   W sekcji "Ikony" ustawiamy "Pokaż nakładkę ikony"

3. Klikamy w Ekploratorze Windows prawym przyciskiem myszy i z menu kontekstowego wchodzimy do ustawień TortoiseSVN:
   

   Wchodzimy do konfiguracji TortoiseSVN

4. W sekcji „Icon Overlays” upewniamy się, że opcja „Show overlays and context menu only in explorer” jest wyłączona:
   

   Wyłączamy pokazywanie overlayów ikon wyłącznie w Eksploratorze

5. Restartujemy TC – i mamy ikonki
   

   TC z widocznymi nakładkami statusowymi na ikonach

No i to właściwie tyle. Jeśli ktoś ma taką fantazję, może jeszcze zainstalować w Total Commanderze wtyczkę pt. ShellDetails i skonfigurować jakie kolumny z informacjami o SVN będą pokazywane w oknie TC.

Za forum TortoiseSVN.

Pierwszą i podstawową zmianą, z której jestem bardzo zadowolony, to wreszcie możliwość wykorzystania dużych panoramicznych monitorów w czasie pisania postów. Trzeba przyznać, że wąziutki edytor WYSIWYG w rozdzielczości 1920×1200 w poprzedniej wersji WP wyglądał po prostu żenująco. Tym razem jest juz znacznie lepiej – cały layout panelu administracyjnego wreszcie się skaluje w poziomie.Druga bardzo ważna sprawa – wreszcie działa flashowy uploader plików na FlashPlayerze 10 :). Nie trzeba już uploadować po jednym pliku.

Z rzeczy, które na pierwszy rzut oka podobają mi się trochę mniej wymienić muszę mocną „macosxizację” designu. Dla jednych to zaleta, dla innych wada. Dla mnie chyba jednak to drugie. Poniżej kilka screenów:

Dashboard

Edycja posta

Lista postów

Z innych zmian (za wphacks.com):

• możliwość przeciągania meta-boxów na stronie edycji posta. Boksy te mogą być minimalizowane/maksymalizowane, jak również całkowicie ukrywane,
• możliwość ukrywania kolumn na stronach z listami postów, komentarzy itd.,
• inline’owa edycja postów i stron na stronach z listami tychże,
• komentowanie przez XMLRPC (czyli np. z desktopowych aplikacji do blogowania),
• odpowiadanie na komentarze z poziomu panelu administracyjnego,
• skróty klawiszowe do zarządzania komentarzami (tego akurat nie byłem w stanie znaleźć),
• ustrukturalizowane komentarze (drzewko) i nowe API dla wp_list_comments(),
• przyklejane posty (coś mi mówi, że jak ktoś dłubał z loopem – jak np. ja – do się może z tym pożegnać ),
• zintegrowana przeglądarka/wyszukiwarka pluginów,
• automatyczne upgrade’y całego WordPressa do nowszych wersji (!)
• (kilka innych technicznych spraw, mało interesujących dla normalnego uzytkownika)
  

Po pierwsze i najważniejsze – inna platforma. Zamieniłem Drupala na WordPressa. Doszedłem po prostu do wniosku, że do moich skromnych wymagań nie potrzeba aż takich możliwości, jakie daje D.

Ponadto znalazłem fajny plugin do galerii (NextGen Gallery), a i panel administracyjny WP jakoś bardziej zachęca mnie do postowania.

Kolejna sprawa – olałem tym razem kompletnie IE6. Wiem, że to wciąż najbardziej popularna przeglądarka (przynajmniej ogólnie rzecz ujmując), ale nie prowadzę tego sajtu dla szerokiego ogółu, a i tak wszyscy, którzy tu zaglądają (czyli w sumie może z 4 osoby ) używają normalnych przeglądarek. Do tego sam M$ zaczął wpychać IE7 przez autoupdate, więc szkoda mi było czasu i nerwów, a możliwość korzystania z PNG z 24-bitową przezroczystością i wszystkich selektorów CSS 2.1 (jak np. „input[type=text]„) była zbyt wielką pokusą.

Jeśli idzie o typografię, postanowiłem tym razem trochę zaszaleć (kosztem Waszych procesorów) i skorzystać z sIFR3, dzięki czemu mogłem w nagłówkach zastosować jedną z moich ulubionych czcionek (Myriad Pro). Nie przyspiesza to niestety renderowania strony, ale co tam – na lepsze rozwiązanie i tak przyjdzie pewnie długo czekać.

Wprawdzie zostało mi jeszcze kilka rzeczy, które chciałbym dopracować (jak np. tooltipy) ale myślę, że mogę się tym zająć już „live”. Poza tym nie mogłem się już doczekać :P .

No cóż, mam nadzieję, że tym razem dłużej będzie mi się podobał ten design. Poza tym zostawiłem sobie kilka furtek do ciekawych – myślę – updateów okolicznościowych. Zobaczymy, co z tego będzie ;).

UPDATE: Byłbym zapomniał – przy okazji zmieniłem również hosting. Długo zastanawiałem się między Bluehost a Dreamhost. Koniec końców wybrałem ten drugi, z kilku względów. Po pierwsze, można u nich hostować repozytoria SVN, co z pewnością może przydać się w pracy. A po drugie – trafiłem akurat na promocję i dostałem nielimitowaną pojemność dysku i bandwidth

• 1920 x 1200
• 1680 x 1050
• 1440 x 900
• 1280 x 1024
• 1024 x 768
• QVGA (Windows Mobile)

via Wykop