Forem: Chris Colborne

Object Destructuring 101

Chris Colborne — Sun, 08 Nov 2020 00:00:00 +0000

aka what on Earth does `doIt({ x: x2 = getX() } = {})` mean?!

You’re getting used to React. You’ve got components and arrow functions down pat. But then you run into this beast:

function doRender (
  ui,
  {
    state: initialState,
    options = getOptions({ overrides })
  } = {}
) { // ... }

Wait, what, how? Brackets and colons and equals, oh my! This little snippet breaks your brain. What was this developer thinking? Were they just being too clever, or what?!

Although it certainly is bracket soup, there is a method to the madness.

This is a few different levels of object destructuring, layered on top of each other, inside a function call. Let’s break it down bit by bit, so that you can read it like a pro.

Level 1: Basic Destructuring

First up, let’s start with the basics. Object destructuring is just a way of extracting certain keys directly from an object. It’s used quite heavily in React and other modern JavaScript frameworks. In fact you probably already use it. It looks like this in its basic form.

const myObject = {
  name: 'Chris',
  email: 'chris@example.com',
  city: 'Brisbane'
};

// extracts 'Brisbane' and assigns it to a variable `city`
const { city } = myObject;

Easy right? Let’s keep going.

Level 2: Renaming Destructuring

So next level, what if we already had a variable city? Let’s rename it as we extract it:

const myObject = {
  name: 'Chris',
  email: 'chris@example.com',
  city: 'Brisbane'
};

// oops we already have city in scope
const city = 'Sydney'; 

// extracts 'Brisbane' and assigns it to a variable `myCity`
const { city: myCity } = myObject;

Two from two, got it.

Level 3: Multi-Level Destructuring

Next up let’s tackle multi-level destructuring. That’s when the variable you want to destructure is actually nested inside another key. Let’s try and get at city and state in this nested object.

const myObject = {
  name: 'Chris',
  email: 'chris@example.com',
  address: {
    city: 'Brisbane',
    state: 'QLD'
  }
};

// now city variable is 'Brisbane' and state variable is 'QLD'
const {
  address: { city, state }
} = myObject;

Notice a trick here - address isn’t actually destructured, it’s just used to get at its children. If you wanted the full address as well, you could either destructure the address first, then destructure address into city and state, or destructure twice.

// destructure `address` then `city` from `address`
const { address } = myObject;
const { city } = address;

// destructure `address` itself, then `city` from within it
const {
  address,
  address: { city }
} = myObject;

Great, we’re starting to look like that initial snippet.

Level 4: Destructuring Defaults

Next level is destructuring defaults. Up until now, we’ve been assuming the data is there. But what happens if a particular key might be there, or might not? That’s where defaults come into play.

const myObject = {
  name: 'Chris',
  email: 'chris@example.com'
  // city is missing for this one
};

// `city` in this case will be `undefined`
let { city } = myObject; 

// let's add a default
// now `city` will be 'Sydney' since it's not set in `myObject`
let { city = 'Sydney' } = myObject; 

const myObject2 = {
  city2: 'Brisbane'
};
// but `city2` here will be 'Brisbane' since it was set in `myObject2`
const { city2 = 'Sydney' } = myObject2;

When we try to do multi-level destructuring (or more generally try to destructure something that might be undefined), that’s where we might run into problems. Take this example, we try and get the city from the address, but there is no address in myObject.

const myObject = {
  name: 'Chris',
  email: 'chris@example.com'
  // sometimes we have address, but not this time
  // address: {
  // city: 'Brisbane',
  // }
};

// bah bow - cannot read property 'city' of undefined
const {
  address: { city }
} = myObject; 

// so let's fix that with a default empty object
// now we're looking for `city` in an empty object, 
// which won't fail - `city` will be undefined
// but won't blow up
const { address: { city } = {} } = myObject;

Full Circle

So now we’re back to our original brain breaker. We can see now that all we’ve got is some multi-level destructuring with defaults.

Still not convinced? Ok, we’ll step through it bit by bit to make sure it sinks in:

// function call
function doRender (

  // first parameter called `ui`
  ui,

  // destructure the second parameter
  {

    // extract and rename `state` to variable `initialState`
    state: initialState,

    // extract `options` to a variable, and if it's unset, 
    // default to the result of `getOptions()`
    options = getOptions({ overrides })

    // finally, default the second parameter to empty object, as it is optional
  } = {}

) { // ... }

Hopefully, this has helped you see that even the most confusing looking destructuring is made up of these 4 levels. Parse them one by one, and you’ll be reading and writing code like this in no time.

Which Headless CMS should I use for a new Gatsby site?

Chris Colborne — Sun, 19 Apr 2020 00:00:00 +0000

Gatsby is an awesome static site generator, but you need to get your data from somewhere. What are your options for headless CMSs?

What is Gatsby?

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. It basically bashes together React, GraphQL and the so called JAM Stack to make some serious awesomeness.

What is the JAM Stack?

The JAM Stack is a name standing for a modern way of building sites/apps with JavaScript, APIs and Markup. Commonly it involves server side generated code from Markdown and/or API endpoints.

What is a headless CMS?

In this new JAM Stack world, your CMS backend and your frontend site are split. A headless CMS is simply a CMS which instead of pumping out HTML and CSS views, produces an API. There are many options from open source, to paid SaaS options, to trusty old WordPress.

What are the options?

Open source options

Netlify CMS

Netlify is one of the most common hosting providers for the JAM stack. They’ve built an open source SPA which you can install as an npm module on your site, to provide a CMS experience over GitHub and Markdown, complete with editorial workflow using pull requests.

Try it out

Strapi

Strapi is an open source, self hosted headless CMS written in Node. It provides both REST and GraphQL endpoints, with a customisable admin portal and API.

Try it out

Keystone

Keystone is a scalable, extensible and open-source platform to build NodeJS applications. It has first-class GraphQL support, and a great Admin UI.

Try it out

WordPress

Even though WordPress is obviously a full CMS and blogging platform, it can also be used as a headless CMS by using its REST API or using the WPGraphQL plugin to provide a GraphQL endpoint. One thing to note is that you may have more or less success depending on how many plugins you use.

Try it out

Software as a Service (SaaS)

Sanity

Sanity is one of the new breed of SaaS headless CMSs. It consists of an open source CMS admin UI which you install as an npm package and host. This allows you to easily extend for your own workflow with their extension ecosystem. The admin then connects to Sanity for storing the data, and for authentication.

Try it out |Pricing

Contentful

Contentful is one of the larger SaaS headless CMSs, and the oldest on our list here, being launched back in 2014. Clearly pitching themselves as the Enterprise solution, Contentful has the most clout, but also the price point to match. One thing to watch is that they may not have the features and extensibility common in the current generation of SaaS headless CMSs.

Try it out |Pricing

Prismic

Prismic is another of the new breed of SaaS headless CMSs. It provides an excellent hosted admin with the ability to easily add custom types, and publishes a REST and GraphQL API.

Try it out |Pricing

Forestry

Forestry has been described as Netlify CMS on steroids. Like Netlify CMS, it connects to GitHub to store markdown files which is great for portability. Unlike Netlify CMS however, Forestry also provides a hosted CMS admin UI, providing a more polished, managed solution. However you can also deploy the editor to your own site with Forestry Remote Admin.

Try it out |Pricing

Which one should you use?

Like everything, it depends! 🤷‍♂️

A lot of it comes down to how you want to store your data (git / hosted service) and the editing experience.

If it’s a commercial site, you’ve got the money, or just really want something turnkey, then try one of the SaaS options. They all have free plans to start, so sign up and try them out to see what fits.

If it’s a simple blog, Netlify CMS will do great. (in fact I’ll be using it for the new version of my blog!)

If it’s a bigger site / application, give a more full powered solution a go such as Keystone or Strapi.

And if you need to work with clients, you might be stuck with WordPress, but at least you can have some shiny front end tech and they get the benefits of a performant, secure site.

Can I use React Helmet to add social card meta tags for Twitter and Facebook?

Chris Colborne — Tue, 18 Feb 2020 08:30:00 +0000

So you’ve built an awesome React powered site. It’s shiny, and cool, and does everything you need… until your client/boss/best mate’s dad asks about social sharing meta tags. ‘Hey mate, I’ve heard you can put some tags in and I’ll get the cool card when I share my pages on Twitter and Facebook?’ Uhhh sure, just chuck them in React Helmet and you’ll be sweet right? But hang on, it’s not working!

So what’s the deal, can you add social share meta tags with React Helmet?

Absolutely… with a caveat.

See, the problem is that the various social networks don’t run your JavaScript and so won’t see your dynamically updated meta tags as they’re added on page load.

So the answer is that you need a way to either statically generate, or server-side render your React app.

Whilst not exhaustive, here are a couple of ways you can do that.

React Snapshot

Probably the easiest if you’ve just got a Create React App (CRA) app, is to use React Snapshot.

React Snapshot takes your CRA app, follows any internal links it can find and generates a static site.

Just a simple npm install, update 3 lines and you’ve got a statically generated site.

static-site-generator-webpack-plugin

If you’ve got a custom Webpack setup, you can use the static-site-generator-webpack-plugin

This plugin formed the basis of Gatsby (mentioned next) before version 2.

Gatsby

As primarily a static site generator, Gatsby can do this out of the box. If you use the blog starter, you can use the SEO component

Even if you’re not using the blog starter, you can use the SEO component for inspiration and implement it in your site.

Next.js

Next.js has a feature called Static HTML Export which can statically render your site.

$ next build && next export

And if you’re not using getInitialProps, you might not even need to use next export.

Next.js has a feature called Automatic Static Optimization which will automatically prerender .html files for those it can.

Testing your social cards

Once you’ve set up your social card meta tags, you can test your meta tags using the following tools.

Is it ever OK to set state directly? A setState cheat sheet

Chris Colborne — Mon, 03 Feb 2020 00:00:00 +0000

One of the parts of React that trips people up is understanding state and how to update it. A lot of this confusion comes from the fact that setState is asynchronous.

As they write in the React docs:

Think of setState() as a request rather than an immediate command to update the component.

(Note: I’ll be referring to setState, but it applies equally to the useState hook which we’ll cover later)

So if I want to update immediately, I should just update the state object directly… right?

this.state.myValue = 'newValue';

NO! If you do this, you’re opting out of React’s handling, and your component won’t re-render.

The reason setState exists is to allow React to produce a more efficient and better experience for the end user. By batching the state updates, it can prevent needless re-renders and can allow React to do even more smart handling of different priority updates, aka concurrent mode.

OK, OK, I’ll use setState. But what about the weird updater function syntax? Surely I don’t need that?

Actually you do.

setState (and useState) have two forms, the updater function and the stateChange object syntax.

// Updater function
// pass a function to show what to update
this.setState(prevState => {
  return { count: prevState.count + 1 };
});

// stateChange object
// pass an object to show what to update
this.setState({ name: 'New Name' });

Which one should I use when?

Here’s a quick rule of thumb.

If your next state depends on the current state, use the updater function. Otherwise you’re fine to pass an object in the stateChange syntax.

For example:

updating a count (updater function)
updating an object (updater function)
toggling a boolean (updater function)
setting a new string value (stateChange object)

What about hooks and useState?

All the cases above apply equally to the useState hook.

Where you would use the updater function in setState, use the updater function in your hook setter function.

See the below examples in both setState and useState hook.

So how about that cheat sheet?

Most situations can be boiled down to one of a few examples, shown below:

Updating a count

Relies on previous state, use updater function

// this.setState()
this.setState(prevState => {
  return { count: prevState.count + 1 };
});

// useState hook
const [count, setCount] = useState(0);
setCount(prevCount => prevCount + 1);

Updating an object

Relies on previous state, use updater function

// this.setState()
this.setState(prevState => {
  return { config: { ...prevState.config, ...updatedValues } };
});

// useState hook
const [config, setConfig] = useState({});
setConfig(prevConfig => ({ ...prevConfig, ...updatedValues }));

Toggling a boolean

Relies on previous state, use updater function

// this.setState()
this.setState(prevState => {
  return { isEnabled: !prevState.isEnabled };
});

// useState hook
const [isEnabled, setIsEnabled] = useState(true);
setIsEnabled(prevIsEnabled => !prevIsEnabled);

Setting a new string value

Doesn’t rely on previous state, use stateChange object

// this.setState()
this.setState({ stringValue: "doesn't rely on previous state" });

// useState hook
const [stringValue, setStringValue] = useState('a default string');
setStringValue("doesn't rely on the previous state");

To wrap up

Component state is one of the main concepts you need to understand in React. Remember these simple rules and you’ll never be confused by setState again!

Never change state directly: always use setState or the useState setter function.
If your next state depends on the current state, use the updater function.

Avoid npm build errors by tracking your Node version with nvm

Chris Colborne — Tue, 21 Jan 2020 08:15:00 +0000

You know the feeling. You get a spare moment jump in and do some updates on an old app. But you try to get it running and the dreaded npm errors come up.

Oftentimes, the issue is that you’ve updated Node since you last ran it. Many issues with dependencies and npm can been easily solved by switching Node versions.

Easy, so just go back to the version of node you used when you originally developed it. But how do you know which version to jump to? Just guess and check?

Perhaps you can leave a note in your README saying “This works in Node version X.” And sure, that’s certainly one way of solving it.

But using nvm, we can track the version, as well as automate the switch back, and that’s what we’ll talk about today.

nvm is Node Version Manager. It primarily allows you to switch between isolated Node environments for different versions. If you’ve used rvm/rbenv in Ruby, it’s similar to that.

For our purposes today however, the killer feature is the .nvmrc file. .nvmrc is a file you commit with your project which contains a single line with the version of Node to use for this project.

In a project with an .nvmrc file, you can type nvm use and it will automatically switch back to the version you’ve stated. If you’re really keen, you can (and I’d say you should) also set up your shell to automatically nvm use when it encounters an .nvmrc file.

So start using nvm and .nvmrc in your projects and next time you’re returning to an old project, you’re just an nvm use away from being back up and running quick smart.

Forem: Chris Colborne

Object Destructuring 101

aka what on Earth does doIt({ x: x2 = getX() } = {}) mean?!

Level 1: Basic Destructuring

Level 2: Renaming Destructuring

Level 3: Multi-Level Destructuring

Level 4: Destructuring Defaults

Full Circle

Which Headless CMS should I use for a new Gatsby site?

What is Gatsby?

What is the JAM Stack?

What is a headless CMS?

What are the options?

Open source options

Software as a Service (SaaS)

Which one should you use?

Can I use React Helmet to add social card meta tags for Twitter and Facebook?

React Snapshot

static-site-generator-webpack-plugin

Gatsby

Next.js

Testing your social cards

Is it ever OK to set state directly? A setState cheat sheet

So if I want to update immediately, I should just update the state object directly… right?

OK, OK, I’ll use setState. But what about the weird updater function syntax? Surely I don’t need that?

Which one should I use when?

What about hooks and useState?

So how about that cheat sheet?

Updating a count

Updating an object

Toggling a boolean

Setting a new string value

To wrap up

Avoid npm build errors by tracking your Node version with nvm

aka what on Earth does `doIt({ x: x2 = getX() } = {})` mean?!