Render Snarky Comments in Comic Sans

May 22, 2024 Update: I ended up removing this feature from the blog, there were too many false positives!

I had the pleasure of attending an IndieWebCamp before the amazing Beyond Tellerrand conference a few weeks back and I’m still buzzing from the experience.

I can’t really express how meaningful this experience was to me. An antithesis to the rat race of social media, IndieWebCamp was a roomful of kindred spirits that care about the web and their own websites and hosting their own content. It felt like the Google Reader days again, when everyone was blogging and writing on their own sites. I dunno if you can tell but I loved it. If you get the chance to attend one of these events, jump on it (I really want to run one in Omaha 👀).

Webmentions, Disqus, Wordpress

At the event I got a working example of webmentions going on my personal web site. I already had a static copy of my old Disqus comments that I’d exported (which included copies of old Wordpress comments that I’d imported into Disqus 😎).

Webmentions are made possible for static web sites when you use webmention.io, a service to log incoming entries. Another service, Bridgy, crawls social networking sites for mentions of my site and sends those over to webmention.io automatically.

If I’ve already lost you, luckily Max Böck wrote up a lovely tutorial on how to do this using Eleventy (his site is amazing, too). Max also created an eleventy-webmentions starter project which has all the code for this. Hopefully we can get some form of this merged back into the upstream eleventy-base-blog too.

You can see an example of how the webmentions look on my site at one of my recent blog posts: Google Fonts is Adding font-display.

Sentiment Analysis

Hosting my own content and comments allows me to be a bit more creative with it. So I decided to take this a step further and have a little fun with negative comments.

First, how do we find out if a comment is negative? Let’s try to use Natural, a plugin on npm. I added a Liquid filter to my Eleventy configuration file to analyze text and spit out a sentiment value. 0 is neutral, < 0 is negative, and > 0 is positive. Note that this natural language processing isn’t 100% (sometimes I’ll get a false positive) but this is just a fun demo on my site.

const Natural = require('natural');
const analyze = new Natural.SentimentAnalyzer("English", Natural.PorterStemmer, "afinn");

module.exports = function(eleventyConfig) {
    eleventyConfig.addLiquidFilter("getSentimentValue", function(content) {
        if( content ) {
            const tokenizer = new Natural.WordTokenizer();
            return analyze.getSentiment(tokenizer.tokenize(content));
        }

        return 0;
    });
};

And then in my Liquid template, I use this integer value to add a static-comments-reply-salty class:

{% assign sentiment = webmention.content.text | getSentimentValue %}
<li class="static-comments-reply{% if sentiment < 0 %} static-comments-reply-salty{% endif %}">
    …

And then in my stylesheet, I use this class to opt-into a lovely stack of Comic Sans, Chalkboard, and of course a fantasy fallback for kicks:

.static-comments-reply-salty {
    font-family: Comic Sans MS, Chalkboard SE, fantasy;
}

As extra credit, I also used the random-case plugin to mODifY tHe TeXt (at David Darnes excellent recommendation).

How does it look?

This was taken from a real comment on my site.

Before:

After:

This isn’t intended to be a hot-take on Comic Sans. Instead it’s meant to change the tone of the negativity to make it sound like a clown is yelling at a kid’s birthday party.