Saturday, May 22, 2010

Fixing your feed part 2

English-language syntax is tricky, and the Short pipe does a number of little tricky things to compensate. Even so, the generic replacement rules sometimes run into an exception that screws things up.

For instance, my pipe was evaluating the text string "U.S." as a place that needed a line break after the first period.

Why? The Short Feed pipe evaluates any period followed by letter with no intervening space as the end of a paragraph, in need of some line returns. (The Full pipe does not do this.)

I could have edited the post where I originally wrote "U.S." to be simply "US," but that would have been incorrect usage and I am fussy about that sort of thing. So I wrote an exception into the pipe.

I will show you what I did so that you can write simple exceptions too. (For example, you might write about time and say "11:30 A.M.") As a first step, you must go to your pipe and click Edit.

Your pipe is made of modules that operate on the elements of your feed as it flows through the pipe.


Near the beginning of the pipe, after a small module called "Reverse" (which is the one that puts your feed into chronological order) is a Regex module. It only has one rule in it, which is to replace all instances of "U.S." with "@US@".

Notice that the string "U.S." is specified, in the Replace field, as "U\.S\." That is, there is a left-leaning slash before the periods. In the syntax of regular expressions, the period has a special meaning--unless it is preceded by the slash, in which case it (and the slash) equals a period.

If you were to make an exception for "A.M." you would search for "A\.M\."

Note also that there is a checked-off box by the letter "g" towards the end of the line. That means the search will be applied globally to the whole feed at once, not just to the first instance of "U.S."

Making this change at the start of the pipe means that the later search-replace operations won't put line returns between U. and S. But once we are past that part of the pipe we can change things back.

Four modules from the end of the pipe is another Regex module, and one of the rules searches for "@US@" and turns it back into "U.S." This rule is also global. Note that the syntax rule about putting a slash in front of every period does not apply to the "replace with" field, in fact putting the slashes there will put slash characters into the feed.

You can use this method to fix other anomalies that crop up in your feed.

For instance, in one post on my blog I begin with a quote from Henry David Thoreau followed by his name and no punctuation. Then I begin the next paragraph by saying, "Thoreau asked for...."
Bring me an apple from the Tree of Life!
--Henry David Thoreau

Thoreau asked for....
All fine and proper, but the feed stripped away the returns and gave me
Bring me an apple from the Tree of Life!--Henry David ThoreauThoreau asked for....
My pipe fixed most of that, but was unable to recognize the need for line breaks after the unpunctuated "Thoreau." So the pipe did not fix "ThoreauThoreau."

I chose to fix this by replacing "ThoreauThoreau" with "Thoreau<p></p>Thoreau" (the "<p></p>" providing the line returns). I put this in the first Regex box along with "U\.S\." and a number of other rules, but unlike the "U.S." search could just as easily have put it in the last one.

I also did not mark "ThoreauThoreau" as a global search. It's unusual enough to be a one-off, and searching globally slows things down.

I think of these and similar anomalies as unusual exceptions to general text-handling rules.

With these two examples, I hope I have given you the tools to fix your "unusual exceptions." Just add search and replace terms to the existing modules by clicking the + Rules button and filling in the blanks.

My own private version of this pipe that I use for my blog has been tweaked to deal with the above exceptions and also "J.R.R. Tolkien," "ZestarHere's," "NASAThe," "best;'T is," and several other oddities that came about when the Short option stripped the HTML from my feed.

If you use the Short feed and blog regularly, you are bound to generate some exceptions of your own.

Since I continue to blog, I proofread the newest parts of my own Journey feed to catch new "exceptions" that occur periodically.

After editing trailing spaces from your original blog post, this is the final step in polishing your first-post-first feed of your blog.*

*(Another step, editing the modules to allow for additional line returns, is only needed if you are running a Short feed through the pipe and if you have many short paragraphs in the first 250 words of any of your posts. It is detailed further here.)

Congratulations, and let me know how it turned out!

Fixing your feed part 2

English-language syntax is tricky, and the Short pipe does a number of little tricky things to compensate. Even so, the generic replacement rules sometimes run into an exception that screws things up.

For instance, my pipe was evaluating the text string "U.S." as a place that needed a line break after the first period.

Why? The Short Feed pipe evaluates any period followed by letter with no intervening space as the end of a paragraph, in need of some line returns. (The Full pipe does not do this.)

I could have edited the post where I originally wrote "U.S." to be simply "US," but that would have been incorrect usage and I am fussy about that sort of thing. So I wrote an exception into the pipe.

I will show you what I did so that you can write simple exceptions too. (For example, you might write about time and say "11:30 A.M.") As a first step, you must go to your pipe and click Edit.

Fixing your feed part 1

For Short feeds only.

I built the Short pipe for this hack to work on blog feeds that have been limited to the first 255 characters or so. It assumes no more than nine paragraphs or so.

That should be plenty if you set your feed options to "short."

However, even a Short feed could theoretically have more than nine paragraphs in a post. If you have a post with lots of really short paragraphs at the beginning--perhaps a list of eight or more short items with line breaks in between--then you may see see some paragraphs run together with no line breaks between them.

I do think this is unlikely, but it is possible.

If your feed is missing some line returns even after it has gone through the Short pipe--and if you've already followed my advice about trailing spaces--and if your pipe catches the first nine returns or so but then fails--then this post is for you.

You can skip to the next post if that doesn't apply to you. Otherwise, go back to Yahoo Pipes, log into your Yahoo account if needed, click "My Pipes," then on the pipe, then on "Edit Source" and scroll down the page.

You should have copied my pipe in your own Pipes account and already be using that to generate the feed for your script.

If you skipped this step you'll have to do it now and then repeat some steps, pasting a script based on the copy into your blog. (Any CSS formatting you may have done is still good, though.)

What you are looking for is a module called "Loop" containing another module called "String Regex" that in turn lists eight "replace" operations for a single quotation mark.
This pipe will handle up to four quotes per post--four words or phrases or paragraphs bracketed by quotation marks. If any of the posts in your feed have more quotes than that, you need to add more "replace" instructions to this module. Here's how.

First, determine how many quotations per post you'll have. Overestimate. Then subtract four (which are accounted for) and multiply by two.

Click the + Rules button to add new Replace lines to the module. You'll need to add two Replace lines for every quote, so if you need another 20, add 40.

Fill the empty Replace fields with a quotation mark, and the empty "With" fields with the alternating pattern @@1@ and @@2@, beginning with @@1@. Yo can copy and paste, but be sure to do so in the right order, 1-2, 1-2, 1-2 & etc.

Why are we screwing around with these quotes? Quotation marks have some unusual syntax and might get messed up by some of the other things we are doing in this pipe later. Consequently we are replacing them with these oddball character strings for now. We'll restore them later.
The next module is another Loop/String Regex deal, but instead of searching for a quotation mark the"Replace" field is a string of typographical characters:([,.;:!?)*])([A-Za-z(]). In the language of normal expressions, this translates into "find any of the following followed by any alphabetical character OR open-parenthesis: a comma OR a period OR a semicolon OR a colon OR an exclamation point OR a close-parenthesis OR an asterisk." It would find, for instance, the "!P" in
Welcome to my blog!Please stop and smell the javascript.
and would stick some line returns in there.

All you might need to do is to add more lines to this module and populate the blanks with the codes from the filled lines, using copy and paste. The codes are the same for each line, and each line adds a return once per blog post.

The next Loop/Regex Module does a similar thing for quotes that end a paragraph.
As you can see, there are two different patterns here. You will need to add as many new lines as you did for the quotations in the first Loop/Regex module, and turn them into duplicates (copy and paste works great) of the two patterns en exactly equal numbers. If you add ten lines, make it five of each. The order does not matter.

(Actually you probably don't need to add that many new lines. What you really need to add are enough new lines, in pairs, to equal the most quotes that end a paragraph in the first 255 characters of any of your blog posts.)

Taking care of the quotes is probably the most cross-eye-making part of this whole operation. If you don't make enough new replace lines, or if you decide to skip this step, the worst thing that will happen is that you may find that some paragraphs ending with quotes are missing their line returns in the first-post-first feed you publish on your blog.

There is one more step you should take--a little easier I think--to perfect that feed.

Fixing your feed part 1

For Short feeds only.

I built the Short pipe for this hack to work on blog feeds that have been limited to the first 255 characters or so. It assumes no more than nine paragraphs or so.

That should be plenty if you set your feed options to "short."

However, even a Short feed could theoretically have more than nine paragraphs in a post. If you have a post with lots of really short paragraphs at the beginning--perhaps a list of eight or more short items with line breaks in between--then you may see see some paragraphs run together with no line breaks between them.

I do think this is unlikely, but it is possible.

If your feed is missing some line returns even after it has gone through the Short pipe--and if you've already followed my advice about trailing spaces--and if your pipe catches the first nine returns or so but then fails--then this post is for you.

You can skip to the next post if that doesn't apply to you. Otherwise, go back to Yahoo Pipes, log into your Yahoo account if needed, click "My Pipes," then on the pipe, then on "Edit Source" and scroll down the page.

Friday, May 21, 2010

Still missing some line returns?

If you are still getting run-together paragraphs and have the Short feed, there are two possible causes. (If yours is Full, or if you are just building a list of blog-post titles, you are done! Go here.)

One possible cause is that you have line breaks without punctuation, such as you might find in a list of items:
  • cheese
  • socks
  • chalk
  • birthdays
If so, you might see a line in your feed that looks something like this:
cheesesockschalkbirthdaysIf so, you might see...
--all of the returns you put in your post brutally stripped away by the Short feed.

Your possible remedies for that are as follows:
  • You can edit your post and punctuate your list, with periods or commas or semicolons;
  • You can edit your post to put a space after all the list items except the last one, which you punctuate (so that you get "cheese socks chalk birthdays." all on one line);
  • You can edit your pipe to deal with this list, as described here.
A second possible cause, less likely, is that my pipe does not perform enough search-and-replace operations on your feed to catch all of the returns in it.

This would only happen if the start of one of your blog posts included more than seven paragraphs. Coincidentally, that could be because of a list of items like the one above, but (a) it would only kick in after the seventh return (or so) in your blog post and (b) would occur even if you punctuate your list.

The remedy for the second cause is to edit the pipe to add more search-and-replace operations. I explain that here.

Still missing some line returns?

If you are still getting run-together paragraphs and have the Short feed, there are two possible causes. (If yours is Full, or if you are just building a list of blog-post titles, you are done! Go here.)

One possible cause is that you have line breaks without punctuation, such as you might find in a list of items:
  • cheese
  • socks
  • chalk
  • birthdays
If so, you might see a line in your feed that looks something like this:
cheesesockschalkbirthdaysIf so, you might see...
--all of the returns you put in your post brutally stripped away by the Short feed.

Your possible remedies for that are as follows:
  • You can edit your post and punctuate your list, with periods or commas or semicolons;
  • You can edit your post to put a space after all the list items except the last one, which you punctuate (so that you get "cheese socks chalk birthdays." all on one line);
  • You can edit your pipe to deal with this list, as described here.
A second possible cause, less likely, is that my pipe does not perform enough search-and-replace operations on your feed to catch all of the returns in it.

This would only happen if the start of one of your blog posts included more than seven paragraphs. Coincidentally, that could be because of a list of items like the one above, but (a) it would only kick in after the seventh return (or so) in your blog post and (b) would occur even if you punctuate your list.

The remedy for the second cause is to edit the pipe to add more search-and-replace operations. I explain that here.

Missing line returns and trailing spaces

You can skip this step if you are using a Full or Jump-Break feed or if all you are publishing is a list of post titles.

Otherwise:

Your thirst to present your blog content in chronological order has led you to publish a feed of your blog and run it through a pipe, then make a second feed from that and convert it to a script that you publish on your blog.

Probably you've even taken the next step of using CSS to format the way your blog presents the feed. (If not you can do that next--or go back and do it right now.)

Congratulations!

But, are you happy?

If you take the time to proofread the final result, I hope you will be pleased. At last, you can relive the journey that your blog has been for you--and share it with your readers.

However, if your feed is set to Short, you might also find some anomalies and typos that you can only fix by editing your pipe or your blog.

The original Short feed simplified and de-formatted your blog. All hyperlinks were stripped away, and all formatting, and all line returns. If you had written,
Welcome to my blog!
Please stop and smell the javascript.
Your feed would render that as
Welcome to my blog!Please stop and smell the javascript.
without even the grace of a space between ! and P.

Your pipe does not restore hyperlinks, and formatting is a job for CSS. But the pipe is designed to put those returns back where they were. If you had photos in your posts, it will even put some of them back as thumbnails.

(More on Short versus Full here.)

If the pipe does not do a perfect job of restoring the returns, there are two steps you can take. The simplest is to edit your original blog posts to remove trailing spaces from paragraphs.

If, for instance, in the example above, you had typed a space after "Welcome to my blog! ", the space would show up in your feed as follows:
Welcome to my blog! Please stop and smell the javascript.
Ironically, without the inappropriate "blog!Please" text string, your pipe has no way to identify the place to add line returns back in.

If you see paragraphs all jammed together in your feed, the first and simplest thing to do is to open the original post for editing and delete the trailing spaces.

Once the changes you have made make their way through the pipe and back to your blog--which can take an hour or so--the returns should be back where they belong.

Or, maybe not all of them. That curious matter is dealt with in the next section (or two).

Missing line returns and trailing spaces

You can skip this step if you are using a Full or Jump-Break feed or if all you are publishing is a list of post titles.

Otherwise:

Your thirst to present your blog content in chronological order has led you to publish a feed of your blog and run it through a pipe, then make a second feed from that and convert it to a script that you publish on your blog.

Probably you've even taken the next step of using CSS to format the way your blog presents the feed. (If not you can do that next--or go back and do it right now.)

Congratulations!

But, are you happy?

If you take the time to proofread the final result, I hope you will be pleased. At last, you can relive the journey that your blog has been for you--and share it with your readers.

However, if your feed is set to Short, you might also find some anomalies and typos that you can only fix by editing your pipe or your blog.

Thursday, May 20, 2010

Format feed with CSS

To format, or not to format?

If you are using my blog-journey hack to put your blog in chronological order, one of the things I explain how to do is to format the results.

You could, for instance, try to make your reordered version look as much like a series of regular blog posts as possible, by copying the formatting for blog-post titles and text.

However, formatting is optional. And, if all you really want is a list of the titles of your blog posts in order, formatting is really not necessary at all.

In my experience, unformatted results can look acceptable, at least for unmodified designer templates. You can see an example of that on this blog, where the reordered feed of the blog has no special formatting applied.

Compare that to the reordered feed on my "real" blog, where I used CSS to format that blog's feed to look more like a series of regular blog posts.

For an example of an unformatted headers-only feed, look no further than the sidebar of this blog, which includes a list of all the posts that relate to blog-post order in chronological order from oldest to newest.

A sidebar widget is not a bad place to put such a list, but you can also put one on a static blog page.

The term "unformatted" is really a misnomer. It just means that the "unformatted" feed will take its form from existing formatting for the blog, rather than from styles that you specify.

It's up to you. Once you've implemented the blogger-post-order hack, see how it looks. Formatting is an option; take it or leave it.

In either case, you may want to fix missing line returns and other anomalies in the feed, unless you are just publishing the titles of your posts.

Format feed with CSS

To format, or not to format?

If you are using my blog-journey hack to put your blog in chronological order, one of the things I explain how to do is to format the results.

You could, for instance, try to make your reordered version look as much like a series of regular blog posts as possible, by copying the formatting for blog-post titles and text.

However, formatting is optional. And, if all you really want is a list of the titles of your blog posts in order, formatting is really not necessary at all.

Stylin' your blog-post-order hack (part 2)

As I try to explain in part 1, the code that structures your blog ("This is a blog post" "This is a heading" etc.) has to be associated with style definitions that are elsewhere. In this case, "elsewhere" is in the template for your blog.

We'll be adding new style definitions to your template but not changing any existing ones. First, however, we have to tag your hack so as to associate it with the new formatting.

Return to the static blog page where you pasted your script and open it in the html editor.

The actual script is included inside a <script.../script> tag. To tag that for formatting, put it between the following tags:
<span class="rss-journey"> [<script.../script>] </span>
where [<script.../script>] refers to the first part of what you've already pasted.

Publish this. There will be no change yet, but the span class now allows you to format the feed your script is rendering on that page.

The code that will format your css looks something like this:

/* RSS Journey
----------------------------------------------- */
/* Date, if included. */
.rss-journey .rss-date {
font: $(body.font);
color: #b5c88f;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 1px;
line-height: normal;
}

/* Controls indentation */
.rss-journey ul, .rss-journey ol {
padding-left: 0;
}

/* Formatting of each feed item (blog post)*/
.rss-journey .rss-item {
margin: 0;
margin-top: 1.5em;
line-height: 17px;
}

/* Space between paragraphs within feed items*/
.rss-journey .rss-item p {
margin-bottom: .95em;
margin-top: 0;
}

/* Formatting of blog-post titles in feed*/
.rss-journey .post-title {
margin: 0;
font: $(post.title.font);
margin-bottom: 0px;
margin-top: 3em;
line-height: normal;
}

/* Formatting of blog-post-title links in feed*/
.rss-journey .rss-item a {
color: $(post.title.color);
text-decoration: none;
}

/* Formatting of visited blog-post-title links in feed*/
.rss-journey .rss-item a:visited {
color: $(post.title.color);
text-decoration: none;
}

/* Formatting of blog-post-title links in feed
on mouse hover */
.rss-journey .rss-item a:hover {
color: #6f9d1c;
text-decoration: none;
}

/* Formatting of regular links in feed*/
.rss-journey .rss-item .special-link a {
font-size: 14px;
color: $(post.title.color);
text-decoration: underline;
margin: 0;
}

/* Formatting of regular links,
hover */
.rss-journey .rss-item .special-link a:hover {
color: #6f9d1c;
text-decoration: underline;
}

Note how ".rss-journey" corresponds to the tag you put around the script in your post. That's how blogger tells your browser where to apply the formatting.

When I say "The code that will format your css looks something like this," I mean that the actual values I specify are just examples, some of which probably won't even work in your template. You are going to have to try different things out and see how they render.

Still, you can start out by pasting the above into your template and seeing what happens. But before you do anything, back up your template (Design > Edit HTML; the "Download Full Template" option). If you mess up you can restore the template to its pre-hacked state.

Then find a section inside the CSS code--I put mine before the /* Main section--and paste in the code. (It doesn't really matter what order it is in, but keeping it in its own section is neater and makes it easier to find later.)

Paste the code there, save the changes, and navigate to the static page you've set up for your your blog journey to see what it's done. Or if the page is already open in another browser window or tab, refresh the page.

Then go back and iteratively tweak the CSS until it makes your feed look how you want it to.

(Unfortunately, since you are using a static blog page you can't use the "preview" option but must save and refresh to see the result of every change)

The syntax for formatting is specialized but not complex. Under each style name (e.g. "rss-journey .rss-item") are lines of formatting commands comprising the name of the command, a colon, a value for the command, and a semicolon. (The spaces are optional).

Commands have names like "margin-top," "font," and "line-height."

Even if you are unfamiliar with CSS you can quickly discover the effect of each command by plugging its name and "CSS" (for "cascading style sheets") into your favorite Web search engine.

Here are my comments about each of the elements of the above styles interpolated with the styles.

/* RSS Journey
----------------------------------------------- */
/* Controls indentation */
.rss-journey ul {
padding-left: 0;
}


Comment: Experiment with this value above until you are satisfied with the indentation.


/* Formatting of each item*/
.rss-journey .rss-item {
margin: 0;
margin-top: 1.5em;
line-height: 17px;
}


Comment: This controls things like the amount of extra space between each of the blog posts in your feed, and also characteristics like font attributes and line spacing for the blog-post content in the feed. In my template, many of these attributes are automatically inherited from the style for my blog posts, which is how I wanted things to look.


/* Space between paragraphs within feed items*/
.rss-journey .rss-item p {
margin-bottom: .95em;
margin-top: 0;
}


/* Formatting of blog-post titles in feed*/
.rss-journey .post-title {
margin: 0;
font: $(post.title.font);
margin-bottom: 0px;
margin-top: 3em;
line-height: normal;
}


Comment: Here, and in the related styles below, I have copied the formatting from that for my blog-post header, because I want the blog posts in my feed to resemble the real thing. Odds are these won't resemble anything on your blog.

Note also that this part uses some variables, such as "$(post.title.font)." These are defined in my template but probably not in yours. I include them as examples, but you can define these attributes in the more-traditional way. If you don't know what that is, google "css font," "css color,", etc.

/* Formatting of blog-post-title links in feed*/
.rss-journey .rss-item a {
color: $(post.title.color);
text-decoration: none;
}

/* Formatting of visited blog-post-title links in feed*/
.rss-journey .rss-item a:visited {
color: $(post.title.color);
text-decoration: none;
}

/* Formatting of blog-post-title links in feed
on mouse hover */
.rss-journey .rss-item a:hover {
color: #6f9d1c;
text-decoration: none;
}


/* Date, if included. */
.rss-journey .rss-date {
font: $(body.font);
color: #b5c88f;
font-size: 11px;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 1px;
line-height: normal;
}


Comment: I formatted this based on the formatting for the date in my real blog posts. The formatting for yours is probably different.


/* Formatting of regular links in feed*/
.rss-journey .rss-item .special-link a {
font-size: 14px;
color: $(post.title.color);
text-decoration: underline;
margin: 0;
}

/* Formatting of regular links,
hover */
.rss-journey .rss-item .special-link a:hover {
color: #6f9d1c;
text-decoration: underline;
}


Comment: These format all the links except for the title of each blog post.


You can modify other tags and styles that occur inside of your feed similarly. For instance, to add special formatting to block quotes in the feed (without affecting regular block quotes elsewhere in your blog), use
.rss-journey blockquote {
}
You probably won't need to do this, though, and in any case won't have any additional tags to modify unless you use the Full or Bump Break feed.

If this gets too crazy, you can always delete the whole /* RSS Journey*/ section and start over. If you accidentally mess up something else, you can restore the template that you downloaded to your computer.

Once you are satisfied with how you've made things look, your last step is to proofread the feed for anomalies and typos introduced by your pipe.

The next section explains how to fix them.

Stylin' your blog-post-order hack (part 2)

As I try to explain in part 1, the code that structures your blog ("This is a blog post" "This is a heading" etc.) has to be associated with style definitions that are elsewhere. In this case, "elsewhere" is in the template for your blog.

We'll be adding new style definitions to your template but not changing any existing ones. First, however, we have to tag your hack so as to associate it with the new formatting.

Return to the static blog page where you pasted your script and open it in the html editor.

The actual script is included inside a <script.../script> tag. To tag that for formatting, put it between the following tags:
<span class="rss-journey"> [<script.../script>] </span>
where [<script.../script>] refers to the first part of what you've already pasted.

Publish this. There will be no change yet, but the span class now allows you to format the feed your script is rendering on that page.

The code that will format your css looks something like this:

Stylin' your blog-post-order hack (part 1)

You've jumped through all the hoops to get your blog content listed in order, oldest first, on your blog: feed, pipes, javascript, and back on a static page on your blog.

Congratulations!

The next part of the hack uses cascading style sheets to format how your feed looks.

Are you satisfied with your formatting? If so, skip this step and go here. (If you're not sure, maybe this will help you think about whether to tweak the formatting.)

Otherwise, prepare yourself for a peek under your blog's hood.

Cascading style sheets have become the standard method for applying formatting to web pages. The idea is that instead of embedding formatting commends into the web-page code (using, for instance, the old FONT tag to select the typeface), web sites such as your blog separate formatting from content.

Consequently, when you publish a blog post titled "Stylin' your blog-post-order-hack," Blogger writes code that looks something like this:
<h3 class='post-title entry-title'>
<a href="http://URL">Stylin' your blog-post-order-hack</a>
</h3>
Blogger has elsewhere defined the formatting for </h3> (heading 3) and also for all hyperlinks within heading 3 (the <a>...</a> tag).

Blogging is not normally about code, and Blogger protects you from having to mess directly with this stuff. Nonetheless when you use Blogger's Template Designer to change the color of a blog element, it's the style sheet that gets changed. The new style then flows directly onto the way your blog is rendered on screen.

In this case, there is no handy Blogger-designed user interface. We'll have to delve into the code ourselves.

Strap on your mining hat and let's go.

Stylin' your blog-post-order hack (part 1)

You've jumped through all the hoops to get your blog content listed in order, oldest first, on your blog: feed, pipes, javascript, and back on a static page on your blog.

Congratulations!

The next part of the hack uses cascading style sheets to format how your feed looks.

Are you satisfied with your formatting? If so, skip this step and go here. (If you're not sure, maybe this will help you think about whether to tweak the formatting.)

Otherwise, prepare yourself for a peek under your blog's hood.

The script puts the feed in your blog

This is the script
that displays the feed
that comes out of the pipe
that mashes the feed
that you publish of your blog
to install the blog-journey hack.

Specifically, the code you got from feed2js (or similar service) will show your feed on a web page, on any browser that supports javascript.

I recommend that you put your feed on a static blog page, not in a blog post where it could cause some problems. The feed is potentially big and will slow down your blog (and eat up your page-size quota) if you put it in a post.

Similarly I think your sidebar or footer is a poor choice, except perhaps for a feed that is just the title of the post, or title and date.

More about static pages here.

Create a static page at Posting > Edit Pages. Using the Edit HTML option (not Compose), add any introductory explanation, paste the script, and publish.

We're not done (unless you are happy with how it looks), but congratulations--it's your blog, in order from the first post top the last!

From here you can either work on formatting or fixing little anomalies and typos created by the pipe. I recommend tackling formatting first.

The script puts the feed in your blog

This is the script
that displays the feed
that comes out of the pipe
that mashes the feed
that you publish of your blog
to install the blog-journey hack.

Specifically, the code you got from feed2js (or similar service) will show your feed on a web page, on any browser that supports javascript.

I recommend that you put your feed on a static blog page, not in a blog post where it could cause some problems. The feed is potentially big and will slow down your blog (and eat up your page-size quota) if you put it in a post.

From feed to script

Blogger is stubborn about blog-post order. Last things first, on the theory that blog readers are not interested in what you said yesterday.

Fortunately, Blogger has been flexible about allowing bloggers to post their own scripts in the javascript language in their blogs.

What this means is that you can show your blog content as a journey, in first-first chronological order, if you are willing to jump through a few hoops: publish as a feed, squirt the feed through Pipes, and convert the feed of that to a script.

feed2js.org is one of several web-based services that convert feeds to scripts that you can just paste onto a blog or other web page. The script will then display the feed. (Formatting is another matter.)

You will be using feed2js's "build" page. Take the feed url from the result of your pipe (with an "http:" at the beginning) and paste it into the "feed url" box on that page.

Then review the options for the feed.

These are largely personal choice, but here are some notes from my experience.

Show channel--I set this to "no" and provide my own title and introductory text on my blog page.

Number of items to display--In my experience, the "0" option does not always display all of the posts. I use "999" instead.

Show/Hide item descriptions? How much?--If you specify "0," your script will generate only a list of blog-post titles. That could be exactly what you want.

The other options--to show the first n letters of the post--won't work with my hack. You can limit what is shown using the first 250-odd characters through your feed settings back at Blogger, which you can change at any time.

Show item author?--set this to "no" if you are using the Full or Jump-Break feed.

Use HTML in item display?--If you are using my hack, this has to be set to "yes," unless you only want to show the titles of your blog posts--in which case you want "no."

The rest of the options are up to you. I check "UTF-8 Character Encoding" on principle, but haven't noticed any advantage in practice.

Note there is a "preview" button that gives you a rough idea of what you've done. When you are satisfied with that, click "generate javascript" and copy the resulting code--all of it--back to your blog on a static page (not a blog post).

If you are only making a simple list of your blog-post titles, the javascript version can make a nifty sidebar widget.

If your feed won't validate, the #1 reason is that your feed url begins with "feed://" and not "http://." If that's your problem, just make the change yourself.

Then take your script here.

From feed to script

Blogger is stubborn about blog-post order. Last things first, on the theory that blog readers are not interested in what you said yesterday.

Fortunately, Blogger has been flexible about allowing bloggers to post their own scripts in the javascript language in their blogs.

What this means is that you can show your blog content as a journey, in first-first chronological order, if you are willing to jump through a few hoops: publish as a feed, squirt the feed through Pipes, and convert the feed of that to a script.

feed2js.org is one of several web-based services that convert feeds to scripts that you can just paste onto a blog or other web page. The script will then display the feed. (Formatting is another matter.)

You will be using feed2js's "build" page. Take the feed url from the result of your pipe (with an "http:" at the beginning) and paste it into the "feed url" box on that page.

Then review the options for the feed.

Segmenting your blog-journey by date

Especially if you have many posts in your feed, you might want to break your blog journey into chunks by date.

You could, for instance, have each year of posts on a separate page, or break up the flow by month or year. "May" followed by "June," etc.

You may also discover--as I did, when I switched from the Short feed to the longer Jump-Break feed--that your blog-journey is cut short.

Apparently, there is a limit to the size of feeds that feed2js.org will run. So chopping your feed into time periods lets you get around that problem, if you want your blog journey to be complete.

There's a bit more about that issue in this post, which I will revise as I learn more.

In the mean time, note that my Full-and-Jump-Break pipe now has start and end date fields.

If you just want one blog-journey script for your whole blog, you can pick a start date earlier than that of your blog's first post, and an end date in the far future.

However, if you want to segment your blog-journey into periods, use the date to specify the first period, then insert it into a static page. Repeat as needed for subsequent periods.

The pipe is forgiving about format for these dates. You can write "March 15 2009" or "2/15/2009" and it will understand you. Note however that the dates follow North American convention and go Month-Day-Year, not Day-Month-Year.

I have fully implemented this on the blog-journey page of my other blog, where I have more than 200 posts. It uses a Jump-Shift feed, is formatted, and is segmented by year.

You can put segments on separate pages or on the same static page. If you opt for multiple pages, consider putting "next" and "previous" links in the appropriate places, to help your readers get about.

Segmenting your blog-journey by date

Especially if you have many posts in your feed, you might want to break your blog journey into chunks by date.

You could, for instance, have each year of posts on a separate page, or break up the flow by month or year. "May" followed by "June," etc.

You may also discover--as I did, when I switched from the Short feed to the longer Jump-Break feed--that your blog-journey is cut short.

Apparently, there is a limit to the size of feeds that feed2js.org will run. So chopping your feed into time periods lets you get around that problem, if you want your blog journey to be complete.

There's a bit more about that issue in this post, which I will revise as I learn more.

In the mean time, note that my Full-and-Jump-Break pipe now has start and end date fields.

Feeding your content through the pipe

Assuming you want to implement my blog-journey hack badly enough to have set up a feed and read an introduction to Yahoo Pipes: don't turn back now.

Here is the quick-and-dirty.
  1. Go to the pipe for my hack.
  2. If you've set your feed to Short, use Blog Journey (Short); if Full or Jump-Break, Blog Journey (Full or Jump Break).
  3. If you are using a Short feed, make a clone of the pipe--this will create your own editable copy of the pipe in your account. You will be prompted to log in to Yahoo or create a Yahoo account. (Sorry!)
      You don't need to do this for the other feed types or if all you are after is a list of your blog-post titles. (Short vs. Full vs. Jump Break here.)
  4. Put your feed url in the little box where indicated.
  5. Run the pipe to see what you've done.
  6. Click "Get as RSS" and pay no attention if you then see an incomprehensible babel of code. (Some browsers don't format the feed, but it doesn't matter.) That is not intended for human eyes.
  7. What you are after is the url (the web address in your browser bar) for that page. Copy it and port it over to a handy rss-to-JavaScript converter.
There is sometimes an additional step. Pipes sometimes generates RSS-feed urls that begin with "feed://" instead of "http://"

If this happens to you, correct the feed by deleting and replacing "feed://" with "http://" and paste that into the rss-to-JavaScript converter.

Update: The pipe for Full and Blog-Journey feeds now has an option for start and end dates to let you segment your blog journey by date. Read about that here.

Fall 2011 Update: Yahoo has tinkered with Pipes in a very unhelpful way. If you have, or expect to have, more than 100 posts in your blog, see this post for a description of the problem and workaround.

Feeding your content through the pipe

Assuming you want to implement my blog-journey hack badly enough to have set up a feed and read an introduction to Yahoo Pipes: don't turn back now.

Here is the quick-and-dirty.
  1. Go to the pipe for my hack.
  2. If you've set your feed to Short, use Blog Journey (Short); if Full or Jump-Break, Blog Journey (Full or Jump Break).
  3. If you are using a Short feed, make a clone of the pipe--this will create your own editable copy of the pipe in your account. You will be prompted to log in to Yahoo or create a Yahoo account. (Sorry!)
      You don't need to do this for the other feed types or if all you are after is a list of your blog-post titles. (Short vs. Full vs. Jump Break here.)
  4. Put your feed url in the little box where indicated.
  5. Run the pipe to see what you've done.
  6. Click "Get as RSS" and pay no attention if you then see an incomprehensible babel of code. (Some browsers don't format the feed, but it doesn't matter.) That is not intended for human eyes.
  7. What you are after is the url (the web address in your browser bar) for that page. Copy it and port it over to a handy rss-to-JavaScript converter.
There is sometimes an additional step. Pipes sometimes generates RSS-feed urls that begin with "feed://" instead of "http://"

If this happens to you, correct the feed by deleting and replacing "feed://" with "http://" and paste that into the rss-to-JavaScript converter.

Update: The pipe for Full and Blog-Journey feeds now has an option for start and end dates to let you segment your blog journey by date. Read about that here.

Fall 2011 Update: Yahoo has tinkered with Pipes in a very unhelpful way. If you have, or expect to have, more than 100 posts in your blog, see this post for a description of the problem and workaround.

Slicing and Dicing with Yahoo Pipes

Perhaps the strangest part of my blog-journey hack entails sending your blog feed through Yahoo Pipes.

Pipes is a free web-based service for mixing and manipulating feeds. Working on the (imperfect) metaphor of your feed as a flow of content, users construct a "pipe" that channels and changes the elements of that flow--for instance, sorting them chronologically.

That's what we are here for, but the pipe I built does more than that. You do not need to build your own--use mine.

Unfortunately, if you use the Short feed you will probably need to use or set up a Yahoo account so that you can make an editable copy of my pipe. I will tell you how to tweak your copy.

Before you do that, you should check out Yahoo's introduction to Pipes.

If you have the soul of a hacker, Pipes will dazzle and inspire you with possibilities. If you don't, I'll at least try to make my explanation (next) as painless as possible.

Slicing and Dicing with Yahoo Pipes

Perhaps the strangest part of my blog-journey hack entails sending your blog feed through Yahoo Pipes.

Pipes is a free web-based service for mixing and manipulating feeds. Working on the (imperfect) metaphor of your feed as a flow of content, users construct a "pipe" that channels and changes the elements of that flow--for instance, sorting them chronologically.

That's what we are here for, but the pipe I built does more than that. You do not need to build your own--use mine.

Unfortunately, if you use the Short feed you will probably need to use or set up a Yahoo account so that you can make an editable copy of my pipe. I will tell you how to tweak your copy.

Before you do that, you should check out Yahoo's introduction to Pipes.

If you have the soul of a hacker, Pipes will dazzle and inspire you with possibilities. If you don't, I'll at least try to make my explanation (next) as painless as possible.

Feed types: Short versus Full versus Jump-Break (versus just titles)

A feed broadcasts your blog posts to subscribers, either the entire blog post (if you set up Full feed) or the first 250 characters or so (if you set up Short feed).

My blog-journey hack is based on using a feed of your blog, so if you want to show your content in chronological order, you have to chose one of those two options.

Full Feed
Pro: Retains hyperlinks and character formatting. Easiest to set up and maintain as blog-journey page.

Con: Sends all of each post to your subscribers.
Short Feed
Pro: Makes short “teaser” lead-ins to your actual posts. Less scrolling on your blog-journey page.

Con: Blog-journey page more work to set up & maintain. Some formatting is lost.
Jump-Break Feed
Pro: User sets cut-off point for each post. Preserves all formatting and blog-journey is as easy as for the Full feed.

Con: Compared to Short feed, can make a longer and bigger Blog Journey page; break (if any) must be set for each post.

Set your choice on Blogger, at Settings > Site Feed > Allow Blog Feeds.

I do not prefer the Full feed, on the theory that people who subscribe to my feed don't want the whole thing pushed at them.

However, the Full and Jump Break feeds do a better job, in terms of this hack, than the Short option--and with less work for you.

Feed types: Short versus Full versus Jump-Break (versus just titles)

A feed broadcasts your blog posts to subscribers, either the entire blog post (if you set up Full feed) or the first 250 characters or so (if you set up Short feed).

My blog-journey hack is based on using a feed of your blog, so if you want to show your content in chronological order, you have to chose one of those two options.

Full Feed
Pro: Retains hyperlinks and character formatting. Easiest to set up and maintain as blog-journey page.

Con: Sends all of each post to your subscribers.
Short Feed
Pro: Makes short “teaser” lead-ins to your actual posts. Less scrolling on your blog-journey page.

Con: Blog-journey page more work to set up & maintain. Some formatting is lost.
Jump-Break Feed
Pro: User sets cut-off point for each post. Preserves all formatting and blog-journey is as easy as for the Full feed.

Con: Compared to Short feed, can make a longer and bigger Blog Journey page; break (if any) must be set for each post.

Set your choice on Blogger, at Settings > Site Feed > Allow Blog Feeds.

Getting your feed

My blog-journey hack is based on manipulating and formatting a blog feed.

There's a lot you could know about feeds, and I'm no expert. Here's a primer and some resources sufficient for hack purposes.

A feed takes your blog content and squirts it over the internet to feed subscribers.

The subscribers may view the feed in many different ways that should not concern you. As a blogger, you only need to decide (1) whether to allow feeds of your blog at all and (2) if so, how much of your content to include in the feed.

The settings for your blog feed are at Settings > Site Feed and you can chose from "None," "Short," "Until Jump Break," and "Full." Short will truncate each post in your feed at about the 250th character, which is useful if you write good lede paragraphs. "Until Jump Break" lets you decide where to truncate each feed posts.

If your goal is to reproduce every word of every post in your blog in chronological order, you need to pick "Full." You can change this setting at any time.

There are other advantages and disadvantages to each. More about this choice here.

Blogger has this handy help page about feeds.

Once you've enabled your feed you can view it at its own url as follows. (Substitute your blog name from your blog url for "YOURBLOGNAMEHERE.")

http://YOURBLOGNAMEHERE.blogspot.com/feeds/posts/default?max-results=999

This is the url that you will send through Yahoo Pipes.

Update: If you burn your feed at Feedburner (or elsewhere), read this.

Getting your feed

My blog-journey hack is based on manipulating and formatting a blog feed.

There's a lot you could know about feeds, and I'm no expert. Here's a primer and some resources sufficient for hack purposes.

A feed takes your blog content and squirts it over the internet to feed subscribers.

The subscribers may view the feed in many different ways that should not concern you. As a blogger, you only need to decide (1) whether to allow feeds of your blog at all and (2) if so, how much of your content to include in the feed.

The settings for your blog feed are at Settings > Site Feed and you can chose from "None," "Short," "Until Jump Break," and "Full." Short will truncate each post in your feed at about the 250th character, which is useful if you write good lede paragraphs. "Until Jump Break" lets you decide where to truncate each feed posts.

If your goal is to reproduce every word of every post in your blog in chronological order, you need to pick "Full." You can change this setting at any time.

There are other advantages and disadvantages to each. More about this choice here.

Blogger has this handy help page about feeds.

Once you've enabled your feed you can view it at its own url as follows. (Substitute your blog name from your blog url for "YOURBLOGNAMEHERE.")

http://YOURBLOGNAMEHERE.blogspot.com/feeds/posts/default?max-results=999

This is the url that you will send through Yahoo Pipes.

Update: If you burn your feed at Feedburner (or elsewhere), read this.

Wednesday, May 19, 2010

First things first: putting your blog in order

A new method for showing blog content in chronological order.

Blogging is classically about the Latest Thing, featuring the most recent post first. Scroll down to read everything backwards.

For bloggers, however, blogging is also a journey, and some would like to be able to show their content that way, in chronological order.

The standard method for doing this is to edit the post date, which controls the order that posts appear, giving all posts fictitious dates to achieve the desired order. This does the job but might be unsatisfying for a number of reasons.

I've worked up an alternative method that might appeal to some bloggers.

Update: There are now a number of ways to do this and mine is not necessarily the best. Read this post for a comparison of leading blog-journey hacks

In a nutshell my workaround entails the following steps:
  1. publishing your blog as a feed;
  2. using Yahoo Pipes to re-order the feed and introduce some formatting elements, then publishing that as a second feed;
  3. using a service like feed2js.org to convert the feed to javascript
  4. Pasting the javascript code on a static blog page (that part is easy)
  5. Adding some custom CSS to your blog's template to format the elements of the feed as they are rendered on the static page.
This solution entails multiple steps and may include some unfamiliar methods, but if you are game I have done most of the work for you and will guide you every step of the way. No knowledge of javascript is required; it's all done for you.

For an example of what is possible using this method, see (a) the "journey" page of this blog (unformatted) or (b) of my "real" blog (formatted).

You might also prefer just a list of your blog posts in order, which is simpler still.

Further explanation in subsequent posts.

Update: As of 2012, there is another method for flipping blog-post order that is very promising. Interested bloggers should check it out.

I am just a blogger, not some uber-hacker, and would like to thank the Yahoo Pipes help forum and also Vin, a technically astute blogger who generously gives advice on Blogger's help forum from time to time. Vin first told me about Yahoo Pipes (for a much simpler application) a few years ago.

Final note: This was a lot of work, and I hope Blogger will continue to allow bloggers to post javascript code into our blogs.

On the other hand, I am sure that Blogger could implement a blog-journey option that would knock the socks off this hack in terms of flexibility and ease of use, and I would not resent it at all if they did so.

Next: Getting your feed

First things first: putting your blog in order

A new method for showing blog content in chronological order.

Blogging is classically about the Latest Thing, featuring the most recent post first. Scroll down to read everything backwards.

For bloggers, however, blogging is also a journey, and some would like to be able to show their content that way, in chronological order.

The standard method for doing this is to edit the post date, which controls the order that posts appear, giving all posts fictitious dates to achieve the desired order. This does the job but might be unsatisfying for a number of reasons.

I've worked up an alternative method that might appeal to some bloggers.

Update: There are now a number of ways to do this and mine is not necessarily the best. Read this post for a comparison of leading blog-journey hacks

In a nutshell my workaround entails the following steps:
  1. publishing your blog as a feed;
  2. using Yahoo Pipes to re-order the feed and introduce some formatting elements, then publishing that as a second feed;
  3. using a service like feed2js.org to convert the feed to javascript
  4. Pasting the javascript code on a static blog page (that part is easy)
  5. Adding some custom CSS to your blog's template to format the elements of the feed as they are rendered on the static page.
This solution entails multiple steps and may include some unfamiliar methods, but if you are game I have done most of the work for you and will guide you every step of the way. No knowledge of javascript is required; it's all done for you.

For an example of what is possible using this method, see (a) the "journey" page of this blog (unformatted) or (b) of my "real" blog (formatted).

You might also prefer just a list of your blog posts in order, which is simpler still.

Further explanation in subsequent posts.

Update: As of 2012, there is another method for flipping blog-post order that is very promising. Interested bloggers should check it out.

I am just a blogger, not some uber-hacker, and would like to thank the Yahoo Pipes help forum and also Vin, a technically astute blogger who generously gives advice on Blogger's help forum from time to time. Vin first told me about Yahoo Pipes (for a much simpler application) a few years ago.

Final note: This was a lot of work, and I hope Blogger will continue to allow bloggers to post javascript code into our blogs.

On the other hand, I am sure that Blogger could implement a blog-journey option that would knock the socks off this hack in terms of flexibility and ease of use, and I would not resent it at all if they did so.

Next: Getting your feed