Winston{yw}

Lately, I have been reading up on DOCTYPE and (X)HTML as I felt that my knowledge of them was limited. This post is a summary and brain-dump of my readings and is not to be taken as an exhaustive documentation on the subject of DOCTYPE and (X)HTML. Do correct me if I err in any of the stuff mentioned below.

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

Background

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.

In my previous post, I described how to get PHP working with LightTPD on a Windows machine. But that’s not the end of the story, since what I really wanted was to get my local WordPress installation working, and the missing piece to the puzzle is to make sure that PHP is enabled for MySQL use.

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.

This blog is in need of a makeover, and so I am trying to keep the procrastination habit at bay, practice some GTD and get started on creating a new template for it. First of all, I need a local development environment for PHP on Windows, since I am a Windows user. Previously, I would have installed IIS on Windows and used it as the server for PHP, but it’s always a chore trying to find my Windows CD.

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..

Are you having problems upgrading your WordPress to version 2.3.3?

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!

Editing the Sizes of the Split-Windows

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!

The Short Story

I wrote a Greasemonkey script that integrates Gmail with Google Reader.

Features

• Spilt-window view of Gmail and Reader on a single page
• Links to collapse|expand either Gmail or Reader
• Integrated Reader uses start-page as specified in Reader’s “Settings”
• Labels selector
• Key ‘v’ to open Reader links in a new Window
• Automatic resize of Gmail and Reader views

Requirements

• Firefox
• Greasemonkey Extension (Official Site)

Installation Instructions

1. Install Greasemonkey Extension
2. Click on THE SCRIPT (gmailreaderintegrator.user.js)
3. Click “Install”
4. Open Gmail and ENJOY!

Screenshots

The Not-So-Short Story

Recently when Google reintroduced Google Reader with a new look, new features and improved usability, they marketed it as the “Inbox for the Web”. Immediately, the word “inbox” associates the Reader to emails, and Chris Wetherell - Google Reader Engineer, explained that using the Reader to obtain the latest updates of your favourite websites is similar to reading your emails. You just wait for the updates to be sent to your inbox.

Within the same day, the Reader created a huge buzz and I gave it a try. Previously, I wasn’t accustomed to the not-so-intuitive interface of the historical version and so chose to use Rojo as my RSS aggregator instead. But after exploring the new Reader, I was excited about the changes which Google introduced and have started using it as my default RSS reader.

Then, I found this Greasemonkey script by Mihai Parparita, from a post in Lifehacker, which embeds the Reader into Gmail. This makes perfect sense! They both are inboxes and ideally, they should belong on the same page. Moreover, I use Gmail frequently at work and the interface integration is an amazing productivity hack.

However, I felt that it wasn’t adequate for my use, and that my wish-functionalities were similar to comments left on Mihai’s Blog and Lifehacker. Therefore, I decided to write my own script to integrate Gmail and Google Reader; even though I have never written a Greasmonkey script before.

By examining Mihai’s code, I was able to learn and understand how a Greasemonkey script is written with Javascript. Then, I took about 1.5 weeks to complete coding my version of the Gmail and Reader Integrator, with a list of features that brought more functionalities to the integration. Importantly, I should bring to attention that I reused certain functions written by Mihai for convenience, and I acknowledged these functions clearly in my script. Thank you Mihai for the inspiration and wonderful code.

Lastly, please do report any bugs encountered or feedback any suggestions for possible improvements. I hope that you would find my Gmail and Reader Integrator script useful, as much as I do.