Forem: Sharon

🐶 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.

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.

Forem: Sharon

🐶 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.

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?