Demoboard(frontarm.com)
frontarm.com
Demoboard
https://frontarm.com/demoboard/
6 comments
The Vue example actually loads Vue in index.js as an import statement. I'm not really familiar with Vue, so maybe that isn't typical and I should put it as a script tag?
Yes, that works when you have a compilation step on the server.
But it would be nicer to have a complete project in the browser.
Think of it this way: When someone hits 'export' and downloads the zip - how will they be able to run what they built? They need to set up a whole serverside toolchain. If you instead load vue clientside, the downloaded thing would work right away. Without any setup or dependencies.
This applies to the React example just as well.
The server side toolchain is how most devs do it these days. I personally prefer to skip it.
But it would be nicer to have a complete project in the browser.
Think of it this way: When someone hits 'export' and downloads the zip - how will they be able to run what they built? They need to set up a whole serverside toolchain. If you instead load vue clientside, the downloaded thing would work right away. Without any setup or dependencies.
This applies to the React example just as well.
The server side toolchain is how most devs do it these days. I personally prefer to skip it.
Ahhh makes sense.
Demoboard is really made for throwing together a demo as quick as possible. But I think https://codesandbox.io would suit what you want perfectly. Have you given it a try?
Demoboard is really made for throwing together a demo as quick as possible. But I think https://codesandbox.io would suit what you want perfectly. Have you given it a try?
Demoboard would work just as well. It's just about how you set up the examples. One moment ... let me make an example without a server side toolchain involved ...
Here we go:
https://frontarm.com/demoboard/?id=321f4d83-b0d8-4bd0-876b-0...
No more hidden magic. Everything happens in the browser. The user can use the downloaded thing without setting up a server side toolchain.
Here we go:
https://frontarm.com/demoboard/?id=321f4d83-b0d8-4bd0-876b-0...
No more hidden magic. Everything happens in the browser. The user can use the downloaded thing without setting up a server side toolchain.
Yeah, I really do like this way of doing it. I might change the Vue example to do that. For React though, the HTML is usually empty, so it ends up hiding the dependencies within a tab that nobody looks at, so imports are a lot clearer.
Perhaps I could find a way to transform imports into script statements in the exported file. I'll have a think about it...
Perhaps I could find a way to transform imports into script statements in the exported file. I'll have a think about it...
Perhaps I could find a way to transform
imports into script statements in the exported file
There really is no difference between Vue and React in this regard. The React demo without a server side toolchain looks like this:
https://frontarm.com/demoboard/?id=2e5ca405-b011-4d00-988d-2...
Packing up the imports into (a) boilerplate html and (b) boilerplate package.json would allow people to code stuff up quickly in your editor and then download it for integration in their own pipelines with minimal hassle (Maybe add buttons to download as zip with dependencies either in index.html or in packages.json?)
Code Sandbox is great for general purpose coding. I have a whole list of Online IDEs that you might be interested in comparing.
https://github.com/styfle/awesome-online-ide
https://github.com/styfle/awesome-online-ide
It's totally awesome but a bit more space around the preview would be great. I'm on an iPhone 6 Plus running the iPhone Chrome browser and I can't actually see the bottom of the linked preview pane, nor can I scroll down to see the bottom of it (trying to scroll down just invokes the refresh action in the browser)
Thanks for letting me know! I had tested it in Chrome's mobile simulator, and checked that it loaded on my phone, but hadn't actually tried scrolling. Will see if I can find a fix.
I'm kinda surprised that it works on phones at all - I'd really only been targeting browsers (because you don't usually do much coding on a phone), but other than the scroll issue it seems to work pretty well.
I'm kinda surprised that it works on phones at all - I'd really only been targeting browsers (because you don't usually do much coding on a phone), but other than the scroll issue it seems to work pretty well.
Same issue (ofcourse) on iPad Pro. It works quite well coding wise, so when you fix the scroll, it'll be quite good for some experimenting.
Really cool. Would be nice if it had a format option in the editor however. Copy pasting CSS around was becoming a bit annoying because I have to format it manually.
Thanks :-) By "format", do you mean something like Prettier? I'm curious what tool you'd use for CSS?
If you mean indentation, shift-tab should auto-indent the selection
I don't mean to be negative, and the project looks great, but how many more web editors do we need?
Do you have a comparison between this and codesandbox.io?
Really cool! I'm assuming this is using mdx?
Yep! Uses mdx-js to turn Markdown into JSX, and then fetches any NPM packages from UNPKG.
I wrote up an introduction with some details at https://frontarm.com/articles/announcing-demoboard/
I wrote up an introduction with some details at https://frontarm.com/articles/announcing-demoboard/
What I don't like is that some stuff seems to get loaded via hidden magic.
The Vue example loads vue.js. But it is not in the index.html. Why? It would be so much more useful if we could have it all editable in the code.