stoimen's web log » featured

Zend Framework – Disable Zend Layout

stoimen — Tue, 21 Apr 2009 05:50:41 +0000

What’s Zend Layout

Everybody knows that sometimes you need header and footer for almost every page. In Zend Framework you don’t need to include them in every template page, as it will be if you were using Smarty for instance. You just need to use Zend_Layout. It’s easy and it’s helpful.

What if you don’t need layout for a controller action?

Well if you have to have a given controller action with no use of Zend_Layout, you just need to disable it.

How …

… simply by placing this line in you controller action:

$this->_helper->layout->disableLayout();

You should not insert an “a” tag in another “a” tag! …

stoimen — Tue, 14 Apr 2009 05:31:34 +0000

The Problem

Well it may look strange to want to do that exaclty. Who wants to have a tag in another. It really looks semanticaly incorrect, but however, every normal A grade browser’s displaing it correctly, except .. IE6.

The Case

The Microsoft team may be too much semanticaly involved in that problem, I should guess, but that’s really impossible.

The Workaround

The workaround is trivial. You just put the tags one after another and adjust them with relative position and margin with negative values.

… and The Example

link here

link there

load flash .swf in hidden div

stoimen — Tue, 14 Apr 2009 05:23:21 +0000

Well let’s assume you’ve a

and like to load a .swf flash file into it. We suppose you’re using swfobject or any other library or even if you don’t use library that should be a simple thing to do.

But what happens if the

has the style property “display:none”. Than unfortunately the flash file does not load. You get the file from the server, but when you set the

to be “display:block”-ed the flash starts the play from the very beggining.

Actually that’s supposed to be default action. In fact the workaround is like so. You put the

, not to be hidden with that “display:none”, but to be with 0px width and height. something like that:

The overflow is important – cause you’d like to load the swf file into the

and if the swfobject.crateSWF or embedSWF is with 100% width and height, the flash will result with zero height and zero width.

So you may put the flash to load in something like that:

and put that one into the div with overflow hidden. Than the outer

will be ivisible but present to the page and the inner one will be with fixed width and height.

Now when the flash loads, or if the user clicks on some part of the page or fires some event, you can simply reset the width and height of the outer

. The resulting piece of code will look like:

the flash goes here with 100% width and height

With jQuery that should look as follows:

$(document).ready(function() {

$(‘#outer-div’).css({ width: ’800px’, height : ’600px’ });

});

Now you can load the flash in background, even you can start loading it after everything else is loaded – i.e. on document ready event of jQuery, so if you have havy computations in that flash you can simple show something else to the user till the flash loads.

Optimize your images – improve the performance

stoimen — Tue, 07 Apr 2009 05:39:19 +0000

Overview

In a series of articles I’ll share what’s my experience with image optimization. Of course the most images you have the most page weight you have. That’s why optimizing your images should be your primary task.

Image Formats

First, I’m gonna mention several formats, which everyone of the webdevs are using widely. There are GIF, JPEG and PNG, where PNG can be either PNG8 and PNG24 (PNG32 is also available as name of that format).

What are the differences between them and when to use one or another?

Well some of us just use one or another even without knowing the difference or without thinking about the optimization. I remember when I just put the images in JPEG with no idea what are the other formats before.

In fact all the formats has pros and cons.

JPEG

The JPEG format can be either progressive or baseline. The difference is that the progressive JPEG can be loaded directly in the browser with very low quality and then to load with better quality. Some experts insist that this is old school, but I don’t think so. When the image is not the required one (think of a wallpaper preview) the user can skip and go to another without waiting the hole image. The baseline JPEG is loading the good quality image but starting from top to bottom. With portions of the image.

IE and progressive JPEGs

Of course the Internet Explorer 6 don’t support the progressive downloading of an JPEG even if it’s progressive. Well this is no issue till the IE loads the image like a baseline JPEG.

Which JPEG is progressive and which is baseline

You can certainly make some test to determine which JPEG is progressive and which is baseline, from the loading behaviour in your browser. If you’d like to convert an image to a progressive JPEG or baseline you can use a free open source programs out there in the wild online space. Once they are converted to one or another format you can use them widely. Because most of the tools are comand line open source tools you can automate them on the server where the user uploads it’s images. Now every big image can be converted to be progressive.

When to use progressive and baseline JPEGs?

Well the tests show that for images small than 10 K best compression you get with baseline, and for bigger images the small size you get is with progressive JPEGs. There’s the rule use the baseline for thumbs and progressive for any other big image.

GIF

This format is well known from the early ages of the web. It allows transparency and animation. Actually the problem with the GIF images is that they don’t support semi-transparency which is a problem nowadays. Today the web users are used to good quality images and somehow the GIF is not suitable. But it’s still the most used format for icons and of course animations.

When should I use GIF?

Well as I’ll mention in a while the PNG8 is a better format than GIF for transparent small icons. But if you should use some kind of an animation like ajax loading circle (or bar) the GIF format is suitable for you. Than you must use a GIF.

PNG

As I said PNG can be either PNG8 or PNG24 (which is also called PNG32). Actually PNG8 acts just like GIF, with the important exception that it supports semi-transparency, but yet again on every browser except IE6. In IE6 the PNG8 is just the same like GIF which is not so bad. If you’d like to use GIF for an icon, you should make it PNG8. There are semi-transparent pixels (except IE6 and above) and you get better experience on other browsers than GIF.

PNG32 transparency?

In fact PNG32 is not transparent on IE6 (on transparent pixels IE puts some kind of gray pixels). There you can use AlphaImageLoader filter, but that can dramaticaly slow down your browser, so it’s not a good idea.

You should avoid the PNG32 transparent images and the usage of AlphaImageLoader filter.

Conclusion

For every of these formats there lots of tools that remove system information from the image crash and crunch the files so that they become smaller. They can be automated and used on the server.

Now when you use different formats you can be aware of the differences between them and to use the appropriate ones.

FireUnit – the missing extension for Firefox

stoimen — Thu, 02 Apr 2009 05:41:59 +0000

With the FireUnit, extension for Firefox, written by John Resig, the author of jQuery library, you can profile your javascript application, which helps a lot the work with FireBug and Firefox.

Enjoy!

jQuery – accessing a child element

stoimen — Wed, 01 Apr 2009 05:20:03 +0000

Let’s assume you have a

element with 20 tags inside, and each tag has a somewhere inside it. If you’d like to access all those spans you should use this jQuery line:

$('div a').children(':first-child')

Common mistake is to query like that:

$('div a:first-child')

but that is completely other thing, and will return the first tag, not the inside all of them.

Flex 3 Custom Timeline Component

stoimen — Tue, 31 Mar 2009 05:57:22 +0000

Flex 3 custom timeline component Continue reading → Related posts:

Dependency Injection

stoimen — Tue, 31 Mar 2009 05:25:24 +0000

Fabien Potencier writes about the Dependency Injection

With a series of interesting posts Fabien Potencier explains what is a dependency injection and how to use it. Actually as the author says almost everyone of us has used it without even know it’s called ‘dependency injection’. Follow these two links to understand this technique by a given collection of very good examples:

Lambda functions in PHP?

stoimen — Tue, 31 Mar 2009 05:24:50 +0000

What’s new in PHP 5.3.

When I heart about the new PHP 5.3 feature – the lambda functions I was really surprised. Yes really after we have in JavaScript such a powerfull tool, why not having it in PHP. Other new feature, waited so much, are the namespaces.

Anonymous Functions?

The anonymous functions is really a functional programming language feature such as scheme. There are lots of talks about the functional nature of JavaScript, but PHP was really different.

What about anonymous objects

I’d like to see anonymous objects, yet again like in JS, in PHP. This is really powerfull, I hope more programmers would like to see such features in PHP.

CSS color units

stoimen — Fri, 20 Mar 2009 06:30:05 +0000

What is a color unit?

By saying CSS units some may guess this is related to the mesurement units. In fact beside the mesurment there is also a color units defined in CSS.

The most used is the #rrggbb, where the three channels red, green and blue are represented with hexadecimals, i.e. #fa03cd, or the short way #rgb. In fact #cc00cc will be the same with #c0c, but #cc02ca is not like #c0c.

Some purple #FA03CD

Actually there are other ways to set a color on an element. Such a way is to set the rgb(255,255,255), which is white. You can easyly transform the hexadecimals to decimals, it’s obvious that xFF is 255 in decimals.

There are five ways to set up a color with CSS

In general there are five ways to set up color with CSS:

#rrggbb ( for red, green and blue as mentioned – #FF00FA )

#rgb ( short way to say #rrggbb – #CC3 )

rgb( x, y, z ) – ( where x, y and z are numbers between 0 and 255 – rgb( 255, 255, 255) )

rgb( x, y, z ) – ( where x, y and z are percents between 0 and 100 – rgb( 100%, 20%, 23%) )

The Windows palette

There is a fift way to set a color on a element with CSS, with predefined colors corresponding to the MS Windows VGA palette, and they are:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow