Zoom trades places with Boeing.

Image for post
Image for post

In this unprecedented year, we shifted from working in offices to remote work and from travel to home entertainment, and the stock market took notice. This data set provided a good opportunity for building visualizations with D3, so I wanted to share the steps I took in the process.

  1. Collect and format data

The first step to creating any type of visualization is to find its data source, as well as the tool necessary to build it. After some digging online, I used the market cap on the first trading day of each month from ycharts.com …

Image for post
Image for post
Photo by Chris Lawton on Unsplash

While there are many popular libraries like React Transition Group and React Motion to animate components, one of the best ways to learn how something works is by building it from scratch. In this article, we’ll learn how to create enter and exit transitions using only hooks.

To start, here are the various transition stages in a component lifecycle.

  1. mounted
  2. entering
  3. entered
  4. exiting
  5. exited
  6. unmounted

When a component is mounted, it means it appears as a DOM element, regardless of its style. When it’s unmounted, it means the opposite, i.e. removed from the DOM. Traditionally there hasn’t been an issue…

A better way to copypasta 🍝

Image for post
Image for post
Photo by Joanna Kosinska on Unsplash

What are VSCode Snippets and why use them?

VSCode Snippets are shortcuts to port boilerplate code via keywords using IntelliSense or the > Insert Snippet command on the Explorer. They can be scoped to a project or language or enabled globally. A snippet offers a better solution to copying and pasting because it only selects the template and leaves the cursor in place where the actual code needs to be changed.

Let’s see it in action.

Image for post
Image for post
Photo by Steve Johnson on Unsplash

An abstract class in TypeScript is defined by the abstract keyword. It’s meant to be derived by other classes and not to be instantiated directly.

The example below has the BaseLogger, which is an abstract class that enforces derived classes to implement its abstract methods.

abstract class BaseLogger {
abstract log(msg: string): void
// Error! Non-abstract class 'DebugLogger' does not implement inherited abstract member 'log' from class 'BaseLogger'.class DebugLogger extends BaseLogger {
// log method must be implemented

Abstract classes are similar to interfaces with methods, but one difference is that it can also contain shared implementations…

Image for post
Image for post
Photo by marcos mayer on Unsplash

It’s often easier to overlook type safety in unit tests and use type assertions or ts-ignore comments. Over time, this can lead to outdated tests and degrade their ability to catch bugs in production. Here are some ways you can introduce better type safety using Jest as the testing framework.

1. Assign objects to a Partial type before casting

Let’s say we have an object type that has a lot of properties, like config options or props for a complex React component.

An easy way to ignore this would be to cast the test value as the required type.

type Properties = {a: string, b: number, //...}const identity…

Image for post
Image for post

One of the best things about working in Javascript is that we have access to newer features every year, thanks to the hard work of TC39 committee and developers who implement the spec. There are a number of changes in ES2020, but this article covers the ones that specifically improve the experience of building apps in React.

Optional Chaining

It’s a common pattern in React component libraries to pass down event handler props, such as onClick or onChange. When these props are optional, the child component will often have to check for the existence of each to avoid the dreaded undefined is…

Image for post
Image for post
Photo by Siora Photography on Unsplash

Few days ago, I finished reading Dan Vanderkam’s Effective TypeScript over a long flight (8 hours to be exact!). The book is concisely written with great practical advices. While I recommend reading the full book, here are some of my favorite tips.

1. Use `readonly` to prevent errors from mutating objects

When an array or a tuple is marked as readonly, TS will error when the user tries to to add, remove, or update items in those objects. This is especially helpful in functional programming to avoid side effects.

Image for post
Image for post

“Am I doing this right?”

The question comes up because right feels good, and that means I am good.

As a software developer, being right for me has been somewhat narrowly defined in terms of efficiency, as in algorithmically better for machines or ergonomically better for developers. It took me a while to realize that getting the right technical solution is just one part of the tradeoff equation. In this article, I try to list examples from the cost side and tips that helped me minimize them.

Cost of discussion

An architectural change can sometimes mean a change that takes months to discuss…

Eating fish semen together can really bond people

Image for post
Image for post
Photo courtesy of Bistro Boudin

Communal eating is back. Sharing a table with a stranger hasn’t been this popular since the lavish high-society parties of the ’70s in New York City.

It’s like Rothschild’s Surrealist Ball, except that invitations are sent through an online mailing list; there are hoodies in place of masquerade masks; and it’s more “mouth wide open” than Eyes Wide Shut.

The fleeting, serendipitous connection made with a stranger over a meal is a titillating idea.

It seems unlikely at first. The city’s wealth of food-delivery services, meal plans and food trucks makes it all too easy for us to avoid socializing…

Create React App (CRA) has given us a quick and easy way to get our app bootstrapped and running on the frontend. However, what if you want to build a scalable full-stack web application with real APIs (node server) and multiple frontend apps interacting with them?


You’ll be creating a mono-repo using yarn workspaces and create-react-app

In development, you’ll be running two servers — 1) CRA’s webpack dev server, which will proxy the requests to the 2) express server, which provides the apis.

In production, you’ll be running the express server that statically serves the built app, in addition…

Kaylie Kwon

Writer/engineer. Newsletter: https://kaylie.substack.com/subscribe

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