Riley J. Shaw

/ Blog

  • Feature: add a dark theme

    • From repository rileyjshaw/rileyjshaw.github.io

    Dark themes are something I’ve sought since my early days on a computer. I remember finding a way to apply a black background to Microsoft Word 2003, then being horrified when I accidentally printed the document. In uni I scripted my desktop to boot into f.lux’s darkroom mode. One of my only lasting contributions to Signal was loudly advocating for dark mode on iOS and Desktop, not just Android. I even made a browser extension in 2015 to apply a dark theme to the entire Internet.

    It’s not the most pressing or exciting work, but I decided my site should have a dark theme of its own. I took a lot of inspiration from my former Khan Academy teammate Josh W. Comeau’s dark mode post, with a few differences.

    Continue reading

  • The responsive edit

    • From repository rileyjshaw/font-comparison-tool

    Another big one:

    • Wrote a Puppeteer script to render, measure, sort, and save fonts, sorted by height, width, and height x width
    • Made row height fit the biggest displayed font cell, and nColumns responsive to window width
    • Removed AutoSizer; swapped it for a simpler useSize hook
    • Added yarn update-fonts to automatically download, measure, and update fonts
    • Improved the placeholder text behaviour, and added some variety
    • Updated Google Fonts

  • The performance edit: part 2

    • From repository rileyjshaw/font-comparison-tool

    (Part 1 was c9bfc97)

    Wow. After these two commits, this feels like a completely different app. It’s so speedy!

    Background

    Last commit, I focused on eliminating unnecessary FontContainer re-renders. This wasn’t a big priority at first… until I added Google’s catalog of > 1000 fonts. Ever since, performance has crawled whenever that category is selected.

    I decided to tighten up my own render code first because I knew that after enclosing the list in a virtual scroller, performance would be okay enough. And then I’d be less motivated by the sluggish, practically unusable Google Fonts viewer.

    And I'm happy I did! react-window made a huge difference. With the improved render tree and virtualized scrolling, this app somehow makes loading, displaying, and live-editing the preview of > 1000 webfonts pretty smooth.

    Continue reading

  • Improved version for 2021

    • From repository rileyjshaw/palette-test-tool

    I recently added a color channel splitter back into my site header, so I dusted off this project. I’m finally settling on a standard palette. This was further motivated by adding a dark theme to my site.

    Some improvements since 2018:

    • Moved this out of the rileyjshaw.github.io repo into its own project
    • Improved UX around color-editing to something much quicker
    • Updated UI to show all colors and blend variants on screen at once
    • Added a toggle to show / hide secondary colors
    • Added saving / export tools
    • Added a toggle for dark mode, and separate state for the two palettes
    • Added a toggle to test different blend modes on the fly
    • Added a button to test live on rileyjshaw.com
    • Simplified code structure, added some dependencies, broke files out
    • Improved tooling

  • The performance edit: part 1

    • From repository rileyjshaw/font-comparison-tool
    • Memoize the FontContainer component, and its callbacks
    • Update size and alignment with CSS variables, not props

    It’s scrolling way better now, and changing font size with Google Fonts over no-longer causes an explosion.

    Next up: react-window, keep the @font-face declarations to woff2? only

12345