Maximally Semantic Structure for a Blog Post

@edent — Mon, 12 Jan 2026 12:34:53 +0000

Yes, I know the cliché that bloggers are always blogging about blogging!

I like semantics. It tickles that part of my delicious meaty brain that longs for structure. Semantics are good for computers and humans. Computers can easily understand the structure of the data, humans can use tools like screen-readers to extract the data they're interested in.

In HTML, there are three main ways to impose semantics - elements, attributes, and hierarchical microdata.

Elements are easy to understand. Rather than using a generic element like

you can use something like

to show an element's contents are for navigation. Or

to show that the contents are an address. Or

to show that the section is part of a parent article.

Attributes are also common. You can use relational attributes to show how a link relates to the page it is on. For example shows that the link is to the author of the current page. Or, to see that a link goes to the previous page in a series .

Finally, we enter the complex and frightening world of microdata.

Using the Schema.org vocabulary it's possible to add semantic metadata within an HTML element. For example, says that the body of this page is a Blog. Or, to say how many words a piece has, 1,100 words.

There are many properties you can use. Here's the outline structure of a single blog post with a code sample, a footnote, and a comment. You can check its structured data and verify that it is conformant HTML.

Feel free to reuse.



My Blog


    
        My Blog
    

    
        
            
                
                    1st January, 2025
                
                
                    Post Title
                
                
                    
                        By Author Name
                    
                    
                
                
                    HTML 
                    semantics 
                    6 comments
                    1,100 words
                    
                        
                        
                            Viewed ~5,150 times
                        
                    
                
            

            
                
                Text of the post.
                Text with a footnote⁰.

                                    PHP
                    &lt;?php echo $postID ?&gt;
                

                
                    Footnotes
                    
                        
                            Footnote text. ↩︎
                        
                    
                
            
        

        
            Comments
            
                
                    2025-09-11 13:24
                
                
                    
                    
                        Alice says:
                    
                
                
                    Comment text

This blog post is entitled "maximally" but, of course, there is lots more that you can add if you really want to.

Remember, none of this is necessary. Computers and humans are pretty good at extracting meaning from unstructured text. But making things easier for others is always time well spent.

A small collection of text-only websites

@edent — Tue, 30 Dec 2025 12:34:20 +0000

A couple of years ago, I started serving my blog posts as plain text. Add .txt to the end of any URl and get a deliciously lo-fi, UTF-8, mono[chrome|space] alternative.

Here's this post in plain text - https://shkspr.mobi/blog/2025/12/a-small-collection-of-text-only-websites.txt

Obviously a webpage without links is like a fish without a bicycle, but the joy of the web is that there are no gatekeepers. People can try new concepts and, if enough people join in, it becomes normal. I'm not saying the plain-text is the best web experience. But it is an experience. Perfect if you like your browsing fast, simple, and readable. There are no cookie banners, pop-ups, permission prompts, autoplaying videos, or garish colour schemes.

I'm certainly not the first person to do this, so I thought it might be fun to gather a list of websites which you browse in text-only mode. If you know of any more - including your own site - please drop a comment in the box!

Terence Eden's blog - add .txt to any URl.
Daring Fireball - add .text to any URl.
Zach Flowers - replace .html with .txt.
Fabien Benetou's PIM - add ?action=source to any URl.
M0YNG - add .txt to any URl.
Gwern - add .md to any URl or send an HTTP Accept for Markdown.
Dan Q's textplain.blog - the entire blog is plain text!
Matt Hobbs - there is a feed of plaintext which allows you to read recent posts.
Bananas Playground - add index.txt to any post. Also works with index.md.
Jorvik Systems - change .html to .md for Markdown.
Max Glenister's blog - add .txt to any post's URl.
Philipp Dubach's notes - add .txt to any post's URl.
Derick Rethans' blog - add .txt to any post's URl.
Ricardson's blog - add .txt to any post's URl.
elle's blog - text mode only available via curl elle.sh/blog.
Benji.dog - add .txt to any note's URl.

If you'd like to add a site, please get in touch. The rules are simple - content which has the MIME type of text/plain. No HTML, no multimedia, no RTF, no XML, no ANSI colour escape sequences.

Emoji are fine though; emoji are cool.

Change the way dates are presented in WordPress's admin view

@edent — Wed, 26 Feb 2025 12:34:21 +0000

WordPress does not respect an admin's preferred date format.

Here's how the admin list of posts looks to me:

I don't want it to look like that. I want it in RFC3339 format.

I know what you're thinking, just change the default date display - but that only seems to work in some areas of WordPress. It doesn't change the column-date format. Here's what mine is set to:

So that doesn't work.

Instead, you need to use the slightly obscure post_date_column_time filter

Add this to your theme's functions.php:

//  Admin view - change date format
function rfc3339_post_date_time( $time, $post ) {
    //  Modify the default time format
    $rfc3339_time = date( "Y-m-d H:i", strtotime( $post->post_date ) );
    return $rfc3339_time;
}
add_filter( "post_date_column_time", "rfc3339_post_date_time", 10, 2 );

And, hey presto, your date column will look like this:

Obviously, you can change that code to whichever date format you prefer.

Graphing the connections between my blog posts

@edent — Thu, 09 Jan 2025 12:34:56 +0000

I love ripping off good ideas from other people's blogs. I was reading Alvaro Graves-Fuenzalida's blog when I saw this nifty little force-directed graph:

When zoomed in, it shows the relation between posts and tags.

In this case, I can see that the posts about Small Gods and Pyramids both share the tags of Discworld, Fantasy, and Book Review. But only Small Gods has the tag of Religion.

Isn't that cool! It is a native feature of Quartz's GraphView. How can I build something like that for my WordPress blog?

Aim

Create an interactive graph which shows the relationship between a post, its links, and their tags.

It will end up looking something like this:

You can get the code or follow along to see how it works.

This is a multi-stage process. Let's begin!

What We Need

When on a single Post, we need the following:

The tags assigned to that Post.
Internal links back to that Post.
Internal links from that Post.
The tags assigned to links to and from that Post.

Tags assigned to that Post.

This is pretty easy! Using the get_the_tag_list() function we can, unsurprisingly, get all the tags associated with a post.

$post_tags_text = get_the_tag_list( "", ",", $ID );
$post_tags_array = explode( "," , $post_tags_text );

That just gets the list of tag names. If we want the tag IDs as well, we need to use the get_the_tags() function.

$post_tags = get_the_tags($ID);
$tags = array();
foreach($post_tags as $tag) {
    $tags[$tag->term_id] = $tag->name; 
}

Backlinks

Internal links back to the Post is slightly trickier. WordPress doesn't save relational information like that. Instead, we get the Post's URl and search for that in the database. Then we get the post IDs of all the posts which contain that string.

//  Get all the posts which link to this one, oldest first
$the_query = new WP_Query(
    array(
        's' => $search_url,
        'post_type' => 'post',
        "posts_per_page" => "-1",
        "order" => "ASC"
    )
);

//  Nothing to do if there are no inbound links
if ( !$the_query->have_posts() ) {
    return;
}

Backlinks' Tags

Once we have an array of posts which link back here, we can get their tags as above:

//  Loop through the posts
while ( $the_query->have_posts() ) {
    //  Set it up
    $the_query->the_post();
    $id                  = get_the_ID();
    $title               = esc_html( get_the_title() );
    $url                 = get_the_permalink();
    $backlink_tags_text  = get_the_tag_list( "", ",", $ID );
    $backlink_tags_array = explode( "," , $backlink_tags_text );
}

Links from the Post

Again, WordPress's lack of relational links is a weakness. In order to get internal links, we need to:

Render the HTML using all the filters
Search for all

Extract the ones which start with the blog's domain

Get those posts' IDs.

Rendering the content into HTML is done with:

$content = apply_filters( "the_content", get_the_content( null, false, $ID ) );

Searching for links is slightly more complex. The easiest way is to load the HTML into a DOMDocument, then extract all the anchors. All my blog posts start /blog/YYYY so I can avoid selecting links to tags, uploaded files, or other things. Your blog may be different.

$dom = new DOMDocument();
libxml_use_internal_errors( true ); //  Suppress warnings from malformed HTML
$dom->loadHTML( $content );
libxml_clear_errors();

$links = [];
foreach ( $dom->getElementsByTagName( "a" ) as $anchor ) {
    $href = $anchor->getAttribute( "href" );
    if (preg_match('/^https:\/\/shkspr\.mobi\/blog\/\d{4}$/', $href)) {
        $links[] = $href;
    }
}

The ID of each post can be found with the url_to_postid() function. That means we can re-use the earlier code to see what tags those posts have.

Building a graph

OK, so we have all our constituent parts. Let's build a graph!

Graphs consist of nodes (posts and tags) and edges (links between them). The exact format of the graph is going to depend on the graph library we use.

I've decided to use D3.js's Force Graph as it is relatively simple and produces a reasonably good looking interactive SVG.

Imagine there are two blog posts and two hashtags.

const nodes = [
    { id: 1, label: "Blog Post 1",    url: "https://example.com/post/1", group: "post" },
    { id: 2, label: "Blog Post 2",    url: "https://example.com/post/2", group: "post" },
    { id: 3, label: "hashtag",        url: "https://example.com/tag/3",  group: "tag"  },
    { id: 4, label: "anotherHashtag", url: "https://example.com/tag/4",  group: "tag"  },
];

Blog Post 1 links to Blog Post 2.
Blog Post 1 has a #hashtag.
Both 1 & 2 share #anotherHashtag.

const links = [
    { source: 1, target: 2 },
    { source: 3, target: 1 },
    { source: 4, target: 1 },
    { source: 4, target: 2 },
];

Here's how to create a list of nodes and their links. You will need to edit it for your own blog's peculiarities.

 $id, 
        "label" => $label, 
        "url"   => $url, 
        "group" => $group
    ];

}

//  Function to add new relationships
function add_relationship( &$links, $source, $target ) {
    $links[] = [
        "source" => $source,
        "target" => $target
    ];
}

//  Add Post to the nodes
add_item_to_nodes( $nodes, $main_post_id, $main_post_title, $main_post_url, "post" );

//  Get the tags of the Post
$main_post_tags = get_the_tags( $main_post_id );

//  Add the tags as nodes, and create links to main Post
foreach( $main_post_tags as $tag ) {
    $id   = $tag->term_id;
    $name = $tag->name;

    //  Add the node
    add_item_to_nodes( $nodes, $id, $name, "https://shkspr.mobi/blog/tag/" . $name, "tag" );
    //  Add the relationship
    add_relationship( $links, $id, $main_post_id );
}

//  Get all the posts which link to this one, oldest first
$the_query = new WP_Query(
    array(
        's'              => $main_post_url,
        'post_type'      => 'post',
        "posts_per_page" => "-1",
        "order"          => "ASC"
    )
);

//  Nothing to do if there are no inbound links
if ( $the_query->have_posts() ) {
    //  Loop through the posts
    while ( $the_query->have_posts() ) {
        //  Set up the query
        $the_query->the_post();
        $post_id = get_the_ID();
        $title = esc_html( get_the_title() );
        $url   = get_the_permalink();

        //  Add the node
        add_item_to_nodes( $nodes, $post_id, $title, $url, "post" );
        //  Add the relationship
        add_relationship( $links, $post_id, $main_post_id );

        //  Get the tags of the Post
        $post_tags = get_the_tags( $post_id );

        //  Add the tags as nodes, and create links to main Post
        foreach($post_tags as $tag) {

            $id   = $tag->term_id;
            $name = $tag->name;

            //  Add the node
            add_item_to_nodes( $nodes, $id, $name, "https://shkspr.mobi/blog/tag/" . $name, "tag" );
            //  Add the relationship
            add_relationship( $links, $id, $post_id );
        }

    }
}

//  Get all the internal links from this post
//  Render the post as HTML
$content = apply_filters( "the_content", get_the_content( null, false, $ID ) );

//  Load it into HTML
$dom = new DOMDocument();
libxml_use_internal_errors( true );
$dom->loadHTML( $content );
libxml_clear_errors();

//  Get any getElementsByTagName( "a" ) as $anchor ) {
    $href = $anchor->getAttribute( "href" );
    if (preg_match('/^https:\/\/shkspr\.mobi\/blog\/\d{4}$/', $href)) {
        $internal_links[] = $href;
    }
}

//  Loop through the internal links, get their hashtags
foreach ( $internal_links as $url ) {
    $post_id = url_to_postid( $url );
    //  Get the Post's details
    $post_title = get_the_title( $id );

    //  Add the node
    add_item_to_nodes( $nodes, $post_id, $post_title, $url, "post" );
    //  Add the relationship
    add_relationship($links, $main_post_id, $post_id );

    //  Get the tags of the Post
    $post_tags = get_the_tags( $post_id );

    //  Add the tags as nodes, and create links to main Post
    foreach( $post_tags as $tag ) {
        $id   = $tag->term_id;
        $name = $tag->name;

        //  Add the node
        add_item_to_nodes( $nodes, $id, $name, "https://shkspr.mobi/blog/tag/" . $name, "tag" );
        //  Add the relationship
        add_relationship( $links, $id, $post_id );
    }
}

//  Deduplicate the nodes and links
$nodes_unique = array_unique( $nodes, SORT_REGULAR );
$links_unique = array_unique( $links, SORT_REGULAR );

//  Put them in the keyless format that D3 expects
$nodes_output = array();
$links_output = array();

foreach ( $nodes_unique as $node ) {
    $nodes_output[] = $node;
}

foreach ( $links_unique as $link ) {
    $links_output[] = $link;
}

//  Return the JSON
echo json_encode( $nodes_output, JSON_PRETTY_PRINT );
echo "\n";
echo json_encode( $links_output, JSON_PRETTY_PRINT );

Creating a Force Directed SVG

Once the data are spat out, you can include them in a web-page. Here's a basic example:



    
        
        
        Force Directed Graph

Next Steps

It needs a bit of cleaning up if I want to turn it into a WordPress plugin. It might be nice to make it a static SVG rather than relying on JavaScript. And the general æsthetic needs a bit of work.

Perhaps I could make it 3D like my MSc Dissertation?

But I'm pretty happy with that for an afternoon hack!

You can get the code if you want to play.

Order WordPress Posts by Most Comments

@edent — Thu, 12 Dec 2024 12:34:42 +0000

I take great delight in seeing people reply to my blog posts. I use WebMentions to collect replies from social media and other sites. But which of my posts has the most comments? Here's a snipped to stick in your functions.php file. It allows you to add ?comment-order to any WordPress URl and have the posts with the most comments on top.

//  Add ordering by comments
add_action( 'pre_get_posts', 'pre_get_posts_by_comments' );
function pre_get_posts_by_comments( $query ) {
    //  Do nothing if the post_status parameter in the URL is not "comment-order"
    if ( ! isset( $_GET['comment-order'] ) ) {
        return;
    }

    $query->set( "orderby", "comment_count" );  //  Default: date
    $query->set( "order", "DESC" ); //  Biggest first
}

This makes use of the pre_get_posts hook to rewrite the posts query. That means it works on most WordPress pages.

For example:

My homepage https://shkspr.mobi/blog/?comment-order
Posts with a specific tag https://shkspr.mobi/blog/tag/blockchain/?comment-order
Dates https://shkspr.mobi/blog/2012/?comment-order

Did you find this post useful? Please leave a comment here!

WordPress - Sic Transit Gloria Mundi

@edent — Mon, 21 Oct 2024 11:34:59 +0000

Why do so many vastly-wealthy tech personalities go mad?

My ideal job involves being employed by a millionaire tech-bro. Just before they get on stage, or moments before they file a lawsuit, or an instant before they publish their thought leadership - I will appear to them. I will be dressed in rags, body smeared with excrement, weeping sores blotching my face. I will sidle up to them, lean down, and whisper into their ear "Sic Transit Gloria Mundi!"

This used to be the way, of course. When a new Pope or Emperor was paraded through the streets, the people cheered and the acolytes coo'd. But someone would chant at them in Latin, "Thus passes all Earthly glory."

The sun sets on every empire. Each god-king was eventually proved to be mortal. The evil that men do lives after them and the good is oft interred within their bones. And so on. We know this. No one is perfect all the time. Every genius has a moment of idiocy.

For small projects, it makes sense to have only one gaffer. All the work passes through him. Too many cooks poison the well.

As projects get bigger, one person doesn't scale. It is functionally impossible to know everything, see everything, please everyone. Yet the sole arbiter remains. We (almost-jokingly) call this position BDFL. The Benevolent Dictator For Life.

But BDFL only works if the D is genuinely B. Otherwise the FL becomes FML.

It must be psychologically difficult being responsible for a mega-project. I certainly couldn't do it. If you're wasting time reading this blog post, you almost certainly couldn't do it. I like my friends to challenge my occasional missteps. I want people to be somewhat honest to my face. I can't imagine what it would do to my ego to receive endless praise. Of course I'd tune out the negative voices.

This isn't to excuse their excesses. Nor to fully demystify their demagoguery. I just want them to have good mental health so their public meltdowns don't reverberate through the æther, infecting us all with their psychic fallout.

*sigh* I'd rather not be blogging about blogging.

Tending To My Digital Garden

@edent — Sat, 12 Oct 2024 11:34:11 +0000

I've written over 3,000 blog posts throughout the years. This blog has become a repository of my thoughts, feelings, experiments, hopes, and creations.

It has also become outdated, buggy, and suffers from link-rot.

So, every day, I tend to my digital garden. I go in to old posts and check that the links are still pointing somewhere relevant. Are the embeds still live or do they need replacing? Has my writing somehow been mangled by me buggering about with CSS?

Oh, I could use automated tools. But when a spammer takes over a domain I've linked to, they rarely send an HTTP 410 code.

Sometimes the work is delightful - finding a prescient post from a decade ago. Sometimes it is frustrating - being unable to find a vital-but-long-dead link. And sometimes it is sad - seeing how much or how little the world has changed.

But, mostly, it is meditative. We do our best to fight against decay, but entropy always wins in the end. Every link eventually withers and every truth is eroded by time. Nevertheless, we continue.

Replacing Twitter Embeds With Images

@edent — Mon, 19 Aug 2024 11:34:18 +0000

I logged into Twitter using a fresh account last week. No followers, no preferences set. The default experience was an unending slurry of racism and porn. I don't care to use Twitter any more. Whatever good that was there is now drowned in a cess-pit of violent filth.

I still have a lot of Tweets embedded on this blog. Using WordPress, it was easy to paste in a link and have it converted to an embed. But I don't want to direct people to a dangerous site.

So here's a somewhat automated way to replace embedded Tweets with screenshots.

Shut up and show me the code!

Demo

Use the Embed Platform

Take the ID of the Tweet you want to convert. Add it on to the end of an embed URl like this - https://platform.twitter.com/embed/Tweet.html?dnt=true&embedId=twitter-widget-0&frame=false&hideCard=false&hideThread=true&lang=en&theme=light&width=550px&id=1092852483033055232

Let's make that a bit more readable:

https://platform.twitter.com/embed/Tweet.html?
   hideCard=false
  &hideThread=true
  &lang=en
  &theme=light
  &width=550px
  &id=1092852483033055232

You can change whether to show a card (the attached image or link), show the preceding message in the thread or not, what UI language to show, dark or light mode, and how wide you want the embed to be.

Use Selenium to automate the screenshot

Using Python, we can use Selenium's Chrome Webdriver to open pages, find elements, and take screenshots:

import time

import io
from PIL import Image

from selenium import webdriver 
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By

#   Chrome's headless options
chrome_options = Options()
chrome_options.add_argument('--headless=new')
chrome_options.add_argument('--window-size=1920,1080')

#   Turn off everything
chrome_options.add_argument("--disable-gpu")
chrome_options.add_argument("--no-sandbox")
chrome_options.add_argument("--disable-dev-shm-usage")
chrome_options.add_argument("--disable-extensions")
chrome_options.add_argument("--disable-infobars")
chrome_options.add_argument("--disable-logging")
chrome_options.add_argument("--log-level=3")

#   Start Chrome
driver = webdriver.Chrome(options=chrome_options)

#   Open the page
driver.get("https://platform.twitter.com/embed/Tweet.html?dnt=true&embedId=twitter-widget-0&frame=false&hideCard=false&hideThread=true&lang=en&theme=light&width=550px&id=1092852483033055232")

#   Twitter is slow!
time.sleep(5)

#   Get the Tweet
tweet = driver.find_element(By.TAG_NAME, "article")
#   Use the parent element for more padding
tweet = driver.execute_script("return arguments[0].parentNode;", tweet)

#   Save as an image
print("Save")
image_binary = tweet.screenshot_as_png
img = Image.open(io.BytesIO(image_binary))
img.save("tweet.png")

Get the alt text

Accessibility is important. Getting the text of the Tweet is as simple as:

#   Get the alt text
alt = tweet.text

But that retrieves all the text - including things like "Copy link to post" and "Read more on X" - because Twitter doesn't believe in semantic HTML. There's also no way to easily get the number of likes and retweets - which might be useful information.

If there are images in the post, it's useful to get their alt text. This is simpler:

images = tweet.find_elements(By.TAG_NAME, "img")
print("\nAlt text of images:")
for img in images:
    alt_text = img.get_attribute("alt")
    if alt_text:
        print(alt_text)

Use The API

There is a better way to get all the text, alt text, and metadata. Use the hidden syndication API! But that's a blog post for another time…

Get the Code

Grab the code from GitHub - and if it is useful to you, please star the repo or leave a friendly comment.

Of course, if we can use the API to get the pure data, perhaps it is possible to make some lovely semantic HTML rather than an image...? 😉

Corporate Blogging is Hard; Open a GitHub Issue Instead

@edent — Fri, 26 Jul 2024 11:34:02 +0000

(Inspired by this conversation between Jukesie and Himal)

Lots of companies encourage their staff to blog. It's free PR! It makes them look like they're on the cutting edge of technology! It helps with recruitment!

It can also be a corporate nightmare. What if the developer says something stupid? What if it accidentally reveals something top secret? What if the CEO doesn't like it?

And so, gradually, any free-wheelin' developer blog gradually succumbs to the tender mercies of the comms team. It starts with help editing and clarifying the writing. Then it turns into massaging the tone-of-voice. Before too long you have to wait for a slot on the corporate comms grid. And then you need seven levels of sign-off just to post something anodyne like "5 reasons we switched to Rust".

*sigh*

So, maybe once or twice, I cheated.

Rather than writing a blog post called "An interesting issue configuring GLaDOS with YAML" I opened an issue on our public GitHub repo.

Oh, sure, it wasn't as "bloggy". And I still made sure not to discuss anything secret or sensitive. For some of the more contentious issues, I ran it by a few trusted colleagues first. But, for all intents and purposes, it was a blog post. Nerds got to reply in the comments, people shared it on HN, people quoted it on social media.

I've since left that sort of restrictive environment. I still see my old team occasionally publishing a useful blog post. But I keep my eyes on their GitHub issues to see the real story!

What's the moral here?

Should you bypass your employer's strict social media policy? No, absolutely not. Should you ensure that your GitHub issues are well-formatted, interesting to read, and useful to others? Yes.

An end to daily blogging

@edent — Fri, 05 Jul 2024 11:34:36 +0000

If you explore this blog's archives, you'll see that I've been blogging continuously every day since the start of 2020. Before that, I was blogging every month since mid-2008.

Today, I am very hungover. Although I usually write a bunch of posts a few days and weeks in advance, I find myself looking at my publishing calendar and seeing it blissfully empty.

Part of the reason I blog is that I truly want to learn something new every day - and I want to share that knowledge. Whether it's a cool programming trick, and interesting book, or thoughts on the world - I enjoy lifelong learning.

But I am tired. Also hungover - but mostly tired. Perhaps it is a little burn-out. Perhaps it is a little disillusionment with the state of the tech world. Perhaps I'm spending too much of my energies elsewhere. Either way, despite the little dopamine hit I get when my posts go viral, or when new friends leave comments, I think now is the perfect time to throttle back.

So, this is the 3,094th post that I've published on this site - and it is likely to be the last one for a little while. I'll still be writing when the mood strikes. And I'll still be wittering away on Mastodon.

Thank you for reading, commenting, and sharing.

Be seeing you!

It was twenty years ago today

@edent — Sat, 11 May 2024 11:34:45 +0000

I wrote my first public blog post on 2004-05-11⁰. I immediately followed it up with a brief review of my BlackBerry¹.

I kept up the blogging for a few months, then it trickled off. I preferred posting on Usenet and other primitive forms of social media. But, by 2007, I was back to blogging on my own site again, and I never really stopped. This blog fluctuates between being a diary, an excuse to rant, and technical writing. It's my site and I can do whatever I want with it. That's rather freeing.

I have an "On This Day" feature of my blog. Every morning I check what I was writing about on this day in years gone by. I find it informative and meditative to see how much I've grown² and what topics I keep returning to.

I'm not big on milestones or anniversaries. But it does feel rather nice to know that I started something a few decades ago that is still a going concern.

Here's a little treat to thank you for reading:

Since then, I've imported it to this site ↩︎
If memory serves, I found the BlackBerry in a colleague's drawer, asked to borrow it, then used social engineering to get the IT team to set it up for me. Fun times! ↩︎
And how little I've changed. ↩︎

@edent — Thu, 02 May 2024 11:34:51 +0000

While attending IndieWebCamp in Brighton a few weeks ago, a bunch of us were talking about blogging. What is post? What should it contain? What's optional?

Someone (probably Jeremy Keith said:

A blog post doesn't need a title.

In a literal sense, he was wrong. The HTML specification makes it clear that the </code> element is mandatory. All documents have title.</p> <p>But, in a practical sense, he was right. This blog post has an empty <code><h1></code> element - the document might be semantically invalid, it might reduce accessibility, but the <em>post</em> is still available.</p> <p>A blog post can be a plain text document uploaded to a server. It can be an image hosted on a social network. It can be a voice note shared with your friends.</p> <p>Title, dates, comments, links, and text are all <em>optional</em>.</p> <p>No one is policing this.</p> <p>Go create something which doesn't fit properly with the rest of the world.</p> </article> <article> <h1>3,000 blog posts!</h1> <p>@edent — Tue, 02 Apr 2024 11:34:53 +0000</p> <p>This is the 3,000th blog post I've published on this site! Bloody hell!</p> <p>I first started <a href="https://shkspr.mobi/blog/2004/?order=ASC">a blog on Blogger.com in 2004 - twenty years ago</a>. Like all blogs, I managed half a dozen posts before I forgot about it.</p> <p>Cut to 2007 and I decided to launch <a href="https://shkspr.mobi/blog/2007/11/shksprmobi-goes-live/"><code>shkspr.mobi</code></a> as a weird site dedicated to rendering Shakespeare's plays in txt spk. Judging by <a href="https://web.archive.org/web/20090122051921/http://shkspr.mobi/blog/">Archive.org</a> I was still using Blogger.</p> <p>By <a href="https://shkspr.mobi/blog/2008/?order=ASC">2008</a> I was blogging most months. And then I never really stopped. In early <a href="https://shkspr.mobi/blog/2009/05/playing-with-wordpress/">2009 I switched to WordPress</a> which led me down the path of developing my own theme and plugins.</p> <p>Along the way, I've added <a href="https://shkspr.mobi/blog/2023/02/necroposting-blogging-from-before-you-started-blogging/">necroposts</a> - blog posts from work blogs which have since become defunct, or letters that I wrote to magazines when I was a kid.</p> <p>I've also been quite liberal with my use of <a href="https://shkspr.mobi/blog/tag/retropost/">retroposts</a> - posts written far in advance and then published once the dust has settled. There are a few more of those in the pipeline.</p> <p>As of today, there are about 6,500 pieces of media in my library - taking up 2.3GB.</p> <p>Last year I hit <a href="https://shkspr.mobi/blog/2023/06/12000-comments/">12,000 comments</a> - now I'm on about 13,500.</p> <p>Since 2009, when I first turned on WordPress stats, my blog has been visited 8.5 million times.</p> <p>According to <a href="https://wpguru.co.uk/2018/03/how-to-retrieve-the-total-word-count-from-all-posts-in-wordpress/">some code I copy and pasted</a> the total wordcount across all my posts is...</p> <p>1,553,953 words.</p> <p><em>Bloody hell!</em></p> <p>So, because bloggers like nothing more than writing about blogging, I thought I'd do a little look behind my process.</p> <h2 id="how-i-write"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#how-i-write">How I write</a></h2> <p>I don't write every day. But I do write <em>most</em> days. I usually write title and scraps of ideas, then leave them to ferment<sup id="fnref:ferment"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fn:ferment" class="footnote-ref" title="Or foment." role="doc-noteref">0</a></sup>. They usually start out as social-media posts which have got a little traction.</p> <p>When I do write a post, I'll quite often leave it in a half-finished state and come back to it later. I usually have several blog posts on the go at any one time. It is incredibly rare that I'll write something and publish it that same day. And it is only occasionally that I publish something in the same week it was written.</p> <p>I schedule and reschedule as the mood takes me.</p> <p>I write in MarkDown using the classic editor. I'm too stuck in my ways to switch to Gutenberg blocks.</p> <h2 id="why-i-write"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#why-i-write">Why I write</a></h2> <p>Because I enjoy it.</p> <p>Someone once asked me how I managed to <a href="https://shkspr.mobi/blog/library/">read so many books</a> and the answer is simple - because I prefer reading books to doing other things.</p> <p>I could spend more time playing video games, or learning to solder, or cooking from scratch, or brewing beer, or drinking beer, or any of a thousand hobbies<sup id="fnref:beer"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fn:beer" class="footnote-ref" title="Mostly beer related, TBF." role="doc-noteref">1</a></sup>. But reading and writing are what I prefer doing.</p> <p>Oh, sure, there's a thrill when a post goes viral. Or when someone you admire says something nice about the writing. Or when someone leaves a comment on an old blog saying how I helped them. Or when <a href="https://shkspr.mobi/blog/citations/">I'm cited in academic research</a>.</p> <p>But the reason I write is to get all the ideas out of my head<sup id="fnref:🤯"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fn:🤯" class="footnote-ref" title="And there are a lot of ideas in there. Not all of them good. Very few of them sensible. But all rattling around. Once written down, they no longer crowd my thoughts." role="doc-noteref">2</a></sup>. I blog daily because, deep down, I want to learn something new and surprising every day - and I want to share that with anyone who happens to pass by.</p> <h2 id="what-ive-learned"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#what-ive-learned">What I've learned</a></h2> <p>It is trite, but the blog posts I expected to be lauded were mostly flops. The half-arsed ones often do well<sup id="fnref:🤪"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fn:🤪" class="footnote-ref" title="There is a lesson here which I refuse to learn!" role="doc-noteref">3</a></sup>.</p> <p>People can't read. I'll write as clearly as I can and some yutz will misunderstand me<sup id="fnref:deliberate"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fn:deliberate" class="footnote-ref" title="Perhaps deliberately. Perhaps not. But you can't tell the difference." role="doc-noteref">4</a></sup>.</p> <p>Some people are incapable of understanding hyperbole. Perhaps it is a feature of British English which isn't well understood around the world?</p> <p>Americans don't like swearing in blog posts and get a bit po-faced about it<sup id="fnref:swearing"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fn:swearing" class="footnote-ref" title="The nice thing about swearing is that it simultaneously shows you are both funny and clever!" role="doc-noteref">5</a></sup>.</p> <p>My predictions rarely come true, my opinions fluctuate, and my spelling remains poor.</p> <p>I'm nothing without <a href="https://web.archive.org/web/20240403222815/https://mymisanthropicmusings.org.uk/">my unpaid editor</a>.</p> <h2 id="thank-you-for-reading"><a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#thank-you-for-reading">Thank you for reading</a></h2> <p>I mostly write for me. But it is lovely to know that people all around the world occasionally stop by to read. It is very sweet of you.</p> <p>If you've enjoyed my writing or ever found it useful, please go off and start your own blog. Write whatever nonsense comes into <em>your</em> head.</p> <div id="footnotes" role="doc-endnotes"> <hr aria-label="Footnotes"> <ol start="0"> <li id="fn:ferment"> <p>Or foment. <a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fnref:ferment" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> <li id="fn:beer"> <p>Mostly beer related, TBF. <a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fnref:beer" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> <li id="fn:🤯"> <p>And there are a <em>lot</em> of ideas in there. Not all of them good. Very few of them sensible. But all rattling around. Once written down, they no longer crowd my thoughts. <a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fnref:🤯" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> <li id="fn:🤪"> <p>There is a lesson here which I <em>refuse</em> to learn! <a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fnref:🤪" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> <li id="fn:deliberate"> <p>Perhaps deliberately. Perhaps not. But you can't tell the difference. <a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fnref:deliberate" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> <li id="fn:swearing"> <p>The nice thing about swearing is that it simultaneously shows you are both funny <em>and</em> clever! <a href="https://shkspr.mobi/blog/2024/04/3000-blog-posts/#fnref:swearing" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> </ol> </div> </article> <article> <h1>Caboom! Comment Anywhere, Bring Onto Own Media</h1> <p>@edent — Thu, 21 Mar 2024 12:34:02 +0000</p> <p>In the IndieWeb movement there's a concept of "POSSE" - <a href="https://indieweb.org/POSSE">Publish Once, Simultaneously Syndicate Elsewhere</a>.</p> <p>You should publish your words, pictures, songs, reviews on your <em>own</em> site. And then you can choose to share them out to where your audience is. Perhaps that's posting the link on Facebook, or a copy of a photo on Instagram, or sharing the episode on YouTube.</p> <p>There's no shame in meeting your audience where they are - but the canonical version should be somewhere you control.</p> <p>But what about the conversation? Social media is about socialising. People who comment on LinkedIn can't see the comments on Mastodon and vice versa.</p> <p>This is where the concept of "CABOOM!" (exclamation optional) comes in<sup id="fnref:liz"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#fn:liz" class="footnote-ref" title="As suggested by my wife" role="doc-noteref">0</a></sup>. As far as practical, you should bring the various comment threads together so everyone can see them<sup id="fnref:backfeed"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#fn:backfeed" class="footnote-ref" title="The technical term is, apparently, backfeed - which sounds a little too like backwash for my liking!" role="doc-noteref">1</a></sup>.</p> <p>There are a few ways to do this - choose whichever is right for you.</p> <h2 id="do-nothing"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#do-nothing">Do Nothing</a></h2> <p>Let people self-discover that you syndicate. Perhaps they'll stumble upon a bunch of people discussing your post over on Slashdot. That's fine, but a little hard work.</p> <h2 id="point-to-your-syndication-sites"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#point-to-your-syndication-sites">Point to your syndication sites</a></h2> <p>At the bottom of your post, you can say "Click here to read the comments on MySpace!"</p> <h2 id="find-other-sources"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#find-other-sources">Find other sources</a></h2> <p>Did someone share your post to HackerNews? Add a link on your page to the orange-site so that others can read what's being said.</p> <h2 id="convert-comments-to-webmentions"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#convert-comments-to-webmentions">Convert comments to WebMentions</a></h2> <p>Using a service like <a href="https://brid.gy/">Brid.gy</a> you can "upgrade" external comments to <a href="https://www.w3.org/TR/webmention/">WebMentions</a>. They will appear on your post as normal comments, but with a link back to their original location.</p> <h2 id="abuse-apis"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#abuse-apis">(Ab)use APIs</a></h2> <p>Services like Reddit have APIs. You could pull in a complete comment thread and present it on your own site.</p> <h2 id="make-backups"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#make-backups">Make backups</a></h2> <p>Some of those external sites are going to break one day. Take a backup using <a href="https://archive.org">Archive.org</a> or snap a screenshots. Perhaps link to those if the original goes away.</p> <h2 id="be-mindful-of-others-feelings"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#be-mindful-of-others-feelings">Be mindful of others' feelings</a></h2> <p>I've previously discussed <a href="https://shkspr.mobi/blog/2022/12/the-ethics-of-syndicating-comments-using-webmentions/">the ethics of syndicating comments using WebMentions</a>. Not everyone wants their comment copied back to your site. Some people regularly delete comments. Or they may have valid copyright concerns. Just because someone has written something in public, it doesn't mean it is in the public domain. Be kind to your commenters and respect their wishes.</p> <h2 id="have-fun"><a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#have-fun">Have fun</a></h2> <p>There is literally no-one policing this. If you don't want to do it, that's fine. If you want to give it your best effort, that's also fine.</p> <div id="footnotes" role="doc-endnotes"> <hr aria-label="Footnotes"> <ol start="0"> <li id="fn:liz"> <p>As suggested by <a href="https://web.archive.org/web/20240403222815/https://mymisanthropicmusings.org.uk/">my wife</a> <a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#fnref:liz" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> <li id="fn:backfeed"> <p>The technical term is, apparently, <a href="https://indieweb.org/backfeed">backfeed</a> - which sounds a little too like backwash for my liking! <a href="https://shkspr.mobi/blog/2024/03/caboom-comment-anywhere-bring-onto-own-media/#fnref:backfeed" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> </ol> </div> </article> <article> <h1>A library of all my book reviews</h1> <p>@edent — Fri, 29 Dec 2023 12:34:02 +0000</p> <p>One of the things I love about having a database-backed blog like WordPress is that's it opens up a delightful range of possibilities for displaying content.</p> <p>I've read and reviewed around 300 books over the last few years. So I wrote a scrap of code which goes through all my book reviews, grabs their cover and rating, and displays them in a nice grid. You can visit it at <a href="https://shkspr.mobi/blog/library">shkspr.mobi/blog/library</a></p> <p>You know how when you're at a friend's home you rummage through their bookshelf? That's the same idea here. You get to poke through the stacks and, hopefully, pick out something entertaining to read. Or, perhaps, you'll be warned off something truly dreadful.</p> <p><a href="https://shkspr.mobi/blog/library"></a></p> <p>All <a href="https://gitlab.com/edent/blog-theme/-/blob/master/includes/library.php?ref_type=heads">the code for my blog is open source</a> - and I'd be delighted if you did something interesting with it.</p> <p>This was <em>heavily</em> inspired by <a href="https://daverupert.com/bookshelf/">Dave Rupert's bookshelf</a>.</p> </article> <article> <h1>Displaying internal linkbacks on WordPress</h1> <p>@edent — Sun, 15 Oct 2023 11:34:58 +0000</p> <p>I have written a <em>lot</em> of blog posts. In some of those posts I link to <em>other</em> posts on my site. What's the easiest way of displaying those internal incoming links?</p> <p>Here's what it looks like:</p> <h2 id="code"><a href="https://shkspr.mobi/blog/2023/10/displaying-internal-linkbacks-on-wordpress/#code">Code</a></h2> <p>All we need to do is <a href="https://developer.wordpress.org/reference/classes/wp_query/#search-parameters">search WordPress</a> for the URl of the current page. Loop through the results. Then display those links.</p> <pre><code class="language-php">$the_query = new WP_Query( array( 's' => get_the_permalink(), // This post 'post_type' => 'post', // Only posts, not pages "posts_per_page" => "-1", // Get all results "order" => "ASC" // Oldest first ) ); // Nothing to do if there are no inbound links if ( !$the_query->have_posts() ) { return; } // Loop through the posts while ( $the_query->have_posts() ) { // Set it up $the_query->the_post(); $id = get_the_ID(); $title = esc_html( get_the_title() ); $url = get_the_permalink(); $comment_date = get_the_date( "c" ); $comment_year = get_the_date( "Y" ); // Get the thumbnail if ( has_post_thumbnail( $id) ) { $thumb = get_the_post_thumbnail( $rid, 'full', array( "class" => "related-post-img", "loading" => "lazy" // Lazy loading and other attributes ) ); } else { $thumb = null; } // Create the HTML for the incoming link echo <<<EOT <li> <a href="$url"> $thumb $title </a> <time datetime="$comment_date">$comment_year</time> </li> EOT; } </code></pre> <p>In order to reduce duplicates, you may also want to <a href="https://plugins.svn.wordpress.org/no-self-ping/tags/1.1.5/no-self-pings.php">disable self-ping</a>. Here's some code you can stick in your <code>functions.php</code>:</p> <pre><code class="language-php">function no_self_ping( &$links ) { $home = esc_url( home_url() ); // Process each link in the content and remove if it matches the current site URL foreach ( $links as $l => $link ) { if ( 0 === strpos( $link, $home ) ) { unset( $links[ $l ] ); } } } add_action( 'pre_ping', 'no_self_ping' ); </code></pre> </article> <article> <h1>Use WP CLI to find all blog posts without a featured image - two methods</h1> <p>@edent — Tue, 10 Oct 2023 11:34:15 +0000</p> <p>This uses <a href="https://developer.wordpress.org/cli/commands/shell/">the <code>wp shell</code> command</a>. It gives you an interactive prompt into which you can do various WordPress "things".</p> <p>One small annoyance is that it doesn't like multi-line entry. It treats every hit of the enter key as "plz run the codez" - so, at the end of this blog post, I've put the commands in copy-n-paste format.</p> <p>Once you've installed WP CLIP, go to the command line and run <code>wp shell</code>. You'll be greeted with an interactive prompt <code>wp></code></p> <h2 id="method-one-quick-search"><a href="https://shkspr.mobi/blog/2023/10/use-wp-cli-to-find-all-blog-posts-without-a-featured-image-two-methods/#method-one-quick-search">Method One - Quick Search</a></h2> <p>This command constructs a query which gets <em>all</em> posts, which have been published, where there is no thumbnail ID. Note - this isn't quite the same as not having a featured image.</p> <pre><code class="language-php">$args = array( 'post_type' => 'post', 'post_status' => array('publish'), 'posts_per_page'=> -1, 'meta_query' => array( array( 'key' => '_thumbnail_id', 'compare' => 'NOT EXISTS' ) ), ); </code></pre> <p>Next we run that query. It will dump quite a lot of information into the screen, we'll format it shortly.</p> <pre><code class="language-php">$query = new WP_Query( $args ); </code></pre> <p>Finally, we loop through all the posts the query has found and print them out in a nice format.</p> <pre><code class="language-php">$posts = $query->posts; foreach ( $posts as $post ) { echo $post->post_date . " " . $post->guid . " " . $post->post_title . "\n"; } </code></pre> <p>That will give you the date, link, and title of every post where there is no featured image set.</p> <h3 id="copy-and-paste-snippet"><a href="https://shkspr.mobi/blog/2023/10/use-wp-cli-to-find-all-blog-posts-without-a-featured-image-two-methods/#copy-and-paste-snippet">Copy and Paste Snippet</a></h3> <pre><code class="language-php">$args = array( 'post_type' => 'post', 'post_status' => array('publish'), 'posts_per_page'=> -1, 'meta_query' => array( array( 'key' => '_thumbnail_id', 'value' => '?', 'compare' => 'NOT EXISTS' ) ),); $query = new WP_Query( $args ); $posts = $query->posts; foreach ( $posts as $post ) { echo $post->post_date . " " . $post->guid . " " . $post->post_title . "\n"; } </code></pre> <h2 id="method-two-full-search"><a href="https://shkspr.mobi/blog/2023/10/use-wp-cli-to-find-all-blog-posts-without-a-featured-image-two-methods/#method-two-full-search">Method Two - Full Search</a></h2> <p>Sometimes the WordPress database can get a little confused. It will say there is a post thumbnail, but when you try to retrieve it, there's nothing there!</p> <p>This method is slightly slower if you have lots of posts. It goes through every single post and checks whether the featured image can be retrieved. If not it will let you know.</p> <pre><code class="language-php">$args = array( 'post_type' => 'post', 'post_status' => array('publish'), 'posts_per_page'=> -1, ); $posts = get_posts( $args ); foreach ( $posts => $post) { if( get_the_post_thumbnail( $post ) == "" ) { echo $post->post_date . " " . $post->guid . " " . $post->post_title . "\n"; } } </code></pre> <h3 id="copy-and-paste-snippet"><a href="https://shkspr.mobi/blog/2023/10/use-wp-cli-to-find-all-blog-posts-without-a-featured-image-two-methods/#copy-and-paste-snippet">Copy and Paste Snippet</a></h3> <pre><code class="language-php">foreach (get_posts( array( 'post_type' => 'post', 'post_status' => array('publish'), 'posts_per_page' => -1,) ) as $post) { if(get_the_post_thumbnail($post)== "") { echo $post->post_date . " " . $post->guid . " " . $post->post_title . "\n"; } } </code></pre> </article> <article> <h1>The minimal-div minimal-span philosophy of this blog</h1> <p>@edent — Sun, 01 Oct 2023 11:34:42 +0000</p> <p>If you've ever learned Mandarin Chinese, you'll know about "measure words". They're the sort of thing that trip up all new learners of the language. While 个 (gè) can be used as a generic measure word, using it everywhere makes you sound like an idiot (according to my old teacher). So you learn to use 个 for people, 包 for packets, and 根 for things which are long and thin.</p> <p>English has a similar construct. You might say "one <em>bunch</em> of flowers" or "two <em>glasses</em> of wine" or "three <em>bowls</em> of soup".</p> <p>You <em>could</em> say "one <em>thing</em> of flowers" or "two <em>things</em> of wines" or "three <em>things</em> of soups" but the measure words give much needed context and semantics.</p> <p>If you get it wrong and said to a publican "four mugs of beer please" they'd <em>probably</em> know what you meant but it could be a bit confusing.</p> <p>And isn't that very much like HTML?</p> <p>The language of the web gives us semantic elements for our markup. When you use <code><button></code> to draw a button on screen, the browser knows exactly what to expect, how to display the content, and what it should do. A search engine can extract meaning from the page. Users of assistive technology can be told that they're on a button. Everything is lovely!</p> <p>You don't have to do that, of course. You could use <code><div class="button" onclick="something()"></code> - with enough CSS and JS you'll have something which looks and acts more-or-less like a button. But you'll lose all the semantics which make life easier for browsers, search engines, assistive technologies, and anything else that a user uses to interact with your site.</p> <p>HTML has <em>dozens</em> of semantic elements. There's <code><address></code> for contact details, <code><time></code> for dates and times, <code><nav></code> for navigation elements.</p> <p>There are two main "generic" elements. <code><div></code> for blocks of stuff, and <code><span></code> for a short run of text. I find that most modern websites over-use these elements. I want to reiterate, there's nothing illegal or immoral about doing so; the web police aren't going to take you to gaol. I personally think that writing semantic HTML is easier to maintain, easier to understand, easier for accessibility, and easier for automatically extracting meaning.</p> <p>So, for a while now, I've been slowly working on my blog's theme in order to remove as many <code><div></code>s and <code><span></code>s as possible. I started out with a couple of hundred of each. I'm now down to about 35 of each - depending on which page you're on.</p> <p>Here are some of the problems I found.</p> <h2 id="semantic-wrapping-is-complicated"><a href="https://shkspr.mobi/blog/2023/10/the-minimal-div-minimal-span-philosophy-of-this-blog/#semantic-wrapping-is-complicated">Semantic wrapping is complicated</a></h2> <p>I use <a href="https://schema.org/">Schema.org</a> microdata in my HTML. For example, when a user has left a comment, I might indicate their name by using <code><span itemprop="name">Juliet Capulet</span></code></p> <p>Or, in the heading of a post I might use</p> <pre><code class="language-html">This post has <span itemprop="https://schema.org/commentCount">3</span> comments and is <span itemprop="https://schema.org/wordCount">400</span> words long </code></pre> <p>Because there's no HTML element like <code><commentcount></code> or <code><wordcount></code>, I have to wrap those numbers in <em>something</em> if I want to indicate the semantic content behind them. I could "cheat" and use something like <code><var></code> or <code><output></code> but they're as semantically irrelevant as <code><span></code>.</p> <p>Similarly, it's hard to do <a href="https://shkspr.mobi/blog/2022/04/semantic-comments-for-wordpress/">semantic comments for WordPress</a>.</p> <h2 id="some-things-are-just-things"><a href="https://shkspr.mobi/blog/2023/10/the-minimal-div-minimal-span-philosophy-of-this-blog/#some-things-are-just-things">Some things are just things</a></h2> <p>I have a large calendar at the bottom of every page showing my archives. Each calendar is its own "thing" and so is wrapped in a <code><div></code> which controls its style and layout. That group of calendars is also its own thing - <a href="https://front-end.social/@mia/111025056866652533">because <code><details></code> elements are weird</a>.</p> <p>They're inside a widget - which itself is inside of an <code><aside></code>.</p> <p>I was using a <code><table></code> layout for them, but it wasn't flexible and it ballooned the size of the DOM. Perhaps I should treat them as lists? At least then they'd be easier to skip?</p> <h2 id="wordpress-defaults"><a href="https://shkspr.mobi/blog/2023/10/the-minimal-div-minimal-span-philosophy-of-this-blog/#wordpress-defaults">WordPress defaults</a></h2> <p>All built in widgets in WordPress take the following form:</p> <pre><code class="language-html"><h2 class="widget-title">...</h2> <div> ... </div> </code></pre> <p>I don't think they <em>need</em> that extra <code><div></code>, although I can see why it might be necessary for styling.</p> <p>Similarly, <a href="https://developer.wordpress.org/reference/functions/wp_nav_menu/"><code>wp_nav_menu()</code></a> is encased in a <code><div></code> by default - although that can be removed.</p> <h2 id="whats-next"><a href="https://shkspr.mobi/blog/2023/10/the-minimal-div-minimal-span-philosophy-of-this-blog/#whats-next">What's Next?</a></h2> <p>I'm going to continue hacking away out of a sense of masochism. Perhaps the only person who will notice (other than me) is someone accidentally viewing the source of this page.</p>  <p>But I think it's worth it. There's that <a href="https://www.cnbc.com/2018/05/10/how-steve-jobs-developed-his-design-philosophy-for-apple.html">story about how the original Mac circuit board was laid out</a> so that, despite never being seen by normal people, it was part of the overall æsthetic. And I think that's what I'm going for - something that I can be satisfied with.</p> </article> <article> <h1>Who reads my blog?</h1> <p>@edent — Sun, 10 Sep 2023 11:34:41 +0000</p> <p>Hello! Thank you for reading what I write. Sorry to ask, but… <em>who are you?</em></p> <p>I was chatting to a friend about what it is like running a blog, finding new topics, keeping up with a daily schedule, moderating comments, etc. And they asked, quite reasonably, "who are your readers?"</p> <p>And, honestly, I have very little idea! The only analytics I have on here is basic WordPress JetPack statistics. I can see which posts are popular. I get a sense of which countries you are in. If you leave a comment, I know the name you choose to give. If you link back to my posts, I know what your website is.</p> <p>But, that's pretty much it. I don't know your age, height, gender, dietary needs, or the date of your last colonoscopy. Frankly, that's the way I like it! I write, you read. You don't have to pay me in fiat, crypto, or your personal data.</p> <p>It is <em>nice</em> if you subscribe and/or share my posts. But there's never going to be a big pop-up asking for your email address, or trying to make you sign in with a social network. I don't need to know <em>anything</em> about you.</p> <p>And yet… I'm curious!</p> <p>About 500 of you subscribe by email. A few thousand of you subscribe by RSS. Even more come via links from social media.</p> <p>If you're comfortable, I would love it if you <a href="https://shkspr.mobi/blog/2023/09/who-reads-my-blog/#reply-title">dropped a note in the comments of this post</a>. You can either just say "hello", or you can tell me why you read, or what you like, or what you'd like to see more of. Leave a link to your blog, if you have one. Or just say what part of the world you're from.</p> <p>So, who are you?</p> </article> <article> <h1>Build your own "On This Day" page for WordPress</h1> <p>@edent — Wed, 12 Jul 2023 11:34:10 +0000</p> <p>I blog. A <em>lot</em>. Too much really. One of the things I like to do is see what I was rambling on about this time last year. And the year before that. And so on.</p> <p>So, here's my <a href="https://shkspr.mobi/blog/on-this-day/">On This Day page</a> and here's how I built it.</p> <p><strong>WARNING</strong> Extremely quick and dirty code ahead!</p> <p>This allows you to add a shortcode like <code>[ edent_on_this_day ]</code> to a page and have it auto generate a list of posts you published on this day in previous years. You may need to exclude that page from your cache.</p> <p>Add these functions to your theme or to a new plugin:</p> <pre><code class="language-php">function edent_on_this_day_shortcode() { $today = getdate(); $args = array( 'date_query' => array( array( 'month' => $today['mon'], 'day' => $today['mday'], ), ), ); $query = new WP_Query( $args ); $posts = $query->get_posts(); $today = getdate(); $pubDate = date("D, d M Y") . " 00:00:00 GMT"; $output = "<h2>From the " . date("jS \of F") . " archives</h2>"; $output .= "<ul>"; foreach($posts as $post) { $title = $post->post_title; $id = $post->ID; $link = get_permalink($id); $date = $post->post_date; $postDate = date("D, d M Y") . " " . date("h:i:s O", strtotime($date)); // $thumb = get_the_post_thumbnail($id, 'full'); $archive = "" . date("Y", strtotime($date)) . ": "; // Only add an item if it is before *this year* if ( intval(date("Y", strtotime($date))) < intval($today['year']) ) { $output .= '<li><a href="' . htmlspecialchars($link) .'">'; $output .= html_entity_decode($archive . $title) . '</a></li>'; } } $output .= "</ul>"; return $output; } // Set up the shortcode function edent_on_this_day_shortcode_init() { add_shortcode( 'edent_on_this_day', 'edent_on_this_day_shortcode' ); } add_action( 'init', 'edent_on_this_day_shortcode_init' ); </code></pre> <p>I really can't be bothered to deal with WordPress's complicated plugin publishing system - so feel free to copy the above with or without attribution.</p> <p>I originally built this as an RSS feed - but decided recently that a regular HTML page was more useful. If you spot any bugs, <a href="https://github.com/edent/WordPress-On-This-Day-Plugin">you can contribute on GitHub</a>.</p> <p>Enjoy!</p> </article> </main></body></html>

blogging – Terence Eden’s Blog

Maximally Semantic Structure for a Blog Post

Footnotes

Alice says: