Introducing STEEM Price Widget v0.2 with All-New Features

mooncryption(62)

Published in

#utopian-io

Words

991

Reading

5 min

Listen to this post

~7 min

Hello everyone :) This is my second development contribution on Utopian.io, where you can get rewarded for contributing to open-source projects. (whether you're a developer, artist, thinker, or anyone else!)

In this post, I'll be highlighting the newly-developed changes in Version 0.2 of the STEEM Price Widget. Steem Price Widget allows you to embed a customized, personal and accurate STEEM ticker into your website!

All the New Features (Comprehensive List)

Below, we'll cover a list of all of the major new features in the new version, excluding the many minor bug fixes that were made.

Customization Tool
- Built from the ground up, the new customization tool allows you to check many options and customize everything from the width/height to even the color of the border. This allows you to make sure the widget will blend in well with your website. After making your personalizations, you can easily copy your newly-generated code at the bottom of the tool.
New Base Currencies
- v0.1 of the price widget relied on USD as the main base currency. However, not all of us live in the United States or rely on the Dollar as our main currency. Thus, we've added support for expansive base currencies. Currently, there are 3 main base currencies (USD, BTC, SBD) but the code currently allows for easy addition of more! Soon, the customization tool will allow you to set your fiat base currency to anything from the Japanese Yen to the Mexican Peso.
New Loading View
- v0.1 of the price widget saw a gnarly, inconsistent loading view, with some screens reporting just the word 'loading' while others reporting a spinning ellipse (which was supposed to be a circle!). We've fixed all of the loading concerns with a brand-new loading view that will look the same no matter what platform you're on!
All-New Redesign
- An all-new version calls for an all-new redesign. We've ditched HTML4 and moved onto HTML5 APIs plus the famous Bootstrap CSS foundation. Everything has been retouched, including the top panel of the widget, all of the fonts, the padding/spacing, the color scheme, and more.
24-hour Price Movement
- v0.1 of the widget only allowed you to see the current price of STEEM which may not be everything you want to know. Thus, we've added in a 24-hour price movement percentage. If STEEM moved up 10% in the last day, the percentage shows up green and says (+10.00%). Likewise, if STEEM decreased by 5%, it shows up red as (-5.00%).

The above descriptions cover all of the front-end major changes in the new version. Below, we'll touch up on a few of the biggest changes in even more detail.

Complete Redesign

There's not much to say except everything has been retouched and redesigned in this new version!

Below, you can see the differences for yourself (left is version 0.1, right is 0.2):

New Customization Tool

Check out our new customization tool at this link. Here's a sample:

You can make any personalizations you want on the left-hand side of the page, and the preview is located at the right-hand side. For example, if you're posting on a Bitcoin blog, you might want to use BTC as the default base currency. Additionally, you might not want the background to be there, you may want the width to be slightly large, and you may want the border to be orange.

With the tool, you can easily add in all these customizations and see the result to the right. If you like it, you can easily copy the code at the bottom of the page.

Upgraded Loading

See the GIF at right for a preview of the all-new loading animation!

Additionally, loading times are now much faster, meaning you won't be seeing this animation for long :)

Base Currencies

Base Currencies are the currency in which prices are displayed in. If you live in the United States, when you go shop at a store, the base currency is likely USD. If you pay in Bitcoin, the price may be given in terms of BTC.

Similarly, our widget wants to be inclusive in terms of base currencies! To the right, you can see how easy it is to switch base currencies with the Steem Price Widget.

Currently, we support the United States Dollar USD, Bitcoin BTC, and the Steem Dollar SBD. Soon, we'll be adding even more base currencies from other countries and regions.

24-hour Change

To the right, you can see a screenshot of the new widget.

Note the red (-2.88%) in the corner of the price. This all-new 24-hour change monitor tells you:

the direction the price has moved in the past day
how different the price is

For example, from the image at right, we can tell STEEM has decreased in price about 3% in the past day.

Proof of Work

As this is a Utopian post, it is customary to add proof of work to prove that you are the developer of an open-source project. My Github username is also @mooncryption and you can see that @mooncryption on Github added my Steemit username and Steemit links to many of the widget pages.

Additionally, if you hover over the information i button at the bottom of the widget, you'll see a link to my Steemit profile as well. All of my commits are available publicly on the project repository and many of them are even PGP-verified.

Lastly, you can look at the GitHub Release Notes for this release and see my Steemit link embedded in there too :)