HN Explorer

4 comments

[ 3.5 ms ] story [ 23.0 ms ] thread
LinuxBender
This does come up often and it's a good question. I think the easiest way to answer this is that most members of HN use ad blockers like uBlock Origin [0] and other style editing addons that can modify HTML/CSS. Here is an example of using uBlock to add a dark mode to HN. please forgive the color scheme I'm weird, adjust as you see fit [1]

Addons -> uBlock Origin Preferences -> My Filters

    # HN Color
    news.ycombinator.com##html:style(background-color: #080808 !important)
    news.ycombinator.com###hnmain:style(background-color: #121216 !important)
    news.ycombinator.com##.age:style(color: #999 !important)
    news.ycombinator.com##.c00:style(color: #999 !important)
    news.ycombinator.com##.comhead > a:style(color: #dedede !important)
    news.ycombinator.com##.comhead:style(color: #dedede !important)
    news.ycombinator.com##.hnuser:style(color: #999 !important)
    news.ycombinator.com##.subtext > a:link:style(color: #ccc !important)
    news.ycombinator.com##.subtext > a:style(color: #999 !important)
    news.ycombinator.com##.subtext:style(color: #999 !important)
    news.ycombinator.com##.title > a:style(color: #999 !important; background-color: #000 !important)
    news.ycombinator.com##a:link:style(color: #bdbdbd !important)
    news.ycombinator.com##a:visited:style(color: #adadad !important)
    news.ycombinator.com##a:hover:style(color: #fd0000 !important; background-color: #000855 !important)
Adjust the colors to meet your preferences. [1] there is probably a better HTML color chart

Some other uBlock Origin examples specific to HN:

To filter some topics of submissions

    # Filter some topics with regex
    # top (title / url)
    news.ycombinator.com##tr.athing span.titleline > a:has-text(/(itcoin|lockchain|202[3-9]$)/):upward(tr)
    # bottom (stats / comments)
    news.ycombinator.com##tr.athing span.titleline > a:has-text(/(itcoin|lockchain|202[3-9]$)/):upward(tr) + *
To hide usernames to avoid bias some people like this

    # HN Username
    news.ycombinator.com## td > table > tbody > tr > .default > div > .comhead > .hnuser
    news.ycombinator.com##.subline > .hnuser
    news.ycombinator.com##.hider.clicky
    news.ycombinator.com##.hnpast
Hide discussion threads if one wants some news but avoid temptation of discussions taking a break or anti-addiction so to speak, comment out to re-enable discussion threads.

    # HN Thread Comments
    news.ycombinator.com##.subline > [href^="item"]
Along the line of addiction, block Karma view

    # HN Block Karma View
    news.ycombinator.com##.comhead .score:style(overflow: hidden; display: inline-block; line-height: 0.1em; width: 0; margin-left: -1.9em;)
    news.ycombinator.com###hnmain > tbody > tr:first-of-type table td:last-of-type .pagetop:style(font-size: 0!important; color: transparent!important;)
    news.ycombinator.com###hnmain > tbody > tr:first-of-type table td:last-of-type .pagetop > *:style(font-size: 10pt; line-height: 1.45em;)
    news.ycombinator.com###logout::before:style(content: "|"; padding: 0.25em;)
    news.ycombinator.com##form.profileform tbody tr:nth-child(3)
Various add-on links referenced in their repo [0]

[0] - https://github.com/gorhill/uBlock

[1] - https://www.rapidtables.com/web/color/html-color-codes.html

xeckr
Build your own and share it.