AJAX, XML, XSLT (and some ASP) tricks: Blogger

Showing posts with label Blogger. Show all posts

JS-Kit crashes a Blogger blog in Internet Explorer

Several times I’ve stumbled across Blogger-hosted blog that simply refused to open in Internet Explorer with the “Operation aborted” pop-up window and subsequent error page. I never tried to investigate what was going on (I simply copied the URL into another browser), but when I’ve installed JS-Kit on my blog, I’ve started getting the same problems … obviously a cause for a major alarm.

The Infinities Loop site provided an answer in the comments: a SCRIPT performing specific manipulations should be a child of BODY, not another HTML element. When I’ve moved the JS-Kit script (<script src='http://js-kit.com/extra/blogger/comments.js' type='text/javascript'/>) from the Blogger widget to the end of the page, the new fanciful JS-Kit-based comments worked flawlessly.

Blogger backup works (finally)

I have no problem bashing Google (or anyone else that can't get their act together), but then it's also fair to report when they get something right. They've managed to fix the Blogger backup in the last month or so; now I can successfully back up my large blogs (900 posts, thousands of comments, 6 MB XML file). Great job :)

The Blogger software "quality"

I'm constantly amazed by Google's lack of quality (at least in the Blogger area). Let me give you two simple examples:

Google has added embedded comment form to Blogger posts. This form works flawlessly with all versions of Firefox on Windows/Linux platforms and fails consistently with IE7 (you have to submit the comment twice). The bug appears in all of my blogs, regardless of when they've been created and what template they use.
Google has introduced post ratings months ago. They've immediately got customer feedback that the web pages hang when viewed with Firefox. Five minute long investigation reveals the cause to anyone who's willing to figure it out: Sometimes the AJAX requests they're using take a long time to complete and obviously they're using synchronous XMLHTTPRequest calls in Firefox, blocking the browser.

In both cases, the bugs have been present for months, numerous users have complained (loudly) and nothing has been fixed. Will this affect Google? Probably not. Will I recommend their business applications to my customers? Definitely not.

Just in case you might wonder why I'm yammering in my blog and not complaining to Google: Once they've explicitely asked for our feedback on a new Blogger feature. I've submitted my bug report and never got as much as an acknowledgement ... and the bug that's been bothering me is still there.

Login to Google Data API

Google Data API has numerous client-side libraries, but not an ASP/VBScript one. Here’s the first routine you need: it authenticates you with the Google API and returns a handle you can use in subsequent calls.

The HTTPCheck is a function that checks the status code before returning to the caller. You could replace if with XRQ.status < 300. You'll find the EncodeFormData function in a previous post.

Dim XRQ ' global XMLHttpRequest object

Function GoogleLogin(UN,Pwd,Svc)
  Dim RQData,I,RT

  GoogleLogin = Null
  RQData = EncodeFormData(Array("Email","Passwd","service","source"), _
    Array(UN,Pwd,Svc,"VBScript-BloggerLibrary-0.1"))

  If Not IsObject(XRQ) Then Set XRQ = CreateObject("Microsoft.XMLHTTP")
  XRQ.open "POST","https://www.google.com/accounts/ClientLogin",false
  XRQ.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"
  XRQ.send RQData
  If HTTPCheck(XRQ,"Google login response", _
    "https://www.google.com/accounts/ClientLogin") Then
    RT = XRQ.responseText
    I = InStr(RT,"Auth=")
    If I = 0 Then wr "Google response has no AUTH data" : Exit Function
    RT = Mid(RT,I+5,Len(RT))
    I = InStr(RT,Chr(10)) : If I > 0 Then RT = Left(RT,I-1)
    GoogleLogin = RT
  End If
End Function

What else could you expect from Google :(

Armed with the minimum ATOM-like document Blogger accepts, I wrote an XSL transformation that converted my proprietary news feed format into Blogger-liked ATOMish format. I used Saxon as the transformation engine, resulting in a nice UTF-8 encoded file that opened easily in Internet Explorer, Firefox and XML Notepad.

The end result: Blogger refused to import the file until I've opened it in FrontPage and prettified the XML text. Obviously they have a "custom" XML parser that has problems with some valid variants of XML. But what else can one expect from company that wants to build everything on its own.

Import into Blogger from an Atom feed

Google has recently added the import functionality to Blogger, making it very easy to migrate from any other information service to Blogger. Unfortunately, the import process rejects anything that looks like it did not come from the Blogger export feature. I did not try to nail down the very minimum that would be required for the import to work, but this is a very minimalistic Atom document that works:

<?xml version='1.0' encoding='utf-8'?>
<feed xmlns='http://www.w3.org/2005/Atom' 
      xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/'  
      xmlns:gd='http://schemas.google.com/g/2005'
      xmlns:thr='http://purl.org/syndication/thread/1.0'>
    <id>tag:blogger.com,1999:blog-123456789.archive</id>
    <updated>2008-11-01T00:00:00.000+01:00</updated>
    <title type='text'>Sample import file</title>
    <author>
        <name>Example.com</name>
        <uri>http://www.blogger.com/profile/12345678</uri>
        <email>noreply@blogger.com</email>
    </author>
    <generator version='7.00' uri='http://www.blogger.com'>Blogger</generator>
    <entry>
        <id>tag:blogger.com,1999:blog-123456789.post-12345678</id>
        <published>2008-11-01T00:00:00.000+01:00</published>
        <updated>2008-11-01T00:00:00.000+01:00</updated>
        <category scheme='http://schemas.google.com/g/2005#kind' 
          term='http://schemas.google.com/blogger/2008/kind#post'/>
        <category scheme='http://www.blogger.com/atom/ns#' term='CatItem'/>
        <title type='text'>Post title</title>
        <content type='html'>Post text, HTML needs to be escaped</content>
        <author>
            <name>Example.com</name>
            <uri>http://www.ioshints.info/about</uri>
            <email>noreply@blogger.com</email>
        </author>
        <thr:total>0</thr:total>
    </entry>
</feed>

Create post excerpts in Blogger

One of the features sorely missing in Blogger is the ability to write an excerpt for your post (Wordpress supports several different methods), so I had to write my own JavaScript solution that provides functionality similar to the more tag in Wordpress. It hides parts of the post’s text and displays a More button which reveals the hidden text. The hidden text is enclosed within SCRIPT tags:

<script>startHide()</script>
… extra text …
<script>endHide()</script>

I’m including a JavaScript library from one of my web sites into the Blogger template. If you want to have a Blogger-only solution, include the following JavaScript code in your template:

var isMainPage = 0;
var hideCount = 0;

function dw(t) { document.write(t); }

function setMainPage() { isMainPage = 1; }

function startHide() {
  hideCount ++ ;
  if (!isMainPage) { dw('<div id="show_'+hideCount+'">') ; return; }
  dw ('<p class="hideMenu" id="hideMenu_'+hideCount+
    '"><a href="javascript:showRest('+hideCount+')">More ...</a></p>');
  dw ('<div id="hide_'+hideCount+'" style="display: none;">');
}

function showRest(id) {
  var e = document.getElementById('hide_'+id);
  if (e && e.style) e.style.display = "" ;
  e = document.getElementById('hideMenu_'+id) ;
  if (e && e.style) e.style.display = "none" ;
}

function endHide() {
  dw ('</div>') ;
}

Open XML text file in Microsoft Word

The Word-to-Wiki converter macro I’ve described in one of the previous posts (developed in Word 2003) worked perfectly, but when I wanted to add a Word-to-Blogger macro (along the lines of Word-to-Wiki concept, but with a different XSLT), things got complex. I didn’t want to have any whitespace between P tags generated by XSLT (Blogger interprets whitespace line breaks as implicit <br /> tags), so I wanted to generate XML, not HTML … only to find out that the default text converter used by Microsoft Word (wdOpenFormatAuto) …

Documents.Open FileName:=TxtPath, ConfirmConversions:=False, _
      ReadOnly:=False, AddToRecentFiles:=False, _
      Format:=wdOpenFormatAuto, Encoding:=65001

… removes the XML tags (leaving only the text nodes) when importing XML files as text. Next I’ve tried the the wdOpenFormatText converter, only to find out that it cannot handle Unicode text. Great news … Finally I’ve managed to get exactly what I needed with the wdOpenFormatUnicodeText converter and msoEncodingUTF8 encoding:

Documents.Open FileName:=TxtPath, ConfirmConversions:=False, _
      ReadOnly:=False, AddToRecentFiles:=False, _
      Format:=wdOpenFormatUnicodeText, Encoding:=msoEncodingUTF8

Make Your Web Pages Mobile-Friendly

A while ago I had to develop a few mobile-oriented applications, essentially serving existing content on tiny screen resolutions. As one could expect, I approached it from the XML/XSLT perspective and designed a few XSLT stylesheets to render existing XML content (all of my recent content is in XML format) in a more mobile-friendly format.

At approximately the same time I was working a lot with Blogger APIs and Atom ... and you can see the results of these seemingly unrelated activities in my new InformIT article “Make Your Web Pages Mobile-Friendly” where I'm describing how you can take an existing Atom feed and wrap it into a mobile-friendly user interface.

Publish code samples in Blogger

Publishing the code samples in Blogger has always been a pain in the ***: the quoting of angle brackets doesn't work very well unless you do it manually, the leading whitespaces get lost (more so if you use spell checker), the line breaks are sometimes lost as well ... Finally I gave up and wrote a small PERL script that takes your code on standard input (usually supplied as a file name in the command line) and leaves the Blogger-ready markup on the clipboard, ready to be inserted in your post:

use strict;
use Win32::Clipboard;

our $lcnt = 0;
our $result = "" ;
our $CLIP = Win32::Clipboard();

while (<>) {
  if (/\n/) { chop; }
  $_ =~ s/\&/&amp;/gi;
  $_ =~ s/\</&lt;/gi;
  $_ =~ s/\>/&gt;/gi;
  while (/^\s/) { $_ =~ s/^(\s*)\s/$1&nbsp;/gi; }
  $result .= ($lcnt == 0 ? "<pre class='code'>" : "\n") ;
  $result .= $_;
  $lcnt ++;
}
$result .= "</pre>";
$CLIP -> Empty();
$CLIP -> Set($result);
print "Result is on the clipboard";

If you're not fluent in PERL, don't even try to understand what it does ... it works :)

AJAX, XML, XSLT (and some ASP) tricks