11 ms·

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

638 points by thesephist 6y ago

pks016 6y ago
Looks good. But I find it hard to read in that form. Cool project. It works on nsfw subreddits too.
slater 6y ago
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
- trishmapow2 6y ago
  Had to disable my adblocker for it to connect to the Reddit API.
- LukeShu 6y ago
  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 6y ago
    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.
- fireattack 6y ago
  Weird, it works fine here: https://i.imgur.com/EGdEH2t.png https://i.imgur.com/EGdEH2t.png
mrtobo 6y ago
Yep, fully justified text in a browser still looks like dog shit. edit: clarity
asimjalis 6y ago
Text always says lorem ipsum. It could be composed of comments in the thread.
- thesephist 6y ago
  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 6y ago
    I think using top comments to fill this up instead of using Loren ipsum would greatly improve it.
blackrock 6y ago
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 6y ago
  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 6y ago
    same day ships... kinda super impressive
mellosouls 6y ago
This is superb, a very cool idea! Congrats.
- thesephist 6y ago
  Thanks! Always fun when a showerthought turns out to be something interesting for more than just me.
  - mellosouls 6y ago
    Next up: the spinning newspaper headline entree... https://tvtropes.org/pmwiki/pmwiki.php/Main/SpinningPaper https://tvtropes.org/pmwiki/pmwiki.php/Main/SpinningPaper
  - siavosh 6y ago
    Yeah very cool. I’d say it qualifies as even artistic in aesthetics and meaning. Bravo.
ipunchghosts 6y ago
Great work!
excalibur 6y ago
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 6y ago
  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 6y ago
    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-stocks-plunge-508-amid-panicky-selling https://wsjshop.com/products/framed-reprint-crash-of-1987-st... "Black Monday Crash of 1987"
- fortran77 6y ago
  https://unim.press/#LOLHackerNews https://unim.press/#LOLHackerNews
  - thesephist 6y ago
    Ah yes, now we come full circle.
donohoe 6y ago
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?
- deleted 6y ago
  [deleted]
- sebiche 6y ago
  I would much rather see someone experimenting than see the same Bootstrap-like landing page over and over again.
scienceman 6y ago
Very cool. I think filtering tags like "[OC]" could make it look even better.
dillonmckay 6y ago
Also would be cool to have some sort of ML NLP that makes the headlines ‘read’ more like a newspaper.
egfx 6y ago
This would be cooler if there were an option to export to pdf and epub
- thesephist 6y ago
  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.
jay_kyburz 6y ago
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
sydd 6y ago
Just throws a CORS error in FF for me.
visarga 6y ago
It's still got lorem ipsum in its teeth.
Oeck 6y ago
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 6y ago
  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 6y ago
    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
weswpg 6y ago
turn off enhanced tracking protection in Firefox if the content doesn't load
- na85 6y ago
  And here I thought it was just the app doing a faithful reconstruction of the reddit experience.
deleted 6y ago
[deleted]
subhashp 6y ago
Looks cool. Superb!
sixstringtheory 6y ago
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 6y ago
  From the OP in another comment, it was used as a prototype: https://unim.press/#hn https://unim.press/#hn
dfabulich 6y ago
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 6y ago
  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 6y ago
    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 6y ago
      > 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.
keyle 6y ago
That's cool. Although there are some kerning issues... And the lipsum might be a bit much :D
- mchan889 6y ago
  You could replace the lipsum with the top comment (or few) from the post!
ngz00 6y ago
I didn't know I wanted this
ComputerGuru 6y ago
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 6y ago
  You're right. It works great with NotTheOnion for example: https://unim.press/#nottheonion https://unim.press/#nottheonion
  - esperent 6y ago
    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 6y ago
      Actually the headlines are painful to look at - they should not be adjusted to the column’s width like they are.
- thatoneuser 6y ago
  I experienced the exact same thing. Wonder if it's a psychological hack or something?
- TheKarateKid 6y ago
  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.
fireattack 6y ago
Bug: manually change the URL with a different sub and then press enter doesn't work (it does nothing). You have to refresh afterwards.
lala26in 6y ago
well done sir.
andrei_says_ 6y ago
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.
- dheera 6y ago
  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.
- rcar1046 6y ago
  CSS word wrap
  - steve_adams_86 6y ago
    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.
- steve_adams_86 6y ago
  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.
  - oefrha 6y ago
    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 https://caniuse.com/#feat=css-hyphens [2] https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Bro...
Matt-Gleich 6y ago
Awesome job! Super cool.
Santosh83 6y ago
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!
cosmojg 6y ago
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.
- deleted 6y ago
  [deleted]
- cglong 6y ago
  Nor does it work with Brave's built-in ad/tracker blocker.
self_awareness 6y ago
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 6y ago
  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.
  - thih9 6y ago
    > 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.
  - StrangeSound 6y ago
    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
scpedicini 6y ago
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.
clashmeifyoucan 6y ago
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 (> → &)
- thesephist 6y ago
  Yep, you're right -- I didn't realize Reddit encoded their string values as HTML in their JSON API. Fix rolling out! :) Thanks.
binarysneaker 6y ago
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.
jimnotgym 6y ago
I think you could find lots of stuff on Reddit that could go on page 3
jonplackett 6y ago
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.
zxter 6y ago
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 6y ago
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 6y ago
  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.
einpoklum 6y ago
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 :-)
onurcel 6y ago
Imagine that combined with this: https://onezero.medium.com/the-morning-paper-revisited-35b407822494 https://onezero.medium.com/the-morning-paper-revisited-35b40...
- Terretta 6y ago
  Yes, and a more natural subreddit to do it with: https://unim.press/#worldnews https://unim.press/#worldnews
jml7c5 6y ago
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 6y ago
  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.
praveen9920 6y ago
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.
prennert 6y ago
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 6y ago
  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 6y ago
    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.
moviecrazy 6y ago
Amazing! Any plans of adding reddit login / user home feed ?
mouzogu 6y ago
I like it. Although I wouldn't use justified text for headlines. Makes it really difficult to read, at least for me.
dmitripopov 6y ago
It's just awesome! I'm so tired of feed-like layouts, they are not for humans.
- aftergibson 6y ago
  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.
pteraspidomorph 6y ago
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 6y ago
  Good idea -- just added it, update rolling out now! Thanks.
  - pteraspidomorph 6y ago
    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 6y ago
If you want to check out another Sub-Reddit, open the console and type: app.subreddit = "nameofsubreddit"; app.fetch();
ozfive 6y ago
It says Sunday June 2020. It's Saturday isn't it?
- ProZsolt 6y ago
  Depends where are you in the world. In NZ it's already Sunday. EDIT: just checked the date is wrong.
  - thesephist 6y ago
    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 6y ago
      No problem. I had just woken up and looked at this so I was confused thinking did I sleep through Saturday?!?!?
egypturnash 6y ago
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.
kmstout 6y ago
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.
badrabbit 6y ago
Not loading on FF mobile
stevespang 6y ago
It never actually loads . . . it just says loading . . . .
vaibhavthevedi 6y ago
Woah. This is actually so good. Kinda give me a "digest" vibe of a subreddit.
JadeNB 6y ago
How is this related to https://news.ycombinator.com/item?id=23669650 https://news.ycombinator.com/item?id=23669650 ?
seesawtron 6y ago
Wouldn't it be cool if you could replace the "Lorem ipsum..." with first lines of the link?
meow81 6y ago
I can't explain why I love this so much. And I never read traditional newspapers, so I'm not nostalgic.

638 points by thesephist 6y ago

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

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

trishmapow2 6y ago
Had to disable my adblocker for it to connect to the Reddit API.
LukeShu 6y ago
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 6y ago
  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.
fireattack 6y ago
Weird, it works fine here: https://i.imgur.com/EGdEH2t.png https://i.imgur.com/EGdEH2t.png

mrtobo 6y ago

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

asimjalis 6y ago

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

thesephist 6y ago
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 6y ago
  I think using top comments to fill this up instead of using Loren ipsum would greatly improve it.

blackrock 6y ago

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 6y ago
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 6y ago
  same day ships... kinda super impressive

mellosouls 6y ago

This is superb, a very cool idea! Congrats.

thesephist 6y ago
Thanks! Always fun when a showerthought turns out to be something interesting for more than just me.
- mellosouls 6y ago
  Next up: the spinning newspaper headline entree... https://tvtropes.org/pmwiki/pmwiki.php/Main/SpinningPaper https://tvtropes.org/pmwiki/pmwiki.php/Main/SpinningPaper
- siavosh 6y ago
  Yeah very cool. I’d say it qualifies as even artistic in aesthetics and meaning. Bravo.

ipunchghosts 6y ago

Great work!

excalibur 6y ago

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 6y ago
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 6y ago
  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-stocks-plunge-508-amid-panicky-selling https://wsjshop.com/products/framed-reprint-crash-of-1987-st... "Black Monday Crash of 1987"
fortran77 6y ago
https://unim.press/#LOLHackerNews https://unim.press/#LOLHackerNews
- thesephist 6y ago
  Ah yes, now we come full circle.

donohoe 6y ago

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?

deleted 6y ago
[deleted]
sebiche 6y ago
I would much rather see someone experimenting than see the same Bootstrap-like landing page over and over again.

scienceman 6y ago

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

dillonmckay 6y ago

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

egfx 6y ago

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

thesephist 6y ago
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.

jay_kyburz 6y ago

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

sydd 6y ago

Just throws a CORS error in FF for me.

visarga 6y ago

It's still got lorem ipsum in its teeth.

Oeck 6y ago

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 6y ago
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 6y ago
  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

weswpg 6y ago

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

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

deleted 6y ago

[deleted]

subhashp 6y ago

Looks cool. Superb!

sixstringtheory 6y ago

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 6y ago
From the OP in another comment, it was used as a prototype: https://unim.press/#hn https://unim.press/#hn

dfabulich 6y ago

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 6y ago
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 6y ago
  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 6y ago
    > 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.

keyle 6y ago

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

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

ngz00 6y ago

I didn't know I wanted this

ComputerGuru 6y ago

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 6y ago
You're right. It works great with NotTheOnion for example: https://unim.press/#nottheonion https://unim.press/#nottheonion
- esperent 6y ago
  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 6y ago
    Actually the headlines are painful to look at - they should not be adjusted to the column’s width like they are.
thatoneuser 6y ago
I experienced the exact same thing. Wonder if it's a psychological hack or something?
TheKarateKid 6y ago
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.

fireattack 6y ago

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

lala26in 6y ago

well done sir.

andrei_says_ 6y ago

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.

dheera 6y ago
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.
rcar1046 6y ago
CSS word wrap
- steve_adams_86 6y ago
  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.
steve_adams_86 6y ago
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.
- oefrha 6y ago
  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 https://caniuse.com/#feat=css-hyphens [2] https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Browser_compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Bro...

Matt-Gleich 6y ago

Awesome job! Super cool.

Santosh83 6y ago

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!

cosmojg 6y ago

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.

deleted 6y ago
[deleted]
cglong 6y ago
Nor does it work with Brave's built-in ad/tracker blocker.

self_awareness 6y ago

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 6y ago
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.
- thih9 6y ago
  > 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.
- StrangeSound 6y ago
  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

scpedicini 6y ago

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.

clashmeifyoucan 6y ago

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

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

binarysneaker 6y ago

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.

jimnotgym 6y ago

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

jonplackett 6y ago

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.

zxter 6y ago

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 6y ago

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 6y ago
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.

einpoklum 6y ago

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

onurcel 6y ago

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

Terretta 6y ago
Yes, and a more natural subreddit to do it with: https://unim.press/#worldnews https://unim.press/#worldnews

jml7c5 6y ago

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 6y ago
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.

praveen9920 6y ago

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.

prennert 6y ago

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 6y ago
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 6y ago
  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.

moviecrazy 6y ago

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

mouzogu 6y ago

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

dmitripopov 6y ago

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

aftergibson 6y ago
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.

pteraspidomorph 6y ago

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 6y ago
Good idea -- just added it, update rolling out now! Thanks.
- pteraspidomorph 6y ago
  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 6y ago

If you want to check out another Sub-Reddit, open the console and type: app.subreddit = "nameofsubreddit"; app.fetch();

ozfive 6y ago

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

ProZsolt 6y ago
Depends where are you in the world. In NZ it's already Sunday. EDIT: just checked the date is wrong.
- thesephist 6y ago
  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 6y ago
    No problem. I had just woken up and looked at this so I was confused thinking did I sleep through Saturday?!?!?

egypturnash 6y ago

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.

kmstout 6y ago

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.

badrabbit 6y ago

Not loading on FF mobile

stevespang 6y ago

It never actually loads . . . it just says loading . . . .

vaibhavthevedi 6y ago

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

JadeNB 6y ago

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

seesawtron 6y ago

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

meow81 6y ago

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