
## The Big Idea

Every message is a moment of influence. Make the nudge helpful and you'll create power users and build loyalty.

## What is Nudge Theory?

Nudge Theory is a framework for guiding user behavior through subtle, persuasive techniques. It is based on the idea that people are more likely to change their behavior if they are given a choice that is easy to make.

In other words, a little proactive messaging goes a long way.

### Why Nudge Theory Matters

There's a little bit of behavioral science at play when a product uses thoughtful nudges in its onboarding. Research in behavioral economics shows that small, well-timed cues can help people adopt new habits and tools more easily. In other words, a gentle nudge at the right moment can make all the difference.

## A concrete example: Blacksmith

That's exactly what we found with [Blacksmith](https://blacksmith.sh?utm_source=tinyimprovements&utm_medium=email&utm_campaign=nudge-theory-for-guiding-user-behavior). It promised to speed up our CI workflows for less cost, something my team at [Craftwork](https://craftwork.com) would benefit from immensely.

<Image
  publicId="newsletters/nudge-theory-for-guiding-user-behavior/blacksmith-value-prop"
  alt="A screenshot of the Blacksmith's home page value prop"
/>

Our initial onboarding was smooth - the software generated a PR to swap our CI workflows onto their infrastructure. The speed boost was immediate, and life-changing for my team.

### Thoughtful Nudges in Action

What really impressed me was what happened a day later - each day, I would receive an email with a new tip, rooted in behavioral insights, to guide us step-by-step on how to get the most value from Blacksmith.

From the first message, Blacksmith gently introduced us to one feature at a time. Each day, a new tip arrived - ensuring that the game-changing features the Blacksmith team built didn't get lost in my haste to try the product out on Day 1.

<Image
  publicId="newsletters/nudge-theory-for-guiding-user-behavior/blacksmith-drip-campaign"
  alt="A screenshot of the Blacksmith's onboarding process"
  caption="Zero code-changes required? Sign me up."
/>

They could have spent a lot of time developing a slick, highly-interactive onboarding wizard -- which I almost certainly would have skipped. Instead, a slick little drip campaign offered even more value for my team.

You better believe I tried each one.

---

## Use these powers for good

- The Wikipedia entry for [Nudge Theory](https://en.wikipedia.org/wiki/Nudge_theory) is a great primer - it may sound wishy-washy, but this is real behavioral science.
- Nudge Theory is, of course, a two-sided coin - there's a great paper on [ethical concerns with nudging](https://journals.sagepub.com/doi/10.1177/10434631231155005) that is worth a read.

So, how will you turn this knowledge into action? Whether you're building a product or trying to influence people to be better neighbors, there is a whole lot of power in the way you reach people with your messaging.










The Psychology Hack Hiding in Great Products


<Aside type="note">

**Note:** This is an update to my recent post, [How to make VS Code load faster with a little bit of housekeeping](https://mikebifulco.com/posts/make-vs-code-load-faster-by-removing-extensions).
I was pretty happy with the startup speed I gained by removing a few
extensions, but VS Code still took a while to load.

</Aside>

Yesterday I stumbled on something that let me **load VS Code 775% faster** than before on my Mac laptop. Seriously. On a cold boot of VS Code, my load time went from 15 seconds to just about 2 seconds. So, how did I do it? Let's cut to the chase:

## The Solution

**If you are running Visual Studio Code on a Mac with an Apple Silicon processor (also known as an M1, M1 Pro, or M1 Max), you will get a _massive_ performance boost by installing an Apple Silicon optimized build of VS Code.**

This is because previous builds weren't natively compatible with Apple Silicon, and ran Intel code through a virtualization process that apple calls Rosetta.

The fix: **Download the [latest version of VS Code](https://code.visualstudio.com/download) for Mac, install it.** If you were previously running an Intel build, this is _all_ you need to do. That's it!

## What's going on here

In 2019, Apple released their first round of computers that run on their own processors, which they call Apple Silicon. These chips are fundamentally different from the Intel processors that Apple was using on all of their computers until recently. Apple found massive performance benefits from their migration to a new chipset, but running software on the new processor architecture requires app developers to recompile their software for the new chips.

Thankfully, engineers at Apple were smart enough to know that asking every Mac app developer in the world to recompile their apps for Apple Silicon will take a very long time. To hedge against this, they built a recompilation layer into MacOS called _Rosetta,_ which allows Intel apps to run on the new chips. Because there's essentially a thin VM layer running these apps, they are slower and less energy efficient than apps compiled specifically for Apple Silicon.

That's exactly the gain we're finding here by updating VS Code. There wasn't an Apple Silicon build available until [September of 2020](https://github.com/microsoft/vscode/issues/101662), due to VS Code's dependency on Electron to run.

If this quick fix helps you and you're like me, you likely installed Code long before September of 2020. Your install of Code would get regular updates, but you were getting Intel builds of the app. Switching to a more recently downloaded version of the app will automatically install an Apple Silicon build, and just like that, you're sorted! 🧙‍♂️

## Check to see if you're running an Intel version of VS Code

In the process of figuring all of this out, I discovered that you can actually see which apps on your machine are running Intel builds vs Apple Silicon Builds.

To check any given app, follow these steps:

1. Open **Activity Monitor** (hit command + Space, and type in "Activity monitor")
2. Right click on one of the _headings_ at the top of the table of running processes, to see a list of possible columns for the table.
3. Make sure the option called **Kind** is checked
4. You'll now see a column labeled "Kind", which will say "Apple" or "Intel"

<Image
  publicId="posts/make-vs-code-load-faster-mac-apple-silicon/kind-column"
  caption="The 'Kind' column in Activity Monitor tells you which processor architecture every app is built to run against"
  alt="Screenshot of Activity Monitor, with the 'Kind' column added"
/>

If you're running an Intel version of VS Code, you'll see something like this:

<Image
  publicId="posts/make-vs-code-load-faster-mac-apple-silicon/intel-build"
  caption="The 'Kind' column will say Intel - and I bet your load times for VS Code could be much better."
  alt="Screenshot of Activity Monitor, with the Visual Studio Code row highlighted, and the 'Kind' column showing 'Intel'"
/>

If that's the case, I have great news! You're probably going to see a massive speed boost. This is a good time to close VS Code and time how long it takes to start fresh. On my M1 Macbook Air with 16GB of ram, it took about 15s.

Now, go **Download the [latest version of VS Code](https://code.visualstudio.com/download) for Mac** and install it on your computer (Choose to "Replace" the old install if prompted).

When that's done, you should see this the next time you load VS Code:

<Image
  publicId="posts/make-vs-code-load-faster-mac-apple-silicon/apple-build"
  caption="The 'Kind' column will say Apple"
  alt="Screenshot of Activity Monitor, with the Visual Studio Code row highlighted, and the 'Kind' column showing 'Intel'"
/>

How was that load time now? For me, it was down to _about 2 seconds!_ It's not every day you get those kind of gains.

## If you found this helpful, you may want to check out:

- **[How to make VS Code load faster with a little bit of housekeeping](https://mikebifulco.com/posts/make-vs-code-load-faster-by-removing-extensions)**, my previous post on speeding up VS Code
- **[I reclaimed 10GB of disk space from `node_modules`](https://mikebifulco.com/posts/reclaimed-10gb-of-disk-space-from-node-modules)** if you also happen to use Node to write JavaScript apps.
- **[gitignore.io is great](https://mikebifulco.com/posts/gitignore-io-is-great)** for a tip on a super helpful tool for setting up `.gitignore` files on new projects.


Massively speed up VS Code loading time on Apple Silicon Macs in one step

Check to see if you're running an Intel version of VS Code

If you found this helpful, you may want to check out:


As I write this post, I'm working through taking my second course on [Buildspace](https://buildspace.so/). It's been a unique learning experience that's helped me get my hands dirty with technologies that I was only _vaguely_ familiar with before, and I really think you should consider giving it a shot.

**Buildspace offers free, online, cohort-based courses on building web3 blockchain apps. Each course starts with a live-streamed kickoff, with an instructor and cohort of learners taking the course with you. From there, you're welcome to take things at your own pace. If you complete a course within a week, you're issued a certificate in the form of an NFT which is yours forever.**

After you create an account and enroll in a course Buildspace, you'll need to do two things before the live kickoff for your particular course: connect an ethereum wallet (which is used to verify that you're completing coursework, and to issue your course certificate NFT), and link your Discord account. You'll use Discord to chat with fellow students during the course, and to ask instructors for help.

<Aside type="note">

After completing a course successfully, you'll be given _alumni_ permissions, which grants you access to a host of other channels, including channels where companies post job opportunities for web3 developers. How's that for a benefit of a free online course? 🎉

</Aside>

## Buildspace is **free**

That brings me to my next point - buildspace is _FREE_. Free, free. They even plaster it on their homepage:

<Image
  publicId="posts/learn-web3-blockchain-with-buildspace/it-is-free"
  alt="screenshot of Buildspace's price: free!"
  caption="Don't take my word for it... it's free!"
/>

## Cohort-based learning is exciting

All of Buildspace's courses are run with a learning cohort: this is a group of people who all start a given course at the _same_ time. For me, this had an incredibly energizing effect: jumping into a course livestream with dozens-to-hundreds of other people who are all excited to learn _this thing, right now_ is really magical. It got me hyped to participate, and excited about learning with other people.

You'll find yourself chatting with classmates in Discord to help them along, or debug problems that you're having in real time. This is truly something special, particularly for courses like this which are really more-than-a-little-technical. I feel at least somewhat qualified to weigh in on this experience, too - I spent 7 years working as technical director for [Gymnasium](https://thegymnasium.com/), another free, online code school which offers fully self-paced courses for creatives who want to learn to build for the web.

There are also regular _coworking_ sessions, which work a whole lot like the live kickoff - at a scheduled time, you'll hop onto Discord and join a room with a group of people who are progressing through the course you're working on. You can chat with each other in there, or use the time as quiet, dedicated studying time - whatever works best for you.

<Image
  publicId="posts/learn-web3-blockchain-with-buildspace/just-a-few-steps"
  alt="Screenshot of buildspace's coworking directions"
  caption="The landing page for Buildspace's courseware."
/>

## What have I built?

Like I mentioned above, I'm currently working through my second course.

The first course I took was called **Build a Web3 App with Solidity + Ethereum Smart Contracts.** In this course, I learned about developing apps for the Ethereum blockchain using a library called Solidity. From start to finish, the course took me about 5 hours of dedicated effort (your results will definitely vary based on your experience with related tools and technology). I learned how to bootstrap a blockchain app, and the general loop of the blockchain development experience, including deploying my app to a test network. The course encourages you to explore and get creative along the way, so I ended up adding some functionality to my blockchain app here and there to get a little more experience with Solidity.

For completing this course within a week, I earned a certificate. My certificate lives on the blockchain, of course, by way of an NFT... this is honestly the first _compelling_ use of NFTs I've seen anywhere. What does it look like? Here you go:

<Image
  publicId="posts/learn-web3-blockchain-with-buildspace/course-cert-nft"
  alt="Screencap of my course certificate NFT on Opensea.io"
  caption="The certificate lives on the blockchain, where information about me copleting the course will securely remain. This is what it looks like on Opensea's viewer."
/>

I'm currently working through a course called **Mint your own NFT collection and ship a Web3 app to show them off** - just like it says on the tin, the idea here is to learn about building apps that produce NFTs. I'm about 25% of the way through this course, and expect to finish it this week.

## Is this for everyone?

Well, no, not really - but that's okay! These are fairly involved techncial courses, and they do require a bit of previous experience building software. You'll be most comfortable if you've built things for the web before using JavaScript, Node, React, etc. If those aren't your jam, I'd imagine even PHP, Python, and Ruby devs will have a reasonably easy time with this stuff &mdash; and maybe even mobile developers, too. If you're _brand new_ to building software, you might find some of the tools and topics extremely challenging. There's a risk that you might be discouraged given an experience like that. For that reason, I'd suggest taking some basic intro courses to building with HTML,CSS, and JavaScript, and maybe dipping a toe into the world of making apps with React first.

You may also have some real hesitations about the climate impact of blockchain technologies. I absolutely do - my guidance here is to do what you feel is right. I'm a strong proponent of learning new tech, even with climate worries. It's clear to methat this stuff is here to stay in some form or another, and the more climate-aware devs we have thinking about the blockchain, the better chance we have of creating innovations in crypto that aren't going to cook the planet.

## Why should you do it?

While I'll admit that I'm still _fully_ unconvinced of the value of creating and selling shiny jpegs on the blockchain, I _do_ think there's serious value in understanding how the blockchain works, and getting to know what the heck is going on in the world of cryptocurrency. There's massive amounts of the world economy moving through currencies on various blockchains right now, and any amount of literacy you can build for this world _will_ benefit you.

I also think it's a critically important skill to be able to learn new things regularly. It keeps your mind sharp, and can help you find new career opportunities in some very in-demand jobs. I'm also on a career path where part of my job is teaching people how to build things for a living. Everyone has a slightly different learning style, and I've found that cohort-based courses are a really great way for me to get some intense, quick learning done. I enjoy the camaraderie that is built into the live-kickoff and cohort-based course experience, and I really love helping other people pick up new skills.

<Aside type="note">

**If you're on the fence, here's the thing: go try it. Take a course!**

</Aside>

Courses on [Buildspace](https://buildspace.so/) are literally free - there's no cost to you to give it a shot, and you may learn a thing or two along the way. The team behind Buildspace are energetic, positive, and uplifting, and I've genuinely enjoyed learning from them, and watching them build their school out in the open.

I'm excited to finish this course, and will certainly be keeping an eye out for more in the future.


Learn to build web3 apps on the blockchain with Buildspace


Recently, I've been getting back into live coding on the weekend. I didn't realize how much I missed it.

I worked as Technical Director for an online code school (aka'd as a MOOC, for Massively Online Open Course) called thegymnasium.com from 2014-2020, and during that time, I did a weekly livestream of my work on twitch [twitch.tv/irreverentmike](https://www.twitch.tv/irreverentmike) just about every week for 2-4 hours. It's something I was able to do because everything Gymnasium does is Open Source - you can peruse the source code that powers [Gymnasium on Github](https://github.com/gymnasium).

<Image
  publicId="posts/twitch-streaming-software-development-lessons/livestreaming"
  alt="Screenshot of a livestream - VS Code window open with an overlay of me on camera in the upper right"
  caption="Writing up a GitHub Issue on a recent livestream"
/>

My intention with the livestream was to share my Open Source work on Gymnasium with the world - the easy parts, the hard parts, and everything in between. Depending on the week, I'd be working in VS Code, updating the Python code that Gymnasium ran on, or building front-end components in [React](https://mikebifulco.com/tags/react), or working in Sketch on designs with our extremely talented designer.

It was a fantastic experience, and a great way to connect with Gymnasium's growing audience of thousands of learners around the world. Importantly, it was also a growth opportunity for me - streaming to a live audience gave me an opportunity to connect with and help people from all over. I got to explain complex development topics to learners in simple terms, and let them see what it's _really_ like for a professional developer to break things in real time.

## Lessons learned from live coding

Over the years, I started to notice some of the benefits that my stream provided that aren't obvious at first blush:

1. **Sharing bumps and bruises is a superpower** - Traditional online tutorials often only show the happy path for developers using a tool or implementing a new feature. This leaves students at a significant disadvantage if they have to figure out how to debug something. In live coding, I was _breaking things_ left-and-right, while forcing myself to talk through my debug process, with all my bumps and bruises shown to the world. Time and time again I got feedback from my audience that this was the most valuable part of watching me - seeing how to research/recover/resolve when things go wrong. It's a hard skill to learn on your own, and it's honestly easy to forget that I have years and years of experience un-breaking my own code in various capacities.
2. **Explaining yourself has reflective benefits** - Slowing down and explaining what I was doing and why will really changed the way I work. For me, it caused me to think more deliberately through solutions, and often helped me land the foresight to deploy a better solution more quickly. It's a bit like the benefits of Paired Programming - explaining what you're doing to _someone_ else means that you have to speak your intentions aloud. More often than not, that ends up being a great way to hear yourself explaining flawed ideas. You should give it a shot sometime.
3. **You'll call out your own faults** - This process of slowing down also helped me document my work more thoroughly - when I found myself spending lots of time explaining a complicated solution, workarounds, or strange tricks I'd used, it was a good indicator that the _thing_ I was working on should either (a) have numerous comments in my code to explain the madness within, or (b) that it should be marked as something to later revisit, with occam's razor.

<br />

## So yeah, I'm back at it again...

I recently started streaming again on the weekends - this time it's not the work I'm doing in my day-to-day at Google, but instead my personal projects which are all OSS. It's a great way to get back into coding for enjoyment, and to force myself to deliver results... I can crank out 2-3 hours of really good work when I'm on stream without getting (too) distracted. If you want to catch some of that, you can find me on twitch at https://www.twitch.tv/irreverentmike


Some things I learned from live coding on Twitch


## What does the Nullish Coalescing (`??`) operator do in JavaScript?

JavaScript's Nullish Coalescing operator is two question mark characters next to one another (`??`). It takes a left-hand and right-hand operand, returning the right value _if_ the left is `null` or `undefined`. Otherwise, it returns the left value.

```js
let x;

x = 1 ?? 100; // 1
x = null ?? 100; // 100
x = undefined ?? 100; // 100

x = 'Peas' ?? 'Carrots'; // Peas
x = null ?? 'Carrots'; // Carrots
x = undefined ?? 'Carrots'; // Carrots
```

Note that unlike [using Boolean on array.filter()](https://mikebifulco.com/posts/javascript-filter-boolean), there _aren't_ special cases to consider here for _truthy_ or _falsy_ values in Javascript. Nullish Coalescing _only_ returns the right value for `Null` and `undefined`, and not for `false` and some other cases, like:

```js
let y;

y = -1 ?? 2; // -1
y = false ?? 2; // false

y = true ?? 2; // true
y = NaN ?? 2; // NaN
y = Infinity ?? 2; // Infinity
y = -Infinity ?? 2; // -Infinity

y = new Date() ?? 'soon'; // [the date object created by new Date()]
```

## Use Nullish Coalescing in React Components

This can be used to simplify what has become a fairly common pattern in React components - checking whether a value is present before rendering it, and providing a fallback if not:

```jsx
// use a ternary operator
const LetterIntro = ({ name }) => {
  return <div>Hi {name ? name : 'there'},</div>;
};

const BetterLetterIntro = ({ name }) => {
  return <div>Hi {name ?? 'there'}</div>;
};
```

Both of these are _valid_ syntax, but you might argue that the latter is easier to read, so long as you understand what the `??` operator is doing.

## Make sure to check compatibility on your project

Nullish coalescing is quickly becoming available for use in browsers and JavaScript / Node / Deno, but you should make sure that the project you're working on is using a compatible version of the language before you start to add `??` to all your code.

## Compatibility with Node and Deno

To ensure compatibility with Node, your project must be using **Node version 14.0.0** or later.

To ensure compatibility with Deno, you rproject must be using **Deno version 1.0.0** or later.

## Compatibility with modern browsers

Another thing to condier - as of the writing of this article, Nullish Coalescing isn't available in every web browser quite yet - Internet Explorer and Opera for Android are the two remaining holdouts. I'll leave it to you to decide whether or not that's a showstopper for you - and I don't know if I'd expect to see support in IE _ever_ given its [end-of-life](https://docs.microsoft.com/en-us/lifecycle/announcements/internet-explorer-11-end-of-support) announcement in mid 2021.

<picture>
  <source
    type="image/webp"
    srcSet="https://caniuse.bitsofco.de/static/v1/mdn-javascript__operators__nullish_coalescing-1636908973156.webp"
  />
  <source
    type="image/png"
    srcSet="https://caniuse.bitsofco.de/static/v1/mdn-javascript__operators__nullish_coalescing-1636908973156.png"
  />
  <img
    src="https://caniuse.bitsofco.de/static/v1/mdn-javascript__operators__nullish_coalescing-1636908973156.jpg"
    alt="Data on support for the mdn-javascript__operators__nullish_coalescing feature across the major browsers from caniuse.com"
  />
</picture>

## More on Nullish Coalescing

My pal Alexander Karan put together a similar tutorial about [The Nullish Coalescing Operator](https://blog.alexanderkaran.com/nullish-coalescing-operator) on his site. It's worth a read - he's a one heck of a smart developer.

## Additional Reading

If you found this useful, you might also want to check out these other articles:

- [Using array.filter(Boolean)](https://mikebifulco.com/posts/javascript-filter-boolean)
- A primer on [deconstructructing objects in JavaScript](https://mikebifulco.com/posts/deconfusing-javascript-destructuring-syntax)
- [Understanding import syntax in Node](https://mikebifulco.com/posts/picking-apart-javascript-import)


JavaScript Tips: Nullish Coalescing (??)

What does the Nullish Coalescing (`??`) operator do in JavaScript?

Use Nullish Coalescing in React Components

Make sure to check compatibility on your project


## What does .filter(Boolean) do on Arrays?

This is a pattern I've been coming across quite a bit lately in JavaScript code, and can be extremely helpful once you understand what's going on. In short, it's a bit of [functional programming](https://mikebifulco.com/tags/functional-programming) which is used to remove `null` and `undefined` values from an array.

```js
const values = [1, 2, 3, 4, null, 5, 6, 7, undefined];

console.log(values.length);
// Output: 9

console.log(values.filter(Boolean).length);
// Output: 7

// note that this does not mutate the value original array
console.log(values.length);
// Output: 9
```

## How does the Boolean part of .filter(Boolean) work?

We're using a function built into arrays in JavaScript, called [Array.prototype.filter](https://developer.mozilla.org/en-US/docs/web/javascript/reference/global_objects/array/filter), which _creates a new array_ containing all elements that pass the check within the function it takes as an argument. In this case, we're using the JavaScript `Boolean` object wrapper's constructor as that testing function.

`Boolean` is a helper class in JavaScript which can be used to test whether a given value or expression evaluates to `true` or `false`. There's a subtle, but **really important point** here - `Boolean()` follows the JavaScript rules of _truthiness_. That means that the output `Boolean()` might not always be what you imagine.

In this context, passing `Boolean` to `.filter` is effectively shorthand for doing this:

```js
array.filter((item) => {
  return Boolean(item);
});
```

which is also approximately the same as

```js
array.filter((item) => {
  return !!item; // evaluate whether item is truthy
});
```

or, simplified

```js
array.filter((item) => !!item);
```

I suspect that you may have seen at least one of these variations before. In the end, `array.filter(Boolean)` is just shorthand for any of the other options above. It's the kind of thing that can cause even seasoned programmers to recoil in horror the first time they see it. Near as I can tell, though, it's a perfectly fine replacement.

### Examples of Boolean evaluating for _truthiness_

```js
// straightforward boolean
Boolean(true); // true
Boolean(false); // false

// null/undefined
Boolean(null); // false
Boolean(undefined); // false

// hmm...
Boolean(NaN); // false
Boolean(0); // false
Boolean(-0); // false
Boolean(-1); // true

// empty strings vs blank strings
Boolean(''); // false
Boolean(' '); // true

// empty objects
Boolean([]); // true
Boolean({}); // true

// Date is just an object
Boolean(new Date()); // true

// oh god
Boolean('false'); // true
Boolean('Or any string, really'); // true
Boolean('The blog of Mike Bifulco'); // true
```

## Warning: Be careful with the truth(y)

So - `someArray.filter(Boolean)` is really helpful for removing `null` and `undefined` values, but it's important to bear in mind that there are quite a few confusing cases above... this trick will remove items with a value of `0` from your array! That can be a significant difference for interfaces where displaying a `0` is perfectly fine.

**EDIT: ** Hi, Mike from The Future™️ here - I've edited the next paragraph to reflect the _actual_ truth... I had confused `-1` with `false` from my days as a BASIC programmer, where we'd sometimes create infinite loops with `while (-1)`... but even that means "while `true`"!

I also want to call some attention to cases that evaluate to `-1`. <s>for _many_ programmers, `-1` is synonymous with `false`, because that is _absolutely_ the case in many langauges... but not here.</s> The `-1` case can also be unintuitive if you're not expecting it, but true to form, in JavaScript, `-1` is a truthy value!

## Array.filter(Boolean) For React Developers

I tend to come across this pattern being used fairly often for iterating over collections in React, to clean up an input array which may have had results removed from it upstream for some reason. This protects you from scary errors like `Can't read property foo of undefined` or `Can't read property bar of null`:

```jsx

const people = [
  {
    name: 'Mike Bifulco',
    email: 'hello@mikebifulco.com',
  },
  null,
  null,
  null,
  {
    name: "Jimi Hendrix",
    email: 'jimi@heyjimihimi@guitarsolo',
  }
]

// display a list of people
const PeopleList = ({people}) => {
  return (
    <ul>
      {people.map(person) => {
        // this will crash if there's a null/undefined in the list!
        return (
          <li>{person.name}: {person.email}</li>
        );
      }}
    </ul>
  );
}

// a safer implementation
const SaferPeopleList = ({people}) => {
  return (
    <ul>
      {people
        .filter(Boolean) // this _one weird trick!_
        .map(person) => {
          return (
            <li>{person.name}: {person.email}</li>
          );
        }
      }
    </ul>
  );
}
```

## Functional Programming reminder

Like I mentioned above, this is a handy bit of functional programming -- as is the case with nearly all clever bits of functional programming, it's important to remember that we're not _mutating_ any arrays here - we are creating new ones. Let's show what that means in a quick example:

```js
const myPets = [
  'Leo',
  'Hamilton',
  null,
  'Jet',
  'Pepper',
  'Otis',
  undefined,
  'Iona',
];

console.log(myPets.length); // 8

myPets
  .filter(Boolean) // filter null and undefined
  .forEach((pet) => {
    console.log(pet); // prints all pet names once, no null or undefined present
  });

console.log(myPets.length); // still 8! filter _does not mutate the original array_
```

## Wrapping up

Hopefully this has helped to demystify this little code pattern a bit. What do you think? Is this something you'll use in your projects? Are there dangers/tricks/cases I didn't consider here?

Tell me all about it on twitter <a href="https://twitter.com/irreverentmike">@irreverentmike</a>. Thanks for reading!

_note: Cover photo for this article is from <a href="https://unsplash.com/@pawel_czerwinski?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Pawel Czerwinski</a> on <a href="https://unsplash.com/s/photos/array?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_


JavaScript Tips: Using Array.filter(Boolean)

How does the Boolean part of .filter(Boolean) work?

Examples of Boolean evaluating for _truthiness_

Array.filter(Boolean) For React Developers


<Aside type="info">

**🚨Update: 11-24-2021🚨**

If you're looking to speed up VS Code and you're _also_ using a Mac with an Apple Silicon Chip (an M1, M1 Pro, or M1 Max), you should read this article first: **[Massively speed up VS Code loading time on Apple Silicon Macs in one step](https://mikebifulco.com/posts/make-vs-code-load-faster-mac-apple-silicon).**

The tips in this article are still perfectly valid, but you'll see much, much better gains from the new tip. Come back here after you've done that.

</Aside>

If you're a user of Visual Studio Code, you may find that over time it feels like new IDE windows are slow to load. In my experience, loading an environment from a cold start (firing up VS Code when it isn't running at all), or opening a window for a new project (`File >> New Window`) when Code is already running tend to take about the same amount of time.

This is notably different from opening a new tab within the IDE - again, in my experience, once Code is up and running, new tabs take almost no time to fire up.

## Why is it slow?

In its most basic form VS Code is fairly performant - a fresh install of the IDE opens very quickly. Over time, if you're anything like me, you've probably installed any number of community-built [extensions from the VS Code Marketplace](https://marketplace.visualstudio.com/VSCode)

## The Solution

Well, the good news is that this one is exactly as easy as it sounds - you can gain quite a bit of startup performance by **removing unused and unnecessary extensions from VS Code**, by opening your Extensions pane (`Shift + command + X` on a mac, likely `control + shift + X` on Windows/Linux), and typing `@installed` into the search bar at the top of the list to see which extensions are currently installed. In my case, it looks like this:

<Image
  publicId="posts/make-vs-code-load-faster-by-removing-extensions/vscode-extensions-pane"
  alt="VS Code Extensions pane highlighted in red"
  caption="My installed extensions pane, highlighted in red"
/>

Extensions with particularly long load times will have their "Activation Time" highlighted in this list. It's currently shown in the upper-right corner of the extension list item with a load time in milliseconds listed next to it:

<Image
  publicId="posts/make-vs-code-load-faster-by-removing-extensions/extension-load-time"
  alt="VS Code Extensions pane highlighted in red"
  caption="My installed extensions pane, highlighted in red"
/>

## How to remove extensions with long activation times from Visual Studio Code

1. Scan through your list of installed extensions, and remove any you don't use
2. If there are remaining extensions which have high activation times listed, consider whether there's better options available (and install those!)
3. If there aren't better options available, you'll either need to live with the load time for a given extension, or choose to bid it farewell. Worth noting here: these extensions are (generally) open-source, so you may want to visit the repo for that extension and [search for "activation time"](https://github.com/prettier/prettier-vscode/issues?q=activation+time) to see if anyone else is running into the same problem. If not, you might want to open an issue and let the maintainers of that extension know you're having trouble, or open a PR if you have a solution to offer up.

...and that should do ya! If you're still running into performance issues after this, it could be any number of things. Are you running out of disk space on your computer? Maybe you're running out of available RAM? Are you running other applications that slow your machine down?

Additionally, if you're a JavaScript or Node app developer, you may want to check out my article on [Reclaiming Disk Space from `node_modules`](https://mikebifulco.com/posts/reclaimed-10gb-of-disk-space-from-node-modules).

I hope this helps! Feel free to share it with a friend if you found it useful.

This post was inspired by a tweet I let fly recently after playing with load times in [Visual Studio Code](https://code.visualstudio.com/):

<Tweet
  tweetLink="https://twitter.com/irreverentmike/status/1454054616027574283"
  align="center"
/>

_note: Cover photo for this article is from by <a href="https://unsplash.com/@loic?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Djim Loic</a> on <a href="https://unsplash.com/s/photos/time?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>._


How to make VS Code load faster with a little bit of housekeeping

How to remove extensions with long activation times from Visual Studio Code


import CenteredTextDemo from '../../components/demos/CenteredTextDemo';

<Aside type="note">

This is an experimental post, meant to demonstrate to you the topic we're discussing. I'd love to hear what you think about it. [Drop me a line](https://twitter.com/irreverentmike) if you find this compelling - I'm hoping to create more like it!

</Aside>

<CenteredTextDemo>

This is -- without exception -- my biggest design-related pet peeve. You've probably come across it yourself from time to time, and if you're lucky, it's not something you noticed. Centering text on a web site, email, or flyer is an easy way to make it appear like a designer's spin has been put on a document. It's an easy change to make in most editors, and in many cases it's probably done without a second thought.

I'll cut to the chase: _center-aligning text is really bad_ in most cases. From a young age, we're trained to read text by starting at the beginning of the line and moving our eyes across the page to the end of the line. From there, it's a relatively low-effort thing to move your eyes back to the beginning of the next line. That all changes when text is centered, since the start of each line is aligned inconsistently. It takes more effort to find the beginning of the next line, to make sure you've only moved down _one_ line, and to continue reading.

## Three great reasons you shouldn't center-align text:

1. A ragged leading-edge makes it harder to move your eyes to the next line of text
2. People with dyslexia may find centered text challenging to read.
3. Lists (like this one) become disorienting to read, and harder to scan

The British Dyslexia Association provides a <a href="https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide" target="_blank">dyslexia-friendly style guide</a>, which calls out a simple rule for text:

<Aside type="note">Left align text, without justification.</Aside>

As a designer, this is _such_ an easy win. As a developer, it's often as easy as:

```css
/* change this */
.some-style-rule {
  text-align: center;
}

/* ...to this! */
.some-style-rule {
  text-align: initial;
}
```

## When you _can_ use centered-text

Generally speaking, if you're certain that your text will fit on _one line,_ it may be okay to center it. This generally applies to page titles, captions on pictures, and things of that nature. Even then, generally speaking my guidance is to avoid it. Like many other things in design, if there's not a good reason _to_ do it... you're better without.

## Summary

If you're working on a design that relies on centered text, consider other options. If you come across a big blob of centered text in your workplace, or out in the world somewhere, please feel free to use this post as a demo.

</CenteredTextDemo>


Don't center align paragraph text

Three great reasons you shouldn't center-align text:


I recently finished reading _Working in Public: The Making and Maintenance of Open Source Software_ by [Nadia Eghbal](https://nadiaeghbal.com/), thanks to a book club organized by [Chris Traganos](https://twitter.com/chris_trag) at [Stripe](https://press.stripe.com/). While I can't say this is a book I would have found my way to own my own, I found myself tearing through it far more quickly than I would have guessed. I'd fully recommend giving it a read - you can pick it up on [Amazon](https://smile.amazon.com/Working-Public-Making-Maintenance-Software/dp/0578675862).

Below is a pretty raw copy/paste of my notes on _Working in Public_, which I take in Roam Research as I read. If you'd like to discuss any of this with me, drop me a line on [twitter @irreverentmike](https://twitter.com/irreverentmike).

**Notes on _Working in Public_**

# Part 1

## Chapter 2: The Structure of an Open Source Project

- &#8203;
  <Highlight>
    Developers don't contribute to open source for lack of technical ability,
    but rather due to fear of committing a faux pas
  </Highlight>
  - There's a huge hurdle to get over here, particularly for new contributors.
  Even sending a very small PR or opening an issue has a mental tax associated
  with it that can prevent progress, community from being built
- &#8203;

  <Highlight>
    The process of getting a change approved depends, among other things, on the
    **complexity** of the change (and the complexity of the project), as well as
    one's **reputation** among those with the ability to approve the change.
  </Highlight>
  - Reputation is a tricky currency, particularly when some folks build clout by
  being funny / sarcastic to gain viral notoriety. This doesn't necessarily
  equate to value to the community or trustworthiness, but often can be parlayed
  into exactly that.

- &#8203;

  <Highlight>
    If a project's contributor base is growing rapidly, and there is enough work
    to hand off, maintainers may start to distribute work more widely. In a
    **distributed** state, maintainers actively recruit more contributors to
    pitch in, with the goal of retaining them in the project.
  </Highlight>
  - At some point, the success of a project causes a requirement for a shift in
  operations - from building the thing to **supporting** it, and recruiting
  community members to help get things done on either end of that. Teams'
  ability to make that pivot is critical to success.

- &#8203;

  <Highlight>Healthy open source (re: node.js contribution policy)</Highlight>-
  Design a contribution policy and code of conduct which entices contributors
  **and** retains them. Based on my experience, this is the magic in getting
  something over the hump from being fledgling to more broadly successful.

## Chapter 3: Roles, incentives, and relationships

- Open source developers were frequently characterized as "hobby" devlopers
  - Hm! TIL.
- A theory of the commons
  - In the last half of the 1900s, economist Elinor Ostrom came up with an 8-part theory to what makes up a successful "Commons", or resource that is owned, used, and managed by a community. These rules outline the basic tenets of what makes a successful commons, and apply directly to successful OSS in many ways.
  - Making sure members are biased toward **working together** is a key to success. This may mean distributing knowledge and capability so that everyone has value and meaning, and no one person can hold up the process. Obviously encouraging collaboration is a valuable outcome here, too - so empowering folks to use each other as a resource is extremely helpful.
- <Highlight>
    Intrinsic motivation makes it easier for people to self-organize to achieve
    the same outcome.
  </Highlight>

- The newcomer effect
  - <Highlight>
      "Because newcomers have not yet developed commitment to the group and have
      not yet learned how the group operates, it is rational for established
      group members to distrust them"
    </Highlight>
  - This happens all the time in OSS - many projects have core maintainers who
    do all the work, and a significant amount of gatekeeping by way of bluntly shutting
    down PRs or issues when they're disinterested in them. It's fair to say that
    for the contributors getting shut down, a steady and consistent participation
    in the project will help them get notice, but it can feel like an unfair hurdle,
    too. What might be a more equitable solution to this? Not empowering code owners
    as much? Adding an objective, third party moderator to make some decisions?
- All Contributors
  - https://allcontributors.org/
  - Recognize All Contributors Including those that don't push code
- On Contributors...
  - Again, I'm reminded of the madness of Hacktoberfest 2020 - lots of garbage contributions from people just trying to get a free t-shirt does not make for good OSS, good community, or good contributions.
  - &#8203;<Highlight>Bus Factor</Highlight> is the number of contributors in a project
    who would need to be hit by a bus for it to be in jeopardy. lol

# Part 2: How People Maintain

## Chapter 4: The Work Required by Software

- Software, once written is never really finished. Chasing the feeling of a "finished" app/program/site is something that took me FOREVER to get over. I never felt like I had done anything, because nothing ever got to the finish line. It turns out that the finish line doesn't exist, and a decade+ of building "incomplete" things was the catalyst that I needed to figure that out. As such, <Highlight>greenfield</Highlight> projects are "coveted" because they're a blank canvas, enabling us to chase that feeling of a fresh _starting line_ to point us to a goal that is always just past the horizon. It's a feeling of hope - and thankfully a beneficial one, as rebuilding software from scratch is often inherently beneficial. Neat.
- <Highlight>Free as in speech, not as in beer</Highlight> vs
  <Highlight>free as in puppy</Highlight> is a brilliant analogy
- <Highlight>
    By focusing too much on iterating upon their incumbent product, companies
    risk missing major opportunities for so-called "disruptive innovation,"
    which eventually replaces existing products. - Clayton Christensen in Book:
    The Innovator's Dilemma
  </Highlight>

- The anecdote about Sophie Alpert being offered $600 to **open a PR on someone's project** because it would draw positive attention is mind-blowing.
  - "Is this what it feels like to be an influencer?" - Sophie
- <Highlight>
    We can think of a creator's reputation as a "battery," or store of value,
    for attention. More followers mean more attention in the bank, but when
    people follow a creator they do so because they expect to receive more
    content. If creators don't produce anything new, their followers will
    eventually get bored and leave. Reputation, like software, requires
    maintenance over time.
  </Highlight>

## Chapter 5: Managing the Costs of Production

- Absolutely mind-blowing that at one point, cryptographic code was treated the same as munitions by the US government. Early developers of OpenSSL <Highlight>had to become licensed arms dealers to be able to write and "export" (i.e., distribute) their code.</Highlight>
  - This is an implicit declaration that certain types of technical solutions can be weaponized, and perhaps just as importantly that sometime in the past, some of our legislators had a reasonable understanding of this. In the US, at least, it's apparent that this is no longer the case. Don't believe me? Pull up a congressional hearing with Tim Cook, Zuckerberg, etc
  - Relatedly, it is asymptotically difficult for lawmakers to keep up with the changing pace of technology. There's a decent argument to be made for a citizen-run, or commons-run governing body for technical regulation, rather that trusting some crusty old white men from flyover states whose pre-government professional lives weren't the least bit technical.
- <Highlight>
    When software is in static state, **what if there is no free-rider
    problem?** When code is non-rivalrous, it only has first-copy costs, which
    the creator is intrinsically motivated to provide -- so the problem doesn't
    seem to lie in how many people **consume** it. For this reason, I'm
    skeptical of attempts to charge for access to information, whether it's
    newspaper articles or open source software.
  </Highlight>

- This hints at one of the most fascinating things about content creators online. Virtually all of the really, truly successful creators are driven by an enjoyment of creating and sharing -- and might not typically start creating as a business. Often times it takes hundreds of youtube videos, or dozens of podcast episodes, blog posts, etc to get any kind of sizeable following. It's those with the fortitude and perseverance to continue without an audience that find success. Perhaps the audience is their reward, or perhaps the audience is a natural byproduct of the law of large numbers: create enough of something, and put it out into the world, and **some size** of audience will find you.
- <Highlight>
    At a high level, it's also possible that throwing away projects and starting
    fresh is the most cos-effective approach: rebuilding the whole system, piece
    by piece.
  </Highlight>

- There are many companies that operate like this - occasionally dropping an existing product for a **completely new** rewrite. This has been done with projects as small as weather apps and as large as Windows and MacOS, and is often a good decision. It strikes me that this is often only possible due to a luxury of funding, time, and resources. Imagine telling a scrappy startup that their best bet is to ditch their entire source library, and start anew. It wouldn't work! Many fledgling companies fall apart because of early and inflexible assumptions made, or technical debt built up to save time. The luckiest of them find success despite this debt, and carry on to be successful. I'd imagine this success often brings about an effort to rebuild the plane while it's flying, in a modern Ship of Theseus paradox.
- Automation! This section rang true with me to the core. When building [smpl](https://www.crunchbase.com/organization/smpl-llc), our biggest superpower was automation. It made our engineering team of 2 feel much larger than it was, and helped us to execute successfully and dependably. To this day I think that process automation is the closest thing I have to a superpower.
- It's interesting that a book about OSS has me thinking about work, content, and contributions outside of software so often. So much of what's discussed here has interesting implications politically, socially, and in content creation of any sort for public consumption (art, blogs, youtube, instagram, etc)
- I didn't know about [dear-github](https://github.com/dear-github/dear-github) or its relatives [dear-github2](https://github.com/drop-ice/dear-github-2.0) and [isaacs/github](https://github.com/isaacs/github). It'll be interesting to give these a read. As of this writing, `dear-github2` has had activity as recently as 2 weeks ago

### The role of Money in OSS

- Companies pay for access, attention, and feature proposals. This can often have adverse effects: companies are essentially skipping the line to pay for attention, and as a result aren't vetted by the same processes as other OSS Contributors (particularly those who request fixes and features). This can be a governance nightmare, and can cause mistrust in a project if done incorrectly.
- Advertising in OSS projects has real untapped potential, but often gets shot down. There was a product called Code Fund by Eric Berry which aimed to put ads into the readmes of OSS repos on github. It rose to $24k/mo revenue in 4 months before GitHub shut it down as a violation of their ToS.
- Trivago appears as a sponsor on Webpack, and this has helped them to recruit JavaScript developers, who see them as a good company to work for as a result of their support.
- An interesting difference in funding projects comes by way of GitHub's sponsors feature (and other services like Pateron), whose goals are more oriented towards having individuals back a **contributor** (rather than a project) on a monthly basis. The subscription is seen as a vote of confidence in the person, rather than slippery backing for a single project.


Book notes: Working In Public

Chapter 2: The Structure of an Open Source Project

Chapter 3: Roles, incentives, and relationships

Chapter 5: Managing the Costs of Production


## Earlier today, we had a problem at [Gymnasium](https://thegymnasium.com).

We released a [new 5 minute tutorial on Making Headings and Lists more Accessible](https://thegymnasium.com/courses/take5/making-headings-and-lists-more-accessible) - which is great news! If you build things for the web, and you've got 5 minutes to spare in your day (you do), you should give it a look.

After the course was made public, our marketing wizard did her magic and started posting to our various social media pages: [Facebook](https://www.facebook.com/aquentgymnasium), [Twitter](https://twitter.com/AquentGymnasium), and [LinkedIn](https://www.linkedin.com/school/gymnasium/).

It was immediately apparent that something was off. During our course release process, we missed the fact that Open Graph metadata for that course page wasn't correctly included. Unfortunately, that meant that _none_ of our posts on social media had the beautiful image previews that we'd expect to see (and by extension would likely see far less engagement).

<Aside>
  <em>Open Graph</em> metadata tells other services what kind of information is
  shown when a URL loads, so that they can create a preview of the URL that
  makes sense. Read more at{' '}
  <a href="https://ogp.me" target="_blank" rel="noopener noreferrer">
    ogp.me
  </a>
  .
</Aside>

Fast forward a short while, and we updated our CMS with the necessary metadata for Open Graph Shares to work correctly. Newly shared links in our team Slack now looked great!

<Image
  publicId="posts/open-graph-cache-reset/slack-after"
  alt="screenshot of a post in slack"
  caption="Screenshot from slack after the fix - our new course was shared with the correct image"
/>
.

## Social networks cache link previews

Rather than redownload the preview image and metadata for a given link every time it's shared, your entire open graph preview is often cached. Depending on the site, that cache may be cleared regularly throughout the day.

Because we had _already_ posted links to our courses, every site we had shared to had cached our shared links with the bare defaults. The result was relatively plain, and not relevant to the content on the page - something like:

`Free online courses on design and web development | Gymnasium`

With Gymnasium's logo beside it. Just defaults! Not a great look.

Because we were working on a concerted marketing push to announce our new courses, these extremely plain previews were bad news. We've seen from experience that having an attractive (and differentiated) share image helps gain traction during the initial publicity of new content.

## _You_ can trigger a cache reset on each of these sites!

After some brief research, we found that there are tools to reset the cache on each of the major social networking sites. They're each extremely easy to use - paste your URL in a box, click a button, and reset the cache if necessary. Here's the ones we found to be useful:

### Use these links

- **Facebook Sharing Debugger**: [https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)
- **LinkedIn Post Inspector**: [https://www.linkedin.com/post-inspector/](https://www.linkedin.com/post-inspector/)
- **Twitter Card Validator**: [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)

That's all there is to it! Hit reset, re-share your link, and you should see your latest Open Graph preview shared. Phew! 😅


How to reset your Open Graph embed on LinkedIn, Twitter, and Facebook

Earlier today, we had a problem at [Gymnasium](https://thegymnasium.com).

_You_ can trigger a cache reset on each of these sites!


Put simply, [gitignore.io](https://gitignore.io) is a tool that is so profoundly helpful that I've _forgotten what life was like without it._

Its purpose is simple: for any project you're working on, it'll generate a valid [`.gitignore`](https://docs.github.com/en/rest/reference/gitignore) file for you. All you need to do is use the autocomplete box provided to describe the type of project you're working on:

<Image
  publicId="gitignore-fill-in-the-blanks"
  alt="Screenshot of the web interface for gitignore"
  border="2px solid #888"
  borderRadius="1rem"
/>

<Aside type="note">
  A <em>.gitignore</em> file is used to tell git to <em>exclude</em> files from
  being added to a given repo. Each line of the file represents a filename,
  directory, or pattern. When git looks for changes in your working directory,
  it will automatically ignore any file that matches an entry in your .gitignore
  file.
</Aside>

From there, you'll hit the `Create` button, which will bring you to a page that displays nothing but the raw text which you'll need to add to your project's `.gitignore`. If you selected just `react`, for example this is what you'd see on the next page:

```
  # Created by https://www.toptal.com/developers/gitignore/api/react
  # Edit at https://www.toptal.com/developers/gitignore?templates=react

  ### react ###
  .DS_*
  *.log
  logs
  **/*.backup.*
  **/*.back.*

  node_modules
  bower_components

  *.sublime*

  psd
  thumb
  sketch

  # End of https://www.toptal.com/developers/gitignore/api/react
```

That's all there is to it, too! I use it on the vast majority of projects I work on, new and old, and as far as I can tell, it hasn't let me down in any meaningful way.

## It's Open Source!

One of the reasons I like this tool so much is that it gets better the more people use it. Is it missing support for a project type that you work with? Go ahead and submit a [Pull Request](https://github.com/toptal/gitignore.io), and it may be integrated into the product one day. Or, if you're not quite comfortable with a full-on PR, you can start the discussion in an issue on the repo. Maybe something isn't working like you'd expect -- and it's worth pitching in your two cents in the discussion on an open issue. _All of that_ is contributing to Open Source -- don't forget!

As I understand it, it was created by [@joeblau](https://twitter.com/joeblau), and quickly gained momentum with developers. As I write this post, there are [**135** contributors](https://github.com/toptal/gitignore.io/graphs/contributors) on the project.

[Gitignore.io](https://gitignore.io) is a great example of a successful Open Source tool born out of the desire for an improved developer workflow. It currently appears to be operated by [TopTal](https://www.toptal.com/), a company that helps freelancers find work.

<Aside type="info">
  <small>
    (note for transparency: I have no connection to TopTal, and this is not a
    sponsored post. I <strike>do</strike> <em>(update: 11/2020) used to</em>{' '}
    work for{' '}
    <a
      href="https://aquent.com?utm_campaign=mikebifulco&utm_source=mikebifulco.com&utm_content=gitignore-io-is-great"
      target="_blank"
      rel="noopener noreferrer"
    >
      Aquent
    </a>
    , which is a creative staffing agency. If you're looking for work, give{' '}
    <strike>us</strike> them a look!).
  </small>
</Aside>

## There's a CLI

If you prefer it, there's a [CLI](https://docs.gitignore.io/install/command-line) which will help you generate gitignore files, powered by this same project. I can't say I've used it, but I know some of you will want to give it a go, so it's worth mentioning

## There's other options, too

If you don't find gitignore.io particularly appealing, there's always other ways to cretae your `.gitignore` file. You can write it by hand, or grab one from another project you work on. [GitHub also maintains a repo](https://github.com/github/gitignore) of popular gitignore files, which seems to be updated quite frequently as well.

### Was this helpful?

If you found this useful, I'd love it if you subscribed to my mailing list. Details are below!


Oh, hello