Hiding Metrics from the Web

In 2012, artist Ben Grosser released a browser extension called Facebook Demetricator. Once installed, it hid all metrics from Facebook’s interface: likes, comments, notifications, unread messages, and so on.

“What’s going on here is that these quantifications of social connection play right into our (capitalism-inspired) innate desire for more,” he explained.

In creating his extension, Ben questioned why there were so many numbers “a system (and a corporation) that depends on its user’s continued free labor to produce the information that fills its databases.”

All of this in 2012!

More than a decade later, I feel we haven’t internalized Ben’s ahead-of-his-time discoveries. Even alternatives that position themselves as opposites to the abusive practices of commercial platforms like Facebook — think of Bluesky and Mastodon — insist on interfaces packed with numbers. It almost seems like we’ve lost the ability to imagine other models of digital interaction.

Which is pretty bad. Perhaps because they’re so normalized, we don’t notice the pressure numbers put on us. Or at least, I had lost sight of the small daily anxieties that digital metrics create in me.

We also end up forgetting the advantages of metrics-free interactions. Of posting something just because we think it’s cool, useful, or beautiful, regardless of its impact, or the part of that impact that becomes most visible in the form of… numbers.

Here on Manual do Usuário, where I have absolute control over the ~experience, it’s easy to fight the tyranny of numbers. The only ones visible when accessing the blog are the total comments per post and votes in Órbita conversations. (Órbita is a pt_BR Hacker News-like.) I’d remove even those, but I think they serve real functions that outweigh the vanity ones. (If anyone can be tricked by these numbers, I think it’s… just me?)

In other corners of the good old web, the battles are harder.

In this regard, Mastodon¹ is the only major platform that doesn’t shove numbers in people’s faces. The timelines (or feeds) don’t show the amounts of likes and boosts, only how many comments a post received. Which, judging by Manual‘s design, I think is a good arrangement.

On the other platforms I still frequent, Bluesky and LinkedIn, I had to resort to an extension that lets me edit how pages from a domain are displayed. I used Userscripts. On Firefox and Chrome (and derivatives), I recommend Stylebot.

Extensions of this type allow you to modify (or vandalize) pages from specific sites by injecting CSS rules — CSS is a simple language for formatting web pages — and JavaScript, a dynamic language capable of executing countless events in the web browser.

I only understand CSS well, which has more limited possibilities, but it was enough to get rid of all the numbers (or the most visible ones) from Bluesky and LinkedIn.

LinkedIn was easier because the CSS elements use fixed class names. You just need to find them in the source code, using the browser’s own element inspector, and declare them with specific formatting in the extension’s settings.

For example, the field in each post that displays the total likes, comments, and shares is wrapped by a div with the class .social-details-social-counts:

It’s easy! 🥲 Image: Manual do Usuário.

Knowing this, I opened the Userstyles/Stylebot extension and made the following declaration targeting LinkedIn’s domain (using the expression *://*.linkedin.com/*):

When I reloaded the LinkedIn site, the numbers disappeared! CSS is magical ✨ See the difference:

Image: Manual do Usuário.

I spent some time collecting the classes of everything I wanted to hide in LinkedIn’s interface and ended up with a much more pleasant presentation, without numbers and without Microsoft’s begging for me to buy ads on its platform.

Bluesky, on the other hand, uses dynamic CSS class names. It must have to do with some modern way of creating web applications, like React, which I don’t understand. Meta (which created React) uses the same approach on Facebook, except there’s another incentive there — neutralizing ad blocker actions.

I found some random code on GitHub that uses another React element, the data-testid, as a hook to hide numbers from Bluesky’s interface. And… it worked!

Editing sites with these extensions is good medicine against some of the worst diseases of the modern web. To give an example that has nothing to do with hiding numbers, I have a configuration for the Folha de S.Paulo website, a major Brazilian newspaper, that removes the header that keeps appearing when scrolling the page, comments, and some of the most annoying ads.

Fewer numbers, fewer animations, fewer frantic changes and elements that distract or bother. Much of this is achievable with workarounds like the ones I’ve shown here and accessibility options. It’s great that these workarounds exist, but it would be better if calmer, less stimulating interfaces were the norm. Let’s save the strong emotions for other situations — preferably ones that don’t involve screens.

Oh, if you want to use my styles, grab them from this repository. Suggestions for improvements are welcome!