Pyscript NEWS are great!

Go read what’s going on with pyscript, one of the most interesting project for Python carried on by Anaconda, that is continuing to work in cooperation with other contributors to improve this powerful tool that will enable the use of Python in the browser in a similar way javascript does. Go read the news at the following link that is so exciting seeing the collaboration with Pyodide, Bytecode alliance and Micropython:

https://www.anaconda.com/blog/pyscript-updates-bytecode-alliance-pyodide-and-micropython

So, to improve the speed of running python inside the browser we can choose the runtime that best suits our personal project, so that you can use the fastest one if it fits with your purpose. This sounds very interesting. Check the pyscript site too https://pyscript.net/ where you can now find also examples.

Here are some of the examples of the link above.

To do list

Create a to do list in the browser

A clock

Web page that calls the script for the to do list

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>Todo App</title>

    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />

    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <py-config>
paths = [
    "./utils.py"
]
    </py-config>
  </head>

  <body class="container">
    <!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
  <py-script src="./todo.py">  </py-script>

  <main>
    <section>

    <div class="text-center w-full mb-8">
      <h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1>
    </div>
    <div>
      <input id="new-task-content" class="py-input" type="text">
      <button id="new-task-btn" class="py-button" type="submit" py-click="add_task()">
        Add task
      </button>
    </div>

    <py-list id="myList"></py-list>
    <div id="list-tasks-container" class="flex flex-col-reverse mt-4">
  </div>

    <template id="task-template">
        <section class="task py-li-element">
            <label for="flex items-center p-2 ">
              <input class="mr-2" type="checkbox">
              <p class="m-0 inline"></p>
            </label>
        </section>
      </template>

  </section>
  </main>
</body>
</html>

The python script called by the web page code above

from datetime import datetime as dt

from utils import add_class, remove_class

tasks = []

# define the task template that will be use to render new templates to the page
task_template = Element("task-template").select(".task", from_content=True)
task_list = Element("list-tasks-container")
new_task_content = Element("new-task-content")


def add_task(*ags, **kws):
    # ignore empty task
    if not new_task_content.element.value:
        return None

    # create task
    task_id = f"task-{len(tasks)}"
    task = {
        "id": task_id,
        "content": new_task_content.element.value,
        "done": False,
        "created_at": dt.now(),
    }

    tasks.append(task)

    # add the task element to the page as new node in the list by cloning from a
    # template
    task_html = task_template.clone(task_id)
    task_html_content = task_html.select("p")
    task_html_content.element.innerText = task["content"]
    task_html_check = task_html.select("input")
    task_list.element.appendChild(task_html.element)

    def check_task(evt=None):
        task["done"] = not task["done"]
        if task["done"]:
            add_class(task_html_content, "line-through")
        else:
            remove_class(task_html_content, "line-through")

    new_task_content.clear()
    task_html_check.element.onclick = check_task


def add_task_event(e):
    if e.key == "Enter":
        add_task()


new_task_content.element.onkeypress = add_task_event