Category: Technical

Technical issues around social media. For the geekier-minded.

Nasty Problem With Basic Bilingual Plugin [en]

[fr] Un problème avec le plugin Basic Bilingual qui fait disparaître les extraits dans "l'autre langue". Je bosse sur une solution (voir commentaires).

Heck. I just spent the last 15 minutes digging through the Google cache to retrieve “other language excerpts” which had been wiped from a good dozen of my recent posts. Not all of them, mind you — almost all of them. I haven’t yet managed to reproduce the problem, but clearly, the meta fields get reset in some circumstances.

I suspect it might be something that has to do with editing posts. Maybe related to the old disappearing tags problem?

In any case, I’m afraid Basic Bilingual must be misbehaving. Be particularly cautious when editing posts. Let me know if you have the same problem or a path to a fix — I’m working on it now.

Update: if somebody has the French excerpt to my post Advisors, Boards, Companies, Partners, Oh My! in their newsreader or browser cache, could you please send it to me or copy-paste it here as a comment? Thanks a lot.

Update, 17:30: I think I solved the problem (see comments) and corrected the files available on my server, bumping up the version to 0.31. Please download the latest version if you’re using this plugin.

WordPress Sandbox Theme Problems [en]

[fr] Deux problèmes avec Sandbox: les menus déroulants qui se déroulent décalés sur la droite dans IE, et l'absence de feuille de style pour l'impression. Toute aide bienvenue.

As you might have seen, Sandbox is now my theme of choice for WordPress. Diurnal, here on CTTS, is built upon Sandbox, and I’m using it with a client to build a new design from scratch. It’s a nice base to work from, in a CSS Zen Garden way.

However, there are problems. Here are two I’m stuck with on my client site. I posted them to the Sandbox forums, but I thought I’d mention them here in case one of you smart readers had an answer.

  1. No print stylesheet?: does anybody have a print stylesheet handy for use with Sandbox? If I can avoid writing one from scratch…
  2. Broken drop-down menus in IE: I’m far from a drop-down menu specialist, so I’m not sure where to start to fix the IE wonkiness I’ve noticed. The menus in IE do not drop right below the parent menu as shown here, but overlap on the neighbouring menu item on the right.

Thanks for any help or pointers you can bring me.

Ridding WordPress Plugins of Template Tags [en]

[fr] Cet article décrit une méthode permettant de se défaire des "template tags" qu'utilisent certains plugins. Plutôt que de copier le fameux template tag à 3 endroits différents dans son thème (comme c'était le cas auparavant pour Basic Bilingual), il est possible de modifier à peu de frais un plugin pour qu'il injecte automatiquement son contenu dans le blog.

If you’re like me and use a bunch of plugins to liven up your WordPress blog, you’ve probably noticed that adding template tags in your favourite (or favourite-of-the-week) theme files can quickly become a royal pain in the neck.

One of the things I wanted to do with Basic Bilingual, and which I did with the last release, was make the plugin inject the text for the “other excerpt” (the French text you can see at the top of this post) automatically into the templates and feeds.

Once I’d figured out how to do that, I realised I could modify other plugins, too. And I’m going to tell you how you can do it, too. This method should work for any plugin which generates a template tag, as long as you want the content generated by the plugin to go immediately after or before the post content. (I’m still working on advanced rules for cases where you want to make modifications elsewhere in the template.)

Christine‘s Inline Tag Thing put me on the track (thanks!), as it does just that. Here’s the trick:

  1. create a function which concatenates (= “adds”) the plugin output to the content
  2. add an action hook to the plugin to apply that function to “the_content”.

Fear not, I’ll explain all. You don’t need to really know much PHP to do this, as long as you’re comfortable wading through a bit of code and copy-pasting stuff and making a few small modifications.

Let’s take an example: the Similar Posts plugin, which I’m now using to point out posts related to the current one (normally, in a box at the top of the post if you’re on the website, and as a list at the end of the post if you’re reading the feed).

Similar Posts provides a template tag, <?php similar_posts(); ?>, which you can paste in your template where you like the related posts to appear. Personally, I want them to appear on the main blog page, on the individual archive pages, and on the monthly, category, and taggy archive pages. This means I need to paste the tag into at least 3-4 different template files. And if I decide that I want the tag at the top of the post rather than the bottom, or I decide to remove it, there I go again. Not optimal.

So, here’s how I made it “better” (for me):

A. First, I looked at the plugin code to figure out where the template tag function was; in this case, quite easy, it’s the function called similar_posts(), logically. Here are the last two lines of this function, which do the actual data output:

print $result;
if (defined('POC_CACHE')) print $cache_time;

I changed them to:

return $result;
if (defined('POC_CACHE')) return $cache_time;

So that they didn’t print directly (ie, output text), but just return the value of the data we want to insert.

Then, I created the following function:

function sp_embed_similar_posts($content) {
    $content = similar_posts() . $content;
    return $content;
}

This function takes one parameter ($content), and sticks the output of similar_posts() in front of it. Now you see why we needed to change the other function so that it didn’t print. We’re just modifying the value of the $content string. This new function returns the modified value for the content (in our case, imagine it as being the content of your post with the code for the similar posts listing stuck in front.

Now all that is left to do is to tell WordPress to actually use that function at some point (plugins are usually a collection of functions, followed by a series of “hooks” which actually execute the functions at certain chosen moments). Here’s the action we’ll use:

add_action('the_content', 'sp_embed_similar_posts');

Try it!

This will also add the list of similar posts to the feed.

So, in summary, here is what we have done:

  • modified the template tag function so that it returns a value instead of printing it (in some plugins, you’ll find a function that already does that!)
  • created a function to stick that value on the beginning or end of a parameter, $content
  • add an action hook on the_content to execute the function.

Happy hacking!

Basic Bilingual 0.3 for Multilingual Blogging [en]

[fr] Une mise à jour de mon plugin "Basic Bilingual" qui permet de rendre WordPress bilingue. Modification majeure: il n'y a plus besoin de bidouiller son template pour faire apparaître l'extrait du billet dans "l'autre langue". Par contre, c'est toujours nécessaire pour rajouter les attributs lang.

Long overdue, an upgrade of my plugin Basic Bilingual. Grab the tgz archive or check out the code.

Some explanations. First, you all know of my long-standing interest in all things multilingual and in multilingual blogging in particular.

Years ago, I switched to Movable Type and then to WordPress because I was blogging in two languages. Movable Type allowed me to assign more than one category to each post — so I used two huge categories, fr and en, to indicate what language I was blogging in. This soon made the rebuilds a real pain in the neck, and WordPress allowed me first of all to happily hack it into being multilingual, and then actually write a plugin to do it in a cleaner way. The plugin hasn’t changed much since, and this upgrade isn’t a major one, but it’s a step in the right direction.

Ideally, I’d like people to be able to use the plugin without having to modify their templates at all. I’d also like the plugin to allow filtering out one language if that is what the reader desires. I still hope that WordPress will one day “see the light” and let us define language at post-level (Matt saw the light for tagging ;-), so I do have hope). By the way, I stumbled upon this Ajax Language Switcher for Basic Bilingual earlier today, and it will probably greatly interest those courageous ones of you who tend to have translations of each post or page.

Back to the plugin. It installs normally (unzip everything in the /plugins directory). If you’re using other languages than French and English, you’ll have to manually change the language codes in the plugin file (not very difficult, you don’t have to know PHP to do it; just look for “en” and “fr” and put the language codes for your languages instead).

I’ve fixed an annoying problem with slashes that popped up at some point (somebody else gave me the fix, but I can’t remember who — let me know!).

But most of all, I’ve made the “other language excerpt” appear automatically in the post content. Yes, you hear me: no need to add <php bb_the_other_excerpt(); ?> in your templates anymore. Yay! Added bonus: it will show up in the feeds, too — for that reason, I’ve added a text separator between the excerpt and the post so that there is a separation between the languages.

Basic Bilingual in Google Reader

Obviously, you’ll want to hide these separators and style your posts a little. Here is roughly what I’m using right now:

.other-excerpt {
font-style: italic;
background: #fff;
padding-left: 1em;
padding-right: 1em;
border: 1px solid #ccc;
}

.other-excerpt:lang(fr) p.oe-first-child:before {
content: "[fr] ";
font-weight: bold;
}

.other-excerpt:lang(en) p.oe-first-child:before {
content: "[en] ";
font-weight: bold;
}

.bb-post-separator {
display: none;
}

div.hentry:lang(fr) .entry-title:after {
    content: " [fr] ";
    vertical-align: middle;
    font-size: 80%;
    color: #bbb;
}

div.hentry:lang(en) .entry-title:after {
    content: " [en] ";
    vertical-align: middle;
    font-size: 80%;
    color: #bbb;
}

Now, notice there is fancy stuff in there which relies on the lang attribute. If you’re mixing languages on a page, you should use the lang attribute to indicate which language is where. This means (unfortunately, until I become buddies with PHP’s ob_start() function) that you need to touch your template. It’s not that hard, though.

Find the outermost <div> for each post in the template (it should have the CSS class hentry, by now). Add this inside the tag: lang="<?php bb_the_language(); ?>". Do so on every theme template which produces posts. With the Sandbox theme, it would look like this:

&lt;div id=&quot;post-" class="" lang=""&gt;

That’s it!

If you’re using this plugin, please leave a link to your blog. I’m also always interested in hearing of other examples of multilingual blogging or multilingualism online.

Jeremy Keith: The Beauty in Standards and Accessibility (Web2.0Expo, Berlin) [en]

Here are my notes of Jeremy Keith‘s session. He’s somebody I always appreciate listening to, and he also happens to be the creator (and provider) of Buzzword Bingo. Play with your neighbour when keynotes or sessions go down the buzzword path.

My notes are as correct as I can make them, but they may be missing bits and pieces and I might even have misunderstood stuff.

Web 2.0 Expo 6 - Jeremy Keith

First define. Who knows about beauty? The poets.

John Keats: Ode on a Grecian Urn. “Beauty is truth, truth beauty, that is all ye know on earth, and all ye need to know.”

William Blake: Auguries of Innocence. “To see a world in a grain of sand, and heaven in a wildflower, hold infinity in the palm of your hand, and eternity in an hour.”

Looking deep beneath the surface. Close-up sketch of a flea. Micrographia. Beautiful. Viewing source. This is how we see the beauty of things.

This whole web2.0 stuff is not about details. We’re not using microscopes, but telescopes, looking at the “big picture”. Telescopes can be good: think “Galileo”.

He brought upon the world an a priori change. A new way of looking at the world, though the world had not changed. The earth revolves around the sun, and not the opposite.

Darwin: the world didn’t change from one day to the next when The Origin of Species was published, but our view of the world did.

We want to think about structure. How is the house built? It’s when you understand the structure that you can build solid houses. Same with web pages. This is where web standards come in.

Separation. Before: all mixed up (html, css, js). Now: separate. (cf. http://nataliejost.com) Progressive enhancement. An a priori change to how you design websites.

a) begin with your content
b) structure it (HTML)
c) think about how it’s going to look (CSS)
d) think about the behaviour (DOM Scripting)

Web 2.0 Expo 5

If you remove any of these layers, it will still work. It won’t look pretty, it won’t behave as well, but it will still “work”.

CSS

  # in a separate document!
 p { }
 #foo { }

Then, add rules using selectors. From general to specific.

DOM

Very similar approach. Make it external. You don’t put it in the document. The vocabulary is different, but you also reference elements in the page pretty easily

 document.getElementsByTagName("p")
 documnet.getElementById("foo")

School of thought called “unobtrusive scripting”, “unobtrusive javascript”

Beware

First structure, then presentation. If you catch yourself doing this…

 <a href="..."> # wrong!

If you put behaviour in here, you’ve wasted a hyperlink.

Slightly better… but still bad

 <a href="#"> # JS equivalent of using the style attribute

steph-note: I’m learning stuff about JS! yay!

Bandwidth benefits in doing things the right way. Process benefits, you can separate the work. And also… the beauty of it. Flexibility. See how it reacts in situations you haven’t accounted for? It won’t fall apart if somebody accesses with no CSS, no JS, no images…

So, is this about making site accessible? Kind of. Note: go to the talk on accessibility Thursday morning.

Jeremy is talking more about universality. You’re not shutting out devices. Mobile. Search bots. Screen readers.

W.B. Yeats (April 1916) “All is changed, changed utterly: A terrible beauty is born.”

Ajax

Wonderful, beautiful, but can be terrible depending on how it’s used. steph-note: reminds me of what we said of JS in 99-00

The key to Ajax is about asynchronous communication with the server. XmlHttpRequest.

Jeremy’s definition: “A way of communicating with the server without refreshing the whole page.” Just part of the page.

Buzzword Hijax.

Here is how Jeremy thinks we should build an ajax application.

a) build a website in the old-fashioned way — buttons, links, for interaction with the server
b) then, come along with ajax — which parts of this page benefit from just being refreshed separately, and intercept the links/events. Hijack the requests. Bypass the whole page interaction.

Progressive enhancement rather than a terrible beauty that locks people out. Switch off JS, and everything still works.

Where? When?

Patterns: when I click a link/form, and when I submit it, I return to the same page with almost nothing changed.

  • registration forms (specially for user name availability)
  • comments on a blog/forum
  • add to cart
  • steph-note: sign in links

“Web 2.0” is not about web applications versus documents in the old “Web 2.0”. It’s a sliding scale. Most sites are somewhere in between documents and application. Applications work with documents! It’s not an either… or thing.

This kind of Ajax is more on the document side of the scale, roughly mid-way to the application end. Doesn’t scale to “more application”.

But at that point, why the hell are you building that with HTML, CSS and JS? The reason to use them is that they degrade gracefully. If you decide that all three are required, maybe you need to use another technology, like Flash. These technologies have their place for applications which cannot degrade gracefully. Flash is made for building web applications! But there is an insistance in building “2.0 Apps” in HTML/CSS/JS.

Maybe hesitancy because Flash isn’t a standard in the same way as HTML/CSS/JS?

Standards: you know your stuff will work, you know there’ll be support there. The best thing that Adobe could ever do in Jeremy’s opinion is to open it up truly (steph-note: if I understood that correctly).

History of standards.

ISO, ECMA, W3C…

Open data. API. RSS. XHTML.

If you’re going to release and API, look at what Google and Yahoo are doing and copy. Build upon existing conventions. Your own format is not going to make it.

If you allow people to access your data like that, you start to see emerging patterns.

Microformats! steph-note: yay!

Machine tags! steph-note: yay again! There is a machine tags wiki.

Jeremy, like many of us, really hates the “Web 2.0” label/buzzword. It had its place a few years ago, but now it’s really putting us in a box. Ajax is a good buzzword, because it allows to talk about a certain technology in a snappy way. Whereas Web2.0… ask ten people, and you’ll get 10 explanations.

Web2.0: people.

But we don’t need a buzzword for that. We already have a word for “leveraging collective intelligence”: the WEB!

Combine looking through the microscope and looking through the telescope.

Tag-Related Wishlist [en]

[fr] Mes idées/prédictions/désirs pour l'évolution des tags et des technologies associées.

I told you my mind never stops spinning, didn’t I? Here are a few follow-up thoughts on my previous post on tags. View this as my brain dump of what I’d like tags to do in WordPress and around.

Bear in mind that I haven’t tried 2.3 yet, don’t know exactly what it does and doesn’t do, and haven’t done much homework. So (hopefully!) some of the stuff I’m speaking about here already exists. If it’s the case, please leave a note with a pointer in the comments.

Some of the stuff here might also be stupid. If it is, please tell me.

I don’t think all this should necessarily be in the WordPress core. Plugin makers, feel free to delve in here for inspiration. If I like your plugin, I’ll plug it.

Links Between Tagspaces

So, based on what I’ve understood, WP2.3 will provide a local tagspace. This means that if I tag a post “cat”, the link on that tag will take me to something like myblog.com/tags/cat. That’s cool.

But I want more.

I want the myblog.com/tags/cat page to contain configurable pointers to other tagspaces. For example, my Flickr photos tagged “cat”. My del.icio.us links. My videos. The Technorati tagspace.

See what I mean?

Somewhere, WordPress would ask me “What other tagspaces would you like links to?” and I’d enter “http://flickr.com/photos/bunny/tags/”, “http://del.icio.us/steph/”, “http://www.viddler.com/explore/steph/tags/”, “http://technorati.com/tag/” in some pretty form (we know how to do those now, don’t we?)

Alternate Tagspaces

Some people may not want to use the local tagspace. Hell, most people who tag their posts right now point to the Technorati tagspace. An option to do so could be nice.

Tag Combinations

I’d like my local WordPress tagspace to allow tag combinations. This is the stuff I wrote about nearly 3 years ago. Del.icio.us does it: here are my links tagged “books” AND “read”.

We need more of this, particularly if we start thinking multilingual. I want to be able to point to a page containing posts I tagged “adolescents” OR “teenagers” OR “ados” or “teens”. I use all those, but I’m sure (given the nature of tagging) some posts have slipped through the cracks and have only one or two of these tags.

Less multilingual, maybe I just want to have “cats” or “cat” (sometimes I use plural, sometimes singular, and the distinction isn’t important to me in this context).

Related Tags

Del.icio.us does this. My local tagspace pages should have this feature too.

And how about an option to be able to see (in a click) posts tagged “cat” AND all the posts tagged with one of the related tags? (This could become a bit unwieldy though.)

Tag Management

The “obvious” stuff. Rename tag “stephaniebooth” to “Stephanie Booth” everywhere it is. (Flickr does this well.) Merge tags. Add a bunch of tags to all the selected posts (result of a search or by-category selection). Remove tag X from all posts which are tagged Y.

This is the kind of stuff I wanted to make possible for categories when I wrote Batch Categories, a lifetime ago. I haven’t touched this “hack” for years now, and I’ve heard conflicting information about its compatibility with recent WordPress versions. I think somebody somewhere updated it for WP2.x — if you search you might find it.

Public Tagging

Now, this would be a source of tag spam, unless it’s for example limited to registered users of the blog, or people identified by OpenID or on a “trust list” (e.g. people who have commented on the blog before). I’ve encouraged people to open up tagging to the community on Flickr, and the feedback from those who have done it has been great. I’d like a way to do this for my blog posts, too.

I’m sure structured portable social networks have a part to play here.

More Importing/Conversion

Ages ago, I added keywords to my blog posts. (I now know it’s not very useful — maybe even, not at all.) Around the same time, I used Topic Exchange Channels for some of my posts, making the ITE channel visible on the post by adding a link to it (gosh, come to think of it — I hadn’t heard of tags yet, but what I was doing was some form of proto-tagging… quite impressed with myself!)

Anyway, leaving the self-congratulatory stuff aside, my wp_postmeta table contains old information about posts which has long since disappeared from this blog, but which is still there, ready to be recycled. I could turn those old keywords and ITE channels into tags with an importer.

So, how about a very “customizable” importer? I would give the meta field name I want to convert to tags, and indicate if the tag data is comma-separated, space-separated, or simply placed in multiple fields.

(For my old keywords, there is one meta field called “keywords” which contains a comma-separated list of words, whereas for the ITE channels there is one entry per channel called “ite_topic” (IIRC) with a unique word as a value — but there can be more than one channel per post.)

So, “manual importer”, anybody?

That’s All, Folks!

There, I think I’ve told you what was on my mind. Feedback welcome. And plugins. Code. Solutions.

WordPress Finally Has Tags! [en]

[fr] Après des années d'errance, WordPress implémente enfin un système de tags qui ne sont pas des catégories. Un billet un peu plus complet en français s'impose probablement. Qu'en pensez-vous?

I’ve known for some time that version 2.3 of WordPress would support real tagging. Today, Matt has just announced the deployment of tagging on WordPress.com.

From the start, I’ve been a very vocal supporter of the differentiation between tags and categories — and I really appreciate Matt acknowledging this in his announcement.

When I first met Matt offline for the first time nearly a year ago, at Blogtalk Reloaded in Vienna, I jumped on the occasion to pester him about tags and categories. He listened — but I don’t think he was convinced at the time.

A few months later, I was in San Francisco — and one of the first things Matt told me when we met again was “you know, I finally saw the light about tags and categories”. He told me version 2.3 would have both. I was overjoyed. I’ll never know exactly what role I played in Matt’s “seeing the light”, but I like to think I contributed 🙂

Looking back in time, Technorati started indexing tags in January 2005. They weren’t new for me then (I’d been tagging things on del.icio.us since May 2004 and on Flickr since October of the same year) but clearly, being able to tag posts was a great thing. You know me — my brain can’t sit still — two days later, I was rambling about some ways to combine tags in searches/sorting. Some of the stuff I talk about in there isn’t possible yet, but I hope it will someday.

Two days after that, I wrote my first WordPress plugin, Bunny’s Technorati Tags — which became quite popular and which I still use to this day.

I’m really glad to be able to retire this plugin, specially as Peter Westwood has written an importer for it. That means you should have no problems converting your bunny-tags into wp-tags. Thank you very much, Peter.

Bear with me while I dig though my archives: weighted tags by category is something I’d forgotten I’d wanted… does anything like that exist now?

My only gripe with the implementation of tags in WordPress, for the moment, is that they will be comma-separated. No! Please! We’ve been typing space-separated tags into Flickr and del.icio.us for three years now. Three years! When I chose space-separation for the tags in my plugin, it was because the existing interfaces for tags did it like that.

Spaces, please. Or at least an option to input them space-separated. Or a simple plugin. Tags separated by spaces, and multi-word tags between quotes.