Lev N.

Posted on Dec 20, 2023 • Originally published at steelrods.hashnode.dev on Dec 20, 2023

No Listicles! The chrome add-on that removes list-type articles from your DEV.TO feed

#webdev #javascript #opensource #community

You probably knew this was coming sooner or later. DEV.TO has been filled with listicles lately and something had to be done.

But before we continue, a short disclaimer.

This add-on and article were created as a somewhat satirical view of the situation. While the tool is completely functional (GitHub), I do not intend to hurt other authors' feelings, or bash anyone for posting "listicles".

What is a "Listicle"?

A listicle (list article) is a usually low-quality, usually low-effort article that is a list. Listicles are often generated using some sort of AI, and while some might bring some value to readers, the vast majority of them are posted just for the sake of posting and not for the sake of teaching or passing on knowledge.

Listicles are quite easy to make - ask any GPT for a hot topic in the development community and tell it to list X resources about said topic.

Voila~ You have a listicle that is ready to steal the show.

Personally (and I know many of you will agree with me), I find listicles quite useless and somewhat annoying. Their exaggerated titles, filled with emojis and buzzwords, aim to capture as much attention as possible while providing little to no value. Many authors have been sounding their opinions about listicles lately, and it feels like a good portion of the community is somewhat ticked off by the situation.

The Conundrum of the "Top X" Articles 🤔 - by @rgolawski

Dev.to and "The Missing Middle" Economics - by @terabytetiger

Best Practices for Writing on DEV: Listicles - by the DEV team

The (temporary) solution

While I trust the DEV team to eventually do something about the low-quality content that is flooding the community. I wanted to stop combing through multiple listicles to find an article worth reading. The best solution I could think of was to create a quick Chrome add-on that identifies listicles and removes them from my feed using some kind of scoring system.

This was my first time creating a Chrome add-on, and it was an... interesting development experience (although somewhat unrefined, to say the least). I wrote the add-on in a day, and it works without using any sort of AI (I bet that is refreshing to hear).

I thought it would be fitting for the add-on icon to be a blocked party emoji icon. Not that I have anything against emojis or parties (both are fun) but it seems that listicle authors are using emojis as the primary hook that grabs your attention on the feed.

I did not publish the add-on to the Chrome webstore, because honestly I don't want to deal with that. But it is available on GitHub and you can add it to your local Chrome instance by enabling "developer mode" and loading the directory as an add-on. If you intend to use it and/or like the idea, a star on GitHub would be appreciated.

Let me know in the comments if you would like me to go through the Chrome webstore submission process and publish this.

Completely arbitrary scoring system

The simplest method I could think of to determine which post was a listicle - was to run the article title through a set of tests and calculate a score based on the title structure. If an article's title's final score is over a pre-defined threshold, it must be a listicle.

It is not perfect, but it works

To my surprise, it works quite well. The scoring system can identify over 90% of listicles with about 5-10% false positives.

From time to time an article that is not a listicle might get caught in the mix and removed from the feed.

The scoring system is partially built upon a blacklist of words associated with listicle-type articles. The goal with the blacklist was to try and keep things levelled, and not overdo it. You are more than welcome to improve the blacklist as you see fit, either in the repository or in your local fork/clone.

An explanation of locating the blacklist in the source files can be found in the README file.

Quality content

At the end of the day, we all just want to read quality content, whether our definition of "quality" is an academic research paper or a list-type article. I am not pro-censorship, and I do not think listicles should be banned. They are just not to my taste when it comes to technical articles. That being said, if you want to clean up your feed off listicles like me, I may have found a temporary solution for you.

Happy reading!

Top comments (44)

lionel-rowe • Dec 21 '23

Here's a regex that seems to give good results (very few false positives/negatives from some quick testing). I've added comments and whitespace to make it easier to read/improve:

const re = new RegExp(
    String.raw`
        (?:                               # location within the title:
            (?:
                ^                         # - at the start
                | : | - | —               # - after certain punctuation (start of subtitle)
                | the | top | mastering   # - words often found before the number in listicles
                | these | first
            )
        )
        [^\p{L}\p{M}\p{N}]*               # followed by 0 or more non-word characters (punctuation etc)
        (?:
            \d{1,3}                       # 1-3 digits (4 digits is most likely a year e.g. "2023")
            | one | two | three           # number words 1..10
            | four | five | six
            | seven | eight | nine
            | ten
        )
    `
        // strip whitespace and comments from preceding regex source
        .replaceAll(/\s+|#.*$/gm, ''),
    // case insensitive and unicode aware
    'iu',
)

Usage:

Object.groupBy(
    [...document.querySelectorAll('.crayons-story__title')]
        .map((x) => x.textContent.trim()),
    re.test.bind(re),
)

Example results:

{
    "true": [
        "9 Project Ideas to Master Frontend Development in 2024 | **with resource**",
        "11 free and fun APIs you must use in your side project",
        "Top 5 Ways To Host Your Full-Stack App For Free 🚀✨",
        "🫵 5 achievable side hustles for developers💰",
        "5 GitHub Repos To Make You a Better for Learning Developer.",
        "Top 42 🐍 Python libraries you need to know 🦾",
        "A Year of Self-Hosting: 6 Open-Source Projects That Surprised Me in 2023",
        "12 Github Repositories To Master NextJS 🏆",
        "🎄24 Open-Source Libraries: for your downtime holiday hacking🎅🏽🎁",
        "11 Open-Source Projects That Will Rocket Your Resume 🚀 (Jumpstart Your Career in 2024! 🌟✨)",
        "5 Open Source tools written in Golang that you should know about",
        "🔥Our TOP 13 DEPLOYMENT & TEMPLATING tools for KUBERNETES 🚀",
        "🛠️ Ready to Launch: Our TOP 11 OPEN SOURCE Tools to START your business! 💻✨",
        "The Top 10 GitHub Repositories Making Waves 🌊📊",
        "\"Mastering JavaScript: 8 Easy Shortcuts for Awesome Code!\"",
        "First 15 Open Source Advent projects"
    ],
    "false": [
        "HTML can do this? Part 1",
        "Building a Collaborative Whiteboard using ReactJS, Socket.io and NodeJS 🤝",
        "Shell Scripting For DevOps: Quick Beginner's Guide 💎",
        "🎉Monitor your Javascript application like a pro🧙‍♂️💫",
        "💳 Payments 101 for a Developer👨‍💻",
        "DEV Top Stats & Trends in 2023",
        "⭐Crafting Effective Documentation",
        "Complexity by Simplicity - A Deep Dive Into Kubernetes Components",
        "ECMAScript 2023: Fresh Goodies for JavaScript Developers",
        "Supabase Auth: Identity Linking, Hooks, and HaveIBeenPwned integration",
        "Dev.to and \"The Missing Middle\" Economics",
        "Frontend Development in 2024: Crafting a Dynamic Skillset for Success",
        "Introduction to NGINX",
        "Achievable side hustles for developers💻💰",
        "Building a cloud backend in Go using REST and PostgreSQL",
        "A Close Call with Real-Time: How Rethinking Pub-Sub Saved the Day",
        "How to Do Authorization - A Decision Framework: Part 1",
        "🚀 Lambda Test Revolution: Master Mocking & Slash Costs with HTTP-Interceptor!",
        "Build a full stack app with Rust, Next.js and Docker",
        "What I've Learned By Building DEV Analytics Dashboard 💡",
        "Is tech boring lately or is it me?? 😐",
        "🤨 Who owns the internet?",
        "🌟 Celebrate Your Impact: #DEVImpact2023 Reflections",
        "Deploying a Go backend to Kubernetes with Automatic Cluster Provisioning",
        "The best Javascript UI framework to use in 2023",
        "React Hooks are Dead? How Signals Are Taking Over",
        "Multithreading: Event Loops vs Thread Pools and more...",
        "Building Your DevOps Playground: A Beginner's Guide to Setting Up Your Development Environment",
        "Discrimination Faced by Women In Tech",
        "What was your win this week?",
        "🎬🍿What's Your Favorite Holiday Film?",
        "What you learning about this weekend? 🧠",
        "Featured Mod of the Month: Helen Anderson",
        "I made a Copilot in Rust 🦀 , here is what I have learned... (as a TypeScript dev)"
    ]
}

Lev N. • Dec 21 '23

This looks good! I am checking words before the number and after the number, along with emojis and other positions (you can check the source code on GitHub). If you think my version can be improved please improve it and I'll merge your code!

lionel-rowe • Dec 22 '23

@lnahrf Sure thing, I opened a PR (with a couple of improvements to the regex vs the original one I posted)

Lev N. • Dec 22 '23

Merged your PR and added you to a contributors list. Looks super, thank you.

Dave Stewart • Dec 22 '23

Your method of writing RegExps has made my day. Thanks!

lionel-rowe • Dec 23 '23

Glad you like ;) this way of writing regexes is inspired by Ruby's x regex flag. If you're interested, I also published a package a while back that implements a more robust version of this whitespace/comment stripping logic, plus a few other features: fancy-regex

Dave Stewart • Dec 23 '23 • Edited

Interesting! Yes, have written a few rx utility functions in my time. Daniel Roe of the Nuxt team also has Magic RegExp: regexp.dev/. I'm pretty handy with RegExps myself, but will take a look at your lib for sure. Thanks again!

Mohammed • Dec 21 '23

There is a Regex Jedi among us mere mortals. Or just me.

Ingo Steinke, web developer • Dec 21 '23

Seriously, this might be the most useful piece of software that EVERY senior DEV user MUST install in 2024. 🤣 praising even before I tried, but THANKS so much already! I had been thinking of coding something similar but I didn't have time yet. Thanks for your contribution!

Lev N. • Dec 21 '23

Haha, thanks for the support!

Rachel Fazio • Dec 21 '23

Hi from the DEV team!! Love this. Thank you for sharing and for coming up with some really great solutions to help us out, while we work on some larger solutions. Be very well!

Lev N. • Dec 21 '23

Glad you liked it! 🙂

Peter Vivo • Dec 21 '23

Sooner or later?

Yeom suyun • Dec 21 '23

In fact, aside from listicles, I haven't been able to find interesting articles here lately.
Interesting topics are scarce as well.
Lately, I've been thinking about some Java tricks used in my work and topics like SQL optimization using indexes have come to mind.
The problem I see with listicles is that most of them don't provide me with new information.
However, if someone were to publish listicles of the same caliber as tools of the Titans, those articles would probably be very intriguing.

Lev N. • Dec 21 '23 • Edited

Yes! I am not against the principle of a listicle (it rhymes, lol).
It's just that the listicles that we see on the top of the feed are just posting irrelevant content over and over again, not providing any additional value.

Even beyond listicles, we are lacking high quality articles.

Andy Piper • Dec 25 '23

I'm seeing some errors reported in Chrome, under manage extensions, after I add this unpacked extension.

Unrecognized manifest key 'runtime_allowed_hosts'.
Unrecognized manifest key 'runtime_blocked_hosts'.

I'm struggling to discover what may be causing this, as I usually run an up-to-date Chrome. Seems to work great anyway. I'll raise an issue on GitHub for reference.

Lev N. • Dec 25 '23

Commented on your GH issue, thanks!
I am not sure what the issue is myself, will have to dig into the manifest documentation.

Michael Tharrington • Dec 21 '23

How did I miss this?! This is wonderful, Lev, haha!

Lev N. • Dec 21 '23

😁 Thanks Michael! Glad you liked it

Alvaro • Dec 21 '23 • Edited

Looks great, will you publish it in the chrome extension store?

Lev N. • Dec 21 '23

If enough would ask for it, then yes. Let's see what others have to say.

Mohammed • Dec 21 '23

Interesting solution.

I definitely tried messing around with the Chrome extension API once but kind of gave up. The listicle problem on DEV is definitely annoying, I kind of miss those longer articles with an interesting story to recount or blog posts and the like.

Cheers

Lev N. • Dec 21 '23

Yea it got easy once I grasped that the extension and DOM are two different threads that can only speak with each other using messages (which makes sense, security wise).
Thanks!