Archive for November, 2007

CSS Standard Fonts for Websites

Tuesday, November 20th, 2007

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

WAI / XHTML Valid Input Watermarks for Mootools

Thursday, November 15th, 2007

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

IE6 PNG Transparency Fix with Javascript v2.0

Tuesday, November 13th, 2007

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

Optimizing Page Load Time – Images

Tuesday, November 13th, 2007

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:

Optimizing HTTP requests

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

Optimizing Page Load Time – A. Hopkins (Google)

Sunday, November 11th, 2007

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

Custom Dropdown (Styled Select)

Friday, November 2nd, 2007

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
Custom Dropdown

and example of custom styled dropdown