Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast
videos

Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast

on Jan 8th 2010 with 143 comments

We all know the benefits of using snippets and bundles to speed up our coding, but what if we could take things a step further, and turn a complex html structure into something as simple as a CSS selector? Well, thanks to a new project, called Zen-Coding, we can do this very thing!

In this four-minute video quick tip, I’ll demonstrate how.

Download Zen-Coding

Other Viewing Options

Update

Within the comments below, I made a suggestion that it would be neat if we could also paste in the generic “lorem” text, like so:

div#header>p>lorem

This would generate something like so:

<div id="header">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
</div>

Unfortunately, I didn’t know how to do it. But luckily, the author of Zen-Coding, Sergey, was able to help me. I recorded a sixty second screencast showing you how to allow for this. You can watch it here.

Additional Resources

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • http://www.sideshow-systems.de sideshow

    This is awesome! I’ll try it! Cool stuff – thanx for sharing!

  • http://www.stefanrechsteiner.com steve

    This is just great – thx!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Yeah – pretty neat. :)

  • Chris Enloe

    Great for someone who isn’t the fast typer….Downloading now!

  • Adam

    This is awesome, because

    A) I hate writing markup
    B) I hate writing markup.

    So this will make my life 20x easier :)

    • http://www.antonagestam.se Anton Agestam

      Love the mark-up!

  • http://www.engram.nu Niklas Larsson

    I love these snippets and shortcut programs. Thanks Jeff!rey!

  • http://www.jeffrey-way.com Jeffrey Way
    Author

    It would be cool if there was a way to designate in the selector that you want to paste in some generic lorem text….

    Like:

    div#header>p>@lorem

    • Srigi

      Yeab, but how to determine how much of “lorem” to insert. BTW this one is cool: div>ul.navigation>li.first+li*7+li.last
      It transforms to http://pastebin.com/f69b45e3c

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Yeah – that’s a nice one!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      This is really easy to do, thanks to Sergey’s help. Let me know if you need assistance setting something like this up.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Just updated the posting with another screencast, which demonstrates how to do this.

    • http://www.jamiechung.me Jamie Chung

      That’s an awesome addition Jeffrey! This can definitely take this plugin to a whole new level.

      • Ce.

        is there any way to not have the extra line of whitespace when inputting the lorem ipsum snippet?

  • Mike Henderson

    Works nice for html4, but when evaluating html5 elements they don’t auto indent.

    Is there a simple fix?

  • http://www.virtualerik.com Erik

    Holy cow and horse.

    That is really useful and awesome!

  • CMT

    Thanks a lot by the tip Jeff!

    I’ve just bought Coda, exactly 5 minutes ago and now with Zen + Coda Clips I think I’ll code 10x faster :-)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Congrats! Coda is a fantastic purchase…well worth the money.

      • http://mymodernweb.com Jason Dittmer

        Coda is awesome! I’ve tried them all and I keep coming back.

  • Micko

    Looks really awesome.

  • http://www.d-mueller.de David Müller

    Dude you speek faster than a machine gun ;). Nevertheless, very cool way to increase your coding-speed.

  • pilola

    What I think of this? Freakin awesome is what I think of it.
    Going to get it right away!

  • http://chikuyonok.ru Sergey Chikuyonok

    Hey folks,

    a quick Q&A about Zen Coding:

    It would be cool if there was a way to designate in the selector that you want to paste in some generic lorem text

    There are two types of entities in Zen Coding: elements and snippets. Elements describes XHTML tag, their default attributes and values. Snippets are an arbitrary pieces of code. So, in your case you have to create a new snippet. After installing, go to ~/Library/Application Support/Coda/Plug-ins, right-click on TEA for Coda.codaplugin and choose Show Package Contents. Open up Support/Library/zencoding/zen_settings.py file. It’s a simple, JSON-like definition of all ZC elements and snippets. Find ‘snippets’ under ‘html’ section and define a new snippet, like this:

    'lorem': 'Lorem ipsum dolor sit amet...'

    Now you can use it as p>lorem

    Works nice for html4, but when evaluating html5 elements they don’t auto indent.

    ZC still don’t know about HTML5 elements (my bad), but you can easily fix it. Open zen_settings.py (see above), find ‘element_types’ section and write down comma separated list of HTML5 tags for ‘block_level’ elements.

    Hope you guys love Zen Coding!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      You’ve done an amazing job. Hope this posting brings more exposure to the project!

    • Mike Henderson

      Thanks Sergey, added the new html5 elements to my settings file!

    • Gonzalo

      Is there any way to add custom snippets and edit the config on ZenCoding for Dreamweaver? Thanks!

      • http://chikuyonok.ru Sergey Chikuyonok

        Search zen_settings.js file somewhere in Dreamweaver plugins folder (after installing Zen Coding, of course). I’m not the author of DW extension, can’t tell you more :(

      • Gonzalo

        Thank you very much, Sergey! For the record, I’m using Dreamweaver CS4 on Windows 7 and the file location was:

        C:\Users\{username}\AppData\Roaming\Adobe\Dreamweaver CS4\en_US\Configuration\Commands\ZenCoding\zen_settings.js

        I edited it and it worked great! :)

    • IgnacioRV

      Thanks! Going to add the html5 elements

    • leo rapirap

      Hi Sergey, I can’t get it to work on NetBeans.
      Can you please tell me how?

      • http://chikuyonok.ru Sergey Chikuyonok

        NetBeans doesn’t support abbreviation logic yet, static snippets only.

  • http://www.bramjetten.nl Bram Jetten

    I am so thrilled about this. It’s unimaginable how such a tiny plugin can speed up your process this good!

    Using it together with Coda and loving it!

  • Kwaa

    Quite frankly I never use text expanders or apps like that. I have it all in coda.
    But this is just pure brilliance.

    Thumps up! More of these.

  • http://www.jamiechung.me Jamie Chung

    It will take some time to get used to but I think it make things faster and easier for me in the long run. Good find!

  • Danilo

    This is great for speeding the process of writing tedious repetitive code, I just wish they support notepad++

    • Stanislas

      Indeed please add support for Notepad++

      This would be as much amazing as the concept itself :D

    • http://www.fishmemory.net fractalbit

      One more vote for notepad++!!!

  • http://jayj.dk Jay

    Wow, that’s really nice! I hate writing menus

    Would love to see more Dreamweaver support :D (it actually works with CS3)

    • Daniel

      As would I!

  • slier

    Awesome stuff

    • http://www.rayolivero.com Ray Olivero

      I agree! I am very excited for this product!

  • WallMountedHDD

    Am I the only one who doesn’t consider XHTML/CSS real coding? Back in the 90s I used to call it “tagging.”

    • http://www.youtube.com/watch?v=VEVuy_mN-LE idreamofpixels

      It’s not real coding, so yeah you’re not alone on this one. Real coding should at least involve some form of variables/constants, this is just markup.

    • Nerieru

      Yes, it had me confused there as well. Nonetheless I can see how this would speed up your “tagging” by a lot.

  • http://www.alfystudio.com Ahmad Alfy

    wow that’s great! It’s gonna help!
    Best thing it support all those IDEs
    I tested it with Dreamweaver and it works like a charm

  • eldian

    Awesome stuff!!!!!!!!!

    Anyone here using this with TopStyle?

    Question for Sergey or anyone else using TopStyle. Right now after writing out the code I have to highlight everything and then press the Zen HTML button. Was wondering if there was a shortcut or is there another way besides highlighting the code and then pressing the Zen HTML button?

    • http://chikuyonok.ru Sergey Chikuyonok

      I’m not the author of TopStyle plugin. Looks like there are limitations in TopStyle API that prevents from getting current line and cursor position. So you have to select abbreviation before expanding.

  • jermaine

    nice this is much better than my text expander

  • http://tutsvalley.com Slobodan Kustrimovic

    Saw a screencast about it few months ago on smashingmagazine but didn’t really understand how to use it, and in this little screencast of yours it became all much more clear :) Thanks Jeffrey.

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    Nice tutorial

  • Mark Osborne

    Looks great! I’ll give it a bash in Apatana when I get a mo. Although, for me I think coding HTML is probably what takes up the least amount of time. What would be great is if you could have this also generate CSS classes ready for styling as well and save a few more steps. I find it really frustrating after laying out all my elements that I have to then go into a CSS file and recreate all those tags again.

    • Chris Simpson

      code your sites in a consistant and semantic way, then have some default stylesheets ready to attatch, then problem solved :)

  • http://www.timesrecordnews.com christopher simmons

    Ive been tinkering with this all night. VERY NICE. I have been thinking about getting a text extender for dreamweaver. I have used Coda in the past and fell in love but do not personally own a Mac so this should bring some at least one of my favorite features from Coda :)

    another tip, you can open/close any tag you want (wether it’s really a tag or not)

    just type like:
    blah control+,

    and you will get:

    im especially liking the document presets “html:5″ ftw!

  • http://spotdex.com/ David Moreen

    I’ve actually came a long way ever since I began writing HTML, I’m pretty fast. But I know how to write it, I don’t need to keep doing it over and over for each design I do…

    Not only will this allow me to write code faster but I will be able to focus my time on more important aspects of a design. Thanks Jeff!

  • http://vintom.com Vin Thomas

    Jeffery,

    Very cool! But I don’t know if I would really use this. I don’t spend that much time typing out all this stuff anyway. With your screencast on Text-Expander I have become used to using those shortcuts to work almost as fast.

    Thanks for this tutorial.

  • Rudolf

    Brilliant! Thanx!

  • Arvi

    One word DAMN.

  • http://www.philohermans.com Philo

    Great! :)

  • http://cmstutorials.org krike

    The itunes downloadable version is it just to download or is it for ipod or iphone?

    On my ipod I search for nettuts in the podcast, I download the latest podcast which is free, it then downloads and when I want to play the video it says “this movie format is not supported”

    I downloaded another podcast from “jquery for designers” and it will play the video.

    just thought I would ask it.

  • http://www.donothavedomainyet.com Eugene

    I think it is very convenient, but the amount of supported editors under Windows is much smaller rather, than under Mac. And not everyone got them. So if it will develop, maybe for example for phpDesigner 7 or so, then great.

    • SolidSquid

      Sorry if I’m misunderstanding, but there are quite a few editors on windows which are supported. Aptana, TopStyle, Dreamweaver, SlickEdit, Sublime and UltraEdit all support windows as well as other platforms. If you want to try one of them then Aptana is free to download/use

  • Paul du Long

    Looks awesome ….. unfortunally no Notepad++ support :’(

  • http://rickbrossgraphics.com/ Rick Bross

    How, with this plus Texter im going to be unstooppable, thanks Drew.

    • http://tutsvalley.com Slobodan Kustrimovic

      I got issues with Texter and Windows Seven, after the first expanded word drag&drop functionality of windows seven stops working completely.

      • michael

        more than by me… couldn’t even load that plugin with texter and win7 64bit

  • http://bcproducties.com/ BCProducties

    One word: awesome! :D

  • http://www.youtube.com/watch?v=VEVuy_mN-LE idreamofpixels

    I sounds great but I can’t really find a use for it, Visual Studio and Dreamweaver already help me out when writing markup. What would be nice is if they make it for Notepad++, especially if they included a feature to automatically write doctype + basic page layout.

  • http://www.jlapitan.com jlapitan

    this is great! but it does not support notepad++ :(

  • Yusuf

    really awesome. works great with dw

  • Felix

    Thats coo

    I got a question for you Jeffrey, in one of your other screencasts you said, “we can all agree that TextMate is much better than Coda”, and now u say that Coda is a fantastic editor well worth the money. I tried to Code a webiste in Coda and TextMate, I like them both but is Coda really worth the 50 extra $?

    thanks.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Are you sure I said that? That doesn’t sound like me. I might have said that I generally prefer TextMate….but Coda is fantastic as well. I use both often.

      • Felix

        you do in:
        Ask JW: Working on your server in TextMate

        but anyways what i really miss in textmate is that i doesnt auto-complete ur tags. Coda automaticly finishes a with , is there any option for this in textmate?

  • Dave

    Why is there php code in the post’s thumbnail?
    I will definitely use Zen Coding in Visual Studio Ultimate 2010!

  • http://sonergonul.com Soner Gönül

    Thanks !

    That’s really usefull !

    Great !

  • http://mariekyle.com/ Marie Kyle

    this is amazing, omg. thank you!

  • http://bit.ly/5RQv0e Dumm

    good tutorial. regards.

  • IgnacioRV

    Thanks for the informative screencast, this kind of tools really help to improve performance (and in a very cool way indeed :) )

  • http://threadbarecanvas.com Siriquelle

    I like it, hope i find a project soon that i can use it in. Looks like it would remove some of the tediousness of repetitive coding and leave more time for design.

  • Stanislas

    Really great job Sergey. I’d like to add my support for Notepad++ support as well, thank you so much!

  • Shiro

    will it support Elipse PDT IDE?

  • Ben

    I hate those kind of things, so impractical.

    • http://www.jeffrey-way.com Jeffrey J Way

      In what way!?

Newer Comments →