
I guess it's time to look back at a year where the world shut down, the state of denial tried to re-elect an incumbent president who tear gassed a church and a good portion of the planet was literally on fire.

Back in September I mostly wrote about what had [transpired throughout last year](/writing/transitions) and most of that hadn't really changed. After that I decided I really wanted to try to go back to school in 2021 and started to plan some projects to do outside of work.

So this was _my_ 2020:

### Takeaways

The Good:

- I started to feel really competent and that I've met some level of proficiency at writing code and leading people. In the last position, I took up a lot of mentorship and found there was a lot of capacity in myself to teach and be available to help people learn and grow. To be honest, I had no idea that capacity existed in me and I'm glad to have found it.
- Actually using the therapy I've spent thousands of dollars on. I have spent almost half a Bitcoin on therapy during the Trump administration. One of the things I've learned that for me, the best antidote to anxiety and stress is data and information. During an election year, sensationalism is high, during this election year sensationalism is like oxygen to liberals and kerosene to conservatives. Going through each headline designed and putting it in an historical context has been enormously helpful. For instance the lack of concession from the incumbent this year, watching the concession speeches or lack of concession speeches from one term presidents let me frame what was happening for what it was versus what it's being purported to be. The only reason I got to do that this year was because of the lack of commute and overwhelming amount of time I've had to myself this year.

The Bad:

- Lacking any focus on having any real tangible goal this year was difficult and every time I tried to center in on one, I talked myself out of it. I didn't feel productive or like I had any resolutions on much of anything. But that was bound to happen, I'm just glad I'm not alone in this.
- I've had some level of insomnia for most of my adult life. This year was worse than any other, because of the pandemic and lack of typical social structures. The only thing I did differently was I stopped caring when I went to sleep or woke up and just completed the same routine during the wake cycle. I stopped assigning value or shame to not being able to sleep or get enough sleep and that helped. But the three or four days in a row where I slept about 9 hours total in April were brutal.

---

The ability to survive this year should be a milestone for anyone. I'm content with that in and of itself and nothing can take that away for us.

### Projects

I did work on few projects this year, I didn't ship one of them, which goes back to the lack of focus.

- [**Feedbin Client**](https://pre-alpha.reubin.app/): I love RSS, it's one of the best parts of the web. The service I use, [Feedbin](https://feedbin.com/), has a responsive site and it works okay and they have an actual iOS app but no Android app. When I went back to Microsoft, it was on a React Native project, so I thought I'd revisit React Native to build an Android client for Feedbin. They have a well-documented [API](https://github.com/feedbin/feedbin-api). So why not? 🤷‍♀️
- [**TypeScript Course**](https://typescript.wtf): Over the last two or three years, I've used TypeScript pretty much exclusively. Last October I had the idea of putting a screencast series together and I scribbled out an outline in a notebook. I gave up on it shortly after that because the first time I tried to record my neighbor in the apartment building started making so much noise that I couldn't concentrate. Now that I live in a house, I thought I'd pick it back up. I started writing and 30,000 words later I think I'm close to being done on that one. I hope to share more about this very soon. 📝
- [**Downwrite**](https://github.com/charliewilco/downwrite): I started this project years ago and I've never shipped it. I get time to work on it in little pockets of time. It's supposed to be a Markdown editor that's supposed to replace Canvas, a start-up that shut down a few years ago. I haven't had much of a product vision for it or direction and it's pretty buggy. Over the holiday I picked it back up and started really plan what I wanted the product to be and wrote a lot of tests to start capturing some of those bugs. 🐛

#### Never Shipping

There's a theme with all of those projects and most of the side projects I work on. I never ship them. Something goes wrong, life comes up or I lose interest or concentration on them. None of that is wrong or bad but it doesn't feel great. There's so many great frameworks and tools to release a product that cost almost no money and I really want to build things and ship something.

So how? I literally have no idea other than to define a clear scope, stick to it and intentionally make time to do it. That's something I'm hoping to do this year.

### The Year as Remember It

God, enough fucking tech stuff.

<figure class="Post__figure--left">
  <img src="/images/posts/hawaii.jpg" alt="Beach">
  <figcaption>Beaches and alcohol. Winning combination.</figcaption>
</figure>

I started 2020 by actually taking a vacation for the first time in my life. I never thought I could afford it or I didn't feel like I had time, but I was wrong. We went to Maui and it was so good to stare at an ocean for 5 days and have cute waiters bring me alcohol with pineapple in it.

When I came back, I had all this energy and I decided that since it was an election year I wanted to participate in a real way in the Democratic primaries. I made calls and texted for Elizabeth Warren's primary campaign and it was AMAZING. I learned so much, made hundreds of calls, had rednecks hang up on me, made fun of Michael Bloomberg, like a lot, met so many cool people, and actually got to hear her speak. It's still a bummer that she didn't get more delegates before the convention but I think her message still permeated the Democratic platform and the convention. Hopefully, those ideas make into the Biden administration's first hundred days.

On March 6th, I started working from home at the company's urging to prevent the spread of COVID-19. By the 23rd, Governor Inslee issued the first shelter in place order "Stay Home, Stay Healthy". It was miserable working at a company who was transitioning to remote work for the first time. I couldn't say enough that there was no use in trying to replicate the in-office environment virtually. The people I was working with were finding it hard to adjust and all the time there was no real end to what we were experiencing, I thought everyday our contractors were going to get cancelled. Several hundred contractors at Google had their agreements severed very early in March. May 1st, the governor issued another order, that's when I think people around me and I started to accept that this was a permanent situation.

But during that time, I did jigsaw puzzles for the first time in years. I watched all the shows I never had time for. But I also had time to immerse myself into my work and I found it harder and harder to take my finger off of the pulse of everything going on in Slack. It was hard to not consume news constantly. There was a week I couldn't sleep more than a couple hours a night.

<figure>
  <div class="ImageGrid-4x4 ImageGrid-4x4--no-spacing">
    <img src="/images/posts/mandolin.jpg">
    <img src="/images/posts/guitar-rack.jpg">
    <img src="/images/posts/korean-epiphone.jpg">
    <img src="/images/posts/jaguar.jpg">
  </div>
  <figcaption>Didn't go overboard enough with this hobby.</figcaption>
</figure>

For my birthday, my partner bought me that mandolin and that was a trip, my hands still feel to big for it. 🤣

I did find one thing to throw my energy into during this year. At the beginning of the year I was at lunch with some co-workers and was joking about how I my resolution was to play music more. So after we ate, I made our group purposely late to a meeting, and we walked to a music store around the corner. The group thought I was kidding so I called their bluff and bought a guitar on the spot. I fell in love with it, even my fingers weren't calloused and I couldn't change chords fast enough. I kept enjoying it, I took guitar lessons over Zoom, scoured tab sites and met a few cool musicians. I'm still over a year later, enjoying it.

Towards the summer, the racial tensions in this country broke. George Floyd, Breonna Taylor, Manuel Ellis, Ahmaud Arbery were all murdered by police. The protests and demonstrations mounted, at the time I was living in Capitol Hill and was literally next door to where the now infamous Capitol Hill Autonomous Zone was established. The police instigated riots, tear gassed peaceful protests (some of which ended up through my window, in my tiny apartment with one window), mandated curfews and threw flash bangs at members of the free press.

But it wasn't just Seattle, it was Portland, St. Louis, NYC, DC, Louisville, Philadelphia, every major city. The whole country, couldn't avoid this topic. There were a few things I learned about race from this year:

1. I benefit from institutional racism, but that doesn't mean I need to be complicit. Being complicit often resembles ignoring the problem, not recognizing the privilege and not being willing to challenge those around you.
2. This is America, this is a seminal part of our history and ignoring it doesn't help.
3. The only actual dangerous minorities are the filthy rich and the United States Senate.
4. Democrats need the black vote and will fundamentally ignore it the second an election is over and virtue signal until they need it again.
5. Tech is not apolitical and trying to push politics to the side in and of itself is a political decision. To exist in the world is to be political.

<figure class="Post__figure--left">
  <img src="/images/posts/office-profile.jpg" />
  <figcaption></figcaption>
</figure>

Around July, we moved from Capitol Hill to Kent to get more space. Being stuck in a small apartment with two people working full-time from home wasn't an option. I finally got my own office space. I wrote about that [more here](/writing/transitions) (and there's better and more pictures). Having a place that is mine, that I can have my therapy sessions, take calls, binge TV shows, hide from the world was the kindest thing I think I've ever done for myself.

Election Day came and is still actively being disputed today. Seriously, I watched CNN for so long I developed feelings for Chris Cuomo. That's more than enough CNN for a lifetime. One really interesting moment happened at like 1AM on Thursday morning. John King was dissecting the vote count in Mifflin County (where I grew up) on the electoral map of Pennsylvania with Wolf Blitzer. He said the following about that county (emphasis mine):

> In these places **hardly anyone** lives, the President runs it up and in population centers in Pennsylvania: Montgomery County, Chester, Delaware County, he will always trail democratic voters.

I just thought it was exceptionally funny he referred to where I grew as a place that hardly anyone lives.

The other really notable thing that happened to me this year was getting interested in investing and with cryptocurrency; which could be it's own post. I invested in ETH and Filecoin and Uniswap. If you're a crypto person, DM me, I have tons of questions.

But I digress.

---

It's not lost on me how incredibly lucky I've been and how much privilege I benefit from. This year made that abundantly clear. 300,000+ Americans died, 22 million Americans lost their job, 21 million Americans have contracted COVID-19. (If these numbers don't make sense, to put it in perspective, at the end of 2019, the population of the United states was ~328 million people.)

I'm still alive and I had the incredible fortune to be able to function and almost thrive without really needing to leave my home.

#### Books Read

<figure class="Post__figure--right">
  <img src="/images/posts/prettiest-star.jpg" alt="Hardback copy of The Prettiest Star on my ottoman">
  <figcaption>It was so good and heartbreaking.</figcaption>
</figure>

I found it really hard to read and concentrate this year but I did manage to read a few books. Two of my favorites were:

- [_The Prettiest Star_](https://bookmarks.reviews/reviews/the-prettiest-star/) by Carter Sickels; it's a story of a boy dying of AIDS in a small town in 1986 and some of this was hard to read, mostly the townies reacting to finding out he had AIDS. I don't think before this year I read a lot of queer fiction or a lot of queer fiction set in moments of queer history. It honestly made me cry.
- [_High School_](https://teganandsara.com/highschool/) by Tegan and Sara Quin; it's their dual recounting of their years in high school and forming their duo. The audiobook was very immersive, it had archived tapes and performances along with both of them reading it. I had never been a super fan of Tegan & Sara and this book really changed that for me.

### 2021?

I do have some goals for 2021.

Basically, survive.

If I can handle that one, I did write that course and I want to release it. I feel like I'm sitting on so much cool stuff to share. Like I have a couple of mobile applications that I built with React Native that I talked about. They should be in the Play Store in 2021.

Anyway, happy belated new year to everyone and I would love to hear how you got through 2020!


Twenty Twenty


Everything is changing again, as it tends to do often.

### Moving to a house

At the beginning of the summer, I was 3 months into working and living at out of a 1 bedroom apartment with my partner, who was at the time out of work. Because of the pandemic, and all of the "stay-at-home" orders in Seattle, that's tight quarters to be spending most of your time. That apartment had an open kitchen, a bathroom and a bedroom. I'd primarily been working in the kitchen and it's hard to share that space when you're working 12 hour days, half in Zoom calls and the other half divided between triaging JIRA tickets and actually coding.

<div class="ImageGrid-4x4">
  <img src="/images/posts/old-apartment-wine.jpg">
  <img src="/images/posts/old-apartment-wfh.jpg">
  <img src="/images/posts/old-apartment-moving-in.jpg">
  <img src="/images/posts/old-apartment-flowers.jpg">
</div>

As much as we loved living in the city, we had to admit, this wasn't the same city anymore and our daily rhythms weren't suited for such a small place. So Sabrina and I moved down to a huge place in Kent, not too far from the commuter train but far enough that I don't have to hear it.

Now, I'm not in love with Kent but I certainly love And I setup a better office for myself. Gotta say, I love working out of here and having my own space that can just be mine is just affirming in ways I can't describe.

<div class="ImageGrid-3x3">
  <img src="/images/posts/office-chair.jpg" />
  <img src="/images/posts/office-desk.jpg" />
  <img src="/images/posts/office-deskchair.jpg" />
  <img src="/images/posts/office-dual-monitors.jpg" />
  <img src="/images/posts/office-fridge.jpg" />
  <img src="/images/posts/office-profile.jpg" />
</div>

### Back to Microsoft

<figure class="Post__figure--left">
  <img src="/images/posts/surface-equipment.jpg" alt="Pot of tea in front of bookshelf">
  <figcaption>Honestly didn't think I'd ever buy a Surface product</figcaption>
</figure>

After working at my last engagement for a year, I got the opportunity to go back to Microsoft and now I'm working with the Xbox team on A/B testing with React and TypeScript.

I was at Microsoft for most of 2018 and [2019](/writing/twenty-nineteen#work-transition) and I'm really excited to be back. I always feel like I'm growing in someway at Microsoft more than any other engagement I've been on.

One really awesome part is being able to dive back into use React Native again for the first time in like 4 years. Microsoft has their own port of React Native that targets Windows 10 SDK, you can run React on UWP apps, Xbox, pretty much anything running Windows 10.

### New Gender

In the midst of all of this and having more time to slow down and think during lockdown, I started to ask some questions about gender and how I understand myself and where or if I fit on the gender spectrum. Started to come to the conclusion I don't identify with the gender binary. Not him or her, just them.

People come out to be seen and understood as something different than the conception they have or present to others. I'm non-binary and I'm using [they/them](http://pronoun.is/they/.../themselves) pronouns. I went into a little more detail on [Twitter](https://twitter.com/charlespeters/status/1277690247359246341?s=19).

---

Anyway, that's all for now. Hopefully I feel like I can blog more in the future. ☕


Transitions


A common interview questions is: What the difference is between `function.call()` and `function.apply()`? I didn't really know the answer to this one and if you read the docs from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call), it's not super clear how either of those is different from normally invoking a function.

### Invoking a Function

Let's use this function as an example:

```js
function someFn() {
  console.log("Something");
}

function someFnWithArgs(name) {
  console.log("Hello from this demo function, ", name);
}
```

Typically you'd invoke a function like this:

```js
someFn();
// Logs "Something"

// We pass a parameter to the function to represent "name".
someFnWithArgs("Charles");
// Logs "Hello from this demo function, ", "Charles"
```

### Other Invocation Methods

One of the hardest things to understand in JavaScript is `this`. `this` is the context of a given scope. If you call `this` outside of a function, you're referencing the window object (provided you're running this in a browser).

```js
console.log(this);

// Window {parent: Window, opener: null, top: Window, length: 4, frames: Window, …}
```

Functions can create a new scope and then `this` refers to the scope it's now in:

```js
function createElement(textContent) {
  const element = document.createElement(this.elementName || "div");
  element.textContent = textContent;

  return element;
}

createElement("Calm down");

// <div>Calm down</div>
```

If we invoked this function normally. We'd return a `<div>` element, but maybe we want to call this function with a different version of `this`. We can pass a new version of `this` through `createElement.call()` and `createElement.apply()`.

```js
createElement.call({ elementName: "h1" }, "Title");
// <h1>Title</h1>

createElement.apply({ elementName: "h1" }, ["Another Title"]);
// <h1>Another Title</h1>
```

This is the main feature of `function.call()` and `function.apply()`: to redefine the function's context (`this`).

### The Difference between `.call()` and `.apply()`

The difference between these methods is how you pass parameters to the function, one takes them comma separated like the normal invokation and the other through an array. People on [StackOverflow](https://stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply) have commented that you can remember the different by remembering **C** for comma and for `call()` because it takes it's arguments comma separated and **A** for array and for `apply()` because it takes it's arguments as an array.

Normal invokation will always be faster to process than `call()` or `apply()`; `call()` tends to perform better under stress tests and than `apply()`, you can see those performance tests [here](https://jsperf.com/function-calls-direct-vs-apply-vs-call-vs-bind/6).

### Binding

Now let's say instead of giving a function a new context (`this`) and invoking it, you need to only give the function a new context and call it later. This is the use case for `function.bind()`.

```js
const titleCreator = createElement.bind({ elementName: "h1" });

titleCreator("Hello");
// <h1>Hello</h1>
```

Here our `titleCreator` is now bound to that new version of `this`, so every time we call it, we have that same `elementName`.

---

One great reference I come across a lot on this topic is [_Understanding This, Bind, Call, and Apply in JavaScript_](https://www.taniarascia.com/this-bind-call-apply-javascript/) from Tania Rascia. It goes more in-depth into understand `this` and how it applies to all these other methods.


Call vs Apply


I prefer `useReducer` to `useState` when I'm using React, it gives us a declarative (and as you'll see, strongly typed) way of defining our next state after an update. With `useReducer()` we have a tuple of state and how to update that state, the dispatch:

```ts
const [state, dispatch] = React.useReducer(reducer, initialState);
```

We have two concepts here: the **state**, a snapshot of what should be rendering inside your component and the **dispatch**, a way of describing how to update that state.

If you create a reducer function, you're going to need to create a pure function, meaning there's a single input and derived output, that returns your next state. When you add type annotations for your state object that's pretty clear most of the time, it's what you want the out to be each time:

```ts
interface IState {
  someKey: string;
}

function reducer(state: IState, action): IState {
  // return some state that satisfies that interface
  return { someKey: "..." };
}
```

Now there's some type safety, our compiler will warn when you're not returning that value that's an object that matches that interface. But adding type annotations to the second parameter `action` can get a little wild. Action is what we pass to the dispatch to update the state.

```ts
dispatch("foo");

// Then when the reducer is called
reducer(currentState, "foo");
```

You can pass anything, the pattern I've most often used is a switch statement and passing a `{ type: 'ActionName' }`. When we create our reducer function we can call it a `React.Reducer`:

```tsx
const reducer: React.Reducer<State, Action> = () => {};
```

We can pass generics to the reducer to describe the state and action.

```tsx
interface IState {
  someKey: string;
}

interface IAction {
  type: string;
  payload?: any;
}

type MyReducer = React.Reducer<IState, IAction>;
```

### Pitfalls of Typing Dispatch Functions

This tells us that when we call `dispatch()` we're expecting to call it like this:

```ts
// Both satisfy IAction for the compiler
dispatch({ type: "ActionOne", payload: [] }); // ✅
dispatch({ type: "ActionTwo" }); // ✅
```

Now this presents an issue, our payload might be undefined, or we might pass it into an action that doesn't need it, say our reducer looks like this:

```ts
interface IState {
  items: any[];
  loading: boolean;
}

interface IAction {
  type: string;
  payload?: any[];
}

const reducer: React.Reducer<IState, IAction> = (state, action) => {
  switch (action.type) {
    case "FETCHING": {
      return { ...state, loading: true };
    }
    case "ADD_ITEMS": {
      return { items: [...state.items, ...action.payload], loading: false };
    }
    default: {
      throw new Error("Must specify action type");
    }
  }
};
```

We can't spread our payload if it's undefined.

### Federated Union Types

One thing I've found helps is using a federated union type. We need to change our `IAction` interface to a type.

```ts
type ActionType =
  | {
      type: "FETCHING";
    }
  | {
      type: "ADD_ITEMS";
      payload: any[];
    };

const reducer: React.Reducer<IState, ActionType> = () => {};
```

In that switch statement we don't get an error, we know when we call `dispatch()` with the type `"ADD_ITEMS"` we're expecting the payload to exist and be the type we specified.

Now when we call dispatch:

```ts
// Both will fail during compilation
dispatch({ type: "FETCHING", payload: [] }); // ❌
dispatch({ type: "ADD_ITEMS" }); // ❌
```

There you have it we've added more type safety to our reducer and we can even do a little better.

### Enums for Action Types

It's a strong preference of mine when you're writing reducers in your application to use enums to define the action types. An enum in TypeScript is named constant, it's enumerable meaning it can be known at compile time. For our purposes it would allow us to specify a specific action type name with a specific dispatch:

```ts
enum NamedActions {
  FETCHING = "FETCHING",
  ADD_ITEMS = "ADD_ITEMS"
}

type ActionType =
  | {
      type: NamedActions.FETCHING;
    }
  | {
      type: NamedActions.ADD_ITEMS;
      payload: any[];
    };

dispatch({ type: NamedActions.FETCHING });
```

What this buys us is organization. It ensures the only thing calling `dispatch()` is coming from within our application and that it belongs to something we typed. With just simple strings, we lose that certainty.


Typed Reducer


In Javascript, there's two major data types, objects and arrays. An array is a list like structure with numeric indexes to reference the items store there and objects are more of a dictionary, with named references to find what you stored.

```ts
const arr: Array<number> = [9, 23, 17, 31];

const obj = {
  name: "Charles",
  status: false
};
```

But we can do a little bit better, you also have `Map` and `Set`. I like to think of these as super charged versions of objects and arrays respectively but they have their own special use cases.

### Maps

Maps are similar to objects except they have some nice built-in helpers to them: `.has()`, `.get()`, `.set()`, `.delete()` and `.clear()`.

```ts
const map = new Map();

map.set("a", 1);
map.set("b", 2);

const b = map.get("b"); // returns 2

map.set("b", 3); // allows us to reset a named key.
map.delete("b");

map.clear(); // removes all entries from the map
```

Maps are also iterable, so you can loop through them like an array. One of the main differences between objects and maps is that **maps respect their insertion order**.

```ts
const m = new Map<string, number>();

m.set("c", 3);
m.set("a", 1);
m.set("b", 2);

for (const [key, value] of m) {
  console.log(key, value);
}
```

As we loop through this, the order it would log these elements is "c, 3", "a, 1", "b, 2", where an object might sort the elements alphabetically, we can't rely on the order of the keys inside an object.

Look up performance in both maps and objects is constant (`O(1)`) meaning that it's "instant" look and doesn't need to traverse the whole input to find an entry. Tests show that `map.get("key")` can be [faster](https://jsperf.com/javascript-objects-vs-map-performance) than using `object["key"]`

Because a map is iterable, if you ever need to transform a map into an object or an array you can use built helpers.

```ts
const m = new Map<string, number>();

m.set("c", 3);
m.set("a", 1);
m.set("b", 2);

const arr = Array.from(m);
// [["c", 3], ["a", 1], ["b", 2]]

const obj = Object.fromEntries(m);
// { c: 3, a: 1, b: 2 }
```

### Sets

Sets are similar in that they have a nice API to add and remove and get data out of them.

```ts
const s = new Set();

s.add(4);
s.add(5);
s.has(3); // false
s.has(4); // true
```

The main difference between an array and a set is that **sets cannot have two values the same; only one occurance of a value is allowed**. Sets de-duplicate their input and like maps respect their insertion order.

```ts
const s = new Set();

s.add(4);
s.add(5);
s.add(4);
s.add(3);

s.values();
// SetIterator {4, 5, 3}
```

Even though we added `4` twice, we only have one occurence of this value. Sets are iterable too, so again, you can loop their values:

```ts
const s = new Set();

s.add(4);
s.add(5);
s.add(4);
s.add(3);

for (let item of s) {
  console.log(item);
}

// 4
// 5
// 3
```


Charlie Peters UI Engineer

About this Site

Recent Posts

Twenty Twenty

Transitions

Call vs Apply

Typed Reducer

Maps & Sets

About this Site

Recent Posts

Twenty Twenty

Transitions

Call vs Apply

Typed Reducer

Maps & Sets

Sign up for my Newsletter