Porting the Basilisk II classic Macintosh emulator to the browser

Screenshot of Basilisk II in the browser

Basilisk II Classic Macintosh emulator in the browser. Try it out.

I recently ported the Basilisk II Classic Macintosh emulator to run in a web browser. I've been hoping to get it running for some time, and previously made an attempt back in 2013, before switching to focus on the PCE emulator. Since then browser technologies have advanced, and I've learned a lot more about emulation (in part by making a simulated computer of my own). The Basilisk II port is the culmination of both of these things. But enough about me, let's get into the gory technical details of how it works.

A First Reason React app for Javascript developers

This post has been updated to use the Reason 4 syntax, and to account for API changes in Reason React. It is up-to-date as of April 2019. A Traditional Chinese translation of an older version of this article is available here.

Reason is a statically-typed functional programming language from Facebook which can be compiled to Javascript. Reason React is a wrapper for React which makes it easy to use from Reason.

We're going to build a small single page web app to put Reason React through its paces. The app will display a list of top Reason-related Github repos. It's a small enough task that we can complete it in a few hours, but also has enough complexity that we can kick the tires of this new language. This tutorial expects no existing knowledge of Reason, though a basic familiarity with static types would be helpful.

Routing in Reason React

Update: Reason React now has a built-in routing feature which you can use instead of the library described in this post. However, if you can't use pushState routing (eg. because your app uses completely static hosting), the technique described in this post still works fine.

In my previous tutorial about Reason React, I covered most of the elements one might need for a typical web app, but one I left out was routing, so this is a quick guide to adding client-side routes to your Reason app.

We're going to use a library called Director, which is a simple and mature routing library for Javascript. We're actually going to install a version of the package called bs-director which also contains bindings to Reason/BuckleScript, which means we can use it easily from our Reason code.

Porting the PCE emulator to the browser

Screenshot of MacPaint showing the 'woodblock' demo image

The Internet Archive recently added the original Macintosh to the list of classic computers of which they provide emulation, so you can run their archive of software titles in your browser, without installing anything. This is great because it provides the same level of accessibility and convenience to emulation as you'd expect of playing a media file or viewing a document.

When you start up the emulated computer on these pages of the Internet Archive, you're running the PCE emulator, originally a piece of software intended to run natively on desktop operating systems, which has been adapted and recompiled to run in your web browser. As I did the initial work of porting this emulator to the browser (back in 2013), I thought it would be worthwhile to provide a run-down of the tools and hacks which made this possible.

How do binary and hexadecimal numbers work?




Better assertions for shallow-rendered React components

Update: Some time after I wrote this post, Airbnb published their excellent enzyme library which does all the stuff described in this post and a lot more. You should definitely look into using it!



Installing Pygame for Python 3 on Mac OS Yosemite


Fortunately, someone posted these instructions on the Pygame wiki:


Running a Hypercard stack on a modern Mac

Hypercard running in the SheepShaver emulator

Updated: now works on High Sierra


Why port emulators to the browser?




PCE.js - Classic Mac OS in the browser




Working implementation of SDL_CreateRGBSurfaceFrom for Emscripten



The following log message appearing in the Javascript console is a possible giveaway:

Installing Pygame on Mac OS 10.8 Mountain Lion


TL;DR you need to set some environment variables before installing Pygame

Running pip install pygame would fail as follows:

Hacker News theme

Hacker News Neue

