While I was idly surfing through the web I stumbled over an older blog post from 2011 that featured Earthquakelet, a bookmarklet that lets you experience the funny side of an earthquake by shaking the contents of the window. (Disclaimer: Real earthquakes are no fun!)
While I am sure that the author can do much better when writing code (In fact he proved that he can often enough) this time he simply hacked things together for the laughs. So, nothing against the author—it is totally OK to do as he did—but it is a nice example that, depending on your audience, you might not need jQuery to get things done. The code might be shorter and often faster even if you use the famous vanillaJS library …
The following example is provided only to show that this is no false claim and because it is so nice and short.
Earthqualelet, a bookmarklet found on this page
917 bytes (635 minified) of code plus additional 72357 bytes download of jQuery
(function(w,url,hasjq) {
if (!(hasjq = w.jQuery)) {
var s = document.createElement('script');
s.src = url;
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(s);
} (function go() { if (!w.jQuery) {
return w.setTimeout(go, 200);
} var $ = w.jQuery;
if (!hasjq) $ = $.noConflict();
var $s = $('p,div,img,span,strong,em');
(function shake() {
$s.each(function() {
if (this.shift) this.shift = 0;
else this.shift = (2*(Math.floor(Math.random() * 2)) - 1) * (Math.floor(Math.random() * 4));
$(this).css('margin-left', this.shift); });
w.setTimeout(shake, 80);
})();
})();
})(window, 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
The “minified” bookmarklet:
javascript:(function(w,url,hasjq){if (!(hasjq=w.jQuery)){var s=document.createElement('script');s.src=url;(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(s);} (function go(){if (!w.jQuery){return w.setTimeout(go, 200);}var $=w.jQuery;if(!hasjq)$=$.noConflict();var $s=$('p,div,img,span,strong,em');(function shake(){$s.each(function(){if(this.shift)this.shift=0;else this.shift=(2*(Math.floor(Math.random()*2))-1)*(Math.floor(Math.random()*4));$(this).css('margin-left',this.shift);});w.setTimeout(shake, 80);})();})();})(window,'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
Hand coded Earthquakelet, no jQuery
400 bytes (223 minified)
(function (w) {
var ele = document.querySelectorAll('p,div,img,span,strong,em'),
len = ele.length,
i = 0,
shift = 0,
M = Math;
(function quake() {
for (i = 0; i < len; i++) {
shift = M.floor(M.random() * 6) - 3;
ele[i].style.marginLeft = shift+'px';
}; w.setTimeout(quake, 80);
})();
})(window);
The “minified” bookmarklet:
javascript:(function(w){var e=document.querySelectorAll('p,div,img,span,strong,em'),l=e.length,i=0,s=0,M=Math;(function q(){for(i=0;i<l;i++){s=M.floor(M.random()*6)-3;e[i].style.marginLeft=s+'px';};w.setTimeout(q, 80);})();})(window);
As you can see, the hand coded bookmark is even shorter than the bookmarklet using jQuery. It works in every modern browser that supports bookmarklets and in older browsers that support querySelectorAll. So if you don’t need to support IE7 or older, you should be quite safe to go.
hat tip to Orinoco for the Math improvement – see comments below
Nice! Although could be made smaller by changing the rather bizarre:
shift = (2 * (M.floor(M.random() * 2)) – 1) * (M.floor(M.random() * 4));
(first bit returns either 1 or -1, 2nd part returns 0-3 giving a range of -3 to 3) so all you need is:
shift = M.floor(M.random() * 6) – 3;
My main intent was not so much to minify at all costs but to get rid of jQuery and to find a half way interesting story for the links inside – but you are right and I should have noticed too that the math is too complicated.
Thank you for finding it, I have changed it. 🙂
Hi QuHno, nice to see that you tell is big-fat jQ ist not always a good choice.
In my small projects i try to deal with own optimzed code. But if i’m runnig a big webapp, coding with a JS framework is better to handle.
While I personally loathe jQuery because it sometimes can make debugging of foreign code extremely painful, there are at least some valid reasons to use it, see:
https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit?pli=1
For all of those who actually like the jQuery API but do not want all of the bloat, may be http://zeptojs.com/ is a viable alternative – and there are others too.
What I condemn is that some people, just because they are too lazy to learn the language or because their grandfather did it like that, throw that bulk on everything without even reflecting if they need it, e.g. I have seen _many_ scripts that use it only for selecting elements which is pure and utter nonsense.
Additionally it is a dependency.
What do you do if jQuery changes? (It did several times)
– Host the version you need by yourself? (sometimes – but it costs data volume and server performance)
– Change your scripts accordingly? (unlikely in the industry; written once, changed never – unless the whole page is rebuild)
There is a whole bunch of other reasons – but the main reason for me is:
I don’t want just another layer of abstraction on top of all of the layers of abstraction I can’t change.