Kolony.org Dev Log - episode 2

TLDR; Kolony gains a few kolonists and the app sees some development.

Kolony has continued developing in the last few weeks. In addition to numerous tweaks and fixes, major changes include:

• Hive Keychain + HiveAuth login flow.
• Communities Bar
• Rendering post bodies
• Random Button

Thanks to @nane and @cryptoniusrex for test driving and sharing feedback.

Login Flow with Keychain + HiveAuth

I wanted Kolony.org to have a login flow that works anywhere. This is a necessity because the app can be “installed” as a PWA. Eventually this PWA could have offline social actions and writing drafts that sync up to the blockchain when your device reconnects to the internet.

Hive Keychain is convenient and works very well. Except places where it’s impossible to install browser extensions. HiveAuth is a little less convenient but it works on any device/browser as long as you have your keys stored in a mobile wallet. To get the best of both, Kolony supports both Hive Keychain and HiveAuth.

Kolony will first attempt to sign in using Keychain, and if that fails it will fall back to using HiveAuth. Both flows have been tested and are working. Kolony can publish comments using either method.

There is more work to do here. The HiveAuth experience can be smoothed out. For example, when you are actively using the app you need have a HiveAuth session open to your Keychain mobile app, so that you can approve transactions. This takes some getting used to and the app itself can do a better job of UX to hint at what’s going on, what the user needs to do.

Also, the login flow styling and graphics are ugly and need an overhaul. HiveAuth documentation includes fonts, graphics, and mock-ups that developers can use. I’d like to implement some of these guidelines for Kolony’s login flow. Thank you to @arcange for producing those resources and sharing them with devs. Also thank you to @primersion who authored a HiveAuth integration guide which I found to be a useful reference.

Communities Bar

I wanted to add some minimal communities support to Kolony. To this end, a second bar was added to the header for the purpose of community navigation. For now the list of communities is small.

To allow the bar to keep a low profile on mobile devices, each community was given a short name. I chose 4 of the most popular communities: Foodies Bee Hive, Hive Gaming, Photography Lovers, Movies and TV Shows.

Clicking on one of the communities links on the bar takes you to a list of the current trending posts in that community. From that list you can click through to engage with a post and add comments.

In the future the Communities bar will become more complex. A logged in user should see their subscribed communities listed. And it should be possible to scroll to the right to view additional communities on top of the 4 that I randomly picked.

Rendering Bodies of Posts

Early testers of Kolony gave feedback that the app needs to show the bodies of posts. It is inconvenient to have to navigate to a different site to read a post and then come back to Kolony to comment on it. So I caved and added the code to render the post. Now you can stay within Kolony while reading posts.

In the long run this decision may be the wrong one. Kolony was meant to let folks submit interesting links for folks to comment on. In those cases you’ll be forced to navigate to other sites, read the content, and come back to respond to comments. But since this functionality isn’t yet implemented, no harm done.

This change to post rendering also opens doors for a random button.

The Random Button

My current favorite feature of Kolony is the Random page. /random will show you a randomly selected, recently published post. You click random and end up reading a daily Actifit report written by someone living in the UAE. And it’s kinda interesting seeing a slice of a different culture and place. This is a fun tool for content discovery.

VueJS Notes

I also wanted to share a few notes on VueJS development experiences.

The more I get used to Vue’s component structure, the more I enjoy it. I can quickly add new pieces to existing components without the fear of breaking something. I am consistently amazed when making changes and they miraculously work correctly on the first save. This is a testament if Vue’s intuitive framework design. I think some of this simplicity comes from the fact that I started with “npx create-nuxt-app” which created the file and folder structure in a standard way. Without that wise organization I would probably spend more time to moving files and code around.

Each Vue component consists of a template, a script, and styles. All of the markup, JavaScript, and CSS for the component lives in one file. Components can be easily nested inside of other components, via the markup. Parameter passing also takes place in markup.

Vetur VSCode Plug-in

The VSCode Vetur plug-in feels like cheating. You can make a new empty file and type the word Vue. The plug-in will prompt you to set up a skeleton Vue file. No need to copy-paste.

Vue DevTools

Vue DevTools is a browser extension that lights up when your browser to a site that uses Vue. I noticed multiple Hive front-ends that use Vue: peakd.com and hive.ausbit.dev. The extension also adds an extra Vue tab to DevTools to help debug Vue apps. I haven’t used the debugger much, but I like seeing the icon light up for random sites that are also building on Vue.

Nuxt Build Analyzer

The last thing I want to cover in this episode is the Nuxt build analyzer. It’s a handy tool for visualization where your app’s bloat is coming from. Kolony is currently around 2.5 MB and I’d like to trim it down.

First, I added a new “analyze” script to the app’s package.json

"analyze": "nuxt build --analyze"

Then you can call the script like npm run analyze

As you can see, a ton of bloat is coming fort-awesome, an icon library, and dHive, a Hive API wrapper.

For fortawesome, I can be more selective about what icons are imported.

For dHive, there are already some issues open related to this. For some reason dHive is compiled in a way that prevents “tree shaking”. WebPack has tricks to remove unused code from bundles, like shaking the tree and see what falls out. But these tricks don’t seem to work on dHive, yet.

——
That’s all folks. Thanks for reading! Stand by for episode 3. If you believe pineapple belongs on pizza, please vote for @pizza.witness.