Mit lessek meg?

Bár egyre szélesebb körben használható már a CSS3 és valóban nagyon hasznos újításokat hoz a fejlesztők számára, sok tekintetben még mindig fejlesztésre szorul. A Leaner CSS ezen a problémán igyekszik segíteni. Mint a bevezetőben is írtam, gyakorlatilag a programozási nyelvekből megszokott módszereket alkalmazza a stíluslapokra is. Ezáltal nyílik lehetőségünk változók használatára vagy leszármazott szabályok létrehozására (mint például az objektumorientált PHP esetében).

A LESS nem túl elterjedt “nyelv”, ugyanis alapvetően a Ruby nyelvhez készült és mi átlag fejlesztők nem fogunk minden egyes apró módosításkor egy új fájlt fordítani. Létezik természetesen PHP-hez és ASP-hez is, de itt megint csak fordítanunk kéne. Hamarosan azonban csak egy böngészőre lesz szükségünk, ugyanis gőzerővel folyik a LESS.js fejlesztése.

Használat

A projekt a GitHub-on található meg, ha regisztrált tagok vagyunk, érdemes követni (Watch ikon). Mivel a LESS.js valóban egy Node.js implementáció, ez az oka annak, hogy ennyi fájl látható. Ez természetesen nem jelenti azt, hogy szükségünk van valamilyen JavaScript keretrendszerre a használatához, a script elfut önmagában is.

A mezei JavaScript fájlokat (melyeknek verziója a cikk írásának időpontjában 1.0.20) a dist/ könyvtárban találjuk, fejlesztői és éles környezetben való használatra egyaránt. Letöltés után a feladatunk csak annyi, hogy elhelyezzük az oldal fejlécébe. Ezután következik az izgalmas rész, a LESS fájl megírása. Nagyon fontos, hogy a .less fájlt a JavaScript előtt hívjuk meg, ugyanis csak így tudja értelmezni! Fontos továbbá, hogy a fájl rel attribútumának beírjuk a

stylesheet/less

értéket. Illetve ahogy látjátok is, a .css kiterjesztés helyett a .less kiterjesztést kell használnunk.

<link href="main.less" type="text/css" rel="stylesheet/less" />
<script src="less-1.0.20.min.js" type="text/javascript"></script>

A cikkhez készítettem egy tipikus weboldalt, fejléc, oldalsávok, tartalom és lábléc elrendezéssel. Mivel a grafikával nem akartam foglalkozni, így ezt CSS3-as lekerítésekkel és színátmenetekkel oldottam meg. Kéretik modern böngészőben nézni az oldalt! :)

Gyakorlati példák

A lényeg tehát jelen esetben a main.less fájlban található, pár dolog amit kiemelnék:

Változók és műveletek

@light-gray: #eee;
@dark-gray: @light-gray - #444;

A változókat a @ jellel definiáljuk, az értéket pedig kettőspont után írjuk. A sötétszürke szín megadásánál láthatjátok, hogy a világosszürke szinéből vontam ki a #444444 RGB értéket. Később ezeket az értékeket a @változónév; módon használhatjuk.

Mixin

.rounded-corners {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

Ez a kis kódrészlet arra szolgál, hogy 10 pixellel lekerekített sarkokat ad egy elemnek. A mixinek lényege, hogy ezeket bármikor újra felhasználhatjuk, ha beírjuk az osztály nevét és egy pontosvesszőt.

Egymásba ágyazás

li {
        background: #fcf6eb;
	color: #64440d;
	float: left;
	margin: 0 5px 0 0;
	padding: 5px 10px;
	-webkit-transition: all .3s ease-in;

	.rounded-corners;
	.inset-shadow;

		&:hover {
			background: #e8b255;
		}
}

Mint látható, a hover állapot esetén nem írtam le újból, hogy li:hover, hanem az aktuális elemet a & karakterrel helyettesítettem. És több mixint is használtam a listaelem formázásakor.

Ami kimaradt

A névtereken, paraméterek átadásán és a scope használatán kívül minden megtalálható a kódban, amire a LESS képes. Természetesen sokkal-sokkal jobb és használhatóbb kódot lehet írni, mint ami az én példámban látható – lévén, hogy még én is csak ismerkedem vele -, de a lényeg szerintem érthető. Létezik még egy Sass néven futó, a LESS-hez nagyon hasonló Ruby gem. Nagyjából ugyanezeket a funkciókat képes ellátni, azonban itt is fordítanunk kell éles környezetben való használat előtt.

Remélem sikerült a cikkel meghoznom a kedveteket, hogy kipróbáljátok ezt a nagyszerű “rendszert”, kiegészítőt, nem is tudom minek nevezzem. Ha ügyfelek weboldalán nem is, de személyes projekteknél szerintem megér egy próbát. Ha Ti is próbáltátok már a cikkben említett Ruby gemeket vagy ezektől eltérőt, vagy csak megosztanád a véleményed a bemutatóval kapcsolatban, örömmel várom a hozzászólásaitokat!

Utószó: a bemutató oldalt idővel bővíteni és szépíteni fogom, jelenlegi célja csak a LESS demonstrálása volt. További információ, hogy most, hogy az iskola végeztével több időm lett, így több cikk is várható a jövőben.

Tesztkörnyezet

A technikai előzetes letöltése után elindítottam a Windows XP-t, mivel naívan abban reménykedtem, hogy működni fog. Sajnos azonban tévedtem és ami még rosszabb hír, hogy ez így is fog maradni. Az Internet Explorer 9 tehát nem fogja támogatni az XP-t! Ennek az az egyszerű oka, hogy olyan grafikus API-kat használ az új böngésző, amiket az XP nem tartalmaz.

Habár a Windows 7 nagy előrelépést mutatott a Vista-hoz képest és meglepően sokan átálltak már rá, sokan még mindig XP-t használnak és a Microsoft részéről ez szerintem rossz lépés. A webfejlesztők számára sem előnyös, ugyanis továbbra se tudják a HTML5 és CSS3 nyújtotta lehetőségeket kihasználni és az Internet Explorer 8-nál és annak hibáinál ragadnak.

A kezdeti csalódás és a Windows 7 telepítése után már gyorsan mentek a dolgok. A böngésző telepítése nagyjából két percet vett igénybe és természetesen nem írja felül az aktuálisan telepített Internet Explorer-t.

Megjelenés és sebesség

A megjelenés elég minimalistára sikerült, gyakorlatilag egy menüsort és magát a weboldalt megjelenítő részt készítették csak el a fejlesztők, a címeket is csak az Open menüponttal tudjuk beírni. Véleményem szerint ez jó, mert inkább a háttérben búvó dolgokra koncentráljanak előbb, mint a külsőre.

Sebesség terén hasonlóan teljesít a többi böngészőhöz képest, a weboldalak betöltésében alig érzékelhető különbség van. A példa oldalakat kellő gyorsasággal jelenítette meg, vicces is lett volna, ha nem.

Technológia

Teljesen új, Chakra névre hallgató JavaScript motort kapott a böngésző. Mivel manapság már nagyon sok alkalmazás JavaScript alapú, így a Microsoft-nak is lépnie kellett sebesség terén és ez sikerült is nekik. Már ebben az első fejlesztői kiadásban is jelentős gyorsulást értek el az 8-as verzióhoz képest, ezt szemlélteti az alábbi ábra is. Számítani lehetett rá, hogy a Chrome gyorsabb lesz, de a végleges verzió megjelenéséig bármi történhet.

Érdemes a JavaScript futtatásánál megjegyezni, hogy a hálózati folyamatok mellett párhuzamosan, külön mag(ok)on történik, ezáltal tudták ilyen szinten növelni a sebességet.

Megjelent természetesen a HTML5 és CSS3 támogatás is, ezekre nagy hangsúlyt fektet a fejlesztői csapat. Végre nem kell az áttetszőséghez szűrőket (filter:opacity()) használni, illetve ugyanúgy működnek a lekerekített sarkok, keretek, stb. Ezeket a példa oldalakon ki lehet próbálni.

A böngészők bizonyos szabványoknak való megfelelősségét vizsgáló Acid3 teszten 55 pontos eredménnyel megy át, ami szintén szép előrelépésnek számít a jelenlegi 20 ponthoz képest. Tudni kell, hogy 100 százalékosan jelenleg csak a Google Chrome, a Safari, az Opera és az Epiphany, illetve pár mobil böngésző megy át.

Ami a legérdekesebbnek ígérkezik, az a GPU, vagyis a videókártya által gyorsított HTML5 oldalak. Ilyen tekintetben előny, ha a bátrak böngészőjét választjuk, ugyanis Firefox esetében is jelenleg csak a betűk megjelenítését gyorsítja a GPU. Magyarul tehát jön a DirectX a webre.

Összegzés

A Microsoft jó irányba halad az Internet Explorer fejlesztésének tekintetében és egy kellemes böngészőt várhatunk 2011-re, de sajnos ismételten későn kapcsoltak. Habár a HTML5 és CSS3 specifikációk véglegesítésre szintén várni kell, de valószínű, hogy az IE9 megjelenésekor már a többi böngésző mind támogatni fogja ezeket, ahogyan részben már most is. Az XP kompatibilitás elvetése szintén negatívum, én a redmondi cég helyében erőltetném a frissítést, nem pedig akadályoznám.

A fejlesztői előzetest 8 hetente fogják frissíteni, kiváncsian várom a fejleményeket. Ti hogyan vélekedtek a böngészőről? Ha van tapasztalatotok vele, nyugodtan osszátok meg!

Hardware

Először is magáról a gépről egy pár szót: a munkaeszközöm egy 2008. áprilisában bemutatott 20 colos iMac, a legkisebb modell (teljesítmény és a monitor méretének tekintetében is). Közel másfél éve nyúzom az egyébként XMS-nél vásárolt masinát és nagyon meg vagyok vele elégedve. Egyetlen negatívum a Snow Leopard, ami eddig csalódás volt a régi jó Leopardhoz képest, mert túl sokat látom a strandlabdát.

A bejegyzések és kódok megírásában egy amerikai kiosztású Apple Wireless Keyboard  segít, a navigálásban pedig a Logitech MX Revolution – tudni kell ugyanis, hogy egy kis kényelem illetve a szemem pihentetése, a képernyő jobb átláthatósága érdekében nagyjából egy hónapja átálltam a vezeték nélkül eszközökre teljesen. A billentyűzetet még szoknom kell kicsit, de egyébként örülök, hogy megvettem.

Perifériák tekintetében még egy Western Digital külső merevlemezem (a linkeltnél eggyel korábbi verzió) van, ami backup illetve multimédiás tartalmak tárolásának céljából lett megvásárolva. Az iPhone 3G dokkolására és az USB portok bővítésére a Griffin Simplifi szolgál, nyomtatáshoz / scanneléshez pedig egy Canon MP510 nyomtatót használok (ami egyébként szörnyen lassú, de hogy miért…ha van ötlet, örömmel várom!).

Software

Fentebb látható a dokkom, ahol az általam legtöbbet használt alkalmazások megtalálhatóak. Amolyan kategóriák szerint kisebb blokkokra bontottam, mivel egyrészt átláthatóbbá teszi a menüsort, másrészt pedig egy-egy fejlesztési / tesztelési szakaszhoz így egy helyre van gyűjtve minden szükséges program. Nézzük tehát át sorban, hogy melyik program mi is:

Finder – a Windows intézőjének megfelelője, elegedhetetlen a fájlok böngészéséhez. Funkcionális bővítéséhez a TotalFinder kiegészítőt használom, így például már fülek is vannak, illetve a két paneles böngészés is megoldott.
VMWare Fusion – virtuális számítógépeket kezelő szoftver, jelenleg egy Windows XP SP3 Professional van telepítve, kizárólag Internet Explorer alatti tesztelés céljából.

Address Book – barátok és ügyfelek elérhetőségei miatt.
iCal – Google Calendar-al szinkronizált naptár (Mac-iPhone-web), hogy mindig tudjam mi vár rám a következő órában.
Mail – a levelezéseim tárolására. Mivel sok postafiókot nézek át minden nap, így nekem ideálisabb a desktop megoldás a webessel szemben. Bár néhány Gmail / Gmail Labs funkciót szívesen viszontlátnék.
Things – task management szoftver, mikorra milyen feladatokkal kell elkészülni.

MultiFirefox – mivel az általam épített weboldalaknak általában Firefox 3 és 3.5 alatt is hasonlóan kell kinézniük, de viszont 2 ikont nem szeretnék ugyanannak a böngészőnek, így bukkantam rá erre a kis programra, ami egyszerűen kezeli az összes telepített Firefox verziót és azok profilját.
Safari – tesztelés miatt illetve jelenleg az alapértelezett böngészőm.
Google Chrome, Opera, Internet Explorer – szintén tesztelési célokból.

Adobe Photoshop CS4 – grafikai munkák készítésére illetve a sitebuild során a szükséges elemek kivágásához.
Adobe Illustrator CS4 – keveset használom ugyan, de ha valamilyen vektorgrafikára van szükség, akkor a segítségemre áll.
Adobe Flash CS4 – az Illustratorhoz hasonlóan ezt is keveset használom, de ha a megrendelőnek Flash elemekre van szüksége, akkor itt készítem el őket.

MAMP – a localhost környezetért felelős, gyorsan és egyszerűen tudom a szervereket leállítani/elindítani, konfigurációs fájlokat módosítani, stb.
Coda – az egyablakos webfejlesztő alkalmazás. Imádom az integrált Terminal és a könyvek funkció miatt.
Transmit – FTP alkalmazás a Coda fejlesztőitől.
xScope – az egyik leghasznosabb alkalmazás, amivel eddig találkoztam. Másodpercek alatt lekérhető elemek szélessége / magassága, különböző felbontások alatt nézhetünk meg egy-egy ablakot, a pipettával színeket másolhatunk, Photoshop-ban megszokott guideokat készíthetünk és hasonló nyalánkságok.

iTunes – “Zene nélkül mit érek én?”
Adium – több protokollos IM kliens, számtalan letölthető kiegészítővel.
Skype – rövid és hosszú beszélgetésekre, valamint ha már olyan szintre jutott egy probléma, hogy megbeszélni könnyebb, mint e-maileket váltani.
uTorrent – a szórakozás miatt. :)

A sor végét a legtöbbet böngészett mappáim zárják, illetve a lomtár. A felsoroltakon kívül rendszeresen használok még néhány alkalmazást, de ezeket vagy a Google Quick Search Box segítségével indítom el vagy más alkalmazásokból megnyitva (pl. FTP-nél Coda helyett néha TextMate). Csak pár program, ami ide tartozik: 1Password, ColorSchemer Studio 2, ImageOptim és a Plex.

Menüsáv

Bár az itt helyet foglaló dolgok nagyrészt nem befolyásolják a munkám, de hátha találtok köztük olyat, ami ti is kipróbálnátok.

Itt most jobbról balra haladnék: elsőként a Spotlight, ami az egész rendszert indexelő kereső. Régen sokkal jobb volt, ahogy a Show All funkció kategóriák szerint rendezte a találatokat.

A következő pár pontról nem kívánok sokat írni: idő és dátum, billentyűzet kiosztás, AirPort (alias Wi-Fi / Ethernet), Time Machine, Spaces és a Bluetooth.

Majd négy ikon, melyek a memória és az aktuális sávszélesség használatot, a CPU magonkénti aktivitását illetve a hőmérsékletet jelzik. Ezekért az iStat Menus felelős. A Dashboard widget helyett azért esett erre a választásom, mert egyrészt majdnem mindig ki van kapcsolva a Dashboard (elég nyomós ok azt hiszem :) illetve ha valami miatt lelassulna a gép, egy kattintás után rögtön látom hogy mi is az oka.

Ezek után jön a Mozy online backup szolgáltatás. Bár szeretnék egy teljes mentést a rendszerről a neten is tárolni, de amíg 35kB/s a feltöltési sebességem, addig maradok a 2GB-os ingyenes verziónál.

A Little Snitch a privát adataim kiszolgáltatásának megakadályozásában segít, vagyis ha valami kimenő kapcsolatot indít, arról én rögtön értesítést kapok és eldönthetem hogy engedélyezem-e vagy sem.

A sort a Mail Unread Menu zárja, gondolom nem szorul magyarázatra. Az olvasatlan e-mailek számát jeleníti meg plusz azonnal tudok én is levelet írni.

Végszó

Az itt leírtakon kívül webes eszközök is segítik a munkámat, ezeknek viszont egy külön bejegyzést fogok szentelni. Ha a programok között rátaláltok olyanokra, amiket ti is használtok, akkor írjátok meg hozzászólásként, meg úgy egyáltalán, hogy ti miket használtok.

Ha valaki kapcsolatba szeretne velem lépni, az megteheti e-mailben a Kapcsolat menüpont alatt, ezenkívül a legtöbb szociális hálón megtalálható vagyok. Hamarosan lesz egy rólam menüpont, valamint a referenciamunkáimnak is szeretnék egy külön kis részt szentelni. Addigis kellemes olvasást kívánok!