Pencil Code Project Ideas

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 provides basic tools that students can used to explore the field: a programming editor supporting Coffeescript, Javascript, HTML and CSS; a little free server space for storing code and data, and for doing real-time communications; and a turtle graphics library with tutorials to start with.

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,, 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.

Project: Social Coding for Beginners

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?

  1. Beginners need to get used to the idea that other people read their code when the stakes are low. Their very first code - when it is "OK to make mistakes" - should be social.
  2. Social affordances should allow safe areas for beginners to support each other such as "all the self-identified beginners who started on the same day," or "all the people in a physical classroom class."
  3. Technical problems need to be easy to reproduce: we cannot assume beginners start with the skills necessary to compose a technical question containing everything needed to reproduce their problem.
  4. Technical answers need to be easy to understand: we cannot assume beginners can see a code snippet and recognize the difference between that code and their own; or how to run it, or visualize its behavior.

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.

Project: Create an Orchestra

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:

Project: Export to Other Coding Tools

One of the values of Pencil Code is that code written here can be run anywhere that JavaScript runs. This project would be to build support for exporting projects or otherwise integrating Pencil Code with other tools. For example:

Project: Traceur ES7 JavaScript Support

A key reason Pencil Code uses CoffeeScript rather than JavaScript is that Iced CoffeeScript includes "await" support.

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.

Project: Await for Beginners

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.

Await for Beginners: Detailed Project Description.

Pre-Project to do before submitting a proposal.

Project: Python in Pencil Code

This would be a major project, but a summer student could propose doing only one half of it.

The idea would be to use a Python-in-Javascript implementation like Skuplt to allow teachers to use Python as a browser language within Pencil Code. There are two parts to such a project.

Project: Additional Educational Libraries

There are several popular Javascript libraries used by educators: typically the approach is to ask students to learn Javascript or Coffeescript at the same time as learning to read the API for the library, navigating examples and tutorials, all while learning programming concepts.

This project is to bring one or more popular educational libraries into Pencil Code, and provide block language support.

Possible libraries include:

Project: Generic Framework for Libraries

There are a couple popular ways developers share libaries in the Javascript world:

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

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 to build the underlying libraries. We could take the same approach.

Both include and require could be implemented in Pencil Code by preprocessing the student's code to identify and preload dependencies.

Project: Search and Hashtag Galleries

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.

Project: Installable Pencil Code Application

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.

Project: Webcam Sprite Maker for Students

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.

Pre-project for Webcam Sprite Maker

Project: Microdatabase for Beginners

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:

One possible implementation strategy for the microdatabase idea.

Project: Block Editing for HTML and CSS

(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.

Block Editing for HTML and CSS: Detailed Project Description.

Pre-Project to do before submitting a proposal.

Project: Visual Debugger

(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.

Visual Debugger: Detailed Project Description.

Pre-Project to do before submitting a proposal.

Project: Visual Thumbnails of Projects

(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.

The challenge in both cases is to render the output faithfully to what the student sees when actually running the program.

Pre-project for visual thumbnails