
Show HN: A Reddit reader that looks like the frontpage of a print newspaper - thesephist
https://unim.press/#dataisbeautiful
======
ComputerGuru
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.

~~~
breakingcups
You're right. It works great with NotTheOnion for example:
[https://unim.press/#nottheonion](https://unim.press/#nottheonion)

~~~
esperent
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.

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

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

~~~
thesephist
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.

~~~
StrangeSound
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

~~~
thesephist
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?

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

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

~~~
djdjdjd
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

~~~
baylessj
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.

------
slater
The Same Origin Policy disallows reading the remote resource at
[https://api.reddit.com/r/dataisbeautiful/hot?limit=25](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”](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

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

~~~
mike-cardwell
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.

------
Santosh83
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!

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

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

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

~~~
ComputerGuru
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.

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

~~~
ComputerGuru
> 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.

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

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

~~~
thesephist
My thoughts too! Hacker News was actually in a prototype of this and you can
try it by going to [https://unim.press/#hn](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.

~~~
divbzero
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...](https://wsjshop.com/products/framed-reprint-crash-
of-1987-stocks-plunge-508-amid-panicky-selling) "Black Monday Crash of 1987"

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

~~~
dfabulich
Browsers do hyphenate, and this page enables it, with the "hyphens: auto" CSS
rule. [https://developer.mozilla.org/en-
US/docs/Web/CSS/hyphens](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.)

~~~
jfk13
And if you _do_ see hyphenation in Chrome, that's a Chrome bug
([https://bugs.chromium.org/p/chromium/issues/detail?id=676270](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.

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

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

[https://unim.press/#hn](https://unim.press/#hn)

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

------
forgingahead
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](https://github.com/thesephist/torus)

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

~~~
thesephist
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.

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

------
jay_kyburz
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](https://imgur.com/a/Ys1EyAf)

------
einpoklum
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 :-)

------
ngz00
I didn't know I wanted this

------
onurcel
Imagine that combined with this: [https://onezero.medium.com/the-morning-
paper-revisited-35b40...](https://onezero.medium.com/the-morning-paper-
revisited-35b407822494)

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

[https://unim.press/#worldnews](https://unim.press/#worldnews)

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

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

edit: clarity

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

~~~
aftergibson
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.

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

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

------
mellosouls
This is superb, a very cool idea! Congrats.

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

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

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

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

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

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

------
blackrock
How long did it take for you to build it?

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

~~~
thesephist
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](https://github.com/thesephist/torus)),
so I knew the tools I was using inside out, which helped with speed.

~~~
sameerkapur
same day ships... kinda super impressive

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

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

~~~
pteraspidomorph
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.

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

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

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

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

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

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

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

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

------
JadeNB
How is this related to
[https://news.ycombinator.com/item?id=23669650](https://news.ycombinator.com/item?id=23669650)
?

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

~~~
thesephist
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.

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

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

~~~
thesephist
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.

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

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

~~~
thesephist
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.

~~~
linux2647
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

------
clashmeifyoucan
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 (&gt; → &)

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

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

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

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

------
sydd
Just throws a CORS error in FF for me.

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

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

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

------
Matt-Gleich
Awesome job! Super cool.

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

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

EDIT: just checked the date is wrong.

~~~
thesephist
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 :)

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

------
donohoe
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?

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

------
subhashp
Looks cool. Superb!

------
visarga
It's still got lorem ipsum in its teeth.

------
ipunchghosts
Great work!

------
badrabbit
Not loading on FF mobile

