Mozilla WebMaker Project: Thimble

Thimble is the Web Page creation tool in the Mozilla WebMaker Project, a learning experience for fledgling Web Developers. This is very worthy project to foster web development skills.  But Thimble is well named because for an ambitious project like WebMaker, Thimble is a)way too underpowered and b)too annoyingly intrusive during page development.

I had expected at least two things with the Thimble Web page editor. First, there would be a simple help system like in Mozilla’s X-ray Goggles where typing the “H” key unlocks with a simple popup screen all of Xray Goggle’s secrets. Now you can’t use “H” in Thimble because it is a legitimate edit character – but sure CTL+H or CTL+SHIFT+? could be used – no they don’t work

Second, I had expected that Thimble would provide coding conveniences like pro Web editors such as JetBrains. For example, as soon as you type an HTML tag, the closing tag is automatically insert into the edit line[<p> instantly becomes <p> </p>]. Or within an HTML tag, as soon as you type a valid option, say width its is expanded to width=” “.

Yes, Thimble has color coding and does allow advanced features like style= and onmouseover= options in its HTML tags. But unlike many Web editors it has no hints for what are valid options within HTML tags or statements. Now this latter point may be expecting to much of a Thimble editor. But part of the learning experience is how to anticipate what is available in Pro tools.

Web development insights

But the most disconcerting aspect of Thimble is its aggressive and awkwardly too big error messages. At times they simply get in the way so you can’t fix the error they are flagging. Also they popup too soon in many instances, becoming an annoying distraction.

Some Better Tools

What is missing from the WebMakers project is a partial  list of free, online  learning tools available right now for developing WebSites or Web pages. Here is a partial  list – has tutorials and Try+Test code pages for HTML, HTML5, CSS, JavaScript and lots more. A must see site for starters and even pros. – helps users to setup a complete pro website and blog in less than an hour. And its free. – ditto …setup a website and blog in less than an hour for $zippo lighter. – help in debugging JavaScript code for a dozen pro-JavaScript frameworks
Blockly – with its drag and click simplicity, this is a great way to learn basic computer programming

And this is just the tip of the iceberg on great, free online Web development tools. For example, w3schools eases users into HTML web page development yet also offers comprehensive tutorials on HTML, CSS and JavaScript among basic Web tools. Even more compelling, either or allows users to develop a complete website with web pages, menus, and great control over their sites look and feel. Both tools have great Page and Post editors that run like Word or any good eMail editor  so many users will be up to speed creating their website in no time. Even better, the editors run in dual mode so while laying out the page users can click on the HTML tab to see the HTML generated for their layout. Like wise they can make changes in the HTML and then click on the Visual tab to see their html changes reflected on their page in WYSIWYG – this is a great learning method.

In fact, in a series of  lectures I give on free Web development  tools in the Cobourg and Toronto areas, these are the tools I use to get users up to speed in creating their  own websites in 1 or 2 sessions. Many are capable of going on and fully completing their websites. Note it is “websites” not one or two web pages. So I like the goals of the WebMaker Project – but its Thimble tool is just that –  too small for the real task of WebMaking.