High speed HTML en CSS met Zen Coding

Geschreven door: Chris Ramakers

HTML editors hebben een lange weg afgelegd. Iedereen die al langer dan een aantal jaren bezig is met webdesign en/of -development heeft de overgang van tablebased layout naar css layout meegemaakt en de toekomst ziet er rooskleurig uit met dingen zoals HTML5 en CSS3 om de hoek. Maar met nieuwe technieken komt er ook nieuwe en complexe syntax. HTML editors zoals Dreamweaver, Coda, etc ... bieden hier een oplossing voor door code completion aan te bieden voor de volledige specificatie van HTML en CSS. Maar er is echter een nieuwe speler op het toneel verschenen. Maak kennis met Zen Coding.

Zen Coding

Zen Coding is een plugin verkrijgbaar voor diverse editors en IDE's zoals Textmate, Netbeans, Coda, Aptana, ... die het schrijven van complexe HTML structuren en CSS properties een pak makkelijker maakt. Door middel van speciale syntax en een keyboard shortcut kan je CSS selectors schrijven in je HTML document die dan on the fly worden omgezet in de gewenste HTML structuur.

Hoe vaak vind je jezelf bezig met repetitieve taken zoals het maken van de globale div structuur van je website, list items voor menu's, etc ...? Dit kan allemaal veel makkelijker met Zen Coding. En dat kan ik het best illustreren met enkele voorbeelden.

HTML

Het simpelste voorbeeld is het root element van elke html pagina namelijk <html>. Wie kent er nu de hele DOCTYPE, en alles wat daarmee gepaard gaat, vanbuiten? Ik ken niemand en de kans is klein dat jullie wel iemand kennen. Met Zen Coding geef je enkel html:xt in en activeer je de Zen Coding shortcut en plots staat volgende code in je editor.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

Nu zullen de meesten onder jullie wel zeggen Dat kan mijn editor ook en je hebt gelijk, niks spectaculairs tot nu toe. Maar dan hebben we het nog niet over de mogelijkheden van HTML Selectors gehad. Met Zen coding kan je namelijk makkelijk veel complexere structuren uitbouwen. Neem volgend voorbeeld.

div#name>p.one+p.two

Als je hier de Zen Coding shortcut op los laat krijg je plots volgende code voorgeschoteld

<div id="name">
	<p class="one"></p>
	<p class="two"></p>
</div>

Nog niet spectaculair genoeg? Probeer hetvolgende dan eens

html:xs>div#container>div#main>div#header>h1+ul#nav>li.button$*5>a

Dankzij Zen Coding heb ik met 1 regel de volledige onderstaande structuur uitgewerkt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
	<title></title> </head> <body> 	<div id="container"> 
		<div id="main"> 
			<div id="header"> 
				<h1></h1> 
				<ul id="nav"> 
					<li class="button1"><a href=""></a></li> 
					<li class="button2"><a href=""></a></li> 
					<li class="button3"><a href=""></a></li> 
					<li class="button4"><a href=""></a></li> 
					<li class="button5"><a href=""></a></li> 
				</ul> 
			</div> 
		</div> 
	</div> 
</body> 
</html>

Wat nog interessant is om te vermelden is dat de volgende input in de meeste editors volledig tab-stopped is. Dat wil zeggen dat je dmv tab kan springen tussen de verschillende punten in deze code waar je tekst kan ingeven. De screencast aan het einde van deze blogpost maakt dit duidelijk.

De mogelijkheden zijn eindeloos. Een overzicht van alle HTML Elementen en HTML Selectors vind je op de site van Zen-Coding.

CSS

Maar niet alleen wat HTML betreft biedt Zen Coding duidelijk voordelen, ook op het gebied van CSS kan Zen Coding van grote waarde zijn. Er zijn een heleboel CSS-properties en -aliassen beschikbaar. Wie kent er bijvoorbeeld de code voor een CSS AlphaImageLoader filter vanbuiten? Met Zen Coding is het zo simpel als volgende alias ingeven gevolgd door de Zen Coding shortcut.

bg:ie

En voila, je krijgt volgende output:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='',sizingMethod='crop');

En daarnaast zijn er nog meer dan 150 andere CSS aliassen die je kan gebruiken met Zen Coding.

Screencast

Met het geen hierboven beschreven staat is nog maar een tipje van de sluier gelicht wat betreft de mogelijkheden van Zen Coding. Wil je een overzicht van alle mogelijkheden? Bekijk dan zeker volgende screencast!

Conclusie

Maak je gebruik van één van de ondersteunde editors dan is het zeker de moeite waard om Zen Coding even uit te proberen. De mogelijkheden die Zen Coding biedt bovenop de standaard code completion van alle moderne HTML editors is niet te onderschatten. Eens je gewend bent aan Zen Coding zal je niet meer zonder kunnen.

Tags: css html tips

7 Reacties op deze blogpost:

Gert Bangels
Door Gert Bangels op 19 januari 2010

Interesting, alhoewel ik denk dat je sneller af bent het zelf te schrijven als je nog geen kennis hebt van de shortcuts. Maar zoals je zelf zegt: "Eens je gewend bent aan Zen Coding zal je niet meer zonder kunnen."

Binnenkort ook support voor IntelliJ, dat zie ik wel zitten...

Tom Hermans
Door Tom Hermans op 19 januari 2010

Interessant artikel, opent zeker perspectieven (tijdswinst), jammer dat er nog geen integratie is voor Notepad++. Toch es bekijken dit spel, nieuwe tools zijn altijd leuk.

Tom Deleu
Door Tom Deleu op 19 januari 2010

Ha! Had dit al eens gezien maar dit bestond nog niet voor Visual Studio toen. nu wel. Thanks om te herinneren ;)

Maarten Tibau
Door Maarten Tibau op 19 januari 2010

Leuke post Chris, op Nettus kan je ook nog een video tutorial terugvinden over Zen-Coding.

URL : http://bit.ly/5GDwxS

Je kan hem wel enkel bekijken als je een Tuts+ abbo hebt, kost iets meer dan 5 euro per maand, als je per kwartaal betaalt -&gt; Get Net Plus

Ook nog enorm veel andere nuttige tuts er te vinden

Bob Hufkens
Door Bob Hufkens op 19 januari 2010

Ook voor Espresso blijkbaar? Heel interessante post, bedankt!

Thomas Timmers
Door Thomas Timmers op 27 januari 2010

Zen coding is zeer interessant,
maar het grootste probleem is dat ik meestal vergeet om het te gebruiken ...

Wist trouwens ook niet dat er een plugin voor Visual Studio bestond,
deze ga het zeker nog eens proberen. Thnx !

@Bob: Zen voor Espresso ==&gt; http://github.com/sergeche/tea-for-espresso/downloads :)

Johan
Door Johan op 04 juli 2010

Niet onaardig bedacht en zeker de moeite waard, als ik dagelijks met nieuwe code's bezig zou zijn.
Vast niet ik alleen gebruik gewoon een standaard bestand welke ik naar wens aanpas.

Wachten op een volgende versie welke direct op de een of andere manier al het werk voor ons doet.

Nu weet ik waarom ze het in India etc. voor een prikkie doen!

{* Remarketing tag *}