About

Wel­come to my blog! I’m a soft­ware engi­neer, cur­rent­ly based in San Fran­cis­co. I use this blog pri­mar­i­ly as a way of crys­tal­liz­ing things I learn.

I also enjoy, in no par­tic­u­lar order of pref­er­ence, the fol­low­ing:

  • Lis­ten­ing to music
  • Taking photos (siawyoung.com start­ed out in 2009 as a pho­tog­ra­phy blog)
  • Learn­ing Japan­ese
  • Watch­ing anime and read­ing manga (with an ardu­ous­ly increas­ing pro­por­tion of it in Japan­ese)
  • Having a nice beer (or some nice peated scotch)
  • Col­lect­ing watch­es (semi-retired, I’m quite happy with what I have now)
  • Work­ing on my Emacs con­fig­u­ra­tion (dot­files here)
  • Col­lect­ing modern and vin­tage mechan­i­cal key­boards (retired, mostly liq­ui­dat­ed)
  • The usual stuff — spend­ing time with loved ones, exer­cis­ing, hiking, cook­ing, etc.

Email Github LinkedIn

I no longer use any social media, so I won’t reply if you mes­sage me on Face­book, Twit­ter, or Insta­gram.

Site Design

I’m not a design­er by any means, but I appre­ci­ate good design and I try to imi­tate it. The cur­rent iter­a­tion of this site is based on a heav­i­ly mod­i­fied ver­sion of Tufte CSS, my fas­ci­na­tion of which goes back to when I first wrote a Jekyll theme for it.

Typog­ra­phy

For a long time, I stuck with a system font stack for the sake of per­for­mance, but I slowly grew tired of how old and plain they looked.

Recent­ly, I’ve relent­ed and gone with some nice (and free!) fonts: Source Code Pro for <code>, and Fira Sans for every­thing else.

Hyphen­ation

Hyphen­ation is accom­plished using gatsby-remark-hypher, a small plugin I wrote to achieve fine­grained con­trol over hyphen­ation behav­iour instead of rely­ing on brows­er defaults with the hyphens CSS rule.

I have my hyphen­ation set­tings set to:

options: {
  leftmin: 3,
  rightmin: 2,
  minLength: 6,
}

as rec­om­mend­ed in this exten­sive guide.

Palette

With code block styling as a notable excep­tion (dis­cussed in a later sec­tion), I try to keep the palette for the site to as few colours as pos­si­ble to reduce the number of pos­si­ble com­bi­na­tions I need to test. This prob­lem is exac­er­bat­ed by a light/​dark toggle fea­ture.

In light mode, I’m using rgba(39, 39, 39, 1) for text on a pure white back­ground. For dark mode, I’m using rgba(220, 220, 221, 1) for text on a rgba(29, 30, 32, 1) back­ground.

Light and Dark Mode

On the menu bar of the site, one can toggle between light/​dark mode on the web­site. The heavy lift­ing is done by gatsby-plugin-dark-mode, which amongst other things, takes care of remem­ber­ing the user’s set­ting in local stor­age.

Code block styling

I use gatsby-remark-vscode for code block styling, and Mate­r­i­al Theme for the theme itself (with some small adjust­ments). gatsby-remark-vscode also sup­ports dynam­ic them­ing, which I use to add sup­port for tog­gling code block themes for light/​dark mode:

theme: {
  default: "Material Theme Lighter High Contrast",
  parentSelector: {
    "body[class=dark]": "Material Theme Darker High Contrast",
  },
}

Read more about adding syntax high­light­ing sup­port for other lan­guages.

Per­son­al­ly some­thing that I find is a boon for users: allow­ing users to link direct­ly to head­ers. Thank­ful­ly, there’s also a Gatsby Remark plugin for that: gatsby-remark-autolink-headers.

Here, I describe how to make it work with dark mode tog­gling.

Curly quotes

Straight quotes belong only in lit­er­al code; every­thing else should use curly quotes. gatsby-remark-smartypants is your friend.