{"id":12994,"date":"2023-07-30T15:53:31","date_gmt":"2023-07-30T13:53:31","guid":{"rendered":"https:\/\/pythonprogramming.altervista.org\/?p=12994"},"modified":"2023-07-30T15:53:32","modified_gmt":"2023-07-30T13:53:32","slug":"changes-in-pyscript-that-may-break-your-code","status":"publish","type":"post","link":"https:\/\/pythonprogramming.altervista.org\/changes-in-pyscript-that-may-break-your-code\/","title":{"rendered":"Changes in Pyscript that may break your code"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-52.png\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"173\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-52.png\" alt=\"\" class=\"wp-image-12999\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-52.png 960w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-52-320x58.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-52-768x138.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/mp3.mp3\"><\/audio><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pyscript allows you to use python code into an html file. This is an awesome project by the Anaconda team, so we are pretty sure it will be improved costantly. With some changes old code can be broken and so did my code I was using. Looking for solving this issue, I managed how to make it, so I want to share my discoveries with you, as I am used to do into this blog, I dunno if you were aware of this. Now you are. But, without further ado, as the awesome youtuber from all over the World introduce their vlogs, let&#8217;s get into my discoveries in the video. You will see &#8211; spoiler alert &#8211; that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>py-click substituted the more emphatic py-OnClick (this was too much linked to the javascript conventions, don&#8217;t you think?)<\/li>\n\n\n\n<li>to test your page with pyscript, if you want to load an external script, you have to launch the html page launching a server, that with python is the most simple thing, but to know exactly how you gotta watch the video, otherwise nobody would see the video, I am a youtuber after all, even if a lazy one, as you can verify by the number of video that I recently (did not) posted.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Ok, too much said, let&#8217;s watch the video with this funny entertainer that is this blogger.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PS: a little hint on how to\u2026 guess what?<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-50.png\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"462\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-50-960x462.png\" alt=\"\" class=\"wp-image-12995\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-50-960x462.png 960w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-50-320x154.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-50-768x370.png 768w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-50.png 1053w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to get updated with Pyscript to use Python in the web pages\" width=\"747\" height=\"420\" src=\"https:\/\/www.youtube.com\/embed\/wyY7zhPPXgQ?feature=oembed&amp;enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><!-- se vuoi mettere un testo scorrevole\r\n[hoops name=\"typeWriterGen\"]\r\n\r\npoi metti un id diverso per ogni testo nella stessa pagina\r\n\r\n<div id=\"div01\">\r\n<script>\r\n\r\ntypeWriterGen(\"div01\",\"Esempio di testo scorrevole\");\r\n<\/script>\r\n\r\n-->\r\n<style>\r\n.avatar {\r\n  vertical-align: middle;\r\n  width: 100px;\r\n  height: 100px;\r\n  border-radius: 50%;\r\n}\r\n<\/style>\r\n\r\n<hr>\r\n\r\n<!-- NEWSLETTER LINK -->\r\n<a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSf7TniIPCWHDzCSGh2dYZaCwDvi9yLKS5ovFdKuK1sdfOvwEg\/viewform\">\r\n<img decoding=\"async\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/08\/image-13.png\" class=\"avatar\">\r\nSubscribe to the <b>newsletter<\/b> for updates<\/a><br>\r\n\r\n<!-- TKINTER TEMPLATE LINK -->\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/tkinter-templates\/\">\r\n<img decoding=\"async\" src=\"https:\/\/i0.wp.com\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-26.png\" class=\"avatar\">\r\nTkinter templates<\/a><br>\r\n\r\n<!-- MY AVATAR PUT A LINK TO YOUTUBE CHANNEL-->\r\n<iframe loading=\"lazy\" frameborder=\"0\" src=\"https:\/\/itch.io\/embed\/711828\" width=\"552\" height=\"167\"><a href=\"https:\/\/pythonprogrammi.itch.io\/pysnake\">PySnake by PythonProgrammi<\/a><\/iframe>\r\n<br>\r\n<style>\r\n.avatar {\r\n  vertical-align: middle;\r\n  width: 100px;\r\n  height: 100px;\r\n  border-radius: 50%;\r\n}\r\n<\/style>\r\n\r\n\r\n<a href=\"https:\/\/www.youtube.com\/channel\/UCzbxq5e9gLiY-je2-br1rvg\">\r\n\t<img decoding=\"async\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/10\/avatar64x64.png\" alt=\"Avatar\" class=\"avatar\">\r\n\t My youtube channel<\/a><br>\r\n\r\n<br>\r\n\r\nTwitter: <a href=\"https:\/\/twitter.com\/pythonprogrammi\">@pythonprogrammi - python_pygame<\/a>\r\n<h3>Claude's Games<\/h3>\r\n<p><a href=\"https:\/\/pythonprogramming.altervista.org\/random-daily-game-1-arkanoid\/\">Arkanoid<\/a><br>\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/platform-2d-with-pygame-made-with-claude\/\">Platform 2d<\/a><\/p> <!-- videogames made with claude -->\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/artifacts-games-day-1-memory-game\/\">1. Memory game<\/a>\r\n<h4>Videos<\/h4>\r\n<a href=\"https:\/\/youtu.be\/ciLjWWw5pLY\">Speech recognition game<\/a>\r\n<h3>Pygame's Platform Game<\/h3>\r\n\r\n<a href=\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-5-sounds-and-mixer\/\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/pythonprogramming.altervista.org\/wp-content\/uploads\/2020\/01\/climbercover.png?w=557&ssl=1\"\/ width=\"50%\"><\/a>\r\n<script>\r\nvar title = \"Platform Pygame\";\r\n\t\tvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-animation-of-a-sprite-v-1-3\/\",\"Animation 1.3\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-sprite-animation-v-2-better-coding-test-it-checking-fps-on-the-screen\/\",\"Animation 1.2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-how-to-display-the-frame-rate-fps-on-the-screen\/\",\"Display Frame rate\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-sprite-animation-update\/\",\"Animation 1.1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platformer-1\/\",\"Pygame Platform Game 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-platform-game-2\/\",\"Pygame Platform 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-3-recap-cheatsheet\/\",\"Pygame PLatform 3 - recap and some Cheat Sheet\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-4-background-and-stuffs\/\",\"Pygame Platform 4 - Background & organizing code\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platform-game-5-sounds-and-mixer\/\",\"Pygame Platform 5 - Sounds\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/platform-game-in-detail-part-1\/\",\"Game in detail part 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/map-maker-1-2\/\", \"Map maker 1.2\"]\r\n\t\t];\r\n\t\t<\/script>\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script>\r\n\r\n<h3>Other Pygame's posts<\/h3>\r\n\r\n<script>\r\nvar title = \"Pygame's Posts\"\r\nvar links = [\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-platformer-1\/\",\"Platform game 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/make-a-platform-game-with-pygame-dafluffypotato\/\",\"DaFluffyPotato Platform Tutorials\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-and-classic-arcade-games-pong\/\",\"Pong Game Full\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/python-draws-in-colors-app-to-draw-with-pygame\/\",\"PyGameGIF 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-draw-app-with-animation\/\",\"PyGameGIF 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pydraw-2-0-app-to-draw-gif\/\",\"PyDraw 2.0\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-drawing-2\/\",\"Draw with Pygame\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/animation-with-pygame\",\"Sprite animation 1\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/animation-on-pygame-2-free-characters-and-more-actions\/\",\"Sprite animation 2\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/starting-with-pygame\/\",\"Starting movements with Pygame\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-3-move-sprite\/\", \"Move a Sprite\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-4-fonts\/\",\"Text and Fonts\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-animate-a-sprite\/\", \"Animate a sprite\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pygame-and-mouse-events\/\",\"Mouse events\"],\r\n[\"https:\/\/pythonprogramming.altervista.org\/pgp-aka-pygamepresentation-project\/\",\"Pygame presentation\"],\r\n\t[\"https:\/\/pythonprogramming.altervista.org\/moving-the-player-in-pygame-with-key-get_pressed\/\",\"How to use key.get_pressed()\"]\r\n]\r\n<\/script>\r\n\r\n\r\n<script>\r\n\t\r\nif (typeof next2 != \"undefined\"){let next2 = 0;}\r\n\t\r\nnext2 = 0;\r\n\thtml = \"\";\/\/<b style='color:coral;font-size:1.2em'>Other posts about \" + title + \"<\/b><br>\";\r\nfor (address of links) \r\n{\r\n\r\n\tif (next2 == 1){\r\n\t\thtml += \"<div style='background:coral'>\";\r\n\t\thtml += \"Next link => <a href='\" + address[0] + \"'>\" + address[1] + \"<\/a>\";\r\n\t\thtml += \"<\/div><br>\";\r\n\t\tnext2 = 0;\r\n\t}\r\n\tif (address[0] == document.URL) {\r\n\t\tnext2 = 1;\r\n\t}\r\n}\r\n\r\nif (typeof next != \"undefined\") {let next = 0;}\r\nif (typeof addressStart != \"undefined\") {let addressStart = \"\";}\r\nnext = 0;\r\naddressStart = \"<a href='\";\r\nfor (address of links) {\r\n\tif (next == 1){\r\n\t\thtml += \">>>\" + addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t\tnext = 0;\r\n\t}\r\n\telse if (addressStart + address[0] != document.URL)\r\n\t{\r\n\t\thtml += addressStart + address[0] + \"'>\" + address[1] + \"<\/a><br>\";\r\n\t}\r\n\telse\r\n\t{\r\n\t\tnext = 1;\r\n\t\tnext_address = address[0]\r\n\t\tnext_title = address[1]\r\n\t\thtml += \"<span style='color:gray'>\" + address[1] + \"<\/span><br>\";\r\n\t}\r\n\r\n}\r\n\r\n\thtml += `<span style=\"font-size:8px\">Powered by <a href=\"https:\/\/pythonprogramming.altervista.org\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2673\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png\" alt=\"\" width=\"70\" height=\"25\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2.png 156w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2019\/06\/altervista2-150x56.png 150w\" sizes=\"auto, (max-width: 70px) 100vw, 70px\" \/>pythonprogramming.altervista.org<\/a><\/span>`\r\n\thtml = \"<div style='background:yellow'>\" + html + \"<\/div>\";\r\n\tdocument.write(html)\r\n<\/script><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-54.png\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"869\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-54.png\" alt=\"\" class=\"wp-image-13001\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-54.png 960w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-54-320x290.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-54-768x695.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-51.png\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"173\" src=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-51.png\" alt=\"\" class=\"wp-image-12998\" srcset=\"https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-51.png 960w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-51-320x58.png 320w, https:\/\/pythonprogramming.altervista.org\/wp-content\/uploads\/2023\/07\/image-51-768x138.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"news for pyscript, the future of the web\n<a class=\"moretag\" href=\"https:\/\/pythonprogramming.altervista.org\/changes-in-pyscript-that-may-break-your-code\/\"> [...]<\/a>","protected":false},"author":1,"featured_media":13001,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1032],"tags":[1031,4],"class_list":["post-12994","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pyscript","tag-pyscript","tag-python"],"avopt_banners_inside_post":true,"avopt_banners_on_page":true,"av_copy_from":"","av_sharing_message":"","av_sharing_allowed":true,"av_sharing_on":{"fb":[],"tw":[]},"av_allow_affiliate_banner":false,"av_allow_affiliate_multi_banner":false,"av_show_affiliation_buy_button":false,"av_post_rating":true,"av_have_post_rating_value":false,"av_is_artificial_intelligence_content":false,"_links":{"self":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/12994","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/comments?post=12994"}],"version-history":[{"count":2,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/12994\/revisions"}],"predecessor-version":[{"id":13002,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/posts\/12994\/revisions\/13002"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media\/13001"}],"wp:attachment":[{"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/media?parent=12994"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/categories?post=12994"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pythonprogramming.altervista.org\/wp-json\/wp\/v2\/tags?post=12994"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}