KURE Community Curation App Update - Kurated Posts Page, Sorting Comments, and Remembering Vote Weights
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
Site
Index
- What is KURE?
- 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 - 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 - Roadmap
- 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.
- Discord
- Email:
[email protected]
- Site: thekure.net
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.
Suggestion:
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:
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!