feeley / codeboot Goto Github PK
View Code? Open in Web Editor NEWAn in-browser JavaScript REPL which supports single-stepping
An in-browser JavaScript REPL which supports single-stepping
Syntax highlighting fails in some cases, e.g. unclosed comments or error messages.
A code editor should have a heading containing the name of the file, an "x" button to close the editor, and a "load" button to load the whole file and execute it.
For consistency, the REPL should have a heading (for the clear button, and maybe the cancel/play/step buttons).
At startup, no file editor should appear. Only the REPL should be visible. By using a menu in the navigation bar, an existing file can be selected for editing or deletion, or a new file can be created.
The editors and REPL should be laid out vertically, with the REPL always on the bottom (i.e. editors between the navigation bar and REPL. It should be possible to drag the editors to change their order.
The internal files should be saved to the web storage of the browser.
One possibility would be to display the step counter in the REPL itself, instead of the blank line. When execution is done the step counter would be added to the transcript.
For the novice user, the step counter may be confusing. So by default, the step counter should not be visible. One possibility is to only activate the step counter when the user does single steps the code (the play-pause button, or the play-animate button). When the play-infinite button is pressed there would be no step counter.
Matching brackets are no longer highlighted in the REPL
When it is clicked (for a few seconds), and then dragged, the items in the list are not highlighted. The mouse click must be ended for the highlighting to appear, and the the menu item has to be clicked. This is strange.
Also, the time before the animation menu appears is too long. It is about 1 second but should be about 1/3 to 1/2 second (which is less than a normal single click).
Also, on Chrome, a filename appears at the bottom of the window when the mouse is hovering the menu.
This causes problems when the code in an editor is highlighted (the font that is highlighted gets bigger, which changes the line spacing, etc).
Naming the button "Step" is misleading because to execute the code "1+2" the user has to press "Step" 4 times, but there are only 3 execution steps. If it is named "Start" at first, then the "Step" button is pressed 3 times.
Perhaps there is a better name than "Start" which is related to stepping.
The file editing windows should have a "load" button which pastes to the REPL a "load(filename)" command and executes it. That way, the transcript will have a record of which files where loaded and at what point in the interaction.
For consistency, the load button should come in various flavours (load-pause, load-infinite, load animate). So perhaps the "load" button should have the same icon as the play button.
The REPL should always be visible, but the transcript should use a fixed portion of the page.
That will minimize confusion on the function of those buttons.
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.