Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Hacker News front page in the style of a print newspaper (wolfgangfaust.com)
627 points by wolfgang42 on June 28, 2020 | hide | past | favorite | 133 comments

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.


-1 to images in color. BW images are way less distracting.

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.

I'd love to see it taken further with the images half-toned, I'm sure there has to be a good half-toning CSS filter out there somewhere.

Oh, I like that one! Thanks!

I really like both this and the Show HN! Thanks!

I especially liked the blurb from one post that links to ft.com:

> Then $67.00 per month.New customers onlyCancel anytime during your trial

Certainly saved me a click!

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.

Neat Droste effect when this article itself is featured: https://imgur.com/yrwMWnw

How many fractal iterations is that?

Why does it not timeout?

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.

> The font is whatever you have as the default in your browser—if you don’t like it then set a better one :)

The default serif fonts on most systems aren't the best choice for a site that is trying to imitate print media.

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.

  body {
    font-kerning: none;
    letter-spacing: -0.00214em;
    font-family: Helvetica;
> but I couldn’t put my finger on why

You probably shouldn't use serif, Helvetica is much easier on the eyes and more forgiving.

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.

>if you don’t like it then set a better one

Which would affect every site.

Just made some tweaks to the stylesheet, how does it look now?

I love that your front page made your front page.

If I make it to #1 I’m definitely updating the screenshot :)

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.

Makes sense if it's constructed on demand or even periodically fast enough to catch that.

I didn't say it didn't make sense. The recursion just made me smile.

Two levels

Are you planning to keep running it?

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.

Yes I second that, please keep it running I want to make this my HN client.

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!)

Looks great! This really makes it easier for me to see what belongs where.

Thanks for the quick adjustment! I'm already curious what new things I will find with this site.

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...

To clarify, the $12 / year would be the cost of the domain name, running the stack should be close to free.

how is it free?

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!

Ok, now something that turns a newspaper into HN format? Or has that already been done?

looks around

Psst..hey buddy, you want some RSS? ;)

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.

That said it's a cool RSS'y way of browsing NYT.

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 like it, but I'm afraid what it mostly showed me is that I don't think much of NYT's content. But thanks!

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.

Thanks for that. Really appreciate the answer.

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!

Looks nice and inviting :- )

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 avoided the word “comments” to keep the newspapery feel

(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)

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.

This is really cool. I especially like the article preview text and the color image on hover (very nice touch).

Interestingly, I feel more inclined to read the articles than peruse the comment section first.

OP of the other post here -- not related except in concept, I guess just inspiration to quick execution :)

I have just one problem with this - it's only one page.

I like the idea of changing the order of newspaper headlines and how this link could be #1 recursively.

I love how this contributes to our understanding of how we like to consume information. Great work.

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.

Thank you!

One nit. On mobile I have to scroll left and right to read the titles. Otherwise, I love it

Ack! Looks like I messed up the mobile view when I adjusted some spacing. How is it now?

Wow! Now that's feedback - Perfect now. Very nice work

EDIT: I have a z-flip so it's more narrow than most phones, but still looks great

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.

amazing how quickly he went from inspiration to implementation. absolutely love it.

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.

Yeah I saw a newspaper style interface for reddit yesterday here on Show HN and today one for Hacker News

Wow, this is really nice. I'd love to see a tiny bit more refinement on the CSS.

- 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

I made something similar several months ago. Here’s the HN front page in the style of digg.com: https://rigg.now.sh/

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.

Long back i built something similar to show a rich preview of articles posted on Hacker News.


This post itself being on the front page gives a sweet Droste effect

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.

It would be nice to see the top comments expressed, too.

Like this https://unim.press/#LOLHackerNews

That was pretty fast

Having worked in print newspaper production, this looks cool, but of course no real newspaper would ever have that much white space.

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.

Too-narrow columns and margins are what made newspaper layout fun.

Wow sitting at an outdoor dining table and just opened the link, looked like staring at an actual newspaper! Good work.

Fascinating. Now do it for facebook posts.

This is great. It reminds me how much I miss the straightforward, full screen width layouts from 15+ years ago.

Pictures + snippets = so much better than HN's default, for me anyway. Hopefully this will inspire HN!

Now I just need a 32" eink display.

Just put my printer to do this everyday (laser black and white) this is the best thing I've seen

who bought the domain (hackernewspaper.com) name? i hope it's the author of the script.

No, it wasn’t me. I‘m guessing someone else has gotten inspired and we’ll see another variation on the idea sometime in the next week or so.

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.

Some sort of horizontal line between the articles would look nice and help with readability.

Thanks for the suggestion—just added this, along with a few other tweaks.

Bravo! Such a refreshing take, and may yet become my preferred way of browsing HN.

OMG, how very beautiful ! Is it fully automatic? Will it persist?

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....

Squint a little closer at the thumbnail :)

Seeing this post in print newspaper style is a trip.

Absolutely fascinating! Hail to you Sir. Amazing.

Bookmarked it. Better than the news websites.

pleasingly recursive instance of the site embedded in the site... because you're on the front page.

I love this. Exceptionally well done.

Really cool - thank you :)

Kudos, amazing effort!

Thanks!! I love this

Great job! what is your GitHub repo? I want to play with this later

It’s linked in the box at the bottom of the page: https://github.com/wolfgang42/paper-hn

Patches welcome!

I really like this

Well, the distinct lack of "lorem ipsum" is a positive!

I like this one!


I love it.

cool! [bookmarked]

This is nice :)

love it!

Really cool.

No HTTPS, though? :)

The site is HTTPS—if you’re talking about the mixed content warning, I’m hotlinking all the images so it’s unfortunately unavoidable.

Ah, you're right. I just looked at Chrome's URL bar, and saw "not secure". Should've looked more closely.

You're right about the mixed content warning being unavoidable.

You could cache the images and serve them on your own domain. I’m pretty sure this is Reddit handles thumbnails in their lists.

I'll echo what they're saying. I'm not getting SSL either.

One of the top post images is 404ing so it displays a little broken file icon instead.

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.

Someone sitting between you and the site (Wifi router? ISP?) could potentially inject their own scripts.

Thanks. All pretty valid arguments, and probably enough to outweigh any potential slight performance/latency issue.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact