[HN Gopher] Show HN: Hacker News front page in the style of a pr...
___________________________________________________________________
Show HN: Hacker News front page in the style of a print newspaper
Author : wolfgang42
Score : 323 points
Date : 2020-06-28 16:00 UTC (6 hours ago)
(HTM) web link (www.wolfgangfaust.com)
(TXT) w3m dump (www.wolfgangfaust.com)
| beprogrammed wrote:
| I really like this
| [deleted]
| wickedOne wrote:
| love it!
| fortran77 wrote:
| It would be nice to see the top comments expressed, too.
|
| Like this https://unim.press/#LOLHackerNews
| andai wrote:
| 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 wrote:
| 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 wrote:
| 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.
| oandrei wrote:
| OMG, how very beautiful ! Is it fully automatic? Will it persist?
| wolfgang42 wrote:
| 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.
| KajMagnus wrote:
| 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 wrote:
| 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.)
| ChrisMarshallNY wrote:
| I like this one!
| letitbeirie wrote:
| This is great. It reminds me how much I miss the straightforward,
| full screen width layouts from 15+ years ago.
| mihaigalos wrote:
| Absolutely fascinating! Hail to you Sir. Amazing.
| dvfjsdhgfv wrote:
| I have just one problem with this - it's only one page.
| paledot wrote:
| I love that your front page made your front page.
| kylecazar wrote:
| Two levels
| phkahler wrote:
| Makes sense if it's constructed on demand or even periodically
| fast enough to catch that.
| paledot wrote:
| I didn't say it didn't make sense. The recursion just made me
| smile.
| wolfgang42 wrote:
| 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.
| read_if_gay_ wrote:
| That was pretty fast
| ritter2a wrote:
| 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 wrote:
| 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 wrote:
| 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.
| p-law wrote:
| 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.
| anoncow wrote:
| Bookmarked it. Better than the news websites.
| Finnucane wrote:
| Having worked in print newspaper production, this looks cool, but
| of course no real newspaper would ever have that much white
| space.
| wolfgang42 wrote:
| 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.
| gmantg wrote:
| 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 wrote:
| 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.
| yumraj wrote:
| 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 wrote:
| 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.
| qorrect wrote:
| Yes I second that, please keep it running I want to make this
| my HN client.
| maxioatic wrote:
| 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.
| enraged_camel wrote:
| Really cool.
|
| No HTTPS, though? :)
| wolfgang42 wrote:
| 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 wrote:
| One of the top post images is 404ing so it displays a little
| broken file icon instead.
| wolfgang42 wrote:
| 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.
| enraged_camel wrote:
| 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.
| dan1234 wrote:
| You could cache the images and serve them on your own domain.
| I'm pretty sure this is Reddit handles thumbnails in their
| lists.
| xfan009 wrote:
| I'll echo what they're saying. I'm not getting SSL either.
| vikinghckr wrote:
| 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?
| PhantomBKB wrote:
| 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.
| thekyle wrote:
| Someone sitting between you and the site (Wifi router? ISP?)
| could potentially inject their own scripts.
| dan1234 wrote:
| 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.
| vikinghckr wrote:
| Thanks. All pretty valid arguments, and probably enough to
| outweigh any potential slight performance/latency issue.
| gioscarab wrote:
| 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 wrote:
| Just made some tweaks to the stylesheet, how does it look now?
| wolfgang42 wrote:
| 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 wrote:
| 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 wrote:
| 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.
| dharmab wrote:
| > 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.
| lihaciudaniel wrote:
| Just put my printer to do this everyday (laser black and white)
| this is the best thing I've seen
| cs02rm0 wrote:
| Now I just need a 32" eink display.
| ekvintroj wrote:
| This is nice :)
| moscovium wrote:
| This post itself being on the front page gives a sweet Droste
| effect
| WalterBright wrote:
| 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!
| drinchev wrote:
| 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 wrote:
| 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 wrote:
| 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.
| drinchev wrote:
| 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!
| yingw787 wrote:
| 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...
| yingw787 wrote:
| To clarify, the $12 / year would be the cost of the domain
| name, running the stack should be close to free.
| ozkan wrote:
| how is it free?
| gpm wrote:
| 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 wrote:
| 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.
| JadeNB wrote:
| How is this related to
| https://news.ycombinator.com/item?id=23658721 ?
| thesephist wrote:
| OP of the other post here -- not related except in concept, I
| guess just inspiration to quick execution :)
| zepearl wrote:
| Really cool - thank you :)
| pacamara619 wrote:
| Some sort of horizontal line between the articles would look nice
| and help with readability.
| wolfgang42 wrote:
| Thanks for the suggestion--just added this, along with a few
| other tweaks.
| a0zU wrote:
| Seeing this post in print newspaper style is a trip.
| crazygringo wrote:
| 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 wrote:
| -1 to images in color. BW images are way less distracting.
|
| Reading your comment I think you might like https://hnews.xyz/
| that I (used to) read when in mood of a "HN magazine" but I'm
| tempted to make the switch now.
| makison wrote:
| Quite cool actually
| DyslexicAtheist wrote:
| amazing how quickly he went from inspiration to implementation.
| absolutely love it.
| wolfgang42 wrote:
| 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 wrote:
| 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.
| sagunsh wrote:
| Yeah I saw a newspaper style interface for reddit yesterday
| here on Show HN and today one for Hacker News
| drwolff wrote:
| I like the idea of changing the order of newspaper headlines and
| how this link could be #1 recursively.
| non-nil wrote:
| Neat Droste effect when this article itself is featured:
| https://imgur.com/yrwMWnw
| stormdennis wrote:
| 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 wrote:
| 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.
| GCA10 wrote:
| 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 wrote:
| 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.
| tom_mellior wrote:
| 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.
| rossdavidh wrote:
| Ok, now something that turns a newspaper into HN format? Or has
| that already been done?
| kenforthewin wrote:
| tada https://boards.kenforthewin.com/b/news
| spurgu wrote:
| 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.
| dvtrn wrote:
| _looks around_
|
| Psst..hey buddy, you want some RSS? ;)
| ozkan wrote:
| who bought the domain (hackernewspaper.com) name? i hope it's the
| author of the script.
| wolfgang42 wrote:
| 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.
| keithnz wrote:
| 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 wrote:
| Squint a little closer at the thumbnail :)
| tpmx wrote:
| Well, the distinct lack of "lorem ipsum" is a positive!
___________________________________________________________________
(page generated 2020-06-28 23:00 UTC)