coderoad/coderoad-vscode

👩‍💻 Create or play Interactive coding tutorials in VSCode

coderoad-vscode's Issues

Minimize tutorial sidebar

Allow for the ability to minimize/maximize the Webview as a small/full side panel.

Merge conflict in unit tests produces hidden failure

Processes not loading

Processes aren't displaying, eg. when npm installing.

Improve Level page UI

add dividers between levels on level page
user tried to click on levels on level page

Simplify Bug Hunter Tutorial

Don't allow tests to run if processes running

Should go through a loading stage before allowing tests to run.

If you run tests before the npm install finishes, failed tests are confusing.

Add custom Error page

Add a custom error page if possible:

FEATURE: open multiple files side by side

Allow for the extension to load two or more files, possibly in specific configurations.

See VSCode Commands under setEditorLayout

vscode.setEditorLayout - Sets the editor layout.

layout - The editor layout to set.
The layout is described as object with an initial (optional) orientation (0 = horizontal, 1 = vertical) and an array of editor groups within.
Each editor group can have a size and another array of editor groups that will be laid out orthogonal to the orientation.
If editor group sizes are provided, their sum must be 1 to be applied per row or column.
Example for a 2x2 grid: { orientation: 0, groups: [{ groups: [{}, {}], size: 0.5 }, { groups: [{}, {}], size: 0.5 }] }

Improve load solution UI

load solution button was unclear

Look into using containers

https://code.visualstudio.com/docs/remote/containers

Cleanup Routes & Machine

Flex Styling

• summary page items
  

• tight at bottom of summary page
  

• Home page text
  

Fix broken continue

Continue seems to be loading commits on startup rather than continuing from existing commits

OS Testing

Test on an un-configured:

• Windows
• Linux
• Mac

Show/Hide console

• show console on error
• hide console on success

Clear directions on tutorial list page

Keep \n\n spacing in tutorial parser

Notice the lack of spacing between paragraphs.

Short code blocks should be dark

It's difficult to read the short code blocks.

• make code blocks dark
• syntax highlight in code blocks

Move "Load solution" into "stuck" menu ?

Style landing page

Test output into editor output

Add progress indicator for levels & tasks

no way to see progress between levels. Where am I? How much more?

Options dropdown

Can include:

• link to tutorial site
• contact info
• mailing list info

Add Option to change font size or match with the current edit settings

The CR font appears very small when the editor's UI is zoomed out with larger font sizes. Example:

Fix task position incrementer

Direct attention to start/continue button

Add header with navigation

Add navigation buttons in a header as:

• Home (first page)
• Back / Forward
• Task list

NOTIFY: message failure due to running process

Handle situation where new tutorial started in existing tutorial

Should open a prompt to open a new workspace

CodeRoad intro page on startup

unclear intro on startup

Error thrown on tutorial completion

On tutorial completion, on pressing "continue", this page appears.

See sentry error: https://sentry.io/share/issue/6c2108d1a03c41498da3c2f21aeec1ec/

Add hover on tutorial item

Improve Tutorial Item Data

add more icons to tutorials (eg. React)
add tags to tutorials (eg. frontend)
add an image to a tutorial (if sidebar were larger on main screen)

Build Extension for Testers

Test with 25 users

• test with 25 users

Bundle for testing

Bundle as a VSCode extension.
Put online for downloading

Scroll to bottom of page on new task

Create JavaScript Bug Hunter Tutorial

Create Intro Tutorial

scroll to top after continue

There is a bug where scroll to the bottom is triggered when entering a new page.

It should be:

• start tutorial levels at the top
• on level completion, if the visible window is at the bottom, scroll to the top when the next level is loaded

Improve display tests running & passed/fail

Unfortunately, vscode modals are difficult to control. You can't trigger vscode modals to close after a timeout or close after a change.

I'm considering the idea of a modal in the sidebar with a fixed position over. It could be in the top center or bottom center. @argemiront Thoughts?

add popup scroll indicator for longer content

If a tutorial write-up has a lot of content, indicate to the user that its possible to scroll down to reach the tasks.

FEATURE: store tutorial progress and continue

Current plan for storing user progress and allowing continuing.

Unfortunately, local storage must be stored on editor rather than in client, as it does not exist within the editor browser.

A tutorial can be uniquely identified by its id and version, which should be sufficient to properly load it.

Proposed structure:
currentTutorial: { id: 'some-id', version: 'some-version' }
progress: { 'some-id@some-version': progressObject }

@jensen love to hear your thoughts on this one as well

Refine select tutorials pages

Add Tutorial completion page

Fix stylings and add a congratulatory tutorial completion page

Change task checkbox UI

user tried to click the task checkbox several times. suggestion: use something else

UX Template

Create a UX template for user testing.

FIX: Success message pops up on next level

UI jitter when text size larger

Invalid state if resume after all tasks completed but no continue