Tweevio - Last YouTube videos shared on Twitter

Some of you may know that I was working on a project called Tweevio. Tweevio is a website that shows last YouTube videos that are shared on Twitter. My goal was both develop my web programming skills and provide a website which people can discover new videos.

I couldn't work on this project for a long time. But I had completed the Javascript and jQuery part but it was aesthetically poor. I was free lately and I said to myself "It's time to go back and finish what you started". After this motivational moment, I decided to learn HTML and CSS. I was going to need those to make the web page beautiful. Before, my relationship with HTML and CSS was literally like this. I couldn't do I wanted to do. For that reason, I was getting bored quickly and unfortunately this was resulted in giving up. But this time I was determined. And here is the result:

Tweevio

Tweevio*

* Dropbox mirror. It may not work on every browser.

It's not a final version. It's very minimalist now and I want to add some colors to it. And there is a huge empty space on left-side. I don't know how to use the page efficiently for a website like this. Sometimes, page is not acting right because of the Japanese and Chinese tweets, I guess they occupy more space. Other than those, I think it is not a bad beginning for the web programming.

I had made a list of what I am supposed to do for this project. And it turns out that it was a very bad idea. Planning on the things that you don't know really good is not working as expected. It gives general idea but it can be misguiding at the same time. For example, I didn't know that every link in Twitter is converted to a short url which is start with t.co and for that reason I needed another plug-in to lengthen that t.co url.

While I was making this, these stackoverflow questions helped me a lot while I was working on this project.

• http://stackoverflow.com/questions/2222847/asynchronous-programming-in-javascript-without-messy-callbacks (Especially this one drove me crazy.)
• http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url
• http://stackoverflow.com/questions/9827095/is-it-possible-to-use-jquery-on-and-hover
• http://stackoverflow.com/questions/11449175/how-to-access-ul-elements-created-by-jquery

PS: David Bowie rocks!
UPDATE (13.06.2013) Twitter upgraded its API to the new version. That's why currently Tweevio is not working.

Tweevio - What and how?

I really like doing something with Twitter API. Last year, while I was trying to learn Python, I wrote a script that receives the trending topics in Twitter. (You can see the code here.)

Now I'm planning to do a project with using Twitter API again. Actually, I'm thinking on it very long but I have a chance to make it happen at this moment. I even gave a name for it: Tweevio.

Tweevio will show the last Youtube videos that are shared in Twitter. Yes, that simple.

After this convincing explanation of the project, let see how I'm planing to do this project:

I think I have to use Youtube API for playing videos. Also, I'm planning to use jQuery library. Actually, I don't know jQuery but in CodeAcademy there are really good tutorials. I will follow those tutorias to have an idea. The reason I choose jQuery is to make my job easier on sending HTTP request and JSON parsing.

Before starting this project, I separated the things that will be done into simple tasks. Here they are:

• Send HTTP request to Twitter Search API. And store the response in a variable. (Youtube.com, youtu.be will be searched in tweets.)
• Parse the JSON which will come as response and extract Youtube links from it. (Maybe using regular expressions.) 
• Write a simple website which just has an input box and button. This website will show the Youtube video whose url is entered in input box.
• Prepare a very simple website with Twitter Bootstrap. (Use placeholder images.)

This is the design of the site created with Balsamiq Mockups.