Show HN: A Reddit reader that looks like the frontpage of a print newspaper | Hacker News Reader

Show HN: A Reddit reader that looks like the frontpage of a print newspaper

unim.press

638 pointsthesephist122 comments

It’s very interesting from a psychological standpoint: the current front page headline (for me?) is “Planets and dwarf planets to scale in size, rotation speed, axial tilt and oblateness (numbered in distance order from Sun)”

If I were reading this on /r/dataisbeautiful, I’d immediately parse and grok the headline just fine. But with this, my mindset was on the reporting of actions or events and I read “to scale” as an infinitive (verb/action), almost like the intro to a sci-fi novel that starts with a stunning declaration that in x days, all planets will actively shrink by y% in some never before seen cosmic event.

If you’ll allow me to use a programming analog, it wasn’t until my tokenizer hit the first parenthesis that my lexer switched to the correct track.

You're right. It works great with NotTheOnion for example: https://unim.press/#nottheonion

Good choice. The headlines look great, the pictures look great, but unfortunately the text for every article is just "lorem ipsum...". If there has to be text there for the layout to work, in cases where the post is only a headline and image then blurred unreadable text would look better there.

Actually the headlines are painful to look at - they should not be adjusted to the column’s width like they are.

Headlines have their own grammar (and sometimes even vocabulary) not found in other forms of English. It is a quite common module in advanced English lessons for ESL students. I’m sure a motivated individual could translate the reddit titles to “headlinese”[1].

[1] https://en.wikipedia.org/wiki/Headline#Headlinese

This just happened to me with the top headline being: Birthdates of US servicemen drafted into the Vietnam War as a result of birthdate lotteries held in 1969, 1970 and 1971

I had to read it like a first grader and think about it to understand that it was just a label for a chart and NOT a headline of an action.

It hangs on "reading stories".

Web app authors can be very creative, but one thing I don't like about web apps is that often their error handling is nonexistent. It's not about individual authors; behemots like Microsoft also do this in an irritating way: "Something did not work. Reload the page please" -- Is this really the best a billion dollar company can do? Well, I suppose this is still better than no error at all, which is a default error handling method for big chunk of web apps.

I think (but can be wrong) that by using such a dynamic environment like JS is the culprit for lack of good error checking mechanism.

Also one thought of mine for the reason why even big companies are unwilling to provide good error messages is that it's impossible to get the real reason. There may be so many moving parts that even the developer isn't able to handle it all. Which sparks a doubt in my mind if this environment is really fit enough to provide high quality software. Since it's so popular it's obvious that it has some aspects that it does right, but it seems that the web app environment could benefit from some fundamental changes.

It actually does handle errors properly -- the reddit api is probably blocked for you, which is why it hangs and can't do anything. I suppose I could have added a "it seems we can't reach Reddit" kind of message, but that would still have been an error state, and in rushing this out in an afternoon it wasn't much of a priority.

Didn't realize until posting here that apparently Firefox blocks the reddit api from the browser in certain common configurations. So maybe that would have been useful.

> It actually does handle errors properly

IMO if a website displays a loading message indefinitely then this isn’t error handling.

I’d say that showing accurate feedback is part of proper error handling; like the one you suggested:

> I suppose I could have added a "it seems we can't reach Reddit" kind of message,

Not that a hobby project needs error handling, it’s cool even without it.

It doesn't load for me in Chrome either.

In the function fetchRedditStories, it looks like that the callback param in the catch is named `e`, but it tries to log `error`.

Checking the network panel I'm getting a 200, but I'm pretty sure it's failing anyway because of the ReferenceError

Darn, can't believe I didn't catch that typo until now. I don't think that was the issue -- unbound variables don't cause exceptions in JS until that variable is dereferenced -- but not sure what else it could be if the reddit api hit is succeeding with a 200. Maybe a wonky JSON Decode?

> Darn, can't believe I didn't catch that typo until now. I don't think that was the issue -- unbound variables don't cause exceptions in JS until that variable is dereferenced

The underlying problem here is using Javascript instead of TypeScript.

And of course under that problem there's the problem of Javascript bit being TypeScript in the first place.

(Not a bad word about Brendan Eich though, considering that the language was created by one man in three weeks it is amazing, but it is still sad that we ended up with an untyped language in such a critical place.)

Hanging or crashing without feedback is pretty much "not handling errors".

They (MS etc) know the error alright, but users get scared and overwhelmed by technical language and error messages. So they put some picture of a sad cat and a message like "zoinks, that didn't work, try again". And anyway, if you're going to reload anyway, why would you care about the exact error? Hopefully it got logged in their systems so the engineers can come back to it. Beyond nerd curiosity, why would a user need non-actionable detailed error messages?

How about the diagnostic tool you can launch in Windows. It works away for 5 minutes then says it couldn't fix it.

Are you talking about the Windows Error Reporting tool? It can occasionally work (I was notified once that a crashing driver had an update to fix the crash I ran into). Most of the time the crash/hang data is used to prioritize fixes in a later release.

the problem is that most of the time I'm reloading the page and exact same error appears. With more details I could troubleshoot the problem, but with errors like that I'm just closing the tab/windows app and I'm starting writing rants about it on the internet :D

> I think (but can be wrong) that by using such a dynamic environment like JS is the culprit for lack of good error checking mechanism.

Not at all. It's perfectly possible to implement solid error handling. There's even a global handler: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEvent....

For legacy scenarios (IE11) you can add an event handler for the error event, so you end up with something like the following to deal with both situations:

    window.onerror = yourErrorHandlerFunction;
    window.addEventListener('error', yourErrorEventHandlerFunction);

The shape of the objects passed in differs slightly, hence the need for two different handlers. In my case one simply repackages the object and hands it off to the other.

Microsoft also often includes a long id for the error and shows it to the user in for example Office 365, which is mostly useless to the user (they could compress it into a nice shorter id).

Everything you wrote is wrong and you've clearly been trying to support that pre-existing conclusion for years.

It has an error. Report the bug. Hope it gets fixed. The end.

I went back reading a printed newspaper a few months back and the speed in which I get my news now is astonishing. It feels like the web is not made to update oneself on news efficiently. To skim and zoom in and out of articles. I think part is the display format, part is the organization. A physical newspaper has a very predictable structure and does not change while you are reading it. (I.e. no need to come back to the same section once you read it).

Typography and layouting of a newspaper is quite complex. If you look at a printed newspaper, the stories are arranged and cut to size with images, captions and inserts to fit neatly into the grid.

Depending on the newspaper the information flow from headline, subheadings, article is strict, optimizing for allowing for fast skimreading or to grab your attention.

To do this "right" on challenging unedited reddit posts will be a lot of work, but an interesting challenge.

It's so much slower then using a rss reader and swiping through thought.

I have seen plenty of people struggling when reading relatively large newspaper. Most of them are.

And then I also need to wash my hands afterwords

The ink on one's hands after reading the newspaper is the best part! Obviously an inconvenience, but it does bring a bit of nostalgia for me.

The Same Origin Policy disallows reading the remote resource at https://api.reddit.com/r/dataisbeautiful/hot?limit=25. (Reason: CORS request did not succeed).

The resource at “https://api.reddit.com/r/dataisbeautiful/hot?limit=25” was blocked because content blocking is enabled.

ReferenceError: error is not defined

MacOS, Firefox 77.0.1

Had to disable my adblocker for it to connect to the Reddit API.

Weird, it works fine here:

https://i.imgur.com/EGdEH2t.png

I had to disable Firefox's Enhanced Tracking Protection for the site in order for it to work. (GNU/Linux, Firefox 77.0.1)

Same here. Probably would be a good idea to proxy the api.reddit.com requests through the same origin. Maybe even just as a fallback if the direct request didn't work.

Cool! Another suggestion: why not extract and show the text of the leading comment (or maybe some other metric) of the articles in question rather than lorem ipsum filler?

And an option to "turn the page" for more content from the select subreddit would be even cooler!

A note to those using Firefox who get stuck at "Loading stories...": Enhanced Tracking Protection (on by default?) blocks the request. To disable it for this page, click the little purple shield next to the URL.

The Firefox tracking protection is blocking https://api.reddit.com classified as "may external ads, videos and other content with tracking code". Odd.

The hyphenation on the center-spread column doesn't look great, leaving big whitespace gaps in justified text.

In my experience, "hyphens: auto" in browsers doesn't work well at widths smaller than 80ch. The "center-spread" column is currently set to width: 600px, approximately 67ch. Changing it to width: 80ch looks much, much better, in my opinion.

I also suggest adding the Safari variant, "-webkit-hyphens: auto", and add the lang="en" attribute to your <html> tag, to enable hyphenation in Firefox.

It’s really sad how much typesetting and font rendering has taken a backseat since the 80s and 90s. It seems like just yesterday the race was about finding the optimal algorithms for typesetting text to avoid rivers, have aesthetically pleasing ragged or justified text, tweak word breaking heuristics to avoid local optima that give poor overall results, etc and coming up with fonts that were hand-hinted and carefully designed to display as correctly as possible on the output devices of the time.

Now, we’re lucky if we get an option to manually specify hyphenation points for line wrapping, we have horribly thin and broken “web fonts” that supersede even locally installed versions with correct hinting of the same typeface, have disabled subpixel rendering so we can play nicer with animations, transitions, and useless effects, and consider ourselves incredibly lucky if we get real italics rather than oblique versions of the Roman typeface *for fonts with italic versions around since the early ‘90s.

That is _only_ an issue on the web. Any half decent typesetting program should have no issues at all doing it right.

And even then it is getting better, the modern CSS can do things Word can't (notably all small caps and old style figures).

> That is only an issue on the web

After championing it and spending 13 years adding it to the OS and getting it supported everywhere, Microsoft removed ClearType subpixel rendering from Windows 8’s UI framework for those same reasons, went on to ship Windows 10 without it, and only went back on that decision with the Creator’s Update and are still working to correct that mistake and its fallout.

My understanding is that "hyphens:auto" should not be doing anything in the absence of a lang attribute: the browser is not supposed to do automatic hyphenation if the content language is unknown.

https://drafts.csswg.org/css-text-3/#hyphenation

I was going to file a bug against Chrome, but it turns out this was reported several years ago already:

https://bugs.chromium.org/p/chromium/issues/detail?id=676270

My first reaction to this was, "why?" The skeuomorphism of the low-res paper background and ugly type is horrible. But, reading the comments here, apparently some people like it, so ok.

But you can see all the CORS issues this is throwing up. Rather than a 100% js app, why not call a function which fetches the content and caches it too? CORS issues begone, and caches too! You don't need an expensive server setup, have a look at AWS Lambda or Azure Functions.

Would be cool if there was one of these for the front page of HN. Pretty challenging to parse though. Headlines and comments should be simple enough, articles and images not so much.

My thoughts too! Hacker News was actually in a prototype of this and you can try it by going to https://unim.press/#hn -- but indeed, it didn't look great without pictures. Might be able to scrape linked articles and such, but I didn't get that far in an afternoon hack.

Text alone can be beautiful.

As one example, the front page of the Wall Street Journal in 1987 was predominantly text. [1]

[1]: https://wsjshop.com/products/framed-reprint-crash-of-1987-st... "Black Monday Crash of 1987"

https://unim.press/#LOLHackerNews

Ah yes, now we come full circle.

Please do not use justified formatting for text unless you can hyphenate it. Otherwise you end up with large chunks of white space between the words, especially in narrower (then 6070 characters) columns.

Browsers don’t hyphenate, so avoid justified text on the web.

Browsers do hyphenate, and this page enables it, with the "hyphens: auto" CSS rule. https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

In Google Chrome, you'll see that it hyphenates "profes-sional" in the second story of the center column. It's still not enough, though, because it still leaves huge gaps in the justified text; it works best when you use width: 80ch. The page is currently using width: 600px, which is approximately 67ch.

(If you don't see hyphenation in Safari, that's because the developer didn't enable -webkit-hyphens. If you don't see hyphenation in Firefox, that's because the page's <html> tag doesn't have a lang="en" attribute.)

And if you do see hyphenation in Chrome, that's a Chrome bug (https://bugs.chromium.org/p/chromium/issues/detail?id=676270), because the spec says the browser must only do this if the content language is known.

And if you don't see hyphenation in Chrome, probably you use Linux (or another unsupported platform). To feel how it should insert 

    var Hyphenopoly = {
      require: {
        "en-us": "Supercalifragilisticexpialidocious"
      },
      setup: {
        selectors: {
            ".story": {}
        },
        CORScredentials: "omit"
      }
    }
    script = document.createElement('script')
    script.src = 'https://unpkg.com/hyphenopoly@4.5.0/min/Hyphenopoly_Loader.js'
    document.body.append(script)

Real newspapers do justify text, and they do end up with large chunks of white space between words. I think OP was going for the newspaper look so that part is quite authentic even though I agree it may not be the best design choice for "normal" web pages.

I know real newspapers do hyphenate, but the site would probably look a lot less like a newspaper without justified text.

That’s not entirely true is it? Browsers can hyphenate (using the hyphen property in CSS) but it only supports certain languages, which need to be specified in the lang attribute of the html tag.

but it only supports certain languages

Probably because hyphenation is itself a rabbit-hole of complexity; some languages may require a complete dictionary to determine where words can be hyphenated, and sometimes it could depend on what style guide you follow, etc.

Support just isn't universal enough.[1] In particular, for Chromium-based,

> Only supported on Android & Mac platforms (and only the "auto" value) for now.

Even where the property is supported, the supported language matrix [2] tells a depressing story.

[1] https://caniuse.com/#feat=css-hyphens

[2] https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Bro...

Wow, I should know better. That’s pretty awful support.

CSS word wrap

Right, there’s also overflow-wrap though it’s intended more for preventing layout breakage in a language-agnostic way. Maybe it could be useful if you’re working with a language that isn’t supported by browsers.

This is amazing! Like the newspapers in harry potter. You’ve closed the loop on automating a dynamic, crowdsourced, curated front page. The meta paper.

Now do hackers news. It’ll be like the WSJ, a nice counterpart to this, which is a little more like US Weekly.

From the OP in another comment, it was used as a prototype:

https://unim.press/#hn

Very cool idea, since this is a niche product why not adding a small qr code for the articles? By this way this could totally be printable. You read articles from paper while commuting etc. Mark the ones you find interesting. At the end of the day you could visit them via you phone if you really want to see them live.

Very cool -- looks like the dev (@thesephist) is using Torus, a minimalist front-end framework they themselves are also developing:

https://github.com/thesephist/torus

Nice showcase of the tech! Now I want to tinker with the Torus framework as well.

Yep! It was one of my main side projects earlier last year and these days I consider the library itself "done", using it for most of my side projects if I need something more robust than vanilla JS. Just drop in a <script> tag and go for modern browsers -- makes it easy to prototype really quickly. It's not superlative at anything (except maybe prototyping speed) but I know it inside and out, and its no-build/no-config nature makes it well suited for weekend hacks like this.

A long time ago, when I was more of a news junky, I wrote some scripts to pull from various RSS feeds (BBC, Financial Times, Jane's, and one or two others), crack out the text of recent items, and format into a five-column, landscape-oriented PDF, with nice headlines, table of contents, etc. A cron job would see to running the pipeline every morning and emailing the result to me. When I got to work, I would print it out and read it on breaks throughout the day, crossing off items once I read them or decided they weren't relevant. With a red pen, I could also mark it up and make small notes on interesting items.

Curl, BeautifulSoup, and Latex. Great fun.

The best thing about old fashioned newspapers is how much information you can fit on the page. I would consider smaller fonts. https://imgur.com/a/Ys1EyAf

My print newspaper doesn't say "Loading stories"...

How about doing the page generation on the server-side? That way a static page could be served.

... actually, in that case, maybe a _PDF_ could be served, and that's really more like print :-)

I didn't know I wanted this

Imagine that combined with this: https://onezero.medium.com/the-morning-paper-revisited-35b40...

Yes, and a more natural subreddit to do it with:

https://unim.press/#worldnews

I love this. There’s a weird bug though when you try to zoom in on mobile safari. It jumps back out again and makes it hard to read the smaller articles. Fantastic idea and execution though. Nice.

Yep, fully justified text in a browser still looks like dog shit.

edit: clarity

It's just awesome! I'm so tired of feed-like layouts, they are not for humans.

I'm beginning to feel this fatigue also, is there anything you've discovered as an alternative? Am tempted to start just picking up a newspaper.

This doesn't work with Enhanced Tracking Protection and/or uBlock Origin enabled in Firefox. I wonder if there's a way around that server-side.

Nor does it work with Brave's built-in ad/tracker blocker.

This is superb, a very cool idea! Congrats.

Thanks! Always fun when a showerthought turns out to be something interesting for more than just me.

Yeah very cool. I’d say it qualifies as even artistic in aesthetics and meaning. Bravo.

Next up: the spinning newspaper headline entree...

https://tvtropes.org/pmwiki/pmwiki.php/Main/SpinningPaper

turn off enhanced tracking protection in Firefox if the content doesn't load

And here I thought it was just the app doing a faithful reconstruction of the reddit experience.

Bug: manually change the URL with a different sub and then press enter doesn't work (it does nothing). You have to refresh afterwards.

Several years ago there was an extremely popular app that was an RSS newsfeed aggregator for iPads with an unfortunately very generic name called "the magazine" that did this exact same thing, it embedded the articles in a newspaper aesthetic. Great stuff.

I used it extensively on an iPad first generation but unfortunately it's no longer available on the App Store.

How long did it take for you to build it?

And did you already know the backend tech in order to speed up development?

6 hours -- I had the idea this morning and started at around 2PM (first commit on GitHub). Finished at around 8PM. The app is all client-side, so I didn't have any backend need.

The app renders using a UI rendering library I wrote (https://github.com/thesephist/torus), so I knew the tools I was using inside out, which helped with speed.

same day ships... kinda super impressive

Looks great. You could add /r/popular (the default front page) to the dropdown, though it seems to work if I edit it into the URL.

Good idea -- just added it, update rolling out now! Thanks.

Thanks! Here's another fun idea (sorry I'm not implementing this myself and submitting as a pull request; do feel free to ignore me): For the ones that have lipsum because they don't have text, you could use the top comment. Something like:

"COMMENT CONTENT," USERNAME said when prompted

USERNAME had this to comment: "COMMENT CONTENT"

We interviewed USERNAME, who said: "COMMENT CONTENT"

etc.

If you want to check out another Sub-Reddit, open the console and type:

app.subreddit = "nameofsubreddit"; app.fetch();

Wow. This is great.

Only one thing, an old news paper format won't have images on all stories which is bit awkward to look at.

Also would be cool to have some sort of ML NLP that makes the headlines ‘read’ more like a newspaper.

Looks good. But I find it hard to read in that form. Cool project. It works on nsfw subreddits too.

That's cool. Although there are some kerning issues... And the lipsum might be a bit much :D

You could replace the lipsum with the top comment (or few) from the post!

Very cool. I think filtering tags like "[OC]" could make it look even better.

How is this related to https://news.ycombinator.com/item?id=23669650 ?

Text always says lorem ipsum. It could be composed of comments in the thread.

Depends on the type of the post. I suppose I could have fetched comments, but for now, it uses lorem ipsum if the post isn't a text post. If it's a self/text post, it uses that text as the article body.

I think using top comments to fill this up instead of using Loren ipsum would greatly improve it.

This would be cooler if there were an option to export to pdf and epub

A close alternative right now is to print the page with the right amount of zoom, but yeah that's not a bad idea actually. Print it out on newsprint paper.

This does some fascinating things to my brain and I think I want a Reddit front end that lets me put in my username to see my own front page as an auto-generated Newspaper.

This is really cool! As a suggestion, you may want to add in a toggle for zoom. On my computer the site looks perfect at 67%.

But this is really great work! Great idea and really cool! Good work!

Regards, Peter @ Oeck.

Yeah, the zoom definitely changes the experience. I tried to strike a good balance between the layout being big enough to read somewhat comfortably, while small enough to see the overall "newspapery" layout, and 1200px wide by default is what I ended up settling on. Of course users I think can zoom in and out on their own if they prefer another size, like you did.

The implementation is buggy though. Trying to zoom in on iOS Safari reshuffles the content around and keeps it at its original size. It might be fine on desktop

I really like the feel of reading textual posts here, if there was an option to actually read whole posts I'd be sold.

P.S. I think special characters need to be unescaped (> → &)

Yep, you're right -- I didn't realize Reddit encoded their string values as HTML in their JSON API. Fix rolling out! :) Thanks.

I can't explain why I love this so much. And I never read traditional newspapers, so I'm not nostalgic.

Wouldn't it be cool if you could replace the "Lorem ipsum..." with first lines of the link?

I like it. Although I wouldn't use justified text for headlines. Makes it really difficult to read, at least for me.

Just throws a CORS error in FF for me.

Woah. This is actually so good. Kinda give me a "digest" vibe of a subreddit.

I think you could find lots of stuff on Reddit that could go on page 3

Amazing! Any plans of adding reddit login / user home feed ?

Awesome job! Super cool.

It says Sunday June 2020. It's Saturday isn't it?

Depends where are you in the world. In NZ it's already Sunday.

EDIT: just checked the date is wrong.

I somehow missed in rolling this out that JS's `new Date().getDay()` returns a Sunday-based week, not a Monday-based one. Thanks for pointing it out! Fix rolling out now :)

No problem. I had just woken up and looked at this so I was confused thinking did I sleep through Saturday?!?!?

People built things like this 10+ years ago and they were awful, and ridiculed by people in places like HN etc.

This format looks good on paper, but on screens its a mess and poorly formatted one at that.

Can we stop re-inventing bad UX all over again?

I would much rather see someone experimenting than see the same Bootstrap-like landing page over and over again.

Looks cool. Superb!

It's still got lorem ipsum in its teeth.

Great work!

Not loading on FF mobile

Reply on news.ycombinator.com