jsbee & pybee

What it does

So you've heard of Python Bee? Python sucks. We made it into a fun online game and rewrote it in God's chosen language: JavaScript.

Players take turns writing a JavaScript (or Python :<) function to solve a random leetcode-esque problem — but they have to take turns typing one letter at a time and still somehow get on the same page with no means of communication (other than psychic reading via past typed letters). And there’s a timer.

How we built it

We used a lightweight no-build-step stack with Preact, Bun, Hono, and WebSockets to make a super satisfying (and addictive, seriously, we were stuck playing it for hours) game with easily sharable rooms. DX-wise, that made iteration times fast and keeps the game fast and light.

We put a lot of attention to detail into design including keyboard tab-navigation, focus rings, and edge case handling. Don’t forget the consistent design language: the entire game is themed yellow, for the JavaScript logo and for the bees! (or blue for the Python logo in pyb.ee mode 😑)

Challenges we ran into

We experimented with many different ways to safely test arbitrary user-provided code (the problem solutions) on our server. At first, we started with the good old eval but that’s obviously insecure. The other hackers managed to achieve Remote Code Execution on our server and sudo rm -rf /*’ed us. We then tried fancy new tech (QuickJS runtime in WebAssembly) for isolation and sandboxing, but it proved to be too challenging and had other problems. So we settled on Piston by the Engineer Man, a “high performance general purpose code execution engine” which runs both JavaScript and Python (and many more languages to come!) in an airtight sandboxed environment.

The Estonian government sent goons to track us down for being silly foreigners trying to register an Estonian domain. But it will be worth it when we get the jsb.ee domain.

Accomplishments that we're proud of

Production-grade security (actually!) with code sandboxing for code evaluations
Type-safe client-server communication, with a custom sync and state management solution, & not very hackathon-like validation :)
Pure HTML, CSS, and very minimal JavaScript
WE NEVER USED AI!! (except for helping us mass generate some of the problems)

What we learned

This project led us to some interesting explorations into the sociology of programming language usage, as participants must find means to communicate without affecting the outputs of the program and finding unique short circuits and “saves” to cover up disagreements in past code and find new ways to solve the problem in spite of them.

We also got back in touch with our roots, writing a production grade application in pure JS, HTML, and CSS. Many of us touched these newfangled technologies for the first time in a while.

Finally, we learned way too much about JavaScript while playing this game amongst ourselves for testing. Short-circuiting returns using commas? Slicing with negative indexes? JSON.stringify replacer functions? Strict mode vs. sloppy mode behavior? Different ways to fill an array? None of these are normal to write, but you find yourself needing them to recover from mistakes in jsbee code.