[Utopian Rocks Browser Extension] - Highlights & contributions when new tab is opened

Repository

https://github.com/Jestemkioskiem/utopian.rocks.ext

About Utopian Rocks Browser Extension

The Utopian Rocks browser extension is an easy to use solution for posting to Utopian from the Steemit interface. Currently, the extension allows you to submit a contribution with correct beneficiaries to Utopian-io from the steemit.com frontend.

Note: This was paraphrased from the description provided on the Chrome Web Store (Source)

You can download the extension here:

https://chrome.google.com/webstore/detail/utopian/enodmgbbodkljcmenikaolnohjmlghcb

Components

The suggestion found within this proposal would require additions to an area currently not found within the extension. The feature presented would be available when a new tab is created by a user when using Google Chrome.

Proposal Description

I propose that the ability to view recent contributions, staff picks and recent Utopian news is added to the Utopian Rocks Chrome extension. An example of how this could look can be seen in image A. I propose that this addition is shown to a user each and every time that they open a new tab within Google Chrome. Please note that this proposal was inspired by the SteemHunt Chrome extension that shows daily product posts.

When a user triggers a new tab they would be shown a range of different posts that are related to Utopian and it’s contributions. The posts would be broken into the following categories:

1. Recent Contributions
2. Staff Picks
3. News from Utopian

Within each category above there would be a number of different posts, within the recent contributions you would show the most recent contributions ordered by added date time descending, within the staff picks you would show the most recent staff picks and within news, the most recent resteems and posts made by Utopian-io account.

By default, each category would show 4 posts. Each category would have the option to view more posts in relation to that category, as seen within the mock. This would allow all categories to be visible on most screen sizes without any categories falling below the fold (minor adjustments would be needed when compared to the mock). A user would then have the option to expand to view more for that particular category.

Each post would be made up of the following:

1. Image
2. Title of Contribution

In order to make best use of space, the title of the post would be limited to 2 lines and would be cut off using ellipsis, from there a user could hover over the title to view the full title.

A user would be able to view the full contribution or news by clicking on any of the postcards, the posts card could then take a user directly to that contribution on Steemit in either, the same tab or a new tab.

In order to create this feature there would be two main data sources, these include:

1. Utopian Rocks API
2. SteemJS/dSteem/eSteem API (for the purpose of the suggestion, I will use examples from the API)

It would be assumed that the recent and staff pick categories would be gathered using the Utopian rocks API. Within the API there is currently the ability to gather both the title and permalink. This would allow for both the display of the title and a link to the relevant post on Steemit. In order to access the image, assuming that this is not part of the response from Utopian Rocks, you would need to either:

A) Extract the first image that can be found within the post, this could be identified using the following regex:

let images = postBody.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png|jpeg|svg)/g)

Once all images have been found using the above regex, you could then use images[0] as the post image, in the event that no images were available, a placeholder image would be provided within that area.

B) You could iterate through each post that is returned from the Utopian rocks API and get the data from the blockchain, using https://api.steemjs.com/get_content?author=<author>&permlink=<permlink>
From there you could then read the JSON metadata and use image[0] if available. Note: This may have limitations dependent on the front end that was used to create the post not inserting the correct JSON. It would be likely that you would need to fall back onto option A or use more placeholder images in this scenario.

In order to get the News from utopian, you could call the eSteem API within the following request:

https://api.steemjs.com/get_discussions_by_blog?query=%7B%22tag%22%3A%22utopian-io%22%2C%20%22limit%22%3A%20%2210%22%7D

From there you could then display the post and using the permalink, create an option for a user to view this on Steemit.

On the site I would also propose quick links to the following sites:

https://utopian.rocks/
https://join.utopian.io/guidelines/

Both of these options would be displayed at the top of the page.

In order to simplify the first iteration of the particular feature, I have not included information surrounding category based filtering or showing upvotes or comment values. By not including values surrounding post worth or comments, this would also reduce the total number of API calls required. These could be easily added in future releases if deemed beneficial.

Mockups / Examples

The following mocks help to show this feature in more details. The first mock shows the default state of the page when a new tab is created by a user:

Image A - Default/Show less posts

The following mock shows how the page would look when a user clicks on the show more posts feature:

Image B - Show more posts

Benefits

1. The main benefit I believe that this feature would have for an end user is the convenience of being able to quickly view a dedicated feed of recent and exceptional contributions, I find myself regularly scanning through Utopian Rocks to find interesting contributions. I believe that having them at hand when a new is opened would ease the process in finding great contributions that I'm interested in. The current extension does its current task very well, however its value is only limited to the time when a user actually wants to make a contribution. Adding this feature would allow for more value for the end user through allowing users to view a feed of interesting contributions without needing to search through Steemit, etc. There could be an argument made that when when the new front end is available a user could view the contributions there, however I believe providing them through the approach mentioned allows a user to scan and view them in and quicker, easier & less formal fashion.
2. Increased visibility for contributors & Utopian. By displaying both recent news and contributions provided to and by Utopian. This would provide an easy platform for users to quickly see what's new with Utopian or what new contributions have popped up. In turn I would hope that this may help to boost interaction within these contributions and news updates.

Additional Notes

Although the suggestion provided here doesn't fit into the current feature set, I believe this is a feature that could be an easy extension to what's currently available. The suggestion mentioned above is something that I have been thinking about building for a while, hence the level of detail I have provided in some areas. This is something that I would be willing to build into the extension, something that the project owner could build themselves or alternatively if this isn't something that fits into the current vision, something I could build somewhere else. I felt that this would fit into the current extension and I'm not sure having a lot of different extensions is ideal.

GitHub Account

A link to my GitHub account can be found below:

https://github.com/tobias-g1

I have submitted this as an issue to the project for visibility from the project owner, this can be found here:

https://github.com/Jestemkioskiem/utopian.rocks.ext/issues/4