Playground Improvements
- Dominant language
- JavaScript
- Stars
- 5
- Forks
- 7
- PR merge metrics
- No merged PRs in 30d
Description
The browser playground is one of the most popular pages of the website, and it's very much my intention to lean into that to provide a really compelling first-touch with Elementary for new users, and a place for existing users to explore and iterate quickly.
Right now, it's a bit lacking in features, and the error handling story could be a lot better. Part of the Elem v4 roadmap is a much better error handling story across the library, which we can surface easily in the playground at that time. In the meantime, I'd like to hit a couple of features that extend the usability of the playground. I'll check these off below
- [ ] Use hotkeys to evaluate/render user code instead of automatically rendering on every keystroke
- `shift + enter` to render
- `cmd/win + shift + enter` to reset the runtime, reload the VFS, and re-render
- [ ] When the above is done we can effectively remove the bottom bar from the page layout and create more room. At the same time, I'd like to rearrange the right hand side into three panels stacked on top of one another: a console panel, and two plot panels
- The console panel initially reads a very brief UX guide: "shift + enter to start, cmd + shift + enter to reset" and a link to the docs. Inspiration: https://zen.cephasteom.co.uk/
- Once the user begins working, the console panel overwrites/updates itself on each render with either the latest error message or the latest render stats
- The plot panels are initially blank, but begin real-time drawing as soon as the user renders a `scope`, `meter`, or `fft`
- [ ] Add support for mic input
- This is just wiring the web media stream to the elem node and giving the user some config panel to allow them to enable it
- [ ] Add support for midi input
- This is quite like the new web midi tutorial on the docs site, again with a config panel for the user to enable it
- This one also has big implications for how user code should address state changes over time. I have a design for this already that I'd like to implement, but if any contributer wants to tackle this before me let me know! We can open a new issue with further details
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the browser playground and trace the current automatic render flow, page layout, and right-hand panel behavior. Use the listed hotkeys, console guidance, plot panels, microphone input, and MIDI input as the acceptance checklist; the MIDI design still needs further details before that part can be started.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- audio-video-rtc, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100