Super Mario Bros © in the browser using PyScript

Today, give a try to Techtonique web app, a tool designed to help you make informed, data-driven decisions using Mathematics, Statistics, Machine Learning, and Data Visualization

Disclaimer: I have no affiliation with Anaconda Inc.

If you’re a Pythonista, you’ve probably been hearing about Anaconda’s PyScript in the past few days. Since it’s been introduced at PyCon US 2022, its growth in terms of GitHub stars has been spectacular (to those who are downloading/using my packages thousands of times each month, I would appreciate to earn your GitHub stars too ;) )!

So, what is PyScript? It’s a framework that allows users to create Python applications in the browser using HTML (using it in conjunction with Javascript can be helpful too). The best way that I found to get started with PyScript was to read this article, and here is a simple example adapted from the article:

<html>

  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  </head>

  <body>
    <!-- The date will appear in the label with id "today" -->
    <p>
      Today is <u><label id='today'></label></u>
    </p>
    
    <!-- Python code to print today's date in label with id "today" -->
    <py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
  </body>
  
</html>

There are three things that I like about PyScript:

Nothing to install; you just need a text editor to code a PyScript app
No other dialect to learn: it’s HTML (and Javascript) and Python
A PyScript app can be deployed instantaneously in the browser

With that said, the project is still in its infancy, and according to its GitHub organization, as of 05/08/2022, it’s extremely experimental. Indeed, IMHO, the apps are still relatively slow to start. It will certainly get better with time though, as more people are joining to contribute.

Other advanced examples can be found in here. I deployed the Super Mario Bros © example on my website. To get started, scroll the page and wait a few seconds until “Loaded Model!” appears at the bottom (third row). Then, use <- -> to move, and x to jump. If you own the copyright and want me to remove this game from my website, do not hesitate to contact me.

Super Mario Bros