Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

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

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. [Content Care Dec/16/2016]

You may want to take a look at the following related posts:

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 Coding4, a set of tools for high-speed HTML and CSS coding. Originally proposed by Vadim Makeev5 (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 Link

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

Downloads (Full Support) Link

Downloads (Partial Support, “Expand Abbreviation” Only) Link

Now, let’s see how these tools work.

Expand Abbreviation Link

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 Link

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 Link

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 CSS15 and HTML abbreviations and snippets16. You may find that learning them increases your productivity with Zen Coding.

HTML Pair Matcher Link

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 Link

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 Link

  • 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 Link

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.

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

Supported Editors Link

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, TextMate18 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 Link

Partial Support (“Expand Abbreviation” Only) Link

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 Actions27 (TEA) platform, developed by Ian Beck28. The original source code is available at GitHub29, but I made my own fork30 to integrate Zen Coding’s features.

Conclusion Link

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 documentation31 and source code to find answers to your questions. Hope you enjoy Zen Coding!

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/03/goodbye-zen-coding-hello-emmet/
  2. 2 https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/
  3. 3 https://www.smashingmagazine.com/2014/02/responsive-design-frameworks-just-because-you-can-should-you/
  4. 4 http://code.google.com/p/zen-coding/
  5. 5 http://pepelsbey.net/2009/04/zen-coding-concept/
  6. 6 https://code.google.com/archive/p/zen-coding/
  7. 7 http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Aptana.v0.5.zip
  8. 8 http://github.com/sergeche/tea-for-coda/downloads
  9. 9 http://github.com/sergeche/tea-for-espresso/downloads
  10. 10 http://code.google.com/p/zen-coding/downloads/detail?name=Zen%20Coding%20for%20TextMate%20v0.3.1.zip
  11. 11 http://code.google.com/p/zen-coding/downloads/detail?name=TopStyle.Zen.Coding.1.0.zip
  12. 12 http://code.google.com/p/zen-coding/downloads/detail?name=Sublime.Zen.Coding.1.1.3.zip
  13. 13 http://www.kryogenix.org/days/2009/09/21/zen-coding-for-gedit
  14. 14 https://code.google.com/archive/p/zen-coding/
  15. 15 http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
  16. 16 http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
  17. 17 https://code.google.com/archive/p/zen-coding/
  18. 18 http://macromates.com/
  19. 19 http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Aptana.v0.5.zip
  20. 20 http://github.com/sergeche/tea-for-coda/downloads
  21. 21 http://github.com/sergeche/tea-for-espresso/downloads
  22. 22 http://code.google.com/p/zen-coding/downloads/detail?name=Zen%20Coding%20for%20TextMate%20v0.3.1.zip
  23. 23 http://code.google.com/p/zen-coding/downloads/detail?name=TopStyle.Zen.Coding.1.0.zip
  24. 24 http://code.google.com/p/zen-coding/downloads/detail?name=Sublime.Zen.Coding.1.1.3.zip
  25. 25 http://www.kryogenix.org/days/2009/09/21/zen-coding-for-gedit
  26. 26 https://code.google.com/archive/p/zen-coding/
  27. 27 http://onecrayon.com/tea/
  28. 28 http://beckism.com/
  29. 29 http://github.com/onecrayon
  30. 30 http://github.com/sergeche/
  31. 31 http://code.google.com/p/zen-coding/w/list

↑ Back to top Tweet itShare on Facebook

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

    Design Informer

    November 21, 2009 11:01 am

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

    4
  2. 2

    Well done sir. This is pure awesome.

    -1
  3. 3

    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

    -3
  4. 4

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

    -1
  5. 5

    looks promising
    thanks for yr hard work guys

    0
  6. 6

    I agree, this looks like sheer awesomesauce.

    0
  7. 7

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

    0
  8. 8

    Looks really good, I’ll try with Aptana.

    0
  9. 9

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

    0
  10. 10

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

    It sounds a bit confusing for me.

    -1
  12. 12

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

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

    0
  14. 14

    Sergey Chikuyonok

    November 21, 2009 11:46 am

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

    0
  15. 15

    Sergey Chikuyonok

    November 21, 2009 11:55 am

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

    9
  16. 16

    HOT! HOT! HOT!

    0
  17. 17

    Thanks Sergey – had downloaded the wrong files ;-P

    0
  18. 18

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

    0
  19. 19

    Sergey Chikuyonok

    November 21, 2009 12:06 pm

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

    In Russia code writes you!

    5
  21. 21

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

    0
  22. 22

    kicking asses!!!!

    0
  23. 23

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

    0
  24. 24

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

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

    0
  26. 26

    I agree with simon r jones

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

    0
  27. 27

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

    0
  28. 28

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

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

    Dean Higginbotham

    November 21, 2009 1:05 pm

    I agree.

    -4
  31. 31

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

    Hello! I’m new coding.

    how do you install the plugin in aptana?

    0
  33. 33

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

    Agree.

    -4
  35. 35

    This is LOL

    0
  36. 36

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

    Incredible, I will help me a lot. Thanks.

    0
  38. 38

    Andy Wilkinson

    November 21, 2009 2:55 pm

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

    0
  39. 39

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

    0
  40. 40

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

    Which is greater?

    Time saved by using this?

    Or time spent learning it?

    That’s the essential question.

    0
  42. 42

    Just amazing; nothing to add.

    2
  43. 43

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

    0
  44. 44

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

    0
  45. 45

    He is using Espresso.

    0
  46. 46

    It’s Espresso on OSX.

    0
  47. 47

    I concur

    1
  48. 48

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

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

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

    0
  51. 51

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

    Man, this is the future.

    0
  53. 53

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

    0
  54. 54

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

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

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

    0
  57. 57

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

    Previous Edit Point

    Next Edit Point

    Are these available in Coda plugin?

    Sergey: I’ll add it for the next version

    0
  59. 59

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

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

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

    0
  62. 62

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

    0
  63. 63

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

    Niels Schuddeboom

    November 22, 2009 2:44 am

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

    0
  65. 65

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

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

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

    Christopher Anderton

    November 22, 2009 4:19 am

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

    0
  69. 69

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

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

    0
  71. 71

    nice idea, but totally not applicable in reality

    0
  72. 72

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

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

    Just tried it in Textmate, amazing!

    0
  75. 75

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

    Totalu Agree

    -7
  77. 77

    This post is really good

    0
  78. 78

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

    0
  79. 79

    This looks really useful.

    0
  80. 80

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

    0
  81. 81

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

    Great work , this will save me alot of time .

    and +1 for Komodo add-on

    0
  83. 83

    Allan Greenspan

    November 22, 2009 8:16 am

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

    0
  84. 84

    That is amazing!

    0
  85. 85

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

    Allan Greenspan

    November 22, 2009 9:58 am

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

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

    Vinícius Rodrigue

    November 22, 2009 11:13 am

    wow! powerful! +D

    0
  89. 89

    Spencer Schoeben

    November 22, 2009 11:20 am

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

    Keep up the awesome work.

    0
  90. 90

    thank you verrymuch, that is amazing !

    0
  91. 91

    Clarke Isackson

    November 22, 2009 11:43 am

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

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

    0
  93. 93

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

    0
  94. 94

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

    0
  95. 95

    I totally agree..

    0
  96. 96

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

    0
  97. 97

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

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

    Amazing!!!

    0
  100. 100

    it saves EVEN MORE time.

    0
  101. 101

    Im crying now…

    0
  102. 102

    Amazing post. wish it ahd support for dreamweaver

    0
  103. 103

    nice tutorial but little bit confusing for me
    thanks

    0
  104. 104

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

    0
  105. 105

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

    0
  106. 106

    hai Kamran,
    How to install in APTANA?

    0
  107. 107

    Use command in menu: Commands>Expand Abbreviation

    0
  108. 108

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

    0
  109. 109

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

    0
  110. 110

    Praveen Vijayan

    November 22, 2009 11:25 pm

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

    0
  111. 111

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

    How to install in Pspad ?

    0
  113. 113

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

    -1
  114. 114

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

    0
  115. 115

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

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

    0
  117. 117

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

    0
  118. 118

    @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
  119. 119

    Maicon Sobczak

    November 23, 2009 2:51 am

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

    0
  120. 120

    Espresso Users…

    Any ideas how to specify cursor postiton in espresso snippets?

    0
  121. 121

    This is brilliant!

    0
  122. 122

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

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

    0
  124. 124

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

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

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

    0
  127. 127

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

    0
  128. 128

    Notepad++ and NetBeans =)

    0
  129. 129

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

    notepad++ plugin :(

    0
  131. 131

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

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

    Alexander Makarov

    November 23, 2009 7:21 am

    There is limited NetBeans support.

    0
  134. 134

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

    Ken Pendergast

    November 23, 2009 8:24 am

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

    Sergey Chikuyonok

    November 23, 2009 8:31 am

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

    0
  137. 137

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

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

    0
  139. 139

    Notepad++ for the win!

    0
  140. 140

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

    0
  141. 141

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

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

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

    0
  144. 144

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

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

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

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

    0
  148. 148

    +1 for a Notepad++ plugin :)

    0
  149. 149

    I love to see this feature inside Notepad++ soon

    0
  150. 150

    hi Zolotoy,

    Thank so much for setup zen coding in Dreamweaver.

    Can you tell me how to use in Dreamweaver?

    0
  151. 151

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

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

    0
  153. 153

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

    Woot! But i need Eclipse support!

    0
  155. 155

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

    And waste about 20 times more memory…

    1
  157. 157

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

    0
  158. 158

    An advantage is that you can use natural CSS syntax.

    0
  159. 159

    Thank you so much

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

    0
  160. 160

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

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

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

    1
  163. 163

    vim support would be awesome

    0
  164. 164

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

    -3
  165. 165

    Awesome! :)

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

    0
  166. 166

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

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

    Can’t wait till this gets implemented in quanta!

    0
  169. 169

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

    0
  170. 170

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

    0
  171. 171

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

    0
  172. 172

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

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

    0
  174. 174

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

    0
  175. 175

    me too. :)

    0
  176. 176

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

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

    I am incredibly excited about this. Very cool stuff!

    0
  179. 179

    waiting for notepad++

    0
  180. 180

    Does InType supported?

    0
  181. 181

    Yeah, notepadd++ would be excellent.

    0
  182. 182

    Christian Seifert

    December 26, 2009 3:58 am

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

    0
  183. 183

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

    0
  184. 184

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

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

    Martin Lenngren

    January 4, 2010 7:26 am

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

    0
  187. 187

    Hi,

    what editor did you use in the demo video?

    thanks

    0
  188. 188

    Janes Oosthuizen

    January 8, 2010 4:52 am

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

    0
  189. 189

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

    @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
  191. 191

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

    0
  192. 192

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

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

    0
  194. 194

    John Macpherson

    January 23, 2010 12:45 pm

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

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

    0
  196. 196

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

    0
  197. 197

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

    A revolution…totally awesome

    Peace love…respect

    0
  199. 199

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

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

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

    1
  201. 201

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

    0
  202. 202

    The New Black

    April 14, 2010 3:59 am

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

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

    0
  204. 204

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

    0
  205. 205

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

    1
  206. 206

    Bill Chmura

    May 3, 2010 8:48 pm

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

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

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

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

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

    0
  211. 211

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

    Very nice tool! Awesome.

    0
  213. 213

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

    0
  214. 214

    BTW: great article!

    0
  215. 215

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

    0
  216. 216

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

    Manu Parashar

    July 6, 2010 12:18 pm

    This is awesome!! Pretty Cool

    0
  218. 218

    Cool !!!

    This should be a Code Lobster plug-in =(

    0
  219. 219

    Hiren Mehta

    July 20, 2010 2:32 am

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

    0
  220. 220

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

    0
  221. 221

    gracias utilisimo esta en mis top 5

    0
  222. 222

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

    0
  223. 223

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

    0
  224. 224

    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.

    13
  225. 225

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

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

    0
  227. 227

    Loï Jérôme

    January 31, 2011 2:26 pm

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

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

    Doug Johnston

    March 30, 2011 9:42 am

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

    0
  230. 230

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

    0
  231. 231

    Bart Burkhardt

    April 20, 2011 12:58 am

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

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

    0
  233. 233

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

    Dave Everitt

    June 5, 2011 1:42 am

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

    deprecated.

    No support for HTML5 tags

    -1
  236. 236

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

    1
  237. 237

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

    0
  238. 238

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

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

    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

    1
  241. 241

    love it!! thanks!

    0
  242. 242

    Well said.

    1
  243. 243

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

    Porfirio Dorval

    November 7, 2011 12:02 pm

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

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

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

    0
  247. 247

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

    0
  248. 248

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

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

    Awesome tool. Using on new project.

    Thanks for post this.

    0
  251. 251

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

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

    0
  253. 253

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

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

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

    0
  256. 256

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

    0
  257. 257

    Really awesome tool !!

    0
  258. 258

    Demo Links are not working its broken:

    0

↑ Back to top