cover pic
cover pic

This past week, GitHub released a long-awaited feature — dark mode. Like many devs around the world, I was hype. In 2020, a dark mode toggle for anything remotely related to tech seems like a requirement.

So I flipped the switch. My immediate reaction was that it seemed a bit off. But I wanted to give it a chance and credited that feeling towards just not being used to the theme yet.

Flash forward a couple of days, I found myself switching to light mode for code review specifically. I didn’t feel confident code reviewing in dark mode. I was…


Read this in dark mode on blog.karenying.com.

One of my favorite things is simple UI state indicators. The nav bar on my personal site utilizes dots under the links to convey hover and active state. It’s minimalist yet effective:


Read this in dark mode on blog.karenying.com.

From pixels to bricks, Figma to CAD, Bootstrap to brutalist, it’s easy to see similarities between digital design and architecture — both are the process and product of structural elements we see on the daily, the former digital, and the latter physical. They are functional, with space for creativity and the potential to inspire and invoke feelings.

In this post, we chronologically examine the history of web design through the lens of architecture.

Disclaimer: While I do try to find one-to-one mappings between the two fields, it’s definitely not perfect! I have no…


Read this in dark mode on blog.karenying.com.

gradient.png

Often times, an app, website, or diagram will write text over a colored background. If the text is white, and the background is light-colored, then it’s always hard to read. With visual accessibility becoming an increasingly hot topic, it’s more important than ever to be cognisant of the color combinations we are using. In this post, we’ll quantify this contrast between two colors, define a standard for the minimum allowed contrast, and implement a way to dynamically change text color based on background color!

WCAG and Contrast Ratio

The Web Content Accessibility Guidelines (WCAG) aims to provide…


Read this in dark mode on blog.karenying.com.

My custom new tab page. Theme consistent with my personal site.

If you’ve seen a typical college student’s laptop, you might be familiar with Momentum. This free Chrome extension “replace[s] new tab page with a personal dashboard featuring to-do, weather, and inspiration”.

However, after five years of looking at the same couple of pictures, motivational quotes, and the cheesy “what is your main focus for today?”, I was long overdue for a change.


Read this in dark mode on blog.karenying.com.

Photo by Athul Cyriac Ajay on Unsplash

Ever wish a site had a keyboard shortcut? Me 🙋🏻‍♀️, every time I press the right arrow key in Google Calendar and sigh in frustration when the site doesn’t navigate to the next week. This seems like such an intuitive shortcut: use the arrow keys to browse forward and backward in time. It’s so intuitive that I forget it doesn’t actually exist natively.

Finally, I decided I’d hack this shortcut in. How? Chrome extensions.

In this post, we’ll be adding arrow key navigation to GCal. …


Read in dark mode on blog.karenying.com.

Photo by Life Of Pix from Pexels

If you’re an avid dark mode user like me, you’ll know that dark mode isn’t just about white text on black backgrounds. In a single app, a handful of shades of gray give the app some depth. And across various apps, the spectrum of gray becomes even wider.

I was curious about the dark mode apps and sites I use. Through inspecting elements and getting the hex codes of colors from a screenshot, I analyzed the dark mode palettes of 6 popular apps.

RGB Color Space

RGB

To talk about colors, we should start with how colors can…


Read this in dark mode on blog.karenying.com.

Netlify’s 404 Page

You just deployed your first Create React App to Netlify. Site is live shows up in the scrolling deployment log. Success 🎉

You happily visit your new site and click around the relative links. Nice, React Router has been putting in the work. Everything looks great.

You enter a path in the address bar that you know is handled with React Router… and get hit with “Page Not Found”. Huh?

Convinced that you must’ve done something wrong, you spin up your app in your local dev environment and try to replicate the bug…


Also published on blog.karenying.com.

Photo from Unsplash

My coworker, Ali, always forgets to eat lunch while working. Since we’re working remote, I wanted some sort of automated reminder message to ping him. Instead of using Slack’s native no-code solution, Slack reminders, I decided to build and deploy one from scratch because #QuarantineBoredom.

Like any reasonable person, I Googled “slack bot tutorial”, “how to build a slack bot from scratch”, and read a plethora of tutorials before diving in. I was interested in a Node.js implementation since that’s what I’m most familiar with. …


Read this in dark mode on blog.karenying.com.

Emojis source

Let me preface by saying I LOVE emojis. I use them every day in messaging/texting, on my Instagram, on my personal site, and in my Medium posts. This article represents my personal stylistic opinion.

Notion

Lately, I’ve seen emojis vastly overused, especially on Notion.

Notion is a self-proclaimed, all-in-one workspace. It has a modern, hip, trendy, and minimalistic look. I thoroughly enjoy its use of hand-drawn, black and white caricatures but I just cannot get on board with its (over)use of emojis. …

Karen Ying

junior web developer • senior @ princeton cs • blog.karenying.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store