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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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].
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.
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.
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.
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.
128 comments
[ 4.3 ms ] story [ 209 ms ] threadThe 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
https://i.imgur.com/EGdEH2t.png
edit: clarity
And did you already know the backend tech in order to speed up development?
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.
https://tvtropes.org/pmwiki/pmwiki.php/Main/SpinningPaper
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"
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?
But this is really great work! Great idea and really cool! Good work!
Regards, Peter @ Oeck.
Now do hackers news. It’ll be like the WSJ, a nice counterpart to this, which is a little more like US Weekly.
https://unim.press/#hn
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.
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.
And even then it is getting better, the modern CSS can do things Word can't (notably all small caps and old style figures).
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.
https://drafts.csswg.org/css-text-3/#hyphenation
https://bugs.chromium.org/p/chromium/issues/detail?id=676270
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.
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.
[1] https://en.wikipedia.org/wiki/Headline#Headlinese
Browsers don’t hyphenate, so avoid justified text on the web.
> 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...
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.
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.)
I know real newspapers do hyphenate, but the site would probably look a lot less like a newspaper without justified text.