Zach’s ugly mug (his face)

Zach Leatherman

Render Snarky Comments in Comic Sans

June 07, 2019 #2 Popular

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:

  1. Jeez Louise Disqus

    22 Feb 2015 at 12:03PM

    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:

    1. Jeez Louise Disqus

      22 Feb 2015 at 12:03PM

      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?

      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.

      21 Retweets

      ScrappyGullMediaJohan HalseBill 🐻🏳️‍🌈💕Mark LennoxBruce LawsonKrzysztof Hankiewicz 🏳️‍🌈 ☕️ 🎮 📺🦄ΔNDRΞW@remMichael HeadMatt BiilmannAnneke SinnemaTyler StickaJerry JonesNate HeagyFynn Becker𝔽𝕠𝕦𝕣 𝔼𝕪𝕖𝕤Masataka YakuraNickGunnar BittersmannDrew Powersknut

      131 Likes

      ScrappyGullMedianystudio107Thomas BassettoLetra Studionietonfirall you need is an arrayHorlaesMilica MihajlijaJeremy SwinnenAmelia Bellamy-RoydsPeteKanitkorn SujautraNestor VeraThomas GrinderslevPeter ThostesonSid VishnoiKyle YoungGabor LenardJulien BMarshall ThompsonSophie ShepherdGulshan Kumar 🇮🇳Jake DohmMark LennoxPascal BirchlermikeDave SmythnickPatrick KettnerShalinigeorge stephanis 🦹🏻‍♂️BenNik BaileycraigSebastiaan AndewegOsvaldo Maria 🇲🇿Kenneth Lovemarkus staabKrzysztof Hankiewicz 🏳️‍🌈 ☕️ 🎮 📺 🦄Markus Oberlehner 🇪🇺Noah Blon👤Lara LittlefieldTodd ParkerAndrewmike mcbrideShawMattPayneOrgKevin SheffieldRiccardo Erra𝗵𝗲𝗻𝗿𝘆 💗 💜 💙Jacob BerthelsenFilip WeidemannHadeeb FarhanPatrick Arminio 🍓tablatronixΔNDRΞWJamie McElwainMiguelJØⱤĐ₳₦ 💀 ĐØ฿₴Ø₦KT Coope 🐝@remmichapixelcthos100% Fresh. ✨ Drinks water. 🚰🔥 Honza 🔥Willson SmithZack BoehmMatthias OttMatt BiilmannKyle MurphyRebecca Stavick 🤘🏼gRegor MorrillFrancisGregory CovfefeavellarWilliam RandolphAnneke Sinnema✨ JoëlRobin RendlePeter HironakaJoel FarrisMichael ScharnaglpamGradyTyler StickaMarie MosleyJerry JonesCurtis FlothIain van der WielEvan PlaiceReino ZuppurLuke 👨🏽‍💻Jordan MooreJon ClarkArmel Pingault𝔽𝕠𝕦𝕣 𝔼𝕪𝕖𝕤Matt RixKeenan PayneteamtraveljapanMike AparicioRyan GroveAndrew JohnsonMasataka YakuraJamis CharlesMarkus Gebka 🏕️Josh VickersonJeff LembeckBlake Mattos// Gabynils binder 🏳️‍🌈FIREBAEJustin ConwaychaddattilioAndrea PudduJoelAdrian D. AlvarezSean McP 🙌nathan phillipsintrascendenteCara is a KittyknutChris RuppelCed 💣Sam PottsChristian SchaeferJuan FernandesChris Perry #FBPE 🇪🇺an alec abroad: berlin editionMax BöckAndrew Chou
      11 Replies
      1. Zach Leatherman

        Zach Leatherman @zachleat #

        NaW Not aT ALl—LooKS greAT! onE THinG I AlSo do Is ADd AnoThEr CLasS tO SeT a fiXED SizE to tHaT laBeL when EitHer LIst wraPs So THe FiRst Line ALIgNs WitH ThE rEST:

      2. nystudio107

        nystudio107 @nystudio107 #

        Hope you don't mind I nicked some of your CSS? devmode.fm/episodes/webpa… (scroll down)

      3. Zach Leatherman

        Zach Leatherman @zachleat #

        sOrRY—NO! SOMEonE woULD HAVE tO adapT tHE aPprOaCH tO wOrk AS a worDpREss pLUGIN

      4. Horlaes

        Horlaes @Horlaes #

        Can I use this on WordPress?

      5. Jeremy Swinnen

        Jeremy Swinnen @jereswinnen #

        tOTALLy gonNa StEAL THIS fOR my bLog 😉

      6. ZACH. 👏👏👏👏👏👏👏👏👏👏👏🎉

      7. Tyler Sticka

        Tyler Sticka @tylersticka #

        For some reason I want the default avatar to be Ralph Wiggum…

      8. Evan Plaice

        Evan Plaice @evanplaice #

      9. Zach Leatherman

        Zach Leatherman @zachleat #

        Who? (͡° ͜ʖ ͡°)

      10. chaddattilio

        chaddattilio @chaddattilio #

        The random capitalization makes it look like a Trump tweet.

      11. James Peters

        James Peters @sirjamesp #

        cRIMINAl

        16 Mentions
        1. adactio.com #

        2. www.alvinashcraft.com #

        3. Adactio Links

          Adactio Links @adactioLinks #

          Render Snarky Comments in Comic Sans—zachleat.com zachleat.com/web/snarky/

        4. Bastien Calou

          Bastien Calou @DctStrangelove #

          Utiliser "l'analyse du sentiment" pour afficher les messages négatifs en Comic Sans MS. #evilorgenius zachleat.com/web/snarky/

        5. David Bisset

          David Bisset @dimensionmedia #

          sOMeOnE SHOUld maKe This is A #woRDprESS pluGIN aND SENd it To @wPTavErn.* * - I apoLogIzE TO @jEFFr0 fOr ThiS TwEET.

        6. jarón barends

          jarón barends @jaronbarends #

          Wat een geweldig idee: negatieve comments veranderen in Comc Sans met een mix van upper- en lowercase

        7. Old Man Vandehey

          Old Man Vandehey @spaceninja #

          Oh, this is brilliant zachleat.com/web/snarky/

        8. nitish chopra

          nitish chopra @nitishchpr #

          Render snarky comments in Comic Sans zachleat.com/web/snarky/ #brilliant #happyfriday /cc zachleat

        9. Dries Buytaert

          Dries Buytaert @Dries #

          Render snarky comments in Comic Sans zachleat.com/web/snarky/ #brilliant #happyfriday /cc @zachleat

        10. Evo Terra

          Evo Terra @evoterra #

          Years ago, I installed something called "The Douchebag Plugin" on one of my sites in response to a troll I couldn't shake. (If you're still out there, Spork: 🖕). But I kinda like this better:

        11. Dave Rupert

          Dave Rupert @davatron5000 #

          This marvelous idea + @reichenstein’s idea that bots should be set in monospace is the web I want.

        12. Chris Enns 👨🏻‍💻

          Chris Enns 👨🏻‍💻 @iChris #

          This is brilliant and all sites should do it.

        13. Dave 🧱

          Dave 🧱 @DavidDarnes #

          zach shARing ANOtHEr pIeCE of WORk thAT MAKes Me QueStion Why It toOK mE so LoNg tO FOllow hIm

        14. Andy Bell

          Andy Bell @andybelldesign #

          > “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.” I love this.  zachleat.com/web/snarky/ andy-bell.design/links/188/

        15. Max Böck

          Max Böck @mxbck #

          ❤️ love the "mocking spongebob" case. brilliant.

        16. Chris Heilmann

          Chris Heilmann @codepo8 #

          Render Snarky Comments in Comic Sans zachleat.com/web/snarky/