Posts

Kolony.org Dev Log - episode 1

avatar of @hivetrending
25
hivetrending ๐Ÿ•
@hivetrending
ยท
0 views
ยท
4 min read

TLDR; Twice built Kolony.org, a Hive front-end app. It's barely usable now and will improve over time.

Months ago I started building a minimalistic Hive front-end called Kolony.org. It was mostly written using vanilla javascript and relied on @hiveio/hive-js for fetching Hive data. Unfortunately, the kludge of markup and vanilla JS quickly became difficult to extend and maintain. The app is semi-usable right now; things are breaking often, and it's not ready for prime time.

I'm about a month down a road of retooling and rewriting the app and wanted to share some updates. First, let's cover the exciting bits for users, and then I'll discuss interesting points for fellow devs.

What is Kolony.org?

Kolony.org is not for everyone. This is why:

  • It is a minimal, text-only interface for Hive
  • It renders no pictures, video, or audio.
  • It is designed to focus on longer text discussions and comments.
  • It has no built-in wallet

Any of the above could change later on.

Other interesting "features":

  • Kolony hides comments from common bots. The idea is to have a clean thread of comments to engage with. Bot comments don't help.
  • The trending pages look a little different, because the posts are sorted by the count of votes instead of stake-weighted votes.
  • Body of posts is not rendered in Kolony. Instead, Kolony links to the original app the author used to publish the post.
  • Kolony routes look similar to condenser and PeakD. For most pages, it will be possible to replace only the domain in the URL to switch to Kolony. I.e. https://hive.blog/trending -> https://kolony.org/trending

Before the recent rewrite, Kolony routing looked like Reddit. The routing looked like this:

  • /u/hivetrending (view user profile)
  • /k/introduceyourself (view tagged content) (where K could be referred to as a sub-kolony)
  • /p/@someuser/permlink (view comment threads for a post)

While this was a nice experiment, I threw it out because it would be annoying for other devs to work with. Other Hive apps like hive.blog and PeakD agree on common routing conventions, i.e. @user/post-permlink.

Future plans:

  • Add HiveAuth integration so Kolony can function as a progressive app (PWA) mobile app and run in other places where Hive Keychain isn't present, like mobile browsers.
  • Allow kolonists (just invented this word, pretty cool, huh?!) to submit links to ANY content on the internet as a starting point for discussion. Not sure exactly how this would work, but it will be something like a combination of Custom_JSON and LeoThreads.
  • Allow kolonists to start a new top-level thread directly from Kolony without linking to content.

Re-learning Web App Development

When further developing Kolony, I decided it was time to up-level web dev skills and learn some new tools, like:

  • VSCode (I resisted far too long)
  • Vue.js ("The Progressive JavaScript Framework")
  • Nuxt.js ("The Intuitive Vue Framework")
  • Wtf? Frameworks on top of Frameworks?
  • dHive instead of hive-js

Why Vue.js / Why Nuxt.js?

There are many frameworks to choose from; the most popular is Facebook's React.js. I struggled with React for a week and decided it sucks ass, almost as much as trying to use Docker with IPv6. Also, I'm not too fond of Facebook/Meta and prefer not to touch anything they make.

I found Nuxt.js and got started quickly. It feels more intuitive, and I had no difficulty getting things to work. I also found this excellent Vue.js documentary. I felt like Vue.js is a good fit for Hive. No corporate overlord, grassroots, and open source.

You're probably confused by how I mentioned two names: Nuxt and Vue. I should take a minute to explain. Vue.js is a client-side Javascript framework for building single-page apps (SPAs). Nuxt.js builds on top of Vue.js and adds extra features like server-side rendering (SSR) and built-in progressive-web-app (PWA) support. So when building a Nuxt app, you're also using Vue.js, and you can pull in Vue plugins to your app.

I resisted VSCode for a long time because I was comfortable with SublimeText, which offers very similar features. VSCode has grown to be the most popular tool for web developers and offers a rich set of plugins, so I decided to give it a try. With VSCode, I'm using the Vetur extension for Vue syntax highlighting and Prettier extension for code formatting.

I'm enjoying developing for Nuxt. The code organization of components is easy to work with. Each component includes markup, script, and styles. I was able to adapt existing HTML and JavaScript into Vue files relatively quickly and painlessly.

To make use of Javascript's newish async/await syntax, I switch from the @hiveio/hive-js npm package to @hiveio/dhive. After switching I haven't had many problems. DHive's documentation is outdated and I found it helpful to reference the main interface file here: https://gitlab.syncad.com/hive/dhive/-/blob/master/dist/dhive.d.ts

I think that's it for now. It's time to go break the app in clever new ways. If you're brave enough to try out Kolony, please let me know what you think.