
Demoboard - jamesknelson
https://frontarm.com/demoboard/
======
TekMol
Awesome.

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.

~~~
jamesknelson
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?

~~~
TekMol
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.

~~~
jamesknelson
Ahhh makes sense.

Demoboard is really made for throwing together a demo as quick as possible.
But I think [https://codesandbox.io](https://codesandbox.io) would suit what
you want perfectly. Have you given it a try?

~~~
TekMol
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...](https://frontarm.com/demoboard/?id=321f4d83-b0d8-4bd0-876b-0b1ef39cf15f)

No more hidden magic. Everything happens in the browser. The user can use the
downloaded thing without setting up a server side toolchain.

~~~
jamesknelson
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...

~~~
TekMol

        Perhaps I could find a way to transform
        imports into script statements in the exported file
    

Uhh no! That would be even _more_ hidden magic. The beauty of your platform
really shines when there is _no_ hidden process. When the user can
transparently see what happens.

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...](https://frontarm.com/demoboard/?id=2e5ca405-b011-4d00-988d-2a62326447b1)

------
yodon
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)

~~~
jamesknelson
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.

~~~
tluyben2
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.

------
Robin_f
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.

~~~
jamesknelson
Thanks :-) By "format", do you mean something like Prettier? I'm curious what
tool you'd use for CSS?

------
jypepin
I don't mean to be negative, and the project looks great, but how many more
web editors do we need?

------
wishinghand
Do you have a comparison between this and codesandbox.io?

------
julee04
Really cool! I'm assuming this is using mdx?

~~~
jamesknelson
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/](https://frontarm.com/articles/announcing-demoboard/)

