Wednesday, December 19, 2012

The Case of the Vanishing Sidebar, Or, a Three-Pipe Problem

“No, Madam,” my friend said peremptorily. “Your problem has nothing to do with your template. Rather, it’s the code of your last post but two that is deforming the layout of your blog page.”

The great detective had risen from his chair before the fire when our visitors entered the sitting room at 221B Baker Street. Only one who knew Sherlock Holmes as I did would see the ennui masked by his correct demeanor.

“But Mr. Holmes, it can’t be. I never add code to my posts.”

“Nonetheless, Madam. Your husband’s problem, on the other hand, lies with the curious way he has inserted his photographs into his blog.”

Holmes turned to address the man, who was cradling his right forearm in his left hand.

“If you can refrain from inserting these images by dragging and dropping them into your blog, it will paginate normally. Click the ‘insert image button, man!”

The man opened his mouth with astonishment. “How on earth——?” he began.

“Your settings notwithstanding, your blog is only showing one post per page because the images are encoded using the unusual ‘Base-64’ method.”

Holmes turned again to the woman. “Blogger’s own remarkable clockwork sometimes produces errors that push the display of your sidebar elements to the bottom of the page. These errors reside in individual blog posts, not template code.”

“If you open your erring post for editing, Blogger can repair this damage for you. Simply toggle between ‘compose’ and ‘html’ modes several times and republish the post.”

“But Mr. Holmes, how did you identify the post with the error?” asked the woman.

“Mrs. Atherly, that is an elementary problem. The flaw is clearly located within a post that on the main blog page. I thus opened the individual post pages of each. The one with the missing sidebar was obvious.”

Mr. Atherly spoke next. “I hit upon that drag-and-drop method last year. How the devil did you know I was using it?”

“Drag and drop, and also inserting an image from the Web, have been linked to Base-64 encoding, though this is mostly a thing of the past,” Holmes replied. “I am sorry to learn from you that we have not seen the last of it.”

“Base 64 is such a bulky format that it exhausts your limited page-size allowance and triggers automatic pagination of your blog,” Holmes said.

“Premature pagination is your complaint, and the way you favor your right arm betrays a predilection for dragging and dropping,” he concluded. “I shall refer you to this gentleman for instructions on how to fix your problem.”

As the door closed behind the grateful couple Holmes sank wearily to his chair, his mask abandoned.

“Watson,” he said with disgust, “no more! Spare me these ridiculous petty inquiries. Are there no problems worthy of my talents?” He stared gloomily into the dying fire.

“Well, Holmes,” I said as sought to revive the embers with poker and bellows, “A lot of people would like to know why on earth Blogger scrapped its old user interface for one that violates every settled principle of web design.”

As the flames rose in the hearth, I was rewarded by an answering spark kindled in my friend’s eyes. He rose and fetched his tobacco from the mantle.

“A three-pipe problem at least, Watson,” he said with some satisfaction.

Sidney Paget's wonderful illustrations, first published in the Strand Magazine, are in the public domain.

The Case of the Vanishing Sidebar, Or, a Three-Pipe Problem

“No, Madam,” my friend said peremptorily. “Your problem has nothing to do with your template. Rather, it’s the code of your last post but two that is deforming the layout of your blog page.”

The great detective had risen from his chair before the fire when our visitors entered the sitting room at 221B Baker Street. Only one who knew Sherlock Holmes as I did would see the ennui masked by his correct demeanor.

“But Mr. Holmes, it can’t be. I never add code to my posts.”

“Nonetheless, Madam. Your husband’s problem, on the other hand, lies with the curious way he has inserted his photographs into his blog.”

Tuesday, November 27, 2012

Managing photos for your blog

The internet is a great medium for photos. Blogging visually creates posts with greater impact and sticking power.

Beatrice Murch photo
Uploading a photo to Blogger will create at least two, and sometimes three, separate copies.

Should you keep track of them? And how?

Here's how I do it.

First, though: Do you usually just upload your photos straight to Blogger? I always use a copy that has been stepped down to a lower resolution, and here's why.

Low-resolution images are perfect for Blogger, and won't use up your free photo allotment on Picasaweb.

But as you've probably realized, that makes another copy of each photo--a low-res version.

You don't want to lose or confuse these copies. Here's how I keep it all straight.

Copies copies copies
So far you should be making three copies of every photo that you blog:
  1. Your original full-resolution photo, stored on your computer
  2. A low-res version, also on your computer
  3. The copy of the low-res version hosted at Picasaweb that your blog will actually use.
Blogger will also insert yet another copy of the Picasaweb version into your blog post that may be further scaled down. However, this is not something you need to track.

For me, the process starts when my computer sucks the photos from my camera. I use iPhoto, which comes bundled with my Macintosh, but other photo-management software does the same things. (Google's Picasa is another photo-album program (free download).)

The key photo-management features that you need are as follows:
  1. Downloads photographs from your camera
  2. Organizes the photos (so that you can group all blog photos together)
  3. Exports photos at a resolution and file name that you specify.
Photo-album programs typically do much more than the above. Many let you crop and retouch the photos and are integrated with various social-networking programs.

This blog post is not a short course in using all those features or in how to use any particular software application. It's just an inventory of what to do with whatever program you've got.

Download from camera to computer
If I've taken multiple shots I pick the best one and delete the ones I am sure not to use. I often edit the photo, at least to the extent of cropping it.

Organize the photo in photo-album program
Then I (1) give it a descriptive name and (2) tag it as a blog photo. iPhoto lets me do that with a keyword, but I could also put it in an iPhoto album for blog photos.

Both methods are common. The point is to give this treatment to every photo that I actually use, and only to those photos.

(My other blog, which uses a good number of photos, is about apples. So I tag every photo that I use with "apples," which puts them in an "apples" smart folder.)

Export photo to hard drive
Then I export the photo from the photo album to my hard drive, with the name I have given it and at a resolution of 800 pixels or less. I keep my photos in a blog folder in my photos folder.

The original photo file might have a name like IMC_2879.jpg and a size of 3 or 10 MB. The new one will have a descriptive name such as McIntosh.jpg and might be 500 kb or so.

The original will be squirreled away in a set of directories used only by my photo-album program. The smaller copy will be in a user-friendly directory named "apple blog" with all my other blog photos.

Upload photo to blog (and Picasaweb)
The last step is to upload the photo--the low-res version--from my computer to my blog, using Blogger's post-editing window.

If you do this, over time you will have triple redundant backup of all your blog photos, as follows:
  1. All your low-res photos in a single album online at Picasaweb, each with the descriptive names you have selected.
  2. The same on your computer in the folder you set up
  3. The original, high-resolution versions in your photo-album program, should you ever need to print a copy of an image or do anything else with it.
This is important to do because backing up your blog (which you should do regularly) does not include your photos.

Speaking of backup copies: My regular computer backups include these photos. Whew!

Managing photos for your blog

The internet is a great medium for photos. Blogging visually creates posts with greater impact and sticking power.

Beatrice Murch photo
Uploading a photo to Blogger will create at least two, and sometimes three, separate copies.

Should you keep track of them? And how?

Here's how I do it.

Tuesday, July 17, 2012

Unlimited online photos

John Kratz photo
Your blog lives "in the cloud." Its contents are distributed.

Blogger's servers assemble the different page elements from various locations.

You can blog photos hosted online anywhere--at Flickr or Photobucket or even on your own web server.

However, if you upload a photo directly to your blog, Blogger stashes it in a linked Picasaweb account.

Google's Picasaweb is a free and handy online photo album, but (like other online photo services) comes with a size limit beyond which you must pay. The first gigabite of storage is free--a lot until you realize that digital photos can run anywhere from 2 to 10 megabytes.

So, what about that "unlimited" part? Fortunately, Google gives us a loophole big enough to drive a blog through.

Photos no bigger than 800 pixels on any side do not count towards the 1-GB limit. (The side-size allowance is even more generous with a Google+ account: a whopping 2048 pixels.) You can have as many of them as you like.

But wait, what about image quality? If you try to print an 800-pixel image it will either be small or muddy and grainy.

Computer monitors, however, are low-resolution devices. They can't use those extra pixels. For blogging purposes, you lose nothing by stepping down the resolution of your photos to 800 pixels or even less.

Even if you post a huge megapixel photo to your blog, Google scales the resolution down to fit your blog pages (but puts the whole thing at Picasaweb).

Consequently, I always step my photos down before posting. That is, I make a low-res copy, and upload that to Blogger.

One of my blogs (not this one) shows hundreds of photos. Nonetheless, I've still got plenty of room in my free Picasaweb account.

Unlimited online photos

John Kratz photo
Your blog lives "in the cloud." Its contents are distributed.

Blogger's servers assemble the different page elements from various locations.

You can blog photos hosted online anywhere--at Flickr or Photobucket or even on your own web server.

However, if you upload a photo directly to your blog, Blogger stashes it in a linked Picasaweb account.

Wednesday, June 13, 2012

Ignore the robots

In the early days of the Internet people added metadata (data about data) to web pages to tell automated search-engine robots what was there.

Invisible to humans, this was a kind of table of contents for these automated web crawlers, who in turn report to the search engines. A whole science of search-engine optimization evolved to get search engines to notice content and rank it highly.

Today the robots have grown smarter. They read the web very much the way that we do. Metadata is all-but obsolete. Instead, to tell search engines about your web page, the best strategies involve clear organization and descriptive headings.

This is especially true on your blog. Blogger's internal architecture is robot-friendly, and the best thing you can do for the search-engine 'bots is to focus on your human readers.

So how do you get the search engines to notice you? The world's largest--Google--has this instructive advice.

Write clearly and well, use descriptive titles, and use internal links to make your content available to your readers. Those good writing practices will please your readers and have the following two effects on your search-engine rankings:
  1. Search 'bots will be able to categorize and index your content.
  2. Readers who find your blog useful and interesting will be more likely to link to it. This will boost your search-engine ranking with search sites (such as Google) that rank your blog based on who links to you.
Ignore the robots and focus on your human readers, and everyone will be happy.

Ignore the robots

In the early days of the Internet people added metadata (data about data) to web pages to tell automated search-engine robots what was there.

Invisible to humans, this was a kind of table of contents for these automated web crawlers, who in turn report to the search engines. A whole science of search-engine optimization evolved to get search engines to notice content and rank it highly.

Today the robots have grown smarter. They read the web very much the way that we do. Metadata is all-but obsolete. Instead, to tell search engines about your web page, the best strategies involve clear organization and descriptive headings.

Tuesday, May 22, 2012

Blogger's White Screen of Death

 
Blogger's slow transition to a new user interface (for bloggers, that is) has produced many bugs and problems.

One experienced blogger recently described the "White Screen of Death," in which the new Blogger engine sometimes hangs while trying to load the dashboard.

However, the real White Screen of Death is the new interface itself, in which related page elements (graphics and text) are scattered

hither
and yon
in super tiny sizes

and in low-contrast pastels, on a vast white background.

The White Screen of Death has already attracted howls of protest, especially (though not exclusively) from bloggers who are visually impaired. WSOD effects are especially acute on large-screen monitors, where the new design uses all the screen real estate instead of organizing things compactly.

The problem is exacerbated by the use of harder-to-read printer fonts (such as Ariel and Helvetica) instead of eye-friendly screen fonts (such as Verdana and Trebuchet). This is web-design 101 stuff that Blogger used to know.

There are other problems with the new interface, but these are emblematic of a faddish disregard for basic design principles.

It's still no longer possible to choose the old interface. , but eventually Blogger has retired that option will be withdrawn and everyone will be has been force-marched to the new look and feel.

To revert back (for now) from the new to the old, choose the old interface from the gear-cog menu on the dashboard. Right now I recommend this, if only to avoid outright bugs in the new technology.

Thanks to unrelated problems in the underlying technologies that Blogger is also deploying, the April 2012 date for final mandatory rollout has been pushed back.

Presumably Blogger will fix these technical bugs (which have nothing to do with the design of the user interface) and terminate the old UI.

There's not a whole lot we bloggers can do other than watch this train wreck unfold.

For the record, you can register your protests here. But do not hold your breath.

If this blog gave a Too Clever By Half award, these awful design decision would be a leading contender.

Blogger's White Screen of Death

 
Blogger's slow transition to a new user interface (for bloggers, that is) has produced many bugs and problems.

One experienced blogger recently described the "White Screen of Death," in which the new Blogger engine sometimes hangs while trying to load the dashboard.

Friday, April 6, 2012

List all posts in a topic

If you use labels to characterize your posts (and you should, it is a very handy way to organize your blog), you probably know how each label groups those posts together by category on separate label-search pages.

But wait, there's more.

You can list all of the posts with the same label in your sidebar, sorted alphabetically if you like, or in chronological order, oldest first.

For instance: All your recipes. Your 2010 trip to Italy. Your beer reviews. Whatever.

Click on any of the post titles on the list to see the full post. The list is dynamically generated, so it will grow automatically as you add posts.

For an example, look no further than the sidebar of this blog at the lower sidebar of my other blog (I'm not using this trick in this blog at the moment).

Before I provide the step-by-step, an overview. (Or, if you know all this, you can jump directly to the short summary workflow at the end.)

Every label on your blog is associated with a feed that comprises all your posts with that label. A third-party web service called Yahoo Pipes lets you manipulate feeds (for example by sorting them).

Other web services will then turn that reordered feed into a script that, when pasted into a sidebar gadget, will generate the list of posts.

No programming knowledge is required. You cut, paste, and click some buttons.

You got that? We take your blog content, in the form of a feed, completely out of Blogger.

We then manipulate it, turn it into a script, and finally bring it back to your blog.

Feed
There are several formats for a feed of a label on your blog, all equally valid. To keep things simple I'm only going to describe one of them:
http://www.yourblogname.blogspot.com/feeds/posts/default/-/labelname?max-results=999
Swap in your blog url and label to get the feed for that label.

Feed Notes:
  • Substitute your blog's root address for "yourblogname.blogspot.com." If you have a custom (non blogspot) domain, use that.
  • Label names are case-sensitive: if you've labeled posts as "Recipes," do not use "recipes" in the feed.
  • Spaces in the label name, if any, must be rendered as "%20" in many browsers, thus "France%20Trip" not "France Trip."
  • If you paste this url into your browser, you may see a reasonable representation of the posts in the feed or you may see a bewildering set of xml tags.
  • Different browsers render feeds differently, but it doesn't matter how the feed looks.

Reorder
If you want your list of posts to be in the default order, most-recent first, you can skip this step and just port your feed url over to the script maker.

Otherwise, meet Yahoo Pipes, a third-party (i.e., not part of Blogger) web service devoted to mixing, reshuffling, slicing, and dicing feeds of all kinds.

To make this easy, I have written a pipe that will alphabetize your feed and another that will put it in chronological order.

Choose your pipe, enter your feed, run the pipe, and then choose "Get as RSS" from the options near the top of the page.

This last step will generate another feed, which you can then port over to the script maker by copying and pasting from the address bar of your browser.

Feed to Javascript
There are several web sites that turn feeds into scripts. I've been using feed2js.org. Here you enter the feed url and specify the script according to several attributes.

Since you are only taking the titles of the posts for your list, this part is easy.

The first specification you are asked for is the url for the feed. Unless you have skipped Yahoo Pipes (because you want the list of posts to be in Blogger's default chronological order), this is the feed from the pipe, which you can copy and past from the address bar in your web browser.

There's one thing to check about this url. If it begins with
feed://
you must change that to
http://
or feed2js will fail.

You can play with the other specifications to see how they work, but I recommend the following settings for most indexes.
  • Show channel: No.
  • Number of items to display: 999
  • Show/hide item descriptions? How much? 0
  • Show item author? No
  • Use HTML in item display? Yes
  • Show Item Posting Date? Your call
  • Time Zone Offset: Only if showing date
  • Target links in the new window? No
  • UTF-8 Character Encoding: Check "Use UTF-8 character encoding"
  • Podcast enclosures: No
  • Custom CSS: Leave blank
Test this using "Preview Feed" and, when you are satisfied, click "Generate JavaScript." That's as close as you need come to programming.

Remember that the number-one source of errors at this point is failure to change "feed://" to "http://" in the feed url.

Also note that the script will take its formatting from your blog, so the list will look different (and will fit in better) than the preview.

Copy the script and paste it into your blog

Paste the Script into Your Blog
You can paste this into a blog post or a static page, but I think the best place for this sort of index is in your blog's sidebar.

To do that, create a new sidebar gadget through your dashboard's Design setting. Choose "HTML/JavaScript", give the gadget a descriptive title (such as "Recipes" or "Reviews"), paste the script, and save.

Position the gadget where you want, save again, and you are done! Oh wait, an important note.

Long Lists
Unfortunately, Yahoo paginates its feeds in groups of 100 posts. The whole feed is available, but in segments (The link describes this limits and how to get around it).

If you have more than 100 items in your feed, you will have to make a script for each 100-post segment. If you paste the scripts back to back, on the same page or widget, there will be no line or gap.

Blogger similarly paginates its label feeds at 500. If you have more than 500 items in your feed then you will also have to take this into account by basing scripts of 500-1,000 feeds on its second feed "page."

If you read the two links above you will see how to get around these limits, but on request I will write a step-by-step detailing exactly how to set up this index for long lists of more than 100 posts and for very long ones of more than 500.

Summary workflow with links:
1. Get your feed in order and run it through Yahoo Pipes.
  • For an alphabetical list of post titles, use my alphabetizing pipe.
  • For a chronological table of contents, use my chronological pipe.
  • To keep the default last-first order, skip Pipes, go to Step 3.

2. Get the feed of the pipe output

3. Paste the feed into feed2js.org
  • if the feed url begins with "feed://," change that part to "http://"
  • specify the output of the script using the settings at feed2js
  • test the settings to see what you will get, making changes to settings if necessary
  • once you are satisfied, create the script
  • copy the script and return to your blog's Layout settings page (accessible from your dashboard)

4. On your blog's Layout page
  • create a new HTML/Javascript gadget in your sidebar
  • give it a descriptive short title
  • paste the script from feed2js
  • save the gadget
  • position the gadget as you like
  • save the change.

List all posts in a topic

If you use labels to characterize your posts (and you should, it is a very handy way to organize your blog), you probably know how each label groups those posts together by category on separate label-search pages.

But wait, there's more.

You can list all of the posts with the same label in your sidebar, sorted alphabetically if you like, or in chronological order, oldest first.

For instance: All your recipes. Your 2010 trip to Italy. Your beer reviews. Whatever.

Tuesday, March 27, 2012

Four ways to flip your blog posts

One of the most-sought missing features from Blogger is the little button you click to show your posts in chronological order, oldest first.

Where Blogger fears to tread, however, clever hackers (one of them too clever by half) have rushed in with template modifications and other tricks.

As of this writing there are four different hacks to show your blog's content first to last instead of last to first, each method with its own advantages and disadvantages. Here's a quick survey.

  • The ASC solution ("ASC") is a template modification that shows reordered posts on blog pages with special web addresses ending in ASC. At the moment this is my favorite method, though it may not work for every blog.
  • There is also a 500-posts-on-a-page hack ("500") that lets you show as many as 500 reordered blog posts (but no more) on a single static page.
  • Chronoblog is the name of a sidebar gadget that puts your oldest post in a little window at the top of your blog. Navigational buttons move, post-by-post, through your entire blog from beginning to end.
  • Finally, there is an out-of-blog ("OOB") solution that works by manipulating your blog's feed using several third-party web services, then displaying the reordered result on one or more static pages.

I'm not including the simplest method, which is to change the post order by editing the publication dates of every post.

There is something to be said for each of these solutions, none of them perfect. Here is a quick comparison.

First, none of these solutions will run for readers who have disabled JavaScript. None replace your main blog page, which will continue to show your content in classic blogging order, most-recent last.

ASC posts on special blog pages that have "older" and "newer" links at the bottom, just like regular archive pages. Oddly, posts with the same publication date will still appear in backwards order within that day.

To implement ASC, paste a script into your blog's template. I found this pretty straightforward. However, a related hack, to get around the same-day bug, was a little trickier. Also, you must tinker with the url a bit to get the first page just right.

One other nice feature: Once you install ASC, you can use it to generate an oldest-first page by label. So, for instance, you can make a page showing only the posts from that trip to Italy, starting with the first day and ending with the last.

The author provides the script and instructions in this blog post.

500 shows your oldest-first posts on a separate static page with a limit of 500 posts. Here you do not need to crack open your template, just paste the script (provided) onto a static page.

Chronoblog takes a different approach and shows your blog posts one at a time in a little window at the top of your regular blog. You navigate from post to post within the window. It is the only one of these methods that does not even try to look like a collection of regular blog posts.

Apparently, the 500-post limit also applies to Chronoblog, though the author says there is a workaround.

Chronoblog is actually a sidebar gadget that goes in the top-of-the-blog area. Installation is a snap because the author provides an autoinstall option that adds the gadget directly to your blog.

Finally, OOB entails pasting a script into a static page or, in one variation, a sidebar gadget. Like ASC, it can also make pages by label. Detailed instruction begin here.

The other methods rely on scripts running in your blog's template, but OOB works its magic on blog content outside of Blogger entirely.

For instance, the free feed2js.org will write a custom script to show your content. No programming knowledge is required: You specify what is shown with a friendly user-preferences form.

Out-of-blog solutions have the virtue of being immune to problems related to changes in blogger's own architecture, or in browser technology. However, they are exposed to issues related to changes in the third-party blog services themselves.

One recent change, for instance, requires you to write multiple scripts to show more than 100 posts.

If you want to format OOB to look like your blog posts you must add formatting code to your template. It's not so hard to do, and instructions are provided, but it can be daunting if you are not familiar with cascading style sheets (the standard way of formatting content on web pages).

Right now the other methods work well for most blogs and in my view have the edge over OOB. However, OOB also makes a great sidebar gadget, namely a list of clickable blog titles (just the titles) in chronological order. The list revises itself as you add new posts.

You can limit this to all the titles under a particular label, such as for your trip to Italy. It's a nice little table of contents, and no formatting is required. I currently have some examples running in the sidebar of this blog.

Also OOB, being out-of-blog, works on any web page--it's not just for Blogger pages.

In short (with links),
  • ASC puts reordered blog posts on special ASC pages.
  • 500 puts up to 500 posts on a single page.
  • Chronoblog puts your whole blog in a gadget, one post at a time.
  • OOB, at the moment, requires the most work to get right, though it does allow for a few variations the others do not.

Four ways to flip your blog posts


One of the most-sought missing features from Blogger is the little button you click to show your posts in chronological order, oldest first.

Where Blogger fears to tread, however, clever hackers (one of them too clever by half) have rushed in with template modifications and other tricks.

As of this writing there are four different hacks to show your blog's content first to last instead of last to first, each method with its own advantages and disadvantages. Here's a quick survey.

Tuesday, March 6, 2012

Using those new dynamic views—selectively

If you are an early adopter you may already have switched your blog to one of the shiny new dynamic templates.

But maybe you are cautious (like me), your face pressed wistfully against the glass, eyeing the sleek futuristic designs but aware of some drawbacks (and uncertain of others).

Sigh no more! You can link directly to dynamic views of your blog without changing your template.

The dynamic templates are impressive and suggest what the future of blogging might look like.

Or not. Bloggers who have switched to the dynamic templates are encountering problems and limitations. Many are switching back.

There are seven dynamic views, and especially if you have a lot of photos the effect can be really striking.

On the other hand the pages are less customizable and missing features that some bloggers find indispensable. Only a handful of gadgets are now supported, for instance. Javascript is not.

Blogger keeps adding features to these templates, so don't write them off. But you can have the best of both worlds by linking to a dynamic-template view of your blog from your regular old-fashioned one.

(Old fashioned? Yep, those layout templates, introduced with fanfare in 2010, are no longer cutting-edge. But here's is the remedy for my comrades in caution.)

To see your blog in a dynamic view, just append the following to your blog url in your browser:
/view/magazine
Adding the above text string to your blog's url take you to the Magazine view, but there are six others each with its own unique url. (Click to get them.) One of those, Flipcard, has four subviews that you can't link to directly. (Unfortunately, because one of them is really cool.)

You can use this technique to link to any label-search page (and probably to any search or archive or other page that is not static), by inserting the text string after the root address of your blog. For example you can view all my "hints" posts on this blog dynamically with the following url:
too-clever-by-half.blogspot.com/view/magazine/search/label/hints
Alas, Too Clever is too drab to do justice to these layouts. Fortunately I have another blog that I sometimes wheel out here for demonstration purposes only. It's about apples, and provides more colorful dynamic views. This layout is called Snapshot.

My favorite effect can be found by using the Flipcard layout (at /view/flipcard) and selecting the Date subview (which sadly has no direct url).

If you have a seasonal category of posts in your blog this combination will show the cyclical nature of your subject in the clearest possible way. For an example, click the Date option after clicking here.

Caution is smart, especially if you've put effort into your blog. But you can have these flourishes and keep your reliable blog layout too.

Using those new dynamic views—selectively

If you are an early adopter you may already have switched your blog to one of the shiny new dynamic templates.

But maybe you are cautious (like me), your face pressed wistfully against the glass, eyeing the sleek futuristic designs but aware of some drawbacks (and uncertain of others).

Sigh no more! You can link directly to dynamic views of your blog without changing your template.

Saturday, February 18, 2012

Comparing blog-order hacks #1: Reliability now and tomorrow

You can show your blog content in its original posting order, oldest first.

There are several approaches you can take, none perfect, as described here.

One way bypasses one set of problems by using third-party web services. Another bypasses problems with web-services by using Blogger's own architecture.

Which is best for your blog? Consider which is likeliest to hold up over time.

In this case, compare a web-services solution that I created and document on this blog with a newer script-based approach created by a Finnish programmer whose chosen Blogger name is MS-Potilas.

It's not a slam-dunk, but the new method is very promising.

A key issue for me in evaluating these methods is reliability. Changes to web services can ripple though web-services methods, requiring users to scurry to compensate.

Last year for instance Yahoo Pipes decided to paginate its feeds at 100 posts, affecting anyone using my web-services method on blogs of more than that.

I posted the workaround, but what a pain in the neck! I felt badly for everyone I had convinced to use my solution.

However, there is an equivalent issue for scripts that reorder content without thrid-party web services. Changes in how Blogger works, or in how different browsers work, can have similar side effects.

Recently for instance Blogger rolled out a new commenting feature that screwed up comments on many blogs.

These changes can and do break script-based hacks regularly.

My web-services method was in response to that: a popular javascript-based solution no longer worked on some browsers. These approaches kept breaking.

Web services let us avoid that problem by taking the blog content, in the form of the blog feed, completely out of the blog, manipulating it, then returning it to the blog as a script you just paste onto any static page. Brilliant, unless the web services fail.

I quizzed MS-Potilas about the robustness of his no-web-services script-based hack. Might it break someday as browsers continue to evolve?

No, in his view because "Javascript DOM [Document Object Model] handling is solid, so it won't break on future browsers."

Of Blogger itself he says
I don't think Google/Blogger will change the "old" (layout) templates, which the script works with, so DOM should keep intact, and DOM handling in javascript is done in just basic javascript, no tweaks or anything that might break on browser update.

Of course there is slight possibility that they change something so radically, that the script breaks, but that would be very difficult, with people having their customized templates, without breaking many other things at the same time.

For future templates the script might not work, but for current, it should not break.
I am a glass-half-empty kind of guy about these things, so I take this with a grain of salt. But just a grain.

See my conversation with MSP about these (and other) questions if you'd like to evaluate for yourself.

A related issue has to do with the maintenance of these solutions.

Any blog tweak can feel daunting and confusing and with the potential for error; it's a good idea to back up your template and make a disciplined little production out of every such change. But once you've done it, and it works, it's great and you are done with it.

That's how my hack worked a year ago, but thanks to changes in Yahoo Pipes last fall, no longer. Pipes now segments the hack into blocks of 100 posts. A blog of 350 posts needs four iterations, not one, to show all the content in chronological order.

Worse yet from my point of view, as that blog adds posts (at the 400, 500, 600-post mark, ad infinitum), additional scripts are required.

One hundred posts is a lot, depending on how you blog. But if you use Yahoo Pipes, as I do, you will never be done with the need to tinker. As of this writing, that is not true of the Finnish solution.

That is why I recommend that bloggers seeking to flip their blog content give MS-Potilas's script a try first.

If it doesn't work for you (and it may not) or if it breaks someday, then my blog-journey hack has the virtue of independence from changes to browsers and Blogger alike.

Comparing blog-order hacks #1: Reliability now and tomorrow

You can show your blog content in its original posting order, oldest first.

There are several approaches you can take, none perfect, as described here.

One way bypasses one set of problems by using third-party web services. Another bypasses problems with web-services by using Blogger's own architecture.

Which is best for your blog? Consider which is likeliest to hold up over time.

Thursday, February 16, 2012

Easier (mostly), better (mostly) way to reverse blog-post order

Two years ago I introduced a method for showing your blog's content in the order you wrote it, oldest first.

For the past few months I have been testing a promising new way to do the same thing.

When it works it is very good. Here is how it looks on this blog. It took me less than five minutes to install.

If you want to show your blog content oldest-first, I recommend trying this one out before resorting to the method I created. How's that for an endorsement?

No method for reordering blog content is perfect, however. Here are some pros and cons.

Though there is some logic to Blogger's default reverse order, first-post-first is especially useful for travel bloggers or anyone who wants to show their blog as a journey progressing over time.

Towards that end, I spent time on this blog documenting one method of reordering posts with your blog's feed and third-party web services. The justification for this approach has been somewhat eroded by changes in those services.

The new approach, from a retired programmer in Finland called MS-Potilas, uses a script to maniplate elements within Blogger. This approach has the following advantages compared to my blog-journey hack.
  • You don't have to learn as much. Blog feeds, Yahoo Pipes, all of that stuff that my hack uses--not needed here.
  • Tight integration with Blogger architecture. It's possible to format my hack to look like a page of blog posts in oldest-first order, though some post elements (such as comment links or labels) are absent.
    The Finnish solution, however, shows the actual posts on a kind of specialized blog archive page, complete with "older posts" and "newer posts" navigational links if your blog has them. No formatting is required and all posts elements are present.
  • Works with private blogs. Private blogs do not have feeds, so feed-based solutions like mine don't work for them.
  • Immunity from changes in third-party web services. If feed2js.org goes out of business, it doesn't leave you scrambling to find a new feed-to-script service. Update: A bit more on this point here.
  • Do it once only. No need to tweak things as your blog grows.
Here are the disadvantages compared to the web-services approach.
  • It doesn't work for every blog template, reportedly, especially older ones. And it may not work in the future, if template architecture changes again.
  • It is vulnerable to changes in Blogger and in browser technology. This is the flip side of not using web services.
  • You have to paste some javascript into your template in the right spot. MS-Potilas walks you through this, but if you do not know javascript there is an element of flying blind. Also, as I discuss below, non-programmers lose some functionality.
  • It doesn't reverse the order of multiple posts within the same day, though the author describes a workaround for that.
Note that the author, MS-Potilas, has a number of ingenious Blogger hacks on his blog. One of these is another oldest-first script that puts up to 500 blog posts, in chronological order, on a static page.

I like his first method better, but if you really want to be thorough you can check this one out too.

Here's something that I think the web services do better than MS-Potilas's script. They are easier to customize. If you want something a little different, like a list of post titles only that are ordered alphabetically (not chronologically) to put in a sidebar gadget, use web services.

I'm sure MS-Potilas could easily knock off a version of his script that would do the same thing. But you can't do it, unless you are a programmer. The web services have handy user interfaces that let anyone slice and dice the content without ever typing, or understanding, a line of code.

The same kind of usability for the masses is a key feature of Blogger and is something I really appreciate wherever I find it. Fortunately, if you need something like the alphabetical sidebar list you can use web services to make it even if you also use the Finnish script to reorder your blog's content.

Here's my blog-journey hack and here's the new kid on the block from MS-Potilas.

Update: I've written a comparison of four leading methods to flip your blog-posting order.

Easier (mostly), better (mostly) way to reverse blog-post order

Two years ago I introduced a method for showing your blog's content in the order you wrote it, oldest first.

For the past few months I have been testing a promising new way to do the same thing.

When it works it is very good. Here is how it looks on this blog. It took me less than five minutes to install.

If you want to show your blog content oldest-first, I recommend trying this one out before resorting to the method I created. How's that for an endorsement?

No method for reordering blog content is perfect, however. Here are some pros and cons.