Thanks for coming to mah brown bag on Zen Coding. I’m going to quickly run thru how awesome zen coding is, how to start using it, and show you some live examples and talk about some pointers I’ve picked up up after using it for a few months.
So what is Zen Coding... It’s basically an abbreviation engine with cross-platform plugins for your text editor that allows you write HTML faster and make websites in half the time. It uses CSS-like syntax and expands it for you into HTML. I came across it hunting for TextMate plugins a few months ago. After reading about it, I typed “zen coding” into YouTube and was like “whoa”... I found that it was super easy to install, small file size, and very much an “alive” project that’s being actively maintained. It’s been around since 2009 – started solo by a Russian dude named Sergey Chikuyonokand has grown with community support mostly via porting to every editor and IDE out there.
Since the Zen Coding engine works directly with text and was written to be portable – the community ports and maintains the plugin for just about every text editor and IDE like: Eclipse, TextMate, Coda Espresso, Notepad ++ Dreamweaver ,Visual Studio, IntelliJ ,ViM, Emacs The keyboard shortcut to expand the snippets is different across text editors so you just check the wiki when you download it for how to use it with your editor and what shortcut key you use.
Once you install the plugin, to use it you just think of the HTML tree you want to create and represent it with CSS notation and expand that shorthand into HTML via the designated shortcut key. And Boom out pops HTML. I grabbed a few examples and presnippeted them into my TextMate so we’ll DO IT LIVE and jump into it... (Open TextMate: ~/Desktop/Zen-Coding-Examples/Zen-Examples-1.html -- touch on basics, tabbing)
(...returning from TextMate) So you can see the basic gist, from there you can do fancier stuff like multiplying elements for when you have a bunch of list items or... Use the adjacent selector syntax when a parent has more than one child The dollar sign is cool for when you have a classname or ID with numbers and it lets you enumerate them And When you want to specify the src attribute for an image, alt text, title you just use attribute syntax just like CSS. (back to TextMate to show these examples...) (Open TextMate: ~/Desktop/Zen-Coding-Examples/Zen-Examples-2.html )
With those basic tricks down...you can get even faster still with Zen Coding’s built-in scaffold. You can just type in a shorthand for the doctype you want and it generates a complete skeleton to start with. It supports most common doctypes. For some reason it defaults to “ru” in the meta info for language, but you can tweak it somewhere to be “en”. (Open TextMate: ~/Desktop/Zen-Coding-Examples/Zen-Examples-3.html )
Alternatively, you can specify your own doctype and use the individual tags to builds things out. (Open TextMate: ~/Desktop/Zen-Coding-Examples/Zen-Examples-4.html )
That’s about it. If you want there’s a nice online zen coding editor you can go try this stuff on. I’ll email this out so you can reference it and try Zen Coding if you’re into it. Any questions or anything? I keep trying to make myself learn this method, so feel free to ask anytime. Thanks for sitting thru my brown bag!
Zen Coding Overview
Zen Coding Get markup done faster.
What is Zen Coding? <ul><li>Zen coding is essentially an abbreviation engine and a set of cross-platform plugins for writing HTML faster. Code is written in CSS selector like syntax and expanded on-the-fly into full-blown HTML. </li></ul>Zen Code ...becomes... HTML! ( just by pressing ⌘ + E ) (The Zen Coding engine was invented by awesome random Russian guy Sergey Chikuyonok! and grows thanks to the open-source community.)
Does it work with...? Most all IDE’s and editors have a Zen Coding plugin nowadays. Check the Zen Coding wiki for your editor’s keyboard shortcuts and instructions.
How’s it work? <ul><li>The quickest way to understand it is to open an editor, type in some Zen Coding snippets or “abbreviations", and expand them via your editor’s designated shortcut key. </li></ul>Let’s open up a text editor and try out some live examples... Zen coding works via a plugin for your text editor triggered with a shortcut key after you type in a Zen Code snippet. It parses the CSS-like syntax and returns structured HTML.
Examples Some examples of Zen Coding’s sexiness: Use an asterisk to “multiply” the element li*3 -> <li></li> <li></li> <li></li> Use adjacent selector syntax for adjacent sibling tags div>h1.title+h2.sub <div> <h1 class=”title”></h1> <h2 class=”sub”></h2> </div> -> Use attribute syntax for href, src, alt tags, titles, etc img[src=" http://i.imgur.com/G1A50.jpg "] [alt="chzburger kitteh"] -> Use the dollar sign to count and append like 1,2,3,4. to classnames, etc. select>option#item-$*3 <select> <option id="item-1"></option> <option id="item-2"></option> <option id="item-3"></option> </select> ->
FROM Doctype to DONE You can use a snippet to get an HTML skeleton for whatever doctype you need with a few keystrokes: XHTML 1.0 Transitional: Scaffolds the entire page for you, hit tab to jump to <title>, enter a page name, then tab to <body> and go! html:xt <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta h ttp-equiv="Content-Type" content="text/html”/> </head> <body> </body> </html> ↓↓↓ Other doctypes... XHTML Strict, HTML4 Trans, HTML4 Strict,, and HTML5 html:xs, html:4t, html:4s, html:5
Try it for yourself <ul><li>You can learn by doing without committing to another plugin just yet by trying out the online version: </li></ul>http://secretgeek.net/zen/coding.htm When you’re ready to get started, go here: http://code.google.com/p/zen-coding/