Feature: Filtering articles by tags and returning to previous position!

The Problem

Hello readers of 2coffee.dev, it's been a quiet week, and this week I bring you two new features!

When reviewing past data, I realized that many people are curious and click on the tags area above the article title. I empathize with that behavior and I think you want to see what happens when you click there.

Usually, people think it filters the articles based on that tag, and I think the same. Assuming that behavior is valid, it creates another confusion for users, like how to go back, how to know if the articles are being filtered by tags, or simply how do I know that clicking there triggers the filtering feature...?

Therefore, I decided to add a feature to filter articles by tags. There is a list of tags, and if readers want to filter by a specific tag, they just need to click on that tag and a list of filtered articles will immediately appear.

Along with that is the "click to go back to the previous position" feature, which I believe is very useful for those who "forget" to open articles in a new browser tab. So without further ado, let me explain in detail to you, my dear readers.

Click to go back to the previous position

Infinite loading is a technique to load new content automatically without the need for users to do anything other than scrolling the page. At a certain point, for example, when reaching the end of the page, new content will be loaded automatically to avoid interrupting the user's experience. This technique is commonly used by social media platforms to minimize user interactions for receiving new data.

Typically, you will see some websites requiring users to click on next pages to navigate to new content. This approach has the advantage of being clear, as users know which page they are on and can quickly navigate to a known content page.

Previously, 2coffee also tried to require users to click on a button to go to the next page or load more articles, but it doesn't seem to be very effective as only a few people clicked on the button, and it invisibly hindered users from accessing more content (it's not a coincidence that Infinite loading is controversial for its addictive nature on social media :D), so I had to go back to the previous "infinite scroll" approach.

The experience of Infinite loading is probably not up for debate, with the only drawback being that if the page is accidentally refreshed, the reader has to scroll back to the previous position, which they may not even remember where it was. Hmm... am I trying to "chase" them away?

In fact, I have discovered this issue for a long time, but because I haven't seriously thought about a solution, everything occasionally falls into oblivion. Once again, I apologize to my readers, for those who have fallen into this annoying operation.

In the face of difficulty, there is wisdom. I noticed that many readers don't directly click on the article links, but they will "open the article in a new tab". Yes, I also do that because of my daily reading habit. When reading any other website, I will quickly open all the articles that interest me and then start reading them one by one. It seems that many people have the same preference as mine!

Going back, I still need to have a solution to handle this issue thoroughly, so I added a reminder for users to click on, which takes them to the last position of the article list. The position is determined by the last link they clicked when on the homepage, featured articles page, etc.

Initially, I planned to automatically scroll the page for users when they navigate from an article detail page back to the homepage. But as I worked on it, there were many issues to address, such as when users scroll too deep, the time to load pagination takes longer, and users cannot be patient to wait while they don't even know there is an automatic scrolling feature. Therefore, instead of automatically scrolling, let them take control. If they discover that they are at the last position -> a notification appears -> they click on it and the rest is taken care of.

It seemed simple, but the more I worked on it, the more issues arose. Previously, I was sure that only the homepage had the article list, but then the featured articles and NoCodes pages also have it. So I need to handle it if they have the "last position" on any page, then the notification will appear.

Finally, instead of storing the position information persistently in localStorage, sessionStorage seems to be more optimized. Because in the current session, users care more about their last position rather than the next completely new session. After a period of time, they may not remember anything.

Filtering articles by tag

At the beginning of the article list, you will see a long row of tags that I have listed here. If you find any of the tags interesting, you can click on it to filter the articles that have that tag.

Honestly, up to now, these tags are "hard-coded" in the interface. I consider this as an experimental feature, so completion time is the priority. After release, I will monitor readers' feedback on these tags to optimize them afterwards.

One more thing is that this feature is currently not available on the mobile interface, simply because I... haven't figured out the appropriate position for it. If it's simply minimized, it doesn't seem reasonable, as the mobile experience is still different from a larger screen. Therefore, I will improve this feature in the future.

Finally, thank you readers for following this article. Do you think you like any of the two features I just mentioned? Have you found any bugs? Because testing the features I built is something "omg", every programmer thinks they "code" without any "bugs"! Your attitude will be carefully considered, or if you have any feedback, please don't hesitate to leave a comment below the article. Thank you!