Coinwink Blog

SPOILER ALERT: Reading this article in advance might impact your actual Coinwink Matrix experience and you’ll receive a lower level of satisfaction. Similarly, like someone spoils a movie for you by telling how it ends.

That is why we strongly suggest first to experience the Matrix, and then return here to read the article.

In your Coinwink account, switch from Classic to Matrix, and you’ll see how deep the rabbit hole goes.

Or if you are in a hurry, take a quick look at the demo Portfolio with the Matrix theme that doesn’t require the account.

The CSS Wonderland

During the last month, a lot of front-end updates were made for Coinwink.

The previous CSS styles file was a big mess. Started almost 4 years ago, many styles were inlined or randomly smashed together with !important overwrites and without a structure.

To fix such a chaotic styles file it takes quite a lot of time. These are little fixes but they are time-consuming, and when they’re done, it seems that nothing has changed. Why so?

Because the changes are behind-the-scenes. For example, a bigger invisible click/tap area for buttons. The user doesn’t see or think that there is a difference, but she feels it intuitively.

“What you know you can’t explain, but you feel it.”
― Morpheus

All together, these little changes create a slick and smooth experience and make the web-app feel more like a native app.

What are these app-like changes, you might ask?

• Disable zooming on mobile devices
• Disable text/element selection on mobile devices
• Create bigger invisible touch areas for clickable elements
• Separate :hover and :active states on desktop and mobile devices
• Minimize flickering
• App icon for mobile devices, web app manifest, theme color etc.
• Create custom form elements (inputs, drop-downs, buttons, checkboxes, etc.) with consistent style across all browsers
• Styling scrollbars

And a few more tweaks here and there. Some of these things are implemented “out of the box” in most CSS frameworks, but Coinwink is not using a framework because similar frameworks often result in generic feel or enforce a specific style, and also increase the size of the app more than the custom CSS.

Additionally, during the recent updates, significant structural front-end changes were made. When looking from the outside, they are also invisible.

The new structure allows us to easily change styles, build new front-end features, and we can now create themes.

Introducing the new Matrix theme

The first theme built on the new Coinwink front-end structure is the Matrix.

“The Matrix is everywhere. It is all around us. Even now, in this very room.”
― Morpheus

From the conceptual point of view, the Matrix is another dimension of reality, or a simulation (if the reality itself is not a simulation). The concept has deep meanings across different cultures, and this infuses the Matrix theme with the story and symbolism.

“You take the red pill—you stay in Wonderland, and I show you how deep the rabbit hole goes.”
― Morpheus

A switch to Coinwink Matrix theme is animated and not instant. It creates the effect of a transition into a different dimension.

To experience the Matrix, switch the theme in your Coinwink account.

Similar to other recent updates, Coinwink Matrix theme is extremely lightweight. When activated, it adds only around 20KB of size.

It’s the first theme – a showcase of new possibilities. The dynamic background is now probably too active, so in the near future, it will be possible to turn it off or make it less prominent.

More themes are planned for the future.

Above are presented Coinwink app mobile views. Coinwink works equally well on both desktop and mobile devices.

The Coinwink source code, including the Matrix theme, is available on our GitHub.

As usual, your feedback is appreciated!

Let us know what do you think about the new Matrix theme? What other themes and features you’d like to see in the future?

---

A quick overview of the newly added Coinwink features for the beginning of the summer.

Drag & drop coin sorting

Drag and drop to change your watchlist coins order.

Re-ordering works on desktop, and on mobile (long tap to activate dragging).

This is possible because modern browsers are now capable to perform many different functions natively. Using the HTML5 dragging feature and this little library, the new drag & drop functionality adds only 2KB to the overall Coinwink app size. In the old days, it would have been at least 20x that size, and a complicated solution.

Extra data

Click the price column name to switch between Volume and Market cap views.

The numbers are formatted in millions. Such formatting allows showing both small (thousands) and big (billions) numbers in a unified and compact way. If having trouble reading the numbers, click the coin logo to open its CoinMarketCap page where the volume and market cap has the standard formatting.

Optimization

Additionally, now the currencies are converted on the front-end. It means that there is no more need to send converted coin prices over the internet as the calculations are simple and can be done on the client-side. This saves more than 0.5 MB, and the loading speed is significantly faster.

The above Pingdom speed test is done from Frankfurt, Germany.

Bug fixes

Some portfolio bugs fixed: Return on Investment (ROI) calculation and percentage view should work smoothly now.

Your feedback

Coinwink is constantly growing and improving. More features are coming soon!

Send us your feedback to [email protected].

That’s it for now. Thank you for reading.