I am completely blown away by the simplicity of Youtube Instant. Completely. It is so simple, yet whimsy and really mindblowingly innovative.In a nutshell, YTInstant.com is a website that automatically searches for a video without you pressing enter, like an intuitive video search.
This app is reminiscent, if not influenced, by Google Instant, Google's "realer"-time search. I call it "realer" time because the search happens as you type, not through a confirmation. (Though Google's already been searching on type-time, they (Google) essentially removed the "press enter element" from the equation).
Fun fact, the site was a bet between Feross Aboukhadijeh, the developer of www.ytinstant.com, and his roomate. He wagered that he can do this in an hour. Feross lost, because he did it in three. A good thing as well, because one hour development of the site would constitute alien lifeform on earth. Another fun fact, three hours is the average lab time for a college student here in the Philippines. Yes, I am implying that while a freshman would learn how to write "Hello World" in Turbo Pascal in three hours, Feross A. has developed an app that gave him a job offer in Youtube.
When you think about it, it is purely the perfect combination of the following components:
Ingredients:
- Youtube API
- Javascript Timeout
- Perhaps a pinch of JQuery
- CSS3
- A pinch of Facebook & Twitter API
Components:
Youtube API [link]
The youtube API is an ingenious web API that let's you in Youtube's massive servers for the delight of your very own webapp. Most of the information is in the link above, but for discussion's sake, the site could have accessed this URL via the jquery $.get() method for Youtube's search API [link]:
$.get("http://gdata.youtube.com/feeds/api/videos"
{q : query,
"orderby" : published,
"start-index" : 1,
"max-results" : 5,
"v" : 2}, "xml");On this code, query represents the text input by the user; orderby denotes the datetime, start-index is the start of the search (eg. start-index would be equal to 21 if you are to search for results 21-25), max-results is the max number of items to show, and v refers to the version of the API.
This will return an XML response that is too long for viewing here, but you can see the response here. The site might have opted to use a JSON format aswell, opting for the ease of use of $.getJSON, for one to activate this, add the attribute
"format": 5
Feross has experienced the tightness of Google with the frequency of the API use. With that, a word of caution: if you are testing a Google Subsidiary API, do be mindful on how often you test the application. I myself am a test-trigger-happy developer, so I was not mindful of how many times I connect to Google. The consequence was my total cut-off from google, making me halt most of my API connectivity tests. Google does this to, according to them, prevent abuse. So at least widen the intervals in which you test.
Another component used in the would be the JS playback APIs, but I'll let you discover it on your own. :)
Javascript Timeout
 |
| Yes I searched for Jewel's Who Will Save Your Soul. I am a sucker for the 90s. Such a raw era for music! |
This feature has been around for a long time, only now that AJAX is predominant in the web has it become more important than ever. What timeout does is basically to setup a gap between tasks, to make time if ever a user changes mind or overrides an upcoming activity.
For example, in the case of Youtube Instant, the timeout is ever present in the typing of the youtube search query. Perhaps it could have gone something like:
var timeout = null;
$tf.keydown(function(){
if (timeout) clearTimeout(timeout)
timeout = setTimeout("showvideo()", 500);
});
function showvideo() {
var query = $tf.val();
searchYoutube(query);
}
With the tf referencing the textfield where the user typed the search, and timeout as the handler of the timeout object. the searchYoutube function is the function containing the $.get() method earlier.JQuery + CSS3
The JQuery & CSS3 is more or less the icing on the YTInstant cake. The effects such as the smooth slidedown ($.slideDown()) and the passives ($.addClass(), etc) are all in play in the app.
Design
Design-wise, the cleanliness of the site is marvelous in itself. The developer really let the application speak for itself. The web is a huge compilation of websites that are essentially doing the same things, so they need to standout in their design, just like advertising: a make-up is just some goo with fish scales until Halle Berry holds it on a commercial. Translate it to a website: the more pimped up a facade, the more generic the functionalities.
What I marvelled more about the site are the little things. The fact that Feross used a textualized version of the Youtube logo for (proprietory reasons? j/k) loading speed reasons perhaps (I heard the site initially had a Slashdot effect episode due to the deluge of hits). Also, the whimsy Feross added that I particularly liked was the custom font. It added more humanity to the site, more personal.
 |
| Yes I was listening to Eddie Izzard while writing this. I love him. |
Given that the site is only 3 days old (with an 1M+ hits already!), there are still parts of the site that are with line guides. For example the one on the upper left part of the pause and play button.
Also, it would be great if there is a more social function to the YTInstant. Like a share button of somesort. I'm not sure about the legalities around it though.
Conclusion
All in all, Youtube Instant is a testament that, indeed, simplicity is key. K.I.S.S. could not have been summed up by any other site than this. I am smelling a lot of clones of this one in the coming days. I, myself, am tempted to do it.
But, a word of challenge to those who are tempted as I. Please post your completion time. Wager that you (and I) can do a similar app in an hour.
Let the cloning begin!
---
The things written in this article are approximates on the application discussed above. I did not refer or read the code in the site, perhaps because of a deep respect for the developer, and maybe because the script is now completely minified and could be seizure inducing. I am reading the site through my own machinations of analyzing the components, and slowly studying the functionalities as they come along.
Share Tweet
No comments:
Post a Comment