Steem Compare - share via custom url

in #utopian-io7 years ago (edited)

Steem Compare ⬅️

Screen Shot 2018-01-12 at 21.29.30.png

Steem Compare is a tool I've been working on that allows you to compare multiple Steem user accounts in one place. On the last update I added ranking to allow you to sort your searches by various metrics. I wanted to share a result with a friend and suddnly realised I needed to say "Go to Steem-Compare, here's the link and enter these names" I thought it makes more sense to be able to just send the link by itself and automatically show the same search I had.

Details

The aim of this update was to add the ability to set and read query strings of searched users. These query strings would allow sharing of search results directly as a link. As a bonus I decided to add the share button that auto copies the url. You can now see in the addressbar whever searching the query paramaters will automatticaly update. The history state stores each search to allow a user to use the default back behaviour to navigate to previous searches.

Screen Shot 2018-01-12 at 21.50.24.png

After finish the code for this PR I also realised I should seperate some of the Javascript into modules. Now seperated into modules/steemActions.js, modules/uiActions.js, modules/util.js

Components

I've done a full refactor of the Javascript after updating the features in this PR. at ~300 lines of JS it was getting a little messy so pulled the project into one main file with three modules.

The main components for this PR was ensuring the URL state was correct after each add/remove or re-searching for users.

Related issues

I struggled to get a good native 'copy to clipboard' and in the end opted for clipboard.js, while my custom implementation did work it only seemed to work once, I couldn't seem to reset state for multiple uses. At 3kb it's not a big deal to include.

While refacoting the Javascript into modules there were a couple minor issues. I had forgot that imported varibles are view-only, when working with varibles from a module you need to createa function that updates that varible and also export that function, then use the function toupdate the varible rather than trying to update it directly form outside the module. Example of this here

Steem Compare is comming along nicely, if you have any ideas you think might make this more useful please let me know. ✌



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Hello,
As your username on GitHub and Utopian does not match can you please change your bio or name to reflect your username on Utopian as with new rules its mandatory.

Thanks!

For questions and feedback, you can contact us on Discord.
[utopian-moderator]

hey @ms10398, Thanks for reviewing my project. I have updated my name and profile on Github to match my name (Sam Billingham) here.

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Thanks for reviewing it again 💯

Hey @sambillingham I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Thanks Utopian 🤖 & Team 👨‍👩‍👦‍👦

Good stuff man, your website is coming along nicely! Keep up the good work!

Thanks again Amos. I'll probably get it up on an easy url eventually, once it has a few more features

Cool I'll check this out. Nothing like a bit of healthy competition. I'll check out my hubby lol.

Totally, a bit of competition can help things move along quickly 💯