About
Welcome to my blog! I’m a software engineer, currently based in San Francisco. I use this blog primarily as a way of crystallizing things I learn.
I also enjoy, in no particular order of preference, the following:
- Listening to music
- Taking photos (siawyoung.com started out in 2009 as a photography blog)
- Learning Japanese
- Watching anime and reading manga (with an arduously increasing proportion of it in Japanese)
- Having a nice beer (or some nice peated scotch)
- Collecting watches (semi-retired, I’m quite happy with what I have now)
- Working on my Emacs configuration (dotfiles here)
- Collecting modern and vintage mechanical keyboards (retired, mostly liquidated)
- The usual stuff — spending time with loved ones, exercising, hiking, cooking, etc.
I no longer use any social media, so I won’t reply if you message me on Facebook, Twitter, or Instagram.
Site Design
I’m not a designer by any means, but I appreciate good design and I try to imitate it. The current iteration of this site is based on a heavily modified version of Tufte CSS, my fascination of which goes back to when I first wrote a Jekyll theme for it.
Typography
For a long time, I stuck with a system font stack for the sake of performance, but I slowly grew tired of how old and plain they looked.
Recently, I’ve relented and gone with some nice (and free!) fonts: Source Code Pro for <code>
, and Fira Sans for everything else.
Hyphenation
Hyphenation is accomplished using gatsby-remark-hypher
, a small plugin I wrote to achieve finegrained control over hyphenation behaviour instead of relying on browser defaults with the hyphens
CSS rule.
I have my hyphenation settings set to:
options: {
leftmin: 3,
rightmin: 2,
minLength: 6,
}
as recommended in this extensive guide.
Palette
With code block styling as a notable exception (discussed in a later section), I try to keep the palette for the site to as few colours as possible to reduce the number of possible combinations I need to test. This problem is exacerbated by a light/dark toggle feature.
In light mode, I’m using rgba(39, 39, 39, 1)
for text on a pure white background. For dark mode, I’m using rgba(220, 220, 221, 1)
for text on a rgba(29, 30, 32, 1)
background.
Light and Dark Mode
On the menu bar of the site, one can toggle between light/dark mode on the website. The heavy lifting is done by gatsby-plugin-dark-mode
, which amongst other things, takes care of remembering the user’s setting in local storage.
Code block styling
I use gatsby-remark-vscode
for code block styling, and Material Theme for the theme itself (with some small adjustments). gatsby-remark-vscode
also supports dynamic theming, which I use to add support for toggling 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 highlighting support for other languages.
Header links
Personally something that I find is a boon for users: allowing users to link directly to headers. Thankfully, there’s also a Gatsby Remark plugin for that: gatsby-remark-autolink-headers
.
Here, I describe how to make it work with dark mode toggling.
Curly quotes
Straight quotes belong only in literal code; everything else should use curly quotes. gatsby-remark-smartypants
is your friend.