PyScript 🐰

🐍 Python dovunque e perchiunque

github.com/pietroppeter/pyscript-python-dovunque-perchiunque

 
<!DOCTYPE html>
<head>
    <title>Questa è una WebApp</title>
    <style>
      ...
    </style>
</head>
<body>
    <button id="cliccami">questa</button>
    <script src="./main.js"></script>
</body>
</html>

main.js

// cicla su questi testi
const texts = ["questa", "this"];
let currentIndex = 0;

// prendi il bottone
const button = document.getElementById("cliccami");

// aggiungi event listener per evento click
button.addEventListener("click", () => {
    // aggiorna indice
    currentIndex = (currentIndex + 1) % texts.length;
    // aggiorna testo bottone
    button.textContent = texts[currentIndex];
});

🐰

main.py

from pyscript import document

def cambia(event):
    bottone = document.querySelector("#bottone")
    testo = bottone.innerText
    bottone.innerText = cicla(testo)

def cicla(testo: str) -> str:
    if testo == "questa":
        return "this"
    elif testo == "this":
        return "chistaccà"
    else:
        return "questa"


<!DOCTYPE html>
<head>
    <title>Chistaccà è una PyWebApp</title>
    <style>
      ...
    </style>
    <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
</head>
<body>
    <button id="bottone" mpy-click="cambia">questa</button>
    <script type="mpy" src="./main.py"></script>
</body>
</html>

If the Web and Python had a baby,
you'd get PyScript

-- docs.pyscript.net

⚙️ come funziona?

🧑‍💻 Demo (Github Pages)

GitHub logo

💡 Che ci faccio?

  1. cose frontend (🔵🟩🔺...)
  2. contribuire open source 🙋🏼‍♀️
  3. imparo cose web (tech e cultura) 🌍

🌸 Creative Coding

📚 risorse

🙇‍♂️ Grazie