Pencil Code is an open-source project to make professional coding idioms acessible to beginners: coding should be as universally acessible as using a pencil.
The major mission of Pencil Code is to provide a universally accessible programming surface that can be used by beginners from elementary school up to a level of a college "CS1" class such as Computer Science Principles. This is a wide range of ages and skills; Pencil Code is inspired by the model of being as applicable as a pencil, useful both in kindergarten and college.
Pencil Code is an MIT-licensed node.js-based web application implemented as a simple Express server, with almost all the application logic in the browser (Pencil Code on github). Pencil Code combines the ACE text editor, the Droplet block editor, Iced Coffeescript, jQuery, jQuery-turtle, socket.io, and several other components to provide a welcoming programming environment for beginning students.
The projects below follow the theme of improving the underlying technologies to make programming more approachable for beginners.
Also, be sure to start up a discussion on pencilcode-development on Google Groups about various project ideas that interest you.
This project is to create a new user interface for Pencil Code, built around social coding for beginners.
Learning in software engineering is different today than it was 20 years ago. Today, practicing software engineers learn a new technology by participating in a community, reading examples, posting questions, and sharing code. They do not learn alone. But Stack Overflow and github are not welcoming to beginners because they are too difficult to use (for technical reasons) and too intimidating (for social reasons). What needs to be done to knock down this barrier?
This project idea is to knock down the barriers to social coding entirely. Beginners write their very first code inside a message board, and saving their code should create a post. What would you get if you merged Stack Overflow with jsfiddle, and designed the experience to be as welcoming as possible to first-time programmers that might be as young as 14 years old?
If you are proposing a project to address this need, you should draw up a specific simple design that can be implemented in a summer (taking advantage of Pencil Code components), and then prototype a portion of the design. We are fans of several of the open-source question answering implementations such as BioStar, and using one of these as a starting point would be a good way to make an impressive, quick start.
Music is a terrific motivating application for many students, and Pencil Code's support for playing songs using ABC notation is already great fun to use. However, it could be far better, and we have teachers who want to use improved music support.
One key request is for more instruments. Pencil Code uses a little library called musical.js to do create music. Musical.js is much smaller and more elegant than other similar libraries that depend on sampled downloads to create instrumental sounds, because it completely relies on synthesis to create its instruments. With just about 20K of code to download, musical.js is very different from musical solutions such as midi.js that require many megabytes of downloads.
However, musical.js only includes one instrument: a piano sound. This project would be to create a larger array of instruments, and to still do so without sampling.
This project would break down into two parts:
This project would be to incorporate Traceur support into Pencil Code to include support for ES7 "await," so that this is no longer an issue. If it works well, we could switch the default in Pencil Code from CS to JS.
This project is to add ECMAScript-7-style "await" syntax to Iced Coffeescript to provide students with an easy way to wait for input or other asynchronous processes in their programs.
This project is meaty enough to be interesting for any student interested in programming languages, involving reasoning about continuations, asynchronous programs, and promises. Yet it is clean, achievable and practical, and it will have a big impact on the range of projects that can be created by beginning programming students.
This would be a major project, but a summer student could propose doing only one half of it.
This project is to bring one or more popular educational libraries into Pencil Code, and provide block language support.
Possible libraries include:
These should be supported directly in Pencil Code.
To include a script, you should be able to just
include 'scriptname.js'. Common
and popular libraries (such as jquery.js and d3.js)
should be accessible by short name, but arbitrary
script should be accessible by URLs. One possible
approach to making a broad range of scripts available
by short name is to process the long list of libraries
published on cdnjs https://cdnjs.com/libraries.
To use a published npm library,
var lib = require('mylib')
should work as if you had used npm and
browserify. One project that implements
browserify-style require in this way is
(On github here: maxogden/requirebin).
It implements browserify-style require,
taking advantage of
wzrd.in to build
the underlying libraries. We could take
the same approach.
could be implemented in Pencil Code by preprocessing
the student's code to identify and preload dependencies.
With more than 50,000 student projects being created each year, it is getting difficult to find our way around the Pencil Code community.
This project would be to implement search on Pencil Code.
This is mostly an operations and deployment project: we need to learn how to run a fulltext search database such as Elasticsearch on Google Compute Engine - really, we'd like to deploy using ansible playbooks.
Once the search database is running, we should build user-visible features. There are two bits:
Hashtag search would be a key community enabler. It could allow topical subcommunities, including individual classrooms, to have a hashtag.
Some teachers and schools with intermittent internet connections would prefer to use Pencil Code as an installed application.
The first step is to use a tool like Electron to repackage Pencil Code as a downloadable OS X or Windows app. Then the storage layer of Pencil Code needs to be rethought to allow offline use while still allowing interaction online, when connected.
For Chrome users, one strategy is to package Pencil Code as a chrome app.
Students are excited by programming projects that reflect their own personality.
MIT Scratch allows for this by providing a large library of predrawn shapes for sprites, and by providing a bitmap editor for students to draw their own sprites. However, one of the problems with this approach is that students sometime spend too much classroom time in the bitmap tool instead of creating programs.
The idea of this project is to allow students to use their laptop's webcam to take a picture of a sprite to upload and use. They can create a sprite quickly by drawing it on paper with pencil or crayon or other traditional art tools. (My favorite method is to cut and paste shapes out of colored construction paper.)
There are a few things the tool needs that make this tool nontrivial.
This project is to create a server-side component and a small client-side library that provides a JSON-based microdatabase for beginners.
The database should allow use of a JSON query language such as dojox json-query, or a relational query language such as SQL, to extract data and alter values in a JSON file.
The database should support CRUD operations. To allow students to create databases that maintain simple atomic consistency, it should be possible to create queries that:
(Work in progress: being done by Saksham Aggarwal.)
The idea here is to make CSS and HTML coding accessible to beginners by building a block language for them, using Droplet.
Droplet is a new open source blocks-and-text program editor created for Pencil Code. It is a unique approach to block editing, because it allows students to edit in either blocks or text and switch modes at any time, without losing any work. (For example, all spacing and comments within text are preserved when going to blocks and back.)
Droplet supports different languages through parser adapters. This project would involve adding additional language modes to Droplet for HTML and CSS.
(Work in Progress: being done by Jeremy Ruten, Amanda Boss, Cali Stenson.)
Create a visual debugger for beginners, that gives them a "youtube-style" scrubber that lets them examine a trace of their program and run it forward an backward after they finished running the program.
We should provide visualizations of the turtle animation at each step as well as the line-number being run and possibly variable, data structure, and DOM state. Ideally, we would eventually build a visualization that lets students interact with the drawing surface geometrically to and understand the progression of the program over time.
(Work in progress: being done by Xinan Liu.)
This project is to create a server-side component that runs student programs to create visual thumbnails of each one, and that displays those thumbnails when browsing projects.
There are several possible approaches, and also several challenges.