Most of us are familiar with the popular Zen Coding utility by now. For those who aren’t, it turns the process of creating complex markup into a CSS-like selector. This can save you an extraordinary amount of time; however, it does have a few short-comings. Luckily, another tool, Sparkup, inspired by Zen Coding, remedies these issues, and pushes your productivity even higher!
Prefer a Video Tutorial?
Wait…What’s Zen Coding?
Consider the following markup:
<div id="container">
<nav>
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
</nav>
</div>
This is fairly common markup that you’ll create for every new website. Assuming that you don’t already have this saved as a snippet, it can easily be recreated within seconds, with Zen Coding.
#container > nav > ul > li*4
- Target
idsandclasseswith the#and.selectors. - Use the
>to filter down the tree and create children elements. - Request multiple elements by using the
*symbol. - Use the
+symbol to create siblings.
Room for Improvement
Unfortunately, there are a few issues that I have with Zen Coding.
- To the best of my knowledge, there’s no easy way to travel back up the tree. For example, if I create a
ul > li*4selector, I’m not aware of a way to filter back up to theul, and then create a sibling element. - There isn’t a way to assign
innerHTMLto an element. Wouldn’t it be great if I could type,ul>li {Some Text Here}? - I don’t believe there’s a way to
tabbetween stops, after you expand.
Luckily, a utility, inspired by Zen Coding, fixes every one of the issues listed above. It’s forward compatible — meaning, all of your Zen Coding knowledge will transfer over seamlessly.
Availability
At the time of this writing, Sparkup is available for TextMate, Vim, and for general usage, via the command line. It’s fairly trivial to install. For more information, refer to the screencast above.
Climb up the Tree
With Sparkup, we can travel back up the tree.
The Syntax
ul > li*3 > a < < + #contents
Notice how we're using the < to travel back up the tree. From the anchor tag, one < will take us to the list item, and another will bring us back to the unordered list, at which point we can create a sibling with the + symbol. Very helpful!
The Output
<ul>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
</ul>
<div id="contents"></div>
Add Text to Elements
By using curly braces, we can assign values, or innerHTML to the elements we create. This feature was badly needed.
The Syntax
ul > li > p { My Text Here }
The Output
<ul>
<li>
<p> My Text Here </p>
</li>
</ul>
Tab Stops
With Sparkup, we can tab over the necessary stops, so that we can manually insert our attributes/values as quickly as possible. With MacVim, as shown in the screencast, you can use Control + N and Control + P to switch between the stops.
This way, rather than having to resort to numerous directional key presses, a single command will take you where you need to be. Refer to the screencast for an example.
So what do you think? Will you be making the switch?
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
If you want something like this
ul > li*3 > a < < + #contents
in Zen Coding you should just do this
(ul > li*3 > a)+ #contents
P.S. Nice, anyway.
and by the way in most of the plugins you have “next editing point” feature (in coda and notepad++ for instance, don’t know about macvim)
Is there a version of this for Coda?
Do Windows people miss out or is there a way to set it up in Windows?
It looks like the vim version won’t work with windows unless you have Python installed. Not only that it appears to need to be part of your system path as well. Let me see if I can get it working I will let ya know.
Ok! I am close now it appears that there is an issue in the python syntax here is the error that I am getting.
File “\Program Files (x86)\vim\vimfiles\ftplugin\html\sparkup.py”, line 949
print “Usage: %s [OPTIONS]” % sys.argv[0]
^
SyntaxError: invalid syntax
Don’t know to much about python myself (yet) so if anyone knows whats causing it :-) thanks!
Did you install Python 3? If so, i’d recommend you install 2.7, lots of apps aren’t built for 3 yet and since it doesn’t backwards support older syntax..
Ah! That is probably it! Will have to install python 2.7 and see!
Thanks so much!
I got it set up in windows with Vim and Python. Posted instructions on my blog:
http://jessebreuer.tumblr.com/post/1432645301/getting-sparkup-running-in-windows
Hey Jesse that worked like a charm! I wasn’t able to get it working until I saved my file as a .html and then worked great!
Thanks for the article!
Cheers Jesse, this worked eventually…
Only thing I had to do extra to get it working was to add a line to my _vimrc file:
filetype plugin on
Pc users can install “Aptana Studio” and also “Zen coding” officially support “Aptana studio” to works with zen coding. There are several alternative but little more time consuming as compare to “zen” process like “Texter” which can do the task by assigning keyword strokes.
That’s great! If I could get it to work with Coda, it would rock even more! I typically use it over TextMate.
Nice to see you here Eric, Eddy here, I use notepad ++, pity it dont support it.
Looks cool, but I use Notepad ++ a lot and it’s not currently supported. Maybe it will be soon, but until then I’m still using Zen Coding.
Same here. Notepad++ support please. :0
+1 here also!
:)
Wish it supported BBEdit…
Zen Coding could go back up the cascade using parentheses instead of the < character.
I’ll still try it out though since as far as I know it doesn’t have the tab stops or adding text to elements features.
How to go up? I didn’t know the parentheses thing.
In Zen Coding you can’t go up arbitrarily, but you can create groups of selectors.
(div#container > ul > li > a)+(div#sidebar > (form > div * 2 > label + input:text)+p.message[style=display:none])
this would print something like this:
Can’t install it on TextExpander 2.8.1 :-(
The ability to add content is pretty nice, but the tab through placeholder work in zen coding.
ul > li.class-$*4 > a < li.class-$*4>a)+#contents in zen coding
oops
look like my comment got the chop :)
so
(ul>li.class-$*4>a)+#contents does the same in zen coding.
I use Zen Coding in Dreamweaver and it has support for the jump to value that you mentioned in the beginning. You use ALT + Arrow to move left and right to the logical editable places.
Thanks for the tip, Giles! :) I wasn’t aware of that shortcut…
Cool tip. thanks!
i have another tip.
if you want to switch fast to your next tag, simply hold CTRL + ALT + left/right key.
for example:
put your text marker here in this li.
to jump here fast, hold CTRL + ALT + right key.
Thats it
Hope this helped :)
Works like a charm in textmate! Love the tab feature to insert attributes/values. Thanks again Jeffrey for this quick tip.
Well, Jeff, as some people already mentioned, Zen Coding actually is capable of doing the things you mentioned, at least in VIM (I know there are differences between implementations).
For example, you can use parenthesis to traverse back and forth the tree, as so:
div>(ul#nav>li*5)+(ul#subnav>li*4) – it works.
You can also navigate to tab stops by pressing CTRL-Y,n (forward) and CTRL-Y,N (backwards).
So it seems – but I don’t like the parens method at all. Too confusing.
The big change-factor for me is the ability to add text for elements.
It’s a matter of taste – for me it is clearer than fiddling with >> and <<.
But after watching your screencast, I agree that adding text to elements looks like a very convenient feature and could make me switch to SparkUp.
There’s a Vim version for Windows. Vim and Emacs are probably the best editors out there anyways so it’s a good idea to pick one up! There’s a version of Sparkup for Vim, so you can use it on the windows version also.
You can do what you were referring to via parentheses in Zen Coding. Sometimes it’s difficult to wrap your mind around where the parentheses should go, but it works once you position them correctly. I can’t refer you to an article about this, seeing as I discovered it on my own, but if you just mess with it you should be able to get it to work. Good luck!
And I think that’s the problem. Why isn’t that featured documented well?
Pretty tut as usuall :)
i think this is not the place to ask you that, but can you share with us your .vimrc file and your plugins folder ?
because there is a lot of plugins to choose from, i’ve tried to use the Ultimate vim config but it’s not really what i want(can’t Select All with CTRL+A, and stuff like that) …
so is it possible that you share this with us ? :D
It’s always being updated, but you can get the most recent version here: http://github.com/JeffreyWay/Vim/blob/master/vimrc
Yay Thanks
that link is no longer active – it got a 404
Sparkup works great with e-texteditor on windows.
Thanks for the qicktip this looks really nice, time for some testing now.
DId you just follow the TextMate instructions to install?
Did you manage to get Sparkup to work with e-texteditor? I’ve been trying for a while to no avail.
Jeffrey,
I am currently eating crow… (see previous comments from last month). Sparkup with vim is incredible! Plain and simple. You have gotten me to use vim by default with my mac text files but now that I see this I will not bother opening up an IDE to create markup.
Thanks for digging up the great tips!
Eric
Great , hoping for a notepadd++ support,
If you guys like this, HAML would make you poo your pants.
That does look cool, but since most of the time our main document structure doesn’t really change, I use a skeleton. In fact, since I use E, I just type skel and hit tab and I’ve got a nice base to work with, complete with tab stops for anything I need to customize. That plus zencoding, and I’ve got some nice markup pretty darn quick.
Am proud to say that the developer of sparkup is a Filipino name Rico Sta Cruz…. I hope he will make a Windows version for this… it’s a great apps to speed up coding and same amount of time…
This looks pretty cool. I use E on Windows, and it’s pretty awesome with zencoding. It uses TAB to get to the editable areas, just like the bundle snippets. Very cool. I think I like the idea of wrapping things in parentheses instead of doing <ul>li and it assumes the first element is a div.
The only thing zen doesn’t do (that I know of) is allow you to add content right in your zen code, but again since you can in fact “tab” through each editable area (depending on the program), that’s not that big of an issue.
Another feature I like, and I don’t know if it’s available in other editors, but in E you can have your text selected, and then open the zen dialog box (I bound mine to ctrl+shift+e), type your zen code and it will automatically insert your content into the editable areas. I’m sure it has its flaws, but for basic things it works well, like selecting this text:
Home
About
Projects
Contact
Opening the zen dialog, and doing ul.nav>li*>a it generates this:
Home
About
Projects
Contact
And puts the cursor in the href’s to tab through and enter the link addresses.
Regardless, sparkup definitely looks cool, has a bit more functionality, and will surely increase productivity for a lot of people, but I’m going to stick with zencoding for now.
Much better then Zen Coding. I like it. Hope this will run on Komodo Edit 6.
Hi guys,
I’m a developer of Zen Coding project and I want to make some things clear.
Jeff, I’ve provided a lot of incorrect information about Zen Coding in your video:
1. Tab stops. ZC supports them since forever (and you can actually see it in this video: http://vimeo.com/7405114). Actually, ZC by itself generates a code with special placeholders showing where the cursor should be. And then the plugin developer should implement them. Thus, *tab stops is an editor feature*. Some editors (like Notepad++) doesn’t support tab stops, that’s why I’ve developed Next/Prev Edit Point action: just to provide some replacement. If you’re using Vim, then you’re using unofficial ZC plugin which hasn’t been tested to support all provided features. Actually, the only Vim plugin I know is from Yasuhiro Matsumoto (http://www.vim.org/scripts/script.php?script_id=2981) who wrote his own engine implementation so ZC team doesn’t have any relation to this project. Try the TextMate bundle, it’s also supports linked tab stops (in dev.preview version) like this:
<input name=”{$1:some-name}” id=”fld-$1″ value=”$0″ />
2. Traversing up to the tree. As many folks already noted, you can use parentheses.
3. Text insertion. Yes, this feature is not supported, but I don’t think it’s really helpful. You can add this text later (it’s really easy with tab stops). Also, try to work a little with text insertion inside abbreviation, and soon you’ll find out that almost all of this text is just a placeholders that should be replaced with the actual data later. So for me this feature is not so helpful as you described.
And now comes the difference. Zen Coding was designed not just to create a new code, but to edit the existing one. Since Sparkup uses spaces and < sign for abbreviation, you can’t easily add abbreviation inside existing code. Just a simple example, try to write and expand abbreviation using Sparkup and Zen Coding here:
<div>Lorem <a href="/home/">ipsum</a> [WRITE ABBREVIATION HERE] </div>
Also, Zen Coding provides a lot of tools for code editing like Tag Matching, Wrap with Abbreviation, Split/Join Tag etc. Try a TextMate/Espresso/Coda/Aptana/Komodo/NP++ plugin (these are official) to see how things actually works in Zen Coding.
Hey Sergey – thanks for chiming in.
That explains it, with Vim. I wasn’t aware that it wasn’t an official plugin.
I originally loved the wrap in abbreviation feature — but found that I honestly didn’t use it much. And yeah, that’s a shame about editing existing abbreviations. It failed when all of the markup was on line, but when I formatted the html, and tried again, it worked.
And, please don’t get me wrong; I love Zen Coding.
But I suggest you to edit your article. There’s already a lot of “Sparkup is much better than Zen Coding” hype because people just blindly believe you that ZC is not able to do those things.
Sergey, I’ve been using Zen Coding for months now and it’s became a huge help in my markup activity (blowing away crap like HAML and SHPAML), but I almost always find myself (and I’m sure I’m not alone) wishing there was text insertion. Particularly for prototyping sites.
Consider you’re making a list of links and you want to fill their href with #. :\
I come across this problem almost everytime I make a site.
Anyway, I still love Zen and think it’s the best thing out there, and if you patch text-insertion I’ll never want again. Thanks man :)
It’s not a problem to fill out attribute values: ul>li*4>a[href=#] There’s a brief overview of the current features on the main page: http://code.google.com/p/zen-coding/
The main difference between Sparkup and ZC is that the first one supports text insertion with curly braces. But it’s mostly the same as adding text after you expand abbreviation (using tabstops). It’s a much cleaner and better way of doing this. If you’re creating repeating structures like li*3>a you won’t be able to put custom text on each >a< element even in Sparkup.
It’s just a clone of Macromedia;s code sweeper from the Homesite editor.If you have to have it you can still get a copy from Adobe. It’s been around 12 or more years.
Hi, Great add-on. Does anyone know how to get dreamweaver to create a snippet or auto code when you type a certain text, I seen Jeffrey do it on Php for beginner tutorial. He would type “script” then enter and it would complete “script type=”text/javascript”, he also did called a unique form by just placing the tag and it would auto create a form field, name field, and submit button. Any advice or url where the tutorial for this would be on Nettuts. that would be very helpful. Thank you.
When is it available for other editors?
All the features is available in this plugin also available now in zen coding. I fill zen coding is better then it and it’s for almost all popular application like coda, dreamweaver etc.
? y every time i use the wrap feature my notepad++ freeze
I´ve installed SparkUp for Textmate, but the CTRL + E doesn´t work to expand it, can someone give a hint? thanks :-)
My favorite tutorial yet! I am so excited to use this.
Scribes also does sparkup.
Youtube Video: http://www.youtube.com/watch?v=_XhkCSVjP1M
This post should really be completely rewritten as a simple intro to sparkup (if not removed entirely), as the author’s shoddy research is hurting the community at large. I imagine many have already taken the author’s slanderous suggestions to heart and will not soon know how awesome the ability to easily create custom templates and configurations that is available with zen-coding can be.
I have already downloaded MacVim and I cannot find a .vim folder?
Great tool, i use zen codeing in dreamweaver.
cant wait for SparkUp for dreamweaver!
For some reasons I can’t get this to work on my mac, using vim. Help!!
Would love to know how to install sparkup for eText Editor for Windows v 2.0.1. I have it working with gVIM but I find this a steep editor learning curve for me. Any suggestions is appreciated.
well the code didnt show up but you get the point!
Pc users can install “Aptana Studio” and also “Zen coding” officially support “Aptana studio” to work with zen coding. There are several alternative but little more time consuming as compare to “zen” process like “Texter” which can do the task by assigning keyword strokes.
Is there a way to quickly modify an existing layout?
Say, I design table > tr * 2 > td * 3, and I enter the text in all the cells. I later realize that I need to have one more column. Is there an easy way to add one more column, without having to retype all my cell contents?
Hi there, about the Zen Coding, the only problem to me is use the expand feature in the same line for various css items (or html). Unfortunately, ZenCoding messes up everything, and so, because this, I’m trying to move to Sparkup.
And the “count” feature does not work (not for me), when I try to do something like:
a*3.testClass-$,
I get 3 times the code (ZC does not “replaces” my “$” for numbers)
Now, let’s try install sparkup and python in Win7 and see if it works.
If somebody knows how to expand many items in the same line, please tell me, and I’ll come back to Zend.
Nice post, thanks for all!
Sorry, forgot the PRE tag.
I get three times the code
That’s it!
So this method is called Zen coding. This is very handy tool. Thank you sir!