First Draft of the Webonomicon
A few months ago I mused about what might go into a lesson on human-scale software. Juanan Pereira and I have now sketched a rough outline, tentatively titled The Webonomicon. The sections below shows the learner persona, the technologies we discuss, and the order of topics, while the repository has working code. There’s a lot left to do, but we’d be grateful for feedback: issues in the repo are the best way to reach us.
Learner Persona
- Sabina, 28, has a master’s degree in animal physiology and now works for a mid-sized veterinary pharmaceutical company.
- She learned a bit of R in an undergraduate biostatistics course, then picked up Python in grad school. She spends several hours a week analyzing data with [Pandas][pandas] and visualizing it with [Plotly Express][plotly-express], and is comfortable with basic Git commands.
- Sabina recently became responsible for maintaining a dashboard application built with [Dash][dash]. She believes a better understanding of how web applications work in general will help her debug and extend it.
- Sabina has tried doing asynchronous online courses a couple of times, but strongly prefers learning in real time with other people.
Technologies
| Package | Purpose |
|---|---|
| Alpine.js | dynamic HTML |
| Beautiful Soup | HTML manipulation |
| deno | JavaScript |
| FastHTML | web framework |
| Flask | web server |
| Frappe Charts | charts |
| html5validator | validation |
| htmx | interaction |
| httpx | HTTP |
| Jinja2 | HTML templating |
| JWT | authentication |
| Polars | tabular data |
| PrettyTable | formatting |
| PyPika | query builder |
| pytest | testing |
| Selenium | testing |
| snailz | synthetic data |
| SQLite | database |
| SVG.js | graphics |
Topics
- Introduction: what we will learn, how to set up, and the data we will use
- HTTP: how browsers and server talk to each other
- A Server: building a server with Flask
- Using a Database: getting data from SQLite using PyPika
- Testing the Server: testing the server with pytest
- Serving HTML: generating HTML with Jinja templates
- Using Forms: sending data to a server
- An Hour of JavaScript: variables, loops, functions, and callbacks
- JavaScript in the Browser: using the language in its native habitat
- Using HTMX: letting the htmx library do the hard work
- Database Migration: managing database schema changes
- Permissions: representing and checking who can do what
- Authentication: checking the user’s identity
- Encryption: keeping secrets safe
- Testing in the Browser: using Selenium to test the user interface
- Dynamic Graphics: drawing pictures with SVG.js
- A Graphical User Interface: handling interactivity in the browser
- Accessibility: because everyone should be comfortable
- Internationalization: because everyone should be welcome
- Logging and Auditing: keeping of track of what’s happened
- Session: persistent sessions and JWT
- FastHTML: bringing it all together
- Designing a Workflow: thinking before coding