STEEMASK UPDATE: Homepage feeds Available
Repository
https://github.com/profchydon/steemask
What is the project about?
SteemAsk is a question and answer website that is been built to allow users ask both steem and non-steem related question while getting reply from other members of the community. Many steemit users especially newbies need guidance and most times they wish can get access to other members and ask question to help them be successful on steemit. SteemAsk provides the platform for this, and users can also search for questions to get quick answers. SteemAsk is the stackoverflow of the steem blockchain.
How does it work?
SteemAsk works exactly like every other question and answer forum, but on SteemAsk:
Users can upvote questions and answers they find really helpful.
Users can check payout for their and any other account
Users can trade Steem and SBD in the marketplace.
Previous Update
New Features
- Custom homepage feeds now available on homepage: The homepage has been tailored to only display steemask related feeds, but for the purpose of this post, since there are little or no steemask posts on the steem blockchain currently, i made used of the steemjet tag to fetch and display only steemjet related posts.
Loader animation on homepage: While the process of data retrieval takes place, i implemented the loader animation to keep user engaged while waiting.
Markdown converted to plain text for readability using showdownjs: For readability and good user experience, posts have been converted from markdown format to plain text using an open source jquery library showdown.js.
User can now view trending, hot and new steemask related posts
How i implemented this?
As soon as the webpage is ready, using $(document).ready(function () { i retrieved steemask posts using the steem.api.getDiscussionsByCreated
https://github.com/profchydon/steemask/commit/070586d7eeafd583b9f69018df8facbd5e92e0a5
$(document).ready(function () {
function fetchFeeds() {
var query = { limit: 100, tag: "steemask",};
steem.api.getDiscussionsByCreated(query, function (err, result) {
var post = result;
$.each(post,function(key,value){
var body = jQuery.trim(value.body).substring(0, 600);
var img = "https://steemitimages.com/u/"+value.author+"/avatar";
var pending_payout = parseFloat(value.pending_payout_value);
var paid_out = parseFloat(value.total_payout_value) + parseFloat(value.curator_payout_value);
if (pending_payout != 0.00) {
var payout = pending_payout;
}else {
var payout = paid_out;
}
var tags = JSON.parse(value.json_metadata);
tags = tags.tags;
Since the format of the posts is markdown, i used the showdown.js plugin to convert the post body to plain text
https://github.com/profchydon/steemask/commit/eb9f537778f4558fb95b38222333f905d1d8a182
// Instantiate a new showdown converter object
var converter = new showdown.Converter();
//converts markdown to html
body = converter.makeHtml(body);
body = body.replace(/(<([^>]+)>)/ig,"").replace(/<a(\s[^>]*)?>.*?<\/a>/ig,"").replace(/(?:https?|ftp):\/\/[\n\S]+/g,"").substr(0, 600) + '...';
Loader animation was implemented using simple html, css and jquery
https://github.com/profchydon/steemask/commit/2687288a443a6faabab711dd451680c4fc746152
Trending and hot posts were retrieved using steem.api.getDiscussionsByTrending(query, function (err, result) and steem.api.getDiscussionsByHot(query, function (err, result)
https://github.com/profchydon/steemask/commit/573bfc2bb3f6414aa1bdb130e31661f7288430a0
Commits:
All commits are placed above in their respective positions.
Roadmap
Get all basic functionalities working
Release Alpha version for testing
Get all other functionalities working
Release beta version
Continuous maintenance and addition of features for better user experience
How to contribute
- Fork the repo https://github.com/profchydon/steemask
- Create your feature branch
- Commit your changes
- Push to the branch:
- Submit a pull request.
You can contact me on discord: @profchydon