

Show HN: JavaScript snippet to highlight new posts - whichdan

Hi all. I wanted an easy way to highlight new posts, without basing it on the last time I visited a page. The snippet is as follows, if any of you folks would like to use it:<p><pre><code>  &#x2F;**
   * Usage: highlight(&#x27;newpost&#x27;, 3, &#x27;hours&#x27;);
   *
   * This will add the class &#x27;newpost&#x27; to any post made within
   * the past 3 hours. This includes, for example:
   *
   * 3 hours ago
   * 45 minutes ago
   * 22 seconds ago
   *&#x2F;
  function highlight(className, number, type) {
    var types = [&#x27;second&#x27;, &#x27;seconds&#x27;,
                 &#x27;minute&#x27;, &#x27;minutes&#x27;,
                 &#x27;hour&#x27;, &#x27;hours&#x27;,
                 &#x27;day&#x27;, &#x27;days&#x27;];

    &#x2F;&#x2F; Types are inclusive, so if we filtered to &#x27;minutes&#x27;, then
    &#x2F;&#x2F; we always want posts that were made &#x27;seconds&#x27; ago.
    types = types.slice(0, types.indexOf(type) + 1);

    &#x2F;&#x2F; Any link with &#x27;item?id&#x27; is assumed to be a timestamp.
    var posts = document.querySelectorAll(&#x27;a[href*=&quot;item?id&quot;]&#x27;);

    &#x2F;&#x2F; Loop through the number of posts, since we need to access
    &#x2F;&#x2F; each post using NodeList#item.
    for(var i = 0; i &lt; posts.length; i++) {
      var post = posts.item(i);

      try {
        &#x2F;&#x2F; The leftmost integer.
        var label_number = parseInt(post.innerHTML.match(&#x2F;^\d+&#x2F;));

        &#x2F;&#x2F; The label (a value that maps up to the types array).
        var label_type = post.innerHTML.match(&#x2F;^\d+ (.+?) ago$&#x2F;)[1];
      }
      catch(e) {
        &#x2F;&#x2F; If either of the matches fail, it&#x27;s due to an
        &#x2F;&#x2F; irrelevant link.
        continue;
      }

      &#x2F;&#x2F; Continue if the label is out of bounds.
      &#x2F;&#x2F; For instance, &#x27;days&#x27; when filtering by &#x27;minutes&#x27;.
      if(types.indexOf(label_type) === -1) continue;

      &#x2F;&#x2F; Continue if the label type matches, but the number
      &#x2F;&#x2F; is larger than what we&#x27;re filtering for.
      if(type === label_type &amp;&amp; label_number &gt; number) continue;

      &#x2F;&#x2F; td &gt; div &gt; span &gt; a
      post.parentNode.parentNode.parentNode.className += &#x27; &#x27; + className;
    }
  }</code></pre>
======
tzm
Thanks for sharing. Here's a bookmarklet that injects a custom style:

javascript:void%20function(){function%20e(e,t,a){var%20n=%22.%22+e+'{%20padding-
left:%2030px;background-
image:%20url(%22[http://www.fasttrackcalltaxi.co.in/ft_clickyourtaxi/App_Imag...](http://www.fasttrackcalltaxi.co.in/ft_clickyourtaxi/App_Images/new_icon.gif%22\);%20background-
repeat:%20no-
repeat;%20}',c=document.head||document.getElementsByTagName\(%22head%22\)\[0\],d=document.createElement\(%22style%22\);d.type=%22text/css%22,d.styleSheet%3Fd.styleSheet.cssText=n:d.appendChild\(document.createTextNode\(n\))),c.appendChild(d);var%20o=[%22second%22,%22seconds%22,%22minute%22,%22minutes%22,%22hour%22,%22hours%22,%22day%22,%22days%22];o=o.slice(0,o.indexOf(a)+1);for(var%20r=document.querySelectorAll('a[href*=%22item%3Fid%22]'),i=0;i%3Cr.length;i++){var%20s=r.item(i);try{var%20l=parseInt(s.innerHTML.match(/^\d+/)),u=s.innerHTML.match(/^\d+%20(.+%3F)%20ago$/)[1]}catch(m){continue}-1!==o.indexOf(u)%26%26(a===u%26%26l%3Et||(s.parentNode.className+=%22%20%22+e))}}e(%22newpost%22,3,%22hours%22)}();

Screenshot: [https://s3.amazonaws.com/tz-www-
misc/hn.highlighter.2015-02-...](https://s3.amazonaws.com/tz-www-
misc/hn.highlighter.2015-02-15+19_28_22.gif)

