HN Explorer

Show HN: I made a modern web UI for Hacker News (modernhn.com)

308 points by sjdz ↗ HN
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

202 comments

[ 4.6 ms ] story [ 262 ms ] thread
pssdbt
Curious why a browser extension and not a site like https://hckrnews.com/?
sjdz
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
Looks neat! Going to give it a try...
proc0
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
Glad you like it :) You should just be able to hover over a comment and click the reply icon?
skunkworker
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
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
Yes, just click the "aA" icon to open the settings, and use the bottom slider to adjust the content width.
skunkworker
That worked thanks, I would recommend adding a tooltip to explain what that action is doing.
sjdz
Will do, thanks.
xemdetia
I really hate how there's no alt tags or anything like that to actually tell you what any of the sliders mean.
sjdz
Good point, I'll add tooltips to the next version.
vincnetas
Top right theres 'aA' setting button. Play with is.
porter
This is unexpectedly great.
diimdeep
It is way less efficient to consume HN with this design, so I won't use it.
jtokoph
Why is it way less efficient?
em-bee
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
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.
daqnal
I'd day there is a balance between form and function when it comes to websites, and I'd rather stare at a nice looking slightly less efficient webpage rather than an ugly but more efficient one.
sjdz
There's some overhead, but not much. It basically just parses the underlying HTML as soon as it's loaded, then redraws it with added features.

Also no heavy frameworks used, just basic hand-coded JS + jquery + a few helper libraries (luxon for dates etc)

topaz0
The post was about efficiency for the user, not for the computer.
sjdz
Yeah I missed that, first thought was efficient performance!
xemdetia
I agree, it's a lot harder to logically/visually move through comments. The grey-black-black-with-underlines is a lot easier to read then the bold-black/black/thin-hl. It's kind of why I hate the new reddit style too.

I also don't like having to hover to see the icons for reply. Why are you hiding the parent/context buttons for navigation in a dot-dot-dot menu when you drill into a comment chain? Where's prev/next? Upvote/Downvote/hover UI covers stuff, and no alt tags anywhere to be seen.

Also why does it need perms to firebase and extensionpay again?

It just feels clunky even as a redesign.

syastrov
I think there’s a trend to replace applications having information-dense designs with all actions at your fingertips with ones that add so much padding that you can only see a little bit of information at a time and in order to perform any action, you have to hover or click several times.
em-bee
yes, and i find it disturbing. either a feature is there, then it should be visible at all times, or it should be off completely. while i am reading my eyes are tracking the locations of those buttons/links so that i can quickly move the mouse to use them. if they are hidden that slows me down and gets in the way. it makes sense on small screen like mobile where it is better to use the space to show more content and have actions hidden behind a menu, but not on the desktop.
D_Joni
https://hackrnews-dj.netlify.app Have you tried to use this HN clone? It is a SPA, but it has very similar UI to the original site, and it has some extra features added (dark an modern UI, bookmarking with highliting new comments, searching through comments, navigating, root comment collapsing in any child comment, and a few other). It is also optimized for desktop and mobile reading, and very readable.
sjdz
- Good point, I'll add a setting in the next update to always show icons.

- Parent / context are in the menu just to keep the design clean. But I understand that's not what everyone wants, so I will add a setting to show these with the other icons, instead of in the menu.

- Prev / next are moved to the "control pad" (pro feature), but my intention is for the free version to support all current HN features, so I will add those back in the next update.

- The permission to firebase is to access the HN API [1] to grab user profile info etc. The other is for the pro upgrade using ExtPay [2]

[1] https://github.com/HackerNews/API

[2] https://github.com/glench/ExtPay

tough
Oh wow, it's like HN has entered the 21st century all of a sudden

great design, Im keeping it enabled for testing

tough
One nit, it seems to hijack going back/forward in history using touchpad? Browser buttons work. idk
olivierduval
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
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
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
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

[2] https://news.ycombinator.com/user?id=glench

hkdobrev
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?vi...

sjdz
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/#publis...

[2] https://chrome.google.com/webstore/detail/modern-for-wikiped...

uo21tp5hoyg
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
I view HN at 200% Getting old :/
TakeBlaster16
I've always felt bad about 133% and this thread is putting things in perspective for me
teejmya
I use 200% and I'm in my 20s. Nothing wrong with reading comfortably!
pbasista
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
Hah, I have particularly bad eyesight and HN and Terminal are both around 175% normal (12pt) zoom levels.
sshine
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.
Akronymus
For me, I dislike that it is not in dark mode without some userscript
tsol
A toggle switch would be very nice for night time reading.
DavideNL
Same here.

Firefox on iPhone/iOS can't zoom text (a long time open request.) Therefor it's impossible to this website with it. Kind of ridiculous.

Is it really so hard to create a proper default layout? Text size seems so basic...

mmcnl
The current design is simple but lacking imo. Font size is small, not touch friendly. Also annoying that a single new line doesn't do anything, you need to have two. Doesn't make sense at all.
ggorlen
> Also annoying that a single new line doesn't do anything, you need to have two. Doesn't make sense at all.

This is how markdown works, so it feels natural to me (although then the differences from markdown become apparent...)

theonething
I apparently set HN to 150% so long ago and had gotten so used to it I didn't even realize that I had until reading this comment.

Just tried 100% out of curiosity and you're right, it's ridiculous.

capitainenemo
Hm, dunno. Just tried out zoomed in to 150% and switched it back. I like having more text on the page without scrolling. Esp given how wordy people get get here, and as the nesting grows.

But I guess to each their own. +1 for loving simplicity of current design though.

thirdsun
120% here. I suddenly feel very young.
[dead] fred69
tough
Get off this thread then? Nobody forcing you to use it...

TF with your agressivity

markeibes
Centuries of advances in typography are surely not a bad idea
systemvoltage
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
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
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.
tough
also on mobile widths it breaks (on dsktop) when making window narrower
sjdz
Thanks for the heads up, will fix that in the next update.
_abox
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
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.
xvinci
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 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.
sjdz
It's possible, but as I mentioned in another comment, building this as an extension has some added benefits [1].

> 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

No need to worry about that, as it's limited by the permissions specified in the extension manifiest. So this extension can only access news.ycombinator.com and extensionpay.com to facilitate the Pro upgrade.

[1] https://news.ycombinator.com/item?id=32769145

gremlinsinc
I wish this were more of an SPA with an account system/db of it's own, I'd even pay for a subscription (small one). I'd basically like there to be a mobile app and desktop version that no matter where I read an article, it's marked read. I use materialize and hckrnews now, if both of these could keep track of the same bookmarks, visited links, and maybe allow note taking or creating groups of saved things, that'd be awesome. Also notifications and a messaging system like reddit has would be cool...in fact I just want a redditized HN experience lol.
sjdz
Cool ideas! It would definitely be possible to build in a cloud sync feature at some point to enable those features.
wffurr
There's [Hackerweb](https://hackerweb.app/) which uses the HN API and does some clever stuff delegating to a webview.
helsontaveras18
Thanks for sharing! I love this skin, the dark mode is really easy on my eyes. And the threading is really nice too.
addandsubtract
I use hckrnews.com but it only changes the start page.
gitgud
> it's good principle to not have to give this permission.

Well consider that when you go to a proxied version of HN, you're essentially giving an opaque server "permission" to view all your traffic it sends to HackerNews... but you can't verify what it's doing with that

At least this extension states exactly what permissions it needs, and I can inspect it and see what it's doing...

Fire-Dragon-DoL
To be fair, I wish HN had a substantially bigger font, for phone reading.

That's about my only complaint.

Oh, and way bigger links for my big thumbs

hericium
> To be fair, I wish HN had a substantially bigger font, for phone reading.

On desktop, HN is the only website that I have "zoomed". 120%, btw.

savef
Ah, mostly the same for me! (I'm very happy with it this way and wouldn't expect the site to change). But I do this on a couple of other text-heavy sites also, but not many.

So often a zoom will break complicated UI layouts and their JS interactions, so I appreciate the simplicity of this site allowing my user agent to customise my experience and still have it work.

drannex
Number one should be larger up/down buttons. Not much larger, but just big enough.
throwoutway
I zoom in via my phone’s browser and it works well
thiht
> But this is the good thing about it, people can extend it as they wish.

You would think that but no. The HTML is so full of tables everywhere that it's not that easy to do anything creative with it. I'm pretty sure that's why some features such as collapsing comments took so long to be implemented (and not because "not collapsing forces you to read")

drewtato
What does "Font smoothing" do?
sjdz
It applies -webkit-font-smoothing to anti-alias the fonts.
GNOMES
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
What do you mean by the arrow at the bottom? I don't recognize that.
GNOMES
Correction, I was referring to "X more comments..." like seen on https://news.ycombinator.com/item?id=32755893

I just want all comments to load on page load so I can search easily.

nemothekid
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
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
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.
dang
Yes, it's actually a hard problem to solve when the content isn't ordered chronologically. The front page(s) have the same issue. With /newest and other chronological feeds, of course, getting pagination correct is easier—though you still have to account for new items having shown up in the meantime.
howmayiannoyyou
LOVE.

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

sjdz
Thanks, glad you like it :)
howmayiannoyyou
Can't see my karma :-(
sjdz
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.
StacyC
Using it now — I like it!
jamesgeck0
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
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
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
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 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
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.

muhammadusman
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
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/

2. https://github.com/gabrielecirulli/2048