uBlock Origin for a More Civilized Web

I set up some dynamic uBlock filters to fix a broken website.

I like how, when it comes to the internet, I am in control of the client rendering the content I’m viewing. I take advantage of this any time I am annoyed at how a page is rendered. So far, I’ve exclusively been using uBlock Origin to achieve this task. Here are some examples of how I make it happen:

🔗 Comments

Almost universally, comments are a wasteland. With that in mind, whenever comments are either overly negative or so voluminous that they make the page appear much longer than it should be, I hide them. This is trivial to do, basically you add <somedomain>##<some-css-selector> to “My filters” to hide whatever is the comments. So for example, with LWN you might have the rule lwn.net##.CommentBox.

The documentation for the filter syntax is here.

🔗 Nonsense

Some domains show nonsense that I find, generally speaking, useless, and they take up a non-trivial portion of the rendered page. Hackaday, on top of an absurd amount of comments, has a footer that’s nearly half the height of the screen. I hide it by adding hackaday.com##footer to “My filters”.

🔗 Slack

Slack has settings that let you hide channels that have no activity. Slack also lets you hide muted channels. Annoyingly, if a channel is muted but has activity, it is still visible. I wrote the following rule to hide such channels from my left toolbar:

ziprecruiter.slack.com##div > .p-channel_sidebar__channel--unread.p-channel_sidebar__channel--muted.p-channel_sidebar__channel.c-link

There is still a giant empty spot between hidden channels and direct messages, but I don’t care. This still makes my life better.

For quite a while, four short links has had a bug (in Firefox) where when you right-click or middle-click a link, it opens the link, even if you just wanted to open the page in a separate tab. This kills me. The author is aware but I don’t think it’s in his control to fix. But it is in our control! Here’s how I fixed it:

www.oreilly.com * 1p-script block
www.oreilly.com * 3p-script block
www.oreilly.com * inline-script block

The above goes in “My rules”, rather than “My filters”.

This disables all scripts on O’Reilly’s website. There’s no reason for a site that’s nearly all text to run scripts anyway! I do the same thing on Medium and the site is just fine.

I am somewhat frustrated that I can keep filters in a textfile on github, but I can’t keep a set of rules there. My guess is because rules don’t compose together as well, but I really don’t know.

The documentation for the rule syntax is here.


I don’t really know what you could read to learn more about the above. Maybe a CSS Book?

I have no idea what else would help.

Posted Wed, Apr 17, 2019

If you're interested in being notified when new posts are published, you can subscribe here; you'll get an email once a week at the most.