Short Bits
Published in

Short Bits

PyScript (Pt.2) — Building Wordle with PyScript + Other Examples

Overview

Last week we did a brief overview of PyScript, a project allowing Python and CPython based packages like Numpy and Pands to run in the browser. This week we continue exploring PyScript with some examples of specific uses including a Wordle implementation with PyScript. The following examples are not comprehensive but cover issues i ran into while diving into PyScript for small projects. In the future I have other ideas for this framework and may write more about those explorations if they pan out with interesting discoveries or learning's to share.

All Examples below can be found on this github repo:

Other Examples can be found on the PyScript Website:

Building Wordle

TRY OUT THE APP

This was a short weekend project and only a few hundred lines of code all self contained in a single HTML file. It utilizes concepts and examples listed below. While this app does not utilize many data science packages (maybe a later project will emerge…) it does show the basics of building apps with PyScript.

https://robbyboneyarchive0001.blob.core.windows.net/public/shortbits/apps/pydle

Printing

With PyScript it is possible to print to console in two main ways. Python’s builtin print does work but shows alot of extra output compared to the console.log function from pyodide. The tricky thing about console.log however is that to properly print objects and collections like lists or dictionaries, it is important to first convert the object to a string.

Making HTTP Requests

A common task of many apps is API calls to get data or state from various services. One problem you might encounter working with PyScript is attempting to import requests for HTTP requests. This is because Pyodide (the engine beneath PyScript) does not currently support requests .

instead you can use the XMLHttpRequest package included in pyodide. It works pretty well.

Buttons

Regular HTML buttons are compatible with PyScript. Simply define a python function in a <py-script> tag and then reference that function as the value for a pys-onClick attribute to a button element.

If you forget to include *args, **kwargs in the function’s input you may see an error like the following.

Write to HTML Elements

Writing data to HTML elements is also fairly straight forward. Use the Element object available by default with pyodide to access elements on the DOM. One key thing to remember is to use <variable>.element as seen below before attempting to access attributes like innerText, innerHTML, style.display, value, etc…

Another simple way to write output to elements which can be more stable I found is using the builtin pyscript.write(<label id>, <value>) function. Simply give a label element an id, then use .write to assign a python value to that element.

Inputs

Inputs are similar to other HTML elements; they just need ID’s and then their values can be accessed via <variable>.element.value .

Other Pyodide References

Because PyScript is built on Pyodide, much of Pyodide’s Python API will work in your PyScript apps (to my understanding). For a full overview of Pyodide functions available from python, check out the reference page!

More To Come

PyScript is an interesting project. It could be a candidate for data science reports or small apps in the future and is definitely going to be a project I continue following and possibly using more.

References

--

--

--

short reads about things i find about discoveries, theories, products, inventions and ideas

Recommended from Medium

👋Integrate Google places autocomplete feature in angular application [using NPM package]

Authentication service or how i spent 3 hours

LeetCode problem #16–3Sum Closest (JavaScript)

A beginner’s guide to Web sockets (SOCKET.IO)

10 most important Javascript Interview Questions

Building REST APIs using NodeJS

MarionetteJS + Brunch Part 3 — Views 1/2

Automation of increase of service quota with boto3

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Robby Boney

Robby Boney

Director of Product Development @ Interject Data Systems. I write Software for Science, Data & Enterprise…https://robbyboney.notion.site/

More from Medium

How to Use PyScript Within VS Code

PyScript is a framework that allows users to create rich Python applications in the browser using HTML’s interface. PyScript aims to give users a first-class programming language that has consistent styling rules, is more expressive, and is easier to learn.

Top 5 Python GUI Frameworks for Developers

My First Impression Trying Python on Browser

My first impression after trying PyScript — Python in a browser.

How to Use the Match Statement in Python

A computer with some code on the screen