How I spent 5 hours trying to make a pressable button

in GEMS4 years ago

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.

Sort:  

Good job! I've actually used Vue for the past few years. Amazing framework! I even used it for the hive.io website: https://gitlab.syncad.com/hive/hive-io

Feel free to check it out and try to run it. It uses another framework on-top called "Nuxt", which gives it an opinionated structure and simplifies/enhances things.

Whenever I saw Nuxt, I thought it was Vuex. That's why I never looked at it, thinking it was just the Vue storage module hahaha. But when you said "which gives it an opinionated structure..." you made me realize that they're different things. I had a world hidden away from me due to a simple name confusion. 😂 I checked their websites and it sounds really interesting. I'll have to try it out.

I'll probably do as you say. I'll download hive.io and run it. It'll be useful to have a pre-populated environment to learn how things work. I think that's the most effective way of learning sometimes: by example. So thank you for the offer and for showing me that. :)

I think that's the most effective way of learning sometimes: by example. So thank you for the offer and for showing me that. :)

Well, that's how I learned. And tbh, I think it's one of the best ways to learn. Ofc you should develop your own style, but using an already functioning structure can be really useful. And after all, much of that structure is opinionated. Some people prefer to have their code in as few files as possible, while others want to create components out of everything. Gotta' find your own way, but give yourself time and enjoy the progress!

I learned Nuxt, then I learned Nextjs, then I got a job in February, and I've been working as a web developer since then for various clients... 😂😂

Thanks? Kdjdjsjdjlslkhjslls

Thanks. 😊

Congratulations! Which do you prefer? Also, do you have some things you developed you can show? 😃

Posted via inji.com

I can show you some on chat since they're privatish projects. (Are you on Telegram?)

Tbh, I've used Nextjs way more because when I had some issues with Nuxt, it was harder to find support, and since I was on a short timeline, I simply jumped ship. This was mostly due to numbers, not personal preference; I just saw there was like 5x+ the userbase on Discord and Github and was being pressured with a few k on the line.

I have since resolved the Nuxt issue I had, but I have way more experience with Nextjs, so if I had to choose, I'd pick Next because I have a few templates ready and more google-fu muscle memory, and could finish a simple site in an hour, but I'd still like to keep learning Nuxt and would work on such a project if the need arose.

Wow... 5 hours? O.o'

Interesting art. What is it for?

i meant: What's the use of the button you created?
Anyway, How's the lockdown going?

The button is a donation button. Ideally, people will press it and send me money 😂 or they can configure it to send money elsewhere.

Lockdown's locky. Venezuela hasn't been very flexible. I've gone out maybe twice since February and haven't been able to purchase essential items I need for work. I've also earned very little, so life's hard. But I'm pushing through!

How about you? How's lockdown on your side?

Here in Romania we have some interesting measures for stores: mandatory masks, social distancing.
For some stores and banks we also have temperature screening.
People who rule us imposed measures because of a virus.
i have a curiosity:

  • What's the proof for the virus?

What's the proof for the virus?

250+ countries around the world, tens of thousands of doctors in each country, that's tens of millions of doctors. At least a few doctors would have spoken out, no? Statistically, if the virus did not exist, some doctor would have said so, no?

In fact, I reckon that if doctors all around the world were noticing the pattern of "no virus but they tell me to say there is a virus", hell would break loose with all the doctors saying that the virus is a hoax. But so far there is not even one news article about this.

So, I say, it's more likely that the virus does exist.

250+ countries around the world, tens of thousands of doctors in each country, that's tens of millions of doctors.

Somehow they concluded that there is a virus. How did they end up at this conclusion?

i appreciate your efforts ♥. well it is difficult to concentrate in one thing even for 1 hour for me. :p keep it up !

I'm blessed with patience and passion. :P