The Interledger Community 🌱: ProgNovel

ProgNovel Promotional Video

Radhy — Wed, 15 Dec 2021 03:08:12 +0000

Despite at the last minute, my contractors managed to finish the video. 🚀

Please enjoy
😎😎😎

ProgNovel — Grant Report #2

Radhy — Sun, 12 Dec 2021 10:39:11 +0000

Before I knew it, ProgNovel has been in the sixth month as Grant for the Web grantee. This grant report also signify the last days of me being a grantee of Grant for the Web with ProgNovel. So here it comes -

Project Update

Repos for self-hosting ProgNovel has been launched for public use, marking the goal for the sixth-month of ProgNovel's schedule for GftW roadmap is coming to its end.

Progress on objectives

Following the progress in my previous grant report, there are some improvement and bug fixes that I made for ProgNovel. Among the is to improve and wrapping UI for affiliate marketing feature. This includes improvement for it to fit display in mobile screen, which ended up also reworking UI of the rest of the site for mobile users.

Meanwhile, hardware from my last budget reallocation has been helping a bit in here. Due to schedule constrain I reallocate some of the budget to get a tablet, which is helpful as a testing device and a workstation to produce handmade assets. Beside having assets that I recently made open with CC-Licensed assets (check it here), I'm also able to make a switch of some generic illustration I got from the internet with my own - though some of it may still a bit rough since I'm only a beginner in drawing assets digitally. Because the late investment on this part I reckon it will be more useful post-grant duration for ProgNovel and me contributing to the community space.

Other part of my progress also happens on tooling around ProgNovel. By default, ProgNovel CLI is designed to be used offline with one person acts as a gatekeeper for the site content. As this is not ideal for collaborative purpose, I've tried several other ways like experimenting with Github Action and Discord bot.

ProgNovel CLI now allows in creating Github Action workflow where if uploaded to remote repo, will automatically publish content when main branch is being merged. This means other members of the group that own a Github account can make pull request or commit their own contents, instead having to wait one person that install ProgNovel CLI to publish new contents to ProgNovel websites.

As for Discord API, I have tried several ways in making a bot to do something about new contents on ProgNovel sites. At first I'm using a nodejs server trying to create this, but after several times failed in getting what I wanted I realized Discord has features called Webhook - something that I'm aware previously but not exactly know that it actually creates a Discord bot because I'm simply not a Discord power user. After scrapping my previous nodejs server bot and get my hands on Discord Webhook, I realized the latter actually able to provide me bot with more intuitive way to use even for non-developer users, as it can directly be configured inside Discord app settings. What's more, bots made with Discord Webhook don't have the need for users to rent a server to get it live, and more practical and easier to connect with ProgNovel. And what's this little Discord bot do is to announce every publish made on ProgNovel, something that is commonly be seen in Discord groups in the webnovel community (other collaborative features from Discord bot being scrapped, as Github Action already do its purpose).

The next part is to get ProgNovel ready to be published. In the past two weeks I'm doing trial and error in getting how ProgNovel should be published.

At first, I'm planning to make several repos for ProgNovel a monorepo so that it can be easily distributed. This, however, proved to be a difficult decision, as I'm getting stuck in making the CI/CD of some Jamstack/serverless platforms being more complicated that it already is, due to how hosting on monorepo being an edge case many of these platforms and some of my Github Action workflows simply not being able to run at all.

For example, as I tried to simplify hosting backend for ProgNovel using Cloudflare Workers deploy button, I encountered a weird crash. I tried on getting help on Cloudflare community forum (I posted it here), but still haven't managed to get any help after two weeks.

I redo in moving my repos to a monorepo but still migrate them to be hosted under a Github organization I created a few months ago. Now they are being hosted on https://github.com/prognoveljs, with previously private repos now being public, and finally anyone can self-host ProgNovel for free.

Key activities

The fifth month of GftW is me having to work on tooling for ProgNovel, like creating and debugging Github action and Discord bot.

As for the last month is having to prepare launching of ProgNovel, which consist to many trial and error in connecting three different repos together which proves to be more difficult than I expected due to how hosting platforms having their own edge cases, which also forces me to rewrite some of the documentation.

Communications and marketing

Though a bit late, I've received the rough cut of promotional video from my contractors. The contractors I commissioned it for managed to get the grasp of the concept I want them to make, though things not going smoothly in their post-production. I'm still waiting for the final cut for the promotional video which I hope gets delivered before my Grant for the Web duration ended.

Aside from the promotional video, most of Grant for the Web I received mainly for development purpose, so marketing to the community happens post-grant duration.

What’s next?

For short-term goal, launching the project means spreading words to let authors and creators know about he benefit of ProgNovel and Web Monetization API through forums and social media. Promotional video might help in this regard.

Long-term goal for ProgNovel is to research technologies more to align ProgNovel with more Web3 technologies, on top of incoming Interledger features like Coil tipping and features unlocked by Rafiki. I'm also interested in exploring NFTs and smart contract on XRPL network once those features are available for public.

Ultimately, I might still want to expand more opportunities and business models unlocked by Web Monetization API. And to do this openly in a way that others also can use them is to focus my time more on my library Webfunding.js.

Webfunding.js helps me tremendously in ProgNovel by enabling revenue share and affiliate marketing with Web Monetization API. But it lacks documentation pages and up until now, I haven't got the time to work on to polish it more and realize its upmost potential. For now, after marketing ProgNovel done, I reckon working more on Webfunding.js will be my homework in the near future.

What community support would benefit your project?

Having more vibrant discussions on the possibility of Web Monetization and Interledger may helps inspire more polished business models. Please contribute to posts with #discuss tag and other discussion posts made by the community members, or share your ideas by writing your own full-blown articles!

Additional comments

Many thanks for GftW team and other community members who spare their time in accommodating and taking the time to share ideas for the Web Monetization community.

Though the time for ProgNovel ending as the grantee of Grant for the Web, I do hope it is not the ending for me to part ways with Web Monetization community space. It is an honor for me to be included as part of this early movement of Web Monetization innovation - and sure I hope I can still be part of this for a few years to come to watch how Web Monetizationa and Interledger can flourish and influence the internet in a positive way! (Hey, maybe later when everyone uses Web Monetization in the future, I can get the privilege to brag about being as one of those early adopters like how those cryptobros always said they remember Bitcoin was very cheap in those early days😉)

Relevant links/resources

prognoveljs / prognovel-workers

Cloudflare Workers for ProgNovel.

🤖 ProgNovel Workers

How to get ProgNovel backend

Make sure you have a Github account and Cloudflare Workers account first, and make sure you have publish content to Cloudflare Workers network by following https://github.com/prognoveljs/prognovel-cli. Start by clicking Cloudflare Workers deploy button above.
Authorize Clouflare Workers with your Github account. If you are redirected to the main page of Cloudflare Workers deploy site after authorizing, simply click browser's go back button to return to ProgNovel backend's deploy page.
Add your account information. Enter your Cloudflare Workers Account ID and API Token, which the deploy page has guide for.
The deploy process will pause once you get to the next step and will ask you to enable Workflow for Github Action of your repo. Click the link to your repo and enable Github Action for your repo if you haven't already. Go back to the deploy page and click the "Workflow…

View on GitHub

prognoveljs / prognovel-cli

CLI for ProgNovel.

💻 ProgNovel CLI

👇 ProgNovel CLI installation

Before you install ProgNovel CLI, you need to host backend for ProgNovel first. Follow installation guide for ProgNovel Workers backend here. Once your backend live, proceed installing the CLI:

Install ProgNovel CLI to your computer. You need a stable release of Node.js installed first, then in command prompt, run npm install @prognovel/cli -g.
In an empty folder, open command prompt and run prognovel new.
You need to have a way to connect to Cloudflare Workers servers by setting the value of environment secrets. If you manage your ProgNovel project folder locally in a computer, you can configure environment secrets via .env file in your root project folder created in step (2) - (.env file might be hidden in your Explorer app); if you host this project folder on Github repo, you can consult this page to create your environment…

View on GitHub

prognoveljs / prognovel-app

Next-generation webnovel Progressive Web App.

🚀 ProgNovel

Demo | Changelog | Promotional Video

ProgNovel Promotional Video (YouTube)

ProgNovel is a JAMstack web app to make great webnovels. The main feature of ProgNovel, beside offline-first web app with offline read features and great performance, is to be able to inject interactive plugins for content creators to experiment with. Because ProgNovel built mainly in Jamstack architecture, it can be hosted with great loading page performance on many Jamstack platform free-tier offerings such as Netlify and Cloudflare Workers.

Screenshot

ProgNovel on Desktop

ProgNovel on Mobile

Self-host ProgNovel

Although ProgNovel strives to be as simple as possible, it is currently very difficult to create a smooth flow for deployment due to how young Jamstack ecosystem is (the architecture ProgNovel uses). In the future as the toolings more mature, we're hoping to simplify the deployment process - but for now we'll have to get our hands dirty and go through…

View on GitHub

ProgNovel is LIVE!

Radhy — Wed, 08 Dec 2021 19:10:37 +0000

After a nearly six months with Grant for the Web my project ProgNovel is finally live! 🚀

Previously private Github repos are now public, with a CLI is being published to NPM.

prognoveljs / prognovel-workers

Cloudflare Workers for ProgNovel.

🤖 ProgNovel Workers

How to get ProgNovel backend

Make sure you have a Github account and Cloudflare Workers account first, and make sure you have publish content to Cloudflare Workers network by following https://github.com/prognoveljs/prognovel-cli. Start by clicking Cloudflare Workers deploy button above.
Authorize Clouflare Workers with your Github account. If you are redirected to the main page of Cloudflare Workers deploy site after authorizing, simply click browser's go back button to return to ProgNovel backend's deploy page.
Add your account information. Enter your Cloudflare Workers Account ID and API Token, which the deploy page has guide for.
The deploy process will pause once you get to the next step and will ask you to enable Workflow for Github Action of your repo. Click the link to your repo and enable Github Action for your repo if you haven't already. Go back to the deploy page and click the "Workflow…

View on GitHub

prognoveljs / prognovel-cli

CLI for ProgNovel.

💻 ProgNovel CLI

👇 ProgNovel CLI installation

Before you install ProgNovel CLI, you need to host backend for ProgNovel first. Follow installation guide for ProgNovel Workers backend here. Once your backend live, proceed installing the CLI:

Install ProgNovel CLI to your computer. You need a stable release of Node.js installed first, then in command prompt, run npm install @prognovel/cli -g.
In an empty folder, open command prompt and run prognovel new.
You need to have a way to connect to Cloudflare Workers servers by setting the value of environment secrets. If you manage your ProgNovel project folder locally in a computer, you can configure environment secrets via .env file in your root project folder created in step (2) - (.env file might be hidden in your Explorer app); if you host this project folder on Github repo, you can consult this page to create your environment…

View on GitHub

prognoveljs / prognovel-app

Next-generation webnovel Progressive Web App.

🚀 ProgNovel

Demo | Changelog | Promotional Video

ProgNovel Promotional Video (YouTube)

Screenshot

ProgNovel on Desktop

ProgNovel on Mobile

Self-host ProgNovel

View on GitHub

Though technically anyone can self-host ProgNovel now, I'm still actively looking for installation bugs and doing trials and errors to test the deployment flow to ensure the installation instructions are correct (unfortunately here I didn't manage to make them as simple as I want to be due to CI/CD issues with hosting/backend platforms). Not to mention that the documentation is still needs a little bit polishing. So while the code are being public I still need a bit time to actively announce that ProgNovel is published.

I'm expecting for an official launch around 10~15 December. For now, feel free to look around and let me know if there's anything that interest you.

Cheers
🎉🎉🎉

ProgNovel Plugins

Radhy — Sun, 10 Oct 2021 16:37:26 +0000

Hi guys.

I have bundled up some of components I use in my project ProgNovel and published it at github as Web Component. There are few problems I encountered during porting the plugins from Svelte to Web Components but I managed somehow. There are three of them for now, only one that's related to Web Monetization which is Instant Affiliate Link generator for imitating affiliate marketing with only Web Monetization and a little bit know how of JavaScript.

Here they are 🎉🎉🎉

prognoveljs / prognovel-plugins

Plugins inspired by ProgNovel components that are made in Web Component.

ProgNovel Plugins

A set of plugins inspired by ProgNovel components. Made with Svelte -> Web Component.

DEMO

🖥️ `<novel-trivia></novel-trivia>`

Takes only label attribute. Novel Trivia plugin is a component made as partially hidden box that can be revealed via user cursor hover. Good to create an auxiliary information that is not getting in the way of the main content.

Example:

<novel-trivia label="Trivia">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum accusamus cupiditate
  quaerat fuga ratione aperiam voluptates dolorem pariatur odio, quo voluptatem aspernatur nostrum
  quam? Quaerat, perferendis! Excepturi, minus obcaecati?
</novel-trivia>
<script src="/dist/prognovel-plugins.umd.js"></script>

🪶 `<authors-note></authors-note>`

Takes only name attribute. Author's Note plugin is a typical quote box to highlight comments by author of the content.

<authors-note name="ProgNovel">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum accusamus cupiditate

…

View on GitHub

ProgNovel — Grant Report #1

Radhy — Tue, 28 Sep 2021 10:18:31 +0000

Hello all 🙋‍♂️🙋‍♂️🙋‍♂️

It's finally time for me to submit my first Grant for the Web report. Before I'm diving in I'll be explaining what kind is my project Grant for the Web is funding, since officially this is the first post I made directly about Grant for the Web.

ProgNovel is a PWA project for webnovel that has been a working in progress even before I'm exposed to Web Monetization. The project came to be at first because I realized at some point, after trying to indie publishing my webnovel for a few years in many online platforms, that I wasn't suited for big platform publishing. ProgNovel came to be for an alternative for WordPress, since the 20 years old CMS, although good for general blogging, is inadequate in term of features and customisability when it comes to niche content form like webnovel, especially when indie publishers are in a pinch competing with big tech backed platforms and dozens of pirate aggregators.

Honestly the experience of ProgNovel development pre-Grant for the Web hasn't been a smooth sailing for me. I started ProgNovel as a developer cum webnovel author, which meant in case I got some kind 9-to-5 of jobs (which I don't sadly), I'll have be an adult and retire either as developer or webnovel author, or both. I guess this is also the reality for many young content creators and artists who aspire to live a dream life by having to work on something they love.

Despite financial struggle, though, I am still in need of resources like hardware refresh and some fund for daily expense. I was developing with VS Code on a 4GB ram of Windows 10 laptop, already at its limit even without opening Chrome for debugging. With budget around $5~$10 per month, my usual internet bandwidth was at 1GB/day, which is not enough for heavy internet user like me, and if I needed more I'd have to stay up midnight till morning for cheap internet bandwidth from my providers, which at some point I building up an habit of staying up the entire night and sometimes energized with 2~5 cups of cheap coffee in a single night (I wasn't even a coffee drinker before). Thinking it back since around 2017 or 2018 a day where I was getting my sleep at night was getting rarer and rarer. Then back a few months ago when waiting for grant funds to arrive, I participated in a bounty program started by another grantee Kendraio app was helping for my immediate financial situation, giving me room to purchase more internet bandwidth and better coffee for my daily coffee intake. Fast forwards a few months later, the GftW funds arrived in my bank account. That is when my life changed a lot. Now I'm developing my projects with more powerful setup, I'm using the fund to upgrade my old 4GB Windows 10 Laptop to a 8GB version of M1 Mac Mini, boosting up my productivity by lessening VS Code lags and other the development pains (up to 5x dev server startup and finally say to annoying lags when typing in VS Code!). In addition, I'm starting to slowly shake off my previously unhealthy habit of staying up late since I'm no longer in bind of midnight internet plans that I previously had to rely on (I still ended up getting addicted to coffee though).

Because many of experimental nature of ProgNovel I have struggled to gain support for the project. Around one or two years ago I went around offered for collaboration but came out with no satisfactory result. Most website owners either have their own in-house developers or would settle with established technologies and many not interested in modern web technique even though it might benefit them and their users. From what I'm seeing potential of a technology, case studies and researches are not enough to convince people to adopt new technologies - in this case I was once offered a WordPress website owner, whose website so slow it loads around 8 seconds here in Indonesia, to set him up a brand new, much faster JAMstack website without asking for a fee because I was their user for a long time; my offer for help was rejected. The reason I was rejected didn't have anything to do with the JAMstack technology. For them, it has to be a WordPress site because everyone else was using it - or rather, everyone else had success using it, and people tended to follow how other people succeed in doing something. I think this is also true for Web Monetization; a few conversations I had with strangers on the internet, I found people generally reluctant to adopt Web Monetization because ads and Patreon (or Kofi) already working for them (these are non developer folks I'm talking about so putting one line of meta tag for web monetization still not a trivial matter for people).

Fortunately, though, for Web Monetization, most people tended to show "wait-and-see" attitude and didn't completely rejected the idea of having alternative source of revenue after knowing the possibility of more open and fair payments than ads or third-party patron platforms, and some of them also got excited knowing the possibility of more novel business scheme like revshare and affiliate link made easy with Web Monetization. I'm hoping this was the case for my experimental projects too like ProgNovel.

Screenshots

ProgNovel uses CLI based content generation:

The screenshot of the site (https://demo.prognovel.com):
Web Monetization subscription call-to-action screenshot:
Color themes unlocked after Web Monetization subscription:
Premium content locked UI:
Revenue share in action:

How to use ProgNovel's instant affiliate link:

My new development set up:
Testing on Android TV (perhaps add options for content creators to host videos too in the future?):

Project Update

In here, Grant for the Web budget helps tremendously. I was finally able to refresh my hardware for development and developing ProgNovel wasn't as painfully slow as it used to, even allowing me to works on multiple projects at the same time. Latest iteration of Webfunding.js is only possible because I simultaneously develop Webfunding.js and tested it on ProgNovel for instant feedback loops. Without it, I probably would settle with the old Webfunding.js syntax because I'd spend my time developing with frustration of coding with lags instead of getting inspired.

In addition, there are some future plans that I previously mentioned in second chance proposal, that some ended up derailed from my original plan. This is because 1) hosting platforms that ProgNovel is optimized for is getting better, so some experimental tech like IPFS and Ceramic network I'd like to explore are being put on hold, 2) they're not part of GftW six-months roadmap so there's really nothing important feature getting dropped from the roadmap 3) other side project like Webfunding.js turned out works better with ProgNovel than I originally expected and I planned to focus on this instead.

Overall, basic UI for Web Monetization and relevant features in ProgNovel have been put into their places, with only polishing, picking up delayed roadmap I had pre-GftW duration, and planning out distribution for production release at the end of six-months GftW duration.

Progress on objectives

On the GftW roadmap doesn't have much significant hiccup during the development. There's a budget relocation during on hardware budgeting which is expected since I wouldn't have set on hardware I'd like to use since computers and laptops lining ups would change a lot between the time I wrote my proposal and the time I actually got the grant fund. I also settled the schedules with my contractor and agreed that their works will start at early October (this already delayed due to Covid), creating videos for marketing and explainer purpose for the rest of the grant duration--which means, promotional videos are in progress.

The documentation of ProgNovel is in progress since I plan to hold back writing documentation for features that yet I deem stable (or might get refactored during the development). Documentation on features outlined in GftW proposal however, like revshare and affiliate marketing, has been online, though isn't practical right now since ProgNovel hasn't been go into production yet and the documentation might get a rewrite once I settle on the flow of how ProgNovel is going to be used by users. (they're here: https://demo.prognovel.com/help/monetization)

Speaking of revshare and affiliate marketing, these features turned out quite well considered that it can be reused by others through open-source Webfunding.js library. I was kinda like how Webfunding.js turning out with chainable Web Monetization class that currently I'm experimenting with, since it would be straightforward if I'm (or other dev) wished to extend the feature beyond revshare and affiliate marketing; as an example of this, a few days since I wrote my recent post about Webfunding.js, I extend it with a useful utility function called .setBiasGroup() which allows payment pointer addresses to be separate into groups and their own rates.

With this Webfunding.js one-line utility function, I'm able to change how groups of payment pointers interact when picking up winner payment address when calculating the revshare pool. This allows me to manage rates of payment pointers by groups in ProgNovel, as seen on website staff against payment pointers from novel authors and contributors.

Beyond that, the developments of Web Monetization features of ProgNovel (chapter locks, affiliate marketing, etc) has been delivered in the latest iteration of ProgNovel. In month 4 I plan to release Web Component plugins based on ProgNovel but later I reckon focusing on Webfunding.js might be more helpful to the community in general than the plugins I previously planned on.

Key activities

There's not much of key activities to be listed here since this funded project meant for solo development, if I am to be honest, mostly involving tinkering through ProgNovel codebases in VS Code, consuming articles and tech-related youtube videos I subscribed for knowledge refresh and inspiration. Every two or three days I opened this community space to see if there's a notification for me, checking out for what others are doing with GftW projects.

Aside from that, I'm also occasionally cross-check how well the site perform in different browsers and devices. With this I found there are few UI bugs in Safari and some features are unavailable when browsing ProgNovel on Android TV web browsers.

Communications and marketing

There's not much marketing reach needed for this project since mostly during the six months of GftW funded duration spent on developing the codebase. However, I do post a few of community space posts like this and this. There are also two pre-GftW funded duration of community space posts that I published for the introduction of ProgNovel.

I'm also waiting for my contractors to finish marketing videos for ProgNovel, which (should be) begin the video production somewhere around early October.

What’s next?

As for the short term goal is for me to finalized UI and user flow for instant affiliate link feature--and while at it, preparing a more stable design of Webfunding.js to include the said feature for open source and public use after ProgNovel's grant funded duration completed. This month goal also is where documentation see more update since many of Web Monetization-related features of ProgNovel have become more stable.

What community support would benefit your project?

Please visit a few of my discussion threads and share your thoughts on the discussed topics. It won't take much of your time to share your opinions but we all will benefits from more voices as we can inspire each other with our own point of view and ideas.

Additional comments

For now there's no additional comment for me to share.

Relevant links/resources (optional)

ProgNovel demo site
Learn how Web Monetization works in ProgNovel

tools:

Simple and composable Web Monetization advanced features with Webfunding.js (UPDATED)

Radhy for ProgNovel ・ Sep 8 '21 ・ 3 min read

#javascript #revenueshare #revshare #sneakpeak

please visit my discussion threads:

What do you think is the biggest barrier for people to adopt Web Monetization?

Radhy ・ Jul 1 '21 ・ 1 min read

#discuss #webmonetization

Dividend Revenue Sharing

Radhy ・ Jun 5 '21 ・ 5 min read

#community #revshare #rafiki #essay

Revenue Sharing on Rafiki Mega Thread

Radhy ・ Jun 1 '21 ・ 2 min read

#discuss #revshare #community #megathread

ProgNovel introduction:

Modern Jamstack PWA platform for Web Novel Contents — ProgNovel

Radhy for ProgNovel ・ Mar 4 '21 ・ 5 min read

#mozfest #revshare #jamstack #webnovel

Simple and composable Web Monetization advanced features with Webfunding.js (UPDATED)

Radhy — Wed, 08 Sep 2021 12:42:55 +0000

Beyond streaming micropayment, Web Monetization has many advanced features like revenue share and removing ads, accessible for everyone to set up on their own websites with a bit of efforts.

However, not many would use them at the same time due to cumulative learning curve a website owner must tread in order to benefit from every single feature. After all, even removing ads with Web Monetization has its own tutorial page on official Web Monetization documentation. I have rework my library I wrote a year ago to include a simpler, composable practice of Web Monetization by chaining features of Web Monetization together in order to lower the barrier for people to adopt more complicated Web Monetization features.

🤔 How this is going to work

Take a look of this example - let's say that three people, writers and editors, working together on an article about ocean and will receive revenue share of 4:3:2 ratio before the website owner taking share 10% of Web Monetization revenue. To attract people to subscribe to Web Monetization, they want to remove ads that wrapped under <div class="ads"></div> and also give influencers way to make money from converting URL of their article into affiliate link with 15% of profit every Web Monetization subscribers they bring. Usually to make this scenario happens the developer would spend hours trying to implement the features one by one. However, with Webfunding.js, it couldn't be more simpler than a few line of codes:

install via NPM in your project folder

npm install webfunding

somewhere in your Javascript

import { WebMonetization } from "webfunding";

const monetization = new WebMonetization()
  .registerPaymentPointers([
    "$wallet.example.com/johnny#4",
    "$wallet.example.com/lynda#3",
    "$wallet.example.com/pete#2",
    "$wallet.example.com/website-owner#10%"
  ])
  .removeAdsOnStream(".ads")
  .registerDynamicRevshare("my-awesome-website", "15%")
  .start();

In example above, I'm creating a WebMonetization object that register three of WebMonetiation advanced features; .registerPaymentPointers() to set up payment pointers of creators with syntax of Webfunding.js to register revenue share between three creators and website owner based on agreed portions of the revenue. Next is .removeAdsOnStream() that will run a DOM query selector of ads class and remove it as soon as Web Monetization begins streaming. And finally, .registerDynamicRevshare(), is a feature that I created from my GftW funded project ProgNovel, which will takes URI encoded payment pointer from affiliate query string on the URL (for example https://demo.prognovel.com/novel/yashura-legacy?affiliate=%24wallet.com%2Fexample) to include the foreign payment pointer to revshare pool, allowing unknown third-party to be included as an unknown payee, useful to attract influencers--this can later be stored in some kind of persistent database (currently local via IndexedDB) so that the affiliate link can also be included for future revenue for users that the influencers brought.

All of this is chained à la JS functional programming which eventually end with a start() command, which will begin the Web Monetization stream.

Great, how can I use it on my website?

Unfortunately, this isn't available publicly (yet) to the current version of Webfunding.js. The current Webfunding.js published on NPM still use old syntax of Fundme.js (its predecessor) and only revshare feature available to try.

EDIT: This is already available to try in Webfunding.js version 0.2.6 above, although at this moment the documentation on NPM hasn't been updated to the new syntax. There will be changes and the API isn't stable right now so please don't use this for production yet.

Completing Webfunding.js and its resources (currently) isn't on my roadmap unfortunately, due to the funded GftW is my other project - but the good news is I'm already got it working on my local computer, albeit lots of rough edges need to be polished, so if anyone interested in trying let me know in the comment, maybe I can publish some early version of this. (this is already published in Webfunding.js v0.2.6, but with caveat explained above!)

Note that there's still many features of Web Monetization will come to Webfunding.js, some of them yet unexplored that might be useful to create entirely new business models for creators. For example, previously I tried to include receipt verification but later found that there's no way to implement it without having to deploy an additional backend due to CORS issue - which is something beyond the scope of a Javascript library like Webfunding (currently!). This feature might return in the future version of Webfunding.js, though... so stay tuned and follow ProgNovel for future news!

Cheers
🎉🎉🎉

Sneak peek of revenue sharing in ProgNovel

Radhy — Sun, 25 Jul 2021 04:57:44 +0000

Hi guys!

It's been almost two months since the start of my project with GftW and I'm happy to show a little bit of what I'm currently working on.

Since the start of ProgNovel, revenue share with Web Monetization has been one of the main feature of ProgNovel - which, additionally, has been expanded and explored to ProgNovel's experimental affiliate marketing system (which soon will be receiving a design overhaul!). As the star feature of ProgNovel, revshare is getting a little love, with the emerging revshare stats that will be the main focus of an UI that readers, creators, and contributors to check how revenue from Web Monetization API will be distributed.

Don't be fooled by the same 40 numbers above; they'll show everyone's share later on, as this is still a WIP feature, there's still tons of things to do! ProgNovel will be launched at the end of my project's grant duration which is around the end of this year; and by that time, the final product of how revshare is gonna look in ProgNovel will be finalized.

EDIT 1 - 26 Jul, 2021:
I managed to add overlay'd avatars today though it still not reflecting real users' avatars. I reckon I'd integrated them with Gravatar service, though that I must edit a big chunk of the ProgNovel backend to do that.

EDIT 2 - 7 Aug, 2021:
I returned to tweak my library WebfundingJS (formerly Fundme.js) to create revshare stats and leaderboard feature instead developing it to ProgNovel, allowing me to re-use the works I've done on revshare later in the future.

The current screenshot of revshare stats in ProgNovel, which is about to be done with some details left to fill.

See you later!

Modern Jamstack PWA platform for Web Novel Contents — ProgNovel

Radhy — Thu, 04 Mar 2021 17:28:30 +0000

Project overview

ProgNovel is (soon to be) open-source platform for web novel contents with the capability of modern web app, including Progressive Web App's offline and installable capability. It is hosted statically on Jamstack hosting and serverless backend (with Cloudflare Workers), ensuring affordable but blazing fast websites for indie web novelists and small online novel publishers alike.

The project aims to provide free and decentralized platforms for indie creators to take on venture capital-backed companies on web novel industry that currently dominated by a few big tech companies' hands, like Tencent-backed Qidian Literature, Wattpad, Amazon Kindle, Naver, Kakaopage, and so on. A few features that historically been exclusive to the native mobile apps, like offline reading, have been implemented in ProgNovel, allowing small indie players to compete even on mobile devices.

ProgNovel demo:
https://demo.prognovel.com

ProgNovel development roadmap:
https://demo.prognovel.com/roadmap/

Project team

Currently, the project only has me as the sole contributor. I'm working on it as the frontend dev, designing UX/UI myself, writing some documentation (only starting), and am actually an aspiring web novelist myself. Back when I'm dropped out from college in 2016 to commit on my writing I have no interest in getting into traditional publishing industry in my country, prefer on get my toes dirty on internet indie novelist venture, and ProgNovel project sorta happened along the way.

What we are doing

Much of the development of ProgNovel been spent on making the app fast and cheap to be operated on static and serverless hosting environments. This is due to most indie web novelist wouldn't want to be in a position of being burdened financially when hosting their own platform to showcase their novels, when platforms from big companies already promised free-to-publish (but with restrictions) medium anyone could use. With ProgNovel, anyone could publish their story without having to worry about staff approval to get paid for their story unlike Wattpad's paid story program, and anyone wouldn't need to pay anything to monetize their content as Web Monetization API, unlike most ads networks, doesn't require paid custom domains to get started (note: hosting statically on Netlify and other Jamstack host is free! And ProgNovel even more optimized to take advantage of the generous free-tier hosting provided by Jamstack hosting companies!)

As part of this effort, for example, is the rework of backend API written in Cloudflare Workers starting back in November--which is actually a response to Cloudflare's decision to make KV Workers free for free-tier users.
Image above: ProgNovel's build engine has been rewriting; instead of serving markdown files for content individually, it is now being published as single JSON document for each novel, only uploaded to a single key of KV Workers, ensuring lowest latency, better caching, and improve API hosting cost-effectiveness by several times due to all contents stored in a single key enabling ProgNovel to fetch several chapters in a single API request (in short, pay once for several pages).

Rewriting backend API also led me to develop CLI for ProgNovel à la Jamstack frameworks--although, in reality, instead parsing markdown to HTML, ProgNovel convert markdown files (or any other sources in the future) to a single flat JSON (to be stored in a single key of KV Workers as mentioned previously). The build engine although is very early version is already quite fast, due to the usage of WebAssembly in parsing markdowns (thanks to markdown-wasm) and incremental build already in place to ensure only modified files get parsed. More works needed to be done to improve the build engine, but overall I'm happy about the current Jamstack-y direction.
Image above: The benefits of having to rewrite API and developing CLI not only for hosting cost-effective and better latency performance, as the new CLI also brings in build engine that reads contributors' names and map them to their Web Monetization payment pointers respectively (along with typo helpers!), making splitting revenue share easier for long novels that have many contributors (which historically have generated a lot of bad blood in the community due to disagreements on rev share).

As a demo, I picked a few non-profits Web Monetization payment pointers (source here), and now Web Monetization revenue share for the demo is live:

for more information about revenue share in ProgNovel, head to https://community.webmonetization.org/radhyr/prognovel-s-built-in-revenue-share-in-jamstack-based-markdowns-1995

There also a few features being implemented in ProgNovel already, most notably client-side bookmarking, dark mode and theme color picker, offline reading (which works just like novel platform mobile app since ProgNovel is already PWA), configurations for font size and font weight when reading novels, and asynchronous content rendering (sort of kinda browsers' content-visibility for more snappy DOM rendering when navigating through novel chapters, but custom made for ProgNovel to avoid bugs and more support for future ProgNovel's plugins).

ProgNovel has come a long way since I first began prototyping it a few years ago. It has now evolved much like modern "app-like" web app from back then. With more and more features added in, however, it still got almost the same velocity and performance as back when I started moving this project to use Svelte 3 framework.

As a reference, I diligently check the web app performance through Google's Lighthouse test, and I'm happy to say that ProgNovel managed to keep 95~100 score for performance, not to mention the speed for repeating visits and navigating through pages even more blazing fast due to ProgNovel heavily implementing PRPL pattern strategy.

What community support would benefit our project?

Due to several API rewriting and the sudden development of CLI (Jamstack-y) build engine, ProgNovel is still under private repo at this point. That and the lack of hardware for development has made the progress of ProgNovel slow. So unfortunately I'm not open for community contribution at the moment.

However, if you're fine with a novel with subpar grammar and errors, please check out my novel Yashura Legacy. It's been hurriedly assembled for ProgNovel demo, and around the first 10 chapters available to read there. Please let me know if you find it interesting, comments are very much appreciated as extra motivation for me! (note: ProgNovel still hasn't integrated with comment system yet, so please let me know your thoughts on my novel here)

Link Round Up!

main project demo:
https://demo.prognovel.com/novel/yashura-legacy

the rev share open source I wrote for ProgNovel:
https://github.com/prognovel/fundme (deprecated - the project will later be moved to a new repo and name)

article I wrote about rev share on ProgNovel:
https://community.webmonetization.org/radhyr/prognovel-s-built-in-revenue-share-in-jamstack-based-markdowns-1995

Highlight other projects

There are many cool projects hosted here on Web Monetization community, but if I have to choose myself then they'll be:

Enclave Games
Defold Foundation
p5.js Editor
Exploring the future of Web Monetization
Exploring Web Monetization through Firefox

EDIT (27 Jul, 2021)
Update demo site with official domain.

ProgNovel's Built-in Revenue Share in JAMstack based markdowns

Radhy — Thu, 10 Dec 2020 10:05:44 +0000

Hello, all! I'm excited to get myself onboard here. Many thanks to web monetization and dev.to teams to deliver this awesome community site!

As my first post here I want to demonstrate my project that I proposed for Grant for the Web funding (which unfortunately rejected in the first call for proposal). To wait for second chance call for the previous proposal opened, I thought it'd be nice to share my progress is.

Before I jump in probably I need to explain what ProgNovel, my project, is. At the very heart ProgNovel is a web app "template", though recently in development it slowly evolves into the realm of framework. In my passion of driving decentralized independent novel authors owned platform (as I am an indie author myself), ProgNovel embracing Progressive Web App, JAMstack, and serverless architecture as its first-class citizen to get the most cost-effective web app as possible. The ultimate goal is to let authors bootstrap a PWA web app platform (to rival mobile apps made by million dollars companies) that they can own themselves with only paying when there are already people paying for their works.

Think of it as serverless-ly JAMstack site but for web novels.

One thing about web novel is that, unlike your usual blog-based content, its serialised over lots and lots of pages make it quite different than your usual web content publishing sites. It's common to see authors or some fans translators to not updating their table of contents, mostly due to WordPress doesn't designed to publish serialised content in mind (though, nowadays, some WP themes helped). Some blogs articles may serialized into several posts, but in contemporary web novels, it's very common to see novel spawned over hundreds of chapter pages, even in China web novel industry thousands of chapters already the norm. I believe for this very reason, if user experience is first to be considered, there's a need to design a platform not with common tools made for bloggings, but for independent authors authoring their novels, like many tools especially created for marketers to bootstrap their e-commerce.

ProgNovel is still in development and I've made a few change of direction since Grant for the Web's first call for the proposal. There are several development milestones and major bug fixes that I've made over the last few months. But since this is Web Monetization community, of course I'll be talking about monetization specifically. I'm going to talk about my experience designing revenue share right into the heart of ProgNovel. To understand why there's a need for customized tools for web novel authors to do this, let me point out the my thoughts on pain points of composing revenue share:

In independent community content creators, collaborating with strangers is common, like people do with open source in Github. With many people come and go splitting up revenue isn't a trivial task to do manually. (much easier to pay people per task instead, but that'd be commissioning, instead of revenue sharing)
With potentially thousands of chapters to work with, the previously hard task becomes even harder.
Compose them in markdown the JAMstack way make them even worse.

Image: Markdown above might look like it's fine. But there are two mistakes that probably would make contributors uncompensated.

The problem with sharing revenue

In community-centric working group, the best way to do revenue sharing is to not talking about revenue at all. Particularly people who coordinated over Discord channels or forums who only know each others' internet usernames. By what I mean not talking about revenue sharing, this partly due to many people getting in collaboration with strangers is because they love what they are doing, or simply want the projects they involved with to get released more steadily and prevent them from becoming dead projects at all. Like, how many developers out there doing pull requests on open source projects expecting they'd be drenched in shares of donation money?

The other and more urgent reason is that if there's money to be involved, inevitably there's a party going to be responsible to compensate the other party. This can be a content creators turned website owners paying their fellow content creators, or authors and translators paying for editors as well as proofreaders. All is fine until someone can get uncompensated, intentionally or unintentionally, like that ambiguous typo example image I showed previously.

I've witnessed some guy got lynched online because he made a mistake when doing a PayPal payment to someone and they eventually called him out on the public forum. And to experience them over some innocent typos? Nope, no thanks.

This is also the reason why I'm getting into Web Monetization API in the first place. It's the simplest tool available on the web to make revenue sharing without having to have a conversation about revenue at all. The most ideal way would someone makes a pull request to have their payment pointers (or someone else's payment pointers) to be included in the projects. And then get involved in the work. Just that. No need to talk about money. The paying party would have the revenue share rate per task (weights in probabilistic revenue share) they needed help with to be available in public, then if someone okay with that, they can just go ahead apply to see if they are the right people for the job. Without the explicit responsibility to compensate people then the drama about unpaid or underpaid contributions can be avoided. When the collaboration is over people can part way in good faith and thus the community have less toxic things needed to deal with.

ProgNovel approaches composing revenue share over 3 phase; with only one parts that both paying party and receiver party needs to deal with (that is, registering the receiver's payment pointer into the project).

The first part is in the site's settings which can be found in the project root folder in form of YAML document (or maybe TOML too in the future). It is (or it's copy) should be accessible in public so that potential contributors can assess how the project's manager compensate collaborators. As you can see below, the ratio of contributions over authors, translators (if foreign works), editors, and proofreaders is 5:4:3:2 Probabilistic Revenue Share weights per chapters, accumulate in every chapters contributors are credited in, and calculated after the platform takes 10% of the revenue.

The second part is where everyone should involved in. It's the YAML document on registering everyone's payment pointers. It's edited whenever there's a new contributor joining in.

At this point the conversation about revenue share should be minimal and there should be no promise of "paying the other party" which can lead to fight if things don't go as everyone's planned. The contributors that signed up should know the performance of the works they involved in, and they should already know at which rate they would be compensated with.

It's simple and straightforward. But the problem now is back to the pain points I previously stated; you might wonder, why would I put random gibberish such as Kabooom and Wowee as contributors examples?

The reality is usernames that are harder to spell and remember than those are very common on the web. Unthoughtful implementation of revenue sharing around this issue would be a disaster. No one would want a conversation that goes on like this:

A: "Hey, your name is hard to write in every single chapter. Can you change it to a simpler one?"

B: "What should I do? But I like this username."

A: "Are you sure you don't want to change it? Don't you want to get paid?"

Enter ProgNovel CLI

ProgNovel CLI is command line tools that (planned) to be published through NPM. Since last year I was hesitating to choose the default way to manage content for ProgNovel. Should I just export documents from Google Docs? Should I just let people outsource their contents to headless CMS (which I doubt will provide features worth of the price for niche contents like web novels)? One change that made me choose markdown is the plugins that I made with web component, which actually composable in markdowns on some markdown parsers if HTML tags to be included.

Beside compiling chapters to be consumed as JAMstack API ProgNovel CLI also offers a way to fix type on contributors name, using a library that based on Sørensen–Dice coefficient to find similarity between strings. The below image is an example when typos occurred when using command prognovel build or just prognovel for shorthand:

Someone who compiling the chapters can either go the to problematic chapter or fixing the typos in bulk, with just one command line prognovel fix-typo

The CLI then would find the problematic chapters and do simple find and replace:

The shares would be then compiled along with the novel's metadata in static JSON with format of Fundme.js (my other project that I planned to have its name changed), which then can be used to generate Probabilistic Revenue Share either in the backend or the browser.

Conclusions

Collaborating over the internet is usually casual but can be complicated because everyone's want (and should have) their private information protected. Web Monetization API offers a solution in a very simple but effective way, even in its early phase. For me it's the reason why it totally rocks.

Implementing it in ProgNovel has been an adventure for me. And I'm sure there's more challenge ahead that need to be addressed: should the contribution points be tamper proof? Should the project owners have the right to cancel the contributions of other people when a problem occurred?

Other challenges also raised on technical level. One of them is build performance; this is a Javascript, NodeJS project, can it really compile ten of thousands of chapters every time without having to wait half an hour?

At first, ProgNovel is not meant to be using build time to compile chapters, instead serve it on-the-fly through Cloudflare Workers. But since I'm already developing the CLI, I'm anticipating the issue by choosing WebAssembly based markdown parser, and implement my own incremental build so that markdowns that hasn't been changed won't be compiled along with others. It also only output in JSON or ArrayBuffer at most (to be uploaded to Cloudflare Workers KV), instead building static HTML like other JAMstack frameworks do, so I'm expecting the build time won't be the most painful development issue along the road.

There's also consideration for future expansion to also host web comics/manga for artists and to provide e-book for authors who also want to publish on e-book platforms like Kindle and others. However, since I'm a web novelist myself, I'll take a look on these plans after I'm satisfied with the current development.

The Interledger Community 🌱: ProgNovel

ProgNovel Promotional Video

ProgNovel — Grant Report #2

Project Update

Progress on objectives

Key activities

Communications and marketing

What’s next?

What community support would benefit your project?

Additional comments

Relevant links/resources

prognoveljs / prognovel-workers

Cloudflare Workers for ProgNovel.

🤖 ProgNovel Workers

How to get ProgNovel backend

prognoveljs / prognovel-cli

CLI for ProgNovel.

💻 ProgNovel CLI

👇 ProgNovel CLI installation

prognoveljs / prognovel-app

Next-generation webnovel Progressive Web App.

🚀 ProgNovel

Screenshot

Self-host ProgNovel

ProgNovel is LIVE!

prognoveljs / prognovel-workers

Cloudflare Workers for ProgNovel.

🤖 ProgNovel Workers

How to get ProgNovel backend

prognoveljs / prognovel-cli

CLI for ProgNovel.

💻 ProgNovel CLI

👇 ProgNovel CLI installation

prognoveljs / prognovel-app

Next-generation webnovel Progressive Web App.

🚀 ProgNovel

Screenshot

Self-host ProgNovel

ProgNovel Plugins

prognoveljs / prognovel-plugins

Plugins inspired by ProgNovel components that are made in Web Component.

ProgNovel Plugins

🖥️ <novel-trivia></novel-trivia>

🪶 <authors-note></authors-note>

ProgNovel — Grant Report #1

Screenshots

Project Update

Progress on objectives

Key activities

Communications and marketing

What’s next?

What community support would benefit your project?

Additional comments

Relevant links/resources (optional)

Simple and composable Web Monetization advanced features with Webfunding.js (UPDATED)

Radhy for ProgNovel ・ Sep 8 '21 ・ 3 min read

What do you think is the biggest barrier for people to adopt Web Monetization?

Radhy ・ Jul 1 '21 ・ 1 min read

Dividend Revenue Sharing

Radhy ・ Jun 5 '21 ・ 5 min read

Revenue Sharing on Rafiki Mega Thread

Radhy ・ Jun 1 '21 ・ 2 min read

Modern Jamstack PWA platform for Web Novel Contents — ProgNovel

Radhy for ProgNovel ・ Mar 4 '21 ・ 5 min read

Simple and composable Web Monetization advanced features with Webfunding.js (UPDATED)

🤔 How this is going to work

Great, how can I use it on my website?

Sneak peek of revenue sharing in ProgNovel

Modern Jamstack PWA platform for Web Novel Contents — ProgNovel

Project overview

Project team

What we are doing

What community support would benefit our project?

Link Round Up!

Highlight other projects

ProgNovel's Built-in Revenue Share in JAMstack based markdowns

The problem with sharing revenue

Enter ProgNovel CLI

Conclusions

🖥️ `<novel-trivia></novel-trivia>`

🪶 `<authors-note></authors-note>`