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

nimble |nimbəl| (adjective):

• quick and light in movement or action; agile.
• (of the mind) quick to comprehend

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:

1. a code editor, based on Code Mirror
2. some intentionally minimal editor "chrome" (e.g., Undo, Font Size, Show Hints)
3. an HTML parser that provides extra help for beginners learning to code called Slowparse
4. 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
• ...
• Lesson 22: JavsScript
• ...
• Lesson 34: JSHint and finding errors
• ...

In this imagined curriculum, Thimble is an excellent choice for lessons 1 through 9 and early work with JavaScript. With all the style and script resources being included inline, Thimble's single-page model helps make clear to new users where everything is happening. However, at a certain point a single document approach becomes unmanageable, hard to read, and inefficient.

Another issue is that as the code complexity grows, part of learning to code for the web is learning how to use tools. For example, validators for HTML, CSS, and JavaScript are important so one doesn't waste hours on silly mistakes like overwriting a global variable because the var keyword wasn't used, or forgetting to include prefixed styles for other browsers. As one progresses in their learning and mastery of web development, such warnings are imperative. However, encountering them too early in the learning process will be overwhelming and add complexity that may confuse or discourage the learner.

Nimble seeks to aid the user by providing a coding environment that responds to the requirements of the learning taking place. When a particular feature (e.g., multi-file support, JSHint validation, etc.) is needed, it becomes available; until then it doesn't exist as far as the user is concerned.

Mentors and teachers using Nimble for their work can configure these features along with their Makes, examples, and curriculum. The coding environment is responsive and extensible, and dynamically loads whatever UI and internal services are needed. Exactly how this might be done is unclear, whether through <meta> directives in the learning HTML, or with some other metadata. The best implementation is unclear, but the concept is obvious: being able to not only author the content of what the learner will see, but also to selectively configure the environment in which they will encounter it, is very powerful and acknowledges that one size doesn't fit all, and no single use tool is appropriate to every learning situation.