[Steem Gigs] Editor rewrite, UI Improvements & Social Share Buttons

in utopian-io •  last month

screely-1546908100228.png

Repository

https://github.com/steemgigs/steemgigs

This post is partially related to the following task request, however, I conducted some further work that I believe would benefit both the completion of the tasks as well as provide the site an easier to use experience.

https://steemit.com/steemgigs/@surpassinggoogle/task-request-kindly-help-us-tend-to-14-micro-programming-tasks-to-enhance-the-overall-steemgigs-org-ux

Introduction

If you've been following my recent work on SteemGigs you will know that one main piece of work I've been looking to complete was the improvement of the editors, with this post you'll be able to see the improvements I made to the editors combined with the completion of some tasks that @surpassinggoogle made within this recent post request.

Pull Request

The work that I carried out on SteemGigs can be found in the following pull request:

https://github.com/steemgigs/steemgigs/pull/55

The site is live at the following URL:

https://steemgigs.org/

New Features/Improvements

The items I completed from the task request were as follows:

  1. Resolve issue with post-payout not being displayed past 7 days
  2. Fix A UI Bug On Our Homepage Prior To Login, That Doesn't Allow The Page To Scroll Up/Down
  3. Adjust meta description
  4. Add Social Share Button To Post
  5. Revamp Some Areas Of Each Editor Under steemgigs.org/surpassing-google
  6. Add Some Styling & Text-Formatting To The Style-Guide Area (on the right-side) Of Each Editor Across

In addition to the above I completed the following:

  1. Rewrite all editors
  2. Improve reply text area styling
  3. Resolve issue where markdown comments weren't being displayed correctly

Rewrite editors

The largest piece of work that I will mention within this post is the rewrite of all of the various different editors available on Steem Gigs. My main driver for this was future maintainability of the code and overall simplify the overall experience when developing within these pages. Within this piece I was able to considerably simplify the validation that is applied to each editor, create a mixin that allows multiple methods to be shared across the different editors and overall improve the simplicity of the pages for the end user. I do however believe that further improvements could be made to reduce duplication within these pages and will be something that I will look to improve in the future, however at this current time I believe the changes made should allow improvement in the speed of development when working those pages.

First, we can take a look at all of the different editors that are currently available on Steem Gigs, these are as follows:

  1. Steem Gig
  2. Untalented
  3. SurpassingGoogle
  4. Feature Request
  5. Testimonial

As you can see there are quite a few different editors available, previously no code was shared across these pages despite them being of a very similar function, in to help improve this I create a new mixin called form.js. This can be seen here:

carbon (12).png

This mixin currently holds methods that deal with the submission of each form, adding user tags to an editor as well as the removal and adding of tags to the page. I believe that this will continue to grow in future releases as more functions can be moved into here.

Prior to this release, the validation for each of item that makes up a form was handled in a computed property, this overall create a lot of unneeded code and overall would be hard to maintain across all editors, one option was to move this into the newly created mixin, however instead of this I opted to use in the validation that is built into element UI by default, this is because both the styling and the configuration is handled in a way that is both scalable and easy to maintain. Instead of the previously used computed properties, validation can now be configured using the rules object that has been configured in each of the editors. The following shows an example of the rules object within the Steem gig editor:

carbon (13).png

As you can see the rules are both easy to understand and configure, and although I cannot take credit for the functionality that the element UI validation creates, I do believe this addition should simplify the process when creating new validation rules to the various different editors and overall improve the readability of the code considerably.

From a UI perspective, considerable changes were made to all of the editors, this was because overall as the site progressed in the past couple of weeks, only minimal work has been done on these editor pages, this has lead the editors to becoming inconsistent with other pages.

The following shows how the Testimonial editor looked before and after the UI adjustments:

BeforeAfter
STEEMGIGS_Alpha_and_steemgigs.pngSTEEMGIGS_Alpha.png

The following shows how the Surpassing Google editor looked before and after the UI adjustments:

BeforeAfter
STEEMGIGS_Alpha.pngSTEEMGIGS_Alpha_and_StackEdit.png

The following shows how the Steem Gig editor looked before and after the UI adjustments, as you can see, prior to this work this editor was split into multiple steps, as overall I didn't believe this was necessary for the tasks being completed on this page, I instead opted for a collapsible area that would hold each section of the editor.

BeforeAfter
STEEMGIGS_Alpha_and_DevToolsCollapse.png

Add social share buttons to post

In order to implement the social share buttons I used a plugin called vue-social-sharing, the reason I chose this plugin is that it has a large selection of different providers and overall looked like it would be easy to implement into the platform. In order to implement this feature I built a simple component that wraps the plugin so that I apply the styling that is consistent with the page, this also allows this to be reused extremely easily in multiple different areas of the site. The component I built can be found in share-options.vue.

Currently, the site allows you to share your post on the following channels:

  1. Facebook
  2. Google+
  3. Pinterest
  4. Reddit
  5. Twitter
  6. Whatsapp
  7. Weibo

The following shows how it looks when you share your post via twitter:

screely-1546905362311.png

and how it looks when you share via Reddit:

screely-1546905378248.png

Resolve issue with post-payout not being displayed past 7 days

In order to resolve this issue I adjusted the payout () computed property to the following:
carbon (11).png

Within this property, I first calculate the time since the post was made and based if it was greater than 10080 minutes (7 days) I will return a particular value for the payout. In the scenario it is less than 7 days I will return this.gigData.pending_payout_value and if it's greater than 7 days I will return the sum of this.gigData.curator_payout_value and this.gigData.total_payout_value.

What's next?

Over the next week, I hope to complete the remaining tasks within the task request, as some of the tasks remaining require API changes I will also take the opportunity to restructure the APIs as currently I believe this could be improved considerably and from there I will continue to work on further features that pop up.

GitHub Account

A link to my GitHub account can be found here:

https://github.com/tobias-g1

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • Great article, the formatting is superb, great use of before and after.
  • Code samples add to explanation of coding choices.
  • Commit comments are awesome.
  • There was a lot of work done here. The only thing I would ask perhaps including a little more comments in the code.

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? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

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

Congratulations @tobias-g! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 8000 upvotes. Your next target is to reach 9000 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemWhales has officially moved to SteemitBoard Ranking
SteemitBoard - Witness Update

Support SteemitBoard's project! Vote for its witness and get one more award!

Hi, @tobias-g!

You just got a 1.36% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

This post has been included in the latest edition of SOS Daily News - a digest of all you need to know about the State of Steem.



Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 1 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 8 SBD worth and should receive 168 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

Hi @tobias-g!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

It's working! I waited for that so much ! Thank you ;D
I had problem with showing peoples articles and what they can offer, and now ALREADY I SEE :D

Hey, @tobias-g!

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!