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.
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.
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.
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.
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.
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 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.
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.
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.)
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...
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.
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.
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.
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.
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.
141 comments
[ 3.1 ms ] story [ 190 ms ] threadNo HTTPS, though? :)
You're right about the mixed content warning being unavoidable.
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).
Psst..hey buddy, you want some RSS? ;)
That said it's a cool RSS'y way of browsing NYT.
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.
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 default serif fonts on most systems aren't the best choice for a site that is trying to imitate print media.
You probably shouldn't use serif, Helvetica is much easier on the eyes and more forgiving.
Why disable kerning? If the user's font has kerning information, surely a newspaper should respect it.
But perhaps this varies between markets/regions/languages/etc.
Which would affect every site.
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.
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
(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)
Interestingly, I feel more inclined to read the articles than peruse the comment section first.
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...
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.
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.
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.