TokenBB Forum ― A Series of Fixes And Features

TokenBB is a forum style client for the Steem blockchain. Concurrent with the public alpha phase of the project @buildteam has open-sourced this front end repository to encourage contributions from outside developers, designers and translators along side the core team of devs.

You can read more about the alpha test and register for your own forum here in a post from @thecryptodrive.

_{TokenBB - A Forum Frontend For The Steem Blockchain}

Repository

https://github.com/BuildTeamDev/tokenbb-web-client

Features & Fixes

Last week I had an opportunity to collaborate on several features and bug fixes from the alpha test as a member of BuildTeam's pool of devs. Getting on board with this crew was an exhilarant experience. BuildTeam is the blockchain innovation force propelling @minnowbooster, @btuniverse, and @steemsports among many other cool projects as well as collaborating with some of the hottest games and initiatives on the chain.

While each task is a small change on its own, these fixes all focus on reducing friction in the users' experience. This is important for a young project where user adoption and feedback will be essential fuel for the road ahead.

Taken collectively these features and fixes comprise about 5 hours of coding effort. As with any new project there was also some intial setup and orientation involved. To the team's credit, getting setup with BuildTeam's development environments was much smoother than many prior experiences in my 10+ years of coding.

Editor Bugs

In the forum's markdown editor component a user did not see a preview of certain styles. For example, normally the * ,- and + characters can be used to create a bulleted list. In this case the ul element was being rendered in the preview. However the forum site's default styles (i.e. no bullet) were concealing this in the preview.

_{Before ― bullets are invisible in preview.}

I addressed this by creating two new CSS classes, specific to the editor component that would restore the disc icon for bulleted lists. These styles had to be narrowly targeted so as not to hamper any creative themes developed later on. But at the same time we needed to make sure that themes did not override this functional aspect of the user interface. I decided this was a rare instance where applying the CSS !important rule would be appropriate.

form.new-reply ul,
form.new-topic ul {
    list-style: disc !important;
}

Pull Request - https://github.com/BuildTeamDev/tokenbb-web-client/pull/7

_{After ― bullets display as disc in preview.}

Remove Redundant New Topic Button

At first, the forums presented New Topic buttons in the main navigation bar and then again on the main list of topics.

_{There are two buttons here. But one would suffice.}

It was suggested that the button was needed only once, and that removing it from the main navbar would provide a better user experience as well as more focused branding.

I removed the code that displayed the New Topic button in the nav element.

Pull request - https://github.com/BuildTeamDev/tokenbb-web-client/pull/10

Users Could Enter Empty Titles Or Reply Bodies

Originally a user was not prevented from submitting a blank forum post or creating a new topic with a blank title.

_{Clever testers help the devs by trying the unexpected.}

By the time I was assigned this bug the main problem had already been fixed thanks to @reggaemuffin. A server side check had been implemented that prevented blanks. A popup message to notify the user that the posting had failed was also put in place.

Upon discussion, we decided that the popup message should include additional information to help the user understand and correct the mishap. Also, as CTO @reggaemuffin wanted to cover all the bases by having a front-end check for blank content as well the back-end hardening.

I appended the error message received from the server after the blank post is submitted. This message tells the user that they must provide some content. As it turned out the solution I implemented for the next issue also helps check for blank replies on the client side.

Pull Request - https://github.com/BuildTeamDev/tokenbb-web-client/pull/11

Hitting Reply Without Typing Reposts Previous Comment

A second issue arose concerning the reply form. In this case, it was noticed that if a user posted a reply and then immediately submitted the form again a duplicate reply would be posted. This only happened if the user did not enter any new text in the form, but it would continue indefinitely.

This behavior arose because the reply form would not emit an event to update the locally stored reply text until the user's next keystroke. So, if the user repeatedly hit the Reply button instead of typing, the cached text would be posted again.

_{The Reply button remains disabled until text is entered.}

I added two forms of protection against this. Firstly, sucessfully submitting a reply to the forum will clear out the stored reply text on the client. Secondly, the Reply button will remain disabled until the user has entered text. As mentioned above, this also serves as a front end mitigation against creating blank posts.

Pull request - https://github.com/BuildTeamDev/tokenbb-web-client/pull/24

New Feature - A 'Move to Top' Button

Last but not least, we come to another feature prompted by user feedback from the TokenBB Forum Alpha Testing that opened earlier in the week.

When a user clicks on a topic they are by default taken to the bottom of the thread where they can see the most recent post. If the user is logged in they are also able to see the reply form and can post a response.

It can be difficult to anticpate the user's exact intent in every case though. They may have clicked in order to add a response or they may intend to read through the thread in chronological order.

While the default behavior is a good compromise it is also helpful for the user to have a way to quickly navigate from the bottom of the thread to the top and vice versa.

_{An example of the 'Jump to End' link against a dark theme}

To accomplish this I added links that will scroll either extreme into view. It was also important that existing themes and any future themes developed have a way to control the appearance and position of these links. I included placeholders in the default theme style sheet for this purpose.

There were two pull requests for this issue, as after trying an initial approach we realized it would be better to scroll the nav element into view when the user jumped to the top. This required a small change in approach since the original implementation relied on this.$refs[] which were unavailable in the new case.

Pull requests

• https://github.com/BuildTeamDev/tokenbb-web-client/pull/19
• https://github.com/BuildTeamDev/tokenbb-web-client/pull/21

Conclusion

Overall these contributions make for a good start. As I've become much more familiar with the organization and patterns of the TokenBB front end, I hope to contribute more soon.

GitHub Account

https://github.com/tdreid