DEV Community

Cover image for Blocking user-unfriendly content
Alexander Caro
Alexander Caro

Posted on • Originally published at alex.caro.us on

Blocking user-unfriendly content

Alt Text

Rather than following user-centric design principles, all too often, websites and apps are built using persuasive design principles with the intention of being as addictive as possible. The companies that design apps are incentivized by profits, and profits are linked to clicks and time spent on their websites and in their apps. Despite some notable exceptions, companies generally do not stop to take the time to consider the impact design has on the wellbeing of their users, and we cannot expect them to.

Instead of depending upon the goodwill of companies, users must take responsibility for their own digital wellbeing. With good reason, uBlock Origin is one of the most popular cross-browser extensions. The extension provides a simple method to help users in controlling their browser content. The blocking extension has proven so popular that uBlock Origin was the first extension adapted for Mozilla’s reinvented Firefox Android app. While uBlock is excellent at its primary use — blocking ads — it is in fact intended to be used for blocking any annoying or otherwise undesired bits of websites. As uBlock itself puts it, “uBlock Origin is NOT an ‘ad blocker’: it is a wide-spectrum blocker – which happens to be able to function as a mere ‘ad blocker’.”

To illustrate, consider LinkedIn’s news module. I can only speak for myself, but LinkedIn is not the first place that comes to mind when I think of news sources. I would rather use a web page dedicated to that purpose like Google News, or rather simply visit trusted sources directly instead of having an algorithm curate my news for me. Instead of building this feature to help users looking for news, it seems more likely the news module was designed to make the site more addictive, to further the mission of endlessly increasing “engagement” metrics, and to provide another revenue stream through referrals. I do not blame them for that, as generating returns for their shareholders is their raison d'être, but I also am not interested in being engaged with news stories when I visit their site. I could just ignore the news module, but why do that when I can simply remove the anti-feature altogether?

To accomplish this, first install uBlock Origin. Note that I will be referring to uBlock Origin as simply uBlock. However, uBlock and uBlock Origin are technically different extensions. For this purpose, you simply need to be sure to use uBlock Origin.

Firefox Add-On Chrome Add-On
Firefox add-on Chrome add-on

Versions of uBlock are also available for other browsers.

Once you have installed the extension, simply click on the uBlock extension icon in your browser at the top-right hand corner. You will need to then click the dashboard icon to enter the dashboard. Next, navigate to the “My filters” tab. Once there, add the following code:

www.linkedin.com##.feed-shared-news-module

The first part of this code tells uBlock which site to apply the rule to, and the second part tells uBlock which HTML element to block using CSS selectors. In this case, the code refers to all HTML elements with a “class” attribute of .feed-shared-news-module. You may save the new rule by clicking the “Apply changes” button and refresh your LinkedIn homepage. The new module should have disappeared!

You may also give this a try on other sites like Facebook. To get you started, here are two filters for Facebook (YMMV):

www.facebook.com##div._2s24._cy6:nth-of-type(2) > div._4kny:nth-of-type(3)

www.facebook.com###stream_pagelet

These block the notifications icon and the news feed, respectively. You do not need to know CSS selectors to block these elements, either. All you need do is utilize uBlock’s built-in element picker to rid yourself of minor annoyances and distractions. To use the element picker, navigate to any website and click the uBlock extension icon. Then click on the dropper icon. You will be presented with a crosshair cursor allowing you to select an HTML element for blocking.

Once you have selected your desired element, click it and the extension will provide you a pre-determined CSS selector. If you are happy with it, click “create” and uBlock will start blocking that element. You can remove this filter anytime by navigating back to the filter tab in uBlock. Note that if you want to get more creative about which types of elements you want to block, you will need to learn a bit about CSS selectors.

What do you think about designing with users' interests in mind? Is it up to the user to block undesirable content, or should designers and technologists play a role here, too?

Top comments (0)