It’s no surprise that twitter and similar sink holes are constantly trying to "engage" you so you can be sucked into their void. As someone who believes that the web belongs to its users and I browse the way I want I frequently change and block content on these sites so I can use them the way I would like.
So here’s a quick share on how I’m doing that.
[](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
This is a simple example of how I think twitter can be improved - the picture below shows, highlighted in red, the "trending news" which really isn’t news - or at least not news that I would recommend consuming. I certainly don’t want to get my COVID-19 advice from the latest trending bullshit. More recently they have launched (possibly in split tests) a DM … "thing"? so I can use that to message people instead of…what, email? WhatsApp? Not sure. Anyway, it’s shit that I don’t need in my life, so it’s getting ejected.
Step 1: get yourself [uBlock Origin](https://github.com/gorhill/uBlock/) (the origin bit is important) available for [most browsers](https://github.com/gorhill/uBlock/#installation)
Step 2: use the right click - block element picker to stop content from bothering you
When you fire up the picker, you’ll notice that Twitter (and other sites that don’t believe in writing actual CSS classes) are using something to generate their CSS, which makes picking element using CSS selectors tricky.
Except, the trick is to look for aria roles or even data properties. As much as I dislike these big companies, they do try to support a broad range of users via good use of accessibility and we can use that to our advantage.
The uBlock Origin element picker will need a selector like ##div[aria-label="Timeline: Trending now"], I’m not sure what the double hash is about, but it works.
So now we can surf web pages the way we want.
Published 19-Jun 2020 under #web. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/clearing-twitter.md)
👍 22 likes
[](](](](](](](](](](](
Comments
Lock Thread
Login
Add Comment[M ↓ Markdown]()
[Upvotes]()[Newest]()[Oldest]()
Daniel Nash
0 points
3 years ago
This works for me to keep sponsored rubbish out of Facebook
facebook.com##div[data-pagelet^=FeedUnit_]:has(span:has-text(/^Suggested for You$/))
facebook.com##div[data-pagelet^=FeedUnit_]:has(div[role=button] > span > span > span:has-text(/^S$/) ~ span:has-text(/^p$/) ~ span:has-text(/^o$/) ~ span:has-text(/^n$/) ~ span:has-text(/^s$/) ~ span:has-text(/^o$/) ~ span:has-text(/^r$/))0 points
3 years ago
The ## is a special syntax to enable element hiding. In Adblock Plus, we try to maintain, and keep updated, some hopefully decent documentation about filters: https://help.eyeo.com/adblockplus/how-to-write-filters#elemhide_css
We provide also a cheat-sheet here: https://adblockplus.org/filter-cheatsheet so I hope these are welcome extras to your article.
Needless to say that Adblock Plus allows the same trick you explained in here, but there’s one thing I’d like to tell you: "only a psycho would use Twitter without dark theme on a dark themed browser/console" 😜
1 point
3 years ago
Re: dark theme mixup combo: 😃 I like to keep my brain on it’s toes, and my toes on the floor.
1 point
3 years ago
here are the relevant docs for ublock origin as well https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#specific-generic
[Commento](https://commento.io)