Render snarky feedback in Comedian Sans

June 07, 2019

I had the pleasure of attending an IndieWebCamp earlier than the superb Past Tellerrand convention just a few weeks again and I’m nonetheless buzzing from the expertise.

I can’t actually specific how significant this expertise was to me. An antithesis to the rat race of social media, IndieWebCamp was a roomful of kindred spirits that care in regards to the net and their very own web sites and internet hosting their very own content material. It felt just like the Google Reader days once more, when everybody was running a blog and writing on their very own websites. I dunno if you happen to can inform however I cherished it. When you get the prospect to attend considered one of these occasions, leap on it (I actually wish to run one in Omaha 👀).

Webmentions, Disqus, WordPress

On the occasion I acquired a working instance of webmentions occurring my private website. I already had a static copy of my outdated Disqus feedback that I’d exported (which included copies of outdated WordPress feedback that I’d imported into Disqus 😎).

Webmentions are made doable for static websites once you use, a service to log incoming entries. One other service, Bridgy, crawls social networking websites for mentions of my website and sends these over to mechanically.

If I’ve already misplaced you, fortunately Max Böck wrote up a beautiful tutorial on how to do that utilizing Eleventy (his website is superb, too). Max additionally created an eleventy-webmentions starter venture which has all of the code for this. Hopefully we will get some type of this merged again into the upstream eleventy-base-blog too.

You may see an instance of how the webmentions look on my website at considered one of my latest weblog posts: Google Fonts is Including font-display.

Sentiment Evaluation

Internet hosting my very own content material and feedback permits me to be a bit extra inventive with it. So I made a decision to take this a step additional and have slightly enjoyable with unfavourable feedback.

First, how do we discover out if a remark is unfavourable? Let’s attempt to use Pure, a plugin on npm. I added a Liquid filter to my Eleventy configuration file to research textual content and spit out a sentiment worth. zero is impartial, < zero is unfavourable, and > zero is optimistic. Be aware that this pure language processing isn’t 100% (generally I’ll get a false optimistic) however that is only a enjoyable demo on my website.

const Pure = require('pure');

const analyze = new Pure.SentimentAnalyzer("English", Pure.PorterStemmer, "afinn");

module.exports = perform(eleventyConfig) ;

After which in my Liquid template, I exploit this integer worth so as to add a static-comments-reply-salty class:

 getSentimentValue %
  • After which in my stylesheet, I exploit this class to opt-into a beautiful stack of Comedian Sans, Chalkboard, and naturally a fantasy fallback for kicks:


    As additional credit score, I additionally used the random-case plugin to mODifY tHe TeXt (at David Darnes glorious advice).

    How does it look?

    This was taken from an actual touch upon my website.

    Earlier than:


    This isn’t meant to be a hot-take on Comedian Sans. As an alternative it’s meant to vary the tone of the negativity to make it sound like a clown is yelling at a child’s party.


    NTH Secure

    A gamer myself, A Open Source hobbyists, A IT Security professional, A WordPress Blogger. I fully understand privacy and boosted speeds are what those who take online hosting seriously seek. Fast, secure and reliable, I've found that a VPS and Web hosting is common nowadays. Bringing extensive IT experience to the table, I enjoy helping others fine-tune their hosting services by sharing industry tips, high tech tricks and useful advice here on my website. Check back often to learn new skills of the trade, including how to perform a VPS and Web hosting setup from start to finish. Ready to level up your skill with NTHsecure? Forego the wait … it’s time to crate!


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.