Teaching cPython and Web Development in the Browser
Content Types

Content Types

The Forest Wiki has Syntax checkign support for HTML, cSS, Javascript, Pug, SASS, coffescript, JSON, and Jinja.

First Steps 

We start by building a simple wiki.  We will add and edit pages using a WYSIWYG editor. That is how I built this page.  Everything is done in the browser.  There is no need to learn how to use a shell.  You can click on the image below to try out the WYSIWYG ckEditor.   


Please click on the editor to try it.

File Browser

Once you have created a few pages, you can use the "file browser" to rename, retitle, cut, copy paste and delete pages. .  Here is a picture of the folder with the images for this page.  You can also click on it and try it out, but since you do not have permission, you are not able to make any changes.  

HTML Editor

By now you have all the tools to create a simple web site.  Once you have done that, we will move onto our first lesson.  Editing HTML.  Here is the Ace Editor we will be using to edit HTML.  Go ahead and click on the image to try out the demo.  Go ahead and edit the HTML.  Don't be scared.  In the likely event that you make a mistake, it will give you a warning.  that is what we call a syntax checking editor.  Throughout this class we will be using syntax checking editors, first for HTML, then for CSS, Javascript and other content types. 


Please click to try out the HTML editor.


CSS Editor

You should spend as much time as you need to master HTML.  Once you understand it, you can move on to mastering CSS.  Here is the syntax checking ACE CSS editor.  It is the same software as the Ace HTML editor, but it checks for CSS syntax, rather than HTML syntax.  Go ahead.  Don't be scared.  Please click on it, edit the CSS.  It is okay to make a mistake, then you can see how the syntax checking works.  It gives nice error messages when you click on the 'x'.


Please click to try out the ace css editor

Restoring History

What happens when you make a mistake?   (Students make lots of mistakes.)  All of these editors support the undo function.  But the forest wiki also supports snapshots. Every time you save the file a snapshot is made.  You can name the snapshots and revert them.   Of course you have to be logged in to use this feature. 

View and restore the history for this page.


Once you umderstand CSS, well be patient, I still do not understand CSS, you can then move on to using the Javascript editorr. 

Please click on the image to try out the syntax checking Ace Javascript editor.


Please be patient.  It takes time to learn Javascript.  And pretty soon you will realize that it has too many squigly brackets, and can be a real mess.  Once you realize that, it is time to upgrade to CoffeeScript.  CoffeScript gets rid of the squigles, and imposes order on messy Javascript.  CoffeeScript uses indentation to define the structure.  Javascript has all those squigles, so that the computer could figure out where one section begins and the next section ends.  But we humans find that it is much easier to use indentation.   So next please try out the syntax checking Ace coffeescript editor.

Please try out the syntax checking Ace CoffeeScript editor.

CoffeeScript makes a few other simplifications to Javascript, you will quickly be amazed at how many fewer lines of code it requires.  But everyone starts with Javascript.  Don't ask me why. "I don't understand people."


Once you realize how nice it is to throw out the Javascript {} brackets, you will start asking if we can also throw out the html <> brackets.  Yes we can.  That technology is called Pug.  (What a terrible name.  It used to be called Jade, but someone else owned that trademark.) Here is what Pug looks on the left, and what the generated HTML looks like on the right.   

PUG Generated HTML
    title Pug  HEML Demo
      h1 Pug HTML Demo
      p Pug makes it easy to generate HTML


  <title>Pug HEML Demo</title>

  <h1>Pug HTML Demo</h1>
  <p>Pug makes it easy to generate HTML</p>



Notice how the Pug code is so much simpler to read and understand.  Less chance of making a mistake.  Pug is the primary Node.js templating language.  Actually the Forest Wiki has the world's best online Pug Editor.  (The Node developers all use desktop editors).  And web based is much better for education, no need to install software on everyone's computers.  I love Pug.  It is particularly good at simplifying complex bootstrap menus.  

Can we also simplify CSS?  Good question.  Yes, but that is not (yet) supported. 


The Forest Wiki is a client-server development environment.  The forest wiki usually runs on one machine, maybe the teacher's laptop, and the students access it from their computer's web browser.  When you are building client server or distributed applications, the computers all have to talk to each other.  Often they speak HTML but Increasingly they are dong  data exchange  using a standard called JSON.   Here is the Ace JSON editor.  


Please try out the syntax-checking Ace JSON editor.


JSON Schema

JSON Schema is quite magical.   JSON schema can be used to define the user-facing forms for editing data.  It can be used to do data validation on those forms.  When the data reaches the server, it can be used to validate the data again, protecting against possible malicious attacks.  And finally JSON schema can be used to define the data structures on the server. 

Historically JSON Schema evolved to do validation on JSON data.  If you actually click into the JSON schema editor, you will see that the JSON file is quite large.  it is easy to make a typo.  So the industry supported a standard for defining JSON, called JSON Schema.  There is the data in a JSON file, and there is a JSON schema which defines that data. That is how JSON Schema started. 

But now JSON Schema does so much more.  Client and server validation, object attributed definitions and user interface creation.   It is the newest part of the Forest Wiki, and it is spreading rapidly through the system.  Which is a polite way to say that it may still have problems. 

JSON Database

 The Forest wiki acts like a JSON database.  It is a tree of persistent objects, each of which supports a JSON interface.    Perfect for modeling large complex organizations like the US Green Party, displayed in GreenMaps.US.  The data is served as JSON.

Server Templating with Jinja2

So far everything has been edited on the client, and saved to the server.  We have not really been programming the server.  But occasionally you do need to program on the server.  The problem is that when you give your students access to the Python on the server, they can do anything, including but not limited to destroying all of the data.  At that point, eveyone needs their own Forest Wiki server.  But there are a few things which can be done reasonably safely.   Jinja is a Python templating languge.  You define your HTML, CSS or Javascript and add a little Python to interpolate some values into the returned text file.  Jinja2  provides some security, by keeping every student in their own sandbox.  Here is an exmaple of Jinja2 being used to customize an HTML file. 

<title>{% block title %}{% endblock %}</title>
{% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}

Of course to use Jinja2, students need to know Python. To protect security, it is best that we run Python in their browser.  For that we use Skuplt. 


Skulpt is Python running in the Browser.  It is written in Javascript. 

import turtle

t = turtle.Turtle()

for c in ['red', 'green', 'yellow', 'blue']:

Of course running Python in the browser is not ideal.  The biggest problem is that the Ace Editor does not have a good syntax checking Python interpreter.  The Forest Wiki now has the only browser based Python editor with syntax checking.  

Web Classes

The Forest Wiki supports a concept called web classes.  They are analogous to Python classes.  First let us review Python classes, then the comparison will be clearer.  Python has objects, and classes.  Information shared by the instances of a class are stored in the class itself.  This includes python methods (functions) and shared data, attributes. Booleans, Ints, Floats, strings, Sets, Dictionaries, and other information. 

In the Forest Wiki, web pages are python objects.  They are instances of a Python class. They share methods and attributes.  But they can also share images, files, static CSS, and Javascript, Dynamic Jinja2 templates for HTML, CSS, and Javascript, JSON Schemas, and other information.  All of those are stored in the Forest WIki Web Classes.  All of which can be edited in the browser.

Student Management 

Every student gets their own account.  Students register with Google Sign On, so that you know who each student is. The teacher can click into any account and see the student's work.   We could also make it so that students cannot see each others work. 

"File Browser" ZMI

Why do I use quotes around the term "file browser"?  Well it is not really a file browser.  The Forest Wiki runs on an object-oriented database.  So for beginners we call it a "file browser", now you will learn that it is really an editor for a tree of objects stored in the ZODB.  So it really should be called the ZMI, the Z-Object Management Interface. Installing Software

There is no need to install any software on any computer.  Everything is done in the browser.  

Learning the Shell

There is no need to access or learn a shell.  Everything is done in the browser.  


Check out GreenMaps.US to see what you can build with a Forest Wiki.