Zachโ€™s ugly mug (his face) Zach Leatherman

Render Snarky Comments in Comic Sans

June 07, 2019 4,228 Views Tagged: Eleventy

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 at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He created IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 72 talks in nine different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS.

< Newer
Week Notes โ„–2 ending 7 June 2019
Older >
Week Notes โ„–1 ending 24 May 2019

66 Reposts

Chris HeilmannMax BรถckknutAndy BellDrew PowersDave ๐ŸงฑGunnar BittersmannNickMasataka YakuraChris Enns ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ปDave Rupert๐”ฝ๐• ๐•ฆ๐•ฃ ๐”ผ๐•ช๐•–๐•คFynn BeckerEvo TerraNate HeagyJerry JonesDries Buytaertnitish chopraTyler StickaOld Man VandeheyAnneke SinnemaMatt BiilmannMichael Head@remฮ”NDRฮžWjarรณn barendsKrzysztof Hankiewicz ๐Ÿณ๏ธโ€๐ŸŒˆ โ˜•๏ธ ๐ŸŽฎ ๐Ÿ“บ๐Ÿฆ„Bruce LawsonDavid BissetMark LennoxBastien CalouBill ๐Ÿป๐Ÿณ๏ธโ€๐ŸŒˆ๐Ÿ’•Johan HalseAdactio LinksIndieWeb Avatar for https://www.alvinashcraft.comScrappyGullMediaCรฉsar CรณrcolesIndieWeb Avatar for https://adactio.comadminhellop2hIndieWeb Avatar for https://www.instant-web-site-tools.comFinest Design LTDIndieWeb Avatar for https://jsobject.infoIndieWeb Avatar for https://blog.oyewolet.comDakshraj EnterpriseWelcomedwelling.comBartek LubowskiChuck ReynoldsIndieWeb Avatar for https://dinezh.comfreshmadeMalibu IT LabsHelge JohnsenAnimadioKim LarsenBloopixFinest Design LTDIndieWeb Avatar for http://browserzone.comIndieWeb Avatar for https://nexstair.comIndieWeb Avatar for https://www.qreativbox.comIndieWeb Avatar for https://mashupdesign.comFullstack DeveloperArturo WibawaHartmut GlรผckerIndieWeb Avatar for http://news.twentyhour.comRosca BogdanLoรฏc Goyet โš›๏ธ

147 Likes

gRegor MorrillSebastiaan AndewegGulshan Kumar ๐Ÿ‡ฎ๐Ÿ‡ณJake DohmMark LennoxPascal BirchlermikeDave SmythnickPatrick KettnerShalinigeorge ๏ฌ†ephanis ๐Ÿฆน๐Ÿปโ€โ™‚๏ธBenNik BaileycraigOsvaldo Maria ๐Ÿ‡ฒ๐Ÿ‡ฟmarkus staabKenneth LoveKrzysztof Hankiewicz ๐Ÿณ๏ธโ€๐ŸŒˆ โ˜•๏ธ ๐ŸŽฎ ๐Ÿ“บ ๐Ÿฆ„Markus Oberlehner ๐Ÿ‡ช๐Ÿ‡บNoah Blon๐Ÿ‘คLara LittlefieldTodd ParkerAndrewmike mcbrideShawMattPayneOrgKevin SheffieldRiccardo Erra๐—ต๐—ฒ๐—ป๐—ฟ๐˜† ๐Ÿ’— ๐Ÿ’œ ๐Ÿ’™Jacob BerthelsenFilip WeidemannHadeeb FarhanPatrick Arminio ๐Ÿ“tablatronixฮ”NDRฮžWJamie McElwainIndieWeb Avatar for https://keithjgrant.comCharlieMattia AstorinoGiulia ChiolaCarolynmar 1st๐š๐š‘๐šŽ-๐šœ๐š’๐š–๐š’๐šŠ๐š— (berfday boi2day ๐ŸŽˆ )Melissa McEwenJonathan KingstonJoel G Goodmanemmett naughtonKyle MitofskyTobi D.Ben SevenXimena Vf.ScrappyGullMedianystudio107Thomas BassettoLetra Studionietonfirall you need is an arrayHorlaesMilica MihajlijaJeremy SwinnenAmelia Bellamy-RoydsPeteKanitkorn SujautraNestor VeraThomas GrinderslevPeter ThostesonSid VishnoiKyle YoungGabor LenardJulien BMarshall ThompsonSophie ShepherdMiguelJร˜โฑคฤโ‚ณโ‚ฆ ๐Ÿ’€ ฤร˜เธฟโ‚ดร˜โ‚ฆKT Coope ๐Ÿ@remmichapixelcthos100% Fresh. โœจ Drinks water. ๐Ÿšฐ๐Ÿ”ฅ Honza ๐Ÿ”ฅWillson SmithZack BoehmMatthias OttMatt BiilmannKyle MurphyRebecca Stavick ๐Ÿค˜๐ŸผGregory 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 ChouChris Burnell

2 Bookmarks

IndieWeb Avatar for https://aaronparecki.com IndieWeb Avatar for https://adactio.com
13 Comments
  1. James Peters

    @sirjamesp

    cRimiNal

  2. chaddattilio

    @chaddattilio

    The random capitalization makes it look like a Trump tweet.

  3. Zach Leatherman

    @zachleat

    Who? (อกยฐ อœส– อกยฐ)

  4. Evan Plaice

    @evanplaice

  5. Tyler Sticka

    @tylersticka

    For some reason I want the default avatar to be Ralph Wiggumโ€ฆ

  6. cthos

    @cthos

    ZACH. ๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐Ÿ‘๐ŸŽ‰

  7. Jeremy Swinnen

    @jereswinnen

    TotaLLy GonnA sTeaL THIS foR MY bLOg ๐Ÿ˜‰

  8. Horlaes

    @Horlaes

    Can I use this on WordPress?

  9. Zach Leatherman

    @zachleat

    Sorryโ€”no! Someone would have to adapt the approach to work as a WordPress plugin

  10. nystudio107

    @nystudio107

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

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

  12. Phil Hawksworth

    @philhawksworth

    Lolololol

  13. Dave ๐Ÿงฑ

    @DavidDarnes

    I mean half of the code is right here zachleat.com/web/snarky/

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

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)