Updated Blogger Tools

I've updated the "Blog Archive" and "Labels" gadgets on this site - as visible in the right-hand margin of this page. Please leave a comment with any issues or suggestions.

Over a year ago, I had already replaced Blogger's default Labels gadget with the Yahoo! UI Library (YUI)'s TreeView component, which provided:

• A view that is collapsed by default, saving screen space for other features unless the Labels are clicked and expanded for use.
• A complete and compact list of tagged posts under each label, without having to request a new label search page - while still providing these links.

This tree is populated with an AJAX request to Google's GData Blogger API, using the JSON Alt Type and YUI's Get Utility. Since the returned data is a list of posts, a limited amount of JavaScript is needed to group and sort the posts into the labels. As part of this last update, a label will now again automatically expand to show the related posts if the current page being viewed is a label search page. (This is similar to the default functionality, but is determined by the current URL.)

Also now just completed, I've also replaced Blogger's default Blog Archive gadget with another YUI TreeView, providing:

• A consistent look-and-feel between the Blog Archive and Labels features.
• A more compact display, while maintaining readability.
• Post titles were previously truncated after 50 characters. Complete post titles are now displayed, along with the specific date posted.
• As the same data retrieved to populate the Labels is re-used, the page loading performance should actually be improved as the HTML is now dynamically generated client-side - instead of downloading what was essentially duplicate information as additional HTML from the server.

As with the Labels, the archive will also automatically expand to show the related posts for the time period being viewed - similar to the default functionality, but again determined by the current URL.

Also just added are "loading bar" graphics for the short period of time between the initial page load and the population of the trees.

A few other quick things to note:

• The source JavaScript code used for these features is available for reference in this page's HTML source (among the rest of Blogger's default and somewhat cluttered code), using your browser's View/Source feature. Even though it is only ~250 lines or ~7 KB of code, this is not the most efficient as this code is reloaded with every page load. I'd like to be able to properly move this code into a separate and cacheable *.js file - but can't currently find a usable solution that matches the reliability and pricing (free) of the rest of Blogger. I attempted using versions stored on Google Code and Google Sites, but each had various issues - including being able to properly make updates, as well as having download landing pages interfere - partially complicated by not being hosted on the blogspot.com domain. Amazon's S3 storage service looks like a promising option that I may still consider. However, while it would likely only cost pennies / month to use for this, it's another bill to take care of.

• The JSON data feed received is a bit large - currently ~200 KB - but unlike the JavaScript code, this data is returned with proper HTTP headers by Google, and should be cacheable by the browser. Much of this data is information that is not necessary or used, such as post summaries and comments. Hopefully, these extra fields will soon be selectively disabled - as soon as the Blogger GData API supports partial responses.

• As visible in the source code, I also needed to implement a custom "clickEvent" handler for YUI's TreeView - otherwise the HTML links contained within the tree nodes were not clickable, as any clicks would instead expand/collapse the node instead of activating the link.

A few ideas for future enhancements:

• Options to alternatively sort the labels, including by post count.
• Having the displayed labels under each post interact with the Labels tree.

Resizing the Blogger Edit Box

If you compose in Blogger at all, you may be frustrated with the relatively small size of the text area provided for writing. It defaults to only about 15 lines!

Here's a fix.

I started out by using Firebug's Inspect feature to find what I wanted to resize, and to initially tweak the size on-demand. However, this is a bit tedious, and requires further tweaking if the window is resized.

I then wrote a JavaScript Bookmarklet to automate the task. When run, it automatically resizes the Blogger edit boxes for both the "Edit Html" and "Compose" tabs to just a bit smaller than the current size of the browser window, leaving just enough margin for the scrollbars and other editor components, etc. Additionally, it also listens for window resize events, and resizes the edit boxes along with the browser window.

Here is the human-friendly source code:

// Mark A. Ziesemer, www.ziesemer.com.
javascript:(
  function(){
    // http://www.quirksmode.org./js/events_advanced.html
    var attachEvent = function(obj, evType, handler){
      if(obj.addEventListener){
        obj.addEventListener(evType, handler, true);
        return true;
      }else if(obj.attachEvent){
        return obj.attachEvent("on" + evType, handler);
      }else{
        return false;
      }
    },
    getDim = function(dim){
      // http://www.howtocreate.co.uk./tutorials/javascript/browserwindow
      return window["inner" + dim] || document.documentElement["client" + dim] || document.body["client" + dim];
    },
    getH = function(){
      return getDim("Height");
    },
    getW = function(){
      return getDim("Width");
    },
    editSize = function(dim, size){
      document.getElementById("textarea").style[dim]
        = document.getElementById("richeditorframe").style[dim]
        = size + "px";
    },
    lastH, lastW,
    resize = function(){
      var newH = getH(), newW = getW();
      // http://webbugtrack.blogspot.com./2007/10/bug-104-resize-event-firing-errors-in.html
      if(newH != lastH || newW != lastW){
        editSize("height", newH - 250);
        editSize("width", newW - 100);
        lastH = getH();
        lastW = getW();
      }
    };
    resize();
    attachEvent(window, "resize", resize);
  }
)();

This is cross-browser compatible, and was tested against Mozilla Firefox 3 and Microsoft Internet Explorer 7. Not surprisingly, it could be much shorter if it didn't need to work-around a few IE bugs, as commented above:

1. Supporting a non-standards event registration model.
   • For serious use elsewhere, use a JavaScript library that already handles this properly, e.g. the Event Utility in the Yahoo! User Interface Library (YUI).
2. Difficulties in obtaining the size of the browser window, including differences between "strict" and "quirks" modes.
3. The resize event being called repeatedly, which usually resulted in infinite loops and hanging IE.

Here's the same code, condensed as a usable bookmarklet:

javascript:(function(){var%20attachEvent=function(obj,evType,handler){if(obj.addEventListener){obj.addEventListener(evType,handler,true);return%20true;}else%20if(obj.attachEvent){return%20obj.attachEvent('on'+evType,handler);}else{return%20false;}},getDim=function(dim){return%20window['inner'+dim]||document.documentElement['client'+dim]||document.body['client'+dim];},getH=function(){return%20getDim('Height');},getW=function(){return%20getDim('Width');},editSize=function(dim,size){document.getElementById('textarea').style[dim]=document.getElementById('richeditorframe').style[dim]=size+'px';},lastH,lastW,resize=function(){var%20newH=getH(),newW=getW();if(newH!=lastH||newW!=lastW){editSize('height',newH-250);editSize('width',newW-100);lastH=getH();lastW=getW();}};resize();attachEvent(window,'resize',resize);})();

(Bookmarklet - Either right-click and choose to bookmark, or drag to your bookmarks menu or links toolbar.)

I've not yet found a decent tool to compress JavaScript into bookmarklets. The best I've found is at http://chris.zarate.org./projects/bookmarkleter/. However, one issue it has in particular is failure to properly handle comments. While it is the tool I used to condense to the above, I manually removed the comments first and converted the double-quotes to single-quotes.

This script could easily be modified for similar functionality on other sites. Additionally, the need to initially enable the resizing by manually activating the bookmarklet could be avoided by converting this to a Greasemonkey script.

Update (2009-08-29):

Now also provided as a Greasemonkey script: http://userscripts.org/scripts/show/56651

Update (2009-01-26):

As discussed in the comments below, I'm avoiding Blogger's "updated editor" for now, due to many other unresolved issues with that editor itself. My scripts are only designed to work with the "old editor". Some details about the different editors are available from Google's Blogger Help.

If you have an issue with the bookmarklet, please post a comment here. If you have an issue with the Greasemonkey script, please report it at http://userscripts.org/scripts/issues/56651. In either case, be sure to include which browser and version is being used. Please also include any other possible factors that are visible, such as JavaScript errors or warnings in the browser.

Blogger Issues

Now that I've had this blog for a few weeks (hosted by Blogger/Google), I just need to communicate a few frustrations with the service.

I consider myself to be a very particular coder - whether it be in Java, HTML, or otherwise. This involves simple things like following standards and guidelines, and running any available validators to correct any errors or warnings.

Unfortunately, Blogger doesn't seem to follow the same ideals. All of their pages are declared as "XHTML 1.0 Strict", but I doubt a single page even meets basic HTML validation.

The problem seems to involve multiple levels:

• I tested all the available blog templates, and even by themselves, none passed W3C's Markup Validation Service.
• Whatever processing engine is being used to serve the pages fails to remove the Blogger tags and other non-XHTML data that shouldn't be sent to the web.
• Creating an XHTML-valid post also appears to be next to impossible, other than simply avoiding problem characters and formatting. For example, XHTML reserved characters don't appear to be processed into their entity codes at all, but in fact, reverted back to the reserved characters. For example, the quotation mark (") should be served as (") and displayed by the browser as ("). Even when not using the WYSIWYG editor and directly coding the proper XHTML, things always seem to revert back to their illegal form by the time my web browser loads the page.

Unfortunately, no ideas or workaround here...

Another issue is with the "preview" feature for posting - it doesn't follow the same stylesheet, line-break, and other preferences as when actually posted.

Additionally, at least with Firefox, I frequently am annoyed with a disappearing text cursor when posting. Edits are still possible - it's just impossible to see where the edit will take place. The only fix I've found so far is to switch to preview mode and back, which usually brings it back - if only for a moment.

Update (2007-09-17):

The disappearing text/edit cursor/caret is covered under Mozilla Bug 167801. While first reported on 2002-09-10, there is speculation that this will finally be fixed for Firefox 3.0.

Update (2008-03-21):

I found another good blog posting about Blogger's issues with XHTML: Google/Blogger: XHTML Standards: Does Anybody Care? (John Walker, 2007-05-06, fourmilab.ch)