
<YouTube youTubeId="cw1wlHV4hGk" />

Tools like Eleventy, Hugo, Gatsby, Svelte, and others have given developers a superpower for quickly developing content-driven, easily manageable web properties. It's an exciting frontier for developers who are also content creators, but for non-technical creators, our favorite toolchains can feel like a labyrinth of indecipherable choices.

In this talk, we'll discuss our role in promoting the creator economy. We'll talk about the opportunity we have as developers in helping to democratize content creation for everyone, and the importance of creating a more robust, archival internet.

[Check out the slides](https://docs.google.com/presentation/d/1XFJ_nQfPnX0oPOUezOEwVKLZFtptTKemtGg41RJPisQ)


JAM Stack, SSGs, and their role in empowering the creator economy


<Image
  publicId="external-references/proximity-acquires-smpl/cover"
  alt="A screenshot from a press release announcing proximity acquiring smpl"
/>

In early 2020, [smpl](https://www.crunchbase.com/organization/smpl-llc) was acquired by [Proximity](https://www.proximity.space). I was cofounder and CEO of smpl - we proudly helped independent coworking spaces manage their communities with automated billing, invoicing, and community management. It was a wild ride, and I couldn't have done it without my two amazing cofounders.

We were acquired by our biggest competitor, Proximity, who are continuing the dream by creating a network of amazing, independently owned coworking spaces around the world.

[Read the press release about the acquisition](https://www.proximity.space/news/proximity-acquires-smpl-software/) to find out more.

There is another (paywalled) article on [Business Insider](https://www.businessinsider.com/inside-a-coworking-software-deal-proximity-buys-smpl-2020-4) about the acquisition, too!

[More about smpl](https://www.crunchbase.com/organization/smpl-llc) on Crunchbase.

Tools we used to build smpl:

- [Firebase](https://firebase.google.com/)
- [Stripe](https://stripe.com)
- [React](https://reactjs.org)
- [Intercom](https://www.intercom.com)
- [LogRocket](https://logrocket.com)


Proximity Acquires SMPL Software


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>

## 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 .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)


<small>

_Note: I updated some names and links in this post. Dev.to's product became
**Forem** when it went open source_

</small>

So, like all good things, the idea for this post comes from a tweet:

<Tweet tweetLink="irreverentmike/status/1141169316273897536" align="center" />

This is something I've been ruminating on for a bit. I've even tried to build it - a few times! I keep starting in on the work and getting lost in the millions of directions I could take it.

Here's what I'd like: When I publish a new post to [my gatsby site](https://mikebifulco.com) (you're on it now!), I'd like for that post to appear on [dev.to](https://dev.to) automatically.

## It should:

- recreate my post verbatim, from its original markdown source
- use the `canonical_url` frontmatter field to make sure I retain SEO goodness on my post
- happen without my intervention
- be agnostic of where my posts are coming from. At the time of writing this article, I use [takeshape.io](https://www.takeshape.io) as a headless CMS for my site, so my individual posts aren't in source control
- only take posts from my `master` branch, since I use feature branches for draft posts from time to time
- use the [dev.to API](https://developers.forem.com/api) (update: now called the _Forem API_), of course

## Nice to have:

- maybe posts should be set to `published: false` at first, so I can preview/review/update them as needed for dev.to?

## Possible approaches for this:

1. Tap into GitHub's webhooks somehow, and fire off a post here
1. Come from a job kicked off after CI, maybe? I use CircleCI, but would like this feature to be fairly implementation agnostic.
1. Use a [GitHub App](https://developer.github.com/v3/apps/)?
1. ...or a [GitHub Action](https://github.com/mbifulco/thepraticaldev-crosspost-action)?
1. Perhaps just a lamba function deployed to AWS or [Netlify Functions](https://functions.netlify.com/).

So - here's where I ask for your help. Surely there's a simple approach here I haven't thought of, or maybe it's a matter of collecting a few scenarios and building something based on 80/20.

What else am I missing here? I'd love your help. What use cases would you have for a cross-poster from your gatsby site? How would you implement it? How can we help each other?


Do you have your own Gatsby site? Let's brainstorm a dev.to cross-poster


This is a follow-up to my [first post](https://mikebifulco.com/posts/solve-all-your-problems-with-promise-allsettled) on the upcoming `Promise.allSettled()` function, coming soon to a node application near you.

Earlier today I was greeted by a [Pull Request](https://github.com/mbifulco/blog/pull/14) on my first post from GitHub user `@j-f1`.

<Image
  publicId="posts/promise-all-settled-pt-2-its-partly-settled/pr"
  alt="Screenshot of a github pull request on my last blog post"
  caption="PR on my last post, showing how to use Promise.allSettled() now!"
/>

It turns out there _is_ a handy way to add `Promise.allSettled()` to your apps _right now!_ 🎉.  It's fiendishly simple to use, too.

## **The core-js npm package**

That's right - [core-js](https://github.com/zloirock/core-js).  From their `README.md`, it is exactly what it sounds like:

<Aside>

It is a polyfill of the JavaScript standard library, which supports:

- The latest ECMAScript standard.
- ECMAScript standard library proposals.
- Some WHATWG / W3C standards (cross-platform or closely related ECMAScript).

It is maximally modular: you can easily choose to load only the features you will be using.  
 It can be used without polluting the global namespace.  
 It is [tightly integrated with `babel`: this allows many optimizations of `core-js` import.](https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#Babel)

</Aside>

[Looking further down in the readme](https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#Babel), there's a list of supported features in the polyfill:

<Aside>

[Promise.allSettled](https://github.com/tc39/proposal-promise-allSettled) stage 2 proposal

</Aside>

Well hot damn! That'll do it!

## **How to use core-js**

As `@j-f1` indicated, in any project that uses `babel` as a transpiler, all you need to do is add core-js to your project, and include it at your app's entry point:

First, add the dependency to your project

```bash
    > yarn add core-js
```

Then, at your app's entry point (usually something like `index.js`, or `app.js` in the root of your project):

```js
import 'core-js';
```

or, if you want to include _just_ the `Promise.allSettled()` polyfill, and nothing else, use:

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

That's it! 🍻


Promise.allSettled() Pt.2 - it's partly settled!


(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()


[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!)_


#react: 9 posts tagged

Some things I learned from live coding on Twitch

JavaScript Tips: Nullish Coalescing (??)

JavaScript Tips: Using Array.filter(Boolean)

JAM Stack, SSGs, and their role in empowering the creator economy

Proximity Acquires SMPL Software

Do you have your own Gatsby site? Let's brainstorm a dev.to cross-poster

Promise.allSettled() Pt.2 - it's partly settled!

Solve* all your problems with Promise.allSettled()

Embracing Prettier

.css-1fb0br2{color:#A0AEC0;}#react: 9 posts tagged

JAM Stack, SSGs, and their role in empowering the creator economy

Proximity Acquires SMPL Software

#react: 9 posts tagged