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.
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.
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].
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.
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.
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.)
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?
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
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:
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).
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.
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 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.
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.
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.
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.
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.)
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.
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.
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.
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.
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.
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
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.
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.
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.
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"
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.
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.
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 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 :)
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.