personalNews - your news feed. Chronologically sorted

Are you like me? Do you regularly watch the news? Your feed reader is always full? You like timelines because they are the easiest way for you to read the news? Then my little side project personalNews is probably something for you.

personaNews is news in a timeline. Sorted chronologically and with a blacklist to avoid messages that are not important to you.

If you still like to read your news at night, you will be happy about the night mode? Originally, I developed personalNews for the web panel of the Vivaldi browser - currently, I use personalNews exclusively on my smartphone. But first things first...

From iOS to Vivaldi #

A few years ago, I spent a long time looking for a news app that would give me a quick overview of what was happening. I had a timeline in mind like the ones used on Twitter or Facebook. This way, the headlines can be scanned quickly. If there is something interesting, the details can be read. The app should be structured as simply as possible. After testing several apps, I have been using Newsflash for quite a long time.

It then quickly turned out to be a disadvantage that I was limited to the feeds provided by that app. Just at that time I tested the Vivaldi browser, which - to my knowledge - is currently the only browser that offers the web panels.

Web panels are, to put it simply, mobile websites that can be opened next to the current website. For services like Twitter, Pocket or Hackernews, this is the perfect place to be quickly at hand. However, I quickly realised that this was also the perfect place for news feeds. For this reason, I started the development of personalNews. A small feed reader based on PHP.

The concept #

The basic concept was simple

• Bundling of different feeds and chronological output in a timeline
• Support of Atom and RSS
• Bundling of different feeds into several channels
• Configuration via JSON and processing via PHP
• No use of frameworks to keep loading times as short as possible.
• The few interactive elements should be implemented via vanilla Javascript.

The implementation #

I began to read out a first feed and process it via PHP. I chose the RSS feed of the Tagesschau as the feed. The first step was to break down the feed into individual elements and variables and enrich them with information that the feed itself did not provide. As an example, I would like to mention a human-readable date format for the publication of the individual news item, the icon of the source or the domain of the same. In this case www.tagesschau.de. I wanted the processing of the data to be as modular as possible so that I could quickly extend the programme. I decided to divide the processing of the feed into individual functions that are called one after the other.

The basic procedure is as follows:

• Load feed, decompose and store the data in a multi-dimensional array. A timestamp, which is used for chronological sorting, is created at this point from the publication date.
• The array is output in an HTML construct so that a sorted timeline is created.
• The texts of the messages are to be limited to a maximum character length. However, when the character length is reached, the current record should still be output in full.

Admittedly, at this point this process is still "over the top", but with the second feed at the latest, the chronological sorting becomes relevant. In addition, during the implementation, I already had various ideas for expanding the software. For example, a blacklist for unwanted messages.

The next step was to start reading in another feed to test the chronological sorting. I think it was the news feed from www.zeit.de.

Now it was time to implement another format - namely Atom. It turned out that Atom and RSS are quite similar. The easiest way to recognise the format seemed to me to check whether the individual messages are stored in a "channel" or an "entry". So I wrote a function that does exactly this check and hooked it in front of the decomposition of the feeds.

The result was now an HTML output of several feeds in a chronological sorting of the individual news items. Exactly the result I wanted. Great :)

The design #

Now began the part that was easy for me. Styling the timeline using CSS. In the first step, I created a mobile view so that personalNews could run in a Vivaldi web panel. I quickly came up with the idea of a dark mode.

It should be possible to switch between two different themes using Javascript. Both themes are configured in SCSS variables and converted to CSS using gulp. The dark mode switch itself sets a corresponding class on and writes this value into the localsStorage, as well as a PHP session, so that the last selected mode is available the next time the page is loaded.

It was time to release personalNews to the Vivaldi community. The feedback from the Vivaldi developers and the community was good, so I continued to develop the software. I also quickly put together a website showing the basic features of personalNews. It took about two hours to implement and you shouldn't look too closely at the code there... personalNews landing page

Grouping multiple feeds as a channel #

Since I wanted to bundle feeds by topic, I started to extend the code accordingly. The configuration should also be done via JSON. Several feeds are written here into an array, which serves here as a container for a channel. The selected channel should also be saved so that the timeline is loaded that was last active after personalNews was left or closed. Using Ajax, PHP code is triggered that loads the feeds and saves the currently selected channel in a session.

Blacklisting: Keywords and URL #

Since I am not a big football fan, the sports news is of little relevance to me. I therefore developed a PHP function that should perform the blacklisting of elements. The blacklist should also be configurable in the JSON file. The implementation is quite simple. All keywords in the JSON file are converted into an array and its contents are compared with the title and the text of the message. If there is a match, a blacklist flag is added to the feed array so that this message is skipped in the output. To reduce the loops over the messages, the title of the message and its text are combined into a string.

In order to exclude entire subdirectories or domains, the URL of the source is added to the title and the text. It turned out that the Tagesschau also uses URLs from www.sportschau.de in the feed. Other sources use the subdirectory /sport. So, to suppress all sports news, the keyword sport can be included - as a result, all sports news from sources with sport in the URL are suppressed in personalNews.

Becoming responsive #

personalNews already worked in web panels and on mobile devices, but on larger screens the news was difficult to read. With a simple CSS media query, I developed a two-column view of the news. However, the titles (the headlines) of the news are displayed on the left and the abbreviated texts on the right. This has the advantage that the headlines can be scanned quickly, and if interest is aroused, the texts can be read - namely on the right half of the screen.

Get personalNews #

You can find the personalNews on Github. There you can download all files. A demo version of the current version can be found here https://demo.saschadiercks.de/personalnews/

All files and documentation can be found on Github at https://github.com/saschadiercks/personalNews".

I hope personalNews will be as useful to you as it is to me. You can save personalNews on your homescreen or bookmark it. For me, personalNews has become one of the most used sites - and no, I don't use any other news app anymore.