I've always tried to learn new technologies. It's super cool. I loved Steemconnect, now HiveSigner, and I coded a lot with it, though I never published anything. I tried playing with the condenser and directly with the blockchain. I've made quite a few apps, but I never actually played with one of the coolest, Keychain.

I love keychain. You fill in your name, press a button, and your browser extension fills in the key and broadcasts the transaction. You don't even need to fill in your name if it gets stored. It's what powers peakd.com and it's super flexible.

I wanted to try it out. I wanted to make a "transfer" button. Easy, right? I thought I'd have it finished in a few minutes.

The Vue dream

So I went to Vuejs and I used a project I had already started, put in some Keychain code, a button, and reloaded. Nope. Turns out Keychain injects the code AFTER the page loads, so all my code was useless because it relied on having it at the beginning. It's also not isolated like it pretends to be in the example repo, but instead it's easier to read it from the window global.

And then I had to attach it to the button and listen to the keypress and execute the function. Easy in HTML, but in Vue? It should also be easy! That's the "good thing" about Vue, it's advantage, the thing that makes it sell. Yet I was not able to do it. I spent 1 hour figuring out Keychain, then 2 hours fighting with Vue.

The Bulma helpers

So I went to Bulma. I remembered I had seen a really cool package called bulma-start that came ready to set up a website! But I didn't want to use raw HTML. It's too ugly with all the <></> opening and closing. It's barely readable. The bulma-start package doesn't come with Pug, though, and that's the prettiest HTML template engine and renderer (what Sass is to CSS).

Soooo. Because I knew Keychain is simple, I decided to just go and start including Pug into it. I even published the package because I know I'll be using it a lot. It's a download, install and use kind of scenario without an extensive setup process. The only bad part is that it doesn't come with a server, but the good part is I can just upload the dist folder into any server and it'll work.

The thing itself

For the sake of testing Keychain (opening the html file directly doesn't let Keychain inject the Javascript variable into the Window global), I used a Python server. Which turns out it's also not SimpleHTTPServer like I always used it (python -m SimpleHTTPServer) but now with Python 3 it's python -m http.server. That's my favorite test server: just write it in the console, press enter, and boom, my files statically accessible on port 8000.

The worst part is that the button code is just a couple of lines of code.

<div class="button" onclick="transfer()">transfer button</div>
<script>
const transfer = () => window.hive_keychain.requestTransfer(
  "cryptosharon",
  "lunaticpandora",
  "0.001",
  "Hive_Keychain test on Vuejs",
  "HIVE"
);
</script>

Yep, that's it. I could have written a simple HTML file and tested it, yet decided to spend 5 hours setting up a "coding environment" in order to... I don't know, be a perfectionist. I want to do a full app eventually, someday, and maybe I thought this was going to be it, the start of the start. Maybe it will, but I spent so much of my time making the pre- that I'm not sure when I'll have the time to do the do.