Skip to content

How to block distractions using uBlock Origin

A trick I learned to block distractions using uBlock Origin

As everyone I am constantly distracted on the Internet.

Distractions are a pain.

I do use SelfControl, a nice app for Mac to block websites that I know are a source of distractions. Like Reddit and news sites. It’s common for me to open a news site when I’m facing a problem I can’t solve or I’m doing meaningful work.

But sometimes I can’t really block a whole site. For example, StackOverflow can’t be blocked. Yet it really annoys me with some of its UI like the network questions.

Sometimes those questions are really interesting for the lizard brain looking for the optimal distraction to move you away from what you are supposed to do.

I pick this random StackOverflow page, and while I’m reading about some JS, I am interrupted by interesting questions like:

I didn’t care about those topics before, but now I want to know the answer, just because I saw the question.

I am just trying to fix my problem, not distract myself more with random questions from random sites in the StackExchange network.

There’s a quick solution to solve this.

I use uBlock Origin and I just found out how to use it to block portions of a page with a simple click.

Click the uBlock Origin extension icon, click the picker icon to enter element picker mode, and then select one part of the page you want to hide forever.

Then click the “Create” button:

And it will be gone. Reload the page, it’s still gone.

This will bring back some bits of lost productivity until the next redesign, or when an HTML class name changes.

This should for any website, but in reality on some sites this is not that easy to make it work. The reason is the proliferation of automated CSS classes/ids. This method uses CSS to block out parts of a page. I tried on Twitter and selecting one block gave me this:

I’m not sure, but one could argue that this garbage is done on purpose. It changes on every rebuild, making it impossible to customize the page using this tool.

I can’t block Twitter completely as I sometimes use it, and I would like to block “Trends for you”, “Who to follow”, “You might like” and so on, so I can open Twitter without being sucked into an hashtag. But apparently I can’t do it this way.

I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

  • C Handbook
  • Command Line Handbook
  • CSS Handbook
  • Express Handbook
  • Git Cheat Sheet
  • Go Handbook
  • HTML Handbook
  • JS Handbook
  • Laravel Handbook
  • Next.js Handbook
  • Node.js Handbook
  • PHP Handbook
  • Python Handbook
  • React Handbook
  • SQL Handbook
  • Svelte Handbook
  • Swift Handbook

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list