esse-dev / a-web-monetization-story Goto Github PK

• add a bit of simulated typing time in between each bubble

This code will be used in the tutorial

• controls to navigate back/next
• maybe add keyboard controls to replace drag and drop
  • eg. hold ctrl to snap puzzle piece to drop location
• make tab key navigation work

• Borzoi mascot moving
• Confetti

animations should not be turned on for next and back buttons

• put code in puzzle pieces
• make sure puzzle piece shadows / missing puzzle piece spots are the right size and disappear when a puzzle piece is dropped in.

Auden has a backstory, but that story should be carried through the flow of the tutorial. There also should be a reasonable conclusion to the story.

Currently we have an online creator named Auden who blogs about their adventures with their dog Chicken.

It would be interesting to have a variety of personas and corresponding backstories, potentially even slight tweaks to the example code based on the persona's site.

This would provide further examples on how to leverage WM for various use cases.

The puzzle pieces on the tutorial steps bounce right away, but that is distracting when a user gets to a step as it draws their attention away from the instructions right off the bat.

Proposing that the bounce is delayed for a few seconds to give the user time to read the instructions before the puzzle piece bounces.

It's currently tricky to add the animation delay because the puzzle pieces are always present on the site, so the animation delay will occur as soon as the site loads. By the time a user gets to the tutorial step, the animation delay will have already elapsed. Will need to do some refactoring to make the delay work.

Or, the puzzle piece can bounce on mouseover/hover...but that might make it harder for them to pick up and drag the puzzle piece.

Content includes: title of webpage, introduction to what the webpage does for the user (a creator), links (if relevant), and a "get started" button

Currently the webpage instantly transitions between steps. Would be cool to have a cute animation when moving from one step to the next.

eg. hand moving in between puzzle piece and drop location to guide user in dragging and dropping

Implement the landing page design from #9
Landing page mockup

• step 1 content is along the lines of
  "Enable monetization on your site by adding the WM meta tag. Drag the meta tag to its place!"
  "Perfect! The monetization meta tag goes in the of your website.
  We’ll go over how to include your own monetization account at the end of the tutorial."

• step 2 content has to do with including Web Monetization JavaScript on your page to hide and show an element.

• step 3 content has to do with signing up with a wallet provider and continuing your Web Monetization creator journey.

Things are too spaced out on a larger screen; it looks okay on a 13" screen, but not 15".

• create directory for image assets
• create directory for dragula
• other organization as fit

On page#12, we should let the user know that the code is copied to the user's clipboard when they press the button.

Add a progress bar of some sort so that the user can get an idea of how far along they are in the story

A short video demonstration of your prototype.
Please only 1 minute long.
With audio or video narration.

• single colour line drawings, to keep it simple
• helps build the "story" theme

Since we are putting html in the <pre> elements, it might be more appropriate to use <code> instead.

Repro steps:

• go to page-0
• press NEXT to go to page-1
• immediately press BACK to go back to page-0
• observe that the elements in page 0 are not visible.

This occurs because of the following code:

setTimeout(() => {
    animatedEl.style.opacity = 0;
}, 800);

It is very unlikely that a user will encounter this problem, as you have to move your mouse very quickly and intentionally to go back fast. It is also easy to recover from this problem, just press next to go to the next page.
So I am marking this bug as an enhancement.

dragging the puzzle piece from the bottom-left to its place on the right and then clicking on "NEXT" in the bottom right, then going back to the bottom left to drag the next piece (and so on) doesn't feel very natural and forces the user to move their mouse across the whole screen on every page.

• write brief description of project
• add info/refer to hackathon page https://betahack.devpost.com/
• mention usage of dragula
• social media/how to contact us

Idea: screenshot the landing page

When the site is visited on a computer but with a narrow window size, it shows the mobile view. We should update the note to specify "full screen" so that it covers the case when it is viewed on a computer, but the window view is too small.

• Visit this website in full-screen mode on a computer to try out an interactive Web Monetization tutorial for online creators.
• Or, check out the following links for more information about Web Monetization and this project:

Use pic of Auden as the favicon

above: Image of the described arrow

Should be able to navigate to the home/start page at any point

Submission should include:

A link to a public GitHub repository
Please list all open-source code, SDKs or APIs used.
Answer the questions on the submission form about your idea, your implementation, and the potential impact.
A short video demonstration of your prototype.
Please only 1 minute long.
With audio or video narration.
Answer all submission questions