Coding with Jesse

Add Mastodon replies to your blog

December 27th, 2022

You can now comment on blog posts on Coding with Jesse! I turned off comments years ago, because I was getting tons of spam. But recently, with my return to social media, I decided to integrate Mastodon to give people a way to comment on and interact with my articles.

Initially, I wasn't sure how I would accomplish this. Mastodon has a ton of servers, and Mastodon search can only search for hashtags, so how would I know whether someone commented on my article? And how would I integrate it into my website?

I looked around at how some other blogs were handling this, and came across Webmentions, and particularly, It's a web standard for communicating interactions across web servers! Perfect!

I naively assumed that Mastodon would automatically hit my server with notifications any time someone favourited, boosted or replied to a post that contained a link to my site. But alas, Mastodon doesn't do that for privacy reasons (understandably).

Fortunately, I'm not the first one to run into this problem, and so there's a free service available that solves this problem. If you sign up for, you can link your social media accounts, including Mastodon, and will automatically send webmentions to your site whenever one of your posts contains a link to your site, and people reply to, boost or favourite your post. Essentially, your Mastodon posts become an anchor for all the interactions on your blog posts.

With these two services in hand, here's how you can integrate Mastodon into your website the way I did:

1. Sign in to

You need to sign in with your website URL, and your GitHub account. Also, your blog needs to link to that GitHub profile with either <a href="" rel="me"> or <link href="" rel="me">, to prove that you own the site.

2. Add webmention tags to your blog

When you sign in, go to Under Setup, you'll see these two link tags:

<link rel="webmention" href="" />
<link rel="pingback" href="" />

Copy these and paste them into the <head> on your blog. These will tell other services (like where they need to send webmentions for your posts.

Go to and, if you're like me, you'll want to click on "Cross-post to a Mastodon account", so that it'll integrate with your existing Mastodon account.

4. Post a link to a blog post on Mastodon

Try linking to your most recent blog post on Mastodon. If you already did this some time ago, will scan your posts looking for links. You can also feed it a URL to a specific Mastodon post so that it will discover it. will periodically poll your account looking for new interactions on these posts, and will send any new favourites, boosts or replies to

Note that your post doesn't count as a webmention - only the interactions on that post do. But you can reply to your own post as a way to trigger a webmention.

When I was setting this up, I was logged into both and, clicking the "Poll now" button on and eagerly looking for interactions to show up. You have to have some patience here as well, as both services have a bit of a delay.

Once you see some mentions show up on, you're ready to render them onto your blog.

5. Add the webmentions onto your website

Here's the trickier part. You'll need to hit the API and fetch the mentions for your blog post. You can do this server-side, if you want. My blog is static, so I needed to do this client side.

Since the results are paginated, you can only get back 100 at a time. I wrote this function to help me retrieve all the pages at once, and sort the results into chronological order:

async function getMentions(url) {
    let mentions = [];
    let page = 0;
    let perPage = 100;

    while (true) {
        const results = await fetch(
        ).then((r) => r.json());

        mentions = mentions.concat(results.children);

        if (results.children.length < perPage) {


    return mentions.sort((a, b) => ((a.published || a['wm-received']) < (b.published || b['wm-received']) ? -1 : 1));

Then, I used the results of this to pull out four things: the favourites, boosts, replies, and also a link to the original post where I can send other visitors to my blog if they want to "Discuss this article on Mastodon". Here's how that looks:

let link;
let favourites;
let boosts;
let replies;

const mentions = await getMentions(url);

if (mentions.length) {
    link = mentions
        // find mentions that contain my Mastodon URL
        .filter((m) => m.url.startsWith(''))
        // take the part before the hash
        .map(({ url }) => url.split('#')[0])
        // take the first one

    // use the wm-property to make lists of favourites, boosts & replies
    favourites = mentions.filter((m) => m['wm-property'] === 'like-of');
    boosts = mentions.filter((m) => m['wm-property'] === 'repost-of');
    replies = mentions.filter((m) => m['wm-property'] === 'in-reply-to');

Of course, you should replace the link to my profile with the link to your own. I'm taking the first mention (after sorting chronologically) that is interacting with one of my posts, and linking to that post URL.

With those in hand, you'll have everything you need to render the replies, boosts and favourites to your blog. My approach was to render just the avatars of everyone who boosted or favourited my post, and all the replies.

One thing to watch out for is that the content of each reply is HTML. To be safe (paranoid), I'm running the HTML through sanitize-html to make sure nobody can inject sketchy HTML into my site.

6. Allow people to share posts without mentions

For any posts that don't have any mentions, I added a different button, "Share this on Mastodon". When you click it, it runs this code, which prompts you for your Mastodon server (inspired by Advent of Code's share functionality):

const server = prompt('Mastodon Instance / Server Name?');

if (server) {
    // test if server looks like a domain
    if (!server.match(/^[^\s]+\.[^\s]+$/)) {
        alert('Invalid server name');

    const text = `"${post.title}" by @[email protected]\n\n${url}`;`https://${server}/share?text=${encodeURIComponent(text)}`);

Yay for Mastodon comments!

I'm really happy with how this turned out. To add some placeholders on my old blog posts, I posted some links to some of the more recent posts, so they interactions would have a place to live. For the older posts, I'm just relying on the share functionality.

I'm considering implementing some server-side functionality to replace either or in the future, so that the mentions live in my database instead of relying on a third-party service that may disappear one day. I think I could also skip the webmentions process by associating a Mastodon post URL with each blog post, and then using the Mastodon API of my server to periodically check for interactions and replies. Or maybe it could log in to my server and listen for notifications. But for now, this works really well.

So from now on, whenever I write a new blog post, like this one, I'm sure to share in on Mastodon and give a place for readers to ask questions or discuss the article. Check the end of this blog post to see how it all looks, and be sure to favourite, boost or reply to my Mastodon post so that you show up on the page as well!

Why I quit Twitter

March 21st, 2021

Update November 2022: Why I love Mastodon. Follow me at

I used to love Twitter. When I signed up in 2008, it was a new place to publicly talk with people from around the world. Over time, more people joined, and it became a great place to hear the latest news and gossip in the web development community. I enjoyed seeing famous people chatting and even roasting each other. It was exciting to hear rumours and see things unfold in real-time that would end up on the mainstream news. I'd spend a lot of time crafting tweets. Tweeting became part of my thought process, so that when something interesting in my life happened, I'd instantly start thinking of how to explain it in 140 characters.

Last year, that novelty wore off. I don't know if it was because of the increasingly divisive political environment in the USA, or the pandemic making everyone more stressed out and less patient, or if it was something that would've happened regardless. Every time I went on there, I'd come away with a bad taste in my mouth, angry or frustrated about one thing or another. I don't mean angry about injustices or world events, where the feeling is justified. I'm talking about being furious that somebody was wrong on the Internet!

Twitter started to remind me of one big comments section for the Internet, with everyone fighting about everything. People who I admired regularly get swept up in this hatred. One person vents their frustration over something, another tries to make a tasteless joke, others jump in to attack the replies, others jump in to defend, and on it goes.

I already stopped using Facebook years ago, and never got into Instagram or other platforms much, so Twitter had become the place I'd go on my phone when I had some spare time or just felt like zoning out for a while. I started to notice a pattern, that I would frequently tell my wife about things unfolding on Twitter, usually some big controversy that had everyone riled up. Whether I agreed or disagreed, I would get swept up in it. She was very patient to let me tell these stories, but would remind me that I don't have to share everything that happened on there.

The problem was, Twitter was taking up more and more of my thoughts and my mental energy. I would find myself thinking about these controversies and tweets in my free time, wondering if I should jump in with my opinion, but more often, I was just emotionally watching these things unfold from the sidelines, scared to be caught in the crossfire.

I finally decided to quit on Christmas morning. After opening presents from Santa and having Christmas breakfast, I habitually and unfortunately pulled out my phone and turned to Twitter for some heart-warming tweets. First thing I saw was a politician wishing everyone a happy holiday, and another politician replying to that with "Bite me". I couldn't believe it. I wanted to write back and call this politician out for being crass, tasteless and mean. But I realised there that then I would also be swept into this hate-fest as well, on a day where I should be focused on my family and having a lovely day. I decided right then that this would be the last time I read my feed on this hateful, toxic platform.

I decided that I don't need Twitter at all. I can't think of any real benefits I'd ever gained from using Twitter. I already have my blog, my newsletter and my YouTube and Twitch channels, where I can share my ideas and express myself. There's no good reason to continue to pour my energy into crafting content that ends up contributing to and supporting a private platform I don't even like.

The past few months have been wonderful. I installed a nice, simple blog reader called "Flym" on my phone, and subscribed to a bunch of web development blogs, some I had read on Google Reader back in the day, others were new to me. It's so much nicer to read longer, well-thought-out blog posts, that leave me feeling inspired, educated, and curious about the topics I'm interested in.

The one thing I'm kind of missing is the ability to write very short content to share a small thing I'm excited about or find funny. I figure that I'm better off to put that creative energy into blogging and writing newsletters more often, even if that means writing shorter posts, though probably more than 140 or 280 characters at a time.

Anyway, I just wanted to get off my chest all the reasons you hopefully won't find me active on Twitter anymore, and let you know that you'll likely find me writing blog posts on here more often.

Here are some other web development bloggers I've been enjoying lately, and I'm eager to find some more. If you also have a blog, I'd love to hear from you so I can subscribe to your RSS feed in my blog reader!

Blog Tipping

June 1st, 2006

Joe at the Working at Home on the Internet blog just blog-tipped me, so I thought I'd pass on the Link Love. The idea of Blog Tipping is that on the first of the month, you pick three blogs you read and offer 3 compliments and 1 tip. So here goes.


  1. I love that you've gone back to drawing cartoons full force. It's great to see people doing what they love.
  2. Your Microbrand concept is an inspiration to people everywhere who are trying to understand and find their place in this Internet-based economy.
  3. I'm really impressed with your work for Stormhoek. Even though you're alone on the frontier of marketing you're doing a great job.

tip: Perhaps it's a result of your busy schedule, but I'd like to see more longer posts with more of your thoughts and less links now and then.

Friendly Bit

  1. While no other web dev blogs seem to be discussing real, tangible web development concepts, yours just keeps on sticking to the point. That's a real inspiration for me.
  2. Your topics always give me something I can use right away, change the way I look at something, or give me something I know I'll be able to use in the future.
  3. I love how simple and straightforward your design is, with just a few categories and comments along the side.

tip: This is hard. I'd love it if you posted more often, but not if this degrades the quality of your post. Otherwise, just keep doin' what you're doin'.


  1. Your topics are always very interesting, often addressing a topic in a new way that just isn't done often enough.
  2. You always have a great sense of humour (even if some of your readers don't understand it).
  3. Your design is really great, just barely bordering on Web 2.0 without crossing over. :)

tip: Start posting again! Two in the past three months?! You used to be almost daily!

Okay, now you all have to pass the link love on.

Your voice

April 25th, 2006

I was worried at first when I started my personal blog. I knew that all my friends and family would be reading it. How would I write a blog post so that it would be suitable for both my grandmother and my long time friends?

I was even more worried when I started this blog. I was going to have some kind of professional persona on top of my personal persona. Now my friends and family could read this site, and strangers and colleagues could read my personal site. How could I possibly express myself consistently to such a wide range of people?!

Well, it turned out to be not a big deal at all. It forced me to do something pretty great: it forced me to be myself. It forced me to be honest and transparent. I can't pretend to be something I'm not, because anybody can call me on it. Not on this site, nor on my personal site.

It took some time to get used to it, I suppose. I shared some things on my personal site I wouldn't normally share with everyone, but afterwards it was totally normal. I've also expressed ideas on here I wouldn't normally talk about with friends and family and I'm glad I've done it.

So when people tell you to "find your voice" when writing, they're not suggesting you try to create a brand new voice. Instead, you need to find your voice, the one true voice inside you, and share it with the world.

5 things every web site can learn from blogs

January 14th, 2006

Blogs are here to stay. However, I don't believe every web site needs to have a blog to benefit from the way blogs have changed the Internet. Here are five things blogs have taught us that we can use to improve all web sites:

  1. Update regularly

    Many web pages have some kind of "News" or "What's New" section. Most of them never seem to change. Blogs essentially took this section and made it the centre of the entire web site. Things are always changing and events are happening. The best part of the web is how up-to-date it can be. If something important is happening, and there is nothing about it on your web site, your visitors won't trust your web site as a source of information.

  2. Let visitors subscribe

    Blogs didn't invent subscriptions, but they've certainly proven they work. Long outdated are the phrases "Bookmark this site", "Under Construction" and "Check back soon". Every web site is changing and being updated. Visitors don't have the time to check back. You need to offer a way for them to subscribe. RSS feeds are certainly the new standard for subscriptions, though E-mail updates are still relevant for those who don't use RSS.

  3. Speak with a human voice

    Blogs aren't written in buzzword-filled meaningless marketing speak. They're written in the same language people use to talk to each other. The kind of language that people actually want to read. By changing the language of web sites, you not only make your web site more friendly, you make it easier to understand. If you really have something worth saying, be direct and clear about it. If not, why would you bother writing anything at all?

  4. Get personal

    Blogs don't hide the people behind the web site. In fact, that may be their strongest attraction. The Internet is changing the voice of companies whether they embrace it or not. For example, Robert Scoble's blog has become the voice of Microsoft. His blog is honest, admitting where Microsoft fails, where it needs to improve, and what its true motives are. It's time for the people behind web sites to come out and tell their stories.

  5. Let visitors discuss

    People need a chance to respond and add to things they read on the Internet. Most blogs give visitors a chance to discuss in comments and trackbacks. Where comments and trackbacks aren't appropriate, wikis and forums fill in the void. If your web site doesn't give a chance for visitors to contribute and share feedback (whether it's positive or negative), they will do this on their own blogs. Offering a place for the visitors of your site to come together and share feedback builds community, trust, and lets your site evolve in response to what people want.