3 ms·
Show HN: Bookmarklet to highlight recent comments in a Hacker News thread
I find myself often checking into a thread to see the latest replies, which usually means visually scanning for comments that have "minutes" in the timestamp.
I decided to automate this (and a bit extra) with a bookmarklet. Create a new bookmark in your web browser and paste the following into the URL field:
javascript:(function() {
const cutoffStr = prompt("Highlight posts in the last:", "1 hour");
function millisForStr(s) {
const [num, unit] = s.split(' ');
const parsedNum = Number(num);
return unit.includes('minute') ? parsedNum * 60 * 1000
: unit.includes('hour') ? parsedNum * 60 * 60 * 1000
: unit.includes('day') ? parsedNum * 24 * 60 * 60 * 1000
: NaN;
}
Array.from(document.querySelectorAll('.age'))
.map(el => {
const interval = millisForStr(el.innerText);
return [el, new Date(Date.now() - interval)];
})
.forEach(([el, date]) => {
const cutoff = new Date(Date.now() - millisForStr(cutoffStr));
if (date >= cutoff) {
el.parentElement.parentElement.parentElement.style.background = "rgba(255, 215, 0, 0.5)";
} else {
el.parentElement.parentElement.parentElement.style.background = null;
}
})
})();
When clicked, you'll be prompted for a string of the form "1 hour" or "23 minutes" or "2 days", and after submitting you'll see all comments on the current page that fall within that interval highlighted with a gold-colored background. Let me know what you think or if you'd like any other small features!
- thro1 6y agoI wrote once similar one using heat map ages ago (document structure on HN changed at least twice in mean time, I didn't care about being logged in), I always wanted to better it a bit to show (it is color-blind friendly half way - right?, when number of comments is to big regarding vertical resolution don't mind the oldest - right?, shall the bar be on the right side maybe? is it right to add new history entry if clicked on timestamp instead of open comment? etc.) - but now you have to/may enjoy it as it is: javascript: var n,r='',A=[],a=document.getElementsByClassName("default"); for(i=0;i<a.length;i++){ n=a[i].firstChild.firstChild.children[1].firstChild; if(!n)break; n=n.href;n=n.substring(n.length-8,n.length); A.push({name:n,element:a[i]}); } A.sort(function(a,b){return b.name-a.name}); var Al=A.length,dh=document.body.clientHeight,ah= dh/Al-1; for(j in A){ var c=(270/Al)*j+30,l=75+(20/Al)*j,s=100- (80/Al)*j, bc="hsl("+c+","+s+"%,"+l+"%)"; A[j].element.style.backgroundColor=bc; A[j].element.setAttribute('onmouseover',"document.getElementById('map_"+A[j].name+"').style.width='40px'"); A[j].element.setAttribute('onmouseout',"document.getElementById('map_"+A[j].name+"').style.width='20px'"); A[j].element.setAttribute('onclick',"document.location.href=document.location.href.split('#')[0]+'#up_"+A[j].name+"';return false;"); r+="<a id='map_"+A[j].name+"' " +"style='display:block;margin-bottom:1px;width:20px; max-height:"+ah+"px;background-color:"+bc+";' " +"href='#up_"+A[j].name+"' " +"onmouseover=document.location.replace(document.location.href.split('#')[0]+'#up_"+A[j].name+"');return true;> </a>" } var sp=document.createElement("div"); sp.setAttribute('style','position:fixed;top:0px;width:80px;height:'+dh+'px;'); document.body.appendChild(sp);sp.innerHTML=r;void('');