Hi all, this email is a break from my normal, tech-heavy content! This past Spring/Summer I went through the software engineering interview gauntlet and recently accepted a job at Microsoft! I figured it’d be helpful to document the resources I used to prepare for my interviews.

These resources include:

• Interview handbooks
• Behavioral interviews
• Leetcode-style interviews
• System design interviews
• Tech knowledge interviews
• Company reviews/comp info

I created a Github repo here with all the resources. I tried to keep the list brief and approachable, but I’m happy to add additional resources as long as the list doesn’t get overwhelmingly large. Please check it out, give it a Star, and let me know what you think!

The mythical 10x engineer is said to have the efficiency and output of 10 normal engineers. While their existence has been debated, I have actually worked with a couple 10xers over the course of my career.

As Santa Claus proclaimed in the undying M&Ms Christmas commercial: "They do exist!"

But before you get too exicted about their existence, I have some bad news to bear: working with this type of 10x engineer isn't all that great. Who is going to review all the code this engineer just cranked out? All of a sudden you have an imbalance. You now either have team members spending much of their time reviewing a 10xer's code (no fun) or you start piling up a backlog of pull requests authored by a single person.

So if this type of 10x engineer isn't all that helpful, is there a type that is helpful? Yes! A looser definition of 10x engineering also includes engineers that are capable of technical depth and discovery very quickly. They can evaluate a complex feature for which there is no prior art in your code base and come up with an elegant solution quickly. The nuance here is about cognitive load rather than lines of code.

A question I have been hearing a lot recently is about Solid’s reactivity. Specifically, what makes a framework like Solid more reactive than, well, React.

The answer is the pub/sub model employed by Solid’s signals. Using a pub/sub model, we’re able to write the following code:

const [count, setCount] = createSignal(0);

setTimeout(() => {
  setCount(count() + 1);
}, 1000);

createEffect(() => {
  console.log(count());
});

And we will log the count every time it’s updated (every second). You’ll notice that we don’t have to enumerate our effect’s dependencies—it automatically knows that it should be triggered when count is updated.

This past week, the React core team published a Request for Comment (RFC) for a new React hook: useEvent. This post attempts to capture what this hook is, what it isn’t, and what my initial reactions are.

Note that this is an RFC and isn’t released yet, so it isn’t available yet and its behavior could change.

Trying to solve a real problem

There’s a real problem useEvent is trying to solve. Before we jump into what useEvent is, let’s wrap our heads around the problem.

I started working with React professionally about three years ago. This was, coincidentally, right around when React Hooks came out. I was working in a codebase with a lot of class components, which always felt clunky.

Let’s take the following example: a counter that increments every second.

class Counter extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  componentDidMount() {
    setInterval(() => {
      this.increment();
    }, 1000);
  }

  render() {
    return <div>The count is: {this.state.count}</div>;
  }
}

That’s a lot of code to write for an auto-incrementing counter. More boilerplate and ceremony means a higher likelihood for errors and worse developer experience.

We humans like dealing in absolutes. It’s easy. Nuance is hard. Unfortunately for us, everything involves nuance. That’s why we should question ourselves if we start to wonder if mutation is always bad.

The truth is mutation isn’t always bad, nor is it usually bad. It just is. It’s an excellent tool some languages give us to manipulate objects. Like with any tool, it’s our responsibility to use it correctly.

What is object mutation?

Here’s a quick refresher on object mutation. Let’s say we have a person object:

The useMemo hook in React is actually one of my favorite hooks—it enables a lot of best practices and solves some potentially tricky bugs when writing React components.

How it works

The useMemo hook is a function that takes two arguments: a callback function and a dependency array:

function MyComponent() {
  const myValue = useMemo(
    () => {
      /* this is the callback function */
    },
    [
      /* this is the dependency array */
    ]
  );

  return <>The value: {myValue}!</>;
}

If you’re subscribed to this newsletter, you probably found it through my blog, which uses the Gatsby static site generator. Gatsby is great, but it doesn’t provide much (or rather, anything) in the way of scheduling content publication. In this newsletter, I’ll show you how I schedule my Gatsby blog posts using Github Actions.

My Workflow

I develop a new blog post on its own branch locally and keep it up-to-date with an upstream branch on my blog’s github.com repository. When I’m done writing, I create a PR from that branch into main. Finally, I add the following description to the PR, which will tell our soon-to-be-developed action when to merge the branch:

In this tutorial, we’ll create a React project from scratch using create-react-app, add in the Apollo GraphQL client, and then use the SpaceX GraphQL API to display data in our application.

Creating a new React App

I’m going to use the package manager to create a new React app called . You can, of course, use if you’d like.

React Hooks have been all the rage for a little over a year. Let’s see how we can roll our own useFetch hook to abstract fetch request logic out of our components.

Note: This is for academic purposes only. You roll your own hook and use it in production, but I would highly recommend using an established library like to do the heavy lifting for you!

Recursion can be a tricky concept in programming. The challenge may seem greater in a view library like React. Today, we’ll use recursion to create a menu any number of levels deep. Additionally, we’ll make it so we can toggle the display of children at any level. Ultimately, we will have something that looks like this:

Getting Started

The Cross-Site Request Forgery (CSRF) attack vector is often misunderstood. Today we'll gain a better understanding of CSRF and why cookie-based CSRF tokens are a good option for Single Page Applications (SPAs).

What is a CSRF attack?

A CSRF attack is when an attacker website is able to successfully submit a request to your website using a logged-in user's cookies. This attack is possible because browsers will "helpfully" include cookies with any request to your site, regardless of where that request originated from.

Let's go through the motions of what a CSRF attack might look like.

One of my favorite ways to learn how something works is to recreate it. In this email, we're going to learn the basics of Redux by creating a simplistic version of it.

What Does Redux Accomplish?

Before we dive in, it's important to understand what Redux accomplishes. Redux is a state management library. It helps you manage stateful information in an application. "Stateful information" is just a fancy way of saying information that needs to persist and be available during your application's use. This includes things like a user's name or whether the application is in "light" mode or "dark" mode.

State management libraries like Redux become especially useful when your application gets larger in size. Many people think Redux is a part of React or explicitly associated with React, but it's actually its own standalone library and can be used with or without React.

One way we can challenge ourselves to grow as JavaScript developers is to practice with quiz questions! The following questions are intended to be challenging and instructive. If you know exactly how to answer each one, that’s great, but if you get some wrong and learn why you got it wrong, I contend that’s even better!

Question 1: Array Sort Comparison

Let’s say we have a tree data structure. This could be an organizational hierarchy, project breakdown, animal/plant taxonomy, etc. The following is an example of a tree structure:

In an application, it would be fairly common to store this information in the following format, especially if there is a 1-to-many parent/child node relationship:

const data = [
  { id: 56, parentId: 62 },
  { id: 81, parentId: 80 },
  { id: 74, parentId: null },
  { id: 76, parentId: 80 },
  { id: 63, parentId: 62 },
  { id: 80, parentId: 86 },
  { id: 87, parentId: 86 },
  { id: 62, parentId: 74 },
  { id: 86, parentId: 74 },
];

Test-Driven Development (TDD) seems like a great concept, but it’s hard to fully understand and appreciate until you see it in action. In this tutorial, we’re going to implement a JavaScript object validator using TDD.

A Quick Primer on Test-Driven Development

TDD flips a lot of “conventional” software development processes upside-down by writing tests first and then writing code that will satisfy those tests. Once the tests are passing, the code is refactored to make sure it’s readible, uses consistent style with the rest of the codebase, is efficient, etc. My perferred way to remember this process is Red, Green, Refactor:

I have long believed that “failing fast” is one of the most important tenets of modern software development. The sooner you realize your code is wrong or that you have introduced a bug, the sooner you can course-correct. It keeps you and your team moving faster and significantly reduces the likelihood your users encounter bugs.

Today, I’m going to take a shallow dive into some of these modern practices.

Version/Code Control

Use version control on your code (e.g., git). This allows for mobility, collaboration and backup.

We all want higher-quality code. With Prettier, you can achieve this with minimal effort.

What is Prettier?

Prettier is an opinionated code formatter that supports various languages. When applied to a supported file type, Prettier will automatically format the code in that file.

Supported Languages

Testing is supposed to validate that your app works. If you do some refactoring and your app still works but your tests are failing, are you really testing the right thing?

I recently ran into this issue myself at work. I spend most of my time there working on a React/Redux/Typescript front-end. I noticed that lower level components had some gnarly conditionals to determine a numbering scheme. There are 10 of these components that each conditionally render based on state, and they have to maintain consecutive numbering. For example, the following table represents an example display state for each component and the numbering scheme:

Quick rebranding note: If you don't recognize the "from" line of this email, it's because I changed the name of my newsletter and YouTube channel from TypeOfNaN to DevTuts! Same author, different name.

Today we're going to write our first Deno server in 60 lines. Deno is self-described as a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust." I'm a huge fan of typescript, so I was really excited to hear about a runtime that treated typescript as a first-class citizen!

Express is a terrific JavaScript framework that serves as the backend for a lot of full stack web applications. Many of us use it day-to-day and are proficient in how to use it but may lack an understanding of how it works. Today, without diving into the Express source code, we’re going to recreate some of the routing functionality to gain a better understanding of the the context in which the framework operates as well as how response and request can be handled.

If you’d like to see the final source code, you can find it on Github. Please do still code along with me for a better learning experience!

Getting Started

One way to understand JavaScript methods is to roll your own version. Today, let’s write Array.map!

It turns out, Array.map takes two arguments:

While JavaScript allows us to mutate objects, we might choose to not allow ourselves (and fellow programmers) to do so. One of the best examples of this in the JavaScript world today is when we’re setting state in a React application. If we mutate our current state rather than a new copy of our current state, we can encounter hard-to-diagnose issues.

In this post, we roll our own immutable proxy function to prevent object mutation!

What is Object Mutation?

As a quick refresher, object mutation is when we change a property on an object or array. This is very different from , in which we point a different object reference altogether. Here are a couple examples of mutation vs. reassignment:

Array.every() and Array.some() are handy JavaScript array methods that can help you test an array against specified criteria. In this post, we'll quickly learn how to use them.

Array.every()

Array.every takes a callback function as an argument. If the function returns true for each item in the array, Array.every returns true. Let's check it out.

function test(el) {
  return el < 10;
}

[1, 2, 3, 4, 5, 6].every(test);
// true

State management is challenging. We can make it less challenging by making sure we don’t store any redundant information in our state. What do I mean? Let’s say in our program we need to figure out whether people will be allowed in our bar. We can determine this by examining a couple attributes of the person: we can look at his or her age (anyone who is 21 or older may enter the bar) or we can look at whether he or she is an employee of the bar (all bar employees are allowed to enter, regardless of age). Now, we could store all this information in our state object:

const state = {
  name: 'Joe',
  age: 15,
  employee: false,
  allowedIn: false,
};

The problem here is that allowedIn can easily be derived from the age and employee props, meaning it is technically redundant with that information. This is most problematic because it presents an opportunity for our state to contradict itself.

Introducing Selectors

While I often focus my emails on JavaScript fundamentals, I occasionally digress to sing the praises of Typescript. If you're not using Typescript, I still encourage you to read on to learn a little more about it!

Typescript Generics can be used in functions to constrain the types of other arguments provided to the same function. Let's explore this idea!

A simple use case

One term you might hear in the JavaScript world is “higher-order function.” Today, we’ll explore what it means to be a higher-order function and look at some examples in JavaScript!

A Definition

By definition, a higher-order function is a function that either takes a function as an argument or returns a function.

If you’re not familiar with treating functions as first class objects [1], you might be surprised that this is possible. But it is—and it’s extremely powerful!

The two-sum interview question is interesting to explore because it has both a brute force, logical solution, as well as a more time-efficient solution that can demonstrate strong computer science fundamentals. Let’s explore both potential solutions and hopefully learn along the way!

The Two-Sum Question

First, let’s understand the two-sum question. It’s usually posed as some form of the following:

You are asked to create a function that takes two parameters. The first parameter, , is an array of numbers. The second parameter, is a single number. The output of the function should be a two-element array that represents a pair of numbers in that add up to .

Set is one of my favorite built-in object types in JavaScript. This installment of the TypeOfNaN Newsletter will introduce the Set object and discuss some of its use cases.

The Set Object

One type of programming concept I really like explaining is the type that has an intimidating name but, once you learn it, is actually a pretty simple concept. This is how I feel about memoization.

Not memorization—. Let’s first see how Wikipedia describes memoization[1]:

A callback function is a function you provide to another function that will be executed after completion of an asynchronous operation. Often, async functionality in web development comes in the form of data fetching.

Accordingly, let’s create a fake user data fetcher and use a callback function to do something with the result.

The Fake Data Fetcher

First we create a fake data fetcher that doesn’t take a callback function. Since doesn’t exist for 300 milliseconds, we don’t have synchronous access to it.

"Thunk" is one of those programming terms that sounds intimidating, but many of us are actually familiar with and have used them. Let's first see how Wikipedia defines thunks[1]:

In computer programming, a thunk is a subroutine used to inject an additional calculation into another subroutine. Thunks are primarily used to delay a calculation until its result is needed, or to insert operations at the beginning or end of the other subroutine.

This offers a little help, but maybe is a little too abstract.

So, what is a thunk really? It's simply a function returned from another function. Let's look at a quick example in JavaScript:

If you're not familiar with how JavaScript variable assignment and primitive/object mutability works, you might find yourself encountering bugs that you can't quite explain. I think this is one of the more important foundational JavaScript topics to understand, and I'm excited to share it with you today!

JavaScript Data Types

JavaScript has seven primitive data types[1]:

• Boolean (e.g., true, false)
• Null (e.g., null)
• Undefined (e.g., undefined)
• Number (e.g., 42)
• BigInt (e.g., 10000000000000000n)
• String (e.g., "Hello world")
• Symbol (e.g., Symbol(11))

"Pure function" is one of those terms that might be intimidating at first, but the concept is actually quite simple. In this email, I'll quickly define what pure functions are and why they're good.

What is a Pure Function?

To be considered pure, a function must meet two criteria: it must have (1) identical output for identical inputs and (2) no side effects.

Let's dig deeper into each of these criteria.