@dredmorbius@toot.catSo, have you ever said to yourself, "Self, I wish that I could read online news more like a newspaper? Well do I have your ticket!
Backstory: I frequently read news headlines/stories for a friend no longer able to read. Among the news sources is CNN, particularly its "lite" headlines page. Though I found myself frustrated that 1) there is no context other than the headline, 2) the headlines themselves are utterly unorganised, and 3) a huge portion of them are fluff (sport, entertainment, style, food, etc.). I was hoping I might be able to do better. I'd hinted at this a few months ago on HN: https://news.ycombinator.com/item?id=42535359.
One bright note is that CNN's URLs contain much of the organising information already, with section heading as well as the date (YYYY/MM/DD). Parsing those is a Simple Matter of Programming (SMOP). Organising them takes ... a bit more work, but what I ended up with my Mark I implementation was the "lite" headlines page organised by section, with the sections themselves ordered by my own interest in them. That alone was a vast improvement.
I still wanted to go further; in particular, I wanted to include lede 'graph context for stories. Which meant pulling down the related articles themselves. ...
... Which I've spent the past few days doing.
Mark II such as it is consists of a few shell scripts to pull, parse, and generate the website. What I've laid out is very much styled as a classic newspaper: all text, no images, and of course, no ads. It takes a few minutes to update the page, which I then view locally, or copy to my e-ink tablet. For those wondering, no, this is not publicly available. (Yet?)
What's curious for me is how much saner this presentation is than virtually any current online news site, most of which far more resemble picture galleries (with utterly gratuitous images) than information services. The ability, as with the days of print newspapers, to glean the main gist of a story without having to click through, and then ward off cookie, paywall, TOU, nag, autoplay video/audio, dickbars, etc., etc., provides a cognitive ease that's hard to express.
This is also giving me pause to consider why online news looks and acts the way it does, both in terms of UI/UX and content, to which I can only suggest that virtually all the incentives are perverse, on both the publisher and reader perspectives.
Screenshots show a general sense of the layout as well as detail views of parts of the page. There are still some layout glitches (I've been writing Flexbox CSS for approximately a week now 
), but I'm pretty happy with it, and much happier than with the original. Oh, and the design is remarkably responsive even without @media queries.
(There's more design work in the page itself, including internal cross-references and URL rewrites to the https://lite.cnn.com/ page itself, some of which I'm fairly chuffed about, but ... screenshots for now.)
Thoughts are now toward a news-page generator which incorporates a number of different sources, with some sense of categorisation and prioritisation applied to those. Still sorting how to proceed on that.
Oh, and preempting questions about why this particular site and its quality:
CNN is easily parseable and not paywalled. There area other options which fail one or both of these tests, e.g., NPR has nonsemantic URLs, the NY Times is parseable but paywalled, etc. I'm working with what is to hand but am more than open to better alternatives.
The HN link above includes stats on the section distribution itself, which ... is less than ideal, as well as the substantvity of much of what remains (dittos). F'rex, a couple of days ago, one of the three "Science" stories ... largely revolved around a spaced-out pop singeress. Not exactly what I'd call hard-hitting content. Three months on the relative percentage still hold. Aggregating those to larger groupings, the overall article breakdown as of this posting is:
- US: 1984 (29.94%)
- World: 1311 (19.79%)
- Business: 977 (14.74%) (Economy|Business|Markets|Tech|Cars|Investing|Media)
- Science: 557 (8.41%) (Science|Climate|Weather|Health)
- Trivia: 1796 (27.11%) (Travel|Food|Homes|Entertainment|Sport|Style|CNN)
- Total: Total: 6625
(For those summing totals: there's one "unclassified" story, an opinion piece.)
@dredmorbiusNB: Though I have your ticket I'm not entirely sure on sharing it just yet though ... inquiries are welcomed.
Mostly interested in thoughts and feedback.
@dredmorbiusFor the #webdevs in the audience: page layout uses Flexbox, grid is rows x columns. This leads to the inevitable Large Gaping Holes problem, though I did come up with the Clever Scheme, not to dye one's whiskers green, but to use a hidden "fill" div w/ height:100%; then sink that to the bottom of the z stack (z-index: -9999) and set opacity: 0%. Which I suppose is a large fan in a way. That at least keeps the article content pushed to the top of the sections themselves.
Filling those holes with ... something (Unix fortune quotes, vintage box ads, random CSS/SVG generated stuff) would be fun but is hardly necessary.
I'm contemplating using grid layout but haven't ventured there yet.
The story summary navigation (left of page) is set out in columns with a break-inside: avoid directive.
I'm pleased with the bolded first line and drop caps, though the latter are fragile.
The CNN logo is SVG from their site. Trying to implement that as a CSS data URL has stymied me to date.
@dredmorbiusFor those following my newspaper generator ...
... what sections / content would you like to see in a customised news source? What additional inputs might you add to that?
I'm thinking of fairly standard breakouts, say:
Top stories (first 1-2 items from any of a selected number of topics)
Local / Regional / National / World news, last roughly by continent (Americas, Africa, Asia, Australia/Pacific, Europe, sorry Antarctica).
Science, Climate, Weather, Environment.
Business, Finance, etc.
Cultural topics of interest.
Selected opinion writers.
Sections I'm not particularly interested in though others might be: Film / Pop Culture / Gossip / Style / Sport / Food / Home
Sections not usually covered that I'd like to see more of: Labour, Education, Rights/Inequality (The Grauniad actually does have that latter, along with "climate"), online rights (probably drawing from EFF, ACLU, and perhaps a few blogs).
Perhaps selected social feeds. A few aggregator sites (HN, for better or worse, selected subreddits (gag), maybe. A handful of quality blogs.
Challenges for tossing a lot of sources into the mix is dealing with duplicate stories, very different posting frequencies, and ranking/sorting by interest (I'm thinking of how I might rank/rate stories, which ... gets complicated).
I'm looking at a set of largely unencumbered sources. CNN is good in that regard though the story mix is quite weak. The Guardian, obvs. Probably BBC, NPR, PBS, CBC, and a few other national broadcasters / news services.
I'd also like to draw directly from quality sources on specific areas of expertise. E.g., EFF, possibly some think tanks or other informational organisations.
@dredmorbiusBOTI
Bayes classifier
@dredmorbius@tivasyk I'm admittedly biased, but agree. And thank you.
@dredmorbius I think that the biggest key in my reading news as a newspaper is that it actually needs to be available on paper. I know printer sizings make printing it as a newspaper in folding format rather ridiculous but having it printable as a magazine for sizing & layout would be practical, as it is, they don't readily show how many pages you'd get if you tried printing until after you've clicked each article & then gone into a print preview or similar, and then added up all of those pages.
@dredmorbius@BrahmaBelarusian This is where the e-ink tablet comes in.
I'm not printing out the page, but I can load it on the tablet, and with a suitably e-ink-oriented browser (#Einkbro), the reading experience is ... quite nice.
I've toyed with generating a PDF so that I have a paginated document I can read, but for now HTML + Einkbro works well.
Checking print preview from HTML just now ... yeah, that isn't really very friendly, though it's something I could work on. I'd prefer focusing on a print-output variant directly though, I think.
@dredmorbius My eyes are sensitive to LEDs and touchscreens of tablets are often a problem, as is how easily they break for me, which is why I tend to avoid ebooks.
*Episodic spinal derived neuropathy of the hands & feet is an extremely annoying medical issue.
@dredmorbius@BrahmaBelarusian That's valid. I was focusing more on the UI/UX itself.
Given that this is largely driven by me looking for ways to get current-ish news for someone who cannot read at all, and others who have major problems with tablets, I can sympathise.
The tablet I'm using is e-ink. That's reflective rather than emissive. There is a "frontlight" which can be enabled or disabled, but the tablet itself reads wonderfully under direct bright light, and sunlight in particular. It's also possible to disable some of the touch sensitivity so that, e.g., your finger won't change the display but a pen/stylus can. That still might not meet your specific case of course.
Though one additional plug: If you turn off the power the touchscreen functionality is disabled but the display continues to show the most recent image. A news page with very brief summaries (I can tune that, though somewhat clumsily, through the underlying CSS formatting) could give a reasonable top-stories summary. As it is, I'm presenting CNN's current top 100 headlines, which runs ~15 or so screens.
All that said: I'm thinking of how to best / sufficiently generate static / printable text output, and I've done quite a bit to date with Markdown and LaTeX (two digital text definition / formatting systems) in the past.
@dredmorbius Related, in the UI/UX - I tend to find the more independent the news/information platform, the less #Accessibilty it has overall.. with at least 3 I know of not even setting the font size up as an aspect ratio & thusly most of said pages/data on small screen smartphones aren't viewable at all.
This is why as soon as I can I'll be working on setting up my laptop again at a table/desk, to at least see if copying & pasting, to begin reformatting to paper printouts, because I do want to read these stories regularly again but need a realistic way to do.
@dbat@mastodon.gamedev.place@dredmorbius the ghost of spacer gifs 
@dredmorbius@dbat Pretty much, yep.