Study Tools | Matt Gresham

Description

Context: Traditional flashcards and textbooks didn't work for me. I needed interactive tools that let me practice by doing — running calculations, testing formulas, and getting instant feedback.

Challenges: Making Python run in the browser without a backend. PyScript solved this, but required careful structuring of the code to avoid indentation errors and ensuring each tool was self-contained enough to work in a terminal widget.

Result: A set of browser-playable Python tools covering math and physics topics — all running client-side via PyScript. No server, no install.

How PyScript Works

PyScript — Python Execution in the Browser ════════════════════════════════════════════ ┌──────────────────────────────────────────────┐ │ Browser │ │ │ │ page loads <script type="module" │ │ src="core.js"> │ │ │ │ │ ▼ │ │ ┌────────────────────────┐ │ │ │ Pyodide │ │ │ │ CPython compiled to │ │ │ │ WebAssembly (WASM) │ │ │ └────────────┬───────────┘ │ │ │ │ │ ▼ │ │ ┌────────────────────────┐ │ │ │ <script type="py" │ │ │ │ terminal> │ │ │ │ your Python runs │ │ │ │ inside the WASM VM │ │ │ └────────────┬───────────┘ │ │ │ stdout / stdin │ │ ▼ │ │ ┌────────────────────────┐ │ │ │ <py-terminal> │ │ │ │ DOM widget wired to │ │ │ │ Python stdin/stdout │ │ │ └────────────────────────┘ │ └──────────────────────────────────────────────┘ Sandbox — what WASM blocks: What works fine: ────────────────────────────── ────────────────────────── ✗ requests / urllib ✓ math, random, statistics ✗ subprocess ✓ input() with terminal attr ✗ open() / file I/O ✓ print, loops, classes ✗ os.system() ✓ js module (call browser APIs) Pyodide compiles CPython to WASM — real Python in the browser, no server required.

Prettier + PyScript — The Indentation Trap ═════════════════════════════════════════════ BEFORE Prettier: AFTER Prettier (broken): ───────────────── ──────────────────────── <script type="py" <script type="py" terminal> terminal> x = int(input()) x = int(input()) print(x * 2) print(x * 2) </script> </script> Python sees leading spaces → IndentationError at runtime. Fix: add  immediately before every <script type="py"> tag. Closing </script> must also be at column zero. Hardest bug to diagnose — code looked fine in the editor but crashed at runtime with no obvious cause.

In Action

Browser Python proof points

Pyodide runs real Python calculations in the browser with no server process.
PyScript terminal mode supports interactive input() workflows.
Formatting guards keep Python indentation intact inside the HTML page.

Physics calculator running in the browser

Dev Notes

Problems Solved

Standard textbooks and flashcards don't let you practice by doing. I needed interactive tools where I could run actual calculations and get instant feedback — and ideally ones that worked in the browser with no install, so I could use them anywhere.

Errors & Fixes

Prettier auto-indented the PyScript code blocks, which caused IndentationError at runtime — fixed with a comment before every script tag. PyScript's input() also blocked silently without the terminal attribute on the script tag.

What I Learned

PyScript's execution model and its browser constraints — no requests, no subprocess, no file I/O. The py-terminal widget for interactive input, how browser-native Python sandboxing works, and why Prettier's auto-formatting and Python's indentation rules don't mix without guards.

Try it