coderoad / coderoad-vscode Goto Github PK
View Code? Open in Web Editor NEW๐ฉโ๐ป Create or play Interactive coding tutorials in VSCode
Home Page: https://coderoad.github.io
License: GNU Affero General Public License v3.0
๐ฉโ๐ป Create or play Interactive coding tutorials in VSCode
Home Page: https://coderoad.github.io
License: GNU Affero General Public License v3.0
If a tutorial write-up has a lot of content, indicate to the user that its possible to scroll down to reach the tasks.
Allow for the ability to minimize/maximize the Webview as a small/full side panel.
There is a bug where scroll to the bottom is triggered when entering a new page.
It should be:
Add navigation buttons in a header as:
Should open a prompt to open a new workspace
unclear intro on startup
Continue seems to be loading commits on startup rather than continuing from existing commits
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
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 }] }
Fix stylings and add a congratulatory tutorial completion page
Processes aren't displaying, eg. when npm installing.
On tutorial completion, on pressing "continue", this page appears.
See sentry error: https://sentry.io/share/issue/6c2108d1a03c41498da3c2f21aeec1ec/
add dividers between levels on level page
user tried to click on levels on level page
Create a UX template for user testing.
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?
user tried to click the task checkbox several times. suggestion: use something else
load solution button was unclear
Should go through a loading stage before allowing tests to run.
If you run tests before the npm install finishes, failed tests are confusing.
no way to see progress between levels. Where am I? How much more?
Bundle as a VSCode extension.
Put online for downloading
Test on an un-configured:
Can include:
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.