How to block distractions using uBlock Origin
Published Jan 19 2020
Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨
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:
- Why would a medieval civilization leave newly discovered land undeveloped?
- When a planet loses atmosphere, where does it go?
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.
made in Italy 🇮🇹 using 