Show HN: Collapse HN Comments | Hacker News Reader

Show HN: Collapse HN Comments

github.com

141 pointsIgglyboo57 comments

Little chrome extension I made to collapse comments on HN, feel free to use it if you want.

I've been using this: http://hckrnews.com/about.html#extensions

In addition to collapsing threads, it also tastefully identifies new comments: http://i.imgur.com/qs6FDRU.png

It doesn't mess with the layout beyond that, which I like.

By the way, http://hckrnews.com/ itself is wonderful. It's HN, but in chronological order. That seems like a bad thing, but in fact there are only a few dozen submissions per day, and it's easy to pick out the interesting ones.

Does this have a 'Dark' mode? It looks great but I use the following Stylish script [1] for UI so its not like staring at a lightbulb all day.

[1] https://userstyles.org/styles/81626/jellybeans-hacker-news-w...

Have you ever used f.lux? https://justgetflux.com/ it adjusts the colour temperature of your display(s) based on the time of day. I often use my laptop in bed with the brightness turned down and colour temperature at 2700k, makes the screen look like it's backlit by candles.

Or Redshift on Linux.

f.lux work in linux these days too.

Yeah Flux is great, have used it for years, but dark mode it much different, basically inverts the colors 100%, HN for me has a black background, and grey text. Super easy on the eyes. I do this in all my IDEs, reddit, HN, stackoverflow, etc....

I've seen this linked to, but I never understood what the selling point was. It turns out I never realized that it sorted the posts in chronological order according to when they first appeared on the front page. Pretty cool! This definitely feels good for someone like me who refreshes the front page repeatedly throughout the day. I don't have to expend energy trying to figure out what's new.

Nice, I'll try that. Here's my bookmarklet for highlighting recent comments (subtly for <1h old, less subtly for <10m old):

  javascript:var jq=document.createElement("script");jq.src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName("head")[0].appendChild(jq);window.setTimeout(function(){jQuery.noConflict();jQuery("span.comhead:contains('minutes ago')").parent().parent().css("background","#fdfdf0");jQuery("span.comhead:contains(' 0 minutes ago'), span.comhead:contains(' 1 minutes ago'), span.comhead:contains(' 2 minutes ago'), span.comhead:contains(' 3 minutes ago'), span.comhead:contains(' 4 minutes ago'), span.comhead:contains(' 5 minutes ago'), span.comhead:contains( '6 minutes ago'), span.comhead:contains(' 7 minutes ago'), span.comhead:contains(' 8 minutes ago'), span.comhead:contains(' 9 minutes ago'), span.comhead:contains(' 10 minutes ago') ").parent().parent().css("background","#ffffe9")},500)

It may not have been clear from sillysaurus3's comment, but the "hckrnews" extension defines "new" differently. It keeps a database of the last time that you've visited each page, and highlights all the comments that are new since your last visit. I use it as well, and it's great. When I access HN from a browser without it it feels practically unusable. My only issue with it is that I sometimes accidentally click on the "collapse thread" option. Ironically, considering the topic of this thread, I don't use or want that functionality, and would prefer an option to disable it. But highlighting the posts since the last visit is fabulous!

I've been using the Hacker News Enhancement Suite extension for Chrome for so long I couldn't imagine using the site with out it.

https://chrome.google.com/webstore/detail/hacker-news-enhanc...

edit: I'll also mention that I use http://hckrnews.com/ as my frontpage for HN.

Highly recommended. Of all the Hacker News styles I've tried, this has been the only one that I've used consistently.

Notably, it preserves the compactness of the front page. A lot of other styles tend to space out stories on the front page too much, which makes it harder to read through.

I do wish there was a similar theme for Firefox.

This one is better than (http://hckrnews.com/about.html#extensions), because after collapsed, the horizontal position doesn't shift. Haven't tried the OP's though.

I love how every comment here links to a different implementation.

I also made one (for Firefox/Greasemonkey),

https://github.com/tom-szczarkowski/hn-stuff

It almost seems as if it's an essential feature for browsing HN in a sane way.

Naw, everyone replying to the top comment in a post in order to be seen is probably fine.

I’ve also hacked bigger voting buttons (for the sake of Fitt’s law [1]) and some indentation marks [0] which I find quite helpful, both included with ~/.js [2].

[0]: https://i.imgur.com/Bp3ra28.png

[1]: https://en.wikipedia.org/wiki/Fitts%27s_law

[2]: https://github.com/defunkt/dotjs

    td { vertical-align: top }
    td > img { background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.3) 38px, rgba(0,0,0,0.3) 40px); margin-top: 4px; height: 12px!important }
    div.votearrow { padding-bottom: 3px; background: url('https://i.imgur.com/UVPQXRX.png') !important; width: 20px!important;}

I still don't get why HN is against adding features like this or open links in new windows/tab AS AN OPTION.

I get that some people don't want anything to change on HN - no problem - but what is the harm in adding features that we individually can turn on that would not effect anyone else? Aka, add the features but have them off by default.

Their desired audience is hackers.

Pure speculation, but maybe they know the best hackers will find solutions around all this (e.g. all the extensions linked to in this thread).

I have it on good authority that comment collapse is rolling out at some point in the near future.

Yes, I thought that was one of the touted benefits of moving to the new API.

they need a new API to manipulate nested DOM elements in the web browser? Maybe they're doing more like making each comment atomic so you can dig deep into nests, but at the surface adding such a toggle would be a very trivial thing to implement via HTML/JS.

I think its ridiculous that something with so much traction gets so little love and people have to create extensions to fix some of the basic site interactions.

They needed an API so that third-party tools could stop relying on scraping, and so the HTML could be changed without breaking them.

On Firefox I've been using HN Utility Suite.

https://addons.mozilla.org/en-us/firefox/addon/hn-utility-su...

Cool! For non chrome people, I've been using this bookmarklet since forever

    javascript:(function()%7Bfunction%20getScript(url,success)%7Bvar%20script=document.createElement('script');script.src=url;var%20head=document.getElementsByTagName('head')%5B0%5D,done=false;script.onload=script.onreadystatechange=function()%7Bif(!done&&(!this.readyState%7C%7Cthis.readyState=='loaded'%7C%7Cthis.readyState=='complete'))%7Bdone=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script)%7D%7D;head.appendChild(script)%7DgetScript('//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',function()%7Bif(typeof%20jQuery!=='undefined')%7Bif(!$('body').hasClass('collapsible-comments'))%7B$('body').addClass('collapsible-comments');var%20span_html='%3Cspan%20style=%5C'cursor:pointer;margin-right:10px;%5C'%20class=%5C'expand-handle%5C'%3E%5B-%5D%3C/span%3E';if(window.location.href.indexOf('item?id=')!=-1)%7B$('center%20%3E%20table%20%3E%20tbody%20%3E%20tr:eq(2)%20%3E%20td%20%3E%20table:eq(1)%20span.comhead').prepend(span_html)%7Delse%20if(window.location.href.indexOf('threads?id=')!=-1)%7B$('center%20%3E%20table%20%3E%20tbody%20%3E%20tr%20%3E%20td%20%3E%20table%20span.comhead').prepend(span_html)%7D$('.expand-handle').live('click',function()%7Bcurrent_level_width=parseInt($(this).closest('tr').find('td:eq(0)%20%3E%20img').attr('width'),10);$(this).closest('table').closest('tr').nextAll().each(function(index,el)%7Bvar%20elWidth=parseInt($('tbody%20%3E%20tr%20%3E%20td%20%3E%20img',this).attr('width'),10);if(elWidth%3Ecurrent_level_width)%7Bif(elWidth%3C=inner_level_width)%7Binner_level_width=1000;$(this).hide()%7Dif(inner_level_width==1000&&$('.comment',this).css('display')=='none')%7Binner_level_width=elWidth%7D%7Delse%7Breturn%20false%7D%7D);inner_level_width=1000;$(this).text('%5B+%5D').addClass('expand-handle-collapsed').removeClass('expand-handle');$(this).closest('div').nextAll().hide();$(this).closest('div').parent().prev().hide();$(this).closest('div').css(%7B'margin-left':'18px','margin-bottom':'5px'%7D)%7D);$('.expand-handle-collapsed').live('click',function()%7Bcurrent_level_width=parseInt($(this).closest('tr').find('td%20%3E%20img').attr('width'),10);$(this).closest('table').closest('tr').nextAll().each(function(index,el)%7Bvar%20elWidth=parseInt($('tbody%20%3E%20tr%20%3E%20td%20%3E%20img',this).attr('width'),10);if(elWidth%3Ecurrent_level_width)%7Bif(elWidth%3C=inner_level_width)%7Binner_level_width=1000;$(this).show()%7Dif(inner_level_width==1000&&$('.comment',this).css('display')=='none')%7Binner_level_width=elWidth%7D%7Delse%7Breturn%20false%7D%7D);inner_level_width=1000;$(this).text('%5B-%5D').addClass('expand-handle').removeClass('expand-handle-collapsed');$(this).closest('div').nextAll().show();$(this).closest('div').parent().prev().show();$(this).closest('div').css(%7B'margin-left':'0','margin-bottom':'-10px'%7D)%7D)%7D%7D%7D);var%20current_level_width=0;var%20inner_level_width=1000%7D)();

Amazing, thank you.

This works great! Firefox users: you can simply drag that text to your bookmarks bar.

Thanks. Works in chrome too btw

Awesome! This goes right into my userscripts.

I built a Chrome Extension to help myself better identify hot content on HN years ago and can't live without it.

https://chrome.google.com/webstore/detail/social-hotness/aha...

I use, and have been very happy with, the Chrome extention HackerNew https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...

Here's mine: https://github.com/insin/greasemonkey/blob/master/hncommentt...

In addition to collapsing, it highlights new comments and shows how many new comments there are on story list pages since you last looked at the full thread.

If you click the "X new" link it adds, it automatically collapses all threads which don't have new comments on page load.

Screenshot of that: https://twitter.com/jbscript/status/462657449497874432/photo...

I use Hacker News Threadify: https://github.com/scouttyg/hacker-news-threadify available as bookmarklet or Grease Monkey script.

Small world, this is my repo! It actually originally was created by https://github.com/giu/hacker-news-threadify -- I forked it, made some fixes, and submitted it back to him (https://github.com/giu/hacker-news-threadify/commit/cfd57f58...).

Little chrome extension I made for personal use, feel free to use it if you want.

It will allow you to collapse comment trees on HN.

On HN Most discussions are stolen by remotely related comments.. This extension helps to dig them for me. Thanks.

All I'd like is to be able to click on the left margin of a post to skip under it. Sometimes it's just that the first comment has too many replies and I'd like to jump past it easily.

That's a really nice HCI idea. Maybe not too discoverable but very very easy to "trigger" when you want it.

I have also wanted this for a long time. I think you'd have to go back to the top of the parent, or else you'd wind up jumping way past the end of that thread.

I've been using "Reddit-Style Comments for Hacker News" [1] for years, works great.

1: https://github.com/andrewheins/HN-Comment-Hider

edit: This has the collapse button between the voting arrows and username, just like reddit. Seems like something minor, but it's a big detail. (1) I'm used to that location from reddit, and (2) it doesn't move, which isn't the case with many other extensions that have it on the end.

HN will integrate it natively some day.

https://news.ycombinator.com/item?id=8297695

Dropped the .crx onto the Extensions page.

http://i.imgur.com/t46u0C5.png

Thanks Chrome!

I would greatly appreciate if anyone knows how to get around this. I never thought I'd need to jailbreak my browser.

On your Chrome's Extension page there should be a "Developer mode" checkbox on the top-left.

Check that and you should be presented with a "Load unpacked extension" that you can use to install extensions locally.

See line 17, https://github.com/Igglyboo/hn_collapse/blob/master/collapse...

var currentRow = comment.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.nextSibling;

Lotta parentNodes!

Can anyone recommend an extension for firefox?

Works great: https://addons.mozilla.org/en-us/firefox/addon/hn-utility-su...

Collapsed by default HN (bookmarklet):

http://sagargv.blogspot.in/2014/06/flat-hacker-news.html

Despite there being a whole bunch of implementations out there, I had also written one a while ago: https://github.com/thebrokencube/yahnes . It does need some updating, but seems to work well enough for my use (plus, I just wanted to scratch my own itch).

Probably best to sort of consolidate some of these into a few really good ones, but we'll see.

I've just ported the addon for Firefox

https://github.com/AbdullahDiaa/hn-collapse

https://github.com/AbdullahDiaa/hn-collapse/blob/master/hn-c...

Hope that helps.

I've been using Hacker News Collapsible Comments [0], since I enjoy the default look of HN, but wanted to collapse the comments.

[0] https://chrome.google.com/webstore/detail/hacker-news-collap...

I use HN Special [0]. Personally, I'm not a huge fan of the default look of Hacker News and I also couldn't live without features like infinite scrolling, showing which link you just returned from and more accurate domain names .

[0] http://gabrielecirulli.github.io/hn-special/

http://hackbook.club, a Chrome extension.

Follow other HN users, notifications when replied to, notifications when your karma changes, notifications when followed, comment viewing while on article/video/page, and chat.

Quick gif with LICEcap (http://www.cockos.com/licecap/) would do wonders to show how awesome this is...

would be a nice-to-have on the README

http://hn.premii.com/

- You can collapse threads (children and parents).

- Use keyboard shortcuts (j-next / k-prev / x-collapse+next)

- Light/Dark Theme

Thanks for this website! I use it all the time. I love the way comments collapse under the mouse so that the next parent is at the same position the cursor was at. Lets me skim through threads super fast

I've been using this one: http://gabrielecirulli.github.io/hn-special/

Maybe Ycombinator should just stop trying to maintain hacker news and move to a subreddit, and thereby get all the benefits of reddit's features and ecosystem.

Great!

Is there a extension to highlight messages since last visit?

The tree is not really good on longer discussions, you did not find the new messages.

Reply on news.ycombinator.com