How To Take Back Your Attention On The Internet with uBlock
Article Table of Contents
- Install uBlock to permanently delete all this crap
- Is ublock really necessary?
- Detail on Twitter - Related Resources
note: this page has 17Mb of gifs and images. I don’t really want to take the time to manually trim the gifs from >3Mb/each to <1Mb each, so I didn’t. If you’re on mobile, or trying to conserve data, you might want to come back to this one later.
I value my attention and focus. I resent strongly when someone tries to take it away from me.
Someone tries to derail my attention pretty much any time I browse the internet. Little pop-ups, auto-playing videos, click-baity headlines, etc.
I’ve settled on a pretty good system for blocking annoying crap on the internet.
Here’s the elements on a few different websites that I visit regularly, with the elements I’m going to remove highlighted.
We’re going to take this:
To this:
I’ve got some special “rules” for twitter at the bottom of this post. The key is to know you may have to use wildcards in your CSS rules to catch all instances of a thing you want to block, like:
twitter.com##li[id^="stream-item-who_to_follow_entry"]
And bad LinkedIn:
To less-bad LinkedIn:
Bad Comcast email login: (which I never use)
To better:
Inside the above email account. I’m already paying them money, why must I be assaulted with further ads?
I love StackOverflow. I couldn’t do my job without it. But even StackOverflow has unwanted cruft on its pages.
I didn’t get a screenshot of the worst offender - the “Hot Network Questions”, where popular questions from entirely unrelated topics are listed. Questions like
- “Why does Yoda age so slowly in the newest Star Wars”
- “Short story where the protagonist is unknowingly the demon Beelzebub”
These are distracting and unwelcome. With uBlock, I can remove them all, forever.
Install uBlock to permanently delete all this crap #
First, you’ll need uBlock Origin. It it is basically a tool that sits between your browser and the internet, and if any scripts are calling resources that match anything in a blacklist, it keeps the resource from loading.
From uBlock’s own description:
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”. The default behavior of uBlock Origin when newly installed is to block ads, trackers and malware sites – through EasyList, EasyPrivacy, Peter Lowe’s ad/tracking/malware servers, various lists of malware sites, and uBlock Origin’s own filter lists.
It’s a powerful tool. Install it for:
- Firefox
- Chrome
- Safari’s comically complicated install process (nevermind. You have to reinstall every time you restart safari. Don’t use safari. Use Firefox instead)
- Microsoft Edge
Do you have it installed? You should see a little icon in your browser with a number on it now.
(By the way, that badge with a 50 on it is the number of scipts and resources uBlock is disabling by default on this domain.)
Using uBlock #
I’m on denverpost.com
Here’s how we choose and block page elements.
Lets first pick that header-bar asking me to turn on browser notifications:
gif of ublock in action
What I’m doing is:
- Click the uBlock menu icon
- Select the “element picker” tool. (it looks like an eye dropper)
- Mouseover the page until I’ve “selected” the portion of the page I want to remove. (uBlock highlights the current page node that the rule would apply to)
- Click that element of the page
- When I click, a very hard-to-see menu pops up in the bottom right corner of the page. I then move my mouse over to it, and click the “create” button.
At that point, uBlock finds that element of the page and deletes it. Forever.
A brief technical aside of what’s going on:
The page is represented to the user as a continuous document, but the underlying structure is a “Document Object Model”, and every page element is a “node” that exists mostly-independently of any other node on the page. We’re using uBlock to highlight the nodes of the DOM, and when we select one, uBlock says “ok, this here node… I’ll just remove it from the DOM”.
Lets remove more nodes. I really don’t like email/subscribe popups, so I always delete them.
gif of removing subscribe popup
“Trending” news is just a way of saying
you’re not here to read these articles, but other people are clicking on them and we hope you’ll do the same.
So, remove it:
gif of removing the sidebar
The final version is quite a bit more peaceful and less disruptive and attention-grabbing than the origional website.
Oh, and these rules usually apply to “promoted” content that’s inserted in your “feed”. Just find the promoted node, select it, and delete it. This usually will apply to all promoted posts in your feed, so it’s a great way to get spam out of whatever long list you are scrolling through. (Facebook/Instagram/Twitter).
A few surprises that can happen with uBlock #
Since uBlock by default disables many unwanted scripts and resources, it can introduce some unexpected behavior on websites. If a website isn’t behaving exactly as expected, turn off uBlock and see if the resource loads.
For example, some websites use untrustworthy javascript redirects to track your movement to third-party websites. if those redirects rely on untrusted third-party resources, they won’t be loaded on the page. Ditto for some kinds of form submission behavior, image/video resources, etc.
So, turning off uBlock is very easy:
- Click the uBlock menu icon
- click the blue “power” icon
- Click the “refresh page” button
uBlock will not block anything on this page now. To turn it back on, repeat the above steps.
gif of temporarily disabling uBlock
If you accidentally delete an element you didn’t intend (like, the main content of the page, for example!) you’ll have to remove the “page rule” you just created.
This is very easy.
picture of where the article is *supposed* to be
- click uBlock menu icon
- click “open the dashboard”
- navigate to the “my filters” tab
- delete the bottom line from that list of rules. A line beginning with
!is a comment describing the next line, which is the “rule” that uBlock actually reads and applies to the page. - click “apply changes”
- go back to the website (it’s tab is still open) and refresh the page.
gif of removing the bad page rule
Is ublock really necessary? #
OK, Josh, this is a lot of work to individually delete page nodes just to “preserve” my attention? I can read articles without worrying about the rest of the sidebars. Don’t you think this is overkill?
I don’t think it’s overkill.
A while back, I wrote about a book called Deep Work, and the profound impact it had on me. I stepped off of social media completely, and made efforts to trim away other distractions in my life.
Since taking these steps, I’ve become sensitive and more attuned to when I’m subjected to unwilling sources of distraction. It’s as if my “someone is trying to influence me” radar got much stronger.
I suspect that if you start using uBlock to remove annoying elements from pages, you’ll start developing a stronger radar for when someone is trying to monetize your attention, and and then you’ll block those elements, but then become even more attuned to those unwanted influences, and then block them, and on and on.
It is worth pointing out that this very website is devoid of those sorts of elements I find annoying. No popups, no sidebar content, no click-baity headlines. If you want to share one of these posts on social media, you have to do it the old school way. Copy and paste the URL into your platform of choice.
Note how clean the URL is: https://josh.works/post-title. Positively peaceful.
The only metric I pay attention to is email subscribers. Someone subscribing via email is basically the highest endorsement of trust I can imagine. I’m extremely judicious in subscribing to other people’s websites, so I value other people trusting me with their email address.
Detail on Twitter #
A few more thoughts on Twitter. Here’s its most recent ugly UI
And after its fixed:
Twitter is tricky about ads/follow suggestions it injects into your stream. Because the root node ID is unique to you/the user the add wants you to follow, you need to use a little wild-carding to catch-and-delete these all.
First, here’s what the rules look like for deleting individual ads. These entries are useless, as once the long string of digets at the end changes, the ad won’t be caught by uBlock.
twitter.com###stream-item-who_to_follow_entry-955359935176437758
twitter.com###stream-item-who_to_follow_entry-953442336767381502
twitter.com###stream-item-who_to_follow_entry-955359935176437758
Here’s the rule I have in uBlock, that just catches all of these, no matter what the actual element id is:
twitter.com##li[id^="stream-item-who_to_follow_entry"]
// Here's some other twitter rules that might be helpful
Go forth and retain more of your attention!