A tegnapelőtti launch óta — ami igazából már múlt pénteken megtörtént — felmerült néhány probléma, amik a figyelmetlenségemből vagy a megfelelő tesztelés hiányából fakadtak. Ezekről lesz most szó, mert egyéb témákról nincs kedvem írni.

Cardinal, the rack!

Edboy jelezte, hogy Androidon nem vált át az oldal a mobilos elrendezésre. Kibővítettem a media query-ket a megfelelő device-width feltételekkel — okom volt a kihagyásukra, de kikerültem máshogy —, reményeim szerint ennyi volt a gond. Androidos és iOS-es eszköz híján nem tudok erről megbizonyosodni, úgyhogy szóljatok, ha így sem jó.

Fetch... the cushions!

A böngészőprogramok valamilyen megfontolásból az űrlapok gombjai esetében nem a klasszikus dobozmodellt alkalmazzák (hogy ti. a doboz tényleges magassága a doboz definiált magasságának, az alsó és felső eltartásnak, valamint az alsó és felső szegély vastagságának az összegével egyenlő), hanem olyat, amelyben, ha konkrét értékkel definiálod a gomb magasságát, akkor az onnantól kőbe van vésve.

Továbbá bármennyire jó ötletnek tűnik, véletlenül se helyezzetek el a gomb value attribútumában az alfanumerikusokon kívül eső HTML-entitást (soremelés-jel és társai) díszítés végett, mert attól az Opera egyből kiénekel pár magas hangot — ami még a kisebbik baj, de a gomb feliratát elegánsan ki is tolja a gombon kívülre.

...the comfy chair!

Amikor S@ti felvetette, hogy szokatlan a teljes képernyőt elfoglaló kenyérszöveg, még nem gyanítottam semmit (pedig 640 képpont ezzel a betűmérettel nem a világ), aztán küldött egy screenshotot a szöveget kitakaró zöld logóról, ami azért volt furcsa, mert az elképzeléseim szerint a logó csak akkor ragad meg a bal felső sarokban, ha elég nagy az ablak szélessége ahhoz, hogy elférjen a tartalom mellett, egyébként meg együtt mozog a fejléccel.

Ezt a jelenséget végül a 3.6-os Firefoxszal sikerült reprodukálnom. Az rögtön látszott, hogy az összes doboz úgy jelenik meg, ahogy kell, a bejegyzést tartalmazó article elemet kivéve, azt ugyanis a neki megadott 640px helyett 880px szélesre renderelte ki a Firefox.

Nem mennék bele abba, hogy hányszor javítottam bele szentségelve a CSS-be, meg hogy hány szál hajam hullott ki attól, hogy az article elemre alkalmazott tulajdonságok közül mindnek megvolt a maga elvárt hatása, csak a szélességre, margóra, eltartásra vonatkozó beállításoknak nem (pedig utólag végiggondolva ez a kulcs), meg hogy milyen kacifántos keresőkifejezésekkel illettem mindannyiunk közös barátját.

Aztán szöget ütött a fejembe, hogy talán a Firefox ezen verziója még nem támogatja ezt az új, HTML5-ös elemet, de a kompatibilitási táblázat szerint igenis támogatja, csak a stíluslap elején nem árt megadni, hogy blokkszintű elemként legyen kezelve, ezt meg amúgy is megtettem még a kezdet kezdetén.

Azért odagörgettem, végignéztem a szabályhoz tartozó szelektoron, majd szolid, ámde határozott facepalmot követően beírtam a hiányzó vesszőt az abbr és az article közé és bumm, így lett a...

I confess!

Ezeket csupán azért meséltem el, mert nehogy már csak nekem fájjon, meg hátha tanulságos, meg hogy sajnáljatok.

TL;DR: hosszas háttérmunkák eredményeképpen új motort és dizájnt kapott a blog. Nem érdekes, lapozzál.

Az előző változatot nagyon szerettem, az élesítése után kapott visszajelzések alapján nektek is bejött. Nem véletlen, hogy két hónap híján két évig nem nyúltam hozzá komolyabban. Az akkori eszemmel most sem készíteném máshogy, de azóta elég sokat változott a szemléletmódom, ráadásul a webdizájn területén megjelent egy rakás újdonság, amelyek jó része mára már széles körben alkalmazható, nekem pedig illene ezeket ténylegesen tanulmányozni és a tanultakat a gyakorlatban kamatoztatni.

És mi mást barmoljon szét az ember, ha nem a blogját?

Amik kellettek

A kívánságlistán az elejétől kezdve szerepeltek kihagyhatatlan tételek, aztán ahogy azokat kipipáltam, mindig felmerült valami új, amit érdekesnek vagy hasznosnak találtam. Körülbelül ez volt a kiindulási alap:

1. HTML5-re történő áttérés
2. Latin2 helyett UTF-8 karakterkódolás
3. szélesebb hely a szöveg és a képek számára
4. nagyobb és jobban olvasható betűk
5. a bejegyzések között léptető linkek áthelyezése az ablak széleiről valami értelmesebb helyre
6. a logó és a színvilág megtartása

Amik lettek

Lettek.

Először is kinyírtam a kezdőlapot, az egyből a legutolsó bejegyzésre ugrik. Nem tudtam neki értelmes szerepet kitalálni, a bejegyzések listája meg úgyis ott van az archívumban, nem kell csak azért, hogy legyen. A kereső egyelőre annyira hatékony, hogy vagy többet talál, mint kellene, vagy semmit sem talál, de dolgozom rajta, további értesítésig csak érzéssel használjátok. A desklognak is annyi, de feléled majd, amint visszatérnek és kereshetővé válnak a címkék.

Igazság szerint a dizájn volt az, amivel többet (sokkal többet) kellett foglalkoznom, mint azt előre terveztem, de legalább nem látszik rajta. Amikor elfogyott az ihlet, végignéztem egy rakás olyan oldalt, amiket nálam ezerszer tehetségesebb emberek alkottak. A komplett lenyúlás helyett csak próbálgattam az ottani megoldásokat beilleszteni az én elképzelésembe, de ez nagyon nem működött és egy idő után már a saját ötleteimet is másoknak tulajdonítottam. Ekkor két hétre félretettem az egészet, hogy kitisztuljon az agyam.

Abban voltam csak biztos, hogy egy egyszerű, átlátható layoutot szeretnék, ami akár így, akár úgy, de egyedi is, ráadásul kitaláltam e mellé, hogy akkor szakítsunk a fix szélességgel is és alkalmazkodjon az oldal a mindenkori ablakmérethez. Megismerkedtem hát a CSS3 media query-kkel és a responsive design fogalmával. Jelen pillanatban azt mondhatom, hogy az oldal alapvetően 1024px szélességre lett tervezve, ennél kisebb felbontásoknál pedig úgy rendeződik át, hogy mindig esztétikus és kezelhető marad, a 320px szélességgel bezárólag. (Ha mégsem, jelezd és megoldom.)

Aztán kitaláltam a fejlécbe a két téglalapot és a menüt. Jó, nem a világ legbonyolultabb oldalfejléce, de úgy nézzetek rá, hogy én képszerkesztő programmal is kizárólag geometriai alakzatokat bírok rajzolni. (Mondjuk ezeket pont nem kellett megrajzolni.) A léptető linkek az ablak széléről átkerültek a bejegyzés fejlécébe, ráadásul a sorrendjüket is felcseréltem just for fun, bár a könyvekben is balról jobbra haladunk, a múltból a jövő felé. (Kivéve persze az időutazásról szóló könyveket, mer’ ott kituggya.)

Eltakarítottam a Facebookos gombokat a bejegyzések alól. Azt szeretném, hogy a tartalommal kapcsolatos vélemények elsősorban hozzászólás formájában érkezzenek, mert egy egyszerű lájkkal ellentétben ezzel tudok kezdeni valamit, például válaszolok. Azért gátolni sem akarom a közösségi terjesztést, úgyhogy a kommentűrlap tetején ott a Facebookos megosztás meg a Twitterre küldés linkje, ha valaki erre vágyik.

A dizájn sajátossága még, hogy egyes posztok, ha a téma úgy kívánja, teljesen egyedi megjelenést kaphatnak. Majd meglátjuk, mire lesz ez jó, szerintem izgalmas lehetőség és megígérem, hogy nagyon szép köröket meg sokszögeket fogok berakni illusztrációnak.

Böngésző-mizéria

Az oldal HTML5-re és CSS3-ra épít, ezért főleg a modern böngészőkben (Firefox 3.6+, Chrome stable, Opera 10+, IE9) néz ki úgy, hogy szeretném. Az Internet Explorer korábbi verziói számára készülőben van egy speciális stíluslap, amivel nem lesz ennyire szétcsúszva minden, bár meg kell néznem a statisztikát, hogy érdemes-e egyáltalán foglalkoznom velük.

Fin

Azt hiszem, elmondtam mindent, amit a dizájnváltás kapcsán el lehetett mondani. Remélem tetszik. Jó olvasgatást a továbbiakban, jelezzétek a hibákat, ha vannak (és általában vannak), én meg rájuk repülök, mint M. György a lakossági megtakarításokra.

Enter.

Terry Jones és Graham Chapman most tudja meg, hogy 2%-kal emelkedik a tévéelőfizetés díja az általános ÁFA-kulcs.

Mindig hatalmas öröm, ha valami, amit korábban ötvenszer ugyanúgy oldottál meg, egyszerre elkezd nem működni és fogalmad sincsen, miért, hiszen minden ugyanolyan, semmi sincsen elgépelve, felcserélve, elfelejtve. Most egy ilyen problémát osztanék meg a tisztelt egybegyűltekkel, amire találtam workaroundot, de magyarázatot nem.

Adott tehát egy stíluslap, amelyben ilyen szabályok szerepelnek:

* { border: 0; }
...
form input, form textarea { border: 1px #ddd solid; background: #eee; }

Kérdés: Lesz-e kerete az űrlap mezőinek?
a, Lesz, mert az űrlapmezőkre vonatkozó szabály felülbírálja az univerzális szabályt.
b, Nem lesz, mert az univerzális szabály felülbírálja az űrlapmezőkre vonatkozó szabályt.
c, Nem lesz, mert bár az űrlapmezőkre vonatkozó szabály felülbírálja az univerzális szabályt, ez a tény a böngészőket nem érdekli.

A helyes válasz a c. Komolyan. Meg lehet nézni Firebuggal vagy Element Inspectorral, hogy az űrlap mezőin ott van az alkalmazott stílustulajdonságok között az egy képpont széles keret, mégsem úgy jelenik meg az oldalon, hanem keret nélkül. Viszont a háttér színe helyes.

Az ilyesmit azért általában kibírja az ember nevetőgörcs nélkül. Ilyenkor jön az, hogy elkezdjük kutatni a jelenség forrását, majd eljutunk oda, hogy szétdaraboljuk a szelektorokat egyszerűbbekre:

form input { border: 1px #ddd solid; }

form textarea { border: 1px #ddd solid; }

És meglepve tapasztaljuk, hogy így meg jó. És ez csak a border tulajdonsággal van így, minden más jó az első megadási móddal. Rohadjak meg, ha értem.

Az ordító Vader meg a pislogó ewok csak terelés, igazából ez lesz a Star Wars BD-ROM legnagyobb újítása:

And now for something completely different.

A Pepsi és a Mentos cukorka kölcsönhatása már régóta közismert. Nos, végeztem kutatásokat a témában és bizton állíthatom, hogy az éhgyomorra ivott mandarinos Fanta (esetleg Mirinda) és tízpercnyi vonatozás képes arra, hogy igazán testközelbe hozza az élményt.

És ez még azelőtt történt, hogy felszállt volna Az Ember, Aki Akkor Jött Ki A Detoxból.