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'); }) ) |
Read/Load files from ZIP in JavaScript
At work we do a lot of JavaScript applications that have little to no HTML files (beside the index), everything is generated by JavaScript and we have tons of .js files that load at runtime and to reduce the size we have to minify them and that is really hard to debug and watch in the browser if something goes wrong. So I've made this JavaScript class that comes to help. What can you do is Zip up all your assets (js, images, css) and use ZipLoader class to read the zip and unpack your resources whenever you need them. It's small (10KB), easy to use and quite fast considering the extraction is made by JavaScript.
1 2 3 4 5 6 7 8 9 10 | // loads and caches the zip file var loader = new ZipLoader('files.zip'); // creates a style node in the document header and appends the style loader.LoadCSS('files.zip://style.css'); // creates a script node in the document header and appends the script loader.loadScript('files.zip://jquery.js'); // returns the file content var someFileYouNeed = loader.load("files.zip://myFile.txt"); // returns the base64 encoded image usable as img source $("#logo").attr('src', loader.loadImage('files.zip://images/logo.png')); |
The level of compression using zip surpasses the js and css minification in all the ways possible. For example, My current application has 79 files (js, and few css) and they all sum up to 924KB in size. Zipping all those 96 files using Ultra compression level gives me 1 file of 126 KB => 1 server request. That's something.
The best performance is made Opera (strangely), then Firefox, Crome, Safari and last IE (no surprise here, I was expecting it before I even started).
It's a V 1.0 that still needs some work and it doesn't work in IE because that stupid browser overrides the mime type and at first null character in the reading of the zip, the content ends. I will fix this eventually :) I will also include this as a jClass library soon.
Update: Fixed it so it works in IE as well. There is a performance issue still. Will fix that too.
Till then, HERE are the sources and a demo.
The zip in the demo is made using 7Zip with Ultra Compression level.
Happy codding.
Parse XML in JavaScript with jQuery
Yes, you can do it with XMLDOM and all the other ways out there, but why not use the power of jQuery ?
Like so:
1 2 3 4 5 6 7 | <root> <items> <item name="first" id="1">Content 1</item> <item name="second" id="2">Content 2</item> </items> <other atribute="true" /> </root> |
1 2 3 4 | var xml = '<root ......'; var obj = $(xml); // and now you can use jquery selectors to get what you want $("item[name=second]", obj).attr('id'); // 2 |
JavaScript Object-Oriented Programming (OOP) – jClass
I just finished working on a JavaScript 'framework' that will allow you to write highly object-oriented code in your browser.
Using jClass you can easily define namespaces, create and extend class, define and implement interfaces, define public/private/static methods, override and overload them, have getters and setters, and so on.
The syntax for writing code using jClass looks something like this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | include("some.other.files"); namespace("my.namespace") ({ MyClass : jClass.extends(BaseClass).implements(SomeInterf, SomeOtherInterf) ({ constructor : function(){ .... }, private : { .... }, public : { .... }, static : { .... } }), OtherClass : jClass({ ...... }) }) |
I'm also working on some useful libraries that you can use with jClass.
Usage examples, documentation and downloads are all available on Google Code right HERE
Check if user visited certain websites
Today I found a website called http://www.stayinvisible.com/ that uses a really clever technique to peak in your browser history. They can't see everything of course but they can see whatever they are interested in and that is a list of web-proxy websites.
So how are they doing it ?
First, they have a list of websites they are interested in, like i said, a list of web-proxies.
1 2 3 4 5 6 7 | var sites = { "hidemyass.com": ["http://www.hidemyass.com", "http://forum.hidemyass.com"], "freeproxy.ca": ["http://www.freeproxy.ca"], "proxy4free.com": ["http://www.proxy4free.com"], .... .... } |
Second, they create a temporary IFRAME where they write a simple 2 lines CSS that does the magic
1 2 | a { color: #000; display: none} a: visited { color: #F00; display: inline } |
... and in the body they append all the links from the
The browser renders the links, and all the sites that appear in your history will use the "a:visited" CSS class. The others use the normal "a" class that has a display:none property and will be hidden.
What's left to do is iterate all the links from the frame and check if they are visible or not to know which of them are in your history and which of them aren't. Pretty simple eh ?
So here's the class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | var bHistory = function(){ var sites = { "hidemyass.com": ["http://www.hidemyass.com", "http://forum.hidemyass.com"], "freeproxy.ca": ["http://www.freeproxy.ca"], "proxy.org": ["http://www.proxy.org", "http://www.proxy.org/cgi_proxies.shtml", "http://www.proxy.org/forum/index.html"] }; var visited = {}; function getStyle(el, scopeDoc,styleProp) { if (el.currentStyle) var y = el.currentStyle[styleProp]; else if (window.getComputedStyle) var y = scopeDoc.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp); return y; } function remove( el ) { el.parentNode.removeChild( el ); } function createIframe() { var iframe = document.createElement("iframe"); iframe.style.position = "absolute"; iframe.style.visibility = "hidden"; document.body.appendChild(iframe); if(iframe.contentDocument) iframe.doc = iframe.contentDocument; else if(iframe.contentWindow) iframe.doc = iframe.contentWindow.document; iframe.doc.open(); iframe.doc.write('<style>'); iframe.doc.write("a{color: #000000; display:none;}"); iframe.doc.write("a:visited {color: #FF0000; display:inline;}"); iframe.doc.write('</style>'); iframe.doc.close(); return iframe; } var iframe = createIframe(); function embedLinkInIframe( href, text ) { var a = iframe.doc.createElement("a"); a.href = href; a.innerHTML = site; iframe.doc.body.appendChild( a ); } for( var site in sites ) { var urls = sites[site]; for( var i=0; i<urls .length; i++ ) { embedLinkInIframe( urls[i], site ); if( urls[i].match(/www\./) ){ var sansWWW = urls[i].replace(/www\./, ""); embedLinkInIframe( sansWWW, site ); } else { var httpLen = urls[i].indexOf("//") + 2; var withWWW = urls[i].substring(0, httpLen ) + "www." + urls[i].substring( httpLen ); embedLinkInIframe( withWWW, site ); } } } var links = iframe.doc.body.childNodes; for( var i=0; i<links.length; i++) { var displayValue = getStyle(links[i], iframe.doc, "display"); var didVisit = displayValue != "none"; if( didVisit ){ visited[ links[i].innerHTML ] = true; } } remove( iframe ); var usedSites = []; for( var site in visited ){ usedSites.push( site ); } return usedSites; } |
To use it:
1 2 | var visited = new bHistory(); alert(visited); // an array with visited websites from the defined list |
All credits go to the smart man who did this. Cheers!