lostintangent / codeswing

VS Code extension for building web applications ("swings") using a interactive and editor-integrated coding environment
https://aka.ms/codeswing
MIT License
977 stars 45 forks source link

Quick iteration workflow: duplicate Swing, make changes, save, repeat #39

Open gubikmic opened 3 years ago

gubikmic commented 3 years ago

Maybe I'm missing something but right now it seems that browsing CodeSwings isn't possible and you have to open the directory and can only have one swing open at a time. Is this correct?

When learning a new framework or language I think a great way to iterate quickly is to move from one example to the next (which is also how documentation tends to do it).

To get a smooth UX for quick iteration I think the following are necessary

If there's a better way already, please let me know. Otherwise I'm also interested in helping implement this but I'd probably need some assistance.

lostintangent commented 3 years ago

Hey! Thanks for the feedback! Currently, CodeSwing has the concept of "tutorials" which is a directory/repo that includes an ordered list of swings. When you define a tutorial, the swing preview will render a navigation bar above the current step, and allow the reader to easily work through them. As an example, you can check out this port of the CSS Diner sample.

That said, I'd love to hear more about your thoughts here, since I'd love to improve the experience. Also, if you have any ideas/examples of great tutorials for learning a framework/language, we could possible use those as the test case for the experience. Thanks!