DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Chris Godber
Chris Godber

Posted on

Having a crack at this hackathon

Decided to have a crack at the grant for the web hackathon this afternoon
building on something around Web Monetisation, which is an emerging standard I have to admit I was pretty unaware of before today.

I've started working on a basic project which is essentially an updated version of their 'exclusive' content demo. My idea is to create a preview audio element if the user is Web Monetised for an albums tracks.

I started off doing this in React but got a bit frustrated with it after struggling to figure out how to implement the hooks via https://github.com/sharafian/react-web-monetization

So just moved to doing it in html / js, bootstrap and JQuery in the end as I'm purely prototyping and wanted to get something done fast, and React was getting in the way of that (no shade on React more self shade if anything haha).

Alt Text
Here it is in all it's bootstrapped glory

Wanted to keep it quite simple, and it is at the minute, but need to build on this as it's a super simple implementation with drawbacks - like for example, as it says in their own documentation, at present using the method I have used (itself an extension of the methods in the documentation for hiding content) a tech-savy user can still just go to the audio element and rename the class defining the element as hidden. So there is certainly some limitations I will try and iron out. It is early days though still tbh, plus an alert if you don't are not web monetised probably isn't the most user friendly way to display information to someone.

Github Repo : https://github.com/drnoir/Web-Monetization-Album-Track-Preview-Hiding

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›