Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add interactive demo #1752

Open
Krinkle opened this issue Jan 11, 2021 · 0 comments
Open

Add interactive demo #1752

Krinkle opened this issue Jan 11, 2021 · 0 comments
Labels

Comments

@Krinkle
Copy link
Member

Krinkle commented Jan 11, 2021

I currently use one of two approaches.

  1. Existing demo with console hackery:
  • https://qunitjs.com/
  • Open "Browser Result" frame as its own tab (e.g. right-click view iframe, or cmd-click "QUnit Example" title link)
  • Open browser console
  • Page code sample (this fragily depends on being able to run additional tests on an HTML page, even after it has already completed the run, which kinda works but not really and is not actually documented or supported, and causes confusing errors in case of genuine failures).
  1. CodePen / JSFiddle etc.

We either create a basic "Demo" page ourselves with an editable JS area and see a live demo (with the current example as starting default boilerplate), or we could embed a forkable demo that we host with something like CodePen.

Another option might be to do what MDN did (or used to do, they recently changed frontends and have not yet implemented it on the new side, ref mdn/yari#1428). The way MDN worked is that they render a locally owned iframe and source code preview, without third-party code or embeds. Much like the demo we have on our home page today. And then have a button to instantly create a new CodePen draft with the contents of the demo pre-filled. That seems like a pretty good trade-off. Especially because it means the demo will still render fast and independent of third parties, and it also means we don't have to keep a remote resource up-to-date during releases. Instead, the contents are transferred at runtime via a POST request if the user pressed the button.

MDN's old code for this, at:
https://github.com/mdn/kuma/blob/e145cf3c708326d7da57883b32dda9ab70cd1408/kuma/javascript/src/live-examples.js#L94-L105

@Krinkle Krinkle pinned this issue Jan 11, 2021
@Krinkle Krinkle unpinned this issue Apr 1, 2022
@Krinkle Krinkle transferred this issue from qunitjs/qunitjs.com Mar 29, 2024
@Krinkle Krinkle added Type: Enhancement New idea or feature request. Category: Docs labels Mar 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

1 participant