Here’s the scenario

You’re blogging. WordPress, Movable Type, Blogger, it doesn’t matter. You’ve got like 15 to 20 tabs open in Firefox. As per usual.

You’ve just stumbled upon the best quote on some blog that’s like totally supportive of whatever you’re blogging about. So you copy the URL and flip back to your post, only to experience this unsettling cognitive race condition.

Since you’ve yet to copy the actual text of the quote into your post, you can’t use your blog’s “create a link” button (some popular examples to the right). But at the same time, you can’t go back and copy the text without losing the URL. Errr.

Have you heard the one about the farmer trying to get a wolf, a sheep, and a cabbage across the river?

So what happens?

As a workaround, you paste the URL into your post, flip back to the post you got the URL from, copy the text you meant to excerpt, flip back to your blog (trying to find the right tab), paste the text, cut the URL out of your post, select the copied text, click the “create a link” button, and finally paste the URL into the JavaScript popup where you’d originally intended.

All that for a link! Two words: usability nightmare.

Even if things had happened in the right order—select text, copy text, switch tabs, paste text, switch tabs, copy URL, switch tabs, select text, click “create a link” button, paste URL—copying a simple quote and its URL from a webpage still requires 10 tedious, error-prone, and redundant steps.

So what should happen?

I want to be able to copy a quote and its URL at the same time, without having to so much as think about it. To do so, I wrote my first Firefox extension, which I opted to name the somewhat homely, Copy as HTML Link.

I took Jeremy Gillick’s Copy Plain Text plugin and modified it (with permission) to build an HTML link out of whatever text is selected, containing both the text and its URL. The idea was so simple, I can’t believe I didn’t think of it earlier. I also looked at Jedrick Kostecki’s excellent imgTag extension for inspiration, which does the same for <img /> tags when you right click on an image.

So if you were to use Copy as HTML Link to copy the first line of this paragraph, and then you pasted that into your blog post or text editor, you’d get:

<a href="http://justinsomnia.org/2006/05/copy-as-html-link-for-firefox/">I want to be able to copy a quote and its URL at the same time</a>

How to use Copy as HTML Link

Here’s a visual explanation of how it works:

What was 10 steps becomes 4: Select text, right click and select Copy as HTML Link, switch tabs, paste link.

Bonus step 5: continue blogging, train of thought intact.

Update, v3.1: Added French, Dutch, Serbian, and Chinese (zh-CN) locales; prepped for upcoming clipboard changes in Firefox 16, fixed weird context menu indentation on Mac OS X.

Update, v3.0: Copy as HTML Link now works appropriately when pasting in HTML-aware contexts, like rich email clients and WYSIWYG blog post editors.

Update, v2.0: Copy as HTML Link can now copy the text and URL of any link when you right click on it, without the need to select the text (which can be strangely frustrating in some situations). It’s super handy for copying the title and permalink of blog posts.

Get Copy as HTML Link

Install from Mozilla Add-ons: Copy as HTML Link

For IE users: Brian Layman has created a version of Copy as HTML Link and imgTag for Internet Explorer.

Questions, comments, and suggestions are always welcome. If you’re interested in contributing to the code behind Copy as HTML Link, it’s hosted on GitHub.

This was a fun one to write. What if you wanted to start over again? Just wipe the slate clean and start blogging without any baggage. Well, that’s actually hard to do unless you’re comfortable using the MySQL command line client (or phpMyAdmin).

So I whipped up a little plugin that does just that, and no more. Install it, activate it, and you’re just a single click away from blogging salvation (or is it purgatory?). In other words, this plugin gives you the power to delete all your blog posts from the database in one fell swoop. You can also use it to delete categories, comments, links, and custom fields, as well as users and blog settings. Here’s a screenshot:

Instructions

1. Download Suicide v2.0 from the WordPress.org Plugin Directory (or from me here)
2. Unzip the file and upload the suicide folder to your wp-content/plugins/ directory
3. Activate the plugin
4. Go to Tools > Suicide (and contemplate your blogging fate)

Note: by default, this plugin will delete all content associated with your blog except users and settings. That way you’re left with a functional, though effectively empty blog. Consider backing up your blog before “committing Suicide”. I assume no liability for data loss suffered through the use of this plugin. Use at your own risk!

In all seriousness, you might want to use this plugin if you recently imported your posts into WordPress from another blogging platform but something went horribly wrong (or you were considering importing your Haloscan comments) and you want to start the import process over.

Update: If you want more nuanced control over what particular records get deleted, say based on date or some other criteria, check out my SQL Executioner plugin. It allows you to send any SQL query/command to your WordPress database. If you don’t know SQL, no worries, just leave a comment with what you want, and I (or someone else) will respond with a query you can try.

Questions, comments, and suggestions are always welcome. If you’re interested in contributing to the code behind Suicide, it’s hosted on GitHub.

I’ve been musing on how to markup blog post updates more semantically since back when Jason added the following note to one of his posts:

That was the first time I recall seeing CSS used to differentiate an update from the body of the post, aside from Boing Boing‘s unsemantic and deprecated (though effective) use of:

<font color="red">Update:</font>

However, I can’t say that I do much better. I simply precede my updates with:

<strong>Update</strong>:

As an aside: I’ve always been meaning to ask, should the colon after “Update” be inside the </strong> end tag or outside? I feel like semantically, I’m only strengthening the word “Update”, while the colon is just syntactic decoration. But, stylistically, I imagine a typographer might tell me the colon should be emboldened. Any typographers in da house?

Jason used a technique that I liked much better. He marked up his updated paragraph with <p class="alert"> because his WordPress theme, K2, came with the alert class already defined and styled as:

.alert {
    background: #FFF6BF;
    border-top: 2px solid #FFD324;
    border-bottom: 2px solid #FFD324;
    text-align: center;
    margin: 10px auto;
    padding: 5px 20px;
}

Meanwhile I’ve been playing with the <del> tag, the semantic equivalent to the deprecated <s> and <strike> tags. Well <del>‘s underused analog is <ins>, intended for marking up inserted text. Sounds like the perfect tag to surround an update—except there’s one problem. <ins> is an inline tag, which means you can’t put block-level elements (like a paragraph or two) inside it. It’s really intended for small insertions of text within another block-level paragraph. But unlike the never-used <q> tag’s famous block-level sibling, the <blockquote>, <ins> has no such block-level brutha. Which is probably why the folks behind K2 created an alert class—one that could be used in both block-level and inline elements…

But wait, we’ve still got a semantic inline element dedicated to the task! So I decided to name my class ins (for use with block-level elements) and thus defined my CSS accordingly:

/* give them both something in common, 
in this case a yellowish background color */
.ins, ins {
    background-color:#edee98;
}

/* give the class a little bit of padding */
.ins {
    padding:1px 4px;
}

/* override the browser default 
to underline <ins>erted text */
ins {
    text-decoration:none; 
}

Here’s an example:

Update: This is actually not an update.

And here’s an inline example.

The only catch is that in WordPress it means you have to manually markup your updated paragraph, e.g.

<p class="ins"><strong>Update:</strong> This is actually not an update.</p>

Future possibilities: setting up The Fade Anything Technique to melt away the background color.

I’ve been working on this for an obscene amount of time. I’ve been working on it for so long, I can’t even remember when I started it. I think it was back in February, and then I got interrupted by another slightly more important project, so progress stalled.

I’m occasionally thinking about ways to expose my archives. One of my first attempts was creating the random image plugin for WordPress which displays, at random, one of the 400+ photos I’ve included in my blog posts, with a link back to that post. It’s like visual serendipity.

Then it occurred to me that many of my blog posts, especially since moving to California, have a geographic focus. Usually they’re about a place I went and often include a photo or two (or three).

It got me thinking about Anton’s travels page, powered by this flash app called IndyJunior which displays some of the places around the world that he’s been. Of course Anton’s pretty lucky, he spent time in Vanuatu doing Peace Corps, so his travel map looks awesome. But at the same time, it only really works well if you put in very granular data about the states or countries you visited.

Then it occurred to me, what if I could associate some geospatial data with my blog posts? Data that I could then extract and display on a map…using the Google Maps API, for instance. As long as I remembered to enter the metadata with my posts, the map would stay automatically updated, and it would provide a neat visualization of my archived posts and the places I’ve traveled. Here’s a screenshot:

The hard part was going through my archive of several hundred posts (almost 4 years!) and entering latitude and longitude data as precisely as possible for all relevant posts. 152 coordinates in all, so far. That was like 152 mini-research projects. Hmm, where again were those botanical gardens just outside of Accra, Ghana?

Of course it turns out that some posts necessitated multiple coordinates, but thankfully many, especially the earlier posts, had no geospatial associations. Luckily Google Maps is a great tool for gathering latitude and longitude data. Just center the map on your location, click “Link to this page”, and the coordinates for that point will be accessible in the URL as the ll query string variable, e.g. ll=33.66121,-95.556507. Consider it the poor man’s geocoder.

For the WordPress geeks out there, I stored this data as a custom field called geographic_coordindate in the format latitude,longitude;location where location was a short description of the specific location. This was especially useful for posts with multiple coordindates. Then I wrote a script that selected all those posts from the database and generated the javascript function calls necessary to build the markers and info bubbles in Google Maps.

Eventually maybe I’ll release a plugin or some code so others can do this, in the meantime, just leave a comment or send me an email if you’re interested.

Otherwise, go forth, explore my geospatial history.

In the blogosphere (and on the web) permalinks are sacred. Every broken link is like a demerit against your credibility. Even more so with syndication.

So I spent my day trying to figure out why Movable Type 3.2 occasionally appends an “_1” (an underscore followed by the number one) to the end of a published permalink (a basename in MT parlance) when there is no conceivable collision with any other basename, and without creating a duplicate entry.

We thought maybe Ecto was to blame. But I couldn’t recreate the problem with the latest versions on either Windows or Mac.

I talked to a few of our bloggers, and no one could point to a discernible pattern—other than that it only seemed to happen after an edit was made to an already published post. So I tried multiple combinations of setting a post from Published to Unpublished and then back again. But no game.

I reached out to the MT ProNet list and someone suggested that this may be a “known issue” in MT 3.2:

When an entry is saved from the Preview screen, the entry basename may be incremented or, if the title was changed, altered to fit the new title.

Turns out this was spot on. Here’s how to reproduce the bug:

1. Create a new entry and Save it (the Post Status is irrelevant)
2. Click the Preview button and click Save this entry
3. Notice that the Basename now has an “_1” appended to it
4. Click the Preview button again and click Save this entry
5. Notice that that the Basename no longer has an “_1” appended to it
6. …

I wouldn’t be able to sleep at night if I knew my blogging platform was producing unstable permalinks when users preview their posts and resave them. This is a problem on the scale of “our software is breaking the world wide web.” C’mon Six Apart, can I get a little more gumption than “this is a known issue”? This has been a known issue for five months!

Update: after my rabble-rousing on the ProNet list, Jay Allen posts a patch for fixing the “MT incrementing basename bug”. Thanks Jay!

This post first appeared on From the Belly of the Beasts, a weblog from some of the people who build O’Reilly websites.