Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: A better Hacker News front end

hakkernieuws.vercel.app

Post reply on HN
Print view View original

61–70 of 80 posts

Re: Show HN: A better Hacker News front end

#62

Post by SwiftyBug »

jiehong wrote: post #18
upmostly wrote: post #5

For me, the only lacking feature of vanilla HN is dark mode. I wish they'd add that. Other than that, it's perfect.

IMO, Hackernews's value is the comment section. Some things I wish it had while reading comments: - keyboard shortcut to go to next/previous comment at same level (`j`/`k` a la vim?) - keyboard shortcut to upvote a comment while it is selected - memory of which comments I already read, so that when I come back to a comment section, I can navigate directly to the unread comments (useful for conversations that span mul…

I too wish hacker news had that by default. I use this extension: https://addons.mozilla.org/en-US/firefox/addon/vihn/

Re: Show HN: A better Hacker News front end

#63

Post by a022311 »

> More importantly, it was missing some features I considered essential for a truly viable alternative.

As others here noted, I can't find any noteworthy addition (actually none? maybe I'm not very observant) to the features the actual HN has. I'd appreciate a more thorough explanation of this.

A UI refresh is certainly not a bad idea (although the existing content density is hard to match), but this "modern" UI looks like the average Bootstrap website from 10 years ago with a few extra shadows and transparency. I enabled Javascript to test the theme switching and discovered that scrolling becomes very laggy (on a phone). Perhaps you're accidentally running some animation? It feels very unnatural.

Re: Show HN: A better Hacker News front end

#64

Post by dxxvi »

archb wrote: post #46
dxxvi wrote: post #41

My hacker news modified with violentmonkey: https://vercel-html-example.vercel.app/hn-violentmonkeys.png The + - buttons on the top panel change the font size of every thing except the font size of the panel. Things are arranged to minimize the page scrolling. The news title and number of comments are darker and a little bit bigger than other elements for an easy reading.

Do you mind sharing the script?

    // ==UserScript==
    // @name        ycombinator
    // @namespace   Violentmonkey Scripts
    // @match       https://news.ycombinator.com/*
    // @grant       GM_addStyle
    // @version     1.0
    // @author      -
    // @description 10/5/2022, 6:35:39 PM
    // ==/UserScript==

    GM_addStyle(`
      .pagetop { color: #fff }
      body .title { font: 19px/1.5 sans-serif }
      body a, body a:link { color: #222 }
      body .comhead { font-size: 16px; font-style: italic }
      body .title .rank { color: #aaa; font-size: 14px }
      body .subtext { font-size: 16px; padding: 4px 0 6px 19px }
      .c00, .c00 a:link { color: #444 } body .comment { font: 16px/1.45 sans-serif; max-width: none }
      body span.pagetop a, body span.pagetop a:visited { color: #fff }
      body tr.athing:not(.comtr):nth-child(even) { background: linear-gradient(#f4f4f4, #eee, #f4f4f4) }
      body tr.athing > td { padding: 5px 10px 5px 1px }
      body tr.athing > td.votelinks { padding-right: 5px }
      td.zoom { font-weight: 700; color: #fff; width: 32px }
      td.zoom > span { cursor: pointer; font-size: 1.5rem }
      div.toptext { font-size: 17px; color: #333 }
      span.number-of-comments { font-size: 18px; color: #666 }
    `);

    const t = document.getElementById('hnmain');
    if (t != null) {
      t.removeAttribute('bgcolor');
      t.removeAttribute('width');
      t.parentNode.removeChild(t);
      document.body.prepend(t);
    }

    const spanPagetop = document.querySelector('td span.pagetop');
    if (spanPagetop) {
      const tr = spanPagetop.parentElement.parentElement;
      tr.insertAdjacentHTML('afterbegin', `
        +
        -
      `);
    }

    setTimeout(function() {
      while (true) {
        const td = document.querySelector('tr:not([id]) > td.subtext');
        if (td == null) {
          break;
        }

        const tr = td.parentElement;
        const previousTr = tr.previousElementSibling;
        if (previousTr != null) {
          tr.parentElement.removeChild(tr);
          previousTr.append(td);
        } else {
          break;
        }
      }

      while (true) {
        const tr = document.querySelector('tr.spacer');
        if (tr == null) {
          break;
        }
        tr.parentElement.removeChild(tr);
      }

      document.querySelectorAll('td.title[valign="top"]').forEach(td => td.setAttribute('valign', 'middle'));

      document.querySelectorAll('table > tbody > tr:has(> td + td + td + td) + tr + tr > td[colspan="2"]:first-child + td:last-child').forEach(td => {
        td.setAttribute('colspan', '2');
      });

      document.querySelectorAll('a[href^="item?id="]').forEach(a => {
        const arr = a.innerHTML.split(' ');
        if (arr.length == 2) {
          a.innerHTML = `${arr[0]} ${arr[1]}`;
        }
      });
    }, 419);

    const myScript = document.createElement('script');
    myScript.innerHTML = `
      const FONT_SIZE_THRESHOLD = 26.9;
      function zoomIn() {
        const bodyTitle = document.querySelector('body .title');
        if (bodyTitle) {
          const newFontSize = parseFloat(getComputedStyle(bodyTitle).getPropertyValue('font-size').replace('px', '')) + 1;
          document.querySelectorAll('body .title').forEach(t => {
            t.style.fontSize = newFontSize + 'px';
            if (newFontSize > FONT_SIZE_THRESHOLD) t.style.fontWeight = 300;
          });
        }
        const bodyComment = document.querySelector('body .comment');
        if (bodyComment) {
          const newFontSize = parseFloat(getComputedStyle(bodyComment).getPropertyValue('font-size').replace('px', '')) + 1;
          document.querySelectorAll('body .comment').forEach(t => {
            t.style.fontSize = newFontSize + 'px';
            if (newFontSize > FONT_SIZE_THRESHOLD) t.style.fontWeight = 300;
          });
        }
      }

      function zoomOut() {
        const bodyTitle = document.querySelector('body .title');
        if (bodyTitle) {
          const newFontSize = parseFloat(getComputedStyle(bodyTitle).getPropertyValue('font-size').replace('px', '')) - 1;
          if (newFontSize > 12) document.querySelectorAll('body .title').forEach(t => {
            t.style.fontSize = newFontSize + 'px';
            if (newFontSize  12) document.querySelectorAll('body .comment').forEach(t => {
            t.style.fontSize = newFontSize + 'px';
            if (newFontSize

Re: Show HN: A better Hacker News front end

#66

Post by rcarmo »

krapp wrote: post #54
rcarmo wrote: post #38

Earlier quoted context omitted.

Me neither. It's a running joke of sorts.

Given how pedantic and cargo-culty the HN community can be about even the tiniest detail of the layout here, it doesn't surprise me that the mods don't make it a priority. The arguments about implementation details and edge cases would be ceaseless, and people would clutch their pearls about HN "turning into Reddit." Also dark mode seems way too modern a feature for a forum whose entire aesthetic is frozen in the 199…

Like I keep pointing out time and time again, when I read HN through an RSS reader the embedded browser cannot run extensions and I get a white flash in the middle of the night when I click over.

Re: Show HN: A better Hacker News front end

#67

Post by rcarmo »

ranger_danger wrote: post #49
rcarmo wrote: post #33

Earlier quoted context omitted.

I keep pointing this out every time dark mode comes up, so don't take it personally: embedded browsers (like the ones in RSS readers) cannot use extensions, and only native dark mode support in the site itself works there. It is _extremely_ annoying to get a white flash while reading news in the night time, and I really don't get why HN doesn't have a pair of CSS lines that would fix it for everyone.

The latest version of Qt WebEngine supports both userscripts and extensions. But embedded browsers could always inject their own userscript for dark mode, so I don't really see the problem.

You don't use iOS, do you?

Re: Show HN: A better Hacker News front end

#69

Post by dragonwriter »

On mobile, with typical username length, comments with even one level of indentation have the heading-line wrap, which is just one of many of the problems with the “making everything take vastly more space” layout, at least on mobile.

Maybe this is exclusively intended for desktop?

Re: Show HN: A better Hacker News front end

#70

Post by ryandrake »

silvestrov wrote: post #51

1) Get rid of all the margins. I'm not here to look at postcards, I'm here to read text. old.reddit is good. 2) Font is too small and light. Make subject font much bigger. The 2nd line is not nearly as important as the title, so title should be much bigger. (your darkmode is better at this than light mode). Personally I prefer Verdana to AppleSystemFont as the latter is very light. 1+2) The posting page has too much…

Both 1+2 are partially fixed by hitting my browser's "zoom in" function 3 to 4 times. But still there's too much whitespace.

I don't know why so many sites default to tiny fonts and using fixed margins to restrict content to a tiny column down my screen. Fortunately, most browsers allow you to set a minimum font size, which fixes a lot of these sites.

Post reply on HN