Peter Velichkov's Blog

On 17 Jan 2008 took place the first event in Bulgaria dedicated to Adobe Flex and building RIA with it. It was well organized by Gugga and RIABG with one exception - it was in a weekly day which for sure lowered the number of visitors.

Summary of the things that were interesting to me:

1. A sneak preview of Adobe Thermo - there are couple of videos already on YouTube
   1. http://www.youtube.com/watch?v=XecRJgbdCtU
   2. http://www.youtube.com/watch?v=qzAKlSE_-9o
2. Adobe Flex 3 CRUD Database Wizard
3. Couple of presentations which included good explanations for Flex databinding mechanism
4. A demo of SWFAddress deeplinking utility

Of course there were some disappointments too - there was one presentation about laptop.bg which looked like payed commercial because it didn’t showed anything connected with Flex even the site itself and one more: the guy sitting in front of me took the iPod

Anyway it was a good experience, I hope there will be plenty more.

After updating to the latest Icedove (Thunderbird) package from the Unstable (Sid) repository my feeds stopped coming.

The solution is editing /etc/icedove/pref/icedove.js and comment the following line:

pref(”network.protocol-handler.external.http”, true);

After that everything works fine!

For further explanation check the bugreport

Couple of people around the forums and here commented that none of the current Internet Explorer 6 PNG scripts provide fix for the issue of using png image as CSS repeated background (background-repeat: repeat/repeat-x/repeat-y).

Therefor with no generic solution at this time I thought of three possible workarounds:

1. Use sizingMethod=’scale’
2. Use flash for rendering the png
3. Make as much as needed areas and repeat with Javascript

Here I will explain the first one since it was the easiest to try.

The idea is very simple just use filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’the-image-you-want-to-repeat.png’ ) and make sure you properly apply the other CSS rules. This technique uses scaling instead of repeating but for shadows and other cool effects it is sufficient.

End result and demo following:

For more info see the demo under Internet Explorer 6

I was always keen on speed improvements and something that might be worth sharing are couple of techniques for improving caching efficiency and effect.

Lets review what happens when a user tries to load a web page:

1. The user’s browser sends request for the HTML (I’m skipping the part with dns lookups, three way handshaking etc)

2. While HTML is being parsed additional request are done for all other contents - CSS, Javascript, Images, etc.

3. When the browser requests some file (image for example) it first checks in the browser cache with two possibilities:

3.1 File is not in the cache, so there is another HTTP GET Reques sent to the server

3.2 File is in the cache - here starts the tricky part.

OK we have the file in the cache but the browser needs to check if there is newer version of this file and therefore sends Conditional Request to the server asking if the content has changed. Luckily sometimes the file is not changed (understood from the timestamp) and the server answers 304 (not modified) so we have saved bandwidth but not HTTP request.

The bad news is that nowadays bandwidth savings usually are less important than requests count!
For getting out of this uncomfortable situation there are HTTP Expires Headers - generally they define for how long a cached object is fresh and can be served directly from the cache without additional modification checks.

The tip for today: Add HTTP Expires Headers to all objects that you don’t change often, this way except from bandwidth you will save and couple otherwise expensive HTTP Requests.

Update: Another interesting thing that I stumbled upon is Contextual Precaching - generally when clicking on the search input on Yahoo’s homepage they start preloading images for the search result page - pretty neat huh?

With Vista released Microsoft replaced the “Standard Web Fonts” with the so cold “C fonts” - Cambria, Calibri, Candara, Consolas, Constantia, and Corbel. To take advantage of them (if available on the user’s computer) you can use the following font-family CSS definitions.

1
2
3
4
5
6
7
8
9
10
11

font-family: Helvetica, Calibri, Arial, sans-serif; /* or */
 
font-family: Corbel, Verdana, "Bitstream Vera Sans", sans-serif; /* or */
 
font-family: Candara, "Trebuchet MS", Trebuchet, sans-serif; /* or */
 
font-family: Cambria, "Times New Roman", Times, serif; /* or */
 
font-family: Constantia, "Palatino Linotype", Palatino, Georgia, serif; /* or */
 
font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;

If you don’t have the “C” fonts you can download and install Microsoft’s Powerpoint Viewer 2007 which contains them.

For visual comparison check this pdf

Just refactored the input watermarking script, of course it is still XHTML 1.0 transitional and WCAG priority 1,2 valid.

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 
// This Javascript is written by Peter Velichkov (http://www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
 
var values = new Array();
var inputs = new Array();
 
function addWaterMark(el){
	try {
		values.push(el.value);
		el.addEvent('focus',function(){
			if (el.value === values[inputs.indexOf(el)]){el.value = ''};
		});
		el.addEvent('blur',function(){
			if(this.value === ''){el.value = values[inputs.indexOf(el)]};
		});
	} catch(e) {dbug.log('addWaterMark: ', e)}
};
window.addEvent('domready', function(){
	inputs = $$('input.watermark');
	inputs.each(addWaterMark);
});
//-->

Usage: Just put value on you inputs and use class=”watermark”

As usual example

Thanks to Aaron Newton from CNET.com for refactoring my PNG Fix script and increasing its quality and speed.

As usual for dessert explanations + demo and source code

For a work in progress in my spare time (a Wordpress Theme) I decided to implement one quite useful technique for images merging that has the following pros:

• reduces HTTP requests
• usually leads to better compression
• no flickering with onmouseover events

I suggest using it when you have many looking-alike graphical elements (buttons, icons, panels) that you are setting as not-repeating CSS background.

Having prepared your image (merging couple buttons) in this case:

use CSS definitions like the following (notice the background vertical position 0,31,62 )

1
2
3
4
5
6
7
8
9
10
11
12

#button1 a{
 
    background:transparent url(image-optimization.gif) no-repeat 0 0;
 
}#button2 a{
 
    background:transparent url(image-optimization.gif) no-repeat 0 -31px;
 
}#button3 a{
 
    background:transparent url(image-optimization.gif)  no-repeat 0 -62px;
}

And as usual everything wrapped in simple example

While investigating some performance issue on a project I’m working on I stumbled upon this very useful article by a Google system engineer. It is basic but still covers most of the major speed issues on today’s Web 2.0 rich websites and is worth reading:

It is widely accepted that fast-loading pages improve the user experience. In recent years, many sites have started using AJAX techniques to reduce latency. Rather than round-trip through the server retrieving a completely new page with every click, often the browser can either alter the layout of the page instantly or fetch a small amount of HTML, XML, or javascript from the server and alter the existing age. In either case, this significantly decreases the amount of time between a user click and the browser finishing rendering the new content.

However, for many sites that reference dozens of external objects, the majority of the page load time is spent in separate HTTP requests for images, javascript, and stylesheets. AJAX probably could help, but speeding up or eliminating these separate HTTP requests might help more, yet there isn’t a common body of knowledge about how to do so.

While working on optimizing page load times for a high-profile AJAX application, I had a chance to investigate how much I could reduce latency due to external objects. Specifically, I looked into how the HTTP client implementation in common browsers and characteristics of common Internet connections affect page load time for pages with many small objects…

more

Update: A far more better approach is to dynamically replace <select>’s in the HTML. Here is my post on the topic - Customizable Form Select / Dropdown Replacement with Mootools

Got tired of not able to style (colors, padding, background image, etc) dropdowns under various browsers (Internet Explorer and Safari are proven worst). Using my very favorite javascript framework mootools I created some simple dropdown simulating the select and option html tags usage.

Picture == thousand words

and example of custom styled dropdown