DEV Community: esse-dev

9 Months Into Our Web Monetization Journey

Elliot — Tue, 02 Feb 2021 02:45:40 +0000

Hi DEV! @elliot and @sharon here :)

Project Update

We're four months into our six month Grant for the Web project, Akita. What is Grant for the Web?

Grant for the Web is a $100M fund to boost open, fair, and inclusive standards and innovation in Web Monetization.

Check out our other articles under the esse-dev organization for context around the Akita project. You can also read our full interim report posted on the Web Monetization Forem. Now, onto the updates!

So far we've:

created "A Web Monetization Story" for helping creators on the web engage with and understand Web Monetization;
improved the Akita browser extension and released it on the Chrome Web Store (stay tuned for a post asking for feedback!); and
participated in: Creative Commons Global Summit 2020, Future of Micropayments Conference 2020 and hackathon communities to talk about Web Monetization!

We've been enjoying coding, designing, writing and chatting as part of the Web Monetization community. Some of our big wins have been placing 2nd🥈 in the BetaHack "Fix the Internet" hackathon with "A Web Monetization Story", having our projects and presentations featured on developers.coil.com and receiving our first issue reported by a community member on Akita. Our main struggle has been balancing development of the Akita extension, along with community outreach and development of our website "A Web Monetization Story".

How can I support Akita

If you have some spare time, check out "A Web Monetization Story" and fill out the survey at the end to let us know your thoughts! (If you’ve already checked out the website, but missed the survey, you can fill it out here: "A Web Monetization Story" survey).

Finally, we’ve created a Twitter account for us to communicate updates on our progress going forward — we’d appreciate it if you gave us a follow: @esse_dev. Not much going on there yet, but stay tuned! :)

Closing Thoughts

Over the course of the project we've learned about open content and open source licensing, incorporation in Canada, privacy policies and browser extension development, among other things. Elliot gave his first conference talk and Sharon published her first browser extension: Akita!

Shout out to the Web Monetization community! We've appreciated all the support we've received since we started on Akita nine months ago. It's been awesome to speak at conferences, receive feedback from the community and meet so many cool people.

Thanks,

the esse-dev team (Sharon and Elliot)

A Web Monetization Story

Elliot — Mon, 24 Aug 2020 05:38:38 +0000

@sharon and I are creating A Web Monetization Story, an interactive Web Monetization tutorial for online creators. The tutorial follows along with Auden, a blogger who is experimenting with Web Monetization on their site. If you are interested in setting up Web Monetization on your own site, or want to get others involved in Web Monetization, you may be interested in A Web Monetization Story.

We are creating this project for the BetaHack ‘Fix The Internet’ virtual Hackathon. There are seven days remaining in the hackathon. We are posting here, on DEV, in order to ask for honest feedback on what we have created.

We hope that you enjoy what we have created. We also hope to keep improving on it, so we want to hear from you! Thank you for reading and supporting us!

Excerpt

I run a blog about my adventures with Chicken — my dog!

Recently, I came across something called Web Monetization. It’s a new way for online creators to monetize their sites and for website visitors to support creators. It seeks to promote a more flexible, inclusive and privacy-respecting way of transferring money.

P.S. vote for @sharon in the 2020 HackerNoon Noonies - Best Web Monetization Innovator Category!

🐶 Akita: Get Involved in Web Monetization With or Without the Price Tag

Sharon — Mon, 15 Jun 2020 01:15:20 +0000

Web Monetization is an exciting new concept! It's paving the way for a more open, fair and inclusive web, to better support both users and creators. But, it's not exactly the easiest concept to understand. It took hours of research and reading before Web Monetization clicked for @elliot and I.

Once we had a grasp of Web Monetization, we realized that the journey to Web Monetization enlightenment was not an easy one. We could see a few major hurdles to overcome along the way:

Understanding how it works: if you don't have technical experience, you aren’t enabled to see the big picture and if you do have technical experience, you may still face a steep learning curve.
Being comfortable with what it costs: putting money into something you don't understand doesn't feel safe and you may not be in a position to put in money anyways.
How it relates to you: it’s not clear how Web Monetization affects the way you interact with websites.

Because of these hurdles, it can be difficult to see the value and broad potential of Web Monetization. We felt like there was a gap — although there’s a good amount of content explaining Web Monetization, we wished there was a free and easy way to experience Web Monetization.

What We Built

We built Akita, a browser extension that gives you insight into your involvement with Web Monetization.

Akita presents your top visited monetized sites, how much time you’re spending on them, and how much you’re contributing (or could contribute) to them.

If you’re looking to start supporting websites by streaming payment, Akita will give you a good idea of which sites you can directly support through Web Monetization. If you’re already using a Web Monetization payment provider, Akita gives you insight into your contributions to the website by showing you the time spent on the site and the amount of payment streamed as a result.

As Web Monetization becomes more common on websites, you’ll be able to see the evolution through Akita. We hope to see your favourite sites join the Web Monetization community! All of the data collected about your browsing and streamed payments is stored in local browser storage, so all of this information stays in your hands.

Overall, our goal with Akita is to increase Web Monetization exposure and awareness, and to help people understand how Web Monetization fits in with their regular browsing. We want to give people who aren’t using a Web Monetization provider a way to engage in payment streaming. As more Web Monetization providers pop up, users can choose providers that fit their needs based on the browsing data presented by Akita.

Submission Category: Foundational Technology

Demo

Akita Extension Icon

The Akita extension icon changes depending on the site you are visiting. If the site has monetization enabled, then the Akita icon will look something like:

Otherwise, if the site does not have monetization enabled, then the icon will appear as:

Akita Main View

Our browser extension helps you see the top monetized sites you visit and your involvement with Web Monetization at-a-glance.

Here's a screenshot of what Akita looks like if you're using a Web Monetization provider:

You'll likely have some monetized sites that you visit often, but don't really spend much time on. Maybe you'd like to give them a little more love and spend a bit more time there, so that additional payment can be streamed to them. Check out the 'These monetized sites could use ♥️' section!

Here's an example of what Akita looks like if you don't have a Web Monetization provider installed:

Akita Video Demo

Link to Code

esse-dev / akita

A browser extension that gives you insight into your engagement with Web Monetization.

Akita

A browser extension that gives you insight into your engagement with Web Monetization, part of The Akita Project.

Akita presents your top visited monetized sites, how much time you’re spending on them, and how much you're contributing (or could contribute) to them.

We've built this for the Grant for the Web x DEV hackathon! We're so thrilled to have received a Runner Up Award for this project 🎉 - Winners Announcement.

Our license information can be found here and our license/copyright notices can be found in LICENSE. Assets in the assets/external directory are assets from another source or repository, which may not have been created by Akita contributors. Please refer to the per-asset/per-source license information in assets/external.

	Grant for the Web x DEV Community Hackathon Runner Up (June 2020)
	Grant for the Web Mid Level Grantee (October 2020)

View on GitHub

To try out Akita, follow the instructions in our README! We've provided instructions on how to install our browser extension on Chrome and Firefox. We hope to make it available in browser extension stores soon! We've also added some basic contribution guidelines if you'd like to join our effort. :)

How We Built Akita

Stack

JavaScript
HTML
CSS
Browser extension APIs

Challenges

Tracking time spent on a website (Issue, PR)

Finding suitable and simple APIs to track time was a bit challenging. We ended up using the Page Visibility API and checking performance.now() in a regular interval to log time spent on the site. Here's what we did: trackTimeOnSite().

Additionally, the inconsistent performance of new Date() and performance.now() on different browsers was surprising. Here's a simple benchmark we used to test performance of the two on Chrome vs Firefox.

Twitch monetization tracking (Issue, PR)

After getting our first few commits in, we noticed that we weren't tracking monetization properly on Twitch. For Twitch, the monetization meta tag is added dynamically after the page loads. Additionally, if Coil is not installed the meta tag is not added.

We learned that Coil is directly integrated with Twitch, so personalized payment pointers are generated and assigned to each streamer's page.

Unfortunately, due to how payment pointers are added to Twitch, we're unable to access the monetization meta tag when an Akita user who isn't using a Web Monetization provider visits the site. This means that we can't relay Twitch monetization info to our user, if they aren't using Coil. That's alright though, we decided to look into other ways we can bring value to a user who isn't using a provider.

Interesting Discoveries

Payment Pointer Verification (Issue, PR)

At first, checking for monetization on a site seemed pretty trivial — just check for the monetization meta tag. Then, we realized that checking for the tag only confirms that there is a payment pointer. But that doesn't mean that the payment pointer is actually valid.

To verify that the payment pointer itself is valid, we first grabbed the payment pointer from the monetization meta tag. Then, we resolved it from its raw format to the Interledger SPSP Endpoint format. If you're interested, you can check out some payment pointer syntax resolution examples here. After that, we made an HTTP request to the resolved endpoint, with an expectation of 200 OK as the response. If that expectation is fulfilled and we receive 200 OK as the response, then we deem the pointer to be valid. Something we missed during development is handling 3XX responses as a result of a vanity payment pointer being used. We've opened an issue for this and we'll work on resolving it post-hackathon.

(As a little sidenote, while reading the SPSP Specification I realized a typo and opened a PR to fix it. It was merged! It's a super tiny change, but it still felt really fulfilling to contribute.)

That's the summary of how we validated payment pointers — you can check out the code here if you'd like!

Providing a meaningful experience for those who aren't using a Web Monetization provider

Since Web Monetization is a pretty recent addition to the web ecosystem, there's going to be a lot of people unfamiliar with it. With this in mind, we spent a lot of time thinking about how we could provide value to people who aren't using a Web Monetization provider. For those already in-the-know and all set up with a Web Monetization provider, we want Akita to help keep track of their contributions in a non-bank-statement-y way. For those completely new to Web Monetization and those without a provider, the resources, tutorial and payment predictions are meant to help them learn about Web Monetization and get an idea of what their involvement could look like.

Additionally, @elliot received a Coil trial for the hackathon, which was fantastic because he was able to develop and test alongside Coil and I developed and tested without it. This allowed us to check for bugs and think about the user experience from both perspectives: with a Web Monetization provider and without.

Closing Thoughts

One of our favourite parts of this hackathon was chatting directly with the Grant for the Web team. Their comments and support have been insightful and delightful :). Their excitement has been especially encouraging and motivates us to really think about not only the tech behind our idea, but the underlying value of it.

Having submitted Akita for this hackathon, our next steps are drafting our application for Grant for the Web and getting started on our "next steps" GitHub issues.

Thanks so much for being a part of our journey! We hope you enjoy Akita and learn about your Web Monetization involvement through it. 🐶

How can you support websites without having to deal with annoying ads?

Sharon — Tue, 02 Jun 2020 05:36:32 +0000

A widespread business model for websites is to serve you ads based on data they collect about you. Those ads might be annoying and come at the cost of your personal privacy, but you get to browse the site for free. Of course, ad block is a thing - there’s your solution! Well, that’s certainly not ideal for the website, as that causes them to lose a source of revenue. You might feel a bit guilty - it’s not that you don’t want to support the website, you just really don’t need to see another ad about a toaster oven. Still, trading your personal data for content isn’t something you’re comfortable with.

Here’s a list of your requests:

Access to content
No annoying ads
No invasion of personal data
Support the website

Okay. Some good news - we can make this happen! How? Web Monetization.

Web Monetization allows you to stream micropayments (send tiny payments over time) directly to the website. The website can detect these payments and turn off the ads, and further enhance your website experience if they choose to do so. You get access to content without invasion of personal data, and you get to support the website directly through tiny payments over time. For more details on Web Monetization, check out the Web Monetization site and this interview with Stefan Thomas (Coil CEO).

Of course, Web Monetization isn’t an instant to solution to your ad woes. It’s still in its infancy, so it will take some time until it’s widely adopted.

@elliot and I continued our discussion for the Grant for the Web x DEV hackathon after writing our articles on our ideation process and our initial ideas. If you haven’t read them yet…SPOILER ALERT: we ditched all of our ideas (but we posted them on the Grant for the Web forum - thanks for the suggestion @cyberdees!). Feeling a bit disillusioned, we revisited what we wanted to achieve with this hackathon: help grow the community around Web Monetization. We think the first step towards this effort is to raise awareness and build understanding.

So, let’s build Akita! It’s a browser extension that gives you insight into your involvement with Web Monetization. Akita shows you your top visited sites, how much time you’re spending on them, and whether those sites are monetized or not.

If you’re looking to start supporting websites by streaming payment, you’ll have a good idea of which sites you can directly support through Web Monetization. If you’re already using a Web Monetization payment provider, Akita gives you insight into your contributions to the website by showing you the time spent on the site and the amount of payment streamed as a result.

As Web Monetization becomes more common on websites, you’ll be able to see the evolution through Akita, as your favourite sites join the Web Monetization community. All of the data collected about the user’s browsing and streamed payments is stored in local browser storage, so all of this information stays in the user’s hands.

Overall, our goal with Akita is to increase Web Monetization exposure and awareness, and to help people understand how Web Monetization fits in with their regular browsing. We want to give people who aren’t using a Web Monetization provider (e.g. Coil) a way to engage in payment streaming. As more Web Monetization providers pop up, users can choose providers that fit their needs based on the browsing data presented by Akita.

@elliot and I started working on Akita last week, so we’re still working on the implementation details and development. For a peek into the technical details of Akita, head over to his article:

Hackathon Update: Breaking Our Idea Down Into Dog-Treat-Sized Tasks

Elliot for esse-dev ・ Jun 2 '20

#gftwhackathon #webmonetization #webdev #browser

...and if you’re curious about where we’re at, check out our repo:

esse-dev / akita

A browser extension that gives you insight into your engagement with Web Monetization.

High resolution emoji images in the cover photo are from here.

Hackathon Update: Breaking Our Idea Down Into Dog-Treat-Sized Tasks

Elliot — Tue, 02 Jun 2020 05:36:26 +0000

@sharon and I are continuing to work on our #GftWhackathon project. For our submission, we are making Akita! Akita is a browser extension that gives you insight into your involvement with Web Monetization. We have broken down our browser extension creation process into 8 tasks. We use GitHub to manage our tasks; you can see all our comments, related code, and progress on Akita's GitHub page. In this article I list our tasks and give a brief explanation of each of them. We have finished ✅ some already, and we are still working 🚧 on the others.

For a backstory and explanation of the thinking behind Akita, check out the article @sharon wrote:

How can you support websites without having to deal with annoying ads?

Sharon for esse-dev ・ Jun 2 '20

#gftwhackathon #webmonetization #webdev #browser

Here are our 8 tasks for creating the Akita browser extension for the #GftWhackathon:

✅
1. Commit basic project structure

Create a "hello world" browser extension.

✅
2. Check for monetization meta tag on a webpage

Check whether the "monetization" meta tag for a payment pointer exists on the site.
Validate the payment pointer according to https://paymentpointers.org/ and https://interledger.org/rfcs/0009-simple-payment-setup-protocol/#specification.

🚧
3. Change extension icon dynamically from JavaScript

When a user is on a monetized website, the Akita extension icon in the browser bar should visually change to make it clear that the site is monetized.

✅
4. Figure out how to store data without relying on browser search history

Store data using browser.storage.local. Write helper functions to make sure data is stored in the expected structure, and data is not accidentally overwritten.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage

✅
5. Data collection: Track amount streamed to websites

Use the Web Monetization JavaScript API to listen to monetization events and collect data through the extension. The API is available to website developers through functions in the document.monetization object. This ended up being a challenge because the document.monetization object is not directly accessible in the browser extension JavaScript runtime environment, so a script must be injected into the webpage to access it.

🚧
6. Data collection: Track # of visits to websites

Track and store total number of visits to monetized sites vs. unmonetized sites.

🚧
7. Data collection: Track time spent on a webpage

Track and store total time spent on monetized sites vs. unmonetized sites.

🚧
8. Load collected data and display it in the extension pop-up

When a user clicks on the Akita extension icon in the browser bar, a small window will pop up which visually displays all of the collected data, whether the current page is web monetized, and links to resources for getting involved with Web Monetization.

Thank you for reading and following our progress in the hackathon! I've seen that some people have already posted some cool submissions. I'm excited to be getting involved in the growing Web Monetization community and can't wait for @sharon and I to submit Akita :)

Kickstarting a project idea: going from 0 to...0 - Part 1

Sharon — Tue, 26 May 2020 03:20:10 +0000

@elliot and I have been itching to work on something together for a while now. We spent the vast majority of our Computer Science degrees geeking out together, but only collaborated on projects twice. We felt like that was pretty absurd, but we’re changing that now! The main difference is that I decided to move across the country since graduating, so remote collaboration is our new environment for geeking out.

Coming from different dev backgrounds — Elliot likes to use his web(bed) feet to swim thru the internet and I’ve done more mobile development and backend work — we bring different perspectives to the table. That’s great! But having numerous miscellaneous ideas also makes it difficult for us to choose something to work on. So, how do you approach brainstorming with your homie on the other side of the country?

Late March of this year, we decided to start coming up with things we could work on. Through weekly phone calls over the span of a few weeks, we iterated over ideation processes and have settled on a rough framework that works well for us. It’s fun, it’s flexible and it’s organized without feeling like too much of a chore. As a result of our ideation, we finally got started on a little project of our own, which we’ve put on pause since we found out about and began working on the Grant For The Web x DEV Community hackathon. (We’ll likely post about our other project here on DEV once we’re ready, so stay tuned!)

The Grant For The Web hackathon is completely new territory for us, as I’m sure it is for many of you. Web Monetization is a relatively new concept, which can make it daunting, but very much adds to the excitement of it! Feeling pretty good about our newfound ideation process, we decided to jump right in. Here’s how we applied our ideation process to the Grant For The Web x DEV hackathon:

Our Ideation Process

Step 1: Get into an approximate headspace relevant to our goal
Step 2: Very open-ended sticky note ideation
Step 3: Group sticky notes into major themes
Step 4: Concisely elaborate on each major theme
Step 5: Discuss relevance, feasibility, impact, personal excitement
Step 6: Picking the final idea

Step 1: Get into an approximate headspace relevant to our goal: make something neat that relates to Web Monetization

This step involves chatting, discussing and looking up anything that might be relevant to the goal we want to achieve. For this hackathon, our goal is to make something in the Web Monetization space that is neat!

When we began our ideation process for the hackathon, we didn’t really know much about Web Monetization, Interledger or Coil. In fact, our mental model of the three likely looked something like this:

We decided to just brainstorm various subscription services people use, to understand how a Coil subscription could sit alongside a person’s existing set of subscriptions. We wanted to get into the headspace of things people already pay for on a monthly basis.

Step 2: Very open-ended sticky note ideation: rapidfire idea generation

This is where we individually spit out as many ideas as we can, without worrying about details, feasibility, etc. We don’t want to limit our thinking at this stage. Even if the idea seems totally bogus, has questionable relevance or might be a bit too vague, it's still something we want to put on the table. There’s no discussion and no questioning here — we each record everything we can fire out from our heads. This step isn’t about coming up with fully fleshed out ideas — it’s about extracting concepts from our headspace to share them with one another.

Here’s what our Web Monetization rapidfire ideation session looked like:

Step 3: Group sticky notes into major themes: merge individual ideas into central themes

Next, grouping the sticky notes allows us to combine similar ideas into major themes/ideas. It’s interesting to see the range of ideas generated, since the previous step involves ideating separately. Sometimes we’re completely on the same page and ideas revolve around similar concepts, but once in a while there are a few wildcards. For example, “pyramid scheme, but morally sound” is a bit out of left field, but strange ideas like this one can drive innovation, paving the way for more reasonable ideas later on.

Regardless of how tempting it might be to start elaborating on our ideas, we hold off on doing so until the next step. The only discussion/questioning that goes on at this point is to confirm the similarity of ideas if necessary. Additionally, we might assign a summarizing word or concept to a group which describes all of its sub-ideas.

Step 4: Concisely elaborate on each major theme: create an elevator pitch for each theme

Working together, we flesh out each theme (group of ideas) a little bit more to produce a 2-4 sentence summary, like an elevator pitch.

Here’s an example of an elevator pitch for an idea we came up with for the hackathon:

The next step requires us to have a reasonable understanding of the problem space, so that we can gauge how applicable our idea is. So, before continuing on to Step 5, we did some reading/research on our own time to better understand how each of our ideas could fit the hackathon. After our independent learning, we met up to discuss our findings and point out anything we’re confused about.

As a quick sidenote, something that works really well for us when we’re not confident in our understanding is to do research together over the phone. After choosing a concept, we both search the web for material that can give us more background. Then, we discuss in real-time and call out any misunderstandings we might have. Doing this “live research sesh” is really effective in giving us more clarity and ensuring that we’re on the same page.

Step 5: Discuss relevance, feasibility, impact, and personal excitement of each idea: which ideas are worth exploring?

This is where we narrow down our ideas into a top 3. With the knowledge gained from independent and collaborative research, we vet each of the major ideas based on their relevance, feasibility, impact and how excited we are about it.

Relevance: Revisit the hackathon requirements and categories; think about the problem space. Does this idea fit?
Feasibility: Is this something we can create a prototype for by the hackathon deadline? How much learning is needed — do we have time to learn what we need to put together a prototype?
Impact: How is this valuable to people? Who is the target user — how is this idea relevant to them? How does this idea contribute to the problem space?
Excitement: How stoked are we about this? Arguably this is the most important metric, since it impacts how much thought we’ll put in, as well as the quality of our work.

Based on these concepts, we discuss how “fitting” each idea is. Then, through a process of elimination (i.e. eliminating ideas that don’t quite fit the bill), we arrive at a top 3.

For the purposes of this hackathon, we discussed the criteria in a Web Monetization context:

Relevance: How does the idea relate to Web Monetization? How does it leverage existing APIs? Does it involve existing Web Monetization technologies, i.e. Coil? Does it contribute to the efforts being put towards building an open web?
Feasibility: How much learning do we need to do to develop the idea (i.e. Coil, Interledger, Web Monetization API, etc)? How familiar are we with the relevant development stack for this idea?
Impact: Are creators going to find value in this idea? What benefit are we providing to people browsing the web? How can we improve awareness/education of Web Monetization?
Excitement: Is this something we see ourselves using while browsing the web? Are we going to learn a lot from developing this idea? Do we feel passionate about what the idea will bring to the web?

Step 6: Picking the final idea: which idea will rise to the top?

Now that we have a top 3, you might be wondering: which ideas did we decide to go forward with? @elliot answers that question in Part 2 of this blog post!

Before I let you head off to Part 2, I want to circle back to some ideation and collaboration takeaways. We've learned through our process that it’s important to maintain consistent commitment to the project. In maintaining commitment, it’s crucial to balance the seriousness of the project with ensuring that it’s enjoyable to work on, so that it still carries through as a fun side project. During many of our meetings, we’d often get sidetracked and jump down a few (too many) rabbit holes. That being said, allowing a casual format for our meetings made it much easier to stay in a creative mindset. Even though we could’ve done better to stay on track, chatting and diving into random tangents made it fun and exciting and helped us discover interesting things.

Lastly, it’s important to be okay with ditching your work and starting over, or pivoting and changing direction. With that said, I’ll hand you over to @elliot for Part 2 of Kickstarting a project idea: going from 0 to...0.

Kickstarting a project idea: going from 0 to...0 - Part 2

Elliot — Tue, 26 May 2020 03:20:10 +0000

For the past two weeks, @sharon and I have been working together (across the country!🇨🇦) on the Grant for the Web Hackathon #GftWHackathon. We've spent our time researching Web Monetization, learning how to effectively collaborate and organize our work, and coming up with ideas for our submission.

In this post I will talk about the ideas we came up with, the problems we encountered, and the current state of our progress in the hackathon. To read about how we began our remote collaboration process check out @sharon 's article:

Kickstarting a project idea: going from 0 to...0 - Part 1

Sharon ・ May 26 ・ 7 min read

#gftwhackathon #webmonetization #ideation #collaboration

Top 3 Grant for the Web x DEV Community hackathon Ideas
Money stream visualization (Sharon's Idea) A Web Monetization enabled website could include a visualization of all the different streams of money being sent to the website. Each visitor could be represented by a colored shape. If a visitor is streaming money to the website using Web Monetization, $s could flow out of the shape representing the visitor. If there were a ton of people streaming, there would be a ton of $s flying across the screen! The speed at which the $s flow out could represent the payment stream rate, e.g. how much money is being sent per second. It would be possible to implement this visualization by using the Web Monetization JavaScript API. On the frontend of a website, The JavaScript API would collect information about whether a user is streaming money or not. That information would then be sent to a backend server which can keep track of the money-streaming data of all users on the website. The backend would then send all the data to the frontend to be visualized. This idea would provide a visual way for website users to get excited about and engage with Web Monetization! When people see a cool visualization, they might be interested in learning more about what it is communicating. It would be important to provide links to resources and information about Web Monetization so interested people could learn more and become part of the Web Monetization community. Additionally, the idea of streaming money is new and may be a bit tricky for people to wrap their heads around (we thought it was tricky!). Seeing a visualization might help newcomers understand what it means to stream money over the web!
Live event platform (Elliot's Idea) Attending events in-person can be a lot of fun, but unfortunately most in-person events in the near future have been cancelled. An online event platform could fill this gap and enable people from across the world to attend events together. Charity and fundraiser events can be a great way to connect with a community of like-minded people, have a good time socializing, and contribute to something meaningful. With the power of Web Monetization, online charity and fundraiser events could easily be created. Just by attending and spending time at an event, a person using a Web Monetization provider would automatically be contributing to the cause supported by the event.
A website with a central fund which is distributed based on merit (Sharon's Idea) Here's the idea: website users stream payments to the website using Web Monetization. As they spend time on the website, the streamed payments are collected into a central fund. Then, the money is distributed to contributors based on some measurement of merit. This would help promote quality contributions by rewarding the contributors who put in the effort in a more tangible way...money! For example, StackOverflow.com could collect streamed payment from its users. All the money collected could be given back to the best-rated accepted answers on the platform. Bonus idea: What if every time you upvoted an answer on StackOverflow you sent a microdonation? This would allow you to give the answer’s author a small gesture of appreciation, with a bit more of a personal touch than an upvote on its own.

While discussing our top 3 ideas, we realized it might work to combine the Live event platform and Money stream visualization ideas. We thought it could be hype-inducing to attend a live fundraising event which gives you a visual understanding of the total amount of money being streamed during the event. We decided to combine Sharon's idea with my idea into one SUPER IDEA: A live event platform with money stream visualization. This super idea could enable users to feel like they are part of the community, have fun, and contribute to a great cause!

At this point we were feeling good about our new super idea, so we started moving ahead with it. The next steps were to define features and figure out how users would interact with the platform. We had done our research and we knew it would be possible to implement our ideas using Web Monetization tech, but we weren’t sure whether our idea would actually be useful or not. As we were getting into the details of our idea, we identified a few problems that seemed difficult to address within the scope of our idea.

More money, more problems

While thinking about how real users would interact with our SUPER IDEA, we asked ourselves the question: How many Coil users would have to attend an event in order for the event to raise a significant amount of money? Since Coil is currently the only way for users to stream money using Web Monetization, this was an important question. We checked Coil's documentation and found that Coil streams money at a rate of $0.36 an hour to websites. Assuming, for simplicity's sake, that each user attends an event for an hour, our platform would need 1000 users to join an event in order to raise $360.

That's not a very large amount of money, but it is a very large amount of users, and a long time to spend at an online event. We felt that creating a platform for such an event sounded quite difficult: it is not easy to attract people to an event, and it is even harder to keep people engaged for an entire hour.

In order to keep people engaged for the length of an hour long event, people would have to be actively engaging with something. Combining our Live event platform idea with the Money stream visualization idea would give people an interesting visualization to look at for a minute or two, but certainly not a full hour! We started thinking about YouTube and Twitch. These platforms keep people engaged by hosting high-quality entertaining content. Making a great platform for content doesn't seem easy…

With these considerations, making our (maybe not-so) SUPER IDEA useful sounded like a complex problem—too complex for a month-long hackathon. So we decided to pivot to our third idea: A website with a central fund which is distributed based on merit.

While we both agreed that this idea is cool, we quickly realized it would be more useful when added to an existing website. Creating an entirely new platform just to add the idea of rewarding contributors with money is a bit backwards. What kind of platform for contributors could we even establish when so many great ones already exist? We decided it would be great if existing platforms like Stack Overflow incorporated this idea into their community, but we didn't think this idea was the right fit for the hackathon.

We had run out of ideas.

Feeling lost, sad, and hopeless is part of the process

Now, at the time of finishing this article, I can add that writing has helped us step back and understand where we are at in this hackathon. While working through the details of our ideas, we encountered unexpected complexities. We ended up feeling stuck and we didn't know where to go next. So, we took some time to think, discuss and reflect on our frustrations, and write down our thoughts. This process allowed us to revisit what we valued in Web Monetization and what we valued in our ideas. After our feelings of frustration were resolved, we were able to move on. All the time spent, and knowledge gained from this frustrating process is exactly what we are using to come up with a new idea.

We have come up with a new idea which takes what we valued from the previous ideas and combines it into not just a SUPER idea, but a MEGA idea. We've learned firsthand that it can be good to pivot and change ideas. Pivoting is like starting over again, but with way more understanding and knowledge than the last time you started over. In summary, failing can be great (even though it's difficult and frustrating)!

Wish us luck as we get started with our new idea in the last two weeks of the hackathon. All the best to our fellow #GftWHackathon participants, and see you in our next update post!

DEV Community: esse-dev

9 Months Into Our Web Monetization Journey

Project Update

How can I support Akita

Closing Thoughts

A Web Monetization Story

Excerpt

🐶 Akita: Get Involved in Web Monetization With or Without the Price Tag

What We Built

Submission Category: Foundational Technology

Demo

Akita Extension Icon

Akita Main View

Akita Video Demo

Link to Code

esse-dev / akita

A browser extension that gives you insight into your engagement with Web Monetization.

Akita

Table of Contents

How We Built Akita

Stack

Challenges

Tracking time spent on a website (Issue, PR)

Twitch monetization tracking (Issue, PR)

Interesting Discoveries

Payment Pointer Verification (Issue, PR)

Providing a meaningful experience for those who aren't using a Web Monetization provider

Closing Thoughts

How can you support websites without having to deal with annoying ads?

Hackathon Update: Breaking Our Idea Down Into Dog-Treat-Sized Tasks

Elliot for esse-dev ・ Jun 2 '20

esse-dev / akita

A browser extension that gives you insight into your engagement with Web Monetization.

Hackathon Update: Breaking Our Idea Down Into Dog-Treat-Sized Tasks

How can you support websites without having to deal with annoying ads?

Sharon for esse-dev ・ Jun 2 '20

Kickstarting a project idea: going from 0 to...0 - Part 1

Our Ideation Process

Step 1: Get into an approximate headspace relevant to our goal: make something neat that relates to Web Monetization

Step 2: Very open-ended sticky note ideation: rapidfire idea generation

Step 3: Group sticky notes into major themes: merge individual ideas into central themes

Step 4: Concisely elaborate on each major theme: create an elevator pitch for each theme

Step 5: Discuss relevance, feasibility, impact, and personal excitement of each idea: which ideas are worth exploring?

Step 6: Picking the final idea: which idea will rise to the top?

Kickstarting a project idea: going from 0 to...0 - Part 2

Kickstarting a project idea: going from 0 to...0 - Part 1

Sharon ・ May 26 ・ 7 min read

More money, more problems

Feeling lost, sad, and hopeless is part of the process