Zen Coding and Emacs Buddha Coding
Discovered what's called “zen-coding”. Basically, it is a scheme for inserting HTML templates in text editors. For example, type div.beauty, press a hotkey, then it expands to:
<div class="beauty"></div>
ul#ref>li*3 expands to:
<ul id="ref"> <li></li> <li></li> <li></li> </ul>
This template system improves HTML coding efficiency. It is a template system based on abbrev expansion. (the latest tech geeking fashion term for this is “snippet”.) The abbreviations used to expand is based on CSS selectors. (CSS “selectors” is basically a syntax for css to match html/xml tags. [see CSS Tag Matching (Selector) Syntax]
The home page for this project that provides add-ons for several editors is at: http://code.google.com/p/zen-coding/. In particular, there's a emacs one at: http://www.emacswiki.org/emacs/ZenCoding, written by Chris Done.
The gist of the usefulness of “zen-coding” is that:
- Instead of pulling a menu or command to insert a tag, and prompting you for input of tag name and attributes, you simply type them out first in your editor's main window.
- A consistent, systematic syntax, for the abbreviation.
Emacs-Buddha-Coding
I've been using a similar method for inserting HTML tags and templates in
Emacs
since about 2006. I have a set of home-cooked commands in elisp that does it. For examples, when i type: div nav, then press a hotkey, it becomes:
<div class="nav"></div>
If i type p woot, then it becomes:
<p class="woot"></p>
If i type abc efg, then it becomes:
<abc class="efg"></abc>
If i type a single word instead of 2 words, then “div” tag is automatically assumed. For example, “xyz”, becomes:
<div class="xyz"></div>
If i press the hotkey with the cursor on the empty line, it inserts <p></p>.
If i paste a file path and press a different hotkey, it becomes a image tag, with width and height attributes, and alt attribute, all filled. For example, if the text i pasted is i/pre_ex_firefox.png, the result is:
<img src="i/pre_ex_firefox.png" alt="pre ex firefox" width="565" height="109">
If i paste a youtube URL, for example: [ http://www.youtube.com/watch?v=qaMcImrNnOQ ] , then press a hotkey, it becomes:
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/qaMcImrNnOQ" width="480" height="385"> <param name="movie" value="http://www.youtube.com/v/qaMcImrNnOQ"> </object>
(See: How To Embed Video With Valid Html)
If i type some phrase, for example: “Bertrand Russell”, selet the phrase, press another hotkey, it becomes a link to the Wikipedia article:
<a href="http://en.wikipedia.org/wiki/Bertrand_Russell">Bertrand Russell</a>
If i press another hotkey, lines turns into list. Another hotkey turns lines into HTML table. Another hotkey turns a URL into particularly formatted reference link for languages perl, PHP, elisp, python…
If i paste in some source code of perl, python, java… etc any language, and press a hotkey, it become syntax colored (wrapped with different span tags for different keywords.) For example, the page you are reading, with all HTML source code syntax colored, is done in emacs with my custom commands.
There are quite a lot others, all basically takes the current word, current line, current paragraph, or current text selection as input, and transform them into a link, tag, or other template. The 4 thousand HTML pages on my website are hand coded, in emacs, with many custom elisp functions gradually developed over the years. With my system, i can write structured document in HTML faster than any wiki sysetm or light weight markup, yet with more control and flexibility in the actual HTML, and the generated code are all Valid HTML with controlled formatting so it can be batch-text-processed later if needed. (the down side is, of course, the time spend to know elisp. Basically, it's a trade off with acquiring knowledge vs off-the-shelf generic system.)
You can see all these in my emacs init file. Most of it is covered in my Emacs Lisp Tutorial. See also: How To Define Templates In YASnippet .
I probably won't be using zen-code soon, because my custom system already does all sort of HTML templates that are particularly crafted for my needs. Though, the “zen-code” system has the advantage of a more coherent syntax, and one single hotkey for all expansion. Though, it can't turn paths to links or inline images, can't turn words into Wikipedia links, or words into Google search links, or youtube URL into embedded video links. It is a smarter system than most editor's tool that insert single dummy tags, but the system is not flexible enough for outputting dynamic results, such as date time stamp, or turn a image file path into a inline img tag with width and height values, etc.
For my emacs system to be useful to others, i'll need to put them together into a coherent package, with consistent hotkeys, a public website representation, full documentation, and probably a marketing jargon, such as “emacs-buddha-coding”. LOL. The abbrev expansion systax will need to be someting systematic and well known, so CSS Selectors in zen-coding is a good start, but am not sure how can it incorporate the feature where the output needs to contain dynamic info such as timestamp. Thinking about this… it's pretty clear that zen-coding is of limited use, because first of all, vast majority of web pages are not developed by manually coded HTML. Things have moved to wiki systems, website generating systems, document generating systems, blog sites, using light weight markup. These are useful for vast majority of people, say 99%, of those scientists, writers, engineers, and joe bloggers, who need to publish material thru the web, and doesn't require them to understand any html/css stuff. For programers and tech-savvy who need to code HTML, there are no shortage of template systems (aka snippets) that they can define and customize, in all sort of tools and editors, with result that is usually more powerful then zen-coding. In a sense, zen-coding in just one of customized template system.
With the above in mind, i think that there's relatively little market or wide utility for my emacs-buddha-coding.
The Name “Zen-Coding”
What is with the name? Zen? another new-age open source coding geeker's fashionable locution. Such silliness we had in the past… “defensive programing”, “eXtreme programing”, “design patterns”, “agile programing”, “unit testing”, etc. Silly jargons are particularly popular in the unix and perl community. Often these fashionable jargons are shams that do harm on the real educational needs of programers, that is mathematics. (see: Jargons of Software Industry.)
Though, most of these jargons also fulfill a communication need, a unique term to identify a particular practice. It is the choice of the term that is a problem. In severe cases, it is the catchiness, used for marketing purposes of sham that hides the true nature of the thing from being apparent. Once you choose a term that clearly convey what it means, many shams will no longer have much to sell, as if unclothed.
PS the name zen-coding is probably inspired by the widely popular CSS demo page called CSS Zen Garden (at www.csszengarden.com). The zen garden was created in 2003 when CSS2 started to have common support in web browsers. The naming of Zen probably came from westerner's ignorant adoration of Asian things, where the orientalness of Zen, Tao… is “cool”.