WAI / XHTML Valid Input Watermarks for Mootools

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


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

As usual example

Optimizing Page Load Time – Images

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 )

And as usual everything wrapped in simple example

Optimizing Page Load Time – A. Hopkins (Google)

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…


Custom Dropdown (Styled Select)

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

Smooth Dynamic Rounded Corners

I have previously read about Javascript ways to make rounded corners but non of the suggested techniques produced antialiased (smooth) corners making me skeptic about the whole concept but curvyCorners proved me wrong – nice rounded corners with arbitrary radius, options for anti-aliasing and borders – Great work Cameron! I also tried the YUI compressor and was able to reduce the size significantly compared to the light version provided. If there is interest I can upload the compressed version.

As usual a demo is worth thousand words

Accessible Non-Standard Fonts in WebSites

Lets face it – the web is limited, web sites are created for different browsers, video modes, operating systems, but to be even more frustrated we have to use the same old, boring fonts. For a special project I needed more artistic and out of the box general feeling(not the standard Verdana, Times new Roman and Arial) and since creating pictures was not an option (due to SEO and Accessibility reasons) I found different approach – sIFR – a collection of Adobe Flash and Javascript files. Generally the idea is designing the page as usual, include the Javascript file, edit the flash file to include your fancy font and point out in the HTML which headings you want replaced – and it is all SEO Friendly and Accessible since search engines and screen readers still see your original headings.

More instructions can be found on sIFR’s homepage and if you are still curious check out the demo

Install Adobe Flex Builder Alpha on Debian

After bumping my head against the monitor for couple of minutes i have successfully installed Adobe Flex Builder Linux Public Alpha on my Debian Unstable Linux. Here is the procedure:

1. wget http://download.macromedia.com/pub/labs/flex/\

2. apt-get install eclipse sun-java5-bin

3. update-alternatives –config java
(set /usr/lib/jvm/java-1.5.0-sun/jre/bin/java to be used)

4. run the installer


IE6 PNG Transparency Fix with Javascript

As always when I need to use some transparent images cursing Internet Explorer 6 is inevitable so i wrote a quick javascript fix. Again mootools was the preferred framework because the ease of use.

Fix description: First I’m looking for all tags that have background-image style and replace it with Microsoft AlphaImageLoader filter, then I search for all <img> tags and replace them with <input> (img src used for style background image again using the MS filter). I used input since it is inline element but still has height and width – like the img tag.

PS. If you use any links in area with PNG used for bg put the links in div with style=”position:relative” else they will not be clickable due to the MS filters

and as always example: IE6 PNG Transparency Fix with JavaScript