Zen Coding

[angelwatt]

This is for those of us who code web sites by hand.

You should have a look at Zen Coding. It's a set of plugins/scripts for various text editors that let you create HTML and CSS using CSS-like syntax.

Example: entering div#main>ul>li*3 will output:

<div id="main">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

It's pretty neat and definitely helps speed up creating pages. Some of the Mac editors currently supported are BBEdit/TextWrangler, TextMate, Aptana, Coda, and Espresso. I created the BBEdit/TextWrangler scripts this past weekend. Fun little project. Smashing Magazine has a nice article on Zen Coding from the author of the script that explains the concept and usage more along with a video demo. If you hand code HTML at all, you should definitely take a look at this. Enjoy.

 

[design-is]

Ah, that looks very interesting! Just this morning I was thinking "why isn't there some way to do..." just this kind of thing.

Great info, thanks!

/Doug

 

[SrWebDeveloper]

Pretty cool.

I'm pretty quick at copy/paste and highlight/delete i.e. sometimes in Dreamweaver (we use it at work, not my choice) I use the insert menu for adding tables or whatever even in code view. But the Zen tool is clearly much faster and robust plus I noticed its also compatible with DW too. Niiiiiice.

-jim

 

[angelwatt]

Just this morning I was thinking "why isn't there some way to do..." just this kind of thing.

Isn't that how it always is? Once someone comes out with something everyone is like, "Dang, why did it take so long for someone to think of this?" I had actually made a script that I had been using that was similar to this, but only did one tag at a time. The zen coding is a lot more robust than what I had, but that script gave me the foundation for integrating the zen coding into BBEdit using AppleScript. AppleScript has to be one of the most cumbersome languages I've ever used.

 

[design-is]

AppleScript has to be one of the most cumbersome languages I've ever used.

I've not had the pleasure yet... that ones a little further down my list (heads in JavaScript right now). Though I should probably look at it at some point - would probably be useful to know something about it. I work for a Mac game publisher and at some point might ask about some of the more complicated programming stuff, though as ever, time is always a factor. There was a fork a long time ago where I chose design over programming, but I still have the urge to learn everything hehe

 

[elitesouth]

Man that looks way cool... I'll have to check it out.

Coda does the auto-closing of tags, but nothing like this...

Thanks for the post.

 

[Cabbit]

Anyone know how you "activate" this on espresso 1.1 i can't seem to find any answers in the documentation.

 

[angelwatt]

Anyone know how you "activate" this on espresso 1.1 i can't seem to find any answers in the documentation.

I found this thread on the project issues list. It may have a clue. You can try ctrl+, to activate as well.

 

[Cabbit]

^_^ worked it out meant to use ctrl , to make it work, i did not know the key combination by watching the video. Seems it is built into espresso 1.1 by default as well which is terrific.

Been getting to grips with Zend as well and finding Espresso the best investment i have ever made for programming.
Saving even more time working with Html this way is just icing on the cake.

 

[Wee Beastie]

Yeah this is an excellent topic to bring up. I have been using Zen Coding in Coda for a couple of weeks now. I caught that Smashing Mag article and I learned a ton of new tricks. I am really excited about it.

TEA for Coda
TEA for Espresso

These'll get you zen coding for Coda and Espresso.
Both by Ian Beck

Well done creating scripts for BB Edit, Text Wrangler!!! I occasionally use Text Wrangler, so I will give em a shot!