You hate h̶a̶t̶s̶ reputation? Click here to get rid of it

Soo... I recently read a meta-post about the inherent problems of reputation. It listed some things like:

• Confirmation bias.

• Demotivating for low-rep users.

• Hubris and elitism of high-rep users over low-rep users.

• Incorrect representation of competence.

• ...

So I thought to myself: "How would the network be, just without reputation?"

I grabbed the inspector, checked questions, my profile page and the active page and how reputation is displayed.

Then I quickly hacked together the following small user-script (ECMA6) for Greasemonkey that would hide all reputation from sight:

// ==UserScript==
// @name         Reputation Hider
// @namespace    http://gihub.com/Vogel612/ReputationHider
// @version      0.1
// @description  Hides all reputation displays from StackExchange sites
// @author       Vogel612
// @grant        none
// @include      /https?:\/\/(meta\.)?.*\.stackexchange\.com\/.*/
// @include      /https?:\/\/(stackoverflow|serverfault|superuser|askubuntu)\.com\/.*/
// ==/UserScript==
/* jshint -W097 */
'use strict';

let slice = function(collection) {
  return [].slice.call(collection);   
}

let repClasses = [ "rep", "reputation", "reputation-score" ];

let hideRepz = function() {
  repClasses.forEach(clazz => 
    slice(document.getElementsByClassName(clazz))
      .forEach(el => { 
        // this results in minor inconsistencies in CSS, but alas
        el.style.visibility = 'hidden';
      })
    );
}

hideRepz();
// add event listener for live-updates
document.addEventListener("DOMNodeInserted", hideRepz);

This has been running for a while now for me and I like to say it's a refreshing change. That aside:

It hides all reputation numbers on the page. If you're curious you can still find them of course. Also it looks funny on /questions when the active timers are outdented differently, but that's just my OCD going mad there.

It also checks for new questions you load over the notification.

What can I do better in that userscr

It would be better to do this with a user style, e.g. using the Stylus extension, like this:

.rep, .reputation, .reputation-score {
visibility: hidden;
}


One advantage of user styles over scripts is that they're applied as soon as the page starts to load, so you won't see the rep counts flicker briefly while the page is loading. Also, user styles will automatically apply also to new dynamic content loaded e.g. via Ajax (such as new answers posted while you're viewing the page).

If you insist on using a user script, it's possibly to emulate user styles by using @run-at document-start and injecting a custom style element into the page early, like this:

// ==UserScript==
// @name Hide Stack Exchange reputation (demo)
// @namespace http://vyznev.net/
// @description A demonstration of using style injection to emulate user styles
// @author Ilmari Karonen
// @version 1.0
// @license Public domain
// @match ://.stackexchange.com/*
// @match ://.stackoverflow.com/*
// @match ://.superuser.com/*
// @match ://.serverfault.com/*
// @match ://.stackapps.com/*
// @match ://.mathoverflow.net/*
// @match ://.askubuntu.com/*
// @homepageURL http://codereview.stackexchange.com/a/120100
// @grant none
// @run-at document-start
// ==/UserScript==

var css =
".rep, .reputation, .reputation-score {\n" +
" visibility: hidden;\n" +
"}\n";

var style = document.createElement('style');
style.textContent = css;
(document.head || document.documentElement).appendChild(style);


I use this method in my Stack Overflow Unofficial Patch (SOUP) user script (which combines a bunch of more or less minor interface bugfixes and improvements together) to let me efficiently apply both CSS-only and JS-based tweaks from a single user script.

One detail worth noting is that styles injected this way will generally end up being included before any actual site style sheets on the page, which means that they will be overridden by site CSS selectors of equal specificity. In some cases, you may need to use !important and/or various specificity hacks to make sure that your custom styles will take precedence.

StackExchange Code Review Q#120034, answer score: 54