Singpolyma

Archive for April, 2006

Archive for April, 2006

‘Standard’ Comment Markup?

Posted on

What would be the benefits of standardising our comment markup? Well, that all depends on who you are. With the advent of comment crawling services a standard markup would really help them do their job. If your blogging platform offers no syndication options a standard comment markup could allow you to generate comment feeds yourself (using Blogger Recent Comments or similar). A standard markup about which we can make certain assuptions would also help the less technically inclined with implementing comment-centric hacks.

So, the natural first place to look is microformats.org. Nada, yet. Falling back to my own work with XOXO I have encapsulated comments as part of the XOXO Blog Format. Testing that with a comment crawler I find that it recognises the data ‘as is’ just fine. If you mix it with hAtom it is recognised by Blogger Recent Comments (more on this in a later post). It also provides many of the things we hackers like in comment hacks — an item surrounding the whole comment and the comment text, and a way of identifying some of the meta-type links.

Thus this proposed ‘standard’ is both based on microformats (XOXO) and fits the three major reasons we would even want any sort of structure to our comment markup. The markup should be on the main page for crawlers et al, but need not be visible. Now to how to add it to your blog. Advanced users can probably figure it out from teh XOXO Blog Format, for others here are simple instructions for both Blogger and WordPress:

Blogger
Go to your blog template and find the section that begins with <BlogItemComments> and ends with </BlogItemComments>. Replace it with this code:

<script type=”text/javascript”>
//<![CDATA[
posturl = “<$BlogItemPermalinkUrl$>”;
//]]>
</script>

<ul class=”xoxo comments”>
<BlogItemComments>
<li id=”c<$BlogCommentNumber$>” class=”commentelem”>Comment at <a href=”#c<$BlogCommentNumber$>” title=”<$BlogCommentNumber$>0″><$BlogCommentDateTime$></a> by
<$BlogCommentAuthor$>
<a name=”<$BlogCommentNumber$>”> </a>
<!– JS HERE –>
<dl>
<dt class=”body”>body</dt>
<dd class=”body”><$BlogCommentBody$></dd>
</dl>
<$BlogCommentDeleteIcon$>
<br />
</li>
</BlogItemComments>
</ul>

If you are going to be visibly displaying comments on your main page it is reccomended you replace the <!– JS HERE –> in the above with:

<script type=”text/javascript”>
//<![CDATA[
commentlink = xget(‘//li[@id=”c<$BlogCommentNumber$>”]//a’);
if(commentlink) {
fragment = commentlink.href.split(‘#’)[1];
commentlink.href = posturl+’#’+fragment;
}//end if commentlink
//]]>
</script>

And add the following to your <head> section:

<script type=”text/javascript”>
//<![CDATA[
function xget(xpathSelector) {
var it = document.evaluate( xpathSelector, document, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null );
if(it.snapshotLength)
return it.snapshotItem(0);
return ”;
}//end function xget
//]]>
</script>

Now to style this to look like we are used to having comments look. Skip past WordPress to Styling.

WordPress
To use this code on WordPress blogs, edit your theme and go to the ‘comments.php’ file. Find the section that starts <ol> and ends </ol>. Replace it with:

<ol class=”xoxo comments commentlist”>

<?php foreach ($comments as $comment) : ?>

<li class=”commentelem <?php echo $oddcomment; ?>” id=”comment-<?php comment_ID() ?>”>
<?php if ($comment->comment_approved == ‘0’) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
Comment at <a href=”<?php the_permalink() ?>#comment-<?php comment_ID() ?>” title=”<?php echo strtotime(get_comment_date().’ ‘.get_comment_time()); ?>”><?php comment_date(‘F jS, Y’) ?> <?php comment_time() ?></a>
by <?php comment_author_link() ?>
<br /><?php edit_comment_link(‘e’,”,”); ?>

<dl>
<dt class=”body”>body</dt>
<dd class=”body”><?php comment_text() ?></dd>
</dl>

</li>

<?php /* Changes every other comment to a different class */
if (‘alt’ == $oddcomment) $oddcomment = ”;
else $oddcomment = ‘alt’;
?>

<?php endforeach; /* end for each comment */ ?>

</ol>

This code seems to work with the most common themes. Now to styling so that we get back our old look:

Styling
Add this code to your <head> section:

<style type=”text/css”>
.comments {
list-style-type: none;
margin-left: 0px;
margin-top: 0.5em;
}
.comments li {
display: block;
margin-left: 0px;
margin-bottom: 1em;
}
.comments dl {
display: inline;
}
.comments dd {
margin-left: 0px;
}
.comments dt {
display: none;
}
.comments dd.author {
display: inline;
font-size: 1em;
}
.comments dd.body {
display: block;
margin-top: 0.5em;
}
</style>
http://del.icio.us/singpolyma.techblog/markup

OpenID for WordPress

Posted on

Someone else has written a (imho) better plugin. I have a backlog of tweaks to do to this plugin to make it work on more systems which I haven’t got around to blogging/integrating. Note that this new plugin does not support using your blog as an OpenID server. It does, however, support sreg (but not hCard) and integrates into the WordPress account system.

I have modified Alexander Nikulin’s plugin for WordPress that enables users to leave authenticated comments using OpenID and enables blog owners/contributors to use the blog as their OpenId. I have made the plugin compatible with WordPress 2.0, cleaned up the validity of the XHTML produced, and fixed a bug that kept some sites from finding the server.

It is reccomended that when using the server the blog admin use the blogs main URL as their OpenID but that other users/contributors use BLOGURL/?author_name=USERNAME.

When returning to the post page after posting a comment, if the comment was held for moderation ?moderated=true is appended to the URL. Adding code like the following will alert your users to this fact:

<?php if($_GET[‘moderated’] == ‘true’) echo ‘<div style=”display:block;padding:20px;background-color:#ccc; font-weight:bold;font-family:sans-serif;font-size:12pt;”> Your comment is awaiting moderation.</div>’; ?>

Possible future features:

  • Support for sreg / hCards to get an actual name for the commentor instead of just using their URL
  • Support for sreg / hCards in the server implementation
  • Support for YADIS

Download the plugin

To install the plugin:

  1. Download the gzip from the link above and unzip it
  2. Upload the resulting folder into your /wp-content/plugins/ directory
  3. Edit your template and replace your comments form code (likely in comments.php) with
    <?php include dirname(__FILE__).’/../../plugins/openid/openidform.php’; ?>

YubNub LocationBar

Posted on

My previous YubNub extension suffered from several glitches. While it was useful, it annoyed me enough to get me to research a new format. So I have written a new extension. This one functions a little differently and so I will leave the old one up. This extension modifies the standard FireFox location bar to support YubNub commands. If the entered text is determined to be a URL the location bar will function as normal, otherwise the text is passed to YubNub. No more second bar, no more glitchy locationbar behaviour, just straight YubNub integration. All YubNub commands will work, including single-word commands without parameters.

Download YubNub Locationbar

Version 0.11 has been released which fixes a glitch that broke access to about:config and typeing some javascript: URLs

Version 0.12 has been released which fixes a flitch that caused commands that are passed URLs not to work

Version 0.13 has been released which adds a command history feature. Simply push your up/down arrow keys while in the location bar to access the command history.

Version 0.14 has been released which fixes some minor bugs with navigating to local IPs, and also allows defined FireFox keyword bookmarks to supercede YubNub commands.

Version 0.15 has been released which has some minor improvements to the look and feel of the extension, and also now allows local firefox bookmarks to use switches (using the same syntax as YubNub proper). It also stores up to 50 commands from your command history between sessions now.

Version 0.16 has been released. Support for non-standard URLs (such as those from nic.d. Arrow-key history navigation broke some default Firefox features, so it is now Ctrl+Arrow Key. A hackish integration with Firefox auto-complete history has also been coded. Type y: before a command to have the auto-complete work (or just to force it into YubNub mode).

Version 0.17 has been released which fixes some minor URL resolution bugs.

Version 0.19 (0.18 was released silently) fixes some minor bugs noted in the comments. There is also now an entry at mozilla. Please review there if you find this useful!

Datatypeing

Posted on

There is some work going on at the microformats site to provide a datatypeing mechanism for microformats. XOXO being the most flexible format, it stands to gain much from such a system. While the work is as yet not done, it has come a fair way since I first saw it. Here is a basic overview of the system as it applies to XOXO :

Add the class ‘typed’ to the root XOXO element to specify that this XOXO makes use of datatypeing. Then, to each ‘a’ or ‘dd’ tag add one of the following classes:

  • ‘string’ for strings (this is the default if you do not specify a datatype class)
  • ‘boolean’ for boolean values (should be in page as ‘1’ or ‘0’)
  • ‘int’ or ‘long’ for integer values
  • ‘double’ for decimal values
  • ‘datetime’ for dates and times (should be encoded using the datetime-design-pattern)
  • ‘binary’ for binary data (should be encoded using a data URI)
  • ‘nil’ for NULL values

Note that other field types (such as HREF and TITLE) will simply always be treated as strings and this can only be applied to the direct contents of ‘a’ or ‘dd’ field-tags.

The Importance of XML Well-formedness

Posted on

XHTML validity is a buzzword around the Internet, but many people generally agree that it is not all that important. It has its advantages, but it is not the end of the world if you can’t quite get it. XML well-formedness, however, is very important. Why? Because it makes server-side hackery much easier. That may not be the only reason, but it is an important one. Some people have mastered the art of screen-scraping with RegExps, but I and others like me have never quite mastered that often-complicated technique. Instead, it is much easier to parse the webpage as XML and pull out the data that way. This works especially well when the page is known to conform to some standard (as in the code addition for Blogger Recent Comments).

While some leniancy can be built in, here are some basic guidelines for keeping your pages well-formed and making our job that much easier:

  1. XHTML empty tags — some tags, such as <br>, <link …>, and others used to be written in HTML as you see them there. This breaks XML well-formedness. Instead, one should use <br />, <link … /> and the like. (note to advanced users, this can be partially overcome using a RegExp line similar to $XMLdata = preg_replace(‘/<(img|meta|link|hr|br)([^<>]*?)([\/]?)>/i’,'<$1$2 />’, $XMLdata); )
  2. Escaping out Ampersands — Many URLs contain the ‘&’ character, and sometimes this character is used in content as well. If this character is left unescaped it breaks XML well-formedness. Use ‘&amp;’ instead. (note to advanced users, this can be mostly overcome use a RegExp line similar to $XMLdata = preg_replace(‘/&([^;]{10})/i’,’&amp;$1′, $XMLdata); )
  3. Escaping Scripts — JavaScript code will often contain characters that must be escaped out in XML, but which cannot be escaped out if the script is to work. To overcome this you add ‘//<![CDATA[‘ after every <script> tag and ‘//]]>’ before every </script> tag.
  4. Closing tags — Some tags, such as <p> are often inserted by web designers without a closing tag. instead of ‘<p>text<p>more text’ use ‘<p>text</p><p>more text</p>’. Note that XML is case-sensetive, so if you open a section, say, with <head> you must end it with </head> not </HEAD>
  5. Quoting Attributes — <p class="1"> not <p class=1>, etc. Quotation marks always go around attributes, no matter what.
  6. Non-tag < > — If you reference a Blogger template tag (such as <$BlogID$>) or for some other reason need to include a < or > character in content, you must escape it out with &lt; or &gt;, respecively.

A note about content : Blogger’s post form and comment form is not very good at checking XML well-formedness. Thus if you want to maintain a (at least mostly) well-formed page you must follow these rules in any code entered in these forms. For example, if you enter a < character in the blogger post form, it does not escape it out for you, you must actually enter &lt;, and the same goes for the comment form. This is sometimes annoying if you are trying to maintain full XML well-formedness because a well-meaning commentor can sometimes mess up your well-formedness and you must go and edit their comment. This is not usually the biggest problem, however, since it is usually one of the first two problems which can be overcome as noted. You can check for XML-formedness without validating XHTML using this tool.

Tags: