2020: Performant Videos & I Ching Roles

After 2019’s experiment, I wanted to continue the curious keyboard theme, but integrate more content from a book-writing class I’d been working on.

Switching from background image + music to video allowed for a tour of the site to be embedded in the background, while still improving load speed.

View in another window ➡️

Performance

Performance results were great: by dropping React.js for inline-embedded jQuery Slim, page load dropped to 0.1 seconds, with background video embedded in an iframe loading at 0.3 seconds. Almost twice the speed of last years experiment, with a background video added!

2019: React.js; Menus & Music

In a year when I became an uncle for the first time, I wanted to create something like the toy keyboards I played with as a child— a visual and musical curiosity experience. At the time of writing, I was taking electives in American Sign Language and basic Chinese.

The result: a visual & musical keyboard written in React.js, compiled in-browser, with load time under a half-second.

View in another window ➡️

Visuals

  • Visual effects and animation are achieved in-browser with a mix of CSS and JavaScript.
  • Custom glyphs, such as sign language, are achieved with embedded web fonts.
  • The bottom menu is optimized for touch, rendered by React.js, and resized to screen width for a natural feel across all devices.

Performance

  • Complete site loads in 3 HTTP requests — browser render starts at 0.4 seconds.
  • Supporting content, a background image and music file, are limited to 2 requests.
  • All other content— custom fonts for sign-language symbols, emoji, and other glyphs are compiled into the first request for availability on first browser paint.
  • Custom JavaScript written in React.js and Babel are compiled in-browser. Pre-compiling for additional speed could allow for a small savings in render speed, but given the simplicity of this experiment, compiling in-browser allowed for a complex toolchain to be put to use without a complex build process.