Zen Coding: A Speedy Way To Write HTML/CSS Code

Advertisement

In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers.

How much time do you spend writing HTML code: all of those tags, attributes, quotes, braces, etc. You have it easier if your editor of choice has code-completion capabilities, but you still do a lot of typing.

We had the same problem in JavaScript world when we wanted to access a specific element on a Web page. We had to write a lot of code, which became really hard to support and reuse. And then JavaScript frameworks came along, which introduced CSS selector engines. Now, you can use simple CSS expressions to access DOM elements, which is pretty cool.

But what if you could use CSS selectors not just to style and access elements, but to generate code? For example, what if you could write this…

div#content>h1+p

…and see this as the output?

<div id="content">
<h1></h1>
<p></p>
</div>

Today, we’ll introduce you to Zen Coding, a set of tools for high-speed HTML and CSS coding. Originally proposed by Vadim Makeev (article in Russian) back in April 2009, it has been developed by yours truly (i.e. me) for the last few months and has finally reached a mature state. Zen Coding consists of two core components: an abbreviation expander (abbreviations are CSS-like selectors) and context-independent HTML-pair tag matcher. Watch this demo video to see what they can do for you.

If you’d like to skip the detailed instructions and usage guide, please take a look at the demo and download your plugin right away:

Demo

  • Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)

Downloads (Full Support)

Downloads (Partial Support, “Expand Abbreviation” Only)

Now, let’s see how these tools work.

Expand Abbreviation

The Expand Abbreviation function transforms CSS-like selectors into XHTML code. The term “abbreviation” might be a little confusing. Why not just call it a “CSS selector”? Well, the first reason is semantic: “selector” means to select something, but here we’re actually generating something, writing a shorter representation of longer code. Secondly, it supports only a small subset of real CSS selector syntax, in addition to introducing some new operators.

Here is a list of supported properties and operators:

  • E
    Element name (div, p);
  • E#id
    Element with identifier (div#content, p#intro, span#error);
  • E.class
    Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;
  • E>N
    Child element (div>p, div#footer>p>span);
  • E+N
    Sibling element (h1+p, div#header+div#content+div#footer);
  • E*N
    Element multiplication (ul#nav>li*5>a);
  • E$*N
    Item numbering (ul#nav>li.item-$*5);

As you can see, you already know how to use Zen Coding: just write a simple CSS-like selector (oh, “abbreviation”—sorry), like so…

div#header>img.logo+ul#nav>li*4>a

…and then call the Expand Abbreviation action.

There are two custom operators: element multiplication and item numbering. If you want to generate, for example, five <li> elements, you would simply write li*5. It would repeat all descendant elements as well. If you wanted four <li> elements, with an <a> in each, you would simply write li*4>a, which would generate the following output:

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

The last one–item numbering is used when you want to mark a repeated element with its index. Suppose you want to generate three <div> elements with item1, item2 and item3 classes. You would write this abbreviation, div.item$*3:

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

Just add a dollar sign wherever in the class or ID property that you want the index to appear, and as many an you want. So, this…

div#i$-test.class$$$*5

would be transformed into:

<div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div>

You’ll see that when you write the a abbreviation, the output is <a href=""></a>. Or, if you write img, the output is <img src="" alt="" />.

How does Zen Coding know when it should add default attributes to the generated tag or skip the closing tag? A special file, called zen_settings.js describes the outputted elements. It’s a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntaxes, such as HTML, XSL, CSS, etc.). The common language abbreviations definition looks like this:

'html': {
'snippets': {
'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',
...
}, 

'abbreviations': {
'a': '<a href=""></a>',
'img': '<img src="" alt="" />',
...
}
}

Element Types

Zen Coding has two major element types: “snippets” and “abbreviations.” Snippets are arbitrary code fragments, while abbreviations are tag definitions. With snippets, you can write anything you want, and it will be outputted as is; but you have to manually format it (using n and t for new lines and indentation) and put the ${child} variable where you want to output the child elements, like so: cc:ie6>style. If you don’t include the ${child} variable, the child elements are outputted after the snippet.

With abbreviations, you have to write tag definitions, and the syntax is very important. Normally, you have to write a simple tag with all default attributes in it, like so: <a href=""></a>. When Zen Coding is loaded, it parses a tag definition into a special object that describes the tag’s name, attributes (including their order) and whether the tag is empty. So, if you wrote <img src="" alt="" />, you would be telling Zen Coding that this tag must be empty, and the “Expand Abbreviation” action would apply special rules to it before outputting.

For both snippets and abbreviations, you can ad a pipe character (|), which tells Zen Coding where it should place the cursor when the abbreviation is expanded. By default, Zen Coding puts the cursor between quotes in empty attributes and between the opening and closing tag.

Example

So, here’s what happens when you write an abbreviation and call the “Expand Abbreviation” action. First, it splits a whole abbreviation into separate elements: so, div>a would be split into div and a elements, with their relationship preserved. Then, for each element, the parser looks for a definition inside the snippets and then inside the abbreviations. If it doesn’t find one, it uses the element’s name as the name for the new tag, applying ID and class attributes to it. For example, if you write mytag#example, and the parser cannot find the mytag definition among the snippets or abbreviation, it will output <mytag id="example"><mytag>.

We have made a lot of default CSS and HTML abbreviations and snippets. You may find that learning them increases your productivity with Zen Coding.

HTML Pair Matcher

Another very common task for the HTML coder is to find the tag pair of an element (also known as “balancing”). Let’s say you want to select the entire <div id="content"> tag and move it elsewhere or just delete it. Or perhaps you’re looking at a closing tag and want to known which opening tag it belongs to.

Unfortunately, many modern development tools lack support for this feature. So, I decided to write my own tag matcher as part of Zen Coding. It is still in beta and has some issues, but it works quite well and is fast. Instead of scanning the full document (as regular HTML pair matchers do), it finds the relevant tag from the cursor’s current position. This makes it very fast and context-independent: it works even with this JavaScript code snippet:

var table = '<table>';
for (var i = 0; i < 3; i++) {
table += '<tr>';
for (var j = 0; j < 5; j++) {
table += '<td>' + j + '</td>';
}
table += '</tr>';
}
table += '</table>';

Wrapping With Abbreviation

This is a really cool feature that combines the power of the abbreviation expander with the pair tag matcher. How many times have you found that you have to add a wrapping element to fix a browser bug? Or perhaps you have had to add decoration, such as a background image or border, to a block’s content? You have to write the opening tag, temporarily break your code, find the appropriate spot and then close the tag. Here’s where “Wrap with Abbreviation” helps.

This function is pretty simple: it asks you to enter the abbreviation, then it performs the regular “Expand Abbreviation” action and puts your desired text inside the last element of your abbreviation. If you haven’t selected any text, it fires up the pair matcher and use the result. It also makes sense of where your cursor is: inside the tag’s content or within the opening and closing tag. Depending on where it is, it wraps the tag’s content or the tag itself.

Abbreviation wrapping introduces a special abbreviation syntax for wrapping individual lines. Simply skip the number after the multiplication operator, like so: ul#nav>li*>a. When Zen Coding finds an element with an undefined multiplication number, it uses it as a repeating element: it is outputted as many times as there are lines in your selection, putting the content of each line inside the deepest child of the repeating element.

If you’ll wrap this abbreviation div#header>ul#navigation>li.item$*>a>span around this text…

About Us
Products
News
Blog
Contact Up

You’ll get the following result:

<div id="header">
<ul id="navigation">
<li class="item1"><a href=""><span>About Us</span></a></li>
<li class="item2"><a href=""><span>Products</span></a></li>
<li class="item3"><a href=""><span>News</span></a></li>
<li class="item4"><a href=""><span>Blog</span></a></li>
<li class="item5"><a href=""><span>Contact Up</span></a></li>
</ul>
</div>

You can see that Zen Coding is quite a powerful text-processing tool.

Key Bindings

  • Ctrl+,
    Expand Abbreviation
  • Ctrl+M
    Match Pair
  • Ctrl+H
    Wrap with Abbreviation
  • Shift+Ctrl+M
    Merge Lines
  • Ctrl+Shift+?
    Previous Edit Point
  • Ctrl+Shift+?
    Next Edit Point
  • Ctrl+Shift+?
    Go to Matching Pair

Online Demo

You’ve learned a lot about how Zen Coding works and how it can make your coding easier. Why not try it yourself now, right here? Because Zen Coding is written in pure JavaScript and ported to Python, it can even work inside the browser, which makes it a prime candidate for including in a CMS.

  • Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)

Supported Editors

Zen Coding doesn’t depend on any particular editor. It’s a stand-alone component that works with text only: it takes text, does something to it and then returns new text (or indexes, for tag matching). Zen Coding is written in JavaScript and Python, so it can run on virtually any platform out of the box. On Windows, you can run the JavaScript version of Windows Scripting Host. And modern Macs and Linux distributions are bundled with Python.

To make your editor support Zen Coding, you need to write a special plug-in that can transfer data between your editor and Zen Coding. The problem is that an editor may not have full Zen Coding support because of its plug-in system. For example, TextMate easily supports the “Expand Abbreviation” action by replacing the current line with the script output, but it can’t handle pair-tag matching because there’s no standard way to ask TextMate to select something.

Full Support

Partial Support (“Expand Abbreviation” Only)

Aptana is my primary development environment, and it uses a JavaScript version of Zen Coding. It also contains many more tools that I use for routine work. Every new version of Zen Coding will be available for Aptana first, then ported to Python and made available to other editors.

The Coda and Espresso plug-ins are powered by the excellent Text Editor Actions (TEA) platform, developed by Ian Beck. The original source code is available at GitHub, but I made my own fork to integrate Zen Coding’s features.

Conclusion

Many people who have tried Zen Coding have said that it has changed their way of creating Web pages. There’s still a lot of work to do, many editors to support and much documentation to write. Feel free to browse the existing documentation and source code to find answers to your questions. Hope you enjoy Zen Coding!

(al)

↑ Back to top

Sergey Chikuyonok is a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and time-savings on coding.

  1. 1

    Well done sir. This is pure awesome.

    -1
  2. 2

    Excuse me but I haven’t seen something new in ZC. As my friend said above, auto complementation softwares had already released.

    -2
  3. 3

    WOW! This is just awesome and revolutionary. Just added to my favorites. Will definitely read it more in depth later today.

    3
  4. 4

    looks promising
    thanks for yr hard work guys

    0
  5. 5

    would be nice if it had some sort of group support like

    html:xt>div#wrapper>[div#header>ul#navigation>li*5>a, div#content>p*4, div#footer>p#copyright]

    expected output http://pastie.org/709059

    0
  6. 6

    Zen Coding is really nice! I use it for Coda and it is fast fast fast.

    0
  7. 7

    Looks really good, I’ll try with Aptana.

    0
  8. 8

    looking good, got to try it out.. thanks SM

    0
  9. 9

    This is exactly how I’ve been trying to work for years… (I was typing CSS while I was doing HTML, doing!)

    Awesome demo and I’m definetly going to try it out! (Textmate)

    0
  10. 10

    It sounds a bit confusing for me.

    -1
  11. 11

    When programming, the actual time spent typing should be trivial when compared to any other task. I think tools like this just add complexity to a nonexistent problem.

    -4
  12. 12

    Thanks, will definitely try it!
    One very newbie question: how do you install this (using Coda & Espresso)?

    0
  13. 13

    HOT! HOT! HOT!

    0
  14. 14

    I’ll say after a week if this will reduce my coding time. Happy testing!

    0
  15. 15
  16. 16

    In Russia code writes you!

    5
  17. 17

    Make a Vim script out of this and I’ll build you an altar to pray everyday for the SM gods!

    0
  18. 18

    kicking asses!!!!

    0
  19. 19

    Darn, I had submitting this article in mind last week, yours however is more detailed.

    0
  20. 20

    interesting programming problem to solve, but with respect I don’t honestly see the point. HTML is pretty straightforward to write with modern editors like Coda, which include auto-completion, custom snippets and tag closing. You’ve basically created a markup language for a markup language.

    1
  21. 21

    Perhaps it’s just me, but this logic seems a totally backwards approach to modern HTML markup. Not only is it–in my opinion–practically unreadible to develop, you lose the semantic process of HTML to begin with (meaning, starting with headers and paragraphs and then adding more meta data semantics, divs for layouts, etc). How do you go about including semantic meaning such as RDFa and Microformats without everything turning it a huge, sloppy mess to read? (Nevermind the whole dynamic DOM aspect to your page.)
    I have never understood the need for these sorts of creations… It seems to take more time to learn these new “techniques” than to just learn how to markup a page semantically and properly from the start.
    HTML has always been and will always be a simple set of markup elements for the reason of ease. It is easy and this just obfuscates things.

    Akiva Levy, http://sixthirteendesign.com

    -3
  22. 22

    How to install it into Aptana 2?!? I going to install it for 4 hours and done nothing…

    0
  23. 23

    I agree with simon r jones

    I will stick with the old way of doing it by hand.

    0
  24. 24

    And Chris Done has written a version for Emacs, see here:

    http://www.emacswiki.org/emacs/ZenCoding

    I think he is trying to combine that with yasnippet expansion at the moment.

    0
  25. 25

    Hey folks,
    There’s a tool out there called Sparkup that does a similar thing, but adds more (specifically, more shortcuts, whitespace support, text and more useful selectors). :) You can see a demo of it here http://www.youtube.com/watch?v=Jw3jipcenKc — it shows some new selectors that aren’t in Zen.

    And it has support for VIM! :)

    Here: http://github.com/rstacruz/sparkup

    0
  26. 26

    Zen coding looks nice! What is the music, is it Seba and Paradox? Awesome tune…

    0
  27. 27

    I’ll have to give this a go on Aptana. Not sure I’d want to stick with it full time for every project, but sounds great for punching out some quick header footer column layouts to match up with a pre-existing style sheet.

    0
  28. 28

    If you’re already comfortable with CSS selectors (and you probably should be) this can be a great way to get past the boring part of your page development and get you to interesting stuff.

    If you can think html:xs>div#all>div#head+div#nav+div#body naturally, why shouldn’t you be able to write that and have it turn into code? I do think one level of parens would be nice, but not absolutely necessary (after all, just expand and put a new abbreviation in the appropriate spot.)

    This may actually keep me in Aptana a bit longer. (I was starting to move to Komodo because of the nicer abbreviations and macros.)

    0
  29. 29

    I have to agree with Simon R Jones, HTML is pretty straight forward, and most people will now have a pretty comprehensive snippet library, most modern editors have a snippet facility, so dont really see the point. bet I could drag a snippet out quicker than I could Zen code the same line of code.

    I chuck this in the same category as “object orientated” CSS, its just seems like wheel reinvention.

    -2
  30. 30

    Hello! I’m new coding.

    how do you install the plugin in aptana?

    0
  31. 31

    James Padolsey has written a similar script called Satisfy:
    http://github.com/jamespadolsey/satisfy

    It has a jQuery plugin API, as well.

    0
  32. 32
  33. 33

    Incredible, I will help me a lot. Thanks.

    0
  34. 34

    Okay, this is pretty cool. Definitely going to try it out on my next project.

    0
  35. 35

    Wow, I’m going to give this a shot in Coda!

    0
  36. 36

    Very cool demo. Unfortunately the textmate version does almost none of the cool stuff. Hopefully that can be fixed, though maybe it’ll require the next version of Textmate.

    Tempting to try using this instead of something like HAML, though I still hate wading through pages and pages of HTML when the meaning and syntax can be nice and condensed.

    0
  37. 37

    Which is greater?

    Time saved by using this?

    Or time spent learning it?

    That’s the essential question.

    0
  38. 38

    Just amazing; nothing to add.

    2
  39. 39

    What is the editor that is being used in the demo?

    0
  40. 40

    Don’t forget to rename the Espresso plugin file from .zip to .sugar :-)

    0
  41. 41

    well I’d rather keep using haml, this sounds good to quickly write html pages but a good template language actually makes them maintainable afterwards

    -1
  42. 42

    Very nice and elegant solution for webdesigners.

    For us, developers, I still prefer generating html code through classes, like GWT and having a webdesigner to write the css.

    0
  43. 43

    This looks handy and fun. Will try it out. Thanks for creating

    0
  44. 44

    Man, this is the future.

    0
  45. 45

    This is awesome work! Hope to see Notepad++ support soon!

    0
  46. 46

    Not sure why everyone is whining about the time taking to learn this vs. the time it saves. If you know css then you already know how to use it. If you don’t know css well enough then you shouldn’t be using it anyway. I personally think this is a very cool tool, just wish it worked better with textmate.

    2
  47. 47

    thanks for creating such software and it may help to web design but in my view it is pitty time consuming in working in interface plateform so u must not have power of 100% flexibilty. So, it may take more time in reality

    0
  48. 48

    Thanks for sharing this resource. Have to learn some new things to work this out for me :)

    0
  49. 49

    I’ve tested with Espresso. It’s really great.

    I learned how to use just watching the video. No time needs to be invested to learn how to use this thing. It feels like a smart snippet.

    Thank you. Will be using this daily now.

    :)

    1
  50. 50

    Previous Edit Point

    Next Edit Point

    Are these available in Coda plugin?

    Sergey: I’ll add it for the next version

    0
  51. 51

    People, stop whining! You don’t have to learn it. If you know CSS, you know Zen Coding. If you don’t know CSS, what are you doing here? How can you call yourself a web designer?

    Zen is well designed because it feels natural. No tab completion, not even TextMate’s default bundles are as fast as Zen. Typing something and hitting tab a million times is stressing on the pinky finger and the tab key. No snippet library is as fast as this. This is much better.

    When you develop carpal tunnel syndrome, you would have wished you didn’t dismiss this as a fad. Peace.

    2
  52. 52

    This looks very interesting. Definately going to give it a try. I’m all for speeding up development time.

    0
  53. 53

    I’ll try with Aptana for sure. This looks so good !

    0
  54. 54

    Respect for the effort, and I’m sure some people will love this and really increase their productivity. For me, however, it feels like learning yet another language. Plus, the time spent on markup when doing web development usually is only quite small. It is debugging, database queries, scripting and cross-browser CSS that cost 90% of the time.

    0
  55. 55

    Niels Schuddeboom

    November 22, 2009 2:44 am

    Looks cool! I should write some speech macros for that! :)

    0
  56. 56

    Looks useless for me. I use html to write the template for the CMS and the template file is very small compared to all other files (CSS, php, js etc). Content is entered via Web interface, by the people which does not use HTML markup. This thing adds complexity, and it is not for me.

    -1
  57. 57

    i simply love it! and it’s not important that it’s not the first plug-in that do that!… i really love it. great work! thankkkkk you

    0
  58. 58

    Christopher Anderton

    November 22, 2009 4:19 am

    I think the first time i saw this, was in GoLive (Adobe).

    0
  59. 59

    This is awesome! Simply great. A lot of the people commenting say this is useless as html is fast and easy to write anyway, but I must make a point there:

    I am mostly marking up designs: designing them in PS, writing the html and styling them. In my experience, even though html is no difficult nor time consuming task, when marking up a design which might take about 5h to complete, the html markup is often still responsible for 1/2h or more of that time, depending on the complexity.

    It’s something I don’t want to spend time with, but which has been to be done manually as visual editors leave you with very little control over the output. Writing good html is never the main task, but it is work that mostly has to be done before you can start the “real work”, means writing css or programming anything.

    So this ability, to write the markup with CSS-like snippets is simply awesome: Even though it is not revolutionary, it simplifies the idea to the most usable possibility – and I’m pretty sure, it will save me at least 10% of my time working on one website. That might not be worth it when you work on a big project, or do mainly programming. But for producing markup for “everyday work”, simple websites which have to be marked up quickly, it is absolutely perfect!

    I just didn’t quite understand how it works with dreamweaver, theres a download for the extension, but I didn’t work out how to use it. Maybe I overlooked somehting?

    0
  60. 60

    Any chance to get this converted into a Komodo addon? That would rock!

    0
  61. 61

    nice idea, but totally not applicable in reality

    0
  62. 62

    If you’re using Ruby, then look into HAML/SASS. This is interesting, but haml is already very well implemented for this sort of thing.

    0
  63. 63

    Just tried it in Textmate, amazing!

    0
  64. 64

    I’ve been using AutoHotkeys to do this but this seems simple and I feel comfortable already with the syntax and I’ve only spent 15 mins on the site. Will give it a try. Nice work.

    0
  65. 65

    This post is really good

    0
  66. 66

    great…ck ck ck…online tools its a cool and effisien

    0
  67. 67

    This looks really useful.

    0
  68. 68

    Wow. All those editors but no love for Komodo? :(
    Sergey: Komodo is in our feature request list: http://code.google.com/p/zen-coding/issues/detail?id=24

    0
  69. 69

    This is a very nice tool. I’ve just done a quick test with Espresso and it works fine!

    However, it would be easier if the Espresso plugin already came compiled instead of one having to compile it.

    Nice work!

    Sergey: compiled sugar is available for downloading: http://github.com/sergeche/tea-for-espresso/downloads

    1
  70. 70

    Really nice! Can someone tell me what’s the music track in the video?
    Sergey: it’s Seba & Paradox — Move On

    0
  71. 71

    Kristaps Karlsons

    November 22, 2009 8:05 am

    Wow. Just installed it with Aptana, like 30mins ago, and it rocks hard. Dude… How could I live without this?

    0
  72. 72

    “Olle Kamellen!” — as we say here in Germany. Been around for several months already. However, nice article. Big ups!

    0
  73. 73

    Jean-Michel Mermet

    November 22, 2009 8:31 am

    Do you have a BBEdit version ???

    Thanks

    Sergey: No, but you can fill an issue: http://code.google.com/p/zen-coding/issues/list

    0
  74. 74

    That is amazing!

    0
  75. 75

    I installed this extension for dreamweaver but, i don’t know how it work, or what I have to do to make it work or use it in dreamweaver, if any one knew please help me. Thanks for sharing this great tips, it’usefull!

    0
  76. 76

    I would be also happy to see it on Notepad ++.

    However I just tried on DW cs4 (by Adobe Estension Manager cs4) and had nothing. How can I install it? :D

    Respect btw!

    0
  77. 77

    Да, это очень круто, и к тому же бесплатно

    0
  78. 78

    Vinícius Rodrigue

    November 22, 2009 11:13 am

    wow! powerful! +D

    0
  79. 79

    This is awesome!!!! I’m using it with TextMate. Would love to see full support eventually. :)

    Keep up the awesome work.

    0
  80. 80

    thank you verrymuch, that is amazing !

    0
  81. 81

    There are pros and cons depending on your paradigm for the moment. I tried Zen and realized it saved me lots of keystrokes with just div#content>h1+p. You can sort of think about what you want in Zen and then you have it to complete in a moment.

    Guess I like it more than not and will use it. Very slick.

    0
  82. 82

    In this article, it says that Espresso has full support, but the compiled sugar only supports Expand Abbreviation. Also, CTRL on the Mac is awkward. Maybe, Command + Option should be used.

    Sergey: looks like you’ve downloaded onecrayon’s sugar. Try this one: http://cloud.github.com/downloads/sergeche/tea-for-espresso/TEA_for_Espresso.sugar.zip

    0
  83. 83

    I would like to thank all those who featured on this site and definitely will come back to visit again

    0
  84. 84

    CSS and HTML is a simple art form, why complicate it? No seriously, what is the benefit? Time?

    0
  85. 85

    Nice article! Thanks for the information. I use the Dreamweaver CS3 or Komodo Editor, it’s a good editor for speedy coding.

    0
  86. 86

    How the hell you setup this for Aptana? There is no document or something to read on how to setup all?

    I just hate it because I dont know how to get it work…aaaa!!

    Sergey: please read comment #38

    0
  87. 87

    Amazing!!!

    0
  88. 88

    Im crying now…

    0
  89. 89

    Amazing post. wish it ahd support for dreamweaver

    0
  90. 90

    nice tutorial but little bit confusing for me
    thanks

    0
  91. 91

    This looks really great, any chance for a Notepad++ plug in? :)

    0
  92. 92

    Lovin’ it ;-) really fast, using it with APTANA the results are awesome, a true time savor but needs some more practices!

    0
  93. 93

    How to use Zen Coding for Dreamweaver:
    1. Install extension,
    2. Restart Dreamweaver,
    3. Use command in menu: Commands>Expand Abbreviation.

    0
  94. 94

    What is the advantage over just using Haml, which already has a huge installed base and support in just about every editor?

    0
  95. 95

    its really nice time saver. Dreamweaver extension is really useful.

    0
  96. 96

    Well, many people think it’s great and some other it’s useless… I’m in the middle, but what I really want to “comment” is that this kind of applications could be transformed into another one and also “could” generate new things… ahmmmmmm I was thinking… what if this will be applied in a “kind of” compression… or what if a browser could interpret this “code” and auto-generate the result and then render it… what if there was a program to do the reverse process for us!!

    Just my thoughts

    0
  97. 97

    How to install in Pspad ?

    0
  98. 98

    I have never worked with Zencart. But after reading this article. I find it easier now. Thanks.

    -1
  99. 99

    textexpander works for me, tho this looks like a handy tool. Davai Sergey

    0
  100. 100

    Anybody succeeded installing this for NetBeans, I have only found specs in russian :(.
    Anyway this looks awesome, it would save a lot of time when building fast html/css/js prototypes.

    Sergey: NetBeans doesn’t have support of Zen Coding yet, we’re just shipping snippets used in ZC for NetBeans

    0
  101. 101

    its a good idea, but I doubt many experienced developers will use it

    0
  102. 102

    yah really it’s a good idea.. but it’s depend on how they use it because some of it can’t use.

    0
  103. 103

    @zolotoy got it mostly right.
    How to use Zen Coding for Dreamweaver:
    1. Install extension,
    2. Restart Dreamweaver,
    3. Use command in menu: Commands>Expand Abbreviation.

    How to use Zen Coding for Dreamweaver using only the keyboard:
    To create shortcut to ctrl + ,
    1. Edit > Keyboard Shortcuts
    2. Duplicate the current set of keyboard shortcuts (the first mini-icon on the left at the very top of dialog box)
    3. Expand “Commands”
    4. Scroll down to Expand Abbreviation
    5. In the “Press Key” line press the following keys on the keyboard ‘ctrl’ ‘,’.
    6. Click ‘Change’
    7. Click OK.
    8. Write your zen code as described above – to expand it press ‘ctrl + ,’ and watch the magic happen!

    P.S. You can use any keyboard combination you like. The above example shows you how to use the common ‘ctrl + ,’ keyboard shortcut.

    0
  104. 104

    Incredibly useful! Like javascript, is the time of html coding to evolve, turning our coders life better. Thank you for share.

    0
  105. 105

    I adapted the code to UltraEdit javascript engine. I posted a version on the uedit forums at http://www.ultraedit.com/forums/viewtopic.php?f=52&t=8819

    to use it, copy the code and save it in a .js file, and load it in ultraedit in the scripts menu.

    Hope it helps! ^^)

    0
  106. 106

    Espresso Users…

    Any ideas how to specify cursor postiton in espresso snippets?

    0
  107. 107

    This is brilliant!

    0
  108. 108

    Excellent stuff but whenever I try to expand the abbreviation (in Coda) of the first example div#content>h1+p, the p expands to padding:;

    Any ideas?

    0
  109. 109

    Philipp Hinrichsen

    November 23, 2009 5:14 am

    Okay i am totaly amazed by Zen coding played the whole morning with it i am not getting tired of it. So i’ve got a short question. I am using Aptana Studio and I added a my_zen_settings.js file to the folder and added the following code:

    zenExtend(zen_settings.html.snippets, {
    ‘p:lipsum’: ‘Lorem ipsum …’,
    });

    This should basicly add a p tag with lorem ipsum text in it. But eventualy it doesn’t work for. but if i add that one in the zen_settings.js it works perfectly. But for later updates i wanted to have them in a diffenrent file. I took eventualy the the filename which is already included in the Expand Abbreviation.js. I don’t know where it went wrong.

    What i am also missing as previous comments said is the grouping of elements this would come handy in building the first markup this could then be in one line.
    html:xt>div#head+(div#container>(div#sidebar>ul#nav>li.menuitem*5>ul.submenu>li.submenuitem*5)+div#content)+div#foot

    This is just one example it isn’t perfect but it shows that it would be so perfect to add everything needed just in one line of code.

    Thanks for your effort it saves a lot of time for everyone who has to write a lot of markup. If i could help I would do it.

    You’re using old-style (v0.3) extension mechanism. The new one is much simpler:

    var my_zen_settings = {
    	'html': {
    		'p:lipsum': 'Lorem ipsum ...'
    	}
    }
    
    0
  110. 110

    Adding to the Notepad++ plugin request…. ;)

    0
  111. 111

    This is how most of us should be coding by now anyway, right?

    0
  112. 112

    Yep, I’ve just downloaded and tried it but p is still expanding to padding.

    After unzipping the download, I noticed the date modified is showing 3 November not 23.

    0
  113. 113

    notepad++ plugin :(

    0
  114. 114

    I have spent 30 mins downloading/installing Aptana, then trying to get ZC installed but with no joy.

    Can somone write a small tutorial as how to get this damn thing working in aptana? I have tried what comment #38 said, and also checked the aptana documentation which is just too heavy… i WOULD use this tool allot, and would recommend it to friends etc.. if i could get it working.

    You need to make it idiot proof to instal and get using it, because right now, there are loads of people asking “how the hell do you get it working with Aptana??”

    0
  115. 115

    Sounds like better placement in the toolchain than the JavaScript HTML Element creator that used this same idea released in July 2007.

    http://www.zachleat.com/web/2007/07/07/domdom-easy-dom-element-creation/

    0
  116. 116

    I disagree with the criticisms that this plugin
    (1) adds unnecessary complexity,
    (2) will lead developers to ignore semantic principles,
    (3) introduces spaghettism and
    (4) requires that one learn a new language.

    (1) In what way does it add complexity? In terms of output, you’re getting nothing more than what you would have coded by hand anyway. *You,* as the developer, determine the complexity of your HTML. ZC has no “norms” or “principles” to learn that intrude on existing best practice in HTML. It’s just a shortcut to syntax combination; concatenations on *your* dime.

    (2) Indeed, it is a proto-description language (a mark-up language for a mark-up language, or something more or less close to this). But to call it a mark-up language in any technical or substantial sense would be erroneous commentary; it’s really just hyperbolic. To be a full description language, the shortcuts would have to have meaning in their own right. However, the plugin author has made it clear that ZC purpose is “not to create a new programming language to make you [think about how to write abbreviation].” When you write *with* ZC, not *in* ZC, you are still *thinking* in terms of HTML. One is building an image before one’s mind as to what, say, the structure of the document will ultimately be. ZC helps you get to that conclusion faster. (Why am I arguing for *code snippets*? In what way does any criticism laid here not also apply to mere use of code snippets?)

    If you want to call it a proto-descriptive language, that’s fine. But it’s really just a “post-it note” language. You’re referring to existing HTML syntax only. ZC introduces no constraint on validity. If you want to make invalid mark-up, you can do this with ZC as well. But there’s no such thing as ZC invalidity. All you can do in this vein is fail on syntactic operation. Mark-up languages have validity and semantics. ZC leans on HTML’s validity, and it has no semantics.

    (3) This is absurd. *You,* as the developer, introduce the combinatorial possibilities that ZC makes more easily printable to the screen. There’s only as much spaghetti as *your* competence, prowess and grace will allow.

    (4) Basic arithmetic? CSS? CSS-like syntax is exploded into HTML syntax. Where is the “new language”? And even then, developers are expected to pick up no more than 5 “new to HTML” principles from CSS. Principles that are conceptually ingrained, or at least should be, already (after a sufficient understanding of CSS).

    But I do agree: Grouping makes sense. Parent-child relationships presuppose the possibilities of multiple children to one parent. Without this feature, ZC incurs diminished conceptual integrity. It *feels* wrong, on many occasions, because I have a picture of my desired mark-up before my mind, and without grouping, I am presented an obstacle. Thus, I have to split my ZC string into parts. It’s less than irritating, I’ll admit, but I still think the conceptual argument laid out above has merit. ZC at present does not seem conceptually, or theoretically, pure.

    Also, the arguments about RDFa hold no water. RDF and RDF-like languages have their own implementation problems. Once those are sorted out, ZC may likely increase productivity and speed. RDF is time-consuming. ZC saves time by mapping mark-up possibilities to “dynamic post-it notes”, etc etc.

    1
  117. 117

    I really think it is a smooth concept and idea. From the other comments it seems like there is a lot of problem with implementation right now.

    0
  118. 118

    This seems pretty sweet so far. I’m having a couple issues in Espresso, though. For some reason the Previous Edit Point and Next Edit Point commands aren’t working. Also, ctrl+h keeps launching a safari window with a google search for “site:http://htmlhelp.com/reference/html40/“.

    0
  119. 119

    I downloaded the tea for coda plugin however it appears to be missing some features such as the match pairing and wrapping abbreviation, unless its just me…

    0
  120. 120

    This is sweet. I am playing with it in Aptana and loving it! Just wish I could use Coda!

    0
  121. 121

    Notepad++ for the win!

    0
  122. 122

    So… why did you build it for Aptana rather than just Eclipse? Were there plugins that were needed that are part of Aptana?

    0
  123. 123

    AWESOME!, been using some of this on TextMate for quite a while… I was issued a PC laptop not long ago and had to resort back to Notepad++… a shame the plugins are not available for it!.

    PLEASE!!! Notepad++ support will be VERY WELCOME!

    0
  124. 124

    NOTEPAD++ support please! ill pay you for it :)

    0
  125. 125

    Awesome idea, but I guess you need some time to get used to write like this. The best part is that if you’re not a CSS pro yet, after writing HTML this way you will be one for sure!

    0
  126. 126

    This isn’t a replacement for knowing HTML, obviously, but I think it’s simple and quick enough that it beats hand coding a full template.

    Playing with the demo…only thing I think it needs is an abbreviate command. I would type my shorthand, expand it, and then want to re-shrink it. I just had to use the undo button but a shortcut would be nice.

    If I didn’t already know HTML and CSS really well, this would be as confusing as hell. Definitely not for the learner.

    But pretty spiffy if you ask me.

    0
  127. 127

    +1 for a Notepad++ plugin :)

    0
  128. 128

    I love to see this feature inside Notepad++ soon

    0
  129. 129

    Hi. thank you very much for such great information. It’s a really very good way to write HTML/CSS Codes and save our lots of time.

    Thanks!
    PHP Web Developer India

    0
  130. 130

    Unfortunately I’m not doing much front-end development at the moment (bust wrapped doing back-end development for a huge project) but I have installed it in e text editor and used it and it is fantastic. I thought e’s built-in snippets were great; this makes it even greater! An almost-perfect code editor!

    However, I can’t shake the feeling that I’ve come across Zen Coding in the past? Has this been reference or hinted at in the past?

    0
  131. 131

    Coding, coding, coding…
    Please Smashing Magazine, don’t forget print designers, I’m really going to erase you from my bookmarks…

    0
  132. 132

    Carlos Eduardo de Souza

    November 24, 2009 3:35 am

    I love the idea, but I prefer using Coda Clips instead Zen Coding.

    With Coda Clips I can customize whatever I want, so I don’t need to memorize some shortcuts, since I make it my way.

    0
  133. 133

    Woot! But i need Eclipse support!

    0
  134. 134

    This is completely unnecessary as it does not fit into my own workflow for example. It also requires me having to learn new syntax and I would be getting that wrong on regular bases and then having to debug that instead of using my own compoenent framework to generate code + content with it in one line for most tasks that are shown within the video.

    Russians have too much spare time on their hands!? ;-)

    0
  135. 135

    I don’t know how do to add a plug-in on Aptana. The files of folder only exist .js. How include it?

    0
  136. 136

    That’s neat but sorry to say, there’s nothing new here. I did exactly this 11 years ago with STTS :-)
    See http://www.w3.org/TR/NOTE-STTS3

    0
  137. 137

    ZenCoding Komodo Extension

    found this add-on for Komodo. It’s not perfect yet, but it’s definitely better than nothing:)
    just HTML, no CSS

    http://cakealot.com/zencoding/

    thanks a lot to cakealot

    0
  138. 138

    Can’t wait till this gets implemented in quanta!

    0
  139. 139

    This looks great! Any ideas on how to install on Zend Studio for Eclipse 6.1?

    0
  140. 140

    Thanks for your hard work! I’m excited to give this a try. . .

    0
  141. 141

    thx. a solution which i was looking for… for 2 years. finally i have found it. =]

    0
  142. 142

    Development Team @ Cutpastecreate

    November 27, 2009 9:14 am

    Wow! This looks like an awesome way to speed up all that tedious html writing, I’m excited to see how this concept will progress. It seems that the more advanced websites get, the less the creators have to deal with the actual nuts and bolts of the site, the abstractions that are available for html, css, javascript et al are great, and it means that we have more time to focus on what we want the site to actually do, rather than taking time making it do it.

    0
  143. 143

    Awesome software! It looks so cozy.
    I wanna this plugin runs on Notepad++!

    0
  144. 144

    Just using this with Coda. Is there anyway to change the shortcut keys for the expander?

    0
  145. 145

    I installed this extension for dreamweaver but, i don’t know how it work, i can’t find “Expand Abbreviation”, if any one knew please help me. Thanks for sharing this great tips, it’usefull!

    0
  146. 146

    Here is how you install it in any eclipse 3.5 even without aptana:
    (got it from this german site http://nerdpress.org/2009/11/23/zen-coding-mit-eclipse-pdt/)
    - Install Eclipse Dash inside eclipse from this update site: http://download.eclipse.org/technology/dash/update/
    - create folder “scripts” inside your project and put the aptana zencoding files in it
    - restart eclipse
    - juggle with the keybindings (I changed M3+E to M1+E in “Expand Abbreviation.js”)
    - et voila zencoding in eclipse :)

    0
  147. 147

    I am incredibly excited about this. Very cool stuff!

    0
  148. 148

    waiting for notepad++

    0
  149. 149

    Does InType supported?

    0
  150. 150

    The Zeus for Windows editor now also supports Zen Coding: http://www.zeusedit.com/forum/viewtopic.php?t=2876

    0
  151. 151

    Christian Seifert

    December 26, 2009 3:58 am

    Hi guys,
    I use Zend Studio 5.x. Is it available for this version?

    0
  152. 152

    I use it with sublime, it’s awesome.
    Thanks Serguei !

    0
  153. 153

    This definitely looks like something that would make my life easier, once I got the hang of the syntax. After that shiny Comp. Sci degree, should be a cinch… maybe?

    0
  154. 154

    This is good, but I’d still prefer to type everything out by myself though, don’t like shortcuts. ;) This might just gradually make everybody forget their xhtml/css codings imo. =p

    -1
  155. 155

    This is really great. A time saver for sure! I’m using it with Aptana and I love it.

    0
  156. 156

    Hi,

    what editor did you use in the demo video?

    thanks

    0
  157. 157

    Janes Oosthuizen

    January 8, 2010 4:52 am

    This is truely remarkable! This is going to makes things easier!

    0
  158. 158

    Is anyone using this with Aptana 2.0? I can get the menu to show up, but all i get is errors saying zen coding settings are not defined. Also i think eclipse monkey has been put up on the shelf as it doesnt appear to be bundled with Aptana 2.0.

    0
  159. 159

    I can’t find the Coda version! Where is it?

    0
  160. 160

    Hi,
    This is a duplicate of Victor question, but yeah, what editor did you use for the demo video? I really like the navigator panel it has there. Thanks much!

    0
  161. 161
  162. 162

    great… i m using it with topstyle and its definitely fast-fast-fastttt

    0
  163. 163

    Wow, this is something that is a great time saver.

    To make ZenCoding go from great to incredible, grouping would be that addition. You could then pretty much write the whole basis to a semantic html document in one line.

    I really appreciate the time you have put into this and cant thank you enough.

    0
  164. 164

    is very very cool!!!
    i like it´s new idea.
    all more fast….

    0
  165. 165

    Seriously though, if you guys are sending html over the wire, YOU ARE DOING IT WRONG. :)
    Program the Dom and scale. (sorry lynx)

    0
  166. 166

    Zen Coding is proving helpful.

    Quick Questions:

    1. Can you make it possible to specify the value of an attribute for ‘expand abbreviations, without the need to highlight the abbreviation please?
    2. When using ‘Wrap with Abbreviation’ can you allow multiple uses of the selected text?

    Q1:
    Using Expand Abbreviation:
    a[title=something] gives ‘No result’
    a[title="something"] gives ‘No result’

    However, if I highlight the abbreviation (and expand the abbreviation) I get the following:
    a[title=something] gives

    a[title="something"] gives

    I think that you should be able to specify the value of the attribute (e.g [rel="nofollow"] ), without needing to highlight the text.

    Using the Wrap with abbreviation:
    li*>a[rel="nofollow"] gives…

    home
    about
    portfolio
    contact

    So, the value of the attributes can be set this way, which I like.

    Q2:
    Feature Request: Can you make it work so that you can use the selected text more than once:

    ${selected}

    i.e. change the ${selected} to the selected text for each entry.

    about

    As multiple *’s don’t work, it difficult to suggest a syntax, so the closest I can produce at present is:
    li.nav-*>a[href=*.html]

    Thanks

    Darroch

    0
  167. 167

    Zen Coding is proving rather helpful.
    Quick Questions:
    1. Can you make it possible to specify the value of an attribute for ‘expand abbreviations, without the need to highlight the abbreviation please?
    2. When using ‘Wrap with Abbreviation’ can you allow multiple uses of the selected text?

    Q1:
    Using Expand Abbreviation:
    a[title=something] gives ‘No result’
    a[title="something"] gives ‘No result’

    However, if I highlight the abbreviation (and expand the abbreviation) I get the following:
    a[title=something] gives

    a[title="something"] gives

    I think that you should be able to specify the value of the attribute (e.g [rel="nofollow"] ), without needing to highlight the text.

    Using the Wrap with abbreviation:
    li*>a[rel="nofollow"] gives…

    home
    about
    portfolio
    contact

    So, the value of the attributes can be set this way, which I like.

    Q2:
    Feature Request: Can you make it work so that you can use the selected text more than once:

    ${selected}

    i.e.

    about

    As multiple *’s don’t work, it difficult to suggest a syntax, so the closest I can produce is: li.nav-*>a[href=*.html]

    Thanks

    Darroch

    0
  168. 168

    Zen Coding is proving rather helpful.
    Quick Questions:
    1. Can you make it possible to specify the value of an attribute for ‘expand abbreviations’, without the need to highlight the abbreviation please?
    2. When using ‘Wrap with Abbreviation’ can you allow multiple uses of the selected text?

    Q1: Using Expand Abbreviation:
    a[title=something] gives ‘No result’ while a[title="something"] also gives ‘No result’.
    However, if I highlight the abbreviation (and expand abbreviations) I get the following:
    a[title=something] (or a[title="something"]) gives an a tag with attributes (href=”" title=”something”).
    I think that you should be able to specify the value of the attribute (e.g [rel="nofollow"] ), without needing to highlight the text.

    Using the Wrap with abbreviation:
    li*>a[rel="nofollow"] gives…
    tags: li – a (href=”" rel=”nofollow”) wrapped around the highlighted text. home
    So, the value of the attributes can be set this way, which I like.

    Q2:
    Feature Request: Can you make Zen Coding work so that you can use the selected text in more than once place within the highlighted text:
    1. for part of a class/id name (class=”nav-highlightedtext”)
    2. for a value of an attribute [href="highlightedtext.html"]
    As multiple *’s don’t work, it difficult to suggest a syntax, so the closest I can produce is: li.nav-*>a[href=*.html]
    Thanks
    Darroch

    @moderator – can you remove my previous posts? Thanks

    0
  169. 169

    A revolution…totally awesome

    Peace love…respect

    0
  170. 170

    For any Gedit users, I’ve been continuing development and adding features to the above Gedit plugin at http://github.com/mikecrittenden/zen-coding-gedit

    0
  171. 171

    tea-for-coda plugin isn’t working for me :(
    I’m on Coda 1.6.10 (latest version) and when I double click to install the plugin it all seems fine but the plugin menu isn’t showing up. I’ve tried this on a couple of machines with no joy.
    I downloaded the older zenCoding plugin http://zen-coding.googlecode.com/files/Zen.Coding-Coda.v0.3-UB.zip and this works fine but TEA just wont play

    any ideas would be most appreciated

    UPDATE: Scratch all that, I eventually got it to load by clearing out everything from the plugins folder, restarting the machine and then loading the plugin again. I think it probably works if you just quit Coda the install the plugin

    0
  172. 172

    zen coding for notepad++ is now available!
    get it here: http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Notepad%2B%2B.v0.6.zip

    Many thanks to all who made this possible.
    Kind regards, mtness

    1
  173. 173

    This is so great, just wish there was more documentation. Once i get used to the syntax i can see how this could be super fast, just an annoying learning curve :-s

    0
  174. 174

    I risk to seem the layman, but nevertheless I will ask, whence it and who in general has written?

    0
  175. 175

    whoever here is saying that they don’t understand why this is useful is a complete noob. coding good. typing bad.

    0
  176. 176

    I am amazed how intuitive the syntax is for this tool… You really did a great job on that.

    It took me longer to get it running in Zend Studio and OSX (change to using M4 if you have issues) than it did to learn how to do some relatively complex html generation. And I really did not watch the video or read much of the docs… just some of the examples, and boom… away we go.

    Thanks, this is a keeper in the toolbox.

    0
  177. 177

    While this may seem useless, it’s still a logical beauty.

    Not that I’ll be using this one, but things like this, evolving from one to another, grow one day into a nice helper in an IDE.

    So this grandpa will probably meet his grandson soon enough, and this grandson will be a finite idea.

    Thank you for causing progress.

    0
  178. 178

    Wow, I am amazed at this. I will definitely use it, I am sure it will really help. Thanks a lot :D

    0
  179. 179

    Michael Persson

    May 12, 2010 2:54 am

    Definitely something to speed up the work with, i will try this with Aptana…

    Thanks a lot

    0
  180. 180

    Very nice tool! Awesome.

    0
  181. 181

    Hope one day we’ll get a new version of textmate that can offer full support!

    0
  182. 182

    BTW: great article!

    0
  183. 183

    just awesome.. way to code.. wish i knew it long before…

    0
  184. 184

    The Textmate bundle does actually offer support for the other functions. You may, for instance, need to change the key bindings (some of them are OS X specific) but cmd+d does the pair-tag selections for me.

    This is a pretty sweet tool.

    Also, if you are a rubyist, you may want to check out Frank (sudo gem install frank) – it let’s you do similar static build magic, and even gives you lorem content (images, text, etc).

    0
  185. 185

    This is awesome!! Pretty Cool

    0
  186. 186

    Cool !!!

    This should be a Code Lobster plug-in =(

    0
  187. 187

    Cool coding for html but where is the info on css code using zen coding. please let me know.

    0
  188. 188

    HTML/CSS/JavaScript aren’t meant to be coded by machines. You need a smarter race for that.

    0
  189. 189

    gracias utilisimo esta en mis top 5

    0
  190. 190

    How to Key Bindings with Zen Coding for Notepad++ ?

    0
  191. 191

    Brand new plugin for NetBeans! Full support to Expand Abbreviation!
    http://github.com/lorenzos/ZenCodingNetBeansPlugin#readme

    0
  192. 192

    Thank you very much for sharing this indispensable tool. What a pleasure to write html now !!!

    0
  193. 193

    I try this week end to create new abbreviations and snippets in the Zend codding.js file. It work very well. After that I try to add no xml outup. For example : div>p>php where the php abbreviation is ‘php’: ‘<?php ?>’. This doesnt work, I have output <php />.

    I would like to know if there is a way no have a no xml output ? May be you try it ? The idea it’s to you use zen coding for common html/php template or for jquery script. For example script>p.test>click give the script tag and $(‘p.test’).click(function(){ … }) , or p>echo give <p><?php echo ?><p/>.

    Thank you !!

    0
  194. 194

    VeryGood!
    非常好用啊,强烈推荐,顶!

    0
  195. 195

    Its great but i still love Emacs with yasnippet or auto-complete

    0
  196. 196

    I had two major changes in my lifespan, the first time I meet “Lucy in the sky with diamonds” and the first time I used zen coding, I really don’t know how to thank you !!!

    0
  197. 197

    I think some are missing the point of this. Zen Coding will never replace manual coding. It’s simply a helper. In the same way as you use copy and paste, you’ll only use Zen Coding when you need it. Who copies and pastes every line of HTML they write?

    Anyone who makes a lot of HTML templates with navbars, tables with product specifications and so on will find this immensely helpful.

    I’ve got it on Notepad++ and while I don’t use it all the time but when I do use it it’s a joy to be able to create a lot of HTML within a few seconds and the IDs and class names already in place.

    0
  198. 198

    Fantastic! I’m using it in Espresso for Mac Os X, great time saver.
    The music in the video is great.

    0
  199. 199

    Is {this is a test} the way to specify the innerhtml of an element? it works as shown below

    div#box>div.sub{Item $}*3

    0
  200. 200

    I simply can’t get Zen Coding to work in either Coda (1.7) or TextMate (1.5.10) (with Python 2.6) on OS X 10.4.11 – nothing happens in Coda, and TextMate throws this:

    Traceback (most recent call last):
    File “/Users/deveritt/Library/Application Support/TextMate/Pristine Copy/Bundles/Zen Coding.tmbundle/Support/expand_abbreviation.py”, line 7, in ?
    import zencoding
    File “/Users/deveritt/Library/Application Support/TextMate/Pristine Copy/Bundles/Zen Coding.tmbundle/Support/zencoding/__init__.py”, line 1, in ?
    import utils
    File “/Users/deveritt/Library/Application Support/TextMate/Pristine Copy/Bundles/Zen Coding.tmbundle/Support/zencoding/utils.py”, line 71
    return text[pos] if pos < len(text) else ''
    ^
    SyntaxError: invalid syntax

    I can't find any 'minimum system' information, and the various pages on the project (Google Code, the forked project on GitHub – 'report an issue' throws a 404!, and the MacRabbit page) have inconsistent info and links to deprecated versions. Finally (reading issues on Google Code) the TextMate bundle shortcut defaults clash with the existing HTML bundle, but to fix this you'd have to fork'n'fix, or edit them in TextMate. Installing TextMate bundles from the CL also fails, as there's nothing listed in the usual bundle repos. None of this facilitates 'ease of use' or 'swift installation', so – although I really wanted this in TextMate and Coda – it seems the will beyond Expresso is no longer there for the developer, who is now on the Expresso team.

    0
  201. 201

    deprecated.

    No support for HTML5 tags

    -1
  202. 202

    i LoOOOVe it!! its going to save me so much time :)

    0
  203. 203

    Zen code means as unobtrusive typing as possible. Zen coding brings you exactly that.

    It’s a typing tool not a coding tool. Code your way.

    Thanks for that Sergey
    - T -

    0
  204. 204

    This is a very very helpful tool. I wouldn’t use it for all my coding, but it’s very intuitive, I picked it up really fast, and for some things, this would save me tons of time. Time is very important to me, and that’s why this tool works.

    Thanks (Using Zen Coding on Notepad++)

    0
  205. 205

    A great tool. Too bad I discovered it now.

    @Thomas things are improving. Let me quote the developer from his post

    “It is certainly possible to develop support for HTML 5 include all the features of CSS 3, to realize an even greater number required daily patterns. And this is done, but in the second turn. First of all, I plan to seriously change the way a set of HTML-code and method of storage library of templates in the packages. And of course to improve the consistency and intuitiveness of abbreviations and shortcuts”

    So wait patiently and you will get the good news soon.

    Cheers

    0
  206. 206

    love it!! thanks!

    0
  207. 207

    naturally like your web-site however you have to test the spelling on quite a few of your posts. A number of them are rife with spelling issues and I find it very bothersome to tell the reality then again I will certainly come again again.

    0
  208. 208

    Is there any way to collapse (or undo expand) the code? or is it tool specific implementation?

    let’s say… it takes few trials to come to this final structure for wrapping with abbreviation : div#header>ul#navigation>li.times$*>a>span

    I can always do Ctr Z in notepad++, but it’s just one timer revert, anything more robust?

    0
  209. 209

    Thanks Sergey
    After started using zen coding, my html coding time is reduced by 50%.

    0
  210. 210

    Nice tool. I was wondering about adding snippets to it that zen can not find. Is this possible? Thanks.

    0
  211. 211

    Rather than learning another syntax, why not just use a code generator like Dreamweaver? I don’t have to memorize all this stuff, and still faster HTML. I don’t get it?

    0
  212. 212

    Awesome tool. Using on new project.

    Thanks for post this.

    0
  213. 213

    I agree with Peter!
    It would be nice if you could use the opposite bracket (<) for going up one level. So you could code the whole layout before expanding the abbreviation!

    0
  214. 214

    Very cool~
    Can zen-coding used in javascript document?

    0
  215. 215

    i have installed zen coding on sublime text 2…
    when i type ul>li it just expands to ul><li></li>
    Please help me out ?
    Thanx

    0
  216. 216

    BHaskar Chaudhary

    September 5, 2012 7:41 am

    Looks great but sadly no support for notepad++ – which i guess is the most widely used code editor.
    Can we expect it to be supported any time soon ?

    0
  217. 217

    awesome work
    it would be nice if support write inline style using abbrevations !

    0
  218. 218

    Also, this is the best method of writing XML as well.

    0
  219. 219

    Really awesome tool !!

    0
  220. 220

    Demo Links are not working its broken:

    0
  221. 221

    I agree, this looks like sheer awesomesauce.

    0
  222. 222

    Wouldn’t say revolutionary. Auto-completion and text expanders have been out there for years.

    TextExpander on Mac: http://www.smileonmymac.com/TextExpander/

    Texter on Windows: http://lifehacker.com/238306/lifehacker-code-texter-windows

    AutoKey on Linux: http://losingit.me.uk/2008/12/26/autokey-nifty-text-expander-for-linux

    -2
  223. 223

    this is really great effort but difficult to use difficult to handle but if you get practice more on this tool it would be great for html coders :)

    1
  224. 224

    Just double-click on Coda’s bundle or Espresso’s sugar

    0
  225. 225

    Most text expanders works with predefined set of snippets only. Zen Coding parses code snippet in real-time and produces desired output

    9
  226. 226

    Jeffrey Karbowski

    February 3, 2010 5:25 am

    Here are a couple of Texter bundles I whipped up based on Sergey’s awesomeness.

    Texter Bundle based on ZenCSS :
    http://texterbundles.googlecode.com/files/ZenCSS.texter

    and.

    Texter Bundle based on ZenHTML:
    http://texterbundles.googlecode.com/files/ZenHTML.texter

    0
  227. 227

    It’s a brilliant step forward. Many thanks to Sergey for putting effort into this.

    0
  228. 228

    Thanks Sergey – had downloaded the wrong files ;-P

    0
  229. 229

    Where did u find the Coda bundle? It’s not here http://code.google.com/p/zen-coding/downloads/list

    0
  230. 230

    I’m thinking about it, but I’m afraid it will add unneeded complexity to ZC. The whole idea of ZC is to quickly write code snippets using syntax familiar to any HTML-coder, not to create a new programming language to make you think about how to write abbreviation.

    1
  231. 231

    Another Zen-like package solves this problem. It’s called Sparkup (http://github.com/rstacruz/sparkup), but at the moment it only has support for Textmate. You can do something like:

    #header > .navigation < #area > .content + .sidebar < .copyright

    The reason I wrote it like this (well, I made Sparkup :) is that if it was done via grouping (with parantheses or brackets), you would have to go back, add open parentheses to your code, then move back forward to close it. Doing it with a < means you can write your markup ‘straightforward’ without back-tracking.

    Demo: http://www.youtube.com/watch?v=Jw3jipcenKc
    Download: http://github.com/rstacruz/sparkup

    0
  232. 232

    This from above.. html:xt>div#wrapper>[div#header>ul#navigation>li*5>a, div#content>p*4, div#footer>p#copyright]
    Would be GODLY
    There’s haml as well for another option. But that as a fast EASY to read option is bloody good.

    0
  233. 233

    Create a new folder named scripts or a monkey in any top-level project folder in your workspace and drop Zen Coding in it. This is how Aptana scripts are installed. More info: https://aptanastudio.tenderapp.com/faqs/scripting-with-eclipse-monkey/create-script

    2
  234. 234

    Dean Higginbotham

    November 21, 2009 1:05 pm

    I agree.

    -4
  235. 235

    I am with you on this too. I can code comfortably fast any way.
    We as designer/developers should all be developing our own Frameworks so that we can cut and paste our favourite codes on the fly.

    -3
  236. 236

    Agreed.

    We already have copy paste for repetitive stuff, and as soon as you start doing HTML that is not that repetitive, this abbreviation language will become really verbose.

    I spend most of my time scratching my head with database schemes and PHP routines, when I’m doing HTML it’s a break. I don’t want to have to think during that relaxation period.

    The only time this might be useful in my honest opinion is if your job is to create HTML code all day long. Even then, you probably would have some kind of templates set up.

    -4
  237. 237

    I agree, if u dont want 2 code look 4 another profession or become a graphic designer.

    -3
  238. 238

    Sergey Chikuyonok

    November 21, 2009 1:15 pm

    Bet I could write any arbitrary HTML code with ZC faster than you create snippet for it and drag it :)

    7
  239. 239
  240. 240

    Totalu Agree

    -7
  241. 241

    He is using Espresso.

    0
  242. 242

    It’s Espresso on OSX.

    0
  243. 243
  244. 244

    create a hundred divs in a row uniquely named in just Coda. Still easy? Zen solves that.

    1
  245. 245

    Personally, I don’t think the idea of grouping is any more confusing than the multiplication and numbering implementations. It doesn’t make sense to me that you can enter a parent>child relationship, but you cannot exit it.

    2
  246. 246

    This is interesting, but I agree with Rob and Andrew that grouping would really make a difference, and would not be at all confusing.

    Also, would be nice if $ incremented inside child elements of multiplied parents,
    e.g. if li#item$*2>a#child$ gave us a#child1 and a#child2.

    0
  247. 247

    i think grouping would make quite a lot of sense! e.g. div#wrapper>[div#header>img]+[div#body>h1+ul#my-list>li*5]+[div#footer>p]

    2
  248. 248

    How about a character to make a new sibling to the parent? like + adds a sibling maybe exit to the parent level via <

    div>ul>li<span

    would create

    <div>
    <ul>
    <li></li>
    </ul>
    <span></span>
    </div>

    and

    div>ul>li<<span

    <div>
    <ul>
    <li></li>
    </ul>
    </div>
    <span></span>

    0
  249. 249

    If you’re new coding, i recommend you to learn coding itself first.

    In my point of view, this will help anyone that already knows what to do and wishes to do it faster.

    1
  250. 250

    Once I’ve created the snippet I never have to type it again :-)

    Sorry Sergey I dont mean to dismiss your work its obvious that a lot of hard work has gone into developing your system and I appreciate that. but I just have not seen anything that will save me time over a comprehensive snippet library? I dont doubt that the learning curvre is very shallow and you could probably kick off using it with minimal tuition.

    I think its down to workflow, if you are writing a ton of code on the fly, then I appreciate that Zen would be worth the effort, for everyone else though I fail to see the time saving benefit, like I say a good snippet library, you can just drag the code to your document and a lot have shortcuts too, you cant beat that for speed.

    -4
  251. 251

    I would say that the time to learn Zen Coding is minimal (after you read this article you should be almost able to start coding that way). So the real question is whether or not it actually saves you any time when coding… I doubt that I’ll be able to code faster with Zen Coding than I code with a good Code-Editor, that I adjusted to my needs.

    Anyway, interesting approach! Hat off for all the work.

    0
  252. 252

    Great work , this will save me alot of time .

    and +1 for Komodo add-on

    0
  253. 253

    Step 1: Put Dreamweaver aside and never touch it again
    Step 2: Goto aptana.com/studio and fetch the latest version
    Step 3: Fetch and install the Zen Coding plugin for Aptana Studio
    Step 4: Feel the Zen and become one with your markup
    Step 5: Repeat from step 1 on

    0
  254. 254

    Use command in menu: Commands>Expand Abbreviation

    0
  255. 255

    I totally agree..

    0
  256. 256

    It’s actually just a way to speed up the writing of semantic code. Ofcourse, HTML is pretty straight forward by itself, but many coders will find themselves wasting time on actual typing instead of the logic behind the markup. I think this script does a proper job at streamlining this process for those who are interested. Actually, I find I can concentrate on logic and semantics better now I’m not feeling like a type writer or a copy/paster.

    5
  257. 257

    Yes, time!
    I think it’s very useful.

    0
  258. 258

    it saves EVEN MORE time.

    0
  259. 259

    I installed the one linked in the article. Now, I installed the one you just linked here. This one doesn’t work at all. It gets installed, but it responds to no keyboard shortcut commands. None of them.

    You don’t see Action > HTML > Expand Abbreviation item? Can you fill an issue about this problem? http://code.google.com/p/zen-coding/issues/list

    0
  260. 260

    hai Kamran,
    How to install in APTANA?

    0
  261. 261

    I have the same problem in Coda. P always expands to padding.

    0
  262. 262

    Sergey Chikuyonok

    November 23, 2009 4:34 am

    Please re-download Coda plugin from http://github.com/sergeche/tea-for-coda/downloads
    I’ve removed CSS inheritance so ‘p’ should work fine

    0
  263. 263

    Notepad++ and NetBeans =)

    0
  264. 264

    I’m having the same problem…Did you download the “TEA_for_Coda.codaplugin.zip” file, or use the “download button and download the “sergeche-tea-for-coda-2522cf0.zip” file? I think he probably updated the latter, but I don’t know how to install it as it’s not a plugin file recognized by Coda. Anyone know how we can install that version?

    0
  265. 265

    Alexander Makarov

    November 23, 2009 7:21 am

    There is limited NetBeans support.

    0
  266. 266

    Sergey Chikuyonok

    November 23, 2009 8:31 am

    Please drop me an email at serge.che@gmail.com
    I try to help you.

    0
  267. 267

    I agree with this too. When coding simple stuff like HTML, I always use copy paste solutions I keep in my HTML/CSS “library”‘, and just modify them.

    -4
  268. 268

    Honestly, guys who say that writing html/css is just copying/pasting snippets or templates should consider not writing any html/css and stick to php and databases.

    As a frontend webdeveloper/designer I have to deal with such thinking on regular basis and I’m fed up with html written by the backend devs, as it’s usually based on idea of divitis and classitis “because it’s quicker”.

    If you’re into databases and php, stick with that. And let the right people do the frontend job the right way with the right tools.

    Especially that if you consider HTML5 coming with even more tags or imagine complex layouts, then no snippets could be useful, you wanna be quick and flexible.

    12
  269. 269

    Ctrl + Z works fine as an undo-shortcut, even in the demo (Firefox 3.5).

    0
  270. 270

    1. Download Zen coding for Aptana: http://code.google.com/p/zen-coding/downloads/list?can=3&q=aptana
    2. Go to your Eclipse/Aptana project folder, create folder “monkey”
    3. Extract Zen coding.zip into projectfolder/monkey/
    4. (Re)Start Aptana (or rebuild workspace)

    That’s it.
    Full explanation: https://aptanastudio.tenderapp.com/faqs/scripting-with-eclipse-monkey/create-script

    I have been using this with Eclipse 3.5.1, Aptana 2 and PDT 2.2 now, I was very glad to see it even works inside blocks of php where you need to echo some html. Nice work!

    0
  271. 271

    hi chris,

    Thank you for reply but i do it that but i don’t know how to use

    can you understand me? ZC setup step by step

    0
  272. 272

    hi Zolotoy,

    Thank so much for setup zen coding in Dreamweaver.

    Can you tell me how to use in Dreamweaver?

    0
  273. 273

    And waste about 20 times more memory…

    1
  274. 274

    Why would you install Aptana and ZenCoding over and over again? There is no need for a loop statement here. Your coding is flawed.

    1
  275. 275

    An advantage is that you can use natural CSS syntax.

    0
  276. 276

    Thank you so much

    it’s working good can you tell me how to using CSS?

    0
  277. 277

    @Zoe

    Thank you for helping me use Zen Coding with Dreamweaver CS4 – anyone searching in Google like I did, use Zoe comments – explaining how to use the menus to custom shortcuts etc etc.. poor documentation.. need to post this on their wiki

    Excited to use it

    0
  278. 278

    ah, that makes a lot of sense! so > starts a child element, and < moves up one level?

    1
  279. 279

    Please Sergey!!! Implement a way to travel back up the parent!!! It would make this tool exponentially better!!!!!!!!! The way of flipping the > to < is a great idea and I think would be worth it, OR can someone else just branch off the code and do this….

    2
  280. 280

    vim support would be awesome

    0
  281. 281

    Awesome! :)

    It will be great, if there would be plugin for notepad++, yea… Please! :)

    0
  282. 282

    Ehhhhhhh you can STILL use normal css in HAML. So far this is a one trick pony. While I wish that pony ALSO created the css code at the same time.

    0
  283. 283

    me too. :)

    0
  284. 284
  285. 285

    Well, Dreamweaver and many other tools are completely unnecessary because (given sufficient time) you can hand-code HTML/CSS and develop stunningly beautiful and functional pages. If it doesn’t fit your workflow, that’s another matter over which you have complete control and choice.

    If it’s useful for even a few people, it’s useful! I can imagine a situation where a person very familiar with this technique might develop a prototype on the fly while talking with clients, imposing a structure on their ideas almost as quickly as they were spoken. That would be impressive and useful.

    @orsome: I’m pretty sure there’s an Aptana plug-in for Eclipse … ;)

    0
  286. 286

    Yeah, notepadd++ would be excellent.

    0
  287. 287

    It’s pretty straight forward I think: use ZC to make your snippet libraries then use your libraries to copy and paste.

    Save time both ways.

    GJ

    6
  288. 288

    Sergey – can you extend ZC to allow snippets to be pasted in from a folder in your project?

    e.g. div#nav>snip:my-tabs

    where ‘my-tabs’ is the name of the file in a known folder and all the code is read from the file and pasted into the document on expansion.

    …or something similar?

    0
  289. 289

    On CS4 —> Once the extension is installed,
    GO TO Commands->Zend Coding->Expand Abbreviation

    Or simply type press (Ctrl) + (,) the zen line.

    1
  290. 290

    Alas, Chris’s version is broken for emacs inside a terminal, and gets more broked with each version.

    0
  291. 291

    A more direct link to the Vim solution: https://github.com/mattn/zencoding-vim

    0
  292. 292

    Just try it! Believe me, you’ll change your mind and will re-phrase your comments.

    1
  293. 293
  294. 294

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top