PDA

View Full Version : Zen Coding


Irrorate
26-07-2010, 11:05 PM
What's your opinion on the Zen Coding (http://code.google.com/p/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 :P

I see no need!
Blinger$
27-07-2010, 05:45 AM
How's it complicated? It's much simpler.&lt;br&gt;<br>
just the whole .div#thisdiv crap etc..&lt;br&gt; maybe i am just old skool?<br>
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:

html:5
Result:

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

</body>
</html>


html:xt
Result:

<!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.

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

This code gives:

<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 (http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf&can=2&q=)
kk.
27-07-2010, 10:37 AM
&lt;br&gt;<br>
just the whole .div#thisdiv crap etc..&lt;br&gt; maybe i am just old skool?<br>

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
Irrorate
27-07-2010, 10:39 AM
Yeah it does have escape filters (didn't see Blinger's post). That's mainly used for the web version as it escapes < and >.
LMS16
27-07-2010, 11:39 AM
Only thing that concerns me is that performance may be slowed down?

Im unsure how zen works so im unsure lol

Im willing to learn this as alot of time will be saved :)

Lew.
Apolva
27-07-2010, 11:57 AM
Just installed the plugin for TextWrangler but have no idea what the key combo is to use it, since it doesn't say.
Irrorate
27-07-2010, 12:03 PM
Only thing that concerns me is that performance may be slowed down?

Im unsure how zen works so im unsure lol

Im willing to learn this as alot of time will be saved :)

Lew.
It doesn't slow down performance for me on Notepad++. It doesn't actually do anything until you tell it to, you basically write the shorthand HTML and then click "Expand Abbreviation" (or Ctrl + E) and it expands. It doesn't expand as you work.


Just installed the plugin for TextWrangler but have no idea what the key combo is to use it, since it doesn't say.
Try writing some shorthand HTML (type html:xt) and press Ctrl + E and see if it expands.
Apolva
27-07-2010, 12:09 PM
It doesn't slow down performance for me on Notepad++. It doesn't actually do anything until you tell it to, you basically write the shorthand HTML and then click "Expand Abbreviation" (or Ctrl + E) and it expands. It doesn't expand as you work.


Try writing some shorthand HTML (type html:xt) and press Ctrl + E and see if it expands.

Didn't work, also tried all the CMD and CTRL combinations, still nothing. :/
Irrorate
27-07-2010, 12:33 PM
I'm not sure about the problem then, are you sure it's compatible? Maybe you can scour some Google pages for an answer!
Trinity
27-07-2010, 12:39 PM
http://zen-coding.ru/textarea/ << Browser based version if anyone wants to test it without downloading anything :)
Blob
27-07-2010, 12:51 PM
I did download it but I couldn't be bothered with the hassle to get it working with Zend Studio. Will take a look some time later, as it seems good.
Fehm
27-07-2010, 01:00 PM
&lt;br&gt;<br>
just the whole .div#thisdiv crap etc..&lt;br&gt; maybe i am just old skool?<br>

I'm with you, LOL. Old Skool ftw.
Recursion
28-07-2010, 11:57 AM
I'll stick with coding by hand, that just looks more complicated... like learning another language... to do the same job? Wut.
Irrorate
28-07-2010, 12:06 PM
I'll stick with coding by hand, that just looks more complicated... like learning another language... to do the same job? Wut.

There's nothing to learn, it's actually really simple. It uses CSS operators for ids (#) and classes (.), it uses the greater than(>) to denote child elements, the plus sign (+) to denote multiple elements and the multiplication sign (*) to place X amounts of an element (e.g. li*5>a gives 5 <li><a href=""></a></li>).

I love it <3
redtom
31-07-2010, 01:50 PM
I guess once you've gotten used to coding in short it would save time.
Irrorate
31-07-2010, 03:59 PM
It took me a whole 30 sections to learn it.. if you know CSS it's extremely easy to learn.

Want to hide these adverts? Register an account for free!