Wow. I thought this would just be gimmicky, but I kind of... almost actually like it better than the main HN page.
Having text snippets from the first paragraph, and an image, give me waaay more information as to whether something's interesting enough to click. This is really, really nice.
A bunch of random thoughts, hopefully it's useful feedback:
- I don't care about it looking like a "paper", but I love the grid view with image+blurb. So if you could make the top stories the same size as the rest, and make all images color, I'd love that even more
- I find both the upvote count and hours ago added really useful, if you could find a way to include those back in
- Some blurbs are 15 lines long, others are 2. Instead of trying to break at a paragraph boundary, I'd prefer if they were all just a standardized 6-8 lines. I'm glancing just to see what the article is actually about (for when the headline is vague), I don't care if it ends at a sentence ending
- The bold "topic" thing you click on to get to the comments is clever in whatever ML you use to select it... but unfortunately is also meaningless and kind of distracting, so I'd prefer it without
But for real... I think that if you focused on making this a "rich" image+blurb feed for HN instead of the newspaper thing, you could become a super-popular interface for HN.
I, too, am shocked by how much data I seem to think is in a blurb and an image. My usual HN headline triage time is reduced by a factor of 5 with this view.
Fascinating! Just to keep the conversation going, I'll argue that HN's current format works much better for me.
I appreciate newspaper formats when dozens of stories have roughly equal appeal to me, and I get value out of lingering on each one for 5-30 seconds before moving on.
HN, for me, is intensely bimodal. The bare-bones listing of headlines lets me skim very fast past the 93% that don't quite work for me -- and dive into the 7% that are today's gems. Those then deserve a close read and many minutes in the comments.
So I'd be very frustrated if HN switched to newspaper mode. But everyone's tastes are different, and having both formats available would be cool.
Well I think it also has a lot to do with, that, beyond a certain look & feel, this example has very little in common with a print news paper (or online outlet that use that style).
In a traditional news paper absolutely everything is carefully curated. What stories go where, how much space they can take, whether they'll have an image, title setting guidlines, grouped by various things like topic, etc.
For example the www.nytimes.com front page is very closely structured like a traditional print paper: The top stories (the main sellers from the kiosk age) of the moment are "above the fold", followed by a bit broader polical or societal pieces and the going into more and more softer content like fashion, cooking, travel. The latter topics are were generally the bulk of the advertisment money comes in.
So I think a newspaper mode for sites like HN could work well. Not as a live view, but instead of say a weekly, curated edition of what has been relevant and interesting.
Unfortunately many headlines stopped being informative with the rise of clickbait. One of HN's biggest problems is the headline-only format, as opposed to Slashdot for instance. I mostly choose what to click from an HN Twitter bot since Twitter shows short preview blurbs for many links. This is also a strength of the linked site compared to plain HN. As for the newspaper layout, yeah, that's a gimmick I don't need either.
You should find a better font and work a little on the proportions. Nice to see the images, a little more polished and I would use this instead of the normal HN website.
The font is whatever you have as the default in your browser—if you don’t like it then set a better one :)
I agree about the spacing, it feels off to me too but I couldn’t put my finger on why. Whitespace has always been a challenge for me (I still remember my mom looking at my elementary school projects and telling me repeatedly, “Margins! You need more margins!”) and though I’m getting better at it I don’t expect to get a job in graphics design any time soon. If anyone has suggestions for improvements I’d be glad to hear them.
I hope you do, I can definitely see it becoming my default home screen while browsing. It’d be cool to see if you can wrap up the rest of HN, especially comments also. But I do realize that may be a lot of work.
It’ll keep running as long as the cron job doesn’t break. It might even keep running after that, if I get around to doing maintenance, but I’d like to keep expectations low. Worst-case scenario someone can always fork it and leave an issue on the repository explaining where to find the new one.
This looks really amazing! I particularly like that it makes good use of the width of an ultra-wide screen.
While I wouldn't want it to replace the actual hackernews layout, I can really see it shine for discovering interesting articles whose headlines alone do not tell me enough to identify them as interesting (seems perfect for Friday afternoons).
One suggestion: I would appreciate more visual hints to indicate which images and texts belong together. When I scroll down the site and something catches my eye, it takes me a bit of looking around to be sure where to read for the corresponding text. Slightly larger margins and/or vertical and/or horizontal lines between the articles might help to make it feel more convenient.
Thanks for the suggestion! I added some more whitespace and some horizontal rules, what do you think of it now? (Please feel free to tell me it still looks terrible!)
This is really cool, definitely see some of the polish come out since the last version published here.
If you wanted to host this indefinitely for $12 / year, you could buy a domain like hackernewspaper.com or something similar, and host the frontend using a static HTML/CSS/JS bundle on S3 + CloudFront + Route 53. For reference, here's a CloudFormation (infrastructure-as-code) template I made for that stack here: https://github.com/tinydevcrm/tinydevcrm-api-docs/blob/a4d29...
Fantastic.
Surprised to find myself with cataracts at my age, HN is so much more readable as presented here, comparable in improvement to viewing it under dark mode.
More importantly, by providing the lead/lede, I've found a few more pieces to read that I didn't know I wanted to read just from the headline.
I like this very much. Showing the first few lines of the article is nice to see if one wants to dig deeper. I made this my new default link to HackerNews!
I know that the OP probably did the research, so I'm just going to ask :
Isn't this possible with only CSS?
I see each article ( section ) with position absolute and heavy JS calculations. My browser brain thinks that with some combo of flex-box / flex-wrap and breakpoints you could achieve this without the need for resize handler. I guess that's not the truth
So can you point the struggles not doing this with CSS?
Sure. So, there are a couple of things I wanted from the design:
1. The top few stories should be wider than the rest, if there’s room to do so.
2. The stories should be sorted more-or-less with the top ones near the beginning of the page.
3. Stories in a column should flow continuously—there shouldn’t be any gaps where multiple columns realign. (Bear in mind that stories can be any height, and there’s no way to precompute it.)
There’s a few ways of doing layouts that meet some of these criteria in pure CSS:
• `column-width`: Meets requirement (3), but you can’t span columns and layout is done column-by-column so the top of the page would have stories 1, 8, and 19 (or so).
• flexbox: Meets (1) and (2), but leaves unsightly alignment lines as stories can’t shift upwards to fill in gaps in the previous row.
• grid: Same problems as flexbox.
• server-side column break computation: requires the server to know how tall each story is, which (a) won’t work with a stylesheet where nearly everything is in relative sizes that depend on browser settings and (b) would probably be tricky with responsive design.
As far as I can tell, there’s no way to do a responsive “masonry” layout with items of arbitrary height in pure CSS. At the very least it was going to be tricky and frustrating to get right, and Masonry.js was already available and (after a little poking to figure out how to tell it what I wanted) did the job without any more fuss.
Took a while until I realized what to click, to jump to the actual discussions. What about showing a "NN comments" clickable link at the end of the articles? But: "... the master branch. SDF, 1" — then not so obvious what to click.
This "HN newspaper" could maybe be a good way to make people interested in tech, if anyone wants that for some reason
I avoided the word “comments” to keep the newspapery feel—I fear that mentioning the ravening hordes just around the corner would rather spoil the effect. I agree that the result isn’t entirely intuitive, but I’m not sure what to do about it. (It’s not obvious that the headlines are clickable either, but underlining them looks ugly and letting them be blue is even worse. Such are the perils of skeumorphism.)
I have JS off by default and the site still loads -- in fact it's exactly the same (including all functionality) except it's got a mobile layout? When I enable JS then it lays out like a real newspaper. That's interesting.
Progressive enhancement! CSS isn’t quite up to the task of arranging things the way I wanted so I’m using Masonry.js for layout. (This is also why there’s a progress bar while the page loads—it needs to wait for all the images so Masonry knows how much space everything takes. I’d like to cache the images and pre-specify their sizes but haven’t gotten to it yet.)
Pretty cool, but the format looks like literally every other news site now right? (title + image + read more)
To me, the best thing about HN and Reddit is being able to efficiently skim through many article titles at once, without judging; writing style or image quality.
[+] [-] crazygringo|5 years ago|reply
Having text snippets from the first paragraph, and an image, give me waaay more information as to whether something's interesting enough to click. This is really, really nice.
A bunch of random thoughts, hopefully it's useful feedback:
- I don't care about it looking like a "paper", but I love the grid view with image+blurb. So if you could make the top stories the same size as the rest, and make all images color, I'd love that even more
- I find both the upvote count and hours ago added really useful, if you could find a way to include those back in
- Some blurbs are 15 lines long, others are 2. Instead of trying to break at a paragraph boundary, I'd prefer if they were all just a standardized 6-8 lines. I'm glancing just to see what the article is actually about (for when the headline is vague), I don't care if it ends at a sentence ending
- The bold "topic" thing you click on to get to the comments is clever in whatever ML you use to select it... but unfortunately is also meaningless and kind of distracting, so I'd prefer it without
But for real... I think that if you focused on making this a "rich" image+blurb feed for HN instead of the newspaper thing, you could become a super-popular interface for HN.
Kudos!
[+] [-] galfarragem|5 years ago|reply
According to your comment I think you might like https://hnews.xyz/ that I read when in mood of a "HN magazine". I'm tempted to make a switch now.
[+] [-] esperent|5 years ago|reply
> Then $67.00 per month.New customers onlyCancel anytime during your trial
Certainly saved me a click!
[+] [-] jbaber|5 years ago|reply
[+] [-] unknown|5 years ago|reply
[deleted]
[+] [-] GCA10|5 years ago|reply
I appreciate newspaper formats when dozens of stories have roughly equal appeal to me, and I get value out of lingering on each one for 5-30 seconds before moving on.
HN, for me, is intensely bimodal. The bare-bones listing of headlines lets me skim very fast past the 93% that don't quite work for me -- and dive into the 7% that are today's gems. Those then deserve a close read and many minutes in the comments.
So I'd be very frustrated if HN switched to newspaper mode. But everyone's tastes are different, and having both formats available would be cool.
[+] [-] smoe|5 years ago|reply
In a traditional news paper absolutely everything is carefully curated. What stories go where, how much space they can take, whether they'll have an image, title setting guidlines, grouped by various things like topic, etc.
For example the www.nytimes.com front page is very closely structured like a traditional print paper: The top stories (the main sellers from the kiosk age) of the moment are "above the fold", followed by a bit broader polical or societal pieces and the going into more and more softer content like fashion, cooking, travel. The latter topics are were generally the bulk of the advertisment money comes in.
So I think a newspaper mode for sites like HN could work well. Not as a live view, but instead of say a weekly, curated edition of what has been relevant and interesting.
[+] [-] tom_mellior|5 years ago|reply
[+] [-] non-nil|5 years ago|reply
[+] [-] unknown|5 years ago|reply
[deleted]
[+] [-] elwell|5 years ago|reply
[+] [-] vagab0nd|5 years ago|reply
[+] [-] gioscarab|5 years ago|reply
[+] [-] wolfgang42|5 years ago|reply
I agree about the spacing, it feels off to me too but I couldn’t put my finger on why. Whitespace has always been a challenge for me (I still remember my mom looking at my elementary school projects and telling me repeatedly, “Margins! You need more margins!”) and though I’m getting better at it I don’t expect to get a job in graphics design any time soon. If anyone has suggestions for improvements I’d be glad to hear them.
[+] [-] wolfgang42|5 years ago|reply
[+] [-] paledot|5 years ago|reply
[+] [-] wolfgang42|5 years ago|reply
Edit: as I made it above the fold I updated the screenshot to show the site at #4. The Droste effect is quite pleasing, I think.
[+] [-] phkahler|5 years ago|reply
[+] [-] kylecazar|5 years ago|reply
[+] [-] yumraj|5 years ago|reply
I hope you do, I can definitely see it becoming my default home screen while browsing. It’d be cool to see if you can wrap up the rest of HN, especially comments also. But I do realize that may be a lot of work.
[+] [-] wolfgang42|5 years ago|reply
[+] [-] qorrect|5 years ago|reply
[+] [-] ritter2a|5 years ago|reply
While I wouldn't want it to replace the actual hackernews layout, I can really see it shine for discovering interesting articles whose headlines alone do not tell me enough to identify them as interesting (seems perfect for Friday afternoons).
One suggestion: I would appreciate more visual hints to indicate which images and texts belong together. When I scroll down the site and something catches my eye, it takes me a bit of looking around to be sure where to read for the corresponding text. Slightly larger margins and/or vertical and/or horizontal lines between the articles might help to make it feel more convenient.
[+] [-] wolfgang42|5 years ago|reply
[+] [-] yingw787|5 years ago|reply
If you wanted to host this indefinitely for $12 / year, you could buy a domain like hackernewspaper.com or something similar, and host the frontend using a static HTML/CSS/JS bundle on S3 + CloudFront + Route 53. For reference, here's a CloudFormation (infrastructure-as-code) template I made for that stack here: https://github.com/tinydevcrm/tinydevcrm-api-docs/blob/a4d29...
[+] [-] yingw787|5 years ago|reply
[+] [-] p-law|5 years ago|reply
More importantly, by providing the lead/lede, I've found a few more pieces to read that I didn't know I wanted to read just from the headline.
[+] [-] WalterBright|5 years ago|reply
[+] [-] rossdavidh|5 years ago|reply
[+] [-] dvtrn|5 years ago|reply
Psst..hey buddy, you want some RSS? ;)
[+] [-] kenforthewin|5 years ago|reply
[+] [-] drinchev|5 years ago|reply
Isn't this possible with only CSS?
I see each article ( section ) with position absolute and heavy JS calculations. My browser brain thinks that with some combo of flex-box / flex-wrap and breakpoints you could achieve this without the need for resize handler. I guess that's not the truth
So can you point the struggles not doing this with CSS?
[+] [-] wolfgang42|5 years ago|reply
1. The top few stories should be wider than the rest, if there’s room to do so.
2. The stories should be sorted more-or-less with the top ones near the beginning of the page.
3. Stories in a column should flow continuously—there shouldn’t be any gaps where multiple columns realign. (Bear in mind that stories can be any height, and there’s no way to precompute it.)
There’s a few ways of doing layouts that meet some of these criteria in pure CSS:
• `column-width`: Meets requirement (3), but you can’t span columns and layout is done column-by-column so the top of the page would have stories 1, 8, and 19 (or so).
• flexbox: Meets (1) and (2), but leaves unsightly alignment lines as stories can’t shift upwards to fill in gaps in the previous row.
• grid: Same problems as flexbox.
• server-side column break computation: requires the server to know how tall each story is, which (a) won’t work with a stylesheet where nearly everything is in relative sizes that depend on browser settings and (b) would probably be tricky with responsive design.
As far as I can tell, there’s no way to do a responsive “masonry” layout with items of arbitrary height in pure CSS. At the very least it was going to be tricky and frustrating to get right, and Masonry.js was already available and (after a little poking to figure out how to tell it what I wanted) did the job without any more fuss.
[+] [-] KajMagnus|5 years ago|reply
Took a while until I realized what to click, to jump to the actual discussions. What about showing a "NN comments" clickable link at the end of the articles? But: "... the master branch. SDF, 1" — then not so obvious what to click.
This "HN newspaper" could maybe be a good way to make people interested in tech, if anyone wants that for some reason
[+] [-] wolfgang42|5 years ago|reply
[+] [-] andai|5 years ago|reply
[+] [-] wolfgang42|5 years ago|reply
[+] [-] maxioatic|5 years ago|reply
Interestingly, I feel more inclined to read the articles than peruse the comment section first.
[+] [-] JadeNB|5 years ago|reply
[+] [-] thesephist|5 years ago|reply
[+] [-] dvfjsdhgfv|5 years ago|reply
[+] [-] drwolff|5 years ago|reply
[+] [-] kamilszybalski|5 years ago|reply
[+] [-] gitgud|5 years ago|reply
To me, the best thing about HN and Reddit is being able to efficiently skim through many article titles at once, without judging; writing style or image quality.