SteemQA (beta release) - 3rd Progress Report

Repository

https://github.com/irelandscape/steemqa
Most development is currently taking place on the develop branch.

Introduction

s
This post is a new status update on the progress of SteemQA, a generic Questions and Answers application for the Steem blockchain.

Post Body

SteemQA is a Q&A application similar to Quora but without obtrusive ads and banners. SteemQA makes use of the Steem blockchain to store content and reward contributors.

Searching for a new project name

Last week @didic raised the interesting point that the "QA" in SteemQA brings to mind the common Quality and Assurance acronym rather than then intended "Questions and Answers".

While I didn't think about this at the start of the project I now tend to agree with this concern and for this reason I have spent some time trying to think about a better name.

After a fair amount of research on the web and using Whois.net it became clear that trying to come up with an unused name based on a word in the English dictionary was an impossible task.

I don't have a great imagination when it comes to naming new things but after more thinking I came up with the following name:
Quearn.

The name is a composite of question, earn and learn, which I think is well suited to this application.

I went as far as putting quickly the following logo together, though I am by no mean settled on it.

Please let me know what you think about the new name in your comments below.
I'll wait a while longer before renaming the project as someone might come with a better idea.

Let's now review the development work completed since the previous progress update.

Home Page

The home page is now more featured and displays three question swipers:

• Latest questions,
• Top rated questions, and
• Questions with most wanted anwers.

The page now feels more complete.

I am still unsure as to how much informational content about the site should be displayed on the home page.
For example, it may be useful to show top news somewhere on this startup page.
In any case, I want to keep this page as tidy as possible however so finding a good balance between informational content and user contributions is important.

Bookmarks

Users can now bookmark their favorite questions!

A bookmark button was added to this effect in the question card toolbar and on the question page.

Questions that are currently bookmarked have their bookmark button highlighted. Once highlighted, clicking this button removes the question from the user bookmarks.

Users can access all their bookmarked questions by selecting the "My bookmarks" link in the side drawer panel.

This brings the user to a new page listing a summary of all bookmarks. Each bookmark is shown with its title, main image, text fragment and toolbar.
The user can then access the question page associated with a given bookmark by clicking on its title or main image.

Infinite card swiper

The question card swiper has been improved to dynamically load, using AJAX requests, new questions as the user reaches the end of the swiper.

For this project I use the vue-awesome-swiper component which is packed with features.
The authors of the component have provided significant documentation and examples to make integration of the swiper as easy as possible within a VueJS application.

On the server side, the Config object was updated to make configurable the number of initial questions loaded within a card swiper, as well as the number of additional questions to load upon reaching the last question card.

Page header now fixed while scrolling

I've updated the toolbar at the top of several pages so that it would remain fixed while scrolling.
This toolbar displays useful information and provides context to these pages (such as the question title) and I think it helps giving scope to the reader while scrolling.

To achieve this, I have encapsulated the Quasar QToolbar element within a QLayoutHeader as shown in the code fragment below:

  <q-page>
    <q-layout-header>
      <q-toolbar
        color="primary"
      >
        <q-toolbar-title v-if="blog">
          {{blog.title}}
            <div slot="subtitle">by {{ blog.author }}
                ...
            </div>
        </q-toolbar-title>
        <q-btn size="lg" to="/" >
          <q-icon name="close" outlined>
            <q-tooltip>Back</q-tooltip>
          </q-icon>
        </q-btn>
      </q-toolbar>
    </q-layout-header>
    ...
  </q-page>

Cross-scripting attack mitigation

I have now centralized the conversion from Markdown to HTML into a central Vue component and sanitized the output using the xss NodeJS component.

The markdown processing code is as follows:

export function md2html (str, xss) {                                                                                                                  
  let Remarkable = require('remarkable')
  let md = new Remarkable('full', {
    html: true,
    linkify: true
  })
  return xss.process(md.render(str))
}

Notice that, at this stage, the conversion is still blunt and not configurable.

Other progress

• Various rendering issues were fixed.
• REST API was updated to support the above features.
• Some vue files have been moved to new subfolders. I was starting to have many files in the components folder and I felt that moving some files into directories such as tabs and utils would help finding out code more easily.
• Username is now displayed without the odd-looking background in the page header.
• Comments are now working for answers. Last week comments were only working for questions.

Conclusions for this week

I feel that the last few days have brought major advancements to the project.

I can now start seeing the milestone in the distance where I will be able to bring to life the first beta release of this new Steem application.

This week I will tackle one of the chunkiest remaining feature - searching.

I will attempt to install the haystack Django module on the backend and integrate it with the Django REST framework and the rest of the server code.

I will then need to start working on the "Search" page in the client user interface.

I strongly believe that proper searching capability is a key feature so it's worth spending a fair amount of time on getting this right.
I would be happy if I can finish this feature by this time next week but that is not guaranteed given the size of the task and my available time.

Discord channel

SteemQA (Quearn?) has a Discord channel and everybody interested in the project is welcome to join our new community!

Invite: https://discord.gg/tm3Muk7

Looking for developers!

I am looking for enthusiastic coders to join the development effort!

If you would like to help and be part of something big in the Steem blockchain, please join the Discord channel and leave a message in the chat room or DM @irelandscape!

The following technologies are used throughout the project.
Client side:

• Javascript
• Node JS
• Vue JS
• Quasar framework and third party external components such as steemconnect-v2 SDK
• dsteem

Server side:

• Python
• Django framework and various related plugins.
• Beem
• Steem-UA API

Main remaining tasks for first Beta release

The following list is a summary of the tasks that remain before release of the 0.1 version.

• Update home page to only show questions related to the user favorite topics
• Hide widgets to non-logged in users that are only available to authenticated users.
• Regular polling of the backend API for new question updates and updating accordingly the home page.
• Past contributions pages. Allow users to browse his past comment/replies contributions.
• My Questions / My Answers pages pagination support.
• Allow users to "delete" contributions.
• Allow moderators to flag contributions. Flagged contributions won't be shown anymore on the UI.
• Integrate Steem-UA ratings.
• Searching capability
• Show user current voting power in upvote dialog.
• About and Help and Guidelines pages
• Basic Steem wallet to see and claiming pending rewards.
• Automatically append questions and answers with a short message containing a link to the SteemQA application. This message is not shown when viewed through the SteemQA application.
• Updates in server-side streamer script
• StemQA logo
• Production distribution preparation

Resources

• SteemQA Discord channel
• Node JS
• Vue JS
• Quasar framework
• Quora
• Steem-UA
• steemconnect-v2 SDK
• dsteem
• Django framework
• Beem
• dsteem
• vue-awesome-swiper
• xss NodeJS component.
• haystack
• Django REST framework

Series Backlinks

• SteemQA - A new Steem-powered Q&A app!
• SteemQA (beta release) - 2nd Progress Report