pencilcode/pencilcode

An online IDE for kids: pencilcode.net.

pencilcode's Issues

Warning for common CoffeeScript pitfalls

The big advantage of CoffeeScript - optional parentheses for function invocation - is also a big disadvantage when it comes to allowing ambiguous syntax that does not run the way it reads on the screen.

We should improve the ACE editor coffeescript mode to add warnings in the following situations:

• Function invocation with an argument that contains an expression that contains a non-parenthesesed operator with lower precedence than "a - b". For example
  "touches a and touches b" which is interpreted as "touches(a and touches(b))" should generate a warning, requiring parentheses.
• Function invocation with an argument with a leading unary minus or unary plus. "a +b" is interpreted as coffeescript as "a(+b)" - an extra space is required for "a + b". This is the worst thing in CoffeeScript, and should generate a warning when it is being interpreted as unary minus or plus.
• Nested invocation of functions with more than one argument. "dot random color, random [1..100]" is interpreted as "dot(random(color, random([1..100])))". This ambiguity is hard to read and we should require our users to use some parentheses around the inner calls.

Set definite range for commands like fd

Inserting a command like fd(10000) moves the turtle out of the output window. I guess it can be confusing and difficult for kids to bring it back. I feel there should be a set range for commands like these determined by the height and width of the output window.

Also, considering the fact that the target audience is kids who don't know anything about rgb values it would be nice to show a little popup saying that the rgb values can only be from 0 to 255 when somebody enters a value which does not lie in the range.

Share dialog email shows "undefined" when not logged in.

When clicking the "Email" option from the Share dialog when not logged in, we get the following email:

Check out this program that I created on http://pencilcode.net!
Posted program: http://share.pencilcode.net/home/vh0em--first
Latest program: http:undefined
Program code: http://pencilcode.net/edit/first

That undefined bit shouldn't be included in that case.

When trying to use a reserved name, the error message doesn't make sense

Ran into this when demoing today.

When using "Save" to create an account with a new name that has been reserved on a very slow school network, a bad error message is shown.

Today, when using pencilcode at a school with a very slow (throttled) network, we got the message "cannot set key" (instead of something like "account name rocco is taken"). This is probably because the JSON request to get a listing of account names was slowed down by the school network, and then we just saved using a name that already exists; and then that failed due to the conflict.

(1) Should fix this error message and
(2) Should find a way to test with very slow networks.

An offline version of pencilcode is probably needed.

Pencil Code is incompatible with Node v0.12.x

There are several reasons we want to upgrade to node v0.12.x:

• We should stay current with the latest node for stability.
• There is improved support for multiprocess servers.

Unfortunately, pencilcode does not currently work with node v.0.12.x. Incompatibilities are probably something relatively simple; we should investigate and upgrade.

Grid lines off

Allow a simple way to turn on and off the grid lines.

Originally PencilCode/jquery-turtle#19.

Make and serve screenshots of programs

When running programs in the IDE, we should snap screenshots and save them to the server as "preview thumbnails".

It is easy to save the main canvas, but drawing the other HTML might be more involved. Here is a library that we could use (and improve) to handle rendering HTML to a canvas.

https://github.com/niklasvh/html2canvas

Javascript/Coffeescript translation

When switching programs between Javascript and Coffeescript (clicking the gear menu), we should translate the student's program between the two languages when possible.

To translate from Coffeescript to Javascript, we could use the normal Coffeescript compiler.
To translate from Javascript to Coffeescript, there is the project js2coffee.

After switching, we should consider saving the original and providing an "undo" link in the butter bar, so it's easy to get back without loss. Using the gear menu to switch back before edits should also restore the original

sethome() function

There should be some way of changing the origin - maybe a sethome() function, or maybe if you pass some arguments to home(), it should work.

Note that you can effectively change the origin to {pageX: 100, pageY: 100} by doing this:
$('#field').moveto pageX: 100, pageY: 100

On an ipad, arrow keys don't work

It's been reported that pencilcode mostly works on an ipad with a logitech bluetooth keyboard, except that the arrow keys don't work.

Needs a repro.

Typo in require fs-ext

Hi,
In https://github.com/PencilCode/pencilcode/blob/master/server/load.js#L2 , the module 'fs-ext' is required. This dependency gave me an error during npm install due to which I discovered that replacing it with 'fs' worked without any error. Even in https://github.com/PencilCode/pencilcode/blob/master/server/save.js#L2 the 'fs' module is required, and 'fs-ext' doesn't seem to use any special methods not in 'fs', and it isn't used anywhere else, so it may be a typo.

Replace 640 lines of python with node.js code.

Pencilcode uses flat files as its store, managed by the 640 lines of python code in site/wsgi that implement the /load/ and /save/ URLs.

This code should be rewritten as a node.js javascript server for these reasons:

1. It will simplify the test environment: the test node server can be the same as the production server.
2. Realtime features (websockets) are easily implemented in node that cannot be easily implemented using wsgi python.
3. By bringing the test environment in line with the production environment, we will be able to innovate on server-side work.

"Another Example" button

Many new users ask for this: when you are exploring a first example before signing up, e.g.,

http://pencilcode.net/edit/first

There should be a big "Another Example" button that randomly loads another example program from the top-level of pencil code.

A complete listing of examples can be gotten via listing http://pencilcode.net/load/, and looking for all the non-directory files that are non-empty.

Quickstart dev documentation refers to missing grunt on Mac OS X

Following a clean install of node.js on a Mac,

git clone https://github.com/nsthorat/rtc-pencilcode-site.git
cd rtc-pencilcode-site
npm install
grunt

fails when trying to invoke grunt, which is not anywhere on the PATH on my box.

However, ./node_modules/.bin/grunt does work.

Better "share link" UI

There should be a "Share" button next to the "Save" button that provides sharing options.

There are currently three different types of URLs that can be used to share pointers to a piece of code in pencilcode.

• An /edit/ url to the original, which lets people see and run and copy and tweak your code (but not save it to your account unless your account is passwordless)
• A /home/ url, which just runs the code without showing the editor.
• A goo.gl shortened url, which brings you to an anonymous /edit/ url with a copy of your code (disassociated with any account).

However, users have no idea of the three options here. A "Share" dialog should present and explain all three with a word or two. Could also allow the URLs to be emailed or tweeted or facebooked etc.

Framework for "Pencil Code Puzzle" problems

A framework is needed for puzzle-problems in Pencil Code.

The editor should allow you to load (or copy) a special kind of program that injects code into the IDE that walks you through a puzzle/problem/tutorial.

Maybe the first line of a program should be allowed to have some metadata that references a tutorial script..... Needs to be thought through.

Renaming

When one logs in to rename a file, it says "Moved to...", which is confusing, because the terminology used in the rename button is "Rename".

JSFiddle export

A Pencil Code program is almost exactly the same as what can be expressed in JSFiddle. We should allow students to export their work to JSFiddle, probably through the "share" button.

JSFiddle has a POST API that should allow us to do this from the browser, and they recently fixed an issue that should allow us to post a coffeescript program.

jsfiddle/jsfiddle-users#532

The POST API is described here:

http://doc.jsfiddle.net/api/post.html

Deal with multiple editor tabs editing the same file.

In multi-tab browsers, when you open two editing sessions to the same file, it is too easy to lose track of which tab has your most recent edits and overwrite them by accident.

We should either avoid this situation or make it less confusing.

A few possible alternative ideas for the user model here:

(A) Make it less confusing: Edits in one tab are immediately reflected in all tabs editing the same file. So it doesn't matter which tab you use; they're all equivalent and in sync.

(B) Avoid this situation, favoring the new tab: Opening a new tab for editing a file closes (or moves to the parent directory) the old tab that was editing the same file. Unsaved edits should be transferred from the old tab to the new tab.

(C) Avoid this situation, favoring the old tab: Opening a new tab for editing a file that is already open in another tab opens the file in a read-only mode, with a message that the file is already open for edit in another tab.

We could use localStorage to detect the multiple-tab case: a tab editing a file can "ping" its editor-start-time and last-alive-time timestamps into localStorage while it is open; and a new editor tab can see the other tab's presence in localStorage, etc.

Interested in comments about whether we think A, B, or C (or something else) is the way to go.

Iframe fails to load for Pencilcode Gym on IE 11

On IE 11 on Windows 8, the iframe for frame.pencilcode.net is empty in on all pages, and I see no errors on the Developer Tools console. In addition, all network requests succeeded, according to the Developer Tools network monitor, but there is no request going to frame.pencilcode.net. Maybe it's something wrong with the browser iframe security or the URL being too long? Works on the same computer using Google Chrome. You worked on iframes a while ago, what do you think?

Save to and load from Google Drive

To allow teachers to manage homework assignments without posting everything on the public web, we should be able to save and open and edit and run pencilcode programs on Google Drive.

I have registered pencilcode as an app with Google drive in a way that will allow us to develop on it. Information to follow in this issue.

Should not run block programs when there are empty sockets

Block programs with empty sockets should refuse to run, rather than running and then producing a runtime error.

Link from help pane into full tutorial or example

My son just told me that he was trying to understand some of the commands in the help pane, and the one-line description and simple code example helped some, but he would have liked the possibility to pop out into a full example program that uses the selected command, so he can explore the command in context.

Texts moving out of the fields in IDE

This is a small issue which i felt in the Pencilcode.net IDE, that some texts are coming out of the fields. For example the "speed" code in move section has text "infinity" which comes out of the field. So, the text field should be increased in my opinion.

Exception thrown when running program

Every time I click on the run button in any program in Firefox, pencilcode refreshes the page. A screenshot of the console output is here.

preview mode panel

Expand on preview mode (design mode?) to provide more graphic details. More details would help to:
-figure out angles,
-identify where to expect a write
-show the turtle's coordinates on the provided graph panel.

Show shortcut keys on mouseover.

ctrl+Enter for run
ctrl+S for save

Originally PencilCode/jquery-turtle#15

Lack of auto-indent

Is it intended? If yes, then the error message is not very helpful.(Unexpected 'POST_IF')
ajaxorg/ace#1844

Migrate from putting code in URL

Currently, 'Ask for help' gives the user a shortened URL containing the code. This fails for large codes such as http://weihang.pencilcode.net/edit/dandelion.

Prefix (or substring) filter for "browse users" page

The "browse users" page is almost unusable because of the increasing number of pencilcode accounts.

The page should include a prefix or substring filter. Enter a substring of the name that you are looking for, and it should instantly filter down to those names that contain the substring.

"Create new account" button

Some users will go to the "Browse users" page and hunt for a "Create new account" button. We should provide one there. (Reasoning: it is a common UI paradigm to see a list of objects and then have an option to "add a new one" to the list - and we follow this paradigm elsewhere on the site.)

Currently the only way to create an account is to edit a program (e.g., "Let's play") and then save it. After your first save, you are prompted to create an account.

This workflow should be available from "browse users". Because the backends like all directories to be nonempty, we could have a boilerplate first file that gets created in order to create the account (e.g., a copy of /edit/first)..

Internationalization / i18n support

Any plans on i18n support?

Rather important for teaching non-english speaking kids programming.

Measure editor fonts instead of hard-coding pixel sizes

Currently there is a line in editor-view.js that hard-codes the glyph dimensions on one of the monospace fonts that we use:

big = { width: 14, height: 29 };

For portability, we should eliminate hard-coded numbers and measure the text.

'See the guide' link in home page

When the user hovers the cursor over the 'Browse user' button, he sees the 'See the guide' link, which is irrelevant to browsing users.

Unable to perform modules installation by npm

When i performed npm install, I got the following output:

C:\Users\Bootstrap\Documents\GitHub\pencilcode [master]> npm install
npm WARN prefer global [email protected] should be installed with -g
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\dynamic.io requires debug@'~0.7.4' but will load
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\debug,
npm WARN unmet dependency which is version 2.1.0
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\grunt requires coffee-script@'~1.3.3' but will load
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\coffee-script,
npm WARN unmet dependency which is version 1.9.1
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\mocha requires debug@'2.0.0' but will load
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\debug,
npm WARN unmet dependency which is version 2.1.0
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\socket.io-parser requires debug@'0.7.4' but will load
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\debug,
npm WARN unmet dependency which is version 2.1.0
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\socket.io\node_modules\engine.io requires debug@'1.0.3' but will load
npm WARN unmet dependency C:\Users\Bootstrap\Documents\GitHub\pencilcode\node_modules\socket.io\node_modules\debug,
npm WARN unmet dependency which is version 0.7.4
[email protected] node_modules\debug
└── [email protected]

I have already installed coffee-script globally.
Need help with this error.

Provide a proxy service for apps to use for fetching resources

Some resources on the internet are only available if requested by a server, not a browser, so we should provide a simple proxy URL for pencilcode apps to fetch resources by bouncing off the pencilcode server.

Two use cases:

(1) PencilCode/jquery-turtle#25 - smart hit-testing. When using an offdomain image for a turtle, we want to inspect bits so that we can hit-test correctly (i.e., don't collide on transparent corners). But CORS rules prevent us from knowing the bits unless we safely bounce off a server we own. (The security rules are what keeps corp secrets safe from public browser pages javascript.)

(2) PencilCode/jquery-turtle#6 - text-to-speech. When using google translate tts, it only accepts requests without a referrer header. So people who use it bounce their requests off a proxy.

Integrate a block language

Integrating the ice_editor is a project for Monday's hackathon.

Implement sitemap.xml

We should implement the sitemap protocol on pencilcode.net so that ordinary search engines can index public pages on the site. We would describe every file in /home/ (not /edit/).

The protocol:
http://www.sitemaps.org/protocol.html

Suggested implementation:
(1) There should probably be a single sitemap.xml for the entire site.
(2) robots.txt (on every subdomain) should refer to http://pencilcode.net/sitemap.xml.
(3) The sitemap should be generated dynamically on-request by crawling the entire directory tree.
(4) The sitemap file should be cached and not regenerated more than once per hour, to ensure that we don't get killed by an overaggressive crawl.

Would make sense to do this after the node.js port of the python servers.

Create a musical visualization for "play" for debugger mode

When the user runs the following code
play "F3/4^G3/4c3/4f3/4[gE]3/4c3/4^G3/4g3/4[^g^D]3/4c3/4^G3/4^g3/4 [d=D]"
There should be a debug mode where it can render the notes that are being played as beautiful music staves, as it does when you paste the string into this webpage:
http://test.incompleteopus.net/vexabc/test/editor.html

The github project incompleteopus/vexabc is an open-source library that could be used to provide this.

Ctrl-S loses focus

When pressing ctrl-s in the editor, it saves, but then it takes focus out of the editor.

It should keep focus in the editor!

Show count of programs by each user in "browse users" listing.

Suggested by premr at PencilCode/jquery-turtle#16

Allows you to know which users have created the most amount of programs that might be of interest.

Return 404 if ajax path is incorrect

Check for X-Requested-With, if it's an AJAX request, serve 404, otherwise if it's a browser, serve the parent directory.

Search Pencilcode directory by keyword

We should be able to search the Pencilcode directory by keyword such as "maze" or "bubble sort."

Pencil Code backend uses synchronous filesystem operations

Right now, pencilcode's server uses synchronous filesystem operations; we should switch to async file operations.

There's a style question when doing the conversion: we could convert the code to using callbacks everywhere; or another alternative is to use Promises, and use Promise-style asynchronous style.

Better help UI

Originally PencilCode/jquery-turtle#13.

Create a quicker link to the PencilCode reference card rather than having to search through the help link. Make the reference card a modal pop-in that is HTML and not a PDF.

Firefox compatibility problem

test panel

I entered the command: Turtle help.
The test area and graph areas write to screen js code.
The only way to clear the panel is to hit the 'run/execute' button.
Clean-up error handling in test panel.
Provide a more elaborate guide for correct syntax/usage.

Grid numbers

premr suggested: Allow numbers on the grids so people can know where to move the turtle in x,y rather than just relative movements

davidbau wrote: Yes great idea - there should be a debugging button that toggles "show movement labels" that

(1) shows grid labels that prem suggests and
(2) puts a protractor / compass rose under the current position of the
turtle
(3) shows a forward /back number line under the current position of the
turtle.

And maybe when in this mode, mousing to different parts of the screen
should preview code like "moveto 42, 32" or "fd 108" or "rt 144". Some
sort of click or gesture should enter that code into the editor.

Originally PencilCode/jquery-turtle#20

Indenting a collapsed block does not indent its body

Example: http://weihang.pencilcode.net/edit/test
I pressed tab on the second line while the test function was collapsed.

Password recovery email address.

Implement a password-recovery email flow.

Two possibilities here. We could just allow it without verification - trust our users.

Or we could suggest collection of an email address at signup. Although COPPA prohibits retention of an email address as part of the account, it does allow retention of an email address hash. This would be enough to permit an email address to be re-entered and verified during a password-recovery flow.

Originally PencilCode/jquery-turtle#14.