Add code examples to our docs using jsfiddle.com or something similar

[joshfraser]

Let's add some simple working examples using jsfiddle.com or a similar code playground tool.

[tolmasky]

Found this bug through a github search and just wanted to chime in that RunKit is very interested in these use cases and happy to help. We created these demos for the nodejs folks that shows what RunKit is capable of:

Standard docs "brought to life": http://nodejs-org-runkit-demo.com/buffer/
Getting Started example: http://nodejs-org-runkit-demo.com/getting-started/

Both of these are using our new beta embeds which were specifically designed to support dozens of embed on a page without hurting performance.

[wanderingstan]

Hey @tolmasky! I stumbled upon runkit yesterday in a duplicate closed issue. Looks very slick.

Kind of odd, but can runkit also be used for playing with non-node js code? We want to demonstrate that origin.js can be used as either standalone js or as an npm package.

Also, am I right that it is code-only? I.e. it doesn't do html/css like jsfiddle and similar?

We're still figuring out what these interactive examples should look like, but we'd love our documention examples (for example) to have links out to interactive playgrounds.

[tonyjin]

Not sure if CodePen properly handles node, but it's worked great for HTML/CSS/client-side JS, for example, which we surface in our documentation

[wanderingstan]

We are now unblocked on this!

@tyleryasaka fixed the exporting of Origin object in OriginProtocol/origin-js#136

@joshfraser got our code a dedicated URL in OriginProtocol/origin-js#75

New home for latest code is: https://code.originprotocol.com/origin-js/origin-v0.5.10.js

@acal, you want to take a stab at starting this? I think there's plenty of places that could use example code!

[gaboesquivel]

@tolmasky RunKit is really nice! 👍

I would suggest CodePen.io for demos that require html.

[wanderingstan]

Got it working on jsfiddle here (after couldn't figure out how to get es6 on codepen):
https://jsfiddle.net/wanderingstan/fx3cg2zr/13/

But looks like codepen does support es6, e.g. here: https://codepen.io/bradleyboy/pen/vEeENy

[gaboesquivel]

It worked for me. What I like is that you can tweak the layout and share it https://codepen.io/gaboesquivel/pen/WJazjV?editors=1010

[tyleryasaka]

I've started work on this but don't have time to finish it. Would be really great if someone can pick up where I've left off here! This is a great first issue for someone to pick up.

What I've started doing is providing one jsfiddle example per API method in the docs. For the attestations I grouped methods together in pairs because neither method makes sense on its own.

This is what I have so far:

Attestation

• phoneGenerateCode/phoneVerify: https://jsfiddle.net/vsw6emo6/
• emailGenerateCode/emailVerify: https://jsfiddle.net/bdxojkch/
• facebookAuthUrl/facebookVerify: https://jsfiddle.net/ayevz85L/
• twitterAuthUrl/twitterVerify: https://jsfiddle.net/7umxxcvu/

Listing

• get: https://jsfiddle.net/qm5e1ud3/
• getByIndex: https://jsfiddle.net/7efosfoy/
• create: https://jsfiddle.net/u03n4L60/

Areas for improvement

In addition to adding examples for the remaining methods, there is room for improvement:

• Write responses to html rather than using alerts perhaps)
• Alert user when not connected to metamask or not using correct network (current examples assume user is on Rinkeby)
• Providing links to demo.originprotocol.com for listings/purchases when relevant (e.g. create a listing, then provide a link to view that listing on the demo)

[micahalcorn]

First version done via #40 ✅