├── nimbledeps └── .gitkeep ├── .gitignore ├── nimble.version ├── uv.lock ├── nim.version ├── pyproject.toml ├── main.py ├── pyscript_python_dovunque_perchiunque.nimble ├── main.js ├── nim.cfg ├── my.nim ├── README.md ├── questa.html ├── agenda.nim ├── LICENSE ├── chistaccà.html ├── cosa.nim ├── nimble.lock ├── agenda.html ├── index.nim ├── cosa.html ├── notes.md └── index.html /nimbledeps/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | nimbledeps/* 2 | !nimbledeps/.gitkeep -------------------------------------------------------------------------------- /nimble.version: -------------------------------------------------------------------------------- 1 | # nimble --version >> nimble.version 2 | nimble v0.14.2 compiled at 2024-07-21 16:13:07 3 | git hash: be2f1309b35a6189ff5eb34a007793e6d3f94157 4 | -------------------------------------------------------------------------------- /uv.lock: -------------------------------------------------------------------------------- 1 | version = 1 2 | requires-python = ">=3.12" 3 | 4 | [[package]] 5 | name = "pyscript-python-dovunque-perchiunque" 6 | version = "0.1.0" 7 | source = { editable = "." } 8 | -------------------------------------------------------------------------------- /nim.version: -------------------------------------------------------------------------------- 1 | # nim --version >> nim.version 2 | Nim Compiler Version 2.0.8 [MacOSX: arm64] 3 | Compiled at 2024-07-21 4 | Copyright (c) 2006-2023 by Andreas Rumpf 5 | 6 | git hash: 5935c3bfa9fec6505394867b23510eb5cbab3dbf 7 | active boot switches: -d:release 8 | -------------------------------------------------------------------------------- /pyproject.toml: -------------------------------------------------------------------------------- 1 | [project] 2 | name = "pyscript-python-dovunque-perchiunque" 3 | version = "0.1.0" 4 | description = "Add your description here" 5 | readme = "README.md" 6 | requires-python = ">=3.12" 7 | dependencies = [] 8 | 9 | [build-system] 10 | requires = ["hatchling"] 11 | build-backend = "hatchling.build" 12 | -------------------------------------------------------------------------------- /main.py: -------------------------------------------------------------------------------- 1 | from pyscript import document 2 | 3 | def cambia(event): 4 | bottone = document.querySelector("#bottone") 5 | testo = bottone.innerText 6 | bottone.innerText = cicla(testo) 7 | 8 | def cicla(testo: str) -> str: 9 | if testo == "questa": 10 | return "this" 11 | elif testo == "this": 12 | return "chistaccà" 13 | else: 14 | return "questa" 15 | -------------------------------------------------------------------------------- /pyscript_python_dovunque_perchiunque.nimble: -------------------------------------------------------------------------------- 1 | # using nimble file only to generate the lock file 2 | # not a package, not a binary, just a presentation done with nimib and nimislides 3 | 4 | # Package 5 | 6 | version = "0.1.0" 7 | author = "Pietro Peterlongo" 8 | description = "a presentation with nimislides and nimib" 9 | license = "MIT" 10 | 11 | 12 | # Dependencies 13 | 14 | requires "nim >= 2.0.8" 15 | requires "nimib >= 0.3.12" -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | // cicla su questi testi 2 | const texts = ["questa", "this"]; 3 | let currentIndex = 0; 4 | 5 | // prendi il bottone 6 | const button = document.getElementById("cliccami"); 7 | 8 | // aggiungi event listener per evento click 9 | button.addEventListener("click", () => { 10 | // aggiorna indice 11 | currentIndex = (currentIndex + 1) % texts.length; 12 | // aggiorna testo bottone 13 | button.textContent = texts[currentIndex]; 14 | }); 15 | -------------------------------------------------------------------------------- /nim.cfg: -------------------------------------------------------------------------------- 1 | --path="nimbledeps/pkgs2/nimib-0.3.12-f905e5b5233411fc4608f27187da5726976f28ab/" 2 | --path="nimbledeps/pkgs2/mustache-0.4.3-9c7e49440ae9bb6494bd202eea6ef7405811c6bb" 3 | --path="nimbledeps/pkgs2/markdown-0.8.8-a59d1205efe2e0bbc3657481e188ce7e7de3d943" 4 | --path="nimbledeps/pkgs2/parsetoml-0.7.1-586fe63467a674008c4445ed1b8ac882177d7103" 5 | --path="nimbledeps/pkgs2/jsony-1.1.5-6aeb83e7481ca8686396a568096054bc668294df" 6 | --path="nimbledeps/pkgs2/fusion-1.2-408bde8679bce63dfb6f424e107eb37c5eb31510" 7 | --path="nimbledeps/pkgs2/nimiSlides-0.2.6-61de4f10c06a123d4256f9ea0aadc0afe9ddacaa" -------------------------------------------------------------------------------- /my.nim: -------------------------------------------------------------------------------- 1 | import std / strutils 2 | export strutils 3 | import nimib, nimislides 4 | 5 | const 6 | colorAgile* = "#02A4BD" 7 | 8 | template addNbTextSmall* = 9 | nb.partials["nbTextSmall"] = "" & nb.partials["nbText"] & "" 10 | nb.renderPlans["nbTextSmall"] = nb.renderPlans["nbText"] 11 | 12 | template nbTextSmall*(text: string) = 13 | nbText: text 14 | nb.blk.command = "nbTextSmall" 15 | 16 | template reference*(text: string) = 17 | nbTextSmall: text 18 | 19 | template myInit*(sourceFileRel = "my.nim") = 20 | nbInit(thisFileRel=sourceFileRel, theme=revealTheme) 21 | setSlidesTheme(Simple) 22 | addNbTextSmall 23 | nbRawHtml """ 24 | 31 | """ % [colorAgile] 32 | # $1 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pyscript-python-dovunque-perchiunque 2 | 3 | presentazione su pyscript 4 | 5 | per il meetup [Python Catania del 30 Agosto 2024](https://www.meetup.com/it-IT/python-catania/events/302671524/) 6 | 7 | ## slides 8 | 9 | slides fatte in [nim] con [nimib] e [nimislides] 10 | 11 | ### shortcut per me 12 | 13 | per vedere le slide in locale (fatti un favore e usa [uv]) 14 | 15 | uv run python -m http.server 16 | 17 | poi: 18 | 19 | http://localhost:8000/index.html 20 | 21 | o cose tipo: 22 | 23 | http://localhost:8000/chistacc%C3%A0.html 24 | 25 | ## chistaccà 26 | 27 | "chistaccà" è questa (qua) in Siciliano (credo). 28 | 29 | 30 | [uv]: https://docs.astral.sh/uv/ 31 | [nim]: https://nim-lang.org/ 32 | [nimib]: https://github.com/pietroppeter/nimib 33 | [nimislides]: https://github.com/pietroppeter/nimib 34 | -------------------------------------------------------------------------------- /questa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Questa è una WebApp 7 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /agenda.nim: -------------------------------------------------------------------------------- 1 | import std / strutils 2 | import nimib, nimislides, my 3 | export strutils 4 | 5 | const 6 | cosa* = "cosa" 7 | perché* = "perché" 8 | come* = "come" 9 | persone* = "persone" 10 | che* = "che" 11 | chi* = "chi" 12 | tutto* = [cosa, perché, come, persone, che, chi] 13 | 14 | func emphArray*(a: openArray[string], i: int): seq[string] = 15 | for j, v in a: 16 | if (j + 1) == i: 17 | result.add "**" & v & "**" 18 | else: 19 | result.add v 20 | 21 | # todo: refactor to use generic array and put in my 22 | template agendaSlide*(i = 0) = 23 | slide: 24 | nbText """ 25 | 1. $1 26 | 2. $2 27 | 3. $3 28 | 4. $4 29 | 5. $5 30 | """ % tutto.emphArray(i) 31 | # 6. $6 (chi hidden) 32 | 33 | when isMainModule: 34 | myInit("agenda") 35 | slide: 36 | agendaSlide 37 | agendaSlide(1) 38 | agendaSlide(2) 39 | agendaSlide(3) 40 | agendaSlide(4) 41 | agendaSlide(5) 42 | nbSave -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Pietro Peterlongo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /chistaccà.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Chistaccà è una PyWebApp 7 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /cosa.nim: -------------------------------------------------------------------------------- 1 | import nimib, nimislides 2 | import my 3 | import agenda 4 | 5 | template slideQuesta* = 6 | slide(slideOptions(iframeBackground="questa.html")): 7 | discard 8 | 9 | template slideChista* = 10 | slide(slideOptions(iframeBackground="chistacc%C3%A0.html")): 11 | discard 12 | 13 | template slideHtml* = 14 | slide nbText """ 15 | ```html 16 | 17 | 18 | Questa è una WebApp 19 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ``` 29 | """ 30 | 31 | template slidePyHtml* = 32 | slide nbText """ 33 | ```html 34 | 35 | 36 | Chistaccà è una PyWebApp 37 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | ``` 48 | """ 49 | 50 | template slideJavascript* = 51 | slide nbText """ 52 | `main.js` 53 | 54 | ```js 55 | $1 56 | ``` 57 | """ % "main.js".readFile 58 | 59 | template slidePyScript* = 60 | slide nbText """ 61 | `main.py` 62 | 63 | ```py 64 | $1 65 | ``` 66 | """ % "main.py".readFile 67 | 68 | template enterPyScript* = 69 | slide nbText "# 🐰" 70 | 71 | template all* = 72 | slideQuesta 73 | slideHtml 74 | slideJavascript 75 | 76 | enterPyScript 77 | 78 | slidePyScript 79 | slidePyHtml 80 | slideChista 81 | 82 | when isMainModule: 83 | myInit("cosa") 84 | agendaSlide(1) 85 | all 86 | nbSave 87 | -------------------------------------------------------------------------------- /nimble.lock: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "packages": { 4 | "fusion": { 5 | "version": "1.2", 6 | "vcsRevision": "0b0a0273b8df860cd54e3fcca7bb4c617244ac77", 7 | "url": "https://github.com/nim-lang/fusion", 8 | "downloadMethod": "git", 9 | "dependencies": [], 10 | "checksums": { 11 | "sha1": "408bde8679bce63dfb6f424e107eb37c5eb31510" 12 | } 13 | }, 14 | "jsony": { 15 | "version": "1.1.5", 16 | "vcsRevision": "ea811bec7fa50f5abd3088ba94cda74285e93f18", 17 | "url": "https://github.com/treeform/jsony", 18 | "downloadMethod": "git", 19 | "dependencies": [], 20 | "checksums": { 21 | "sha1": "6aeb83e7481ca8686396a568096054bc668294df" 22 | } 23 | }, 24 | "markdown": { 25 | "version": "0.8.8", 26 | "vcsRevision": "5a7a7bafd1da23b25332316a7b888e6586f4177a", 27 | "url": "https://github.com/soasme/nim-markdown", 28 | "downloadMethod": "git", 29 | "dependencies": [], 30 | "checksums": { 31 | "sha1": "a59d1205efe2e0bbc3657481e188ce7e7de3d943" 32 | } 33 | }, 34 | "mustache": { 35 | "version": "0.4.3", 36 | "vcsRevision": "1677949a848fc126a0716a67bba2c6217205255c", 37 | "url": "https://github.com/soasme/nim-mustache", 38 | "downloadMethod": "git", 39 | "dependencies": [], 40 | "checksums": { 41 | "sha1": "9c7e49440ae9bb6494bd202eea6ef7405811c6bb" 42 | } 43 | }, 44 | "parsetoml": { 45 | "version": "0.7.1", 46 | "vcsRevision": "6e5e16179fa2db60f2f37d8b1af4128aaa9c8aaf", 47 | "url": "https://github.com/NimParsers/parsetoml.git", 48 | "downloadMethod": "git", 49 | "dependencies": [], 50 | "checksums": { 51 | "sha1": "586fe63467a674008c4445ed1b8ac882177d7103" 52 | } 53 | }, 54 | "nimib": { 55 | "version": "0.3.12", 56 | "vcsRevision": "54541820232ee41cfa719fac002c718f5e7d628d", 57 | "url": "https://github.com/pietroppeter/nimib", 58 | "downloadMethod": "git", 59 | "dependencies": [ 60 | "fusion", 61 | "markdown", 62 | "mustache", 63 | "parsetoml", 64 | "jsony" 65 | ], 66 | "checksums": { 67 | "sha1": "f905e5b5233411fc4608f27187da5726976f28ab" 68 | } 69 | } 70 | }, 71 | "tasks": {} 72 | } 73 | -------------------------------------------------------------------------------- /agenda.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 20 |
21 |
22 |
    23 |
  1. cosa
    2. 24 |
  2. perché
    3. 25 |
  3. persone
    4. 26 |
  4. come
    5. 27 |
  5. che
    6. 28 |
29 |
30 |
31 |
    32 |
  1. cosa
    2. 33 |
  2. perché
    3. 34 |
  3. persone
    4. 35 |
  4. come
    5. 36 |
  5. che
    6. 37 |
38 |
39 |
40 |
    41 |
  1. cosa
    2. 42 |
  2. perché
    3. 43 |
  3. persone
    4. 44 |
  4. come
    5. 45 |
  5. che
    6. 46 |
47 |
48 |
49 |
    50 |
  1. cosa
    2. 51 |
  2. perché
    3. 52 |
  3. persone
    4. 53 |
  4. come
    5. 54 |
  5. che
    6. 55 |
56 |
57 |
58 |
    59 |
  1. cosa
    2. 60 |
  2. perché
    3. 61 |
  3. persone
    4. 62 |
  4. come
    5. 63 |
  5. che
    6. 64 |
65 |
66 |
67 |
    68 |
  1. cosa
    2. 69 |
  2. perché
    3. 70 |
  3. persone
    4. 71 |
  4. come
    5. 72 |
  5. che
    6. 73 |
74 |
75 |
76 |
77 |
78 | 79 | 80 | 81 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /index.nim: -------------------------------------------------------------------------------- 1 | import nimib, nimislides 2 | import my 3 | import agenda, cosa 4 | 5 | template titleSlide* = 6 | slide: 7 | nbText """ 8 | ## **PyScript** 🐰 9 | 10 | 🐍 Python _dovunque_ e _perchiunque_ 11 | """ 12 | reference "[github.com/pietroppeter/pyscript-python-dovunque-perchiunque](https://github.com/pietroppeter/pyscript-python-dovunque-perchiunque)" 13 | 14 | template babySlide* = 15 | slide nbText """ 16 | > If the **Web** and **Python** had a baby, 17 | > you'd get PyScript 18 | 19 | -- [docs.pyscript.net](https://docs.pyscript.net/2024.8.2/user-guide/what/) 20 | """ 21 | 22 | template howSlide* = 23 | slide nbText """ 24 | ## ⚙️ come funziona? 25 | 26 | - WASM 27 | - backends: 28 | - pyodide 29 | - [micropython](https://micropython.org/) (<200ms) 30 | - [polyscript](https://github.com/pyscript/polyscript) 31 | """ 32 | 33 | # github image logo link taken from: https://github.com/logos 34 | const githubLogoUrl* = "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" 35 | 36 | template githubDemoSlide* = 37 | slide nbText """ 38 | ## 🧑‍💻 Demo (Github Pages) 39 | 40 | GitHub logo 41 | 42 | """ % [githubLogoUrl] 43 | 44 | template resourcesSlide* = 45 | slide: 46 | nbText "## 📚 risorse" 47 | nbTextSmall """ 48 | 49 | - [intervista pythonista a Fabio](https://www.youtube.com/watch?v=YICaByu83LA&list=PLI39UsD2FrxXZlqQv1JLrM8v0jpbMolfN&index=36) Pliger (origin story at Anaconda) 50 | - [milano.python.it](https://milano.python.it) meetup con Andrea Giammarchi e Nicholas Tollervey 51 | ["PyScript: Python on the browser and beyond"](https://www.youtube.com/watch?v=yQIvNcqs0sA&list=PLI39UsD2FrxVgehBJZ68JDzm3u6xJD22l&index=2) 52 | - [pyscript.net](https://pyscript.net) (oss project) 53 | - [pyscript.com](https://pyscript.com) (free hosting) 54 | - [discord](https://discord.gg/HxvBtukrg2) 55 | - [youtube.com/@PyScriptTV](https://www.youtube.com/@PyScriptTV/) 56 | - [github.com/pyscript](https://github.com/pyscript) 57 | 58 | """ 59 | 60 | template thanksSlide* = 61 | slide nbText """ 62 | ## 🙇‍♂️ Grazie 63 | 64 | - 👨‍👩‍👧 **Pietro P Peter**longo ([github.com/pietroppeter](https://github.com/pietroppeter)) 65 | - 🧑‍💼 Data Scientist @ [agilelab.it](https://www.agilelab.it/) 66 | - 🐍 Python/PyData Milano 67 | - 🐙 [recurse.com](https://www.recurse.com/) (Recurse Center) 68 | - 👑 [Nim for Pythonistas](https://www.youtube.com/watch?v=yPMudqyKtLQ), PyCon Italy 2024 69 | 70 | """ 71 | 72 | template slideIdeas* = 73 | slide nbText """ 74 | ## 💡 Che ci faccio? 75 | 76 | 1. cose frontend (🔵🟩🔺...) 77 | 2. contribuire open source 🙋🏼‍♀️ 78 | 3. imparo cose web (tech e cultura) 🌍 79 | """ 80 | 81 | template slideP5js* = 82 | slide(slideOptions(iframeBackground="https://p5js.org/")): 83 | discard 84 | 85 | template slideCreativeCodinglinks* = 86 | slide nbText """ 87 | ## 🌸 Creative Coding 88 | 89 | - [github.com/nickmcintyre/proceso](https://github.com/nickmcintyre/proceso) (p5js for pyscript) 90 | - [Okazzu (artist) @ Open Processing](https://openprocessing.org/user/128718?view=sketches&o=32) 91 | - [io che traduco (malamente) sketch di Okazzu](https://github.com/pietroppeter/rc23winter1) 92 | """ 93 | 94 | when isMainModule: 95 | myInit("index") 96 | titleSlide 97 | slide: 98 | cosa.all 99 | babySlide # usare per motivare bene il perché 100 | howSlide 101 | githubDemoSlide # need to test the demo! 102 | slide: 103 | slideIdeas 104 | slideP5js 105 | slideCreativeCodinglinks 106 | resourcesSlide 107 | thanksSlide 108 | nbSave 109 | -------------------------------------------------------------------------------- /cosa.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 20 |
21 |
    22 |
  1. cosa
    2. 23 |
  2. perché
    3. 24 |
  3. come
    4. 25 |
  4. persone
    5. 26 |
  5. che
    6. 27 |
28 |
29 |
30 |
31 |
32 | 
<!DOCTYPE html>
 33 | <head>
 34 |     <title>Questa è una WebApp</title>
 35 |     <style>
 36 |       ...
 37 |     </style>
 38 | </head>
 39 | <body>
 40 |     <button id="cliccami">questa</button>
 41 |     <script src="./main.js"></script>
 42 | </body>
 43 | </html>
 44 |
45 |
46 |
47 |

main.js

48 | 
// cicla su questi testi
 49 | const texts = ["questa", "this"];
 50 | let currentIndex = 0;
 51 | 
 52 | // prendi il bottone
 53 | const button = document.getElementById("cliccami");
 54 | 
 55 | // aggiungi event listener per evento click
 56 | button.addEventListener("click", () => {
 57 |     // aggiorna indice
 58 |     currentIndex = (currentIndex + 1) % texts.length;
 59 |     // aggiorna testo bottone
 60 |     button.textContent = texts[currentIndex];
 61 | });
 62 | 
 63 |
64 |
65 |
66 |

🐰

67 |
68 |
69 |

main.py

70 | 
from pyscript import document
 71 | 
 72 | def cambia(event):
 73 |     bottone = document.querySelector("#bottone")
 74 |     testo = bottone.innerText
 75 |     bottone.innerText = cicla(testo)
 76 | 
 77 | def cicla(testo: str) -> str:
 78 |     if testo == "questa":
 79 |         return "this"
 80 |     elif testo == "this":
 81 |         return "chistaccà"
 82 |     else:
 83 |         return "questa"
 84 | 
 85 |
86 |
87 |
88 | 
<!DOCTYPE html>
 89 | <head>
 90 |     <title>Chistaccà è una PyWebApp</title>
 91 |     <style>
 92 |       ...
 93 |     </style>
 94 |     <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
 95 | </head>
 96 | <body>
 97 |     <button id="bottone" mpy-click="cambia">questa</button>
 98 |     <script type="mpy" src="./main.py"></script>
 99 | </body>
100 | </html>
101 |
102 |
103 |
104 |
105 |
106 |
107 | 108 | 109 | 110 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /notes.md: -------------------------------------------------------------------------------- 1 | ## sprint aug 30 2 | 3 | - nim, nimib, nimislides env setup [x] 4 | - with nimble this time! [x] 5 | - add nimib and check it works [x] 6 | - issue: cannot open file nimib 7 | - workaround: add manually path for each dependency! [x] 8 | - create an issue for this [x] 9 | - add nimislides and check it works [x] 10 | - nimislides custom setup (from diventa-avventore-del-codice) [x] 11 | - basic index.nim and my.nim (renamed from nbex) [x] 12 | - (why `import nimib except toJson`?) 13 | - uv init [x] 14 | - need python webserver for pyscript [x] 15 | - (only if I use the main.py?) 16 | - how to see slides with python web server [x] 17 | - minimal draft (from agenda) 18 | - titleSlide [x] 19 | - cosa [x] 20 | - module with agendaSlide(cosa) [x] 21 | - this page [x] 22 | - thanks chatgpt: https://chatgpt.com/share/55ea5e96-6106-47f7-99d2-5a06788f9125 23 | - slideThis [x] 24 | - rename to slideQuesta e traduci [x] 25 | - codice della cosa 26 | - slideHtml [x] 27 | - javascript [x] 28 | - codice di chista [x] 29 | - pyscript 30 | - da chatgpt [x] 31 | - fix it (and use mpython) [x] 32 | - show it [x] 33 | - dipendenza (e backend) [x] 34 | - chista: versione in pyscript [x] 35 | - perché: single quoteSlide [x] 36 | - come (wasm, pyodide, micropython, polyscript) [x] 37 | - github (pages) demo? 38 | - slide [x] 39 | - test demo 40 | - remove repo 41 | - retry demo? 42 | - ideas (che ci faccio?) [x] 43 | - slideIdeas [x] 44 | - 1 cose frontend, ce n'é di tutte le forme e colori; wordle? 45 | - 2 contribuire open source 46 | - 3 imparare cose web e farsi influenzare da altre culture 47 | - esempio di creative coding con p5js/proceso? [x] 48 | - risorse [x] 49 | - aggiungo anche talk su streamlit? 50 | - grazie [x] 51 | - chista -> chistacca [x] 52 | - deploy on github pages [x] 53 | 54 | not minimal (kept for a later version, to be submitted at PyCon Italy): 55 | - content 56 | - agendaSlide(s) [x] 57 | - aggiungi pyscript come titoletto 58 | - migliora testo agenda 59 | - more perché 60 | - python 61 | - linguaggio, ecosistema 62 | - progetto, comunità 63 | - valori: Accessible, Giocosa, Inclusiva 64 | - web 65 | - dovunque (link australiano) 66 | - perchiunque (99%, barefoot?) 67 | - e anche da web verso python! (vedi dopo creative coding) 68 | - come 69 | - wasm 70 | - backends 71 | - pyodide 72 | - micropython (<200ms, <200kb compresso) 73 | - more than that (async...) polyscript 74 | - persone 75 | - peter: anaconda, pydata/numfocus 76 | - fabio: intervista pythonista 77 | - ntoll: educator 78 | - andrea: webreflection (link to pymi meetup) 79 | - che 80 | - modo più rapido per fare cose con codice (python) 81 | - github pages demo? con chista? 82 | - contribuire open source 83 | - imparare web e farsi influenzare (es. creative coding) 84 | - chi? (o meglio grazie) 85 | - agilelab.it (hola), milano.python.it, recurse.it (nim for pythonistas) 86 | 87 | study pyscript: 88 | - https://docs.pyscript.net/2024.8.2/ 89 | - documentation has improved a lot! 90 | 91 | - post on linkedin 92 | - nice to haves 93 | - animation on perché python 94 | - animations sul codice 95 | 96 | agenda: 97 | - cos'è 98 | - bottone: questa -> this -> chista 99 | - codice js 100 | - codice pyscript 101 | - perché 102 | - python 103 | - AGI (accessibile, giocoso, infinito) 104 | - pyscript 105 | - dovunque e perchiunque 106 | - link talk australiano del bee framework 107 | - persone/storia: peter, fabio, andrea, ntoll 108 | - come 109 | - wasm 110 | - pyodide/micropython! 111 | - aysnc? 112 | - che ci faccio 113 | - progetti interessanti? 114 | - cose mie. es. github pages (che tipo di app?) 115 | - stato: accesso local storage? 116 | - (potrei fare una app per il mio parcheggio) 117 | - lista idee? 118 | - contribuire open source 119 | - creative coding 120 | - chi sono? 121 | - agilelab, pymi, rc (nim for pythonistas) 122 | 123 | ## friction log pyscript 124 | 125 | - documentation: arrows to go forward and back? 126 | - link to github from docs? 127 | - I want to start with python in a pyscript tag not with a script and separate main.py 128 | - Home 129 | - mmh, scalable... 130 | - secure? 131 | - for me difference with backends is one of the main things and I want micropython as default backend 132 | - link discord più trasparente? 133 | 134 | domanda sui backend: 135 | - ma ora cosa succede che parte con mpy e carica in modo lazy pyodide??? 136 | 137 | offtopic: 138 | - it would be nice to have a follow all when you hover over contributors of a project 139 | 140 | 141 | 142 | ## issue: `Error: cannot open file: nimib` 143 | 144 | somehow with my current configuration, nimble finds nimib: 145 | 146 | ➜ pyscript-python-dovunque-perchiunque git:(main) ✗ nimble path nimib 147 | /Users/pietropeterlongo/.nimble/pkgs2/nimib-0.3.12-f905e5b5233411fc4608f27187da5726976f28ab 148 | 149 | but nim does not 150 | 151 | ➜ pyscript-python-dovunque-perchiunque git:(main) ✗ nim r --nimblePath:/Users/pietropeterlongo/.nimble/ index 152 | Hint: used config file '/Users/pietropeterlongo/recursing/Nim/config/nim.cfg' [Conf] 153 | Hint: used config file '/Users/pietropeterlongo/recursing/Nim/config/config.nims' [Conf] 154 | ...................................................................... 155 | /Users/pietropeterlongo/recursing/pyscript-python-dovunque-perchiunque/index.nim(1, 8) Error: cannot open file: nimib 156 | 157 | and even adding specific of nimblePath does not seem to work! 158 | 159 | ➜ pyscript-python-dovunque-perchiunque git:(main) ✗ nim r --nimblePath:/Users/pietropeterlongo/.nimble/pkgs2 index 160 | Hint: used config file '/Users/pietropeterlongo/recursing/Nim/config/nim.cfg' [Conf] 161 | Hint: used config file '/Users/pietropeterlongo/recursing/Nim/config/config.nims' [Conf] 162 | ...................................................................... 163 | /Users/pietropeterlongo/recursing/pyscript-python-dovunque-perchiunque/index.nim(1, 8) Error: cannot open file: nimib 164 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 20 |
21 |

PyScript 🐰

22 |

🐍 Python dovunque e perchiunque

23 |

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

 24 |
25 |
26 |
27 |
28 |
29 | 
<!DOCTYPE html>
 30 | <head>
 31 |     <title>Questa è una WebApp</title>
 32 |     <style>
 33 |       ...
 34 |     </style>
 35 | </head>
 36 | <body>
 37 |     <button id="cliccami">questa</button>
 38 |     <script src="./main.js"></script>
 39 | </body>
 40 | </html>
 41 |
42 |
43 |
44 |

main.js

45 | 
// cicla su questi testi
 46 | const texts = ["questa", "this"];
 47 | let currentIndex = 0;
 48 | 
 49 | // prendi il bottone
 50 | const button = document.getElementById("cliccami");
 51 | 
 52 | // aggiungi event listener per evento click
 53 | button.addEventListener("click", () => {
 54 |     // aggiorna indice
 55 |     currentIndex = (currentIndex + 1) % texts.length;
 56 |     // aggiorna testo bottone
 57 |     button.textContent = texts[currentIndex];
 58 | });
 59 | 
 60 |
61 |
62 |
63 |

🐰

64 |
65 |
66 |

main.py

67 | 
from pyscript import document
 68 | 
 69 | def cambia(event):
 70 |     bottone = document.querySelector("#bottone")
 71 |     testo = bottone.innerText
 72 |     bottone.innerText = cicla(testo)
 73 | 
 74 | def cicla(testo: str) -> str:
 75 |     if testo == "questa":
 76 |         return "this"
 77 |     elif testo == "this":
 78 |         return "chistaccà"
 79 |     else:
 80 |         return "questa"
 81 | 
 82 |
83 |
84 |
85 | 
<!DOCTYPE html>
 86 | <head>
 87 |     <title>Chistaccà è una PyWebApp</title>
 88 |     <style>
 89 |       ...
 90 |     </style>
 91 |     <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
 92 | </head>
 93 | <body>
 94 |     <button id="bottone" mpy-click="cambia">questa</button>
 95 |     <script type="mpy" src="./main.py"></script>
 96 | </body>
 97 | </html>
 98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |

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

107 |
108 |

-- docs.pyscript.net

109 |
110 |
111 |

⚙️ come funziona?

112 |
    113 |
  • WASM
    • 114 |
  • backends: 115 | 119 |
    • 120 |
  • polyscript
    • 121 |
122 |
123 |
124 |

🧑‍💻 Demo (Github Pages)

125 | GitHub logo 126 |
127 |
128 |
129 |

💡 Che ci faccio?

130 |
    131 |
  1. cose frontend (🔵🟩🔺...)
    2. 132 |
  2. contribuire open source 🙋🏼‍♀️
    3. 133 |
  3. imparo cose web (tech e cultura) 🌍
    4. 134 |
135 |
136 |
137 |
138 |
139 |

🌸 Creative Coding

140 | 145 |
146 |
147 |
148 |

📚 risorse

149 | 159 |
160 |
161 |

🙇‍♂️ Grazie

162 | 169 |
170 |
171 |
172 | 173 | 174 | 175 | 183 | 184 | 185 | --------------------------------------------------------------------------------