[HN Gopher] Show HN: Display a bell emoji on HN comments you hav...
___________________________________________________________________
Show HN: Display a bell emoji on HN comments you haven't read yet
Author : linkdd
Score : 99 points
Date : 2021-09-15 13:36 UTC (9 hours ago)
(HTM) web link (gist.github.com)
(TXT) w3m dump (gist.github.com)
| jove2001 wrote:
| Hacker News: The only place on the net where you actually should
| read the comments.
| ModernMech wrote:
| Better than just upvoting everything, which is how I track this
| now.
| Y_Y wrote:
| You've made me realise I do something similar. It's probably a
| good idea that you're forbidden from downvoting direct replies
| though, because that's often a temptation.
| [deleted]
| franhield wrote:
| Isn't the GitHub title quite different from the title? Great
| code, though; Javascript can do wonders in the browser.
| rashkov wrote:
| This is so useful! I've previously resorted to searching the page
| for the word "minutes" to see the recent comments, but that's
| been unsatisfying.
|
| I only wish that we didn't have to use third party extensions for
| loading scripts like this. I can never quite bring myself to
| trust them with full access to all of my pages. This really
| should be a part of the browser functionality already.
| linkdd wrote:
| The extension I listed stores your scripts in localStorage.
|
| But I agree, it should be a browser feature.
| riofoxx wrote:
| T.o a.s.s.i.s.t y.o.u i.n t.r.a.d.e.s f.o.r b.e.t.t.e.r
| i.m.p.r.o.v.e.m.e.n.t on c.r.y.p.t.o.c.u.r.r.e.n.c.y
| W.h.a.t.s.A.p.p (+13052395906)
| chirau wrote:
| Dumb question... so how do I actually use this?
| linkdd wrote:
| There is no such thing as a dumb question.
|
| There is a Chrome extension "Custom Javascript for Website"
| (link in the first line of the snippet) that lets you add JS
| scripts to any website.
|
| Install the extension, then while on hackernews, open the
| extension and copy-paste the snippet into it.
| chirau wrote:
| Thank you for the assistance. So do I have to repeat the
| copy-paste each time I open HN? Also, it didn't work for me
| the first time, or now.
| silisili wrote:
| So, I get and appreciate the lack of notifications and
| distractions on HN.
|
| That said, I'd really like a way to find, distraction free(so in
| some submenu), reply comments.
|
| The current way seems narcissistic, as I have to go through my
| whole history to see why may have replied. And even then I have
| to do math to figure out if I'd seen it or not.
| c17r wrote:
| I use https://www.hnreplies.com/ for that
| silisili wrote:
| Thanks! I was hoping for something on the site, as I don't
| really want to be 'notified'. That said, I just plugged in an
| email I don't check often so that should accomplish it about
| the same. Never knew this existed - thanks again.
| carreau wrote:
| Another chrome extension that does similar things
| https://chrome.google.com/webstore/detail/hckr-news/mnlaodle...
| sorenjan wrote:
| Wouldn't it make more sense to add an "unread" class to the
| comment and style it with css instead of appending new elements?
|
| I also think it would make sense to store the page load time, and
| compare to a comment's post time to determine if it's new instead
| of storing all comment ids.
| linkdd wrote:
| I already have a custom CSS (using Stylus) for Dark Mode.
|
| The CSS is trickier due to the HTML structure.
| sorenjan wrote:
| I was thinking of something like this: let
| style = document.createElement('style');
| style.innerHTML = ".unread::after {content: ':bell:'}";
| document.getElementsByTagName('head')[0].appendChild(style);
| document.querySelectorAll('.athing.comtr').forEach(comm => {
| if (comment is unread) {
| comm.querySelector('.comhead').classList.add("unread");
| } })
|
| That shouldn't collide with other custom CSS, and it avoids
| adding extra elements in the loop.
|
| Edit: I used the actual bell emoji in the code, but HN
| removed that, so I just replaced it with :bell:.
| spowerei wrote:
| this add a slider selector for the time range to consider and
| give higher values of alpha channel to more recent posts.
| const div = document.createElement("div"); div.innerHTML =
| `<div style="position:fixed;top:20px;right:20px;width:40px;backgr
| ound:#ff05;"> <input type="range" orient="vertical"
| id="interval" min="0" max="95" value="30" style="width:100%">
| <label for="interval" style="display:block"></label>
| </div>`; const input =
| div.firstElementChild.firstElementChild; const label =
| input.nextElementSibling; document.body.appendChild(div);
| const formatTime = (mins) => { if (mins > 60) {
| return `${Math.floor(mins / 60)}h ${mins % 60}m`; }
| return `${mins}m`; }; const extrapolate = (val) => {
| val = val * 2; for (let t = 30; t <= 150; t += 30) {
| val += Math.max(0, val - t); } return val;
| }; input.oninput = () =>
| colorStuff(extrapolate(input.value)); const colorStuff =
| (interval_minutes) => { label.innerText =
| `${formatTime(interval_minutes)}`; const comments =
| Array.from(document.getElementsByClassName("athing comtr"));
| dates = Array.from(document.getElementsByClassName('age'));
| dates.sort((c1, c2) => Date.parse((c2).title) -
| Date.parse((c1).title)); const now = new Date();
| const timestamp = now.getTime() + now.getTimezoneOffset() * 60E3;
| comments.forEach((c) => { const commentDateString =
| c.getElementsByClassName("age")[0].title; const
| diff=(timestamp-
| Date.parse(c.getElementsByClassName('age')[0].title))/60E3;
| const diff2=(Date.parse(dates[0].title)-Date.parse(c.getElementsB
| yClassName('age')[0].title))/60E3; if (diff <
| interval_minutes) { const alpha = (1 - diff2 /
| interval_minutes)**6; c.style.backgroundColor =
| `rgba(100, 255, 100, ${alpha})`; } else {
| c.style.backgroundColor = "rgba(255, 255, 255,0)"; }
| }); }; colorStuff(extrapolate(input.value));
| kklisura wrote:
| While we are here, let me plug my chrome extension that tracks
| comments which have been read https://github.com/kklisura/hn-
| comment-tracker
|
| The read comments have striped background and orange bar on the
| right, so identifying unread is easy.
| mxstbr wrote:
| Additionally, I'm a big fan of the Hacker News Notifications
| extension[0] to keep track of responses to my conversations.
|
| It adds a small bell icon with a dropdown to the navbar that
| shows new replies to your posts and comments. 10/10, would
| recommend.
|
| [0]: https://chrome.google.com/webstore/detail/hacker-news-
| notifi...
| punnerud wrote:
| What if we could add our own JavaScript within our user settings
| on HN?
| linkdd wrote:
| That would be a new feature. The philosophy of HN is to evolve
| slowly and carefully.
|
| This surely would break someone's workflow ;)
|
| https://xkcd.com/1172/
| punnerud wrote:
| Not break anything, just option "hidden" under settings. Just
| as they open the possibility to add HEX value to change the
| color on HN when you reach enough points on HN
| linkdd wrote:
| HN would need to store the scripts and load them. This
| would mean slower loading time, and increased maintenance
| on databases.
|
| Also open the door to bugs like "why is this loading the
| scripts of another user?" which can be security threats.
|
| It's "just" a simple feature, but it still have costs. I'd
| rather have the browser allowing me to load scripts without
| relying on an extension.
| pcr910303 wrote:
| I'm not sure if this is something I am fine to say, but I've
| never signed an NDA or something so I'll just say: (Moderators,
| feel free to hide this comment if you would rather not like an
| influx of alpha testers.)
|
| If you sign up to the alpha-testing HN[0], you get access to the
| thread feature, which is... (quoted from my forwarded mail)
|
| > New feature: when you visit a thread, the software now
| highlights
|
| > comments that are new since you last viewed the page. These are
|
| > displayed with an orange (or whatever your topcolor is) bar to
| the
|
| > left of the new comment. Refreshing the page will reset these.
|
| Very useful, I can't imagine having HN without these indicators
| any more.
|
| [0]: https://news.ycombinator.com/item?id=22788678
| brundolf wrote:
| For those who don't want to switch to alpha, I made a
| bookmarklet that lets you enter an amount of time and
| highlights comments made within that amount of time (i.e. "15
| minutes" ago, etc)
|
| https://news.ycombinator.com/item?id=25424560
| jeffdn wrote:
| How do you sign up for it?
| carl_dr wrote:
| Taken from the parent comment :
| https://news.ycombinator.com/item?id=22788678
| sillysaurusx wrote:
| I updated the script so that bells stay until you click on each
| HN comment you read:
| https://gist.github.com/shawwn/d0c370212793eeefdf6ef50468afe...
|
| Surprisingly it doesn't annoy me, because I'm often clicking on
| the comments I read anyway. (Old habit.)
|
| EDIT: I changed it to onmousemove. Feels pretty nice!
| linkdd wrote:
| Awesome, thank you!
| sillysaurusx wrote:
| (Fixed a typo; if you were getting an error, try now. Sorry
| about that!)
| tfsh wrote:
| This is a sweet and simple implementation, however I don't think
| the title "[...] you haven't read yet" is correct. The code
| caches every comment ID which exists in the page, even ones
| outside of the viewport. A more accurate title would be "Display
| a bell emoji on new HN comments".
|
| - Using the JavaScript Intersection Observer may be an
| interesting addition, as this would explicitly differentiate
| comments on the thread which you may not have scrolled down to.
| legrande wrote:
| > This is a sweet and simple implementation
|
| I love one-thing-well items of code instead of large (and thus
| non-secure) abstractions built upon other abstractions. Big fan
| of the K.I.S.S principle
| https://en.wikipedia.org/wiki/KISS_principle
| obventio56 wrote:
| I will point out that that reason this can be so concise is
| because of a set of large foundational abstractions.
| legrande wrote:
| Good point. I never thought of it that way. The modern PC
| is a marvel. On one hand it's a complex mess, on the other
| we can write poetry like that JS snippet, and it all works
| seamlessly (unless you're doing something weird).
| [deleted]
| [deleted]
| myfonj wrote:
| I've made userscript that locally stores hashes of titles and
| comments that stays in viewport for some time period and adds
| some marker to those displayed for the first time (i.e.
| guaranteed to be "unread" for the browser profile, provided
| there was no edit).
|
| https://greasyfork.org/en/scripts/423969-hn-style-unread-con...
|
| It uses IntersectionObserver for "exposition watch" and
| "crypto.subtle.digest" for SHA-1 hashes - I was pleasantly
| surprised those native APIs are enough to get this magic
| working.
|
| It's very POC-ey (absolutely no checks for storage capacity
| etc) but works quite well for me.
|
| E: Actual markers are just light green right borders on
| "unread" items that slightly fades out after "exposition
| timeout". I'm using dark userstyle for HN
| (https://uso.kkx.one/style/71155 ); in default theme they are
| probably too light to be visible.
| sillysaurusx wrote:
| I changed the script so that the bells stay till you mouseover
| each HN comment: https://news.ycombinator.com/item?id=28540049
| bestinterest wrote:
| Nice I added on the below as the Windows emoji is a bit big for
| my liking and keeps the emoji color neutral.
| span.style.cssText = ` font-size: 5px; color:
| transparent; text-shadow: 0 0 0 gray; margin-
| bottom: 2px; vertical-align: middle; display:
| inline-block; `
| garyfirestorm wrote:
| this is really nice! i think i will learn jscript - i have no
| clue what i am getting into but thanks for inspiring
|
| ps im a mechanical engineer
| eCa wrote:
| Nitpicking: Note that JScript[1] is not Javascript. The common
| abbreviation for Javascript is js.
|
| [1] https://en.wikipedia.org/wiki/JScript
| hunter2_ wrote:
| Based on the most recent stable release being 2011, I agree.
| But I found it funny that the article also says "A lot of
| people think that JScript and JavaScript are different but
| similar languages. That's not the case. They are just
| different names for the same language"!
| sillysaurusx wrote:
| I was going to leave a comment complimenting you on your
| awesome HN username, but I try not to go off on too many
| tangents.
|
| However, I notice you have exactly 1337 karma right now. So
| the combination of hunter2 + 1337 is too irresistible not
| to mention. :) https://i.imgur.com/PM1T8DM.jpg
|
| (It's strange that http://bash.org/?244321 "only" has ~40k
| upvotes. I remember upvoting it when I was in high school,
| and it still seems to be working today, so you'd think a
| famous bash.org quote would accumulate more than a mildly
| popular Reddit post worth of upvotes...)
|
| Anyway, have a great week!
| linkdd wrote:
| Ok let's get off-topic because it's not everyday someone
| posts about bash.org. My favorite:
|
| http://bash.org/?835030
| sillysaurusx wrote:
| Hahaa, I love that one.
|
| I remember reading http://bash.org/?5273 as a teenager
| and thinking "What! How could anyone possibly lose a
| _whole_ computer? " But then I lost a fully-working-
| responds-to-ping raspberry pi a few years ago too. :)
|
| Cheers!
| zamadatix wrote:
| Even from the day it was made it was never the same
| language it was however a superset of JavaScript (at the
| time) having several proprietary extensions to the
| language.
| chhickman wrote:
| I use a FireFox plugin that applies CSS for colorizing visited
| links on HN: a:link{ color: orange
| !important; } /* visited link */
| a:visited { color: green !important; }
|
| https://mybrowseraddon.com/custom-style-script.html
| mercora wrote:
| they are already distinguishable by color without any change.
| this is about comments although it marks only comments as new
| it hasn't seen before regardless if you read them or not.
| lambdaba wrote:
| This gave me the idea that I would like that standard
| _everywhere_. This convention is just so helpful. Maybe
| replacing with an outline on more heavily styled links, so as
| not to break layouts too much.
| lolinder wrote:
| Is it not the standard everywhere? All my links, on every
| page, are lighter when visited. I suppose some sites might
| override this, but I've rarely seen it.
| Nition wrote:
| It is standard everywhere unless a site explicitly overrides
| it.
|
| For example, do a Google search and click one of the links.
| Now do the same search again. The link you followed last time
| is now purple instead of blue. On Hacker News the links go a
| lighter grey.
| lambdaba wrote:
| Yes I know, but a lot of websites override it, I'd just
| like a unified style everywhere. To be honest I'd like
| consistent styling in a lot more places and I know of some
| add-ons that get pretty close but not quite.
| Nition wrote:
| Sorry, yeah, so you meant it'd be nice to have a
| feature/add-on that overrides the link colouring to be
| the same on every site. Absolutely. We had that once, in
| those distant days before CSS...
|
| ----
|
| Edit:
|
| This works on Firefox:
|
| - Install Stylus[0].
|
| - Click the toolbar icon and choose Manage.
|
| - Click "Write new style"
|
| - Enter and save this: a:link {
| color: #0000EE; } a:visited {
| color: #551A8B; }
|
| [0] https://addons.mozilla.org/en-US/firefox/addon/styl-
| us/
|
| ----
|
| Edit 2:
|
| In Firefox WITHOUT installing any add-ons:
|
| - Go to about:config
|
| - Set toolkit.legacyUserProfileCustomizations.stylesheets
| to true
|
| - Press Alt, click Help -> More Troubleshooting
| Information
|
| - Next to "Profile Folder", click Open Folder
|
| - Create a new folder there called "chrome"
|
| - Make a file in that folder called userContent.css
|
| - Enter the following CSS: a:link {
| color: #0000EE !important; }
| a:visited { color: #551A8B !important;
| }
|
| - Restart Firefox
| kuschku wrote:
| For reddit, this is massively easier to implement, as each
| comment contains in markup an accurate timestamp.
|
| That way the script only has to store the timestamps on which you
| visit a comment section, not the comment ids.
|
| Additionally, that way you can select "highlight all comments
| since visit [...]" with a dropdown from which you can choose out
| of all recent visits you did.
|
| Sadly, Hacker News does not provide any such metadata in the
| markup. (Just like the comment formatting is shit, and the markup
| structure is as well. HN should just copy the nesting markup and
| formatting 1:1 from reddit, and it'd be massively improved
| already).
| kogir wrote:
| Comment item ids are sequential (unless that's changed since I
| last looked). You can perform relative ordering operations
| using them just like you could dates.
| sorenjan wrote:
| Next to your comment there's a timestamp for when it was
| posted, with the title "2021-09-15T14:18:16". This is available
| for all comments as far as I can see. In what way is this
| inaccurate?
| MrGilbert wrote:
| I think I like the outlined approach (minus the rant) that GP
| described - it sounds kind of simple, yet elegant.
| linkdd wrote:
| But it would break the workflow of so many people relying on
| that shitty structure!
|
| https://xkcd.com/1172/
|
| I like the fact that HN is so "stable".
| jraph wrote:
| HN is so "table", I'd say.
| Santosh83 wrote:
| HN does not aim to be infinite scroll social media which addicts
| you and makes you keep checking and re-checking for more
| obsessively. It is purposefully barebones so that you're not
| tempted to read every single comment and waste time.
| junon wrote:
| > makes you keep checking and re-checking for more obsessively.
|
| Yet I do this more on HN than any other site since I don't know
| if someone's responded to me.
|
| Noprocrast was... helpful, I guess, but I found myself racing
| to make poor quality responses sometimes, or HN was constantly
| locked out whenever I wanted to take a short break, instead of
| being able to take the time to respond with a thoughtful
| answer.
| andrewzah wrote:
| You can get notified of replies via email:
| https://www.hnreplies.com/
| kjaftaedi wrote:
| Responses aren't necessarily "to you"
|
| If you are going to post a comment that does nothing more
| than respond to the previous person, you are doing a
| disservice by forcing thousands of people to read text that
| is likely irrelevant or unhelpful to them.
|
| The fact that this site is designed to prevent this behavior
| is one of its stronger points IMHO
| junon wrote:
| You've completely missed the point of why I want response
| notifications.
| kjaftaedi wrote:
| I get where you're coming from, but unless you're the
| only expert in your field, I think it's better to have
| group discussions.
|
| Response notifications will primarily be used by people
| to dominate the chat, and your use case doesn't negate
| that.
| junon wrote:
| I think you're accusing me a of a lot of personality
| traits I do not possess. Why am I not allowed to respond
| to people if I so choose? There isn't a limited amount of
| allowed responses.
| BelenusMordred wrote:
| Nice, I'd really like one to collapse all second-level comments.
| There's enough 1000+ comment links now that the top comment takes
| up the entire page and everyone wandering in tends to just
| respond to that or the children rather than numerous others
| making valid points.
| leephillips wrote:
| The extension "Refined Hacker News" for Chrome lets you click
| to collapse a comment thread.
| rashkov wrote:
| This is now a feature of hacker news itself, as of a year or
| two ago (?). No extension required. I think the parent
| comment wants a feature to collapse all comment threads at
| the same time, so only the top level comments are visible.
| leephillips wrote:
| Ah, that's right. (It's the [-] link in the comment
| header.) RFN does have a link at the top of the story page
| called "toggle all commments," but I guess it's broken, as
| it only seems to toggle the first comment. The extension
| does have a convenient feature, a [collapse root] link on
| each comment in a thread, so you can collapse the thread
| from within it, without having to find its origin.
| plibither8 wrote:
| Hi! Creater of Refined Hacker New here :).
|
| You mentioned that the "toggle all comments" button is
| broken, could you elaborate a bit more on that, and if
| possible open a GitHub issue for it? Thanks a lot :D.
|
| Apart from that, with RHN you can navigate through the
| comments using the "J" and "K" keyboard keys and Press
| "Enter" on the highlighted comment to toggle it. Hope
| that helps too, cheers :)
| leephillips wrote:
| Thanks for the great extension, it makes reading HN
| more...refined.
|
| Well, I tried the [toggle all comments] button on a
| couple of stories before posting my comment, and it was
| only toggling the first comment. But I did more testing
| for this reply, and now it's working as advertised. I
| can't explain that, but if I every figure out the
| conditions that prevent it from working, I'll open an
| issue.
| plibither8 wrote:
| Alright, glad it's working now! And thanks for the kind
| words, appreciate it.
| appleflaxen wrote:
| Can you elaborate? The feature seems nice, but I access HN
| on multiple browsers for which a plugin isn't workable.
|
| Looking at settings and links on the page I don't see any
| functionality like you describe.
| jraph wrote:
| Click on [-] at the end of a comment header with
| JavaScript enabled.
| qiqitori wrote:
| Not the same, but similar? I sometimes use this bookmarklet to
| jump to the next root thread: javascript:if
| (typeof hn_next_comment_to_jump_to == 'undefined') { pkqcbcnll
| = 0 }; document.querySelectorAll("img[src='s.gif'][width='0']")
| [hn_next_comment_to_jump_to++].scrollIntoView(true);
| sillysaurusx wrote:
| There was a typo (pkqcbcnll should've been
| hn_next_comment_to_jump_to). Here's a fixed version:
| javascript:if (typeof hn_next_comment_to_jump_to ==
| 'undefined') { hn_next_comment_to_jump_to = 0 }; document.que
| rySelectorAll("img[src='s.gif'][width='0']")[hn_next_comment_
| to_jump_to++].scrollIntoView(true);
|
| Thanks for this!
| [deleted]
| alin23 wrote:
| Adding the following lines to the script posted by OP should
| add buttons for doing just that: var
| collapseButton = document.createElement("button")
| collapseButton.textContent = "Collapse level 2 comments"
| collapseButton.onclick = (event) => document
| .querySelectorAll('td[indent="1"]+td+td.default .togg')
| .forEach((button) => { if (button.textContent
| == "[-]") { button.click()
| } }) var expandButton =
| document.createElement("button")
| expandButton.textContent = "Expand level 2 comments"
| expandButton.onclick = (event) => document
| .querySelectorAll('td[indent="1"]+td+td.default .togg')
| .forEach((button) => { if (button.textContent
| != "[-]") { button.click()
| } }) var table =
| document.querySelector("table.comment-tree")
| table.parentNode.insertBefore(collapseButton, table)
| table.parentNode.insertBefore(expandButton, table)
| leppr wrote:
| This should do the trick: [
| ...document.querySelectorAll('td.ind[indent="1"] + td.votelinks
| + td.default .comhead > .togg') ].forEach(div => div.click())
| Mindless2112 wrote:
| https://hackerweb.app/ does this for items with a lot of
| comments.
|
| HN should copy this feature. The top thread dominates the
| discussion all too often.
| leppr wrote:
| Nice short implementation.
|
| Here's a similar userscript I use:
| https://greasyfork.org/en/scripts/18066-hn-comment-trees/
| lambdaba wrote:
| Is there a "diff" type addon for all web pages? That would be so
| helpful. To be clear, I'd like a diff against stuff that I
| actually could've read (that's been in the viewport) not simply
| loaded.
___________________________________________________________________
(page generated 2021-09-15 23:02 UTC)