Steemit Followers

in #utopian-io3 years ago

Repository

https://github.com/firedreamgames/steemit_followers

About Steemit Followers


I was asked by @moeknows in the discord if there is a tool to see the users followers in detail.
There are tools to show followers, to see dead followers but there was no tool to show users active followers status in detail.
Followers are a very important part of Steemit. I remember @SirCork told me once in his open-mic:

It is not important what you write, but it is more important who you know for success in Steemit.

Steemit followers is a single web page tool where you can list and sort all your followers according to their

  • Steem Power
  • Creation date
  • Last post time
  • Last vote time

Operating Manual

  • Go to the url : https://fdsteemtools.neocities.org/steemit_followers.html
  • Enter your Steemit user-name in the text area and press START button


  • You will initially see your followers in alphabetical order, as Steemit shows.


  • You can sort the list according to given parameters.
    The button with "^ " sorts the list in ascending order ( smaller first ) and the button with arrow "v" sorts the list in descending order ( biggest first )
    For example pushing the "v" indicated button near user SP will sort the list with the followers with highest SP first.


  • The same kind of sorting can be performed on other parameters to see the activity status of your followers.

Technology

Steemit Followers uses JavaScript, HTML , CSS and JQuery with SteemJS API

Inside the JavaScript Code

The full code can be forked from GitHub
Most important functions are:

  • Getting global values from Steem
steem.api.getDynamicGlobalProperties(function(err, result) { // Get global data from Steem
         console.log(err, result);
         vesting_steem = parseFloat(result.total_vesting_fund_steem); // get vesting fund steem
         vesting_shares = parseFloat(result.total_vesting_shares); // get vesting shares
         spr = vesting_steem / vesting_shares; // calculate steem per vest to calculate SP of user
     });

This function calculates the SPR value which will be used to calculate the Steem Power of the follower.

  • Calculating the quantity of followers
function search(the_user) {


     steem.api.getFollowCount(the_user, function(err, result) { //get the quantity of followers from Steem
         var qty = result.follower_count;

         get_followers(qty); //send the qunatity to GET_FOLLOWERS function 
     });

 }


  • Get the first 1000 followers list
function get_followers(qty) {

    
     steem.api.getFollowers(the_user,
         '',
         'blog',
         1000,
         function(err, result) {
             console.log(result);
             followers = followers.concat(result); //get the first 1000 followers and assign it followers array
             if (qty > 1000) {
                 get_rest(followers, qty); // if follower quantity is greater than 1000, send resuly to GET_REST function to calculate more
             } else {
                 get_follower_data(followers); // if less than 1000 send result to GET_FOLLOWER_DATA function to get data
             }
         });
 }


  • Get the rest of the followers if follower quantity >1000 followers
function get_rest(followers, qty) {
     
     var i = parseInt(qty / 1000); // calculate 1000's lot of followers
     
     var start_follower = followers[count * 1000 - 1].follower; // get the start of search for rest of followers
     steem.api.getFollowers(the_user,
         start_follower,
         'blog',
         1000,
         function(err, result) {
             //console.log(result);
             followers = followers.concat(result); //get the rest of followers
             //console.log(followers);
             if (count < i) {
                 count++;
                 get_rest(followers, qty);
             } else {
                 console.log(followers);
                 get_follower_data(followers);
             }
         });
     //console.log(followers);  
 }

 function get_follower_data(followers) {
     var follow = [];
     for (let i = 0; i < followers.length; i++) {
         follow.push(followers[i].follower);
     }
     steem.api.lookupAccountNames(follow, function(err, result) { // steemjs API to find the data for each individual follower
        
         follower_array(result); // put the result to follower array
     });
 }


  • Form the array of objects wit all the data of followers. This array is formed with the necessary parameters for ease of sort function.
function follower_array(result) {
     var user_data = [];
     for (let i = 0; i < result.length; i++) {

         var steem = (parseFloat(result[i].vesting_shares) + parseFloat(result[i].received_vesting_shares) - parseFloat(result[i].delegated_vesting_shares)) * spr;
        // form array of objects to be used in soering function
         user_data[i] = {
             "name": result[i].name,
             "shares": steem.toFixed(0),
             "post_time": result[i].last_post,
             "vote_time": result[i].last_vote_time,
             "created": result[i].created
         };
     }
     write_div(user_data); //send the calculated data to WRITE_DIV for DOM display.
 }


  • Function to display all the calculated results. Here JQuery is used because append() function performs much better than "innerHTML+=" function.
    Especially for users above 5000 followers, innerHTML DOM manipulation crashes.
function write_div(user_data) {
     var key;
     // Clear screen
     document.getElementById("user").innerHTML = "";
     document.getElementById("sp").innerHTML = "";
     document.getElementById("created").innerHTML = "";
     document.getElementById("post").innerHTML = "";
     document.getElementById("voted").innerHTML = "";
     var timenow = utc_Now(); //calculate current time as UTC

     for (let i = 0; i < user_data.length; i++) {
         var str = "https://steemit.com/@" + user_data[i].name;
         var lin = user_data[i].name;
         $("#user").append(lin.link(str) + "<br />"); // write usernames
         $("#sp").append(user_data[i].shares + "  Steem" + "<br />"); //write user SP
         var crea_time = Date.parse(user_data[i].created);
         var diff = timenow - crea_time;
         var diffdate = parseFloat(diff / (24 * 3600 * 1000));
         $("#created").append(diffdate.toFixed(0) + "  Days Old" + "<br />"); // write account creation date
         var pst_time = Date.parse(user_data[i].post_time);
         var difpost = timenow - pst_time;
         var difhour = parseFloat(difpost / (3600 * 1000));
         if (difhour > 40000) {
             $("#post").append("User never posted!" + "<br />"); //write last post time
         } else {

             $("#post").append(difhour.toFixed(2) + "  Hours Ago" + "<br />");
         }

         var vt_time = Date.parse(user_data[i].vote_time);
         var difvt = timenow - vt_time;
         var difvthour = parseFloat(difvt / (3600 * 1000));
         if (difvthour > 40000) {

             $("#voted").append("User never voted!" + "<br />"); //write last vote time
         } else {

             $("#voted").append(difvthour.toFixed(2) + "  Hours Ago" + "<br />");
         }


     }
     // EVENT LISTENERS FOR SORTING
     document.getElementById("buttondowndiv_1").addEventListener("click", function() {
         key = 1;
         sort_data(user_data, key);
         write_div(user_data);
     });

     document.getElementById("buttonupdiv_1").addEventListener("click", function() {
         key = 2;
         sort_data(user_data, key);
         write_div(user_data);
     });
     document.getElementById("buttondowndiv_2").addEventListener("click", function() {
         key = 3;
         sort_data(user_data, key);
         write_div(user_data);
     });
     document.getElementById("buttonupdiv_2").addEventListener("click", function() {
         key = 4;
         sort_data(user_data, key);
         write_div(user_data);
     });
     document.getElementById("buttondowndiv_3").addEventListener("click", function() {
         key = 5;
         sort_data(user_data, key);
         write_div(user_data);
     });
     document.getElementById("buttonupdiv_3").addEventListener("click", function() {
         key = 6;
         sort_data(user_data, key);
         write_div(user_data);
     });
     document.getElementById("buttondowndiv_4").addEventListener("click", function() {
         key = 7;
         sort_data(user_data, key);
         write_div(user_data);
     });
     document.getElementById("buttonupdiv_4").addEventListener("click", function() {
         key = 8;
         sort_data(user_data, key);
         write_div(user_data);
     });
     document.getElementById('spinner').style.display = "none";

 }


  • Side function for calculating current time in UTC. This is important to find the exact age of the posts, comments and user age since the time received from Steem is in UTC.
function utc_Now() { // Function for calculating current timestamp in UTC
     var now = new Date;
     var utc_now = now.getTime() + now.getTimezoneOffset() * 60000; //convert now to UTC since post date is in UTC
     return (utc_now)
 }


  • Sorting function according to the selected buttons. It can be ascending or descending. The keys are sent from the event listener.
 function sort_data(user_data, key) { //Sorting function
     user_data.sort(function(a, b) {
         if (key == 1) {
             return parseFloat(b.shares) - parseFloat(a.shares);
         }
         if (key == 2) {
             return parseFloat(a.shares) - parseFloat(b.shares);
         }
         if (key == 3) {
             return Date.parse(a.created) - Date.parse(b.created);
         }
         if (key == 4) {
             return Date.parse(b.created) - Date.parse(a.created);
         }
         if (key == 5) {
             return Date.parse(a.post_time) - Date.parse(b.post_time);
         }
         if (key == 6) {
             return Date.parse(b.post_time) - Date.parse(a.post_time);
         }
         if (key == 7) {
             return Date.parse(a.vote_time) - Date.parse(b.vote_time);
         }
         if (key == 8) {
             return Date.parse(b.vote_time) - Date.parse(a.vote_time);
         }
     });
 }

Connect

@FireDream - Steemit
@firedream#3528 - Discord

Links

Steemit Followers Tool
GitHub for Steemit Followers

Proof of Work

Sort:  

I love the simplicity in your coding. Perfect for newbie!

Thank you Vish, I try to keep it as self-explaining as possible.
FD.

Thanks for the contribution!

It's a cool little site, albeit not very unique, but still pretty useful. Do you have any plans to add features?

Some feedback for future contributions:

  • The commit messages could be a lot better.
  • All the comments are good, but sometimes they are too wide because of the fact you add them inline. In my opinion it would be better to add the comments above the relevant bit of code on their own line when this is the case.
  • Currently I think the post is a little bit cluttered because of the amount of code snippets. I think just adding snippets for code that need to be explained it better than adding it for everything (e.g. a sorting function is straight forward, so doesn't really require you to add the code to the post).

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]

@amosbastian, thank you for your comments.

Do you have any plans to add features?

This tiny website is a collection of my FDSteemTools page where I collect all my tiny homemade gadgets for Steemit.
So, as I make more of them I will ad them to the index.

The commit messages could be a lot better.

I know, I suck at Git...I will improve it. Can you address me a good example to benchmark?

All the comments are good, but sometimes they are too wide because of the fact you add them inline. In my opinion it would be better to add the comments above the relevant bit of code on their own line when this is the case.

This is noted.

Currently I think the post is a little bit cluttered because of the amount of code snippets. I think just adding snippets for code that need to be explained it better than adding it for everything (e.g. a sorting function is straight forward, so doesn't really require you to add the code to the post).

As an amateur, I made my first sorting with for loop...It took me some time to learn to sort the arrays this simple way. I thought this could help someone. But I agree, it is not a tutorial.

Thank you again for your time and valuable feed-back.

FD.

Hey @firedream
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

@firedream
Really good knowledge about steemit and also good coding power show in it....i appreacite by u dear good man.

Coin Marketplace

STEEM 0.76
TRX 0.09
JST 0.073
BTC 54812.07
ETH 4111.68
BNB 591.20
SBD 7.02