20 votes

UserScript that hides votes like in the recent experiment

For those who want to prolong the experiment, here is a userscript to help:

// ==UserScript==
// @name     tildes
// @version  2
// @grant    none
// @namespace   tildes.net
// @include     https://tildes.net/*
// ==/UserScript==

document.querySelectorAll('.is-comment-mine .comment-votes').forEach((v) => v.parentNode.removeChild(v));

['.btn-post-action[name="vote"]', '.btn-post-action[name="unvote"]'].forEach((sel) =>
  document.querySelectorAll(sel).forEach((b) => b.innerText = b.innerText.replace(/ \(.*/, '')));

I am fairly sure that this syntax requires ES6, so if your browser is not compatible, you need to reimplement this using ES5. Should be straightforward but a bit more verbose.

9 comments

  1. [6]
    Wes
    Link
    Nice work. I was thinking of doing the same thing (though probably as a userstyle instead of userscript). I'll be curious to see what the conclusions will be from the experiment. I'd be glad to...

    Nice work. I was thinking of doing the same thing (though probably as a userstyle instead of userscript).

    I'll be curious to see what the conclusions will be from the experiment. I'd be glad to see the removal of scores made permanent, as I felt like I enjoyed browsing more that way. Also okay would be a user pref to hide them (though I still don't enjoy being judged on my own visible score so much). But we'll see! The feedback seemed pretty mixed as a whole so I don't know what to expect.

    Writing a style/script seems like a good way to go in the mean time. That's my current approach to hiding votes on reddit as well (who will never remove karma).

    4 votes
    1. [5]
      unknown user
      Link Parent
      It would be great if you could make it as a user style. That was what I thought of doing at first but I don't think you can use regular expressions in CSS.

      It would be great if you could make it as a user style. That was what I thought of doing at first but I don't think you can use regular expressions in CSS.

      5 votes
      1. [3]
        Bauke
        Link Parent
        It's very ugly and there's probably a better way but it works: .btn-post-action[name="vote"], .btn-post-action[name="unvote"] { text-indent: -9999px; line-height: 0; }...

        It's very ugly and there's probably a better way but it works:

        .btn-post-action[name="vote"],
        .btn-post-action[name="unvote"] {
          text-indent: -9999px;
          line-height: 0;
        }
        
        .btn-post-action[name="vote"]::after,
        .btn-post-action[name="unvote"]::after {
          display: block;
          line-height: initial;
          text-indent: 0;
        }
        
        .btn-post-action[name="vote"]::after {
          content: 'Vote';
        }
        
        .btn-post-action[name="unvote"]::after {
          content: 'Voted';
        }
        
        .is-comment-mine .comment-votes {
          display: none;
        }
        
        9 votes
        1. [2]
          unknown user
          Link Parent
          Thanks! Can't test it now but can't you use content: for the elements themselves instead of :after?

          Thanks! Can't test it now but can't you use content: for the elements themselves instead of :after?

          3 votes
          1. Bauke
            Link Parent
            No, content only works on ::after and ::before pseudo-elements. More info.

            No, content only works on ::after and ::before pseudo-elements. More info.

            3 votes
      2. Wes
        Link Parent
        Ah good point. I thought I would just display: none any relevant vote selectors, but I guess the Vote buttons have the totals on them. You could probably do a hack with max-width and overflow:...

        Ah good point. I thought I would just display: none any relevant vote selectors, but I guess the Vote buttons have the totals on them.

        You could probably do a hack with max-width and overflow: hidden or something, but that's not so clean.

        Maybe I'd submit a quick PR to get a span tag on the button. :)

        1 vote
  2. [3]
    Keegan
    Link
    Awesome. Thanks for posting this. I really liked that experiment, and am sort of sad to see it not be present now.

    Awesome. Thanks for posting this. I really liked that experiment, and am sort of sad to see it not be present now.

    3 votes
    1. [2]
      unknown user
      Link Parent
      No problem! Just noticed a bug tho: when you upvote a comment, it displays the number of upvotes. Goes away after a reload tho.

      No problem! Just noticed a bug tho: when you upvote a comment, it displays the number of upvotes. Goes away after a reload tho.

      3 votes
      1. Keegan
        Link Parent
        This is actually exactly what I mentioned wanting in this comment (besides the disappearance after reload, which is still fine though). It's pretty amusing to me that it worked out like this lol.

        This is actually exactly what I mentioned wanting in this comment (besides the disappearance after reload, which is still fine though). It's pretty amusing to me that it worked out like this lol.

        4 votes