Tag Archives: Web 2.0

OpenLayers Can Be Faster!

javascript, micro tutorial, , , , , , ,

Put All The Markers at Once!

The way OpenLayers puts markers on the stage is fine when they are not so much, but once you need more than 100, the library’s solution is not good. The question is is there a way to put all the markers faster than the built in method.

Yes, There is a Way to Speed Up Markers Load

I once wrote about how to speed up markers on OpenLayers, it is clear that my decision was to concatenate the DOM elements like a string after I’ve generated all the markers as markup with innerHTML as it’s faster than appendChild. The only question left is how to convert Longitude/Latitude pair in pixels.

The Answer’s Given by OpenLayers

There is a method called getLayerPxFromLonLat() which do the job. Let me show you a snippet:

ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat));
console.log(ll);

You can see what’s inside the ll object. You can now reference the pixel as ll.y and ll.x.

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);

Manage JavaScript and CSS includes within Zend Framework application

css, javascript, zend framework, , , , , , , , , , ,

How to include JavaScript and CSS files?

In Zend Framework there is a very elegant way to include CSS and JavaScript. Because in one single view of any action you cannot include a JavaScript or CSS because they wont be executed from the browser, you can simply use a helper.

You can see the original source of how that’s done here. And in breve you can include a JS file like so:

<? $this->headScript()->appendFile('/media/js/global.js') ?>

but where the problem is?

As a very good PHP point of view, there is really that way to include JS into the application. But a PHP point of view is not a JavaScript point of view so this solution is not the best one.

As almost everybody knows JavaScript blocks other content until it’s loaded and executed from the server and nowadays the most popular way to include JS is just before the closing <body> tag.

That’s why the ZF solution is not optimal. What we actually need as both PHP and JavaScript developers is a most robust solution!

OpenLayers extreme optimization. Cut, compress and deploy!

javascript, micro tutorial, , , , ,

Make it really faster!

Following several posts I wrote recently, this one will describe you a simple and robust tutorial how to optimize OpenLayers. My goal is pretty simple. I’d like smaller library but still with everything must work correctly. The fact is that OpenLayers comes with more that what I need so I’m going to exclude some files from the build process.

Step 1

This procedure I found here, and what I made is to copy/paste the whole list described there. The problem is that immediately the application stopped working, but in the same time I could catch what errors were stopping it and simply I was able to include again those files needed by my application.

Step 2

Even when I excluded everything from the library, there are some files I don’t need but that enter the resulting build. That’s because they depend on classes I need and the builder is simply adding them. The solution, even stupid enough, is to comment them all.

Note that on every step you need to check if the application is still fully functional. That’s a bit annoying, but it comes on the price of faster app.

Step 3

Change the compiler! Actually now OpenLayers is using JSMin, but I personally use Google Closure Compiler with it’s default level of optimization. Thus the resulting OpenLayers is 312K and still fully functional. After GZip it becomes even smaller and the load time is pretty good.

Cool tutorial about Zend_Paginator

zend framework, , , , , , , , , , , , , , , , , ,

Every part of Zend Framework is indeed very profesional and useful. But as it happens often some modules are less used than others. Don’t know why but my feeling is that Zend_Paginator, a wonderful tool for pagination is really misunderstood. And in fact it does one of the most common web development tasks. It builds the abstraction for a component that everybody uses in a web project – pagination.

It make sense if there where more tutorials like the following one describing its usage! Many thanks to Joey Rivera for a great tutorial about Zend_Paginator.

Even more this tutorials goes behind the pure usage of the paginator but it helps you understand the integration with one of the most used web apps today – Twitter and another Zend Framework component – Zend_Cache.

joey rivera blog