Haxplore is a little web app I created because I didn't like to click around the HN interface to read submission and discussions. I also wanted to experiment with different ways of implementing keyboard control in web apps and HN seemed like the perfect test subject. So maybe it's useful for some of you too. The most important features are:
- Intuitive keyboard control
- Link detection in comments with hotkeys to open them directly
- Better readbility and formatting of comments
- Hotkeys for the most common actions
- Ability to open stories or comments in an overlay for reading long texts
I wish this looked more like hacker news: IE, same colors, same fonts, same text size. I've been using Hacker News for so long that its look and feel are part of its queues. Different colors / fonts just gives the same content a different feel.
I'm torn on how you display comments. One thing that I don't like in Hacker News is that a top-level comment with a lot of replies ends up pushing other top-level comments too far in the page. Your approach, though, is the polar opposite: Never show replies until I select a comment and push ->. Perhaps show a few of the replies with smaller text?
wow, I've never even thought of such a simple change until I've read your reply (all comments collapsed by default as opposed to expanded by default), but I want it really badly now.
Many HN apps and browser extension by now have an easy way to to collapse comments (usually by clicking an icon next to the comment or tapping on the comment on touchscreens), but I don't think I've seen one yet where collapsed by default is an option.
P.S. And now that I am thinking more about it, apps and extensions (at least the ones i've used so far) don't even have the true "collapsing" function (or maybe I just wasn't aware of where it is buried in the settings, so please let me know if I am wrong here).
When you try to collapse on Refined HN (ff/chrome extension) or HACK (iOS app), it doesn't hide all child comments and then keeps the root comment (just listed those two extensions/apps as an example, because those are the two I personally use). It hides the content of all comments including the root comment that you clicked, but it leaves a small indicator that there is a collapsed comment, basically just the username and the number of comments.
To this point, I have a question to everyone. If there is an HN app for iOS that anyone can genuinely recommend that has a feature when you collapse a comment, it still shows the one you clicked "collapse" on but hides all child comments (as opposed to the text content of the root comment you collapsed being hidden as well), please post them.
Thanks, good point. I'm thinking about adding a hacker news theme that mirrors the colors and fonts.
Showing a few replies would be possible, but I think it would clutter the interface and make the thing a bit more confusing. In my opinion showing the amount of replies should be enough, but I will keep this in mind.
I use a tiling WM, so I can have this open in a window (or scratchpad) that is shrunk to the width of your column, and just shoot over to it, and move around nice and easily!
Two things:
- alt + h doesn't open the Help for me, it opens the actual help menu in Firefox.
- It would be nice to mark the entries as 'read' and show if more comments have happened since reading
Edit:
Wrapping it in a small Tauri app would be cool, then it gets rid of the bookmarks and stuff I have at the top :D
1. The alt+h hotkey will be probably be replaced by "?". That should fix this.
2.1 That's a pretty cool idea. Would you want the "mark as read" part to happen automatically or manually?
2.2 Showing new/unread comments is also a cool idea but it will increase the amount of requests to the HN api. However I'm gonna look into it.
Wrapping it in a Tauri might be cool, because I actually wanted to try that. But I think the first step would be to make it a PWA, so you can install it without downloading anything.
It would be neat if there was an option (maybe for the future, a simple settings modal) to either mark as read once 'opened' or a hot key to mark as read (or toggle?). Kinda like email clients lists.
I use live bookmarks in Firefox, so I have a tick next to the items I have looked at, just something like that, or some sort of visual indication.
The comment count thing was more a thing I like on other sites, so like on ArsTech I can see if there are more comments from where I last read (which is handy to go and see if there are more cool discussions going on) but yea maybe would hammer the API a bit too much - unless limited to just 'new 'or 'ask' or something
> Showing new/unread comments is also a cool idea but it will increase the amount of requests to the HN api. However I'm gonna look into it.
At the simplest level LocalStorage or equivalent keyed on the submission id with a prior comment count to be compared with the new comment count would be sufficient. If it had a time of hast check as well, highlighting new comments would also be easy.
I'm not sure about other people, but thise are really the two things I care about most when trying to keep up with a discussion (are there new comments, and which are they).
Storing view time would make things easy, but might break on subthreads. You can probably just store all the comment ids in LocalStorage, and highlight comments that aren't in that set before putting them in there (or maybe put them in there only when scrolled to/past).
Please work on this more, this is just such a pleasant interface! On the other hand, the criticism here in HN is also mostly correct. It should be more accessible, but definitely a great start!
I was just thinking about this myself. It would be so awesome to add something like OAuth2!
But then I realized, this would break the subtle cohesion of the current model. Everyone has to specifically come back to news.yc to comment. Everyone has to use the HN design. I do wonder if this is intentional, or at least strategic - because the current approach enforces a certain perspective when commenting that *perhaps* might be broken, or at least made much much harder to maintain, by the fragmentation induced from being able to run off and build totally alternative interfaces.
It's just a thought. I'm not sure if this is just hot air.
Looking at reddit, whenever someone complains about degredation of discussion, somebody pops up and says "just use old.reddit.com". However, everyone else is still on new reddit, so even if you increase the quality of your submissions, the overall quality still drops.
I'm able to add comments using my current unofficial Android app. These apps just work around the requirement by issuing some sort of HTTP requests similar to the site itself.
Intitial impression: "oookay [click] let's have a look let's see how badly broken *this* HN frontend i--ooh. Oh, okay. Wow this is nice!"
And it truly is. There's something this honestly nails.
But after using it for few moments, I was able to crystallize what I perceived was "wrong" with the design: the mechanic of combining locality with spatiality means I completely lose sight of the bigger picture. I have a really bad memory and attention span, so I depend on constantly reading cues/senses of scale from my environment. As in, they need to be constantly there. (For example, the first thing I'd do if I ever used a Mac was make the scrollbars permanently visible.)
With this UI, the immediate and global focus (the only focus) is on the comment I'm reading right now. Paradoxically, the clear intuition is that this would reduce distraction and increase focus, but (at least for me) by only presenting individual details I cannot establish and maintain orientation about how big a thread is, the structure of it (a few large mega-subthreads, or subthread islands, or hundreds of upvotes but only like 15 total comments), etc.
I tend to take full advantage of scroooooling through and cherry-picking comments to read at random. I've long dreamed of solutions that provide a rigid framework that ensure I read every comment, but I've kind of accepted that such approaches just don't work in practice; they require a tremendous amount of discipline to use (almost like grammar-proofreading a book).
A UI that has me consider every single comment as globally important ("it's the only thing on the screen at this exact moment"), both a) maxes out my attention span very quickly and b) feeds me a non-representative, breadth-first view of the discussion, because I find there's a nontrivial effort associated with needing to hit the right arrow key to expand the comments: I Have No Idea How Many Subcomments Are Hiding In There nO I aM NoT GoInG iN ThErE ThAt iS ScArY. For whatever reason (???) it's physiologically easier to just keep hitting Down instead.
This is honestly novel and interesting - and because of how well-executed this is, I can say that if you were to ever to consider tackling global orientation (I'm imagining spotlight/expose type zooming here, but I strongly suspect that would be just as disorientating as not being able to vaguely internalize the bigger picture at all), I would be very interested to see.
Agreed with pretty much everything here. It's a nice UI, looks good, is smooth, well done overall.
However, it doesn't fit how I read HN or Reddit - I tend to scan and be drawn to keywords and visually interesting parts of the thread. This type of UI turns the comments into a TODO list of indeterminate length.
Thank you! I'm definitely not complaining about the amount of feedback. It's really amazing.
That really is a great idea. One issue might be that not every site allows being shown in an iframe because they block that functionality. But I'm gonna look into it!
yeh, I can imagine that feature spiralling in complexity (up to pre-checking server-side if they provide CSP/Frame headers, then outright download and proxy the page :P )
Yeh, I could maybe image a 'p' button that would show a preview, that would just be hit-and-miss... I wonder what percentage of submissions on hacker news actively disallow iframes... like actual blog posts and not things like 'new apple product' from Apple's website :wondering:
I completely agree on the iframe. After opening a link I keep trying to go back by pressing the left arrow. Pressing Ctrl+W is not to bad to close the tab though.
Indeed, not too bad and this is what I did, but certainly not immediately natural, as you have to rely on the browser's tab history
(i.e. you closed this tab, redirect user to previous tab), so wouldn't work if I starting viewing a HN post, then continued work (that I should have been originally doing) then go back to the post, close it and then browser redirects me back to the 'work' tab that I came back from..... if you see what I mean.
Tab history:
* Expected: HN client -> website from post -(ctrl+w)-> HN client
vs:
* HN Client -> HN post website -(switch tab)-> real work work tab -(switch back)-> HN post website -(ctrl+w)-> real work tab :(
)*
*Think I opened a bracket somewhere in the comment and haven't closed it
I could not figure this out even after using the help dialog repeatedly, since I assumed "navigate" meant "scrolling up and down the page", and there were three shortcuts that actually mentioned comments.
It looks good! Thank you for creating this. Just one thing - I visit hn.com with js disabled, but your website requires js to function. For that reason alone I will stay with hn. I don't mean to come across as ungrateful, because I do not mean for my comment to appear that way. Thank you for sharing!
Can you expand on that? What were your references when choosing these key commands? Everything else I use chose `?` as the help key. My macbook doesn't even _have_ an `ALT` key...
With that I mean the navigation through the submissions and comments via the arrow keys not the actual hotkeys or key combinations. The alt+h was a bad choice and will be switched to '?' in the next update.
However, it's impossible to read longer comments this way. This comment https://news.ycombinator.com/item?id=28705415 in this very thread is too long to fit in my browser window, which is maximized on my 16" laptop. So far I'm just pressing O, but it still takes time. A scroll for long comments would be really welcomed.
Other than that, it's a very cool UI! I can see using it full-time and press O only when I want to reply. Actually, I just did :D
This is true. I recommend to not use keyboard tabbing while navigating throught the comments. Makes it a lot less confusing and you still do everything.
I really like it! I'll use it as my default HN client for a while, see how it goes. This app makes me focus more on the content than regular scrolling HN.
idea: can you pre-fetch just the top comment for each post?
Currently ..clicking on right arrow always shows the "loading" animation for 0.5-1 sec.
Instead, if we readily show the top comment instantly and then lazy-load the rest, it will drastically improve the UX. User will perceive near zero wait time that way. My 2 cents
Thank you! That's funny, when I started this project I actually wanted to build it for HN, Reddit and Twitter, but couldn"t find the time for it and scrapped that idea. Guess I should revisit that decision.
Personally I am a fan of scanning over threads on https://hckrnews.com/ , filtering by "Top 20" or "50%", and opening interesting ones in a new tab. It especially helps to only go through the titles I haven't seen yet.
I really prefer that it shows only the top level comments by default, which can be expanded with a simple key. Overall fantastic experience.
I just have two suggestions. Add a dark theme and options to show only top 10/top 20/all just like hckrnews.com which helps to keep track of things and not miss important stories on busy days.
This is great! For stories with 100s of comments it's nice to start browsing from a collapsed view of top-level comments.
- Why is the Comments count shown only for the highlighted story?
- On Firefox Windows, pressing the Enter key on an item triggers a popup warning at the top of the page. Took me a few tries to notice what was going on.
- Alt + H triggers the Firefox Help menu for me :| Can you change that shortcut key to "?" instead? GMail, Github etc use "?".
- The green background for the comment text is a bit too dark.
- Is it just me or is the comment text not showing paragraph breaks?
- The zoom in transition when the comment text modal shows up just slows things down. If I'm going to load many comments in that view I'd rather it load instantly. Also, what's the purpose of this modal? There's a "Space -> Read" for the comment that I'm already reading. I don't get it.
1. I initially wanted to display as little information as possbile to keep it clean and prevent clutter, but I guess it wouldn't hurt to show at least the comments count.
2. Oh, I didn't notice that. Might be caused by the way the new tab is opened. Gonna look into that, thanks.
3. Good catch, gonna change that.
4. Do mean contrast wise?
5. You're right, the spacing between paragraphs is missing. That will get fixed.
6. Yea, I will probably increase the speed of the transition to match the rest of the UI.
The modal exists for reading longer comments. It's unnecessary for most, but during testing I found quite a lot of very long comments (especially in Ask HN) that didn't fit on the screen. Scrolling directly inside the comment felt weird, so I added the modal. It also increases the text size and makes it easier to read long paragraphs.
Probably not to everyone's taste but I'd prefer for the active news item to be in the center of the screen and not at the top. I keep scanning down the page with my eyes and then realising I need to press down 20 times to get to where I scanned, I probably wouldn't scan so far ahead if it was vertically centered but also the page up/down would alleviate some of this.
Otherwise very refreshing and looking forward to see it iterated.
At some point during development you could actually see all the columns clearly and most of the screen space was used but it was very disorienting, at least for me. That's why I removed it. But I guess some people think differently, so maybe I'm gonna add an option for that.
Thanks! You can now disable the blurring of previous elements/columns in the settings. And page up/down support also arrived with the latest update today.
The previous item (or parent comment) is always visible in the white box on top/above the current comment. But it's quite easy overlooked because the change from the article/link to the comment is not very noticable.
You can see the current parent comment on top in the white box as soon as you navigate 'into' a comment. It is truncated by default but you can toggle it with the P key.
Thank you!
Oh and page up / down is noted and will be added soon.
It's also incomplete - but, in fairness, building a HN client that most people would consider "complete" is a massive undertaking (HN login, themes, customizable keyboard shortcuts, mouse support, pre-fetching, "read" status markers).
Instead, here's some feedback about the interesting/different parts of the design:
1. Having WASD, HJKL, and arrow-key navigation is nice - most tools commit to exactly one of those three.
2. I believe that not blurring the leftward (parent) column would be better than giving a toggle-able parent comment in the current column.
3. The keyboard shortcut + "Help" button in the corner is great - I regularly forget what bindings are available for a new tool that I'm in the first few minutes of using, and then often get bored and leave.
4. Placing the comment content all the way at the top of the box slightly encourages focus on that content, which is good - HN puts the username and posting age at the top instead, which is a distraction, and makes it slightly easier to think about users instead of content.
5. Lack of pagination is great - no more artificial second-page barrier.
6. You could use more of the screen space - for me, about a third is just empty, even when I zoom.
Less interesting stuff: there's some visual rendering bugs of italics and the "M" menu isn't keyboard-navigable (this isn't meant to be a feature request; I know you're focused on making the site keyboard-driven). Congrats on making a relatively resource-efficient and visual-space-efficient web app!
Nice as a proof of concept, but it renders one's browser history useless, and Ctrl+F is mostly broken as well.
Recommend taking an additive approach—to enhance navigability with new methods, not throw out the stuff that already works (and works well) as a consequence of reasoning that this is A New Thing and New Things are supposed to replace what already exists. Casualties here include stuff like clickable hot zones for navigation if in the given moment one's hands can provide higher bandwidth that way for a desired action, operating on e.g. a link by context menu e.g. to copy it, mouse scrollability, etc. Unlike the poorly reasoned bickering below, it does not follow that these interaction concepts are at odds with one another. Keyboard and mouse accessibility are not mutually exclusive.
I'm surprised at how smooth this is and am really considering this as a replacement of the HN page for me.
The only thing I'd love to have added would be an inline mode, where replies to comments are also shown on the top level of the comment section, but indented, just like it's on YC's HN.
More things:
- Always show comments count
- Reloading a comment section should not bring you back to the front page (clear entire state).
I'm not sure about an inline mode because that would kind of defeat the initial purpose of this app. But, I did write it down and will see if there are others who would like this.
There is now an option to always show the comments count.
I'm currently working on exactly that issue. One of the next updates will add support for changes to the browser history and URL so you will be able to reload or share the URL at any point.
This was surprisingly pleasant to use. Such intuitive controls and sane default behaviors. Usually HN clones are a dime a dozen, but this one is a cut above for sure.
The only thing keeping me from using this full time is the information density. On normal HN I see the top 30 links all at once. On this one I only see the top 11 links before I have to scroll. I think a "high info density mode" where I could see the top 30 links (or more) would be nice.
That's actually a great idea.
If you say "high density", do you mean just less whitespace/spacing or should stuff like the upvotes, author and date be completely removed from the initial element?
On vanilla HN, a story is roughly 30 pixels in height with 5 pixels of whitespace between stories:
PostgreSQL 14 (postgresql.org) [20px tall]
399 points by jkatz05 2 hours ago [10px tall]
[5px spacer]
On Haxplore, a story is roughly 75 pixels tall with 32 pixels of spacing.
If you decide to implement a high density mode (I would make sure other users beside me want this before doing that work), the primary concern IMO is just cramming more stories onto the page so users can scan down the page to read more story headlines without scrolling.
That could be achieved many ways, but if it were me I would probably do a combo of reducing whitespace, reducing font size, and removing/consolidating story info (i.e. instead of URL having it's own line, move a truncated version of URL next to story title like vanilla HN does)
> If you decide to implement a high density mode (I would make sure other users beside me want this before doing that work),
That’s a refreshingly humble request. So often in FOSS I see people demanding features, even being downright critical at times. It’s really nice seeing someone suggest their feature request might not be popular is rare.
I like the font and spacing a lot, I'm always writing user styles to make sites (especially HN and Reddit) comfortable to read for more than a minute or two.
OTOH there's between 235px and 325px of height before the first comment under the parent story/comment, which is somewhere between 1/4 and a 1/3 of the entire available height. The Back and Open keyboard hints could be moved elsewhere or the empty space up top could just be shrunk. And why isn't Toggle Full Post with Back and Open, either all at the top or all in the parent?
Similarly having the "By pabue" on its own line (instead of inline with the controls below it) takes up a lot of room, and the least clear part of the UI is the comment author.
It's also not obvious where you are in a list of comments, having a minimap might be nice and quite fun to develop! And being able to go forward (and back) a page would also be nice. It's a nifty project though, good work :)
Being unable to see the whole (sub-)tree while reading the comments is a major disadvantage for me so far. If you read a thread that goes like a dialog with each new reply being nested under the previous one, this web app requires a key press to see each new reply — you never see them simultaneously.
But this app is an interesting take. I'm also not happy with unnecessarily mouse-driven interfaces
I would extend "file browser" to be the more general "tree navigation" - for instance, Miller Columns[1] (which I believe is an accurate characterization of Haxplore's interface) are used in the Pharo environment[2] to navigate objects.
In general, though, I agree with you - I think that most of the media tools that we use today could benefit from Miller Columns and a keyboard-driven design....
I'm interested in talking about UI affordances for power users - would you be interested? If so, drop me an email (you don't have your email in your HN profile, and in-thread discussion isn't a good use of HN space).
Hi. Thank you for leaning in, sharing your ideas. I'll check out Pharo. Peeking at it, it reminds me of a Smalltalk dev env. Cool.
1. Navigation
For navigation, my blue sky notion is to have ad hoc hierarchies. So imagine allowing the user to reorder those Miller columns. And any metadata item can be used as a column. And then the hierarchy browser (Finder equiv) infers the new tree.
This is probably called faceted navigation.
So in the case of Haxplore, the columns for one nav view I want are 'Author', 'Date', 'Kind' (eg OC, Show, Ask).
For music, I want a nav view to sort by Producer.
For movies, views for Director and Writer.
For podcasts, views for Guests and Topic.
Any way, you get the idea.
2. Filtering
All nav views should have filters. (I forget which IDE allowed this.)
Not just Spotlight style results, or Amazon style faceted product searches.
Because I still want to drill down thru the resultset using Miller columns.
3. Quantified Self
Log all the activity and metrics client side.
For podcasts and audio books, log when and where I was.
For all content, record if I looked at it, how long I looked at it, if I just deleted or skipped, etc. My count of podcast subscriptions is ridiculous. But I'm afraid (FOMO) of deleting something I liked. My own metrics would help me manage my consumption.
Creating ad hoc 'follow' subscriptions would be cool too. Remember HN commenters I liked. The podcast guests I liked. Ditto producers and directors.
First of all, congratulations on shipping it! It's pretty cool.
Some feelings I had while using it, just in case it's useful to you:
- To me is a bit strange than when I'm focused on comments, by pressing Enter it opens the URL of the article (that it's not my focus right now).
- Also I would like to add comments, but I think in this version is still not possible.
- As others mention, it wouldn't hurt that those actions can be both done by mouse and keys (or maybe the title of the submission should be "HN with keyboard")
I like the colors and the blur effect, nice touch :)
1. In get why that might be a bit confusing. The problem is, you can't focus the article/post after opening the comments, so you would have to go back in order to open the link. I didn't find a better solution at the time, so I just left it like this. Maybe I just have to think a bit harder ;)
2. I mostly just read discussions that's why I didn't even consider a comment feature. But I'm definitely gonna look into that and see if it's possible.
3. Might be a good idea. I actually had a mouse/keyboard switch at some point but removed it because it was a bit buggy and confusing. Maybe I should rethink that.
I like to use the mouse anyway. Each post has the number of comments, something like "123 comments ->" Can you make the number of comments and the arrow clickable? Also, the "<- Back" inside each post.
It I'm reading a comment, the author and "open" should be clickable too. I didn't understand what "open" means, perhaps change it to "open in HN".
Thanks. I'll think about making some elements clickable. But if some are clickable and some are not it might be even more confusing if non of the elements are clickable. So I'm not sure if it's a good idea.
I'll consider changing it to "Open in HN". It is more clear about what it does but it's also longer and maybe a bit redundant.
Nice work. Minor issue, but when I open the Menu with M, the focus should be in the dropdown menu, so I can navigate it with the arrow up and down. Otherwise, works great!
> The last update added support for the page up, page down and home keys. That should make it easier to get back to the top.
I use a Mac Air. I don't have these keys.
> Do you mean loading more posts when you reached the end of the list? This will also be added in one of the next few updates.
No, I mean the usecase when let's say I'm viewing a post or even when I'm on the home page, and I want to check if there have been new comments or new posts without reloading the page.
Like the keyboard shortcuts, and miss the old design. Would love these shortcuts with the old design; if it ain't broke, go fly a kite and be with your kids instead.
It would be nice if there were a way for it to "remember" where I left off, or filter stories I've already scrolled past out of the list when I come back.
Might be tough to implement with the display order changing. You’d need to find some way to hide or subdue via ID. But even then you still can’t leap down without looking for unread IDs. Seems like a tough one.
Great site! On iPhone, if you are tapping a button on the bottom rapidly, (like if you just double tap the down button) it triggers the page to zoom in. It looks like there is an easy css fix for that. https://stackoverflow.com/questions/46167604/ios-html-disabl...
It simply shows a loading animation for me. It raises "Error: No available storage method found" on line 2718 of localforage.js. This is Firefox 92 on Ubuntu 24.04.3. It works in Chrome, but I don't use it as my main browser. Spent a minute on it just to see the vim-style navigation, pretty cool. Hope the bug report helps!
I can't open comments on firefox. hitting O does nothing. Opening new links also opens them in a popup window rather than a new tab, so firefox blocks those by default too.
Overall its nice to use a keyboard but the information density is so poor and the site isn't as performant as news.ycombinator.com so I won't be making a switch, and I can't comment on how it renders comments since it doesn't open comment sections in firefox at least.
I've been on the hunt for a HN TUI client or some other way to make threads play nicely with a text based browser. That would really help with my newsboat based internet consumption if I didn't have to open a browser to read comment threads. I have gotten close, but with all the text based browsers I've tried, they all don't indent comments correctly in threads which makes it not very useful.
> I can't open comments on firefox. hitting O does nothing. Opening new links also opens them in a popup window rather than a new tab, so firefox blocks those by default too.
Took me a while to realise you opened things by pressing the right arrow/D/K, and instead O and Alt+O open the current comment or article in HN. I'm not sure why they have different keypresses, makes it even more confusing.
- I'm missing a "jump back up" shortcut, something I'd recommend using capital "G" for, like in Vim.
- It seems it hits some hardcoded limit for paging? i.e. it does not allow me to open more stories once I reach the "bottom" one.
- Two things I'm used to that exist in the Android app I'm using:
* stories are numbered, so I see how far from the top I am. It's a dimmed down grey number, but it's there and I like it.
* depending on the number of comments, an article can be marked as hot with a "fire" emoji. I got used to that to immediately spot things which are trending.
Overall, well done! I am definitely subscribing, and I'll test if I can switch to it on Android.
This is really really cool. I am gonna use it more.
Couple of suggestions thgh.
1) Blurring can be avoided.
3) jump to parent story of any level comment via keyboard
2) Is there possibility of logging in? so that we can do comment/upvote/downvote as well via keyboard.
Thank you for sharing this. HN’s default layout and behavior have never made sense to me and I always rely on alternative front-ends if I’m spending more than a glance on a thread. Currently I’m settled on hn.premii.com but your attempt seems promising.
One suggestion: I know the client is designed to be a single-page app, but is it possible to have a constructed permalink for each submission and comment thereto? On hn.premii.com that I mentioned above, I can have links in the form of hn.premii.com/#/comments/28704873 so that I can create a bookmarklet to jump directly from a original HN page to a “optimized” version. I hope it will also be possible with yours.
I loved the keyboard navigation. Alt+H opens Firefox's Help menu for me however. I wanted to try using it for a while, but then I wanted to comment here, and well, it seems like commenting still has to be done from the normal interface... :)
It's great.
But.
Can you please give me an option to just select the entry as if it was a 'normal' menu instead of scrolling the whole page and keeping the 'cursor' steady at the top?
Thanks! This is something I initially tested during development but didn"t feel right for me, so I scrapped. But having an option to switch the mode might be a good idea.
I see many different iterations of HN "clients/fontends/apps" posted here, this is by far my fav, and the first one I have bookmarked! The hjkl keybindings made my day :)
Nice. I use vimium-firefox as a default and it is not working.
Focusing on one comment at the time is changing the adequate contextual dynamic of relational scanning.
All of this only highlights the problem with HN interface.
It is time for slight update addressing some basics.
- font size
- monochromatic theme
- dark mode
* aside from this "Do not touch anything":)
P.S.
As a default workaround for HN design issues I use lynx with vim bindings. This gives me font clarity and minimalistic interface.
I'm using Vue 2 and Javascript, because I actually started this project a while ago. I will probably upgrade it to Vue 3 and Typescript soon. FOr the styling I'm using Tailwindcss.
It's currently not open source but it will be as soon as I fix up some of the mess. It went though quite a lot of changes and that's very visible in the code ;)
Well done, works perfectly on Firefox 92 on Fedora 34. The smooth animations & responsiveness to key-presses are spot on! Can we please have Dark Mode?
In your HN profile settings, change the top bar color (to something jarring/habit-breaking), as a reminder the next time you land here instead of there.
This is everything I wish the web would move towards: quick, minimalistic design that doesn't hinder the user. I think Reddit is the worst offender in this regard with its slow, bloated redesign that stops my viewing experience.
There is also something to be said of the inherent, tactile satisfaction derived from a button-press, as opposed to a mouse-click.
This feels like a nice way to navigate websites, but at the same time looks way better than most of the keyboard driven interfaces (since the apps that are optimized for that are typically TUI)!
In my eyes, that just proves the feasibility of the input method, as opposed to having to click around - it can work for a variety of types of content!
Hey, don't know if you're still reading, but the ability to sort frontpage by Best would be an awesome addition!
Been using this for the last couple of days. There's a slight tradeoff due to not having a good overview of the "discussion tree", but overall it's a super smooth way of browsing HN!
Nice, but I would like to have a mix between this, https://hackerweb.app, and gmail. For instance, I keep hitting "?" for help and would love to have consistent navigation down to the content level.
Very cool! I think you should leave scrolling alone, the selection animation is too fast to read all the stories and comments as a list. Acting like a mobile OS picker is annoying.
Also nitpick, Alt-H is not an easy key to hit on mac, why not just '?'
Some of the comments in here don't show up on Haxplore until much later. It looks like the API response is being cached... which gives me a pause because navigating the comments is the best part of Haxplore interface.
Wow this is really cool and well designed. Sorry for this simple question but what did you use to get the nice sliding like animation? Is that intentional or just a result of updating the currently selected article?
Good question. The content part is actually moved left and right using CSS transforms. The sliding animation is just a result of adding a transition for this property.
Speaking of, on FF when I go to the Hacker News home page and I tab navigate, the only thing it can tab to is the search input at the bottom. Does anyone else have issues or is it just me?
One thing I noticed on mobile is that I try to tap on the up and down arrows quickly to search between comments, which is often misinterpreted as a double tap in the browser and it zooms in.
This looks excellent especially for keyboard navigation. May I give a suggestion? Add support for PgUp & PgDown to skip couple items, both in the post list view and the comment list view.
Well done!
The only issue I have is that I receive top HN via Pushbullet, a link straight to HN, I wonder how can I quickly open a specific entry in Haxplore?
* the site marked when I had already clicked a link
* the site respected URLs so I can easily share links
* I can read older HN links in your interface
1. Great idea, this will be added in one of the next updates
2. This is planned also will also be added soon
3. How would you expect this to work? Would you want a search? Or an input for pasting HN links?
In the beginning it was so bad on mobile that it was actually completely unusable. I think it's still not very good but at least it's somewhat usable. A keyboard is definitely the recommended input device. ;)
I immediately got that keyboard is the intended usage, but also was impressed it works on mobile at all. You obviously took care to consider it, and I wouldn’t have blamed you if you hadn’t. Good job!
Tbh I'm not sure. I think the idea for the control scheme came e from video game consoles like the Nintendo switch or PS. And the visual design is a result of a few iterations of trying to make it appealing while still keeping some of the spirit of HN.
Thank you. And yeah it does not really work on mobile, but to be fair it's not supposed to. I only spend a few minutes on it to make it somewhat useable. As far as I know here are many other HN clones that improve the mobile experience, so I focused solely on building something cool for desktop/keyboard users.
Yes! To the UI developers: Please don't let optimizing for a single platform become a lost art. Not saying cross-platform should not be done or anything like that, but using an application that's 100% tailored to my device is nice to experience, from time to time.
Scrolling is disabled because this is not a website for mouse control, it's explicitly made for keyboards. You can notice this by the application not having any mouse controls at all, no links and so on. It's not user hostile if the goal is keyboard controls.
It's an informative website. This is bad UX for an informative site. Sure it can support keyboard shortcuts for additional fast access. It will be better for power users. But disabling scrolling with mouse and touchpad is hostile and counter productive to the casual users who might be interested in the content.
It is an implementation of HN that is for keyboard use - how is that hostile to people who want to use a mouse?
Use HN, or any of the 100's of clones/implementations that exist.
This whole "user hostile" thing is getting boring, not everything has to cater for everyone and their desires. This is a pet project being shown off for keyboard navigation - there is nothing "hostile" about that. At all.
Yes, but "enabling keyboard navigation" shouldn't mean disabling mouse based navigation. There are multiple people on this thread who are confused because of disabled scrolling which shows that it's bad UX.
> If you don't like it, just use Hacker News.
Yes, I will not be using this site. Just giving my feedback and opinion on the UX just like you.
> Yes, but "enabling keyboard navigation" shouldn't mean disabling mouse based navigation
If someone shows me a project for keyboard navigation, I won't complain that there is no mouse navigation, as that would go against the very nature of the project.
> Yes, I will not be using this site. Just giving my feedback and opinion on the UX just like you.
But you're not actually giving any useful feedback on the UX the person has implemented, you're giving feedback towards some UX that doesn't exist and won't exist as it's outside the scope of the project.
It's like someone showing you that they built a car for themselves, and your first comment is "but does it float in the sea?". No, of course it doesn't float, it's not a boat.
I think you’re being a little defensive. People might like the graphical design but not the control scheme. In that case I think it’s fair to say that. Sure it might intended as a keyboard site but that doesn’t mean the author couldn’t enhance in that, even pivot, if he wanted to.
To use your boat example: there is no point trying to sell kit cars if people are only interested in buying boats.
Ok, this is a pet project so the author might have no intention of taking his design and trying to monetise it. But as long as feedback is civil I can’t see why opposing opinions can’t be shared (and ignored if the author so chooses).
I know on my personal projects, comments that seem to miss the point often then inspire me to create new things. So I’m always interest in any feedback. Just as long as it’s not people moaning about the name lol
> some UX that doesn't exist and won't exist as it's outside the scope of the project
It seems to me removing scrolling is actually work as opposed to just letting the default behavior of the browser to prevail. I'm not saying there is no point in having a site with keyboard navigation as the primary mode of interaction. It's just that when you go out of your way to remove something that should be supported natively you're scope creeping.
If losing selection highlight is a problem just disable that feature only why mess with scrolling?
There is no reason to disable scrolling even if the primary interactions are supposed to happen with keyboard. I don’t want to remember which websites allow scrolling and which don’t.
I'd say there is a point. With disabled scrolling you can guarantee that the "cursor" will always be on the screen. With scrolling enabled, you could out scroll the selection, making for worse UI experience. I'm also not a fan of blurring the previous article, but I guess they chose to do it to put focus on your current selection.
Thanks, definitely gonna add dark mode soon!
I was hoping the arrow would convey enough meaning but I guess it's too subtle.
I'm curious, did you read the "How to..." at the start?
Paging is something I actually wanted to add at the beginning but then I tought it wouldn't be necessary for an experiment like that. I'm also not quite sure how it would look or work ui wise.
Wow, I just came from your interface to this comment. So I guess I'll reply here. What a trip.
+1 for dark mode. But also, would you add a shortcut for the left hand for opening comments? I lost my right arm in a tractor accident, and pressing O is a bit annoying.
Just kidding, but I do like the idea of R to reply.
rtv is an old standard tool that behaves similarly imo. I don't think its under active development anymore but it still works (i'm sure theres a fork or a similar reddit cli under active development these days)
As someone who browses the internet by default without any JavaScript enabled, I also find it jarring when websites do this.
I understand that some webapps absolutely need JavaScript to function, but I wish it was handled with a bit more tact than a completely blank page displaying a single sentence asking me to enable it. I'm not calling out op, twitter and quora do this too.
- Intuitive keyboard control
- Link detection in comments with hotkeys to open them directly
- Better readbility and formatting of comments
- Hotkeys for the most common actions
- Ability to open stories or comments in an overlay for reading long texts