The Magic Frog: Better Website Performance

in utopian-io •  11 days ago


image.png

Repository

https://github.com/mktcode/the-magic-frog

About the Project

the-magic-frog.com

The Magic Frog is a Bot/Website utilizing the STEEM blockchain to reward everyone involved in a collaborative storytelling project. By submitting small pieces of text (and even images), that the community can vote on everyday, the story evolves and sometimes takes quite strange, funny or interesting turns.

The Magic Frog is currently available in English, French and German and more languages will follow!

Vuex Store

I realized that the websites became very slow with increasing length of the stories. This is because all data was fetched before serving the page, in the asyncData method of the Nuxt framework. Here's the former code: https://github.com/mktcode/the-magic-frog/blob/15ce394f223919b6a97a9c7dc14750f3fd4144c7/pages/index.vue#L270

The solution could have been to simply move all this data fetching to Vue's mounted method, so that it happens after the page has been served.

But since I learned a lot more about Vue.js in general, since the beginning of this project, I wanted to implement this new knowledge. Namely making use of Vuex, Vue's state management.
So I started with creating a Vuex store and moving the user authentication to it.

For this I also made use of my (still very simple) VueSteemconnect plugin for Vue.js.
There's a plugin file to integrate it with Nuxt.js and then it is used in the store to connect the user and fetch the account details.

To have a better separation of code I moved the getters, mutations and actions to their own respective files.

Then I started to move more and more data fetching and handling to the store.

All data is now handled by the store, making the page and component files much smaller and removing the hassle of passing global data through components, like here.

The page now loads much much quicker. Before, you had to wait up to 30 seconds, depending on the network. Now the page shows up almost immediately!

Other Fixes/Changes

First of all I want to say Thank You to @ienrikex for his awesome work on the graphics for the project. You can already see the new frog and the new pot of gold on the website. More new graphics are being made and they already look so good. Honestly, @ienrikex... THANK YOU!

Comment Length Bugfix

I noticed that for some reason someone was able to submit a comment through the website longer than the allowed 250 characters. To better prevent this to happen I added a few more checks.

https://github.com/mktcode/the-magic-frog/commit/35dfd72a759797fb05903478eaf9a9d80f47d519

Loading Animations

Since the data is now fetched after page load, I added some more loading animations to the Hall of Fame and the Archive.

https://github.com/mktcode/the-magic-frog/commit/b49dd681f7e752eee72ff52be3f5db3aafeab98e

"Read More" Bug Fix

I recently decided to show only the first 10 parts of the current story, so that you don't have to scroll endlessly to the bottom of the page to make your submission.
There was a bug in that, preventing the story to show at all, if the story still has less then 10 parts. I fixed it by making the parts to show a computed property instead of using this ugly range method in the for loop.

https://github.com/mktcode/the-magic-frog/commit/e0fbf0b7e6057d700956ddb702d0024906b607a6

Changed Env Vars For Steemconnect Login

Before, there was an env var for the SCHEME, HOST and PORT. From that, the Steemconnect redirect URL was build and the locale was fetched from the HOST's subdomain.

Now there's only a SC_REDIRECT_URL and a LOCALE env var.

https://github.com/mktcode/the-magic-frog/commit/4dc69c57cb363efa4df80619d1b4f306bb3ee53b

Next Steps

The next steps will include more visual updates, maybe a complete redesign, based on the new graphics.
There will also be more focus on promoting the project and launching more languages. I hope to launch a Russian and Chinese version soon.

Get In Touch

If you want to participate in the development or promotion of the project or if you want to be the community manager for the Russian or Chinese version (or basically any other language) of The Magic Frog, get in touch with us on our discord server: https://discord.gg/dAMca9

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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]

@mkt, interesting project.

·

Thank you @cryptospa! You should participate in telling the stories. It's fun and you will get a SBD reward for it! You can read about it here: https://busy.org/@mkt/the-magic-frog-about-rewards

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 5 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 18 SBD worth and should receive 78 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

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

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

Vote for Utopian Witness!