Learn how to Write Lightning-Fast Code in 4 Minutes: Screencast
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
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This is awesome! I’ll try it! Cool stuff – thanx for sharing!
This is just great – thx!
Yeah – pretty neat. :)
Great for someone who isn’t the fast typer….Downloading now!
This is awesome, because
A) I hate writing markup
B) I hate writing markup.
So this will make my life 20x easier :)
Love the mark-up!
I love these snippets and shortcut programs. Thanks Jeff!rey!
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
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
Yeah – that’s a nice one!
This is really easy to do, thanks to Sergey’s help. Let me know if you need assistance setting something like this up.
Just updated the posting with another screencast, which demonstrates how to do this.
That’s an awesome addition Jeffrey! This can definitely take this plugin to a whole new level.
is there any way to not have the extra line of whitespace when inputting the lorem ipsum snippet?
Works nice for html4, but when evaluating html5 elements they don’t auto indent.
Is there a simple fix?
I believe there’s an optimized HTML5 download available. Check around here: http://code.google.com/p/zen-coding/
Holy cow and horse.
That is really useful and awesome!
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 :-)
Congrats! Coda is a fantastic purchase…well worth the money.
Coda is awesome! I’ve tried them all and I keep coming back.
Looks really awesome.
Dude you speek faster than a machine gun ;). Nevertheless, very cool way to increase your coding-speed.
What I think of this? Freakin awesome is what I think of it.
Going to get it right away!
Hey folks,
a quick Q&A about Zen Coding:
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>loremZC 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!
You’ve done an amazing job. Hope this posting brings more exposure to the project!
Thanks Sergey, added the new html5 elements to my settings file!
Is there any way to add custom snippets and edit the config on ZenCoding for Dreamweaver? Thanks!
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 :(
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! :)
Thanks! Going to add the html5 elements
Hi Sergey, I can’t get it to work on NetBeans.
Can you please tell me how?
NetBeans doesn’t support abbreviation logic yet, static snippets only.
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!
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.
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!
This is great for speeding the process of writing tedious repetitive code, I just wish they support notepad++
Indeed please add support for Notepad++
This would be as much amazing as the concept itself :D
One more vote for notepad++!!!
Wow, that’s really nice! I hate writing menus
Would love to see more Dreamweaver support :D (it actually works with CS3)
As would I!
Awesome stuff
I agree! I am very excited for this product!
Am I the only one who doesn’t consider XHTML/CSS real coding? Back in the 90s I used to call it “tagging.”
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.
Yes, it had me confused there as well. Nonetheless I can see how this would speed up your “tagging” by a lot.
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
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?
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.
nice this is much better than my text expander
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.
Nice tutorial
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.
code your sites in a consistant and semantic way, then have some default stylesheets ready to attatch, then problem solved :)
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!
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!
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.
Brilliant! Thanx!
One word DAMN.
Great! :)
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.
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.
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
Looks awesome ….. unfortunally no Notepad++ support :’(
How, with this plus Texter im going to be unstooppable, thanks Drew.
I got issues with Texter and Windows Seven, after the first expanded word drag&drop functionality of windows seven stops working completely.
more than by me… couldn’t even load that plugin with texter and win7 64bit
One word: awesome! :D
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.
this is great! but it does not support notepad++ :(
really awesome. works great with dw
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.
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.
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?
Why is there php code in the post’s thumbnail?
I will definitely use Zen Coding in Visual Studio Ultimate 2010!
Thanks !
That’s really usefull !
Great !
this is amazing, omg. thank you!
good tutorial. regards.
Thanks for the informative screencast, this kind of tools really help to improve performance (and in a very cool way indeed :) )
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.
Really great job Sergey. I’d like to add my support for Notepad++ support as well, thank you so much!
will it support Elipse PDT IDE?
I hate those kind of things, so impractical.
In what way!?