search

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

Simpler UX for Creating Swings #36

Closed karlhorky closed 3 years ago

karlhorky commented 3 years ago

For the first creation of a playground / sandbox environment, it would be nice to be able to reduce the cognitive effort required to get to a working, running Swing.

Right now, these are the steps:

  1. cmd-shift-p -> CodeSwing: New Swing...
  2. Get thrown into a file selection window, which is confusing and distracting, figure out that you need to choose a folder for the files to go
  3. Create a new folder in this dialog, with no good suggestion for a default folder name ("untitled folder" is the default on macOS)
  4. Get a long list of options that the user needs to choose from (if the user cmd-tabs away from VS Code, this disappears, leaving the empty folder behind)
  5. Choose one of these options
  6. Start coding

In this amount of time, it is pretty easy to forget that little idea that you wanted to try out.

For comparison, let's look at CodeSandbox:

  1. Visit https://codesandbox.io/s/new?file=/src/App.js
  2. Start coding

Suggestion 1: Here's a suggestion for a possible workflow:

  1. cmd-shift-p -> CodeSwing: New Swing.... This will automatically create a folder with an auto-generated name to hold the Swing files within some VS Code directory, which can be customized afterwards if the user wants.
  2. Get a long list of options that the user needs to choose from (this stays, even when user cmd-tabs away from VS Code). The last-used templates are listed at the top in reverse-chronological order.
  3. Choose from the list of templates
  4. Start coding

Suggestion 2: And something even faster, for those who know what they want:

  1. cmd-shift-p -> CodeSwing: New Swing with Last Template. This will automatically create a folder with an auto-generated name to hold the Swing files within some VS Code directory, which can be customized afterwards if the user wants. It will use the last-used template that the user chose.
  2. Start coding
lostintangent commented 3 years ago

Hey! CodeSwing: New Scratch Swing... does something similar to your suggestion, and is meant for quick/ephemeral/temp swings. CodeSwing: New Swing.. is then meant to allow creating a "permanent" swing that you want to put in a specific location. That said, I could see renaming the New Scratch Swing... command to New Swing... and just providing a way to save the swing to a location if you want to later 👍

karlhorky commented 3 years ago

Ah interesting, I avoided that command, because I thought it would create a swing for the Scratch programming language... which I guess doesn't make a lot of sense 😅

Just tried New Scratch Swing... out and it seems to be pretty consistent with "Suggestion 1" above, nice! 👍

Maybe still an idea to offer a slightly faster workflow for the last selected template ("Suggestion 2")

But either way, if you're open for simplifying this somehow, that would be great!

lostintangent commented 3 years ago

Yep I appreciate the feedback, and can see the confusion in the name now 😁 I'm implementing the MRU list right now, and will rename this command, and introduce the "new swing from last template" command as well. I should be able to release an update this weekend, and I'll ping this thread to get feedback 👍

lostintangent commented 3 years ago

I just shipped an update to the extension that makes the following changes:

  1. CodeSwing: New Scratch Swing... command is renamed to CodeSwing: New Swing... to avoid confusion with the scratch language, and to prescribe the use of "temporary" swings as the main workflow
  2. Added the new CodeSwing: Save Current Swing As... command, which allows you to save the opened swing in a specified directory. This pairs nicely with the previous addition, since you can quickly create new "temporary" swings and save them later if you want
  3. Added a new CodeSwing: New Swing in Directory... command to create a new swing in a specified directory. This is just a shortcut for doing 1 and 2 at once, if you already know you want to create a swing in a specific location
  4. Introduced a template MRU, so that when creating a new swing, the last 3 templates you used will show up at the top of the list
  5. Introduced the CodeSwing: New Swing From Last Template command, that allows you to create a new swing, using the most recently used template
  6. Introduced the CodeSwing: Open Swing in New Window command, that allows you to open swings in a new window
  7. Fixed the template list, so that it's "sticky" when you're creating a new swing

That said, I believe that addresses all of the feedback from this issue 😄 I'm going to close it as resolved, but please let me know if you have any feedback. Thanks!

karlhorky commented 3 years ago

Great, this UX feels pretty nice, thanks!!

One last detail would be to be able to do 6. for new swings, in a single step. I can think of two options for this:

A. An extension setting (could be default-off, if you think that users would more commonly want to start in the same window) to Open all new swings in new windows B. New commands for opening the new swings in new windows eg. New Swing In New Window...