The Webpage, an online RSS reader and news aggregator, styled like a newspaper | Hacker News Reader

The Webpage, an online RSS reader and news aggregator, styled like a newspaper

news.russellsaw.io

405 pointsDarkCrusader268 comments

Hello! author here, i just wanted to address a few things i've seen in the comments:

* i absolutely built this for fun, it's an idea i had late at night and needed to scratch that itch

* the scolling sucks, laying out arbitrarily sized articles into a given layout is a challenge, and the scrolling hides a lot of the sins. I'm going to switch to truncating articles this evening, and linking to a single article page.

* thanks for the suggestions on hyphenation, i've been playing with a few different approaches but none have worked with all the browsers i tried, i'll give a few suggestions a go this evening!

I think it’s awesome :)

Wow, what a great idea, and largely fantastic implementation! It really looks good.

Do RSS feeds have "just" text that you pull to get the article content, or are you parsing the webpage somehow? If so, how?

I've done something slightly (well, about 1% :-) similar for the "Popular" page on pinboard[0]. It used to have a line or two from the start of the article, using a webpage content extractor that got turned off, so I can't use it anymore.

One arguably nice thing about mine is that it's updated once a day, and it remembers what you've read yesterday, so new articles are marked, and you can flip a switch to see the new stuff first.

Thanks!

[0] https://pbpb.cls.cloud

RSS feeds are a bit of a mess, but only due to each publisher's implementation being slightly different. the vast majority only send a headline and summary on the RSS feed, i then have to go and scrape and extract the article on the backend to populate the content, which is it's own challenge and i've not gotten it to work for a few sites yet.

This is also running in a semi-serverless container in Google Cloud Run (only costs me £1 a month!) so fetching and re-caching all of that when a new container is scheduled is painful, however it seems like state in the container is persisted longer than i initially thought, so it's good enough for now.

Cool, thanks! I'm doing a lot with AWS serverless, it's a great way to go (and similarly cheap). Any chance you could open-source your scraping code?

You might have come across this already, but we maintain a collection of article extraction rules for various sites here https://github.com/fivefilters/ftr-site-config - it was adapted from a database maintained by Instapaper in its early days and today has contributions mainly from users and developers of an open source Instapaper/Pocket alternative called Wallabag: https://github.com/wallabag/wallabag

Also usable with a free version of Full-Text RSS available here: https://bitbucket.org/fivefilters/full-text-rss/src/master/

This looks really interesting! I've been building an RSS reader for myself in my free time, and this will be really useful. I was wondering if you know anything about the legal implications around scraping full-content like this and packaging it up? I was planning to do it with some fun added-on features, but was worried it would be considered copy-right infringement (since I would basically be re-hosting other site's content without permission). And some websites outright ban this kind of usage in the TOS for their RSS feeds. For example, from the Washington Post[1]

> a. For any article, you may not display more text than we provide in the RSS feed.

[1]: https://www.washingtonpost.com/rss-terms-of-service/2012/01/...

AWESOME! Thanks so much, I'll look into that. I think it was the Instapaper service I was using back in the day.

Love to see experiments like this with web articles. Have you thought about making it more print focused? It's the kind of layout I'd want to print out and read offline.

I've experimented a little with trying to create more readable, printable layouts of web articles and feeds on https://www.fivefilters.org [1],[2] but yours has a much more traditional newspaper look which could look great in print.

[1] Simple Print for single articles https://pdf.fivefilters.org/simple-print/

[2] PDF from feed: https://www.youtube.com/watch?v=854Csokl3QA

Have you tried using a CSS "masonry" approach to address the varying sizes of the articles?

For example: https://w3bits.com/css-masonry/

Also, check out Isotope. Seems to handle different-sized "cells" fairly neatly - https://isotope.metafizzy.co/layout-modes.html

CSS columns?

BTW, you can do very complex transforms with XSLT on RSS https://www.bennadel.com/rss also take a look on feedburner

This is exactly what I've been looking for. Thanks! Other than scrolling it looks really good.

Do you use any framework for the frontend? If so, could you open source it?

Thanks! I’m glad you like it

The CSS framework i use is https://bulma.io and the server side rendering is all done with Go’s html/template library.

I’m definitely going to open source it but I’m too ashamed of the code right now, this evening is going to be cleaning and ‘production using’ the code

This is awesome!

Now if you could just get an AI to rewrite the content to bring it up to the old (roughly pre-"USA Today") journalistic standards, it would be perfect!

But that's probably too much to ask.

I second this, reminds me of this:

https://www.reddit.com/r/reddit.com/comments/c13uq/i_just_fo...

> All votes shall be counted by honest and stalwart men of virtue

Hah, had a good laugh out of this. Thanks for sharing.

Love it! It's great to see web design finally start to scale to large and wide screens. I hope this is the start of a movement.

Have you seen pressreader.com's layout? eg. https://thewashingtonpost.pressreader.com/the-washington-pos...

They have some really nice ideas, implemented well. See for example how the articles click to expand. And the horizontal scrolling there works so well with the columns!

I showed this to my old father and he laughed for a long 1 minute. It was really an unexpected surprise.

if it's supposed to be laid out like a newspaper shouldn't it use column-count etc. https://www.smashingmagazine.com/2019/01/css-multiple-column...

It seemed like everything was flex? maybe I'm wrong, and I missed it somewhere?

@arussellsaw - might want to have a closer look at this [0] for some inspiration

[0] https://wwweeebbb.com/

This is awesome! Love the idea, do you intend to make this a bigger project?

I loved the NYTimes "Times Reader", circa 2008, when it was released.

https://archive.nytimes.com/www.nytimes.com/packages/html/fi...

You might want to look into it for design inspiration since the NYTimes solved for a lot of design problems I'm sure you've had to tackle/consider.

Great work btw.

I love the scrolling! My first thought was "finally a way to read the whole rss feed without the need to click on a link". I'd keep it that way.

Also, I think that the scrolling feature is one of the most innovative things I've seen in many years on how to format articles on the web. It makes a lot of sense to be honest IMH.

> I'm going to switch to truncating articles this evening, and linking to a single article page.

Ah, much better now.

Paper newspapers do this in spades, so this behavior shouldn’t surprise most people.

I hate to say his, but you might have to turn on justification to make it look more paper-like. In doing so you can get rid of many of the vertical separator lines (but you might need to be more conservative with max columns)

The content is wrapping at every character, rather than on word boundaries or with hyphenation.

The relevant styles:

  .subcol {
    hyphens: auto;
    word-break: break-all;
  }

`word-break: break-all` should be replaced with `overflow-wrap: break-word`. Those two properties are quite subtle in their meaning and interactions.

Also toss in for full effect:

    text-align: justify;
    -webkit-hyphens: auto; /* Safari */

Looks cool, just one suggestion about the photos: that effect looks like the dithering of a dot matrix printer and not like a newspaper photo, for that I would go with this kind of effect: https://i.pinimg.com/474x/9d/76/f0/9d76f0c303e7ea8352d10465d... - I think it's called a "screening" effect?

I like this.

https://en.wikipedia.org/wiki/Halftone

They used to generate this by holding a "screen" up to create the grid.

I remember the Wall Street Journal's tablet apps having a layout just like this, so it resembled their broadsheet look. It was a pleasure to read, as clicking on individual stories took you to the full story, still laid out like a newspaper, and not to their website inside of a web wrapper view.

For whatever reason, they changed that and now the app looks like their website, except with more ads and tracking.

You might have to be a subscriber to access it, but I suggest taking a look at the L.A. Times enewspaper for inspiration. It’s like a full color scan of the newspaper. If you click in an article, you are taken to a separate page to read the article in full.

https://enewspaper.latimes.com/infinity/latimes/default.aspx...

Wow. clearly designed only for touch screens. Needing to click and drag the mouse to pan on a desktop is absolutely terrible.

Could work nicely with that eink project that was showing the NY Times full size. https://news.ycombinator.com/item?id=22831323

Not sure if I’d use it with the scrolling, since this format is ill suited for smaller screens, but I love this idea!

One more suggestion for you to consider: a variant where each article is a link that takes the reader to a separate article page (like a normal web page) may be good. The use case is to have this print layout to skim through headlines and snippets, and dig into an article by itself if one wants to read more (and the article doesn’t fit within the non-scrolling area).

I'm interested in the concept, but I think the execution needs some improvement to be comfortable. For instance, no actual online newspaper right now has internal scrollbars; there are probably reasons for this.

Online newspapers look something like print newspapers, but the most successful designs are successful at adapting the design for the particular affordances of the screen. (Granted, internal scrollbars ARE something you can't do in print, unique to the screen! They just aren't, I think, something anyone wants...)

This is really cool! It would be nice to see h tags used for article headings. That way people using assistive technology can navigate around faster.

And this may be a good opportunity to use the article tag.

Newspapers have margins!

This seriously needs some paragraph breaks in the articles. Every article reads like one huge sentence.

I think print newspapers do this with a slight indent to every paragraph.

"RSS Feeds for the 20th Century" feels pretty dated. I want to see "RSS Feeds for the 19th Century".

Love the idea. Really hard to navigate and read, because content ends up in little boxes. But I love it as a bit of fun!

I do not hate it despite its limitations

I got caught out by the nested scrolling

Pretty sure it violates copyright of the publishers.

Given that Google is not allowed to show more than the headline and a few words in their search results in the EU, I suspect this is just plain illegal.

This is sad. We should have better laws. Hope you don't get sued.

EDIT: Please let me know if my understanding is incorrect.

Woooooooooooooooooow. I could be downvoted, but I can't say nothing other than that. WELL DONE !

If you can't say anything nice don't say anything at all :)

That said; I've been on HN long enough where news sites (some of which I worked at) took this approach on some products where they directly took print-styles and applied them digitally. They were vocally criticized (rightly so) for completely mis-understanding the new digital medium.

This is a fun and interesting project - buts its entirely unusable and provides a very poor reading experience.

Among many other points, it misses the point that the full-page physical newspaper was entirely scannable in large areas. This is the opposite of that.

Kudos to the developer trying something for fun but I hope this isn't a serious approach to reading news.

The L.A. Times has a really polished version of this, which I sometimes prefer over the regular articles. It has the effect of a full color scan of the entire newspaper. If you click in an article, you are taken to a standalone page for reading. You might have to be a subscriber to access it.

> Kudos to the developer trying something for fun but I hope this isn't a serious approach to reading news.

Author literally said he did this for fun.

Reminds me of this old Mac and iPad app: https://acrylicapps.com/pulp/

Would love to be able to use a personalizable version of this

Funny how this is a good settling of information presentation .. most websites are low signal high noise (visuals count as noise for me now, I'm old).

I love it. Instant fan. Different experience than usual.

Unfortunately images look like crap, due to them being way too low resolution.

Probably because the images used are dithered and upscaled from small original images.

I've always loved the idea of having a personally-curated newspaper laid out in the traditional way. This could be fun. Thanks for sharing.

Feels great not having the usual information overload that websites have. Lovely project well done!

Hi, this was fantastic but it doens't work anymore. Any reason why? Victim of success ?

This looks so much like an e-paper but only better and way easier to navigate!

What, no comics?

Or the crosswords section?

Good work. Scrolling was tricky in mobile.

Phone or tablet?

Interesting, but hard to read.

My thoughts exactly. For these particular reasons IMHO:

- the nested scrolling (it would be much cooler if you could come up with an algorithm that lays out the page like real print newspapers do. Or truncate and display a read more link/expander)

- too many separator "lines" (i would reduce the quantity of lines and reduce the "color weight" of the ones that remain)

- remove the YAAS.CAT link. ? =)

It takes a lot of work, in terms of text content editing, typography and layout to make a newspaper actually readable. It is a lot of work, and takes a lot of very specialised skill.

This page does none of that, and it makes something that is otherwise very invisible suddenly come into stark contrast when it is missing.

Offline already?

A scroll trap

I wonder, can somebody turn it into an XSL stylesheet?

Reply on news.ycombinator.com