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!
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.
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.
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.