DEV Community

Kai Oswald

Posted on Jul 5, 2019

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

#showdev

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 :)

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.

kai-oswald / dev.no

Chrome extension to ignore tags on dev.to

dev.no

Chrome extension to ignore tags on dev.to

Download link

View on GitHub

Top comments (8)

rhymes • Jul 5 '19

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

Defman21 posted on Feb 23, 2019

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?