New to Busy?

KURE Community Curation App Update - Mobile UX Improvements and Infinite Scroll to the Home and Kurated Pages

5 comments

krnel
78
4 months agoSteemit13 min read

Some highly valued improvements were made to the Home page, specifically for mobile users. Previously, smaller views, like mobile users, would have seen some squished up text overlapping each other with the two-column grid. This made for a very displeasing user experience (UX).

The changes I made were twofold: 1) Change the grid columns to single when the view shrinks small enough. But sometimes people have huge titles, and this was causing the author, community and date text to be pushed out of view. So the other change was 2) to limit the title display by adding an overflow and height limit.

The other improvement which is greatly significant, certainly for future use of the site when there is more data, is adding infinite scroll to the Home and Kurated pages to view the kurated content. Only a portion of data was being displayed previously. This makes older kurated posts non-visible. Adding pagination in the form of infinite scroll means all the data can be access by a user on the site. Wo0ot!

Thanks to the help from @helo who showed me some neglected lint "errors" in his submitted pull request. I have corrected them all. The code is 100% clean now.

More bugs and problems were fixed as well in this PR. Thanks to @thoughts-in-time as well for reporting many issues to me. The oddest bug was the repeating of YouTube videos in posts. Instead of seeing one video, 13 were displayed, which was bad for UX.

Any feedback or criticism is welcome and appreciated. I am looking to improve the app and your experience using it.

What do you want to see next?


Repository

https://github.com/KrNel/kure

Site

https://thekure.net/


Index

  1. What is KURE?
  2. What's new?
    2.1 Added Infinite Scroll to Home and Kurated pages
    2.2 Mobile UX Improvements
  3. Bugs, Tweaks and Other Fixes
    3.1 Improved Infinite Scroll separation of concerns
    3.2 Fixed grid layout text overflowing
    3.3 Fixed grid layout content not collapsing on mobile
    3.4 Fixed bug with YouTube videos being duplicated 13 times
    3.5 Fixed Steem content appending data on filter selection
    3.6 Changed comments font to be smaller than post
    3.7 Linting command to check for clean code
  4. Roadmap
  5. Contact

1. What is KURE?

Kindred United to Reward Everyone.

A Community Platform and Curation Network Remedy for Steem

Do you want to find content that other people really value, based on topics that interest you? How?

Upvotes don't do it, because so many upvotes come from autovoting, autobots, or curation trails. You don't know if a vote for content is done by a real person, or some automation. The content isn't being evaluated when it's automated.

Plus, you can upvote so many things, which can be unrelated.

Imagine a curation network where people are interacting through community groups to share and value content, and you can really see what they value globally through various communities that people organize and collaborate together to build.

KURE provides a network hub for people to create their own community groups for evaluating content to curate. It will also develop into communities to create posts within.

Create your own communities and have others join to contribute. Make up your own criteria. Manage who can add curation links to your community group. Anyone else can follow your community and engage.

My goal is to make content easier for everyone to find by all of us sharing the content we like trough communities. Others can find communities they are interested in and see what is being curated within that community to also support it with upvotes, resteems and comments.

Maybe you want to share what you value, and get others to see it or support it, but don't want to resteem it, or want more people to see it. On KURE, the community you create and those who are involved in it will popularize content you value and allow others to see it. Another way of thinking about it, is it's kind of like having a custom community feed, based on a community that engages in creating it, rather than just one person.

KURE empowers the Steem community to coordinate their curation efforts through building community networks of their own.


2. What's new

Video Demonstration

Mobile Improvements

Desktop Infinite Scroll


2.1 Added Infinite Scroll to Home and Kurated pages

The infinite scroll works like it does for the Steem data in pages Steem, Blog and Feed. As you scroll down the page, and before you hit the bottom, the page will fetch some more data to show you. If you you scroll quickly and hit the bottom before data returns, you will see a loading spinner.

Here you can see the scroll bar is larger and near the bottom of the page.

After scrolling a bit more, the page loads more data, keeping you at the same location, and the scroll bar position changes and gets smaller.

To add infinite scroll to a component, the window.addEventListener needs to have the scroll event added to componentDidMount. Don't forget to add the window.removeEventListener to componentWillUnmount.

When the scroll bar is used, the event calls the handleScroll function to check where the scroll is at. If it's at the last item in the data shown on the page, then the call for more data is made this.getPosts();

If you don't check if data is already being fetched, or if there are more posts to get, then the function will get called over and over when you reach the first end of page.

The fetching of posts is done via Redux. But first, the nextId to use as a basis for the subsequent lookups or pages, needs to be obtained. This is the last post shown nextPageId = posts[posts.length-1]._id;. With that, we know where to start to get new data.

Finally, a check for the need to look up more data next time the user scrolls down to the end of the page is made, with hasMore. If there is no more data, there is no more need to ever fetch data.


2.2 Mobile UX Improvements

As mentioned in the intro, the text to display the author name, community name, and the time ago a post was added to the community, were all being pushed out if the title was too long. Even when the title was short, when the view was being shrunk down, like for mobile views, the two column format was too small to show all the data properly. This has been fixed to greatly improve the UX for mobile users, and anyone who chooses to shrink their browser all the way if they are on a desktop.

Now, if the view is smaller, the title will be cut off and not push the meta data out of view. This is the limit of size for desktop shrinking the view.

If the view is smaller, like on a mobile, then the two grid layout will become a one-grid column, with a larger image to show, as well as more space for the meta data.

To fix the two-column grid issue, I had to add a <Grid stackable> for the two columns to stack when the view got too small.

The title taking up too much space was solved by adding another div <div className='titleContent'> and the CSS for a max-height in block display.

To get the text to disappear, the parent div recentTitle has two additional CSS attributes added, overflow: hidden; and white-space: normal;.


3. Bug Fixes


3.1 Improved Infinite Scroll separation of concerns

The already working Steem-based content infinite scroll functionality was working, but I wanted to try to merge the functionality in one place, maybe at some time later to not repeat the code. This also helped me see how to best create the infinite scrolling for the Home and Kurated pages which were not done at the time.

I moved as much of the infinite scroll calculations out of the Posts component used for the Steem, Feed and Blog pages. Now it's reduced to only calculating the tag and selected filter for searching for Steem posts, or determining which page is selected.

The start_author and start_permlink has been removed from the initial query creation, and left for the Redux action creator to determine.

In the Redux action creator, the start_author and start_permlink are both set to undefined, which is what is required for initial post fetching from the Steem blockchain. If you have an empty string, it will look for that.

If there are already posts posts.length and if the more 'action' is sent to get more data, then set the start_author and start_permlink to the be the last author and permlink from the previous data fetch. This is set for the next fetch through the const lastPost = newPosts[newPosts.length - 1].


3.2 Fixed grid layout text overflowing

As mentioned above, there was an issue with text overflowing out of the content boxes for the Home and Kurated page in the grid view/layout. Titles were too long and were pushing out the other data. This was bad for UX, as you can't see or click links to get elsewhere, such as to the user page, or the community page, etc.

The title taking up too much space was solved by adding another div <div className='titleContent'> and the CSS for a max-height in block display.

To get the text to disappear, the parent div recentTitle has two additional CSS attributes added, overflow: hidden; and white-space: normal;.


3.3 Fixed grid layout content not collapsing on mobile

The grid layout/view was by default 2 columns, and I thought it was collapsing to one like I had done for the Manage and Communities page. But I forgot to add a necessary element to make the two-columns collapse or stack into a single one for display on the page.

To fix the two-column grid issue, I had to add a <Grid stackable> for the two columns to stack when the view got too small.


3.4 Fixed bug with YouTube videos being duplicated 13 times

This was brought to my attention by @thoughts-in-time. He was curating for @informationwar and a post he added to the community had a YouTube video. But, instead of only seeing the video show up once, the video was showing 13 times!

This was bad for UX. What a bug!

It was coming from a change I made to replace deprecated code used in the Steemit and Busy body inspection code to find images, iframes, and other elements to grab. I had an error or warning in the past, and found out the Array forEach code was the issue. When I replaced it with the more uptodate version, that error went away. But apparently the way the code worked it didn't like dealing with iframe videos after.

The new Array.prototype.forEach.call(node.childNodes, child => { was grabbing the iframe 13 times instead of 1. The easy for for me to not show 13 YouTube videos was to store the url, and if the next iframe url was the same as the prevUrl, to ignore it with a return.


3.5 Fixed Steem content appending data on filter selection

After I changed the infinite scroll by moving more of it to Redux, a bug crept up which was adding posts to the previous posts data, rather than getting completely new data to display.

Tags and filter section was not working, because you still saw the previous data, and then under that, you had the new data. This was no good. Again, thanks to @thoughts-in-time for bringing this to my attention.

When I was changing things, I forgot to keep a necessary part, what I called the action. Without that, which would pass more to add data to existing data fetches, all data fetches were treated as adding data, rather than getting data from scratch.

The solution was simply adding action to the dispatch call:


3.6 Changed comments font to be smaller than post

I found that the comments font-size being the same size as the posts, was too big. So I dropped the font down smaller to make it take up less space and look more like the other frontends, like Steemit and Busy.


3.7 Linting command to check for clean code

Thanks to help from @helo, there is a new run command for npm to check the linting of the server and client apps.

On the server side: "lint": "eslint ./server",

On the client side: lint": "eslint ./src",

To run lint checking, do npm run lint from the root or the client folder. Then you will see if any files fail lint.


4. Pull Request / Latest Commits

PR 15


5. Roadmap

I got the infinite scroll added to the Home and Kurated pages. The Communities page will need to be done. And some sorting options would be good to have. But maybe I'll tackle more of the Steem front end part of the site to increase the appeal to use it. Delete and edit of posts and comments would be good to have done.

Working on:

  • Improved UI/UX, landing page, code splitting, PRPL
  • Liking Kurated post submissions in communities
  • Rating Kurated post submissions in communities
  • Edit comments
  • Delete comments
  • Tweak comments (limit to 20, show more option, max nested depth)
  • Implement PRPL Pattern for better performance
  • Viewing comments in their own page view
  • Adding infinite scroll to the Communities pages
  • Adding sort functions to the Home, Communities and Kurated pages
  • About page
  • Dark skin for the site
  • Selecting posts to vote at a later time
  • Grid and List layout for Steem, Blog, and Feed pages
  • Improve Blog page, with rep, description and location
  • Add a settings page
  • Add nsfw filtering
  • Add progressive image loading

6. Contact

If you want to contact me, you can reach me on Discord at https://discord.gg/ApUp4jJ, or email at [email protected]. I'm not really on steem.chat, but I think I get emails if you send me a message.

Contributions can be submitted as pull requests to https://github.com/KrNel/kure


Thank you for your time, attention and support. I appreciate it. Every vote matters.

Peace.


Posted from KURE!

Comments

Sort byBest