tom-james-watson / detoxed.news

The important news, without the toxicity.

detoxed.news

The important news, without the toxicity.

The Why

I try stay informed about current events and important world affairs, but I find the modern always-on, always-dramatic news cycle both tiring and anxiety-inducing. The news industry has an incentive to keep readers coming back - the more time they spend on their sites, the more ad-revenue they can generate. This tends to lead to addiction-forming UX, clickbait, over-dramatization and all-round information overload for the user.

Most news I end up reading ends up being either uninformative speculation or unnecessary tweeted-to-the-minute drama, neither of which are truly worth my time and energy.

What I would like is to stay informed, but in the least draining way possible.

The How

A fantastic source for a balanced, low-drama summary of news is the Wikipedia Current Events Portal. It is a user-curated list of current events per day, with items being tagged under a series of nested categories.

https://detoxed.news scrapes this page, collating the entries and associating them with their categories, which are treated as "tags", and the linked source article. Whilst the Current Events Portal is informative, it's extremely text-heavy and a bit of a chore to read. https://detoxed.news attempts to present this same information in a more user-friendly and digestable way.

The Tech

The site is a static site built using 11ty. A build dynamically scrapes the current events portal and generates JSON which is then used to compile the index.html file.

The site is hosted on Cloudflare Pages and a new build is kicked off via a webhook that is called from a cronjob every four hours. This means the content of the site will keep in sync with the content of the current events portal without any kind of manual intervention ever being necessary.

Development

Install dependencies:

npm i

Run in development mode, with live reloading:

npm run dev

Run tests:

npm t

detoxed.news's Issues

Make a text only version

It would be simple enough to make a version that doesn't load the open graph images. We could render it at https://detoxed.news/text or something like that and add a link maybe in the footer.

Dark Mode

Light text on dark background, triggered by browser dark setting. Would also be optimal to have some button to toggle by the user.

Some news outlet names missing in text

I noticed two stories today which read like this:

"The removes all its journalists from Russia, fearing arrests due to the recent changes"

and

"A report from the said that the United Nations told its employees in a communications guidance"

The full text on the Wikipedia Portal should read, respectively:

"The New York Times removes all its journalists from Russia, fearing arrests due to the recent changes"

and

"A report from the Irish Times said that the United Nations told its employees in a communications guidance"

Other stories which mention ABC news, for example, don't seem to have this bug. Maybe there's something in the parsing of the page that needs looked at?

Make inline entry links only appear when you hover over entry in desktop

This makes the reading experience nicer as you don't get a constant soup of links.

This doesn't really translate to mobile - needs more thought. Maybe just don't show the links on mobile?

RSS Feed

Would it be possible to include an RSS feed with the page so that it could be used with newsreader apps?

Detoxed seems to be stuck on July 30

Not sure where the problem is but I have opened the site on multiple browsers and the last update is from July 30

Should use actual content of tags, not title

e.g. <a href="/wiki/Airstrike" title="Airstrike">airstrikes</a> is ending up as Airstrike in text.

Consider maintaining inline wikipedia links of entries

We should consider maintaining the inline wikipedia links within each entry.

We would want the link style to be a subtle as possible. The wikipedia-style high-contrast blue links make reading the text harder.

Maybe either a subtle underline or a very subtle font colour difference.

Links not immediately visible on mobile

Love this site. Thank you for making it!

I'm using firefox for android, so maybe this is just my problem, but when visiting the site on mobile it's not easy to tell what is a link and what is just text.

I really love how it works on desktop, where you hover the mouse over a paragraph and it shows the links. But on mobile you have to long touch the paragraph, and then the links show up.

Maybe something like this could help? https://css-tricks.com/styling-based-on-scroll-position/ Or just make links always visible when the viewport is smaller than a certain size?