Zach’s ugly mug (his face)

Zach Leatherman

Render Snarky Comments in Comic Sans

June 06, 2019

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.

      Zach’s ugly mug (his face)

      Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

      Previous
      Week Notes №2 ending 7 June 2019
      Next
      Week Notes №1 ending 24 May 2019

      68 Retweets

      Loïc Goyet ⚛️Rosca BogdanHartmut GlückerArturo WibawaFullstack DeveloperadminAdminFinest Design LTDBloopixKim LarsenAnimadioHelge JohnsenMalibu IT LabsfreshmadeChuck ReynoldsBartek LubowskiWelcomedwelling.comDakshraj EnterpriseAdminfeedlyFinest Design LTDadminhellop2hCésar CórcolesScrappyGullMediaAdactio LinksJohan HalseBill 🐻🏳️‍🌈💕Bastien CalouMark LennoxDavid BissetBruce LawsonKrzysztof Hankiewicz 🏳️‍🌈 ☕️ 🎮 📺🦄jarón barendsΔNDRΞW@remMichael HeadMatt BiilmannAnneke SinnemaOld Man VandeheyTyler Stickanitish chopraDries BuytaertJerry JonesNate HeagyEvo TerraFynn Becker𝔽𝕠𝕦𝕣 𝔼𝕪𝕖𝕤Dave RupertChris Enns 👨🏻‍💻Masataka YakuraNickGunnar BittersmannDave 🧱Drew PowersAndy BellknutMax BöckChris Heilmann

      147 Likes

      CharlieMattia AstorinoGiulia ChiolaCarolynmar 1st𝚝𝚑𝚎-𝚜𝚒𝚖𝚒𝚊𝚗 (berfday boi2day 🎈 )Melissa McEwenJonathan KingstonJoel G Goodmanemmett naughtonKyle MitofskyTobi D.Ben SevenXimena Vf.Chris BurnellScrappyGullMedianystudio107Thomas 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 🇲🇿markus staabKenneth LoveKrzysztof 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 MorrillGregory CovfefeFrancisavellarWilliam RandolphAnneke Sinnema✨ JoëlRobin RendleJoel FarrisPeter HironakaMichael ScharnaglpamGradyTyler StickaMarie MosleyJerry JonesCurtis FlothIain van der WielEvan PlaiceReino ZuppurJordan MooreLuke 👨🏽‍💻Jon 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 KittyChris RuppelknutCed 💣Sam PottsChristian SchaeferJuan FernandesChris Perry #FBPE 🇪🇺an alec abroad: berlin editionMax BöckAndrew Chou
      2 Bookmarks
      1. Jeremy Keith

        Jeremy Keith

        Render Snarky Comments in Comic Sans—zachleat.com June 10th, 2019 Sounds like Zach had a great time at Indie Web Camp Düsseldorf: 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 … Truncated

      2. Aaron Parecki

        Aaron Parecki

      12 Replies
      1. Phil Hawksworth

        @philhawksworth

        Lolololol

      2. 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:

      3. nystudio107

        @nystudio107

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

      4. Zach Leatherman

        @zachleat

        Sorry—no! Someone would have to adapt the approach to work as a WordPress plugin

      5. Horlaes

        @Horlaes

        Can I use this on WordPress?

      6. Jeremy Swinnen

        @jereswinnen

        totaLlY GoNNA steaL ThIS foR my bLOg 😉

      7. ZACH. 👏👏👏👏👏👏👏👏👏👏👏🎉

      8. Tyler Sticka

        @tylersticka

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

      9. Evan Plaice

        @evanplaice

      10. Zach Leatherman

        @zachleat

        Who? (͡° ͜ʖ ͡°)

      11. chaddattilio

        @chaddattilio

        The random capitalization makes it look like a Trump tweet.

      12. James Peters

        @sirjamesp

        crIMiNAl

        Social Card Image Preview

        This is what will show up when you share this post on Social Media:

        How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)