Task Request: Kindly Help Us Tend To 14 Micro-Programming Tasks To Enhance The Overall steemgigs.org UX

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@surpassinggoogle·
0.000 HBD
Task Request: Kindly Help Us Tend To 14 Micro-Programming Tasks To Enhance The Overall steemgigs.org UX
<html>
<h1>Repository</h1>
<ul>
  <li><a href="https://github.com/steemgigs/steemgigs">Steemgigs (Front-End)</a>&nbsp;</li>
  <li><a href="https://github.com/steemgigs/steemgigsServer">SteemgigsServer (Back-End)</a></li>
</ul>
<blockquote>&nbsp;&nbsp;SteemGigs: A Revolutionary Decentralized Freelance Marketplace With Its Own Knowledge-Bank. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</blockquote>
<blockquote>A revolutionary freelance marketplace built on the steem blockchain that removes all barriers to entry, by implementing an "untalented &amp; community paradigm". &nbsp;&nbsp;</blockquote>
<h1>Details</h1>
<p>This task is a series of micro-programming tasks. The task covers the following:</p>
<ul>
  <li>Add Corresponding Text To Each Drop-down Item Of The 'create' button On Steemgigs.org</li>
  <li>Add A 'Choose Reward/Payout' Button To All Other Editors Across steemgigs.org</li>
  <li>Add Some Styling &amp; Text-Formatting To T<strong>he Style-Guide Area</strong> (on the right-side) Of Each Editor Across steemgigs.org</li>
  <li>Revamp Some Areas Of Each Editor Under steemgigs.org/surpassing-google</li>
  <li>Add A Check To All Our Post Editors (where required), To Create Unique Permalinks For Every Post.</li>
  <li>Fix The Sorting Function On Our Homepage</li>
  <li>Show Post Payout Even Post-7days</li>
  <li>Add a Social Share Button To Post</li>
  <li>Adjust The Metatag Of steemgigs.org</li>
  <li>Allow steemgigs-based URL To Render A Preview</li>
  <li>Adjust Image Sharpness</li>
  <li>Please Add A 'Follow' tick-button Prior To Login</li>
  <li>Fix A UI Bug On Our Homepage Prior To Login, That Doesn't Allow The Page To Scroll Up/Down</li>
  <li>&nbsp;Kindly Help Us Add A 'Certified Ulogger' Badge &amp; Functional 'Delegate' Button, Underneath The Posts Of Certified Uloggers Who Post Through steemgigs.org</li>
</ul>
<h2>Details proper</h2>
<blockquote>If you would like to contribute to our project, we are now adopting a new style of contribution.&nbsp;</blockquote>
<p>If you are designated to undertake the entire task or any of the sub-tasks, we would like you to be able to send a PR to our repository each day, however small your coding-contribution is. Alternatively, you can provide us with a repository, where we can monitor your progress each day.</p>
<blockquote>This will give us an avenue to inspire you (where needed) to stick to the time-allotment for the task or move on fast, where you are not able to actively contributing.</blockquote>
<p>Note: This task request is also done via utopian.io&nbsp;</p>
<h1>1. Add Corresponding Text To Each Drop-down Item Of The 'create' button On Steemgigs.org</h1>
<p>We now have a<strong> 'create' button</strong> on the top-right area of steemgigs.org, that contains a drop-down, linking to our list of editors.&nbsp;</p>
<p><strong>See image:</strong></p>
<p><img src="https://steemitimages.com/p/C3TZR1g81UNaPs7vzNXHueW5ZM76DSHWEY7onmfLxcK2iP4cKgeSwKVRwJuLUXDwjpeo9GvroFWPcibZ9YWWzqA4b9GLviQhDPi2VcBsmtsUjjXMF517SXg?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<p><br></p>
<p>When users click on the <strong>'Create' button</strong> to <strong>select an editor</strong>, we now want to give them some insight into the function of each editor on the drop-down list, so that they can chose an appropriate editor. To this effect, we want to add a <strong>'?'</strong> or<strong> 'More Info icon'</strong> beside each item on the drop-down, containing information about each editor.</p>
<blockquote>Users may be able to click on <strong>this '?' icon etc</strong> to gain quick insight about each item on the drop-down list.</blockquote>
<h3>Raw text for each item</h3>
<p><strong>Gig:</strong> Offer a service (related to your expertise, talents/un(dis)talents, experience etc) in exchange for Steem, SBD, Steem Power or for free.</p>
<p><strong>Custom Request:</strong> If you can't find the exact gig that you seek, you may want to do a custom request. Try this editor.</p>
<p><strong>Testimonial:</strong> Share your overall SteemGigs experience with us. So, why not record your service progress &amp; updates, successful deliveries, shout-outs, payments etc using this editor.</p>
<p><strong>Untalented:</strong> Not an expert yet? No worries! On SteemGigs, you can hone your expertise while offering a service. Select this editor to do just so.</p>
<p><strong>SurpassingGoogle:</strong> Select this editor to contribute knowledge (based on your experience), specific to a niche, field, industry, expertise etc to our knowledge-bank.</p>
<h2>2. Add A 'Choose Reward/Payout' Button To All Other Editors Across steemgigs.org</h2>
<p>Currently, only the <strong>'Create Gig' editor</strong> has the option that allows users to <strong>chose a payout method</strong> as seen on <strong>the screenshot below</strong>:</p>
<p><img src="https://steemitimages.com/p/C3TZR1g81UNaPs7vzNXHueW5ZM76DSHWEY7onmfLxcK2iP53sEWd9LLPYYsLRuA5CLvu4gSmQGbnn1fcueowJPiXsfb5UmicAp5JtUisE5gbMp9QRG5nfJE?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<p><br></p>
<p>However, there are many editors across steemgigs.org and none of these other editors have the<strong> 'Choose Reward/Payout' button.&nbsp;</strong></p>
<blockquote>Note https://steemgigs.org/surpassing-google alone links to some 12 different editors.</blockquote>
<p>We now like you to<strong> add a 'Choose Reward/Payout' button</strong> to all the other editors across steemgigs.org as seen in the earlier image.&nbsp;</p>
<h2>3. Add Some Styling &amp; Text-Formatting To T<strong>he Style-Guide Area</strong> (on the right-side) Of Each Editor Across steemgigs.org</h2>
<p>Each editor across steemgigs.org has a style-guide area (towards the right-side) as seen in <strong>the screenshot below:</strong></p>
<p><img src="https://steemitimages.com/p/TZjG7hXReeVoAvXt2X6pMxYAb3q65xMju8wryWxKrsghkMZXdww1j71jUY9gdFnFYUJSRsPG6XTfW7JRfXH6GHwTGmZSYXqvb58CqE6Uo7oeSJ3TprKQq9dfmJPNRsQ6JyceWA5dzdL1M8?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<blockquote>Each aspect of the editor has its corresponding style-guide.</blockquote>
<p>In this task, we would like you to add some styling/design/color to this area for a better user experience. Where possible, you can also adjust the font and add some text-formatting.</p>
<p>Speaking of styling/design, we would also like the corresponding text-box for each aspect of an editor, to be aligned in height (with the portion of the editor that it is meant for).&nbsp;</p>
<p><strong>Something like this:</strong></p>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnqFJuLJ9yi9HnLPEqoU79RTfH9Sq7mPh95ZCmokKnBtShEDXSeNVQvsmqVH7MGi7YewJRUNaiGQoa3dH6rMg9eiJuQmJzisXdvHXGhFc?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnpvHJUgcxUXugSzNxAb4K8vrENMFVMHdpHjJY9XixGE52kWwptA3CfiLkqeE3UHtsA1G6qz1UgFHGp7A2X5o5YJV5eXtszEdLnrAxYLv?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<blockquote>Besides, as part of the design, you can make use of fitting icon(s) e.g the text-boxes may have<strong> a lamp icon</strong> etc</blockquote>
<p>But there is more......</p>
<h2>4. Revamp Some Areas Of Each Editor Under steemgigs.org/surpassing-google</h2>
<p>If you visit each of the editors under https://steemgigs.org/surpassing-google, you will notice that it has some UI/design-bugs. This may have something to do with the browser type i am using (i am using firefox) but maybe not.&nbsp;</p>
<blockquote>Please test using different browsers to be sure it is not a browser-rendering issue.</blockquote>
<p>You will notice that the style-guide/text-boxes (on the right-side) is so right-ward, that it becomes impossible to scroll down on the page. Too, the only way to see the later part of the post editor is to <strong>zoom the screen out</strong> and even so, you really can't scroll up/down on the page.&nbsp;</p>
<p><strong>See image:</strong></p>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnqCoQkfBULEJhZwysPsDN4bXqQJmHWJihqT3wUdt7iPtQYhxfyyRGY7PoTSug91BQypBX7ycLD1Arc3SAXvCwkZUDNGEijwzAhX99D4A?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<blockquote>This UI/design malfunction is evident on all the editors under https://steemgigs.org/surpassing-google</blockquote>
<p>If you take another a closer look, you will also notice that each of the editors under https://steemgigs.org/surpassing-google share a similar structure. For instance, you will notice that the header area of each of these editors, that carries <strong>the editor-title</strong> has some part cut off.&nbsp;</p>
<p><strong>See these images:</strong></p>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnqCt48SqrBxPbZpLptSQc86Kn6xZiEo3ZpQzQS7kCNp1HXaL2SAzf6UYSahk4iEXViVxpT3Pc4DdYZLdoF6GjURE5yAD2S7joXkH7weW?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnq2YBhYDJmrQ1AUxPLzyvRtibUetauB2G58ZR7Tn9QyQGkyqoJGzNzT4wNv4bYddG7V973iU5HfvpBUYWNpdjq9p94ZRZ594AEeRHTka?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<blockquote>Kindly look into fixing all the aforementioned!</blockquote>
<h2>5. Add A Check To All Our Post Editors (where required), To Create Unique Permalinks For Every Post.</h2>
<p>In a recent test, while using one of the editors on steemgigs.org, i noticed that the different editors across steemgigs.org may not have the ability of designating a unique permalink for different posts, in the coincidence that a particular user creates two similar posts, using different editors, where each post carries the same first tag and title.</p>
<p>During my test, i attempted to create a post using a different editor (Untalented Editor) than the 'Create Gig' editor. Coincidentally, i titled the post, 'Test Post', which had exactly the same title as a post that was created 9 months ago, using the 'Create Gig' editor. In both cases too, the first tag was #steemgigs!&nbsp;</p>
<p>The result? My post appeared to publish successfully on steemgigs.org and this case was evident even on steemd.com/@steemgigs but i wasn't able to locate the post on steemit.com or on steemgigs.org and steemd.com/@steemgigs ended up linking me back to the post that was published some 9 months ago.</p>
<p>Ultimately, what happened is, <strong>"both posts had exactly the same permalink"</strong>.</p>
<blockquote>Kindly add a check to the code that makes sure that every post created on whatever post-editor across steemgigs, has a unique permalink.</blockquote>
<h2>6. Fix The Sorting Function On Our Homepage</h2>
<blockquote>We would like the<strong> 'sorting' function</strong> on the various segments of our homepage, to work.</blockquote>
<p><img src="https://steemitimages.com/p/C3TZR1g81UNaPs7vzNXHueW5ZM76DSHWEY7onmfLxcK2iPEoaP57f9CxWnoRi2gXt66eqHLp7LfMF52WCHzuf9zhgid1sUPamBfiYzfz2mdcnUTj6TvDEXQ?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<blockquote>In this task, simply make the <strong>'sort' button</strong> work, similar to how this function works on steemit.&nbsp;</blockquote>
<h2>7. Show Post Payout Even Post-7days</h2>
<blockquote>Currently, posts show a payout of <em>'0.00$'</em>, <strong>post-7days</strong>. We would like this to change.&nbsp;</blockquote>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnqE3uBmQb6Kr9ZJApNCigTiAdAypsSJnqeZrcBMLo5VZJtvFU9aW4UASKyiRLWYgP7MoQ7MaJPu2xmXDW45oUWLFm4MCKDtao67VfR2W?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<blockquote>We now want posts and post-cards across steemgigs.org to display <strong>actual payout</strong>, regardless of post-age.</blockquote>
<h2>8. Add a Social Share Button To Post</h2>
<blockquote>Kindly add a social share button to the bottom of posts across steemgigs.org</blockquote>
<p>For now we would like to add buttons for Facebook, Twitter &amp; Reddit as is the case on steemit.com</p>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnpqHiQiU49YBAAEk6bpevwPTr63fMvDVtNPV4whPB8U7k3hTReC8facp1eDAkhvB7pUXD4if64pDNnu3dxzqZLsYdVdRuCno25HYyXzN?format=match&amp;mode=fit&amp;width=640" width="140" height="60"/></p>
<h2>9. Adjust The Metatag Of steemgigs.org</h2>
<p>Currently, steemgigs doesn't show much <strong>when it comes to a metatag.</strong> In the search engines, it simply <strong>shows this:</strong></p>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnpyqmjqCKhPgSd5hdpFDfgG5uzt85vCkuRtEStDYKse2kDqBYeLUmQ7N4fQQD5nygcVqAmSxXkRKYtcPnVcEseqhSBohe8ooJw57cCGW?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<p><br></p>
<p>We want to replace <strong>'everyone has something to offer'</strong> with the text below:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>A revolutionary freelance services marketplace built on the steem blockchain, that 'removes all barriers to entry from dream-building' for entrepreneurs, by implementing an 'untalented &amp; community' paradigm, where 'everyone has something to offer'. &nbsp;</p>
<h2>10. Allow steemgigs-based URL To Render A Preview</h2>
<p>Currently, when you share a steemgigs.org-based URL e.g on Facebook, Twitter, Discord etc, it is unable to load up <strong>'a preview'</strong>. We would this to adjust.&nbsp;</p>
<p>When users share share our URL, it should load up an appropriate preview. <strong>Something like this:</strong></p>
<p><img src="https://steemitimages.com/p/3zpz8WQe4SNGWd7TzozjPgq3rggennavDx3XPY35pEAVnpyynuXZBWdvETM2gk73RrfSRF2SsAbJaazfLgUQchqFc3dtyRQH42Wo38LQ8djTvrqgAzxgDL4yZx7YE5tFRq4i1kPMsTp8JcMUZirS?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<h2>11. Adjust Image Sharpness</h2>
<p>We would like you to check the image-rendering mechanism across steemgigs.org and apply a possible solution to the low-image-quality apparent currently, across steemgigs.org</p>
<blockquote>It appears that images are extremely compressed and lose quality to a maximum measure. We would like you to fix this.</blockquote>
<h2>12. Please Add A 'Follow' tick-button Prior To Login</h2>
<p>When users attempt to login, we would like a simple portal to show up (as part of the login process), if they haven't followed @steemgigs yet.&nbsp;</p>
<p>This portal should display <strong>a 'follow' @steemgigs tick-button</strong>. This button <strong>should be ticked by default</strong>. Users will be able to un-tick it at will, if they do not intend to follow @steemgigs</p>
<h2>13. Fix A UI Bug On Our Homepage Prior To Login, That Doesn't Allow The Page To Scroll Up/Down</h2>
<p>If you visit steemgigs.org (prior to login), you will notice that our landing page doesn't have the scroll function on the right side, that allows users to scroll up/down (navigate) the entire page.</p>
<p><strong>Kindly help us fix this!</strong></p>
<blockquote>Please test on various browsers to be sure it is not a browser-rendering issue.</blockquote>
<h2>14. Kindly Help Us Add A 'Certified Ulogger' Badge &amp; Functional 'Delegate' Button, Underneath The Posts Of Certified Uloggers Who Post Through steemgigs.org</h2>
<p>The entire teardrops SMT ecosystem is built around a list of certified uloggers. This list is find-able on https://ulogs.org/discover i.e<a href="https://steemit.com/@uloggers/followed"><strong> the followed list of the @uloggers account</strong></a></p>
<p>This means that certified uloggers will have exclusive perks/add-ons across any of our interfaces. We want to begin to experiment with algorithms that apply this, on steemgigs.org as well&nbsp;</p>
<blockquote>Many of such-like algorithms has already been implemented on ulogs.org</blockquote>
<p>In this task, we want to add a <strong>'certified ulogger' badge</strong> and<strong> a functional 'delegate' button</strong> to the bottom of every post authored on steemgigs.org by certified uloggers</p>
<p>Kindly read <a href="https://steemit.com/utopian-io/@surpassinggoogle/task-request-help-us-add-a-badge-and-delegate-button-underneath-posts-for-certified-uloggers-on-ulogs-org"><strong>this post</strong></a> to gain insight into what we expect from this task. You can also visit the bottom segment of<strong> </strong><a href="https://ulogs.org/@atongis/achievement-unlocked-62-reputation-score-1d0a883537e8c"><strong>this post</strong></a>, to see a live example of both buttons implemented on ulogs.org</p>
<p><strong>See sample image:</strong></p>
<p><img src="https://steemitimages.com/p/C3TZR1g81UNaPs7vzNXHueW5ZM76DSHWEY7onmfLxcK2iPU2drz85QCLxyiHY6BSBeCc5nQXo1xtc9JvW2gsxSkt3MeAAewpdjheoapbgHrNyLuTydXUGte?format=match&amp;mode=fit&amp;width=640" width="640" height="360"/></p>
<h1>Component</h1>
<ul>
  <li><a href="https://github.com/steemgigs/steemgigs">Steemgigs (Front-End)</a>&nbsp;</li>
  <li><a href="https://github.com/steemgigs/steemgigsServer">SteemgigsServer (Back-End)</a></li>
</ul>
<p>Analyzing the current code is a good starting point. For task 14, you may want to look at ulogs.org or its code as this will help you explore options. Also across the entire task, it is essential to test your code on different browsers to make sure the end-product renders well on different browsers.</p>
<p>You can decide to take one or more tasks. Kindly indicate your intention in the comment section below. Where you get stuck, we can always discuss possible solutions, logic etc We just may find answers!</p>
<blockquote>Overall, carry out the task according to your preference and &nbsp;expertise, submitting a pull request and thereafter create a post highlighting your contribution, following Utopian's guidelines for Development (contributions). &nbsp;</blockquote>
<h1>Deadline</h1>
<p>(For the entire task) 4 days&nbsp;&nbsp;&nbsp;</p>
<h1>Communication</h1>
<p>You can contact me on:&nbsp; &nbsp; &nbsp; &nbsp;</p>
<ul>
  <li><a href="https://t.me/teardrops_smt"><strong>Telegram </strong></a><strong>(username: </strong><a href="https://steemit.com/@surpassinggoogle"><strong>@surpassinggoogle</strong></a><strong>)</strong></li>
  <li><a href="https://discord.gg/7bUFymy"><strong>Discord</strong></a><strong> (username: surpassinggoogle#1660)</strong></li>
</ul>
<blockquote>You can also indicate interest by leaving a comment underneath this post or on Github.&nbsp;</blockquote>
<blockquote>It is recommended that we are able to&nbsp;discuss, for a better understanding of the task.</blockquote>
<h1><strong>Github</strong></h1>
<p><a href="https://github.com/steemgigs/steemgigs">Steemgigs (Front-End)</a>&nbsp;</p>
<ul>
  <li><a href="https://github.com/steemgigs/steemgigsServer">SteemgigsServer (Back-End)</a></li>
</ul>
</html>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,