Pencil Code Project Ideas

Project: Block Editing for HTML and CSS

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

About Droplet

Here is a short paper describing Droplet.

A short video demo of Droplet in action is here:

Droplet implements the block mode by rendering blocks on a canvas. Its rendering of blocks is based on a text-and-markup data model. Each block spans a portion of text, and it contains sockets and indents which span parts of the block. Each of the sockets and indents can contain further blocks, or just plain text. Droplet computes all the geometry of the blocks based on this marked up text model.

When flipping between text and blocks, droplet switches to a plain text editor. Droplet integrates with the ACE editor (a syntax-coloring programming editor implemented in Javascript).

The specifics of the language handling of the blocks (for example, where blocks begin and end, and what color they are) is handled in specific language parser adapters.

Parser adapters are currently implemented for Javascript and Coffeescript. (Those links go to the source code for the modules which support those languages.)

Droplet is implemented in Coffeescript, and it is compiled into Javascript for distribution.

The Project

This project would involve adding additional parser adapters for HTML and CSS. Here are the steps of the project:

  1. Selecting and incorporating (or building) a Javascript parser for HTML and/or CSS. It is important that the parser used be able to track exact line and character offsets for each piece of syntax in the file.
  2. Creating a Droplet parser adapter. This means invoking the HTML or CSS parser, and then inserting Droplet markup around each Block, Socket, and Indent in the program text. Droplet will then handle the rendering.
  3. Extending Droplet, as needed, for these new types of languages. Since Droplet has only been used for imperative languages before, you may need to add features to make HTML and CSS work well.