Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Hacker News front page in the style of a print newspaper

wolfgangfaust.com

Post reply on HN
Print view View original

51–60 of 142 posts

Re: Show HN: Hacker News front page in the style of a print newspaper

#51

Post by wolfgang42 »

KajMagnus wrote: post #38

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

Re: Show HN: Hacker News front page in the style of a print newspaper

#53

Post by wolfgang42 »

ozkan wrote: post #49

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.

Re: Show HN: Hacker News front page in the style of a print newspaper

#55

Post by wolfgang42 »

andai wrote: post #36
wolfgang42 wrote: post #5

Earlier quoted context omitted.

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

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.

Re: Show HN: Hacker News front page in the style of a print newspaper

#57

Post by 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?

Re: Show HN: Hacker News front page in the style of a print newspaper

#58

Post by wolfgang42 »

drinchev wrote: post #57

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.

Re: Show HN: Hacker News front page in the style of a print newspaper

#60

Post by drinchev »

wolfgang42 wrote: post #58
drinchev wrote: post #57

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 prec…

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!

Post reply on HN