Teaching cPython, Turtle Graphics, and Jinja2 | Christopher Lozinski

Hello, my name is Christopher Lozinski, and today I'll be speaking about teaching Python and Jinja 2 in the browser, and more generally about teaching web development in the browser. You can read more at forestwiki. com or you can log in during the class at demo. forestwiki. com. Demo. forestwiki. com So there's there are wonderful resources on the web for learning Python, but there's a huge difference between learning and teaching. So learning is a very solitary activity. You log into a website, you do some things. Teaching is uh very interpersonal. activity. The teacher has to not

software has to not only manage the technology, but also the relationship between the teacher and multiple students. Actually, I knew a teacher and she had this tremendous knowledge of all of her students, not only what they were thinking, but how what their emotionally, how their families were, what their problems were. It's a very different activity than being a software developer. And of course, if you're interested in teaching, you should know about the work of Jean Piaget, a very famous Swiss psychologist. He was interested in epistemology, the study of knowledge, and how we acquire knowledge, how there's a series of different steps we go through, starting off with, well, in the mathematics case. First, you have to be able to count, then add and multiply, geometry, trigonometry, moving into advanced calculus.

There's a whole series of things that people have to learn one after the other. Actually, if you're working in machine learning, it's very interesting to read this stuff and just compare that with how differently computers work. But of course, I'm more of a software developer than I am an educator. And so most of these teaching Python in the browser, they work with something called Sculpt. Sculp is a Python interpreter implemented in JavaScript. So it runs very nicely in there. browser. The heavyweight in the room is Runestone Interactive. They have wonderful course material, but they run a large Web2Pi server, so they have significant hosting costs. So they have to charge. So basically they make the software available for free, but if you want to access the content, they charge like $100

a year. Not sure if that's for a class or for a whole school. The other group that deserves a lot of credit here is Anvil. They sell a very nice develop app web applications. on both the client and the server in Python. And so they've actually been investing heavily in upgrading sculpt. So thank you very much, Anvil. And the third piece I use is the Ace Editor. Ace has this wonderful editor, syntax checking editor in the browser. It works for all kinds of content types. HTML, CSS, JavaScript, CoffeeScript, Pug, SAS, less, JSON, just a hundred other content types that are less important to the internet And of course, they have a sculpt

the ACE has a editor for Python, but sadly it doesn't have good syntax checking. So the Forest Wiki Python syntax checker does a little bit. Okay, so what are the advantages and disadvantages of teaching Python in the browser? Well of course the browser doesn't run Python natively. So on the disadvantages, we get no debugger. And the advantages, you only have to do one installation. So instead of having to install it on every student's desk, you install it I don't know, either in the school somewhere or on the teacher's computer. And then no other installations are needed. So that's really good.

The other great thing about doing things in the web instead of on people's desktops, well, first of all, you know, even if students show up in class, you want to stay more than two meters away from them. And furthermore, if they're working remotely, they're just you can't monitor what they're doing on the desktop. So a web-based solution is really important. And of course, in the web, nobody has to use a shell or learn how to use a shell. It just makes the whole process of Python much more accessible. And then the best, of course, the best thing about teaching Python in the browser, it's not JavaScript. I don't have that much against JavaScript, but Python is really clean concepts. So it makes a very good first language to teach students. Maybe later they can move to JavaScript once they have the concepts clearly in their heads. Some other deficits. Well, first there's the no-bugger, debugger for Python in the browser.

Limited libraries And uh meaning not all of the Python libraries are imported to say sculpt or to the browser. And then there's the ACE editor limited editoring abilities also. What you really want to be doing is teaching web development in the browser. So there you have the advantage of only one installation. You have the advantage of being able to monitor students' work. You also have the great, just example, Google Chrome debugger, all the great JavaScript libraries, all the great ACE editors are available. And you don't have to mess with the shell. So I'm a very strong proponent of web development in the browser. In fact, I do all of my web development in the browser.

So the first thing we'll be working with today are is turtle graphics. I mean, this is really simple. technology. You can draw lines, turn, shapes, pen up, pen down background. We'll start off with little lines, maybe a square, starting to fill shapes. Eventually, probably by the end of this course, you'll be able to make Symbol drawings like a house. But the magic of Turtle Graphics is not the software API, it's what you can build with it. So you can do these wonderful artistic designs. And you know, if you're a student and you see this stuff and you actually see it drawing, it's very motivating. It's really quite exciting. Fractals , really lovely, lovely stuff. So I hope that this motivates everybody in the class to be a

Turtle graphics developer. And of course, not just um abstract art, but you can do drawings too. Very nice rising sun. So it was a Emotion, maybe Piaget talked a lot about the theory of learning. I don't know if he talked much about the emotions, but total graphics has a huge impact on emotions And of course, there are a bunch of very simple turtle commands. You can tell the turtle to go right, forward, left, or backwards in the left column, in the middle column. You can tell it to draw a circle or a dot. A dot has solid color inside. You can set the background color. You can tell it to go home, the middle of the screen. You can tell it to go to a particular position. You can set a pane color or A fill color.

So lots of simple turtle commands you can do an awful lot. It's fill a shape. So basically you have a begin fill and an end fill. You tell the turtle to, and then you tell it to move in the middle, and then The shape gets filled. Of course, there's an awful lot more you can do with the turtle control. And today's exercises we will actually, one of the exercises will be to Go to the documentation and you know find some interesting command and create a simple problem for your students. We'll have we'll split off into pairs so everybody will get one student. and one teacher and then we'll rotate so you can practice being the teacher. We'll also work on ginger some. Ginger is really quite simple.

I must feel I don't have to explain this. Okay, so line the first and last line are some HTML. Two first, second, third. Um In the second line and second last you're iterating. In the third line, you're setting the user a URL. In the fourth nine, you're setting the username. Really quite simple stuff. There's a lot more features about Jinjo. But the focus is not to teach you ginger, but how to use these tools to teach people. And of course, there's not just for teaching. I actually use these tools for developing green maps. world. It's a map of the United States Green Party, national, state party maps. It actually includes 56 websites for candidates, local parties, multiple different versions of the web maps for

Medicare for All, Green New Deal, Ranked Choice Voting, LGBTQ, lots of subdomains. So you can do an awful lot with these kinds of tools. How do they work? Well, I'm sure everybody here is familiar with relational databases and how Django maps object models to relational databases. I'm running on an object graph database. So to first approximation, it just looks like a tree of objects. Really, it's a graph, but 95% of the time people just see the tree. So you can think of it as a file system. And you can imagine that you have user folders. We have a user folder, some branch of this tree, and it's got user one and user two and user three, and you have the security problem, right? Because you don't want user three accessing everybody else's information. So we

you want to prevent user three from navigating the parent pointers to access the other people's folders. And so Jinja 2 does this really nicely. Um, we'll let you do an exercise on this. It's like, no, no, no, no, you're not allowed to do that. You're a bad student. So let me speak a little bit more about this object database stuff. It's very, very different from a file system. So in a file system, files can't have children. Whereas in object databases, they can. So here we have an image, theforestwiki. com. You can logo, you can go to slash logo and you can see it. but it can actually have children. So we have four different children slash logo 50 wide slash logo 100 wide slash logo

150 wide slash logo 200 wide. So much like a file system you traverse to the image And what 's really nice, I'm not a graphics artist. I don't know how wide these things should be. And I've got hundreds of images. Maybe I need to change their width and recalculate them all. Forget it. So what it does is if it needs access to a particular image, if it doesn't isn't there, it just uses the Python pill library, generates the image, caches it in the object database. Really sweet. Simplifies my life. Working on an object database, very pleasant. So in a minute we're going to do the turtle exercises, but before I do that, you can actually go to demo. forcewiki. com and log in while I'm speaking. We're also after that we're going to do some ginger

exercises, but before I switch, I'll just do one more slide. Another tool here, there are a lot of tools here, but one is Pug. This is one of my favorite tools. So HTML gets very complicated, and particularly when you're doing bootstrap menus, the HTML gets completely unmanageable So I use something called Pug. What it does, it gets the leading templating engine in the node community, but I'm using it in the Python world, really in the browser. It uses indentation to define structure. So on the right you have HTML, on the left you can see the pug. Basically, what you do is you throw the throw away the opening bracket, you throw away the closing tag, and you use indentation. You see the pug on the left, the HTML on the right. Should be pretty transparent.

Really simple technology, very obvious technology. I'm amazed that more people don't use it. And actually the ForceWiki has one of the best pug editors. probably the best pug editor in the browser I know of. Okay, so let us switch to um the tutorial part of the class. I'm gonna ask uh the meeting Zoom coordinator to split people up into pairs of two. We'll do some work as a group, then we'll split up into pairs of two in breakout rooms, and then we'll come back into the group room again. Thank you very much.