How do binary and hexadecimal numbers work?

Submitted by James on December 29, 2016 - 11:20

This post is from a series I'm writing in which we'll learn how computers work, by writing a computer simulator in Javascript. However, I figured an explanation of binary and hexadecimal numbers is useful enough by itself, so here it is!

Before explaining how computers load data into their working space and process it, it's valuable to understand binary and hexadecimal numbers. This is because computer hardware only understands binary values due to the physical characteristics of the electronic circuitry used to implement them. I won't go further into explaining the reasons why computer hardware works with values in binary form, but you can read more about it here.

So what is binary? Binary is a 'base-2 number system'. But what does that mean?

Better assertions for shallow-rendered React components

Submitted by James on September 15, 2015 - 21:38

The React TestUtils shallow rendering feature allows us to test React components in true isolation from other component classes, and removes the need for a DOM in the test environment. It does this by allowing us to test the return value of a component's render method, without instantiating any subcomponents.

A basic example of how it can be used, assuming we're testing a component called <Page />:

Installing Pygame for Python 3 on Mac OS Yosemite

Submitted by superuser on December 20, 2014 - 13:36

It's somewhat difficult to find instructions on how to successfully install Pygame for Python 3 on Yosemite. The front page of the Pygame website has a link which appears to point to installation instructions, but it is broken.

Fortunately, someone posted these instructions on the Pygame wiki:

Firstly, ensure you have the Apple Xcode command line tools installed:

xcode-select --install

Install XQuartz from http://xquartz.macosforge.org/landing/. Restart your computer so the newly installed XQuartz is used.

Make sure you have homebrew installed:

Running a Hypercard stack on a modern Mac

Submitted by James on February 6, 2014 - 22:32
Hypercard in SheepShaver emulator

Updated: now works on Yosemite

A bunch of people have emailed me about getting Hypercard stacks running under emulation. Here is a pretty easy guide to running a Hypercard stack on a recent Mac (eg. running Mavericks, Mountain Lion, etc):

Place the Hypercard stack you want to access somewhere within your user folder: eg. Documents, or Desktop.

Download this zip file [95mb] containing the SheepShaver classic Mac emulator bundled with Mac OS 9 and Hypercard.

Extract and open hypercard.sheepvm. This should boot Mac OS 9.

On the Mac OS 9 desktop there should be a disk called "Unix". This is a virtual disk which actually lets you access files on your computer (eg. outside the emulator). Opening it is equivalent to opening your OS X /Users/ directory.

Why port emulators to the browser?

Submitted by James on October 18, 2013 - 14:42
MacPaint Woodblock sample image

In a discussion on Hacker News about emulators being ported to the browser, I drew attention to my own project, PCE.js, which emulates a Macintosh Plus and an IBM PC/XT. Some of the questions brought up included why someone would undertake such a project, and also the legal considerations of including the software ROM required to boot the machine.

PCE.js - Classic Mac OS in the browser

Submitted by James on September 20, 2013 - 12:56
PCE.js MacPaint screenshot

I've just completed porting Hampa Hug's excellent PCE emulator to run in the browser, using Emscripten. I've mainly focused on the pce-macplus build. This is pretty awesome because it means you can run classic Mac OS in the browser. Check it out: PCE.js - Classic Mac OS in the browser.

I've also got the pce-ibmpc build working (emulating an IBM compatible, up to a 286 CPU), and and pce-atarist, an Atari ST emulator also, with browser demos coming soon for each.

A dump of the source is available here but I'll try to clean it up and make it available on GitHub when I get the chance.

Update: source on GitHub, and I've added an IBM PC Demo.

Working implementation of SDL_CreateRGBSurfaceFrom for Emscripten

Submitted by James on August 13, 2013 - 18:55

Emscripten is an awesome tool for porting existing native codebases to the browser. There are a bunch of cool projects using it to port graphical applications such as games and emulators, especially those which already use the SDL library as a cross-platform video, sound and I/O abstraction. Leveraging the fact that the SDL abstractions provide portability across different OS platforms means that by implementing of parts of SDL in Javascript and compiling the code via Emscripten, the browser can become (with some caveats) another SDL target platform. However, Emscripten's SDL 'shims' are still very much a work in progress, and in a current project of my own (porting a classic Mac OS emulator), I've run into some parts where I've had to fill in the gaps myself.

Specifically, if you're finding your SDL-based, Emscripten compiled app is failing to render to the canvas, the issue may be that the app is trying to use the incomplete SDL_CreateRGBSurfaceFrom method to create an SDL surface from a buffer of pixels.

Installing Pygame on Mac OS 10.8 Mountain Lion

Submitted by James on August 7, 2013 - 16:34

I decided to install and play around with Pygame today, mainly as an excuse to write some Python for a minor departure from all the Javascript/Coffeescript I've been writing lately. Unfortunately the process wasn't entirely frictionless, due to Pygame not yet accounting for Apple's move to XQuartz as the recommended X11 implementation for Mac OS as of 10.8 Mountain Lion. As a result I ran into some compilation errors while Pygame was building it's native extensions, which fortunately were not too hard to fix as I had some familiarity with changes to X11 on Mountain Lion.

Caniuse.com Mirror

Submitted by James on July 12, 2013 - 19:30

UPDATE: original site is back online, I took down the mirror

I rely on caniuse.com to look up browser compatibility of various new features in CSS, JS, SVG etc. I noticed the other day that seems to be down (possibly pending a re-launch). Considering it's such a useful resource I decided to extract it from Google's cache and throw up a mirror.

You can find it at caniuse.jsdf.co.

Hacker News theme

Submitted by James on May 25, 2013 - 12:38

A while back I restyled Hacker News using the Stylebot extension for Chrome. Initially I just wanted to apply a fixed width, as the site's fluid layout can result in some very long lines on a large/wide display.

Over time I added in some other usability improvements, such as:

  • larger 'vote' buttons with more space in between them, which helps to avoid mis-clicks on the downvote arrow (a common complaint on HN)
  • stronger delineation between unread and read articles, using a faint cyan highlight on those which are unread, while read articles almost fade into the background
  • monospace fonts optimised for code

Works best with Helvetica Neue and Menlo installed (as they are by default on Mac OS). Alternatively, Anonymous Pro will be used for code if installed.

Vote arrows use the CSS border based triangle technique.

Pages

Subscribe to Front page feed