General feedback

[rvilarl]

@ronyeh @jaredjj3 @0xfe @mscuthbert @AaronDavidNewman @sschmidTU

I would appreciate general feedback on theme.

https://highlightjs.org/examples

Layout...
Which examples would you add...

[AaronDavidNewman]

Sorry, themes for what?

[rvilarl]

Sorry, themes for what?

Hi @AaronDavidNewman, this repesitory should have examples for vexflow. On this very first draft it presents a vexfow graphic followed by its associated code.

see https://vexflow.github.io/vexflow-examples/

I will focus on factory API as suggested in the past by @0xfe, step3 is an exception.

You will see the code with syntaxt higlighted over black background. This is the theme I refer to. I use higlight.js and the possibles themes are in

https://highlightjs.org/examples

My ideas so far:

• include a text explaining the example (with markdown once again using higlight.ts)
• reduce the duplication in the different codes (leave the font selection aside)

I wanted to get your ideas, I am not convinced about the code theme and the general layout.

Looking forward to getting feedback from all of you and others that would like to see examples on particular topics.

[0xfe]

I don't have a strong opinion on the theme, however can we embed JSfiddle iframes or something, so each example is editable? (I think you can make it use source from GitHub.)

[rvilarl]

@0xfe jsfiddle edition now added as a button. It was not easy to figure out how. :)

[ronyeh]

Thanks for setting up this repo.

My high level feedback is that I think this repo should have a separate folder for each self-contained example.

One of the folders can be called getting-started/ or tutorial/ and have the step by step jsfiddles as you have provided above.

I think jsfiddle style tutorials have some limitations:

• They don't show the complete HTML / JS / CSS page source. It is nice to be able to copy an entire HTML file and edit it.
• They don't highlight important things like the <meta charset='utf-8'> tag.
• They default to a "static HTML page" approach, which is great for simple examples, but perhaps some of the vexflow-examples will be more complicated (e.g., with typescript / javascript / esbuild / webpack).

On the main repo I have a folder of demos/

https://github.com/vexflow/vexflow/tree/main/demos

It would be nice if we could move all those demos into this repo at some point. Each demo / example should live in its own separate folder.

The github pages could be an index page that lists all the examples, and then you can click through to see each one (including the step-by-step tutorial/ examples).

What do you think?

[rvilarl]

@ronyeh now there is a basic infrastructure to support the examples. The HTMLs are also now complete showing the importance of utf-8.

I will move to directories as suggested and I will port the demos.

Thanks for the feedback.

There is a new Theme, still not convinced.

[ronyeh]

Let me know if you have any questions on the vexflow/demos/ folder. I can move them over if you want.

I still think the vexflow repo needs to keep at least one basic example just to verify that the local build works. This vexflow-examples repo is nice, but it requires you to release a new version and npm install it or link directly to the CDN version of it.

Also, right now all the examples use the CDN version of the library.

We should demonstrate different ways to include the library. Some developers might want to npm install it and compile it with their typescript project. There are different bundlers, like webpack, esbuild, rollup, etc. It would be great if we could have a simple hello world example for each use case.

For V4, I built two small repos with micro demos in TS and JS:

• https://github.com/ronyeh/vexflow-example-typescript
• https://github.com/ronyeh/vexflow-example-javascript

If we support a separate directory for each self contained example, I'd be happy to move those examples here, so we can have a "one stop shop" for all vexflow examples.

[rvilarl]

Let me know if you have any questions on the vexflow/demos/ folder. I can move them over if you want.

yes please, move them

I still think the vexflow repo needs to keep at least one basic example just to verify that the local build works. This vexflow-examples repo is nice, but it requires you to release a new version and npm install it or link directly to the CDN version of it.

Also, right now all the examples use the CDN version of the library.

We should demonstrate different ways to include the library. Some developers might want to npm install it and compile it with their typescript project. There are different bundlers, like webpack, esbuild, rollup, etc. It would be great if we could have a simple hello world example for each use case.

For V4, I built two small repos with micro demos in TS and JS:

• https://github.com/ronyeh/vexflow-example-typescript
• https://github.com/ronyeh/vexflow-example-javascript

If we support a separate directory for each self contained example, I'd be happy to move those examples here, so we can have a "one stop shop" for all vexflow examples.

I have nothing against separate directories. I understood it was per topic: getting-started, tutorial,... but we can also separate by example.