My feedback is that a "front page photo" is a very high bar and most of the images fall well below what deserves the space. I would avoid:
- boilerplate page previews for e.g. github
- generic site logos e.g. arxiv, aide
- stock images and ai equivalents e.g. the models in suits stuff
- "decorative" images e.g. prime number
- author photos
- hate autoplaying gifs in this context. Very distracting. They might be great content better "play on demand" for me
Images work better when it's a relevant and a unique visual e.g. the gladiators for the history article or the cockroach but they are still are not really front-page material.
To truly earn their place, an image has to add information above and beyond the text. Identifying when an article is actually about an image e.g. space photo, data visualisation etc. would add some real value to the presentation.
I made this to experiment with embeddings and explore how different ways of displaying information affect your perception.
It gets the top 100 stories, sends their html to GPT-4 to extract the main content (this was not producing good enough results with html parsing) and then gets an embedding using the title and content.
Likes/dislikes are stored in local storage and compared against all stories using cosine similarity to find the most relevant stories.
It costs about $10/day to run. I was thinking of offering additional value for a small subscription. Maybe more pages of the newspaper, full story content/comments, a weekly digest or ePub export or something?
I think some of the highest value from HN comes from the comments, and it's much harder to find the "best" ones, since they might be in threads you might not have otherwise read.
Not sure if it's a "premium feature" so to speak, but would be very cool to extend this to comments generally.
Definitely, comments are usually better than the article. I thought of a 'Letters to the Editors' section that shows top comments (https://news.ycombinator.com/bestcomments) and references the parent story, but it might not be as useful without the context.
Maybe 'See Comments' here could load the comments on the same page? In a newspaper like style.
AI should be able to do "good enough" sentiment analysis combined with the "votes" should be able to quickly find agree/disagree and the quality of the comment - which should not be based merely on the number of complex words, or the length.
i certainly suspect that the 4chan and reddit datasets, combined with HN's, and building a LoRA that ranks the 4chan and reddit stuff lower and the good HN stuff higher. essentially, subtract all reddit and 4chan style comments from the set of HN comments' weights. Training SD loras was pretty quick but i haven't looked into LLM loras. regardless, the LLM with the HN-4chan&reddit can do sentiment analysis and use the votes; just feed it csv or json: votes, user, comment. I guess you could do votes/age as a cleanup, too.
All this to say i still wouldn't read or use it. I'm not a fan of robots entertaining me.
> Likes/dislikes are stored in local storage and compared against all stories using cosine similarity to find the most relevant stories.
You're referring to using the embeddings for cosine similarity?
I am doing something similar with stocks. Taking several decades worth of 10-Q statements for a majority of stocks and weighted ETF holdings and using an autoencoder to generate embeddings that I run cosine and euclidean algorithms on via Rust WASM.
Nice – I like this a lot. I feel like I'd use this for slow-lane reading and the original HN site when I'm in a rush.
Regarding HTML to GPT-4, I seem to remember commenters here saying they got better results by converting the HTML to Markdown first, then sending to an LLM. Might save a bit of money too.
This doesn't look like a print newspaper. Print newspapers are much denser (in general) and have different headline sizes to emphasize the editor's choice of stories. This looks like a corporate blog home page or something. Some people will like this presentation; I'm pretty happy with HN as it is. But congratulations on shipping!
I kept it running for 5 or 10 years but eventually let it die.
edit: I'm not hating on OP btw. their version has pics, which mine doesn't. just agreeing that I believe the visual hierarchy inherent to newspaper title design is an important benefit of the format.
> the visual hierarchy inherent to newspaper title design is an important benefit of the format
Agreed. This is also why old-school print design product catalogs often had superior presentation compared to today's web UIs for browsing hierarchically organized products. Everything is given the same visual weight and is formatted the same way.
Anyway, improving on what you did with the tooling that's easily available in 2024 but wasn't in 2009 seems like a fun challenge.
yeah, digging up that screenshot (and the repo) really made me realize how primitive this solution was. it was also a very basic implementation of the whole headline sizes concept.
there was an app called Flipboard at the time which did something similar, but for different news sources, although its model of interactivity was a bit more gimmicky than the endless scroll. (which, for all its faults, is really simple and easy to use.)
- "Whole OS" is a standard alpine image (4MB) with just lynx installed via standard alpine package. Plus a layer for Lynx itself and entrypoint.sh script.
So a very standardized way to run it, with reusable popular base image, decent backbone for delivering it to the public, with ability to easily mirror and/or cache (done by default) each layer. Currently base Alpine has 0 known vulnerabilities, which may not be 0 tomorrow, but it's still a marvel that it ever has such low number. New versions are available instantly after developer creates new public image, without the need for maintainer of a distribution to look at it. Meanwhile your main OS can live it's own life in his own pace, without interference.
It doesn't sound scary at all, if you really have a closer look.
I’ve been running https://dailypopulous.com/ for years which is basically this but for general news. It generates a static paper edition every 6 hours from the most popular news links on social media with archives of all previous editions available.
Thanks for the feedback! Print newspaper's have curation, which this lacks. I guess the main thing it takes from newspapers is the image and blurb that help give you a preview of the story.
There is a form of curation on HN and "editorial judgment" on HN and that's in the points a post has. A closer approximation of a newspaper would be possible by looking at the points of a post and maybe comparing that to other posts and then sizing headlines appropriately based on how "important" the HN community sees a given story.
Currently the 131M Buildings story shows the blog author picture and BIO instead of a summary of the actual story. Is this easily fixable or is it a tough problem.
Papers only work because they know exactly what the view portal is and can design the layout relative to that. Unless you have an a3 sized screen this will not work very well online.
You can achieve some of the proportions with vw and vh units inside the article and column containers. Much of the effect comes from nicely laid out columns more than how many columns wide is your digital broadsheet, so the aesthetic scales okay on smaller screens. On mobile screens it’s just nice-looking individual columns.
Good point. Of course Helen Keller wouldn’t have been able to use this if she were alive today… Or could she have? Have you ever considered that Helen Keller was faking it all along? I mean think about it how can you read and write if you are deaf and blind??
A few years ago, a similar project was posted on HN that I thought was really cool too - E Ink smart screen puts a newspaper on your wall (https://news.ycombinator.com/item?id=22831323).
As the son of two journalists (one was an editor) news-editing and layout is a lot more than just using serif and playing with typography a bit
The closest thing I’ve found to something actually resembling a proper masthead’s layout would actually be this from HN a few months ago:
https://cybernetic.dev/grid
Balancing high information density and readability is the key to a proper layout. You’ve erred to far on minimalist “readability”
I’d suggest looking at older Indesign/Quark Express magazines if you want to see elements of publishing layouts done digitally
There’s going to be a great layout one day that fuses the news-editing with web, but this isn’t it
I'd seen that when first loading the site shortly after the story was posted. Some 12 hours later or so, content is loading as expected. No network adjustments made on my end; I suspect the site operator changed their configuration(s).
This is pretty cool, it’s nice to have a clean interface that puts more focus on individual posts (as articles here) rather than tons of headlines where I feel I skim over posts a lot more (particularly the post about Jupiter only caught my attention on your site, not the front page).
I’d like if there was some support for customising it without liking and disliking so I could push topics I’m interested in first (e.g. those tagged with emacs). It would also be nice to hide the like and dislike buttons in general as it gives more of a social media feel that the newspaper style UI does well to shake.
Interesting, for me it's a bit the opposite. In the standard view I really read every headline and consider what might be through the click. In this version I skim more in mindless scrolling fashion.
There’s a lot of negative commentary here, but this is the first HN alternative I’ve bookmarked. Yes lots could be improved, but I think the concept is nice! Thanks for making this!
This is very nice! If you
- make it a pwa/web clip
- link to the discussions
- make the images colored again
I’d use it over the regular hacker news ui any day. I know your use case is printing it out, but it’s fantastic for usage on a tablet.
I've added an option to change images to color or remove them. You can view the comments by clicking 'SEE COMMENTS' at the end of the blurb. I'll look into making it into a PWA.
I guess you mean a digital newspaper with a layout inspired by print newspapers. It's definitely not a print newspaper, I know because I tried folding it in half to read on the train, and all that happened was my laptop screen broke.
I liked this for two seconds; then all the pictures loaded in the browser window, and its usefulness to me plummeted. Similar to other commenters, I actually prefer text-only in this context; in particular, the first picture displayed just now was animated, and incredibly distracting.
I would probably use this or at least play with it extensively if not for this "feature." I find that, unlike "real" newspapers, leading images in blog posts and even much larger sites are frequently a net negative (a trend greatly worsened with the advent of AI image generators).
I think this is more an indictment of how poorly some publications pick images than any sort of layout issue (or design decision). So probably a toggle throws the baby out with the bathwater. Saw a little cockroach and there was an article about a cockroach - okay, fair. Picture of what looks like a forest fire on an article about tuples - probably net negative.
The fact that some of the images are animated (presently: the "passport photos" associated with this story: <https://maxsiedentopf.com/passport-photos/>) is an absolute turn-off.
I'm often reading via an e-ink tablet. Whilst I can drop text quality to better support animations, the effect is a gross degredation of everything else, and of course, why the fuck would I want to see animations randomly?
"Animate on hover" is a setting I've long advocated for sites, and coded into CSS both for my own sites and as restylings of third-party sites. It's a compromise between constant distraction and being able to benefit from the very rarely actually useful animation. In the case of the passport photos story, the same effect could be achieved by a grid (2x2, 3x3) showing the variety of photos simultaneously. Detail isn't relevant, variety apparently is, and animation is a cheap eyeball-grabbing trick.
I saw the animation, but i was looking at the pdf i made - to offer a solution to another comment. No motion there; just meaningless images mixed with contextual images.
i just had a silly idea. around 100 years ago there used to be these devices you'd put a scroll in and it would scroll it[0]. the use i saw for it was maps, in cars. you'd insert like interstate 10 scroll #N for whatever section you were on, and as you passed mile markers or exits you'd scroll it. i hope this explains it.
So the idea is to replicate that and use receipt paper, and thermal or what, dot matrix print onto the roll of paper your tweet stream. then you get something like those plastic M&M bottles, pill bottle, 35mm film bottle (boy i am full of ancient tech ideas)...
if you make some 3d printed cheap compliant mechanism[1] that snaps together and everything fits in a small tin or box...
There was an iOS app from practically a decade ago that did something very similar, but you could customize with RSS feeds, and it would turn it into a traditional looking newspaper.
Sadly, I can't remember the name of it but it was pretty great.
EDIT: Well maybe not, this one seems more like a replacement for ReadLater/GetPocket whereas the one I used was purely based off RSS feeds. I used it on the original iPad 1st gen so it's probably long gone. I give up.
A fun evolution would be to format it into a newspaper format, complete with headlines, front page, and "continue reading on page N", then print it out on large paper, fold it, and mail it to you.
There's probably no money in it, but a physical weekly customized RSS feed highlights newspaper would be neat.
A nice layout. For fun I attempted to actually print (to PDF) and boy was that messed up badly! Guessing that's not the type of "print" you had in mind. :)
go into the print settings for pdf and set the margins to "none" - that fixed it here. but my workflow was singlefile extension to save as a single html file, then i opened that in another browser and used that to print to pdf - just to make sure i wasn't doing a "but it worked at my house" sort of claim!
Pretty cool. Like how the animated GIFs will play and the type and whitespace balance is pretty solid. Ever seen Paper-HN? A similar idea: https://www.wolfgangfaust.com/project/paper-hn/ - A fun detail that one has is when you mouseover their photos they go to colour.
I'm getting the an error of "Failed to fetch stories"
The console error is:
(index):464 Error loading stories: TypeError: Failed to construct 'URL': Invalid URL
at (index):482:36
at Array.forEach (<anonymous>)
at NewspaperApp.displayStories ((index):471:25)
at NewspaperApp.loadStories ((index):461:26)
at async NewspaperApp.initialize ((index):418:17)
Can anyone help? I really want to use this product it seems great.
A really cool project and I like the layout a lot. There a a few things that would be nice to be able to customize, like heading sizes and font, but on the whole this is great work.
If it's a "print" do not add changing images. Now we have on first slot "Passport Photos" story with plinking photos, which makes me wanna click X ASAP...
This is likely down to a simple oversight when loading images from articles. OP probably didn't consider GIF images. I don't think its a choice that was made to add animated images. @OP - you can use Cloudinary to transform images on the fly (also stops you using other sites resources) to fix this issue easily.
This is excellent! I've been using it all day. I do wish it was a bit denser (similar to Drudge Report), but the product is neat enough as is. Congrats!
The print stylesheets are also kind of broken. With my printer's default margins, the page becomes an overlapping mess: https://i.imgur.com/lTlFz4l.png
It's reminiscent in some ways of Slashdot of yore, which would include a slug describing the submission. One of my more persistent issues with HN is that the 80-character-limit title gives parlous thin information on whether or not a submission is worth reading. Additional microcontent, even just another 120-240 characters (10--20 words or so) often helps greatly, and your project demonstrates this.
Auto-selecting slugs is of course itself somewhat fraught, one example on the front page of YourHackerNews as I write has a slug beginning "This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution...", which is probably not what you'd prefer: <https://www.tokyodev.com/articles/the-english-paradox-four-d...>.
I'm not a fan of animations as noted in another comment. The "Passport Photos" story has a hero image which animates: <https://maxsiedentopf.com/passport-photos/>. One option would be to permit removing an item entirely from the layout. Hitting "X" on a story does not presently do this. HN itself has "hide" feature accomplishing this.
In general, I would strongly caution against auto-including images from sites, particularly as those can be pathways to future abuse, including the appropriation of the image-hosting site by unsavoury content. I'd run across an example from an earlier HN submission a few months ago, of the ever-more-aptly named "ShadyURL": <https://news.ycombinator.com/item?id=41002786>.
On layout: Traditional print newspapers aren't merely an assortment of articles, or a ranked placement of articles, but an edited presentation of them. There's usually a top story, of course, but gathered around those will be stories related to the primary feature. See a recent archive of the (online) NY Times homepage for an example: <https://archive.is/HO7xW>.
Layouts are also grouped by topical sections. Again the Times demonstrates this (top news, analysis, opinion, "the great read", "the athletic", "culture and lifestyle", etc. The Guardian similarly, with several news blocks for top news, "headlines", "in focus", "spotlight", "opinion", "sports", "climate crisis", etc.
HN's news breakdown differs, though looking at the submitted sites, title, and in your case the slug should give some options for largely-automated story placement. I've done my own analysis of HN front-pages, and came up with a list of 47 categories of sites with > 17 front-page appearances (and a great many more without), totaling 16,185 classified sites.
Categories: programming (7719), blog (5506), media (816), science (635), news (344), comm. (227), government (129), software (127), video (78), discussion (73), interest (72), design (60), database (57), cryptocurrency (49), law (41), cybersecurity (25), technology (25), commentary (24), recreation (23), hardware (22), medicine (15), documents (14), military (10), literature (9), economics (8), publications (8), list (7), crowdfunding (6), education (6), webcomic (6), (wiki) (5), books (5), info (5), entertainment (4), environment (4), journalism (4), organisations (3), support (3), information (2), translation (2), humour (1), images (1), n/a (1), networking (1), podcast (1), society (1), ui/ux (1).
(I can provide the classification file on request, username at protomail.com.)
That provides pretty comprehensive coverage of the actual stories submitted (I'd had the exact factor once, I believe it's in excess of 90%).
Again: parsing of the titles and/or slugs (perhaps with an AI assist?) could give better classification. Sites such as Lobsters (<https://lobste.rs>) include tags and often have similar submission selections to HN, which might also be used to organise placement.
Another characteristic of traditional layouts is that the horizontal line is reset periodically. If you look at the NYTimes, Guardian, or other traditional news sites you'll find frequent use of horizontal breaks. I don't know if this is a peculiarity of mine or not, but I find that card-style summaries which are not randomly aligned vertically on a page are much easier to read.
Slugs are chosen using AI, but it doesn't work too well, as you mentioned. I will work on iterating the prompt to try and get better results.
A 'remove' option would be a good addition. It would directly remove the element, and not track it as a 'disliked' story.
Since this whole thing is automated, and there's no curation involved beyond embeddings and HN points, it's hard to display it like a traditional newspaper, with proper vertical alignment (since images and blurbs are manually entered to fill the content there).
I think grouping the newspaper into categories is a great idea. I don't think it works with the daily frontpage, since there isn't enough content (just 30 stories on the front page), but it would work quite well in a monthly version. Your categories are very helpful and I will email you about them.
I'll drop you my classification file shortly. It's mostly-manual classification with some pattern-based assignments. Every site that's appeared on the front page a minimum of 15 times, IIRC, and quite a few below that threshold. Coverage is about 65% of front-page articles 2007--2023.
Slug-selection is a tough challenge. AI may not solve it, but at least it will make it more non-deterministic ;-) Reviewing the site again, you're largely doing quite well.
(I'd really like to see a widely-used abstract or summary semantic markup usage, though microformats seem not to have been widely adopted: <https://microformats.org/>.)
The layout / horizontal breaks observation is mostly something that's nagged me for ages in card-based layouts going back to Google+ in the early 2010s. It took me a while to realise that what nagged me about the layout was having multiple columns of cards with no vertical coherence. It just sort of jumbles in my mind, and I'm not sure if that's a cognitive defect of mine or a more general response. I've come to appreciate print-based layout practices increasingly with time, particularly as I find online / fluid layouts increasingly less satisfactory.
Nice!
My feedback is that a "front page photo" is a very high bar and most of the images fall well below what deserves the space. I would avoid:
Images work better when it's a relevant and a unique visual e.g. the gladiators for the history article or the cockroach but they are still are not really front-page material.To truly earn their place, an image has to add information above and beyond the text. Identifying when an article is actually about an image e.g. space photo, data visualisation etc. would add some real value to the presentation.
Agree. I think I'll stay in the OG site.
"Obscure person has died (with no explanation of why I should care)"
Blame HN users for upvoting the story, not this chrome page...
I made this to experiment with embeddings and explore how different ways of displaying information affect your perception.
It gets the top 100 stories, sends their html to GPT-4 to extract the main content (this was not producing good enough results with html parsing) and then gets an embedding using the title and content.
Likes/dislikes are stored in local storage and compared against all stories using cosine similarity to find the most relevant stories.
It costs about $10/day to run. I was thinking of offering additional value for a small subscription. Maybe more pages of the newspaper, full story content/comments, a weekly digest or ePub export or something?
I think some of the highest value from HN comes from the comments, and it's much harder to find the "best" ones, since they might be in threads you might not have otherwise read.
Not sure if it's a "premium feature" so to speak, but would be very cool to extend this to comments generally.
Render comments in the style of the Onion's man-on-the-street American Voices section.
Definitely, comments are usually better than the article. I thought of a 'Letters to the Editors' section that shows top comments (https://news.ycombinator.com/bestcomments) and references the parent story, but it might not be as useful without the context.
Maybe 'See Comments' here could load the comments on the same page? In a newspaper like style.
AI should be able to do "good enough" sentiment analysis combined with the "votes" should be able to quickly find agree/disagree and the quality of the comment - which should not be based merely on the number of complex words, or the length.
i certainly suspect that the 4chan and reddit datasets, combined with HN's, and building a LoRA that ranks the 4chan and reddit stuff lower and the good HN stuff higher. essentially, subtract all reddit and 4chan style comments from the set of HN comments' weights. Training SD loras was pretty quick but i haven't looked into LLM loras. regardless, the LLM with the HN-4chan&reddit can do sentiment analysis and use the votes; just feed it csv or json: votes, user, comment. I guess you could do votes/age as a cleanup, too.
All this to say i still wouldn't read or use it. I'm not a fan of robots entertaining me.
Why would it cost $10 a day?
It should not cost more than a dollar a day.
Take AWS and azure credits and run it for free for years
[dead]
> Likes/dislikes are stored in local storage and compared against all stories using cosine similarity to find the most relevant stories.
You're referring to using the embeddings for cosine similarity?
I am doing something similar with stocks. Taking several decades worth of 10-Q statements for a majority of stocks and weighted ETF holdings and using an autoencoder to generate embeddings that I run cosine and euclidean algorithms on via Rust WASM.
> I am doing something similar with stocks.
How well does it work?
Nice – I like this a lot. I feel like I'd use this for slow-lane reading and the original HN site when I'm in a rush.
Regarding HTML to GPT-4, I seem to remember commenters here saying they got better results by converting the HTML to Markdown first, then sending to an LLM. Might save a bit of money too.
This doesn't look like a print newspaper. Print newspapers are much denser (in general) and have different headline sizes to emphasize the editor's choice of stories. This looks like a corporate blog home page or something. Some people will like this presentation; I'm pretty happy with HN as it is. But congratulations on shipping!
I agree, but I'm biased. I built basically the same app as OP back in 2009 and it had different headline sizes like a newspaper:
https://github.com/gilesbowkett/hacker_newspaper/blob/master...
I kept it running for 5 or 10 years but eventually let it die.
edit: I'm not hating on OP btw. their version has pics, which mine doesn't. just agreeing that I believe the visual hierarchy inherent to newspaper title design is an important benefit of the format.
> the visual hierarchy inherent to newspaper title design is an important benefit of the format
Agreed. This is also why old-school print design product catalogs often had superior presentation compared to today's web UIs for browsing hierarchically organized products. Everything is given the same visual weight and is formatted the same way.
Anyway, improving on what you did with the tooling that's easily available in 2024 but wasn't in 2009 seems like a fun challenge.
yeah, digging up that screenshot (and the repo) really made me realize how primitive this solution was. it was also a very basic implementation of the whole headline sizes concept.
there was an app called Flipboard at the time which did something similar, but for different news sources, although its model of interactivity was a bit more gimmicky than the endless scroll. (which, for all its faults, is really simple and easy to use.)
Yours is much better, exactly how I envisioned it to be
For the rest of the news in a more HN-like format (at least at the top level) you might like https://lite.cnn.com/
https://text.npr.org is also a text only version of npr
I remember using both this and cnn lite 8 years ago quite a bit right around this time, cool to see they’re still going strong.
nice, reminds me using rss decades ago
Also this site works great in text browsers like Lynx.
Lynx wrapped in Docker:
https://github.com/jzombie/docker-lynx
I said "heh" out loud over this.
"let's bootstrap a whole OS to run a light weight html renderer" is just something we should all take a moment to marvel at.
To be clear:
- "Whole OS" is a standard alpine image (4MB) with just lynx installed via standard alpine package. Plus a layer for Lynx itself and entrypoint.sh script.
So a very standardized way to run it, with reusable popular base image, decent backbone for delivering it to the public, with ability to easily mirror and/or cache (done by default) each layer. Currently base Alpine has 0 known vulnerabilities, which may not be 0 tomorrow, but it's still a marvel that it ever has such low number. New versions are available instantly after developer creates new public image, without the need for maintainer of a distribution to look at it. Meanwhile your main OS can live it's own life in his own pace, without interference.
It doesn't sound scary at all, if you really have a closer look.
I’ve been running https://dailypopulous.com/ for years which is basically this but for general news. It generates a static paper edition every 6 hours from the most popular news links on social media with archives of all previous editions available.
I like that only shows 10 articles.
That's a great observation actually! They should've made the design do that automatically based on story ranking
Thanks for the feedback! Print newspaper's have curation, which this lacks. I guess the main thing it takes from newspapers is the image and blurb that help give you a preview of the story.
There is a form of curation on HN and "editorial judgment" on HN and that's in the points a post has. A closer approximation of a newspaper would be possible by looking at the points of a post and maybe comparing that to other posts and then sizing headlines appropriately based on how "important" the HN community sees a given story.
The other form of curation is place on the front page.
That's probably closer to the editors choice in the context of HN.
Yes, I agree. I think I will change the design to have a hierarchy.
this is exactly how my 2009 version (in my previous comment) chose to size and space its headlines
Currently the 131M Buildings story shows the blog author picture and BIO instead of a summary of the actual story. Is this easily fixable or is it a tough problem.
Looking at the code everything is absolutely positioned, I would have expected to get a newspaper like flow to use Multi-column Layout
are there any good online designs that actually look like a print newspaper, with the features you describe?
I've wanted to take a stab at it because I think it would be "neat" but haven't actually found any good reference implementations.
also seems like with almost everyone on mobile it's just not worth it.
Papers only work because they know exactly what the view portal is and can design the layout relative to that. Unless you have an a3 sized screen this will not work very well online.
You can achieve some of the proportions with vw and vh units inside the article and column containers. Much of the effect comes from nicely laid out columns more than how many columns wide is your digital broadsheet, so the aesthetic scales okay on smaller screens. On mobile screens it’s just nice-looking individual columns.
i think the nytimes landing page does a good job at looking and feeling like an analogue newspaper
Yeah… it’s really just not plausible at all…
Good point. Of course Helen Keller wouldn’t have been able to use this if she were alive today… Or could she have? Have you ever considered that Helen Keller was faking it all along? I mean think about it how can you read and write if you are deaf and blind??
Looks super neat! I've had a longtime dream of working on a similar project, but I want to make it "Daily Prophet" styled, inspired by the Harry Potter series - https://harrypotter.fandom.com/wiki/Daily_Prophet?file=Daily.... With gifs and effects :)
A few years ago, a similar project was posted on HN that I thought was really cool too - E Ink smart screen puts a newspaper on your wall (https://news.ycombinator.com/item?id=22831323).
As the son of two journalists (one was an editor) news-editing and layout is a lot more than just using serif and playing with typography a bit
The closest thing I’ve found to something actually resembling a proper masthead’s layout would actually be this from HN a few months ago: https://cybernetic.dev/grid
Balancing high information density and readability is the key to a proper layout. You’ve erred to far on minimalist “readability”
I’d suggest looking at older Indesign/Quark Express magazines if you want to see elements of publishing layouts done digitally
There’s going to be a great layout one day that fuses the news-editing with web, but this isn’t it
All I get is "Failed to load stories," am I doing something wrong? Is there something I need to configure before things will load?
I'd seen that when first loading the site shortly after the story was posted. Some 12 hours later or so, content is loading as expected. No network adjustments made on my end; I suspect the site operator changed their configuration(s).
I just had the same problem and solved it. You have to switch off your adblocker.
Interesting, yup, looks like it was blocked by the network PiHole.
Anyone remember "Hacker Monthly"? Years ago it was a monthly PDF with nicely laid out copies of popular articles that had been highly voted on here.
They also printed physical magazines and shipped them out. It was the first time I received a professionally printed copy of something I had authored.
This is pretty cool, it’s nice to have a clean interface that puts more focus on individual posts (as articles here) rather than tons of headlines where I feel I skim over posts a lot more (particularly the post about Jupiter only caught my attention on your site, not the front page).
I’d like if there was some support for customising it without liking and disliking so I could push topics I’m interested in first (e.g. those tagged with emacs). It would also be nice to hide the like and dislike buttons in general as it gives more of a social media feel that the newspaper style UI does well to shake.
Interesting, for me it's a bit the opposite. In the standard view I really read every headline and consider what might be through the click. In this version I skim more in mindless scrolling fashion.
But that just redirects. It would be nicer to also fetch the text and media when you click on a title.
There’s a lot of negative commentary here, but this is the first HN alternative I’ve bookmarked. Yes lots could be improved, but I think the concept is nice! Thanks for making this!
Nice! I recently worked on a chrome extension that personalizes the frontpage based on embeddings.
https://chromewebstore.google.com/detail/hn-explorer/amiaaon...
This is very nice! If you - make it a pwa/web clip - link to the discussions - make the images colored again I’d use it over the regular hacker news ui any day. I know your use case is printing it out, but it’s fantastic for usage on a tablet.
I've added an option to change images to color or remove them. You can view the comments by clicking 'SEE COMMENTS' at the end of the blurb. I'll look into making it into a PWA.
I guess you mean a digital newspaper with a layout inspired by print newspapers. It's definitely not a print newspaper, I know because I tried folding it in half to read on the train, and all that happened was my laptop screen broke.
This looks cool!
I now almost exclusively get my HN feed through a simple script I wrote to get desc sorted posts by score or trend (score/time): https://github.com/faroukfaiz10/hackernews-homepage
The result looks something like this ({score/time} - {score} - {link} - {comments link}):
I liked this for two seconds; then all the pictures loaded in the browser window, and its usefulness to me plummeted. Similar to other commenters, I actually prefer text-only in this context; in particular, the first picture displayed just now was animated, and incredibly distracting.
I would probably use this or at least play with it extensively if not for this "feature." I find that, unlike "real" newspapers, leading images in blog posts and even much larger sites are frequently a net negative (a trend greatly worsened with the advent of AI image generators).
That's fair. How about a toggle to not show images?
I think this is more an indictment of how poorly some publications pick images than any sort of layout issue (or design decision). So probably a toggle throws the baby out with the bathwater. Saw a little cockroach and there was an article about a cockroach - okay, fair. Picture of what looks like a forest fire on an article about tuples - probably net negative.
The fact that some of the images are animated (presently: the "passport photos" associated with this story: <https://maxsiedentopf.com/passport-photos/>) is an absolute turn-off.
I'm often reading via an e-ink tablet. Whilst I can drop text quality to better support animations, the effect is a gross degredation of everything else, and of course, why the fuck would I want to see animations randomly?
"Animate on hover" is a setting I've long advocated for sites, and coded into CSS both for my own sites and as restylings of third-party sites. It's a compromise between constant distraction and being able to benefit from the very rarely actually useful animation. In the case of the passport photos story, the same effect could be achieved by a grid (2x2, 3x3) showing the variety of photos simultaneously. Detail isn't relevant, variety apparently is, and animation is a cheap eyeball-grabbing trick.
I saw the animation, but i was looking at the pdf i made - to offer a solution to another comment. No motion there; just meaningless images mixed with contextual images.
I would pay money, $1+ postage to maybe $5 + postage to physically print out tweet streams and other articles and mail them to some old people I know.
I'm thinking specifically of DieWorkwear on twitter, but others too.
i just had a silly idea. around 100 years ago there used to be these devices you'd put a scroll in and it would scroll it[0]. the use i saw for it was maps, in cars. you'd insert like interstate 10 scroll #N for whatever section you were on, and as you passed mile markers or exits you'd scroll it. i hope this explains it.
So the idea is to replicate that and use receipt paper, and thermal or what, dot matrix print onto the roll of paper your tweet stream. then you get something like those plastic M&M bottles, pill bottle, 35mm film bottle (boy i am full of ancient tech ideas)...
if you make some 3d printed cheap compliant mechanism[1] that snaps together and everything fits in a small tin or box...
[0] https://gajitz.com/paper-trails-auto-scrolling-1930s-in-car-... et https://i.imgur.com/WpyOGkI.jpeg (two separate links)
[1] https://en.wikipedia.org/wiki/Compliant_mechanism
There was an iOS app from practically a decade ago that did something very similar, but you could customize with RSS feeds, and it would turn it into a traditional looking newspaper.
Sadly, I can't remember the name of it but it was pretty great.
I remember this app as well; “Flipreader” comes to mind but yields no Google results.
It was the peak of RSS for me, beautiful UX, customizable, all the posts in sequential order if I wanted instead of algorithms…
I remember it because useless when web publishers realized they were losing ad views to apps like these and all the posts became previews with links.
I believe you are thinking of Flipboard (still around, but a bit different nowadays).
I think you are referring to Flipboard, it is still in the AppStore
Can't edit my post but it wasn't Flipboard.
Found it - it was Instapaper!
https://imgur.com/a/iFBme4f
EDIT: Well maybe not, this one seems more like a replacement for ReadLater/GetPocket whereas the one I used was purely based off RSS feeds. I used it on the original iPad 1st gen so it's probably long gone. I give up.
A fun evolution would be to format it into a newspaper format, complete with headlines, front page, and "continue reading on page N", then print it out on large paper, fold it, and mail it to you.
There's probably no money in it, but a physical weekly customized RSS feed highlights newspaper would be neat.
Flipboard. https://about.flipboard.com/
[dead]
Good attempt but from the title I thought it would look like an actual print news paper
It's a bit harder to make it look like an actual newspaper without manually editing the content.
A nice layout. For fun I attempted to actually print (to PDF) and boy was that messed up badly! Guessing that's not the type of "print" you had in mind. :)
go into the print settings for pdf and set the margins to "none" - that fixed it here. but my workflow was singlefile extension to save as a single html file, then i opened that in another browser and used that to print to pdf - just to make sure i wasn't doing a "but it worked at my house" sort of claim!
Pretty cool. Like how the animated GIFs will play and the type and whitespace balance is pretty solid. Ever seen Paper-HN? A similar idea: https://www.wolfgangfaust.com/project/paper-hn/ - A fun detail that one has is when you mouseover their photos they go to colour.
Yes! Came across it while developing this. I loved it. There's also this one for reddit: https://unim.press/
I'm getting the an error of "Failed to fetch stories"
The console error is: (index):464 Error loading stories: TypeError: Failed to construct 'URL': Invalid URL at (index):482:36 at Array.forEach (<anonymous>) at NewspaperApp.displayStories ((index):471:25) at NewspaperApp.loadStories ((index):461:26) at async NewspaperApp.initialize ((index):418:17)
Can anyone help? I really want to use this product it seems great.
Just fixed my own problem! You have to switch off your adblocker.
I wonder what part of it was detected as an ad. Which adblocker?
I would like to filter all of the HN pet language noise posts. Rust, Go, etc..
For those who prefer scrolling to reading I guess.
Love it!!!
A really cool project and I like the layout a lot. There a a few things that would be nice to be able to customize, like heading sizes and font, but on the whole this is great work.
If it's a "print" do not add changing images. Now we have on first slot "Passport Photos" story with plinking photos, which makes me wanna click X ASAP...
This is likely down to a simple oversight when loading images from articles. OP probably didn't consider GIF images. I don't think its a choice that was made to add animated images. @OP - you can use Cloudinary to transform images on the fly (also stops you using other sites resources) to fix this issue easily.
Yes, I did not think of that. Thank you, I was thinking of how to fix it.
This is really cool! I'd love to help out if I can! Shoot me an email — daniel@shaped.ai
Would be great to have the option to subscribe to a daily brief and read personalised recommended content in this format. Congrats on shipping
I'm thinking of adding that. How would it be different from visiting the page and reading your personalized frontpage?
This is excellent! I've been using it all day. I do wish it was a bit denser (similar to Drudge Report), but the product is neat enough as is. Congrats!
Thanks! I'll experiment with a denser layout. I do think there's too much whitespace, but people usually prefer that.
nice! I had building something similar a while back based on semafor [1]
[1] https://hackernews-semafor-duhw.vercel.app/
This is such a cool idea! It’s like combining the tech-focused content of Hacker News with the classic feel
Very cool! Looks like it has an XSS vector though :P
https://i.imgur.com/5bbKiFc.png
The print stylesheets are also kind of broken. With my printer's default margins, the page becomes an overlapping mess: https://i.imgur.com/lTlFz4l.png
And even with margins turned off, stories are split "across" pages in a way that makes them useless for printing: https://i.imgur.com/SvmTGa8.png Need to pay more attention to your "break-inside" properties: https://developer.mozilla.org/en-US/docs/Web/CSS/break-insid... (and switch from using JS-generated absolute styles to using a CSS column layout or masonry grid)
Thank you! I missed that in my sleepiness. Should be fixed now.
Looks really great, did you document the process or background of the project somewhere? I would love to read the journey!
I could write a blog post about it if you'd like.
Love this project! I would love to collab, please consider open-sourcing this project, or let me know if I can contribute in some way
I'll try to untangle the codebase!
Yeah would love to play with a couple PRs on this
It’s funny how frequently people try to reinvent the wheel re: how this site is laid out. It’s the best part about it!
Very cool, seems like it updates on a delay though, which will probably kill usability.
This post is not even on it.
It updates every hour. This post is on it now!
On brand with newspapers.
Amazing..and you're telling me you made this with less than 600 programmers?
Nice. What algorithm is used for recommendation?
It gets embeddings from open AI and compares them using cosine similarity. Stories are weighted by similarity, dissimilarity and HN score.
How you compare a liked set to single embedding? By best match? Or is there some fancier way?
Sadly the media="print" view does not provide usable output.
Is there a reason you chose not to display the comment count?
I thought upvotes and time ago as more important, and wanted to minimize the meta information.
The images in the website are in grayscale.
I thought it would fit the grayscale of newspapers. I can add an option to show them in color.
Thank you for this!
This is super cool
Looks like the NYT
It looks like a funeral service webpage with those colors.
This is nice, but I prefer the simpler style of hckrnews.com
This is pretty cool, thanks for sharing!
It's reminiscent in some ways of Slashdot of yore, which would include a slug describing the submission. One of my more persistent issues with HN is that the 80-character-limit title gives parlous thin information on whether or not a submission is worth reading. Additional microcontent, even just another 120-240 characters (10--20 words or so) often helps greatly, and your project demonstrates this.
Auto-selecting slugs is of course itself somewhat fraught, one example on the front page of YourHackerNews as I write has a slug beginning "This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution...", which is probably not what you'd prefer: <https://www.tokyodev.com/articles/the-english-paradox-four-d...>.
I'm not a fan of animations as noted in another comment. The "Passport Photos" story has a hero image which animates: <https://maxsiedentopf.com/passport-photos/>. One option would be to permit removing an item entirely from the layout. Hitting "X" on a story does not presently do this. HN itself has "hide" feature accomplishing this.
In general, I would strongly caution against auto-including images from sites, particularly as those can be pathways to future abuse, including the appropriation of the image-hosting site by unsavoury content. I'd run across an example from an earlier HN submission a few months ago, of the ever-more-aptly named "ShadyURL": <https://news.ycombinator.com/item?id=41002786>.
On layout: Traditional print newspapers aren't merely an assortment of articles, or a ranked placement of articles, but an edited presentation of them. There's usually a top story, of course, but gathered around those will be stories related to the primary feature. See a recent archive of the (online) NY Times homepage for an example: <https://archive.is/HO7xW>.
Layouts are also grouped by topical sections. Again the Times demonstrates this (top news, analysis, opinion, "the great read", "the athletic", "culture and lifestyle", etc. The Guardian similarly, with several news blocks for top news, "headlines", "in focus", "spotlight", "opinion", "sports", "climate crisis", etc.
HN's news breakdown differs, though looking at the submitted sites, title, and in your case the slug should give some options for largely-automated story placement. I've done my own analysis of HN front-pages, and came up with a list of 47 categories of sites with > 17 front-page appearances (and a great many more without), totaling 16,185 classified sites.
Categories: programming (7719), blog (5506), media (816), science (635), news (344), comm. (227), government (129), software (127), video (78), discussion (73), interest (72), design (60), database (57), cryptocurrency (49), law (41), cybersecurity (25), technology (25), commentary (24), recreation (23), hardware (22), medicine (15), documents (14), military (10), literature (9), economics (8), publications (8), list (7), crowdfunding (6), education (6), webcomic (6), (wiki) (5), books (5), info (5), entertainment (4), environment (4), journalism (4), organisations (3), support (3), information (2), translation (2), humour (1), images (1), n/a (1), networking (1), podcast (1), society (1), ui/ux (1).
(I can provide the classification file on request, username at protomail.com.)
That provides pretty comprehensive coverage of the actual stories submitted (I'd had the exact factor once, I believe it's in excess of 90%).
Again: parsing of the titles and/or slugs (perhaps with an AI assist?) could give better classification. Sites such as Lobsters (<https://lobste.rs>) include tags and often have similar submission selections to HN, which might also be used to organise placement.
Another characteristic of traditional layouts is that the horizontal line is reset periodically. If you look at the NYTimes, Guardian, or other traditional news sites you'll find frequent use of horizontal breaks. I don't know if this is a peculiarity of mine or not, but I find that card-style summaries which are not randomly aligned vertically on a page are much easier to read.
Thanks a lot for the detailed feedback!
Slugs are chosen using AI, but it doesn't work too well, as you mentioned. I will work on iterating the prompt to try and get better results.
A 'remove' option would be a good addition. It would directly remove the element, and not track it as a 'disliked' story.
Since this whole thing is automated, and there's no curation involved beyond embeddings and HN points, it's hard to display it like a traditional newspaper, with proper vertical alignment (since images and blurbs are manually entered to fill the content there).
I think grouping the newspaper into categories is a great idea. I don't think it works with the daily frontpage, since there isn't enough content (just 30 stories on the front page), but it would work quite well in a monthly version. Your categories are very helpful and I will email you about them.
I'll drop you my classification file shortly. It's mostly-manual classification with some pattern-based assignments. Every site that's appeared on the front page a minimum of 15 times, IIRC, and quite a few below that threshold. Coverage is about 65% of front-page articles 2007--2023.
Slug-selection is a tough challenge. AI may not solve it, but at least it will make it more non-deterministic ;-) Reviewing the site again, you're largely doing quite well.
(I'd really like to see a widely-used abstract or summary semantic markup usage, though microformats seem not to have been widely adopted: <https://microformats.org/>.)
The layout / horizontal breaks observation is mostly something that's nagged me for ages in card-based layouts going back to Google+ in the early 2010s. It took me a while to realise that what nagged me about the layout was having multiple columns of cards with no vertical coherence. It just sort of jumbles in my mind, and I'm not sure if that's a cognitive defect of mine or a more general response. I've come to appreciate print-based layout practices increasingly with time, particularly as I find online / fluid layouts increasingly less satisfactory.
(I've made some past observations about layout and on-screen reading on traditional displays vs. a large-format e-ink display. I increasingly strongly prefer the latter for reading, though even there many issues remain. Search: <https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu...> and focusing on scroll-vs-paginated displays: <https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...>, if you feel like hunting through a bunch of my whinges ;-)