Teaching Python in the Browser

Loading


There are many excellent free resources for learning Python, but the Forest Wiki is the only free resource for teaching Python and web development.  The Forest Wiki understands and respects the student teacher relationship. 

The teacher sets the assignments, the students do them.   Even when the student is working from home, the teacher can monitor progress. If there is an issue, or during grading,  the teacher can privately comment on that student's work.    When the time is right, the teacher can check a box to publish the answers.  When the time is up, the teacher can check another box to limit new submissions. 

Python is the best first language, but it is not the only skill students should learn.  Beginner students can also learn HTML, CSS, Javascript and JSON.    Intermediate students can eliminate the tags and braces on web pages and make the code more intelligible by replacing HTML, CSS and Javascript with Pug, SaSS and CoffeeScript.  Advanced students, and the teachers, can run Python on their own server using PythonScripts, Chameleon HTML Templates, Chameleon Pug Templates, Jinja2 JSON and Javascript Templates, and Transcrypt.    For graduating students it is possible to build a serious term project using  the Forest Wik as a JSON data base.   I used it to build GreenMaps.US

 Free Hosting For Teachers

You can host the Forest Wiki for free on Sloppy.io,  in your school's data center, or  on your laptop.  I am now able to offer free Forest Web Server hosting to teachers.  Sloppy.io offers an easy-to-use GUI for running docker containers, and is privately providing the free docker container hosting.  Shortly they will release a publicly available free tier.  

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.   

WYSIWYG Editor

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.

Javascript

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.

CoffeeScript

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

Pug

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
html
  head 
    title Pug  HEML Demo
  body 
      h1 Pug HTML Demo
      p Pug makes it easy to generate HTML
       

<html>

<head>
  <title>Pug HEML Demo</title>
</head>

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

</html>

 

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. 

JSON

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>
<ul>
{% for user in users %}
  <li><a href="{{ user.url }}">{{ user.username }}</a></li>
{% endfor %}
</ul>

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

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

import turtle

t = turtle.Turtle()

for c in ['red', 'green', 'yellow', 'blue']:
    t.color(c)
    t.forward(75)
    t.left(90)

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.  

Conclusion
 

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


  Teaching Python in the Browser   0 items

  Competitors   1 item

  ForestWiki.com Contact   1 item

  Developer Documentation   1 item

  Forest Map Wiki   1 item

  Less Interesting content   1 item

  Marketing Materials   4 items

  Review of JSON Databases   1 item

  Here is the Forest Wiki's Future Direction   1 item

  Why use an Object Database?   1 item

  On Your Laptop   1 item

  Turtle assignments   1 item