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.
🔗 Four Short Links
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.
(The following includes affiliate links.)
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.
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.