Zach’s ugly mug (his face)

Zach Leatherman

Render Snarky Comments in Comic Sans

June 07, 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 Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

      Previous
      The Crushing Weight of the Facepile
      Next
      The Co-opetition of Team Web

      21 Retweets

      ScrappyGullMediaJohan HalseBill 🐻🏳️‍🌈💕Mark LennoxBruce LawsonKrzysztof Hankiewicz 🏳️‍🌈 ☕️ 🎮 📺🦄ΔNDRΞW@remMichael HeadMatt BiilmannAnneke SinnemaTyler StickaJerry JonesNate HeagyFynn Becker𝔽𝕠𝕦𝕣 𝔼𝕪𝕖𝕤Masataka YakuraNickGunnar BittersmannDrew Powersknut
      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 🇲🇿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 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 🙌intrascendentenathan phillipsCara is a KittyknutChris RuppelCed 💣Sam PottsChristian SchaeferJuan FernandesChris Perry #FBPE 🇪🇺an alec abroad: berlin editionAndrew ChouMax Böck
      2 Bookmarks
      1. Jeremy Keith

        Jeremy Keith https://adactio.com/ #

        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 https://aaronparecki.com/ #

      12 Replies
      1. Phil Hawksworth

        Phil Hawksworth @philhawksworth #

        Lolololol

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

      3. nystudio107

        nystudio107 @nystudio107 #

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

      4. Zach Leatherman

        Zach Leatherman @zachleat #

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

      5. Horlaes

        Horlaes @Horlaes #

        Can I use this on WordPress?

      6. Jeremy Swinnen

        Jeremy Swinnen @jereswinnen #

        Totally goNna sTEal this fOr MY Blog 😉

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

      8. Tyler Sticka

        Tyler Sticka @tylersticka #

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

      9. Evan Plaice

        Evan Plaice @evanplaice #

      10. Zach Leatherman

        Zach Leatherman @zachleat #

        Who? (͡° ͜ʖ ͡°)

      11. chaddattilio

        chaddattilio @chaddattilio #

        The random capitalization makes it look like a Trump tweet.

      12. James Peters

        James Peters @sirjamesp #

        CriMINAL

        47 Mentions
        1. Loïc Goyet ⚛️

          Loïc Goyet ⚛️ @loicgoyet #

          📖 Render snarky comments in Comic Sans. Such a brilliant and funny idea that's avoid an aggressive strike back on a troll (which is of course the worst) 🔗 zachleat.com/web/snarky/ 👤 @zachleat

        2. Rosca Bogdan

          Rosca Bogdan @roscabgdn #

          Daca tot vrei sa-i faci de caco pe cei care lasa comentarii aiurea/hate la tine pe blog, nu le ascunde! Fa-le sa apara scrise cu Comic Sans! 😂😂😂zachleat.com/web/snarky/

        3. news.twentyhour.com #

        4. Hartmut Glücker

          Hartmut Glücker @MisterMuti #

          zachleat.com/web/snarky/ is great, reminded me of the good times at university; also glad there's npm/JS interfaces for NLP now. (FYI @MedienInfRgb @8urghardt @delsweil)

        5. Arturo Wibawa

          Arturo Wibawa @agwibawa #

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

        6. Fullstack Developer

          Fullstack Developer @FullstackDevJS #

          Render Snarky Comments in Comic Sans #Frontend #devTips #Devlife #Design #Css #HTML zachleat.com/web/snarky/

        7. www.qreativbox.com #

        8. admin https://nexstair.com/author/admin/ #

          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… Truncated

        9. Admin http://browserzone.com/author/adminbz/ #

        10. Finest Design LTD

          Finest Design LTD @Finest_DesignUK #

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

        11. Bloopix

          Bloopix @BloopixDesign #

          bloopix.design — Render Snarky Comments in Comic Sans zachleat.com/web/snarky/?ut…

        12. Kim Larsen

          Kim Larsen @kimlundinlarsen #

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

        13. Animadio

          Animadio @animadio #

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

        14. Helge Johnsen

          Helge Johnsen @sjsd #

          Dette er en helt genial idé: ta de dårlige kommentarene og vis de med Comic Sans. zachleat.com/web/snarky/

        15. Malibu IT Labs

          Malibu IT Labs @it_malibu #

          Render Snarky Comments in Comic Sans: Hilarious idea by Zach Leatherman. To test if a comment is "snarky" or not, there is an npm package up to the task. On this site, we generally just delete snarky comments, but I still run a WordPress plugin that… zachleat.com/web/snarky/?ut…

        16. freshmade

          freshmade @itsfreshmade #

          Render Snarky Comments in Comic Sans zachleat.com/web/snarky/?ut… via @chriscoyier

        17. dinezh.com #

          Show original post 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… Truncated

        18. mashupdesign.com #

        19. Chuck Reynolds

          Chuck Reynolds @ChuckReynolds #

          Based on sentiment analysis, render snarky comments in comic sans. lol zachleat.com/web/snarky/

        20. Bartek Lubowski

          Bartek Lubowski @LubowskiBartek #

          Render Snarky Comments in Comic Sans—zachleat.com #WebDesign #atomicdesign zachleat.com/web/snarky/?ut…

        21. isokunoffice.club #

          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… Truncated

        22. Welcomedwelling.com

          Welcomedwelling.com @welcomedwelling #

          Render Snarky Comments in Comic Sans—zachleat.com #WebDesign #atomicdesign zachleat.com/web/snarky/?ut…

        23. Dakshraj Enterprise

          Dakshraj Enterprise @DakshrajIndia #

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

        24. Admin #

        25. www.webmastersgallery.com #

        26. feedly https://jsobject.info/author/feedly/ #

          Hilarious idea by Zach Leatherman. To test if a comment is “snarky" or not, there is an npm package up to the task. On this site, we generally just delete snarky comments, but I still run a WordPress plugin that allows me to "feature" or "bury" comments. It’s old but it still wo… Truncated

        27. Finest Design LTD

          Finest Design LTD @Finest_DesignUK #

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

        28. www.instant-web-site-tools.com #

        29. hellop2h

          hellop2h http://p2h.io/psd2html/author/hellop2h/ #

          Hilarious idea by Zach Leatherman. To test if a comment is “snarky” or not, there is an npm package up to the task. On this site, we generally just delete snarky comments, but I still run a WordPress plugin that allows me to “feature” or “bury” comments. It’s old but it still wo… Truncated

        30. admin

          admin http://nordis.design/news/author/admin/ #

          Hilarious idea by Zach Leatherman. To test if a comment is “snarky” or not, there is an npm package up to the task. On this site, we generally just delete snarky comments, but I still run a WordPress plugin that allows me to “feature” or “bury” comments. It’s old but it still wo… Truncated

        31. adactio.com #

        32. César Córcoles

          César Córcoles @chechar #

          @sOFTModelinG HERe'S AN idEA tO EXTend YOUr toXICItY dEtEctor for wORDpresS ;-)

        33. www.alvinashcraft.com #

        34. Adactio Links

          Adactio Links @adactioLinks #

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

        35. 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/

        36. 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.

        37. jarón barends

          jarón barends @jaronbarends #

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

        38. Old Man Vandehey

          Old Man Vandehey @spaceninja #

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

        39. nitish chopra

          nitish chopra @nitishchpr #

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

        40. Dries Buytaert

          Dries Buytaert @Dries #

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

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

        42. Dave Rupert

          Dave Rupert @davatron5000 #

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

        43. Chris Enns 👨🏻‍💻

          Chris Enns 👨🏻‍💻 @iChris #

          This is brilliant and all sites should do it.

        44. Dave 🧱

          Dave 🧱 @DavidDarnes #

          Zach sharing another piece of work that makes me question why it took me so long to follow him

        45. 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/

        46. Max Böck

          Max Böck @mxbck #

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

        47. Chris Heilmann

          Chris Heilmann @codepo8 #

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