Webmaker/Concept-Nimble
Note to the Reader
This is a concept for a new Mozilla Webmaker tool called Nimble. This is not an announcement of such a tool, but a virtual presentation for MozFest 2013 on what such a tool might look like and accomplish.
Introduction
Webmaker is trying to provide the necessary building blocks for people to teach and learn web literacy. To that end we have built Popcorn Maker for creating web media, Thimble for interactive HTML, CSS, and JavaScript code editing, and X-Ray Goggles for live exploration and modification of existing web pages. All of this is tied together with a unified publishing, indexing, and discovery service we call the Make API.
In what follows I propose a new tool called Nimble. The name makes obvious reference to Thimble, which is intentional: Nimble is (eventually) a drop-in replacement for Thimble, but also something much more powerful. Nimble is a progressive HTML, CSS, and JavaScript learning and coding environment that grows in power and complexity along with its user. Fundamental to Nimble is the idea of configurable feature addition/removal based on a) the needs of the user (i.e., their skill level and understanding); and b) the requirements of a particular learning module, tutorial, or make.
From Thimble to Nimble
To understand the promise of Nimble, it's important to first look at Thimble, it's strengths and weaknesses.
What is Thimble?
Thimble is live-edit coding environment made up of a few parts:
- a code editor, based on Code Mirror
- some intentionally minimal editor "chrome" (e.g., Undo, Font Size, Show Hints)
- an HTML parser that provides extra help for beginners learning to code called Slowparse
- a preview iframe, which provides secure (i.e., different origin) live preview of the code being edited in the editor.
Thimble is a stripped down editor aimed directly at the first-time user of such a tool, and those who would teach with such a tool. In its present form, it has been very popular and useful. Thimble does an excellent job of putting the code being worked on front and centre: nothing needs to be installed, there's no complex setup for seeing the rendered result of the code in the browser, there aren't complex menus or hidden options. Thimble is simple, to the point, and effective.
Thimble also has some shortcomings. First, its greatest strength also turns out to be a weakness over time, since Thimble can't grow to meet the evolving needs of a user as they learn more about the web; it's stuck in first gear. Second, Thimble isn't easily extended, and overlaying new types of pedagogic or development information is tricky. For example, early versions of Thimble included instructions to users via inline HTML comments. Today Thimble uses a separate Tutorial view, but adding it wasn't easy.
How to Improve Thimble
Making Thimble more capable without undermining its main strength, namely, its simplicity, needs to be done carefully. To help understand the problem, and explore a solution with Nimble, consider this curriculum flow for learning web development:
- Lesson 1: Create your first HTML web page
- ...
- Lesson 5: Introducing the
<img>element, and adding images to your text - ...
- Lesson 8: CSS and inline styles
- ...
- Lesson 10: Loading external style sheets with
<link> - ...
- Lesson 18: CSS prefixes and cross-browser styling