Zen Coding

Irrorate · 26-07-2010, 11:05 PM

What's your opinion on the Zen Coding plugin?

I think it's awesome and it'll definitely speed up coding and save you hours. I would recommend it to anyone who uses compatible IDE/text editing software!

Trigs · 27-07-2010, 04:19 AM

Heard about this before. I hear it's a huge time-saver but I've yet to give it a try.

~~Blinger$~~ · 27-07-2010, 04:22 AM

it looks complicated imo, i won;t be using it

Trigs · 27-07-2010, 04:27 AM

How's it complicated? It's much simpler.

**HotelUser** · 27-07-2010, 04:30 AM

What's this do for me if I do most of my dirty work in JQuery or with GWT already

I see no need!

~~Blinger$~~ · 27-07-2010, 05:45 AM

Originally Posted by Fazon

How's it complicated? It's much simpler.

just the whole .div#thisdiv crap etc.. maybe i am just old skool?

LMS16 · 27-07-2010, 06:55 AM

Some think it easy, some think its hard.

But before you could coding in php/html, did you think that was hard...

Its about learning and becoming comfortable with the code

Lew.

Trinity · 27-07-2010, 07:46 AM

That does look like it would save a huge amount of time, but I don't use any of the supported editors

I might download one though, just to use this.

Irrorate · 27-07-2010, 10:02 AM

It's really easy to use...

These 6 characters create my head and body structure:

Code:

html:5

Result:

HTML Code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

Code:

html:xt

Result:

HTML Code:

<!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>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body>
	
</body>
</html>

As you can see it dramatically speeds up coding.

Code:

body>(#header>#logo+ul#nav>li*5>a)+(#content)+(#footer)

This code gives:

HTML Code:

<body>
	<div id="header">
		<div id="logo"></div>
		<ul id="nav">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="content"></div>
	<div id="footer"></div>
</body>

See how dramatically your code can be sped up? I love how you can use the multiply operator and the addition operator. You can edit the plugin to add your own shorttags too. It also shortens CSS.

I love the simplicity of it. You can assign classes using the period (.), IDs using the #, use the multiply operator to create multiple elements. It really is awesome.

Here's the cheat sheet

kk. · 27-07-2010, 10:37 AM

Originally Posted by Blinger

just the whole .div#thisdiv crap etc.. maybe i am just old skool?

If you know CSS, it looks pretty simple. You rather than writing it out, you use the # for id's like in your CSS, and . For classes. I wouldn't use it though lol

Thread: Zen Coding

Thread Tools

Zen Coding

Posting Permissions