15 ms·

Show HN: I made a modern web UI for Hacker News

308 points by sjdz 4y ago

Hey HN, I made this free browser extension that modernizes the Hacker News design. I previously launched Modern for Wikipedia [1] here back in December, and it seemed like the obvious next choice to build one for HN too! So I've taken what I learned from building that, and have spent all my spare time this year building Modern for HN. I realize this won't be for everyone, but it was a fun project to work on, and I'm really happy with the result so far. Hope you like it too! Lots more planned for future updates, and suggestions welcome :) [1] https://news.ycombinator.com/item?id=29461735 https://news.ycombinator.com/item?id=29461735

pssdbt 4y ago
Curious why a browser extension and not a site like https://hckrnews.com/ https://hckrnews.com/?
- sjdz 4y ago
  Good question. There's a few key benefits: - It builds on the existing site, so the new design is always applied to HN urls. No need to visit a separate website. - Privacy - everything is stored locally in your browser, there's no 3rd party website to track your activity etc. Also with JSON backup you're in full control of your data. - Unlimited storage - local browser storage has limits, but extensions can request unlimited storage. This is useful for the history and bookmark features.
agiacalone 4y ago
Looks neat! Going to give it a try...
proc0 4y ago
Looks great, and I like the customize settings. I couldn't figure out how to comment though. Not sure if I missed it or it's not yet a feature.
- sjdz 4y ago
  Glad you like it :) You should just be able to hover over a comment and click the reply icon?
  - skunkworker 4y ago
    I too am unable to do this, there isn't a comment box for top level comments. EDIT: I would expect a comment block to be before the "${count} Comments" tag.
skunkworker 4y ago
It looks great, is there a way to reduce the margins on the left and the right? Right now the padding is taking up about 40% of the usable space. Where on the normal HN the padding is about 15%
- sjdz 4y ago
  Yes, just click the "aA" icon to open the settings, and use the bottom slider to adjust the content width.
  - skunkworker 4y ago
    That worked thanks, I would recommend adding a tooltip to explain what that action is doing.
    - sjdz 4y ago
      Will do, thanks.
  - xemdetia 4y ago
    I really hate how there's no alt tags or anything like that to actually tell you what any of the sliders mean.
    - sjdz 4y ago
      Good point, I'll add tooltips to the next version.
- vincnetas 4y ago
  Top right theres 'aA' setting button. Play with is.
mrwnmonm 4y ago
I love it
porter 4y ago
This is unexpectedly great.
perryizgr8 4y ago
It looks great, but a little disappointed to see no mobile version. I'll use this the next time I'm on my computer.
- GekkePrutser 4y ago
  Glider is a pretty great client on mobile IMO.
  - CharlesW 4y ago
    My favorite iOS client for Hacker News (so far) is HACK: https://apps.apple.com/us/app/hack-for-hacker-news-developer/id1464477788 https://apps.apple.com/us/app/hack-for-hacker-news-developer...
diimdeep 4y ago
It is way less efficient to consume HN with this design, so I won't use it.
- jtokoph 4y ago
  Why is it way less efficient?
  - markeibes 4y ago
    It's not of course
  - em-bee 4y ago
    because it hides important UI elements. in particular prev and next which i use frequently are completely missing. that alone forced me to turn off the extension after just a few minutes, because unfortunately it made pages very difficult to navigate.
    - sjdz 4y ago
      Good point, I'll add prev / next back in the next update. They've been moved to the "control pad" (pro feature) in the extension, but my intention is for the free version to support all current HN features.
- skunkworker 4y ago
  For right now I'm back to using the Hacker News enhancement suite, it builds on top of the compact ui.
  - em-bee 4y ago
    could you link to that please?
    - jzelinskie 4y ago
      https://chrome.google.com/webstore/detail/hacker-news-enhancement-s/bappiabcodbpphnojdiaddhnilfnjmpm https://chrome.google.com/webstore/detail/hacker-news-enhanc...
tough 4y ago
Oh wow, it's like HN has entered the 21st century all of a sudden great design, Im keeping it enabled for testing
tough 4y ago
One nit, it seems to hijack going back/forward in history using touchpad? Browser buttons work. idk
olivierduval 4y ago
Firefox ask for permission for "Access your data for extensionpay.com" ?????? What for ????????? Seriously : I can't understand... and I surely WONT install this because I cant ANY REASON. Really disapointed :-(
- detaro 4y ago
  Why would a extension that has a paid upgrade option potentially contact a provider of services to implement paid upgrades in browser extensions, mysterious indeed. A question requiring many, many question marks.
- jtokoph 4y ago
  If you read the site, there is an option to pay for premium features. I would assume that extensionpay is a vendor that helps with facilitating those payments.
- sjdz 4y ago
  The extension uses ExtensionPay [1] to accept payments via Stripe for the Pro upgrade. It's open source and created by HN user Glench [2]. [1] https://github.com/glench/ExtPay https://github.com/glench/ExtPay [2] https://news.ycombinator.com/user?id=glench https://news.ycombinator.com/user?id=glench
  - hkdobrev 4y ago
    But Google Chrome has the following note in the extension details view after you install it: > This extension is not trusted by Enhanced Safe Browsing. Learn more[1] [1]: https://support.google.com/chrome_webstore/answer/2664769?visit_id=637982694814962367-2284958430&rd=2#10745467 https://support.google.com/chrome_webstore/answer/2664769?vi...
    - sjdz 4y ago
      Hmm, this seems to be because of Google's new policy for verifying extensions. The domain (modernhn.com) hasn't been used for an extension before, so it needs to be around for a few months with a good track record to be verified. Their page [1] says: > For new developers, it will take at least a few months of respecting these conditions to qualify. Modern for Wikipedia [2] already meets those standards, and has the relevant badges, so I guess it'll just take some time for those to be approved and for the "Enhanced Safe Browsing" warning to be removed. [1] https://developer.chrome.com/docs/webstore/discovery/#publisher-badge https://developer.chrome.com/docs/webstore/discovery/#publis... [2] https://chrome.google.com/webstore/detail/modern-for-wikipedia/emdkdnnopdnajipoapepbeeiemahbjcn https://chrome.google.com/webstore/detail/modern-for-wikiped...
uo21tp5hoyg 4y ago
I really like the current simple design of HN, my only issue with it is how ridiculously zoomed out it is by default. I've been viewing HN at 150% zoom for as long as I can remember.
- victornomad 4y ago
  I view HN at 200% Getting old :/
  - TakeBlaster16 4y ago
    I've always felt bad about 133% and this thread is putting things in perspective for me
    - teejmya 4y ago
      I use 200% and I'm in my 20s. Nothing wrong with reading comfortably!
    - crispyalmond 4y ago
      I normally use 160%, I love this site.
- pbasista 4y ago
  I am viewing the standard version of HN at 270% on a 4K screen. The main reason is not the font size but the layout. Only at that zoom level would the page span the entire width of the screen and wrap the text around.
- krossitalk 4y ago
  Hah, I have particularly bad eyesight and HN and Terminal are both around 175% normal (12pt) zoom levels.
  - sshine 4y ago
    I only have an average bad eyesight, but I still prefer ridiculously zoomed text. My focus simply is always on very little code or text at a time, so I don’t see the point of not utilising my screens fully.
fred69 4y ago
- tough 4y ago
  Get off this thread then? Nobody forcing you to use it... TF with your agressivity
- markeibes 4y ago
  Centuries of advances in typography are surely not a bad idea
- systemvoltage 4y ago
  Outside of the context of OP’s work, I have been mentally conditioned to consider anything “Modern” to be absolutely shit. Nothing is more repulsive than a tag line on a product that says “New and improved modern look!”
- hjanssen 4y ago
  This is such an overly negative reaction it is frankly mind boggling. The UI is optional. It is literally an extension you can install separately. Nobody is taking anything from you. There is a place to criticise bloated and Ad-ridden web pages. This extension is not it.
ibdf 4y ago
I kinda like it. The font-size and container size are a nice touch. I like that I can keep the cream background. I think the nested comments are still a bit hard to read.
_abox 4y ago
I kinda come here because it doesn't have this :) But this is the good thing about it, people can extend it as they wish.
- dheera 4y ago
  I love it. I wonder if it's possible to do this by proxying requests to HN instead of a Chrome extension -- that way I don't have to bloat the browser's start-up time and don't have to "worry" about this extension spying on other websites, even though I realize it's unlikely, it's good principle to not have to give this permission.
  - wffurr 4y ago
    There's [Hackerweb](https://hackerweb.app/ https://hackerweb.app/) which uses the HN API and does some clever stuff delegating to a webview.
    - helsontaveras18 4y ago
      Thanks for sharing! I love this skin, the dark mode is really easy on my eyes. And the threading is really nice too.
  - xvinci 4y ago
    Depends on what you mean by "proxying". Everything you do (serving a Single-Page Application or requesting HN by backend, processing it's HTML and sending the content to your own frontend) will take traffic away from news.ycombinator.com and to another domain - which comes with it's own set of dreadful scenarios. There used to be (and still are) things like https://mreidsma.github.io/bookmarklets/jquerify.html https://mreidsma.github.io/bookmarklets/jquerify.html which allow to inject JavaScript on click (and thus would make it possible to transform that site), but I gave it a shot and HN is set up to disallow this: Refused to load the script 'https://code.jquery.com/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://cdnjs.cloudflare.com/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
tough 4y ago
also on mobile widths it breaks (on dsktop) when making window narrower
- sjdz 4y ago
  Thanks for the heads up, will fix that in the next update.
howmayiannoyyou 4y ago
LOVE. Great job. Already using and enjoying this. Keep up the great work.
- sjdz 4y ago
  Thanks, glad you like it :)
  - howmayiannoyyou 4y ago
    Can't see my karma :-(
    - sjdz 4y ago
      It's in the user menu (icon top right). If you mean for your own comments, that's a bug and will be fixed in the next update.
drewtato 4y ago
What does "Font smoothing" do?
- sjdz 4y ago
  It applies -webkit-font-smoothing to anti-alias the fonts.
GNOMES 4y ago
Personally the only problem I have with the current UI is that I have to hit the arrow at the bottom to expand for more comments. Kills my ability to CTRL/CMD F and find keywords.
- dang 4y ago
  What do you mean by the arrow at the bottom? I don't recognize that.
  - GNOMES 4y ago
    Correction, I was referring to "X more comments..." like seen on https://news.ycombinator.com/item?id=32755893 https://news.ycombinator.com/item?id=32755893 I just want all comments to load on page load so I can search easily.
    - nemothekid 4y ago
      I think this is a relatively new feature - HN used to show all comments, but the feature very frequently caused a lot of load on the servers which would cause HN to go down.
    - dang 4y ago
      Ah ok. Actually we've mostly turned pagination off lately because recent performance improvements (not the big ones - those are still coming!) made it possible. But I forgot to turn it off when I restarted the server today, and with the big QE thread burning hot at the moment, we should maybe wait a while. I agree that it's annoying and it will be a happy day when we can turn it off properly.
      - em-bee 4y ago
        oh, that's great news. pagination always got in the way when tracking new comments because when switching to the next page the order of the comments may have changed, and i see comments on the second page which i already read on the first, and i wonder which comments i am missing because they moved from the second to the first page by the time i switch pages.
theyomkarbirje 4y ago
[flagged]
StacyC 4y ago
Using it now — I like it!
jamesgeck0 4y ago
I'm not a huge fan of how it removes the built-in account-linked bookmarking functionality (favorites) and replaces it with a pro-only feature (locally stored bookmarks).
- CharlesW 4y ago
  Regardless of whether it's a pro-only feature, my feedback is that I need this to use the existing HN favorites capability before I feel comfortable using it.
- sjdz 4y ago
  Looks like that's a bug, sorry about that. Will be fixed in the next update. For reference, in the Pro version you can set the storage for your favorites to private (local browser storage) or public (HN profile). It's currently set to private storage for free users, but should be set to public (to save to your HN profile).
franciscop 4y ago
Do you accept feature requests/think this might be a good idea? I've been thinking about creating this + adding https://github.com/mozilla/readability https://github.com/mozilla/readability to grab the links that are text articles and present them in-page (and cleaned up, just the text+images+similar, removing all the sidebars, popups, etc) instead of having to go to a 3rd party website with all the popups and such. It'd have to be either a personal website or a browser extension like yours, since I wouldn't be able to host a given article for anyone to read (for copyright reasons), but I can have a modified browser that loads a 3rd party article different.
- sjdz 4y ago
  It's a nice idea! One consideration would be how to grab the html of the pages. In my experience, using either fetch() or an ajax request often runs into problems with CORS etc on the destination site blocking the request. Maybe there's a better way someone knows for extensions to grab remote html without running into these problems? The alternative would be for the extension to grab the html via API from a crawler running on a server (or SaaS), which should work pretty well.
  - franciscop 4y ago
    Yes, I'm pretty sure (but not 100%) that extensions normally can avoid CORS/same-origin/etc issues. > The alternative would be for the extension to grab the html via API from a crawler running on a server Oh like 'https://myplainwebsite.com/parse?url=https://example.com/document https://myplainwebsite.com/parse?url=https://example.com/doc...'
  - franciscop 4y ago
    So I just launched this inspired on our brief conversation! :) https://content-parser.com/ https://content-parser.com/ You can parse any URL into markdown with `https://content-parser.com/markdown?url={encodeURIComponent(url) https://content-parser.com/markdown?url={encodeURIComponent(...}`.
    - sjdz 4y ago
muhammadusman 4y ago
Out of all the HN extensions/websites I've used, this one has become my favorite. I really like the customizations available and also, it really does feel "modern" in that some things just feel easier to do with this tool.
flanbiscuit 4y ago
This looks very nice, great job!! I used to use HN-Special[1] (by the same dev who made that 2048 game[2]) but I stopped a while ago and I don't miss it. I like HN as is (for now), but I do have it at 150% zoom using the native browser built in zoom, which works great for my needs. The one thing I really really want is the equivalent of the "[l+c]" button from Reddit Enhanced Suite. In one click you open both the comments and the submission (if it's just a text one) in new tabs. 1. https://gabrielecirulli.github.io/hn-special/ https://gabrielecirulli.github.io/hn-special/ 2. https://github.com/gabrielecirulli/2048 https://github.com/gabrielecirulli/2048
brycewray 4y ago
Nice! Any way to set previously read items with different CSS, so — as in the basic HN UI — you can tell at a glance whether you’ve already been there? Don’t see that option mentioned for either free or Pro.
- sjdz 4y ago
  Good idea, thanks, I'll add that in the next version.
exnz 4y ago
Used it the past hour, I really like it. Thanks for making this. Can you add the "past" section too? Also, it would be great if you add left margin indicator for comment threads, otherwise for long comment threads it is not clear how deep inside I am in the thread.
rswerve 4y ago
Love this; really nice work. It's so much more readable. Older eyes thank you. I would upvote it just for having a lighter-charcoal background available for dark mode. My one piece of feedback is this: the line height adjustment on the comment pages changes the distance between comments as well as the space between lines within comments, but I think those are better decoupled. I would like to see comments fairly close together while maintaining a readable line height for the comments themselves.
- sjdz 4y ago
  Thanks, glad to hear it helps :) Good point, they should be separate settings. I'm going to add more theme adjustment settings in future updates to solve that.
brundolf 4y ago
Nice! It's a neat idea to implement it as an extension. And I enjoy how it just overlays the normal site (loads separate pages as separate pages, etc) And finally a dark mode. Dear god. One bit of feedback: it took me a minute or two to figure out how to comment on an article (to write this very comment); I actually had to look back at the website to make sure commenting wasn't a "Pro" feature. I don't know if the reply-arrow really translates to comment threads, especially when you're not "replying" to another comment but to the main post. Some sort of comment-bubble icon might be clearer. At the very least I think those icons could use titles, and/or "modern" tooltips. Overall pretty cool! I think I'll try it out at least for a little bit Edit: A couple other things, - It's a bummer that karma and threads (now "Comments") are hidden behind an extra click. When I'm actively participating in a thread those are two of my most frequently-used parts of the UI - The thread UI is a little too minimalist I think; it's a little hard to visually parse where one comment ends and another starts, nesting levels, etc. Some tasteful borders or lines would go a long way here, though so would some slightly-more-contrasted colors - I don't see a way to see upvotes on your own comments like in the main UI. My dopamine receptors would like that feature back ;)
- sjdz 4y ago
  Thanks for the feedback, glad you like it! - Will definitely add tooltips and have a think about how to make the reply process clearer. - I'd like to make the top nav customizable at some point, so when I do I'll add options for the account sections (threads etc). Will add a setting to show karma next to the user icon too. - Yeah a couple of others have requested that too. The next logical step is a theme editor, which would allow changing border colors etc. It's on the TODO :) - Yes that should be there, will add it back in the next update.
new_here 4y ago
This is great! Congrats and thanks for sharing your work! People have been asking for dark mode for years. This has it and so many other nice UI improvements too. Well done!
deleted 4y ago
[deleted]
dusted 4y ago
I really like that HN is not like that, but nice work anyway :)
genezeta 4y ago
Why not make this a user-style? [0] In particular I ask this because your approach -if generally applied- means installing an extension for each single site, which feels a bit too much. [0] https://userstyles.org/styles/browse/ycombinator https://userstyles.org/styles/browse/ycombinator
- forgotpwd16 4y ago
  There're some extra features (e.g. bookmarks) that utilize scripting and data storing. So a userstyle wouldn't cut it. A user script though would. Also privacy-wise I think there isn't a way to limit an extension to a single site, something possible with a user script.
  - Pathogen-David 4y ago
    > Also privacy-wise I think there isn't a way to limit an extension to a single site On Chrome/Edge you can, not sure about Firefox. Additionally this extension only even asks for permission to access Hacker News and some backend stuff presumably used for the paid tier.
    - forgotpwd16 4y ago
      Yes, you're right on asking permissions. I didn't had a site-specific extension so couldn't see them. Unfortunately restricting any extension, if it doesn't restrict itself, is only possible on Chrome and its derivatives.
FpUser 4y ago
It installs fine on Chrome but fails to install on Brave (network error download interrupted). Too bad as Brave is my main browser. I have no problem installing some other Chrome extensions on Brave.
andrewgioia 4y ago
Shameless plug for a small Userstyle I wrote: https://git.gioia.cloud/andrew/gists/src/branch/master/Userstyles/Hacker%20News%20Dark.css https://git.gioia.cloud/andrew/gists/src/branch/master/Users... It adds dark mode and some spacing/font size/readability improvements for wider screens.
- kitsunesoba 4y ago
  Just a little usability tip, if you name the css file with the extension .user.css, when viewed as raw from Github, Gitea, etc extensions like Stylus will offer to install it so users don't need to create the userstyle entry themselves.
Eduard 4y ago
Doesn't work with Chrome Android.
dotcoma 4y ago
Why? If it ain't broke, don't fix it.
- blooalien 4y ago
  Thus the reason it's nice that it's packaged as a browser addon. Easy for those who don't like or want it to simply never install it.
guytv 4y ago
This is awesome, I'm using it as I type. very refreshing. The only thing that is missing, is that the front page does not show which articles i've already clicked (the link is not grayed), so I can't quickly scan the list. Thanks! great job!
dindresto 4y ago
Would be great if there was an option to change the font color for more contrast :)
helf 4y ago
No thank you. HN is great because it /isn’t/ … that.
forgotpwd16 4y ago
Nice, but no thanks. HN's old boring design is an oasis on the modern web.
joegahona 4y ago
I really like this! Just a subjective thing -- I would consider offering Verdana in a future release, for those (like me) who aren't yet ready to lose that flavor of HN. But all the other adjustments are very desirable to me so far. Regarding the name: The horse might be out of the barn, but calling this a "modern" HN sounds a bit too much like a value judgment to me, though I doubt you meant it that way (and I doubt anyone at HN really took offense). It also triggers all the curmudgeons who are hellbent against anything "modern" just because it's modern. Great job!
- sjdz 4y ago
  Thanks :) Yes the plan is definitely to add more font selection, including Verdana for the classic look! I'd like to eventually add a full theme editor to change all aspects of the UI.
tobyjsullivan 4y ago
The following is not any sort of critique on the author’s work. The design looks quite fresh, in fact. This is merely a tangential observation. Anyone else see the mock-up and think “this looks slow”? Logically, it’s not a defensible inference in the slightest. There’s nothing about this design that would necessitate performance tradeoffs. But that’s the barely-conscious, emotional first impression I had. I wonder if there’s something about “modern” design (or a specific subset thereof) that correlates with subpar performance.
- the__alchemist 4y ago
  Yep! My pattern-matching brain assessed as both slow load time (probably not infact true due to it being an installable browser extension?), and high input latency.
- zozbot234 4y ago
  > Anyone else see the mock-up and think “this looks slow”? It just looks clumsy and distracting compared to plain HN, IMHO. It highlights elements like usernames, the total amount of comments(!) or the upvote/favorite actions, that users will only rarely interact with or even want to look for. Meanwhile other actions have to be hidden beneath a "…" widget, lest the page become too cluttered. The factory HN look does a much better job of bringing the comment text into focus and reflects the threading hierarchy without needing a lot of padding to space things out.
- crazygringo 4y ago
  No, funny -- for me it's precisely the opposite. The design is clean, modern, minimalist -- and I associate sites that look like that with loading in a blink. It's the sites where everything is crammed in and packed with ads that load slowly, like most news sites. Everything about this style of design says "fast" to me.
- qsort 4y ago
  I had your exact same reaction. Related story: In my free time I am a coach for a competitive math team, I recently had to design an application to automate multiple choice problem submissions. Nothing stellar, your run-of-the-mill CRUD app. But it was under some interesting engineering constraints: users would have to log in from a variety of devices, phones, tablets, bad chromebooks, etc., possibly on slow cellular connections. So naturally I went for a simple server-rendered design, with stock Bootstrap hosted on a CDN. The overwhemling reaction was "this is so fast". Now, being server-rendered with absolutely no XHR, the app spends most of the time doing nothing, but it's interesting laymen think it's fast. I think we came to associate "modern" designs with piles of javascript, requests everywhere, popups, ads, and the like. Probably the correlation is indeed there, even if it's obviously not causation.
jacooper 4y ago
Finally, I use HN exclusively through glider on android, because the Website is less than stellar tbh. I like the modern UI for Wikipedia too, it would be great if you can make it work on Wiktionary.org too! A note, the wikipedia extension doesn't work on non-engoish versions of Wikipedia, for example de or ar.Wikipedia.org Unfortunately it doesn't seem to be open source, a big nono with browser extensions It would be great if you can show the fav icon of the link beside the titles, it helps differentiate posts.
- hammyhavoc 4y ago
  Yes, lack of source makes this difficult to trust.
dmix 4y ago
I've seen a hundred of these but this is quite nice, I'll give it a shot for a week. The configuration makes it much nicer, others have been too opinionated. One thing: it'd be nice to click the whole top header of the comments to collapse them, instead of clicking the far left toggle. Edit: also not seeing my comment score inline on the page header makes it difficult to know if I should check my comments for activity. this one might be a deal breaker.
- sjdz 4y ago
  Thanks :) Will add the comment score. Clicking the header to collapse is a good idea, I'll get that working too.
  - dmix 4y ago
    highlighting the OP w/ a color was a nice touch btw
  - dmix 4y ago
    also the more I use this the more I like it, nice work :) (I'm an HN-junkie)
uxcolumbo 4y ago
At first I thought 'Not another one'. But this is really well designed and great to have the style customization available. Are you a designer? The upvote, bookmark buttons etc probably need a tooltip - not everyone might know what those icon buttons do. In fact I'd add a tooltip to all icons buttons. Also, when the width is set to 100% - the menu that appears after clicking on the more button (3 dots) is cut off - as it appears to the right. You probably have to do some edge detection or always show it to the left. And nice one for trying to earn a buck.
- sjdz 4y ago
  Thanks for the feedback, glad you like it :) Will add tooltips to icons in the next update + fix that 100% width bug too.
  - Snacklive 4y ago
    Also i would really like an option to being able to collapse comments just clicking the comment box/card Excellent work ~
cmer 4y ago
I really dig it. Great job. It might not be for everyone, but to me it’s a real breath of fresh air.
barroomhero 4y ago
It's probably on me, but is there no change in color for visited links?
crazygringo 4y ago
It's very nice-looking! One deal-breaker for me, sadly -- having the collapse/expand and upvote/downvote buttons on opposite sides (left, right) of the page is way too annoying. When I read comments, I'm constantly voting and collapsing. Using my trackpad to jump back and forth is just too much. Current HN isn't great for that, but it's usually only traversing about a quarter of the page's distance.
- sjdz 4y ago
  Thanks for the feedback. I'm going to make the space in the comment header clickable to collapse/expand, which will reduce the distance a bit. Would that work for you? The other alternative might be to add a setting to move the collapse/expand arrow to be part of the icons on the right.
  - crazygringo 4y ago
    I would find it much more natural to have both expand/collapse and upvote/downvote on the left, simply because text is left-aligned. I find any functionality pushed all the way to the right side to be harder to use, simply because it's not "together" with everything else on the left. Your eye has to do more work to match right-side content to left-side across a whitespace.
    - sjdz 4y ago
      Yeah that makes sense. I'll add a setting to move vote icons to the left. Thanks.
latchkey 4y ago
I've been pretty happy with this one: https://github.com/plibither8/refined-hacker-news https://github.com/plibither8/refined-hacker-news
a_wels_catfish 4y ago
dankwizard 4y ago
What an excellent look, great work putting this together!
jonny_eh 4y ago
Congrats, it looks very nice! One critical feature that this cuts from native HN is the changing colour of links already visited. I'll often click an article, then navigate back, and use the changed link colour to reorient myself on the page.
- sjdz 4y ago
  Thanks! Yeah I forgot that, will add a setting in the next update to change the color of visited links.
movedx 4y ago
I really like this. Thank you. I'll use it and see how I go.
overflyer 4y ago
Hey man, I installed the Firefox extension and I am loving it. However the Auto Dark Theme does not work and DarkReader does nothing at all on your layout. Having a dark version of this would be awesome :) Thanks for your hard work. I appreciate it! :)
- arafatamim 4y ago
  It has a dark version already. Press the "aA" icon on the top right toolbar
  - overflyer 4y ago
    Already found that. Thats what I meant with "Auto Dark Theme", however it does not work :).
napier 4y ago
Modern HN. *only works on desktop computers. The screenshots look nice on mobile though. Good effort but I'm kind of attacked to HN how it is and I hope they never change it (and that they continue to make it east for people to riff on the original).
kungfufrog 4y ago
Hi, I quite like this extension! One minor criticism though that prevents me from using it: links I've clicked through to from the front page don't change colour indicating where I've been in the past. This is infinitely useful on a heavy HN browsing day :)
- sjdz 4y ago
  Yeah forgot to add visited link color, it's coming in the next update :)
isatty 4y ago
This is not a critique of the work, I understand that some folk prefer it and that its beautiful work. I _hate_ modern web UIs however. Give me plain old websites that are information dense, with none of the fluff. HN and old.reddit.com are my daily reads. I will be _very very_ sad when old.reddit goes away and I probably will have to go app only (Apollo) when that happens.
- tartoran 4y ago
  Same here and in my opinion one of the reasons HN became what it is: they didn’t fuss with the interface, kept it simple and light. When old.redit stops working I’ll probably stop using it altogether.
ElijahLynn 4y ago
I immediately installed it, thank you. I really like the dark mode. However, I couldn't figure out how to comment initially and looked for the comment box, even at the bottom and couldn't find it. I finally realized it is the left facing arrow on the right just under the title. I think that UX could be improved to surface the comment feature. Also, one feature I really wanted that I don't see on the extension is the ability to "favorite" it without clicking into it. So, I'd love to see that added. I will consider paying for the pro version to support you, but am going to give it a week or so on the free version. Thanks
- ElijahLynn 4y ago
  I think I'm really going to like the easy access to the history as well!
- sjdz 4y ago
  Thanks, glad you're enjoying it :) Good suggestions, I will try to make the commenting process clearer, and add a favorite icon to the lists too.
Uehreka 4y ago
Oh THANK YOU. The extension I’d been using before has been having bugs recently and stopped showing “next page” buttons.
staindk 4y ago
I'm late to this but just wanted to mention - I'm checking out the extension and like it quite a lot. Only feedback I have right now (that I haven't seen anyone else mention) is that I'm finding it hard to jump to the next "top-level" comment. If I'm half way down a comment thread and decide I just want to skip the rest of this thread, I'm used to just scrolling down a bit until I see the next top-level comment and I'll read from there. It's easy enough to do in non-skinned HN because the everything is left-aligned, but with the extension I haven't been able to intuit a left 'border' yet and am not sure if it'll ever come to me.
cowtools 4y ago
I think HN looks fine already. The only real problem with this site's design is that the text is too small.
MollyRealized 4y ago
> suggestions welcome One tweak I hope HN will roll into its own UI: if "HN Can't Process Your Requests This Quickly", then offer a "window.reload()" link. Comes up when I'm opening a bunch of bookmarks at once and maybe there's three or four HN links that open. Same thing as hitting refresh, just a added convenient step.
stereoradonc 4y ago
I totally love this! IMHO worth the upgrade. Kudos. This solves one of my biggest pain points on my Ultrawide monitor. Excellent layouts/fonts and dark mode. Perfect!
blooalien 4y ago
I love that as an "end user", I can easily choose to have (or not) this degree of customization by simply using (or not) an addon like this and HackerNews itself (due to it's simplicity of design) does not get in the way of this at all. Just one more reason that HN's design is basically perfect. Thanks much to both the author of this addon, and to HackerNews dev(s) for contributing to a "better Web" for all.
e1ghtSpace 4y ago
I like this, but I would love it even more if there was a theme with a background gradient - maybe navy blue at the top to dark grey.
slmjkdbtl 4y ago
Why is this a browser extension not a web app on its own domain? Also curious if there's any flaw in the official HN web app you see that incentives you to make this.
throwaguey 4y ago
Looks good! Biggest appeal for me is that it provides dark mode without needing to use a third party webapp or a CSS customization extension with broad permissions requirements. Some things I noticed: changes to the font size/width/line height don't seem to persist between the comments page and the front page. On top of this, the bars don't have clear numerical values so it's hard if you make any tweaks on them to match the settings across pages. ALSO I got kind of out of hand with those settings (line height in particular) and wanted to return to the default, but there's no reset button as far as I can tell.
- sjdz 4y ago
  Thanks for the suggestions, glad you like it. The theme settings (font size/width/line height) apply to the current view. So you can setup the style separately for each of the 3 views: story pages + index pages (list or table view). I'll add all this info to the help section shortly. Will also add tooltips to the sliders (with current value) in the next update + a reset button :)
nextaccountic 4y ago
Hi, are you familiar with https://github.com/plibither8/refined-hacker-news https://github.com/plibither8/refined-hacker-news ? I'm currently using it It has some features like, if I select a part of a comment and hit reply, it will reply quoting that part edit: oh, you're charging for it anyway, my feedback is: there's a slow loading time whenever I open a link and I don't understand this
frazbin 4y ago
doesn't reflow text properly on zoom in firefox, had to disable
webjac 4y ago
Funny how every some years a young developer comes and does the same again and again. It's always fun to watch. It's even better that HN hasn't changed in all this time. I don't even ever go to HN, I just read it on my RSS feed.
egorfine 4y ago
My first reaction: gosh, another one. My second reaction: hmm, it's an extension, I'm curious, show me. My third reaction: I absolutely love it.
simonebrunozzi 4y ago
One thing I'd like to see is the ability to filter out posts with less than X amount of points. At certain times of the day, the first page (30 entries) has ~30% of entries which are low points, and I usually prefer to avoid these. Thanks for your work!
- sjdz 4y ago
  Good idea, I will add that to a future version. Thanks!
ekabod 4y ago
on hackernews, comments appear really as a tree, and that is pleasant. Not so much with this extension. It is not so clear where stands the comment we are reading.
Snacklive 4y ago
I personally love this. I hope this wasn't a web extension but i really like it nonetheless. The design is very clean and i don't feel like it's wasting my time with lots of unnecessary stuff in the screen. Good job honestly, it really modernizes an old site without doing stupid sh*t
kytazo 4y ago
when I saw this, first thing that came to mind is the awesome wiki redesign addon I'm loving so much and its the same guy making it!! what a legend :) thanks
stephenitis 4y ago
hckrnews.com user here. I might try it out, what are your hosting plans and are you able to keep it standing for the future? Good work!
pwpw 4y ago
I'd like to be able to navigate each comment by pressing 'j' to go down one comment, 'k' to go up one comment, and enter to collapse the comment.
AdmiralAsshat 4y ago
Gave it a try, and so far, I love it! I especially like that I can make the site look incredibly nondescript and hide my username, so that it's less obvious at work when I have my pinned HN tab tucked away.
lazylion2 4y ago
Beautiful design op. Well done!
SergeAx 4y ago
Great job, thank you! Installed it at once and trying to use. Was not obvious how to reply at first glance, but I managed in a couple of minutes) Please consider adding some kind of comment's depth indicator. My most frequent action on long threads is "stop reading the rest and move to next top-level comment". If previous top level comment is beyond top of the screen - I just scroll down looking for minimal indent. With your centered design it is impossible. A thin line by the left side of text column wuld be enough, or you may go further and add some dots or pictograms on the left of each comment. Just a suggestion.
SergeAx 4y ago
Ah, and also thank you very much for hiding a number of upvotes/karma by the username. It was really disctracting, and there was no way to remove it with uBlock Origin, only with the whole login block.
leokennis 4y ago
Bit late to the party, but there's no visual distinction between visited and unvisited links - is that by design?

308 points by sjdz 4y ago

pssdbt 4y ago

Curious why a browser extension and not a site like https://hckrnews.com/ https://hckrnews.com/?

sjdz 4y ago
Good question. There's a few key benefits: - It builds on the existing site, so the new design is always applied to HN urls. No need to visit a separate website. - Privacy - everything is stored locally in your browser, there's no 3rd party website to track your activity etc. Also with JSON backup you're in full control of your data. - Unlimited storage - local browser storage has limits, but extensions can request unlimited storage. This is useful for the history and bookmark features.

agiacalone 4y ago

Looks neat! Going to give it a try...

proc0 4y ago

Looks great, and I like the customize settings. I couldn't figure out how to comment though. Not sure if I missed it or it's not yet a feature.

sjdz 4y ago
Glad you like it :) You should just be able to hover over a comment and click the reply icon?
- skunkworker 4y ago
  I too am unable to do this, there isn't a comment box for top level comments. EDIT: I would expect a comment block to be before the "${count} Comments" tag.

skunkworker 4y ago

It looks great, is there a way to reduce the margins on the left and the right? Right now the padding is taking up about 40% of the usable space. Where on the normal HN the padding is about 15%

sjdz 4y ago
Yes, just click the "aA" icon to open the settings, and use the bottom slider to adjust the content width.
- skunkworker 4y ago
  That worked thanks, I would recommend adding a tooltip to explain what that action is doing.
  - sjdz 4y ago
    Will do, thanks.
- xemdetia 4y ago
  I really hate how there's no alt tags or anything like that to actually tell you what any of the sliders mean.
  - sjdz 4y ago
    Good point, I'll add tooltips to the next version.
vincnetas 4y ago
Top right theres 'aA' setting button. Play with is.

mrwnmonm 4y ago

I love it

porter 4y ago

This is unexpectedly great.

perryizgr8 4y ago

It looks great, but a little disappointed to see no mobile version. I'll use this the next time I'm on my computer.

GekkePrutser 4y ago
Glider is a pretty great client on mobile IMO.
- CharlesW 4y ago
  My favorite iOS client for Hacker News (so far) is HACK: https://apps.apple.com/us/app/hack-for-hacker-news-developer/id1464477788 https://apps.apple.com/us/app/hack-for-hacker-news-developer...

diimdeep 4y ago

It is way less efficient to consume HN with this design, so I won't use it.

jtokoph 4y ago
Why is it way less efficient?
- markeibes 4y ago
  It's not of course
- em-bee 4y ago
  because it hides important UI elements. in particular prev and next which i use frequently are completely missing. that alone forced me to turn off the extension after just a few minutes, because unfortunately it made pages very difficult to navigate.
  - sjdz 4y ago
    Good point, I'll add prev / next back in the next update. They've been moved to the "control pad" (pro feature) in the extension, but my intention is for the free version to support all current HN features.
skunkworker 4y ago
For right now I'm back to using the Hacker News enhancement suite, it builds on top of the compact ui.
- em-bee 4y ago
  could you link to that please?
  - jzelinskie 4y ago
    https://chrome.google.com/webstore/detail/hacker-news-enhancement-s/bappiabcodbpphnojdiaddhnilfnjmpm https://chrome.google.com/webstore/detail/hacker-news-enhanc...

tough 4y ago

Oh wow, it's like HN has entered the 21st century all of a sudden great design, Im keeping it enabled for testing

tough 4y ago

One nit, it seems to hijack going back/forward in history using touchpad? Browser buttons work. idk

olivierduval 4y ago

Firefox ask for permission for "Access your data for extensionpay.com" ?????? What for ????????? Seriously : I can't understand... and I surely WONT install this because I cant ANY REASON. Really disapointed :-(

detaro 4y ago
Why would a extension that has a paid upgrade option potentially contact a provider of services to implement paid upgrades in browser extensions, mysterious indeed. A question requiring many, many question marks.
jtokoph 4y ago
If you read the site, there is an option to pay for premium features. I would assume that extensionpay is a vendor that helps with facilitating those payments.
sjdz 4y ago
The extension uses ExtensionPay [1] to accept payments via Stripe for the Pro upgrade. It's open source and created by HN user Glench [2]. [1] https://github.com/glench/ExtPay https://github.com/glench/ExtPay [2] https://news.ycombinator.com/user?id=glench https://news.ycombinator.com/user?id=glench
- hkdobrev 4y ago
  But Google Chrome has the following note in the extension details view after you install it: > This extension is not trusted by Enhanced Safe Browsing. Learn more[1] [1]: https://support.google.com/chrome_webstore/answer/2664769?visit_id=637982694814962367-2284958430&rd=2#10745467 https://support.google.com/chrome_webstore/answer/2664769?vi...
  - sjdz 4y ago
    Hmm, this seems to be because of Google's new policy for verifying extensions. The domain (modernhn.com) hasn't been used for an extension before, so it needs to be around for a few months with a good track record to be verified. Their page [1] says: > For new developers, it will take at least a few months of respecting these conditions to qualify. Modern for Wikipedia [2] already meets those standards, and has the relevant badges, so I guess it'll just take some time for those to be approved and for the "Enhanced Safe Browsing" warning to be removed. [1] https://developer.chrome.com/docs/webstore/discovery/#publisher-badge https://developer.chrome.com/docs/webstore/discovery/#publis... [2] https://chrome.google.com/webstore/detail/modern-for-wikipedia/emdkdnnopdnajipoapepbeeiemahbjcn https://chrome.google.com/webstore/detail/modern-for-wikiped...

uo21tp5hoyg 4y ago

I really like the current simple design of HN, my only issue with it is how ridiculously zoomed out it is by default. I've been viewing HN at 150% zoom for as long as I can remember.

victornomad 4y ago
I view HN at 200% Getting old :/
- TakeBlaster16 4y ago
  I've always felt bad about 133% and this thread is putting things in perspective for me
  - teejmya 4y ago
    I use 200% and I'm in my 20s. Nothing wrong with reading comfortably!
  - crispyalmond 4y ago
    I normally use 160%, I love this site.
pbasista 4y ago
I am viewing the standard version of HN at 270% on a 4K screen. The main reason is not the font size but the layout. Only at that zoom level would the page span the entire width of the screen and wrap the text around.
krossitalk 4y ago
Hah, I have particularly bad eyesight and HN and Terminal are both around 175% normal (12pt) zoom levels.
- sshine 4y ago
  I only have an average bad eyesight, but I still prefer ridiculously zoomed text. My focus simply is always on very little code or text at a time, so I don’t see the point of not utilising my screens fully.

fred69 4y ago

tough 4y ago
Get off this thread then? Nobody forcing you to use it... TF with your agressivity
markeibes 4y ago
Centuries of advances in typography are surely not a bad idea
systemvoltage 4y ago
Outside of the context of OP’s work, I have been mentally conditioned to consider anything “Modern” to be absolutely shit. Nothing is more repulsive than a tag line on a product that says “New and improved modern look!”
hjanssen 4y ago
This is such an overly negative reaction it is frankly mind boggling. The UI is optional. It is literally an extension you can install separately. Nobody is taking anything from you. There is a place to criticise bloated and Ad-ridden web pages. This extension is not it.

ibdf 4y ago

I kinda like it. The font-size and container size are a nice touch. I like that I can keep the cream background. I think the nested comments are still a bit hard to read.

_abox 4y ago

I kinda come here because it doesn't have this :) But this is the good thing about it, people can extend it as they wish.

dheera 4y ago
I love it. I wonder if it's possible to do this by proxying requests to HN instead of a Chrome extension -- that way I don't have to bloat the browser's start-up time and don't have to "worry" about this extension spying on other websites, even though I realize it's unlikely, it's good principle to not have to give this permission.
- wffurr 4y ago
  There's [Hackerweb](https://hackerweb.app/ https://hackerweb.app/) which uses the HN API and does some clever stuff delegating to a webview.
  - helsontaveras18 4y ago
    Thanks for sharing! I love this skin, the dark mode is really easy on my eyes. And the threading is really nice too.
- xvinci 4y ago
  Depends on what you mean by "proxying". Everything you do (serving a Single-Page Application or requesting HN by backend, processing it's HTML and sending the content to your own frontend) will take traffic away from news.ycombinator.com and to another domain - which comes with it's own set of dreadful scenarios. There used to be (and still are) things like https://mreidsma.github.io/bookmarklets/jquerify.html https://mreidsma.github.io/bookmarklets/jquerify.html which allow to inject JavaScript on click (and thus would make it possible to transform that site), but I gave it a shot and HN is set up to disallow this: Refused to load the script 'https://code.jquery.com/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/ https://cdnjs.cloudflare.com/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

tough 4y ago

also on mobile widths it breaks (on dsktop) when making window narrower

sjdz 4y ago
Thanks for the heads up, will fix that in the next update.

howmayiannoyyou 4y ago

LOVE. Great job. Already using and enjoying this. Keep up the great work.

sjdz 4y ago
Thanks, glad you like it :)
- howmayiannoyyou 4y ago
  Can't see my karma :-(
  - sjdz 4y ago
    It's in the user menu (icon top right). If you mean for your own comments, that's a bug and will be fixed in the next update.

drewtato 4y ago

What does "Font smoothing" do?

sjdz 4y ago
It applies -webkit-font-smoothing to anti-alias the fonts.

GNOMES 4y ago

Personally the only problem I have with the current UI is that I have to hit the arrow at the bottom to expand for more comments. Kills my ability to CTRL/CMD F and find keywords.

dang 4y ago
What do you mean by the arrow at the bottom? I don't recognize that.
- GNOMES 4y ago
  Correction, I was referring to "X more comments..." like seen on https://news.ycombinator.com/item?id=32755893 https://news.ycombinator.com/item?id=32755893 I just want all comments to load on page load so I can search easily.
  - nemothekid 4y ago
    I think this is a relatively new feature - HN used to show all comments, but the feature very frequently caused a lot of load on the servers which would cause HN to go down.
  - dang 4y ago
    Ah ok. Actually we've mostly turned pagination off lately because recent performance improvements (not the big ones - those are still coming!) made it possible. But I forgot to turn it off when I restarted the server today, and with the big QE thread burning hot at the moment, we should maybe wait a while. I agree that it's annoying and it will be a happy day when we can turn it off properly.
    - em-bee 4y ago
      oh, that's great news. pagination always got in the way when tracking new comments because when switching to the next page the order of the comments may have changed, and i see comments on the second page which i already read on the first, and i wonder which comments i am missing because they moved from the second to the first page by the time i switch pages.

theyomkarbirje 4y ago

[flagged]

StacyC 4y ago

Using it now — I like it!

jamesgeck0 4y ago

I'm not a huge fan of how it removes the built-in account-linked bookmarking functionality (favorites) and replaces it with a pro-only feature (locally stored bookmarks).

CharlesW 4y ago
Regardless of whether it's a pro-only feature, my feedback is that I need this to use the existing HN favorites capability before I feel comfortable using it.
sjdz 4y ago
Looks like that's a bug, sorry about that. Will be fixed in the next update. For reference, in the Pro version you can set the storage for your favorites to private (local browser storage) or public (HN profile). It's currently set to private storage for free users, but should be set to public (to save to your HN profile).

franciscop 4y ago

Do you accept feature requests/think this might be a good idea? I've been thinking about creating this + adding https://github.com/mozilla/readability https://github.com/mozilla/readability to grab the links that are text articles and present them in-page (and cleaned up, just the text+images+similar, removing all the sidebars, popups, etc) instead of having to go to a 3rd party website with all the popups and such. It'd have to be either a personal website or a browser extension like yours, since I wouldn't be able to host a given article for anyone to read (for copyright reasons), but I can have a modified browser that loads a 3rd party article different.

sjdz 4y ago
It's a nice idea! One consideration would be how to grab the html of the pages. In my experience, using either fetch() or an ajax request often runs into problems with CORS etc on the destination site blocking the request. Maybe there's a better way someone knows for extensions to grab remote html without running into these problems? The alternative would be for the extension to grab the html via API from a crawler running on a server (or SaaS), which should work pretty well.
- franciscop 4y ago
  Yes, I'm pretty sure (but not 100%) that extensions normally can avoid CORS/same-origin/etc issues. > The alternative would be for the extension to grab the html via API from a crawler running on a server Oh like 'https://myplainwebsite.com/parse?url=https://example.com/document https://myplainwebsite.com/parse?url=https://example.com/doc...'
- franciscop 4y ago
  So I just launched this inspired on our brief conversation! :) https://content-parser.com/ https://content-parser.com/ You can parse any URL into markdown with `https://content-parser.com/markdown?url={encodeURIComponent(url) https://content-parser.com/markdown?url={encodeURIComponent(...}`.
  - sjdz 4y ago

muhammadusman 4y ago

Out of all the HN extensions/websites I've used, this one has become my favorite. I really like the customizations available and also, it really does feel "modern" in that some things just feel easier to do with this tool.

flanbiscuit 4y ago

This looks very nice, great job!! I used to use HN-Special[1] (by the same dev who made that 2048 game[2]) but I stopped a while ago and I don't miss it. I like HN as is (for now), but I do have it at 150% zoom using the native browser built in zoom, which works great for my needs. The one thing I really really want is the equivalent of the "[l+c]" button from Reddit Enhanced Suite. In one click you open both the comments and the submission (if it's just a text one) in new tabs. 1. https://gabrielecirulli.github.io/hn-special/ https://gabrielecirulli.github.io/hn-special/ 2. https://github.com/gabrielecirulli/2048 https://github.com/gabrielecirulli/2048

brycewray 4y ago

Nice! Any way to set previously read items with different CSS, so — as in the basic HN UI — you can tell at a glance whether you’ve already been there? Don’t see that option mentioned for either free or Pro.

sjdz 4y ago
Good idea, thanks, I'll add that in the next version.

exnz 4y ago

Used it the past hour, I really like it. Thanks for making this. Can you add the "past" section too? Also, it would be great if you add left margin indicator for comment threads, otherwise for long comment threads it is not clear how deep inside I am in the thread.

rswerve 4y ago

Love this; really nice work. It's so much more readable. Older eyes thank you. I would upvote it just for having a lighter-charcoal background available for dark mode. My one piece of feedback is this: the line height adjustment on the comment pages changes the distance between comments as well as the space between lines within comments, but I think those are better decoupled. I would like to see comments fairly close together while maintaining a readable line height for the comments themselves.

sjdz 4y ago
Thanks, glad to hear it helps :) Good point, they should be separate settings. I'm going to add more theme adjustment settings in future updates to solve that.

brundolf 4y ago

Nice! It's a neat idea to implement it as an extension. And I enjoy how it just overlays the normal site (loads separate pages as separate pages, etc) And finally a dark mode. Dear god. One bit of feedback: it took me a minute or two to figure out how to comment on an article (to write this very comment); I actually had to look back at the website to make sure commenting wasn't a "Pro" feature. I don't know if the reply-arrow really translates to comment threads, especially when you're not "replying" to another comment but to the main post. Some sort of comment-bubble icon might be clearer. At the very least I think those icons could use titles, and/or "modern" tooltips. Overall pretty cool! I think I'll try it out at least for a little bit Edit: A couple other things, - It's a bummer that karma and threads (now "Comments") are hidden behind an extra click. When I'm actively participating in a thread those are two of my most frequently-used parts of the UI - The thread UI is a little too minimalist I think; it's a little hard to visually parse where one comment ends and another starts, nesting levels, etc. Some tasteful borders or lines would go a long way here, though so would some slightly-more-contrasted colors - I don't see a way to see upvotes on your own comments like in the main UI. My dopamine receptors would like that feature back ;)

sjdz 4y ago
Thanks for the feedback, glad you like it! - Will definitely add tooltips and have a think about how to make the reply process clearer. - I'd like to make the top nav customizable at some point, so when I do I'll add options for the account sections (threads etc). Will add a setting to show karma next to the user icon too. - Yeah a couple of others have requested that too. The next logical step is a theme editor, which would allow changing border colors etc. It's on the TODO :) - Yes that should be there, will add it back in the next update.

new_here 4y ago

This is great! Congrats and thanks for sharing your work! People have been asking for dark mode for years. This has it and so many other nice UI improvements too. Well done!

deleted 4y ago

[deleted]

dusted 4y ago

I really like that HN is not like that, but nice work anyway :)

genezeta 4y ago

Why not make this a user-style? [0] In particular I ask this because your approach -if generally applied- means installing an extension for each single site, which feels a bit too much. [0] https://userstyles.org/styles/browse/ycombinator https://userstyles.org/styles/browse/ycombinator

forgotpwd16 4y ago
There're some extra features (e.g. bookmarks) that utilize scripting and data storing. So a userstyle wouldn't cut it. A user script though would. Also privacy-wise I think there isn't a way to limit an extension to a single site, something possible with a user script.
- Pathogen-David 4y ago
  > Also privacy-wise I think there isn't a way to limit an extension to a single site On Chrome/Edge you can, not sure about Firefox. Additionally this extension only even asks for permission to access Hacker News and some backend stuff presumably used for the paid tier.
  - forgotpwd16 4y ago
    Yes, you're right on asking permissions. I didn't had a site-specific extension so couldn't see them. Unfortunately restricting any extension, if it doesn't restrict itself, is only possible on Chrome and its derivatives.

FpUser 4y ago

It installs fine on Chrome but fails to install on Brave (network error download interrupted). Too bad as Brave is my main browser. I have no problem installing some other Chrome extensions on Brave.

andrewgioia 4y ago

Shameless plug for a small Userstyle I wrote: https://git.gioia.cloud/andrew/gists/src/branch/master/Userstyles/Hacker%20News%20Dark.css https://git.gioia.cloud/andrew/gists/src/branch/master/Users... It adds dark mode and some spacing/font size/readability improvements for wider screens.

kitsunesoba 4y ago
Just a little usability tip, if you name the css file with the extension .user.css, when viewed as raw from Github, Gitea, etc extensions like Stylus will offer to install it so users don't need to create the userstyle entry themselves.

Eduard 4y ago

Doesn't work with Chrome Android.

dotcoma 4y ago

Why? If it ain't broke, don't fix it.

blooalien 4y ago
Thus the reason it's nice that it's packaged as a browser addon. Easy for those who don't like or want it to simply never install it.

guytv 4y ago

This is awesome, I'm using it as I type. very refreshing. The only thing that is missing, is that the front page does not show which articles i've already clicked (the link is not grayed), so I can't quickly scan the list. Thanks! great job!

dindresto 4y ago

Would be great if there was an option to change the font color for more contrast :)

helf 4y ago

No thank you. HN is great because it /isn’t/ … that.

forgotpwd16 4y ago

Nice, but no thanks. HN's old boring design is an oasis on the modern web.

joegahona 4y ago

I really like this! Just a subjective thing -- I would consider offering Verdana in a future release, for those (like me) who aren't yet ready to lose that flavor of HN. But all the other adjustments are very desirable to me so far. Regarding the name: The horse might be out of the barn, but calling this a "modern" HN sounds a bit too much like a value judgment to me, though I doubt you meant it that way (and I doubt anyone at HN really took offense). It also triggers all the curmudgeons who are hellbent against anything "modern" just because it's modern. Great job!

sjdz 4y ago
Thanks :) Yes the plan is definitely to add more font selection, including Verdana for the classic look! I'd like to eventually add a full theme editor to change all aspects of the UI.

tobyjsullivan 4y ago

The following is not any sort of critique on the author’s work. The design looks quite fresh, in fact. This is merely a tangential observation. Anyone else see the mock-up and think “this looks slow”? Logically, it’s not a defensible inference in the slightest. There’s nothing about this design that would necessitate performance tradeoffs. But that’s the barely-conscious, emotional first impression I had. I wonder if there’s something about “modern” design (or a specific subset thereof) that correlates with subpar performance.

the__alchemist 4y ago
Yep! My pattern-matching brain assessed as both slow load time (probably not infact true due to it being an installable browser extension?), and high input latency.
zozbot234 4y ago
> Anyone else see the mock-up and think “this looks slow”? It just looks clumsy and distracting compared to plain HN, IMHO. It highlights elements like usernames, the total amount of comments(!) or the upvote/favorite actions, that users will only rarely interact with or even want to look for. Meanwhile other actions have to be hidden beneath a "…" widget, lest the page become too cluttered. The factory HN look does a much better job of bringing the comment text into focus and reflects the threading hierarchy without needing a lot of padding to space things out.
crazygringo 4y ago
No, funny -- for me it's precisely the opposite. The design is clean, modern, minimalist -- and I associate sites that look like that with loading in a blink. It's the sites where everything is crammed in and packed with ads that load slowly, like most news sites. Everything about this style of design says "fast" to me.
qsort 4y ago
I had your exact same reaction. Related story: In my free time I am a coach for a competitive math team, I recently had to design an application to automate multiple choice problem submissions. Nothing stellar, your run-of-the-mill CRUD app. But it was under some interesting engineering constraints: users would have to log in from a variety of devices, phones, tablets, bad chromebooks, etc., possibly on slow cellular connections. So naturally I went for a simple server-rendered design, with stock Bootstrap hosted on a CDN. The overwhemling reaction was "this is so fast". Now, being server-rendered with absolutely no XHR, the app spends most of the time doing nothing, but it's interesting laymen think it's fast. I think we came to associate "modern" designs with piles of javascript, requests everywhere, popups, ads, and the like. Probably the correlation is indeed there, even if it's obviously not causation.

jacooper 4y ago

Finally, I use HN exclusively through glider on android, because the Website is less than stellar tbh. I like the modern UI for Wikipedia too, it would be great if you can make it work on Wiktionary.org too! A note, the wikipedia extension doesn't work on non-engoish versions of Wikipedia, for example de or ar.Wikipedia.org Unfortunately it doesn't seem to be open source, a big nono with browser extensions It would be great if you can show the fav icon of the link beside the titles, it helps differentiate posts.

hammyhavoc 4y ago
Yes, lack of source makes this difficult to trust.

dmix 4y ago

I've seen a hundred of these but this is quite nice, I'll give it a shot for a week. The configuration makes it much nicer, others have been too opinionated. One thing: it'd be nice to click the whole top header of the comments to collapse them, instead of clicking the far left toggle. Edit: also not seeing my comment score inline on the page header makes it difficult to know if I should check my comments for activity. this one might be a deal breaker.

sjdz 4y ago
Thanks :) Will add the comment score. Clicking the header to collapse is a good idea, I'll get that working too.
- dmix 4y ago
  highlighting the OP w/ a color was a nice touch btw
- dmix 4y ago
  also the more I use this the more I like it, nice work :) (I'm an HN-junkie)

uxcolumbo 4y ago

At first I thought 'Not another one'. But this is really well designed and great to have the style customization available. Are you a designer? The upvote, bookmark buttons etc probably need a tooltip - not everyone might know what those icon buttons do. In fact I'd add a tooltip to all icons buttons. Also, when the width is set to 100% - the menu that appears after clicking on the more button (3 dots) is cut off - as it appears to the right. You probably have to do some edge detection or always show it to the left. And nice one for trying to earn a buck.

sjdz 4y ago
Thanks for the feedback, glad you like it :) Will add tooltips to icons in the next update + fix that 100% width bug too.
- Snacklive 4y ago
  Also i would really like an option to being able to collapse comments just clicking the comment box/card Excellent work ~

cmer 4y ago

I really dig it. Great job. It might not be for everyone, but to me it’s a real breath of fresh air.

barroomhero 4y ago

It's probably on me, but is there no change in color for visited links?

crazygringo 4y ago

It's very nice-looking! One deal-breaker for me, sadly -- having the collapse/expand and upvote/downvote buttons on opposite sides (left, right) of the page is way too annoying. When I read comments, I'm constantly voting and collapsing. Using my trackpad to jump back and forth is just too much. Current HN isn't great for that, but it's usually only traversing about a quarter of the page's distance.

sjdz 4y ago
Thanks for the feedback. I'm going to make the space in the comment header clickable to collapse/expand, which will reduce the distance a bit. Would that work for you? The other alternative might be to add a setting to move the collapse/expand arrow to be part of the icons on the right.
- crazygringo 4y ago
  I would find it much more natural to have both expand/collapse and upvote/downvote on the left, simply because text is left-aligned. I find any functionality pushed all the way to the right side to be harder to use, simply because it's not "together" with everything else on the left. Your eye has to do more work to match right-side content to left-side across a whitespace.
  - sjdz 4y ago
    Yeah that makes sense. I'll add a setting to move vote icons to the left. Thanks.

latchkey 4y ago

I've been pretty happy with this one: https://github.com/plibither8/refined-hacker-news https://github.com/plibither8/refined-hacker-news

a_wels_catfish 4y ago

dankwizard 4y ago

What an excellent look, great work putting this together!

jonny_eh 4y ago

Congrats, it looks very nice! One critical feature that this cuts from native HN is the changing colour of links already visited. I'll often click an article, then navigate back, and use the changed link colour to reorient myself on the page.

sjdz 4y ago
Thanks! Yeah I forgot that, will add a setting in the next update to change the color of visited links.

movedx 4y ago

I really like this. Thank you. I'll use it and see how I go.

overflyer 4y ago

Hey man, I installed the Firefox extension and I am loving it. However the Auto Dark Theme does not work and DarkReader does nothing at all on your layout. Having a dark version of this would be awesome :) Thanks for your hard work. I appreciate it! :)

arafatamim 4y ago
It has a dark version already. Press the "aA" icon on the top right toolbar
- overflyer 4y ago
  Already found that. Thats what I meant with "Auto Dark Theme", however it does not work :).

napier 4y ago

Modern HN. *only works on desktop computers. The screenshots look nice on mobile though. Good effort but I'm kind of attacked to HN how it is and I hope they never change it (and that they continue to make it east for people to riff on the original).

kungfufrog 4y ago

Hi, I quite like this extension! One minor criticism though that prevents me from using it: links I've clicked through to from the front page don't change colour indicating where I've been in the past. This is infinitely useful on a heavy HN browsing day :)

sjdz 4y ago
Yeah forgot to add visited link color, it's coming in the next update :)

isatty 4y ago

This is not a critique of the work, I understand that some folk prefer it and that its beautiful work. I _hate_ modern web UIs however. Give me plain old websites that are information dense, with none of the fluff. HN and old.reddit.com are my daily reads. I will be _very very_ sad when old.reddit goes away and I probably will have to go app only (Apollo) when that happens.

tartoran 4y ago
Same here and in my opinion one of the reasons HN became what it is: they didn’t fuss with the interface, kept it simple and light. When old.redit stops working I’ll probably stop using it altogether.

ElijahLynn 4y ago

I immediately installed it, thank you. I really like the dark mode. However, I couldn't figure out how to comment initially and looked for the comment box, even at the bottom and couldn't find it. I finally realized it is the left facing arrow on the right just under the title. I think that UX could be improved to surface the comment feature. Also, one feature I really wanted that I don't see on the extension is the ability to "favorite" it without clicking into it. So, I'd love to see that added. I will consider paying for the pro version to support you, but am going to give it a week or so on the free version. Thanks

ElijahLynn 4y ago
I think I'm really going to like the easy access to the history as well!
sjdz 4y ago
Thanks, glad you're enjoying it :) Good suggestions, I will try to make the commenting process clearer, and add a favorite icon to the lists too.

Uehreka 4y ago

Oh THANK YOU. The extension I’d been using before has been having bugs recently and stopped showing “next page” buttons.

staindk 4y ago

I'm late to this but just wanted to mention - I'm checking out the extension and like it quite a lot. Only feedback I have right now (that I haven't seen anyone else mention) is that I'm finding it hard to jump to the next "top-level" comment. If I'm half way down a comment thread and decide I just want to skip the rest of this thread, I'm used to just scrolling down a bit until I see the next top-level comment and I'll read from there. It's easy enough to do in non-skinned HN because the everything is left-aligned, but with the extension I haven't been able to intuit a left 'border' yet and am not sure if it'll ever come to me.

cowtools 4y ago

I think HN looks fine already. The only real problem with this site's design is that the text is too small.

MollyRealized 4y ago

> suggestions welcome One tweak I hope HN will roll into its own UI: if "HN Can't Process Your Requests This Quickly", then offer a "window.reload()" link. Comes up when I'm opening a bunch of bookmarks at once and maybe there's three or four HN links that open. Same thing as hitting refresh, just a added convenient step.

stereoradonc 4y ago

I totally love this! IMHO worth the upgrade. Kudos. This solves one of my biggest pain points on my Ultrawide monitor. Excellent layouts/fonts and dark mode. Perfect!

blooalien 4y ago

I love that as an "end user", I can easily choose to have (or not) this degree of customization by simply using (or not) an addon like this and HackerNews itself (due to it's simplicity of design) does not get in the way of this at all. Just one more reason that HN's design is basically perfect. Thanks much to both the author of this addon, and to HackerNews dev(s) for contributing to a "better Web" for all.

e1ghtSpace 4y ago

I like this, but I would love it even more if there was a theme with a background gradient - maybe navy blue at the top to dark grey.

slmjkdbtl 4y ago

Why is this a browser extension not a web app on its own domain? Also curious if there's any flaw in the official HN web app you see that incentives you to make this.

throwaguey 4y ago

Looks good! Biggest appeal for me is that it provides dark mode without needing to use a third party webapp or a CSS customization extension with broad permissions requirements. Some things I noticed: changes to the font size/width/line height don't seem to persist between the comments page and the front page. On top of this, the bars don't have clear numerical values so it's hard if you make any tweaks on them to match the settings across pages. ALSO I got kind of out of hand with those settings (line height in particular) and wanted to return to the default, but there's no reset button as far as I can tell.

sjdz 4y ago
Thanks for the suggestions, glad you like it. The theme settings (font size/width/line height) apply to the current view. So you can setup the style separately for each of the 3 views: story pages + index pages (list or table view). I'll add all this info to the help section shortly. Will also add tooltips to the sliders (with current value) in the next update + a reset button :)

nextaccountic 4y ago

Hi, are you familiar with https://github.com/plibither8/refined-hacker-news https://github.com/plibither8/refined-hacker-news ? I'm currently using it It has some features like, if I select a part of a comment and hit reply, it will reply quoting that part edit: oh, you're charging for it anyway, my feedback is: there's a slow loading time whenever I open a link and I don't understand this

frazbin 4y ago

doesn't reflow text properly on zoom in firefox, had to disable

webjac 4y ago

Funny how every some years a young developer comes and does the same again and again. It's always fun to watch. It's even better that HN hasn't changed in all this time. I don't even ever go to HN, I just read it on my RSS feed.

egorfine 4y ago

My first reaction: gosh, another one. My second reaction: hmm, it's an extension, I'm curious, show me. My third reaction: I absolutely love it.

simonebrunozzi 4y ago

One thing I'd like to see is the ability to filter out posts with less than X amount of points. At certain times of the day, the first page (30 entries) has ~30% of entries which are low points, and I usually prefer to avoid these. Thanks for your work!

sjdz 4y ago
Good idea, I will add that to a future version. Thanks!

ekabod 4y ago

on hackernews, comments appear really as a tree, and that is pleasant. Not so much with this extension. It is not so clear where stands the comment we are reading.

Snacklive 4y ago

I personally love this. I hope this wasn't a web extension but i really like it nonetheless. The design is very clean and i don't feel like it's wasting my time with lots of unnecessary stuff in the screen. Good job honestly, it really modernizes an old site without doing stupid sh*t

kytazo 4y ago

when I saw this, first thing that came to mind is the awesome wiki redesign addon I'm loving so much and its the same guy making it!! what a legend :) thanks

stephenitis 4y ago

hckrnews.com user here. I might try it out, what are your hosting plans and are you able to keep it standing for the future? Good work!

pwpw 4y ago

I'd like to be able to navigate each comment by pressing 'j' to go down one comment, 'k' to go up one comment, and enter to collapse the comment.

AdmiralAsshat 4y ago

Gave it a try, and so far, I love it! I especially like that I can make the site look incredibly nondescript and hide my username, so that it's less obvious at work when I have my pinned HN tab tucked away.

lazylion2 4y ago

Beautiful design op. Well done!

SergeAx 4y ago

Great job, thank you! Installed it at once and trying to use. Was not obvious how to reply at first glance, but I managed in a couple of minutes) Please consider adding some kind of comment's depth indicator. My most frequent action on long threads is "stop reading the rest and move to next top-level comment". If previous top level comment is beyond top of the screen - I just scroll down looking for minimal indent. With your centered design it is impossible. A thin line by the left side of text column wuld be enough, or you may go further and add some dots or pictograms on the left of each comment. Just a suggestion.

SergeAx 4y ago

Ah, and also thank you very much for hiding a number of upvotes/karma by the username. It was really disctracting, and there was no way to remove it with uBlock Origin, only with the whole login block.

leokennis 4y ago

Bit late to the party, but there's no visual distinction between visited and unvisited links - is that by design?