For Javascript devs
If you write Javascript apps you may want to dynamically add some HTML here and there and having HTML strings that need concatenation with different variables is bad and ugly at the same time. So here is a little nugget you might find useful.
1 2 3 4 5 | // standard style x = '<div class="' + classnames + '" rel="' + somevar + '" id="' + othervar + '">' + content + '</div>'; // html tag style x = htmlTag('div', {class:classname, rel:somevar, id:othervar}, content); |
Usage
htmlTag(tagName [, attributes [, content]])
or
htmlTag(tagName [, content [, attributes]])
The function can be called with one, two or three arguments. Beside the first one which is the name of the tag (string), the other two are optional and can be placed in whatever order you like.
For img tags, the content argument is set as src attribute or as value attribute for input tags if the attributes argument doesn't specify otherwise
attributes argument must be an object with key:value pairs and will be expanded as attributes of the tag
content argument is a string or number
1 2 3 4 5 6 7 8 9 10 11 12 13 | var classname = 'test', somevar = 2, id = 'mydiv', content = 'hello'; htmlTag('div', {class:classname, rel:somevar, id:othervar}, content); htmlTag('div', content, {class:classname, rel:somevar, id:othervar}); // will both return <div class='test' rel='2' id='mydiv'>hello</div> htmlTag('img', content) // <img src='hello' /> htmlTag('img', {src:'myImage.jpg'}, content) // <img src='myImage.jpg' /> content is discarded and attributes src is used as source htmlTag('input', {type:'text', name:id}, content) // <input type="text" name="mydiv" value="hello" /> |
The code
1 2 3 4 5 6 7 8 9 10 11 | function htmlTag(type) { var r="< "+type,o={},v='',x=0,a=arguments; a.length==3&&(((x=typeof a[1]=='object')||1)&&((o=a[-~!x]||{})&&(v=a[-~x]||'')))||a.length==2&&(typeof a[1]=='object'&&(o=a[1]||{})||(v=a[1]||'')); for(var i in o)r+=" "+i+"='"+o[i]+"'"; (type=='img'||type=='br'||type=='input')&&((!o.src&&v)&&((type=='img'&&(r+=" src='"+v+"' />"))||(type=='input'&&(r+=" value='"+v+"' />")))||(r+=' />'))||(r+=">"+v+"< "+"/"+type+">"); return r; } function queryTag(type) { return $(htmlTag.apply(this, arguments)) } |
queryTag function just wraps the newly created html in a jQuery object so you can have something like this
1 2 3 4 5 | $("#menu").append( queryTag('div', {class:'menuItem'}, 'Click me').click(function() { alert('clicked'); }) ) |
Zen Coding
If you write HTML for a living, and you don't know Zen Coding yet, you are missing out big time.
Zen Coding is build as a plugin for commonly used editors (including Notepad++, yey!) that allows you to write HTML, CSS and XML code 20 time faster. So writing:
1 | html:xt>div#header>div#logo+ul#nav>li.item-$*5>a |
with a keystroke converts to:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> </head> <body> <div id="header"> <div id="logo"></div> <ul id="nav"> <li class="item-1"><a href=""></a></li> <li class="item-2"><a href=""></a></li> <li class="item-3"><a href=""></a></li> <li class="item-4"><a href=""></a></li> <li class="item-5"><a href=""></a></li> </ul> </div> </body> </html> |
Don't get this wrong, like the man said, "The purpose of ZC is not to write a full HTML page with a single line, but to help you write smaller code chunks.". Here is a video introducing the system in further detail.
It is easier than it looks actually, and looking a bit over the syntax will make total sense. Printing the cheat sheet also helps :)
Also worth noticing that in Notepad++ (the only one I tried) the plugin added few more functions that help with the coding that I'm sure you'll enjoy (Jumping to the edit points is a God given). This project inspired another neat tool for PHP developers to output HTML using this syntax from code. You can find more here
I have only touched briefly on what it can do but I will certainly not author another single HTML document without the benefit of Zen Coding.
Handy CSS Debug Snippet
Great little debuging snippet found while browsing. The code adds different coloured borders to the assets depending on its level. Leave commented out if not needed.
1 2 3 4 5 6 7 8 | * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * * * { outline: 1px solid blue } |