My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Sunday, January 20, 2008

JSmile - smiles everywhere in less than 1Kb!

Update !
Now you can see JSmile in action directly in this blog ;)
I added just this line:

// this element is smile free :)
// noone will be added in code or pre tags
JSmile(document.body);

and the magic happened :D

Come on guys, we have totally unobtrusive smiles for blogspot and every other blog site too 8-)

P.S. script, code, pre, and noscript tags are preserved. No changes will be done by JSmile. If you think about another element that shouldn't be parsed, please tell me :geek:
----------------------------------------------------




Do you want to add some graphic smile in your site?

Do you like GTalk and you think that inline smiles should be cool for your website too?

Are you worried about obtrusive smiles?

Are you worried about server side parsers?

Are you worried about other libraries and JavaScript events for each element?

... forget everything and use JSmile, a new library in less than 1Kb (gzipped) that uses DOM instead of innerHTML, could be compatible with every other kind of library and add smiles using a single site, avoiding cache or bandwidth problems!

Do you want to try an example?

Go to this page: http://ajaxian.com/archives/winter-holiday-christmas-lights

Look at the text, you could find some smile like ;) ... now, if you use firefox, try to cut and copy this piece of code in your ulr:

javascript:(function(){var script=document.createElement("script");script.src="http://packed.it/JSmile/?js";script.onload=function(){JSmile(document.body)};document.lastChild.appendChild(script)})();


Can you see the difference?

Text nodes are changed in a totally unobtrusive way.

No paranoia guys, a person without images will read alternative text, a person with image will read the title if they'll move mouse over the smile.

A person that use JS events can't be worried, events are for other kind of nodes, not for text nodes .... a person without JS enabled will see textual smile .... a person with JS enabled will see a smile using its cache, because of single url and unique smile identifier ... do you need more?

Ok, you should use this function wherever you want and choose wich part of your page should be parsed, sending simply dom node to JSmile function:

JSmile(document.getElementById("testMe"));


Seems interesting? This function could make your site cooler without any effort.
Include JSmile in your head tag and use JSmile function wherever you like.

Currently this function uses phpBB default postable smiles but in the future new smile themes will be available.

Enjoy JSmile and have fun with unobtrusive JavaScript!

4 comments:

Andrea Giammarchi said...

This is just a test :) too see if JSmile works correctly in Web Reflection too ;)

Cheers

Andrea Giammarchi said...

This is a stress test, I setted maximum value of smiles to 20 ... :):):):):):):):):):):):):):):):):):):):):):):):):):):):):):)

Andrea Giammarchi said...

ok guys, no more than 20 smiles for each text element :P

In this way your sites are "protected" against lamers ;)

Cheers,
Andrea :P

bunnyhero said...

very nice! great example of progressive enhancement...

testing :P
:D
:O