DEV Community

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

Lev Nahar on December 20, 2023

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

Read full post

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 Nahar • 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 Nahar • 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 Nahar • 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 Nahar • Dec 21 '23

Glad you liked it! 🙂

Peter Vivo • Dec 21 '23

Sooner or later?

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 Nahar • 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.

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 Nahar • 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.

BezPowell • Dec 22 '23

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 • Dec 22 '23

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 • Dec 21 '23

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

Lev Nahar • 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 Nahar • 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 Nahar • 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!

Best Codes • Dec 21 '23

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

Rafał Goławski • Dec 21 '23

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

Lev Nahar • Dec 21 '23

Thank you for the support!

Christine Belzie • Dec 22 '23

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

Lev Nahar • Dec 22 '23

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

Jon Randy 🎖️ • Dec 22 '23 • Edited

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

Lev Nahar • Dec 22 '23

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

Fyodor • Dec 21 '23

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 • Dec 21 '23

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

Fyodor • Dec 21 '23 • Edited

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 😅