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.
It’s nowhere near as sophisticated as you’re imagining—I created the effect by running the generator locally, overwriting the screenshot a few times, and then setting the result as the og:image on the page. It doesn’t update automatically or anything like that.
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.
If you change the section border-style to dotted and overall font-family to sans-serif your website basically becomes https://www.bloomberg.com :)
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.
Not everyone has a Helvetica font installed; at least add the generic sans-serif as a fallback. (Though if the aim is to be reminiscent of a print newspaper, a serif font may still be the better choice.)
Why disable kerning? If the user's font has kerning information, surely a newspaper should respect it.
You're completely right. Helvetica was just a suggestion as most newspapers use it and is widely supported, but he could and should add fallbacks (preferally sans-serif based). As for the kerning it appears something was messing up the spacing for his website and the combination of disabling kerning and letter spacing (even if counter-intuitive) seems to 'make it prettier' at least in firefox.
I'm a bit surprised by the statement that "most newspapers use it [Helvetica]", as my perception is that they mostly use a serif font. (How do you suppose Times Roman got its name?)
But perhaps this varies between markets/regions/languages/etc.
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...
Because "AWS Free Tier includes 50GB data transfer out, 2,000,000 HTTP and HTTPS Requests with Amazon CloudFront" presumably.
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.
Yup, CDNs and object stores are a dime a dozen these days. If one's too expensive or unreliable just move on to the next one. I believe this free tier doesn't run out after 12 months either.
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!
That's cool but it doesn't seem to have any users. And only NYT as a source (for now). And even if it had users there's no way to align them with my interests (you might get a hoard of neo-nazis upvoting all the wrong stories). This could be solved by basing it off a specific subreddit, for example.
I haven't really posted it anywhere yet, just a WIP side project for now. That said you can create your own Board and add any RSS feed, and moderate comments.
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.
It doesn't help right now, obviously, but for future consideration you might be interested in the proposal to extend CSS Grid to have Masonry support; see https://github.com/w3c/csswg-drafts/issues/4650.
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.
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.)
For whatever it's worth, on mobile I think I'd prefer it without images, or maybe just a select few images throughout the page. The page just feels too long. I'm not sure what a good way would be to pick out which to show though. But I really like this! I'm excited to try it on desktop in a bit.
30 items is a lot no matter how you slice it, really. I did experiment with hiding some of the image but I couldn’t think of a way of identifying “good” images; and having them appear and disappear based on things like position on the page seemed to just make things more confusing.
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.
Interesting idea. I couldn't open the site, though, because uBO blocked something like 50 domains and figuring which ones are actually needed would be quite an effort. Yes, my uBO blocks everything unless I make an exception.
Congratulations on having a browser that doesn’t work? Most of requests are thumbnail images (I’m hotlinking at the moment); to get things to display you can either disable JavaScript altogether or unblock just unpkg.com to get the libraries the page needs for layout.
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.
Thanks! I was inspired by looking at unim.press and wondering, “how hard would it be to put an extract from the page there instead of lorem ipsum?” (Quite difficult, it turns out—I don’t think there’s any way short of human curation or maybe some sort of ML training on a large corpus—but you can get reasonably far with a carefully tuned set of CSS selectors for commonly seen class names.)
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).
OP of Unim.press here-- yep, extracting text is pretty hard, though I think Instapaper and Pocket have good tech in that space. Certainly more than a weekend project's worth of work, which is why most of my focus personally was on the layout / visual fidelity. But it's cool to see that you put more time into extracting the content. I think for HN which is mostly longform online writing it definitely adds value.
Looks way better than the real newspapers I see on the internet and I quite like it for Hacker News too. You just need some ads and you're set (joking).
I'm very impressed anyway.
There’s already some classified job ads at the bottom of the page—I figured it fit in with the theme and it was a good way to thank HN for making an API available.
Very nice. What I liked about it is that thumbnails to the article allows readers to skim through the list more quickly and still understand more clearly what they are about.
A few minutes ago I added some extra space because people were complaining and excessively narrow margins have always been a bugbear of mine. Sounds like I may have overdone it a little; I’ve just changed the text to justified (which helps each section look a bit more like a cohesive solid block) and bumped the margins back down a bit.
That was me! I came across the Reddit post yesterday too and figured it would make for a fun weekend project. I'm not sure when I'll get the opportunity to build it though so if you're interested in the domain, shoot me an email.
Thanks! It’s semi-fully-automatic; right now the generator is running off my laptop as I make tweaks but I plan to set up a cron job shortly. The page will stick around as long as the domain is still up, and I intend to keep it updating, but as it’s something I knocked together over a weekend I make no guarantees.
sad there isn't an infinite recursion of the paper showing this page in an article. It's just one deep.... but maybe if we can get this towards the #1 spot....
Yeah, that page has very explicitly set an og:image that doesn’t exist. (It looks like it was intended specifically for that page, too.) It’s unfortunate but I’m afraid there’s not much I can do about it short of hard-coding a special case for that one post.
Is there a reason that site needs to be HTTPS? It doesn't have any user login feature, and it's read-only. So what are the arguments for making it HTTPS?
To prevent a man in the middle attack. There's a possibility that a hacker could inject malicious scripts into the payload, or even completely change the content of the website that you think you are viewing.
HTTPS stops the content being modified on its way to you. Some less than scrupulous ISPs have injected their own ads into pages, which would be prevented with SSL.
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!