DOCTYPE

A DOCTYPE, or Document Type Declaration, defines the legal structure, elements and attributes of a web page. It is declared at the very top of every web page, and is required for browsers and validators to parse and render the document consistently and correctly.

HTML vs. XHTML

In the process of creating a web page, we have the choice of declaring our markup to be either HTML or XHTML. However, based on my observations, web pages nowadays are mostly declared as XHTML because XHTML, being known as a reformulation of HTML in XML, is an extension and improvement over HTML.

To quote the current XHTML 1.0 Recommendation:

The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content’s backward and future compatibility.

As XHTML conforms to the syntax of XML, XHTML pages are required to be well-formed. By enforcing well-formed rules in our markup, XHTML is more consistent to code and easier to maintain. The following are some of the more important rules of being well-formed:

• elements must be properly nested
• elements and attributes must be written in lowercase
• non-empty elements must be closed
• empty elements are minimized as a single element and closed with a space before the trailing slash
• images must contain alternative text
• markup characters: <, >, & and " are escaped

Being well-formed also means that XHTML is backward-compatible and can be served as HTML, using the media type: text/html. In fact, web servers and server-side scripting environments (PHP, Ruby etc) use this media type for content delivery, and so by default, XHTML pages are served as HTML.

In addition, XHTML inherits a useful feature from XML in XML namespaces. Because of this, XHTML markup can include other markup languages like MathML, SMIL, or SVG, and thus extend the basic functionality of a web document. This is semantic flexibility that isn’t available in HTML.

Deciding between HTML and XHTML is the easy part, but for each declaration, there are also different flavours to choose from, such as the Strict and Transitional DOCTYPE (and Frameset DOCTYPE).

Strict DOCTYPE

A Strict DOCTYPE enforces the separation of structure and presentation, requiring that presentational elements are shifted from markup to CSS. Using a Strict DOCTYPE also ensures that all markup are fully standards-compliant, and would only be processed by browsers in their strictest, standards-compliant mode. Ultimately, this results in the most consistent and forward compatible interpretation of the markup.

Transitional DOCTYPE

A Transitional DOCTYPE is used when transiting from legacy markup to modern standards, permitting the use of some deprecated elements or attributes that were common in legacy markup. This DOCTYPE is not meant to be used permanently and all markup should aim towards implementing the Strict DOCTYPE.

Differences between Strict and Transitional DOCTYPE

In general, most of the differences between a Strict and Transitional DOCTYPE are related to presentational elements. Listed below are some of the differences that are more likely to cause problems when migrating from Transitional to Strict DOCTYPE.

Elements not allowed with Strict DOCTYPEs:

• center
• font
• iframe
• strike
• u

Attributes not allowed with Strict DOCTYPEs:

• align (allowed on table elements: col, colgroup, tbody, td, tfoot, th, thead, and tr)
• language
• background
• bgcolor
• border (allowed on table)
• height (allowed on img and object)
• hspace
• noshade
• nowrap
• target
• text
• link
• vlink
• alink
• vspace
• width (allowed on img, object, table, col, and colgroup)

Conclusion

As most of the readings point out, we should strive to use a Strict DOCTYPE for our web quality’s sake. This is because a Strict DOCTYPE promotes the separation of presentation and structure, and results in code consistency and ease of maintenance of any website. HTML 4.01 Strict or XHTML 1.0 Strict? That would depends on our requirements and application architecture. But from a Web Standardista’s point of view, making sure that a Strict DOCTYPE is in use is more important than anything else.

Note to self: I should start to transit this blog into a Strict DOCTYPE.

Resources:

• Fix Your Site With the Right DOCTYPE!
• Recommended Lists of DTDs
• HTML and XHTML Frequently Answered Questions
• HTML to XHTML
• XHTML Wikipedia
• Serving XHTML As HTML
• HTML or XHTML
• Transitional vs. Strict Markup
• Comparison of Strict and Transitional XHTML
• XHTML1.0 Element Attributes by DTD

During the conceptualization stages of Winston{YW}, I was inspired by Antonio and so, I wanted my WordPress blog to have a Delicious Count Button on each post too. Ideally, this Delicious Count Button could be used to bookmark the post in Delicious, and at the same time, display the number of times the post has been bookmarked on Delicious.

By referring to the new Delicious API, I managed to build this Delicious Count Button with JQuery, and I even styled it to match the looks of the Digg button. Now, I shall go through the process of building this Delicious Count Button for your WordPress blog. See a DEMO here.

Step 1: The Button Image

Browse to the image on Digg’s website. “Right Click” the image, and “Save Image As”. Place the image in your theme’s IMAGES directory.

Step 2: The HTML

You should be familiar with The Loop in WordPress. Copy this snippet of HTML into The Loop; place it where you would like to have this Delicious Count Button.

<div class="post_delicious">
  <span class="md5hash"><?php echo md5(get_permalink()); ?></span>
  <a href="http://del.icio.us/post?v=4&amp;amp;amp;noui&amp;amp;amp;jump=close&amp;amp;amp;url=<?php the_permalink() ?>&amp;amp;amp;title=<?php echo urlencode(the_title('','',FALSE)) ?>" target="_blank">Del.icio.us</a>
</div>

This snippet of code sets up a DIV that contains a SPAN and an ANCHOR. The SPAN is where the magic occurs as the content would be replaced by a count of the number of times your post has been bookmarked on Delicious through the use of JQuery. The content in the SPAN tag is actually a MD5 hash of the permalink of the post, which is used as an unique key to query the Delicious API for details of this post. The ANCHOR is a link which contains the necessary parameters, populated by the details of each post, to submit the post to Delicious.

Step 3: The CSS

Copy this snippet of CSS into the CSS file, which should be styles.css for most WordPress themes. This would style the DIV which you copied in Step 2, and make it look like the Digg button.

.post_delicious {
  display: block;
  background: url("images/tiny-submit.gif") no-repeat top right;
  height: 20px;
  width: 85px;
  padding: 2px 45px 0px 0;
  font-family: arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

  .md5hash {
    display: none;
  }

  .post_delicious a, .post_delicious a:visited {
    float: right;
    color: #444444;
    text-decoration: none;
  }

  .post_delicious a:hover {
    color: #0000000;
    text-decoration: underline;
  }

Step 4: The JQuery Package

Proceed to download the latest version of JQuery, or use a Google-hosted version of JQuery by reading more about it on the Google AJAX Libraries API. Insert the link to the JQuery package in the HEAD tags of your HTML.

<head>
  <!-- Misc Stuff -->
  <script type="text/javascript" src="<directory_to>/jquery-1.2.6.pack.js"></script>
</head>

Step 5: The JQuery Code

Copy this snippet of JQuery code. Place it either in the HEAD tags of your HTML, or at the bottom of your HTML, just before the closing HTML tag.

<script type="text/javascript">
$(function() {

  $.each($("span.md5hash"), function () {
    var elem = $(this);
    $.ajax({ type: "GET",
             dataType: 'jsonp',
             url: "http://feeds.delicious.com/v2/json/urlinfo/"+$(this).html(),
             success: function(data){
               if (data.length > 0) {
                 elem.next().prepend(data[0].total_posts + " ");
               }
             }
          });
  });

})
</script>

This is the MAGIC! Once your blog is loaded in a browser, this snippet of code scans for all the SPAN tags that has the class “md5hash”, and for each SPAN tag found (which should be one per post), it issues an AJAX request to the new Delicious API to obtain details of the post.

On the return of the AJAX request, the content in the SPAN tag (which is the MD5 hash of the permalink) is then replaced with a count of the number of times the post has been bookmarked on Delicious.

Conclusion

Finally, upload your changes and with that, you have successfully placed a Delicious Count Button on each of your posts! I hope you find this post useful, and do let me know in the comments if you have any questions or encounter any problems.

I have it made to be just a plain and simple blog design that’s absent of many colours or other funky design elements, as I hope that the content would eventually be the main draw. But, I also have it optimized in several aspects to make it look aesthetically pleasing (at least to me).

Firstly, the main fonts are 13px at least, and there’s a line height of 1.5em between the lines to make sure that paragraphs are easily readable. Secondly, for every paragraph, the number of words per line is in the range of 12-18 words which is what I understand as the optimum number of words per line. Thirdly, I am using a grid layout that further enhances readability. Last but not least, I am using dark coloured wordings on a white background which is the safest colour combination for any blog design. You may disagree with me on all the aspects I listed above, but well, those are what I believe in.

Anyway, I don’t call myself a designer and this blog is a culmination of inspirations I got from a number of blogs. This list is not exhaustive, but the following are the ones that I felt had the strongest influence in my new blog design:

• Subtraction
• Scribbish Theme
• Woork
• Matt Mellenweg
• Chris Brogan
• ProBlogger
• ReadWriteWeb
• TechCrunch

As of this writing, this blog design is almost complete. But I am still looking to integrate my FriendFeed into the blog. I had a look at the FriendFeed plugin, but am not extremely fond of it. So, for now I would sit on it while I brainstorm for fresh ideas on how to do the integration.

That’s all I have to say about my new blog design. I hope you like it as much as I do, and I welcome feedback or suggestions!

To do that, simply edit the following in the php.ini file:

• Load MySQL extensions from the correct directory: extension_dir = “c:\php\ext”
• Remove the comment tag for: extension=php_mysql.dl”

A simple post that’s really supposed to be appended to the previous post, but I had some problems trying to get the get the code tag working, so I prefer not to touch that post again.

Anyway, my WordPress is in the htdocs directory right now, waiting for me to start some serious templating.

Fortunately, I learnt about LightTPD recently in my work at Wego and how I can use it to replace IIS as the server for PHP. It’s easy installation and setup within minutes. Great! Let’s get started!

1. Download and Install PHP

Download PHP from PHP website. I chose the zip package and simply unzipped it into my directory of choice: Almighty C drive! So now, it’s residing at “C:\php”.

2. Download and Install LightTPD

Download a Win32 version of LightTPD from the WLMP Project; I chose the Setup Wizard (.exe) version.

Double-click on the downloaded executable to start the short installation process, during which you would specify the destination of the install. I installed mine at “C:\Program Files\LightTPD”.

3. Start and Test LightTPD

To start LightTPD, go to the LightTPD directory (i.e. “C:\Program Files\LightTPD”), find the file “TestMode.bat” and double-click on it. A console window would open and indicate that the server has been started.

To test that LightTPD is working at this moment, point your browser to http://localhost. You should see a “LightTPD Test Page”.

That was easy right? Now we just need to edit some configurations to make PHP work with LightTPD.

4. Editing LightTPD Configurations

Edit the file lighttpd-inc.conf (i.e. “C:\Program Files\LightTPD\conf\lighttpd-inc.conf”) with the following:

• Remove the comment tag for “mod-cgi” (Line 20)
• Add this line (assuming that PHP was installed on C drive):
  • cgi.assign = ( “.php” => “C:/php/php-cgi.exe” )

5. Editing PHP Configurations

In your PHP directory, rename the file php.ini-recommended to php.ini and edit php.ini with the following:

• short_open_tag = On
• display_errors = On
• doc_root = “C:\Progra~1\LightTPD\htdocs”

6. Test PHP with LightTPD

To test that LightTPD now works with PHP, create a file with the following contents:

<?php phpinfo(); ?>

Place the file in your htdocs directory (i.e. “C:\Program Files\LightTPD\htdocs”), open up your browser and browse to the page. Walaa! You should be able to see the standard phpinfo() messages.

There you have it! A development environment for PHP on Windows in 6 simple steps. Now, to get started on the new template..

Recall that if you would like to return results for the month of March, you would need to have a condition like:

WHERE created_at BETWEEN "2008-03-01" AND "2008-04-01"

in which created_at is a datetime value.

However, the date range “2008-03-01″ to “2008-04-01″ is not a practical input to the web form. Intuitively, if this date range were to be entered as a form input, the user would have intended that the form returned all results between March 1st to April 1st inclusive. Instead, to return only the results between March 1st and March 31st, a more intuitive input would have been “2008-03-01″ to “2008-03-31″.

Then how can we allow the user to key in a set of intuitive inputs (but erroneous when fed directly to the database), and at the same time return a set of correct results? To overcome this, we have two solutions:

First Solution

Programatically, increase the latter date by a day before constructing your WHERE clause in your select query. For example, we modify “2008-03-31″ to become “2008-04-01″ before issuing the select query to the database.

However, this is not an elegant solution as extraneous code is required to massage the input in order to yield the correct set of results.

Second (and Better) Solution

Use the DATE() function to extract the date part of the datetime value, created_at, in the WHERE conditional clause:

WHERE DATE(created_at) BETWEEN "2008-03-01" AND "2008-03-31"

In this case, you are effectively only comparing the date part of the created_at value to the date range, and timestamp is completely omitted from the comparison.

Simple, intuitive, and yields the expected set of results.

Ruby Thin Server requires the following dependencies:

• Rack
• EventMachine

Unfortunately, the latest version of EventMachine (0.10.0 at the time of this post) is not a Win32 binary release, so it’s a hassle trying to get it installed on Windows. Instead, your best choice would be to download an earlier version of EventMachine 0.8.1, which is a Win32 binary release.

Even though it’s an earlier version, I have not encountered any problems with it. Of course, I am using Windows only for development purposes, and not for production purposes.

Install each dependency by following the steps below before you install Thin.

1. Install Rack.

c:\> gem install rack

2. Download EventMachine 0.8.1

Download. Install EventMachine locally.

c:\> gem install eventmachine -l

3. Install Ruby Thin Server, but ignore dependencies.

c:\> gem install thin --ignore-dependencies

Following these steps should install Ruby Thin Server successfully on your Windows machine.

Update from Google Groups:
Thin has been updated to install EventMachine 0.8.1 if you are on Windows. But you can always rely on the steps above if something fails.

One of the helpful functions I found, was BETWEEN..AND… Previously, if I was extracting data between two dates, e.g. all records that occurred in the month of January, I would code my query like this:

select * from table_name
where created_at >= "2008-01-01" and created_at <= "2008-02-01;

However, the “greater than” and “lesser than” comparison can actually be replaced by a single function, BETWEEN..AND..:

select * from table_name
where created_at between "2008-01-01" and "2008-02-01;

Do note that the first date to be specified in the query MUST be earlier than the second date, else the query would simply return an empty set. Hope you won’t repeat the same mistake as I did.. I had to spend like 15 minutes looking at the query before I discovered the gruesome error.

In addition, if you look at the documentation, it states that:

If expr is greater than or equal to min and expr is less than or equal to max, BETWEEN returns 1, otherwise it returns 0. This is equivalent to the expression (min <= expr AND expr <= max) if all the arguments are of the same type.

Why then did I use “between ‘2008-01-01′ and ‘2008-02-01′” to extract all information that occurred within the month of January, and not “between ‘2008-01-01′ and ‘2008-01-31′”?

This is because, if the timestamp is not stated (i.e. only a date is used), MySQL automatically assumes a timestamp of 00:00:00 for the date. Hence, if I had used “between ‘2008-01-01′ and ‘2008-01-31′”, MySQL would have changed that to “between ‘2008-01-01 00:00:00′ and ‘2008-01-31 00:00:00′”, which clearly indicates that any record with a date of 2008-01-31 and timestamp greater than 00:00:00 would be excluded from the query. This is different from what we want, which is all the records in the month of January, 31st January inclusive.

Try this to verify that MySQL sets a timestamp of 00:00:00 for a date:

mysql> select current_date();

+----------------+
| current_date() |
+----------------+
| 2008-03-17     |
+----------------+
1 row in set (0.00 sec)

mysql> select timestamp(current_date());

+---------------------------+
| timestamp(current_date()) |
+---------------------------+
| 2008-03-17 00:00:00       |
+---------------------------+
1 row in set (0.00 sec)

Hopefully, this post has helped you to better understand how to use BETWEEN..AND.. to query your databases. In my subsequent posts, I will look at other useful MySQL functions.

After following through the extended steps of upgrading WordPress, I encountered the following error on trying to access /wp-admin/upgrade.php:

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, webmaster@winstonyw.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

Searching Google and the WordPress forums gave me an answer. Simply add the following two lines to the .htaccess file which should be residing in the blog’s root directory:

php_value memory_limit 32M
php_flag zend.ze1_compatibility_mode Off

Then, I was able to execute /wp-admin/upgrade.php successfully.However, for some reason, WordPress would overwrite .htaccess during the upgrade procedure, and so the two lines would be missing again. I had to add the two lines back to the .htaccess file before my blog is able to work.

Now I am back in business, after forsaking this blog for more than a year!

Suppose you wish to edit the sizes of the split-windows for Gmail and Reader Integrator, this is possible and easy to accomplish. Follow these steps to customize the Gmail or Reader window sizes to your preference:

1. In Firefox, open Tools > Greasemonkey > Manage..
2. Click on “Gmail + Reader Integrator” in the left panel
3. Click “Edit” button
4. Choose a text editor, preferably with “Lines Number” display
5. Go to Line 54 and 55
6. Edit the sizes (in px)

Quick Tip 1:

In a 1280 x 1024 resolution, the height of an email row in Inbox is approximately 22px. Therefore, the default for “GMAIL_SPLIT_HEIGHT” is set as 220px which displays about 10 email rows in split-window view.

Editing the Size of the Reader Window (Gmail Collapsed )

By default, on collapsing the Gmail window while the Reader is open, the Reader would be resized to fill the height of a screen. Suppose you wish to further extend the height of the Reader when the Gmail window is collapsed, do the following:

1. Search for function resizeReaderFrame, or Line 665
2. Change “window.innerHeight - readerEmbed.offsetTop” to a large value

Quick Tip 2:

You can open|close the Reader window by clicking on the Reader link in the LHS navi. That link is like a “toggle” for the visibility of the Reader window.

Feel free to drop me a message regarding other preferred customizations?

Lastly, the response towards the script has been overwhelming. Thank you!