DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for I created an extension that lets you ignore tags on dev.to
Kai Oswald
Kai Oswald

Posted on

I created an extension that lets you ignore tags on dev.to

I'm following the #webdev and the #vue tags, but my feed is full of #react, #python and #angular posts. I don't care about these, but many articles are tagged with multiple tags like #react, #webdev.

So what are we gonna do about it?
Wait until dev.to introduces the option to ignore tags?
Follow the tag and set its relevance to -999?
Since we are lazy developers, there's only one remaining option. Write our own extension Β―\(ツ)/Β―.

Introducing Dev.no

So how does it work?
The extension can essentially be broken down to this little snippet

const tags = ['react', 'python']; // hardcoded tags list for demo purposes
tags.forEach(tag => {
    var tagElements = Array.from(
      document.querySelectorAll(`.single-article .tags a[href='/t/${tag}']`)
    );

    tagElements.forEach(tagElement => {
      // the whole article is located 2 elements above (parent.parent);
      var articleElement = tagElement.parentElement.parentElement;
      articleElement.style.display = "none";      
    });
  });

To better understand that snippet, let's have a look how an article looks like on the dev.to main page and break it down to the essential elements we need to focus on.

<div class="single-article single-article-small-pic">
  <!-- removed -->
  <div class="tags">
    <a href="/t/javascript"><span class="tag">#javascript</span></a>
    <a href="/t/webdev"><span class="tag">#webdev</span></a>
    <a href="/t/tutorial"><span class="tag">#tutorial</span></a>
    <a href="/t/discuss"><span class="tag">#discuss</span></a>
  </div>  
  <!-- removed -->
</div>

The tag 'react' can then for example be located with the following selector
.single-article .tags a[href='/t/react'].

The full article can then be accessed by calling .parentElement 2 times.

The extension also has an options UI, which is built with vue, where you can manage the ignored tags and view some nice stats. I'm not really satisfied with how it looks right now, so feel free to shoot a PR :)
screenshot of the options ui

This extension may become obsolete as soon as dev.to rolls out the option to ignore tags.

It's open source btw, so make sure to check out the repo and download the extension.

GitHub logo kai-oswald / dev.no

Chrome extension to ignore tags on dev.to

Top comments (8)

Collapse
 
rhymes profile image
rhymes

Hi! Nice work, it's always nice to see an ecosystem growing up around the website.

I was wondering: what happens if a tag is tagged with both a tag you ignore and one you don't want to ignore?

It seems to me that this logic could hide content that the user actually wants to see and since the extension is "silent", they might never know.

A possible solution would be to get the user's followed tag list and use that to not hide posts with multiple "conflicting" tags.

Another solution would be to somehow store the list of ignored articles and show them in a view in the extensions, like "here's the last 100 articles I've hidden for you".

By the way, if anyone wants to tackle this for the DEV codebase there's an old discussion going on (in need of revitalization) in the repo:

Ignore/blacklist tags #1856

Is your feature request related to a problem? Please describe. The problem is that I want some posts to disappear from my feed.

Describe the solution you'd like I want to have the ability to ignore a tag.

Describe alternatives you've considered Looks like the only way to achieve it atm is following the tag and setting its weight to -999 or something. I don't want to follow tags that I want to ignore.

Additional context Something like that maybe?

image

Collapse
 
kaos profile image
Kai Oswald

Conflicting tags are ignored on purpose. For example articles tagged under #webdev and #react, would not/never interest me if I'm ignoring #react.

The idea with the 'Recently blocked articles' is actually already implemented, but limited to 5 for now :)

image of blocked article list

Collapse
 
rhymes profile image
rhymes

Cool but what about a post tagged both react and vue ?

Thread Thread
 
kaos profile image
Kai Oswald

That's the dilemma I guess..

Maybe there should be a separate list of tags to always show/never ignore. It would then work like this:

ignored always show followed
react vue vue
webdev
post tags shown?
react, vue, webdev yes
vue, webdev yes
react, webdev no
Thread Thread
 
rhymes profile image
rhymes

Seems complicated to me. I'd rather see a post I'd rather not see that never see a post that I'd enjoy reading.

Collapse
 
pavelloz profile image
PaweΕ‚ Kowalski

Any plans for doing it for Firefox as well? :)

Collapse
 
kaos profile image
Kai Oswald

Sure, should just be a few adjustments to make it work on Firefox. I'll let you know once it's published.

Collapse
 
snorhax profile image
Jacob Camacho

Any updates?

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.