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?
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!
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
Hey HN,
I'm building a payment solution that lets customers buy directly from social media without leaving platforms like Instagram, Facebook, etc. So why do we all need this? There are millions of small and medium businesses and brands that can't establish an online presence, and most of them regularly use social media to post about their products.
I want to help these businesses. Instagram and Facebook have shopping features, but only for a few brands, and they are not available in many regions like India. India has the world's second most active social media users and millions of businesses trying to acquire customers using social media. I want users and buyers to be able to shop directly from posts without leaving the app. I want my payment model on these platforms to create more convenience for customers and reduce business costs.
So, if someone who has worked at Facebook, Instagram, or any other company has valuable advice for me, please share.
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.
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 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.
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 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).
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!
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. :)
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.
This is the first time in a while I've experienced someone else making a design I have been thinking off, have it even somewhere in my ideas list, newspaper but a more "brutalism" design. I love this, great job!
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.
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 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!
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.
Show HN: Hacker News frontpage as a print newspaper that you can personalize
(yourhackernews.com)563 points by nimbusega 6 November 2024 | 139 comments
Comments
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.
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?
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).
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 want to help these businesses. Instagram and Facebook have shopping features, but only for a few brands, and they are not available in many regions like India. India has the world's second most active social media users and millions of businesses trying to acquire customers using social media. I want users and buyers to be able to shop directly from posts without leaving the app. I want my payment model on these platforms to create more convenience for customers and reduce business costs.
So, if someone who has worked at Facebook, Instagram, or any other company has valuable advice for me, please share.
How can I make this happen?
Will these platforms allow me to?
Thank you
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.
https://chromewebstore.google.com/detail/hn-explorer/amiaaon...
Sadly, I can't remember the name of it but it was pretty great.
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'm thinking specifically of DieWorkwear on twitter, but others too.
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.
You could maybe just redirect to the comment page?
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}):
https://i.imgur.com/5bbKiFc.png
This post is not even on it.
[1] https://hackernews-semafor-duhw.vercel.app/
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.