Zen coding quick to write HTML/CSS code implementation _ Experience Exchange

In this article, we'll show you a new way to quickly develop HTML and CSS using the syntax of the imitation CSS selector. It is developed by Sergey Chikuyonok.

How much time do you spend writing HTML code (including all tags, attributes, references, braces, etc.)? If your editor has code hints, it will be easier when you write, but even then you have to manually typing a lot of code.

In JavaScript, when we want to get a particular element on a page, we encounter the same problem, we have to write a lot of code, which becomes difficult to maintain and reuse. The JavaScript framework came into being, and they also introduced the CSS selector engine. Now, you can use a simple CSS expression to get the DOM element, which is pretty cool.

But what if you can generate code , not just with CSS selector layouts and positioning elements? For example, if you write this:

Copy Code code as follows:

Div#content>h1+p

... You can then see the output like this:

Copy Code code as follows:

<div id= "Content" >
<p></p>
</div>

The above effect can be Dreamweaver, extended download address Zen coding for Dreamweaver v.0.7 test Pass
Is it a little confusing? Today, I'm going to introduce you to Zen coding, a set of tools for fast HTML and CSS encoding. Originally introduced by Vadim Makeev in April 2009 (the article in Russian), I developed a few months from my humble (i.e. I) and finally reached a more mature state. The Zen coding consists of two core components: an abbreviation extender (abbreviated as a CSS-like selector) and context-sensitive HTML tag pairs. Take a look at this demo video to see what they can do for you.

Note: The original video is located in Vimeo, but to see if you need to turn the [harmony] wall first, the address is here: http://vimeo.com/7405114, the video above is I went from Vimeo up and down to the Youku, After uploading the quality has been greatly discounted, embarrassed. YouTube also has a video that is based on Aptana's demo, as well: Http://www.youtube.com/watch?v=ug84Ypwqfzk. PS: It seems that YouTube than Vimeo [harmony] wall easier, but how to turn the [harmony] wall is not discussed in this site.

If you would like to go to the detailed introduction and use guide, please take a look at the demo page and download your applicable plugins immediately:

Demo

• Demo (use Ctrl +, expand Abbreviations, need JavaScript support)
• Chinese version Demo

Download (full support)

• Aptana (cross platform);
• Coda, via Tea for Coda (MAC);
• Espresso, via Tea for Espresso (MAC);

Download (partial support, only "expand abbreviation")

• TextMate (only for Mac machines, Windows can use the E-text editor instead);
• TopStyle;
• Sublime Text;
• GEdit;
• Dreamweaver CS4
• Editarea online editor;
• Zen Coding Online Editor (Chinese version)

Now let's take a look at how these tools work.

Expand abbreviation

Expand the abbreviation feature to convert a CSS-like selector to XHTML code. The term "abbreviation" may be a little hard to understand. Why not just call it "CSS selector"? Well, the first reason is semantics: "selector" means to choose something, but here we actually generate something, a shorter substitution for writing a long code . Second, it simply uses a small subset of the real CSS selector syntax and adds some new operators.

Here is a list of supported properties and operators:

• E
  Element name (Div, p);
• E#id
  Use the elements of the ID (div#content, P#intro, Span#error);
• E.class
  Use the elements of the class (Div.header, P.error.critial). You can also use class and idid:div#content.column.width together;
• E>n
  Descendant elements (Div>p, Div#footer>p>span);
• E+n
  Sibling elements (h1+p, div#header+div#content+div#footer);
• E*n
  Element multiplication (ul#nav>li*5>a);
• E$*n
  Entry number (UL#NAV>LI.ITEM-$*5);

As you can see, you already know how to use Zen coding: just a simple imitation css selector (er, "abbreviation" sorry), just like this ...

Copy Code code as follows:

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

... The "expand abbreviation" behavior is then invoked.

Here are two new operators: element multiplication and entry number. For example, if you want to generate 5 <li> elements, you can simply write a bit of li*5. It will also override all descendant elements. If you want to write 4 <li> elements, each with a <a> tag, you can simply write as li*4>a, which generates the following HTML code:

Copy Code code as follows:

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

The last--the entry number is used when you want to mark the duplicate element with an index. Suppose you want to generate 3 <div> elements of class for Item1, Item2, and Item3. You can write this abbreviation, div.item$*3:

Copy Code code as follows:

<div class= "Item1" ></div>
<div class= "Item2" ></div>
<div class= "Item3" ></div>

Just add a dollar sign to any class or ID attribute you want the index to appear on, and you can have as many as you want. So, so ...

Copy Code code as follows:

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

will be converted into:

Copy Code code as follows:

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

Zen Coding How do you know when you should add a default attribute for the generated label or skip the Closing tab? There is a special file called Zen_settings.jsDescribes the output element. This is a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntax, such as HTML, XSL, CSS, and so on). The common language abbreviation definition looks like this:

Copy Code code as follows:

' HTML ': {' snippets ': {' cc:ie6 ': ' <!--[if LTE IE 6]>\n\t${child}|\n<![ Endif]--> ',
...
},
' Abbreviations ': {' a ': ' <a href= ', ' ></a> ', ' img ': ' ',
...
}
}

Element type

The Zen coding has two main element types:fragment (snippets) and abbreviation (abbreviations). fragments are random pieces of code, and abbreviations are label definitions. With fragments, you can write any code you want, it will also be printed in the format you write, but you must format it manually (using \ n and \ t to implement newline and indentation) and place the ${child} variable where you want to output the child elements, like this: Cc:ie6>style. If you do not use the ${child} variable, the child element will be exported to the back of the code fragment.

With the abbreviation, you must write a tag definition, and the syntax is very important. Typically, you must write a simple label with all the default attributes, such as: <a href= "" ></a>. When Zen coding is loaded, it parses a label to define a specific object that describes the label's name, attributes (including their order), and whether the label is empty. So if you write , you'll tell Zen that the label must be empty, and then the "extended abbreviation" behavior will use a specific rule for it before the output.

For snippets and abbreviations, you can add a pipe symbol that tells Zen coding where the cursor will be positioned when the abbreviation is expanded. By default, Zen coding places the cursor in the middle of an empty property's quotation mark and between the Start and Close tabs.

Example

So here's an explanation of what happens when you write an abbreviation and call the "expand abbreviation" action. First, it separates a complete abbreviation into separate elements: so that div>a will be divided into div and a elements, and of course it will maintain their relationship. Then, each element, the parser first looks in the code snippet and then finds the definition in the abbreviation. If it is not found, the element's name is used as the new label, and the ID and class defined in the abbreviation are added to it. For example, if you write mytag#example, the parser cannot find the MYTAG definition in fragments or abbreviations, it will output <mytag id= "Example" ><mytag>.

We made a lot of default CSS and HTML abbreviations and fragments. You will find that learning to use Zen coding can increase your productivity.

HTML Tag pair matching device

Another very common task for HTML coders is to look for the tag pairs of an element. For example, you want to select the entire <div id= "content" > Label and move it somewhere else or delete it. Or maybe you're looking for a close tag and want to know where it belongs to the start tag.

Unfortunately, many modern development tools are lacking in this functionality. Then I decided to write a label on my own to the match as part of the Zen coding. But it is still in beta and there are some problems, but it can work very well and quickly. Instead of browsing through the entire document (like the usual HTML tag on the match), it looks for the relevant tag from the current position of the cursor. This makes it very fast and context -free: It can even be used for this JavaScript snippet:

Copy Code code as follows:

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> ';

Use abbreviated parcels

This is really a cool feature that combines abbreviations and tags with the functionality of the matching device. How many of you have found that you need to add a package element to fix a browser bug? Or do you need to add a decoration, such as a background picture or a border to a block-level content? You must write the start tag, temporarily interrupt your code, find the relevant point and close the tag. This is where the "use of abbreviated parcels" can help you.

The feature is fairly simple: it requires you to enter an abbreviation and then perform the appropriate "expand abbreviation" Action and place the text you expect in the last element of your abbreviation. If you do not select any text, it will start the tag on the match and use the result. It also makes sense of where your cursor is: The contents of the tag or the beginning and closing tabs. Depending on its position, it will wrap the contents of the label or the label itself.

The abbreviation package introduces a specific abbreviation syntax for the wrapped individual line. Simply jump to the number following the multiplication operator, such as: Ul#nav>li*>a. When Zen coding discovers an undefined multiplier, it uses it as a repeating element : How many rows in your section, how many times it outputs, and places the contents of each row in the last child of the repeating element.

If you wrap this paragraph outside this text, the abbreviation Div#header>ul#navigation>li.item$*>a>span:

Copy Code code as follows:

About Us
Products
News
Blog
Contact up

You will get the following results:

Copy Code code as follows:

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

As you can see, Zen coding is a powerful text processing tool.

Shortcut keys

• CTRL +,
  Expand abbreviation
• Ctrl+m
  Matching pair
• Ctrl+h
  Use abbreviations to include
• Shift+ctrl+m
  Merging rows
• Ctrl+shift+?
  Last edit point
• Ctrl+shift+?
  Next edit point
• Ctrl+shift+?
  Location matching pair

These shortcuts can be customized.

Online Demo

You've learned a lot about how Zen coding works and how it makes your coding easier. Now why not try it on your own? Because Zen coding is developed and migrated to Python with pure JavaScript, it can even be used inside the browser, making it the first choice to introduce to CMS.

• Demo (use Ctrl +, expand Abbreviations, need JavaScript support)
• Chinese version Demo

Supported editors

Zen coding does not depend on a particular editor. It's an excellent component that handles only text: It gets text, does some processing, and puts back new text (or index, for tag matching). Zen coding is written by JavaScript and Python, so it can actually run on any platform. In Windows, you can run the JavaScript version, while the Mac and Linux branches can use the Python version.

If you want your editor to support Zen coding, you need to write a specific plugin that converts data between your editor and Zen coding. The problem is that an editor may not fully support Zen coding because of its own plug-in system. For example, TextMate supports the "expand abbreviation" feature by replacing the current line with script output, but it does not handle label matching because there is no standard way to request TextMate to select content.

Full support

• Aptana (cross platform);
• Coda, via Tea for Coda (MAC);
• Espresso, via Tea for Espresso (MAC);

Partial support (only "expand abbreviations")

• TextMate (only for Mac machines, Windows can use the E-text editor instead);
• TopStyle;
• Sublime Text;
• GEdit;
• Dreamweaver CS4
• Editarea online editor;
• Zen Coding Online Editor (Chinese version)

Aptana is my main development environment, and it uses a JavaScript version of Zen coding. It also contains a lot of other tools I use for my daily work, so any new Zen coding version will be available first for Aptana, then deployed to Python and compatible with other editors.

The coda and espresso plug-ins are supported by the outstanding text Editor Actions (tea) platform, developed by Ian Beck. The original source code was on the GitHub, but I made my own branch to integrate the Zen coding features.

Summarize

Many people who have tried Zen coding say it changes the way they write the page. Of course, there are a lot of things to do, and a lot of editors need to be supported and some documents to write. Please browse through the current documentation and source code to find the answer to your question. I hope you like Zen coding!.

Attached: Specific usage of Zen coding

Unfortunately, the original author of this article did not explain the specific use of Zen coding, God fly think it necessary to do the following brief explanation. Here, for example, Aptana/eclipse and Dreamweaver, other editor platform is not described, if you have questions can be in the comments with the front-end observation of netizens to communicate.

Aptana/eclipse

Because the Aptana itself is based on Eclipse, Zen coding is also supporting eclipse, just need a Eclipsemonkey plug-in support, Aptana has encapsulated this plugin, so if you use Aptana, The first step below can be skipped.

1. Install Eclipsemonkey:http://download.eclipse.org/technology/dash/update by updating the site (if you use Aptana, you can skip this step)
2. Create a top-level project in your current job, name it, say, zencoding
3. Create a Scripts folder in a newly created project
4. Unzip the downloaded Zip plug-in package to the folder. The project structure looks like this:

5. After installation, the Zen Coding related submenu will appear in the Script menu in the Aptana menu bar

Precautions:

• Aptana version of the official plug-in is based on the Mac, if you are using Windows, you need to manually change the shortcut keys (in each file header changes in the comment fragment)
• Official file code is a bit messy, modify the official JS, please pay attention to coding problems , improper modification will result in the loss of related functions;

DreamWeaver

The good news is that the Zen coding for Dreamweaver plug-in is now available, and the bad news is that the plug-in supports very few features and only expands the abbreviation feature. and the default shortcut key is invalid. You can only click from the Command menu. In addition, there is no test that the plug-in is supported only for CS4 versions. However, the better is, the author will be the source of the plugin also released, you can customize a Dreamweaver plug-in.

In fact, the official DW plugin in Windows is a bit of a bug, that is, there will be blank lines, I have simply fixed, recompile a package, in this machine test no problem, interested children's shoes can download try: HTTP://WWW.BOXCN.NET/SHARED/C71Z7X7SFE

PS: The official DW plugin has been updated, recommended to the official to download. New Plug-ins add more feature support. UPDATE @ 12-23-2009

Special Recommendation : enthusiastic students will be abbreviated to practice some, summed up a lot of good use cases, recommended that everyone go to study.

The original author introduces:

Sergey Chikuyonok, a Russian front-end development engineer and author, has a great passion for optimization: from pictures, JavaScript effects to workflows, and time-saving coding. Visit his homepage and his Twitter.

Original from: http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html