Singpolyma

Technical Blog

Archive for the "Tech" Category

coComment JSONP Native

Posted on

coComment has added native JSONP support. They seem to have worked out the bugs from their first implementation and I have reworked the code for my sidebar to use their system. Out of this has come two generic coCo JSON functions. One, coco_flat, takes their nested group-comments-by-article format and flattens it to one-element-per-comment with all the article and comment attributes intact:

function coco_flat(coco) {
var comments = [];
for(var i=0; i<coco.length; i++) {
for(var i2=0; i2<coco[i].comments.length; i2++) {
comments.push({
“blogID”:coco[i].blogID,
“blogTitle”:coco[i].blogTitle,
“blogURL”:coco[i].blogURL,
“blogURLCoco”:coco[i].blogURLCoco,
“articleID”:coco[i].articleID,
“articleTitle”:coco[i].articleTitle,
“articleURL”:coco[i].articleURL,
“articleURLCoco”:coco[i].articleURLCoco,
“id”:coco[i].comments[i2].id,
“author”:coco[i].comments[i2].author,
“authorURL”:coco[i].comments[i2].authorURL,
“authorAlias”:coco[i].comments[i2].authorAlias,
“comment”:coco[i].comments[i2].comment,
“commentURLCoco”:coco[i].comments[i2].commentURLCoco,
“dateISO”:coco[i].comments[i2].dateISO,
“date”:coco[i].comments[i2].date
});
}//end for cocommentResultSet[i].comments
}//end for cocommentResultSet
return comments;
}//end function coco_flat

The other, coco_compare, is for use in sorting so flattened results by date:

function coco_compare(a,b) {
if(a.date<b.date) return -1;
if(a.date>b.date) return 1;
return 0;
}//end function coco_compare

To use this function to sort a flattened array of coComment data oldest to newest call array.sort(coco_compare), and to sort by newest to oldest also call array.reverse() as well.

Here is an example piece of code putting together all that is above, an incidentally what I am using in my sidebar:

function list_cocomment(blockid,username,charlimit,itemlimit,boxid) {
if(!charlimit) limit = 25;
if(!itemlimit) limit = 10;
if(!boxid) boxid = 0;
coco_callback = function(data) {
var block = document.getElementById(blockid);
var txt = ‘<ul class=”cocomment”>’;
comments = coco_flat(data);
comments.sort(coco_compare);
comments.reverse();
var elipsis = ”;
for(var i=0; i<comments.length && i<itemlimit; i++) {
elipsis = ”;
if(comments[i].comment.length > charlimit)
elipsis = ‘…’;
txt += ‘<li><a href=”‘+comments[i].articleURL+'” title=”Coment on ‘+comments[i].articleTitle+’ by ‘+comments[i].author+'”>’+striphtml(comments[i].comment).substr(0,charlimit)+elipsis+'</a> <a href=”‘+comments[i].articleURLCoco+'”><img src=”http://www.cocomment.com/images/logo-16 alt=”[co]” /></a></li>’;
}//end for comments
txt += ‘</ul>’;
txt += ‘<a href=”http://www.cocomment.com/comments src=”http://www.cocomment.com/dyn/images/buttons alt=”More &raquo;” /></a> ‘;
txt += ‘<a href=”http://www.cocomment.com/mybox-rss2 src=”http://wrinks.ning.com/feedicon12x12.png alt=”[feed]” /></a><br />’;
block.innerHTML = txt;
}//end function-var coco_callback
writeScript(‘http://www.cocomment.com/mybox-json?nick=singpolyma&box=1&callback=coco_callback;);
}//end function list_cocomment

YubNub Toolbar

Posted on

If you hadn’t heard of YubNub before, now you have. The basic concept is easy to grasp — typing “g test” takes you to a goole search for ‘test’ and “wink test” takes you to a wink search for test, etc. Although much more powerful than search engines, that’s a good place to start.

If you send YubNub a raw URL it will take you there without processing. This enables one to use YubNub as your location bar directly. Problems with this approach have been that the search box in firefox (where YubNub has traditionally resided for FF users) is very small and does not update on page load.

Solution? Write a new FireFox extension to replace the location bar with YubNub. Done. This is my first ever FireFox extension, so it may be a bit quirky. I’d appreciate feedback and bug reports, but cannot guarentee I can do anything about it, since my XUL etc knowledge is very limited at this point.

I have released version 0.11. Install or reinstall using instructions below, uninstall previous version first if updating. New features for this version include: integration with browser history, display of favicons, display of feed icon/security icon where applicable, alt+k selects textbox, icon on Go button same as standard Go button.

Steps to install plugin:

  1. Download the XPI file
  2. Open your Firefox ‘Extensions’ window and drag the XPI file on it
  3. Restart Firefox

Include Feeds / Reading Lists in Your Sidebar

Posted on

Including headlines in your sidebar is an old concept, one that can be very useful to both you and your readers. This post will by no means be a comprehensive list of methods, but I will outline what I feel are the ‘top 4’ ways to do this.

Peek-a-boo Headlines
Peek-a-boo headlines are a part of my version of FreshTags and may be coming to primary FreshTags eventually as well. I may soon be releasing a version of the hack that works well without a FreshTags installation. I really like this method because my blogroll still sends out link-love and for FreshTags users you get context-sensitive headlines.

FeedDigest
FeedDigest is an old friend of mine. The first-ever feed-to-script service I used was RSSDigest, the forerunner to FeedDigest. The service provides excellent features, including the ability to mix feeds together into a single digest, include scripts for JavaScript or PHP, and an RSS mashup feed of your digest. You get 100% code control over the output as well as the many prefab templates for newbies. The only problem here is that you can only run 5 digests — any more and you pay.

Feed-o-Style
Feed-o-Style is a newer cometitor to FeedDigest. You don’t get nearly the code control and there are no feed-mixing options, but their prefab templates are nice and customisable for most purposes. The only include option is JavaScript. There is also an ‘API’ by which you can generate feed-o-styles from a script.

Grazr
Grazr is a different sort of service. Their code is barely customisable and again the only include option is JavaScript, but that’s because the whole system runs using AJAX-style operation. Headlines from a feed can be included in your sidebar, or an entire OPML reading list can be rendered (XOXO not yet supported, see my sidebar for an example). ATOM feed support seems to be missing as of yet, and there are some other issues (mostly caused by the unreliability of implementations of the OPML ‘spec’) but overall it is a very interesting start.

PsycHo – WYSIWYG Templates

Posted on

PsycHo is a WYSIWYG template generator for blogs that supports Blogger. While some of the functionality is annoying to a hand-coder such as myself, this is definately a big step in the right direction for pushing Blogger to non-techies. One of the things that I find odd about it is that by default you must enter your blog title/description manually, instead of using the ones from your Blogger settings. While this can be overcome, the average user won’t necessarily see that.

I would like some more code-structure customisability options for hackers (especially hackers looking to help their non-techy friends). For example, one could not implement hAtom in a PhycHo template if he wanted to (at least so far as I can tell). Other than that (a rather minor point to users anyway) the service seems to provide all the features a normal user would expect, including sidebar(s) cutomisation and linkroll(s) editing. Just one more push to get people away from inferior blogging services like Xanga.

Profile Photos With Comments

Posted on

Blogger does not provide a template tag for displaying the profile pictures of commentors in your blog template. Johan Sundström had created a way around this using an IFrame, but I found that solution to be somewhat buggy, even on his own blog. I have modified some of his code and added some of my own to create what I feel is a cleaner hack. I have bundled the majority of the JavaScript into a JScripts entry and it also uses a script I wrote to scrape Blogger profiles to JSON(P) [example]. The code to include the hack into your template is surprisingly simple:

<script type="text/javascript" src="http://jscripts.ning.com/get.php?xn_auth=no&amp;id=830605 </script>
<script type="text/javascript">
//<![CDATA[
addLoadEvent(function(){showCommentPhotos(‘class of elements to put photos in‘,’class of elements where links to authors can be found‘,number of <a> tags before the link to the author (0 if none));});
//]]>
</script>

You will need to add a <div> or other tag (with the class you pass in first) to the comment section, and style it so that the images show up the way you want. The second class you pass is the element containing the link to the comment author, you must add a class to this element if one does not exist. The third parameter is the number of <a> elements in this element before the link to the author. The script runs after page load and should thus have no adverse affects on initial load times.