Browser Harlem Shake!

The Harlem Shake has been an internet viral on youtube since February 2013. People, have been doing it at work, colleges, schools .. every where. So, some of the computer geeks thought in a different way ...

1. Press "CTRL + SHIFT + J"
2. Paste the below piece of code
   
   
   javascript:(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML=" <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p><p>";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("\\b"+s+"\\b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()
3. Press Enter

Then, your browser will do doing The Harlem Shake !!

IE chokes with the wrong charset

Web developers know how much IE (Internet Explorer) can be such a pain in the ass when it comes to make it compatible and work like every other internet browser (i.e. Firefox, Chrome, Opera, Safari). Last day, I had the weirdest bug ever at work; which is that IE didn't respond upon an AJAX request received from the server to filter and display search results. What makes it weird, it was nothing complicated, it was just a basic simple ajax request from the server, and it was implemented using the $.ajax function from the browser. It was basically like this:

$.ajax
({

url:uri,
type: 'GET',
traditional: false,
beforeSend: function()
{

...
// do stuff
...

},
success: function(response)
{

...
// process the response
...

}

});

As you can see it is a basic server request, but it was always breaking on IE and working on every other browser. I decided to do some extra debugging and added the error eventHandler for the $.ajax function

$.ajax
({

url:uri,
type: 'GET',
traditional: false,
beforeSend: function()
{

...
// do stuff
...

},
success: function(response)
{

...
// process the response
...

},
error: function(response)
{

...
console.log(response)
...

}

});

And VOILA, in IE the error eventHandler was executed but on every other browser the success eventHandler was executed, and that is what supposed to happen. But when I looked deep into the response that was been printed from the error eventHandler I found that it had an error string that was like this

"Error: Could not complete the operation due to error c00ce56e"

and I was like ... WOW! that was descriptive. After some Google searching, I found out that I was sending the wrong charset from the server to the browser in the HttpHeader.

Content-Type: application/json; charset=utf8

And that was the error basically, the charset was written wrong. It should be

Content-Type: application/json; charset=utf-8

with "-" between the "utf" and the "8", otherwise IE will choke to death and your ajax request will always end up in the error eventHandler of the $.ajax function.

So, magically that was fix for the whole IE choking problem, now it is working smoothly like on every other browser.