The GFTW Hackathon.
Published 31 May 2020 at Yours, Kewbish. Also published on Dev.to. 1,228 words. Subscribe via RSS.
This post is unlisted and has been archived. This doesn't represent my best work; please check out the posts listed here instead.
Introduction
For the last bit, I’ve been working on a #gftwhackathon (Grant for the Web) submission. I’ve documented my progress in two Dev.to posts, which I’ll put below. This post format will be a little different, but here we go:
But wait… what is Web Monetization?
Web Monetization is a proposed browser API (proposed, mind you. It’s not an actual thing. Yet.) that supports creators through the use of micropayments. Basically, with a browser extension (right now, only available through Coil.com, but sure to change soon), consumers can stream micropayments to content creators. Right now, it supports YouTube and Twitch natively, and web developers can simply include a <meta>
tag in their head.
If you’re interested in knowing more: check out the Web Monetization website.
But what’s this #gftwhackathon thing I keep blathering on about?1
The GFTW Hackathon is an initiative partnership between Dev and the GFTW team (which is then made up of Mozilla, Coil, and Creative Commons). They’re looking for ideas and proposals for their larger grant (but I’m too smol oops-).
I participated in this hackathon because I’d get some merch and exposure because I’d like to get more involved in the Dev.to community! As well, learning is always cool. Also - web components!
Read the full Dev.to articles
Original article available here, and my project submission here.
The Journey
I went through a bunch of ideas - a Vue component library, implementing this in another site, or adding it to my existing sites.
Eventually, I settled on this idea, and for the entire month of May (minus an OS reinstall [aside below] and plus tonnes of Google searching), I spent some time exploring Web Components and Javascript!
I’ve built Revshare.js, a small Javascript library to make revsharing with Web Monetization easier. It provides an interface for a <rev-share>
element with a pointers attribute to make probabilistic revsharing easier.
[In-text aside]: I might write an entire post about this, to be honest. It would be a great story.
Anyhow, my hard drive somehow got corrupted, and my HP BIOS got scronched. I tried refreshing Windows, reinstalling the BIOS to reset my partitions, everything. And then I realized that my hard drive was just killed. Of course, it being Spring Break™: Extended Outtakes, almost no store were open. Long story short, I frantically bought something off Memory Express and somehow cobbled Watson back together.
Really made me seriously consider finally just switching 100% to Manjaro. But then I realized that I didn’t want to figure out Teams on Linux quite yet, and I just reinstalled Windows. [end aside]
Revshare.js is my attempt at contributing to micropayments and the Web Monetization ecosystem, especially the rev-sharing elements. Just looking at the examples on their website - it’s pretty complicated to do just for one or two elements. Revshare.js tries to take some of that hassle away, but I’m not entirely sure how well it works.
Demo
Add a <script src="http://unpkg.com/@kewbish/revshare"/>
tag to your head, and that’s all you need to get started.
...
<rev-share pointers='["$jackie.wallet": 60, "$charlie.wallet": 40]'>
<p>This is your revshared content!</p>
</rev-share>
...
If you’d also like to make your <rev-share>
element exclusive, just add the exclusive
attribute as well. (This will hide the element when Web Monetization is not enabled.)
...
<rev-share pointers='["$jackie.wallet": 60, "$charlie.wallet": 40]' exclusive>
<p>This is your revshared, exclusive content!</p>
</rev-share>
...
It works using probabilistic revsharing, and the docs I used as a guideline are available here.
The project is available on GitHub, on NPM, and on UnPkg.
How it works
This is built with the basic Web Components API. This was also my first proper Javascript project, and a great learning experience.
I was a bit confused with all the callbacks available, and when exactly they fired. The Mozilla Docs were super useful in this case, as apparently Google’s docs were a bit out of date.
Technically, this isn’t 100% accurate either. I’ve yet to see an example where everything is perfectly split up, but the more views a page has, the more accurate the revshare splits are. Think of it as a feature, not a bug - you’re incentivized to get more views for a better, more accurate split.
Conclusion
I’m not sure how this post even reads. I guess it’s a lot shorter than my proper posts (do I even have proper posts?) but hey, free content. I was too tired and too overwhelmed with homework to do proper research and rant for a 1300word post this week.
Anyway, I’m trying to get more involved, as I’ve said before, and start becoming the epic social media influencer I wish to become. (That was a joke. I promise.) I’ve heard from so many people that I’m supposed to build a blog and make technical blog posts for more reach and to build a platform2 3.
Currently
I’m working on rewriting Opus in Flask and Vue (private repo, I don’t need more people scronching me because I’m bad at Flask) right now. Soon, I, too, will be able to call myself a ‘full-stack developer’! (‘Soon’ is relative. It’s probably going to be a long long time.) I’ve been using PyMongo and MongoDB, which I’m not sure is the best choice given my data structure, but is a lot easier for my JSONified brain to understand. (I’ve built too much stuff with Hugo’s data-driven features.)
For the month of June, I’m planning to explore more algorithms (yes, with Khan Academy. Don’t @ me.) in preparation for my interesting summer plans. (More about this soon. Hopefully, I’ll remember to write a post.) I don’t really end up using Djikstra’s or BFS in my projects, but I guess that’s because I haven’t done many complicated things yet. I don’t know why, but algorithms and competitive programming don’t really stick. Probably just because I grew up with projects, and algorithms are a bit abstracted.
I’ve also tried to build some sort of month-based focus system in an attempt to organize my programming efforts. Right now, I have it set up so I have an overall task list for a month, and a couple focuses to throw all my work behind. In June, this will be algorithms and also content. (I might pre-commit some posts but not publish them with Hugo for a while, so you could theoretically preread a lot of my content. You might not want to do that though-) We’ll see how this system pans out. If it works alright, I might make a blog post. (Wow, more content!)
I also plan on doing a series on productivity 4 and notetaking. Will also tie into epic summer plans.
Alright, going to go refresh my Dev.to dashboard in an attempt to see if I’ve finally gotten more reactions and views [go read my articles kthxbye]-
-
I feel like I’ve been sounding more and more British. Do I sound British? I have no clue anymore. Someone British please tell me- ↩︎
-
Don’t think that quite worked; the entirety of readership of this blog is currently only reading through for things to meme me about. ↩︎
-
TL;DR: I have no clue what I’m doing but apparently crossposting blog posts is supposed to boost SEO and reach and apparently that’s a cool thing to do so here I am- ↩︎
-
I’m probably not qualified to properly explain these things, but I think it might help to just explain things. ↩︎