Starbucks just opened in Haarlem

Since I have moved in to the Haarlem, Netherlands, and I was craving for a Starbucks. Almost, every city in the Netherlands had their own Starbucks, either a kiosk in the train station or a shop or even both!! And Haarlem is considered as one of the biggest cities in the Netherlands and it didn't have its own Starbucks, and not even a kiosk in the train station. But since the summer they announced that there will be a Starbucks kiosk just outside the Haarlem train station.

And after long days of waiting, the 'Grand Opening of Starbucks' !! WWWooooohhhhhhhhhhhhhhhhhhhhhhooooooooooooooooooooooooo !!!

And here are the opening times

Mon - Wed      7:00 AM - 8:00 PM
Thur - Fri         7:00 AM - 9:00 PM
Saturday         8:00 AM - 8:00 PM
Sunday           9:00 AM - 7:00 PM

Finally, I can enjoy good coffee !

Hoogvliegers Blessing day!

Despite the low temperatures during previous days, it was a really warm day. You could feel the warmth penetrating your clothes to your body making it feel like one of summer’s hottest days. But the warm, cozy feeling was not because of the sun, but rather, it was because there was magic going on at Lelystad Airport that 6 April. That was the wonderful day we were surrounded by the most beautiful and cute children in the country for a Hoogvliegers day.The event was organized by KLM and the company I work for Leaseweb.

Some of the children arrived at the event with their parents, while others came in big trucks! How cool was that? Some even arrived with a police escort! We succeeded in making the children happy by taking some of them on short flights, about 73 in total. Meanwhile, on the ground there was the funniest clown I ever met, who was was really good with the children. The police also put on a fascinating show with the K-9 units showing off their skills and abilities. They had every kind of police and firefighter vehicles open for children to sit inside and explore, including the trauma helicopter! For the children who didn’t fly on that day, their brothers and sisters joined them as well.

Also on show were old and special airplanes where you could go in and explore what was happening inside. The most amazing thing I saw, even more amazing than the whole air show and all the fancy stuff, was the incredible smiles on the kids’ faces. It seemed like they were the ones who were trying to make us happy! Seeing them playing and moving around happily brought incredible happiness to our hearts.

I also got to take a ride in LeaseWeb’s airplane with OCOM’s Innovation director, Laurens Rosenthal! (So basically my boss gave me a ride) I got to experience gravity force, and now I know how my clothes feel when they are inside the washing machine! This year, I signed up for the event so I could socialize with my coworkers and other people. Next year, I’ll do it for the kids.

My colleagues managed to take some shots that can be found on Flickr and on the organization site here.

Thickbox with Ajax Calls

Thickbox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. It is a fantastic plugin, just include the JS file and give your elements the correct class and it will work instantly. For example:

<a class="thickbox" href="thickboxexample.php?height=600&width=600">Click to Show Thickbox button!</a>

Then, the plugin will attach its events to the elements on the page load event, if you look into the thickbox.js you will find

$(document).ready(function(){

tb_init('a.thickbox, area.thickbox, input.thickbox');

});

The problem

I have a page that have a set of buttons at the bottom and that are rendered depending on some set of conditions, so I refresh the displayed by an ajax call...

$.ajax({

url: "refreshDisplayButtons.php",
success: function(){

// Render the new set of buttons

}

});

But, when the new buttons are generated and they have the "thickbox" class, once you try to click them nothing happens!!! Clicking the new generated (rendered) buttons from the ajax call does not work at ALL!!

The reason

Simply, your new generated buttons doesn't have thickbox events attached to them. Because you only had the thickbox plugin initialized once at the beginning of the page load and that is why your newly rendered buttons aren't working when you try clicking them.

Conclusion

You need to reinitialize the thickbox plugin to get it reattached to your new rendered buttons.

$.ajax({

url: "refreshDisplayButtons.php",
complete: function(){

/* I prefer to do it in the complete callback so to make sure that the buttons are already got displayed */

tb_init('a.thickbox, area.thickbox, input.thickbox');

} success: function(){

// Render the new set of buttons

}

});

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.