Tag Archives: Google Inc.

Iterate over YouTube Channel with Zend_Gdata_YouTube

micro tutorial, PHP, zend framework, , , , , , , , , , , , , , , , , , ,

Read YouTube’s Feed in Zend App

The task is to read the entire Gdata from a YouTube’s channel. It may sound easy, but as you may know Gdata is based on the Atom publishing protocol, and it naturally gives you only the latest few items.

Of course Zend Framework has a large set of classes dealing with Google’s Gdata services, one of them is the Zend_Gdata_YouTube.

It gives you the power to iterate/paginate over the entire set of YouTube user’s/channel’s videos. In that example let’s assume you have a protected function doing the reading of a single portion:

protected function _process(Zend_Gdata_YouTube_VideoFeed $videoFeed)
{
 
    /* @var $entry Zend_Gdata_YouTube_VideoEntry */
    foreach ($videoFeed as $entry) {
        /* @var $published Zend_Gdata_App_Extension_Published */
        $published = $entry->getPublished();
        $thumbnails = $entry->getVideoThumbnails();
 
        // set date format
        $date = new Zend_Date($published->getText());
 
        // array
        $tags = $entry->getVideoTags();
 
        $data['title'] = $entry->getVideoTitle();
        $data['description'] = $entry->getVideoDescription();
        $data['date'] = $date->get('Y-MM-d hh:mm:ss');
        $data['thumb'] = @$thumbnails[3]['url'];
        $data['id'] = $entry->getVideoId();
        $data['flash_player'] = $entry->getFlashPlayerUrl();
        $data['tags'] = implode(',', $tags) . ', ' . $entry->getVideoCategory();
        // do whatever you want with the data
    }
 
}

The only thing left is to iterate over the “pages” of the feed. This can be done with getNextFeed() method.

public function readRssAction()
{
    $userId = 'some_user';
    $client = new Zend_Http_Client();
    $gdata = new Zend_Gdata_YouTube($client, 'my-app', null, $this->_apiKey);
    $videoFeed = $gdata->getUserUploads($userId);
 
    // save the last items
    $this->_process($videoFeed);
 
    try {
        while ($videoFeed = $videoFeed->getNextFeed()) {
            $this->_process($videoFeed);
        }
    } catch (Zend_Gdata_App_Exception $e) {
        echo $e->getMessage();
    }
}

You’ll get an exception when there is no more feeds to process!

To combine all this into a single controller and to complete the code here’s the entire source:

class YoutubeController extends Zend_Controller_Action
{
    protected $_apiKey = 'your_api_key_goes_here';
 
    protected function _process(Zend_Gdata_YouTube_VideoFeed $videoFeed)
    {
 
        /* @var $entry Zend_Gdata_YouTube_VideoEntry */
        foreach ($videoFeed as $entry) {
            /* @var $published Zend_Gdata_App_Extension_Published */
            $published = $entry->getPublished();
            $thumbnails = $entry->getVideoThumbnails();
 
            // set date format
            $date = new Zend_Date($published->getText());
 
            // array
            $tags = $entry->getVideoTags();
 
            $data['title'] = $entry->getVideoTitle();
            $data['description'] = $entry->getVideoDescription();
            $data['date'] = $date->get('Y-MM-d hh:mm:ss');
            $data['thumb'] = @$thumbnails[3]['url'];
            $data['id'] = $entry->getVideoId();
            $data['flash_player'] = $entry->getFlashPlayerUrl();
            $data['tags'] = implode(',', $tags) . ', ' . $entry->getVideoCategory();
            // do whatever you want with the data
        }
    }
 
    public function readRssAction()
    {
        $userId = 'some_user';
        $client = new Zend_Http_Client();
        $gdata = new Zend_Gdata_YouTube($client, 'my-app', null, $this->_apiKey);
        $videoFeed = $gdata->getUserUploads($userId);
 
        // save the last items
        $this->_process($videoFeed);
 
        try {
            while ($videoFeed = $videoFeed->getNextFeed()) {
                $this->_process($videoFeed);
            }
        } catch (Zend_Gdata_App_Exception $e) {
            echo $e->getMessage();
        }
    }
}

Note: here you’ve to substitute the API key with the one you’ve for your development.

Retrieving YouTube Channel’s Videos with Zend_Gdata_YouTube

micro tutorial, snippets, zend framework, , , , , , , , , , , , , ,

Zend_Gdata

Zend Framework gives you the possibility to interact with Gdata services, which are provided by most of the Goolge services. You can find more on the docs page of Zend_Gdata. The basic principle is that you can connect a service with you API key, given by Google. What I’m about to show you is how do connect such a service.

In theory Zend_Gdata depends on Zend_Http_Client and you’ve to connect it with an instance of this class.

// 1. setup API key
$apiKey = 'your_api_key_here';
 
// 2. retrieve videos via GData Atom
$client = new Zend_Http_Client();
$gdata = new Zend_Gdata_YouTube(null, 'my-app', null, $apiKey);

Note that you’ve to replace your API key in the chunk above.

Now once that you’ve connected the YouTube service you can iterate through the entries from the video feed.

$videoFeed = $gdata->getUserUploads('username');
foreach ($videoFeed as $entry) {
    echo $entry->getTitle();
}

The thing is that you can modify a bit the code above. As ZF docs says if you don’t setup a Zend_Http_Client a default with default configuration, so you can omit this and simple write:

// 1. setup API key
$apiKey = 'your_api_key_here';
 
// 2. retrieve videos via GData Atom
$gdata = new Zend_Gdata_YouTube(null, 'my-app', null, $apiKey);

Javascript Libraries Popularity

javascript, , , , , , , , , , , , ,

JavaScript and Market Share?!

It’s kind of strange to speak about JavaScript libraries and market share, so lets called it “popularity”. Have you ever been interested on which is the most famous JS library.

I’d guess everybody has the answer in his head, right? jQuery is becoming for the JS community something like Google for the web or IE6 on the browser’s market in the beginning of the century. How odd?!

However here’s a short list of who’s first.

1. Robert Nyman’s poll:

Note: original poll page’s here.

Clear enough jQuery rocks. As I personally use jQuery I still think that its success is based on his easy to start nature. However lets see another result chart.

2. Chris Coyier from http://css-tricks.com is showing almost the same result:

Note: original poll can be found here.

3. Finally Polldaddy’s hosting a poll, where the results are even more interesting.

Polldaddy

Note: original source of the poll.

From these results I get more surprised not so much from the jQuery big advantage, but more from YUI. It’s a really very very powerful JavaScript library, perhaps misunderstood maybe because of it’s native complexity, don’t know?!

CSS Priority: The Difference Between a.my-class and .my-class

css, , , , ,

Do You Know What’s an Inefficient CSS Selector?

Perhaps! I was curious how can inefficient selectors impact a page performance. To begin with this topic let me say that inefficient selector is referred usually as nested selector:

div span div {
    border:1px solid red;
}

as you can see here there are three nested tags I use to reference the innermost div. If you’re wondering how you’d know about inefficient selectors – well there is a plugin for the Firebug written by a Google team called Page Speed explaining which of your selectors are inefficient. See the image below.

CSS Page Speed Inefficient Selectors

In the demo page you can find what I was trying to achieve and you can play around with that code to measure by yourself the performance of the different selectors.

So who’s faster? Nested, IDs or Classes?

Actually its pretty though to say. Yet another surprise for me was to notice that the notation:

div.my-class {}

was a bit slower than the marked as “inefficient” by Page Speed:

div span div {}

Another good thing to mention is that there is a difference between div.my-class and .my-class

Question’s answer …

In fact div.my-class is always with a higher priority than .my-class even if you’ve the following code:

div.my-class {
    border:1px solid red;
}
 
.my-class {
    border:1px solid blue;
}
 
div span div {
    border:1px solid black;
}

And the computed style for Firefox was …

CSS Selector Performance Computed Style

where “div span div” chain matches the same elements as the previous selectors, as you can see:

CSS Selector DOM View

so even that div.my-class will be the most important and finally the element will get its red border! It does not depend only on where you put the CSS rules, but also on how they are defined.

Change the Viewport, be Ready for the iPhone!

micro tutorial, web development, , , , , , , , , , , , ,

Sites for mobile

Have you ever noticed that once you start designing a site for mobile, as iPhone and Nexus One from Google are, the site is looking really ugly! These two devices in particular, as may other using Opera Mini for instance, scale the site, because only than you can view the entire layout and than zoom to a particular part of the page.

This is nice because news sites as cnn.com or lemonde.fr are full of text & image information and once zoomed in they fit the screen – very nice feature of the browsers. However if you’d like to design a site for mobile the bad part comes here. Yeah you know how to detect the browser, that was a topic of one of my previous posts, but even than you fully functional, but less decorated site is scaled again and looks more ugly than the full version of the site.

Twitter for mobile

How to make a site visible in mobile …

Look at the http://mobile.twitter.com – the problem is that if you open this link with a normal browser, not from mobile, you’ll get redirected to the twitter.com and you cannot see the difference.

You can see how it’s made on …

The digg’s mobile version. Look at http://m.digg.com. This time you can see the different approach just by looking at the source code. Pay attention to meta tag in the head – it simply says – “don’t scale”. Nice thing to notice!

Don’t scale my site anymore:

<html>
 <head>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 </head>
...
</html>