case
ADM Blog
30Mar/110

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');
             })
      )
11May/100

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.

7Oct/090

Use any Font with Cufon

Typography is one area of web development that has seen painfully little advancement when compared with other areas of the industry. Web developers have been forced to rely on a small set of ‘web safe’ fonts that are likely to be installed on the majority of their visitor’s computers. Image and flash-based solutions have arisen, both of which have downsides to using.

Cufon offers developers a robust and fast solution, which can be displayed in the browser without requiring third-party plugins using features built in to browsers. Cufon fonts can be used as VML for native IE implementation, or the

Usage

This library differs from the others in that a little bit of preparation is required before use; a new font file needs to be generated which can be done easily using the cufon website. The will generate an SVG font and save it in a JS file. This file needs to then be linked to any other <script> resource after the cufon core file:

1
2
<script src="cufon.js" type="text/javascript"></script>
<script src="Breip_500.font.js" type="text/javascript"></script>

Then it’s just a case of telling Cufon which elements to replace:

1
2
3
<script type="text/javascript">
Cufon.replace('h1.replacedFont');
</script>

The API offers other solutions for using multiple fonts on the same page and for improving performance in IE. Although I’ve called this section, "Using any Font"… you should remember that only fonts that are licensed to be embedded should be used. The following screenshot shows a replaced heading:

[Download] [Demo]

27Jul/090

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 }