imgble.com – adaptive image resizing for mobile devices

I am happy to announce the launch of www.imgble.comimgbleis a web-based utility that formats a specified image to best fit in different mobile screens. Those who work with mobile CMS, rendering image for the mobile devices into suitable format and dimension is obviously a big point to be considered which consumes a big portion of the development time. Based on the mobile device’s screen resolution, imgble automatically resizes your image, keeping its aspect ratio. imgble also supports the chaining of different effects on your image, such as blurringadding bordersrotating, etc. You can find everything in the documentation.

So let me know your views, comments, and how imgble will be useful to you 😉

twitree.com – see on which leaves the birds are…

I am happy to announce the launch of twitree.com. It’s a twitter application which allows a twitterer to view his followers in a tree-like navigation, which can be expanded.

twitree makes extensive use of the YUI library. The following components were used :

  • grids css – for the layout
  • yahoo dom event – for DOM and event handling
  • connection manager – for AJAX requests like getting the list of followers for a user
  • container family – to display modal dialogs like prompting for a twitter username, displaying the loading panel
  • JSON utility – to parse the JSON data twitree receives from the twitter servers
  • cookie utility – to fetch username information from a cookie so that the user doesn’t have to input his username every time
  • and finally the treeview control which provides a nice tree and dynamically loads the data upon clicking on a node

The application is very much in an initial phase and there are some limitations, like only 100 followers are being returned, rate limiting, etc…

Stay tuned for further information

Latest update :

twitterers can now

  • update their status via twitree
  • follow a user by right clicking on the user and choose “Follow” from the contextual menu
  • send a direct message to a fellow twitterer by right clicking on the user and choose “Send message” from the contextual menu

FAQ has also been added

9 tips to validate your XHTML code

What is validation ?

According to the W3c, Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking and proofreading for grammar and syntax, but is much more precise and reliable than any of those processes because it is dealing with precisely-specified machine languages, not with nebulously-defined human natural language.


Why taking the trouble to validate your XHTML ?

  • Properly written XHTML code will render better, render on more browsers, and render faster than XHTML with errors. It’s also more easily adapted to print and alternative browsing devices like mobile phones and handheld computers.
  • Properly written XHTML code is more likely to be “future-proof” (backward compatible with future standards and future web browsers).
  • Browsers are becoming more standards compliant, and it is becoming increasingly necessary and important to write valid and standards compliant XHTML code
  • Poorly written XHTML can greatly reduce the amount of traffic your web site receives from search engines.
  • Write XHTML code right the first time and write it once.
  • You don’t want to look foolish among your friends while not knowing the rules, uh?

Tip 1: Specify a DOCTYPE and namespace

Include a DOCTYPE at the top of your page and specify the namespace

For XHTML1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

For XHTML1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

For XHTML1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Tip 2: Specify the character encoding

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Tip 3: Avoid using deprecated tags and attributes.

Deprecated tags :

  • applet
  • basefont
  • center
  • dir
  • font
  • isindex
  • menu
  • s
  • strike
  • u

Deprecated attributes and tags in which they are deprecated :

  • align (caption, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p)
  • alink, link, vlink (body)
  • background (body)
  • bgcolor (table, tr, td, th, body)
  • border (img, object)
  • clear (br)
  • compact (dl, ol, ul)
  • height (td, th)
  • hspace (img, object)
  • language (script)
  • name (img, a, applet, form, frame, iframe, map)
  • noshade (hr)
  • nowrap (td, th)
  • size (hr)
  • start (ol)
  • target (a)
  • text (body)
  • type (li, ol, ul)
  • value (li)
  • version (html)
  • vspace (img, object)
  • width (hr, td, th, pre)

Tip 4: All tags in lowercase

All tags and attribute names must be in lower case and attribute values must be between double quotes (“), i.e

<DIV>
	<Img src="test.jpg" ID=myimage alt='logo' />
</DIV>

is incorrect while correct version goes like this:

<div>
	<img src="test.jpg" id="myimage" alt="logo" />
</div>

Tip 5: XHTML must be well-formed

All opening tags must have closing ones, or if the tag is empty, like br tag, it must have a closing slash. For e.g

<div>
	<p>this is a paragraph</p>
	<br>
	<hr>
	<img src="images.jpg" alt="my company">
</div>

is invalid. The correct code:

<div>
	<p>this is a paragraph</p>
	<br />
	<hr />
	<img src="images.jpg" alt="my company" />
</div>

Also, tags must be properly nested can can’t overlap. An example of bad nesting is

<p>
	<div><strong>this is a paragraph</div></strong>
</p>

It should be like this in order to validate:

<div>
	<p><strong>this is a paragraph</strong></p>
</div>

Tip 6: Images must always have alt attribute

According to the W3C recommendations, the “alt” attribute specifies an alternate text for user agents that cannot display images. Including the alt attribute will not only validate your code but also improve your search engine rankings. In Google’s webmaster guidelines, they advise the use of alternative text for images since they can’t see the images. Instead they rely on the alt attribute.

Correct code :

	<img src="images/logo.jpg" alt="My Company" />

Tip 7: Surround your javascript between CDATA tags

If you’re not using external javascript files, to prevent the validator from spitting errors from your javascript code,

simply surround them within CDATA tags, like this:

<script type="text/javascript">
/* <![CDATA[ */
var myfunction = function(){

};
/* ]]> */
</script> 

Tip 8 : Encode HTML character entities

	<!-- incorrect -->
	my brother & me

	<!-- correct -->
	my brother &amp; me	

Tip 9: Correct way to embed flash movies

Code which won’t validate

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="30" height="30">
	<param name="movie" value="music/sound.swf">
	<param name="quality" value="high">
	<embed src="music/sound.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="30" height="30"></embed>
</object>

Correct way to embed flash movies

<object type="application/x-shockwave-flash" data="music/sound.swf" width="0" height="0">
	<param name="movie" value="music/sound.swf" />
	<param name="quality" value="high"/>
</object>

Or if you want you can use swfobject which offers optimized Flash Player embed methods.

8 practical tips to make your web pages faster

faster web pages

Yahoo’s Exceptional Performance team has compiled a list of 34 best practices to have faster web pages. In this post I’ll show you 8 tips which helped me to get a B grade in YSlow! for web pages that I develop. Currently YSlow’s web page analysis is based on 13 identified basic rules that affect web page performance. In decreasing order of priority they are:

  1. Make Fewer HTTP Requests
  2. Use a Content Delivery Network
  3. Add an Expires Header
  4. Gzip Components
  5. Put CSS at the Top
  6. Move Scripts to the Bottom
  7. Avoid CSS Expressions
  8. Make JavaScript and CSS External
  9. Reduce DNS Lookups
  10. Minify JavaScript
  11. Avoid Redirects
  12. Remove Duplicate Scripts
  13. Configure ETags

You can get more info by clicking on each item. Of course using a CDN is not affordable by everybody, including me. This didn’t prevent me to have a B grade though. I will guide you through some of the items which worked for me.


Make Fewer HTTP Requests
If you’re using the YUI library, the good news is that recently the team graciously offered a Combo Handler Service, served from their CDN. This helps us to eliminate HTTP requests by requesting a single file. For example, to use the Rich Text editor, it needed 6 separate HTTP requests:

 
 
 

 

Now with the Combo Handler service, it has been stripped to only 1 file:


If you’re not using the YUI library or not interested in using the Combo Handler service, you can try Minify!
Minify is a PHP5 app that can combine multiple CSS or Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching.

Another tool which can be helpful is Dojo Shrinksafe which not only minifies your javascript code but also allows you to upload several javascript files and have them compressed in 1 single file.

Another way to make fewer HTTP requests is by using CSS sprites which are big images containing lots of smaller ones. An online tool which can make CSS sprites out of your smaller ones is the CSS Sprite Generator. You just have to upload your pics and it will generate your sprite together with the CSS code. More info about CSS sprites can be found on CSS Tricks.


Add an Expires Header
For this to work on Apache, you’ll need to have mod_expires enabled. Then create an .htaccess file or edit your httpd.conf with the following content:

ExpiresActive On
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType application/javascript "access plus 2 years"
ExpiresByTYpe text/css "access plus 2 years"

In the above listing, all images(jpg/jpeg/gif) will have an expires header 2 years in the future.


Gzip Components
You must have mod_deflate enabled and drop these lines in your httpd.conf file

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

Put CSS at the Top
All CSS must be between your head tag, like that :

	
		
			
		
		
		
		
	

Move Scripts to the Bottom
While the CSS are sitting at the top of your page, javascripts must be moved towards the lower part of your page, typically in the body tag. I usually put them before the closing body tag.

	
		
		
		
		...
		...
		
		
	

Reduce DNS Lookups
I don’t usually have more than 2 DNS lookups in my scripts, else YSlow will be removing some points.


Minify JavaScript
As I mentioned earlier on, Dojo Shrinksafe is an online tool which minifies your code.

Another great command line tool is Julien Lecomte YUI Compressor.

In order to use it you must have Java installed (>= 1.4).

Douglas Crockford also has something similar in JSMin


Configure ETags
Just drop this line in your httpd.conf:

FileETag None

😉