Hacker News front page as a site

217 pointsposted 11 hours ago
by thatxliner

65 Comments

m132

4 hours ago

Love the summaries, I must say some stories I haven't considered interesting seeing them in the original HN view only caught my attention after my eyes landed on the summary.

At the same time, I very much dislike the layout. Masonry-style layouts, at least to me, feel more "artsy" than practical. Multiple rows being displayed at once, with the most crucial information being chaotically all over the place instead of arranged in a way that makes it easy to scan it with your eyes, make me feel like I'm bombarded with information. It's very hard to follow along and very easy to miss articles; almost anxiety-inducing, even. There's hardly any point to this on a website; it's not like you're wasting any paper.

est

5 hours ago

I am almost certain this layout is generated by AI, because I vibe coded the exact same newspaper-like style weeks ago.

oliviergg

2 hours ago

Yes ! Building a news website with Claude design give me the same design, background color, text size …

zoom6628

2 hours ago

This is gorgeous. Makes me feel like I'm picking up an old news sheet. Forces me to read slowly from which I then enjoy the reading much more it's like difference of drinking a fine wine from a glass instead of a straw in the wine bottle.

Kudos to the author.

koolala

3 hours ago

"Hacker News front page as a site

The Front Page highlights a diverse set of tech and science stories"

It is interesting the summary it generated for itself wasn't able to describe itself as a Hacker News content view. It missed the big picture meta context.

ammar_x

9 hours ago

Cool, but body font size is too small for comfortable reading!

Retr0id

9 hours ago

Sounds like an authentic HN experience to me!

gblargg

7 hours ago

I whipped up a quick uBO rule to fix that (also makes meta-information lines readable):

    thefrontpage.dev##p.newspaper-copy:style(line-height: normal !important; font-size: 1rem !important;)
    thefrontpage.dev##p.article-meta:style(font-size: 1rem !important; font-weight: normal !important; letter-spacing: normal !important;)
EDIT: changed to 1rem as someone else suggested

Wowfunhappy

9 hours ago

I agree, but I think it's that small because otherwise, the justified text results in ridiculous spacing.

OP, consider reducing the number of columns from 4 to 3 (at least below very wide viewports), increasing the font size, and then also allowing hyphenation. I think the last will help a lot with the justification problem.

iamalizard

9 hours ago

Or have a button that makes the text left-aligned for easier reading.

Wowfunhappy

8 hours ago

I think that very much defeats the point of making it look like a newspaper.

entropie

8 hours ago

Which might be fine? Since web pages are not newspaper sites one might say its just not the ideal way of presenting information.

Wowfunhappy

8 hours ago

This entire submission is styled to look like a newspaper. If you just want information that's available at news.ycombinator.com.

throwawayAAUGGH

8 hours ago

OP, I love the font size as is, have multiple options if you're going to change things! Remember the users that loved things as they were!

stagas

8 hours ago

I did increase it in the meanwhile from when that comment was posted.

daviding

9 hours ago

An overridden `.newspaper-copy { font-size: 1rem; }` works well.

hk1337

5 hours ago

I thought it already had a site?

thrownthatway

5 hours ago

It doesn’t have a website, it has a motherfucking website.

And it’s fucking perfect.

Barbing

3 hours ago

It’s exceptional. Here in camp “userscripts can offer some improvements”, would necessarily not say perfect, but definitely amazing how it’s continuing to stand the test of time.

dave7

5 hours ago

I love it! I discovered it'll switch to a 3 column view if I take the zoom to 200%, I'd maybe prefer it at less but it's a bit tricky to guess if that's true or not. Regardless, it's very nice. And infinite scroll for the hackernews feed is a bonus!

h0ek

32 minutes ago

Great job. Looks awesome.

skinwill

3 hours ago

You need some filler for the space at the bottom. Something like ads from the 1800's for quack medical devices or Radium Therapy. Maybe something wildly misogynistic advertising laudanum.

oefrha

8 hours ago

Using text-align: justify for questionable aesthetic purpose here really hurts readability, especially on a narrower viewport like the 1026px viewport of Safari with sidebar on an iPad Pro 12.9’’ (although it’s probably more of a problem of the four column layout on that specific narrow viewport; three should be better).

stagas

7 hours ago

Made it 3, try again perhaps. Changing to text-align: left really destroys the aesthetic though.

arecsu

3 hours ago

I agree that text-align: justify should be the way to go. Don't discard having a "config" menu in the header somehow to change this option along body text size as some other people might find it useful, which could then use localstorage to preserve the settings. Love the website by the way! I'm used to skim through brutalist.report in a daily basis but this one may be a worthy replacement :)

sheept

7 hours ago

It could probably be helped a bit by enabling auto hyphenation, but ultimately browsers aren't optimized for typesetting narrow columns of text

stagas

7 hours ago

Great idea, I'm trying this.

democracy

5 hours ago

This is great )) maybe do random templates similar to newspapers (like photo on the left, photo on the right, one block full width, then 3 columns, etc).

chrisgen19

9 hours ago

I like the concept, the grid and the design. but the small text description is hurting my eyes.

stagas

8 hours ago

Just made it a bit bigger.

fumeux_fume

8 hours ago

Nice! Happy to see the site appearing as itself on the front page doesn't cause some crazy recursive crash :)

revv00

8 hours ago

Cool, seems need some deduplication. Maybe when you turn to the new page, some items fall back.

stagas

8 hours ago

It is possible. Will look into it.

onemoresoop

4 hours ago

Its like reading a newspaper of sorts.

wanoir

11 hours ago

Would be cool to see different column layouts too!

irq-1

9 hours ago

Yea -- it could use votes to pick a hero article, or change summary length.

almyk

8 hours ago

Nice design, gives a cozy feeling similar to reading a newspaper

BeetleB

8 hours ago

Why is the text one long paragraph? Makes it very hard to read?

hliyan

an hour ago

This was the natural length of a paragraph before the emergence of engagement driven microblogging.

stagas

8 hours ago

Because I'm telling the AI "summarize it to one paragraph".

Barbing

3 hours ago

w/o instruction to avoid the same generic “this is an article about” preambles (or non-SotA model)

Not that summaries are reliable anyway. Big picture, maybe, but poor importance classification (bad at extracting key points). Understandable for this use case but unwilling to read potentially false summaries given risk I go around remembering them (never having read the original piece).

BeetleB

6 hours ago

OK. Tell it not to!

The formatting, etc looks all nice, but it's not worth reading.

sillysaurusx

5 hours ago

Could you explain in more detail how this works? Would it break for paywalled articles that HN links to? (Usually someone posts a workaround archive link in the comments, but your AI probably doesn’t account for that, right?)

I’m writing something similar to Moltbook for HN where AIs browse HN’s front page and leave comments. But I wasn’t sure whether AIs could reliably browse an arbitrary website. (Paywalls would break it, as just one example.)

But it seems like your AI works fine for all the sites. If you have time to explain, what exactly do you do to generate your summaries? Thanks!

EDIT: I see that sometimes your summaries fail, e.g. “Ferrari Luce - Summary not available.” It looks like it fails because it’s a JS heavy site. But I was thinking a headless browser could take screenshots of the page and then feed the screenshots to AI. I’m not sure how practical that is to implement though.

Barbing

3 hours ago

The solutions to this don’t seem to be great for the web or polite to use. An industry exists to cheaply do it, but not very ethical and surely a massive ToS violator.

insin

8 hours ago

Nice try at trying to get me to read the friendly articles ;)

bijowo1676

8 hours ago

looks lovely, but can you borrow text styling and typography from a modern media website like NYT WaPo or some other major news outlet?

This would make it easier to read

clacker-o-matic

8 hours ago

oh this is sick; i wonder where the curly bits at the top and bottom came from; based on the svg artifacts it looks converted from a raster

stagas

8 hours ago

Tricks of the trade :)

smartial_arts

9 hours ago

Previews are v slow to load for some reason

stagas

8 hours ago

Some of them are really large and I'm not resizing them or storing them, just proxying their og image directly. So they might be taking long to respond from the original source. Also getting hammerred by being in the front page.

galsapir

11 hours ago

hey that's pretty cool. I think I still prefer "distill HN" cleanliness though. What made you create this.

thatxliner

9 hours ago

I didn’t make this lol; just something cool I’ve found

namrog84

8 hours ago

Is it just me or is there something slightly weird about scrolling? Maybe font or color. Im on mobile.

sublinear

9 hours ago

This page now contains itself.

SilentM68

9 hours ago

Nice design, but I can't afford the $3.50 price of the cup of coffee, atm (◡︵◡)(◠‿◠)

delichon

11 hours ago

Now do clay tablets.

himata4113

8 hours ago

this is now my new default for hackernews.