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

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!

Comments

[lionel-rowe]

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 Nahar]

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]

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

[Lev Nahar]

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

[Dave Stewart]

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

[lionel-rowe]

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]

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]

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

[Ingo Steinke]

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 Nahar]

Haha, thanks for the support!

[Rachel Fazio]

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 Nahar]

Glad you liked it! 🙂

[Peter Vivo]

Sooner or later?

[Andy Piper]

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 Nahar]

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

[Yeom suyun]

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 Nahar]

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.

[BezPowell]

This is a very timely browser extension. I've been on the verge of deleting my dev.to account for months as all I ever seem to get in my feed is "The top X (repositories / APIs / open source projects) you (must / need) to (know / use) as a developer". The only reason I haven't done it is I wanted to write a post explaining my reasoning, and just haven't had the time to do it yet. Perhaps I'll give your extension a try and it might talk me back from the ledge?

The only piece of irony in this whole situation is my feed was so full of listicles your article didn't appear; I only saw it tucked in the "water cooler" section...

I initially joined dev.to because it had some interesting articles from those who aren't the usual voices in our industry. Now, however, a single look at my feed of recommended articles and their grossly overblown titles completely puts me off writing or reading anything.

[Lev Nahar]

Thanks for commenting, I completely understand your frustration. Hopefully the DEV team can work on some larger-scale solutions, but in the meantime we have this add-on. Other developers have already improved the source code, so you should definitely try it out.

[Michael Tharrington]

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

[Lev Nahar]

😁 Thanks Michael! Glad you liked it

[Alvaro]

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

[Lev Nahar]

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

[Mohammed]

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 Nahar]

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!

[Best Codes]

Awesome! I've made an extension for myself that does this already, but chose not to share it. Yet. Great article!

[Rafał Goławski]

Wow, such a brilliant idea! 💡 I really appreciate the creative response to the problem. 👏

[Lev Nahar]

Thank you for the support!

[Christine Belzie]

Thanks for creating a possible solution for listicles @lnahrf! :) Hopefully, it will inspire other developers to come up with other ideas! :)

[Lev Nahar]

Thank you for the support! Other developers have already contributed to the repository 🙂

[Jon Randy 🎖️]

Great work, but why call it "Chrome add-on"? it works just fine on Firefox too... and probably most other browsers!

[Lev Nahar]

I had absolutely no idea! Thanks for that.
Run "git pull" to get recent changes 🙂

[Fyodor]

These bloody listicles have triggered the whole new holy war around 😄 the next post will be how to build unblocker for the browser extensions blocking the listicles 🤣 come on guys, you can just skip reading them. Also some of them are not this shitty actually.

[Lev Nahar]

They always take the top place in my feed, so I made this

[Fyodor]

The idea itself is very cool, don't get me wrong. I try to filter out my feed in settings as much as possible as well, but the DEV's filters work not ideally. Especially in terms of user blocking, for instance. Probably it'd make sense to make a separate extension for that as well 😄 Or even separate DEV ui based on DEV's API... OK, that's probably too much 😅

[Lev Nahar]

Hahaha, we do tend to over-engineer solutions so I wouldn't be surprised if that actually happens.