Hide a particular question locally

Question

It's common that I read a question and say, "OK, I don't need to see it again."
Then I always think, "Hmm... maybe there is a 'hide' button on the question, so that I won't see it again in my favourite tag list so that I'll be able to focus on the remaining questions which are either new or known by me and interesting to me?" But, unfortunately, the button is never there.

Request: Let's implement that button! No need to clutter the database with it: It looks to me like a perfect candidate for HTML5 local storage. Purely client side.

The fun part is, it can be implemented separately from SO, as a bookmarklet or just an addon for PersonalizedWeb / GreaseMonkey. But I believe it would be indeed useful to have it there available for everyone.

Do you like the idea?

Answer 1

It's an interesting idea. Sort of like "Archive" in Gmail.

I disagree about doing it client side being the best approach, though. I access SO from multiple computers, so having the "hide" data stored locally would be annoying as each computer (really, each browser) would have a different set of hidden questions.

On the other hand, doing it client side does make it possible for "anyone" to go and implement it, which certainly increases the chance that there'll actually be an implementation.

Another approach would be to use a feed reader (like Google Reader) that'll let you hide "read" items. This would work better if the feeds on SO were better. For example, if I go to my "interesting" tab on SO, autodiscovery shows a feed available, but the feed isn't for my "interesting" questions -- it appears to just be the recent questions feed. Anyway, once you have a feed you can just use your feed reader to keep track of which questions you're already done with.

Answer 2

This is a working prototype using LocalStorage. Good enough for my needs- maybe anyone would want to start from here and extend?

I'm using it under Chrome Personalized Web extension, but it should be easy to incorprate anywhere.

<style>
    .kos-hide-button {
        color: #666;
    }
    .kos-hide-button:hover {
        color: red;
        cursor: pointer;
    }   
    .kos-hide-button-hide {
        display: block;
        width: 2em;
        float: right;
        text-align: right;
    }
    .kos-hide-hidden-question {
        display: none;
    }

</style>
<script>
$(document).ready(function() {

    var keyPrefix = "stackoverflow.hiddenquestion.";

    function hideElem(elem) {
        elem.addClass('kos-hide-hidden-question');
    }
    function clearHidden() {

        var toRemove = [];
        for (var i=0; i<localStorage.length; ++i) {
            var key = localStorage.key(i);
            if (key.substr(0, keyPrefix.length) == keyPrefix) {
                toRemove.push(key);
            }
        }
        for (var i=0; i<toRemove.length; ++i) {
            localStorage.removeItem(toRemove[i]);
        }
        $('.kos-hide-hidden-question').removeClass('kos-hide-hidden-question');
    }

    if (!('localStorage' in window && window['localStorage'] !== null)) {
        return;
    }
    $('.question-summary').each(function() {

        var that = $(this);
        var id = keyPrefix + $(this).attr('id');

        $('<span>(-)</span>')
            .addClass('kos-hide-button')
            .addClass('kos-hide-button-hide')
            .attr('title','Hide this question')
            .insertBefore($(this).find('h3'))
            .click(function() {
                hideElem(that);
                var tab = $
                localStorage[id] = 1;
            })
            ;

        var hidden = localStorage[id];          
        if (hidden) {
            hideElem($(this));
        }
    });

    $('<div>Reset hidden questions</div>')
        .addClass('kos-hide-button')
        .appendTo($('#sidebar'))
        .click(function() {
            clearHidden();
        })
        ;
});
</script>

Answer 3

For those using Firefox instead of Chrome, here's a Greasemonkey version of @Kos extension:

// ==UserScript==
// @name        SO Hide Questions
// @namespace   http://stackoverflow.com/
// @include     http://stackoverflow.com/
// @version     1
// @grant       none
// ==/UserScript==

(function() {

    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = "[CSS style from @Kos answer]"
    head.appendChild(style);

    [content of $(document).ready(function() from @Kos answer]

})();

Disclaimer: I am new to both Greasemonkey and JavaScript, but the above seems to work. If not, please comment.

Answer 4

Yet another greasemonkey script with an UI to select questions to hide manually.