GSoC 2017 Proposal: Improving the p5.js Web Editor Experience

junshern

Hi everyone!

My name is Jun Shern, I'm a 3rd year Electrical and Electronic Engineering student at Imperial College London. I'm a huge fan of Processing for giving me my start in programming (almost 5 years ago!), and more recently I've been playing around with the fantastic p5.js. I would love to give back to the Processing community with a Google Summer of Code project!

I've tried encouraging my non-coder friends to get started with p5.js, and I found that many people struggle with the initial setup of the HTML and JS files, which puts them off before even getting to touch a single line of p5.js. The solution to this, of course, is the p5.js Web Editor which the team have already done a marvelous job on, but there is still more work to be done!

I've already approached Cassie (sorry, I haven't figured out yet how to find/tag people on this forum) about this, and I have a couple of ideas which I'd love to work on as my GSoC 2017 project. The ideas follow a common theme of improving the workflow and overall coding experience within the p5.js Web Editor, and are divided into SMALL and FEATURE:

SMALL

I anticipate these fixes to be not too difficult, and I will attempt to tackle these at the beginning of / before the project, to acquaint myself with the current code of the editor and how it all works.

1. Editor
   • ENHANCEMENT Add shortcuts for "Search/Replace" (Ctrl+F currently doesn't work in-editor) EDIT: Oh that's so strange, I managed to get the standard Ctrl+F working sometimes but not all the time... Will look into this more!
   • BUG Fix shortcut for "Run" (Ctrl+Enter does Run the sketch but also adds a newline, which it shouldn't)
   • ENHANCEMENT Add shortcut for "Select All" (Ctrl+A currently doesn't work in-editor) EDIT: Again the same issue as Ctrl+F, I managed to get the standard Ctrl+A working sometimes but not all the time... Will look into this more!
   • VISUAL Can we change the syntax highlighting colorscheme (especially for dark mode)? Or perhaps give users an option to choose between available colorschemes in the Settings menu.
2. General
   • UI Instead of hiding nav features from unregistered users, could we perhaps fade-out the features and turn them off? This gives new users a better idea of what's available, and we could also implement a hover pop-up "Login to enable this feature"
   • VISUAL File browser and editor scrollbar colors should be dark when in "Dark" mode
   • VISUAL UI buttons show pop-up of shortcut keys (if available) when hovered
   • UI Option to hide Preview pane
   • UI Create a button / shortcut key to "Run in new window". This essentially implements Nav > Share > Fullscreen. _The above ^ two points are related; I personally much prefer to have a fullscreen editor window to code in, and have my preview in a separate tab and switch between the two. (I'd imagine that most smaller-screen users would prefer this too!)
   • BUG Click on Preview pane to focus Keyboard (right now all keystrokes sent to editor, doesn’t allow sketch to receive keystrokes?)

FEATURE

I anticipate these to be more difficult to implement, and the specific details of the implementation may evolve depending on priority of issues and available time.

1. HIGH-PRIORITY Autocompletion & In-Editor Documentation

   • I would pick up where issue #99 left off
   • Automatic dropdown menu appears at cursor position to suggest autocompletions based on the current word being typed
   • Right-click/Shortcut key on a p5.js function enables a pop-up reference menu with short snippet on how to use as well as link to online documentation.

2. MID-PRIORITY Improving the Settings menu

   • Current problems: Part of the Settings menu becomes unreachable at certain browser zoom settings, and order of Settings menu on the page causes it to be hidden by the Console when the Console is expanded out to the right.
   • Implement a more reactive menu, not so "static" (exactly what form this should take I'm not sure yet)
   • Add options for syntax highlighting colorscheme

3. LOW-PRIORITY Different "Views"/"Layouts" options (like what CodePen and many other IDEs offer)

   • Visual-mode (current default mode)
   • Programmer-mode (Preview hidden, editor expanded)
   • Other layouts options (such as expanding HTML/CSS/JS files into different panes, rearranging position of Console / Preview, etc)

I realize that these are quite a large assortment of different things to implement, but based on my own experiences with the editor and what is available in other full-fledged editors, I believe these to be very useful features which will greatly improve the development experience of new and experienced users alike! I am however open to suggestions on other things to work on related to the editor, especially any more high-priority issues I might have missed.

In terms of ability, I am confident that the chosen proposal will be suitable to my current abilities - challenging but hopefully not too much for me to handle. I am not a web-dev guru, but I have dabbled in small web projects of my own, and am pretty confident with programming in general (you can find my GitHub profile here, my personal website here, and a portfolio slideshow I created for job applications here). Most recently, my friends and I were working on a web-based ARM editor and compiler for our course which is written in F#, transpiled into JavaScript, and runs as a web-app on the Electron framework - I feel that this is quite relevant to the work I am proposing on the p5.js editor.

I would be very grateful for any feedback you can give me before I put these ideas into proposal form! :)

shiffman

Thanks for this excellent and thorough post, I look forward to reading your proposal.

junshern

Thanks Daniel! I have submitted a first draft proposal on the GSoC website, would love to get any feedback on it before the deadline. :D

junshern

Small update:

1. Fixed the newline issue in Ctrl+Enter bug

2. Just realized that the exact problems I brought up about the Preferences menu is already an issue, I didn't see this earlier: Issue #266

Onwards and upwards! :)

kfrajer

can you share the link to the web editor?

Kf