Month: January 2024

Block specific exact content with Adblock Plus : Youtube, LinkedIn, … stupid suggested content

As you can know we (software developers) are facing serious information overdose everyday, especially on social networks and video services such as Youtube.

On Youtube, like on Twitter, etc…. , you can both found shitposts and useful informations. This is a serious problem because we can easily waste time by filtering ourself everyday theses informations which take energy and time. This is a real problem.

Youtube : the grid of stupid videos

Exemple of the Youtube main page with useless content

We can block the main Youtube page with add-ons like Adblock Plus (using others are possible but I will use this one in this tutorial).
As you can know, the social networks have psychologists and they are working hard with complex algorithms to waste your time and so you can be more on their platform and generate more money mainly with advertisement.
You can still see it if it is not a problem for you. As for me, the content is not relevant at all because watching cat videos will not help me about business, software development, earning money, and so on.

The solution

On Adblock Plus we can go to the Advanced settings :

You can add custom filters in this list

In “My Filter List” you can add filters that can block only the part of the website that contains useless informations.

Here is the Adblock Plus Cheatlist : https://adblockplus.org/filter-cheatsheet

We can now add the following rules to block the contents DIV

The DIV with “content” id is showing the useless content

So, we can try to add the following filter:

youtube.com###contents

The problem if you use the rule is that you will not be able to a Youtube search:

The search “earn money” was also blocked

Now, if we go deeper in inspecting the DOM, we can see that:

  • On the main page the DIV contents contains the class ytd-rich-grid-renderer if it is the main page
  • On the search page the DIV contents contains the class ytd-section-list-renderer (and others)

If you look on the documentation of Adblock Plus, on the cheatlist, you can see that you can also block the ID and the CLASS, which will give the following rule:

youtube.com###contents > .ytd-rich-grid-renderer

The result:

The main page, blocked ✅
The search page, not blocked ✅

LinkedIn : the infinite scrolling

linkedin.com##.scaffold-finite-scroll

If you have others you can tell me ! 😃

Thank you for reading my article, do not hesitate to support me by contacting me or making a donation.

List of the array method with Javascript

.forEach()

const array = ["Alpha", "Beta", "Omega", "Neptune", "Danube", "Dniepr"];
array.forEach(el => console.log(el)) // basic
array.forEach((el, index, array) => console.log(el, index, array)) // all params
array.forEach(function(el, index, array) { // without arrow function
   return console.log(el, index, array)
})

.map()

const users = [
{name: "Alpha", level: 1}, 
{name: "Beta", level: 2}, 
{name: "Omega", level: 3}];
const names = users.map(user => user.name) // basic mapping in new array
console.log(names) // ["Alpha", "Beta", "Omega"]

.find() / .findIndex() / .indexOf()

const array = ["Alpha", "Beta", "Omega", "Neptune", "Danube", "Dniepr"];
console.log(array.find(el => el === "Alpha")) // ["Alpha"]
console.log(array.findIndex(el => el === "Alpha")) // 0
console.log(array.indexOf("Neptune")) // 3

The difference between indexOf and findIndex :
– findIndex : callback function so can do more things inside the callback function
– indexOf : using fast function with only one parameter

const users = [
{name: "Alpha", level: 1}, 
{name: "Beta", level: 2}, 
{name: "Omega", level: 3}];
console.log(users.find(el => el.name === "Alpha")) // [{name: "Alpha", level: 1}]

.some() / .every() / .includes()

const numbers = [12,14,23,27,11,9];
console.log(numbers.some(num => num === 40)) // false - do not have it
console.log(numbers.some(num => num === 12)) // true - yes have it
console.log(numbers.every(num => num < 20)) // false - not every item bellow 20
console.log(numbers.every(num => num < 40)) // true - yes every item bellow 40
console.log(numbers.includes(40)) // false - do not have it
console.log(numbers.includes(12)) // true - yes have it

.filter()

const numbers = [12,14,23,27,11,9];
const filteredNumbers = numbers.filter(num => num > 20) // [23, 27]

.sort()

Sort() works pretty good to order by ascending alphabetical order.
For numbers you will need to overload the condition in the callback function.

const numbers = [12,14,23,27,11,9];
const sortedNumbers = numbers.sort((a, b) => a - b) // [9, 11, 12, 14, 23, 27]
const array = ["Delta", "Neptune", "Alpha", "Danube", "Beta", "Dniepr"];
const sortedZone = array.sort() // ['Alpha', 'Beta', 'Danube', 'Delta', 'Dniepr', 'Neptune']

.reduce()

const numbers = [12,14,23,27,11,9];
const reducedNumbers = numbers.reduce((accumulator, currentValue) => accumulator + currentValue) // 96