CAT Tool

  • Complex single-page application in production.

Motivation for Migrating to TypeScript

The major thrust to migrate the CAT Tool to TypeScript was Tech debt.

Tech debt has been slowing us down from implementing new features and caused.

In the words of Alex, one of the major contributors to the CAT Tool:

Great writeup! You make a lot of great points here like getting subject matter expert involved early on and QA-ing with figma

I feel some of these important points are buried in the narrative and could be better emphasized if you made them a section heading.

What if the post is reorganized to have each lesson learned a separate section? That way, someone who is quickly scrolling through the article while they are waiting for the subway can see the main points.

An overarching comment I have is the text in the images is way too small. Even on the…

Photo by Garett Mizunaka on Unsplash

At OkCupid, we are building a new location search experience for users to set their own locations based on country, city name, and GPS.

In contrast to the earlier iteration of the location search experience, data that enables the search is no longer statically loaded from the source code. The new search experience is powered by multiple sources of data and services from the back-end and provides more sophisticated user feedback for error and success cases.

What makes the front-end of the new location search UX complex is that there are a lot of moving parts. The UI needs to…

How productive are you with JavaScript?

The coding interviews / coding challenges are designed to assess how productive someone can be with the language. In contrast to the algorithm whiteboarding interview, which assesses how the candidate go about solving a problem, or the architecture design interview, which assesses how the candidate’s experience in system engineering and product design, the coding interview is is utilized by the company interviewing you to answer one question:

Can you be productive with JavaScript?

You are usually given the flexibility of choosing the language you are most comfortable with to complete the coding challenge. Thus…

This a comprehensive guide for how to containerize your Mongo-Express-React-Node (MERN) app with Docker and deploy it to Amazon Web Service (AWS) Elastic Container Service (ECS). I will share my research and lessons learned deploying a MERN app, including what worked, what didn’t work, how I prepared the app for deployment and accomplished the deployment.

There was a lot of lessons learned when I was figuring out how to get my app, LooseLeaf, launched. The tutorial is written from the perspective of someone who had very little DevOps experience. …

In this article, I will show you add a rich text editor based on Draft.js to your web app. This post is part of the Web Developer Playbook series, created to provide examples, best practice, and suggestions for designing and building web services. I will be using libraries from the JavaScript ecosystem (e.g., Node.js, React.js) in all my examples.

Let’s get started!

All the code discussed in this article is contained in these gists here: PostEditor, which lets you use Draft.js to create rich text. and PostDisplay, which lets you use Draft.js to display the rich text created using the…

Photo by JJ Ying on Unsplash

JavaScript is not the language of choice to teach computer science, at least when I was in school. My university algorithms and data structures course was taught in Java. As JavaScript is becoming a more mainstream general purpose language and web developers are expected to have a strong foundation in computer science to be able to write increasingly complex code, it’s worth looking at how those CS 101 data structures and algorithms are implemented in JavaScript. For this article, we are going to look at the Linked List.

What Is A Linked List?

Linked list is like an array but more flexible. Elements in an…

This post is part of the Web Developer Playbook series, which are created to provide examples, best practice, and suggestions for designing and building web services. I will be using libraries from the JavaScript ecosystem (e.g., Node.js, React.js) in all my examples.

What is a Slug?

A slug is the last part of the url containing a unique string which identifies the resource being served by the web service. In that sense, a slug is a unique identifier for the resource. For example, the slug for this article (originally published on my blog), which has the url of is: web-developer-playbook-slug.

Some websites are…

Object Oriented Programming (OOP) is a software design pattern that allows you to think about problems in terms of objects and their interactions. OOP is typically done with classes or with prototypes. Most languages that implement OOP (e.g., Java, C++, Ruby, Python) use class-based inheritance. JavaScript implements OOP via Prototypal inheritance. In this article, I’m going to show you how to use both approaches for OOP in JavaScript, discuss the advantages and disadvantages of the two approaches of OOP and introduce an alternative for OOP for designing more modular and scalable applications.

Primer: What is an Object?

OOP is concerned with composing objects that manages…

How to solve problems, not just code.

What I love most about programming is the problem solving. I don’t believe anyone is born with problem solving skills. It’s a muscle that is built and sustained by repeated exercise. Like any exercise, there’s a set of guidelines to help you be more effective at developing your problem solving muscles. I will introduce five of the most important software design principles that have guided my problem solving process and show you how to apply these principles to solve a real problem.

Xiaoyun Yang

New York-based Software engineer. Currently at OkCupid. My website and blog:

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