The Interledger Community 🌱: Ciaran

Interruptor — Grant Report #2 (Final)

Ciaran — Sun, 27 Mar 2022 21:34:11 +0000

Project Update

We've reached the end of the grant period, and we're happy to say that we've managed to achieve all of our main objectives.

In terms of technical implementation, things went fairly smoothly. All of the bonus features we planned for Web Monetization users were implemented, and the last couple of months were spent refining them.

As for our community intiatives, it was great to have fellow grantee Kult at our last event, where we talked about what Web Monetization is, how to implement it, how it can help creators monetize their work.

While things have gone well tech-wise and there seems to be interest from the community about Web Monetization, we're still facing a couple of challenges.

The first issue is to do with the wallet/payment provider. Our account was frozen early on in the grant period, and it took several months to get answers from them about what we needed to do to get our account working again. This means that for the majority of the time, we have not been receiving payments from Web Monetization users, and it's unclear whether we'll receive any payments that were sent during this time once the account is working again. Last week we emailed the extra documentation the provider asked for, so hopefully things will progress on this front soon.

The second challenge we have is the slow uptake from our audience to start using Coil/Web Monetization. According to our analytics, over the last six months only 0.1% of visitors had Web Monetization enabled. We feel that our users might be a bit hesitant to sign up for a Coil membership because of language and currency barriers: the site is only available in English and payments need to be made in USD. It could also be that we're the only (or one of the only) media outlets in Portugal that uses Web Monetization, and if we can get other groups to implement it, it'll become a more "normal" option for our users.

Progress on objectives

Bonus features for users

We've implemented all of our planned bonus features:

Bonus fonts
Bonus themes
Audio player for audio versions articles

Some of the implementation needed tweaking a bit (we realised we were spamming users with thank-you messages whenever they changed page), but it's fair to say that things went fairly smoothly, helped greatly by the fact that the Web Monetization API is so easy to work with.

Open-source

As mentioned in our last report, we released a small package on npm for using Web Monetization in React: @interruptor/react-monetization.

Key activities

The second community event: Overview of Web Moneitzation and Our Experience

This event was originally going to be two separate events - one for giving an overview of Web Monetization at Interruptor and a second for talking about our experience - but we combined them due to time, and also because it seemed natural to not only give an intro to Web Monetization but to give a more in-depth explanation of our experience. Together with @patrickrahy from Kult, we were able to cover what Web Monetization is, how we've implemented it and what we've learned along the way.
Due to Covid, the event was live streamed on YouTube, which you can see here (in Portuguese): https://www.youtube.com/watch?v=SMbgqXLXBSU

Communications and marketing

The tech blog

Over the last six months, we've released a number of posts about Web Monetization on our new tech blog (available in English and Portuguese), which includes a couple of tutorials on how to get started with Web Monetization:

The code for the blog is also available under an MIT license here: https://github.com/InterruptorPt/tech-blog

What’s next?

Given the slow uptake of Web Monetization users on our site, we're going to think about some ways to make it more visible as a way to support us - maybe by having a section on the homepage about it.

What community support would benefit your project?

We'd be curious to know whether other grantees from outside the US/from non-English-speaking countries had issues with payment providers and/or getting users on board, and whether they have any tips.

Conclusion

Despite the issues we've faced, we're happy with how the grant period has gone, and we're excited to see where Web Monetization could take the us - and the web as a whole - in the future. The privacy-friendly nature of Web Monetization fits right in with our values at Interruptor, and it's great that our users have a way to support us without us needing any personal or financial information and without us needing to build the infrastructure to handle that. The grant has given us the chance to work on some features that we probably wouldn't have done otherwise, and we're now able to reward users who support us, which is awesome. 🎉

Interruptor — Grant Report #1

Ciaran — Wed, 22 Dec 2021 14:11:23 +0000

Project Update

While we were held back initially by some classically difficult Portuguese bureaucracy, we're making good progress with our project, especially tech-wise.

Progress on objectives

Bonuses for web-monetization users

Something that's important to us at Interruptor is that we don't block content behind a paywall, so we're instead providing bonus features to people who support us by using web monetization.

Extra colour themes

The site previously only had a light and dark mode, but it now has a few extra themes: a "peach" theme, and two black-and-white themes (light and dark).

A font selector

We chose the font used on the website for the main body text carefully, but it is a matter of taste. We added extra font options so that, in case you prefer something a little bit different.

An audio player for articles

As an extra-special bonus, we want to offer audio versions of articles. The audio player is implemented and ready to go - all that's left is to do some recordings. We're not planning to have an audio version of every article, so maybe we'll need to do something to highlight which articles do have it.

Open-source

Our website is built with React, and after implementing the functionality for checking whether Web Monetization is active and updating the UI accordingly, we were able to extract the logic into a small package and published it on npm: @interruptor/react-monetization.
The logic is so simple that we're considering creating packages for other frontend frameworks, such as Svelte and Vue.

Knowledge sharing

As part of the initiative, we created a tech blog following how we set things up on our website and the work we've been doing on developing the extra features. You can find our blog and articles here: https://tech.interruptor.pt (available in English and Portuguese).

We have also organized the first of three events for small and alternative media on November 17th 2021 - details below.

Key activities

First small media event

When: 17th november 2021
Where: Central Gerador

Our first event was focused on open licencing models. There were two presentations from:

Teresa Nobre - Lawyer; she has been working closely on the European copyright reform as part of Communia. She is the legal coordinator of the Portuguese chapter of Creative Commons. She did a presentation on the basics of Creative Commons and the legal aspects under the Portuguese context.
Ana Isabel Carvalho and Ricardo Lafuente from Manufactura Independente - Ana and Ricardo founded the design studio Manufactura Indepedente in 2010, based on the ideals of free software and free culture. Since then, they have created and published works openly. They shared their experience with the CC licences as well as with collaborative creation.

Due to room limitations and coronavirus restrictions, we directly invited 22 small media organizations, of which five were able to attend. The event gathered ten people.

Communications and marketing

We cater for (what still is) a rather small community, and getting new contributors is our major struggle. In hindsight, we should have probably allocated some money towards marketing, and might do it in the future. We have done some posts on social media about GFTW and regularly update our followers on the work we develop for it.

We were featured on multiple Portuguese media when we were announced as grantees, including RTP, Dinheiro Vivo, Media Alternativos and Meios & Publicidade, who also interviewed our director, Rute Correia, and Kult's director, Patrick Rahy, about the plans for the grant.

What’s next?

TO DO:

Record audio articles

We will start releasing audio articles in January.

Community events

We still have two events to host. The next one will happen in late January and will be focused on experiences with Web Monetization. For this event, we will be sharing our own experience with implementing the technology and we invited Patrick Rahy to also share how they are doing things at Kult.

There will be one final event in late February.

What community support would benefit your project?

Spreading the word about Interruptor's work.

Additional comments

Since July, we have published 29 articles, including seven original data-driven full-features, 16 issues of our weekly newsletter with cultural recommendations and a series about minority languages. All the content is published under Creative Commons.

We have also openly released multiple datasets that we compiled for our investigations.

Web Monetization on Interruptor is live! 🎉

Ciaran — Fri, 23 Jul 2021 17:16:30 +0000

It took us a little while to get our Uphold account set up and approved, but once we managed to get our payment pointer, integrating Web Monetization was pretty easy: just adding the <meta> tag with our payment pointer to each of our pages.

<meta name="monetization" content="$ilp.uphold.com/nzj2HrUbBDKa" />

We're not looking to put Interruptor's content behind a pay wall, so we'll be working to create extra features for people supporting us through Web Monetization as a way to say thanks.

In the meantime, we've set up the site to actually say "thanks" when someone uses the site with Web Monetization activated.

Our site is made with TypeScript, React and NextJS, so we made a useWebMonetizationState hook to check when WM is activated:

import { useEffect } from 'react'
import {
  MonetizationEventMap,
  MonetizationEventType,
  MonetizationObject,
  MonetizationState,
} from '@webmonetization/types'
import { TEventListener } from '@webmonetization/types/build/genericEventListeners'
import { atom, useAtom } from 'jotai'

/**
 * Add Web Monetization to the global types
 */
declare global {
  interface Document {
    monetization?: MonetizationObject
  }
}

/**
 * Add the event listener and return a function for removing it later
 */
const addEventListener = <TEvent extends MonetizationEventType>(
  event: TEvent,
  eventListener: TEventListener<MonetizationEventMap[TEvent]>,
): (() => void) => {
  document.monetization?.addEventListener(event, eventListener, {
    passive: true,
  })

  return () => document.monetization?.removeEventListener(event, eventListener)
}

/**
 * Create the atom where we'll store the current monetization state
 */
const webMonetizationStateAtom = atom<MonetizationState>('pending')

export const useWebMonetizationState = (): MonetizationState => {
  const [state, setState] = useAtom(webMonetizationStateAtom)

  useEffect(() => {
    const onStart = () => setState('started')
    const onStop = () => setState('stopped')

    const events = [
      addEventListener('monetizationstart', onStart),
      addEventListener('monetizationprogress', onStart),
      addEventListener('monetizationstop', onStop),
    ]

    return () => {
      events.forEach((removeListener) => removeListener())
    }
  }, [setState])

  return state
}

For now, since the only thing we're checking is whether it's started, we created a separate hook for that:

export const useHasWebMonetizationStarted = (): boolean => {
  const state = useWebMonetizationState()

  return state === 'started'
}

We then use that hook in a component so that we can show the thank-you message when payments are being sent.

import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { toast } from 'react-toastify'

import { AnalyticsEvent, trackEvent } from 'utils/analytics'
import { useHasWebMonetizationStarted } from 'utils/monetization'

export const WebMonetizationToaster: React.FC = () => {
  const { t } = useTranslation('monetization')
  const hasStarted = useHasWebMonetizationStarted()

  useEffect(() => {
    if (!hasStarted) return

    // Show the thank-you message
    toast.success(t('thanks'))
  }, [hasStarted, t])

  useEffect(() => {
    if (!hasStarted) return

    // Send an event to Plausible so we can see how many visitors use it
    trackEvent(AnalyticsEvent.WEB_MONETIZATION_ACTIVE)
  }, [hasStarted])

  return null
}

It might get refactored a bit in the future, but for now it's working, which is the most important thing!