I'm a software engineer in the SF Bay Area, specializing in full-stack web development. I'm currently at Google Cloud, working on developer tools. Previously, I received a B.A.S. in Computer Science and Music from Stanford.
Today I'm posting some bunny photos, as promised last time! We took Snorlax and Diglett to Tahoe, where they played in the snow for the very first time.
Diglett dug tunnels in the snow and got herself super wet. She needed a towel dry after the adventure! Snorlax was a lot more shy.
After the adventure, they had a nice little snack. Turns out rabbits quite enjoy the snow!
So I've decided to start a blog.
This endeavor was indirectly inspired by a recent HN post in which some poor soul had their Gmail account locked, and couldn't get it back despite working at Google! Being the Gmail-using Googler that I am, I immediately thought "could this be me?" and "should I get a custom email"? Truly that would be an unpleasant situation; much better to control my own domain.
Thus, here I am with a shiny new email address, along with a nifty little website to go with it. (Ironic, then, that this was served to you via GCP! But at least I can move a custom domain to point wherever I like.)
So I was left considering how to host my new homepage-cum-blog. I'll have you know that I really do not like Wordpress -- it has too many knobs to twiddle, which I'd be twiddling until the end of time. No, much better to roll my own site: no intractable plugins, no servers to configure, no comments section spam (thank heavens), not even any Javascript. Just some static content, which I can plop in a GCS bucket.
Interesting discovery I made, though, about dark mode.
CSS has a new media query called prefers-color-scheme. It works like this:
@media (prefers-color-scheme: dark) {
body {
color: white;
background-color: black;
}
@media (prefers-color-scheme: dark) {
body {
color: black;
background-color: white;
}
}
(We actually have Apple to thank for this. It landed in Safari first in March 2019, and the other browsers followed suit. Very unusual indeed, to see a new web standard premier in Safari! As I recall, it launched around the same time as iOS 13 with system-wide dark mode, which is perhaps related.)
So, simple enough -- just create some CSS variables like --text-primary: #333;, set them differently depending on prefers-color-scheme, and use throughout.
Except what about elevation? If you're viewing this in light mode, you'll notice that this article's borders are within a card, which has an elevation effect. In dark mode, that doesn't work: the background is already near-black. You can't just reverse the colors either, since objects don't cast white shadows (at least not with Material Design, which imitates physical objects).
The most common solution, it turns out, is to use a slightly lighter color for the elevated element. This gives the illusion that the element is better illuminated, and places the background in relative shadow. Clever! Counterintuitive, though.
It turns out that there are quite a few other gotchas like this. For instance: colors which work against light backgrounds can look garish on dark ones; they often need to be desaturated. This hints at a general problem: due to the reduced spectrum of usable hues, dark mode UIs can easily lack contrast, and so you have to choose your color palettes very carefully.
It did occur to me that Mixins would be perfect for this application -- rather then defining lots of distinct variables for different components (such as color, border, and elevation for the elevated cards), you could simply create an elevated-card mixin.
This has been the case for a while with preprocessors like Sass and Less, but they are (maybe) coming to CSS too, in the form of an @apply rule:
--dark-card: {
background-color: #111;
box-shadow: none;
color: #eee;
}
article {
@apply --dark-card;
}
This mixin controls the color scheme for articles, but also cancels the box shadow that's usually applied in light mode. Convenient!
Unfortunately, the draft spec for this rule was listed as abandoned. But hopefully it won't be too long until this is possible without a preprocessor.
In addition to random musings about tech, I'm also planning to use this blog to write about my travels (whenever that starts happening again), and post pictures of my two adorable rabbits. You don't wanna miss the rabbits.