 Hello, my name is Joel Frenisic and in this video I'm going to be showing you how to run Python in a web browser Now what you see here on the screen is a blog post that I wrote This is a blog post where I reintroduced myself To the developer advocate team at octa. I go over a little bit about myself my personal mission statement But in this video, I'm going to be covering this section here the part that's about running Python in a web browser Now in this part, I have a Python environment. That's just running here on this web page I can type code in here and it just gets executed right away and for this game. I built I Give you a sequence of integers a sequence from the online encyclopedia of integer sequences And then you need to write some code here that given three items three Sequential numbers from that sequence you need to return what the fourth would be so in this case I'm getting all zeros so I can just say return zero. I'll be all zeros But now I have a new one. It looks like I just have a bunch of sequences where the the number is just a one plus the one Before so let's write some code here to do that. So first. I'll check for the first sequence And then if that's the case return turn zero and Then the next one it's incrementing by one. So let's add in support for that see here Oh, I have a mistake because I Return the wrong thing. So let me double check this. Oh, there's another mistake. I Didn't do that CC. I just fix it. There's no save button as soon as it picks up that change in code It runs it looks like the next sequence here is incrementing by three. So if I change this here to turn three, it'll Should oh, I need to return There we go And I can just keep going on and on keep adding test cases here That's not the point of this video. The point is to talk about running Python in the web browser So what I'm going to do here is show you how I built this interactive Development environment right into a blog post So to do that, I'm going to go over to a new tab. This tab here is called replet Replet is a programming environment that runs in any web browser and You can use it to write software in a bunch of different languages I'm just going to do a normal CSS HTML JavaScript Environment and let's name it and create it So what this is going to do is give us some HTML to edit and we'll get to see the output of it over there So let's do that. Let's add in a h1 tag I can hit run You can see that it updates itself So now we know that this works and with that we can start adding in some Python into this web browser here So let's do that by going over back to this tab I'm going to go over into my tools menu and select view page source And I know everything is here. If you didn't know where everything was you'd have to kind of dig around but I can kind of Just scroll to the areas where I know I have stuff that I need First thing I'm going to do is copy over this text area. I can put this in here and this is where I've got some Python code and Maybe instead of this I will just say print Hello world So let's run this And you see how there's some kind of weird indentation there. So because of that, I'm just gonna Take that out there hit run. Maybe I need to just hit reload Sometimes it gets hung up here. So if that happens, I just hit reload and wait for it to load back up again Hit run and there you go. Now you can see I've got This little print statement there, but it's not running. It's not doing anything So the next thing that we need to do is add some styling to this little text box here. So to do that Let's go up here and start pulling in the dependencies that will need for all the stuff to run So I've got here a bunch of CSS and JavaScript tags To copy over I'm going to put these in the head Just like this and then the other thing I'm going to do is copy over some of the JavaScript that Well, it's not JavaScript some of the code that runs to make all this stuff work So I don't need the full thing because we're not copying over the game We're just copying over a little bit of JavaScript or sorry Python Close off that script tag and Then copy over just a little bit more Python So we're going to have some more Python here. That's going to instantiate that environment and I'm going to paste this in here as well and Then the last thing that I need to do is actually have Brython run So even though everything's written in Python I need a little bit of JavaScript to start everything up and that little bit of JavaScript is this bit here so I'm going to copy that and Paste that in here and let's say run So here we go. I have this running. I've got a little Python text I can run here. You can see the output there Let's say hello everybody and there you go. You can see some debugging messages. Py run called Hello, everybody. Maybe we don't want it to say that every time so now we can go in here and put that out and hit run again and Then let's change it to Hello everybody and there we go. So now we have it running So what did I just do? Let's walk through this here. So You can copy all this stuff yourself if you want And get it working and if that's the case then You might want to go back and hit pause and at the right places and go through this but in this section I I'm going to talk to you about how I actually got all this stuff working So let's go through here. So let's start again at this bit of code here So maybe we can do here is we can just comment this out Hit run. You'll see there's nothing running. So you know that this is the text area Now the text area is just a normal HTML tag defines a little place. That's Editable you can put stuff in there and people can edit it But to make it look nice and fancy like we've got here I needed to do some other stuff and to do that. I needed to do that with some some code So the next thing that we do here is we include to this JavaScript. So it's just a very simple This is basically one line. We can actually just make it one line here Let's do that just to show you that that's the that's the case And if we hit run it should just still go and all that this is doing is saying When all of the content on the page is finished loading Execute to this anonymous function the cop the the contents of that anonymous function is just this thing that instantiates Brython and once Brython starts up what it does is it goes through and looks for script tags So you'll notice this script tag here says text JavaScript Well when Brython runs it goes and looks for a script tag of the type text Python 3 and If you're paying attention, you notice we did that earlier. So here's our Python 3 And so now what's happening is that Brython will actually go and execute this and if you write Python You'll notice that this is just a normal-looking Python except for this bit here So this is saying from browser, which is just a some library that ships with Brython The browser Library allows you to interact with various things inside of the the browser So document lets you interact with the DOM HTML lets you make some HTML tags. I forget what window does a window allows you to access the window object because you can See the highlights there and then timer allows you to interact with the the JavaScript timer So here what we do is we define a function called runpy another function called edit hook and another one called a knit hook And then what we do here is we say for the instance of code mirror Define an a knit hook meaning when the code mirror is initialized run this code here run the code in the knit hook And what this does is this says It sets up a typing delay timer which I'll cover Just a little bit and then it says whenever something changes or is updated inside of code mirror Run this edit hook Now code mirror is the name of the JavaScript library that makes all this stuff look nice And it all does all kinds of you know text editor goodness for you Code mirrors actually used by major web browsers in their developer tools So if you ever open up the developer tools and edited code you're probably using code mirror So Once we have to find this edit hook we want to instantiate Code mirror so the way we do that is we use this window object call code mirror from there and then we say it's use a text area and For this we use this document thing here and this is like a selector This says select the element in the document with the ID of editor. So this bit here is what gets selected And it turns that into a code mirror editor and it does that by Running this bit of code here and then there's some config options here So we can do stuff like we can turn line numbers on and off. So if I change this to false Hit run. You'll see there's no line numbers there, but with code. I like to have my numbers And so let's do that and then the next bit here is it says for mode It's actually Python. So what this is doing is it it's making it so that if I do something like this Or if I type out if a equals one When I hit enter, you'll notice it's puts me where I should be for that next code block And that's because it's in Python mode and Brython knows what to do in Python mode with with text The next bit here is match brackets. You can see that running here. So if I click there It's matching these brackets together visually And this here says I'm using four spaces for indents. I'm not like an old-school Python program We're only using two spaces using four and then you can set a theme and the theme is just what makes this have the colors and font, you know, look and feel that it does and So that's what gets the code mirror launched now The last bit here is what actually executes this code. So let's just say Let's say this a little bit more interactive. You'll say There you go, so you can see as I'm typing out it saying result result is result is blah blah blah result is 10 And that's the the the actual output that we want here Now, how is that working? There's no safe button. I don't have to hit run anymore or any of that The way that this works is when this edit hook is run does a few things So the first thing it does is it checks to see if this typing delay timer is set now if you're familiar with JavaScript timers, this is basically just a JavaScript timer and It's saying if one exists clear because basically we've just edited Some text and what this is doing is basically it's called debouncing So what this is doing is making sure that Whatever I type within a certain window, it'll just fire one event instead of every time I make a change rerunning this code so I clear the timer and then I set a new timer and I do that by using set timeout and What I'm saying here is whenever the timer expires run this run PY code and do it after 400 milliseconds. So the refresh from editor delay milliseconds 400 that's just 400 milliseconds and it says run PY and really what I should have done is made it look like this So it is more Pythonic Let's rerun this here Come on run. Now, you'll see here. Sometimes it's kind of gets stuck. I found that all I need to do here is just say reload after a little bit of Waiting for it to finish I hit this I can go here and turn that there. I can see hello world and So anyway, so I changed this thing to run PY so it all looks nice and neat and All that I'm doing here is doing this little bit of thing. This is the real magic here This function called exec. So exec is the Python function that will execute Python. So you can Evaluate Python from within Python and what's the Python being evaluated? Well in this case it's the contents or the value of the Python editor and This here PY editor You'll see is here and again probably should have named it like this editor and Just execute it and that's what makes all this stuff work. So let's go here and just validate again Let's just say And here I can do another f-string say result is a string and So there you go. If you were to do this yourself, this is just standard Python You can do anything you would do in Python. You can do it here and If you want to learn more You can learn more by searching for a Brython Or going to Brython info and this here even has some other really cool examples. So like this clock here It's all written in Python There's all kinds of little demos and things that you can do They're all shown to you here and So with that I want to thank you for watching this video and I hope you have fun using Python in the browser