Hello everyone! Today I will be continuing my series of programming diaries updating my father’s browser extension. Today my goal is:

• Make a circle around the user’s profile picture that represents their current voting power

Let’s begin!

Programing

Making a circle around the picture

First, I want to create a file for this called profilePictureDisplay.js. This file will be specifically for updates to the profile picture display. Currently this is the only update I’m envisioning for the profile picture display, but you never know what ideas I or someone else may have in the future.

The user pic has a class of userPic. We can use this to select it, and then style it with boxShadow to make a circle:

Representing Percentages

To represent the percentage, we will make a new wrap to go behind the profile picture visually. We will then alter the percentage of green and red in the circle depending on the voting power (which we will set in the function). This makes use of the conic-gradient function in css:

I'm very thankful to have AI tools to help me with CSS. This would have taken a lot longer 4 years ago.

We will then update our Java Script to create this wrap and the ring and update the percentage:

Linking to voting power

Now, all I need to do is link the visual display to the actual value for the user’s voting power. Luckily, my dad already made a function for retrieving the user’s voting power. I just need to make a function to retrieve the username from the page:

Plugging the display update function into the mutation observer wound up being very tricky because it was recursively triggering itself. This caused the page to overload and crash. I had to add a silencing mechanism that made it ignore updates it creates (let's hope this doesn't create bugs). Now the voting power display is linked to the user’s actual voting power, and will update whenever the user does anything on the page.

Conclusion

Thanks for reading this! My hope is that this visual element will help users gauge how many votes they can make, and will improve physical curation experience for people. Please let me know what other features you’d like to see implemented in this extension! Have a nice day!