Sunday, May 20, 2012

Compose On Blogger

I want to use blogger as a knowledge-base, so whenever I think: "Ah! I remember...", I can look up the (usually technical) details on my blog. I have over the years produced a bunch of content in an bunch of formats and want to put it all in one searchable place. But I also want it for the long haul, so I want it in a format easily transferable to other systems and consumable in other contexts. Basically, I want the html content of an article to look good on its own, without the supporting styles, etc. So I've decided to write all my posts in raw html. One motivator for this is the correct use of the <p> tag, which interpreters don't have a hope in hell of achieving. Another is to limit the kinds of tags used to a bare minimum, and to keep the raw html itself readable (i.e. nice line breaks). The only thing your really lose from the blogger compose interface is spell check (which seems to fill your html with disgusting spans anyway). You also have to be careful with the < and & characters.

I spell check after the fact via a not-so-great Firefox Plugin.

I depend on the following CSS:

.googleMap iframe {
 width: 745px;
 height: 350px;
 border: 0;
}
.googleMap a {
 position: relative;
 top: -0.5em;
 font-size: 0.8em;
}

.centered
{
 display: block;
 margin: auto;
 text-align: center;
}
.floated
{
 clear: both;
 float: left;
 padding: 0.3em 0.5em 0.2em 0.5em;
} 
.sandbag {
 clear: both;
 height: 1px;
}
.poetry {
 white-space: pre;
}

#main .content pre {
 border: 1px dotted #808080;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 -ms-border-radius: 3px;
 -o-border-radius: 3px;
 border-radius: 3px;
 overflow: auto;
 padding: 1px 1px 2px 2px;
}
#main .content pre b {
 color: #006699
}

I use only the following tags:

<p><strong>Section Headings Should Be Strong</strong></p>
<p>
All content should be paragraphs.
But they can use <i>italics</i> or <b>bold</b> for emphasis, 
and can include new lines for manual lists:
<br/>- Parking is expensive
<br/>- Cars are loud
</p>
<p>
Use blockquote for any large quotations or reprints.
</p>
<blockquote>
<p>
The blockquote itself should be outside the paragraph.
</p>
<p>
But a blockquote can contain several paragraphs.
</p>
</blockquote>
<p>
For large lists, the real list tags are probably best:
</p>
<ul><li>Like blockquote these should be outside the paragraph.
</li><li>For compact lists single line notation is okay.
</li><li>Maybe line-break them like paragraphs if they're big.
</li><li>The raw html should be easily readable.
</li></ul>
<p>
For <code>smallTerms();</code>, use the code tag, 
but for any large blocks of code or when long lines or 
mono-space is important, use <pre> blocks.
</p>

With Syntax Highlighter I've been using the following brushes:
html, css, cpp, shell, xml, objc

<pre class="brush: XXX;">
Use ALL_CAPS_UNDERSCORE for emphasized terms. 
Escape all < &. 
Never embed real html.
</pre>
<pre>
Use <b>ALL_CAPS_UNDERSCORE</b> for emphasized terms. 
Escape all < &. This is useful for contents of config files, 
or showing mods via colored emphasis. Note: in all these blocks, 
the br tag isn't required for line breaks.
</pre>

<p>
Note that if you add the blogger widget to upload picasa photos they won't upload at 
full size. Just go to the picasa blogger album directly in another tab and upload the 
image then ask for its full url. See below for details. To display a centered image from 
a picasa album, discard all the embed html except for the href and the src so that you 
end up with:
</p>
<div class="centered"><a href="FROM_PICASA"><img 
src="FROM_PICASA_BUT_WITH_s650_IN_THE_URL" alt="FROM_YOU"/></a></div>

<p>
For a left-aligned image around which the text flows:
</p>
<div class="sandbag"></div>
<br/>
<a href="FROM_PICASA"><img class="floated" alt="FROM_YOU" src="FROM_PICASA"/></a>

<p>
For a left floated cover image of a picasa album, discard all the embed html except 
for the href and the src so that you end up with:
</p>
<a class="floated" href="FROM_PICASA"><img 
src="FROM_PICASA" alt="FROM_YOU"/></a>

<p>
An embedded google map:
</p>
<div class="googleMap"><iframe src="FROM_MAPS"></iframe>
<a href="FROM_MAPS">View Map Details</a></div>

<p>
An embedded vimeo video:
</p>
<iframe class="centered" src="FROM_VIMEO"></iframe>

<p>
For public posts cloned to blogger:
</p>
<p>
Copied from <a href="">holtstrom.com/michael</a>
</p>

Note that I restrict my use of syntax highlighter such that the content in the <pre> blocks is still usable without the highlighting, and without my own mods to a non-highlighted <pre>. Specifically, I never use any html inside the highlighted <pre> blocks (because syntax highlighter auto-escapes them), and although I do use <b> in non-highlighted <pre> blocks for coloured emphasis, I always use ALL_CAPS_UNDERSCORE for emphasized terms.

Images

I don't know if it's a recent change in blogger, or if it's a bug in the image uploader used from the html compose interface, but images uploaded to blogger are actually scaled to max-width 400px, so you can't display a larger image by modifying the s400 value in the url. I've worked around this as follows.

{ "loggedin": false, "owner": false, "avatar": "", "render": "nothing", "trackingID": "UA-36983794-1", "description": "Strategy for managing content in blogger. Edit directly in raw HTML. Use a subset of tags only. Use Picasa for images without the WYSIWYG compose widget.", "page": { "blogIds": [ 65 ] }, "domain": "holtstrom.com", "base": "\/michael", "url": "https:\/\/holtstrom.com\/michael\/", "frameworkFiles": "https:\/\/holtstrom.com\/michael\/_framework\/_files.4\/", "commonFiles": "https:\/\/holtstrom.com\/michael\/_common\/_files.3\/", "mediaFiles": "https:\/\/holtstrom.com\/michael\/media\/_files.3\/", "tmdbUrl": "http:\/\/www.themoviedb.org\/", "tmdbPoster": "http:\/\/image.tmdb.org\/t\/p\/w342" }