Zach’s ugly mug (his face)

Zach Leatherman

Render Snarky Comments in Comic Sans

June 07, 2019 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 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

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 stephanis 🦹🏻‍♂️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:

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)