ecmanaut

2005-12-05

Styling your blog post tags list with CSS

Freshblog just posted an excellent step by step tutorial on how to categorize your Blogger blog posts using my Greasemonkey post tagger tool. This post adds a bit on how you can use CSS to add some stylish looks to the tags you end up with listed at the bottom of your blog posts.

Assuming you use this tool, or one of its ancestors and relatives, or doing it manually yourself, posts in your blog with one or more tags will get this bit of HTML appended to the post (provided it has been tagged with "Blogger" and "CSS", the Del.icio.us account used is Ohayou, and the anchor tag used is "ecmanaut" -- yours will differ):

<div class="tags">Categories:<ul><li><a href="http://del.icio.us/ohayou/ecmanaut+Blogger" rel="tag">Blogger</a></li> <li><a href="http://del.icio.us/ohayou/ecmanaut+CSS" rel="tag">CSS</a></li></ul></div>

A bit terse, yes, but there is good reasoning behind it. First, people won't read the HTML of your post, so the lack of newlines and additional whitespace will not bother anyone. Second, if it had had any newlines between tags, that would introduce extra <br> tags on blogs that use the Blogger convenience setting to substitute newlines for HTML line break tags, and that might complicate styling this list the way you want it to look. Without any special CSS treatment of yours, this might look a bit like this in your blog (if you use the same basic page template I do, anyway):

Categories:

Blogger
CSS

The first thing you might want to change about the above is the way it adds a line break between every tag instead of listing them all on one line. Find the place in your page template that reads <style type="text/css"> and add this bit of CSS right afterward:

div.tags ul { display:inline; padding:5px; }
div.tags li { display:inline; }

The first line makes the first tag line up with the "Categories:" text, the second makes consecutive tags line up right along with the previos tag. The explicit padding in the example might not be needed, depending on what other CSS is at play, but if you experience something looking like a tab between the label and first tag, you want it. Similarly, if there is way too much space between tags, you might need to adjust the li line in the same fashion.

But we might want to add some nice little icon label next to each tag, that differentiates them from all the other bullet lists on your blog. These are Del.icio.us tags, after all; how about showing the Del.icio.us tag icon instead? That could look like this (feel free to copy their image and put it somewhere else, if you don't want to feed them any data about your visitors, the amount of traffic your blog gets, and so on):

div.tags ul { display:inline; }
div.tags li { padding-left:14px; margin-left:8px; background: url('http://del.icio.us/static/img/delicious.small.gif') no-repeat 0 3px; display:inline; }

The padding and margin adds a few pixels to the left of each tag for the icon, and the background specification fills the space with the icon. The 3px figure at the end might need adjusting; it's how far down (in pixels) the icon should be in relation to the top of the list item and this will vary slightly with the size of the font you use. Three pixels works for my setup; yours might require more or less; try it out and see if you are happy with the results, and change accordingly otherwise.

You can of course add lots of other things too using CSS, and this is not trying to be a tutorial on all the possibilities on offer, but it's a head start, anyway. Good luck with your own styling!

Q: I have a blog based on the TicTac template, just like yours; how did you get your tags formatted like the text in the TicTac post footer?

A: I did it like this, altering the .post-footer sections to also apply to my div.tags tag list. If you don't want your tags capitalized, do not copy the text-transform:capitalize; bit.

.post-footer,div.tags {
  margin: 0;
  padding: 0 0 0 14px;
  font-size: 88%;
  color: #999;
  background:url(http://www.blogblog.com/tictac_blue/tictac_grey.gif) no-repeat 0 8px;
}
.post-body div.tags { margin:1em 0 0; }
div.tags ul { display:inline; margin-left:0; }
div.tags li { display:inline; margin-left:8px; text-transform:capitalize; }
.tags li {
  background:url('http://del.icio.us/static/img/delicious.small.gif') no-repeat 0 3px;
}

2005-12-02

Permalinks and their applications

Permalinks are the little stay-in-place URLs that make bookmarks viable. The keeper of a page signals his or her best promises that if you bookmark this link, that bookmark will keep pointing to this page, or in the case of a comment permalink, to that particular spot on this particular page, whatever other changes he or she makes to her page templates et cetera. Offering (and not only saying, but doing so) permalinks to content and microcontent provides longevity to your blog and adds value to it and its visitors alike. It's a seal of quality, and of showing that you care about your work and those who read and link to it enough not to suddenly dump it in the big bit bucket in the sky, breaking links all over the web and making future would-be visitors angry with you for having robbed them of whatever next part in a chain of on line hypertext they were tracking.

Hypertext is a volatile medium only in so far as content providers don't care about making it a lasting, permanent structure worthy of attaching to and building even more off of. Permalinks offer the joints of these structures we call the web.

Blogger templates, by default, offer permalinks to posts, unless you change titles or month on them, and to comments to those posts. Blogger even standardizes the format of link names and names of anchors (mid-page permalink targets), naming post comment sections "#comments", backlinks "#links" and individual comments "#c<huge comment timestamp number>". I say timestamp number, because it is the number of nanoseconds passed since the dawn of the Epoch (January 1, 1970), divided by ten. (So if you ever scoffed at not being able to tell down to the second just when a comment was posted, well, you didn't know better. :-)

I'm going out on a tangent here, but before I return to the topic, let's make a nifty little tool that helps you date a comment, to the (tenth) nanosecond, by pasting it's permalink here (it works for post id numbers too):

Let's go back to comments and standardized permalinks again. Standardization has some benefits to your reader base, making it worth adhering to them, at least if your blog is on Blogger. (And, similarly, if there is a de facto standard for what anchors to have in a page for which content sections on your different blog or publishing system, there are the very same reasons to adhere to that system rather than Blogger's.)

Tools.

Any sufficiently large, useful and loved system on the web will grow a following of useful tools to do good things for and with them, whether they are more or less made for the purpose, such as Del.icio.us, or not, as in the case of Blogger. But tools will develop, and they will target the broad main line doing what most blogs do, staying close or identical to the default setup. Again, this is not something to be ashamed of, but a useful choice. I'm going to devote most of the rest of this post to one example of a tool that thrives on Blogger's standard comment links.

Some people across the web have felt there is an embarrassing lack of infrastructure on offer for looking up what you said last week to whom about what, and most of all, where. You post a comment on some blog, forum or whatnot, and then you forget most of it, except perhaps that it was about somebody's clever money making scheme, quest for fame, or perhaps a game you like. It must have been back in September. Or maybe August. But Google just won't find it for you, as you can't seem to pick out your particular wording, or something unique in the context surrounding it, and your thoughts are forever lost.

See? That's a lack of infrastructure. Of course there should be something that keeps track of what you write when you write it, perhaps offering some means of tagging it for a later reminder. You could of course bookmark every single comment you wrote and keep an index over them in a database... ...but it quickly leaps into deep geek realms where only those in need of spending huge amounts of time to solving taxing computer science problems roam. And not many of those either; most spend their time on more productive things. (Or playing World of Warcraft.)

But add a tool to do the bookmarking for you, extract your comments when they are written and that just makes it a click or two to decide whether you want to keep this in your web feedback history or forever leave it adrift in web space, organize them into a huge database maintained by other benevolent people, and suddenly it becomes viable. And it is already done, too. It's called Comment Blogging and there is a Greasemonkey user script to pick up all your Blogger comments already. Provided the Blogger blogs you visit use the common Blogger anchor layout; otherwise your comments will hang in the air, missing their target on the page unless you learn the blog's URL layout and compensate manually for every comment you write there. Not very likely, no; it's already too much work for too little gain.

This was one first tool, using Del.icio.us to store the comment bodies, locations and tags mostly automatedly. Del.icio.us isn't particularly addressing this usage domain, though it provides some decent tools to do the work anyway, by being a rather generic and accessable thing in general. Singpolyma has just released another one, specifically targeting Comment Blogging and comment bloggers, with features such as marking not only where a comment was dropped, but what it was a comment to, which should eventually allow for some rather advanced comment tree threading facilities, assuming we would ever want to publish and navigate through the conversation jungles spreading across the web, unsatisfied with just being able to find things.

I know I want to.

It's perhaps not all unsurprisingly (Stephen reads this blog, and we have much common interest in this field and topic) rather similar to some blue sky ponderings about cross blog commentary a few weeks ago -- it lives on the Ning playground, and you only need to register a user name to get going yourself. Name to be decided, I presume, but you may soon hook up and import your Del.icio.us CommentBlogging comments, publish a feed and knit it into your post templates. (The importer still needs some love, at the time of writing.)

Anyway, among the few tags of Singpolyma's I peeked at, I found one attached to a non-permalink from my time rotated blog front page. Ouch. That's what I get for not adhering to standard linking behaviour, adding comment links to pages that don't usually have them (index and archive pages) without making sure that all comment links are permalinks pointing away into their respective posts. I just fixed that, and page title texts similarly linking into their own pages, so rather than just being a comfy way of recentering the viewport on the post or comment clicked, these will now link to a smaller page. Adapting to your visitors' use patterns is the price we have to pay for going out of the box a little; it will be interesting to see whether this makes all of my pages get an additional back link from their archive page, and recent ones another one from the index page. Comment permalinks had to be added by means of javascript due to Blogger technical limitations, so they won't show up, anyway.

It will be lots of fun adapting Greasemonkey scripts to put Singpolyma's work to comfy use in day to day blogging. You won't have to pull all that weight yourself, unless you really want to, Stephen. :-) And feel free to toss some of the ideas I'm assuming you must have into the idea blog, now that your baby is known to the world; I'll be sure to tag along. Literally. :-)

Categories:

2005-12-01

Open cooperative R&D on the web

Blogs are not always very efficient means of communication for development purposes; the kind of discussion of ideas and possibilities as outlined in my effort at summarizing the discussion so far on blog tag exchange and navigation, emerging technology in the forming stages, where we are experimenting and tossing wild ideas around. But we need tools and backend support to leverage the flow of thoughts, ideas and experiences we get, and I find it a very interesting challenge, trying to do this on the web. Open for anyone to join in, passively track as it happens, or browse through post factum, along the ever growing archive trail backwards through time.

Instant messaging clients, IRC, mail and news groups all have their take on how to do some, but not all of the above, and while the same applies to blogs, blog tech has always been a productive and adapting field ready to meet new challenges, and fairly quickly. It has also more or less always been about open communication and exposing historic archives, too. There are lots of other archaic, or just less known systems that address and occasionally solve much of or even all of these things, LysKOM being one local favourite pick (sprouted in Linköping, Sweden, where I live), but which typically has a user base in the hundreds, known perhaps only by a small tech savvy crowd tightly knit together by bonds of knowledge and culture. By implication, they are in practice much less accessable systems than the web, though technically merited and possibly often vastly superior to these in-crowds who are familiar with the system.

Trying to spread any one such system on technical merit alone, hoping to win the world, is not merely a time consuming and costly endeavour, it's more or less doomed to fail. It's the gradual refinement and improvement on already familiar environments like the web that win in the long run, growing bigger and better through the efforts of the huge masses working their magic on what they can do, and how. So I'm not going to praise the great things which LysKOM, or any other great communications device, does, but try to adopt the ideas that are good, and see how to make the web do the same, or even better tricks.

I posted an article on cross blog commentary a while ago, before diging into the joint research and development work on blog tagging technologies, and with my perspective on the subject matter of today, it is still the core problem to address -- tightening conversations, and being able to track them up and down after the fact. Add to that the requirements on being able to track them as they happen, listening in to a feed that notifies all interested parties on the next post in the chain of events, and we will have come a very long way.

Add some means of addressing one topic, by permalink, as present day terminology would closest approximate it, and we can easily add a layer of cooperative community categorization, by tagging, pointing in and out of the topic from and to related fields, further strengthening and adding value to the communications architecture and landscape. Prior to growing aparrent permalinks on subject level, the dilution that stems from the community tagging individual fragments of a discussion body adds less to the topic visibility. Whether this makes much of a difference to the quality of the system can probably only be measured after having come up with and deployed a solution; perhaps the individual post and the search mechanisms built in to the web will remain the best tools for providing topic visibility and topic neighbourhood linkage.

I'm pondering the merits of setting up on-the-fly joint blogs around topics already formed. Blogger, among others, makes that operation fairly cheap, and provides decent tools at low time to market (if the concept is stretched mildly), allowing multiple authors write access to a common forum which provides leverage to connections with the body of the surrounding web, though not yet adds much on its own to threading, or tracking incoming new authors' small contributions by post comments. I'd like to experiment a little with setting up a joint dev talk blog, to see where that brings us and what support devices naturally grow around that application. It might prove rather good, and it might not. But let's try it out, and see where it brings us.