While opening the IDE in safari (Version 9.1.2 (10601.7.7)) - the editor-console area shows up as below -

On adding lines to the editor, the console area moves down too but it's not there on coming back up to the top of the IDE.

You currently have to click on the text of the filename to select the active file -- index.html, style.css, sketch.js etc. You should be able to click the full rectangle around the filename text.

This github issue is for tracking discussion around how to implement a console for sketches. Users may ultimately still use developer consoles for advanced features, but something simple and basic that provides useful error messages and is interactive. @catarak pointed out that jsbin (http://jsbin.com/) has a console with features almost identical to what we are looking for. The code for that is open source and found here:

https://github.com/jsbin/jsbin

cc @toolness as I know we have had discussions about this as well as it relates to p5.js-widget.

If you hit new a bunch of times, you get a bunch of empty projects.

Would be very nice to have a button to minimize the code editor and maximize the canvas preview if possible. I'm pretty sure codepen has a way to resize panes, right?

Allow a user to upload a zip file or a folder, which would load all of the files into the web editor.

I read from the readme

Or, if you don't want to do that, just ask me to send you mine. Refer to this gist for creating an S3 bucket for testing, or if you don't want to do that, I will send you my AWS credentials.

Is possible to be AWS agnostic? At least for local development?

Thanks!
👍

While we ultimately will likely want "library manager" like features we should probably start with p5.dom and p5.sound included by default.

The onUpdateLinting function in the CodeMirror config currently has a timeout of 2000 ms. With the warning sounds on, it's a little confusing for the alert to sound that long after you've moved on, and after the line style with the red highlighting has been applied.

Would it be possible to either call this.beep.play() to the same function that applies the red highlight to the line with the linting error, or to add a UI control to set that timeout length?

Tested the IDE - http://52.41.35.139:8000/ on IE 11 on Windows 8

• Syntax highlighting not working
  
• aria-live tags are not working - the aria updates are not being read out when the value changes with a screen reader. This however is not a generic IE issue ( aria-live works in this example in IE 11/ Windows 8)

Avenir is for the non-editor text. Modern Pictograms has a bunch of icons, need to download the SVG's rather than the icon font for accessibility reasons.

I noticed that the minified versions of the library are referenced in index.html. I think we should probably use the full versions for things like the friendly error messages, etc. (This can eventually be preference with an editable template, etc.)

If a user is not logged in, and they try to save, prompt them to create an account or log in.

Things that need to be added, eventually:

• Error validation
• Email confirmation
• Password reset
• Login with Github

Two items came up in meeting with @catarak today.

1. Live coding should be a preference that can be disabled. (Play, stop, and pause buttons?). If live coding becomes a hassle to maintain / implement it can be saved as a feature for later.
2. It would be nice to figure out a way to not destroy and recreate the canvas as users type to eliminate the flashing.

Renaming files needs to be more robust. I think what should happen is that it should enforce that the new name has the same extension as the old name.

I'm opening this issue to discuss the term for saving a copy of a project. This is relevant for when you open a project with a URL from someone else's account (like your teacher) and then want to save it to your own account.

Some options are:

• clone
• save as
• save to username
• fork

Whatever we use I noticed the default "tool-tip" on the editor menu all say: "project-menu" and we could use the tool tip to explain the behavior further.

We are discussing at NYC DOE professional development that having ⌘R not be refresh but run is a good idea.

If I click "open" and then want to return to the editor view without opening a project, I have to use the browser "back" button. Maybe an X or cancel option?

I'm only seeing about 200px along the vertical axis in the iframe where the sketch is rendered:

btw, this is chrome Version 51.0.2704.103 (64-bit) mac OS X.

I think this is a CodeMirror plugin, so it shouldn't be too hard.

I've added a bunch of features just to have them without worrying about the design/ux. Some stuff that would be awesome to have input on:

• Login/Sign Up - should these be separate pages or a modal layover? What do form errors look like? There's a design for toasts in the p5 design but not for form errors.
• Add File popup - Do we want this? This also needs a form error design.
• Tabs - Do we need these? Happy to add these as they're an iconic part of the Processing IDE design but maybe not totally necessary.
• Sketchbook (Open in the Nav) - What should this page look like? Do we want to add folders? Eventually, should we integrate tutorials/reference sketches in here?
• Shrinking/Expanding Sidebar and Console
• Navigation Organization - I just added Export and Clone to the Nav, but maybe we want these in a dropdown? Where should publish go? Any things missing in the navigation that we want?
• Project title editing - It would be nice to force the user to add a name.

Or, in general, any design bugs/feedback would be great.

cc @lmccart @shiffman

I am opening some issues to track high priority "next step" features @catarak and I discussed today.

A key feature is for users to be able to "save" projects and have a file management system that allows them to open past projects.

Some of the teachers mentioned today that they like their students to organize their projects into subfolders. cloud9 as a model was mentioned.

Looks like a styling bug where the preferences modal is showing up behind the canvas on the right side. Tested in Chrome 53.

Steps to repro:

1. press play button
2. press gear icon

The editor is now working on IE (cc @MathuraMG), but with a really annoying bug on IE and Edge. As soon as you focus and start typing in the editor, the cursor jumps to the top of the editor. I have no idea why this is happening. I looked at the CodeMirror examples on Edge and IE just to make sure it's not a weird IE/Edge and CodeMirror thing.

Another "next step" feature is sharing. Off the top of my head I think we need share links for:

1. iframe embed
2. share sketch with code editor
3. share sketch without code editor (just the sketch running in the window itself).

Am I missing anything?

Would be good to have a link to github repo for bug reports / contributions.

When you are a beginner and run the editor for the very first time should you see the sidebar? I think I vote for no sidebar.

OR

In the current editor, I have begun to add media uploads. As this is a fairly complicated task, as it stands right now, it only works for:

• jpg/jpeg, png, gif (single frame), and tif
• If you put it in your JS files. Will not resolve media in HTML and CSS.
• If you download the project as a zip, it will download the images.

Eventually you will be able to uploads fonts, videos, and so on, and will parse it in all file types, but for now, I think it's good enough for teaching basic p5.js.

In the user testing session we are leaning towards disabling anonymous saves to reduce confusion for now and add it back later perhaps as a feature. At the very least, prompt users to remind them that they aren't logged in and can if they want.

Thoughts @lmccart?

It may cause issues if the library files are still just linked as CDNs, especially if a user expects to be able to run the project offline.

I would find it very useful to be able to drag the right-edge of the code editor left and right to give more or less space.

I'm working on adding more alert tone options and when I run the app locally, the tone plays almost 2 seconds after the lint error registers. It makes it pretty difficult to tell what the tone is referring to. Additionally, since the lint check is bound to keyup, the alert will sound in situations such as simply taking a moment too long to finish typing out a function name, which is also confusing.

EDIT the issues above have been clarified elsewhere.

This applies for creating a new sketch and opening a different, saved sketch.

the console sits over the code editor so it's often not possible to scroll to the bottom of the code.

Or some sort of randomized / formatted default sketch name? I'd like to avoid the situation where everyone has a zillion "default sketch name" projects:

This is due to how the JS code is inserted into iframe HTML file.

Hitting enter doesn't input the new title.

Haven't pinpointed if this occurs in multiple scenarios but to reproduce:

1. Make a new sketch.
2. Open style.css.
3. Delete contents.
4. Open sketch.js
5. Open style.css
6. Undo.

Will investigate more.

This came up today, whether we want the editor to highlight errors like missing semi-colons. For example the following has a 'missing semi-colon' error which is correct in one sense, but not always the convention in p5 examples.

var blah = function() {
  console.log('blah');
}

Hi I wanted to try this project, I followed the readme but I get:

npm start
...
WARNING in ./~/htmlhint/lib/htmlhint.js
Critical dependencies:
8:7694-7701 require function is used in a way in which dependencies cannot be statically extracted
8:13011-13018 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/htmlhint/lib/htmlhint.js 8:7694-7701 8:13011-13018

ERROR in ./~/jszip/package.json
Module parse failed: ............p5.js-web-editor/node_modules/jszip/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)

Not only should a user be able to organize the files within a sketch into folders, but also a user should be able to organize their projects into folders.

Right now, for S3 hosted files, the editor just silently fails. It would be cool if info could be displayed about the files, but for now, just an error that these files can't be edited.

Proxima Nova & Operator:

Some profile page where you can see another user's sketches.

The elements get painted to the DOM properly, but the following shows up in the console:

"Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of EditorAccessibility. See https://fb.me/react-warning-keys for more information.
in p (created by EditorAccessibility)"