Show HN: Hacker News front page in the style of a print newspaper
wolfgangfaust.com
wolfgangfaust.com
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!
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.
> Then $67.00 per month.New customers onlyCancel anytime during your trial
Certainly saved me a click!
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.
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.
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.
The default serif fonts on most systems aren't the best choice for a site that is trying to imitate print media.
body {
font-kerning: none;
letter-spacing: -0.00214em;
font-family: Helvetica;
}
You probably shouldn't use serif, Helvetica is much easier on the eyes and more forgiving.
Why disable kerning? If the user's font has kerning information, surely a newspaper should respect it.
But perhaps this varies between markets/regions/languages/etc.
Which would affect every site.
Also for large device widths margins of something like 20% makes it more readable. Visit somethings like https://www.nytimes.com and compare how much narrower the content is.
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.
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.
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 quick adjustment! I'm already curious what new things I will find with this site.
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...
For small websites you can often find ways to fit inside free tiers these days. If this site is just static files you could use similarly use netlify (100GB/month free). Or you could use a free tier VPS from GCP/AWS and cloudflare to cache traffic (to keep you under the free tier bandwidth limits). Or so on.
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.
Psst..hey buddy, you want some RSS? ;)
That said it's a cool RSS'y way of browsing NYT.
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?
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.
I remember having similar struggles with infinite-scroll product page a while back ( ~5 years ago ), with variable card height. I thought this could be done with CSS nowadays, but I guess css grid & flex-box specs don't go that far.
Awesome work!
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
(Maybe a comments icon instead, + a number?
Or "123 readers thoughts" or "123 replies"
or "123 people talking about this", here 123 would be unique users not comments)
Interestingly, I feel more inclined to read the articles than peruse the comment section first.
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.
One nit. On mobile I have to scroll left and right to read the titles. Otherwise, I love it
EDIT: I have a z-flip so it's more narrow than most phones, but still looks great
Edit: just for you I’ve added a check to handle the case when the libraries can’t be loaded. It will look broken but at least you should be able to read it now.
It took me about 8 or 10 hours yesterday to build, and I think about half of that was tweaking the heuristics for the paragraph/image extraction and keyword selection (the “STYLE, 3” that links to the thread page).
- Pick a specific serif font, maybe Palatino?
- H2: text-align: justify
- maybe something a bit lighter and more elegant than the heavy lines separating articles
Like this https://unim.press/#LOLHackerNews
Patches welcome!
No HTTPS, though? :)
You're right about the mixed content warning being unavoidable.