Wednesday Sep 05, 2007

DOCTYPE (short for Document Type Declaration) is something that you often see it (via HTML page source), and perhaps work with it all the time (if you are working on the web). DOCTYPE element usually appears on top of a well formed HTML/XHTML page. It looks like


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

or


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

What does it do?

DOCTYPE tells the rendering browser the markup specification that the page adheres to. Let's analyze one of the sample DOCTYPE:

<!DOCTYPE html
This is HTML markup

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
The markup follows "XHTML 1.0 Transitional" standard

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
The markup on this document follows
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" XHTML DTD convention.

Why do we need it?

When a browser renders a web page, it wants to know what type of markup the page conforms to. Knowing the markup format, the browser can make sure that the CSS stylesheet and style attributes in the markup are rendered properly. Web designers can be sure that the markup output will behave as he intends it to.

What if I don't have one?

Most popular browsers (IE, FireFox, Safari, Netscape) can operate in quirk mode when DOCTYPE markup is not presented or malformed. In quirk mode the browser will have to guess what type of HTML mark up the page adheres to, whether it's HTML 3.2, 4.0 or one of the XHTML markup types. You really should specify DOCTYPE to ensure consistency of rendered output.

Well, if it looks good on my deploying browsers' quirk mode, why else should I care?

If you are running the browser on a powerful PC, it should be no problem. Yes, no problem if you are willing to segment out billions who run browser on mobile and embedded devices. All mobile platform developers know that on these kind of devices, every byte of memory matters and tight control over browser rendering engine is essential . There are also incredible number of machines running IE 5 and Netscape 4.x under 256MB of RAM, in that environment.

Sadly, I didn't know or care much about what DOCTYPE does until recently. It used to be my 'copy-n-paste' kinda thing =) and it still is for many others.

Thursday Dec 28, 2006

Aside from my study and my role at Sun, I also work part time as freelance 
web developer for some extra cash and fun. A few months ago, a client had asked
me to ajaxify her online store website. I was puzzled by the request
as I had already made the site asynchrony whereever appropriate on the last
update. So I asked her more specifically of what she wants.
Here are list of things she suggested to add on her site:




- Slider bar for scrolling item catalogs

- Drag and drop item on the shopping cart
- Fade in-out effect on item images on mouseover
- Showing loading image when user try to login to
It's now evident to me that what she wanted was not AJAX but client-side effects 
from DHTML/JavaScript.
Later, I also found that this misunderstanding of AJAX is quite common, 
even to junior computing science students. A friend of mine who is quite
new to programming had asked me to help him put some neat AJAX effects on
his school assignments. His idea of AJAX was not much different than that
of my client.
It seems to me that what these people miss is the meaning 
of the first 'A' for 'Asynchronous' in AJAX. This is not
surprising since asynchronous process is supposed to be running in the
background by definition. Also, most of online demo and example of AJAX
are always accompanied by cool client-side scripting effects. So, to people
who can be careless about web programming, AJAX often means 'cool looking client
side effect' rather than its original meaning (as coined by Jesse James Garrett).
In my opinion, this is quite ironic. I think the most essential quality of
AJAX is that first 'A'
that allows developers to deliver seamless data-driven
web application and wonderful UI experience to users.
Here are some links I found useful for understanding AJAX and see it in action:
Jesse James Garrett's definition of AJAX

Sun's AJAX developer resource center
Sun's J2EE AJAX Tutorial
Sun's AJAX and JSF Tutorial
Sun's Java AJAX Bluprints

Drawback and use of AJAX
Project JMaki
AJAX patterns and frameworks
AJAX.NET: Microsoft's AJAX framework

This blog copyright 2009 by teera