
## The Big Idea

What if sleeping a little better, moving a little more, and finding a sense of purpose could measurably change your life?

Not as a vibe. As a fact, supported by decades of research.


## How to live a long, happy life

When researchers study people who live the longest, most fulfilling lives, they don't find hacks or extreme discipline. They find the same small behaviors repeated quietly over time.

Thankfully, there's no magic to it. The behaviors that have emerged are simple and accessible, and -- apparently -- they work. If you're looking for a "one weird trick" panacea, you won't find it here. The fact of the matter is that when you repeat a few seemingly small behaviors over and over again, they start to add up.


## Why tiny beats dramatic

Big changes fail because they ask too much, too fast. Small habits succeed because they're easy to repeat. I love that this is backed by actual, real Behavioral science, too - the data shows that consistency is better than intensity.

A tiny habit rarely feels life-changing in the moment. But repeated often enough, it changes what a normal day looks like. Enough normal days, and the long arc follows.

## The same habits, over and over again

Across longevity research, the same few habits appear again and again:

- **Adequate rest:** Roughly seven to eight hours of quality sleep, consistently.

- **Eating lots of plants:** Meals centered on vegetables, fruits, legumes, and whole grains, with moderate portions.

- **Daily, natural movement:** Low-impact movement woven into everyday life.

- **Strong social connection:** Regular time with friends, family, or community. It's a stronger predictor of happiness than wealth.

- **A sense of purpose and optimism:** Feeling useful, connected, and oriented toward something that matters.

Over the course of a lifetime, these tiny shifts in mindset and behavior can have a massive impact on you. And to me, at least, no single one of these sounds particularly difficult to maintain.

## Little changes that snuck up on me.

For years, I have been adopting little, bitty morsels of self-improvement. They help me to grow personally, stay balanced, and manage stress.

When I started managing a team at Google during the pandemic, I adopted a [simple morning ritual](https://mikebifulco.com/newsletter/continuous-self-improvement). I do five minutes of journaling, and five minutes of meditation. Nothing elaborate. That small routine helped me manage stress and show up more consistently for my team.

I've also been doing daily language learning for years. Just a few minutes a day stretches a different part of my brain, and has satisfied my personal desire to learn something new. Even better, I'm at least _conversational_ in Spanish, and I can read a surprising amount of Japanese by now!

## The Long View

Longevity and happiness are on my mind a lot lately - I've been thinking about shaping the long arc of my life's story. I want to be as happy as possible for the small amount of time I have on earth. It's as easy as that!

I find it very encouraging that there is research behind these ideas... If small habits can reliably improve a day, it's not much of a leap to believe they can shape decades too.

As the new year approaches, maybe it's worth a complete shift in perspective: You don't need a hard reset. Instead, maybe adopt a habit that's easy enough to keep, even on bad days.

Then, maybe: another one.

## My Question for You

**When you try to build new habits, what actually works for you? How do you keep yourself honest once the motivation fades?**

Hit reply and tell me. I read every response, and I'm genuinely curious.

---

## More reading

Ready to go all-in on longevity, habits, and happiness? Here are some of the resources I found myself reading that really grabbed my attention.

- [A Harvard Study of Adult Development](https://news.harvard.edu/gazette/story/2017/04/over-nearly-80-years-harvard-study-has-been-showing-how-to-live-a-healthy-and-happy-life) shows that close relationships and social connection are stronger predictors of long, healthy lives than wealth, fame, or status.
- [Blue Zones and the Power 9 Principles](https://pmc.ncbi.nlm.nih.gov/articles/PMC6125071/) is a study on communities where people live past 100 most often. It identifies common lifestyle traits tied to longevity, like natural movement, purpose, and plant-forward diets.


Science-Backed Secrets of Long, Happy Lives

Note: this is a follow-up to my [first post](https://mikebifulco.com/posts/deconfusing-javascript-destructuring-syntax) on destructuring.  Import syntax uses destructuring pretty liberally, and it can be really confusing for folks who are new to using it. Give my other article a read first if this all seems confusing!

Let's talk about importing dependencies into your node projects.  As your work gets more complex, you will inevitably come across syntax like this:

```js
 import React, { useState, useEffect } from 'react';
 import { Link } from 'gatsby';
 import Button from '@material-ui/core/Button';
 import moment from 'moment';
 ​
 import { Layout } from '../components';
```

At first glance, it's pretty straightforward.  We're importing a handful of bits to use in a React component.  As you might imagine, though, I've selected these four lines of code because each one is unique.  In fact, during my journey as a blossoming Node/React developer, I've found ways to mess up _every single one_ of these.

You're gonna mess this stuff up, too, and that's perfectly fine! For now, I'm here to help.

We're going to look through each one of these, in order of complexity, and I'll do my best to explain what the hell is going on, and the way I think about imports as I work.

## **Straightforward import syntax - the easiest case**

```js
import moment from 'moment';
```

If you've worked in .Net languages, or Python, or Ruby, or one of many other languages under the sun, this should be second nature to you.  I'm calling it out here specifically because some of us may never have seen it before.

### **What's going on here?**

Well, it turns out it's pretty easy.  [moment](https://www.npmjs.com/package/moment) is a JavaScript library, which has been included in our node project's `package.json` file's `dependencies` or `devDependencies`.  If you're new to node and are unfamilar with `package.json`, read more about it [here](https://nodesource.com/blog/the-basics-of-package-json-in-node-js-and-npm/).

This line of code creates a reference to everything made available in the `moment` library, and puts it into what is effectively a variable that we can use to access it.  the `'moment'` bit (in quotes) is what tells the compiler which library to get.  The other one, `moment` (_not_ in quotes) is the variable.  So from here in, we can access moment just like any other variable in this file:

```js
import moment from 'moment';

console.log(moment().get('year'));
// 2019
```

### **The un-obvious bit**

Behind the scenes, this is just taking everything that is made available by the `moment` library through `export default` [in its main file](https://github.com/moment/moment/blob/develop/src/moment.js#L95) , and stuffing it into a variable - and that variable can have _any valid name_ we want!

It may be confusing, but you absolutely could do this, if the this name made more sense to you:

```js
import ThatReallyUsefulDateLibrary from 'moment';

console.log(ThatReallyUsefulDateLibrary().get('year'));
// 2019
```

## **Importing a component from somewhere within a library**

Next up - this slightly more complex beast:

```js
import Button from '@material-ui/core/Button';
```

Here we're grabbing the `<Button />` component from the [@material-ui library](https://material-ui.com). Again, this is fairly straightforward - but it may be helpful to think of this in terms of the structure of the material-ui project.  Material-ui exports _loads_ of great stuff, and it's all organized into logical groupings.  Think of it a bit like this:

```js
// material-ui exports
const muiExports = {
 core: {
 Button: () => {}, // some component
 TextField: () => {}, // another useful component
 // and loads more
 },
};
```

With the import syntax for `Button` above, we're telling the compiler to give us a reference to the exported thing called `Button`, which is found in the `@material-ui` library under `/core/Button`.  The compiler essentially treats this like the JSON object in the snippet above.

Here's the thing - that _also_ means we can destructure it! 😁. This syntax would also work to import `Button`:

```js
import { Button } from '@material-ui/core';
```

That also means we can import _multiple things_ from `/core` in a single line!

```js
import { Button, TextField } from '@material-ui/core';
```

Cool, huh? I know this can be confusing, but try to stick with it.  It'll all start to make sense to you before long.  This brings us to our next example:

### **Importing a subset of a library by way of destructuring**

```js
import { Link } from 'gatsby';
```

Boom! This should be easy by now.  One of the things that `Gatsby` makes available is their [`link`](https://www.gatsbyjs.org/docs/gatsby-link/) component.  We're importing _just that component_ to use here.

### **Renaming an import**

But what if we already have a component called `Link` in our project? Or, what if we're making a Legend of Zelda fan-site, and `Link` is already defined in a component or variable that we can't rename?  Well, it turns out renaming something in an import is as easy as renaming something in a destructured statement.   We can rename the same component from `gatsby` like this:

```js
import { Link as GatsbyWebLink } from 'gatsby';
```

We can also rename _one or many destructured imports_ in a single statement:

```js
import {
 Link as GatsbyWebLink,
 graphql as graphqlQuery,
 useStaticQuery,
} from 'gatsby';
```

Piece of cake! 🍰

## **Relative imports**

One more quick thing - the compiler knows to look for something _you_ exported if you use a _relative path_ in your import location string:

```js
import { Layout } from '../components';
```

Just like anywhere else, you can combine and rename things to your heart's content here:

```js
import { Layout, Button as SuperButton } from '../components';
```

## **Putting it all together**

The best isn't alway last, but this is certainly the last example I've got to share today:

```js
import React, { useEffect, useState } from 'react';
```

If you've been playing along at home, this should all be familiar now - we're grabbing the default export from `react`, which we've put into the variable `react`.  We also destructured `useState` and `useEffect` from _the same library_.  If you're asking yourself "Well couldn't we also access `useState` as a child of `React`"? The answer is - well, actually, yeah!

This is perfectly valid

```js
const [loading, setLoading] = React.useState(false);
```

… but it's not as nice to type or to read as

```js
const [loading, setLoading] = useState(false);
```

They're both equally functional from an execution standpoint, but the latter is used by convention.

## **I think that's it.**

I think.  It turns out this was a really tricky post to write - there's a billion ways to import a file, and there's probably loads of cases I've missed here.  There are _definitely_ also performance and bundle size implications for some of the varieties of import syntaxes shown here.  While they're absolutely real constraints, and have real implications on your app's performance, I left that discussion for another day - purely for the sake of simplicity.

There's also the not-so-small matter that using [import](https://caniuse.com/#feat=imports) requires a transpiler like Babel or Webpack right now.  That's another super-complex universe that I'm not sure i'm equipped to explain in a single blog post.  This also means I've skipped showing how any of the above syntax works with `require()`.  There's frankly an exhausting amount to explain here - future improvements to EcmaScript and node will make it all better.

## **Say hi!**

As always, if I've gotten anything wrong here, I'd love to know about it! Drop me a line [@irreverentmike](https://twitter.com/irreverentmike).  I'd love to hear from you. 👋

Picking apart JavaScript import syntax

**Straightforward import syntax - the easiest case**

**Importing a component from somewhere within a library**

**Importing a subset of a library by way of destructuring**


(Note: This post was inspired by a talk from [Wes Bos](https://twitter.com/wesbos) at JAMstack_conf_nyc. Thanks for the tip, Wes!)

Of late, I've found myself building JavaScript web applications with increasing complexity. If you're familiar with modern JavaScript, you've undoubtedly come across [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) - a construct which helps you execute code asynchronously. A `Promise`  is just what it sounds like: you use them to execute code which will (promise to) return a value at some point in the future:

Check out this somewhat-contrived example, wherein we asynchronously load comments on a blog post:

```js
const loadComments = new Promise((resolve, reject) => {
  // run an asynchronous API call
  BlogEngine.loadCommentsForPost({ id: '12345' })
    .then((comments) => {
      // Everything worked! Return this promise with the comments we got back.
      resolve(comments);
    })
    .error((err) => {
      // something went wrong - send the error back
      reject(new Error(err));
    });
});
```

There's also an alternative syntax pattern, `async` / `await`, which lets you write promises in a more legible, pseudo-serial form:

```js
const loadComments = async () => {
  try {
    const comments = await BlogEngine.loadCommentsForPost({ id: '12345' });
    return comments;
  } catch (err) {
    return new Error(err);
  }
};
```

## Dealing with multiple promises

Inevitably, you'll find yourself in situations where you need to execute multiple promises. Let's start off simply:

```js
  const postIds = ['1', '2', '3', '4', '5'];
  postIds.each((id) => {
    // load the comments for this post
    const comments = await loadComments(id);

    // then do something with them, like spit them out to the console, for example
    console.log(`Returned ${comments.length} comments, bru`);
  })
```

Easy! A quick loop gets us comments for every post we're interested in. There's a catch here, though - the `await`  keyword will stop execution of the loop until `loadComments`  returns for each post. This means we're loading comments for each post _sequentially_, and not taking advantage of the browser's ability to send off multiple API requests at a time.

The easiest way to send off multiple requests at once is wit `Promise.all()`. It's a function which takes an _array of_ `_Promise_`_s_, and returns an array with the responses from each promise:

```js
  const postIds = ['1', '2', '3', '4', '5'];
  const promises = postIds.map(async (id) => {
    return await loadComments(id);
  };

  const postComments = Promise.all(promises);

  // postComments will be an Array of results fromj the promises we created:
  console.log(JSON.postComments);
  /*
  [
    { post1Comments },
    { post2Comments },
    etc...
  ]
```

There is **one important catch (lol)** with `Promise.all()`. If _any_ of the promises sent to `Promise.all()` fails or `reject`s,  *everything*  fails. From the \[MDN Web Docs\](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Promise/all) (emphasis mine):

> The `Promise.all()`  method returns a single `Promise`  that resolves when all of the promises passed as an iterable have resolved or when the iterable contains no promises. **\*\*It rejects with the reason of the first promise that rejects.\*\***

Well damn, it turns out that `Promise.all()`  is fairly conservative in its execution strategy. If you're unaware of this, it can be pretty dangerous. In the example above, it's not great if loading comments for _one post_ causes the comments for _every post_ not to load, right? Damn.

## **Enter** `**Promise.allSettled()**` 

Until fairly recently, there wasn't a spectacular answer for scenarios like this. \_\_However\_\_, we will soon have widespread access to [`Promise.allSettled()`](https://github.com/tc39/proposal-promise-allSettled), which is currently a Stage 3 proposal in front of the ECMAscript Technical Committee 39, the body in charge of approving and ratifying changes to ECMAscript (aka "JavaScript", for the un-initiated).

You see, `Promise.allSettled()`  does exactly what we'd like in the example above loading blog comments. Rather than failing if _any_ of the proments handed to it fail, it waits until they all finish executing (until they all "settle", in other words), and returns an array from each:

(this code sample is cribbed from the github proposal - go give it a look for more detail)

```js
const promises = [fetch('index.html'), fetch('https://does-not-exist/')];
const results = await Promise.allSettled(promises);
const successfulPromises = results.filter((p) => p.status === 'fulfilled');
```

## **Using** `**Promise.All()**` ** now (updated!)**

**4/26/19 Update:**

Install the [`core-js`](https://github.com/zloirock/core-js) package and include this somewhere in your codebase:

```js
import 'core-js/proposals/promise-all-settled';
```

**Original post:**

Ok, here's the thing - that's the tricky part. I wrote this post thinking it'd be as easy as telling you to use a `stage-3` preset in the `.babelrc` config on your project. As it turns out, as of v7, Babel has [stopped publishing stage presets](https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets)! If that means anything to you, you ought to read their post.

The answer right now is that it's _not_ yet a great idea to use `Promise.allSettled()`, because it isn't widely supported. To boot, as far as I can tell, there's not a babel config extension which will add support to your projects. At the moment, the best you'll get is a polyfill or an alternative library which implements `allSettled()`.

I know that can be disappointing - be sure that I've got a dozen problems that would be well-served with this new bit of syntax. What I want you to focus on, though, is how amazing it is that JavaScript is continuing to grow. It's exciting and really freaking cool to see that these additions to the language are also being worked on in [public](https://github.com/tc39/proposal-promise-allSettled). Open Source is such a beautiful thing!

If you're really motivated to use `Promise.All()`  in your code, you'd do well to contribute to the process in some way. This may be something as small as writing your own polyfill, or giving feedback to the folks involved with tc39, or one of the alternative libraries to use.

## Footnote

I'll do my best to keep this post up to date. When `allSettled` is released, I'll let y'all know. 👍


Solve* all your problems with Promise.allSettled()

**Using** `**Promise.All()**` ** now (updated!)**

## I really don't like my laptop.

I've been using a 2017 Macbook Pro for the past couple years.  As I'm sure you've heard, it is a fiercely disappointing device largely due to its courageous lack of ports, flawed keyboard design, and astonishing sticker price.  My personal machine is a 13" version, with 16GB of memory, _no_ touchbar, and a 256GB SSD. When I bought it, upgrading to 16GB of memory seemed far more important splurging on processor speed or disk space.  That's probably still true - but I've found myself endlessly frustrated by the tiny capacity of the SSD in my day to day work.

Roughly once every 6 weeks, my machine grinds to a halt as I run out of disk space, so I have to suffer through all the usual suspects for clearing up some room:

- empty the trash
- delete unused applications
- make sure all my photos are moved to my NAS, cloud storage, and offsite archives
- remove old virtualbox VM images

## A new kind of purge

Last week, however, I came across a surprising new way to free up some disk space: clearing out `node_modules` directories.

Curiosity hit me, and I searched my mac for folders named `node_modules`. This is what I found:

- My machine has `7,731` _total_  `node_modules` folders.  Wow!
- Under `~/src/**`, where I keep all of my dev projects, I had a grand total of 7,719 `node_modules`
- These folders contain _hundreds of thousands of files_ (which should be no surprise), and took up nearly **10GB** of disk space!

## Turtles all the way down 🐢🐢🐢

That last number was a bit of a revelation to me at first.  If you're unfamiliar, `node_modules` contains a copy of each of the [npm packages](https://www.npmjs.com) which you add to your project (with `npm install` or `yarn add`, etc) on projects which use node.  Each of them are pinned to a specific version, which is typically specified in `package.json`.

Somewhat logically, each of the dependencies in your project's `node_modules` directory may also have a `node_modules` directory, containing their dependencies, each pinned to a specific version (again, defined in the `package.json` file of that dependency).

This is where file and disk space bloat happen - the libraries you add to your project may each contain dozens of dependencies, each of which have dozens more, etc etc, all the way down to super basic node and C libraries which make up the fundamental building blocks of node.

(Mind you - This is oversimplifying things a bit - depending on how you set up `npm` or `yarn` , there is _some_ optimization done here. If one version of a given npm module is required more than once by your dependency tree, it may only appear once.)

## The fix

Actually, this was pretty easy to fix.  I did a search for all of the `node_modules` folders under `~/src/**`, and deleted all of them, right from finder (sorry, terminal apologists).  I then emptied the trash on my mac, and I was 10GB richer.

<Image
 publicId="posts/reclaimed-10gb-of-disk-space-from-node-modules/disk-space"
 alt="Screenshot of MacOS folder info for a node_modules search"
 caption="10 GB of space, just for node_modules!"
/>

## What did it break?

It's been a week since I've done this. So far the only inkling of a downside is that when I revisit projects I'm actively working on, I need to run `yarn install` to recreate the `node_modules` directory there. I switch between a good handful of projects, and I'm back to a fair few directories, but at least these are just the ones I'm currently using. I'm good with that.

<Image
 publicId="posts/reclaimed-10gb-of-disk-space-from-node-modules/terminal"
 alt="Terminal search for directories called node_modules"
 caption="A week later, I'm back up to 1209 node\_modules directories"
/>

## Can we do better?

There is an alternative to `npm` and `yarn` called [`pnpm`](https://pnpm.io/), which claims to be a "Fast, disk space efficient package manager".  Its primary feature looks promising:

<Image
 publicId="posts/reclaimed-10gb-of-disk-space-from-node-modules/pnpm"
 alt="pnpm's value prop - one version of each package saved to disk"
 caption="One version of each module sounds great"
/>

I haven't tried it yet, but will certainly be giving it a shot.

## Epilogue 

I think it's fair to say that this is a problem that the folks at npm and Facebook (who maintain yarn) are also looking closely at. My guess is that some healthy competition will improve this disk space nightmare... hopefully before I'm forced to buy a laptop with 1TB of storage. 🥳

---

### More reading

I'm certainly not the first one to write about this.  Some more great reading for you to check out, if you're interested:

- [The node_modules problem](https://dev.to/leoat12/the-nodemodules-problem-29dc)
- [What Happened When I Peeked Into My Node_Modules Directory](https://medium.com/s/silicon-satire/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558) (this is the infamous tongue-in-cheek Guy Fieri article)
- [What’s really wrong with node_modules and why this is your fault](https://hackernoon.com/whats-really-wrong-with-node-modules-and-why-this-is-your-fault-8ac9fa893823?gi=1ff87c0f83ba)

I reclaimed 10GB of disk space from node_modules

## We did it!

You all are amazing.  Last week I posted about [some stickers I designed](https://mikebifulco.com/posts/egg-them-all) and had put up for sale to benefit victims of the shooting in Christchurch, NZ.  They sold out far, _far_ more quickly than I ever would have guessed.  Having never done this before, I ordered a modest print run.  The next time I do something like this (and there _will_ be a next time), I'll double the order, at the very least.

This morning I made a donation to the [LaunchGood campaign](https://www.launchgood.com/campaign/support_for_the_families__victims_of_the_new_zealand_mosque_shootings), thanks to all of you:

<Image
 publicId="posts/sticker-update-we-raised-176-nzd/donation-confirmation"
 alt="Confirmation of our community donation to LaunchGood"
 caption="A powerful reminder that community is amazing. Thank you all!"
/>
.

It's a drop in a (thankfully) much larger bucket, but having some positive impact in what was starting to feel like a hopeless, dark time really means a lot to me.

Thank you all - keep making the world a better place. ❤️

Egg sticker update: We raised $176 NZD!

(note: the header photo from this article is from [Dakota Roos](https://unsplash.com/photos/dSRhwPe6v9c?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/structure?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).  Thank you for your work!)

[Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax in es6 (or es2015, etc) JavaScript is a wonderfully useful bit of the language.  It allows you to extract values from an `Object` and assign them to a new variable in one statement.  If you've not come across destructuring before, a fairly basic case looks like this:

```jsx
const person = {
 name: 'Mike Bifulco',
 height: 556,
 fears: ['heights', 'fire'],
};
const { name } = person;
console.log(name); // this will print 'Mike Bifulco'
```

So - what's happening here is pretty simple.  We are creating a `const` called `name`, and filling it with the value found in `person.name` . This is accomplished using the bracket structure to the left of the `=`.

(If you haven't seen or used this before, it can definitely be confusing.  Don't fault yourself for that - it'll become second-nature before long.)

There's are many other useful things you can do by way of destructuring.  For me, the most common among them are:

## Renaming

If you want to pluck a value from within an object, but also need to rename it (for purposes of code readability, perhaps), you can do so in one line:

```jsx
const person = {
 name: 'Mike Bifulco',
 height: 556,
 fears: ['heights', 'fire'],
};

const { height: currentHeight } = person;

console.log(currentHeight); // 556
console.log(height); // undefined!
```

Just like that, we've assigned `person.height` to `currentHeight` in one line.  Sweet!

## Extracting

You can extract one value from an object, and create another variable with everything else, you can do that, too:

```jsx
const person = {
 name: 'Mike Bifulco',
 height: 556,
 fears: ['heights', 'fire'],
};

const { fears, ...fearlessPerson } = person;

console.log(fearlessPerson.fears); // undefined!
console.log(fears[0]); // heights
```

This is a combination of destructuring syntax and the spread operator (`...` ). Very handy!

## Hard mode: complex destructuring

So both extracting and renaming things with destructuring are fairly straightforward.  I've been using both of those tricks comfortably for a while now.  In the past few months, I've been poking around with [GatsbyJS](https://gatsbyjs.org) for a few different projects (including my own website).  When I was starting to customize and implement my own Gatsby theme, I started to see some _really_ complex looking destructuring syntax, used to pull nested values from GraphQL queries throughout the site.

I was really thrown - at first glance, it's not obvious what's going on.  Let's take a look at an example, pulled from a React component used to render a single page in a Gatsby theme:

```jsx
const singlePage = ({
 data,
 location,
 pageContext: { nextPagePath, previousPagePath },
}) => {
 return ...react component markup;
};
```

There's a combination of things happening in the definition of the `singlePage` React component.  Let's look at just that destructure, and simplify it a bit:

```jsx
const {
 data,
 location,
 pageContext: { nextPagePath, previousPagePath },
} = props;
```

It took some staring, and some playing around to figure out what was being accomplished here, so let's run through it step by step:

1. The right side of this `const` is `= props` which tells us that all of these values are being destructured from an object called `props` .
2. The first two values, `data` and `location` make good sense - they look just like the examples above.  This line will create a `const` from each of those two paths in the `props` object.
3. `pageContext` is where things get interesting -  this is _another_ destructuring.  Somewhat confusingly, the values that are being pulled from `props` here are `nextPagePath` and `previousPagePath` . There is no variable being created for `pageContext` .

If that description didn't help - I don't blame you.  It really took some practice for me to understand what's going on.  I'm not even sure I would recommend using this syntax - it's not particularly easy to read, especially when tools like `prettier` squish it onto fewer lines.

With that said, it seems to be the way-to-go when pulling data from GraphQL queries on Gatsby (and likely elsewhere). If you're going to be working in that world, it's a good idea to familiarize yourself with what's going on here.

## Homework

I think the best way to get used to this syntax is just play around with it yourself.  I've created a JSBin which you can use to experiment a bit.  I'd love to hear how you do with it! [Check it out here](https://jsbin.com/kifizij/2/edit?js,console).

Some challenges for you:

- Rename the variable `displayName` to `currentUserName`
- Extract `editedBy` into its own variable
- Create an object called `meta` which contains everything in `directions` except for the `contactNumber`

## Wrapping up

I'd love to hear how you fare with this - I found myself writing this post as a matter of self-help.  Often times these things won't be made concrete until I practice in isolation for a while.  What creative uses do you have for destructuring? Did I get anything wrong here? Let's talk about it.

Understanding JavaScript Destructuring Syntax


# The Problem

Earlier tonight, my Macbook Pro decided it was done having disk space, and in the middle of a Time Machine backup, it started gnawing through every last bit of free space I had left.  Great.

In a frenzy of panic-and-uninstall, I came across an install of [Postgres](https://www.postgresql.org/) 9.x which I haven't used in quite a long time.   I wanted to carefully uninstall it, in part because I knew that the Postgres install process does loads of not-easy-to-clean things to your mac, including adding a user account to your device, and an app, and a bunch of settings.

My goodness, what a ride.

# The Solution

There's not a simple uninstaller for _everything_, so far as I can tell.

Eventually, the gods of web search brought me to [this beautiful gist](https://gist.github.com/Atlas7/b1a40a2ffd85728b33e7) on GitHub, which listed everything I needed to do to complete the uninstall safely. (I've also [forked](https://gist.github.com/mbifulco/1e44a2e9b7e3bd784f01ef5a138da829) the gist, in case the original ever disappears 😅).

I don't want to take any credit for the work - it seems to have originally come from [this blog post](https://hzchirs-blog.logdown.com/posts/142678-how-completely-uninstall-postgresql-9x-on-mac-osx) from 2013, which was not returned by my Bing-fu (yeah, you read that right).  

I'm posting it here in the hopes that will help some other soul in the future who is going through this experience.  Good luck out there!


Quick tip: Here's how to uninstall Postgres from your Mac

I wish I could do as much as I can to spare you the pain of hearing about the horrible shooting that happened in New Zealand last week.

But, as it works out, I'm really (really) mad about it.  So I made these angry little eggy guys, in honor of a particularly [woke-ass seventeen year old](https://www.youtube.com/watch?v=aht5XZFflzQ) who has made the news for publicly rebuking an Australian Senator who had some pretty disgusting views on the matter.

So, I've had a small run of these stickers made.  I'm going to sell them from my site, with 100% of proceeds going to the LaunchGood charity for the [United for Christchurch Mosque Shootings](https://www.launchgood.com/campaign/support_for_the_families__victims_of_the_new_zealand_mosque_shootings).

# So, want some stickers?

I'm not sure the best way to make this happen, but I'm thinking $5 for the pair of them.  They'll come die-cut, on a small sticker sheet which is about 2"x4" in size (so the stickers will be just smaller than half that size)  Want a set? Jump over to the [shop page](https://mikebifulco.com/shop#angry-little-egg), and we'll make it happen. Thanks in advance for putting some good energy into the world.

# Update: Sold out!

Thanks for all of your support - I had a small run of stickers made up, and they were all gone within 48 hours! Next time I do something like this, I'll double the order.  Thank you all for your help.  It means the world ❤️

<Image
 publicId="posts/egg-them-all/sold-out"
 alt="Screenshot of a donation to the Cristchurch Mosque charity for $173.33 USD"
 caption="We donated $173.33 to charity, thanks to you."
/>

Egg them all: a fundraiser for New Zealand

# Dashlane

<Image
 publicId="posts/chrome-extensions-i-use/dashlane"
 caption="Dashlane password manager Chrome Extension"
/>

First thing's first - get yourself a good password manager. I chose [Dashlane](https://www.dashlane.com/en/cs/mvKFbmiWCXxQ) (referral link) a few years back because of its security dashboard, which alerts you to your accounts which have been found in data breaches, any passwords you've used more than once, or passwords which are insecure.  Other great options are [1Password](https://1password.com/) and [LastPass](https://www.lastpass.com/).

# Elevate for Strava

<Image
 publicId="posts/chrome-extensions-i-use/elevate-for-strava"
 caption="Elevate helps me see how far I've ridden this year compared to years past."
/>

If nothing else, I am two things: a data nerd, and a [cyclist](https://www.instagram.com/p/Bqkko6CBtTu/).  I love cycling - it is my go to for exercise, meditation, and transport whenever possible.  Strava is the best service for aggregating GPS and biometric data recorded during cycling activities.  [Eleva](https://thomaschampagne.github.io/elevate/#/landing)[te](https://chrome.google.com/webstore/detail/elevate-for-strava/dhiaggccakkgdfcadnklkbljcgicpckn) is sugar on top of Strava - it adds a horde of wonderful data visualizations and progress measurements to the experience.  I frequently turn to the fitness trend tab to motivate myself to ride more regularly.  Did I mention that Elevate is [Open Source](https://github.com/thomaschampagne/elevate)? Heck yeah.

# FIO / Figure it Out

<Image
 publicId="posts/chrome-extensions-i-use/fio"
 caption="Screenshot of Figure It Out / FIO"
/>

One of the great luxuries of working in technology is being able to connect with people from wherever in the world you are.  In the past few years, I've been able to work from all over North America, Asia, and Europe, with folks spanning dozens of time zones.  I use FIO to see what time it is for my colleagues around the world.  With FIO installed, your new tabs in Chrome will show information about a collection of time zones (of your choosing), as well as a rough visualization of the state of daylight (or night light) where they are.  Brilliant!

# μBlock Origin

<Image
 publicId="posts/chrome-extensions-i-use/ublock"
 caption="uBlock Origin's README on GitHub"
/>

An ad-blocker that works reliably and quickly, and is [open source](https://github.com/gorhill/uBlock).  Be still my heart! uBlock stops annoying mid-roll ads on YouTube, and removes in-page ads from all over the internet.  Big quality of life improvement, and it's completely free.

# Toggl Button

<Image
 publicId="posts/chrome-extensions-i-use/toggl"
 caption="Toggl's use is simple: I use it as a timer for everything"
/>

I go through occasional phases where I track _all_ of my activities in a time tracker.  For me, the app of choice is Toggl, which is simple and intuitive, and lets me keep track of how long things are taking me via an app on my phone, their website, and this lovely browser extension.  It's clean and simple, and offers loads of integrations and customizations that might fit your productivity workflow, too.  The [Toggl Button for Chrome](https://chrome.google.com/webstore/detail/toggl-button-productivity/oejgccbfbmkkpaidnkphaiaecficdnfn) lives right next to the address bar, and stays out of the way when you don't need it.  I've gotten away with their Free plan for the most part - if you're using time tracking to bill customers, it's definitely worth looking at their paid features.

5 Chrome extensions I use for productivity

It's one of those things. Once you see it, you absolutely cannot _un-see_ it. You probably ended up here because someone saw you using your Blue Yeti on camera, and linked you to this article. This is an easy change, and it's for your own good.

## Enter the yeti

If you're a hobbyist podcaster, you've almost certainly come across recommendations for the [blue yeti](https://www.bluemic.com/en-us/products/yeti/) microphone. For about a hundred bucks, you get a decent quality condenser microphone that will plug into your computer via USB. Frankly, for the _vast_ majority of people getting into podcasting, it'll be more than you ever need, particularly if you use it correctly.

Funny enough, there is one other yelly-screamy ~~article~~ podcast about [if you're going to use a blue yeti, please use it right](https://podcasts.apple.com/us/podcast/if-youre-going-to-use-a-blue-yeti-please-use-it-right/id1175250113?i=1000569052086), but even that diatribe doesn't cover what I'm so peeved about. The Yeti has a problem - its audience is casual enough not to be expert on high end microphones, and they're not incentivized to learn about their new device.

Check this out:

<Image
 publicId="posts/my-favorite-design-problem/getting-started"
 alt="Excerpt from the user manual on Blue's website"
 caption={
 <>
 Excerpt from the user manual on Blue's{' '}
 <a href="https://www.bluemic.com/pdf/manuals/yeti/Blue_Yeti_QuickStartGuide-EN.pdf">
 website
 </a>
 </>
 }
/>

Most peoples' exposures to microphones are limited to weddings and bar mitzvahs, and the occasional rock concert or other public event. They're used to seeing folks using a handheld mic, and speaking into the top of it -

<Image
 publicId="posts/my-favorite-design-problem/performer-with-mic"
 alt="A performer singing into a handheld microphone"
 caption={
 <>
 A performer singing into a handheld microphone.
 
 Ana Paes on Unsplash
 </>
 }
/>

If you take apart a Yeti, underneath that chic metal-grate dome, you'll actually find 3 microphone capsules - none of them pointed upwards. There is no combination of settings on the Yeti that will yield great audio if you're speaking into the top of the device.

If you ask me (and you do), this isn't user error. The physical design of these types of microphones is ambiguous enough that their proper use isn't apparent. Folks who buy a Yeti are generally only exposed to microphones with a drastically different form factor - how are they supposed to know better?

## What to do about it

At some level, as long as they're selling like gangbusters, there's nothing that should motivate Blue to ever change the sleek design of their Yeti. In fact, they've expanded their Yeti lineup since its inception. You'll notice this design challenge is now present across a good few of [Blue's microphones](https://www.bluemic.com/en-us/).

<Image
 publicId="posts/my-favorite-design-problem/blue-lineup"
 alt="A few of Blue's microphones from their website - all of which have the same design challenge"
/>

If, hypothetically, Blue wanted to improve on this design to ensure that users of their mic had the best possible recording results, what could they do? Since they already include a whole-page sized warning in the bundled instruction manual for the product, I think the next best step is to physically change the product. Something as simple as a graphic silkscreened onto the mesh dome might do the trick:

<Image
 publicId="posts/my-favorite-design-problem/target"
 alt="Why not just put a target on the thing?"
/>

## Footnote

I should add that I don't mean to target Blue specifically. This isn't just about their microphone. This happens with any number of other mics from other companies with similar design. The Yeti just happens to be the most popular. In fact, I have one, and I use one - and it's great! Maybe that's why this burns me up so much.

Stop speaking into the top of your Blue Yeti Microphone

[Prettier](https://prettier.io/) is "an opinionated code formatter", built to fit into your developer workflow. It's been out in the world for quite a while now, but until today, I had never successfully used it in any project I worked on. In truth, there's a few reasons for this:

1. I was really used to (and really happy with) using [`eslint-config-airbnb`](https://www.npmjs.com/package/eslint-config-airbnb) for all of my projects. Across the board, I'd configured every node/react/js-based project to use the same airbnb config, and had a functional workflow for ensuring code quality at some level through those lint checks.
1. I was too busy to switch. This is a bit of a bullshit answer, since one of prettier's biggest advertised features is its lightweight setup. That's not to mention the amount of time that prettier _should_ save me once in use. A bad excuse.
1. **I could never get it to work(!)** So - despite being adept at reading through docs, every single time I started down the path of setting up prettier on a project, I couldn't get it to work. Despite my peers shouting from the rooftops about how deliciously sublime prettier makes the development workflow, it seemed like a permanent impasse.

## So what was the problem, then?

Well, it all came down to a formatting issue. The header image for this article tells the story: every time I installed prettier, when I triggered formatting with Visual Studio Code's `formatOnSave` setting, my React/jsx components would get scrambled. After some squinting, it appears that something was telling my IDE to treat these jsx files as pure Javascript, where `<` means "less than", and shouldn't ever be treated as the start of a component `<tag>`.

## The Fix

In my case, it came down to a conflicting extension for Visual Studio Code. It turns out that the [beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify) plugin takes precedence over Prettier in its default configuration. After some plucking around, I determined that if I _disable_ Beautify in the workspace where I'm using prettier, everything just suddenly... works. 😍

<Image
 publicId="posts/embracing-prettier/disable-beautify"
 alt="VS Code's extension interface showing the Beautify plugin, with an arrow pointing to the option that says 'Disable (workspace)'"
 caption="Disable beautify in your project workspace, and everything gets better"
/>

In my case, that was it! Prettier is now working as advertised.

The jury's still out on whether prettier is life-changing for me, but it's working, at the very least. My next step was to jump into `.prettierrc`, and override _just a few_ settings:

```js
 {
 "trailingComma": "es5",
 "semi": false,
 "singleQuote": true,
 "jsxSingleQuote": false,
 "tabWidth": 2
 }
```

_(note: this is my first time writing JavaScript without semicolons. I'm really breaking the rules now!)_

Oh, hello