Just some nice photos from the office – day-to-day life within the small world of idebaik. Between projects, codes, designs, proposals and all-that-stacks there live smiles, laughter, silly jokes, funny pastimes – we are idebaik. 
Posts Tagged ‘jQuery’
Playing with YouTube API*
Wednesday, August 18th, 2010* API : Application programming Interface
Two years ago, I had to do a video section for our in-house website, indonesiaclubbing.com. We already had our own YouTube channel. So everytime I was uploading a video on YouTube, I had to add it once again on indonesiaclubbing database (using a home-made admin panel) so users would be able to view videos directly from our website, without having to visit our YouTube channel.
Adding the info for a video on our website was taking us a few minutes. But two years and 200+ videos later, you can imagine that we have to find a way to avoid this “double-add” process. Time is money.
When I’m not at the office, I’m always looking for new ways to enhance our websites, learn new things, so they can be used by our clients. So let’s consider indonesiaclubbing as the perfect site to test new things in terms of programming.
My idea was simple : using the YouTube API to grab content of my channel directly from YouTube, and display it on my website, so I would not have to care about adding my videos to my own database too everytime I upload a video on YouTube.
YouTube API is “simple”. You call a YouTube URL with some parameters, YouTube send you back a list of videos matching your criterias. Then you have to “transform” the data received in good-looking HTML.
For my tests, I did not want to use PHP, since that’s a language I use every day, I wanted to make the work a bit more challenging by using something I barely use : JSON. JSON is not that complicated in fact. It’s just javascript made for data exchange (a bit like PHP serialize() function). To get YouTube feed, I use jQuery $.ajax() function. To display the video (play it), I use swfobjects, a powerful Flash embedding library.
By default, I load the 12 last videos from my channel, and automatically play the latest one. If you click a YouTube thumb, the page will scroll automatically to the Flash YouTube player (if needed) and automatically play the video corresponding to the clicked thumb (scroll using excellent scrollTo jQuery plug-in).
The page navigation is generated only when the page is initialized. Clicking a page will create a nice fade-in / fade-out effect during the loading of the videos corresponding to the clicked page.
There are still improvements to do (I want to get rid of the youtube control bar and add my own external controls for the video, and also display more information for the video, like comments, rating, description, and so on).
Want to see the results ?
check http://www.indoclubbing.tv !
Without jQuery and swfobjects (loaded directly from Google servers), my overall code is 12Kb (including css + html). Considering that everything was done in just an afternoon, I am pretty happy of the results.
jQuery – What for ?
Sunday, August 8th, 2010Created in 2006, jQuery is a Javascript library that allow you to add a whole bunch of effects and animations to your website, giving it a livelier aspect without using Flash.
At Idebaik, when we were about to launch our own corporate website, almost a year already now, we sought to implement jQuery – but naturally.
And in the months that follow, jQuery gradually becomes something we always advise, when our clients ask for “a dynamic website with moving things”, still sans-Flash. Animated menu bars, fading effects, auto-complete search boxes – we can proudly say that we are, undoubtedly, one of the rare web companies in Indonesia who master this framework at its best.
Among the numerous functions used under jQuery library, we cite an example, the famous animate(), which, as you must’ve already guessed by its name, is a magic function able to animate just any element of a web page, giving it instant, arranged modifications of style (height, width and even background change, when combined with the jQuery UI plugin).
jQuery has become an indomitable element for the actual, up-to-date sites (The fact states that jQuery is currently used on 31% of the planet’s 10,000 most visited websites, including everyone’s favorite pastime-time-wasting social networking titan – the Facebook).
Although, the thing is you need to make use of jQuery wisely, not idly (and, in most cases, ignorantly) doing the erroneous practice of cut-copy-paste from a source you get through internet, without comprehending the library in order to be fully able to exploit the system.
At Idebaik, we create our own jQuery effects, giving you a guarantee that the site you trust us to do will not have such a-dime-a-dozen effects – it will have better, rarer effects, personalized to match your needs.
Obviously, to do that, one needs an excellent level of Javascript skills to completely master all the jQuery subtleties.
The advantage of using jQuery is also based, finally, on the fact that the increasing popularity of this technology gives it a constant evolution, and unlike other Javascript frameworks, we can be sure that the development of jQuery is not going to stop anywhere soon.
By reading this article, we would like to welcome you to the wonderful world of jQuery.
Nevertheless, the one and only little glitch of jQuery is that it is uncompatible with certain browsers from the past, for example Internet Explorer (IE) 5.5 (which hails from the Middle Age of Computers, about 10 years ago). Some people also say that jQuery is “heavy”, but to this I respond that jQuery, just like any other programming language or framework, must be learnt and mastered and a true web company will not rely on “copy-paste web developers” (Specimens of these species abound in Indonesia) – yes, jQuery will indeed be “heavy” if we don’t try to understand how it works, if we don’t care to find out how it works, if we don’t know how to create our own functions, if we don’t know how to optimize it for our own website.
But at Idebaik, we do understand. At our company, you’re in good hands.
We’ll be back in the upcoming weeks on the jQuery subject, upon the launching of several projects, currently in the final phase, all of them most certainly using jQuery in all its splendor and glory. Stay tuned!
