Tag Archives: code

Becoming a Professional Networker: Tags in Address Book OSX Needed!

Posted on 20.04.2008 by Stephanie Booth

[fr]

Besoin, de toute urgence: plugin Address Book.app permettant de taguer ses contacts.

[en]

For some time now, I’ve been aware that I’m becoming a professional networker. Almost all I do to promote Going Solo, for example, relies on my reputation and the connections I have to other people.

Now, I’ve never been somebody to collect contacts just for the sake of collecting contacts, but until LeWeb3 last year, I had just been content with butterflying around and stacking business cards somewhere near by desk. At LeWeb3, when I started telling people about Going Solo, I also started realising that the people I met and contacts I made were going to have more importance for my business than before.

And if I’ve learnt something during these last two months, it’s the importance of getting back to people. I’ve figured out how iGTD and GMail can play nice together to help me with that, but it’s not sufficient. I need to keep track of who I’ve asked what, of who can help me with what, who has this or that connection. And yes, I have too many people in my business network to keep everything in my head.

As I explain in the video above, the lovely Cathy Brooks put me on the right track: use Address Book.app. I don’t really need to keep all the contact details related to a person close at hand (ie, phone number, e-mail, etc.) because I have that in LinkedIn, Facebook, GMail address book, or on business cards. I’m not interested in keeping an exhaustive repository of all the contact details of all the people I’ve met. What I’m interested in, however, is keeping the names of these people somewhere I can attach meaningful information to them.

Where we met. What we talked about. Stuff that’ll help me remember who people are.

So, I started simply adding names (Firstname Lastname) into my OSX address book, along with a few words in the Notes field. The nice thing about the Notes field is that you don’t have to toggle edit mode on to add stuff in the Notes. So, of course, I started using the notes field to tag people. Not too bad (smart folders allow me to “pull out” people with a certain tag) but not great either, because tags get mixed up with notes, and it’s a bit clunky.

Somebody suggested I create a custom “Tags” field (a “Names” type field is fine). Unfortunately, though this looks like a good idea at first, it fails because you have to edit a contact each time you want to add tags. Also, you can’t create a smart folder based on the contents of that field — you need to search through the whole card. Clunky too.

I don’t know how to write Address Book plugins, but I know they exist, and I have an idea for a plugin that would save my life (and probably countless others) and which doesn’t seem very complex to build. If there’s anybody out there listening… here’s a chance to be a hero.

I want a “tag your contacts” plugin for Address Book.app. What would it do? Simple, add a “Tags” field that behaves similarly to the “Notes” field. That would allow me to separate notes and tags — they aren’t quite the same thing, don’t you agree?

In addition to that, the plugin could display a list of all contacts tagged “thisorthat” when you double-clicked the tag. That would be nice.

Does anybody else want this? Does it already exist? Would anybody be willing to build it? (If other people are interested, I’d be willing to suggest we pool some cash to donate to the kind person building this life-saving plugin.)

Ridding WordPress Plugins of Template Tags

Posted on 04.12.2007 by Stephanie Booth

[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.

[en]

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:

create a function which concatenates (= “adds”) the plugin output to the content
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

Posted on 30.11.2007 by Stephanie Booth

[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.

[en]

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.

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:

<div id="post-<?php the_ID() ?>" class="<?php sandbox_post_class() ?>" lang="<?php bb_the_language(); ?>">

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)

Posted on 06.11.2007 by Stephanie Booth

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.

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.

| View | Upload your own

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)

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

 <link rel="stylesheet"   /> # 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

 <script></script>
 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="javascript:..."> # wrong!

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

Slightly better… but still bad

 <a href="#" onclick="..."> # 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.

Excluding One Category From Blog Homepage (WordPress)

Posted on 26.02.2007 by Stephanie Booth

[fr]

Comment exclure une catégorie de la première page de votre blog WordPress tout en la gardant dans les archives.

[en]

The simplest method I’ve found up to now (and I’ve only just found it) if there are certain categories of posts you do not want to see appear on your main blog page, but that you still want to see in the archives, is to use query_posts().

Here’s an example:

<?php
if (is_home()) {
   query_posts($query_string . "&cat=-3");
}
?>

This needs to come in right before the while ( have_posts() ) { line. The $query_string parameter means that you can still pass parameters in the URL, so things like special Event Calendar pages will still work.

Careful, though, this only works for one category at a time. You need to use WP_Query for that, and build a separate loop for the homepage.

Remove Paging From WordPress Archives

Posted on 24.02.2007 by Stephanie Booth

[fr]

Pour supprimer les "pages" de vos archives WordPress, utilisez le code ci-dessous dans le fichier functions.php du thème que vous utilisez.

[en]

Thanks a lot to Matt for giving me the code which allows me to remove paging from the archives on this blog. I’ve been wanting to do that for a long time, but didn’t know where to start.

Just add the following code to the functions.php file of your theme.

function yay_nopaging($query) {
if ( !is_home() && !is_feed() && '' === $query->get('nopaging') )
    $query->set('nopaging', 1);
}

add_action('parse_query', 'yay_nopaging');

Unfortunately, this breaks the Recent Posts widget, which starts displaying… all the posts (that’s a lot of them, here). I removed the widget, but if you have a solution, I’d be happy to hear it.

Quelques balises HTML pour blogueurs

Posted on 17.08.2006 by Stephanie Booth

[en]

A few HTML tags for bloggers. Don't use the visual editor is my recommendation. It sometimes creates hairy problems.

[fr]

Je recommande en général de ne pas utiliser “l’éditeur visuel” lorsqu’on écrit des billets dans WordPress. L’éditeur visuel vous montre directement, dans le texte que vous écrivez, le gras en gras, les listes sous forme de liste avec des petits points devant, les liens en bleu souligné, etc. Malheureusement les éditeurs visuels sont imparfaits et génèrent souvent plus de problèmes qu’ils n’en résolvent.

Pour désactiver l’éditeur visuel, allez sous “Users/Utilisateurs” et puis sous “Your Profile/Votre Profil”. Tout en bas de cette page, il y a une case à cocher. Vérifiez qu’elle soit décochée, et mettez à jour les réglages.

Votre éditeur de billets est maintenant décoré d’une rangée de boutons un peu différente d’avant: sélectionnez du texte, cliquez sur le bouton approprié, et des caractères étranges apparaîtront de part et d’autre du texte que vous aviez sélectionné. C’est du HTML. HTML?! Pas de panique, c’est pas si compliqué. Voici ce que vous avez besoin de savoir:

le HTML, c’est en fait des petits “codes secrets” qui disent au navigateur de formatter d’une façon particulière le texte qu’ils entourent (par exemple: mettre en gras, faire une liste, faire un paragraphe, faire un lien).
ces codes secrets se nomment “balises”. Les balises vont toujours par deux: une qui ouvre, une qui ferme.

Exemple:

<em>du texte mis en italiques (emphasis)</em>

Ce qui est entre parenthèses angulaires < et > ne va pas s’afficher dans votre texte. Ce sont juste des indications que va interpréter le navigateur web. En l’occurence, il mettra le texte ci-dessus en italiques.

Voici quelques balises que vous rencontrerez en utilisant les boutons de WordPress:

<em> ... </em> met le texte qu’elles délimitent en italiques
<strong> ... </strong> en gras
<a href="http://quelquechose.com"> ... </a> crée un lien qui nous enverra sur http://quelquechose.com si on clique dessus
<ul> ... </ul>, <ol> ... </ol> et <li> ... </li> sont utilisés pour faire des listes (explications ultérieures).

Simple Technorati Tags Plugin for WordPress

Posted on 18.01.2005 by Stephanie Booth

[fr]

Un plugin simple pour WordPress qui vous permet de garnir vos billets de 'tags' (étiquettes) qui seront compris et interprétés par Technorati. Ce plugin ne modifie pas la base de données, et permet l'affichage de tags stockés dans un Custom Field nommé "tags", sous forme de liste de mots séparés par des espaces. Il est aussi possible d'afficher ainsi des mots-clés se trouvant dans un Custom Field nommé "keywords".

[en]

Update 31.01.07: The wp-plugins.org wiki isn’t allowing edits anymore. The plugin has been updated to version 0.6, compatible with WordPress 2.1, by Sudar. Get Bunny Tags.

Update 21.01.05: Please see Bunny’s Technorati Tags on the wp-plugins.org wiki for information about this plugin!

As wp-plugins.org isn’t letting me in yet, here is a little post to announce my first real live plugin for WordPress (one can’t exactly say that Batch Categories is a proper plugin).

Bunny’s Technorati Tags (zip, phps) provides you with a template function that you can use to easily display Technorati tags for your posts. The tags are stored in a Custom Field, so this plugin does not require any modifications of the database structure. The plugin has not been thoroughly tested on different versions, though it works fine on my recent 1.5 nightly. As it is really very basic, I don’t believe you’ll run into any major compatibility issues on other versions (do keep me informed, though).

Once you’ve installed and activated the plugin (manually or with the Plugin Manager, enter a space-separated list of tags in a Custom Field named “tags”, and place the following code in your template where you want the list of tags to appear:

<php the_bunny_tags(); ?>

If you’re like me and you’ve been painfully entering comma-separated keywords for your posts using a Custom Field of same name, ~~you can use the following line to use these existing keywords as tags~~:

~~<php the_bunny_keyword_tags(); ?>~~

Update 21.01.05: by setting $bunny_strict to false (see SETTINGS at the top of the plugin code) you will display keywords as tags for posts which do not have tags.

This might not be the greatest idea, as I believe tagging and choosing keywords is a different process, but it makes me happy for the moment, so I thought I’d share this possibility with you too.

~~Future development of the plugin includes adding a text input to the “Create New Post” form for easy tagging. (Coming as soon as I can figure out how to do it.)~~Done!

Plugin available on wp-plugins.net and wp-plugins.org.

Update 21:40 Who’dathunkit? Version 0.2 is out already, with a nice little “Tags” field in the post editing form. the_bunny_keyword_tags() has been revised to display keywords only when no tags are present. All the tagging pleasure is yours to take!

Update 21.01.05 Version 0.3 is out. Upgrade strongly recommended, or your tags won’t be indexed correctly by Technorati.

Tag Archives: code

Becoming a Professional Networker: Tags in Address Book OSX Needed!

Similar Posts:

Ridding WordPress Plugins of Template Tags

Similar Posts:

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

Similar Posts:

Excluding One Category From Blog Homepage (WordPress)

Similar Posts:

Remove Paging From WordPress Archives

Similar Posts:

Quelques balises HTML pour blogueurs

Similar Posts:

Simple Technorati Tags Plugin for WordPress

Similar Posts:

Welcome!

Around

Active Elsewhere

Blogroll

Headlines (Recent Posts)

Archives

Categories

Lijit Search

Recent Comments

Quote Me

About

Facebook

Navigation

Goodies