KURE Community Curation App Update - Kurated Posts Page, Sorting Comments, and Remembering Vote WeightssteemCreated with Sketch.

in #utopian-io5 years ago (edited)

An important page was added this week: Kurated posts. This allows all curated and submitted posts made to communities to be viewed in one place. Other pages would only show a small number of posts, so there needed to be a place to go look at all posts in order to see what everyone else is curating. More functionality will be added in the future to facilitate browsing for curated posts, such as sorting and filtering of content. This will greatly improve the interactivity of users to find and curate across communities, and to garner support for posts already curated, making this page a greatly significant and highly valuable addition to the site going forward.

Another highly valued feature added to the Steem part of the site is for comments, specifically the sorting of comments. Comments be be viewed by new, old, reputation and payout amount. This greatly improves the ability to find comments. If you want to see the order that comments were posted in, the dates will sort them for a chronological view. Likewise, seeing which comment has gained the most rewards can be done with the payout selection. Not being stuck with just one comment view order is a highly significant feature to have implemented for user interactivity in the comments section, especially when a post has so many.

The last major addition this week has been the remembering of vote weighs. This is something that I highly value on Steemit, and is missing from Busy.org. When you vote, your vote weight is used for the next vote you're going to make, showing it on the vote slider. If you change it before voting, the new value is shown for you next time, etc. I really like having this on Steemit. A greatly significant UX feature to have.

Fixes and improvements were made here and there, with one being quite significant and valuable to commenting: displaying HTML in the comment preview. Instead of seeing HTML tags int he preview, now you see what the comment is supposed to look like before you post it.

This week seemed like I wasted a lot of time trying to get something working that wouldn't work. I tried to get posting of main content working on the site via Steem Connect. But it just wouldn't happen. There is some bizarre error about The token has invalid role, even though the token is valid as I can comment and upvote. I am awaiting input from @fabien from the Steem Connect github to resolve the issue.

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 Kurated posts page
    2.2 Added sorting of comments by new, old, reputation and payout
    2.3 Added remembering previous vote weight value
    2.4 Added icons to the dropdown menu on user avatar
  3. Bugs, Tweaks and Other Fixes
    3.1 Separated the Redux for Steem actions
    3.2 Fixed the vote slider's bottom part being overflow: hidden
    3.3 Fixed bug with images crashing page in some cases
    3.4 Fixed bug with single tag posts crashing page
    3.5 Fixed comment preview not rendering html
  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


2.1 Added Kurated posts page

With more posts to hopefully get added to the site as it gets used more, Kurated is now an option in the menu.

As more people add posts to communities, the Home and Communities page can only show so many curated posts. The Kurated posts page was greatly required to bring a higher UX value experience to users looking to see what has been curated that they might also value.

The page shows the most recent posts as a grid layout view by default. When clicking on the View icon, the view will toggle to the list layout view and back to the grid view as desired.

To get the data, the getPosts function is called. The array of posts it returns is then added to the React state, as is the updated isLoading set to false to indicate data retrieval is completed and the loading spinner can be removed to instead show the data.

When the data is shown, there is a toggle option to toggle the view layout and how the post data is displayed. When the View icon is clicked, the showGrid state is change to be the opposite of what it was. True means to show the grid, and false means to show the list.

Finally, the component renders the appropriate grid or list component. If showGrid is true, then RecentPostsGrid is chosen. If not, the RecentPostsList component is chosen. Then the component chosen is sent to return for display on the website.


2.2 Added sorting of comments by new, old, reputation and payout

Comments can now be sorted, which depending on the user, will add great significance to their user experience. if they want to read comments as they came in chronologically, they can choose the new or old sort options. If they want to read comments that have the most rewards allocated, they can choose the payout selection. Interested in who has the highest reputation? Chose the reputation option.

The sort by is done by New by default. Additionally you can select Old, Reputation or Payout.

New

Reputation

Payout

When the option is chosen, the specific switch case will match and sort the comments by the requested sort type.

New and Old will sort comments by the created field from the Steem blockchain. Each comments is compared to the previous and reordered. The reputation looks at the author_reputation number, and the payout looks at the net_rshares a voter has applied to the post in question. I could not get votes sorting to work yet, so I will have to come back to that.


2.3 Added remembering previous vote weight value

When voting, it's nice to have your previous vote weight remembered, as we often use the same vote on several successive posts. And if not, we usually stay in the same general area of vote weight percentage so at least its less moving of the slider when you need to change it slightly.

For me, this is a such a highly valued function to have on a Steem frontend that improves my user experience greatly. I have read others state similarly in the past.

Two functions are called to set and get the vote weight which is stored in localStorage. When the vote weight is called, it gets the value from localStorage. And when the vote is finally sent, a new vote weight is set for the localStorage.

When getting the vote slider, it's possible a vote has never been applied and saved with the feature existing. If that's the case, there will be no saved value in localStorage, and it will be null. The vote weight of 100% is set int he vote slide rint hat case.

When a vote is finally sent via the vote slider, it's time to save that value for the next vote to be applied in the future. Before updating state, the vote weight is saved to the localStorage.


2.4 Added icons to the dropdown menu on user avatar

The final addition to the site this week comes in the form of some icons added to the dropdown menu found by clicking on the user avatar. This doens't change much on how the site is used, but it's a nice little splash of eye candy on the menu which was otherwise a bit too dull and unfriendly. Now it has some extra pizzaz.


3. Bug Fixes


3.1 Separated the Redux for Steem actions

Some coding improvements which bring some potential slight performance enhancement was done by breaking down the Steem content Redux actions and reducers and putting them into their own files. Previously I had all the Steem content Redux functionality in one file, with all the data under one object.

but each page doesn't need all the data in the object. So it was better to separate the functionality into separate actions and reducers that each held their own data separately. I went from 1 file in to 7 for each folder (actions and reducers).


3.2 Fixed the vote slider's bottom part being overflow: hidden

A troubling bug crept up when I moved around the vote functionality: the vote slider's bottom part was cut off by the container it was in. This was due to the overflow ellipsis functionality I added for the post description in previous development. The container was set to overflow: hidden. So instead of the slider showing above the container, it was being but off from the hidden option.

I had to properly set the ellipsis content and overflow hidden. By adding another div to contain the description within, I could then set the overflow:hidden to not affect the PostActions component where the vote slider was.

At first this wasn't working, and the text was running off, but the vote slider wasn't hidden anymore. It took a while, but the solution to get the text to cut off with ellipsis properly was to set a min-width on the parent container div. That's all it took to solve my problem. It eluded me for a while.


3.3 Fixed bug with images crashing page in some cases

Another trouble bug also crept up with some posts. It was so bad it caused the page to crash. I was trying to get images when there weren't any in an array of images. Thus, trying to access non-existent data crashed the app.

I change the code to just use the first image found in a post, and if there was none, to use the avatar. That way there would always be an image to show no matter what.


3.4 Fixed bug with single tag posts crashing page

Similar to the above, sometimes a post only had one tag, which was the post.category. This meant there were no extra tags in the json_metadata. So when I was trying to display the tag from json_metadata, there was none to go get, and it was crashing the page.

The solution was if the tags array was empty because there were no tags in json_metadata, then I would set tags to the single post.category instead. Problem solved.


3.5 Fixed comment preview not rendering html

Writing comments previewed what was being written, but only the text and markdown was being shown properly. If HTMl was input, then it would show HTML tags, and not the HTMl rendering like it does on Steemit or Busy. Instead of using a basic markdown plugin, I used the PostBody rendering of Steem content which shows the HTML as properly formatted content. Now comments being written show the correct preview, fully converting HTML into visible styling so you can really see what your comment will look like when it's posted.


4. Pull Request / Latest Commits

PR 12


5. Roadmap

As mentioned at the beginning, the development of the posting main Steem content got slowed down as I have a Steem Connect error that doesn't make any sense to me. Once I get that resolved, the posting of content will be working. I got other things completed from the previous roadmap, being sorting of comments and the Kurated posts page. More work to be done this week.

Working on:

  • Posting content to Steem (not just curation post submissions)
  • Comment edit, delete, and other tweaks
  • Improved UI/UX, landing page, code splitting, PRPL
  • Posts submitted to communities page
  • Liking and rating submissions
  • About page

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.

Sort:  
  • Great article, with loads of images, code samples and explanation of coding choices. Above the call of duty.
  • Great commit messages and comments in the code.
  • I like the section that highlights the importance of the changes.

Suggestion:

  • I noticed the pictures on the site took a long time to load. While you're pulling them from their original sources, it does look like many of them today were oversized! This picture weighs a wooping 1.7MB for some balls of yarn in hi-def .jpg file:

    Your community might benefit in not having to download oversized images for previews if you only displayed a pre-processed scaled down thumbnail versions of them.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Oh snap, that's a good point. They seemed to download pretty quick to me. I'll have to revise the source of images and try to make them smaller to make for a better UX. Thanks for pointing that out, offering suggestions to improve, and for the review :)

Thank you for your review, @helo! Keep up the good work!

Hi @krnel!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 7.320 which ranks you at #66 across all Steem accounts.
Your rank has not changed in the last three days.

In our last Algorithmic Curation Round, consisting of 211 contributions, your post is ranked at #1. Congratulations!

Evaluation of your UA score:
  • Your follower network is great!
  • The readers appreciate your great work!
  • Good user engagement!

Feel free to join our @steem-ua Discord server

Hey, @krnel!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.26
TRX 0.11
JST 0.033
BTC 64111.27
ETH 3065.56
USDT 1.00
SBD 4.00