When Alarm?

I could not sleep, so I decided to test out the newest toy in the market. PyScript! At a first glance, PyScript seems pretty easy to use, I would say easier than Brython even. Don't quote me on that though, I have not used either of the libraries extensively and I am commenting based on my limited knowledge and experience using both libraries.

After taking a quick glance at the documentation, I decided to make a small webpage with it. I use this website called Sleep Calculator to calculate when to setup my alarm when sleeping. The logic behind the calculation is that an average human takes 15 minutes to sleep. And it is ideal to wake up in 90 minute sleep cycles. Also, a good night's sleep is considered 5-6 of these cycles. Pretty simple huh?

The PyScript code behind the webpage is pretty simple and commented in above screenshot. Pyscript has a method called write which we can use to write into html elements such as p tags using their ids.

The html code for the webpage is pretty simple. The whole thing is in a container div with an h1 for the heading and the the results are loaded in p tags. The p tags have an id with a number in it to easily write data to it. The last line of the pyscript does this using an f-statement to add the iteration number.

While making this, I faced two major issues. One is that PyScript takes some time to setup and load properly in the browser. Second is that the PyScript code was flickering on initial page load. To "solve" the first issue, the "loading" text was added to the web page. To solve the second issue, I just gave white color (the background color) to the PyScript element making it basically invisible.

Now this might be me not fully understanding PyScript and not including a required line of code or the more plausible explanation is that since the library is still in alpha release, it is not fully optimized yet.

The webpage when opened is as shown above. This is pretty simple looking and shown just for code explanation. The webpage was further modified with bootstrap and custom CSS to improve the UI. The final UI is show in below screenshot.

Source code for the project is published on Github. The webpage is hosted on https://alarm.aruham.dev (You should open it in a proper browser and not inside app browsers. Also, note that it is very slow for the Pyodide environment to setup and load on mobile browsers)

You can contact me via Telegram for any queries @phoneixatom.