
Show HN: Hacker News front page in the style of a print newspaper - wolfgang42
https://www.wolfgangfaust.com/project/paper-hn/
======
crazygringo
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.

Kudos!

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

According to your comment I think you might like
[https://hnews.xyz/](https://hnews.xyz/) that I read when in mood of a "HN
magazine". I'm tempted to make a switch now.

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

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

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

------
non-nil
Neat Droste effect when this article itself is featured:
[https://imgur.com/yrwMWnw](https://imgur.com/yrwMWnw)

~~~
vagab0nd
Why does it not timeout?

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

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

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

~~~
manjalyc

      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.

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

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

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

------
paledot
I love that your front page made your front page.

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

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

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

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

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

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

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

------
yingw787
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...](https://github.com/tinydevcrm/tinydevcrm-api-
docs/blob/a4d293f79d3a8a41920e4b4d9a6c5cc26fa988c5/stack.yaml)

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

~~~
ozkan
how is it free?

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

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

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

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

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

~~~
kenforthewin
tada
[https://boards.kenforthewin.com/b/news](https://boards.kenforthewin.com/b/news)

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

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

------
drinchev
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?

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

~~~
jfk13
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](https://github.com/w3c/csswg-drafts/issues/4650).

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

~~~
wolfgang42
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.)

~~~
KajMagnus
> 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)

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

~~~
wolfgang42
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.)

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

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

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

------
JadeNB
How is this related to
[https://news.ycombinator.com/item?id=23658721](https://news.ycombinator.com/item?id=23658721)
?

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

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

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

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

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

------
jeppesen-io
Thank you!

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

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

~~~
jeppesen-io
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

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

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

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

~~~
wolfgang42
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).

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

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

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

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

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

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

[http://richhn.herokuapp.com](http://richhn.herokuapp.com)

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

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

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

Like this
[https://unim.press/#LOLHackerNews](https://unim.press/#LOLHackerNews)

------
read_if_gay_
That was pretty fast

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

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

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

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

------
utopcell
Fascinating. Now do it for facebook posts.

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

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

------
cs02rm0
Now I just need a 32" eink display.

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

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

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

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

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

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

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

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

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

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

~~~
wolfgang42
Squint a little closer at the thumbnail :)

------
a0zU
Seeing this post in print newspaper style is a trip.

------
mihaigalos
Absolutely fascinating! Hail to you Sir. Amazing.

------
anoncow
Bookmarked it. Better than the news websites.

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

------
haloblue
I love this. Exceptionally well done.

------
zepearl
Really cool - thank you :)

------
humility
Kudos, amazing effort!

------
ghoshbishakh
Thanks!! I love this

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

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

Patches welcome!

------
beprogrammed
I really like this

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

------
ChrisMarshallNY
I like this one!

------
nloladze
Bookmarked

------
ondrae
I love it.

------
balanced009
cool! [bookmarked]

------
ekvintroj
This is nice :)

------
wickedOne
love it!

------
enraged_camel
Really cool.

No HTTPS, though? :)

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

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

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

