Render Snarky Comments in Comic Sans
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:
-
Hey man, you need to fix this or take it down. Don't you see how many people are complaining that it doesn't work?
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.
13 Comments
@chaddattilio
The random capitalization makes it look like a Trump tweet.
@zachleat
Who? (อกยฐ อส อกยฐ)
@evanplaice
@tylersticka
For some reason I want the default avatar to be Ralph Wiggumโฆ
@cthos
ZACH. ๐๐๐๐๐๐๐๐๐๐๐๐
@Horlaes
Can I use this on WordPress?
@zachleat
Sorryโno! Someone would have to adapt the approach to work as a WordPress plugin
@nystudio107
Hope you don't mind I nicked some of your CSS? devmode.fm/episodes/webpaโฆ (scroll down)
@philhawksworth
Lolololol
@DavidDarnes
I mean half of the code is right here zachleat.com/web/snarky/