SteemMakers' website development update

SteemMakers is a community which focuses on uniting, helping and rewarding makers and DIYers on the Steem blockchain. You can find more info about us and how to contact us on our website www.steemmakers.com.

Growing pains

The SteemMakers website came to the alpha stage recently. Having a point in time for evaluation is always good. It allows to reflect on the past and make considerations for the future. As for the website the architecture needs some work to allow for growth. That's why there have been so little updates lately. I have been focusing on researching technologies and learning a lot.

Spaghetti code

Wikipedia defines spaghetti code as a pejorative phrase for unstructured and difficult to maintain source code, broadly construed. Spaghetti code can be caused by several factors, such as volatile project requirements, lack of programming style rules, and insufficient ability or experience.

To explain this to a non programmer it looks like this circuit. It didn't start like this. At first it were just a couple of manageable connections, but over time, each new piece of functionality required to make new connections resulting in this spaghetti of wires.

However tasty spaghetti might be, in programming it tastes very bad and leads to a very high WTF/minute metric.

Javascript modules

If spaghetti doesn't taste well what is better? Well, ravioli is. Ravioli code is where code is split up in separate smaller pieces of code that have clearly defined functionality. They are easier to maintain, loosely coupled and easier to reuse.

Javascript modules are the javascript solution to spaghetti. The issue with the solution is that it is a (quite) recent change in the language and can't be considered to be fully supported. The result is that choices on implementation and tools needs to be made.

Typescript

I have a C/C++/C# background. I'm used to strongly typed compiled languages. Using javascript for @steemmakers keeps giving me the feeling I'm wasting development time because of the tool (javascript) used. It has happened so many times I think of this meme. I'm fed up with it, I need a better solution.

Debugging

Because the SteemMakers started small and is leisure time I didn't put much effort in setting up a development environment. Debugging was mainly done in the browsers' development console. This is manageable but using a full blown Visual Studio development environment professionally it feels like going back to the 80's. These days IDE's exist that help the programmer as good as possible to focus at the task instead of focusing on the tools needed to complete the task.

Vue.js

Javascript frameworks...

I tried not to but I can't evade it any longer. Vue.js is the latest popular kid on the block so I decided to take a look and I must admit I liked what I saw. No framework really stands out over the others IMHO so I decided to search for a combination of all the above that works for me. Vue.js uses MVVM to some extend which I am familiar with and it has very good documentation. I just followed my gut feeling on this.

Combining it all together

Typescript and vue.js allow for modules. Integrating them in Visual Studio Code adds some form of typesafety and intellisense and on top of that I got the debugging working inside VS Code. Basically this creates a new foundation to let the website grow.

What would you like to see next?

We're currently considering several things to do next but we off course appreciate your feedback. What features would you like to see added, what are you missing, what would you like to see changed. Let us know, after all we make this for you!

Help us out

Anyone interested is free to join and help out. The code is available on Github, have a look and join us on Discord!

Utopian proof of work: most important GitHub commits: commit1, commit2. Other smaller commits are related as well.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---