Zen Coding

Discussion in 'Web Design and Development' started by angelwatt, Dec 14, 2009.

  1. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #1
    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:
    HTML:
    <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.
     
  2. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #2
    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
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    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
     
  4. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #5
    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 :rolleyes:
     
  6. elitesouth macrumors member

    elitesouth

    Joined:
    Nov 24, 2009
    Location:
    Savannah GA
    #6
    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.
     
  7. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #7
    Anyone know how you "activate" this on espresso 1.1 i can't seem to find any answers in the documentation.
     
  8. angelwatt thread starter Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    I found this thread on the project issues list. It may have a clue. You can try ctrl+, to activate as well.
     
  9. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #9
    ^_^ 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.
     
  10. Wee Beastie macrumors regular

    Joined:
    Aug 20, 2007
    Location:
    In the snow with Rosebud
    #10
    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!
     

Share This Page