SteemMakers website update

So jef, where have you been hiding, what's next? The image above says it all. I've been learning, and learning yields no direct results. The last two weeks have been a little frustrating. Every time I wanted to add a feature there was something new to learn, and trying to use that new knowledge I hit obstacles that required some more knowledge.

Development environment

A basic aspect of website development is being able to test certain features away from the production server. In the current conversion to a SPA I never had the need for this until now. Unfortunately it didn't went smooth at all. The basic idea is simple but the Vue typescript example provided by Microsoft is incomplete and so was my knowledge. Somehow the build was not taking my data that was to be switched between development and production. When many hours of googling did not yield to a solution I tried stackoverflow: Dynamically add global constant in webpack. I'm not the type of person to post a question and stop searching. The next day there still was no response and somehow I ended on this blog post. There are some small details at the end of the article that caught my eye. Putting all things I read together I realized there was something missing in the typescript template I started from. Searching for confirmation i found nothing in the provided documentation but found an issue on github pointing in the direction I was on.

The vue typescript template build script:

"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
}

the vue template:

"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},

And sure enough simply changing the script to

"scripts": {
"build": "SET NODE_ENV=development&& webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},

solved the problem. I hate it when in the end it proves to be such a simple fix.

Spinners for asynchronous loading

The previous update showed how the paging was added and how the new site now also allows for content discovery. We don't store the articles ourselves, the content is fetched from the blockchain, but we do keep references so we know which articles to fetch. Because we try to serve these previews as fast as possible they are loaded asynchronously. When the connection is slow, or the blockchain servers are under heavy stress, this might lead to confusing behavior to the user. The idea was to add a simple spinner for every article while loading. A simple feature at first but it again proved to be a major stumbling block. The root cause being the javascript language itself. It just seems it was not designed for developing this kind of things. It is capable of doing so, but it's a mess and hard to debug. The issue here was that Vue js claims to be similar to MVVM which I know very well but there are so many edge cases where it behaves differently or where one needs to think about how stuff works behind the scenes. I again resided to the Vue.js forums to ask for help. To put it blunt a workaround needed to be implemented because of limitations withing the notification system. This is a simulation of a slow connection. You can see how articles are loading asynchronously:

Vuex and login

Vuex is a state management system for Vue.js applications. In the end this didn't prove to be too hard to implement but coming from an object oriented background it feels strange to use a global object like this. I still wonder how big applications manage to prevent their design of becoming one big spaghetti.
The basic login process is now also ported to the SPA.

What will come next?

Next up is managing the user rights and give certain user rights to add articles to our database from within the app. I hope that doesn't turn out to be as frustrating as the past two weeks.

Help us out

Anyone interested is free to join and help out, all work is available on Github. More information can be found on our website www.steemmakers.com, have a look and join us on Discord!

Proof of Work Done

Repository: https://github.com/JefPatat/SteemMakers/tree/master/website

My github account: https://github.com/JefPatat

Relevant commits: several commits from May 16th to May 27th: https://github.com/JefPatat/SteemMakers/commits/master

Image source: the internet...